000

src/views/collectData/charts/hisChart.vue

@@ -115,10 +115,13 @@ export default {
 </script>
 <style scoped>
 .his-chart {
-  width: 1000px;
+  height: 320px;
+  padding: 20px 20px;
   margin: auto;
 }
 .his {
-  min-height: 250px;
+  width: 100%;
+  height: 300px;
+  margin: auto;
 }
 </style>

src/views/collectData/collectData.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="collectData">
+    <div class="header_title">数据分析</div>
     <!-- 汇总数据的 nav -->
     <div class="box">
-      <label>区域选择：</label>
-      <area-zz @getCityCode="getCityCode"></area-zz>
+      <label>母猪存栏区域选择：</label>
+      <area-zz :countyCode="330000" @getCityCode="getCityCode"></area-zz>
       <div class="box_item" v-for="item in boxList" :key="item.id">
         <p>{{item.name}}</p>
         <p>{{item.value}}</p>
@@ -12,7 +13,7 @@
 
     <!-- 以下为图表 -->
     <div>
-      <div class="chartDiv">
+      <!-- <div class="chartDiv">
         <div class="title">
           <span>母猪总存栏走势</span>
           <div class="right">
@@ -66,12 +67,14 @@
           </div>
         </div>
         <line-chart :lineList="lineList"></line-chart>
-      </div>
+      </div> -->
       <div class="chartDiv">
         <div class="title">
           <span>各牧场母猪存栏比较</span>
         </div>
-        <his-chart :hisList="hisList"></his-chart>
+        <div>
+          <his-chart :hisList="hisList"></his-chart>
+        </div>
       </div>
       <div class="chartDiv">
         <div class="title">
@@ -118,7 +121,8 @@
             :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
             style="width: 100%;"
             @selection-change="selectFarm"
-            ref="table">
+            ref="table"
+            @row-click="rowClick">
             <el-table-column
               type="selection"
               width="55">
@@ -220,7 +224,7 @@
 </template>
 
 <script>
-import lineChart from './charts/lineChart.vue'
+// import lineChart from './charts/lineChart.vue'
 import hisChart from './charts/hisChart.vue'
 import areaZz from '../../components/areaZz.vue'
 import TableFooter from "../../components/TableFooter"
@@ -239,12 +243,12 @@ export default {
         },
         {
           id: 2,
-          name: '预计年出栏量',
+          name: '母猪目标存栏',
           value: 500000
         },
         {
           id: 3,
-          name: '母猪目标存栏',
+          name: '预计年出栏量',
           value: 40000
         },
         {
@@ -289,7 +293,7 @@ export default {
     ...mapState(['selected'])
   },
   components: {
-    lineChart,
+    // lineChart,
     hisChart,
     areaZz,
     TableFooter,
@@ -381,11 +385,14 @@ export default {
         }
       })
     },
-    // // 点击表格的某一行
-    // rowClick (row) {
-    //   console.log(row);
-    //   console.log('点击了某一行');
-    // },
+    // 点击表格的某一行
+    rowClick (row) {
+      this.updateSelected(1);
+      this.$router.push({
+        path: '/',
+        query: {farmCode: row.farmCode, type: 4}
+      })
+    },
     // 牧场对比
     selectFarm (val) {
       this.constrastShow = true
@@ -459,14 +466,14 @@ export default {
         }
       })
     },
