index.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575
  1. <template>
  2. <div class="report-index">
  3. <div class="statistics">
  4. <div class="building">
  5. <p>建筑模型文件夹:<b>{{ModelFileCount}}</b></p>
  6. </div>
  7. <div class="includefloor">
  8. <p>包含楼层模型文件:<b>{{modelFloorCount}}</b></p>
  9. </div>
  10. <div class="problematic">
  11. <p>检查出问题的楼层模型文件:<b>{{problemCount}}</b></p>
  12. </div>
  13. </div>
  14. <div class="main-content">
  15. <div class="tab-box">
  16. <el-tabs v-model="activeTab" type='card' @tab-click="getData">
  17. <template v-for="(item,index) in tableList">
  18. <el-tab-pane :name="item.Code" :key="index" :label="item.Name">
  19. <span slot="label">
  20. <i :class="item.flag?'msg-icon el-icon-success success-color':'msg-icon el-icon-error error-color'" style="font-size:14px;"></i>
  21. <span>{{ item.Name }}</span>
  22. </span>
  23. </el-tab-pane>
  24. </template>
  25. </el-tabs>
  26. </div>
  27. <div class="content-box">
  28. <div class="button">
  29. <el-button @click="del" :plain="toBeDelCount?false:true" :disabled="toBeDelCount?false:true">需从模型中删除的设备</el-button>
  30. <el-button @click="supplement" :plain="toBeSuppCount?false:true" :disabled="toBeSuppCount?false:true">模型待补充的设备</el-button>
  31. <el-button type="info" :loading="load" @click='getExportReport'>导出模型问题报告</el-button>
  32. </div>
  33. <div class="table"
  34. :style="tableList&&tableList.length?'width: 100%;height: calc(100% - 47px)':'width: 100%;height: calc(100% - 10px)'">
  35. <el-table
  36. ref="multipleTable"
  37. :data="tableData"
  38. stripe
  39. height="100%"
  40. :header-cell-style="headerStyle"
  41. v-loading='loading'
  42. :row-class-name="tableRowClassName"
  43. :cell-style="cellStyle"
  44. >
  45. <el-table-column prop="FloorName" label="模型楼层" fixed width="150"></el-table-column>
  46. <el-table-column prop="functionNo" label="待删除设备数量" fixed width="150">
  47. <template slot-scope="scope">
  48. <el-badge :value="scope.row.toBeDel" class="item" :type='scope.row.toBeDel?"danger":"success"'>
  49. </el-badge>
  50. </template>
  51. </el-table-column>
  52. <el-table-column prop="toBeSupplement" label="待补充设备数量" fixed width="150">
  53. <template slot-scope="scope">
  54. <el-badge :value="scope.row.toBeSupplement" class="item"
  55. :type='scope.row.toBeSupplement?"danger":"success"'>
  56. </el-badge>
  57. </template>
  58. </el-table-column>
  59. <el-table-column prop="questionItem" label="有问题的检查项" fixed width="150" style="border-right:1px solid red">
  60. <template slot-scope="scope">
  61. <el-badge :value="scope.row.questionItem" class="item" :type='scope.row.questionItem?"warning":"success"'>
  62. </el-badge>
  63. </template>
  64. </el-table-column>
  65. <el-table-column prop="ElementRangeCheck" label='构件范围检查' width="200">
  66. <template slot-scope="scope">
  67. <!-- <el-badge :value="scope.row.ElementRangeCheck" class="item" type='danger' v-if="scope.row.ElementRangeCheck">-->
  68. <!-- </el-badge>-->
  69. <i class="msg-icon el-icon-success success-color1" style="font-size:20px;"
  70. v-if="scope.row.ElementRangeCheck<=0"></i>
  71. <i class="msg-icon el-icon-success error-color1" style="font-size:20px;"
  72. v-if="scope.row.ElementRangeCheck"></i>
  73. </template>
  74. </el-table-column>
  75. <el-table-column prop="FamilyNameCheck" label='设备族编码检查' width="200">
  76. <template slot-scope="scope">
  77. <!-- <el-badge :value="scope.row.FamilyNameCheck" class="item" type='danger' v-if="scope.row.FamilyNameCheck">-->
  78. <!-- </el-badge>-->
  79. <i class="msg-icon el-icon-success success-color1" style="font-size:20px;"
  80. v-if="scope.row.FamilyNameCheck<=0"></i>
  81. <i class="msg-icon el-icon-success error-color1" style="font-size:20px;"
  82. v-if="scope.row.FamilyNameCheck"></i>
  83. </template>
  84. </el-table-column>
  85. <el-table-column prop="EquipPartLocationCheck" label='部件所在位置检查' width="200">
  86. <template slot-scope="scope">
  87. <!-- <el-badge :value="scope.row.EquipPartLocationCheck" class="item" type='danger' v-if="scope.row.EquipPartLocationCheck">-->
  88. <!-- </el-badge>-->
  89. <i class="msg-icon el-icon-success error-color1" style="font-size:20px;"
  90. v-if="scope.row.EquipPartLocationCheck"></i>
  91. <i class="msg-icon el-icon-success success-color1" style="font-size:20px;"
  92. v-if="scope.row.EquipPartLocationCheck<=0"></i>
  93. </template>
  94. </el-table-column>
  95. <el-table-column prop="ColumnCheck" label='柱边界检查' width="200">
  96. <template slot-scope="scope">
  97. <!-- <el-badge :value="scope.row.ColumnCheck" class="item" type='danger' v-if="scope.row.ColumnCheck">-->
  98. <!-- </el-badge>-->
  99. <i class="msg-icon el-icon-success error-color1" style="font-size:20px;"
  100. v-if="scope.row.ColumnCheck"></i>
  101. <i class="msg-icon el-icon-success success-color1" style="font-size:20px;"
  102. v-if="scope.row.ColumnCheck<=0"></i>
  103. </template>
  104. </el-table-column>
  105. <el-table-column prop="ConnectorCheck" label='连接件检查' width="200">
  106. <template slot-scope="scope">
  107. <!-- <el-badge :value="scope.row.ConnectorCheck" class="item" type='danger' v-if="scope.row.ConnectorCheck">-->
  108. <!-- </el-badge>-->
  109. <i class="msg-icon el-icon-success error-color1" style="font-size:20px;"
  110. v-if="scope.row.ConnectorCheck"></i>
  111. <i class="msg-icon el-icon-success success-color1" style="font-size:20px;"
  112. v-if="scope.row.ConnectorCheck<=0"></i>
  113. </template>
  114. </el-table-column>
  115. <el-table-column prop="SystemNameCheck" label='系统类型名称检查' width="200">
  116. <template slot-scope="scope">
  117. <!-- <el-badge :value="scope.row.SystemNameCheck" class="item" type='danger' v-if="scope.row.SystemNameCheck">-->
  118. <!-- </el-badge>-->
  119. <i class="msg-icon el-icon-success error-color1" style="font-size:20px;"
  120. v-if="scope.row.SystemNameCheck"></i>
  121. <i class="msg-icon el-icon-success success-color1" style="font-size:20px;"
  122. v-if="scope.row.SystemNameCheck<=0"></i>
  123. </template>
  124. </el-table-column>
  125. <el-table-column prop="EquipInSpaceCheck" label='未在空间中的设备' width="200">
  126. <template slot-scope="scope">
  127. <!-- <el-badge :value="scope.row.EquipInSpaceCheck" class="item" type='danger' v-if="scope.row.EquipInSpaceCheck">-->
  128. <!-- </el-badge>-->
  129. <i class="msg-icon el-icon-success error-color1" style="font-size:20px;"
  130. v-if="scope.row.EquipInSpaceCheck"></i>
  131. <i class="msg-icon el-icon-success success-color1" style="font-size:20px;"
  132. v-if="scope.row.EquipInSpaceCheck<=0"></i>
  133. </template>
  134. </el-table-column>
  135. <el-table-column prop="PipeCheck" label='管段检查' width="200">
  136. <template slot-scope="scope">
  137. <!-- <el-badge :value="scope.row.PipeCheck" class="item" type='danger' v-if="scope.row.PipeCheck">-->
  138. <!-- </el-badge>-->
  139. <i class="msg-icon el-icon-success error-color1" style="font-size:20px;" v-if="scope.row.PipeCheck"></i>
  140. <i class="msg-icon el-icon-success success-color1" style="font-size:20px;"
  141. v-if="scope.row.PipeCheck<=0"></i>
  142. </template>
  143. </el-table-column>
  144. <el-table-column prop="SystemReferEquipCheck" label='管网及相关设备检查' width="200">
  145. <template slot-scope="scope">
  146. <!-- <el-badge :value="scope.row.SystemReferEquipCheck" class="item" :type='scope.row.SystemReferEquipCheck?"danger":"success"'-->
  147. <!-- v-if="scope.row.SystemReferEquipCheck">-->
  148. <!-- </el-badge>-->
  149. <i class="msg-icon el-icon-success error-color1" style="font-size:20px;"
  150. v-if="scope.row.SystemReferEquipCheck"></i>
  151. <i class="msg-icon el-icon-success success-color1" style="font-size:20px;"
  152. v-if="scope.row.SystemReferEquipCheck<=0"></i>
  153. </template>
  154. </el-table-column>
  155. <el-table-column prop="ParameterIntegrityCheck" label='Revit族参数完整性检查' width="200">
  156. <template slot-scope="scope">
  157. <!-- <el-badge :value="scope.row.ParameterIntegrityCheck" class="item" type='danger' v-if="scope.row.ParameterIntegrityCheck">-->
  158. <!-- </el-badge>-->
  159. <i class="msg-icon el-icon-success error-color1" style="font-size:20px;"
  160. v-if="scope.row.ParameterIntegrityCheck"></i>
  161. <i class="msg-icon el-icon-success success-color1" style="font-size:20px;"
  162. v-if="scope.row.ParameterIntegrityCheck<=0"></i>
  163. </template>
  164. </el-table-column>
  165. <el-table-column prop="XyzOverlapCheck" label='xyz坐标重叠检查' width="200">
  166. <template slot-scope="scope">
  167. <!-- <el-badge :value="scope.row.XyzOverlapCheck" class="item" type='danger' v-if="scope.row.XyzOverlapCheck">-->
  168. <!-- </el-badge>-->
  169. <i class="msg-icon el-icon-success error-color1" style="font-size:20px;"
  170. v-if="scope.row.XyzOverlapCheck"></i>
  171. <i class="msg-icon el-icon-success success-color1" style="font-size:20px;"
  172. v-if="scope.row.XyzOverlapCheck<=0"></i>
  173. </template>
  174. </el-table-column>
  175. <template slot="empty">
  176. <div style="height: 60%;transform: translate(-40%,50%);">
  177. <i class="icon-wushuju iconfont"></i>
  178. 数据暂无
  179. </div>
  180. </template>
  181. </el-table>
  182. <el-pagination class="right" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNumber"
  183. :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
  184. </el-pagination>
  185. </div>
  186. </div>
  187. </div>
  188. </div>
  189. </template>
  190. <script>
  191. import {mapGetters} from "vuex";
  192. import dasBoard from "@/views/dasboard/index";
  193. import {queryFloorList, queryLostReportList, queryModel, queryReportList} from "@/api/model/report.js";
  194. import {getSupplement, getToBeDelEquip} from "@/api/scan/request.js";
  195. import axios from 'axios'
  196. export default {
  197. components: {
  198. dasBoard
  199. },
  200. data() {
  201. return {
  202. params: null,
  203. ModelFileCount: null,// 模型文件夹数量
  204. modelFloorCount: null,// 包含楼层模型文件数量
  205. problemCount: 0,// 检查出问题的楼层模型文件数量
  206. tableList: [], // tab数据
  207. tableData: [],// 列表数据
  208. activeTab: '', // tab当前选中项
  209. headerStyle: { // 列表样式
  210. backgroundColor: '#e1e4e5',
  211. color: '#2b2b2b',
  212. lineHeight: '30px'
  213. },
  214. page: {
  215. pageSize: 50,
  216. pageSizes: [10, 20, 50, 100],
  217. pageNumber: 1,
  218. total: 0
  219. },
  220. loading: false,
  221. load: false,
  222. floorIconType: null,
  223. toBeSuppCount: 0,
  224. toBeDelCount: 0
  225. }
  226. },
  227. mounted() { },
  228. created() {
  229. this.params = {
  230. Orders: "Name asc"
  231. }
  232. this.getModelFileCount();
  233. this.getModelFloorCount();
  234. },
  235. computed: {
  236. ...mapGetters('layout', ['projectId'])
  237. },
  238. methods: {
  239. cellStyle({row, column, rowIndex, columnIndex}) {
  240. console.log(row, column.label, '=====')
  241. if (column.label !== '模型楼层' && column.label !== '待删除设备数量' && column.label !== '待补充设备数量' && column.label !== '有问题的检查项') {
  242. return {
  243. background: '#f3f3f3',
  244. lineHeight: '30px'
  245. }
  246. }
  247. },
  248. getModelFloorCount() {// 获取楼层模型文件数量,计算出检查出问题的模型文件
  249. let promise1 = new Promise(resolve => {
  250. queryFloorList({}, res => {
  251. resolve(res);
  252. })
  253. })
  254. Promise.all([promise1]).then(response => {
  255. this.problemCount = 0;
  256. let res = response[0];
  257. this.modelFloorCount = res.Total;
  258. this.modelFloor = res.Content;
  259. this.getModelFileIcon();
  260. this.modelFloor.forEach(item => {
  261. if (!item.DataCheckResult) {
  262. this.problemCount++;
  263. }
  264. })
  265. })
  266. },
  267. getModelFileIcon() {// 计算文件夹的图标
  268. this.tableList.forEach(item => {
  269. this.modelFloor.forEach(it => {
  270. if (item.Code === it.FolderId) {
  271. if (!item.DataCheckResult) {
  272. item.flag = false;
  273. }
  274. }
  275. })
  276. })
  277. },
  278. getData(tab) {// 切换tab时执行
  279. this.getModelFloor();
  280. },
  281. getModelFileCount() {// 获取项目下所有模型文件夹
  282. queryModel(this.params, res => {
  283. this.ModelFileCount = res.Content.length;
  284. this.tableList = res.Content;
  285. if (this.tableList && this.tableList.length) {
  286. this.tableList.forEach((item, index) => {
  287. item.Code = item.Id;
  288. })
  289. this.activeTab = this.tableList[0].Code;// 默认选中第一个模型文件夹
  290. }
  291. this.getModelFloor();
  292. });
  293. },
  294. getModelFloor() {// 获取当前楼层下的模型楼层和各个检查项的数据
  295. let params = {
  296. ProjectId: this.projectId,
  297. Id: `${this.activeTab}`,
  298. PageNumber: this.page.pageNumber,
  299. PageSize: this.page.pageSize
  300. }
  301. queryReportList(params, res => {
  302. this.FloorName = res.Content;
  303. this.tableData = [];
  304. if (this.FloorName && this.FloorName.length) {
  305. this.loading = true;
  306. let i = 0;
  307. this.FloorName.forEach(item => {
  308. item.questionItem = 0;
  309. for (let key in item) {
  310. if (item[key] > 0 && key !== "FloorName" && key !== "questionItem") {
  311. i += 1;
  312. item.questionItem += 1;
  313. }
  314. }
  315. })
  316. this.floorIconType = i;
  317. }
  318. this.getLostModelFloor();
  319. })
  320. },
  321. getLostModelFloor() {// 获取缺失楼层
  322. let params = {
  323. ProjectId: this.projectId,
  324. Filters: `FolderId='${this.activeTab}';Status=4`
  325. }
  326. queryLostReportList(params, res => {
  327. this.LostFloorName = res.Content;
  328. this.getToBeCount();
  329. })
  330. },
  331. getToBeCount() {// 根据模型ID获取待删除数量和待补充数量
  332. let equipComDelList = [];
  333. this.equipComDelList = [];
  334. this.LostFloorName.forEach(item => {
  335. if (item.CurrentModelId) {
  336. equipComDelList.push({
  337. ModelId: item.CurrentModelId
  338. });
  339. this.equipComDelList.push(item.CurrentModelId)
  340. } else {
  341. item.flag = 'lost';
  342. item.FloorName = `${item.Note + item.FloorName}`
  343. }
  344. })
  345. let params = {
  346. ProjectId: this.projectId,
  347. data: equipComDelList
  348. }
  349. let promise1 = new Promise(resolve => {
  350. getToBeDelEquip(params, res => {
  351. resolve(res);
  352. })
  353. })
  354. let promise2 = new Promise(resolve => {
  355. getSupplement(params, res => {
  356. resolve(res);
  357. })
  358. })
  359. Promise.all([promise1, promise2]).then(response => {
  360. let res = response[0];
  361. let res1 = response[1];
  362. this.toBeDelCount = 0;
  363. this.toBeSuppCount = 0;
  364. res.Content.forEach(item => {
  365. if (item.Count > 0) {
  366. this.toBeDelCount += 1;
  367. }
  368. this.LostFloorName.forEach(it => {
  369. if (item.ModelId === it.CurrentModelId) {
  370. it.toBeDel = item.Count;
  371. }
  372. })
  373. })
  374. res1.Content.forEach(item => {
  375. if (item.Count > 0) {
  376. this.toBeSuppCount += 1;
  377. }
  378. this.LostFloorName.forEach(it => {
  379. if (item.ModelId === it.CurrentModelId) {
  380. it.toBeSupplement = item.Count;
  381. }
  382. })
  383. })
  384. if (this.LostFloorName && this.LostFloorName.length) {
  385. this.LostFloorName.forEach(item => {
  386. this.FloorName.forEach(it => {
  387. if (item.FloorName === it.FloorName) {
  388. for (let key in it) {
  389. item[key] = it[key];
  390. }
  391. }
  392. })
  393. })
  394. this.tableData = this.LostFloorName;
  395. } else {
  396. this.tableData = [];
  397. }
  398. this.page.total = this.tableData.length;
  399. this.loading = false;
  400. })
  401. },
  402. del() {// 点击需从模型中删除的设备
  403. let equipComDelList = encodeURIComponent(JSON.stringify(this.equipComDelList));
  404. let jumpRouter = this.$router.resolve({ path: '/model/report/deleted', query: { equipComDelList: equipComDelList } })
  405. window.open(jumpRouter.href, '_blank')
  406. },
  407. supplement() {// 点击模型待补充的设备
  408. let equipComDelList = encodeURIComponent(JSON.stringify(this.equipComDelList));
  409. let jumpRouter = this.$router.resolve({ path: '/model/report/supplement', query: { equipComDelList: equipComDelList } })
  410. window.open(jumpRouter.href, '_blank')
  411. },
  412. getExportReport() {// 导出模型问题报告
  413. let that = this;
  414. this.load = true;
  415. axios({
  416. method: 'post',
  417. url: `/modelapi/report/non-blocking`,
  418. data: {
  419. Id: this.activeTab,
  420. ProjectId: this.projectId
  421. },
  422. headers: {
  423. ProjectId: this.projectId
  424. },
  425. responseType: 'blob'
  426. }).then(function (res) {
  427. if (res.data.type == 'application/vnd.ms-excel') {
  428. let blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' });
  429. let fileName = decodeURI(res.headers['content-disposition']);
  430. if (fileName)
  431. fileName = fileName.substring(fileName.indexOf('=') + 1);
  432. if ('download' in document.createElement('a')) { // 非IE下载
  433. const elink = document.createElement('a')
  434. elink.download = fileName
  435. elink.style.display = 'none'
  436. elink.href = URL.createObjectURL(blob)
  437. document.body.appendChild(elink)
  438. elink.click()
  439. URL.revokeObjectURL(elink.href) // 释放URL 对象
  440. document.body.removeChild(elink)
  441. that.load = false;
  442. } else { // IE10+下载
  443. navigator.msSaveBlob(blob, fileName)
  444. that.load = false;
  445. }
  446. } else {
  447. let reader = new FileReader()
  448. reader.onload = e => {
  449. if (e.target.readyState === 2) {
  450. let res = {}
  451. that.load = false;
  452. res = JSON.parse(e.target.result)
  453. that.$message.error(res.Message);
  454. }
  455. }
  456. reader.readAsText(res.data)
  457. }
  458. })
  459. },
  460. tableRowClassName({ row, rowIndex, column }) {// 设置缺失楼层所在行的背景色
  461. if (row.flag && row.flag === 'lost') {
  462. return 'warning-row';
  463. }
  464. },
  465. handleSizeChange(val) {// 切换每页显示数量
  466. this.page.pageSize = val;
  467. this.getModelFloor();
  468. },
  469. handleCurrentChange(val) {// 切换页码
  470. this.page.pageNumber = val;
  471. this.getModelFloor();
  472. }
  473. },
  474. watch: {
  475. projectId() {
  476. this.getModelFileCount();
  477. this.getModelFloorCount();
  478. }
  479. }
  480. }
  481. </script>
  482. <style lang="less" scoped>
  483. .report-index {
  484. .statistics {
  485. display: flex;
  486. width: 100%;
  487. padding: 20px 0;
  488. background: white;
  489. margin-bottom: 10px;
  490. div {
  491. flex: 1;
  492. text-align: center;
  493. p {
  494. b {
  495. font-size: 20px;
  496. margin-left: 20px;
  497. }
  498. }
  499. }
  500. }
  501. .main-content {
  502. width: 100%;
  503. height: calc(100% - 90px);
  504. background: white;
  505. .content-box {
  506. height: calc(100% - 105px);
  507. .table {
  508. margin-top: 15px;
  509. }
  510. }
  511. }
  512. .button {
  513. padding-left: 10px;
  514. button {
  515. border: 1px solid #dcdfe6;
  516. color: #606266;
  517. background: white;
  518. }
  519. }
  520. .success-color {
  521. color: #67c23a;
  522. }
  523. .error-color {
  524. color: #f56c6c;
  525. }
  526. .success-color1 {
  527. color: #67c23a60;
  528. }
  529. .error-color1 {
  530. color: #f56c6c60;
  531. }
  532. /deep/ .el-table_1_column_4 {
  533. border-right: 1px solid #e2e2e2 !important;
  534. }
  535. /deep/ .el-table {
  536. .el-table__fixed {
  537. height: auto !important;
  538. bottom: 17px;
  539. }
  540. }
  541. /deep/ .el-table__row.warning-row {
  542. td {
  543. background: #f9f9f9 !important;
  544. }
  545. }
  546. }
  547. </style>