@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" />
293 lines (288 loc) • 9.5 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-seven-day-kline" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "DvWgmsSevenDayKline",
title: "站点因k线与日变化"
},
__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 chartSevenDayLine = 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(dayjs(item.time).format("MM-DD"));
} 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]);
};
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: [
{
left: 40,
right: 20,
top: 40,
height: xAxis.length > 7 ? 70 : 80
},
{
left: 40,
right: 20,
top: xAxis.length > 7 ? "68%" : "72%",
height: "25%"
}
],
tooltip: {
link: { xAxisIndex: "all" },
trigger: "axis",
axisPointer: {
type: "shadow"
},
formatter(param) {
param = param[0];
if (param.axisIndex === 0) {
return [`${param.marker + param.seriesName} ${param.name}`, `最大值 ${param.data[5]}`, `最后一个值: ${param.data[4]}`, `平均值: ${param.data[3]}`, `第一个值: ${param.data[2]}`, `最小值: ${param.data[1]}`].join("<br/>");
} else {
const level = !quality[param.dataIndex] && quality[param.dataIndex] !== 0 ? "--" : gradeList.find((item) => {
return item.level === (quality[param.dataIndex] || 1);
})?.name ?? "";
const value_ = !param.value ? "--" : param.value;
return [`${param.marker + param.seriesName} ${param.name}`, `${factorName}：${value_}${unit}`, `水质等级：${level}`].join("<br/>");
}
}
},
xAxis: [
{
type: "category",
boundaryGap: true,
axisLine: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: "var(--dv-color-text-primary)",
fontFamily: "var(--dv-font-family-number)",
fontSize: "var(--dv-text-number2)"
}
},
axisTick: {
show: false
},
data: xAxis
},
{
type: "category",
show: false,
gridIndex: 1,
boundaryGap: true,
axisTick: {
show: false
},
data: xAxis
}
],
yAxis: [
{
// k线
type: "value",
name: unit,
nameTextStyle: {
align: "right",
color: "var(--dv-color-text-secondary)",
fontFamily: "var(--dv-font-family-number)",
fontSize: "var(--dv-text-number2)"
},
axisLabel: {
formatter: "{value}",
textStyle: {
color: "var(--dv-color-text-secondary)",
fontFamily: "var(--dv-font-family-number)",
fontSize: "var(--dv-text-number2)"
}
},
axisLine: {
show: false
},
axisPointer: {
snap: true
},
splitArea: {
show: true,
areaStyle: {
color: ["transparent", "var(--dv-color-fill-lighter)"]
}
},
splitLine: { show: false },
axisTick: { show: false },
max,
min
},
{
// 日变化柱状图
type: "value",
gridIndex: 1,
axisLabel: {
show: false
},
axisLine: {
show: false
},
axisPointer: {
snap: true
},
splitLine: { show: false },
axisTick: { show: false }
}
],
series: [
{
name: "K线",
type: "boxplot",
yAxisIndex: 0,
itemStyle: {
color: "transparent",
borderColor: "var(--dv-color-index)"
},
data: kData
},
{
name: `${timeStr}变化`,
type: "bar",
xAxisIndex: 1,
yAxisIndex: 1,
barWidth: 20,
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: values
}
]
};
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: "chartSevenDayLine",
ref: chartSevenDayLine,
class: "chart"
}, [
vue.createVNode(BaseECharts_vue_vue_type_script_setup_true_lang.default, { options: option.value }, null, 8, ["options"])
], 512)
]);
};
}
});
exports.default = _sfc_main;