|
@@ -1,130 +1,128 @@
|
|
|
<template>
|
|
|
-<!-- 使用tree-props 防止递归 -->
|
|
|
- <el-table
|
|
|
- ref="multipleTable"
|
|
|
- class="expandTable"
|
|
|
- :data="dataList"
|
|
|
- style="width: 100%;z-index:1"
|
|
|
- :row-key="getRowKeys"
|
|
|
- :expand-row-keys="expands"
|
|
|
- :tree-props="{children:'children1', hasChildren: 'hasChildren1'}"
|
|
|
- @expand-change='expandChange'
|
|
|
- >
|
|
|
- <el-table-column type="expand">
|
|
|
- <template slot-scope="props">
|
|
|
- <el-table :ref="`table${props.row.id}`" :data="props.row.children" style="width: 100%;" @selection-change="handleSelectionChange">
|
|
|
- <el-table-column type="selection" width="50" align="right"></el-table-column>
|
|
|
- <el-table-column prop label align="right" width="150">
|
|
|
- <template slot-scope="{row}">
|
|
|
- <img class="ex-img" v-if="row.isSatisfy==false" src="../../assets/warning.png" alt />
|
|
|
- <span class="ex-span">{{row.spaceLocalName}}</span>
|
|
|
+ <!-- 使用tree-props 防止递归 -->
|
|
|
+ <el-table
|
|
|
+ ref='multipleTable'
|
|
|
+ class='expandTable'
|
|
|
+ :data='dataList'
|
|
|
+ style='width: 100%;z-index:1'
|
|
|
+ :row-key='getRowKeys'
|
|
|
+ :expand-row-keys='expands'
|
|
|
+ :tree-props='{children:"children1", hasChildren: "hasChildren1"}'
|
|
|
+ @expand-change='expandChange'
|
|
|
+ >
|
|
|
+ <el-table-column type='expand'>
|
|
|
+ <template slot-scope='props'>
|
|
|
+ <el-table :ref='`table${props.row.id}`' :data='props.row.children' style='width: 100%;' @selection-change='handleSelectionChange'>
|
|
|
+ <el-table-column type='selection' width='50' align='center'></el-table-column>
|
|
|
+ <el-table-column prop label align='right'>
|
|
|
+ <template slot-scope='{row}'>
|
|
|
+ <img class='ex-img' v-if='row.isSatisfy==false' src='../../assets/warning.png' alt />
|
|
|
+ <span class='ex-span' style='width:180px;display:inline-block'>{{row.spaceLocalName}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop label align='right'>
|
|
|
+ <template slot-scope='{row}'>
|
|
|
+ <span>{{row.temperatureMin}}-{{row.temperatureMax}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop='meanTindoor' label align='right'>
|
|
|
+ <template slot-scope='{row}'>{{(row.meanTindoor).toFixed(1)}}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop='tindoorOverrunDuration' label align='center'></el-table-column>
|
|
|
+ <el-table-column prop='tindoorOverrunDegree' label align='center'>
|
|
|
+ <template slot-scope='{row}'>{{(row.tindoorOverrunDegree).toFixed(1)}}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop='longestTindoorOverrunDuration' label align='center'></el-table-column>
|
|
|
+ <el-table-column prop='temperatureDifferenceMax' label align='center'>
|
|
|
+ <template slot-scope='{row}'>{{(row.temperatureDifferenceMax).toFixed(1)}}</template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop label align="right">
|
|
|
- <template slot-scope="{row}">
|
|
|
- <span>{{row.temperatureMin}}-{{row.temperatureMax}}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="meanTindoor" label align="right">
|
|
|
- <template slot-scope="{row}">{{(row.meanTindoor).toFixed(1)}}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="tindoorOverrunDuration" label align="right"></el-table-column>
|
|
|
- <el-table-column prop="tindoorOverrunDegree" label align="right">
|
|
|
- <template slot-scope="{row}">{{(row.tindoorOverrunDegree).toFixed(1)}}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="longestTindoorOverrunDuration" label align="right"></el-table-column>
|
|
|
- <el-table-column prop="temperatureDifferenceMax" label align="center">
|
|
|
- <template slot-scope="{row}">{{(row.temperatureDifferenceMax).toFixed(1)}}</template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="name" label align="right" width="50"></el-table-column>
|
|
|
- <el-table-column prop label="位置详情" align="right" width="100"></el-table-column>
|
|
|
- <el-table-column prop label="温度要求范围(℃)" align="right"></el-table-column>
|
|
|
- <el-table-column prop label="平均温度(℃)" align="right"></el-table-column>
|
|
|
- <el-table-column prop label="累计超限时长(分钟)" align="right"></el-table-column>
|
|
|
- <el-table-column prop label="平均超限温度(℃)" align="right"></el-table-column>
|
|
|
- <el-table-column prop label="连续超限最大时长(分钟)" align="right"></el-table-column>
|
|
|
- <el-table-column prop label="最大温差(℃)" align="center"></el-table-column>
|
|
|
- </el-table>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop='name' label align='right' width='50'></el-table-column>
|
|
|
+ <el-table-column prop label='位置详情' align='right'></el-table-column>
|
|
|
+ <el-table-column prop label='温度要求范围(℃)' align='right'></el-table-column>
|
|
|
+ <el-table-column prop label='平均温度(℃)' align='right'></el-table-column>
|
|
|
+ <el-table-column prop label='累计超限时长(分钟)' align='right'></el-table-column>
|
|
|
+ <el-table-column prop label='平均超限温度(℃)' align='right'></el-table-column>
|
|
|
+ <el-table-column prop label='连续超限最大时长(分钟)' align='right' min-width='120'></el-table-column>
|
|
|
+ <el-table-column prop label='最大温差(℃)' align='center'></el-table-column>
|
|
|
+ </el-table>
|
|
|
</template>
|
|
|
<script>
|
|
|
import bus from '@/utils/bus.js'
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- selected: [],
|
|
|
- expands: [],
|
|
|
- };
|
|
|
- },
|
|
|
- props: ["dataList"],
|
|
|
- computed: {
|
|
|
- },
|
|
|
- watch: {
|
|
|
- dataList(newVal, oldVal) {
|
|
|
- if(newVal) {
|
|
|
- this.$nextTick(() => this.doSelect())
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.initExpand()
|
|
|
- this.$nextTick(() => this.doSelect())
|
|
|
- },
|
|
|
- methods: {
|
|
|
- expandChange(row,expandedRows){
|
|
|
- console.log(row,expandedRows)
|
|
|
- if(expandedRows.length > 0){
|
|
|
- this.$nextTick(() => this.doSelect())
|
|
|
- }
|
|
|
- },
|
|
|
- initExpand() {
|
|
|
- this.dataList.forEach(i => {
|
|
|
- if(i.children.some(c => c.isSatisfy == false)) this.expands.push(i.id)
|
|
|
- })
|
|
|
- },
|
|
|
- doSelect() {
|
|
|
- this.dataList.forEach(i => {
|
|
|
- i.children.forEach(row => {
|
|
|
- if(!row.isSatisfy){
|
|
|
- this.$refs[`table${i.id}`].toggleRowSelection(row)
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- })
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ selected: [],
|
|
|
+ expands: []
|
|
|
+ }
|
|
|
},
|
|
|
- handleSelectionChange(val) {
|
|
|
- this.selected = val
|
|
|
- bus.$emit('drawLine',val)
|
|
|
+ props: ['dataList'],
|
|
|
+ computed: {},
|
|
|
+ watch: {
|
|
|
+ dataList(newVal, oldVal) {
|
|
|
+ if (newVal) {
|
|
|
+ this.$nextTick(() => this.doSelect())
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- getRowKeys(row) {
|
|
|
- return row.id;
|
|
|
+ mounted() {
|
|
|
+ this.initExpand()
|
|
|
+ this.$nextTick(() => this.doSelect())
|
|
|
},
|
|
|
- }
|
|
|
+ methods: {
|
|
|
+ expandChange(row, expandedRows) {
|
|
|
+ console.log(row, expandedRows)
|
|
|
+ if (expandedRows.length > 0) {
|
|
|
+ this.$nextTick(() => this.doSelect())
|
|
|
+ }
|
|
|
+ },
|
|
|
+ initExpand() {
|
|
|
+ this.dataList.forEach(i => {
|
|
|
+ if (i.children.some(c => c.isSatisfy == false)) this.expands.push(i.id)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ doSelect() {
|
|
|
+ this.dataList.forEach(i => {
|
|
|
+ i.children.forEach(row => {
|
|
|
+ if (!row.isSatisfy) {
|
|
|
+ this.$refs[`table${i.id}`].toggleRowSelection(row)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ this.selected = val
|
|
|
+ bus.$emit('drawLine', val)
|
|
|
+ },
|
|
|
+ getRowKeys(row) {
|
|
|
+ return row.id
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.expandTable {
|
|
|
- .ex-img {
|
|
|
- width: 22px;
|
|
|
- height: 22px;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- .ex-span {
|
|
|
- width: 50px;
|
|
|
- display: inline-block;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
+ .ex-img {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .ex-span {
|
|
|
+ width: 50px;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
.expandTable {
|
|
|
- .el-table thead {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .el-table__expanded-cell {
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
+ .el-table thead {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .el-table__expanded-cell {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|