@ued_fpi/data-visual 1.1.3 → 1.1.5

package/dist/es/wgms/src/NPTrendChange/index.vue2.mjs

@@ -1,193 +1,3 @@
-import { defineComponent, toRefs, watch, nextTick, openBlock, createElementBlock, createElementVNode } from 'vue';
-import echarts from '../../utils/echarts/index.mjs';
-import { getFactorGroupList } from '../../api/FactorTrendComparison/index.mjs';
-import { getNPTrendChange } from '../../api/NPTrendChange/index.mjs';
+/* unplugin-vue-components disabled */const index_vue_vue_type_style_index_0_lang = '';
 
-const _hoisted_1 = { class: "n-p-trend-change" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "index",
-  props: {
-    isHandle: {
-      default: true,
-      type: Boolean
-    },
-    // 是否是手工数据
-    siteCode: {
-      default: "",
-      // 23239
-      type: String
-    },
-    beginTime: {
-      type: String,
-      required: true
-      // 1660752000000
-    },
-    endTime: {
-      type: String,
-      required: true
-      // 1663344000000
-    },
-    data: {
-      type: Array,
-      default: () => []
-    }
-    // 传入数据
-  },
-  setup(__props) {
-    const props = __props;
-    const state = {
-      factorMap: [],
-      seriesData: [],
-      chartRef: null
-      // 图表实例
-    };
-    const { chartRef } = toRefs(state);
-    watch([() => props.isHandle, () => props.siteCode, () => props.beginTime, () => props.endTime, () => props.data], async () => {
-      if (props.data.length) {
-        await nextTick(() => {
-          initChart();
-        });
-        return;
-      }
-      const groupCode = props.isHandle ? "algae" : "algaeAutomatic";
-      const list = await getFactorGroupList({ code: groupCode });
-      state.factorMap = list[0]?.factors || [];
-      state.factorMap.forEach((item) => {
-        const obj = {
-          name: item.factorIndexName,
-          type: "line",
-          symbolSize: 0,
-          yAxisIndex: item.id === "75" ? 1 : item.id === "23" ? 2 : 0,
-          data: []
-        };
-        state.seriesData.push(obj);
-      });
-      await nextTick(() => {
-        initChart();
-      });
-    }, { immediate: true });
-    async function initChart() {
-      const params = {
-        startTime: props.beginTime,
-        endTime: props.endTime,
-        siteCode: props.siteCode,
-        timeType: props.isHandle ? "day" : ""
-      };
-      const res = await getNPTrendChange(params);
-      console.log(res, "res");
-      const timeList = res?.data?.timeList ?? [];
-      const preList = res?.data?.preList ?? [];
-      const xData = timeList.map((item) => item && item.substr(5));
-      const NPList = preList.map((item) => item && item * 100);
-      const chart = echarts.init(chartRef.value);
-      const options = getChartOptions(xData, NPList, echarts);
-      chart.setOption(options);
-    }
-    const getChartOptions = (xData, data, echarts2) => {
-      return {
-        title: {
-          show: true,
-          text: "N/P（100%）",
-          textAlign: "left",
-          left: 10,
-          top: 14,
-          textStyle: {
-            color: "rgba(255,255,255,0.6)",
-            fontSize: 14,
-            fontFamily: "TRENDS"
-          }
-        },
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "line"
-            // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        grid: {
-          top: 50,
-          left: 10,
-          right: "1%",
-          bottom: 10,
-          containLabel: true
-        },
-        xAxis: [
-          {
-            type: "category",
-            data: xData,
-            axisLine: {
-              show: false
-            },
-            axisLabel: {
-              textStyle: {
-                fontFamily: "TRENDS",
-                fontSize: "16",
-                color: "rgba(255,255,255,0.6)"
-              }
-            },
-            axisTick: {
-              show: false,
-              interval: 24
-            }
-          }
-        ],
-        yAxis: [
-          {
-            type: "value",
-            name: "",
-            axisLabel: {
-              textStyle: {
-                fontFamily: "TRENDS",
-                fontSize: 16,
-                color: "rgba(255,255,255,0.6)"
-              }
-            },
-            axisLine: {
-              show: false
-            },
-            splitArea: {
-              show: true,
-              areaStyle: {
-                color: ["rgba(255, 255, 255, 0.05)", "transparent"]
-              }
-            },
-            splitLine: { show: false },
-            axisTick: { show: false }
-          }
-        ],
-        series: [
-          {
-            name: "氮磷比趋势变化",
-            type: "line",
-            symbolSize: 0,
-            smooth: true,
-            lineStyle: {
-              color: "#47E5E5"
-            },
-            areaStyle: {
-              normal: {
-                color: new echarts2.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: "#47E5E5 " },
-                  { offset: 1, color: "rgba(71,229,229,0.06)" }
-                ])
-              }
-            },
-            data
-          }
-        ]
-      };
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", {
-          id: "chart",
-          ref_key: "chartRef",
-          ref: chartRef,
-          class: "chart"
-        }, null, 512)
-      ]);
-    };
-  }
-});
-
-export { _sfc_main as default };
+export { index_vue_vue_type_style_index_0_lang as default };

