huimv_cloud_client/src/views/deviceAdmin/deviceInfo.vue

<template>
  <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>
        </div>
        <his-and-line :time="timeSelected"></his-and-line>
      </div>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex'
import hisAndLine from './charts/hisAndLine.vue'
export default {
  data() {
    return {
      info: {
        deviceCode: '',
        registerTime: '',
        countyName: '',
        farmName: '',
        stage: 1,
        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: [], // 时间选择
      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: {
    ...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>
.header_title {
  height: 40px;
  background-color: #F7F7F7;
  border: 1px solid #ddd;
  line-height: 40px;
  color: #6FA8C8;
  margin-bottom: 10px;
  padding-left: 20px;
  position: fixed;
  width: 1660px;
  z-index: 1000;
}
  .device-info {
    padding: 50px 20px 0;
  }

  .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: 380px;
    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>