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

Jin Lei

2023-11-15 61c3846cd8213fe3a7a5580c653936b4cbf0e3ef

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

 src/assets/img/new/leftCircle-y.png

 src/assets/img/new/leftCircle.png

 src/assets/img/new/rightCircle-y.png

 src/assets/img/new/rightCircle.png

 src/assets/img/new/sjxl.png

 src/assets/img/new/spjk.png

 src/assets/img/new/treeClose-y.png

 src/assets/img/right/closeinput1.png

 src/assets/img/right/search1.png

 src/components/index.vue

@@ -1,5 +1,13 @@
<template>
  <div class="mapViewer">
    <div class="cacheImage">
    <img style="display: none;" src="@assets/img/new/rightCircle-y.png" alt="" />
    <img style="display: none;" src="@assets/img/new/leftCircle-y.png" alt="" />
    <img style="display: none;" src="@assets/img/new/treeClose-y.png" alt="" />
    <img style="display: none;" src="@assets/img/new/h1.png" alt="" />
  </div>


    <div class="tooltip" :class="{ tooltiphide: !tooltipShow }">
      <span>
        {{ tooltipInfo }}
@@ -231,6 +239,9 @@
};
</script>
<style scoped>
.cacheImage{
  display: none !important;
}
.mapViewer {
  height: 100%;
}

 src/components/left/leftmenu.vue

@@ -3037,6 +3037,10 @@
  /* box-shadow: 0px 0px 5px 2px #a8a8a8; */
}

.leftmenu:hover {
  background-image: url("~@/assets/img/new/treeClose-y.png");

}
.leftmenu {
  background-image: url("~@/assets/img/new/treeClose.png");
  background-size: 100% 100%;

 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;

 src/components/menu/menulist.vue

@@ -195,7 +195,9 @@
  border-radius: 30px;
  cursor: pointer;
}

.menulist:hover {
  background-image: url("~@/assets/img/new/rightCircle-y.png");
}
.menulist_active {
  border-image-source: radial-gradient(
    59% 79%,

 src/components/right/right-bottom.vue

@@ -200,6 +200,9 @@
.mapTool {
  margin: 2px 0;
}
.legend-bg:hover {
  background-image: url("~@/assets/img/new/leftCircle-y.png");
}
.legend-bg {
  background-image: url("~@/assets/img/new/leftCircle.png");
  background-size: 100%;
@@ -207,12 +210,7 @@
  width:  35px;
  height:  35px;
  position: relative;
}
.legend-bg:hover {
  background-color: rgba(16, 145, 250, 0.4);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: all;
}
.tcqp {
  background-color: rgba(0, 138, 252, 0.6);

 src/components/right/right-top.vue

@@ -53,8 +53,8 @@
      </div>
    </el-dialog>
    <div class="rightTool">
      <el-button @click="showInput">
        <img class="searchBg" src="@/assets/img/new/leftCircle.png" />
      <el-button class="searchElBg" @click="showInput">
        <div class="searchBg"></div>
        <img
          class="searchBtn"
          v-if="!isShowInput"
@@ -678,16 +678,25 @@
  margin: 1px;
  margin: 20px 0;
}

.searchBtn {
  width: 40px;
.searchElBg{
  background-image: url("~@/assets/img/new/leftCircle.png") !important;
  background-size: 48px 48px !important;
}

.searchBtn {
  margin-top: 3px;
  width: 40px;
  pointer-events: none;
}
.searchElBg:hover{
  background-image: url("~@/assets/img/new/leftCircle-y.png") !important;
  background-size: 48px 48px !important;
}
.searchBg {
  position: absolute;
  left: -4px;
  top: 15px;
  width: 54.5px;
  width: 56px;
  height: 56px;
  z-index: -10;
}
.active {
@@ -698,11 +707,13 @@
  position: absolute;
  right: 26px;
  top: 17px;
  width: 70.6px;
  height: 70.6px;
  width: 71px;
  height: 71px;
  background-image: url("~@/assets/img/new/rightCircle.png");
}

.user:hover {
  background-image: url("~@/assets/img/new/rightCircle-y.png");
}
.user .el-avatar {
  background-color: transparent;
  margin: 3px auto 0;