268 lines
9.9 KiB
Vue
268 lines
9.9 KiB
Vue
<template>
|
|
<div>
|
|
<!-- 过滤筛选: <el-input v-model="search" clearable size="small" style="width: 250px" placeholder="筛选数据"/> -->
|
|
<!-- <el-button @click="exportExcel" style="float:right;margin-bottom:10px" size="small" type="primary">导出Excel文件</el-button> -->
|
|
<!-- <el-button @click="exporeCSV(tables)" size="small" type="primary" style="float:right;margin-right:10px;margin-bottom:10px">导出CSV文件</el-button> -->
|
|
<!-- <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px" >
|
|
<el-table-column align="center" prop="name" label="区域" width="180"></el-table-column>
|
|
<el-table-column align="center" prop="lx" label="类型"></el-table-column>
|
|
<el-table-column align="center" prop="flx" label="分类型"></el-table-column>
|
|
<el-table-column align="center" prop="bdzgs" label="变电站个数"></el-table-column>
|
|
<el-table-column align="center" prop="zdgs" label="终端个数"></el-table-column>
|
|
<el-table-column align="center" prop="jcdgs" label="监测个数"></el-table-column>
|
|
:header-cell-style="{background:'#6d7f93',color:'white'}"
|
|
</el-table> -->
|
|
|
|
<el-table
|
|
class="xshou"
|
|
:data="ptableDate"
|
|
align="center"
|
|
border
|
|
:height="`${vth}`"
|
|
highlight-current-row
|
|
header-cell-class-name="table_header"
|
|
:style="`height:${vh}`"
|
|
:span-method="objectOneMethod"
|
|
>
|
|
<el-table-column width="80" align="center" show-overflow-tooltip prop="num" label="序号"></el-table-column>
|
|
<el-table-column align="center" show-overflow-tooltip prop="name" label="区域"></el-table-column>
|
|
<el-table-column align="center" show-overflow-tooltip prop="lx" label="类型"></el-table-column>
|
|
<el-table-column align="center" show-overflow-tooltip prop="flx" label="分类型">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.lx == '标准电压等级'">{{ scope.row.flx }}kV</span>
|
|
<span v-else>{{ scope.row.flx }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" show-overflow-tooltip prop="bdzgs" label="变电站个数(个)">
|
|
<template slot-scope="scope">
|
|
<span style="color: blue">{{ scope.row.bdzgs }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" show-overflow-tooltip prop="zdgs" label="终端个数(个)">
|
|
<template slot-scope="scope">
|
|
<span style="color: #08c0c0">{{ scope.row.zdgs }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" show-overflow-tooltip prop="jcdgs" label="监测点个数(个)">
|
|
<template slot-scope="scope">
|
|
<span style="color: rgb(8, 201, 8)">{{ scope.row.jcdgs }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapActions } from 'vuex'
|
|
import store from '@/store'
|
|
import defaultSettings from '@/settings'
|
|
import { getheight } from '../../assets/commjs/common'
|
|
import pagination from '../components/pagination/index'
|
|
import FileSaver from 'file-saver'
|
|
import XLSX from 'xlsx'
|
|
import json2csv from 'json2csv'
|
|
export default {
|
|
computed: {
|
|
settings() {
|
|
return this.$store.state.settings
|
|
},
|
|
...mapActions({
|
|
changeSetting: 'settings/changeSetting'
|
|
})
|
|
// 实时监听表格
|
|
// tables: function() {
|
|
// const search = this.search
|
|
// if (search) {
|
|
// return this.tableData.filter(dataNews => {
|
|
// return Object.keys(dataNews).some(key => {
|
|
// return String(dataNews[key]).toLowerCase().indexOf(search) > -1
|
|
// })
|
|
// })
|
|
// }
|
|
// return this.tableData
|
|
// }
|
|
},
|
|
data() {
|
|
return {
|
|
vh: null,
|
|
vth: null,
|
|
search: '',
|
|
typedata: '电网拓扑',
|
|
tableheight: undefined,
|
|
device: 1,
|
|
tableData: []
|
|
}
|
|
},
|
|
watch: {
|
|
classvalue: function (a, b) {
|
|
if (a == 'Power_Network') {
|
|
this.typedata = '电网拓扑'
|
|
} else if (a == 'Manufacturer') {
|
|
this.typedata = '终端厂家'
|
|
} else if (a == 'Voltage_Level') {
|
|
this.typedata = '电压等级'
|
|
} else if (a == 'Load_Type') {
|
|
this.typedata = '干扰源类型'
|
|
}
|
|
}
|
|
},
|
|
props: {
|
|
classvalue: {
|
|
type: String,
|
|
default: undefined
|
|
},
|
|
ptableDate: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
components: {
|
|
pagination
|
|
},
|
|
created() {},
|
|
mounted() {
|
|
//this.device=window.devicePixelRatio
|
|
|
|
this.setHeight()
|
|
window.addEventListener('resize', this.setHeight)
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener('resize', this.setHeight)
|
|
},
|
|
methods: {
|
|
setHeight() {
|
|
this.vh = window.sessionStorage.getItem('appheight') - 55 + 'px'
|
|
this.vth = window.sessionStorage.getItem('appheight') - 55
|
|
},
|
|
//判断计算合并单元格
|
|
objectOneMethod({ row, column, rowIndex, columnIndex }) {
|
|
if (columnIndex === 1) {
|
|
const _row = this.setTable(this.ptableDate).one[rowIndex]
|
|
const _col = _row > 0 ? 1 : 0
|
|
return {
|
|
rowspan: _row,
|
|
colspan: _col
|
|
}
|
|
}
|
|
if (columnIndex === 2) {
|
|
const _row = this.setTable(this.ptableDate).two[rowIndex]
|
|
const _col = _row > 0 ? 1 : 0
|
|
return {
|
|
rowspan: _row,
|
|
colspan: _col
|
|
}
|
|
}
|
|
},
|
|
//设置表格
|
|
setTable(tableData) {
|
|
let spanOneArr = [],
|
|
spanTwoArr = [],
|
|
concatOne = 0,
|
|
concatTwo = 0
|
|
tableData.forEach((item, index) => {
|
|
if (index === 0) {
|
|
spanOneArr.push(1)
|
|
spanTwoArr.push(1)
|
|
} else {
|
|
if (item.name === tableData[index - 1].name) {
|
|
//第一列需合并相同内容的判断条件
|
|
spanOneArr[concatOne] += 1
|
|
spanOneArr.push(0)
|
|
} else {
|
|
spanOneArr.push(1)
|
|
concatOne = index
|
|
}
|
|
if (item.lx === tableData[index - 1].lx) {
|
|
//第二列和需合并相同内容的判断条件
|
|
spanTwoArr[concatTwo] += 1
|
|
spanTwoArr.push(0)
|
|
} else {
|
|
spanTwoArr.push(1)
|
|
concatTwo = index
|
|
}
|
|
}
|
|
})
|
|
return {
|
|
one: spanOneArr,
|
|
two: spanTwoArr
|
|
}
|
|
},
|
|
// 判断是否IE浏览器
|
|
MyBrowserIsIE() {
|
|
let isIE = false
|
|
if (navigator.userAgent.indexOf('compatible') > -1 && navigator.userAgent.indexOf('MSIE') > -1) {
|
|
// ie浏览器
|
|
isIE = true
|
|
}
|
|
if (navigator.userAgent.indexOf('Trident') > -1) {
|
|
// edge 浏览器
|
|
isIE = true
|
|
}
|
|
return isIE
|
|
},
|
|
//创建a标签下载
|
|
createDownLoadClick(content, fileName) {
|
|
const link = document.createElement('a')
|
|
link.href = encodeURI(content)
|
|
link.download = fileName
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
document.body.removeChild(link)
|
|
},
|
|
exporeCSV(rows) {
|
|
try {
|
|
const result = json2csv.parse(rows, {
|
|
// fields: fields,
|
|
excelStrings: true
|
|
})
|
|
if (this.MyBrowserIsIE()) {
|
|
// IE10以及Edge浏览器
|
|
var BOM = '\uFEFF'
|
|
// 文件转Blob格式
|
|
var csvData = new Blob([BOM + result], { type: 'text/csv' })
|
|
navigator.msSaveBlob(csvData, `导出数据.csv`)
|
|
} else {
|
|
let csvContent = 'data:text/csv;charset=utf-8,\uFEFF' + result
|
|
// 非ie 浏览器
|
|
this.createDownLoadClick(csvContent, `导出数据.csv`)
|
|
}
|
|
} catch (err) {
|
|
alert(err)
|
|
}
|
|
},
|
|
exportExcel() {
|
|
/* generate workbook object from table */
|
|
let wb = XLSX.utils.table_to_book(document.querySelector('#rebateSetTable'))
|
|
/* get binary string as output */
|
|
let wbout = XLSX.write(wb, {
|
|
bookType: 'xlsx',
|
|
bookSST: true,
|
|
type: 'array'
|
|
})
|
|
try {
|
|
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '数据表.xlsx')
|
|
} catch (e) {
|
|
if (typeof console !== 'undefined') {
|
|
} // console.log(e, wbout);
|
|
}
|
|
return wbout
|
|
},
|
|
sortchange() {}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.xshou {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
// ::v-deep .el-table.el-table--enable-row-hover .el-table__body tr:hover > td {
|
|
// background: #ffffff00 !important;
|
|
// color: #000 !important;
|
|
// }
|
|
</style>
|