OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

---补充可视化的图

Browse Source
This commit is contained in:
lai
2024-01-20 17:04:28 +08:00
parent bb0c6a9e84
commit 5a1d77f186
5 changed files with 490 additions and 813 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/api/faultManage/actAlarm.ts
View File

@@ -287,3 +287,34 @@ export async function exportAll(query: Record<string, any>) {
} }
return result; return result;
} }
/**
* 首页活动告警
* @param query 查询参数
* @returns bolb
*/
export async function mainGet() {
let totalSQL = `select count(*) as value,alarm_type as name from alarm where alarm_status=1 group by alarm_type`;
// 发起请求
const result = await request({
url: `/api/rest/databaseManagement/v1/select/omc_db/alarm`,
method: 'get',
params: {
SQL: totalSQL,
},
});
// 解析数据
if (result.code === RESULT_CODE_SUCCESS) {
const itemData = result.data.data;
if (Array.isArray(itemData)) {
const v = itemData[0]['alarm'];
if (Array.isArray(v)) {
result.data = v;
}
}
}
return result;
}

502
src/views/dashboard/overview/components/AlarnDayLine/index.vue
View File

@@ -1,381 +1,239 @@
<template> <template>
<div id="trend" class="chart-container"></div> <div ref="alarmDayLine" class="chart-container"></div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue'; import { markRaw, onMounted, ref } from 'vue';
import { mainGet } from '@/api/faultManage/actAlarm'; import { mainGet } from '@/api/faultManage/actAlarm';
import * as echarts from 'echarts/core'; import * as echarts from 'echarts/core';
import { import {
GridComponent,
TitleComponent, TitleComponent,
TitleComponentOption,
TooltipComponent, TooltipComponent,
TooltipComponentOption,
GridComponent,
GridComponentOption,
LegendComponent, LegendComponent,
LegendComponentOption,
} from 'echarts/components'; } from 'echarts/components';
import { BarChart, PieChart } from 'echarts/charts'; import { LineChart, LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers'; import { CanvasRenderer } from 'echarts/renderers';
import { LabelLayout } from 'echarts/features';
import useI18n from '@/hooks/useI18n';
const { t, currentLocale } = useI18n();
echarts.use([ echarts.use([
GridComponent,
BarChart,
CanvasRenderer,
TitleComponent, TitleComponent,
TooltipComponent, TooltipComponent,
GridComponent, GridComponent,
LegendComponent, LegendComponent,
BarChart, LineChart,
CanvasRenderer, CanvasRenderer,
TooltipComponent, UniversalTransition,
LegendComponent,
PieChart,
CanvasRenderer,
LabelLayout,
]); ]);
// 将现有数据补全为期望的格式
function completeData(existingData: any, expectedData: any) { type EChartsOption = echarts.ComposeOption<
let allType = { zh: { CommunicationAlarm: 'Communication Alarm' } }; | TooltipComponentOption
const result = expectedData.map((item: any) => { | GridComponentOption
const found = existingData.find( | LegendComponentOption
(existingItem: any) => existingItem.name === item.name | LineSeriesOption
); >;
if (found) return found; /**图DOM节点实例对象 */
else { const alarmDayLine = ref<HTMLElement | undefined>(undefined);
return item;
/**图实例对象 */
const alarmDayLineChart = ref<any>(null);
var xData = (function () {
var data = [];
for (var i = 2011; i < 2017; i++) {
data.push(i + '年');
} }
return data;
})();
var color = ['#1a9bfc', '#99da69', '#e32f46', '#7049f0', '#fa704d'];
var name = ['通信告警', '设备告警', '处理错误', '环境告警', '服务质量'];
var data = [
[13.7, 3.4, 13.5, 16.1, 7.4, 15.2],
[17.4, 13.7, 13.5, 3.4, 15.2, 13.5],
[13.4, 7.4, 13.7, 13.5, 16.1, 13.7],
[3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
[16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
];
var series: any = [];
for (var i = 0; i < 5; i++) {
series.push({
name: name[i],
type: 'line',
symbolSize: 3, //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
symbol: 'circle', //标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
smooth: true, //是否平滑曲线显示
showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: color[i],
},
{
offset: 0.8,
color: 'rgba(255,255,255,0)',
},
],
false
),
// shadowColor: 'rgba(255,255,255, 0.1)',
shadowBlur: 10,
opacity: 0.3,
},
},
itemStyle: {
normal: {
color: color[i],
lineStyle: {
width: 1,
type: 'solid', //'dotted'虚线 'solid'实线
},
borderColor: color[i], //图形的描边颜色。支持的格式同 color
borderWidth: 8, //描边线宽。为 0 时无描边。[ default: 0 ]
barBorderRadius: 0,
label: {
show: false,
},
opacity: 0.5,
},
},
data: data[i],
}); });
var lang = currentLocale.value.split('_')[0];
console.log(lang);
result.forEach((item: any) => {
item.name = t('views.index.' + item.name);
});
return result;
} }
function fnDesign() { const optionData: EChartsOption = {
mainGet().then((res: any) => {
const expectedData = [
{
name: 'CommunicationAlarm',
value: 0,
},
{
name: 'EquipmentAlarm',
value: 0,
},
{
name: 'ProcessingFailure',
value: 0,
},
{
name: 'EnvironmentalAlarm',
value: 0,
},
{
name: 'QualityOfServiceAlarm',
value: 0,
},
];
var chartDom = document.getElementById('trend');
var myChart = echarts.init(chartDom);
var option: any;
var colorList = [
'#afa3f5',
'#00d488',
'#3feed4',
'#3bafff',
'#f1bb4c',
'#aff',
'rgba(250,250,250,0.5)',
];
option = {
legend: { legend: {
bottom: 5, itemGap: 10,
left: 'center', itemWidth: 20,
data: ['香料香精', '粘度调节类', '防腐类', '防晒类', '防晒剂'], textStyle: {
color: '#fff',
fontSize: '15',
}, },
data: name,
},
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'cross', // 坐标轴指示器，坐标轴触发有效
// lineStyle: {
// color: '#57617B',
// },
}, },
formatter:
'{b}<br />{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%<br />{a3}: {c3}%<br />{a4}: {c4}%<br />',
// backgroundColor: 'rgba(0,0,0,0.7)', // 背景
}, },
xAxis: [ xAxis: [
{ {
gridIndex: 0,
show: false,
type: 'category', type: 'category',
boundaryGap: false, axisLine: {
data: [ lineStyle: {
'2017年2季度', color: '#32346c',
'2017年3季度',
'2017年4季度',
'2018年1季度',
'2018年2季度',
'2018年3季度',
'2018年4季度',
'2019年1季度',
'2019年2季度',
'2019年3季度',
'2019年4季度',
'2020年1季度',
],
}, },
{
gridIndex: 1,
show: false,
type: 'category',
boundaryGap: false,
data: [
'2017年2季度',
'2017年3季度',
'2017年4季度',
'2018年1季度',
'2018年2季度',
'2018年3季度',
'2018年4季度',
'2019年1季度',
'2019年2季度',
'2019年3季度',
'2019年4季度',
'2020年1季度',
],
}, },
{ splitLine: {
gridIndex: 2, show: true,
show: false, lineStyle: {
type: 'category', color: '#32346c ',
boundaryGap: false,
data: [
'2017年2季度',
'2017年3季度',
'2017年4季度',
'2018年1季度',
'2018年2季度',
'2018年3季度',
'2018年4季度',
'2019年1季度',
'2019年2季度',
'2019年3季度',
'2019年4季度',
'2020年1季度',
],
}, },
{
gridIndex: 3,
show: false,
type: 'category',
boundaryGap: false,
data: [
'2017年2季度',
'2017年3季度',
'2017年4季度',
'2018年1季度',
'2018年2季度',
'2018年3季度',
'2018年4季度',
'2019年1季度',
'2019年2季度',
'2019年3季度',
'2019年4季度',
'2020年1季度',
],
},
{
gridIndex: 4,
type: 'category',
boundaryGap: false,
data: [
'2017年2季度',
'2017年3季度',
'2017年4季度',
'2018年1季度',
'2018年2季度',
'2018年3季度',
'2018年4季度',
'2019年1季度',
'2019年2季度',
'2019年3季度',
'2019年4季度',
'2020年1季度',
],
},
],
yAxis: [
{
gridIndex: 0,
axisLabel: {
show: false,
}, },
boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
axisTick: { axisTick: {
show: false, show: false,
}, },
splitLine: { splitArea: {
show: false, show: false,
}, },
splitNumber: 1,
name: '香料香精',
nameLocation: 'center',
nameRotate: 360,
},
{
gridIndex: 1,
axisLabel: { axisLabel: {
show: false, inside: false,
textStyle: {
color: '#bac0c0',
fontWeight: 'normal',
fontSize: '12',
}, },
},
data: xData,
},
],
yAxis: {
type: 'value',
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLine: {
show: true,
lineStyle: {
color: '#32346c',
},
},
splitLine: { splitLine: {
show: false, show: true,
lineStyle: {
color: '#32346c ',
}, },
splitNumber: 1,
name: '粘度调节类',
nameLocation: 'center',
nameRotate: 360,
}, },
{
gridIndex: 2,
axisLabel: { axisLabel: {
show: false, textStyle: {
color: '#bac0c0',
fontWeight: 'normal',
fontSize: '12',
}, },
axisTick: { formatter: '{value}%',
show: false,
}, },
splitLine: {
show: false,
}, },
splitNumber: 1, series: series,
name: '防腐类', };
nameLocation: 'center',
nameRotate: 360, function fnDesign(container: HTMLElement | undefined, option: EChartsOption) {
}, if (!container) return;
{ const { clientHeight, clientWidth } = container;
gridIndex: 3,
axisLabel: { // alarmDayLineChart.value = echarts.init(container, 'light', {
show: false, // width: clientWidth,
}, // height: clientHeight - 36,
axisTick: { // });
show: false,
}, alarmDayLineChart.value = markRaw(
splitLine: { echarts.init(container, 'light', {
show: false, width: clientWidth,
}, height: clientHeight - 36,
splitNumber: 1, })
name: '防晒类', );
nameLocation: 'center', option && alarmDayLineChart.value.setOption(option);
nameRotate: 360,
},
{
gridIndex: 4,
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
splitNumber: 1,
name: '防晒剂',
nameLocation: 'center',
nameRotate: 360,
},
],
grid: [
{
top: '17%',
height: '15%',
},
{
top: '32%',
height: '15%',
},
{
top: '47%',
height: '15%',
},
{
top: '62%',
height: '15%',
},
{
bottom: '8%',
height: '15%',
},
],
series: [
{
type: 'line',
data: [
0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 0,
],
xAxisIndex: 0,
yAxisIndex: 0,
smooth: true,
areaStyle: {},
},
{
type: 'line',
data: [
0, 74.1, 67.2, 79.5, 46.4, 46.4, 46.4, 74.1, 67.2, 79.5, 46.4, 0,
],
xAxisIndex: 1,
yAxisIndex: 1,
smooth: true,
areaStyle: {},
},
{
type: 'line',
data: [
0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0,
],
xAxisIndex: 2,
yAxisIndex: 2,
smooth: true,
areaStyle: {},
},
{
type: 'line',
data: [
0, 74.1, 67.2, 79.5, 46.4, 46.4, 46.4, 74.1, 67.2, 79.5, 46.4, 0,
],
xAxisIndex: 3,
yAxisIndex: 3,
smooth: true,
areaStyle: {},
},
{
type: 'line',
data: [
0, 74.1, 67.2, 79.5, 46.4, 46.4, 46.4, 74.1, 67.2, 79.5, 46.4, 0,
],
xAxisIndex: 4,
yAxisIndex: 4,
smooth: true,
areaStyle: {},
},
],
};
option && myChart.setOption(option);
window.onresize = function () {
// echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
myChart.resize();
};
// 点击圆形饼状图
myChart.on('click', (params: any) => {
// 根据点击的数据params更新柱状图的数据
console.log(params);
// const newData = generateNewData(params.name); // 根据点击的数据生成新的柱状图数据
// updateBarChart(newData); // 更新柱状图
});
});
} }
onMounted(() => { onMounted(() => {
fnDesign(); fnDesign(alarmDayLine.value, optionData);
// setInterval(() => {
// neResourcesChart.value.setOption({
// legend: {
// selected: {
// '上行': false,
// '下行': false
// }
// }
// })
// neResourcesChart.value.setOption({
// legend: {
// selected: {
// '上行': true,
// '下行': true
// }
// }
// })
// }, 10000)
}); });
</script> </script>

