From 6343fe4c609b57002d84b83b502899d63dd53727 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 14 Mar 2024 13:57:37 +0800
Subject: [PATCH] fix: 监测因子折线图修改

---
 src/views/contrast/index.vue |  420 +++++++++++++++++++++++++++++++++++-------------------------
 1 files changed, 245 insertions(+), 175 deletions(-)

diff --git a/src/views/contrast/index.vue b/src/views/contrast/index.vue
index f238603..f57853b 100644
--- a/src/views/contrast/index.vue
+++ b/src/views/contrast/index.vue
@@ -1,12 +1,12 @@
-+<template>
-  <div style="width:100%">
+<template>
+  <div style="width: 100%; height: 100%; margin:0 auto">
     <div class="topSelect">
       <el-cascader
         v-model="newMac"
         :options="options"
         clearable
         placeholder="������������"
-        style="width: 354px;"
+        style="width: 354px"
       />
       <el-cascader
         v-model="value"
@@ -15,7 +15,7 @@
         collapse-tags
         clearable
         placeholder="������������"
-        style="margin-left:20px"
+        style="margin-left: 20px"
       />
       <!-- <el-select v-model="value" placeholder="������������">
         <el-option
@@ -28,27 +28,43 @@
       <!--  <el-radio-group v-model="radio1" style="margin-left:20px">
         <el-radio-button label="������" />
         <el-radio-button label="������" /> -->
-        <!-- <el-radio-button label="������" />
+      <!-- <el-radio-button label="������" />
         <el-radio-button label="���������" /> -->
       <!-- </el-radio-group>  -->
-       <el-select v-model="radio1" placeholder="���������" style="margin-left:20px">
+      <el-select
+        v-model="radio1"
+        placeholder="���������"
+        style="margin-left: 20px"
+      >
         <el-option
           v-for="item in options1"
           :key="item.value"
           :label="item.label"
           :value="item.value"
-        >
-        </el-option>
+        />
       </el-select>
-      <component :is="dataType" class="select11" style="padding-left:0;margin-left:20px;width:160px" @sendPickerChild="showPickerChild" />
+      <component
+        :is="dataType"
+        class="select11"
+        style="padding-left: 0; margin-left: 20px; width: 160px"
+        @sendPickerChild="showPickerChild"
+      />
       <!--������������-->
-      <el-button @click="selectData" class="btn1">������</el-button>
+      <el-button
+        class="btn1"
+        @click="selectData"
+      >
+        ������
+      </el-button>
     </div>
     <!-- <div class="topTitle">
       <div style="position:absolute">(������:ug/m��)</div>
       <div style="text-align: center;width: 100%;">{{ newData }}��{{ newMac?newMac[0]:'' }}��{{ newMac?newMac[newMac.length - 1][0]:'' }}��{{ value |sensorFilter }}�����������</div>
     </div> -->
-    <LineChart :chart-data="lineChartData" />
+    <LineChart
+      :chart-data="lineChartData"
+      style="height: 40rem;"
+    />
   </div>
 </template>
 
@@ -62,46 +78,48 @@
 import HourPicker from '@/components/Form/HourPicker'
 import CustomPicker from '@/components/Form/CustomPicker'
 import json from '@/assets/json/sensor.json'
