@ued_fpi/data-visual 1.2.5 → 1.2.7

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

@@ -1,7 +1,7 @@
-import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs, openBlock, createElementBlock, createElementVNode } from 'vue';
+import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs, openBlock, createElementBlock, createElementVNode, createVNode } from 'vue';
 import dayjs from 'dayjs';
 import { maxBy, minBy } from 'lodash-es';
-import echarts from '../../utils/echarts/index.mjs';
+import _sfc_main$1 from '../../utils/echarts/BaseECharts.vue.mjs';
 import { getKLine, waterSurfaceListAll } from './api/index.mjs';
 
 const _hoisted_1 = { class: "dv-wgms-seven-day-kline" };
@@ -46,6 +46,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const chartSevenDayLine = ref();
+    const option = ref(void 0);
     const timeStrList = {
       hour: "小时",
       day: "日",
@@ -184,14 +185,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const maxObj = maxBy(resData, "maxValue");
       const minObj = minBy(resData, "minValue");
       nextTick();
-      const lineOptions = await dayKLine(klineData, maxObj?.maxValue, minObj?.minValue, data.factorName, data.unit, timeStrList[props.timeType]);
-      echarts.draw(chartSevenDayLine.value, lineOptions);
+      option.value = await dayKLine(klineData, maxObj?.maxValue, minObj?.minValue, data.factorName, data.unit, timeStrList[props.timeType]);
     };
     const dayKLine = async (data2, min, max, factorName, unit, timeStr) => {
       const { xAxis, kData, values, quality } = data2;
       const res = await waterSurfaceListAll({});
       const gradeList = res?.entries ?? [];
-      const option = {
+      const option2 = {
         grid: [
           {
             top: 45,
@@ -230,17 +230,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             type: "category",
             boundaryGap: true,
             axisLine: {
-              show: false,
-              lineStyle: {
-                color: "rgba(255,255,255,0.5)"
-              }
+              show: false
             },
             axisLabel: {
               show: true,
               textStyle: {
+                color: "var(--dv-color-text-primary)",
                 fontFamily: "var(--dv-font-family-number)",
-                fontSize: "12",
-                color: "rgba(255,255,255,1)"
+                fontSize: "var(--dv-text-number2)"
               }
             },
             axisTick: {
@@ -253,12 +250,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             show: false,
             gridIndex: 1,
             boundaryGap: true,
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: "rgba(255,255,255,0.5)"
-              }
-            },
             axisTick: {
               show: false
             },
@@ -272,21 +263,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             name: unit,
             nameTextStyle: {
               align: "right",
-              color: "rgba(255,255,255,1)"
+              color: "var(--dv-color-text-secondary)",
+              fontFamily: "var(--dv-font-family-number)",
+              fontSize: "var(--dv-text-number2)"
             },
             axisLabel: {
               formatter: "{value}",
               textStyle: {
-                fontFamily: "Bebas Neue",
-                fontSize: "12",
-                fontWeight: "normal"
+                color: "var(--dv-color-text-secondary)",
+                fontFamily: "var(--dv-font-family-number)",
+                fontSize: "var(--dv-text-number2)"
               }
             },
             axisLine: {
-              show: false,
-              lineStyle: {
-                color: "rgba(255,255,255,0.5)"
-              }
+              show: false
             },
             axisPointer: {
               snap: true
@@ -294,7 +284,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             splitArea: {
               show: true,
               areaStyle: {
-                color: ["transparent", "rgba(255, 255, 255, 0.05)"]
+                color: ["transparent", "var(--dv-color-fill-lighter)"]
               }
             },
             splitLine: { show: false },
@@ -310,10 +300,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               show: false
             },
             axisLine: {
-              show: false,
-              lineStyle: {
-                color: "rgba(255,255,255,0.5)"
-              }
+              show: false
             },
             axisPointer: {
               snap: true
@@ -329,7 +316,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             yAxisIndex: 0,
             itemStyle: {
               color: "transparent",
-              borderColor: "#00fff5"
+              borderColor: "var(--dv-color-index)"
             },
             data: kData
           },
@@ -339,13 +326,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             xAxisIndex: 1,
             yAxisIndex: 1,
             barWidth: 20,
-            // label: {
-            //     show: true,
-            //     position: 'top',
-            //     fontFamily: 'Bebas Neue',
-            //     fontSize: '12',
-            //     color: 'rgba(255,255,255,0.6)'
-            // },
             itemStyle: {
               color: (params) => {
                 const level = quality[params.dataIndex];
@@ -370,7 +350,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }
         ]
       };
-      return option;
+      return option2;
     };
     toRefs(data);
     return (_ctx, _cache) => {
@@ -379,7 +359,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ref_key: "chartSevenDayLine",
           ref: chartSevenDayLine,
           class: "chart"
-        }, null, 512)
+        }, [
+          createVNode(_sfc_main$1, { options: option.value }, null, 8, ["options"])
+        ], 512)
       ]);
     };
   }

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

