visu_lifeline/src/views/Cockpit.vue

<!--可视化公共模板 林业-->
<template>
  <div class="visual-con lifeline-con">
    <!--主体-->
    <div class="visual-body">
      <div class="life-header ">
        <span>四平市城市生命线监管平台</span>
      </div>
      <div class="con_left"></div>
      <div class="con_right">
        <div class="con_tckz">
          <div class="con_tit">图层控制</div>
          <div class="map_tab">
            <span v-for="(item,index) in tabList"
                  :key="index"
                  :class="{on:currentClass==index}"
                  @click="toggleTab(index)">{{item}}</span>

          </div>
          <div class="con_tckz_div">
            <div class="tab_con" v-show="currentTab==0">
            <el-tabs v-model="activeName">
              <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="checkedCities"  @change="handleCheckedCities">
                          <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 class="tc_div">
                    <div class="scrollx"><span>港华燃气：</span>
                      <div class="scroll-container">
                        <el-checkbox-group v-model="checkedCities"  @change="handleCheckedCities">
                          <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="checkedCities"  @change="handleCheckedCities">
                          <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="checkedCities"  @change="handleCheckedCities">
                          <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>-->
                </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="checkedCities"  @change="handleCheckedCities">
                          <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="checkedCities"  @change="handleCheckedCities">
                          <el-checkbox v-for="city in cities6" :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>-->
                <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="checkedCities"  @change="handleCheckedCities">
                          <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>
                  <!--                  <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="checkedCities"  @change="handleCheckedCities">
                          <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>-->
                </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="checkedCities"  @change="handleCheckedCities">
                          <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>-->
                </div>
                <a class="map_clear" @click="clearAll()">清除</a>
              </el-tab-pane>
            </el-tabs>
            </div>
            <div class="tab_con" v-show="currentTab==1">
              <el-tabs v-model="activeName">
                <el-tab-pane label="燃气2" 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="checkedCities"  @change="handleCheckedCities">
                            <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 class="tc_div">
                      <div class="scrollx"><span>港华燃气：</span>
                        <div class="scroll-container">
                          <el-checkbox-group v-model="checkedCities"  @change="handleCheckedCities">
                            <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="checkedCities"  @change="handleCheckedCities">
                            <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="checkedCities"  @change="handleCheckedCities">
                            <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>-->
                  </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="checkedCities"  @change="handleCheckedCities">
                            <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="checkedCities"  @change="handleCheckedCities">
                            <el-checkbox v-for="city in cities6" :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>-->
                  <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="checkedCities"  @change="handleCheckedCities">
                            <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>
                    <!--                  <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="checkedCities"  @change="handleCheckedCities">
                            <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>-->
                  </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="checkedCities"  @change="handleCheckedCities">
                            <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>-->
                  </div>
                  <a class="map_clear" @click="clearAll()">清除</a>
                </el-tab-pane>
              </el-tabs>
            </div>
            <div class="tab_con" v-show="currentTab==2">
              <el-tabs v-model="activeName">
                <el-tab-pane label="燃气3" 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="checkedCities"  @change="handleCheckedCities">
                            <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 class="tc_div">
                      <div class="scrollx"><span>港华燃气：</span>
                        <div class="scroll-container">
                          <el-checkbox-group v-model="checkedCities"  @change="handleCheckedCities">
                            <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="checkedCities"  @change="handleCheckedCities">
                            <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="checkedCities"  @change="handleCheckedCities">
                            <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>-->
                  </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="checkedCities"  @change="handleCheckedCities">
                            <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="checkedCities"  @change="handleCheckedCities">
                            <el-checkbox v-for="city in cities6" :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>-->
                  <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="checkedCities"  @change="handleCheckedCities">
                            <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>
                    <!--                  <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="checkedCities"  @change="handleCheckedCities">
                            <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>-->
                  </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="checkedCities"  @change="handleCheckedCities">
                            <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>-->
                  </div>
                  <a class="map_clear" @click="clearAll()">清除</a>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>


        </div>
      </div>

      <!-- 地图 -->
      <supermap ref="supermap" style="width: 100%;height: 100vh;">
      </supermap>


      <!-- 底部按钮 -->
      <div class="life-btm-btn">
        <div class="btn-span on">
          <span>驾驶舱</span>
        </div>
        <div class="btn-span">
          <span>监测系统</span>
        </div>
        <div class="btn-span">
          <span>风险清单</span>
        </div>
        <div class="btn-span">
          <span>数据库</span>
        </div>
        <div class="btn-span">
          <span>监管平台</span>
        </div>
        <div class="btn-span">
          <span>运管体系</span>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import supermap from '@/components/supermap-2.5d' //超图
