426 lines
14 KiB
Vue
426 lines
14 KiB
Vue
<template>
|
|
<div id="index" ref="appRef">
|
|
<div class="bg">
|
|
<!-- <div class="bg" :style="{
|
|
backgroundImage:
|
|
'url(' + require(`../../../assets/${backgroundPic.index}.png`) + ')',
|
|
}"> -->
|
|
<iframe src="/wisdom/wisdomMap.html" frameborder="0" width="100%" height="100%" style="position: absolute"></iframe>
|
|
<!-- <div class="body-left"></div>
|
|
<div class="body-right"></div>
|
|
<div class="body-bottom"></div> -->
|
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
|
<div v-else class="host-body" id="wis">
|
|
<headerIndex :cdata="{ title: '智慧工地', margin: '26px auto' }" style="position: relative"/>
|
|
<div class="main" style="margin-top:-100px">
|
|
<div class="left">
|
|
<BasicBox title="人员信息概览" :dataSource="false">
|
|
<template slot="top">
|
|
<div class="left_frist" v-for="i in 2" :key="i">
|
|
<div class="left_frist_title">人员情况</div>
|
|
<div class="main">
|
|
<div class="list" v-for="(item, index) in 1 === 0 ? [
|
|
{ name: '工地总人数', count: 137 },
|
|
{ name: '管理人员数量', count: 10 },
|
|
{ name: '在场管理人员', count: 137 },] :
|
|
[{ name: '正常考勤人数', count: 137 },
|
|
{ name: '实际考勤人数', count: 137 },
|
|
{ name: '异常考勤人数', count: 0},]" :key="index">
|
|
<div class="image">{{ item.count }}</div>
|
|
<div class="text">{{ item.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</BasicBox>
|
|
|
|
<BasicBox title="日常管理" :dataSource="false">
|
|
<template slot="top">
|
|
<div>
|
|
<div class="daily">
|
|
<label>安全宣传</label>
|
|
<label>巡防检查</label>
|
|
<label class="on">违规作业</label>
|
|
</div>
|
|
</div>
|
|
<CustomDvScrollBoard :config="dailyConfig"
|
|
:style="{ height: '150px', padding: '10px' }"></CustomDvScrollBoard>
|
|
|
|
</template>
|
|
</BasicBox>
|
|
|
|
<BasicBox title="疫情防控" :dataSource="false">
|
|
<template slot="top">
|
|
<div class="yqTop">
|
|
<div class="yqTop_main">
|
|
<img :src="require('@/assets/wisdom2/enter.png')" />
|
|
<div class="yqTop_right">
|
|
<span>18</span>
|
|
<p>进入人数</p>
|
|
</div>
|
|
</div>
|
|
<div class="yqTop_main">
|
|
<img :src="require('@/assets/wisdom2/exit.png')" />
|
|
<div class="yqTop_right">
|
|
<span>43</span>
|
|
<p>进去人数</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<CustomDvScrollBoard :config="yqConfig" :style="{ height: '150px', padding: '10px' }">
|
|
</CustomDvScrollBoard>
|
|
</template>
|
|
</BasicBox>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="right">
|
|
|
|
<BasicBox title="智慧用电" :dataSource="false">
|
|
<template slot="top">
|
|
<div class="electric">
|
|
<div>
|
|
<div class="f1">
|
|
<span>375</span>
|
|
</div>
|
|
<p>生活用大功率用电设备数量</p>
|
|
|
|
</div>
|
|
<div>
|
|
<div class="f1 r">
|
|
<span>524</span>
|
|
</div>
|
|
<p>建设用大功率用电设备数量</p>
|
|
</div>
|
|
</div>
|
|
<div class="h2">生活用电实时功率曲线</div>
|
|
<Chart1 type="0"></Chart1>
|
|
<div class="h2">生活用电实时功率曲线</div>
|
|
<Chart1 type="1"></Chart1>
|
|
</template>
|
|
</BasicBox>
|
|
<BasicBox title="设备运行情况" :dataSource="false">
|
|
<template slot="top">
|
|
<div class="yqTop">
|
|
<div class="yqTop_main">
|
|
<img :src="require('@/assets/wisdom2/camera.png')" />
|
|
<div class="yqTop_right">
|
|
<span>26</span>
|
|
<p>摄像头数量</p>
|
|
</div>
|
|
</div>
|
|
<div class="yqTop_main">
|
|
<img :src="require('@/assets/wisdom2/sensor.png')" />
|
|
<div class="yqTop_right">
|
|
<span>30</span>
|
|
<p>传感器数量</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<CustomDvScrollBoard :config="cameraConfig"
|
|
:style="{ height: '150px', padding: '10px' }">
|
|
</CustomDvScrollBoard>
|
|
</template>
|
|
</BasicBox>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import drawMixin from "@/utils/drawMixin";
|
|
import headerIndex from "@/components/layout/header";
|
|
import BasicBox from "@/components/BasicBox"
|
|
import CustomDvScrollBoard from "@/components/customDvScrollBoard"
|
|
import Chart1 from "./chart1.vue"
|
|
|
|
// import { url } from "inspector";
|
|
|
|
export default {
|
|
mixins: [drawMixin],
|
|
|
|
data() {
|
|
return {
|
|
backgroundPic: {
|
|
index: "wisdom/bg",
|
|
},
|
|
loading: false,
|
|
imgList: [
|
|
{ imgUrl: require("@/assets/wisdom/construct_amount.png"), count: 36, title: "工地数量" },
|
|
{ imgUrl: require("@/assets/wisdom/land_amount.png"), count: 15250.5, title: "涉及宗地数量" },
|
|
{ imgUrl: require("@/assets/wisdom/construct_area.png"), count: 5233665, title: "施工总面积" },
|
|
{ imgUrl: require("@/assets/wisdom/land_area.png"), count: 84585.2, title: "涉及宗地面积" },
|
|
],
|
|
dailyConfig: {
|
|
header: ['时间', '地点', '违规人', '违规信息', '抓拍图片'],
|
|
rowNum: 4,
|
|
data:
|
|
new Array(4).fill(['ID345633', '150000', '办公楼', '45000000', '建设阶段']),
|
|
columnWidth: [50],
|
|
},
|
|
yqConfig: {
|
|
index: false,
|
|
header: ['进入时间', '姓名', '健康码', '行程码', '异常信息'],
|
|
rowNum: 4,
|
|
columnWidth: [100],
|
|
data: [
|
|
['2022-06-07', '王明', '绿色', '南京市', '无'],
|
|
['2022-06-07', '杨凯', '绿色', '南京市', '无'],
|
|
['2022-06-07', '宋敏鸿', '绿色', '南京市', '无'],
|
|
['2022-06-07', '龚文博', '绿色', '南京市', '无'],
|
|
]
|
|
},
|
|
cameraConfig: {
|
|
index: false,
|
|
header: ['设备名称', '设备编号', '设备位置', '运行情况'],
|
|
rowNum: 4,
|
|
columnWidth: [100],
|
|
data: [
|
|
['视频监控', '4578', '3F11', '正常'],
|
|
['塔吊监控', '4578', '3F11', '正常'],
|
|
['环境监测', '4578', '3F11', '正常'],
|
|
['蓝牙人员定位', '4578', '3F11', '正常'],
|
|
]
|
|
},
|
|
|
|
};
|
|
},
|
|
components: {
|
|
headerIndex,
|
|
BasicBox,
|
|
CustomDvScrollBoard, Chart1
|
|
},
|
|
mounted() {
|
|
this.cancelLoading();
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.timing);
|
|
},
|
|
methods: {
|
|
cancelLoading() {
|
|
setTimeout(() => {
|
|
this.loading = false;
|
|
}, 500);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
@import "~@/common/var.scss";
|
|
.body-left{
|
|
background: url('~@/assets/left.png') no-repeat!important;
|
|
}
|
|
.body-right{
|
|
background: url('~@/assets/right.png') no-repeat!important;
|
|
}
|
|
|
|
.body-bottom{
|
|
background: url('~@/assets/down.png') no-repeat!important;
|
|
}
|
|
#wis {
|
|
.dv-scroll-board .rows .ceil {
|
|
color: $default-font-color !important;
|
|
text-align: center
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "~@/common/var.scss";
|
|
|
|
|
|
.daily {
|
|
text-align: center;
|
|
|
|
|
|
|
|
label {
|
|
padding: 5px 15px;
|
|
background: $table-header-bg;
|
|
color: $table-header-color;
|
|
margin: 0 1px;
|
|
|
|
&.on {
|
|
background: #226883;
|
|
color: $default-font-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: 21.5%;
|
|
right: 2%;
|
|
position: absolute;
|
|
}
|
|
|
|
.h2 {
|
|
padding-left: 50px;
|
|
position: relative;
|
|
font-size: 20px;
|
|
margin: 10px 0;
|
|
|
|
&::before {
|
|
width: 11px;
|
|
height: 11px;
|
|
content: " ";
|
|
display: inline-block;
|
|
position: absolute;
|
|
background: url("~@/assets/wisdom2/square.png") no-repeat center;
|
|
left: 30px;
|
|
/* line-height: 100%; */
|
|
top: 4px;
|
|
|
|
}
|
|
}
|
|
|
|
.main {
|
|
color: $default-font-color;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.electric {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
|
|
p {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.f1 {
|
|
height: 99px;
|
|
width: 98px;
|
|
background: url("~@/assets/wisdom2/panel-green.png") no-repeat center;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
|
|
|
|
|
|
&.r {
|
|
|
|
background: url("~@/assets/wisdom2/panel-blue.png") no-repeat center;
|
|
|
|
}
|
|
|
|
span {
|
|
position: absolute;
|
|
left: 35px;
|
|
top: 40px;
|
|
font-weight: bolder;
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.yqTop {
|
|
padding: 10px 60px 0 60px;
|
|
display: flex;
|
|
|
|
|
|
&_main {
|
|
width: 50%;
|
|
display: flex;
|
|
|
|
}
|
|
|
|
&_right {
|
|
flex: 1;
|
|
text-align: center;
|
|
display: inline-block;
|
|
padding: 0 30px;
|
|
|
|
span {
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
|
|
}
|
|
|
|
p {
|
|
border-top: 2px solid #114869;
|
|
padding-top: 5px;
|
|
color: $table-header-color;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
img {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 50px;
|
|
height: 50px;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
|
|
.left {
|
|
width: 21.5%;
|
|
left: 2%;
|
|
position: absolute;
|
|
|
|
|
|
&_frist {
|
|
padding-left: 15px;
|
|
margin-bottom: 15px;
|
|
|
|
|
|
&_title {
|
|
color: $default-font-color;
|
|
background: url("~@/assets/rect-bg.png") no-repeat center;
|
|
}
|
|
|
|
.main {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
text-align: center;
|
|
padding: 0 20px;
|
|
|
|
.list {
|
|
&:nth-child(1) {
|
|
color: #01FFB0;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
color: #00DFFC
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
color: #FAB002
|
|
}
|
|
}
|
|
|
|
.image {
|
|
margin: 8px auto;
|
|
width: 62px;
|
|
height: 73px;
|
|
line-height: 73px;
|
|
font-size: 26px;
|
|
font-weight: bold;
|
|
background: url("~@/assets/wisdom2/panel-number.png") no-repeat center;
|
|
}
|
|
|
|
.text {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
color: #fff;
|
|
background: url("~@/assets/wisdom2/text-bottom.png") no-repeat bottom;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// .bg {
|
|
// background-image: url("~@/assets/wisdom2/bg.png") !important
|
|
// }
|
|
|
|
@import "~@/assets/scss/index.scss";
|
|
</style>
|