evTwoTable.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <template>
  2. <el-table
  3. ref="multipleTable"
  4. class="expandTable"
  5. :data="dataList"
  6. style="width: 100%;z-index:1"
  7. :row-key="getRowKeys"
  8. :expand-row-keys="expands"
  9. >
  10. <el-table-column type="expand">
  11. <template slot-scope="props">
  12. <el-table :ref="`table${props.row.id}`" :data="props.row.children" style="width: 100%;" @selection-change="handleSelectionChange">
  13. <el-table-column type="selection" width="50" align="right"></el-table-column>
  14. <el-table-column prop label align="right" width="150">
  15. <template slot-scope="{row}">
  16. <img class="ex-img" v-if="row.isSatisfy==false" src="../../assets/warning.png" alt />
  17. <span class="ex-span">{{row.spaceLocalName}}</span>
  18. </template>
  19. </el-table-column>
  20. <el-table-column prop label align="right">
  21. <template slot-scope="{row}">
  22. <span>{{row.temperatureMin}}-{{row.temperatureMax}}</span>
  23. </template>
  24. </el-table-column>
  25. <el-table-column prop="meanTindoor" label align="right">
  26. <template slot-scope="{row}">{{(row.meanTindoor).toFixed(1)}}</template>
  27. </el-table-column>
  28. <el-table-column prop="tindoorOverrunDuration" label align="right"></el-table-column>
  29. <el-table-column prop="tindoorOverrunDegree" label align="right">
  30. <template slot-scope="{row}">{{(row.tindoorOverrunDegree).toFixed(1)}}</template>
  31. </el-table-column>
  32. <el-table-column prop="longestTindoorOverrunDuration" label align="right"></el-table-column>
  33. <el-table-column prop="temperatureDifferenceMax" label align="center">
  34. <template slot-scope="{row}">{{(row.temperatureDifferenceMax).toFixed(1)}}</template>
  35. </el-table-column>
  36. </el-table>
  37. </template>
  38. </el-table-column>
  39. <el-table-column prop="name" label align="right" width="50"></el-table-column>
  40. <el-table-column prop label="位置详情" align="right" width="100"></el-table-column>
  41. <el-table-column prop label="温度要求范围(℃)" align="right"></el-table-column>
  42. <el-table-column prop label="平均温度(℃)" align="right"></el-table-column>
  43. <el-table-column prop label="累计超限时长(分钟)" align="right"></el-table-column>
  44. <el-table-column prop label="平均超限温度(℃)" align="right"></el-table-column>
  45. <el-table-column prop label="连续超限最大时长(分钟)" align="right"></el-table-column>
  46. <el-table-column prop label="最大温差(℃)" align="center"></el-table-column>
  47. </el-table>
  48. </template>
  49. <script>
  50. import bus from '@/utils/bus.js'
  51. export default {
  52. data() {
  53. return {
  54. selected: [],
  55. expands: [],
  56. };
  57. },
  58. props: ["dataList"],
  59. computed: {
  60. },
  61. watch: {
  62. dataList(newVal, oldVal) {
  63. if(newVal) {
  64. this.$nextTick(() => this.doSelect())
  65. }
  66. }
  67. },
  68. mounted() {
  69. this.initExpand()
  70. },
  71. methods: {
  72. initExpand() {
  73. this.dataList.forEach(i => {
  74. if(i.children.some(c => c.isSatisfy == false)) this.expands.push(i.id)
  75. })
  76. },
  77. doSelect() {
  78. this.dataList.forEach(i => {
  79. i.children.forEach(row => {
  80. if(!row.isSatisfy){
  81. this.$refs[`table${i.id}`].toggleRowSelection(row)
  82. }
  83. })
  84. })
  85. },
  86. handleSelectionChange(val) {
  87. this.selected = val
  88. bus.$emit('drawLine',val)
  89. },
  90. getRowKeys(row) {
  91. return row.id;
  92. },
  93. }
  94. }
  95. </script>
  96. <style lang="scss" scoped>
  97. .expandTable {
  98. .ex-img {
  99. width: 22px;
  100. height: 22px;
  101. vertical-align: middle;
  102. }
  103. .ex-span {
  104. width: 50px;
  105. display: inline-block;
  106. text-align: left;
  107. }
  108. }
  109. </style>
  110. <style lang="scss">
  111. .expandTable {
  112. .el-table thead {
  113. display: none;
  114. }
  115. .el-table__expanded-cell {
  116. padding: 0;
  117. }
  118. }
  119. </style>