feat: 走查修复初始化算力配置模块

locales/en.yaml

@@ -27,6 +27,7 @@ menus:
   hsdevice: Device
   hsserver: Server
   hsalarm: Alarm
+  hsComputePowerAllocation: computePowerAllocation
   hstest: Test
   hslogin: Login
   hsabnormal: Abnormal Page

locales/zh-CN.yaml

@@ -28,6 +28,7 @@ menus:
   hsserver: 服务器
   hstest: 测试
   hsalarm: 告警管理
+  hsComputePowerAllocation: 算力配置
   hslogin: 登录
   hsabnormal: 异常页面
   hsfourZeroFour: "404"

src/assets/computePower/titlebg.svg

@@ -0,0 +1,44 @@
+<svg width="691" height="76" viewBox="0 0 691 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_7277_81241)">
+<path d="M33.7883 32.2104L16 8H676L662.049 30.6049C657.677 37.6877 649.948 42 641.625 42H500.116C495.873 42 491.706 43.1247 488.04 45.2596L475.489 52.5673C469.378 56.1254 462.434 58 455.362 58H364.066C363.535 58 363.026 57.7891 362.651 57.4137L360.325 55.0863C359.95 54.7109 359.441 54.5 358.911 54.5H333.181C332.597 54.5 332.042 54.7554 331.662 55.199L329.861 57.301C329.481 57.7446 328.926 58 328.342 58H225.996C218.704 58 211.55 56.0067 205.309 52.2357L194.093 45.4586C190.349 43.196 186.057 42 181.682 42H53.129C45.4917 42 38.3103 38.365 33.7883 32.2104Z" fill="#E3EBFF"/>
+<path d="M16 7.25H14.3995L15.4237 8.47992L33.2082 29.8375C37.9105 35.4845 44.879 38.75 52.2275 38.75H181.682C185.92 38.75 190.078 39.9086 193.706 42.1005L204.922 48.8776C211.28 52.7193 218.567 54.75 225.996 54.75H328.342C329.146 54.75 329.909 54.3989 330.431 53.7889L332.231 51.6869L331.662 51.199L332.231 51.6869C332.469 51.4096 332.816 51.25 333.181 51.25H358.911C359.242 51.25 359.56 51.3818 359.795 51.6165L362.121 53.9438C362.636 54.46 363.336 54.75 364.066 54.75H455.362C462.566 54.75 469.641 52.8403 475.867 49.2154L488.417 41.9077C491.969 39.8396 496.006 38.75 500.116 38.75H642.515C650.594 38.75 658.165 34.8065 662.796 28.186L676.615 8.42988L677.44 7.25H676H16Z" fill="url(#paint0_linear_7277_81241)" stroke="white" stroke-width="1.5"/>
+<path d="M111 17L102 8H16L24 17H111Z" fill="url(#paint1_linear_7277_81241)"/>
+<path d="M110 8L122 20H161L180 38" stroke="white" stroke-opacity="0.4" stroke-width="1.5"/>
+<path d="M592 8L580 20H541L522 38" stroke="white" stroke-opacity="0.6" stroke-width="1.5"/>
+<path d="M589 17L598 8H676L670 17H589Z" fill="url(#paint2_linear_7277_81241)"/>
+<path d="M52.5 48L47 44H187.5L195 48H52.5Z" fill="url(#paint3_linear_7277_81241)"/>
+<path d="M634.5 48L640 44H499.5L492 48H634.5Z" fill="url(#paint4_linear_7277_81241)"/>
+</g>
+<defs>
+<filter id="filter0_d_7277_81241" x="0.798828" y="0.5" width="690.081" height="75.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="6"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7277_81241"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7277_81241" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_7277_81241" x1="346" y1="16" x2="346" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#154DDD" stop-opacity="0.15"/>
+<stop offset="1" stop-color="#154DDD" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_7277_81241" x1="101.5" y1="8" x2="29" y2="8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFC3FD"/>
+<stop offset="1" stop-color="#D2DCF8" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_7277_81241" x1="598.5" y1="8" x2="671" y2="8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFC3FD"/>
+<stop offset="1" stop-color="#AFC3FD" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_7277_81241" x1="47" y1="44" x2="188.5" y2="44" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFC3FD"/>
+<stop offset="1" stop-color="#F6FBFF"/>
+</linearGradient>
+<linearGradient id="paint4_linear_7277_81241" x1="640" y1="44" x2="498.5" y2="44" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFC3FD"/>
+<stop offset="1" stop-color="#F6FBFF"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/svg/icons/computePower1.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="28" viewBox="0 0 24 28" fill="none">
+  <path d="M12 10.9102L24 17.4556L12 24.0011L0 17.4556L12 10.9102Z" fill="#014BE6" />
+  <path d="M24 6.54545L12 0V10.9091L24 17.4545V6.54545Z" fill="#014BE6" />
+  <path d="M12 0L0 6.54546V17.4545L12 10.9091V0Z" fill="#014BE6" />
+  <path d="M12 13.0923L24 6.54688V17.456L12 24.0014V13.0923Z" fill="#014BE6" />
+  <path d="M0 6.54688L12 13.0923V24.0014L0 17.456V6.54688Z" fill="#014BE6" />
+  <rect width="13.669" height="13.669" transform="matrix(0.877895 0.478853 -0.877895 0.478853 12 0)"
+    fill="#014BE6" />
+  <g filter="url(#filter0_f_7277_81321)">
+    <rect x="10.8452" y="12" width="1.1547" height="12" fill="white" />
+  </g>
+  <defs>
+    <filter id="filter0_f_7277_81321" x="6.84521" y="8" width="9.15479" height="20"
+      filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_7277_81321" />
+    </filter>
+  </defs>
+</svg>

