huimv_cloud_client/src/views/pastureData/dataDetail.vue

<template>
  <div class="about" v-if="isShow">
    <div>
      <div class="header_title">
        <span>耳标 <strong style="color: mediumturquoise;"> {{earTag}}</strong> 详情</span>
        <div class="back" @click="jump">回到上一页</div>
      </div>
      <div class="box">
        <div>耳标</div>
        <div>{{earTag}}</div>
        <div></div>
        <div></div>
        <div>首次上传时间（配标时间）</div>
        <div>{{tableData.movePigPenData[2].moveDate}}</div>
        <div>本次采集时间</div>
        <div>{{tableData.eartagdeta.time}}</div>
        <div>配标日龄</div>
        <div>{{tableData.eartagdeta.dayAge}}</div>
        <div>日龄</div>
        <div>{{tableData.eartagdeta.dayAge2}}</div>
        <div>耳根温度</div>
        <div>{{tableData.eartagdeta.earTemp}}℃</div>
        <div>环境温度</div>
        <div>{{tableData.eartagdeta.envTemp}}℃</div>
        <div>运动量</div>
        <div>{{tableData.eartagdeta.sportGap}}</div>
        <div>耳标电量</div>
        <div>{{tableData.eartagdeta.bat}}%</div>
        <div>首次位置记录</div>
        <div>
          <div style="line-height: 14px; font-size: 14px;">时间: {{tableData.movePigPenData[2].moveDate}}</div>
          <div style="line-height: 14px; font-size: 14px;">阶段：{{getStage(tableData.movePigPenData[2].stage)}}</div>
          <div style="line-height: 14px; font-size: 14px;">{{tableData.movePigPenData[2].penName}}{{tableData.movePigPenData[2].unitname}}</div>
        </div>
        <div>上一次位置记录</div>
        <div>
          <div style="line-height: 14px; font-size: 14px;">时间: {{tableData.movePigPenData[1].moveDate}}</div>
          <div style="line-height: 14px; font-size: 14px;">阶段：{{getStage(tableData.movePigPenData[1].stage)}}</div>
          <div style="line-height: 14px; font-size: 14px;">{{tableData.movePigPenData[1].penName}}{{tableData.movePigPenData[1].unitname}}</div>
        </div>
        <div>当前位置位置</div>
        <div>
          <div style="line-height: 14px; font-size: 14px;">时间: {{tableData.movePigPenData[0].moveDate}}</div>
          <div style="line-height: 14px; font-size: 14px;">阶段：{{getStage(tableData.movePigPenData[0].stage)}}</div>
          <div style="line-height: 14px; font-size: 14px;">位置：{{tableData.movePigPenData[0].penName}}{{tableData.movePigPenData[0].unitname}}</div>
        </div>
        <div>信号强度</div>
        <div>-{{tableData.eartagdeta.rssi}}db(最后一次上传)</div>
      </div>

      <!--  echarts   -->
      <div class="echarts">
        <div class="echarts_header">
          <span>温度走势图</span>
          <el-date-picker
              style="float: right; margin: 12px 10px 0 0;"
              size="mini"
              v-model="value2"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="onSelect"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right">
          </el-date-picker>
        </div>
        <div class="echart_init">
          <chart-temp :tempList="tempList"></chart-temp>
        </div>
      </div>
      <div class="echarts">
        <div class="echarts_header">
          <span>电量走势图</span>
          <el-date-picker
              style="float: right; margin: 12px 10px 0 0;"
              size="mini"
              v-model="value2"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="onSelect"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right">
          </el-date-picker>
        </div>
        <div class="echart_init">
          <chartDl :dlList="dlList"></chartDl>
        </div>
      </div>
      <div class="echarts">
        <div class="echarts_header">
          <span>运动量走势图</span>
          <el-date-picker
              style="float: right; margin: 12px 10px 0 0;"
              size="mini"
              v-model="value2"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="onSelect"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right">
          </el-date-picker>
        </div>
        <div class="echart_init">
          <chartYdl :ydlList="ydlList"></chartYdl>
        </div>
      </div>
      <div class="echarts">
        <div class="echarts_header">
          <span>群体平均温度走势图</span>
          <el-date-picker
              style="float: right; margin: 12px 10px 0 0;"
              size="mini"
              v-model="value2"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right">
          </el-date-picker>
        </div>
        <div class="echart_init">
          <chartPjwd :pjwdList="pjwdList"></chartPjwd>
        </div>
      </div>
    </div>
  </div>
  <div class="flex" v-else>
    <div style="width: 100%; height: 100%"  v-loading="loading"
         element-loading-text="拼命加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)"></div>
  </div>
