From 65fbfb1fff1d6606cf678b28c1a427336d653004 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Sun, 29 Sep 2024 18:21:46 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=90=AF=E5=8A=A8=E6=97=B6?=
 =?UTF-8?q?=E7=BB=88=E7=AB=AFwarning=E8=AD=A6=E5=91=8A=EF=BC=8C=E6=B8=A9?=
 =?UTF-8?q?=E6=B9=BF=E5=BA=A6=EF=BC=8C=E9=A3=8E=E9=80=9F=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E8=A7=A3=E5=86=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/globalBar.vue              |  168 +--
 src/components/substation/envirDetect.vue | 1349 +++++++++++----------
 src/views/homePage/index.vue              |  819 +++++++------
 3 files changed, 1192 insertions(+), 1144 deletions(-)

diff --git a/src/components/globalBar.vue b/src/components/globalBar.vue
index 9ffb03f..e6d86d8 100644
--- a/src/components/globalBar.vue
+++ b/src/components/globalBar.vue
@@ -1,104 +1,104 @@
 <template>
-  <div class="tit-cont">
-    <div class="inner-tit">
-      <div
-        v-for="item in titList"
-        :key="item.id"
-        :class="[ 'single-tit', { isActive: currentIndex === item.id } ]"
-        @click="changeTitle(item)"
-      >
-        <h4>
-          <span v-if="item.title !== null">{{ item.title }}</span>
-          <img
-            v-if="item.title !== null && currentIndex === item.id"
-            src="../assets/img/tit-bottom.png"
-            alt=""/>
-          <img
-            v-if="item.title !== null && currentIndex !== item.id"
-            src="../assets/img/title-nosel.png"
-            alt=""/>
-        </h4>
-      </div>
-      <!--        <div class="tit-cen"></div>
+    <div class="tit-cont">
+        <div class="inner-tit">
+            <div
+                v-for="item in titList"
+                :key="item.id"
+                :class="['single-tit', { isActive: currentIndex === item.id }]"
+                @click="changeTitle(item)"
+            >
+                <h4>
+                    <span v-if="item.title !== null">{{ item.title }}</span>
+                    <img
+                        v-if="item.title !== null && currentIndex === item.id"
+                        src="../assets/img/tit-bottom.png"
+                        alt=""
+                    />
+                    <img
+                        v-if="item.title !== null && currentIndex !== item.id"
+                        src="../assets/img/title-nosel.png"
+                        alt=""
+                    />
+                </h4>
+            </div>
+            <!--        <div class="tit-cen"></div>
               <div class="tit-rig">2</div>-->
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'globalBar',
-  props: {
-    indexCount: {
-      type: Number,
-      default: null
-    }
-  },
-  data() {
-    return {
-      titList: [
-        { title: '首页', id: 1, path: '/Home/index' },
-        { title: '变电', id: 2, path: '/substation/index' },
-        { title: null, id: null },
-        { title: null, id: null },
-        { title: '线路', id: 3, path: '/line/index' },
-        { title: '工作台', id: 4, path: '/workbench/index' },
-      ],
-    }
-  },
-  methods: {
-    changeTitle(val) {
-      // console.log(val, this.$router)
-      this.currentIndex = val.id
-      this.$router.push({
-        path: val.path
-      })
-    }
-  }
+    name: 'globalBar',
+    props: {
+        indexCount: {
+            type: Number,
+            default: null,
+        },
+    },
+    data() {
+        return {
+            titList: [
+                { title: '首页', id: 1, path: '/Home/index' },
+                { title: '变电', id: 2, path: '/substation/index' },
+                { title: null, id: null },
+                { title: null, id: null },
+                { title: '线路', id: 3, path: '/line/index' },
+                { title: '工作台', id: 4, path: '/workbench/index' },
+            ],
+        }
+    },
+    methods: {
+        changeTitle(val) {
+            // console.log(val, this.$router)
+            this.currentIndex = val.id
+            this.$router.push({
+                path: val.path,
+            })
+        },
+    },
 }
 </script>
 
 <style scoped lang="less">
