193 lines
7.7 KiB
Vue
193 lines
7.7 KiB
Vue
<template>
|
|
<div>
|
|
<u-table
|
|
stripe
|
|
ref="plTreeTable"
|
|
header-cell-class-name="table_header"
|
|
fixed-columns-roll
|
|
:data="tableData"
|
|
:row-height="rowHeight"
|
|
:height="vh"
|
|
:treeConfig="{
|
|
children: 'children',
|
|
iconClose: 'el-icon-arrow-right',
|
|
iconOpen: 'el-icon-arrow-down',
|
|
expandAll: true
|
|
}"
|
|
v-loading="loading"
|
|
element-loading-text="数据加载中"
|
|
@toggle-tree-expand="toggleTreeExpand"
|
|
use-virtual
|
|
row-id="id"
|
|
border
|
|
>
|
|
<!-- beautify-table
|
|
header-drag-style -->
|
|
<!--u-table大数据表格 你需要在列上指定某个列显示展开收起 treeNode属性-->
|
|
<u-table-column
|
|
prop="name"
|
|
:label="typedata"
|
|
:treeNode="true"
|
|
min-width="250"
|
|
:showOverflowTooltip="true"
|
|
:show-overflow-tooltip="true"
|
|
></u-table-column>
|
|
<u-table-column min-width="150" align="center" prop="voltageLevel" v-if="dydj" label="电压等级">
|
|
<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="150" 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='150' align="center" prop="name" :show-overflow-tooltip='true' label="名称" >
|
|
|
|
</u-table-column> -->
|
|
<u-table-column min-width="150" 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="name" :show-overflow-tooltip="true" label="终端名称">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.name == null" type="primary" size="small">/</span>
|
|
<span v-if="scope.row.name != null" type="primary" size="small">{{ scope.row.name }}</span>
|
|
</template>
|
|
</u-table-column>
|
|
<u-table-column min-width="150" align="center" prop="comFlag" label="通讯状态">
|
|
<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: #ff3300; color: #fff"
|
|
size="small"
|
|
>
|
|
中断
|
|
</el-tag>
|
|
<el-tag
|
|
type="primary"
|
|
v-if="scope.row.comFlag == 1"
|
|
style="background: #009933; color: #fff"
|
|
size="small"
|
|
>
|
|
正常
|
|
</el-tag>
|
|
</template>
|
|
</u-table-column>
|
|
<u-table-column
|
|
min-width="150"
|
|
align="center"
|
|
prop="updateTime"
|
|
label="最新数据时间"
|
|
:show-overflow-tooltip="true"
|
|
>
|
|
<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="150" align="center" prop="onlineRate" label="在线率(%)">
|
|
<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="150" align="center" prop="valueOver" label="评估">
|
|
<template slot-scope="scope">
|
|
<el-tag
|
|
v-if="scope.row.valueOver == 0"
|
|
type="primary"
|
|
size="small"
|
|
style="background: #ff3300; color: #fff"
|
|
>
|
|
不合格
|
|
</el-tag>
|
|
<el-tag
|
|
v-if="scope.row.valueOver == 1"
|
|
type="primary"
|
|
size="small"
|
|
style="background: #009933; color: #fff"
|
|
>
|
|
合格
|
|
</el-tag>
|
|
<!-- <el-tag v-if="(scope.row.onlineRate>=90)" type="primary" size="small" style="background:#009933;color: #fff;">优秀</el-tag>
|
|
<el-tag v-if="(60<=scope.row.onlineRate && scope.row.onlineRate<90)" type="primary" size="small" style="background:#ff9933;color: #fff;">合格</el-tag>
|
|
<el-tag v-if="(scope.row.onlineRate<60)" type="primary" size="small" style="background:#FF3300;color: #fff;">不合格</el-tag> -->
|
|
</template>
|
|
</u-table-column>
|
|
</u-table>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
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 = '终端厂家'
|
|
}
|
|
},
|
|
tableData: function (a, b) {
|
|
if (a.length > 0) {
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
rowHeight: 20,
|
|
vh: null,
|
|
dydj: false,
|
|
typedata: '电网拓扑'
|
|
}
|
|
},
|
|
created() {},
|
|
mounted() {
|
|
this.setHeight()
|
|
window.addEventListener('resize', this.setHeight)
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener('resize', this.setHeight)
|
|
},
|
|
methods: {
|
|
setHeight() {
|
|
this.vth = window.sessionStorage.getItem('appheight') - 118
|
|
this.vh = window.sessionStorage.getItem('appheight') - 118 + 'px'
|
|
},
|
|
toggleTreeExpand() {}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
@import url('../../styles/comStyle.less');
|
|
</style>
|
|
<style lang="scss" scoped></style>
|