2021-08-04 路由添加了两个

src/router/childrenRouters.js

@@ -75,6 +75,24 @@ const childrenRouters = [
       title: '牧场概况',
       defaultUrl: false
     }
+  },
+  {
+    path: '/eartagData',
+    name: 'eartagData',
+    component: () => import('../views/collectData/eartagData.vue'),
+    meta: {
+      title: '耳标数据',
+      defaultUrl: false
+    }
+  },
+  {
+    path: '/dataInfo',
+    name: 'dataInfo',
+    component: () => import('../views/collectData/dataInfo.vue'),
+    meta: {
+      title: '数据详情',
+      defaultUrl: false
+    }
   }
 ]
 

src/views/collectData/collectDay.vue

@@ -133,6 +133,7 @@
         @sizeChange="sizeChange"
         @pageChange="pageChange"></table-footer>
     </div>
+    <el-button @click="toEartagData">耳标数据</el-button>
   </div>
 </template>
 <script>
@@ -185,7 +186,7 @@ export default {
         },
         {
           id: 7,
-          name: '今年累计出栏量',
+          name: '预计年出栏量',
           value: 50000,
           data: 314,
           isUp: true
@@ -231,6 +232,9 @@ export default {
       console.log(row);
       console.log('点击了某一行');
     },
+    toEartagData () {
+      this.$router.push('eartagData')
+    }
     // init () {
     //   this.$http({
     //     url: this.$http.adornUrl(`http://192.168.1.57:8220/dataAnalysis/getPigStockByRegionCode`),

src/views/collectData/dataInfo.vue

@@ -0,0 +1,223 @@
+<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></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>
+      </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('/eartagData')
+    }
+  },
+  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>

src/views/collectData/eartagData.vue

@@ -0,0 +1,380 @@
+<template>
+  <div class="collect-day">
+    <div class="day-title">
+      <!-- <span>每日汇总</span> -->
+      <div class="titleBtn"><el-button plain size="mini" @click="closeEartag">关闭</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-select v-model="searchForm.farmCode" style="width: 130px;">
+            <el-option 
+              v-for="item in farmList"
+              :key="item.id"
+              :label="item.label"
+              :value="item.id">
+            </el-option>
+          </el-select>
+          <!-- <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 v-model="searchForm.eartag" style="width: 130px;"></el-input>
+        </el-form-item>
+        <el-form-item label="配标时间:">
+          <el-date-picker
+            v-model="searchForm.ontag"
+            type="date"
+            placeholder="选择日期"
+            style="width: 130px;">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="佩标日龄:">
+          <el-input style="width: 50px;" v-model="searchForm.onMin"></el-input>
+          &nbsp;至&nbsp;
+          <el-input style="width: 50px;" v-model="searchForm.onMax"></el-input>
+        </el-form-item>
+        <el-form-item label="耳根温度:">
+          <el-input style="width: 50px;" v-model="searchForm.eartempMin"></el-input>
+          &nbsp;至&nbsp;
+          <el-input style="width: 50px;" v-model="searchForm.eartempMax"></el-input>
+        </el-form-item>
+        <el-form-item label="环境温度:">
+          <el-input style="width: 50px;" v-model="searchForm.envtempMin"></el-input>
+          &nbsp;至&nbsp;
+          <el-input style="width: 50px;" v-model="searchForm.envtempMax"></el-input>
+        </el-form-item>
+        <el-form-item label="耳标电量:">
+          <el-input style="width: 50px;" v-model="searchForm.elecMin"></el-input>
+          &nbsp;至&nbsp;
+          <el-input style="width: 50px;" v-model="searchForm.elecMax"></el-input>
+        </el-form-item>
+        <el-form-item label="信号强度:">
+          <el-input style="width: 50px;" v-model="searchForm.signalMin"></el-input>
+          &nbsp;至&nbsp;
+          <el-input style="width: 50px;" v-model="searchForm.signalMax"></el-input>
+        </el-form-item>
+        <el-form-item label="栋舍:">
+          <el-input v-model="searchForm.pigstyName" style="width: 130px;"></el-input>
+        </el-form-item>
+        <el-form-item label="采集器编码:">
+          <el-input v-model="searchForm.deviceCode" style="width: 130px;"></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%;">
+        <el-table-column
+          label="采集时间"
+          prop="name">
+        </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>
+        <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-column
+          prop="stock5"
+          label="阶段">
+        </el-table-column>
+        <el-table-column
+          prop="stock5"
+          label="栋舍">
+        </el-table-column>
+        <el-table-column
+          prop="stock5"
+          label="采集器编码">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="100">
+          <template slot-scope="scope">
+            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <table-footer
+        :totals="totalPages"
+        :size="pageSize"
+        @sizeChange="sizeChange"
+        @pageChange="pageChange"></table-footer>
+    </div>
+    <el-button @click="toDataInfo">数据详情</el-button>
+  </div>
+</template>
+<script>
+import TableFooter from "../../components/TableFooter"
+export default {
+  data() {
+    return {
+      boxList: [
+        {
+          id: 1,
+          name: '母猪存栏',
+          value: 2500,
+          data: 0,
+          isUp: true
+        },
+        {
+          id: 2,
+          name: '能繁母猪存栏',
+          value: 2500,
+          data: 0,
+          isUp: true
+        },
+        {
+          id: 3,
+          name: '分娩舍母猪数',
+          value: 1864,
+          data: 0,
+          isUp: false
+        },
+        {
+          id: 4,
+          name: '配怀舍母猪数',
+          value: 636,
+          data: 0,
+          isUp: true
+        },
+        {
+          id: 5,
+          name: '母猪新增',
+          value: 6,
+          data: 0,
+          isUp: true
+        },
+        {
+          id: 6,
+          name: '耳标离线',
+          value: 6,
+          data: 0,
+          isUp: true
+        },
+        {
+          id: 7,
+          name: '耳根温度异常',
+          value: 6,
+          data: 0,
+          isUp: true
+        }
+      ],
+      searchForm: {
+        time: [],
+        farmCode: '', // 牧场id
+        eartag: '', // 耳标号
+        ontag: '', // 配标日期
+        onMin: '', // 日龄范围
+        onMax: '',
+        eartempMin: '', // 耳根温度范围
+        eartempMax: '',
+        envtempMin: '', // 环境温度
+        envtempMax: '',
+        elecMin: '', // 耳标电量
+        elecMax: '',
+        signalMin: '', // 信号强度
+        signalMax: '',
+        pigstyName: '', // 栋舍
+        deviceCode: '' // 采集器编码
+      },
+      tableData: [],
+      totalPages: 0,
+      pageNum: 1,
+      pageSize: 20,
+      farmList: [
+        {
+          label: '杭州牧场',
+          id: 1
+        }
+      ]
+    }
+  },
+  components: {
+    TableFooter
+  },
+  methods: {
+    // 关闭按钮，回到数据分析页面
+    closeEartag () {
+      this.$router.push('/collectDay')
+    },
+    search () {
+      console.log('查询');
+    },
+    // 修改size
+    sizeChange(val) {
+      this.pageSize = val;
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum = val;
+    },
+    // 点击 查看 按钮
+    handleClick (row) {
+      console.log(row);
+      this.$router.push('/dataInfo')
+    },
+    // 要删的
+    toDataInfo () {
+      this.$router.push('/dataInfo')
+    }
+    // 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;
+}
+.titleBtn {
+  float: right;
+}
+/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: 110px;
+  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>