管道基础大数据平台系统开发-【前端】-新系統界面
TreeWish
2023-02-28 234409bb4a612c5b69b78b1e844492f0a7122521
src/components/Screen/bottom.vue
@@ -3,33 +3,61 @@
    <div class="bottom1">
      <div class="bottom11"></div>
      <div class="bottom12">
        <div :class="currMenu == item.menuName ? 'active' : ''" v-for="item in menuList" :key="item.menuName"
          class="bottombtn" @click="handleMenuClick(item)">
          <el-popover popper-class="popover" placement="top" width="100" trigger="click">
        <div
          :class="currMenu == item.menuName ? 'active' : ''"
          v-for="item in menuList"
          :key="item.menuName"
          class="bottombtn"
          @click="handleMenuClick(item)"
        >
          <el-popover
            popper-class="popover"
            placement="top"
            width="100"
            trigger="click"
          >
            <!-- 内容 -->
            <span slot="reference">{{ item.menuName }}</span>
            <div class="popover-content">
              <div class="popover-content__header">项目信息</div>
              <div class="popover-content__search">
                <el-input size="mini" placeholder="请输入内容" v-model="searchName" @change="handleSearchChange(item)">
                <el-input
                  size="mini"
                  placeholder="请输入内容"
                  v-model="searchName"
                  @change="handleSearchChange(item)"
                >
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </div>
              <div class="popover-content__list">
                <div class="popover-content__list__item" v-for="(child, i) in currMenuList" :key="child.id + i"
                  :class="currProject == child.name ? 'active' : ''" @click="handlePopoverClick(child)"
                  :title="child.name">
                <div
                  class="popover-content__list__item"
                  v-for="(child, i) in currMenuList"
                  :key="child.id + i"
                  :class="currProject == child.name ? 'active' : ''"
                  @click="handlePopoverClick(child)"
                  :title="child.name"
                >
                  {{ child.name.slice(0, 8) }}
                </div>
              </div>
            </div>
          </el-popover>
        </div>
        <div
          class="bottombtn"
          :class="showTree ? 'active' : ''"
          @click="handleTree"
        >
          图层管理
        </div>
      </div>
      <div class="bottom13">
        <img :src="yxImg" @click="ChangeBaseLayer('yx')"  title="影像图" />
        <img :src="xrImg" @click="ChangeBaseLayer('xr')"  title="晕渲图"/>
        <img :src="yxImg" @click="ChangeBaseLayer('yx')" title="影像图" />
        <img :src="xrImg" @click="ChangeBaseLayer('xr')" title="晕渲图" />
      </div>
    </div>
    <div class="bottom2">
@@ -44,6 +72,7 @@
  countProjectTour,
  countProjectDisplay,
  countProjectLocation,
  selectProjectFileList,
} from "@/api/screen.js"
import { wktToGeoJSON } from "@terraformer/wkt"
@@ -52,7 +81,7 @@
    return {
      YXState: true,
      XRState: true,
      yunxuanLayer: null,//全球眩晕图
      yunxuanLayer: null, //全球眩晕图
      yxImg: require("../../assets/img/Screen/yximg.png"),
      xrImg: require("../../assets/img/Screen/bdimg.png"),
      currMenu: "专题展示",
@@ -139,6 +168,7 @@
          ],
        },
      ],
      showTree: false,
    }
  },
  computed: {
@@ -160,7 +190,7 @@
  },
  methods: {
    ChangeBaseLayer(parm) {
      if (parm == 'yx') {
      if (parm == "yx") {
        if (this.YXState) {
          //this.yxImg = require("../../assets/img/Screen/bdimg.png")
          //加载百度影像
@@ -176,7 +206,7 @@
        this.YXState = !this.YXState
      }
      if (parm == 'xr') {
      if (parm == "xr") {
        if (yunxuanLayer == null) {
          var urls = "https://tiles3.geovisearth.com/base/v1/ter"
          // 星图地球地形晕渲
@@ -194,15 +224,12 @@
          )
        }
        if (this.XRState) {
          yunxuanLayer.item.show = true;
          yunxuanLayer.item.show = true
        } else {
          yunxuanLayer.item.show = false;
          yunxuanLayer.item.show = false
        }
        this.XRState = !this.XRState;
        this.XRState = !this.XRState
      }
    },
    handleMenuClick(menu) {
      this.currMenu = menu.menuName
@@ -215,12 +242,15 @@
          this.showPathLine(child)
          break
        case "项目展示":
          this.DisplayCurrentProject(child)
          // this.DisplayCurrentProject(child)
          this.changeProject(child)
          this.$bus.$emit("changeProjectCode", child.id)
          break
        case "专题展示":
          this.changeProject(child)
          break
        default:
          break
      }
@@ -265,8 +295,6 @@
    //项目展示
    DisplayCurrentProject(params) {
      //打开或者加载图层
      //飞到指定位置
@@ -294,20 +322,31 @@
      return menu.children
      // return menu.children.filter(item => item.name.indexOf(searchName) > -1)
    },
    handleSearchChange(currMenu) { },
    handleSearchChange(currMenu) {},
    async getCountProjectDisplay() {
      const res = await countProjectLocation()
      // const res = await countProjectLocation()
      // if (res.code === 200) {
      //   const menu = this.menuList.find(item => item.menuName == "项目展示")
      //   menu.children = res.result.map(item => {
      //     return {
      //       name: item.projname,
      //       id: item.projname,
      //       wkt: item.wkt,
      //     }
      //   })
      // }
      const res = await selectProjectFileList()
      if (res.code === 200) {
        const menu = this.menuList.find(item => item.menuName == "项目展示")
        menu.children = res.result.map(item => {
          return {
            name: item.projname,
            id: item.projname,
            name: item.name,
            id: item.code,
            wkt: item.wkt,
          }
        })
      }
      selectProjectFileList
    },
    async getCountProjectTour() {
      const res = await countProjectTour()
@@ -320,13 +359,16 @@
            wkt: item.wkt,
          }
        })
      }
    },
    //专题展示
    changeProject(params) {
      this.$bus.$emit('changeProject', params.name)
    }
      this.$bus.$emit("changeProject", params.name)
    },
    handleTree(params) {
      this.showTree = !this.showTree
      this.$bus.$emit("changeTree", this.showTree)
    },
  },
}
</script>