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 @@
</div>
</div>
<div class="warn-info">
<warnCom title="告警" :listInfo="warnInfoList" @jumpPage="toWarnDetail"></warnCom>
<warnCom
title="告警"
:listInfo="warnInfoList"
@jumpPage="toWarnDetail"
></warnCom>
</div>
</div>
<div class="right-box">
......@@ -70,7 +74,11 @@
</div>
<div class="position-info">
<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
class="point"
:class="{
......@@ -109,7 +117,11 @@
</div>
</div>
<div class="warn-info">
<warnCom title="闭环" :listInfo="closedLoopInfoList" @jumpPage="toCircleDetail"></warnCom>
<warnCom
title="闭环"
:listInfo="closedLoopInfoList"
@jumpPage="toCircleDetail"
></warnCom>
</div>
</div>
</div>
......@@ -130,26 +142,31 @@ const userStore = useUsersStore();
const form = reactive({
dusterNo: "",
dateValue: [
moment(new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 10)).format("YYYY-MM-DD") + ' 00:00:00',
moment(new Date()).format("YYYY-MM-DD") + ' 23:59:59',
moment(new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 10)).format(
"YYYY-MM-DD"
) + " 00:00:00",
moment(new Date()).format("YYYY-MM-DD") + " 23:59:59",
],
});
const startVal = ref(null);
const calendarChange = (e) => {
if (e[0] && !e[1]) {
startVal.value = e[0];
}
if (e[0] && !e[1]) {
startVal.value = e[0];
}
};
const visibleChange = (e) => {
if (e) {
startVal.value = null;
}
if (e) {
startVal.value = null;
}
};
const disabledFn = (current) => {
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 cur = new Date(current).getTime();
return cur < range[0] || cur > range[1];
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 cur = new Date(current).getTime();
return cur < range[0] || cur > range[1];
};
const option = {
xAxis: {
......@@ -178,40 +195,103 @@ const initChart = (instance, option, domEl) => {
instance = echarts.init(document.getElementById(domEl));
instance.setOption(option);
chartInstance[domEl] = instance;
chartLinkageFun()
// instance.on("showTip", (params) => {
// console.log(params);
// })
chartLinkageFun();
};
let instanceList = reactive([])
// 图表联动
const chartLinkageFun = (target) => {
Object.keys(chartInstance).forEach((currentKey) => {
chartInstance[currentKey].on('mousemove', (params) => {
Object.keys(chartInstance).forEach((key) => {
// if (key !== currentKey) {
chartInstance[key].dispatchAction({
type: 'showTip',
instanceList = []
Object.keys(chartInstance).forEach((key) => {
instanceList.push(chartInstance[key]);
});
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: params.dataIndex
})
// }
})
})
chartInstance[currentKey].on('mouseout', () => {
Object.keys(chartInstance).forEach((key) => {
if (key !== currentKey) {
chartInstance[key].dispatchAction({
type: 'hideTip',
})
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 = () => {
Object.keys(chartInstance).forEach((key) => {
chartInstance[key].off()
})
}
chartInstance[key].off();
});
};
const dustInfo = reactive([
{
label: "压差",
......@@ -342,8 +422,8 @@ const getHealthIndex = () => {
const params = {
customerId: userStore.customerId,
deviceNo: form.dusterNo,
startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + ' 00:00:00',
endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + ' 23:59:59',
startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + " 00:00:00",
endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + " 23:59:59",
};
getDataFun(url, params).then((res) => {
if (res && res.data) {
......@@ -367,8 +447,8 @@ const getPressure = () => {
const params = {
customerId: userStore.customerId,
deviceNo: form.dusterNo,
startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + ' 00:00:00',
endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + ' 23:59:59',
startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + " 00:00:00",
endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + " 23:59:59",
};
getDataFun(url, params).then((res) => {
if (res && res.data) {
......@@ -392,8 +472,8 @@ const getEnergy = () => {
const params = {
customerId: userStore.customerId,
deviceNo: form.dusterNo,
startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + ' 00:00:00',
endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + ' 23:59:59',
startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + " 00:00:00",
endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + " 23:59:59",
};
getDataFun(url, params).then((res) => {
if (res && res.data) {
......@@ -414,7 +494,7 @@ const detailObj = reactive({
faultCompart: "",
compartHealthList: [],
});
const healthPercent = ref()
const healthPercent = ref();
// 获取除尘器详情
const getDustDetail = () => {
if (!form.dusterNo) {
......@@ -424,8 +504,8 @@ const getDustDetail = () => {
const params = {
customerId: userStore.customerId,
deviceNo: form.dusterNo,
startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + ' 00:00:00',
endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + ' 23:59:59',
startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + " 00:00:00",
endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + " 23:59:59",
};
getDataFun(url, params)
.then((res) => {
......@@ -515,13 +595,16 @@ const getDustDetail = () => {
indicatorOneInstance,
"indicatorOne",
getGaugeOption({
value: (dustInfo[0].value).toFixed(2),
value: dustInfo[0].value.toFixed(2),
chartName: "压差",
min: parseInt(res.data.pressureDiffLow),
max: parseInt(res.data.pressureDiffHigh),
formatter: parseInt(res.data.pressureDiffHigh) > 10 ? function(value) {
return parseInt(value)
} : ''
formatter:
parseInt(res.data.pressureDiffHigh) > 10
? function (value) {
return parseInt(value);
}
: "",
})
);
indicatorFun(
......@@ -532,9 +615,9 @@ const getDustDetail = () => {
chartName: "粉尘浓度",
min: 5,
max: 50,
formatter: function(value) {
return parseInt(value)
}
formatter: function (value) {
return parseInt(value);
},
})
);
healthPercent.value = parseFloat(res.data.healthPercent);
......@@ -556,9 +639,9 @@ const toWarnDetail = () => {
deviceName: dusterName.value,
suspendStartTime: form.dateValue[0],
suspendEndTime: form.dateValue[1],
}
},
});
}
};
const toCircleDetail = () => {
router.push({
path: "/my-loop/myAgency",
......@@ -567,9 +650,9 @@ const toCircleDetail = () => {
deviceName: dusterName.value,
suspendStartTime: form.dateValue[0],
suspendEndTime: form.dateValue[1],
}
},
});
}
};
// 获取告警信息
const getAlarmInfo = () => {
if (!form.dusterNo) {
......@@ -579,8 +662,8 @@ const getAlarmInfo = () => {
const params = {
customerId: userStore.customerId,
deviceNo: form.dusterNo,
startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + ' 00:00:00',
endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + ' 23:59:59',
startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + " 00:00:00",
endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + " 23:59:59",
};
getDataFun(url, params)
.then((res) => {
......@@ -606,8 +689,8 @@ onMounted(() => {
});
onUnmounted(() => {
window.removeEventListener("resize", resizeFun);
chartRemoveEvent()
})
chartRemoveEvent();
});
watch(
() => form.dusterNo,
() => {
......@@ -638,8 +721,7 @@ const handleStatusDotClick = () => {
query: {
dusterNo: form.dusterNo,
dusterName: dusterName.value,
}
},
});
};
</script>
......@@ -787,7 +869,7 @@ $borderColor: #bbbdc391;
display: block;
padding-bottom: 100%; /* 9/16 * 100% = 56.25% */
}
.status-normal {
.status-normal {
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