evTwoTable.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <template>
  2. <!-- 使用tree-props 防止递归 -->
  3. <el-table
  4. ref='multipleTable'
  5. class='expandTable'
  6. :data='dataList'
  7. style='width: 100%;z-index:1'
  8. :row-key='getRowKeys'
  9. :expand-row-keys='expands'
  10. :tree-props='{children:"children1", hasChildren: "hasChildren1"}'
  11. @expand-change='expandChange'
  12. >
  13. <el-table-column type='expand'>
  14. <template slot-scope='props'>
  15. <el-table :ref='`table${props.row.id}`' :data='props.row.children' @selection-change='handleSelectionChange' style='width:100%;'>
  16. <el-table-column prop label align='right' min-width='100'></el-table-column>
  17. <el-table-column type='selection' width='50'></el-table-column>
  18. <el-table-column prop label align='center' width='250'>
  19. <template slot-scope='{row}'>
  20. <div>
  21. <!-- <div style='display:flex;border:1px solid green;text-align:center'> -->
  22. <img class='ex-img' v-if='row.isSatisfy==false' src='../../assets/warning.png' alt />
  23. <span class='ex-span' style='width:180px;display:inline-block'>{{row.spaceLocalName}}</span>
  24. </div>
  25. </template>
  26. </el-table-column>
  27. <el-table-column prop label min-width='130' align='center'>
  28. <template slot-scope='{row}'>
  29. <span>{{row.temperatureMin}}-{{row.temperatureMax}}</span>
  30. </template>
  31. </el-table-column>
  32. <el-table-column prop='meanTindoor' label min-width='130' align='center'>
  33. <template slot-scope='{row}'>{{(row.meanTindoor).toFixed(1)}}</template>
  34. </el-table-column>
  35. <el-table-column prop='tindoorOverrunDuration' label min-width='130' align='center'></el-table-column>
  36. <el-table-column prop='tindoorOverrunDegree' label min-width='130' align='center'>
  37. <template slot-scope='{row}'>{{(row.tindoorOverrunDegree).toFixed(1)}}</template>
  38. </el-table-column>
  39. <el-table-column prop='longestTindoorOverrunDuration' label min-width='180' align='center'></el-table-column>
  40. <el-table-column prop='temperatureDifferenceMax' label min-width='130' align='center'>
  41. <template slot-scope='{row}'>{{(row.temperatureDifferenceMax).toFixed(1)}}</template>
  42. </el-table-column>
  43. </el-table>
  44. </template>
  45. </el-table-column>
  46. <el-table-column prop='name' label min-width='100'></el-table-column>
  47. <el-table-column prop label='位置详情' width='250' align='center'></el-table-column>
  48. <el-table-column prop label='温度要求范围(℃)' min-width='130' align='center'></el-table-column>
  49. <el-table-column prop label='平均温度(℃)' min-width='130' align='center'></el-table-column>
  50. <el-table-column prop label='累计超限时长(分钟)' min-width='130' align='center'></el-table-column>
  51. <el-table-column prop label='平均超限温度(℃)' min-width='130' align='center'></el-table-column>
  52. <el-table-column prop label='连续超限最大时长(分钟)' min-width='180' align='center'></el-table-column>
  53. <el-table-column prop label='最大超限程度(℃)' min-width='130' align='center'></el-table-column>
  54. </el-table>
  55. </template>
  56. <script>
  57. import bus from '@/utils/bus.js'
  58. export default {
  59. data() {
  60. return {
  61. selected: [],
  62. expands: []
  63. }
  64. },
  65. props: ['dataList', 'value2'],
  66. computed: {},
  67. watch: {
  68. dataList(newVal, oldVal) {
  69. if (newVal) {
  70. this.$nextTick(() => this.doSelect())
  71. }
  72. }
  73. },
  74. mounted() {
  75. this.initExpand()
  76. this.$nextTick(() => this.doSelect())
  77. },
  78. methods: {
  79. expandChange(row, expandedRows) {
  80. if (expandedRows.length > 0) {
  81. this.$nextTick(() => this.doSelect())
  82. }
  83. },
  84. initExpand() {
  85. this.dataList.forEach(i => {
  86. if (this.value2) {
  87. if (i.children.some(c => c.isSatisfy == false)) {
  88. this.expands.push(i.id)
  89. }
  90. } else {
  91. this.expands.push(i.id)
  92. }
  93. // if (i.children.some(c => c.isSatisfy == false)) this.expands.push(i.id)
  94. })
  95. },
  96. doSelect() {
  97. this.dataList.forEach(i => {
  98. i.children.forEach(row => {
  99. if (!row.isSatisfy) {
  100. if (this.$refs[`table${i.id}`]) {
  101. this.$refs[`table${i.id}`].toggleRowSelection(row, true)
  102. }
  103. }
  104. })
  105. })
  106. },
  107. handleSelectionChange(val) {
  108. this.selected = []
  109. this.dataList.forEach(i => {
  110. i.children.forEach(row => {
  111. if (this.$refs[`table${i.id}`]) {
  112. this.selected = this.selected.concat(this.$refs[`table${i.id}`].selection)
  113. }
  114. //this.selected = this.selected.concat(this.$refs[`table${i.id}`].selection)
  115. })
  116. })
  117. let obj = {}
  118. let peon = this.selected.reduce((cur, next) => {
  119. obj[next.id] ? '' : (obj[next.id] = true && cur.push(next))
  120. return cur
  121. }, []) //设置cur默认类型为数组,并且初始值为空的数组
  122. bus.$emit('drawLine', peon)
  123. },
  124. getRowKeys(row) {
  125. return row.id
  126. }
  127. }
  128. }
  129. </script>
  130. <style lang="scss" scoped>
  131. .expandTable {
  132. .ex-img {
  133. width: 22px;
  134. height: 22px;
  135. vertical-align: middle;
  136. margin-right: 3px;
  137. }
  138. .ex-span {
  139. width: 50px;
  140. display: inline-block;
  141. text-align: left;
  142. }
  143. }
  144. </style>
  145. <style lang="scss">
  146. .expandTable {
  147. .el-table thead {
  148. display: none;
  149. }
  150. .el-table__expanded-cell {
  151. padding: 0;
  152. }
  153. }
  154. </style>