-
+ ">
-
+
- 
- 微气象数据
+
-
-
温度
- {{ environmentInfo.temperature }}
- ℃
+
+
+ 
+
-
+
变压器
+
+ 45
+ 个
+
+
-
风向
- {{ environmentInfo.windDirection }}
- SW
+
+ 
+
-
-
+
高压电抗器
+
+ 45
+ 个
+
+
-
风速
- {{ environmentInfo.windSpeed }}
- 级
+
+ 
+
-
+
GIS
+
+ 45
+ 个
+
+
-
湿度
- {{ environmentInfo.humidity }}
- RH
+
+ 
+
-
+
断路器
+
+ 45
+ 个
+
+
-
雨量
- {{ environmentInfo.rainfall }}
- MM
-
+
+ 
+
-
-
+
隔离开关
+
+ 45
+ 个
+
+
-
气压
- {{ environmentInfo.pressure }}
- hpa
+
+ 
+
+
+
+ 电流互感器
+
+ 45
+ 个
+
+
+ 
+
+
+
+ 低压并联电抗器
+
+ 45
+ 个
+
+
+ 
+
+
+
+ 电压互感器
+
+ 45
+ 个
+
+
+ 
+
+
+
+ 低压并联电容器
+
+ 45
+ 个
+
+
+ 
+
+
避雷针
+
+ 45
+ 个
+
+
-
- 今日巡视任务统计
+
-
- 完成率
- {{ tourTaskInfo.executeRate }}%
-
-
- 已执行任务
-
- {{ tourTaskInfo.execute }} 个
-
-
待执行任务
-
- {{ tourTaskInfo.toBeExecute }} 个
+
+
+ 
+
+
+
+
+
+
+ 摄像头
+ 50/100
+
+
+ 在线率:
+ 70%
+
+
+
+
+ 
+
+
+
+
+
+
+ 声纹设备
+ 50/100
+
+
+ 在线率:
+ 70%
+
+
+
+
+ 
+
+
+
+
+
+ 网关机
+ 50/100
+
+
+ 在线率:
+ 70%
+
+
+
+
-
- 异常分类统计
+
-
-
-
+
+
+ 
- 温度
+
-
- 危机事件
- {{ abnormalInfo.crisisEvent }}
- 个
-
+
+ 26
+ ℃
-
-
+
+ 
- 湿度
+
-
- 严重事件
- {{ abnormalInfo.seriousEvent }}
- 个
-
+
+ 26
+ RH
-
-
+
+ 
- 风速
+
-
- 一般事件
- {{ abnormalInfo.sameEvent }}
- 个
-
+
+ 26
+ 级
-
-
+
+ 
- 风向
+
-
+ 预警事件
- {{ abnormalInfo.warnEvent }}
- 个
-
+
+ 26
+ SW
+
+
+
+
+ 
+
+ 气压
+
+ 26
+ HPA
+
+
+
+ 
+
+ 降雨量
+
+ 26
+ MM
-
动态告警信息
- （{{ alarmCount }}）
+
@@ -144,7 +260,7 @@
- 级别
发生时间
@@ -162,32 +278,54 @@
-
- 巡视设备在线率
+
-
@@ -329,7 +467,7 @@ function setupWebSocket() {
ws1.onerror = (error: any) => {
};
ws1.onmessage = (e: any) => {
-
+
if (e.data != 0) {
environment.value = JSON.parse(e.data)
if (environment.value.type == 1) {
@@ -374,22 +512,13 @@ onMounted(() => {
}
bsGetProductProcess()
getInit()
- tourTaskInit()
tourDayTaskInit()
setupWebSocket()
alarmCount.value = userStore.alarmCount
-
- window.onresize = () => {
- myChart.resize()
- isModelset.value = false
- setTimeout(() => {
- isModelset.value = true
- }, 50)
- }
});
onBeforeUnmount(() => {
- if(ws1 != null){
+ if (ws1 != null) {
ws1.close()
}
clearInterval(tableTimer)
@@ -545,32 +674,7 @@ const option = ref({
}
]
})
-let myChart: any = null
-function tourTaskInit() {
- myChart = echarts.init(document.getElementById("myChartId") as HTMLDivElement);
- let params = {
- stationCode: userStore.stationCode
- }
- getTaskTodoStatByMonth(params).then((res: any) => {
- myChart.clear()
- // option.value.xAxis.data = res.data.dateList
- option.value.xAxis.data = ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']
- option.value.series[0].data = res.data.executeList
- option.value.series[1].data = res.data.toBeExecuteList
- myChart.setOption(option.value)
- })
-
-}
-const DayStatistics = ref({
- allCount: 0,
- execute: 0,
- executeRate: 0,
- toBeExecute: 0,
- toBeExecuteRate: 0,
- unExecute: 0
-
-})
function tourDayTaskInit() {
let params = {
@@ -589,6 +693,9 @@ function tourDayTaskInit() {
})
}
+
+//巡视计划统计tab切换
+const tabs = ref(1)
@@ -597,128 +704,502 @@ function tourDayTaskInit() {
position: absolute;
top: 16px;
left: 15px;
- width: 400px;
- height: 287px;
- background: url(@/assets/home/sy_wqx.png);
+ width: 450px;
+ height: 458px;
+ background: url(@/assets/sytlechange/u206.svg);
background-size: 100% 100%;
+ background-color: #001f59d7;
+ box-sizing: border-box;
+ padding: 0px 20px;
- .environment-box {
+ .one_box {
display: flex;
- flex-wrap: wrap;
+ width: 100%;
align-items: center;
- // justify-content: space-evenly;
- // padding: 0 12px;
- padding-left: 13px;
- margin-top: 10px;
+ flex-wrap: wrap;
+ justify-content: space-between;
- .environmentson {
- margin-bottom: 7px;
- width: 119px;
- height: 100px;
- font-family: 'Arial Normal', 'Arial';
- font-weight: 400;
- font-style: normal;
- font-size: 14px;
- color: #FFFFFF;
+ .one_box_all {
+ width: 187px;
+ height: 46px;
+ background-image: url(@/assets/sytlechange/one.svg);
position: relative;
- margin-right: 7px;
- }
+ padding-left: 20px;
+ margin-bottom: 30px;
- .wqxsj1 {
- background-image: url(@/assets/home/sy_wd.png);
- background-size: 100% 100%;
- }
+ .all_img {
+ width: 23px;
+ height: 23px;
+ position: absolute;
+ top: -11px;
+ // left:20px;
+ }
- .wqxsj2 {
- background-image: url(@/assets/home/sy_fx.png);
- background-size: 100% 100%;
- }
+ .all_text {
+ width: 100%;
+ height: 46px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
- .wqxsj3 {
- background-image: url(@/assets/home/sy_fs.png);
- background-size: 100% 100%;
- }
+ .all_text_qian {
+ font-size: 12px;
+ color: #B5D7FF;
+ }
- .wqxsj4 {
- background-image: url(@/assets/home/sy_sd.png);
- background-size: 100% 100%;
- }
+ .all_text_hou_one {
+ font-family: 钉钉进步体;
+ font-weight: 400;
+ font-style: normal;
+ color: rgb(0, 255, 255);
+ display: inline-block;
+ margin-right: 5px;
+ }
- .wqxsj5 {
- background-image: url(@/assets/home/sy_jy.png);
- background-size: 100% 100%;
- }
-
- .wqxsj6 {
- background-image: url(@/assets/home/sy_qy.png);
- background-size: 100% 100%;
+ .all_text_hou_two {
+ font-family: 钉钉进步体;
+ font-weight: 400;
+ font-style: normal;
+ font-size: 10px;
+ color: rgb(255, 255, 255);
+ }
+ }
}
}
-
-}
-
-.stationboard-left3 {
- position: absolute;
- top: 655px;
- left: 15px;
- width: 400px;
- height: 320px;
- background: url(@/assets/home/sy_ycfl.png);
- background-size: 100% 100%;
}
.stationboard-left2 {
position: absolute;
- top: 320px;
+ top: 490px;
left: 15px;
- width: 400px;
- height: 320px;
- background: url(@/assets/home/sy_ycfl.png);
+ width: 450px;
+ height: 247px;
+ background: url(@/assets/sytlechange/u206.svg);
background-size: 100% 100%;
+ background-color: #001f59d7;
+ box-sizing: border-box;
+ padding: 0px 20px;
+
+ .el-progress-bar__inner {
+ background-color: #0099ff;
+ }
+
+ .two_box {
+ width: 100%;
+
+ .two_box_all {
+ width: 100%;
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 25px;
+
+ .two_img {
+ width: 36px;
+ height: 36px;
+ box-sizing: border-box;
+ border-bottom: 2px #0099ff solid;
+ background-color: rgba(0, 153, 255, 0.3);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .two_body {
+ width: 360px;
+ height: 36px;
+ flex-direction: column;
+ justify-content: space-between;
+
+ .two_text {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 5px;
+
+ .two_text_one {
+ .one_one {
+ font-family: 'Arial Normal', 'Arial';
+ font-weight: 400;
+ font-style: normal;
+ font-size: 14px;
+ color: #B5D7FF;
+ }
+
+ .one_two {
+ display: inline-block;
+ margin-left: 30px;
+ font-family: '钉钉进步体';
+ font-weight: 400;
+ font-style: normal;
+ font-size: 14px;
+ color: #00FFFF;
+
+ .one_three {
+ color: #FFFFFF;
+ }
+ }
+ }
+
+ .two_text_two {
+ .two_one {
+ font-family: 'Arial Normal', 'Arial';
+ font-weight: 400;
+ font-style: normal;
+ font-size: 12px;
+ color: #FFFFFF;
+ }
+
+ .two_two {
+ font-family: '钉钉进步体';
+ font-weight: 400;
+ font-style: normal;
+ font-size: 14px;
+ color: #00FFFF;
+ }
+ }
+ }
+ }
+ }
+ }
}
+.stationboard-left3 {
+ position: absolute;
+ top: 750px;
+ left: 15px;
+ width: 450px;
+ height: 253px;
+ background: url(@/assets/sytlechange/u206.svg);
+ background-size: 100% 100%;
+ background-color: #001f59d7;
+ box-sizing: border-box;
+ padding: 0px 20px;
+
+ .three_body {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+
+ .three_box {
+ width: 125px;
+ height: 80px;
+ background: url(@/assets/sytlechange/three.svg);
+ background-size: 100% 100%;
+ padding: 13px 15px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin-bottom: 10px;
+
+ .three_top {
+ width: 100%;
+ font-family: 'MicrosoftYaHei Normal', 'MicrosoftYaHei';
+ font-weight: 400;
+ font-style: normal;
+ font-size: 14px;
+ color: #B5D7FF;
+ line-height: 11px;
+ position: relative;
+
+ .three_top_right {
+ position: absolute;
+ top: -3px;
+ right: 0px;
+ }
+ }
+
+ .three_bottom {
+ .three_bottom_one {
+ font-family: '钉钉进步体';
+ font-weight: 400;
+ font-style: normal;
+ font-size: 24px;
+ color: #00FFFF;
+ line-height: 23px;
+ }
+
+ .three_bottom_two {
+ font-family: 'MicrosoftYaHei Normal', 'MicrosoftYaHei';
+ font-weight: 400;
+ font-style: normal;
+ font-size: 12px;
+ color: #B5D7FF;
+ line-height: 11px;
+ }
+ }
+ }
+ }
+}
.stationboard-right1 {
position: absolute;
top: 16px;
right: 15px;
- width: 400px;
- height: 363px;
- background: url(@/assets/home/sy_gj.png);
+ width: 450px;
+ height: 318px;
+ background: url(@/assets/sytlechange/u206.svg);
background-size: 100% 100%;
+ background-color: #001f59d7;
+ box-sizing: border-box;
+ padding: 0px 20px;
}
.stationboard-right2 {
position: absolute;
- top: 395px;
+ top: 350px;
right: 15px;
- width: 400px;
- height: 247px;
- background: url(@/assets/home/sy_sbzxl.png);
+ width: 450px;
+ height: 317px;
+ background: url(@/assets/sytlechange/u206.svg);
background-size: 100% 100%;
+ background-color: #001f59d7;
+ box-sizing: border-box;
+ padding: 0px 20px;
+
+ .right2_body {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .right2_box {
+ width: 221px;
+ height: 225px;
+ background: url(@/assets/sytlechange/right_two.svg);
+
+ .box_text {
+ width: 100%;
+ height: 225px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ .box_text_one {
+ font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+ font-weight: 700;
+ font-style: normal;
+ font-size: 40px;
+ color: #00FFFF
+ }
+
+ .box_text_two {
+ font-family: 'Arial Normal', 'Arial';
+ font-weight: 400;
+ font-style: normal;
+ font-size: 14px;
+ color: #FFFFFF;
+ }
+ }
+ }
+
+ .right2_box_left {
+ width: 96px;
+ margin-right: 25px;
+
+ .box_text {
+ width: 96px;
+
+ .box_text1 {
+ font-family: '微软雅黑';
+ font-weight: 400;
+ font-style: normal;
+ font-size: 14px;
+ color: #B5D7FF;
+ line-height: 11px;
+ }
+
+ .box_text2 {
+ font-family: '钉钉进步体';
+ font-weight: 400;
+ font-style: normal;
+ font-size: 30px;
+ color: #00FFFF;
+ line-height: 23px;
+
+ .span {
+ font-family: '钉钉进步体';
+ font-weight: 400;
+ font-style: normal;
+ font-size: 14px;
+ color: #FFFFFF;
+ line-height: 14px;
+ }
+ }
+
+ .box_text3 {
+ margin: 10px 0px;
+ }
+ }
+
+ }
+ }
}
.stationboard-right3 {
position: absolute;
- top: 655px;
- left: 430px;
- width: calc(100vw - 445px);
- height: 320px;
- background: url(@/assets/home/sy_nrw.png);
+ top: 684px;
+ right: 15px;
+ width: 450px;
+ height: 323px;
+ background: url(@/assets/sytlechange/u206.svg);
background-size: 100% 100%;
+ background-color: #001f59d7;
+ box-sizing: border-box;
+ padding: 0px 20px;
+
+ .right_three_body {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .three_left {
+ width: 221px;
+ height: 235px;
+ background: url(@/assets/sytlechange/right3.svg);
+ background-size: 100% 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+
+ .three_left_top {
+ font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+ font-weight: 700;
+ font-style: normal;
+ font-size: 40px;
+ color: #00FFFF
+ }
+
+ .three_left_bottom {
+ font-family: 'Arial Normal', 'Arial';
+ font-weight: 400;
+ font-style: normal;
+ font-size: 14px;
+ color: #FFFFFF;
+ }
+ }
+
+ .three_right {
+ height: 150px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ div {
+ width: 154px;
+ height: 35px;
+ padding: 0px 10px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ box-sizing: border-box;
+ font-family: 'Arial Normal', 'Arial';
+ font-weight: 400;
+ color: #FFFFFF;
+ font-size: 14px;
+
+ .spanc1 {
+ font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+ font-weight: 700;
+ font-style: normal;
+ font-size: 20px;
+ color: #00FFFF;
+ }
+ .spanc2 {
+ font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+ font-weight: 700;
+ font-style: normal;
+ font-size: 20px;
+ color: #009933;
+ }
+ .spanc3 {
+ font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+ font-weight: 700;
+ font-style: normal;
+ font-size: 20px;
+ color: #ff9900;
+ }
+ }
+
+ .three_right1 {
+ background: url(@/assets/sytlechange/right31.svg);
+ background-size: 100% 100%;
+ }
+
+ .three_right2 {
+ background: url(@/assets/sytlechange/right32.svg);
+ background-size: 100% 100%;
+ }
+
+ .three_right3 {
+ background: url(@/assets/sytlechange/right33.svg);
+ background-size: 100% 100%;
+ }
+ }
+ }
}
.stationboard-box-title {
- font-family: '阿里妈妈数黑体 Bold', '阿里妈妈数黑体';
- font-weight: 700;
- font-style: normal;
- font-size: 16px;
- color: #ffffff;
- height: 56px;
+ width: 100%;
+ padding: 20px 0px;
+ box-sizing: border-box;
display: flex;
align-items: center;
- padding-left: 20px;
+ justify-content: space-between;
+
+ .stationboard-box-title-right {
+ width: 150px;
+ height: 26px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .span1 {
+ display: inline-block;
+ width: 30px;
+ height: 26px;
+ box-sizing: border-box;
+ background-color: #0099ff;
+ text-align: center;
+ line-height: 24px;
+ color: #ffffff;
+ cursor: pointer;
+ border-radius: 5px;
+ font-family: '微软雅黑';
+ font-weight: 400;
+ font-style: normal;
+ font-size: 14px;
+ }
+
+ span {
+ display: inline-block;
+ width: 30px;
+ height: 26px;
+ box-sizing: border-box;
+ border: 1px solid #0069bd;
+ background-color: #003776;
+ text-align: center;
+ line-height: 24px;
+ color: #B5D7FF;
+ cursor: pointer;
+ border-radius: 5px;
+ font-family: '微软雅黑';
+ font-weight: 400;
+ font-style: normal;
+ font-size: 14px;
+ }
+
+ span:hover {
+ color: #ffffff;
+ }
+ }
}
.imgname {
@@ -789,11 +1270,6 @@ function tourDayTaskInit() {
}
}
-.el-progress--line {
- margin-bottom: 15px;
- width: 300px;
-}
-
.online-displayflex {
margin-top: 5px;
display: flex;
@@ -1015,17 +1491,20 @@ function tourDayTaskInit() {
}
.table_th {
- width: 351px;
+ width: 100%;
display: flex;
height: 34px;
line-height: 34px;
- background-color: #1C2834;
+ background-color: rgba(255, 255, 255, 0.0980392156862745);
// border-left: 2px solid rgba(0, 249, 162, 1);
// border-right: 2px solid rgba(0, 249, 162, 1);
font-size: 14px;
- color: rgba(181, 215, 255, 0.6);
+ color: #fff;
text-align: center;
margin: auto;
+ box-sizing: border-box;
+ border-left: 3px solid #0099ff;
+ border-right: 3px solid #0099ff;
}
.tr {
@@ -1039,7 +1518,7 @@ function tourDayTaskInit() {
}
.tr1 {
- width: 166px;
+ width: 200px;
text-align: left;
padding-left: 10px;
}
@@ -1049,7 +1528,7 @@ function tourDayTaskInit() {
}
.tr3 {
- width: 100px;
+ width: 114px;
}
.table_main_body {
@@ -1072,7 +1551,7 @@ function tourDayTaskInit() {
line-height: 34px;
color: #eee;
font-size: 15px;
- background: #1C2834;
+ background: #ffffff19;
cursor: pointer;
}
@@ -1083,7 +1562,7 @@ function tourDayTaskInit() {
.three_button {
position: fixed;
bottom: 18px;
- right: 450px;
+ right: 470px;
z-index: 1;
width: 100px;
height: 33px;
@@ -1215,5 +1694,5 @@ function tourDayTaskInit() {
font-family: "阿里妈妈数黑体 Bold", "阿里妈妈数黑体";
font-weight: 700;
font-style: normal;
-}
-
+}
+
- 
-
+
- {{ patrolInfo.camera.onLineRate }}%
- 摄像机
+
+
+
-
+
95%
+ 报警准确率
+
- 
-
-
- {{ patrolInfo.robot.onLineRate }}%
- 机器人
-
- 
-
+
- {{ patrolInfo.uav.onLineRate }}%
- 无人机
+
+
+ 
+
+ 告警总数
+ 1000 件
+
+
+
告警总数
+ 1000 件
+
-
+
-
+ 巡视任务统计
+
+
+ 年
+ 月
+ 周
+ 日
+
+
+
+
+ 95%
+ 任务执行率
+
+
+ 任务总数 15
+ 已执行任务数12
+ 未执行任务数13
+