[细节调整] 1.拆分主菜单，修改切换逻辑 2.按钮移动效果添加

Jin Lei

2023-11-15 61c3846cd8213fe3a7a5580c653936b4cbf0e3ef

 src/components/menu/bottom-menu.vue

@@ -1,9 +1,7 @@
<template>
  <div class="specialTool">
    <div
      class="bottomwrapper"
      :class="{ 'top-btn-active': viewer1Show && isLand }"
    >

    <div class="bottomwrapper" :class="{ 'top-btn-active': viewer1Show && isLand }">
      <div class="imgbox" @click="tdglHandle">
        <img src="@assets/img/new/tudiguanli.png" alt="" />
      </div>
@@ -12,11 +10,7 @@
      </div>
    </div>

    <div
      class="bottomwrapper"
      @click="historyHandle"
      :class="{ 'top-btn-active': viewer1Show && !isLand }"
    >
    <div class="bottomwrapper" @click="historyHandle" :class="{ 'top-btn-active': viewer1Show && !isLand }">
      <div class="imgbox">
        <img src="@assets/img/new/chengshigengxin.png" alt="" />
      </div>
@@ -24,40 +18,26 @@
        <span> 历史影像 </span>
      </div>
    </div>
    <div class="bottomwrapper csbj">
      <el-dropdown trigger="click" @command="handleCommand">
    <div class="bottomwrapper csbj" @click="spjkHandle" :class="{ 'top-btn-active': !isShowSPJK }">
        <div class="imgbox">
          <img src="@assets/img/new/chengshibujian.png" alt="" />
        <img src="@assets/img/new/spjk.png" alt="" />
        </div>
        <div class="textbox">
          <span> 综合扩展 </span>
        <span>视频监控</span>
        </div>
        <el-dropdown-menu
          slot="dropdown"
          :append-to-body="false"
          class="popper-dropdown"
        >
          <el-dropdown-item command="stdsjHandle"
            >视图大数据平台</el-dropdown-item
          >
          <el-dropdown-item command="bzdSystem"
            >标准地监管平台</el-dropdown-item
          >
          <el-dropdown-item v-if="isShowSPJK" command="spjkHandle"
            >视频集成与可视化</el-dropdown-item
          >
          <el-dropdown-item v-else command="closeSpjk"
            >关闭视频点位分布</el-dropdown-item
          >
          <el-dropdown-item v-if="isShowSjxl" command="sjxlHandle"
            >手机信令热力分布</el-dropdown-item
          >
          <el-dropdown-item v-else command="closeSjxl"
            >关闭信令热力分布</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>


    <div class="bottomwrapper spjk" @click="shoujixinling" :class="{ 'top-btn-active': !isShowSjxl }">
      <div class="imgbox">
        <img src="@assets/img/new/sjxl.png" alt="" />
      </div>
      <div class="textbox">
        <span> 手机信令 </span>
      </div>
    </div>


    <div class="bottomwrapper jxmx">
      <el-dropdown trigger="click" @command="handleCommand">
        <div class="imgbox">
@@ -66,19 +46,11 @@
        <div class="textbox">
          <span> 精模示范 </span>
        </div>
        <el-dropdown-menu
          slot="dropdown"
          :append-to-body="false"
          class="popper-dropdown"
        >
        <el-dropdown-menu slot="dropdown" :append-to-body="false" class="popper-dropdown">
          <el-dropdown-item command="fcfhHandle">分层分户</el-dropdown-item>
          <!-- <el-dropdown-item command="sprhHandle">场景视频融合</el-dropdown-item> -->
          <el-dropdown-item v-if="isShowSPRH" command="jiqirendahui"
            >场景视频融合</el-dropdown-item
          >
          <el-dropdown-item v-else command="jiqirendahui"
            >关闭视频融合</el-dropdown-item
          >
          <el-dropdown-item v-if="isShowSPRH" command="jiqirendahui">场景视频融合</el-dropdown-item>
          <el-dropdown-item v-else command="jiqirendahui">关闭视频融合</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
