优化地图组件与交互功能

src/api/components/supermap.js

@@ -6,7 +6,7 @@ export function queryVectorTilesMapList(deptId) {
     url: '/system/sysMenuVisuMap/queryMap',
     method: 'post',
     data: {
-      visuId: 4,
+      visuId: 42,
       deptId: deptId
     }
   })
@@ -31,7 +31,7 @@ export function queryMap(deptId) {
     url: '/system/sysMenuVisuMap/queryMap',
     method: 'post',
     data: {
-      visuId: 37,
+      visuId: 42,
       deptId: deptId
     }
   })

src/components/supermap-2.5d.vue

@@ -137,6 +137,7 @@ export default {
       eventStatusValue: '',
       cameraCode: '',
       cameraRadius: '',
+      open_LifelineList: [], //生命线图层控制图层
       imageryProvider_hideList: [], //隐藏图层实体
       open_hideList: [], //隐藏图层实体
       openModel_hideList: [], //隐藏图层实体
@@ -144,7 +145,6 @@ export default {
       findDisplayed_hideList: [], //隐藏图层实体
       /*************************图层过滤属性*********************/
       _click: null,
-      dataMap: {},
       _parameter: null,
       positioningEntity: null,
     }
@@ -223,11 +223,6 @@ export default {
             }
           }, 100 * i)
         }
-        // that.scene.open({
-        //   autoSetView : false      //不自动定位
-        // },'http://116.142.80.12:8090/iserver/services/3D-SiPingReLi/rest/realspace')
-        // that.scene.open('http://116.142.80.12:8090/iserver/services/3D-huashengranqi/rest/realspace')
-        // that.scene.open('http://116.142.80.12:8090/iserver/services/3D-reli_yici_erci_guanduan/rest/realspace');
       }, 2000)
       that.viewer.selectedEntityChanged.addEventListener(function(entity) {
         if (entity != undefined && Reflect.has(entity, 'layerID')) {
@@ -309,8 +304,14 @@ export default {
         }
       });
       that.handler = new SuperMap3D.ScreenSpaceEventHandler(that.scene.canvas);
-      that.scene.open('http://116.142.80.12:8090/iserver/services/3D-reli_yici_erci_guanduan/rest/realspace')
-      that.scene.open('http://116.142.80.12:8090/iserver/services/3D-huashengranqi/rest/realspace');
+      // that.scene.open('http://116.142.80.12:8090/iserver/services/3D-aode/rest/realspace')
+      // that.scene.open('http://116.142.80.12:8090/iserver/services/3D-ganghuaranqi/rest/realspace')
+      // that.scene.open(' http://116.142.80.12:8090/iserver/services/3D-huashengranqi-2/rest/realspace')
+      // that.scene.open('http://116.142.80.12:8090/iserver/services/3D-PaiShui/rest/realspace')
+      // that.scene.open('http://116.142.80.12:8090/iserver/services/3D-reli_yici_erci_guanduan-2/rest/realspace')
+      // that.viewer.imageryLayers.addImageryProvider(new SuperMap3D.SuperMapImageryProvider({
+      //   url:'http://116.142.80.12:8090/iserver/services/map-SIPING/rest/maps/XianJie_tiexi'
+      // }))
       that.flyTo(longitude, latitude, height)
       //设置鼠标左键单击回调事件
       that.handler.setInputAction(function (e) {
@@ -369,6 +370,31 @@ export default {
         )
       })
     },
