@ued_fpi/data-visual 1.2.14 → 1.2.19

package/dist/lib/wgms/utils/echarts/echartsOptions.js

@@ -37,10 +37,9 @@ const pieChartOptions = (seriesData, colorList, total) => {
           textStyle: {
             rich: {
               total: {
-                fontWeight: "500",
-                lineHeight: "26",
-                fontSize: 16,
-                color: "var(--dv-color-text-primary)"
+                fontSize: 24,
+                color: "var(--dv-color-text-primary)",
+                fontFamily: "var(--dv-font-family-number)"
               }
             }
           },
@@ -88,6 +87,306 @@ const pollutionSourcePieOptions = (pieData) => {
     ]
   };
 };
+const getDizhouQualityAnalysisOption = (xData, goodList, badList) => {
+  const option = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: "shadow"
+        // 默认为直线，可选为：'line' | 'shadow'
+      }
+    },
+    color: ["var(--dv-color-success)", "var(--dv-color-danger)"],
+    grid: {
+      top: "40",
+      left: "35",
+      bottom: "45",
+      right: "15"
+    },
+    legend: {
+      show: true,
+      bottom: 0,
+      left: "center",
+      icon: "circle",
+      itemWidth: 10,
+      // itemHeight: 14,
+      textStyle: {
+        fontSize: "var(--dv-text-body2)",
+        color: "var(--dv-color-text-primary)"
+      }
+    },
+    xAxis: [
+      {
+        type: "category",
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          color: "var(--dv-color-text-primary)",
+          fontSize: "12px"
+        },
+        axisLine: {
+          lineStyle: {
+            color: "var(--dv-color-border-light)"
+          }
+        },
+        data: xData
+      }
+    ],
+    yAxis: [
+      {
+        name: "%",
+        nameTextStyle: {
+          color: "var(--dv-color-text-secondary)",
+          fontFamily: "var(--dv-font-family-number)",
+          fontSize: "12px",
+          padding: [0, 20, 0, 0]
+        },
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          // 值分割线
+          show: true,
+          lineStyle: {
+            color: "var(--dv-color-border-light)"
+          }
+        },
+        axisLabel: {
+          color: "var(--dv-color-text-secondary)",
+          fontSize: "12px",
+          fontFamily: "var(--dv-font-family-number)"
+        }
+      }
+    ],
+    series: [
+      {
+        name: "优良比例",
+        type: "bar",
+        barWidth: 15,
+        data: goodList,
+        itemStyle: {
+          color: "var(--dv-color-success)"
+        }
+      },
+      {
+        name: "劣V比例",
+        type: "bar",
+        barWidth: 15,
+        itemStyle: {
+          color: "var(--dv-color-danger)"
+        },
+        data: badList
+      }
+    ]
+  };
+  return option;
+};
+const comprehensiveWaterQualityOption = (xData, yData) => {
+  const option = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: "shadow"
+        // 默认为直线，可选为：'line' | 'shadow'
+      },
+      formatter(params) {
+        const str = `<div><div>${params[0].seriesName}</div><div
+            style='display:
+            flex;height:20px;align-items:center;'>${params[0].marker}
+            <div>${params[0].axisValue}：${params[0].data}</div></div>`;
+        return str;
+      }
+    },
+    color: ["var(--dv-color-index)"],
+    grid: {
+      top: "8",
+      left: "20",
+      bottom: "30",
+      right: "10"
+    },
+    xAxis: [
+      {
+        type: "category",
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          color: "var(--dv-color-text-primary)",
+          fontSize: "var(--dv-text-number2)",
+          fontFamily: "var(--dv-font-family-number)"
+        },
+        axisLine: {
+          lineStyle: {
+            color: "var(--dv-color-border-light)"
+          }
+        },
+        data: xData
+      }
+    ],
+    yAxis: [
+      {
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          // x轴竖线
+          lineStyle: {
+            color: "var(--dv-color-border-light)"
+          }
+        },
+        axisLabel: {
+          color: "var(--dv-color-text-secondary)",
+          fontFamily: "var(--dv-font-family-number)",
+          fontSize: "var(--dv-text-number2)"
+        }
+      }
+    ],
+    series: [
+      {
+        name: "水质综合指数变化",
+        type: "line",
+        data: yData,
+        // symbolSize: 'none', // 设定拐点的大小
+        lineStyle: {
+          // 设置折线颜色
+          color: "var(--dv-color-index)"
+        }
+      }
+    ]
+  };
+  return option;
+};
+const manualMonitoringOption = (barXValue, data) => {
+  const chartOption = {
+    grid: {
+      top: 20,
+      left: 35,
+      bottom: 25,
+      right: 20
+    },
+    tooltip: {
+      trigger: "axis",
+      textStyle: {
+        fontSize: 14
+      },
+      formatter: (params) => {
+        const curParams = params[0];
+        return `${curParams.seriesName} : <br>${barXValue[curParams.dataIndex]}: ${curParams.value || "--"}μg/L`;
+      }
+    },
+    xAxis: {
+      type: "category",
+      axisTick: {
+        show: false
+      },
+      data: barXValue,
+      axisLabel: {
+        color: "var(--dv-color-text-primary)",
+        fontSize: "var(--dv-text-number2)",
+        fontFamily: "var(--dv-font-family-number)"
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "var(--dv-color-border-light)"
+        }
+      }
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: {
+        show: true,
+        color: "var(--dv-color-text-secondary)",
+        fontSize: "var(--dv-text-number2)",
+        fontFamily: "var(--dv-font-family-number)"
+      },
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "var(--dv-color-border-light)"
+        }
+      },
+      splitArea: {
+        show: false
+      },
+      splitNumber: 3
+    },
+    series: [
+      {
+        name: "叶绿素a",
+        type: "line",
+        symbol: "circle",
+        symbolSize: 4,
+        showSymbol: true,
+        connectNulls: true,
+        data,
+        lineStyle: {
+          normal: {
+            color: "#0AAEFF",
+            // 折线的颜色
+            width: "2"
+            // 折线粗细
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: "#fff",
+            borderColor: "#0AAEFF",
+            borderWidth: "2"
+          }
+        }
+      }
+    ]
+  };
+  if (barXValue.length > 30) {
+    chartOption.dataZoom = [
+      {
+        type: "slider",
+        top: "78%",
+        height: 15,
+        start: 0,
+        end: 100,
+        // end: Math.ceil(30 / barXvalue.length * 100),
+        borderColor: "#3ee1f3",
+        backgroundColor: "#00262d",
+        handleStyle: {
+          color: "#00cbd1"
+        },
+        dataBackground: {
+          lineStyle: {
+            color: "#3ee1f3"
+          },
+          areaStyle: {
+            color: "#00363f"
+          }
+        },
+        textStyle: {
+          color: "var(--dv-color-text-secondary)",
+          fontFamily: "var(--dv-font-family-number)"
+        }
+      }
+    ];
+  }
+  return chartOption;
+};
 
