---补充可视化的图
This commit is contained in:
lai
@@ -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>
|
||||
<div class="chart">
|
||||
<ChartLine
|
||||
:option="chartsOption.networkChart"
|
||||
></ChartLine>
|
||||
</div>
|
||||
<div ref="upfFlow" class="chart-container"></div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
</style> -->
|
||||
|
||||
<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 { onMounted, ref } from 'vue';
|
||||
import { mainGet } from '@/api/faultManage/actAlarm';
|
||||
import * as echarts from 'echarts/core';
|
||||
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();
|
||||
TooltipComponent,
|
||||
TooltipComponentOption,
|
||||
GridComponent,
|
||||
GridComponentOption,
|
||||
LegendComponent,
|
||||
LegendComponentOption,
|
||||
} from 'echarts/components';
|
||||
import { LineChart, LineSeriesOption } from 'echarts/charts';
|
||||
import { UniversalTransition } from 'echarts/features';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import { GaugeSeriesOption } from 'echarts';
|
||||
import { markRaw } from 'vue';
|
||||
|
||||
/**开始结束时间类型 */
|
||||
type RangePickerType = {
|
||||
placeholder: [string, string];
|
||||
ranges: Record<string, [Dayjs, Dayjs]>;
|
||||
/**全局时间 */
|
||||
all: [string, string];
|
||||
/**网络 */
|
||||
network: [string, string];
|
||||
};
|
||||
echarts.use([
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
LegendComponent,
|
||||
LineChart,
|
||||
CanvasRenderer,
|
||||
UniversalTransition,
|
||||
]);
|
||||
|
||||
/**开始结束时间 */
|
||||
let rangePicker = reactive<RangePickerType>({
|
||||
placeholder: [
|
||||
t('views.monitor.monitor.startTime'),
|
||||
t('views.monitor.monitor.endTime'),
|
||||
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',
|
||||
],
|
||||
ranges: {
|
||||
[t('views.monitor.monitor.today')]: [
|
||||
dayjs().subtract(1, 'day').startOf('day'),
|
||||
dayjs().subtract(1, 'day').endOf('day'),
|
||||
value: [
|
||||
[
|
||||
451, 352, 303, 534, 95, 236, 217, 328, 159, 151, 231, 192, 453, 524, 165,
|
||||
236, 527, 328, 129, 530,
|
||||
],
|
||||
[t('views.monitor.monitor.yesterday')]: [dayjs().startOf('day'), dayjs()],
|
||||
[t('views.monitor.monitor.week')]: [
|
||||
dayjs().startOf('week'),
|
||||
dayjs().endOf('week'),
|
||||
[
|
||||
360, 545, 80, 192, 330, 580, 192, 80, 250, 453, 352, 28, 625, 345, 65,
|
||||
325, 468, 108, 253, 98,
|
||||
],
|
||||
[t('views.monitor.monitor.month')]: [
|
||||
dayjs().startOf('month'),
|
||||
dayjs().endOf('month'),
|
||||
],
|
||||
},
|
||||
all: ['', ''],
|
||||
network: ['', ''],
|
||||
});
|
||||
],
|
||||
};
|
||||
var color = ['rgba(23, 255, 243', 'rgba(255,100,97'];
|
||||
var lineY: any = [];
|
||||
|
||||
/**查询全部资源数据列表 */
|
||||
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();
|
||||
for (var i = 0; i < charts.names.length; i++) {
|
||||
var x = i;
|
||||
if (x > color.length - 1) {
|
||||
x = color.length - 1;
|
||||
}
|
||||
|
||||
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;
|
||||
var data = {
|
||||
name: charts.names[i],
|
||||
type: 'line',
|
||||
color: color[x] + ')',
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: color[x] + ', 0.3)',
|
||||
},
|
||||
{
|
||||
offset: 0.8,
|
||||
color: color[x] + ', 0)',
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
data: charts.value[i],
|
||||
};
|
||||
lineY.push(data);
|
||||
}
|
||||
|
||||
/**图表显示数据 */
|
||||
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%',
|
||||
const optionData: EChartsOption = {
|
||||
tooltip: {
|
||||
show: true, //是否显示提示框组件
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: charts.names,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: 'rgb(0,253,255,0.6)',
|
||||
},
|
||||
formatStr: 'KB/s',
|
||||
};
|
||||
chartsOption.networkChart = option;
|
||||
right: '4%',
|
||||
},
|
||||
grid: {
|
||||
top: '14%',
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
bottom: '12%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
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(() => {
|
||||
fnGetList();
|
||||
fnDesign(upfFlow.value, optionData);
|
||||
setInterval(() => {
|
||||
upfFlowChart.value.setOption({
|
||||
legend: {
|
||||
selected: {
|
||||
上行: false,
|
||||
下行: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
upfFlowChart.value.setOption({
|
||||
legend: {
|
||||
selected: {
|
||||
上行: true,
|
||||
下行: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
}, 10000);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="chart">
|
||||
<ChartLine :option="chartsOption.networkChart"></ChartLine>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart {
|
||||
.chart-container {
|
||||
/* 设置图表容器大小和位置 */
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user