Skip to content

D
DC-TOM
Commit 737b1676 authored by liuzhaoh's avatar liuzhaoh
Browse files
Options

tooltip处理

parent 1d5c77d9
Show whitespace changes
Inline Side-by-side
Showing with 150 additions and 68 deletions
src/views/dustMonitoring/index.vue
View file @ 737b1676
...@@ -43,7 +43,11 @@ ...@@ -43,7 +43,11 @@
</div> </div>
</div> </div>
<div class="warn-info"> <div class="warn-info">
<warnCom title="告警" :listInfo="warnInfoList" @jumpPage="toWarnDetail"></warnCom> <warnCom
title="告警"
:listInfo="warnInfoList"
@jumpPage="toWarnDetail"
></warnCom>
</div> </div>
</div> </div>
<div class="right-box"> <div class="right-box">
...@@ -70,7 +74,11 @@ ...@@ -70,7 +74,11 @@
</div> </div>
<div class="position-info"> <div class="position-info">
<div class="left" v-if="detailObj.compartHealthList.length > 0"> <div class="left" v-if="detailObj.compartHealthList.length > 0">
<div class="part" v-for="(list, index) in detailObj.compartHealthList" :key="index"> <div
class="part"
v-for="(list, index) in detailObj.compartHealthList"
:key="index"
>
<div <div
class="point" class="point"
:class="{ :class="{
...@@ -109,7 +117,11 @@ ...@@ -109,7 +117,11 @@
</div> </div>
</div> </div>
<div class="warn-info"> <div class="warn-info">
<warnCom title="闭环" :listInfo="closedLoopInfoList" @jumpPage="toCircleDetail"></warnCom> <warnCom
title="闭环"
:listInfo="closedLoopInfoList"
@jumpPage="toCircleDetail"
></warnCom>
</div> </div>
</div> </div>
</div> </div>
...@@ -130,8 +142,10 @@ const userStore = useUsersStore(); ...@@ -130,8 +142,10 @@ const userStore = useUsersStore();
const form = reactive({ const form = reactive({
dusterNo: "", dusterNo: "",
dateValue: [ dateValue: [
moment(new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 10)).format("YYYY-MM-DD") + ' 00:00:00', moment(new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 10)).format(
moment(new Date()).format("YYYY-MM-DD") + ' 23:59:59', "YYYY-MM-DD"
) + " 00:00:00",
moment(new Date()).format("YYYY-MM-DD") + " 23:59:59",
], ],
}); });
const startVal = ref(null); const startVal = ref(null);
...@@ -147,7 +161,10 @@ const visibleChange = (e) => { ...@@ -147,7 +161,10 @@ const visibleChange = (e) => {
}; };
const disabledFn = (current) => { const disabledFn = (current) => {
if (!startVal.value) return false; if (!startVal.value) return false;
let range = [new Date(startVal.value).getTime() - 24 * 60 * 60 * 1000 * 30, new Date(startVal.value).getTime() + 24 * 60 * 60 * 1000 * 30]; let range = [
new Date(startVal.value).getTime() - 24 * 60 * 60 * 1000 * 30,
new Date(startVal.value).getTime() + 24 * 60 * 60 * 1000 * 30,
];
let cur = new Date(current).getTime(); let cur = new Date(current).getTime();
return cur < range[0] || cur > range[1]; return cur < range[0] || cur > range[1];
}; };
...@@ -178,40 +195,103 @@ const initChart = (instance, option, domEl) => { ...@@ -178,40 +195,103 @@ const initChart = (instance, option, domEl) => {
instance = echarts.init(document.getElementById(domEl)); instance = echarts.init(document.getElementById(domEl));
instance.setOption(option); instance.setOption(option);
chartInstance[domEl] = instance; chartInstance[domEl] = instance;
chartLinkageFun() // instance.on("showTip", (params) => {
// console.log(params);
// })
chartLinkageFun();
}; };
let instanceList = reactive([])
// 图表联动 // 图表联动
const chartLinkageFun = (target) => { const chartLinkageFun = (target) => {
Object.keys(chartInstance).forEach((currentKey) => { instanceList = []
chartInstance[currentKey].on('mousemove', (params) => {
Object.keys(chartInstance).forEach((key) => {
// if (key !== currentKey) {
chartInstance[key].dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: params.dataIndex
})
// }
})
})
chartInstance[currentKey].on('mouseout', () => {
Object.keys(chartInstance).forEach((key) => { Object.keys(chartInstance).forEach((key) => {
if (key !== currentKey) { instanceList.push(chartInstance[key]);
chartInstance[key].dispatchAction({ });
type: 'hideTip', if (instanceList.length < 3) return;
}) instanceList.forEach((item) => {
item.off("showTip");
item.off("globalout");
item.on("globalout", function () {
instanceList.forEach((item_, index) => {
item_.dispatchAction({
type: "hideTip",
});
});
});
item.on("showTip", function (e) {
bindToolTip(this, e);
});
});
};
const bindToolTip = (that, e) => {
const connectCharts = instanceList
if (window.echartTimer) {
clearTimeout(window.echartTimer);
}
window.echartTimer = setTimeout(() => {
if (!e.dataIndex && e.dataIndex !== 0) {
connectCharts.forEach((item_) => {
item_.dispatchAction({
type: "hideTip",
});
});
return;
} }
}) connectCharts.forEach((item_) => {
if (item_.id != that.id) {
let option = item_.getOption();
let xAxisList = option.xAxis[0].data;
let tmpIndex = e.dataIndex;
item_.off("showTip");
if (
option.yAxis &&
option.yAxis[0] &&
option.yAxis[0]["data"] &&
option.yAxis[0]["data"].length == 2 &&
option.yAxis[0]["data"][0] === 0 &&
option.yAxis[0]["data"][1] === 1
) {
item_.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: tmpIndex,
}); });
}) item_.dispatchAction({
type: "showTip",
seriesIndex: 1,
dataIndex: tmpIndex,
});
} else {
item_.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: tmpIndex,
});
item_.dispatchAction({
type: "showTip",
seriesIndex: 1,
dataIndex: tmpIndex,
});
item_.dispatchAction({
type: "showTip",
seriesIndex: 2,
dataIndex: tmpIndex,
});
}
} item_.on("showTip", function (e) {
bindToolTip(this, e);
});
}
});
}, 50);
};
// 移出图表事件 // 移出图表事件
const chartRemoveEvent = () => { const chartRemoveEvent = () => {
Object.keys(chartInstance).forEach((key) => { Object.keys(chartInstance).forEach((key) => {
chartInstance[key].off() chartInstance[key].off();
}) });
} };
const dustInfo = reactive([ const dustInfo = reactive([
{ {
label: "压差", label: "压差",
...@@ -342,8 +422,8 @@ const getHealthIndex = () => { ...@@ -342,8 +422,8 @@ const getHealthIndex = () => {
const params = { const params = {
customerId: userStore.customerId, customerId: userStore.customerId,
deviceNo: form.dusterNo, deviceNo: form.dusterNo,
startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + ' 00:00:00', startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + " 00:00:00",
endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + ' 23:59:59', endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + " 23:59:59",
}; };
getDataFun(url, params).then((res) => { getDataFun(url, params).then((res) => {
if (res && res.data) { if (res && res.data) {
...@@ -367,8 +447,8 @@ const getPressure = () => { ...@@ -367,8 +447,8 @@ const getPressure = () => {
const params = { const params = {
customerId: userStore.customerId, customerId: userStore.customerId,
deviceNo: form.dusterNo, deviceNo: form.dusterNo,
startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + ' 00:00:00', startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + " 00:00:00",
endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + ' 23:59:59', endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + " 23:59:59",
}; };
getDataFun(url, params).then((res) => { getDataFun(url, params).then((res) => {
if (res && res.data) { if (res && res.data) {
...@@ -392,8 +472,8 @@ const getEnergy = () => { ...@@ -392,8 +472,8 @@ const getEnergy = () => {
const params = { const params = {
customerId: userStore.customerId, customerId: userStore.customerId,
deviceNo: form.dusterNo, deviceNo: form.dusterNo,
startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + ' 00:00:00', startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + " 00:00:00",
endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + ' 23:59:59', endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + " 23:59:59",
}; };
getDataFun(url, params).then((res) => { getDataFun(url, params).then((res) => {
if (res && res.data) { if (res && res.data) {
...@@ -414,7 +494,7 @@ const detailObj = reactive({ ...@@ -414,7 +494,7 @@ const detailObj = reactive({
faultCompart: "", faultCompart: "",
compartHealthList: [], compartHealthList: [],
}); });
const healthPercent = ref() const healthPercent = ref();
// 获取除尘器详情 // 获取除尘器详情
const getDustDetail = () => { const getDustDetail = () => {
if (!form.dusterNo) { if (!form.dusterNo) {
...@@ -424,8 +504,8 @@ const getDustDetail = () => { ...@@ -424,8 +504,8 @@ const getDustDetail = () => {
const params = { const params = {
customerId: userStore.customerId, customerId: userStore.customerId,
deviceNo: form.dusterNo, deviceNo: form.dusterNo,
startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + ' 00:00:00', startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + " 00:00:00",
endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + ' 23:59:59', endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + " 23:59:59",
}; };
getDataFun(url, params) getDataFun(url, params)
.then((res) => { .then((res) => {
...@@ -515,13 +595,16 @@ const getDustDetail = () => { ...@@ -515,13 +595,16 @@ const getDustDetail = () => {
indicatorOneInstance, indicatorOneInstance,
"indicatorOne", "indicatorOne",
getGaugeOption({ getGaugeOption({
value: (dustInfo[0].value).toFixed(2), value: dustInfo[0].value.toFixed(2),
chartName: "压差", chartName: "压差",
min: parseInt(res.data.pressureDiffLow), min: parseInt(res.data.pressureDiffLow),
max: parseInt(res.data.pressureDiffHigh), max: parseInt(res.data.pressureDiffHigh),
formatter: parseInt(res.data.pressureDiffHigh) > 10 ? function(value) { formatter:
return parseInt(value) parseInt(res.data.pressureDiffHigh) > 10
} : '' ? function (value) {
return parseInt(value);
}
: "",
}) })
); );
indicatorFun( indicatorFun(
...@@ -532,9 +615,9 @@ const getDustDetail = () => { ...@@ -532,9 +615,9 @@ const getDustDetail = () => {
chartName: "粉尘浓度", chartName: "粉尘浓度",
min: 5, min: 5,
max: 50, max: 50,
formatter: function(value) { formatter: function (value) {
return parseInt(value) return parseInt(value);
} },
}) })
); );
healthPercent.value = parseFloat(res.data.healthPercent); healthPercent.value = parseFloat(res.data.healthPercent);
...@@ -556,9 +639,9 @@ const toWarnDetail = () => { ...@@ -556,9 +639,9 @@ const toWarnDetail = () => {
deviceName: dusterName.value, deviceName: dusterName.value,
suspendStartTime: form.dateValue[0], suspendStartTime: form.dateValue[0],
suspendEndTime: form.dateValue[1], suspendEndTime: form.dateValue[1],
} },
}); });
} };
const toCircleDetail = () => { const toCircleDetail = () => {
router.push({ router.push({
path: "/my-loop/myAgency", path: "/my-loop/myAgency",
...@@ -567,9 +650,9 @@ const toCircleDetail = () => { ...@@ -567,9 +650,9 @@ const toCircleDetail = () => {
deviceName: dusterName.value, deviceName: dusterName.value,
suspendStartTime: form.dateValue[0], suspendStartTime: form.dateValue[0],
suspendEndTime: form.dateValue[1], suspendEndTime: form.dateValue[1],
} },
}); });
} };
// 获取告警信息 // 获取告警信息
const getAlarmInfo = () => { const getAlarmInfo = () => {
if (!form.dusterNo) { if (!form.dusterNo) {
...@@ -579,8 +662,8 @@ const getAlarmInfo = () => { ...@@ -579,8 +662,8 @@ const getAlarmInfo = () => {
const params = { const params = {
customerId: userStore.customerId, customerId: userStore.customerId,
deviceNo: form.dusterNo, deviceNo: form.dusterNo,
startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + ' 00:00:00', startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + " 00:00:00",
endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + ' 23:59:59', endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + " 23:59:59",
}; };
getDataFun(url, params) getDataFun(url, params)
.then((res) => { .then((res) => {
...@@ -606,8 +689,8 @@ onMounted(() => { ...@@ -606,8 +689,8 @@ onMounted(() => {
}); });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener("resize", resizeFun); window.removeEventListener("resize", resizeFun);
chartRemoveEvent() chartRemoveEvent();
}) });
watch( watch(
() => form.dusterNo, () => form.dusterNo,
() => { () => {
...@@ -638,8 +721,7 @@ const handleStatusDotClick = () => { ...@@ -638,8 +721,7 @@ const handleStatusDotClick = () => {
query: { query: {
dusterNo: form.dusterNo, dusterNo: form.dusterNo,
dusterName: dusterName.value, dusterName: dusterName.value,
},
}
}); });
}; };
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment