xymp
/
frontend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

在线装置数量统计，excle

Browse Source
hn2.0
fanluyan 2 years ago
parent 3b50cf87c0
commit 6fd01caea5
3 changed files with 54 additions and 579 deletions
Show Stats Download Patch File Download Diff File

18
src/utils/api/index.js
Unescape Escape View File

@ -774,3 +774,21 @@ export function getTerminalListExcel() {
responseType: "blob", responseType: "blob",
}); });
} }
//首页查看数据
export function getOnlineTerminalList(data) {
return request({
url: "/api/getOnlineTerminalList",
method: "get",
params: data,
});
}
//导出数据
export function getOnlineTerminalListExcel() {
return request({
url: "/api/getOnlineTerminalListExcel",
method: "post",
responseType: "blob",
});
}

502
src/views/stritl/index copy.vue
Unescape Escape View File

@ -1,502 +0,0 @@
<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>

113
src/views/stritl/index.vue
Unescape Escape View File

@ -3,10 +3,7 @@
<div class="echart-top"> <div class="echart-top">
<el-card class="box-card" v-loading="numloading"> <el-card class="box-card" v-loading="numloading">
<h3>装置数量统计</h3> <h3>装置数量统计</h3>
<el-button <el-button class="lookBtn" type="primary" @click="handleLook"
class="lookBtn"
type="primary"
@click="dialogTableVisible = true"
>查看</el-button >查看</el-button
> >
<div class="bottomM"> <div class="bottomM">
@ -84,28 +81,31 @@
<el-dialog <el-dialog
class="exportDialog" class="exportDialog"
title="装置列表" title="装置列表"
width="1020px" width="70%"
:visible.sync="dialogTableVisible" :visible.sync="dialogTableVisible"
> >
<div class="exportList"> <div class="exportList" v-loading="exportLoading">
<el-button class="exportbtn" type="primary">导出</el-button> <el-button class="exportbtn" type="primary" @click="handleExport()"
>导出</el-button
>
<el-table <el-table
:data="gridData" :data="onLineData"
stripe stripe
tooltip-effect="dark" tooltip-effect="dark"
height="calc(100% - 54px)" height="calc(100% - 54px)"
> >
<el-table-column prop="lineName" label="线路名称"></el-table-column>
<el-table-column prop="towerName" label="杆塔名称"></el-table-column>
<el-table-column prop="cmdId" label="装置ID"></el-table-column>
<el-table-column <el-table-column
property="date" prop="hearttime"
label="日期" label="最新心跳时间"
width="150"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
property="name" prop="pictime"
label="姓名" label="最新图片拍照时间"
width="200"
></el-table-column> ></el-table-column>
<el-table-column property="address" label="地址"></el-table-column> <el-table-column prop="isonline" label="是否在线"></el-table-column>
</el-table> </el-table>
</div> </div>
</el-dialog> </el-dialog>
@ -116,6 +116,8 @@ import {
getTermStatistics, getTermStatistics,
getWeekAlarmStatistics, getWeekAlarmStatistics,
getTodayAlarmStatistics, getTodayAlarmStatistics,
getOnlineTerminalList,
getOnlineTerminalListExcel,
} from "@/utils/api/index"; } from "@/utils/api/index";
export default { export default {
name: "", name: "",
@ -140,68 +142,8 @@ export default {
pie2loading: false, pie2loading: false,
zoom: 1, zoom: 1,
dialogTableVisible: false, dialogTableVisible: false,
gridData: [ onLineData: [],
{ exportLoading: false,
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
],
}; };
}, },
created() { created() {
@ -230,6 +172,23 @@ export default {
}, },
}, },
methods: { methods: {
//查看在线列表
handleLook() {
this.dialogTableVisible = true;
this.exportLoading = true;
getOnlineTerminalList()
.then((res) => {
console.log(res);
this.onLineData = res.data;
this.exportLoading = false;
console.log(this.onLineData);
})
.catch((err) => {});
},
//导出
handleExport() {
window.location.href = "/api/api/getOnlineTerminalListExcel";
},
// 隐患数量统计 // 隐患数量统计
changedate() { changedate() {
console.log(this.dateValue.getTime()); console.log(this.dateValue.getTime());

Write Preview
Loading…
Cancel
Save