|
@@ -3,7 +3,7 @@
|
|
|
<div id='repetitionGraphy'>
|
|
|
<div class='buttons'>
|
|
|
<el-button icon='el-icon-back' size='mini' @click='backRouter'></el-button>
|
|
|
- <template v-if="!hasModel">
|
|
|
+ <template v-if="!!hasModel">
|
|
|
<el-upload class='upload-demo' action='string' :http-request='uploadAndSubmit' :show-file-list='false' v-if="step==-1">
|
|
|
<el-button size="mini">{{hasGraph?'替换平面图图片':'上传平面图图片'}}</el-button>
|
|
|
</el-upload>
|
|
@@ -20,13 +20,19 @@
|
|
|
<!-- 展示图片 -->
|
|
|
<div class='drawImg'>
|
|
|
<div style="width: 100%;height: 100%;position: relative;" v-if="hasGraph">
|
|
|
- <drawFloor ref='drawFloor' :isEdit='isEdit' :showTools='true' :id='1' @changeSign='changeSign'></drawFloor>
|
|
|
+ <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="设定比例尺"></el-step>
|
|
|
- <el-step title="楼层对齐"></el-step>
|
|
|
+ <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">
|
|
|
+ <li style="border-bottom:1px solid #ccc;text-align: center;padding: 0">选择对齐楼层</li>
|
|
|
+ <li v-for="t in floorList" :key="t.FloorID">
|
|
|
+ <el-radio v-model="floorRadio" :label="t" @change="changeFloor" :disabled="t.FloorID == FloorID">{{t.FloorLocalID || t.FloorLocalName}}</el-radio>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
<div style="width: 100%;height: 100%" v-else>
|
|
|
<div class="center" style="padding-top: 300px">
|
|
@@ -36,22 +42,30 @@
|
|
|
</div>
|
|
|
<!-- 查看图片弹窗 -->
|
|
|
<checkGraphy ref='checkGraphy' @refresh='refresh' :alreadyRelatedModel='alreadyRelatedModel'></checkGraphy>
|
|
|
+ <!-- 设定比例尺弹窗 -->
|
|
|
+ <setScaleDialog ref="setScaleDialog"></setScaleDialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import drawFloor from './drawGraphy/drawFloor'
|
|
|
import checkGraphy from './drawGraphy/checkGraphy' //查看图片
|
|
|
+import setScaleDialog from '@/components/ready/buildfloor/setScaleDialog'
|
|
|
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'
|
|
|
export default {
|
|
|
components: {
|
|
|
drawFloor,
|
|
|
checkGraphy,
|
|
|
+ setScaleDialog
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
modelId: '', //
|
|
|
isEdit: false, // 是否编辑模式
|
|
|
+ FloorID: '',
|
|
|
file: {},
|
|
|
alreadyRelatedModel: [],
|
|
|
sign: false,
|
|
@@ -59,6 +73,17 @@ export default {
|
|
|
hasGraph: false, // 当前楼层是否有平面图
|
|
|
hasModel: false, // 项目中时候有模型文件
|
|
|
step: -1, // 当前处于第几步
|
|
|
+ key: '', // 当楼层图为图片时图的key
|
|
|
+ stepDes: [
|
|
|
+ '请在图上点击两点绘制线段并标记实际长度',
|
|
|
+ '请移动图片与其他楼层对齐'
|
|
|
+ ], // 描述文字
|
|
|
+ floorList: [], // 当前建筑下所有楼层
|
|
|
+ floorRadio: '', //
|
|
|
+ imgService: `/image-service/common/image_get?systemId=dataPlatform&key=`,
|
|
|
+ curImgItem: null, // 对齐的楼层图片
|
|
|
+ scaleItem: null, // 比例尺item
|
|
|
+ baseImgItem: null, // 当前楼层图的图片
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
@@ -137,6 +162,7 @@ export default {
|
|
|
this.hasGraph = true;
|
|
|
const temp = this.modelId.split('.');
|
|
|
if (temp[1] && temp[1] != 'png' && temp[1] != 'jpg') {
|
|
|
+ this.key = '';
|
|
|
this.getFileName(this.modelId)
|
|
|
}
|
|
|
},
|
|
@@ -155,8 +181,12 @@ export default {
|
|
|
let floorParam = {
|
|
|
PageSize: 1000,
|
|
|
Filters: `BuildID='${this.BuildID}'`,
|
|
|
+ Orders: 'FloorSequenceID desc'
|
|
|
}
|
|
|
floorQueryAndSign(floorParam, (res) => {
|
|
|
+ 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
|
|
@@ -215,8 +245,17 @@ export default {
|
|
|
// 更新楼层key 为图片
|
|
|
updateFloorKey(){
|
|
|
let Param = {
|
|
|
- Content: [{ FloorId: this.FloorID, StructureInfo: { FloorMap: this.key } }],
|
|
|
- Projection: ['FloorMap'],
|
|
|
+ Content: [{
|
|
|
+ FloorId: this.FloorID,
|
|
|
+ StructureInfo: { FloorMap: this.key },
|
|
|
+ Properties: {
|
|
|
+ X: this.baseImgItem.x,
|
|
|
+ Y: this.baseImgItem.y,
|
|
|
+ line: this.scaleItem.line,
|
|
|
+ Scale: this.scaleItem
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ Projection: ['FloorMap', 'Properties'],
|
|
|
}
|
|
|
manageUpdateFloor(Param, (res) => {
|
|
|
this.$message.success('更新成功')
|
|
@@ -233,14 +272,70 @@ export default {
|
|
|
},
|
|
|
// 下一步||保存
|
|
|
nextStep() {
|
|
|
+ this.baseImgItem = this.$refs.drawFloor.drawMainScene.imgList[0]
|
|
|
+ this.baseImgItem.globalAlpha = 0.2
|
|
|
+ this.baseImgItem.moveable = true;
|
|
|
// 下一步
|
|
|
if (this.step == 0) {
|
|
|
- this.step = 1
|
|
|
+ this.step = 1;
|
|
|
+ this.scaleItem.hide();
|
|
|
+ //
|
|
|
+ this.getFloorData()
|
|
|
} else if (this.step == 1) {
|
|
|
// 保存
|
|
|
this.updateFloorKey();
|
|
|
}
|
|
|
},
|
|
|
+ // 比例尺
|
|
|
+ setScale() {
|
|
|
+ this.scaleItem = new EditLineItem(null)
|
|
|
+ this.$refs.drawFloor.drawMainScene.addItem(this.scaleItem)
|
|
|
+ this.scaleItem.connect('changText', this, this.changeText)
|
|
|
+ this.scaleItem.strokeColor = SColor.Red;
|
|
|
+ this.scaleItem.status = SItemStatus.Create;
|
|
|
+ this.$refs.drawFloor.drawMainScene.grabItem = this.scaleItem;
|
|
|
+ this.scaleItem.moveable = true;
|
|
|
+ },
|
|
|
+ // 加载图成功
|
|
|
+ getGraphSuc() {
|
|
|
+ if (this.key) {
|
|
|
+ this.setScale();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 修改比例尺文字
|
|
|
+ changeText(t, e) {
|
|
|
+ this.$refs.setScaleDialog.showDialog(t)
|
|
|
+ },
|
|
|
+ // 第二部楼层修改
|
|
|
+ changeFloor(v) {
|
|
|
+ this.removeLast();
|
|
|
+ if (v.StructureInfo && v.StructureInfo.FloorMap) {
|
|
|
+ const url = this.imgService + v.StructureInfo.FloorMap
|
|
|
+ this.curImgItem = new SImageItem(null, url);
|
|
|
+ this.curImgItem.globalAlpha = 0.2;
|
|
|
+ this.curImgItem.showType = SImageShowType.AutoFit;
|
|
|
+ if (v.Properties) {
|
|
|
+ try {
|
|
|
+ // 计算比例尺- todo
|
|
|
+ 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.view.fitSceneToView()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 清除上一张底图
|
|
|
+ removeLast() {
|
|
|
+ if (this.curImgItem) {
|
|
|
+ this.$refs.drawFloor.drawMainScene.removeItem(this.curImgItem);
|
|
|
+ this.curImgItem = null;
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
watch: {
|
|
|
modelId(n, o) {
|
|
@@ -280,5 +375,22 @@ export default {
|
|
|
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>
|