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

<!--
setFalg 插旗事件
getLocation 定位
-->
<template>
  <div id="graphy-tabs">
    <el-tabs style="height:100%;" v-model="activeName2" type="card" @tab-click="handleClick">
      <el-tab-pane label="本层的点位标签" name="point" style="height:100%">
        <el-scrollbar style="height:100%;width:calc(100% - 10px);" v-if="pointData.length" v-loading="isLoading">
          <div v-for="(item,index) in pointData" :key="index">
            <div class="point">
              <span style="line-height:30px;">{{item.Name}}</span>
              <div style="height:30px;float:right;font-size:14px;">
                <el-button size="mini" @click="getDetails(item)" icon="el-icon-edit-outline"></el-button>
                <el-button size="mini" @click="updateOrCreate(item)" icon="el-icon-link"></el-button>
                <el-button :disabled="!map" size="mini" @click="btnClick(item)"
                  :icon="item.X == 0 && item.Y == 0 ? 'el-icon-s-flag' : 'el-icon-place'"></el-button>
              </div>
            </div>
          </div>
        </el-scrollbar>

        <div v-if="!pointData.length" class="center" style="height: 400px;padding-top: 260px; box-sizing:border-box;">
          <i class="icon-wushuju iconfont"></i>
          {{pointParam.FloorId ? "数据为空" : "请选择楼层"}}
        </div>
      </el-tab-pane>
      <el-tab-pane label="无法定位到楼层的点位标签" name="noPoint">
        <div v-if="pointNoData.length" v-loading="isLoading" style="max-height: 600px;">
          <div v-for="(item,index) in pointNoData" :key="index">
            <div class="point">
              <span>{{item.Name}}</span>
              <el-button size="mini" @click="getDetails(item)" icon="el-icon-edit-outline"></el-button>
              <el-button :disabled="!map" size="mini" @click="btnClick(item)"
                  :icon="item.X == 0 && item.Y == 0 ? 'el-icon-s-flag' : 'el-icon-place'"></el-button>
            </div>
          </div>
        </div>
        <div v-if="!pointNoData.length" class="center" style="height: 400px;padding-top: 260px; box-sizing:border-box;">
          <i class="icon-wushuju iconfont"></i>
          {{pointParam.FloorId ? "数据为空" : "请选择楼层"}}
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="详情" :visible.sync="pointShow" width="500px">
      <div class="qrcode">
        <div class="qrcode-view">
          <img
            :src="'/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="'/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="'/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="'/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="'/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="'/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 {
  locationPointQuery, //获取点位列表
  getPoint, //获取点位详情
  updateLocationPoint, //修改点位
  deleteLocationImg,//数据中心删除图片
} 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
    },
    floorOption: {//建筑楼层
      Type: Array,
      default: () => []
    },
  },
  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,
      buildingData: [],//建筑楼层信息
    };
  },
  computed: {
    ...mapGetters('layout', ['projectId', 'secret', 'userId'])
  },
  methods: {
    //tabs被点击
    handleClick(tab, event) {
      this.index = tab.index;
      this.getPointList();
    },
    //修改input
    changeInput(val, key) {
      this.pointDetails[key] = val;
      this.updatePoint();
    },
    //删除图片
    delImage(index, arr) {
      let delArr = arr.splice(index, 1);
      deleteLocationImg(delArr, res => {
        this.$message.success("修改成功");
      })
    },
    //获取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();
    },
    //创建或更新
    updateOrCreate(item) {
      this.$confirm('更新：将位置标签图片填充到已有的业务空间中<br>创建：新建业务空间，并将位置标签图片和信息填充到新业务空间中', '创建/更新业务空间信息', {
        dangerouslyUseHTMLString: true,
        distinguishCancelAndClose: true,
        confirmButtonText: '更新',
        cancelButtonText: '创建'
      }).then(() => {
        this.$emit("closeCanvas")
        this.$router.push({
          name: 'updatePointZone',
          params: { item: item, floorData: this.floorOption, nowBuildFloor: this.buildingData }
        })
      }).catch(action => {
        if (action === 'cancel') {
          this.$router.push({
            name: 'createPointZone',
            params: { item: item, floorData: this.floorOption, nowBuildFloor: this.buildingData }
          })
        }
      })
    },
    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 pa = {
        Content: [this.pointDetails]
      }
      updateLocationPoint(pa, res => {
        this.$message.success("修改成功");
      })
    },
    getDetails(item) {
      this.pointShow = true;
      this.pointDetails = item;
      if (item.ImageList && item.ImageList.length) {
        this.getPic(item.ImageList);
      }
    },
    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() {
      if (this.buildingData[0] && this.buildingData[1]) {
        let param = {
            Filters: `BuildId='${this.buildingData[0]}';floorId='${this.buildingData[1]}'`,
            "Cascade": [{ "Name": "imageList" }]
          };
        if (this.index == "1") {
          param.Filters =  `BuildId='${this.buildingData[0]}';floorId isNull`
        }
        this.isLoading = true;
        locationPointQuery(param, res => {
          this.isLoading = false;
          if (this.index == "1") {
            this.pointNoData = res.Content;
          }
          else {
            this.pointData = res.Content;
          }
          this.$emit("getPointList", res.Content);
        })
      }
    },
    //初始化
    reset(data, map) {
      this.map = map
      this.pointParam.FloorId = data.FloorId;
      this.pointParam.fllorName = data.fllorName;
      this.buildingData = data.buildingData;
      this.activeName2 = "point";
      this.getPointList();
    }
  },
  watch: {
    pointShow: {
      deep: true,
      handler: function (old, val) {
        if (old == false && val == true) {
          this.getPointList();
        }
      }
    },
    projectId() {
      this.pointData = []
      this.pointNoData = []
      this.activeName2 = "point"
    }
  }
};

</script>

<style lang="scss" scoped>
#graphy-tabs {
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  /deep/ .el-tabs__content {
    height: calc(100% - 56px);
  }
  height: 100%;
  border-left: 1px solid #e4e7ed;

  .el-tabs__content {
    height: calc(100% - 60px) !important;
    background: red;
  }

  .el-dialog__body {
    max-height: 400px;
  }

  .saga-message {
    height: calc(100vh - 220px);
    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% - 180px);
    }
  }

  .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;
      box-sizing: border-box;

      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>