Skip to content

Y
yindong-tongbai-automation
Commit e386c6c7 authored by lei's avatar lei
Browse files
Options

7日报警信息接口对接

parent 8e383cdf
Show whitespace changes
Inline Side-by-side
Showing with 208 additions and 48 deletions
src/api/tyler/hjjc.js
View file @ e386c6c7
...@@ -42,3 +42,12 @@ export function getDeviceStatus(query) { ...@@ -42,3 +42,12 @@ export function getDeviceStatus(query) {
params: query, params: query,
}); });
} }
// 查询近7日报警信息
export function getRecentSevDaysAlarms(query) {
return request({
url: "/business/screen/env/recentSevDaysAlarms",
method: "get",
params: query,
});
}
src/views/Screen/items/hjjc.vue
View file @ e386c6c7
...@@ -86,14 +86,14 @@ ...@@ -86,14 +86,14 @@
<div class="sidebar-item H286 alert-analysis"> <div class="sidebar-item H286 alert-analysis">
<div class="sub-title por"> <div class="sub-title por">
<span>历史数据图</span> <span>历史数据图</span>
<span class="scroll-title">{{ sssjName }}</span> <span class="scroll-title">{{ rightTopLssjData.name }}</span>
</div> </div>
<div class="sub-con"> <div class="sub-con">
<div class="sub-con"> <div class="sub-con">
<span <span
v-for="(item, i) in sssjData" v-for="(item, i) in rightTopLssjData.list"
:key="i" :key="i"
:class="i == sssjMark ? 'active' : ''" :class="i == rightTopLssjData.mark ? 'active' : ''"
>{{ item.name }} >{{ item.name }}
<p class="subscript"></p> <p class="subscript"></p>
</span> </span>
...@@ -105,14 +105,14 @@ ...@@ -105,14 +105,14 @@
<div class="sidebar-item H286 alert-analysis"> <div class="sidebar-item H286 alert-analysis">
<div class="sub-title por"> <div class="sub-title por">
<span>历史数据图</span> <span>历史数据图</span>
<span class="scroll-title">1</span> <span class="scroll-title">{{ rightCenterLssjData.name }}</span>
</div> </div>
<div class="sub-con"> <div class="sub-con">
<div class="sub-con"> <div class="sub-con">
<span <span
v-for="(item, i) in sssjData" v-for="(item, i) in rightCenterLssjData.list"
:key="i" :key="i"
:class="i == sssjMark ? 'active' : ''" :class="i == rightCenterLssjData.mark ? 'active' : ''"
>{{ item.name }} >{{ item.name }}
<p class="subscript"></p> <p class="subscript"></p>
</span> </span>
...@@ -178,6 +178,8 @@ import { ...@@ -178,6 +178,8 @@ import {
getRtData, getRtData,
getDeviceStatus, getDeviceStatus,
getDeviceData, getDeviceData,
getRcData,
getRecentSevDaysAlarms,
} from "@/api/tyler/hjjc"; } from "@/api/tyler/hjjc";
import ScrollTable from "@/components/Tyler/ScrollTable.vue"; import ScrollTable from "@/components/Tyler/ScrollTable.vue";
import screenfull from "screenfull"; import screenfull from "screenfull";
...@@ -206,14 +208,15 @@ export default { ...@@ -206,14 +208,15 @@ export default {
autoPlay: true, autoPlay: true,
}, },
// 设备定位分类开关 // 设备定位分类开关
checkList: ["1", "2"], checkList: ["2"],
// 右下滚动 参数 // 右下滚动 参数
classOption2: { classOption2: {
singleHeight: 47, singleHeight: 47,
hoverStop: true, hoverStop: true,
}, },
// 左侧实施数据列表 // 左侧实施数据列表
sssjData: [ rightTopLssjData: {
list: [
{ {
name: "", name: "",
value: [ value: [
...@@ -231,9 +234,34 @@ export default { ...@@ -231,9 +234,34 @@ export default {
}, },
], ],
// 右上设备轮播下标 // 右上设备轮播下标
sssjMark: 0, mark: 0,
// 右上设备轮播名称 // 右上设备轮播名称
sssjName: "", name: "",
},
// 左侧实施数据列表
rightCenterLssjData: {
list: [
{
name: "",
value: [
{
data: {
xData: {
data: [],
},
yData: {
data: [],
},
},
},
],
},
],
// 右上设备轮播下标
mark: 0,
// 右上设备轮播名称
name: "",
},
// 右下 列表数据 // 右下 列表数据
tableData2: [ tableData2: [
{ {
...@@ -309,14 +337,24 @@ export default { ...@@ -309,14 +337,24 @@ export default {
} }
// this.initEchartBox("right", this.salvProName, this.salvProValue, 28); // this.initEchartBox("right", this.salvProName, this.salvProValue, 28);
// this.initEchartBox("sssj", this.salvProName, this.salvProValue, 28); // this.initEchartBox("sssj", this.salvProName, this.salvProValue, 28);
this.initRealData();
getRtData().then((res) => { getRtData().then((res) => {
this.sssjData = res.data; this.rightTopLssjData.list = res.data || [];
this.playFun(this.sssjData); this.rtPlayFun(this.rightTopLssjData);
});
getRcData().then((res) => {
this.rightCenterLssjData.list = res.data || [];
this.rcPlayFun(this.rightTopLssjData);
}); });
getDeviceStatus().then((res) => { getDeviceStatus().then((res) => {
this.equipmentList = res.data; this.equipmentList = res.data;
}); });
getRecentSevDaysAlarms().then((res) => {
//数据空
});
//初始化获取左侧环境监测实施数据
getRealData().then((res) => {
this.tableData1 = res.data;
});
}, },
created() {}, created() {},
methods: { methods: {
...@@ -324,16 +362,10 @@ export default { ...@@ -324,16 +362,10 @@ export default {
getItemField(item, fieldKey) { getItemField(item, fieldKey) {
return item[this.fieldMap[fieldKey]] || ""; return item[this.fieldMap[fieldKey]] || "";
}, },
//初始化获取左侧环境监测实施数据
initRealData() {
getRealData().then((res) => {
this.tableData1 = res.data;
});
},
// 初始化eChartDOM // 初始化eChartDOM
initEchartBox(id, xData = [], yData = [], mkData = 28, step = 4, grid) { initEchartBox(id, xData = [], yData = [], mkData = 28, step = 4, grid) {
let that = this; let myChart = null;
let myChart = echarts.init(document.getElementById(id)); myChart = echarts.init(document.getElementById(id));
let option = { let option = {
grid: grid, grid: grid,
xAxis: { xAxis: {
...@@ -363,6 +395,7 @@ export default { ...@@ -363,6 +395,7 @@ export default {
}, },
yAxis: { yAxis: {
type: "value", type: "value",
max: 50,
boundaryGap: false, boundaryGap: false,
axisTick: { axisTick: {
alignWithLabel: true, alignWithLabel: true,
...@@ -433,10 +466,89 @@ export default { ...@@ -433,10 +466,89 @@ export default {
setTimeout(() => { setTimeout(() => {
myChart.resize(); myChart.resize();
}, 600); }, 600);
this.$on("hook:deactivated", () => {
if (myChart != null && myChart != "" && myChart != undefined) {
myChart.dispose();
}
myChart = null;
});
}, },
// 轮播eChart // 轮播eChart
// 更改数据达到轮播效果 // 更改数据达到轮播效果
playFun(list = []) { rtPlayFun(data) {
// 启动定时器，每隔 3 秒执行一次
let i = 0;
let l = 0;
let grid = {
left: "4%",
right: "5%",
bottom: "4%",
top: "7%",
containLabel: true,
};
const timer = setInterval(() => {
if (i < data.list.length) {
if (
Array.isArray(data.list[i].value) &&
l < data.list[i].value.length
) {
this.rightTopLssjData.mark = i;
this.rightTopLssjData.name = data.list[i].value[l].tpName;
this.initEchartBox(
"sssj",
data.list[i].value[l].data.xData.data,
data.list[i].value[l].data.yData[0].data,
"",
1,
grid
);
l++;
} else {
i++;
}
} else {
i = 0;
l = 0;
}
}, 15000);
this.$on("hook:activated", () => {
if (timer === null) {
// 避免重复开启定时器
timer = setInterval(() => {
if (i < data.list.length) {
if (
Array.isArray(data.list[i].value) &&
l < data.list[i].value.length
) {
this.rightTopLssjData.mark = i;
this.rightTopLssjData.name = data.list[i].value[l].tpName;
this.initEchartBox(
"sssj",
data.list[i].value[l].data.xData.data,
data.list[i].value[l].data.yData[0].data,
"",
1,
grid
);
l++;
} else {
i++;
}
} else {
i = 0;
l = 0;
}
}, 15000);
}
});
this.$on("hook:deactivated", () => {
clearInterval(timer);
timer = null;
});
},
// 更改数据达到轮播效果
rcPlayFun(data) {
// 启动定时器，每隔 3 秒执行一次 // 启动定时器，每隔 3 秒执行一次
let i = 0; let i = 0;
let l = 0; let l = 0;
...@@ -448,17 +560,49 @@ export default { ...@@ -448,17 +560,49 @@ export default {
containLabel: true, containLabel: true,
}; };
const timer = setInterval(() => { const timer = setInterval(() => {
if (i < list.length) { if (i < data.list.length) {
if (Array.isArray(list[i].value) && l < list[i].value.length) { if (
this.sssjMark = i; Array.isArray(data.list[i].value) &&
this.sssjName = list[i].value[l].tpName; l < data.list[i].value.length
// this.initEchartBox( ) {
// "sssj", this.rightCenterLssjData.mark = i;
// list[i].value[l].data.xData.data, this.rightCenterLssjData.name = data.list[i].value[l].tpName;
// list[i].value[l].data.yData.data, this.initEchartBox(
// "", "right",
// grid data.list[i].value[l].data.xData.data,
// ); data.list[i].value[l].data.yData[0].data,
"",
1,
grid
);
l++;
} else {
i++;
}
} else {
i = 0;
l = 0;
}
}, 15000);
this.$on("hook:activated", () => {
if (timer === null) {
// 避免重复开启定时器
timer = setInterval(() => {
if (i < data.list.length) {
if (
Array.isArray(data.list[i].value) &&
l < data.list[i].value.length
) {
this.rightCenterLssjData.mark = i;
this.rightCenterLssjData.name = data.list[i].value[l].tpName;
this.initEchartBox(
"right",
data.list[i].value[l].data.xData.data,
data.list[i].value[l].data.yData[0].data,
"",
1,
grid
);
l++; l++;
} else { } else {
i++; i++;
...@@ -468,6 +612,13 @@ export default { ...@@ -468,6 +612,13 @@ export default {
l = 0; l = 0;
} }
}, 15000); }, 15000);
}
});
this.$on("hook:deactivated", () => {
clearInterval(timer);
timer = null;
});
}, },
//自动滚动 //自动滚动
autoScroll() { autoScroll() {
......
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