页面优化

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

 <template>
-  <!-- PDF曲线图 -->
+  <!-- CDF曲线图 -->
   <div class="container">
     <div class="main">
       <div :id="idName" class="cdfCurve"></div>
@@ -57,7 +57,7 @@ const props = defineProps({
   },
   legendName: {
     type: String,
-    default: 'PDF曲线图'
+    default: 'CDF曲线图'
   },
   data: {
     type: Array,
@@ -315,7 +315,7 @@ function initChart() {
         symbol: 'none',
         lineStyle: {
           color: lineColor,
-          width: 5
+          width: 3
         },
         areaStyle: {
           color: {

src/pages/all/components/hotMapComponents/hotMap.vue

@@ -16,10 +16,11 @@ import * as echarts from 'echarts';
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import worldJson from '@/assets/json/world.json';
 import chineseWorldName from '@/assets/json/chineseWorldName.json';
-import testJson from '@/assets/json/test.json'
-
-// let data = null
+import useAppStore from '@/store/module/app'
 
+const appStore = useAppStore && useAppStore()
+const maxValue = ref(0)
+let myChart = null;
 const props = defineProps({
     title: {
         type: String,
@@ -28,16 +29,47 @@ const props = defineProps({
     data: {
         type: Array,
         default: () => []
+    },
+    mapCenter: {
+        type: Array,
+        default: () => []
     }
 })
 
 watch(() => props.data, (newVal) => {
-    updateChart();
+    // // updateChart();
+    setTimeout(() => {
+
+        initChart();
+    }, 0)
+
+}, { deep: true, immediate: true })
+
+const obj = {
+    '中国': [104, 35],
+    '巴西': [-51.9253, -14.2350],
+    '马来西亚': [109.5, 3.5]
+}
+
+watch(() => appStore.currentHotMapCountry, (newVal, oldVal) => {
+    initChart()
+})
 
+watch(() => maxValue.value, (newVal) => {
+    if (myChart && newVal > 0) {
+        myChart.setOption({
+            visualMap: {
+                text: [newVal, 0],
+                range: [0, newVal],
+                min: 0,
+                max: newVal,
+            }
+        }, { notMerge: false, lazyUpdate: false })
+    }
 })
 
 const data = computed(() => {
-    const result = []
+    let result = []
     // console.log('y--props.data', props.data)
     props.data.forEach(el => {
         let y = el.y
@@ -48,10 +80,12 @@ const data = computed(() => {
         // console.log('y', y)
         y.forEach(y => {
 
-            const { longitude: item, value } = y
+            const { longitude: item, value, GridCode } = y
             if (item.vertex1Lat !== null) {
                 result.push({
                     name: item.gridName,
+                    code: GridCode,
+                    count: value,
                     value: [
                         item.vertex1Lon,
                         item.vertex1Lat,
@@ -72,35 +106,65 @@ const data = computed(() => {
             // console.log('item', item)
         })
     })
+    result = result.sort((pre, next) => pre.count - next.count)
+    maxValue.value = result[result.length - 1]?.count || 0
+    // console.log('maxValue', maxValue)
+    result = mergeData(result, appStore.gridInfoList)
+    // if (myChart) {
+
+    //     myChart.setOption({
+    //         visualMap: {
+    //             text: [maxValue, 0],
+    //             range: [0, maxValue],
+    //             min: 0,
+    //             max: maxValue,
+
+    //         },
+    //     }, {
+    //         notMerge: true   // 👈 关键
+    //     })
+    // }
+    // console.log('result', result)
     return result
+
 })
-// const transformData = () => {
-//     data = testJson.data.map((item) => ({
-//         name: item.gridName,
-//         value: [
-//             item.vertex1Lon,
-//             item.vertex1Lat,
-//             item.vertex2Lon,
-//             item.vertex2Lat,
-//             item.vertex3Lon,
-//             item.vertex3Lat,
-//             item.vertex4Lon,
-//             item.vertex4Lat,
-//             item.vertex5Lon,
-//             item.vertex5Lat,
-//             item.vertex6Lon,
-//             item.vertex6Lat,
-//             Math.random() * 100,
-//         ],
-//     }));
-//     console.log('data', data)
-// }
-
-// transformData()
+
+const mergeData = (data, baseData = []) => {
+    // if(data)
+    let _baseData = baseData.map(item => ({
+        name: item.gridName,
+        code: item.gridCode,
+        value: [
+            item.vertex1Lon,
+            item.vertex1Lat,
+            item.vertex2Lon,
+            item.vertex2Lat,
+            item.vertex3Lon,
+            item.vertex3Lat,
+            item.vertex4Lon,
+            item.vertex4Lat,
+            item.vertex5Lon,
+            item.vertex5Lat,
+            item.vertex6Lon,
+            item.vertex6Lat,
+            null
+        ],
+    }))
+
+    _baseData.forEach(item => {
+        data.forEach(el => {
+            if (item.code == el.code) {
+                item.value = el.value
+            }
+
+        })
+    })
+    return _baseData
+}
 
 // 生成唯一的图表ID
 const chartId = ref('hexagonHeatMap_' + Math.random().toString(36).substr(2, 9));
-let myChart = null;
+
 
 // 初始化图表
 function initChart() {
@@ -138,9 +202,12 @@ function initChart() {
             formatter: function (params) {
                 const val = params.value
                 const color = params.color
-
-                // console.log('params', params)
-                return `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span> ${params.name}  ${val[12]}`
+                // console.log('tooltip', val)
+                if (val[12] == null) {
+                    return `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span> ${params.name}`
+                } else {
+                    return `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span> ${params.name}  ${val[12]}`
+                }
             }
         },
 
@@ -158,7 +225,8 @@ function initChart() {
         geo: {
             map: "world",
             roam: true,
-            center: [104, 35], // 中国中心
+            center: obj[appStore.currentHotMapCountry] || [104, 35], // 中国中心
+            // center: [-51.9253, -14.2350], // 巴西
             zoom: 10, // 放大倍数
             // aspectScale: Math.cos((chRoughLatitude * Math.PI) / 180),
             // nameProperty: 'name_en', // If using en name.
@@ -180,7 +248,10 @@ function initChart() {
             nameMap: chineseWorldName
         },
         visualMap: {
-            text: ["100", "10"],
+            text: (() => {
+                // console.log('maxValue', maxValue.value)
+                return [maxValue.value, 0]
+            })(),
             textStyle: {
                 color: "#fff"
             },
@@ -189,9 +260,9 @@ function initChart() {
             itemHeight: 68,
             left: "center", // 水平居中
             bottom: 1, // 距离底部 20px
-            range: [1, 100],
-            min: 1,
-            max: 100,
+            range: [0, maxValue.value],
+            min: 0,
+            max: maxValue.value,
             orient: "horizontal",
             inRange: {
                 color: [
@@ -215,8 +286,7 @@ function initChart() {
                     focus: "self",
                 },
                 renderItem(params, api) {
-                    // console.log("params", api.value(0));
-                    if (!api.value(0) == null) {
+                    if (api.value(0) == null) {
                         return null
                     }
                     const point1 = api.coord([api.value(0), api.value(1)]);
@@ -228,6 +298,24 @@ function initChart() {
 
                     const hex = [point1, point2, point3, point4, point5, point6];
 
+                    const val = api.value(12)
+                    // console.log('val', val)
+
+                    if (val == null || isNaN(val)) {
+                        return {
+                            type: "polygon",
+                            shape: {
+                                points: hex,
+                            },
+                            style: {
+                                fill: 'rgba(255,255,255,.6)',   // 👈 不填充
+                                // stroke: '#00ffff',     // 👈 描边颜色
+                                lineWidth: 1           // 👈 描边宽度
+
+                            },
+                        }
+                    }
+
                     return {
                         type: "polygon",
                         shape: {
@@ -261,6 +349,8 @@ function updateChart() {
     });
 }
 
+
+
 // 响应式调整图表大小
 function resizeChart() {
     if (myChart) {
@@ -270,10 +360,10 @@ function resizeChart() {
 
 onMounted(async () => {
     // 确保DOM渲染完成后初始化图表
-    nextTick(() => {
-        initChart();
-        window.addEventListener('resize', resizeChart);
-    });
+    // nextTick(() => {
+    //     initChart();
+    //     window.addEventListener('resize', resizeChart);
+    // });
 });
 
 onUnmounted(() => {

src/pages/all/components/instant/instantCurve.vue

@@ -233,7 +233,7 @@ function initChart() {
         }
       }
     },
-    dataZoom: dataX.value.length <= 5 ? [] : [
+    dataZoom: dataX.value.length <= 7 ? [] : [
       // {
       //   type: 'slider',
       //   xAxisIndex: 0,
@@ -294,7 +294,7 @@ function initChart() {
         symbol: 'none',
         lineStyle: {
           color: lineColor,
-          width: 5
+          width: 3
         },
         areaStyle: {
           color: {

src/pages/all/components/loadingComponent/index.js

@@ -12,7 +12,7 @@ const Loading = (function() {
 
   function createLoading(options = {}) {
     const {
-      text = 'Loading...',
+      text = '正在加载中...',
       background = 'rgba(0, 0, 0, 0.57)',
       color = '#fff',
       zIndex = 9999999,

src/pages/header/component/screenConfigCase.vue

@@ -80,7 +80,7 @@ const settingConfig = ref([
           },
           {
             value: '2',
-            label: 'PDF曲线',
+            label: 'CDF曲线',
 
           },
           {
@@ -141,7 +141,7 @@ const settingConfig = ref([
         options: [
           {
             value: '2',
-            label: 'PDF曲线',
+            label: 'CDF曲线',
           },
           {
             value: '3',
@@ -205,7 +205,7 @@ const settingConfig = ref([
           },
           {
             value: '2',
-            label: 'PDF曲线',
+            label: 'CDF曲线',
           },
           {
             value: '3',
@@ -376,7 +376,7 @@ const titleFn = (el) => {
   const templateSelector = el.templateSelector
   const curveType = {
     '1': '瞬时值曲线',
-    '2': 'PDF曲线',
+    '2': 'CDF曲线',
     '3': '热力图'
   }
 

src/pages/header/component/screenConfigeDialog.vue

 <template>
 
-  <div class="dashboard-container" v-loading="loading" element-loading-text="加载中..."
-    element-loading-background="rgba(0, 0, 0, 0.4)">
+  <div class="dashboard-container">
     <!-- 顶部导航栏 -->
     <header class="dashboard-header">
       <div class="logo">
@@ -61,7 +60,8 @@
               <div class="selector-item" v-if="!isGlobal">
                 <label class="selector-label" style="visibility: hidden;">占位符</label>
                 <div class="custom-select">
-                  <el-select v-model="childrenSelector.value" placeholder="" style="width: 100%;" :disabled="isGlobal">
+                  <el-select v-model="childrenSelector.value" placeholder="" style="width: 100%;" :disabled="isGlobal"
+                    @change="childrenOnChange">
                     <el-option v-for="item in childrenSelector.options" :key="item.value" :label="item.label"
                       :value="item.value" />
                   </el-select>
@@ -152,10 +152,11 @@ import hotMapComponent from '@/pages/all/components/hotMapComponents/index.vue';
 import cdf from '@/pages/all/components/cdf/index.vue';
 import instant from '@/pages/all/components/instant/index.vue';
 import screenConfigCase from './screenConfigCase.vue';
+import Loading from '@/pages/all/components/loadingComponent/index.js'
 import {
   getAvailability, getTemplateList, templateAdd, templateDel,
   templateDetail, templateuUpdate, templateConfigAdd, templateConfigQuery, getCapacity, getTraffic,
-  getDelay, getLossRate, getPanelCurve
+  getDelay, getLossRate, getPanelCurve, getGridInfoList
 } from '@/api/Zodiac';
 import useAppStore from '@/store/module/app'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -163,7 +164,7 @@ import { component } from 'vxe-pc-ui';
 
 
 let currentComponent1 = ref(markRaw(hotMapComponent))   //容量流量  热力图
-let currentComponent2 = ref(markRaw(cdf))  //可用性 PDF曲线  
+let currentComponent2 = ref(markRaw(cdf))  //可用性 CDF曲线  
 let currentComponent3 = ref(markRaw(instant))  //let  瞬时值曲线组件   //前面那个人写的好乱更屎一样，我服了，在这里偷偷吐槽一下嘿嘿
 
 let capacityData = ref([])
@@ -185,8 +186,6 @@ const screenConfigCaseRef = ref()
 const currentSettingConfig = ref()
 const templateCaseList = ref([])
 
-const loading = ref(true)
-
 
 const appStore = useAppStore();
 
@@ -198,6 +197,7 @@ watch(activeTab, (newVal) => {
   templateSelector.value = '' // 切换标签页时重置模板选择
 });
 const titles = ref(['', '', '']);
+let currentHotMapCountry = null
 
 const keliSelector = ref(
   {
@@ -315,14 +315,6 @@ const toggleDropdown = (index) => {
   dropdownVisible.value = dropdownVisible.value.map((val, i) => i === index ? !val : false);
 };
 
-const transformHotMapData = (data) => {
-  return data.map(item => ({
-    name: item.name,
-    x_value: item.x,
-    y_value: item.y
-  }))
-}
-
 // 容量
 const getCapacityData = async (data) => {
   const obj = {
@@ -415,7 +407,9 @@ const keliOnChange = () => {
   childrenSelector.value.value = ''
   switch (keliSelector.value.value) {
     case 'region':
-      childrenSelector.value.options = appStore.regionPanelData
+      console.log('appStore.regionPanelData', appStore.regionPanelData)
+      childrenSelector.value.options = appStore.regionPanelData;
+
       break;
     case 'grid':
       childrenSelector.value.options = appStore.gridPanelData
@@ -424,12 +418,22 @@ const keliOnChange = () => {
       childrenSelector.value.options = appStore.signalSitePanelData
       break;
   }
+  console.log('childrenSelector.value', childrenSelector.value)
 }
+
+const childrenOnChange = (item) => {
+  // console.log(item)
+  if (keliSelector.value.value == 'region') {
+    currentHotMapCountry = item
+  }
+
+}
+
 watch(() => keliSelector.value.value, keliOnChange)
 
 const handleApply = async () => {
   let ret = null
-  loading.value = true
+  Loading.show()
   if (currentSettingConfig.value.templateAdd) { // 如果是新增的模板，先调用新增接口，再调用修改接口
     ret = await templateAdd({
       // templateName: currentSettingConfig.value.templateName, // 模板名
@@ -444,7 +448,7 @@ const handleApply = async () => {
 
   if (ret.code == 200) {
     await handleList() // 刷新列表获取最新数据
-    loading.value = false
+    Loading.hide();
     ElMessage({
       message: '模板设置成功',
       type: 'success',
@@ -461,7 +465,7 @@ const handleConfigApplay = async () => {
     })
     return
   }
-  loading.value = true
+  Loading.show()
   const ret = await templateConfigAdd({
     granularity: keliSelector.value.value,
     granularityValue: childrenSelector.value.value,
@@ -478,7 +482,7 @@ const handleConfigApplay = async () => {
 
     }
     await getPanelCurveData(data);
-    loading.value = false
+    Loading.hide()
     appStore.chartConfig = {
       _capacityData: capacityData.value,
       _trafficData: trafficData.value,
@@ -490,6 +494,7 @@ const handleConfigApplay = async () => {
       component3: currentComponent3.value,
       _titles: titles.value
     }
+    appStore.currentHotMapCountry = currentHotMapCountry
     // console.log('appStore.chartConfig 传递的时候', appStore.chartConfig)
 
     // Promise.all([
@@ -517,7 +522,7 @@ const handleConfigApplay = async () => {
 
 const handleConfigData = async () => {
   const ret = await templateConfigQuery()
-  if (ret.code == 200 && ret.data.templateConfigResponse !== null) {
+  if (ret.code == 200 && ret.data !== null && ret.data?.templateConfigResponse !== null) {
     keliSelector.value.value = ret.data.granularity
     setTimeout(() => {
       childrenSelector.value.value = ret.data.granularityValue
@@ -547,7 +552,7 @@ const handleList = async () => {
   if (ret.code == 200) {
     templateCaseList.value = ret.data;
     currentSettingConfig.value = ret.data[activeTemplateIndex.value]
-    loading.value = false
+    Loading.hide()
   }
 }
 
@@ -576,7 +581,7 @@ const calculateConfig = (selectedTemplate = currentSettingConfig.value) => {
 
   const curveType = {
     '1': '瞬时值曲线',
-    '2': 'PDF曲线',
+    '2': 'CDF曲线',
     '3': '热力图'
   }
 
@@ -591,10 +596,14 @@ const calculateConfig = (selectedTemplate = currentSettingConfig.value) => {
   titles.value[1] = curveType[selectedTemplate.availabilityCurveType] + '-' + geoTimeStandard[selectedTemplate.availabilityGeoStandard] + '-' + geoTimeStandard[selectedTemplate.availabilityTimeStandard]
   titles.value[2] = curveType[selectedTemplate.latencyCurveType] + '-' + geoTimeStandard[selectedTemplate.latencyGeoStandard] + '-' + geoTimeStandard[selectedTemplate.latencyTimeStandard]
 
-
 }
 
-const initChartData = () => {
+const getGridInfoListData = async () => {
+  const ret = await getGridInfoList()
+  if (ret.code == 200) {
+    appStore.gridInfoList = ret.data
+  }
+
 
 }
 
@@ -729,7 +738,7 @@ const initChartData = () => {
 .dashboard-main {
   flex: 1;
   padding: 1rem;
-  overflow-y: auto;
+  overflow-y: hidden;
 }
 
 /* 标签页样式 */

src/pages/header/index.vue

@@ -59,7 +59,7 @@
 
     <el-dialog v-model="screenConfigeDialogVisible" :destroy-on-close="false" :modal="false" width="100"
       :show-close="false" :before-close="handleScreenConfigeClose"
-      style=" background-color: rgba(0, 0, 0,0);padding: 0;margin: 0;">
+      style="background-color: rgba(0, 0, 0,0);padding: 0;margin: 0;z-index: 999;">
       <screenConfige @handleScreenConfigeClose="handleScreenConfigeClose"></screenConfige>
       <!-- <div style="width: 100px;height: 100px;background-color: blueviolet;"></div> -->
     </el-dialog>
@@ -94,7 +94,7 @@ import local from '@/utils/local.js'
 import screenConfige from './component/screenConfigeDialog.vue'
 import { useRouter } from 'vue-router';
 import useAppStore from '@/store/module/app'
-import { getRegionPanel, getSignalSitePanel, getGridPanel } from "@/api/Zodiac";
+import { getRegionPanel, getSignalSitePanel, getGridPanel, getGridInfoList } from "@/api/Zodiac";
 
 
 import errorDialog from '@/pages/lefts/component/errorDialog.vue'
@@ -149,6 +149,7 @@ const formatDateTime = () => {
 const handleImageError = (e) => {
   imageError.value = true;
   e.target.style.display = 'none';
+  // console.log('穿透')
 };
 
 
@@ -214,10 +215,18 @@ onBeforeMount(() => {
   }, 1000);
 });
 
+const getGridInfoListData = async () => {
+  const ret = await getGridInfoList()
+  if (ret.code == 200) {
+    useAppStoreInstance.gridInfoList = ret.data
+  }
+}
+
 
 onMounted(async () => {
   // window.addEventListener('message', handleUEMessage);
   // window.addEventListener('emitUIInteraction', handleUEMessage1);
+  await getGridInfoListData()
   window.ue.interface.emitUIInteraction = (res) => {
     //    if (window.ue5) {
     //     window.ue5("callBackTimeFn", `ue传递给vue的数据111111111111111111:${JSON.stringify(res)},${JSON.stringify(res.locationReplace)}`)
@@ -276,7 +285,7 @@ onMounted(async () => {
 
 
 
- await initChartData();
+  await initChartData();
 
 
 
@@ -320,12 +329,12 @@ const stopDrag = () => {
 };
 
 
-const initChartData = async () => { 
-// console.log("初始化数据",useAppStoreInstance);
-  const [res1,res2,res3] = await Promise.all([getRegionPanel(), getSignalSitePanel(), getGridPanel()])
-  useAppStoreInstance.regionPanelData =  res1.code==200?res1.data.map(item=>({value:item,label:item})):[]
-  useAppStoreInstance.signalSitePanelData =  res2.code==200?res2.data.map((item)=>({value:item.siteId,label:item.siteName})):[]
-  useAppStoreInstance.gridPanelData = res3.code==200?res3.data.map(item=>({value:item.gridCode,label:item.gridName})):[]
+const initChartData = async () => {
+  // console.log("初始化数据",useAppStoreInstance);
+  const [res1, res2, res3] = await Promise.all([getRegionPanel(), getSignalSitePanel(), getGridPanel()])
+  useAppStoreInstance.regionPanelData = res1.code == 200 ? res1.data.map(item => ({ value: item, label: item })) : []
+  useAppStoreInstance.signalSitePanelData = res2.code == 200 ? res2.data.map((item) => ({ value: item.siteId, label: item.siteName })) : []
+  useAppStoreInstance.gridPanelData = res3.code == 200 ? res3.data.map(item => ({ value: item.gridCode, label: item.gridName })) : []
 };
 
 

src/pages/rights/index.vue

 <template>
-  <div class="constellation-panel" v-loading="loading">
+  <div class="constellation-panel">
     <!-- 顶部区域：标题与核心指标 -->
     <div class="header-container">
       <!-- <allHotMap></allHotMap> -->
-      <component :is="component1" :key="component1" :data="[capacityData, trafficData]" zoomHeight="2"
-        :title="titles[0]" slogan="容量/流量" :legendName="['链路层容量', '用户实际流量']"></component>
+      <component :is="component1" :data="[capacityData, trafficData]" zoomHeight="2" :title="titles[0]" slogan="容量/流量"
+        :legendName="['链路层容量', '用户实际流量']"></component>
     </div>
     <!-- 卫星列表 -->
     <div class="satellite-section">
       <!-- <cdf></cdf> -->
-      <component :is="component2" :key="component2" :data="[availabilityData]" zoomHeight="14" :title="titles[1]"
-        slogan="可用性" :legendName="['规划可用性', '实际可用性']"></component>
+      <component :is="component2" :data="[availabilityData]" zoomHeight="14" :title="titles[1]" slogan="可用性"
+        :legendName="['规划可用性', '实际可用性']"></component>
 
     </div>
 
     <!-- 地面系统 -->
     <div class="ground-system-section">
       <!-- <instant></instant> -->
-      <component :is="component3" :key="component3" :data="[delayData, lossRateData]" zoomHeight="14" :title="titles[2]"
-        slogan="网络时延/丢包" :legendName="['搜星时延', '丢包率']"></component>
+      <component :is="component3" :data="[delayData, lossRateData]" zoomHeight="14" :title="titles[2]" slogan="网络时延/丢包"
+        :legendName="['搜星时延', '丢包率']"></component>
     </div>
   </div>
 </template>
@@ -31,6 +31,7 @@ import cdf from '@/pages/all/components/cdf/index.vue'
 import instant from '@/pages/all/components/instant/index.vue'
 import useAppStore from '@/store/module/app'
 import { getPanelCurve, templateConfigQuery } from '@/api/Zodiac'
+import Loading from '@/pages/all/components/loadingComponent/index.js'
 
 
 const component1 = ref(markRaw(allHotMap))
@@ -45,7 +46,7 @@ let availabilityData = ref([])
 const titles = ref(['', '', '']);
 
 const appStore = useAppStore();
-const loading = ref(false)
+// const loading = ref(false)
 
 let granularity = null
 let granularityValue = null
@@ -91,19 +92,22 @@ const getPanelCurveData = async (data) => {
 
 const hanleTemplateConfigQuery = async () => {
   const ret = await templateConfigQuery()
-  if (ret.code == 200 && ret.data.templateConfigResponse !== null) {
+  if (ret.code == 200 && ret.data !== null && ret.data.templateConfigResponse !== null) {
     granularity = ret.data.granularity
     granularityValue = ret.data.granularityValue
     calculateConfig(ret.data.templateConfigResponse)
+    if (granularity == "region") {
+      appStore.currentHotMapCountry = granularityValue
+    }
   }
-  console.log('templateConfigQuery', ret)
 }
 
 
 onMounted(async () => {
+  Loading.show()
   await hanleTemplateConfigQuery()
   await getPanelCurveData()
-  loading.value = false
+  Loading.hide()
 })
 
 const calculateConfig = (selectedTemplate) => {
@@ -117,9 +121,13 @@ const calculateConfig = (selectedTemplate) => {
   component2.value = obj[selectedTemplate.availabilityCurveType]
   component3.value = obj[selectedTemplate.latencyCurveType]
 
+  console.log('component1', component1.value)
+  console.log('component2', component2.value)
+  console.log('component3', component3.value)
+
   const curveType = {
     '1': '瞬时值曲线',
-    '2': 'PDF曲线',
+    '2': 'CDF曲线',
     '3': '热力图'
   }
 
@@ -134,6 +142,7 @@ const calculateConfig = (selectedTemplate) => {
   titles.value[1] = curveType[selectedTemplate.availabilityCurveType] + '-' + geoTimeStandard[selectedTemplate.availabilityGeoStandard] + '-' + geoTimeStandard[selectedTemplate.availabilityTimeStandard]
   titles.value[2] = curveType[selectedTemplate.latencyCurveType] + '-' + geoTimeStandard[selectedTemplate.latencyGeoStandard] + '-' + geoTimeStandard[selectedTemplate.latencyTimeStandard]
 
+
 }
 
 // 激活的标签页

src/store/module/app.js

@@ -6,156 +6,159 @@
  * @FilePath: \yuanxinPro\src\store\module\app.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import Cookies from 'js-cookie'
-import { ElMessage } from 'element-plus';
-import { tr } from 'element-plus/es/locales.mjs';
+import Cookies from "js-cookie";
+import { ElMessage } from "element-plus";
+import { tr } from "element-plus/es/locales.mjs";
 
-const useAppStore = defineStore(
-  'app',
-  {
-    state: () => ({
-      // 记录时间轴走的时间
-      globalTimeLineEndSelectTime: "2025-11-02 00:00:00",
-      globalTimeLineStartTime: "2025-11-02 00:00:00",
-      globalTimeLineEndTime: "2025-11-02 00:00:00",
-      globalisFromTosub: false,
-      footerTimeHasedSelectTimeToSub: false,
-      globalSubsystemSelectedTimeRange: ['Sun Nov 02 2025 00:00:00 GMT+0800 (中国标准时间) ','Tue Nov 04 2025 00:00:00 GMT+0800 (中国标准时间) '],
+const useAppStore = defineStore("app", {
+  state: () => ({
+    // 记录时间轴走的时间
+    globalTimeLineEndSelectTime: "2025-11-02 00:00:00",
+    globalTimeLineStartTime: "2025-11-02 00:00:00",
+    globalTimeLineEndTime: "2025-11-02 00:00:00",
+    globalisFromTosub: false,
+    footerTimeHasedSelectTimeToSub: false,
+    globalSubsystemSelectedTimeRange: [
+      "Sun Nov 02 2025 00:00:00 GMT+0800 (中国标准时间) ",
+      "Tue Nov 04 2025 00:00:00 GMT+0800 (中国标准时间) ",
+    ],
 
-      globalLeftWssCONTINE: false,
-      
-      globalRecordMainSysTaskCode: 0,
+    globalLeftWssCONTINE: false,
 
+    globalRecordMainSysTaskCode: 0,
 
+    subSystemTimeLineEndSelectTime: "-",
+    subsystemSocket: null,
+    subsystemSocketContent: "",
+    HeartbeatInterval: null,
+    isTimeLineShow: true,
+    islegendShow: true,
+    isSourceLegendShow: true,
+    isdataPanelShow: true,
+    issatelliteOrbitShow: true,
+    issatelliteBeamShow: true,
+    iscontrolPanelShow: true,
 
-      subSystemTimeLineEndSelectTime: "-",
-      subsystemSocket: null,
-      subsystemSocketContent: '',
-      HeartbeatInterval: null,
-      isTimeLineShow: true,
-      islegendShow: true,
-      isSourceLegendShow: true,
-      isdataPanelShow: true,
-      issatelliteOrbitShow: true,
-      issatelliteBeamShow: true,
-      iscontrolPanelShow: true,
+    globaleAutoPlay: true,
+    globalIntervalTime: 3000,
+    globalStartWss: false,
+    globalSatelliteSearchID: "4097",
+    globalSubsystemActiveIndex: "0",
+    globalSubsystemIsFastForward: false,
+    globalSubsystemSpeed: 1,
+    globalSubsystemTaskCode: 0,
+    globalSubsystemSelectedStartTime: [
+      "Sun Nov 02 2025 00:00:00 GMT+0800 (中国标准时间) ",
+      "Tue Nov 04 2025 00:00:00 GMT+0800 (中国标准时间) ",
+    ],
+    globalSubsystemSelectedEndTime: "2025-11-04 00:00:00", //暂未使用
+    globalDisableTimeLine: true,
 
-      globaleAutoPlay: true,
-      globalIntervalTime: 3000,
-      globalStartWss: false,
-      globalSatelliteSearchID: "4097",
-      globalSubsystemActiveIndex: "0",
-      globalSubsystemIsFastForward: false,
-      globalSubsystemSpeed: 1,
-      globalSubsystemTaskCode: 0,
-      globalSubsystemSelectedStartTime: ['Sun Nov 02 2025 00:00:00 GMT+0800 (中国标准时间) ','Tue Nov 04 2025 00:00:00 GMT+0800 (中国标准时间) '],
-      globalSubsystemSelectedEndTime: '2025-11-04 00:00:00',//暂未使用
-      globalDisableTimeLine: true,
+    gridPanelData: [], //格网面板
+    regionPanelData: [], //区域面板
+    signalSitePanelData: [], //信关站面板
 
-      gridPanelData:[], //格网面板
-      regionPanelData:[], //区域面板
-      signalSitePanelData:[], //信关站面板
+    chartConfig: {}, //图表配置项,
 
-   
-    }),
-    actions: {
-      setGlobalRecordMainSysTaskCode(status) {
-        this.globalRecordMainSysTaskCode = status
-      },
-      setGlobalLeftWssCONTINE(status) {
-        this.globalLeftWssCONTINE = status
-      },
-      setSubSystemTimeLineEndSelectTime(status) {
-        this.subSystemTimeLineEndSelectTime = status
-      },
-      setFooterTimeHasedSelectTimeToSub(status) {
-        this.footerTimeHasedSelectTimeToSub = status
-      },
-      setGlobalSubsystemSelectedTimeRange(range) {
-        this.globalSubsystemSelectedTimeRange = range;
-      },
-      setGlobalisFromTosub(status) {
-        this.globalisFromTosub = status
-      },
-      setGlobalTimeLineEndSelectTime(time) {
-        this.globalTimeLineEndSelectTime = time;
-      },
-      setGlobalTimeLineStartTime(time) {
-        this.globalTimeLineStartTime = time;
-      },
-      setGlobalTimeLineEndTime(time) {
-        this.globalTimeLineEndTime = time;
-      },
-      setSubsystemSocket(socket) {
-        this.subsystemSocket = socket;
-      },
-      setSubsystemSocketContent(content) {
-        this.subsystemSocketContent = content;
-      },
-      setHeartbeatInterval(interval) {
-        this.HeartbeatInterval = interval;
-      },
-      setisTimeLineShow(status) {
-         this.isTimeLineShow = status
-      },
-      setislegendShow(status) {
-         this.islegendShow = status
-         
-      },
-      setisSourceLegendShow(status) {
-         this.isSourceLegendShow = status
-      },
-      setisdataPanelShow(status) {
-         this.isdataPanelShow = status
-      },
-      setissatelliteOrbitShow(status) {
-         this.issatelliteOrbitShow = status
-      },
+    currentHotMapCountry: null,
+  }),
+  actions: {
+    setGlobalRecordMainSysTaskCode(status) {
+      this.globalRecordMainSysTaskCode = status;
+    },
+    setGlobalLeftWssCONTINE(status) {
+      this.globalLeftWssCONTINE = status;
+    },
+    setSubSystemTimeLineEndSelectTime(status) {
+      this.subSystemTimeLineEndSelectTime = status;
+    },
+    setFooterTimeHasedSelectTimeToSub(status) {
+      this.footerTimeHasedSelectTimeToSub = status;
+    },
+    setGlobalSubsystemSelectedTimeRange(range) {
+      this.globalSubsystemSelectedTimeRange = range;
+    },
+    setGlobalisFromTosub(status) {
+      this.globalisFromTosub = status;
+    },
+    setGlobalTimeLineEndSelectTime(time) {
+      this.globalTimeLineEndSelectTime = time;
+    },
+    setGlobalTimeLineStartTime(time) {
+      this.globalTimeLineStartTime = time;
+    },
+    setGlobalTimeLineEndTime(time) {
+      this.globalTimeLineEndTime = time;
+    },
+    setSubsystemSocket(socket) {
+      this.subsystemSocket = socket;
+    },
+    setSubsystemSocketContent(content) {
+      this.subsystemSocketContent = content;
+    },
+    setHeartbeatInterval(interval) {
+      this.HeartbeatInterval = interval;
+    },
+    setisTimeLineShow(status) {
+      this.isTimeLineShow = status;
+    },
+    setislegendShow(status) {
+      this.islegendShow = status;
+    },
+    setisSourceLegendShow(status) {
+      this.isSourceLegendShow = status;
+    },
+    setisdataPanelShow(status) {
+      this.isdataPanelShow = status;
+    },
+    setissatelliteOrbitShow(status) {
+      this.issatelliteOrbitShow = status;
+    },
 
-      setissatelliteBeamShow(status) {
-         this.issatelliteBeamShow = status
-      },
-       setiscontrolPanelShow(status) {
-         this.iscontrolPanelShow = status
-      },
-      setglobaleAutoPlay(status) {
-         this.globaleAutoPlay = status
-      },
-      setglobalIntervalTime(status) {
+    setissatelliteBeamShow(status) {
+      this.issatelliteBeamShow = status;
+    },
+    setiscontrolPanelShow(status) {
+      this.iscontrolPanelShow = status;
+    },
+    setglobaleAutoPlay(status) {
+      this.globaleAutoPlay = status;
+    },
+    setglobalIntervalTime(status) {
       //   //console.log("开始执行间隔时间");
-        
-         this.globalIntervalTime = status
-      },
-      setglobalStartWss(status) {
-         // //console.log("同步socket数据");
-         
-         this.globalStartWss = status
-      },
-      setglobalSatelliteSearchID(status) {
+
+      this.globalIntervalTime = status;
+    },
+    setglobalStartWss(status) {
+      // //console.log("同步socket数据");
+
+      this.globalStartWss = status;
+    },
+    setglobalSatelliteSearchID(status) {
       //   //console.log("设置卫星搜索ID");
-        
-         this.globalSatelliteSearchID = status
-      },
-      setglobalSubsystemActiveIndex(status) {
-        this.globalSubsystemActiveIndex = status
-      },
-      setglobalSubsystemIsFastForward(status) {
-        this.globalSubsystemIsFastForward = status
-      },
-      setglobalSubsystemSpeed(status) {
-        this.globalSubsystemSpeed = status
-      },
-      setglobalSubsystemTaskCode(status) {
-        this.globalSubsystemTaskCode = status
-      },
 
-      setglobalSubsystemSelectedStartTime(status) {
-        this.globalSubsystemSelectedStartTime = status
-      },
-      setglobalSubsystemSelectedEndTime(status) {
-        this.globalSubsystemSelectedEndTime = status
-      },
-    }
-  })
+      this.globalSatelliteSearchID = status;
+    },
+    setglobalSubsystemActiveIndex(status) {
+      this.globalSubsystemActiveIndex = status;
+    },
+    setglobalSubsystemIsFastForward(status) {
+      this.globalSubsystemIsFastForward = status;
+    },
+    setglobalSubsystemSpeed(status) {
+      this.globalSubsystemSpeed = status;
+    },
+    setglobalSubsystemTaskCode(status) {
+      this.globalSubsystemTaskCode = status;
+    },
+
+    setglobalSubsystemSelectedStartTime(status) {
+      this.globalSubsystemSelectedStartTime = status;
+    },
+    setglobalSubsystemSelectedEndTime(status) {
+      this.globalSubsystemSelectedEndTime = status;
+    },
+  },
+});
 
-export default useAppStore
+export default useAppStore;