eqDialog.vue 16 KB

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