import {
  getUserProfile
} from "@/api/system/user";

import '../assets/styles/hz_body.css';

import {
  selectConfigKey
} from "@/api/system/config";
let echarts = require('echarts')


const cityOptions1_1 = [{ type: '企业', url: '' }, { type: '厂站', url: '' }, { type: '阀门', url: '' }, { type: '次高压管网', url: '/3D-huashengranqi-2/rest/realspace' }, { type: '中压管网', url: '' }];
const cityOptions1_2 = [{ type: '企业', url: '' }, { type: '厂站', url: '' }, { type: '阀门', url: '' }, { type: '次高压管网', url: '/3D-ganghuaranqi/rest/realspace' }, { type: '中压管网', url: '' }];
const cityOptions1_3 = [{ type: '企业', url: '' }, { type: '厂站', url: '' }, { type: '阀门', url: '' }, { type: '次高压管网', url: '/3D-aode/rest/realspace' }, { type: '中压管网', url: '' }];
const cityOptions1_4 = [{ type: '企业', url: '' }, { type: '厂站', url: '' }, { type: '阀门', url: '' }, { type: '次高压管网', url: '' }, { type: '中压管网', url: '' }];
const cityOptions2 = [{ type: '企业', url: '' }, { type: '管廊', url: '' }];
const cityOptions3 = [{ type: '企业', url: '' }, { type: '阀门', url: '' }, { type: '泵站', url: '' }, { type: '管网', url: '' }];
const cityOptions4 = [{ type: '企业', url: '' }, { type: '合流管', url: '/3D-PaiShui/rest/realspace' }, { type: '污水管', url: '' }, { type: '雨水管', url: '' }, { type: '雨水篦子', url: '' }];
const cityOptions5 = [{ type: '企业', url: '' }, { type: '一次网', url: '/3D-reli_yici_erci_guanduan-2/rest/realspace' }, { type: '二次网', url: '' }, { type: '阀门', url: '' }];
const cityOptions6 = [{ type: '企业', url: '' }, { type: '直供网', url: '' }];
export default {
  components: {
    supermap,
  },
  metaInfo() {
    return {
      title: '全域视联态势感知平台',
      meta: [{
        charset: "utf-8"
      },
        {
          name: "viewport",
          content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
        }
      ]
    }
  },
  created() {

  },
  mounted() {
// 初始化地图数据
    this.getSuperMapUrl();
    setTimeout(() => {
      this.title = '全域视联态势感知平台'
    }, 1000)
  },
  data() {
    return {
      input: '',
      activeName: 'first',
      checkedCities: [],
      cities1_1: cityOptions1_1,
      cities1_2: cityOptions1_2,
      cities1_3: cityOptions1_3,
      cities1_4: cityOptions1_4,
      cities2: cityOptions2,
      cities3: cityOptions3,
      cities4: cityOptions4,
      cities5: cityOptions5,
      cities6: cityOptions6,

      currentTab: 0,
      currentClass: 0,
      tabList:[ '四平市', '铁东区', '铁西区']
    }
  },
  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;
    		}
    		this.$refs.supermap.removeAllviewer(mapDeptId, -1);
    	});
    },
    toggleTab(current){
      this.currentTab = current;
      this.currentClass = current;
    },
    handleCheckedCities(checkedCities) {
      // checkedCities 是当前选中的所有选项的数组
      this.$refs.supermap.addLifelineOpen(this.checkedCities)
    },
    //开挖
    showExcavation() {
      this.$refs.supermap.excavation()
    },
    //开挖
    showExcavationAnalyze() {
      this.$refs.supermap.excavationAnalyze()
    },
    //测距
    choseMeasuringDistance() {
      this.$refs.supermap.choseMeasuringDistance()
    },
    //测面
    choseMeasuringArea() {
      this.$refs.supermap.choseMeasuringArea()
    },
    //测高
    choseMeasuringHeight() {
      this.$refs.supermap.choseMeasuringHeight()
    },
    //清除
    clearAll() {
      this.$refs.supermap.closeMeasuringAll()
      this.$refs.supermap.closeExcavationAll()
      this.checkedCities = []
      this.$refs.supermap.addLifelineOpen(this.checkedCities)
    }
  }
}
</script>
<style>
.el-tabs__item {
  border-radius: 25px;
  height: 33px;
  line-height: 33px;
}

