ibms/src/views/data_admin/buildGraphy/graphyTabs.vue

<!--
setFalg 插旗事件
getLocation 定位
-->
<template>
  <div id="graphy-tabs">
    <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
      <el-tab-pane label="本层的点位标签" name="point">
        <div
          v-if="pointData.length"
          v-loading="isLoading"
          style="max-height: 800px;overflow-y:auto;"
        >
          <div v-for="(item,index) in pointData" :key="index">
            <div class="point">
              <span>{{item.Name}}</span>
              <el-button size="mini" @click="getDetails(item)">编辑点位标签</el-button>
              <el-button
                :disabled="!map"
                size="mini"
                @click="btnClick(item)"
              >{{ item.X == 0 && item.Y == 0 ? '插旗' : '定位'}}</el-button>
            </div>
          </div>
        </div>
        <template v-if="!pointData.length">
          <div class="saga-message">{{pointParam.FloorId ? "数据为空" : "←请选择楼层"}}</div>
        </template>
      </el-tab-pane>
      <el-tab-pane label="无法定位到楼层的点位标签" name="noPoint">
        <div v-if="pointNoData.length" v-loading="isLoading" style="max-height: 800px;">
          <div v-for="(item,index) in pointNoData" :key="index">
            <div class="point">
              <span>{{item.Name}}</span>
              <el-button size="mini" @click="getDetails(item)">编辑点位标签</el-button>
              <el-button
                :disabled="!(item.X == 0 && item.Y == 0)"
                size="mini"
                @click="btnClick(item)"
              >{{ item.X == 0 && item.Y == 0 ? '插旗' : '定位'}}</el-button>
            </div>
          </div>
        </div>
        <template v-if="!pointNoData.length">
          <div class="saga-message">{{pointParam.FloorId ? "数据为空" : "←请选择楼层"}}</div>
        </template>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="详情" :visible.sync="pointShow" width="40%">
      <div class="qrcode">
        <div class="qrcode-view">
          <img
            :src="'api/ScanBuilding/service/qrcode/point?projectId=' + projectId + '&pointId=' + pointDetails.PointId + '&FloorId=' + pointDetails.FloorId + '&width=200&height=200'"
            alt="点位标签二维码"
          >
        </div>
        <div class="point-edit">
          <p>
            点位标签的现场位置：{{activeName2 != 'point' ? '无楼层' : pointParam.fllorName}}
            -{{pointDetails.spaceName || '未知原空间'}}
            -({{pointDetails.X}},{{pointDetails.Y}})
          </p>
          <div>
            <form-input
              :width="100"
              @change="changeInput"
              :value="pointDetails.PointName"
              :keys="'PointName'"
              :label="'点位标签:'"
              :isRule="false"
            ></form-input>
            <form-input
              :width="100"
              @change="changeInput"
              :value="pointDetails.PointLocalId"
              :keys="'PointLocalId'"
              :label="'点位本地编码:'"
              :isRule="false"
            ></form-input>
            <!-- <form-input></form-input> -->
          </div>
        </div>
      </div>
      <div class="point-coding">
        <p>编码及关系</p>
        <ul>
          <li>
            <span>点位标签ID</span>
            <span>{{pointDetails.PointId}}</span>
          </li>
          <li>
            <span>模型ID</span>
            <span>{{pointDetails.BimId || '暂无'}}</span>
          </li>
        </ul>
      </div>
      <div class="point-coding">
        <p>基本信息</p>
        <ul>
          <li>
            <span>信标类型</span>
            <span>二维码</span>
          </li>
          <li>
            <span>备注</span>
            <span>
              <form-input
                :width="0"
                @change="changeInput"
                :value="pointDetails.Note"
                :keys="'Note'"
                :label="''"
                :isRule="false"
              ></form-input>
            </span>
          </li>
        </ul>
      </div>
      <div class="point-pic">
        <p>点位安装位置效果照片</p>
        <template v-for="(item,index) in installPic">
          <div class="point-image" :key="index">
            <i class="el-icon-delete" @click="delImage(index,installPic)"></i>
            <img
              :src="'img/image-service/common/image_get?systemId=dataPlatform&key='+ item.key +'&width=200&height=200'"
              alt
            >
          </div>
        </template>
        <load-img keyName="安装位置" @getKey="getKey"></load-img>
      </div>
      <div class="point-pic">
        <p>全景照片</p>
        <template v-for="(item,index) in panorama">
          <div class="point-image" :key="index">
            <i class="el-icon-delete" @click="delImage(index,panorama)"></i>
            <img
              :src="'img/image-service/common/image_get?systemId=dataPlatform&key='+ item.key +'&width=200&height=200'"
              alt
            >
          </div>
        </template>
        <load-img keyName="全景照片" @getKey="getKey"></load-img>
      </div>
      <div class="point-pic">
        <p>周边照片</p>
        <template v-for="(item,index) in rimPic">
          <div class="point-image" :key="index">
            <i class="el-icon-delete" @click="delImage(index,rimPic)"></i>
            <img
              :src="'img/image-service/common/image_get?systemId=dataPlatform&key='+ item.key +'&width=200&height=200'"
              alt
            >
          </div>
        </template>
        <load-img keyName="周边照片" @getKey="getKey"></load-img>
      </div>
      <div class="point-pic">
        <p>视频资料</p>
        <template v-for="(item,index) in videoPic">
          <div class="point-image" :key="index">
            <i class="el-icon-delete" @click="delImage(index,videoPic)"></i>
            <img
              :src="'img/image-service/common/image_get?systemId=dataPlatform&key='+ item.key +'&width=200&height=200'"
              alt
            >
          </div>
        </template>
        <load-img keyName="视频" @getKey="getKey"></load-img>
      </div>
      <div class="point-pic">
        <p>其他照片</p>
        <template v-for="(item,index) in elsePic">
          <div class="point-image" :key="index">
            <i class="el-icon-delete" @click="delImage(index,elsePic)"></i>
            <img
              :src="'img/image-service/common/image_get?systemId=dataPlatform&key='+ item.key +'&width=200&height=200'"
              alt
            >
          </div>
        </template>
        <load-img keyName="其他照片" @getKey="getKey"></load-img>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPT, //获取点位列表
  getPoint, //获取点位详情
  updatePoint //修改点位
} from "@/api/scan/request";