222
src/views/dashboard/overview/components/AlarnTypeBar/index.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div id="main" class="chart-container"></div> <div id="alarmType" class="chart-container"></div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue'; import { onMounted } from 'vue';
@@ -9,7 +9,7 @@ import {
GridComponent, GridComponent,
TitleComponent, TitleComponent,
TooltipComponent, TooltipComponent,
LegendComponent, LegendComponent, //
} from 'echarts/components'; } from 'echarts/components';
import { BarChart, PieChart } from 'echarts/charts'; import { BarChart, PieChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers'; import { CanvasRenderer } from 'echarts/renderers';
@@ -33,24 +33,23 @@ echarts.use([
LabelLayout, LabelLayout,
]); ]);
// 将现有数据补全为期望的格式 // 将现有数据补全为期望的格式
// function completeData(existingData: any, expectedData: any) { function completeData(existingData: any, expectedData: any) {
// let allType = { zh: { CommunicationAlarm: 'Communication Alarm' } }; let allType = { zh: { CommunicationAlarm: 'Communication Alarm' } };
// const result = expectedData.map((item: any) => { const result = expectedData.map((item: any) => {
// const found = existingData.find( const found = existingData.find(
// (existingItem: any) => existingItem.name === item.name (existingItem: any) => existingItem.name === item.name
// ); );
// if (found) return found; if (found) return found;
// else { else {
// return item; return item;
// } }
// }); });
// var lang = currentLocale.value.split('_')[0]; var lang = currentLocale.value.split('_')[0];
// console.log(lang); result.forEach((item: any) => {
// result.forEach((item: any) => { item.name = t('views.index.' + item.name);
// item.name = t('views.index.' + item.name); });
// }); return result;
// return result; }
// }
function fnDesign() { function fnDesign() {
mainGet().then((res: any) => { mainGet().then((res: any) => {
@@ -76,7 +75,7 @@ function fnDesign() {
value: 0, value: 0,
}, },
]; ];
var chartDom = document.getElementById('main'); var chartDom = document.getElementById('alarmType');
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option: any; var option: any;
var colorList = [ var colorList = [
@@ -88,165 +87,9 @@ function fnDesign() {
'#aff', '#aff',
'rgba(250,250,250,0.5)', 'rgba(250,250,250,0.5)',
]; ];
// option = {
// // title: {
// // subtext: '告警占比',
// // x: 'center',
// // y: '42%',
// // textStyle: {
// // fontSize: 12,
// // fontWeight: 'normal',
// // color: ['#333'],
// // },
// // subtextStyle: {
// // color: '#f1bb4c',
// // fontSize: 16,
// // },
// // },
// grid: {
// left: '10%',
// right: '5%',
// bottom: '10%',
// },
// legend: {
// show: false,
// orient: 'vertical',
// top: 'middle',
// right: '5%',
// textStyle: {
// color: '#3db8ff',
// fontSize: 12,
// },
// icon: 'roundRect',
// },
// series: [
// // 主要展示层的
// {
// radius: ['29%', '59%'],
// center: ['50%', '50%'],
// type: 'pie',
// itemStyle: {
// normal: {
// color: function (params: any) {
// return colorList[params.dataIndex];
// },
// },
// },
// labelLine: {
// normal: {
// show: true,
// length: 20,
// length2: 100,
// lineStyle: {
// color: '#d3d3d3',
// },
// align: 'right',
// },
// color: '#000',
// emphasis: {
// show: true,
// },
// },
// label: {
// normal: {
// formatter: '{b}: {d}%',
// padding: [0, -90],
// height: 35,
// rich: {
// a: {
// width: 38,
// height: 38,
// lineHeight: 50,
// align: 'left',
// },
// b: {
// width: 29,
// height: 45,
// lineHeight: 50,
// align: 'left',
// },
// c: {
// width: 34,
// height: 33,
// lineHeight: 50,
// align: 'left',
// },
// d: {
// width: 34,
// height: 44,
// lineHeight: 50,
// align: 'left',
// },
// e: {
// width: 38,
// height: 30,
// lineHeight: 50,
// align: 'left',
// },
// nameStyle: {
// fontSize: 16,
// color: '#555',
// align: 'left',
// },
// rate: {
// fontSize: 20,
// color: '#1ab4b8',
// align: 'left',
// },
// },
// },
// },
// data: [
// { value: 10, name: '通信告警' },
// { value: 20, name: '设备告警' },
// { value: 30, name: '服务质量' },
// { value: 30, name: '环境告警' },
// { value: 20, name: '处理错误' },
// ],
// },
// // 边框的设置
// {
// radius: ['54%', '59%'],
// center: ['50%', '50%'],
// type: 'pie',
// label: {
// normal: {
// show: false,
// },
// emphasis: {
// show: false,
// },
// },
// labelLine: {
// normal: {
// show: false,
// },
// emphasis: {
// show: false,
// },
// },
// animation: false,
// tooltip: {
// show: false,
// },
// itemStyle: {
// normal: {
// color: 'rgba(250,250,250,0.5)',
// },
// },
// data: [
// {
// value: 1,
// },
// ],
// },
// ],
// };
option = { option = {
grid: { grid: {
bottom: 150, bottom: 120,
left: 0, left: 0,
right: '10%', right: '10%',
}, },
@@ -276,22 +119,19 @@ function fnDesign() {
}, },
labelLine: { labelLine: {
show: true, show: true,
length: 20, length: 10,
length2: 120, length2: 120,
align: 'right', align: 'right',
color: '#000', color: '#000',
}, },
label: { label: {
formatter: '{b}: {d}%', show: true,
padding: [0, -110], formatter: '({d}%){b}:{c}',
padding: [0, -120],
fontSize:15,
height: 35, height: 35,
alignTo: 'labelLine', alignTo: 'labelLine',
bleedMargin: 5,
color: 'auto', color: 'auto',
borderColor: '#777',
borderWidth: 1,
borderRadius: 4,
backgroundColor: 'rgba(0,0,0,0.7)',
rich: { rich: {
name: { name: {
color: '#ff0000', // 修改名称颜色 color: '#ff0000', // 修改名称颜色
@@ -300,10 +140,10 @@ function fnDesign() {
}, },
data: [ data: [
{ value: 1, name: '通信告警' }, { value: 1, name: '通信告警' },
{ value: 2, name: '设备告警' }, { value: 1, name: '设备告警' },
{ value: 3, name: '服务质量' }, { value: 1, name: '服务质量' },
{ value: 3, name: '环境告警' }, { value: 1, name: '环境告警' },
{ value: 2, name: '处理错误' }, { value: 1, name: '处理错误' },
], ],
}, },
// 边框的设置 // 边框的设置
@@ -346,13 +186,11 @@ function fnDesign() {
}; };
option && myChart.setOption(option); option && myChart.setOption(option);
window.onresize = function () { window.onresize = function () {
// echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
myChart.resize(); myChart.resize();
}; };
// 点击圆形饼状图 // 点击圆形饼状图
myChart.on('click', (params: any) => { myChart.on('click', (params: any) => {
// 根据点击的数据params更新柱状图的数据 // 根据点击的数据params更新柱状图的数据
console.log(params);
// const newData = generateNewData(params.name); // 根据点击的数据生成新的柱状图数据 // const newData = generateNewData(params.name); // 根据点击的数据生成新的柱状图数据
// updateBarChart(newData); // 更新柱状图 // updateBarChart(newData); // 更新柱状图
}); });

491
src/views/dashboard/overview/components/UPFFlow/index.vue
View File

@@ -1,295 +1,244 @@
<!-- <script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import ChartLine from '@/components/ChartLine/index.vue';
import { getLoad } from '@/api/monitor/monitor';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n';
import {
YYYY_MM_DD_HH_MM_SS,
parseDateToStr,
parseDateWithoutYear,
parseStrToDate,
} from '@/utils/date-utils';
import { parseSizeFromKBs } from '@/utils/parse-utils';
import dayjs, { Dayjs } from 'dayjs';
const { t } = useI18n();
/**开始结束时间类型 */
type RangePickerType = {
placeholder: [string, string];
ranges: Record<string, [Dayjs, Dayjs]>;
/**全局时间 */
all: [string, string];
/**网络 */
network: [string, string];
};
/**开始结束时间 */
let rangePicker = reactive<RangePickerType>({
placeholder: [
t('views.monitor.monitor.startTime'),
t('views.monitor.monitor.endTime'),
],
ranges: {
[t('views.monitor.monitor.today')]: [
dayjs().subtract(1, 'day').startOf('day'),
dayjs().subtract(1, 'day').endOf('day'),
],
[t('views.monitor.monitor.yesterday')]: [dayjs().startOf('day'), dayjs()],
[t('views.monitor.monitor.week')]: [
dayjs().startOf('week'),
dayjs().endOf('week'),
],
[t('views.monitor.monitor.month')]: [
dayjs().startOf('month'),
dayjs().endOf('month'),
],
},
all: ['', ''],
network: ['', ''],
});
/**查询全部资源数据列表 */
function fnGetList() {
let startTime = null;
let endTime = null;
const dateString = rangePicker.all;
if (dateString[0]) {
startTime = parseStrToDate(dateString[0], YYYY_MM_DD_HH_MM_SS);
endTime = parseStrToDate(dateString[1], YYYY_MM_DD_HH_MM_SS);
} else {
const now = new Date();
now.setHours(0, 0, 0, 0);
startTime = now;
endTime = new Date();
}
getLoad({
type: 'network',
startTime: startTime.getTime(),
endTime: endTime.getTime(),
neType: '#',
neId: '#',
}).then(res => {
if (res.code === RESULT_CODE_SUCCESS && res.data) {
fnNetworkChart(res.data.network);
}
});
// 设置初始时间段
const initRangePicker: [string, string] = [
parseDateToStr(startTime, YYYY_MM_DD_HH_MM_SS),
parseDateToStr(endTime, YYYY_MM_DD_HH_MM_SS),
];
rangePicker.all = initRangePicker;
rangePicker.network = initRangePicker;
}
/**图表显示数据 */
const chartsOption = reactive({
/**网络 */
networkChart: {},
});
/**初始图表数据-Network */
function fnNetworkChart(data: Record<string, any>[]) {
let networkDate: string[] = [];
let networkUp: string[] = [];
let networkDown: string[] = [];
for (const item of data) {
networkDate.push(parseDateWithoutYear(item.createTime));
networkUp.push(Number(item.up).toFixed(2));
networkDown.push(Number(item.down).toFixed(2));
}
// 图标参数
const option = {
xDatas: networkDate,
yDatas: [
{
name: t('views.monitor.monitor.up'),
data: networkUp,
},
{
name: t('views.monitor.monitor.down'),
data: networkDown,
},
],
grid: {
left: '5%',
right: '5%',
bottom: '20%',
},
formatStr: 'KB/s',
};
chartsOption.networkChart = option;
}
onMounted(() => {
fnGetList();
});
</script>
<template> <template>
<div class="chart"> <div ref="upfFlow" class="chart-container"></div>
<ChartLine
:option="chartsOption.networkChart"
></ChartLine>
</div>
</template> </template>
<style lang="less" scoped>
.chart {
width: 100%;
height: 400px;
}
</style> -->
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted } from 'vue'; import { onMounted, ref } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { mainGet } from '@/api/faultManage/actAlarm';
import ChartLine from '@/components/ChartLine/index.vue'; import * as echarts from 'echarts/core';
import { getLoad } from '@/api/monitor/monitor';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n';
import { import {
YYYY_MM_DD_HH_MM_SS, TooltipComponent,
parseDateToStr, TooltipComponentOption,
parseDateWithoutYear, GridComponent,
parseStrToDate, GridComponentOption,
} from '@/utils/date-utils'; LegendComponent,
import { parseSizeFromKBs } from '@/utils/parse-utils'; LegendComponentOption,
import dayjs, { Dayjs } from 'dayjs'; } from 'echarts/components';
const { t } = useI18n(); import { LineChart, LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { GaugeSeriesOption } from 'echarts';
import { markRaw } from 'vue';
/**开始结束时间类型 */ echarts.use([
type RangePickerType = { TooltipComponent,
placeholder: [string, string]; GridComponent,
ranges: Record<string, [Dayjs, Dayjs]>; LegendComponent,
/**全局时间 */ LineChart,
all: [string, string]; CanvasRenderer,
/**网络 */ UniversalTransition,
network: [string, string]; ]);
type EChartsOption = echarts.ComposeOption<
| TooltipComponentOption
| GridComponentOption
| LegendComponentOption
| LineSeriesOption
>;
/**图DOM节点实例对象 */
const upfFlow = ref<HTMLElement | undefined>(undefined);
/**图实例对象 */
const upfFlowChart = ref<any>(null);
// // 将现有数据补全为期望的格式
// function completeData(existingData: any, expectedData: any) {
// let allType = { zh: { CommunicationAlarm: 'Communication Alarm' } };
// const result = expectedData.map((item: any) => {
// const found = existingData.find(
// (existingItem: any) => existingItem.name === item.name
// );
// if (found) return found;
// else {
// return item;
// }
// });
// var lang = currentLocale.value.split('_')[0];
// console.log(lang);
// result.forEach((item: any) => {
// item.name = t('views.index.' + item.name);
// });
// return result;
// }
var charts = {
unit: 'Kbps',
names: ['上行', '下行'],
lineX: [
'2018-11-11 17:01',
'2018-11-11 17:02',
'2018-11-11 17:03',
'2018-11-11 17:04',
'2018-11-11 17:05',
'2018-11-11 17:06',
'2018-11-11 17:07',
'2018-11-11 17:08',
'2018-11-11 17:09',
'2018-11-11 17:10',
'2018-11-11 17:11',
'2018-11-11 17:12',
'2018-11-11 17:13',
'2018-11-11 17:14',
'2018-11-11 17:15',
'2018-11-11 17:16',
'2018-11-11 17:17',
'2018-11-11 17:18',
'2018-11-11 17:19',
'2018-11-11 17:20',
],
value: [
[
451, 352, 303, 534, 95, 236, 217, 328, 159, 151, 231, 192, 453, 524, 165,
236, 527, 328, 129, 530,
],
[
360, 545, 80, 192, 330, 580, 192, 80, 250, 453, 352, 28, 625, 345, 65,
325, 468, 108, 253, 98,
],
],
}; };
var color = ['rgba(23, 255, 243', 'rgba(255,100,97'];
var lineY: any = [];
/**开始结束时间 */ for (var i = 0; i < charts.names.length; i++) {
let rangePicker = reactive<RangePickerType>({ var x = i;
placeholder: [ if (x > color.length - 1) {
t('views.monitor.monitor.startTime'), x = color.length - 1;
t('views.monitor.monitor.endTime'), }
], var data = {
ranges: { name: charts.names[i],
[t('views.monitor.monitor.today')]: [ type: 'line',
dayjs().subtract(1, 'day').startOf('day'), color: color[x] + ')',
dayjs().subtract(1, 'day').endOf('day'), smooth: true,
], areaStyle: {
[t('views.monitor.monitor.yesterday')]: [dayjs().startOf('day'), dayjs()], normal: {
[t('views.monitor.monitor.week')]: [ color: new echarts.graphic.LinearGradient(
dayjs().startOf('week'), 0,
dayjs().endOf('week'), 0,
], 0,
[t('views.monitor.monitor.month')]: [ 1,
dayjs().startOf('month'), [
dayjs().endOf('month'), {
], offset: 0,
color: color[x] + ', 0.3)',
}, },
all: ['', ''], {
network: ['', ''], offset: 0.8,
}); color: color[x] + ', 0)',
},
/**查询全部资源数据列表 */ ],
function fnGetList() { false
let startTime = null; ),
let endTime = null; shadowColor: 'rgba(0, 0, 0, 0.1)',
const dateString = rangePicker.all; shadowBlur: 10,
if (dateString[0]) { },
startTime = parseStrToDate(dateString[0], YYYY_MM_DD_HH_MM_SS); },
endTime = parseStrToDate(dateString[1], YYYY_MM_DD_HH_MM_SS); symbol: 'circle',
} else { symbolSize: 5,
const now = new Date(); data: charts.value[i],
now.setHours(0, 0, 0, 0); };
startTime = now; lineY.push(data);
endTime = new Date();
}
getLoad({
type: 'network',
startTime: startTime.getTime(),
endTime: endTime.getTime(),
neType: '#',
neId: '#',
}).then(res => {
if (res.code === RESULT_CODE_SUCCESS && res.data) {
fnNetworkChart(res.data.network);
}
});
// 设置初始时间段
const initRangePicker: [string, string] = [
parseDateToStr(startTime, YYYY_MM_DD_HH_MM_SS),
parseDateToStr(endTime, YYYY_MM_DD_HH_MM_SS),
];
rangePicker.all = initRangePicker;
rangePicker.network = initRangePicker;
} }
/**图表显示数据 */ const optionData: EChartsOption = {
const chartsOption = reactive({ tooltip: {
/**网络 */ show: true, //是否显示提示框组件
networkChart: {}, trigger: 'axis',
});
/**初始图表数据-Network */
function fnNetworkChart(data: Record<string, any>[]) {
let networkDate: string[] = [];
let networkUp: string[] = [];
let networkDown: string[] = [];
for (const item of data) {
networkDate.push(parseDateWithoutYear(item.createTime));
networkUp.push(Number(item.up).toFixed(2));
networkDown.push(Number(item.down).toFixed(2));
}
// 图标参数
const option = {
xDatas: networkDate,
yDatas: [
{
name: t('views.monitor.monitor.up'),
data: networkUp,
}, },
{ legend: {
name: t('views.monitor.monitor.down'), data: charts.names,
data: networkDown, textStyle: {
fontSize: 12,
color: 'rgb(0,253,255,0.6)',
},
right: '4%',
}, },
],
grid: { grid: {
left: '5%', top: '14%',
right: '5%', left: '4%',
bottom: '20%', right: '4%',
bottom: '12%',
containLabel: true,
}, },
formatStr: 'KB/s', xAxis: {
}; type: 'category',
chartsOption.networkChart = option; boundaryGap: false,
data: charts.lineX,
axisLabel: {
textStyle: {
color: 'rgb(0,253,255,0.6)',
},
formatter: function (params: any) {
return params.split(' ')[0] + '\n' + params.split(' ')[1];
},
},
},
yAxis: {
name: charts.unit,
type: 'value',
axisLabel: {
formatter: '{value}',
textStyle: {
color: 'rgb(0,253,255,0.6)',
},
},
splitLine: {
lineStyle: {
color: 'rgb(23,255,243,0.3)',
},
},
axisLine: {
lineStyle: {
color: 'rgb(0,253,255,0.6)',
},
},
label: {
normal: {
show: true, //折点显示数值,
},
},
},
series: lineY,
};
function fnDesign(container: HTMLElement | undefined, option: EChartsOption) {
if (!container) return;
const { clientHeight, clientWidth } = container;
upfFlowChart.value = markRaw(
echarts.init(container, 'light', {
width: clientWidth,
height: clientHeight - 36,
})
);
option && upfFlowChart.value.setOption(option);
} }
onMounted(() => { onMounted(() => {
fnGetList(); fnDesign(upfFlow.value, optionData);
setInterval(() => {
upfFlowChart.value.setOption({
legend: {
selected: {
上行: false,
下行: false,
},
},
});
upfFlowChart.value.setOption({
legend: {
selected: {
上行: true,
下行: true,
},
},
});
}, 10000);
}); });
</script> </script>
<template>
<div class="chart">
<ChartLine :option="chartsOption.networkChart"></ChartLine>
</div>
</template>
<style lang="less" scoped> <style lang="less" scoped>
.chart { .chart-container {
/* 设置图表容器大小和位置 */
width: 100%; width: 100%;
height: 400px; height: 100%;
} }
</style> </style>

1
src/views/dashboard/overview/css/index.css
View File

@@ -98,6 +98,7 @@
.overview .inner { .overview .inner {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
} }
.overview .inner h4 { .overview .inner h4 {
font-size: 1.167rem; font-size: 1.167rem;