From 23e134520785efe3bbce4e759776e360a7967b62 Mon Sep 17 00:00:00 2001
From: chenyabin <Chenab123!>
Date: 星期一, 12 四月 2021 15:04:52 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/develop' into develop

---
 src/utils/dragBoxes.js                                             |   39 ++++
 src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue |    2 
 src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue     |  355 +++++++++++++++++++++++++-------------------
 src/components/BaseNav/SolidWaste/directive/dir.js                 |   37 +---
 src/components/BaseNav/PublicBounced/PublicBounced.vue             |   30 ++-
 5 files changed, 267 insertions(+), 196 deletions(-)

diff --git a/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue b/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
index ad97760..a803441 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="width:100%;height:2rem;margin-top: 0.3rem" ref="echarts"></div>
+  <div style="width:5rem;height:2rem;margin-top: 0.3rem" ref="echarts"></div>
 </template>
 
 <script>
@@ -12,202 +12,247 @@
   name: 'ECharts',
   data () {
     return {
-      myChart: [],
-      result: [],
       days: dayjs(new Date()).format('YYYYMMDDHHmmss'),
-      value: '',
+      myChart: [],
+      // x杞存暟鎹�
+      xAxis: [],
       seriesData: [],
-      aseries: ''
+      seriesName: []
     }
   },