.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__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__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 {
  color: #0fc5f2;
}

.el-checkbox__input.is-disabled .el-checkbox__inner {
  background-color: #628c91;
  border-color: #407983;
  cursor: not-allowed;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/assets/styles/base.scss';
.lifeline-con {

                         .life-header {
                           width: 100%;
                           height: 109px;
                           background: url('../assets/index_img/header-img.png') no-repeat center;
                           position: fixed;
                           top: 0;
                           font-family: pmzd;
                           font-size: 42px;
                           text-align: center;
                           line-height: 80px;
                           animation: headermove 1s ease-out;
                           z-index: 999;
                           span {
                             line-height: 22px;
                             font-weight: 400;
                             color: #EFF8FC;
                             background: linear-gradient(0deg, rgba(119, 186, 255, 1), rgba(255, 255, 255, 1));
                             opacity: 1;
                             -webkit-background-clip: text;
                             -webkit-text-fill-color: transparent;
                           }

                         }
//左右侧按钮
.btn {
  display: flex;
  justify-content: center;
  width: 300px;
  height: 195px;
  transition: all 0.5s ease-in-out;

  .btn-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    img {
      width: 160px;
      height: 155px;
      margin-top: 1.25rem;
    }

    span {
      font-weight: 400;
      font-size: 24px;
      color: #EFF8FC;
      line-height: 28px;
      font-family: pmzd;
    }
  }

  .btn-right {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .btn-right-con {
      cursor: pointer;
      width: 131px;
      height: 37px;
      text-align: center;
      background: url('../assets/index_img/name-bg.png') no-repeat center;
      font-weight: 400;
      font-size: 14px;
      line-height: 32px;
      color: #EFF8FC;
      transition: all .2s ease-in-out;
    }

    .btn-right-con:hover {
      filter: hue-rotate(-70deg);
    }
  }
}

.con_right{
  position: absolute;
  right: 20px;
  top:100px;
  z-index: 999;
  background: rgba(0, 10, 24, 0.67);
  width: 360px;
  .con_tckz {
    .con_tckz_div {
      margin: 0px 10px;

      .tekz_div {
        font-size: 14px;
        text-align: left;
        color: #fff;
        padding-bottom: 15px;
        border-bottom: 1px dashed #4a5958;
        margin-bottom: 15px;

        .tc_div {
          line-height: 40px;
          padding-left: 15px;
          display: flex;
          flex-direction: row;
          width: 100%;

          .scrollx {
            width: 100%;
            white-space: nowrap;

            display: flex;
            flex-direction: row;
            /*height: 40px;*/
            span {
              display: block;
              width: 80px;
            }

            .scroll-container {
              display: block;
              /*height: 40px;*/
              /*overflow-y: scroll;*/
              width: 220px;

              .el-checkbox-group {
                label {
                  display: block;
                  float: left;
                }
              }


            }


          }
        }

      }

      .scroll-container::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 6px !important; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px !important;
        display: block !important;
        cursor: pointer;
      }

      .scroll-container::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        height: 15px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 22, 55, 0.87);
        // 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);
        border-radius: 10px;
        background: rgba(10, 37, 64, 0.75);
      }


      .map_btn button {
        display: inline-block;
        background: url("../assets/images/sixZ/sixzbtn1.png") no-repeat center;
        background-size: 100% 100%;
        padding: 8px 20px;
        margin: 8px 8px 8px 0px;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
      }

      .map_btn button.on {
        background: url("../assets/images/sixZ/sixzbtn1_on.png") no-repeat center;
        background-size: 100% 100%;
        box-shadow: none;
      }

      .map_clear {
        background: #09335f;
        color: #a4bfe2;
        font-size: 14px;
        float: right;
        margin: 20px 0px;
        display: inline-block;
        padding: 6px 18px;
      }

      .map_clear:hover {
        background: #0a5184;
      }
    }

  }
}


