eqDialog.vue 14 KB

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