VR_panorama/src/views/information/index.vue

<template>
  <div>
    <setting @select="handleShow"></setting>
    <toolbar @addVR="handleAddvr" @rename="onRename"></toolbar>
    <div class="dialog" v-if="show">
      <Select
        @updateList="updateScene"
        :panos="list"
        :current="activeItem"
        @cancle="show = false"
        :title="'选择场景'"
        :name="'scene'"
        @submit="handelSelect"
      >
        <template slot="list" slot-scope="{ data }">
          <div class="pano-con">
            <div class="ui-remark">{{ data.name }}</div>
            <ul>
              <li
                v-for="(item, i) in data.arr"
                @click="activeItem = item"
                :class="{ 'li-active': item.id == activeItem.id }"
                :key="i"
              >
                <div class="typeli">
                  <i
                    class="iconfont iconscene_map_3d"
                    :class="{ iconjump: item.type !== 'house' }"
                  ></i>
                </div>
                <div class="img">
                  <img :src="item.icon" alt="">
                </div>
                <div class="ui-title">
                  <span>{{item.type=='house'?item.roomName:item.sceneTitle}}</span>
                </div>
              </li>
            </ul>
          </div>
        </template>
      </Select>
    </div>

    <div class="dialog" style="z-index:2000" v-if="huxingshow">
      <Select
        :houseList="houseList"
        @updateList="updateHX"
        @cancle="huxingshow = false"
        :title="'选择VR模型'"
        :name="'table'"
        @changeCurrent="changeCurrent"
        :paging="paging"
        @submit="selectHX"
      >
      </Select>
    </div>

    <popup v-show="showRename" :can-close="false">
      <div class="ui-message ui-message-confirm dark" style="width: 400px">
        <div class="ui-message-header">
          <span>重命名</span>
          <span @click="showRename = false">
            <i class="iconfont icon_close"></i>
          </span>
        </div>
        <div class="ui-message-main re-name">
          <div>
            <input
              class="ui-input"
              type="text"
              maxlength="15"
              placeholder="输入名字"
              v-model="reNameItem.reName"
            />
          </div>
        </div>

        <div class="ui-message-footer">
          <button class="ui-button cancel" @click="showRename = false">
            取消
          </button>
          <button :class="`ui-button submit`" @click="handleRename()">
            确定
          </button>
        </div>
      </div>
    </popup>

    <popup v-show="showAddHouse" :can-close="false">
      <div class="ui-message ui-message-confirm dark" style="width: 400px">
        <div class="ui-message-header">
          <span>样板间户型</span>
          <span @click="showAddHouse = false">
            <i class="iconfont icon_close"></i>
          </span>
        </div>
        <div class="ui-message-main re-name add-vr">
          <div>
            <p class="ui-remark">样板间名称</p>
            <combox
              :data="houseNameList"
              :selected-index="houseActive"
              @change="onHouseChange"
            ></combox>
          </div>
          <div>
            <p class="ui-remark">VR模型</p>
            <div @click="huxingshow = true">
              <input
                class="ui-input"
                type="text"
                placeholder="请选择VR模型"
                v-model="huxing.sceneName"
                disabled
              />
            </div>
          </div>
        </div>

        <div class="ui-message-footer">
          <button class="ui-button cancel" @click="showAddHouse = false">
            取消
          </button>
          <button :class="`ui-button submit`" @click="handleHouse()">
            确定
          </button>
        </div>
      </div>
    </popup>
  </div>
</template>
<script>
import Setting from "./Setting";
import Toolbar from "./Toolbar";
import Select from "@/components/select";
import Popup from "@/components/shared/popup";
import Combox from "@/components/shared/Combox";

import {
  saveSomeData,
  getPanoList,
  getHouseNameList,
  getHouseList,
  saveHouse,
} from "@/api";

