Skip to content

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

最新代码

上级 bb4d1f54
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 93 行增加 和 74 行删除
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/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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论