292 lines
12 KiB
Vue
292 lines
12 KiB
Vue
<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 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 tableStore = new TableStore({
|
|
url: '/device-boot/LineIntegrityData/getIntegrityIcon',
|
|
|
|
showPage: false,
|
|
method: 'POST',
|
|
column: [],
|
|
|
|
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 == 3.14159) {
|
|
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.map((item: any) => item.type)
|
|
},
|
|
yAxis: {
|
|
name: '%',
|
|
max: 100
|
|
},
|
|
options: {
|
|
series: [
|
|
{
|
|
name: '完整性',
|
|
type: 'bar',
|
|
data: tableStore.table.data.map((item: any) => item.single),
|
|
itemStyle: {
|
|
normal: {
|
|
// 随机显示
|
|
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
|
|
|
// 定制显示（按顺序）
|
|
color: function (params: any) {
|
|
if (params.value ==3.14159) {
|
|
return new echarts.graphic.LinearGradient(
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
[
|
|
{
|
|
offset: 1,
|
|
color: '#ccc'
|
|
}
|
|
],
|
|
false
|
|
)
|
|
} else 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: '#A52a2a'
|
|
}
|
|
],
|
|
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: '#A52a2a'
|
|
},
|
|
label: {
|
|
//position: "middle",
|
|
formatter: '{b}',
|
|
textStyle: {
|
|
color: '#A52a2a'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
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'
|
|
|
|
provide('tableStore', tableStore)
|
|
|
|
onMounted(() => {
|
|
tableStore.index()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss"></style>
|