Skip to content

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

tooltip处理

parent 1d5c77d9
Hide 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,26 +142,31 @@ const userStore = useUsersStore(); ...@@ -130,26 +142,31 @@ 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);
const calendarChange = (e) => { const calendarChange = (e) => {
if (e[0] && !e[1]) { if (e[0] && !e[1]) {
startVal.value = e[0]; startVal.value = e[0];
} }
}; };
const visibleChange = (e) => { const visibleChange = (e) => {
if (e) { if (e) {
startVal.value = null; startVal.value = null;
} }
}; };
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 = [
let cur = new Date(current).getTime(); new Date(startVal.value).getTime() - 24 * 60 * 60 * 1000 * 30,
return cur < range[0] || cur > range[1]; new Date(startVal.value).getTime() + 24 * 60 * 60 * 1000 * 30,
];
let cur = new Date(current).getTime();
return cur < range[0] || cur > range[1];
}; };
const option = { const option = {
xAxis: { xAxis: {
...@@ -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) => {
Object.keys(chartInstance).forEach((key) => { instanceList.push(chartInstance[key]);
// if (key !== currentKey) { });
chartInstance[key].dispatchAction({ if (instanceList.length < 3) return;
type: 'showTip', 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, seriesIndex: 0,
dataIndex: params.dataIndex dataIndex: tmpIndex,
}) });
// } item_.dispatchAction({
}) type: "showTip",
}) seriesIndex: 1,
chartInstance[currentKey].on('mouseout', () => { dataIndex: tmpIndex,
Object.keys(chartInstance).forEach((key) => { });
if (key !== currentKey) { } else {
chartInstance[key].dispatchAction({ item_.dispatchAction({
type: 'hideTip', 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>
...@@ -787,7 +869,7 @@ $borderColor: #bbbdc391; ...@@ -787,7 +869,7 @@ $borderColor: #bbbdc391;
display: block; display: block;
padding-bottom: 100%; /* 9/16 * 100% = 56.25% */ padding-bottom: 100%; /* 9/16 * 100% = 56.25% */
} }
.status-normal { .status-normal {
background-color: #67c23a; // 绿色 background-color: #67c23a; // 绿色
} }
......
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