@ued_fpi/data-visual 1.2.15 → 1.2.20

package/dist/es/wgms/src/SevenDayKline/index.vue.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs, openBlock, createElementBlock, createElementVNode, createVNode } from 'vue';
+import { defineComponent, ref, onMounted, watch, openBlock, createElementBlock, createElementVNode, createVNode, nextTick } from 'vue';
 import dayjs from 'dayjs';
 import { maxBy, minBy } from 'lodash-es';
 import _sfc_main$1 from '../../utils/echarts/BaseECharts.vue.mjs';
@@ -8,42 +8,30 @@ const _hoisted_1 = { class: "dv-wgms-seven-day-kline" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
-    beginTime: {
-      type: Number,
-      default: dayjs().startOf("year").valueOf()
-    },
-    endTime: {
-      type: Number,
-      default: dayjs().endOf("year").valueOf()
-    },
-    factor: {
-      type: Number,
-      default: 27
-    },
-    accessCode: {
-      type: String,
-      default: "GKA330100_2009"
-    },
-    timeType: {
-      type: String,
-      default: "day"
+    params: {
+      type: Object,
+      default: () => {
+        return {
+          accessCode: "3116008",
+          factor: 2,
+          factorFlag: false,
+          alarmTime: 1700028e6,
+          timeDiff: 7,
+          queryTimeType: "hour",
+          // 下面是因子
+          factorName: "总磷(以 P 计）",
+          factorCode: "w21003",
+          // 监测因子
+          factorUnit: "mg/L"
+        };
+      }
     },
-    factorFlag: {
+    isLazy: {
       type: Boolean,
       default: false
-    },
-    // 因子名称
-    factorName: {
-      type: String,
-      default: "总磷(以 P 计）"
-    },
-    // 因子单位
-    factorUnit: {
-      type: String,
-      default: "mg/L"
     }
   },
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const chartSevenDayLine = ref();
     const option = ref(void 0);
@@ -54,117 +42,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       month: "月",
       year: "年"
     };
-    const data = reactive({
-      title: "",
-      unit: "mg/L",
-      factorName: "总磷(以 P 计）",
-      params: {
-        accessCode: "JMSZSY0007",
-        factor: 27,
-        factorFlag: false,
-        beginTime: 16706016e5,
-        endTime: 1671206399999,
-        queryTimeType: "hour"
+    const getKlineDateParams = (alarmTime, timeDiff) => {
+      let startTime, endTime;
+      if (props.params?.queryTimeType === "hour" || props.params?.queryTimeType === "day") {
+        startTime = dayjs(alarmTime).add(-(timeDiff - 1), "days").startOf("day").format("x");
+        endTime = dayjs(alarmTime).add(1, "days").startOf("day").format("x");
+      } else if (props.params?.queryTimeType === "week") {
+        startTime = dayjs(alarmTime).add(-(timeDiff - 1), "week").startOf("week").format("x");
+        endTime = dayjs(alarmTime).add(1, "week").startOf("week").format("x");
+      } else if (props.params?.queryTimeType === "month") {
+        startTime = dayjs(alarmTime).add(-(timeDiff - 1), "month").startOf("month").format("x");
+        endTime = dayjs(alarmTime).add(1, "month").startOf("month").format("x");
+      } else if (props.params?.queryTimeType === "year") {
+        startTime = dayjs(alarmTime).add(-(timeDiff - 1), "year").startOf("year").format("x");
+        endTime = dayjs(alarmTime).add(1, "year").startOf("year").format("x");
       }
-    });
-    watch(() => [props.beginTime, props.endTime, props.factor, props.accessCode, props.timeType, props.factorFlag], () => {
-      initData();
-    });
-    onMounted(async () => {
-      await nextTick();
-      initData();
-    });
-    const initData = () => {
-      data.params = {
-        accessCode: props?.accessCode,
-        factor: props?.factor,
-        factorFlag: props?.factorFlag,
-        beginTime: props?.beginTime,
-        endTime: props?.endTime,
-        queryTimeType: props?.timeType
+      return {
+        startTime,
+        endTime
       };
-      data.factorName = props?.factorName;
-      data.unit = props?.factorUnit;
-      getData();
-    };
-    const getYearWeek = async (date) => {
-      const checkDate = new Date(date);
-      checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
-      const time = checkDate.getTime();
-      checkDate.setMonth(0);
-      checkDate.setDate(1);
-      const week = Math.floor(Math.round((time - checkDate) / 864e5) / 7) + 2;
-      return week;
     };
     const getData = async () => {
-      const res = await getKLine(data.params);
-      const isHasData = res && res.data && res.data.length > 0;
-      const mockData = [
-        {
-          time: "1671120000000",
-          value: "0.21",
-          quality: 2,
-          maxValue: "0.25",
-          minValue: "0.2",
-          firstValue: "0.2",
-          lastValue: "0.25"
-        },
-        {
-          time: "1671206400000",
-          value: "0.23",
-          quality: 2,
-          maxValue: "0.28",
-          minValue: "0.19",
-          firstValue: "0.28",
-          lastValue: "0.19"
-        },
-        {
-          time: "1671292800000",
-          value: "0.18",
-          quality: 2,
-          maxValue: "0.19",
-          minValue: "0.17",
-          firstValue: "0.19",
-          lastValue: "0.18"
-        },
-        {
-          time: "1671379200000",
-          value: "0.18",
-          quality: 2,
-          maxValue: "0.19",
-          minValue: "0.18",
-          firstValue: "0.18",
-          lastValue: "0.19"
-        },
-        {
-          time: "1671465600000",
-          value: "0.18",
-          quality: 2,
-          maxValue: "0.2",
-          minValue: "0.16",
-          firstValue: "0.18",
-          lastValue: "0.16"
-        },
-        {
-          time: "1671552000000",
-          value: "0.07",
-          quality: 1,
-          maxValue: "0.17",
-          minValue: "0.02",
-          firstValue: "0.17",
-          lastValue: "0.02"
-        },
-        {
-          time: "1671638400000",
-          value: "0.51",
-          quality: 3,
-          maxValue: "0.02",
-          minValue: "0.02",
-          firstValue: "0.02",
-          lastValue: "0.02"
-        }
-      ];
-      const resData = isHasData ? res?.data : mockData;
+      const { startTime, endTime } = getKlineDateParams(props.params?.alarmTime, props.params?.timeDiff);
+      const params = {
+        accessCode: props.params?.accessCode,
+        factor: props.params?.factor,
+        factorFlag: props.params?.factorFlag,
+        beginTime: startTime,
+        endTime,
+        queryTimeType: props.params?.queryTimeType === "hour" ? "day" : props.params.queryTimeType
+      };
+      const res = await getKLine(params);
+      const resData = res?.data || [];
       const klineData = {
         xAxis: [],
         kData: [],
@@ -172,38 +81,45 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         quality: []
       };
       resData.forEach((item) => {
-        item.maxValue = Number(item.maxValue);
-        item.minValue = Number(item.minValue);
-        if (props.timeType === "week")
-          klineData.xAxis.push(`${getYearWeek(+item.time)}周`);
-        else
-          klineData.xAxis.push(dayjs.unix(Number(item.time) / 1e3).format("MM-DD"));
-        klineData.kData.push([item.minValue, item.firstValue, item.value, item.lastValue, item.maxValue]);
-        klineData.values.push(item.value);
-        klineData.quality.push(item.quality);
+        item.maxValue = Number(item.max);
+        item.minValue = Number(item.min);
+        if (props.params?.queryTimeType === "hour" || props.params?.queryTimeType === "day") {
+          klineData.xAxis.push(dayjs(item.time).format("MM-DD"));
+        } else {
+          klineData.xAxis.push(item.time);
+        }
+        klineData.kData.push([
+          item.min,
+          item.first,
+          item.avg,
+          item.last,
+          item.max
+        ]);
+        klineData.values.push(item.avg);
+        klineData.quality.push(item.grade);
       });
       const maxObj = maxBy(resData, "maxValue");
       const minObj = minBy(resData, "minValue");
       nextTick();
-      option.value = await dayKLine(klineData, maxObj?.maxValue, minObj?.minValue, data.factorName, data.unit, timeStrList[props.timeType]);
+      option.value = await dayKLine(klineData, maxObj?.maxValue, minObj?.minValue, props.params?.factorName, props?.params?.factorUnit, timeStrList[props.params?.queryTimeType]);
     };
-    const dayKLine = async (data2, min, max, factorName, unit, timeStr) => {
-      const { xAxis, kData, values, quality } = data2;
+    const dayKLine = async (data, min, max, factorName, unit, timeStr) => {
+      const { xAxis, kData, values, quality } = data;
       const res = await waterSurfaceListAll({});
       const gradeList = res?.entries ?? [];
       const option2 = {
         grid: [
           {
-            top: 45,
-            left: 45,
-            right: 22,
-            height: 60
+            left: 40,
+            right: 20,
+            top: 40,
+            height: xAxis.length > 7 ? 70 : 80
           },
           {
-            left: 45,
-            right: 32,
-            top: 140,
-            height: "20%"
+            left: 40,
+            right: 20,
+            top: xAxis.length > 7 ? "68%" : "72%",
+            height: "25%"
           }
         ],
         tooltip: {
@@ -336,23 +252,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   return currData.length ? currData[0].color : "#6D7278";
               }
             },
-            // 等级数字转等级文字信息
-            // data: values
-            data: values.map((item, index) => {
-              const colorList = ["#03A9F4", "#1976D2", "#85C941", "#D9CC4C", "#EE8E00", "#E12234"];
-              return {
-                value: item,
-                itemStyle: {
-                  color: colorList[index]
-                }
-              };
-            })
+            data: values
           }
         ]
       };
       return option2;
     };
-    toRefs(data);
+    onMounted(() => {
+      !props.isLazy && getData();
+    });
+    watch([() => props.params, () => props.isLazy], () => {
+      !props.isLazy && getData();
+    }, { deep: true });
+    __expose({
+      reload: getData
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", {

package/dist/es/wgms/src/SewageOutletsOnlineMonitor/index.vue.mjs

@@ -1,4 +1,5 @@
 import { defineComponent, reactive, ref, onMounted, watch, nextTick, toRefs, openBlock, createElementBlock, createElementVNode, Fragment, renderList, unref, normalizeClass, toDisplayString, normalizeStyle } from 'vue';
+import { sumBy } from 'lodash-es';
 import 'echarts-gl';
 import echarts from '../../utils/echarts/index.mjs';
 import { getPie3D } from '../../utils/echarts/3dChartOptions.mjs';
@@ -29,6 +30,57 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     colorArr: { default: () => {
       return ["#F84439", "#FDBD00", "#15F3A3", "#00DEFF", "#1976D2", "#F2BE32", "#00E87E"];
     } },
+    data: { default: () => {
+      return {
+        total: 80,
+        0: [
+          {
+            name: "雨水排口",
+            value: 10,
+            rate: 20,
+            itemStyle: { color: "#F84439" }
+          },
+          {
+            name: "工业排污口",
+            value: 20,
+            rate: 40,
+            itemStyle: { color: "#FAAD14" }
+          },
+          {
+            name: "城镇污水处理厂排污口",
+            value: 10,
+            rate: 20,
+            itemStyle: { color: "#00E87E" }
+          },
+          {
+            name: "其他排口",
+            value: 10,
+            rate: 20,
+            itemStyle: { color: "#00DEFF" }
+          }
+        ],
+        1: [
+          {
+            name: "入海排口",
+            value: 30,
+            rate: 50,
+            itemStyle: { color: "#F84439" }
+          },
+          {
+            name: "工业排污口",
+            value: 20,
+            rate: 33.33,
+            itemStyle: { color: "#FAAD14" }
+          },
+          {
+            name: "其他排口",
+            value: 10,
+            rate: 16.67,
+            itemStyle: { color: "#00DEFF" }
+          }
+        ]
+      };
+    } },
     isLazy: { type: Boolean, default: false }
   },
   setup(__props) {
@@ -46,10 +98,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onMounted(async () => {
       !props.isLazy && getResData();
     });
-    watch([() => props.params, () => props.isLazy], () => {
+    watch([() => props.params, () => props.data, () => props.isLazy], () => {
       !props.isLazy && getResData();
     }, { deep: true });
     const getResData = async () => {
+      if (props.data && Reflect.ownKeys(props.data).length) {
+        wgmsData.optionData = props.data[wgmsData.activeIndex];
+        wgmsData.total = sumBy(wgmsData.optionData, (o) => {
+          return o.value;
+        });
+        await nextTick();
+        initChart();
+        return;
+      }
       const { data: res } = await getOutletsOnlineData({
         ...props.params,
         outletType: wgmsData.toggleList[wgmsData.activeIndex].value
@@ -57,10 +118,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (res) {
         wgmsData.total = res.total;
         if (res.outletOnlineDetailList && res.outletOnlineDetailList.length) {
-          wgmsData.optionData = res.outletOnlineDetailList.map((item) => {
+          wgmsData.optionData = res.outletOnlineDetailList.map((item, index) => {
             return {
               ...item,
-              value: item.onlineCount
+              rate: res.total ? (item.onlineCount / res.total * 100).toFixed(2) : 0,
+              value: item.onlineCount,
+              itemStyle: {
+                color: props.colorArr[index]
+              }
             };
           });
           await nextTick();
@@ -69,7 +134,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const initChart = () => {
-      const options = getPie3D(wgmsData.optionData, props.colorArr, 0.6, 185, 38, 15, 0.5);
+      const pieData = wgmsData.optionData.map((item) => {
+        return {
+          name: item.name,
+          value: item.rate === "--" ? 0 : Number(item.rate),
+          itemStyle: item.itemStyle
+        };
+      });
+      const options = getPie3D(pieData, 0.6, 185, 38, 16, 1);
       echarts.draw(pieChart.value, options);
     };
     const changeList = (index) => {
@@ -114,14 +186,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 createElementVNode("div", _hoisted_9, [
                   createElementVNode("div", {
                     class: "circle",
-                    style: normalizeStyle({ background: _ctx.colorArr[index] })
+                    style: normalizeStyle({ background: item.itemStyle.color })
                   }, null, 4),
                   createElementVNode("div", _hoisted_10, toDisplayString(item.name), 1)
                 ]),
                 createElementVNode("div", _hoisted_11, [
                   createElementVNode("div", _hoisted_12, toDisplayString(item.value), 1),
                   _hoisted_13,
-                  createElementVNode("div", _hoisted_14, toDisplayString((item.value / unref(total) * 100).toFixed(2)) + "% ", 1)
+                  createElementVNode("div", _hoisted_14, toDisplayString(item.rate) + "% ", 1)
                 ])
               ]);
             }), 128))

package/dist/es/wgms/src/SurroundingPollution/api/index.mjs

@@ -8,6 +8,13 @@ const queryFactorGroup = (params) => {
   });
 };
 const pomsAlarm = (params) => {
+  return requestControl({
+    url: "/api/v3.0/analyse/alarm-stat",
+    server: "wgmsSewageDataServer",
+    params
+  });
+};
+const pomsAnalysis = (params) => {
   return requestControl({
     url: "/api/v3.0/analyse/poms-analyse",
     server: "wgmsSewageDataServer",
@@ -23,5 +30,12 @@ const countEventStatusByTimePoint = (data, option = {}) => {
     ...option
   });
 };
+const overflowPort = (params) => {
+  return requestControl({
+    url: "/api/v3.0/analyse/result/poms",
+    server: "wgmsSewageDataServer",
+    params
+  });
+};
 
-export { countEventStatusByTimePoint, pomsAlarm, queryFactorGroup };
+export { countEventStatusByTimePoint, overflowPort, pomsAlarm, pomsAnalysis, queryFactorGroup };