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

完善首页以及告警界面

Browse Source
This commit is contained in:
lai
2024-01-26 14:29:44 +08:00
parent fa96c33972
commit 62bf6be2f1
11 changed files with 594 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,8 +2,9 @@
<div ref="upfFlow" class="chart-container"></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { mainGet } from '@/api/faultManage/actAlarm';
import { onMounted, onUnmounted, ref } from 'vue';
import { listUPFData } from '@/api/perfManage/goldTarget';
import { parseSizeFromKbs } from '@/utils/parse-utils';
import * as echarts from 'echarts/core';
import {
TooltipComponent,
@@ -16,8 +17,11 @@ import {
import { LineChart, LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { GaugeSeriesOption } from 'echarts';
import { markRaw } from 'vue';
import useI18n from '@/hooks/useI18n';
import { parseDateToStr } from '@/utils/date-utils';
const { t } = useI18n();
echarts.use([
TooltipComponent,
@@ -34,198 +38,231 @@ type EChartsOption = echarts.ComposeOption<
| LegendComponentOption
| LineSeriesOption
>;
/**设置定时器ID */
let timeoutDuration = 5 * 1000; // 设置5s进行刷新请求
let loadId: any = null;
// 超时锁屏
function resetTimeout() {
if (loadId) {
clearInterval(loadId);
}
loadId = setInterval(() => {
initPicture();
}, timeoutDuration);
}
/**图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++) {
var x = i;
if (x > color.length - 1) {
x = color.length - 1;
function fnDesign(container: HTMLElement | undefined, option: EChartsOption) {
if (!container) {
return;
}
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],
const { clientHeight, clientWidth } = container;
if (!upfFlowChart.value) {
upfFlowChart.value = markRaw(
echarts.init(container, 'light', {
width: clientWidth,
height: clientHeight - 36,
})
);
}
window.onresize = function () {
// echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
upfFlowChart.value.resize();
};
lineY.push(data);
option && upfFlowChart.value.setOption(option);
}
const optionData: EChartsOption = {
tooltip: {
show: true, //是否显示提示框组件
trigger: 'axis',
},
legend: {
data: charts.names,
textStyle: {
fontSize: 12,
color: 'rgb(0,253,255,0.6)',
},
right: '4%',
},
grid: {
top: '14%',
left: '4%',
right: '4%',
bottom: '12%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
data: charts.lineX,
axisLabel: {
formatter: function (params: any) {
return params.split(' ')[0] + '\n' + params.split(' ')[1];
},
},
axisLine: {
lineStyle: {
color: 'rgb(0,253,255,0.6)',
},
},
},
yAxis: {
name: charts.unit,
type: 'value',
axisLabel: {
formatter: '{value}',
},
splitLine: {
lineStyle: {
color: 'rgb(23,255,243,0.3)',
},
},
axisLine: {
lineStyle: {
color: 'rgb(0,253,255,0.6)',
},
},
},
series: lineY,
};
//渲染速率图
function initPicture() {
let queryArr: any = [];
const initTime: Date = new Date();
console.log(initTime)
const startTime: Date = new Date(initTime);
startTime.setHours(0, 0, 0, 0); // 设置为今天的0点
const endTime: Date = new Date(initTime);
endTime.setHours(23, 59, 59, 59); // 设置为今天的12点
queryArr = [parseDateToStr(startTime), parseDateToStr(endTime)];
function fnDesign(container: HTMLElement | undefined, option: EChartsOption) {
if (!container) return;
const { clientHeight, clientWidth } = container;
listUPFData(queryArr).then(res => {
let timeArr: any = [];
let upValue: any = [];
let downValue: any = [];
upfFlowChart.value = markRaw(
echarts.init(container, 'light', {
width: clientWidth,
height: clientHeight - 36,
})
);
option && upfFlowChart.value.setOption(option);
res.upData.map((item: any) => {
timeArr.push(item.timestamp);
upValue.push(parseSizeFromKbs(item.value, 60)[0]);
});
res.downData.map((item: any) => {
downValue.push(parseSizeFromKbs(item.value, 60)[0]);
});
var charts = {
unit: '(Kbps)',
names: [
t('views.dashboard.overview.UPFFlow.up'),
t('views.dashboard.overview.UPFFlow.down'),
],
lineX: timeArr,
value: [upValue, downValue],
};
var color = ['rgba(92, 123, 217', 'rgba(166, 215, 144'];
var lineY: any = [];
for (var i = 0; i < charts.names.length; i++) {
var x = i;
if (x > color.length - 1) {
x = color.length - 1;
}
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.5)',
},
{
offset: 0.8,
color: color[x] + ', 0.5)',
},
],
false
),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10,
},
},
symbol: 'circle',
symbolSize: 5,
formatter: '{b}',
data: charts.value[i],
yAxisIndex: i,
};
lineY.push(data);
}
const optionData: EChartsOption = {
tooltip: {
show: true, //是否显示提示框组件
trigger: 'axis',
//formatter:'{a0}:{c0}<br>{a1}:{c1}'
formatter: function (param: any) {
console.log(param);
var tip = '';
if (param !== null && param.length > 0) {
tip += param[0].name + '<br />';
for (var i = 0; i < param.length; i++) {
tip +=
param[i].marker +
param[i].seriesName +
': ' +
param[i].value +
'<br />';
}
}
return tip;
},
},
legend: {
data: charts.names,
textStyle: {
fontSize: 12,
color: 'rgb(0,253,255,0.6)',
},
right: '35%',
},
grid: {
top: '14%',
left: '4%',
right: '4%',
bottom: '12%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
data: charts.lineX,
axisLabel: {
formatter: function (params: any) {
return params.split(' ')[0] + '\n' + params.split(' ')[1];
},
},
axisLine: {
lineStyle: {
color: 'rgb(0,253,255,0.6)',
},
},
},
yAxis: [
{
name: charts.unit,
type: 'value',
axisLabel: {
formatter: '{value}',
},
splitLine: {
lineStyle: {
color: 'rgb(23,255,243,0.3)',
},
},
axisLine: {
lineStyle: {
color: 'rgb(0,253,255,0.6)',
},
},
},
{
name: charts.unit,
type: 'value',
axisLabel: {
formatter: '{value}',
},
splitLine: {
lineStyle: {
color: 'rgb(23,255,243,0.3)',
},
},
axisLine: {
lineStyle: {
color: 'rgb(0,253,255,0.6)',
},
},
},
],
series: lineY,
};
fnDesign(upfFlow.value, optionData);
});
}
onMounted(() => {
fnDesign(upfFlow.value, optionData);
setInterval(() => {
upfFlowChart.value.setOption({
legend: {
selected: {
上行: false,
下行: false,
},
},
});
upfFlowChart.value.setOption({
legend: {
selected: {
上行: true,
下行: true,
},
},
});
}, 10000);
initPicture();
resetTimeout();
});
/**组件实例被卸载之后调用 */
onUnmounted(() => {
if (loadId) {
clearInterval(loadId);
}
});
</script>