@ued_fpi/data-visual 1.1.4 → 1.1.5

package/dist/lib/ipes/src/HazardousVehicleManage/index.vue.js

@@ -2,11 +2,436 @@
 
 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');
-require('./index.vue4.js');
-const _pluginVue_exportHelper = require('../../../_virtual/_plugin-vue_export-helper.js');
+const es = require('element-plus/es');
+require('element-plus/es/components/base/style/css');
+require('element-plus/es/components/select/style/css');
+require('element-plus/es/components/option/style/css');
+const vue = require('vue');
+const moduleTitleIcon = require('./images/module-title-icon.png.js');
+const dayjs = require('dayjs');
+const Echarts_vue_vue_type_script_setup_true_lang = require('../common/Echarts.vue.js');
+require('../common/Echarts.vue2.js');
+const tools = require('../../utils/tools.js');
+const request = require('../../service/request.js');
 
-const _HazardousVehicleManage = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-64868b24"]]);
+const _hoisted_1 = { class: "dv-ipes-hazardous-vehicle-manage" };
+const _hoisted_2 = { class: "sealing-row" };
+const _hoisted_3 = { class: "sealing-header" };
+const _hoisted_4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "sealing-header__title" }, [
+  /* @__PURE__ */ vue.createElementVNode("img", {
+    src: moduleTitleIcon.default,
+    alt: "",
+    class: "module-icon"
+  }),
+  /* @__PURE__ */ vue.createElementVNode("span", null, "实时动态")
+], -1);
+const _hoisted_5 = { class: "sealing-header__extra" };
+const _hoisted_6 = { class: "hazardous-statistics" };
+const _hoisted_7 = { class: "hazardous-statistics-item" };
+const _hoisted_8 = { class: "hazardous-statistics-item__type" };
+const _hoisted_9 = { class: "hazardous-statistics-item__total" };
+const _hoisted_10 = { class: "hazardous-statistics-item__detail" };
+const _hoisted_11 = { class: "hazardous-statistics-item__col" };
+const _hoisted_12 = { class: "hazardous-statistics-item__label" };
+const _hoisted_13 = { class: "hazardous-statistics-item__value" };
+const _hoisted_14 = { class: "hazardous-statistics-item__col" };
+const _hoisted_15 = { class: "hazardous-statistics-item__label" };
+const _hoisted_16 = { class: "hazardous-statistics-item__value" };
+const _hoisted_17 = { class: "hazardous-statistics-item" };
+const _hoisted_18 = { class: "hazardous-statistics-item__type" };
+const _hoisted_19 = { class: "hazardous-statistics-item__total" };
+const _hoisted_20 = { class: "hazardous-statistics-item__detail" };
+const _hoisted_21 = { class: "hazardous-statistics-item__col" };
+const _hoisted_22 = { class: "hazardous-statistics-item__label" };
+const _hoisted_23 = { class: "hazardous-statistics-item__value" };
+const _hoisted_24 = { class: "hazardous-statistics-item__col" };
+const _hoisted_25 = { class: "hazardous-statistics-item__label" };
+const _hoisted_26 = { class: "hazardous-statistics-item__value" };
+const _hoisted_27 = { class: "sealing-row" };
+const _hoisted_28 = /* @__PURE__ */ vue.createElementVNode("div", {
+  class: "sealing-header",
+  style: { "margin": "8px 0" }
+}, [
+  /* @__PURE__ */ vue.createElementVNode("div", { class: "sealing-header__title" }, [
+    /* @__PURE__ */ vue.createElementVNode("img", {
+      src: moduleTitleIcon.default,
+      alt: "",
+      class: "module-icon"
+    }),
+    /* @__PURE__ */ vue.createElementVNode("span", null, "进出园区车辆统计"),
+    /* @__PURE__ */ vue.createElementVNode("span", { class: "sealing-header__title--sub" }, "（近10日）")
+  ])
+], -1);
+const _hoisted_29 = { class: "hazardous-list" };
+const __default__ = {
+  name: "DvIpesHazardousVehicleManage",
+  title: "危险品车辆管理"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: {
+    // 进出园车辆统计
+    getVehicleCount: {
+      type: String,
+      default: "/ipes-prj-map-server/api/v1/web/closed-end/get-vehicle-count"
+    },
+    // 实时动态
+    getAlarmCountNew: {
+      type: String,
+      default: "/xizhongdao-cockpit-server/hazardous/chemicals/getAlarmCountNew"
+    },
+    // 在线状态统计-报警统计
+    getAlarmIsAllCountNew: {
+      type: String,
+      default: "/xizhongdao-cockpit-server/hazardous/chemicals/getAlarmIsAllCountNew"
+    },
+    // 园区类型
+    parkOptions: {
+      type: Array,
+      default: () => [
+        {
+          value: "",
+          label: "全部"
+        },
+        {
+          value: "0",
+          label: "西中岛"
+        },
+        {
+          value: "1",
+          label: "长兴岛"
+        }
+      ]
+    }
+  },
+  emits: {
+    onParkTypeChange: (value) => value
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    const colors = [
+      {
+        color: "rgba(10, 174, 255, 1)",
+        shadowColor: "rgba(10, 174, 255, 0.3)"
+      },
+      {
+        color: "rgba(255, 180, 67, 1)",
+        shadowColor: "rgba(255, 180, 67, 0.3)"
+      }
+    ];
+    const hazardousCar = vue.reactive({
+      sfCount: 0,
+      // 外来车辆数
+      sfCountTitle: "外来车辆数",
+      // 外来车辆数
+      dnCount: 0,
+      // 自有车辆数
+      dnCountTitle: "自有车辆数",
+      // 自有车辆数
+      ynCount: 0,
+      // 园区车辆
+      ynCountTitle: "园区车辆",
+      // 园区车辆
+      zxCount: 0,
+      // 在线车辆数
+      zxCountTitle: "在线车辆数",
+      // 在线车辆数
+      lxCount: 0,
+      // 离线车辆数
+      lxCountTitle: "离线车辆数",
+      // 离线车辆数
+      zxPercent: 0,
+      // 车辆在线状态
+      zxPercentTitle: "车辆在线状态"
+      // 车辆在线状态
+    });
+    const parkType = vue.ref("");
+    const chartLoading = vue.ref(true);
+    const chartOption = vue.reactive({
+      options: {}
+    });
+    const _parkOptions = vue.computed(() => props.parkOptions);
+    vue.onMounted(() => {
+      getAlarmCountNew();
+      getVehicleCount();
+      chartLoading.value = false;
+    });
+    const handleParkTypeChange = (value) => {
+      emit("onParkTypeChange", value);
+      getAlarmCountNew();
+    };
+    const toolTipFormatter = (params) => {
+      const data = [...params];
+      const field = data.map((item) => {
+        const { marker, seriesName, value } = item;
+        return `
+                      <div class="tool-tips__row">
+                          <div class="tool-tips__label"><span class="tool-tips__marker">${marker}</span>${seriesName}</div>
+                          <div class="tool-tips__value"><span>${value}</span><span class="tool-tips__suffix">辆</span></div>
+                      </div>
+                `;
+      });
+      field.unshift(`<div class="tool-tips__row tool-tips__title">${data[0]?.name}</div>`);
+      return field.join("");
+    };
+    const getAlarmCountNew = async () => {
+      try {
+        const res = await Promise.all([
+          // 实时动态
+          request.default({
+            method: "get",
+            url: props.getAlarmCountNew,
+            params: {
+              area: parkType.value,
+              startTime: dayjs().format("YYYY-MM-DD"),
+              endTime: dayjs().format("YYYY-MM-DD")
+            }
+          }),
+          // 在线状态统计-报警统计
+          request.default({
+            method: "get",
+            url: props.getAlarmIsAllCountNew,
+            params: {
+              yearMonth: dayjs().format("YYYY-MM"),
+              area: parkType.value
+            }
+          })
+        ]);
+        const { sfCount = 0, dnCount = 0, ynCount = 0 } = res[0]?.entries || {};
+        const { zxCount = 0, lxCount = 0 } = res[1]?.entries || {};
+        Object.assign(hazardousCar, {
+          ...hazardousCar,
+          duration: 0.3,
+          sfCount,
+          dnCount,
+          ynCount,
+          zxCount: Number(zxCount),
+          lxCount,
+          zxPercent: (zxCount || 0) / ((lxCount || 0) + (zxCount || 0)) * 100
+        });
+      } catch (e) {
+        console.log(e);
+      }
+    };
+    const getVehicleCount = async () => {
+      try {
+        const res = await request.default({
+          method: "get",
+          url: props.getVehicleCount,
+          params: {
+            // 近10日
+            startTime: dayjs().subtract(9, "day").format("YYYY-MM-DD"),
+            endTime: dayjs().format("YYYY-MM-DD")
+          }
+        });
+        const data = res.data;
+        const list = [
+          // 类别  1_驶出；0_进入
+          {
+            lb: 0,
+            name: "驶入",
+            // eslint-disable-next-line eqeqeq
+            data: (data || []).filter((i) => i.lb == 0).map((i) => i.sl)
+          },
+          {
+            lb: 1,
+            name: "驶出",
+            data: (data || []).filter((i) => i.lb === 1).map((i) => i.sl)
+          }
+        ];
+        setOptions(list);
+      } catch (e) {
+        setOptions([]);
+        console.log(e);
+      }
+    };
+    const setOptions = (list) => {
+      chartOption.options = {
+        // 网格位置
+        grid: {
+          top: "33px",
+          left: "10px",
+          right: "12px",
+          bottom: "3px",
+          containLabel: true
+        },
+        // 全局字体样式
+        textStyle: {
+          color: "#fff",
+          fontSize: 16,
+          fontFamily: tools.getFontFamily("--font-family-text")
+        },
+        // 提示框
+        tooltip: {
+          confine: true,
+          // 不让超出显示
+          trigger: "axis",
+          formatter: toolTipFormatter,
+          padding: [8, 12, 8, 12],
+          className: "echarts-tooltip tool-tips__panel",
+          backgroundColor: "rgba(7, 29, 51, 0.95)",
+          borderColor: "rgba(0, 212, 255, 0.2)",
+          borderWidth: 1
+        },
+        // 图例组件
+        legend: {
+          // 图例项
+          data: list.map((item) => {
+            return {
+              name: item.name,
+              textStyle: {
+                color: "#fff",
+                fontSize: 16
+              }
+            };
+          }),
+          // 图例样式
+          icon: "circle",
+          // 圆
+          // 图例大小
+          itemHeight: 10,
+          itemWidth: 10
+        },
+        // X轴
+        xAxis: {
+          // 坐标轴名称。
+          name: "",
+          // 坐标轴类型。 category-->类目轴
+          type: "category",
+          // 最近十天的数据
+          data: new Array(list[0]?.data?.length || 10).fill("").map((_, idx) => `${dayjs().subtract(idx, "day").format("MM.DD")}`).reverse(),
+          // 距离坐标原点是否有间隙
+          boundaryGap: true,
+          axisLine: {
+            // 是否显示坐标轴轴线。
+            show: false
+          },
+          axisTick: {
+            // 是否显示坐标轴刻度。
+            show: false
+          }
+        },
+        // Y轴
+        yAxis: {
+          // 分割线及样式
+          splitLine: {
+            show: true,
+            lineStyle: { color: ["rgba(27, 121, 211, 0.5)"] }
+          },
+          // 坐标轴类型
+          type: "value",
+          // 坐标轴刻度标签的相关设置。
+          axisLabel: {
+            color: "rgba(255,255,255,0.6)",
+            fontSize: 16
+          },
+          axisLine: {
+            // 是否显示坐标轴轴线。
+            show: false
+          },
+          // 坐标轴名称与轴线之间的距离。
+          nameGap: 4
+        },
+        // 折线图
+        series: list.map((item, idx) => {
+          return {
+            // 系列名称，用于tooltip的显示，legend 的图例筛选
+            name: item.name,
+            // 鼠标悬浮标记的图形
+            symbol: "emptyCircle",
+            // 默认emptyCircle
+            // 标记的大小
+            symbolSize: 4,
+            type: "line",
+            data: item.data,
+            // 折线拐点标志的样式。
+            itemStyle: {
+              color: colors[idx % colors.length].color,
+              shadowColor: colors[idx % colors.length].shadowColor,
+              shadowBlur: 8,
+              shadowOffsetX: 3,
+              shadowOffsetY: 3
+            }
+          };
+        })
+      };
+    };
+    return (_ctx, _cache) => {
+      const _component_el_option = es.ElOption;
+      const _component_el_select = es.ElSelect;
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.createElementVNode("div", _hoisted_3, [
+            _hoisted_4,
+            vue.createElementVNode("div", _hoisted_5, [
+              vue.createVNode(_component_el_select, {
+                modelValue: parkType.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => parkType.value = $event),
+                class: "fpi-select",
+                onChange: handleParkTypeChange
+              }, {
+                default: vue.withCtx(() => [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_parkOptions.value, (item) => {
+                    return vue.openBlock(), vue.createBlock(_component_el_option, {
+                      key: item.value,
+                      value: item.value,
+                      label: item.label
+                    }, null, 8, ["value", "label"]);
+                  }), 128))
+                ]),
+                _: 1
+              }, 8, ["modelValue"])
+            ])
+          ]),
+          vue.createElementVNode("div", _hoisted_6, [
+            vue.createElementVNode("div", _hoisted_7, [
+              vue.createElementVNode("div", _hoisted_8, vue.toDisplayString(hazardousCar.ynCountTitle), 1),
+              vue.createElementVNode("div", _hoisted_9, [
+                vue.createElementVNode("span", null, vue.toDisplayString(hazardousCar.ynCount), 1)
+              ]),
+              vue.createElementVNode("div", _hoisted_10, [
+                vue.createElementVNode("div", _hoisted_11, [
+                  vue.createElementVNode("div", _hoisted_12, vue.toDisplayString(hazardousCar.dnCountTitle), 1),
+                  vue.createElementVNode("div", _hoisted_13, vue.toDisplayString(hazardousCar.dnCount), 1)
+                ]),
+                vue.createElementVNode("div", _hoisted_14, [
+                  vue.createElementVNode("div", _hoisted_15, vue.toDisplayString(hazardousCar.sfCountTitle), 1),
+                  vue.createElementVNode("div", _hoisted_16, vue.toDisplayString(hazardousCar.sfCount), 1)
+                ])
+              ])
+            ]),
+            vue.createElementVNode("div", _hoisted_17, [
+              vue.createElementVNode("div", _hoisted_18, vue.toDisplayString(hazardousCar.zxPercentTitle), 1),
+              vue.createElementVNode("div", _hoisted_19, [
+                vue.createElementVNode("span", null, vue.toDisplayString(hazardousCar.zxPercent.toFixed(1)) + "%", 1)
+              ]),
+              vue.createElementVNode("div", _hoisted_20, [
+                vue.createElementVNode("div", _hoisted_21, [
+                  vue.createElementVNode("div", _hoisted_22, vue.toDisplayString(hazardousCar.zxCountTitle), 1),
+                  vue.createElementVNode("div", _hoisted_23, vue.toDisplayString(hazardousCar.zxCount), 1)
+                ]),
+                vue.createElementVNode("div", _hoisted_24, [
+                  vue.createElementVNode("div", _hoisted_25, vue.toDisplayString(hazardousCar.lxCountTitle), 1),
+                  vue.createElementVNode("div", _hoisted_26, vue.toDisplayString(hazardousCar.lxCount), 1)
+                ])
+              ])
+            ])
+          ])
+        ]),
+        vue.createElementVNode("div", _hoisted_27, [
+          _hoisted_28,
+          vue.createElementVNode("div", _hoisted_29, [
+            vue.createVNode(Echarts_vue_vue_type_script_setup_true_lang.default, {
+              id: "hazardous-list",
+              height: "128px",
+              "full-options": chartOption,
+              loading: chartLoading.value
+            }, null, 8, ["full-options", "loading"])
+          ])
+        ])
+      ]);
+    };
+  }
+});
 
-exports.default = _HazardousVehicleManage;
+exports.default = _sfc_main;