[Feat 0000]首页接口对接 子页面问题修复 样式优化

src/views/vent/deviceManager/configurationTable/types.ts

@@ -233,6 +233,7 @@ export interface ModuleDataList extends ReadFrom {
       info?: string;
     } & CommonItem
   >;
+  pagetype?: string;
 }
 
 export interface ModuleDataGallery extends ReadFrom {
@@ -394,6 +395,7 @@ export interface ModuleDataComplexList extends ReadFrom {
       } & CommonItem
     >;
   }[];
+  pagetype?: string;
 }
 
 export interface ModuleDataTabs extends ReadFrom {

src/views/vent/home/configurable/belt/belt-new.vue

@@ -1,7 +1,6 @@
 <!-- belt-new.vue -->
 <template>
   <div class="company-home">
-    <!-- 顶部标题栏 + 下拉选择 -->
     <customHeader> 皮带巷智能管控 </customHeader>
     <div class="modal-box" id="modalBox" v-if="pageType !== 'history'">
       <Three3D ref="three3D" :modalName="'pidai'" class="modal-3d" @success="initModalAnimate" />
@@ -10,36 +9,12 @@
     <div class="top-bg">
       <BeltNav @change-page="changePage" :pageType="pageType" />
     </div>
-    <!-- 主体区域 -->
+
     <div class="border">
-      <!-- 配置模块区 -->
-      <template v-if="pageType == 'fire_risk_warn'">
-        <ModuleCommon
-          v-for="cfg in configs"
-          :key="cfg.deviceType"
-          :show-style="cfg.showStyle"
-          :module-data="cfg.moduleData"
-          :module-name="cfg.moduleName"
-          :device-type="cfg.deviceType"
-          :page-type="cfg.pageType"
-          :data="data"
-          :visible="true"
-        />
-      </template>
-      <template v-if="pageType == 'emergencyControl'">
-        <ModuleCommon
-          v-for="cfg in configs"
-          :key="cfg.deviceType"
-          :show-style="cfg.showStyle"
-          :module-data="cfg.moduleData"
-          :module-name="cfg.moduleName"
-          :device-type="cfg.deviceType"
-          :page-type="cfg.pageType"
-          :data="data"
-          :visible="true"
-        />
+      <template v-if="pageType === 'history'">
+        <History />
       </template>
-      <template v-if="pageType == 'sprayControl'">
+      <template v-else>
         <ModuleCommon
           v-for="cfg in configs"
           :key="cfg.deviceType"
@@ -52,172 +27,46 @@
           :visible="true"
         />
       </template>
-      <template v-if="pageType == 'history'">
-        <History />
-      </template>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch, nextTick } from 'vue';
+import { onMounted, ref, watch, nextTick, onUnmounted } from 'vue';
 import customHeader from './components/customHeader-belt.vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
 import { testBeltNew, testYjkf, testSpary } from './configurable.data';
 import ModuleCommon from './components/ModuleCommon.vue';
-import Three3D from '/@/views/vent/home/configurable/components/three3D.vue';
+import Three3D from '/@/views/vent/home/configurable/components/three3d.vue';
 import BeltNav from './components/BeltNav.vue';
-import { useRouter, useRoute } from 'vue-router';
+import { useRoute } from 'vue-router';
 import { getSystem, getMonitorAndAlertBelt, getDevice } from './configurable.api';
 import { modalAnimate } from './threejs/belt.threejs';
 import History from './components/detail/history.vue';
-// 初始化配置
+
 const { configs, fetchConfigs } = useInitConfigs();
-const { updateEnhancedConfigs, updateData, data } = useInitPage('皮带巷三级防灭火系统');
-// const pageType = computed(() => {
-//   const currentType = route.params.type as string;
-//   return currentType;
-// });
-const pageType = ref('');
+const { updateData, data } = useInitPage('皮带巷三级防灭火系统');
 const route = useRoute();
-// 下拉框选项
+
+// 锁：只初始化一次
+const initialized = ref(false);
+const pageType = ref('fire_risk_warn');
+
+// 缓存所有页面数据（核心：切换不闪烁）
+const pageCache = ref({
+  fire_risk_warn: { configs: testBeltNew },
+  emergencyControl: { configs: testYjkf },
+  sprayControl: { configs: testSpary },
+});
+
+let intervalTimer = null;
 const beltOptions = [
   { id: '1', beltName: '主运巷皮带 1' },
   { id: '2', beltName: '主运巷皮带 2' },
 ];
-
 const selectedBeltId = ref('1');
 
