...

src/views/deviceAdmin/addOrUpdate.vue

@@ -30,7 +30,7 @@
         <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"></area-zz>
+            <area-zz v-model="form.countyName" @getCityCode="getCityCode" ref="county"></area-zz>
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -143,7 +143,7 @@ export default {
         serverIp: '',
         port: ''
       },
-      stageList: [ // 状态
+      stageList: [ // 阶段
         {
           value: 1,
           label: '配怀'
@@ -154,15 +154,31 @@ export default {
         },
         {
           value: 3,
-          label: '后备'
+          label: '保育'
         },
         {
           value: 4,
-          label: '空怀'
+          label: '育成育肥'
         },
         {
           value: 5,
+          label: '空怀'
+        },
+        {
+          value: 6,
+          label: '后备母猪'
+        },
+        {
+          value: 7,
           label: '公猪'
+        },
+        {
+          value: 8,
+          label: '病死猪场内收集'
+        },
+        {
+          value: 9,
+          label: '病死猪无害化'
         }
       ],
       farmList: [ // 牧场List
@@ -256,6 +272,7 @@ export default {
     getCityCode (val) {
       let len = val.length
       this.form.countyCode = val[len-1]
+      console.log(this.$refs.county);
     },
     // 选择框的选择顺序
     handleFocus (ref, formItem) {

src/views/deviceAdmin/charts/hisAndLine.vue

@@ -4,8 +4,9 @@
   </div>
 </template>
 <script>
-import {mapState} from 'vuex'
+import { mapState } from 'vuex'
 export default {
+  props: ['time'],
   data() {
     return {
       dates: [],
@@ -19,7 +20,11 @@ export default {
   methods: {
     draw () {
       const chart = this.$echarts.init(document.getElementById('two'))
+      chart.showLoading()
       const option = {
+        tooltip: {
+          trigger: 'axis'
+        },
         legend: {
           data: ['环境温度', '耳标上传数据量']
         },
@@ -27,36 +32,40 @@ export default {
           data: this.dates
         },
         yAxis: [
+          
           {
             type: 'value',
-            name: '环境温度',
+            name: '℃',
             axisLabel: {
               textStyle: {
                 color: '#000'
               }
             },
-            axisLine: {
-              lineStyle: {
-                color: '#00ffff'
-              }
+            splitLine: {
+              show:false
             },
+            // axisLine: {
+            //   lineStyle: {
+            //     color: '#00ffff'
+            //   }
+            // },
             axisTick: { // 刻度线
-              show: false
+              show: false,
             }
           },
           {
             type: 'value',
-            name: '耳标上传数据量',
+            name: '次',
             axisLabel: {
               textStyle: {
                 color: '#000'
               }
             },
-            axisLine: {
-              lineStyle: {
-                color: '#00ffff'
-              }
-            },
+            // axisLine: {
+            //   lineStyle: {
+            //     color: '#00ffff'
+            //   }
+            // },
             axisTick: { // 刻度线
               show: false
             }
@@ -66,46 +75,80 @@ export default {
           {
             name: '环境温度',
             type: 'line',
+            yAxisIndex: 1,
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  color: '#02a7f0'
+                },
+                color: '#02a7f0'
+              }
+            },
             data: this.temps
           },
           {
             name: '耳标上传数据量',
             type: 'bar',
             barWidth: 20,
+            itemStyle: {
+              normal: {
+                color: '#5fa7f0'
+              }
+            },
             data: this.eartags
           }
         ]
       }
       chart.setOption(option)
+      setTimeout(() => {
+          chart.hideLoading();//隐藏等待条
+      }, 1000);
     },
-    init (time) {
-      // let deviceCode = this.$route.params.deviceCode
-      let deviceCode = 1
+    init () {
+      let deviceCode = this.$route.params.deviceCode
+      // let deviceCode = 1
       this.$http({
-        url: this.$http.adornUrl(`${this.baseUrl}/manager/environmentdata/countEnvironmentTemperature`),
+        url: this.$http.adornUrl(`${this.baseUrl}/manager/eartagdata/countByTime`),
         method: 'get',
         params: this.$http.adornParams({
           'deviceCode': deviceCode,
-          'startTime': time? time[0]: undefined,
-          'endTime': time? time[1]: undefined
+          'startTime': this.time? this.time[0]: undefined,
+          'endTime': this.time? this.time[1]: undefined
         }, false)
       }).then(async({data}) => {
-        console.log(data);
+        if (data.code === 0) {
+          this.dates = data.data.time
+          this.temps = data.data.envTemp
+          this.eartags = data.data.count
+          this.draw()
+        }
       }).catch(() => {
       })
     }
   },
   mounted () {
     this.init()
+  },
+  watch: {
+    time: {
+      handler(newVal) {
+        if(newVal) {
+          this.init()
+        }
+      }
+    }
   }
 }
 </script>
 <style scoped>
   .his-and-line {
-    width: 1000px;
     margin: auto;
+    height: 340px;
+    padding: 20px 20px;
   }
   .two {
-    min-height: 250px;
+    height: 300px;
+    width: 100%;
+    margin: auto;
   }
 </style>

src/views/deviceAdmin/deviceAdmin.vue

@@ -10,37 +10,26 @@
     <!-- 查询条件 -->
     <div class="conditions">
       <el-form ref="searchForm" inline :model="searchForm" size="mini" label-width="110px">
-        <el-form-item label="注册时间：" prop="registerStartTime" style="width: 270px">
+        <el-form-item label="注册时间：" prop="registerTime" style="width: 310px">
           <!-- <el-input v-model="searchForm.registerTime" placeholder=""></el-input> -->
           <el-date-picker
-            v-model="searchForm.registerStartTime"
-            type="date"
+            v-model="searchForm.registerTime"
+            type="daterange"
             placeholder="选择日期"
-            style="width: 150px">
+            style="width: 200px">
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="省市县：" prop="countyName" style="width: 270px">
-          <!-- 改用组件 -->
-          <!-- FIXME: 等待组件，到底是 countName 还是对应的编码不清楚，但一定使用选择下拉框 -->
-          <el-input v-model="searchForm.countyName" placeholder="地县/编码" style="width: 150px"></el-input>
+        <el-form-item label="省市县：" prop="countyName" style="width: 310px">
+          <el-input v-model="searchForm.countyName" placeholder="地县名/编码" style="width: 200px"></el-input>
         </el-form-item>
-        <el-form-item label="牧场：" prop="farmCode" style="width: 270px">
-          <!-- <el-input v-model="searchForm.farm" placeholder="牧场名/牧场编号"></el-input> -->
-          <!-- FIXME: 牧场数据还没有，el-option 的具体内容也没修正  -->
-          <el-select v-model="searchForm.farmCode" style="width: 150px">
-            <el-option
-              v-for="item in farmList"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id">
-            </el-option>
-          </el-select>
+        <el-form-item label="牧场：" prop="farmName" style="width: 310px">
+          <el-input v-model="searchForm.farmName" placeholder="牧场名/编码" style="width: 200px"></el-input>
         </el-form-item>
-        <el-form-item label="栋舍：" prop="pigsty" style="width: 270px">
-          <el-input v-model="searchForm.pigsty" placeholder="" style="width: 150px"></el-input>
-        </el-form-item>
-        <el-form-item label="网络通信状态：" prop="networkStatus" style="width: 270px">
-          <el-select v-model="searchForm.networkStatus" style="width: 150px">
+        <!-- <el-form-item label="栋舍：" prop="pigsty" style="width: 310px">
+          <el-input v-model="searchForm.pigsty" placeholder="" style="width: 200px"></el-input>
+        </el-form-item> -->
+        <el-form-item label="网络通信状态：" prop="networkStatus" style="width: 310px">
+          <el-select v-model="searchForm.networkStatus" style="width: 200px">
             <el-option
               v-for="item in networkList"
               :key="item.value"
@@ -49,8 +38,8 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="采集状态：" prop="acqStatus" style="width: 270px">
-          <el-select v-model="searchForm.acqStatus" style="width: 150px">
+        <el-form-item label="采集状态：" prop="acqStatus" style="width: 310px">
+          <el-select v-model="searchForm.acqStatus" style="width: 200px">
             <el-option
               v-for="item in acqList"
               :key="item.value"
@@ -59,8 +48,8 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="注销状态：" prop="canStatus" style="width: 270px">
-          <el-select v-model="searchForm.canStatus" style="width: 150px">
+        <el-form-item label="注销状态：" prop="canStatus" style="width: 310px">
+          <el-select v-model="searchForm.canStatus" style="width: 200px">
             <el-option
               v-for="item in canList"
               :key="item.value"
@@ -69,11 +58,11 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="设备编码：" prop="deviceCode" style="width: 270px">
-          <el-input v-model="searchForm.deviceCode" placeholder="" style="width: 150px"></el-input>
+        <el-form-item label="设备编码：" prop="deviceCode" style="width: 310px">
+          <el-input v-model="searchForm.deviceCode" placeholder="" style="width: 200px"></el-input>
         </el-form-item>
         <el-form-item style="margin-left: 55px">
-          <el-button plain @click="init">查询</el-button>
+          <el-button type="primary" @click="init">查询</el-button>
           <el-button plain type="info" @click="resetForm('searchForm')">清空</el-button>
         </el-form-item>
       </el-form>
@@ -258,13 +247,10 @@ export default {
         // 
       ],
       searchForm: { // 查询条件
-        farmCode: '',
-        registerStartTime: '',
-        registerEndTime: '',
+        registerTime: [],
         deviceCode: '',
         countyName: '',
-        // farmName: '',
-        pigsty: '',
+        farmName: '',
         networkStatus: '',
         acqStatus: '',
         canStatus: '',
@@ -379,14 +365,14 @@ export default {
         params: this.$http.adornParams({
           'page': this.pageIndex,
           'limit': this.pageSize,
-          'farmCode': this.searchForm.farmCode || undefined,
-          'registerStartTime': this.searchForm.registerStartTime || undefined,
-          'registerEndTime': this.searchForm.registerEndTime || undefined,
+          'farmName': this.searchForm.farmName || undefined,
+          'registerStartTime': this.searchForm.registerTime[0] || undefined,
+          'registerEndTime': this.searchForm.registerTime[1] || undefined,
           'deviceCode': this.searchForm.deviceCode || undefined,
           'countyName': this.searchForm.countyName || undefined,
-          'farmName': this.searchForm.farmName || undefined,
-          'acqStatus': this.searchForm.acqStatus || undefined,
-          'sortord': this.searchForm.sortord || undefined
+          'networkStatus': this.searchForm.networkStatus?? undefined,
+          'acqStatus': this.searchForm.acqStatus?? undefined,
+          'canStatus': this.searchForm.canStatus?? undefined
         }, false)
       }).then(async({data}) => {
         console.log(data);

src/views/deviceAdmin/deviceInfo.vue

@@ -9,28 +9,28 @@
     <div>
       <table class="table">
         <tr>
-          <th>设备编号</th><td>{{ info.deviceCode}}</td>
-          <th>注册ID</th><td>{{ info.id}}</td>
+          <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>
+          <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>
+          <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>
+          <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>
+          <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>
+          <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>
@@ -56,7 +56,7 @@
           </el-date-picker>
         </div>
       </div>
-      <his-and-line></his-and-line>
+      <his-and-line :time="timeSelected"></his-and-line>
     </div>
   </div>
 </template>
@@ -71,7 +71,7 @@ export default {
         registerTime: '',
         countyName: '',
         farmName: '',
-        stage: '',
+        stage: 1,
         serverIp: '',
         lastTime: '',
         id: '',
@@ -113,7 +113,45 @@ export default {
           label: '注销'
         }
       ],
-      timeSelected: [] // 时间选择
+      timeSelected: [], // 时间选择
+      stageList: [ // 阶段
+        {
+          value: 1,
+          label: '配怀'
+        },
+        {
+          value: 2,
+          label: '分娩'
+        },
+        {
+          value: 3,
+          label: '保育'
+        },
+        {
+          value: 4,
+          label: '育成育肥'
+        },
+        {
+          value: 5,
+          label: '空怀'
+        },
+        {
+          value: 6,
+          label: '后备母猪'
+        },
+        {
+          value: 7,
+          label: '公猪'
+        },
+        {
+          value: 8,
+          label: '病死猪场内收集'
+        },
+        {
+          value: 9,
+          label: '病死猪无害化'
+        }
+      ]
     }
   },
   computed: {
@@ -205,7 +243,7 @@ export default {
   .chartDiv {
     margin-top: 20px;
     border: 1px solid #ddd;
-    height: 305px;
+    height: 380px;
     background-color: #fff;
   }