repetitionGraphy.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409
  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">
  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">下一步</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. <li style="border-bottom:1px solid #ccc;text-align: center;padding: 0">选择对齐楼层</li>
  34. <li v-for="t in floorList" :key="t.FloorID">
  35. <el-radio v-model="floorRadio" :label="t" @change="changeFloor" :disabled="t.FloorID == FloorID">{{t.FloorLocalID || t.FloorLocalName}}</el-radio>
  36. </li>
  37. </ul>
  38. </div>
  39. <div style="width: 100%;height: 100%" v-else>
  40. <div class="center" style="padding-top: 300px">
  41. <i class="icon-wushuju iconfont"></i>暂无平面图
  42. </div>
  43. </div>
  44. </div>
  45. <!-- 查看图片弹窗 -->
  46. <checkGraphy ref='checkGraphy' @refresh='refresh' :alreadyRelatedModel='alreadyRelatedModel'></checkGraphy>
  47. <!-- 设定比例尺弹窗 -->
  48. <setScaleDialog ref="setScaleDialog"></setScaleDialog>
  49. </div>
  50. </template>
  51. <script>
  52. import drawFloor from './drawGraphy/drawFloor'
  53. import checkGraphy from './drawGraphy/checkGraphy' //查看图片
  54. import setScaleDialog from '@/components/ready/buildfloor/setScaleDialog'
  55. import { floorUpdateOutline, floorQueryAndSign, manageUpdateFloor } from '@/api/scan/request'
  56. import { getFileNameById, countModel } from '@/api/model/file'
  57. import { EditLineItem, SItemStatus, SImageShowType, IconTextItem} from "@saga-web/cad-engine"
  58. import { SColor } from "@saga-web/draw"
  59. import { SImageItem } from '@saga-web/graph/lib'
  60. export default {
  61. components: {
  62. drawFloor,
  63. checkGraphy,
  64. setScaleDialog
  65. },
  66. data() {
  67. return {
  68. modelId: '', //
  69. isEdit: false, // 是否编辑模式
  70. FloorID: '',
  71. file: {},
  72. alreadyRelatedModel: [],
  73. sign: false,
  74. otherSign: false,
  75. hasGraph: false, // 当前楼层是否有平面图
  76. hasModel: false, // 项目中时候有模型文件
  77. step: -1, // 当前处于第几步 同时为比例尺item判断是否创建的可编辑的依据
  78. key: '', // 当楼层图为图片时图的key
  79. stepDes: [
  80. '请在图上点击两点绘制线段并标记实际长度',
  81. '请移动图片与其他楼层对齐'
  82. ], // 描述文字
  83. floorList: [], // 当前建筑下所有楼层
  84. floorRadio: '', //
  85. imgService: `/image-service/common/image_get?systemId=dataPlatform&key=`,
  86. curImgItem: null, // 对齐的楼层图片
  87. scaleItem: null, // 比例尺item
  88. baseImgItem: null, // 当前楼层图的图片
  89. }
  90. },
  91. created() {
  92. this.modelId = this.$route.query.modelId
  93. this.FloorID = this.$route.query.FloorID
  94. this.BuildID = this.$route.query.BuildID
  95. this.BuildName = this.$route.query.BuildName
  96. if (this.modelId != '') {
  97. this.hasGraph = true;
  98. const temp = this.modelId.split('.');
  99. if (temp[1] == 'png' || temp[1] == 'jpg') {
  100. // return
  101. } else {
  102. this.init()
  103. }
  104. }
  105. this.getCountModel()
  106. },
  107. mounted() {},
  108. methods: {
  109. init() {
  110. this.getFileName(this.modelId)
  111. this.getFloorData()
  112. },
  113. // 返回路由
  114. backRouter() {
  115. this.$router.push({ name: 'buildFloor' })
  116. },
  117. // 替换模型文件
  118. changeGraphy() {
  119. this.$refs.checkGraphy.showDialog({ FloorID: this.FloorID, BuildID: this.BuildID })
  120. },
  121. // 确认保存
  122. confirm() {
  123. let sceneMark = this.$refs.drawFloor.drawMainScene.sceneMark,
  124. Outline = null
  125. if (sceneMark) {
  126. if (sceneMark.outLine.length < 3) {
  127. this.$message.warning('请添加轮廓线')
  128. return
  129. }
  130. if (!sceneMark.closeFlag) {
  131. this.$message.warning('请按回车闭合轮廓线')
  132. this.$refs.drawFloor.focus()
  133. return
  134. }
  135. Outline = this.$refs.drawFloor.drawMainScene.sceneMark.outLine
  136. Outline = Outline.map((t) => {
  137. return {
  138. x: t.x.toFixed(2),
  139. y: -t.y.toFixed(2),
  140. }
  141. })
  142. }
  143. let pa = {
  144. Content: [{ FloorID: this.FloorID, Outline: Outline }],
  145. Projection: ['Outline'],
  146. }
  147. floorUpdateOutline(pa, (res) => {
  148. this.isEdit = false
  149. this.$message.success('更新成功')
  150. })
  151. },
  152. // 取消
  153. cancel() {
  154. this.isEdit = false
  155. this.$refs.drawFloor.init()
  156. },
  157. // 编辑平面图
  158. editGraphy() {
  159. this.isEdit = true
  160. },
  161. // 替换模型文件成功
  162. refresh(modelId) {
  163. this.modelId = modelId
  164. this.hasGraph = true;
  165. const temp = this.modelId.split('.');
  166. if (temp[1] && temp[1] != 'png' && temp[1] != 'jpg') {
  167. this.key = '';
  168. this.getFileName(this.modelId)
  169. }
  170. },
  171. // 获取文件夹名称
  172. getFileName(modelId) {
  173. if (!modelId) return
  174. let pa = {
  175. Id: modelId,
  176. }
  177. getFileNameById(pa, (res) => {
  178. this.file = res
  179. })
  180. },
  181. // 获取楼层
  182. getFloorData() {
  183. let floorParam = {
  184. PageSize: 1000,
  185. Filters: `BuildID='${this.BuildID}'`,
  186. Orders: 'FloorSequenceID desc'
  187. }
  188. floorQueryAndSign(floorParam, (res) => {
  189. this.floorList = res.Content;
  190. // todo
  191. this.floorRadio = res.Content[0];
  192. this.alreadyRelatedModel = res.Content.map((t) => {
  193. if (t.FloorID != this.FloorID) return t.ModelId
  194. this.sign = t.Sign > 0
  195. this.FloorName = t.FloorLocalName || t.FloorName
  196. this.$refs.drawFloor.buildFloorName = `${this.BuildName}-${this.FloorName}`
  197. }).filter((t) => t)
  198. })
  199. },
  200. changeSign(flag) {
  201. this.otherSign = flag
  202. },
  203. // 统计项目下是否有模型文件
  204. getCountModel(){
  205. countModel({}, res => {
  206. this.hasModel = res.Count > 0
  207. })
  208. },
  209. //上传图片
  210. uploadAndSubmit(item) {
  211. let file = item.file
  212. let reader = new FileReader()
  213. let vm = this
  214. let fileType = file.name.split('.')
  215. let type = fileType[fileType.length - 1]
  216. let uploadKey = file.uid
  217. reader.onloadend = function () {
  218. // 这个事件在读取结束后,无论成功或者失败都会触发
  219. if (reader.error) {
  220. } else {
  221. // document.getElementById("bytesRead").textContent = file.size;
  222. // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
  223. var xhr = new XMLHttpRequest()
  224. xhr.open(
  225. /* method */ 'POST',
  226. /* target url */
  227. '/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=' + uploadKey + '.' + type
  228. /*, async, default to true */
  229. )
  230. //xhr.overrideMimeType("application/octet-stream");
  231. xhr.send(reader.result)
  232. xhr.onreadystatechange = function () {
  233. if (xhr.readyState == 4) {
  234. if (xhr.status == 200) {
  235. vm.key = uploadKey + '.' + type
  236. // 将图片展示
  237. vm.refresh(uploadKey + '.' + type)
  238. // 设置步骤为第一步
  239. vm.step = 0;
  240. }
  241. }
  242. }
  243. }
  244. }
  245. reader.readAsArrayBuffer(file)
  246. },
  247. // 更新楼层key 为图片,同时更新比例尺
  248. updateFloorKey(){
  249. const scaleItem = this.$refs.drawFloor.scaleItem;
  250. // 比例尺坐标处理,当底图被对齐操作后,需要跟随底图改变坐标
  251. const line = scaleItem.line.map(t => {
  252. return { x: t.x + this.baseImgItem.x, y: t.y + this.baseImgItem.y }
  253. })
  254. let Param = {
  255. Content: [{
  256. FloorId: this.FloorID,
  257. StructureInfo: { FloorMap: this.key },
  258. Properties: {
  259. X: this.baseImgItem.x,
  260. Y: this.baseImgItem.y,
  261. Line: line,
  262. Text: scaleItem.text
  263. }
  264. }],
  265. Projection: ['StructureInfo', 'Properties'],
  266. }
  267. manageUpdateFloor(Param, (res) => {
  268. this.$message.success('更新成功')
  269. this.step = -1;
  270. this.baseImgItem.globalAlpha = 1
  271. this.removeLast()
  272. this.$refs.drawFloor.fit()
  273. })
  274. },
  275. // 根据modelid初始化
  276. initFromModelId(id){
  277. if (id.split('.')[1] == 'png' || id.split('.')[1] == 'jpg') {
  278. this.$refs.drawFloor.initGraphy(id, 3)
  279. } else {
  280. this.$refs.drawFloor.initGraphy(id, 1)
  281. }
  282. },
  283. // 上一步
  284. lastStep() {
  285. this.step = 0;
  286. this.$refs.drawFloor.scaleItem.show()
  287. this.baseImgItem.globalAlpha = 1
  288. this.removeLast()
  289. },
  290. // 下一步||保存
  291. nextStep() {
  292. this.baseImgItem = this.$refs.drawFloor.drawMainScene.imgList[0]
  293. this.baseImgItem.globalAlpha = 0.2
  294. this.baseImgItem.moveable = true;
  295. // 下一步
  296. if (this.step == 0) {
  297. this.step = 1;
  298. this.$refs.drawFloor.scaleItem.hide();
  299. // 获取楼层列表
  300. this.getFloorData()
  301. } else if (this.step == 1) {
  302. // 保存
  303. this.updateFloorKey();
  304. }
  305. },
  306. // 加载图成功 仅在底图为图片时返回成功
  307. getGraphSuc() {
  308. const scaleItem = this.$refs.drawFloor.scaleItem
  309. if (this.step == 0) {
  310. scaleItem.status = SItemStatus.Create;
  311. this.$refs.drawFloor.drawMainScene.grabItem = scaleItem;
  312. scaleItem.connect('changText', this, this.changeText)
  313. scaleItem.moveable = true;
  314. } else if (this.step == -1) {
  315. scaleItem.status = SItemStatus.Normal;
  316. }
  317. },
  318. // 修改比例尺文字
  319. changeText(t, e) {
  320. this.$refs.setScaleDialog.showDialog(t)
  321. },
  322. // 第二部楼层修改
  323. changeFloor(v) {
  324. this.removeLast();
  325. if (v.StructureInfo && v.StructureInfo.FloorMap) {
  326. const url = this.imgService + v.StructureInfo.FloorMap
  327. this.curImgItem = new SImageItem(null, url);
  328. this.curImgItem.globalAlpha = 0.2;
  329. this.curImgItem.showType = SImageShowType.AutoFit;
  330. if (v.Properties) {
  331. try {
  332. // 计算比例尺- todo
  333. this.curImgItem.showType == SImageShowType.Full;
  334. this.curImgItem.moveTo(v.Properties.x, v.Properties.y);
  335. this.curImgItem.width = v.Properties.width;
  336. this.curImgItem.height = v.Properties.height;
  337. } catch (err) {
  338. console.log(err);
  339. }
  340. }
  341. this.$refs.drawFloor.drawMainScene.addItem(this.curImgItem);
  342. this.$refs.drawFloor.fit()
  343. }
  344. },
  345. // 清除上一张底图
  346. removeLast() {
  347. if (this.curImgItem) {
  348. this.$refs.drawFloor.drawMainScene.removeItem(this.curImgItem);
  349. this.curImgItem = null;
  350. }
  351. }
  352. },
  353. watch: {
  354. modelId(n, o) {
  355. if (n != o) {
  356. if (n) {
  357. this.$nextTick(()=>{
  358. this.initFromModelId(n)
  359. })
  360. }
  361. }
  362. },
  363. },
  364. }
  365. </script>
  366. <style lang="less">
  367. #repetitionGraphy {
  368. width: 100%;
  369. height: 100%;
  370. background: #fff;
  371. position: relative;
  372. padding: 10px;
  373. box-sizing: border-box;
  374. .drawImg {
  375. width: 100%;
  376. margin-top: 10px;
  377. height: calc(100% - 40px);
  378. }
  379. .upload-demo {
  380. display: inline-block;
  381. }
  382. .stepContainer {
  383. width: 100%;
  384. position: absolute;
  385. top: 0;
  386. left: 50%;
  387. margin-left: -50%;
  388. z-index: 9;
  389. background-color: #fff;
  390. }
  391. .floorList {
  392. position: absolute;
  393. width: 100px;
  394. max-height: 250px;
  395. overflow-x: hidden;
  396. overflow-y: auto;
  397. left: 40px;
  398. top: 200px;
  399. z-index: 10;
  400. background: #fff;
  401. border: 1px solid #ccc;
  402. li {
  403. box-sizing: border-box;
  404. padding: 0 10px;
  405. width: 100%;
  406. }
  407. }
  408. }
  409. </style>