324 lines
8.2 KiB
Vue
324 lines
8.2 KiB
Vue
<template>
|
||
<div id="index" ref="appRef">
|
||
<!-- <div class="bg" :style="{
|
||
backgroundImage:
|
||
'url(' + require(`../../assets/${backgroundPic.index}.png`) + ')',
|
||
}"> -->
|
||
<div class="bg">
|
||
<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">
|
||
<headerIndex :cdata="{ title: '智慧工地', margin: '26px auto' }" style="position: relative"/>
|
||
<div class="main" style="margin-top:-100px">
|
||
<div @click="go" v-for="(item, index)
|
||
|
||
in [ '跳传详情']" :key="index" :class="`card l${1 + index}`">
|
||
<div class="cont">
|
||
{{ item }}
|
||
<!-- <img :src="require('@/assets/foodSafe/pic1.png')" /> -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="left">
|
||
<BasicBox title="工地信息概览" :dataSource="false">
|
||
<template slot="top">
|
||
<div class="informationOverview" v-for="(item, index) in imgList" :key="index">
|
||
<img :src="item.imgUrl" />
|
||
<div class="cont">
|
||
<div> {{ item.count }}</div>
|
||
<div> {{ item.title }}</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
</BasicBox>
|
||
<BasicBox title="工地列表" :dataSource="false">
|
||
<template slot="top">
|
||
<CustomDvScrollBoard :config="config" :style="{ height: '600px', padding: '10px' }"></CustomDvScrollBoard>
|
||
</template>
|
||
</BasicBox>
|
||
</div>
|
||
<div class="right">
|
||
<BasicBox class="basicInfo" title="项目基本信息" :dataSource="workList">
|
||
|
||
</BasicBox>
|
||
<BasicBox title="项目注意事项" :dataSource="false">
|
||
<template slot="top">
|
||
<ul class="attentionInfo">
|
||
|
||
<li v-for="i in 3" :key="i">
|
||
<div class="attentionInfo_title">
|
||
<i class="el-icon-caret-right" style="color:#01F1A4"></i>
|
||
抵御台风雷暴天应急预案
|
||
</div>
|
||
<p>为确保全体教师和幼儿生命财产安全，保障教育体育事业 健康和谐发展，全面做好我园对暴雨、洪水、台风... </p>
|
||
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
</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"
|
||
|
||
export default {
|
||
mixins: [drawMixin],
|
||
data() {
|
||
return {
|
||
backgroundPic: {
|
||
index: "wisdom/bg",
|
||
},
|
||
loading: false,
|
||
imgList: [
|
||
{ imgUrl: require("@/assets/wisdom/construct_amount.png"), count: 1, title: "工地数量" },
|
||
{ imgUrl: require("@/assets/wisdom/land_amount.png"), count: 1, title: "涉及宗地数量" },
|
||
{ imgUrl: require("@/assets/wisdom/construct_area.png"), count: 35.87, title: "施工总面积" },
|
||
{ imgUrl: require("@/assets/wisdom/land_area.png"), count: 41695.3, title: "涉及宗地面积" },
|
||
],
|
||
config: {
|
||
// header: ['所属地块', '地块面积', '项目类别', '建筑面积', '建设进度'],
|
||
header: ['所属地块', '地块面积', '项目类别', '建筑面积', '建设进度'],
|
||
rowNum: 12,
|
||
data:
|
||
// new Array(12).fill(['ID345633', '150000', '办公楼', '45000000', '建设阶段']),
|
||
// new Array(12).fill(['', '35.87', '电网小型基建','41695.3', '']),
|
||
new Array(1).fill(['', '35.87', '电网小型基建','41695.3', '']),
|
||
columnWidth: [60],
|
||
},
|
||
workList: [
|
||
{ key: "项目名称", value: "国网江苏省送变电有限公司（应急抢修中心）生产管理用房" },
|
||
{ key: "承建单位", value: "中亿丰建设集团股份有限公司" },
|
||
{ key: "监理单位", value: "江苏建科工程咨询有限公司" },
|
||
{ key: "勘察单位", value: "中国能源建设集团江苏省电力设计院有限公司" },
|
||
{ key: "设计单位", value: "江苏东方建筑设计有限公司" },
|
||
{ key: "项目周期", value: "3年" },
|
||
{ key: "项目金额", value: "27044万元" },
|
||
{ key: "项目类型", value: "电网小型基建" },
|
||
{ key: "人员数量", value: "147" },
|
||
{ key: "设备数量", value: "2台塔吊" },
|
||
|
||
]
|
||
};
|
||
},
|
||
components: {
|
||
headerIndex,
|
||
BasicBox,
|
||
CustomDvScrollBoard
|
||
},
|
||
mounted() {
|
||
this.cancelLoading();
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(this.timing);
|
||
},
|
||
methods: {
|
||
go() {
|
||
this.$router.push('/wisdomChild')
|
||
},
|
||
cancelLoading() {
|
||
setTimeout(() => {
|
||
this.loading = false;
|
||
}, 500);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.basicInfo {
|
||
li {
|
||
padding: 18px 0 !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
@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;
|
||
}
|
||
.main {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.card {
|
||
width: 195px;
|
||
height: 148px;
|
||
position: absolute;
|
||
background: url("~@/assets/foodSafe/card.png") no-repeat center;
|
||
background-size: 81% 50%;
|
||
&.l1 {
|
||
left: 35px;
|
||
bottom: -6px;
|
||
}
|
||
|
||
&.l2 {
|
||
left: 870px;
|
||
top: 145px;
|
||
}
|
||
|
||
&.l4 {
|
||
left: 1155px;
|
||
top: 510px;
|
||
}
|
||
|
||
&.l3 {
|
||
left: 555px;
|
||
top: 540px;
|
||
}
|
||
|
||
.cont {
|
||
text-align: center;
|
||
margin-top: 64px;
|
||
color: $default-font-color;
|
||
}
|
||
|
||
&:hover {
|
||
cursor: pointer;
|
||
background: url("~@/assets/foodSafe/card_hot.png") no-repeat center;
|
||
background-size: 81% 50%;
|
||
}
|
||
}
|
||
|
||
.location {
|
||
position: absolute;
|
||
width: 29px;
|
||
height: 39px;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
|
||
&.blue {
|
||
background-image: url("~@/assets/wisdom/location-blue.png");
|
||
left: 595px;
|
||
top: 390px;
|
||
}
|
||
|
||
|
||
&.green {
|
||
background-image: url("~@/assets/wisdom/location-green.png");
|
||
left: 835px;
|
||
top: 530px;
|
||
}
|
||
|
||
&.purple {
|
||
background-image: url("~@/assets/wisdom/location-purple.png");
|
||
left: 705px;
|
||
top: 760px;
|
||
}
|
||
|
||
&.orange {
|
||
left: 1255px;
|
||
top: 660px;
|
||
background-image: url("~@/assets/wisdom/location-orange.png");
|
||
}
|
||
|
||
|
||
&.red {
|
||
left: 955px;
|
||
top: 300px;
|
||
background-image: url("~@/assets/wisdom/location-red.png");
|
||
}
|
||
|
||
&.yellow {
|
||
left: 595px;
|
||
top: 690px;
|
||
background-image: url("~@/assets/wisdom/location-yellow.png");
|
||
}
|
||
}
|
||
|
||
|
||
.informationOverview {
|
||
width: 50%;
|
||
height: 70px;
|
||
display: inline-block;
|
||
margin-bottom: 10px;
|
||
|
||
.cont {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-evenly;
|
||
/* text-align: center; */
|
||
padding-left: 15px;
|
||
|
||
div {
|
||
text-align: center;
|
||
display: block;
|
||
|
||
margin: 0;
|
||
|
||
&:nth-child(2) {
|
||
color: #53A0CA;
|
||
font-weight: bolder;
|
||
height: 45px;
|
||
// padding-left: 30px;
|
||
background: url("~@/assets/wisdom2/text-bottom.png") no-repeat center;
|
||
}
|
||
}
|
||
}
|
||
|
||
img {
|
||
float: left;
|
||
padding-left: 10px;
|
||
}
|
||
}
|
||
|
||
.left {
|
||
width: 24%;
|
||
left: 2%;
|
||
position: absolute;
|
||
}
|
||
|
||
.right {
|
||
width: 21.5%;
|
||
right: 2%;
|
||
position: absolute;
|
||
|
||
.attentionInfo {
|
||
padding: 0 0 10px 35px;
|
||
|
||
p {
|
||
display: block;
|
||
width: 93%;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
li {
|
||
height: auto;
|
||
}
|
||
|
||
i {
|
||
margin-right: 10px
|
||
}
|
||
|
||
&_title {
|
||
color: $table-header-color
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
@import "../../assets/scss/index.scss";
|
||
</style>
|