@ued_fpi/data-visual 1.2.6 → 1.2.7

package/dist/lib/wgms/src/WaterQualityRainfall/index.vue.js

@@ -4,7 +4,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 
 const vue = require('vue');
 const dayjs = require('dayjs');
-const index$1 = require('../../utils/echarts/index.js');
+const BaseECharts_vue_vue_type_script_setup_true_lang = require('../../utils/echarts/BaseECharts.vue.js');
 const index = require('./api/index.js');
 
 const _hoisted_1 = { class: "dv-wgms-water-quality-rainfall" };
@@ -47,6 +47,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const props = __props;
     const chartQualityRainfall = vue.ref();
+    const option = vue.ref(void 0);
     const data = vue.reactive({
       title: "水质-雨量-水位趋势对比图",
       unit: "mg/L",
@@ -80,7 +81,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
     const getData = async () => {
       const res = await index.rainHydrologyAnalyse(data.params);
-      console.log(res);
       const resData = res.data || [];
       const xData = [];
       const seriesData = {
@@ -99,14 +99,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         seriesData.factorValue.push(item.factorValue);
         seriesData.quality.push(item.quality);
       });
-      const lineOptions = await initWaterQuality(xData, seriesData, data.unit, data.factorName);
-      index$1.default.draw(chartQualityRainfall.value, lineOptions);
+      option.value = await initWaterQuality(xData, seriesData, data.unit, data.factorName);
     };
     const initWaterQuality = async (xAxis, data2, unit, factorName) => {
       const { hydrology, factorValue, rain, quality } = data2;
       const res = await index.waterSurfaceListAll({});
       const gradeList = res?.entries ?? [];
-      const option = {
+      const option2 = {
         grid: {
           top: 55,
           right: 26,
@@ -139,7 +138,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           bottom: 0,
           inactiveColor: "rgba(255,255,255,0.5)",
           textStyle: {
-            color: "rgba(255,255,255,1)"
+            color: "var(--dv-color-text-primary)"
           },
           itemHeight: 2,
           itemWidth: 16,
@@ -164,15 +163,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           axisLine: {
             show: false,
             lineStyle: {
-              color: "rgba(255,255,255,0.5)"
+              color: "var(--dv-color-fill-lighter)"
             }
           },
           axisLabel: {
             show: true,
             textStyle: {
-              fontFamily: "Bebas Neue",
-              fontSize: "12",
-              color: "rgba(255,255,255,0.6)"
+              fontFamily: "var(--dv-font-family-number)",
+              fontSize: "var(--dv-text-number2)",
+              color: "var(--dv-color-text-primary)"
             }
           },
           axisTick: {
@@ -188,21 +187,20 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             nameLocation: "start",
             nameTextStyle: {
               align: "right",
-              color: "rgba(255,255,255,1)"
+              fontFamily: "var(--dv-font-family-number)",
+              fontSize: "var(--dv-text-body2)",
+              color: "var(--dv-color-text-secondary)"
             },
             axisLabel: {
               formatter: "{value}",
               textStyle: {
                 fontFamily: "var(--dv-font-family-number)",
-                fontSize: "12",
-                color: "#909399"
+                fontSize: "var(--dv-text-number2)",
+                color: "var(--dv-color-text-secondary)"
               }
             },
             axisLine: {
-              show: false,
-              lineStyle: {
-                color: "rgba(255,255,255,1)"
-              }
+              show: false
             },
             axisPointer: {
               snap: true
@@ -210,7 +208,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             splitLine: {
               show: true,
               lineStyle: {
-                color: "rgba(255, 255, 255, 0.15)"
+                color: "var(--dv-color-fill-lighter)"
               }
             },
             axisTick: { show: false },
@@ -223,7 +221,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
 (${unit})`,
             nameTextStyle: {
               align: "right",
-              color: "rgba(255,255,255,1)"
+              fontFamily: "var(--dv-font-family-number)",
+              fontSize: "var(--dv-text-body2)",
+              color: "var(--dv-color-text-secondary)"
             },
             position: "left",
             offset: 40,
@@ -231,24 +231,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               formatter: "{value}",
               textStyle: {
                 fontFamily: "var(--dv-font-family-number)",
-                fontSize: "12",
-                color: "#909399"
+                fontSize: "var(--dv-text-number2)",
+                color: "var(--dv-color-text-secondary)"
               }
             },
             axisLine: {
-              show: false,
-              lineStyle: {
-                color: "rgba(255,255,255,0.5)"
-              }
+              show: false
             },
             axisPointer: {
               snap: true
             },
             splitArea: {
-              show: false,
-              areaStyle: {
-                color: ["transparent", "rgba(255, 255, 255, 0.05)"]
-              }
+              show: false
             },
             splitLine: { show: false },
             axisTick: { show: false }
@@ -258,21 +252,20 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             type: "value",
             name: "水位(m)",
             nameTextStyle: {
-              color: "rgba(255,255,255,1)"
+              fontFamily: "var(--dv-font-family-number)",
+              fontSize: "var(--dv-text-body2)",
+              color: "var(--dv-color-text-secondary)"
             },
             axisLabel: {
               formatter: "{value}",
               textStyle: {
-                fontFamily: "Bebas Neue",
-                fontSize: "12",
-                color: "rgba(255,255,255,0.6)"
+                fontFamily: "var(--dv-font-family-number)",
+                fontSize: "var(--dv-text-number2)",
+                color: "var(--dv-color-text-secondary)"
               }
             },
             axisLine: {
-              show: false,
-              lineStyle: {
-                color: "rgba(255,255,255,0.5)"
-              }
+              show: false
             },
             axisPointer: {
               snap: true
@@ -313,14 +306,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             markPoint: {
               show: false,
               itemStyle: {
-                color: ["#f00"]
+                color: ["var(--dv-color-danger)"]
               }
             },
             label: {
               show: true,
-              fontFamily: "Bebas Neue",
-              fontSize: "12",
-              color: "rgba(255,255,255,0.6)"
+              fontFamily: "var(--dv-font-family-number)",
+              fontSize: "var(--dv-text-number2)",
+              color: "var(--dv-color-text-secondary)"
             },
             // data: factorValue.map((item, index) => {
             //     return {
@@ -383,16 +376,17 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           }
         ]
       };
-      return option;
+      return option2;
     };
-    vue.toRefs(data);
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
         vue.createElementVNode("div", {
           ref_key: "chartQualityRainfall",
           ref: chartQualityRainfall,
           class: "chart"
-        }, null, 512)
+        }, [
+          vue.createVNode(BaseECharts_vue_vue_type_script_setup_true_lang.default, { options: option.value }, null, 8, ["options"])
+        ], 512)
       ]);
     };
   }

package/dist/lib/wgms/src/WaterQualityStatus/index.vue.js

@@ -2,13 +2,12 @@
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
-const down = require('./images/down.svg.js');
-const right = require('./images/right.svg.js');
-const up = require('./images/up.svg.js');
 const vue = require('vue');
 const dayjs = require('dayjs');
 const ProgressBar_vue_vue_type_script_setup_true_lang = require('../common/ProgressBar.vue.js');
 require('../common/ProgressBar.vue2.js');
+const commonArrow_vue_vue_type_script_setup_true_lang = require('../common/common-arrow.vue.js');
+require('../common/common-arrow.vue2.js');
 const index = require('./api/index.js');
 
 const _hoisted_1 = { class: "dv-wgms-water-quality" };
@@ -19,9 +18,8 @@ const _hoisted_5 = { class: "dv-wgms-water-quality-status-bottom dv-wgms-flex-be
 const _hoisted_6 = { class: "dv-wgms-target" };
 const _hoisted_7 = /* @__PURE__ */ vue.createElementVNode("span", { class: "dv-wgms-text" }, "目标", -1);
 const _hoisted_8 = { class: "dv-wgms-value" };
-const _hoisted_9 = { class: "dv-wgms-same" };
+const _hoisted_9 = { class: "dv-wgms-same flex-left-center" };
 const _hoisted_10 = /* @__PURE__ */ vue.createElementVNode("span", { class: "dv-wgms-text" }, "同比", -1);
-const _hoisted_11 = ["src"];
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   props: {
@@ -49,9 +47,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       const { data: res } = await index.getReachStandardData(props.params);
       res && (wgmsData.list = res);
     };
-    const getAssetsFile = (url) => {
-      return new URL((/* #__PURE__ */ Object.assign({"./images/down.svg": down.default,"./images/right.svg": right.default,"./images/up.svg": up.default}))[`./images/${url}`], self.location).href;
-    };
     vue.onMounted(() => {
       getResData();
     });
@@ -83,13 +78,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               vue.createElementVNode("div", _hoisted_9, [
                 _hoisted_10,
                 vue.createElementVNode("span", {
-                  style: vue.normalizeStyle({ color: item.yoy === null ? "#fff" : item.yoy > 0 ? "#15F3A3" : item.yoy < 0 ? "#F84439" : "#33E5FF" }),
+                  style: vue.normalizeStyle({ color: item.yoy === null ? "var(--dv-color-text-placeholder)" : item.yoy > 0 ? "var(--dv-color-success)" : item.yoy < 0 ? "var(--dv-color-danger)" : "var(--dv-color-index)" }),
                   class: "dv-wgms-value"
                 }, vue.toDisplayString(item.yoy === null ? "--" : item.yoy === 0 ? "持平" : `${item.yoy}%`), 5),
-                item.yoy !== null ? (vue.openBlock(), vue.createElementBlock("img", {
+                item.yoy !== null ? (vue.openBlock(), vue.createBlock(commonArrow_vue_vue_type_script_setup_true_lang.default, {
                   key: 0,
-                  src: getAssetsFile(`${item.yoy > 0 ? "up" : item.yoy < 0 ? "down" : "right"}.svg`)
-                }, null, 8, _hoisted_11)) : vue.createCommentVNode("", true)
+                  direction: item.yoy > 0 ? "up" : item.yoy < 0 ? "down" : "flat"
+                }, null, 8, ["direction"])) : vue.createCommentVNode("", true)
               ])
             ])
           ]);

package/dist/lib/wgms/src/common/ProgressBar.vue.js

@@ -19,14 +19,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
      */
     bgColor: {
       type: String,
-      default: "rgba(255, 255, 255, 0.1)"
+      default: "var(--dv-color-fill-lighter)"
     },
     /**
      * 激活部分背景色
      */
     activeColor: {
       type: String,
-      default: "linear-gradient(270deg, #00DEFF 0%, rgba(0,222,255,0.20) 100%)"
+      default: "linear-gradient(270deg, var(--dv-color-index) 0%, var(--dv-color-index-30) 100%)"
     },
     /**
      * 百分比
@@ -42,7 +42,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       type: Object,
       default: () => {
         return {
-          background: "#00DEFF",
+          background: "var(--dv-color-index)",
           width: "2px",
           height: "12px"
         };

package/dist/{es/ipes/src/Level3AirDefense/components/EmptyData.vue.d.ts → lib/wgms/src/common/common-arrow.vue.d.ts}

@@ -1,14 +1,15 @@
+import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
-    emptyText: {
-        type: StringConstructor;
+    direction: {
+        type: PropType<"flat" | "up" | "down">;
         default: string;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    emptyText: {
-        type: StringConstructor;
+    direction: {
+        type: PropType<"flat" | "up" | "down">;
         default: string;
     };
 }>>, {
-    emptyText: string;
+    direction: "flat" | "up" | "down";
 }, {}>;
 export default _default;

package/dist/lib/wgms/src/common/common-arrow.vue.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+
+const _hoisted_1 = /* @__PURE__ */ vue.createElementVNode("div", { class: "bar" }, null, -1);
+const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "triangle" }, null, -1);
+const _hoisted_3 = [
+  _hoisted_1,
+  _hoisted_2
+];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "common-arrow",
+  props: {
+    direction: {
+      type: String,
+      default: "up"
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["arrow", __props.direction])
+      }, _hoisted_3, 2);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/lib/wgms/src/common/common-arrow.vue2.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+/* unplugin-vue-components disabled */const commonArrow_vue_vue_type_style_index_0_lang = '';
+
+exports.default = commonArrow_vue_vue_type_style_index_0_lang;

package/dist/lib/wgms/src/common/common-arrow.vue3.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const commonArrow_vue_vue_type_script_setup_true_lang = require('./common-arrow.vue.js');
+require('./common-arrow.vue2.js');
+
+
+
+exports.default = commonArrow_vue_vue_type_script_setup_true_lang.default;

package/dist/lib/wgms/utils/echarts/BaseECharts.vue.d.ts

@@ -0,0 +1,41 @@
+declare const _default: import("vue").DefineComponent<{
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    options: {
+        type: ObjectConstructor;
+        default: null;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    options: {
+        type: ObjectConstructor;
+        default: null;
+    };
+}>>, {
+    width: string;
+    height: string;
+    options: Record<string, any>;
+    loading: boolean;
+}, {}>;
+export default _default;

package/dist/lib/wgms/utils/echarts/BaseECharts.vue.js

@@ -0,0 +1,107 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const utils = require('../../../utils.js');
+const index = require('./index.js');
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "BaseECharts",
+  props: {
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "100%"
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    options: {
+      type: Object,
+      default: null
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const { isDark } = utils.useThemeHook();
+    const domRef = vue.ref(null);
+    const domBox = vue.ref(null);
+    let chartObj = null;
+    let observer = null;
+    vue.onMounted(() => {
+      if (!chartObj && domRef.value)
+        chartObj = index.default.init(domRef.value);
+      if (!chartObj)
+        return;
+      chartObj.showLoading({
+        text: "",
+        color: "#409eff",
+        textColor: "#000",
+        maskColor: "rgba(255, 255, 255, .95)",
+        zlevel: 0,
+        lineWidth: 2
+      });
+      if (!props.loading) {
+        chartObj.hideLoading();
+        drawOption();
+      }
+      if (props.options)
+        drawOption();
+      observer = new MutationObserver((mutationsList) => {
+        for (const mutation of mutationsList)
+          if (mutation.target === domBox.value)
+            chartObj && chartObj.resize();
+      });
+      vue.nextTick(() => {
+        domBox.value && observer.observe(domBox.value, {
+          attributes: true,
+          childList: false,
+          characterData: true,
+          subtree: true
+        });
+      });
+      setTimeout(() => {
+        chartObj && chartObj.resize();
+      }, 1e3);
+    });
+    vue.onUnmounted(() => {
+      if (chartObj) {
+        chartObj.dispose();
+        chartObj = null;
+      }
+      observer && observer.disconnect();
+    });
+    vue.watch(
+      () => props.options,
+      () => {
+        drawOption();
+      }
+    );
+    vue.watch(() => isDark.value, () => {
+      drawOption();
+    });
+    const drawOption = () => {
+      chartObj && chartObj.setOption(utils.replaceVarStrings(props.options));
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "domBox",
+        ref: domBox,
+        style: vue.normalizeStyle({ width: __props.width, height: __props.height })
+      }, [
+        vue.createElementVNode("div", {
+          ref_key: "domRef",
+          ref: domRef,
+          style: vue.normalizeStyle({ width: __props.width, height: __props.height })
+        }, null, 4)
+      ], 4);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/lib/wgms/utils/echarts/BaseECharts.vue2.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const BaseECharts_vue_vue_type_script_setup_true_lang = require('./BaseECharts.vue.js');
+
+
+
+exports.default = BaseECharts_vue_vue_type_script_setup_true_lang.default;

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

@@ -40,7 +40,7 @@ const pieChartOptions = (seriesData, colorList, total) => {
                 fontWeight: "500",
                 lineHeight: "26",
                 fontSize: 16,
-                color: "#fff"
+                color: "var(--dv-color-text-primary)"
               }
             }
           },

package/dist/lib/wgms/utils/echarts/index.d.ts

@@ -1,14 +1,2 @@
-import 'echarts/lib/chart/line';
-import 'echarts/lib/chart/pie';
-import 'echarts/lib/chart/bar';
-import 'echarts/lib/chart/boxplot';
-import 'echarts/lib/component/legend';
-import 'echarts/lib/component/grid';
-import 'echarts/lib/component/title';
-import 'echarts/lib/component/tooltip';
-import 'echarts/lib/component/graphic';
-import 'echarts/lib/component/dataZoom';
-import 'echarts/lib/component/visualMap';
-import 'echarts/lib/component/markLine';
 declare const _default: any;
 export default _default;

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

@@ -2,19 +2,11 @@
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
-const echarts$1 = require('echarts/lib/echarts.js');
-require('echarts/lib/chart/line');
-require('echarts/lib/chart/pie');
-require('echarts/lib/chart/bar');
-require('echarts/lib/chart/boxplot');
-require('echarts/lib/component/legend');
-require('echarts/lib/component/grid');
-require('echarts/lib/component/title');
-require('echarts/lib/component/tooltip');
-require('echarts/lib/component/graphic');
-require('echarts/lib/component/dataZoom');
-require('echarts/lib/component/visualMap');
-require('echarts/lib/component/markLine');
+const echarts$1 = require('echarts/core');
+const components = require('echarts/components');
+const charts = require('echarts/charts');
+const features = require('echarts/features');
+const renderers = require('echarts/renderers');
 
 function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -35,29 +27,27 @@ function _interopNamespaceDefault(e) {
 
 const echarts__namespace = /*#__PURE__*/_interopNamespaceDefault(echarts$1);
 
-let allChart = [];
-const init = (dom) => {
-  const echartsChance = echarts__namespace.init(dom);
-  allChart.push(echartsChance);
-  return echartsChance;
-};
+echarts__namespace.use([
+  components.GraphicComponent,
+  components.GridComponent,
+  components.TooltipComponent,
+  components.LegendComponent,
+  components.TitleComponent,
+  charts.LineChart,
+  charts.BarChart,
+  charts.PieChart,
+  charts.BoxplotChart,
+  renderers.CanvasRenderer,
+  features.UniversalTransition
+]);
 const draw = (dom, option) => {
-  const chart = init(dom);
+  const chart = echarts__namespace.init(dom);
   chart.clear();
   chart.setOption(option);
   return chart;
 };
-window.addEventListener("resize", () => {
-  allChart.forEach((item, index) => {
-    if (!item._dom.offsetWidth)
-      allChart[index] = void 0;
-    item && item.resize && item._dom.offsetWidth && item.resize();
-  });
-  allChart = allChart.filter((item) => item);
-});
 const echarts = {
   ...echarts__namespace,
-  init,
   draw
 };