大屏样式修改

src/components/screenDisplay.vue

@@ -456,7 +456,7 @@ import AMapLoader from "@amap/amap-jsapi-loader";
         </div>
         <div class="thirdLeftLayer_one">
           <div class="titleStyleTwo"><p>管道光纤测漏温度曲线</p></div>
-          <div class="thirdLeftLayer2" id="thirdLeftLayer2"></div>
+          <div class="secondLeftLayerP2" id="secondLeftLayerP2"></div>
         </div>
         <div class="thirdLeftLayer_one">
           <div class="titleStyleTwo"><p>灭火器仪表监视</p></div>
@@ -555,9 +555,7 @@ export default defineComponent({
         this.handleGetGISRankWaterUC(); // 获取二次侧机组补水量排名
 
       }else if(newV === 3) {
-        if (document.querySelector("#thirdLeftLayer2")) {
-          this.getTemperatureTrend();
-        }
+        this.handleGetPipingTrend();
       }
     },
   },
@@ -572,6 +570,7 @@ export default defineComponent({
       temperatureList: [], //温度列表
       trendList: [],
       trendX: ['0时','1时','2时','3时','4时','5时','6时','7时','8时','9时','10时','11时','12时','13时','14时','15时','16时','17时','18时','19时','20时','21时','22时','23时'],
+      trendXP: ['一月','二月','三月','四月','五月','六月',],
       trendY: [],
       heatTrendY: [],
       enterpriseId: '',
@@ -2126,6 +2125,101 @@ export default defineComponent({
         }
       })
     },
+    handleGetPipingTrend() {
+      const nowDate = moment(new Date()).format('YYYY-MM-DD')
+      const StartTime = nowDate + ' 00:00:00'
+      const EndTime = nowDate + ' 23:59:59'
+      const params = {
+        StartTime: StartTime,
+        EndTime: EndTime,
+        CenterId: this.mapBack.centerId,
+      }
+      getGYSupplyWaterTrend(params).then(res => {
+        if(res.data && res.data.length > 0) {
+          this.trendList = res.data
+      const params = [
+        [
+          {
+            supplyName: "数据1",
+            waterRecord: 0,
+            gatherTime: "2024/9/25 1:00:00"
+          },
+          {
+            supplyName: "数据1",
+            waterRecord: 0,
+            gatherTime: "2024/9/25 2:00:00"
+          },
+          {
+            supplyName: "数据1",
+            waterRecord: 0,
+            gatherTime: "2024/9/25 3:00:00"
+          },
+          {
+            supplyName: "数据1",
+            waterRecord: 0,
+            gatherTime: "2024/9/25 4:00:00"
+          },
+          {
+            supplyName: "数据1",
+            waterRecord: 0,
+            gatherTime: "2024/9/25 5:00:00"
+          },
+          {
+            supplyName: "数据1",
+            waterRecord: 0,
+            gatherTime: "2024/9/25 6:00:00"
+          },
+            ],
+        [
+          {
+            supplyName: "数据2",
+            waterRecord: 0,
+            gatherTime: "2024/9/25 1:00:00"
+          },
+          {
+            supplyName: "数据2",
+            waterRecord: 0,
+            gatherTime: "2024/9/25 2:00:00"
+          },
+          {
+            supplyName: "数据2",
+            waterRecord: 0,
+            gatherTime: "2024/9/25 3:00:00"
+          },
+          {
+            supplyName: "数据2",
+            waterRecord: 0,
+            gatherTime: "2024/9/25 4:00:00"
+          },
+          {
+            supplyName: "数据2",
+            waterRecord: 0,
+            gatherTime: "2024/9/25 5:00:00"
+          },
+          {
+            supplyName: "数据2",
+            waterRecord: 0,
+            gatherTime: "2024/9/25 6:00:00"
+          },
+        ]
+      ]
+      this.trendList = params
+          this.trendY = []
+          for (let i = 0; i < this.trendList.length; i++) {
+            const name = this.trendList[i][0].supplyName
+            const data = this.trendList[i].map(item => item.waterRecord)
+            const yItem = {name: name, data:data}
+            this.trendY.push(yItem)
+          }
+          if (document.querySelector("#secondLeftLayerP2")) {
+            var chartDom = document.getElementById("secondLeftLayerP2");
+            var myChart = echarts.init(chartDom);
+            myChart.dispose()
+            this.echartInitPiping();
+          }
+        }
+      })
+    },
     // 一次侧补水量曲线
     handleGetGYSupplyWaterTrend() {
       const nowDate = moment(new Date()).format('YYYY-MM-DD')
@@ -3096,18 +3190,17 @@ export default defineComponent({
     selectHourFun() {
       this.postGYTransferHeatUC(this.selectHour);
     },
-    getTemperatureTrend: function () {
-      var chartDom = document.getElementById("thirdLeftLayer2");
+    echartInitPiping: function () {
+      var chartDom = document.getElementById("secondLeftLayerP2");
       var myChart = echarts.init(chartDom);
       var option;
-
       option = {
         tooltip: {
           trigger: "axis",
         },
         xAxis: {
           type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          data: this.trendXP,
           axisLabel: {
             color: "#ffffff",
             fontSize: "10px",
@@ -3140,17 +3233,17 @@ export default defineComponent({
           top: 10,
           bottom: 35,
         },
-        series: [
-          {
-            data: [150, 230, 224, 218, 135, 147, 260],
-            type: 'line'
-          }
-        ]
-        // series: this.trendY.map(series => ({
-        //   name: series.name,
-        //   type: 'line',
-        //   data: series.data
-        // }))
+        // series: [
+        //   {
+        //     data: this.trendY,
+        //     type: 'line'
+        //   }
+        // ]
+        series: this.trendY.map(series => ({
+          name: series.name,
+          type: 'line',
+          data: series.data
+        }))
       };
 
       option && myChart.setOption(option);
@@ -3939,7 +4032,7 @@ export default defineComponent({
   width: 100%;
   height: 80%;
 }
-.gis_content .thirdLeftLayer2 {
+.gis_content .secondLeftLayerP2 {
   width: 100%;
   height: 80%;
 }