终端在线率调整
This commit is contained in:
zhujiyan
@@ -0,0 +1,248 @@
|
|||||||
|
<template>
|
||||||
|
<my-echart
|
||||||
|
v-loading="loading"
|
||||||
|
class="mt10"
|
||||||
|
:style="`height: calc(${tableStore.table.height} - 75px)`"
|
||||||
|
:options="options"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import Table from '@/components/table/index.vue'
|
||||||
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
|
import { useDictData } from '@/stores/dictData'
|
||||||
|
import * as echarts from 'echarts/core'
|
||||||
|
const dictData = useDictData()
|
||||||
|
const options = ref({})
|
||||||
|
|
||||||
|
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||||
|
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||||
|
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||||
|
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||||
|
|
||||||
|
const TableHeaderRef = ref()
|
||||||
|
const tableStoreParams: any = ref({})
|
||||||
|
const loading = ref(false)
|
||||||
|
const getTableStoreParams = async(val: any) => {
|
||||||
|
tableStoreParams.value = val
|
||||||
|
loading.value = true
|
||||||
|
setTimeout( () => {
|
||||||
|
tableStore.index()
|
||||||
|
}, 2000)
|
||||||
|
}
|
||||||
|
const tableStore = new TableStore({
|
||||||
|
url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',
|
||||||
|
showPage: false,
|
||||||
|
method: 'POST',
|
||||||
|
column: [],
|
||||||
|
beforeSearchFun: () => {
|
||||||
|
tableStore.table.params = tableStoreParams.value
|
||||||
|
},
|
||||||
|
loadCallback: () => {
|
||||||
|
// tableStore.table.data.type
|
||||||
|
let code = tableStore.table.params.statisticalType.code
|
||||||
|
let title = '',
|
||||||
|
titleX = ''
|
||||||
|
if (code == 'Power_Network') {
|
||||||
|
title = '区域'
|
||||||
|
titleX = '区域'
|
||||||
|
} else if (code == 'Manufacturer') {
|
||||||
|
title = '终端厂家'
|
||||||
|
titleX = '终端\n厂家'
|
||||||
|
} else if (code == 'Voltage_Level') {
|
||||||
|
title = '电压等级'
|
||||||
|
titleX = '电压\n等级'
|
||||||
|
} else if (code == 'Load_Type') {
|
||||||
|
title = '干扰源类型'
|
||||||
|
titleX = '干扰\n源类型'
|
||||||
|
} else if (code == 'Report_Type') {
|
||||||
|
title = '上报类型'
|
||||||
|
titleX = '上报\n类型'
|
||||||
|
}
|
||||||
|
options.value = {
|
||||||
|
title: {
|
||||||
|
text: title
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: true,
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {
|
||||||
|
// bottom: '10px',
|
||||||
|
show: true,
|
||||||
|
title: '保存'
|
||||||
|
// yAxisIndex: 'none'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
right: 0,
|
||||||
|
top: -5
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
formatter: function (params: any) {
|
||||||
|
var tips = ''
|
||||||
|
|
||||||
|
for (var i = 0; i < params.length; i++) {
|
||||||
|
if (params[i].value == 1) {
|
||||||
|
tips += params[i].name + '</br>'
|
||||||
|
tips += '在线率:暂无数据'
|
||||||
|
} else {
|
||||||
|
tips += params[i].name + '</br>'
|
||||||
|
tips += '在线率:' + params[i].value.toFixed(2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return tips
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '50px', // 等价于 y: '16%'
|
||||||
|
left: '10px',
|
||||||
|
right: '10px',
|
||||||
|
bottom: '50px'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
name: titleX,
|
||||||
|
data: tableStore.table.data.type
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: '%',
|
||||||
|
max: 100
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '在线率',
|
||||||
|
type: 'bar',
|
||||||
|
data: tableStore.table.data.single,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
// 随机显示
|
||||||
|
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||||
|
// 定制显示（按顺序）
|
||||||
|
color: function (params: any) {
|
||||||
|
if (params.value >= 90) {
|
||||||
|
return new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#339966'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
false
|
||||||
|
)
|
||||||
|
} else if (params.value >= 60 && params.value <= 90) {
|
||||||
|
return new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#FFCC33'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
false
|
||||||
|
)
|
||||||
|
} else if (params.value <= 60 && params.value > 1) {
|
||||||
|
return new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#CC0000'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
false
|
||||||
|
)
|
||||||
|
} else if (params.value > 0 && params.value <= 1) {
|
||||||
|
return new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ccc'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
false
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
markLine: {
|
||||||
|
silent: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
yAxis: 100,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#339966'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
//position: "middle",
|
||||||
|
formatter: '{b}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#339966'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
yAxis: 90,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#FFCC33'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
// position: "middle",
|
||||||
|
formatter: '{b}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#FFCC33'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
yAxis: 60,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#CC0000'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
//position: "middle",
|
||||||
|
formatter: '{b}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#CC0000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
|
||||||
|
// tableStore.table.params.monitorFlag = 2
|
||||||
|
// tableStore.table.params.powerFlag = 2
|
||||||
|
// tableStore.table.params.serverName = 'harmonicBoot'
|
||||||
|
// tableStore.table.params.deptIndex = '5699e5916a18a6381e1ac92da5bd2628'
|
||||||
|
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
|
onMounted(() => {})
|
||||||
|
defineExpose({ getTableStoreParams })
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
@@ -1,305 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- <TableHeader area datePicker ref="TableHeaderRef">
|
|
||||||
<template #select>
|
|
||||||
<el-form-item label="统计类型:">
|
|
||||||
<el-select
|
|
||||||
v-model="tableStore.table.params.statisticalType"
|
|
||||||
value-key="id"
|
|
||||||
placeholder="请选择统计类型"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in classificationData"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.name"
|
|
||||||
:value="item"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="电压等级:">
|
|
||||||
<el-select
|
|
||||||
v-model="tableStore.table.params.scale"
|
|
||||||
multiple
|
|
||||||
collapse-tags
|
|
||||||
clearable
|
|
||||||
value-key="id"
|
|
||||||
placeholder="请选择电压等级"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in voltageleveloption"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.name"
|
|
||||||
:value="item"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="终端厂家:">
|
|
||||||
<el-select
|
|
||||||
v-model="tableStore.table.params.manufacturer"
|
|
||||||
multiple
|
|
||||||
collapse-tags
|
|
||||||
clearable
|
|
||||||
value-key="id"
|
|
||||||
placeholder="请选择终端厂家"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in terminaloption"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.name"
|
|
||||||
:value="item"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="干扰源类型:">
|
|
||||||
<el-select
|
|
||||||
v-model="tableStore.table.params.loadType"
|
|
||||||
multiple
|
|
||||||
collapse-tags
|
|
||||||
clearable
|
|
||||||
value-key="id"
|
|
||||||
placeholder="请选择干扰源类型"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in interfereoption"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.name"
|
|
||||||
:value="item"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</template>
|
|
||||||
</TableHeader> -->
|
|
||||||
<my-echart
|
|
||||||
v-loading="loading"
|
|
||||||
class="mt10"
|
|
||||||
:style="`height: calc(${tableStore.table.height} - 75px)`"
|
|
||||||
:options="options"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted, provide, nextTick } from 'vue'
|
|
||||||
import TableStore from '@/utils/tableStore'
|
|
||||||
import Table from '@/components/table/index.vue'
|
|
||||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
|
||||||
import { useDictData } from '@/stores/dictData'
|
|
||||||
import * as echarts from 'echarts/core'
|
|
||||||
const dictData = useDictData()
|
|
||||||
const options = ref({})
|
|
||||||
|
|
||||||
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
|
||||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
|
||||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
|
||||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
|
||||||
|
|
||||||
const TableHeaderRef = ref()
|
|
||||||
const tableStoreParams: any = ref({})
|
|
||||||
const loading = ref(false)
|
|
||||||
const getTableStoreParams = async (val: any) => {
|
|
||||||
tableStoreParams.value = val
|
|
||||||
loading.value = true
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false
|
|
||||||
tableStore.index()
|
|
||||||
}, 2000)
|
|
||||||
}
|
|
||||||
const tableStore = new TableStore({
|
|
||||||
url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',
|
|
||||||
showPage: false,
|
|
||||||
method: 'POST',
|
|
||||||
column: [],
|
|
||||||
beforeSearchFun: () => {
|
|
||||||
tableStore.table.params = tableStoreParams.value
|
|
||||||
},
|
|
||||||
loadCallback: () => {
|
|
||||||
// tableStore.table.data.type
|
|
||||||
let code = tableStore.table.params.statisticalType.code
|
|
||||||
let title = '',
|
|
||||||
titleX = ''
|
|
||||||
if (code == 'Power_Network') {
|
|
||||||
title = '区域'
|
|
||||||
titleX = '区域'
|
|
||||||
} else if (code == 'Manufacturer') {
|
|
||||||
title = '终端厂家'
|
|
||||||
titleX = '终端\n厂家'
|
|
||||||
} else if (code == 'Voltage_Level') {
|
|
||||||
title = '电压等级'
|
|
||||||
titleX = '电压\n等级'
|
|
||||||
} else if (code == 'Load_Type') {
|
|
||||||
title = '干扰源类型'
|
|
||||||
titleX = '干扰\n源类型'
|
|
||||||
} else if (code == 'Report_Type') {
|
|
||||||
title = '上报类型'
|
|
||||||
titleX = '上报\n类型'
|
|
||||||
}
|
|
||||||
options.value = {
|
|
||||||
title: {
|
|
||||||
text: title
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
formatter: function (params: any) {
|
|
||||||
var tips = ''
|
|
||||||
|
|
||||||
for (var i = 0; i < params.length; i++) {
|
|
||||||
if (params[i].value == 1) {
|
|
||||||
tips += params[i].name + '</br>'
|
|
||||||
tips += '在线率:暂无数据'
|
|
||||||
} else {
|
|
||||||
tips += params[i].name + '</br>'
|
|
||||||
tips += '在线率:' + params[i].value.toFixed(2)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return tips
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: '50px',
|
|
||||||
right: '80px'
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
name: titleX,
|
|
||||||
data: tableStore.table.data.type
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
name: '%',
|
|
||||||
max: 100
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '在线率',
|
|
||||||
type: 'bar',
|
|
||||||
data: tableStore.table.data.single,
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
// 随机显示
|
|
||||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
|
||||||
|
|
||||||
// 定制显示（按顺序）
|
|
||||||
color: function (params: any) {
|
|
||||||
if (params.value >= 90) {
|
|
||||||
return new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: '#339966'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
false
|
|
||||||
)
|
|
||||||
} else if (params.value >= 60 && params.value <= 90) {
|
|
||||||
return new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: '#FFCC33'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
false
|
|
||||||
)
|
|
||||||
} else if (params.value <= 60 && params.value > 1) {
|
|
||||||
return new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: '#CC0000'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
false
|
|
||||||
)
|
|
||||||
} else if (params.value > 0 && params.value <= 1) {
|
|
||||||
return new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: '#ccc'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
false
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
markLine: {
|
|
||||||
silent: false,
|
|
||||||
symbol: 'circle',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: '',
|
|
||||||
yAxis: 100,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#339966'
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
//position: "middle",
|
|
||||||
formatter: '{b}',
|
|
||||||
textStyle: {
|
|
||||||
color: '#339966'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '',
|
|
||||||
yAxis: 90,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#FFCC33'
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
// position: "middle",
|
|
||||||
formatter: '{b}',
|
|
||||||
textStyle: {
|
|
||||||
color: '#FFCC33'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '',
|
|
||||||
yAxis: 60,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#CC0000'
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
//position: "middle",
|
|
||||||
formatter: '{b}',
|
|
||||||
textStyle: {
|
|
||||||
color: '#CC0000'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
|
|
||||||
// tableStore.table.params.monitorFlag = 2
|
|
||||||
// tableStore.table.params.powerFlag = 2
|
|
||||||
// tableStore.table.params.serverName = 'harmonicBoot'
|
|
||||||
// tableStore.table.params.deptIndex = '5699e5916a18a6381e1ac92da5bd2628'
|
|
||||||
|
|
||||||
provide('tableStore', tableStore)
|
|
||||||
|
|
||||||
onMounted(() => {})
|
|
||||||
defineExpose({ getTableStoreParams })
|
|
||||||
</script>
|
|
||||||
<style scoped lang="scss"></style>
|
|
||||||
@@ -1,377 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -116,7 +116,7 @@
|
|||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane :name="1" label="终端在线率图表">
|
<el-tab-pane :name="1" label="终端在线率图表">
|
||||||
<onlineCharts ref="onlineChartsRef" />
|
<charts ref="chartsRef" />
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
@@ -130,9 +130,9 @@ import { getAreaDept } from '@/api/harmonic-boot/area'
|
|||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import TableStore from '@/utils/tableStore'
|
import TableStore from '@/utils/tableStore'
|
||||||
import Table from '@/components/table/index.vue'
|
import Table from '@/components/table/index.vue'
|
||||||
import onlineCharts from './components/onlineCharts.vue'
|
import charts from './components/charts.vue'
|
||||||
const tableRef = ref()
|
const tableRef = ref()
|
||||||
const onlineChartsRef = ref()
|
const chartsRef = ref()
|
||||||
const dictData = useDictData()
|
const dictData = useDictData()
|
||||||
//字典获取电压等级
|
//字典获取电压等级
|
||||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||||
@@ -141,7 +141,7 @@ const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
|||||||
//字典获取干扰源类型
|
//字典获取干扰源类型
|
||||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||||
//字典获取统计类型
|
//字典获取统计类型
|
||||||
const classificationData = dictData.getBasicData('Statistical_Type')
|
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||||
//调用区域接口获取区域
|
//调用区域接口获取区域
|
||||||
const treeData = ref([])
|
const treeData = ref([])
|
||||||
const idArr = ref([])
|
const idArr = ref([])
|
||||||
@@ -175,9 +175,9 @@ const defaultProps = ref({
|
|||||||
expandTrigger: 'click' as const
|
expandTrigger: 'click' as const
|
||||||
})
|
})
|
||||||
const handleClick = (tab: any, e: any) => {
|
const handleClick = (tab: any, e: any) => {
|
||||||
// console.log(tab,e,"??????????");
|
|
||||||
// if(activeName.value===1){
|
// if(activeName.value===1){
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
|
chartsRef.value.getTableStoreParams(tableStore.table.params)
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -271,45 +271,6 @@ const tableStore = new TableStore({
|
|||||||
3: '不合格'
|
3: '不合格'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// {
|
|
||||||
// title: '操作',
|
|
||||||
// align: 'center',
|
|
||||||
// width: '180',
|
|
||||||
// render: 'buttons',
|
|
||||||
// buttons: [
|
|
||||||
// {
|
|
||||||
// name: 'edit',
|
|
||||||
// text: '新增',
|
|
||||||
// type: 'primary',
|
|
||||||
// icon: 'el-icon-Plus',
|
|
||||||
// render: 'basicButton'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: 'edit',
|
|
||||||
// text: '编辑',
|
|
||||||
// type: 'primary',
|
|
||||||
// icon: 'el-icon-EditPen',
|
|
||||||
// render: 'basicButton'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: 'del',
|
|
||||||
// text: '删除',
|
|
||||||
// type: 'danger',
|
|
||||||
// icon: 'el-icon-Delete',
|
|
||||||
// render: 'basicButton'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: 'edit',
|
|
||||||
// text: '绑定监测点',
|
|
||||||
// type: 'primary',
|
|
||||||
// icon: 'el-icon-Plus',
|
|
||||||
// render: 'basicButton',
|
|
||||||
// disabled: (row: any) => {
|
|
||||||
// return row.children.length > 0
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
],
|
],
|
||||||
beforeSearchFun: () => {
|
beforeSearchFun: () => {
|
||||||
tableStore.table.params.deptIndex = formData.value.deptIndex
|
tableStore.table.params.deptIndex = formData.value.deptIndex
|
||||||
@@ -323,7 +284,6 @@ const tableStore = new TableStore({
|
|||||||
delete tableStore.table.params.endTime
|
delete tableStore.table.params.endTime
|
||||||
delete tableStore.table.params.pageNum
|
delete tableStore.table.params.pageNum
|
||||||
delete tableStore.table.params.pageSize
|
delete tableStore.table.params.pageSize
|
||||||
onlineChartsRef.value.getTableStoreParams(tableStore.table.params)
|
|
||||||
// tableStore.table.params.searchBeginTime = tableHeaderRef.value.datePickerRef.timeValue[0]
|
// tableStore.table.params.searchBeginTime = tableHeaderRef.value.datePickerRef.timeValue[0]
|
||||||
// tableStore.table.params.searchEndTime = tableHeaderRef.value.datePickerRef.timeValue[1]
|
// tableStore.table.params.searchEndTime = tableHeaderRef.value.datePickerRef.timeValue[1]
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user