隐藏底部菜单

lixuliang

2024-04-17 a9e1dfd0bc6a5e2c00eee2e8ba2a20dd2a55641e

隐藏底部菜单

 src/App.vue

@@ -1,304 +1,22 @@
<template>
  <div>
    <div id="app"></div>
    <div id="app">
      <viewer></viewer>
    </div>
  </div>
</template>

<script>
import {
  loadBaimo,
  loadLW,
  loaddian,
  addMouseEvent,
  addRightMouseEvent,
  loadYH,
  juhe,
  addMpt,
  SPPM,
  light,
} from "./utils/work";
import bus from "./utils/bus";
import { getVectorList, getRadio } from "./api/http";
import viewer from "./components/viewer";
export default {
  name: "App",
  components: {
    viewer: viewer,
  },
  data() {
    return {};
  },
  methods: {
    init() {
      const that = this;
      window.currentsubindex = 1;
      let _core = new SmartEarth.Core();
      window.tedp = new this.$trame({
        elem: "app",
        width: 4992,
        prop: [0, 0],
        height: 2560,
        navtop: 300,
        gisType: "hf",
        gisrefer: {
          // configLink: "/static/sceneConfig_arcgis.json",
          // gisserver: "http://172.82.4.53:8080/",
          cesium: Cesium,
          options: {
            // // è…¾è®¯åœ°å›¾
            // imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
            //   url:
            //     "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer",
            //   enablePickFeatures: false,
            //   usePreCachedTilesIfAvailable: false,
            //   tilingScheme: _core.getOffsetTilingScheme() // åç§»çº æ­£
            // }),
            scene3DOnly: false,
            sceneModePicker: false,
          },
          tree: null,
        },
        gisInit: (webgis) => {
          //返回地图对象
          window.Sgworld = webgis;
          window.sgworld = webgis;
          window.Viewer = webgis.Viewer;
          window.viewer = webgis.Viewer;
          window.Cesium = Cesium;

          window.layers = window.sgworld.Viewer.scene.imageryLayers;
          // const blackMarble = layers.addImageryProvider(
          //   new Cesium.IonImageryProvider({ assetId: 3812 })
          // );

          // blackMarble.alpha = 0.0;
          // blackMarble.brightness = 2.0;
          // åœ°çƒé¢œè‰²
          Viewer.scene.globe.baseColor =
            Cesium.Color.fromCssColorString("#272d39");
            // //飞向广州
          // window.Viewer.camera.flyTo({
          //   destination: Cesium.Cartesian3.fromDegrees(
          //     113.29503528791071,
          //     23.104708355136264,
          //     4109.8492337442767
          //   ),
          //   orientation: {
          //     heading: 0.8349372341578318,
          //     pitch: -0.85222154573481174,
          //     roll: 0,
          //   },
          // });
          window.Viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(
              120.37492388223879,
              30.91054534935262,
              97611.15133443385
            ),
            orientation: {
              heading: 1.249372341578318,
              pitch: -0.7222154573481174,
              roll: 0,
            },
          });
          let urldian1 =
            "http://183.162.245.49:8099/geoserver/SHwuxiandian/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=SHwuxiandian:1GZ_POI&maxFeatures=50&outputFormat=application%2Fjson";
          let urldian =
            "http://183.162.245.49:8099/geoserver/SHP/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=SHP:SH_POI1&maxFeatures=50&outputFormat=application%2Fjson";
          try {
            loaddian(urldian1, "[TE_DESC]", "[height]");
            loaddian(urldian, "[name]", "[Height]");
            loadBaimo(1);
            loadLW();
            addRightMouseEvent();
            SPPM();
            loadYH();
            juhe(true, "监测站");
            addMpt(true);
          } catch (error) {}
          //开启日照
          viewer.scene.globe.enableLighting = false;
          viewer.shadows = false;
          addMouseEvent();
          light();
          getVectorList().then((res) => {
            if (res.message === "Success") {
              let region = res.rows;
              region.forEach((item) => {
                let arr = [];
                JSON.parse(item.vlatlngs).forEach((item2) => {
                  arr.push([item2[1], item2[0]]);
                });
                item.vlatlngs = JSON.stringify(arr);
              });
              bus.$emit("areaData", region);
            }
          });
          //获取无线电数据
          getRadio().then((res) => {
            if (res.message === "Success") {
              let radio = res.rows;
              bus.$emit("radioData", radio);
              console.log(radio);
            }
          });
          // window.Viewer.shadows = false;
          //深度检测
          window.Sgworld.Analysis.depthTestAgainstTerrain(true);
          /*
           * æ‹¾å–点击事件
           */
          // window.Viewer.scene.primitives.add(baimo);
          //县域边界,网格
        },
        subClick(index) {
          let showindex;
          switch (index) {
            case 0:
              showindex = 1;
              break;
            case 1:
              showindex = 2;
              break;
            case 2:
              showindex = 3;
              break;
            case 3:
              showindex = 4;
              break;
            case 4:
              showindex = 5;
              break;
            default:
              break;
          }
          bus.$emit("showindex", showindex);
        },
        prop: [970, 970],
        nav: {
          navTop: () => import("@/components/top/navTop"),
        },
        showSub: true,
        compss: [
          {
            sub: "频谱态势分析", //网格管理
            left: {
              wgglleft: () => import("@/components/wggl/left/index"),
            },
            right: {
              wgglright: () => import("@/components/wggl/right/index"),
            },
          },
          {
            sub: "频谱使用评估", //网格管理
            left: {
              wgglleft: () => import("@/components/wggl/left/index"),
            },
            right: {
              wgglright: () => import("@/components/wggl/right/index"),
            },
          },
          {
            sub: "覆盖能力评估", //网格管理
            left: {
              wgglleft: () => import("@/components/wggl/left/index"),
            },
            right: {
              wgglright: () => import("@/components/wggl/right/index"),
            },
          },
          {
            sub: "数据管理", //网格管理
            left: {
              wgglleft: () => import("@/components/wggl/left/index"),
            },
            right: {
              wgglright: () => import("@/components/wggl/right/index"),
            },
          },
          {
            sub: "报告库", //网格管理
            left: {
              wgglleft: () => import("@/components/wggl/left/index"),
            },
            right: {
              wgglright: () => import("@/components/wggl/right/index"),
            },
          },
        ],
        module: {
          menubtns: () => import("@/components/props/btns"), //底部5栏按钮
          showmodule: () => import("@/components/props/showmodule"), //水面模型删减
          showtuli: () => import("@/components/props/tuli"), //水面模型删减

          fieldStrength: () => import("@/components/props/fieldStrength"), //场强覆盖评估
          situationAnalysis: () =>
            import("@/components/props/situationAnalysis"), //电磁环境态势
          jcz: () => import("@/components/props/jczBox"), //监测站
          jcw: () => import("@/components/props/jcwBox"), //监测网
          FreefrequencyAnalysis: () =>
            import("@/components/props/FreefrequencyAnalysis"), //空闲频率资源分析
          FrequencyBand: () => import("@/components/props/FrequencyBand"), //频段占用度分析
          DynamicMap: () => import("@/components/props/bottom"), //态势图动态播放
          freeAnalyse: () => import("@/components/props/freeAnalyse"), //空闲资源展示
          moreTZ: () => import("@/components/props/moreTZ"), //空闲资源展示
        },
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  user-select: none;
}
#toolTip {
  padding: 13px !important;
  background: url("../static/img/gridManagement/边框3.png") !important;
  background-repeat: no-repeat;
  background-size: 100% 100% !important;
}

.toolitem {
  width: 100%;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
}
.toolitem span + span {
  color: #f7f330;
}
.nav {
  background: url() !important;
}
/* ç›’子全局样式 */
.divPoint-custom {
  text-align: center;
  padding: 5px 30px;
  margin: 0;
  color: #fff;
  background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
  border-radius: 5px;
  max-height: 130px;
  user-select: none;
}
.divPoint-custom:after {
  content: "";
  position: absolute;
  bottom: -60px;
  left: calc(50% - 3px);
  display: block;
  width: 3px;
  height: 60px;
  border-right: 3px solid #2bcdbb;
}
.te-right .te-left {
  width: 0px !important;
}
</style>

 src/assets/style.css

@@ -15,7 +15,8 @@
  background-size: 100% 100% !important;
  width: 2100px;
  height: 80px;
  display: flex;
  /* display: flex; */
  display: none;
  justify-content: space-around;
}


 src/components/viewer.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,304 @@