-    // 跳转
-    onSelect() {
-      this.updateSelected(1);
-      this.$router.push({
-        path: '/',
-        query: {farmCode: 'N0003', type: 4}
-      })
-    }
+    // // 跳转
+    // onSelect() {
+    //   this.updateSelected(1);
+    //   this.$router.push({
+    //     path: '/',
+    //     query: {farmCode: 'N0003', type: 4}
+    //   })
+    // }
   },
   mounted() {
     this.initEchart();
@@ -477,6 +484,15 @@ export default {
 </script>
 
 <style scoped>
+.header_title {
+  height: 40px;
+  background-color: #F7F7F7;
+  border: 1px solid #ddd;
+  line-height: 40px;
+  color: #6FA8C8;
+  margin-bottom: 10px;
+  padding-left: 20px;
+}
 .box {
   width: 100%;
   height: 140px;

src/views/deviceAdmin/addOrUpdate.vue

@@ -29,20 +29,15 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="省市县名：" prop="countyName">
-            <!-- <el-input v-model="form.countyName"></el-input> -->
-            <area-zz v-model="form.countyName" @getCityCode="getCityCode" ref="county"></area-zz>
+            <area-zz 
+              :countyCode="330000" 
+              v-model="form.countyCode" 
+              @getCityCode="getCityCode"
+              style="width: 178px;"></area-zz>
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="省市县编码：" prop="countyCode">
-            <el-input v-model="form.countyCode"></el-input>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="牧场名：" prop="farmName">
-            <!-- <el-input v-model="form.farmName"></el-input> -->
+          <el-form-item label="牧场名：" prop="farmCode">
             <el-select v-model="form.farmCode" style="width: 178px;">
               <el-option
                 v-for="item in farmSelectedList"
@@ -53,6 +48,20 @@
             </el-select>
           </el-form-item>
         </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="阶段：" prop="stage">
+            <el-select v-model="form.stage" style="width: 178px;">
+              <el-option
+                v-for="item in stageList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
         <el-col :span="12">
           <el-form-item label="栋舍：" prop="pigpenId">
             <!-- <el-input v-model="form.pigpenId"></el-input> -->
@@ -92,24 +101,12 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="阶段：" prop="stage">
-            <el-select v-model="form.stage" style="width: 178px;">
-              <el-option
-                v-for="item in stageList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
           <el-form-item label="上传服务器地址：" prop="serverIp">
             <el-input v-model="form.serverIp"></el-input>
           </el-form-item>
         </el-col>
+      </el-row>
+      <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="端口：" prop="port">
             <el-input v-model="form.port"></el-input>
@@ -134,7 +131,6 @@ export default {
         id: 0,
         registerTime: '',
         deviceCode: '',
-        countyName: '',
         countyCode: '',
         farmCode: '',
         stage: '',
@@ -199,12 +195,22 @@ export default {
         deviceCode: [
           { required: true, message: '设备编码不能为空', trigger: 'blur' }
         ],
-        countyName: [],
-        countyCode: [],
-        farmName: [],
-        farmCode: [],
-        stage: [],
-        pigpenId: [],
+        // countyName: [],
+        countyCode: [
+          { required: true, message: '省市县不能为空', trigger: 'blur' }
+        ],
+        unitId: [
+          { required: true, message: '单元不能为空', trigger: 'blur' }
+        ],
+        farmCode: [
+          { required: true, message: '牧场不能为空', trigger: 'blur' }
+        ],
+        stage: [
+          { required: true, message: '阶段不能为空', trigger: 'blur' }
+        ],
+        pigpenId: [
+          { required: true, message: '栋舍不能为空', trigger: 'blur' }
+        ],
         serverIp: [
           { required: true, message: '上传服务器地址不能为空', trigger: 'blur' }
         ],
@@ -223,16 +229,9 @@ export default {
   },
   methods: {
     init (row) {
+      console.log(row);
       this.visible = true
       this.form.registerTime = this.getDate(new Date())
-      if (row.id) { // 如果没有参数传入，默认传入鼠标点击事件
-        console.log(row);
-        for (const key in this.form) {
-          if (Object.hasOwnProperty.call(this.form, key)) {
-            this.form[key] = row[key]
-          }
-        }
-      }
       this.$http({
         url: this.$http.adornUrl(`${this.baseUrl}/manager/basepigpen/listAll`),
         method: 'get'
@@ -244,6 +243,16 @@ export default {
         this.farmList = farmResult.data.data
         this.farmSelectedList = this.farmList
         this.pigpenList = data.page
+        this.pigpenSelectedList = this.pigpenList
+        if (row.id) { // 如果没有参数传入，默认传入鼠标点击事件
+          let pigpen = this.pigpenSelectedList.find(item => item.id === row.pigpenId)
+          this.unitSelectedList = pigpen.children
+          for (const key in this.form) {
+            if (Object.hasOwnProperty.call(this.form, key)) {
+              this.form[key] = row[key]
+            }
+          }
+        }
       }).catch(() => {})
     },
     // 获取时间格式：2021-07-28
@@ -272,7 +281,6 @@ export default {
     getCityCode (val) {
       let len = val.length
       this.form.countyCode = val[len-1]
-      console.log(this.$refs.county);
     },
     // 选择框的选择顺序
     handleFocus (ref, formItem) {
@@ -305,12 +313,11 @@ export default {
               'id': this.form.id || undefined,
               'registerTime': this.form.registerTime + ' 00:00:00',
               'deviceCode': this.form.deviceCode,
-              'countyName': this.form.countyName,
               'countyCode': this.form.countyCode,
-              'unitId': this.form.unitId || undefined,
+              'unitId': this.form.unitId,
               'farmCode': this.form.farmCode || undefined,
               'stage': this.form.stage || undefined,
-              'pigpenId': parseInt(this.form.pigpenId) || undefined,
+              'pigpenId': parseInt(this.form.pigpenId),
               'serverIp': this.form.serverIp,
               'port': this.form.port
             })
@@ -343,19 +350,74 @@ export default {
     /** 根据 farmCode 确定猪舍 */
     'form.farmCode': {
       handler (newValue) {
-        this.form.pigpenId = ''
+        // this.form.pigpenId = ''
         if (newValue) {
           this.pigpenSelectedList = this.pigpenList.filter(item => item.farmCode === newValue)
+          let pigpenIds = []
+          this.pigpenSelectedList.forEach(item => {
+            pigpenIds.push(item.farmCode)
+          })
+          if (pigpenIds.indexOf(newValue) === -1) {
+            this.form.pigpenId = ''
+          }
         }
       }
     },
     /** 根据 pigpenId 确定单元 */
     'form.pigpenId': {
       handler (newValue) {
-        this.form.unitId = ''
+        // this.form.unitId = ''
         if (newValue) {
           let pigpen = this.pigpenSelectedList.find(item => item.id === newValue)
           this.unitSelectedList = pigpen.children
+          let unitIds = []
+          this.unitSelectedList.filter(item => {
+            unitIds.push(item.id)
+          })
+          console.log(unitIds);
+          if (unitIds.indexOf(this.form.unitId) === -1) {
+            this.form.unitId = ''
+          }
+        }
+      }
+    },
+    'form.countyCode': {
+      handler (newValue) {
+        console.log(newValue);
+        // this.form.unitId = ''
+        if (newValue) {
+          this.$http({
+            url: this.$http.adornUrl(`${this.baseUrl}/management/basefarminfo/findByCityCode`),
+            method: 'get',
+            params: this.$http.adornParams({
+              'countyCode': newValue
+            })
+          }).then(({data}) => {
+            console.log(data);
+            this.farmSelectedList = data.page
+            let farmIds = []
+            this.farmSelectedList.forEach(item => {
+              farmIds.push(item.farmCode)
+            })
+            if (farmIds.indexOf(this.form.farmCode) === -1) {
+              this.form.farmCode = ''
+            }
+            // if(data.code === 0) {
+            //   this.tableData = data.page.list
+            // } else {
+            //   this.hisList = [];
+            // }
+          })
+          // let pigpen = this.pigpenSelectedList.find(item => item.id === newValue)
+          // this.unitSelectedList = pigpen.children
+          // let unitIds = []
+          // this.unitSelectedList.filter(item => {
+          //   unitIds.push(item.id)
+          // })
+          // console.log(unitIds);
+          // if (unitIds.indexOf(this.form.unitId) === -1) {
+          //   this.form.unitId = ''
+          // }
         }
       }
     }

src/views/deviceAdmin/deviceAdmin.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="device-management">
+    <div class="header_title">设备管理</div>
     <!-- 设备管理 -->
     <div class="box">
       <div class="box_item" v-for="item in boxList" :key="item.id">
@@ -16,7 +17,8 @@
             v-model="searchForm.registerTime"
             type="daterange"
             placeholder="选择日期"
-            style="width: 200px">
+            style="width: 200px"
+            value-format="yyyy-MM-dd">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="省市县：" prop="countyName" style="width: 310px">
@@ -196,7 +198,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)">注销</el-button>
+          <el-button v-if="scope.row.canStatus === 1" type="text" size="small" @click="handleLogout(scope.row)">注销</el-button>
+          <el-button v-else type="text" size="small" @click="handleLogin(scope.row)">在线</el-button>
           <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
         </template>
         <!-- TODO: 按钮 -->
@@ -251,9 +254,9 @@ export default {
         deviceCode: '',
         countyName: '',
         farmName: '',
-        networkStatus: '',
-        acqStatus: '',
-        canStatus: '',
+        networkStatus: undefined,
+        acqStatus: undefined,
+        canStatus: undefined,
         // sortord: ''
       },
       pageSizeList: [ // 表格显示条数
@@ -359,6 +362,7 @@ export default {
   methods: {
     // 初始化
     init () {
+      console.log(this.searchForm.registerTime);
       this.$http({
         url: this.$http.adornUrl(`${this.baseUrl}/manager/collectorregister/list`),
         method: 'get',
@@ -375,7 +379,15 @@ export default {
           'canStatus': this.searchForm.canStatus?? undefined
         }, false)
       }).then(async({data}) => {
-        console.log(data);
+        let res = await this.$http({
+          url: this.$http.adornUrl(`${this.baseUrl}/manager/collectorregister/selectPcEveryStatusCollectors`),
+          method: 'get'
+        })
+        this.boxList[0].value = res.data.data.total
+        this.boxList[1].value = res.data.data.normal
+        this.boxList[2].value = res.data.data.abnormal
+        this.boxList[3].value = res.data.data.logout
+        console.log(res);
         this.tableData = data.page.list
         this.totalPages = data.page.totalPage
         this.dataListLoading = false
@@ -445,6 +457,38 @@ export default {
         })
       })
     },
+    // 在线按钮
+    handleLogin (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: 1
+          })
+        }).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]
@@ -483,6 +527,15 @@ export default {
 </script>
 
 <style scoped>
+.header_title {
+  height: 40px;
+  background-color: #F7F7F7;
+  border: 1px solid #ddd;
+  line-height: 40px;
+  color: #6FA8C8;
+  margin-bottom: 10px;
+  padding-left: 20px;
+}
 .box{
   width: 100%;
   height: 140px;

src/views/deviceAdmin/deviceInfo.vue

@@ -1,62 +1,65 @@
 <template>
-  <div class="device-info">
+  <div>
+    <div class="header_title">设备详情</div>
+    <div class="device-info">
     <!-- 标题 -->
-    <div class="deviceTitle">
-      <span>设备号{{ info.deviceCode }}详情</span>
-      <div><el-button plain size="mini" @click="closeInfo">关闭</el-button></div>
-    </div>
-    <!-- 表格 -->
-    <div>
-      <table class="table">
-        <tr>
-          <th>设备编号</th><td>{{ info.deviceCode }}</td>
-          <th>注册ID</th><td>{{ info.id }}</td>
-        </tr>
-        <tr>
-          <th>省市县</th><td>{{ info.countyName }}</td>
-          <th>省市县编码</th><td>{{ info.countyCode }}</td>
-        </tr>
-        <tr>
-          <th>牧场名称</th><td>{{ info.farmName }}</td>
-          <th>牧场编码</th><td>{{ info.farmCode }}</td>
-        </tr>
-        <tr>
-          <th>阶段</th><td>{{ stageList[info.stage - 1].label }}</td>
-          <th>栋舍</th><td>{{ info.pigpenName }}</td>
-        </tr>
-        <tr>
-          <th>上传服务器地址</th><td>{{ info.serverIp }}</td>
-          <th>端口</th><td>{{ info.port }}</td>
-        </tr>
-        <tr>
-          <th>注册时间</th><td>{{ info.registerTime }}</td>
-          <th>最后一次上传时间</th><td>{{ info.lastTime }}</td>
-        </tr>
-        <tr>
-          <th>网络通信状态</th><td><span :class="{ 'normal': info.networkStatus === 1, 'abnormal': info.networkStatus === 0}">{{ networkList[1 - info.networkStatus].label }}</span></td>
-          <th>采集状态</th><td><span :class="{ 'normal': info.acqStatus === 1, 'abnormal': info.acqStatus === 2}">{{ acqList[info.acqStatus - 1].label }}</span></td>
-        </tr>
-        <tr>
-          <th>注销状态</th><td><span :class="{ 'normal': info.canStatus === 1, 'logout': info.canStatus === 0}">{{ canList[1 - info.canStatus].label }}</span></td>
-        </tr>
-      </table>
-    </div>
-    <!-- 上传数据走势图 -->
-    <div class="chartDiv">
-      <div class="title">
-        <span>上传数据走势图</span>
-        <div class="right">
-          <el-date-picker
-            v-model="timeSelected"
-            type="datetimerange"
-            range-separator="—"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            size="mini">
-          </el-date-picker>
+      <div class="deviceTitle">
+        <span>设备号{{ info.deviceCode }}详情</span>
+        <div><el-button plain size="mini" @click="closeInfo">关闭</el-button></div>
+      </div>
+      <!-- 表格 -->
+      <div>
+        <table class="table">
+          <tr>
+            <th>设备编号</th><td>{{ info.deviceCode }}</td>
+            <th>注册ID</th><td>{{ info.id }}</td>
+          </tr>
+          <tr>
+            <th>省市县</th><td>{{ info.countyName }}</td>
+            <th>省市县编码</th><td>{{ info.countyCode }}</td>
+          </tr>
+          <tr>
+            <th>牧场名称</th><td>{{ info.farmName }}</td>
+            <th>牧场编码</th><td>{{ info.farmCode }}</td>
+          </tr>
+          <tr>
+            <th>阶段</th><td>{{ stageList[info.stage - 1].label }}</td>
+            <th>栋舍</th><td>{{ info.pigpenName }}</td>
+          </tr>
+          <tr>
+            <th>上传服务器地址</th><td>{{ info.serverIp }}</td>
+            <th>端口</th><td>{{ info.port }}</td>
+          </tr>
+          <tr>
+            <th>注册时间</th><td>{{ info.registerTime }}</td>
+            <th>最后一次上传时间</th><td>{{ info.lastTime }}</td>
+          </tr>
+          <tr>
+            <th>网络通信状态</th><td><span :class="{ 'normal': info.networkStatus === 1, 'abnormal': info.networkStatus === 0}">{{ networkList[1 - info.networkStatus].label }}</span></td>
+            <th>采集状态</th><td><span :class="{ 'normal': info.acqStatus === 1, 'abnormal': info.acqStatus === 2}">{{ acqList[info.acqStatus - 1].label }}</span></td>
+          </tr>
+          <tr>
+            <th>注销状态</th><td><span :class="{ 'normal': info.canStatus === 1, 'logout': info.canStatus === 0}">{{ canList[1 - info.canStatus].label }}</span></td>
+          </tr>
+        </table>
+      </div>
+      <!-- 上传数据走势图 -->
+      <div class="chartDiv">
+        <div class="title">
+          <span>上传数据走势图</span>
+          <div class="right">
+            <el-date-picker
+              v-model="timeSelected"
+              type="datetimerange"
+              range-separator="—"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              size="mini">
+            </el-date-picker>
+          </div>
         </div>
+        <his-and-line :time="timeSelected"></his-and-line>
       </div>
-      <his-and-line :time="timeSelected"></his-and-line>
     </div>
   </div>
 </template>
@@ -186,6 +189,15 @@ export default {
 }
 </script>
 <style scoped>
+.header_title {
+  height: 40px;
+  background-color: #F7F7F7;
+  border: 1px solid #ddd;
+  line-height: 40px;
+  color: #6FA8C8;
+  margin-bottom: 10px;
+  padding-left: 20px;
+}
   .device-info {
     padding: 10px 20px;
   }