|
|
<template>
|
|
|
<div class="stritlBox">
|
|
|
<div class="stritl_left">
|
|
|
<div class="strLeftTop">
|
|
|
<h3>{{ numberUnits.name }}</h3>
|
|
|
<bar
|
|
|
v-if="flag.baizhang"
|
|
|
:legendData="unitXData"
|
|
|
:seriesData="unitYData"
|
|
|
:boxStyle="numberUnits.boxStyle"
|
|
|
></bar>
|
|
|
</div>
|
|
|
<div class="strLeftMid">
|
|
|
<h3>{{ hazardClass.name }}</h3>
|
|
|
<pie
|
|
|
v-if="flag.baizhang"
|
|
|
:pieData="hazardPieData"
|
|
|
:boxStyle="hazardClass.boxStyle"
|
|
|
></pie>
|
|
|
</div>
|
|
|
<div class="strLeftBottom">
|
|
|
<h3>{{ monitLine.name }}</h3>
|
|
|
<bar
|
|
|
v-if="flag.baizhang"
|
|
|
:legendData="lineXData"
|
|
|
:seriesData="lineYData"
|
|
|
:boxStyle="monitLine.boxStyle"
|
|
|
></bar>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="stritl_center">
|
|
|
<div class="strCenterTop">
|
|
|
<mapChart></mapChart>
|
|
|
</div>
|
|
|
<div class="strCenterbottom">
|
|
|
<div class="bottomL">
|
|
|
<h3>{{ hazardType.name }}</h3>
|
|
|
<horizontalBar
|
|
|
:legendData="hazardTypeXData"
|
|
|
:seriesData="hazardTypeYData"
|
|
|
:boxStyle="hazardType.boxStyle"
|
|
|
></horizontalBar>
|
|
|
</div>
|
|
|
<div class="bottomM">
|
|
|
<h3>{{ deviceInfo.name }}</h3>
|
|
|
<div class="infoBox">
|
|
|
<p>
|
|
|
<span>在运数</span>
|
|
|
<span>{{ infoData.deviceCount }}</span>
|
|
|
</p>
|
|
|
<p>
|
|
|
<span>在线数</span>
|
|
|
<span>{{ infoData.hasPhotoCount }}</span>
|
|
|
</p>
|
|
|
<p>
|
|
|
<span>杆塔覆盖率</span>
|
|
|
<span>{{ infoData.deviceCoverage }}%</span>
|
|
|
</p>
|
|
|
<p>
|
|
|
<span>在线率</span>
|
|
|
<span>{{ infoData.hasPhotoRate }}%</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bottomR">
|
|
|
<h3>{{ deviceOnline.name }}</h3>
|
|
|
<pie
|
|
|
:pieData="deviceOnline.onlineData"
|
|
|
:boxStyle="deviceOnline.boxStyle"
|
|
|
></pie>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="stritl_right">
|
|
|
<div class="strRightTop">
|
|
|
<h3>线路分布(总计：5)</h3>
|
|
|
<div class="tableBox">
|
|
|
<el-table :data="lineAllData" style="width: 100%">
|
|
|
<el-table-column
|
|
|
prop="voltageLevelStr"
|
|
|
label="电压等级"
|
|
|
align="center"
|
|
|
>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="lineCount" label="线路数" align="center">
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="towerCount" label="安装数" align="center">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
prop="deviceCoverage"
|
|
|
label="安装覆盖率"
|
|
|
align="center"
|
|
|
>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <div class="strRightMid">5</div> -->
|
|
|
<div class="strRightBottom">
|
|
|
<h3>{{ patrolOpinions.name }}</h3>
|
|
|
<div class="suggest">
|
|
|
<p class="attention"><span>注意：</span>{{ patrolOpinions.month }}</p>
|
|
|
<p class="info">
|
|
|
<span>{{ patrolOpinions.info1 }}</span>
|
|
|
<span>{{ patrolOpinions.info2 }}</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
<h4>往年同期隐患比例分布图</h4>
|
|
|
<radar
|
|
|
:radarName="radarName"
|
|
|
:radarValue="radarValue"
|
|
|
:boxStyle="patrolOpinions.boxStyle"
|
|
|
:radarTitle="radarTitle"
|
|
|
></radar>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import bar from "./chartFiles/bar";
|
|
|
import horizontalBar from "./chartFiles/horizontalBar";
|
|
|
import pie from "./chartFiles/pie";
|
|
|
import radar from "./chartFiles/radar";
|
|
|
import mapChart from "./chartFiles/mapChart";
|
|
|
import {
|
|
|
getLineDataByVoltage,
|
|
|
getCapturePointDataByDanger,
|
|
|
getHostDeviceDataByVoltage,
|
|
|
getPhotoAlarmDataByAlarmType,
|
|
|
getCompanyDeviceInfo,
|
|
|
getByName,
|
|
|
getLastYearAlarmReasons,
|
|
|
} from "@/utils/api/index";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
name: localStorage.getItem("ms_username"),
|
|
|
flag: {
|
|
|
baizhang: false, //是否开始渲染子组件
|
|
|
},
|
|
|
//装置数量统计
|
|
|
unitAllData: [],
|
|
|
unitXData: [],
|
|
|
unitYData: [],
|
|
|
numberUnits: {
|
|
|
name: "装置数量统计",
|
|
|
boxStyle: {
|
|
|
width: "100%",
|
|
|
height: "200px",
|
|
|
},
|
|
|
},
|
|
|
//监控路线统计
|
|
|
lineAllData: [],
|
|
|
lineXData: [],
|
|
|
lineYData: [],
|
|
|
monitLine: {
|
|
|
name: "监控路线统计",
|
|
|
boxStyle: {
|
|
|
width: "100%",
|
|
|
height: "200px",
|
|
|
},
|
|
|
},
|
|
|
//隐患分类统计
|
|
|
hazardData: [],
|
|
|
hazardPieData: [],
|
|
|
hazardClass: {
|
|
|
name: "隐患分类统计",
|
|
|
boxStyle: {
|
|
|
width: "100%",
|
|
|
height: "200px",
|
|
|
},
|
|
|
},
|
|
|
//隐患类型统计
|
|
|
hazardTypeData: [],
|
|
|
hazardTypeXData: [],
|
|
|
hazardTypeYData: [],
|
|
|
hazardType: {
|
|
|
name: "隐患类型统计",
|
|
|
boxStyle: {
|
|
|
width: "100%",
|
|
|
height: "160px",
|
|
|
},
|
|
|
},
|
|
|
//装置信息统计
|
|
|
infoData: [],
|
|
|
deviceInfo: {
|
|
|
name: "装置信息统计",
|
|
|
infoData: [
|
|
|
{ value: 24, name: "在运数" },
|
|
|
{ value: 10, name: "在线数" },
|
|
|
{ value: "92.31%", name: "杆塔覆盖率" },
|
|
|
{ value: "41.67%", name: "在线率" },
|
|
|
],
|
|
|
},
|
|
|
deviceOnline: {
|
|
|
name: "装置在线统计",
|
|
|
onlineData: [
|
|
|
{ value: 55, name: "离线" },
|
|
|
{ value: 45, name: "在线" },
|
|
|
],
|
|
|
boxStyle: {
|
|
|
width: "100%",
|
|
|
height: "160px",
|
|
|
},
|
|
|
},
|
|
|
//隐患比例分布图
|
|
|
patrolData: [],
|
|
|
radarName: [],
|
|
|
radarValue: [],
|
|
|
radarTitle: "隐患比例分布图",
|
|
|
patrolOpinions: {
|
|
|
name: "巡查意见",
|
|
|
month: "三月份",
|
|
|
info1: "1.鸟类活动开展频繁，需注意鸟类筑巢，大型鸟类驻留。",
|
|
|
info2:
|
|
|
"2.大风天气较多的季节，要注意对放风筝行为的监控，同时加强巡视对导线悬挂异物的观察。",
|
|
|
boxStyle: {
|
|
|
width: "100%",
|
|
|
height: "160px",
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
components: {
|
|
|
bar,
|
|
|
horizontalBar,
|
|
|
pie,
|
|
|
radar,
|
|
|
mapChart,
|
|
|
},
|
|
|
computed: {
|
|
|
role() {
|
|
|
return this.name === "admin" ? "超级管理员" : "普通用户";
|
|
|
},
|
|
|
},
|
|
|
methods: {},
|
|
|
created() {
|
|
|
//装置数量统计
|
|
|
getHostDeviceDataByVoltage({
|
|
|
companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
|
|
}).then((res) => {
|
|
|
this.unitAllData = res.data.data;
|
|
|
for (var i = 0; i < this.unitAllData.length; i++) {
|
|
|
this.unitXData.push(this.unitAllData[i].name);
|
|
|
this.unitYData.push(this.unitAllData[i].value);
|
|
|
}
|
|
|
this.flag.baizhang = true;
|
|
|
});
|
|
|
|
|
|
//装置信息统计
|
|
|
getCompanyDeviceInfo({
|
|
|
companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
|
|
}).then((res) => {
|
|
|
this.infoData = res.data;
|
|
|
});
|
|
|
//线路分布
|
|
|
getLineDataByVoltage({
|
|
|
companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
|
|
}).then((res) => {
|
|
|
this.lineAllData = res.data;
|
|
|
console.log(this.lineAllData);
|
|
|
for (var i = 0; i < this.lineAllData.length; i++) {
|
|
|
this.lineXData.push(this.lineAllData[i].voltageLevelStr);
|
|
|
this.lineYData.push(this.lineAllData[i].lineCount);
|
|
|
}
|
|
|
this.flag.baizhang = true;
|
|
|
});
|
|
|
//隐患分类统计
|
|
|
getCapturePointDataByDanger({
|
|
|
companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
|
|
}).then((res) => {
|
|
|
this.hazardData = res.data;
|
|
|
|
|
|
// let name1 = this.hazardData.nameList;
|
|
|
// let value1 = this.hazardData.valueList;
|
|
|
this.hazardPieData = res.data.list;
|
|
|
console.log(this.hazardPieData);
|
|
|
|
|
|
this.flag.baizhang = true;
|
|
|
});
|
|
|
|
|
|
//隐患类型统计
|
|
|
getPhotoAlarmDataByAlarmType({
|
|
|
companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
|
|
}).then((res) => {
|
|
|
this.hazardTypeData = res.data.dataList;
|
|
|
|
|
|
for (var i = 0; i < this.hazardTypeData.length; i++) {
|
|
|
this.hazardTypeXData.push(this.hazardTypeData[i].name);
|
|
|
this.hazardTypeYData.push(this.hazardTypeData[i].acount);
|
|
|
}
|
|
|
this.flag.baizhang = true;
|
|
|
});
|
|
|
|
|
|
//巡视意见
|
|
|
getByName({
|
|
|
name: "三月",
|
|
|
}).then((res) => {
|
|
|
console.log(res);
|
|
|
});
|
|
|
//雷达图数据
|
|
|
getLastYearAlarmReasons({
|
|
|
companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
|
|
month: "04",
|
|
|
}).then((res) => {
|
|
|
console.log(res);
|
|
|
this.patrolData = res.data;
|
|
|
console.log(this.patrolData);
|
|
|
let obj = {};
|
|
|
this.patrolData.forEach((item) => {
|
|
|
if (obj.hasOwnProperty(item.alarmInfo)) {
|
|
|
obj[item.alarmInfo] += item.num;
|
|
|
} else {
|
|
|
obj[item.alarmInfo] = item.num;
|
|
|
}
|
|
|
});
|
|
|
console.log(obj);
|
|
|
this.radarValue = Object.values(obj);
|
|
|
console.log(this.radarValue);
|
|
|
let max = Math.max(...this.radarValue);
|
|
|
//对象转化成数组对象
|
|
|
console.log(max);
|
|
|
for (let i in obj) {
|
|
|
console.log(i);
|
|
|
this.radarName.push({
|
|
|
name: i,
|
|
|
max: max,
|
|
|
});
|
|
|
}
|
|
|
console.log(this.radarName);
|
|
|
});
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
.stritlBox {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
.stritl_left,
|
|
|
.stritl_right {
|
|
|
width: 20%;
|
|
|
margin: 8px;
|
|
|
}
|
|
|
.stritl_left,
|
|
|
.stritl_right {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
.strLeftTop,
|
|
|
.strLeftMid,
|
|
|
.strLeftBottom {
|
|
|
height: 30%;
|
|
|
box-sizing: content-box;
|
|
|
box-shadow: @box-shadow-basic;
|
|
|
border: 1px solid @border-color-base;
|
|
|
background-color: @color-white;
|
|
|
border-radius: 4px;
|
|
|
padding: 8px;
|
|
|
h3 {
|
|
|
margin-bottom: 8px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
.strRightTop,
|
|
|
.strRightBottom {
|
|
|
height: 46%;
|
|
|
box-sizing: content-box;
|
|
|
box-shadow: @box-shadow-basic;
|
|
|
border: 1px solid @border-color-base;
|
|
|
background-color: @color-white;
|
|
|
border-radius: 4px;
|
|
|
padding: 8px;
|
|
|
h3 {
|
|
|
margin-bottom: 8px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
.strRightTop {
|
|
|
position: relative;
|
|
|
.tableBox {
|
|
|
position: absolute;
|
|
|
width: calc(100% - 16px);
|
|
|
.el-table .cell {
|
|
|
white-space: normal;
|
|
|
word-break: break-all;
|
|
|
}
|
|
|
.el-table th.el-table__cell > .cell {
|
|
|
min-width: 58px;
|
|
|
padding-left: 0px;
|
|
|
padding-right: 0px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.strRightBottom {
|
|
|
h3 {
|
|
|
margin-bottom: 8px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.suggest {
|
|
|
.attention {
|
|
|
font-size: 14px;
|
|
|
margin-bottom: 8px;
|
|
|
span {
|
|
|
font-size: 14px;
|
|
|
color: @color-red;
|
|
|
}
|
|
|
}
|
|
|
.info {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
font-size: 14px;
|
|
|
line-height: 22px;
|
|
|
}
|
|
|
}
|
|
|
h4 {
|
|
|
margin-top: 8px;
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.stritl_center {
|
|
|
flex: 1;
|
|
|
margin: 10px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.strCenterTop {
|
|
|
flex: 1;
|
|
|
box-sizing: content-box;
|
|
|
box-shadow: @box-shadow-basic;
|
|
|
border: 1px solid @border-color-base;
|
|
|
background-color: @color-white;
|
|
|
border-radius: 4px;
|
|
|
//padding: 8px;
|
|
|
}
|
|
|
.strCenterbottom {
|
|
|
margin-top: 24px;
|
|
|
height: 210px;
|
|
|
//border: 1px solid #000;
|
|
|
box-sizing: content-box;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
.bottomL,
|
|
|
.bottomM,
|
|
|
.bottomR {
|
|
|
border: 1px solid #000;
|
|
|
box-sizing: content-box;
|
|
|
width: 30%;
|
|
|
box-shadow: @box-shadow-basic;
|
|
|
border: 1px solid @border-color-base;
|
|
|
background-color: @color-white;
|
|
|
border-radius: 4px;
|
|
|
padding: 8px;
|
|
|
h3 {
|
|
|
margin-bottom: 8px;
|
|
|
font-size: 15px;
|
|
|
}
|
|
|
}
|
|
|
.bottomM {
|
|
|
.infoBox {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-around;
|
|
|
p {
|
|
|
width: 40%;
|
|
|
height: 68px;
|
|
|
background: #fcc;
|
|
|
text-align: center;
|
|
|
margin: 6px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-around;
|
|
|
span {
|
|
|
color: #333;
|
|
|
font-size: 14px;
|
|
|
&:last-child {
|
|
|
font-size: 20px;
|
|
|
margin-top: 5px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
&:first-child {
|
|
|
background: url("../../assets/img/border-blue.png");
|
|
|
}
|
|
|
&:nth-child(2) {
|
|
|
background: url("../../assets/img/border-green.png");
|
|
|
}
|
|
|
&:nth-child(3) {
|
|
|
background: url("../../assets/img/border-yellow.png");
|
|
|
}
|
|
|
&:nth-child(4) {
|
|
|
background: url("../../assets/img/border-gray.png");
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|