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

src/pages/all/components/cdf/cdfCurve.vue

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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,