@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" />
216 lines (211 loc) • 7.36 kB
JavaScript
'use strict';
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const vue = require('vue');
const lodashEs = require('lodash-es');
require('echarts-gl');
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: "dv-wgms-outlet-online" };
const _hoisted_2 = { class: "toggle-list dv-wgms-flex-between-center" };
const _hoisted_3 = ["onClick"];
const _hoisted_4 = { class: "chart-content dv-wgms-flex-between-center" };
const _hoisted_5 = { class: "left" };
const _hoisted_6 = { class: "total" };
const _hoisted_7 = /* @__PURE__ */ vue.createElementVNode("span", null, "总数：", -1);
const _hoisted_8 = { class: "legend" };
const _hoisted_9 = { class: "left-c dv-wgms-flex-left-center" };
const _hoisted_10 = { class: "name" };
const _hoisted_11 = { class: "righ-c dv-wgms-flex-left-center" };
const _hoisted_12 = { class: "num" };
const _hoisted_13 = /* @__PURE__ */ vue.createElementVNode("div", { class: "split" }, " / ", -1);
const _hoisted_14 = { class: "rate" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "DvWgmsSewageOutletsOnlineMonitor",
title: "入河、入海排污口"
},
__name: "index",
props: {
params: { default: () => {
return {
regionCode: "3301"
};
} },
colorArr: { default: () => {
return ["#F84439", "#FDBD00", "#15F3A3", "#00DEFF", "#1976D2", "#F2BE32", "#00E87E"];
} },
data: { default: () => {
return {
total: 80,
0: [
{
name: "雨水排口",
value: 10,
rate: 20,
itemStyle: { color: "#F84439" }
},
{
name: "工业排污口",
value: 20,
rate: 40,
itemStyle: { color: "#FAAD14" }
},
{
name: "城镇污水处理厂排污口",
value: 10,
rate: 20,
itemStyle: { color: "#00E87E" }
},
{
name: "其他排口",
value: 10,
rate: 20,
itemStyle: { color: "#00DEFF" }
}
],
1: [
{
name: "入海排口",
value: 30,
rate: 50,
itemStyle: { color: "#F84439" }
},
{
name: "工业排污口",
value: 20,
rate: 33.33,
itemStyle: { color: "#FAAD14" }
},
{
name: "其他排口",
value: 10,
rate: 16.67,
itemStyle: { color: "#00DEFF" }
}
]
};
} },
isLazy: { type: Boolean, default: false }
},
setup(__props) {
const props = __props;
const wgmsData = vue.reactive({
toggleList: [
{ label: "入河排污口", value: "0" },
{ label: "入海排污口", value: "1" }
],
activeIndex: 0,
total: 0,
optionData: []
});
const pieChart = vue.ref();
vue.onMounted(async () => {
!props.isLazy && getResData();
});
vue.watch([() => props.params, () => props.data, () => props.isLazy], () => {
!props.isLazy && getResData();
}, { deep: true });
const getResData = async () => {
if (props.data && Reflect.ownKeys(props.data).length) {
wgmsData.optionData = props.data[wgmsData.activeIndex];
wgmsData.total = lodashEs.sumBy(wgmsData.optionData, (o) => {
return o.value;
});
await vue.nextTick();
initChart();
return;
}
const { data: res } = await index.getOutletsOnlineData({
...props.params,
outletType: wgmsData.toggleList[wgmsData.activeIndex].value
});
if (res) {
wgmsData.total = res.total;
if (res.outletOnlineDetailList && res.outletOnlineDetailList.length) {
wgmsData.optionData = res.outletOnlineDetailList.map((item, index) => {
return {
...item,
rate: res.total ? (item.onlineCount / res.total * 100).toFixed(2) : 0,
value: item.onlineCount,
itemStyle: {
color: props.colorArr[index]
}
};
});
await vue.nextTick();
initChart();
}
}
};
const initChart = () => {
const pieData = wgmsData.optionData.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(pieChart.value, options);
};
const changeList = (index) => {
wgmsData.activeIndex = index;
getResData();
};
const {
toggleList,
activeIndex,
total,
optionData
} = vue.toRefs(wgmsData);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("div", _hoisted_2, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(toggleList), (item, index) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: index,
class: vue.normalizeClass([vue.unref(activeIndex) === index ? "active" : "", "list-one dv-wgms-flex-center-center"]),
onClick: ($event) => changeList(index)
}, vue.toDisplayString(item.label), 11, _hoisted_3);
}), 128))
]),
vue.createElementVNode("div", _hoisted_4, [
vue.createElementVNode("div", _hoisted_5, [
vue.createElementVNode("div", _hoisted_6, [
_hoisted_7,
vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(total)), 1)
]),
vue.createElementVNode("div", {
ref_key: "pieChart",
ref: pieChart,
class: "pie-chart"
}, null, 512)
]),
vue.createElementVNode("div", _hoisted_8, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(optionData), (item, index) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: index,
class: "legend-one dv-wgms-flex-between-center"
}, [
vue.createElementVNode("div", _hoisted_9, [
vue.createElementVNode("div", {
class: "circle",
style: vue.normalizeStyle({ background: item.itemStyle.color })
}, null, 4),
vue.createElementVNode("div", _hoisted_10, vue.toDisplayString(item.name), 1)
]),
vue.createElementVNode("div", _hoisted_11, [
vue.createElementVNode("div", _hoisted_12, vue.toDisplayString(item.value), 1),
_hoisted_13,
vue.createElementVNode("div", _hoisted_14, vue.toDisplayString(item.rate) + "% ", 1)
])
]);
}), 128))
])
])
]);
};
}
});
exports.default = _sfc_main;