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