<template>
  <div>
    <div id="app1"></div>
  </div>
</template>

<script>
import {
  loadBaimo,
  loadLW,
  loaddian,
  addMouseEvent,
  addRightMouseEvent,
  loadYH,
  juhe,
  addMpt,
  SPPM,
  light,
} from "@/utils/work";
import bus from "@/utils/bus";
import { getVectorList, getRadio } from "@/api/http";
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {
    init() {
      const that = this;
      window.currentsubindex = 1;
      let _core = new SmartEarth.Core();
      window.tedp = new this.$trame({
        elem: "app1",
        width: 4992,
        prop: [0, 0],
        height: 2560,
        navtop: 300,
        gisType: "hf",
        gisrefer: {
          // configLink: "/static/sceneConfig_arcgis.json",
          // gisserver: "http://172.82.4.53:8080/",
          cesium: Cesium,
          options: {
            // // è…¾è®¯åœ°å›¾
            // imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
            //   url:
            //     "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer",
            //   enablePickFeatures: false,
            //   usePreCachedTilesIfAvailable: false,
            //   tilingScheme: _core.getOffsetTilingScheme() // åç§»çº æ­£
            // }),
            scene3DOnly: false,
            sceneModePicker: false,
          },
          tree: null,
        },
        gisInit: (webgis) => {
          //返回地图对象
          window.Sgworld = webgis;
          window.sgworld = webgis;
          window.Viewer = webgis.Viewer;
          window.viewer = webgis.Viewer;
          window.Cesium = Cesium;

          window.layers = window.sgworld.Viewer.scene.imageryLayers;
          // const blackMarble = layers.addImageryProvider(
          //   new Cesium.IonImageryProvider({ assetId: 3812 })
          // );

          // blackMarble.alpha = 0.0;
          // blackMarble.brightness = 2.0;
          // åœ°çƒé¢œè‰²
          Viewer.scene.globe.baseColor =
            Cesium.Color.fromCssColorString("#272d39");
            // //飞向广州
          // window.Viewer.camera.flyTo({
          //   destination: Cesium.Cartesian3.fromDegrees(
          //     113.29503528791071,
          //     23.104708355136264,
          //     4109.8492337442767
          //   ),
          //   orientation: {
          //     heading: 0.8349372341578318,
          //     pitch: -0.85222154573481174,
          //     roll: 0,
          //   },
          // });
          window.Viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(
              120.37492388223879,
              30.91054534935262,
              97611.15133443385
            ),
            orientation: {
              heading: 1.249372341578318,
              pitch: -0.7222154573481174,
              roll: 0,
            },
          });
          let urldian1 =
            "http://183.162.245.49:8099/geoserver/SHwuxiandian/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=SHwuxiandian:1GZ_POI&maxFeatures=50&outputFormat=application%2Fjson";
          let urldian =
            "http://183.162.245.49:8099/geoserver/SHP/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=SHP:SH_POI1&maxFeatures=50&outputFormat=application%2Fjson";
          try {
            loaddian(urldian1, "[TE_DESC]", "[height]");
            loaddian(urldian, "[name]", "[Height]");
            loadBaimo(1);
            loadLW();
            addRightMouseEvent();
            SPPM();
            loadYH();
            juhe(true, "监测站");
            addMpt(true);
          } catch (error) {}
          //开启日照
          viewer.scene.globe.enableLighting = false;
          viewer.shadows = false;
          addMouseEvent();
          light();
          getVectorList().then((res) => {
            if (res.message === "Success") {
              let region = res.rows;
              region.forEach((item) => {
                let arr = [];
                JSON.parse(item.vlatlngs).forEach((item2) => {
                  arr.push([item2[1], item2[0]]);
                });
                item.vlatlngs = JSON.stringify(arr);
              });
              bus.$emit("areaData", region);
            }
          });
          //获取无线电数据
          getRadio().then((res) => {
            if (res.message === "Success") {
              let radio = res.rows;
              bus.$emit("radioData", radio);
              console.log(radio);
            }
          });
          // window.Viewer.shadows = false;
          //深度检测
          window.Sgworld.Analysis.depthTestAgainstTerrain(true);
          /*
           * æ‹¾å–点击事件
           */
          // window.Viewer.scene.primitives.add(baimo);
          //县域边界,网格
        },
        subClick(index) {
          let showindex;
          switch (index) {
            case 0:
              showindex = 1;
              break;
            case 1:
              showindex = 2;
              break;
            case 2:
              showindex = 3;
              break;
            case 3:
              showindex = 4;
              break;
            case 4:
              showindex = 5;
              break;
            default:
              break;
          }
          bus.$emit("showindex", showindex);
        },
        prop: [970, 970],
        nav: {
          navTop: () => import("@/components/top/navTop"),
        },
        showSub: true,
        compss: [
          {
            sub: "频谱态势分析", //网格管理
            left: {
              wgglleft: () => import("@/components/wggl/left/index"),
            },
            right: {
              wgglright: () => import("@/components/wggl/right/index"),
            },
          },
          {
            sub: "频谱使用评估", //网格管理
            left: {
              wgglleft: () => import("@/components/wggl/left/index"),
            },
            right: {
              wgglright: () => import("@/components/wggl/right/index"),
            },
          },
          {
            sub: "覆盖能力评估", //网格管理
            left: {
              wgglleft: () => import("@/components/wggl/left/index"),
            },
            right: {
              wgglright: () => import("@/components/wggl/right/index"),
            },
          },
          {
            sub: "数据管理", //网格管理
            left: {
              wgglleft: () => import("@/components/wggl/left/index"),
            },
            right: {
              wgglright: () => import("@/components/wggl/right/index"),
            },
          },
          {
            sub: "报告库", //网格管理
            left: {
              wgglleft: () => import("@/components/wggl/left/index"),
            },
            right: {
              wgglright: () => import("@/components/wggl/right/index"),
            },
          },
        ],
        module: {
          menubtns: () => import("@/components/props/btns"), //底部5栏按钮
          showmodule: () => import("@/components/props/showmodule"), //水面模型删减
          showtuli: () => import("@/components/props/tuli"), //水面模型删减

          fieldStrength: () => import("@/components/props/fieldStrength"), //场强覆盖评估
          situationAnalysis: () =>
            import("@/components/props/situationAnalysis"), //电磁环境态势
          jcz: () => import("@/components/props/jczBox"), //监测站
          jcw: () => import("@/components/props/jcwBox"), //监测网
          FreefrequencyAnalysis: () =>
            import("@/components/props/FreefrequencyAnalysis"), //空闲频率资源分析
          FrequencyBand: () => import("@/components/props/FrequencyBand"), //频段占用度分析
          DynamicMap: () => import("@/components/props/bottom"), //态势图动态播放
          freeAnalyse: () => import("@/components/props/freeAnalyse"), //空闲资源展示
          moreTZ: () => import("@/components/props/moreTZ"), //空闲资源展示
        },
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style>
#app1 {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  user-select: none;
}
#toolTip {
  padding: 13px !important;
  background: url("../../static/img/gridManagement/边框3.png") !important;
  background-repeat: no-repeat;
  background-size: 100% 100% !important;
}

.toolitem {
  width: 100%;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
}
.toolitem span + span {
  color: #f7f330;
}
.nav {
  background: url() !important;
}
/* ç›’子全局样式 */
.divPoint-custom {
  text-align: center;
  padding: 5px 30px;
  margin: 0;
  color: #fff;
  background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
  border-radius: 5px;
  max-height: 130px;
  user-select: none;
}
.divPoint-custom:after {
  content: "";
  position: absolute;
  bottom: -60px;
  left: calc(50% - 3px);
  display: block;
  width: 3px;
  height: 60px;
  border-right: 3px solid #2bcdbb;
}
.te-right .te-left {
  width: 0px !important;
}
</style>