@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" />
212 lines (209 loc) • 7.2 kB
JavaScript
import { defineComponent, reactive, ref, onMounted, watch, nextTick, toRefs, openBlock, createElementBlock, createElementVNode, Fragment, renderList, unref, normalizeClass, toDisplayString, normalizeStyle } from 'vue';
import { sumBy } from 'lodash-es';
import 'echarts-gl';
import echarts from '../../utils/echarts/index.mjs';
import { getPie3D } from '../../utils/echarts/3dChartOptions.mjs';
import { getOutletsOnlineData } from './api/index.mjs';
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__ */ 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__ */ createElementVNode("div", { class: "split" }, " / ", -1);
const _hoisted_14 = { class: "rate" };
const _sfc_main = /* @__PURE__ */ 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 = reactive({
toggleList: [
{ label: "入河排污口", value: "0" },
{ label: "入海排污口", value: "1" }
],
activeIndex: 0,
total: 0,
optionData: []
});
const pieChart = ref();
onMounted(async () => {
!props.isLazy && getResData();
});
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 = sumBy(wgmsData.optionData, (o) => {
return o.value;
});
await nextTick();
initChart();
return;
}
const { data: res } = await 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 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 = getPie3D(pieData, 0.6, 185, 38, 16, 1);
echarts.draw(pieChart.value, options);
};
const changeList = (index) => {
wgmsData.activeIndex = index;
getResData();
};
const {
toggleList,
activeIndex,
total,
optionData
} = toRefs(wgmsData);
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(toggleList), (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: normalizeClass([unref(activeIndex) === index ? "active" : "", "list-one dv-wgms-flex-center-center"]),
onClick: ($event) => changeList(index)
}, toDisplayString(item.label), 11, _hoisted_3);
}), 128))
]),
createElementVNode("div", _hoisted_4, [
createElementVNode("div", _hoisted_5, [
createElementVNode("div", _hoisted_6, [
_hoisted_7,
createElementVNode("span", null, toDisplayString(unref(total)), 1)
]),
createElementVNode("div", {
ref_key: "pieChart",
ref: pieChart,
class: "pie-chart"
}, null, 512)
]),
createElementVNode("div", _hoisted_8, [
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(optionData), (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: "legend-one dv-wgms-flex-between-center"
}, [
createElementVNode("div", _hoisted_9, [
createElementVNode("div", {
class: "circle",
style: normalizeStyle({ background: item.itemStyle.color })
}, null, 4),
createElementVNode("div", _hoisted_10, toDisplayString(item.name), 1)
]),
createElementVNode("div", _hoisted_11, [
createElementVNode("div", _hoisted_12, toDisplayString(item.value), 1),
_hoisted_13,
createElementVNode("div", _hoisted_14, toDisplayString(item.rate) + "% ", 1)
])
]);
}), 128))
])
])
]);
};
}
});
export { _sfc_main as default };