update

src/api/Zodiac.js

@@ -7,65 +7,57 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%A
  */
 
-import request from '@/utils/request'
+import request from "@/utils/request";
 // 左侧菜单-星座构型信息
 export function stellationInfoApi() {
   return request({
-    url: '/constellationInfo/list',
-    method: 'get',
-   
-  })
+    url: "/constellationInfo/list",
+    method: "get",
+  });
 }
 // 左侧菜单-卫星列表信息
 export function stellateListInfoApi() {
   return request({
-    url: '/SatelliteBasicInfo/list',
-    method: 'get',
-    
-  })
+    url: "/SatelliteBasicInfo/list",
+    method: "get",
+  });
 }
 // 左侧菜单-地面系统信息
 export function siteDataInfoListApi() {
   return request({
-    url: '/SiteData/list',
-    method: 'get'
-   
-  })
+    url: "/SiteData/list",
+    method: "get",
+  });
 }
 
-
 export function siteDataPageErrorInfoApi(data) {
   return request({
-    url: '/SiteData/pageError',
-    method: 'post',
-    params: data
-  })
+    url: "/SiteData/pageError",
+    method: "post",
+    params: data,
+  });
 }
 
 export function groundSystemStatisticsInfoApi() {
   return request({
-    url: '/GroundSystem/statistics',
-    method: 'get',
- 
-  })
+    url: "/GroundSystem/statistics",
+    method: "get",
+  });
 }
 
-
 export function subSystemStatisticsInfoApi() {
-
   return request({
-    url: '/GroundSystem/statistics',
-    method: 'get',
+    url: "/GroundSystem/statistics",
+    method: "get",
     // data: data
-  })
+  });
 }
 
 export function getSubSystemOpitionListApi(data) {
   return request({
-    url: '/subSystem/getSubSystem?subSystemType='+data.subSystemType,
-    method: 'get',
-   
-  })
+    url: "/subSystem/getSubSystem?subSystemType=" + data.subSystemType,
+    method: "get",
+  });
 }
 
 //  //console.log("propsDate-min--3333333333--------",{
@@ -77,7 +69,66 @@ export function getSubSystemOpitionListApi(data) {
 //   });
 export function getSubSystemCurveListApi(data) {
   return request({
-    url: '/subSystem/getSubSystemCurve?satelliteId='+data.satelliteId+'&startTime='+data.startTime+'&endTime='+data.endTime+'&code='+data.code +'&subSystemType='+data.subSystemType,
-    method: 'get'
-  })
+    url:
+      "/subSystem/getSubSystemCurve?satelliteId=" +
+      data.satelliteId +
+      "&startTime=" +
+      data.startTime +
+      "&endTime=" +
+      data.endTime +
+      "&code=" +
+      data.code +
+      "&subSystemType=" +
+      data.subSystemType,
+    method: "get",
+  });
+}
+
+//配置模板中的区域数据
+export function getRegionPanel() {
+  return request({
+    url: "/commPanel/getRegionPanel",
+    method: "get",
+  });
+}
+
+//配置模板中的信关站数据
+export function getSignalSitePanel() {
+  return request({
+    url: "/commPanel/getSignalSitePanel",
+    method: "get",
+  });
+}
+
+//配置模板中的网格数据
+export function getGridPanel() {
+  return request({
+    url: "/commPanel/getGridPanel",
+    method: "get",
+  });
+}
+
+// 容量/流量数据
+export function getCapacityAndTraffic(data) {
+  return request({
+    url: "/commPanel/getCapacityAndTraffic",
+    method: "get",
+    params: {
+      gridCodes: data.gridCodes || null,
+      granularity: data.granularity,
+      startTime: data.startTime,
+      endTime: data.endTime,
+      regionName:data.regionName || null,
+      signalSiteCode: data.signalSiteCode || null,
+
+    },
+  });
+}
+
+//格网数据
+export function getGridInfoList() {
+  return request({
+    url: "/GridInfo/list",
+    method: "get",
+  });
 }
\ No newline at end of file

src/pages/header/component/screenConfigCase.vue

@@ -8,22 +8,21 @@
     </div>
     <div class="templateCase_right_content_body">
       <div class="horizontal-sections">
-        <div class="section-item" v-for="(item, index) in 3" :key="index">
+        <div class="section-item" v-for="(item, index) in titles" :key="index">
           <div class="section-item_title">
-                <span>内容{{item}}</span>
+            <span>{{ item.title }}</span>
           </div>
           <div class="section-item_content_up">
-               <div class="selector-item" v-for="(item, index) in objectSelector" :key="index">
-                <label class="selector-label">{{ item.label }}</label>
+            <!-- <div v-for="(element,index) in [template1Selector,template2Selector]" :key="index">
+
+              </div> -->
+            <div class="selector-item" v-for="(item, key) in item.templateSelector" :key="key">
+              <label class="selector-label">{{ item.label}}</label>
               <div class="custom-select">
                 <!-- 粒度 -->
-                  <el-select v-model="item.default"  placeholder="Select" style="width: 100%;" >
-                    <el-option
-                      v-for="itemele in item.options"
-                      :key="itemele.value"
-                      :label="itemele.label"
-                      :value="itemele.value"
-                    />
+                <el-select v-model="item.default" placeholder="" style="width: 100%;">
+                  <el-option v-for="itemele in item.options" :key="itemele.value" :label="itemele.label"
+                    :value="itemele.value" />
                 </el-select>
               </div>
             </div>
@@ -44,142 +43,242 @@
 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';
-   const allIdName = ref([['allIdName11', 'allIdName12'], ['allIdName21', 'allIdName22']]);
+
+
+const allIdName = ref([['allIdName11', 'allIdName12'], ['allIdName21', 'allIdName22']]);
 // 组件逻辑可以在这里添加
