surprise
2024-01-09 9398f14feea7ad8b7d00ce7d2bb2e5362cec59d3
src/components/menu/menulist.vue
@@ -1,23 +1,10 @@
<template>
  <div>
    <div
      @click="showMenuList"
      :class="{ menulist: !panelActive, menulist_active: panelActive }"
      class="menuliststyle"
    >
      <img
        class="menuchangebtn"
        v-show="!panelActive"
        title="菜单"
        :src="switchMenuImage"
      />
    <div @click="showMenuList" :class="{ menulist: !panelActive, menulist_active: panelActive }" class="menuliststyle">
      <img class="menuchangebtn" v-show="!panelActive" title="菜单" :src="switchMenuImage" />
      <div class="menubtnlist" v-show="panelActive">
        <div class="menubtn" @click="showSceneCard()">
          <img
            class="bhImg"
            title="场景数据"
            src="@/assets/img/left/specialeffect4.png"
          />
          <img class="bhImg" title="场景数据" src="@/assets/img/left/specialeffect4.png" />
          <span>场景</span>
        </div>
        <div class="menubtn" @click="setMenuTool(1)">
@@ -33,72 +20,45 @@
          <span>漫游</span>
        </div>
       <div class="menubtn" @click="showModelCard()">
          <img
            class="bhImg"
            title="专题"
            src="@/assets/img/left/specialanalyse4.png"
          />
          <img class="bhImg" title="专题" src="@/assets/img/left/specialanalyse4.png" />
          <span>模型</span>
        </div>  
        
        <!-- <div class="menubtn" @click="setMenuGrid()">
          <img class="bhImg" title="格网" src="@/assets/img/right/cx-s.png" />
          <span>格网</span>
        </div> -->
        <div class="menubtn" @click="setMenuQuery()">
          <img class="bhImg" title="查询" src="@/assets/img/right/cx-s.png" />
          <img class="bhImg" title="查询" src="@/assets/img/right/queyr.png" />
          <span>查询</span>
        </div>
        <div class="menubtn" @click="setImgUpDate()">
          <input id="imgs" type="file" multiple="multiple" v-show="false" @change="setImgUpload" accept=".jpg,.png" />
          <img class="bhImg" title="上传" src="@/assets/img/right/upload.png" />
          <span>上传</span>
        </div>
        <div class="menubtn" @click="setMenuTool(5)">
          <img class="bhImg" title="分析" src="@/assets/img/right/cx-s.png" />
          <span>分析</span>
        </div>
        <div class="menubtn" @click="setMenuTool(6)">
          <img
            class="bhImg"
            title="特效"
            src="@/assets/img/left/leftnav2.png"
          />
          <img class="bhImg" title="特效" src="@/assets/img/left/leftnav2.png" />
          <span>特效</span>
        </div>
        <div class="menubtn" @click="showSettingCard()">
          <img
            class="bhImg"
            title="设置"
            src="@/assets/img/left/specialeffect4.png"
          />
          <img class="bhImg" title="设置" src="@/assets/img/left/specialeffect4.png" />
          <span>设置</span>
        </div>
    
      </div>
    </div>
    <div class="menutools">
      <plotting
        class="menutool"
        :class="{ menutoolhide: !(!panelActive && selectIndex == 1) }"
        ref="plotting"
      />
      <measure
        class="menutool"
        :class="{ menutoolhide: !(!panelActive && selectIndex == 2) }"
        ref="measure"
      />
      <roam
        class="menutool"
        :class="{ menutoolhide: !(!panelActive && selectIndex == 3) }"
        ref="roam"
      />
      <special
        class="menutool"
        :class="{ menutoolhide: !(!panelActive && selectIndex == 4) }"
        ref="special"
      />
      <analysis
        class="menutool"
        :class="{ menutoolhide: !(!panelActive && selectIndex == 5) }"
        ref="analysis"
      />
      <effects
        class="menutool"
        :class="{ menutoolhide: !(!panelActive && selectIndex == 6) }"
        ref="effects"
      />
      <plotting class="menutool" :class="{ menutoolhide: !(!panelActive && selectIndex == 1) }" ref="plotting" />
      <measure class="menutool" :class="{ menutoolhide: !(!panelActive && selectIndex == 2) }" ref="measure" />
      <roam class="menutool" :class="{ menutoolhide: !(!panelActive && selectIndex == 3) }" ref="roam" />
      <special class="menutool" :class="{ menutoolhide: !(!panelActive && selectIndex == 4) }" ref="special" />
      <analysis class="menutool" :class="{ menutoolhide: !(!panelActive && selectIndex == 5) }" ref="analysis" />
      <effects class="menutool" :class="{ menutoolhide: !(!panelActive && selectIndex == 6) }" ref="effects" />
    </div>
  </div>
</template>
@@ -123,8 +83,7 @@
  width: 0px !important;
}
.menutools {
}
.menutools {}
.menuchangebtn {
  position: absolute;
@@ -209,16 +168,16 @@
  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%,
  border-image-source: radial-gradient(59% 79%,
    transparent 0px,
    transparent 100%,
    cyan 100%
  );
      cyan 100%);
  border-image-slice: 1;
  border-width: 1px;
  border-style: solid;
@@ -227,7 +186,7 @@
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 360px;
  height: 200px;
  height: 180px;
  /* border-radius: 5px 5px 5px 30px; */
}
</style>
@@ -250,6 +209,8 @@
import fx from "@/assets/img/right/cx-s.png";
import tx from "@/assets/img/left/leftnav2.png";
import menuGrid from '@/assets/js/Layer/menuGrid'
import { Img_Upload } from '@/api/api.js'
import Bus from "../tools/Bus";
export default {
  name: "menulist",
  components: {
@@ -306,9 +267,29 @@
    setMenuQuery(){
      this.$store.commit("setMenuQuery",true)
    },
    setGridQuery(){
    setMenuGrid() {
      menuGrid.init();
    },
    setImgUpDate() {
      // this.$store.commit("setImgUpdate",true)
      $("#imgs").click();
    },
    async setImgUpload() {
      var formData = new FormData();
      var fs = document.getElementById("imgs");
      for (var i = 0, c = fs.files.length; i < c; i++) {
        formData.append(fs.files[i].name, fs.files[i]); // name, file
      }
      const data = await Img_Upload(formData)
      if (data.status == 200) {
        this.$message({
          message: "图片上传成功",
          type: "success",
        });
        Bus.$emit("reastLayer",true);
      }
    },
    closeAllHighLight(type) {
      // !(type == "plotting") && this.$refs.plotting.clearHighLight();
      // !(type == "roam") && this.$refs.roam.clearActive();