@@ -115,14 +115,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 createElementVNode("div", _hoisted_5, [
                   createElementVNode("div", _hoisted_6, [
                     createVNode(_sfc_main$1, {
-                      "active-color": "linear-gradient(270deg, rgba(15,235,198,0.80) 0%, rgba(15,235,198,0.20) 100%)",
+                      "active-color": "linear-gradient(270deg, var(--dv-color-index) 0%, var(--dv-color-index-30) 100%)",
                       "handle-style": {
-                        background: "#15F3A3",
+                        background: "var(--dv-color-index)",
                         width: "2px",
                         height: "12px"
                       },
                       percentage: Number(item.percent)
-                    }, null, 8, ["percentage"])
+                    }, null, 8, ["handle-style", "percentage"])
                   ]),
                   createElementVNode("span", _hoisted_7, toDisplayString(item.percent ?? "--") + "%", 1)
                 ])

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

@@ -46,8 +46,9 @@ const _hoisted_25 = { class: "name-num-box pd10" };
 const _hoisted_26 = /* @__PURE__ */ createElementVNode("span", { class: "name" }, "周边未处置事件", -1);
 const _hoisted_27 = { class: "num-box" };
 const _hoisted_28 = { class: "num red" };
-const _hoisted_29 = { class: "total" };
-const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<div class="surrounding-three-flex"><div class="surrounding-three-item surrounding-comm-box different"><div class="name-num-box"><span class="name">异常入河排污口</span><span class="num red">5</span></div></div><div class="surrounding-three-item surrounding-comm-box"><div class="name-num-box"><span class="name">问题小区</span><span class="num red">5</span></div></div><div class="surrounding-three-item surrounding-comm-box"><div class="name-num-box"><span class="name">问题园区</span><span class="num red">5</span></div></div></div>', 1);
+const _hoisted_29 = /* @__PURE__ */ createElementVNode("span", { class: "split" }, "/", -1);
+const _hoisted_30 = { class: "total" };
+const _hoisted_31 = /* @__PURE__ */ createStaticVNode('<div class="surrounding-three-flex"><div class="surrounding-three-item surrounding-comm-box different"><div class="name-num-box"><span class="name">异常入河排污口</span><span class="num red">5</span></div></div><div class="surrounding-three-item surrounding-comm-box"><div class="name-num-box"><span class="name">问题小区</span><span class="num red">5</span></div></div><div class="surrounding-three-item surrounding-comm-box"><div class="name-num-box"><span class="name">问题园区</span><span class="num red">5</span></div></div></div>', 1);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
@@ -279,12 +280,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               _hoisted_26,
               createElementVNode("div", _hoisted_27, [
                 createElementVNode("span", _hoisted_28, toDisplayString(unref(boundaryData).disposal), 1),
-                createElementVNode("span", _hoisted_29, "/" + toDisplayString(unref(boundaryData).total), 1)
+                _hoisted_29,
+                createElementVNode("span", _hoisted_30, toDisplayString(unref(boundaryData).total), 1)
               ])
             ])
           ])
         ]),
-        _hoisted_30
+        _hoisted_31
       ]);
     };
   }

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

@@ -1,6 +1,6 @@
-import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs, openBlock, createElementBlock, createElementVNode } from 'vue';
+import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs, openBlock, createElementBlock, createElementVNode, createVNode } from 'vue';
 import dayjs from 'dayjs';
-import echarts from '../../utils/echarts/index.mjs';
+import _sfc_main$1 from '../../utils/echarts/BaseECharts.vue.mjs';
 import { surfaceWaterStandard, pathAnalysis, waterSurfaceListAll } from './api/index.mjs';
 
 const _hoisted_1 = { class: "dv-wgms-upstream-impact" };
@@ -61,6 +61,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const chartUpstreamImpact = ref();
+    const option = ref(void 0);
     const data = reactive({
       title: "",
       unit: "mg/L",
@@ -123,8 +124,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           value: item || 0
         };
       });
-      const options = await getLineOptions(waterQualityData.xAxis, data.factorName, dass, upValue, downValue);
-      echarts.draw(chartUpstreamImpact.value, options);
+      option.value = await getLineOptions(waterQualityData.xAxis, data.factorName, dass, upValue, downValue);
     };
     const getLineOptions = async (xAxis, unitName, dass, upValue, downValue) => {
       const res = await waterSurfaceListAll({});
@@ -156,10 +156,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           type: "category",
           boundaryGap: true,
           axisLine: {
-            show: false,
-            lineStyle: {
-              color: "rgba(255,255,255,0.5)"
-            }
+            show: false
           },
           axisTick: {
             show: false
@@ -178,7 +175,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   width: 160
                 }
               },
