@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" />
360 lines (355 loc) • 14.8 kB
JavaScript
'use strict';
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const vue = require('vue');
const dayjs = require('dayjs');
const selectPanel_vue_vue_type_script_setup_true_name_SelectPanel_lang = require('../common/select-panel.vue.js');
require('../common/select-panel.vue2.js');
const tools = require('../../utils/tools.js');
const index = require('./api/index.js');
const _hoisted_1 = { class: "dv-wgms-surrounding-pollution" };
const _hoisted_2 = { class: "surrounding-two-flex" };
const _hoisted_3 = { class: "surrounding-two-left surrounding-comm-box" };
const _hoisted_4 = { class: "title-box" };
const _hoisted_5 = /* @__PURE__ */ vue.createElementVNode("span", { class: "title" }, "污染源超标率前三", -1);
const _hoisted_6 = { class: "right-options" };
const _hoisted_7 = {
key: 0,
class: "impact-list"
};
const _hoisted_8 = { class: "sort" };
const _hoisted_9 = ["title"];
const _hoisted_10 = { class: "num red" };
const _hoisted_11 = {
key: 1,
class: "empty-data"
};
const _hoisted_12 = { class: "surrounding-two-right surrounding-comm-box" };
const _hoisted_13 = { class: "name-num-box pd10" };
const _hoisted_14 = /* @__PURE__ */ vue.createElementVNode("span", { class: "name" }, "异常溢流口统计", -1);
const _hoisted_15 = { class: "num red" };
const _hoisted_16 = { class: "surrounding-two-flex" };
const _hoisted_17 = { class: "surrounding-two-left surrounding-comm-box" };
const _hoisted_18 = /* @__PURE__ */ vue.createElementVNode("div", { class: "title-box" }, [
/* @__PURE__ */ vue.createElementVNode("span", { class: "title" }, "污染源波动率前三")
], -1);
const _hoisted_19 = {
key: 0,
class: "impact-list"
};
const _hoisted_20 = { class: "sort" };
const _hoisted_21 = ["title"];
const _hoisted_22 = { class: "num red" };
const _hoisted_23 = {
key: 1,
class: "empty-data"
};
const _hoisted_24 = { class: "surrounding-two-right surrounding-comm-box" };
const _hoisted_25 = { class: "name-num-box pd10" };
const _hoisted_26 = /* @__PURE__ */ vue.createElementVNode("span", { class: "name" }, "周边未处置事件", -1);
const _hoisted_27 = { class: "num-box" };
const _hoisted_28 = { class: "num red" };
const _hoisted_29 = /* @__PURE__ */ vue.createElementVNode("span", { class: "split" }, "/", -1);
const _hoisted_30 = { class: "total" };
const _hoisted_31 = {
key: 0,
class: "surrounding-three-flex"
};
const _hoisted_32 = { class: "surrounding-three-item surrounding-comm-box different" };
const _hoisted_33 = { class: "name-num-box" };
const _hoisted_34 = /* @__PURE__ */ vue.createElementVNode("span", { class: "name" }, "异常入河排污口", -1);
const _hoisted_35 = { class: "num red" };
const _hoisted_36 = { class: "surrounding-three-item surrounding-comm-box" };
const _hoisted_37 = { class: "name-num-box" };
const _hoisted_38 = /* @__PURE__ */ vue.createElementVNode("span", { class: "name" }, "问题小区", -1);
const _hoisted_39 = { class: "num red" };
const _hoisted_40 = { class: "surrounding-three-item surrounding-comm-box" };
const _hoisted_41 = { class: "name-num-box" };
const _hoisted_42 = /* @__PURE__ */ vue.createElementVNode("span", { class: "name" }, "问题园区", -1);
const _hoisted_43 = { class: "num red" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "DvWgmsSurroundingPollution",
title: "周边污染影响"
},
__name: "index",
props: {
params: {
type: Object,
default: () => {
return {
queryTimeType: "week",
beginTime: 16858944e5,
endTime: 1688313599999,
longitude: 120.445633,
latitude: 30.120086,
distance: 1e4,
limit: 3,
// 限制条数
factor: 9,
// 因子ID
minWave: 2,
// 波动率最小值
alarmTime: 1688313541e3,
accessCodeList: ["04900001", "04900002", "1009", "05911021", "04900004", "04900003", "31005222", "31005223", "3114002", "31100611", "31100612", "31100613", "3110064", "3112009", "31120010", "31120011", "3112001", "3112002", "3112004", "3100133", "05911009"]
// 关联站点
};
}
},
isLazy: {
type: Boolean,
default: false
},
showBottomPark: {
type: Boolean,
default: true
},
riverPortNum: {
type: [Number, String],
default: 0
},
problemNum: {
type: [Number, String],
default: 0
},
problemPartNum: {
type: [Number, String],
default: 0
}
},
setup(__props, { expose: __expose }) {
const props = __props;
const data = vue.reactive({
pomsAlarmData: [],
pomsAnalysisData: [],
factorList: [],
curFactor: "",
boundaryData: {
disposal: 0,
total: 0
},
// 周边未处置事件
overflowport: {
keyPollutionNum: null,
sourceList: null,
overFlowNum: null
},
factorsObj: {}
});
const getFactorLists = async () => {
const res = await index.queryFactorGroup({
code: "companyPollutionSource"
});
const factorsObj = res && res.length ? res[0] : null;
data.factorsObj = factorsObj;
const factors = factorsObj?.factors ?? [];
const factorList2 = factors.map((item) => {
return { ...item, label: item.factorIndexName, value: item.id };
});
const codes = [];
factorList2.forEach((item) => {
codes.push(item.factorIndexCode);
});
const defaultFactor = { value: data.factorsObj?.id, label: "所有因子" };
factorList2.unshift(defaultFactor);
data.factorList = factorList2;
data.curFactor = data.factorList[0].value;
};
const getPomsAlarm = async () => {
const selectedFactor = data.factorList.find((item) => item.value === data?.curFactor)?.label;
const params = {
queryTimeType: props?.params?.queryTimeType,
beginTime: props?.params?.beginTime,
endTime: tools.getDateEndTime(props?.params?.queryTimeType, props.params?.endTime),
// endTime: props?.params?.endTime,
factorFlag: selectedFactor === "所有因子" || !selectedFactor,
factor: data?.curFactor,
longitude: props?.params?.longitude,
latitude: props?.params?.latitude,
distance: props?.params?.distance / 1e3,
limit: props?.params?.limit
};
const res = await index.pomsAlarm(params);
data.pomsAlarmData = [];
if (res?.data && res?.data.length > 0)
data.pomsAlarmData = res.data.slice(0, 3);
};
const checkFactor = (val) => {
data.curFactor = val.value;
getPomsAlarm();
};
const getDateTime = () => {
const timeType = props?.params?.queryTimeType || "hour";
const dateType = props?.params?.queryTimeType === "day" ? "days" : props?.params?.queryTimeType === "hour" ? "hours" : props?.params?.queryTimeType;
const dataTime = props?.params?.queryTimeType === "hour" || props?.params?.queryTimeType === "day" ? props?.params?.alarmTime : dayjs(props?.params?.alarmTime).startOf(timeType).valueOf();
return {
startTime: dayjs(dataTime).add(-23, dateType).startOf(timeType).format("x"),
endTime: dayjs(dataTime).add(1, dateType).startOf(timeType).format("x")
};
};
const getPomsAnalysis = async () => {
const params = {
queryTimeType: props?.params?.queryTimeType,
beginTime: getDateTime().startTime,
endTime: getDateTime().endTime,
factorFlag: false,
factor: props?.params?.factor,
longitude: props?.params?.longitude,
latitude: props?.params?.latitude,
distance: props?.params?.distance / 1e3,
limit: props?.params?.limit
};
const res = await index.pomsAnalysis(params);
const resData = res?.data || [];
data.pomsAnalysisData = resData.slice(0, 3);
data.pomsAnalysisData = data.pomsAnalysisData.filter((item) => ![null, void 0].includes(item.bdl));
};
const getBoundaryAnalysis = async () => {
const params = {
envTypeCodeList: ["water"],
siteCodeList: props?.params?.accessCodeList,
// res,
timeStamp: props?.params?.alarmTime,
// 报警时间
centerLatitude: props?.params?.latitude,
// 纬度
centerLongitude: props?.params?.longitude
// 经度
};
const res = await index.countEventStatusByTimePoint(params);
if (res?.success && res?.data) {
data.boundaryData.disposal = res.data.notDisposedCount + res.data.inDisposalCount;
data.boundaryData.total = res.data.totalCount;
}
};
const getOverflowData = async () => {
const params = {
queryTimeType: props?.params?.queryTimeType,
beginTime: props?.params?.beginTime,
endTime: tools.getDateEndTime(props?.params?.queryTimeType, props.params?.endTime),
factorFlag: true,
factor: data.factorsObj?.id,
longitude: props?.params?.longitude,
latitude: props?.params?.latitude,
distance: props?.params?.distance / 1e3,
limit: -1,
// 条数不限制
minWave: props?.params?.minWave,
waveBeginTime: getDateTime().startTime,
// 波动率开始时间
waveEndTime: getDateTime().endTime,
// 波动率结束时间
waveFactorFlag: false,
waveFactor: props?.params?.factor
// 波动率因子ID
};
const res = await index.overflowPort(params);
data.overflowport.overFlowNum = res?.data?.overFlowNum;
};
const initData = async () => {
getPomsAnalysis();
getBoundaryAnalysis();
getPomsAlarm();
getOverflowData();
};
vue.onMounted(async () => {
await getFactorLists();
!props.isLazy && initData();
});
vue.watch([() => props.params, () => props.isLazy], () => {
!props.isLazy && initData();
}, { deep: true });
__expose({
reload: initData
});
const { pomsAlarmData, pomsAnalysisData, factorList, curFactor, boundaryData, overflowport } = vue.toRefs(data);
return (_ctx, _cache) => {
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("div", _hoisted_6, [
vue.createVNode(selectPanel_vue_vue_type_script_setup_true_name_SelectPanel_lang.default, {
option: vue.unref(factorList),
onChange: checkFactor
}, null, 8, ["option"])
])
]),
vue.unref(pomsAlarmData).length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(pomsAlarmData), (item, index) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: index,
class: "impact-list-every"
}, [
vue.createElementVNode("span", _hoisted_8, vue.toDisplayString(item.rank), 1),
vue.createElementVNode("span", {
class: "name",
title: item.name
}, vue.toDisplayString(item.name), 9, _hoisted_9),
vue.createElementVNode("span", _hoisted_10, vue.toDisplayString(item.alarmCount), 1)
]);
}), 128))
])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, " 暂无数据 "))
]),
vue.createElementVNode("div", _hoisted_12, [
vue.createElementVNode("div", _hoisted_13, [
_hoisted_14,
vue.createElementVNode("span", _hoisted_15, vue.toDisplayString(vue.unref(overflowport).overFlowNum !== null ? vue.unref(overflowport).overFlowNum : "--"), 1)
])
])
]),
vue.createElementVNode("div", _hoisted_16, [
vue.createElementVNode("div", _hoisted_17, [
_hoisted_18,
vue.unref(pomsAnalysisData).length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_19, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(pomsAnalysisData), (item, index) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: index,
class: "impact-list-every"
}, [
vue.createElementVNode("span", _hoisted_20, vue.toDisplayString(item.rank), 1),
vue.createElementVNode("span", {
class: "name",
title: item.name
}, vue.toDisplayString(item.name), 9, _hoisted_21),
vue.createElementVNode("span", _hoisted_22, vue.toDisplayString(item.bdl), 1)
]);
}), 128))
])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_23, " 暂无数据 "))
]),
vue.createElementVNode("div", _hoisted_24, [
vue.createElementVNode("div", _hoisted_25, [
_hoisted_26,
vue.createElementVNode("div", _hoisted_27, [
vue.createElementVNode("span", _hoisted_28, vue.toDisplayString(vue.unref(boundaryData).disposal), 1),
_hoisted_29,
vue.createElementVNode("span", _hoisted_30, vue.toDisplayString(vue.unref(boundaryData).total), 1)
])
])
])
]),
props?.showBottomPark ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_31, [
vue.createElementVNode("div", _hoisted_32, [
vue.createElementVNode("div", _hoisted_33, [
_hoisted_34,
vue.createElementVNode("span", _hoisted_35, vue.toDisplayString(props?.riverPortNum ?? "--"), 1)
])
]),
vue.createElementVNode("div", _hoisted_36, [
vue.createElementVNode("div", _hoisted_37, [
_hoisted_38,
vue.createElementVNode("span", _hoisted_39, vue.toDisplayString(props?.problemNum ?? "--"), 1)
])
]),
vue.createElementVNode("div", _hoisted_40, [
vue.createElementVNode("div", _hoisted_41, [
_hoisted_42,
vue.createElementVNode("span", _hoisted_43, vue.toDisplayString(props?.problemPartNum ?? "--"), 1)
])
])
])) : vue.createCommentVNode("", true)
]);
};
}
});
exports.default = _sfc_main;