监测曲线

src/views/spectrum/common/historyCurve/index.vue

@@ -29,9 +29,9 @@
                 </el-radio-group>
               </el-form-item>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="7">
               <el-form-item label="站点对比">
-                <el-select v-model="form.siteId2" filterable placeholder="选择站点" style="width:100%">
+                <el-select v-model="form.siteId2" filterable multiple collapse-tags placeholder="选择站点" style="width:100%">
                   <el-option v-for="(item,index) in siteOption" :key="index" :label="item.siteName" :value="item.id">
                   </el-option>
                 </el-select>
@@ -39,7 +39,7 @@
             </el-col>
             <el-col :span="6">
               <el-form-item label="同比开始时间">
-                <el-date-picker v-model="form.value1" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
+                <el-date-picker v-model="form.date2" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
               </el-form-item>
             </el-col>
             <el-col :span="2">
@@ -65,9 +65,14 @@
       <!-- 标签页 -->
       <el-tabs v-model="activeName" style="height:550px">
         <el-tab-pane label="图表" name="first">
-          <div class="chart-div" v-for="(item,index) in targetData" :key="index">
+          <!-- <div class="chart-div" v-for="(item,index) in targetData" :key="index">
             <div class="chart-title" v-cloak>{{item.targetName}}({{item.targetCode}})</div>
             <div :id="'curve-chart'+index" class="chartBox"></div>
+          </div> -->
+          <div class="chart-div" v-for="(value,key) in targetObj">
+            <div class="chart-title" v-cloak>{{targetObj[key].target.targetName}}({{targetObj[key].target.targetCode}})</div>
+            <!-- <div class="chart-title" v-cloak>{{key}}</div> -->
+            <div :ref="targetObj[key].target.targetCode" class="chartBox"></div>
           </div>
         </el-tab-pane>
         <el-tab-pane label="列表" name="second" style="height:100%">
@@ -89,7 +94,7 @@
 </template>
 
 <script>
-import { getHistoryCurve, getSites } from '@/views/spectrum/dynamicMonitor/api/api'
+import { getCurve, getHourCurve, getDayCurve, getSites } from '@/views/spectrum/dynamicMonitor/api/api'
 
 import elementResizeDetectorMaker from 'element-resize-detector'
 
@@ -154,6 +159,7 @@ export default {
       },
       radio: 1,
       activeName: 'first',
+      targetObj: {},
       targetData: [], // 图表类型
       tableData: [], // 列表数据
       dialogDragWidth: '520px',
@@ -163,9 +169,9 @@ export default {
   mounted() {},
   watch: {
     radio(val, oldVal) {
-      if (val == 3) this.form['date'] = this.getSevenDate()
-      else
-        this.form['date'] = [this.$moment().format('YYYY-MM-DD 00:00:00'), this.$moment().format('YYYY-MM-DD 23:59:59')]
+      // if (val == 3) this.form['date'] = this.getSevenDate()
+      // else
+      //   this.form['date'] = [this.$moment().format('YYYY-MM-DD 00:00:00'), this.$moment().format('YYYY-MM-DD 23:59:59')]
       this.query()
     }
   },
@@ -192,43 +198,108 @@ export default {
       })
     },
     /**
-     * 获取监测曲线数据
+     * 请求参数
      */