src/assets/svg/icons/computePower2.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="28" viewBox="0 0 24 28" fill="none">
+  <path d="M12 10.9102L24 17.4556L12 24.0011L0 17.4556L12 10.9102Z" fill="#FAA90B" />
+  <path d="M24 6.54545L12 0V10.9091L24 17.4545V6.54545Z" fill="#FAA90B" />
+  <path d="M12 0L0 6.54546V17.4545L12 10.9091V0Z" fill="#FAA90B" />
+  <path d="M12 13.0923L24 6.54688V17.456L12 24.0014V13.0923Z" fill="#FAA90B" />
+  <path d="M0 6.54688L12 13.0923V24.0014L0 17.456V6.54688Z" fill="#FAA90B" />
+  <rect width="13.669" height="13.669" transform="matrix(0.877895 0.478853 -0.877895 0.478853 12 0)"
+    fill="#FAA90B" />
+  <g filter="url(#filter0_f_7277_81333)">
+    <rect x="10.8452" y="12" width="1.1547" height="12" fill="white" />
+  </g>
+  <defs>
+    <filter id="filter0_f_7277_81333" x="6.84521" y="8" width="9.15479" height="20"
+      filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_7277_81333" />
+    </filter>
+  </defs>
+</svg>

src/assets/svg/icons/computePower3.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="28" viewBox="0 0 24 28" fill="none">
+  <path d="M12 10.9102L24 17.4556L12 24.0011L0 17.4556L12 10.9102Z" fill="#DCDCDC" />
+  <path d="M24 6.54545L12 0V10.9091L24 17.4545V6.54545Z" fill="#DCDCDC" />
+  <path d="M12 0L0 6.54546V17.4545L12 10.9091V0Z" fill="#DCDCDC" />
+  <path d="M12 13.0923L24 6.54688V17.456L12 24.0014V13.0923Z" fill="#DCDCDC" />
+  <path d="M0 6.54688L12 13.0923V24.0014L0 17.456V6.54688Z" fill="#DCDCDC" />
+  <rect width="13.669" height="13.669" transform="matrix(0.877895 0.478853 -0.877895 0.478853 12 0)"
+    fill="#DCDCDC" />
+  <g filter="url(#filter0_f_7277_81345)">
+    <rect x="10.8452" y="12" width="1.1547" height="12" fill="white" />
+  </g>
+  <defs>
+    <filter id="filter0_f_7277_81345" x="6.84521" y="8" width="9.15479" height="20"
+      filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_7277_81345" />
+    </filter>
+  </defs>
+</svg>

