1

src/views/board.vue

@@ -331,7 +331,51 @@
             order: '5',
           }"
         >
-          <div :style="{ width: 'calc(33.33% - 8px)', margin: '0', alignItems: 'center', color: '#fff', flex: 'none', display: 'flex' }">
+          <!-- <div :style="{ width: 'calc(33.33% - 8px)', margin: '0', alignItems: 'center', color: '#fff', flex: 'none', display: 'flex' }">
+            <div :style="{ color: '#3f83f8', width: '100px', textAlign: 'right' }">归属县旗</div>
+            <el-select
+              class="comp-select"
+              :style="{
+                border: '1px solid #3f83f8',
+                padding: '0 10px',
+                margin: '0 0 0 10px',
+                color: '#3f83f8',
+                background: 'none',
+                width: 'calc(100% - 100px)',
+                lineHeight: '30px',
+                height: '30px',
+              }"
+              v-model="ycForm.compId"
+              placeholder="归属县旗"
+              @change="getYcSubList"
+              clearable
+            >
+              <el-option v-for="item in ycCompList" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </div> -->
+          <div :style="{ width: 'calc(30.33% - 8px)', margin: '0', alignItems: 'center', color: '#fff', flex: 'none', display: 'flex' }">
+            <div :style="{ color: '#3f83f8', width: '100px', textAlign: 'right' }">变电站</div>
+            <el-select
+              s
+              class="comp-select"
+              :style="{
+                border: '1px solid #3f83f8',
+                padding: '0 10px',
+                margin: '0 0 0 10px',
+                color: '#3f83f8',
+                background: 'none',
+                width: 'calc(100% - 100px)',
+                lineHeight: '30px',
+                height: '30px',
+              }"
+              v-model="ycForm.subId"
+              placeholder="变电站"
+              clearable
+            >
+              <el-option v-for="item in ycSubList" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </div>
+          <div :style="{ width: 'calc(30.33% - 8px)', margin: '0', alignItems: 'center', color: '#fff', flex: 'none', display: 'flex' }">
             <div :style="{ color: '#3f83f8', width: '100px', textAlign: 'right' }">温度</div>
             <input
               :style="{
@@ -375,14 +419,14 @@
           <!-- <div :style='{"width":"calc(33.33% - 8px)","fontSize":"16px","lineHeight":"40px","color":"#3f83f8","textAlign":"center"}'>
 						预测当日降雨量：{{form.dailyrainfall}}
 					</div> -->
-          <div :style="{ width: 'calc(53.33% - 8px)', margin: '0', alignItems: 'center', color: '#fff', flex: 'none', display: 'flex' }">
+          <div :style="{ width: 'calc(39.33% - 8px)', margin: '0', alignItems: 'center', color: '#fff', flex: 'none', display: 'flex' }">
             <div :style="{ color: '#3f83f8', width: '100px', textAlign: 'right' }">时间</div>
             <el-date-picker
               size="large"
               v-model="ycForm.dateRange"
               type="daterange"
               value-format="yyyy-MM-dd"
-              range-separator="至"
+              range-separator="-"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
               :style="{
@@ -391,7 +435,6 @@
                 margin: '0 0 0 10px',
                 color: '#3f83f8',
                 background: 'none',
-                width: 'calc(100% - 100px)',
                 lineHeight: '30px',
                 height: '30px',
               }"
@@ -417,6 +460,11 @@
           </div>
         </div>
       </div>
+      <div v-if="ycObj">
+        <div><span>电采暖用户数:</span>{{ ycObj?.elecHeatingUserNum || 0 }}</div>
+        <div><span>基础负荷:</span>{{ ycObj?.baseLoad || 0 }}</div>
+        <div><span>电采暖负荷:</span>{{ ycObj?.elecHeatingLoad || 0 }}</div>
+      </div>
       <div :style="{ width: '28%', padding: '0', flexWrap: 'wrap', flexDirection: 'column', display: 'flex', gap: '10px' }">
         <div class="echarts3">
           <div
@@ -453,7 +501,7 @@
             }"
           >
             <div :style="{ fontSize: '20px', lineHeight: '36px', color: '#fff', textAlign: 'left', background: 'none', fontWeight: '500' }">
-              月用户数
+              月电采暖用户数
             </div>
           </div>
           <div :style="{ width: '100%', padding: '0 30px 0 0', flex: 'auto', height: '0' }">
@@ -3185,6 +3233,8 @@ export default {
         compName: '',
         recordDate: '',
       },
