菜单

lixuliang

2024-04-18 7453188ddfaef750c5f367abadb8afa1ad877909

 src/components/wggl/left/czll.vue

@@ -1,29 +1,149 @@
<template>
  <div class="container" id="moved">
    <div class="top">
      <div class="far">
        <span @click="benear"></span>
        <span @click="befar"></span>
      </div>
      <!-- <div class="size">
        <span
          @mousemove="changebac(index)"
          @mouseout="returnbac(index)"
          v-for="(item, index) in top2"
          :key="index"
          :style="{ background: `url(${item.img})` }"
        ></span>
      </div> -->
  <div class="content">
    <div class="container" id="moved">
      <el-menu
        default-active="2"
        :unique-opened="true"
        @select="handleSelect"
        class="el-menu-vertical-demo"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>频谱态势分析</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">动态播放</el-menu-item>
            <el-menu-item index="1-2">态势比对</el-menu-item>
            <el-menu-item index="1-3">态势分析</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>频谱使用评估</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1">用频合规分析</el-menu-item>
            <el-menu-item index="2-2">空闲频率资源分析</el-menu-item>
            <el-menu-item index="2-3">信号覆盖率分析</el-menu-item>
            <el-menu-item index="2-4">用频密度分析</el-menu-item>
            <el-menu-item index="2-5">频段占用度分析</el-menu-item>
            <el-menu-item index="2-6">频谱占用度分析</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>覆盖能力评估</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="3-1">监测网覆盖能力评估</el-menu-item>
            <el-menu-item index="3-2">监测站覆盖能力评估</el-menu-item>
            <el-menu-item index="3-3">场强覆盖评估(多选)</el-menu-item>
            <el-menu-item index="3-4">场强覆盖评估</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>数据管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="4-1">测试台站管理</el-menu-item>
            <el-menu-item index="4-2">监测站管理</el-menu-item>
            <el-menu-item index="4-3">台站管理</el-menu-item>
            <el-menu-item index="4-4">移动监测数据回放</el-menu-item>
            <el-menu-item index="4-5">固定监测数据回放</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>报告库</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="5-1">数据分析报告</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>数据资源管理子系统</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="6-1">通用模版管理</el-menu-item>
            <el-menu-item index="6-2">通信资源管理</el-menu-item>
            <el-menu-item index="6-3">通信网系管理</el-menu-item>
            <el-menu-item index="6-4">通信想定管理</el-menu-item>
            <el-menu-item index="6-5">多媒体素材管理</el-menu-item>
            <el-menu-item index="6-6">仿真模型管理</el-menu-item>
            <el-menu-item index="6-7">用户管理和系统设置</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="7">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>综合态势显示子系统</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="7-1">zcTS\筹划步骤</el-menu-item>
            <el-submenu index="7-2">
              <template slot="title">ZC环境显示</template>
              <el-menu-item index="7-2-1">东南沿海、TD</el-menu-item>
            </el-submenu>
            <el-submenu index="7-3">
              <template slot="title">通信态势显示</template>
              <el-menu-item index="7-3-1">基站、监测站</el-menu-item>
            </el-submenu>
            <el-menu-item index="7-4">信息链路显示</el-menu-item>
            <el-menu-item index="7-5">作战态势显示</el-menu-item>
            <el-menu-item index="7-6">想定资料显示</el-menu-item>
            <el-menu-item index="7-7">态势显示控制</el-menu-item>
            <el-menu-item index="7-8">多媒体素材浏览</el-menu-item>
            <el-menu-item index="7-9">态势标绘</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="8">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>通信方案筹划子系统</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="8-1">通信方案管理</el-menu-item>
            <el-menu-item index="8-2">通信方案拟制</el-menu-item>
            <el-menu-item index="8-3">通信网系构建</el-menu-item>
            <el-menu-item index="8-4">通信方案讲评</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="9">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>通信效能评估子系统</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="9-1">通信毁伤影响评估</el-menu-item>
            <el-menu-item index="9-2">通信干扰影响评估</el-menu-item>
            <el-menu-item index="9-3">辅助计算分析</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="10">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>作战行动影响分析子系统</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="10-1">情报链路行动影响分析</el-menu-item>
            <el-menu-item index="10-2">指挥链路行动影响分析</el-menu-item>
            <el-menu-item index="10-3">打击链路行动影响分析</el-menu-item>
            <el-menu-item index="10-4"
              >保障链路行动影响分析和评估分析结果展示
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
    <div class="bot">
      <span
        v-for="(item, index) in bot1"
        :key="index"
        @mousemove="changebac1(index)"
        @click="remove(index)"
        @mouseout="returnbac1(index)"
        :style="{ background: `url(${item.img})` }"
      ></span>
      <div
        :class="istrue ? 'botImg1' : 'botImg'"
        @mousemove="makebig"
