按需求修改设备详情页

src/api/hardware/device.js

@@ -1,56 +1,55 @@
-import request from '@/utils/request'
+import request from '@/utils/request';
 
 // 查询设备列表
 export function list(params) {
-    return request({
+  return request({
-        url: '/system/device/list',
+    url: '/system/device/list',
-        method: 'get',
+    method: 'get',
-        params
+    params
-    })
+  });
 }
 
-
 // 查询设备详细
 export function info(deviceId) {
-    return request({
+  return request({
-      url: '/system/device/' + deviceId,
+    url: '/system/device/' + deviceId,
-      method: 'get'
+    method: 'get'
-    })
+  });
-  }
+}
 
 // 新增设备
 export function add(data) {
-    return request({
+  return request({
-        url: '/system/device',
+    url: '/system/device',
-        method: 'post',
+    method: 'post',
-        data
+    data
-    })
+  });
 }
 
 // 修改设备
 export function update(data) {
-    return request({
+  return request({
-        url: '/system/device',
+    url: '/system/device',
-        method: 'post',
+    method: 'post',
-        data
+    data
-    })
+  });
 }
 
 // 删除设备
 export function del(ids) {
-    return request({
+  return request({
-        url: '/system/device/' + ids,
+    url: '/system/device/' + ids,
-        method: 'delete'
+    method: 'delete'
-    })
+  });
 }
 
 // 新增更新设备记录
 export function saveDeviceFirmware(data) {
-    return request({
+  return request({
-        url: '/system/device/saveDeviceFirmware',
+    url: '/system/device/saveDeviceFirmware',
-        method: 'post',
+    method: 'post',
-        data
+    data
-    })
+  });
 }
 
 // 导出设备列表
@@ -63,39 +62,46 @@ export function exportEquipment(params) {
 // 下载用户导入模板
 export function importTemplate() {
   return request({
-    url: '/system/device/importTemplate',
+    url: '/system/device/importTemplate'
-  })
+  });
 }
 
-
 // 获取白名单列表
 export function whiteList(params) {
   return request({
-      url: '/system/device/whiteList',
+    url: '/system/device/whiteList',
-      method: 'get',
+    method: 'get',
-      params
+    params
-  })
+  });
 }
 /**
  * 批量添加白名单
- * @param {Array} ids 
+ * @param {Array} ids
  */
 export function addWhiteDevice(ids) {
   return request({
-      url: '/system/device/addWhiteDevice/',
+    url: '/system/device/addWhiteDevice/',
-      method: 'post',
+    method: 'post',
-      data: {ids}
+    data: { ids }
-  })
+  });
 }
 
 /**
  * 批量移除白名单
- * @param {Array} ids 
+ * @param {Array} ids
  */
 export function delWhiteDevice(ids) {
   return request({
-      url: '/system/device/delWhiteDevice',
+    url: '/system/device/delWhiteDevice',
-      method: 'post',
+    method: 'post',
-      data: {ids}
+    data: { ids }
-  })
+  });
-}
+}
+// echarts 展示历史数据
+export function getKeyHistory(data) {
+  return request({
+    url: '/system/signal/getKeyHistory',
+    method: 'post',
+    data
+  });
+}

src/views/hardware/device/detail.vue

@@ -2,13 +2,20 @@
   <section class="app-container">
     <el-row>
       <el-col :span="8">
-        <span>设备名称：{{info.deviceName }}</span>
+        <span>设备名称：{{ info.deviceName }}</span>
         <el-divider class="mt10 mb10"></el-divider>
-        <span>设备型号：{{info.deviceModel }}</span>
+        <!-- <span>设备型号：{{info.deviceModel }}</span>
         <el-divider class="mt10 mb10"></el-divider>
-        <span>设备编码：{{info.deviceCode }}</span>
+        <span>设备编码：{{info.deviceCode }}</span> -->
+        <span>设备SN：{{ info.deviceId }}</span>
         <el-divider class="mt10 mb10"></el-divider>
-        <span>设备类型：{{ info.deviceType ? this.deviceTypeList.find(v=> v.value == info.deviceType).label : '' }}</span>
+        <span
+          >设备类型：{{
+            info.deviceType
+              ? this.deviceTypeList.find(v => v.value == info.deviceType).label
+              : ''
+          }}</span
+        >
         <el-divider class="mt10 mb10"></el-divider>
         <span>省：{{ info.proName }}</span>
         <el-divider class="mt10 mb10"></el-divider>
@@ -22,43 +29,152 @@
         <el-divider class="mt10 mb10"></el-divider>
         <span>创建时间：{{ info.createTime | formatDate }}</span>
       </el-col>
-      <el-col :offset="3" :span="10" class="p20">
+      <el-col :offset="1" :span="15">
         <el-scrollbar style="height: 550px;" wrap-class="scrollbar-wrapper">
-          <div v-for="v in signal" :key="v.id" style="width: 80%">
+          <div v-for="v in signal" :key="v.id" class="row_div">
-            <el-row class="pb20">
+            <el-row
+              type="flex"
+              class="row-bg"
+              justify="space-around"
+              style="height:65px;align-items: center;margin-bottom:10px"
+            >
               <el-col :span="12">
