|
@@ -3,39 +3,102 @@
|
|
|
<div id='repetitionGraphy'>
|
|
|
<div class='buttons'>
|
|
|
<el-button icon='el-icon-back' size='mini' @click='backRouter'></el-button>
|
|
|
- <el-button v-if='!isEdit' size='mini' @click='changeGraphy'>替换平面图</el-button>
|
|
|
- <el-button v-if='(sign||otherSign)&&!isEdit' size='mini' @click='editGraphy'>编辑平面图</el-button>
|
|
|
- <el-button v-if='isEdit' size='mini' @click='cancel'>取消</el-button>
|
|
|
- <el-button v-if='isEdit' size='mini' @click='confirm' type='primary'>确认</el-button>
|
|
|
- <span style='float:right;' v-if='file.FolderName'>当前对应的模型文件:{{ file.FolderName }} - {{ file.FloorName }}</span>
|
|
|
+ <template v-if="!hasModel">
|
|
|
+ <el-upload class='upload-demo' action='string' :http-request='uploadAndSubmit' :show-file-list='false' v-if="step==-1" accept=".jpg,.png">
|
|
|
+ <el-button size="mini">{{hasGraph?'替换平面图图片':'上传平面图图片'}}</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <el-button style='float:right;' size='mini' type='primary' v-if="step==0" @click="nextStep" :disabled="nextStepBtnDisable">下一步</el-button>
|
|
|
+ <el-button style='float:right;' size='mini' type='primary' v-if="step==1" @click="nextStep">保存</el-button>
|
|
|
+ <el-button style='float:right;' size='mini' v-if="step==1" @click="lastStep">上一步</el-button>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-button v-if='!isEdit' size='mini' @click='changeGraphy'>{{hasGraph?'替换模型文件':'关联模型文件'}}</el-button>
|
|
|
+ <el-button v-if='(sign||otherSign)&&!isEdit' size='mini' @click='editGraphy'>编辑平面图</el-button>
|
|
|
+ <el-button v-if='isEdit' size='mini' @click='cancel'>取消</el-button>
|
|
|
+ <el-button v-if='isEdit' size='mini' @click='confirm' type='primary'>确认</el-button>
|
|
|
+ </template>
|
|
|
+ <span style='float:right;' v-if='file.FolderName'>当前对应的模型文件:{{file.FolderName}} - {{file.FloorName}}</span>
|
|
|
</div>
|
|
|
<!-- 展示图片 -->
|
|
|
<div class='drawImg'>
|
|
|
- <drawFloor ref='drawFloor' :isEdit='isEdit' :showTools='true' :id='1' @changeSign='changeSign'></drawFloor>
|
|
|
+ <div style="width: 100%;height: 100%;position: relative;" v-if="hasGraph">
|
|
|
+ <drawFloor ref='drawFloor' :isEdit='isEdit' :showTools='true' :id='1' @changeSign='changeSign' @getGraphSuc="getGraphSuc"></drawFloor>
|
|
|
+ <div class="stepContainer" v-if="step>-1">
|
|
|
+ <el-steps :active="step" align-center finish-status="success" process-status="process">
|
|
|
+ <el-step title="设定比例尺" :description="stepDes[0]"></el-step>
|
|
|
+ <el-step title="楼层对齐" :description="stepDes[1]"></el-step>
|
|
|
+ </el-steps>
|
|
|
+ </div>
|
|
|
+ <ul class="floorList" v-if="step==1">
|
|
|
+ <template v-if="floorList.length > 1">
|
|
|
+ <li style="border-bottom:1px solid #ccc;text-align: center;padding: 0">选择对齐楼层</li>
|
|
|
+ <li v-for="t in floorList" :key="t.id">
|
|
|
+ <el-radio v-model="floorRadio" :label="t" @change="changeFloor" :disabled="t.id == FloorID">{{t.localId || t.localName}}</el-radio>
|
|
|
+ </li>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <li style="text-align: center;padding: 0">
|
|
|
+ 暂无对齐楼层
|
|
|
+ </li>
|
|
|
+ </template>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100%;height: 100%" v-else>
|
|
|
+ <div class="center" style="padding-top: 300px">
|
|
|
+ <i class="icon-wushuju iconfont"></i>暂无平面图
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 查看图片弹窗 -->
|
|
|
<checkGraphy ref='checkGraphy' @refresh='refresh' :alreadyRelatedModel='alreadyRelatedModel'></checkGraphy>
|
|
|
+ <!-- 设定比例尺弹窗 -->
|
|
|
+ <setScaleDialog ref="setScaleDialog" @textChange="scaleTextChange"></setScaleDialog>
|
|
|
+ <!-- 退出时弹窗提示 -->
|
|
|
+ <backTips ref='backTips' @back="runBack"></backTips>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import drawFloor from './drawGraphy/drawFloor'
|
|
|
import checkGraphy from './drawGraphy/checkGraphy' //查看图片
|
|
|
-import { floorUpdateOutline, floorQueryAndSign } from '@/api/scan/request'
|
|
|
-import { getFileNameById } from '@/api/model/file'
|
|
|
-
|
|
|
+import setScaleDialog from '@/components/ready/buildfloor/setScaleDialog'
|
|
|
+import backTips from '@/components/ready/buildfloor/backTips'
|
|
|
+import { floorUpdateOutline, floorQueryAndSign, manageUpdateFloor } from '@/api/scan/request'
|
|
|
+import { getFileNameById, countModel } from '@/api/model/file'
|
|
|
+import { EditLineItem, SItemStatus, SImageShowType, IconTextItem } from "@saga-web/cad-engine"
|
|
|
+import { SColor } from "@saga-web/draw"
|
|
|
+import { SImageItem } from '@saga-web/graph/lib'
|
|
|
+import { SMathUtil } from "@saga-web/cad-engine/lib/utils/SMathUtil"
|
|
|
export default {
|
|
|
components: {
|
|
|
drawFloor,
|
|
|
checkGraphy,
|
|
|
+ setScaleDialog,
|
|
|
+ backTips
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
modelId: '', //
|
|
|
isEdit: false, // 是否编辑模式
|
|
|
+ FloorID: '',
|
|
|
file: {},
|
|
|
alreadyRelatedModel: [],
|
|
|
sign: false,
|
|
|
otherSign: false,
|
|
|
+ hasGraph: false, // 当前楼层是否有平面图
|
|
|
+ hasModel: false, // 项目中时候有模型文件
|
|
|
+ step: -1, // 当前处于第几步 同时为比例尺item判断是否创建的可编辑的依据;能否返回上页的依据
|
|
|
+ key: '', // 当楼层图为图片时图的key
|
|
|
+ stepDes: [
|
|
|
+ '请在图上点击两点绘制线段并标记实际长度',
|
|
|
+ '请移动图片与其他楼层对齐'
|
|
|
+ ], // 描述文字
|
|
|
+ floorList: [], // 当前建筑下所有楼层
|
|
|
+ floorRadio: '', // 当前选中的楼层对象
|
|
|
+ imgService: `/image-service/common/image_get?systemId=dataPlatform&key=`,
|
|
|
+ curImgItem: null, // 对齐的楼层图片
|
|
|
+ scaleItem: null, // 比例尺item
|
|
|
+ baseImgItem: null, // 当前楼层图的图片
|
|
|
+ nextStepBtnDisable: true, // 比例尺item创建标识
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
@@ -43,15 +106,18 @@ export default {
|
|
|
this.FloorID = this.$route.query.FloorID
|
|
|
this.BuildID = this.$route.query.BuildID
|
|
|
this.BuildName = this.$route.query.BuildName
|
|
|
- if (this.modelId.split('.')[1].toString() == 'png' || this.modelId.split('.')[1].toString() == 'jpg') {
|
|
|
- return
|
|
|
- } else {
|
|
|
- this.init()
|
|
|
+ if (this.modelId != '') {
|
|
|
+ this.hasGraph = true;
|
|
|
+ const temp = this.modelId.split('.');
|
|
|
+ if (temp[1] && (temp[1].toLowerCase() == 'png' || temp[1].toLowerCase() == 'jpg')) {
|
|
|
+ // return
|
|
|
+ } else {
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- },
|
|
|
- mounted() {
|
|
|
+ this.getCountModel()
|
|
|
},
|
|
|
+ mounted() {},
|
|
|
methods: {
|
|
|
init() {
|
|
|
this.getFileName(this.modelId)
|
|
@@ -59,6 +125,14 @@ export default {
|
|
|
},
|
|
|
// 返回路由
|
|
|
backRouter() {
|
|
|
+ // 底图为图片 上传完图片后未保存
|
|
|
+ if (this.step > -1) {
|
|
|
+ this.$refs.backTips.showDialog();
|
|
|
+ } else {
|
|
|
+ this.runBack()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ runBack() {
|
|
|
this.$router.push({ name: 'buildFloor' })
|
|
|
},
|
|
|
// 替换模型文件
|
|
@@ -88,7 +162,7 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
let pa = {
|
|
|
- Content: [{ FloorID: this.FloorID, Outline: Outline }],
|
|
|
+ Content: [{ id: this.FloorID, outline: Outline }],
|
|
|
Projection: ['Outline'],
|
|
|
}
|
|
|
floorUpdateOutline(pa, (res) => {
|
|
@@ -108,7 +182,12 @@ export default {
|
|
|
// 替换模型文件成功
|
|
|
refresh(modelId) {
|
|
|
this.modelId = modelId
|
|
|
- this.getFileName(this.modelId)
|
|
|
+ this.hasGraph = true;
|
|
|
+ const temp = this.modelId.split('.');
|
|
|
+ if (temp[1] && temp[1].toLowerCase() != 'png' && temp[1].toLowerCase() != 'jpg') {
|
|
|
+ this.key = '';
|
|
|
+ this.getFileName(this.modelId)
|
|
|
+ }
|
|
|
},
|
|
|
// 获取文件夹名称
|
|
|
getFileName(modelId) {
|
|
@@ -123,14 +202,18 @@ export default {
|
|
|
// 获取楼层
|
|
|
getFloorData() {
|
|
|
let floorParam = {
|
|
|
- PageSize: 1000,
|
|
|
- Filters: `BuildID='${this.BuildID}'`,
|
|
|
+ pageSize: 1000,
|
|
|
+ filters: `buildingId='${this.BuildID}'`,
|
|
|
+ orders: 'floorSequenceID desc'
|
|
|
}
|
|
|
floorQueryAndSign(floorParam, (res) => {
|
|
|
- this.alreadyRelatedModel = res.Content.map((t) => {
|
|
|
- if (t.FloorID != this.FloorID) return t.ModelId
|
|
|
+ this.floorList = res.content;
|
|
|
+ // todo
|
|
|
+ this.floorRadio = res.content[0];
|
|
|
+ this.alreadyRelatedModel = res.content.map((t) => {
|
|
|
+ if (t.floorID != this.FloorID) return t.modelId
|
|
|
this.sign = t.Sign > 0
|
|
|
- this.FloorName = t.FloorLocalName || t.FloorName
|
|
|
+ this.FloorName = t.localName || t.name
|
|
|
this.$refs.drawFloor.buildFloorName = `${this.BuildName}-${this.FloorName}`
|
|
|
}).filter((t) => t)
|
|
|
})
|
|
@@ -138,15 +221,205 @@ export default {
|
|
|
changeSign(flag) {
|
|
|
this.otherSign = flag
|
|
|
},
|
|
|
+ // 统计项目下是否有模型文件
|
|
|
+ getCountModel() {
|
|
|
+ countModel({Filters:"Status in [4]"}, res => {
|
|
|
+ this.hasModel = res.Count > 0
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //上传图片
|
|
|
+ uploadAndSubmit(item) {
|
|
|
+ let file = item.file
|
|
|
+ let reader = new FileReader()
|
|
|
+ let vm = this
|
|
|
+ let fileType = file.name.split('.')
|
|
|
+ let type = fileType[fileType.length - 1]
|
|
|
+ let uploadKey = file.uid
|
|
|
+ reader.onloadend = function () {
|
|
|
+ // 这个事件在读取结束后,无论成功或者失败都会触发
|
|
|
+ if (reader.error) {
|
|
|
+ } else {
|
|
|
+ // document.getElementById("bytesRead").textContent = file.size;
|
|
|
+ // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
|
|
|
+ var xhr = new XMLHttpRequest()
|
|
|
+ xhr.open(
|
|
|
+ /* method */ 'POST',
|
|
|
+ /* target url */
|
|
|
+ '/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=' + uploadKey + '.' + type
|
|
|
+ /*, async, default to true */
|
|
|
+ )
|
|
|
+ //xhr.overrideMimeType("application/octet-stream");
|
|
|
+ xhr.send(reader.result)
|
|
|
+ xhr.onreadystatechange = function () {
|
|
|
+ if (xhr.readyState == 4) {
|
|
|
+ if (xhr.status == 200) {
|
|
|
+ vm.key = uploadKey + '.' + type
|
|
|
+ // 将图片展示
|
|
|
+ vm.refresh(uploadKey + '.' + type)
|
|
|
+ // 设置步骤为第一步
|
|
|
+ vm.step = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ reader.readAsArrayBuffer(file)
|
|
|
+ },
|
|
|
+ // 更新楼层key 为图片,同时更新比例尺
|
|
|
+ updateFloorKey() {
|
|
|
+ const scaleItem = this.$refs.drawFloor.scaleItem;
|
|
|
+ // 比例尺坐标处理,当底图被对齐操作后,需要跟随底图改变坐标
|
|
|
+ const line = scaleItem.line.map(t => {
|
|
|
+ return { x: t.x + this.baseImgItem.x, y: t.y + this.baseImgItem.y }
|
|
|
+ })
|
|
|
+ let Param = {
|
|
|
+ content: [{
|
|
|
+ id: this.FloorID,
|
|
|
+ infos: { floorMap: this.key },
|
|
|
+ properties: {
|
|
|
+ X: this.baseImgItem.x,
|
|
|
+ Y: this.baseImgItem.y,
|
|
|
+ Line: line,
|
|
|
+ Text: scaleItem.text
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ // projection: ['infos', 'properties'],
|
|
|
+ }
|
|
|
+ manageUpdateFloor(Param, (res) => {
|
|
|
+ this.$message.success('更新成功')
|
|
|
+ this.step = -1;
|
|
|
+ this.baseImgItem.globalAlpha = 1
|
|
|
+ this.removeLast()
|
|
|
+ this.$refs.drawFloor.fit()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 根据modelid初始化
|
|
|
+ initFromModelId(id) {
|
|
|
+ const temp = id.split('.')[1];
|
|
|
+ if (temp && (temp.toLowerCase() == 'png' || temp.toLowerCase() == 'jpg')) {
|
|
|
+ this.$refs.drawFloor.initGraphy(id, 3)
|
|
|
+ } else {
|
|
|
+ this.$refs.drawFloor.initGraphy(id, 1)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 上一步
|
|
|
+ lastStep() {
|
|
|
+ this.step = 0;
|
|
|
+ this.$refs.drawFloor.scaleItem.show()
|
|
|
+ this.baseImgItem.globalAlpha = 1
|
|
|
+ this.removeLast()
|
|
|
+ },
|
|
|
+ // 下一步||保存
|
|
|
+ nextStep() {
|
|
|
+ this.baseImgItem = this.$refs.drawFloor.drawMainScene.imgList[0]
|
|
|
+ this.baseImgItem.globalAlpha = 0.5
|
|
|
+ this.baseImgItem.moveable = true;
|
|
|
+ // 下一步
|
|
|
+ if (this.step == 0) {
|
|
|
+ this.step = 1;
|
|
|
+ this.$refs.drawFloor.scaleItem.hide();
|
|
|
+ // 获取楼层列表
|
|
|
+ this.getFloorData()
|
|
|
+ } else if (this.step == 1) {
|
|
|
+ // 保存
|
|
|
+ this.updateFloorKey();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 加载图成功 仅在底图为图片时返回成功
|
|
|
+ getGraphSuc() {
|
|
|
+ const scaleItem = this.$refs.drawFloor.scaleItem
|
|
|
+ if (this.step == 0) {
|
|
|
+ scaleItem.status = SItemStatus.Create;
|
|
|
+ this.$refs.drawFloor.drawMainScene.grabItem = scaleItem;
|
|
|
+ scaleItem.connect('changText', this, this.changeText)
|
|
|
+ scaleItem.moveable = true;
|
|
|
+ this.clearScaleData(scaleItem);
|
|
|
+ } else if (this.step == -1) {
|
|
|
+ scaleItem.status = SItemStatus.Normal;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 修改比例尺文字
|
|
|
+ changeText(t, e) {
|
|
|
+ this.$refs.setScaleDialog.showDialog(t)
|
|
|
+ },
|
|
|
+ // 文本修改
|
|
|
+ scaleTextChange(v) {
|
|
|
+ if (v > 0) {
|
|
|
+ this.nextStepBtnDisable = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 第二部楼层修改
|
|
|
+ changeFloor(v) {
|
|
|
+ // v->当前改为的楼层对象
|
|
|
+ this.removeLast();
|
|
|
+ if (v.StructureInfo && v.StructureInfo.FloorMap) {
|
|
|
+ const url = this.imgService + v.StructureInfo.FloorMap
|
|
|
+ this.curImgItem = new SImageItem(null, url);
|
|
|
+ this.curImgItem.enabled = false;
|
|
|
+ this.curImgItem.showType = SImageShowType.AutoFit;
|
|
|
+ if (v.Properties) {
|
|
|
+ try {
|
|
|
+ // 计算两个比例尺差距
|
|
|
+ const scaleItem = this.$refs.drawFloor.scaleItem
|
|
|
+ this.curImgItem.zOrder = scaleItem.zOrder - 1;
|
|
|
+ const r = this.calScaleGap(v.Properties, scaleItem);
|
|
|
+ if (r != 1) {
|
|
|
+ this.$message.warning('比例尺相差较大,可以返回上一步修改比例尺')
|
|
|
+ }
|
|
|
+ this.curImgItem.showType == SImageShowType.Full;
|
|
|
+ this.curImgItem.moveTo(v.Properties.X, v.Properties.Y);
|
|
|
+ // this.curImgItem.width = v.Properties.width;
|
|
|
+ // this.curImgItem.height = v.Properties.height;
|
|
|
+ } catch (err) {
|
|
|
+ console.log(err);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$refs.drawFloor.drawMainScene.addItem(this.curImgItem);
|
|
|
+ this.$refs.drawFloor.fit()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 清除上一张底图
|
|
|
+ removeLast() {
|
|
|
+ if (this.curImgItem) {
|
|
|
+ this.$refs.drawFloor.drawMainScene.removeItem(this.curImgItem);
|
|
|
+ this.curImgItem = null;
|
|
|
+ this.$refs.drawFloor.view.update()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 清空比例尺数据
|
|
|
+ clearScaleData(scaleItem) {
|
|
|
+ scaleItem.line = [];
|
|
|
+ scaleItem.pointChange();
|
|
|
+ scaleItem.text = '0 mm';
|
|
|
+ },
|
|
|
+ // 计算两个比例尺差距
|
|
|
+ calScaleGap(pro, item) {
|
|
|
+ // pro -> 楼层的properties
|
|
|
+ // item -> 当前的比例尺item
|
|
|
+ let result = 1
|
|
|
+ if (pro.Line.length && pro.Text) {
|
|
|
+ try {
|
|
|
+ const proDis = SMathUtil.pointDistance(pro.Line[0].x, pro.Line[0].y, pro.Line[1].x, pro.Line[1].y)
|
|
|
+ const proText = pro.Text.substring(0, pro.Text.length - 3);
|
|
|
+ const proScale = proDis / proText;
|
|
|
+ const itemDis = SMathUtil.pointDistance(item.line[0].x, item.line[0].y, item.line[1].x, item.line[1].y)
|
|
|
+ const itemText = item.text.substring(0, item.text.length - 3);
|
|
|
+ const itemScale = itemDis / itemText;
|
|
|
+ result = (proScale / itemScale).toFixed()
|
|
|
+ } catch (err) {
|
|
|
+ console.log(err);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return result;
|
|
|
+ }
|
|
|
},
|
|
|
watch: {
|
|
|
modelId(n, o) {
|
|
|
- if (o && n != o) {
|
|
|
- console.log(n.split('.')[1])
|
|
|
- if (n.split('.')[1].toString() == 'png' || n.split('.')[1].toString() == 'jpg') {
|
|
|
- this.$refs.drawFloor.initGraphy(n, 3)
|
|
|
- } else {
|
|
|
- this.$refs.drawFloor.initGraphy(n, 1)
|
|
|
+ if (n != o) {
|
|
|
+ if (n) {
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ this.initFromModelId(n)
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
},
|
|
@@ -161,11 +434,39 @@ export default {
|
|
|
position: relative;
|
|
|
padding: 10px;
|
|
|
box-sizing: border-box;
|
|
|
-
|
|
|
.drawImg {
|
|
|
width: 100%;
|
|
|
margin-top: 10px;
|
|
|
height: calc(100% - 40px);
|
|
|
}
|
|
|
+ .upload-demo {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .stepContainer {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -50%;
|
|
|
+ z-index: 9;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .floorList {
|
|
|
+ position: absolute;
|
|
|
+ width: 100px;
|
|
|
+ max-height: 250px;
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ left: 40px;
|
|
|
+ top: 200px;
|
|
|
+ z-index: 10;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ li {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 10px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|