[信令]添加信令相关功能

Jin Lei

2023-12-23 5df6240f6cd274e698d1e6358443364d543c126c

 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="imgbox">
          <img src="@assets/img/new/chengshibujian.png" alt="" />
        </div>
        <div class="textbox">
          <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 class="bottomwrapper csbj" @click="spjkHandle" :class="{ 'top-btn-active': !isShowSPJK }">
      <div class="imgbox">
        <img src="@assets/img/new/spjk.png" alt="" />
      </div>
      <div class="textbox">
        <span>视频监控</span>
      </div>
    </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,68 +65,39 @@
            @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>
</template>

<style scoped>
.specialTool {
  width: 440px;
  width: 550px;
  position: absolute;
  bottom: 65px;
  color: #fff;
@@ -166,8 +109,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;
@@ -181,18 +132,22 @@
}

.imgbox {
  width: 84px;
  height: 81px;
  background-image: url("~@/assets/img/new/bottomBox.png");
  width: 110px;
  height: 90px;
  background-image: url("~@/assets/img/new/b1.png");
  background-size: 100% 100%;
  position: relative;
}

.imgbox:hover {
  background-image: url("~@/assets/img/new/h1.png");
}

.imgbox img {
  width: 38px;
  width: 32px;
  position: absolute;
  top: 50%;
  left: 52.5%;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@@ -244,7 +199,7 @@
}

.el-dropdown /deep/ .el-dropdown-selfdefine {
  margin-left: 8px !important;
  margin-left: 0 !important;
}

.csbj .el-dropdown-menu {
@@ -295,8 +250,9 @@
  box-shadow: 0px 0px 5px 3px rgba(0, 168, 255, 0.16);
}

.top-btn-active {
  background: #0987ff !important;
.top-btn-active .imgbox {
  background-image: url("~@/assets/img/new/h1.png");
  background-size: 100% 100%;
}

.scroll_div {
@@ -340,7 +296,9 @@

import axios from "axios";
export default {
  components: {},
  components: {

  },
  name: "bottom-menu",
  data() {
    return {
@@ -349,6 +307,7 @@
      isShowSPRH: true,
      csbjShow: false,
      jxmxShow: false,
    
      romanOption: [
        { name: "核心区" },
        { name: "景观绿地" },
@@ -492,6 +451,7 @@
      }
    },
    handleCommand(command) {

      switch (command) {
        case "spjkHandle":
          this.spjkHandle();
@@ -523,6 +483,7 @@
      }
    },
    historyHandle() {
      this.switchMenu(1);
      if (this.isLand) {
        this.$parent.changeMode("影像底图");
        if (!this.viewer1Show) {
@@ -550,6 +511,7 @@
      }
    },
    tdglHandle() {
      this.switchMenu(1);
      if (!this.isLand) {
        if (!this.viewer1Show) {
          let p = sgworld.Navigate.getCameraInfo();
@@ -607,52 +569,35 @@
        "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() {
      const loading = this.$loading({
        lock: true,
        text: "手机信令数据加载中，请稍后",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        loading.close();
      }, 2000);
      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.switchMenu(3);
      if (this.isShowSjxl) {
        this.isShowSjxl = false;
        this.$parent.signallingShow = true;
      } else {
        this.closeSjxl();
      }
    },
    closeSjxl() {
      if (heatMapItem) {
      
        this.isShowSjxl = true;
        heatMapItem.deleteObject();
      }
        this.$parent.signallingShow = false;

    },
    // historyHandle() {
    //   this.$store.commit("showHistory", true);
@@ -698,42 +643,49 @@
      });
    },
    spjkHandle() {
      const loading = this.$loading({
        lock: true,
        text: "视频点位数据加载中，请稍后",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        loading.close();
      }, 2000);
      this.isShowSPJK = false;
      if (window.sxtkGeojson) {
        window.sxtkGeojson.deleteObject();
        window.sxtkGeojson = null;
        window.sxthandler.destroy();
        //关闭弹窗
        Bus.$emit("closeRightPop", true);
        layuiLayer.close(SmartEarthPopupData.layerProp);
        return;
      this.switchMenu(4);
      if (this.isShowSPJK) {
        const loading = this.$loading({
          lock: true,
          text: "视频点位数据加载中，请稍后",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        setTimeout(() => {
          loading.close();
        }, 1500);
        this.isShowSPJK = false;
        if (window.sxtkGeojson) {
          window.sxtkGeojson.deleteObject();
          window.sxtkGeojson = null;
          window.sxthandler.destroy();
          //关闭弹窗
          Bus.$emit("closeRightPop", true);
          layuiLayer.close(SmartEarthPopupData.layerProp);
          return;
        } else {
          Bus.$emit("showSPJK");
          // this.spjkLoad();
        }
      } else {
        Bus.$emit("showSPJK");
        // this.spjkLoad();
        this.closeSpjk();
      }
    },
    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();
        }
      }
    },
    // 分层分户