Skip to content

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

feat:数据分析接口调试

parent 9390ddfa
Hide whitespace changes
Inline Side-by-side
Showing with 147 additions and 148 deletions
device-manager-ui/admin/src/views/analysis/Analysis.vue
View file @ a3d69e36
...@@ -24,17 +24,17 @@ ...@@ -24,17 +24,17 @@
<div class="dev-total flex aic jcb mb30"> <div class="dev-total flex aic jcb mb30">
<div class="dev-total-item"> <div class="dev-total-item">
<img class="icon-img" src="@/assets/images/data/icon4.png" /> <img class="icon-img" src="@/assets/images/data/icon4.png" />
<div class="flex flexc jcb"> <div class="flex flexc jcb flex1">
<div class="title tar">设备总数（台）</div> <div class="title tar">设备总数（台）</div>
<div class="tar count">200</div> <div class="tar count">{{ deviceTotalCount }}</div>
<img class="line-img" src="@/assets/images/data/icon8.png" /> <img class="line-img" src="@/assets/images/data/icon8.png" />
</div> </div>
</div> </div>
<div class="dev-total-item"> <div class="dev-total-item">
<img class="icon-img" src="@/assets/images/data/icon3.png" /> <img class="icon-img" src="@/assets/images/data/icon3.png" />
<div class="flex flexc jcb"> <div class="flex flexc jcb flex1">
<div class="title tar">监控站点（个）</div> <div class="title tar">监控站点（个）</div>
<div class="tar count">200</div> <div class="tar count">{{ siteSize }}</div>
<img class="line-img" src="@/assets/images/data/icon8.png" /> <img class="line-img" src="@/assets/images/data/icon8.png" />
</div> </div>
</div> </div>
...@@ -61,26 +61,24 @@ ...@@ -61,26 +61,24 @@
</div> </div>
</div> </div>
</div> </div>
<div class="center"> <div class="center"></div>
<Three class="three" :lv="lv" :floorArr="floorArr"></Three>
</div>
<div class="right"> <div class="right">
<div class="right-content"> <div class="right-content">
<!-- 设备告警汇总 --> <!-- 设备告警汇总 -->
<div class="dev-total flex aic jcb mb30"> <div class="dev-total flex aic jcb mb30">
<div class="dev-total-item"> <div class="dev-total-item">
<img class="icon-img" src="@/assets/images/data/icon7.png" /> <img class="icon-img" src="@/assets/images/data/icon7.png" />
<div class="flex flexc jcb"> <div class="flex flexc jcb flex1">
<div class="title tar">今日告警次数（次）</div> <div class="title tar">今日告警次数（次）</div>
<div class="tar count">200</div> <div class="tar count">{{ todayAlarmInfoCount }}</div>
<img class="line-img" src="@/assets/images/data/icon8.png" /> <img class="line-img" src="@/assets/images/data/icon8.png" />
</div> </div>
</div> </div>
<div class="dev-total-item"> <div class="dev-total-item">
<img class="icon-img" src="@/assets/images/data/icon6.png" /> <img class="icon-img" src="@/assets/images/data/icon6.png" />
<div class="flex flexc jcb"> <div class="flex flexc jcb flex1">
<div class="title tar">今日告警设备（个）</div> <div class="title tar">今日告警设备（个）</div>
<div class="tar count">200</div> <div class="tar count">{{ todayAlarmDeviceCount }}</div>
<img class="line-img" src="@/assets/images/data/icon8.png" /> <img class="line-img" src="@/assets/images/data/icon8.png" />
</div> </div>
</div> </div>
...@@ -92,19 +90,25 @@ ...@@ -92,19 +90,25 @@
<div class="warning-info-item1"> <div class="warning-info-item1">
<div class="item1-info"> <div class="item1-info">
<div class="title">危险</div> <div class="title">危险</div>
<div class="percent">24%</div> <div class="percent">
{{ alarmLevelCollect.危险 ? alarmLevelCollect.危险 : 0 }}%
</div>
</div> </div>
</div> </div>
<div class="warning-info-item2"> <div class="warning-info-item2">
<div class="item2-info"> <div class="item2-info">
<div class="title">次要</div> <div class="title">次要</div>
<div class="percent">24%</div> <div class="percent">
{{ alarmLevelCollect.次要 ? alarmLevelCollect.次要 : 0 }}%
</div>
</div> </div>
</div> </div>
<div class="warning-info-item1"> <div class="warning-info-item1">
<div class="item1-info"> <div class="item1-info">
<div class="title">一般</div> <div class="title">一般</div>
<div class="percent">24%</div> <div class="percent">
{{ alarmLevelCollect.一般 ? alarmLevelCollect.一般 : 0 }}%
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -128,46 +132,17 @@ ...@@ -128,46 +132,17 @@
<script> <script>
import HeaderSite from "./components/HeaderSite.vue"; import HeaderSite from "./components/HeaderSite.vue";
import TitleItem from "./components/TitleItem.vue"; import TitleItem from "./components/TitleItem.vue";
import Three from "@/components/three/Three.vue"; import session from "@/assets/utils/session";
export default { export default {
components: { components: {
HeaderSite, HeaderSite,
TitleItem, TitleItem,
Three,
}, },
data() { data() {
return { return {
siteId: session.getSession("siteid"),
warningInfo: { warningInfo: {
data: [ data: [],
{
name: "周口",
value: 55,
},
{
name: "南阳",
value: 120,
},
{
name: "西峡",
value: 78,
},
{
name: "驻马店",
value: 66,
},
{
name: "新乡",
value: 80,
},
{
name: "信阳",
value: 45,
},
{
name: "漯河",
value: 29,
},
],
rowNum: 5, rowNum: 5,
waitTime: 2000, waitTime: 2000,
}, },
...@@ -179,92 +154,95 @@ export default { ...@@ -179,92 +154,95 @@ export default {
evenRowBGC: "#263963", evenRowBGC: "#263963",
rowNum: 17, rowNum: 17,
align: ["center", "center", "center", "center"], align: ["center", "center", "center", "center"],
data: [ data: [],
[
"一楼排号机",
"5",
"15:00",
"<span style='color:#5ceeff'>在线</span>",
],
["一楼排号机", "5", "15:00", "在线"],
[
"一楼排号机",
"5",
"15:00",
"<span style='color:#FF4A4A'>离线</span>",
],
["一楼排号机", "5", "15:00", "在线"],
["一楼排号机", "5", "15:00", "待激活"],
[
"一楼排号机",
"5",
"15:00",
"<span style='color:#FF964A'>停用</span>",
],
["一楼排号机", "5", "15:00", "在线"],
["一楼排号机", "5", "15:00", "在线"],
["一楼排号机", "5", "15:00", "在线"],
["一楼排号机", "5", "15:00", "在线"],
["一楼排号机", "5", "15:00", "在线"],
["一楼排号机", "5", "15:00", "在线"],
["一楼排号机", "5", "15:00", "在线"],
["一楼排号机", "5", "15:00", "在线"],
["一楼排号机", "5", "15:00", "在线"],
["一楼排号机", "5", "15:00", "在线"],
["一楼排号机", "5", "15:00", "在线"],
["一楼排号机", "5", "15:00", "在线"],
["一楼排号机", "5", "15:00", "在线"],
["一楼排号机", "5", "15:00", "在线"],
["一楼排号机", "5", "15:00", "在线"],
["一楼排号机", "5", "15:00", "在线"],
["一楼排号机", "5", "15:00", "在线"],
["一楼排号机", "5", "15:00", "在线"],
],
}, },
floorArr: [], floorArr: [],
lv: "1", lv: "1",
deviceTotalCount: 0, // 总设备数量
siteSize: 0, // 监控站点数量
todayAlarmInfoCount: 0, // 今日告警次数
todayAlarmDeviceCount: 0, // 今日告警设备数量
siteDeviceCollect: 0, // 分站点统计设备数量
siteDeviceAlarmCollect: 0, // 分站点统计设备今日告警数量
deviceConnTypeCollect: {}, // 设备类型分布
alarmTypeCollect: {}, // 告警类型统计分布
deviceFirmCollect: {}, // 设备厂家排名
alarmLevelCollect: {}, // 今日告警等级分布
deviceAlarmMapInfoList: [], // 实施告警消息
}; };
}, },
mounted() { created() {
this.getDevTypeDisEchart(); this.getDevAlarm();
this.getWarningDisEchart(); this.getData();
this.getManufacturersTopEchart();
setTimeout(() => {
this.floorArr = [
{
id: 4,
building: 1,
lv: 1,
picture: "",
phonepicture: "",
mtl_url: "/uploads/floor/yibin2/L1.mtl",
obj_url: "/uploads/floor/L1-1/L1-1.gltf",
siteid: 1,
type: 1,
create_time: "2023-03-13 11:32:38",
update_time: "2023-04-08 11:40:07",
zip_url: "/uploads/floor/L1-1/L1-1.zip",
},
{
id: 5,
building: 1,
lv: 2,
picture: "",
phonepicture: "",
mtl_url: "/uploads/floor/yibin/L2.mtl",
obj_url: "/uploads/floor/L2-1/L2-1.gltf",
siteid: 1,
type: 1,
create_time: "2023-03-13 16:54:14",
update_time: "2023-04-08 11:40:21",
zip_url: "/uploads/floor/L2-1/L2-1.zip",
},
];
});
}, },
methods: { methods: {
// 获取今日告警设备统计
getDevAlarm() {
this.$post("/device/alarm/info/stats", { siteId: this.siteId }).then(
(res) => {
let {
deviceTotalCount,
siteSize,
todayAlarmInfoCount,
todayAlarmDeviceCount,
siteDeviceCollect,
siteDeviceAlarmCollect,
deviceConnTypeCollect,
alarmTypeCollect,
deviceFirmCollect,
alarmLevelCollect,
deviceAlarmMapInfoList,
} = res.data;
this.deviceTotalCount = deviceTotalCount;
this.siteSize = siteSize;
this.todayAlarmInfoCount = todayAlarmInfoCount;
this.todayAlarmDeviceCount = todayAlarmDeviceCount;
this.siteDeviceCollect = siteDeviceCollect;
this.alarmTypeCollect = alarmTypeCollect;
this.deviceConnTypeCollect = deviceConnTypeCollect;
this.deviceFirmCollect = deviceFirmCollect;
this.siteDeviceAlarmCollect = siteDeviceAlarmCollect;
this.alarmLevelCollect = alarmLevelCollect;
this.deviceAlarmMapInfoList = deviceAlarmMapInfoList;
if (deviceAlarmMapInfoList.length) {
let arr = deviceAlarmMapInfoList.map((v) => {
return [
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])
);
if (Object.keys(siteDeviceAlarmCollect).length) {
let arr = Object.keys(siteDeviceAlarmCollect).map((key) => {
return {
name: key,
value: siteDeviceAlarmCollect[key],
};
});
this.warningInfo = { ...this.warningInfo, data: arr };
}
this.$nextTick(() => {
// 设备类型发布
this.getDevTypeDisEchart(直连设备, 子设备, 网关设备);
// 设备告警类型分布
this.getWarningDisEchart(在线, 离线, 缺纸);
// 厂家top5
this.getManufacturersTopEchart(firmName, firmValues);
});
}
);
},
// 获取设备类型分布图标 // 获取设备类型分布图标
getDevTypeDisEchart() { getDevTypeDisEchart(direct, subset, network) {
let chartDom = document.getElementById("devTypeDis"); let chartDom = document.getElementById("devTypeDis");
this.devType = this.$echarts.init(chartDom); this.devType = this.$echarts.init(chartDom);
if (!this.devType) { if (!this.devType) {
...@@ -307,7 +285,7 @@ export default { ...@@ -307,7 +285,7 @@ export default {
left: "center", left: "center",
top: "center", top: "center",
style: { style: {
text: "总数" + "\n\n" + 200, text: "总数" + "\n\n" + this.deviceTotalCount,
textAlign: "center", textAlign: "center",
fill: "#fff", fill: "#fff",
width: 30, width: 30,
...@@ -333,21 +311,21 @@ export default { ...@@ -333,21 +311,21 @@ export default {
}, },
data: [ data: [
{ {
value: 1048, value: subset || 0,
name: "子设备", name: "子设备",
itemStyle: { itemStyle: {
color: "#5CEEFF", color: "#5CEEFF",
}, },
}, },
{ {
value: 735, value: network || 0,
name: "网关设备", name: "网关设备",
itemStyle: { itemStyle: {
color: "#5DA7FF", color: "#5DA7FF",
}, },
}, },
{ {
value: 580, value: direct || 0,
name: "直连设备", name: "直连设备",
itemStyle: { itemStyle: {
color: "#FF964A", color: "#FF964A",
...@@ -361,7 +339,7 @@ export default { ...@@ -361,7 +339,7 @@ export default {
option && this.devType.setOption(option); option && this.devType.setOption(option);
}, },
// 获取告警类型分布 // 获取告警类型分布
getWarningDisEchart() { getWarningDisEchart(onLine, offLine, lackPaper) {
let chartDom = document.getElementById("warningDis"); let chartDom = document.getElementById("warningDis");
this.warningDis = this.$echarts.init(chartDom); this.warningDis = this.$echarts.init(chartDom);
if (!this.warningDis) { if (!this.warningDis) {
...@@ -404,7 +382,7 @@ export default { ...@@ -404,7 +382,7 @@ export default {
left: "center", left: "center",
top: "center", top: "center",
style: { style: {
text: "总数" + "\n\n" + 2000, text: "总数" + "\n\n" + this.todayAlarmInfoCount,
textAlign: "center", textAlign: "center",
fill: "#fff", fill: "#fff",
width: 30, width: 30,
...@@ -429,21 +407,21 @@ export default { ...@@ -429,21 +407,21 @@ export default {
}, },
data: [ data: [
{ {
value: 1048, value: onLine || 0,
name: "在线", name: "在线",
itemStyle: { itemStyle: {
color: "#5CEEFF", color: "#5CEEFF",
}, },
}, },
{ {
value: 735, value: offLine || 0,
name: "离线", name: "离线",
itemStyle: { itemStyle: {
color: "#5DA7FF", color: "#5DA7FF",
}, },
}, },
{ {
value: 580, value: lackPaper || 0,
name: "缺纸", name: "缺纸",
itemStyle: { itemStyle: {
color: "#FF4A4A", color: "#FF4A4A",
...@@ -457,7 +435,7 @@ export default { ...@@ -457,7 +435,7 @@ export default {
option && this.warningDis.setOption(option); option && this.warningDis.setOption(option);
}, },
// 获取厂家top5Echart // 获取厂家top5Echart
getManufacturersTopEchart() { getManufacturersTopEchart(names = [], values = []) {
let chartDom = document.getElementById("manufacturersTop"); let chartDom = document.getElementById("manufacturersTop");
// 避免刷新数据时重新初始化图表 // 避免刷新数据时重新初始化图表
this.manufacturersTop = this.$echarts.getInstanceByDom(chartDom); this.manufacturersTop = this.$echarts.getInstanceByDom(chartDom);
...@@ -480,18 +458,19 @@ export default { ...@@ -480,18 +458,19 @@ export default {
textStyle: { textStyle: {
color: "#fff", color: "#fff",
}, },
formatter: (params) => {
let str = "";
params.forEach((v) => {
str = `${v.name}：${v.value}%`;
});
return str;
},
}, },
yAxis: [ yAxis: [
{ {
type: "category", type: "category",
inverse: true, // 反转渲染 inverse: true, // 反转渲染
data: [ data: names,
"四川信宏翔科技有限公司",
"四川信宏翔科技有限公司",
"四川信宏翔科技有限公司",
"四川信宏翔科技有限公司",
"四川信宏翔科技有限公司",
],
axisLine: { axisLine: {
show: false, show: false,
}, },
...@@ -537,7 +516,7 @@ export default { ...@@ -537,7 +516,7 @@ export default {
{ {
type: "bar", type: "bar",
barWidth: "8px", // 柱体宽度 barWidth: "8px", // 柱体宽度
data: [100, 200, 100, 300, 400], data: values,
// 数值 // 数值
label: { label: {
show: false, show: false,
...@@ -581,7 +560,7 @@ export default { ...@@ -581,7 +560,7 @@ export default {
symbolSize: [2, 8], symbolSize: [2, 8],
symbolPosition: "start", symbolPosition: "start",
symbolOffset: [-1, 0], symbolOffset: [-1, 0],
data: [100, 200, 100, 300, 400], data: values,
z: 66, z: 66,
animationEasing: "elasticOut", animationEasing: "elasticOut",
tooltip: { tooltip: {
...@@ -601,7 +580,7 @@ export default { ...@@ -601,7 +580,7 @@ export default {
symbolSize: [2, 8], symbolSize: [2, 8],
symbolPosition: "start", symbolPosition: "start",
symbolOffset: [-1, 0], symbolOffset: [-1, 0],
data: [400, 400, 400, 400, 400], data: [100, 100, 100, 100, 100],
z: 60, z: 60,
animationEasing: "elasticOut", animationEasing: "elasticOut",
tooltip: { tooltip: {
...@@ -613,6 +592,25 @@ export default { ...@@ -613,6 +592,25 @@ export default {
option && this.manufacturersTop.setOption(option); option && this.manufacturersTop.setOption(option);
}, },
// 过滤设备告警类型
filterDevAlarmType(type) {
if (type == "离线") {
return `<span style='color:#FF4A4A'>${type}</span>`;
} else if (type == "在线") {
return `<span style='color:#5ceeff'>${type}</span>`;
} else if (type == "停用") {
return `<span style='color:#FF964A'>${type}</span>`;
}
},
// 定时获取数据
getData() {
this.timer = setInterval(() => {
this.getDevAlarm();
}, 1000 * 60);
},
},
beforeDestroy() {
clearInterval(this.timer);
}, },
}; };
</script> </script>
...@@ -658,9 +656,13 @@ export default { ...@@ -658,9 +656,13 @@ export default {
.main { .main {
padding: 0px 50px; padding: 0px 50px;
} }
.dev-total {
height: 120px;
}
.dev-total-item { .dev-total-item {
width: 240px; width: 240px;
height: 100%; height: 100%;
padding-right: 10px;
background: url("~@/assets/images/data/xk.png") no-repeat center; background: url("~@/assets/images/data/xk.png") no-repeat center;
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
...@@ -694,9 +696,6 @@ export default { ...@@ -694,9 +696,6 @@ export default {
position: absolute; position: absolute;
left: 0px; left: 0px;
top: -20px; top: -20px;
.dev-total {
height: 120px;
}
.warning-list { .warning-list {
height: 230px; height: 230px;
...@@ -781,7 +780,7 @@ export default { ...@@ -781,7 +780,7 @@ export default {
} }
} }
.real-time-list { .real-time-list {
height: 522px; height: 482px;
padding: 15px; padding: 15px;
background: url("~@/assets/images/data/kuang3.png") no-repeat center; background: url("~@/assets/images/data/kuang3.png") no-repeat center;
background-size: 100% 100%; background-size: 100% 100%;
......
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