import formInput from "./lib/formInput";
import loadImg from "./lib/uploadImg";
import {mapGetters, mapActions} from 'vuex';

export default {
  props: {
    pointParam: {
      type: Object
    }
  },
  components: {
    formInput,
    loadImg
  },
  data() {
    return {
      activeName2: "point",
      pointData: [], //tab为本层的点位标签
      pointNoData: [], //tab为无法定位的点位标签
      pointShow: false, //标签详情的弹窗
      pointDetails: {}, //标签详情信息对象
      // projId: this.$route.query.projId,
      index: "",
      installPic: [], //安装位置
      panorama: [], //全景照片
      rimPic: [], //周边照片
      videoPic: [], //视频资料
      elsePic: [], //其他照片
      map: true
    };
  },
  computed: {
        ...mapGetters("peojMess", [
        "projectId",
        "userId",
        "secret"
    ])
    },
  methods: {
    //tabs被点击
    handleClick(tab, event) {
      this.index = tab.index;
      this.getPointList();
    },

    //修改input
    changeInput(val, key) {
      this.pointDetails[key] = val;
      this.updatePoint();
    },

    //删除图片
    delImage(index, arr) {
      arr.splice(index, 1);
      this.updatePoint();
    },

    //获取key的值
    getKey(val, name) {
      switch (name) {
        case "安装位置":
          this.installPic.push({
            key: val,
            name: name,
            type: "image_wz"
          });
          break;
        case "全景照片":
          this.panorama.push({
            key: val,
            name: name,
            type: "panorama"
          });
          break;
        case "周边照片":
          this.rimPic.push({
            key: val,
            name: name,
            type: "image_zb"
          });
          break;
        case "视频":
          this.videoPic.push({
            key: val,
            name: name,
            type: "video"
          });
          break;
        default:
          this.elsePic.push({
            key: val,
            name: name,
            type: "image_else"
          });
      }
      this.updatePoint();
    },

    btnClick(item) {
      if (item.X == 0 && item.Y == 0) {
        this.$emit("setFalg", item);
      } else {
        this.$emit("getLocation", item);
      }
    },

    mapPush(detailsArr, pic) {
      pic.map(item => {
        detailsArr.push(item);
      });
    },

    //修改详情
    updatePoint() {
      this.pointDetails.ImageList = [];
      this.mapPush(this.pointDetails.ImageList, this.installPic);
      this.mapPush(this.pointDetails.ImageList, this.panorama);
      this.mapPush(this.pointDetails.ImageList, this.rimPic);
      this.mapPush(this.pointDetails.ImageList, this.videoPic);
      this.mapPush(this.pointDetails.ImageList, this.elsePic);
      let param = {
        ProjId: this.pointParam.ProjId,
        UserId: this.pointParam.UserId,
        PointList: this.pointDetails
      };
      updatePoint(param).then(res => {
        this.$message.success("修改成功");
      });
    },

    getDetails(item) {
      let params = {
        ProjId: this.projectId,
        UserId: this.userId,
        PointId: item.Id
      };
      getPoint(params).then(res => {
        let data = res.data;
        if (data.Result == "success") {
          this.pointShow = true;
          this.pointDetails = data.PointList[0];
          this.getPic(data.PointList[0].ImageList);
        } else {
          this.$message.error("请求出错");
        }
      });
    },

    getPic(imgArr) {
      this.installPic = [];
      this.panorama = [];
      this.rimPic = [];
      this.videoPic = [];
      this.elsePic = [];
      imgArr.map((item, index) => {
        switch (item.name) {
          case "安装位置":
            this.installPic.push(item);
            break;
          case "全景照片":
            this.panorama.push(item);
            break;
          case "周边照片":
            this.rimPic.push(item);
            break;
          case "视频":
            this.videoPic.push(item);
            break;
          default:
            this.elsePic.push(item);
        }
      });
    },

    //获取point
    getPointList() {
      this.isLoading = true;
      if (this.pointParam.FloorId) {
        let param = {
          FloorId: this.pointParam.FloorId,
          ProjId: this.pointParam.ProjId,
          UserId: this.pointParam.UserId
        };
        console.log(param)
        //当index为1时FloorId为空
        if (this.index == "1") {
          param.FloorId = "";
        }
        getPT(param).then(res => {
          res.data.PointList.splice(0, 1);
          if (this.index == "1") {
            this.pointNoData = res.data.PointList;
          } else {
            this.$emit("getPointList", res.data.PointList);
            this.pointData = res.data.PointList;
          }
          this.isLoading = false;
        });
      }
    },

    //初始化
    reset(data, map) {
      this.map = map
      this.pointParam.FloorId = data.FloorId;
      this.pointParam.fllorName = data.fllorName;
      this.activeName2 = "point";
      this.getPointList();
    }
  },
  watch: {
    pointShow: {
      deep: true,
      handler: function (old, val) {
        if (old == false && val == true) {
          this.getPointList();
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
#graphy-tabs {
  .saga-message {
    height: 400px;
    line-height: 400px;
    color: #ccc;
    font-size: 24px;
    text-align: center;
  }
  .point {
    padding-left: 20px;
    height: 30px;
    span {
      font-size: 12px;
      width: 180px;
      display: inline-block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    button {
      margin-bottom: 5px;
    }
  }
  .point:hover {
    background-color: #f2f6fc;
  }
  .qrcode {
    width: 100%;
    height: 180px;
    overflow: hidden;
    .qrcode-view {
      width: 180px;
      height: 180px;
      overflow: hidden;
      float: left;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .point-edit {
      height: 180px;
      display: inline-block;
      padding-top: 10px;
      overflow-x: hidden;
      width: calc(100% - 200px);
    }
  }
  .point-coding {
    width: 100%;
    height: 120px;
    margin-top: 5px;
    overflow: hidden;
    p {
      height: 30px;
      line-height: 30px;
      padding-left: 10px;
      font-weight: 500;
      font-size: 16px;
      text-align: left;
    }
    ul {
      width: 100%;
      border: 1px solid #ccc;
      border-bottom: none;
      li {
        line-height: 40px;
        height: 40px;
        span {
          display: block;
          float: left;
          padding-left: 10px;
          box-sizing: border-box;
          border-right: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          border-left: 1px solid #ccc;
          height: 40px;
          overflow: hidden;
        }
        span:first-child {
          width: 30%;
        }
        span:last-child {
          width: 70%;
        }
      }
    }
  }
  .point-pic {
    width: 100%;
    overflow: hidden;
    p {
      height: 25px;
      line-height: 25px;
      padding-left: 10px;
      font-weight: 500;
      font-size: 16px;
      margin-top: 5px;
      margin-bottom: 5px;
    }
  }
  .point-image {
    width: 180px;
    height: 180px;
    float: left;
    position: relative;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    img {
      width: 100%;
      height: 100%;
    }
    i {
      position: absolute;
      bottom: 10px;
      right: 10px;
      background-color: #fff;
      padding: 5px;
      cursor: pointer;
    }
  }
}
</style>