监测曲线加载雨量

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

@@ -69,18 +69,15 @@
       </div>
       <!-- 标签页 -->
       <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-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>
+        <el-tab-pane label="图表" name="first" :disabled="tabPaneDisabled">
+          <div class="chartsdiv" ref="chartsdiv">
+            <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 :ref="targetObj[key].target.targetCode" class="chartBox"></div>
+            </div>
           </div>
         </el-tab-pane>
-        <el-tab-pane label="列表" name="second" style="height:100%">
+        <el-tab-pane label="列表" name="second" style="height:100%" :disabled="tabPaneDisabled">
           <el-table :data="pageTableData" stripe height="calc(100% - 45px)" style="width:100%" :header-cell-style="{background:'#e0eafb',color:'rgb(50,59,65)',height:'39px',textAlign:'center',fontWeight:'600'}">
             <template slot="empty">
               <img src="@/assets/icon/null.png" alt="" />
@@ -204,7 +201,7 @@ export default {
       },
       targets: [],
       targets2: [],
-      radio: 1,
+      radio: 2,
       activeName: 'first',
       targetObj: {},
       targetOptions1: [],
@@ -220,7 +217,9 @@ export default {
         children: 'data'
       },
       totleTargets: [],
-      pagination: { current: 1, size: 50, total: 0 }
+      pagination: { current: 1, size: 50, total: 0 },
+      loadingState: null,
+      tabPaneDisabled: false
     }
   },
   mounted() { },
