为UI增强添加新的图像资源

-增加了equ-righticon3 .png改进的图像。
-引入map-screen -bg.png作为地图筛选功能的新背景图像。
增加地图筛选界面标题背景的map-screen - title -bg.png

components.d.ts

@@ -24,12 +24,14 @@ declare module 'vue' {
     ElInput: typeof import('element-plus/es')['ElInput']
     ElLink: typeof import('element-plus/es')['ElLink']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     ItemWrap: typeof import('./src/components/ItemWrap/index.vue')['default']

src/api/office.ts → src/api/iot/office.ts

 import request from "@/utils/request";
-import useUserStore from "@/store/modules/user";
 
 // 获取机构信息,传用户id
-export function officeInfo() {
-  const userStore = useUserStore();
+export function officeTreeList(deptId: any) {
   return request({
-    url: "/getOfficeInfo?userId=" + userStore.id,
+    url: "/system/dept/list?deptId=" + deptId,
+    method: "get",
+  });
+}
+
+export function officeTreeParentList(parentId: any) {
+  return request({
+    url: "/system/dept/list?parentId=" + parentId,
     method: "get",
   });
 }

src/api/tunnel/office.ts

@@ -18,7 +18,7 @@ export function listForParent() {
       "/system/dept/listForParent?deptId=" +
       userStore.deptId +
       "&noOffiiceType=" +
-      6,
+      5,
     method: "get",
   });
 }

src/api/tunnelProjectNumCount.ts

-import request from "@/utils/request";
-
-// 统计隧道数量(总数、进行中、已完工)
-export function tunnelProjectNumCount(deptId: string) {
-  return request({
-    url: "/getInfo?deptId=" + deptId,
-    method: "get",
-  });
-}

src/assets/styles/element-plus.scss

@@ -218,6 +218,21 @@ $blue-hover: #40a9ff; // 悬停蓝色
   color: #{$white-text} !important;
 }
 
+.el-radio {
+  color: var(--el-radio-text-color);
+  font-weight: var(--el-radio-font-weight);
+  position: relative;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  outline: none;
+  font-size: var(--el-font-size-base);
+  user-select: none;
+  margin-right: 0px;
+  height: 32px;
+}
+
 // 全局滚动条样式（深蓝色主题）
 ::-webkit-scrollbar {
   width: 8px;

src/layout/main.vue

@@ -15,22 +15,18 @@
         <div class="office-select">
           <el-cascader
             placeholder="请选择机构"
-            :options="officeTree"
             v-model="selectedOffice"
             clearable
             filterable
             :show-all-levels="false"
-            :props="{
-              expandTrigger: 'hover',
-              multiple: false,
-              checkStrictly: true,
-            }"
+            :props="dataProps"
             @change="handleOfficeChange"
           >
           </el-cascader>
         </div>
         <div class="scene-select">
           <el-select
+            v-if="false"
             v-model="selectedScene"
             placeholder="应用场景"
             @change="handleSceneChange"
@@ -60,9 +56,22 @@ import Menu from "./components/Menu.vue";
 import User from "./components/User.vue";
 import { ref } from "vue";
 import { eventBus } from "@/eventBus";
+import { officeTreeList, officeTreeParentList } from "@api/iot/office";
+import useUserStore from "@/store/modules/user";
+const userStore = useUserStore();
 
