353 lines
8.8 KiB
Vue
353 lines
8.8 KiB
Vue
<template>
|
|
<div class="homePage">
|
|
<div class="page-cont">
|
|
<div class="lef-secs">
|
|
<!-- 国 -->
|
|
<div>
|
|
<div :class="['single-sec']" v-if="!showLefSec">
|
|
<el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="searchIpt" />
|
|
</div>
|
|
<div
|
|
:class="['single-sec', { isActive: showCountrySec }]"
|
|
@click="clickCountry"
|
|
v-if="!showLefSec"
|
|
>
|
|
全国
|
|
</div>
|
|
<div :class="['single-sec', { isActive: currentCountryIndex === item.areaId }]"
|
|
v-for="item in searchLefSec"
|
|
:key="item.areaId"
|
|
@click="changeCountrySec(item)"
|
|
v-if="showCountrySec&&!showLefSec"
|
|
>
|
|
{{ item.areaName }}
|
|
</div>
|
|
</div>
|
|
<!-- 省项目 -->
|
|
<div>
|
|
<div
|
|
class="single-sec"
|
|
v-if="showProjSec"
|
|
style="background-color: #A6CAFC"
|
|
>
|
|
{{ currentProvince }}
|
|
</div>
|
|
<div
|
|
:class="['single-sec', { isActive: currentProjIndex === item.projectId }]"
|
|
v-for="item in projList"
|
|
:key="item.areaId"
|
|
@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;">{{ sendMsg.projName }}</div>
|
|
|
|
</div>
|
|
<div
|
|
:class="['single-sec', { isActive: currentLefIndex === item.id }]"
|
|
v-for="item in lefSecList"
|
|
:key="item.id"
|
|
@click="changeLefSec(item)"
|
|
v-if="showLefSec"
|
|
>
|
|
{{ item.title }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="rig-maps"
|
|
v-if="!showLefSec"
|
|
>
|
|
<country-map
|
|
v-if="showCountrySec"
|
|
:send-geo="sendGeo"
|
|
:send-height="'940px'"
|
|
@closeMap="handleCloseMap"
|
|
>
|
|
</country-map>
|
|
<province-map
|
|
v-if="showProjSec"
|
|
:map-count="sendMap"
|
|
send-map-color="#35C9BB"
|
|
:send-proj-spin="projGeoList"
|
|
@closeMap="handleCloseMap"
|
|
>
|
|
</province-map>
|
|
</div>
|
|
<div
|
|
class="rig-components"
|
|
v-if="showLefSec"
|
|
>
|
|
<man-detect
|
|
v-if="currentLefIndex === 1"
|
|
:send-msg="sendMsg"
|
|
></man-detect>
|
|
<envir-detect
|
|
v-if="currentLefIndex === 2"
|
|
:send-msg="sendMsg"
|
|
></envir-detect>
|
|
<tower-detect
|
|
v-if="currentLefIndex === 3"
|
|
:send-msg="sendMsg"
|
|
></tower-detect>
|
|
<pit-detect
|
|
v-if="currentLefIndex === 4"
|
|
:send-msg="sendMsg"
|
|
></pit-detect>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
querySubAreaInfoApi,
|
|
querySubProjInfoApi
|
|
} from '@/api/substation/substation'
|
|
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'
|
|
export default {
|
|
components: {
|
|
GlobalBar,
|
|
CountryMap,
|
|
ProvinceMap,
|
|
ManDetect,
|
|
EnvirDetect,
|
|
TowerDetect,
|
|
PitDetect
|
|
},
|
|
name: 'Substation',
|
|
data() {
|
|
return {
|
|
currentIndex: 2,
|
|
currentCountryIndex: undefined,
|
|
currentProjIndex: undefined,
|
|
currentLefIndex: undefined,
|
|
currentProvince: undefined,
|
|
sendMap: 1,
|
|
showCountrySec: true,
|
|
showProjSec: false,
|
|
showLefSec: false,
|
|
searchIpt: undefined,
|
|
countryList: [],
|
|
projList: [],
|
|
projGeoList: [],
|
|
lefSecList: [
|
|
{ title: '人员检测类', id: 1 },
|
|
{ title: '环境检测类', id: 2 },
|
|
{ title: '组塔检测类', id: 3 },
|
|
{ title: '基坑检测类', id: 4 },
|
|
],
|
|
sendMsg: undefined,
|
|
sendGeo: undefined
|
|
}
|
|
},
|
|
computed: {
|
|
searchLefSec() {
|
|
if(!this.searchIpt) {
|
|
return this.countryList
|
|
}
|
|
return this.countryList.filter(item => {
|
|
return item.areaName.includes(this.searchIpt)
|
|
})
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
mounted() {
|
|
this.getAreaData()
|
|
this.getGeoData()
|
|
},
|
|
methods: {
|
|
async getAreaData() {
|
|
let res = await querySubAreaInfoApi()
|
|
this.countryList = res.data.data
|
|
},
|
|
async getGeoData() {
|
|
let res = await querySubProjInfoApi({
|
|
projectTypeCode: 1,
|
|
})
|
|
console.log(res, 'geo')
|
|
this.sendGeo = res.data.data.map(item => {
|
|
return {
|
|
name: item.projectName,
|
|
province: item.areaName,
|
|
projName: item.projectName,
|
|
projectId: item.projectId,
|
|
devTypeNum: item.devTypeNum,
|
|
devNum: item.devNum,
|
|
successNum: item.successNum,
|
|
errorNum: item.errorNum,
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: '#7DDEFF'
|
|
}
|
|
},
|
|
value: [
|
|
Number(item.lon),
|
|
Number(item.lat)
|
|
]
|
|
}
|
|
})
|
|
},
|
|
async changeCountrySec(val) {
|
|
this.projGeoList = []
|
|
this.currentCountryIndex = val.areaId
|
|
this.sendMap = val.areaId
|
|
this.currentProvince = val.areaName
|
|
let res = await querySubProjInfoApi({
|
|
projectTypeCode: 1,
|
|
areaId: val.areaId
|
|
})
|
|
this.projList = res.data.data;
|
|
console.log(this.projList)
|
|
this.projList.forEach(item => {
|
|
this.projGeoList.push({
|
|
name: item.projectName,
|
|
projectId: item.projectId,
|
|
province: item.areaName,
|
|
projName: item.projectName,
|
|
devTypeNum: item.devTypeNum,
|
|
devNum: item.devNum,
|
|
successNum: item.successNum,
|
|
errorNum: item.errorNum,
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: '#7DDEFF'
|
|
}
|
|
},
|
|
value: [item.lon, item.lat],
|
|
})
|
|
})
|
|
this.showProjSec = true
|
|
this.showCountrySec = false
|
|
},
|
|
changeProjSec(val) {
|
|
console.log(val, 'val=======')
|
|
this.sendMsg = val
|
|
this.currentProjIndex = val.projectId
|
|
this.currentLefIndex = 1
|
|
this.showLefSec = true
|
|
this.showProjSec = false
|
|
},
|
|
handleCloseMap(val) {
|
|
console.log(val, 'closeMap')
|
|
this.sendMsg=val.value;
|
|
this.currentProjIndex = val.projectId
|
|
this.currentLefIndex=1
|
|
this.showLefSec = true
|
|
this.showProjSec = false
|
|
// this.showCountrySec = true
|
|
},
|
|
//关闭二级页面
|
|
handelCloseSub(){
|
|
this.showLefSec = false
|
|
this.showProjSec = true
|
|
this.showCountrySec = true
|
|
this.clickCountry()
|
|
},
|
|
changeLefSec(val) {
|
|
this.currentLefIndex = val.id
|
|
},
|
|
clickCountry() {
|
|
this.showCountrySec = true
|
|
this.showProjSec = false
|
|
this.showLefSec = false
|
|
this.currentLefIndex = undefined
|
|
this.currentProjIndex = undefined
|
|
this.currentCountryIndex = undefined
|
|
this.getGeoData()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='less' scoped>
|
|
|
|
/deep/ .el-input__inner {
|
|
background-color: #ECF3FE;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.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>
|