src/assets/svg/icons/dataViewIcon1.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
+  <path d="M24.5999 10.4386V4.2C24.5999 3.53726 24.0627 3 23.3999 3H6.5999C5.93716 3 5.3999 3.53726 5.3999 4.2V25.8C5.3999 26.4628 5.93716 27 6.5999 27H12.5999" stroke="#FF861A" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10.2 9H18" stroke="#FF861A" stroke-width="2.5" stroke-linecap="round"/>
+  <path d="M10.2 13.2031H13.2" stroke="#FF861A" stroke-width="2.5" stroke-linecap="round"/>
+  <path d="M14.9998 21C14.9998 24.3137 17.686 27 20.9998 27C24.3135 27 26.9998 24.3137 26.9998 21C26.9998 17.6863 24.3135 15 20.9998 15C17.686 15 14.9998 17.6863 14.9998 21Z" stroke="#FF861A" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M20.9998 22.2031V24.0031" stroke="#FF861A" stroke-width="2.5" stroke-linecap="round"/>
+  <path d="M20.9998 19.8023C21.6625 19.8023 22.1998 19.2651 22.1998 18.6023C22.1998 17.9396 21.6625 17.4023 20.9998 17.4023C20.3371 17.4023 19.7998 17.9396 19.7998 18.6023C19.7998 19.2651 20.3371 19.8023 20.9998 19.8023Z" fill="#FF861A"/>
+</svg>

src/assets/svg/icons/dataViewIcon2.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
+  <path d="M4.19995 16.2031V25.8031" stroke="#5786FF" stroke-width="2.5" stroke-linecap="round"
+    stroke-linejoin="round" />
+  <path d="M4.19995 20.4008H8.39995L10.8 16.8008" stroke="#5786FF" stroke-width="2.5"
+    stroke-linecap="round" stroke-linejoin="round" />
+  <path
+    d="M4.7998 12.6016L20.6839 23.191C20.8768 23.3195 21.1266 23.3255 21.3254 23.2062L26.9998 19.8016"
+    stroke="#5786FF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+  <path
+    d="M4.84679 8.2339C4.5197 8.01586 4.48717 7.54738 4.78099 7.2862L9.25671 3.30781C9.45927 3.12774 9.75741 3.10584 9.98415 3.25438L26.2227 13.8935C26.5872 14.1323 26.5836 14.6676 26.2161 14.9015L20.7297 18.3929C20.5293 18.5204 20.2725 18.5177 20.0748 18.3859L4.84679 8.2339Z"
+    stroke="#5786FF" stroke-width="2.5" />
+</svg>

src/assets/svg/icons/dataViewIcon3.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M14.9998 27C21.6272 27 26.9998 21.6274 26.9998 15C26.9998 8.37258 21.6272 3 14.9998 3C8.37234 3 2.99976 8.37258 2.99976 15C2.99976 21.6274 8.37234 27 14.9998 27Z"
+    stroke="#5024FE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+  <path d="M2.99976 15H26.9998" stroke="#5024FE" stroke-width="2.5" stroke-linecap="round"
+    stroke-linejoin="round" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M15 27C17.6509 27 19.8 21.6274 19.8 15C19.8 8.37258 17.6509 3 15 3C12.349 3 10.2 8.37258 10.2 15C10.2 21.6274 12.349 27 15 27Z"
+    stroke="#5024FE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+  <path
+    d="M6.51465 6.6875C8.68622 8.85908 11.6862 10.2022 14.9999 10.2022C18.3136 10.2022 21.3136 8.85908 23.4852 6.6875"
+    stroke="#5024FE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+  <path
+    d="M23.4852 23.3155C21.3136 21.1439 18.3136 19.8008 14.9999 19.8008C11.6862 19.8008 8.68622 21.1439 6.51465 23.3155"
+    stroke="#5024FE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+</svg>

