123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155 |
- <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' @selection-change='handleSelectionChange' style='width:100%;'>
- <el-table-column prop label align='right' min-width='100'></el-table-column>
- <el-table-column type='selection' width='50'></el-table-column>
- <el-table-column prop label align='center' width='250'>
- <template slot-scope='{row}'>
- <div>
- <!-- <div style='display:flex;border:1px solid green;text-align:center'> -->
- <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>
- </div>
- </template>
- </el-table-column>
- <el-table-column prop label min-width='130' align='center'>
- <template slot-scope='{row}'>
- <span>{{row.temperatureMin}}-{{row.temperatureMax}}</span>
- </template>
- </el-table-column>
- <el-table-column prop='meanTindoor' label min-width='130' align='center'>
- <template slot-scope='{row}'>{{(row.meanTindoor).toFixed(1)}}</template>
- </el-table-column>
- <el-table-column prop='tindoorOverrunDuration' label min-width='130' align='center'></el-table-column>
- <el-table-column prop='tindoorOverrunDegree' label min-width='130' align='center'>
- <template slot-scope='{row}'>{{(row.tindoorOverrunDegree).toFixed(1)}}</template>
- </el-table-column>
- <el-table-column prop='longestTindoorOverrunDuration' label min-width='180' align='center'></el-table-column>
- <el-table-column prop='temperatureDifferenceMax' label min-width='130' 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 min-width='100'></el-table-column>
- <el-table-column prop label='位置详情' width='250' align='center'></el-table-column>
- <el-table-column prop label='温度要求范围(℃)' min-width='130' align='center'></el-table-column>
- <el-table-column prop label='平均温度(℃)' min-width='130' align='center'></el-table-column>
- <el-table-column prop label='累计超限时长(分钟)' min-width='130' align='center'></el-table-column>
- <el-table-column prop label='平均超限温度(℃)' min-width='130' align='center'></el-table-column>
- <el-table-column prop label='连续超限最大时长(分钟)' min-width='180' align='center'></el-table-column>
- <el-table-column prop label='最大超限程度(℃)' min-width='130' align='center'></el-table-column>
- </el-table>
- </template>
- <script>
- import bus from '@/utils/bus.js'
- export default {
- data() {
- return {
- selected: [],
- expands: []
- }
- },
- props: ['dataList', 'value2'],
- computed: {},
- watch: {
- dataList(newVal, oldVal) {
- if (newVal) {
- this.$nextTick(() => this.doSelect())
- }
- }
- },
- mounted() {
- this.initExpand()
- this.$nextTick(() => this.doSelect())
- },
- methods: {
- expandChange(row, expandedRows) {
- if (expandedRows.length > 0) {
- this.$nextTick(() => this.doSelect())
- }
- },
- initExpand() {
- this.dataList.forEach(i => {
- if (this.value2) {
- if (i.children.some(c => c.isSatisfy == false)) {
- this.expands.push(i.id)
- }
- } else {
- this.expands.push(i.id)
- }
- // 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) {
- if (this.$refs[`table${i.id}`]) {
- this.$refs[`table${i.id}`].toggleRowSelection(row, true)
- }
- }
- })
- })
- },
- handleSelectionChange(val) {
- this.selected = []
- this.dataList.forEach(i => {
- i.children.forEach(row => {
- if (this.$refs[`table${i.id}`]) {
- this.selected = this.selected.concat(this.$refs[`table${i.id}`].selection)
- }
- //this.selected = this.selected.concat(this.$refs[`table${i.id}`].selection)
- })
- })
- let obj = {}
- let peon = this.selected.reduce((cur, next) => {
- obj[next.id] ? '' : (obj[next.id] = true && cur.push(next))
- return cur
- }, []) //设置cur默认类型为数组,并且初始值为空的数组
- bus.$emit('drawLine', peon)
- },
- getRowKeys(row) {
- return row.id
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .expandTable {
- .ex-img {
- width: 22px;
- height: 22px;
- vertical-align: middle;
- margin-right: 3px;
- }
- .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;
- }
- }
- </style>
|