eqDialog.vue 19 KB

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