package/dist/es/wgms/src/NPTrendChange/index.vue3.mjs

@@ -1,3 +1,6 @@
-/* unplugin-vue-components disabled */const index_vue_vue_type_style_index_0_scoped_0b0ae947_lang = '';
+import _sfc_main from './index.vue.mjs';
+import './index.vue2.mjs';
 
-export { index_vue_vue_type_style_index_0_scoped_0b0ae947_lang as default };
+
+
+export { _sfc_main as default };

package/dist/es/wgms/src/PollutionSourceControl/index.mjs

@@ -1,6 +1,7 @@
 import { install } from '../../utils/tools.mjs';
-import _PollutionSourceControl from './index.vue.mjs';
+import _sfc_main from './index.vue.mjs';
+import './index.vue2.mjs';
 
-const DvWgmsPollutionSourceControl = install(_PollutionSourceControl);
+const DvWgmsPollutionSourceControl = install(_sfc_main);
 
-export { DvWgmsPollutionSourceControl, _PollutionSourceControl as default };
+export { DvWgmsPollutionSourceControl, _sfc_main as default };

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

@@ -1,7 +1,346 @@
-import _sfc_main from './index.vue2.mjs';
-import './index.vue3.mjs';
-import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
+import { ElScrollbar } from 'element-plus/es';
+import 'element-plus/es/components/base/style/css';
+import 'element-plus/es/components/scrollbar/style/css';
+import { defineComponent, reactive, ref, watch, onMounted, toRefs, openBlock, createElementBlock, createElementVNode, createVNode, unref, withCtx, Fragment, renderList, toDisplayString, normalizeStyle } from 'vue';
+import { maxBy } from 'lodash-es';
+import dayjs from 'dayjs';
+import { pollutionSourcePieOptions } from '../../utils/echarts/echartsOptions.mjs';
+import echarts from '../../utils/echarts/index.mjs';
+import _sfc_main$2 from '../common/ProgressBar.vue.mjs';
+import '../common/ProgressBar.vue2.mjs';
+import _sfc_main$1 from '../common/select-panel.vue.mjs';
+import '../common/select-panel.vue2.mjs';
+import { pomsAlarm, portToRiver, pomsFactorAlarmHandle, pomsFactorAlarmAuto } from './api/index.mjs';
 
