deleted.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
  1. <template>
  2. <!-- 待删除页面 -->
  3. <div class="box" ref="boxBody">
  4. <div class="content-box" v-for="(item,index) in pageData" :key="index">
  5. <div class="content-top">
  6. <div class="details">
  7. <h4>{{index | numTransformation(4)}}<el-badge value="待删除" class="item"></el-badge>
  8. </h4>
  9. <h4>{{`${item.buildingName || '**'}`}}-{{`${item.floorName || '**'}`}}-{{`${item.localName?item.localName:item.name}`}}</h4>
  10. <b>BIM ID:<span @dblclick="copyContent"
  11. id="copy">{{item.bimId | bimIdTransformation}}</span></b><span class="copy"
  12. @click="clickCopy">点击复制</span>
  13. <input id="copyContent" type="text" @dblclick="copyContent" style="border:none;opacity:0;position:absolute;top:0;left:0;">
  14. <!-- <p style="margin-top:30px;">Revit族:{{item.BIMFamilyName}}</p> -->
  15. <p>设计图纸中编码:{{item.cadId || '--'}}</p>
  16. <p><span>设备类型:{{item.codeName || '--'}}</span></p>
  17. <p>设备ID:{{item.id}}</p>
  18. <!-- <p><span v-if="item.Property && item.Property.FamilyName">资产族:{{item.Property.FamilyName.Name}}</span><span
  19. v-if="item.PropertyId">关联的资产ID:{{item.PropertyId}}</span></p> -->
  20. <p>现场任务ID:{{item.scanTaskBase && item.scanTaskBase[0]?item.scanTaskBase[0].TaskId:""}}</p>
  21. <p>
  22. <span>执行人:{{item.scanTaskBase && item.scanTaskBase[0]?item.scanTaskBase[0].WorkerName:''}}</span><span>确认人:{{item.scanTaskBase && item.scanTaskBase[0]?item.scanTaskBase[0].ConfirmingPersonName:''}}</span>
  23. </p>
  24. </div>
  25. <div class="plan">
  26. <p>平面图上的位置:<span>{{item.local | localTransformation}}</span></p>
  27. <div class="img-box">
  28. <canvas :id="'canvas'+index" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0" :data-modelid="item.modelId"
  29. :data-equipid='item.id' :data-x="item.local.X" :data-y="item.local.Y"></canvas>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="content-bottom">
  34. <div class="explain" v-if="item.scanTaskBase && item.scanTaskBase[0] && item.scanTaskBase[0].Note">
  35. <p>现场问题说明:</p>
  36. <el-scrollbar>
  37. <p class="explain-content">
  38. <el-scrollbar>
  39. {{item.scanTaskBase?item.scanTaskBase[0].Note:""}}
  40. </el-scrollbar>
  41. </p>
  42. </el-scrollbar>
  43. </div>
  44. <div class="photo" v-for="(it,ind) in item.scanTaskBase[0].TaskPicList" :key='ind' v-else-if="item.scanTaskBase && item.scanTaskBase[0]">
  45. <div class="img-box">
  46. <p>{{it.Name}}<span>拍摄时间:{{it.CreateTime | timeTransformation}}</span></p>
  47. <div class="img-content">
  48. <img :src="`/image-service/common/image_get?systemId=dataPlatform&key=${it.Key}`" alt="现场拍摄照片">
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. </template>
  56. <script>
  57. import { mapGetters } from "vuex";
  58. import { toBeDelEquipPage } from "@/api/scan/request.js";
  59. import { LocationPointScene, FloorView } from "@saga-web/cad-engine/lib";
  60. export default {
  61. components: {
  62. },
  63. data() {
  64. return {
  65. pageData: [],
  66. count: 0,
  67. equipComDelList: null,
  68. canvasWidth: 400,
  69. canvasHeight: 280,
  70. i: 0,
  71. scene: '',
  72. view: '',
  73. page: {
  74. pageSize: 20,
  75. pageNumber: 1,
  76. total: 0
  77. }
  78. }
  79. },
  80. mounted() {
  81. this.queryToBelDelEquip();
  82. this.boxBody = this.$refs.boxBody;
  83. this.boxBody.addEventListener('scroll', () => {
  84. let clientHeight = this.boxBody.clientHeight;
  85. let scrollTop = this.boxBody.scrollTop;
  86. let scrollHeight = this.boxBody.scrollHeight;
  87. if (clientHeight + scrollTop === scrollHeight) {
  88. console.log(this.page.pageNumber * this.page.pageSize)
  89. if (this.page.pageNumber * this.page.pageSize < this.page.total) {
  90. this.page.pageNumber++;
  91. if (this.pageData.length < 20) {
  92. this.page.pageNumber = 1
  93. }
  94. this.queryToBelDelEquip();
  95. }
  96. }
  97. })
  98. },
  99. created() {
  100. this.equipComDelList = decodeURIComponent(this.$route.query.equipComDelList);
  101. },
  102. computed: {
  103. ...mapGetters('layout', ['projectId'])
  104. },
  105. filters: {
  106. numTransformation(num, length) {// 序列号转换为4位
  107. num = Number(num + 1)
  108. return (Array(length).join('0') + num).slice(-length);
  109. },
  110. bimIdTransformation(bimId) {// bimID转换
  111. let ary = bimId.split(":");
  112. return ary[1];
  113. },
  114. localTransformation(local) {// 转换坐标
  115. let str = "";
  116. for (let key in local) {
  117. if (key !== "Z") {
  118. str += key + ':' + local[key] + ',';
  119. } else {
  120. str += key + ':' + local[key];
  121. }
  122. }
  123. return str;
  124. },
  125. timeTransformation(time) {
  126. time = time.substring(0, 16)
  127. return time;
  128. }
  129. },
  130. methods: {
  131. copyContent(element) {
  132. // 双击复制
  133. let content = element.target.innerText;
  134. let inputObj = document.getElementById('copyContent');
  135. inputObj.value = content;
  136. inputObj.select();
  137. document.execCommand("Copy");
  138. this.$message({
  139. message: '复制成功',
  140. type: 'success',
  141. duration: 1000
  142. });
  143. },
  144. clickCopy() {
  145. // 点击复制
  146. let target = document.getElementById('copy');
  147. let content = target.innerText;
  148. let inputObj = document.getElementById('copyContent');
  149. inputObj.value = content;
  150. inputObj.select();
  151. document.execCommand("Copy");
  152. this.$message({
  153. message: '复制成功',
  154. type: 'success',
  155. duration: 1000
  156. });
  157. },
  158. queryToBelDelEquip() {// 请求待删除数据
  159. let params = {
  160. orders: "createTime desc ,id asc",
  161. filters: `modelId in ${this.equipComDelList}`,
  162. pageNumber: this.page.pageNumber,
  163. pageSize: this.page.pageSize
  164. }
  165. toBeDelEquipPage(params, res => {
  166. this.page.total = res.pageSize < 20 ? res.pageSize : res.total;
  167. res.content.forEach(item => {
  168. if (item.bimLocation) {
  169. let local = {};
  170. let ary = item.bimLocation.split(',');
  171. let localAry = ['X', 'Y', 'Z'];
  172. ary.forEach((item, index) => {
  173. local[localAry[index]] = ary[index];
  174. })
  175. item.local = local;
  176. }
  177. if (item.scanTaskBase && item.scanTaskBase.length > 1) {
  178. item.scanTaskBase = item.scanTaskBase.shift();
  179. }
  180. });
  181. if (this.page.pageNumber == 1) {
  182. this.pageData = res.content;
  183. this.$nextTick(() => {
  184. this.getGraphy();
  185. })
  186. } else {
  187. this.pageData = this.pageData.concat(res.content);
  188. console.log(this.pageData.length, 19)
  189. this.$nextTick(() => {
  190. this.getGraphy();
  191. })
  192. }
  193. this.pageData.forEach(item => {
  194. if (item.bimLocation) {
  195. let local = {};
  196. let ary = item.bimLocation.split(',');
  197. let localAry = ['X', 'Y', 'Z'];
  198. ary.forEach((item, index) => {
  199. local[localAry[index]] = ary[index];
  200. })
  201. item.local = local;
  202. }
  203. if (item.scanTaskBase && item.scanTaskBase.length > 1) {
  204. item.scanTaskBase = item.scanTaskBase.shift();
  205. }
  206. });
  207. })
  208. },
  209. getGraphy() {// 绘制空间位置图片
  210. console.log(this.i);
  211. let can = this.$refs.canvas;
  212. let modelId = can[this.i].dataset.modelid
  213. let that = this;
  214. that.clearGraphy(this.i)
  215. that.scene = new LocationPointScene();
  216. this.canvasLoading = true;
  217. that.scene.getFloorData('/modelapi/base-graph/query', { ModelId: modelId }).then(res => {
  218. that.canvasLoading = false;
  219. if (res == 'error') {
  220. this.FloorMap = '';
  221. console.log('数据解析异常');
  222. return;
  223. }
  224. let EquipID = can[this.i].dataset.equipid;
  225. let X = Number(can[this.i].dataset.x);
  226. let Y = can[this.i].dataset.y * -1;
  227. that.view.scene = that.scene;
  228. this.scene.addMarker({
  229. Id: EquipID,
  230. X: X,
  231. Y: Y
  232. })
  233. that.view.fitSceneToView();
  234. that.view.scalable = false;
  235. this.scene.isSpaceSelectable = false;
  236. this.i++;
  237. if (this.i !== this.pageData.length) {
  238. this.$nextTick(() => {
  239. this.getGraphy();
  240. })
  241. }
  242. })
  243. },
  244. clearGraphy(i) {
  245. // if (this.view && this.view.scene) {
  246. // this.view.scene = null;
  247. // return
  248. // }
  249. this.view = new FloorView(`canvas${i}`)
  250. }
  251. },
  252. watch: {}
  253. }
  254. </script>
  255. <style lang="less" scoped>
  256. // 取消打印功能默认的左右边距
  257. @media print {
  258. @page {
  259. margin-left: 0;
  260. margin-right: 0;
  261. }
  262. }
  263. .box {
  264. background: #f2f2f2;
  265. margin: 0 auto;
  266. height: 100%;
  267. overflow-y: auto;
  268. ul {
  269. .infinite-list-item {
  270. margin-bottom: 20px;
  271. }
  272. }
  273. .content-box {
  274. width: 1000px;
  275. margin: 0 auto;
  276. background: white;
  277. padding: 10px 4px 10px 20px;
  278. box-sizing: border-box;
  279. .content-top {
  280. display: flex;
  281. div {
  282. flex: 1;
  283. }
  284. .details {
  285. margin-right: 10px;
  286. .el-badge {
  287. margin: 10px 0 0 10px;
  288. }
  289. p {
  290. margin-top: 4px;
  291. span:nth-child(1) {
  292. display: inline-block;
  293. width: 200px;
  294. }
  295. }
  296. .copy {
  297. color: #409eff;
  298. margin-left: 20px;
  299. }
  300. }
  301. .plan {
  302. padding-left: 20px;
  303. box-sizing: border-box;
  304. p {
  305. width: 100%;
  306. margin: 10px 0 10px 0;
  307. span {
  308. float: right;
  309. padding-right: 20px;
  310. box-sizing: border-box;
  311. }
  312. }
  313. }
  314. }
  315. .content-bottom {
  316. width: 100%;
  317. margin-top: 20px;
  318. overflow: hidden;
  319. .photo,
  320. .explain {
  321. float: left;
  322. width: 50%;
  323. }
  324. .photo {
  325. box-sizing: border-box;
  326. margin-bottom: 24px;
  327. p {
  328. margin-bottom: 10px;
  329. }
  330. span {
  331. float: right;
  332. padding-right: 20px;
  333. box-sizing: border-box;
  334. }
  335. }
  336. .explain {
  337. padding-right: 20px;
  338. box-sizing: border-box;
  339. .el-scrollbar {
  340. background: #f2f2f2;
  341. }
  342. p {
  343. margin-bottom: 10px;
  344. }
  345. .explain-content {
  346. padding: 10px;
  347. width: 100%;
  348. height: 290px;
  349. box-sizing: border-box;
  350. }
  351. }
  352. }
  353. }
  354. }
  355. .img-box {
  356. width: 100%;
  357. .img-content {
  358. overflow: hidden;
  359. position: relative;
  360. width: calc(100%-20px);
  361. height: 300px;
  362. vertical-align: middle;
  363. text-align: center;
  364. background: #ebeef5;
  365. margin-right: 20px;
  366. img {
  367. position: absolute;
  368. left: 50%;
  369. top: 50%;
  370. transform: translate(-50%, -50%);
  371. width: 400px;
  372. vertical-align: middle;
  373. }
  374. }
  375. }
  376. canvas {
  377. position: static !important;
  378. }
  379. </style>