|  | @@ -0,0 +1,572 @@
 | 
	
		
			
				|  |  | +<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" accept=".jpg,.png"
 | 
	
		
			
				|  |  | +          :before-upload="beforeUpload">
 | 
	
		
			
				|  |  | +          <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>
 | 
	
		
			
				|  |  | +        <span :title="repeatTextTips" class="repeatTips" v-if="repeatFloor.length">{{repeatTextTips}}</span>
 | 
	
		
			
				|  |  | +      </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" @handled="repeatHandled"></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 setScaleDialog from '@/components/old-adm/ready/components/setScaleDialog'
 | 
	
		
			
				|  |  | +import backTips from '@/components/old-adm/ready/components/backTips'
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +import ScanController from '@/controller/old-adm/ScanController'
 | 
	
		
			
				|  |  | +import FileController from '@/controller/old-adm/fileController'
 | 
	
		
			
				|  |  | +import {SItemStatus, SImageShowType } from "@saga-web/cad-engine"
 | 
	
		
			
				|  |  | +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: `${window.__systemConf.baseServiceUrl}/image-service/common/image_get?systemId=dataPlatform&key=`,
 | 
	
		
			
				|  |  | +      curImgItem: null, // 对齐的楼层图片
 | 
	
		
			
				|  |  | +      scaleItem: null, // 比例尺item
 | 
	
		
			
				|  |  | +      baseImgItem: null, // 当前楼层图的图片
 | 
	
		
			
				|  |  | +      nextStepBtnDisable: true, // 比例尺item创建标识
 | 
	
		
			
				|  |  | +      timeOut: true, // 保存按钮延时3秒可操作
 | 
	
		
			
				|  |  | +      repeatFloor: [], // 重复的楼层
 | 
	
		
			
				|  |  | +      handled: false,
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  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
 | 
	
		
			
				|  |  | +    this.FloorName = this.$route.query.FloorName
 | 
	
		
			
				|  |  | +    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()
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    } else {
 | 
	
		
			
				|  |  | +      this.init()
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    this.getCountModel()
 | 
	
		
			
				|  |  | +    this.$nextTick(() => {
 | 
	
		
			
				|  |  | +      this.$refs.drawFloor.buildFloorName = `${this.BuildName}-${this.FloorName}`
 | 
	
		
			
				|  |  | +    })
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  computed: {
 | 
	
		
			
				|  |  | +    repeatTextTips() {
 | 
	
		
			
				|  |  | +      let str = `当前楼层与${this.repeatFloor.join('、')}关联同一个平面图`
 | 
	
		
			
				|  |  | +      if (!this.handled) {
 | 
	
		
			
				|  |  | +        str += `,请通过「编辑平面图」划分当前楼层对应的平面图范围`
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      return str
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  mounted() { },
 | 
	
		
			
				|  |  | +  methods: {
 | 
	
		
			
				|  |  | +    init() {
 | 
	
		
			
				|  |  | +      this.getFloorData()
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 返回路由
 | 
	
		
			
				|  |  | +    backRouter() {
 | 
	
		
			
				|  |  | +      // 底图为图片  上传完图片后未保存
 | 
	
		
			
				|  |  | +      if (this.step > -1) {
 | 
	
		
			
				|  |  | +        this.$refs.backTips.showDialog();
 | 
	
		
			
				|  |  | +      } else {
 | 
	
		
			
				|  |  | +        this.runBack()
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    runBack() {
 | 
	
		
			
				|  |  | +      this.$router.push({ name: 'buildFloor', query: {buildingId: this.BuildID} })
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 替换模型文件
 | 
	
		
			
				|  |  | +    changeGraphy() {
 | 
	
		
			
				|  |  | +      this.$refs.checkGraphy.showDialog({ FloorID: this.FloorID, BuildID: this.BuildID, CurrentModelId: this.currentModelId })
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 确认保存
 | 
	
		
			
				|  |  | +    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: [{ id: this.FloorID, outline: Outline }]
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      if (!Outline) {
 | 
	
		
			
				|  |  | +        pa.nullItems = ['outline']
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      ScanController.floorUpdateOutline(pa).then((res) => {
 | 
	
		
			
				|  |  | +        this.isEdit = false
 | 
	
		
			
				|  |  | +        this.$message.success('更新成功');
 | 
	
		
			
				|  |  | +        this.handled = !!Outline;
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 取消
 | 
	
		
			
				|  |  | +    cancel() {
 | 
	
		
			
				|  |  | +      this.isEdit = false
 | 
	
		
			
				|  |  | +      this.$refs.drawFloor.init()
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 编辑平面图
 | 
	
		
			
				|  |  | +    editGraphy() {
 | 
	
		
			
				|  |  | +      this.isEdit = true
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 替换模型文件成功
 | 
	
		
			
				|  |  | +    refresh(modelId,pa) {
 | 
	
		
			
				|  |  | +      this.modelId = modelId
 | 
	
		
			
				|  |  | +      this.hasGraph = true;
 | 
	
		
			
				|  |  | +      const temp = this.modelId.split('.');
 | 
	
		
			
				|  |  | +      if (temp[1]) {
 | 
	
		
			
				|  |  | +        if (temp[1].toLowerCase() != 'png' && temp[1].toLowerCase() != 'jpg') {
 | 
	
		
			
				|  |  | +          // do nothing
 | 
	
		
			
				|  |  | +        } else {
 | 
	
		
			
				|  |  | +          // do nothing
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      } else {
 | 
	
		
			
				|  |  | +        this.key = '';
 | 
	
		
			
				|  |  | +        if (pa && pa.id) {
 | 
	
		
			
				|  |  | +          this.getFileName(pa.id)
 | 
	
		
			
				|  |  | +          this.currentModelId = pa.id;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        this.initFromModelId(this.modelId)
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 获取文件夹名称
 | 
	
		
			
				|  |  | +    getFileName(modelId) {
 | 
	
		
			
				|  |  | +      if (!modelId) return
 | 
	
		
			
				|  |  | +      let pa = {
 | 
	
		
			
				|  |  | +        Id: modelId,
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      FileController.getFileNameById(pa).then((res) => {
 | 
	
		
			
				|  |  | +        this.file = res
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 获取楼层
 | 
	
		
			
				|  |  | +    // 标识 无值:初始化进入 有值'next': 下一步进入
 | 
	
		
			
				|  |  | +    getFloorData(flag) {
 | 
	
		
			
				|  |  | +      let floorParam = {
 | 
	
		
			
				|  |  | +        pageSize: 1000,
 | 
	
		
			
				|  |  | +        filters: `buildingId='${this.BuildID}'`,
 | 
	
		
			
				|  |  | +        orders: 'floorSequenceID desc'
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      ScanController.floorQueryAndSign(floorParam).then((res) => {
 | 
	
		
			
				|  |  | +        this.floorList = res.content.filter(t => t.infos && t.infos.floorMap || t.id == this.FloorID);
 | 
	
		
			
				|  |  | +        // todo
 | 
	
		
			
				|  |  | +        if (flag && flag == 'next') {
 | 
	
		
			
				|  |  | +          this.floorRadio = this.floorList[0];
 | 
	
		
			
				|  |  | +          if (this.floorRadio.id != this.FloorID) {
 | 
	
		
			
				|  |  | +            this.loadOtherImg(this.floorRadio)
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        this.alreadyRelatedModel = res.content.map((t) => {
 | 
	
		
			
				|  |  | +          if (t.id != this.FloorID) return t.modelId
 | 
	
		
			
				|  |  | +          this.sign = t.Sign > 0
 | 
	
		
			
				|  |  | +          this.currentModelId = t.modelId;
 | 
	
		
			
				|  |  | +          t.modelId && this.getFileName(t.modelId)
 | 
	
		
			
				|  |  | +        }).filter((t) => t)
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    changeSign(flag, arr) {
 | 
	
		
			
				|  |  | +      this.otherSign = flag;
 | 
	
		
			
				|  |  | +      this.repeatFloor = arr.map(t => `${t.building.localName || t.building.name}-${t.localName || t.name}`)
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 统计项目下是否有模型文件
 | 
	
		
			
				|  |  | +    getCountModel() {
 | 
	
		
			
				|  |  | +      FileController.countModel({ Filters: "Status in [4]" }).then(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;
 | 
	
		
			
				|  |  | +                // watch中不会走到initGraph,所以手动触发
 | 
	
		
			
				|  |  | +                vm.$nextTick(() => {
 | 
	
		
			
				|  |  | +                  vm.initFromModelId(uploadKey + '.' + type)
 | 
	
		
			
				|  |  | +                })
 | 
	
		
			
				|  |  | +                // 设定保存按钮不可操作
 | 
	
		
			
				|  |  | +                this.timeOut = true;
 | 
	
		
			
				|  |  | +              }
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      reader.readAsArrayBuffer(file)
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 上传前判断
 | 
	
		
			
				|  |  | +    beforeUpload(file) {
 | 
	
		
			
				|  |  | +      // 拿到当前上传图片的name,判断其后缀名是否符合
 | 
	
		
			
				|  |  | +      let type = this.isImage(file.name);
 | 
	
		
			
				|  |  | +      if (!type) {
 | 
	
		
			
				|  |  | +        this.$message.error('仅支持png、jpg格式的图片');
 | 
	
		
			
				|  |  | +        return false
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      return true
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 封装一个判断图片文件后缀名的方法
 | 
	
		
			
				|  |  | +    isImage(fileName) {
 | 
	
		
			
				|  |  | +      if (typeof fileName !== 'string') return;
 | 
	
		
			
				|  |  | +      let name = fileName.toLowerCase();
 | 
	
		
			
				|  |  | +      return name.endsWith('.png') || name.endsWith('.jpg');
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 更新楼层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 }
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +      // 计算放缩比例
 | 
	
		
			
				|  |  | +      const proDis = SMathUtil.pointDistance(line[0].x, line[0].y, line[1].x, line[1].y)
 | 
	
		
			
				|  |  | +      const proText = scaleItem.text.substring(0, scaleItem.text.length - 3);
 | 
	
		
			
				|  |  | +      const proScale = proDis / proText;
 | 
	
		
			
				|  |  | +      let Param = {
 | 
	
		
			
				|  |  | +        content: [{
 | 
	
		
			
				|  |  | +          id: this.FloorID,
 | 
	
		
			
				|  |  | +          infos: {
 | 
	
		
			
				|  |  | +            floorMap: this.key,
 | 
	
		
			
				|  |  | +            floorMapRatio: proScale,
 | 
	
		
			
				|  |  | +            floorMapShift: JSON.stringify({ x: this.baseImgItem.x, y: this.baseImgItem.y })
 | 
	
		
			
				|  |  | +          },
 | 
	
		
			
				|  |  | +          properties: {
 | 
	
		
			
				|  |  | +            line: line,
 | 
	
		
			
				|  |  | +            text: scaleItem.text
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }],
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      ScanController.manageUpdateFloor(Param).then((res) => {
 | 
	
		
			
				|  |  | +        this.$message.success('更新成功')
 | 
	
		
			
				|  |  | +        this.step = -1;
 | 
	
		
			
				|  |  | +        this.baseImgItem.globalAlpha = 1
 | 
	
		
			
				|  |  | +        this.baseImgItem.moveable = false;
 | 
	
		
			
				|  |  | +        scaleItem.show()
 | 
	
		
			
				|  |  | +        this.removeLast()
 | 
	
		
			
				|  |  | +        this.$refs.drawFloor.fit()
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 根据modelid初始化
 | 
	
		
			
				|  |  | +    initFromModelId(id) {
 | 
	
		
			
				|  |  | +      const temp = id.split('.')[1];
 | 
	
		
			
				|  |  | +      if (temp) {
 | 
	
		
			
				|  |  | +        if (temp.toLowerCase() == 'png' || temp.toLowerCase() == 'jpg') {
 | 
	
		
			
				|  |  | +          this.$refs.drawFloor.initGraphy(id, 3)
 | 
	
		
			
				|  |  | +        } else {
 | 
	
		
			
				|  |  | +          this.$refs.drawFloor.initGraphy(id, 2)
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      } else {
 | 
	
		
			
				|  |  | +        this.$refs.drawFloor.initGraphy(id, 1)
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 上一步
 | 
	
		
			
				|  |  | +    lastStep() {
 | 
	
		
			
				|  |  | +      this.step = 0;
 | 
	
		
			
				|  |  | +      this.$refs.drawFloor.scaleItem.show()
 | 
	
		
			
				|  |  | +      this.baseImgItem.globalAlpha = 1
 | 
	
		
			
				|  |  | +      this.baseImgItem.moveable = false;
 | 
	
		
			
				|  |  | +      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('next')
 | 
	
		
			
				|  |  | +        // 延时3秒可操作性保存按钮
 | 
	
		
			
				|  |  | +        setTimeout(() => {
 | 
	
		
			
				|  |  | +          this.timeOut = false
 | 
	
		
			
				|  |  | +        }, 3000)
 | 
	
		
			
				|  |  | +      } 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();
 | 
	
		
			
				|  |  | +      this.loadOtherImg(v)
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 加载其他楼层图片
 | 
	
		
			
				|  |  | +    loadOtherImg(v) {
 | 
	
		
			
				|  |  | +      if (v.infos && v.infos.floorMap) {
 | 
	
		
			
				|  |  | +        const temp = this.modelId.split('.');
 | 
	
		
			
				|  |  | +        if (temp[1] && (temp[1].toLowerCase() == 'png' || temp[1].toLowerCase() == 'jpg')) {
 | 
	
		
			
				|  |  | +          const url = this.imgService + v.infos.floorMap
 | 
	
		
			
				|  |  | +          this.curImgItem = new SImageItem(null, url);
 | 
	
		
			
				|  |  | +          this.curImgItem.enabled = false;
 | 
	
		
			
				|  |  | +          this.curImgItem.showType = SImageShowType.AutoFit;
 | 
	
		
			
				|  |  | +          if (v.properties) {
 | 
	
		
			
				|  |  | +            try {
 | 
	
		
			
				|  |  | +              const point = JSON.parse(v.infos.floorMapShift)
 | 
	
		
			
				|  |  | +              // 计算两个比例尺差距
 | 
	
		
			
				|  |  | +              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(point.x, point.y);
 | 
	
		
			
				|  |  | +            } 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;
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 是否处理过平面图重复
 | 
	
		
			
				|  |  | +    repeatHandled(flag) {
 | 
	
		
			
				|  |  | +      this.handled = flag;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  watch: {
 | 
	
		
			
				|  |  | +    // modelId(n, o) {
 | 
	
		
			
				|  |  | +    //   if (o && 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;
 | 
	
		
			
				|  |  | +  .repeatTips {
 | 
	
		
			
				|  |  | +    display: inline-block;
 | 
	
		
			
				|  |  | +    max-width: 800px;
 | 
	
		
			
				|  |  | +    font-size: 12px;
 | 
	
		
			
				|  |  | +    overflow: hidden;
 | 
	
		
			
				|  |  | +    line-height: 1;
 | 
	
		
			
				|  |  | +    margin-left: 10px;
 | 
	
		
			
				|  |  | +    overflow: hidden;
 | 
	
		
			
				|  |  | +    white-space: nowrap;
 | 
	
		
			
				|  |  | +    text-overflow: ellipsis;
 | 
	
		
			
				|  |  | +    color: red;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +  .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>
 |