-const _PollutionSourceControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d0e026be"]]);
+const _hoisted_1 = { class: "dv-wgms-pollution-source" };
+const _hoisted_2 = { class: "dv-wgms-key-source" };
+const _hoisted_3 = { class: "dv-wgms-title-text" };
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "dv-wgms-text" }, " 重点源超标前三 ", -1);
+const _hoisted_5 = { class: "dv-wgms-select" };
+const _hoisted_6 = { class: "dv-wgms-top" };
+const _hoisted_7 = { class: "dv-wgms-left" };
+const _hoisted_8 = { class: "dv-wgms-right" };
+const _hoisted_9 = { class: "dv-wgms-bar" };
+const _hoisted_10 = { class: "dv-wgms-statistic-content" };
+const _hoisted_11 = { class: "dv-wgms-statistic-box" };
+const _hoisted_12 = /* @__PURE__ */ createElementVNode("div", { class: "dv-wgms-text" }, " 重点源超标统计 ", -1);
+const _hoisted_13 = { class: "dv-wgms-total-content" };
+const _hoisted_14 = /* @__PURE__ */ createElementVNode("div", { class: "dv-wgms-left" }, " 总数 ", -1);
+const _hoisted_15 = { class: "dv-wgms-right" };
+const _hoisted_16 = { class: "dv-wgms-num" };
+const _hoisted_17 = { class: "dv-wgms-legend" };
+const _hoisted_18 = { class: "dv-wgms-left" };
+const _hoisted_19 = { class: "dv-wgms-name" };
+const _hoisted_20 = { class: "dv-wgms-right" };
+const _hoisted_21 = /* @__PURE__ */ createElementVNode("span", null, "/", -1);
+const _hoisted_22 = { class: "dv-wgms-statistic-box" };
+const _hoisted_23 = /* @__PURE__ */ createElementVNode("div", { class: "dv-wgms-text" }, " 入河排污口 ", -1);
+const _hoisted_24 = { class: "dv-wgms-port-list" };
+const _hoisted_25 = { class: "dv-wgms-port-one" };
+const _hoisted_26 = /* @__PURE__ */ createElementVNode("div", { class: "dv-wgms-name" }, " 氮超标 ", -1);
+const _hoisted_27 = { class: "dv-wgms-value" };
+const _hoisted_28 = /* @__PURE__ */ createElementVNode("span", null, "个", -1);
+const _hoisted_29 = { class: "dv-wgms-port-one" };
+const _hoisted_30 = /* @__PURE__ */ createElementVNode("div", { class: "dv-wgms-name" }, " 磷超标 ", -1);
+const _hoisted_31 = { class: "dv-wgms-value" };
+const _hoisted_32 = /* @__PURE__ */ createElementVNode("span", null, "个", -1);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    factorList: {
+      type: Array,
+      default: () => []
+    },
+    beginTime: {
+      type: Number,
+      default: dayjs().startOf("year").valueOf()
+    },
+    endTime: {
+      type: Number,
+      default: dayjs().endOf("year").valueOf()
+    },
+    factorCodes: {
+      type: String,
+      default: ""
+    },
+    distance: {
+      type: Number,
+      default: 3e3
+    },
+    siteCode: {
+      type: [Number, String],
+      default: "zaoleishougong"
+    },
+    longitude: {
+      type: Number,
+      default: 120.011044
+    },
+    latitude: {
+      type: Number,
+      default: 30.284025
+    },
+    timeType: {
+      type: String,
+      default: "day"
+    },
+    isHandle: {
+      type: Boolean,
+      default: false
+    },
+    isLazy: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["factorChange"],
+  setup(__props, { expose: __expose, emit: emits }) {
+    const props = __props;
+    const data = reactive({
+      keySelectList: [],
+      companyList: [],
+      curSelectFactor: props.factorCodes,
+      defaultValue: props.factorCodes,
+      alarmMax: 0,
+      keySourseData: [
+        { factorIndexCode: "w21003", standardUnitName: null, factorName: "氮超标", rank: 1, total: 0, proportion: 0 },
+        { factorIndexCode: "w21011", standardUnitName: null, factorName: "磷超标", rank: 2, total: 0, proportion: 0 },
+        { factorIndexCode: "w01009", standardUnitName: null, factorName: "其他 ", rank: 3, total: 0, proportion: 0 }
+      ],
+      chartDetail: [],
+      colorList: ["#F84439", "#0062FF", "#2AC94F"],
+      nh3OverNum: 0,
+      tpOverNum: 0,
+      totalCount: 0
+    });
+    const statChart = ref(null);
+    watch([() => props.beginTime, () => props.endTime, () => props.distance, () => props.siteCode, () => props.factorCodes], () => {
+      data.defaultValue = props.factorCodes;
+      data.curSelectFactor = props.factorCodes;
+      if (props.isLazy)
+        return;
+      keyPollutionData();
+    });
+    watch([() => props.beginTime, () => props.endTime, () => props.distance, () => props.longitude, () => props.latitude], () => {
+      if (props.isLazy)
+        return;
+      getPortData();
+    });
+    watch([() => props.beginTime, () => props.endTime, () => props.distance, () => props.timeType, () => props.siteCode], () => {
+      if (props.isLazy)
+        return;
+      keyPollutionStatistic();
+    });
+    const keyFactorsCheck = (item, index) => {
+      if (data.curSelectFactor === item.code)
+        return;
+      data.curSelectFactor = item.code;
+      emits("factorChange", item.code);
+      keyPollutionData();
+    };
+    onMounted(() => {
+      if (props.isLazy)
+        return;
+      keyPollutionData();
+      getPortData();
+      keyPollutionStatistic();
+    });
+    const keyPollutionData = async () => {
+      data.keySelectList = [
+        { label: "所有因子", value: "" },
+        ...props.factorList
+      ];
+      const res = await pomsAlarm({
+        startTime: props.beginTime,
+        endTime: props.endTime,
+        distance: props.distance,
+        siteCode: props.siteCode,
+        factorCodes: data.curSelectFactor
+      });
+      if (res.data?.length) {
+        data.companyList = res.data.slice(0, 3);
+        data.companyList.forEach((item) => {
+          item.alarmNum = Number(item.alarmNum);
+        });
+        const maxObj = maxBy(data.companyList, "alarmNum");
+        data.alarmMax = maxObj.alarmNum;
+      } else {
+        data.companyList = [];
+      }
+    };
+    const getPortData = async () => {
+      const res = await portToRiver({
+        longitude: props.longitude,
+        latitude: props.latitude,
+        startTime: props.beginTime,
+        endTime: props.endTime,
+        distance: props.distance
+      });
+      data.nh3OverNum = res.data?.nh3OverNum ?? 0;
+      data.tpOverNum = res.data?.tpOverNum ?? 0;
+    };
+    const keyPollutionStatistic = async () => {
+      const res = await (props.isHandle ? pomsFactorAlarmHandle : pomsFactorAlarmAuto)({
+        timeType: props.timeType,
+        startTime: props.beginTime,
+        endTime: props.endTime,
+        distance: props.distance,
+        siteCode: props.siteCode
+      });
+      const total = res.data?.total ?? 0;
+      data.totalCount = total;
+      const dataList = res?.data?.data ?? [];
+      let N = 0;
+      let P = 0;
+      dataList.forEach((item) => {
+        if (item.w21003)
+          N = item.w21003;
+        else if (item.w21011)
+          P = item.w21011;
+      });
+      data.keySourseData.forEach((item) => {
+        if (item.factorIndexCode === "w21003") {
+          item.proportion = N;
+          item.total = total === 0 ? "" : (100 * N / total).toFixed(1);
+        } else if (item.factorIndexCode === "w21011") {
+          item.proportion = P;
+          item.total = total === 0 ? "" : (100 * P / total).toFixed(1);
+        } else {
+          item.proportion = total - P - N;
+          item.total = total === 0 ? "" : (100 * (total - P - N) / total).toFixed(1);
+        }
+      });
+      let otherCount = 0;
+      const colors = ["#35aded", "#ff9902", "#00fc83"];
+      const details = [];
+      data.keySourseData.forEach((item, index) => {
+        otherCount -= item.proportion;
+        details.push({
+          value: item.proportion,
+          rate: item.total,
+          name: item.factorName,
+          itemStyle: { color: colors[index] }
+        });
+      });
+      data.chartDetail = details;
+      const seriesData = [
+        ...data.chartDetail,
+        {
+          value: otherCount,
+          rate: otherCount,
+          name: "其他",
+          itemStyle: { color: "#00fc83" }
+        }
+      ];
+      const chart = echarts.init(statChart.value);
+      const lineOptions = pollutionSourcePieOptions(seriesData);
+      chart.setOption(lineOptions);
+    };
+    const { keySelectList, companyList, colorList, nh3OverNum, tpOverNum, totalCount, chartDetail, alarmMax, defaultValue } = toRefs(data);
+    __expose({
+      keyPollutionData,
+      getPortData,
+      keyPollutionStatistic
+    });
+    return (_ctx, _cache) => {
+      const _component_el_scrollbar = ElScrollbar;
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            _hoisted_4,
+            createElementVNode("div", _hoisted_5, [
+              createVNode(_sfc_main$1, {
+                option: unref(keySelectList),
+                "default-value": unref(defaultValue),
+                onChange: keyFactorsCheck
+              }, null, 8, ["option", "default-value"])
+            ])
+          ]),
+          createVNode(_component_el_scrollbar, { class: "dv-wgms-key-list" }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(companyList), (item, index) => {
+                return openBlock(), createElementBlock("div", {
+                  key: index,
+                  class: "dv-wgms-key-one"
+                }, [
+                  createElementVNode("div", _hoisted_6, [
+                    createElementVNode("div", _hoisted_7, [
+                      createElementVNode("span", null, toDisplayString(item.rank), 1),
+                      createElementVNode("span", null, toDisplayString(item.siteName), 1)
+                    ]),
+                    createElementVNode("div", _hoisted_8, toDisplayString(item.alarmNum), 1)
+                  ]),
+                  createElementVNode("div", _hoisted_9, [
+                    createVNode(_sfc_main$2, {
+                      "active-color": "linear-gradient(270deg, #F84439 0%, rgba(248,68,57,0.35) 100%)",
+                      "handle-style": { background: "#F84439" },
+                      percentage: item.alarmNum / unref(alarmMax) * 100
+                    }, null, 8, ["percentage"])
+                  ])
+                ]);
+              }), 128))
+            ]),
+            _: 1
+          })
+        ]),
+        createElementVNode("div", _hoisted_10, [
+          createElementVNode("div", _hoisted_11, [
+            _hoisted_12,
+            createElementVNode("div", _hoisted_13, [
+              _hoisted_14,
+              createElementVNode("div", _hoisted_15, [
+                createElementVNode("div", _hoisted_16, toDisplayString(unref(totalCount)), 1),
+                createElementVNode("div", {
+                  ref_key: "statChart",
+                  ref: statChart,
+                  class: "dv-wgms-chart"
+                }, null, 512)
+              ])
+            ]),
+            createElementVNode("div", _hoisted_17, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(chartDetail), (item, index) => {
+                return openBlock(), createElementBlock("div", {
+                  key: index,
+                  class: "dv-wgms-legend-one"
+                }, [
+                  createElementVNode("div", _hoisted_18, [
+                    createElementVNode("div", {
+                      class: "dv-wgms-circle",
+                      style: normalizeStyle({ background: unref(colorList)[index] })
+                    }, null, 4),
+                    createElementVNode("div", _hoisted_19, toDisplayString(item.name || "--"), 1)
+                  ]),
+                  createElementVNode("div", _hoisted_20, [
+                    createElementVNode("span", null, toDisplayString(item.value || "--"), 1),
+                    _hoisted_21,
+                    createElementVNode("span", null, toDisplayString(item.rate || "--") + "%", 1)
+                  ])
+                ]);
+              }), 128))
+            ])
+          ]),
+          createElementVNode("div", _hoisted_22, [
+            _hoisted_23,
+            createElementVNode("div", _hoisted_24, [
+              createElementVNode("div", _hoisted_25, [
+                _hoisted_26,
+                createElementVNode("div", _hoisted_27, [
+                  createElementVNode("span", null, toDisplayString(unref(nh3OverNum)), 1),
+                  _hoisted_28
+                ])
+              ]),
+              createElementVNode("div", _hoisted_29, [
+                _hoisted_30,
+                createElementVNode("div", _hoisted_31, [
+                  createElementVNode("span", null, toDisplayString(unref(tpOverNum)), 1),
+                  _hoisted_32
+                ])
+              ])
+            ])
+          ])
+        ])
+      ]);
+    };
+  }
+});
 
-export { _PollutionSourceControl as default };
+export { _sfc_main as default };