Skip to content

D
device-new-platform
Commit 8c6229bf authored by “yiyousong”'s avatar “yiyousong”
Browse files
Options

perf: 优化数据分析页面

parent 840a95fb
Hide whitespace changes
Inline Side-by-side
Showing with 94 additions and 69 deletions
device-manager-ui/admin/src/views/analysis/Analysis.vue
View file @ 8c6229bf
......@@ -64,36 +64,52 @@
<div class="center">
<div class="center-top">
<div class="center-top-item">
<img src="@/assets/images/icon1.png" alt="">
<img src="@/assets/images/icon1.png" alt="" />
<div>
<h2 style="color: #69f3ff;text-shadow: 0 0 10px #69f3ff5b,0 0 20px #69f3ff5b,0 0 30px #69f3ff5b,0 0 40px #69f3ff5b;">{{centerTop.deviceTotalCount || 0}}</h2>
<h2
style="color: #69f3ff;text-shadow: 0 0 10px #69f3ff5b,0 0 20px #69f3ff5b,0 0 30px #69f3ff5b,0 0 40px #69f3ff5b;"
>
{{ centerTop.deviceTotalCount || 0 }}
</h2>
<p>在线设备总数</p>
</div>
</div>
<div class="center-top-item">
<img src="@/assets/images/icon2.png" alt="">
<img src="@/assets/images/icon2.png" alt="" />
<div>
<h2 style="color: #ffba69;text-shadow: 0 0 10px #ffb9693d,0 0 20px #ffb9693d,0 0 30px #ffb9693d,0 0 40px #ffb9693d;">{{centerTop.deviceOfflineCount || 0}}</h2>
<h2
style="color: #ffba69;text-shadow: 0 0 10px #ffb9693d,0 0 20px #ffb9693d,0 0 30px #ffb9693d,0 0 40px #ffb9693d;"
>
{{ centerTop.deviceOfflineCount || 0 }}
</h2>
<p>离线设备总数</p>
</div>
</div>
<div class="center-top-item">
<img src="@/assets/images/icon3.png" alt="">
<img src="@/assets/images/icon3.png" alt="" />
<div>
<h2 style="color: #ff69b3;text-shadow: 0 0 10px #ff69b452,0 0 20px #ff69b452,0 0 30px #ff69b452,0 0 40px #ff69b452;">{{centerTop.deviceStopCount || 0}}</h2>
<h2
style="color: #ff69b3;text-shadow: 0 0 10px #ff69b452,0 0 20px #ff69b452,0 0 30px #ff69b452,0 0 40px #ff69b452;"
>
{{ centerTop.deviceStopCount || 0 }}
</h2>
<p>停用设备总数</p>
</div>
</div>
<div class="center-top-item">
<img src="@/assets/images/icon4.png" alt="">
<img src="@/assets/images/icon4.png" alt="" />
<div>
<h2 style="color: #25f06c;text-shadow: 0 0 10px #25f06c3a,0 0 20px #25f06c3a,0 0 30px #25f06c3a,0 0 40px #25f06c3a;">{{centerTop.pushTotalCount || 0}}</h2>
<h2
style="color: #25f06c;text-shadow: 0 0 10px #25f06c3a,0 0 20px #25f06c3a,0 0 30px #25f06c3a,0 0 40px #25f06c3a;"
>
{{ centerTop.pushTotalCount || 0 }}
</h2>
<p>今日消息推送总数</p>
</div>
</div>
</div>
<div class="center-three">
<three :floorArr="floorArr" lv="1" :checkItem="checkDeviceItem"/>
<three :floorArr="floorArr" lv="1" :checkItem="checkDeviceItem" />
</div>
</div>
<div class="right">
......@@ -204,19 +220,20 @@ export default {
components: {
HeaderSite,
TitleItem,
three
three,
},
data() {
return {
floorArr:[],
floorArr: [],
siteId: session.getSession("siteid"),
warningInfo: {
data: [],
rowNum: 5,
waitTime: 2000,
unit: "次",
},
realTimeInfo: {
header: ["设备名称", "告警次数", "告警时间", "告警类型",'设备编码'],
header: ["设备名称", "告警次数", "告警时间", "告警类型", "设备编码"],
headerHeight: 30,
headerBGC: "#3B5A9E",
oddRowBGC: "",
......@@ -237,38 +254,37 @@ export default {
deviceFirmCollect: {}, // 设备厂家排名
alarmLevelCollect: {}, // 今日告警等级分布
deviceAlarmMapInfoList: [], // 实施告警消息
Statlist:[],//设备列表
checkDeviceItem:{},//选中设备
centerTop:{}
Statlist: [], //设备列表
checkDeviceItem: {}, //选中设备
centerTop: {},
};
},
created() {
this.getStatlist()
this.getStatlist();
this.getDevAlarm();
this.getData();
setTimeout(()=>{
this.floorArr = floorArr
},500)
this.centerDeviceType()
setTimeout(() => {
this.floorArr = floorArr;
}, 500);
this.centerDeviceType();
},
methods: {
// 中间设备状态
centerDeviceType(){
this.$post("/device/stat/list", { siteId: this.siteId,selected:0 }).then(res=>{
const {code,data} = res
console.log(data,"@@@@@")
if(code == 1 && data.data.length>0){
this.centerTop = data.data[0]
centerDeviceType() {
this.$post("/device/stat/list", {
siteId: this.siteId,
selected: 0,
}).then((res) => {
const { code, data } = res;
if (code == 1 && data.data.length > 0) {
this.centerTop = data.data[0];
}
})
});
},
// 点击设备
tabelRow(arr){
const {rowIndex} = arr
this.checkDeviceItem = this.Statlist[rowIndex]
console.log(this.checkDeviceItem,"111")
tabelRow(arr) {
const { rowIndex } = arr;
this.checkDeviceItem = this.Statlist[rowIndex];
},
// 获取今日告警设备统计
getDevAlarm() {
......@@ -285,7 +301,7 @@ export default {
alarmTypeCollect,
deviceFirmCollect,
alarmLevelCollect,
deviceAlarmMapInfoList,
// deviceAlarmMapInfoList,
} = res.data;
this.deviceTotalCount = deviceTotalCount;
this.siteSize = siteSize;
......@@ -297,24 +313,31 @@ export default {
this.deviceFirmCollect = deviceFirmCollect;
this.siteDeviceAlarmCollect = siteDeviceAlarmCollect;
this.alarmLevelCollect = alarmLevelCollect;
this.deviceAlarmMapInfoList = deviceAlarmMapInfoList;
// this.deviceAlarmMapInfoList = deviceAlarmMapInfoList;
// if (deviceAlarmMapInfoList.length) {
// let arr = deviceAlarmMapInfoList.map((v) => {
// return [
// v.deviceName,
// v.deviceName || "--",
// v.count,
// v.alarmTime,
// this.filterDevAlarmType(v.alarmType),
// ];
// });
// this.realTimeInfo = { ...this.realTimeInfo, data: arr };
// }
let { 直连设备, 子设备, 网关设备 } = deviceConnTypeCollect;
let { 在线, 离线, 缺纸 } = alarmTypeCollect;
let firmName = Object.keys(deviceFirmCollect).map((key) => key);
let firmValues = Object.keys(deviceFirmCollect).map((key) =>
Number(deviceFirmCollect[key])
let arr = Object.entries(deviceFirmCollect).sort((a, b) => {
return parseFloat(b[1]) - parseFloat(a[1]);
});
let newDeviceFirmCollect = {};
arr.forEach((v) => {
newDeviceFirmCollect[v[0]] = v[1];
});
let firmName = Object.keys(newDeviceFirmCollect).map((key) => key);
let firmValues = Object.keys(newDeviceFirmCollect).map((key) =>
Number(newDeviceFirmCollect[key])
);
if (Object.keys(siteDeviceAlarmCollect).length) {
let arr = Object.keys(siteDeviceAlarmCollect).map((key) => {
......@@ -337,28 +360,29 @@ export default {
);
},
// 查询单个异常设备
getStatlist(){
this.$post("/device/alarm/info/statlist", { siteId: this.siteId }).then(res=>{
const {code,data} = res
if(code == 1){
this.Statlist = data || []
if (data.length) {
let arr = data.map((v) => {
return [
v.device.deviceName,
v.todayAlarmDeviceCount,
this.$moment(v.alarmTime).format('YYYY-MM-DD HH:mm'),
v.alarmTypeStr,
v.device.deviceCode
];
});
this.realTimeInfo = { ...this.realTimeInfo, data: arr };
getStatlist() {
this.$post("/device/alarm/info/statlist", { siteId: this.siteId }).then(
(res) => {
const { code, data } = res;
if (code == 1) {
this.Statlist = data || [];
if (data.length) {
let arr = data.map((v) => {
return [
v.device.deviceName || "--",
v.todayAlarmInfoCount,
this.$moment(v.alarmTime).format("YYYY-MM-DD HH:mm"),
this.filterDevAlarmType(v.alarmTypeStr),
v.device.deviceCode,
];
});
this.realTimeInfo = { ...this.realTimeInfo, data: arr };
}
}
}
})
);
},
// 获取设备类型分布图标
// 获取设备类型分布
getDevTypeDisEchart(direct, subset, network) {
let chartDom = document.getElementById("devTypeDis");
this.devType = this.$echarts.init(chartDom);
......@@ -712,17 +736,18 @@ export default {
// 过滤设备告警类型
filterDevAlarmType(type) {
if (type == "离线") {
return `<span style='color:#FF4A4A'>${type}</span>`;
return `<span style='color:#FF964A'>${type}</span>`;
} else if (type == "在线") {
return `<span style='color:#5ceeff'>${type}</span>`;
} else if (type == "停用") {
return `<span style='color:#FF964A'>${type}</span>`;
return `<span style='color:#FF4A4A'>${type}</span>`;
}
},
// 定时获取数据
getData() {
this.timer = setInterval(() => {
this.getDevAlarm();
this.getStatlist();
}, 1000 * 60);
},
},
......@@ -839,27 +864,27 @@ export default {
.center {
width: 780px;
position: relative;
.center-top{
.center-top {
display: flex;
align-items: center;
justify-content:space-around;
justify-content: space-around;
}
.center-three{
.center-three {
height: 780px;
width: 780px;
}
.center-top-item{
.center-top-item {
display: flex;
align-items: center;
img{
img {
display: block;
width: 55px;
margin-right: 5px;
}
h2{
h2 {
font-size: 20px;
}
p{
p {
font-size: 12px;
}
}
......@@ -946,4 +971,4 @@ export default {
}
}
}
</style>
\ No newline at end of file
</style>
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