src/assets/svg/icons/dataViewIcon4.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
+  <path d="M3 7.75014L15 12.0016L27 7.75014L15 3.60156L3 7.75014Z" stroke="#14A1FF" stroke-width="2"
+    stroke-linejoin="round" />
+  <path d="M3 12.6016L15 16.8016L27 12.6016" stroke="#14A1FF" stroke-width="2"
+    stroke-linecap="round" stroke-linejoin="round" />
+  <path d="M3 17.4023L15 21.6023L27 17.4023" stroke="#14A1FF" stroke-width="2"
+    stroke-linecap="round" stroke-linejoin="round" />
+  <path d="M3 22.2031L15 26.4031L27 22.2031" stroke="#14A1FF" stroke-width="2"
+    stroke-linecap="round" stroke-linejoin="round" />
+</svg>

src/components/RePureTableBar/src/bar.tsx

@@ -212,7 +212,7 @@ export default defineComponent({
     return () => (
       <>
         <div {...attrs} class="w-[99/100] mt-2 px-2 pb-2 bg-bg_color">
-          <div class="flex justify-between w-full h-[60px] p-4">
+          <div class="flex justify-between w-full h-[60px] py-4">
             {slots?.title ? (
               slots.title()
             ) : (

src/layout/components/sidebar/breadCrumb.vue

@@ -96,7 +96,7 @@ watch(
         v-for="item in levelList"
         :key="item.path"
       >
-        <span :class="['text-web-font1 text-[14px] font-bold mx-[16px]']">{{
+        <span :class="['text-web-font1 text-[14px] font-bold mr-[16px]']">{{
           transformI18n(item.meta.title)
         }}</span>
       </el-breadcrumb-item>

src/router/modules/computePowerAllocation.ts

@@ -0,0 +1,14 @@
+import { $t } from "@/plugins/i18n";
+
+export default {
+  path: "/computePowerAllocation",
+  meta: {
+    title: $t("menus.hsComputePowerAllocation"),
+    icon: "icon-suanlipeizhi",
+    // showLink: false,
+    rank: 6,
+    roles: ["admin", "common"]
+  },
+  component: () => import("@/views/computePowerAllocation/index.vue"),
+  name: "computePowerAllocationIndex"
+} as RouteConfigsTable;

src/style/sidebar.scss

@@ -599,7 +599,7 @@ body[layout="vertical"] {
     }
 
     .main-container {
-      margin-left: 54px;
+      // margin-left: 54px;
     }
 
     /* 菜单折叠 */

src/style/vars.scss

@@ -27,3 +27,7 @@ $--theme-color: #154ddd;
 .theme-bg-color {
   background-color: $--theme-color;
 }
+
+.main_container {
+  margin-left: 16px;
+}

src/views/alarm/index.vue

@@ -133,7 +133,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-4 main">
+  <div class="py-4 main">
     <el-form :inline="true" :model="formData" class="demo-form-inline">
       <el-form-item label="告警名称">
         <el-select

src/views/computePowerAllocation/computePowerAllocation.scss

@@ -0,0 +1,4 @@
+.computePowerAllocation_wrap {
+  // background-color: red;
+  height: 100%;
+}

src/views/computePowerAllocation/index.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref } from "vue"; //引入相关api/引入下载的动效json
+
+defineOptions({
+  name: "ComputePowerAllocation"
+});
+
+const animation1 = ref(null); //获取dom;
+</script>
+
+<template>
+  <div class="main_booy_container computePowerAllocation_wrap">
+    <ul>
+      <li>
+        <el-card class="line-card" :body-style="{ padding: 0 }">
+          算力配置
+        </el-card>
+      </li>
+    </ul>
+    <img src="" alt="" />
+    {{ animation1 }}
+  </div>
+</template>
+
+<style lang="scss">
+@import "./computePowerAllocation.scss";
+</style>

src/views/device/index.vue

@@ -63,7 +63,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex justify-start p-4 main">
+  <div class="flex justify-start py-4 main">
     <TreeCard />
     <div
       class="flex-1 ml-5"

src/views/modelList/index.vue

@@ -56,7 +56,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-4 main">
+  <div class="py-4 main">
     <div
       v-loading="dataLoading"
       :element-loading-svg="svg"

src/views/serverModule/index.vue

@@ -56,7 +56,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-4 main">
+  <div class="py-4 main">
     <div class="mt-4 mb-5">
       <el-button> {{ `全部状态(${90})` }} </el-button>
       <el-button> {{ `在线(${80})` }}</el-button>

src/views/workbench/components/Notify.vue

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-01-11 14:27:58
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-01-12 17:44:57
+ * @LastEditTime: 2024-01-18 17:01:35
  * @FilePath: \General-AI-Platform-Web-Client\src\views\workbench\components\Notify.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -39,7 +39,7 @@ const urgencyStatus = [
 
 function fetchNoticeList(readStatus = 1) {
   const arr = [];
-  for (let i = 0; i < 3; i++) {
+  for (let i = 0; i < 2; i++) {
     arr.push({
       title: "系统消息" + (readStatus + i),
       dateTime: "今天10:03:00",
@@ -65,7 +65,7 @@ const noticeData = ref<Record<string, any>[]>([
 </script>
 
 <template>
-  <div class="w-full text-sm">
+  <div class="w-full text-sm notify_wrap">
     <el-tabs v-model="activeName" class="w-full">
       <el-tab-pane
         v-for="(item, index) in noticeData"
@@ -73,7 +73,7 @@ const noticeData = ref<Record<string, any>[]>([
         :label="item.label"
         :name="index + ''"
       >
-        <ul>
+        <ul class="px-[20px]">
           <li v-for="(v, k) in item.list" :key="k" style="margin-bottom: 12px">
             <div class="flex items-center justify-between">
               <span class="font-bold" style="line-height: 22px">{{
@@ -101,3 +101,10 @@ const noticeData = ref<Record<string, any>[]>([
     </div>
   </div>
 </template>
+<style lang="scss">
+.notify_wrap {
+  .el-tabs__item {
+    padding: 0 20px !important;
+  }
+}
+</style>

src/views/workbench/components/SwiperShow.vue

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-01-12 15:35:09
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-01-17 11:31:24
+ * @LastEditTime: 2024-01-18 16:37:24
  * @FilePath: \general-work-web\General-AI-Platform-Web-Client\src\views\workbench\components\SwiperShow.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -25,6 +25,9 @@ import "swiper/css/navigation";
 import "swiper/css/pagination";
 import "swiper/css/scrollbar";
 
+import pic1 from "@/assets/home/01.png";
+import pic2 from "@/assets/home/02.png";
+
 // Import Swiper styles
 
 const onSwiper = swiper => {
@@ -36,13 +39,10 @@ const onSlideChange = () => {
 
 const swiperList = ref([
   {
-    url: "https://cdn.lifeofpix.com/368492/_w1800/368506/lifeofpix-368492368506.webp"
+    url: pic1
-  },
-  {
-    url: "https://cdn.lifeofpix.com/359864/_AUTOxAUTO_crop_center-center_none/361816/lifeofpix-michaelmercer-361816.webp"
   },
   {
-    url: "https://cdn.lifeofpix.com/368492/_AUTOxAUTO_crop_center-center_none/368497/lifeofpix-368492368497.webp"
+    url: pic2
   }
 ]);
 
@@ -63,6 +63,8 @@ const modules = [Navigation, Pagination, Scrollbar, A11y, Autoplay];
     @slideChange="onSlideChange"
   >
     <swiper-slide v-for="(v, k) in swiperList" :key="k + ''">
+      <!-- <img src="@/assets/home/01.png" alt="" /> -->
+
       <img :src="v.url" alt="" />
     </swiper-slide>
   </swiper>
@@ -73,6 +75,10 @@ const modules = [Navigation, Pagination, Scrollbar, A11y, Autoplay];
   .swiper-scrollbar {
     display: none;
   }
+  img {
+    width: 100%;
+    height: auto;
+  }
 
   .swiper-pagination-bullet {
     width: 6px;

src/views/workbench/components/chart/bar.vue

@@ -23,21 +23,8 @@ const { setOptions } = useECharts(barChartRef, {
   theme
 });
 
-const name = [
+const name = ["1月", "2月", "3月", "4月", "5月", "6月"];
-  "1月",
+const value = [100, 500, 400, 600, 700, 200];
-  "2月",
-  "3月",
-  "4月",
-  "5月",
-  "6月",
-  "7月",
-  "8月",
-  "9月",
-  "10月",
-  "11月",
-  "12月"
-];
-const value = [100, 500, 400, 600, 700, 200, 450, 670, 900, 450, 670, 900];
 // const toolTims = null;
 const offsetX = 16;
 const offsetY = 8;
@@ -197,6 +184,8 @@ watch(
           type: "custom",
           renderItem: (params, api) => {
             const location = api.coord([api.value(0), api.value(1)]);
+            console.log("renderItem_api", location);
+
             return {
               type: "group",
               children: [

src/views/workbench/index.vue

@@ -4,6 +4,8 @@ import { barChart, pieChart, pie3DChart } from "./components/chart";
 import DeviceStatus from "./components/DeviceStatus.vue";
 import Notify from "./components/Notify.vue";
 import SwiperShow from "./components/SwiperShow.vue";
+// import dataViewIcon1 from "@/assets/svg/icons/dataViewIcon1.svg";
+// import dataViewIcon2 from "@/assets/svg/icons/dataViewIcon1.svg";
 
 defineOptions({
   name: "Workbench"
@@ -27,10 +29,43 @@ const pie3Ddata = {
     { name: "一般", value: 60 }
   ]
 };
+
+// 数据预览
+// TODO 图标需要替换
+const dataViewList = [
+  {
+    label: "异常总量",
+    value: "110200",
+    color: "#FF861A",
+    bgColor: "#FFE9D6",
+    icon: "icon-suanlipeizhi"
+  },
+  {
+    label: "设备总量",
+    value: "46700",
+    color: "#5786FF",
+    bgColor: "#D6E0FF",
+    icon: "icon-suanlipeizhi"
+  },
+  {
+    label: "覆盖网点",
+    value: "304800",
+    color: "#5024FE",
+    bgColor: "#DDD5FD",
+    icon: "icon-suanlipeizhi"
+  },
+  {
+    label: "资源使用",
+    value: "89300",
+    color: "#14A1FF",
+    bgColor: "#D6EFFF",
+    icon: "icon-suanlipeizhi"
+  }
+];
 </script>
 
 <template>
-  <div class="main ml-[16px]">
+  <div class="main">
     <el-row :gutter="24" justify="space-around">
       <re-col
         v-motion
@@ -57,13 +92,16 @@ const pie3Ddata = {
           </div>
         </el-card>
       </re-col>
+
+      <!-- up -->
+
       <re-col
         v-motion
         class="mb-[18px]"
-        :value="16"
+        :value="8"
-        :md="16"
+        :md="8"
-        :sm="16"
+        :sm="8"
-        :xs="16"
+        :xs="8"
         :initial="{
           opacity: 0,
           y: 100
@@ -76,12 +114,33 @@ const pie3Ddata = {
           }
         }"
       >
-        <span class="inline-block mb-3 text-base">违规总量</span>
+        <span class="inline-block mb-3 text-base">数据总览</span>
-        <el-card class="line-card" shadow="always">
+
-          <div class="flex justify-between h-[422px]">
+        <ul class="flex justify-between flex-wrap h-[252px] dataView_box">
-            <barChart />
+          <!-- <pieChart /> -->
-          </div>
+          <li v-for="(v, k) in dataViewList" :key="k" class="w-1/2">
-        </el-card>
+            <el-card class="line-card" shadow="always">
+              <div class="flex items-center justify-center h-[77px]">
+                <div
+                  class="flex items-center justify-center"
+                  style="width: 48px; height: 48px; border-radius: 50%"
+                  :style="{ backgroundColor: v.bgColor }"
+                >
+                  <i
+                    class="iconfont"
+                    :class="v.icon"
+                    style="font-size: 28px"
+                    :style="{ color: v.color }"
+                  />
+                </div>
+                <div class="dataView_info">
+                  <span>{{ v.label }}</span>
+                  <p>{{ v.value }}</p>
+                </div>
+              </div>
+            </el-card>
+          </li>
+        </ul>
       </re-col>
       <re-col
         v-motion
@@ -102,11 +161,13 @@ const pie3Ddata = {
           }
         }"
       >
-        <span class="inline-block mb-3 text-base">消息通知</span>
+        <span class="inline-block mb-3 text-base">设备状态</span>
-        <el-card class="line-card" shadow="always">
+        <el-card
-          <div class="flex justify-between h-[422px]">
+          class="line-card"
-            <Notify />
+          shadow="always"
-          </div>
+          :body-style="{ padding: '16px' }"
+        >
+          <div class="flex justify-between h-[220px]"><DeviceStatus /></div>
         </el-card>
       </re-col>
       <re-col
@@ -128,11 +189,18 @@ const pie3Ddata = {
           }
         }"
       >
-        <span class="inline-block mb-3 text-base">设备状态</span>
+        <span class="inline-block mb-3 text-base">设备告警情况</span>
-        <el-card class="line-card" shadow="always">
+        <el-card
-          <div class="flex justify-between h-[282px]"><DeviceStatus /></div>
+          class="line-card"
+          shadow="always"
+          :body-style="{ padding: '16px' }"
+        >
+          <div class="flex justify-between h-[220px]">
+            <pie3DChart :data="pie3Ddata.data" />
+          </div>
         </el-card>
       </re-col>
+      <!-- down -->
       <re-col
         v-motion
         class="mb-[18px]"
@@ -152,10 +220,14 @@ const pie3Ddata = {
           }
         }"
       >
-        <span class="inline-block mb-3 text-base">设备告警情况</span>
+        <span class="inline-block mb-3 text-base">违规总量</span>
-        <el-card class="line-card" shadow="always">
+        <el-card
-          <div class="flex justify-between h-[282px]">
+          class="line-card"
-            <pie3DChart :data="pie3Ddata.data" />
+          shadow="always"
+          :body-style="{ padding: '16px' }"
+        >
+          <div class="flex justify-between h-[265px]">
+            <barChart />
           </div>
         </el-card>
       </re-col>
@@ -179,12 +251,66 @@ const pie3Ddata = {
         }"
       >
         <span class="inline-block mb-3 text-base">算力占用</span>
-        <el-card class="line-card" shadow="always">
+        <el-card
-          <div class="flex justify-between h-[282px]">
+          class="line-card"
+          shadow="always"
+          :body-style="{ padding: '16px' }"
+        >
+          <div class="flex justify-between h-[265px]">
             <pieChart />
           </div>
         </el-card>
       </re-col>
+      <re-col
+        v-motion
+        class="mb-[18px]"
+        :value="8"
+        :md="8"
+        :sm="8"
+        :xs="8"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 480
+          }
+        }"
+      >
+        <span class="inline-block mb-3 text-base">消息通知</span>
+        <el-card class="line-card" shadow="always" :body-style="{ padding: 0 }">
+          <div class="flex justify-between h-[297px]">
+            <Notify />
+          </div>
+        </el-card>
+      </re-col>
     </el-row>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.dataView_box {
+  & > li {
+    padding-right: 16px;
+    margin-bottom: 16px;
+    &:nth-child(2n) {
+      padding-right: 0;
+    }
+  }
+  .dataView_info {
+    padding-left: 16px;
+    & > span {
+      color: #666;
+      font-size: 14fpx;
+    }
+    & > p {
+      color: #333;
+      font-size: 24px;
+      line-height: 36px;
+    }
+  }
+}
+</style>