-.tit-cont{
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 110px;
-  background: url(../assets/img/title.png) no-repeat center;
-
-  .inner-tit{
+.tit-cont {
+    position: absolute;
+    left: 0;
+    top: 0;
     width: 100%;
-    height: 60px;
-    display: flex;
-    justify-content: space-around;
-    align-items: end;
+    height: 110px;
+    background: url(../assets/img/title.png) no-repeat center;
 
-    .single-tit{
-      font-size: 22px;
-      width: 10%;
-      display: flex;
-      justify-content: space-around;
-      color: #ABB0B8;
-      cursor: pointer;
-      h4{
+    .inner-tit {
         width: 100%;
-        height: 100%;
+        height: 60px;
         display: flex;
-        flex-direction: column;
         justify-content: space-around;
-        align-items: center;
-        img{
-          width: 100%;
-          height: 12px;
+        align-items: flex-end;
+
+        .single-tit {
+            font-size: 22px;
+            width: 10%;
+            display: flex;
+            justify-content: space-around;
+            color: #abb0b8;
+            cursor: pointer;
+            h4 {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                align-items: center;
+                img {
+                    width: 100%;
+                    height: 12px;
+                }
+            }
+        }
+        .isActive {
+            color: #2859b4;
         }
-      }
     }
-    .isActive{
-      color: #2859B4;
-    }
-
-  }
-
 }
 </style>
diff --git a/src/components/substation/envirDetect.vue b/src/components/substation/envirDetect.vue
index 155b8fe..bff9516 100644
--- a/src/components/substation/envirDetect.vue
+++ b/src/components/substation/envirDetect.vue
@@ -1,30 +1,30 @@
 <template>
-  <div class="hole-page">
-    <div class="work-environment">
-      <div class="inner-tit">
-        <div>
-          <img src="../../assets/img/lef-badge.png" alt="">
-          施工环境
-        </div>
-        <div style="display: flex; justify-content: right">
-          <el-select
-            v-model="deviceVal"
-            clearable
-            filterable
-            placeholder="请选择"
-            @change="deviceChange"
-          >
-            <el-option
-              v-for="item in deviceRange"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </div>
-      </div>
-      <div class="work-icons">
-        <!--        <div
+    <div class="hole-page">
+        <div class="work-environment">
+            <div class="inner-tit">
+                <div>
+                    <img src="../../assets/img/lef-badge.png" alt="" />
+                    施工环境
+                </div>
+                <div style="display: flex; justify-content: right">
+                    <el-select
+                        v-model="deviceVal"
+                        clearable
+                        filterable
+                        placeholder="请选择"
+                        @change="deviceChange"
+                    >
+                        <el-option
+                            v-for="item in deviceRange"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </div>
+            </div>
+            <div class="work-icons">
+                <!--        <div
                   class="single-icon"
                   v-for="(item, index) in workIconList"
                   :key="index"
@@ -33,696 +33,725 @@
                   <img :src="item.pic" alt="">
                   <span>{{ item.tit }}</span>
                 </div>-->
-        <div class="single-icon">
-          <span style="color: #42C8E3">{{ environmentInfoList ? environmentInfoList[8].jcValue : '' }}°C</span>
-          <span>温度</span>
-          <img src="../../assets/img/temp.png" alt="">
+                <div class="single-icon">
+                    <span style="color: #42c8e3"
+                        >{{
+                            environmentInfoList
+                                ? environmentInfoList[8].jcValue
+                                : ''
+                        }}°C</span
+                    >
+                    <span>温湿度</span>
+                    <img src="../../assets/img/temp.png" alt="" />
+                </div>
+                <div class="single-icon">
+                    <span style="color: #fda496"
+                        >{{
+                            environmentInfoList
+                                ? environmentInfoList[7].jcValue
+                                : ''
+                        }}m/s</span
+                    >
+                    <span>风速</span>
+                    <img src="../../assets/img/wind.png" alt="" />
+                </div>
+                <div class="single-icon">
+                    <span style="color: #87d674"
+                        >{{
+                            environmentInfoList
+                                ? environmentInfoList[9].jcValue
+                                : ''
+                        }}%rh</span
+                    >
+                    <span>湿度</span>
+                    <img src="../../assets/img/wet.png" alt="" />
+                </div>
+                <div class="single-icon">
+                    <span style="color: #f2ad49"
+                        >{{
+                            environmentInfoList
+                                ? environmentInfoList[5].jcValue
+                                : ''
+                        }}db</span
+                    >
+                    <span>噪声</span>
+                    <img src="../../assets/img/loud.png" alt="" />
+                </div>
+                <div class="single-icon">
+                    <span style="color: #9634cc"
+                        >{{
+                            environmentInfoList
+                                ? environmentInfoList[3].jcValue
+                                : ''
+                        }}/ugm3</span
+                    >
+                    <span>PM2.5</span>
+                    <img src="../../assets/img/pm2.5.png" alt="" />
+                </div>
+                <div class="single-icon">
+                    <span style="color: #1db1c0"
+                        >{{
+                            environmentInfoList
+                                ? environmentInfoList[4].jcValue
+                                : ''
+                        }}/ugm3</span
+                    >
+                    <span>PM10</span>
+                    <img src="../../assets/img/pm10.png" alt="" />
+                </div>
+            </div>
         </div>
-        <div class="single-icon">
-          <span style="color: #FDA496">{{ environmentInfoList ? environmentInfoList[7].jcValue : '' }}m/s</span>
-          <span>风速</span>
-          <img src="../../assets/img/wind.png" alt="">
+        <div class="charts-info">
+            <div class="charts">
+                <div class="chart-up">
+                    <div class="single-chart">
+                        <div class="inner-tit">
+                            <img src="../../assets/img/lef-badge.png" alt="" />
+                            温湿度
+                        </div>
+                        <div id="temp-chart"></div>
+                    </div>
+                    <div class="single-chart">
+                        <div class="inner-tit">
+                            <img src="../../assets/img/lef-badge.png" alt="" />
+                            风速
+                        </div>
+                        <div id="wet-chart"></div>
+                    </div>
+                </div>
+                <div class="chart-down">
+                    <div class="single-chart">
+                        <div class="inner-tit">
+                            <img src="../../assets/img/lef-badge.png" alt="" />
+                            噪声
+                        </div>
+                        <div id="loud-chart"></div>
+                    </div>
+                    <div class="single-chart">
+                        <div class="inner-tit">
+                            <img src="../../assets/img/lef-badge.png" alt="" />
+                            空气质量
+                        </div>
+                        <div id="air-chart"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="infos">
+                <div class="inner-tit">
+                    <img src="../../assets/img/lef-badge.png" alt="" />
+                    预警信息
+                </div>
+                <el-table
+                    :data="tableList"
+                    stripe
+                    style="width: 100%"
+                    :row-style="rowStyle"
+                >
+                    <el-table-column
+                        prop="devName"
+                        label="设备名称"
+                        align="center"
+                    >
+                    </el-table-column>
+                    <el-table-column
+                        prop="warnTime"
+                        label="时间"
+                        align="center"
+                    >
+                    </el-table-column>
+                    <el-table-column
+                        prop="warnType"
+                        label="预警内容"
+                        align="center"
+                    >
+                        <template slot-scope="scope">
+                            {{ scope.row.warnType }}异常
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
         </div>
-        <div class="single-icon">
-          <span style="color: #87D674">{{ environmentInfoList ? environmentInfoList[9].jcValue : '' }}%rh</span>
-          <span>湿度</span>
-          <img src="../../assets/img/wet.png" alt="">
-        </div>
-        <div class="single-icon">
-          <span style="color: #F2AD49">{{ environmentInfoList ? environmentInfoList[5].jcValue : '' }}db</span>
-          <span>噪声</span>
-          <img src="../../assets/img/loud.png" alt="">
-        </div>
-        <div class="single-icon">
-          <span style="color: #9634CC">{{ environmentInfoList ? environmentInfoList[3].jcValue : '' }}/ugm3</span>
-          <span>PM2.5</span>
-          <img src="../../assets/img/pm2.5.png" alt="">
-        </div>
-        <div class="single-icon">
-          <span style="color: #1DB1C0">{{ environmentInfoList ? environmentInfoList[4].jcValue : '' }}/ugm3</span>
-          <span>PM10</span>
-          <img src="../../assets/img/pm10.png" alt="">
-        </div>
-      </div>
     </div>
-    <div class="charts-info">
-      <div class="charts">
-        <div class="chart-up">
-          <div class="single-chart">
-            <div class="inner-tit">
-              <img src="../../assets/img/lef-badge.png" alt="">
-              温度
-            </div>
-            <div id="temp-chart"></div>
-          </div>
-          <div class="single-chart">
-            <div class="inner-tit">
-              <img src="../../assets/img/lef-badge.png" alt="">
-              湿度
-            </div>
-            <div id="wet-chart"></div>
-          </div>
-        </div>
-        <div class="chart-down">
-          <div class="single-chart">
-            <div class="inner-tit">
-              <img src="../../assets/img/lef-badge.png" alt="">
-              噪声
-            </div>
-            <div id="loud-chart"></div>
-          </div>
-          <div class="single-chart">
-            <div class="inner-tit">
-              <img src="../../assets/img/lef-badge.png" alt="">
-              空气质量
-            </div>
-            <div id="air-chart"></div>
-          </div>
-        </div>
-      </div>
-      <div class="infos">
-        <div class="inner-tit">
-          <img src="../../assets/img/lef-badge.png" alt="">
-          预警信息
-        </div>
-        <el-table
-          :data="tableList"
-          stripe
-          style="width: 100%"
-          :row-style="rowStyle"
-        >
-          <el-table-column
-            prop="devName"
-            label="设备名称"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="warnTime"
-            label="时间"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="warnType"
-            label="预警内容"
-            align="center"
-          >
-            <template slot-scope="scope">
-                {{ scope.row.warnType }}异常
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
 import * as echarts from 'echarts'
 import {
-  queryDeviceByProApi,
-  queryEnvironmentInfoByIdApi,
-  queryChartsInfoByIdApi,
-  queryWarnInfoByIdApi,
-  getDevTypeCodeDetails
+    queryDeviceByProApi,
+    queryEnvironmentInfoByIdApi,
+    queryChartsInfoByIdApi,
+    queryWarnInfoByIdApi,
+    getDevTypeCodeDetails,
 } from '@/api/substation/substation'
 export default {
-  components: {
-
-  },
-  props: {
-    sendMsg: {
-      type: Object,
-      default: null
-    }
-  },
-  name: 'manDetect',
-  data() {
-    return {
-      environmentInfoList: undefined,
-      deviceVal: undefined,
-      deviceRange: [],
-      tableList: [
-        {
-          date: 'xxx工程',
-          name: '2024.1.1 12:23',
-          address: '明天有大风'
-        }, {
-          date: 'xxx工程',
-          name: '2024.1.1 12:23',
-          address: '明天有大风'
-        }, {
-          date: 'xxx工程',
-          name: '2024.1.1 12:23',
-          address: '明天有大风'
-        }, {
-          date: 'xxx工程',
-          name: '2024.1.1 12:23',
-          address: '明天有大风'
-        }, {
-          date: 'xxx工程',
-          name: '2024.1.1 12:23',
-          address: '明天有大风'
-        }, {
-          date: 'xxx工程',
-          name: '2024.1.1 12:23',
-          address: '明天有大风'
+    components: {},
+    props: {
+        sendMsg: {
+            type: Object,
+            default: null,
         },
-      ]
-    }
-  },
-  created() {
-
-  },
-  mounted() {
-    console.log(this.sendMsg)
-    this.getDeviceData(this.sendMsg.projectId)
-    this.getDevTypeCodeDetails(this.sendMsg.projectId)
-  },
-  methods: {
-    async getDeviceData(proId) {
-      let res = await queryDeviceByProApi({
-        powerId:this.sendMsg.gtId,
-        proId,
-        devType: 116
-      })
-      if(res.data.data.length !== 0) {
-        this.deviceVal = res.data.data[0].devId
-        this.deviceRange = res.data.data.map(item => {
-          return {
-            label: item.devName,
-            value: item.devId
-          }
-        })
-        await this.getEnvironmentData(this.deviceVal)
-        await this.getChartsData(this.deviceVal)
-      }
     },
-    //预警信息
-    async getDevTypeCodeDetails(proId) {
-      let param= {
-        proId:proId,
-        devTypeCode: 116
-      }
-      let res = await getDevTypeCodeDetails(param)
-      this.tableList=res.data
-    },
-    async getEnvironmentData(devId) {
-      let res = await queryEnvironmentInfoByIdApi({
-        devId
-      })
-      this.environmentInfoList = res.data.data
-    },
-    async getChartsData(devId) {
-      let res = await queryChartsInfoByIdApi({
-        devId
-      })
-      this.generateCharts(res.data)
-    },
-    deviceChange(e) {
-      console.log(e)
-      this.getEnvironmentData(e)
-      this.getChartsData(e)
-    },
-    generateCharts(list) {
-      console.log(list)
-     
-      let tempArr = list['温度'].map(item => {
-        return Number(item.jcValue)
-      })
-      let tempXList = list['温度'].map(item => {
-        return item.xtime
-      })
-      
-      let wetArr = list['湿度'].map(item => {
-        return Number(item.jcValue)
-      })
-      let wetXList = list['湿度'].map(item => {
-        return item.xtime
-      })
-
-      let loudArr = list['噪声'].map(item => {
-        return Number(item.jcValue)
-      })
-      let loudXList = list['噪声'].map(item => {
-        return item.xtime
-      })
-
-      let pm25Arr = list['pm25'].map(item => {
-        return Number(item.jcValue)
-      })
-      let pm25XList = list['pm25'].map(item => {
-        return item.xtime
-      })
-
-
-
-      let pm10Arr = list['pm10'].map(item => {
-        return Number(item.jcValue)
-      })
-      // 温度图表
-      let tempOption = {
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          },
-          valueFormatter:(value) => {
-            return value + '°C'
-          }
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
-        },
-        xAxis: [
-          {
-            type: 'category',
-            data: tempXList,
-            axisTick: {
-              alignWithLabel: true
-            }
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            name: '°C'
-          }
-        ],
-        series: [
-          {
-            name: '温度',
-            type: 'bar',
-            barWidth: '40%',
-            data: tempArr,
-            itemStyle:{
-              // 设置柱状渐变色
-              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+    name: 'manDetect',
+    data() {
+        return {
+            environmentInfoList: undefined,
+            deviceVal: undefined,
+            deviceRange: [],
+            tableList: [
                 {
-                  offset: 0,
-                  color: '#007FFF'
+                    date: 'xxx工程',
+                    name: '2024.1.1 12:23',
+                    address: '明天有大风',
                 },
                 {
-                  offset: 1,
-                  color: '#93D4EA'
+                    date: 'xxx工程',
+                    name: '2024.1.1 12:23',
+                    address: '明天有大风',
+                },
+                {
+                    date: 'xxx工程',
+                    name: '2024.1.1 12:23',
+                    address: '明天有大风',
+                },
+                {
+                    date: 'xxx工程',
+                    name: '2024.1.1 12:23',
+                    address: '明天有大风',
+                },
+                {
+                    date: 'xxx工程',
+                    name: '2024.1.1 12:23',
+                    address: '明天有大风',
+                },
+                {
+                    date: 'xxx工程',
+                    name: '2024.1.1 12:23',
+                    address: '明天有大风',
+                },
+            ],
+        }
+    },
+    created() {},
+    mounted() {
+        console.log(this.sendMsg)
+        this.getDeviceData(this.sendMsg.projectId)
+        this.getDevTypeCodeDetails(this.sendMsg.projectId)
+    },
+    methods: {
+        async getDeviceData(proId) {
+            let res = await queryDeviceByProApi({
+                powerId: this.sendMsg.gtId,
+                proId,
+                devType: 116,
+            })
+            if (res.data.data.length !== 0) {
+                this.deviceVal = res.data.data[0].devId
+                this.deviceRange = res.data.data.map((item) => {
+                    return {
+                        label: item.devName,
+                        value: item.devId,
+                    }
+                })
+                await this.getEnvironmentData(this.deviceVal)
+                await this.getChartsData(this.deviceVal)
+            }
+        },
+        //预警信息
+        async getDevTypeCodeDetails(proId) {
+            let param = {
+                proId: proId,
+                devTypeCode: 116,
+            }
+            let res = await getDevTypeCodeDetails(param)
+            this.tableList = res.data
+        },
+        async getEnvironmentData(devId) {
+            let res = await queryEnvironmentInfoByIdApi({
+                devId,
+            })
+            this.environmentInfoList = res.data.data
+        },
+        async getChartsData(devId) {
+            let res = await queryChartsInfoByIdApi({
+                devId,
+            })
+            this.generateCharts(res.data)
+        },
+        deviceChange(e) {
+            console.log(e)
+            this.getEnvironmentData(e)
+            this.getChartsData(e)
+        },
+        generateCharts(list) {
+            console.log(list)
+
+            let tempArr = list['温度'].map((item) => {
+                return Number(item.jcValue)
+            })
+            let tempXList = list['温度'].map((item) => {
+                return item.xtime
+            })
+
+            let wetArr = list['湿度'].map((item) => {
+                return Number(item.jcValue)
+            })
+            let wetXList = list['湿度'].map((item) => {
+                return item.xtime
+            })
+
+            let loudArr = list['噪声'].map((item) => {
+                return Number(item.jcValue)
+            })
+            let loudXList = list['噪声'].map((item) => {
+                return item.xtime
+            })
+
+            let pm25Arr = list['pm25'].map((item) => {
+                return Number(item.jcValue)
+            })
+            let pm25XList = list['pm25'].map((item) => {
+                return item.xtime
+            })
+
+            let pm10Arr = list['pm10'].map((item) => {
+                return Number(item.jcValue)
+            })
+            let windSpeedList = list['风速'].map((item) => {
+                return Number(item.jcValue)
+            })
+            // 温度图表
+            let tempOption = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow',
+                    },
+                    valueFormatter: (value) => {
+                        return value + '°C'
+                    },
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        data: tempXList,
+                        axisTick: {
+                            alignWithLabel: true,
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '°C',
+                    },
+                ],
+                series: [
+                    {
+                        name: '温度',
+                        type: 'bar',
+                        barWidth: '40%',
+                        data: tempArr,
+                        itemStyle: {
+                            // 设置柱状渐变色
+                            color: new echarts.graphic.LinearGradient(
+                                0,
+                                0,
+                                1,
+                                1,
+                                [
+                                    {
+                                        offset: 0,
+                                        color: '#007FFF',
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: '#93D4EA',
+                                    },
+                                ],
+                            ),
+                            borderRadius: [3, 3, 0, 0],
+                        },
+                    },
+                    {
+                        name: '湿度',
+                        data: wetArr,
+                        type: 'line',
+                        smooth: true,
+                        lineStyle: {
+                            color: '#FE8511',
+                        },
+                        itemStyle: {
+                            normal: {
+                                color: '#FE8511',
+                            },
+                        },
+                        // areaStyle: {
+                        //     color: {
+                        //         x: 0,
+                        //         y: 0,
+                        //         x2: 0,
+                        //         y2: 1,
+                        //         type: 'linear',
+                        //         colorStops: [
+                        //             { offset: 0, color: '#F5CC91' },
+                        //             { offset: 1, color: '#F8F6F6' },
+                        //         ],
+                        //     },
+                        // },
+                    },
+                ],
+            }
+            let tempChart = echarts.init(document.querySelector('#temp-chart'))
+            tempChart.setOption(tempOption)
+            // 风速图表
+            let wetOption = {
+                grid: {
+                    width: '80%',
+                    height: '60%',
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow',
+                    },
+                    valueFormatter: (value) => {
+                        return value + 'm/s'
+                    },
+                },
+                xAxis: {
+                    type: 'category',
+                    data: wetXList,
+                },
+                yAxis: {
+                    type: 'value',
+                    name: '%rh',
+                },
+                series: [
+                    {
+                        name: '风速',
+                        data: windSpeedList,
+                        type: 'line',
+                        smooth: true,
+                        lineStyle: {
+                            color: '#FE8511',
+                        },
+                        itemStyle: {
+                            normal: {
+                                color: '#FE8511',
+                            },
+                        },
+                        areaStyle: {
+                            color: {
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                type: 'linear',
+                                colorStops: [
+                                    { offset: 0, color: '#F5CC91' },
+                                    { offset: 1, color: '#F8F6F6' },
+                                ],
+                            },
+                        },
+                    },
+                ],
+            }
+            let wetChart = echarts.init(document.querySelector('#wet-chart'))
+            wetChart.setOption(wetOption)
+            // 噪声图表
+            let loudOption = {
+                grid: {
+                    width: '80%',
+                    height: '60%',
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow',
+                    },
+                    valueFormatter: (value) => {
+                        return value + '分贝'
+                    },
+                },
+                xAxis: {
+                    type: 'category',
+                    data: loudXList,
+                },
+                yAxis: {
+                    type: 'value',
+                    name: 'db',
+                },
+                series: [
+                    {
+                        name: '噪声',
+                        data: loudArr,
+                        type: 'line',
+                        smooth: true,
+                        symbol: 'none',
+                        lineStyle: {
+                            color: '#4781FC',
+                        },
+                        areaStyle: {
+                            color: {
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                type: 'linear',
+                                colorStops: [
+                                    { offset: 0, color: '#CCDBFF' },
+                                    { offset: 1, color: '#ECF2FF' },
+                                ],
+                            },
+                        },
+                    },
+                ],
+            }
+            let loudChart = echarts.init(document.querySelector('#loud-chart'))
+            loudChart.setOption(loudOption)
+            // 空气质量图表
+            let airOption = {
+                grid: {
+                    width: '80%',
+                    height: '60%',
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow',
+                    },
+                    valueFormatter: (value) => {
+                        return value + ' ugm3'
+                    },
+                },
+                xAxis: {
+                    type: 'category',
+                    data: pm25XList,
+                },
+                yAxis: {
+                    type: 'value',
+                    name: 'ugm3',
+                },
+                series: [
+                    {
+                        name: 'PM2.5',
+                        data: pm25Arr,
+                        type: 'line',
+                        lineStyle: {
+                            color: '#FC8B2D',
+                        },
+                        itemStyle: {
+                            normal: {
+                                color: '#FC8B2D',
+                            },
+                        },
+                        symbol: 'none',
+                        smooth: true,
+                    },
+                    {
+                        name: 'PM10',
+                        data: pm10Arr,
+                        type: 'line',
+                        lineStyle: {
+                            color: '#4B84FC',
+                        },
+                        itemStyle: {
+                            normal: {
+                                color: '#4B84FC',
+                            },
+                        },
+                        symbol: 'none',
+                        smooth: true,
+                    },
+                ],
+            }
+            let airChart = echarts.init(document.querySelector('#air-chart'))
+            airChart.setOption(airOption)
+        },
+        rowStyle(scope) {
+            if (scope.rowIndex % 2 === 0) {
+                return {
+                    background: '#EAF5FF',
+                }
+            } else {
+                return {
+                    background: '#E1EEFF',
                 }
-              ]),
-              borderRadius: [3, 3, 0, 0],
             }
-          }
-        ]
-      };
-      let tempChart = echarts.init(document.querySelector('#temp-chart'))
-      tempChart.setOption(tempOption)
-      // 湿度图表
-      let wetOption = {
-        grid: {
-          width: '80%',
-          height: '60%'
         },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          },
-          valueFormatter:(value) => {
-            return value + '%'
-          }
-        },
-        xAxis: {
-          type: 'category',
-          data: wetXList
-        },
-        yAxis: {
-          type: 'value',
-          name: '%rh',
-        },
-        series: [
-          {
-            name: '湿度',
-            data: wetArr,
-            type: 'line',
-            smooth: true,
-            lineStyle: {
-              color: '#FE8511'
-            },
-            itemStyle: {
-              normal: {
-                color: '#FE8511'
-              }
-            },
-            areaStyle: {
-              color: {
-                x:0,
-                y:0,
-                x2:0,
-                y2:1,
-                type: 'linear',
-                colorStops: [
-                  { offset: 0, color: '#F5CC91' },
-                  { offset: 1, color: '#F8F6F6' },
-                ]
-              }
-            }
-          }
-        ]
-      };
-      let wetChart = echarts.init(document.querySelector('#wet-chart'))
-      wetChart.setOption(wetOption)
-      // 噪声图表
-      let loudOption = {
-        grid: {
-          width: '80%',
-          height: '60%'
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          },
-          valueFormatter:(value) => {
-            return value + '分贝'
-          }
-        },
-        xAxis: {
-          type: 'category',
-          data: loudXList
-        },
-        yAxis: {
-          type: 'value',
-          name: 'db',
-        },
-        series: [
-          {
-            name: '噪声',
-            data: loudArr,
-            type: 'line',
-            smooth: true,
-            symbol: 'none',
-            lineStyle: {
-              color: '#4781FC'
-            },
-            areaStyle: {
-              color: {
-                x:0,
-                y:0,
-                x2:0,
-                y2:1,
-                type: 'linear',
-                colorStops: [
-                  { offset: 0, color: '#CCDBFF' },
-                  { offset: 1, color: '#ECF2FF' },
-                ]
-              }
-            }
-          }
-        ]
-      };
-      let loudChart = echarts.init(document.querySelector('#loud-chart'))
-      loudChart.setOption(loudOption)
-      // 空气质量图表
-      let airOption = {
-        grid: {
-          width: '80%',
-          height: '60%'
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          },
-          valueFormatter:(value) => {
-            return value + ' ugm3'
-          }
-        },
-        xAxis: {
-          type: 'category',
-          data: pm25XList
-        },
-        yAxis: {
-          type: 'value',
-          name: 'ugm3'
-        },
-        series: [
-          {
-            name: 'PM2.5',
-            data: pm25Arr,
-            type: 'line',
-            lineStyle: {
-              color: '#FC8B2D'
-            },
-            itemStyle: {
-              normal: {
-                color: '#FC8B2D'
-              }
-            },
-            symbol: 'none',
-            smooth: true
-          },
-          {
-            name: 'PM10',
-            data: pm10Arr,
-            type: 'line',
-            lineStyle: {
-              color: '#4B84FC'
-            },
-            itemStyle: {
-              normal: {
-                color: '#4B84FC'
-              }
-            },
-            symbol: 'none',
-            smooth: true
-          },
-        ]
-      };
-      let airChart = echarts.init(document.querySelector('#air-chart'))
-      airChart.setOption(airOption)
     },
