@ued_fpi/data-visual 1.1.4 → 1.2.0

package/dist/es/aims/src/MulGridAirQualityLevelMonthRatio/index.vue.mjs

@@ -1,7 +1,213 @@
-import _sfc_main from './index.vue2.mjs';
-import './index.vue3.mjs';
-import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
+import { defineComponent, ref, onMounted, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, unref } from 'vue';
+import { FACTOR_LEVEL_TEXT } from 'fpi-tg-factor-tools';
+import dayjs from 'dayjs';
+import '../common/BasicEcharts/index.mjs';
+import { getMulAirLevelRate } from './api/index.mjs';
+import _sfc_main$1 from '../common/BasicEcharts/index.vue.mjs';
+import '../common/BasicEcharts/index.vue2.mjs';
 
-const _MulGridAirQualityLevelMonthRatio = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-47ee162b"]]);
+const clsfix = "cieq-contributio-ratio";
+const noDataColor = "rgb(255, 255, 255, 0.5)";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    apiParams: { default: () => ({
+      time: dayjs().subtract(1, "h").valueOf(),
+      gridCode: "0100000000",
+      timeType: "year"
+    }) }
+  },
+  setup(__props) {
+    const props = __props;
+    const chartsFullOptions = ref({ options: null });
+    const generateOption = (xData, series) => {
+      return {
+        options: {
+          grid: {
+            left: 10,
+            bottom: 30,
+            right: 10,
+            top: 30,
+            containLabel: true
+          },
+          tooltip: {
+            trigger: "axis",
+            padding: 8,
+            background: "rgba(1, 11, 18, 0.6)",
+            formatter: (params) => {
+              const title = params[0] ? params[0].name : "";
+              const strArr = params.map((item) => {
+                return `<div>
+                            ${item.marker}
+                            <span style="display: inline-block;width: 60px;">${item.seriesName}</span>
+                            <span style="display: inline-block;text-align: right;width: 40px;margin-right:10px;">${Number.isNaN(Number(item.data.day)) ? "--天" : `${item.data.day}天`}</span>
+                            <span style="display: inline-block;text-align: right;width: 40px;">${typeof item.data.value === "number" ? `${item.data.value}%` : "--%"}</span>
+                        </div>`;
+              });
+              const str = strArr.join("");
+              const data = params[0] ? params[0].data : {};
+              const str2 = `
+                        <div style="border-top: 1px solid #f2f2f2;margin-top: 12px;padding-top: 12px;padding-left: 20px;">
+                            <span style="display: inline-block;width: 60px;">优良率</span>
+                            <span style="display: inline-block;text-align: right;width: 40px;margin-right:10px;">${Number.isNaN(Number(data.fineCount)) ? "--天" : `${data.fineCount}天`}</span>
+                            <span style="display: inline-block;text-align: right;width: 40px;">${Number.isNaN(Number(data.fineRate)) ? "--%" : `${data.fineRate}%`}</span>
+                        </div>
+                        <div style="padding-left: 20px;">
+                            <span style="display: inline-block;width: 60px;">超标率</span>
+                            <span style="display: inline-block;text-align: right;width: 40px;margin-right:10px;">${Number.isNaN(Number(data.opCount)) ? "--天" : `${data.opCount}天`}</span>
+                            <span style="display: inline-block;text-align: right;width: 40px;">${Number.isNaN(Number(data.opRate)) ? "--%" : `${data.opRate}%`}</span>
+                        </div>
+                        <div style="padding-left: 20px;">
+                            <span style="display: inline-block;width: 60px;">优良率</span>
+                            <span style="display: inline-block;text-align: right;width: 40px;margin-right:10px;">${Number.isNaN(Number(data.heavyPollutionCount)) ? "--天" : `${data.heavyPollutionCount}天`}</span>
+                        </div>
+                    `;
+              return `<div>
+                        <div>${title}</div>
+                        ${str}
+                        ${str2}
+                    </div>`;
+            }
+          },
+          xAxis: {
+            type: "category",
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              color: "#FFF",
+              fontSize: 12,
+              interval: 0
+            },
+            data: xData
+          },
+          yAxis: {
+            type: "value",
+            name: "%",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              padding: [0, 30, 0, 0]
+            },
+            splitNumber: 3,
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              color: "rgba(255, 255, 255, 0.5)"
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: ["rgba(255, 255, 255, 0.3)"]
+              }
+            }
+          },
+          legend: {
+            show: true,
+            bottom: 0,
+            itemGap: 4,
+            textStyle: {
+              color: "#FFF",
+              fontSize: 12
+            },
+            itemWidth: 10,
+            itemHeight: 10,
+            itemStyle: {
+              borderWidth: 0
+            }
+          },
+          series
+        }
+      };
+    };
+    const list = [
+      {
+        name: "优",
+        value: []
+      },
+      {
+        name: "良",
+        value: []
+      },
+      {
+        name: "轻度污染",
+        value: []
+      },
+      {
+        name: "中度污染",
+        value: []
+      },
+      {
+        name: "重度污染",
+        value: []
+      },
+      {
+        name: "严重污染",
+        value: []
+      }
+    ];
+    const fetchData = () => {
+      getMulAirLevelRate(props.apiParams).then((res) => {
+        if (res.data && res.data) {
+          const data = res.data;
+          const xData = data.map((c) => c.name);
+          const newList = list.map((c, index) => {
+            const values = data.map((item) => {
+              return {
+                ...item,
+                value1: item.levelRates[index],
+                value2: item.levelCounts[index]
+              };
+            });
+            const obj = FACTOR_LEVEL_TEXT.find((i) => c.name.includes(i.label));
+            return {
+              name: c.name,
+              data: values.map((c2) => {
+                return {
+                  value: c2.value1,
+                  day: c2.value2,
+                  ...c2
+                };
+              }),
+              type: "bar",
+              stack: "x",
+              color: obj ? obj.color : noDataColor,
+              barWidth: 15
+            };
+          });
+          chartsFullOptions.value = generateOption(xData, newList);
+        }
+      });
+    };
+    onMounted(() => {
+      fetchData();
+    });
+    watch(() => props.apiParams, () => {
+      fetchData();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(`${clsfix}-container`)
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(`${clsfix}-echarts`)
+        }, [
+          createVNode(unref(_sfc_main$1), {
+            height: "100%",
+            "full-options": chartsFullOptions.value,
+            loading: false
+          }, null, 8, ["full-options"])
+        ], 2)
+      ], 2);
+    };
+  }
+});
 
