eqDialog.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507
  1. <template>
  2. <!-- 设备设施的三级路由的tabs ,八大系统和7个二级菜单共用了一个全屏弹框-->
  3. <div class='dialog-container'>
  4. <el-dialog :visible.sync='visible' :fullscreen='true' @close='closeModal'>
  5. <!-- 除了清单和原理页面,别的都有记录事项detailDialog页面 -->
  6. <div slot='title' class='header-title' v-if='Object.keys(dialogInfo).length>0'>
  7. <span class='title-name'>{{systemName}}-{{dialogInfo.label}}</span>
  8. <!-- 2020-7-12 查看图纸时 隐藏图标(查看入口) -->
  9. <!-- v-if='dialogInfo.id.slice(2,4)!="QD" && dialogInfo.id.slice(2,4)!="YL" && dialogInfo.id.slice(0,4)!="GJSP"' -->
  10. <img
  11. v-if='dialogInfo.id.slice(2,4)!="QD" && dialogInfo.id.slice(2,4)!="YL" && dialogInfo.id.slice(0,4)!="GJSP" && dialogInfo.label !== "查看图纸"'
  12. src='../../assets/imgs/zy2.png'
  13. @click='visibalBox'
  14. style='margin-top:-4px;'
  15. alt
  16. />
  17. </div>
  18. <!-- 没有tab的页面 -->
  19. <div v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length==0' style='padding-top:16px;height:100%'>
  20. <!-- 原理图 -->
  21. <div v-if='dialogInfo.id.slice(2,4)=="YL"' style='width:100%;overflow:auto;height:100%;margin:0 auto'>
  22. <rotation type='3' v-if='rotationImg.length>0' :size='sizePic' :rotationImg='rotationImg'></rotation>
  23. </div>
  24. <!-- 土建装饰主要材料清单 -->
  25. <!-- <tj-table v-else-if='dialogInfo.id.slice(0,4)=="TJQD"' :param='param'></tj-table> -->
  26. <!-- 主要设备清单 标准设备表格 -->
  27. <!-- 内部设备清单 -->
  28. <standTable
  29. v-else-if='dialogInfo.id.slice(2,4)=="QD"'
  30. :param='param'
  31. :smsxt='smsxt'
  32. :diff='diff'
  33. :major='dialogInfo.id'
  34. :InfoName='`${systemName}-${dialogInfo.label}`'
  35. ></standTable>
  36. <!-- 电井商铺范围清单 -->
  37. <djsp-table v-else-if='dialogInfo.id.slice(0,4)=="GJSP"' :param='param'></djsp-table>
  38. <!-- 查看图纸 -->
  39. <look-page v-else-if='dialogInfo.id.slice(2,4)=="TZ"' param major></look-page>
  40. </div>
  41. <!-- 有tab的页面 -->
  42. <div v-else style='padding-top:16px;height:100%;'>
  43. <el-tabs v-model='activeName' @tab-click='handleClick' v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length>0'>
  44. <el-tab-pane
  45. v-for='(value,index) in dialogInfo.children'
  46. v-if='value.id.slice(2,4)!="YL"'
  47. :key='"u"+index'
  48. :label='`${value.label}`'
  49. :name='`${value.param.tab_code}`'
  50. >
  51. <!-- 主要设备清单 标准设备表格加tab -->
  52. <tableList
  53. v-if='value.id.slice(0,4)=="RDQD"'
  54. :InfoName='`${systemName}-${dialogInfo.label}`'
  55. :param='param'
  56. :smsxt='smsxt'
  57. :diff='diff'
  58. ref='list1'
  59. major='弱电'
  60. ></tableList>
  61. <tableList
  62. v-else-if='value.id.slice(0,4)=="NTQD"'
  63. :InfoName='`${systemName}-${dialogInfo.label}`'
  64. :param='param'
  65. :smsxt='smsxt'
  66. :diff='diff'
  67. ref='list2'
  68. major='暖通'
  69. ></tableList>
  70. <!-- 重要维保表格 -->
  71. <wb-table v-else-if='value.id.slice(2,4)=="WB"' :smsxt='smsxt' :tabLabel='tabLabel' :assetnum='""' :diff='diff' :size='10'></wb-table>
  72. <!-- 日常维保表格 -->
  73. <rcwb-table v-else-if='value.id=="RB"' :smsxt='smsxt' :tabLabel='tabLabel' :diff='diff' :assetnum='""' :size='10'></rcwb-table>
  74. <!-- 重要维修的表格 -->
  75. <wx-table v-else-if='value.id.slice(2,4)=="WX"' :smsxt='smsxt' :tabLabel='tabLabel' :assetnum='""' :diff='diff' :size='10'></wx-table>
  76. <!-- 日常维修的表格 -->
  77. <rcwx-table v-else-if='value.id=="RX"' :smsxt='smsxt' :tabLabel='tabLabel' :diff='diff' :assetnum='""' :size='10'></rcwx-table>
  78. <!-- 专维 -->
  79. <zw-table v-else-if='value.id.slice(2,4)=="ZW"' :smsxt='smsxt' :tabLabel='tabLabel' :diff='difference' :major='dialogInfo.id'></zw-table>
  80. <!-- 其他 -->
  81. <other-table v-else-if='value.id.slice(2,4)=="QT"' ref='qtList' :tabLabel='tabLabel' :smsxt='smsxt' :major='dialogInfo.id'></other-table>
  82. </el-tab-pane>
  83. <template v-for='(value,index) in dialogInfo.children'>
  84. <template v-for='(eve,index1) in tabCount'>
  85. <template v-if='eve.typecode == value.param.type_code'>
  86. <!-- 原理图分出来写,因为要判断没有图片的时候不显示tab,如果都没有则都不显示系统原理图 -->
  87. <el-tab-pane
  88. :key='index1+index'
  89. :label='`${value.label}`'
  90. :name='`${value.param.type_code}`'
  91. v-if='value.id.slice(2,4)=="YL" && eve.count>0 && value.param.type_code.slice(0,3)!="FBT"'
  92. >
  93. <!-- 有tab的原理图 -->
  94. <div style='width:100%;height:600px;'>
  95. <rotation :size='sizePic' v-if='rotationImg.length>0' type='3' :rotationImg='rotationImg'></rotation>
  96. </div>
  97. </el-tab-pane>
  98. <!-- 发布之后的编辑器的分支图 -->
  99. <el-tab-pane
  100. :key='index1+index'
  101. :label='`${value.label}`'
  102. :name='`${value.param.type_code}`'
  103. v-if='value.id.slice(2,4)=="YL" && value.param.type_code.slice(0,3)=="FBT"'
  104. >
  105. <fenbuPic ref='fenbutu' v-if='showFenbuPic' :typecode='value.param.type_code'></fenbuPic>
  106. </el-tab-pane>
  107. </template>
  108. </template>
  109. </template>
  110. </el-tabs>
  111. </div>
  112. </el-dialog>
  113. <!--记录表格 -->
  114. <record-dialog ref='Dialog'></record-dialog>
  115. </div>
  116. </template>
  117. <script>
  118. import tableList from './table/eqListTable'
  119. import tjTable from './table/tjTable'
  120. import wbTable from './table/wbTable'
  121. import rcwbTable from './table/rcwbTable'
  122. import zwTable from './table/zwTable'
  123. import lookPage from './table/lookPageTable'
  124. import standTable from './table/standTable'
  125. import otherTable from './table/otherTable'
  126. import wxTable from './table/wxTable'
  127. import rcwxTable from './table/rcwxTable'
  128. import recordDialog from './table/recordDialog'
  129. import djspTable from './table/djspTable'
  130. import { queryPic, queryTab } from '@/api/public.js'
  131. import fenbuPic from './fenbuPic'
  132. export default {
  133. props: ['systemName', 'smsxt', 'info'],
  134. data() {
  135. return {
  136. activeName: '',
  137. visible: false,
  138. dialogInfo: {},
  139. param: '', //区分清单tab
  140. typecode: '', //区分原理图的tab
  141. diff: '',
  142. difference: '', //区分给水排水
  143. rotationImg: [],
  144. tabLabel: '',
  145. tabCount: [],
  146. sizePic: '',
  147. imgInfo: {},
  148. showFenbuPic: false, //显示楼层分布组件
  149. }
  150. },
  151. mounted() {},
  152. components: {
  153. tableList,
  154. tjTable,
  155. wbTable,
  156. zwTable,
  157. lookPage,
  158. rcwbTable,
  159. rcwxTable,
  160. standTable,
  161. otherTable,
  162. wxTable,
  163. recordDialog,
  164. djspTable,
  165. fenbuPic,
  166. },
  167. methods: {
  168. //打开弹窗
  169. showModal(item) {
  170. console.log(item)
  171. this.visible = true
  172. this.dialogInfo = item
  173. if (Object.keys(this.dialogInfo).length > 0 && this.dialogInfo.children.length > 0) {
  174. this.activeName = this.dialogInfo.children[0].param.tab_code
  175. console.log(this.dialogInfo)
  176. this.diff = this.dialogInfo.children[0].param.diff
  177. //给排水的专维区分
  178. this.difference = this.dialogInfo.children[0].param.difference
  179. console.log(this.diff)
  180. if (this.dialogInfo.children[0].id.slice(2, 4) == 'YL') {
  181. this.typecode = this.dialogInfo.children[0].param.type_code
  182. this.activeName = this.typecode
  183. this.isShowTab()
  184. this.initImage(this.typecode)
  185. }
  186. } else {
  187. this.activeName = this.dialogInfo.param.tab_code
  188. if (this.dialogInfo.id.slice(2, 4) == 'YL') {
  189. this.typecode = this.dialogInfo.param.type_code
  190. this.activeName = this.typecode
  191. this.isShowTab()
  192. this.initImage(this.typecode)
  193. }
  194. }
  195. this.param = this.activeName
  196. },
  197. //点击tab函数
  198. handleClick(tab) {
  199. console.log(tab)
  200. if (this.param) {
  201. this.param = tab.name
  202. }
  203. this.activeName = tab.name
  204. //原理图的tab怎么传typecode
  205. if (this.dialogInfo.children.length > 0) {
  206. this.dialogInfo.children.forEach((el) => {
  207. if (tab.label == el.label) {
  208. this.typecode = el.param.type_code
  209. }
  210. })
  211. //this.typecode = this.dialogInfo.children[`${tab.index}`].param.type_code
  212. this.diff = this.dialogInfo.children[`${tab.index}`].param.diff
  213. this.difference = this.dialogInfo.children[`${tab.index}`].param.difference
  214. }
  215. if (this.dialogInfo.children.length > 0) {
  216. this.dialogInfo.children.forEach((el) => {
  217. if (el.label == '分水器支路分布图' || el.label == '消防泵房引出管路分布图') {
  218. this.showFenbuPic = true
  219. this.$nextTick(() => {
  220. this.$refs.fenbutu[0] && this.$refs.fenbutu[0].openFloorMap()
  221. })
  222. }
  223. })
  224. }
  225. if (this.dialogInfo.children[0].id.slice(2, 4) == 'YL' && this.typecode.slice(0, 3) != 'FBT') {
  226. this.initImage(this.typecode)
  227. }
  228. if (this.dialogInfo.children[0].id.slice(2, 4) == 'YL' && this.typecode.slice(0, 3) == 'FBT') {
  229. this.showFenbuPic = true
  230. this.$nextTick(() => {
  231. this.$refs.fenbutu[0] && this.$refs.fenbutu[0].openFloorMap()
  232. })
  233. }
  234. this.tabLabel = tab.label
  235. },
  236. visibalBox() {
  237. this.$refs.Dialog.open(this.smsxt)
  238. },
  239. //系统原理图接口
  240. initImage(typecode) {
  241. let getParams = {
  242. plazaId: this.$store.state.plazaId,
  243. // system: this.systemName.slice(0, 2),
  244. // system: this.systemName,
  245. plazaId: this.$store.state.plazaId,
  246. module: '1002',
  247. neTypename: '位置布置图',
  248. typecode: typecode,
  249. }
  250. switch (this.systemName) {
  251. case '暖通系统':
  252. getParams.system = '1002'
  253. break
  254. case '消防系统':
  255. getParams.system = '1003'
  256. break
  257. case '弱电系统':
  258. getParams.system = '1004'
  259. break
  260. case '电梯系统':
  261. getParams.system = '1006'
  262. break
  263. case '燃气系统':
  264. getParams.system = '1007'
  265. break
  266. case '土建装饰':
  267. getParams.system = '1008'
  268. break
  269. }
  270. if (this.systemName == '给排水系统') {
  271. getParams.system = '1005'
  272. }
  273. if (this.systemName == '供电系统') {
  274. getParams.system = '1001'
  275. }
  276. queryPic({ getParams }).then((res) => {
  277. this.rotationImg = res.data || []
  278. let img = new Image()
  279. img.src = this.rotationImg && this.rotationImg[0] ? this.rotationImg[0].url : ''
  280. const vm = this
  281. img.onload = function () {
  282. vm.$set(vm.imgInfo, 'width', img.width)
  283. vm.$set(vm.imgInfo, 'height', img.height)
  284. if (vm.imgInfo.width > vm.imgInfo.height) {
  285. vm.sizePic = 'width'
  286. } else {
  287. vm.sizePic = 'height'
  288. }
  289. }
  290. })
  291. },
  292. //原理图没图片不显示tab 因为供电和燃气系统没有tab所以分开判断
  293. //这个方法是判断有tab的count>0的时候显示tab
  294. isShowTab() {
  295. let data = {
  296. plazaId: this.$store.state.plazaId,
  297. major: this.systemName.slice(0, 2),
  298. }
  299. let postParams = []
  300. if (this.dialogInfo.children.length == 0) {
  301. postParams.push({
  302. params: {
  303. typecode: this.dialogInfo.param.type_code,
  304. system: this.smsxt,
  305. module: '1002',
  306. },
  307. tableName: 'glsms_proimgup',
  308. })
  309. } else {
  310. this.dialogInfo.children.forEach((el) => {
  311. postParams.push({
  312. params: {
  313. typecode: el.param.type_code,
  314. system: this.smsxt,
  315. module: '1002',
  316. },
  317. tableName: 'glsms_proimgup',
  318. })
  319. })
  320. }
  321. if(this.smsxt != '1008'){
  322. data.onlyMainAsset = true
  323. }
  324. queryTab({ data, postParams }).then((res) => {
  325. this.tabCount = []
  326. let data = res.data.data || []
  327. let counts = []
  328. data.forEach((el) => {
  329. this.tabCount.push({
  330. count: el.count,
  331. system: el.params.system,
  332. typecode: el.params.typecode,
  333. })
  334. counts.push(el.count)
  335. })
  336. this.$emit('emitCount', this.tabCount)
  337. if (counts.every((el) => el == 0)) {
  338. this.typecode = this.dialogInfo.children[this.dialogInfo.children.length - 1].param.type_code
  339. this.activeName = this.typecode
  340. this.showFenbuPic = true
  341. this.$nextTick(() => {
  342. this.$refs.fenbutu[0] && this.$refs.fenbutu[0].openFloorMap()
  343. })
  344. }
  345. })
  346. },
  347. /**
  348. * 关闭弹窗,传回父组件,在父组件内 处理逻辑(关闭弹窗)
  349. */
  350. closeModal() {
  351. this.showFenbuPic = false
  352. this.$emit('closeModal', true)
  353. },
  354. },
  355. }
  356. </script>
  357. <style lang="less" scoped>
  358. .dialog-container {
  359. .title-name {
  360. font-size: 16px;
  361. padding-right: 6px;
  362. padding-left: 24px;
  363. color: #000;
  364. font-weight: bold;
  365. color: #fff;
  366. font-weight: normal;
  367. }
  368. }
  369. .top {
  370. width: 1366px;
  371. height: 1px;
  372. background: rgba(0, 0, 0, 0.06);
  373. margin-bottom: 20px;
  374. }
  375. </style>
  376. <style lang="less" >
  377. // .el-dialog__wrapper {
  378. // z-index: 20001 !important;
  379. // }
  380. .dialog-container {
  381. .el-dialog__header {
  382. padding: 16px 24px;
  383. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  384. }
  385. .el-dialog__headerbtn .el-dialog__close {
  386. color: #fff;
  387. }
  388. .el-dialog__title {
  389. font-size: 16px;
  390. font-family: PingFangSC-Medium, PingFang SC;
  391. font-weight: 500;
  392. color: rgba(0, 0, 0, 0.85);
  393. line-height: 24px;
  394. }
  395. .el-dialog__body {
  396. padding: 0 24px;
  397. height: calc(100% - 57px);
  398. }
  399. .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
  400. .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  401. .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  402. .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  403. padding-left: 16px;
  404. }
  405. .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
  406. .el-tabs--bottom .el-tabs__item.is-top:last-child,
  407. .el-tabs--top .el-tabs__item.is-bottom:last-child,
  408. .el-tabs--top .el-tabs__item.is-top:last-child {
  409. padding-right: 16px;
  410. }
  411. .el-tabs__nav-wrap::after {
  412. height: 0;
  413. }
  414. .el-tabs {
  415. height: 100%;
  416. }
  417. .el-tabs__content {
  418. height: calc(100% - 45px);
  419. /deep/ .el-tab-pane > div {
  420. height: 100% !important;
  421. }
  422. }
  423. .is-active {
  424. color: #025baa !important;
  425. border-color: #025baa !important;
  426. }
  427. .el-tabs__item {
  428. padding: 5px 16px;
  429. height: 30px;
  430. line-height: 22px;
  431. font-size: 14px;
  432. font-family: MicrosoftYaHei;
  433. color: rgba(31, 36, 41, 1);
  434. border: 1px solid rgba(195, 199, 203, 1);
  435. }
  436. /deep/ .el-tabs__item:last-child {
  437. border-radius: 0px 4px 4px 0px;
  438. }
  439. /deep/ .el-tabs__item:nth-child(2) {
  440. border-radius: 4px 0px 0px 4px;
  441. }
  442. .el-tab-pane {
  443. height: 100% !important;
  444. }
  445. .el-tabs__active-bar {
  446. background-color: transparent !important;
  447. }
  448. //动画
  449. .el-dialog__wrapper {
  450. transition-duration: 0.3s;
  451. }
  452. .dialog-fade-enter-active {
  453. animation: none !important;
  454. }
  455. .dialog-fade-leave-active {
  456. transition-duration: 0.15s !important;
  457. animation: none !important;
  458. }
  459. .dialog-fade-enter-active .el-dialog,
  460. .dialog-fade-leave-active .el-dialog {
  461. animation-fill-mode: forwards;
  462. }
  463. .dialog-fade-enter-active .el-dialog {
  464. animation-duration: 0.3s;
  465. animation-name: anim-open;
  466. animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
  467. }
  468. .dialog-fade-leave-active .el-dialog {
  469. animation-duration: 0.3s;
  470. animation-name: anim-close;
  471. }
  472. @keyframes anim-open {
  473. 0% {
  474. opacity: 0;
  475. transform: scale3d(0, 0, 1);
  476. }
  477. 100% {
  478. opacity: 1;
  479. transform: scale3d(1, 1, 1);
  480. }
  481. }
  482. @keyframes anim-close {
  483. 0% {
  484. opacity: 1;
  485. }
  486. 100% {
  487. opacity: 0;
  488. transform: scale3d(0.5, 0.5, 1);
  489. }
  490. }
  491. }
  492. @media screen and (max-width: 1600px) {
  493. /*当屏幕尺寸小于1366px时,应用下面的CSS样式*/
  494. // .el-tabs,
  495. // .el-tabs__content {
  496. // height: 530px !important;
  497. // }
  498. }
  499. </style>