Browse Source

提交设备统计分析界面

wangqin
yyl 10 months ago
parent
commit
3ff3ab3ace
  1. 51
      ruoyi-ui/src/api/MonthlyEquipment/index.js
  2. 2
      ruoyi-ui/src/utils/request.js
  3. BIN
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/shexiangtou.png
  4. 10
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/assets/charts.js
  5. 25
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/index.vue
  6. 50
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/index.vue
  7. 119
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js
  8. 229
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
  9. 3
      ruoyi-ui/vue.config.js

51
ruoyi-ui/src/api/MonthlyEquipment/index.js

@ -0,0 +1,51 @@
import request from '@/utils/request'
import { download } from '../../utils/request'
// 全景数据 - 运行环境接口
// 设备状态柱状图按时间和类型
export function getSystemStatusList(query) {
return request({
url: '/system/status/list',
method: 'get',
params: {
...query,
}
})
}
//设备状态列表按时间和类型
export function getSystemStatusTabList(query) {
//system/status/tablist
return request({
url: '/system/status/tablist',
method: 'get',
params: {
...query,
}
})
}
//设备状态列表按类型
export function getSystemStatusType() {
//system/status/tablist
return request({
url: '/system/status/type',
method: 'get',
params: {
// ...query,
}
})
}
//system/status/type
//设备状态列表按类型
export function getSystemStatusExport(query) {
//system/status/export
return download('/system/status/export',query,"file.xlsx");
// return request.post('/system/status/export',{
// ...query
// },{ headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
// responseType: 'blob'})
}

2
ruoyi-ui/src/utils/request.js

@ -19,7 +19,7 @@ const service = axios.create({
// axios中请求配置有baseURL选项,表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
// 超时
timeout: 10000
timeout: 30000
})
// request拦截器

BIN
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/shexiangtou.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 678 B

10
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/assets/charts.js

@ -82,7 +82,7 @@ let options = {
type: 'radar',
name: '安全作业',
data: [
[100, 100, 100, 100, 100, 100, 100, 100,100, 100, 100, 100, 100, 100, 100, 100],
[100, 100, 100, 100, 100, 100, 100, 100,100, 100, 100, 100, 100, 100, 100, 100,100, 100, 100],
],
symbol: 'none',
@ -102,7 +102,7 @@ let options = {
type: 'radar',
name: '安全作业',
data: [
[80, 80, 80, 80, 80, 80, 80, 80,80, 80, 80, 80, 80, 80, 80, 80]
[80, 80, 80, 80, 80, 80, 80, 80,80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80]
],
symbol: 'none',
@ -122,7 +122,7 @@ let options = {
type: 'radar',
name: '安全作业',
data: [
[60, 60, 60, 60, 60, 60, 60, 60,60, 60, 60, 60, 60, 60, 60, 60],
[60, 60, 60, 60, 60, 60, 60, 60,60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
],
symbol: 'none',
@ -142,7 +142,7 @@ let options = {
type: 'radar',
name: '安全作业',
data: [
[40, 40, 40, 40, 40, 40, 40, 40,40, 40, 40, 40, 40, 40, 40, 40],
[40, 40, 40, 40, 40, 40, 40, 40,40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40],
],
symbol: 'none',
lineStyle: {
@ -161,7 +161,7 @@ let options = {
type: 'radar',
name: '安全作业',
data: [
[20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
[20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
],
symbol: 'none',
lineStyle: {

25
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/index.vue

@ -16,12 +16,34 @@
components: {
WgtTitle
},
props:{
dataList:{
type:Array,
default:[],
}
},
data() {
return {
}
},
watch:{
dataList:(newD,oldD)=>{
let data = [];
let texts = [];
newD.forEach(element => {
data.push(parseInt(element.sucessRate,10));
texts.push({name:element.text, max: 100 });
});
chartsStatistics.radar.indicator = texts;
chartsStatistics.series[0].data = [data];
//console.log("=====aaa=========",this)
var myChart = echarts.init(document.getElementById('deviceUptime'));
myChart.setOption(chartsStatistics);
}
},
created() {
},
@ -33,6 +55,7 @@
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('deviceUptime'));
myChart.setOption(chartsStatistics);
this.myChart = myChart;
});
});
},

50
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/index.vue

@ -3,9 +3,9 @@
<WgtTitle :title="'月设备变化曲线'"></WgtTitle>
<div class="board">
<div class="round-div" v-for="(item) in dataList" :style="{background:'linear-gradient(80deg, '+item.color+'66 0%, '+item.color+'00 100%)',width:'calc('+ item.num / 100 +' * 400px)',top:item.top+'px',left:item.left+'px'}" >
<div class="round-div" v-for="(item) in dataList" :style="{background:'linear-gradient(80deg, '+item.color+'66 0%, '+item.color+'00 100%)',width:'calc('+ (100 - parseInt(item.num,10) ) / 100 +' * 250px)',top:item.top+'px',left:item.left+'px'}" >
<div class="round-num" :style="{color:item.color}" >
{{ item.num }}%
{{ item.num }}
</div>
<div class="round-text" >
{{ item.text }}
@ -18,6 +18,7 @@
<script>
import WgtTitle from "../../../../perception/widgets/title";
import * as echarts from "echarts";
import { getSystemStatusType } from "@/api/MonthlyEquipment";
export default {
name: 'MonthlyEquipment',
@ -26,7 +27,8 @@
},
data() {
return {
dataList:[
dataList:[],
copyList:[
{
num:40,
text:"高清网络球形摄像机",
@ -46,14 +48,14 @@
text:"门架式可变信息标志",
color:"#17A2FF",
top:130,
left:300,
left:500,
},
{
num:70,
text:"站前悬臂式可变信息标志",
color:"#17E3FF",
top:230,
left:500,
top:200,
left:580,
},
{
num:60,
@ -80,8 +82,8 @@
num:40,
text:"雨棚可变信息标志",
color:"#17A2FF",
top:230,
left:280,
top:260,
left:320,
},
{
num:80,
@ -133,6 +135,12 @@
color:"#FFCE85",
top:430,
left:320,
},{
num:60,
text:"智能设备箱" ,
color:"#FFCE85",
top:430,
left:620,
}
]
}
@ -145,9 +153,31 @@
},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
let colors = ['#17E3FF',"#FFCE85",'#17A2FF','#1C7C3A'];
getSystemStatusType().then((res)=>{
this.dataList = [];
let allList = [];
let data = res.data;
let i = 0;
for (var it in data){
let item = {
text:it,
num:data[it].sucessRate,
color: colors[(i + 1)%4],
top: this.copyList[i]?this.copyList[i].top:0, //(i + 1)%4 * 80,
left: this.copyList[i]?this.copyList[i].left:0,
}
console.log(it,i);
i+= 1;
allList.push(item);
}
console.log(allList);
this.dataList = allList;
})
});
});
},
@ -232,7 +262,7 @@
align-items: center;
width: 100%;
height: 21px;
font-size: 14px;
font-size: 12px;
font-family: Hiragino Sans GB, Hiragino Sans GB;
font-weight: normal;
color: #FFFFFF;

