378 lines
14 KiB
Vue
378 lines
14 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-select
|
||
|
|
v-show="false"
|
||
|
|
v-model="ExpandedNum"
|
||
|
|
@change="handleExpandNumChange"
|
||
|
|
placeholder="选择展开级别"
|
||
|
|
size="mini"
|
||
|
|
style="width: 100px; left: 0px"
|
||
|
|
>
|
||
|
|
<el-option label="不展开" :value="0"></el-option>
|
||
|
|
<el-option label="展开1" :value="1"></el-option>
|
||
|
|
<el-option label="展开2" :value="2"></el-option>
|
||
|
|
<el-option label="展开3" :value="3"></el-option>
|
||
|
|
</el-select>
|
||
|
|
<u-table
|
||
|
|
stripe
|
||
|
|
class="xshou"
|
||
|
|
ref="plTreeTable"
|
||
|
|
header-cell-class-name="table_header"
|
||
|
|
fixed-columns-roll
|
||
|
|
:data="tableData"
|
||
|
|
:row-height="rowHeight"
|
||
|
|
:height="vth"
|
||
|
|
:treeConfig="{
|
||
|
|
children: 'children',
|
||
|
|
iconClose: 'el-icon-arrow-right',
|
||
|
|
iconOpen: 'el-icon-arrow-down',
|
||
|
|
expandAll: true
|
||
|
|
}"
|
||
|
|
@toggle-tree-expand="toggleTreeExpand"
|
||
|
|
use-virtual
|
||
|
|
row-id="id"
|
||
|
|
border
|
||
|
|
>
|
||
|
|
<u-table-column
|
||
|
|
min-width="200"
|
||
|
|
prop="name"
|
||
|
|
:label="typedata"
|
||
|
|
:treeNode="true"
|
||
|
|
:showOverflowTooltip="true"
|
||
|
|
:show-overflow-tooltip="true"
|
||
|
|
></u-table-column>
|
||
|
|
<!-- <u-table-column min-width='150' align="center" prop="voltageLevel" v-if="dydj" label="电压等级" sortable >
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-if="(scope.row.voltageLevel==null)" type="primary" size="small">/</span>
|
||
|
|
<span v-if="(scope.row.voltageLevel!=null)" type="primary" size="small">{{scope.row.voltageLevel}}</span>
|
||
|
|
</template>
|
||
|
|
</u-table-column> -->
|
||
|
|
<u-table-column min-width="120" align="center" prop="ip" label="网络参数">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-if="scope.row.ip == null" type="primary" size="small">/</span>
|
||
|
|
<span v-if="scope.row.ip != null" type="primary" size="small">{{ scope.row.ip }}</span>
|
||
|
|
</template>
|
||
|
|
</u-table-column>
|
||
|
|
<u-table-column
|
||
|
|
min-width="80"
|
||
|
|
align="center"
|
||
|
|
prop="dataName"
|
||
|
|
:show-overflow-tooltip="true"
|
||
|
|
label="终端名称"
|
||
|
|
>
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-if="scope.row.dataName == null" type="primary" size="small">/</span>
|
||
|
|
<span v-if="scope.row.dataName != null" type="primary" size="small">{{ scope.row.dataName }}</span>
|
||
|
|
</template>
|
||
|
|
</u-table-column>
|
||
|
|
<u-table-column min-width="80" align="center" prop="manufacturer" label="厂家">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-if="scope.row.manufacturer == null" type="primary" size="small">/</span>
|
||
|
|
<span v-if="scope.row.manufacturer != null" type="primary" size="small">
|
||
|
|
{{ scope.row.manufacturer }}
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</u-table-column>
|
||
|
|
<!-- <u-table-column min-width='150' align="center" prop="deviceName" label="终端名称" sortable >
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-if="(scope.row.deviceName==null)" type="primary" size="small">/</span>
|
||
|
|
<span v-if="(scope.row.deviceName!=null)" type="primary" size="small">{{scope.row.deviceName}}</span>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
</u-table-column> -->
|
||
|
|
<u-table-column min-width="80" align="center" prop="state" label="通讯状态" sortable>
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span type="primary" v-if="scope.row.comFlag == null" size="small">/</span>
|
||
|
|
<el-tag
|
||
|
|
type="primary"
|
||
|
|
v-if="scope.row.comFlag == 0"
|
||
|
|
style="background: #cc0000; color: #fff"
|
||
|
|
size="small"
|
||
|
|
>
|
||
|
|
中断
|
||
|
|
</el-tag>
|
||
|
|
<el-tag
|
||
|
|
type="primary"
|
||
|
|
v-if="scope.row.comFlag == 1"
|
||
|
|
style="background: #339966; color: #fff"
|
||
|
|
size="small"
|
||
|
|
>
|
||
|
|
正常
|
||
|
|
</el-tag>
|
||
|
|
</template>
|
||
|
|
</u-table-column>
|
||
|
|
<u-table-column
|
||
|
|
min-width="120"
|
||
|
|
align="center"
|
||
|
|
prop="updateTime"
|
||
|
|
label="最新数据时间"
|
||
|
|
:show-overflow-tooltip="true"
|
||
|
|
sortable
|
||
|
|
>
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-if="scope.row.updateTime == null" type="primary" size="small">/</span>
|
||
|
|
<span v-if="scope.row.updateTime != null" type="primary" size="small">
|
||
|
|
{{ scope.row.updateTime }}
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</u-table-column>
|
||
|
|
<u-table-column min-width="80" align="center" prop="onlineRate" label="在线率(%)" sortable>
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-if="scope.row.onlineRate == 3.14159" type="primary" size="small">暂无数据</span>
|
||
|
|
<span v-if="scope.row.onlineRate != 3.14159" type="primary" size="small">
|
||
|
|
{{ scope.row.onlineRate.toFixed(2) }}
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</u-table-column>
|
||
|
|
<u-table-column min-width="80" align="center" prop="valueOver" label="评估" sortable>
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-tag
|
||
|
|
v-if="scope.row.onlineRate == 3.14159"
|
||
|
|
type="primary"
|
||
|
|
size="small"
|
||
|
|
style="background: #cccccc; color: #fff"
|
||
|
|
>
|
||
|
|
暂无评估
|
||
|
|
</el-tag>
|
||
|
|
<el-tag
|
||
|
|
v-if="scope.row.onlineRate >= 90 && scope.row.onlineRate != 3.14159"
|
||
|
|
type="primary"
|
||
|
|
size="small"
|
||
|
|
style="background: #339966; color: #fff"
|
||
|
|
>
|
||
|
|
优秀
|
||
|
|
</el-tag>
|
||
|
|
<el-tag
|
||
|
|
v-if="
|
||
|
|
60 <= scope.row.onlineRate && scope.row.onlineRate < 90 && scope.row.onlineRate != 3.14159
|
||
|
|
"
|
||
|
|
type="primary"
|
||
|
|
size="small"
|
||
|
|
style="background: #ffcc33; color: #fff"
|
||
|
|
>
|
||
|
|
合格
|
||
|
|
</el-tag>
|
||
|
|
<el-tag
|
||
|
|
v-if="scope.row.onlineRate < 60 && scope.row.onlineRate != 3.14159"
|
||
|
|
type="primary"
|
||
|
|
size="small"
|
||
|
|
style="background: #cc0000; color: #fff"
|
||
|
|
>
|
||
|
|
不合格
|
||
|
|
</el-tag>
|
||
|
|
</template>
|
||
|
|
</u-table-column>
|
||
|
|
</u-table>
|
||
|
|
<!-- <pagination :pageData="pageData" @changePageNum="changePageNum" @changePageSize="changePageSize"></pagination> -->
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
// 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: {
|
||
|
|
// 实时监听表格
|
||
|
|
// 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 {
|
||
|
|
vth: null,
|
||
|
|
rowKey: 0,
|
||
|
|
ExpandedNum: 3,
|
||
|
|
rowHeight: 20,
|
||
|
|
expandID: [],
|
||
|
|
search: '',
|
||
|
|
typedata: '电网拓扑',
|
||
|
|
dydj: false,
|
||
|
|
tableheight: undefined,
|
||
|
|
pageData: {
|
||
|
|
pageNum: 3,
|
||
|
|
pageSize: 15,
|
||
|
|
total: 100
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
classvalue: {
|
||
|
|
type: String,
|
||
|
|
default: undefined
|
||
|
|
},
|
||
|
|
tableData: {
|
||
|
|
type: Array,
|
||
|
|
default: []
|
||
|
|
},
|
||
|
|
loading: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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 = '干扰源类型'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tableData: function (a, b) {
|
||
|
|
if (a.length > 0) {
|
||
|
|
this.tableData = a
|
||
|
|
//this.expandID=[]
|
||
|
|
this.handleExpandNumChange()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
components: {
|
||
|
|
// pagination
|
||
|
|
},
|
||
|
|
created() {},
|
||
|
|
mounted() {
|
||
|
|
this.setHeight()
|
||
|
|
window.addEventListener('resize', this.setHeight)
|
||
|
|
this.handleExpandNumChange()
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
window.removeEventListener('resize', this.setHeight)
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
setHeight() {
|
||
|
|
this.vth = window.sessionStorage.getItem('appheight') - 115 + 'px'
|
||
|
|
},
|
||
|
|
//判断需要展开层级
|
||
|
|
handleExpandNumChange() {
|
||
|
|
if (this.ExpandedNum > 0) {
|
||
|
|
this.setExpandKeys(this.tableData)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//层级展开递归方法
|
||
|
|
setExpandKeys(dataList, n) {
|
||
|
|
if (!n) n = 1
|
||
|
|
for (let i = 0; i < dataList.length; i++) {
|
||
|
|
if (n <= this.ExpandedNum) {
|
||
|
|
//this.expandID=[]
|
||
|
|
this.expandID.push(`${dataList[i].id}`)
|
||
|
|
if (dataList[i].hasOwnProperty('children')) {
|
||
|
|
const children = dataList[i].children
|
||
|
|
this.setExpandKeys(children, n + 1)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
toggleTreeExpand() {},
|
||
|
|
// 判断是否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
|
||
|
|
},
|
||
|
|
changePageNum(data) {
|
||
|
|
this.pageData.pageNum = data
|
||
|
|
alert('父组件当前页' + this.pageData.pageNum)
|
||
|
|
},
|
||
|
|
changePageSize(data) {
|
||
|
|
this.pageData.pageSize = data
|
||
|
|
alert('父组件当前条数' + this.pageData.pageSize)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.xshou {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
// ::v-deep .u-table__body-wrapper {
|
||
|
|
// height: calc(100% - 30px) !important;
|
||
|
|
// //overflow-x: scroll !important;
|
||
|
|
// }
|
||
|
|
// ::v-deep.plTableBox
|
||
|
|
// .el-table--striped
|
||
|
|
// .el-table__body
|
||
|
|
// tr.el-table__row--striped
|
||
|
|
// td {
|
||
|
|
// background-color: $whirt !important;
|
||
|
|
// }
|
||
|
|
// ::v-deep.plTableBox
|
||
|
|
// .el-table--striped
|
||
|
|
// .el-table__body
|
||
|
|
// tr.el-table__row--striped.current-row
|
||
|
|
// td {
|
||
|
|
// background-color: $current-blue !important;
|
||
|
|
// color: #fff !important;
|
||
|
|
// }
|
||
|
|
</style>
|