+exports.comprehensiveWaterQualityOption = comprehensiveWaterQualityOption;
+exports.getDizhouQualityAnalysisOption = getDizhouQualityAnalysisOption;
+exports.manualMonitoringOption = manualMonitoringOption;
 exports.pieChartOptions = pieChartOptions;
 exports.pollutionSourcePieOptions = pollutionSourcePieOptions;

package/dist/lib/wgms/utils/echarts/index.js

@@ -38,7 +38,9 @@ echarts__namespace.use([
   charts.PieChart,
   charts.BoxplotChart,
   renderers.CanvasRenderer,
-  features.UniversalTransition
+  features.UniversalTransition,
+  charts.RadarChart,
+  components.PolarComponent
 ]);
 const draw = (dom, option) => {
   const chart = echarts__namespace.init(dom);

package/dist/lib/wgms/utils/tools.d.ts

@@ -1,4 +1,5 @@
 import type { Plugin } from 'vue';
+import type { ALGAE_TOPICS_REQUEST } from '../src/AlgaeTopicsImportantWater/api/types';
 /**
  * @desc 函数
  * @param msg 显示文字
@@ -124,4 +125,21 @@ export declare const getCssValue: (key: string) => string;
  * @return {*} ' "shzhjt"' ==> shzhjt
  */
 export declare const getFontFamily: (key: string) => string;
+/**
+ * 结束时间戳（报警时间+1个周期）
+ * @param type
+ */
+export declare const getDateEndTime: (timeType: string, date: number) => string | undefined;
+export declare const getAlgaeTime: (val: ALGAE_TOPICS_REQUEST.TimeStore) => {
+    beginTime: number;
+    endTime: number;
+    beginTimeNewRange: number;
+    endTimeNewRange: number;
+    isCurrentPeriod: boolean;
+    currentTime: number;
+    beginWarningTime: number;
+    endWarningTime: number;
+    beginDayWarningTime: number;
+    endDayWarningTime: number;
+};
 export {};

package/dist/lib/wgms/utils/tools.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const elementPlus = require('element-plus');
+const dayjs = require('dayjs');
 require('vue');
 
 const messageBox = (msg, type) => {
@@ -19,6 +20,53 @@ const install = (comp, named) => {
   };
   return comp;
 };
+const getDateEndTime = (timeType, date) => {
+  let resDate;
+  if (timeType === "hour") {
+    resDate = dayjs(date).add(1, "hours").startOf("hour").format("x");
+  } else if (timeType === "day") {
+    resDate = dayjs(date).add(1, "days").startOf("day").format("x");
+  } else if (timeType === "week") {
+    resDate = dayjs(date).add(1, "week").startOf("week").format("x");
+  } else if (timeType === "month") {
+    resDate = dayjs(date).add(1, "month").startOf("day").format("x");
+  } else if (timeType === "year") {
+    resDate = dayjs(date).add(1, "year").startOf("year").format("x");
+  }
+  return resDate;
+};
+const getAlgaeTime = (val) => {
+  const { currentType, upToDate, currentTime, periodBeginTime, periodEndTime } = val;
+  const isCurrentPeriod = currentType !== "dailyControl";
+  const beginTime = isCurrentPeriod ? dayjs(currentTime).startOf("day").valueOf() : !upToDate ? dayjs().startOf("day").valueOf() : dayjs().add(-6, "months").startOf("month").valueOf();
+  const endTime = isCurrentPeriod ? dayjs(currentTime).endOf("day").valueOf() : !upToDate ? dayjs().endOf("day").valueOf() : dayjs().endOf("day").valueOf();
+  const beginWarningTime = currentTime ? periodBeginTime : dayjs().startOf("year").valueOf();
+  const endWarningTime = currentTime ? periodEndTime : dayjs().endOf("year").valueOf();
+  const beginDayWarningTime = currentTime ? dayjs(currentTime).startOf("day").valueOf() : dayjs().startOf("day").valueOf();
+  const endDayWarningTime = currentTime ? dayjs(currentTime).endOf("day").valueOf() : dayjs().endOf("day").valueOf();
+  const beginTimeNewRange = dayjs(currentTime || void 0).add(-6, "months").startOf("month").valueOf();
+  const endTimeNewRange = dayjs(currentTime || void 0).endOf("day").valueOf();
+  return {
+    beginTime,
+    endTime,
+    beginTimeNewRange,
+    // 入境断面藻情现状 开始
+    endTimeNewRange,
+    // 入境断面藻情现状 结束
+    isCurrentPeriod,
+    currentTime,
+    beginWarningTime,
+    // 预警周期
+    endWarningTime,
+    // 预警周期时间
+    beginDayWarningTime,
+    // 预警当天日数据 没选择历史就显示今日
+    endDayWarningTime
+    // 预警当天日数据 没选择历史就显示今日
+  };
+};
 
+exports.getAlgaeTime = getAlgaeTime;
+exports.getDateEndTime = getDateEndTime;
 exports.install = install;
 exports.messageBox = messageBox;

package/dist/style/base.css

@@ -30,7 +30,7 @@ html {
 
     /* fill */
     --dv-color-fill-base: #f0f2f5;
-    --dv-color-fill-blanket: #fff;
+    --dv-color-fill-blank: #fff;
     --dv-color-fill-dark: #ebedf0;
     --dv-color-fill-darker: #e6e8eb;
     --dv-color-fill-extra-light: #fafcff;
@@ -142,7 +142,7 @@ html.dark {
     --dv-color-danger-80: #c6362e;
     --dv-color-danger-110: #d15e58;
     --dv-color-fill-base: rgba(68, 136, 208, 0.1); /* 基础填充 */
-    --dv-color-fill-blankt: rgba(68, 136, 208, 0.3);
+    --dv-color-fill-blank: rgba(68, 136, 208, 0.1);
     --dv-color-fill-dark: rgba(68, 136, 208, 0.05);
     --dv-color-fill-darker: rgba(68, 136, 208, 0.05);
     --dv-color-fill-extra-light: rgba(68, 136, 208, 0.25);