deleted.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402
  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.EquipLocalName?item.EquipLocalName:item.EquipName}`}}</h4>
  10. <b>BIM ID:<span @dblclick="copyContent"
  11. id="copy">{{item.ScanTaskBase && item.ScanTaskBase[0]?item.ScanTaskBase[0].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.Category}}</span></p>
  17. <p>设备ID:{{item.EquipID}}</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.EquipID' :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. ProjectId: this.projectId,
  161. Cascade: [
  162. {
  163. Name: "scanTaskBase",// 级联-任务
  164. Filters: 'TaskState = 0',
  165. Orders: "CreateTime desc ,EquipName asc",
  166. },
  167. {
  168. Name: "property",// 级联-资产
  169. Cascade: [
  170. {
  171. Name: "familyName"
  172. }
  173. ]
  174. },
  175. {
  176. Name: "equipCategory"// 级联-设备类型
  177. }
  178. ],
  179. Orders: "CreateTime desc ,EquipName asc",
  180. Filters: `ModelId in ${this.equipComDelList}`,
  181. PageNumber: this.page.pageNumber,
  182. PageSize: this.page.pageSize
  183. }
  184. toBeDelEquipPage(params, res => {
  185. this.page.total = res.PageSize < 20 ? res.PageSize : res.Total;
  186. res.Content.forEach(item => {
  187. if (item.BIMLocation) {
  188. let local = {};
  189. let ary = item.BIMLocation.split(',');
  190. let localAry = ['X', 'Y', 'Z'];
  191. ary.forEach((item, index) => {
  192. local[localAry[index]] = ary[index];
  193. })
  194. item.local = local;
  195. }
  196. if (item.ScanTaskBase && item.ScanTaskBase.length > 1) {
  197. item.ScanTaskBase = item.ScanTaskBase.shift();
  198. }
  199. });
  200. if (this.page.pageNumber == 1) {
  201. this.pageData = res.Content;
  202. this.$nextTick(() => {
  203. this.getGraphy();
  204. })
  205. } else {
  206. this.pageData = this.pageData.concat(res.Content);
  207. console.log(this.pageData.length, 19)
  208. this.$nextTick(() => {
  209. this.getGraphy();
  210. })
  211. }
  212. this.pageData.forEach(item => {
  213. if (item.BIMLocation) {
  214. let local = {};
  215. let ary = item.BIMLocation.split(',');
  216. let localAry = ['X', 'Y', 'Z'];
  217. ary.forEach((item, index) => {
  218. local[localAry[index]] = ary[index];
  219. })
  220. item.local = local;
  221. }
  222. if (item.ScanTaskBase && item.ScanTaskBase.length > 1) {
  223. item.ScanTaskBase = item.ScanTaskBase.shift();
  224. }
  225. });
  226. })
  227. },
  228. getGraphy() {// 绘制空间位置图片
  229. console.log(this.i);
  230. let can = this.$refs.canvas;
  231. let that = this;
  232. that.clearGraphy(this.i)
  233. that.scene = new LocationPointScene();
  234. this.canvasLoading = true;
  235. that.scene.getFloorData('/modelapi/base-graph/query', { modelId: can[this.i].dataset.modelid }).then(res => {
  236. that.canvasLoading = false;
  237. if (res == 'error') {
  238. this.FloorMap = '';
  239. this.$message.warning('数据解析异常');
  240. return;
  241. }
  242. let modelID = can[this.i].dataset.modelid
  243. let EquipID = can[this.i].dataset.equipid;
  244. let X = Number(can[this.i].dataset.x);
  245. let Y = can[this.i].dataset.y * -1;
  246. that.view.scene = that.scene;
  247. this.scene.addMarker({
  248. Id: EquipID,
  249. X: X,
  250. Y: Y
  251. })
  252. that.view.fitSceneToView();
  253. this.scene.isSpaceSelectable = false;
  254. this.i++;
  255. if (this.i !== this.pageData.length) {
  256. this.$nextTick(() => {
  257. this.getGraphy();
  258. })
  259. }
  260. })
  261. },
  262. clearGraphy(i) {
  263. // if (this.view && this.view.scene) {
  264. // this.view.scene = null;
  265. // return
  266. // }
  267. this.view = new FloorView(`canvas${i}`)
  268. }
  269. },
  270. watch: {}
  271. }
  272. </script>
  273. <style lang="less" scoped>
  274. // 取消打印功能默认的左右边距
  275. @media print {
  276. @page {
  277. margin-left: 0;
  278. margin-right: 0;
  279. }
  280. }
  281. .box {
  282. background: #f2f2f2;
  283. margin: 0 auto;
  284. height: 100%;
  285. overflow-y: auto;
  286. ul {
  287. .infinite-list-item {
  288. margin-bottom: 20px;
  289. }
  290. }
  291. .content-box {
  292. width: 1000px;
  293. margin: 0 auto;
  294. background: white;
  295. padding: 10px 4px 10px 20px;
  296. box-sizing: border-box;
  297. .content-top {
  298. display: flex;
  299. div {
  300. flex: 1;
  301. }
  302. .details {
  303. margin-right: 10px;
  304. .el-badge {
  305. margin: 10px 0 0 10px;
  306. }
  307. p {
  308. margin-top: 4px;
  309. span:nth-child(1) {
  310. display: inline-block;
  311. width: 200px;
  312. }
  313. }
  314. .copy {
  315. color: #409eff;
  316. margin-left: 20px;
  317. }
  318. }
  319. .plan {
  320. padding-left: 20px;
  321. box-sizing: border-box;
  322. p {
  323. width: 100%;
  324. margin: 10px 0 10px 0;
  325. span {
  326. float: right;
  327. padding-right: 20px;
  328. box-sizing: border-box;
  329. }
  330. }
  331. }
  332. }
  333. .content-bottom {
  334. width: 100%;
  335. margin-top: 20px;
  336. overflow: hidden;
  337. .photo,
  338. .explain {
  339. float: left;
  340. width: 50%;
  341. }
  342. .photo {
  343. box-sizing: border-box;
  344. margin-bottom: 24px;
  345. p {
  346. margin-bottom: 10px;
  347. }
  348. span {
  349. float: right;
  350. padding-right: 20px;
  351. box-sizing: border-box;
  352. }
  353. }
  354. .explain {
  355. padding-right: 20px;
  356. box-sizing: border-box;
  357. .el-scrollbar {
  358. background: #f2f2f2;
  359. }
  360. p {
  361. margin-bottom: 10px;
  362. }
  363. .explain-content {
  364. padding: 10px;
  365. width: 100%;
  366. height: 290px;
  367. box-sizing: border-box;
  368. }
  369. }
  370. }
  371. }
  372. }
  373. .img-box {
  374. width: 100%;
  375. .img-content {
  376. overflow: hidden;
  377. position: relative;
  378. width: calc(100%-20px);
  379. height: 300px;
  380. vertical-align: middle;
  381. text-align: center;
  382. background: #ebeef5;
  383. margin-right: 20px;
  384. img {
  385. position: absolute;
  386. left: 50%;
  387. top: 50%;
  388. transform: translate(-50%, -50%);
  389. width: 400px;
  390. vertical-align: middle;
  391. }
  392. }
  393. }
  394. canvas {
  395. position: static !important;
  396. }
  397. </style>