气温和风力增加预测折线信息

src/views/heating/monitor/weather.vue

@@ -115,7 +115,11 @@ export default defineComponent({
       xAxis: [],
       tem: [],
       averageTem: [],
+      foreCastInfoTem: [],
+      foreCastAvgInfoTem: [],
       xAxisWind: [],
+      foreCastInfoWind: [],
+      foreCastAvgInfoWind: [],
       temWind: [],
       averageTemWind: [],
       currentcityId: 0,
@@ -140,19 +144,33 @@ export default defineComponent({
     // 根据ID获取指定城市的风力图表
     const getWindpowerEchartById = (id: number) => {
       api.weather.getWindpowerEchartById({ id: id, types: state.windpowerType }).then((res: any) => {
-        const { AvgInfo, Info } = res;
+        const { AvgInfo, Info, ForeCastInfo,  ForeCastAvgInfo} = res;
         state.xAxisWind = [];
         state.temWind = [];
+        state.foreCastInfoWind = [];
         state.averageTemWind = [];
+        state.foreCastAvgInfoWind = [];
         if (Info && Info.length) {
           Info.forEach((i: any) => {
             state.xAxisWind.push(i.time);
             state.temWind.push(i.value);
+            state.foreCastInfoWind.push('-');
           })
         }
         if (AvgInfo && AvgInfo.length) {
           AvgInfo.forEach((i: any) => {
             state.averageTemWind.push(i.value)
+            state.foreCastAvgInfoWind.push('-');
+          })
+        }
+        if([2, 3].indexOf(state.windpowerType) > -1) {
+          ForeCastInfo.forEach((i: any) => {
+            state.xAxisWind.push(i.time);
+            state.temWind.push('-');
+            state.foreCastInfoWind.push(i.value);
+          })
+          ForeCastAvgInfo.forEach((i: any) => {
+            state.foreCastAvgInfoWind.push(i.value);
           })
         }
         nextTick(() => {
@@ -164,19 +182,33 @@ export default defineComponent({
     // 根据ID获取指定城市的温度图表
     const getTemperatureEchartById = (id: number) => {
       api.weather.getTemperatureEchartById({ id: id, types: state.temperatureType }).then((res: any) => {
-        const { AvgInfo, Info } = res;
+        const { AvgInfo, Info, ForeCastInfo, ForeCastAvgInfo } = res;
         state.xAxis = [];
         state.tem = [];
+        state.foreCastInfoTem = [];
         state.averageTem = [];
+        state.foreCastAvgInfoTem = [];
         if (Info && Info.length) {
           Info.forEach((i: any) => {
             state.xAxis.push(i.time);
             state.tem.push(i.value);
+            state.foreCastInfoTem.push('-');
           })
         }
         if (AvgInfo && AvgInfo.length) {
           AvgInfo.forEach((i: any) => {
             state.averageTem.push(i.value)
+            state.foreCastAvgInfoTem.push('-');
+          })
+        }
+        if([2, 3].indexOf(state.temperatureType) > -1) {
+          ForeCastInfo.forEach((i: any) => {
+            state.xAxis.push(i.time);
+            state.tem.push('-');
+            state.foreCastInfoTem.push(i.value);
+          })
+          ForeCastAvgInfo.forEach((i: any) => {
+            state.foreCastAvgInfoTem.push(i.value);
           })
         }
         nextTick(() => {
@@ -201,7 +233,7 @@ export default defineComponent({
         backgroundColor: state.charts.bgColor,
         grid: { top: 70, right: 40, bottom: 50, left: 40 },
         tooltip: { trigger: 'axis' },
-        legend: { data: ['气温（℃）', '当日平均（℃）'], left: '40%' },
+        legend: { data: [2, 3].indexOf(state.temperatureType) > -1 ? ['气温（℃）', '平均气温（℃）', '预测气温（℃）', '预测平均气温（℃）'] : ['气温（℃）', '平均气温（℃）'], left: '0' },
         xAxis: {
           data: state.xAxis
         },
@@ -233,7 +265,24 @@ export default defineComponent({
             },
           },
           {
-            name: '当日平均（℃）',
+            name: '预测气温（℃）',
+            type: 'line',
+            symbolSize: 6,
+            symbol: 'circle',
+            smooth: true,
+            // data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
+            data: state.foreCastInfoTem,
+            lineStyle: { color: '#2b79ff' },
+            itemStyle: { color: '#2b79ff', borderColor: '#2b79ff' },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#2b79ff' },
+                { offset: 1, color: '#c5e3ed' },
+              ]),
+            },
+          },
+          {
+            name: '平均气温（℃）',
             type: 'line',
             symbolSize: 6,
             symbol: 'circle',
@@ -268,6 +317,42 @@ export default defineComponent({
               },
             },
           },
+          {
+            name: '预测平均气温（℃）',
+            type: 'line',
+            symbolSize: 6,
+            symbol: 'circle',
+            smooth: true,
+            data: state.foreCastAvgInfoTem,
+            lineStyle: { color: '#41b883' },
+            itemStyle: { color: '#41b883', borderColor: '#41b883' },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#41b883' },
+                { offset: 1, color: '#ddf2eaab' },
+              ]),
+            },
+            emphasis: {
+              itemStyle: {
+                color: {
+                  type: 'radial',
+                  x: 0.5,
+                  y: 0.5,
+                  r: 0.5,
+                  colorStops: [
+                    { offset: 0, color: '#9E87FF' },
+                    { offset: 0.4, color: '#9E87FF' },
+                    { offset: 0.5, color: '#fff' },
+                    { offset: 0.7, color: '#fff' },
+                    { offset: 0.8, color: '#fff' },
+                    { offset: 1, color: '#fff' },
+                  ],
+                },
+                borderColor: '#9E87FF',
+                borderWidth: 2,
+              },
+            },
+          },
         ],
       };
       (<any>global.homeChartOne).setOption(option);
@@ -281,7 +366,7 @@ export default defineComponent({
         backgroundColor: state.charts.bgColor,
         grid: { top: 70, right: 40, bottom: 50, left: 40 },
         tooltip: { trigger: 'axis' },
-        legend: { data: ['风力（级）', '当日风力（级）'], left: '40%' },
+        legend: { data: [2, 3].indexOf(state.windpowerType) > -1 ? ['风力（级）', '平均风力（级）', '预测风力（级）', '预测平均风力（级）'] : ['风力（级）', '平均风力（级）'], left: '0' },
         xAxis: {
           data: state.xAxisWind
         },
@@ -301,7 +386,6 @@ export default defineComponent({
             symbolSize: 6,
             symbol: 'circle',
             smooth: true,
-            // data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
             data: state.temWind,
             lineStyle: { color: '#fe9a8b' },
             itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
@@ -313,12 +397,27 @@ export default defineComponent({
             },
           },
           {
-            name: '当日风力（级）',
+            name: '预测风力（级）',
+            type: 'line',
+            symbolSize: 6,
+            symbol: 'circle',
+            smooth: true,
+            data: state.foreCastInfoWind,
+            lineStyle: { color: '#2b79ff' },
+            itemStyle: { color: '#2b79ff', borderColor: '#2b79ff' },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#2b79ff' },
+                { offset: 1, color: '#c5e3ed' },
+              ]),
+            },
+          },
+          {
+            name: '平均风力（级）',
             type: 'line',
             symbolSize: 6,
             symbol: 'circle',
             smooth: true,
-            // data: [0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0],
             data: state.averageTemWind,
             lineStyle: { color: '#9E87FF' },
             itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
@@ -349,6 +448,42 @@ export default defineComponent({
               },
             },
           },
+          {
+            name: '预测平均风力（级）',
+            type: 'line',
+            symbolSize: 6,
+            symbol: 'circle',
+            smooth: true,
+            data: state.foreCastAvgInfoWind,
+            lineStyle: { color: '#41b883' },
+            itemStyle: { color: '#41b883', borderColor: '#41b883' },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#41b883' },
+                { offset: 1, color: '#ddf2eaab' },
+              ]),
+            },
+            emphasis: {
+              itemStyle: {
+                color: {
+                  type: 'radial',
+                  x: 0.5,
+                  y: 0.5,
+                  r: 0.5,
+                  colorStops: [
+                    { offset: 0, color: '#9E87FF' },
+                    { offset: 0.4, color: '#9E87FF' },
+                    { offset: 0.5, color: '#fff' },
+                    { offset: 0.7, color: '#fff' },
+                    { offset: 0.8, color: '#fff' },
+                    { offset: 1, color: '#fff' },
+                  ],
+                },
+                borderColor: '#9E87FF',
+                borderWidth: 2,
+              },
+            },
+          },
         ],
       };
       (<any>global.homeChartTwo).setOption(option);