eqDialog.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. <template>
  2. <!-- 设备设施的三级路由的tabs -->
  3. <div class='dialog-container'>
  4. <el-dialog :title='`${systemName}-${dialogInfo.label}`' :visible.sync='visible' :fullscreen='true'>
  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. <img v-if='dialogInfo.id.slice(2,4)!="QD" && dialogInfo.id.slice(2,4)!="YL"' src='../../assets/imgs/zy1.png' @click='visibalBox' alt />
  9. </div>
  10. <!-- 没有tab的页面 -->
  11. <div v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length==0'>
  12. <!-- 原理图 -->
  13. <div v-if='dialogInfo.id.slice(2,4)=="YL"' style='width:100%;height:600px;overflow:hidden'>
  14. <rotation :rotationImg='rotationImg'></rotation>
  15. </div>
  16. <!-- 土建系统主要材料清单 -->
  17. <tj-table v-else-if='dialogInfo.id.slice(0,4)=="TJQD"' :param='param'></tj-table>
  18. <!-- 主要设备清单 标准设备表格 -->
  19. <standTable v-else-if='dialogInfo.id.slice(2,4)=="QD"' :param='param' :major='dialogInfo.id'></standTable>
  20. <!-- 电井商铺范围清单 -->
  21. <djsp-table v-else-if='dialogInfo.id.slice(0,4)=="GJSP"'></djsp-table>
  22. <!-- 查看图纸 -->
  23. <look-page v-else-if='dialogInfo.id.slice(2,4)=="TZ"' param major></look-page>
  24. </div>
  25. <!-- 有tab的页面 -->
  26. <div v-else>
  27. <el-tabs v-model='activeName' @tab-click='handleClick' v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length>0'>
  28. <el-tab-pane
  29. v-for='(value,index) in dialogInfo.children'
  30. :key='"u"+index'
  31. :label='`${value.label}`'
  32. :name='`${value.param.tab_code}`'
  33. >
  34. <!-- 有tab的原理图 -->
  35. <div v-if='value.id.slice(2,4)=="YL"' style='width:100%;height:600px;overflow:hidden'>
  36. <rotation :rotationImg='rotationImg'></rotation>
  37. </div>
  38. <!-- 主要设备清单 标准设备表格加tab -->
  39. <tableList v-else-if='value.id.slice(0,4)=="RDQD"' :param='param' ref='list1' major='弱电'></tableList>
  40. <tableList v-else-if='value.id.slice(0,4)=="NTQD"' :param='param' ref='list2' major='暖通'></tableList>
  41. <!-- 维保表格 -->
  42. <wb-table v-else-if='value.id.slice(2,4)=="WB"' :smsxt='smsxt'></wb-table>
  43. <!-- 维修的表格 -->
  44. <wx-table v-else-if='value.id.slice(2,4)=="WX"' :smsxt='smsxt'></wx-table>
  45. <!-- 专维 -->
  46. <zw-table v-else-if='value.id.slice(2,4)=="ZW"' :smsxt='smsxt' :major='dialogInfo.id'></zw-table>
  47. <!-- 其他 -->
  48. <other-table v-else-if='value.id.slice(2,4)=="QT"' :smsxt='smsxt' :major='dialogInfo.id'></other-table>
  49. <!-- 建筑立面图 -->
  50. <tj-build-table v-else-if='value.id.slice(0,4)=="TJLM"'></tj-build-table>
  51. </el-tab-pane>
  52. </el-tabs>
  53. </div>
  54. </el-dialog>
  55. <!--记录表格 -->
  56. <record-dialog ref='Dialog'></record-dialog>
  57. </div>
  58. </template>
  59. <script>
  60. import tableList from './table/eqListTable'
  61. import tjTable from './table/tjTable'
  62. import wbTable from './table/wbTable'
  63. import zwTable from './table/zwTable'
  64. import lookPage from './table/lookPageTable'
  65. import standTable from './table/standTable'
  66. import otherTable from './table/otherTable'
  67. import wxTable from './table/wxTable'
  68. import recordDialog from './table/recordDialog'
  69. import djspTable from './table/djspTable'
  70. import { queryPic } from '@/api/public.js'
  71. export default {
  72. props: ['systemName', 'smsxt'],
  73. data() {
  74. return {
  75. activeName: '',
  76. visible: false,
  77. dialogInfo: {},
  78. param: '',
  79. rotationImg: [require('@/assets/imgs/eq.jpg'), require('@/assets/imgs/survey_pop2.png'), require('@/assets/imgs/survey_pop1.png')]
  80. }
  81. },
  82. mounted() {
  83. this.initImage()
  84. },
  85. components: { tableList, tjTable, wbTable, zwTable, lookPage, standTable, otherTable, wxTable, recordDialog, djspTable },
  86. methods: {
  87. showModal(item) {
  88. this.visible = true
  89. this.dialogInfo = item
  90. if (Object.keys(this.dialogInfo).length > 0 && this.dialogInfo.children.length > 0) {
  91. this.activeName = this.dialogInfo.children[0].param.tab_code
  92. } else {
  93. this.activeName = this.dialogInfo.param.tab_code
  94. }
  95. this.param = this.activeName
  96. },
  97. handleClick(tab) {
  98. if (this.param) {
  99. this.param = tab.name
  100. } else if (this.smsxt) {
  101. this.smsxt = tab.name
  102. }
  103. this.activeName = tab.name
  104. },
  105. visibalBox() {
  106. this.$refs.Dialog.open()
  107. },
  108. initImage() {
  109. let getParams = {
  110. data: { tyepcode: 8, plazaId: '1001145' },
  111. params: {}
  112. }
  113. queryPic(getParams).then(res => {
  114. console.log('resres', res)
  115. this.rotationImg = res.data
  116. })
  117. }
  118. }
  119. }
  120. </script>
  121. <style lang="less" scoped>
  122. .dialog-container {
  123. .title-name {
  124. font-size: 16px;
  125. padding-right: 6px;
  126. color: #000;
  127. font-weight: bold;
  128. }
  129. }
  130. .top {
  131. width: 1366px;
  132. height: 1px;
  133. background: rgba(0, 0, 0, 0.06);
  134. margin-bottom: 20px;
  135. }
  136. </style>
  137. <style lang="less" >
  138. .dialog-container {
  139. .el-dialog__header {
  140. padding: 16px 24px;
  141. }
  142. .el-dialog__title {
  143. font-size: 16px;
  144. font-family: PingFangSC-Medium, PingFang SC;
  145. font-weight: 500;
  146. color: rgba(0, 0, 0, 0.85);
  147. line-height: 24px;
  148. }
  149. .el-dialog__body {
  150. padding: 0 24px;
  151. height: 90%;
  152. }
  153. .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
  154. .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  155. .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  156. .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  157. padding-left: 16px;
  158. }
  159. .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
  160. .el-tabs--bottom .el-tabs__item.is-top:last-child,
  161. .el-tabs--top .el-tabs__item.is-bottom:last-child,
  162. .el-tabs--top .el-tabs__item.is-top:last-child {
  163. padding-right: 16px;
  164. }
  165. .el-tabs__nav-wrap::after {
  166. height: 0;
  167. }
  168. .el-tabs__item {
  169. padding: 5px 16px;
  170. height: 30px;
  171. line-height: 22px;
  172. font-size: 14px;
  173. font-family: MicrosoftYaHei;
  174. color: rgba(31, 36, 41, 1);
  175. border: 1px solid rgba(195, 199, 203, 1);
  176. }
  177. .el-tabs,
  178. .el-tabs__content {
  179. height: 700px;
  180. }
  181. .el-tabs__active-bar {
  182. background-color: transparent !important;
  183. }
  184. .is-active {
  185. color: #025baa;
  186. border-color: #025baa;
  187. }
  188. }
  189. </style>