@ued_fpi/data-visual 1.1.0 → 1.1.2

package/dist/lib/wgms/src/FactorTopThreeRanking/index.vue2.js

@@ -0,0 +1,228 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const index = require('../../api/FactorTopThreeRanking/index.js');
+const index$1 = require('../../utils/echarts/index.js');
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "index",
+  props: {
+    height: {
+      type: [String, Number],
+      default: "200px"
+    },
+    type: {
+      default: "automatic",
+      // 默认自动数据 manual（手工数据）
+      type: String
+    },
+    // 时间类型
+    timeType: {
+      type: String,
+      required: true
+      // day
+    },
+    siteCode: {
+      type: String,
+      required: true
+      // zaoleishougong
+    },
+    factorCode: {
+      type: String,
+      required: true
+      // w01016
+    },
+    startTime: {
+      type: String,
+      required: true
+      // 1663257600000
+    },
+    endTime: {
+      type: String,
+      required: true
+      // 1663257600000
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const chartRef = vue.ref();
+    vue.watch(() => props.type, (val) => {
+      if (val === "automatic")
+        getAutomatic();
+      else if (val === "manual")
+        getManual();
+    }, { immediate: true });
+    async function getAutomatic() {
+      const params = {
+        startTime: props.startTime,
+        endTime: props.endTime,
+        siteCode: props.siteCode,
+        factorCode: props.factorCode,
+        timeType: props.timeType
+      };
+      const res = await index.getAutomaticTopThreeData(params);
+      initChart(res);
+    }
+    async function getManual() {
+      const params = {
+        timeType: props.timeType,
+        siteCode: props.siteCode,
+        factorCode: props.factorCode,
+        startTime: props.startTime,
+        endTime: props.endTime
+      };
+      const res = await index.getManualTopThreeData(params);
+      initChart(res);
+    }
+    const initChart = (res) => {
+      const resData = res?.data ?? [];
+      const upData = resData.map((item) => {
+        if (item.value >= 0)
+          return item.value === 0 ? 0 : item.value.toFixed(4);
+        else
+          return "";
+      });
+      const downData = resData.map((item) => {
+        if (item.value < 0)
+          return item.value.toFixed(4);
+        else
+          return "";
+      });
+      const xData = resData.map((item) => {
+        return item.name;
+      });
+      const chart = index$1.default.init(chartRef.value);
+      const barOptions = getAlgaeBarOptions(xData, upData, downData);
+      chart.setOption(barOptions);
+    };
+    const getHeight = vue.computed(() => {
+      if (typeof props.height === "string")
+        return props.height;
+      else if (typeof props.height === "number")
+        return `${props.height}px`;
+      else
+        return "100%";
+    });
+    const getAlgaeBarOptions = (Xdata, dataUp, dataDown) => {
+      return {
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: Xdata,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "rgba(255, 255, 255, 0.5)"
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              fontFamily: "TRENDS",
+              fontSize: 18,
+              color: "#fff"
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            data: Xdata
+          }
+        ],
+        series: [
+          {
+            name: "",
+            type: "bar",
+            stack: "Total",
+            barWidth: 24,
+            color: "#00e87e",
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                offset: [0, -4],
+                formatter: "{c}",
+                textStyle: {
+                  color: "#00e87e",
+                  fontFamily: "Furore",
+                  fontSize: 16
+                }
+              }
+            },
+            emphasis: {
+              focus: "series"
+            },
+            data: dataUp
+            // [320, 302, 341, 374, 390, 450, 420]
+          },
+          {
+            name: "",
+            type: "bar",
+            stack: "Total",
+            barWidth: 24,
+            color: "#f2be32",
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                offset: [0, -4],
+                formatter: "{c}",
+                textStyle: {
+                  color: "#f2be32",
+                  fontFamily: "Furore",
+                  fontSize: 16
+                }
+              }
+            },
+            emphasis: {
+              focus: "series"
+            },
+            data: dataDown
+            // [-120, -132, -101, -134, -190, -230, -210]
+          }
+        ]
+      };
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: "chlorophyll-a-change-rate",
+        style: vue.normalizeStyle({ "--height": getHeight.value })
+      }, [
+        vue.createElementVNode("div", {
+          id: "linkFactorChart",
+          ref_key: "chartRef",
+          ref: chartRef,
+          class: "chart"
+        }, null, 512)
+      ], 4);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/lib/wgms/src/FactorTopThreeRanking/index.vue3.js

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

