feat: 问题修改

src/views/control/components/TheEchartPanel.vue

@@ -143,18 +143,16 @@ const handleSelectOptions = (selectOptionList) => {
 }
 
 const initWaterEchart = async () => {
-  
   const tempArr = [];
-  
   const tempResult = selectValue.value.map(key => {
+    if (key == 12 || key == 13) return null;
     const data = echartDataSource.value[key] || [];
-
     tempArr.push(data);
     return ({
       name: selectEnum.get(key),
       data
     });
-  });
+  }).filter(Boolean);
 
   const xAxis = tempArr.flat(Infinity).reduce((acc, curr) => {
     if (!acc.some(item => item.time === curr.time)) {
@@ -422,7 +420,7 @@ const initWaterEchartData = async () => {
   const timeBegin = tBegin ? dayjs(tBegin).format('YYYY-MM-DD') : null;
   const timeEnd = tEnd ? dayjs(tEnd).format('YYYY-MM-DD') : null;
   const { data } = await controlApi.getAllEchartData({ timeBegin, timeEnd });
-  
+
   show.value = false;
   echartDataSource.value = data;
   
@@ -440,6 +438,7 @@ const intiCoefficientEchartData = async () => {
     time: dayjs(item.createTime).format('YYYY/MM/DD HH'),
     val: item[selectValue.value]
   }));
+  
   show.value = false;
   echart.setOption(getEchartOptions(d), true);
 }
@@ -486,7 +485,10 @@ onMounted(async () => {
   selectOptions.value = echartOptions;
 
   echart = echarts.init(document.querySelector('#echartRef'), 'light');
-  await initWaterEchartData();
+  
+  setTimeout(async () => {
+    await initWaterEchartData();
+  }, 1000)
 
   window.addEventListener("resize", windowResize);
 

src/views/xlht/CalculateView.vue

@@ -73,7 +73,7 @@ const onDatePickerClear = () => {
 }
 
 const initTableData = async () => {
-  const { rows, total } = await controlApi.getPredictPageList({ pageNum: pageNum.value, pageSize: pageSize.value, ...dateRange.value });
+  const { rows, total } = await controlApi.getPredictPageList({ pageNum: pageNum.value, pageSize: pageSize.value, ...dateRange.value, reqType: radioValue.value });
   tableData.value = rows;
   pageCount.value = total;
 }
@@ -135,6 +135,7 @@ const initEchartData = async () => {
 const handleRadioValue = (val) => {
   radioValue.value = val;
   createEchart();
+  initTableData();
 }
 
 const handlePageChange = (page) => {
@@ -196,16 +197,7 @@ onUnmounted(() => {
                       {{ item.label }}
                     </n-radio>
                   </NRadioGroup>
-                  <!-- <ul>
-                    <li>
-                      <n-radio
-                        value="Definitely Maybe"
-                        name="basic-demo"
-                      >
-                        Definitely Maybe
-                      </n-radio>
-                    </li>
-                  </ul> -->
+                  
                   <div id="echart" class="h-full w-full" ref="echartRef"></div>
                 </div>
 

src/views/xlht/config.js

@@ -166,8 +166,8 @@ export const getEchartLineOptions = ({
     grid: {
       top: 80,
       bottom: 60,
-      left: 40,
-      right: 30,
+      left: 50,
+      right: 50,
     },
 
     ...dataZoom,
@@ -266,12 +266,7 @@ export const getEchartLineOptions = ({
   return option;
 };
 
-export const getEchartOptions = ({
-  xAxisData,
-  seriesData,
-  isDataZoom,
-  legend,
-}) => {
+export const getEchartOptions = ({ xAxisData, seriesData, isDataZoom }) => {
   const colorList = [
     "#0055f9",
     "#00AB84",
@@ -287,16 +282,26 @@ export const getEchartOptions = ({
   ];
 
   const series = seriesData.map((item, index) => {
+    const d = item.data.map((val, i) => {
+      if (i >= item.data.length - 3 && item.name === "预测值") {
+        return {
+          value: val,
+          symbol: "circle",
+          symbolSize: 8,
+        };
+      }
+
+      return { value: val, symbol: "none" };
+    });
     return {
       name: item.name,
       type: "line",
-      smooth: true,
-      showSymbol: false,
+      data: d,
+      symbol: 'none',
       itemStyle: {
         opacity: 0.8,
         color: colorList[index],
       },
-      data: item.data,
     };
   });
 
@@ -317,7 +322,7 @@ export const getEchartOptions = ({
       }
     : {};
 
-  const option = {
+  let option = {
     grid: {
       top: 40,
       bottom: 60,
@@ -330,11 +335,9 @@ export const getEchartOptions = ({
     legend: {
       x: "right",
       y: "top",
+      icon: "circle",
       show: true,
-      // left: '94%',
-      // top: '16px',
       itemWidth: 6,
-      // itemGap: 20,
       textStyle: {
         color: "#556677",
       },
@@ -344,6 +347,7 @@ export const getEchartOptions = ({
       trigger: "axis",
       appendToBody: true,
     },
+
     title: {
       show: !xAxisData.length,
       text: "暂无数据",
@@ -354,81 +358,49 @@ export const getEchartOptions = ({
         fontWeight: "normal",
       },
     },
-    // legend: [
-    //   {
-    //     show: !!xAxisData.length,
-    //     data: legend[0],
-    //     top: 10,
-    //     left: 10,
-    //     icon: "rect",
-    //     itemWidth: 10,
-    //     itemHeight: 10,
-    //     textStyle: {
-    //       color: "rgba(0,0,0,0.65)",
-    //     },
-    //   },
-    //   {
-    //     show: !!xAxisData.length,
-    //     data: legend[1],
-    //     top: 35,
-    //     left: 10,
-    //     icon: "rect",
-    //     itemWidth: 10,
-    //     itemHeight: 10,
-    //     icon: "rect",
-    //     itemWidth: 10,
-    //     itemHeight: 10,
-    //     textStyle: {
-    //       color: "rgba(0,0,0,0.65)",
-    //     },
-    //   },
-    // ],
-    xAxis: [
-      {
-        type: "category",
-        data: xAxisData || [],
-        boundaryGap: false,
-        axisTick: {
-          show: false,
-        },
-        axisLine: {
-          lineStyle: {
-            color: "#DAE0E1",
-          },
-        },
-        axisLabel: {
-          align: "center",
-          color: "#828282",
-          margin: 10,
-        },
+    xAxis: {
+      type: "category",
+      data: xAxisData || [],
+      boundaryGap: false,
+      axisTick: {
+        show: false,
       },
-    ],
-    yAxis: [
-      {
-        scale: false,
-        minInterval: 1,
-        backgroundColor: "#FFFFFF",
-        splitLine: {
-          lineStyle: {
-            color: ["#DAE0E1"],
-            shadowColor: "#DAE0E1",
-            shadowBlur: 1,
-            opacity: 1,
-            width: 1,
-            type: "dashed",
-          },
+      axisLine: {
+        lineStyle: {
+          color: "#DAE0E1",
         },
-        axisLine: {
-          show: false,
-        },
-        axisLabel: {
-          align: "center",
-          color: "#828282",
-          margin: 20,
+      },
+      axisLabel: {
+        align: "center",
+        color: "#828282",
+        margin: 10,
+      },
+    },
+    yAxis: {
+      scale: false,
+      // minInterval: 1,
+      backgroundColor: "#FFFFFF",
+      splitLine: {
+        lineStyle: {
+          color: ["#DAE0E1"],
+          shadowColor: "#DAE0E1",
+          shadowBlur: 1,
+          opacity: 1,
+          width: 1,
+          type: "dashed",
         },
       },
-    ],
-    series,
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        align: "center",
+        color: "#828282",
+        margin: 20,
+      },
+    },
+    series
   };
+
   return option;
 };