北京经济技术开发区经开区虚拟城市项目-【前端】-Web
lixuliang
2024-05-08 10ecfd0b60442d209d1ab4b749580ffb638d1992
src/components/menu/bottom-menu.vue
@@ -1,7 +1,9 @@
<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>
@@ -10,7 +12,11 @@
      </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>
@@ -18,7 +24,11 @@
        <span> 历史影像 </span>
      </div>
    </div>
    <div class="bottomwrapper csbj" @click="spjkHandle" :class="{ 'top-btn-active': !isShowSPJK }">
    <div
      class="bottomwrapper csbj"
      @click="spjkHandle"
      :class="{ 'top-btn-active': !isShowSPJK }"
    >
      <div class="imgbox">
        <img src="@assets/img/new/spjk.png" alt="" />
      </div>
@@ -27,8 +37,11 @@
      </div>
    </div>
    <div class="bottomwrapper spjk" @click="shoujixinling" :class="{ 'top-btn-active': !isShowSjxl }">
    <div
      class="bottomwrapper spjk"
      @click="shoujixinling"
      :class="{ 'top-btn-active': !isShowSjxl }"
    >
      <div class="imgbox">
        <img src="@assets/img/new/sjxl.png" alt="" />
      </div>
@@ -36,7 +49,6 @@
        <span> 手机信令 </span>
      </div>
    </div>
    <div class="bottomwrapper jxmx">
      <el-dropdown trigger="click" @command="handleCommand">
@@ -46,11 +58,19 @@
        <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>
@@ -65,30 +85,79 @@
            @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>
    </div>
    <!-- 数组人文字输入弹框 -->
    <div class="SZRtextAreaBox" v-if="isShowTextArea">
      <el-row :gutter="10">
        <el-col :span="19">
          <el-input
            v-model="input"
            placeholder="请输入内容"
            clearable
            @keyup.enter.native="sendCommand($event)"
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="sendCommand('click')"
            >搜索</el-button
          >
        </el-col>
      </el-row>
    </div>
  </div>
</template>
@@ -106,9 +175,25 @@
  display: flex;
  justify-content: space-between;
}
.SZRtextAreaBox {
  background: rgba(5, 39, 126, 0.7);
  padding: 10px;
  width: 375px;
  position: absolute;
  /* display: flex; */
  /* justify-content: space-around; */
  bottom: 165px;
  color: #fff;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
}
.SZRtextAreaBox .el-form-item {
  margin: 0;
}
.SZRtextAreaBox .el-input {
  /* width: 300px; */
}
.specialTool .bottomwrapper:nth-of-type(3) {
  /* background: red; */
  position: relative;
@@ -287,7 +372,8 @@
let video4;
let heatMapItem;
import { mapState, mapMutations } from "vuex";
import { queryBySquare } from "@/utils/request";
import { queryBySquare } from "@/api/api";
import Bus from "../tools/Bus";
import { roman } from "../../assets/json/index.js";
import URLInCode from "@/assets/js/urlInCode";
@@ -303,6 +389,7 @@
      isShowSPRH: true,
      csbjShow: false,
      jxmxShow: false,
      input: "",
      romanOption: [
        { name: "核心区" },
        { name: "景观绿地" },
@@ -430,6 +517,12 @@
  },
  computed: {
    ...mapState(["viewer1Show", "isLand", "yqfk", "qyEchartsShow"]),
    isShowTextArea() {
      if (this.$store.state.isShowTextArea) {
        this.input = "";
      }
      return this.$store.state.isShowTextArea;
    },
  },
  methods: {
    ...mapMutations(["setViewer1Show", "setIsLand", "setqyEchartsShow"]),
@@ -445,8 +538,16 @@
          break;
      }
    },
    sendCommand(event) {
      // if (event == "click") {
      mapMsg.testMsg(this.input);
      // } else {
      // // 阻止默认行为(如果需要的话)
      // mapMsg.testMsg(this.input);
      // event.preventDefault();
      // }
    },
    handleCommand(command) {
      switch (command) {
        case "spjkHandle":
          this.spjkHandle();
@@ -564,17 +665,14 @@
        "http://10.9.2.29:8080/#/login?token=1ed14c5157acb8088efe65bc93a032c3"
      );
    },
    switchMenu(id){
      if(id!=1)
      {
    switchMenu(id) {
      if (id != 1) {
        this.setViewer1Show(false);
      }
      if(id!=3)
      {
      if (id != 3) {
        this.closeSjxl();
      }
      if(id!=4)
      {
      if (id != 4) {
        this.closeSpjk();
      }
    },
@@ -584,52 +682,15 @@
    shoujixinling() {
      this.switchMenu(3);
      if (this.isShowSjxl) {
        const loading = this.$loading({
          lock: true,
          text: "手机信令数据加载中,请稍后",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        setTimeout(() => {
          loading.close();
        }, 1500);
        this.isShowSjxl = false;
        let heatMapUrl = URLInCode.heatMapUrl;
        sgworld.Core.getJSON(heatMapUrl, (data) => {
          let res = [];
          data.features.forEach((item) => {
            let obj = {
              x: item.properties["center_x"],
              y: item.properties["center_y"],
              value: item.properties["sd_total"],
              radius: 50,
            };
            res.push(obj);
          });
          // //创建热力图
          heatMapItem = sgworld.Creator.addHeatMap("热力图", {
            type: "Heatmap", // 热力图类型【Heatmap/HeatmapGL】(可选)
            sourceData: res,
            radius: 7,
            gradient: {
              ".3": "blue",
              ".5": "green",
              ".7": "yellow",
              ".95": "red",
            },
            tooltip: true, // tooltip显示数值
          });
        });
        this.$parent.signallingShow = true;
      } else {
        this.closeSjxl();
      }
    },
    closeSjxl() {
      if (heatMapItem) {
        this.isShowSjxl = true;
        heatMapItem.deleteObject();
      }
      this.isShowSjxl = true;
      this.$parent.signallingShow = false;
    },
    // historyHandle() {
    //   this.$store.commit("showHistory", true);
@@ -704,18 +765,20 @@
      }
    },
    closeSpjk() {
      this.isShowSPJK = true;
      if (window.sxtkGeojson) {
        window.sxtkGeojson.deleteObject();
        window.sxtkGeojson = null;
        window.sxthandler.destroy();
        //关闭弹窗
        Bus.$emit("closeRightPop", true);
        layuiLayer.close(SmartEarthPopupData.layerProp);
        return;
      } else {
        Bus.$emit("closeSPJK");
        // this.spjkLoad();
      if (!this.isShowSPJK) {
        this.isShowSPJK = true;
        if (window.sxtkGeojson) {
          window.sxtkGeojson.deleteObject();
          window.sxtkGeojson = null;
          window.sxthandler.destroy();
          //关闭弹窗
          Bus.$emit("closeRightPop", true);
          layuiLayer.close(SmartEarthPopupData.layerProp);
          return;
        } else {
          Bus.$emit("closeSPJK");
          // this.spjkLoad();
        }
      }
    },
    // 分层分户