xinjiang_army/web/src/components/exhibition/index.vue

<template>
  <div class="parimaryExhibtion" :class="{ daolanactive: isShow }">
    <div class="p-title">
      <span>当前位置：{{ current.name }}</span>
    </div>
    <div class="cad-con"></div>
    <ul class="exhi-list">
      <li :class="{ haveChild: item.id == 'jishechengjiu', showactive: shensuo }" @click="handleItem(item)" v-for="(item, i) in list" :key="i">
        <span :class="{ active: item.name == current.name }">{{ item.name }}</span>
        <ul v-if="item.id == 'jishechengjiu'">
          <li :class="{ active: sub.name == current.name }" @click="handleItem(sub)" v-for="(sub, ii) in subList" :key="ii">
            {{ sub.name }}
          </li>
        </ul>
      </li>
    </ul>
    <div class="daolan" @click="isShow = !isShow">
      <img :src="require('@/assets/images/icon/daolan.png')" />
      <span>{{ isShow ? "收起" : "展开" }}导览</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["showExhi"],
  data() {
    return {
      isShow: true,
      shensuo: false,
      subList: [
        {
          id: "xinjiang02",
          name: "艰苦创业铸忠诚展区",
        },
        {
          id: "xinjiang03",
          name: "奠定基础谋发展展区",
        },
        {
          id: "xinjiang04",
          name: "全面发展强根基展区",
        },
        {
          id: "xinjiang05",
          name: "奋进强军创一流展区",
        },
      ],
      list: [
        {
          id: "xinjiangout",
          name: "胡杨卫士广场",
        },
        {
          id: "xinjiang01",
          active: "",
          name: "序厅",
        },
        {
          id: "xinjiang01",
          pano: 24,
          quat: {
            w: 0.0790464668350327,
            x: 0.003520409893528852,
            y: 0.9958775678424138,
            z: -0.04435235868632624,
          },
          name: "发展历程厅",
        },
        {
          id: "jishechengjiu",
          name: "建设成就厅",
        },
        {
          id: "xinjiang05",
          name: "强军劲旅厅",
          pano: 98,
          quat: {
            w: 0.6813749981741799,
            x: 0.00593363566311834,
            y: 0.7318827124363794,
            z: -0.0063734735088626015,
          },
        },
        {
          id: "xinjiang05",
          name: "英模荣誉厅",
          pano: 120,
          quat: {
            w: 0.7633693466573722,
            x: -0.004737236104839399,
            y: 0.6459324426637506,
            z: 0.0040084588217659855,
          },
        },
        {
          id: "xinjiang05",
          name: "辅助展陈厅",
          pano: 186,
          quat: {
            w: 0.09926812639548109,
            x: -0.0003896273924052499,
            y: 0.9950529757251679,
            z: 0.0039055830856510134,
          },
        },
      ],
      current: {
        id: "xinjiangout",
        name: "胡杨卫士广场",
      },
    };
  },
  methods: {
    handleItem(item) {
      if (item.id == "jishechengjiu") {
        this.shensuo = !this.shensuo;
        return;
      }
      if (item.name == this.current.name) {
        return
      }
      this.current = item;
      this.$bus.$emit("currentScene", item);
    },
  },
  mounted() {
    this.$nextTick(() => {
      let list = this.list;
      if (window.number != "xinjiang01"&&window.number != "xinjiangout") {
        if (!window.firstViewPosi) {
          list = this.subList;
          this.shensuo = true
        }
      } else {
        list = this.list;
      }
      this.current = list.find((item) => {
        if (window.firstViewPosi) {
          return player.currentPano.id == item.pano;
        } else {
          return item.id == window.number;
        }
      });
    });
  },
  watch: {
    isShow(newVal) {
      let css = newVal ? "10px" : "-310px";
      $(".cad").css({ right: css });
    },
  },
};
</script>

<style lang="less" scoped>
.daolanactive {
  transform: translateX(0);
  .daolan {
    > img {
      width: 16px;
      transform: rotate(0);
      margin-bottom: 4px;
    }
  }
}
</style>

<style lang="less">
.cad {
  .xinjiang02 {
    transform: translateX(-40px);
  }
  .xinjiang03 {
    > svg {
      > g {
        transform: scale(1) translate(50px, 198px);
      }
    }
  }

  .xinjiang04 {
    > svg {
      > g {
        transform: scale(1.3) translate(-50px, 208px);
        path {
          stroke-width: 4;
        }
        circle {
          r: 6;
          stroke-width: 1.69182;
        }
      }
    }
  }

  .xinjiang05 {
    > svg {
      > g {
        transform: scale(3) translate(-90px, 260px);
        path {
          stroke-width: 2;
        }
        .sign {
          > path {
            // d:path("M 201.7 -168.93 L 215.111 -175.821 L 219.111 -158.779 L 201.7 -160.67 Z");
          }
          circle {
            r: 4;
            stroke-width: 1.69182;
          }
        }
      }
    }
  }
}
</style>