SafetyScreen-ui/src/views/Substation/index.vue

<template>
  <div class="homePage">
    <div class="page-cont">
      <div class="lef-secs">
        <!-- 国 -->
        <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 countryList"
            :key="item.areaId"
            @click="changeCountrySec(item)"
            v-if="showCountrySec"
          >
            {{ 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.projectName }}</div>
        </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="!showLefSec"
      >
        <country-map
          v-if="showCountrySec"
          :send-geo="sendGeo"
          :send-height="'940px'"
        >
        </country-map>
        <province-map
          v-if="showProjSec"
          :map-count="sendMap"
          send-map-color="#35C9BB"
          :send-proj-spin="projGeoList"
        >
        </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.lefSecList
      }
      return this.lefSecList.filter(item => {
        return item.title.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,
          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
      this.projList.forEach(item => {
        this.projGeoList.push({
          name: item.projectName,
          province: item.areaName,
          projName: item.projectName,
          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
    },
    //关闭二级页面
    handelCloseSub(){
      this.showProjSec = true
      this.showLefSec = false
      this.getGeoData()
    },
    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>