119
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js

@ -0,0 +1,119 @@
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
export const tabMap = {
AlarmEvents: {
state: 5,
textColor: "#007FF4",
text: "去确认",
},
EventsConfirmed: {
state: 5,
textColor: "#007FF4",
text: "去确认",
},
DisposingEvents: {
state: 4,
textColor: "#007FF4",
text: "去处置",
},
IncidentDisposed: {
state: 3,
textColor: "#007FF4",
text: "处置记录",
},
};
export const searchFormList = [
{
label: "时间范围:",
key: "time",
required: true,
type: "datePicker",
options: {
format:"yyyy-MM-dd",
type: "daterange",
},
},
{
label: "型号类型:",
key: "type",
required: true,
type: "select",
options: {
options: [
{
value: "",
label: "全部",
},
{
value: "1",
label: "高清网络枪型固定摄像机",
},
{
value: "2",
label: "高清网络球形摄像机",
},
{
value: "3",
label: "桥下高清网络球形摄像机",
},
{
value: "4",
label: "360°全景摄像机",
},
{
value: "5",
label: "180°全景摄像机",
},
{
value: "6",
label: "门架式可变信息标志",
},
{
value: "7",
label: "雨棚可变信息标志",
},
{
value: "8",
label: "站前悬臂式可变信息标志",
},
{
value: "9",
label: "气象检测器",
},
{
value: "10",
label: "路段语音广播系统",
},
{
value: "11",
label: "护栏碰撞预警系统",
},
{
value: "12",
label: "毫米波雷达",
},
{
value: "13",
label: "合流区预警系统",
},
{
value: "14",
label: "激光疲劳唤醒",
},
{
value: "15",
label: "一类交通量调查站",
},
{
value: "16",
label: "智能行车诱导系统",
},
{
value: "17",
label: "智能设备箱",
},
],
},
},
];

229
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue

