@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" />
304 lines (299 loc) • 10 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const vue = require('vue');
const dayjs = require('dayjs');
require('echarts/lib/component/markLine');
const BaseECharts_vue_vue_type_script_setup_true_lang = require('../../utils/echarts/BaseECharts.vue.js');
const tools = require('../../utils/tools.js');
const index = require('./api/index.js');
const _hoisted_1 = { class: "dv-wgms-upstream-impact" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "DvWgmsUpstreamImpact",
title: "上游影响"
},
__name: "index",
props: {
params: {
type: Object,
default: () => {
return {
queryTimeType: "week",
siteCode: "3116004",
factor: 9,
alarmTime: 1688313541e3,
limit: 3,
baseLevel: -1,
// 下面是因子
factorName: "氨氮(NH3-N)",
factorCode: "w21003",
// 监测因子
factorUnit: "mg/L"
};
}
},
isLazy: {
type: Boolean,
default: false
}
},
setup(__props, { expose: __expose }) {
const props = __props;
const state = vue.reactive({
factorLimitValue: {
// 因子达标限值
value: null
}
});
const chartUpstreamImpact = vue.ref();
const option = vue.ref(void 0);
const getDateTime = () => {
let endDate, startDate;
if (props?.params?.queryTimeType === "hour") {
startDate = dayjs(props?.params?.alarmTime).valueOf();
endDate = dayjs(props?.params?.alarmTime).add(1, "hours").startOf("hour").format("x");
} else if (props?.params?.queryTimeType === "day") {
startDate = dayjs(props?.params?.alarmTime).valueOf();
endDate = dayjs(props?.params?.alarmTime).add(1, "days").startOf("day").format("x");
} else if (props?.params?.queryTimeType === "week") {
startDate = dayjs(props?.params?.alarmTime).add(0, "week").startOf("week").format("x");
endDate = dayjs(props?.params?.alarmTime).add(1, "week").startOf("week").format("x");
} else if (props?.params?.queryTimeType === "month") {
startDate = dayjs(props?.params?.alarmTime).add(0, "months").startOf("month").format("x");
endDate = dayjs(props?.params?.alarmTime).add(1, "months").startOf("month").format("x");
} else if (props?.params?.queryTimeType === "year") {
startDate = dayjs(props?.params?.alarmTime).add(0, "years").startOf("year").format("x");
endDate = dayjs(props?.params?.alarmTime).add(1, "years").startOf("year").format("x");
}
return {
endTime: endDate,
startTime: startDate
};
};
const initData = async () => {
const { data: resData } = await index.surfaceWaterStandard({
accessCodeList: props?.params?.siteCode,
baseLevel: props?.params?.baseLevel,
factorFlag: false,
factor: props?.params?.factor,
configTime: props?.params?.alarmTime
});
const limit = resData && props.params?.siteCode && props.params?.factorCode && resData[props.params?.siteCode] && resData[props?.params?.siteCode][props.params?.factorCode] ? resData[props.params?.siteCode][props.params?.factorCode] : "";
state.factorLimitValue = limit;
const params = {
queryTimeType: props?.params?.queryTimeType,
accessCode: props?.params?.siteCode,
factor: props?.params?.factor,
beginTime: getDateTime().startTime,
endTime: getDateTime().endTime,
limit: props?.params?.limit
};
await getData(params);
};
const getData = async (params) => {
const res = await index.pathAnalysis(params);
const resData = res.data;
const waterQualityData = {
xAxis: resData.map((item) => item.name),
quality: resData.map((item) => item.grade),
hydrology: [],
rain: [],
factorValue: resData.map((item) => item.value)
};
const dass = waterQualityData.factorValue.map((item, index) => {
return {
value: item || item === 0 ? item : null
};
});
option.value = await getLineOptions(waterQualityData.xAxis, props?.params?.factorUnit, dass, waterQualityData.quality);
};
const getLineOptions = async (xAxis, unitName, dass, quality) => {
const res = await index.waterSurfaceListAll({});
const gradeList = res?.entries ?? [];
const option2 = {
tooltip: {
trigger: "axis",
confine: true,
axisPointer: {
type: "line"
},
formatter(params) {
const param = params[0];
const level = quality[param.dataIndex];
const currData = gradeList.find((item) => {
return level ? Number(item.level) === Number(level.toString()) : false;
});
const value_ = !param.value ? "--" : JSON.stringify(param.value) === "{}" ? "--" : param.value;
return [`${param.marker} ${param.name}`, `${props?.params?.factorName}：${value_}${unitName}`, `水质等级：${currData?.name || "--"}`].join("<br/>");
}
},
grid: {
top: 40,
right: 22,
bottom: 25,
left: 10,
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
splitArea: {
show: false
},
axisLabel: {
textStyle: {
rich: {
a: {
align: "left",
width: 160
}
},
color: "var(--dv-color-text-primary)"
},
interval: 0
},
data: xAxis
},
yAxis: {
type: "value",
name: unitName,
nameTextStyle: {
align: "right",
color: "var(--dv-color-text-secondary)",
padding: [2, -6, 6, 0]
},
splitNumber: 5,
axisLine: {
show: false
},
axisLabel: {
textStyle: {
fontFamily: "var(--dv-font-family-number)",
fontSize: "var(--dv-text-headline3)",
color: "var(--dv-color-text-secondary)"
}
},
splitLine: {
show: true,
lineStyle: {
color: "var(--dv-color-fill-lighter)"
}
},
axisTick: { show: false },
splitArea: {
show: false
},
max: (value) => {
if (props.params?.factorCode === "w01001") {
if (value.max > state.factorLimitValue.upValue && state.factorLimitValue.upValue)
return value.max;
else
return state.factorLimitValue.upValue;
} else {
if (value.max < state.factorLimitValue.value && state.factorLimitValue.value)
return state.factorLimitValue.value;
else
return value.max;
}
}
},
series: [
{
connectNulls: true,
type: "line",
symbolSize: 5,
yAxisIndex: 0,
lineStyle: {
color: "#0062FF",
width: 1
},
data: dass
}
]
};
if (props.params?.factorCode === "w01001") {
if (state.factorLimitValue && state.factorLimitValue.upValue) {
const num = tools.countDecimalPlaces(state.factorLimitValue.upValue);
option2.series[0].markLine = {
symbol: "none",
data: [
{
yAxis: Number(state.factorLimitValue.upValue).toFixed(num),
show: true,
lineStyle: {
type: "solid",
color: "#FF1744"
}
},
{
yAxis: state.factorLimitValue.downValue == null ? "" : Number(state.factorLimitValue.downValue).toFixed(num),
show: true,
lineStyle: {
type: "solid",
color: "#FF1744"
}
}
],
label: {
position: "insideEndTop",
color: "red"
}
};
}
} else {
if (state.factorLimitValue.value != null) {
const num = tools.countDecimalPlaces(state.factorLimitValue.value);
option2.series[0].markLine = {
symbol: "none",
data: [
{
yAxis: Number(state.factorLimitValue.value).toFixed(num),
show: true,
lineStyle: {
type: "solid",
color: "#FF1744"
}
}
],
label: {
position: "insideEndTop",
color: "red"
}
};
}
}
return option2;
};
vue.onMounted(() => {
!props.isLazy && initData();
});
vue.watch([() => props.params, () => props.isLazy], () => {
!props.isLazy && initData();
}, { deep: true });
__expose({
reload: initData
});
vue.toRefs(state);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("div", {
ref_key: "chartUpstreamImpact",
ref: chartUpstreamImpact,
class: "chart"
}, [
vue.createVNode(BaseECharts_vue_vue_type_script_setup_true_lang.default, { options: option.value }, null, 8, ["options"])
], 512)
]);
};
}
});
exports.default = _sfc_main;