repetitionGraphy.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488
  1. <template>
  2. <!-- 查看平面图页面 -->
  3. <div id='repetitionGraphy'>
  4. <div class='buttons'>
  5. <el-button icon='el-icon-back' size='mini' @click='backRouter'></el-button>
  6. <template v-if="!hasModel">
  7. <el-upload class='upload-demo' action='string' :http-request='uploadAndSubmit' :show-file-list='false' v-if="step==-1" accept=".jpg,.png">
  8. <el-button size="mini">{{hasGraph?'替换平面图图片':'上传平面图图片'}}</el-button>
  9. </el-upload>
  10. <el-button style='float:right;' size='mini' type='primary' v-if="step==0" @click="nextStep" :disabled="nextStepBtnDisable">下一步</el-button>
  11. <el-button style='float:right;' size='mini' type='primary' v-if="step==1" @click="nextStep">保存</el-button>
  12. <el-button style='float:right;' size='mini' v-if="step==1" @click="lastStep">上一步</el-button>
  13. </template>
  14. <template v-else>
  15. <el-button v-if='!isEdit' size='mini' @click='changeGraphy'>{{hasGraph?'替换模型文件':'关联模型文件'}}</el-button>
  16. <el-button v-if='(sign||otherSign)&&!isEdit' size='mini' @click='editGraphy'>编辑平面图</el-button>
  17. <el-button v-if='isEdit' size='mini' @click='cancel'>取消</el-button>
  18. <el-button v-if='isEdit' size='mini' @click='confirm' type='primary'>确认</el-button>
  19. </template>
  20. <span style='float:right;' v-if='file.FolderName'>当前对应的模型文件:{{file.FolderName}} - {{file.FloorName}}</span>
  21. </div>
  22. <!-- 展示图片 -->
  23. <div class='drawImg'>
  24. <div style="width: 100%;height: 100%;position: relative;" v-if="hasGraph">
  25. <drawFloor ref='drawFloor' :isEdit='isEdit' :showTools='true' :id='1' @changeSign='changeSign' @getGraphSuc="getGraphSuc"></drawFloor>
  26. <div class="stepContainer" v-if="step>-1">
  27. <el-steps :active="step" align-center finish-status="success" process-status="process">
  28. <el-step title="设定比例尺" :description="stepDes[0]"></el-step>
  29. <el-step title="楼层对齐" :description="stepDes[1]"></el-step>
  30. </el-steps>
  31. </div>
  32. <ul class="floorList" v-if="step==1">
  33. <template v-if="floorList.length > 1">
  34. <li style="border-bottom:1px solid #ccc;text-align: center;padding: 0">选择对齐楼层</li>
  35. <li v-for="t in floorList" :key="t.id">
  36. <el-radio v-model="floorRadio" :label="t" @change="changeFloor" :disabled="t.id == FloorID">{{t.localId || t.localName}}</el-radio>
  37. </li>
  38. </template>
  39. <template v-else>
  40. <li style="text-align: center;padding: 0">
  41. 暂无对齐楼层
  42. </li>
  43. </template>
  44. </ul>
  45. </div>
  46. <div style="width: 100%;height: 100%" v-else>
  47. <div class="center" style="padding-top: 300px">
  48. <i class="icon-wushuju iconfont"></i>暂无平面图
  49. </div>
  50. </div>
  51. </div>
  52. <!-- 查看图片弹窗 -->
  53. <checkGraphy ref='checkGraphy' @refresh='refresh' :alreadyRelatedModel='alreadyRelatedModel'></checkGraphy>
  54. <!-- 设定比例尺弹窗 -->
  55. <setScaleDialog ref="setScaleDialog" @textChange="scaleTextChange"></setScaleDialog>
  56. <!-- 退出时弹窗提示 -->
  57. <backTips ref='backTips' @back="runBack"></backTips>
  58. </div>
  59. </template>
  60. <script>
  61. import drawFloor from './drawGraphy/drawFloor'
  62. import checkGraphy from './drawGraphy/checkGraphy' //查看图片
  63. import setScaleDialog from '@/components/ready/buildfloor/setScaleDialog'
  64. import backTips from '@/components/ready/buildfloor/backTips'
  65. import { floorUpdateOutline, floorQueryAndSign, manageUpdateFloor } from '@/api/scan/request'
  66. import { getFileNameById, countModel } from '@/api/model/file'
  67. import { EditLineItem, SItemStatus, SImageShowType, IconTextItem } from "@saga-web/cad-engine"
  68. import { SColor } from "@saga-web/draw"
  69. import { SImageItem } from '@saga-web/graph/lib'
  70. import { SMathUtil } from "@saga-web/cad-engine/lib/utils/SMathUtil"
  71. export default {
  72. components: {
  73. drawFloor,
  74. checkGraphy,
  75. setScaleDialog,
  76. backTips
  77. },
  78. data() {
  79. return {
  80. modelId: '', //
  81. isEdit: false, // 是否编辑模式
  82. FloorID: '',
  83. file: {},
  84. alreadyRelatedModel: [],
  85. sign: false,
  86. otherSign: false,
  87. hasGraph: false, // 当前楼层是否有平面图
  88. hasModel: false, // 项目中时候有模型文件
  89. step: -1, // 当前处于第几步 同时为比例尺item判断是否创建的可编辑的依据;能否返回上页的依据
  90. key: '', // 当楼层图为图片时图的key
  91. stepDes: [
  92. '请在图上点击两点绘制线段并标记实际长度',
  93. '请移动图片与其他楼层对齐'
  94. ], // 描述文字
  95. floorList: [], // 当前建筑下所有楼层
  96. floorRadio: '', // 当前选中的楼层对象
  97. imgService: `/image-service/common/image_get?systemId=dataPlatform&key=`,
  98. curImgItem: null, // 对齐的楼层图片
  99. scaleItem: null, // 比例尺item
  100. baseImgItem: null, // 当前楼层图的图片
  101. nextStepBtnDisable: true, // 比例尺item创建标识
  102. }
  103. },
  104. created() {
  105. this.modelId = this.$route.query.modelId
  106. this.FloorID = this.$route.query.FloorID
  107. this.BuildID = this.$route.query.BuildID
  108. this.BuildName = this.$route.query.BuildName
  109. if (this.modelId != '') {
  110. this.hasGraph = true;
  111. const temp = this.modelId.split('.');
  112. if (temp[1] && (temp[1].toLowerCase() == 'png' || temp[1].toLowerCase() == 'jpg')) {
  113. // return
  114. } else {
  115. this.init()
  116. }
  117. }
  118. this.getCountModel()
  119. },
  120. mounted() {},
  121. methods: {
  122. init() {
  123. this.getFloorData()
  124. },
  125. // 返回路由
  126. backRouter() {
  127. // 底图为图片 上传完图片后未保存
  128. if (this.step > -1) {
  129. this.$refs.backTips.showDialog();
  130. } else {
  131. this.runBack()
  132. }
  133. },
  134. runBack() {
  135. this.$router.push({ name: 'buildFloor' })
  136. },
  137. // 替换模型文件
  138. changeGraphy() {
  139. this.$refs.checkGraphy.showDialog({ FloorID: this.FloorID, BuildID: this.BuildID })
  140. },
  141. // 确认保存
  142. confirm() {
  143. let sceneMark = this.$refs.drawFloor.drawMainScene.sceneMark,
  144. Outline = null
  145. if (sceneMark) {
  146. if (sceneMark.outLine.length < 3) {
  147. this.$message.warning('请添加轮廓线')
  148. return
  149. }
  150. if (!sceneMark.closeFlag) {
  151. this.$message.warning('请按回车闭合轮廓线')
  152. this.$refs.drawFloor.focus()
  153. return
  154. }
  155. Outline = this.$refs.drawFloor.drawMainScene.sceneMark.outLine
  156. Outline = Outline.map((t) => {
  157. return {
  158. x: t.x.toFixed(2),
  159. y: -t.y.toFixed(2),
  160. }
  161. })
  162. }
  163. let pa = {
  164. content: [{ id: this.FloorID, outline: Outline }],
  165. projection: ['Outline'],
  166. }
  167. floorUpdateOutline(pa, (res) => {
  168. this.isEdit = false
  169. this.$message.success('更新成功')
  170. })
  171. },
  172. // 取消
  173. cancel() {
  174. this.isEdit = false
  175. this.$refs.drawFloor.init()
  176. },
  177. // 编辑平面图
  178. editGraphy() {
  179. this.isEdit = true
  180. },
  181. // 替换模型文件成功
  182. refresh(modelId) {
  183. this.modelId = modelId
  184. this.hasGraph = true;
  185. const temp = this.modelId.split('.');
  186. if (temp[1] && temp[1].toLowerCase() != 'png' && temp[1].toLowerCase() != 'jpg') {
  187. this.key = '';
  188. }
  189. },
  190. // 获取文件夹名称
  191. getFileName(modelId) {
  192. if (!modelId) return
  193. let pa = {
  194. Id: modelId,
  195. }
  196. getFileNameById(pa, (res) => {
  197. this.file = res
  198. })
  199. },
  200. // 获取楼层
  201. getFloorData() {
  202. let floorParam = {
  203. pageSize: 1000,
  204. filters: `buildingId='${this.BuildID}'`,
  205. orders: 'floorSequenceID desc'
  206. }
  207. floorQueryAndSign(floorParam, (res) => {
  208. this.floorList = res.content.filter(t => t.infos && t.infos.floorMap || t.id == this.FloorID);
  209. // todo
  210. this.floorRadio = this.floorList[0];
  211. this.loadOtherImg(this.floorRadio)
  212. this.alreadyRelatedModel = res.content.map((t) => {
  213. if (t.floorID != this.FloorID) return t.modelId
  214. this.sign = t.Sign > 0
  215. this.FloorName = t.localName || t.name
  216. this.$refs.drawFloor.buildFloorName = `${this.BuildName}-${this.FloorName}`
  217. t.modelId && this.getFileName(t.modelId)
  218. }).filter((t) => t)
  219. })
  220. },
  221. changeSign(flag) {
  222. this.otherSign = flag
  223. },
  224. // 统计项目下是否有模型文件
  225. getCountModel() {
  226. countModel({Filters:"Status in [4]"}, res => {
  227. this.hasModel = res.Count > 0
  228. })
  229. },
  230. //上传图片
  231. uploadAndSubmit(item) {
  232. let file = item.file
  233. let reader = new FileReader()
  234. let vm = this
  235. let fileType = file.name.split('.')
  236. let type = fileType[fileType.length - 1]
  237. let uploadKey = file.uid
  238. reader.onloadend = function () {
  239. // 这个事件在读取结束后,无论成功或者失败都会触发
  240. if (reader.error) {
  241. } else {
  242. // document.getElementById("bytesRead").textContent = file.size;
  243. // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
  244. var xhr = new XMLHttpRequest()
  245. xhr.open(
  246. /* method */ 'POST',
  247. /* target url */
  248. '/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=' + uploadKey + '.' + type
  249. /*, async, default to true */
  250. )
  251. //xhr.overrideMimeType("application/octet-stream");
  252. xhr.send(reader.result)
  253. xhr.onreadystatechange = function () {
  254. if (xhr.readyState == 4) {
  255. if (xhr.status == 200) {
  256. vm.key = uploadKey + '.' + type
  257. // 将图片展示
  258. vm.refresh(uploadKey + '.' + type)
  259. // 设置步骤为第一步
  260. vm.step = 0;
  261. // watch中不会走到initGraph,所以手动触发
  262. vm.$nextTick(()=>{
  263. vm.initFromModelId(uploadKey + '.' + type)
  264. })
  265. }
  266. }
  267. }
  268. }
  269. }
  270. reader.readAsArrayBuffer(file)
  271. },
  272. // 更新楼层key 为图片,同时更新比例尺
  273. updateFloorKey() {
  274. const scaleItem = this.$refs.drawFloor.scaleItem;
  275. // 比例尺坐标处理,当底图被对齐操作后,需要跟随底图改变坐标
  276. const line = scaleItem.line.map(t => {
  277. return { x: t.x + this.baseImgItem.x, y: t.y + this.baseImgItem.y }
  278. })
  279. let Param = {
  280. content: [{
  281. id: this.FloorID,
  282. infos: { floorMap: this.key },
  283. properties: {
  284. x: this.baseImgItem.x,
  285. y: this.baseImgItem.y,
  286. line: line,
  287. text: scaleItem.text
  288. }
  289. }],
  290. // projection: ['infos', 'properties'],
  291. }
  292. manageUpdateFloor(Param, (res) => {
  293. this.$message.success('更新成功')
  294. this.step = -1;
  295. this.baseImgItem.globalAlpha = 1
  296. this.baseImgItem.moveable = false;
  297. scaleItem.show()
  298. this.removeLast()
  299. this.$refs.drawFloor.fit()
  300. })
  301. },
  302. // 根据modelid初始化
  303. initFromModelId(id) {
  304. const temp = id.split('.')[1];
  305. if (temp) {
  306. if (temp.toLowerCase() == 'png' || temp.toLowerCase() == 'jpg') {
  307. this.$refs.drawFloor.initGraphy(id, 3)
  308. } else {
  309. this.$refs.drawFloor.initGraphy(id, 2)
  310. }
  311. } else {
  312. this.$refs.drawFloor.initGraphy(id, 1)
  313. }
  314. },
  315. // 上一步
  316. lastStep() {
  317. this.step = 0;
  318. this.$refs.drawFloor.scaleItem.show()
  319. this.baseImgItem.globalAlpha = 1
  320. this.baseImgItem.moveable = false;
  321. this.removeLast()
  322. },
  323. // 下一步||保存
  324. nextStep() {
  325. this.baseImgItem = this.$refs.drawFloor.drawMainScene.imgList[0]
  326. this.baseImgItem.globalAlpha = 0.5
  327. this.baseImgItem.moveable = true;
  328. // 下一步
  329. if (this.step == 0) {
  330. this.step = 1;
  331. this.$refs.drawFloor.scaleItem.hide();
  332. // 获取楼层列表
  333. this.getFloorData()
  334. } else if (this.step == 1) {
  335. // 保存
  336. this.updateFloorKey();
  337. }
  338. },
  339. // 加载图成功 仅在底图为图片时返回成功
  340. getGraphSuc() {
  341. const scaleItem = this.$refs.drawFloor.scaleItem
  342. if (this.step == 0) {
  343. scaleItem.status = SItemStatus.Create;
  344. this.$refs.drawFloor.drawMainScene.grabItem = scaleItem;
  345. scaleItem.connect('changText', this, this.changeText)
  346. scaleItem.moveable = true;
  347. this.clearScaleData(scaleItem);
  348. } else if (this.step == -1) {
  349. scaleItem.status = SItemStatus.Normal;
  350. }
  351. },
  352. // 修改比例尺文字
  353. changeText(t, e) {
  354. this.$refs.setScaleDialog.showDialog(t)
  355. },
  356. // 文本修改
  357. scaleTextChange(v) {
  358. if (v > 0) {
  359. this.nextStepBtnDisable = false
  360. }
  361. },
  362. // 第二部楼层修改
  363. changeFloor(v) {
  364. // v->当前改为的楼层对象
  365. this.removeLast();
  366. this.loadOtherImg(v)
  367. },
  368. // 加载其他楼层图片
  369. loadOtherImg(v){
  370. if (v.infos && v.infos.floorMap) {
  371. const url = this.imgService + v.infos.floorMap
  372. this.curImgItem = new SImageItem(null, url);
  373. this.curImgItem.enabled = false;
  374. this.curImgItem.showType = SImageShowType.AutoFit;
  375. if (v.properties) {
  376. try {
  377. // 计算两个比例尺差距
  378. const scaleItem = this.$refs.drawFloor.scaleItem
  379. this.curImgItem.zOrder = scaleItem.zOrder - 1;
  380. const r = this.calScaleGap(v.properties, scaleItem);
  381. if (r != 1) {
  382. this.$message.warning('比例尺相差较大,可以返回上一步修改比例尺')
  383. }
  384. this.curImgItem.showType == SImageShowType.Full;
  385. this.curImgItem.moveTo(v.properties.x, v.properties.y);
  386. // this.curImgItem.width = v.Properties.width;
  387. // this.curImgItem.height = v.Properties.height;
  388. } catch (err) {
  389. console.log(err);
  390. }
  391. }
  392. this.$refs.drawFloor.drawMainScene.addItem(this.curImgItem);
  393. this.$refs.drawFloor.fit()
  394. }
  395. },
  396. // 清除上一张底图
  397. removeLast() {
  398. if (this.curImgItem) {
  399. this.$refs.drawFloor.drawMainScene.removeItem(this.curImgItem);
  400. this.curImgItem = null;
  401. this.$refs.drawFloor.view.update()
  402. }
  403. },
  404. // 清空比例尺数据
  405. clearScaleData(scaleItem) {
  406. scaleItem.line = [];
  407. scaleItem.pointChange();
  408. scaleItem.text = '0 mm';
  409. },
  410. // 计算两个比例尺差距
  411. calScaleGap(pro, item) {
  412. // pro -> 楼层的properties
  413. // item -> 当前的比例尺item
  414. let result = 1
  415. if (pro.line.length && pro.text) {
  416. try {
  417. const proDis = SMathUtil.pointDistance(pro.line[0].x, pro.line[0].y, pro.line[1].x, pro.line[1].y)
  418. const proText = pro.Text.substring(0, pro.text.length - 3);
  419. const proScale = proDis / proText;
  420. const itemDis = SMathUtil.pointDistance(item.line[0].x, item.line[0].y, item.line[1].x, item.line[1].y)
  421. const itemText = item.text.substring(0, item.text.length - 3);
  422. const itemScale = itemDis / itemText;
  423. result = (proScale / itemScale).toFixed()
  424. } catch (err) {
  425. console.log(err);
  426. }
  427. }
  428. return result;
  429. }
  430. },
  431. watch: {
  432. modelId(n, o) {
  433. if (o && n != o) {
  434. if (n) {
  435. // 替换的时候需要走
  436. this.$nextTick(()=>{
  437. this.initFromModelId(n)
  438. })
  439. }
  440. }
  441. },
  442. },
  443. }
  444. </script>
  445. <style lang="less">
  446. #repetitionGraphy {
  447. width: 100%;
  448. height: 100%;
  449. background: #fff;
  450. position: relative;
  451. padding: 10px;
  452. box-sizing: border-box;
  453. .drawImg {
  454. width: 100%;
  455. margin-top: 10px;
  456. height: calc(100% - 40px);
  457. }
  458. .upload-demo {
  459. display: inline-block;
  460. }
  461. .stepContainer {
  462. width: 100%;
  463. position: absolute;
  464. top: 0;
  465. left: 50%;
  466. margin-left: -50%;
  467. z-index: 9;
  468. background-color: #fff;
  469. }
  470. .floorList {
  471. position: absolute;
  472. width: 100px;
  473. max-height: 250px;
  474. overflow-x: hidden;
  475. overflow-y: auto;
  476. left: 40px;
  477. top: 200px;
  478. z-index: 10;
  479. background: #fff;
  480. border: 1px solid #ccc;
  481. li {
  482. box-sizing: border-box;
  483. padding: 0 10px;
  484. width: 100%;
  485. }
  486. }
  487. }
  488. </style>