-                <div class="pb10">{{v.keyCN}}：{{v.valueCN}}</div>
+                <div>
+                  <i class="ico_box">
+                    <span class="el-icon-data-line"></span>
+                  </i>
+                  <span
+                    style="margin-left:20px"
+                    :class="
+                      v.keyCN
+                        ? v.keyCN.includes('单芯电压值')
+                          ? v.valueCN >= overcharge &&
+                            v.valueCN <= overdischarge
+                            ? 'red'
+                            : v.valueCN >= overVoltage &&
+                              v.valueCN <= underVoltage
+                            ? 'yellow'
+                            : ''
+                          : ''
+                        : ''
+                    "
+                    >{{ v.keyCN }}：{{ v.valueCN }}</span
+                  >
+                  <!-- :class="v.keyCN.includes('单芯电压值') ? 'a' : ''" -->
+                  <!-- {{ v.keyCN.includes('单芯电压值') ? true : false }} -->
+                  <!-- 单芯电压值 -->
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div class="tr">
+                  <span style="margin-right:20px">{{
+                    signalUpdateTime | formatDate
+                  }}</span>
+                  <el-button
+                    size="mini"
+                    @click="openDialog(info.deviceId, v.key)"
+                    >历史性能</el-button
+                  >
+                </div>
               </el-col>
-              <el-col :span="12" class="tr">{{signalUpdateTime | formatDate }}</el-col>
             </el-row>
           </div>
         </el-scrollbar>
-
       </el-col>
     </el-row>
+    <el-dialog title="历史记录" :visible.sync="dialogVisible" width="70%">
+      <el-date-picker
+        v-model="selectDate"
+        type="datetimerange"
+        :default-time="['00:00:00', '23:59:59']"
+        unlink-panels
+        value-format="yyyy-MM-dd HH:mm:ss"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      >
+        <!-- :picker-options="pickerOptions" -->
+      </el-date-picker>
+      <span style="margin-left:20px"
+        ><el-button type="primary" @click="getNewData">查询</el-button></span
+      >
+      <div ref="echa" style="width: 100%;height:600px;"></div>
+    </el-dialog>
   </section>
 </template>
 
 <script>