package/dist/lib/wgms/src/FactorTrendComparison/index.js

@@ -1,261 +1,11 @@
 'use strict';
 
-const wgms_utils_tools = require('../../utils/tools.js');
-const vue = require('vue');
-const wgms_utils_echarts_index = require('../../utils/echarts/index.js');
-const wgms_api_FactorTrendComparison_index = require('../../api/FactorTrendComparison/index.js');
-const aims_src_AirQualityCalendar_index = require('../../../aims/src/AirQualityCalendar/index.js');
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
-const _hoisted_1 = { class: "factor-trend-comparison" };
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  __name: "index",
-  props: {
-    isHandle: {
-      default: true,
-      type: Boolean
-    },
-    // 是否是手工数据
-    siteId: {
-      default: "",
-      // 23239
-      type: [Number, 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 } = vue.toRefs(state);
-    vue.watch([() => props.isHandle, () => props.siteId, () => props.beginTime, () => props.endTime, () => props.data], async () => {
-      if (props.data.length) {
-        await vue.nextTick(() => {
-          initChart();
-        });
-        return;
-      }
-      const groupCode = props.isHandle ? "algae" : "algaeAutomatic";
-      const list = await wgms_api_FactorTrendComparison_index.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 vue.nextTick(() => {
-        initChart();
-      });
-    }, { immediate: true });
-    const getChartData = async (factorId) => {
-      const params = {
-        beginTime: props.beginTime,
-        endTime: props.endTime,
-        factorFlag: false,
-        siteId: props.siteId,
-        dataTimeType: props.isHandle ? 1440 : 60,
-        queryTimeType: props.isHandle ? "day" : "hour",
-        factor: factorId
-      };
-      return await wgms_api_FactorTrendComparison_index.getManualFactorTrendComparisonData(params);
-    };
-    const initChart = () => {
-      let xData = [];
-      state.factorMap.forEach(async (item, index) => {
-        const res = await getChartData(item.id);
-        const timesList = res?.times ?? [];
-        const valueList = res?.dates ?? [];
-        xData = timesList.map((item2) => item2 && item2.substring(5, 11));
-        state.seriesData[index].data = valueList.map((item2) => {
-          return item2?.value ?? null;
-        });
-      });
-      const chart = wgms_utils_echarts_index.echarts.init(chartRef.value);
-      setTimeout(async () => {
-        const lineOptions = getChartOptions(xData, state.seriesData);
-        chart.setOption(lineOptions);
-      }, 1500);
-    };
-    const getChartOptions = (xData, seriesData) => {
-      return {
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "line"
-            // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        legend: {
-          show: true,
-          type: "scroll",
-          itemWidth: 12,
-          itemHeight: 12,
-          icon: "circle",
-          bottom: 10,
-          textStyle: {
-            fontFamily: "TRENDS",
-            color: "#909399",
-            fontSize: "12px"
-          }
-        },
-        grid: {
-          top: 60,
-          left: "9%",
-          right: 10,
-          bottom: 40,
-          containLabel: true
-        },
-        color: ["#2AC94F", "#FFE200", "#FF99C3", "#00FFFD", "#ff99c3", "#00fffd", "#ff7815", "#ef33ff"],
-        xAxis: [
-          {
-            type: "category",
-            data: xData,
-            boundaryGap: false,
-            axisLine: {
-              show: false
-            },
-            axisLabel: {
-              textStyle: {
-                fontFamily: "TRENDS",
-                fontSize: "12",
-                color: "rgba(255,255,255,0.6)"
-              }
-            },
-            axisTick: {
-              show: false,
-              interval: 24
-            }
-          }
-        ],
-        yAxis: [
-          {
-            name: "因子值\n(mg/l)",
-            nameTextStyle: {
-              fontFamily: "TRENDS",
-              color: "rgba(255, 255, 255, 0.6)",
-              fontSize: "14px",
-              align: "center"
-            },
-            type: "value",
-            offset: 60,
-            axisLabel: {
-              formatter: "{value}",
-              textStyle: {
-                fontFamily: "TRENDS",
-                color: "rgba(255, 255, 255, 0.6)",
-                fontSize: "16px",
-                align: "center",
-                padding: [0, 0, 0, 10]
-              }
-            },
-            splitArea: {
-              show: true,
-              areaStyle: {
-                color: ["transparent", "rgba(255, 255, 255, 0.05)"]
-              }
-            },
-            splitLine: { show: false },
-            axisTick: { show: false },
-            axisPointer: {
-              snap: true
-            }
-          },
-          {
-            name: "叶绿素a\n(μg/l)",
-            nameTextStyle: {
-              align: "center",
-              fontFamily: "TRENDS",
-              color: "rgba(255, 255, 255, 0.6)",
-              fontSize: "14px"
-            },
-            type: "value",
-            position: "left",
-            offset: 10,
-            axisLabel: {
-              formatter: "{value}",
-              textStyle: {
-                fontFamily: "TRENDS",
-                color: "rgba(255, 255, 255, 0.6)",
-                fontSize: "16px",
-                align: "center"
-              }
-            },
-            splitLine: { show: false },
-            axisTick: { show: false },
-            axisPointer: {
-              snap: true
-            }
-          },
-          {
-            name: "水温\n(℃)",
-            nameTextStyle: {
-              align: "center",
-              fontFamily: "TRENDS",
-              color: "rgba(255, 255, 255, 0.6)",
-              fontSize: "14px",
-              padding: [0, 0, 0, 10]
-            },
-            type: "value",
-            position: "right",
-            offset: 10,
-            axisLabel: {
-              formatter: "{value}",
-              textStyle: {
-                fontFamily: "TRENDS",
-                color: "rgba(255, 255, 255, 0.6)",
-                fontSize: "16px",
-                align: "center"
-              }
-            },
-            splitLine: { show: false },
-            axisTick: { show: false },
-            axisPointer: {
-              snap: true
-            }
-          }
-        ],
-        series: seriesData
-      };
-    };
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        vue.createElementVNode("div", {
-          id: "chart",
-          ref_key: "chartRef",
-          ref: chartRef,
-          class: "chart"
-        }, null, 512)
-      ]);
-    };
-  }
-});
+const tools = require('../../utils/tools.js');
+const index = require('./index.vue.js');
 
-/* unplugin-vue-components disabled */const index_vue_vue_type_style_index_0_scoped_631b1776_lang = '';
-
-const _FactorTrendComparison = /* @__PURE__ */ aims_src_AirQualityCalendar_index._export_sfc(_sfc_main, [["__scopeId", "data-v-631b1776"]]);
-
-const DvWgmsFactorTrendComparison = wgms_utils_tools.install(_FactorTrendComparison);
+const DvWgmsFactorTrendComparison = tools.install(index.default);
 
+exports.default = index.default;
 exports.DvWgmsFactorTrendComparison = DvWgmsFactorTrendComparison;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const index_vue_vue_type_script_setup_true_lang = require('./index.vue2.js');
+require('./index.vue3.js');
+const _pluginVue_exportHelper = require('../../../_virtual/_plugin-vue_export-helper.js');
+
+const _FactorTrendComparison = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-7ed62af5"]]);
+
+exports.default = _FactorTrendComparison;