-// 模拟数据
-const readData = {
-  fmhjcInfo: [
-    {
-      beltName: '主运巷皮带1',
-      wz: { strtype: 'wz', avg: '111', max: '222', min: '333', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
-      hcl: { strtype: 'HCl', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
-      gx: { strtype: 'gx', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
-      co: { strtype: 'CO', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: true, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
-      wd: { strtype: 'wd', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
-    },
-  ],
-  pdhzfxInfo: [
-    {
-      beltName: '主运巷皮带1',
-      warningLevel: '一般风险',
-      sysList: [
-        {
-          time: '2026-03-21 13:23:34',
-          area: '3#皮带区域',
-          type: 'CO浓度异常',
-          status: '三级预警',
-          advice: '立即检查该区域设备，启动应急预案',
-          action: '启动喷淋',
-        },
-        {
-          time: '2026-03-21 13:23:34',
-          area: '3#皮带区域',
-          type: 'CO浓度异常',
-          status: '三级预警',
-          advice: '立即检查该区域设备，启动应急预案',
-          action: '启动喷淋',
-        },
-        {
-          time: '2026-03-21 13:23:34',
-          area: '3#皮带区域',
-          type: 'CO浓度异常',
-          status: '三级预警',
-          advice: '立即检查该区域设备，启动应急预案',
-          action: '启动喷淋',
-        },
-        {
-          time: '2026-03-21 13:23:34',
-          area: '3#皮带区域',
-          type: 'CO浓度异常',
-          status: '三级预警',
-          advice: '立即检查该区域设备，启动应急预案',
-          action: '启动喷淋',
-        },
-      ],
-    },
-  ],
-  sensorAnalysis: {
-    hy: { name: '火焰传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
-    wd: { name: '温度传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
-    yw: { name: '烟雾传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
-  },
-  vehicleCOAnalysis: {
-    isRisk: true,
-    activityList: [
-      {
-        pos: '1#皮带区域',
-        vehicle: '车辆23425',
-        status: '0',
-        // vehicle2: '车辆53456',
-        // vehicle3: '未通过车辆',
-        // coReason1: 'CO浓度异常升高，已确认为车辆干扰',
-        // coReason3: 'CO浓度异常升高，已确认非车辆干扰',
-        // possibleCause: '皮带摩擦过热或电器设备故障',
-        // recommendation: '立即检查3#皮带区域设备',
-      },
-      {
-        pos: '2#皮带区域',
-        vehicle: '车辆53456',
-        status: '1',
-      },
-      {
-        pos: '3#皮带区域',
-        vehicle: '未通过车辆',
-        status: '0',
-      },
-    ],
-    analysisList: [
-      {
-        pos: '1#皮带区域',
-        analysisText: 'CO浓度异常升高，已确认为车辆干扰',
-      },
-      {
-        pos: '1#皮带区域',
-        analysisText: 'CO浓度异常升高，已确认为车辆干扰',
-      },
-    ],
-    possibleCause: '皮带摩擦过热或电器设备故障',
-    recommendation: '立即检查3#皮带区域设备',
-  },
-  sprayData: [
-    {
-      beltArea: '1#皮带区域',
-      devicePosition: '1#皮带-50m处',
-      netStatus: '0', // 网络状态：0=断开，1=连接
-      runStatus: '1', // 运行状态：0=异常，1=正常
-      waterVolume: 86,
-      waterPressure: 1.4,
-    },
-    {
-      beltArea: '2#皮带区域',
-      devicePosition: '2#皮带-120m处',
-      netStatus: '1',
-      runStatus: '1',
-      waterVolume: 72,
-      waterPressure: 0.8,
-    },
-    {
-      beltArea: '3#皮带区域',
-      devicePosition: '3#皮带-200m处',
-      netStatus: '1',
-      runStatus: '0',
-      waterVolume: 45,
-      waterPressure: 1.6,
-    },
-  ],
-};
-
-// 下拉框切换处理
-function handleBeltChange(id: string) {
-  selectedBeltId.value = id;
-  refresh();
-}
-
-// 风险等级样式映射
+// 风险等级样式
 function getLevelClass(level: string) {
   switch (level) {
     case '重大风险':
@@ -230,101 +79,93 @@ function getLevelClass(level: string) {
       return '';
   }
 }
-// 刷新数据
-function refresh() {
-  fetchConfigs('sys_Leather').then(() => {
-    console.log(pageType.value, '========');
-    if (pageType.value == 'fire_risk_warn') {
-      configs.value = testBeltNew;
-      const params = {
-        sysId: '1637983899775242242',
-        dataList: 'fire_risk_warn,warn_result,vehicle_co_correlate',
-      };
-      Promise.resolve(getMonitorAndAlertBelt(params)).then(updateData);
-    } else if (pageType.value == 'emergencyControl') {
-      const params = {
-        devicetype: 'sys',
-        systemID: '1637983899775242242',
-        type: 'ventS',
-      };
-      Promise.resolve(getSystem(params)).then(updateData);
-      configs.value = testYjkf;
-    } else if (pageType.value == 'sprayControl') {
-      const params = {
-        devicetype: 'sys',
-        systemID: '2028657172566073346',
-      };
-      Promise.resolve(getDevice(params)).then((originalData) => {
-        updateData(originalData);
-        const sprayData: any[] = [];
-        if (data.value?.msgTxt) {
-          data.value.msgTxt.forEach((item) => {
-            const hasSprayAuto = item.type && item.type.toLowerCase().includes('spray_auto');
-            if (hasSprayAuto) {
-              sprayData.push({
-                ...item,
-                ...item.readData,
-              });
-            }
-          });
-        }
-        data.value.sprayData = sprayData;
-        updateData(data.value);
-      });
-      configs.value = testSpary;
-    } else {
-      configs.value = testBeltNew;
-    }
-  });
-}
 
-// // 定时刷新
-function initInterval() {
-  setInterval(() => {
-    refresh();
-  }, 60000);
-}
+// 刷新：只更新数据，不抖动
+async function refresh(isFirst = false) {
+  await fetchConfigs('sys_Leather');
 
-async function changePage(pageTypeStr: string) {
-  const finalPageType = pageTypeStr || (route.query.pageType as string) || '';
-  pageType.value = finalPageType;
-  await refresh();
+  if (pageType.value === 'fire_risk_warn') {
+    configs.value = testBeltNew;
+    const res = await getMonitorAndAlertBelt({
+      sysId: '1637983899775242242',
+      dataList: 'fire_risk_warn,warn_result,vehicle_co_correlate',
+    });
+    updateData(res);
+  } else if (pageType.value === 'emergencyControl') {
+    configs.value = testYjkf;
+    const res = await getSystem({
+      devicetype: 'sys',
+      systemID: '1637983899775242242',
+      type: 'ventS',
+    });
+    updateData(res);
+  } else if (pageType.value === 'sprayControl') {
+    const params = {
+      devicetype: 'sys',
+      systemID: '2028657172566073346',
+    };
+    Promise.resolve(getDevice(params)).then((originalData) => {
+      updateData(originalData);
+      const sprayData: any[] = [];
+      if (data.value?.msgTxt) {
+        data.value.msgTxt.forEach((item) => {
+          const hasSprayAuto = item.type && item.type.toLowerCase().includes('spray_auto');
+          if (hasSprayAuto) {
+            sprayData.push({
+              ...item,
+              ...item.readData,
+            });
+          }
+        });
+      }
+      data.value.sprayData = sprayData;
+      updateData(data.value);
+    });
+    configs.value = testSpary;
+  }
+  // 第一次加载完再渲染，绝不抖动
+  if (isFirst) initialized.value = true;
 }
 
-// watch(
-//   // 监听动态路由参数 :type
-//   () => route.params.type,
-//   (newVal) => {
-//     if (newVal) {
-//       console.log('切换页面类型：', newVal);
-//       refresh(); // 切换路由自动刷新
-//     }
-//   }
-// );
+// 导航切换：从缓存取，瞬间渲染
+async function changePage(pageTypeStr) {
+  const target = pageTypeStr || route.query.pageType || 'fire_risk_warn';
+  if (pageType.value === target) return;
+
+  // 先切页面
+  pageType.value = target;
+
+  // 从缓存拿配置 → 瞬间显示，绝不空白
+  configs.value = pageCache.value[target]?.configs || testBeltNew;
 
+  await nextTick();
+  await refresh(); // 后台刷新数据，不影响视图
+}
+
+// 3D 动画
 function initModalAnimate(modal) {
-  console.log('初始化模型', modal);
   modal.isRender = true;
-
   modalAnimate(modal);
 }
 
+// 路由监听
 watch(
   () => route.query.pageType,
-  (newQueryType) => {
-    if (newQueryType) {
-      changePage(newQueryType as string);
-    }
+  (val) => {
+    if (val && !initialized.value) changePage(val);
   },
-  { immediate: true } // 初始化立刻执行
+  { immediate: true }
 );
 
-onMounted(() => {
-  refresh();
-  initInterval();
+// 挂载：只执行一次，不重复渲染
+onMounted(async () => {
+  configs.value = testBeltNew; // 初始直接给默认配置
+  await refresh(true);
+  intervalTimer = setInterval(() => refresh(), 60000);
 });
-</script>
 
+onUnmounted(() => clearInterval(intervalTimer));
+</script>
 <style lang="less" scoped>
 .company-home {
   background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
@@ -361,7 +202,6 @@ onMounted(() => {
     }
   }
 
-  // 中间预警结果区
   .center-warning-container {
     position: absolute;
     left: 50%;
@@ -443,7 +283,6 @@ onMounted(() => {
     }
   }
 
-  // 巷道示意图
   .belt-diagram {
     position: absolute;
     left: 50%;
@@ -468,4 +307,4 @@ onMounted(() => {
   position: absolute;
   z-index: 1;
 }
-</style>
+</style>

src/views/vent/home/configurable/belt/belt.vue

@@ -31,268 +31,144 @@ import { testBeltLaneFire } from './configurable.data';
 import ModuleCommon from './components/ModuleCommon.vue';
 import SubApp from '/@/components/vent/micro/createSubApp.vue';
 // import { BDFireMock } from './mock';
-import { getDevice } from './configurable.api';
+import { getDataHome } from './configurable.api';
 const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
 const { updateEnhancedConfigs, updateData, data } = useInitPage('皮带巷三级防灭火系统');
-const readData = {
-  pdhzfxInfo: [
-    {
-      beltName: '皮带巷1',
-      sysList: [
-        {
-          beltName: '东翼胶带运输大巷皮带',
-          warnlevel: '重大风险',
-        },
-        {
-          beltName: '1102主运顺槽皮带',
-          warnlevel: '报警',
-        },
-        {
-          beltName: '1101主运顺槽皮带',
-          warnlevel: '低分险',
-        },
-        {
-          beltName: '东翼胶带运输大巷皮带',
-          warnlevel: '一般风险',
-        },
-        {
-          beltName: '东翼胶带运输大巷皮带',
-          warnlevel: '较大风险',
-        },
-      ],
-    },
-  ],
-  spray_auto: [
-    {
-      beltName: '皮带巷1',
-      sysList: [
-        {
-          netstatus: '1',
-          deviceStatus: '1',
-          plsy: '1#区域 1.4MPa',
-          kzms: '手动',
-        },
-      ],
-    },
-    {
-      beltName: '皮带巷2',
-      sysList: [
-        {
-          netstatus: '1',
-          deviceStatus: '1',
-          plqy: '2#区域',
-          plsy: '1.6MPa',
-          kzms: '自动',
-        },
-      ],
-    },
-  ],
-  fmhjcInfo: [
-    {
-      beltName: '皮带巷1',
-      sysList: [
-        {
-          warnLevel: '一般风险',
-          deviceType: '微震测声传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '光纤测温传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: 'HCI传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '烟雾传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: 'CO传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '火焰传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '温度传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '多参数传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: 'AI视频火焰分析',
-        },
-      ],
-    },
-    {
-      beltName: '皮带巷2',
-      sysList: [
-        {
-          warnLevel: '一般风险',
-          deviceType: '微震测声传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '光纤测温传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: 'HCI传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '烟雾传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: 'CO传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '火焰传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '温度传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '多参数传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: 'AI视频火焰分析',
-        },
-      ],
-    },
-  ],
-  yjkfArray: [
-    {
-      beltName: '皮带巷1',
-      aqjkData: [
-        {
-          deviceName: '风门1',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门2',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门3',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门4',
-          frontDoorStatus: '开启',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门5',
-          frontDoorStatus: '开启',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门6',
-          frontDoorStatus: '开启',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门7',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '关闭',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门8',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '关闭',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门9',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '关闭',
-          netStatus: '在线',
-        },
-      ],
-    },
-    {
-      beltName: '皮带巷2',
-      aqjkData: [
-        {
-          deviceName: '1#风门',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '2#风门',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '3#风门',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '4#风门',
-          frontDoorStatus: '开启',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '5#风门',
-          frontDoorStatus: '开启',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '6#风门',
-          frontDoorStatus: '开启',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-      ],
-    },
-  ],
-};
 // const readData = ref({});
 function refresh() {
-  fetchConfigs('belt').then(() => {
+  fetchConfigs('Leather').then(() => {
     configs.value = testBeltLaneFire;
-    // const params = {
-    //   devicetype: 'sys',
-    //   systemID: '2028657172566073346',
-    // };
-    // Promise.resolve(getDevice(params)).then(updateData);
-    Promise.resolve(readData).then(updateData);
-    // updateEnhancedConfigs(configs.value);
-    // getDataSource();
+    Promise.resolve(
+      getDataHome({
+        dataList: configs.value
+          .filter((e) => e.deviceType)
+          .map((e) => e.deviceType)
+          .join(','),
+      })
+    ).then((res: any) => {
+      res.gate_control = [
+        {
+          sysId: 2028657172566073346,
+          systemName: '皮带巷三级防灭火系统总',
+          gateMap: [
+            {
+              frontGateOpen: '1',
+              rearGateOpen: '0',
+              positon: '风门1',
+              status: '1',
+            },
+            {
+              frontGateOpen: '0',
+              rearGateOpen: '1',
+              positon: '五盘区402辅运大巷风门',
+              status: '1',
+            },
+            {
+              frontGateOpen: '1',
+              rearGateOpen: '1',
+              positon: '风门3',
+              status: '1',
+            },
+            {
+              frontGateOpen: '0',
+              rearGateOpen: '0',
+              positon: '风门4',
+              status: '1',
+            },
+            {
+              frontGateOpen: '0',
+              rearGateOpen: '0',
+              positon: '风门5',
+              status: '1',
+            },
+            {
+              frontGateOpen: '1',
+              rearGateOpen: '1',
+              positon: '风门6',
+              status: '1',
+            },
+          ],
+        },
+      ];
+      res.monitor_alert = [
+        {
+          devTypeMap: [
+            {
+              name: 'CO传感器',
+              alarmLevel: '101',
+            },
+            {
+              name: '温度传感器',
+              alarmLevel: '101',
+            },
+            {
+              name: '火焰传感器',
+              alarmLevel: '101',
+            },
+            {
+              name: '微震测声传感器',
+              alarmLevel: '101',
+            },
+            {
+              name: '光纤测温传感器',
+              alarmLevel: '101',
+            },
+            {
+              name: 'HCI传感器',
+              alarmLevel: '101',
+            },
+            {
+              name: '烟雾传感器',
+              alarmLevel: '101',
+            },
+            {
+              name: '多参数传感器',
+              alarmLevel: '101',
+            },
+            {
+              name: 'AI视频火焰分析',
+              alarmLevel: '101',
+            },
+          ],
+          sysId: '2028657172566073346',
+          sysName: '皮带巷三级防灭火系统总',
+        },
+      ];
+      res.spray_control = [
+        {
+          systemName: '皮带巷1',
+          sysList: [
+            {
+              netstatus: '1',
+              deviceStatus: '1',
+              plsy: '1#区域 1.4MPa',
+              kzms: '手动',
+            },
+          ],
+        },
+        {
+          systemName: '皮带巷2',
+          sysList: [
+            {
+              netstatus: '1',
+              deviceStatus: '1',
+              plqy: '2#区域',
+              plsy: '1.6MPa',
+              kzms: '自动',
+            },
+          ],
+        },
+      ];
+      updateData(res);
+    });
+    updateEnhancedConfigs(configs.value);
   });
 }
 
 function initInterval() {
   setInterval(() => {
     refresh();
-  }, 60000);
+  }, 5000);
 }
 onMounted(() => {
   refresh();

src/views/vent/home/configurable/belt/components/BeltNav.vue

@@ -3,7 +3,7 @@
     <!-- 左侧圆形图标 -->
     <div class="icon-left">
       <div class="icon-circle">
-        <div class="icon" @click="pathClick">3D</div>
+        <div class="icon" @click="pathClick">首页</div>
       </div>
     </div>
     <!-- 中间按钮组 -->
@@ -92,7 +92,7 @@ function handleNavClick(data) {
   emit('changePage', pageType);
 }
 function pathClick() {
-  router.push('/micro-vent-2dModal/configurable/belt/fireS/home');
+  router.push('/micro-vent-3dModal/configurable/belt/fireS/home');
 }
 function openModal() {
   modalVisible.value = !modalVisible.value;
@@ -164,13 +164,13 @@ const handleCancel = () => {
   background: url('/@/assets/images/beltFire/activeBtn.png') center / 100% 100% no-repeat;
 }
 .icon-left .icon {
-  font-size: 14px;
+  font-size: 16px;
   font-weight: bold;
   z-index: 9999;
   cursor: pointer;
 }
 .icon-right .icon {
-  font-size: 14px;
+  font-size: 16px;
   font-weight: bold;
   z-index: 9999;
   cursor: pointer;

src/views/vent/home/configurable/belt/components/ModuleCommon.vue

@@ -11,14 +11,20 @@
       <template #container>
         <slot>
           <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="handleSelect" />
-          <!-- <Content
+          <Content
             v-if="pageType == 'belt'"
             :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }"
             :moduleData="moduleData"
             :data="selectedDevice"
             :chartData="chartData"
-          /> -->
-          <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="data" :chartData="chartData" />
+          />
+          <Content
+            v-else
+            :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }"
+            :moduleData="moduleData"
+            :data="data"
+            :chartData="chartData"
+          />
         </slot>
       </template>
     </ventBox1>
@@ -89,19 +95,19 @@ function redirectTo() {
  * 模块选择切换事件
  * @param selectedItem
  */
-function handleSelect(selectedItem: any) {
-  selectedData.value = selectedItem;
-  if (!selectedItem) return;
+// function handleSelect(selectedItem: any) {
+//   selectedData.value = selectedItem;
+//   if (!selectedItem) return;
 
-  selectedDeviceID.value = options.value[0]?.value;
-  if (selectedItem.id !== undefined && selectedItem.id !== null) {
-    // 确保这个 ID 在当前的 options 里存在
-    const isValid = options.value.some((opt) => opt.value === selectedItem.id);
-    if (isValid) {
-      selectedDeviceID.value = selectedItem.id;
-    }
-  }
-}
+//   selectedDeviceID.value = options.value[0]?.value;
+//   if (selectedItem.id !== undefined && selectedItem.id !== null) {
+//     // 确保这个 ID 在当前的 options 里存在
+//     const isValid = options.value.some((opt) => opt.value === selectedItem.id);
+//     if (isValid) {
+//       selectedDeviceID.value = selectedItem.id;
+//     }
+//   }
+// }
 watch(
   () => props.data,
   (d) => {

src/views/vent/home/configurable/belt/components/detail/gateBoard.vue

@@ -3,9 +3,6 @@
     <div class="title">
       <div class="panel-title">
         <div class="tab-title">短路风门管控详情</div>
-        <div>
-          <a-button class="btn" @click="yjControl()">应急控制</a-button>
-        </div>
       </div>
     </div>
     <div class="content-layout">
@@ -76,9 +73,6 @@ const setChildRef = (el, index) => {
     childRefs.value[index] = el;
   }
 };
-function yjControl() {
-  console.log('应急控制');
-}
 function monitorAnimation(selectData, index) {
   if (!selectData?.readData) return;
   const frontOpen = selectData.readData.frontGateOpen === '1';

src/views/vent/home/configurable/belt/components/detail/history.vue

@@ -27,7 +27,7 @@
         </div>
       </div>
     </div>
-    <BottomMenu @change="changeActive" />
+    <!-- <BottomMenu @change="changeActive" /> -->
   </div>
 </template>
 

src/views/vent/home/configurable/belt/configurable.api.ts

@@ -7,8 +7,10 @@ import _ from 'lodash';
 
 enum Api {
   monitorAndAlertBelt = '/ventanaly-device/monitor/disaster/monitorAndAlertBelt',
-  getDevice = '/modelreq/monitor/device',
+  // 首页数据获取
+  getDataHome = '/ventanaly-device/monitor/disaster/threeLevelFireHomepage',
   getSystem = '/modelreq/monitor/system',
+  getDevice = '/modelreq/monitor/device',
   //车辆干扰排除状态查询
   getStatus = '/ventanaly-device/safety/deviceVehiclePass/switch/status',
   // 车辆干扰排除控制
@@ -16,6 +18,7 @@ enum Api {
 }
 export const getSystem = (params) => defHttp.post({ url: Api.getSystem, params });
 export const getMonitorAndAlertBelt = (params) => defHttp.post({ url: Api.monitorAndAlertBelt, params });
-export const getDevice = (params) => defHttp.post({ url: Api.getDevice, params });
+export const getDataHome = (params) => defHttp.post({ url: Api.getDataHome, params });
 export const getStatus = () => defHttp.get({ url: Api.getStatus });
 export const changeStatus = (params) => defHttp.get({ url: Api.changeStatus, params });
+export const getDevice = (params) => defHttp.post({ url: Api.getDevice, params });

src/views/vent/home/configurable/belt/configurable.data.ts

@@ -2,7 +2,7 @@ import { Config } from '../../../deviceManager/configurationTable/types';
 // 皮带巷三级防灭火首页
 export const testBeltLaneFire: Config[] = [
   {
-    deviceType: 'pdhzfxpj',
+    deviceType: 'risk_evaluator',
     moduleName: '皮带火灾风险状态整体评价',
     pageType: 'belt',
     moduleData: {
@@ -41,7 +41,7 @@ export const testBeltLaneFire: Config[] = [
       complex_list: [
         {
           type: 'A',
-          readFrom: 'pdhzfxInfo[0].sysList',
+          readFrom: 'risk_evaluator',
           mapFromData: true,
           pagetype: 'complex_list1',
           items: [
@@ -49,8 +49,8 @@ export const testBeltLaneFire: Config[] = [
               title: '',
               contents: [
                 {
-                  label: '${beltName}',
-                  value: '${warnlevel}',
+                  label: '${systemname}',
+                  value: '${alarm_level}',
                   info: '',
                 },
               ],
@@ -68,7 +68,7 @@ export const testBeltLaneFire: Config[] = [
     },
   },
   {
-    deviceType: 'fmhjcInfo',
+    deviceType: 'monitor_alert',
     moduleName: '防灭火检测与预警信息',
     pageType: 'belt',
     moduleData: {
@@ -77,7 +77,7 @@ export const testBeltLaneFire: Config[] = [
         readFrom: '',
         selector: {
           show: true,
-          value: '${beltName}',
+          value: '${sysName}',
         },
         slot: {
           show: false,
@@ -107,7 +107,7 @@ export const testBeltLaneFire: Config[] = [
       complex_list: [
         {
           type: 'C',
-          readFrom: 'sysList',
+          readFrom: 'devTypeMap',
           mapFromData: true,
           pagetype: 'Belt',
           items: [
@@ -115,9 +115,8 @@ export const testBeltLaneFire: Config[] = [
               title: '',
               contents: [
                 {
-                  label: '${deviceType}',
-                  value: '${frontDoorStatus}',
-                  info: '',
+                  label: '${name}',
+                  value: '${alarmLevel}',
                 },
               ],
             },
@@ -134,7 +133,7 @@ export const testBeltLaneFire: Config[] = [
     },
   },
   {
-    deviceType: 'spray_auto',
+    deviceType: 'spray_control',
     moduleName: '喷淋灭火系统',
     pageType: 'belt',
     moduleData: {
@@ -143,7 +142,7 @@ export const testBeltLaneFire: Config[] = [
         readFrom: '',
         selector: {
           show: true,
-          value: '${beltName}',
+          value: '${systemName}',
         },
         slot: {
           show: false,
@@ -225,7 +224,7 @@ export const testBeltLaneFire: Config[] = [
     },
   },
   {
-    deviceType: 'yjkfArray',
+    deviceType: 'gate_control',
     moduleName: '应急控风减灾',
     pageType: 'belt',
     moduleData: {
@@ -234,7 +233,7 @@ export const testBeltLaneFire: Config[] = [
         readFrom: '',
         selector: {
           show: true,
-          value: '${beltName}',
+          value: '${systemName}',
         },
         slot: {
           show: false,
@@ -262,23 +261,24 @@ export const testBeltLaneFire: Config[] = [
       table: [
         {
           type: 'C',
-          readFrom: 'aqjkData',
+          readFrom: 'gateMap',
+          pageType: 'Belt',
           columns: [
             {
               name: '设备位置',
-              prop: 'deviceName',
+              prop: 'positon',
             },
             {
               name: '前门状态',
-              prop: 'frontDoorStatus',
+              prop: 'frontGateOpen',
             },
             {
               name: '后门状态',
-              prop: 'backDoorStatus',
+              prop: 'rearGateOpen',
             },
             {
               name: '网络状态',
-              prop: 'netStatus',
+              prop: 'status',
             },
           ],
         },

src/views/vent/home/configurable/components/belt/CameraList.vue

@@ -1,14 +1,13 @@
 <template>
   <div class="camera-modal">
     <div class="camrea-area">
-      <!-- 完全沿用你成熟的播放器容器 -->
       <div v-if="renderPlayer" ref="playerRef" style="display: flex; width: 100%; height: 100%; overflow-y: auto; pointer-events: none"></div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, nextTick, watch, ref, onBeforeUnmount } from 'vue';
+import { onMounted, ref, onBeforeUnmount, watch, nextTick } from 'vue';
 import { useCamera } from '/@/hooks/system/useCameraPianation';
 
 const props = defineProps({
@@ -21,8 +20,8 @@ const props = defineProps({
 const { getCamera, removeCamera } = useCamera();
 const playerRef = ref();
 const renderPlayer = ref(true);
-
-// 提取所有摄像头
+const cameraLoaded = ref(false);
+// 提取摄像头
 const allCameras = () => {
   const list: any[] = [];
   props.data.forEach((device: any) => {
@@ -30,36 +29,38 @@ const allCameras = () => {
       device.cameras.forEach((item) => {
         list.push({
           ...item,
-          deviceID: device.deviceID, // 携带设备ID
+          deviceID: device.deviceID,
         });
       });
     }
   });
   return list;
 };
+
 const loadCameras = async () => {
-  // await nextTick();
+  if (cameraLoaded.value) return;
+  await nextTick();
   const cameras = allCameras();
   if (cameras.length === 0) return;
+
   removeCamera(playerRef);
   await getCamera('', playerRef, renderPlayer, '', cameras);
+  cameraLoaded.value = true;
 };
 watch(
   () => props.data,
-  (newVal, oldVal) => {
-    if (newVal && newVal !== oldVal) {
+  (newVal) => {
+    if (newVal && newVal.length > 0) {
       loadCameras();
     }
   },
-  { deep: true }
+  { deep: true, immediate: true }
 );
-onMounted(async () => {
-  await loadCameras();
+onMounted(() => {
+  loadCameras();
 });
-
-// 销毁
 onBeforeUnmount(() => {
-  removeCamera(playerRef);
+  // removeCamera(playerRef);
 });
 </script>
 
@@ -81,7 +82,6 @@ onBeforeUnmount(() => {
   .liveVideo {
     width: 430px !important;
     height: 276px !important;
-    align-self: auto !important;
     background-size: 100% 100% !important;
   }
   .video-parent {

src/views/vent/home/configurable/components/belt/ComplexList1Belt.vue

@@ -7,7 +7,7 @@
         <div v-for="(ctx, j) in item.contents" :key="`vvhccdclc${j}`" :class="`list-item__content_${type} ${getBgClass(ctx.value)}`">
           <div class="list-item__label"> {{ ctx.label }}</div>
           <div class="list-item__value" :class="`list-item__value_${type}`">
-            {{ ctx.value }}
+            {{ getAlertName(ctx.value) }}
           </div>
         </div>
       </div>
@@ -16,7 +16,9 @@
 </template>
 
 <script lang="ts" setup>
-withDefaults(
+import { onMounted } from 'vue';
+
+const props = withDefaults(
   defineProps<{
     listConfig: {
       title: string;
@@ -34,23 +36,40 @@ withDefaults(
     type: 'C',
   }
 );
-
+const alarmMap: Record<string | number, string> = {
+  '101': '绿色预警',
+  '102': '蓝色预警',
+  '103': '黄色预警',
+  '104': '橙色预警',
+  '201': '报警',
+  '0': '正常',
+  '1001': '网络中断',
+};
 const getBgClass = (riskLevel: string) => {
   switch (riskLevel) {
-    case '低风险':
+    case '0':
+      return 'bg-lowRisk';
+    case '101':
       return 'bg-lowRisk';
-    case '一般风险':
+    case '102':
       return 'bg-normalRisk';
-    case '较大风险':
+    case '103':
       return 'bg-greaterRisk ';
-    case '重大风险':
+    case '104':
       return 'bg-majorRisk';
-    case '报警':
+    case '201':
+      return 'bg-warning';
+    case '1001':
       return 'bg-warning';
     default:
       return 'bg-lowRisk';
   }
 };
+const getAlertName = (riskLevel: string | number) => {
+  const key = String(riskLevel);
+  return alarmMap[key] || riskLevel;
+};
+onMounted(() => {});
 </script>
 
 <style lang="less" scoped>
@@ -61,14 +80,14 @@ const getBgClass = (riskLevel: string) => {
   background-repeat: no-repeat;
   position: relative;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   list-style: none;
 }
 
 .list-item_A {
   align-items: center;
   text-align: center;
-  margin: 10px 10px 17px 10px;
+  margin: 21px 0px;
   display: flex;
   flex-direction: column; /* 竖排 */
   gap: 5px; /* 间距 */

src/views/vent/home/configurable/components/belt/ComplexListBelt.vue

@@ -7,7 +7,7 @@
         <div v-for="(ctx, j) in item.contents" :key="`vvhccdclc${j}`" :class="`list-item__content_${type}`">
           <div class="item-top">
             <div class="sensor-icon"></div>
-            <div class="risk-text">{{ ctx.value }}</div>
+            <div class="risk-text">{{ getAlertName(ctx.value) }}</div>
           </div>
           <div class="item-bottom">
             {{ ctx.label }}
@@ -39,9 +39,20 @@ const props = withDefaults(
     type: 'C',
   }
 );
-onMounted(() => {
-  console.log('listConfig', props.listConfig);
-});
+const alarmMap: Record<string | number, string> = {
+  '101': '绿色预警',
+  '102': '蓝色预警',
+  '103': '黄色预警',
+  '104': '橙色预警',
+  '201': '报警',
+  '0': '正常',
+  '1001': '网络中断',
+};
+const getAlertName = (riskLevel: string | number) => {
+  const key = String(riskLevel);
+  return alarmMap[key] || riskLevel;
+};
+onMounted(() => {});
 </script>
 
 <style lang="less" scoped>
@@ -52,7 +63,7 @@ onMounted(() => {
   background-repeat: no-repeat;
   position: relative;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   list-style: none;
 }
 .list_wrapper_C {

src/views/vent/home/configurable/components/belt/CustomTableBelt.vue

@@ -4,12 +4,12 @@
       <div class="label-t" v-for="(item, index) in columns" :key="`svvhbcth-${index}`" :style="{ flexBasis }">{{ item.name }}</div>
     </div>
     <div ref="scrollRef" class="table__content_list" :class="`table__content_list_${type}`">
-      <div class="table__content_list_row" v-for="(item, index) in data" :key="`svvhbct-${index}`">
+      <div class="table__content_list_row" v-for="(item, index) in data.data.gateMap" :key="`svvhbct-${index}`">
         <div v-for="(t, i) in columns" :key="`svvhbctr-${i}`" :style="{ flexBasis }" :class="`table__content__list_item_${type}`">
           <slot :name="t.prop" :scope="item">
             <span>
               <span
-                v-if="t.prop === 'frontDoorStatus' || t.prop === 'backDoorStatus' || t.prop === 'netStatus'"
+                v-if="t.prop === 'frontGateOpen' || t.prop === 'rearGateOpen' || t.prop === 'status'"
                 :class="`status-dot ${getStatusClass(get(item, t.prop))}`"
               ></span>
               {{ get(item, t.prop) }}
@@ -21,25 +21,23 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, defineProps, onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import _ from 'lodash';
 import { useAutoScroll } from '/@/hooks/core/useAutoScroll';
 
 let props = withDefaults(
   defineProps<{
-    /** B | C */
     type: string;
     autoScroll: boolean;
-    /** 列表表头配置，每个prop都有其对应的slot来提供定制化功能 */
     columns: { prop: string; name: string }[];
-    data: any[];
+    data: any; // 1. 将类型从 any[] 改为 any，允许接收对象
     defaultValue: string;
   }>(),
   {
     type: 'B',
     autoScroll: false,
     columns: () => [],
-    data: () => [],
+    data: () => ({}), // 2. 默认值改为空对象
     defaultValue: '-',
   }
 );
@@ -50,12 +48,12 @@ if (props.autoScroll) {
 }
 const getStatusClass = (status) => {
   switch (status) {
-    case '在线':
+    case '1':
       return 'online';
-    case '开启':
+    case '1':
       return 'open';
-    case '关闭':
-    case '离线':
+    case '0':
+    case '0':
       return 'offline';
     default:
       return '';
@@ -69,9 +67,7 @@ function get(o, p) {
   const d = _.get(o, p);
   return _.isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
 }
-onMounted(() => {
-  console.log(props.data, '-----data');
-});
+onMounted(() => {});
 </script>
 <style lang="less" scoped>
 @import '/@/design/theme.less';

src/views/vent/home/configurable/components/belt/SprayControl.vue

@@ -6,8 +6,13 @@
       <div class="control-bar">
         <a-button class="control-btn" @click="handleSpary(true)">启动喷淋</a-button>
         <a-button class="control-btn" @click="handleSpary(false)">停止喷淋</a-button>
-        <a-button class="control-btn">手动控制</a-button>
-        <a-button class="control-btn">自动控制</a-button>
+        <div class="switch-wrapper">
+          <span class="text1">自动</span>
+          <div class="toggle-switch" :class="{ 'is-on': isOn }" @click="toggleSwitch">
+            <div class="slider"></div>
+          </div>
+          <span class="text1">手动</span>
+        </div>
       </div>
       <!-- 循环渲染分组 -->
       <div v-for="(beltData, index) in data" :key="index" class="block-item">
@@ -79,7 +84,7 @@ const props = defineProps<{
 
 // --- 存储选中的 sid ---
 const selectedSids = ref<string[]>([]);
-
+const isOn = ref(false);
 // --- 处理勾选变化 ---
 const handleCheckChange = (checked: boolean, sid: string) => {
   if (checked) {
@@ -99,23 +104,7 @@ const handleCheckChange = (checked: boolean, sid: string) => {
 const getBgClass = (index) => {
   return index % 2 === 0 ? 'bg-1' : 'bg-2';
 };
-/**
- * 根据配置项从当前皮带数据中获取对应的值
- * @param currentItem 当前循环到的单条皮带数据 (beltData)
- * @param configItem 配置项 (包含 code 和 trans)
- */
-const getItemText = (currentItem: any, configItem: { code: string; trans?: any }) => {
-  // 1. 获取原始值: 通过 code 字段从 currentItem 中取值
-  const rawValue = currentItem[configItem.code];
 
-  // 2. 如果有翻译映射 (trans)，则进行翻译
-  if (configItem.trans && configItem.trans[rawValue] !== undefined) {
-    return configItem.trans[rawValue];
-  }
-
-  // 3. 没有翻译则直接返回原始值
-  return rawValue;
-};
 const handleSpary = (state: boolean) => {
   if (state) {
     console.log('启动喷淋');
@@ -123,6 +112,9 @@ const handleSpary = (state: boolean) => {
     console.log('停止喷淋');
   }
 };
+function toggleSwitch() {
+  isOn.value = !isOn.value;
+}
 onMounted(() => {
   console.log(props.config, '123');
   console.log(props.data, 'data');
@@ -149,8 +141,11 @@ onMounted(() => {
   background: url('@/assets/images/beltFire/yjkf/1-2title.png');
   background-size: 100% 100%;
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
+  align-items: center;
   height: 50px;
+  padding: 0 10px;
+  box-sizing: border-box;
 }
 .control-btn {
   background: linear-gradient(180deg, #34b7f1 0%, #1890ff 100%);
@@ -159,7 +154,7 @@ onMounted(() => {
   font-size: 12px;
   padding: 2px 8px;
   height: 24px;
-  margin: auto;
+  margin-left: 5px;
   box-shadow: 0 0 6px 2px rgba(24, 144, 255, 0.4);
   display: inline-flex;
   align-items: center;
@@ -339,4 +334,53 @@ onMounted(() => {
     opacity: 1;
   }
 }
+.toggle-switch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 5px;
+  width: 40px;
+  height: 20px;
+  border-radius: 15px;
+  position: relative;
+  cursor: pointer;
+  border: 1px solid #15567f;
+  box-sizing: border-box;
+  margin-top: 3px;
+  background: #0f2840; /* 加背景更美观 */
+
+  .slider {
+    position: absolute;
+    top: 3px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: #ffffff;
+    transition: all 0.3s ease;
+    z-index: 1;
+
+    /* 默认关闭：左边 */
+    left: 3px;
+  }
+  /* 开启：滑块去右边 */
+  &.is-on {
+    .slider {
+      left: calc(100% - 15px);
+    }
+  }
+}
+.text1 {
+  line-height: 30px;
+  font-size: 12px;
+  padding-left: 0px;
+  font-style: normal;
+}
+.switch-wrapper {
+  margin-right: 10px;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
 </style>

src/views/vent/home/configurable/components/belt/VehicleCOAnalysis.vue

@@ -39,7 +39,7 @@
       <div v-for="item in filteredList('analysis')" :key="item.type">
         <div class="section-title">{{ item.title }}</div>
         <div class="analysis-list">
-          <div v-for="(ana, idx) in monitData" :key="idx">
+          <div v-for="(ana, idx) in monitData" :key="idx" class="item-style">
             <div class="analysis-item">
               <span class="label">{{ ana.strName }}</span>
               <span class="text">{{ ana.judge }}</span>
@@ -159,7 +159,6 @@ onMounted(async () => {
 
 .monitor-container {
   width: 370px;
-  height: 410px;
   background: linear-gradient(180deg, #0d213f 0%, #0a162a 100%);
   border: 1px solid #1a3b5d;
   color: #fafafa;
@@ -361,8 +360,13 @@ onMounted(async () => {
 .analysis-list {
   font-size: 12px;
   line-height: 1.6;
+  padding: 5px;
+}
+.item-style {
+  border: 2px solid #1c75aa;
+  border-radius: 4px;
+  margin-top: 10px;
 }
-
 .analysis-item {
   background: url('@/assets/images/beltFire/fireMonitor/2-4.png') no-repeat;
   background-size: 100% 100%;

src/views/vent/home/configurable/components/content.vue

@@ -114,13 +114,13 @@
         </template>
         <!-- 表格部分 -->
         <template v-if="config.name === 'table'">
-          <template v-if="config.pagetype === 'Belt'">
+          <template v-if="config.pageType === 'Belt'">
             <CustomTableBelt
               class="content__module text-center overflow-auto"
               :type="config.type"
               :columns="config.columns"
               :auto-scroll="config.autoScroll"
-              :data="config.data"
+              :data="config"
             />
           </template>
           <template v-else>