-import {
+import { info, getKeyHistory } from '@/api/hardware/device';
-  info,
+import { getProvinceByCode } from '@/api/hardware/province';
-} from "@/api/hardware/device";
-import { getProvinceByCode } from "@/api/hardware/province";
 export default {
-  name: "DeviceDetail",
+  name: 'DeviceDetail',
-  data () {
+  data() {
     return {
+      selectDate: '',
+      //日期选择范围在一个月内
+      // pickerOptions: {
+      //   onPick: ({ maxDate, minDate }) => {
+      //     this.selectDate = minDate.getTime();
+      //     if (maxDate) {
+      //       this.selectDate = '';
+      //     }
+      //   },
+      //   disabledDate: time => {
+      //     if (this.selectDate !== '') {
+      //       const one = 30 * 24 * 3600 * 1000;
+      //       const minTime = this.selectDate - one;
+      //       const maxTime = this.selectDate + one;
+      //       return time.getTime() < minTime || time.getTime() > maxTime;
+      //       // time.getTime() > Date.now() 未来时间
+      //     }
+      //   }
+      // },
+      dialogVisible: false,
+      centerChart: null,
+      queryParams: {
+        deviceId: '',
+        key: ''
+      },
       id: '',
       info: {},
       signal: [],
       signalUpdateTime: '',
       deviceTypeList: [
-        { 'label': '锐能设备', 'value': 'rn', },
+        { label: '锐能设备', value: 'rn' },
-        { 'label': '铁塔设备', 'value': 'tt', },
+        { label: '铁塔设备', value: 'tt' }
-      ],
+      ]
     };
   },
-  created () {
+  watch: {
+    selectDate() {
+      if (!this.selectDate) {
+        this.selectDate = '';
+      }
+    }
+  },
+  computed: {
+    // 过充  单体过充阈值
+    overcharge() {
+      let a = this.signal.find(item => item.keyCN == '单体过充阈值');
+      return a ? a.valueCN - 0 : null;
+    },
+    // 过放  单体过放阈值
+    overdischarge() {
+      let a = this.signal.find(item => item.keyCN == '单体过放阈值');
+      return a ? a.valueCN - 0 : null;
+    },
+    // 过压  单体过压阈值
+    overVoltage() {
+      let a = this.signal.find(item => item.keyCN == '单体过压阈值');
+      return a ? a.valueCN - 0 : null;
+    },
+    // 欠压  单体欠压阈值
+    underVoltage() {
+      let a = this.signal.find(item => item.keyCN == '单体欠压阈值');
+      return a ? a.valueCN - 0 : null;
+    }
+  },
+  created() {
     let { id } = this.$route.query;
     if (!id) {
       this.msgError('无设备ID');
@@ -66,10 +182,10 @@ export default {
       return;
     }
     this.id = id;
-    this.getDetail()
+    this.getDetail();
   },
   methods: {
-    getDetail () {
+    getDetail() {
       info(this.id).then(async ({ code, msg, info }) => {
         if (200 == code) {
           info.proName = await this.getProvinceByCode(info.proCode);
@@ -79,31 +195,166 @@ export default {
           if (info.deviceSignal) {
             let deviceSignal = JSON.parse(info.deviceSignal.signalJsonTurn);
             this.signal = deviceSignal.signal;
+            // let a = deviceSignal.signal.find(
+            //   item => item.keyCN == '单体过充阈值'
+            // );
+            // console.log(a.valueCN);
             this.signalUpdateTime = info.deviceSignal.updateTime;
           }
         } else {
           this.msgError(msg);
         }
-      })
+      });
     },
-    getProvinceByCode (code) {
+    getProvinceByCode(code) {
       return new Promise((resolve, reject) => {
-        getProvinceByCode(code).then(({ code, msg, data }) => {
+        getProvinceByCode(code)
-          if (code == 200) {
+          .then(({ code, msg, data }) => {
-            resolve(data.cityName);
+            if (code == 200) {
-          } else {
+              resolve(data.cityName);
-            this.$message.error(msg);
+            } else {
-            reject({ msg, code })
+              this.$message.error(msg);
-          }
+              reject({ msg, code });
-        }).catch(error => {
+            }
-          reject(error)
+          })
-        })
+          .catch(error => {
-      })
+            reject(error);
+          });
+      });
+    },
+    openDialog(deviceId, key) {
+      this.dialogVisible = true;
+      this.queryParams.deviceId = deviceId;
+      this.queryParams.key = key;
+      this.getChartData();
     },
-  }
 
-}
+    // getDay(mss) {
+    //   var days = parseInt(mss / (1000 * 60 * 60 * 24));
+    //   var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    //   var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
+    //   var seconds = (mss % (1000 * 60)) / 1000;
+    //   return days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ';
+    // },
+
+    getNewData() {
+      if (this.selectDate == '') return this.$message.info('请选择日期');
+      // let a = new Date(this.selectDate[0]).getTime();
+      // let b = new Date(this.selectDate[1]).getTime();
+      // const minTime = b - a;
+      // const flag = this.getDay(minTime);
+      this.queryParams.startTime = this.selectDate[0];
+      this.queryParams.endTime = this.selectDate[1];
+      this.getChartData();
+    },
+    getChartData() {
+      getKeyHistory(this.queryParams).then(data => {
+        this.$nextTick(() => {
+          this.initChart(data);
+        });
+      });
+    },
+    initChart(data) {
+      var echarts = require('echarts');
+      this.centerChart = echarts.init(this.$refs.echa);
+      let months = [];
+      let nums = [];
+      data.map(item => {
+        for (const k in item) {
+          months.push(k);
+          nums.push(item[k]);
+        }
+      });
+      let option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            dataView: {
+              readOnly: true,
+              optionToContent: function(opt) {
+                let axisData = opt.xAxis[0].data; //坐标数据
+                let series = opt.series; //折线图数据
+                let tdHeads = '<td>序号</td><td>时间</td>'; //表头
+                let tdBodys = ''; //数据
+                series.forEach(function(item) {
+                  //组装表头
+                  tdHeads += `<td style="text-align:center">${item.name}</td>`;
+                });
+                let table = `<table style="width:100%;text-align: center"><tbody><tr>${tdHeads} </tr>`;
+                for (let i = 0, l = axisData.length; i < l; i++) {
+                  for (let j = 0; j < series.length; j++) {
+                    //组装表数据
+                    tdBodys += `<td>${series[j].data[i]}</td>`;
+                  }
+                  table += `<tr><td>${i + 1}</td><td >${
+                    axisData[i]
+                  }</td>${tdBodys}</tr>`;
+                  tdBodys = '';
+                }
+                table += '</tbody></table>';
+                return table;
+              }
+            },
+            // restore: {},
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          name: '时间',
+          type: 'category',
+          boundaryGap: false,
+          data: months.map(function(str) {
+            return str.replace(' ', '\n');
+          })
+        },
+        yAxis: {
+          name: '数值',
+          type: 'value'
+        },
+        series: [
+          {
+            name: '数值',
+            type: 'line',
+            data: nums,
+            lineStyle: {
+              color: '#46a6ff'
+            }
+          }
+        ]
+      };
+      this.centerChart.setOption(option);
+    }
+  }
+};
 </script>
 
-<style>
+<style lang="scss" scoped>
-</style>
+.row_div {
+  background-color: #f8f9fa;
+  padding: 0 30px 0 10px;
+}
+.ico_box {
+  width: 55px;
+  height: 55px;
+  display: inline-block;
+  text-align: center;
+  background-color: #1890ff;
+  border-radius: 50%;
+  overflow: hidden;
+  vertical-align: middle;
+  span {
+    color: #fff;
+    font-size: 27px;
+    line-height: 55px;
+  }
+}
+.red {
+  color: red;
+}
+.yellow {
+  color: orange;
+}
+</style>