+    // ***************************生命线---图层过滤 开始************************************************
+    addLifelineOpen(checkedCities) {
+      debugger
+      for(let i=0;i<checkedCities.length;i++){
+        if(checkedCities[i]){
+          alert(checkedCities[i])
+          let obj = this.scene.open(this.superMapRootUrl + checkedCities[i])
+          this.open_LifelineList.push(obj)
+        }
+      }
+    },
+    delLifelineOpen(url){
+      if (this.open_LifelineList != null && this.open_LifelineList.length > 0) {
+        for (let i = 0; i < this.open_LifelineList.length; i++) {
+          SuperMap3D.when.all(this.open_LifelineList[i], function (layers) {
+            for (var layer of layers) {
+              this.scene.layers.remove(layer.name);
+            }
+          });
+        }
+        that.open_LifelineList = []
+      }
+    },
+    // ***************************生命线---图层过滤 结束************************************************
+
     // ***************************图层过滤 开始************************************************
     reload(list) {
       this.removeAllMvt()
@@ -506,9 +532,7 @@ export default {
     addOpen_model(sort, uri) {
       let that = this
       // that.dataMap[sort] = that.scene.open(that.superMapRootUrl + uri)
-      let obj = that.dataMap[sort] = that.scene.open({
-        autoSetView : false      //不自动定位
-      },that.superMapRootUrl + uri)
+      let obj = that.dataMap[sort] = that.scene.open(that.superMapRootUrl + uri)
       //开始加载专题图等数据，8秒后开始执行
       setTimeout(function () {
         /**
@@ -807,9 +831,10 @@ export default {
     },
     addOpen(id, uri) {
       let that = this;
-      let obj = that.scene.open({
-        autoSetView : false      //不自动定位
-      },that.superMapRootUrl + uri)
+      let obj = that.scene.open(that.superMapRootUrl + uri)
+      // {
+      //   autoSetView : false      //不自动定位
+      // },
       that.dataMap[id] = obj
       return obj;
     },

src/views/Cockpit.vue

@@ -20,120 +20,151 @@
               <el-tab-pane label="燃气" name="first">
                 <div class="rq_div tekz_div">
                   <div class="tc_div">
-                  <div class="scrollx">
-                  <span>华生燃气：</span>
-                    <div class="scroll-container">
-                    <el-checkbox-group
-                      v-model="checkedCities1_1">
-                      <el-checkbox v-for="city in cities1_1" :label="city" :key="city">{{city}}</el-checkbox>
-                    </el-checkbox-group>
+                    <div class="scrollx">
+                      <span>华生燃气：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities1_1" @change="handleCheckedCities1_1">
+                          <el-checkbox v-for="city in cities1_1" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
                     </div>
-                </div>
                   </div>
                   <div class="tc_div">
-                    <div class="scrollx"><span>港华燃气：</span> <div class="scroll-container"> <el-checkbox-group
-                    v-model="checkedCities1_2">
-                    <el-checkbox v-for="city in cities1_2" :label="city" :key="city">{{city}}</el-checkbox>
-                  </el-checkbox-group></div></div>
+                    <div class="scrollx"><span>港华燃气：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities1_2"  @change="handleCheckedCities1_2">
+                          <el-checkbox v-for="city in cities1_2" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
+                    </div>
                   </div>
                   <div class="tc_div">
-                    <div class="scrollx"><span>奥德燃气：</span> <div class="scroll-container"><el-checkbox-group
-                    v-model="checkedCities1_3">
-                    <el-checkbox v-for="city in cities1_3" :label="city" :key="city">{{city}}</el-checkbox>
-                  </el-checkbox-group></div></div>
+                    <div class="scrollx"><span>奥德燃气：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities1_3"  @change="handleCheckedCities1_3">
+                          <el-checkbox v-for="city in cities1_3" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
+                    </div>
                   </div>
-                      <div class="tc_div">
-                        <div class="scrollx"><span>润发燃气：</span><div class="scroll-container"> <el-checkbox-group
-                    v-model="checkedCities1_4">
-                    <el-checkbox v-for="city in cities1_4" :label="city" :key="city">{{city}}</el-checkbox>
-                  </el-checkbox-group></div></div>
+                  <div class="tc_div">
+                    <div class="scrollx"><span>润发燃气：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities1_4"  @change="handleCheckedCities1_4">
+                          <el-checkbox v-for="city in cities1_4" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
                       </div>
+                    </div>
+                  </div>
                 </div>
                 <div class="map_btn">
                   <button class="map_btn_span on" @click="showExcavation()">开挖</button>
                   <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
                   <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
                   <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
-<!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
+                  <!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
                 </div>
                 <a class="map_clear" @click="clearAll()">清除</a>
               </el-tab-pane>
               <el-tab-pane label="管廊" name="second">
                 <div class="gl_div tekz_div">
                   <div class="tc_div">
-                    <div class="scrollx"><span>管廊公司：</span><div class="scroll-container"><el-checkbox-group
-                    v-model="checkedCities2">
-                    <el-checkbox v-for="city in cities2" :label="city" :key="city">{{city}}</el-checkbox>
-                  </el-checkbox-group></div></div>
-                </div>
+                    <div class="scrollx"><span>管廊公司：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities2"  @change="handleCheckedCities2">
+                          <el-checkbox v-for="city in cities2" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
+                    </div>
+                  </div>
                 </div>
                 <div class="map_btn">
                   <button class="map_btn_span on" @click="showExcavation()">开挖</button>
                   <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
                   <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
-                  <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button></div>
-<!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
+                  <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                </div>
+                <!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
                 <a class="map_clear" @click="clearAll()">清除</a>
               </el-tab-pane>
               <el-tab-pane label="供水" name="three">
                 <div class="gs_div tekz_div">
                   <div class="tc_div">
-                    <div class="scrollx"><span>水务集团：</span><div class="scroll-container"><el-checkbox-group
-                    v-model="checkedCities3">
-                    <el-checkbox v-for="city in cities3" :label="city" :key="city">{{city}}</el-checkbox>
-                  </el-checkbox-group></div></div>
-                </div>
+                    <div class="scrollx"><span>水务集团：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities3" @change="handleCheckedCities3">
+                          <el-checkbox v-for="city in cities3" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
+                    </div>
+                  </div>
                 </div>
                 <div class="map_btn">
                   <button class="map_btn_span on" @click="showExcavation()">开挖</button>
                   <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
                   <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
                   <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
-<!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
+                  <!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
                 </div>
                 <a class="map_clear" @click="clearAll()">清除</a>
               </el-tab-pane>
               <el-tab-pane label="排水" name="four">
                 <div class="ps_div tekz_div">
                   <div class="tc_div">
-                    <div class="scrollx"><span>排水部门：</span><div class="scroll-container"><el-checkbox-group
-                    v-model="checkedCities4">
-                    <el-checkbox v-for="city in cities4" :label="city" :key="city">{{city}}</el-checkbox>
-                  </el-checkbox-group></div></div>
-                </div>
+                    <div class="scrollx"><span>排水部门：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities4"  @change="handleCheckedCities4">
+                          <el-checkbox v-for="city in cities4" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
+                    </div>
+                  </div>
                 </div>
                 <div class="map_btn">
                   <button class="map_btn_span on" @click="showExcavation()">开挖</button>
                   <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
                   <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
                   <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
-<!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
+                  <!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
                 </div>
                 <a class="map_clear" @click="clearAll()">清除</a>
               </el-tab-pane>
               <el-tab-pane label="热力" name="five">
                 <div class="rl_div tekz_div">
                   <div class="tc_div">
-                    <div class="scrollx"><span>四平热力：</span><div class="scroll-container"><el-checkbox-group
-                    v-model="checkedCities5">
-                    <el-checkbox v-for="city in cities5" :label="city" :key="city">{{city}}</el-checkbox>
-                  </el-checkbox-group></div>
+                    <div class="scrollx"><span>四平热力：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities5" @change="handleCheckedCities5">
+                          <el-checkbox v-for="city in cities5" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
                     </div>
+                  </div>
+                  <div class="tc_div">
+                    <div class="scrollx"><span>四平电厂：</span>
+                      <div class="scroll-container">
+                        <el-checkbox-group v-model="checkedCities6" @change="handleCheckedCities6">
+                          <el-checkbox v-for="city in cities6" :label="city.url" :key="city.type">{{ city.type }}
+                          </el-checkbox>
+                        </el-checkbox-group>
+                      </div>
                     </div>
-                      <div class="tc_div">
-                        <div class="scrollx"><span>四平电厂：</span><div class="scroll-container"><el-checkbox-group
-                          v-model="checkedCities6">
-                    <el-checkbox v-for="city in cities6" :label="city" :key="city">{{city}}</el-checkbox>
-                  </el-checkbox-group></div>
-                        </div>
-                        </div>
+                  </div>
                 </div>
                 <div class="map_btn">
                   <button class="map_btn_span on" @click="showExcavation()">开挖</button>
                   <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
                   <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
                   <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
-<!--              <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
+                  <!--              <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
                 </div>
                 <a class="map_clear" @click="clearAll()">清除</a>
               </el-tab-pane>
@@ -180,36 +211,37 @@ import Cookies from 'js-cookie'
 import supermap from '@/components/supermap-2.5d' //超图
 import {
   getUserProfile
-} from "@/api/system/user";
+} from '@/api/system/user'
 
-import '../assets/styles/hz_body.css';
+import '../assets/styles/hz_body.css'
 
 import {
   selectConfigKey
-} from "@/api/system/config";
+} from '@/api/system/config'
+
 let echarts = require('echarts')
-const cityOptions1_1 = ['企业', '厂站','阀门','次高压管网','中压管网'];
-const cityOptions1_2 = ['企业', '厂站','阀门','次高压管网','中压管网'];
-const cityOptions1_3 = ['企业', '厂站','阀门','次高压管网','中压管网'];
-const cityOptions1_4 = ['企业', '厂站','阀门','次高压管网','中压管网'];
-const cityOptions2 = ['企业','阀门','次高压管网','中压管网'];
-const cityOptions3 = ['企业','阀门',  '泵站','次高压管网','中压管网'];
-const cityOptions4 = ['企业',  '合流管','污水管','雨水管','雨水篦子'];
-const cityOptions5 = ['企业',  '一次网','二次网','阀门'];
-const cityOptions6 = ['企业',  '直供网'];
+const cityOptions1_1 = [{ type: '企业', url: '' }, { type: '厂站', url: '' }, { type: '阀门', url: '' }, { type: '次高压管网', url: '' }, { type: '中压管网', url: '' }];
+const cityOptions1_2 = [{ type: '企业', url: '' }, { type: '厂站', url: '' }, { type: '阀门', url: '' }, { type: '次高压管网', url: '' }, { type: '中压管网', url: '' }];
+const cityOptions1_3 = [{ type: '企业', url: '' }, { type: '厂站', url: '' }, { type: '阀门', url: '' }, { type: '次高压管网', url: '' }, { type: '中压管网', url: '' }];
+const cityOptions1_4 = [{ type: '企业', url: '' }, { type: '厂站', url: '' }, { type: '阀门', url: '' }, { type: '次高压管网', url: '' }, { type: '中压管网', url: '' }];
+const cityOptions2 = [{ type: '企业', url: '' }, { type: '阀门', url: '' }, { type: '次高压管网', url: '' }, { type: '中压管网', url: '' }];
+const cityOptions3 = [{ type: '企业', url: '' }, { type: '阀门', url: '' }, { type: '泵站', url: '' }, { type: '次高压管网', url: '' }, { type: '中压管网', url: '' }];
+const cityOptions4 = [{ type: '企业', url: '' }, { type: '合流管', url: '' }, { type: '污水管', url: '' }, { type: '雨水管', url: '' }, { type: '雨水篦子', url: '' }];
+const cityOptions5 = [{ type: '企业', url: '' }, { type: '一次网', url: '' }, { type: '二次网', url: '' }, { type: '阀门', url: '' }];
+const cityOptions6 = [{ type: '企业', url: '' }, { type: '直供网', url: '' }];
 export default {
   components: {
-    supermap,
+    supermap
   },
   metaInfo() {
     return {
       title: '全域视联态势感知平台',
       meta: [{
-        charset: "utf-8"
+        charset: 'utf-8'
       },
         {
-          name: "viewport",
-          content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+          name: 'viewport',
+          content: 'width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'
         }
       ]
     }
@@ -219,7 +251,7 @@ export default {
   },
   mounted() {
     // 初始化地图数据
-    this.getSuperMapUrl();
+    this.getSuperMapUrl()
     setTimeout(() => {
       this.title = '全域视联态势感知平台'
     }, 1000)
@@ -227,7 +259,7 @@ export default {
   data() {
     return {
       input: '',
-      activeName:'first',
+      activeName: 'first',
       checkedCities1_1: [],
       checkedCities1_2: [],
       checkedCities1_3: [],
@@ -245,95 +277,141 @@ export default {
       cities3: cityOptions3,
       cities4: cityOptions4,
       cities5: cityOptions5,
-      cities6: cityOptions6,
+      cities6: cityOptions6
     }
   },
   methods: {
     getSuperMapUrl() {
       getUserProfile().then(response => {
         let mapDeptId = response.mapDeptId
-        let num = 0;
-        if (mapDeptId == "365") {
-          num = 0;
-        } else if (mapDeptId == "369") {
-          num = 1;
-        } else if (mapDeptId == "371") {
-          num = 2;
-        } else if (mapDeptId == "373") {
-          num = 3;
-        } else if (mapDeptId == "372") {
-          num = 4;
-        } else if (mapDeptId == "370") {
-          num = 5;
+        let num = 0
+        if (mapDeptId == '365') {
+          num = 0
+        } else if (mapDeptId == '369') {
+          num = 1
+        } else if (mapDeptId == '371') {
+          num = 2
+        } else if (mapDeptId == '373') {
+          num = 3
+        } else if (mapDeptId == '372') {
+          num = 4
+        } else if (mapDeptId == '370') {
+          num = 5
         }
-        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
-      });
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1)
+      })
+    },
+    handleCheckedCities1_1(checkedCities) {
+      // checkedCities 是当前选中的所有选项的数组
+      console.log('选中的城市:', checkedCities);
+    },
+    handleCheckedCities1_2(checkedCities) {
+      // checkedCities 是当前选中的所有选项的数组
+      console.log('选中的城市:', checkedCities);
+    },
+    handleCheckedCities1_3(checkedCities) {
+      // checkedCities 是当前选中的所有选项的数组
+      console.log('选中的城市:', checkedCities);
+      this.$refs.supermap.addLifelineOpen(checkedCities)
+    },
+    handleCheckedCities1_4(checkedCities) {
+      // checkedCities 是当前选中的所有选项的数组
+      console.log('选中的城市:', checkedCities);
+    },
+    handleCheckedCities2(checkedCities) {
+      // checkedCities 是当前选中的所有选项的数组
+      console.log('选中的城市:', checkedCities);
+    },
+    handleCheckedCities3(checkedCities) {
+      // checkedCities 是当前选中的所有选项的数组
+      console.log('选中的城市:', checkedCities);
+    },
+    handleCheckedCities4(checkedCities) {
+      // checkedCities 是当前选中的所有选项的数组
+      console.log('选中的城市:', checkedCities);
+    },
+    handleCheckedCities5(checkedCities) {
+      // checkedCities 是当前选中的所有选项的数组
+      console.log('选中的城市:', checkedCities);
+    },
+    handleCheckedCities6(checkedCities) {
+      // checkedCities 是当前选中的所有选项的数组
+      console.log('选中的城市:', checkedCities);
     },
     //开挖
-    showExcavation(){
-      this.$refs.supermap.excavation();
+    showExcavation() {
+      this.$refs.supermap.excavation()
     },
     //开挖
-    showExcavationAnalyze(){
-      this.$refs.supermap.excavationAnalyze();
+    showExcavationAnalyze() {
+      this.$refs.supermap.excavationAnalyze()
     },
     //测距
-    choseMeasuringDistance(){
-      this.$refs.supermap.choseMeasuringDistance();
+    choseMeasuringDistance() {
+      this.$refs.supermap.choseMeasuringDistance()
     },
     //测面
-    choseMeasuringArea(){
-      this.$refs.supermap.choseMeasuringArea();
+    choseMeasuringArea() {
+      this.$refs.supermap.choseMeasuringArea()
     },
     //测高
-    choseMeasuringHeight(){
-      this.$refs.supermap.choseMeasuringHeight();
+    choseMeasuringHeight() {
+      this.$refs.supermap.choseMeasuringHeight()
     },
     //清除
-    clearAll(){
-      this.$refs.supermap.closeMeasuringAll();
-      this.$refs.supermap.closeExcavationAll();
+    clearAll() {
+      this.$refs.supermap.closeMeasuringAll()
+      this.$refs.supermap.closeExcavationAll()
     }
-  },
+  }
 }
 </script>
 <style>
-.el-tabs__item{
+.el-tabs__item {
   border-radius: 25px;
   height: 33px;
   line-height: 33px;
 }
-.el-tabs__nav-next, .el-tabs__nav-prev{
+
+.el-tabs__nav-next, .el-tabs__nav-prev {
   line-height: 33px;
 }
+
 .el-tabs__item.is-active {
   background: -webkit-gradient(linear, right top, left top, from(#051d2b4f), color-stop(#006ec861), to(#051d2b96));
   background: linear-gradient(to left, #051d2b4f, #006ec861, #051d2b96);
   -webkit-box-shadow: rgba(5, 103, 194, 0.8) 0px 0px 15px inset;
   box-shadow: rgb(5 103 194 / 80%) 0px 0px 15px inset;
 }
-.el-checkbox{
-  margin-right: 15px!important;
+
+.el-checkbox {
+  margin-right: 15px !important;
 }
-.el-checkbox__inner{
+
+.el-checkbox__inner {
   border: 1px solid #0fc5f2;
   width: 13px;
   height: 13px;
   background: none;
 }
+
 .el-checkbox__label {
   color: #b9e4ef;
 }
-.el-checkbox__inner::after{
-  border-color:#0fc5f2;
+
+.el-checkbox__inner::after {
+  border-color: #0fc5f2;
 }
+
 .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
   border-color: #0fc0ee;
   background: none;
 }
-.el-checkbox__input.is-checked+.el-checkbox__label {
+
+.el-checkbox__input.is-checked + .el-checkbox__label {
   color: #0fc5f2;
 }
+
 .el-checkbox__input.is-disabled .el-checkbox__inner {
   background-color: #628c91;
   border-color: #407983;
@@ -357,7 +435,7 @@ export default {
     text-align: center;
     line-height: 80px;
     animation: headermove 1s ease-out;
-			z-index: 10000;
+    z-index: 10000;
 
     span {
       line-height: 22px;
@@ -372,7 +450,7 @@ export default {
   }
 
   //底部按钮5个
-  .life-btm-btn{
+  .life-btm-btn {
     position: absolute;
     bottom: 0;
     width: 100%;
@@ -381,52 +459,62 @@ export default {
     align-items: center;
     background: url("../assets/images/sixZ/btmbg.png") no-repeat bottom;
     background-size: 100% 25%;
-    .btn-span:nth-child(1){
-      animation: btnmove 1s ;
+
+    .btn-span:nth-child(1) {
+      animation: btnmove 1s;
     }
-    .btn-span:nth-child(2){
-      animation: btnmove 1.2s ;
+
+    .btn-span:nth-child(2) {
+      animation: btnmove 1.2s;
     }
-    .btn-span:nth-child(3){
-      animation: btnmove 1.4s ;
+
+    .btn-span:nth-child(3) {
+      animation: btnmove 1.4s;
     }
-    .btn-span:nth-child(4){
-      animation: btnmove 1.6s ;
+
+    .btn-span:nth-child(4) {
+      animation: btnmove 1.6s;
     }
-    .btn-span:nth-child(5){
-      animation: btnmove 1.8s ;
+
+    .btn-span:nth-child(5) {
+      animation: btnmove 1.8s;
     }
-    .btn-span{
+
+    .btn-span {
       width: 166px;
       height: 50px;
-      background:url('../assets/index_img/btm-btn.png') no-repeat center;
+      background: url('../assets/index_img/btm-btn.png') no-repeat center;
       text-align: center;
       display: flex;
       justify-content: center;
       align-items: center;
       margin: 10px 5px;
-      transition: all 0.3s ease-in-out ;
+      transition: all 0.3s ease-in-out;
       cursor: pointer;
-      span{
+
+      span {
         font-size: 20px;
         color: #EFF2FF;
         font-family: ysbth;
         line-height: 40px;
-        background: linear-gradient(0deg, rgba(49,190,255,1),  rgba(239,252,254,1), rgba(239,252,254,1));
+        background: linear-gradient(0deg, rgba(49, 190, 255, 1), rgba(239, 252, 254, 1), rgba(239, 252, 254, 1));
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }
     }
-    .btn-span:hover{
+
+    .btn-span:hover {
       filter: brightness(170%) hue-rotate(-20deg);
       transform: translateY(-10px);
     }
-    .btn-span.on{
+
+    .btn-span.on {
       filter: brightness(170%) hue-rotate(-20deg);
       box-shadow: none;
     }
   }
-  .btm-btn2{
+
+  .btm-btn2 {
     position: absolute;
     bottom: 80px;
     width: 100%;
@@ -435,29 +523,32 @@ export default {
     align-items: center;
     cursor: pointer;
     animation: btmmove2 1s ease-out;
-    .btn-span2{
+
+    .btn-span2 {
       margin: 0 10px;
       display: flex;
       flex-direction: column;
       align-items: center;
       transition: all 0.3s;
 
-      img{
+      img {
         width: 150px;
         height: 100px;
       }
-      span{
+
+      span {
         font-size: 20px;
         color: #EFF2FF;
         font-family: ysbth;
         line-height: 40px;
-        background: linear-gradient(0deg, rgba(49,190,255,1),  rgba(239,252,254,1), rgba(239,252,254,1));
+        background: linear-gradient(0deg, rgba(49, 190, 255, 1), rgba(239, 252, 254, 1), rgba(239, 252, 254, 1));
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         margin-top: -10px;
       }
     }
-    .btn-span2:hover{
+
+    .btn-span2:hover {
       filter: brightness(170%) hue-rotate(-20deg);
       transform: translateY(-10px);
     }
@@ -465,17 +556,20 @@ export default {
 
 
 }
-.con_right{
+
+.con_right {
   position: absolute;
-  right:20px;
-  top:150px;
+  right: 20px;
+  top: 150px;
   z-index: 99;
   width: 350px;
-  background: rgba(3,16,27,0.6);
-  .con_tckz{
-    .con_tckz_div{
+  background: rgba(3, 16, 27, 0.6);
+
+  .con_tckz {
+    .con_tckz_div {
       margin: 0px 15px;
-      .tekz_div{
+
+      .tekz_div {
         font-size: 14px;
         text-align: left;
         color: #fff;
@@ -483,38 +577,40 @@ export default {
         border-bottom: 1px dashed #4a5958;
         margin-bottom: 15px;
 
-        .tc_div{
+        .tc_div {
           line-height: 40px;
           padding-left: 15px;
           display: flex;
           flex-direction: row;
           width: 100%;
-          .scrollx{
+
+          .scrollx {
             width: 100%;
             white-space: nowrap;
 
             display: flex;
             flex-direction: row;
             /*height: 40px;*/
-            span{
+            span {
               display: block;
               width: 80px;
             }
-            .scroll-container{
+
+            .scroll-container {
               display: block;
               /*height: 40px;*/
               /*overflow-y: scroll;*/
               width: 220px;
-              .el-checkbox-group{
-                label{
+
+              .el-checkbox-group {
+                label {
                   display: block;
                   float: left;
                 }
-            }
-
+              }
 
-          }
 
+            }
 
 
           }
@@ -524,11 +620,12 @@ export default {
 
       .scroll-container::-webkit-scrollbar {
         /*滚动条整体样式*/
-        width: 6px!important; /*高宽分别对应横竖滚动条的尺寸*/
-        height: 1px!important;
-        display: block!important;
+        width: 6px !important; /*高宽分别对应横竖滚动条的尺寸*/
+        height: 1px !important;
+        display: block !important;
         cursor: pointer;
       }
+
       .scroll-container::-webkit-scrollbar-thumb {
         /*滚动条里面小方块*/
         border-radius: 10px;
@@ -537,6 +634,7 @@ export default {
         // background: #E5E5E5;
         background: rgba(38, 235, 255, 0.5);
       }
+
       .scroll-container::-webkit-scrollbar-track {
         /*滚动条里面轨道*/
         -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
@@ -545,7 +643,7 @@ export default {
       }
 
 
-      .map_btn button{
+      .map_btn button {
         display: inline-block;
         background: url("../assets/images/sixZ/sixzbtn1.png") no-repeat center;
         background-size: 100% 100%;
@@ -555,12 +653,14 @@ export default {
         color: #fff;
         cursor: pointer;
       }
-      .map_btn button.on{
+
+      .map_btn button.on {
         background: url("../assets/images/sixZ/sixzbtn1_on.png") no-repeat center;
         background-size: 100% 100%;
         box-shadow: none;
       }
-      .map_clear{
+
+      .map_clear {
         background: #09335f;
         color: #a4bfe2;
         font-size: 14px;
@@ -569,7 +669,8 @@ export default {
         display: inline-block;
         padding: 6px 18px;
       }
-      .map_clear:hover{
+
+      .map_clear:hover {
         background: #0a5184;
       }
     }
@@ -578,7 +679,7 @@ export default {
 
 }
 
-.con_tit{
+.con_tit {
   font-size: 18px;
   font-family: 'ysbth';
   color: #fff;
@@ -589,40 +690,44 @@ export default {
   line-height: 35px;
   margin-bottom: 15px;
 }
-  .map_tab{
-    display: flex;
-    flex-direction: row;
-    justify-content:space-around ;
-    margin-bottom: 25px!important;
-    border-bottom: 2px solid rgba(13, 107, 179, 0.53);
-    span{
-      display: block;
-      /*background: rgba(13, 107, 179, 0.53);*/
-      padding: 8px 20px;
-      color: #fff;
-      font-size: 16px;
-      text-shadow: 0px 0px 4px #0bf3f7;
-      cursor: pointer;
-    }
-    .on{
-      color: #0bf3f7;
-      background: none!important;
-      box-shadow:none;
-      font-weight: bold;
-      position: relative;
-    }
-    .on::after{
-      content: '';
-      display: block;
-      position: absolute;
-      bottom: -10px; /* 下三角位于链接的底部 */
-      left: 50%; /* 水平居中 */
-      width: 0;
-      height: 0;
-      border-left: 9px solid transparent; /* 左边透明 */
-      border-right: 9px solid transparent; /* 右边透明 */
-      border-top: 10px solid rgba(13, 107, 179, 0.53); /* 上边是三角形颜色 */
-      transform: translateX(-50%); /* 确保三角形中心对齐链接的中心 */
-    }
+
+.map_tab {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin-bottom: 25px !important;
+  border-bottom: 2px solid rgba(13, 107, 179, 0.53);
+
+  span {
+    display: block;
+    /*background: rgba(13, 107, 179, 0.53);*/
+    padding: 8px 20px;
+    color: #fff;
+    font-size: 16px;
+    text-shadow: 0px 0px 4px #0bf3f7;
+    cursor: pointer;
   }
+
+  .on {
+    color: #0bf3f7;
+    background: none !important;
+    box-shadow: none;
+    font-weight: bold;
+    position: relative;
+  }
+
+  .on::after {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: -10px; /* 下三角位于链接的底部 */
+    left: 50%; /* 水平居中 */
+    width: 0;
+    height: 0;
+    border-left: 9px solid transparent; /* 左边透明 */
+    border-right: 9px solid transparent; /* 右边透明 */
+    border-top: 10px solid rgba(13, 107, 179, 0.53); /* 上边是三角形颜色 */
+    transform: translateX(-50%); /* 确保三角形中心对齐链接的中心 */
+  }
+}
 </style>