-var selectedOffice = ref(["1"]);
-var selectedScene = ref();
+const dataProps = {
+  expandTrigger: "hover",
+  multiple: false,
+  checkStrictly: true,
+  lazy: true,
+  lazyLoad(node: any, resolve: any) {
+    getDeptForLazyLoad(node, resolve);
+  },
+}; //级联框prop
+
+var selectedOffice = ref([userStore.deptId]);
+var selectedScene = ref(); //应用场景
 
 var sceneTree = ref([
   {
@@ -83,47 +92,62 @@ var sceneTree = ref([
   },
 ]);
 
-var officeTree = ref([
-  {
-    value: "1",
-    label: "路桥一公司",
-    children: [
-      {
-        value: "1-1",
-        label: "机构1",
-        children: [
-          {
-            value: "22",
-            label: "机构1-1-1",
-          },
-          {
-            value: "1-1-2",
-            label: "机构1-1-2",
-          },
-        ],
-      },
-      {
-        value: "1-2",
-        label: "机构2",
-      },
-    ],
-  },
-  {
-    value: "2",
-    label: "路桥二公司",
-  },
-]);
+var officeTree = ref([]);
 
 function handleOfficeChange(val: any) {
-  console.log(val);
   //触发场景变化事件在选择机构后，弹出场景弹窗
   eventBus.emit("officeChange", val);
 }
 
 function handleSceneChange(val: any) {
-  console.log(val);
   eventBus.emit("sceneChange", val);
 }
+
+//获取编辑时的数据
+function getDeptForLazyLoad(node: any, resolve: any) {
+  // debugger;
+  const { level } = node;
+  if (level == 0) {
+    officeTreeList(userStore.deptId).then((res: any) => {
+      if (res.code === 200) {
+        officeTree.value = res.data;
+        // officeTree.value 将item.value、item.label赋值
+        officeTree.value.forEach((item: any) => {
+          item.value = item.deptId;
+          item.label = item.deptName;
+          item.leaf = level >= 2;
+        });
+        resolve(officeTree.value);
+      }
+    });
+  } else if (level == 1) {
+    officeTreeParentList(node.value).then((res: any) => {
+      if (res.code === 200) {
+        officeTree.value = res.data;
+        // officeTree.value 将item.value、item.label赋值
+        officeTree.value.forEach((item: any) => {
+          item.value = item.deptId;
+          item.label = item.deptName;
+          item.leaf = level >= 2;
+        });
+        resolve(officeTree.value);
+      }
+    });
+  } else {
+    officeTreeParentList(node.value).then((res: any) => {
+      if (res.code === 200) {
+        officeTree.value = res.data;
+        // officeTree.value 将item.value、item.label赋值
+        officeTree.value.forEach((item: any) => {
+          item.value = item.deptId;
+          item.label = item.deptName;
+          item.leaf = level >= 2;
+        });
+        resolve(officeTree.value);
+      }
+    });
+  }
+}
 </script>
 
 <style scoped lang="scss">

src/store/modules/user.ts

@@ -6,6 +6,8 @@ const useUserStore = defineStore("user", {
   state: (): any => ({
     token: getToken(),
     id: "",
+    deptId: "",
+    deptName: "",
     name: "",
     avatar: "",
     roles: [],
@@ -48,6 +50,8 @@ const useUserStore = defineStore("user", {
             this.id = user.userId;
             this.name = user.userName;
             this.avatar = avatar;
+            this.deptId = user.deptId;
+            this.deptName = user.dept.deptName;
             resolve(res);
           })
           .catch((error) => {

src/views/Home.vue

@@ -5,17 +5,17 @@
       <el-col :span="7" class="column">
         <div class="grid-content tall-box">
           <ContainerWrap title="设备接入数量" :endDate="nowTimes">
-            <DeviceNumber :dept-id="selectedOffice[0]" />
+            <DeviceNumber :dept-id="selectedOffice" />
           </ContainerWrap>
         </div>
         <div class="grid-content tall-box">
           <ContainerWrap title="系统分类统计" :endDate="nowTimes">
-            <SysClassification :dept-id="selectedOffice[0]" />
+            <SysClassification :dept-id="selectedOffice" />
           </ContainerWrap>
         </div>
         <div class="grid-content tall-box">
           <ContainerWrap title="设备分类占比" :endDate="nowTimes">
-            <DeviceClassification :dept-id="selectedOffice[0]" />
+            <DeviceClassification :dept-id="selectedOffice" />
           </ContainerWrap>
         </div>
       </el-col>
@@ -24,12 +24,12 @@
       <el-col :span="10" class="column">
         <div class="grid-content wide-box" style="flex: 2">
           <ContainerWrap title="设备分布图" :endDate="nowTimes">
-            <MapEcharts :dept-id="selectedOffice[0]" />
+            <MapEcharts :dept-id="selectedOffice" />
           </ContainerWrap>
         </div>
         <div class="grid-content wide-box" style="flex: 1">
           <ContainerWrap title="下级单位设备统计" :endDate="nowTimes">
-            <SubsidiaryCompanyEquipment :dept-id="selectedOffice[0]" />
+            <SubsidiaryCompanyEquipment :dept-id="selectedOffice" />
           </ContainerWrap>
         </div>
       </el-col>
@@ -38,17 +38,17 @@
       <el-col :span="7" class="column">
         <div class="grid-content tall-box">
           <ContainerWrap title="设备告警统计" :endDate="nowTimes">
-            <EquipmentAlarm :dept-id="selectedOffice[0]" />
+            <EquipmentAlarm :dept-id="selectedOffice" />
           </ContainerWrap>
         </div>
         <div class="grid-content tall-box">
           <ContainerWrap title="近7天告警统计" :endDate="nowTimes">
-            <Alert7Days :dept-id="selectedOffice[0]" />
+            <Alert7Days :dept-id="selectedOffice" />
           </ContainerWrap>
         </div>
         <div class="grid-content tall-box">
           <ContainerWrap title="已部署系统" :endDate="nowTimes">
-            <DeployProject :dept-id="selectedOffice[0]" />
+            <DeployProject :dept-id="selectedOffice" />
           </ContainerWrap>
         </div>
       </el-col>
@@ -133,79 +133,12 @@ import SubsidiaryCompanyEquipment from "./components/SubsidiaryCompanyEquipment.
 import ContainerWrap from "@/components/ContainerWrap/index.vue";
 import { eventBus } from "@/eventBus";
 import { nowTime } from "@/api/iot/home";
+import useUserStore from "@/store/modules/user";
+const userStore = useUserStore();
+
 const nowTimes = ref("");
 const dialogVisible = ref(false);
-const selectedOffice = ref([100]);
-const officeTree = ref([
-  {
-    value: "1",
-    label: "公司1",
-    children: [
-      {
-        value: "1-1",
-        label: "部门1-1",
-        children: [
-          {
-            value: "1-1-1",
-            label: "隧道1-1-1",
-          },
-          {
-            value: "1-1-2",
-            label: "隧道1-1-2",
-          },
-        ],
-      },
-      {
-        value: "1-2",
-        label: "部门1-2",
-        children: [
-          {
-            value: "1-2-1",
-            label: "隧道1-2-1",
-          },
-          {
-            value: "1-2-2",
-            label: "隧道1-2-2",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    value: "2",
-    label: "公司2",
-    children: [
-      {
-        value: "2-1",
-        label: "部门2-1",
-        children: [
-          {
-            value: "2-1-1",
-            label: "隧道2-1-1",
-          },
-          {
-            value: "2-1-2",
-            label: "隧道2-1-2",
-          },
-        ],
-      },
-      {
-        value: "2-2",
-        label: "部门2-2",
-        children: [
-          {
-            value: "2-2-1",
-            label: "隧道2-2-1",
-          },
-          {
-            value: "2-2-2",
-            label: "隧道2-2-2",
-          },
-        ],
-      },
-    ],
-  },
-]);
+const selectedOffice = ref(userStore.deptId);
 const sysClassificationList = ref([
   {
     name: "智慧隧道",
@@ -244,6 +177,7 @@ const sysClassificationList = ref([
     offline: 11,
   },
 ]);
+
 onMounted(() => {
   // 监听场景变化事件
   eventBus.on("sceneChange", (scene) => {
@@ -252,12 +186,13 @@ onMounted(() => {
 
   // 监听机构变化事件
   eventBus.on("officeChange", (office) => {
-    selectedOffice.value = office;
+    selectedOffice.value = office[office.length - 1];
   });
 });
 
 onUnmounted(() => {
   eventBus.off("sceneChange"); // 避免内存泄漏
+  eventBus.off("officeChange"); // 避免内存泄漏
 });
 
 //获取截止时间

src/views/components/Alert7Days.vue

@@ -4,16 +4,38 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
 import * as echarts from "echarts";
 import { countByDay } from "@/api/iot/home";
 
 const chartRef = ref<HTMLDivElement>();
-const chartContainer = ref<HTMLDivElement>();
 const chartInstance = ref<echarts.ECharts | null>(null);
 let resizeObserver: ResizeObserver | null = null;
 const isNull = ref(true);
 
+const props = defineProps({
+  deptId: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const deptId = ref<any>(); //机构id
+
+//监听父组件传递的 deptId 变化
+watch(
+  () => props.deptId,
+  (newVal) => {
+    if (newVal) {
+      deptId.value = newVal;
+      nextTick(() => {
+        getList();
+      });
+    }
+  },
+  { immediate: true }
+);
+
 const xData = ref<any[]>([
   {
     time: "",
@@ -264,15 +286,10 @@ const handleResize = () => {
   chartInstance.value?.resize();
 };
 
-onMounted(() => {
-  // 确保容器有尺寸
-  if (chartContainer.value) {
-    chartContainer.value.style.width = "100%";
-    chartContainer.value.style.height = "100%";
-  }
-
+function getList() {
   // 构建请求参数 beginTime（年月日时分秒）7天前 endTime（年月日时分秒）今天
   const data = {
+    deptId: deptId.value,
     beginTime:
       new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)
         .toISOString()
@@ -366,7 +383,7 @@ onMounted(() => {
     });
     resizeObserver.observe(chartRef.value);
   }
-});
+}
 
 onBeforeUnmount(() => {
   // 清理工作

src/views/components/DeployProject.vue

@@ -24,7 +24,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch, nextTick } from "vue";
 import sysBg1 from "@/assets/imgs/sys-bg1.png";
 import sysBg2 from "@/assets/imgs/sys-bg2.png";
 import sysBg3 from "@/assets/imgs/sys-bg3.png";
@@ -37,6 +37,21 @@ const props = defineProps({
     default: 0,
   },
 });
+const deptId = ref<any>(); //机构id
+
+//监听父组件传递的 deptId 变化
+watch(
+  () => props.deptId,
+  (newVal) => {
+    if (newVal) {
+      deptId.value = newVal;
+      nextTick(() => {
+        getCountBySysType();
+      });
+    }
+  },
+  { immediate: true }
+);
 
 const projectList = ref([
   {
@@ -78,7 +93,7 @@ const projectList = ref([
 ]);
 
 function getCountBySysType() {
-  countBySysType(props.deptId).then((res: any) => {
+  countBySysType(deptId.value).then((res: any) => {
     if (res.code === 200) {
       res.data.map((item: any) => {
         projectList.value.map((i: any) => {
@@ -90,7 +105,7 @@ function getCountBySysType() {
     }
   });
 }
-getCountBySysType();
+// getCountBySysType();
 </script>
 <style scoped lang="scss">
 .bg-container {

src/views/components/DeviceClassification.vue

@@ -5,9 +5,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
 import * as echarts from "echarts";
 import { deviceCountByType } from "@/api/iot/home";
+import { set } from "nprogress";
 
 const chartContainer = ref<HTMLElement | null>(null);
 const chartInstance = ref<echarts.ECharts | null>(null);
@@ -22,6 +23,21 @@ const props = defineProps({
 
 const datas = ref([]);
 const totalCount = ref(0);
+const deptId = ref<any>(); //机构id
+
+//监听父组件传递的 deptId 变化
+watch(
+  () => props.deptId,
+  (newVal) => {
+    if (newVal) {
+      deptId.value = newVal;
+      nextTick(() => {
+        getList();
+      });
+    }
+  },
+  { immediate: true }
+);
 
 const initChart = () => {
   if (!chartContainer.value) return;
@@ -189,7 +205,11 @@ const handleResize = () => {
   chartInstance.value?.resize();
 };
 
-onMounted(() => {
+// onMounted(() => {
+//   getList();
+// });
+
+function getList() {
   deviceCountByType(props.deptId, "1").then((res: any) => {
     if (res.code === 200) {
       const dcbt = res.dcbt || [];
@@ -223,7 +243,6 @@ onMounted(() => {
       initChart();
     }
   });
-
   // 使用 ResizeObserver 监听容器大小变化
   if (chartContainer.value) {
     resizeObserver = new ResizeObserver(() => {
@@ -231,10 +250,9 @@ onMounted(() => {
     });
     resizeObserver.observe(chartContainer.value);
   }
-
   // 也添加窗口大小变化监听作为后备
   window.addEventListener("resize", handleResize);
-});
+}
 
 onBeforeUnmount(() => {
   // 移除监听器
@@ -243,7 +261,6 @@ onBeforeUnmount(() => {
     resizeObserver = null;
   }
   window.removeEventListener("resize", handleResize);
-
   // 销毁图表实例
   chartInstance.value?.dispose();
 });

src/views/components/DeviceNumber.vue

@@ -59,23 +59,16 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { computed } from "vue";
 import { allDevice } from "@/api/iot/home";
-
-const props = defineProps({
-  deptId: {
-    type: Number,
-    default: 0,
-  },
-});
+import { get } from "node_modules/axios/index.d.cts";
 // 设备接入数量(在线、离线)
 var sumCount = ref("0".padStart(9, "0").split(""));
 //在线数量
 var onLineCount = ref(0);
 //离线数量
 var noLineCount = ref(0);
-
 //计算在线和离线百分比
 const totalDevices = computed(() => onLineCount.value + noLineCount.value);
 const onlinePercent = computed(() => {
@@ -88,10 +81,30 @@ const offlinePercent = computed(() => {
     ? Math.round((noLineCount.value / totalDevices.value) * 100)
     : 0;
 });
+const props = defineProps({
+  deptId: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const deptId = ref<any>(); //机构id
+
+//监听父组件传递的 deptId 变化
+watch(
+  () => props.deptId,
+  (newVal) => {
+    if (newVal) {
+      deptId.value = newVal;
+      getAllDevice();
+    }
+  },
+  { immediate: true }
+);
 
 // 获取设备接入数量(在线、离线)
 function getAllDevice() {
-  allDevice(props.deptId).then((res: any) => {
+  allDevice(deptId.value).then((res: any) => {
     if (res.code === 200) {
       // 将数字转换为字符串并补零到9位,并将其拆分为单个数字数组
       sumCount.value = (res.numMap?.sumCount?.toString() || "0")
@@ -104,8 +117,6 @@ function getAllDevice() {
     }
   });
 }
-
-getAllDevice();
 </script>
 
 <style scoped lang="scss">

src/views/components/EquipmentAlarm.vue

 <template>
   <div class="flex gap-20">
-    <!-- 设备告警统计 -->
-    <div class="bg-container flex flex-col justify-center">
-      <div
-        class="text-center font-bold text-[34px] text-[#66FFFF] font-[YouSheBiaoTiHei]"
-      >
-        {{ alarmTotal }}
+    <div class="relative">
+      <!-- 设备告警统计 -->
+      <div class="bg-container flex flex-col justify-center">
+        <div
+          class="text-center font-bold text-[34px] text-[#66FFFF] font-[YouSheBiaoTiHei]"
+        >
+          {{ alarmTotal }}
+        </div>
+        <div class="text-center text-[12px] text-[#66FFFF] mt-0">告警总数</div>
       </div>
-      <div class="text-center text-[12px] text-[#66FFFF] mt-0">告警总数</div>
+
+      <div class="bg-container1 absolute top-0 right-0"></div>
     </div>
 
     <div class="flex flex-row items-center gap-8">
@@ -19,11 +23,13 @@
           {{ unprocessedCount }}
         </div>
         <img
-          src="@/assets/imgs/equ-right-icon.png"
-          class="w-[45px] h-[50px] my-1"
+          src="@/assets/imgs/equ-right-icon1.png"
+          class="w-[45px] h-[50px] my-1 icon-animation"
           alt="未处理图标"
         />
-        <div class="text-[12px] text-white mt-1">未处理</div>
+        <div class="text-[14px] text-white mt-1 font-[YouSheBiaoTiHei]">
+          未处理
+        </div>
       </div>
 
       <!-- 已处理统计 -->
@@ -34,11 +40,13 @@
           {{ processedCount }}
         </div>
         <img
-          src="@/assets/imgs/equ-right-icon.png"
-          class="w-[45px] h-[50px] my-1"
+          src="@/assets/imgs/equ-right-icon2.png"
+          class="w-[45px] h-[50px] my-1 icon-animation"
           alt="已处理图标"
         />
-        <div class="text-[12px] text-white mt-1">已处理</div>
+        <div class="text-[14px] text-white mt-1 font-[YouSheBiaoTiHei]">
+          已处理
+        </div>
       </div>
       <!-- 已处理统计 -->
       <div class="flex flex-col items-center">
@@ -48,11 +56,13 @@
           {{ ignoredCount }}
         </div>
         <img
-          src="@/assets/imgs/equ-right-icon.png"
-          class="w-[45px] h-[50px] my-1"
+          src="@/assets/imgs/equ-right-icon3.png"
+          class="w-[45px] h-[50px] my-1 icon-animation"
           alt="已处理图标"
         />
-        <div class="text-[12px] text-white mt-1">已忽略</div>
+        <div class="text-[14px] text-white mt-1 font-[YouSheBiaoTiHei]">
+          已忽略
+        </div>
       </div>
     </div>
   </div>
@@ -60,7 +70,7 @@
 
 <script setup lang="ts">
 import { alarmNumCount } from "@/api/iot/home";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch, nextTick } from "vue";
 
 // 告警总数
 let alarmTotal = ref(0);
@@ -78,9 +88,25 @@ const props = defineProps({
   },
 });
 
+const deptId = ref<any>(); //机构id
+
+//监听父组件传递的 deptId 变化
+watch(
+  () => props.deptId,
+  (newVal) => {
+    if (newVal) {
+      deptId.value = newVal;
+      nextTick(() => {
+        getAlarmNumCount();
+      });
+    }
+  },
+  { immediate: true }
+);
+
 // 获取设备告警统计
 function getAlarmNumCount() {
-  alarmNumCount(props.deptId).then((res: any) => {
+  alarmNumCount(deptId.value).then((res: any) => {
     if (res.code === 200) {
       alarmTotal.value = res.data.count;
       unprocessedCount.value = res.data.notHandle;
@@ -90,19 +116,59 @@ function getAlarmNumCount() {
   });
 }
 
-getAlarmNumCount();
+// getAlarmNumCount();
 </script>
 
 <style scoped lang="scss">
 .bg-container {
+  // background: url("@/assets/imgs/equ-bg.png") no-repeat center center;
+  // background-size: 100% 100%;
+  width: 155px;
+  height: 155px;
+
+  @media (max-width: 1440px) {
+    width: 115px;
+    height: 115px;
+  }
+}
+
+.bg-container1 {
   background: url("@/assets/imgs/equ-bg.png") no-repeat center center;
   background-size: 100% 100%;
   width: 155px;
   height: 155px;
+  // 图片循环旋转动画
+  animation: rotate 9s linear infinite;
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 
   @media (max-width: 1440px) {
     width: 115px;
     height: 115px;
   }
 }
+
+.icon-animation {
+  //循环放大、缩小动画播放
+  animation: cluster-marker-zoom 0.9s ease-in-out infinite;
+}
+
+@keyframes cluster-marker-zoom {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
 </style>

src/views/components/SubsidiaryCompanyEquipment.vue

@@ -4,7 +4,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
 import * as echarts from "echarts";
 import { debounce } from "lodash-es"; // 或使用自定义防抖函数
 import { deviceCountByChild } from "@/api/iot/home";
@@ -21,6 +21,22 @@ const props = defineProps({
     default: 0,
   },
 });
+
+const deptId = ref<any>(); //机构id
+
+//监听父组件传递的 deptId 变化
+watch(
+  () => props.deptId,
+  (newVal) => {
+    if (newVal) {
+      deptId.value = newVal;
+      nextTick(() => {
+        getList();
+      });
+    }
+  },
+  { immediate: true }
+);
 // 防抖的重绘函数
 const handleResize = debounce(() => {
   chart.value?.resize();
@@ -112,8 +128,8 @@ const initChart = () => {
   chart.value.setOption(option);
 };
 
-onMounted(() => {
-  deviceCountByChild(props.deptId).then((res: any) => {
+function getList() {
+  deviceCountByChild(deptId.value).then((res: any) => {
     if (res.code === 200) {
       const childDeptList = res.result?.childDeptList || [];
       const numMap = res.result?.numMap || {};
@@ -150,7 +166,7 @@ onMounted(() => {
   }
   // 仍然监听窗口大小变化作为后备
   window.addEventListener("resize", handleResize);
-});
+}
 
 onBeforeUnmount(() => {
   // 清理工作

src/views/components/SysClassification.vue

@@ -41,7 +41,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { countBySysType } from "@/api/iot/home";
 const router = useRouter();
@@ -91,6 +91,20 @@ const sysClassificationList = ref([
   },
 ]);
 
+const deptId = ref<any>(); //机构id
+
+//监听父组件传递的 deptId 变化
+watch(
+  () => props.deptId,
+  (newVal) => {
+    if (newVal) {
+      deptId.value = newVal;
+      getCountBySysType();
+    }
+  },
+  { immediate: true }
+);
+
 // 点击事件
 const handleClick = (item: any, index: number) => {
   switch (index) {
@@ -121,7 +135,7 @@ const handleClick = (item: any, index: number) => {
 };
 
 function getCountBySysType() {
-  countBySysType(props.deptId).then((res: any) => {
+  countBySysType(deptId.value).then((res: any) => {
     if (res.code === 200) {
       res.data.map((item: any) => {
         // 如果 item.type==1 则赋值给 sysClassificationList[0]
@@ -134,7 +148,6 @@ function getCountBySysType() {
     }
   });
 }
-getCountBySysType();
 </script>
 
 <style scoped lang="scss">

src/views/tunnel/TunnelHome.vue

@@ -97,11 +97,12 @@ import DataInfo from "./components/DataInfo.vue";
 import TunnelStatusNum from "./components/TunnelStatusNum.vue";
 import ConstructionProgress from "./components/ConstructionProgress.vue";
 import ContainerWrap from "@/layout/tunnel/components/ContainerWrap/index.vue";
-import { officeInfo, listForParent } from "@/api/tunnel/office";
+import { listForParent } from "@/api/tunnel/office";
 import gsap from "gsap";
-
+import useUserStore from "@/store/modules/user";
+const userStore = useUserStore();
 const router = useRouter();
-const selectedOffice = ref(100);
+const selectedOffice = ref();
 const selectedOfficeList = ref([]);
 
 const handleOfficeChange = (val: any) => {
@@ -116,20 +117,20 @@ const handleMoreVideoClick = () => {
 
 // 获取机构信息
 function getOfficeInfo() {
-  // listForParent().then((res: any) => {
-  //   console.log(res);
-  //   if (res.code === 200) {
-  //     selectedOfficeList.value = res.data;
-  //     if (selectedOfficeList.value.length > 0) {
-  //       //为selectedOfficeList下标 0 添加一个默认值
-  //       selectedOfficeList.value.unshift({
-  //         deptId: 100,
-  //         deptName: "山西路桥集团",
-  //       });
-  //       selectedOffice.value = selectedOfficeList.value[0].deptId;
-  //     }
-  //   }
-  // });
+  listForParent().then((res: any) => {
+    console.log(res);
+    if (res.code === 200) {
+      selectedOfficeList.value = res.data;
+      if (selectedOfficeList.value.length > 0) {
+        //为selectedOfficeList下标 0 添加一个默认值
+        selectedOfficeList.value.unshift({
+          deptId: userStore.deptId,
+          deptName: userStore.deptName,
+        });
+        selectedOffice.value = selectedOfficeList.value[0].deptId;
+      }
+    }
+  });
 }
 getOfficeInfo();