大屏地图修改首页修改，变电，线路数据修改

src/api/home/home.js

@@ -2,7 +2,7 @@ import request from '@/utils/request'
 
 // 首页设备数据
 export const queryDeviceInfoApi = (data) => {
-  return request.get(`/base/screen/home/getDeviceModelData`, {
+  return request.get(`/base/screen/homeTwo/getDeviceModelDataAmount`, {
     params: data
   })
 }
@@ -27,6 +27,12 @@ export const queryRiskInfoApi = (data) => {
     params: data
   })
 }
+// 首页安全隐患预测预警
+export const getWarnPredictionRecord = (data) => {
+  return request.get(`/base/screen/homeTwo/getWarnPredictionRecord`, {
+    params: data
+  })
+}
 
 // 查询工作台
 export const queryTableApi = (data) => {
@@ -39,3 +45,10 @@ export const queryTableApi = (data) => {
 export const editTableApi = (data) => {
   return request.post(`/base/screen/home/setDeskConfig`, data)
 }
+
+// 根据工程id获取大屏首页地图工程信息
+export const getProjectAndDeviceById = (data) => {
+  return request.get(`/base/screen/homeTwo/getProjectAndDeviceById`, {
+    params: data
+  })
+}

src/api/tableApis.js

@@ -1,5 +1,18 @@
 import request from '@/utils/request'
 
+// 首页安全隐患预测预警 - 分页
+export const getWarnPredictionRecordAll = (data) => {
+  return request.get(`/base/screen/homeTwo/getWarnPredictionRecordAll`, {
+    params: data
+  })
+}
+// 首页安全隐患预测预警 - 不分页
+export const getWarnPredictionRecord = (data) => {
+  return request.get(`/base/screen/homeTwo/getWarnPredictionRecord`, {
+    params: data
+  })
+}
+
 // 首页施工风险数据 - 分页
 export const queryRiskInfoApi = (data) => {
   return request.get(`/base/screen/home/getDeviceWarnRecordPage`, {
@@ -23,7 +36,7 @@ export const queryProjListApi = (data) => {
 
 /** 设备列表查询 */
 export const queryDeviceListApi = (data) => {
-  return request.get('/base/tbDevice/list', {
+  return request.get('/base/screen/homeTwo/getDeviceModelDataAll', {
     params: data
   })
 }

src/components/home/commonDialog.vue

@@ -173,6 +173,7 @@ import Pagination from '../Pagination/index.vue'
 import {
     querySenseDeviceInfoApi,
     queryRiskInfoApi,
+    getWarnPredictionRecordAll,
     queryProjListApi,
     queryDeviceListApi
 } from '@/api/tableApis'
@@ -212,6 +213,7 @@ export default {
     methods: {
         querySenseDeviceInfoApi,
         queryRiskInfoApi,
+        getWarnPredictionRecordAll,
         queryProjListApi,
         queryDeviceListApi,
         setOpen(v) {
@@ -226,7 +228,7 @@ export default {
                     this.columnList = [
                         { t_props: 'devName', t_label: '设备名称' },
                         { t_props: 'devCode', t_label: '设备编号' },
-                        { t_props: 'bdName', t_label: '边代名称' },
+                        { t_props: 'proName', t_label: '所属工程' },
                         { t_props: 'devStatusName', t_label: '工作状态' },
                     ]
                     this.currentFunc = this.queryDeviceListApi
@@ -236,7 +238,7 @@ export default {
                     this.columnList = [
                         { t_props: 'devName', t_label: '设备名称' },
                         { t_props: 'devCode', t_label: '设备编号' },
-                        { t_props: 'bdName', t_label: '边代名称' },
+                        { t_props: 'proName', t_label: '所属工程' },
                         { t_props: 'devStatusName', t_label: '工作状态' },
                     ]
                     this.currentFunc = this.queryDeviceListApi
@@ -396,11 +398,11 @@ export default {
                 case 12:
                     this.columnList = [
                         { t_props: 'proName', t_label: '工程名称' },
-                        { t_props: 'warnTime', t_label: '预警时间' },
+                        { t_props: 'createTime', t_label: '预警时间' },
-                        { t_props: 'warnType', t_label: '预警内容' },
+                        { t_props: 'content', t_label: '预警内容' },
                     ]
-                    this.currentFunc = this.queryRiskInfoApi
+                    this.currentFunc = this.getWarnPredictionRecordAll
-                    this.getTableList(this.queryRiskInfoApi)
+                    this.getTableList(this.getWarnPredictionRecordAll)
                     break;
                 case 13:
                   this.columnList = [

src/components/home/countryMap.vue

@@ -387,6 +387,7 @@ export default {
                     {
                         show: true,
                         map: 'china',
+                        type: 'map',
                         aspectScale: 0.8,
                         zoom: this.zoom,
                         roam: true, // 是否允许缩放
@@ -430,6 +431,37 @@ export default {
                         },
                         zlevel: 1,
                         regions: this.geoVal || [],
+                        tooltip: {
+                            show:true,
+                            trigger: 'item',
+                            formatter: function (params) {
+                                console.log(params)
+                                if (params.componentSubType === 'scatter') {
+                                    let className = 'itemColor1 itemColor'
+                                    let html = `
+                                        <div
+                                            id="pop-tooltip"
+                                            style="
+                                            width:260px;height:140px;border-radius: 15px;
+                                            background: linear-gradient(to bottom, #4D8DFF, #57B9FF, #4D8DFF);
+                                            padding:12px;position: relative;display: flex;flex-direction: column;
+                                            "
+                                        >
+                                            <div id="tooltipGB" onclick="document.querySelector('#pop-tooltip').style.display = 'none'" style="position: absolute;cursor: pointer; width:30px;height:30px;line-height:30px;text-align:center;right:5px;top:5px;font-size: 20px;">x</div>
+                                            <div style="font-size: 18px; height: 20px;line-height:20px;">${params.data.projName}</div>
+                                            <div class="scrollTooltip" style="margin-top:10px;flex: 1; overflow-y:auto;white-space:normal;font-size: 16px;font-weight: 400; position:relative; display: flex; flex-direction: column; justify-content: space-around;">
+                                                <span style="padding-bottom: 5px">省份：${params.data.province}</span>
+                                                <span style="padding-bottom: 5px">经度：${params.data.value[0]}</span>
+                                                <span style="padding-bottom: 5px">纬度：${params.data.value[1]}</span>
+                                            </div>
+                                        </div>`
+                                    return html
+                                }
+                                // 可以在这里编写轮播的格式化内容
+                                // return params.name + ': ' + params.value;
+                            }
+ 
+                        },
                     },
                     {
                         map: 'china',
@@ -450,7 +482,6 @@ export default {
                         silent: true,
                         tooltip: {
                             show: false,
-                            trigger: 'item',
                         },
                     },
                 ],
@@ -473,7 +504,6 @@ export default {
                 },
                 tooltip: {
                     trigger: 'item',
-                    triggerOn: 'click',
                     alwaysShowContent: true,
                     showDelay: 0, //浮层显示的延迟
                     transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间
@@ -481,25 +511,26 @@ export default {
                     className: 'iconMap',
                     extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0);',
                     formatter: function (params) {
+                        console.log(params)
                         if (params.componentSubType === 'scatter') {
                             let className = 'itemColor1 itemColor'
                             let html = `
-              <div
+                                <div
-                id="pop-tooltip"
+                                    id="pop-tooltip"
-                style="
+                                    style="
-                  width:260px;height:140px;border-radius: 15px;
+                                    width:260px;height:140px;border-radius: 15px;
-                  background: linear-gradient(to bottom, #4D8DFF, #57B9FF, #4D8DFF);
+                                    background: linear-gradient(to bottom, #4D8DFF, #57B9FF, #4D8DFF);
-                  padding:12px;position: relative;display: flex;flex-direction: column;
+                                    padding:12px;position: relative;display: flex;flex-direction: column;
-                "
+                                    "
-               >
+                                >
-                  <div id="tooltipGB" onclick="document.querySelector('#pop-tooltip').style.display = 'none'" style="position: absolute;cursor: pointer; width:30px;height:30px;line-height:30px;text-align:center;right:5px;top:5px;font-size: 20px;">x</div>
+                                    <div id="tooltipGB" onclick="document.querySelector('#pop-tooltip').style.display = 'none'" style="position: absolute;cursor: pointer; width:30px;height:30px;line-height:30px;text-align:center;right:5px;top:5px;font-size: 20px;">x</div>
-                  <div style="font-size: 18px; height: 20px;line-height:20px;">${params.data.projName}</div>
+                                    <div style="font-size: 18px; height: 20px;line-height:20px;">${params.data.projName}</div>
-                  <div class="scrollTooltip" style="margin-top:10px;flex: 1; overflow-y:auto;white-space:normal;font-size: 16px;font-weight: 400; position:relative; display: flex; flex-direction: column; justify-content: space-around;">
+                                    <div class="scrollTooltip" style="margin-top:10px;flex: 1; overflow-y:auto;white-space:normal;font-size: 16px;font-weight: 400; position:relative; display: flex; flex-direction: column; justify-content: space-around;">
-                    <span style="padding-bottom: 5px">省份：${params.data.province}</span>
+                                        <span style="padding-bottom: 5px">省份：${params.data.province}</span>
-                    <span style="padding-bottom: 5px">经度：${params.data.value[0]}</span>
+                                        <span style="padding-bottom: 5px">经度：${params.data.value[0]}</span>
-                    <span style="padding-bottom: 5px">纬度：${params.data.value[1]}</span>
+                                        <span style="padding-bottom: 5px">纬度：${params.data.value[1]}</span>
-                  </div>
+                                    </div>
-              </div>`
+                                </div>`
                             return html
                         }
                     },
@@ -722,6 +753,7 @@ export default {
 
             this.mapEcharts.on('click', function (params) {
                 if (params.componentSubType === 'scatter') {
+                    // console.log(params)
                     let option = that.mapEcharts.getOption() //获得option对象
                     // 点击变黄
                     option.series[0].data.forEach((item) => {
@@ -736,6 +768,7 @@ export default {
                     that.mapEcharts.setOption(option)
                     that.$emit('closeMap', { value: params.data })
                 }
+
                 /*if (params.seriesType === 'scatter' && !params.name) {
           let option = that.mapEcharts.getOption() //获得option对象
           // 点击变黄

src/components/home/leftTwo.vue

@@ -33,8 +33,8 @@
           <span @click="toggleDialog(7)">拉力：</span>
         </div>
         <div class="rig-counts">
-          <span>{{ senseData.towerRakeMonitor }}°</span>
+          <span>{{ senseData.towerRakeMonitor }}个</span>
-          <span>{{ senseData.towerWaterMonitor }}N</span>
+          <span>{{ senseData.towerWaterMonitor }}个</span>
         </div>
       </div>
     </div>
@@ -48,7 +48,7 @@
           <span @click="toggleDialog(8)">拉力：</span>
         </div>
         <div class="rig-counts">
-          <span>{{ senseData.leadStrainMonitor }}N</span>
+          <span>{{ senseData.leadStrainMonitor }}个</span>
         </div>
       </div>
     </div>

src/components/home/rightOne.vue

@@ -19,20 +19,20 @@
         :row-style="rowStyle"
       >
         <el-table-column
-          prop="date"
+          prop="proName"
+          label="工程名称"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="createTime"
           label="日期"
           align="center"
         >
         </el-table-column>
         <el-table-column
-          prop="name"
+          prop="content"
-          label="姓名"
+          label="内容"
-          align="center"
-        >
-        </el-table-column>
-        <el-table-column
-          prop="address"
-          label="地址"
           align="center"
         >
         </el-table-column>
@@ -42,6 +42,9 @@
 </template>
 
 <script>
+import {
+  getWarnPredictionRecord
+} from '@/api/home/home'
 export default {
   components: {
 
@@ -50,61 +53,69 @@ export default {
   data() {
     return {
       tableList: [
-        /* {
+        // {
-          date: 'xxx工程',
+        //   date: 'xxx工程',
-          name: '2024.1.1 12:23',
+        //   name: '2024.1.1 12:23',
-          address: '明天有大风'
+        //   address: '明天有大风'
-        }, {
+        // }, {
-          date: 'xxx工程',
+        //   date: 'xxx工程',
-          name: '2024.1.1 12:23',
+        //   name: '2024.1.1 12:23',
-          address: '明天有大风'
+        //   address: '明天有大风'
-        }, {
+        // }, {
-          date: 'xxx工程',
+        //   date: 'xxx工程',
-          name: '2024.1.1 12:23',
+        //   name: '2024.1.1 12:23',
-          address: '明天有大风'
+        //   address: '明天有大风'
-        }, {
+        // }, {
-          date: 'xxx工程',
+        //   date: 'xxx工程',
-          name: '2024.1.1 12:23',
+        //   name: '2024.1.1 12:23',
-          address: '明天有大风'
+        //   address: '明天有大风'
-        }, {
+        // }, {
-          date: 'xxx工程',
+        //   date: 'xxx工程',
-          name: '2024.1.1 12:23',
+        //   name: '2024.1.1 12:23',
-          address: '明天有大风'
+        //   address: '明天有大风'
-        }, {
+        // }, {
-          date: 'xxx工程',
+        //   date: 'xxx工程',
-          name: '2024.1.1 12:23',
+        //   name: '2024.1.1 12:23',
-          address: '明天有大风'
+        //   address: '明天有大风'
-        }, {
+        // }, {
-          date: 'xxx工程',
+        //   date: 'xxx工程',
-          name: '2024.1.1 12:23',
+        //   name: '2024.1.1 12:23',
-          address: '明天有大风'
+        //   address: '明天有大风'
-        }, {
+        // }, {
-          date: 'xxx工程',
+        //   date: 'xxx工程',
-          name: '2024.1.1 12:23',
+        //   name: '2024.1.1 12:23',
-          address: '明天有大风'
+        //   address: '明天有大风'
-        }, {
+        // }, {
-          date: 'xxx工程',
+        //   date: 'xxx工程',
-          name: '2024.1.1 12:23',
+        //   name: '2024.1.1 12:23',
-          address: '明天有大风'
+        //   address: '明天有大风'
-        }, {
+        // }, {
-          date: 'xxx工程',
+        //   date: 'xxx工程',
-          name: '2024.1.1 12:23',
+        //   name: '2024.1.1 12:23',
-          address: '明天有大风'
+        //   address: '明天有大风'
-        }, {
+        // }, {
-          date: 'xxx工程',
+        //   date: 'xxx工程',
-          name: '2024.1.1 12:23',
+        //   name: '2024.1.1 12:23',
-          address: '明天有大风'
+        //   address: '明天有大风'
-        }, */
+        // }, 
       ]
     };
   },
   mounted() {
-
+    this.getRiskData()
   },
   destroyed() {
 
   },
   methods: {
+    async getRiskData() {
+        let param = {
+                startTime:this.timeFormat(),
+                endTime:this.timeFormat(),
+            }
+          let res = await getWarnPredictionRecord(param)
+          this.tableList = res.data;
+    },
     toggleDialog(v) {
       this.$emit('openDialog', { order: v })
     },
@@ -119,6 +130,29 @@ export default {
         }
       }
     },
+    timeFormat() {
+			let date = new Date();
+			// 若传入时间为假值，则取当前时间
+			let formatStr = 'yyyy-mm-dd';
+			const timeSource = {
+				'y': date.getFullYear().toString(), // 年
+				'm': (date.getMonth() + 1).toString().padStart(2, '0'), // 月
+				'd': date.getDate().toString().padStart(2, '0'), // 日
+				'h': date.getHours().toString().padStart(2, '0'), // 时
+				'M': date.getMinutes().toString().padStart(2, '0'), // 分
+				's': date.getSeconds().toString().padStart(2, '0') // 秒
+				// 有其他格式化字符需求可以继续添加，必须转化成字符串
+			}
+			for (const key in timeSource) {
+				const [ret] = new RegExp(`${key}+`).exec(formatStr) || []
+				if (ret) {
+					// 年可能只需展示两位
+					const beginIndex = key === 'y' && ret.length === 2 ? 2 : 0
+					formatStr = formatStr.replace(ret, timeSource[key].slice(beginIndex))
+				}
+			}
+			return formatStr
+		},
   },
 };
 </script>
@@ -139,7 +173,7 @@ export default {
   border-radius: 5px;
   border: 1px solid #EFF2FC;
   box-shadow: 2px 2px 2px #D9E0F3;
-  overflow-y: auto;
+  
 
 
   .inner-tit{
@@ -161,17 +195,15 @@ export default {
     margin-bottom: 15px;
 
     span{
-
       color: #757B87;
-
     }
 
   }
 
   .risk-table{
-
+    height: 88%;
     width: 100%;
-
+    overflow-y: auto;
   }
 
 }

src/components/home/rightTwo.vue

@@ -15,7 +15,7 @@
                 :show-header="false"
                 :row-style="rowStyle"
             >
-                <el-table-column prop="projectName" label="" align="center">
+                <el-table-column prop="devName" label="" align="center">
                 </el-table-column>
                 <el-table-column prop="warnTime" label="" align="center">
                 </el-table-column>
@@ -136,7 +136,9 @@ export default {
     }
 
     .build-table {
+        height: 80%;
         width: 100%;
+        overflow-y: auto;
     }
 }
 </style>

src/views/Lines/index.vue

@@ -32,14 +32,18 @@
             {{ item.projectName }}
           </div>
         </div> 
-        <!-- 选项 -->
+        <div v-if="showLefSec" style="display: flex;margin-bottom: 20px;align-items: center;">
-        <el-input
+          <img src="../../assets/img/back.png" alt=""  @click="handelCloseSub">
-          placeholder="请输入内容"
+          <div style="color: #000;font-size: 24px;font-weight: bold;margin-left: 20px;">{{ lefSendMsg.projName }}</div>
-          suffix-icon="el-icon-search"
+          <!-- 选项 -->
-          v-model="searchIpt"
+          <!-- <el-input
-          style="margin-bottom: 20px"
+            placeholder="请输入内容"
-          v-if="showLefSec"
+            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"
@@ -201,6 +205,7 @@ export default {
               name: tower.gtName,
               projName: tower.gtName,
               projectId: proj.projectId,
+              province: proj.areaName,
               itemStyle: { normal: { areaColor: '#7DDEFF' } },
               value: [
                 Number(tower.lon),
@@ -250,12 +255,19 @@ export default {
       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()
     }
   }
 }

src/views/Substation/index.vue

@@ -40,14 +40,11 @@
             {{ item.projectName }}
           </div>
         </div>
-        <!-- 选项 -->
+        
-        <el-input
+        <div v-if="showLefSec" style="display: flex;margin-bottom: 20px;align-items: center;">
-          placeholder="请输入内容"
+          <img src="../../assets/img/back.png" alt=""  @click="handelCloseSub">
-          suffix-icon="el-icon-search"
+          <div style="color: #000;font-size: 24px;font-weight: bold;margin-left: 20px;">{{ sendMsg.projectName }}</div>
-          v-model="searchIpt"
+        </div>
-          style="margin-bottom: 20px"
-          v-if="showLefSec"
-        />
         <div
           :class="['single-sec', { isActive: currentLefIndex === item.id }]"
           v-for="item in searchLefSec"
@@ -227,6 +224,12 @@ export default {
       this.showLefSec = true
       this.showProjSec = false
     },
+    //关闭二级页面
+    handelCloseSub(){
+      this.showProjSec = true
+      this.showLefSec = false
+      this.getGeoData()
+    },
     changeLefSec(val) {
       this.currentLefIndex = val.id
     },

src/views/homePage/index.vue

@@ -1,40 +1,9 @@
 <template>
   <div class="homePage">
-<!--    <global-bar
+    <div class="container" v-if="!showSubView">
-      :index-count="currentIndex"
-    >
-    </global-bar>-->
-    <!--    <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>
-    &lt;!&ndash;        <div class="tit-cen"></div>
-            <div class="tit-rig">2</div>&ndash;&gt;
-          </div>
-        </div>-->
-    <!-- <div class="homePage_title" @click="routerClick">
-      <div>智慧仓储管理平台</div>
-    </div> -->
-    <div class="container">
       <!-- 左侧数据模块列表 -->
       <div class="leftModuleBox">
-        <div style="height: 200px; margin-bottom: 10px">
+        <div style="height: 200px; margin-bottom: 10px" >
           <LeftOne :key="childKey" @openDialog="handleDialog"></LeftOne>
         </div>
         <div style="height: 430px; margin-bottom: 10px">
@@ -44,6 +13,7 @@
           <LeftThree :key="childKey" @openDialog="handleDialog"></LeftThree>
         </div>
       </div>
+      
       <!-- 中间3D效果展示 -->
       <div class="centerModuleBox">
         <div class="center-top">
@@ -51,31 +21,9 @@
           <CountryMap
             :send-height="'627px'"
             :send-geo="geoData"
+            @closeMap="handleCloseMap"
           ></CountryMap>
-          <!-- 重庆地图 -->
-          <!--          <Center3DMap></Center3DMap>-->
         </div>
-        <!--        <div class="center-bottom">
-                  <CenterBottom></CenterBottom>
-                </div>-->
-        <!--         <div class="buttom-box">
-                  <div class="buttonTop">
-                    <div
-                      :class="maType == 1 ? 'on' : ''"
-                      class="buttom1"
-                      @click="getMapSelect(1)"
-                    >
-                      施工机具
-                    </div>
-                    <div
-                      :class="maType == 2 ? 'on' : ''"
-                      class="buttom1"
-                      @click="getMapSelect(2)"
-                    >
-                      工器具
-                    </div>
-                  </div>
-                </div>-->
       </div>
       <!-- 右侧数据模块列表 -->
       <div class="rightModuleBox">
@@ -85,52 +33,44 @@
         <div style="height: 470px">
           <rightTwo :key="childKey" @openDialog="handleDialog"></rightTwo>
         </div>
-        <!--        <rightThree></rightThree>-->
-        <!--        <LeftThree></LeftThree>-->
-        <!-- <RightFour></RightFour> -->
       </div>
     </div>
-    <!-- 获取天气 -->
+    <!-- 地图点击二级页面 -->
-    <!--    <div class="weather">
+    <div class="page-cont" v-if="showSubView">
-          <div class="weather_box">
+        <div class="lef-secs">
-            <div><img alt="" src="../../assets/img/myImage//time.png" /></div>
+            <div style="display: flex;margin-bottom: 20px;align-items: center;">
-            <div class="dateTimeString">{{ dateTimeString }}</div>
+              <img src="../../assets/img/back.png" alt=""  @click="handelCloseSub">
-            &lt;!&ndash; <div class="weatherData">
+              <div style="color: #000;font-size: 24px;font-weight: bold;margin-left: 20px;">{{ lefSendMsg.projName }}</div>
-              <img class="weatherUrl" :src="weatherUrl" alt="" /><span
+            </div>
-                class="weather_title"
+            <div :class="['single-sec', { isActive: currentLefIndex === item.id }]" v-for="item in searchLefSec" :key="item.id" @click="changeLefSec(item)">
-                >{{ weatherData.weather }}</span
+                {{ item.title }}
-              ><span>{{ weatherData.temperature }}℃</span>
+            </div>
-            </div> &ndash;&gt;
-          </div>
         </div>
-        <div class="sound">
+
-          <img src="../../assets/img/myImage/sound.png" alt="" />
+        <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 class="wrap">
+    </div>
-          <div id="inner">
-            <span id="first" v-for="(item, index) of transformList" :key="index">{{
-              '检修预警提示：' +
-              item.machineName +
-              '下次检修日期：' +
-              item.nextCheckTime +
-              '，请注意查收！'
-            }}</span>
-          </div>
-        </div>-->
 
-    <common-dialog
-      ref="dialogRef"
-    >
 
-    </common-dialog>
 
-    <!--    <envir-dialog
+    <!-- 弹窗统一控制组件 -->
-          ref="envirRef"
+    <common-dialog ref="dialogRef"></common-dialog>  
-        ></envir-dialog>
-
-        <dip-dialog
-          ref="dipRef"
-        ></dip-dialog>-->
 
   </div>
 </template>
@@ -153,6 +93,10 @@ import CenterFold from '../../components/home/centerFold.vue'
 import CommonDialog from '../../components/home/commonDialog.vue'
 import DipDialog from '../../components/dialog/dipDialog.vue'
 import EnvirDialog from '../../components/dialog/envirDialog.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'
@@ -174,14 +118,28 @@ export default {
     CenterFold,
     CommonDialog,
     DipDialog,
-    EnvirDialog
+    EnvirDialog,
+    ManDetect,
+    EnvirDetect,
+    TowerDetect,
+    PitDetect
   },
   name: 'Home',
   data() {
     return {
       childKey: 0,
       currentIndex: 1,
-      geoData: undefined
+      geoData: undefined,
+      currentLefIndex: null,  
+      searchIpt: undefined,  
+      lefSecList: [
+        { title: '人员检测类', id: 1 },
+        { title: '环境检测类', id: 2 },
+        { title: '组塔检测类', id: 3 },
+        { title: '基坑检测类', id: 4 },
+      ],
+      lefSendMsg: undefined,
+      showSubView:false,
     }
   },
   created() {
@@ -203,6 +161,16 @@ export default {
       { 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()
@@ -212,6 +180,7 @@ export default {
           name: item.projectName,
           province: item.areaName,
           projName: item.projectName,
+          projectId: item.projectId,
           itemStyle: {
             normal: {
               areaColor: '#7DDEFF'
@@ -220,7 +189,15 @@ export default {
           value: [
             Number(item.lon),
             Number(item.lat)
-          ]
+          ],
+          currentLefIndex: null,  
+          lefSecList: [
+            { title: '人员检测类', id: 1 },
+            { title: '环境检测类', id: 2 },
+            { title: '组塔检测类', id: 3 },
+            { title: '基坑检测类', id: 4 },
+          ],
+          lefSendMsg: undefined,
         }
       })
     },
@@ -230,6 +207,20 @@ export default {
         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()
+    },
   }
 }
 </script>
@@ -306,8 +297,6 @@ export default {
   //     background-clip: text;
   //   }
   // }
-
-
   .container {
     display: flex;
     width: 100%;
@@ -401,5 +390,67 @@ export default {
       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{
+        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>