+  mounted () {
+    this.$nextTick(() => {
+      this.initEchartsData()
+      this.upDateEchartsData()
+    })
+  },
   methods: {
-    drawChart () {
+    // 鍒濆鍖栨暟鎹�
+    async initEchartsData () {
+      const endTime = dayjs().add(1, 's')
+      const data = {
+        $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
+        $startTime: this.dayjs,
+        $endTime: endTime,
+        $step: 15
+      }
+      const result = (await mapApi.DataItems(data)).data
+      for (var i = 0; i < result.length; i++) {
+        // console.log(result[i])
+        this.xAxis.push(result[i].ReadTime)
+        this.seriesData.push(result[i].TagValue)
+        this.seriesName = result[i].UnionTagCode
+      }
+      this.upDateEchartsinit()
+    },
+    // 瀹炴椂鏁版嵁鍒锋柊
+    upDateEchartsData () {
+      // const interValHander =
+      setInterval(async () => {
+        const endTime = dayjs().add(1, 's')
+        const data = {
+          $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
+          $startTime: this.dayjs,
+          $endTime: endTime,
+          $step: 15
+        }
+        const result = (await mapApi.DataItems(data)).data
+        for (var i = 0; i < result.length; i++) {
+          // console.log(result[i])
+          // this.xAxis.shift()
+          this.xAxis.push(result[i].ReadTime)
+          this.seriesData.push(result[i].TagValue)
+          this.seriesName = result[i].UnionTagCode
+        }
+        this.upDateEchartsinit()
+      }, 1500)
+    },
+    // 鍒濆鍖杄charts
+    upDateEchartsinit () {
       this.myChart = this.$echarts.init(this.$refs.echarts)
-
-      const option = {
-        tooltip: {
-          trigger: 'axis'
+      // 鍥捐〃鐨勯厤缃」鏁版嵁
+      const xAxisData = this.xAxis
+      const legendData = [this.seriesName, 'TJIP45.lscl2tb552AISA11201B', 'TJIP45.lscl2tb552AISA11202A', 'TJIP45.lscl2tbAIA-10505-1', 'TJIP45.lscl2tbAIA-10505-2']
+      const seriesData = [
+        {
+          name: this.seriesName,
+          type: 'line',
+          stack: '鎬婚噺',
+          data: this.seriesData
         },
-        legend: {
-          data: ['閭欢钀ラ攢', '鑱旂洘骞垮憡', '瑙嗛骞垮憡', '鐩存帴璁块棶', '鎼滅储寮曟搸']
+        {
+          name: 'TJIP45.lscl2tb552AISA11201B',
+          type: 'line',
+          stack: '鎬婚噺',
+          data: [2.20, 1.82, 1.91, 2.34, 2.90, 3.30, 3.10]
+        }
+      ]
+      const option = {
+        title: {
+          // text: '瀹炴椂鏁版嵁',
+          target: 'blank',
+          left: '5%',
+          textStyle: {
+            color: '#fff',
+            fontSize: 15,
+            bottom: 20
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              color: '#1a4245'
+            }
+          }
+          // formatter: function (params) {
+          //   // console.log(params)
+          //   var UnionTagCode = params[0].seriesName + '<br />'
+          //   for (var i = 0; i < params.length; i++) {
+          //     var seriesName = params[i].seriesName
+          //     // 鍊�
+          //     var value = params[i].value[1]
+          //
+          //     // var valueFliter = formatter(value)
+          //     var valueFliter = value
+          //
+          //     var maker = params[i].marker
+          //     var colo = ''
+          //     switch (seriesName) {
+          //       case 'TJIP45.lscl2tb552AI10710':
+          //         colo = '#fff21c'
+          //         break
+          //       default:
+          //         colo = 'red'
+          //         break
+          //     }
+          //     maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + colo + ';"></span>'
+          //     UnionTagCode += maker + seriesName + ':' + valueFliter + '<br />'
+          //   }
+          //   return UnionTagCode
+          // }
         },
         grid: {
-          containLabel: false
+          top: '20%'
         },
         toolbox: {
+          show: false,
           feature: {
-            saveAsImage: {
-              show: false
-            }
+            saveAsImage: {}
+          }
+        },
+        dataZoom: [{
+          type: 'inside',
+          start: 0,
+          end: 100
+        }, {
+          start: 0,
+          end: 100,
+          show: false,
+          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+          handleSize: '80%',
+          handleStyle: {
+            color: '#fff',
+            shadowBlur: 3,
+            shadowColor: 'rgba(0, 0, 0, 0.6)',
+            shadowOffsetX: 2,
+            shadowOffsetY: 2
+          }
+        }],
+        legend: {
+          data: legendData,
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 12
           }
         },
         xAxis: {
           type: 'category',
+          // type: 'time',
           boundaryGap: false,
+          axisLabel: {
+            margin: 6,
+            interval: 0,
+            textStyle: {
+              color: '#fff'
+            }
+          },
           splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed'
+            }
+          },
+          axisTick: {
             show: false
           },
-          // data: this.seriesData,
-          data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩'],
           axisLine: {
             lineStyle: {
               color: '#FFFFFF',
-              // width: 1
-              show: false
+              width: 1
             }
-          }
+          },
+          data: xAxisData
         },
-        yAxis: {
+        yAxis: [{
           type: 'value',
-          boundaryGap: [0, '100%'],
+          name: 'yname',
+          // max: function (value) {
+          //   var max_val_list = []; //鎵�鏈夋樉绀烘姌绾跨殑鏍囧噯鍊�
+          //   if (bzzList && bzzList.length > 0) {
+          //     $.each(bzzList, function (index, item) {
+          //       max_val_list.push(item.bzhui);
+          //     });
+          //   }
+          //   max_val_list = max_val_list.sort(function (a, b) {
+          //     return a - b
+          //   }); //鎺掑簭
+          //   var ma = value.max > max_val_list[max_val_list.length - 1] ? value.max + 5 : max_val_list[max_val_list.length - 1];
+          //   return parseInt(ma);
+          // },
+          axisLabel: {
+            formatter: '{value}',
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          splitLine: {
+            show: false
+          }, // y杞� 缃戞牸绾夸笉鏄剧ず,
           axisLine: {
             lineStyle: {
               color: '#FFFFFF',
               width: 1
             }
           }
-        },
-        series: [
-          {
-            name: '妯℃嫙鏁版嵁',
-            type: 'line',
-            // showSymbol: false,
-            // hoverAnimation: false,
-            data: this.seriesData
+        }, {
+          type: 'value',
+          name: 'dataUnit',
+          axisLabel: {
+            formatter: '{value}',
+            textStyle: {
+              color: '#fff'
+            }
           },
-          {
-            name: '鑱旂洘骞垮憡',
-            type: 'line',
-            stack: '鎬婚噺',
-            data: [220, 182, 191, 234, 290, 330, 310]
+          splitLine: {
+            show: false
           },
-          {
-            name: '瑙嗛骞垮憡',
-            type: 'line',
-            stack: '鎬婚噺',
-            data: [150, 232, 201, 154, 190, 330, 410]
-          },
-          {
-            name: '鐩存帴璁块棶',
-            type: 'line',
-            stack: '鎬婚噺',
-            data: [320, 332, 301, 334, 390, 330, 320]
-          },
-          {
-            name: '鎼滅储寮曟搸',
-            type: 'line',
-            stack: '鎬婚噺',
-            data: [820, 932, 901, 934, 1290, 1330, 1320]
+          axisLine: {
+            lineStyle: {
+              color: '#FFFFFF',
+              width: 1
+            }
           }
-        ]
+        }],
+        series: seriesData
       }
       this.myChart.setOption(option)
-    },
-    async echartsData () {
-      const addDays = dayjs().add(300, 'day')
-      const data = {
-        $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
-        $startTime: this.dayjs,
-        $endTime: addDays,
-        $step: 15
-      }
-      const result = await mapApi.DataItems(data)
-      this.result = result.data
-      for (let i = 0; i < result.length; i++) {
-        //   // console.log(result[i])
-
-        // const seriesData = []
-        const aseries = []
-        // let nameData = ''
-
-        this.seriesData.push(result[i].ReadTime)
-        aseries.push(result[i].TagValue)
-        // nameData = result[i].UnionTagCode
-        this.aseries = result[i].UnionTagCode
-      }
-      this.myChart.setOption({
-        series: [{
-          data: this.seriesData
-        }]
-      })
-    },
-    // 鏁版嵁鐨勮姹�
-    requestEcharts () {
-      setInterval(async () => {
-        const addDays = dayjs().add(300, 'day')
-        const data = {
-          $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
-          $startTime: this.dayjs,
-          $endTime: addDays,
-          $step: 15
-        }
-        const result = await mapApi.DataItems(data)
-        this.result = result.data
-        for (let i = 0; i < result.length; i++) {
-          //   // console.log(result[i])
-
-          // const seriesData = []
-          const aseries = []
-          // let nameData = ''
-
-          this.seriesData.push(result[i].ReadTime)
-          aseries.push(result[i].TagValue)
-          // nameData = result[i].UnionTagCode
-          this.aseries = result[i].UnionTagCode
-        }
-        this.myChart.setOption({
-          series: [{
-            data: this.seriesData
-          }]
-        })
-      }, 3000)
     }
-  },
-  mounted () {
-    this.$nextTick(() => {
-      this.requestEcharts()
-      this.drawChart()
-      this.echartsData()
-    })
   }
 }
 </script>
 
 <style scoped lang="less">
-.Infomation {
-  margin-left: 10px;
-  height: 0.2rem;
-}
 
-.el-tag {
-  height: 25px;
-  width: 140px;
-  line-height: 25px;
-  margin-right: 10px;
-  font-size: 10px;
-  background-color: rgba(0, 255, 246, 0.14);
-  color: #00d0f9;
-  border: none;
-  padding: 0 15px;
-}
-
-.form-echrts {
-  width: 100%;
-  height: 1rem;
-  border-top: 1px solid #396d83;
-  //margin: 10px 10px 10px 10px;
-  .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;
-  }
-}
 </style>
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue
index 4ceacba..efb16e4 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue
@@ -5,7 +5,7 @@
         <div class="border_corner border_corner_left_bottom"></div>
         <div class="border_corner border_corner_right_bottom"></div>
         <ul class="tab">
-            <li @click='tabTaggle("ECharts")'>瀹炴椂鏁版嵁</li>
+            <li @click='tabTaggle("Echarts")'>瀹炴椂鏁版嵁</li>
             <li @click='tabTaggle("EChartsHour")'>灏忔椂鏁版嵁</li>
             <li @click='tabTaggle("EChartsDate")'>鏃ユ暟鎹�</li>
             <li @click='tabTaggle("ECharts")'>浜哄伐鏁版嵁</li>
diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue
index 27b278a..8d23b01 100644
--- a/src/components/BaseNav/PublicBounced/PublicBounced.vue
+++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="public-bounced map-background" v-drag v-if="flag">
-    <!--    <Echarts></Echarts>-->
-    <div class="public-bounced-title panel-title">
+    <div class="public-bounced-title panel-title" ref="publicBounced">
       <span>{{ displayContentTitle }}</span>
       <i class="el-icon-circle-close" @click="closePopup"></i>
     </div>
@@ -16,7 +15,7 @@
                         :value="value"
                         :getQueryOnlineMonData="getQueryOnlineMonData"
                         :getWasteWaterMonitoringDetails='getWasteWaterMonitoringDetails'
->
+          >
           </public-chart>
         </div>
       </div>
@@ -29,9 +28,7 @@
 
 <script>
 
-// import Echarts from '@components/BaseNav/PublicBounced/GasComponents/Echarts'
-
-import '@/components/BaseNav/SolidWaste/directive/dir'
+import '@/utils/dragBoxes'
 import PublicTabs from '@components/BaseNav/PublicBounced/GasComponents/PublicTabs'
 import PublicTable from '@components/BaseNav/PublicBounced/GasComponents/PublicTable'
 import PublicVideo from '@components/BaseNav/PublicBounced/GasComponents/PublicVideo'
@@ -60,6 +57,11 @@
       getQueryOnlineMonData: []
       // getGasQueryOnlineMonData: []
     }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      console.log(this.$refs.publicBounced)