-    getHistoryCurve(params) {
-      // let params = {
-      //   siteId: siteId,
-      //   // beginTime: this.$moment(this.form.date[0]).format('YYYY-MM-DD 00:00:00'),
-      //   // endTime: this.$moment(this.form.date[1]).format('YYYY-MM-DD 23:59:59')
-      // }
-      // // if (this.form.date && this.form.date instanceof Array && this.form.date.length > 0) {
-      // //   params['beginTime'] = this.$moment(this.form.date[0]).format('YYYY-MM-DD 00:00:00')
-      // //   params['endTime'] = this.$moment(this.form.date[1]).format('YYYY-MM-DD 23:59:59')
-      // // }
-      getHistoryCurve(params).then((res) => {
-        if (res.code && res.code == 1) {
-          if (!res.result || !res.result.list || res.result.list instanceof Array == false) return
-          const result = res.result.list[0]
-          let target = result.targetVos // 要展示曲线的指标
-          // let collectionDates = result.collectionDates.map((item) => {
-          //   if (this.radio == 3) return this.$moment(item).format('MM-DD')
-          //   else return this.$moment(item).format('DD HH')
-          // }) // 选择日期
-          let collectionDates = result.collectionDates
-          if (!params.hasOwnProperty('beginTime') && !params.hasOwnProperty('endTime')) {
-            this.timeType = 7
-            this.form.date = [result.collectionDates[0], result.collectionDates[result.collectionDates.length - 1]]
+    readyParams() {
+      let timeInterval = this.getQueryTime() // 查询时间段一
+      let params = {
+        siteId: this.form.siteId,
+        beginTime: timeInterval.startTime,
+        endTime: timeInterval.endTime
+      }
+      if (this.form.siteId2 && this.form.siteId2.length > 0) params['comprasionSiteIds'] = this.form.siteId2.join(',')
+      // 同比开始时间
+      if (this.form.date2) params['comprasionBeginTime'] = this.$moment(this.form.date2).format('YYYY-MM-DD 00:00:00')
+      // 时间差
+      let seconds = this.$moment(timeInterval.endTime).diff(this.$moment(timeInterval.startTime), 'seconds')
+      // 同比结束时间
+      if (this.form.date2)
+        params['comprasionEndTime'] = this.$moment(params.comprasionBeginTime)
+          .add(seconds, 'second')
+          .format('YYYY-MM-DD HH:mm:ss')
+
+      // console.log('参数PP', params)
+      return params
+    },
+    /**
+     * 处理返回的曲线数据
+     */
+    dealCurveData(params, res) {
+      if (res.code && res.code == 1) {
+        if (!res.result || !res.result.list || res.result.list instanceof Array == false) {
+          this.targetObj = {}
+          this.targetData = []
+          this.tableData = []
+          return
+        }
+        // const tableData = res.result.list[0]
+        // 显示最新时间
+        if (!params.hasOwnProperty('beginTime') && !params.hasOwnProperty('endTime')) {
+          this.timeType = 7
+          this.form.date = [res.result.map.X1[0], res.result.map.X1[res.result.map.X1.length - 1]]
+        }
+        // 主站点
+        let mainData = res.result.list.find((item) => {
+          return item.type == 'X1'
+        })
+        this.targetData = mainData.targetVos
+        this.loadTable(mainData)
+
+        let targetObj = this.groupResponseData(res)
+        this.targetObj = targetObj
+        for (const key in targetObj) {
+          const item = targetObj[key]
+          this.$nextTick(() => {
+            let series = this.getSeries(item.data)
+            this.loadChart(item.target.targetCode, res.result.map, series)
+          })
+        }
+      }
+    },
+    /**
+     * 组织返回的数据
+     */
+    groupResponseData(response) {
+      let obj = {}
+      const array = response.result.list
+      for (let index = 0; index < array.length; index++) {
+        const listItem = array[index]
+        let targetVos = listItem.targetVos
+        for (let index2 = 0; index2 < targetVos.length; index2++) {
+          const targetItem = targetVos[index2]
+          let targetData = {
+            list: listItem[targetItem.targetCode + 's'],
+            type: listItem.type
           }
-          this.targetData = target
-          for (let index = 0; index < target.length; index++) {
-            const item = target[index]
-            const yData = result[item.targetCode + 's']
-            this.$nextTick(() => {
-              this.loadChart(index, collectionDates, yData, this.areaColor[index])
-            })
+          if (!obj.hasOwnProperty(targetItem.targetCode)) {
+            obj[targetItem.targetCode] = {
+              target: targetItem,
+              data: [targetData]
+            }
+          } else {
+            obj[targetItem.targetCode].data.push(targetData)
           }
-          this.loadTable(result)
         }
-      })
+      }
+      return obj
+    },
+    /**
+     * 获取监测曲线数据
+     */
+    getHistoryCurve(params) {
+      if (this.radio == 1) {
+        getCurve(params).then((res) => {
+          this.dealCurveData(params, res)
+        })
+      } else if (this.radio == 2) {
+        getHourCurve(params).then((res) => {
+          this.dealCurveData(params, res)
+        })
+      } else if (this.radio == 3) {
+        getDayCurve(params).then((res) => {
+          this.dealCurveData(params, res)
+        })
+      }
     },
     /**
      * 获取查询时间
@@ -278,21 +349,47 @@ export default {
      * 查询
      */
     query() {
-      let timeInterval = this.getQueryTime()
-      let params = {
-        siteId: this.form.siteId,
-        // beginTime: this.$moment(this.form.date[0]).format('YYYY-MM-DD 00:00:00'),
-        // endTime: this.$moment(this.form.date[1]).format('YYYY-MM-DD 23:59:59')
-        beginTime: timeInterval.startTime,
-        endTime: timeInterval.endTime
-      }
+      let params = this.readyParams()
+      // let timeInterval = this.getQueryTime()
+      // let params = {
+      //   siteId: this.form.siteId,
+      //   // beginTime: this.$moment(this.form.date[0]).format('YYYY-MM-DD 00:00:00'),
+      //   // endTime: this.$moment(this.form.date[1]).format('YYYY-MM-DD 23:59:59')
+      //   beginTime: timeInterval.startTime,
+      //   endTime: timeInterval.endTime
+      // }
       this.getHistoryCurve(params)
     },
+    getSeries(seriesList) {
+      let list = []
+      seriesList.forEach((item) => {
+        list.push({
+          xAxisIndex: item.type == 'X1' ? 0 : 1,
+          type: 'line',
+          smooth: true,
+          lineStyle: {
+            width: 2
+          },
+          showSymbol: false,
+          label: {
+            show: true,
+            position: 'top'
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          data: item.list
+        })
+      })
+      return list
+    },
     /**
      * 加载图表
      */
-    loadChart(domIndex, xData, yData, areaColor) {
-      let chartDom = document.getElementById('curve-chart' + domIndex)
+    loadChart(domIndex, xAxisList, seriesList) {
+      // console.log('dom::：',domIndex,document.getElementById('curve-chart-' + domIndex));
+      // let chartDom = document.getElementById('curve-' + domIndex)
+      let chartDom = this.$refs[domIndex][0]
       let myChart = echarts.init(chartDom)
       let option = {
         tooltip: {
@@ -311,53 +408,34 @@ export default {
           bottom: '2%',
           containLabel: true
         },
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: xData,
-          axisLabel: {
-            formatter: (dateTime) => {
-              return this.$moment(dateTime).format('DD日HH时')
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: xAxisList.X1,
+            axisLabel: {
+              formatter: (dateTime) => {
+                return this.formatAxisLabel(dateTime)
+              }
+            }
+          },
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: xAxisList.X2,
+            axisLabel: {
+              formatter: (dateTime) => {
+                return this.formatAxisLabel(dateTime)
+              }
             }
           }
-        },
+        ],
         yAxis: [
           {
             type: 'value'
           }
         ],
-        series: [
-          {
-            type: 'line',
-            stack: 'Total',
-            smooth: true,
-            lineStyle: {
-              width: 0
-            },
-            showSymbol: false,
-            label: {
-              show: true,
-              position: 'top'
-            },
-            areaStyle: {
-              opacity: 0.8,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: areaColor[0]
-                },
-                {
-                  offset: 1,
-                  color: areaColor[1]
-                }
-              ])
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data: yData
-          }
-        ]
+        series: seriesList
       }
       myChart.clear()
       option && myChart.setOption(option)
@@ -369,6 +447,14 @@ export default {
         })
       })
     },