-export { _MulGridAirQualityLevelMonthRatio as default };
+export { _sfc_main as default };

package/dist/es/aims/src/MulGridAirQualityLevelMonthRatio/index.vue2.mjs

@@ -1,212 +1,3 @@
-import { defineComponent, ref, onMounted, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, unref } from 'vue';
-import { FACTOR_LEVEL_TEXT } from 'fpi-tg-factor-tools';
-import dayjs from 'dayjs';
-import '../common/BasicEcharts/index.mjs';
-import { getMulAirLevelRate } from './api/index.mjs';
-import _BasicEcharts from '../common/BasicEcharts/index.vue.mjs';
+/* unplugin-vue-components disabled */const index_vue_vue_type_style_index_0_lang = '';
 
-const clsfix = "cieq-contributio-ratio";
-const noDataColor = "rgb(255, 255, 255, 0.5)";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "index",
-  props: {
-    apiParams: { default: () => ({
-      time: dayjs().subtract(1, "h").valueOf(),
-      gridCode: "0100000000",
-      timeType: "year"
-    }) }
-  },
-  setup(__props) {
-    const props = __props;
-    const chartsFullOptions = ref({ options: null });
-    const generateOption = (xData, series) => {
-      return {
-        options: {
-          grid: {
-            left: 10,
-            bottom: 30,
-            right: 10,
-            top: 30,
-            containLabel: true
-          },
-          tooltip: {
-            trigger: "axis",
-            padding: 8,
-            background: "rgba(1, 11, 18, 0.6)",
-            formatter: (params) => {
-              const title = params[0] ? params[0].name : "";
-              const strArr = params.map((item) => {
-                return `<div>
-                            ${item.marker}
-                            <span style="display: inline-block;width: 60px;">${item.seriesName}</span>
-                            <span style="display: inline-block;text-align: right;width: 40px;margin-right:10px;">${Number.isNaN(Number(item.data.day)) ? "--天" : `${item.data.day}天`}</span>
-                            <span style="display: inline-block;text-align: right;width: 40px;">${typeof item.data.value === "number" ? `${item.data.value}%` : "--%"}</span>
-                        </div>`;
-              });
-              const str = strArr.join("");
-              const data = params[0] ? params[0].data : {};
-              const str2 = `
-                        <div style="border-top: 1px solid #f2f2f2;margin-top: 12px;padding-top: 12px;padding-left: 20px;">
-                            <span style="display: inline-block;width: 60px;">优良率</span>
-                            <span style="display: inline-block;text-align: right;width: 40px;margin-right:10px;">${Number.isNaN(Number(data.fineCount)) ? "--天" : `${data.fineCount}天`}</span>
-                            <span style="display: inline-block;text-align: right;width: 40px;">${Number.isNaN(Number(data.fineRate)) ? "--%" : `${data.fineRate}%`}</span>
-                        </div>
-                        <div style="padding-left: 20px;">
-                            <span style="display: inline-block;width: 60px;">超标率</span>
-                            <span style="display: inline-block;text-align: right;width: 40px;margin-right:10px;">${Number.isNaN(Number(data.opCount)) ? "--天" : `${data.opCount}天`}</span>
-                            <span style="display: inline-block;text-align: right;width: 40px;">${Number.isNaN(Number(data.opRate)) ? "--%" : `${data.opRate}%`}</span>
-                        </div>
-                        <div style="padding-left: 20px;">
-                            <span style="display: inline-block;width: 60px;">优良率</span>
-                            <span style="display: inline-block;text-align: right;width: 40px;margin-right:10px;">${Number.isNaN(Number(data.heavyPollutionCount)) ? "--天" : `${data.heavyPollutionCount}天`}</span>
-                        </div>
-                    `;
-              return `<div>
-                        <div>${title}</div>
-                        ${str}
-                        ${str2}
-                    </div>`;
-            }
-          },
-          xAxis: {
-            type: "category",
-            axisTick: {
-              show: false
-            },
-            axisLine: {
-              show: false
-            },
-            axisLabel: {
-              color: "#FFF",
-              fontSize: 12,
-              interval: 0
-            },
-            data: xData
-          },
-          yAxis: {
-            type: "value",
-            name: "%",
-            nameTextStyle: {
-              color: "rgba(255, 255, 255, 0.5)",
-              padding: [0, 30, 0, 0]
-            },
-            splitNumber: 3,
-            axisTick: {
-              show: false
-            },
-            axisLine: {
-              show: false
-            },
-            axisLabel: {
-              show: true,
-              color: "rgba(255, 255, 255, 0.5)"
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: ["rgba(255, 255, 255, 0.3)"]
-              }
-            }
-          },
-          legend: {
-            show: true,
-            bottom: 0,
-            itemGap: 4,
-            textStyle: {
-              color: "#FFF",
-              fontSize: 12
-            },
-            itemWidth: 10,
-            itemHeight: 10,
-            itemStyle: {
-              borderWidth: 0
-            }
-          },
-          series
-        }
-      };
-    };
-    const list = [
-      {
-        name: "优",
-        value: []
-      },
-      {
-        name: "良",
-        value: []
-      },
-      {
-        name: "轻度污染",
-        value: []
-      },
-      {
-        name: "中度污染",
-        value: []
-      },
-      {
-        name: "重度污染",
-        value: []
-      },
-      {
-        name: "严重污染",
-        value: []
-      }
-    ];
-    const fetchData = () => {
-      getMulAirLevelRate(props.apiParams).then((res) => {
-        if (res.data && res.data) {
-          const data = res.data;
-          const xData = data.map((c) => c.name);
-          const newList = list.map((c, index) => {
-            const values = data.map((item) => {
-              return {
-                ...item,
-                value1: item.levelRates[index],
-                value2: item.levelCounts[index]
-              };
-            });
-            const obj = FACTOR_LEVEL_TEXT.find((i) => c.name.includes(i.label));
-            return {
-              name: c.name,
-              data: values.map((c2) => {
-                return {
-                  value: c2.value1,
-                  day: c2.value2,
-                  ...c2
-                };
-              }),
-              type: "bar",
-              stack: "x",
-              color: obj ? obj.color : noDataColor,
-              barWidth: 15
-            };
-          });
-          chartsFullOptions.value = generateOption(xData, newList);
-        }
-      });
-    };
-    onMounted(() => {
-      fetchData();
-    });
-    watch(() => props.apiParams, () => {
-      fetchData();
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(`${clsfix}-container`)
-      }, [
-        createElementVNode("div", {
-          class: normalizeClass(`${clsfix}-echarts`)
-        }, [
-          createVNode(unref(_BasicEcharts), {
-            height: "100%",
-            "full-options": chartsFullOptions.value,
-            loading: false
-          }, null, 8, ["full-options"])
-        ], 2)
-      ], 2);
-    };
-  }
-});
-
-export { _sfc_main as default };
+export { index_vue_vue_type_style_index_0_lang as default };

