|
@@ -3,49 +3,33 @@ setFalg 插旗事件
|
|
getLocation 定位
|
|
getLocation 定位
|
|
-->
|
|
-->
|
|
<template>
|
|
<template>
|
|
- <div id="graphy-tabs">
|
|
|
|
- <el-tabs style="height:100%;" 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: 600px;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>
|
|
|
|
- <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 @click="getDetails(item)">编辑点位标签</el-button>
|
|
|
|
- <el-button
|
|
|
|
- :disabled="!(item.X == 0 && item.Y == 0)"
|
|
|
|
- @click="btnClick(item)"
|
|
|
|
- >{{ item.X == 0 && item.Y == 0 ? '插旗' : '定位'}}</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>
|
|
|
|
|
|
+ <div id="graphy-tabs">
|
|
|
|
+ <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
|
|
|
|
+ <el-tab-pane label="本层的点位标签" name="point"></el-tab-pane>
|
|
|
|
+ <el-tab-pane label="无法定位到楼层的点位标签" name="noPoint"></el-tab-pane>
|
|
</el-tabs>
|
|
</el-tabs>
|
|
|
|
+ <div v-if="pointData.length" v-loading="isLoading" style="padding:0 0 10px;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 v-if="activeName2=='point'" :disabled="!map" size="mini" @click="btnClick(item)">
|
|
|
|
+ {{ item.X == 0 && item.Y == 0 ? '插旗' : '定位'}}
|
|
|
|
+ </el-button>
|
|
|
|
+ <el-button v-if="activeName2=='noPoint'" :disabled="!(item.X == 0 && item.Y == 0)" @click="btnClick(item)">
|
|
|
|
+ {{ item.X == 0 && item.Y == 0 ? '插旗' : '定位'}}
|
|
|
|
+ </el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else class="center" style="height: 400px;padding-top: 260px; box-sizing:border-box;">
|
|
|
|
+ <i class="icon-wushuju iconfont"></i>
|
|
|
|
+ {{pointParam.FloorId ? "数据为空" : "请选择楼层"}}
|
|
|
|
+ </div>
|
|
<el-dialog title="详情" :visible.sync="pointShow" width="500px">
|
|
<el-dialog title="详情" :visible.sync="pointShow" width="500px">
|
|
<div class="qrcode">
|
|
<div class="qrcode">
|
|
<div class="qrcode-view">
|
|
<div class="qrcode-view">
|
|
- <img
|
|
|
|
- :src="'/ScanBuilding/service/qrcode/point?projectId=' + projectId + '&pointId=' + pointDetails.PointId + '&FloorId=' + pointDetails.FloorId + '&width=200&height=200'"
|
|
|
|
- alt="点位标签二维码"
|
|
|
|
- >
|
|
|
|
|
|
+ <img :src="'/api/scanbuilding-2/service/qrcode/zxing?Id=' + pointDetails.Id + '&width=200&height=200'" alt="点位标签二维码">
|
|
</div>
|
|
</div>
|
|
<div class="point-edit">
|
|
<div class="point-edit">
|
|
<p>
|
|
<p>
|
|
@@ -54,23 +38,10 @@ getLocation 定位
|
|
-({{pointDetails.X}},{{pointDetails.Y}})
|
|
-({{pointDetails.X}},{{pointDetails.Y}})
|
|
</p>
|
|
</p>
|
|
<div>
|
|
<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> -->
|
|
|
|
|
|
+ <form-input :width="100" @change="changeInput" :value="pointDetails.Name" :keys="'Name'" :label="'点位标签'" :isRule="false">
|
|
|
|
+ </form-input>
|
|
|
|
+ <form-input :width="100" @change="changeInput" :value="pointDetails.LocalId" :keys="'LocalId'" :label="'点位本地编码'" :isRule="false">
|
|
|
|
+ </form-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -79,7 +50,7 @@ getLocation 定位
|
|
<ul>
|
|
<ul>
|
|
<li>
|
|
<li>
|
|
<span>点位标签ID</span>
|
|
<span>点位标签ID</span>
|
|
- <span>{{pointDetails.PointId}}</span>
|
|
|
|
|
|
+ <span>{{pointDetails.Id}}</span>
|
|
</li>
|
|
</li>
|
|
<li>
|
|
<li>
|
|
<span>模型ID</span>
|
|
<span>模型ID</span>
|
|
@@ -97,66 +68,59 @@ getLocation 定位
|
|
<li>
|
|
<li>
|
|
<span>备注</span>
|
|
<span>备注</span>
|
|
<span>
|
|
<span>
|
|
- <form-input
|
|
|
|
- :width="0"
|
|
|
|
- @change="changeInput"
|
|
|
|
- :value="pointDetails.Note"
|
|
|
|
- :keys="'Note'"
|
|
|
|
- :label="''"
|
|
|
|
- :isRule="false"
|
|
|
|
- ></form-input>
|
|
|
|
|
|
+ <form-input :width="0" @change="changeInput" :value="pointDetails.Note" :keys="'Note'" :label="''" :isRule="false"></form-input>
|
|
</span>
|
|
</span>
|
|
</li>
|
|
</li>
|
|
</ul>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="point-pic">
|
|
<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>
|
|
|
|
|
|
+ <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>
|
|
<load-img keyName="其他照片" @getKey="getKey"></load-img>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
@@ -164,360 +128,347 @@ getLocation 定位
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<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('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) {
|
|
|
|
- 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();
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- projectId(){
|
|
|
|
- this.pointData= []
|
|
|
|
- this.pointNoData= []
|
|
|
|
- this.activeName2 = "point"
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+import {
|
|
|
|
+ updatePoint, //修改点位
|
|
|
|
+ queryLocationPoint, //数据中心-查询点位标签
|
|
|
|
+ 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
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ components: {
|
|
|
|
+ formInput,
|
|
|
|
+ loadImg
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ activeName2: "point",
|
|
|
|
+ pointData: [], //tab为本层的点位标签
|
|
|
|
+ pointShow: false, //标签详情的弹窗
|
|
|
|
+ pointDetails: {}, //标签详情信息对象
|
|
|
|
+ installPic: [], //安装位置
|
|
|
|
+ panorama: [], //全景照片
|
|
|
|
+ rimPic: [], //周边照片
|
|
|
|
+ videoPic: [], //视频资料
|
|
|
|
+ elsePic: [], //其他照片
|
|
|
|
+ map: true
|
|
};
|
|
};
|
|
-</script>
|
|
|
|
-
|
|
|
|
-<style lang="scss" scoped>
|
|
|
|
- #graphy-tabs {
|
|
|
|
- height: 100%;
|
|
|
|
- border-left: 1px solid #E4E7ED;
|
|
|
|
- .el-tabs__content {
|
|
|
|
- height: calc(100% - 60px) !important;
|
|
|
|
- background: red;
|
|
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapGetters('layout', ['projectId', 'secret', 'userId'])
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ //tabs被点击
|
|
|
|
+ handleClick(tab, event) {
|
|
|
|
+ this.pointData = [];
|
|
|
|
+ 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();
|
|
|
|
+ },
|
|
|
|
+ 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) {
|
|
|
|
+ let pa = {
|
|
|
|
+ Cascade: [{ Name: 'imageList' }],
|
|
|
|
+ Filters: `Id='${item.Id}'`
|
|
|
|
+ }
|
|
|
|
+ queryLocationPoint(pa, res => {
|
|
|
|
+ this.pointShow = true;
|
|
|
|
+ this.pointDetails = res.Content[0];
|
|
|
|
+ this.getPic(res.Content[0].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);
|
|
}
|
|
}
|
|
- .el-dialog__body{
|
|
|
|
- max-height: 400px;
|
|
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ //获取point
|
|
|
|
+ getPointList() {
|
|
|
|
+ this.isLoading = true;
|
|
|
|
+ if (this.pointParam.FloorId) {
|
|
|
|
+ let pa = {
|
|
|
|
+ Cascade: [{ Name: 'imageList' }],
|
|
|
|
+ PageSize: 500,
|
|
|
|
+ Filters: ''
|
|
}
|
|
}
|
|
- .saga-message {
|
|
|
|
- height: calc(100vh - 220px);
|
|
|
|
- line-height: 400px;
|
|
|
|
- color: #ccc;
|
|
|
|
- font-size: 24px;
|
|
|
|
- text-align: center;
|
|
|
|
|
|
+ if (this.activeName2 == "point") {
|
|
|
|
+ pa.Filters = `FloorId='${this.pointParam.FloorId}'`
|
|
|
|
+ } else {
|
|
|
|
+ pa.Filters = 'FloorId isNull'
|
|
}
|
|
}
|
|
- .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);
|
|
|
|
- }
|
|
|
|
|
|
+ queryLocationPoint(pa, res => {
|
|
|
|
+ this.pointData = res.Content;
|
|
|
|
+ if (this.activeName2 == "point") {
|
|
|
|
+ this.$emit("getPointList", res.Content);
|
|
|
|
+ }
|
|
|
|
+ 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();
|
|
}
|
|
}
|
|
- .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%;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ projectId() {
|
|
|
|
+ this.pointData = []
|
|
|
|
+ this.activeName2 = "point"
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+#graphy-tabs {
|
|
|
|
+ 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: 5px 0 5px 20px;
|
|
|
|
+ line-height: 30px;
|
|
|
|
+ span {
|
|
|
|
+ float: left;
|
|
|
|
+ width: 180px;
|
|
|
|
+ display: block;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .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;
|
|
}
|
|
}
|
|
- .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;
|
|
|
|
- }
|
|
|
|
|
|
+ span:first-child {
|
|
|
|
+ width: 30%;
|
|
}
|
|
}
|
|
- .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;
|
|
|
|
- }
|
|
|
|
|
|
+ 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>
|
|
</style>
|
|
|
|
|