tableDisplay.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. <template>
  2. <div class="tableDisplay">
  3. <!-- <el-row :gutter="24">
  4. <el-col :span="18">
  5. 设备信息点
  6. <div class="grid-content bgc-white">
  7. <selectRadio :selectRadio="selectRadio"/>
  8. <el-row>
  9. :span的值可以根据条件改变 是一个24 or 两个 16:8
  10. <el-col :span="16">
  11. <exhibitionBaseInformation/>
  12. </el-col>
  13. <el-col :span="8">
  14. 能耗信息点
  15. </el-col>
  16. </el-row>
  17. </div>
  18. </el-col>
  19. <el-col :span="6">
  20. <div class="grid-content bgc-white">
  21. <exhibitionImage :exhibitionImage="exhibitionImage"/>
  22. </div>
  23. </el-col>
  24. </el-row> -->
  25. <div class="header">
  26. <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
  27. <span class="details-title"><b>设备本地名称-设备本地编码</b></span>
  28. </div>
  29. <div class="content">
  30. <el-row :gutter="24" class="mt-10">
  31. <el-col :span="18" class="border">
  32. <!-- 设备信息点-->
  33. <div class="grid-content bgc-white">
  34. <selectRadio :selectRadio="selectRadio"/>
  35. <exhibitionBaseInformation/>
  36. </div>
  37. </el-col>
  38. <el-col :span="6">
  39. <div class="grid-content bgc-white">
  40. <exhibitionImage :exhibitionImage="exhibitionImage"/>
  41. </div>
  42. </el-col>
  43. </el-row>
  44. </div>
  45. <div class="footer"></div>
  46. </div>
  47. </template>
  48. <script>
  49. import exhibitionBaseInformation from "./detail/exhibitionBaseInformation";
  50. import exhibitionFile from "./detail/exhibitionFile";
  51. import exhibitionImage from "./detail/exhibitionImage";
  52. import selectRadio from "./detail/selectRadio";
  53. export default {
  54. name: "tableDisplay",
  55. components: {exhibitionBaseInformation, exhibitionFile, exhibitionImage, selectRadio},
  56. data() {
  57. return {
  58. selectRadio: {
  59. information: '设备信息点',
  60. radioList: [
  61. {
  62. value: '显示需采集信息点',
  63. label: '1'
  64. },
  65. {
  66. value: '显示需采集信息点',
  67. label: '2'
  68. },
  69. {
  70. value: '显示需采集信息点',
  71. label: '3'
  72. }
  73. ]
  74. },
  75. exhibitionBaseInformation: {
  76. //产品说所有信息的key和value是动态生成的
  77. base: {
  78. baseInformation: '基本信息',
  79. list: [
  80. {
  81. text: '设备本地编码:',
  82. val: '123--22:'
  83. },
  84. {
  85. text: '设备二维码图片:',
  86. val: '2:'
  87. },
  88. ]
  89. },
  90. manufacture: {
  91. manufacturerParameter: '台账参数 / 设备厂家',
  92. },
  93. supplier: {
  94. supplierParameters: '台账参数 / 供应购买'
  95. }
  96. },
  97. exhibitionFile: {},
  98. exhibitionImage: {
  99. title: '图片'
  100. }
  101. }
  102. },
  103. created() {
  104. // 疑问?
  105. this.$store.dispatch('setBreadcrumb', [{
  106. label: '台账管理',
  107. path: '/relation/data'
  108. }, {
  109. label: ' 资产台账 ',
  110. path: '/relation/data'
  111. }, {
  112. label: '资产详情'
  113. }])
  114. }
  115. }
  116. </script>
  117. <style scoped lang="less">
  118. .tableDisplay {
  119. .header {
  120. padding-bottom: 10px;
  121. .details-title {
  122. color: #333;
  123. font-size: 16px;
  124. margin-left: 20px;
  125. line-height: 32px;
  126. }
  127. }
  128. .content {
  129. box-sizing: border-box;
  130. border: 1px solid #ccc;
  131. height: calc(100% - 82px);
  132. .border {
  133. }
  134. .bgc-white {
  135. background: #fff;
  136. }
  137. .mt-10 {
  138. margin-top: 10px;
  139. }
  140. }
  141. .footer {
  142. height: 40px;
  143. }
  144. }
  145. </style>