-              color: "#ffffff"
+              color: "var(--dv-color-text-primary)"
             },
             interval: 0
           },
@@ -189,27 +186,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           name: unitName,
           nameTextStyle: {
             align: "right",
-            color: "rgba(255,255,255,1)",
+            color: "var(--dv-color-text-secondary)",
             padding: [2, -50, 6, 0]
           },
           axisLine: {
-            show: false,
-            lineStyle: {
-              color: "rgba(255,255,255,0.5)"
-            }
+            show: false
           },
           axisLabel: {
             textStyle: {
               fontFamily: "var(--dv-font-family-number)",
-              fontSize: "12",
-              fontWeight: "normal",
-              color: "#909399"
+              fontSize: "var(--dv-text-headline3)",
+              color: "var(--dv-color-text-secondary)"
             }
           },
           splitLine: {
             show: true,
             lineStyle: {
-              color: "rgba(255, 255, 255, 0.15)"
+              color: "var(--dv-color-fill-lighter)"
             }
           },
           axisTick: { show: false },
@@ -256,13 +249,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     fontSize: 8,
                     lineHeight: 12,
                     padding: [2, 6, 0, 6],
-                    color: "#FFFFFF",
-                    backgroundColor: "#FF1744",
+                    color: "var(--dv-color-text-primary)",
+                    backgroundColor: "var(--dv-color-danger)",
                     borderRadius: 8
                   },
                   lineStyle: {
                     type: "solid",
-                    color: "#FF1744"
+                    color: "var(--dv-color-danger)"
                   }
                 },
                 {
@@ -277,13 +270,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     fontSize: 8,
                     lineHeight: 12,
                     padding: [2, 6, 0, 6],
-                    color: "#FFFFFF",
-                    backgroundColor: "#FF1744",
+                    color: "var(--dv-color-text-primary)",
+                    backgroundColor: "var(--dv-color-danger)",
                     borderRadius: 8
                   },
                   lineStyle: {
                     type: "solid",
-                    color: "#FF1744"
+                    color: "var(--dv-color-danger)"
                   }
                 }
               ]
@@ -299,7 +292,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ref_key: "chartUpstreamImpact",
           ref: chartUpstreamImpact,
           class: "chart"
-        }, null, 512)
+        }, [
+          createVNode(_sfc_main$1, { options: option.value }, null, 8, ["options"])
+        ], 512)
       ]);
     };
   }

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

@@ -46,12 +46,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const data = reactive({
-      handleStyle: {
-        background: "#15F3A3",
-        width: "2px",
-        height: "12px"
-      },
-      activeColor: "linear-gradient(270deg, rgba(15,235,198,0.80) 0%, rgba(15,235,198,0.20) 100%)",
       relativeData: [{
         siteName: "上游断面1",
         coefficientPre: 0.56,
@@ -87,7 +81,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       getData();
     });
-    const { relativeData, handleStyle, activeColor } = toRefs(data);
+    const { relativeData } = toRefs(data);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", _hoisted_2, [
@@ -101,10 +95,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createElementVNode("span", _hoisted_5, toDisplayString(item.siteName), 1),
               createElementVNode("div", _hoisted_6, [
                 createVNode(_sfc_main$1, {
-                  percentage: item.nh3OverNum / item.totalOverNum * 100,
-                  "active-color": unref(activeColor),
-                  "handle-style": unref(handleStyle)
-                }, null, 8, ["percentage", "active-color", "handle-style"])
+                  percentage: item.nh3OverNum / item.totalOverNum * 100
+                }, null, 8, ["percentage"])
               ]),
               createElementVNode("span", _hoisted_7, toDisplayString(item.totalOverNum), 1)
             ]);

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

@@ -5,7 +5,8 @@ const _hoisted_1 = { class: "dv-wgms-env-online dv-wgms-flex-between-center" };
 const _hoisted_2 = { class: "dv-wgms-name" };
 const _hoisted_3 = { class: "dv-wgms-value" };
 const _hoisted_4 = { class: "dv-wgms-online" };
-const _hoisted_5 = { class: "dv-wgms-total" };
+const _hoisted_5 = /* @__PURE__ */ createElementVNode("span", { class: "dv-wgms-split" }, "/", -1);
+const _hoisted_6 = { class: "dv-wgms-total" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
@@ -45,7 +46,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createElementVNode("div", _hoisted_2, toDisplayString(item.name), 1),
             createElementVNode("div", _hoisted_3, [
               createElementVNode("span", _hoisted_4, toDisplayString(item.onlineCount === null ? "--" : item.onlineCount), 1),
-              createElementVNode("span", _hoisted_5, "/" + toDisplayString(item.total === null ? "--" : item.total), 1)
+              _hoisted_5,
+              createElementVNode("span", _hoisted_6, toDisplayString(item.total === null ? "--" : item.total), 1)
             ])
           ]);
         }), 128))

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