-const objectSelector = [
+const titles = [
   {
-    label: '地面粒度',
-    default: '区域',
+    title: '容量/流量',
+    templateSelector: [
+      {
+        label: '曲线类型',
+        default: '热力图',
         options: [
           {
-        value: '区域',
-        label: '区域',
+            value: '瞬时值曲线',
+            label: '瞬时值曲线',
+          },
+          {
+            value: 'PDF曲线',
+            label: 'PDF曲线',
+          },
+          {
+            value: '热力图',
+            label: '热力图',
+          },
+        ]
       },
       {
-        value: '站点',
-        label: '站点',
+        label: '地理标准',
+        default: '最小值',
+        options: [
+          {
+            value: '最小值',
+            label: '最小值',
           },
           {
-        value: '设备类型',
-        label: '设备类型',
+            value: '最大值',
+            label: '最大值',
           },
           {
-        value: '具体设备',
-        label: '具体设备',
+            value: '平均值',
+            label: '平均值',
           }
         ]
       },
       {
-    label: '卫星粒度',
-    default: '卫星',
+        label: '时间标准',
+        default: '最小值',
         options: [
           {
-        value: '卫星',
-        label: '卫星',
+            value: '最小值',
+            label: '最小值',
           },
           {
-        value: '星座',
-        label: '星座',
+            value: '最大值',
+            label: '最大值',
           },
           {
-        value: '波束',
-        label: '波束',
+            value: '平均值',
+            label: '平均值',
+          }
+        ]
+      },
+    ]
   },
   {
-        value: '转发器',
-        label: '转发器',
-      }
+    title: '可用性',
+      templateSelector: [
+      {
+        label: '曲线类型',
+        default: '热力图',
+        options: [
+          {
+            value: 'PDF曲线',
+            label: 'PDF曲线',
+          },
+          {
+            value: '热力图',
+            label: '热力图',
+          },
         ]
       },
       {
-    label: '模板',
-    default: 'Example #1',
+        label: '地理标准',
+        default: '最小值',
         options: [
           {
-        value: 'Example #1',
-        label: 'Example #1',
+            value: '最小值',
+            label: '最小值',
           },
           {
-        value: 'Example #2',
-        label: 'Example #2',
+            value: '最大值',
+            label: '最大值',
           },
           {
-        value: 'Example #3',
-        label: 'Example #3',
+            value: '平均值',
+            label: '平均值',
+          }
+        ]
       },
       {
-        value: '自定义模板',
-        label: '自定义模板',
+        label: '时间标准',
+        default: '最小值',
+        options: [
+          {
+            value: '最小值',
+            label: '最小值',
+          },
+          {
+            value: '最大值',
+            label: '最大值',
+          },
+          {
+            value: '平均值',
+            label: '平均值',
           }
         ]
       },
+    ]
+  },
   {
-    label: '地面粒度',
-    default: '区域',
+    title: '网络时延/丢包',
+      templateSelector: [
+      {
+        label: '时延曲线类型',
+        default: '瞬时值曲线',
         options: [
           {
-        value: '区域',
-        label: '区域',
+            value: '瞬时值曲线',
+            label: '瞬时值曲线',
+          },
+          {
+            value: 'PDF曲线',
+            label: 'PDF曲线',
           },
           {
-        value: '站点',
-        label: '站点',
+            value: '热力图',
+            label: '热力图',
+          },
+        ]
       },
       {
-        value: '设备类型',
-        label: '设备类型',
+        label: '地理标准',
+        default: '最小值',
+        options: [
+          {
+            value: '最小值',
+            label: '最小值',
           },
           {
-        value: '具体设备',
-        label: '具体设备',
+            value: '最大值',
+            label: '最大值',
+          },
+          {
+            value: '平均值',
+            label: '平均值',
           }
         ]
       },
       {
-    label: '卫星粒度',
-    default: '卫星',
+        label: '时间标准',
+        default: '最小值',
         options: [
           {
-        value: '卫星',
-        label: '卫星',
+            value: '最小值',
+            label: '最小值',
+          },
+          {
+            value: '最大值',
+            label: '最大值',
           },
           {
-        value: '星座',
-        label: '星座',
+            value: '平均值',
+            label: '平均值',
+          }
+        ]
       },
         {
-        value: '波束',
-        label: '波束',
+        label: '丢包曲线类型',
+        default: '瞬时值曲线',
+        options: [
+          {
+            value: '最小值',
+            label: '最小值',
           },
           {
-        value: '转发器',
-        label: '转发器',
+            value: '最大值',
+            label: '最大值',
+          },
+          {
+            value: '平均值',
+            label: '平均值',
           }
         ]
       },
         {
-    label: '模板',
-    default: 'Example #1',
+        label: '地理标准',
+        default: '最小值',
         options: [
           {
-        value: 'Example #1',
-        label: 'Example #1',
+            value: '最小值',
+            label: '最小值',
           },
           {
-        value: 'Example #2',
-        label: 'Example #2',
+            value: '最大值',
+            label: '最大值',
           },
           {
-        value: 'Example #3',
-        label: 'Example #3',
+            value: '平均值',
+            label: '平均值',
+          }
+        ]
       },
       {
-        value: '自定义模板',
-        label: '自定义模板',
+        label: '时间标准',
+        default: '最小值',
+        options: [
+          {
+            value: '最小值',
+            label: '最小值',
+          },
+          {
+            value: '最大值',
+            label: '最大值',
+          },
+          {
+            value: '平均值',
+            label: '平均值',
           }
         ]
+      },
+    ]
   }
 ];
