123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409 |
- <template>
-
- <div id='repetitionGraphy'>
- <div class='buttons'>
- <el-button icon='el-icon-back' size='mini' @click='backRouter'></el-button>
- <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>
- <el-button style='float:right;' size='mini' type='primary' v-if="step==0" @click="nextStep">下一步</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'>
- <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">
- <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">
- <i class="icon-wushuju iconfont"></i>暂无平面图
- </div>
- </div>
- </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,
- otherSign: false,
- hasGraph: false,
- hasModel: false,
- step: -1,
- key: '',
- stepDes: [
- '请在图上点击两点绘制线段并标记实际长度',
- '请移动图片与其他楼层对齐'
- ],
- floorList: [],
- floorRadio: '',
- imgService: `/image-service/common/image_get?systemId=dataPlatform&key=`,
- curImgItem: null,
- scaleItem: null,
- baseImgItem: null,
- }
- },
- created() {
- this.modelId = this.$route.query.modelId
- this.FloorID = this.$route.query.FloorID
- this.BuildID = this.$route.query.BuildID
- this.BuildName = this.$route.query.BuildName
- if (this.modelId != '') {
- this.hasGraph = true;
- const temp = this.modelId.split('.');
- if (temp[1] == 'png' || temp[1] == 'jpg') {
-
- } else {
- this.init()
- }
- }
- this.getCountModel()
- },
- mounted() {},
- methods: {
- init() {
- this.getFileName(this.modelId)
- this.getFloorData()
- },
-
- backRouter() {
- this.$router.push({ name: 'buildFloor' })
- },
-
- changeGraphy() {
- this.$refs.checkGraphy.showDialog({ FloorID: this.FloorID, BuildID: this.BuildID })
- },
-
- confirm() {
- let sceneMark = this.$refs.drawFloor.drawMainScene.sceneMark,
- Outline = null
- if (sceneMark) {
- if (sceneMark.outLine.length < 3) {
- this.$message.warning('请添加轮廓线')
- return
- }
- if (!sceneMark.closeFlag) {
- this.$message.warning('请按回车闭合轮廓线')
- this.$refs.drawFloor.focus()
- return
- }
- Outline = this.$refs.drawFloor.drawMainScene.sceneMark.outLine
- Outline = Outline.map((t) => {
- return {
- x: t.x.toFixed(2),
- y: -t.y.toFixed(2),
- }
- })
- }
- let pa = {
- Content: [{ FloorID: this.FloorID, Outline: Outline }],
- Projection: ['Outline'],
- }
- floorUpdateOutline(pa, (res) => {
- this.isEdit = false
- this.$message.success('更新成功')
- })
- },
-
- cancel() {
- this.isEdit = false
- this.$refs.drawFloor.init()
- },
-
- editGraphy() {
- this.isEdit = true
- },
-
- refresh(modelId) {
- this.modelId = modelId
- this.hasGraph = true;
- const temp = this.modelId.split('.');
- if (temp[1] && temp[1] != 'png' && temp[1] != 'jpg') {
- this.key = '';
- this.getFileName(this.modelId)
- }
- },
-
- getFileName(modelId) {
- if (!modelId) return
- let pa = {
- Id: modelId,
- }
- getFileNameById(pa, (res) => {
- this.file = res
- })
- },
-
- getFloorData() {
- let floorParam = {
- PageSize: 1000,
- Filters: `BuildID='${this.BuildID}'`,
- Orders: 'FloorSequenceID desc'
- }
- floorQueryAndSign(floorParam, (res) => {
- this.floorList = res.Content;
-
- 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.$refs.drawFloor.buildFloorName = `${this.BuildName}-${this.FloorName}`
- }).filter((t) => t)
- })
- },
- changeSign(flag) {
- this.otherSign = flag
- },
-
- getCountModel(){
- countModel({}, 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 {
-
-
- var xhr = new XMLHttpRequest()
- xhr.open(
- 'POST',
-
- '/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=' + uploadKey + '.' + type
-
- )
-
- 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)
- },
-
- 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: [{
- FloorId: this.FloorID,
- StructureInfo: { FloorMap: this.key },
- Properties: {
- X: this.baseImgItem.x,
- Y: this.baseImgItem.y,
- Line: line,
- Text: scaleItem.text
- }
- }],
- Projection: ['StructureInfo', 'Properties'],
- }
- manageUpdateFloor(Param, (res) => {
- this.$message.success('更新成功')
- this.step = -1;
- this.baseImgItem.globalAlpha = 1
- this.removeLast()
- this.$refs.drawFloor.fit()
- })
- },
-
- initFromModelId(id){
- if (id.split('.')[1] == 'png' || id.split('.')[1] == '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.2
- 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;
- } else if (this.step == -1) {
- scaleItem.status = SItemStatus.Normal;
- }
- },
-
- 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 {
-
- 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;
- }
- }
- },
- watch: {
- modelId(n, o) {
- if (n != o) {
- if (n) {
- this.$nextTick(()=>{
- this.initFromModelId(n)
- })
- }
- }
- },
- },
- }
- </script>
- <style lang="less">
- #repetitionGraphy {
- width: 100%;
- height: 100%;
- background: #fff;
- 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>
|