@@ -93,58 +65,27 @@
            @input="updateVideo"
          >
          </el-slider> -->
          <el-slider
            :min="0"
            :max="360"
            v-model="robotVideoList[3].heading"
            @input="updateVideo"
          >
          <el-slider :min="0" :max="360" v-model="robotVideoList[3].heading" @input="updateVideo">
          </el-slider>
        </el-form-item>
        <el-form-item label="俯仰角度:">
          <el-slider
            :min="-89"
            :max="89"
            v-model="robotVideoList[3].pitch"
            @input="updateVideo"
          >
          <el-slider :min="-89" :max="89" v-model="robotVideoList[3].pitch" @input="updateVideo">
          </el-slider>
        </el-form-item>
        <el-form-item label="水平视角:">
          <el-slider
            :min="30"
            :max="120"
            v-model="robotVideoList[3].horizonAngle"
            @input="updateVideo"
          >
          <el-slider :min="30" :max="120" v-model="robotVideoList[3].horizonAngle" @input="updateVideo">
          </el-slider>
        </el-form-item>
        <el-form-item label="垂直视角:">
          <el-slider
            :min="30"
            :max="120"
            v-model="robotVideoList[3].verticalAngle"
            @input="updateVideo"
          >
          <el-slider :min="30" :max="120" v-model="robotVideoList[3].verticalAngle" @input="updateVideo">
          </el-slider>
        </el-form-item>
        <el-form-item label="最远投射:">
          <el-slider
            :min="100"
            :max="300"
            v-model="robotVideoList[3].far"
            @input="updateVideo"
          >
          <el-slider :min="100" :max="300" v-model="robotVideoList[3].far" @input="updateVideo">
          </el-slider>
        </el-form-item>
        <el-form-item label="透明度:">
          <el-slider
            :step="0.1"
            :min="0"
            :max="1"
            v-model="robotVideoList[3].alpha"
            @input="updateVideo"
          >
          <el-slider :step="0.1" :min="0" :max="1" v-model="robotVideoList[3].alpha" @input="updateVideo">
          </el-slider>
        </el-form-item>
      </el-form>
@@ -154,7 +95,7 @@

<style scoped>
.specialTool {
  width: 440px;
  width: 550px;
  position: absolute;
  bottom: 65px;
  color: #fff;
@@ -166,8 +107,16 @@
  justify-content: space-between;
}

.specialTool .bottomwrapper:nth-of-type(2),


.specialTool .bottomwrapper:nth-of-type(3) {
  /* background: red; */
  position: relative;
  top: -30px;
}

.specialTool .bottomwrapper:nth-of-type(2),
.specialTool .bottomwrapper:nth-of-type(4) {
  /* background: red; */
  position: relative;
  top: -18px;
@@ -187,6 +136,7 @@
  background-size: 100% 100%;
  position: relative;
}

.imgbox:hover {
  background-image: url("~@/assets/img/new/h1.png");
}
@@ -496,7 +446,7 @@
      }
    },
    handleCommand(command) {
      this.setViewer1Show(false);

      switch (command) {
        case "spjkHandle":
          this.spjkHandle();
@@ -528,6 +478,7 @@
      }
    },
    historyHandle() {
      this.switchMenu(1);
      if (this.isLand) {
        this.$parent.changeMode("影像底图");
        if (!this.viewer1Show) {
@@ -555,6 +506,7 @@
      }
    },
    tdglHandle() {
      this.switchMenu(1);
      if (!this.isLand) {
        if (!this.viewer1Show) {
          let p = sgworld.Navigate.getCameraInfo();
@@ -612,10 +564,27 @@
        "http://10.9.2.29:8080/#/login?token=1ed14c5157acb8088efe65bc93a032c3"
      );
    },
    switchMenu(id){
      if(id!=1)
      {
        this.setViewer1Show(false);
      }
      if(id!=3)
      {
        this.closeSjxl();
      }
      if(id!=4)
      {
        this.closeSpjk();
      }
    },
    bzdSystem() {
      window.open("http://192.162.24.2:8076/login");
    },
    shoujixinling() {
      this.switchMenu(3);
      if (this.isShowSjxl) {
   
      const loading = this.$loading({
        lock: true,
        text: "手机信令数据加载中，请稍后",
@@ -624,7 +593,7 @@
      });
      setTimeout(() => {
        loading.close();
      }, 2000);
        }, 1500);
      this.isShowSjxl = false;
      let heatMapUrl = URLInCode.heatMapUrl;
      sgworld.Core.getJSON(heatMapUrl, (data) => {
@@ -652,6 +621,9 @@
          tooltip: true, // tooltip显示数值
        });
      });
      } else {
        this.closeSjxl();
      }
    },
    closeSjxl() {
      if (heatMapItem) {
@@ -703,6 +675,8 @@
      });
    },
    spjkHandle() {
      this.switchMenu(4);
      if (this.isShowSPJK) {
      const loading = this.$loading({
        lock: true,
        text: "视频点位数据加载中，请稍后",
@@ -711,7 +685,7 @@
      });
      setTimeout(() => {
        loading.close();
      }, 2000);
        }, 1500);
      this.isShowSPJK = false;
      if (window.sxtkGeojson) {
        window.sxtkGeojson.deleteObject();
@@ -725,6 +699,9 @@
        Bus.$emit("showSPJK");
        // this.spjkLoad();
      }
      } else {
        this.closeSpjk();
      }
    },
    closeSpjk() {
      this.isShowSPJK = true;