458 lines
18 KiB
Vue
458 lines
18 KiB
Vue
<template>
|
||
<div
|
||
class="charts"
|
||
style="position: relative; width: 100%"
|
||
:style="`height: calc(${tableStore.table.height} - 75px)`"
|
||
>
|
||
<my-echart
|
||
v-loading="loading"
|
||
class="mt10"
|
||
:style="`height: calc(${tableStore.table.height} - 100px)`"
|
||
:options="options"
|
||
/>
|
||
<div style="position: absolute; right: 60px; top: 5px; font-weight: bold">
|
||
<el-tag
|
||
style="
|
||
background: #cc0000;
|
||
width: 30px;
|
||
height: 15px;
|
||
border: 1px solid #cc0000;
|
||
float: left;
|
||
margin-top: 2px;
|
||
"
|
||
></el-tag>
|
||
<span style="color: #cc0000; font-weight: 400; float: left">  在线率<60%   </span>
|
||
<el-tag
|
||
size="mini"
|
||
style="
|
||
background: #ffcc33;
|
||
width: 30px;
|
||
height: 15px;
|
||
border: 1px solid #ffcc33;
|
||
float: left;
|
||
margin-top: 2px;
|
||
"
|
||
></el-tag>
|
||
<span style="color: #ffcc33; font-weight: 400; float: left">  60%≤在线率<90%   </span>
|
||
<el-tag
|
||
style="
|
||
background: #339966;
|
||
width: 30px;
|
||
height: 15px;
|
||
border: 1px solid #339966;
|
||
float: left;
|
||
margin-top: 2px;
|
||
"
|
||
></el-tag>
|
||
<span style="color: #339966; font-weight: 400; float: left">  在线率>90%</span>
|
||
</div>
|
||
</div>
|
||
</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 chartsRef = ref()
|
||
const tableStore = new TableStore({
|
||
url: '/harmonic-boot/terminal/getTerminalDataCensus',
|
||
showPage: false,
|
||
method: 'POST',
|
||
column: [],
|
||
beforeSearchFun: () => {
|
||
tableStore.table.params = tableStoreParams.value
|
||
},
|
||
loadCallback: () => {
|
||
const chartsData = ref(tableStore.table.data)
|
||
chartsData.value.single.map((item: any) => {
|
||
if (item == 3.14159) {
|
||
item = 0.5
|
||
}
|
||
item = item.toFixed(2)
|
||
})
|
||
// tableStore.table.data.type
|
||
const legendColorList = ['#0099CC', '#9A6601', '#CCCCCC', '#FFFFFF']
|
||
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
|
||
},
|
||
legend: {
|
||
data: ['投运', '热备用', '停运'],
|
||
left: '4%',
|
||
textStyle: {
|
||
color: '#666666'
|
||
},
|
||
itemWidth: 30,
|
||
itemHeight: 15,
|
||
itemGap: 25
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
saveAsImage: {
|
||
// bottom: '10px',
|
||
show: true,
|
||
title: '保存'
|
||
// yAxisIndex: 'none'
|
||
}
|
||
},
|
||
right: 0,
|
||
top: 0
|
||
},
|
||
tooltip: {
|
||
backgroundColor: '#fff',
|
||
textStyle: {
|
||
color: '#000'
|
||
},
|
||
formatter: function (params: any) {
|
||
var tips = `<div style="min-width:80px;display:flex;justify-content:space-between;align-items:center">
|
||
<span style="margin-left:5px;dislpay:block;min-width:80px;color:#000">${params[0].name}</span></div>`
|
||
for (var i = 0; i < params.length; i++) {
|
||
// <p style="width:14px;height:8px;border-radius:2px;background:${
|
||
// legendColorList[i]
|
||
// }"></p>
|
||
tips += `<div style="min-width:80px;display:flex;justify-content:space-between;align-items:center">
|
||
<span style="margin-left:5px;dislpay:block;min-width:80px;color:#000">${
|
||
params[i].seriesName
|
||
}</span> ${
|
||
params[i].seriesName == '在线率' ? params[i].value?.toFixed(2) : params[i].value
|
||
} </div>`
|
||
}
|
||
return tips
|
||
}
|
||
},
|
||
grid: {
|
||
top: '50px', // 等价于 y: '16%'
|
||
left: '10px',
|
||
right: '10px',
|
||
bottom: '40px',
|
||
containLabel: true
|
||
},
|
||
calculable: true,
|
||
xAxis: {
|
||
name: titleX,
|
||
data: chartsData.value.type
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '台',
|
||
nameTextStyle: {
|
||
color: '#000',
|
||
verticalAlign: 'top', //标题位置
|
||
padding: [-22, 0, 10, 0]
|
||
},
|
||
// max:50,
|
||
// interval: 2,
|
||
splitLine: {
|
||
show: true
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#000'
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
symbol: ['none', 'arrow'],
|
||
symbolOffset: 25, //箭头距离x轴末端距离
|
||
lineStyle: {
|
||
// shadowOffsetY: -25,
|
||
color: '#000',
|
||
shadowColor: '#000' //设置阴影的颜色
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '%',
|
||
nameTextStyle: {
|
||
color: '#000',
|
||
verticalAlign: 'top', //标题位置
|
||
padding: [-22, 0, 10, 0]
|
||
},
|
||
max: 100,
|
||
// nameTextStyle: {
|
||
// color: "#000"
|
||
// },
|
||
position: 'right',
|
||
offset: 0,
|
||
axisLine: {
|
||
show: true,
|
||
// symbol: ["none", "arrow"],
|
||
symbolOffset: 20, //箭头距离x轴末端距离
|
||
lineStyle: {
|
||
shadowOffsetY: -20,
|
||
color: '#000',
|
||
shadowColor: '#000' //设置阴影的颜色
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
formatter: '{value} ', //右侧Y轴文字显示
|
||
textStyle: {
|
||
color: '#000'
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '投运',
|
||
type: 'bar',
|
||
// stack: 'false',
|
||
barMaxWidth: 24,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#0099CC'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#0099CC'
|
||
}
|
||
]),
|
||
barBorderRadius: 0
|
||
}
|
||
},
|
||
// data: [0, 1, 8, 5, 7, 6,1, 4, 7, 7,3,2]
|
||
data: chartsData.value.runFlag
|
||
},
|
||
{
|
||
name: '热备用',
|
||
type: 'bar',
|
||
// stack: 'false',
|
||
barMaxWidth: 24,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#996600'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#996600'
|
||
}
|
||
]),
|
||
barBorderRadius: 0
|
||
}
|
||
},
|
||
//data: [2, 1, 8, 5, 7, 6, 1, 4, 7, 7,3,2]
|
||
data: chartsData.value.reaFlag
|
||
},
|
||
{
|
||
name: '停运',
|
||
type: 'bar',
|
||
// stack: 'false',
|
||
barMaxWidth: 24,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#CCCCCC'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#CCCCCC'
|
||
}
|
||
]),
|
||
barBorderRadius: 0
|
||
}
|
||
},
|
||
// data: [2, 5, 8, 5, 7, 6, 2, 4, 7, 7,3,2]
|
||
data: chartsData.value.stopFlag
|
||
},
|
||
{
|
||
name: '在线率',
|
||
type: 'bar',
|
||
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
||
smooth: false, //平滑曲线显示
|
||
barMaxWidth: 24,
|
||
symbol: 'circle', //标记的图形为实心圆
|
||
symbolSize: 8, //标记的大小
|
||
itemStyle: {
|
||
normal: {
|
||
// 随机显示
|
||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||
|
||
// 定制显示（按顺序）
|
||
color: function (params) {
|
||
if (params.value >= 90) {
|
||
return new echarts.graphic.LinearGradient(
|
||
0,
|
||
1,
|
||
0,
|
||
0,
|
||
[
|
||
{
|
||
offset: 1,
|
||
color: '#349966'
|
||
}
|
||
],
|
||
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 > 0.5 && params.value <= 60) {
|
||
return new echarts.graphic.LinearGradient(
|
||
0,
|
||
1,
|
||
0,
|
||
0,
|
||
[
|
||
{
|
||
offset: 1,
|
||
color: '#CC0100'
|
||
}
|
||
],
|
||
false
|
||
)
|
||
} else if (params.value > 0 && params.value <= 0.5) {
|
||
return new echarts.graphic.LinearGradient(
|
||
0,
|
||
1,
|
||
0,
|
||
0,
|
||
[
|
||
{
|
||
offset: 1,
|
||
color: '#ccc'
|
||
}
|
||
],
|
||
false
|
||
)
|
||
}
|
||
}
|
||
}
|
||
},
|
||
lineStyle: {
|
||
color: '#ffa43a'
|
||
},
|
||
markLine: {
|
||
silent: false,
|
||
symbol: 'circle',
|
||
data: [
|
||
{
|
||
name: '',
|
||
yAxis: 100,
|
||
lineStyle: {
|
||
color: '#349966'
|
||
},
|
||
label: {
|
||
//position: "middle",
|
||
formatter: '{b}',
|
||
textStyle: {
|
||
color: '#349966'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: '',
|
||
yAxis: 90,
|
||
lineStyle: {
|
||
color: '#FFCC33'
|
||
},
|
||
label: {
|
||
//position: "middle",
|
||
formatter: '{b}',
|
||
textStyle: {
|
||
color: '#FFCC33'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: '',
|
||
yAxis: 60,
|
||
lineStyle: {
|
||
color: '#CC0100'
|
||
},
|
||
label: {
|
||
//position: "middle",
|
||
formatter: '{b}',
|
||
textStyle: {
|
||
color: '#CC0100'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
//data: [22.6, 75.9, 39.0, 66.4, 28.7, 90.7, 95.6, 82.2, 78.7, 58.8, 86.0, 72.3]
|
||
data: chartsData.value.single
|
||
}
|
||
]
|
||
}
|
||
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>
|