export default {
  name: "home",
  components: {
    Setting,
    Select,
    Toolbar,
    Popup,
    Combox,
  },
  data() {
    return {
      showRename: false,
      showAddHouse: false,
      activeItem: "",
      show: false,
      activeId: "",
      huxingshow: false,
      searchKey: "",
      hxsearchKey: "",
      house: "",
      houseNameList: [],
      houseActive: 0,
      houseDataActive: "",
      houseList: [],
      hasChange:false,
      huxing: {
        sceneName: "",
        roomId: "",
      },
      reNameItem: {
        id: "",
        reName: "",
      },
      currentId: "",
      list: [],
      paging: {
        pageSize: 8,
        pageNum: 1,
        total: 0,
        showSize: 8,
        current: 1,
      },
    };
  },
  mounted() {
    this.getPanoList();
  },
  watch: {
    activeId(newVal) {
      if (!newVal) {
        return;
      }
      let tmp = "";
      this.list.forEach((item) => {
        if (!tmp) {
          tmp = item.arr.find((i) => {
            return newVal == i.id;
          });
        }
      });
      this.activeItem = tmp;
    },
    "paging.pageNum": function() {
      this.getHouseList();
    },
    showAddHouse(newVal) {
      if (newVal) {
        getHouseNameList(
          {
            current: 1,
            size: 1000,
          },
          (res) => {
            this.houseNameList = res.data
              ? res.data.records
              : [];
            if (this.huxing.roomId) {
              this.houseActive = this.houseNameList.findIndex(
                (item) => this.huxing.roomId == item.id
              );
            } 
            this.houseDataActive = this.houseNameList[this.houseActive];
          }
        );
      }
    },
    show(newVal) {
      if (newVal) {
        this.searchKey = "";
        this.getPanoList();
      }
    },
    huxingshow(newVal) {
      if (newVal) {
        this.hxsearchKey = "";
        this.paging.pageNum = 1;
        this.getHouseList();
      }
    },
  },
  methods: {
    updateHX(data){
      this.hxsearchKey = data
      this.getHouseList();
    },
    updateScene(data){
      this.searchKey = data
      this.getPanoList();
    },
    handleShow(data) {
      this.show = true;
      this.activeId = data;
    },
    changeCurrent(data) {
      this.paging.pageNum = data;
    },
    handleAddvr(data) {
      this.showAddHouse = true;
      this.currentId = "";
      this.huxing = {
        sceneName: "",
        roomId: "",
      };

      if (data) {
        this.huxing.roomId = data.roomId;
        this.huxing.sceneName = data.sceneTitle;
        this.huxing.id = data.vrModelId;
        this.huxing.webSite = data.webSite;
        this.huxing.num = data.sceneCode;
        this.currentId = data.id;
      }
    },
    getHouseList() {
      getHouseList(
        {
          pageNum: this.paging.pageNum,
          pageSize: this.paging.pageSize,
          searchKey: this.hxsearchKey,
        },
        (res) => {
          this.paging.pageNum = res.data.pageNum;
          this.paging.pageSize = res.data.pageSize;
          this.paging.total = res.data.total;
          this.houseList = res.data.list;
        }
      );
    },
    onHouseChange(data, index) {
      this.houseActive = index;
      this.houseDataActive = data;
      this.hasChange = true
    },
    onRename(data) {
      this.reNameItem.id = data.id;
      this.reNameItem.reName = data.sceneTitle;
      this.showRename = true;
    },
    handleRename() {
      if (!this.reNameItem) {
        return this.$alert({ content: "请输入名字" });
      }
      saveSomeData(
        {
          id: this.reNameItem.id,
          sceneTitle: this.reNameItem.reName,
        },
        () => {
          this.$tips({ content: "重命名成功", icon: "ok" });
          this.showRename = false;
          this.$bus.emit("refresh");
        }
      );
    },

    handleHouse() {
        
        if (!this.huxing.id||!(this.houseDataActive&&this.houseDataActive.id)) {
          return this.$alert({ content: "请选择样板间名称和VR模型" });
        }

        if (!this.hasChange) {
          return this.showAddHouse = false;
        }
      
        saveHouse(
          {
            icon: this.huxing.thumb,
            roomId: (this.houseDataActive&&this.houseDataActive.id),
            roomName: (this.houseDataActive&&this.houseDataActive.name),
            id: this.currentId || null,
            sceneTitle: this.huxing.sceneName,
            vrModelId: this.huxing.id,
            webSite: this.huxing.webSite,
            sceneCode: this.huxing.num,
          },
          (res) => {
            if (res.code == 0) {
              this.$tips({
                content: this.currentId ? "修改成功" : "添加成功",
                icon: "ok",
              });
              this.hasChange = false
              this.huxingshow = false;
              this.showAddHouse = false;
              this.$bus.emit("refresh");
            } else {
              return this.$alert({ content: res.msg });
            }
          }
        );
    },
    selectHX(data) {
      this.hasChange = true
      this.huxing = data;
      this.huxingshow = false;
    },
    handelSelect() {
      this.$bus.emit("updateParams", {
        id: this.activeItem.id,
        isIndex: 1,
      });
      this.$bus.emit('initScene',this.activeItem)
      this.$bus.emit("getInitScene", this.activeItem);
      this.show = false;
    },
    getPanoList() {
      getPanoList(
        {
          pageNum: 1,
          pageSize: 1000,
          searchKey: this.searchKey,
          status: 3,
        },
        (data) => {
          let tmp = {};
          data.data.list.forEach((item) => {
            if (!tmp[item.type]) {
              tmp[item.type] = [item];
            } else {
              tmp[item.type].push(item);
            }
          });

          let tt = [];
          Object.keys(tmp).forEach((item) => {
            tt.push({
              id: item,
              sort: this.$nameSort[item],
              name: this.$nameStr[item],
              arr: tmp[item],
            });
          });
          tt.sort((a, b) => {
            return a.sort - b.sort;
          });
          this.list = [...tt];
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
.dialog {
  position: fixed;
  z-index: 30;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.pano-con {
  height: auto;
  background: none;
  padding: 10px 0;
  .ui-remark {
    padding-left: 10px;
  }
  > ul {
    > li {
      cursor: pointer;
    }
  }
}
.re-name {
  width: 80%;
  margin: 40px auto;
}
.add-vr {
  text-align: left;
  .ui-remark {
    margin: 10px 0;
  }
}
</style>