@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" />
306 lines (301 loc) • 10.3 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const vue = require('vue');
const dayjs = require('dayjs');
const lodashEs = require('lodash-es');
const BaseECharts_vue_vue_type_script_setup_true_lang = require('../../utils/echarts/BaseECharts.vue.js');
const index = require('./api/index.js');
const _hoisted_1 = { class: "dv-wgms-day-kline" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "DvWgmsDayKLine",
title: "站点因子日(周/月/年)变化趋势图（1.4）"
},
__name: "index",
props: {
params: {
type: Object,
default: () => {
return {
accessCode: "3116008",
factor: 2,
factorFlag: false,
alarmTime: 1700028e6,
timeDiff: 7,
queryTimeType: "hour",
// 下面是因子
factorName: "总磷(以 P 计）",
factorCode: "w21003",
// 监测因子
factorUnit: "mg/L"
};
}
},
isLazy: {
type: Boolean,
default: false
}
},
setup(__props, { expose: __expose }) {
const props = __props;
const chartDayLine = vue.ref();
const option = vue.ref(void 0);
const timeStrList = {
hour: "小时",
day: "日",
week: "周",
month: "月",
year: "年"
};
const getKlineDateParams = (alarmTime, timeDiff) => {
let startTime, endTime;
if (props.params?.queryTimeType === "hour" || props.params?.queryTimeType === "day") {
startTime = dayjs(alarmTime).add(-(timeDiff - 1), "days").startOf("day").format("x");
endTime = dayjs(alarmTime).add(1, "days").startOf("day").format("x");
} else if (props.params?.queryTimeType === "week") {
startTime = dayjs(alarmTime).add(-(timeDiff - 1), "week").startOf("week").format("x");
endTime = dayjs(alarmTime).add(1, "week").startOf("week").format("x");
} else if (props.params?.queryTimeType === "month") {
startTime = dayjs(alarmTime).add(-(timeDiff - 1), "month").startOf("month").format("x");
endTime = dayjs(alarmTime).add(1, "month").startOf("month").format("x");
} else if (props.params?.queryTimeType === "year") {
startTime = dayjs(alarmTime).add(-(timeDiff - 1), "year").startOf("year").format("x");
endTime = dayjs(alarmTime).add(1, "year").startOf("year").format("x");
}
return {
startTime,
endTime
};
};
const getData = async () => {
const { startTime, endTime } = getKlineDateParams(props.params?.alarmTime, props.params?.timeDiff);
const params = {
accessCode: props.params?.accessCode,
factor: props.params?.factor,
factorFlag: props.params?.factorFlag,
beginTime: startTime,
endTime,
queryTimeType: props.params?.queryTimeType === "hour" ? "day" : props.params.queryTimeType
};
const res = await index.getKLine(params);
const resData = res?.data || [];
const klineData = {
xAxis: [],
kData: [],
values: [],
quality: []
};
resData.forEach((item) => {
item.maxValue = Number(item.max);
item.minValue = Number(item.min);
if (props.params?.queryTimeType === "hour" || props.params?.queryTimeType === "day") {
klineData.xAxis.push(item.time);
} else {
klineData.xAxis.push(item.time);
}
klineData.kData.push([
item.min,
item.first,
item.avg,
item.last,
item.max
]);
klineData.values.push(item.avg);
klineData.quality.push(item.grade);
});
const maxObj = lodashEs.maxBy(resData, "maxValue");
const minObj = lodashEs.minBy(resData, "minValue");
vue.nextTick();
option.value = await dayKLine(klineData, maxObj?.maxValue, minObj?.minValue, props.params?.factorName, props?.params?.factorUnit, timeStrList[props.params?.queryTimeType === "hour" ? "day" : props.params?.queryTimeType]);
};
const dayKLine = async (data, min, max, factorName, unit, timeStr) => {
const { xAxis, kData, values, quality } = data;
const res = await index.waterSurfaceListAll({});
const gradeList = res?.entries ?? [];
const option2 = {
grid: {
top: 24,
right: 46,
bottom: 30,
left: 32
},
tooltip: {
link: { xAxisIndex: "all" },
trigger: "axis",
axisPointer: {
type: "shadow"
},
formatter(param) {
param = param[0];
const level = quality[param.dataIndex];
const currData = gradeList.find((item) => {
return level ? Number(item.level) === Number(level.toString()) : false;
});
const levelColor = currData?.color || "#6D7278";
const value_ = !param.value ? "--" : param.value;
const marker = param.marker ? param.marker.replace("background-color:#A162F7", `background-color:${levelColor}`) : "";
return [`${marker + timeStr}变化 ${param.name}`, `${factorName}：${value_}${unit}`, `水质等级：${currData?.name || "--"}`].join("<br/>");
}
},
xAxis: [
{
boundaryGap: true,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: "var(--dv-color-text-primary)",
fontFamily: "var(--dv-font-family-number)",
fontSize: "var(--dv-text-number2)"
},
formatter: (time) => {
return props.params?.queryTimeType === "hour" || props.params?.queryTimeType === "day" ? dayjs(time).format("MM-DD") : time;
}
},
data: xAxis
}
],
yAxis: [
{
type: "value",
name: props?.params?.factorUnit || "",
nameTextStyle: {
align: "right",
color: "var(--dv-color-text-secondary)",
fontFamily: "var(--dv-font-family-number)",
fontSize: "var(--dv-text-number2)",
padding: [0, -10, -6, 0]
},
splitNumber: 5,
axisLabel: {
show: true,
textStyle: {
color: "var(--dv-color-text-secondary)",
fontFamily: "var(--dv-font-family-number)",
fontSize: "var(--dv-text-number2)"
}
},
axisLine: {
show: false
},
axisPointer: {
snap: true
},
splitLine: { show: false },
axisTick: { show: false }
},
{
type: "value",
name: "",
minInterval: 1,
axisLabel: {
show: true,
formatter: (value2) => {
if (value2 === 0) {
return "";
} else {
const level = gradeList.find((item) => {
return item.level === value2;
})?.name ?? "";
return `${level}类`;
}
},
textStyle: {
color: "var(--dv-color-text-secondary)",
fontFamily: "var(--dv-font-family-number)",
fontSize: "var(--dv-text-number2)"
}
},
axisLine: {
show: false
},
axisPointer: {
snap: true
},
splitLine: {
show: true,
lineStyle: {
color: "var(--dv-color-border-light)",
width: 1
}
},
axisTick: { show: false }
}
],
series: [
{
name: props?.params?.factorUnit || "",
type: "line",
// smooth: true,
showSymbol: true,
symbolSize: 6,
lineStyle: {
color: "#A162F7",
width: 2
},
color: "var(--dv-color-text-primary)",
itemStyle: {
color: (params) => {
const level = quality[params.dataIndex];
const currData = gradeList.filter((item) => {
return level ? Number(item.level) === Number(level.toString()) : false;
});
if (level != null)
return currData.length ? currData[0].color : "#6D7278";
},
normal: {
color: "#A162F7",
borderWidth: 1
}
},
data: values
},
{
name: `${timeStr}变化`,
type: "bar",
barWidth: 12,
yAxisIndex: 1,
itemStyle: {
color: (params) => {
const level = quality[params.dataIndex];
const currData = gradeList.filter((item) => {
return level ? Number(item.level) === Number(level.toString()) : false;
});
if (level != null)
return currData.length ? currData[0].color : "#6D7278";
}
},
data: quality
}
]
};
return option2;
};
vue.onMounted(() => {
!props.isLazy && getData();
});
vue.watch([() => props.params, () => props.isLazy], () => {
!props.isLazy && getData();
}, { deep: true });
__expose({
reload: getData
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("div", {
ref_key: "chartDayLine",
ref: chartDayLine,
class: "chart"
}, [
vue.createVNode(BaseECharts_vue_vue_type_script_setup_true_lang.default, { options: option.value }, null, 8, ["options"])
], 512)
]);
};
}
});
exports.default = _sfc_main;