提交
This commit is contained in:
267
src/views/components/terminalconsttable.vue
Normal file
267
src/views/components/terminalconsttable.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user