feat: 新版样式开发

src/views/device/components/DeviceCard.vue

@@ -49,12 +49,16 @@ const deviceClassify = device => {
   if (device?.deviceSort === "精密仪器设备") {
     if (device?.state === "在线") {
       return controlEquipmentOnline;
+    } else if (device?.state === "离线") {
+      return "/src/assets/device/Camera_offline.png";
     } else {
       return controlEquipmentMalfunction;
     }
   } else {
     if (device?.state === "在线") {
       return monitoringOnline;
+    } else if (device?.state === "离线") {
+      return "/src/assets/device/Instrument_offline.png";
     } else {
       return monitoringFaults;
     }
@@ -92,13 +96,35 @@ const generateRandomDate = () => {
 <template>
   <div :class="cardClass">
     <div class="device-header">
-      <div class="mr-2 device--logo">
+      <!-- <div class="mr-2 device--logo">
         <control />
         <monitor1 v-if="false" />
         <monitor2 v-if="false" />
+      </div> -->
+      <div class="device-icon">
+        <div
+          class="w-[100px] h-[100px] flex items-center justify-center"
+          v-if="props.device?.state === '离线'"
+        >
+          <img
+            class="w-[82px] h-[58px]"
+            :src="
+              device?.deviceSort === '精密仪器设备'
+                ? '/src/assets/device/Camera_offline.png'
+                : '/src/assets/device/Instrument_offline.png'
+            "
+            alt=""
+            srcset=""
+          />
+        </div>
+        <AnimationPic
+          class="device-icon-box"
+          :value="deviceClassify(device)"
+          v-else
+        />
       </div>
       <div class="device-name">{{ device?.deviceSort }}</div>
-      <div :class="stateClass">{{ device?.state }}</div>
+      <!-- <div :class="stateClass">{{ device?.state }}</div> -->
     </div>
     <div class="device-content">
       <div class="device-info">
@@ -108,6 +134,9 @@ const generateRandomDate = () => {
         <div>
           设备分类：<span>DEVICETYPE_{{ generateRandomNumber() }}</span>
         </div>
+        <div>
+          创建时间：<span>{{ generateRandomDate() }}</span>
+        </div>
         <div>
           是否启用：
           <el-tag
@@ -120,13 +149,8 @@ const generateRandomDate = () => {
             >{{ device?.isEnabled ? "已启用" : "未启用" }}</el-tag
           >
         </div>
-        <div>
-          创建时间：<span>{{ generateRandomDate() }}</span>
-        </div>
-      </div>
-      <div class="device-icon">
-        <AnimationPic class="device-icon-box" :value="deviceClassify(device)" />
       </div>
+      <div :class="stateClass">{{ device?.state }}</div>
     </div>
   </div>
 </template>
@@ -134,14 +158,17 @@ const generateRandomDate = () => {
 <style lang="scss" scoped>
 .device-card {
   box-sizing: border-box;
-  height: 220px;
+  height: 146px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   // background-color: skyblue;
   border: 1.5px solid #52c41a;
   border-radius: 8px;
   box-shadow: 0 8px 16px 0 rgb(0 0 0 / 10%);
 
   &_fault {
-    border: 1.5px solid #e80d0d;
+    border: 1.5px solid #f15d53;
   }
 
   &_offline {
@@ -152,46 +179,56 @@ const generateRandomDate = () => {
   .device-header {
     position: relative;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: flex-start;
-    width: 100%;
-    height: 64px;
+    justify-content: center;
+    width: 128px;
+    height: 100%;
     padding: 16px;
-    border-bottom: 1px solid #e0e0e0;
+    border-right: 1px solid #e0e0e0;
+    .device-icon {
+      display: flex;
+      align-items: flex-end;
 
+      .device-icon-box {
+        width: 100px;
+        height: 100px;
+      }
+    }
     .device-name {
-      font-size: 16px;
+      font-size: 14px;
       font-weight: 600;
       line-height: 22px;
-      color: #000;
+      color: #333;
       letter-spacing: 0;
     }
 
-    .device-state {
-      position: absolute;
-      top: -1px;
-      right: -1px;
-      width: 48px;
-      height: 24px;
-      font-size: 14px;
-      line-height: 24px;
-      color: #fff;
-      text-align: center;
-      background-color: #52c41a;
-      border-radius: 0 8px;
+    // .device-state {
+    //   position: absolute;
+    //   top: -1px;
+    //   right: -1px;
+    //   width: 48px;
+    //   height: 24px;
+    //   font-size: 14px;
+    //   line-height: 24px;
+    //   color: #fff;
+    //   text-align: center;
+    //   background-color: #52c41a;
+    //   border-radius: 0 8px;
 
-      &_fault {
-        background-color: #e80d0d;
-      }
+    //   &_fault {
+    //     background-color: #e80d0d;
+    //   }
 
-      &_offline {
-        background-color: #e0e0e0;
-        color: #999;
-      }
-    }
+    //   &_offline {
+    //     background-color: #e0e0e0;
+    //     color: #999;
+    //   }
+    // }
   }
 
   .device-content {
+    position: relative;
     display: flex;
     justify-content: space-between;
     width: 100%;
@@ -210,10 +247,11 @@ const generateRandomDate = () => {
       }
 
       .device-tag {
+        border: none;
         color: #52c41a;
 
         &_off {
-          color: #e80d0d;
+          color: #f15d53;
         }
       }
     }
@@ -227,6 +265,28 @@ const generateRandomDate = () => {
         height: 100px;
       }
     }
+    .device-state {
+      position: absolute;
+      top: 5px;
+      right: 0px;
+      width: 48px;
+      height: 24px;
+      font-size: 14px;
+      line-height: 24px;
+      color: #fff;
+      text-align: center;
+      background-color: #52c41a;
+      border-radius: 0 8px;
+
+      &_fault {
+        background-color: #f15d53;
+      }
+
+      &_offline {
+        background-color: #e0e0e0;
+        color: #999;
+      }
+    }
   }
 }
 </style>

src/views/device/index.vue

@@ -114,11 +114,17 @@ onMounted(() => {
       :element-loading-svg="svg"
       element-loading-svg-view-box="-10, -10, 50, 50"
     >
-      <el-form :inline="true" :model="formData" class="demo-form-inline">
+      <div class="device_body_header">
+        <el-form
+          :inline="true"
+          :model="formData"
+          class="demo-form-inline h-full"
+        >
           <el-form-item label="设备分类">
             <el-select
               v-model="formData.deviceSort"
               placeholder="设备分类"
+              class="w-[145px]"
               clearable
             >
               <el-option label="装配设备" value="装配设备" />
@@ -126,7 +132,12 @@ onMounted(() => {
             </el-select>
           </el-form-item>
           <el-form-item label="设备状态">
-          <el-select v-model="formData.state" placeholder="设备状态" clearable>
+            <el-select
+              v-model="formData.state"
+              placeholder="设备状态"
+              class="w-[145px]"
+              clearable
+            >
               <el-option label="在线" value="在线" />
               <el-option label="故障" value="故障" />
               <el-option label="离线" value="离线" />
@@ -136,6 +147,7 @@ onMounted(() => {
             <el-select
               v-model="formData.isEnabled"
               placeholder="是否启用"
+              class="w-[145px]"
               clearable
             >
               <el-option label="已启用" value="true" />
@@ -143,6 +155,7 @@ onMounted(() => {
             </el-select>
           </el-form-item>
         </el-form>
+      </div>
       <div
         class="device_table"
         v-loading="dataLoading"
@@ -178,8 +191,8 @@ onMounted(() => {
               :xs="24"
               :sm="24"
               :md="12"
-              :lg="8"
-              :xl="6"
+              :lg="12"
+              :xl="12"
             >
               <DeviceCard :device="device" />
             </el-col>
@@ -205,9 +218,21 @@ onMounted(() => {
 <style lang="scss">
 .device_wrap {
   .device_body {
+    background-color: #ffffff;
+    border-radius: 8px 8px 8px 8px;
+    border: 1px solid rgba(21, 77, 221, 0.2);
+    .device_body_header {
+      box-sizing: border-box;
+      padding: 16px;
+      height: 62px;
+      background: #ffffff;
+      border-radius: 8px 8px 0px 0px;
+      border-bottom: 1px solid rgba(21, 77, 221, 0.2);
+    }
     .device_table {
       height: calc(100vh - 220px);
       /* background-color: orange; */
+      padding: 16px;
       overflow-x: hidden;
       overflow-y: scroll;
     }

src/views/serverModule/components/ServerCard.scss

@@ -2,29 +2,35 @@
 
 .server-card {
   box-sizing: border-box;
-  height: 182px;
+  height: 216px;
 
   // background-color: skyblue;
-  border: 1.5px solid #52c41a;
+  background-image: url("@/assets/device/server_card_bg.png");
+  background-size: 100% 100%;
+  // border: 1.5px solid #52c41a;
   border-radius: 8px;
   box-shadow: 0 8px 16px 0 rgb(0 0 0 / 10%);
 
   &_offline {
-    background-color: #f7f7f7;
+    // background-color: #f7f7f7;
+    background-image: url("@/assets/device/server_card_offline_bg.png");
+    background-size: 100% 100%;
 
-    border: 1.5px solid #dcdcdc;
+    // border: 1.5px solid #dcdcdc;
   }
 
   .server-header {
     position: relative;
     display: flex;
     align-items: center;
-    justify-content: flex-start;
+    justify-content: center;
     width: 100%;
-    height: 54px;
-    padding: 16px;
-    border-bottom: 1px solid #e0e0e0;
-
+    height: 84px;
+    padding: 16px 0 0;
+    // border-bottom: 1px solid #e0e0e0;
+    .server-content-left {
+      width: 80px;
+    }
     .server-state {
       position: absolute;
       top: 0;
@@ -60,7 +66,7 @@
 
     .server-content-right {
       flex: 1;
-      padding-left: 12px;
+      // padding-left: 12px;
     }
   }
 

src/views/serverModule/components/ServerCard.vue

@@ -68,13 +68,24 @@ const progressData = ref([
 <template>
   <div :class="cardClass">
     <div class="server-header">
-      <div class="server-name">{{ device?.deviceSort }}</div>
+      <div class="server-content-left">
+        <div
+          class="w-[100px] h-[100px] flex items-center justify-center"
+          v-if="props.device?.state === '离线'"
+        >
+          <img
+            class="w-[82px] h-[58px]"
+            src="@/assets/device/server_offline.png"
+            alt=""
+            srcset=""
+          />
+        </div>
+        <AnimationPic :value="serverIcon" v-else />
+      </div>
+      <!-- <div class="server-name">{{ device?.deviceSort }}</div> -->
       <div :class="stateClass">{{ device?.state }}</div>
     </div>
     <div class="server-content">
-      <div class="server-content-left">
-        <AnimationPic :value="serverIcon" />
-      </div>
       <div class="server-content-right">
         <ul class="w-full">
           <li v-for="(v, k) in progressData" :key="k">

src/views/serverModule/index.vue

@@ -56,8 +56,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="main serve_wrap">
-    <div class="mb-5">
+  <div class="main serve_wrap h-full">
+    <div class="serve_wrap_header">
       <el-button type="primary"> {{ `全部状态(${14})` }} </el-button>
       <el-button> {{ `在线(${9})` }}</el-button>
       <el-button>{{ `离线(${3})` }}</el-button>
@@ -97,7 +97,7 @@ onMounted(() => {
             :xs="24"
             :sm="24"
             :md="12"
-            :lg="8"
+            :lg="6"
             :xl="4"
           >
             <ServerCard :device="device" />
@@ -122,7 +122,20 @@ onMounted(() => {
 </template>
 <style lang="scss">
 .serve_wrap {
+  background-color: #ffffff;
+  border-radius: 8px 8px 8px 8px;
+  border: 1px solid rgba(21, 77, 221, 0.2);
+  .serve_wrap_header {
+    box-sizing: border-box;
+    padding: 16px;
+    height: 62px;
+    background: #ffffff;
+    border-radius: 8px 8px 0px 0px;
+    border-bottom: 1px solid rgba(21, 77, 221, 0.2);
+  }
   .serve_body {
+    box-sizing: border-box;
+    padding: 16px;
     height: calc(100vh - 240px);
     /* background-color: orange; */
     overflow-x: hidden;

src/views/workbench/index.vue

@@ -195,13 +195,13 @@ const dataViewList = [
           }
         }"
       >
-        <span :class="headStyles">设备状态</span>
         <el-card
           class="line-card"
           shadow="always"
           :body-style="{ padding: '16px' }"
         >
-          <div class="flex justify-between h-[250px]"><DeviceStatus /></div>
+          <span :class="headStyles">设备状态</span>
+          <div class="flex justify-between h-[210px]"><DeviceStatus /></div>
         </el-card>
       </re-col>
       <re-col
@@ -223,13 +223,13 @@ const dataViewList = [
           }
         }"
       >
-        <span :class="headStyles">设备告警情况</span>
         <el-card
           class="line-card"
           shadow="always"
           :body-style="{ padding: '16px' }"
         >
-          <div class="flex justify-between h-[250px]">
+          <span :class="headStyles">设备告警情况</span>
+          <div class="flex justify-between h-[210px]">
             <pie3DChart :data="pie3Ddata.data" />
           </div>
         </el-card>
@@ -253,13 +253,13 @@ const dataViewList = [
           }
         }"
       >
-        <span :class="headStyles">算力占用</span>
         <el-card
           class="line-card"
           shadow="always"
           :body-style="{ padding: '16px' }"
         >
-          <div class="flex justify-between h-[250px]">
+          <span :class="headStyles">算力占用</span>
+          <div class="flex justify-between h-[210px]">
             <pieChart />
           </div>
         </el-card>
@@ -284,12 +284,12 @@ const dataViewList = [
           }
         }"
       >
-        <span :class="headStyles">违规总量</span>
         <el-card
           class="line-card"
           shadow="always"
           :body-style="{ padding: '16px' }"
         >
+          <span :class="headStyles">违规总量</span>
           <div class="flex justify-between h-[265px]">
             <barChart />
           </div>
@@ -314,8 +314,8 @@ const dataViewList = [
           }
         }"
       >
-        <span :class="headStyles">消息通知</span>
         <el-card class="line-card" shadow="always" :body-style="{ padding: 0 }">
+          <span :class="headStyles" class="mt-3 ml-4 mb-0">消息通知</span>
           <div class="flex justify-between h-[297px]">
             <Notify />
           </div>
@@ -351,7 +351,8 @@ const dataViewList = [
     }
     & > p {
       color: #333;
-      font-size: 24px;
+      font-size: 28px;
+      font-weight: bold;
       line-height: 36px;
     }
   }