-    rowStyle(scope) {
-      if(scope.rowIndex % 2 === 0) {
-        return {
-          background: '#EAF5FF',
-        }
-      } else {
-        return {
-          background: '#E1EEFF',
-        }
-      }
-    },
-  }
 }
 </script>
 
-<style lang='less' scoped>
-
+<style lang="less" scoped>
 @font-face {
-  font-family: 'YouShe';
-  src: url("../../assets/iconfont/YouSheBiaoTiHei.ttf");
+    font-family: 'YouShe';
+    src: url('../../assets/iconfont/YouSheBiaoTiHei.ttf');
 }
 
-.hole-page{
-
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .work-environment{
-
+.hole-page {
     width: 100%;
-    height: 250px;
-    background-color: #F3F7FF;
-    box-sizing: border-box;
-    padding: 15px 20px;
-    border-radius: 5px;
-    border: 1px solid #EFF2FC;
-    box-shadow: 2px 2px 2px #D9E0F3;
+    height: 100%;
     display: flex;
     flex-direction: column;
-    margin-bottom: 20px;
 
-    .inner-tit{
-
-      width: 30%;
-      box-sizing: border-box;
-      padding: 10px 20px;
-      background-color: #EFF4FE;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      color: #000;
-      font-size: 20px;
-      font-family: 'YouShe', sans-serif;
-      box-shadow: -3px -3px 2px #CBDCF6,
-      2px 2px 2px #F8F9FE,
-        -2px -2px 2px #CBDCF6,
-      2px 2px 2px #F8F9FE;
-      margin-bottom: 15px;
-
-      img{
-
-        margin-right: 10px;
-
-      }
-
-    }
-
-    .work-icons{
-
-      flex: 1;
-      display: flex;
-      justify-content: space-around;
-
-      .single-icon{
-
-        width: 12%;
-        height: 100%;
+    .work-environment {
+        width: 100%;
+        height: 250px;
+        background-color: #f3f7ff;
+        box-sizing: border-box;
+        padding: 15px 20px;
+        border-radius: 5px;
+        border: 1px solid #eff2fc;
+        box-shadow: 2px 2px 2px #d9e0f3;
         display: flex;
         flex-direction: column;
-        align-items: center;
-        color: #000;
+        margin-bottom: 20px;
 
-        span:first-child{
-
-          font-size: 24px;
-          padding-bottom: 3px;
-
-        }
-
-        span:nth-child(2){
-
-          font-size: 18px;
-
-        }
-
-        img{
-
-          width: 90%;
-          height: 90%;
-
-        }
-
-      }
-
-    }
-
-  }
-
-  .charts-info{
-
-    flex: 1;
-    display: flex;
-
-    .charts{
-
-      width: 70%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      margin-right: 15px;
-
-      .chart-up, .chart-down{
-
-        width: 100%;
-        height: 48%;
-        display: flex;
-        justify-content: space-between;
-
-        .single-chart{
-
-          width: 49%;
-          height: 100%;
-          background-color: #F3F7FF;
-          box-sizing: border-box;
-          padding: 15px;
-          border-radius: 5px;
-          border: 1px solid #EFF2FC;
-          box-shadow: 2px 2px 2px #D9E0F3;
-          display: flex;
-          flex-direction: column;
-
-          .inner-tit{
-
-            width: 100%;
+        .inner-tit {
+            width: 30%;
             box-sizing: border-box;
             padding: 10px 20px;
-            background-color: #EFF4FE;
+            background-color: #eff4fe;
             display: flex;
             align-items: center;
+            justify-content: space-between;
             color: #000;
             font-size: 20px;
             font-family: 'YouShe', sans-serif;
-            box-shadow: -3px -3px 2px #CBDCF6,
-            2px 2px 2px #F8F9FE,
-              -2px -2px 2px #CBDCF6,
-            2px 2px 2px #F8F9FE;
+            box-shadow: -3px -3px 2px #cbdcf6, 2px 2px 2px #f8f9fe,
+                -2px -2px 2px #cbdcf6, 2px 2px 2px #f8f9fe;
             margin-bottom: 15px;
 
-            img{
-
-              margin-right: 10px;
-
+            img {
+                margin-right: 10px;
             }
+        }
 
-          }
-
-          #temp-chart, #wet-chart, #air-chart, #loud-chart{
-
+        .work-icons {
             flex: 1;
+            display: flex;
+            justify-content: space-around;
 
-          }
+            .single-icon {
+                width: 12%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                color: #000;
 
+                span:first-child {
+                    font-size: 24px;
+                    padding-bottom: 3px;
+                }
+
+                span:nth-child(2) {
+                    font-size: 18px;
+                }
+
+                img {
+                    width: 90%;
+                    height: 90%;
+                }
+            }
         }
-
-      }
-
     }
 
-    .infos{
-
-      flex: 1;
-      background-color: #F3F7FF;
-      box-sizing: border-box;
-      padding: 15px;
-      border-radius: 5px;
-      border: 1px solid #EFF2FC;
-      box-shadow: 2px 2px 2px #D9E0F3;
-
-      .inner-tit{
-
-        width: 100%;
-        box-sizing: border-box;
-        padding: 10px 20px;
-        background-color: #EFF4FE;
+    .charts-info {
+        flex: 1;
         display: flex;
-        align-items: center;
-        color: #000;
-        font-size: 20px;
-        font-family: 'YouShe', sans-serif;
-        box-shadow: -3px -3px 2px #CBDCF6,
-        2px 2px 2px #F8F9FE,
-          -2px -2px 2px #CBDCF6,
-        2px 2px 2px #F8F9FE;
-        margin-bottom: 15px;
 
-        img{
+        .charts {
+            width: 70%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            margin-right: 15px;
 
-          margin-right: 10px;
+            .chart-up,
+            .chart-down {
+                width: 100%;
+                height: 48%;
+                display: flex;
+                justify-content: space-between;
 
+                .single-chart {
+                    width: 49%;
+                    height: 100%;
+                    background-color: #f3f7ff;
+                    box-sizing: border-box;
+                    padding: 15px;
+                    border-radius: 5px;
+                    border: 1px solid #eff2fc;
+                    box-shadow: 2px 2px 2px #d9e0f3;
+                    display: flex;
+                    flex-direction: column;
+
+                    .inner-tit {
+                        width: 100%;
+                        box-sizing: border-box;
+                        padding: 10px 20px;
+                        background-color: #eff4fe;
+                        display: flex;
+                        align-items: center;
+                        color: #000;
+                        font-size: 20px;
+                        font-family: 'YouShe', sans-serif;
+                        box-shadow: -3px -3px 2px #cbdcf6, 2px 2px 2px #f8f9fe,
+                            -2px -2px 2px #cbdcf6, 2px 2px 2px #f8f9fe;
+                        margin-bottom: 15px;
+
+                        img {
+                            margin-right: 10px;
+                        }
+                    }
+
+                    #temp-chart,
+                    #wet-chart,
+                    #air-chart,
+                    #loud-chart {
+                        flex: 1;
+                    }
+                }
+            }
         }
 
-      }
+        .infos {
+            flex: 1;
+            background-color: #f3f7ff;
+            box-sizing: border-box;
+            padding: 15px;
+            border-radius: 5px;
+            border: 1px solid #eff2fc;
+            box-shadow: 2px 2px 2px #d9e0f3;
 
+            .inner-tit {
+                width: 100%;
+                box-sizing: border-box;
+                padding: 10px 20px;
+                background-color: #eff4fe;
+                display: flex;
+                align-items: center;
+                color: #000;
+                font-size: 20px;
+                font-family: 'YouShe', sans-serif;
+                box-shadow: -3px -3px 2px #cbdcf6, 2px 2px 2px #f8f9fe,
+                    -2px -2px 2px #cbdcf6, 2px 2px 2px #f8f9fe;
+                margin-bottom: 15px;
+
+                img {
+                    margin-right: 10px;
+                }
+            }
+        }
     }
-
-  }
-
 }
-
 </style>
diff --git a/src/views/homePage/index.vue b/src/views/homePage/index.vue
index 254a66e..d9f034f 100644
--- a/src/views/homePage/index.vue
+++ b/src/views/homePage/index.vue
@@ -1,78 +1,116 @@
 <template>
-  <div class="homePage">
-    <div class="container" v-if="!showSubView">
-      <!-- 左侧数据模块列表 -->
-      <div class="leftModuleBox">
-        <div style="height: 200px; margin-bottom: 10px" >
-          <LeftOne :key="childKey" @openDialog="handleDialog"></LeftOne>
-        </div>
-        <div style="height: 430px; margin-bottom: 10px">
-          <LeftTwo :key="childKey" @openDialog="handleDialog"></LeftTwo>
-        </div>
-        <div style="height: 300px">
-          <LeftThree :key="childKey" @openDialog="handleDialog"></LeftThree>
-        </div>
-      </div>
-      
-      <!-- 中间3D效果展示 -->
-      <div class="centerModuleBox">
-        <div class="center-top">
-          <!-- 宁夏地图 -->
-          <CountryMap
-            :send-height="'627px'"
-            :send-geo="geoData"
-            @closeMap="handleCloseMap"
-          ></CountryMap>
-        </div>
-      </div>
-      <!-- 右侧数据模块列表 -->
-      <div class="rightModuleBox">
-        <div style="height: 470px; margin-bottom: 10px">
-          <RightOne :key="childKey" @openDialog="handleDialog"></RightOne>
-        </div>
-        <div style="height: 470px">
-          <rightTwo :key="childKey" @openDialog="handleDialog"></rightTwo>
-        </div>
-      </div>
-    </div>
-    <!-- 地图点击二级页面 -->
-    <div class="page-cont" v-if="showSubView">
-        <div class="lef-secs">
-            <div 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>
+    <div class="homePage">
+        <div class="container" v-if="!showSubView">
+            <!-- 左侧数据模块列表 -->
+            <div class="leftModuleBox">
+                <div style="height: 200px; margin-bottom: 10px">
+                    <LeftOne
+                        :key="childKey"
+                        @openDialog="handleDialog"
+                    ></LeftOne>
+                </div>
+                <div style="height: 430px; margin-bottom: 10px">
+                    <LeftTwo
+                        :key="childKey"
+                        @openDialog="handleDialog"
+                    ></LeftTwo>
+                </div>
+                <div style="height: 300px">
+                    <LeftThree
+                        :key="childKey"
+                        @openDialog="handleDialog"
+                    ></LeftThree>
+                </div>
             </div>
-            <div :class="['single-sec', { isActive: currentLefIndex === item.id }]" v-for="item in searchLefSec" :key="item.id" @click="changeLefSec(item)">
-                {{ item.title }}
+
+            <!-- 中间3D效果展示 -->
+            <div class="centerModuleBox">
+                <div class="center-top">
+                    <!-- 宁夏地图 -->
+                    <CountryMap
+                        :send-height="'627px'"
+                        :send-geo="geoData"
+                        @closeMap="handleCloseMap"
+                    ></CountryMap>
+                </div>
+            </div>
+            <!-- 右侧数据模块列表 -->
+            <div class="rightModuleBox">
+                <div style="height: 470px; margin-bottom: 10px">
+                    <RightOne
+                        :key="childKey"
+                        @openDialog="handleDialog"
+                    ></RightOne>
+                </div>
+                <div style="height: 470px">
+                    <rightTwo
+                        :key="childKey"
+                        @openDialog="handleDialog"
+                    ></rightTwo>
+                </div>
+            </div>
+        </div>
+        <!-- 地图点击二级页面 -->
+        <div class="page-cont" v-if="showSubView">
+            <div class="lef-secs">
+                <div
+                    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
+                    >
+                </div>
+                <div
+                    :class="[
+                        'single-sec',
+                        { isActive: currentLefIndex === item.id },
+                    ]"
+                    v-for="item in searchLefSec"
+                    :key="item.id"
+                    @click="changeLefSec(item)"
+                >
+                    {{ item.title }}
+                </div>
+            </div>
+
+            <div class="rig-components">
+                <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 class="rig-components">
-          <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>
+        <!-- 弹窗统一控制组件 -->
+        <common-dialog ref="dialogRef"></common-dialog>
     </div>
-
-
-
-    <!-- 弹窗统一控制组件 -->
-    <common-dialog ref="dialogRef"></common-dialog>  
-
-  </div>
 </template>
 
 <script>
@@ -97,365 +135,346 @@ 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'
+import { querySubProjInfoApi } from '@/api/substation/substation'
 export default {
-  components: {
-    GlobalBar,
-    LeftOne,
-    LeftTwo,
-    LeftThree,
-    LeftFour,
-    RightOne,
-    rightTwo,
-    rightThree,
-    RightFour,
-    CenterBottom,
-    Center3DMap,
-    CenterTop,
-    CountryMap,
-    CenterFold,
-    CommonDialog,
-    DipDialog,
-    EnvirDialog,
-    ManDetect,
-    EnvirDetect,
-    TowerDetect,
-    PitDetect
-  },
-  name: 'Home',
-  data() {
-    return {
-      childKey: 0,
-      currentIndex: 1,
-      geoData: undefined,
-      currentLefIndex: null,  
-      searchIpt: undefined,  
-      lefSecList: [
-        { title: '人员检测类', id: 1 },
-        { title: '环境检测类', id: 2 },
-        { title: '组塔检测类', id: 3 },
-        { title: '基坑检测类', id: 4 },
-      ],
-      lefSendMsg: undefined,
-      showSubView:false,
-    }
-  },
-  created() {
-    // const map = new BMap.Map('map-container')
-    // this.map = map
-  },
+    components: {
+        GlobalBar,
+        LeftOne,
+        LeftTwo,
+        LeftThree,
+        LeftFour,
+        RightOne,
+        rightTwo,
+        rightThree,
+        RightFour,
+        CenterBottom,
+        Center3DMap,
+        CenterTop,
+        CountryMap,
+        CenterFold,
+        CommonDialog,
+        DipDialog,
+        EnvirDialog,
+        ManDetect,
+        EnvirDetect,
+        TowerDetect,
+        PitDetect,
+    },
+    name: 'Home',
+    data() {
+        return {
+            childKey: 0,
+            currentIndex: 1,
+            geoData: undefined,
+            currentLefIndex: null,
+            searchIpt: undefined,
+            lefSecList: [
+                { title: '人员检测类', id: 1 },
+                { title: '环境检测类', id: 2 },
+                { title: '组塔检测类', id: 3 },
+                { title: '基坑检测类', id: 4 },
+            ],
+            lefSendMsg: undefined,
+            showSubView: false,
+        }
+    },
+    created() {
+        // const map = new BMap.Map('map-container')
+        // this.map = map
+    },
 
-  mounted() {
-    this.getGeoData()
-    setInterval(() => {
-      this.childKey++
-      this.getGeoData()
-    }, 1000 * 60)
-    /* this.geoData = [
+    mounted() {
+        this.getGeoData()
+        setInterval(() => {
+            this.childKey++
+            this.getGeoData()
+        }, 1000 * 60)
+        /* this.geoData = [
       { name: '北京市', projName: '王府井工程', itemStyle: { normal: { areaColor: '#7DDEFF' } }, value: [116.407526, 39.90403] },
       { name: '上海市', projName: '外滩工程', itemStyle: { normal: { areaColor: '#7DDEFF' } }, value: [121.473701, 31.230416] },
       { name: '云南省', projName: '香格里拉工程', itemStyle: { normal: { areaColor: '#7DDEFF' } }, value: [102.103365, 24.235567] },
       { name: '陕西省', projName: '大雁塔工程', itemStyle: { normal: { areaColor: '#7DDEFF' } }, value: [108.551244, 34.150234] },
       { name: '新疆维吾尔自治区', projName: '喀什工程', itemStyle: { normal: { areaColor: '#7DDEFF' } }, value: [87.627704, 43.793026] },
     ] */
-  },
-  computed: {
-    searchLefSec() {
-      if(!this.searchIpt) {
-        return this.lefSecList
-      }
-      return this.lefSecList.filter(item => {
-        return item.title.includes(this.searchIpt)
-      })
-    }
-  },
-  methods: {
-    async getGeoData() {
-      let res = await querySubProjInfoApi()
-      console.log(res, 'geo')
-      this.geoData = res.data.data.map(item => {
-        console.log(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'
+    },
+    computed: {
+        searchLefSec() {
+            if (!this.searchIpt) {
+                return this.lefSecList
             }
-          },
-          value: [
-            Number(item.lon),
-            Number(item.lat)
-          ],
-          currentLefIndex: null,  
-          lefSecList: [
-            { title: '人员检测类', id: 1 },
-            { title: '环境检测类', id: 2 },
-            { title: '组塔检测类', id: 3 },
-            { title: '基坑检测类', id: 4 },
-          ],
-          lefSendMsg: undefined,
-        }
-      })
+            return this.lefSecList.filter((item) => {
+                return item.title.includes(this.searchIpt)
+            })
+        },
     },
-    handleDialog(val) {
-      this.$refs.dialogRef.setOpen({
-        open: true,
-        param: val
-      })
+    methods: {
+        async getGeoData() {
+            let res = await querySubProjInfoApi()
+            console.log(res, 'geo')
+            this.geoData = res.data.data.map((item) => {
+                console.log(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)],
+                    currentLefIndex: null,
+                    lefSecList: [
+                        { title: '人员检测类', id: 1 },
+                        { title: '环境检测类', id: 2 },
+                        { title: '组塔检测类', id: 3 },
+                        { title: '基坑检测类', id: 4 },
+                    ],
+                    lefSendMsg: undefined,
+                }
+            })
+        },
+        handleDialog(val) {
+            this.$refs.dialogRef.setOpen({
+                open: true,
+                param: val,
+            })
+        },
+        handleCloseMap(val) {
+            console.log(val, 'closeMap')
+            this.lefSendMsg = val.value
+            this.currentLefIndex = 1
+            this.showSubView = true
+        },
+        changeLefSec(val) {
+            this.currentLefIndex = val.id
+        },
+        //关闭二级页面
+        handelCloseSub() {
+            this.showSubView = false
+            this.getGeoData()
+        },
     },
-    handleCloseMap(val) {
-      console.log(val, 'closeMap')
-      this.lefSendMsg=val.value;
-      this.currentLefIndex=1
-      this.showSubView=true;
-    },
-    changeLefSec(val) {
-      this.currentLefIndex = val.id
-    },
-    //关闭二级页面
-    handelCloseSub(){
-      this.showSubView = false
-      this.getGeoData()
-    },
-  }
 }
 </script>
 
-<style lang='less' scoped>
+<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;
-  .tit-cont{
-    position: absolute;
-    left: 0;
-    top: 0;
     width: 100%;
-    height: 110px;
-    background: url(../../assets/img/title.png) no-repeat center;
-
-    .inner-tit{
-      width: 100%;
-      height: 60px;
-      display: flex;
-      justify-content: space-around;
-      align-items: end;
-
-      .single-tit{
-        font-size: 22px;
-        width: 10%;
-        display: flex;
-        justify-content: space-around;
-        color: #ABB0B8;
-        cursor: pointer;
-        h4{
-          width: 100%;
-          height: 100%;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-          align-items: center;
-          img{
-            width: 100%;
-            height: 12px;
-          }
-        }
-      }
-      .isActive{
-        color: #2859B4;
-      }
-
-    }
-
-  }
-  // .homePage_title {
-  //   position: absolute;
-  //   left: 40.3%;
-  //   // top: 27%;
-  //   div {
-  //     width: 410px;
-  //     height: 55px;
-  //     font-size: 40px;
-  //     font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
-  //     font-weight: 800;
-  //     line-height: 60px;
-  //     letter-spacing: 8px;
-  //     text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
-  //     background-image: linear-gradient(
-  //       to bottom,
-  //       #f6fcff 50%,
-  //       #a5deff 75%; #69c9ff 100%
-  //     );
-  //     color: transparent;
-  //     background-clip: text;
-  //   }
-  // }
-  .container {
-    display: flex;
-    width: 100%;
-    min-height: calc(100vh - 85px);
-
-    .leftModuleBox {
-      width: 520px;
-      padding-left: 26px;
-      display: flex;
-      flex-direction: column;
-      flex-wrap: wrap;
-    }
-
-    .centerModuleBox {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      flex-wrap: wrap;
-      justify-content: center;
-      margin: 0 15px;
-      position: relative;
-
-      .homePage-fold {
+    height: 100%;
+    background: url(../../assets/img/bgd.png) no-repeat center;
+    background-size: 100% 100%;
+    color: #fff;
+    position: relative;
+    .tit-cont {
         position: absolute;
-        left: 45%;
-        top: -2%;
-        width: 949px;
-        z-index: 2000;
-      }
-
-      .buttom-box {
-        position: absolute;
-        left: 72%;
-        top: 59%;
-
-        .buttonTop {
-          display: flex;
-          justify-content: flex-start;
-          :first-child {
-            margin-right: 10px;
-          }
-        }
-
-        .buttom1 {
-          width: 129px;
-          height: 56px;
-          background: url(../../assets/img/myImage/no_active.png) no-repeat
-          center;
-          background-size: 100% 100%;
-          text-align: center;
-          line-height: 56px;
-          border-radius: 4px;
-          font-size: 16px;
-          color: #979bb2;
-          cursor: pointer;
-        }
-
-        .buttom1.on {
-          width: 129px;
-          height: 56px;
-          background: url(../../assets/img/myImage/active.png) no-repeat center;
-          background-size: 100% 100%;
-          text-align: center;
-          line-height: 56px;
-          border-radius: 4px;
-          font-size: 16px;
-          color: #fff;
-          cursor: pointer;
-        }
-      }
-    }
-
-    .center-top {
-      width: 100%;
-      height: 755px;
-    }
-
-    .center-bottom {
-      min-height: calc(100vh - 85px - 655px);
-    }
-
-    .rightModuleBox {
-      width: 520px;
-      display: flex;
-      flex-direction: column;
-      flex-wrap: wrap;
-      padding-right: 26px;
-    }
-
-    .item {
-      margin-bottom: 12px;
-    }
-  }
-
-  .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{
+        left: 0;
+        top: 0;
         width: 100%;
-        box-sizing: border-box;
-        border-radius: 5px;
-        cursor: pointer;
-        padding: 10px;
+        height: 110px;
+        background: url(../../assets/img/title.png) no-repeat center;
+
+        .inner-tit {
+            width: 100%;
+            height: 60px;
+            display: flex;
+            justify-content: space-around;
+            align-items: flex-end;
+
+            .single-tit {
+                font-size: 22px;
+                width: 10%;
+                display: flex;
+                justify-content: space-around;
+                color: #abb0b8;
+                cursor: pointer;
+                h4 {
+                    width: 100%;
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-around;
+                    align-items: center;
+                    img {
+                        width: 100%;
+                        height: 12px;
+                    }
+                }
+            }
+            .isActive {
+                color: #2859b4;
+            }
+        }
+    }
+    // .homePage_title {
+    //   position: absolute;
+    //   left: 40.3%;
+    //   // top: 27%;
+    //   div {
+    //     width: 410px;
+    //     height: 55px;
+    //     font-size: 40px;
+    //     font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
+    //     font-weight: 800;
+    //     line-height: 60px;
+    //     letter-spacing: 8px;
+    //     text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
+    //     background-image: linear-gradient(
+    //       to bottom,
+    //       #f6fcff 50%,
+    //       #a5deff 75%; #69c9ff 100%
+    //     );
+    //     color: transparent;
+    //     background-clip: text;
+    //   }
+    // }
+    .container {
         display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #000;
-        font-size: 18px;
-        background-color: #DEECFF;
-        border: 1px solid #D1E1FF;
-        margin-bottom: 15px;
+        width: 100%;
+        min-height: calc(100vh - 85px);
 
-      }
+        .leftModuleBox {
+            width: 520px;
+            padding-left: 26px;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: wrap;
+        }
 
-      .isActive{
+        .centerModuleBox {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: wrap;
+            justify-content: center;
+            margin: 0 15px;
+            position: relative;
 
-        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;
+            .homePage-fold {
+                position: absolute;
+                left: 45%;
+                top: -2%;
+                width: 949px;
+                z-index: 2000;
+            }
 
-      }
+            .buttom-box {
+                position: absolute;
+                left: 72%;
+                top: 59%;
 
+                .buttonTop {
+                    display: flex;
+                    justify-content: flex-start;
+                    :first-child {
+                        margin-right: 10px;
+                    }
+                }
+
+                .buttom1 {
+                    width: 129px;
+                    height: 56px;
+                    background: url(../../assets/img/myImage/no_active.png)
+                        no-repeat center;
+                    background-size: 100% 100%;
+                    text-align: center;
+                    line-height: 56px;
+                    border-radius: 4px;
+                    font-size: 16px;
+                    color: #979bb2;
+                    cursor: pointer;
+                }
+
+                .buttom1.on {
+                    width: 129px;
+                    height: 56px;
+                    background: url(../../assets/img/myImage/active.png)
+                        no-repeat center;
+                    background-size: 100% 100%;
+                    text-align: center;
+                    line-height: 56px;
+                    border-radius: 4px;
+                    font-size: 16px;
+                    color: #fff;
+                    cursor: pointer;
+                }
+            }
+        }
+
+        .center-top {
+            width: 100%;
+            height: 755px;
+        }
+
+        .center-bottom {
+            min-height: calc(100vh - 85px - 655px);
+        }
+
+        .rightModuleBox {
+            width: 520px;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: wrap;
+            padding-right: 26px;
+        }
+
+        .item {
+            margin-bottom: 12px;
+        }
     }
 
-    .rig-maps, .rig-components{
+    .page-cont {
+        width: 100%;
+        height: 940px;
+        display: flex;
+        justify-content: space-between;
 
-      width: 79%;
-      height: 100%;
+        .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>