lizhichao
2 years ago
parent
78c36cd692
commit
1ff801633c
14 changed files with 2349 additions and 241 deletions
@ -1,79 +1,80 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<div style="background: #1e283d; height: 92vh; width: 218px"> |
||||
<el-menu |
||||
class="el-menu-vertical-demo" |
||||
@open="handleOpen" |
||||
@close="handleClose" |
||||
background-color="#1E283D" |
||||
active-background-color="red" |
||||
text-color="#fff" |
||||
active-text-color="#ffd04b" |
||||
:default-active="$route.path" |
||||
router |
||||
> |
||||
<el-submenu index="1"> |
||||
<template slot="title"> |
||||
<span class="point"></span> |
||||
<span>系统监控</span> |
||||
</template> |
||||
<el-menu-item-group> |
||||
<el-menu-item index="/opsVisualization/index">服务监控</el-menu-item> |
||||
<el-menu-item index="/opsVisualization/warnHistory">Redis监控</el-menu-item> |
||||
<el-menu-item index="/opsVisualization/index">数据库监控</el-menu-item> |
||||
<el-menu-item index="/opsVisualization/index">网络监控</el-menu-item> |
||||
<el-menu-item index="/opsVisualization/index">系统硬件监控</el-menu-item> |
||||
</el-menu-item-group> |
||||
</el-submenu> |
||||
<el-submenu index="2"> |
||||
<template slot="title"> |
||||
<i class="point"></i> |
||||
<span>业务数据运维</span> |
||||
</template> |
||||
<el-menu-item-group> |
||||
<el-menu-item index="/opsVisualization/alarmProcess">服务监控</el-menu-item> |
||||
<el-menu-item index="/opsVisualization/tuobu">Redis监控</el-menu-item> |
||||
<el-menu-item index="/opsVisualization/index">数据库监控</el-menu-item> |
||||
<el-menu-item index="/opsVisualization/index">网络监控</el-menu-item> |
||||
<el-menu-item index="/opsVisualization/index">系统硬件监控</el-menu-item> |
||||
</el-menu-item-group> |
||||
</el-submenu> |
||||
</el-menu> |
||||
</div> |
||||
<div class="page"> |
||||
<div style="background: #1e283d; height: 92vh; width: 218px"> |
||||
<el-menu |
||||
class="el-menu-vertical-demo" |
||||
@open="handleOpen" |
||||
@close="handleClose" |
||||
background-color="#1E283D" |
||||
active-background-color="red" |
||||
text-color="#fff" |
||||
active-text-color="#ffd04b" |
||||
:default-active="$route.path" |
||||
router |
||||
> |
||||
<el-submenu index="1"> |
||||
<template slot="title"> |
||||
<span class="point"></span> |
||||
<span>系统监控</span> |
||||
</template> |
||||
<el-menu-item-group> |
||||
<el-menu-item index="/opsVisualization/tuobu" |
||||
>系统监控</el-menu-item |
||||
> |
||||
<el-menu-item index="/opsVisualization/systemMonitoring" |
||||
>服务监控</el-menu-item |
||||
> |
||||
</el-menu-item-group> |
||||
</el-submenu> |
||||
<el-submenu index="2"> |
||||
<template slot="title"> |
||||
<i class="point"></i> |
||||
<span>业务数据运维</span> |
||||
</template> |
||||
<el-menu-item-group> |
||||
<el-menu-item index="/opsVisualization/alarmProcess" |
||||
>业务数据监控</el-menu-item |
||||
> |
||||
<el-menu-item index="/opsVisualization/serviceDataOAM" |
||||
>报警信息记录</el-menu-item |
||||
> |
||||
</el-menu-item-group> |
||||
</el-submenu> |
||||
</el-menu> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
export default { |
||||
data() { |
||||
return {}; |
||||
}, |
||||
watch: {}, |
||||
computed: {}, |
||||
mounted() {}, |
||||
methods: {}, |
||||
}; |
||||
</script> |
||||
export default { |
||||
data() { |
||||
return {}; |
||||
}, |
||||
watch: {}, |
||||
computed: {}, |
||||
mounted() {}, |
||||
methods: {}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.page{ |
||||
position: absolute; |
||||
top: 64px; |
||||
left: 0; |
||||
z-index: 1027; |
||||
} |
||||
/deep/.el-menu-item-group__title { |
||||
padding: 0; |
||||
} |
||||
.point { |
||||
width: 4px; |
||||
height: 4px; |
||||
background: #fff; |
||||
opacity: 0.7; |
||||
display: inline-block; |
||||
margin: 0 20px 0 30px; |
||||
border-radius: 50%; |
||||
} |
||||
</style> |
||||
.page { |
||||
position: absolute; |
||||
top: 64px; |
||||
left: 0; |
||||
z-index: 1027; |
||||
} |
||||
/deep/.el-menu-item-group__title { |
||||
padding: 0; |
||||
} |
||||
.point { |
||||
width: 4px; |
||||
height: 4px; |
||||
background: #fff; |
||||
opacity: 0.7; |
||||
display: inline-block; |
||||
margin: 0 20px 0 30px; |
||||
border-radius: 50%; |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,423 @@ |
||||
<template> |
||||
<div class="content"> |
||||
<div class="process"> |
||||
<div class="title">报警节点示意图</div> |
||||
<div class="main"> |
||||
<div class="process-example"> |
||||
<div class="example-title">示例：</div> |
||||
<div class="example-box"> |
||||
<div class="point blue"></div> |
||||
<div class="value">正常</div> |
||||
</div> |
||||
<div class="example-box margin-right-left-20"> |
||||
<div class="point red"></div> |
||||
<div class="value">报警</div> |
||||
</div> |
||||
<div class="example-box"> |
||||
<div class="point grey"></div> |
||||
<div class="value">静默</div> |
||||
</div> |
||||
</div> |
||||
<div class="process-center"> |
||||
<div class="process-node-box"> |
||||
<div class="node-img"> |
||||
<img class="nav_img" src="../../../public/img/process/node1.png"> |
||||
<div class="node-text">脚本</div> |
||||
</div> |
||||
<div class="yes-no"> |
||||
<div class="yes"></div> |
||||
<img class="nav_img" src="../../../public/img/process/yes.png"> |
||||
</div> |
||||
<div class="node-img"> |
||||
<img class="nav_img" src="../../../public/img/process/node2.png"> |
||||
<div class="node-text">电子围栏服务</div> |
||||
</div> |
||||
<div class="yes-no"> |
||||
<div class="yes"></div> |
||||
<img class="nav_img" src="../../../public/img/process/yes.png"> |
||||
</div> |
||||
<div class="node-img"> |
||||
<img class="nav_img" src="../../../public/img/process/node3.png"> |
||||
<div class="node-text">网关</div> |
||||
</div> |
||||
<div class="yes-no"> |
||||
<div class="yes"></div> |
||||
<img class="nav_img" src="../../../public/img/process/yes.png"> |
||||
</div> |
||||
<div class="node-img"> |
||||
<div class="baojing">dtu断联报警</div> |
||||
<img class="nav_img" src="../../../public/img/process/node4.png"> |
||||
<div class="node-text">dtu</div> |
||||
</div> |
||||
<div class="yes-no"> |
||||
<div class="no"></div> |
||||
<img class="nav_img" src="../../../public/img/process/no.png"> |
||||
</div> |
||||
<div class="node-img"> |
||||
<img class="nav_img" src="../../../public/img/process/node5.png"> |
||||
<div class="node-text">电子围栏</div> |
||||
</div> |
||||
</div> |
||||
<div class="process-more"> |
||||
<div class="button">查看更多报警信息</div> |
||||
</div> |
||||
</div> |
||||
<div class="process-bottom"> |
||||
<div class="line"> |
||||
<div class="item"> |
||||
<div class="item-box"> |
||||
<div class="time">2024-5-17 08:51:12</div> |
||||
<div class="point red"></div> |
||||
<div class="name">dtu断联报警</div> |
||||
<div class="code">dtu编号：SJK001</div> |
||||
<div class="btn red-btn"> |
||||
<img class="img" src="../../../public/img/process/serch.png" alt=""> |
||||
<div class="text">请检查dtu设备</div> |
||||
</div> |
||||
</div> |
||||
<div class="item-box"> |
||||
<div class="time">2024-5-17 08:51:13</div> |
||||
<div class="point grey"></div> |
||||
<div class="name">静默</div> |
||||
<div class="code">设备编号：SHUIBIAO1</div> |
||||
<div class="btn grey-btn"> |
||||
<img class="img" src="../../../public/img/process/loading.png" alt=""> |
||||
<div class="text">等待重新链接</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="restart"> |
||||
<div class="restart-title">操作：</div> |
||||
<div class="restart-btn">一键重启</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="method"> |
||||
<div class="title">报警解决方法</div> |
||||
<div class="main"> |
||||
<div class="text-box"> |
||||
<div class="label">设备位置：</div> |
||||
<div class="value"> |
||||
<div class="item">园区2号围栏</div> |
||||
</div> |
||||
</div> |
||||
<div class="text-box"> |
||||
<div class="label">排查方法：</div> |
||||
<div class="value"> |
||||
<div class="item">1.检查电源是否正常，重新接入或更换电源；</div> |
||||
<div class="item">2.检查是否过载，重新调整系统负载或更换更高性能的设备；</div> |
||||
<div class="item">3.检查温度是否过高，采取措施降低温度，如改变工作环境或更换散热设备；</div> |
||||
<div class="item">4.检查是否受到电磁干扰，采取措施降低干扰，如改变工作环境或更换屏蔽设备。</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
created() { |
||||
|
||||
}, |
||||
mounted() { |
||||
|
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.content{ |
||||
padding: 20px !important; |
||||
.process{ |
||||
width: calc(100% - 218px); |
||||
margin-left: 218px; |
||||
height: 584px; |
||||
background: #FFFFFF; |
||||
border-radius: 0px 0px 0px 0px; |
||||
border: 1px solid #D1D1D1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.title{ |
||||
width: 100%; |
||||
height: 40px; |
||||
background: #E5E5E5; |
||||
border-radius: 0px 0px 0px 0px; |
||||
border: 1px solid #D1D1D1; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 18px; |
||||
color: #333333; |
||||
} |
||||
.main{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
padding: 30px; |
||||
height: 50%; |
||||
.process-example{ |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
.example-title{ |
||||
color: #999999; |
||||
margin-right: 6px; |
||||
font-size: 14px; |
||||
} |
||||
.example-box{ |
||||
display: flex; |
||||
align-items: center; |
||||
.point{ |
||||
width: 11px; |
||||
height: 11px; |
||||
border-radius: 10px; |
||||
margin-right: 11px; |
||||
} |
||||
.value{ |
||||
color: #999999; |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
.margin-right-left-20{ |
||||
margin: 0 20px; |
||||
} |
||||
} |
||||
.process-center{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-around; |
||||
margin-top: 75px; |
||||
.process-node-box{ |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.node-img{ |
||||
width: 69px; |
||||
height: 69px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: relative; |
||||
.baojing{ |
||||
width: 133px; |
||||
height: 31px; |
||||
background: #FFF3F3; |
||||
border-radius: 0px 0px 0px 0px; |
||||
border: 1px solid #EE6464; |
||||
font-size: 16px; |
||||
color: #E14B33; |
||||
position: absolute; |
||||
top: -55px; |
||||
transform: translateY(-50%); |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
.nav_img{ |
||||
width: 100%; |
||||
height: 100%; |
||||
// margin-bottom: 20px; |
||||
} |
||||
.node-text{ |
||||
position: absolute; |
||||
transform: translateY(-50%); |
||||
width: 100px; |
||||
text-align: center; |
||||
top: 100px; |
||||
} |
||||
} |
||||
.yes-no{ |
||||
width: 163px; |
||||
height: 17px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: relative; |
||||
.yes{ |
||||
width: 167px; |
||||
height: 17px; |
||||
background: #21A2E5; |
||||
opacity: 0.18; |
||||
position: absolute; |
||||
} |
||||
.no{ |
||||
width: 167px; |
||||
height: 17px; |
||||
background: #A5A5A5; |
||||
opacity: 0.18; |
||||
position: absolute; |
||||
} |
||||
.nav_img{ |
||||
width: 24px; |
||||
height: 24px; |
||||
opacity: 1; |
||||
z-index: 10; |
||||
} |
||||
} |
||||
} |
||||
.process-more{ |
||||
.button{ |
||||
width: 190px; |
||||
height: 40px; |
||||
background: #FFFFFF; |
||||
border-radius: 0px 0px 0px 0px; |
||||
border: 1px solid #2B8EE5; |
||||
color: #2B8EE5; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
.process-bottom{ |
||||
border-top: 1px solid #D1D1D1; |
||||
margin-top: 200px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.line{ |
||||
margin-top: 20px; |
||||
display: flex; |
||||
align-items: flex-start; |
||||
justify-content: center; |
||||
} |
||||
.item{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
.item-box{ |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
margin-bottom: 20px; |
||||
.point{ |
||||
width: 10px; |
||||
height: 10px; |
||||
margin: 0 20px; |
||||
border-radius: 10px; |
||||
} |
||||
.name{ |
||||
width: 200px; |
||||
} |
||||
.code{ |
||||
width: 250px; |
||||
margin-left: 40px; |
||||
} |
||||
.btn{ |
||||
margin-left: 20px; |
||||
width: 185px; |
||||
height: 31px; |
||||
border-radius: 0px 0px 0px 0px; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
align-items: center; |
||||
font-size: 16px; |
||||
.img{ |
||||
width: 15px; |
||||
height: 15px; |
||||
} |
||||
} |
||||
.red-btn{ |
||||
background: #FFF3F3; |
||||
border: 1px solid #EE6464; |
||||
.text{ |
||||
color: #E14B33; |
||||
} |
||||
} |
||||
.grey-btn{ |
||||
background: #F5F5F5; |
||||
border: 1px solid #999999; |
||||
.text{ |
||||
color: #999999; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.restart{ |
||||
margin-left: 72px; |
||||
display: flex; |
||||
align-items: center; |
||||
cursor: pointer; |
||||
.restart-text{ |
||||
font-size: 16px; |
||||
color: #333333; |
||||
} |
||||
.restart-btn{ |
||||
width: 93px; |
||||
height: 31px; |
||||
background: #2B8EE5; |
||||
border-radius: 0px 0px 0px 0px; |
||||
font-size: 16px; |
||||
color: #FFFFFF; |
||||
margin-left: 7px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.method{ |
||||
flex: 1; |
||||
margin-top: 30px; |
||||
width: calc(100% - 218px); |
||||
// height: 326px; |
||||
margin-left: 218px; |
||||
background: #FFFFFF; |
||||
border-radius: 0px 0px 0px 0px; |
||||
border: 1px solid #D1D1D1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.title{ |
||||
width: 100%; |
||||
height: 40px; |
||||
background: #E5E5E5; |
||||
border-radius: 0px 0px 0px 0px; |
||||
border: 1px solid #D1D1D1; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 18px; |
||||
color: #333333; |
||||
} |
||||
.main{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
padding: 22px; |
||||
// height: 50%; |
||||
overflow: auto; |
||||
.text-box{ |
||||
margin-bottom: 22px; |
||||
display: flex; |
||||
.label{ |
||||
} |
||||
.value{ |
||||
.item{ |
||||
margin-bottom: 12px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.blue{ |
||||
background: #21A2E5; |
||||
} |
||||
.red{ |
||||
background: #E96955; |
||||
} |
||||
.grey{ |
||||
background: #E1E1E1; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,874 @@ |
||||
<template> |
||||
<el-row> |
||||
<el-col :span="3"> |
||||
<div class="box"> |
||||
<el-row class="tac"> |
||||
<el-col :span="12" style="width: 100%"> |
||||
<el-menu |
||||
default-active="2" |
||||
class="el-menu-vertical-demo" |
||||
@open="handleOpen" |
||||
@close="handleClose" |
||||
background-color="#545c64" |
||||
text-color="#fff" |
||||
active-text-color="#ffd04b" |
||||
> |
||||
<el-submenu index="1"> |
||||
<template slot="title"> |
||||
<i class="el-icon-location"></i> |
||||
<span>系统监控</span> |
||||
</template> |
||||
<el-menu-item-group> |
||||
<el-menu-item index="1-1">选项1</el-menu-item> |
||||
<el-menu-item index="1-2">选项2</el-menu-item> |
||||
</el-menu-item-group> |
||||
</el-submenu> |
||||
<el-submenu index="2"> |
||||
<template slot="title"> |
||||
<i class="el-icon-location"></i> |
||||
<span>业务数据运维</span> |
||||
</template> |
||||
<el-menu-item-group> |
||||
<el-menu-item index="2-1">选项1</el-menu-item> |
||||
<el-menu-item index="2-2">选项2</el-menu-item> |
||||
</el-menu-item-group> |
||||
</el-submenu> |
||||
</el-menu> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="21"> |
||||
<div style="width: 100%; height: 92vh; background-color: gray"></div> |
||||
</el-col> |
||||
</el-row> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
getList, |
||||
getDeptLazyTree, |
||||
getDeptLazyTree2, |
||||
remove, |
||||
add, |
||||
getDetails, |
||||
getQy, |
||||
getLc, |
||||
getQy1, |
||||
getLc1, |
||||
saveImg, |
||||
getDetail, |
||||
} from "@/api/equipment/index"; |
||||
import { mapGetters } from "vuex"; |
||||
import website from "@/config/website"; |
||||
import { getToken } from "@/util/auth"; |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
options: [], |
||||
iDisabled: true, |
||||
eqiupType: "", //操作状态 |
||||
build: [], //区域选项 |
||||
floored: [], //楼层选项 |
||||
props: { |
||||
value: "key", |
||||
label: "title", |
||||
emitPath: false, |
||||
// lazy: true, |
||||
// lazyLoad(node, resolve) { |
||||
// console.log(node) |
||||
// const parentId = (node.level === 0) ? 0 : node.data.id; |
||||
// getDeptLazyTree(parentId).then(res => { |
||||
// console.log(res) |
||||
// resolve(res.data.data.map(item => { |
||||
// return { |
||||
// ...item, |
||||
// leaf: !item.hasChildren |
||||
// } |
||||
// })) |
||||
// }); |
||||
// } |
||||
}, |
||||
ruleForm: { |
||||
classCode: null, //设备类型 |
||||
// 通知设置 |
||||
warnVO: { |
||||
warnLevel: null, //报警级别 |
||||
notifier: null, //通知人 |
||||
}, |
||||
// 通讯设置 |
||||
electricConfig: { |
||||
ip: null, //ip地址 |
||||
port: null, //端口号 |
||||
offsetData: null, //数据偏移量 |
||||
offsetStatus: null, //状态偏移量 |
||||
}, |
||||
lightConfigPowerVO: { |
||||
mac: null, //设备号 |
||||
addr: null, //线路地址 |
||||
}, |
||||
thirdId: null, //第三方id |
||||
area: null, //模型 |
||||
build: null, //区域 |
||||
floored: null, //楼层 |
||||
// 基础配置 |
||||
code: null, //编码 |
||||
name: null, //名称 |
||||
shortName: null, //简称 |
||||
brand: null, //厂家 |
||||
useStartTime: null, //使用时间 |
||||
location: null, //具体位置 |
||||
tendingUser: null, |
||||
tendingPhone: null, |
||||
tendingTime: null, |
||||
}, |
||||
rules: { |
||||
warnVO: { |
||||
warnLevel: [ |
||||
{ |
||||
required: true, |
||||
message: "请选择报警级别", |
||||
trigger: "change", |
||||
}, |
||||
], |
||||
notifier: [ |
||||
{ |
||||
required: true, |
||||
message: "请选择通知人", |
||||
trigger: "change", |
||||
}, |
||||
], |
||||
}, |
||||
electricConfig: { |
||||
ip: [ |
||||
{ |
||||
required: true, |
||||
message: "请输入内容", |
||||
trigger: "blur", |
||||
}, |
||||
], |
||||
port: [ |
||||
{ |
||||
required: true, |
||||
message: "请输入内容", |
||||
trigger: "blur", |
||||
}, |
||||
], |
||||
offsetData: [ |
||||
{ |
||||
required: true, |
||||
message: "请输入内容", |
||||
trigger: "blur", |
||||
}, |
||||
], |
||||
offsetStatus: [ |
||||
{ |
||||
required: true, |
||||
message: "请输入内容", |
||||
trigger: "blur", |
||||
}, |
||||
], |
||||
}, |
||||
|
||||
// mqttdkh: [{ |
||||
// required: true, |
||||
// message: '请输入内容', |
||||
// trigger: 'blur' |
||||
// }], |
||||
// dyzt: [{ |
||||
// required: true, |
||||
// message: '请输入内容', |
||||
// trigger: 'blur' |
||||
// }], |
||||
// fbzt: [{ |
||||
// required: true, |
||||
// message: '请输入内容', |
||||
// trigger: 'blur' |
||||
// }], |
||||
// appkey: [{ |
||||
// required: true, |
||||
// message: '请输入内容', |
||||
// trigger: 'blur' |
||||
// }], |
||||
// secret: [{ |
||||
// required: true, |
||||
// message: '请输入内容', |
||||
// trigger: 'blur' |
||||
// }], |
||||
thirdId: [ |
||||
{ |
||||
required: true, |
||||
message: "请输入内容", |
||||
trigger: "blur", |
||||
}, |
||||
], |
||||
lightConfigPowerVO: { |
||||
mac: [ |
||||
{ |
||||
required: true, |
||||
message: "请输入内容", |
||||
trigger: "blur", |
||||
}, |
||||
], |
||||
addr: [ |
||||
{ |
||||
required: true, |
||||
message: "请输入内容", |
||||
trigger: "blur", |
||||
}, |
||||
], |
||||
}, |
||||
// ywqipdz: [{ |
||||
// required: true, |
||||
// message: '请输入内容', |
||||
// trigger: 'blur' |
||||
// }], |
||||
// ttipdz: [{ |
||||
// required: true, |
||||
// message: '请输入内容', |
||||
// trigger: 'blur' |
||||
// }], |
||||
// httpdkh: [{ |
||||
// required: true, |
||||
// message: '请输入内容', |
||||
// trigger: 'blur' |
||||
// }], |
||||
// websocketdkh: [{ |
||||
// required: true, |
||||
// message: '请输入内容', |
||||
// trigger: 'blur' |
||||
// }], |
||||
area: [ |
||||
{ |
||||
required: true, |
||||
message: "请选择模型", |
||||
trigger: "change", |
||||
}, |
||||
], |
||||
// sb: [{ |
||||
// required: true, |
||||
// message: '请选择设备', |
||||
// trigger: 'change' |
||||
// }], |
||||
// sb2: [{ |
||||
// required: true, |
||||
// message: '请选择设备', |
||||
// trigger: 'change' |
||||
// }], |
||||
build: [ |
||||
{ |
||||
required: true, |
||||
message: "请选择区域", |
||||
trigger: "change", |
||||
}, |
||||
], |
||||
floored: [ |
||||
{ |
||||
required: true, |
||||
message: "请选择楼层", |
||||
trigger: "change", |
||||
}, |
||||
], |
||||
code: [ |
||||
{ |
||||
required: true, |
||||
message: "请输入内容", |
||||
trigger: "blur", |
||||
}, |
||||
], |
||||
name: [ |
||||
{ |
||||
required: true, |
||||
message: "请输入内容", |
||||
trigger: "blur", |
||||
}, |
||||
], |
||||
shortName: [ |
||||
{ |
||||
required: true, |
||||
message: "请输入内容", |
||||
trigger: "blur", |
||||
}, |
||||
], |
||||
brand: [ |
||||
{ |
||||
required: true, |
||||
message: "请输入内容", |
||||
trigger: "blur", |
||||
}, |
||||
], |
||||
useStartTime: [ |
||||
{ |
||||
type: "string", |
||||
required: true, |
||||
message: "请选择日期", |
||||
trigger: "change", |
||||
}, |
||||
], |
||||
location: [ |
||||
{ |
||||
required: true, |
||||
message: "请输入内容", |
||||
trigger: "blur", |
||||
}, |
||||
], |
||||
// tendingUser: [{ |
||||
// required: true, |
||||
// message: '请输入内容', |
||||
// trigger: 'blur' |
||||
// }], |
||||
// tendingPhone: [{ |
||||
// required: true, |
||||
// message: '请输入内容', |
||||
// trigger: 'blur' |
||||
// }], |
||||
// tendingTime: [{ |
||||
// required: true, |
||||
// message: '请输入内容', |
||||
// trigger: 'change' |
||||
// }], |
||||
}, |
||||
equipmentBox: false, |
||||
equipmentTit: "新增设备", |
||||
form: {}, |
||||
search: {}, |
||||
excelBox: false, |
||||
selectionList: [], |
||||
query: {}, |
||||
loading: true, |
||||
page: { |
||||
pageSize: 10, |
||||
currentPage: 1, |
||||
total: 0, |
||||
}, |
||||
treeDeptId: this.$route.query.classCode |
||||
? this.$route.query.classCode |
||||
: "", |
||||
treeData: [], |
||||
treeOption: { |
||||
nodeKey: "id", |
||||
lazy: true, |
||||
treeLoad: function (node, resolve) { |
||||
const parentId = node.level === 0 ? 0 : node.data.id; |
||||
getDeptLazyTree(parentId).then((res) => { |
||||
resolve( |
||||
res.data.data.map((item) => { |
||||
return { |
||||
...item, |
||||
leaf: !item.hasChildren, |
||||
}; |
||||
}) |
||||
); |
||||
}); |
||||
}, |
||||
addBtn: false, |
||||
menu: false, |
||||
size: "small", |
||||
props: { |
||||
labelText: "标题", |
||||
label: "title", |
||||
value: "value", |
||||
children: "children", |
||||
}, |
||||
}, |
||||
option: { |
||||
addBtn: false, |
||||
editBtn: false, |
||||
delBtn: false, |
||||
// height: 'auto', |
||||
// calcHeight: 80, |
||||
tip: false, |
||||
searchShow: true, |
||||
searchMenuSpan: 6, |
||||
border: true, |
||||
index: true, |
||||
selection: true, |
||||
viewBtn: false, |
||||
//dialogType: 'drawer', |
||||
dialogClickModal: false, |
||||
column: [ |
||||
{ |
||||
label: "设备种类", |
||||
prop: "className", |
||||
}, |
||||
{ |
||||
label: "设备名称", |
||||
prop: "name", |
||||
search: true, |
||||
}, |
||||
{ |
||||
label: "设备编号", |
||||
prop: "code", |
||||
}, |
||||
{ |
||||
label: "生产厂家", |
||||
prop: "brand", |
||||
}, |
||||
{ |
||||
label: "设备位置", |
||||
prop: "location", |
||||
search: true, |
||||
}, |
||||
{ |
||||
label: "状态", |
||||
prop: "statusName", |
||||
}, |
||||
{ |
||||
label: "投入使用时间", |
||||
prop: "useStartTime", |
||||
}, |
||||
{ |
||||
label: "固定资产编号", |
||||
prop: "inventarNummer", |
||||
}, |
||||
{ |
||||
label: "更新时间", |
||||
prop: "updateTime", |
||||
}, |
||||
], |
||||
}, |
||||
data: [], |
||||
excelForm: {}, |
||||
excelOption: { |
||||
submitBtn: false, |
||||
emptyBtn: false, |
||||
column: [ |
||||
{ |
||||
label: "模板上传", |
||||
prop: "excelFile", |
||||
type: "upload", |
||||
drag: true, |
||||
loadText: "模板上传中，请稍等", |
||||
span: 24, |
||||
propsHttp: { |
||||
res: "data", |
||||
}, |
||||
tip: "请上传 .xls,.xlsx 标准格式文件", |
||||
action: "/api/blade-user/import-user", |
||||
}, |
||||
{ |
||||
label: "数据覆盖", |
||||
prop: "isCovered", |
||||
type: "switch", |
||||
align: "center", |
||||
width: 80, |
||||
dicData: [ |
||||
{ |
||||
label: "否", |
||||
value: 0, |
||||
}, |
||||
{ |
||||
label: "是", |
||||
value: 1, |
||||
}, |
||||
], |
||||
value: 0, |
||||
slot: true, |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
message: "请选择是否覆盖", |
||||
trigger: "blur", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: "模板下载", |
||||
prop: "excelTemplate", |
||||
formslot: true, |
||||
span: 24, |
||||
}, |
||||
], |
||||
}, |
||||
imgList: [], |
||||
fileList: [], |
||||
}; |
||||
}, |
||||
watch: {}, |
||||
computed: { |
||||
// 勾选值处理 |
||||
ids() { |
||||
let ids = []; |
||||
this.selectionList.forEach((ele) => { |
||||
ids.push(ele.id); |
||||
}); |
||||
return ids.join(","); |
||||
}, |
||||
equipmentType() { |
||||
if (this.ruleForm.classCode) { |
||||
return this.ruleForm.classCode.slice(0, 2); |
||||
} |
||||
return null; |
||||
}, |
||||
}, |
||||
mounted() { |
||||
if (this.$route.query.code) { |
||||
getDetail({ equipCode: this.$route.query.code }).then((res) => { |
||||
console.log(res); |
||||
this.ruleForm = res.data.data; |
||||
this.equipmentBox = true; |
||||
this.eqiupType = "look"; |
||||
this.equipmentTit = "查看设备"; |
||||
}); |
||||
} |
||||
getDeptLazyTree2().then((res) => { |
||||
let data = res.data.data; |
||||
for (let i = 0; i < data.length; i++) { |
||||
data[i].key = data[i].key.length < 4 ? "0" + data[i].key : data[i].key; |
||||
if (data[i].hasChildren) { |
||||
for (let a = 0; a < data[i].children.length; a++) { |
||||
data[i].children[a].key = |
||||
data[i].children[a].key.length < 4 |
||||
? "0" + data[i].children[a].key |
||||
: data[i].children[a].key; |
||||
} |
||||
} |
||||
} |
||||
this.options = data; |
||||
}); |
||||
}, |
||||
methods: { |
||||
// 左侧属性结构点击 |
||||
nodeClick(data) { |
||||
this.treeDeptId = data.key; |
||||
this.page.currentPage = 1; |
||||
this.onLoad(this.page); |
||||
}, |
||||
// 清空搜索 |
||||
searchReset() { |
||||
this.query = {}; |
||||
this.treeDeptId = ""; |
||||
this.onLoad(this.page); |
||||
}, |
||||
// 点击搜索 |
||||
searchChange(params, done) { |
||||
this.query = params; |
||||
this.page.currentPage = 1; |
||||
this.onLoad(this.page, params); |
||||
done(); |
||||
}, |
||||
// 勾选时触发 获得勾选项 |
||||
selectionChange(list) { |
||||
this.selectionList = list; |
||||
}, |
||||
// 清除勾选项 初始化 |
||||
selectionClear() { |
||||
this.selectionList = []; |
||||
this.$refs.crud.toggleSelection(); |
||||
}, |
||||
// 图片上传成功 |
||||
handleSuccess(response, file, fileList) { |
||||
console.log(response); |
||||
if (response.code == 200) { |
||||
this.imgList.push(response.data.link); |
||||
} |
||||
console.log(this.imgList); |
||||
}, |
||||
beforeRemove(file, fileList) { |
||||
if (this.eqiupType == "look") { |
||||
return false; |
||||
} |
||||
}, |
||||
handleRemove(file, fileList) { |
||||
console.log(file); |
||||
if (file.response) { |
||||
this.imgList = this.imgList.filter( |
||||
(item) => item !== file.response.data.link |
||||
); |
||||
} else { |
||||
this.imgList = this.imgList.filter( |
||||
(item) => item !== file.url.slice(file.url) |
||||
); |
||||
} |
||||
console.log(this.imgList); |
||||
}, |
||||
// 点击删除 |
||||
handleDelete() { |
||||
if (this.selectionList.length === 0) { |
||||
this.$message.warning("请选择至少一条数据"); |
||||
return; |
||||
} |
||||
this.$confirm("确定将选择数据删除?", { |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning", |
||||
}) |
||||
.then(() => { |
||||
return remove(this.ids); |
||||
}) |
||||
.then(() => { |
||||
this.onLoad(this.page); |
||||
this.$message({ |
||||
type: "success", |
||||
message: "操作成功!", |
||||
}); |
||||
this.$refs.crud.toggleSelection(); |
||||
}); |
||||
}, |
||||
// 点击导入 |
||||
handleImport() { |
||||
this.excelBox = true; |
||||
}, |
||||
// 图片上传后的回调,function(res,done)，done用于结束操作，loading用于中断操作 |
||||
uploadAfter(res, done, loading, column) { |
||||
window.console.log(column); |
||||
this.excelBox = false; |
||||
this.refreshChange(); |
||||
done(); |
||||
}, |
||||
// 导出数据 |
||||
// handleExport() { |
||||
// this.$confirm("是否导出用户数据?", "提示", { |
||||
// confirmButtonText: "确定", |
||||
// cancelButtonText: "取消", |
||||
// type: "warning" |
||||
// }).then(() => { |
||||
// window.open( |
||||
// `/api/blade-user/export-user?${this.website.tokenHeader}=${getToken()}&account=${this.search.account}&realName=${this.search.realName}` |
||||
// ); |
||||
// }); |
||||
// }, |
||||
// 点击下载模板 |
||||
handleTemplate() { |
||||
window.open( |
||||
`/api/blade-user/export-template?${ |
||||
this.website.tokenHeader |
||||
}=${getToken()}` |
||||
); |
||||
}, |
||||
// 分页页码改变时会触发 |
||||
currentChange(currentPage) { |
||||
this.page.currentPage = currentPage; |
||||
}, |
||||
// pageSize改变时会触发 |
||||
sizeChange(pageSize) { |
||||
this.page.pageSize = pageSize; |
||||
}, |
||||
// 点击刷新按钮触发该事件 |
||||
refreshChange() { |
||||
this.onLoad(this.page, this.query); |
||||
}, |
||||
// 首次加载数据、查询、翻页方法 |
||||
onLoad(page, params = {}) { |
||||
this.loading = true; |
||||
console.log(this.treeDeptId); |
||||
getList( |
||||
page.currentPage, |
||||
page.pageSize, |
||||
Object.assign(params, this.query), |
||||
this.treeDeptId |
||||
).then((res) => { |
||||
const data = res.data.data; |
||||
this.page.total = data.total; |
||||
this.data = data.records; |
||||
this.loading = false; |
||||
this.selectionClear(); |
||||
}); |
||||
}, |
||||
// 新增编辑设备 |
||||
handleAdd(type, row) { |
||||
this.equipmentBox = true; |
||||
this.iDisabled = false; |
||||
this.eqiupType = type; |
||||
this.imgList = []; |
||||
this.fileList = []; |
||||
if (type == "add") { |
||||
// 新增 |
||||
this.equipmentTit = "新增设备"; |
||||
} else if (type == "edit") { |
||||
// 编辑 |
||||
this.equipmentTit = "编辑设备"; |
||||
|
||||
getDetails(row.id).then((res) => { |
||||
this.ruleForm = res.data.data; |
||||
console.log("data", this.ruleForm); |
||||
this.ruleForm.images.map((item) => { |
||||
this.fileList.push({ url: item.filePath }); |
||||
this.imgList.push(item.filePath); |
||||
}); |
||||
console.log("设备编辑", this.ruleForm); |
||||
getQy1(this.ruleForm.area).then((res) => { |
||||
this.build = res.data.data; |
||||
}); |
||||
// getLc(this.ruleForm.area).then(res => { |
||||
// this.floored = res.data.data; |
||||
// }); |
||||
}); |
||||
} else { |
||||
this.iDisabled = true; |
||||
// 查看 |
||||
this.equipmentTit = "查看设备"; |
||||
getDetails(row.id).then((res) => { |
||||
this.ruleForm = res.data.data; |
||||
this.ruleForm.images.map((item) => { |
||||
this.fileList.push({ url: item.filePath }); |
||||
this.imgList.push(item.filePath); |
||||
}); |
||||
getQy1(this.ruleForm.area).then((res) => { |
||||
this.build = res.data.data; |
||||
}); |
||||
// getLc(this.ruleForm.area).then(res => { |
||||
// this.floored = res.data.data; |
||||
// }); |
||||
}); |
||||
} |
||||
}, |
||||
chooseFloor(e) { |
||||
getLc1(Number(e)).then((res) => { |
||||
this.ruleForm.floored = null; |
||||
this.floored = res.data.data; |
||||
}); |
||||
}, |
||||
// 确定 |
||||
submitForm(formName) { |
||||
if (!this.ruleForm.classCode) { |
||||
this.$message({ |
||||
message: "请选择设备类型", |
||||
type: "warning", |
||||
}); |
||||
return; |
||||
} |
||||
if (!this.iDisabled) { |
||||
this.$refs[formName].validate((valid) => { |
||||
if (valid) { |
||||
// let data = [] |
||||
// if(this.imgList.length !== 0){ |
||||
// this.imgList.map(item =>{ |
||||
// data.push({ |
||||
// equipCode:this.ruleForm.code, |
||||
// filePath:item |
||||
// }) |
||||
// }) |
||||
// } |
||||
console.log(this.imgList); |
||||
let data = { |
||||
equipCode: this.ruleForm.code, |
||||
filepaths: this.imgList.join(","), |
||||
}; |
||||
console.log(data); |
||||
saveImg(data).then((res) => { |
||||
if (res.data.code == 200) { |
||||
add(this.ruleForm).then((res) => { |
||||
this.resetForm("ruleForm"); |
||||
this.page.currentPage = 1; |
||||
this.onLoad(this.page); |
||||
}); |
||||
} |
||||
}); |
||||
// }else{ |
||||
// add(this.ruleForm).then(res => { |
||||
// this.resetForm('ruleForm'); |
||||
// this.page.currentPage = 1; |
||||
// this.onLoad(this.page); |
||||
// }); |
||||
// } |
||||
} else { |
||||
return false; |
||||
} |
||||
}); |
||||
} else { |
||||
this.resetForm("ruleForm"); |
||||
} |
||||
}, |
||||
// 取消 |
||||
resetForm(formName) { |
||||
this.ruleForm = { |
||||
classCode: null, //设备类型 |
||||
// 通知设置 |
||||
warnVO: { |
||||
warnLevel: null, //报警级别 |
||||
notifier: null, //通知人 |
||||
}, |
||||
// 通讯设置 |
||||
electricConfig: { |
||||
ip: null, //ip地址 |
||||
port: null, //端口号 |
||||
offsetData: null, //数据偏移量 |
||||
offsetStatus: null, //状态偏移量 |
||||
}, |
||||
lightConfigPowerVO: { |
||||
mac: null, //设备号 |
||||
addr: null, //线路地址 |
||||
}, |
||||
thirdId: null, //第三方id |
||||
area: null, //模型 |
||||
build: null, //区域 |
||||
floored: null, //楼层 |
||||
// 基础配置 |
||||
code: null, //编码 |
||||
name: null, //名称 |
||||
shortName: null, //简称 |
||||
brand: null, //厂家 |
||||
useStartTime: null, //使用时间 |
||||
location: null, //具体位置 |
||||
}; |
||||
this.equipmentBox = false; |
||||
this.equipmentTit = "新增设备"; |
||||
this.$refs[formName].resetFields(); |
||||
this.$refs.cascaderClassroom.$refs.panel.clearCheckedNodes(); |
||||
this.$refs.cascaderClassroom.$refs.panel.activePath = []; |
||||
this.equipmentType = null; |
||||
}, |
||||
// 添加模型 |
||||
addModel(val) { |
||||
// console.log(row) |
||||
this.$router.replace({ |
||||
path: "/equipment/model", |
||||
query: { |
||||
row: val, |
||||
}, |
||||
}); // 只能用 name |
||||
}, |
||||
// 选择模型 |
||||
mxChange(val) { |
||||
this.ruleForm.build = null; |
||||
this.ruleForm.floored = null; |
||||
getQy1(this.ruleForm.area).then((res) => { |
||||
// console.log(res) |
||||
this.build = res.data.data; |
||||
}); |
||||
// getLc(this.ruleForm.area).then(res => { |
||||
// console.log(res) |
||||
// this.floored = res.data.data; |
||||
// }); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.box { |
||||
height: 800px; |
||||
} |
||||
|
||||
.el-scrollbar { |
||||
height: 100%; |
||||
} |
||||
|
||||
.box .el-scrollbar__wrap { |
||||
overflow: scroll; |
||||
} |
||||
|
||||
.floor { |
||||
.title { |
||||
font-size: 18px; |
||||
color: #303133; |
||||
padding-bottom: 5px; |
||||
border-bottom: 2px solid #e5e5e5; |
||||
margin: 0 0 20px 0; |
||||
} |
||||
} |
||||
|
||||
.btn { |
||||
margin-top: 50px; |
||||
} |
||||
/deep/.el-input { |
||||
width: 220px; |
||||
} |
||||
.hide { |
||||
/deep/ .el-upload--picture-card { |
||||
display: none; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,66 @@ |
||||
<template> |
||||
<div class="unit"> |
||||
<!-- <img :class="img == 'jiedian_red' ? 'fuwuyigua' : 'jiedianyigua'" src="../../../public/img/tuobu/fuwuyigua.png" alt=""> --> |
||||
<img class="img" :src="require(`../../../public/img/tuobu/${img}.png`)" alt=""> |
||||
<div class="text" :style="`left: ${left}px; top: ${top}px`">{{ text }}</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
props: { |
||||
img: { |
||||
type: String, |
||||
}, |
||||
text: { |
||||
type: String |
||||
}, |
||||
left: { |
||||
type: String |
||||
}, |
||||
top: { |
||||
type: String |
||||
} |
||||
}, |
||||
created() {}, |
||||
mounted() { |
||||
console.log('img', this.img, this.left, this.top) |
||||
}, |
||||
computed: { |
||||
|
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.unit{ |
||||
position: relative; |
||||
width: 100px; |
||||
.img{ |
||||
cursor: pointer; |
||||
} |
||||
.text{ |
||||
width: 120px; |
||||
position: absolute; |
||||
transform: skewY(-25deg); |
||||
} |
||||
.fuwuyigua{ |
||||
position: absolute; |
||||
top: -60px; |
||||
left: -10px; |
||||
} |
||||
.jiedianyigua{ |
||||
position: absolute; |
||||
top: -60px; |
||||
left: -25px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,50 @@ |
||||
<template> |
||||
<div class="unit"> |
||||
<img class="img" :src="require(`../../../public/img/tuobu/${img}.png`)" alt=""> |
||||
<div class="text">{{ text }}</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
props: { |
||||
img: { |
||||
type: String, |
||||
}, |
||||
text: { |
||||
type: String |
||||
}, |
||||
}, |
||||
created() {}, |
||||
mounted() { |
||||
console.log('img', this.img) |
||||
}, |
||||
computed: { |
||||
|
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.unit{ |
||||
position: relative; |
||||
width: 100px; |
||||
.img{ |
||||
|
||||
} |
||||
.text{ |
||||
width: 20px; |
||||
position: absolute; |
||||
top: 20px; |
||||
right: 0px; |
||||
} |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 369 B |
|
After Width: | Height: | Size: 665 B |
|
After Width: | Height: | Size: 585 B |
|
After Width: | Height: | Size: 684 B |
@ -0,0 +1,286 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<div class="search_box"> |
||||
<el-select class="search_select" placeholder="按服务类别查询"> |
||||
</el-select> |
||||
<el-input class="search_input" /> |
||||
<el-button class="search_button"> |
||||
<i class="el-icon-search"></i> |
||||
</el-button> |
||||
</div> |
||||
<div class="content_box1"> |
||||
<div class="content_title"> |
||||
<img src="./icon/icon1.png" alt="" /> |
||||
应用服务 |
||||
</div> |
||||
<div class="flexBox"> |
||||
<div |
||||
v-for="item in list" |
||||
:key="item.value" |
||||
class="itemBox" |
||||
:style="{ |
||||
borderColor: item.state ? '#dcdcdc' : '#e14b33', |
||||
background: item.state ? '' : '#FFF2F2 ', |
||||
}" |
||||
> |
||||
<div |
||||
class="item_title" |
||||
:style="{ color: item.state ? '' : '#E14B33 ' }" |
||||
> |
||||
权限服务 |
||||
</div> |
||||
<div |
||||
class="item_EnTitle" |
||||
:style="{ color: item.state ? '#999999' : '#E14B33 ' }" |
||||
> |
||||
AuthApplication |
||||
</div> |
||||
<div |
||||
class="color_block" |
||||
:style="{ background: item.state ? '#4fd069' : '#e14b33' }" |
||||
></div> |
||||
<div class="item_bottom"> |
||||
<div>状态</div> |
||||
<div :style="{ color: item.state ? '#26B843' : '#E14B33' }"> |
||||
{{ item.state ? "正常" : "服务已挂" }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="content_box2" style="margin-top: 30px; display: flex"> |
||||
<div |
||||
class="itemBox" |
||||
style="width: 240px; height: 216px; position: relative" |
||||
> |
||||
<div |
||||
class="item_title content_title" |
||||
style="position: absolute; left: 20px" |
||||
> |
||||
<img src="./icon/icon2.png" alt="" /> |
||||
Redis服务监控 |
||||
</div> |
||||
<div |
||||
style=" |
||||
width: 76px; |
||||
height: 76px; |
||||
background: #4fd069; |
||||
margin: 92px 0 14px 0; |
||||
" |
||||
></div> |
||||
<div class="item_bottom"> |
||||
<div>状态</div> |
||||
<div>正常</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
class="itemBox" |
||||
style=" |
||||
width: 240px; |
||||
height: 216px; |
||||
margin-left: 27px; |
||||
position: relative; |
||||
" |
||||
> |
||||
<div |
||||
class="item_title content_title" |
||||
style="position: absolute; left: 20px" |
||||
> |
||||
<img src="./icon/icon3.png" alt="" /> |
||||
数据库监控 |
||||
</div> |
||||
<div |
||||
style=" |
||||
width: 76px; |
||||
height: 76px; |
||||
background: #4fd069; |
||||
margin: 92px 0 14px 0; |
||||
" |
||||
></div> |
||||
<div class="item_bottom"> |
||||
<div>状态</div> |
||||
<div>正常</div> |
||||
</div> |
||||
</div> |
||||
<div class="content_box3"> |
||||
<div |
||||
class="item_title content_title" |
||||
style="height: 0; width: 100%; margin-bottom: 20px" |
||||
> |
||||
<img src="./icon/icon4.png" alt="" /> |
||||
系统硬件监控 |
||||
</div> |
||||
<div style="display: flex; max-width: 1280px"> |
||||
<div v-for="item in list2" :key="item.value" class="itemBox3"> |
||||
<div class="item_title">权限服务</div> |
||||
<div class="item_EnTitle">AuthApplication</div> |
||||
<div |
||||
style=" |
||||
width: 57px; |
||||
height: 76px; |
||||
background: #e8e8e8; |
||||
margin: 20px 0 14px 0; |
||||
position: relative; |
||||
" |
||||
> |
||||
<div |
||||
style=" |
||||
background: green; |
||||
width: 100%; |
||||
height: 33%; |
||||
position: absolute; |
||||
bottom: 0; |
||||
" |
||||
></div> |
||||
</div> |
||||
<div class="item_bottom"> |
||||
<div>状态</div> |
||||
<div>正常</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { color } from "echarts"; |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
list: [ |
||||
{ name: "应用服务", value: 1, state: 1 }, |
||||
{ name: "应用服务", value: 2, state: 1 }, |
||||
{ name: "应用服务", value: 3, state: 0 }, |
||||
{ name: "应用服务", value: 4, state: 1 }, |
||||
{ name: "应用服务", value: 5, state: 1 }, |
||||
{ name: "应用服务", value: 6, state: 1 }, |
||||
{ name: "应用服务", value: 7, state: 1 }, |
||||
{ name: "应用服务", value: 8, state: 1 }, |
||||
{ name: "应用服务", value: 9, state: 1 }, |
||||
{ name: "应用服务", value: 10, state: 0 }, |
||||
{ name: "应用服务", value: 11, state: 1 }, |
||||
{ name: "应用服务", value: 12, state: 1 }, |
||||
], |
||||
list2: [ |
||||
{ name: "应用服务", value: 1, state: 1 }, |
||||
{ name: "应用服务", value: 2, state: 1 }, |
||||
{ name: "应用服务", value: 3, state: 1 }, |
||||
{ name: "应用服务", value: 4, state: 1 }, |
||||
{ name: "应用服务", value: 5, state: 1 }, |
||||
], |
||||
}; |
||||
}, |
||||
watch: {}, |
||||
computed: {}, |
||||
mounted() {}, |
||||
methods: {}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.page { |
||||
padding: 30px 20px; |
||||
} |
||||
.search_box { |
||||
display: flex; |
||||
margin-bottom: 30px; |
||||
.search_select { |
||||
// width: 138px; |
||||
height: 40px; |
||||
} |
||||
.search_input { |
||||
width: 238px; |
||||
height: 40px; |
||||
margin: 0 14px; |
||||
} |
||||
/deep/.el-input__inner { |
||||
border-radius: 0; |
||||
} |
||||
.search_button { |
||||
width: 50px; |
||||
height: 40px; |
||||
border-radius: 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.el-icon-search { |
||||
font-size: 19px; |
||||
color: #c9c9c9; |
||||
} |
||||
} |
||||
} |
||||
.content_box1 { |
||||
border: 1px solid #dcdcdc; |
||||
height: 520px; |
||||
padding: 20px 0 0 20px; |
||||
} |
||||
.content_box3 { |
||||
padding: 20px; |
||||
flex: 1; |
||||
height: 178px; |
||||
border: 1px solid #dcdcdc; |
||||
} |
||||
.content_title { |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
display: flex; |
||||
align-items: center; |
||||
> img { |
||||
margin-right: 13px; |
||||
} |
||||
} |
||||
.flexBox { |
||||
display: flex; |
||||
margin-top: 20px; |
||||
flex-wrap: wrap; |
||||
} |
||||
.itemBox { |
||||
width: 200px; |
||||
height: 212px; |
||||
border: 1px solid #dcdcdc; |
||||
margin: 0 20px 30px 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
cursor: pointer; |
||||
.color_block { |
||||
width: 76px; |
||||
height: 76px; |
||||
margin: 20px 0 14px 0; |
||||
} |
||||
} |
||||
.itemBox3 { |
||||
width: 210px; |
||||
height: 154px; |
||||
border: 1px solid #dcdcdc; |
||||
margin: 0 20px 30px 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
} |
||||
.item_title { |
||||
font-weight: bold; |
||||
margin: 20px 0 2px 0; |
||||
} |
||||
.item_EnTitle { |
||||
font-size: 14px; |
||||
} |
||||
.item_bottom { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
> :nth-child(1) { |
||||
margin-left: 20px; |
||||
font-size: 12px; |
||||
color: #333333; |
||||
} |
||||
> :nth-child(2) { |
||||
margin-right: 20px; |
||||
font-size: 12px; |
||||
color: #26b843; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,396 @@ |
||||
<template> |
||||
<div class="content"> |
||||
<!-- 第一个 --> |
||||
<serverUnit class="server_1" :img="'server_img'" :text="'应用服务器'"></serverUnit> |
||||
<!-- 左边 --> |
||||
<img class="server_1_top_left" src="../../../public/img/tuobu/server_1_top_left.png" alt=""> |
||||
<div class="top_left_jiedian_box"> |
||||
<jiedian class="jiedian jiedian_1" :img="'jiedian_blue'" :text="'定时任务服务'" :left="'-15'" :top="'35'"></jiedian> |
||||
<jiedian class="jiedian jiedian_2" :img="'jiedian_blue'" :text="'系统服务'" :left="'0'" :top="'35'"></jiedian> |
||||
<jiedian class="jiedian jiedian_3" :img="'jiedian_blue'" :text="'websocke服务'" :left="'-15'" :top="'35'"></jiedian> |
||||
<jiedian class="jiedian jiedian_4" :img="'jiedian_blue'" :text="'门禁服务'" :left="'0'" :top="'35'"></jiedian> |
||||
<jiedian class="jiedian jiedian_5" :img="'jiedian_blue'" :text="'xxljob服务'" :left="'-5'" :top="'35'"></jiedian> |
||||
<jiedian class="jiedian jiedian_6" :img="'jiedian_blue'" :text="'用户服务'" :left="'0'" :top="'35'"></jiedian> |
||||
<jiedian class="jiedian jiedian_7" :img="'jiedian_blue'" :text="'权限服务'" :left="'0'" :top="'35'"></jiedian> |
||||
<jiedian class="jiedian jiedian_8" :img="'jiedian_blue'" :text="'网关服务'" :left="'0'" :top="'35'"></jiedian> |
||||
<jiedian class="jiedian jiedian_9" :img="'jiedian_blue'" :text="'应用服务'" :left="'0'" :top="'35'"></jiedian> |
||||
</div> |
||||
<img class="server_1_top_right" src="../../../public/img/tuobu/server_1_top_right.png" alt=""> |
||||
<img class="server_1_center_left" src="../../../public/img/tuobu/server_1_center_left.png" alt=""> |
||||
<img class="server_1_center_center" src="../../../public/img/tuobu/server_1_center_center.png" alt=""> |
||||
<img class="server_1_center_right" src="../../../public/img/tuobu/server_1_center_right.png" alt=""> |
||||
<div class="center_jiedian_box"> |
||||
<jiedian class="jiedian jiedian_1" :img="'jiedian_blue'" :text="'mqtt服务'" :left="'-33'"></jiedian> |
||||
<jiedian class="jiedian jiedian_2" :img="'jiedian_blue'" :text="'http服务'" :left="'-30'"></jiedian> |
||||
<jiedian class="jiedian jiedian_3" :img="'jiedian_blue'" :text="'modebus服务'" :left="'-30'"></jiedian> |
||||
</div> |
||||
<img class="server_1_bottom_center_left" src="../../../public/img/tuobu/server_1_bottom_center.png" alt=""> |
||||
<div class="bottom_jiedian_box_1"> |
||||
<jiedian class="jiedian jiedian_1" :img="'dut_img'" :text="'dut'" :left="'5'" :top="'20'"></jiedian> |
||||
</div> |
||||
<img class="server_1_bottom_left" src="../../../public/img/tuobu/server_1_bottom_left.png" alt=""> |
||||
<img class="server_1_bottom_item_1" src="../../../public/img/tuobu/server_1_bottom_item.png" alt=""> |
||||
<img class="server_1_bottom_item_2" src="../../../public/img/tuobu/server_1_bottom_item.png" alt=""> |
||||
<img class="server_1_bottom_item_3" src="../../../public/img/tuobu/server_1_bottom_item.png" alt=""> |
||||
<img class="server_1_bottom_item_4" src="../../../public/img/tuobu/server_1_bottom_item.png" alt=""> |
||||
<div class="bottom_left_jiedian_box"> |
||||
<jiedian class="jiedian jiedian_4" :img="'dianti_img'" :text="'电梯'" :left="'15'" :top="'110'"></jiedian> |
||||
<jiedian class="jiedian jiedian_3" :img="'xiaofang_img'" :text="'消防'" :left="'10'" :top="'75'"></jiedian> |
||||
<jiedian class="jiedian jiedian_2" :img="'nuanbiao_img'" :text="'暖表'" :left="'18'" :top="'40'"></jiedian> |
||||
<jiedian class="jiedian jiedian_1" :img="'shuibiao_img'" :text="'水表'" :left="'15'" :top="'40'"></jiedian> |
||||
</div> |
||||
<img class="server_1_bottom_center_4" src="../../../public/img/tuobu/server_1_bottom_center_4.png" alt=""> |
||||
<img class="server_1_bottom_center_1" src="../../../public/img/tuobu/server_1_bottom_center_1.png" alt=""> |
||||
<img class="server_1_bottom_center_2" src="../../../public/img/tuobu/server_1_bottom_center_2.png" alt=""> |
||||
<img class="server_1_bottom_center_3" src="../../../public/img/tuobu/server_1_bottom_center_3.png" alt=""> |
||||
<jiedian class="jiedian jiedian_haikang" :img="'haikang_img'" :text="'海康接口'" :left="'-15'" :top="'40'"></jiedian> |
||||
<jiedian class="jiedian jiedian_kongkai" :img="'kongkai_img'" :text="'空开'" :left="'5'" :top="'40'"></jiedian> |
||||
<jiedian class="jiedian jiedian_shexiangtou" :img="'shexiangtou_img'" :text="'摄像头'" :left="'5'" :top="'30'"></jiedian> |
||||
<img class="server_1_bottom_center_left_right" src="../../../public/img/tuobu/server_1_bottom_center.png" alt=""> |
||||
<jiedian class="jiedian jiedian_wangguan" :img="'wangguan_img'" :text="'网关'" :left="'-15'" :top="'30'"></jiedian> |
||||
<img class="server_1_right_center" src="../../../public/img/tuobu/server_1_right_center.png" alt=""> |
||||
<img class="server_1_right_center_left" src="../../../public/img/tuobu/server_1_right_center_left.png" alt=""> |
||||
<img class="server_1_right_center_right" src="../../../public/img/tuobu/server_1_right_center_right.png" alt=""> |
||||
<jiedian class="jiedian jiedian_kongtiao" :img="'kongtiao_img'" :text="'空调面板'" :left="'-10'" :top="'60'"></jiedian> |
||||
<jiedian class="jiedian jiedian_dianbiao" :img="'dianbiao_img'" :text="'电表'" :left="'5'" :top="'60'"></jiedian> |
||||
<!-- 第二个 --> |
||||
<serverUnit class="server_2" :img="'server_img'" :text="'应用服务器'"></serverUnit> |
||||
<img class="server_2_top_right" src="../../../public/img/tuobu/server_1_top_right.png" alt=""> |
||||
<jiedian class="jiedian jiedian_weilan" :img="'jiedian_blue'" :text="'电子围栏服务'" :left="'-33'"></jiedian> |
||||
<img class="server_2_center" src="../../../public/img/tuobu/server_1_right_center.png" alt=""> |
||||
<jiedian class="jiedian jiedian_dianziweilan" :img="'weilan_img'" :text="'电子围栏'" :left="'5'" :top="'130'"></jiedian> |
||||
<!-- 第三个 --> |
||||
<serverUnit class="server_3" :img="'server_img'" :text="'应用服务器'"></serverUnit> |
||||
<img class="server_3_top_right" src="../../../public/img/tuobu/server_1_top_right.png" alt=""> |
||||
<jiedian class="jiedian jiedian_loukong" :img="'jiedian_blue'" :text="'楼空服务'" :left="'-33'"></jiedian> |
||||
<img class="server_3_center" src="../../../public/img/tuobu/server_1_right_center.png" alt=""> |
||||
<img class="server_3_center_left" src="../../../public/img/tuobu/server_1_right_center_left.png" alt=""> |
||||
<img class="server_3_center_right" src="../../../public/img/tuobu/server_1_right_center_right.png" alt=""> |
||||
<jiedian class="jiedian jiedian_kongtiao_2" :img="'kongtiao_2_img'" :text="'空调'" :left="'5'" :top="'60'"></jiedian> |
||||
<jiedian class="jiedian jiedian_zhaoming" :img="'zhaoming_img'" :text="'照明'" :left="'35'" :top="'30'"></jiedian> |
||||
<!-- 第四个 --> |
||||
<serverUnit class="server_4" :img="'server_img'" :text="'应用服务器'"></serverUnit> |
||||
<img class="server_4_top_right" src="../../../public/img/tuobu/server_1_top_right.png" alt=""> |
||||
<div class="right_jiedian_box"> |
||||
<jiedian class="jiedian jiedian_1" :img="'jiedian_blue'" :text="'resdis服务监控'" :left="'0'" :top="'40'"></jiedian> |
||||
<jiedian class="jiedian jiedian_2" :img="'jiedian_blue'" :text="'数据库监控'" :left="'10'" :top="'40'"></jiedian> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import serverUnit from "./serverUnit.vue" |
||||
import jiedian from "./jiedian.vue" |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
components: { |
||||
serverUnit, |
||||
jiedian |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.content{ |
||||
padding: 20px !important; |
||||
width: calc(100% - 218px); |
||||
margin-left: 218px; |
||||
position: relative; |
||||
.server_1{ |
||||
position: absolute; |
||||
left: 400px; |
||||
} |
||||
.server_1_top_left{ |
||||
position: absolute; |
||||
left: 350px; |
||||
top: 150px; |
||||
} |
||||
.top_left_jiedian_box{ |
||||
position: relative; |
||||
top: 230px; |
||||
left: 0px; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
width: 300px; |
||||
.jiedian{ |
||||
height: 80px; |
||||
// cursor: pointer; |
||||
} |
||||
.jiedian_2{ |
||||
top: -55px; |
||||
} |
||||
.jiedian_3{ |
||||
top: -110px; |
||||
} |
||||
.jiedian_4{ |
||||
left: 55px; |
||||
} |
||||
.jiedian_5{ |
||||
left: 55px; |
||||
top: -55px; |
||||
} |
||||
.jiedian_6{ |
||||
left: 55px; |
||||
top: -110px; |
||||
} |
||||
.jiedian_7{ |
||||
left: 110px; |
||||
} |
||||
.jiedian_8{ |
||||
left: 110px; |
||||
top: -55px; |
||||
} |
||||
.jiedian_9{ |
||||
left: 110px; |
||||
top: -110px; |
||||
} |
||||
} |
||||
.server_1_top_right{ |
||||
position: absolute; |
||||
left: 450px; |
||||
top: 135px; |
||||
} |
||||
.center_jiedian_box{ |
||||
position: absolute; |
||||
left: 440px; |
||||
top: 345px; |
||||
display: flex; |
||||
.jiedian_2{ |
||||
top: -55px; |
||||
left: 5px; |
||||
} |
||||
.jiedian_3{ |
||||
top: -110px; |
||||
} |
||||
} |
||||
.server_1_center_left{ |
||||
position: absolute; |
||||
left: 427px; |
||||
top: 290px; |
||||
} |
||||
.server_1_center_center{ |
||||
position: absolute; |
||||
left: 538px; |
||||
top: 292px; |
||||
} |
||||
.server_1_center_right{ |
||||
position: absolute; |
||||
left: 533px; |
||||
top: 238px; |
||||
} |
||||
.server_1_bottom_center_left{ |
||||
position: absolute; |
||||
left: 470px; |
||||
top: 388px; |
||||
} |
||||
.bottom_jiedian_box_1{ |
||||
position: absolute; |
||||
top: 460px; |
||||
left: 490px; |
||||
} |
||||
.server_1_bottom_left{ |
||||
position: absolute; |
||||
top: 480px; |
||||
left: 220px; |
||||
} |
||||
.server_1_bottom_item_1{ |
||||
position: absolute; |
||||
top: 515px; |
||||
left: 405px; |
||||
} |
||||
.server_1_bottom_item_2{ |
||||
position: absolute; |
||||
top: 546px; |
||||
left: 346px; |
||||
} |
||||
.server_1_bottom_item_3{ |
||||
position: absolute; |
||||
top: 577px; |
||||
left: 287px; |
||||
} |
||||
.server_1_bottom_item_4{ |
||||
position: absolute; |
||||
top: 614px; |
||||
left: 220px; |
||||
} |
||||
.bottom_left_jiedian_box{ |
||||
position: absolute; |
||||
top: 530px; |
||||
left: 140px; |
||||
display: flex; |
||||
.jiedian_2{ |
||||
top: 30px; |
||||
left: 35px; |
||||
} |
||||
.jiedian_3{ |
||||
top: 63px; |
||||
left: 80px; |
||||
} |
||||
.jiedian_4{ |
||||
top: 95px; |
||||
left: 100px; |
||||
} |
||||
} |
||||
.server_1_bottom_center_4{ |
||||
position: absolute; |
||||
top: 333px; |
||||
left: 576px; |
||||
} |
||||
.server_1_bottom_center_1{ |
||||
position: absolute; |
||||
top: 419px; |
||||
left: 576px; |
||||
} |
||||
.server_1_bottom_center_2{ |
||||
position: absolute; |
||||
top: 419px; |
||||
left: 579px; |
||||
} |
||||
.server_1_bottom_center_3{ |
||||
position: absolute; |
||||
top: 460px; |
||||
left: 620px; |
||||
} |
||||
.jiedian_haikang{ |
||||
position: absolute; |
||||
top: 425px; |
||||
left: 600px; |
||||
} |
||||
.jiedian_kongkai{ |
||||
position: absolute; |
||||
top: 590px; |
||||
left: 590px; |
||||
} |
||||
.jiedian_shexiangtou{ |
||||
position: absolute; |
||||
top: 570px; |
||||
left: 645px; |
||||
} |
||||
.server_1_bottom_center_left_right{ |
||||
position: absolute; |
||||
top: 278px; |
||||
left: 670px; |
||||
} |
||||
.jiedian_wangguan{ |
||||
position: absolute; |
||||
left: 693px; |
||||
top: 350px; |
||||
} |
||||
.server_1_right_center{ |
||||
position: absolute; |
||||
top: 388px; |
||||
left: 710px; |
||||
} |
||||
.server_1_right_center_left{ |
||||
position: absolute; |
||||
top: 437px; |
||||
left: 700px; |
||||
} |
||||
.server_1_right_center_right{ |
||||
position: absolute; |
||||
top: 418px; |
||||
left: 745px; |
||||
} |
||||
.jiedian_kongtiao{ |
||||
position: absolute; |
||||
left: 725px; |
||||
top: 470px; |
||||
} |
||||
.jiedian_dianbiao{ |
||||
position: absolute; |
||||
left: 795px; |
||||
top: 421px; |
||||
} |
||||
|
||||
.server_2{ |
||||
position: absolute; |
||||
left: 750px; |
||||
top: 20px; |
||||
} |
||||
.server_2_top_right{ |
||||
position: absolute; |
||||
left: 790px; |
||||
top: 140px; |
||||
} |
||||
.jiedian_weilan{ |
||||
position: absolute; |
||||
left: 850px; |
||||
top: 293px; |
||||
} |
||||
.server_2_center{ |
||||
position: absolute; |
||||
top: 335px; |
||||
left: 892px; |
||||
} |
||||
.jiedian_dianziweilan{ |
||||
position: absolute; |
||||
left: 885px; |
||||
top: 360px; |
||||
} |
||||
|
||||
.server_3{ |
||||
position: absolute; |
||||
left: 1000px; |
||||
top: 20px; |
||||
} |
||||
.server_3_top_right{ |
||||
position: absolute; |
||||
left: 1040px; |
||||
top: 140px; |
||||
} |
||||
.jiedian_loukong{ |
||||
position: absolute; |
||||
left: 1100px; |
||||
top: 293px; |
||||
} |
||||
.server_3_center{ |
||||
position: absolute; |
||||
top: 335px; |
||||
left: 1142px; |
||||
} |
||||
.server_3_center_left{ |
||||
position: absolute; |
||||
top: 385px; |
||||
left: 1129px; |
||||
} |
||||
.server_3_center_right{ |
||||
position: absolute; |
||||
top: 365px; |
||||
left: 1175px; |
||||
} |
||||
.jiedian_kongtiao_2{ |
||||
position: absolute; |
||||
left: 1150px; |
||||
top: 420px; |
||||
} |
||||
.jiedian_zhaoming{ |
||||
position: absolute; |
||||
left: 1210px; |
||||
top: 362px; |
||||
} |
||||
|
||||
.server_4{ |
||||
position: absolute; |
||||
left: 1250px; |
||||
top: 20px; |
||||
} |
||||
.server_4_top_right{ |
||||
position: absolute; |
||||
left: 1290px; |
||||
top: 140px; |
||||
} |
||||
.right_jiedian_box{ |
||||
position: absolute; |
||||
left: 1310px; |
||||
top: 310px; |
||||
display: flex; |
||||
.jiedian_2{ |
||||
top: -60px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue