348 lines
8.7 KiB
Vue
348 lines
8.7 KiB
Vue
<template>
|
|
<div class="homePage">
|
|
<div class="page-cont">
|
|
<div class="lef-secs">
|
|
<!-- 国 -->
|
|
<div>
|
|
<div
|
|
:class="['single-sec', { isActive: !currentProjIndex }]"
|
|
@click="clickCountry"
|
|
v-if="showProjSec"
|
|
>
|
|
总览
|
|
</div>
|
|
<!-- <div
|
|
:class="['single-sec', { isActive: currentCountryIndex === item.id }]"
|
|
v-for="item in countryList"
|
|
:key="item.id"
|
|
@click="changeCountrySec(item)"
|
|
v-if="showCountrySec"
|
|
>
|
|
{{ item.name }}
|
|
</div>-->
|
|
</div>
|
|
<div>
|
|
<div
|
|
:class="['single-sec', { isActive: currentProjIndex === item.projectId }]"
|
|
v-for="item in projList"
|
|
:key="item.projectId"
|
|
@click="changeProjSec(item)"
|
|
v-if="showProjSec"
|
|
>
|
|
{{ item.projectName }}
|
|
</div>
|
|
</div>
|
|
<div v-if="showLefSec" style="display: flex;margin-bottom: 20px;align-items: center;">
|
|
<img src="../../assets/img/back.png" alt="" @click="handelCloseSub">
|
|
<div style="color: #000;font-size: 24px;font-weight: bold;margin-left: 20px;">{{ lefSendMsg.projName }}</div>
|
|
<!-- 选项 -->
|
|
<!-- <el-input
|
|
placeholder="请输入内容"
|
|
suffix-icon="el-icon-search"
|
|
v-model="searchIpt"
|
|
style="margin-left: 20px;"
|
|
/> -->
|
|
</div>
|
|
|
|
<div
|
|
:class="['single-sec', { isActive: currentLefIndex === item.id }]"
|
|
v-for="item in searchLefSec"
|
|
:key="item.id"
|
|
@click="changeLefSec(item)"
|
|
v-if="showLefSec"
|
|
>
|
|
{{ item.title }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="rig-maps"
|
|
v-if="showProjSec"
|
|
>
|
|
<country-map
|
|
:send-height="'940px'"
|
|
send-map-color="#e2e2e2"
|
|
:send-geo="geoData"
|
|
:show-line="true"
|
|
@closeMap="handleCloseMap"
|
|
>
|
|
</country-map>
|
|
<!-- <province-map
|
|
v-if="showProjSec"
|
|
:map-count="sendMap"
|
|
>
|
|
</province-map>-->
|
|
</div>
|
|
<div
|
|
class="rig-components"
|
|
v-if="showLefSec"
|
|
>
|
|
<man-detect
|
|
v-if="currentLefIndex === 1"
|
|
:send-msg="lefSendMsg"
|
|
></man-detect>
|
|
<envir-detect
|
|
v-if="currentLefIndex === 2"
|
|
:send-msg="lefSendMsg"
|
|
></envir-detect>
|
|
<tower-detect
|
|
v-if="currentLefIndex === 3"
|
|
:send-msg="lefSendMsg"
|
|
></tower-detect>
|
|
<pit-detect
|
|
v-if="currentLefIndex === 4"
|
|
:send-msg="lefSendMsg"
|
|
></pit-detect>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import GlobalBar from '../../components/globalBar.vue'
|
|
import CountryMap from '../../components/home/countryMap.vue'
|
|
import ProvinceMap from '../../components/home/provinceMap.vue'
|
|
import ManDetect from '../../components/substation/manDetect.vue'
|
|
import EnvirDetect from '../../components/substation/envirDetect.vue'
|
|
import TowerDetect from '../../components/substation/towerDetect.vue'
|
|
import PitDetect from '../../components/substation/pitDetect.vue'
|
|
import {
|
|
querySubProjInfoApi
|
|
} from '@/api/substation/substation'
|
|
export default {
|
|
components: {
|
|
GlobalBar,
|
|
CountryMap,
|
|
ProvinceMap,
|
|
ManDetect,
|
|
EnvirDetect,
|
|
TowerDetect,
|
|
PitDetect
|
|
},
|
|
name: 'line',
|
|
data() {
|
|
return {
|
|
currentIndex: 3,
|
|
currentCountryIndex: undefined,
|
|
currentProjIndex: undefined,
|
|
currentLefIndex: undefined,
|
|
currentProvince: undefined,
|
|
sendMap: 1,
|
|
showCountrySec: true,
|
|
showProjSec: true,
|
|
showLefSec: false,
|
|
searchIpt: undefined,
|
|
sendNum: undefined,
|
|
countryList: [
|
|
{ id: 2, name: '宁夏' },
|
|
{ id: 3, name: '安徽' },
|
|
{ id: 4, name: '内蒙古' },
|
|
],
|
|
projList: [],
|
|
lefSecList: [
|
|
{ title: '人员检测类', id: 1 },
|
|
{ title: '环境检测类', id: 2 },
|
|
{ title: '组塔检测类', id: 3 },
|
|
{ title: '基坑检测类', id: 4 },
|
|
],
|
|
/*projProvinceList: [
|
|
{
|
|
name: '河北省',
|
|
itemStyle: { normal: { areaColor: '#7DDEFF' } }
|
|
},
|
|
{
|
|
name: '河南省',
|
|
itemStyle: { normal: { areaColor: '#7DDEFF' } }
|
|
},
|
|
{
|
|
name: '云南省',
|
|
itemStyle: { normal: { areaColor: '#7DDEFF' } }
|
|
},
|
|
],*/
|
|
geoData: [],
|
|
lefSendMsg: undefined
|
|
}
|
|
},
|
|
computed: {
|
|
searchProj() {
|
|
if(!this.searchIpt) {
|
|
return this.projList
|
|
}
|
|
return this.projList.filter(item => {
|
|
return item.name.includes(this.searchIpt)
|
|
})
|
|
},
|
|
searchLefSec() {
|
|
if(!this.searchIpt) {
|
|
return this.lefSecList
|
|
}
|
|
return this.lefSecList.filter(item => {
|
|
return item.title.includes(this.searchIpt)
|
|
})
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
|
|
mounted() {
|
|
this.getProjData()
|
|
},
|
|
methods: {
|
|
async getProjData() {
|
|
let res = await querySubProjInfoApi({
|
|
projectTypeCode: 2
|
|
})
|
|
this.projList = res.data.data
|
|
this.renderAllProj()
|
|
},
|
|
// 渲染全部工程
|
|
renderAllProj() {
|
|
this.geoData = []
|
|
this.projList.forEach(proj => {
|
|
if(proj.proPowerList) {
|
|
proj.proPowerList.forEach(tower => {
|
|
this.geoData.push({
|
|
name: tower.gtName,
|
|
projName: tower.gtName,
|
|
projectId: proj.projectId,
|
|
province: proj.areaName,
|
|
itemStyle: { normal: { areaColor: '#7DDEFF' } },
|
|
value: [
|
|
Number(tower.lon),
|
|
Number(tower.lat)
|
|
]
|
|
})
|
|
})
|
|
}
|
|
})
|
|
},
|
|
changeCountrySec(val) {
|
|
this.currentCountryIndex = val.id
|
|
this.sendMap = val.id
|
|
this.currentProvince = val.name
|
|
this.showProjSec = true
|
|
},
|
|
changeProjSec(val) {
|
|
this.geoData = []
|
|
this.currentProjIndex = val.projectId
|
|
this.projList.forEach(proj => {
|
|
if(proj.projectId === val.projectId) {
|
|
proj.proPowerList.forEach(tower => {
|
|
this.geoData.push({
|
|
name: tower.gtName,
|
|
projName: tower.gtName,
|
|
projectId: proj.projectId,
|
|
itemStyle: { normal: { areaColor: '#7DDEFF' } },
|
|
value: [
|
|
Number(tower.lon),
|
|
Number(tower.lat)
|
|
]
|
|
})
|
|
})
|
|
}
|
|
})
|
|
console.log(this.geoData)
|
|
},
|
|
changeLefSec(val) {
|
|
this.currentLefIndex = val.id
|
|
},
|
|
clickCountry() {
|
|
this.renderAllProj()
|
|
this.showProjSec = true
|
|
this.showLefSec = false
|
|
this.currentLefIndex = undefined
|
|
this.currentProjIndex = undefined
|
|
this.currentCountryIndex = undefined
|
|
this.sendMap = 1
|
|
},
|
|
///关闭地图，显示二级页面
|
|
handleCloseMap(val) {
|
|
console.log(val, 'closeMap')
|
|
this.lefSendMsg = val.value
|
|
this.showProjSec = false
|
|
this.currentLefIndex = 1
|
|
this.showLefSec = true
|
|
},
|
|
//关闭二级页面
|
|
handelCloseSub(){
|
|
this.showProjSec = true
|
|
this.showLefSec = false
|
|
this.renderAllProj()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='less' scoped>
|
|
.homePage {
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url(../../assets/img/bgd.png) no-repeat center;
|
|
background-size: 100% 100%;
|
|
color: #fff;
|
|
position: relative;
|
|
|
|
.page-cont{
|
|
|
|
width: 100%;
|
|
height: 940px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.lef-secs{
|
|
|
|
width: 20%;
|
|
height: 100%;
|
|
background-color: #F3F7FF;
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
border: 1px solid #EFF2FC;
|
|
box-shadow: 2px 2px 2px #D9E0F3;
|
|
overflow-y: auto;
|
|
|
|
.single-sec{
|
|
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
padding: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #000;
|
|
font-size: 18px;
|
|
background-color: #DEECFF;
|
|
border: 1px solid #D1E1FF;
|
|
margin-bottom: 15px;
|
|
|
|
}
|
|
|
|
.isActive{
|
|
|
|
background-color: #EFF4FE;
|
|
box-shadow: -3px -3px 2px #CBDCF6,
|
|
2px 2px 2px #F8F9FE,
|
|
-2px -2px 2px #CBDCF6,
|
|
2px 2px 2px #F8F9FE;
|
|
box-sizing: border-box;
|
|
border-radius: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.rig-maps, .rig-components{
|
|
|
|
width: 79%;
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
</style>
|