适配提交

王旭

2023-05-09 93c0e388bc3fe955c223e1b23a1f4257b1d60d11

 src/components/Screen/top.vue

@@ -1,26 +1,46 @@
<template>
  <div class="top">
    <div class="topleft">
      <div
        class="topleft1 topleftC"
        :class="{ topleft1: screen == false, topleftC: screen == true }"
      <!-- <div
        class="topleft1"
        :class="currView == 'chart' ? 'active' : ''"
        @click="OpenInitChart"
      >
        <img src="../../assets/img/Screen/bigST.png" />
        <span>大屏视图</span>
      </div>
      <div
        class="topleft1 topleftC"
        :class="{ topleft1: tree == false, topleftC: tree == true }"
      </div> -->
      <!-- <div
        class="topleft1"
        @click="OpenProjectree"
        :class="currView == 'tree' ? 'active' : ''"
      >
        <img src="../../assets/img/Screen/ptree.png" />
        <span>工程项目</span>
      </div> -->
      <div
        class="topleft__curr"
        @click="setMapViewStart()"
      >
        <img src="../../assets/img/Screen/ptree.png" />
        <span :title="currentProject">{{ currentProject }}</span>
      </div>
    </div>
    <div class="topCenter">
      <div>管网一张图</div>
    </div>
    <div class="topRight">
      <div class="topright1 toprightC" @click="ReturnLast">
      <div
        class="topright1"
        :class="currView == 'chart' ? 'active' : ''"
        @click="OpenInitChart"
      >
        <img src="../../assets/img/Screen/bigST.png" />
        <span>返回大屏</span>
      </div>
      <div
        class="topright1 toprightC"
        @click="ReturnLast"
      >
        <img src="../../assets/img/Screen/return.png" />
        <span>返回上级</span>
      </div>
@@ -33,17 +53,55 @@
    return {
      tree: false,
      screen: false,
      currView: "chart",
      currentProject: "大屏视图",
    }
  },
  mounted() {},
  mounted() {
    this.$bus.$on("changeProject", name => {
      // if (name == '全国项目' || name == '全球项目') {
      //   this.OpenProjectree()
      // }
      this.currView = "tree"
      this.currentProject = name
    })
  },
  methods: {
    ReturnLast() {
      sessionStorage.setItem("changeSelectStyle", 1)
      this.$router.push("/Synthesis")
    },

    //打开大屏
    OpenInitChart() {
      this.currView = "chart"
      this.screen = true
      this.$parent.$refs.mapleft.OpenLeftInit()
      this.$parent.$refs.mapright.OpenLeftInit()
      this.currentProject = "大屏视图"
      // 回到初始化视角
      this.setMapViewStart();
    },
    setMapViewStart() {
      window.viewer.camera.flyTo({
        destination: new Cesium.Cartesian3.fromDegrees(110, 32, 20000000),
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-90),
        },
      })
    },
    //打开工程树
    OpenProjectree() {
      this.screen = false
      this.currView = "tree"
      this.$parent.$refs.mapleft.OpenLeftProjectTree()
      this.$parent.$refs.mapright.OpenLeftProjectTree()
    },
  },
}
</script>
<style lang="scss">
<style lang="less">
.top {
  height: 100%;
  width: 100%;
@@ -58,25 +116,40 @@
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-around;
    // justify-content: space-around;
    cursor: pointer;
    .topleft1 {
      width: 131px;
      height: 40px;
      background-image: url(../../assets/img/Screen/btnc.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
    }
    .topleftC {
      width: 131px;
      height: 40px;
    .topleft__curr {
      // overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 36px;
      border-radius: 4px;
      background-image: url(../../assets/img/Screen/btnbg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      margin-left: 5%;
      span {
        padding-right: 10px;
      }
    }
    .topleft1 {
      width: 127px;
      height: 36px;
      // border: 1px solid #30acff;
      border-radius: 4px;
      background-image: url(../../assets/img/Screen/btnbg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      margin-left: 10%;
    }
    .active {
      background-image: url(../../assets/img/Screen/btnc.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    img {
      height: 26px;
@@ -85,19 +158,21 @@
    }
    span {
      color: #b3c8e3;
      font-size: 1rem;
      font-size: 16px;
      letter-spacing: 1px;
    }
  }
  .topCenter {
    width: 60%;
    height: 100%;
    font-size: 2rem;
    text-align: center;
    font-weight: 600;
    font-size: 36px;
    font-family: PangMenZhengDao, PangMenZhengDao-Regular;
    // font-weight: bold;
    font-style: italic;
    letter-spacing: 5px;
    color: #e3eafd;
    text-align: center;
    color: #e1eaff;
    letter-spacing: 6.55px;
    text-shadow: -14px 0px 25.25px 0.26px rgba(0, 120, 255, 0.19);
    div {
      margin-top: 5px;
    }
@@ -113,13 +188,19 @@
    .topright1 {
      width: 131px;
      height: 40px;
      background-image: url(../../assets/img/Screen/btnc.png);
      background-image: url(../../assets/img/Screen/btnbg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      margin-right: 10%;
      &.active {
        background-image: url(../../assets/img/Screen/btnc.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }

    .toprightC {
      width: 131px;
      height: 40px;
@@ -137,7 +218,7 @@
    }
    span {
      color: #b3c8e3;
      font-size: 1rem;
      font-size: 16px;
      letter-spacing: 1px;
    }
  }