2021-07-29

src/router/childrenRouters.js

@@ -9,7 +9,7 @@ const childrenRouters = [
       title: '牧场概况',
       defaultUrl: true,
       id: 1,
-    },
+    }
   },
   {
     path: '/hand',
@@ -66,6 +66,15 @@ const childrenRouters = [
       title: '设备管理',
       defaultUrl: false
     }
+  },
+  {
+    path: '/collectDay',
+    name: 'collectDay',
+    component: () => import('../views/collectData/collectDay.vue'),
+    meta: {
+      title: '牧场概况',
+      defaultUrl: false
+    }
   }
 ]
 

src/views/collectData/collectData.vue

@@ -53,6 +53,7 @@
         <div>表格</div>
       </div>
     </div>
+    <el-button @click="toCollectDay">每日汇总</el-button>
   </div>
 </template>
 
@@ -108,7 +109,7 @@ export default {
           value: 800000
         }
       ],
-      daySelected: 1, // 年月日选中值，默认日
+      daySelected: 2, // 年月日选中值，默认月
       timeSelected: '' // 时间选择器选中的时间
     }
   },
@@ -122,19 +123,52 @@ export default {
       this.daySelected = val
       switch (val) {
         case 1: // 日
-           
+          this.initEchart()
           break;
         case 2: // 月
-           
+          this.initEchart()
           break;
         case 3: // 年
-           
+          this.initEchart()
           break;
         default:
           break;
       }
+    },
+    toCollectDay () {
+      this.$router.push('/collectDay')
+    },
+    // echarts 图的数据
+    initEchart () {
+      this.$http({
+        url: this.$http.adornUrl(`http://192.168.1.57:8220/dataAnalysis/getPigStockByRegionCode`),
+        method: 'post',
+        data: this.$http.adornData({
+          'regionCode': "330000",
+          'start': "2021-07-20",
+          'end': "2021-07-29",
+          'type': 1
+        })
+      }).then(({data}) => {
+        console.log(data);
+      })
+    },
+    init () {
+      // this.$http({
+      //   url: this.$http.adornUrl(`http://192.168.1.57:8220/dataAnalysis/getPigStockByRegionCode`),
+      //   method: 'post',
+      //   data: this.$http.adornData({
+      //     'regionCode': this.form.id || undefined,
+      //     'start': this.form.registerTime + ' 00:00:00',
+      //     'end': this.form.deviceCode,
+      //     'type': this.form.countyName
+      //   })
+      // })
     }
   },
+  mounted() {
+    this.initEchart()
+  },
 }
 </script>
 

src/views/collectData/collectDay.vue