</template>

<script>
import chartTemp from "./chart/chartTemp";
import chartDl from "./chart/chartDl";
import chartYdl from "./chart/chartYdl";
import chartPjwd from "./chart/chartPjwd";
export default {
  name: "dataDetail",
  components: {
    chartTemp,
    chartDl,
    chartYdl,
    chartPjwd
  },
  data() {
    return {
      id: '',
      earTag: '',
      value2: [],
      tableData: {},
      // 温度曲线数据
      tempList: [],
      // 电量曲线数据
      dlList: [],
      // 运动量曲线
      ydlList: [],
      // 平均温度曲线
      pjwdList: {},
      loading: true,
      isShow: false,
      options: [
        {
          id: 1,
          name: '配种'
        },
        {
          id: 2,
          name: '分娩'
        },
        {
          id: 3,
          name: '保育'
        },
        {
          id: 4,
          name: '育成育肥'
        },
        {
          id: 5,
          name: '空怀'
        },
        {
          id: 6,
          name: '后备母猪'
        },
        {
          id: 7,
          name: '公猪'
        },
        {
          id: 8,
          name: '病死猪场内收集'
        },
        {
          id: 9,
          name: '病死猪无害化'
        },
      ]
    }
  },
  methods: {
    // 过滤
    getStage(id) {
      let str = '';
      this.options.forEach(item => {
        if(item.id === id) {
          str = item.name;
        }
      })
      return str;
    },
    init() {
      let params = {
        id: this.id,
        startTime: this.value2[0],
        endTime: this.value2[1]
      }
      this.$http({
        url: this.$http.adornUrl('/manager/eartagdata/list_deatils'),
        method: 'post',
        data: this.$http.adornData(params)
      })
          .then(res => {
            this.loading = false;
            if(res.data.code === 0) {
              this.isShow = true;
              this.tableData = res.data.page;
              this.earTag = this.tableData.eartagdeta.eartagNo;
              // 温度曲线
              this.tempList = [this.tableData.time, this.tableData.temp, this.tableData.environmenttemp];
              // 电量曲线
              this.dlList = [this.tableData.time, this.tableData.electric];
              // 运动量曲线
              this.ydlList = [this.tableData.time, this.tableData.sports];
              // 平均温度曲线
              this.pjwdList = this.tableData.averangeTemp;
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch(() => {
            this.loading = false;
            this.isShow = true;
          })
    },
    jump() {
      this.$router.replace('/');
    },
    onSelect() {
      // console.log(this.value2)
      this.isShow = false;
      this.init();
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.value2 = [this.$route.query.startTime, this.$route.query.endTime]
    this.init();
  },
  mounted() {
  }
}
</script>

<style scoped>
.about {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}
.back {
  width: 90px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  border: 1px solid #ddd;
  text-align: center;
  border-radius: 10px;
  margin-top: 4px;
  margin-right: 10px;
  float: right;
  cursor: pointer;
}
.box {
  width: calc(100% - 2px);
  height: 300px;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 2fr;
  grid-template-rows: repeat(7, 1fr);
  grid-column-gap: 0;
  grid-row-gap: 0;
  margin-bottom: 20px;
}
.box>div:nth-child(2n+1) {
  background-color: #F9FAFC;
  font-size: 14px;
}
.box>div:nth-child(4n-3),  .box>div:nth-child(4n-2), .box>div:nth-child(4n-1){
  border-right: 1px solid #ddd;
}
.box>div{
  border-bottom: 1px solid #ddd;
  text-align: center;
  line-height: 42px;
}
.echarts {
  width: 100%;
  height: 500px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
}
.echarts_header {
  height: 50px;
  font-size: 14px;
  background-color: #F3F3F3;
  padding-left: 20px;
  font-weight: 600;
  line-height: 50px;
  border-bottom: 1px solid #ddd;
  color: #667E9C;
}
.echart_init {
  width: 100%;
  height: 450px;
}
.flex {
  width: 100%;
  height: 1000px;
}
</style>