Skip to content

S
SatelliteDigital
提交 91790872 authored 作者: liujiaxing's avatar liujiaxing
浏览文件
操作

最新代码

上级 bb4d1f54
显示空白字符变更
内嵌 并排
正在显示 包含 232 行增加 和 235 行删除
src/main.js
浏览文件 @ 91790872
......@@ -47,10 +47,6 @@ import './permission' // 路由拦截和加载页面进度条
// import { useDict } from '@/utils/dict'
import directive from './directive' // 导入公共函数
import 'element-plus/dist/index.css'
......
src/pages/all/components/cdf/cdfCurve.vue
浏览文件 @ 91790872
......@@ -3,21 +3,6 @@
<div class="container">
<div class="main">
<div :id="idName" class="cdfCurve"></div>
<!-- <div class="showDetial" @click="showViewClick" v-if="isShowDetial">
<el-icon v-if="showView" class="icon">
<View />
</el-icon>
<el-icon v-else class="icon">
<Hide />
</el-icon>
<span>详情</span>
</div> -->
<!-- <div class="showValue">
<div v-for="(item, index) in markLineData" :key="index">
<span style="font-weight: 700;font-size: 10px; padding: 0 5.5px;" :style="{ color: item.color }">--</span>{{
item.descript }}
</div>
</div> -->
</div>
<el-dialog v-model="isDetialDialogVisible" :show-close="false" :modal="false" custom-class="custom-cdf-dialog"
width="200" height="100" :destroy-on-close="false" :before-close="isDetialDialogVisibleHandleClose"
......@@ -35,12 +20,11 @@ export default {
</script>
<script setup>
import * as echarts from 'echarts';
import childrenCdfCurve from './childrenCdfCurve.vue'
import { onMounted, onUnmounted, ref, nextTick, computed, watch } from 'vue';
const idName = ref(Math.random().toString(30).slice(2, 8))
const idName = ref(Math.random().toString(30).slice(2, 8) + new Date().getTime())
const props = defineProps({
propsDate: {
......@@ -52,11 +36,11 @@ const props = defineProps({
default: false
},
color: {
type: String,
type: null,
default: '#5470C6'
},
legendName: {
type: String,
type: null,
default: 'CDF曲线图'
},
data: {
......@@ -66,9 +50,16 @@ const props = defineProps({
zoomHeight: {
type: String,
default: null
},
lineArray: {
type: Boolean,
default: false
}
})
setTimeout(() => {
console.log(props.data, 'cdf权限去');
}, 2000);
const dataX = computed(() => {
if (props.data.length > 0 && props.data[0]?.x == 'CDF分布') {
let arr = []
......@@ -94,41 +85,13 @@ watch(() => props.data, (newVal) => {
initChart();
})
const showView = ref(false);
var lineColor = props.color;
const markLineData = ref([
{
color: '#89dac4',
descript: "最大值：12"
},
{
color: '#da45ds',
descript: "最小值：12"
},
{
color: '#56fds9',
descript: "平均值：12"
},
])
let myChart = null;
//弹框状态
const isDetialDialogVisible = ref(false);
function showViewClick() {
// //console.log("时间");
isDetialDialogVisible.value = !isDetialDialogVisible.value;
showView.value = true;
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
type: "CDFCurveDetailDialog",
status: "open"
})));
}
// //console.log("当前的值:",showView.value);
}
//关闭弹窗
function isDetialDialogVisibleHandleClose() {
isDetialDialogVisible.value = false;
showView.value = false;
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
type: "CDFCurveDetailDialog",
......@@ -140,8 +103,6 @@ onMounted(() => {
nextTick(() => {
initChart();
})
//console.log("-------cdfCurve-------",props.idName);
// document.getElementById(props.idName).style.height = '240px';
});
......@@ -151,7 +112,7 @@ onUnmounted(() => {
myChart.dispose();
}
});
const series1Data = ref([])//时间轴对象数据
function initChart() {
const chartDom = document.getElementById(idName.value);
chartDom.style.height = '100%';
......@@ -159,10 +120,98 @@ function initChart() {
if (!myChart) {
myChart = echarts.init(chartDom);
};
let seriesArr = [];//图标数据
if (props.lineArray) {
props.data.forEach((it, index) => {
series1Data.value = it.map((item, idx) => [item.x, it[0]?.y && Object.prototype.toString(it[0]?.y) === '[object Object]' && it[0].y?.errorRate !== undefined ? item.y.dropRate : item.y]);
// console.log(it, series1Data.value, '最终数据');
seriesArr.push({
color: props.color[index],
name: props.legendName[index],
data: series1Data.value,
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: props.color[index],
width: 3
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: hexToRgba(props.color[index], 0.8)
},
{
offset: 1,
color: hexToRgba(props.color[index], 0.2)
}
],
global: false
}
},
markLine: {
symbol: 'none',
label: {
show: false
},
}
})
})
} else {
seriesArr.push({
color: props.color,
name: props.legendName,
data: dataY.value,
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: props.color,
width: 3
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: hexToRgba(props.color, 0.8)
},
{
offset: 1,
color: hexToRgba(props.color, 0.2)
}
],
global: false
}
},
markLine: {
symbol: 'none',
label: {
show: false
},
}
})
}
console.log(seriesArr, '总数据对比');
const option = {
legend: {
show: true,
data: [props.legendName],
data: Array.isArray(props.legendName) ? props.legendName : [props.legendName],
textStyle: {
color: '#fff',
fontSize: 12
......@@ -180,9 +229,9 @@ function initChart() {
},
grid: {
top: '23%',
right: '8%',
right: '4%',
bottom: '16%',
left: '18%',
left: '8%',
containLabel: true //自动计算x轴label
},
xAxis: {
......@@ -208,13 +257,11 @@ function initChart() {
// },
hideOverlap: true, // 防重叠（很关键）
formatter: function (value) {
// console.log('x - value', value)
if (value.toString().includes('-')) {
if (value.toString().includes(':')) {
// console.log('嘿嘿', value)
let str = []
const arr = value.split('-') // 只保留日期部分
for (let val of arr) {
if (Number(val) >= 1e8 && val.includes('.')) {
// console.log(val)
val = (Number(val) / 1e8).toFixed(0) + '亿'
......@@ -234,56 +281,6 @@ function initChart() {
}
},
},
dataZoom: dataX.value.length <= 7 ? [] : [
// {
// type: 'slider',
// xAxisIndex: 0,
// startValue: 0,
// endValue: 5, // 一屏只看20个点 ⭐
// height: 5,
// showDetail: false,
// top: 40
// },
// {
// type: 'inside',
// start: 0,
// end: 10,
// left: '18%',
// right: '8%',
// minSpan: 1,
// handleLabel: {
// show: false
// },
// labelFormatter: function (value) {
// console.log('xxx', dataX[value])
// return dataX[value]
// },
// textStyle: {
// color: 'rgba(255, 255, 255, 0.92)',
// fontSize: 8
// }
// },
{
start: 0,
end: 100,
minSpan: 1,
bottom: 8,
left: '14%',
right: '10%',
height: Number(props?.zoomHeight) || 20,
handleLabel: {
show: false
},
labelFormatter: function (value) {
return dataX[value]
},
textStyle: {
color: 'rgba(255, 255, 255, 0.92)',
fontSize: 8
}
}
],
yAxis: {
type: 'value',
// max: 120,
......@@ -303,66 +300,39 @@ function initChart() {
formatter: function (value) {
return value.toFixed(0);
}
}
},
series: [
{
name: props.legendName,
color: props.color,
data: dataY.value,
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: lineColor,
width: 3
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
dataZoom: (props.lineArray ? series1Data.value.length <= 7 : dataX.value.length <= 7) ? [] : [
{
offset: 0,
color: lineColor
start: 0,
end: 100,
minSpan: 1,
bottom: 8,
left: '14%',
right: '10%',
height: Number(props?.zoomHeight) || 20,
handleLabel: {
show: false
},
{
offset: 1,
color: 'rgba(84,112,198,0.20)'
}
],
global: false
}
labelFormatter: function (value) {
return dataX[value]
},
markLine: {
symbol: 'none',
label: {
show: false
textStyle: {
color: 'rgba(255, 255, 255, 0.92)',
fontSize: 8
},
// data: [
// {
// yAxis: 45,
// lineStyle: {
// color: '#ff0000',
// width: 2,
// type: 'dashed'
// },
// },
// {
// yAxis: 70,
// lineStyle: {
// color: '#ff55f5',
// width: 2,
// type: 'dashed'
// },
// }
// ]
splitLine: {
show: true,
lineStyle: {
color: '#202B32', // 修改为你想要的颜色
type: 'dashed'
}
}
},
{ type: 'inside', start: 0, end: 100 }
],
series: seriesArr,
tooltip: {
trigger: 'axis',
// 确保tooltip显示在最上层
......@@ -381,12 +351,20 @@ function initChart() {
}
}
};
// console.log(JSON.stringify(option), '转喊');
if (props.lineArray) {
delete option.xAxis.data
}
myChart.setOption(option);
resizeChart();
window.addEventListener('resize', resizeChart);
}
function hexToRgba(hex, alpha) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
function resizeChart() {
if (myChart) {
myChart.resize();
......
src/pages/all/components/cdf/index.vue
浏览文件 @ 91790872
......@@ -21,7 +21,7 @@
</div>
</div>
<!-- 核心数据指标 -->
<div class="container">
<!-- <div class="container" v-if="!props.lineArray">
<div class="flex-box flex-left">
<cdfCurve :legendName="props.legendName[0]" :data="props.data[0]"></cdfCurve>
</div>
......@@ -29,6 +29,13 @@
<cdfCurve :legendName="props.legendName[1]" :data="props.data[1]" color="#6ffcba" :isShowDetial="true">
</cdfCurve>
</div>
</div> -->
<div class="container" v-if="props.lineArray">
<div class="flex-box">
<cdfCurve :lineArray="props.lineArray" :legendName="props.legendName" :data="props.data" :color="colorList"
:isShowDetial="true">
</cdfCurve>
</div>
</div>
</div>
</template>
......@@ -36,6 +43,7 @@
<script setup>
import { onBeforeUnmount } from 'vue';
import cdfCurve from './cdfCurve.vue'
const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜色设置
const props = defineProps({
title: {
......@@ -57,6 +65,10 @@ const props = defineProps({
zoomHeight: {
type: String,
default: null
},
lineArray: {
type: Boolean,
default: false
}
});
......
src/pages/all/components/instant/index.vue
浏览文件 @ 91790872
......@@ -8,7 +8,7 @@
</div>
<div class="hot-title">
<div class="hot-title-text">{{ props.title }}</div>
<div class="hot-title-enlarge">
<div class="hot-title-enlarge" @click="clickBig">
<svg class="rect" width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="3.5" stroke="white" stroke-opacity="0.65" />
<path class="arrow-path "
......@@ -21,7 +21,7 @@
</div>
</div>
<!-- 核心数据指标 判断一个图表中是否有多个曲线-->
<!-- <div class="container" v-if="!props.lineArray">
<div class="container" v-if="!props.lineArray">
<div class="flex-box flex-left">
<instantCurve :idName="`instant-left-${props.allIdName}`" :data="props.data[0]"
:legendName="props.legendName[0]" :propsDate="componentProps"></instantCurve>
......@@ -30,9 +30,8 @@
<instantCurve :idName="`instant-right-${props.allIdName}`" :data="props.data[1]" color="#6ffcba"
:legendName="props.legendName[1]" :isShowDetail="true"></instantCurve>
</div>
</div> -->
</div>
<div class="container" v-if="props.lineArray">
<div>5555</div>
<div class="flex-box">
<instantCurve :lineArray="props.lineArray" :data="props.data" :legendName="props.legendName"
:propsDate="componentProps" :color="colorList"></instantCurve>
......@@ -76,7 +75,11 @@ const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜
setTimeout(() => {
console.log('瞬时值曲线', props.lineArray)
}, 2000);
//点击放大窗口详细查看曲线
const clickBig = () => {
console.log('放大');
}
const componentProps = ref({})
</script>
......
src/pages/all/components/instant/instantCurve.vue
浏览文件 @ 91790872
......@@ -55,11 +55,6 @@ const props = defineProps({
default: false
}
})
setTimeout(() => {
console.log(props, '大屏配置曲线图',);
}, 2000);
watch(() => props.data, (newVal) => {
initChart();
})
......@@ -127,7 +122,7 @@ onUnmounted(() => {
myChart.dispose();
}
});
const series1Data = ref([])//时间轴对象数据
function initChart() {
const chartDom = document.getElementById(idName.value);
if (!myChart) {
......@@ -136,17 +131,14 @@ function initChart() {
chartDom.style.height = '100%';
chartDom.style.width = '100%';
let seriesArr = [];//图标数据
// console.log(props.data.length, '判断值是多少?', props)
console.log('颜色', props.data);
if (props.lineArray) {
props.data.forEach((it, index) => {
const series1Data = it.map((item, idx) => [item.x, item.y]);
console.log(series1Data, '最终数据');
series1Data.value = it.map((item, idx) => [item.x, it[0]?.y && Object.prototype.toString(it[0]?.y) === '[object Object]' && it[0].y?.errorRate !== undefined ? item.y.dropRate : item.y]);
// console.log(it, series1Data.value, '最终数据');
seriesArr.push({
color: props.color[index],
name: props.legendName[index],
data: series1Data,
data: series1Data.value,
type: 'line',
smooth: 0.6,
symbol: 'none',
......@@ -164,11 +156,11 @@ function initChart() {
colorStops: [
{
offset: 0,
color: props.color[index]
color: hexToRgba(props.color[index], 0.8)
},
{
offset: 1,
color: 'rgba(111,252,186,0.20)'
color: hexToRgba(props.color[index], 0.2)
}
],
global: false
......@@ -204,11 +196,11 @@ function initChart() {
colorStops: [
{
offset: 0,
color: props.color
color: hexToRgba(props.color, 0.8)
},
{
offset: 1,
color: 'rgba(111,252,186,0.20)'
color: hexToRgba(props.color, 0.2)
}
],
global: false
......@@ -240,7 +232,10 @@ function initChart() {
}
})
}
const option = {
// console.log(seriesArr, '总数据对比');
var option = {
legend: {
show: true,
data: Array.isArray(props.legendName) ? props.legendName : [props.legendName],
......@@ -261,30 +256,49 @@ function initChart() {
},
grid: {
top: '23%',
right: '8%',
right: '4%',
bottom: '16%',
left: '18%',
left: '8%',
containLabel: true //自动计算x轴label
},
xAxis: {
// type: 'category',
type: 'time',
type: props.lineArray ? 'time' : 'category',
boundaryGap: false,
// data: dataX.value,
data: dataX.value,
// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
axisLabel: {
interval: 0,
fontSize: 10,
color: '#fff',
rotate: 45,
fontSize: 10,
margin: 20,
fontSize: 10,
interval: 'auto', // 或直接不写
// interval: function (index) {
// return index % 10 === 0 // 每10个显示一个
// },
hideOverlap: true, // 防重叠（很关键）
formatter: function (value) {
console.log(value);
if (value.toString().includes(':')) {
return value
}
}
// formatter: function (value) {
// if (value.toString().includes(':') && false) {
// // console.log('嘿嘿', value)
// let str = []
// const arr = value.split('-') // 只保留日期部分
// for (let val of arr) {
// if (Number(val) >= 1e8 && val.includes('.')) {
// // console.log(val)
// val = (Number(val) / 1e8).toFixed(0) + '亿'
// }
// str.push(val)
// }
// return str.join('-') // 用换行符连接
// }
// // console.log('value', value)
// return value
// }
},
axisLine: {
show: true, //去除轴线
......@@ -318,36 +332,7 @@ function initChart() {
}
}
},
dataZoom: dataX.value.length <= 7 ? [] : [
// {
// type: 'slider',
// xAxisIndex: 0,
// startValue: 0,
// endValue: 20, // 一屏只看20个点 ⭐
// height: 5,
// showDetail: false,
// top: 40
// },
// {
// type: 'inside',
// start: 0,
// end: 10,
// left: '18%',
// right: '8%',
// minSpan: 1,
// handleLabel: {
// show: false
// },
// labelFormatter: function (value) {
// console.log('xxx', dataX[value])
// return dataX[value]
// },
// textStyle: {
// color: 'rgba(255, 255, 255, 0.92)',
// fontSize: 8
// }
// },
dataZoom: (props.lineArray ? series1Data.value.length <= 7 : dataX.value.length <= 7) ? [] : [
{
start: 0,
end: 100,
......@@ -361,13 +346,19 @@ function initChart() {
show: false
},
labelFormatter: function (value) {
if (props.lineArray) {
// console.log('触发', value);
return series1Data.value[value]
} else {
return dataX[value]
}
},
textStyle: {
color: 'rgba(255, 255, 255, 0.92)',
fontSize: 8
}
}
},
{ type: 'inside', start: 0, end: 100 }
],
series: seriesArr,
tooltip: {
......@@ -388,13 +379,30 @@ function initChart() {
}
}
};
console.log(option, '配置', myChart, '住新冠');
if (props.lineArray) {
delete option.xAxis.data
}
// console.log(option, '配置', myChart, '住新冠');
// console.log(option, '数据');
// console.log(series1Data.value, '对象');
// if (timesset) {
// clearTimeout(timesset)
// }
// timesset = setTimeout(() => {
clearTimeout(timesset)
myChart.setOption(option);
resizeChart();
window.addEventListener('resize', resizeChart);
// }, 1000);
}
function hexToRgba(hex, alpha) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
var timesset = null
function resizeChart() {
if (myChart) {
myChart.resize();
......
src/pages/header/component/screenConfigeDialog.vue
浏览文件 @ 91790872
......@@ -91,13 +91,13 @@
<!-- <KeepAlive> -->
<component :is="currentComponent2" :data="[availabilityData, actualAvailabilityData]" :title="titles[1]"
slogan="可用性" :legendName="['规划可用性', '实际可用性']" :lineArray="false">
slogan="可用性" :legendName="['规划可用性', '实际可用性']" :lineArray="true">
</component>
<!-- </KeepAlive> -->
<!-- <KeepAlive> -->
<component :is="currentComponent3" :data="[delayData, lossRateData]" :title="titles[2]" slogan="网络时延/丢包"
:legendName="['搜星时延', '丢包率']" :lineArray="true">
:legendName="['搜星时延', '丢包率']" :lineArray="false">
</component>
<!-- </KeepAlive> -->
......
src/pages/rights/index.vue
浏览文件 @ 91790872
......@@ -3,22 +3,22 @@
<!-- 顶部区域：标题与核心指标 -->
<div class="header-container">
<!-- <allHotMap></allHotMap> -->
<!-- <div>{{ component1 }}</div> -->
<component :is="component1" :data="[capacityData, trafficData]" zoomHeight="2" :title="titles[0]" slogan="容量/流量"
:legendName="['链路层容量', '用户实际流量']"></component>
:legendName="['链路层容量', '用户实际流量']" :lineArray="true"></component>
</div>
<!-- 卫星列表 -->
<div class="satellite-section">
<!-- <cdf></cdf> -->
<component :is="component2" :data="[availabilityData, actualAvailabilityData]" zoomHeight="14" :title="titles[1]"
slogan="可用性" :legendName="['规划可用性', '实际可用性']"></component>
slogan="可用性" :legendName="['规划可用性', '实际可用性']" :lineArray="true"></component>
</div>
<!-- 地面系统 -->
<div class="ground-system-section">
<!-- <instant></instant> -->
<component :is="component3" :data="[delayData, lossRateData]" zoomHeight="14" :title="titles[2]" slogan="网络时延/丢包"
:legendName="['搜星时延', '丢包率']"></component>
:legendName="['搜星时延', '丢包率']" :lineArray="false"></component>
</div>
</div>
</template>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论