|
|
|
@ -1,41 +1,78 @@ |
|
|
|
<template> |
|
|
|
<div class='statisticAnalysis'> |
|
|
|
<div class="statisticAnalysis"> |
|
|
|
<el-tabs class="saContent" v-model="activeName" @tab-click="changeTabs"> |
|
|
|
<el-tab-pane label="设备分析" name="first" class="deviceAnalysis"> |
|
|
|
<DeviceSummary class="deviceSummary" :dataList="equipments"></DeviceSummary> |
|
|
|
<DeviceSummary |
|
|
|
class="deviceSummary" |
|
|
|
:dataList="equipments" |
|
|
|
></DeviceSummary> |
|
|
|
<div class="bottomTabs"> |
|
|
|
<DeviceUptime :dataList="equipments" class="tabs-lo" /> |
|
|
|
<MonthlyEquipment class="tabs-mo" :dataList="equipments" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
</el-tab-pane> |
|
|
|
<el-tab-pane label="设备查询" name="second"> |
|
|
|
<div class="topdiv"> |
|
|
|
<div class="left-div"> |
|
|
|
<el-button size="mini" icon="el-icon-refresh-left" class="btnSearch" @click="onRefreshData">刷新</el-button> |
|
|
|
<el-button size="mini" icon="el-icon-download" class="btnSearch" |
|
|
|
@click="SystemStatusExport">导出Excel</el-button> |
|
|
|
<el-button |
|
|
|
size="mini" |
|
|
|
icon="el-icon-refresh-left" |
|
|
|
class="btnSearch" |
|
|
|
@click="onRefreshData" |
|
|
|
>刷新</el-button |
|
|
|
> |
|
|
|
<el-button |
|
|
|
size="mini" |
|
|
|
icon="el-icon-download" |
|
|
|
class="btnSearch" |
|
|
|
@click="SystemStatusExport" |
|
|
|
>导出Excel</el-button |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div class="right-div"> |
|
|
|
<InputSearch :formList="searchFormList" @handleSearch="handleSearch" /> |
|
|
|
<InputSearch |
|
|
|
:formList="searchFormList" |
|
|
|
@handleSearch="handleSearch" |
|
|
|
/> |
|
|
|
<!-- :placeholder="searchText" --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="queryChart"> |
|
|
|
<!-- v-if="isEmpty01" --> |
|
|
|
<Empty v-if="isEmpty01" class="floatEmpty" :text="emptyText01"></Empty> |
|
|
|
<div ref="queryChart" class="keep-ratio"> |
|
|
|
</div> |
|
|
|
<Empty |
|
|
|
v-if="isEmpty01" |
|
|
|
class="floatEmpty" |
|
|
|
:text="emptyText01" |
|
|
|
></Empty> |
|
|
|
<div ref="queryChart" class="keep-ratio"></div> |
|
|
|
</div> |
|
|
|
<div style="position: relative;"> |
|
|
|
<Empty v-if="isEmpty02" class="floatEmpty" :text="emptyText02"></Empty> |
|
|
|
<el-table :border="false" :data="tableData" height="480" header-align="left" empty-text=" "> |
|
|
|
<div style="position: relative"> |
|
|
|
<Empty |
|
|
|
v-if="isEmpty02" |
|
|
|
class="floatEmpty" |
|
|
|
:text="emptyText02" |
|
|
|
></Empty> |
|
|
|
<el-table |
|
|
|
:border="false" |
|
|
|
:data="tableData" |
|
|
|
height="480" |
|
|
|
header-align="left" |
|
|
|
empty-text=" " |
|
|
|
> |
|
|
|
<el-table-column prop="order" label="序号" width="80"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="deviceName" label="设备名称"></el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="deviceName" |
|
|
|
label="设备名称" |
|
|
|
></el-table-column> |
|
|
|
<el-table-column prop="deviceNo" label="设备桩号" width=""> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="direction" label="方向" class-name="showClass" width=""> |
|
|
|
<el-table-column |
|
|
|
prop="direction" |
|
|
|
label="方向" |
|
|
|
class-name="showClass" |
|
|
|
width="" |
|
|
|
> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="deviceIp" label="设备IP" width=""> |
|
|
|
</el-table-column> |
|
|
|
@ -69,13 +106,21 @@ |
|
|
|
<el-table-column prop="deviceStatus" label="设备状态" width=""> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div v-if="scope.row.deviceStatus == 1">在线</div> |
|
|
|
<div v-if="scope.row.deviceStatus == 0" style="color: #BBB;">离线</div> |
|
|
|
<div v-if="scope.row.deviceStatus == 0" style="color: #bbb"> |
|
|
|
离线 |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<div class="foot"> |
|
|
|
<Pagination @current-change="changePage" width="'100%'" :page-size="pageSize" :current-page.sync="pageIndex" |
|
|
|
layout="total, sizes, prev, pager, next" :total="pageTotal"> |
|
|
|
<Pagination |
|
|
|
@current-change="changePage" |
|
|
|
width="'100%'" |
|
|
|
:page-size="pageSize" |
|
|
|
:current-page.sync="pageIndex" |
|
|
|
layout="total, sizes, prev, pager, next" |
|
|
|
:total="pageTotal" |
|
|
|
> |
|
|
|
</Pagination> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -83,30 +128,34 @@ |
|
|
|
</el-tabs> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
<script> |
|
|
|
import * as echarts from "echarts"; |
|
|
|
import chartsStatistics from "./assets/charts"; |
|
|
|
import DeviceUptime from './components/deviceUptime'; |
|
|
|
import MonthlyEquipment from './components/monthlyEquipment'; |
|
|
|
import DeviceSummary from './components/deviceSummary'; |
|
|
|
import { getSystemStatusList, getSystemStatusTabList, getSystemStatusType, getSystemStatusExport } from "../../../../../api/MonthlyEquipment"; |
|
|
|
import { download } from '../../../../../utils/request.js'; |
|
|
|
import Pagination from '@screen/components/Pagination.vue'; |
|
|
|
import InputSearch from '@screen/components/InputSearch/index.vue'; |
|
|
|
import DeviceUptime from "./components/deviceUptime"; |
|
|
|
import MonthlyEquipment from "./components/monthlyEquipment"; |
|
|
|
import DeviceSummary from "./components/deviceSummary"; |
|
|
|
import { |
|
|
|
getSystemStatusList, |
|
|
|
getSystemStatusTabList, |
|
|
|
getSystemStatusType, |
|
|
|
getSystemStatusExport, |
|
|
|
} from "../../../../../api/MonthlyEquipment"; |
|
|
|
import { download } from "../../../../../utils/request.js"; |
|
|
|
import Pagination from "@screen/components/Pagination.vue"; |
|
|
|
import InputSearch from "@screen/components/InputSearch/index.vue"; |
|
|
|
import { searchFormList } from "./data"; |
|
|
|
import { Loading } from 'element-ui'; |
|
|
|
import { Loading } from "element-ui"; |
|
|
|
import { first } from "lodash"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'publicService', |
|
|
|
name: "publicService", |
|
|
|
components: { |
|
|
|
DeviceUptime, |
|
|
|
MonthlyEquipment, |
|
|
|
Pagination, |
|
|
|
InputSearch, |
|
|
|
DeviceSummary |
|
|
|
DeviceSummary, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
@ -143,32 +192,35 @@ export default { |
|
|
|
equipments: [], |
|
|
|
activeName: "first", |
|
|
|
tableData: [], |
|
|
|
interval: null |
|
|
|
} |
|
|
|
interval: null, |
|
|
|
}; |
|
|
|
}, |
|
|
|
destroyed() { |
|
|
|
clearInterval(this.interval); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
initData() { |
|
|
|
|
|
|
|
this.startTime = moment().startOf("month").format("YYYY-MM-DD HH:mm:ss"); |
|
|
|
this.time = moment().format("YYYY-MM-DD HH:mm:ss"); |
|
|
|
this.typeQuery = searchFormList[1].options.options[0].value; |
|
|
|
console.log(8888, this.startTime, this.time, this.typeQuery); |
|
|
|
clearInterval(this.interval); |
|
|
|
if (this.activeName == "first") { |
|
|
|
this.initDevice(); |
|
|
|
} else if (this.activeName == 'second') { |
|
|
|
} else if (this.activeName == "second") { |
|
|
|
this.queryChart = echarts.init(this.$refs["queryChart"]); |
|
|
|
this.queryChart.setOption(chartsStatistics); |
|
|
|
this.initQueryChart(); |
|
|
|
this.initQueryTable(1); |
|
|
|
} |
|
|
|
|
|
|
|
this.interval = setInterval(() => { |
|
|
|
if (this.activeName == "first") { |
|
|
|
this.initDevice(); |
|
|
|
} |
|
|
|
}, 30000) |
|
|
|
|
|
|
|
}, 30000); |
|
|
|
}, |
|
|
|
changePage(page) { |
|
|
|
|
|
|
|
this.initQueryTable(page); |
|
|
|
}, |
|
|
|
formatDate(val) { |
|
|
|
@ -185,19 +237,23 @@ export default { |
|
|
|
if (!this.typeQuery || !this.startTime) { |
|
|
|
this.$message({ |
|
|
|
message: "请先设置查询条件！", |
|
|
|
type: "warning" |
|
|
|
}) |
|
|
|
return |
|
|
|
type: "warning", |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
this.initQueryChart(); |
|
|
|
this.initQueryTable(1); |
|
|
|
}, |
|
|
|
handleSearch(data) { |
|
|
|
console.log(777, data); |
|
|
|
this.typeQuery = data.type; |
|
|
|
this.startTime = this.formatDate(data.time[0]); |
|
|
|
this.time = this.formatDate(data.time[1]); |
|
|
|
let typeText = this.searchFormList[1].options.options[this.typeQuery - 1].label; |
|
|
|
this.searchText = `${moment(this.startTime).format("YYYY年MM月DD日")}-${moment(this.time).format("YYYY年MM月DD日")},${typeText}`; |
|
|
|
let typeText = |
|
|
|
this.searchFormList[1].options.options[this.typeQuery - 1].label; |
|
|
|
this.searchText = `${moment(this.startTime).format( |
|
|
|
"YYYY年MM月DD日" |
|
|
|
)}-${moment(this.time).format("YYYY年MM月DD日")},${typeText}`; |
|
|
|
this.initQueryChart(); |
|
|
|
this.initQueryTable(1); |
|
|
|
}, |
|
|
|
@ -210,45 +266,49 @@ export default { |
|
|
|
}, |
|
|
|
//导出 |
|
|
|
SystemStatusExport() { |
|
|
|
let loadingInstance = Loading.service({ fullscreen: true, background: "#00000052", text: "文件正在下载..." }); |
|
|
|
let loadingInstance = Loading.service({ |
|
|
|
fullscreen: true, |
|
|
|
background: "#00000052", |
|
|
|
text: "文件正在下载...", |
|
|
|
}); |
|
|
|
getSystemStatusExport({ |
|
|
|
startTime: this.startTime, |
|
|
|
time: this.time, |
|
|
|
type: this.typeQuery, |
|
|
|
}).then((res) => { |
|
|
|
console.log(res); |
|
|
|
const url = window.URL.createObjectURL(new Blob([res])) |
|
|
|
let link = document.createElement('a') |
|
|
|
link.style.display = 'none' |
|
|
|
link.href = url |
|
|
|
link.setAttribute('download', '设备统计信息.xlsx') |
|
|
|
document.body.appendChild(link) |
|
|
|
link.click() |
|
|
|
URL.revokeObjectURL(link.href) // 释放URL 对象 |
|
|
|
document.body.removeChild(link) |
|
|
|
link = null |
|
|
|
loadingInstance.close(); |
|
|
|
}).catch(err => { |
|
|
|
Message.error(err); |
|
|
|
loadingInstance.close(); |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
console.log(res); |
|
|
|
const url = window.URL.createObjectURL(new Blob([res])); |
|
|
|
let link = document.createElement("a"); |
|
|
|
link.style.display = "none"; |
|
|
|
link.href = url; |
|
|
|
link.setAttribute("download", "设备统计信息.xlsx"); |
|
|
|
document.body.appendChild(link); |
|
|
|
link.click(); |
|
|
|
URL.revokeObjectURL(link.href); // 释放URL 对象 |
|
|
|
document.body.removeChild(link); |
|
|
|
link = null; |
|
|
|
loadingInstance.close(); |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
Message.error(err); |
|
|
|
loadingInstance.close(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
initDevice() { //设备在线离线率接口 |
|
|
|
initDevice() { |
|
|
|
//设备在线离线率接口 |
|
|
|
|
|
|
|
getSystemStatusType().then((res) => { |
|
|
|
|
|
|
|
if (IS_TESTING && (!res.data || res.msg == "暂无数据")) { |
|
|
|
|
|
|
|
this.equipments = []; |
|
|
|
this.equipSeries.forEach(item => { |
|
|
|
this.equipSeries.forEach((item) => { |
|
|
|
this.equipments.push({ |
|
|
|
title: item, |
|
|
|
total: Math.floor(Math.random() * 600) + 800, |
|
|
|
pctOnl: Math.floor(100 * Math.random()) + "%", |
|
|
|
pctOffl: "25%", |
|
|
|
pctLose: "15%" |
|
|
|
pctLose: "15%", |
|
|
|
}); |
|
|
|
|
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
@ -260,8 +320,8 @@ export default { |
|
|
|
total: val.sum, |
|
|
|
pctOnl: val.sucessRate, |
|
|
|
pctLose: val.failRate, |
|
|
|
pctOffl: val.lostRate |
|
|
|
} |
|
|
|
pctOffl: val.lostRate, |
|
|
|
}; |
|
|
|
if (key.includes("全部设备")) { |
|
|
|
allList.unshift(item); |
|
|
|
} else { |
|
|
|
@ -269,23 +329,21 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
this.equipments = allList; |
|
|
|
}) |
|
|
|
|
|
|
|
}); |
|
|
|
}, |
|
|
|
setStatus(id, status) { |
|
|
|
if (status == "doing") { |
|
|
|
this["isEmpty" + id] = true |
|
|
|
this["emptyText" + id] = "数据查询中..." |
|
|
|
this["isEmpty" + id] = true; |
|
|
|
this["emptyText" + id] = "数据查询中..."; |
|
|
|
} else if (status == "empty") { |
|
|
|
this["isEmpty" + id] = true |
|
|
|
this["emptyText" + id] = "暂无数据..." |
|
|
|
this["isEmpty" + id] = true; |
|
|
|
this["emptyText" + id] = "暂无数据..."; |
|
|
|
} else if (status == "finish") { |
|
|
|
this["isEmpty" + id] = false |
|
|
|
this["emptyText" + id] = "" |
|
|
|
this["isEmpty" + id] = false; |
|
|
|
this["emptyText" + id] = ""; |
|
|
|
} |
|
|
|
}, |
|
|
|
initQueryChart() { |
|
|
|
|
|
|
|
this.setStatus("01", "doing"); |
|
|
|
|
|
|
|
getSystemStatusList({ |
|
|
|
@ -294,15 +352,13 @@ export default { |
|
|
|
type: this.typeQuery, |
|
|
|
}).then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
|
|
|
|
if (res.data && Object.keys(res.data).length > 0) { |
|
|
|
|
|
|
|
this.setStatus("01", "finish"); |
|
|
|
|
|
|
|
let origin = res.data; |
|
|
|
|
|
|
|
let startStamp = +moment(this.startTime).startOf('day').format("x"); |
|
|
|
let endStamp = +moment(this.time).endOf('day').format("x"); |
|
|
|
let startStamp = +moment(this.startTime).startOf("day").format("x"); |
|
|
|
let endStamp = +moment(this.time).endOf("day").format("x"); |
|
|
|
let oneDay = 86400000; |
|
|
|
let daysTotal = Math.ceil((endStamp - startStamp) / oneDay); |
|
|
|
let queryChartData = []; |
|
|
|
@ -325,16 +381,11 @@ export default { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.queryChart.setOption(chartsStatistics); |
|
|
|
}); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
this.setStatus("01", "empty"); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
}) |
|
|
|
}); |
|
|
|
}, |
|
|
|
//查询列表 |
|
|
|
initQueryTable(pageIndex, pageSize = 30) { |
|
|
|
@ -354,24 +405,22 @@ export default { |
|
|
|
this.pageTotal = res.total; |
|
|
|
this.tableData = res.rows; |
|
|
|
this.tableData.forEach((it, index) => { |
|
|
|
it.order = (pageIndex - 1) * (pageSize) + index + 1; |
|
|
|
}) |
|
|
|
it.order = (pageIndex - 1) * pageSize + index + 1; |
|
|
|
}); |
|
|
|
} else { |
|
|
|
this.setStatus("02", "empty"); |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
|
|
|
|
this.initData(); |
|
|
|
|
|
|
|
}, |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.floatEmpty { |
|
|
|
position: absolute; |
|
|
|
z-index: 100; |
|
|
|
@ -407,7 +456,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.btnSearch { |
|
|
|
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|
|
|
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
|
|
|
margin-left: 10px; |
|
|
|
border-color: transparent; |
|
|
|
color: #fff; |
|
|
|
@ -419,7 +468,7 @@ export default { |
|
|
|
|
|
|
|
::v-deep .el-table .el-table__header-wrapper th { |
|
|
|
background-color: #064258 !important; |
|
|
|
color: #00D1FF; |
|
|
|
color: #00d1ff; |
|
|
|
border-color: #064258 !important; |
|
|
|
border: 0px !important; |
|
|
|
font-size: 14px; |
|
|
|
@ -444,17 +493,17 @@ export default { |
|
|
|
font-size: 14px; |
|
|
|
font-family: PingFang SC, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #FFFFFF; |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-table tr:hover td { |
|
|
|
background: #1b2528 !important; |
|
|
|
color: #00D1FF; |
|
|
|
color: #00d1ff; |
|
|
|
height: 47px; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-table tr:nth-child(odd) td { |
|
|
|
background-color: #13272F; |
|
|
|
background-color: #13272f; |
|
|
|
border: 0px !important; |
|
|
|
} |
|
|
|
|
|
|
|
@ -475,7 +524,7 @@ export default { |
|
|
|
font-size: 16px; |
|
|
|
font-family: PingFang SC, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #FFFFFF; |
|
|
|
color: #ffffff; |
|
|
|
min-width: 128px; |
|
|
|
position: relative; |
|
|
|
left: 10px; |
|
|
|
@ -494,7 +543,8 @@ export default { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
|
|
|
|
.deviceAnalysis {} |
|
|
|
.deviceAnalysis { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.topdiv { |
|
|
|
@ -519,7 +569,6 @@ export default { |
|
|
|
margin: auto; |
|
|
|
margin-top: 15px; |
|
|
|
height: 160px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.queryChart { |
|
|
|
@ -533,7 +582,7 @@ export default { |
|
|
|
margin-bottom: 30px; |
|
|
|
--keep-ratio: scaleX(1); |
|
|
|
|
|
|
|
>div { |
|
|
|
> div { |
|
|
|
display: inline-flex; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
@ -548,7 +597,7 @@ export default { |
|
|
|
pointer-events: none; |
|
|
|
margin-top: 19px; |
|
|
|
|
|
|
|
>div { |
|
|
|
> div { |
|
|
|
pointer-events: auto; |
|
|
|
} |
|
|
|
|
|
|
|
@ -556,7 +605,6 @@ export default { |
|
|
|
width: calc(25%); |
|
|
|
|
|
|
|
margin-right: 20px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.content-mi { |
|
|
|
@ -565,7 +613,6 @@ export default { |
|
|
|
margin-right: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.content-m { |
|
|
|
display: inline-flex; |
|
|
|
flex-direction: column; |
|
|
|
@ -583,7 +630,5 @@ export default { |
|
|
|
width: 49.4%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
|
|
|
|
zhangzhang
1 year ago