From ffafeb1548168dd8ee9526030e0ec3a7e7c7089a Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期五, 23 四月 2021 13:46:23 +0800
Subject: [PATCH] 废水实时数据弹框相关修改

---
 src/components/BaseNav/WasteWater/RealData.vue | 1391 +++++++++++++++++----------------------------------------
 1 files changed, 431 insertions(+), 960 deletions(-)

diff --git a/src/components/BaseNav/WasteWater/RealData.vue b/src/components/BaseNav/WasteWater/RealData.vue
index c96fd27..c11e43f 100644
--- a/src/components/BaseNav/WasteWater/RealData.vue
+++ b/src/components/BaseNav/WasteWater/RealData.vue
@@ -1,45 +1,42 @@
 <template>
-  <div id="Tab">
-    <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
-    <div class="form-echrts">
-      <div class="from-search">
-        <div class="pickerMon">
-          <div class="pickerData">
-            <span> 寮�濮嬫椂闂�:</span>
-            <span class="pickerTable">
-              <el-date-picker type="datetime" v-model="formInline.timeStart"></el-date-picker>
-            </span>
-          </div>
-          <div class="pickerData">
-            <span>缁撴潫鏃堕棿:</span>
-            <span class="pickerTable">
-              <el-date-picker type="datetime" v-model="formInline.timeEnd"></el-date-picker>
-            </span>
-          </div>
-        </div>
-        <div>
-          <span>閲囨牱鐐规暟:</span>
-          <el-select v-model="formInline.region" placeholder="50">
-            <el-option label="0" value="0"></el-option>
-            <el-option label="25" value="25"></el-option>
-            <el-option label="50" value="50"></el-option>
-            <el-option label="75" value="75"></el-option>
-            <el-option label="100" value="100"></el-option>
-          </el-select>
-        </div>
-        <div class="detailbtn" @click="onSubmit">鏌ヨ</div>
-      </div>
-      <div style="width:5rem;height:2rem;" ref="echarts"></div>
+  <div class="echarts-box">
+    <div class="tab-scroll">
+      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
+      <span class="time-select">{{ formData.startTime }}鈥攞{ formData.endTime }}</span>
+    </div>
+    <div class="echarts-form">
+      <span class="demonstration">寮�濮嬫椂闂达細</span>
+      <el-date-picker
+          v-model="formData.startTime"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="datetime">
+      </el-date-picker>
+      <span class="demonstration">缁撴潫鏃堕棿锛�</span>
+      <el-date-picker
+          v-model="formData.endTime"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="datetime">
+      </el-date-picker>
+      <span class="demonstration">閲囨牱鐐规暟锛�</span>
+      <el-select v-model="region" placeholder="璇烽�夋嫨" style="width: 80px">
+        <el-option v-for="(item,index) in regionList" :key="index" :label="item" :value="item"></el-option>
+      </el-select>
+      <el-button @click="querySearch()">鏌ヨ</el-button>
+      <el-button>鏄庣粏琛�</el-button>
+    </div>
+    <div class="echarts-chart">
+      <div style="width:5rem;height:1.5rem;" ref="echarts"></div>
     </div>
   </div>
 </template>
 
 <script>
 
-import PublicDataStandard from '@/components/BaseNav/PublicDataStandard'
-import mapApi from '@/api/mapApi'
 import 'dayjs/locale/es'
 import dayjs from 'dayjs'