+
+
+const template2Selector = []
 </script>
 
 <style scoped>
@@ -208,22 +307,26 @@ const objectSelector = [
 }
 
 .horizontal-sections {
-  display: flex;              /* 启用弹性布局来水平排列 */
+  display: flex;
+  /* 启用弹性布局来水平排列 */
   height: 100%;
   border-right: 1px solid rgba(255, 0, 0, 0.1);
 
 }
 
 .section-item {
-  flex: 1;                    /* 平均分配宽度 */
+  flex: 1;
+  /* 平均分配宽度 */
   height: 100%;
   /* background-color: #f5f10c; */
   /* border: 1px solid rgba(255, 255, 255, 0.1); */
   padding: 0px 10px;
   padding-top: 5px;
-  display: flex;              /* 使内部内容也使用弹性布局 */
-  flex-direction: column;     /* 垂直排列子元素 */
-/* overflow-y: auto; */
+  display: flex;
+  /* 使内部内容也使用弹性布局 */
+  flex-direction: column;
+  /* 垂直排列子元素 */
+  /* overflow-y: auto; */
 }
 
 .templateCase_right_content_header_item {
@@ -237,13 +340,13 @@ const objectSelector = [
 
 
 
-.section-item_title{
+.section-item_title {
   height: 5%;
   /* background-color: #051020; */
   display: flex;
   align-items: center;
   justify-content: left;
-    padding-left: 5px ;
+  padding-left: 5px;
   border-left: 1px solid #2e7dff;
   font-size: 14px;
   color: #fff;
@@ -261,30 +364,41 @@ const objectSelector = [
   /* height: 42%; */
   width: 100%;
   /* background-color: #2d20a0; */
-  display: flex;              /* 启用弹性布局 */
-  flex-wrap: wrap;            /* 允许换行 */
-  gap: 10px;                 /* 元素间距 */
-  padding: 10px;              /* 内边距 */
-  box-sizing: border-box;     /* 包含padding */
-  align-content: flex-start;  /* 对齐方式 */
+  display: flex;
+  /* 启用弹性布局 */
+  flex-wrap: wrap;
+  /* 允许换行 */
+  gap: 10px;
+  /* 元素间距 */
+  padding: 10px;
+  /* 内边距 */
+  box-sizing: border-box;
+  /* 包含padding */
+  align-content: flex-start;
+  /* 对齐方式 */
 }
 
 .selector-item {
   display: flex;
   flex-direction: column;
   gap: 5px;
-  min-width: 100px;          /* 最小宽度 */
-  flex: 1;                   /* 弹性增长 */
+  min-width: 100px;
+  /* 最小宽度 */
+  flex: 1;
+  /* 弹性增长 */
 }
 
 .custom-select {
   position: relative;
-  width: 100%;               /* 自适应宽度 */
+  width: 100%;
+  /* 自适应宽度 */
 }
+
 :deep(.custom-select .el-select__wrapper) {
   height: 12.5px;
 }
-.section-item_content_down{
+
+.section-item_content_down {
   width: 100%;
   /* background-color: #9520a0; */
   padding: 10px 0;

src/pages/header/component/screenConfigeDialog.vue

 <template>
+
   <div class="dashboard-container">
     <!-- 顶部导航栏 -->
     <header class="dashboard-header">
@@ -26,18 +27,11 @@
     <main class="dashboard-main">
       <!-- 标签页导航 -->
       <div class="tabs-container">
-        <div 
-          class="tab-item" 
-          :class="{ 'active': activeTab === 'equipmentCount' }"
-          @click="activeTab = 'equipmentCount'"
-        >
+        <div class="tab-item" :class="{ 'active': activeTab === 'equipmentCount' }"
+          @click="activeTab = 'equipmentCount'">
           对象选取
         </div>
-        <div 
-          class="tab-item" 
-          :class="{ 'active': activeTab === 'failureStatus' }"
-          @click="activeTab = 'failureStatus'"
-        >
+        <div class="tab-item" :class="{ 'active': activeTab === 'failureStatus' }" @click="activeTab = 'failureStatus'">
           模板列表
         </div>
         <div class="tab-indicator" :style="indicatorStyle"></div>
@@ -51,50 +45,39 @@
           <div class="equipment-content">
             <!-- 下拉选择器区域 -->
             <div class="selector-container">
-              <div class="selector-item" v-for="(item, index) in objectSelector" :key="index">
-                <label class="selector-label">{{ item.label }}</label>
+
+              <div class="selector-item">
+                <label class="selector-label">{{ keliSelector.label }}</label>
                 <div class="custom-select">
                   <!-- 粒度 -->
-                  <el-select v-model="item.default"  placeholder="Select" style="width: 100%;" >
-                    <el-option
-                      v-for="itemele in item.options"
-                      :key="itemele.value"
-                      :label="itemele.label"
-                      :value="itemele.value"
-                    />
+                  <el-select v-model="keliSelector.value" placeholder="" style="width: 100%;" @change="keliOnChange">
+                    <el-option v-for="item in keliSelector.options" :key="item.value" :label="item.label"
+                      :value="item.value" />
                   </el-select>
                 </div>
               </div>
 
-                <!-- <div class="selector-item">
-                  <label class="selector-label">{{ objectSelector[1].label }}</label>
+              <div class="selector-item" v-if="!isGlobal">
+                <label class="selector-label" style="visibility: hidden;">占位符</label>
                 <div class="custom-select">
-                    <div class="select-trigger" @click="toggleDropdown(1)">
-                      <span class="select-value">{{ selectedValues[1] }}</span>
-                      <i class="select-arrow">▼</i>
-                    </div>
-                    <div class="select-dropdown" v-if="dropdownVisible[1]">
-                      <div class="dropdown-option" v-for="option in objectSelector[1].options" :key="option" @click="selectOption(1, option)">
-                        {{ option }}
-                      </div>
-                    </div>
+                  <el-select v-model="childrenSelector.value" placeholder="" style="width: 100%;" :disabled="isGlobal">
+                    <el-option v-for="item in childrenSelector.options" :key="item.value" :label="item.label"
+                      :value="item.value" />
+                  </el-select>
                 </div>
               </div>
 
+
               <div class="selector-item">
-                  <label class="selector-label">{{ objectSelector[2].label }}</label>
+                <label class="selector-label">{{ templateSelector.label }}</label>
                 <div class="custom-select">
-                    <div class="select-trigger" @click="toggleDropdown(2)">
-                      <span class="select-value">{{ selectedValues[2] }}</span>
-                      <i class="select-arrow">▼</i>
-                    </div>
-                    <div class="select-dropdown" v-if="dropdownVisible[2]">
-                      <div class="dropdown-option" v-for="option in objectSelector[2].options" :key="option" @click="selectOption(2, option)">
-                        {{ option }}
-                      </div>
+                  <!-- 粒度 -->
+                  <el-select v-model="templateSelector.value" placeholder="" style="width: 100%;">
+                    <el-option v-for="item in templateSelector.options" :key="item.value" :label="item.label"
+                      :value="item.value" />
+                  </el-select>
                 </div>
               </div>
-                </div> -->
             </div>
             <div class="content-item">
               <hotMapComponent></hotMapComponent>
@@ -114,19 +97,18 @@
               <div class="templateCase_left_header">
                 <div class="templateCase_left_header_item_title">模板列表</div>
                 <div class="templateCase_left_header_item_tool">
-                  <el-icon @click="templateCasedeleteHandFn"><Delete /></el-icon>
-                  <el-icon @click="templateCaseAddHandFn"><Plus /></el-icon>
+                  <el-icon @click="templateCasedeleteHandFn">
+                    <Delete />
+                  </el-icon>
+                  <el-icon @click="templateCaseAddHandFn">
+                    <Plus />
+                  </el-icon>
 
                 </div>
               </div>
               <div class="templateCase_left_content">
-                <div 
-                  class="templateCase_left_content_item" 
-                  v-for="(item, index) in templateCaseList" 
-                  :key="index" 
-                  @click="templateCaseClickFn(index)"
-                  :class="{ 'CaseClickActive': activeTemplateIndex === index }"
-                >
+                <div class="templateCase_left_content_item" v-for="(item, index) in templateCaseList" :key="index"
+                  @click="templateCaseClickFn(index)" :class="{ 'CaseClickActive': activeTemplateIndex === index }">
                   {{ item }}
                 </div>
               </div>
@@ -145,85 +127,83 @@
 
 <script setup>
 
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 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 { getCapacityAndTraffic } from '@/api/Zodiac';
+import useAppStore from '@/store/module/app'
+
+
+
+const appStore = useAppStore();
 
 const emits = defineEmits(['handleScreenConfigeClose']);
 const allIdName = ref([['allIdName11', 'allIdName12'], ['allIdName21', 'allIdName22']]);
 // 标签页状态管理
 const activeTab = ref('equipmentCount'); // 默认选中"地面站设备数量"
-const objectSelector = [
+
+const keliSelector = ref(
   {
     label: '地面粒度',
-    default: '区域',
+    value: 'global',
     options: [
       {
-        value: '区域',
-        label: '区域',
+        value: 'global',
+        label: '全球',
       },
       {
-        value: '站点',
-        label: '站点',
+        value: 'region',
+        label: '区域',
       },
       {
-        value: '设备类型',
-        label: '设备类型',
+        value: 'station',
+        label: '信关站',
       },
       {
-        value: '具体设备',
-        label: '具体设备',
+        value: 'grid',
+        label: '格网',
       }
     ]
-  },
-  {
-    label: '卫星粒度',
-    default: '卫星',
-    options: [
-      {
-        value: '卫星',
-        label: '卫星',
-      },
-      {
-        value: '星座',
-        label: '星座',
-      },
-      {
-        value: '波束',
-        label: '波束',
-      },
+  });
+
+//根据前选择器决定后选择器
+const childrenSelector = ref(
   {
-        value: '转发器',
-        label: '转发器',
+    label: '',
+    value: '',
+    options: []
   }
-    ]
-  },
+)
+
+const isGlobal = computed(() => keliSelector.value.value === 'global');
+
+const templateSelector = ref(
   {
-    label: '模板',
-    default: 'Example #1',
+    label: '模板选择',
+    value: '模板1',
     options: [
       {
-        value: 'Example #1',
-        label: 'Example #1',
+        value: '模板1',
+        label: '模板1',
       },
       {
-        value: 'Example #2',
-        label: 'Example #2',
+        value: '模板2',
+        label: '模板2',
       },
       {
-        value: 'Example #3',
-        label: 'Example #3',
+        value: '模板3',
+        label: '模板3',
       },
       {
-        value: '自定义模板',
-        label: '自定义模板',
+        value: '模板4',
       }
     ]
   }
-];
-const templateCaseList = ref(['模板1', '模板2', '模板3', '模板4', '模板26', '模板27', '模板28'])
+)
+
+const templateCaseList = ref(['模板1', '模板2'])
 // 下拉选择器状态
 const selectedValues = ref([]);
 const dropdownVisible = ref([false, false, false]);
@@ -234,8 +214,8 @@ const templateCaseAddHandFn = () => {
   //console.log('templateCaseAddHandFn');
 };
 // 初始化选中值
-onMounted(() => {
-  selectedValues.value = objectSelector.map(item => item.default);
+onMounted(async () => {
+  await getCapacityAndTrafficData()
 });
 
 // 切换下拉菜单显示
@@ -244,11 +224,20 @@ const toggleDropdown = (index) => {
   dropdownVisible.value = dropdownVisible.value.map((val, i) => i === index ? !val : false);
 };
 
-// 选择下拉选项
-const selectOption = (index, option) => {
-  selectedValues.value[index] = option;
-  dropdownVisible.value[index] = false; // 选择后关闭下拉菜单
-};
+
+const getCapacityAndTrafficData = async () => {
+  const res = await getCapacityAndTraffic({
+    granularity: keliSelector.value.value,
+    startTime: '2025-11-03 00:00:00',
+    endTime: '2025-11-06 00:00:00',
+    regionName: '',
+    signalSiteCode: '',
+    gridCodes: ''
+
+  })
+  console.log(res)
+}
+
 const activeTemplateIndex = ref(0);
 const templateCaseClickFn = (index) => {
   //console.log('templateCaseClickFn', index);
@@ -267,6 +256,24 @@ const indicatorStyle = computed(() => {
     ? { left: '0%', width: '50%' }
     : { left: '50%', width: '50%' };
 });
+
+const keliOnChange = () => {
+  childrenSelector.value.value = ''
+  switch (keliSelector.value.value) {
+    case 'region':
+      childrenSelector.value.options = appStore.regionPanelData
+      break;
+    case 'grid':
+      childrenSelector.value.options = appStore.gridPanelData
+      break;
+    case 'station':
+      childrenSelector.value.options = appStore.signalSitePanelData
+      break;
+  }
+}
+
+watch(() => keliSelector.value.value, keliOnChange)
+
 </script>
 
 <style scoped>
@@ -282,7 +289,8 @@ const indicatorStyle = computed(() => {
 
 
 
-  position: fixed; /* 改为fixed定位 */
+  position: fixed;
+  /* 改为fixed定位 */
   left: 10%;
   top: 10%;
 
@@ -438,14 +446,17 @@ const indicatorStyle = computed(() => {
   border-radius: 8px;
   padding: 5px 15px;
 }
-.equipment-content{
+
+.equipment-content {
   height: 600px;
 }
+
 .tab-panel {
   min-height: 600px;
   /* max-height: 700px; */
   color: #e2e8f0;
 }
+
 .failure-content {
   display: flex;
   flex-direction: row;
@@ -455,7 +466,8 @@ const indicatorStyle = computed(() => {
   /* height: 500px; */
   /* background-color: rgba(1, 73, 241, 0.5); */
   /* padding: 15px; 添加内边距 */
-  border-radius: 8px; /* 添加圆角 */
+  border-radius: 8px;
+  /* 添加圆角 */
 }
 
 .templateCase {
@@ -466,7 +478,8 @@ const indicatorStyle = computed(() => {
   /* border-radius: 6px; 添加圆角 */
   /* border: 1px solid rgba(255, 255, 255, 0.1); 添加边框 */
   /* padding: 10px; 添加内边距 */
-  overflow: hidden; /* 防止内容溢出 */
+  overflow: hidden;
+  /* 防止内容溢出 */
 }
 
 /* 可以为左右两侧添加不同样式 */
@@ -492,7 +505,7 @@ const indicatorStyle = computed(() => {
 }
 
 
-.templateCase_right_content{
+.templateCase_right_content {
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -500,7 +513,8 @@ const indicatorStyle = computed(() => {
   /* background-color: #2b70df; */
   /* padding: 10px 10px; */
 }
-.templateCase_right_content_header{
+
+.templateCase_right_content_header {
   display: flex;
   flex-direction: column;
   height: 8%;
@@ -508,11 +522,13 @@ const indicatorStyle = computed(() => {
   padding: 10px 10px;
   /* background-color: #df2b34; */
 }
-.templateCase_right_content_body{
+
+.templateCase_right_content_body {
   height: 92%;
   width: 100%;
   background-color: #73df2b;
 }
+
 /* 新增样式 */
 .horizontal-sections {
   display: flex;
@@ -523,12 +539,15 @@ const indicatorStyle = computed(() => {
 .section-item {
   flex: 1;
   height: 100%;
-  background-color: #1e293b; /* 您可以选择合适的背景色 */
-  border: 1px solid rgba(255, 255, 255, 0.1); /* 可选：边框 */
+  background-color: #1e293b;
+  /* 您可以选择合适的背景色 */
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  /* 可选：边框 */
   padding: 10px 10px;
   /* border-radius: 4px; 可选：圆角 */
 }
-.templateCase_right_content_header_item{
+
+.templateCase_right_content_header_item {
 
   height: 100%;
   width: 8%;
@@ -538,34 +557,39 @@ const indicatorStyle = computed(() => {
   /* background-color: #6ffcba; */
 
 }
-.templateCase_left_header{
+
+.templateCase_left_header {
   display: flex;
   padding: 10px 0;
 }
-.templateCase_left_header_item_title{
+
+.templateCase_left_header_item_title {
   flex: 0.61;
   padding-left: 10px;
   /* background-color: #2c60b4; */
 }
+
 .templateCase_left_header_item_tool {
   display: flex;
   justify-content: flex-end;
   flex: 0.39;
   gap: 15px;
   padding-right: 10px;
-  align-items: center; /* 垂直居中对齐 */
+  align-items: center;
+  /* 垂直居中对齐 */
 }
 
 
 
 
-.templateCase_left_content{
+.templateCase_left_content {
   /* background-color: #6ffcba; */
   width: 100%;
   height: 100%;
   overflow-y: auto;
 }
-.templateCase_left_content_item{
+
+.templateCase_left_content_item {
   height: 40px;
   width: 100%;
   display: flex;
@@ -578,13 +602,14 @@ const indicatorStyle = computed(() => {
   /* background-color: #2c78f5; */
 }
 
-.CaseClickActive{
+.CaseClickActive {
   background: linear-gradient(to right, #193d77 0, rgba(0, 0, 0, 1) 100%);
 }
 
-.templateCase_left_content_item:hover{
+.templateCase_left_content_item:hover {
   background: linear-gradient(to right, #2b70df 0, rgba(0, 0, 0, 1) 100%);
 }
+
 /* 下拉选择器样式 */
 .selector-container {
   display: flex;
@@ -609,19 +634,22 @@ const indicatorStyle = computed(() => {
   position: relative;
   width: 160px;
   /* color: #ffffff; */
-  border:1px solid #000000;
+  border: 1px solid #000000;
 }
+
 :deep(.custom-select .el-select__wrapper) {
   height: 12.5px;
 }
-:deep(.custom-select .el-select ){
+
+:deep(.custom-select .el-select) {
   background: #000000;
-  border:1px solid #000000;
+  border: 1px solid #000000;
   /* color: #ffffff; */
 }
-:deep(.custom-select .el-select .el-select__wrapper ){
+
+:deep(.custom-select .el-select .el-select__wrapper) {
   background: #000000;
-  border:1px solid #000000;
+  border: 1px solid #000000;
   box-shadow: 0 0 2px rgba(131, 131, 131, 0.95);
   /* color: #ffffff; */
 }
@@ -631,15 +659,18 @@ const indicatorStyle = computed(() => {
   /* font-size: 10px; */
 }
 
-:deep(.el-popper){
+:deep(.el-popper) {
   background-color: #000000 !important;
 }
-:deep(.el-select-dropdown){
+
+:deep(.el-select-dropdown) {
   background: #000000 !important;
 }
-:deep(.el-select-dropdown){
+
+:deep(.el-select-dropdown) {
   background-color: #000000 !important;
 }
+
 .select-trigger {
   display: flex;
   justify-content: space-between;
@@ -693,7 +724,8 @@ const indicatorStyle = computed(() => {
   background-color: #334155;
   color: #ffffff;
 }
-.content-item{
+
+.content-item {
   display: flex;
   flex-direction: row;
   gap: 20px;
@@ -701,20 +733,23 @@ const indicatorStyle = computed(() => {
   /* background-color: #1c5abe; */
 }
 
-.content-item > * {
+.content-item>* {
   flex: 1;
   min-width: 0;
 }
-.content-item > *:not(:last-child) {
+
+.content-item>*:not(:last-child) {
   padding-right: 10px;
-  border-right: 1px solid #1b1b1b; /* 右边框样式 */
+  border-right: 1px solid #1b1b1b;
+  /* 右边框样式 */
 }
 
-.apply-btn-right{
+.apply-btn-right {
   position: absolute;
   bottom: 16px;
 }
-:deep(.apply-btn){
+
+:deep(.apply-btn) {
   width: 100px;
   height: 30px;
   /* margin-top: 10%; */
@@ -726,6 +761,7 @@ const indicatorStyle = computed(() => {
   cursor: pointer;
   border-bottom: 1px solid #2c78f5;
 }
+
 /* 滚动条样式 */
 .select-dropdown::-webkit-scrollbar {
   width: 6px;

src/pages/header/index.vue

@@ -8,7 +8,8 @@
       <div class="navbar-left">
         <div class="status-item weather-info">
           <span class="icon">
-              <img src="@/assets/images/headers/yuanxin.png" alt="图标" class="weather-icon" style="width: 100%; height: 100%;">
+            <img src="@/assets/images/headers/yuanxin.png" alt="图标" class="weather-icon"
+              style="width: 100%; height: 100%;">
           </span>
           <!-- <span class="text">晴 18℃</span> -->
         </div>
@@ -30,13 +31,8 @@
       <div class="navbar-right">
 
         <div class="control-item company-item" @click="handletoLinkClick">
-          <img 
-            v-if="!imageError"
-            src="@/assets/images/headers/header_style.png" 
-            alt="大屏配置" 
-            class="company-logo"
-            @error="handleImageError"
-          >
+          <img v-if="!imageError" src="@/assets/images/headers/header_style.png" alt="大屏配置" class="company-logo"
+            @error="handleImageError">
 
           <span class="control-label">跳转</span>
         </div>
@@ -44,40 +40,26 @@
 
 
         <div class="control-item digital-person-item" :class="{ active: digitalPersonShow }">
-          <el-switch
-            v-model="digitalPersonShow"
-            
-          />
+          <el-switch v-model="digitalPersonShow" />
           <span class="control-label">数字人</span>
         </div>
 
         <div class="control-item company-item" @click="handleCompanyClick">
-          <img 
-            v-if="!imageError"
-            src="@/assets/images/headers/header_style.png" 
-            alt="大屏配置" 
-            class="company-logo"
-            @error="handleImageError"
-          >
+          <img v-if="!imageError" src="@/assets/images/headers/header_style.png" alt="大屏配置" class="company-logo"
+            @error="handleImageError">
           <!-- <div v-else class="logo-placeholder">DL</div> -->
           <span class="control-label">大屏配置</span>
         </div>
-         <div class="control-item rightTime" >
+        <div class="control-item rightTime">
           <span class="timeColor">{{ currentTime.split(" ")[0] }}</span>
-        <span >{{ currentTime.split(" ")[1] }}</span>
+          <span>{{ currentTime.split(" ")[1] }}</span>
         </div>
       </div>
     </div>
 
-  <el-dialog
-    v-model="screenConfigeDialogVisible"
-    :destroy-on-close="true"
-    :modal="false"
-    width="100"
-    :show-close="false"
-    :before-close="handleScreenConfigeClose"
-    style=" background-color: rgba(0, 0, 0,0);padding: 0;margin: 0;"
-  >
+    <el-dialog v-model="screenConfigeDialogVisible" :destroy-on-close="true" :modal="false" width="100"
+      :show-close="false" :before-close="handleScreenConfigeClose"
+      style=" background-color: rgba(0, 0, 0,0);padding: 0;margin: 0;">
       <screenConfige @handleScreenConfigeClose="handleScreenConfigeClose"></screenConfige>
       <!-- <div style="width: 100px;height: 100px;background-color: blueviolet;"></div> -->
     </el-dialog>
@@ -94,12 +76,7 @@
         :close-on-click-modal="false"
       >
     </el-dialog> -->
-    <div 
-      v-if="digitalPersonShow"
-      class="draggable-box"
-      
-      :style="{ left: pos.x + 'px', top: pos.y + 'px' }"
-    >
+    <div v-if="digitalPersonShow" class="draggable-box" :style="{ left: pos.x + 'px', top: pos.y + 'px' }">
       <span class="title" @mousedown="startDrag">拖拽我（带边界限制）</span>
       <!-- <el-input v-model="value" placeholder="请输入内容" /> -->
       <!-- <Sender v-model="senderValue" variant="updown" clearable allow-speech /> -->
@@ -112,11 +89,12 @@
 <script setup>
 
 // import { BubbleList, Sender } from 'vue-element-plus-x';
-import { ref, onUnmounted, watch, onBeforeMount, onDeactivated ,onMounted} from 'vue';
+import { ref, onUnmounted, watch, onBeforeMount, onDeactivated, onMounted } from 'vue';
 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 errorDialog from '@/pages/lefts/component/errorDialog.vue'
@@ -126,16 +104,6 @@ const useAppStoreInstance = useAppStore()
 // 在 setup 中
 const router = useRouter();
 
-
-const senderRef = ref();
-const senderValue = ref('');
-
-
-
-
-
-
-
 // 数字人显示状态
 const digitalPersonShow = ref(false);
 // 实时更新时间
@@ -159,8 +127,8 @@ const handleScreenConfigeClose = () => {
   screenConfigeDialogVisible.value = false;
   if (window.ue5) {
     window.ue5("callBackAllDialogFn", String(JSON.stringify({
-            type:"LargeScreenConfigurationDialog",
-            status:"close"
+      type: "LargeScreenConfigurationDialog",
+      status: "close"
     })));
   }
 };
@@ -183,35 +151,7 @@ const handleImageError = (e) => {
   e.target.style.display = 'none';
 };
 
-// try {
-//   // 确保对象结构存在
-//   if (typeof window.ue5 !== 'object' || window.ue5 === null) {
-//     window.ue5 = {};
-//   }
-//   if (typeof window.ue5.interface !== 'object' || window.ue5.interface === null) {
-//     window.ue5.interface = {};
-//   }
-
-//   window.ue5.interface.emitUIInteraction = (res) => {
-//     //console.log("收到UE交互:", res.name);
-    
-//     try {
-//       const resData = JSON.parse(res.data);
-//       //console.log("Received from UE:", resData);
-      
-//       if (resData.locationReplace === true) {
-//         location.replace('/subsystem');
-//       }
-//       if (resData.locationReplace === false) {
-//         location.replace('/');
-//       }
-//     } catch (parseError) {
-//       console.error("Error parsing JSON:", parseError);
-//     }
-//   };
-// } catch (initError) {
-//   console.error("Failed to initialize ue5 interface:", initError);
-// }
+
 const toSubSystemFlag = ref(false);
 const handletoLinkClick = () => {
   try {
@@ -221,7 +161,7 @@ const handletoLinkClick = () => {
       router.push('/');
       //console.log("1111111111111111111111111",useAppStoreInstance.isSourceLegendShow);
       useAppStoreInstance.setGlobalisFromTosub(true);
-      useAppStoreInstance.setislegendShow(useAppStoreInstance.isSourceLegendShow?true:false );
+      useAppStoreInstance.setislegendShow(useAppStoreInstance.isSourceLegendShow ? true : false);
       //console.log("11111111111111111111111112",useAppStoreInstance.islegendShow);
       useAppStoreInstance.setiscontrolPanelShow(true);
       useAppStoreInstance.setGlobalSubsystemSelectedTimeRange([]);
@@ -254,12 +194,11 @@ const handletoLinkClick = () => {
 };
 const handleCompanyClick = () => {
   // 可以添加点击事件逻辑
-  // //console.log('大屏配置按钮点击');
   screenConfigeDialogVisible.value = !screenConfigeDialogVisible.value;
   if (window.ue5) {
     window.ue5("callBackAllDialogFn", String(JSON.stringify({
-            type:"LargeScreenConfigurationDialog",
-            status:"open"
+      type: "LargeScreenConfigurationDialog",
+      status: "open"
     })));
   }
 };
@@ -275,65 +214,8 @@ onBeforeMount(() => {
   }, 1000);
 });
 
-// const handleUEMessage = () => {
-//   //console.log("我是handleUEMessage里面的window",window);
-//    window.emitUIInteraction = (res) => {
-//       // //console.log('Received from UE:', data);
-//           //console.log("我是handleUEMessage,收到UE交互:", res);
-    
-//     try {
-//       const resData = JSON.parse(res.data);
-//         if (window.ue5) {
-//       window.ue5("callBackTimeFn", String(JSON.stringify({
-     
-//       taskCode: String("从UE里面传输的数据",resData,res),
-//     })))
-  
-//   }
-//       //console.log("handleUEMessage，Received from UE:", resData);
-      
-//       if (resData.locationReplace === true) {
-//         router.push('/subsystem');
-//       }
-//       if (resData.locationReplace === false) {
-//          router.push('/');
-//       }
-//     } catch (parseError) {
-//       console.error("Error parsing JSON:", parseError);
-//     }
-//     };
-// };
-// const handleUEMessage1 = () => {
-//   //console.log("我是handleUEMessage1里面的window",window);
-  
-//    window.emitUIInteraction = (res) => {
-//       // //console.log('Received from UE:', data);
-//           //console.log("我是handleUEMessage1,收到UE交互:", res);
-    
-//     try {
-//       const resData = JSON.parse(res.data);
-//         if (window.ue5) {
-//       window.ue5("callBackTimeFn", String(JSON.stringify({
-     
-//       taskCode: String("handleUEMessage1从UE里面传输的数据",resData,res),
-//     })))
-  
-//   }
-//       //console.log("Received from UE:", resData);
-      
-//       if (resData.locationReplace === true) {
-//          router.push('/subsystem');
-//       }
-//       if (resData.locationReplace === false) {
-//          router.push('/');
-//       }
-//     } catch (parseError) {
-//       console.error("Error parsing JSON:", parseError);
-//     }
-//     };
-// };
-
-onMounted(() => { 
+
+onMounted(async () => {
   // window.addEventListener('message', handleUEMessage);
   // window.addEventListener('emitUIInteraction', handleUEMessage1);
   window.ue.interface.emitUIInteraction = (res) => {
@@ -369,7 +251,7 @@ onMounted(() => {
 
       //console.log("1111111111111111111111111",useAppStoreInstance.isSourceLegendShow);
       useAppStoreInstance.setGlobalisFromTosub(true);
-        useAppStoreInstance.setislegendShow(useAppStoreInstance.isSourceLegendShow?true:false );
+      useAppStoreInstance.setislegendShow(useAppStoreInstance.isSourceLegendShow ? true : false);
       //console.log("11111111111111111111111112",useAppStoreInstance.islegendShow);
       useAppStoreInstance.setiscontrolPanelShow(true);
       useAppStoreInstance.setGlobalSubsystemSelectedTimeRange([]);
@@ -394,6 +276,9 @@ onMounted(() => {
 
 
 
+ await initChartData();
+
+
 
 });
 
@@ -435,6 +320,14 @@ 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})):[]
+};
+
 
 
 
@@ -443,7 +336,7 @@ const stopDrag = () => {
 </script>
 
 <style scoped>
-*{
+* {
   margin: 0;
   padding: 0;
 }
@@ -470,7 +363,8 @@ const stopDrag = () => {
   text-align: center;
   font-weight: bold;
   flex-shrink: 0;
-  user-select: none; /* 防止拖拽时选中文本 */
+  user-select: none;
+  /* 防止拖拽时选中文本 */
 }
 
 
@@ -514,11 +408,12 @@ const stopDrag = () => {
   height: 55px;
   max-width: 1920px;
   margin: 0 auto;
-  background: url("@/assets/images/headers/header_bg.png") ;
+  background: url("@/assets/images/headers/header_bg.png");
   /* padding: 0.6rem 0; */
   position: relative;
   overflow: hidden;
-  background-size: 100% 160%; /* 或者 cover/auto */
+  background-size: 100% 160%;
+  /* 或者 cover/auto */
   background-repeat: no-repeat;
   background-position: center;
 
@@ -608,13 +503,16 @@ const stopDrag = () => {
   padding-top: 10px;
   /* background-color: #d10e0e; */
 }
-.timeColor{
+
+.timeColor {
   color: #ddd;
 }
-.rightTime{
+
+.rightTime {
   border-left: 1px solid #ddd;
   height: 10px;
 }
+
 .control-item {
   display: flex;
   align-items: center;
@@ -702,15 +600,18 @@ const stopDrag = () => {
 }
 
 @media (max-width: 992px) {
+
   /* .navbar-left {
     display: none;
   } */
-  .company-item{
+  .company-item {
     display: none;
   }
-  .digital-person-item{
+
+  .digital-person-item {
     display: none;
   }
+
   .navbar-right {
     gap: 1rem;
   }

src/store/module/app.js

@@ -52,6 +52,11 @@ const useAppStore = defineStore(
       globalSubsystemSelectedEndTime: '2025-11-04 00:00:00',//暂未使用
       globalDisableTimeLine: true,
 
+      gridPanelData:[], //格网面板
+      regionPanelData:[], //区域面板
+      signalSitePanelData:[], //信关站面板
+
+   
     }),
     actions: {
       setGlobalRecordMainSysTaskCode(status) {

src/utils/request.js

@@ -26,17 +26,6 @@ const service = axios.create({
 
 // request拦截器
 service.interceptors.request.use(config => {
-  //console.log('--------------config', config)
-  // // 是否需要设置 token
-  // const isToken = (config.headers || {}).isToken === false
-  // //console.log('--------------isToken', isToken)
-  // // 是否需要防止数据重复提交
-  // const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
-  //  //console.log('--------------isRepeatSubmit', isRepeatSubmit,(config.headers || {}).repeatSubmit,config.headers.repeatSubmit,undefined===false)
-  // if (getToken() && !isToken) {
-  //   config.headers['token'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
-  // }
-  // get请求映射params参数
   if (config.method === 'get' && config.params) {
     let url = config.url + '?' + tansParams(config.params);
     url = url.slice(0, -1);