feat: 大屏数据修改

mock/pools/serverListData.ts

@@ -0,0 +1,141 @@
+const serverList = [
+  {
+    index: 1,
+    isEnabled: true,
+    type: 4,
+    banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+    deviceSort: "服务器1",
+    state: "在线",
+    description:
+      "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+  },
+  {
+    index: 2,
+    isEnabled: false,
+    type: 4,
+    banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+    deviceSort: "服务器2",
+    state: "在线",
+    description:
+      "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+  },
+  {
+    index: 3,
+    isEnabled: false,
+    type: 5,
+    banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+    deviceSort: "服务器3",
+    state: "在线",
+    description:
+      "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+  },
+  {
+    index: 4,
+    isEnabled: false,
+    type: 2,
+    banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+    deviceSort: "服务器4",
+    state: "离线",
+    description:
+      "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+  },
+  {
+    index: 5,
+    isEnabled: true,
+    type: 3,
+    banner: "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+    deviceSort: "服务器4",
+    state: "在线",
+    description:
+      "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+  },
+  {
+    index: 6,
+    isEnabled: true,
+    type: 3,
+    banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+    deviceSort: "服务器5",
+    state: "在线",
+    description:
+      "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+  },
+  {
+    index: 7,
+    isEnabled: false,
+    type: 1,
+    banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+    deviceSort: "服务器6",
+    state: "离线",
+    description:
+      "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+  },
+  {
+    index: 8,
+    isEnabled: true,
+    type: 3,
+    banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+    deviceSort: "服务器7",
+    state: "在线",
+    description:
+      "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+  },
+  {
+    index: 9,
+    isEnabled: false,
+    type: 1,
+    banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+    deviceSort: "服务器8",
+    state: "离线",
+    description:
+      "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+  },
+  {
+    index: 10,
+    isEnabled: true,
+    type: 4,
+    banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+    deviceSort: "服务器9",
+    state: "在线",
+    description:
+      "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+  },
+  {
+    index: 11,
+    isEnabled: true,
+    type: 5,
+    banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+    deviceSort: "服务器10",
+    state: "在线",
+    description:
+      "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+  },
+  {
+    index: 12,
+    isEnabled: true,
+    type: 2,
+    banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+    deviceSort: "服务器11",
+    state: "在线",
+    description:
+      "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+  },
+  {
+    index: 13,
+    isEnabled: true,
+    type: 3,
+    banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+    deviceSort: "服务器12",
+    state: "在线",
+    description:
+      "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+  }
+];
+
+export const serverListData = {
+  data: {
+    list: serverList,
+    total: serverList.length,
+    page: 1,
+    pageSize: 10
+  }
+};

mock/screenData.ts

@@ -0,0 +1,43 @@
+import { MockMethod } from "vite-plugin-mock";
+import { serverListData } from "./pools/serverListData";
+import { modelListData } from "./pools/modelListData";
+import { fetchCurrPageByList } from "./utils/apiMock";
+
+export default [
+  {
+    url: "/getServerBoxList",
+    method: "post",
+    response: req => {
+      const { page, pageSize } = req.body;
+      // console.log(req);
+      return {
+        ...fetchCurrPageByList({
+          ...serverListData,
+          data: {
+            ...serverListData.data,
+            page,
+            pageSize: pageSize || 10
+          }
+        })
+      };
+    }
+  },
+  {
+    url: "/getModelBoxList",
+    method: "post",
+    response: req => {
+      const { page, pageSize } = req.body;
+      // console.log(req);
+      return {
+        ...fetchCurrPageByList({
+          ...modelListData,
+          data: {
+            ...modelListData.data,
+            page,
+            pageSize: pageSize || 10
+          }
+        })
+      };
+    }
+  }
+] as MockMethod[];

src/api/list.ts

@@ -25,10 +25,18 @@ export const getServerList = (data?: object) => {
   return http.request<Result>("post", "/getServerList", { data });
 };
 
+export const getServerBoxList = (data?: object) => {
+  return http.request<Result>("post", "/getServerBoxList", { data });
+};
+
 export const getModelList = (data?: object) => {
   return http.request<Result>("post", "/getModelList", { data });
 };
 
+export const getModelBoxList = (data?: object) => {
+  return http.request<Result>("post", "/getModelBoxList", { data });
+};
+
 /** 告警列表 */
 export const getAlarmList = (data?: object) => {
   return http.request<Result>("post", "/getAlarmList", { data });

src/pages/dataScreen/views/home/components/AlarmLine.vue

@@ -16,7 +16,7 @@ const theme: EchartOptions["theme"] = computed(() => {
 });
 
 const alarmLineChartRef = ref<HTMLDivElement | null>(null);
-const { setOptions, resize } = useECharts(
+const { setOptions, resize, getInstance } = useECharts(
   alarmLineChartRef as Ref<HTMLDivElement>,
   {
     theme
@@ -27,14 +27,42 @@ const props = defineProps({
   dateData: {
     type: Array as PropType<Array<number>>,
     default: () => []
+  },
+  alarmData: {
+    type: Object,
+    default: () => {}
   }
-  // defectData: {
-  //   type: Array as PropType<Array<number>>,
-  //   default: () => []
-  // }
 });
 
 const dateData = ref([...props.dateData]);
+const alarmData = ref({ ...props.alarmData });
+console.log(alarmData.value.plate);
+watch(
+  () => props.alarmData,
+  newDefectData => {
+    alarmData.value = { ...newDefectData };
+    updateChart();
+  },
+  { immediate: true, deep: true }
+);
+function updateChart() {
+  // 检查图表实例是否存在
+  if (!getInstance()) {
+    console.error("图表实例不存在");
+    return;
+  }
+
+  // 获取当前的配置项
+  const currentOption = getInstance()!.getOption();
+
+  // 修改系列（series）数据
+  currentOption.series[0].data = alarmData.value.thread;
+  currentOption.series[1].data = alarmData.value.PIN;
+  currentOption.series[2].data = alarmData.value.plate;
+  currentOption.series[3].data = alarmData.value.scratched;
+  currentOption.series[4].data = alarmData.value.workpieceSize;
+  getInstance()!.setOption(currentOption);
+}
 
 setOptions(
   {
@@ -102,7 +130,7 @@ setOptions(
         axisTick: { alignWithLabel: true }, // 控制样式里的X轴字在中间距离Y轴还有点距离
         axisLabel: {
           // textStyle: {
-          color: "#737A85", //更改坐标轴文字颜色
+          color: "rgba(255,255,255,0.8)", //更改坐标轴文字颜色
           fontSize: 12 //更改坐标轴文字大小
           // }
         },
@@ -115,7 +143,7 @@ setOptions(
         // name: "单位：万",
         axisLabel: {
           // textStyle: {
-          color: "#737A85"
+          color: "rgba(255,255,255,0.8)"
           // }
         },
         nameTextStyle: {
@@ -161,7 +189,7 @@ setOptions(
         name: "螺纹缺陷",
         type: "line",
         yAxisIndex: 0,
-        data: [246, 246, 246, 180, 160],
+        data: alarmData.value.thread,
         smooth: true,
         // showSymbol: false,/
         symbolSize: 8,
@@ -194,7 +222,7 @@ setOptions(
         name: "PIN间距",
         type: "line",
         yAxisIndex: 0,
-        data: [160, 246, 450, 100, 246],
+        data: alarmData.value.PIN,
         smooth: true,
         // showSymbol: false,/
         symbolSize: 8,
@@ -225,7 +253,7 @@ setOptions(
         name: "压板缺陷",
         type: "line",
         yAxisIndex: 0,
-        data: [100, 200, 400, 150, 306],
+        data: alarmData.value.plate,
         smooth: true,
         // showSymbol: false,/
         symbolSize: 8,
@@ -256,7 +284,7 @@ setOptions(
         name: "划伤缺陷",
         type: "line",
         yAxisIndex: 0,
-        data: [10, 20, 400, 150, 206],
+        data: alarmData.value.scratched,
         smooth: true,
         // showSymbol: false,/
         symbolSize: 8,
@@ -287,7 +315,7 @@ setOptions(
         name: "工件尺寸",
         type: "line",
         yAxisIndex: 0,
-        data: [150, 250, 500, 50, 36],
+        data: alarmData.value.workpieceSize,
         smooth: true,
         // showSymbol: false,/
         symbolSize: 8,

src/pages/dataScreen/views/home/components/DefectBar3D.vue

@@ -8,7 +8,7 @@ const props = defineProps({
     type: Array as PropType<Array<number>>,
     default: () => []
   },
-  questionData: {
+  defect3DData: {
     type: Array as PropType<Array<number>>,
     default: () => []
   }
@@ -19,12 +19,13 @@ const { isDark } = useDark();
 const theme = computed(() => (isDark.value ? "dark" : "light"));
 
 const DefectBar3dChartRef = ref();
-const { setOptions } = useECharts(DefectBar3dChartRef, {
+const { setOptions, getInstance } = useECharts(DefectBar3dChartRef, {
   theme
 });
 
 const name = ["9:00", "10:00", "11:00", "12:00", "13:00", "14:00"];
 const value = [100, 500, 400, 600, 700, 200];
+const defect3DData = ref([...props.defect3DData]);
 // const toolTims = null;
 const offsetX = 8;
 const offsetY = 4;
@@ -91,7 +92,29 @@ const CubeTop = echarts.graphic.extendShape({
 echarts.graphic.registerShape("CubeLeft", CubeLeft);
 echarts.graphic.registerShape("CubeRight", CubeRight);
 echarts.graphic.registerShape("CubeTop", CubeTop);
+watch(
+  () => props.defect3DData,
+  newDefectData => {
+    defect3DData.value = [...newDefectData];
+    updateChart();
+  },
+  { immediate: true, deep: true }
+);
+function updateChart() {
+  // 检查图表实例是否存在
+  if (!getInstance()) {
+    console.error("图表实例不存在");
+    return;
+  }
+
+  // 获取当前的配置项
+  const currentOption = getInstance()!.getOption();
 
+  // 修改系列（series）数据
+  currentOption.series[0].data = defect3DData.value;
+  currentOption.series[1].data = defect3DData.value;
+  getInstance()!.setOption(currentOption);
+}
 watch(
   () => props,
   async () => {
@@ -107,7 +130,7 @@ watch(
         },
         formatter: function (params) {
           const item = params[1];
-          return `${item.name}:${item.value}`;
+          return `${item.name}-${item.value}`;
         }
       },
       grid: {
@@ -137,7 +160,7 @@ watch(
           axisTick: { alignWithLabel: true }, // 控制样式里的X轴字在中间距离Y轴还有点距离
           axisLabel: {
             // textStyle: {
-            color: "#737A85", //更改坐标轴文字颜色
+            color: "rgba(255,255,255,0.8)", //更改坐标轴文字颜色
             fontSize: 12 //更改坐标轴文字大小
             // }
           }
@@ -149,7 +172,7 @@ watch(
           // name: "单位：万",
           axisLabel: {
             // textStyle: {
-            color: "#737A85"
+            color: "rgba(255,255,255,0.8)"
             // }
           },
           nameTextStyle: {
@@ -177,7 +200,7 @@ watch(
           type: "custom",
           renderItem: (params, api) => {
             const location = api.coord([api.value(0), api.value(1)]);
-            console.log("renderItem_api", location);
+            // console.log("renderItem_api", location);
 
             return {
               type: "group",
@@ -254,7 +277,7 @@ watch(
               ]
             };
           },
-          data: value
+          data: defect3DData.value
         },
         {
           // name: "",
@@ -275,7 +298,7 @@ watch(
             color: "transparent"
           },
           tooltip: {},
-          data: value
+          data: defect3DData.value
         }
       ]
     });

src/pages/dataScreen/views/home/components/DefectLine.vue

@@ -8,7 +8,6 @@ import {
   type EchartOptions
 } from "@pureadmin/utils";
 import * as echarts from "echarts/core";
-import { useIntervalFn } from "@vueuse/core";
 
 const { isDark } = useDark();
 
@@ -37,38 +36,29 @@ const props = defineProps({
 
 const dateData = ref([...props.dateData]);
 const defectData = ref([...props.defectData]);
-// const defectData = computed(() => [...props.defectData]);
-// const defectData = computed(() => {
-//   console.log(props.dateData, "11");
-
-//   return props.defectData.map((item: any) => {
-//     return item.value;
-//   });
-// });
-// useIntervalFn(() => {
-//   console.log(getInstance(),'');
-// }, 2000);
-// watch(
-//   () => props.defectData,
-//   (newDefectData, oldDefectData) => {
-//     // ... 回调函数逻辑 ...
-//     console.log(newDefectData, "oldDefectData");
-//     defectData.value = JSON.parse(JSON.stringify(newDefectData));
-//     // updateChart()
-//     console.log(defectData.value, "watch");
-//   },
-//   { immediate: true, deep: true } // 立即执行回调
-// );
-onMounted(() => {
-  console.log(defectData.value);
-  console.log(getInstance());
-});
+watch(
+  () => props.defectData,
+  newDefectData => {
+    defectData.value = [...newDefectData];
+    updateChart();
+  },
+  { immediate: true, deep: true }
+);
 function updateChart() {
-  getInstance()!.dispatchAction({
-    type: "series",
-    data: defectData.value
-  });
+  // 检查图表实例是否存在
+  if (!getInstance()) {
+    console.error("图表实例不存在");
+    return;
+  }
+
+  // 获取当前的配置项
+  const currentOption = getInstance()!.getOption();
+
+  // 修改系列（series）数据
+  currentOption.series[0].data = defectData.value;
+  getInstance()!.setOption(currentOption);
 }
+onMounted(() => {});
 setOptions(
   {
     title: {
@@ -125,7 +115,7 @@ setOptions(
         axisTick: { alignWithLabel: true }, // 控制样式里的X轴字在中间距离Y轴还有点距离
         axisLabel: {
           // textStyle: {
-          color: "#737A85", //更改坐标轴文字颜色
+          color: "rgba(255,255,255,0.8)", //更改坐标轴文字颜色
           fontSize: 12 //更改坐标轴文字大小
           // }
         },
@@ -138,7 +128,7 @@ setOptions(
         // name: "单位：万",
         axisLabel: {
           // textStyle: {
-          color: "#737A85"
+          color: "rgba(255,255,255,0.8)"
           // }
         },
         nameTextStyle: {

src/pages/dataScreen/views/home/homeIndex.vue

@@ -19,6 +19,7 @@ import type { TabsPaneContext } from "element-plus";
 import dayjs from "dayjs";
 
 import { DsBox2 } from "@/components/DsBox";
+import { onUnmounted } from "vue";
 
 const scroll = ref();
 
@@ -80,7 +81,46 @@ const classOption = reactive({
 const activeName = ref("first");
 
 const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab);
+  console.log(tab.props.name);
+  if (tab.props.name === "first") {
+    defect3DData.value = [100, 500, 400, 600, 700, 200];
+  } else if (tab.props.name === "second") {
+    defect3DData.value = [
+      randomIntFn(0, 700),
+      randomIntFn(0, 700),
+      randomIntFn(0, 700),
+      randomIntFn(0, 700),
+      randomIntFn(0, 700),
+      randomIntFn(0, 700)
+    ];
+  } else if (tab.props.name === "third") {
+    defect3DData.value = [
+      randomIntFn(0, 700),
+      randomIntFn(0, 700),
+      randomIntFn(0, 700),
+      randomIntFn(0, 700),
+      randomIntFn(0, 700),
+      randomIntFn(0, 700)
+    ];
+  } else if (tab.props.name === "fourth") {
+    defect3DData.value = [
+      randomIntFn(0, 700),
+      randomIntFn(0, 700),
+      randomIntFn(0, 700),
+      randomIntFn(0, 700),
+      randomIntFn(0, 700),
+      randomIntFn(0, 700)
+    ];
+  } else {
+    defect3DData.value = [
+      randomIntFn(0, 700),
+      randomIntFn(0, 700),
+      randomIntFn(0, 700),
+      randomIntFn(0, 700),
+      randomIntFn(0, 700),
+      randomIntFn(0, 700)
+    ];
+  }
 };
 
 // 获取最近五天日期
@@ -93,21 +133,72 @@ const recentDates = ref(
 // 缺陷总数折线图
 const intervalId = ref(null);
 const defectData = ref([46, 460, 100, 300, 20]);
+
+// 告警分类折线图
+const alarmData = ref({
+  thread: [246, 246, 246, 180, 160],
+  PIN: [160, 246, 450, 100, 246],
+  plate: [100, 200, 400, 150, 306],
+  scratched: [10, 20, 400, 150, 206],
+  workpieceSize: [150, 250, 500, 50, 36]
+});
+
+// 缺陷3D柱状图
+const defect3DData = ref([100, 500, 400, 600, 700, 200]);
+
 const randomIntFn = (min: number, max: number) => {
   return Math.floor(Math.random() * (max - min + 1) + min);
 };
 
 onMounted(() => {
-  // setInterval(() => {
-  //   defectData.value = [
-  //     randomIntFn(0, 500),
-  //     randomIntFn(0, 500),
-  //     randomIntFn(0, 500),
-  //     randomIntFn(0, 500),
-  //     randomIntFn(0, 500)
-  //   ];
-  //   // console.log(defectData.value);
-  // }, 2000);
+  intervalId.value = setInterval(() => {
+    defectData.value = [
+      randomIntFn(0, 500),
+      randomIntFn(0, 500),
+      randomIntFn(0, 500),
+      randomIntFn(0, 500),
+      randomIntFn(0, 500)
+    ];
+    alarmData.value.thread = [
+      randomIntFn(0, 500),
+      randomIntFn(0, 500),
+      randomIntFn(0, 500),
+      randomIntFn(0, 500),
+      randomIntFn(0, 500)
+    ];
+    alarmData.value.PIN = [
+      randomIntFn(0, 500),
+      randomIntFn(0, 500),
+      randomIntFn(0, 500),
+      randomIntFn(0, 500),
+      randomIntFn(0, 500)
+    ];
+    alarmData.value.plate = [
+      randomIntFn(0, 500),
+      randomIntFn(0, 500),
+      randomIntFn(0, 500),
+      randomIntFn(0, 500),
+      randomIntFn(0, 500)
+    ];
+    alarmData.value.scratched = [
+      randomIntFn(0, 500),
+      randomIntFn(0, 500),
+      randomIntFn(0, 500),
+      randomIntFn(0, 500),
+      randomIntFn(0, 500)
+    ];
+    alarmData.value.workpieceSize = [
+      randomIntFn(0, 500),
+      randomIntFn(0, 500),
+      randomIntFn(0, 500),
+      randomIntFn(0, 500),
+      randomIntFn(0, 500)
+    ];
+    // console.log(defectData.value);
+  }, 2000);
+});
+onUnmounted(() => {
+  clearInterval(intervalId.value); // 清除定时器
 });
 </script>
 <template>
@@ -117,7 +208,7 @@ onMounted(() => {
         <DsBox2 title="分类告警" type="w1h1" bgClass="bg_home_item1">
           <template #default>
             <div class="w-full h-full">
-              <AlarmLine :dateData="recentDates" />
+              <AlarmLine :dateData="recentDates" :alarmData="alarmData" />
             </div>
           </template>
         </DsBox2>
@@ -142,7 +233,7 @@ onMounted(() => {
                   <el-tab-pane label="工件尺寸测量" name="fifth" />
                 </el-tabs>
               </div>
-              <DefectBar3D />
+              <DefectBar3D :defect3DData="defect3DData" />
             </div>
           </template>
         </DsBox2>

src/pages/dataScreen/views/modelList/components/ModelBox.vue

@@ -132,7 +132,7 @@ const handleClickDetail = (modelData: CardProductType) => {
   position: relative;
   padding: 65px 20px 24px;
   margin-top: 40px;
-  margin-bottom: 4px;
+  margin-bottom: 24px;
   width: 100%;
   height: 172px;
   background: linear-gradient(

src/pages/dataScreen/views/modelList/modelList.scss

@@ -19,9 +19,9 @@
       width: 554px;
       height: 60px;
       background: url("@/assets/dataScreen/modelList/modelListTitle.svg")
-        no-repeat center center;
+        no-repeat center bottom;
       font-size: 28px;
-      line-height: 40px;
+      line-height: 50px;
       text-align: center;
       span {
         font-size: 36px;
@@ -35,7 +35,7 @@
         position: relative;
         padding: 65px 20px 24px;
         margin-top: 40px;
-        margin-bottom: 4px;
+        margin-bottom: 24px;
         width: 100%;
         height: 172px;
         background: linear-gradient(
@@ -154,12 +154,12 @@
 }
 :deep(.modelListDialog) {
   width: 640px;
-  height: 300px;
+  // height: 300px;
   background: #021f4e !important;
   border-radius: 8px;
   border: 1px solid #438cff;
   .el-dialog__body {
-    padding: 0 20px;
+    padding: 0 20px 20px;
     .modelListDialogBody {
       .modelListDialogTitle {
         margin-bottom: 8px;

src/pages/dataScreen/views/modelList/modelList.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // import { getList } from "@/api/list";
-import { getModelList } from "@/api/list";
+import { getModelBoxList } from "@/api/list";
 import error from "@/assets/dataScreen/modelList/error.png";
 import loading from "@/assets/dataScreen/modelList/loading.png";
 import { ElLoading } from "element-plus";
@@ -59,7 +59,7 @@ const options = reactive({
 
 const page = ref(1);
 const list = ref([]);
-const pageSize = ref();
+const pageSize = ref(20);
 const loadingInstance = ref();
 const modelDialogVisible = ref(false);
 const INITIAL_DATA = {
@@ -83,7 +83,7 @@ function handleLoadMore() {
     background: "transparent",
     text: "加载中"
   });
-  getModelList({
+  getModelBoxList({
     page: page.value,
     pageSize: pageSize.value
   }).then(res => {
@@ -129,14 +129,15 @@ onMounted(() => {
             </template>
           </Waterfall>
 
-          <el-backtop
+          <!-- <el-backtop
             title="回到顶部"
-            :right="35"
+            :right="70"
+            :bottom="120"
             :visibility-height="400"
             target=".content .el-scrollbar__wrap"
           >
             <backTop />
-          </el-backtop>
+          </el-backtop> -->
 
           <!-- 加载更多 -->
           <InfiniteLoading :firstload="false" @infinite="handleLoadMore" />

src/pages/dataScreen/views/serverList/components/ServerBox.vue

@@ -105,6 +105,7 @@ const progressData = ref([
 <style lang="scss" scoped>
 .server-box {
   box-sizing: border-box;
+  margin-bottom: 24px;
   width: 404px;
   // height: 214px;
   .server-box-title {

src/pages/dataScreen/views/serverList/serverList.scss

@@ -36,6 +36,7 @@
     }
     .server-list-box {
       .server-box {
+        margin-bottom: 24px;
         box-sizing: border-box;
         width: 404px;
         // height: 214px;

src/pages/dataScreen/views/serverList/serverList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getServerList } from "@/api/list";
+import { getServerBoxList } from "@/api/list";
 import error from "@/assets/dataScreen/modelList/error.png";
 import loading from "@/assets/dataScreen/modelList/loading.png";
 import { ElLoading } from "element-plus";
@@ -57,7 +57,7 @@ const options = reactive({
 
 const page = ref(1);
 const list = ref([]);
-const pageSize = ref();
+const pageSize = ref(13);
 const loadingInstance = ref();
 
 /** 加载更多 */
@@ -67,7 +67,7 @@ function handleLoadMore() {
     background: "transparent",
     text: "加载中"
   });
-  getServerList({
+  getServerBoxList({
     page: page.value,
     pageSize: pageSize.value
   }).then(res => {

src/plugins/echarts/index.ts

@@ -16,7 +16,9 @@ import {
   ToolboxComponent,
   TooltipComponent,
   DataZoomComponent,
-  VisualMapComponent
+  VisualMapComponent,
+  TimelineComponent,
+  CalendarComponent
 } from "echarts/components";
 
 const { use } = echarts;
@@ -35,7 +37,9 @@ use([
   DataZoomComponent,
   VisualMapComponent,
   CustomChart,
-  PictorialBarChart
+  PictorialBarChart,
+  TimelineComponent,
+  CalendarComponent
 ]);
 
 /**