+
+import mapApi from '../../../api/mapApi'
+import PublicDataStandard from '../PublicDataStandard'
 
 export default {
   name: 'ECharts',
@@ -48,11 +45,12 @@
   },
   data () {
     return {
+      a: '',
       // tab鏍忎紶閫掓帴鏀舵暟鎹�
       dataStandard: [
         {
           current: {
-            name: '姘哀鍖栫墿1',
+            name: '姘哀鍖栫墿',
             val: 29.93
           },
           standard: {
@@ -90,28 +88,20 @@
             val: null
           }
         }],
-
-      // echarts鐨勬暟鎹缃�
-      myChart: null,
-
-      // 寮�濮� /缁撴潫 鏃堕棿 鍜岄噰鏍风偣鍊肩殑缁戝畾鍊兼暟鎹�
-      formInline: {
-        region: '',
-        timeStart: '',
-        timeEnd: ''
+      formData: {
+        startTime: dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss'),
+        endTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
       },
-
-      // echarts鐨刼ptions鏁版嵁浼犲叆
-      echartsOptions: {
-        legend: [],
-        ydatas: [],
-        yname: ' 娴撳害(mg/m鲁)'
-      },
-
-      JSONTimeData: {
-        id: 21,
-        unionTagCodeList: []
-      }
+      region: '25',
+      regionList: [25, 50, 75, 100],
+      datatype: 1,
+      RealTimeDataList: [],
+      bzz: null,
+      bzzList: [],
+      nameList: [],
+      // legend绫诲埆鍥捐〃灞曠ず璁剧疆鏁扮粍
+      lengList: [],
+      ydatas: []
     }
   },
   mounted () {
@@ -120,562 +110,261 @@
     })
   },
   methods: {
-    // 鍒濆鍖栨暟鎹幏鍙杄charts鐨刼ptions鏁版嵁
+    // 鏌ヨ鎼滅储鍔熻兘
+    querySearch () {
+      this.initEchartsData()
+    },
     async initEchartsData () {
-      // 鐢ㄤ簬鎺ュ彛鏁版嵁璇锋眰鐨勫弬鏁� 寮�濮�/缁撴潫鏃堕棿 || 鍙�夋嫨鏌ヨ鐨勫紑濮�/缁撴潫鏃堕棿
-      this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')
-      this.formInline.timeStart = dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss')
       const data = {
         $tagCodeList: 'TJIP45.y2h508CEMS01NOX,CTJIP45.y2h508CEMS01SO2,CTJIP45.y2h508CEMS01F,CTJIP45.y2h508CEMS01PM',
-        $startTime: this.formInline.timeEnd,
-        $endTime: this.formInline.timeStart,
+        $startTime: this.formData.startTime,
+        $endTime: this.formData.endTime,
         $step: 15
       }
-      const result = (await mapApi.DataItems(data)).data
-      console.log(result)
-
-      // this.hash(result)
-      // this.hashtime(result)
-      // this.dealwithData(result)
-      this.DrawEXHRealTimeDateChart()
-      this.myChart.hideLoading()
+      const result = (await mapApi.getDataItems(data)).data
+      this.pointsSet(result)
+      this.legendSet()
+      this.yDataSet()
+      this.drawRealTimeDateChart()
     },
-    // 鏁版嵁澶勭悊
-    dealwithData (result) {
-      // 澶勭悊鏁版嵁寮�濮�
-      const d = result
-      // const nameList = [] // 瀛樻斁鍥句緥
-
-      let data // 鏁版嵁绫诲瀷// var data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]}
-      // const datalist // 瀛樻斁data鐨勬暟缁�
-      // const bzh = []
+    // 鎺ュ彛鏁版嵁鎸夌収 鏁版嵁鍐呭垎绫诲埆璁剧疆
+    pointsSet (d) {
+      let data = []
+      let datalist = []
       for (let i = 0; i < d.length; i++) {
-        const name = d[i].UnionTagCode
-        const newdate = d[i].ReadTime
-        data = {
-          name: name,
-          value: [newdate, d[i].TagValue]
+        // this.RealTimeDataList = []
+        // 鍒ゆ柇鏄惁缁х画鎵ц
+        if (d[i].ErrorMessage != null) {
+          continue
         }
-        console.log(data)
-        // for (var k = 0; k < RealTimeDataList.length; k++) {
-        //   if (RealTimeDataList[k].name == name) {
-        //     RealTimeDataList[k].data.push(data)
-        //   }
-        // }
-      }
-    },
-    // hash (result) {
-    //   // const hash = []
-    //   // for (let i = 0; i < result.length; i++) {
-    //   //   if (hash.indexOf(result[i].UnionTagCode) === -1) {
-    //   //     hash.push(result[i].UnionTagCode)
-    //   //   }
-    //   // }
-    //   // console.log(hash)
-    //   // this.JSONTimeData.unionTagCodeList = hash
-    //   // var lengList = []
-    //   var lengList = result
-    //   var objTemp
-    //
-    //   for (var l = 0; l < lengList.length; l++) {
-    //     var obj
-    //     var iconurl
-    //     if (lengList[l] == 'COD') {
-    //       iconurl = 'image://../assets/imgs/legend/SO2.png'
-    //     } else if (nameList[l] == '姘ㄦ爱') {
-    //       iconurl = 'image://../assets/imgs/legend/NOX.png'
-    //     } else if (nameList[l] == '鎬荤7') {
-    //       iconurl = 'image://../assets/imgs/legend/YanChen.png'
-    //     } else if (nameList[l] == '鎬绘爱') {
-    //       iconurl = 'image://../assets/imgs/legend/zongdan.png'
-    //     } else {
-    //       iconurl = 'image://../assets/imgs/legend/VOCs.png'
-    //     }
-    //
-    //     if (nameList[l] == '搴熸按' || nameList[l] == '搴熸按娴侀噺') { // 灏嗗簾姘存祦閲忔帓鍒版暟缁勬渶鍚�
-    //       objTemp = {
-    //         name: nameList[l],
-    //         icon: iconurl,
-    //         textStyle: {
-    //           color: '#ccc'
-    //         },
-    //         itemWidth: 20,
-    //         itemHeight: 5
-    //       }
-    //     } else {
-    //       obj = {
-    //         name: nameList[l],
-    //         icon: iconurl,
-    //         textStyle: {
-    //           color: '#ccc'
-    //         },
-    //         itemWidth: 20,
-    //         itemHeight: 5
-    //       }
-    //       lengList.push(obj)
-    //     }
-    //   }
-    //   lengList.push(objTemp)
-    // },
-    hashtime (result) {
-      const hashtime = []
-      for (let i = 0; i < result.length; i++) {
-        if (hashtime.indexOf(result[i].ReadTime) === -1) {
-          hashtime.push(result[i].ReadTime)
+        // temp 涓存椂鏁版嵁鍒ゆ柇鏂规硶
+        const tempList = [
+          {
+            'TJIP45.lscl2tbAIA-10505-1': '姘哀鍖栫墿',
+            'TJIP45.lscl2tbAIA-10505-2': '鐑熷皹',
+            'TJIP45.lscl2tb552AISA11202A': '浜屾哀鍖栫7',
+            'TJIP45.lscl2tb552AISA11201B': 'pH',
+            'TJIP45.lscl2tb552AI10710': '浜屾哀鍖栫⒊'
+          }
+        ]
+        // 鎸囨爣
+        const name = tempList[0][d[i].UnionTagCode]
+        // 鍒ゆ柇甯傚眬绫诲瀷杩涜鍒嗙粍
+        if (this.nameList.length === 0) {
+          // 鏁扮粍涓虹┖鏃�
+          this.nameList.push(name)
+          // todo 鐢╠ayjs
+          const newDate = new Date(d[i].ReadTime)
+          data = {
+            name: name,
+            value: [newDate, d[i].TagValue]
+          }
+          datalist = {
+            name: name,
+            data: [data]
+          }
+          // console.log('1111111')
+          this.RealTimeDataList.push(datalist)
+        } else if (this.nameList.indexOf(name) < 0) {
+          // 娌℃湁鎸囨爣鏃�
+          this.nameList.push(name)
+          const newDate = new Date(d[i].ReadTime)
+          data = {
+            name: name,
+            value: [newDate, d[i].TagValue]
+          }
+          datalist = {
+            name: name,
+            data: [data]
+          }
+          // console.log('222222222')
+          this.RealTimeDataList.push(datalist)
+        } else if (i === d.length - 1) {
+          // 寰幆鍒版渶鍚�
+          if (this.nameList.indexOf(name) < 0) {
+            this.nameList.push(name)
+            const newDate = new Date(d[i].ReadTime)
+            data = {
+              name: name,
+              value: [newDate, d[i].TagValue]
+            }
+            datalist = {
+              name: name,
+              data: [data]
+            }
+            // console.log('3333333')
+            this.RealTimeDataList.push(datalist)
+          } else {
+            const newDate = new Date(d[i].ReadTime)
+            data = {
+              name: name,
+              value: [newDate, d[i].TagValue]
+            }
+            // console.log('444444')
+            for (let k = 0; k < this.RealTimeDataList.length; k++) {
+              if (this.RealTimeDataList[k].name === name) {
+                this.RealTimeDataList[k].data.push(data)
+              }
+            }
+          }
+        } else {
+          const newDate = new Date(d[i].ReadTime)
+          data = {
+            name: name,
+            value: [newDate, d[i].TagValue]
+          }
+          for (let k = 0; k < this.RealTimeDataList.length; k++) {
+            if (this.RealTimeDataList[k].name === name) {
+              this.RealTimeDataList[k].data.push(data)
+            }
+          }
         }
       }
-      console.log(hashtime)
+      console.log(this.RealTimeDataList)
     },
-    DrawEXHRealTimeDateChart () {
-      // 璧嬪�肩殑鏁版嵁
-      // var legend = this.echartsOptions.legend
-      // var ydatas = this.echartsOptions.ydatas
-      const yname = this.echartsOptions.yname
-      const ydatas = [
-        {
-          name: '姘哀鍖栫墿',
-          zdcbcolor: '#00B0F0',
-          zxcolor: '#00B0F0',
-          bzz: 50,
-          data: [{
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:18:19', 39.51431]
-          },
-          {
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:18:34', 38.76508]
-          },
-          {
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:18:49', 37.57471]
-          },
-          {
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:19:04', 36.3796]
-          },
-          {
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:19:19', 36.10718]
-          },
-          {
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:19:34', 35.81126]
-          },
-          {
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:19:49', 35.9184]
-          },
-          {
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:20:04', 36.08839]
-          },
-          {
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:20:19', 36.3718]
-          },
-          {
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:20:34', 36.8966]
-          },
-          {
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:20:49', 37.3998]
-          },
-          {
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:21:04', 37.11937]
-          },
-          {
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:21:19', 36.12424]
-          },
-          {
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:21:34', 34.99567]
-          },
-          {
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:21:49', 34.48063]
-          },
-          {
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:22:04', 34.62222]
-          },
-          {
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:22:19', 34.84583]
-          },
-          {
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:22:34', 35.80923]
-          },
-          {
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:22:49', 35.93465]
-          },
-          {
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:23:04', 35.78891]
-          },
-          {
-            name: '姘哀鍖栫墿',
-            value: ['2021/04/13 09:23:19', 35.54268]
-          }]
-        },
-        {
-          name: '浜屾哀鍖栫~',
-          data: [{
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:18:19', 5.112573]
-          },
-          {
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:18:34', 4.578955]
-          },
-          {
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:18:49', 4.869465]
-          },
-          {
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:19:04', 5.270735]
-          },
-          {
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:19:19', 5.355475]
-          },
-          {
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:19:34', 5.242907]
-          },
-          {
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:19:49', 5.230558]
-          },
-          {
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:20:04', 5.262951]
-          },
-          {
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:20:19', 5.268744]
-          },
-          {
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:20:34', 5.159671]
-          },
-          {
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:20:49', 4.955352]
-          },
-          {
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:21:04', 5.110546]
-          },
-          {
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:21:19', 5.235723]
-          },
-          {
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:21:34', 5.443502]
-          },
-          {
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:21:49', 5.708939]
-          },
-          {
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:22:04', 5.882327]
-          },
-          {
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:22:19', 6.017494]
-          },
-          {
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:22:34', 5.410021]
-          },
-          {
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:22:49', 5.379694]
-          },
-          {
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:23:04', 5.551433]
-          },
-          {
-            name: '浜屾哀鍖栫~',
-            value: ['2021/04/13 09:23:19', 5.819743]
-          }],
-          zdcbcolor: 'red',
-          zxcolor: '#fff21c',
-          bzz: 50
-        },
-        {
-          name: '搴熸皵娴侀噺',
-          data: [{
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:18:19', 5.012617]
-          },
-          {
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:18:34', 4.992213]
-          },
-          {
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:18:49', 5.026886]
-          },
-          {
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:19:04', 5.052861]
-          },
-          {
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:19:19', 5.038826]
-          },
-          {
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:19:34', 5.062339]
-          },
-          {
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:19:49', 5.071915]
-          },
-          {
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:20:04', 5.053693]
-          },
-          {
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:20:19', 5.03562]
-          },
-          {
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:20:34', 5.043983]
-          },
-          {
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:20:49', 5.059231]
-          },
-          {
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:21:04', 5.042176]
-          },
-          {
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:21:19', 5.028253]
-          },
-          {
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:21:34', 5.024891]
-          },
-          {
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:21:49', 5.01542]
-          },
-          {
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:22:04', 5.025787]
-          },
-          {
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:22:19', 5.038269]
-          },
-          {
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:22:34', 5.01441]
-          },
-          {
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:22:49', 5.010105]
-          },
-          {
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:23:04', 5.012341]
-          },
-          {
-            name: '搴熸皵娴侀噺',
-            value: ['2021/04/13 09:23:19', 4.996146]
-          }],
-          zdcbcolor: 'red',
-          zxcolor: '#9ACD32',
-          bzz: null
-        },
-        {
-          name: '鐑熷皹',
-          data: [{
-            name: '鐑熷皹',
-            value: [['2021/04/13 09:18:19', 0.8297127]]
-          },
-          {
-            name: '鐑熷皹',
-            value: ['2021/04/13 09:18:34', 0.8347292]
-          },
-          {
-            name: '鐑熷皹',
-            value: ['2021/04/13 09:18:49', 0.9218481]
-          },
-          {
-            name: '鐑熷皹',
-            value: ['2021/04/13 09:19:04', 0.913429]
-          },
-          {
-            name: '鐑熷皹',
-            value: ['2021/04/13 09:19:19', 0.9026684]
-          },
-          {
-            name: '鐑熷皹',
-            value: ['2021/04/13 09:19:34', 0.8060119]
-          },
-          {
-            name: '鐑熷皹',
-            value: ['2021/04/13 09:19:49', 0.781314]
-          },
-          {
-            name: '鐑熷皹',
-            value: ['2021/04/13 09:20:04', 0.8958074]
-          },
-          {
-            name: '鐑熷皹',
-            value: ['2021/04/13 09:20:19', 0.9093901]
-          },
-          {
-            name: '鐑熷皹',
-            value: ['2021/04/13 09:20:34', 0.8743498]
-          },
-          {
-            name: '鐑熷皹',
-            value: ['2021/04/13 09:20:49', 0.9024854]
-          },
-          {
-            name: '鐑熷皹',
-            value: ['2021/04/13 09:21:04', 0.9456897]
-          },
-          {
-            name: '鐑熷皹',
-            value: ['2021/04/13 09:21:19', 0.9747347]
-          },
-          {
-            name: '鐑熷皹',
-            value: ['2021/04/13 09:21:34', 0.9200308]
-          },
-          {
-            name: '鐑熷皹',
-            value: ['2021/04/13 09:21:49', 0.8987293]
-          },
-          {
-            name: '鐑熷皹',
-            value: ['2021/04/13 09:22:04', 0.8613345]
-          },
-          {
-            name: '鐑熷皹',
-            value: ['2021/04/13 09:22:19', 0.8747463]
-          },
-          {
-            name: '鐑熷皹',
-            value: ['2021/04/13 09:22:34', 0.8883187]
-          },
-          {
-            name: '鐑熷皹',
-            value: ['2021/04/13 09:22:49', 0.881333]
-          },
-          {
-            name: '鐑熷皹',
-            value: ['2021/04/13 09:23:04', 0.9142911]
-          },
-          {
-            name: '鐑熷皹',
-            value: ['2021/04/13 09:23:19', 0.9569058]
-          }],
-          zdcbcolor: 'red',
-          zxcolor: '#f48183',
-          bzz: 10
-        }]
-      // const legend = [
-      //   // data: 'legend'
-      //   {
-      //     name: '姘哀鍖栫墿',
-      //     icon: 'image://../assets/imgs/legend/NOX.png',
-      //     textStyle: { color: '#ccc' },
-      //     itemWidth: 20,
-      //     itemHeight: 15
-      //   },
-      //   {
-      //     icon: 'image://../assets/imgs/legend/SO2.png',
-      //     itemHeight: 5,
-      //     itemWidth: 20,
-      //     name: '浜屾哀鍖栫~',
-      //     textStyle: {
-      //       color: '#CCC'
-      //     }
-      //   },
-      //   {
-      //     icon: 'image://../assets/imgs/legend/YanChen.png',
-      //     itemHeight: 5,
-      //     itemWidth: 20,
-      //     name: '鐑熷皹',
-      //     textStyle: { color: '#ccc' }
-      //   },
-      //   {
-      //     icon: 'image://../assets/imgs/legend/VOCs.png',
-      //     itemHeight: 5,
-      //     itemWidth: 20,
-      //     name: '搴熸皵娴侀噺',
-      //     textStyle: { color: '#ccc' }
-      //   }
-      // ]
-      // const iconlist = ['image://../assets/imgs/legend/NOX.png', 'image://../assets/imgs/legend/VOCs.png']
-      //     {
-      //   icon: 'image://../assets/imgs/legend/NOX.png'
-      // }, {
-      //   icon: 'image://../assets/imgs/legend/SO2.png'
-      // }, {
-      //   icon: 'image://../assets/imgs/legend/YanChen.png'
-      // },
-      // {
-      //   icon: 'image://../assets/imgs/legend/VOCs.png'
-      // }]
+    // legend绫诲埆鍥捐〃灞曠ず璁剧疆鏁扮粍
+    legendSet () {
+      this.lengList = []
+      let objTemp
+      for (let l = 0; l < this.nameList.length; l++) {
+        let obj
+        let IconUrl
+        if (this.nameList[l] === 'pH') {
+          IconUrl = 'image://../assets/imgs/legend/WenDu.png'
+        } else if (this.nameList[l] === '姘哀鍖栫墿') {
+          IconUrl = 'image://../assets/imgs/legend/NOX.png'
+        } else if (this.nameList[l] === '鐑熷皹') {
+          IconUrl = 'image://../assets/imgs/legend/zongdan.png'
+        } else if (this.nameList[l] === '浜屾哀鍖栫⒊') {
+          IconUrl = 'image://../assets/imgs/legend/YanChen.png'
+        } else if (this.nameList[l] === '浜屾哀鍖栫7') {
+          IconUrl = 'image://../assets/imgs/legend/VOCs.png'
+        }
+        if (this.nameList[l] === '搴熸按' || this.nameList[l] === '搴熸按娴侀噺') { // 灏嗗簾姘存祦閲忔帓鍒版暟缁勬渶鍚�
+          objTemp = {
+            name: this.nameList[l],
+            icon: IconUrl,
+            textStyle: {
+              color: '#ccc'
+            },
+            itemWidth: 20,
+            itemHeight: 5
+          }
+        } else {
+          obj = {
+            name: this.nameList[l],
+            icon: IconUrl,
+            textStyle: {
+              color: '#ccc'
+            },
+            itemWidth: 20,
+            itemHeight: 5
+          }
+          this.lengList.push(obj)
+        }
+      }
+      this.lengList.push(objTemp)
+    },
+    // yDataSet 鏁版嵁澶勭悊
+    yDataSet () {
+      this.bzzList = []
+      this.ydatas = []
+      for (let j = 0; j < this.nameList.length; j++) {
+        let zdcbcolor, zxcolor
+        if (this.nameList[j] === 'pH') {
+          zdcbcolor = 'red'
+          zxcolor = '#900090'
+        } else if (this.nameList[j] === '姘ㄦ爱') {
+          zdcbcolor = 'red'
+          zxcolor = '#00B0F0'
+        } else if (this.nameList[j] === '鐑熷皹') {
+          zdcbcolor = 'red'
+          zxcolor = '#f48183'
+        } else if (this.nameList[j] === '鎬绘爱') {
+          zdcbcolor = 'red'
+          zxcolor = '#e0ffff'
+        } else {
+          zdcbcolor = 'red'
+          zxcolor = '#9ACD32'
+        }
+        let ydata
 
-      // 鍒濆鍖杄charts
+        // 涓存椂鏁版嵁
+        const BBZMAPPING = {
+          COD: 35,
+          pH: 9,
+          鎬绘爱: 15,
+          鎬荤7: 0.3,
+          姘ㄦ爱: 3
+        }
+        for (let m = 0; m < this.RealTimeDataList.length; m++) {
+          let stdValue = null
+          if (this.RealTimeDataList[m].name === this.nameList[j]) {
+            for (const p in BBZMAPPING) {
+              // console.log('p' + p)
+              this.a = p
+              stdValue = BBZMAPPING[this.RealTimeDataList[m].name]
+            }
+            // console.log(stdValue)
+            this.bzz = {
+              name: this.nameList[j],
+              bzhui: stdValue
+            }
+            ydata = {
+              name: this.nameList[j],
+              data: this.RealTimeDataList[m].data,
+              zdcbcolor: zdcbcolor,
+              zxcolor: zxcolor,
+              bzz: stdValue
+            }
+            // console.log(stdValue)
+            this.bzzList.push(this.bzz)
+            this.ydatas.push(ydata)
+          }
+        }
+      }
+    },
+    // 鏍规嵁澶勭悊濂界殑鏁扮粍杩涜echarts鍥炬爣鐨勬覆鏌�
+    drawRealTimeDateChart () {
       this.myChart = this.$echarts.init(this.$refs.echarts)
+      this.myChart.clear()
 
-      // echarts鐨剆eries鏁版嵁
+      const legend = this.lengList
+      const yname = '娴撳害(mg/m鲁)'
+      const bzzList = this.bzzList
+
       const serLists = []
-      // for (var j = 0; j < ydatas.length; j++) {
-      //   var len = ydatas[j].data.length
-      //   for (var k = 0; k < len; k++) {
-      //     var it = ydatas[j].data[k]
-      //     var it2 = parseFloat(it).toFixed(2)
-      //     ydatas[j].data[k] = it2
-      //   }
-      // }
-      for (let i = 0; i < ydatas.length; i++) {
-        var bz = ydatas[i].bzz
-        var obj
+
+      for (let i = 0; i < this.ydatas.length; i++) {
+        const zdcbcolor = this.ydatas[i].zdcbcolor
+        const bz = this.ydatas[i].bzz
+        // console.log(bz)
+        let obj
         if (bz) {
           obj = {
-            name: ydatas[i].name,
-            smooth: true,
+            name: this.ydatas[i].name,
+            // symbol:'circle', // 鎶樼偣褰㈢姸
+            // symbolSize: 3,   //澶у皬
+            smooth: true, // 鐩寸嚎 锛宼rue 涓烘洸绾�
             itemStyle: {
               normal: {
                 color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹�
-                  // var biaozhuiz
-                  // for (var i = 0; i < exhbzzList.length; i++) {
-                  //   if (exhbzzList[i].name == c.seriesName) {
-                  //     biaozhuiz = exhbzzList[i].bzhui
-                  //   }
-                  // }
-                  // if (c.value[1] > biaozhuiz) {
-                  //   return zdcbcolor
-                  // } else if (c.value[1] > biaozhuiz * 0.9) {
-                  //   return '#FFA500'
-                  // } else {
-                  //   return '#33c95f'
-                  // }
+                  let biaozhuiz
+                  for (let i = 0; i < bzzList.length; i++) {
+                    if (bzzList[i].name === c.seriesName) {
+                      biaozhuiz = bzzList[i].bzhui
+                    }
+                  }
+                  if (c.value[1] > biaozhuiz) {
+                    return zdcbcolor
+                  } else if (c.value[1] > biaozhuiz * 0.9) {
+                    return '#FFA500'
+                  } else {
+                    return '#33c95f'
+                  }
                 },
                 lineStyle: { // 鎶樼嚎鐨勯鑹�
-                  color: ydatas[i].zxcolor,
+                  color: this.ydatas[i].zxcolor,
                   width: 2
                 },
                 // borderColor:'black',  //鎶樼偣杈规鐨勯鑹�
@@ -685,56 +374,93 @@
               }
             },
             type: 'line',
-            data: ydatas[i].data,
+            data: this.ydatas[i].data,
             markLine: { // 骞冲潎鍊� 锛� 鍜� 鎸囨爣涓婇檺
               symbol: 'none',
               data: [{
                 label: {
                   normal: {
                     position: 'end',
-                    formatter: ''// ydatas[i].name+'鏍囧噯鍊�' //+'{c}'
+                    formatter: bz
                   }
                 },
                 name: '鏍囧噯鍊�',
                 yAxis: bz,
                 lineStyle: {
-                  color: ydatas[i].zxcolor,
-                  type: 'dashed',
-                  width: 2
+                  normal: {
+                    color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹�
+                      let biaozhuiz
+                      for (let i = 0; i < bzzList.length; i++) {
+                        if (bzzList[i].name === c.seriesName) {
+                          biaozhuiz = bzzList[i].bzhui
+                        }
+                      }
+                      if (c.value[1] > biaozhuiz) {
+                        return zdcbcolor
+                      } else if (c.value[1] > biaozhuiz * 0.9) {
+                        return '#FFA500'
+                      } else {
+                        return '#33c95f'
+                      }
+                    }
+                  }
                 }
-              }]
+              }
+              ]
             }
           }
         } else {
           obj = {
-            name: ydatas[i].name,
-            smooth: true,
-            itemStyle: {
-              normal: {
-                color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹�
-                  return '#33c95f'
-                },
-                lineStyle: { // 鎶樼嚎鐨勯鑹�
-                  color: ydatas[i].zxcolor,
-                  width: 2
-                },
-                // borderColor:'black',  //鎶樼偣杈规鐨勯鑹�
-                label: { // 鏄剧ず鍊�
-                  show: false
-                }
-              }
-            },
+            name: this.ydatas[i].name,
+            symbol: 'circle', // 鎶樼偣褰㈢姸
+            symbolSize: 10, // 澶у皬
+            smooth: false, // 鐩寸嚎 锛宼rue 涓烘洸绾�
+            yAxisIndex: 1,
+            // itemStyle: {
+            //   normal: {
+            //     color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹�
+            //       for (let i = 0; i < this.bzzList.length; i++) {
+            //         let biaozhuizs
+            //         if (this.bzzList[i].name === c.seriesName) {
+            //           biaozhuizs = this.bzzList[i].bzhui
+            //         }
+            //         console.log(biaozhuizs)
+            //       }
+            //       if (c.value[1] > 9) {
+            //         return zdcbcolor
+            //       } else {
+            //         return '#33c95f'
+            //       }
+            //     },
+            //     lineStyle: { // 鎶樼嚎鐨勯鑹�
+            //       color: this.ydatas[i].zxcolor,
+            //       width: 5
+            //     },
+            //     borderColor: 'black', // 鎶樼偣杈规鐨勯鑹�
+            //     label: { // 鏄剧ず鍊�
+            //       show: false
+            //     }
+            //   }
+            // },
             type: 'line',
-            data: ydatas[i].data
+            data: this.ydatas[i].data
           }
         }
-        if (ydatas[i].name === '搴熸皵娴侀噺' || ydatas[i].name === '搴熸皵') {
+        if (this.ydatas[i].name === '搴熸皵娴侀噺' || this.ydatas[i].name === '搴熸皵') {
           obj.yAxisIndex = 1
         }
         serLists.push(obj)
       }
-      const option = {
-        tooltip: {
+      // console.log(serLists)
+      let dataUnit = ''
+      if (this.datatype === 1) {
+        dataUnit = '娴侀噺(m鲁/d)'
+      } else {
+        dataUnit = '娴侀噺(m鲁/h)'
+      }
+      // echarts鍥捐〃option鏁版嵁
+      const options = {
+        tooltip: { // 鎻愮ず妗�
           trigger: 'axis',
           axisPointer: {
             type: 'cross',
@@ -743,57 +469,57 @@
             }
           },
           formatter: function (params) {
-            var s = params[0].name + '<br />'
-            for (var i = 0; i < params.length; i++) {
-              // var name = params[i].name
+            let s = params[0].name + '<br />'
+            for (let i = 0; i < params.length; i++) {
+              // let name = params[i].name
               // 鍥捐〃title鍚嶇О
-              var seriesName = params[i].seriesName
+              const seriesName = params[i].seriesName
               // 鍊�
-              var value = params[i].value[1]
-              // var valueFliter = this.formatter(value)
-              var maker = params[i].marker
-              if (seriesName === '浜屾哀鍖栫~') {
-                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff21c;"></span>'
-              } else if (seriesName === '姘哀鍖栫墿') {
-                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00B0F0;"></span>'
-              } else if (seriesName === '鐑熷皹') {
-                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f48183;"></span>'
-              } else if (seriesName === '娓╁害') {
-                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#F206FF;"></span>'
-              } else {
-                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ec99c;"></span>'
+              const value = params[i].value[1]
+
+              // const valueFliter = formatter(value)
+              const valueFliter = parseFloat(value).toFixed(2)
+
+              let maker = params[i].marker
+              let colo = ''
+              switch (seriesName) {
+                case 'pH':
+                  colo = '#900090'
+                  break
+                case '浜屾哀鍖栫⒊':
+                  colo = '#00B0F0'
+                  break
+                case '鐑熷皹':
+                  colo = '#e0ffff'
+                  break
+                case '姘哀鍖栫墿':
+                  colo = '#9ACD32'
+                  break
+                case '浜屾哀鍖栫7':
+                  colo = '#f48183'
+                  break
+                default:
+                  colo = ''
+                  break
               }
-              s += maker + seriesName + ':' + value + '<br />'
+              maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + colo + ';"></span>'
+              s += maker + seriesName + ':' + valueFliter + '<br />'
             }
             return s
           }
         },
-        toolbox: {
+        toolbox: { // 鎵撳嵃绛夊伐鍏�
           show: false,
           feature: {
             saveAsImage: {}
           }
         },
-        grid: {
+        grid: { // 缃戞牸
           top: '20%'
         },
-        // legend: {
-        //   data: legend
-        // },
-        legend: [
-          {
-            // icon: iconlist.map(item => {
-            //   return item
-            // }),
-            icon: 'image://../assets/imgs/legend/VOCs.png',
-            itemHeight: 20,
-            itemWidth: 30,
-            textStyle: { color: '#ccc' },
-            data: ydatas.map(item => {
-              return item.name
-            })
-          }
-        ],
+        legend: {
+          data: legend
+        },
         dataZoom: [{
           type: 'inside',
           start: 0,
@@ -812,38 +538,39 @@
             shadowOffsetY: 2
           }
         }],
-        xAxis: {
+        xAxis: { // x 杞磋缃�
           type: 'time',
           boundaryGap: false,
-          axisLabel: {
+          axisLabel: { // x杞村叏閮ㄦ樉绀�
+            // rotate: 30,
             margin: 6,
             interval: 0,
             textStyle: {
               color: '#fff'
             }
           },
-          splitLine: {
+          splitLine: { // 缃戞牸鍨傜洿绾夸负 铏氱嚎
             show: true,
             lineStyle: {
               type: 'dashed'
             }
           },
-          axisTick: {
+          axisTick: { // x 杞村埢搴︽樉绀�
             show: false
           },
           axisLine: {
             lineStyle: {
               color: '#FFFFFF',
-              width: 1
+              width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑
             }
           }
+          // data: xdata
         },
         yAxis: [{
           type: 'value',
           name: yname,
           max: function (value) {
-            var ma = value.max > 100 ? value.max : 100
-            return parseInt(ma)
+            return parseInt(value.max + 30)
           },
           axisLabel: {
             formatter: '{value}',
@@ -856,16 +583,16 @@
           },
           splitLine: {
             show: false
-          },
+          }, // y杞� 缃戞牸绾夸笉鏄剧ず,
           axisLine: {
             lineStyle: {
               color: '#FFFFFF',
-              width: 1
+              width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑
             }
           }
         }, {
           type: 'value',
-          name: '搴熸皵娴侀噺(m3/h)',
+          name: dataUnit,
           axisLabel: {
             formatter: '{value}',
             textStyle: {
@@ -877,338 +604,82 @@
           },
           splitLine: {
             show: false
-          },
+          }, // y杞� 缃戞牸绾夸笉鏄剧ず,
+          // inverse: true,
+          // nameLocation: 'start',
+          // max:500,
           axisLine: {
             lineStyle: {
               color: '#FFFFFF',
-              width: 1
+              width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑
             }
           }
         }],
         series: serLists
       }
-      this.myChart.setOption(option)
-      window.addEventListener('resize', this.myChart.resize)
-      // 鏄剧ず鍔犺浇鍔ㄧ敾
-      this.myChart.showLoading()
-      // this.IntervalEXHRealTimeDate()
-
-      // this.myChart.on('legendselectchanged', function (params) {
-      //   var StdVal = null
-      //   var op = { yAxis: {} }
-      //   var max_val_list = [] // 鎵�鏈夋樉绀烘姌绾跨殑鏍囧噯鍊�
-      //   if (exhbzzList && exhbzzList.length > 0) {
-      //     $.each(exhbzzList, function (index, item) {
-      //       params.selected[item.name] ? max_val_list.push(item.bzhui) : ''
-      //       if (item.name === params.name) {
-      //         item.name === 'VOCs' ? StdVal = 20 : StdVal = item.bzhui
-      //       }
-      //     })
-      //   }
-      //   max_val_list = max_val_list.sort(function (a, b) { return a - b }) // 鎺掑簭
-      //   op.yAxis.max = function (value) {
-      //     var ma = value.max < StdVal ? StdVal : Math.ceil(value.max)
-      //     max_val_list ? ma = max_val_list[max_val_list.length - 1] : ''// 閫夋嫨鏈�澶у��
-      //     return ma
-      //   }
-      //   myChart.setOption(op)
-      // })
-      // myChart.on('click', function (params) {
-      //   var nowDate = new Date().Format()
-      // })
-    },
-    // 鐐瑰嚮鏌ヨ鎸夐挳鍔熻兘
-    onSubmit () {
-      this.DrawEXHRealTimeDateChart()
-      this.myChart.hideLoading()
+      this.myChart.setOption(options, true)
+      console.log(options)
+      window.onresize = this.myChart.resize
     }
-    // getRtdbFormat (res) {
-    //   var data = res.collection.items
-    //   var dataArray = []
-    //   for (var i = 0; i < data.length; i++) {
-    //     var dataFormat = {
-    //       UnionTagCode: data[i].data[0].value,
-    //       TagValue: parseFloat(data[i].data[1].value),
-    //       ReadTime: data[i].data[3].value,
-    //       ErrorMessage: data[i].data[5].value
-    //     }
-    //     dataArray.push(dataFormat)
-    //   }
-    //   return dataArray
-    // },
-    // 1.鍧愭爣杞村疄鐜�,鐢诲疄鏃舵暟鎹�
-    // getRtdb15s (unionTagCodeList, startTime, endTime, step, res) {
-    //   if (this.res.length > 0) {
-    //     // 澶勭悊鏁版嵁寮�濮�
-    //     var d = res
-    //     var nameList = [] // 瀛樻斁鍥句緥
-    //
-    //     var data // 鏁版嵁绫诲瀷// var data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]}
-    //     var datalist // 瀛樻斁data鐨勬暟缁�
-    //     // var bzh = []
-    //     for (var i = 0; i < d.length; i++) {
-    //       if (d[i].ErrorMessage != null) {
-    //         continue
-    //       }
-    //       // var name = CFG.DATA_REALTIME_TAGCODETABLE[d[i].UnionTagCode].TagName
-    //
-    //       if (nameList.length === 0) {
-    //         nameList.push(name)
-    //
-    //         var newdate = new Date(this.res.ReadTime)
-    //         data = {
-    //           name: name,
-    //           value: [newdate, this.res.TagValue]
-    //         }
-    //
-    //         datalist = {
-    //           name: name,
-    //           data: [data]
-    //         }
-    //
-    //         this.EXHRealTimeDataList.push(datalist)
-    //       } else if (nameList.indexOf(name) < 0) {
-    //         nameList.push(name)
-    //
-    //         // var newdate = new Date(d[i].ReadTime)
-    //
-    //         data = {
-    //           name: name,
-    //           value: [newdate, d[i].TagValue]
-    //         }
-    //         datalist = {
-    //           name: name,
-    //           data: [data]
-    //         }
-    //         this.EXHRealTimeDataList.push(datalist)
-    //       } else if (i === d.length - 1) {
-    //         if (nameList.indexOf(name) < 0) {
-    //           nameList.push(name)
-    //
-    //           // var newdate = new Date(d[i].ReadTime)
-    //
-    //           data = {
-    //             name: name,
-    //             value: [newdate, d[i].TagValue]
-    //           }
-    //           datalist = {
-    //             name: name,
-    //             data: [data]
-    //           }
-    //           // EXHRealTimeDataList.push(datalist)
-    //         } else {
-    //           // var newdate = new Date(d[i].ReadTime)
-    //           data = {
-    //             name: name,
-    //             value: [newdate, d[i].TagValue]
-    //           }
-    //           for (var k = 0; k < this.EXHRealTimeDataList.length; k++) {
-    //             if (this.EXHRealTimeDataList[k].name === name) {
-    //               this.EXHRealTimeDataList[k].data.push(data)
-    //             }
-    //           }
-    //         }
-    //       } else {
-    //         const newdate = new Date(d[i].ReadTime)
-    //         data = {
-    //           name: name,
-    //           value: [newdate, d[i].TagValue]
-    //         }
-    //         for (let k = 0; k < this.EXHRealTimeDataList.length; k++) {
-    //           if (this.EXHRealTimeDataList[k].name === name) {
-    //             this.EXHRealTimeDataList[k].data.push(data)
-    //           }
-    //         }
-    //       }
-    //     }
-    //
-    //     // var divid = 'mychart_ss'
-    //     // var title = name
-    //     var lengList = []
-    //     var objTemp
-    //
-    //     for (var l = 0; l < nameList.length; l++) {
-    //       var obj
-    //       var iconurl
-    //       if (nameList[l] === '浜屾哀鍖栫~') {
-    //         iconurl = 'image://../assets/imgs/legend/SO2.png'
-    //       } else if (nameList[l] === '姘哀鍖栫墿') {
-    //         iconurl = 'image://../assets/imgs/legend/NOX.png'
-    //       } else if (nameList[l] === '鐑熷皹') {
-    //         iconurl = 'image://../assets/imgs/legend/YanChen.png'
-    //       } else if (nameList[l] === '闈炵敳鐑锋�荤儍') {
-    //         iconurl = 'image://../assets/imgs/legend/grn.png'
-    //       } else if (nameList[l] === '娓╁害') {
-    //         iconurl = 'image://../assets/imgs/legend/WenDu.png'
-    //       } else {
-    //         iconurl = 'image://../assets/imgs/legend/VOCs.png'
-    //       }
-    //
-    //       if (nameList[l] === '搴熸皵' || nameList[l] === '搴熸皵娴侀噺') { // 灏嗗簾姘旀祦閲忔帓鍒版暟缁勬渶鍚�
-    //         objTemp = {
-    //           name: nameList[l],
-    //           icon: iconurl,
-    //           textStyle: {
-    //             color: '#ccc'
-    //           },
-    //           itemWidth: 20,
-    //           itemHeight: 5
-    //         }
-    //       } else {
-    //         obj = {
-    //           name: nameList[l],
-    //           icon: iconurl,
-    //           textStyle: {
-    //             color: '#ccc'
-    //           },
-    //           itemWidth: 20,
-    //           itemHeight: 5
-    //         }
-    //         lengList.push(obj)
-    //       }
-    //     }
-    //     lengList.push(objTemp)
-    //
-    //     this.DrawEXHRealTimeDateChart(this.echartsOptions.id, this.echartsOptions.title, this.echartsOptions.legend, this.echartsOptions.ydatas, this.echartsOptions.yname)
-    //   }
-    // },
-    // 閽╁瓙璋冪敤瀹炴椂
-    // IntervalEXHRealTimeDate () {
-    //   // 瀹氭椂鍣ㄥ嚱鏁�
-    //   this.DrawEXHRealTimeDateChart()
-    //   setInterval(function () {
-    //     // $('.RealTime').empty()
-    //     this.startTime = dayjs().subtract(5, 'minute').format('YYYY-MM-DD HH:mm:ss')
-    //     this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
-    //     this.step = '15'
-    //     // this.getRtdb15s(this.unionTagCodeList, this.startTime, this.endTime, this.step, this.res)
-    //     // PreQueryTime=endTime;
-    //   }, 1500)
-    // }
-
   }
 }
 </script>
 
 <style scoped lang="less">
-.grid-content {
-  font-size: 8px;
-  background-color: #2e4967;
-  text-align: center;
-  border-radius: 2px;
-  margin-right: 10px;
-  padding: 0 10px;
-
-  > i {
-    color: #ffffff;
-  }
-}
-
-.animation {
-  //width: 600px;
-  //height: 0.06rem;
-  .infomation {
-    padding: 5px 10px;
-  }
-}
-
-.form-echrts {
-  width: 100%;
-  border-top: 1px solid #396d83;
-  //margin: 10px 10px 10px 10px;
-  .from-search {
+.echarts-box {
+  .tab-scroll {
     display: flex;
-    padding: 5px;
+    align-items: center;
+    justify-content: space-between;
 
-    > div {
-      margin-left: 10px
+    .time-select {
+      cursor: pointer;
+      padding: 5px;
+      border: 1px solid #2b87c8;
+      border-radius: 4px;
+      text-align: center;
+      color: #fff;
+      font-size: 11px;
+      width: 280px;
     }
+  }
 
-    .pickerMon {
-      display: flex;
+  .echarts-form {
+    height: 0.3rem;
+    line-height: 0.3rem;
 
-      > div:first-child {
-        margin-right: 10px;
-      }
-
-      .pickerData {
-        flex: 1;
-        display: flex;
-
-        > span {
-          line-height: 22px
-        }
-
-        .pickerTable {
-          margin-left: 3px;
-        }
-      }
-    }
-
-    /deep/ .el-date-editor--datetime {
-      width: 100%;
+    .demonstration {
+      color: #00fff6;
+      font-size: 12px;
+      margin-left: 10px;
     }
 
     /deep/ .el-input__inner {
-      position: relative;
-      width: 140px;
+      height: 0.15rem;
       background-color: #2e4967;
       color: #fff;
       font-size: 12px;
-      height: 24px;
       padding: 0;
       border-color: #00fff6;
       text-align: center;
-      z-index: 9999;
-      //padding-left:20px ;
-      //padding: 0!important;
     }
 
-    /deep/ .el-input__icon {
-      display: block;
-      width: 140px;
-      height: 22px;
-      line-height: 22px;
-      cursor: pointer;
-      font-size: 0;
-    }
-
-    .echatsInput {
-      color: #00ffff;
+    .el-button {
+      margin: 0 15px;
+      width: 0.3rem;
+      height: 0.15rem;
+      display: inline-block;
       background-color: #2e4967;
-      border: none;
-      border-radius: 6px;
-      width: 80px;
-      height: 22px;
-    }
-
-    input::-webkit-calendar-picker-indicator {
-      opacity: 100;
-    }
-
-    .detailbtn {
-      background-color: #2e4967;
+      color: #fff;
+      font-size: 12px;
+      padding: 0;
+      border-color: #00fff6;
       text-align: center;
-      padding: 0 7px;
-      line-height: 20px;
-      border-radius: 4px;
-      margin-right: 6px;
     }
-
   }
 
-  .el-dialog-div {
-    //height: 50vh!important;
-    overflow: auto;
-    //overflow: hidden;
-  }
-
-  #echarts {
-    margin: 0;
-    padding: 0;
-    //height: 3rem;
-    //border: 1px solid #396d83;
-    //margin: 10px 10px 10px 10px;
+  /deep/ .el-icon-time:before {
+    content: " ";
   }
 }
 </style>

--
Gitblit v1.8.0