+      ycSubList: [],
+      ycObj: null,
     };
   },
   mounted() {
@@ -3192,39 +3242,79 @@ export default {
     // this.getrainfalldataList()
     particlesJS('particles', this.particlesJson);
   },
-  created() {
-    this.getCompList();
+  async created() {
+    await this.getCompList();
+    await this.getRecordDate();
     this.$nextTick(() => {
       this.times();
       setTimeout(() => {
         this.getSubList();
         this.getqiyeCount();
         this.getrainfalldataCount();
+        this.getrainfalldataList2();
+        if (!this.searchForm.recordDate) return;
         this.rainfalldataChat1();
         this.rainfalldataChat2();
         this.rainfalldataChat3();
         this.rainfalldataChat4();
         this.rainfalldataChat5();
         this.rainfalldataChat6();
-        setTimeout(() => {
-          this.getrainfalldataList2();
-        }, 500);
       }, 500);
     });
   },
   methods: {
-    changeComp() {
+    // 获取变电站列表
+    async getYcSubList() {
+      this.ycSubList = [];
+      let params = {
+        page: this.pageIndex,
+        limit: this.pageSize,
+        sort: 'id',
+        order: 'desc',
+        compId: this.compList.find(item => item.label === this.searchForm.compName)?.value,
+      };
+      const { data } = await this.$http({
+        url: '/sub/page',
+        method: 'get',
+        params: params,
+      });
+      if (data && data.code === 0) {
+        this.ycSubList = data.data.list.map(item => ({
+          label: item.subName,
+          value: String(item.id),
+        }));
+        this.ycForm.subId = undefined;
+      }
+    },
+    async changeComp() {
+      this.getYcSubList();
+      await this.getRecordDate();
+      this.getrainfalldataList2();
+      if (!this.searchForm.recordDate) return;
       this.rainfalldataChat1('value');
       this.rainfalldataChat2('value');
       this.rainfalldataChat3('value');
       this.rainfalldataChat4('value');
       this.rainfalldataChat5('value');
       this.rainfalldataChat6('value');
-      this.getrainfalldataList2();
+    },
+    async getRecordDate() {
+      const compId = this.compList.find(item => item.label === this.searchForm.compName)?.value;
+      const { data } = await this.$http({
+        url: `/subLoad/getMaxRecordDate/${compId}`,
+        method: 'get',
+      });
+      if (data && data.code === 0) {
+        this.searchForm.recordDate = data.data?.recordDate;
+      } else {
+        this.$message.error(data.msg);
+        this.searchForm.recordDate = '';
+      }
     },
     // 获取公司列表
     async getCompList() {
       this.compList = [];
+      this.ycCompList = [];
       const { data } = await this.$http({
         url: `/company/lists`,
         method: 'get',
@@ -3234,11 +3324,24 @@ export default {
           label: item.compName,
           value: String(item.id),
         }));
+        this.ycCompList = data.data.map(item => ({
+          label: item.compName,
+          value: String(item.id),
+        }));
         this.searchForm.compName = this.compList[0].label;
+        this.ycForm.compId = this.ycCompList[0].value;
       }
     },
     // 预测
     ycForecastHandler() {
+      if (!this.ycForm.compId || this.ycForm.compId == undefined) {
+        this.$message.warning('请选择县旗');
+        return;
+      }
+      if (!this.ycForm.subId || this.ycForm.subId == undefined) {
+        this.$message.warning('请选择变电站');
+        return;
+      }
       if (this.ycForm.temperature == '' || this.ycForm.temperature == undefined) {
         this.$message.warning('请输入温度');
         return;
@@ -3252,6 +3355,8 @@ export default {
         limit: 999,
         sort: 'id',
         order: 'desc',
+        compId: this.compList.find(item => item.label === this.searchForm.compName)?.value,
+        subId: this.ycForm.subId,
       };
       if (this.ycForm.temperature != '' && this.ycForm.temperature != undefined) {
         params['temperature'] = Number(this.ycForm.temperature);
@@ -3261,11 +3366,13 @@ export default {
         params['endDate'] = this.ycForm.dateRange[1];
       }
       this.$http({
-        url: '/electric-heating/predict',
+        url: '/subLoad/predict',
         method: 'post',
         data: params,
       }).then(({ data }) => {
+        console.log(data, 'data');
         if (data && data.code === 0) {
+          this.ycObj = data.data;
           this.$message.success(data.msg);
         } else {
           this.$message.error(data.msg);
@@ -3838,7 +3945,7 @@ export default {
       });
     },
     //统计接口1
-    rainfalldataChat1(type = 'init') {
+    rainfalldataChat1(type = 'value') {
       this.$nextTick(() => {
         var rainfalldataChart1 = echarts.init(document.getElementById('rainfalldataChart1'), 'carp');
         this.$http({
@@ -3851,9 +3958,7 @@ export default {
         }).then(({ data }) => {
           if (data && data.code === 0) {
             const res = type === 'init' ? data?.data?.result || [] : data?.data || [];
-            if (data.data?.recordDate) {
-              this.searchForm.recordDate = data.data.recordDate;
-            }
+
             let xAxis = [];
             let yAxis = [];
             let pArray = [];
@@ -3927,7 +4032,7 @@ export default {
       });
     },
     //统计接口2
-    rainfalldataChat2(type = 'init') {
+    rainfalldataChat2(type = 'value') {
       this.$nextTick(() => {
         var rainfalldataChart2 = echarts.init(document.getElementById('rainfalldataChart2'), 'carp');
         this.$http({
@@ -3940,9 +4045,7 @@ export default {
         }).then(({ data }) => {
           if (data && data.code === 0) {
             const res = type === 'init' ? data?.data?.result || [] : data?.data || [];
-            if (data.data?.recordDate) {
-              this.searchForm.recordDate = data.data.recordDate;
-            }
+
             let xAxis = [];
             let yAxis = [];
             let pArray = [];
@@ -4014,7 +4117,7 @@ export default {
       });
     },
     //统计接口3
-    rainfalldataChat3(type = 'init') {
+    rainfalldataChat3(type = 'value') {
       this.$nextTick(() => {
         var rainfalldataChart3 = echarts.init(document.getElementById('rainfalldataChart3'), 'carp');
         this.$http({
@@ -4027,9 +4130,7 @@ export default {
         }).then(({ data }) => {
           if (data && data.code === 0) {
             const res = type === 'init' ? data?.data?.result || [] : data?.data || [];
-            if (data.data?.recordDate) {
-              this.searchForm.recordDate = data.data.recordDate;
-            }
+
             let xAxis = [];
             let yAxis = [];
             let pArray = [];
@@ -4100,11 +4201,49 @@ export default {
         });
       });
     },
-    //统计接口4
-    rainfalldataChat4(type = 'init') {
+    // //统计接口4
+    // rainfalldataChat4(type = 'value') {
+    //   this.$nextTick(() => {
+    //     this.$http({
+    //       url: `/subLoad/${type}/users_num/monthly`,
+    //       method: 'get',
+    //       params: {
+    //         companyName: this.searchForm.compName,
+    //         recordDate: this.searchForm.recordDate,
+    //       },
+    //     }).then(({ data }) => {
+    //       if (data && data.code === 0) {
+    //         const res = type === 'init' ? data?.data?.result || [] : data?.data || [];
+
+    //         let xAxis = [];
+    //         let yAxis = [];
+    //         let pArray = [];
+    //         for (let i = 0; i < res.length; i++) {
+    //           xAxis.push(res[i].subName);
+    //           yAxis.push(parseFloat(res[i].total));
+    //           pArray.push({
+    //             value: parseFloat(res[i].total),
+    //             name: res[i].subName,
+    //           });
+    //         }
+    //         var option = {};
+    //         this.wordclouds(pArray, 'rainfalldataChart4');
+    //       } else {
+    //         this.$message({
+    //           message: data.msg,
+    //           type: 'warning',
+    //           duration: 1500,
+    //         });
+    //       }
+    //     });
+    //   });
+    // },
+    //统计接口1
+    rainfalldataChat4(type = 'value') {
       this.$nextTick(() => {
+        var rainfalldataChart4 = echarts.init(document.getElementById('rainfalldataChart4'), 'carp');
         this.$http({
-          url: `/subLoad/${type}/users_num/monthly`,
+          url: `/subLoad/${type}/join_electric_heating_num/monthly`,
           method: 'get',
           params: {
             companyName: this.searchForm.compName,
@@ -4113,13 +4252,14 @@ export default {
         }).then(({ data }) => {
           if (data && data.code === 0) {
             const res = type === 'init' ? data?.data?.result || [] : data?.data || [];
-            if (data.data?.recordDate) {
-              this.searchForm.recordDate = data.data.recordDate;
-            }
+
             let xAxis = [];
             let yAxis = [];
             let pArray = [];
             for (let i = 0; i < res.length; i++) {
+              if (this.boardBase && i == this.boardBase.lineNum) {
+                break;
+              }
               xAxis.push(res[i].subName);
               yAxis.push(parseFloat(res[i].total));
               pArray.push({
@@ -4128,7 +4268,53 @@ export default {
               });
             }
             var option = {};
-            this.wordclouds(pArray, 'rainfalldataChart4');
+            let titleObj = this.line3.title;
+            titleObj.text = '电采暖用户数';
+
+            const legendObj = this.line3.legend;
+
+            let xAxisObj = this.line3.xAxis;
+            xAxisObj.type = 'category';
+            xAxisObj.boundaryGap = false;
+            xAxisObj.data = xAxis;
+
+            let yAxisObj = this.line3.yAxis;
+            yAxisObj.type = 'value';
+
+            let seriesObj = {
+              data: yAxis,
+              type: 'line',
+              smooth: true,
+            };
+            seriesObj = Object.assign(seriesObj, this.line3.series);
+            const gridObj = this.line3.grid;
+            let tooltipObj = {
+              trigger: 'item',
+              formatter: '{b} : {c}',
+            };
+            tooltipObj = Object.assign(tooltipObj, this.line3.tooltip ? this.line3.tooltip : {});
+            option = {
+              backgroundColor: this.line3.backgroundColor,
+              color: this.line3.color,
+              title: titleObj,
+              legend: legendObj,
+              tooltip: tooltipObj,
+              xAxis: xAxisObj,
+              yAxis: yAxisObj,
+              grid: gridObj,
+              series: [seriesObj],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            rainfalldataChart4.setOption(option);
+
+            //根据窗口的大小变动图表
+            window.addEventListener(
+              'resize',
+              () => {
+                rainfalldataChart4.resize();
+              },
+              false
+            );
           } else {
             this.$message({
               message: data.msg,
@@ -4140,7 +4326,7 @@ export default {
       });
     },
     //统计接口5
-    rainfalldataChat5(type = 'init') {
+    rainfalldataChat5(type = 'value') {
       this.$nextTick(() => {
         var rainfalldataChart5 = echarts.init(document.getElementById('rainfalldataChart5'), 'carp');
         this.$http({
@@ -4153,9 +4339,7 @@ export default {
         }).then(({ data }) => {
           if (data && data.code === 0) {
             const res = type === 'init' ? data?.data?.result || [] : data?.data || [];
-            if (data.data?.recordDate) {
-              this.searchForm.recordDate = data.data.recordDate;
-            }
+
             let xAxis = [];
             let yAxis = [];
             let pArray = [];
@@ -4229,7 +4413,7 @@ export default {
       });
     },
     // 统计接口6
-    rainfalldataChat6(type = 'init') {
+    rainfalldataChat6(type = 'value') {
       this.$nextTick(() => {
         var rainfalldataChart6 = echarts.init(document.getElementById('rainfalldataChart6'), 'carp');
         this.$http({
@@ -4242,9 +4426,7 @@ export default {
         }).then(({ data }) => {
           if (data && data.code === 0) {
             const res = type === 'init' ? data?.data?.result || [] : data?.data || [];
-            if (data.data?.recordDate) {
-              this.searchForm.recordDate = data.data.recordDate;
-            }
+
             let xAxis = [];
             let yAxis = [];
             let pArray = [];

src/views/modules/load-forecasting/index.vue

@@ -595,10 +595,10 @@ export default {
       lineOption: {
         grid: { top: 10, left: 15, right: 15, bottom: 20 },
         color: ['#0977fd'],
-        tooltip: { trigger: 'item', formatter: '{b} : {c}', backgroundColor: 'transparent' },
+        tooltip: { trigger: 'item', backgroundColor: 'transparent' },
         xAxis: {
           type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          data: [],
         },
         yAxis: {
           type: 'value',
@@ -717,20 +717,26 @@ export default {
           method: 'get',
           params: params,
         }).then(({ data }) => {
-          const chart = echarts.init(document.getElementById(`chart${i + 1}`), 'carp');
+          const chart = echarts.init(document.getElementById(`chart${i + 1}`));
           const res = initType === 'init' ? data?.data?.result || [] : data?.data || [];
           // 使用刚指定的配置项和数据显示图表。
           // if ([0, 1, 2].includes(i)) {
           chart.setOption({
-            ...this.lineOption,
+            grid: { top: 10, left: 15, right: 15, bottom: 20 },
+            color: ['#0977fd'],
+            tooltip: { trigger: 'item', backgroundColor: 'transparent' },
             xAxis: {
               type: 'category',
               data: res?.map(item => item.subName),
             },
+            yAxis: {
+              type: 'value',
+            },
             series: [
               {
-                data: res?.map(item => item.total),
+                data: res?.map(item => Number(item.total).toFixed(2)),
                 type: 'line',
+                smooth: true,
               },
             ],
           });