@ -12,27 +12,27 @@
</div>
<div class="item-body" >
<div class="left-body" >
<img />
<span>枪机</span>
<img src="./assets/shexiangtou.png" />
<span>{{ item.text }}</span>
</div>
<div class="line" ></div>
<div class="right-list" >
<div class="list-text" >
<span>在线</span>
<div class="show-text1" >
{{ item.online }}%
{{ item.sucessRate }}
</div>
</div>
<div class="list-text" >
<span>离线</span>
<div class="show-text2" >
{{ item.outline }}%
{{ item.failRate }}
</div>
</div>
<div class="list-text" >
<span>丢包</span>
<div class="show-text3" >
{{ item.lost }}%
{{ item.lostRate }}
</div>
</div>
</div>
@ -40,7 +40,7 @@
</div>
</div>
<div class="bottomTabs" >
<DeviceUptime class="tabs-lo" />
<DeviceUptime :dataList="equipments" class="tabs-lo" />
<MonthlyEquipment class="tabs-mo" />
</div>
</el-tab-pane>
@ -48,7 +48,10 @@
<div class="topdiv" >
<div class="left-div" >
<el-button size="mini" icon="el-icon-refresh-left" class="btnSearch" >刷新</el-button>
<el-button size="mini" icon="el-icon-download" class="btnSearch" >导出Excel</el-button>
<el-button size="mini" icon="el-icon-download" class="btnSearch" @click="SystemStatusExport" >导出Excel</el-button>
</div>
<div class="right-div" >
<InputSearch style="width: 402px;" :formList="searchFormList" @handleSearch="handleSearch" />
</div>
</div>
<div class="middleDiv" >
@ -68,56 +71,89 @@
width="80">
</el-table-column>
<el-table-column
prop="address"
label="设备类型"
prop="deviceName"
label="设备名称"
></el-table-column>
<el-table-column
prop="deviceNo"
label="设备桩号"
width="">
</el-table-column>
<el-table-column
prop="root"
prop="direction"
label="方向"
class-name="showClass"
width="">
<template slot-scope="scope">
<span class="showClass">{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column
prop="ip"
prop="deviceIp"
label="设备IP"
width=""
>
</el-table-column>
<el-table-column
prop="cj"
prop="production"
label="厂家"
width=""
>
</el-table-column>
<el-table-column
prop="xh"
prop="type"
label="型号"
width=""
>
<template slot-scope="scope">
<div v-if="scope.row.type == 1" >高清网络枪型固定摄像机</div>
<div v-if="scope.row.type == 2" >高清网络球形摄像机</div>
<div v-if="scope.row.type == 3" >桥下高清网络球形摄像机</div>
<div v-if="scope.row.type == 4" >360°全景摄像机</div>
<div v-if="scope.row.type == 5" >180°全景摄像机</div>
<div v-if="scope.row.type == 6" >门架式可变信息标志</div>
<div v-if="scope.row.type == 7" >雨棚可变信息标志</div>
<div v-if="scope.row.type == 8" >站前悬臂式可变信息标志</div>
<div v-if="scope.row.type == 9" >气象检测器</div>
<div v-if="scope.row.type == 10" >路段语音广播系统</div>
<div v-if="scope.row.type == 11" >护栏碰撞预警系统</div>
<div v-if="scope.row.type == 12" >毫米波雷达</div>
<div v-if="scope.row.type == 13" >合流区预警系统</div>
<div v-if="scope.row.type == 14" >激光疲劳唤醒</div>
<div v-if="scope.row.type == 15" >一类交通量调查站</div>
<div v-if="scope.row.type == 16" >智能行车诱导系统</div>
<div v-if="scope.row.type == 17" >智能设备箱</div>
</template>
</el-table-column>
<el-table-column
prop="wd"
prop="network"
label="网段"
width=""
>
</el-table-column>
<el-table-column
prop="jcsj"
prop="time"
label="监测时间"
width=""
>
</el-table-column>
<el-table-column
prop="cz"
prop="deviceStatus"
label="操作"
width=""
>
<template slot-scope="scope">
<div v-if="scope.row.deviceStatus == 1" >在线</div>
<div v-if="scope.row.deviceStatus == 0" >离线</div>
</template>
</el-table-column>
</el-table>
<div class="foot" >
<Pagination
width="'100%'"
:page-size="pageSize"
:current-page.sync="pageIndex"
layout="prev, pager, next"
:total="pageTotal">
</Pagination>
</div>
</div>
</el-tab-pane>
</el-tabs>
@ -131,15 +167,29 @@ import * as echarts from "echarts";
import chartsStatistics from "./assets/charts";
import DeviceUptime from './components/deviceUptime';
import MonthlyEquipment from './components/monthlyEquipment';
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";
export default {
name: 'publicService',
components: {
DeviceUptime,
MonthlyEquipment
MonthlyEquipment,
Pagination,
InputSearch
},
data(){
return {
startTime: "2024-01-01 00:00:00",
time: "2024-01-31 00:00:00",
typeQuery:1, //
pageTotal:0,
pageIndex:1,
pageSize:10,
searchFormList,
equipments:[
{
num : 315,
@ -374,11 +424,126 @@ import * as echarts from "echarts";
}
},
methods:{
formatDate(val){
let year = val.getFullYear();
var m = val.getMonth() + 1;
var day = val.getDate();
m = m < 10?"0"+m:""+m;
day = day < 10?"0"+day:""+day;
return year+"-"+m+"-"+day+" 00:00:00";
},
handleSearch(data) {
console.log(data);
this.typeQuery = data.type;
this.startTime = this.formatDate(data.time[0]);
this.time = this.formatDate(data.time[1]);
this.queryChartList();
this.queryTabList(1);
},
changeTabs(){
console.log("======================", this.myChart);
this.$nextTick(() => {
this.myChart.resize();
});
},
//
SystemStatusExport(){
download(
"/fault/list/exportFaultReport",
{ faultId: row.id },
"file.xlsx");
// 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
// })
},
queryChartList(){
getSystemStatusList({
startTime:this.startTime,
time:this.time,
type:this.typeQuery,
}).then((res)=>{
if ( res.code == 200 ) {
let data = res.data;
let startTime = new Date(this.startTime);
let month = startTime.getMonth() + 1;
let dayS = startTime.getDate();
let backCooDatas = [];
let dayArr = [];
for (var i = 1 ;i < 31;i++){
let daystr = startTime.getFullYear() + "-" + month + "-"+ i;
let dataObj = data[daystr] ? parseFloat(data[daystr]):0;
dayArr.push(daystr);
backCooDatas.push(dataObj);
}
console.log("===================",backCooDatas);
chartsStatistics.series[0].data = backCooDatas;
this.$nextTick(() => {
this.myChart.setOption(chartsStatistics);
});
}
})
},
queryTypes(){
getSystemStatusType().then((res)=>{
console.log("===========================",res);
this.equipments = [];
let allList = [];
let data = res.data;
let i = 0;
for (var it in data){
let item = {
text:it,
num:data[it].sum,
sucessRate:data[it].sucessRate,
lostRate:data[it].lostRate,
failRate:data[it].failRate
}
console.log(it,i);
i+= 1;
allList.push(item);
}
console.log(allList);
this.equipments = allList;
})
},
//
queryTabList(pageIndex,pageSize = 30){
getSystemStatusTabList({
startTime:this.startTime,
time:this.time,
type:this.typeQuery,
pageNum:pageIndex,
pageSize:pageSize,
}).then((res)=>{
console.log(res);
if ( res.code == 200 ) {
this.pageIndex = pageIndex;
this.pageSize = pageSize;
this.pageTotal = res.total;
this.tableData = res.rows;
}
})
}
},
mounted() {
@ -388,6 +553,11 @@ import * as echarts from "echarts";
myChart.setOption(chartsStatistics);
this.myChart = myChart;
});
this.queryTypes();
this.queryTabList(1);
this.queryChartList();
});
},
}
@ -428,7 +598,7 @@ import * as echarts from "echarts";
display: inline-flex;
position: relative;
flex-direction: column;
width: calc(100% /8 - 15px);
width: calc(100% /9 - 15px);
height:175px;
margin-right:15px;
margin-bottom:15px;
@ -661,6 +831,20 @@ import * as echarts from "echarts";
}
.topdiv {
display: inline-flex;
position: relative;
width:100%;
height:40px;
justify-content: space-between;
align-items: center;
.right-div {
display: inline;
width:450px;
}
}
.TrafficFlow {
width: 100%;
height: 100%;
@ -736,7 +920,8 @@ import * as echarts from "echarts";
width: 98%;
margin: auto;
display: flex;
justify-content: space-between;
justify-content: center;
align-items: center;
flex: 1;
pointer-events: none;
margin-top: 8px;

3
ruoyi-ui/vue.config.js

@ -42,7 +42,8 @@ module.exports = {
// target: `http://10.0.81.201:8080`,
// target: `http://10.168.73.36:8080`, // 周乐
//target: `http://10.168.77.209:8080`, // 刘朋
target:'http://10.168.66.196:8080',
//target:'http://10.168.66.196:8080',
target:'http://10.168.77.88:8087/',
// target: `http://10.168.66.196:8080`, //刘文阁
// target: `http://10.168.56.206:8087`, //孟
changeOrigin: true,

Loading…
Cancel
Save