eqDialog.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451
  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[0].id.slice(2, 4) == 'YL' && this.typecode.slice(0, 3) != 'FBT') {
  186. this.initImage(this.typecode)
  187. }
  188. if (this.dialogInfo.children[0].id.slice(2, 4) == 'YL' && this.typecode.slice(0, 3) == 'FBT') {
  189. this.showFenbuPic = true
  190. this.$nextTick(() => {
  191. this.$refs.fenbutu[0] && this.$refs.fenbutu[0].openFloorMap()
  192. })
  193. }
  194. this.tabLabel = tab.label
  195. },
  196. visibalBox() {
  197. this.$refs.Dialog.open(this.smsxt)
  198. },
  199. //系统原理图接口
  200. initImage(typecode) {
  201. let getParams = {
  202. plazaId: this.$store.state.plazaId,
  203. // system: this.systemName.slice(0, 2),
  204. // system: this.systemName,
  205. plazaId: this.$store.state.plazaId,
  206. module: '1002',
  207. neTypename: '位置布置图',
  208. typecode: typecode
  209. }
  210. switch (this.systemName) {
  211. case '暖通系统':
  212. getParams.system = '1002'
  213. break
  214. case '消防系统':
  215. getParams.system = '1003'
  216. break
  217. case '弱电系统':
  218. getParams.system = '1004'
  219. break
  220. case '电梯系统':
  221. getParams.system = '1006'
  222. break
  223. case '燃气系统':
  224. getParams.system = '1007'
  225. break
  226. case '土建装饰':
  227. getParams.system = '1008'
  228. break
  229. }
  230. if (this.systemName == '给排水系统') {
  231. getParams.system = '1005'
  232. }
  233. if (this.systemName == '供电系统') {
  234. getParams.system = '1001'
  235. }
  236. queryPic({ getParams }).then(res => {
  237. this.rotationImg = res.data || []
  238. let img = new Image()
  239. img.src = this.rotationImg[0].url
  240. const vm = this
  241. img.onload = function() {
  242. vm.$set(vm.imgInfo, 'width', img.width)
  243. vm.$set(vm.imgInfo, 'height', img.height)
  244. if (vm.imgInfo.width > vm.imgInfo.height) {
  245. vm.sizePic = 'width'
  246. } else {
  247. vm.sizePic = 'height'
  248. }
  249. }
  250. })
  251. },
  252. //原理图没图片不显示tab 因为供电和燃气系统没有tab所以分开判断
  253. //这个方法是判断有tab的count>0的时候显示tab
  254. isShowTab() {
  255. let data = {
  256. plazaId: this.$store.state.plazaId,
  257. major: this.systemName.slice(0, 2)
  258. }
  259. let postParams = []
  260. if (this.dialogInfo.children.length == 0) {
  261. postParams.push({
  262. params: {
  263. typecode: this.dialogInfo.param.type_code,
  264. system: this.smsxt,
  265. module: '1002'
  266. },
  267. tableName: 'glsms_proimgup'
  268. })
  269. } else {
  270. this.dialogInfo.children.forEach(el => {
  271. postParams.push({
  272. params: {
  273. typecode: el.param.type_code,
  274. system: this.smsxt,
  275. module: '1002'
  276. },
  277. tableName: 'glsms_proimgup'
  278. })
  279. })
  280. }
  281. queryTab({ data, postParams }).then(res => {
  282. this.tabCount = []
  283. let data = res.data.data || []
  284. data.forEach(el => {
  285. this.tabCount.push({
  286. count: el.count,
  287. system: el.params.system,
  288. typecode: el.params.typecode
  289. })
  290. })
  291. this.$emit('emitCount', this.tabCount)
  292. })
  293. },
  294. /**
  295. * 关闭弹窗,传回父组件,在父组件内 处理逻辑(关闭弹窗)
  296. */
  297. closeModal() {
  298. this.showFenbuPic = false
  299. this.$emit('closeModal', true)
  300. }
  301. }
  302. }
  303. </script>
  304. <style lang="less" scoped>
  305. .dialog-container {
  306. .title-name {
  307. font-size: 16px;
  308. padding-right: 6px;
  309. padding-left: 24px;
  310. color: #000;
  311. font-weight: bold;
  312. color: #fff;
  313. font-weight: normal;
  314. }
  315. }
  316. .top {
  317. width: 1366px;
  318. height: 1px;
  319. background: rgba(0, 0, 0, 0.06);
  320. margin-bottom: 20px;
  321. }
  322. </style>
  323. <style lang="less" >
  324. .dialog-container {
  325. .el-dialog__header {
  326. padding: 16px 24px;
  327. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  328. }
  329. .el-dialog__headerbtn .el-dialog__close {
  330. color: #fff;
  331. }
  332. .el-dialog__title {
  333. font-size: 16px;
  334. font-family: PingFangSC-Medium, PingFang SC;
  335. font-weight: 500;
  336. color: rgba(0, 0, 0, 0.85);
  337. line-height: 24px;
  338. }
  339. .el-dialog__body {
  340. padding: 0 24px;
  341. height: calc(100% - 57px);
  342. }
  343. .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
  344. .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  345. .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  346. .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  347. padding-left: 16px;
  348. }
  349. .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
  350. .el-tabs--bottom .el-tabs__item.is-top:last-child,
  351. .el-tabs--top .el-tabs__item.is-bottom:last-child,
  352. .el-tabs--top .el-tabs__item.is-top:last-child {
  353. padding-right: 16px;
  354. }
  355. .el-tabs__nav-wrap::after {
  356. height: 0;
  357. }
  358. .el-tabs {
  359. height: 100%;
  360. }
  361. .el-tabs__content {
  362. height: calc(100% - 45px);
  363. /deep/ .el-tab-pane > div {
  364. height: 100% !important;
  365. }
  366. }
  367. .is-active {
  368. color: #025baa !important;
  369. border-color: #025baa !important;
  370. }
  371. .el-tabs__item {
  372. padding: 5px 16px;
  373. height: 30px;
  374. line-height: 22px;
  375. font-size: 14px;
  376. font-family: MicrosoftYaHei;
  377. color: rgba(31, 36, 41, 1);
  378. border: 1px solid rgba(195, 199, 203, 1);
  379. }
  380. /deep/ .el-tabs__item:last-child {
  381. border-radius: 0px 4px 4px 0px;
  382. }
  383. /deep/ .el-tabs__item:nth-child(2) {
  384. border-radius: 4px 0px 0px 4px;
  385. }
  386. .el-tab-pane {
  387. height: 100% !important;
  388. }
  389. .el-tabs__active-bar {
  390. background-color: transparent !important;
  391. }
  392. //动画
  393. .el-dialog__wrapper {
  394. transition-duration: 0.3s;
  395. }
  396. .dialog-fade-enter-active {
  397. animation: none !important;
  398. }
  399. .dialog-fade-leave-active {
  400. transition-duration: 0.15s !important;
  401. animation: none !important;
  402. }
  403. .dialog-fade-enter-active .el-dialog,
  404. .dialog-fade-leave-active .el-dialog {
  405. animation-fill-mode: forwards;
  406. }
  407. .dialog-fade-enter-active .el-dialog {
  408. animation-duration: 0.3s;
  409. animation-name: anim-open;
  410. animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
  411. }
  412. .dialog-fade-leave-active .el-dialog {
  413. animation-duration: 0.3s;
  414. animation-name: anim-close;
  415. }
  416. @keyframes anim-open {
  417. 0% {
  418. opacity: 0;
  419. transform: scale3d(0, 0, 1);
  420. }
  421. 100% {
  422. opacity: 1;
  423. transform: scale3d(1, 1, 1);
  424. }
  425. }
  426. @keyframes anim-close {
  427. 0% {
  428. opacity: 1;
  429. }
  430. 100% {
  431. opacity: 0;
  432. transform: scale3d(0.5, 0.5, 1);
  433. }
  434. }
  435. }
  436. @media screen and (max-width: 1600px) {
  437. /*当屏幕尺寸小于1366px时,应用下面的CSS样式*/
  438. // .el-tabs,
  439. // .el-tabs__content {
  440. // height: 530px !important;
  441. // }
  442. }
  443. </style>