@@ -258,7 +257,6 @@ export default {
      * 根据设备类型id获取指标
      */
     async getTargetByType(type, typeId) {
-      console.log('typeId', typeId)
       await getTargetByType({ current: 1, size: 10000, typeId: typeId }).then((res) => {
         if (res.code == 1) {
           if (type == 1) {
@@ -361,7 +359,7 @@ export default {
     /**
      * 处理返回的曲线数据
      */
-    dealCurveData(params, res) {
+    async dealCurveData(params, res) {
       if (res.code && res.code == 1) {
         if (!res.result || !res.result.list || res.result.list instanceof Array == false) {
           this.targetObj = {}
@@ -375,6 +373,20 @@ export default {
           this.timeType = 7
           this.form.date = [res.result.map.X1[0], res.result.map.X1[res.result.map.X1.length - 1]]
         }
+        let rainData = null;
+        if (this.radio != 3) {
+          const startDate = this.$moment(this.form.date[0]).format("YYYY-MM-DD")
+          const endDate = this.$moment(this.$moment(this.form.date[1]).add(1, 'd')).format("YYYY-MM-DD")
+          // 雨量
+          // this.getRainfallHour(params.siteId, startDate, endDate)
+          const getRainfallParams = {
+            siteId: params.siteId,
+            beginDate: startDate,
+            endDate: endDate
+          }
+          let { result: rainFall } = await getRainfallHour(getRainfallParams);
+          rainData = this.groupRainfallData(res.result.map.X1, rainFall.rainFallVos)
+        }
         // 主站点
         let mainData = res.result.list.find((item) => {
           return item.type == 'X1'
@@ -386,18 +398,33 @@ export default {
         this.loadTable(mainData)
         // 图表
         let targetObj = this.groupResponseData(res)
-        // console.log('图表668', targetObj)
+
         this.targetObj = targetObj
         for (const key in targetObj) {
           const item = targetObj[key]
           // 加载图表
           this.$nextTick(() => {
-            let { series, legends } = this.getChartData(item.data)
+            let { series, legends } = this.getChartData(item.data, rainData)
             this.loadChart(item.target.targetCode, legends, res.result.map, series)
           })
         }
+        this.$nextTick(() => {
+          this.loadingClose()
+        })
       }
     },
+    /**
+     * 获取图表雨量数据
+     */
+    groupRainfallData(x1Data, rainFallData) {
+      let myRainFallData = []
+      for (let index = 0; index < x1Data.length; index++) {
+        const x1Item = this.$moment(x1Data[index]).format("YYYY-MM-DD HH");
+        const rain = rainFallData.find(item => { return this.$moment(item.xposition).format("YYYY-MM-DD HH") == x1Item })
+        myRainFallData.push(rain ? rain.maxFall : null)
+      }
+      return myRainFallData
+    },
     /**
      * 组织返回的数据
      */
@@ -410,7 +437,6 @@ export default {
         // 所有指标
         let targets = this.targets.concat(this.targets2)
         const totleTargets = Array.from(new Set(targets))
-        console.log('指标ss', totleTargets)
         // 组合数据
         for (let index2 = 0; index2 < targetVos.length; index2++) {
           const targetItem = targetVos[index2]
@@ -435,6 +461,7 @@ export default {
      * 获取监测曲线数据
      */
     getHistoryCurve(params) {
+      this.loading()
       if (this.radio == 1) {
         getCurve(params).then((res) => {
           this.dealCurveData(params, res)
@@ -503,7 +530,7 @@ export default {
     /**
      * 图表数据
      */
-    getChartData(seriesList) {
+    getChartData(seriesList, rainFallData = null) {
       let series = []
       let legends = []
       seriesList.forEach((item) => {
@@ -530,6 +557,20 @@ export default {
           data: item.list
         })
       })
+      if (rainFallData) {
+        series.unshift({
+          name: '雨量',
+          xAxisIndex: 0,
+          sampling: 'average', //降采样策略
+          type: 'bar',
+          yAxisIndex: 1,
+          emphasis: {
+            focus: 'series'
+          },
+          data: rainFallData
+        })
+        legends.unshift('雨量')
+      }
       return {
         series: series,
         legends: legends
@@ -597,6 +638,11 @@ export default {
         yAxis: [
           {
             type: 'value'
+          },
+          {
+            nameLocation: 'start',
+            alignTicks: true,
+            type: 'value'
           }
         ],
         series: seriesList
@@ -656,6 +702,28 @@ export default {
     handleCurrentChange(val) {
       this.pagination.current = val
       this.getPageList()
+    },
+    /**
+     * 加载状态
+     */
+    loading() {
+      this.$nextTick(() => {
+        this.tabPaneDisabled = true
+        this.loadingState = this.$loading({
+          target: this.$refs.chartsdiv,
+          lock: false,
+          text: '正在加载……',
+          spinner: 'el-icon-loading',
+          background: 'rgb(255, 255, 255)'
+        });
+      })
+    },
+    /**
+     * 关闭加载状态
+     */
+    loadingClose() {
+      this.tabPaneDisabled = false
+      if (this.loadingState) this.loadingState.close()
     }
   }
 }
@@ -719,30 +787,37 @@ export default {
   .el-tabs {
     >>> .el-tabs__content {
       height: calc(100% - 55px);
-      overflow-y: auto;
-      .chart-div {
-        margin-bottom: 20px;
-        .chart-title {
-          font-size: 16px;
-          font-family: '宋体';
-          color: #333333;
-          line-height: 18px;
-          margin: 10px 0;
-          font-weight: 600;
+      .chartsdiv {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        .el-loading-spinner {
+          font-size: 30px;
+        }
+        .chart-div {
+          margin-bottom: 20px;
+          .chart-title {
+            font-size: 16px;
+            font-family: '宋体';
+            color: #333333;
+            line-height: 18px;
+            margin: 10px 0;
+            font-weight: 600;
 
-          &::before {
-            content: '';
-            display: inline-block;
-            width: 3px;
-            height: 16px;
-            background: #2a77f7;
-            vertical-align: top;
-            margin-right: 5px;
+            &::before {
+              content: '';
+              display: inline-block;
+              width: 3px;
+              height: 16px;
+              background: #2a77f7;
+              vertical-align: top;
+              margin-right: 5px;
+            }
+          }
+          .chartBox {
+            width: 100%;
+            height: 430px;
           }
-        }
-        .chartBox {
-          width: 100%;
-          height: 430px;
         }
       }
     }