@@ -53,11 +173,7 @@
        "z-index": "2",
        transition: "transform,1s",
      },
      // top2: [
      //   { img: require("@/assets/image/test/组 160.png") },
      //   { img: require("@/assets/image/test/组 161.png") },
      //   { img: require("@/assets/image/test/组 162.png") },
      // ],
      nowchoose: null,
      bot1: [
        { img: require("@/assets/image/test/组 163.png") },
        { img: require("@/assets/image/test/组 164.png") },
@@ -68,14 +184,192 @@
    };
  },
  methods: {
    remove(index) {
      if (index == 0) {
        bus.$emit("clearEve", true);
        window.FieldIntensity && window.FieldIntensity.deleteObject();
        window.imageidXT && window.Viewer.entities.removeById(window.imageidXT);
      }
      if (index == 1) {
        window.createTool = true;
    handleSelect(key, keyPath) {
      var val = keyPath[1];
      switch (val) {
        case "1-3":
          this.nowchoose = 2;
          bus.$emit("showdio", this.nowchoose);
          break;
        case "1-2": //null
          this.nowchoose = 7;
          bus.$emit("showdio", this.nowchoose);
          break;
        case "1-1":
          this.nowchoose = 1;
          bus.$emit("showdio", this.nowchoose);
          break;
        case "2-6": //null
          this.nowchoose = 8;
          bus.$emit("showdio", this.nowchoose);
          break;
        case "2-5":
          this.nowchoose = 3;
          bus.$emit("showdio", this.nowchoose);
          break;
        case "2-4": //null
          this.nowchoose = 9;
          bus.$emit("showdio", this.nowchoose);
          break;
        case "2-3": //null
          this.nowchoose = 10;
          bus.$emit("showdio", this.nowchoose);
          break;
        case "2-2":
          this.nowchoose = "1-4";
          bus.$emit("showdio", this.nowchoose);
          break;

        case "3-4":
          this.nowchoose = 5;
          bus.$emit("showdio", this.nowchoose);
          break;
        case "3-3":
          this.nowchoose = "1-2";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "3-2":
          this.nowchoose = 4;
          bus.$emit("showdio", this.nowchoose);
          break;
        case "3-1":
          this.nowchoose = 6;
          bus.$emit("showdio", this.nowchoose);
          break;

        case "4-1":
          this.nowchoose = "4-1";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "4-2":
          this.nowchoose = "4-2";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "4-3":
          this.nowchoose = "4-3";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "4-4":
          this.nowchoose = "4-4";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "4-5":
          this.nowchoose = "4-5";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "5-1":
          this.nowchoose = "5-1";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "6-1":
          this.nowchoose = "6-1";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "6-2":
          this.nowchoose = "6-2";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "6-3":
          this.nowchoose = "6-3";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "6-4":
          this.nowchoose = "6-4";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "6-5":
          this.nowchoose = "6-5";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "6-6":
          this.nowchoose = "6-6";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "6-7":
          this.nowchoose = "6-7";
          bus.$emit("showdio", this.nowchoose);
          break;

        case "7-1":
          this.nowchoose = "7-1";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "7-2-1":
          this.nowchoose = "7-2-1";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "7-3-1":
          this.nowchoose = "7-3-1";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "7-4":
          this.nowchoose = "7-4";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "7-5":
          this.nowchoose = "7-5";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "7-6":
          this.nowchoose = "7-6";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "7-7":
          this.nowchoose = "7-7";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "7-8":
          this.nowchoose = "7-8";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "7-9":
          this.nowchoose = "7-9";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "8-1":
          this.nowchoose = "8-1";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "8-2":
          this.nowchoose = "8-2";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "8-3":
          this.nowchoose = "8-3";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "8-4":
          this.nowchoose = "8-4";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "9-1":
          this.nowchoose = "9-1";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "9-2":
          this.nowchoose = "9-2";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "9-3":
          this.nowchoose = "9-3";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "10-1":
          this.nowchoose = "10-1";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "10-2":
          this.nowchoose = "10-2";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "10-3":
          this.nowchoose = "10-3";
          bus.$emit("showdio", this.nowchoose);
          break;
        case "10-4":
          this.nowchoose = "10-4";
          bus.$emit("showdio", this.nowchoose);
          break;
      }
    },
    makebig() {
@@ -85,39 +379,6 @@
    makeSmall() {
      this.istrue = true;
      this.move1.transform = "translateX(-230px)";
    },
    //移入移出变色
    changebac(index) {
      let movein = [
        { img: require("@/assets/image/change/组177.png") },
        { img: require("@/assets/image/change/组176.png") },
        { img: require("@/assets/image/change/组175.png") },
      ];
      this.$set(this.top2, index, movein[index]);
    },
    returnbac(index) {
      let data = [
        { img: require("@/assets/image/test/组 160.png") },
        { img: require("@/assets/image/test/组 161.png") },
        { img: require("@/assets/image/test/组 162.png") },
      ];
      this.$set(this.top2, index, data[index]);
    },
    changebac1(index) {
      let movein = [
        { img: require("@/assets/image/change/组172.png") },
        { img: require("@/assets/image/change/组173.png") },
        { img: require("@/assets/image/change/组174.png") },
      ];
      this.$set(this.bot1, index, movein[index]);
    },
    returnbac1(index) {
      let movein = [
        { img: require("@/assets/image/test/组 163.png") },
        { img: require("@/assets/image/test/组 164.png") },
        { img: require("@/assets/image/test/组 165.png") },
      ];
      this.$set(this.bot1, index, movein[index]);
    },
    changeMap1() {
      Viewer.imageryLayers._layers[0].show = true;
@@ -153,80 +414,74 @@
        this.isshowGD = true;
      }
    },
    benear() {
      $(".navigation-control")[0].click();
    },
    befar() {
      $(".navigation-control-last")[0].click();
    },
    //添加mpt地形影像
  },
  mounted() {
    bus.$on("showindex", (e) => {
      if (this.boxindex == e) {
        this.boxindex = 0;
      } else {
        this.boxindex = e;
      }
    });
  },
};
</script>

<style  scoped>
.content {
  /* height: 2000px; */
  position: relative;
  /* background: skyblue; */
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.container {
  width: 0px;
  height: 1900px;
  width: 400px;
  margin-left: 100px;
  height: 1600px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  margin-top: 100px;
  background: url("../../../assets/image/listbg.png") no-repeat;
  background-size: 100% 100%;
}
.top {
  margin: 20px;
  margin-top: 50px;
  width: 100px;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateX(-16px);
}
.far {
  display: block;
.el-menu-vertical-demo {
  width: 100%;
  height: 36%;
  display: flex;
  flex-direction: column;
  background: transparent !important;
  border: transparent;
  color: white;
}
.far > span {
  display: block;
  width: 100%;
  height: 49%;
  cursor: pointer;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
/deep/ .el-submenu__title:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}
.far > span:nth-child(1) {
  background: url(../../../assets/image/test/+.png);
/deep/ .el-submenu__title {
  color: white !important;
  font-size: 32px;
}
.far > span:nth-child(1):hover {
  background: url(../../../assets/image/change/图层2.png);
/deep/.el-menu {
  background: transparent !important;
}
.far > span:nth-child(2) {
  background: url(../../../assets/image/test/-.png);
/deep/.el-menu-item:focus,
.el-menu-item:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #409eff !important;
}
.far > span:nth-child(2):hover {
  background: url(../../../assets/image/change/图层1.png);
/deep/.el-menu-item {
  color: white !important;
  font-size: 28px;
  padding: 0px 40px !important;
}
.size {
  display: block;
  width: 100%;
  height: 54%;
}
.size > span {
  display: block;
  width: 100%;
  height: 33%;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
/deep/.el-submenu__icon-arrow {
  font-size: 20px !important;
}
.bot {
  width: 100px;
  height: 310px;
  margin-top: 200px;
  bottom: 10px;
  left: 10%;
  margin-left: 50px;
}
.bot > span {
  display: block;
@@ -270,33 +525,5 @@
  width: 340px;
  height: 190px;
  background: transparent;
}
.mapinner {
  display: block;
  width: 140px;
  height: 40px;
  font-weight: 700;
  text-align: center;
  font-size: 35px;
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.mapinner:hover {
  background: #3385ff;
}
.mapinner1 {
  display: block;
  width: 140px;
  height: 40px;
  font-weight: 700;
  text-align: center;
  font-size: 35px;
  position: absolute;
  right: 10px;
  bottom: 15px;
}
.mapinner1:hover {
  background: #3385ff;
}
</style>