+    })
   },
   methods: {
     closePopup () {
@@ -107,6 +109,7 @@
   left: 20%;
 
   .public-bounced-title {
+    cursor: move;
     height: 0.1rem;
     padding: 10px 0;
     display: flex;
@@ -120,14 +123,15 @@
     }
 
     i {
-        color: #C0C4CC;
-        margin: 0 15px;
-        font-size: 22px;
-        cursor: pointer;
+      color: #C0C4CC;
+      margin: 0 15px;
+      font-size: 22px;
+      cursor: pointer;
     }
-      i:hover{
-          color: #00fff6;
-      }
+
+    i:hover {
+      color: #00fff6;
+    }
   }
 
   .public-bounced-content {
diff --git a/src/components/BaseNav/SolidWaste/directive/dir.js b/src/components/BaseNav/SolidWaste/directive/dir.js
index ef3a982..063f6c3 100644
--- a/src/components/BaseNav/SolidWaste/directive/dir.js
+++ b/src/components/BaseNav/SolidWaste/directive/dir.js
@@ -1,45 +1,31 @@
 import Vue from 'vue'
-// 浣跨敤Vue.directive()瀹氫箟涓�涓叏灞�鎸囦护
-// 1.鍙傛暟涓�锛氭寚浠ょ殑鍚嶇О锛屽畾涔夋椂鎸囦护鍓嶉潰涓嶉渶瑕佸啓v-
-// 2.鍙傛暟浜岋細鏄竴涓璞★紝璇ュ璞′腑鏈夌浉鍏崇殑鎿嶄綔鍑芥暟
-// 3.鍦ㄨ皟鐢ㄧ殑鏃跺�欏繀椤诲啓v-
+
 const drag = Vue.directive('drag', {
-  // 1.鎸囦护缁戝畾鍒板厓绱犱笂鍥炵珛鍒绘墽琛宐ind鍑芥暟锛屽彧鎵ц涓�娆�
-  // 2.姣忎釜鍑芥暟涓涓�涓弬鏁版案杩滄槸el锛岃〃绀虹粦瀹氭寚浠ょ殑鍏冪礌锛宔l鍙傛暟鏄師鐢焜s瀵硅薄
-  // 3.閫氳繃el.focus()鏄棤娉曡幏鍙栫劍鐐圭殑锛屽洜涓哄彧鏈夋彃鍏OM鍚庢墠鐢熸晥
-  bind: function (el) {
-    el.style.cursor = 'move' // 榧犳爣鏍峰紡鍙榤ove鏍峰紡
-  },
-  // inserted琛ㄧず涓�涓厓绱狅紝鎻掑叆鍒癉OM涓細鎵цinserted鍑芥暟锛屽彧瑙﹀彂涓�娆�
-  inserted: function (el) {
-    el.onmousedown = function (e) {
+  bind (el, binding, vnode, oldVnode) {
+    const dialogHeaderEl = el.querySelector('.public-bounced-title')
+    dialogHeaderEl.onmousedown = function (e) {
       var distX = e.pageX - el.offsetLeft
       var distY = e.pageY - el.offsetTop
-      // console.log('鍏冪礌鏈韩鐨勯珮锛�' + el.clientHeight + ',鍏冪礌鏈韩鐨勫锛�' + el.clientWidth)
-
       if (e.preventDefault) {
         e.preventDefault()
       } else {
         e.returnValue = false
       }
-      // 瑙e喅蹇�熸嫋鍔ㄦ粸鍚庨棶棰�
-
       document.onmousemove = function (e) {
-        // 鐢ㄩ紶鏍囩殑浣嶇疆鍑忓幓榧犳爣鐩稿鍏冪礌鐨勪綅缃紝寰楀埌鍏冪礌鐨勪綅缃�
         let left = e.clientX - distX
         let top = e.clientY - distY
 
         if (left <= 0) {
-          left = 5 // 璁剧疆鎴�5鏄负浜嗕笉绂昏竟缂樺お杩�
-        } else if (left > document.documentElement.clientWidth - el.clientWidth) {
-          // document.documentElement.clientWidth 灞忓箷鐨勫彲瑙嗗搴�
-          left = document.documentElement.clientWidth - el.clientWidth - 5
+          left = 5
+        } else if (left > document.documentElement.clientWidth - dialogHeaderEl.clientWidth) {
+          left = document.documentElement.clientWidth - dialogHeaderEl.clientWidth - 5
         }
         if (top <= 0) {
           top = 5
-        } else if (top > document.documentElement.clientHeight - el.clientHeight) {
-          top = document.documentElement.clientHeight - el.clientHeight - 5
+        } else if (top > document.documentElement.clientHeight - dialogHeaderEl.clientHeight) {
+          top = document.documentElement.clientHeight - dialogHeaderEl.clientHeight - 5
         }
+
         el.style.left = left + 'px'
         el.style.top = top + 'px'
       }
@@ -47,9 +33,6 @@
         document.onmousemove = document.onmouseup = null
       }
     }
-  },
-  // 褰揤Node鏇存柊鐨勬椂鍊欎細鎵цupdated锛屽彲浠ヨЕ鍙戝娆�
-  updated: function (el) {
   }
 })
 export default drag
diff --git a/src/utils/dragBoxes.js b/src/utils/dragBoxes.js
new file mode 100644
index 0000000..1e17b89
--- /dev/null
+++ b/src/utils/dragBoxes.js
@@ -0,0 +1,39 @@
+/* eslint */
+import Vue from 'vue'
+
+const drag = Vue.directive('drag', {
+  bind (el, binding, vnode, oldVnode) {
+    const dialogHeaderEl = el.querySelector('.public-bounced-title')
+    dialogHeaderEl.onmousedown = function (e) {
+      var distX = e.pageX - el.offsetLeft
+      var distY = e.pageY - el.offsetTop
+      if (e.preventDefault) {
+        e.preventDefault()
+      } else {
+        e.returnValue = false
+      }
+      document.onmousemove = function (e) {
+        let left = e.clientX - distX
+        let top = e.clientY - distY
+
+        if (left <= 0) {
+          left = 5
+        } else if (left > document.documentElement.clientWidth - dialogHeaderEl.clientWidth) {
+          left = document.documentElement.clientWidth - dialogHeaderEl.clientWidth - 5
+        }
+        if (top <= 0) {
+          top = 5
+        } else if (top > document.documentElement.clientHeight - dialogHeaderEl.clientHeight) {
+          top = document.documentElement.clientHeight - dialogHeaderEl.clientHeight - 5
+        }
+
+        el.style.left = left + 'px'
+        el.style.top = top + 'px'
+      }
+      document.onmouseup = function () {
+        document.onmousemove = document.onmouseup = null
+      }
+    }
+  }
+})
+export default drag

--
Gitblit v1.8.0