package/dist/es/aims/src/MulGridAirQualityLevelMonthRatio/index.vue3.mjs

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

package/dist/es/aims/src/MulGridCieqContributionMonthRatio/index.mjs

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

package/dist/es/aims/src/MulGridCieqContributionMonthRatio/index.vue.mjs

@@ -1,7 +1,169 @@
-import _sfc_main from './index.vue2.mjs';
-import './index.vue3.mjs';
-import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
+import { defineComponent, ref, onMounted, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, unref } from 'vue';
+import { BASE_FACTOR } from 'fpi-tg-factor-tools';
+import dayjs from 'dayjs';
+import '../common/BasicEcharts/index.mjs';
+import { getCieqRate } from './api/index.mjs';
+import _sfc_main$1 from '../common/BasicEcharts/index.vue.mjs';
+import '../common/BasicEcharts/index.vue2.mjs';
 
-const _MulGridCieqContributionMonthRatio = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7e17afde"]]);
+const clsfix = "cieq-contributio-ratio";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    apiParams: { default: () => ({
+      time: dayjs().subtract(1, "h").valueOf(),
+      gridCode: "0100000000",
+      timeType: "year"
+    }) }
+  },
+  setup(__props) {
+    const props = __props;
+    const chartsFullOptions = ref({ options: null });
+    const generateOption = (xData, series) => {
+      return {
+        options: {
+          colors: [
+            "#0062FF",
+            "#0AAEFF",
+            "#2AC94F",
+            "#FF792E",
+            "#F84439",
+            "#FFB443"
+          ],
+          grid: {
+            left: 10,
+            bottom: 30,
+            right: 10,
+            top: 30,
+            containLabel: true
+          },
+          tooltip: {
+            trigger: "axis",
+            padding: 8,
+            background: "rgba(1, 11, 18, 0.6)",
+            formatter: (params) => {
+              const title = params[0] ? params[0].name : "";
+              const cieq = params[0] ? params[0].data.cieq : "";
+              const strArr = params.map((item) => {
+                return `<div>
+                            ${item.marker}
+                            <span style="display: inline-block;width: 60px;">${item.seriesName}</span>
+                            <span style="display: inline-block;text-align: right;width: 30px;margin-right:10px;">${Number.isNaN(Number(item.data.value)) ? "--" : `${item.data.value}`}</span>
+                            <span style="display: inline-block;text-align: right;width: 40px;">${typeof item.data.rate === "number" ? `${item.data.rate}%` : "--%"}</span>
+                        </div>`;
+              });
+              const str = strArr.join("");
+              return `<div>
+                        <div>${title}</div>
+                        <div><span style="display: inline-block;width: 60px;">综合指数</span><span>${cieq}</span></div>
+                        ${str}
+                    </div>`;
+            }
+          },
+          xAxis: {
+            type: "category",
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              color: "#FFF",
+              fontSize: 12,
+              interval: 0
+            },
+            data: xData
+          },
+          yAxis: {
+            type: "value",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              padding: [0, 30, 0, 0]
+            },
+            splitNumber: 3,
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              color: "rgba(255, 255, 255, 0.5)"
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: ["rgba(255, 255, 255, 0.3)"]
+              }
+            }
+          },
+          legend: {
+            show: true,
+            bottom: 0,
+            itemGap: 10,
+            textStyle: {
+              color: "#FFF",
+              fontSize: 12
+            },
+            itemWidth: 10,
+            itemHeight: 10,
+            itemStyle: {
+              borderWidth: 0
+            }
+          },
+          series
+        }
+      };
+    };
+    const fetchData = () => {
+      getCieqRate(props.apiParams).then((res) => {
+        if (res.data && res.data) {
+          const data = res.data;
+          const xData = data.map((c) => c.name);
+          const list = BASE_FACTOR.filter((item) => item.code !== "aqi").map((item) => {
+            const values = data.map((c) => {
+              const obj = c.icieqs.find((o) => o.factorName === item.name);
+              return {
+                ...obj,
+                cieq: c.cieq
+              };
+            });
+            return {
+              name: item.name,
+              type: "bar",
+              stack: "x",
+              data: values,
+              barWidth: 15
+            };
+          });
+          chartsFullOptions.value = generateOption(xData, list);
+        }
+      });
+    };
+    onMounted(() => {
+      fetchData();
+    });
+    watch(() => props.apiParams, () => {
+      fetchData();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(`${clsfix}-container`)
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(`${clsfix}-echarts`)
+        }, [
+          createVNode(unref(_sfc_main$1), {
+            height: "100%",
+            "full-options": chartsFullOptions.value,
+            loading: false
+          }, null, 8, ["full-options"])
+        ], 2)
+      ], 2);
+    };
+  }
+});
 
-export { _MulGridCieqContributionMonthRatio as default };
+export { _sfc_main as default };