.btn:hover {
  filter: brightness(180%);
}

.btn-r {
  position: absolute;
  left: 16%;
  top: 15%;
  animation: btnRun 1s , movetop 3.5s 1s infinite;
}

.btn-rq {
  position: absolute;
  right: 12%;
  top: 12%;
  animation: btnRun 1s ,movetop 4s 1s infinite;
}

.btn-ps {
  position: absolute;
  left: 5%;
  top: 38%;
  animation: btnRun 1s ,movetop2 5s 1s infinite;
}

.btn-ql {
  position: absolute;
  left: 12%;
  top: 60%;
  animation: btnRun 1s ,movetop2 3s 1s infinite;
}

.btn-gl {
  position: absolute;
  right: 6%;
  top: 38%;
  animation: btnRun 1s ,movetop2 4s 1s infinite;
}

.btn-gs {
  position: absolute;
  right: 16%;
  top: 59%;
  animation: btnRun 1s , movetop2 2s 1s infinite;
}


//雷达
.radar {
  display: flex;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -40%);
  justify-content: center;
  align-items: center;
  width: 726px;
  height: 726px;
  animation: radarOP 1s ease-in;
}

.rotating-bg {
  position: relative;
  z-index: 100;
  animation: rotatebg 2s infinite linear;
}

.rotating-image {
  position: relative;
  animation: rotate 5s infinite linear;
  z-index: 150;
}

//底部按钮5个
.life-btm-btn{
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .btn-span:nth-child(1){
    animation: btnmove 1s ;
  }
  .btn-span:nth-child(2){
    animation: btnmove 1.2s ;
  }
  .btn-span:nth-child(3){
    animation: btnmove 1.4s ;
  }
  .btn-span:nth-child(4){
    animation: btnmove 1.6s ;
  }
  .btn-span:nth-child(5){
    animation: btnmove 1.8s ;
  }
  .btn-span:nth-child(6){
    animation: btnmove 2s ;
  }
  .btn-span{
    width: 166px;
    height: 50px;
    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 ;
    cursor: pointer;
    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));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .btn-span:hover{
    filter: brightness(170%) hue-rotate(-20deg);
    transform: translateY(-10px);
  }
  .btn-span.on{
    filter: brightness(170%) hue-rotate(-20deg);
    box-shadow: none;
  }
}
.btm-btn2{
  position: absolute;
  bottom: 80px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  animation: btmmove2 1s ease-out;
  .btn-span2{
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s;

    img{
      width: 150px;
      height: 100px;
    }
    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));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-top: -10px;
      display: block;
      text-align: center;
    }
  }
  .btn-span2:hover{
    filter: brightness(170%) hue-rotate(-20deg);
    transform: translateY(-10px);
  }
}






}

.con_tit {
  font-size: 18px;
  font-family: 'ysbth';
  color: #fff;
  padding-left: 30px;
  background: url("../assets/images/sixZ/sixztit.png") no-repeat left;
  background-size: 100% 100%;
  height: 35px;
  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%); /* 确保三角形中心对齐链接的中心 */
  }
}
</style>