@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" />
288 lines (283 loc) • 11.2 kB
JavaScript
'use strict';
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
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 dayjs = require('dayjs');
const tools = require('../../utils/tools.js');
const index = require('./types/index.js');
const _hoisted_1 = { class: "dv-ipes-hazardous-vehicle-manage" };
const _hoisted_2 = { class: "sealing-row" };
const _hoisted_3 = { class: "sealing-header" };
const _hoisted_4 = { class: "sealing-header__title" };
const _hoisted_5 = /* @__PURE__ */ vue.createElementVNode("span", null, "实时动态", -1);
const _hoisted_6 = { class: "sealing-header__title--sub" };
const _hoisted_7 = { class: "sealing-header__extra" };
const _hoisted_8 = { class: "hazardous-statistics" };
const _hoisted_9 = { class: "hazardous-statistics-item" };
const _hoisted_10 = { class: "hazardous-statistics-item__type" };
const _hoisted_11 = { class: "hazardous-statistics-item__total" };
const _hoisted_12 = { class: "hazardous-statistics-item__detail" };
const _hoisted_13 = { class: "hazardous-statistics-item__col" };
const _hoisted_14 = { class: "hazardous-statistics-item__label" };
const _hoisted_15 = { class: "hazardous-statistics-item__value" };
const _hoisted_16 = { class: "hazardous-statistics-item__col" };
const _hoisted_17 = { class: "hazardous-statistics-item__label" };
const _hoisted_18 = { class: "hazardous-statistics-item__value" };
const _hoisted_19 = { class: "hazardous-statistics-item" };
const _hoisted_20 = { class: "hazardous-statistics-item__type" };
const _hoisted_21 = { class: "hazardous-statistics-item__total" };
const _hoisted_22 = { class: "hazardous-statistics-item__detail" };
const _hoisted_23 = { class: "hazardous-statistics-item__col" };
const _hoisted_24 = { class: "hazardous-statistics-item__label" };
const _hoisted_25 = { class: "hazardous-statistics-item__value" };
const _hoisted_26 = { class: "hazardous-statistics-item__col" };
const _hoisted_27 = { class: "hazardous-statistics-item__label" };
const _hoisted_28 = { class: "hazardous-statistics-item__value" };
const __default__ = {
name: "DvIpesHazardousVehicleManage",
title: "危险品车辆管理"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: vue.mergeDefaults({
hazardousCar: {},
parkOptions: {},
carData: {}
}, {
...index.defaultProps
}),
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 today = vue.ref(dayjs().format("YYYY-MM-DD"));
const parkType = vue.ref("");
const chartLoading = vue.ref(true);
const chartOption = vue.reactive({
options: {}
});
const handleParkTypeChange = (value) => {
emit("onParkTypeChange", value);
};
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 setOptions = (list) => {
chartOption.options = {
// 网格位置
grid: {
top: "33px",
left: "10px",
right: "12px",
bottom: "3px",
containLabel: true
},
// 全局字体样式
textStyle: {
color: tools.getCssValue("--dv-color-text-primary"),
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: tools.getCssValue("--dv-color-text-primary"),
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: tools.getCssValue("--dv-color-text-primary"),
fontSize: 16,
opacity: 0.6
},
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
}
};
})
};
};
vue.watch(
() => props.carData,
(newVal) => {
if (newVal) {
chartLoading.value = true;
setOptions(newVal);
chartLoading.value = false;
}
},
{ immediate: true }
);
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, [
vue.createElementVNode("div", _hoisted_4, [
_hoisted_5,
vue.createElementVNode("span", _hoisted_6, "（" + vue.toDisplayString(today.value) + "）", 1)
]),
vue.createElementVNode("div", _hoisted_7, [
vue.createVNode(_component_el_select, {
modelValue: parkType.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => parkType.value = $event),
"popper-append-to-body": false,
class: "fpi-select",
onChange: handleParkTypeChange
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.parkOptions, (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_8, [
vue.createElementVNode("div", _hoisted_9, [
vue.createElementVNode("div", _hoisted_10, vue.toDisplayString(_ctx.hazardousCar.ynCountTitle), 1),
vue.createElementVNode("div", _hoisted_11, [
vue.createElementVNode("span", null, vue.toDisplayString(_ctx.hazardousCar.ynCount), 1)
]),
vue.createElementVNode("div", _hoisted_12, [
vue.createElementVNode("div", _hoisted_13, [
vue.createElementVNode("div", _hoisted_14, vue.toDisplayString(_ctx.hazardousCar.dnCountTitle), 1),
vue.createElementVNode("div", _hoisted_15, vue.toDisplayString(_ctx.hazardousCar.dnCount), 1)
]),
vue.createElementVNode("div", _hoisted_16, [
vue.createElementVNode("div", _hoisted_17, vue.toDisplayString(_ctx.hazardousCar.sfCountTitle), 1),
vue.createElementVNode("div", _hoisted_18, vue.toDisplayString(_ctx.hazardousCar.sfCount), 1)
])
])
]),
vue.createElementVNode("div", _hoisted_19, [
vue.createElementVNode("div", _hoisted_20, vue.toDisplayString(_ctx.hazardousCar.zxPercentTitle), 1),
vue.createElementVNode("div", _hoisted_21, [
vue.createElementVNode("span", null, vue.toDisplayString(_ctx.hazardousCar.zxPercent.toFixed(1)) + "%", 1)
]),
vue.createElementVNode("div", _hoisted_22, [
vue.createElementVNode("div", _hoisted_23, [
vue.createElementVNode("div", _hoisted_24, vue.toDisplayString(_ctx.hazardousCar.zxCountTitle), 1),
vue.createElementVNode("div", _hoisted_25, vue.toDisplayString(_ctx.hazardousCar.zxCount), 1)
]),
vue.createElementVNode("div", _hoisted_26, [
vue.createElementVNode("div", _hoisted_27, vue.toDisplayString(_ctx.hazardousCar.lxCountTitle), 1),
vue.createElementVNode("div", _hoisted_28, vue.toDisplayString(_ctx.hazardousCar.lxCount), 1)
])
])
])
])
])
]);
};
}
});
exports.default = _sfc_main;