代码提交
This commit is contained in:
commit
83173910ab
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
33
src/App.vue
33
src/App.vue
|
|
@ -28,7 +28,8 @@
|
|||
<div class="menu">
|
||||
<div class="menuList">
|
||||
<div class="menuBtn" v-for="(item, index) in menuBtn" :key="index" @click="menuChange(index)" :class="{menuAc : menuAc == index}">
|
||||
<img :src="item.icon" style="width: 35%; height: 54%" />
|
||||
<img :src="item.icon" style="width: 55%;
|
||||
height: 71%;" />
|
||||
<div style="font-size: 0.55rem">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -104,6 +105,7 @@ import {getData} from './api/index.js'
|
|||
},
|
||||
],
|
||||
menuAc:0, //菜单点击
|
||||
timer:null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -125,10 +127,9 @@ import {getData} from './api/index.js'
|
|||
document.documentElement.clientWidth ||
|
||||
document.body.clientWidth),
|
||||
(that.screenWidth = window.screenWidth);
|
||||
that.fun();
|
||||
that.fun();
|
||||
});
|
||||
};
|
||||
|
||||
},
|
||||
methods:{
|
||||
//菜单选中
|
||||
|
|
@ -158,13 +159,16 @@ import {getData} from './api/index.js'
|
|||
this.$router.push('court')
|
||||
}else if (index == 2) {
|
||||
this.menuBtn[index].icon = require("./assets/images/jieNengAc.png")
|
||||
this.$router.push('energy')
|
||||
this.$router.push('energySaving')
|
||||
}else if (index == 3) {
|
||||
this.menuBtn[index].icon = require("./assets/images/anFangAc.png")
|
||||
this.$router.push('security')
|
||||
}else if (index == 4) {
|
||||
this.menuBtn[index].icon = require("./assets/images/yunWeiAc.png")
|
||||
this.$router.push('operationMaintenance')
|
||||
}else if (index == 5) {
|
||||
this.menuBtn[index].icon = require("./assets/images/gaoJingAc.png")
|
||||
this.$router.push('alarm')
|
||||
}
|
||||
},
|
||||
//选中楼层
|
||||
|
|
@ -200,7 +204,7 @@ import {getData} from './api/index.js'
|
|||
<style lang="less">
|
||||
/*将大屏设置为1920*1080,设置缩放的方向*/
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
font-family:'微软雅黑' ;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
|
|
@ -208,16 +212,17 @@ import {getData} from './api/index.js'
|
|||
height: 1080px;
|
||||
transition: all 0.2s linear;
|
||||
transform-origin: left top;
|
||||
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
#app {
|
||||
// width: 6144px;
|
||||
// height: 1920px;
|
||||
background: rgba(1, 1, 7, 0.7);
|
||||
background: rgba(1, 1, 7, 1);
|
||||
// overflow: hidden;
|
||||
.header {
|
||||
height: 10%;
|
||||
height: 15%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -287,7 +292,7 @@ import {getData} from './api/index.js'
|
|||
}
|
||||
.menu {
|
||||
width: 100%;
|
||||
height: 7%;
|
||||
height: 12%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
|
@ -304,8 +309,10 @@ import {getData} from './api/index.js'
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
.menuBtn {
|
||||
// width: 15%;
|
||||
// height: 100%;
|
||||
width: 15%;
|
||||
height: 100%;
|
||||
height: 61%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -314,8 +321,10 @@ import {getData} from './api/index.js'
|
|||
}
|
||||
.menuAc{
|
||||
color: rgb(0,229,189);
|
||||
width: 15%;
|
||||
height: 100%;
|
||||
// width: 15%;
|
||||
// height: 100%;
|
||||
width: 15%;
|
||||
height: 61%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -324,7 +333,7 @@ import {getData} from './api/index.js'
|
|||
}
|
||||
}
|
||||
.content {
|
||||
height: calc(100% - 10%);
|
||||
height: calc(100% - 15%);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 405 B |
Binary file not shown.
|
After Width: | Height: | Size: 515 B |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 911 B |
Binary file not shown.
|
After Width: | Height: | Size: 313 B |
Binary file not shown.
|
After Width: | Height: | Size: 421 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 829 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 517 B |
Binary file not shown.
|
After Width: | Height: | Size: 426 B |
Binary file not shown.
|
After Width: | Height: | Size: 438 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -29,10 +29,29 @@ export default new Router({
|
|||
name: 'court',
|
||||
component: () => import ('./views/court.vue'),
|
||||
},
|
||||
//智慧节能
|
||||
{
|
||||
path: '/energy',
|
||||
name: 'energy',
|
||||
component: () => import ('./views/energy.vue'),
|
||||
},
|
||||
path: '/energySaving',
|
||||
name: 'energySaving',
|
||||
component: () => import ('./views/energySaving.vue'),
|
||||
},
|
||||
//智慧安防
|
||||
{
|
||||
path: '/security',
|
||||
name: 'security',
|
||||
component: () => import ('./views/security.vue'),
|
||||
},
|
||||
//智慧运维
|
||||
{
|
||||
path: '/operationMaintenance',
|
||||
name: 'operationMaintenance',
|
||||
component: () => import ('./views/operationMaintenance.vue'),
|
||||
},
|
||||
//告警管理
|
||||
{
|
||||
path: '/alarm',
|
||||
name: 'alarm',
|
||||
component: () => import ('./views/alarm.vue'),
|
||||
},
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,176 @@
|
|||
<template>
|
||||
<div class="courtMain">
|
||||
<div class="left">
|
||||
<div class="leftOne">
|
||||
<div class="title">告警管理</div>
|
||||
<div class="courtHouse">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="leftTwo">
|
||||
<div class="caseTitle">
|
||||
|
||||
</div>
|
||||
<div id="caseEcharts"></div>
|
||||
</div>
|
||||
<div class="leftThree"></div>
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "court",
|
||||
data() {
|
||||
return {
|
||||
courtList: [
|
||||
{
|
||||
name: "空闲中",
|
||||
count: "7",
|
||||
},
|
||||
{
|
||||
name: "已开庭",
|
||||
count: "15",
|
||||
},
|
||||
{
|
||||
name: "已预约",
|
||||
count: "17",
|
||||
},
|
||||
{
|
||||
name: "法官办公室",
|
||||
count: "86",
|
||||
},
|
||||
], // 智慧法庭小房子
|
||||
houseList: ["blueHouse", "redHouse", "yellowHouse","orangeHouse"],
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
watch: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@fontsize: 0.6rem;
|
||||
.courtMain {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 0.3% 0 0.3%;
|
||||
box-sizing: border-box;
|
||||
.left {
|
||||
width: 25.5%;
|
||||
height: 95%;
|
||||
padding: 0.5% 0.3% 1% 0.3%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.leftOne {
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
.courtHouse {
|
||||
height: calc(100% - 30%);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.courtData{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 85%;
|
||||
width: 12%;
|
||||
.blueHouse {
|
||||
background: url(../assets/images/blueHouse.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10%;
|
||||
}
|
||||
.redHouse {
|
||||
background: url(../assets/images/redHouse.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10%;
|
||||
}
|
||||
.yellowHouse {
|
||||
background: url(../assets/images/yellowHouse.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10%;
|
||||
}
|
||||
.orangeHouse {
|
||||
background: url(../assets/images/orangeHouse.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.leftTwo {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
position: relative;
|
||||
#caseEcharts{
|
||||
width: 100%;
|
||||
height: calc(100% - 16%);
|
||||
border: 1px solid blue;
|
||||
}
|
||||
}
|
||||
.leftThree {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
border: 1px solid white;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 25.5%;
|
||||
height: 95%;
|
||||
padding: 0.5% 0.3% 1% 0.3%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background: url("../assets/images/title.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
font-size: 0.7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 12%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.caseTitle{
|
||||
width: 23%;
|
||||
height: 10%;
|
||||
background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 5%;
|
||||
box-sizing: border-box;
|
||||
margin-top: 2%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<template>
|
||||
<div class="energy">
|
||||
<div class="left">
|
||||
<div class="leftOne"></div>
|
||||
<div class="leftTwo"></div>
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "energy",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.energy {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 0.3% 0 0.3%;
|
||||
box-sizing: border-box;
|
||||
.left {
|
||||
width: 24.7%;
|
||||
height: 95%;
|
||||
padding: 0.5% 0.3% 1% 0.3%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.leftOne{
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
border: 1px solid red;
|
||||
}
|
||||
.leftTwo{
|
||||
width: 100%;
|
||||
height: calc(100% - 35%);
|
||||
border: 1px solid green;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 24.7%;
|
||||
height: 95%;
|
||||
padding: 0.5% 0.3% 1% 0.3%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,665 @@
|
|||
<template>
|
||||
<div class="energy">
|
||||
<div class="left">
|
||||
<div class="leftOne">
|
||||
<div class="title">设备用能统计数据</div>
|
||||
<div class="equipment">
|
||||
<div
|
||||
class="equipmentEnergy"
|
||||
v-for="(item, index) in equipmentList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="equipmentList">
|
||||
<span>{{ item.count }}</span>
|
||||
<span style="color: rgb(225, 177, 25); font-size: 0.4rem"
|
||||
>KWH</span
|
||||
>
|
||||
</div>
|
||||
<div class="equipmentName">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="leftTwo">
|
||||
<div class="title" style="height: 8%">设备预警信息列表</div>
|
||||
<div class="equipmentWarning">
|
||||
<div class="equipmentBtn">
|
||||
<div
|
||||
class="equipmentBtnList"
|
||||
v-for="(item, index) in equipmentBtnList"
|
||||
:key="index"
|
||||
:class="{ equipmentBtnAc: equipmentBtnAc == index }"
|
||||
@click="changeWarn(index)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="equipmentWarnList">
|
||||
<div
|
||||
class="warnList"
|
||||
v-for="(item, index) in warnList"
|
||||
:key="index"
|
||||
>
|
||||
<span>{{ item.id }}</span>
|
||||
<img :src="item.icon" />
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 65%;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
"
|
||||
>报警时间:<span style="margin-left: 5%">{{
|
||||
item.time
|
||||
}}</span></span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
margin-top: 3%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
"
|
||||
>报警原因:<span style="color: red; margin-left: 5%">{{
|
||||
item.case
|
||||
}}</span></span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
margin-top: 3%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
"
|
||||
>报警等级:<span style="color: red; margin-left: 5%">{{
|
||||
item.grade
|
||||
}}</span></span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rightOne">
|
||||
<div class="title">能耗计量分析</div>
|
||||
<div id="calculateEcharts"></div>
|
||||
</div>
|
||||
<div class="rightTwo">
|
||||
<div class="title">太阳能光伏发电系统数据</div>
|
||||
<div class="sun">
|
||||
<div class="sunList" v-for="(item, index) in sunList" :key="index">
|
||||
<img :src="item.icon" />
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-left: 5%;
|
||||
"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
<span style="margin-top: 5%"
|
||||
>{{ item.count }} <span
|
||||
style="color: rgb(225, 177, 25)"
|
||||
>{{ item.unit }}</span
|
||||
></span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightThree">
|
||||
<div class="title" style="height: 16%">视频联动</div>
|
||||
<div class="video">
|
||||
<img
|
||||
src="../assets/images/camera.png"
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "energySaving",
|
||||
data() {
|
||||
return {
|
||||
equipmentList: [
|
||||
{
|
||||
name: "热回收机组1",
|
||||
count: "28.4",
|
||||
},
|
||||
{
|
||||
name: "热回收机组2",
|
||||
count: "28.4",
|
||||
},
|
||||
{
|
||||
name: "热回收机组3",
|
||||
count: "28.4",
|
||||
},
|
||||
{
|
||||
name: "热回收机组4",
|
||||
count: "28.4",
|
||||
},
|
||||
{
|
||||
name: "热回收机组5",
|
||||
count: "28.4",
|
||||
},
|
||||
{
|
||||
name: "热回收机组6",
|
||||
count: "28.4",
|
||||
},
|
||||
{
|
||||
name: "热回收机组7",
|
||||
count: "28.4",
|
||||
},
|
||||
{
|
||||
name: "热回收机组8",
|
||||
count: "28.4",
|
||||
},
|
||||
{
|
||||
name: "热回收机组9",
|
||||
count: "28.4",
|
||||
},
|
||||
], //设备用能数据
|
||||
equipmentBtnList: [
|
||||
{
|
||||
name: "电梯系统",
|
||||
},
|
||||
{
|
||||
name: "光伏发电系统",
|
||||
},
|
||||
{
|
||||
name: "多联空调系统",
|
||||
},
|
||||
{
|
||||
name: "恒温恒湿空调",
|
||||
},
|
||||
{
|
||||
name: "热回收空调",
|
||||
},
|
||||
],
|
||||
equipmentBtnAc: "", //点击预警
|
||||
warnList: [
|
||||
{
|
||||
id: "1",
|
||||
icon: require("../assets/images/jieNengImg/warnRed.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
case: "设备故障",
|
||||
grade: "三级",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
icon: require("../assets/images/jieNengImg/warnBlue.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
case: "设备故障",
|
||||
grade: "三级",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
icon: require("../assets/images/jieNengImg/warnWhite.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
case: "设备故障",
|
||||
grade: "三级",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
icon: require("../assets/images/jieNengImg/warnRed.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
case: "设备故障",
|
||||
grade: "三级",
|
||||
},
|
||||
], //故障数组
|
||||
sunList: [
|
||||
{
|
||||
name: "今日发电量",
|
||||
icon: require("../assets/images/jieNengImg/energy.png"),
|
||||
count: "35.2",
|
||||
unit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "总发电量",
|
||||
icon: require("../assets/images/jieNengImg/energy.png"),
|
||||
count: "35.2",
|
||||
unit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "有功功率",
|
||||
icon: require("../assets/images/jieNengImg/power.png"),
|
||||
count: "35.2",
|
||||
unit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "运行状态",
|
||||
icon: require("../assets/images/jieNengImg/runStatus.png"),
|
||||
count: "正常",
|
||||
unit: "",
|
||||
},
|
||||
{
|
||||
name: "运行时间",
|
||||
icon: require("../assets/images/jieNengImg/runTime.png"),
|
||||
count: "35.2",
|
||||
unit: "h",
|
||||
},
|
||||
{
|
||||
name: "运行状态",
|
||||
icon: require("../assets/images/jieNengImg/warning.png"),
|
||||
count: "无",
|
||||
unit: "",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.calculateEcharts();
|
||||
},
|
||||
methods: {
|
||||
//预警点击
|
||||
changeWarn(index) {
|
||||
this.equipmentBtnAc = index;
|
||||
},
|
||||
calculateEcharts() {
|
||||
let imgSrc = "/img/car.png";
|
||||
let chartData = [
|
||||
{
|
||||
value: 42,
|
||||
name: "空调",
|
||||
},
|
||||
{
|
||||
value: 24,
|
||||
name: "动力",
|
||||
},
|
||||
{
|
||||
value: 13,
|
||||
name: "插座",
|
||||
},
|
||||
{
|
||||
value: 48,
|
||||
name: "特种",
|
||||
},
|
||||
];
|
||||
let colorList = [
|
||||
"red",
|
||||
"rgb(255,122,0)",
|
||||
"rgb(0,213,243)",
|
||||
"rgb(219,241,243)",
|
||||
];
|
||||
let sum = chartData.reduce((per, cur) => per + cur.value, 0);
|
||||
let gap = (1 * sum) / 100;
|
||||
let pieData1 = [];
|
||||
let pieData2 = [];
|
||||
let gapData = {
|
||||
name: "",
|
||||
value: gap,
|
||||
itemStyle: {
|
||||
color: "transparent",
|
||||
},
|
||||
};
|
||||
for (let i = 0; i < chartData.length; i++) {
|
||||
// 第一圈数据
|
||||
pieData1.push({
|
||||
...chartData[i],
|
||||
itemStyle: {
|
||||
borderRadius: 0,
|
||||
},
|
||||
});
|
||||
pieData1.push(gapData);
|
||||
|
||||
// 第二圈数据
|
||||
pieData2.push({
|
||||
...chartData[i],
|
||||
itemStyle: {
|
||||
color: colorList[i],
|
||||
opacity: 0.1,
|
||||
},
|
||||
});
|
||||
pieData2.push(gapData);
|
||||
}
|
||||
var myChart = this.$echarts.init(
|
||||
document.getElementById("calculateEcharts")
|
||||
);
|
||||
|
||||
let option = {
|
||||
tooltip: {
|
||||
show: false,
|
||||
backgroundColor: "rgba(17,95,234,0.5)",
|
||||
textStyle: {
|
||||
color: "#F0F0F0",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
right: "10%",
|
||||
top: "center",
|
||||
|
||||
icon: "rect",
|
||||
itemWidth: 15,
|
||||
itemHeight: 15,
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
color: "auto",
|
||||
rich: {
|
||||
name: {
|
||||
padding: [0, 10, 0, 8],
|
||||
color: "auto",
|
||||
fontSize: "0.8rem",
|
||||
},
|
||||
percent: {
|
||||
padding: [0, 0, 0, 8],
|
||||
color: "auto",
|
||||
},
|
||||
},
|
||||
},
|
||||
formatter: (name) => {
|
||||
let item = chartData.find((i) => {
|
||||
return i.name == name;
|
||||
});
|
||||
let p = ((item.value / sum) * 100).toFixed(0);
|
||||
return "{name|" + name + "}" + "{percent|" + p + "}" + "%";
|
||||
},
|
||||
},
|
||||
graphic: {
|
||||
elements: [
|
||||
{
|
||||
type: "image",
|
||||
z: 3,
|
||||
style: {
|
||||
image: imgSrc,
|
||||
width: 30,
|
||||
height: 30,
|
||||
},
|
||||
top: "middle",
|
||||
left: "25%",
|
||||
scale: [1.5, 1.5],
|
||||
},
|
||||
],
|
||||
},
|
||||
grid: {
|
||||
top: 35,
|
||||
right: 30,
|
||||
bottom: 20,
|
||||
left: 30,
|
||||
},
|
||||
color: colorList,
|
||||
series: [
|
||||
{
|
||||
name: "消息来源",
|
||||
type: "pie",
|
||||
// roundCap: true,
|
||||
radius: ["70%", "80%"],
|
||||
center: ["30%", "50%"],
|
||||
// avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: pieData1,
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["70%", "60%"],
|
||||
center: ["30%", "50%"],
|
||||
gap: 1.71,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
silent: true,
|
||||
data: pieData2,
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
center: ["30%", "50%"],
|
||||
radius: [0, "45.6%"],
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(5,37,95,0.3)",
|
||||
},
|
||||
silent: true,
|
||||
data: [
|
||||
{
|
||||
value: 100,
|
||||
name: "",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
detail: false,
|
||||
splitNumber: 10, //刻度数量
|
||||
radius: "65%", //图表尺寸
|
||||
center: ["30%", "50%"],
|
||||
startAngle: 0, //开始刻度的角度
|
||||
endAngle: -356, //结束刻度的角度
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
width: 0,
|
||||
shadowBlur: 0,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
width: 1,
|
||||
},
|
||||
length: 2,
|
||||
splitNumber: 3,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
length: 5,
|
||||
lineStyle: {
|
||||
color: "#194482",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.energy {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 0.3% 0 0.3%;
|
||||
box-sizing: border-box;
|
||||
.left {
|
||||
width: 24.7%;
|
||||
height: 95%;
|
||||
padding: 0.5% 0.3% 1% 0.3%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.leftOne {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
.equipment {
|
||||
height: calc(100% - 14%);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: auto;
|
||||
.equipmentEnergy {
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
.equipmentList {
|
||||
width: 100%%;
|
||||
height: 80%;
|
||||
background: url("../assets/images/jieNengImg/energyBack.png")
|
||||
no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.equipmentName {
|
||||
height: calc(100% - 80%);
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.leftTwo {
|
||||
width: 100%;
|
||||
height: calc(100% - 35%);
|
||||
.equipmentWarning {
|
||||
height: calc(100% - 8%);
|
||||
width: 100%;
|
||||
.equipmentBtn {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
.equipmentBtnList {
|
||||
width: 26.4%;
|
||||
height: 29%;
|
||||
background: url("../assets/images/jieNengImg/eqBtn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 6%;
|
||||
}
|
||||
.equipmentBtnAc {
|
||||
width: 26.4%;
|
||||
height: 29%;
|
||||
background: url("../assets/images/jieNengImg/eqBtnAc.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: rgb(225, 177, 25);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 6%;
|
||||
}
|
||||
}
|
||||
.equipmentWarnList {
|
||||
width: 100%;
|
||||
height: calc(100% - 30%);
|
||||
overflow: auto;
|
||||
.warnList {
|
||||
height: 32%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding-right: 20%;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 24.7%;
|
||||
height: 95%;
|
||||
padding: 0.5% 0.3% 0.5% 0.3%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.rightOne {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
#calculateEcharts {
|
||||
width: 100%;
|
||||
height: calc(100% - 14%);
|
||||
}
|
||||
}
|
||||
.rightTwo {
|
||||
width: 100%;
|
||||
height: 37%;
|
||||
.sun {
|
||||
width: 100%;
|
||||
height: calc(100% - 14%);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.sunList {
|
||||
width: 40%;
|
||||
height: 25%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rightThree {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.video {
|
||||
height: calc(100% - 23%);
|
||||
width: 98%;
|
||||
border: 3px solid rgb(1, 176, 202);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 14%;
|
||||
background: url("../assets/images/title.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 12%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,531 @@
|
|||
<template>
|
||||
<div class="operationMaintenance">
|
||||
<div class="left">
|
||||
<div class="title">工单管理</div>
|
||||
<div class="workOrder">
|
||||
<div class="todayCount">
|
||||
<div
|
||||
style="width: 100%; display: flex; justify-content: space-evenly"
|
||||
>
|
||||
<span>今日报警: 10</span>
|
||||
<span
|
||||
>同比昨日:<img
|
||||
src="../assets/images/gongDan/greenJian.png"
|
||||
/> 0.5</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
style="width: 100%; display: flex; justify-content: space-evenly"
|
||||
>
|
||||
<span>今日工单: 10</span>
|
||||
<span
|
||||
>同比昨日:<img
|
||||
src="../assets/images/gongDan/redJian.png"
|
||||
/> 0.5</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="workCount">
|
||||
<div style="font-size: 0.8rem">本月工单数</div>
|
||||
<div id="workOrderEcharts"></div>
|
||||
</div>
|
||||
<div class="workList">
|
||||
<div class="workContent" v-for="(item, index) in workList" :key="index">
|
||||
<span>{{ item.name }}</span>
|
||||
<span style="color: rgb(9, 196, 217); font-size: 1rem">{{
|
||||
item.count
|
||||
}}</span>
|
||||
<span>今日总响应超时工单数：{{ item.toDayCount }}</span>
|
||||
<span>今日总响应超时时长：{{ item.toDayTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="title">工单管理</div>
|
||||
<div class="selectList">
|
||||
<div
|
||||
class="selectChange"
|
||||
v-for="(item, index) in selectList"
|
||||
:key="index"
|
||||
>
|
||||
<el-select
|
||||
v-model="item.name"
|
||||
:popper-append-to-body="false"
|
||||
clearable
|
||||
:placeholder="item.name"
|
||||
style="margin-left: 5%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in item.list"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="workOrderList">
|
||||
<div class="workContent">
|
||||
<div
|
||||
class="workContentList"
|
||||
v-for="(item, index) in distributeLeafletsList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="distributeLeaflets">
|
||||
<span>{{ item.id }} 派单时间:</span>
|
||||
<span class="distributeLeafletsValue">{{ item.time }}</span>
|
||||
</div>
|
||||
<div class="distributeLeaflets" style="margin-left: 4%">
|
||||
<span>派单人员:</span>
|
||||
<span class="distributeLeafletsValue">{{ item.user }}</span>
|
||||
</div>
|
||||
<div class="distributeLeaflets" style="margin-left: 4%">
|
||||
<span>工单类型:</span>
|
||||
<span class="distributeLeafletsValue">{{ item.type }}</span>
|
||||
</div>
|
||||
<div class="distributeLeaflets" style="margin-left: 4%">
|
||||
<span>接单时间:</span>
|
||||
<span class="distributeLeafletsValue">{{ item.receiveTime }}</span>
|
||||
</div>
|
||||
<div class="distributeLeaflets" style="margin-left: 4%">
|
||||
<span>订单状态:</span>
|
||||
<span class="distributeLeafletsValue">{{ item.status }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "operationMaintenance",
|
||||
data() {
|
||||
return {
|
||||
workList: [
|
||||
{
|
||||
name: "超时响应工单数",
|
||||
count: "0",
|
||||
toDayCount: "2",
|
||||
toDayTime: "0",
|
||||
},
|
||||
{
|
||||
name: "未处理超时工单数",
|
||||
count: "0",
|
||||
toDayCount: "2",
|
||||
toDayTime: "0",
|
||||
},
|
||||
{
|
||||
name: "未完成工单数",
|
||||
count: "0",
|
||||
toDayCount: "2",
|
||||
toDayTime: "0",
|
||||
},
|
||||
{
|
||||
name: "未分配工单数",
|
||||
count: "0",
|
||||
toDayCount: "2",
|
||||
toDayTime: "0",
|
||||
},
|
||||
],
|
||||
selectList: [
|
||||
{
|
||||
name: "日期",
|
||||
list: [
|
||||
{
|
||||
label: "日期",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "日期2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "派单人员",
|
||||
list: [
|
||||
{
|
||||
label: "派单人员",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "派单人员2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "工单状态",
|
||||
list: [
|
||||
{
|
||||
label: "工单状态",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "工单状态2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "工单类型",
|
||||
list: [
|
||||
{
|
||||
label: "工单类型",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "工单类型2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
], //案件列表选择器
|
||||
distributeLeafletsList: [
|
||||
{
|
||||
id: "1",
|
||||
time: "2023.1.13",
|
||||
user: "方强",
|
||||
type: "设备维修",
|
||||
receiveTime: "2023.1.13",
|
||||
status: "已完成",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
time: "2023.1.13",
|
||||
user: "方强",
|
||||
type: "设备维修",
|
||||
receiveTime: "2023.1.13",
|
||||
status: "已完成",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
time: "2023.1.13",
|
||||
user: "方强",
|
||||
type: "设备维修",
|
||||
receiveTime: "2023.1.13",
|
||||
status: "已完成",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
time: "2023.1.13",
|
||||
user: "方强",
|
||||
type: "设备维修",
|
||||
receiveTime: "2023.1.13",
|
||||
status: "已完成",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.workOrderEcharts();
|
||||
},
|
||||
methods: {
|
||||
workOrderEcharts() {
|
||||
var myChart = this.$echarts.init(
|
||||
document.getElementById("workOrderEcharts")
|
||||
);
|
||||
let option = {
|
||||
grid: {
|
||||
top: "18%",
|
||||
// // left: '15%',
|
||||
// // right: '5%',
|
||||
bottom: "10%",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
showContent: false,
|
||||
axisPointer: {
|
||||
type: "line",
|
||||
lineStyle: {
|
||||
type: "solid",
|
||||
color: "rgba(255, 255, 255, .5)",
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
fontSize: "0.8rem",
|
||||
fontWeight: 600,
|
||||
backgroundColor: "rgba(0, 0, 0, 0)",
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
name: "天数",
|
||||
//x轴坐标点
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
//x轴坐标线样式
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: "0.5rem",
|
||||
},
|
||||
//x轴线
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: [5, 10],
|
||||
dashOffset: 10,
|
||||
color: "#1282C8",
|
||||
},
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: [1, 2, 3, 4, 5, 6],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: "工单",
|
||||
//x轴坐标点
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
//x轴坐标线样式
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: "0.5rem",
|
||||
},
|
||||
//x轴线
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// type: [5, 10],
|
||||
dashOffset: 10,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
showSymbol: false,
|
||||
yAxisIndex: 0,
|
||||
lineStyle: {
|
||||
width: 4,
|
||||
color: "rgb(0,170,194)",
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#FFFFFF",
|
||||
fontSize: "0.8rem",
|
||||
},
|
||||
position: "top",
|
||||
formatter: function (p) {
|
||||
return p.value > 0 ? p.value : "";
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#FFFFFF",
|
||||
borderColor: "#FFFFFF",
|
||||
borderWidth: 6,
|
||||
},
|
||||
data: ["40", "60", "50", "50", "80", "20"],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@fontsize: 0.6rem;
|
||||
.operationMaintenance {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 0.3% 0 0.3%;
|
||||
box-sizing: border-box;
|
||||
.left {
|
||||
width: 24.7%;
|
||||
height: 95%;
|
||||
padding: 0.5% 0.3% 0.5% 0.3%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.workOrder {
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.todayCount {
|
||||
background: url(../assets/images/gongDan/gongDanBack.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 62%;
|
||||
height: 82%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: space-around;
|
||||
}
|
||||
}
|
||||
.workCount {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
color: #fff;
|
||||
#workOrderEcharts {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
}
|
||||
}
|
||||
.workList {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.workContent {
|
||||
width: 45%;
|
||||
height: 35%;
|
||||
border: 1px solid rgb(9, 196, 217);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 24.7%;
|
||||
height: 95%;
|
||||
padding: 0.5% 0.3% 1% 0.3%;
|
||||
box-sizing: border-box;
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.selectList {
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
.selectChange {
|
||||
width: 23%;
|
||||
height: 20%;
|
||||
margin-left: 11%;
|
||||
/deep/ .el-select {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
}
|
||||
/deep/ .el-input__inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
border: 1px solid rgb(1, 176, 202);
|
||||
border-radius: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
/deep/ .el-select-dropdown {
|
||||
background: rgba(0, 23, 28, 0.3);
|
||||
border: 1px solid rgb(1, 176, 202);
|
||||
border-radius: 5px;
|
||||
// left: -3px !important;
|
||||
}
|
||||
/deep/ .el-select-dropdown__item {
|
||||
color: turquoise;
|
||||
}
|
||||
/deep/ .el-select .el-input .el-select__caret {
|
||||
color: rgb(1, 176, 202);
|
||||
font-size: 0.3rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
/deep/ .el-input__suffix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.workOrderList {
|
||||
width: 100%;
|
||||
height: calc(100% - 20%);
|
||||
padding: 0 7% 0 3%;
|
||||
box-sizing: border-box;
|
||||
.workContent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../assets/images/warnDottedLine.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
overflow: auto;
|
||||
.workContentList {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
border: 1px dashed #fff;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
padding: 0 3%;
|
||||
box-sizing: border-box;
|
||||
.distributeLeaflets {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.7rem;
|
||||
.distributeLeafletsValue {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
background: url("../assets/images/gongDan/eqBtnAc.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 5%;
|
||||
background: url("../assets/images/title.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 12%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,439 @@
|
|||
<template>
|
||||
<div class="securityMain">
|
||||
<div class="left">
|
||||
<div class="leftOne">
|
||||
<div class="title">安防统计数据</div>
|
||||
<div class="security">
|
||||
<div class="securitySupervision">
|
||||
安防监管
|
||||
</div>
|
||||
<div class="securityCount">
|
||||
<div class="securityList" v-for="(item,index) in securityList" :key="index">
|
||||
<span>{{item.name}}</span>
|
||||
<span>{{item.count}}</span>
|
||||
</div>
|
||||
<!-- <img src="../"/> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="leftTwo">
|
||||
<div class="title" style="height:8%">预警视频监控联动</div>
|
||||
<div class="warnVideo">
|
||||
<!-- <div class="warnCamera">
|
||||
<img src="../assets/images/camera.png" style="width:100%;height:100%"/>
|
||||
</div> -->
|
||||
<div class="warnCameraList">
|
||||
<div style="width:45%;height:30%" v-for="(item,index) in warnCameraList" :key="index" @click="videoChange(index)">
|
||||
<img :src="item.icon" style="width:100%;height:100%"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rightOne">
|
||||
<div class="title" style="height:10%">火灾报警管理</div>
|
||||
<div class="fire">
|
||||
<div
|
||||
class="warnList"
|
||||
v-for="(item, index) in fireWarnList"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="item.icon" />
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 65%;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
"
|
||||
>报警时间:<span style="margin-left: 5%">{{
|
||||
item.time
|
||||
}}</span></span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
margin-top: 3%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
"
|
||||
>设备定位:<span style="color: rgb(0,255,255); margin-left: 5%">{{
|
||||
item.position
|
||||
}}</span></span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
margin-top: 3%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
"
|
||||
>报警状态:<span style="color: rgb(0,255,255); margin-left: 5%">{{
|
||||
item.status
|
||||
}}</span></span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightTwo">
|
||||
<div class="title" style="height:10%">安防报警管理</div>
|
||||
<div class="police">
|
||||
<div
|
||||
class="warnList"
|
||||
v-for="(item, index) in policeList"
|
||||
:key="index"
|
||||
>
|
||||
<span>{{ item.id }}</span>
|
||||
<img :src="item.icon" />
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 65%;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
"
|
||||
>报警时间:<span style="margin-left: 5%">{{
|
||||
item.time
|
||||
}}</span></span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
margin-top: 3%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
"
|
||||
>设备内容:<span style="color: rgb(0,255,255); margin-left: 5%">{{
|
||||
item.content
|
||||
}}</span></span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
margin-top: 3%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
"
|
||||
>报警状态:<span style="color: rgb(0,255,255); margin-left: 5%">{{
|
||||
item.status
|
||||
}}</span></span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "security",
|
||||
data() {
|
||||
return {
|
||||
securityList: [
|
||||
{
|
||||
name: "",
|
||||
count: "",
|
||||
},
|
||||
{
|
||||
name: "摄像头总数",
|
||||
count: "609",
|
||||
},
|
||||
{
|
||||
name: "在线数量",
|
||||
count: "602",
|
||||
},
|
||||
{
|
||||
name: "离线数量",
|
||||
count: "7",
|
||||
},
|
||||
{
|
||||
name: "报警数",
|
||||
count: "0",
|
||||
},
|
||||
{
|
||||
name: "昨日报警数",
|
||||
count: "0",
|
||||
},
|
||||
],
|
||||
warnCameraList:[
|
||||
{
|
||||
icon:require("../assets/images/anFang/videoAc.png")
|
||||
},
|
||||
{
|
||||
icon:require("../assets/images/anFang/video.png")
|
||||
},
|
||||
{
|
||||
icon:require("../assets/images/anFang/video.png")
|
||||
},
|
||||
{
|
||||
icon:require("../assets/images/anFang/video.png")
|
||||
},
|
||||
{
|
||||
icon:require("../assets/images/anFang/video.png")
|
||||
},
|
||||
{
|
||||
icon:require("../assets/images/anFang/video.png")
|
||||
},
|
||||
],
|
||||
fireWarnList: [
|
||||
{
|
||||
icon: require("../assets/images/jieNengImg/warnBlue.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
position: "烟感",
|
||||
status: "已解除",
|
||||
},
|
||||
{
|
||||
icon: require("../assets/images/jieNengImg/warnBlue.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
position: "烟感",
|
||||
status: "已解除",
|
||||
},
|
||||
{
|
||||
icon: require("../assets/images/jieNengImg/warnWhite.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
position: "烟感",
|
||||
status: "已解除",
|
||||
},
|
||||
{
|
||||
icon: require("../assets/images/jieNengImg/warnBlue.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
position: "烟感",
|
||||
status: "已解除",
|
||||
},
|
||||
], //故障数组
|
||||
policeList:[
|
||||
{
|
||||
id:'1',
|
||||
icon: require("../assets/images/anFang/exclamatory.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
content: "306门禁故障",
|
||||
status: "已解除",
|
||||
},
|
||||
{
|
||||
id:'2',
|
||||
icon: require("../assets/images/anFang/exclamatory.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
content: "201门禁故障",
|
||||
status: "已解除",
|
||||
},
|
||||
{
|
||||
id:'3',
|
||||
icon: require("../assets/images/anFang/exclamatory.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
content: "206门禁故障",
|
||||
status: "已解除",
|
||||
},
|
||||
{
|
||||
id:'4',
|
||||
icon: require("../assets/images/anFang/exclamatory.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
content: "106门禁故障",
|
||||
status: "已解除",
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
videoChange(index){
|
||||
this.warnCameraList.forEach((item,i) => {
|
||||
item.icon = require("../assets/images/anFang/video.png")
|
||||
});
|
||||
this.warnCameraList[index].icon = require("../assets/images/anFang/videoAc.png")
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@fontsize: 0.7rem;
|
||||
.securityMain {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 0.3% 0 0.3%;
|
||||
box-sizing: border-box;
|
||||
.left {
|
||||
width: 24.7%;
|
||||
height: 95%;
|
||||
padding: 0.5% 0.3% 1% 0.3%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.leftOne {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
align-content: space-between;
|
||||
.security{
|
||||
height: calc(100% - 25%);
|
||||
width: 100%;
|
||||
padding-right: 5%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
.securitySupervision{
|
||||
width: 50%;
|
||||
height: 12%;
|
||||
background: url("../assets/images/anFang/securityBack.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
font-size: @fontsize;
|
||||
}
|
||||
.securityCount{
|
||||
width: 100%;
|
||||
height: calc(100% - 12%);
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
.securityList{
|
||||
width: 30%;
|
||||
height: 20%;
|
||||
color: #fff;
|
||||
margin-left: 2%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.leftTwo {
|
||||
width: 100%;
|
||||
height: 65%;
|
||||
.warnVideo{
|
||||
height: calc(100% - 8%);
|
||||
width: 100%;
|
||||
padding:0 3%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
// .warnCamera{
|
||||
// width: 100%;
|
||||
// height: 40%;
|
||||
// border: 3px solid rgb(1, 176, 202);
|
||||
// }
|
||||
.warnCameraList{
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 24.7%;
|
||||
height: 95%;
|
||||
padding: 0.5% 0.3% 1% 0.3%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.rightOne{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
.fire{
|
||||
height: calc(100% - 10%);
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
.warnList {
|
||||
height: 32%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding-right: 20%;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.rightTwo{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
.police{
|
||||
height: calc(100% - 10%);
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
.warnList {
|
||||
height: 32%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding-right: 20%;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 13%;
|
||||
background: url("../assets/images/title.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 12%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.caseTitle{
|
||||
width: 23%;
|
||||
height: 10%;
|
||||
background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 5%;
|
||||
box-sizing: border-box;
|
||||
margin-top: 2%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue