2021-07-27

src/router/childrenRouters.js

@@ -57,6 +57,15 @@ const childrenRouters = [
       defaultUrl: true,
       id: 3,
     }
+  },
+  {
+    path: '/deviceInfo',
+    name: 'deviceInfo',
+    component: () => import('../views/deviceAdmin/deviceInfo.vue'),
+    meta: {
+      title: '设备管理',
+      defaultUrl: false
+    }
   }
 ]
 

src/views/deviceAdmin/charts/hisAndLine.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="his-and-line">
+    <div id="two" class="two"></div>
+  </div>
+</template>
+<script>
+import {mapState} from 'vuex'
+export default {
+  data() {
+    return {
+      dates: [],
+      temps: [],
+      eartags: []
+    }
+  },
+  computed: {
+    ...mapState(['baseUrl'])
+  },
+  methods: {
+    draw () {
+      const chart = this.$echarts.init(document.getElementById('two'))
+      const option = {
+        legend: {
+          data: ['环境温度', '耳标上传数据量']
+        },
+        xAxis: {
+          data: this.dates
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '环境温度',
+            axisLabel: {
+              textStyle: {
+                color: '#000'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#00ffff'
+              }
+            },
+            axisTick: { // 刻度线
+              show: false
+            }
+          },
+          {
+            type: 'value',
+            name: '耳标上传数据量',
+            axisLabel: {
+              textStyle: {
+                color: '#000'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#00ffff'
+              }
+            },
+            axisTick: { // 刻度线
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            name: '环境温度',
+            type: 'line',
+            data: this.temps
+          },
+          {
+            name: '耳标上传数据量',
+            type: 'bar',
+            barWidth: 20,
+            data: this.eartags
+          }
+        ]
+      }
+      chart.setOption(option)
+    },
+    init (time) {
+      // let deviceCode = this.$route.params.deviceCode
+      let deviceCode = 1
+      this.$http({
+        url: this.$http.adornUrl(`${this.baseUrl}/manager/environmentdata/countEnvironmentTemperature`),
+        method: 'get',
+        params: this.$http.adornParams({
+          'deviceCode': deviceCode,
+          'startTime': time? time[0]: undefined,
+          'endTime': time? time[1]: undefined
+        }, false)
+      }).then(async({data}) => {
+        console.log(data);
+      }).catch(() => {
+      })
+    }
+  },
+  mounted () {
+    this.init()
+  }
+}
+</script>
+<style scoped>
+  .his-and-line {
+    width: 1000px;
+    margin: auto;
+  }
+  .two {
+    min-height: 250px;
+  }
+</style>

src/views/deviceAdmin/deviceAdmin.vue

@@ -9,27 +9,72 @@
     </div>
     <!-- 查询条件 -->
     <div class="conditions">
-      <el-form inline :model="searchForm" size="mini">
-        <el-form-item label="注册时间：">
-          <el-input v-model="searchForm.registerTime" placeholder=""></el-input>
+      <el-form ref="searchForm" inline :model="searchForm" size="mini">
+        <el-form-item label="注册时间：" prop="registerStartTime">
+          <!-- <el-input v-model="searchForm.registerTime" placeholder=""></el-input> -->
+          <el-date-picker
+            v-model="searchForm.registerStartTime"
+            type="date"
+            placeholder="选择日期"
+            style="width: 130px">
+          </el-date-picker>
         </el-form-item>
-        <el-form-item label="设备编码：">
-          <el-input v-model="searchForm.deviceCode" placeholder=""></el-input>
-        </el-form-item>
-        <el-form-item label="地县：">
-          <el-input v-model="searchForm.county" placeholder="地县/编码"></el-input>
+        <el-form-item label="省市县：" prop="countyName">
+          <!-- 改用组件 -->
+          <!-- FIXME: 等待组件，到底是 countName 还是对应的编码不清楚，但一定使用选择下拉框 -->
+          <el-input v-model="searchForm.countyName" placeholder="地县/编码"></el-input>
         </el-form-item>
-        <el-form-item label="牧场：">
-          <el-input v-model="searchForm.farm" placeholder="牧场名/牧场编号"></el-input>
+        <el-form-item label="牧场：" prop="farmCode">
+          <!-- <el-input v-model="searchForm.farm" placeholder="牧场名/牧场编号"></el-input> -->
+          <!-- FIXME: 牧场数据还没有，el-option 的具体内容也没修正  -->
+          <el-select v-model="searchForm.farmCode" style="width: 100px">
+            <el-option
+              v-for="item in farmList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
         </el-form-item>
-        <el-form-item label="栋舍：">
+        <el-form-item label="栋舍：" prop="pigsty">
           <el-input v-model="searchForm.pigsty" placeholder=""></el-input>
         </el-form-item>
-        <el-form-item label="状态：">
-          <el-input v-model="searchForm.status" placeholder="正常/异常"></el-input>
+        <el-form-item label="网络通信状态：" prop="networkStatus">
+          <el-select v-model="searchForm.networkStatus" style="width: 100px">
+            <el-option
+              v-for="item in networkList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="采集状态：" prop="acqStatus">
+          <el-select v-model="searchForm.acqStatus" style="width: 100px">
+            <el-option
+              v-for="item in acqList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="注销状态：" prop="canStatus">
+          <el-select v-model="searchForm.canStatus" style="width: 100px">
+            <el-option
+              v-for="item in canList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备编码：" prop="deviceCode">
+          <el-input v-model="searchForm.deviceCode" placeholder=""></el-input>
         </el-form-item>
         <el-form-item style="margin-left: 20px">
           <el-button plain @click="init">查询</el-button>
+          <el-button plain type="info" @click="resetForm('searchForm')">清空</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -55,19 +100,19 @@
       v-loading="dataListLoading">
       <el-table-column
         type="selection"
-        width="50"
+        width="40"
         align="center">
       </el-table-column>
       <el-table-column
         prop="id"
         label="注册ID"
-        width="70"
+        width="60"
         align="center">
       </el-table-column>
       <el-table-column
         prop="registerTime"
         label="注册时间"
-        width="100"
+        width="90"
         align="center">
       </el-table-column>
       <el-table-column
@@ -102,24 +147,25 @@
         prop="stage"
         label="阶段"
         sortable
-        width="80"
+        width="70"
         align="center">
       </el-table-column>
       <el-table-column
         prop="pigpenName"
         label="栋舍"
+        width="100"
         align="center">
       </el-table-column>
       <el-table-column
         prop="serverIp"
         label="上传服务器地址"
-        width="120"
+        width="105"
         align="center">
       </el-table-column>
       <el-table-column
         prop="port"
         label="端口"
-        width="70"
+        width="60"
         align="center">
       </el-table-column>
       <el-table-column
@@ -128,18 +174,35 @@
         sortable
         align="center">
       </el-table-column>
-      <!-- 这里需要修改 -->
       <el-table-column
-        prop="delStatus"
-        label="状态"
+        label="网络通信状态"
         width="70"
         align="center">