+    /**
+     * 格式化 X 轴指标标签
+     */
+    formatAxisLabel(axisLabel) {
+      if (this.radio == 3) return this.$moment(axisLabel).format('MM月DD日')
+      else if (this.radio == 2) return this.$moment(axisLabel).format('MM月DD日HH时')
+      else if (this.radio == 1) return this.$moment(axisLabel).format('MM月DD日HH时')
+    },
     /**
      * 加载列表
      */
@@ -491,7 +577,7 @@ export default {
         }
         .chartBox {
           width: 100%;
-          height: 180px;
+          height: 280px;
           // background-color: #ccc;
         }
       }

src/views/spectrum/dynamicMonitor/api/api.ts

@@ -54,8 +54,8 @@ export function getSiteNewData(params) {
     })
 }
 
-// 获取监测曲线数据
-export function getHistoryCurve(params) {
+// 获取监测曲线实时数据
+export function getCurve(params) {
     return request({
         url: '/survey/devicecheckdata/curve',
         method: 'get',
@@ -63,6 +63,24 @@ export function getHistoryCurve(params) {
     })
 }
 
+// 获取监测曲线每小时均值数据
+export function getHourCurve(params) {
+    return request({
+        url: '/survey/checkdataHour/hourCurve',
+        method: 'get',
+        params
+    })
+}
+
+// 获取监测曲线每日均值数据
+export function getDayCurve(params) {
+    return request({
+        url: '/survey/checkdataday/dayCurve',
+        method: 'get',
+        params
+    })
+}
+
 // 获取站点监测数据台账分页
 export function getDevicecheckdataList(params) {
     return request({