-
+import HourPicker1 from '@/components/Form/HourPicker1'
 const lineChartData = {
   newVisitis: {
     expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
+    actualData: [120, 82, 91, 154, 162, 140, 145],
   },
   messages: {
     expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
+    actualData: [180, 160, 151, 106, 145, 150, 130],
   },
   purchases: {
     expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
+    actualData: [120, 90, 100, 138, 142, 130, 130],
   },
   shoppings: {
     expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
+    actualData: [120, 82, 91, 154, 162, 140, 130],
+  },
 }
 export default {
-// import ���������������������������������������������������props
+  // import ���������������������������������������������������props
   components: {
     LineChart,
     DatePicker,
     MouthPicker,
     HourPicker,
-    CustomPicker
+    CustomPicker,
+    HourPicker1,
   },
   filters: {
-    sensorFilter: function(value) {
+    sensorFilter: function (value) {
       if (!value) return ''
       return json[value]
-    }
+    },
   },
   props: {
     // defaultData: Array
   },
-  data() {
+  data () {
     // ������������������
     return {
+      isYaxisSame: ['a34004', 'a34002', 'a05024', 'a21004', 'a21026'],
       dataType: 'HourPicker',
       lineChartData: lineChartData.purchases,
       props: { multiple: true },
@@ -113,36 +131,39 @@
       // newMac2:'',
       newSensor: [],
       radio1: '������',
-      unit: 0,
+      unit: 1,
       type: 'select',
       newLineChartData: {
         series: [],
         xAxis: [],
-        title: ''
+        title: '',
       },
       newData: '',
       defaultData: [],
       newListData: [],
       chartSensorName: '',
       middleData: [],
-       options1:[
-       
-         {
-          label:'������',
-          value:'������'
-        }
-        , {
-          label:'������',
-          value:'������'
-        }
-      ]
+      options1: [
+        {
+          label: '���������',
+          value: '���������',
+        },
+        {
+          label: '������',
+          value: '������',
+        },
+        {
+          label: '������',
+          value: '������',
+        },
+      ],
     }
   },
   // ������������ ���������data������
   computed: {},
   // ������data������������������
   watch: {
-    newMac(newVal, oldval) {
+    newMac (newVal, oldval) {
       this.newMac1 = []
       // for (let i = 0; i < newVal.length; i++) {
       //   this.newMac1.push(newVal[i][1][1])
@@ -153,19 +174,22 @@
       //   this.getSensor()
       // }
     },
-    value(n, o) {
+    value (n, o) {
       this.value1 = []
       for (let i = 0; i < n.length; i++) {
         this.value1.push(n[i][0])
       }
     },
-    radio1(nv, ov) {
+    radio1 (nv, ov) {
       if (nv === '������') {
         this.dataType = 'HourPicker'
-        this.unit = 0
+        this.unit = 1
       } else if (nv === '������') {
         this.dataType = 'DatePicker'
-        this.unit = 1
+        this.unit = 3
+      } else if (nv === '���������') {
+        this.dataType = 'HourPicker1'
+        this.unit = 0
       }
       // else if (nv === '������') {
       //   this.dataType = 'MouthPicker'
@@ -174,43 +198,52 @@
       //   this.dataType = 'CustomPicker'
       //   this.unit = 'hour'
       // }
-    }
+    },
   },
   // ������������ - ��������������������������������� this ���������
-  created() {
+  created () {
     this.getData()
   },
   // ������������ - ��������������������������� DOM ���������
-  mounted() {
-
-  },
-  beforeCreate() {}, // ������������ - ������������
-  beforeMount() {}, // ������������ - ������������
-  beforeUpdate() {}, // ������������ - ������������
-  updated() {}, // ������������ - ������������
-  beforeDestroy() {}, // ������������ - ������������
-  destroyed() {}, // ������������ - ������������
-  activated() {},
+  mounted () { },
+  beforeCreate () { }, // ������������ - ������������
+  beforeMount () { }, // ������������ - ������������
+  beforeUpdate () { }, // ������������ - ������������
+  updated () { }, // ������������ - ������������
+  beforeDestroy () { }, // ������������ - ������������
+  destroyed () { }, // ������������ - ������������
+  activated () { },
   // ������������
   methods: {
     // ������������������������
-    getData() {
+    getData () {
       this.$request({
         url: '/monitorPoint/queryMonitorPoints',
         method: 'get',
         params: {
-          organizationId: this.$store.state.orgId
-        }
+          organizationId: this.$store.state.orgId,
+        },
       })
         .then((res) => {
           // console.log('������index������������������������')
           // console.log(res)
           this.defaultData = res.data.monitorPoints
           for (let i = 0; i < this.defaultData.length; i++) {
-            this.options.push({ value: this.defaultData[i].name, label: this.defaultData[i].name })
+            this.options.push({
+              value: this.defaultData[i].name,
+              label: this.defaultData[i].name,
+            })
             this.options[i].children = []
-            for (let j = 0; j < this.defaultData[i].devices.length; j++) {
-              this.options[i].children.push({ value: [this.defaultData[i].devices[j].name, this.defaultData[i].devices[j].mac], label: this.defaultData[i].devices[j].name })
+            if (this.defaultData[i].devices) {
+              for (let j = 0; j < this.defaultData[i].devices.length; j++) {
+                this.options[i].children.push({
+                  value: [
+                    this.defaultData[i].devices[j].name,
+                    this.defaultData[i].devices[j].mac,
+                  ],
+                  label: this.defaultData[i].devices[j].name,
+                })
+              }
             }
           }
         })
@@ -219,7 +252,7 @@
         })
     },
     // ������mac���������������
-    getSensor() {
+    getSensor () {
       // stringMacs.su
       // var newMac = this.newMac[this.newMac.length - 1][this.newMac[this.newMac.length - 1].length - 1]
       // this.newMac1 = this.newMac[this.newMac.length - 1][this.newMac[this.newMac.length - 1].length - 1]
@@ -227,111 +260,130 @@
         url: '/deviceInfo/getMacSensors',
         method: 'post',
         data: {
-          macs: this.newMac1
-        }
-      }).then((res) => {
-        // console.log(res)
-        this.newSensor = []
-        var sensor = res.data
-        for (var i in sensor) {
-          this.newSensor.push({ value: i, label: sensor[i] })
-          // this.newSensor.push({ value: '123', label: '123' })
-          // this.newSensor[i].value = sensor.i
-          // this.newSensor[i].name = sensor[i]
-        }
-      }).catch((err) => {
-        console.log(err)
+          macs: this.newMac1,
+        },
       })
+        .then((res) => {
+          // console.log(res)
+          this.newSensor = []
+          var sensor = res.data
+          for (var i in sensor) {
+            this.newSensor.push({ value: i, label: sensor[i] })
+            // this.newSensor.push({ value: '123', label: '123' })
+            // this.newSensor[i].value = sensor.i
+            // this.newSensor[i].name = sensor[i]
+          }
+        })
+        .catch((err) => {
+          console.log(err)
+        })
     },
     // ������
-    selectData() {
+    selectData () {
       var newLineChartData = {
         series: [],
         xAxis: [],
-        title: []
+        title: [],
+        yAxis: []
       }
       this.newXData = []
-      this.$request({ // dataDisplay/sensorComparisonDisplayV2
+      this.$request({
+        // dataDisplay/sensorComparisonDisplayV2
         url: '/dataDisplay/sensorComparisonDisplayV2',
         method: 'post',
         data: {
           mac: this.newMac1[0],
           sensorCodes: this.value1,
           reportType: this.unit,
-          times: this.newData
-        }
-      }).then((res) => {
-        // console.log('������������������������������')
-        console.log(res, 111)
-        this.middleData = JSON.parse(JSON.stringify(res.data))
-        const data = res.data
-        // ���������������
-        // ������������������
-        for (let i = 0; i < data.length; i++) {
-          // ������������������������������������
-          data[i].name = this.$options.filters.sensorFilter(data[i].sensorCode)
-          // data[i].name = data[i].sensorCode
-          var tempArray = []
-          for (let j = 0; j < data[i].timeValueList.length; j++) {
-            tempArray.push(data[i].timeValueList[j].value)
-          }
-          data[i].MaxValue = this.getMaxValue(tempArray)
-          data[i].sort = i
-        }
-        // ���������MaxValue������������
-        data.sort(this.compare('MaxValue', false))
-        // ���1���������������������������
-        var step = Math.floor((1 / data.length) * 100) / 100
-        data[0].Factor = 1
-        // ������������������������������������������������������������������������
-        for (let i = 1; i < data.length; i++) {
-          // ���������������
-          var supposemMaxValue = data[0].MaxValue - i * step * data[0].MaxValue
-          if (data[i].MaxValue < supposemMaxValue) {
-            data[i].Factor = supposemMaxValue / data[i].MaxValue
-          }
-        }
-        // ���������sort������������
-        data.sort(this.compare('sort', true))
-        // ������������������������������
-        
-        // for (let i = 0; i < data.length; i++) {
-        //   newLineChartData.series.push({ data: [], name: '', type: 'line' })
-        //   newLineChartData.series[i].name = data[i].name
-        //   newLineChartData.title.push(data[i].name)
-        //   for (let j = 0; j < data[i].timeValueList.length; j++) {
-        //     data[i].timeValueList[j].value = data[i].timeValueList[j].value * data[i].Factor
-        //     newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
-        //   }
-        // }
-        for (let i = 0; i < data.length; i++) {
-          newLineChartData.series.push({ data: [], name: '', type: 'line' })
-          newLineChartData.series[i].name = data[i].name
-          newLineChartData.title.push(data[i].name)
-          for (let j = 0; j < data[i].timeValueList.length; j++) {
-            // console.log(data);
-            data[i].timeValueList[j].value = data[i].timeValueList[j].value * data[i].Factor
-            newLineChartData.series[i].data.push({ value: 0, data0: 0 })
-            newLineChartData.series[i].data[j].value = data[i].timeValueList[j].value
-          }
-        }
-        for (let i = 0; i < data[0].timeValueList.length; i++) {
-          newLineChartData.xAxis.push(data[0].timeValueList[i].time)
-        }
-        // ���������tooltip������������������
-        for (let i = 0; i < this.middleData.length; i++) {
-          for (let j = 0; j < this.middleData[i].timeValueList.length; j++) {
-            newLineChartData.series[i].data[j].data0 = this.middleData[i].timeValueList[j].value
-          }
-        }
-        this.lineChartData = newLineChartData
-        // console.log(newLineChartData.series[0].name);
-      }).catch((err) => {
-        console.log(err)
+          times: this.newData,
+        },
       })
+        .then((res) => {
+          console.log('������������������������������', res.data)
+          const data = res.data
+          let yAxisList = []
+          for (let i = 0; i < data.length; i++) {
+            data[i].name = this.$options.filters.sensorFilter(
+              data[i].sensorCode
+            )
+          }
+          for (let i = 0; i < data[0].timeValueList.length; i++) {
+            newLineChartData.xAxis.push(data[0].timeValueList[i].time)
+          }
+
+          for (var i = 0; i < data.length; i++) {
+            if (this.isYaxisSame.includes(data[i].sensorCode)) {
+              yAxisList.push(data[i].name)
+            } else {
+              newLineChartData.yAxis.push(
+                {name: data[i].name,
+                  code: data[i].sensorCode,
+                  type: 'value',
+                  position: 'left',
+                  axisTick: {
+                    show: true, // ������������
+                  },
+                  axisLine: {
+                    show: true, // ���������������������
+                  },
+                  splitNumber: 4, // ������������������������������
+                  splitLine: {
+                  // ���������������
+                    show: false,
+                  },
+                },
+              )
+            }
+
+            newLineChartData.series.push({
+              data: [],
+              name: data[i].name,
+              code: data[i].sensorCode,
+              type: 'line',
+              triggerLineEvent: true,
+              yAxisIndex: 0,
+              emphasis: { focus: 'series' },
+              lineStyle: { width: 4 }
+            })
+            newLineChartData.title.push(data[i].name)
+            for (var j = 0; j < data[i].timeValueList.length; j++) {
+              newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
+            }
+          }
+          if (yAxisList.length > 0) {
+            newLineChartData.yAxis = [ {
+              type: 'value',
+              position: 'left',
+              axisTick: {
+                show: true, // ������������
+              },
+              axisLine: {
+                show: true, // ���������������������
+              },
+              splitNumber: 4, // ������������������������������
+              splitLine: {
+                // ���������������
+                show: false,
+              },
+            }, ...newLineChartData.yAxis]
+          }
+          newLineChartData.yAxis.forEach((item, index) => {
+            item.position = (index + 1) % 2 === 0 ? 'right' : 'left'
+            item.offset = this.getoffsetData(index)
+          })
+          newLineChartData.series.forEach(item => {
+            item.yAxisIndex = yAxisList.includes(item.name) ? 0 : newLineChartData.yAxis.findIndex(
+              i => i.code && item.code === i.code
+            )
+          })
+          this.lineChartData = newLineChartData
+        })
+        .catch((err) => {
+          console.log(err)
+        })
     },
     // ���������������������������������������������
-    showPickerChild(data) {
+    showPickerChild (data) {
       // var newLineChartData = {
       //   series: [],
       //   xAxis: [],
@@ -416,13 +468,23 @@
       //   console.log(err)
       // })
     },
+    // ������y���������������
+    getoffsetData (val) {
+      if (val === 0 || val === 1) return 0
+      if (val % 2 === 0) {
+        return val / 2 * 60
+      }
+      if (val % 2 !== 0) {
+        return val / 3 * 60
+      }
+    },
     // ���������������
-    getMaxValue(arr) {
+    getMaxValue (arr) {
       // return Math.max.apply(null, arr)
       return Math.max(...arr)
     },
     // ������������������
-    compare(property, desc) {
+    compare (property, desc) {
       return (a, b) => {
         var value1 = a[property]
         var value2 = b[property]
@@ -434,40 +496,48 @@
       }
     },
     // ������������������������
-    filterSensorName() {
-      this.chartSensorName = this.$options.filters.sensorFilter(this.chartSensorKey[0].sensorCode)
-    }
-  } // ���������������keep-alive������������������������������������
+    filterSensorName () {
+      this.chartSensorName = this.$options.filters.sensorFilter(
+        this.chartSensorKey[0].sensorCode
+      )
+    },
+  }, // ���������������keep-alive������������������������������������
 }
 </script>
 <style scoped lang="scss">
-.topSelect{
-    display: flex;
-    margin-bottom: 20px;
-    padding: 20px 15px 0 15px;
-    span:first-child{
-        flex: 1;
-    }
-    div:last-child{
-        width: 300px;
-        line-height: 40px;
-        padding-left: 6px;
-    }
+.topSelect {
+  display: flex;
+  margin-bottom: 20px;
+  padding: 20px 15px 0 15px;
+
+  span:first-child {
+    flex: 1;
+  }
+
+  div:last-child {
+    width: 300px;
+    line-height: 40px;
+    padding-left: 6px;
+  }
 }
-.topTitle{
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 20px;
-    padding: 0 15px;
+
+.topTitle {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  padding: 0 15px;
 }
-.btn1{
+
+.btn1 {
   margin-left: 1%;
   height: 40px;
 }
-.select11{
-  width: 20% !important
+
+.select11 {
+  width: 20% !important;
 }
-/deep/.el-date-editor .el-range-separator{
-  width: 11% 
+
+/deep/.el-date-editor .el-range-separator {
+  width: 11%;
 }
 </style>

--
Gitblit v1.8.0