Skip to content

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

最新代码提交--样式修改

上级 c62bcf89
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 122 行增加 和 63 行删除
src/pages/all/components/cdf/cdfCurve.vue
浏览文件 @ 477d68b1
......@@ -54,10 +54,14 @@ const props = defineProps({
lineArray: {
type: Boolean,
default: false
},
yName: {//y轴名称
type: Array,
default: () => []
}
})
setTimeout(() => {
console.log(props.data, 'cdf权限去');
// console.log(props.data, 'cdf权限去');
}, 2000);
const dataX = computed(() => {
......@@ -205,7 +209,7 @@ function initChart() {
}
})
}
console.log(seriesArr, '总数据对比');
// console.log(seriesArr, '总数据对比');
const option = {
......@@ -283,8 +287,14 @@ function initChart() {
},
yAxis: {
type: 'value',
name: props.yName,//y轴名称
// max: 120,
minInterval: 1,
nameTextStyle: { // 文本样式
fontSize: 12,
fontWeight: 'bold',
color: '#fff'
},
splitLine: {
show: true,
lineStyle: {
......
src/pages/all/components/cdf/childrenCdfCurve.vue
浏览文件 @ 477d68b1
......@@ -182,7 +182,7 @@ onMounted(() => {
// 初始化所有图表
chartConfigs.value.forEach(config => {
alert(config)
console.log('初始化config', config)
// console.log('初始化config', config)
const chartDom = document.getElementById(config.id);
if (chartDom) {
initChart(chartDom, config);
......
src/pages/all/components/cdf/index.vue
浏览文件 @ 477d68b1
......@@ -55,21 +55,23 @@
<!-- 核心数据指标 -->
<div class="container" v-if="!props.lineArray">
<div class="flex-box flex-left">
<cdfCurve :legendName="props.legendName[0]" :data="props.data[0]"></cdfCurve>
<cdfCurve :legendName="props.legendName[0]" :yName="props.yName" :data="props.data[0]" color="#ff9f7f"
:isShowDetial="true"></cdfCurve>
</div>
<div class="flex-box flex-right">
<cdfCurve :legendName="props.legendName[1]" :data="props.data[1]" color="#6ffcba" :isShowDetial="true">
<cdfCurve :legendName="props.legendName[1]" :yName="props.yName" :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 :lineArray="props.lineArray" :yName="props.yName" :legendName="props.legendName" :data="props.data"
:color="colorList" :isShowDetial="true">
</cdfCurve>
</div>
</div>
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" modal-class="dialogModel" :modal-penetrable='true'
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" class="dialogModel" :modal-penetrable='true'
width="200" :before-close="closeDialogFn" style="margin: 0;padding: 0; ">
<div class="dashboard-container">
<!-- 顶部导航栏 -->
......@@ -98,17 +100,18 @@
<!-- 核心数据指标 判断一个图表中是否有多个曲线-->
<div class="container" v-if="!props.lineArray">
<div class="flex-box flex-left">
<cdfCurve :legendName="props.legendName[0]" :data="props.data[0]"></cdfCurve>
<cdfCurve :legendName="props.legendName[0]" :yName="props.yName" :data="props.data[0]"></cdfCurve>
</div>
<div class="flex-box flex-right">
<cdfCurve :legendName="props.legendName[1]" :data="props.data[1]" color="#6ffcba" :isShowDetial="true">
<cdfCurve :legendName="props.legendName[1]" :yName="props.yName" :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 :lineArray="props.lineArray" :yName="props.yName" :legendName="props.legendName"
:data="props.data" :color="colorList" :isShowDetial="true">
</cdfCurve>
</div>
</div>
......@@ -147,10 +150,14 @@ const props = defineProps({
lineArray: {
type: Boolean,
default: false
},
yName: {//y轴名称
type: Array,
default: () => []
}
});
console.log("actualAvailabilityData", props.data[1])
// console.log("actualAvailabilityData", props.data[1])
onBeforeUnmount(() => {
//console.log("中，zhelixieza");
......@@ -160,7 +167,6 @@ const dateValue = ref([])//时间段
const setdia = ref(false)//弹框是否展开
//设置问题
const setclick = () => {
console.log("哦口口");
timeValue.value = '1'
setdia.value = !setdia.value
historyS.value = false
......@@ -240,7 +246,6 @@ function getPreviousMonthDate() {
const bigStatus = ref(false)
//点击放大窗口详细查看曲线
const clickBig = () => {
console.log('放大');
bigStatus.value = true
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
......@@ -475,7 +480,7 @@ const componentProps = ref({});
/* background-color: red; */
}
:deep().dashboard-container {
:deep().dialogModel .dashboard-container {
border: 1px solid #cccccc2a;
}
......
src/pages/all/components/hotMapComponents/hotMap.vue
浏览文件 @ 477d68b1
......@@ -33,13 +33,15 @@ const props = defineProps({
mapCenter: {
type: Array,
default: () => []
},
yName: {//y轴名称
type: Array,
default: () => []
}
})
watch(() => props.data, (newVal) => {
// // updateChart();
console.log('触发时');
setTimeout(() => {
initChart();
}, 0)
......@@ -53,14 +55,10 @@ const obj = {
}
watch(() => appStore.currentHotMapCountry, (newVal, oldVal) => {
console.log('触发时5555');
initChart()
})
watch(() => maxValue.value, (newVal) => {
console.log('562626触发时');
if (myChart && newVal > 0) {
myChart.setOption({
visualMap: {
......@@ -292,7 +290,7 @@ function initChart() {
},
}
} else {
console.log('val', val)
// console.log('val', val)
}
return {
......@@ -338,7 +336,6 @@ function resizeChart() {
}
onMounted(async () => {
console.log(6636);
// 确保DOM渲染完成后初始化图表
// nextTick(() => {
......
src/pages/all/components/hotMapComponents/index.vue
浏览文件 @ 477d68b1
......@@ -63,13 +63,14 @@
<!-- 核心数据指标 -->
<div class="container">
<div class="flex-box " v-if="hotStatus">
<hotMap :title="props.legendName[selectedValue]" :data="props.data[selectedValue]"></hotMap>
<hotMap :title="props.legendName[selectedValue]" :yName="props.yName" :data="props.data[selectedValue]">
</hotMap>
</div>
<!-- <div class="flex-box flex-right">
<hotMap :title="props.legendName[1]" :data="props.data[1]"></hotMap>
</div> -->
</div>
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" modal-class="dialogModel" :modal-penetrable='true'
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" class="dialogModel" :modal-penetrable='true'
width="200" :before-close="closeDialogFn" style="margin: 0;padding: 0; ">
<div class="dashboard-container">
<!-- 顶部导航栏 -->
......@@ -98,10 +99,10 @@
<div class="container" v-if="bigStatus">
<!-- 核心数据指标 热力图-->
<div class="flex-box flex-left">
<hotMap :title="props.legendName[0]" :data="props.data[0]"></hotMap>
<hotMap :title="props.legendName[0]" :yName="props.yName" :data="props.data[0]"></hotMap>
</div>
<div class="flex-box flex-right">
<hotMap :title="props.legendName[1]" :data="props.data[1]"></hotMap>
<hotMap :title="props.legendName[1]" :yName="props.yName" :data="props.data[1]"></hotMap>
</div>
</div>
</main>
......@@ -129,11 +130,15 @@ const props = defineProps({
data: {
type: Array,
default: () => []
},
yName: {//y轴名称
type: Array,
default: () => []
}
})
const hotStatus = ref(true)
const selectedValue = ref(0)//热力图下拉框
console.log(props, '热力图数据')
// console.log(props, '热力图数据')
......@@ -229,7 +234,6 @@ const hotSelectFn = () => {
}
//点击放大窗口详细查看曲线
const clickBig = () => {
console.log('放大');
bigStatus.value = true
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
......@@ -477,7 +481,7 @@ const closeDialogFn = () => {
/* background-color: red; */
}
:deep().dashboard-container {
:deep().dialogModel .dashboard-container {
border: 1px solid #cccccc2a;
}
......
src/pages/all/components/hotMapComponents/testMap.vue
浏览文件 @ 477d68b1
......@@ -204,7 +204,7 @@ function initChart() {
// };
myChart.setOption(option);
resizeChart();
......@@ -220,7 +220,7 @@ function resizeChart() {
onMounted(async () => {
const ret = await getGridInfoList()
console.log('ret', ret)
// console.log('ret', ret)
// 确保DOM渲染完成后初始化图表
nextTick(() => {
initChart();
......
src/pages/all/components/instant/index.vue
浏览文件 @ 477d68b1
......@@ -57,20 +57,24 @@
<div class="flex-box flex-left">
<!-- <div>{{ props.data[0] }}-----</div> -->
<instantCurve :idName="`instant-left-${props.allIdName}`" :data="props.data[0]"
:legendName="props.legendName[0]" :propsDate="componentProps" :istemplate="props.istemplate"></instantCurve>
:legendName="props.legendName[0]" :yName="props.yName[0] ? props.yName[0] : ''" :propsDate="componentProps"
:istemplate="props.istemplate"></instantCurve>
</div>
<div class="flex-box flex-right">
<instantCurve :idName="`instant-right-${props.allIdName}`" :data="props.data[1]" color="#6ffcba"
:legendName="props.legendName[1]" :isShowDetail="true" :istemplate="props.istemplate"></instantCurve>
:legendName="props.legendName[1]" :yName="props.yName[1] ? props.yName[1] : ''" :propsDate="componentProps"
isShowDetail="true" :istemplate="props.istemplate">
</instantCurve>
</div>
</div>
<div class="container" v-if="props.lineArray">
<div class="flex-box">
<instantCurve :lineArray="props.lineArray" :data="props.data" :legendName="props.legendName"
:propsDate="componentProps" :color="colorList" :istemplate="props.istemplate"></instantCurve>
<instantCurve :lineArray="props.lineArray" :yName="props.yName[0]" :data="props.data"
:legendName="props.legendName" :propsDate="componentProps" :color="colorList" :istemplate="props.istemplate">
</instantCurve>
</div>
</div>
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" modal-class="dialogModel" :modal-penetrable='true'
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" class="dialogModel" :modal-penetrable='true'
width="200" :before-close="closeDialogFn" style="margin: 0;padding: 0; ">
<div class="dashboard-container">
<!-- 顶部导航栏 -->
......@@ -99,18 +103,19 @@
<!-- 核心数据指标 判断一个图表中是否有多个曲线-->
<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>
<instantCurve :idName="`instant-left-${props.allIdName}`" :yName="props.yName[0] ? props.yName[0] : ''"
:data="props.data[0]" :legendName="props.legendName[0]" :propsDate="componentProps"></instantCurve>
</div>
<div class="flex-box flex-right">
<instantCurve :idName="`instant-right-${props.allIdName}`" :data="props.data[1]" color="#6ffcba"
:legendName="props.legendName[1]" :isShowDetail="true"></instantCurve>
<instantCurve :idName="`instant-right-${props.allIdName}`" :yName="props.yName[1] ? props.yName[1] : ''"
:data="props.data[1]" color="#6ffcba" :legendName="props.legendName[1]" :isShowDetail="true">
</instantCurve>
</div>
</div>
<div class="container" v-if="props.lineArray">
<div class="flex-box">
<instantCurve :lineArray="props.lineArray" :data="props.data" :legendName="props.legendName"
:propsDate="componentProps" :color="colorList"></instantCurve>
<instantCurve :lineArray="props.lineArray" :yName="props.yName[0]" :data="props.data"
:legendName="props.legendName" :propsDate="componentProps" :color="colorList"></instantCurve>
</div>
</div>
</main>
......@@ -154,12 +159,16 @@ const props = defineProps({
istemplate: {//判断是不是配置曲线还是右边显示曲线
type: Boolean,
default: false
},
yName: {//y轴名称
type: Array,
default: () => []
}
});
const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜色设置
setTimeout(() => {
console.log('瞬时值曲线', props)
// console.log('瞬时值曲线', props)
}, 2000);
const historyS = ref(false)//是否查询历史模式
const dateValue = ref([])//时间段
......@@ -245,7 +254,7 @@ function getPreviousMonthDate() {
const bigStatus = ref(false)
//点击放大窗口详细查看曲线
const clickBig = () => {
console.log('放大');
// console.log('放大');
bigStatus.value = true
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
......@@ -480,7 +489,7 @@ const componentProps = ref({})
/* background-color: red; */
}
:deep().dashboard-container {
:deep().dialogModel .dashboard-container {
border: 1px solid #cccccc2a;
}
......
src/pages/all/components/instant/instantCurve.vue
浏览文件 @ 477d68b1
......@@ -56,6 +56,10 @@ const props = defineProps({
istemplate: {//判断是配置模版还是右侧正常显示
type: Boolean,
default: false
},
yName: {//y轴名称
type: Array,
default: () => []
}
})
watch(() => props.data, (newVal) => {
......@@ -325,6 +329,12 @@ function initChart() {
},
yAxis: {
type: 'value',
name: props.yName,//y轴名称
nameTextStyle: { // 文本样式
fontSize: 12,
fontWeight: 'bold',
color: '#fff'
},
// max: 120,
minInterval: 1,
splitLine: {
......
src/pages/all/index.vue
浏览文件 @ 477d68b1
......@@ -64,7 +64,6 @@
</div>
</el-footer>
</el-main>
<!-- 右侧边栏 -->
<el-aside class="fixed-aside right-aside" v-if="useAppStoreInstance.isdataPanelShow">
<div class="aside-content">
......
src/pages/header/index.vue
浏览文件 @ 477d68b1
......@@ -160,7 +160,7 @@ const handletoLinkClick = () => {
// location.replace('/subsystem');
router.push('/');
//console.log("1111111111111111111111111",useAppStoreInstance.isSourceLegendShow);
useAppStoreInstance.setGlobalisFromTosub(true);
// useAppStoreInstance.setGlobalisFromTosub(true);
useAppStoreInstance.setislegendShow(useAppStoreInstance.isSourceLegendShow ? true : false);
//console.log("11111111111111111111111112",useAppStoreInstance.islegendShow);
useAppStoreInstance.setiscontrolPanelShow(true);
......@@ -218,16 +218,17 @@ const getGridInfoListData = async () => {
onMounted(async () => {
console.log("onMounted加兹安");
// window.addEventListener('message', handleUEMessage);
await getGridInfoListData()
window.ue.interface.emitUIInteraction = (res) => {
const resData = JSON.parse(res);
console.log("我是handleUEMessage,收到UE交互:", resData);
if (resData.locationReplace === 'true') {
useAppStoreInstance.setiscontrolPanelShow(false);
useAppStoreInstance.setglobalSatelliteSearchID(resData.SatelliteSearchID || '4097');
if (!useAppStoreInstance.islegendShow) {
if (resData.locationReplace === 'true') {//进入分系统
useAppStoreInstance.setiscontrolPanelShow(false);//分系统右上角悬浮框
useAppStoreInstance.setglobalSatelliteSearchID(resData.SatelliteSearchID || '4097');//点击的卫星id
if (!useAppStoreInstance.islegendShow) {//判断下方图例是否隐藏
useAppStoreInstance.setislegendShow(true);
}
router.push(
......@@ -246,13 +247,14 @@ onMounted(async () => {
})
//console.log("1111111111111111111111111",useAppStoreInstance.isSourceLegendShow);
useAppStoreInstance.setGlobalisFromTosub(true);
// useAppStoreInstance.setGlobalisFromTosub(true);
useAppStoreInstance.setislegendShow(useAppStoreInstance.isSourceLegendShow ? true : false);
//console.log("11111111111111111111111112",useAppStoreInstance.islegendShow);
useAppStoreInstance.setiscontrolPanelShow(true);
useAppStoreInstance.setGlobalSubsystemSelectedTimeRange([]);
}
}
//调取接口回显
await initChartData();
});
......
src/pages/lefts/index.vue
浏览文件 @ 477d68b1
......@@ -24,7 +24,7 @@
<div class="orbit-visualization">
<!-- <ordit></ordit> -->
<el-carousel :key="carouselKey" indicator-position="none" height="120px" :loop="true"
<el-carousel :key="carouselKey" indicator-position="none" :loop="true" class="carouselClass"
:autoplay="globaleAutoPlay" :interval="Number(globalIntervalTime)" @change="handleCarouselChange">
<el-carousel-item v-for="indexs in orbitMetrics.length" :key="indexs"
style="text-align: center;height: 100%;">
......@@ -965,6 +965,7 @@ onUnmounted(() => {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 10px;
overflow-y: auto;
background-color: #010102;
......@@ -973,8 +974,11 @@ onUnmounted(() => {
/* 顶部容器 */
.header-container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
/* align-items: center; */
gap: 5px;
/* 方法1: 在定义变量时就计算好 */
......@@ -1913,6 +1917,19 @@ onUnmounted(() => {
margin-left: 10px;
}
.satellite-section,
.ground-system-section {
flex: 1;
}
:deep(.carouselClass) {
min-height: 120px;
}
:deep(.el-carousel__container) {
height: 100% !important;
min-height: 120px;
}
/* 响应式调整 */
@media (max-width: 768px) {
......
src/pages/lefts2/index.vue
浏览文件 @ 477d68b1
......@@ -386,9 +386,9 @@ const headerItemAllContent = ref({
const backHomeClick = () => {
console.log("我执行了");
router.push('/');
// router.push('/');--通过通信进行跳转
// //console.log("1111111111111111111111111", useAppStoreInstance.isSourceLegendShow);
useAppStoreInstance.setGlobalisFromTosub(true);
// useAppStoreInstance.setGlobalisFromTosub(true);
useAppStoreInstance.setislegendShow(useAppStoreInstance.isSourceLegendShow ? true : false);
// //console.log("11111111111111111111111112", useAppStoreInstance.islegendShow);
useAppStoreInstance.setiscontrolPanelShow(true);
......
src/pages/rights/index.vue
浏览文件 @ 477d68b1
......@@ -4,13 +4,14 @@
<!-- 顶部区域：标题与核心指标 -->
<div class="header-container">
<component :is="component1" :data="[capacityData, trafficData]" zoomHeight="2" :title="titles[0]" slogan="容量/流量"
:legendName="['链路层容量', '用户实际流量']" :lineArray="true" @changeTime="changeTimeFn(1, $event)"></component>
:legendName="['链路层容量', '用户实际流量']" :yName="yName1" :lineArray="true" @changeTime="changeTimeFn(1, $event)">
</component>
</div>
<!-- 卫星列表 -->
<div class="satellite-section">
<!-- <cdf></cdf> -->
<component :is="component2" :data="[availabilityData, actualAvailabilityData]" zoomHeight="14"
:title="titles[1]" slogan="可用性" :legendName="['规划可用性', '实际可用性']" :lineArray="true"
:title="titles[1]" slogan="可用性" :yName="yName2" :legendName="['规划可用性', '实际可用性']" :lineArray="true"
@changeTime="changeTimeFn(2, $event)">
</component>
</div>
......@@ -19,7 +20,8 @@
<div class="ground-system-section">
<!-- <instant></instant> -->
<component :is="component3" :data="[delayData, lossRateData]" zoomHeight="14" :title="titles[2]"
slogan="网络时延/丢包" :legendName="['搜星时延', '丢包率']" :lineArray="false" @changeTime="changeTimeFn(3, $event)">
slogan="网络时延/丢包" :legendName="['搜星时延', '丢包率']" :yName="yName3" :lineArray="false"
@changeTime="changeTimeFn(3, $event)">
</component>
</div>
</template>
......@@ -38,6 +40,10 @@ import Loading from '@/pages/all/components/loadingComponent/index.js'
const startTime = ref('')
const endTime = ref('')
const timeclick = ref(true)//选择时间时更新组件
// y轴单位
const yName1 = ref(["Mbps"])
const yName2 = ref([])
const yName3 = ref(["ms", ""])
//组件返回时信息根据type区分判断
const changeTimeFn = (type, times) => {
console.log(times, '对比', type);
......
src/store/module/app.js
浏览文件 @ 477d68b1
......@@ -35,17 +35,17 @@ const useAppStore = defineStore("app", {
subsystemSocketContent: "",
HeartbeatInterval: null,
isTimeLineShow: true,
islegendShow: true,
islegendShow: true,//主系统时间下方图例是否隐藏
isSourceLegendShow: true,
isdataPanelShow: true,
issatelliteOrbitShow: false,
issatelliteBeamShow: true,
iscontrolPanelShow: true,
iscontrolPanelShow: true,//控制主系统右上角悬浮框,分系统右上角悬浮框
globaleAutoPlay: true,
globalIntervalTime: 3000,
globalStartWss: false,
globalSatelliteSearchID: "4097",
globalSatelliteSearchID: "4097",//卫星id
globalSubsystemActiveIndex: "0",
globalSubsystemIsFastForward: false,
globalSubsystemSpeed: 1,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论