@@ -1,11 +1,10 @@
-import __vite_glob_0_0 from './images/down.svg.mjs';
-import __vite_glob_0_1 from './images/right.svg.mjs';
-import __vite_glob_0_2 from './images/up.svg.mjs';
-import { defineComponent, ref, reactive, onMounted, nextTick, watch, toRefs, openBlock, createElementBlock, createElementVNode, Fragment, renderList, unref, normalizeStyle, toDisplayString, createCommentVNode } from 'vue';
+import { defineComponent, ref, reactive, onMounted, nextTick, watch, toRefs, openBlock, createElementBlock, createElementVNode, createVNode, Fragment, renderList, unref, normalizeStyle, toDisplayString, createBlock, createCommentVNode } from 'vue';
 import dayjs from 'dayjs';
 import { sumBy } from 'lodash-es';
-import echarts from '../../utils/echarts/index.mjs';
+import _sfc_main$2 from '../common/common-arrow.vue.mjs';
+import '../common/common-arrow.vue2.mjs';
 import { pieChartOptions } from '../../utils/echarts/echartsOptions.mjs';
+import _sfc_main$1 from '../../utils/echarts/BaseECharts.vue.mjs';
 import { getWaterQualityData } from './api/index.mjs';
 
 const _hoisted_1 = { class: "dv-wgms-water-category" };
@@ -15,7 +14,7 @@ const _hoisted_4 = { class: "flex-num" };
 const _hoisted_5 = { class: "num" };
 const _hoisted_6 = { class: "percent" };
 const _hoisted_7 = /* @__PURE__ */ createElementVNode("span", { class: "text" }, "同比", -1);
-const _hoisted_8 = ["src"];
+const _hoisted_8 = { class: "arrow-compare" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
@@ -35,6 +34,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const chartPie = ref();
+    const option = ref(void 0);
     const wgmsData = reactive({
       list: []
     });
@@ -66,11 +66,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const total = sumBy(list2, (o) => {
         return o.count;
       });
-      const options = pieChartOptions(seriesData, colorList, total);
-      echarts.draw(chartPie.value, options);
-    };
-    const getAssetsFile = (url) => {
-      return new URL((/* #__PURE__ */ Object.assign({"./images/down.svg": __vite_glob_0_0,"./images/right.svg": __vite_glob_0_1,"./images/up.svg": __vite_glob_0_2}))[`./images/${url}`], self.location).href;
+      option.value = pieChartOptions(seriesData, colorList, total);
     };
     watch([() => props.params, () => props.data], () => {
       getResData();
@@ -84,7 +80,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ref_key: "chartPie",
           ref: chartPie,
           class: "chart-pie"
-        }, null, 512),
+        }, [
+          createVNode(_sfc_main$1, { options: option.value }, null, 8, ["options"])
+        ], 512),
         createElementVNode("div", _hoisted_2, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), (item) => {
             return openBlock(), createElementBlock("div", {
@@ -103,13 +101,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               _hoisted_7,
               createElementVNode("span", {
                 class: "compare",
-                style: normalizeStyle({ color: item.yoyPercent === null ? "--" : item.yoyPercent > 0 ? "#36F097" : item.yoyPercent < 0 ? "#F84439" : "#00DDFF" })
+                style: normalizeStyle({ color: item.yoyPercent === null ? "--" : item.yoyPercent > 0 ? "var(--dv-color-success)" : item.yoyPercent < 0 ? "var(--dv-color-danger)" : "var(--dv-color-index)" })
               }, toDisplayString(item.yoyPercent === null ? "--" : `${Math.abs(item.yoyPercent)}%`), 5),
-              item.yoyPercent !== null ? (openBlock(), createElementBlock("img", {
-                key: 0,
-                src: getAssetsFile(`${item.yoyPercent > 0 ? "up" : item.yoyPercent < 0 ? "down" : "right"}.svg`),
-                alt: ""
-              }, null, 8, _hoisted_8)) : createCommentVNode("", true)
+              createElementVNode("div", _hoisted_8, [
+                item.yoyPercent !== null ? (openBlock(), createBlock(_sfc_main$2, {
+                  key: 0,
+                  direction: item.yoyPercent > 0 ? "up" : item.yoyPercent < 0 ? "down" : "flat"
+                }, null, 8, ["direction"])) : createCommentVNode("", true)
+              ])
             ]);
           }), 128))
         ])