@@ -0,0 +1,325 @@
+<template>
+  <div class="collect-day">
+    <div class="day-title">
+      <span>每日汇总</span>
+      <div><el-button plain size="mini" @click="closeDay">关闭</el-button></div>
+    </div>
+    <!-- 母猪总存栏等 tags -->
+    <div class="box">
+      <div class="box_item" v-for="item in boxList" :key="item.id">
+        <p>{{item.name}}</p>
+        <p class="number">
+          {{item.value}}
+          <template v-if="item.data !==0">
+            <i :class="['icon', item.isUp ? '' : 'icon_red']"></i>
+            <span v-if="item.isUp" class="icon_green">+{{item.data}}</span>
+            <span v-else class="icon_dev">-{{item.data}}</span>
+          </template>
+        </p>
+      </div>
+    </div>
+    <!-- 查询条件 -->
+    <div class="form_item">
+      <el-form :inline="true" size="mini">
+        <el-form-item label="时间范围：">
+          <el-date-picker
+            v-model="searchForm.time"
+            type="datetimerange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="母猪存栏:">
+          <el-input style="width: 50px;" v-model="searchForm.pigAllMin"></el-input>
+          &nbsp;至&nbsp;
+          <el-input style="width: 50px;" v-model="searchForm.pigAllMax"></el-input>
+        </el-form-item>
+        <el-form-item label="母猪新增:">
+          <el-input style="width: 50px;" v-model="searchForm.pigAddMin"></el-input>
+          &nbsp;至&nbsp;
+          <el-input style="width: 50px;" v-model="searchForm.pigAddMax"></el-input>
+        </el-form-item>
+        <el-form-item label="耳标离线:">
+          <el-input style="width: 50px;" v-model="searchForm.eartagMin"></el-input>
+          &nbsp;至&nbsp;
+          <el-input style="width: 50px;" v-model="searchForm.eartagMax"></el-input>
+        </el-form-item>
+        <el-form-item label="能繁母猪:">
+          <el-input style="width: 50px;" v-model="searchForm.bearPigMin"></el-input>
+          &nbsp;至&nbsp;
+          <el-input style="width: 50px;" v-model="searchForm.bearPigMax"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="search">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 表格 -->
+    <div class="box_table">
+      <el-table
+        :data="tableData"
+        border
+        stripe
+        :header-cell-style="{'text-align':'center', 'background-color': '#F9FAFC', 'padding': '5px 0', 'color': '#666666'}"
+        :cell-style="{'text-align':'center', 'padding': '5px 0'}"
+        height="700"
+        row-key="name"
+        default-expand-all
+        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+        style="width: 100%;"
+        @row-click="rowClick">
+        <el-table-column
+          label="时间"
+          prop="name">
+          <template slot-scope="scope">
+            <span style="cursor: pointer;" @click="onSelect(scope.row)">{{scope.row.name}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="sowTotalStock"
+          label="母猪存栏">
+        </el-table-column>
+        <el-table-column
+          prop="eartagNew"
+          label="母猪新增">
+        </el-table-column>
+        <el-table-column
+          prop="eartagOffone"
+          label="耳标离线">
+        </el-table-column>
+        <el-table-column
+          prop="sowStock"
+          label="能繁母猪存栏">
+        </el-table-column>
+        <!-- TODO: 这啥玩意儿啊，不会啊 -->
+        <el-table-column label="存栏能繁母猪月龄分布">
+          <el-table-column
+            label="8月-20月">
+          </el-table-column>
+          <el-table-column
+            label="20月-32月">
+          </el-table-column>
+          <el-table-column
+            label="32月-44月">
+          </el-table-column>
+          <el-table-column
+            label=">44月">
+          </el-table-column>
+        </el-table-column>
+        <el-table-column
+          prop="stock1"
+          label="配怀存栏">
+        </el-table-column>
+        <el-table-column
+          prop="stock2"
+          label="分娩存栏">
+        </el-table-column>
+        <el-table-column
+          prop="stock3"
+          label="空怀存栏">
+        </el-table-column>
+        <el-table-column
+          prop="stock4"
+          label="后备存栏">
+        </el-table-column>
+        <el-table-column
+          prop="stock5"
+          label="公猪存栏">
+        </el-table-column>
+      </el-table>
+      <table-footer
+        :totals="totalPages"
+        :size="pageSize"
+        @sizeChange="sizeChange"
+        @pageChange="pageChange"></table-footer>
+    </div>
+  </div>
+</template>
+<script>
+import TableFooter from "../../components/TableFooter"
+export default {
+  data() {
+    return {
+      boxList: [
+        {
+          id: 1,
+          name: '母猪总存栏',
+          value: 2500,
+          data: 14,
+          isUp: true
+        },
+        {
+          id: 2,
+          name: '能繁母猪存栏',
+          value: 2400,
+          data: 0,
+          isUp: true
+        },
+        {
+          id: 3,
+          name: '配怀存栏',
+          value: 1689,
+          data: 0,
+          isUp: false
+        },
+        {
+          id: 4,
+          name: '分娩存栏',
+          value: 711,
+          data: 0,
+          isUp: true
+        },
+        {
+          id: 5,
+          name: '后备存栏',
+          value: 100,
+          data: 0,
+          isUp: true
+        },
+        {
+          id: 6,
+          name: '今年累计出栏量',
+          value: 30000,
+          data: 214,
+          isUp: true
+        },
+        {
+          id: 7,
+          name: '今年累计出栏量',
+          value: 50000,
+          data: 314,
+          isUp: true
+        }
+      ],
+      searchForm: {
+        time: [],
+        pigAllMin: '', // 母猪存栏
+        pigAllMax: '',
+        pigAddMin: '', // 母猪新增
+        pigAddMax: '',
+        eartagMin: '', // 耳标离线
+        eartagMax: '',
+        bearPigMin: '', // 能繁母猪
+        bearPigMax: ''
+      },
+      tableData: [],
+      totalPages: 0,
+      pageNum: 1,
+      pageSize: 20
+    }
+  },
+  components: {
+    TableFooter
+  },
+  methods: {
+    // 关闭按钮，回到数据分析页面
+    closeDay () {
+      this.$router.push('/collectData')
+    },
+    search () {
+      console.log('查询');
+    },
+    // 修改size
+    sizeChange(val) {
+      this.pageSize = val;
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum = val;
+    },
+    rowClick (row) {
+      console.log(row);
+      console.log('点击了某一行');
+    },
+    // init () {
+    //   this.$http({
+    //     url: this.$http.adornUrl(`http://192.168.1.57:8220/dataAnalysis/getPigStockByRegionCode`),
+    //     method: 'post',
+    //     data: this.$http.adornData({
+    //       'regionCode': this.form.id || undefined,
+    //       'start': this.form.registerTime + ' 00:00:00',
+    //       'end': this.form.deviceCode,
+    //       'type': this.form.countyName
+    //     })
+    //   })
+    // }
+  }
+}
+</script>
+<style scoped>
+.collect-day {
+  padding: 10px 20px;
+}
+.day-title {
+  border: 1px solid #ddd;
+  font-size: 14px;
+  background-color: rgba(243, 243, 243, 1);
+  height: 45px;
+  line-height: 45px;
+  padding: 0 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+/deep/ .el-form--inline .el-form-item {
+  margin-right: 15px;
+}
+.box{
+  width: 100%;
+  height: 140px;
+  background-color: #F9F9F9;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.box_item {
+  width: 198px;
+  height: 78px;
+  border: 1px solid #ddd;
+  text-align: center;
+}
+.box_item p {
+  height: 39px;
+  line-height: 39px;
+  margin: 0;
+}
+.icon {
+  display: inline-block;
+  background-image: url("../../assets/up.png");
+  width: 24px;
+  height: 24px;
+  background-size: 100% 100%;
+}
+.icon_red {
+  background-image: url("../../assets/decline.png");
+  background-size: 100% 100%;
+}
+.number {
+  font-size: 24px;
+  font-weight: 600;
+}
+.icon_green {
+  color: #33FA40;
+  font-size: 16px;
+}
+.icon_dev {
+  color: #DA331D;
+  font-size: 16px;
+}
+.form_item {
+  width: 100%;
+  height: 60px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  box-sizing: border-box;
+  padding: 15px;
+}
+.box_table {
+  width: 100%;
+  box-sizing: border-box;
+  margin-top: 10px;
+  padding-right: 10px;
+  /*padding: 10px;*/
+}
+</style>

src/views/deviceAdmin/addOrUpdate.vue

@@ -29,7 +29,8 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="省市县名：" prop="countyName">
-            <el-input v-model="form.countyName"></el-input>
+            <!-- <el-input v-model="form.countyName"></el-input> -->
+            <area-zz v-model="form.countyName" @getCityCode="getCityCode"></area-zz>
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -124,6 +125,7 @@
 </template>
 <script>
 import {mapState} from 'vuex'
+import areaZz from '../../components/areaZz.vue'
 export default {
   data() {
     return {
@@ -200,6 +202,9 @@ export default {
   computed: {
     ...mapState(['baseUrl'])
   },
+  components: {
+    areaZz
+  },
   methods: {
     init (row) {
       this.visible = true
@@ -247,6 +252,11 @@ export default {
       }
       return fmt; 
     },
+    // 省市县
+    getCityCode (val) {
+      let len = val.length
+      this.form.countyCode = val[len-1]
+    },
     // 选择框的选择顺序
     handleFocus (ref, formItem) {
       const msg = {

src/views/deviceAdmin/deviceAdmin.vue

@@ -206,8 +206,8 @@
         <template slot-scope="scope">
           <el-button type="text" size="small" @click="handleCheck(scope.row)">查看</el-button>
           <el-button type="text" size="small" @click="handleAddOrEdit(scope.row)">编辑</el-button>
-          <el-button type="text" size="small" @click="handleLogout(scope.row.id)">注销</el-button>
-          <el-button type="text" size="small">删除</el-button>
+          <el-button type="text" size="small" @click="handleLogout(scope.row)">注销</el-button>
+          <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
         </template>
         <!-- TODO: 按钮 -->
       </el-table-column>
@@ -411,10 +411,67 @@ export default {
       })
     },
     // 注销按钮
-    handleLogout (id) {
-      console.log(id);
-      // TODO: 明天再做.
-    }
+    handleLogout (row) {
+      this.$confirm(`确定注销编码为{${row.deviceCode}}的设备？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: this.$http.adornUrl(`${this.baseUrl}/manager/collectorregister/update`),
+          method: 'post',
+          data: this.$http.adornData({
+            id: row.id,
+            canStatus: 0
+          })
+        }).then(result => {
+          if (result.data.code === 0) {
+            this.init()
+            this.$message({
+              message: `成功注销编码为{${row.deviceCode}}的设备`,
+              type: 'success',
+              duration: 1000
+            })
+          } else {
+            this.$confirm(result.data.msg, '注销失败', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            })
+          }
+        })
+      })
+    },
+    // 删除按钮
+    handleDelete (row) {
+      let ids = [row.id]
+      this.$confirm(`确定删除编码为{${row.deviceCode}}的设备？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: this.$http.adornUrl(`${this.baseUrl}/manager/collectorregister/delete`),
+          method: 'post',
+          data: this.$http.adornData(ids, false)
+        }).then(result => {
+          if (result.data.code === 0) {
+            this.init()
+            this.$message({
+              message: `成功删除编码为{${row.deviceCode}}的设备`,
+              type: 'success',
+              duration: 1000
+            })
+          } else {
+            this.$confirm(result.data.msg, '删除失败', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            })
+          }
+        })
+      })
+    },
   },
   mounted() {
     this.init()