@ued_fpi/data-visual
Version:
<br /> <br /> <div style="text-align:center"> <b style="font-size:30px">@ued_fpi/data-visual</b> <p>基于Vite4+TypeScript的Vue3大屏组件库开发框架</p> <img style="display:inline" src="https://img.shields.io/npm/v/@ued_fpi/data-visual" />
174 lines (169 loc) • 7.51 kB
JavaScript
'use strict';
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const vue = require('vue');
require('echarts-gl');
const dayjs = require('dayjs');
const index$1 = require('../../utils/echarts/index.js');
const _3dChartOptions = require('../../utils/echarts/3dChartOptions.js');
const index = require('./api/index.js');
const _hoisted_1 = { class: "algae-monitoring-box" };
const _hoisted_2 = { class: "algae-monitoring-item" };
const _hoisted_3 = { class: "algae-monitoring-every" };
const _hoisted_4 = /* @__PURE__ */ vue.createElementVNode("span", { class: "title" }, "自动监测点", -1);
const _hoisted_5 = { class: "num-box" };
const _hoisted_6 = { class: "num" };
const _hoisted_7 = /* @__PURE__ */ vue.createElementVNode("span", { class: "unit" }, "个", -1);
const _hoisted_8 = { class: "algae-monitoring-every" };
const _hoisted_9 = /* @__PURE__ */ vue.createElementVNode("span", { class: "title" }, "监测数据统计", -1);
const _hoisted_10 = { class: "image-box" };
const _hoisted_11 = { class: "num-box" };
const _hoisted_12 = { class: "num" };
const _hoisted_13 = /* @__PURE__ */ vue.createElementVNode("span", { class: "unit" }, "个", -1);
const _hoisted_14 = { class: "algae-monitoring-item echarts-item" };
const _hoisted_15 = { class: "echarts-box" };
const _hoisted_16 = { class: "echarts-legend-box" };
const _hoisted_17 = { class: "station-total" };
const _hoisted_18 = /* @__PURE__ */ vue.createElementVNode("span", { class: "station-text" }, "站点总数：", -1);
const _hoisted_19 = { class: "station-num" };
const _hoisted_20 = { class: "text" };
const _hoisted_21 = { class: "percent-box" };
const _hoisted_22 = { class: "num" };
const _hoisted_23 = /* @__PURE__ */ vue.createElementVNode("div", { class: "split" }, " / ", -1);
const _hoisted_24 = { class: "percent" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "DvWgmsAlgaeTopicsAutomaticMonitoring",
title: "藻类（叶绿素a）自动监控（1.4）"
},
__name: "index",
props: {
params: { default: () => {
return {
treeType: "1",
treeId: "3301",
beginTime: dayjs().startOf("year").valueOf(),
endTime: dayjs().valueOf(),
isLast: true
};
} },
data: { default: null },
isLazy: { type: Boolean, default: false }
},
setup(__props, { expose: __expose }) {
const props = __props;
const autoMonitorDom = vue.ref();
const validSiteCountNum = vue.ref(0);
const totalSiteCountNum = vue.ref(0);
const countList = vue.ref([]);
const getData = async () => {
if (props.data && Reflect.ownKeys(props.data).length) {
validSiteCountNum.value = props.data.validSiteCountNum;
totalSiteCountNum.value = props.data.totalSiteCountNum;
countList.value = props.data.countList;
generateChart();
return;
}
const res = await index.algaeAutoAlarmStat(props.params);
const resData = res.data;
if (!resData)
return;
const { notAlarmCount, normalAlarmCount, keyAlarmCount, validSiteCount, totalSiteCount } = resData;
const reachRate = validSiteCount ? notAlarmCount / validSiteCount * 100 : 0;
const commonOverRate = validSiteCount ? normalAlarmCount / validSiteCount * 100 : 0;
const keyOverRate = validSiteCount ? keyAlarmCount / validSiteCount * 100 : 0;
let reachRateStr = !reachRate.toString().includes(".") ? reachRate : reachRate.toFixed(2);
let normalOverRateStr = !commonOverRate.toString().includes(".") ? commonOverRate : commonOverRate.toFixed(2);
let keyOverRateStr = !keyOverRate.toString().includes(".") ? keyOverRate : keyOverRate.toFixed(2);
validSiteCountNum.value = validSiteCount;
totalSiteCountNum.value = totalSiteCount;
if (validSiteCount === 0 || validSiteCount === 0) {
reachRateStr = "--";
normalOverRateStr = "--";
keyOverRateStr = "--";
}
countList.value = [
{ name: "常规", value: notAlarmCount, rate: reachRateStr, itemStyle: { color: "#00E87E" } },
{ name: "一般预警", value: normalAlarmCount, rate: normalOverRateStr, itemStyle: { color: "#FF9902" } },
{ name: "重点预警", value: keyAlarmCount, rate: keyOverRateStr, itemStyle: { color: "#F54455" } }
];
generateChart();
};
const generateChart = () => {
const pieData = countList.value.map((item) => {
return {
name: item.name,
value: item.rate === "--" ? 0 : Number(item.rate),
itemStyle: item.itemStyle
};
});
const options = _3dChartOptions.getPie3D(pieData, 0.6, 185, 38, 16, 1);
index$1.default.draw(autoMonitorDom.value, options);
};
vue.onMounted(async () => {
await vue.nextTick();
!props.isLazy && getData();
});
vue.watch([() => props.params, () => props.data, () => props.isLazy], () => {
!props.isLazy && getData();
}, { deep: true });
__expose({
reload: getData
});
return (_ctx, _cache) => {
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.createElementVNode("span", _hoisted_6, vue.toDisplayString(totalSiteCountNum.value), 1),
_hoisted_7
])
]),
vue.createElementVNode("div", _hoisted_8, [
_hoisted_9,
vue.createElementVNode("div", _hoisted_10, [
vue.createElementVNode("div", _hoisted_11, [
vue.createElementVNode("span", _hoisted_12, vue.toDisplayString(validSiteCountNum.value), 1),
_hoisted_13
])
])
])
]),
vue.createElementVNode("div", _hoisted_14, [
vue.createElementVNode("div", _hoisted_15, [
vue.createElementVNode("div", {
id: "sewage-outlet-chart",
ref_key: "autoMonitorDom",
ref: autoMonitorDom,
class: "chart"
}, null, 512)
]),
vue.createElementVNode("div", _hoisted_16, [
vue.createElementVNode("div", _hoisted_17, [
_hoisted_18,
vue.createElementVNode("span", _hoisted_19, vue.toDisplayString(validSiteCountNum.value), 1)
]),
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(countList.value, (item, index) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: index,
class: "echarts-legend"
}, [
vue.createElementVNode("span", {
class: "rect",
style: vue.normalizeStyle({ background: item.itemStyle.color })
}, null, 4),
vue.createElementVNode("span", _hoisted_20, vue.toDisplayString(item.name), 1),
vue.createElementVNode("div", _hoisted_21, [
vue.createElementVNode("span", _hoisted_22, vue.toDisplayString(item.value), 1),
_hoisted_23,
vue.createElementVNode("span", _hoisted_24, vue.toDisplayString(item.rate) + "%", 1)
])
]);
}), 128))
])
])
]);
};
}
});
exports.default = _sfc_main;