+        <template slot-scope="scope">
+          <span :class="{ 'normal': scope.row.networkStatus === 1, 'abnormal': scope.row.networkStatus === 0}">{{ networkList[1 - scope.row.networkStatus].label }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="采集状态"
+        width="70"
+        align="center">
+        <template slot-scope="scope">
+          <span :class="{ 'normal': scope.row.acqStatus === 1, 'abnormal': scope.row.acqStatus === 2}">{{ acqList[scope.row.acqStatus - 1].label }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="注销状态"
+        width="70"
+        align="center">
+        <template slot-scope="scope">
+          <span :class="{ 'normal': scope.row.canStatus === 1, 'logout': scope.row.canStatus === 0}">{{ canList[1 - scope.row.canStatus].label }}</span>
+        </template>
       </el-table-column>
       <el-table-column
         label="操作"
         align="center">
         <template slot-scope="scope">
-          <el-button type="text" size="small">查看</el-button>
+          <el-button type="text" size="small" @click="handleCheck(scope.row)">查看</el-button>
           <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
           <el-button type="text" size="small">注销</el-button>
           <el-button type="text" size="small">删除</el-button>
@@ -163,7 +226,7 @@ export default {
   name: "deviceAdmin",
   data() {
     return {
-      boxList: [
+      boxList: [ // 设备管理的方框
         {
           id: 1,
           name: '采集设备总数',
@@ -185,15 +248,21 @@ export default {
           value: 1
         }
       ],
-      searchForm: {
+      farmList: [ // 查询条件 - 牧场选择
+        // 
+      ],
+      searchForm: { // 查询条件
         farmCode: '',
         registerStartTime: '',
         registerEndTime: '',
         deviceCode: '',
         countyName: '',
-        farmName: '',
+        // farmName: '',
+        pigsty: '',
+        networkStatus: '',
         acqStatus: '',
-        sortord: ''
+        canStatus: '',
+        // sortord: ''
       },
       pageSizeList: [ // 表格显示条数
         {
@@ -217,7 +286,37 @@ export default {
       tableData: [], // 表格数据
       totalPages: 0, // 共 n 条数据
       pageIndex: 1, // 表格当前页数
-      dataListLoading: true
+      dataListLoading: true,
+      networkList: [ // 网络通信状态 —— 查询条件 + 表格通用
+        {
+          value: 1,
+          label: '正常'
+        },
+        {
+          value: 0,
+          label: '异常'
+        }
+      ],
+      acqList: [ // 采集状态 —— 查询条件 + 表格通用
+        {
+          value: 1,
+          label: '正常'
+        },
+        {
+          value: 2,
+          label: '异常'
+        }
+      ],
+      canList: [ // 注销状态 —— 查询条件 + 表格通用
+        {
+          value: 1,
+          label: '正常'
+        },
+        {
+          value: 0,
+          label: '注销'
+        }
+      ]
     }
   },
   components: {
@@ -249,6 +348,8 @@ export default {
         this.tableData = data.page.list
         this.totalPages = data.page.totalPage
         this.dataListLoading = false
+      }).catch(() => {
+        this.dataListLoading = false
       })
     },
     // 显示条数改变
@@ -259,9 +360,26 @@ export default {
     pageChange (val) {
       this.pageIndex = val
     },
+    // 清空 el-form 
+    resetForm(form) {
+      this.$refs[form].resetFields()
+    },
+    // 编辑按钮
     handleEdit (row) {
       console.log(row);
       // 编辑
+    },
+    // 查看按钮
+    handleCheck (row) {
+      console.log(row)
+      // 组件间传值`/deviceInfo/${row.id}`
+      this.$router.push({
+        name: 'deviceInfo',
+        params: {
+          id: row.id,
+          deviceCode: row.deviceCode
+        }
+      })
     }
   },
   mounted() {
@@ -307,7 +425,6 @@ export default {
   background-color: rgba(243, 243, 243, 1);
   height: 50px;
   line-height: 50px;
-  font-size: 14px;
   border: 1px solid #ddd;
   font-size: 12px;
 }
@@ -325,4 +442,15 @@ export default {
 .title-right {
   float: right;
 }
+
+/* 正常 */
+.normal {
+  color: #37c20ce1;
+}
+.abnormal {
+  color: #ff0000d3;
+}
+.logout {
+  color: #ffd900;
+}
 </style>

src/views/deviceAdmin/deviceInfo.vue

@@ -0,0 +1,226 @@
+<template>
+  <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>{{ info.stage}}</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></his-and-line>
+    </div>
+  </div>
+</template>
+<script>
+import {mapState} from 'vuex'
+import hisAndLine from './charts/hisAndLine.vue'
+export default {
+  data() {
+    return {
+      info: {
+        deviceCode: '',
+        registerTime: '',
+        countyName: '',
+        farmName: '',
+        stage: '',
+        serverIp: '',
+        lastTime: '',
+        id: '',
+        networkStatus: 1,
+        acqStatus: 1,
+        canStatus: 1,
+        countyCode: '',
+        farmCode: '',
+        pigpenName: '',
+        port: ''
+      },
+      networkList: [ // 网络通信状态
+        {
+          value: 1,
+          label: '正常'
+        },
+        {
+          value: 0,
+          label: '异常'
+        }
+      ],
+      acqList: [ // 采集状态
+        {
+          value: 1,
+          label: '正常'
+        },
+        {
+          value: 2,
+          label: '异常'
+        }
+      ],
+      canList: [ // 注销状态
+        {
+          value: 1,
+          label: '正常'
+        },
+        {
+          value: 0,
+          label: '注销'
+        }
+      ],
+      timeSelected: [] // 时间选择
+    }
+  },
+  computed: {
+    ...mapState(['baseUrl'])
+  },
+  components: {
+    hisAndLine
+  },
+  methods: {
+    init () {
+      let id = this.$route.params.id
+      console.log(id);
+      this.$http({
+        url: this.$http.adornUrl(`${this.baseUrl}/manager/collectorregister/info/${id}`),
+        method: 'get'
+      }).then(async({data}) => {
+        // 遍历 + 对应放置
+        for (let item in this.info) {
+          if (Object.hasOwnProperty.call(this.info, item)) {
+            this.info[item] = data.collectorRegister[item]
+          }
+        }
+      }).catch(() => {})
+    },
+    closeInfo () {
+      this.$router.push('/deviceAdmin')
+    }
+  },
+  mounted() {
+    this.init()
+  },
+}
+</script>
+<style scoped>
+  .device-info {
+    padding: 10px 20px;
+  }
+
+  .deviceTitle {
+    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;
+  }
+
+  /* table 样式修改 */
+  .table {
+    width: 100%;
+    margin-top: 20px;
+    font-size: 12px;
+    border-collapse: collapse;
+  }
+  .table tr {
+    height: 20px;
+  }
+  .table th {
+    background-color: rgb(250, 250, 248);
+    width: 180px;
+    height: 30px;
+    font-weight: normal;
+  }
+  .table td {
+    text-align: center;
+  }
+  .table,
+  .table td,
+  .table th {
+    border: 1px solid #ddd;
+    
+  }
+
+  /* 正常 */
+  .normal {
+    color: #37c20ce1;
+  }
+  .abnormal {
+    color: #ff0000d3;
+  }
+  .logout {
+    color: #ffd900;
+  }
+
+  /* 图表结构的大局 */
+  .chartDiv {
+    margin-top: 20px;
+    border: 1px solid #ddd;
+    height: 305px;
+    background-color: #fff;
+  }
+
+  .title {
+    background-color: rgba(243, 243, 243, 1);
+    height: 50px;
+    line-height: 50px;
+    padding-left: 50px;
+    font-size: 14px;
+    border-bottom: 1px solid #ddd;
+  }
+
+  .right {
+    float: right;
+    margin-right: 20px;
+    font-size: 12px;
+  }
+</style>