实时监控
fanluyan
2 years ago
parent
9c1152b86c
commit
6e7dd5af92
@ -1,187 +1,216 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="parameterArea">
|
<div class="parameterArea">
|
||||||
<div class="timeBox"></div>
|
<div class="timeBox"></div>
|
||||||
<div class="monitorItemBox">
|
<div class="monitorItemBox">
|
||||||
<h3>检测项</h3>
|
<h3>检测项</h3>
|
||||||
<el-button type="primary" v-for="(item, index) in MonitorItem" :key="index" icon="el-icon-thumb">{{ item.name }}</el-button>
|
<div class="btnBox">
|
||||||
</div>
|
<el-button
|
||||||
<div class="monitorPointBox">
|
type="primary"
|
||||||
<h3>监拍点</h3>
|
v-for="(item, index) in MonitorItem"
|
||||||
<el-button type="primary" v-for="(item, index) in MonitorPoint" :key="index" icon="el-icon-thumb">{{ item.name }}</el-button>
|
:key="index"
|
||||||
</div>
|
icon="el-icon-thumb"
|
||||||
<div class="actionItem">
|
>{{ item.name }}</el-button
|
||||||
<h3>操作项</h3>
|
>
|
||||||
<el-button type="primary" v-for="(item, index) in actionItem" :key="index" icon="el-icon-thumb">{{ item.name }}</el-button>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="configItem">
|
|
||||||
<h3>配置项</h3>
|
|
||||||
<el-button type="primary" v-for="(item, index) in configItem" :key="index" icon="el-icon-thumb">{{ item.name }}</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="monitorPointBox">
|
||||||
|
<h3>监拍点</h3>
|
||||||
|
<div class="btnBox">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
v-for="(item, index) in MonitorPoint"
|
||||||
|
:key="index"
|
||||||
|
icon="el-icon-thumb"
|
||||||
|
>{{ item.name }}</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="actionItem">
|
||||||
|
<h3>操作项</h3>
|
||||||
|
<div class="btnBox">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
v-for="(item, index) in actionItem"
|
||||||
|
:key="index"
|
||||||
|
icon="el-icon-thumb"
|
||||||
|
>{{ item.name }}</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="configItem">
|
||||||
|
<h3>配置项</h3>
|
||||||
|
<div class="btnBox">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
v-for="(item, index) in configItem"
|
||||||
|
:key="index"
|
||||||
|
icon="el-icon-thumb"
|
||||||
|
>{{ item.name }}</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
//检测项
|
//检测项
|
||||||
MonitorItem: [
|
MonitorItem: [
|
||||||
{
|
{
|
||||||
name: '图片视频'
|
name: "图片视频",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '测温'
|
name: "测温",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '微气象'
|
name: "微气象",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '倾斜监测'
|
name: "倾斜监测",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '风偏监测'
|
name: "风偏监测",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '覆冰检测'
|
name: "覆冰检测",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '实时视频'
|
name: "实时视频",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '弧垂'
|
name: "弧垂",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '电压检测'
|
name: "电压检测",
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
//监拍点
|
//监拍点
|
||||||
MonitorPoint: [
|
MonitorPoint: [
|
||||||
{
|
{
|
||||||
name: '小号侧'
|
name: "小号侧",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '大号侧'
|
name: "大号侧",
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
//操作项
|
//操作项
|
||||||
actionItem: [
|
actionItem: [
|
||||||
{
|
{
|
||||||
name: '主动拍照'
|
name: "主动拍照",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '主动录像'
|
name: "主动录像",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '声光报警'
|
name: "声光报警",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '图片调阅'
|
name: "图片调阅",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '微信推送'
|
name: "微信推送",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '历史图片'
|
name: "历史图片",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '线缆绘制'
|
name: "线缆绘制",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '清除绘制'
|
name: "清除绘制",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '主动巡检'
|
name: "主动巡检",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '指令集'
|
name: "指令集",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '开启雨刮'
|
name: "开启雨刮",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '喊话'
|
name: "喊话",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '上一设备'
|
name: "上一设备",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '下一设备'
|
name: "下一设备",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '返回'
|
name: "返回",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '历史对比'
|
name: "历史对比",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '图片标记'
|
name: "图片标记",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '主动巡航'
|
name: "主动巡航",
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
//配置项
|
//配置项
|
||||||
configItem: [
|
configItem: [
|
||||||
{
|
{
|
||||||
name: '设置分组'
|
name: "设置分组",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '隐患类型'
|
name: "隐患类型",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '地图查看'
|
name: "地图查看",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '监拍点信息'
|
name: "监拍点信息",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '告警级别'
|
name: "告警级别",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '设备信息'
|
name: "设备信息",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '设置漏告'
|
name: "设置漏告",
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
};
|
};
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.parameterArea {
|
.parameterArea {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
padding: 16px 8px;
|
padding: 16px 8px;
|
||||||
.monitorItemBox,
|
.monitorItemBox,
|
||||||
.monitorPointBox,
|
.monitorPointBox,
|
||||||
.actionItem,
|
.actionItem,
|
||||||
.configItem {
|
.configItem {
|
||||||
display: flex;
|
border: 1px solid @border-color-base;
|
||||||
flex-wrap: wrap;
|
padding: 8px 16px 8px 16px;
|
||||||
justify-content: space-between;
|
margin-bottom: 32px;
|
||||||
border: 1px solid @border-color-base;
|
h3 {
|
||||||
//padding-top: 16px;
|
font-size: 16px;
|
||||||
position: relative;
|
margin-bottom: 8px;
|
||||||
padding: 24px 16px 16px 16px;
|
background: transparent;
|
||||||
margin-bottom: 32px;
|
color: @color-text-regular;
|
||||||
h3 {
|
}
|
||||||
position: absolute;
|
.btnBox {
|
||||||
font-size: 16px;
|
display: flex;
|
||||||
top: -14px;
|
flex-wrap: wrap;
|
||||||
left: 7px;
|
justify-content: space-between;
|
||||||
background: transparent;
|
.el-button {
|
||||||
color: @color-text-regular;
|
width: 84px;
|
||||||
}
|
padding: 6px 0px;
|
||||||
.el-button {
|
font-size: 12px;
|
||||||
width: 84px;
|
margin-bottom: 8px;
|
||||||
padding: 6px 0px;
|
}
|
||||||
font-size: 12px;
|
.el-button + .el-button {
|
||||||
margin-bottom: 8px;
|
margin-left: 0px;
|
||||||
}
|
}
|
||||||
.el-button + .el-button {
|
|
||||||
margin-left: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue