修改

添加自定义对话框组件用于显示逆变器状态详情，包含背景渐变和图片展示。优化栅格布局结构，使用el-col组件规范间距。将对话框样式抽离到独立scss文件以便维护。

package.json

@@ -29,6 +29,7 @@
     "axios": "1.8.4",
     "crypto-js": "4.2.0",
     "echarts": "5.6.0",
+    "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "2.9.8",
     "file-saver": "2.0.5",
@@ -94,4 +95,4 @@
     "Safari >= 14",
     "Firefox >= 78"
   ]
-}
+}

public/assets/svg/delete.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M10.0923 2.25614C10.3323 2.25614 10.5303 2.29614 10.6863 2.37614C10.8423 2.45614 10.9663 2.55614 11.0583 2.67614C11.1503 2.79614 11.2143 2.92614 11.2503 3.06614C11.2863 3.20614 11.3043 3.33614 11.3043 3.45614C11.3043 3.51214 11.3023 3.55614 11.2983 3.58814C11.2943 3.62014 11.2923 3.64814 11.2923 3.67214L11.2923 3.74414L10.5003 3.74414L10.5003 10.0441C10.5003 10.2041 10.4683 10.3581 10.4043 10.5061C10.3403 10.6541 10.2483 10.7841 10.1283 10.8961C10.0083 11.0081 9.86228 11.0981 9.69028 11.1661C9.51828 11.2341 9.32028 11.2681 9.09628 11.2681L3.74428 11.2681C3.53628 11.2681 3.34028 11.2361 3.15628 11.1721C2.97229 11.1081 2.81428 11.0181 2.68228 10.9021C2.55028 10.7861 2.44628 10.6461 2.37028 10.4821C2.29428 10.3181 2.25628 10.1321 2.25628 9.92414L2.25628 3.74414L1.51228 3.74414C1.50428 3.73614 1.50028 3.71614 1.50028 3.68414C1.49228 3.64414 1.48828 3.52014 1.48828 3.31214C1.48828 3.20814 1.51228 3.09214 1.56028 2.96414C1.60828 2.83614 1.68028 2.71814 1.77628 2.61014C1.87228 2.50214 1.99628 2.41214 2.14828 2.34014C2.30028 2.26814 2.48028 2.23214 2.68828 2.23214L3.75628 2.23214L3.75628 1.50014C3.75628 1.29214 3.82828 1.11414 3.97228 0.966141C4.11628 0.818141 4.29228 0.744141 4.50028 0.744141L8.25628 0.744141C8.53628 0.744141 8.73028 0.818141 8.83828 0.966141C8.94628 1.11414 9.00028 1.29214 9.00028 1.50014L9.00028 2.24414C9.16828 2.25214 9.34828 2.25614 9.54028 2.25614L10.0923 2.25614ZM4.50028 2.25614L8.25628 2.25614L8.25628 1.50014L4.50028 1.50014L4.50028 2.25614ZM4.12828 9.85214C4.38428 9.85214 4.51228 9.68814 4.51228 9.36014L4.51228 3.79214L3.76828 3.79214L3.76828 9.36014C3.76828 9.52814 3.79429 9.65214 3.84628 9.73214C3.89828 9.81214 3.99229 9.85214 4.12828 9.85214ZM6.39628 9.84014C6.53228 9.84014 6.62428 9.80214 6.67228 9.72614C6.72028 9.65014 6.74428 9.52814 6.74428 9.36014L6.74428 3.79214L6.00028 3.79214L6.00028 9.36014C6.00028 9.68014 6.13228 9.84014 6.39628 9.84014ZM8.65228 9.81614C8.79628 9.81614 8.89228 9.77814 8.94028 9.70214C8.98828 9.62614 9.01228 9.50414 9.01228 9.33614L9.01228 3.79214L8.25628 3.79214L8.25628 9.33614C8.25628 9.65614 8.38828 9.81614 8.65228 9.81614Z"   fill="#186DF5" ></path></svg>

public/assets/svg/download.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M9.71435 10.4777L2.22855 10.4777C1.40179 10.4777 0.731445 9.80755 0.731445 8.98058L0.731445 7.10912C0.731445 6.90247 0.899128 6.7349 1.10565 6.7349L1.85435 6.7349C2.06101 6.7349 2.22855 6.90247 2.22855 7.10912L2.22855 8.23203C2.22855 8.64549 2.56367 8.98059 2.97711 8.98059L8.96579 8.98059C9.37924 8.98059 9.71435 8.64549 9.71435 8.23203L9.71435 7.10912C9.71435 6.90247 9.8819 6.7349 10.0887 6.7349L10.8372 6.7349C11.0439 6.7349 11.2115 6.90247 11.2115 7.10912L11.2115 8.98059C11.2115 9.80755 10.5413 10.4777 9.71435 10.4777ZM2.92875 3.13454C3.08016 2.98313 3.32585 2.98313 3.47728 3.13454L5.22302 4.8803L5.22302 1.11169C5.22302 0.905035 5.39062 0.737305 5.59723 0.737305L6.34579 0.737305C6.55249 0.737305 6.72015 0.905035 6.72015 1.11169L6.72015 4.8803L8.4659 3.13454C8.61733 2.98313 8.86289 2.98313 9.01431 3.13454L9.56289 3.68319C9.71432 3.83462 9.71432 4.08015 9.56289 4.23171L6.47159 7.32305C6.45822 7.33639 6.21771 7.48341 5.9757 7.48352C5.73105 7.48364 5.48493 7.33654 5.47156 7.32305L2.38011 4.23171C2.22868 4.08014 2.22868 3.83462 2.38011 3.68319L2.92875 3.13454Z"   fill="#186DF5" ></path></svg>

public/assets/svg/huanyuan.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M17.9776 16.1268L21.269 12.8125L21.269 13.6583C21.269 14.4614 21.9287 15.1097 22.7318 15.1097C23.535 15.1097 24.1833 14.4614 24.1833 13.6583L24.1833 9.26969C24.1833 8.46651 23.535 7.81826 22.7318 7.81826L18.3433 7.81826C17.5401 7.81826 16.8918 8.46651 16.8918 9.26969C16.8918 10.0728 17.5401 10.7325 18.3433 10.7325L19.189 10.7325L15.8747 14.024C15.8578 14.0412 15.845 14.0631 15.829 14.0811C15.8129 14.0991 15.7984 14.1195 15.7833 14.1383C15.7681 14.157 15.7518 14.1759 15.7376 14.1954C15.7233 14.2149 15.7165 14.2324 15.7033 14.2525C15.69 14.2727 15.6813 14.3003 15.669 14.3211C15.6567 14.3419 15.6233 14.3684 15.6233 14.3897C15.6233 14.411 15.6004 14.425 15.6004 14.4468C15.6004 14.4687 15.5661 14.4817 15.5661 14.504C15.5661 14.5263 15.5433 14.5612 15.5433 14.584C15.5433 14.6067 15.509 14.6295 15.509 14.6525C15.509 14.6756 15.4976 14.6863 15.4976 14.7097C15.4976 14.7331 15.4861 14.766 15.4861 14.7897C15.4861 14.8134 15.4633 14.8458 15.4633 14.8697C15.4633 14.8935 15.4518 14.9028 15.4518 14.9268C15.4518 14.9508 15.4518 14.9828 15.4518 15.0068C15.4518 15.0309 15.4518 15.0513 15.4518 15.0754C15.4518 15.0995 15.4518 15.1199 15.4518 15.144C15.4518 15.1681 15.4518 15.2 15.4518 15.224C15.4518 15.248 15.4633 15.2687 15.4633 15.2925C15.4633 15.3164 15.4861 15.3374 15.4861 15.3611C15.4861 15.3848 15.4976 15.4177 15.4976 15.4411C15.4976 15.4645 15.509 15.4752 15.509 15.4983C15.509 15.5214 15.5433 15.5441 15.5433 15.5668C15.5433 15.5895 15.5661 15.6245 15.5661 15.6468C15.5661 15.6691 15.6004 15.6821 15.6004 15.704C15.6004 15.7258 15.6233 15.7512 15.6233 15.7725C15.6233 15.7939 15.6567 15.8089 15.669 15.8297C15.6813 15.8505 15.69 15.8781 15.7033 15.8983C15.7165 15.9184 15.7233 15.9359 15.7376 15.9554C15.7518 15.9749 15.7681 15.9938 15.7833 16.0125C15.7984 16.0313 15.8129 16.0517 15.829 16.0697C15.845 16.0877 15.8578 16.1097 15.8747 16.1268C16.4588 16.6964 17.408 16.6964 17.9776 16.1268ZM8.12613 25.3268L12.5147 25.3268C13.3179 25.3268 13.9661 24.6786 13.9661 23.8754C13.9661 23.0722 13.3179 22.4125 12.5147 22.4125L11.669 22.4125L15.0176 19.0754C15.5871 18.5059 15.5871 17.5681 15.0176 16.984C15.0004 16.9671 14.9898 16.9429 14.9718 16.9268C14.9539 16.9108 14.9334 16.8963 14.9147 16.8811C14.8959 16.866 14.877 16.8611 14.8576 16.8468C14.8381 16.8326 14.8205 16.8144 14.8004 16.8011C14.7803 16.7878 14.7526 16.7677 14.7318 16.7554C14.7111 16.7431 14.6846 16.7211 14.6633 16.7211C14.6419 16.7211 14.628 16.6983 14.6061 16.6983C14.5843 16.6983 14.5599 16.664 14.5376 16.664C14.5153 16.664 14.4917 16.6411 14.469 16.6411C14.4463 16.6411 14.4235 16.6183 14.4004 16.6183C14.3773 16.6183 14.3553 16.5954 14.3318 16.5954C14.3085 16.5954 14.2869 16.584 14.2633 16.584C14.2396 16.584 14.2186 16.5725 14.1947 16.5725C14.1709 16.5725 14.1501 16.5611 14.1261 16.5611C14.1021 16.5611 14.0702 16.5497 14.0461 16.5497C14.022 16.5497 14.0017 16.5497 13.9776 16.5497C13.9535 16.5497 13.9331 16.5497 13.909 16.5497C13.8849 16.5497 13.853 16.5611 13.829 16.5611C13.805 16.5611 13.7843 16.5725 13.7604 16.5725C13.7366 16.5725 13.7155 16.584 13.6918 16.584C13.6682 16.584 13.6352 16.5954 13.6118 16.5954C13.5885 16.5954 13.5778 16.6183 13.5547 16.6183C13.5316 16.6183 13.4974 16.6411 13.4747 16.6411C13.452 16.6411 13.4284 16.664 13.4061 16.664C13.3838 16.664 13.3708 16.6983 13.349 16.6983C13.3271 16.6983 13.3018 16.7211 13.2804 16.7211C13.2591 16.7211 13.2326 16.7431 13.2118 16.7554C13.1911 16.7677 13.1749 16.7878 13.1547 16.8011C13.1346 16.8144 13.117 16.8326 13.0976 16.8468C13.0781 16.8611 13.0592 16.866 13.0404 16.8811C13.0217 16.8963 13.0013 16.9108 12.9833 16.9268C12.9653 16.9429 12.9548 16.9671 12.9376 16.984L9.58899 20.3325L9.58899 19.4868C9.58899 18.6837 8.92929 18.0354 8.12613 18.0354C7.32296 18.0354 6.6747 18.6837 6.6747 19.4868L6.6747 23.8754C6.6747 24.6786 7.32296 25.3268 8.12613 25.3268ZM25.6576 3.42969L5.20042 3.42969C3.59406 3.42969 2.28613 4.73762 2.28613 6.34397L2.28613 26.8011C2.28613 28.4075 3.59406 29.7154 5.20042 29.7154L25.6576 29.7154C27.2639 29.7154 28.5718 28.4075 28.5718 26.8011L28.5718 6.34397C28.5718 4.73762 27.2639 3.42969 25.6576 3.42969ZM25.6576 26.8011L5.20042 26.8011L5.20042 6.34397L25.6576 6.34397L25.6576 26.8011Z"   fill="#FFFFFF" ></path></svg>

public/assets/svg/play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M9.1496 5.57504L3.34961 1.97504C3.0246 1.77505 2.59961 2.02504 2.59961 2.40004L2.59961 9.60005C2.59961 9.97505 3.0246 10.225 3.34961 10.0251L9.12461 6.42505C9.4746 6.25004 9.4746 5.75005 9.1496 5.57504Z"   fill="#186DF5" ></path></svg>

public/assets/svg/quanpin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M11.9501 11.3874L11.9501 8.01232C11.9501 7.4532 11.4799 7 10.9 7C10.3199 7 9.84997 7.4532 9.84997 8.01232L9.84997 10.7125L7.05011 10.7125C6.46998 10.7125 6 11.1657 6 11.7248C6 12.2842 6.46998 12.7373 7.05011 12.7373L10.5499 12.7373C11.3231 12.7373 11.9501 12.133 11.9501 11.3874ZM11.9501 21.5125L11.9501 24.8873C11.9501 25.4467 11.4799 25.8999 10.9 25.8999C10.3199 25.8999 9.84997 25.4467 9.84997 24.8873L9.84997 22.1874L7.05011 22.1874C6.46998 22.1874 6 21.7342 6 21.1748C6 20.6157 6.46998 20.1622 7.05011 20.1622L10.5499 20.1622C11.3231 20.1622 11.9501 20.7668 11.9501 21.5125ZM19.65 21.5125L19.65 24.8873C19.65 25.4467 20.12 25.8999 20.7001 25.8999C21.2799 25.8999 21.7499 25.4467 21.7499 24.8873L21.7499 22.1874L24.55 22.1874C25.1298 22.1874 25.6001 21.7342 25.6001 21.1748C25.6001 20.6157 25.1299 20.1622 24.55 20.1622L21.0499 20.1622C20.2767 20.1622 19.65 20.7668 19.65 21.5125ZM19.65 11.3874L19.65 8.01232C19.65 7.4532 20.12 7 20.7001 7C21.2799 7 21.7499 7.4532 21.7499 8.01232L21.7499 10.7125L24.55 10.7125C25.1298 10.7125 25.6001 11.1657 25.6001 11.7248C25.6001 12.2842 25.1299 12.7373 24.55 12.7373L21.0499 12.7373C20.2767 12.7373 19.65 12.133 19.65 11.3874Z" stroke="rgba(255, 255, 255, 1)" stroke-width="0.8"      fill="#FFFFFF" ></path><path d="M2 27.2998L2 5.69984C2 4.20862 3.25368 3 4.80014 3L27.2001 3C28.7465 3 30 4.20862 30 5.69984L30 27.2998C30 28.791 28.7465 30 27.2001 30L4.80014 30C3.25368 30 2 28.791 2 27.2998ZM27.2001 5.02491L4.80014 5.02491C4.30497 5.02491 4.10016 5.22265 4.10016 5.69984L4.10016 27.2998C4.10016 27.7773 4.30497 27.9751 4.80014 27.9751L27.9 27.9751L27.9 5.69984C27.9 5.22265 27.695 5.02491 27.2001 5.02491Z" stroke="rgba(255, 255, 255, 1)" stroke-width="0.8"      fill="#FFFFFF" ></path></svg>

src/api/large/index.ts

@@ -0,0 +1,33 @@
+import request from '@/utils/request';
+
+// 查询图表总数据
+export function getPowerStationOverview() {
+  return request({
+    url: '/ops/ginlong/api/getPowerStationOverview',
+    method: 'get'
+  });
+}
+//能源收益
+export function getStationMonthOverview(params: any) {
+  return request({
+    url: '/ops/ginlong/api/getStationMonthOverview',
+    method: 'get',
+    params
+  });
+}
+//能源收益
+export function getInverterListOverview(params: any) {
+  return request({
+    url: '/ops/ginlong/api/getInverterListOverview',
+    method: 'get',
+    params
+  });
+}
+//警告
+export function getAlarmListOverview(params?: any) {
+  return request({
+    url: '/ops/ginlong/api/getAlarmListOverview',
+    method: 'get',
+    params
+  });
+}

src/api/system/menu/index.ts

@@ -20,10 +20,11 @@ export const getMenu = (menuId: string | number): AxiosPromise<MenuVO> => {
 };
 
 // 查询菜单下拉树结构
-export const treeselect = (): AxiosPromise<MenuTreeOption[]> => {
+export const treeselect = (params?: any): AxiosPromise<MenuTreeOption[]> => {
   return request({
     url: '/system/menu/treeselect',
-    method: 'get'
+    method: 'get',
+    params
   });
 };
 

src/api/system/role/index.ts

@@ -147,10 +147,11 @@ export const authUserSelectAll = (data: any) => {
   });
 };
 // 根据角色ID查询部门树结构
-export const deptTreeSelect = (roleId: string | number): AxiosPromise<RoleDeptTree> => {
+export const deptTreeSelect = (roleId: string | number, params?) => {
   return request({
     url: '/system/role/deptTree/' + roleId,
-    method: 'get'
+    method: 'get',
+    params
   });
 };
 

src/api/system/role/types.ts

@@ -39,6 +39,7 @@ export interface RoleQuery extends PageQuery {
 
 export interface RoleForm {
   roleName: string;
+  deptId: string | undefined;
   roleKey: string;
   roleSort: number;
   status: string;

src/api/system/user/index.ts

@@ -202,10 +202,11 @@ export const listUserByDeptId = (deptId: string | number): AxiosPromise<UserVO[]
 /**
  * 查询部门下拉树结构
  */
-export const deptTreeSelect = (): AxiosPromise<DeptTreeVO[]> => {
+export const deptTreeSelect = (data?: { isShow: string }): AxiosPromise<DeptTreeVO[]> => {
   return request({
     url: '/system/user/deptTree',
-    method: 'get'
+    method: 'get',
+    params: data
   });
 };
 

src/assets/fonts/fonts.scss

@@ -11,6 +11,7 @@
     font-weight: normal;
     font-style: normal;
 }
+
 // 思源字体
 // @font-face {
 //     font-family: 'SourceHanSansCN-Bold';
@@ -56,6 +57,7 @@
     font-weight: normal;
     font-style: normal;
 }
+
 // @font-face {
 //     font-family: 'SourceHanSansCN-Bold';
 //     src: url('./ReflectTi/SourceHanSerifCN-Bold.otf');//暂时没用
@@ -110,6 +112,8 @@
     font-weight: normal;
     font-style: normal;
 }
+
+
 //阿里黑体
 @font-face {
     font-family: 'AlimamaShuHeiTi-Bold';
@@ -117,6 +121,7 @@
     font-weight: normal;
     font-style: normal;
 }
+
 // @font-face {
 //     font-family: 'Alibaba-PuHuiTi-Heavy';
 //     src: url('./Alibaba/Alibaba-PuHuiTi-Heavy.otf');//暂时没用
@@ -135,6 +140,7 @@
     font-weight: normal;
     font-style: normal;
 }
+
 // @font-face {
 //     font-family: 'Alibaba-PuHuiTi-Regular';
 //     src: url('./Alibaba/Alibaba-PuHuiTi-Regular.otf');//暂时没用
@@ -148,18 +154,19 @@
     font-weight: normal;
     font-style: normal;
 }
+
 @font-face {
-    font-family: 'D-Din'; 
+    font-family: 'D-Din';
     src: url('./D-Din//D-DIN.ttf');
     font-weight: normal;
     font-weight: normal;
     font-style: normal;
 }
+
 @font-face {
     font-family: 'Roboto-Regular'; //Roboto
     src: url('./Roboto//Roboto-Regular.ttf');
     font-weight: normal;
     font-weight: normal;
     font-style: normal;
-}
-
+}

src/assets/styles/dialog.scss

@@ -0,0 +1,16 @@
+#custom-dialog {
+    padding: 0;
+
+    .el-dialog__header {
+        display: none;
+    }
+
+    .el-dialog__body {
+        padding: 0 !important;
+    }
+
+    .alert-content {
+        padding: 80px;
+        background: linear-gradient(180deg, rgba(0, 119, 255, 0.23) 0%, rgba(255, 255, 255, 0) 100%);
+    }
+}

src/assets/styles/element.scss

@@ -0,0 +1,86 @@
+// 选择框样式
+.el-select {
+  .el-select__wrapper {
+    background: transparent !important;
+    box-shadow: none !important;
+    border: 0.1px solid rgba(24, 177, 219, 0.3) !important;
+  }
+
+  .el-select__placeholder {
+    color: rgba(255, 255, 255, 0.9) !important;
+  }
+}
+
+.el-popper {
+  background: transparent !important;
+  border: 1px solid rgba(24, 177, 219, 0.3) !important;
+
+  .el-popper__arrow:before {
+    background: rgba(10, 79, 84, 0.5) !important;
+    border: 1px solid rgba(10, 79, 84, 1) !important;
+    right: 0;
+    display: none !important;
+  }
+
+  .el-select-dropdown__item {
+    color: rgba(255, 255, 255, 0.9) !important;
+  }
+
+  .is-hovering {
+    background: rgba(10, 79, 84, 1) !important;
+  }
+
+
+}
+
+// 日期组件样式
+.el-input__wrapper {
+  display: inline-flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 1px 11px;
+  background-color: transparent !important;
+  background-image: none;
+  //   border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+  //   cursor: text;
+  //   transition: var(--el-transition-box-shadow);
+  //   transform: translate3d(0, 0, 0);
+  box-shadow: none !important;
+  border: 0.1px solid rgba(24, 177, 219, 0.3) !important;
+}
+
+.el-input__inner {
+  color: #fff !important;
+
+}
+
+.el-date-table-cell__text {
+  color: #fff !important;
+
+}
+
+.el-date-picker {
+  /* --el-datepicker-text-color: var(--el-text-color-regular); */
+  --el-datepicker-off-text-color: var(--el-text-color-placeholder);
+  --el-datepicker-header-text-color: #fff !important;
+  --el-datepicker-icon-color: #fff !important;
+  /* --el-datepicker-border-color: var(--el-disabled-border-color); */
+  /* --el-datepicker-inner-border-color: var(--el-border-color-light); */
+  /* --el-datepicker-inrange-bg-color: var(--el-border-color-extra-light); */
+  /* --el-datepicker-inrange-hover-bg-color: var(--el-border-color-extra-light); */
+  /* --el-datepicker-active-color: var(--el-color-primary); */
+  --el-datepicker-hover-text-color: #fff !important;
+}
+
+.el-date-picker__header-label {
+  color: #fff !important;
+}
+
+.el-picker-panel {
+  color: #fff !important;
+  background: rgba(10, 79, 84, 0.85) !important;
+
+  //   border-radius: var(--el-border-radius-base);
+  //   line-height: 30px;
+}

src/assets/styles/index.scss

@@ -7,6 +7,8 @@
 @use './ruoyi.scss';
 @use 'animate.css';
 @use 'element-plus/dist/index.css';
+@use './dialog.scss';
+
 
 body {
   height: 100%;
@@ -208,4 +210,4 @@ aside {
     vertical-align: middle;
     margin-bottom: 10px;
   }
-}
+}

src/components/EchartBox/index.vue

@@ -0,0 +1,169 @@
+<template>
+  <div ref="echartBox" class="echarts"></div>
+</template>
+
+<script setup lang="ts">
+import china from '@/assets/china.json';
+import cq from '@/assets/cq.json';
+import { ref, onMounted, watchEffect, onBeforeUnmount } from 'vue';
+import * as echarts from 'echarts/core';
+import {
+  BarChart, // 柱状图
+  // 系列类型的定义后缀都为 SeriesOption
+  BarSeriesOption,
+  LineChart, // 折线图
+  LineSeriesOption,
+  PieChart, // 饼图
+  PieSeriesOption,
+  PictorialBarChart,
+  MapChart,
+  ScatterChart,
+  EffectScatterChart,
+  LinesChart
+} from 'echarts/charts';
+import {
+  // 组件类型的定义后缀都为 ComponentOption
+  // 标题
+  TitleComponent,
+  TitleComponentOption,
+  // 提示框
+  TooltipComponent,
+  TooltipComponentOption,
+  // 直角坐标系
+  GridComponent,
+  GridComponentOption,
+  // 图例
+  LegendComponent,
+  LegendComponentOption,
+  // 数据集组件
+  DatasetComponent,
+  DatasetComponentOption,
+  // 内置数据转换器组件 (filter, sort)
+  TransformComponent,
+  DataZoomComponent,
+  DataZoomComponentOption,
+  // 极坐标
+  PolarComponent,
+  PolarComponentOption,
+  MarkLineComponentOption,
+  MarkLineComponent,
+  // MarkPoint
+  MarkPointComponent,
+  MarkPointComponentOption,
+  // VisualMap
+  VisualMapComponent,
+  VisualMapComponentOption,
+  // GeoComponent
+  GeoComponent,
+  GeoComponentOption
+} from 'echarts/components';
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+import 'echarts-gl';
+
+// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+type ECOption = echarts.ComposeOption<
+  | BarSeriesOption
+  | LineSeriesOption
+  | PieSeriesOption
+  | TitleComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | DatasetComponentOption
+  | LegendComponentOption
+  | DataZoomComponentOption
+  | PolarComponentOption
+  | MarkLineComponentOption
+  | MarkPointComponentOption
+  | VisualMapComponentOption
+  | GeoComponentOption
+>;
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LegendComponent,
+  DataZoomComponent,
+  PolarComponent,
+  MarkLineComponent,
+  MarkPointComponent,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+  BarChart,
+  LineChart,
+  PieChart,
+  VisualMapComponent,
+  PictorialBarChart,
+  GeoComponent,
+  MapChart,
+  ScatterChart,
+  EffectScatterChart,
+  LinesChart
+]);
+const props = defineProps({
+  option: {
+    type: Object,
+    default: () => {
+      return null;
+    }
+  }
+});
+const emit = defineEmits(['echartsEvent']);
+const echartBox = ref(null);
+let chart!: echarts.ECharts;
+
+const setChart = (option: ECOption): void => {
+  if (!props.option || !echartBox.value) {
+    return;
+  }
+  chart.resize();
+  chart.setOption(option);
+};
+
+const resetChart = (): void => {
+  const option = chart.getOption();
+  if (!option || !echartBox.value) {
+    return;
+  }
+  chart.resize();
+};
+
+onMounted(() => {
+  (echarts as any).registerMap('china', { geoJSON: china });
+  (echarts as any).registerMap('cq', { geoJSON: cq });
+  chart = echarts.init(echartBox.value as any);
+
+  emit('echartsEvent', chart);
+  setChart(props.option);
+  // 界面拉伸后重设
+  window.addEventListener('resize', () => {
+    resetChart();
+  });
+});
+
+watchEffect(() => {
+  if (chart) {
+    chart.clear();
+  }
+  setChart(props.option);
+});
+
+onBeforeUnmount(() => {
+  if (chart) {
+    chart.dispose();
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  pointer-events: all;
+}
+</style>

src/plugins/download.ts

@@ -42,6 +42,8 @@ export default {
         responseType: 'blob',
         headers: globalHeaders()
       });
+      console.log('🚀 ~ zip ~ res:', res);
+
       const isBlob = blobValidate(res.data);
       if (isBlob) {
         const blob = new Blob([res.data], { type: 'application/zip' });

src/router/index.ts

@@ -62,6 +62,11 @@ export const constantRoutes: RouteRecordRaw[] = [
     component: () => import('@/views/error/401.vue'),
     hidden: true
   },
+  {
+    path: '/largeScreen',
+    component: () => import('@/views/largeScreen/index.vue'),
+    hidden: true
+  },
   {
     path: '',
     component: Layout,
@@ -92,9 +97,7 @@ export const constantRoutes: RouteRecordRaw[] = [
 ];
 
 // 动态路由，基于用户权限动态去加载
-export const dynamicRoutes: RouteRecordRaw[] = [
-
-];
+export const dynamicRoutes: RouteRecordRaw[] = [];
 
 /**
  * 创建路由

src/views/integratedManage/alarmManage/components/fenxiBar.vue

@@ -0,0 +1,185 @@
+<template>
+    <div class="chart-container">
+        <!--组件温度（℃）  图表内容区域 -->
+        <div ref="chartRef" class="chart-content"></div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import * as echarts from 'echarts';
+
+// 定义props类型
+interface TrendSeriesItem {
+  name: string;
+  data: number[];
+  color: string;
+}
+
+interface TrendData {
+  dates: string[];
+  series: TrendSeriesItem[];
+}
+
+// 定义props
+const props = defineProps<{
+  trendData: TrendData;
+}>();
+
+// 图表DOM引用
+const chartRef = ref(null);
+// 图表实例
+let chartInstance = null;
+
+// 初始化图表
+const initChart = () => {
+    if (chartRef.value && !chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+    }
+    const option = {
+        xAxis: {
+            type: "category",
+            data: props.trendData.dates,
+            axisTick: {
+                show: false // 去除刻度线
+            }
+        },
+        yAxis: {
+            type: "value",
+            splitLine: {
+                lineStyle: {
+                    color: '#f0f0f0',
+                    type: 'dashed'
+                }
+            }
+        },
+        legend: {
+            show: true,
+            icon: 'square',
+            left: '2%',
+            itemWidth: 10,
+            itemHeight: 10,
+            itemAlign: 'middle', // 设置图例项垂直居中
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        series: props.trendData.series.map((item, index) => ({
+            name: item.name,
+            data: item.data,
+            type: "bar",
+            barWidth: '10%' ,
+            itemStyle: {
+                color: item.color,
+            },
+        })),
+    };
+
+    chartInstance.setOption(option);
+};
+
+// 响应窗口大小变化
+const handleResize = () => {
+    if (chartInstance) {
+        chartInstance.resize();
+    }
+};
+
+// 监听props变化
+watch(() => props.trendData, () => {
+    if (chartInstance) {
+        initChart();
+    }
+}, { deep: true });
+
+// 生命周期钩子
+onMounted(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+    return () => {
+        window.removeEventListener('resize', handleResize);
+        if (chartInstance) {
+            chartInstance.dispose();
+            chartInstance = null;
+        }
+    };
+});
+</script>
+
+<style scoped>
+.chart-container {
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 400px;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.chart-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
+.chart-content {
+    width: 100%;
+    height: calc(100% - 54px);
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+    .chart-container {
+        height: 350px;
+    }
+}
+
+@media (max-width: 480px) {
+    .chart-container {
+        height: 300px;
+    }
+
+    .chart-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .chart-actions {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .chart-actions button {
+        margin: 0;
+        flex: 1;
+        margin-right: 5px;
+    }
+
+    .chart-actions button:last-child {
+        margin-right: 0;
+    }
+}
+
+.model {
+    padding: 20px;
+    background-color: rgba(242, 248, 252, 1);
+}
+</style>

src/views/integratedManage/alarmManage/components/levelPie.vue

@@ -0,0 +1,219 @@
+<template>
+    <div class="chart-container">
+        <!--组件温度（℃）  图表内容区域 -->
+        <div ref="chartRef" class="chart-content"></div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import * as echarts from 'echarts';
+
+// 定义props类型
+interface PieItem {
+  value: number;
+  name: string;
+  displayName: string;
+  color: string;
+}
+
+interface PieData {
+  normal: PieItem;
+  interrupt: PieItem;
+  abnormal: PieItem;
+  serious: PieItem;
+}
+
+// 定义props
+const props = defineProps<{
+  pieData: PieData;
+}>();
+
+// 图表DOM引用
+const chartRef = ref(null);
+// 图表实例
+let chartInstance = null;
+
+// 初始化图表
+const initChart = () => {
+    if (chartRef.value && !chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+    }
+    const option = {
+        tooltip: {
+            trigger: 'item',
+            formatter: (params: any) => {
+                return `${params.data.displayName}: ${params.value}`;
+            }
+        },
+        grid: {
+            left: '0%',
+            right: '20%',
+            bottom: '0%',
+            top: '0%',
+            containLabel: true
+        },
+        legend: {
+            top: 'middle',
+            orient: 'vertical',
+            right: '5%', // 调整图例位置，使其更靠近左侧
+            itemWidth: 15,
+            itemHeight: 15,
+            formatter: (name: string) => {
+                const item = Object.values(props.pieData).find(item => item.name === name);
+                return item?.displayName || name;
+            }
+        },
+        series: [
+            {
+                type: 'pie',
+                radius: '80%',
+                label: {
+                    show: false
+                },
+                color: [
+                    props.pieData.normal.color,
+                    props.pieData.interrupt.color,
+                    props.pieData.abnormal.color,
+                    props.pieData.serious.color
+                ],
+                data: [
+                    {
+                        value: props.pieData.normal.value,
+                        name: props.pieData.normal.name,
+                        displayName: props.pieData.normal.displayName
+                    },
+                    {
+                        value: props.pieData.interrupt.value,
+                        name: props.pieData.interrupt.name,
+                        displayName: props.pieData.interrupt.displayName
+                    },
+                    {
+                        value: props.pieData.abnormal.value,
+                        name: props.pieData.abnormal.name,
+                        displayName: props.pieData.abnormal.displayName
+                    },
+                    {
+                        value: props.pieData.serious.value,
+                        name: props.pieData.serious.name,
+                        displayName: props.pieData.serious.displayName
+                    }
+                ],
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }
+        ]
+    };
+
+    chartInstance.setOption(option);
+};
+
+// 响应窗口大小变化
+const handleResize = () => {
+    if (chartInstance) {
+        chartInstance.resize();
+    }
+};
+
+// 监听props变化
+watch(() => props.pieData, () => {
+    if (chartInstance) {
+        initChart();
+    }
+}, { deep: true });
+
+// 生命周期钩子
+onMounted(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+    return () => {
+        window.removeEventListener('resize', handleResize);
+        if (chartInstance) {
+            chartInstance.dispose();
+            chartInstance = null;
+        }
+    };
+});
+</script>
+
+<style scoped>
+.chart-container {
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 150px;
+    width: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.chart-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
+
+
+.chart-content {
+    width: 100%;
+    height: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+    .chart-container {
+        height: 350px;
+    }
+}
+
+@media (max-width: 480px) {
+    .chart-container {
+        height: 300px;
+    }
+
+    .chart-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .chart-actions {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .chart-actions button {
+        margin: 0;
+        flex: 1;
+        margin-right: 5px;
+    }
+
+    .chart-actions button:last-child {
+        margin-right: 0;
+    }
+}
+
+.model {
+    padding: 20px;
+    background-color: rgba(242, 248, 252, 1);
+}
+</style>

src/views/integratedManage/alarmManage/components/levelSet.vue

@@ -0,0 +1,352 @@
+<template>
+      <el-table :data="localAlarmLevels" :border="false" style="width: 100%">
+        <el-table-column prop="levelName" label="级别名称"  align="center">
+          <template #default="scope">
+            <span :class="['level-name', `level-${scope.row.level}`]">{{ scope.row.levelName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="description" label="标识含义"  align="center"></el-table-column>
+        <el-table-column prop="priority" label="优先级" width="100">
+          <template #default="scope">
+            <el-tag :type="getPriorityType(scope.row.priority)">{{ scope.row.priority }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="responseTime" label="响应时间"  align="center">
+          <template #default="scope">
+            <span style="color: #186DF5;">{{ scope.row.responseTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="processingMethod" label="处理方式"  align="center">
+          <template #default="scope">
+            <div class="process-methods">
+              <el-tag size="small" v-for="method in scope.row.processingMethod" :key="method" :type="getMethodType(method)">{{ method }}</el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="enabled" label="是否启用" width="100" align="center">
+          <template #default="scope">
+            <el-switch v-model="scope.row.enabled" active-color="#13ce66" inactive-color="#ff4949" @change="handleEnabledChange(scope.row)"></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="120" fixed="right" align="center">
+          <template #default="scope">
+            <el-button link type="primary" @click="handleConfig(scope.row)">配置</el-button>
+            <el-button link type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+
+
+    <!-- 配置对话框 -->
+    <el-dialog v-model="configDialogVisible" title="告警配置" width="600px">
+      <div v-if="currentConfigData">
+        <h3 class="config-title">{{ currentConfigData.levelName }} - 详细配置</h3>
+        <el-form ref="configFormRef" :model="currentConfigData" label-width="120px">
+          <el-form-item label="告警声音">
+            <el-select v-model="currentConfigData.alarmSound" placeholder="请选择告警声音">
+              <el-option label="默认声音" value="default" />
+              <el-option label="紧急声音" value="urgent" />
+              <el-option label="普通声音" value="normal" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="通知方式">
+            <el-checkbox-group v-model="currentConfigData.notificationMethods">
+              <el-checkbox label="短信" />
+              <el-checkbox label="邮件" />
+              <el-checkbox label="站内信" />
+            </el-checkbox-group>
+          </el-form-item>
+          <el-form-item label="告警持续时间">
+            <el-input-number v-model="currentConfigData.duration" :min="1" :max="60" label="分钟" />
+          </el-form-item>
+          <el-form-item label="自动处理">
+            <el-switch v-model="currentConfigData.autoProcess" />
+          </el-form-item>
+          <el-form-item label="处理说明" v-if="currentConfigData.autoProcess">
+            <el-input v-model="currentConfigData.processDescription" type="textarea" placeholder="请输入自动处理说明" />
+          </el-form-item>
+        </el-form>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="configDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleConfigSave">保存配置</el-button>
+        </span>
+      </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+// 定义告警等级类型
+interface AlarmLevel {
+  id: number;
+  levelName: string;
+  description: string;
+  priority: string;
+  responseTime: string;
+  processingMethod: string[];
+  enabled: boolean;
+  level: number; // 用于样式区分
+}
+
+// 定义配置数据类型
+interface ConfigData extends AlarmLevel {
+  alarmSound: string;
+  notificationMethods: string[];
+  duration: number;
+  autoProcess: boolean;
+  processDescription: string;
+}
+
+// 定义props
+const props = defineProps<{
+  alarmLevels: AlarmLevel[];
+}>();
+
+// 本地数据副本
+const localAlarmLevels = ref<AlarmLevel[]>([]);
+
+// 初始化本地数据
+watch(() => props.alarmLevels, (newVal) => {
+  // 深拷贝以避免直接修改props
+  localAlarmLevels.value = JSON.parse(JSON.stringify(newVal));
+}, { immediate: true, deep: true });
+
+// 对话框相关状态
+const configDialogVisible = ref(false);
+const configFormRef = ref<any>();
+const currentConfigData = ref<ConfigData | null>(null);
+
+// 获取优先级对应的标签类型
+const getPriorityType = (priority: string) => {
+  const priorityMap: Record<string, string> = {
+    '一级': 'danger',
+    '二级': 'warning',
+    '三级': 'success',
+    '四级': 'primary'
+  };
+  return priorityMap[priority] || 'default';
+};
+
+// 获取处理方式对应的标签类型
+const getMethodType = (method: string) => {
+  const methodMap: Record<string, string> = {
+    '系统锁定': 'danger',
+    '声光报警': 'warning',
+    '短信通知': 'primary',
+    '邮件通知': 'info',
+    '系统记录': 'success'
+  };
+  return methodMap[method] || 'info';
+};
+
+// 处理启用状态变更
+const handleEnabledChange = (row: AlarmLevel) => {
+  ElMessage.success(`${row.levelName} ${row.enabled ? '已启用' : '已禁用'}`);
+  // 这里可以添加保存到后端的逻辑
+};
+
+// 打开配置对话框
+const handleConfig = (row: AlarmLevel) => {
+  // 构建配置数据
+  currentConfigData.value = {
+    ...row,
+    alarmSound: 'default',
+    notificationMethods: ['短信'],
+    duration: 30,
+    autoProcess: false,
+    processDescription: ''
+  };
+  configDialogVisible.value = true;
+};
+
+// 保存配置
+const handleConfigSave = () => {
+  if (currentConfigData.value) {
+    // 找到对应的告警等级并更新
+    const index = localAlarmLevels.value.findIndex(item => item.id === currentConfigData.value!.id);
+    if (index !== -1) {
+      localAlarmLevels.value[index] = {
+        ...localAlarmLevels.value[index],
+        enabled: currentConfigData.value!.enabled
+      };
+    }
+    ElMessage.success('配置保存成功');
+    configDialogVisible.value = false;
+  }
+};
+
+// 删除告警等级
+const handleDelete = (id: number) => {
+  ElMessageBox.confirm('确定要删除该告警等级吗？', '确认删除', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    const index = localAlarmLevels.value.findIndex(item => item.id === id);
+    if (index !== -1) {
+      localAlarmLevels.value.splice(index, 1);
+      ElMessage.success('删除成功');
+    }
+  }).catch(() => {
+    // 用户取消删除
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.level-set-container {
+  padding: 20px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.level-name {
+  font-weight: 500;
+  padding: 2px 6px 2px 18px;
+  border-radius: 3px;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.level-name::before {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.level-1::before {
+  background-color: #ff4949;
+}
+
+.level-2::before {
+  background-color: #f7ba1e;
+}
+
+.level-3::before {
+  background-color: #13ce66;
+}
+
+.level-4::before {
+  background-color: #1890ff;
+}
+
+.level-name:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.level-1 {
+  color: #ff4949;
+}
+
+.level-2 {
+  color: #f7ba1e;
+}
+
+.level-3 {
+  color: #13ce66;
+}
+
+.level-4 {
+  color: #1890ff;
+}
+
+.process-methods {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  padding: 4px 0;
+}
+
+/* 优化表格样式 */
+:deep(.el-table) {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+:deep(.el-table th) {
+  background-color: #fafafa;
+  font-weight: 600;
+  color: #303133;
+  border-bottom: 1px solid #ebeef5;
+}
+
+:deep(.el-table tr:hover > td) {
+  background-color: #f0f9ff !important;
+}
+
+:deep(.el-table__row:nth-child(even)) {
+  background-color: #fafafa;
+}
+
+/* 优化按钮和操作列 */
+:deep(.el-button--text) {
+  transition: all 0.3s ease;
+  padding: 4px 12px;
+  border-radius: 4px;
+}
+
+:deep(.el-button--text:hover) {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* 优化对话框样式 */
+.config-title {
+  margin-bottom: 20px;
+  color: #303133;
+  font-size: 16px;
+  font-weight: 500;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+/* 优化表单样式 */
+:deep(.el-form-item) {
+  margin-bottom: 18px;
+}
+
+:deep(.el-form-item__label) {
+  color: #606266;
+  font-weight: 500;
+}
+
+:deep(.el-select),
+:deep(.el-input),
+:deep(.el-input-number) {
+  width: 100%;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .level-set-container {
+    padding: 15px;
+  }
+  
+  :deep(.el-table) {
+    font-size: 12px;
+  }
+}
+</style>

src/views/integratedManage/alarmManage/components/totalView.vue

@@ -0,0 +1,339 @@
+<template>
+    <div class="total-view-dashboard">
+        <!-- 今日报警总数 -->
+        <div class="total-view-card blue-border">
+            <div class="total-content">
+                <div class="content-row">
+                    <div class="left-section">
+                        <div class="total-header">
+                            <span class="total-title">今日报警总数</span>
+                        </div>
+                        <div class="total-number">{{ totalData.totalAlarm }}</div>
+                    </div>
+                    <div class="icon-section">
+                        <el-icon class="total-icon blue">
+                            <img src="@/assets/demo/health.png" alt="">
+                        </el-icon>
+                    </div>
+                </div>
+                <div class="total-comparison">
+                    <el-icon class="trend-icon green">
+                        <img src="/src/assets/demo/up.png" alt="上升">
+                    </el-icon>
+                    <span class="comparison-text green">+{{ totalData.totalIncrease }}台</span>
+                    <span class="period-text">较上月同期</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- 未处理报警 -->
+        <div class="total-view-card purple-border">
+            <div class="total-content">
+                <div class="content-row">
+                    <div class="left-section">
+                        <div class="total-header">
+                            <span class="total-title">未处理报警</span>
+                        </div>
+                        <div class="total-number">{{ totalData.unprocessedAlarm }}</div>
+                    </div>
+                    <div class="icon-section">
+                        <el-icon class="total-icon purple">
+                            <img src="@/assets/demo/sms-tracking.png" alt="">
+                        </el-icon>
+                    </div>
+                </div>
+                <div class="total-comparison">
+                    <el-icon class="trend-icon green">
+                        <img src="/src/assets/demo/up.png" alt="上升">
+                    </el-icon>
+                    <span class="comparison-text green">+{{ totalData.unprocessedIncrease }}台</span>
+                    <span class="period-text">较上月同期</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- 已处理报警 -->
+        <div class="total-view-card green-border">
+            <div class="total-content">
+                <div class="content-row">
+                    <div class="left-section">
+                        <div class="total-header">
+                            <span class="total-title">已处理报警</span>
+                        </div>
+                        <div class="total-number">{{ totalData.processedAlarm }}</div>
+                    </div>
+                    <div class="icon-section">
+                        <el-icon class="total-icon green">
+                            <img src="@/assets/demo/archive.png" alt="">
+                        </el-icon>
+                    </div>
+                </div>
+                <div class="total-comparison">
+                    <el-icon class="trend-icon green">
+                        <img src="/src/assets/demo/up.png" alt="上升">
+                    </el-icon>
+                    <span class="comparison-text green">+{{ totalData.processedIncrease }}台</span>
+                    <span class="period-text">较上月同期</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- 严重报警 -->
+        <div class="total-view-card orange-border">
+            <div class="total-content">
+                <div class="content-row">
+                    <div class="left-section">
+                        <div class="total-header">
+                            <span class="total-title">严重报警</span>
+                        </div>
+                        <div class="total-number">{{ totalData.seriousAlarm }}</div>
+                    </div>
+                    <div class="icon-section">
+                        <el-icon class="total-icon orange">
+                            <img src="@/assets/demo/mouse-square.png" alt="">
+                        </el-icon>
+                    </div>
+                </div>
+                <div class="total-comparison">
+                    <el-icon class="trend-icon green">
+                        <img src="/src/assets/demo/up.png" alt="上升">
+                    </el-icon>
+                    <span class="comparison-text green">+{{ totalData.seriousIncrease }}台</span>
+                    <span class="period-text">较上月同期</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+
+// 定义props类型
+interface TotalData {
+  totalAlarm: number;
+  unprocessedAlarm: number;
+  processedAlarm: number;
+  seriousAlarm: number;
+  totalIncrease: number;
+  unprocessedIncrease: number;
+  processedIncrease: number;
+  seriousIncrease: number;
+}
+
+// 定义props
+const props = defineProps<{
+  totalData: TotalData;
+}>();
+</script>
+
+<style scoped lang="scss">
+.total-view-dashboard {
+    display: flex;
+    gap: 16px;
+    width: 100%;
+    flex-wrap: wrap;
+}
+
+.total-view-card {
+    display: flex;
+    align-items: center;
+    padding: 20px 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    position: relative;
+    flex: 1;
+    min-width: 200px;
+    height: 150px;
+    transition: all 0.3s ease;
+    overflow: hidden;
+}
+
+.total-view-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* 左侧边框样式 - 使用伪元素创建与指定内容高度一致的边框 */
+.total-view-card::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 42px;
+    width: 4px;
+    height: 45px;
+    border-radius: 0 2px 2px 0;
+    transition: height 0.3s ease;
+}
+
+.total-view-card:hover::before {
+    height: 80px;
+}
+
+.blue-border::before {
+    background-color: #0080FC;
+}
+
+.blue-border {
+    background-color: #EAF5FF;
+}
+
+/* 添加卡片背景渐变效果 */
+.total-view-card::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.3) 100%);
+    pointer-events: none;
+}
+
+.purple-border::before {
+    background-color: #722ed1;
+}
+
+.purple-border {
+    background-color: #F3EDFF;
+}
+
+.green-border::before {
+    background-color: #009B72;
+}
+
+.green-border {
+    background-color: #E8FFF9;
+}
+
+.orange-border::before {
+    background-color: #fa8c16;
+}
+
+.orange-border {
+    background-color: #FFF6EC;
+}
+
+.total-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-width: 0;
+}
+
+.content-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.left-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.icon-section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 12px;
+}
+
+.total-header {
+    display: flex;
+    align-items: center;
+}
+
+.total-title {
+    font-size: 14px;
+    color: #606266;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.total-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.total-icon.blue {
+    background-color: #DBEEFF;
+    color: #1890ff;
+}
+
+.total-icon.purple {
+    background-color: #E9DEFF;
+    color: #722ed1;
+}
+
+.total-icon.green {
+    background-color: #CEFFF2;
+    color: #52c41a;
+}
+
+.total-icon.orange {
+    background-color: #FFEBD3;
+    color: #fa8c16;
+}
+
+.total-number {
+    font-size: 18px;
+    font-weight: 600;
+    color: #303133;
+    line-height: 1;
+}
+
+.total-comparison {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 16px;
+}
+
+.trend-icon {
+    width: 16px;
+    height: 16px;
+}
+
+.trend-icon.green {
+    color: #52c41a;
+}
+
+.comparison-text {
+    font-size: 12px;
+}
+
+.comparison-text.green {
+    color: #52c41a;
+}
+
+.period-text {
+    font-size: 12px;
+    color: #909399;
+}
+
+@media screen and (max-width: 1200px) {
+    .total-view-dashboard {
+        flex-wrap: wrap;
+    }
+
+    .total-view-card {
+        flex: 0 0 calc(50% - 8px);
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .total-view-card {
+        flex: 0 0 100%;
+    }
+}
+</style>

src/views/integratedManage/alarmManage/index.vue

@@ -0,0 +1,210 @@
+<template>
+    <div class="model">
+        <!-- 标题栏 -->
+        <el-row>
+            <el-col :span="12">
+                <TitleComponent title="报警管理" subtitle="配置新能源厂站的报警级别、类型及相关规则" />
+            </el-col>
+        </el-row>
+        
+        <!-- 第一行：报警管理和报警级别分布 -->
+        <el-row :gutter="20" class="content-row">
+            <el-col :span="16">
+                <el-card shadow="hover" class="custom-card">
+                    <TitleComponent title="报警管理" :font-level="2" />
+                    <totalView :totalData="totalData" />
+                </el-card>
+            </el-col>
+            <el-col :span="8">
+                <!-- 报警级别分布 -->
+                <el-card shadow="hover" class="custom-card">
+                    <TitleComponent title="报警级别分布" :font-level="2" />
+                    <levelPie :pieData="pieData" />
+                </el-card>
+            </el-col>
+        </el-row>
+        
+        <!-- 第二行：报警趋势分析 -->
+        <el-row :gutter="20" class="content-row">
+            <el-col :span="24">
+                <el-card shadow="hover" class="custom-card">
+                    <TitleComponent title="报警趋势分析" :font-level="2" />
+                    <fenxiBar :trendData="trendData" />
+                </el-card>
+            </el-col>
+        </el-row>
+        
+        <!-- 第三行：报警级别设置 -->
+        <el-row :gutter="20" class="content-row">
+            <el-col :span="24">
+                <el-card shadow="hover" class="custom-card">
+                    <TitleComponent title="报警级别设置" :font-level="2" />
+                    <levelSet :alarmLevels="alarmLevelsData" />
+                </el-card>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import TitleComponent from '@/components/TitleComponent/index.vue';
+import levelPie from '@/views/integratedManage/alarmManage/components/levelPie.vue'
+import fenxiBar from '@/views/integratedManage/alarmManage/components/fenxiBar.vue'
+import totalView from '@/views/integratedManage/alarmManage/components/totalView.vue';
+import levelSet from '@/views/integratedManage/alarmManage/components/levelSet.vue';
+
+// 模拟报警总数数据
+const totalData = ref({
+  totalAlarm: 28,
+  unprocessedAlarm: 8,
+  processedAlarm: 20,
+  seriousAlarm: 3,
+  totalIncrease: 8,
+  unprocessedIncrease: 3,
+  processedIncrease: 5,
+  seriousIncrease: 1
+});
+
+// 模拟报警级别分布数据
+const pieData = ref({
+  normal: {
+    value: 1048,
+    name: '提示信息',
+    displayName: '提示信息',
+    color: 'rgb(0, 179, 255)'
+  },
+  interrupt: {
+    value: 735,
+    name: '一般告警',
+    displayName: '一般告警',
+    color: 'rgb(45, 214, 131)'
+  },
+  abnormal: {
+    value: 580,
+    name: '重要告警',
+    displayName: '重要告警',
+    color: 'rgb(255, 208, 35)'
+  },
+  serious: {
+    value: 484,
+    name: '严重告警',
+    displayName: '严重告警',
+    color: 'rgb(227, 39, 39)'
+  }
+});
+
+// 模拟报警趋势数据
+const trendData = ref({
+  dates: ['09-04', '09-05', '09-06', '09-07', '09-08', '09-09', '09-10'],
+  series: [
+    {
+      name: '维护提醒',
+      data: [120, 200, 150, 80, 70, 110, 130],
+      color: 'rgb(0, 179, 255)'
+    },
+    {
+      name: '数据异常',
+      data: [80, 170, 100, 50, 90, 140, 170],
+      color: 'rgb(22, 93, 255)'
+    },
+    {
+      name: '信号减弱',
+      data: [60, 140, 100, 120, 110, 100, 130],
+      color: 'rgb(255, 153, 0)'
+    },
+    {
+      name: '温度过高',
+      data: [60, 140, 100, 120, 110, 100, 130],
+      color: 'rgb(250, 220, 25)'
+    },
+    {
+      name: '通讯中断',
+      data: [60, 140, 100, 120, 110, 100, 130],
+      color: 'rgb(251, 62, 122)'
+    }
+  ]
+});
+
+// 模拟告警级别设置数据
+const alarmLevelsData = ref([
+  {
+    id: 1,
+    levelName: '严重告警',
+    description: '系统或应用出现严重故障',
+    priority: '一级',
+    responseTime: '15分钟以内',
+    processingMethod: ['系统锁定', '声光报警', '短信通知'],
+    enabled: true,
+    level: 1
+  },
+  {
+    id: 2,
+    levelName: '重要告警',
+    description: '系统或应用出现严重故障',
+    priority: '二级',
+    responseTime: '30分钟以内',
+    processingMethod: ['声光报警', '短信通知', '系统记录'],
+    enabled: true,
+    level: 2
+  },
+  {
+    id: 3,
+    levelName: '一般告警',
+    description: '非关键性故障或潜在风险',
+    priority: '三级',
+    responseTime: '120分钟以内',
+    processingMethod: ['短信通知', '系统记录'],
+    enabled: true,
+    level: 3
+  },
+  {
+    id: 4,
+    levelName: '提示信息',
+    description: '系统或应用非关键性变化或即将达到阈值的状态',
+    priority: '四级',
+    responseTime: '24小时以内',
+    processingMethod: ['短信通知'],
+    enabled: false,
+    level: 4
+  }
+]);
+</script>
+
+<style scoped>
+.model {
+    padding: 20px 15px;
+    background-color: rgba(242, 248, 252, 1);
+}
+
+.content-row {
+    margin-bottom: 20px;
+}
+
+.custom-card {
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    border: none;
+}
+
+.custom-card:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* 响应式布局调整 */
+@media (max-width: 1200px) {
+    .content-row {
+        margin-bottom: 15px;
+    }
+}
+
+@media (max-width: 768px) {
+    .model {
+        padding: 15px 10px;
+    }
+    
+    .content-row {
+        margin-bottom: 10px;
+    }
+}
+</style>

src/views/integratedManage/attendManage/components/attendTrend.vue

@@ -0,0 +1,327 @@
+<template>
+     <div class="chart-container">
+        <!-- 图表标题和时间范围选择器 -->
+        <div class="chart-header">
+            <h2>出勤趋势分析</h2>
+            <div class="chart-actions">
+                <button @click="timeRange = 'week'" :class="{ active: timeRange === 'week' }">每周</button>
+                <button @click="timeRange = 'month'" :class="{ active: timeRange === 'month' }">每月</button>
+            </div>
+        </div>
+        <!-- 图表内容区域 -->
+        <div ref="chartRef" class="chart-content"></div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, watch } from 'vue';
+import * as echarts from 'echarts';
+
+// 接收从父组件传入的数据
+const props = defineProps({
+  attendData: {
+    type: Object,
+    default: () => ({
+      week: {
+        xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        actualCount: [40, 20, 30, 15, 22, 63, 58],
+        expectedCount: [100, 556, 413, 115, 510, 115, 317]
+      },
+      month: {
+        xAxis: ['第1周', '第2周', '第3周', '第4周'],
+        actualData: [280, 360, 320, 400],
+        theoreticalData: [300, 400, 350, 450]
+      }
+    })
+  }
+});
+
+// 图表DOM引用
+const chartRef = ref(null);
+// 图表实例
+let chartInstance = null;
+
+// 时间范围状态
+const timeRange = ref('week');
+
+// 根据时间范围计算当前显示的数据
+const chartData = computed(() => {
+  const dataForRange = props.attendData[timeRange.value] || props.attendData.week;
+  
+  // 处理字段名称差异
+  if (timeRange.value === 'week') {
+    return {
+      xAxis: dataForRange.xAxis || [],
+      actualCount: dataForRange.actualCount || [],
+      expectedCount: dataForRange.expectedCount || []
+    };
+  } else {
+    return {
+      xAxis: dataForRange.xAxis || [],
+      actualCount: dataForRange.actualData || [],
+      expectedCount: dataForRange.theoreticalData || []
+    };
+  }
+});
+
+// 定义颜色常量
+const ACTUAL_COUNT_COLOR = '#029CD4'; // 蓝色 - 实际人数
+const EXPECTED_COUNT_COLOR = '#0052D9'; // 蓝色 - 应出勤人数
+
+// 初始化图表
+const initChart = () => {
+    if (chartRef.value && !chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+    }
+
+    // 使用计算后的数据
+    const { xAxis, actualCount, expectedCount } = chartData.value;
+    
+
+    const option = {
+        tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(255,255,255,1)',
+            borderColor: '#ddd',
+            borderWidth: 1,
+            textStyle: {
+                color: '#333',
+                fontSize: 14
+            },
+            formatter: function(params) {
+                const actualCount = params[0].value;
+                const expectedCount = params[1].value;
+                return `
+                    <div style="padding: 5px;">
+                        <div style="color: ${params[0].color};">实际人数: ${actualCount}</div>
+                        <div style="color: ${params[1].color};">应出勤人数: ${expectedCount}</div>
+                    </div>
+                `;
+            }
+        },
+        legend: {
+            top: 30,
+            left: 'center',
+            itemWidth: 10,
+            itemHeight: 10,
+            itemGap: 25,
+            data: ['实际人数', '应出勤人数'],
+            textStyle: {
+                color: '#666',
+                fontSize: 12
+            }
+        },
+        grid: {
+            top: '30%',
+            right: '10%',
+            bottom: '10%',
+            left: '6%',
+            containLabel: true
+        },
+        xAxis: {
+            data: xAxis,
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+                textStyle: {
+                    color: '#666',
+                    fontSize: 12
+                }
+            },
+            axisTick: {
+                show: false
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#ddd'
+                }
+            }
+        },
+        yAxis: [
+            {
+                type: 'value',
+                name: '人数',
+                nameTextStyle: {
+                    color: '#666',
+                    fontSize: 12
+                },
+                interval: 100,
+                axisLabel: {
+                    textStyle: {
+                        color: '#666',
+                        fontSize: 12
+                    }
+                },
+                axisTick: {
+                    show: false
+                },
+                axisLine: {
+                    show: false
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: '#f0f0f0',
+                        type: 'dashed'
+                    }
+                }
+            }
+        ],
+        series: [
+            {
+                name: '实际人数',
+                type: 'bar',
+                barWidth: '40%',
+                itemStyle: {
+                    color: ACTUAL_COUNT_COLOR
+                },
+                data: actualCount
+            },
+            {
+                name: '应出勤人数',
+                type: 'line',
+                showSymbol: false,
+                symbol: 'circle',
+                symbolSize: 6,
+                emphasis: {
+                    showSymbol: true,
+                    symbolSize: 10
+                },
+                lineStyle: {
+                    width: 2,
+                    color: EXPECTED_COUNT_COLOR
+                },
+                itemStyle: {
+                    color: EXPECTED_COUNT_COLOR,
+                    borderColor: '#fff',
+                    borderWidth: 2
+                },
+                data: expectedCount
+            }
+        ]
+    };
+
+    chartInstance.setOption(option);
+};
+
+// 响应窗口大小变化
+const handleResize = () => {
+    if (chartInstance) {
+        chartInstance.resize();
+    }
+};
+
+// 监听时间范围变化，更新图表
+watch(timeRange, () => {
+    initChart();
+});
+
+// 监听数据变化，更新图表
+watch(() => props.attendData, () => {
+    initChart();
+}, { deep: true });
+
+// 生命周期钩子
+onMounted(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+    return () => {
+        window.removeEventListener('resize', handleResize);
+        if (chartInstance) {
+            chartInstance.dispose();
+            chartInstance = null;
+        }
+    };
+});
+
+</script>
+
+<style scoped>
+.chart-container {
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 500px;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.chart-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
+.chart-actions button {
+    background: none;
+    border: 1px solid #e0e0e0;
+    padding: 5px 12px;
+    border-radius: 4px;
+    margin-left: 8px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: all 0.2s ease;
+}
+
+.chart-actions button.active {
+    background-color: #1890ff;
+    color: white;
+    border-color: #1890ff;
+}
+
+.chart-content {
+    width: 100%;
+    height: calc(100% - 54px);
+    padding: 10px;
+}
+
+@media (max-width: 768px) {
+    .chart-container {
+        height: 450px;
+    }
+}
+
+@media (max-width: 480px) {
+    .chart-container {
+        height: 400px;
+    }
+
+    .chart-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .chart-actions {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .chart-actions button {
+        margin: 0;
+        flex: 1;
+        margin-right: 5px;
+    }
+
+    .chart-actions button:last-child {
+        margin-right: 0;
+    }
+}
+
+.model {
+    padding: 20px;
+    background-color: rgba(242, 248, 252, 1);
+}
+</style>

src/views/integratedManage/attendManage/components/infoBox.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="box">
+        <div class="total">
+            <div class="infoBox">
+                <div class="date text-color">2025-08-26</div>
+                <div class="temperature text-color">28℃</div>
+                <div class="role text-color">中午好，管理员</div>
+                <div class="cycle text-color">加入项目已经89天</div>
+            </div>
+            <img src="@/assets/demo/icTicket.png" alt="" class="imgbox">
+
+        </div>
+    </div>
+</template>
+<style scoped lang="scss">
+.total {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+
+    .imgbox {
+        position: absolute;
+        top: 60px;
+        left: 210px;
+    }
+
+    .infoBox {
+
+        height: 217px;
+        border-radius: 12px;
+        padding: 30px;
+        background: rgba(24, 109, 245, 1);
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .text-color {
+            color: rgba(255, 255, 255, 1);
+        }
+
+        .date {
+            font-size: 16px;
+        }
+
+        .temperature {
+            font-weight: 600;
+            font-size: 28px;
+        }
+
+        .role {
+            font-size: 24px;
+        }
+
+        .cycle {
+            font-size: 16px;
+        }
+    }
+}
+</style>

src/views/integratedManage/attendManage/components/leftBox/approval.vue

@@ -0,0 +1,171 @@
+<template>
+    <div class="box">
+        <div class="chart-header">
+            <TitleComponent title="审批" :font-level="2" />
+            <span>更多</span>
+        </div>
+        <div class="approval-content">
+            <div 
+                v-for="(item, index) in approvalData" 
+                :key="index" 
+                class="approval-item"
+            >
+                <div class="approval-left">
+                    <div class="approval-icon">
+                        <img :src="item.iconPath" :alt="item.type">
+                    </div>
+                    <div class="approval-info">
+                        <div class="info">
+                            <div class="type">{{ item.type }}</div>
+                            <div class="day">{{ item.days }}天</div>
+                        </div>
+                        <div class="info1">
+                            <div class="time">
+                                <img src="@/assets/demo/time.png" alt="时间">
+                                <span>{{ item.timeRange }}</span>
+                            </div>
+                            <div class="people">
+                                <img src="@/assets/demo/people.png" alt="人员">
+                                <span>{{ item.people }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="approval-tag">
+                    <el-tag :type="item.statusType">{{ item.status }}</el-tag>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import TitleComponent from '@/components/TitleComponent/index.vue';
+
+// 接收从父组件传入的数据
+const props = defineProps({
+  approvalData: {
+    type: Array,
+    default: () => []
+  }
+});
+</script>
+<style scoped lang="scss">
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.chart-header h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+}
+
+.chart-header span {
+    color: #186DF5;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.approval-content {
+background-color: white;
+    .approval-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 16px;
+        background: #F2F8FC;
+        border-radius: 8px;
+        margin-bottom: 12px;
+        border: 1px solid #F2F3F5;
+        transition: all 0.3s ease;
+    }
+
+    .approval-item:hover {
+        border-color: #E4E6EB;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    }
+
+    .approval-left {
+        display: flex;
+        align-items: center;
+        flex: 1;
+    }
+
+    .approval-icon {
+        width: 48px;
+        height: 48px;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16px;
+        position: relative;
+        overflow: hidden;
+        background: #186DF5;
+    }
+
+    .approval-icon img {
+        width: 26px;
+        height: 26px;
+    }
+
+    .approval-info {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 90px;
+    }
+
+    .info .type {
+        font-size: 14px;
+        font-weight: 500;
+        color: #333;
+    }
+
+    .info .day {
+        font-size: 14px;
+        color: #666;
+    }
+
+    .info1 {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+    }
+
+    .info1 .time,
+    .info1 .people {
+        display: flex;
+        align-items: center;
+        font-size: 12px;
+        color: rgba(113, 128, 150, 1);
+    }
+
+    .info1 img {
+        width: 12px;
+        height: 12px;
+        margin-right: 4px;
+    }
+
+    .approval-tag {
+        margin-left: 16px;
+    }
+
+    .approval-tag .el-tag {
+        padding: 4px 12px;
+        font-size: 12px;
+        border-radius: 4px;
+    }
+}
+</style>

src/views/integratedManage/attendManage/components/leftBox/calendar.vue

@@ -0,0 +1,336 @@
+<template>
+  <div class="box">
+    <div class="chart-header">
+      <TitleComponent title="日历" :font-level="2" />
+    </div>
+    <div class="calendar-container">
+      <div class="calendar-header">
+          <el-button size="small" type="text" @click="prevMonth">
+            <el-icon><ArrowLeft /></el-icon>
+          </el-button>
+          <span class="current-month">{{ currentYear }} {{ currentMonthName }}</span>
+          <el-button size="small" type="text" @click="nextMonth">
+            <el-icon><ArrowRight /></el-icon>
+          </el-button>
+        </div>
+      
+      <div class="calendar-weekdays">
+        <span v-for="day in weekdays" :key="day" class="weekday">{{ day }}</span>
+      </div>
+      
+      <div class="calendar-days">
+        <!-- 上月剩余天数 -->
+        <div v-for="(day, index) in prevMonthDays" :key="'prev-' + index" class="day prev-month-day">
+          {{ day }}
+        </div>
+        
+        <!-- 当月天数 -->
+        <div 
+          v-for="day in currentMonthDays" 
+          :key="day" 
+          class="day current-month-day"
+          :class="{ 
+            'current-day': isCurrentDay(day),
+            'selected-day': isSelectedDay(day)
+          }"
+          @click="selectDay(day)"
+        >
+          {{ day }}
+          <!-- 今天有红点标记 -->
+          <span v-if="isToday(day)" class="today-marker"></span>
+          <!-- 考勤状态标记 -->
+          <span v-if="getAttendanceStatus(day)" class="attendance-marker" :class="getAttendanceStatus(day)"></span>
+        </div>
+        
+        <!-- 下月开始天数 -->
+        <div v-for="(day, index) in nextMonthDays" :key="'next-' + index" class="day next-month-day">
+          {{ day }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import TitleComponent from '@/components/TitleComponent/index.vue';
+import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
+import { ref, computed } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 接收从父组件传入的数据
+const props = defineProps({
+  calendarData: {
+    type: Object,
+    default: () => ({
+      // 初始化当前日期
+      today: new Date(),
+      currentDate: new Date(2025, 8, 27), // 2025年9月27日，截图中显示的日期
+      selectedDate: new Date(2025, 8, 27),
+      
+      // 模拟考勤数据
+      attendanceData: {
+        2025: {
+          9: {
+            1: 'normal',
+            4: 'late',
+            8: 'absent',
+            10: 'leave',
+            15: 'normal',
+            20: 'normal',
+            25: 'late',
+            27: 'normal'
+          }
+        }
+      }
+    })
+  }
+});
+
+// 初始化当前日期
+const today = ref(props.calendarData.today);
+const currentDate = ref(props.calendarData.currentDate);
+const selectedDate = ref(props.calendarData.selectedDate);
+
+// 模拟考勤数据
+const attendanceData = ref(props.calendarData.attendanceData);
+
+// 星期几的显示
+const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+// 计算属性
+const currentYear = computed(() => currentDate.value.getFullYear());
+const currentMonth = computed(() => currentDate.value.getMonth());
+const currentMonthName = computed(() => monthNames[currentMonth.value]);
+
+// 获取当月的天数
+const currentMonthDays = computed(() => {
+  return new Date(currentYear.value, currentMonth.value + 1, 0).getDate();
+});
+
+// 获取当月第一天是星期几（0-6，0是星期日）
+const firstDayOfMonth = computed(() => {
+  return new Date(currentYear.value, currentMonth.value, 1).getDay();
+});
+
+// 获取上月剩余天数
+const prevMonthDays = computed(() => {
+  const days = [];
+  const prevMonth = new Date(currentYear.value, currentMonth.value, 0).getDate(); // 上月最后一天
+  
+  for (let i = firstDayOfMonth.value - 1; i >= 0; i--) {
+    days.push(prevMonth - i);
+  }
+  
+  return days;
+});
+
+// 获取下月开始天数
+const nextMonthDays = computed(() => {
+  const days = [];
+  const totalDays = prevMonthDays.value.length + currentMonthDays.value;
+  const nextDays = 35 - totalDays; // 显示5周，共35天
+  
+  for (let i = 1; i <= nextDays; i++) {
+    days.push(i);
+  }
+  
+  return days;
+});
+
+// 方法
+const prevMonth = () => {
+  currentDate.value = new Date(currentYear.value, currentMonth.value - 1, 1);
+};
+
+const nextMonth = () => {
+  currentDate.value = new Date(currentYear.value, currentMonth.value + 1, 1);
+};
+
+const selectDay = (day) => {
+  selectedDate.value = new Date(currentYear.value, currentMonth.value, day);
+  
+  // 显示选择的日期和考勤状态
+    let message = `Selected: ${currentMonthName.value} ${day}, ${currentYear.value}`;
+    const status = getAttendanceStatus(day);
+  if (status) {
+    const statusMap = {
+      normal: '正常',
+      late: '迟到',
+      absent: '缺勤',
+      leave: '请假'
+    };
+    message += ` - 考勤状态: ${statusMap[status] || '未知'}`;
+  }
+  ElMessage.success(message);
+};
+
+// 获取考勤状态
+const getAttendanceStatus = (day) => {
+  if (attendanceData.value[currentYear.value] && 
+      attendanceData.value[currentYear.value][currentMonth.value + 1] && 
+      attendanceData.value[currentYear.value][currentMonth.value + 1][day]) {
+    return attendanceData.value[currentYear.value][currentMonth.value + 1][day];
+  }
+  return null;
+};
+
+const isToday = (day) => {
+  return day === today.value.getDate() && 
+         currentMonth.value === today.value.getMonth() && 
+         currentYear.value === today.value.getFullYear();
+};
+
+const isCurrentDay = (day) => {
+  return day === today.value.getDate() && 
+         currentMonth.value === today.value.getMonth() && 
+         currentYear.value === today.value.getFullYear();
+};
+
+const isSelectedDay = (day) => {
+  return day === selectedDate.value.getDate() && 
+         currentMonth.value === selectedDate.value.getMonth() && 
+         currentYear.value === selectedDate.value.getFullYear();
+};
+</script>
+
+<style scoped lang="scss">
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.chart-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+
+.chart-header span {
+  color: #186DF5;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.calendar-container {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+//   border: 1px solid #F2F3F5;
+}
+
+.calendar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 8px 0;
+}
+
+.current-month {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+
+.calendar-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.weekday {
+  text-align: center;
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+  padding: 8px 0;
+}
+
+.calendar-days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 8px;
+  height: 350px;
+}
+
+.day {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.prev-month-day,
+.next-month-day {
+  color: #C0C4CC;
+}
+
+.current-month-day {
+  color: #333;
+}
+
+.current-month-day:hover {
+  background-color: #ECF5FF;
+  color: #186DF5;
+}
+
+.current-day {
+  position: relative;
+}
+
+.today-marker {
+  position: absolute;
+  bottom: 4px;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: #FF6B3B;
+}
+
+.selected-day {
+  background-color: #186DF5;
+  color: white !important;
+  font-weight: 500;
+}
+
+.selected-day:hover {
+  background-color: #4096ff;
+  color: white !important;
+}
+
+// 考勤状态标记样式
+.attendance-marker {
+  position: absolute;
+  bottom: 2px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.attendance-marker.normal {
+  background-color: #52c41a;
+}
+
+.attendance-marker.late {
+  background-color: #faad14;
+}
+
+.attendance-marker.absent {
+  background-color: #f5222d;
+}
+
+.attendance-marker.leave {
+  background-color: #1890ff;
+}
+</style>

src/views/integratedManage/attendManage/components/leftBox/todayAttend.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="box">
+        <TitleComponent title="今日出勤" :font-level="2" />
+        <div class="todayAttend">
+            <div class="todayAttendItem">
+                <img :src="props.todayAttendData.attendance.icon" alt="" width="30px" height="30px">
+                <div class="todayAttendItemInfo">
+                    <span class="todayAttendItemTitle">出勤</span>
+                    <span class="todayAttendItemNum">{{ props.todayAttendData.attendance.count }}人</span>
+                </div>
+            </div>
+            <div class="todayAttendItem">
+                <img :src="props.todayAttendData.late.icon" alt="" width="30px" height="30px">
+                <div class="todayAttendItemInfo">
+                    <span class="todayAttendItemTitle">迟到</span>
+                    <span class="todayAttendItemNum">{{ props.todayAttendData.late.count }}人</span>
+                </div>
+            </div>
+            <div class="todayAttendItem">
+                <img :src="props.todayAttendData.earlyLeave.icon" alt="" width="30px" height="30px">
+                <div class="todayAttendItemInfo">
+                    <span class="todayAttendItemTitle">早退</span>
+                    <span class="todayAttendItemNum">{{ props.todayAttendData.earlyLeave.count }}人</span>
+                </div>
+            </div>
+            <div class="todayAttendItem">
+                <img :src="props.todayAttendData.absent.icon" alt="" width="30px" height="30px">
+                <div class="todayAttendItemInfo">
+                    <span class="todayAttendItemTitle">缺勤</span>
+                    <span class="todayAttendItemNum">{{ props.todayAttendData.absent.count }}人</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import TitleComponent from '@/components/TitleComponent/index.vue';
+
+// 接收从父组件传入的数据
+const props = defineProps({
+  todayAttendData: {
+    type: Object,
+    default: () => ({})
+  }
+});
+</script>
+<style scoped lang="scss">
+.todayAttend {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.todayAttendItem {
+    width: 110px;
+    height: 100px;
+    background: #E5F0FF;
+    padding: 5px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    flex-direction: column;
+.todayAttendItemInfo{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    .todayAttendItemTitle {
+        color: rgba(113, 128, 150, 1);
+        font-size: 12px;
+    }
+
+    .todayAttendItemNum {
+        font-size: 16px;
+        color: rgba(0, 30, 59, 1);
+    }
+}
+    
+}
+</style>

src/views/integratedManage/attendManage/components/renyuanpaiban.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="schedule-table-container">
+    <el-table 
+      :data="scheduleData" 
+      style="width: 100%" 
+      max-height="600"
+      stripe
+      border
+    >
+      <!-- 固定列 -->
+      <el-table-column fixed prop="name" label="姓名" width="120" align="center" />
+      <el-table-column fixed="left" prop="position" label="岗位" width="120" align="center" />
+      <el-table-column fixed="left" prop="weeklyHours" label="周总计/小时" width="120" align="center" />
+      
+      <!-- 日期列 - 纵向显示号数和星期几 -->
+      <el-table-column 
+        v-for="(dateInfo, index) in currentMonthDates" 
+        :key="index" 
+        :prop="`day${index + 1}`" 
+        width="80"
+        align="center"
+      >
+        <template #header>
+          <div class="vertical-header">
+            <div class="date-number">{{ dateInfo.date }}</div>
+            <div class="week-day">{{ dateInfo.weekDay }}</div>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted } from 'vue';
+
+// 员工列表
+const employees = [
+  { name: '张三', position: '水泥工', weeklyHours: 142 },
+  { name: '李四', position: '电工', weeklyHours: 138 },
+  { name: '王五', position: '木工', weeklyHours: 145 },
+  { name: '赵六', position: '钢筋工', weeklyHours: 140 },
+  { name: '钱七', position: '油漆工', weeklyHours: 135 },
+  { name: '孙八', position: '瓦工', weeklyHours: 143 },
+  { name: '周九', position: '钳工', weeklyHours: 137 },
+  { name: '吴十', position: '管道工', weeklyHours: 139 },
+  { name: '郑十一', position: '焊工', weeklyHours: 141 },
+  { name: '王十二', position: '起重工', weeklyHours: 136 }
+];
+
+// 排班类型
+const shifts = ['早班', '中班', '晚班', '休息'];
+
+// 获取当前月的日期信息
+const currentMonthDates = ref<any[]>([]);
+
+// 计算当前月份并生成日期信息
+const getCurrentMonthDates = () => {
+  const today = new Date();
+  const year = today.getFullYear();
+  const month = today.getMonth(); // 0-11
+  
+  // 获取当月第一天
+  const firstDay = new Date(year, month, 1);
+  // 获取当月最后一天
+  const lastDay = new Date(year, month + 1, 0);
+  // 当月总天数
+  const daysInMonth = lastDay.getDate();
+  
+  const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
+  const dates = [];
+  
+  // 生成当月所有日期信息
+  for (let i = 1; i <= daysInMonth; i++) {
+    const date = new Date(year, month, i);
+    const weekDayIndex = date.getDay(); // 0-6，0表示星期日
+    dates.push({
+      date: i,
+      weekDay: weekdays[weekDayIndex],
+      fullDate: `${year}-${String(month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`
+    });
+  }
+  
+  return dates;
+};
+
+// 生成排班数据
+const scheduleData = computed(() => {
+  return Array.from({ length: 20 }, (_, index) => {
+    // 循环使用员工数据
+    const employee = employees[index % employees.length];
+    
+    // 为每行生成不同的排班组合
+    const rowData = {
+      name: employee.name,
+      position: employee.position,
+      weeklyHours: employee.weeklyHours
+    };
+    
+    // 为当月每一天生成排班数据
+    currentMonthDates.value.forEach((_, dayIndex) => {
+      // 使用不同的种子生成略有变化的排班模式
+      const seed = (index * 3 + dayIndex + 1) % shifts.length;
+      rowData[`day${dayIndex + 1}`] = shifts[seed];
+    });
+    
+    return rowData;
+  });
+});
+
+// 组件挂载时获取当前月数据
+onMounted(() => {
+  currentMonthDates.value = getCurrentMonthDates();
+});
+</script>
+
+<style scoped>
+.schedule-table-container {
+  overflow-x: auto;
+}
+
+/* 优化滚动条样式 */
+.schedule-table-container::-webkit-scrollbar {
+  height: 8px;
+}
+
+.schedule-table-container::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.schedule-table-container::-webkit-scrollbar-thumb {
+  background: #c0c4cc;
+  border-radius: 4px;
+}
+
+.schedule-table-container::-webkit-scrollbar-thumb:hover {
+  background: #909399;
+}
+
+/* 优化表格样式 */
+:deep(.el-table) {
+  font-size: 14px;
+}
+
+:deep(.el-table__header-wrapper th) {
+  background-color: #fafafa;
+  font-weight: 500;
+  padding: 0 !important;
+  height: auto !important;
+  min-height: 60px;
+}
+
+:deep(.el-table__body-wrapper) {
+  overflow-x: visible;
+}
+
+/* 纵向表头样式 */
+.vertical-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 8px 0;
+}
+
+.date-number {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.week-day {
+  font-size: 12px;
+  color: #666;
+}
+</style>

src/views/integratedManage/attendManage/components/totalView.vue

@@ -0,0 +1,290 @@
+<template>
+  <div class="total-view-container">
+    <div class="total-view-content">
+      <!-- 使用循环生成统计卡片 -->
+      <div v-for="(item, index) in statsItems" :key="index" class="stats-card">
+        <div class="stats-card-header">
+          <span class="stats-title">{{ item.title }}</span>
+          <span class="stats-change" :class="{ positive: item.data.isPositive, negative: !item.data.isPositive }">
+            {{ item.data.isPositive ? '↑' : '↓' }} {{ item.data.change }} {{ item.compareText }}
+          </span>
+        </div>
+        <div class="stats-card-body">
+          <div class="stats-value">{{ item.data.value }}</div>
+          <div class="stats-chart">
+            <div :ref="el => chartRefs[index] = el" class="chart-container"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch, nextTick } from 'vue';
+import * as echarts from 'echarts';
+
+// 接收从父组件传入的数据
+const props = defineProps({
+  totalData: {
+    type: Object,
+    default: () => ({
+      attendance: {
+        value: 248,
+        change: '+8.2%',
+        isPositive: true,
+        chartData: [150, 230, 224, 218, 135, 300, 220],
+        color: '#FF7D00',
+        title: '总出勤人数',
+        compareText: '较昨日同期',
+        chartType: 'bar'
+      },
+      rest: {
+        value: 8,
+        change: '+8.2%',
+        isPositive: true,
+        chartData: [10, 12, 15, 8, 7, 9, 10],
+        color: '#00C48C',
+        title: '调休',
+        compareText: '较上月同期',
+        chartType: 'line'
+      },
+      leave: {
+        value: 24,
+        change: '-10%',
+        isPositive: false,
+        chartData: [30, 25, 28, 22, 20, 26, 24],
+        color: '#FF5252',
+        title: '本月请假',
+        compareText: '较昨日同期',
+        chartType: 'line'
+      },
+      rate: {
+        value: '96.8%',
+        change: '+10%',
+        isPositive: true,
+        chartData: [90, 92, 94, 95, 97, 98, 96.8],
+        color: '#029CD4',
+        title: '平均出勤率',
+        compareText: '较昨日同期',
+        chartType: 'line'
+      }
+    })
+  }
+});
+
+// 图表引用数组
+const chartRefs = ref([]);
+
+// 转换totalData为数组格式，方便循环渲染
+const statsItems = computed(() => {
+  return Object.keys(props.totalData).map(key => ({
+    title: props.totalData[key].title,
+    data: {
+      value: props.totalData[key].value,
+      change: props.totalData[key].change,
+      isPositive: props.totalData[key].isPositive,
+      chartData: props.totalData[key].chartData,
+      color: props.totalData[key].color
+    },
+    compareText: props.totalData[key].compareText,
+    chartType: props.totalData[key].chartType
+  }));
+});
+
+// 初始化图表
+const initCharts = () => {
+  const chartInstances = [];
+  
+  // 循环初始化所有图表
+  statsItems.value.forEach((item, index) => {
+    if (!chartRefs.value[index]) return;
+    
+    const chartInstance = echarts.init(chartRefs.value[index]);
+    
+    // 根据图表类型设置不同的配置
+    if (item.chartType === 'bar') {
+      // 柱状图配置
+      chartInstance.setOption({
+        tooltip: { show: false },
+        grid: { top: 0, bottom: 0, left: -70, right: 0, containLabel: true },
+        xAxis: {
+          type: 'category',
+          data: Array(item.data.chartData.length).fill(''),
+          axisLine: { show: false },
+          axisTick: { show: false },
+          axisLabel: { show: false }
+        },
+        yAxis: {
+          type: 'value',
+          show: false
+        },
+        series: [{
+          data: item.data.chartData,
+          type: 'bar',
+          barWidth: 10,
+          itemStyle: {
+            color: item.data.color,
+            borderRadius: [10, 10, 0, 0] // 柱状图圆角
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        }]
+      });
+    } else if (item.chartType === 'line') {
+      // 折线图配置
+      chartInstance.setOption({
+        tooltip: { show: false },
+        grid: { top: 10, bottom: 0, left: -30, right: 0, containLabel: true },
+        xAxis: {
+          type: 'category',
+          data: Array(item.data.chartData.length).fill(''),
+          axisLine: { show: false },
+          axisTick: { show: false },
+          axisLabel: { show: false }
+        },
+        yAxis: {
+          type: 'value',
+          show: false
+        },
+        series: [{
+          data: item.data.chartData,
+          type: 'line',
+          smooth: true,
+          showSymbol: false,
+          lineStyle: {
+            width: 4, // 折线图线条加粗
+            color: item.data.color
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              offset: 0,
+              color: `${item.data.color}33`
+            }, {
+              offset: 1,
+              color: `${item.data.color}02`
+            }])
+          }
+        }]
+      });
+    }
+    
+    chartInstances.push(chartInstance);
+  });
+
+  // 响应窗口大小变化
+  window.addEventListener('resize', () => {
+    chartInstances.forEach(instance => {
+      instance.resize();
+    });
+  });
+};
+
+// 监听props变化，重新初始化图表
+watch(() => props.totalData, () => {
+  // 清空之前的图表引用
+  chartRefs.value = [];
+  
+  // 等待DOM更新后重新初始化图表
+  nextTick(() => {
+    initCharts();
+  });
+}, { deep: true });
+
+// 组件挂载后初始化图表
+onMounted(() => {
+  initCharts();
+});
+</script>
+
+<style scoped lang="scss">
+.total-view-container {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  height: 217px;
+}
+
+.total-view-content {
+  display: flex;
+  justify-content: space-between;
+  gap: 0;
+}
+
+.stats-card {
+  flex: 1;
+  padding: 16px;
+  background-color: #fff;
+  border-radius: 0;
+  border: none;
+  border-right: 1px dashed #E4E7ED;
+}
+
+.stats-card:last-child {
+  border-right: none;
+}
+
+.stats-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.stats-title {
+  font-size: 14px;
+  color: #606266;
+}
+
+.stats-change {
+  font-size: 12px;
+}
+
+.stats-change.positive {
+  color: #52C41A;
+}
+
+.stats-change.negative {
+  color: #F5222D;
+}
+
+.stats-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.stats-value {
+  font-size: 24px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.stats-chart {
+  width: 100%;
+  height: 60px;
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+
+// 响应式布局
+@media screen and (max-width: 1200px) {
+  .total-view-content {
+    flex-wrap: wrap;
+  }
+  
+  .stats-card {
+    width: calc(50% - 10px);
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .stats-card {
+    width: 100%;
+  }
+}
+</style>

src/views/integratedManage/attendManage/index.vue

@@ -0,0 +1,325 @@
+<template>
+    <div class="model">
+        <!-- 标题栏 -->
+        <el-row :gutter="24">
+            <el-col :span="12">
+                <TitleComponent title="考勤管理" subtitle="项目出勤情况、人员排班及请假调休管理" />
+            </el-col>
+            <!-- 外层col：控制整体宽度并右对齐，同时作为flex容器 -->
+            <el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
+                <!-- 子col1：下拉 -->
+                <el-col :span="4">
+                    <el-select placeholder="选择电站">
+                        <el-option label="所有电站" value="all"></el-option>
+                    </el-select>
+                </el-col>
+                <!-- 子col2：下拉框容器 -->
+                <el-col :span="4">
+                    <el-select placeholder="日期范围">
+                        <el-option label="所有月份" value="all"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">
+                        导出数据
+                        <el-icon class="el-icon--right">
+                            <UploadFilled />
+                        </el-icon>
+                    </el-button>
+                </el-col>
+            </el-col>
+        </el-row>
+        <!-- 第一行：totalView 和 infoBox -->
+        <el-row :gutter="20">
+            <el-col :span="17">
+                <totalView :totalData="totalData"></totalView>
+            </el-col>
+            <el-col :span="7">
+                <infoBox></infoBox>
+            </el-col>
+        </el-row>
+        
+        <!-- 第二行：人员排班和出勤趋势分析 -->
+        <el-row :gutter="20">
+            <el-col :span="17">
+                <div class="analysis-content">
+                    <attendTrend :attendData="attendData"></attendTrend>
+                    <el-card>
+                        <TitleComponent title="人员排班" :fontLevel="2" />
+                        <renyuanpaiban></renyuanpaiban>
+                    </el-card>
+                </div>
+            </el-col>
+            
+            <!-- 右侧日历卡片 -->
+            <el-col :span="7">
+                <div class="calendar-content">
+                    <el-card>
+                        <calendar :calendarData="calendarData"></calendar>
+                        <todayAttend :todayAttendData="todayAttendData"></todayAttend>
+                        <approval :approvalData="approvalData"></approval>
+                    </el-card>
+                </div>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+<script setup lang="ts">
+import infoBox from '@/views/integratedManage/attendManage/components/infoBox.vue'
+import attendTrend from '@/views/integratedManage/attendManage/components/attendTrend.vue'
+import todayAttend from '@/views/integratedManage/attendManage/components/leftBox/todayAttend.vue'
+import approval from '@/views/integratedManage/attendManage/components/leftBox/approval.vue'
+import calendar from '@/views/integratedManage/attendManage/components/leftBox/calendar.vue'
+import totalView from '@/views/integratedManage/attendManage/components/totalView.vue'
+import renyuanpaiban from '@/views/integratedManage/attendManage/components/renyuanpaiban.vue'
+import { ref } from 'vue';
+
+// 出勤数据 - 用于attendTrend组件
+const attendData = ref(
+    {
+        week: {
+            xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+            actualCount: [40, 20, 30, 15, 22, 63, 58, 43, 39, 36],
+            expectedCount: [100, 556, 413, 115, 510, 115, 317, 118, 14, 7]
+        },
+        month: {
+            xAxis: ['第1周', '第2周', '第3周', '第4周'],
+            actualData: [280, 360, 320, 400],
+            theoreticalData: [300, 400, 350, 450]
+        },
+    }
+)
+
+// Mock数据 - 更新为循环生成所需的数据结构
+const totalData = ref({
+  attendance: {
+    value: 248,
+    change: '+8.2%',
+    isPositive: true,
+    chartData: [150, 230, 224, 218, 135, 300, 220],
+    color: '#FF7D00',
+    title: '总出勤人数',
+    compareText: '较昨日同期',
+    chartType: 'bar'
+  },
+  rest: {
+    value: 8,
+    change: '+8.2%',
+    isPositive: true,
+    chartData: [10, 12, 15, 8, 7, 9, 10],
+    color: '#00C48C',
+    title: '调休',
+    compareText: '较上月同期',
+    chartType: 'line'
+  },
+  leave: {
+    value: 24,
+    change: '-10%',
+    isPositive: false,
+    chartData: [30, 25, 28, 22, 20, 26, 24],
+    color: '#FF5252',
+    title: '本月请假',
+    compareText: '较昨日同期',
+    chartType: 'line'
+  },
+  rate: {
+    value: '96.8%',
+    change: '+10%',
+    isPositive: true,
+    chartData: [90, 92, 94, 95, 97, 98, 96.8],
+    color: '#029CD4',
+    title: '平均出勤率',
+    compareText: '较昨日同期',
+    chartType: 'line'
+  }
+});
+
+// 审批数据 - 用于approval组件
+const approvalData = ref([
+    {
+        type: '事假',
+        days: 1,
+        timeRange: '09.14-09.15',
+        people: '水泥班组-王五',
+        status: '待审批',
+        statusType: 'primary',
+        iconPath: '/src/assets/demo/approval.png'
+    },
+    {
+        type: '病假',
+        days: 2,
+        timeRange: '09.14-09.15',
+        people: '水泥班组-王五',
+        status: '待审批',
+        statusType: 'primary',
+        iconPath: '/src/assets/demo/approval.png'
+    },
+    {
+        type: '调休',
+        days: 1,
+        timeRange: '09.14-09.15',
+        people: '水泥班组-王五',
+        status: '待审批',
+        statusType: 'primary',
+        iconPath: '/src/assets/demo/approval.png'
+    },
+    {
+        type: '事假',
+        days: 1,
+        timeRange: '09.14-09.15',
+        people: '水泥班组-王五',
+        status: '待审批',
+        statusType: 'primary',
+        iconPath: '/src/assets/demo/approval.png'
+    },
+    {
+        type: '事假',
+        days: 1,
+        timeRange: '09.14-09.15',
+        people: '水泥班组-王五',
+        status: '已通过',
+        statusType: 'success',
+        iconPath: '/src/assets/demo/approval.png'
+    }
+]);
+
+// 今日出勤数据 - 用于todayAttend组件
+const todayAttendData = ref({
+  attendance: {
+    count: 150,
+    icon: '/src/assets/demo/qin.png'
+  },
+  late: {
+    count: 5,
+    icon: '/src/assets/demo/chi.png'
+  },
+  earlyLeave: {
+    count: 2,
+    icon: '/src/assets/demo/tui.png'
+  },
+  absent: {
+    count: 8,
+    icon: '/src/assets/demo/que.png'
+  }
+});
+
+// 日历数据 - 用于calendar组件
+const calendarData = ref({
+  // 初始化当前日期
+  today: new Date(),
+  currentDate: new Date(2025, 8, 27), // 2025年9月27日，截图中显示的日期
+  selectedDate: new Date(2025, 8, 27),
+  
+  // 模拟考勤数据
+  attendanceData: {
+    2025: {
+      9: {
+        1: 'normal',
+        4: 'late',
+        8: 'absent',
+        10: 'leave',
+        15: 'normal',
+        20: 'normal',
+        25: 'late',
+        27: 'normal'
+      }
+    }
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.model {
+    padding: 24px 20px;
+    background-color: rgba(242, 248, 252, 1);
+}
+
+/* 标题栏与内容区域间距 */
+.el-row+.el-row {
+    margin-top: 24px;
+}
+
+/* 分析内容区域 */
+.analysis-content {
+    display: flex;
+    flex-direction: column;
+    gap: 45px;
+    // border: 1px solid red;
+}
+
+/* 日历内容区域 */
+.calendar-content {
+    display: flex;
+    flex-direction: column;
+}
+
+/* 右侧日历卡片内组件间距 */
+.calendar-content .el-card {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.calendar-content .el-card > * {
+    margin-bottom: 16px;
+}
+
+.calendar-content .el-card > *:last-child {
+    margin-bottom: 0;
+    flex: 1;
+}
+
+/* 卡片样式统一 */
+.el-card {
+    border-radius: 8px !important;
+    border: none !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    overflow: hidden;
+}
+
+/* 下拉选择器和按钮样式调整 */
+.el-select {
+    width: 100%;
+    margin-right: 12px;
+}
+
+.el-button {
+    margin-left: 8px;
+}
+
+/* 响应式布局优化 */
+@media screen and (max-width: 1200px) {
+    .model {
+        padding: 16px;
+    }
+
+    .el-row+.el-row {
+        margin-top: 16px;
+    }
+
+    .analysis-content {
+        gap: 16px;
+    }
+    
+    /* 日历卡片内组件间距 */
+    .calendar-content .el-card > * {
+        margin-bottom: 12px;
+    }
+}
+
+/* 更细粒度的响应式调整 */
+@media screen and (max-width: 768px) {
+    .model {
+        padding: 12px;
+    }
+
+    .el-select {
+        margin-right: 8px;
+    }
+
+    .el-button {
+        margin-left: 4px;
+        padding: 8px 12px;
+    }
+}
+</style>

src/views/integratedManage/stateManage/components/manageForm.vue

@@ -0,0 +1,349 @@
+<template>
+    <div class="manage-form-container">
+        <!-- 搜索和筛选区域 -->
+        <div class="search-filter-section">
+            <el-row gutter="12" align="middle">
+                <el-col :span="2">
+                    <el-select v-model="searchForm.deviceType" placeholder="设备类型" clearable>
+                        <el-option label="全部类型" value="" />
+                        <el-option label="逆变器" value="逆变器" />
+                        <el-option label="传感器" value="传感器" />
+                        <el-option label="电表" value="电表" />
+                        <el-option label="摄像头" value="摄像头" />
+                        <el-option label="控制器" value="控制器" />
+                    </el-select>
+                </el-col>
+                <el-col :span="2">
+                    <el-select v-model="searchForm.status" placeholder="设备状态" clearable>
+                        <el-option label="全部状态" value="" />
+                        <el-option label="正常" value="normal" />
+                        <el-option label="异常" value="abnormal" />
+                        <el-option label="中断" value="interrupt" />
+                    </el-select>
+                </el-col>
+                <el-col :span="2">
+                    <el-select v-model="searchForm.protocol" placeholder="通讯状态" clearable>
+                        <el-option label="全部状态" value="" />
+                        <el-option label="Modbus TCP" value="Modbus TCP" />
+                        <el-option label="其他协议" value="其他" />
+                    </el-select>
+                </el-col>
+                <el-col :span="2">
+                    <el-select v-model="searchForm.station" placeholder="所属电站" clearable>
+                        <el-option label="全部电站" value="" />
+                        <el-option label="兴电基站1" value="兴电基站1" />
+                        <el-option label="兴电基站2" value="兴电基站2" />
+                        <el-option label="兴电基站3" value="兴电基站3" />
+                        <el-option label="兴电基站4" value="兴电基站4" />
+                        <el-option label="兴电基站5" value="兴电基站5" />
+                    </el-select>
+                </el-col>
+                <el-col :span="2">
+                    <el-button type="primary" @click="handleSearch" style="width: 100%">
+                        <el-icon><Search /></el-icon>
+                        搜索
+                    </el-button>
+                </el-col>
+                <el-col :span="3">
+                    <el-button type="primary" @click="handleAddDevice" style="width: 100%">
+                        <el-icon><CirclePlus /></el-icon>
+                        添加设备
+                    </el-button>
+                </el-col>
+                <el-col :span="3">
+                    <el-button type="primary" @click="handleBatchConfig" style="width: 100%">
+                        <el-icon><Setting /></el-icon>
+                        批量配置
+                    </el-button>
+                </el-col>
+            </el-row>
+        </div>
+        <!-- 设备信息表格 -->
+        <el-table v-loading="loading" :data="deviceList" style="width: 100%">
+            <el-table-column prop="deviceId" label="设备ID" min-width="120" align="center" />
+            <el-table-column prop="deviceName" label="设备名称" min-width="120" align="center" />
+            <el-table-column prop="deviceType" label="类型" min-width="100" align="center">
+                <template #default="scope">
+                    <el-tag :type="getDeviceTypeTagType(scope.row.deviceType)" :effect="'light'">
+                        {{ scope.row.deviceType }}
+                    </el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column prop="station" label="所属电站" min-width="120" align="center" />
+            <el-table-column prop="protocol" label="通讯协议" min-width="100" align="center" />
+            <el-table-column prop="ipAddress" label="IP地址" min-width="120" align="center" />
+            <el-table-column prop="lastOnlineTime" label="最后在线时间" min-width="150" align="center" />
+            <el-table-column prop="status" label="状态" min-width="80">
+                <template #default="scope">
+                    <el-tag :type="getStatusTagType(scope.row.status)" :effect="light">
+                        {{ getStatusText(scope.row.status) }}
+                    </el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" min-width="150" fixed="right">
+                <template #default="scope">
+                    <span style="color: #1890ff; cursor: pointer; margin-right: 15px;" @click="handleDetails(scope.row)">
+                        查看
+                    </span>
+                    <span style="color: #666666; cursor: pointer; margin-right: 15px;" @click="handleConfig(scope.row)">
+                        配置
+                    </span>
+                    <span style="color: #666666; cursor: pointer;" @click="handleDelete(scope.row)">
+                        删除
+                    </span>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <!-- 分页区域 -->
+        <div class="pagination-container">
+            <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
+                :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, jumper"
+                :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { Search, CirclePlus, Setting } from '@element-plus/icons-vue';
+import { ref, reactive, watch } from 'vue';
+
+// 定义props接收数据
+const props = defineProps({
+  tableData: {
+    type: Object,
+    default: () => ({
+      list: [],
+      total: 0
+    })
+  }
+});
+
+// 搜索表单数据
+const searchForm = reactive({
+    deviceType: '',
+    station: '',
+    protocol: '',
+    status: '',
+    keyword: ''
+});
+
+// 表格加载状态
+const loading = ref(false);
+
+// 分页数据
+const pagination = reactive({
+    currentPage: 1,
+    pageSize: 10,
+    total: 0
+});
+
+// 设备列表数据
+const deviceList = ref([]);
+
+// 监听props变化并更新设备列表
+watch(() => props.tableData, (newData) => {
+  deviceList.value = newData.list || [];
+  pagination.total = newData.total || 0;
+}, { immediate: true, deep: true });
+
+// 获取状态文本
+const getStatusText = (status) => {
+    const statusMap = {
+        normal: '正常',
+        interrupt: '中断',
+        abnormal: '异常'
+    };
+    return statusMap[status] || status;
+};
+
+// 获取状态标签类型
+const getStatusTagType = (status) => {
+    const typeMap = {
+        normal: 'success',
+        interrupt: 'warning',
+        abnormal: 'danger'
+    };
+    return typeMap[status] || 'default';
+};
+
+
+
+// 获取设备类型标签类型
+const getDeviceTypeTagType = (deviceType) => {
+    const typeMap = {
+        '逆变器': 'primary',
+        '传感器': 'success',
+        '电表': 'warning',
+        '摄像头': 'info',
+        '控制器': 'danger'
+    };
+    return typeMap[deviceType] || 'default';
+};
+
+// 处理搜索
+const handleSearch = () => {
+    loading.value = true;
+    pagination.currentPage = 1;
+    // 模拟搜索请求
+    setTimeout(() => {
+        loading.value = false;
+        ElMessage.success('搜索成功');
+        // 实际项目中这里应该调用API获取数据
+    }, 500);
+};
+
+// 处理添加设备
+const handleAddDevice = () => {
+    // 实际项目中这里应该打开添加设备的弹窗或跳转到添加页面
+    ElMessage.success('打开添加设备窗口');
+};
+
+// 处理批量配置
+const handleBatchConfig = () => {
+    // 实际项目中这里应该打开批量配置的弹窗
+    ElMessage.success('打开批量配置窗口');
+};
+
+// 处理查看详情
+const handleDetails = (row) => {
+    // 实际项目中这里应该打开设备详情的弹窗或跳转到详情页面
+    ElMessage.success(`查看设备${row.deviceId}详情`);
+};
+
+// 处理配置
+const handleConfig = (row) => {
+    // 实际项目中这里应该打开设备配置的弹窗
+    ElMessage.success(`配置设备${row.deviceId}`);
+};
+
+// 处理删除
+const handleDelete = (row) => {
+    ElMessageBox.confirm(
+        `确定要删除设备${row.deviceId}吗？`,
+        '提示',
+        {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+        }
+    )
+        .then(() => {
+            // 实际项目中这里应该调用API删除设备
+            ElMessage.success('删除成功');
+        })
+        .catch(() => {
+            ElMessage.info('已取消删除');
+        });
+};
+
+// 处理分页大小变化
+const handleSizeChange = (size) => {
+    pagination.pageSize = size;
+    // 实际项目中这里应该重新请求数据
+};
+
+// 处理分页页码变化
+const handleCurrentChange = (current) => {
+    pagination.currentPage = current;
+    // 实际项目中这里应该重新请求数据
+};
+</script>
+
+<style scoped>
+.manage-form-container {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    min-height: 100%;
+}
+
+.search-filter-section {
+    margin-bottom: 24px;
+    padding: 16px;
+    background-color: #f5f7fa;
+    border-radius: 8px;
+}
+
+/* 下拉选择框样式优化 */
+:deep(.el-select) {
+    width: 100%;
+}
+
+:deep(.el-input__wrapper) {
+    border-radius: 6px;
+}
+
+/* 按钮样式优化 */
+:deep(.el-button) {
+    border-radius: 6px;
+    font-size: 14px;
+    transition: all 0.3s ease;
+}
+
+:deep(.el-button--primary) {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+
+:deep(.el-button--primary:hover) {
+    background-color: #40a9ff;
+    border-color: #40a9ff;
+}
+
+/* 响应式设计 */
+@media screen and (max-width: 1200px) {
+    .search-filter-section .el-col {
+        margin-bottom: 12px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .search-filter-section {
+        padding: 12px;
+    }
+    
+    .search-filter-section .el-row {
+        display: flex;
+        flex-direction: column;
+    }
+    
+    .search-filter-section .el-col {
+        width: 100% !important;
+        margin-bottom: 12px;
+    }
+}
+
+.action-buttons {
+    margin-bottom: 20px;
+    display: flex;
+    gap: 10px;
+}
+
+.pagination-container {
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+/* 表格样式优化 */
+:deep(.el-table) {
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+:deep(.el-table__header-wrapper) {
+    background-color: #fafafa;
+}
+
+:deep(.el-table__row:hover) {
+    background-color: #f5f7fa;
+}
+
+/* 分页样式优化 */
+:deep(.el-pagination) {
+    display: flex;
+    justify-content: flex-end;
+}
+</style>

src/views/integratedManage/stateManage/components/stateTrend.vue

@@ -0,0 +1,196 @@
+
+<template>
+    <div class="chart-container">
+        <!--组件温度（℃）  图表内容区域 -->
+        <div ref="chartRef" class="chart-content"></div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import * as echarts from 'echarts';
+
+// 定义props接收数据
+const props = defineProps({
+  trendData: {
+    type: Object,
+    default: () => ({
+      dates: [],
+      series: []
+    })
+  }
+});
+
+// 图表DOM引用
+const chartRef = ref(null);
+// 图表实例
+let chartInstance = null;
+
+// 初始化图表
+const initChart = () => {
+    if (chartRef.value && !chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+    }
+    const option = {
+   tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+         // 坐标轴指示器，坐标轴触发有效
+         type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+      }
+   },
+   legend: {
+      show: true,
+      left: '8%',
+      icon: 'square', 
+      itemWidth: 12,
+      itemHeight: 12,
+      textStyle: {
+         color: '#4E5969'
+      }
+   },
+   xAxis: {
+      type: 'category',
+      axisTick: {
+         show: false
+      },
+      axisLabel: {
+         textStyle: {
+            color: '#4E5969'
+         }
+      },
+      axisLine: {
+         lineStyle: {
+            color: '#EAEBF0'
+         }
+      },
+      data: props.trendData.dates || []
+   },
+   yAxis: {
+      type: 'value',
+      max: 150,
+      interval: 50,
+      axisLabel: {
+         textStyle: {
+            color: '#4E5969'
+         }
+      },
+      splitLine: {
+         show: true,
+         lineStyle: {
+            color: '#EAEBF0',
+            type: 'dashed'
+         }
+      }
+   },
+   series: props.trendData.series.map((item, index) => ({
+      name: item.name,
+      data: item.data,
+      type: 'bar',
+      stack: 'one',
+      color: item.color,
+      itemStyle: {
+         borderWidth: 1,
+         borderColor: 'rgba(255, 255, 255, 1)',
+         barBorderRadius: 8
+      },
+      barWidth: index === 0 ? '20' : index === 2 ? '12' : '20',
+   }))
+    }
+    chartInstance.setOption(option);
+};
+
+// 响应窗口大小变化
+const handleResize = () => {
+    if (chartInstance) {
+        chartInstance.resize();
+    }
+};
+
+// 生命周期钩子
+onMounted(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+    return () => {
+        window.removeEventListener('resize', handleResize);
+        if (chartInstance) {
+            chartInstance.dispose();
+            chartInstance = null;
+        }
+    };
+});
+
+
+</script>
+
+<style scoped>
+.chart-container {
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 400px;
+    width: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.chart-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
+
+
+.chart-content {
+    width: 100%;
+    height: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+    .chart-container {
+        height: 350px;
+    }
+}
+
+@media (max-width: 480px) {
+    .chart-container {
+        height: 300px;
+    }
+
+    .chart-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .chart-actions {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .chart-actions button {
+        margin: 0;
+        flex: 1;
+        margin-right: 5px;
+    }
+
+    .chart-actions button:last-child {
+        margin-right: 0;
+    }
+}
+</style>

src/views/integratedManage/stateManage/components/statusPie.vue

@@ -0,0 +1,229 @@
+<template>
+    <div class="chart-container">
+        <!--组件温度（℃）  图表内容区域 -->
+        <div ref="chartRef" class="chart-content"></div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import * as echarts from 'echarts';
+
+// 定义props接收数据
+const props = defineProps({
+  pieData: {
+    type: Object,
+    default: () => ({
+      normal: {
+        value: 28,
+        name: '提示信息',
+        displayName: '设备正常'
+      },
+      interrupt: {
+        value: 45,
+        name: '一般告警',
+        displayName: '设备中断'
+      },
+      abnormal: {
+        value: 55,
+        name: '重要告警',
+        displayName: '设备异常'
+      }
+    })
+  }
+});
+
+// 默认的三种颜色
+const defaultColors = {
+  normal: '#43CF7C',
+  interrupt: '#00B3FF',
+  abnormal: '#FB3E7A'
+};
+
+// 图表DOM引用
+const chartRef = ref(null);
+// 图表实例
+let chartInstance = null;
+
+// 初始化图表
+const initChart = () => {
+    if (chartRef.value && !chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+    }
+    const option = {
+        tooltip: {
+            trigger: 'item',
+            formatter: function(params) {
+                // 使用ECharts提供的百分比值
+                const percentage = params.percent.toFixed(1);
+                // 返回格式化后的文本
+                return `${params.data.displayName}: ${params.value}台 (${percentage}%)`;
+            }
+        },
+        grid: {
+            left: '0%',
+            right: '20%',
+            bottom: '0%',
+            top: '0%',
+            containLabel: true
+        },
+        legend: {
+            top: 'middle',
+            orient: 'vertical',
+            right: '5%', // 调整图例位置，使其更靠近左侧
+            itemWidth: 15,
+            itemHeight: 15,
+            formatter: function(name) {
+                const data = props.pieData.normal.name === name ? props.pieData.normal : 
+                            props.pieData.interrupt.name === name ? props.pieData.interrupt : 
+                            props.pieData.abnormal;
+                // 返回格式化后的文本
+                return `${data.displayName}(${data.value})`;
+            }
+        },
+        series: [
+            {
+                type: 'pie',
+                radius: ['40%', '70%'],
+                center:['40%','50%'],
+                label: {
+                    show: false
+                },
+                labelLine: {
+                    show: true
+                },
+                color: [
+                    defaultColors.normal,
+                    defaultColors.interrupt,
+                    defaultColors.abnormal
+                ],
+                data: [
+                    {
+                        value: props.pieData.normal.value,
+                        name: props.pieData.normal.name,
+                        displayName: props.pieData.normal.displayName
+                    },
+                    {
+                        value: props.pieData.interrupt.value,
+                        name: props.pieData.interrupt.name,
+                        displayName: props.pieData.interrupt.displayName
+                    },
+                    {
+                        value: props.pieData.abnormal.value,
+                        name: props.pieData.abnormal.name,
+                        displayName: props.pieData.abnormal.displayName
+                    }
+                ],
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }
+        ]
+    };
+
+    chartInstance.setOption(option);
+};
+
+// 响应窗口大小变化
+const handleResize = () => {
+    if (chartInstance) {
+        chartInstance.resize();
+    }
+};
+
+// 生命周期钩子
+onMounted(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+    return () => {
+        window.removeEventListener('resize', handleResize);
+        if (chartInstance) {
+            chartInstance.dispose();
+            chartInstance = null;
+        }
+    };
+});
+
+
+</script>
+
+<style scoped>
+.chart-container {
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 250px;
+    width: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.chart-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
+
+
+.chart-content {
+    width: 100%;
+    height: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+    .chart-container {
+        height: 350px;
+    }
+}
+
+@media (max-width: 480px) {
+    .chart-container {
+        height: 300px;
+    }
+
+    .chart-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .chart-actions {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .chart-actions button {
+        margin: 0;
+        flex: 1;
+        margin-right: 5px;
+    }
+
+    .chart-actions button:last-child {
+        margin-right: 0;
+    }
+}
+
+.model {
+    padding: 20px;
+    background-color: rgba(242, 248, 252, 1);
+}
+</style>

src/views/integratedManage/stateManage/components/totalView.vue

@@ -0,0 +1,174 @@
+<template>
+    <div class="chart-container">
+        <el-row style="padding: 0 0 0 20px;box-sizing: border-box;">
+            <el-col :span="6">
+                <div class="item-box">
+                    <div class="item-icon">
+                         <img src="@/assets/demo/rebot.png" alt="">
+                    </div>
+                    <div class="item-title">设备总数</div>
+                    <div class="item-value">{{ totalData.deviceCount }}</div>
+                    <div class="item-unit">台</div>
+                    <div class="item-trend">
+                        <img src="@/assets/demo/up.png" alt="">
+                        <span class="trend-num">+{{ totalData.increase || 8 }}台</span>
+                        <span class="trend-des">较上月同期</span>
+                    </div>
+                </div>
+            </el-col>
+            <el-col :span="6">
+                <div class="item-box">
+                    <div class="item-icon">
+                         <img src="@/assets/demo/wifi.png" alt="">
+                    </div>
+                    <div class="item-title">正常设备</div>
+                    <div class="item-value">{{ totalData.normalCount }}</div>
+                    <div class="item-unit">台</div>
+                    <div class="item-trend">
+                        <img src="@/assets/demo/up.png" alt="">
+                        <span class="trend-num">+{{ totalData.normalIncrease || 5 }}台</span>
+                        <span class="trend-des">较上月同期</span>
+                    </div>
+                </div>
+            </el-col>
+            <el-col :span="6">
+                <div class="item-box">
+                    <div class="item-icon">
+                         <img src="@/assets/demo/wifiwarn.png" alt="">
+                    </div>
+                    <div class="item-title">异常设备</div>
+                    <div class="item-value">{{ totalData.abnormalCount }}</div>
+                    <div class="item-unit">台</div>
+                    <div class="item-trend">
+                        <img src="@/assets/demo/down.png" alt="">
+                        <span class="trend-num">-{{ totalData.abnormalDecrease || 3 }}台</span>
+                        <span class="trend-des">较上月同期</span>
+                    </div>
+                </div>
+            </el-col>
+            <el-col :span="6">
+                <div class="item-box">
+                    <div class="item-icon">
+                         <img src="@/assets/demo/nowifi.png" alt="">
+                    </div>
+                    <div class="item-title">中断设备</div>
+                    <div class="item-value">{{ totalData.interruptCount }}</div>
+                    <div class="item-unit">台</div>
+                    <div class="item-trend">
+                        <img src="@/assets/demo/down.png" alt="" class="trend-icon">
+                        <span class="trend-num">-{{ totalData.interruptDecrease || 2 }}台</span>
+                        <span class="trend-des">较上月同期</span>
+                    </div>
+                </div>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 定义props接收数据
+const props = defineProps({
+  totalData: {
+    type: Object,
+    default: () => ({
+      deviceCount: 0,
+      normalCount: 0,
+      abnormalCount: 0,
+      interruptCount: 0,
+      increase: 0,
+      normalIncrease: 0,
+      abnormalDecrease: 0,
+      interruptDecrease: 0
+    })
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.item-box {
+    padding: 20px;
+    width: 216px;
+    height: 282px;
+    border-radius: 10px;
+    // border: 1px solid red;
+    background: rgba(255, 255, 255, 1);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .item-icon {
+        width: 49.94px;
+        height: 49.91px;
+        border-radius: 8px;
+        background: rgba(24, 109, 245, 1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .item-title {
+        width: 129.85px;
+        height: 21.21px;
+        /** 文本1 */
+        font-size: 16px;
+        font-weight: 500;
+        letter-spacing: 0px;
+        line-height: 23.17px;
+        color: rgba(182, 182, 182, 1);
+        text-align: left;
+        vertical-align: top;
+    }
+
+    .item-value {
+        border-radius: 10px;
+        background: rgba(255, 255, 255, 1);
+        font-size: 24px;
+        font-weight: 400;
+        letter-spacing: 0px;
+        line-height: 34.75px;
+        color: rgba(0, 0, 0, 1);
+        text-align: left;
+        vertical-align: top;
+    }
+
+    .item-unit {
+        width: 38.71px;
+        height: 21.21px;
+        opacity: 1;
+        /** 文本1 */
+        font-size: 16px;
+        font-weight: 500;
+        letter-spacing: 0px;
+        line-height: 23.17px;
+        color: rgba(182, 182, 182, 1);
+        text-align: left;
+        vertical-align: top;
+    }
+
+    .item-trend {
+        .trend-num {
+            font-size: 14px;
+            font-weight: 500;
+            letter-spacing: 0px;
+            line-height: 14.48px;
+            color: rgba(0, 184, 122, 1);
+            text-align: center;
+            vertical-align: middle;
+             margin-right: 10px;
+             margin-left: 10px;
+        }
+        .trend-des {
+            font-size: 14px;
+            font-weight: 500;
+            letter-spacing: 0px;
+            line-height: 14.48px;
+            color: rgba(154, 154, 154, 1);
+            text-align: left;
+            vertical-align: middle;
+
+        }
+    }
+}
+</style>

src/views/integratedManage/stateManage/index.vue

@@ -0,0 +1,296 @@
+<template>
+    <div class="model">
+        <!-- 标题栏 -->
+        <el-row :gutter="24">
+            <el-col :span="12">
+               <TitleComponent title="设备状态管理" subtitle="监控和管理所有设备的运行状态" />
+            </el-col>
+            <!-- 外层col：控制整体宽度并右对齐，同时作为flex容器 -->
+            <el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
+                <el-col :span="4">
+                    <el-button type="primary">
+                        导出数据
+                        <el-icon class="el-icon--right">
+                            <UploadFilled />
+                        </el-icon>
+                    </el-button>
+                </el-col>
+            </el-col>
+        </el-row>
+        <!-- 第一行：设备统计和状态分布 -->
+        <el-row :gutter="20" class="content-row equal-height-row">
+            <el-col :span="16">
+                <el-card shadow="hover" class="custom-card">
+                    <totalView :totalData="totalData" />
+                </el-card>
+            </el-col>
+            <el-col :span="8">
+                <!-- 设备状态分布 -->
+                <el-card shadow="hover" class="custom-card">
+                    <TitleComponent title="设备状态分布" :font-level="2" />
+                    <statusPie :pieData="pieData" />
+                </el-card>
+            </el-col>
+        </el-row>
+        
+        <!-- 第二行：设备状态趋势 -->
+        <el-row :gutter="20" class="content-row">
+            <el-col :span="24">
+                <el-card shadow="hover" class="custom-card">
+                    <TitleComponent title="设备状态趋势" :font-level="2" />
+                    <stateTrend :trendData="trendData" />
+                </el-card>
+            </el-col>
+        </el-row>
+        
+        <!-- 第三行：设备管理表单 -->
+        <el-row :gutter="20" class="content-row">
+            <el-col :span="24">
+                <el-card shadow="hover" class="custom-card">
+                    <TitleComponent title="设备管理表单" :font-level="2" />
+                    <manageForm :tableData="tableData" />
+                </el-card>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import TitleComponent from '@/components/TitleComponent/index.vue';
+import totalView from '@/views/integratedManage/stateManage/components/totalView.vue';
+import stateTrend from '@/views/integratedManage/stateManage/components/stateTrend.vue'
+import statusPie from '@/views/integratedManage/stateManage/components/statusPie.vue'
+import manageForm from '@/views/integratedManage/stateManage/components/manageForm.vue';
+
+// Mock数据 - 设备统计数据
+const totalData = ref({
+  deviceCount: 545,
+  normalCount: 436,
+  abnormalCount: 65,
+  interruptCount: 44,
+  increase: 8,
+  normalIncrease: 5,
+  abnormalDecrease: 3,
+  interruptDecrease: 2
+});
+
+// Mock数据 - 饼图数据
+const pieData = ref({
+  normal: {
+    value: 436,
+    name: 'normal',
+    displayName: '设备正常',
+    percent: '80%'
+  },
+  abnormal: {
+    value: 65,
+    name: 'abnormal',
+    displayName: '设备异常',
+    percent: '12%'
+  },
+  interrupt: {
+    value: 44,
+    name: 'interrupt',
+    displayName: '设备中断',
+    percent: '8%'
+  }
+});
+
+// Mock数据 - 趋势图数据
+const trendData = ref({
+  dates: ['9-12', '9-13', '9-14', '9-15', '9-16', '9-17', '9-18'],
+  series: [
+    {
+      name: '正常',
+      data: [20, 10, 50, 80, 70, 10, 30],
+      color: '#7339F5'
+    },
+    {
+      name: '中断',
+      data: [80, 30, 50, 80, 70, 10, 30],
+      color: '#FF8A00'
+    },
+    {
+      name: '异常',
+      data: [50, 30, 50, 80, 70, 10, 30],
+      color: '#DE4848'
+    }
+  ]
+});
+
+// Mock数据 - 表格数据
+const tableData = ref({
+  list: [
+    {
+      deviceId: 'WO-2023-0620-056',
+      deviceName: '逆变器-01',
+      deviceType: '逆变器',
+      station: '兴电基站1',
+      protocol: 'Modbus TCP',
+      ipAddress: '192.168.1.101',
+      lastOnlineTime: '2023-06-30 17:00',
+      status: 'normal'
+    },
+    {
+      deviceId: 'WO-2023-0620-057',
+      deviceName: '温度传感器-45',
+      deviceType: '传感器',
+      station: '兴电基站2',
+      protocol: 'Modbus TCP',
+      ipAddress: '192.168.1.101',
+      lastOnlineTime: '2023-06-30 17:00',
+      status: 'interrupt'
+    },
+    {
+      deviceId: 'WO-2023-0620-058',
+      deviceName: '智能电表-03',
+      deviceType: '电表',
+      station: '兴电基站3',
+      protocol: 'Modbus TCP',
+      ipAddress: '192.168.1.101',
+      lastOnlineTime: '2023-06-30 17:00',
+      status: 'abnormal'
+    },
+    {
+      deviceId: 'WO-2023-0620-059',
+      deviceName: '监控摄像头-02',
+      deviceType: '摄像头',
+      station: '兴电基站4',
+      protocol: 'Modbus TCP',
+      ipAddress: '192.168.1.101',
+      lastOnlineTime: '2023-06-30 17:00',
+      status: 'normal'
+    },
+    {
+      deviceId: 'WO-2023-0620-060',
+      deviceName: '控制器-07',
+      deviceType: '控制器',
+      station: '兴电基站5',
+      protocol: 'Modbus TCP',
+      ipAddress: '192.168.1.101',
+      lastOnlineTime: '2023-06-30 17:00',
+      status: 'normal'
+    },
+    {
+      deviceId: 'WO-2023-0620-061',
+      deviceName: '逆变器-02',
+      deviceType: '逆变器',
+      station: '兴电基站1',
+      protocol: 'Modbus TCP',
+      ipAddress: '192.168.1.101',
+      lastOnlineTime: '2023-06-30 17:00',
+      status: 'normal'
+    },
+    {
+      deviceId: 'WO-2023-0620-062',
+      deviceName: '电流传感器-08',
+      deviceType: '传感器',
+      station: '兴电基站1',
+      protocol: 'Modbus TCP',
+      ipAddress: '192.168.1.101',
+      lastOnlineTime: '2023-06-30 17:00',
+      status: 'normal'
+    },
+    {
+      deviceId: 'WO-2023-0620-063',
+      deviceName: '多功能电表-12',
+      deviceType: '电表',
+      station: '兴电基站1',
+      protocol: 'Modbus TCP',
+      ipAddress: '192.168.1.101',
+      lastOnlineTime: '2023-06-30 17:00',
+      status: 'normal'
+    },
+    {
+      deviceId: 'WO-2023-0620-064',
+      deviceName: '门禁摄像头-05',
+      deviceType: '摄像头',
+      station: '兴电基站1',
+      protocol: 'Modbus TCP',
+      ipAddress: '192.168.1.101',
+      lastOnlineTime: '2023-06-30 17:00',
+      status: 'normal'
+    },
+    {
+      deviceId: 'WO-2023-0620-065',
+      deviceName: '开关控制器-15',
+      deviceType: '控制器',
+      station: '兴电基站1',
+      protocol: 'Modbus TCP',
+      ipAddress: '192.168.1.101',
+      lastOnlineTime: '2023-06-30 17:00',
+      status: 'normal'
+    }
+  ],
+  total: 545
+});
+</script>
+
+<style scoped>
+.model {
+    padding: 20px 15px;
+    background-color: rgba(242, 248, 252, 1);
+}
+
+.content-row {
+    margin-bottom: 20px;
+}
+
+.custom-card {
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    border: none;
+}
+
+.custom-card:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.equal-height-row {
+    display: flex;
+    align-items: stretch;
+}
+
+.equal-height-row .el-col {
+    display: flex;
+}
+
+.equal-height-row .custom-card {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.equal-height-row .el-card__body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+/* 响应式布局调整 */
+@media (max-width: 1200px) {
+    .content-row {
+        margin-bottom: 15px;
+    }
+    
+    .equal-height-row {
+        flex-direction: column;
+    }
+    
+    .equal-height-row .el-col {
+        width: 100%;
+        margin-bottom: 20px;
+    }
+}
+
+@media (max-width: 768px) {
+    .model {
+        padding: 15px 10px;
+    }
+    
+    .content-row {
+        margin-bottom: 10px;
+    }
+}
+</style>

src/views/largeScreen/components/centerPage.vue

@@ -0,0 +1,318 @@
+<template>
+  <div class="centerPage">
+    <div class="centerPage_list">
+      <div class="card">
+        <div class="title">今日总发电量</div>
+        <div class="value">
+          <span style="color: rgba(29, 214, 255, 1)">{{ data?.dayEnergy ?? '0' }}</span>
+          <span style="color: rgba(156, 163, 175, 1); font-size: 12px">kMh</span>
+          <div class="icon">
+            <img src="@/assets/large/center4.png" style="width: 16px; height: 16px" alt="" />
+          </div>
+        </div>
+        <div class="compare" v-if="Number(data?.dayEnergy) - Number(data?.dayEnergyOld) != 0">
+          <el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.dayEnergy) - Number(data?.dayEnergyOld) > 0"><Top /></el-icon>
+          <el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
+          <span>{{ Number(data?.dayEnergy) - Number(data?.dayEnergyOld) > 0 ? '新增' : '减少' }}</span>
+          <span>{{ (Math.abs(Number(data?.dayEnergy) - Number(data?.dayEnergyOld)) / Number(data?.dayEnergy)) * 100 }} %</span>
+        </div>
+        <div class="compare" v-else>无</div>
+        <div class="target">目标: 14,200 kWh</div>
+      </div>
+      <div class="card">
+        <div class="title">发电效率</div>
+        <div class="value">
+          <span style="color: rgba(0, 227, 150, 1)">{{ data?.generateElectricity ?? '0' }}</span>
+          <span style="color: rgba(156, 163, 175, 1); font-size: 12px">%</span>
+          <div class="icon">
+            <img src="@/assets/large/center3.png" style="width: 16px; height: 16px" alt="" />
+          </div>
+        </div>
+        <div class="compare" v-if="Number(data?.generateElectricity) - Number(data?.generateElectricityOld) != 0">
+          <el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.generateElectricity) - Number(data?.generateElectricityOld) > 0"><Top /></el-icon>
+          <el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
+          <span>{{ Number(data?.generateElectricity) - Number(data?.generateElectricityOld) > 0 ? '新增' : '减少' }}</span>
+          <span
+            >{{
+              (Math.abs(Number(data?.generateElectricity) - Number(data?.generateElectricityOld)) / Number(data?.generateElectricity)) * 100
+            }}
+            %</span
+          >
+        </div>
+        <div class="compare" v-else>无</div>
+
+        <div class="target">基准: 90.0%</div>
+      </div>
+      <div class="card">
+        <div class="title">设备健康度</div>
+        <div class="value">
+          <span style="color: rgba(54, 207, 201, 1)">{{ data?.health ?? '0' }}</span>
+          <span style="color: rgba(156, 163, 175, 1); font-size: 12px">%</span>
+          <div class="icon">
+            <img src="@/assets/large/center2.png" style="width: 16px; height: 16px" alt="" />
+          </div>
+        </div>
+        <div class="compare" v-if="Number(data?.health) - Number(data?.healthOld) != 0">
+          <el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.health) - Number(data?.healthOld) > 0"><Top /></el-icon>
+          <el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
+          <span>{{ Number(data?.health) - Number(data?.healthOld) > 0 ? '新增' : '减少' }}</span>
+          <span>{{ (Math.abs(Number(data?.health) - Number(data?.healthOld)) / Number(data?.health)) * 100 }} %</span>
+        </div>
+        <div class="compare" v-else>无</div>
+        <div class="target">检测: 24分钟前</div>
+      </div>
+      <div class="card">
+        <div class="title">CO2减排量</div>
+        <div class="value">
+          <span style="color: rgba(179, 0, 255, 1)">{{ data?.powerStationAvoidedCo2 ?? '0' }}</span>
+
+          <span style="color: rgba(156, 163, 175, 1); font-size: 12px">吨</span>
+          <div class="icon">
+            <img src="@/assets/large/center1.png" style="width: 16px; height: 16px" alt="" />
+          </div>
+        </div>
+        <div class="compare" v-if="Number(data?.powerStationAvoidedCo2) - Number(data?.powerStationAvoidedCo2Old) != 0">
+          <el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.powerStationAvoidedCo2) - Number(data?.powerStationAvoidedCo2Old) > 0"
+            ><Top
+          /></el-icon>
+          <el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
+          <span>{{ Number(data?.powerStationAvoidedCo2) - Number(data?.powerStationAvoidedCo2Old) > 0 ? '新增' : '减少' }}</span>
+          <span
+            >{{
+              (Math.abs(Number(data?.powerStationAvoidedCo2) - Number(data?.powerStationAvoidedCo2Old)) / Number(data?.powerStationAvoidedCo2)) * 100
+            }}
+            %</span
+          >
+        </div>
+        <div class="compare" v-else>无</div>
+
+        <div class="target">目标: 12560吨</div>
+      </div>
+    </div>
+    <div class="centerPage_map">
+      <div ref="mapRef" class="map-container" style="width: 100%; height: 98%" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getPowerStationOverview } from '@/api/large';
+import * as echarts from 'echarts';
+import china from '@/assets/china.json';
+const data = ref<any>({});
+
+// 地图容器引用
+const mapRef = ref<HTMLDivElement | null>(null);
+// ECharts实例
+let myChart: any = null;
+
+// 响应窗口大小变化
+const handleResize = () => {
+  if (myChart) {
+    myChart.resize();
+  }
+};
+
+// 初始化地图
+const initEcharts = () => {
+  if (!mapRef.value) {
+    console.error('未找到地图容器元素');
+    return;
+  }
+
+  // 注册地图
+  echarts.registerMap('china', china as any);
+
+  // 地图数据
+  const mapData: any = [{ name: '田东县', value: 1, itemStyle: { color: '#fff' } }];
+
+  // 散点数据
+  // 散点数据 - 使用图片标记并调整名称位置
+  const scatterData: any[] = [
+    {
+      name: '田东光伏智慧生态工地开发项目',
+      value: [107.15, 23.63],
+      // 使用图片作为标记（注意：需替换为你的图片实际路径）
+      symbol: 'diamond',
+      // 标记颜色
+      itemStyle: {
+        color: '#0166d6'
+      },
+      // 图片标记大小（宽, 高）
+      symbolSize: [20, 20],
+      // 名称样式设置
+      label: {
+        show: true,
+        formatter: '{b}', // 显示名称
+        position: 'top', // 名称在图片上方
+        color: '#fff',
+        fontSize: 12,
+        // 可选：添加文字背景以增强可读性
+        backgroundColor: 'rgba(3, 26, 52, 0.7)',
+        padding: [3, 6],
+        borderRadius: 3
+      }
+    }
+  ];
+  // 初始化新实例，强制清除缓存
+  myChart = echarts.init(mapRef.value, null, {
+    renderer: 'canvas', // 明确指定渲染器
+    useDirtyRect: false // 禁用脏矩形渲染，避免样式缓存
+  });
+  // 配置项
+  const option: any = {
+    roam: true, // 关键配置：允许鼠标滚轮缩放和拖拽平移
+    geo: {
+      type: 'map',
+      map: 'china',
+      zoom: 5,
+      center: [107.15, 23.63],
+      label: {
+        show: false,
+        color: '#fff'
+      },
+      itemStyle: {
+        areaColor: '#031a34', // 地图区域底色
+        borderColor: '#1e3a6e', // 区域边框颜色
+        borderWidth: 1
+      }
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: function (params: any) {
+        return params.name + (params.value ? `：${params.value}` : '');
+      }
+    },
+    series: [
+      {
+        type: 'map',
+        map: 'china',
+        geoIndex: 0,
+        // 关键：在series级别定义emphasis，优先级最高
+        emphasis: {
+          areaColor: '#fff', // 强制设置hover颜色
+          label: {
+            show: true,
+            color: '#fff'
+          },
+          itemStyle: {
+            areaColor: '#02417e' // 重复设置确保生效
+          }
+        },
+        // 确保没有使用默认样式
+        select: {
+          itemStyle: {
+            areaColor: '#02417e'
+          }
+        },
+        data: mapData
+      },
+      {
+        type: 'scatter',
+        coordinateSystem: 'geo',
+        data: scatterData
+      }
+    ]
+  };
+
+  // 设置配置项
+  myChart.setOption(option);
+};
+
+// 组件挂载时初始化
+onMounted(() => {
+  // 确保DOM渲染完成
+  nextTick(() => {
+    initEcharts();
+    window.addEventListener('resize', handleResize);
+  });
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  if (myChart) {
+    myChart.dispose();
+    myChart = null;
+  }
+});
+const getDataList = () => {
+  getPowerStationOverview().then((res) => {
+    console.log(res);
+    if (res.code == 200) {
+      data.value = res.data;
+    }
+  });
+};
+getDataList();
+</script>
+
+<style scoped lang="scss">
+.centerPage {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 0 10px 10px 10px;
+
+  box-sizing: border-box;
+  .centerPage_list {
+    width: 100%;
+    height: 20%;
+    padding: 0 0px 10px 0px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 13px;
+    .card {
+      width: 220px;
+      background: rgba(12, 30, 53, 0.4); /* 深色背景，模拟科技感 */
+      color: #fff;
+      border-radius: 8px;
+      padding: 16px;
+      font-family: sans-serif;
+    }
+    .title {
+      font-size: 14px;
+      margin-bottom: 8px;
+      opacity: 0.8;
+    }
+    .value {
+      font-size: 24px;
+      // font-weight: bold;
+      display: flex;
+      align-items: flex-end;
+    }
+    .value span {
+      margin-right: 15px;
+    }
+    .icon {
+      width: 40px;
+      height: 40px;
+      background: rgba(29, 214, 255, 0.1);
+      border-radius: 5px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .compare {
+      font-size: 12px;
+      margin-top: 4px;
+      color: #4ee44e; /* 绿色标识增长 */
+      padding-top: 20px;
+      display: flex;
+      align-items: center;
+      // justify-content: center;
+    }
+    .target {
+      font-size: 12px;
+      margin-top: 4px;
+      opacity: 0.8;
+    }
+  }
+  .centerPage_map {
+    width: 100%;
+    height: 80%;
+  }
+}
+</style>

src/views/largeScreen/components/header.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="header">
+    <div class="header_left">
+      <div class="header_left_img">
+        <img src="@/assets/large/secure.png" style="width: 100%; height: 100%" />
+      </div>
+      <div style="font-size: 12px; padding-left: 10px">安全生产天数：</div>
+      <div class="header_left_text">
+        1,235
+        <span style="font-size: 12px">天</span>
+      </div>
+    </div>
+    <div class="title">
+      <div class="title_text">智慧运维管理平台</div>
+      <div>Intelligent Operations Management Platform</div>
+    </div>
+    <div class="right">
+      <div class="top-bar">
+        <!-- 左侧：天气图标 + 日期文字 -->
+        <div class="left-section">
+          <img src="@/assets/large/weather.png" alt="天气图标" />
+
+          <span>
+            <span>多云 9°/18°</span>
+            <span style="padding-left: 20px"> {{ week[date.week] }} {{ date.ymd }}</span>
+          </span>
+        </div>
+        <!-- 分割线 -->
+        <div class="divider">
+          <div class="top-block"></div>
+          <div class="bottom-block"></div>
+        </div>
+        <!-- 右侧：管理系统图标 + 文字 -->
+        <div class="right-section">
+          <img src="@/assets/large/setting.png" alt="设置图标" />
+          <span>管理系统</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+const date = ref({
+  ymd: '',
+  hms: '',
+  week: 0
+});
+const setTime = () => {
+  let date1 = new Date();
+  let year: any = date1.getFullYear();
+  let month: any = date1.getMonth() + 1;
+  let day: any = date1.getDate();
+  let hours: any = date1.getHours();
+  if (hours < 10) {
+    hours = '0' + hours;
+  }
+  let minutes: any = date1.getMinutes();
+  if (minutes < 10) {
+    minutes = '0' + minutes;
+  }
+  let seconds: any = date1.getSeconds();
+  if (seconds < 10) {
+    seconds = '0' + seconds;
+  }
+  date.value.ymd = year + '-' + month + '-' + day;
+  date.value.hms = hours + ':' + minutes + ':' + seconds;
+  date.value.week = date1.getDay();
+};
+// 添加定时器，每秒更新一次时间
+const timer = setInterval(setTime, 1000);
+// 组件卸载时清除定时器
+onUnmounted(() => {
+  clearInterval(timer);
+});
+</script>
+
+<style scoped lang="scss">
+.header {
+  width: 100%;
+  height: 80px;
+  box-sizing: border-box;
+  padding: 10px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  color: #fff;
+}
+.header_left {
+  display: flex;
+  align-items: center;
+  .header_left_img {
+    width: 48px;
+    height: 48px;
+    box-sizing: border-box;
+    // padding-right: 10px;
+  }
+  .header_left_text {
+    font-weight: 500;
+    text-shadow: 0px 1.24px 6.21px rgba(25, 179, 250, 1);
+  }
+}
+.title {
+  color: #fff;
+  font-family: 'Rang_men_zheng_title', sans-serif;
+  text-align: center;
+}
+.title > div:first-child {
+  /* 第一个子元素的样式 */
+  font-size: 38px;
+  //   font-weight: 300;
+}
+
+.title > div:last-child {
+  /* 最后一个子元素的样式 */
+  font-size: 14px;
+  letter-spacing: 0.3em; /* 调整这个值来控制间距大小 */
+}
+.right {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+/* 顶部栏容器：Flex 水平布局 + 垂直居中 */
+.top-bar {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  //   background-color: #1e2128;
+  color: #fff;
+  padding: 8px 16px;
+  font-size: 14px;
+}
+/* 左侧区域（天气 + 日期）：自身也用 Flex 水平排列，确保元素在一行 */
+.left-section {
+  display: flex;
+  align-items: center;
+  //   margin-right: auto; /* 让右侧元素（管理系统）居右 */
+}
+.left-section img {
+  width: 32px;
+  height: 32px;
+  margin-right: 8px; /* 图标与文字间距 */
+}
+/* 分割线（视觉分隔，可根据需求调整样式） */
+.divider {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  height: 100%; /* 根据需要调整高度 */
+  padding: 15px 10px;
+}
+
+.divider .top-block {
+  width: 3px;
+  height: 7px;
+  background: #19b5fb;
+  align-self: start;
+}
+
+.divider .bottom-block {
+  width: 3px;
+  height: 7px;
+  background: #19b5fb;
+  align-self: end;
+}
+/* 右侧区域（管理系统）：图标 + 文字水平排列 */
+.right-section {
+  display: flex;
+  align-items: center;
+  font-family: 'Rang_men_zheng_title', sans-serif;
+  font-size: 20px;
+}
+.right-section img {
+  width: 20px;
+  height: 20px;
+  margin-right: 6px; /* 图标与文字间距 */
+}
+</style>

src/views/largeScreen/components/leftPage.vue

@@ -0,0 +1,616 @@
+<template>
+  <div class="left_page">
+    <div class="power">
+      <div class="left_title">
+        <div style="display: flex; align-items: center">
+          <div class="left_title_img">
+            <img src="@/assets/large/power.png" alt="" />
+          </div>
+          <div class="left_title_text">电站总览</div>
+        </div>
+      </div>
+      <div class="left_title_list">
+        <div class="left_title_item">
+          <div>总装机容量</div>
+          <div>
+            <span style="font-size: 24px; color: rgba(29, 214, 255, 1); padding-right: 10px">{{ data?.capacity ?? '0' }}</span>
+            <span style="color: rgba(156, 163, 175, 1)">MW</span>
+          </div>
+          <div style="display: flex; align-items: center" v-if="Number(data?.capacity) - Number(data.capacityOld) != 0">
+            <el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.capacity) - Number(data.capacityOld) > 0"><Top /></el-icon>
+            <el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
+            <span style="letter-spacing: 0.1em; color: rgba(0, 227, 150, 1)"
+              >{{ (Math.abs(Number(data?.capacity) - Number(data.capacityOld)) / Number(data?.capacity)) * 100 }}%较上月</span
+            >
+          </div>
+          <div v-else>无</div>
+        </div>
+        <div class="left_title_item">
+          <div>光伏板数量</div>
+          <div>
+            <span style="font-size: 24px; color: rgba(29, 214, 255, 1); padding-right: 10px">{{ data?.module ?? '0' }}</span>
+            <span style="color: rgba(156, 163, 175, 1)">块</span>
+          </div>
+          <div style="display: flex; align-items: center">
+            <!-- <el-icon><Top /></el-icon>
+            <span style="letter-spacing: 0.1em; color: rgba(0, 227, 150, 1)">2.4%较上月</span> -->
+            <span style="letter-spacing: 0.1em; color: rgba(156, 163, 175, 1)">- -</span>
+          </div>
+        </div>
+        <div class="left_title_item">
+          <div>升压站数量</div>
+          <div>
+            <span style="font-size: 24px; color: rgba(29, 214, 255, 1); padding-right: 10px">{{ data?.operatingRate ?? '0' }}</span>
+            <span style="color: rgba(156, 163, 175, 1)">座</span>
+          </div>
+          <div style="display: flex; align-items: center" v-if="Number(data?.operatingRate) - Number(data?.operatingRateOld) != 0">
+            <el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.operatingRate) - Number(data?.operatingRateOld) > 0"><Top /></el-icon>
+
+            <el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
+            <span style="letter-spacing: 0.1em; color: rgba(0, 227, 150, 1)"
+              >{{ Math.abs(Number(data?.operatingRate) - Number(data?.operatingRateOld)) }}座{{
+                Number(data?.operatingRate) - Number(data?.operatingRateOld) > 0 ? '新增' : '减少'
+              }}</span
+            >
+          </div>
+          <div v-else>无</div>
+        </div>
+      </div>
+    </div>
+    <div style="box-sizing: border-box; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; margin-top: 5px">
+      <div class="inverter">
+        <div class="left_title">
+          <div style="display: flex; align-items: center">
+            <div class="left_title_img">
+              <img src="@/assets/large/monitor.png" alt="" />
+            </div>
+            <div class="left_title_text">逆变器监控</div>
+          </div>
+        </div>
+        <div class="selectTime">
+          <div class="tab-container">
+            <div class="tab active" @click="switchTab(1)">日</div>
+            <div class="tab" @click="switchTab(2)">月</div>
+            <div class="tab" @click="switchTab(3)">年</div>
+            <!-- <div class="tab" @click="switchTab(4)">总</div> -->
+          </div>
+          <el-date-picker
+            v-model="value1"
+            type="date"
+            placeholder="请选择"
+            size="small"
+            style="width: 120px"
+            @change="changeTime"
+            value-format="YYYY-MM-DD"
+            v-if="active == 1"
+          />
+
+          <el-date-picker
+            v-model="value2"
+            type="month"
+            placeholder="请选择"
+            size="small"
+            style="width: 120px"
+            @change="changeTime"
+            value-format="YYYY-MM"
+            v-if="active == 2"
+          />
+          <el-date-picker
+            v-model="value3"
+            type="year"
+            placeholder="请选择"
+            size="small"
+            style="width: 120px"
+            @change="changeTime"
+            value-format="YYYY"
+            v-if="active == 3"
+          />
+        </div>
+        <div class="bix">运行状态</div>
+        <div class="chart-container">
+          <div ref="chart" style="width: 100%; height: 50px"></div>
+        </div>
+        <div class="left_title">
+          <div style="display: flex; align-items: center">
+            <div class="left_title_img">
+              <img src="@/assets/large/Inversion.png" alt="" />
+            </div>
+            <div class="left_title_text1">逆变器运行曲线</div>
+          </div>
+        </div>
+        <div class="date_select">
+          <el-select v-model="value" clearable placeholder="请选择" style="width: 120px; margin-left: 20px" size="small">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </div>
+      </div>
+      <div class="brokenLine">
+        <EchartBoxTwo :option="lineOption" ref="lineChart"></EchartBoxTwo>
+      </div>
+      <div class="left_title">
+        <div style="display: flex; align-items: center">
+          <div class="left_title_img">
+            <img src="@/assets/large/income.png" alt="" />
+          </div>
+          <div class="left_title_text">能源收益分析</div>
+        </div>
+      </div>
+
+      <div class="income">
+        <EchartBoxTwo :option="barOption" ref="barChart"></EchartBoxTwo>
+      </div>
+      <div class="income_list">
+        <div style="display: flex; justify-content: space-between">
+          <div style="width: 50%">累计收益</div>
+          <div style="width: 50%; color: rgba(29, 214, 255, 1)">￥{{ Number(data2.allInCome).toFixed(2) }}</div>
+        </div>
+        <div style="display: flex">
+          <div style="width: 50%">本月收益</div>
+
+          <div style="width: 50%; color: rgba(0, 227, 150, 1)">￥{{ Number(data2.monthInCome).toFixed(2) }}</div>
+        </div>
+        <div style="display: flex">
+          <div style="width: 50%">度电成本</div>
+
+          <div style="width: 50%; color: rgba(54, 207, 201, 1)">￥{{ Number(data2.price).toFixed(2) }}</div>
+        </div>
+        <div style="display: flex">
+          <div style="width: 50%">预计年收入</div>
+          <div style="width: 50%; color: rgba(179, 0, 255, 1)">￥{{ Number(data2.yearInCome).toFixed(2) }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import * as echarts from 'echarts';
+import EchartBoxTwo from '@/components/EchartBox/index.vue';
+import { formatDate } from '@/utils/index';
+import { getLineOption, getBarOptions } from './optionList';
+import { getPowerStationOverview, getStationMonthOverview, getInverterListOverview } from '@/api/large/index';
+
+// 直接在组件内部定义数据
+const chartData = ref({
+  normal: '', // 正常设备数量
+  abnormal: '', // 异常设备数量
+  fault: '' // 故障设备数量
+});
+const value1: any = ref('');
+
+const value2: any = ref('');
+const value3: any = ref('');
+const value = ref('1');
+const options = [
+  {
+    value: '1',
+    label: '交流有功功率'
+  }
+];
+const active: any = ref('1');
+const data = ref<any>({});
+
+const getDataList = () => {
+  getPowerStationOverview().then((res) => {
+    if (res.code == 200) {
+      data.value = res.data;
+    }
+  });
+};
+getDataList();
+const changeTime = () => {
+  getEnergyData();
+  getInverterData();
+};
+const data2 = ref<any>({});
+const getEnergyData = () => {
+  let date: any;
+  if (active.value == 2) {
+    date = value2.value;
+    value3.value = '';
+    value1.value = '';
+  } else if (active.value == 3) {
+    date = value3.value;
+    value1.value = '';
+    value2.value = '';
+  }
+
+  const today = new Date();
+  const formattedDate = `${today.getFullYear()}-${today.getMonth() + 1}`;
+
+  const params = {
+    type: active.value == 1 ? 2 : active.value,
+    date: date ? date : formattedDate
+  };
+  getStationMonthOverview(params).then((res) => {
+    if (res.code == 200) {
+      getTurnoverList(res.data.data);
+      data2.value = res.data;
+    }
+  });
+};
+const data3 = ref<any>({});
+const getInverterData = () => {
+  let date: any;
+  if (active.value == 1) {
+    date = value1.value;
+    value2.value = '';
+    value3.value = '';
+  } else if (active.value == 2) {
+    date = value2.value;
+    value3.value = '';
+    value1.value = '';
+  } else if (active.value == 3) {
+    date = value3.value;
+    value1.value = '';
+    value2.value = '';
+  }
+
+  const today = new Date();
+  const formattedDate = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;
+
+  const params = {
+    type: active.value,
+    date: date ? date : formattedDate
+  };
+  getInverterListOverview(params).then((res) => {
+    if (res.code == 200) {
+      pedestrianFlow(res.data.data);
+      chartData.value.fault = res.data.fault ?? 0;
+      chartData.value.normal = res.data.normal ?? 0;
+      chartData.value.abnormal = res.data.offline ?? 0;
+      renderChart();
+    }
+  });
+};
+const switchTab = (tabNumber: number) => {
+  const tabs = document.querySelectorAll('.tab');
+  tabs.forEach((tab) => tab.classList.remove('active'));
+  // 给对应数值的标签添加active类（索引=数值-1）
+  tabs[tabNumber - 1].classList.add('active');
+  // 可以根据数值执行不同的操作
+  active.value = tabNumber;
+
+  // getInverterData();
+};
+
+const chart = ref<HTMLElement | null>(null);
+let chartInstance: echarts.ECharts | null = null;
+const totalAll = ref(0);
+// 计算百分比数据（处理0值不占位）
+const calculatePercentages = () => {
+  const { normal, abnormal, fault } = chartData.value;
+
+  const total = Number(normal) + Number(abnormal) + Number(fault);
+  totalAll.value = total;
+
+  if (total === 0) {
+    return {
+      normal: 0,
+      abnormal: 0,
+      fault: 0
+    };
+  }
+
+  return {
+    normal: Number(normal) ?? 0,
+    abnormal: Number(abnormal) ?? 0,
+    fault: Number(fault) ?? 0
+  };
+};
+const lineOption = ref({});
+const barOption = ref({});
+
+const pedestrianFlow = (data?: any) => {
+  const xData = data.map((item) => item.time);
+  const yData = data.map((item) => item.content);
+  const lineData = {
+    xLabel: xData,
+    line1: yData
+    // line2: ['20', '50', '12', '65', '30', '60']
+  };
+
+  lineOption.value = getLineOption(lineData);
+};
+const getTurnoverList = (data?: any) => {
+  const xData = data.map((item) => item.time);
+  const yData = data.map((item) => {
+    // 先将content转换为数字，再调用toFixed
+    const num = Number(item.content);
+    return isNaN(num) ? 0 : Number(num.toFixed(2));
+  });
+
+  const barData = {
+    name: xData,
+    value: yData
+  };
+  barOption.value = getBarOptions(barData);
+};
+// 初始化图表
+const initChart = () => {
+  if (!chart.value) return;
+  chartInstance = echarts.init(chart.value);
+
+  getEnergyData();
+  getInverterData();
+  // pedestrianFlow();
+  // getTurnoverList();
+};
+
+// 渲染图表逆变器柱状图
+const renderChart = () => {
+  // if (!chartInstance) return;
+  const percentages = calculatePercentages();
+
+  const option: echarts.EChartsOption = {
+    tooltip: {
+      trigger: 'item',
+      formatter: (params: any) => {
+        return `${params.marker} ${params.seriesName}: ${params.value}台`;
+      }
+    },
+    legend: {
+      orient: 'horizontal',
+      right: 10,
+      top: 0,
+      data: [
+        { name: '正常', icon: 'circle' },
+        { name: '异常', icon: 'circle' },
+        { name: '故障', icon: 'circle' }
+      ],
+      textStyle: {
+        color: '#fff',
+        fontSize: 12
+      }
+    },
+    grid: {
+      left: '-3%',
+      right: '3%',
+      top: '30px',
+      bottom: '3%'
+      // containLabel: true
+    },
+    xAxis: {
+      type: 'value',
+      max: totalAll.value,
+      axisLabel: {
+        formatter: '{value}%',
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisLine: { show: false }, // 隐藏轴线
+      axisTick: { show: false } // 隐藏刻度
+    },
+    yAxis: {
+      type: 'category',
+      show: false,
+      data: ['设备状态分布']
+    },
+    series: [
+      {
+        name: '正常',
+        type: 'bar',
+        stack: 'total',
+        data: [percentages.normal],
+        barWidth: 10,
+        itemStyle: {
+          color: 'rgba(0, 227, 150, 1)'
+        },
+        label: {
+          show: false,
+          position: 'insideLeft',
+          // formatter: `{c}%`,
+          color: '#fff',
+          fontWeight: 'bold'
+        }
+      },
+      {
+        name: '异常',
+        type: 'bar',
+        stack: 'total',
+        data: [percentages.abnormal],
+        barWidth: 10,
+        itemStyle: {
+          color: 'rgba(255, 171, 0, 1)'
+        },
+        label: {
+          show: false,
+          position: 'inside',
+          // formatter: `{c}%`,
+          color: '#fff',
+          fontWeight: 'bold'
+        }
+      },
+      {
+        name: '故障',
+        type: 'bar',
+        stack: 'total',
+        data: [percentages.fault],
+        barWidth: 10,
+        itemStyle: {
+          color: 'rgba(255, 77, 79, 1)'
+        },
+        label: {
+          show: false,
+          position: 'insideRight',
+          // formatter: `{c}%`,
+          color: '#fff',
+          fontWeight: 'bold'
+        }
+      }
+    ]
+  };
+
+  chartInstance.setOption(option);
+};
+const lineChart = ref();
+
+onMounted(() => {
+  initChart();
+  window.addEventListener('resize', () => chartInstance?.resize());
+});
+</script>
+
+<style scoped lang="scss">
+.left_page {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0 10px 0 10px;
+}
+.power {
+  width: 100%;
+  // height: 20%;
+  box-sizing: border-box;
+  padding: 0 10px 10px 10px;
+  border: 1px solid rgba(29, 214, 255, 0.1);
+  border-radius: 10px;
+  .left_title_list {
+    width: 100%;
+    // padding-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .left_title_item {
+      width: 30%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      // align-items: center;
+      justify-content: space-between;
+      background-color: rgba(29, 214, 255, 0.1);
+      border-radius: 10px;
+      padding: 10px;
+      box-sizing: border-box;
+
+      :deep(.el-icon .top-icon) {
+        font-weight: bold;
+      }
+    }
+    .left_title_item > div:first-child {
+      /* 第一个子元素的样式 */
+      font-size: 12px;
+      padding-bottom: 5px;
+    }
+    .left_title_item > div:nth-child(2) {
+      /* 第二个子元素的样式 */
+      padding-bottom: 5px;
+      /* 添加其他需要的样式 */
+    }
+    .left_title_item > div:last-child {
+      /* 第一个子元素的样式 */
+      font-size: 12px;
+    }
+  }
+}
+.left_title {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 0;
+  .left_title_img {
+    height: 20px;
+    width: 20px;
+  }
+  .left_title_text {
+    font-size: 20px;
+    font-family: 'Rang_men_zheng_title', sans-serif;
+    display: flex;
+    align-items: flex-end;
+    margin-left: 15px;
+    padding-top: 2px;
+    box-sizing: border-box;
+  }
+  .left_title_text1 {
+    font-size: 14px;
+    display: flex;
+    align-items: flex-end;
+    margin-left: 15px;
+    padding-top: 2px;
+    box-sizing: border-box;
+    color: #fff;
+  }
+}
+.tab-container {
+  display: flex;
+  // gap: 4px;
+  font-size: 12px;
+  margin-right: 20px;
+}
+.tab {
+  padding: 4px;
+  border: 0.1px solid rgba(10, 79, 84, 1);
+  // border-radius: 6px;
+  cursor: pointer;
+  background-color: transparent;
+  // font-family: Arial, sans-serif;
+  transition: all 0.2s ease;
+}
+.tab.active {
+  background-color: #3b93fd;
+  color: white;
+
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.tab:hover:not(.active) {
+  background-color: #3b93fd;
+}
+img {
+  width: 100%;
+  height: 100%;
+}
+.inverter {
+  width: 100%;
+  position: relative;
+  // height: 10%;
+  .selectTime {
+    position: absolute;
+    right: 0;
+    top: 12px;
+    display: flex;
+    align-items: center;
+  }
+  .bix {
+    position: absolute;
+    font-size: 12px;
+    color: rgba(156, 163, 175, 1);
+    top: 50px;
+  }
+  .date_select {
+    position: absolute;
+    top: 100px;
+    right: 0;
+    z-index: 9;
+  }
+}
+.chart-container {
+  width: 100%;
+  height: 50px;
+}
+.brokenLine {
+  width: 100%;
+  height: 23vh;
+  // margin-top: 10px;
+}
+.income {
+  width: 100%;
+  height: 24vh;
+  // margin-top: 20px;
+}
+.income_list {
+  width: 100%;
+  height: 7vh;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  align-items: center; /* 垂直居中 */
+  // grid-gap: 10px;
+  // background-color: rgba(29, 214, 255, 0.1);
+  // border-radius: 10px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+</style>

src/views/largeScreen/components/optionList.ts

@@ -0,0 +1,735 @@
+import * as echarts from 'echarts/core';
+// import { PictorialBarChart } from 'echarts/charts'
+// 客流量图
+export const getOption = (xData: any, yData: any) => {
+  const data = {
+    xData,
+    yData
+  };
+  const maxData = Math.ceil(Math.max(...data.yData));
+  const barData = data.yData.map((item) => {
+    return maxData;
+  });
+  const option = {
+    grid: {
+      top: '10%',
+      left: '8%',
+      right: '5%',
+      bottom: '20%'
+      // containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: data.xData,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: true
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#fff'
+        }
+      }
+    },
+    yAxis: {
+      show: true,
+      type: 'value',
+      max: maxData,
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'solid',
+          color: 'rgba(73, 169, 191, 0.2)'
+        }
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: '',
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    dataZoom: [
+      {
+        // show: true,
+        start: 0,
+        end: 30,
+        bottom: 2, // 下滑块距离x轴底部的距离
+        height: 23
+      },
+      {
+        type: 'inside'
+      }
+    ],
+    series: [
+      {
+        name: '柱图',
+        type: 'bar',
+        // barWidth: '10%',
+        data: barData,
+        tooltip: {
+          show: false
+        },
+        barGap: '-50%',
+        itemStyle: {
+          normal: {
+            color: 'rgba(73, 169, 191, 0.2)'
+          }
+        }
+      },
+      {
+        name: '客单价',
+        type: 'line',
+        showAllSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        lineStyle: {
+          normal: {
+            color: 'rgba(217, 231, 255, 0.3)',
+            shadowColor: 'rgba(0, 0, 0, .3)',
+            shadowBlur: 0
+            // shadowOffsetY: 5,
+            // shadowOffsetX: 5,
+          }
+        },
+        itemStyle: {
+          color: 'rgba(224, 194, 22, 1)',
+          borderWidth: 0,
+          shadowBlur: 0
+        },
+        label: {
+          show: false, // 显示数据标签
+          color: 'rgba(255, 208, 59, 1)'
+        },
+        data: data.yData
+      }
+    ]
+  };
+  return option;
+};
+
+// 上菜分析图
+export const getOption2 = (data: any) => {
+  const maxData = Math.max(...data.yData);
+  const option = {
+    // backgroundColor: "#38445E",
+    grid: {
+      left: '10%',
+      top: '13%',
+      bottom: '16%',
+      right: '10%'
+    },
+    xAxis: {
+      data: data.xData,
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(255, 129, 109, 0.1)',
+          width: 1 //这里是为了突出显示加上的
+        }
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#999',
+          fontSize: 12
+        }
+      }
+    },
+    yAxis: [
+      {
+        splitNumber: 2,
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(255, 129, 109, 0.1)',
+            width: 1 //这里是为了突出显示加上的
+          }
+        },
+        axisLabel: {
+          textStyle: {
+            color: '#999'
+          }
+        },
+        splitArea: {
+          areaStyle: {
+            color: 'rgba(255,255,255,.5)'
+          }
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(255,255,255,.5)',
+            width: 0.5,
+            type: 'dashed'
+          }
+        }
+      }
+    ],
+    dataZoom: [
+      {
+        // show: true,
+
+        start: 0,
+        end: 30,
+        bottom: 2, // 下滑块距离x轴底部的距离
+        height: 23
+      },
+      {
+        type: 'inside'
+      }
+    ],
+    tooltip: {
+      trigger: 'axis', // 设置为 'item'，表示鼠标悬浮在图形上时显示 tooltip
+      // formatter: function (params) {
+      //   return `订单数: ${params.data}` // 显示鼠标悬浮项的数量
+      // },
+      backgroundColor: '', // 设置提示框的背景颜色
+      textStyle: {
+        color: '#fff' // 设置文字颜色
+        // fontSize: 14 // 设置文字大小
+      }
+    },
+    series: [
+      {
+        name: '订单数',
+        type: 'pictorialBar',
+        barCategoryGap: '0%',
+        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
+        label: {
+          show: false,
+          position: 'top',
+          distance: 15,
+          color: 'rgba(255, 235, 59, 1)',
+          // fontWeight: "bolder",
+          fontSize: 16
+        },
+        itemStyle: {
+          normal: {
+            // color: {
+            //   type: "linear",
+            //   x: 0,
+            //   y: 0,
+            //   x2: 0,
+            //   y2: 1,
+            //   colorStops: [
+            //     {
+            //       offset: 0,
+            //       color: "rgba(232, 94, 106, .8)", //  0%  处的颜色
+            //     },
+            //     {
+            //       offset: 1,
+            //       color: "rgba(232, 94, 106, .1)", //  100%  处的颜色
+            //     },
+            //   ],
+            //   global: false, //  缺省为  false
+            // },
+            color: function (params: any) {
+              if (params.data === maxData) {
+                return 'rgba(255, 219, 103, 0.6)';
+              } else {
+                return 'rgba(239, 244, 255, 0.45)';
+              }
+            }
+          },
+          emphasis: {
+            opacity: 1
+          }
+        },
+        data: data.yData,
+        z: 10
+      }
+    ]
+  };
+  return option;
+};
+//食堂周报图
+export const getLineOption = (lineData: any) => {
+  const maxData = Math.ceil(Math.max(...lineData.line1));
+  const option = {
+    backgroundColor: '',
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'transparent',
+      color: '#7ec7ff',
+      textStyle: {
+        color: '#fff'
+      },
+      borderColor: '#7ec7ff'
+    },
+    // legend: {
+    //   align: 'left',
+    //   right: '5%',
+    //   top: '1%',
+    //   type: 'plain',
+    //   textStyle: {
+    //     color: '#fff',
+    //     fontSize: 12
+    //   },
+    //   // icon:'rect',
+    //   itemGap: 15,
+    //   itemWidth: 18,
+    //   data: [
+    //     {
+    //       name: '上周销售量'
+    //     },
+    //     {
+    //       name: '本周销售量'
+    //     }
+    //   ]
+    // },
+    grid: {
+      top: '12%',
+      left: '1%',
+      right: '3%',
+      bottom: '12%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: lineData.xLabel,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: true
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#fff'
+        }
+      }
+    },
+    yAxis: {
+      show: true,
+      type: 'value',
+      max: maxData,
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'solid',
+          color: 'rgba(73, 169, 191, 0.2)'
+        }
+      }
+    },
+    dataZoom: [
+      {
+        // show: true,
+        start: 0,
+        end: 30,
+        bottom: 2, // 下滑块距离x轴底部的距离
+        height: 23
+      },
+      {
+        type: 'inside'
+      }
+    ],
+    series: [
+      {
+        name: '逆变器功率',
+        type: 'line',
+        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+        showAllSymbol: false,
+        symbolSize: 0,
+        smooth: true,
+        lineStyle: {
+          width: 1,
+          color: 'rgba(80, 164, 225, 1)', // 线条颜色
+          borderColor: 'rgba(0,0,0,.4)'
+        },
+        itemStyle: {
+          color: 'rgba(80, 164, 225, 1)',
+          borderWidth: 2,
+          show: false
+        },
+        tooltip: {
+          show: true
+        },
+        areaStyle: {
+          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: 'rgba(80, 164, 225, 0.4)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(80, 164, 225, 0)'
+              }
+            ],
+            false
+          ),
+          shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
+          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        },
+        data: lineData.line1
+      }
+    ]
+  };
+  return option;
+};
+//#endregion
+
+// 菜品销售图
+export const getDishesOption = (data?: any) => {
+  const res = data;
+  const dataIndex = 1;
+  const option = {
+    xAxis: {
+      type: 'value',
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      }
+    },
+    yAxis: {
+      type: 'category',
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        margin: 10 // 增大标签与轴线间距
+      },
+      width: 60, // 增大Y轴宽度
+      data: res.name,
+      axisLine: {
+        lineStyle: {
+          color: '#93C9C3'
+        }
+      }
+    },
+    grid: {
+      top: '5%', // 设置网格区域与容器之间的边距
+      bottom: '5%', // 同理
+      left: '5%',
+      containLabel: true
+    },
+    series: [
+      {
+        type: 'bar',
+        data: res.ratio,
+        barMaxWidth: 25,
+        itemStyle: {
+          barBorderRadius: 3,
+          color: 'rgba(12, 242, 216, 0.2)'
+        },
+        label: {
+          show: false
+        }
+      },
+      {
+        type: 'bar',
+        data: res.data,
+        barGap: '-100%',
+        barMaxWidth: 25,
+        itemStyle: {
+          barBorderRadius: 3,
+          color: function (params: any) {
+            if (params.data <= 300) {
+              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { color: 'rgba(252, 105, 0, 1)', offset: 0 },
+                { color: 'rgba(250, 42, 42, 1)', offset: 1 }
+              ]);
+            } else {
+              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { color: 'rgba(73, 169, 191, 1)', offset: 0 },
+                { color: 'rgba(108, 248, 236, 1)', offset: 1 }
+              ]);
+            }
+          }
+        },
+        label: {
+          show: true,
+          position: [200, -15],
+          formatter: function (params: any) {
+            if (params.data <= 300) {
+              return `{a| ${params.value}g/${res.ratio[params.dataIndex]}g}`;
+            } else {
+              return `{b| ${params.value}g/${res.ratio[params.dataIndex]}g}`;
+            }
+          },
+          rich: {
+            a: {
+              color: 'rgba(255, 78, 51, 1)'
+            },
+            b: {
+              color: 'rgba(255, 235, 59, 1)'
+            }
+          }
+        }
+      }
+    ]
+  };
+  return option;
+};
+// 菜品库存图
+export const getInventoryOption = () => {
+  const res = {
+      data: [2800, 300, 3900, 3000, 2450, 2670, 3320],
+      name: ['麻辣牛肉', '水煮肉片', '酸菜鱼', '辣子鸡丁', '烧白', '冬瓜排骨汤', '清炒油麦菜'],
+      ratio: [4000, 4000, 4000, 4000, 4000, 4000, 4000]
+    },
+    dataIndex = 1;
+  const option = {
+    xAxis: {
+      type: 'value',
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      }
+    },
+    yAxis: {
+      type: 'category',
+      show: false,
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        margin: 10 // 增大标签与轴线间距
+      },
+      width: 20, // 增大Y轴宽度
+      data: res.name,
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: '#93C9C3'
+        }
+      }
+    },
+    grid: {
+      top: '5%', // 设置网格区域与容器之间的边距
+      bottom: '5%', // 同理
+      left: '5%',
+      containLabel: true
+    },
+    series: [
+      {
+        type: 'bar',
+        data: res.ratio,
+        barMaxWidth: 6,
+        itemStyle: {
+          barBorderRadius: 3,
+          color: 'rgba(12, 242, 216, 0.2)'
+        },
+        label: {
+          show: true,
+          position: [0, -15],
+          fontSize: 14,
+          color: '#fff',
+          formatter: function (params: any) {
+            return params.name;
+          }
+          // rich: {
+          //   a: {
+          //     color: "rgba(255, 78, 51, 1)",
+          //   },
+          //   b: {
+          //     color: "rgba(255, 235, 59, 1)",
+          //   },
+          // },
+        }
+      },
+      {
+        type: 'bar',
+        data: res.data,
+        barGap: '-100%',
+        barMaxWidth: 6,
+        itemStyle: {
+          barBorderRadius: 0,
+          color: function (params: any) {
+            if (params.dataIndex === dataIndex) {
+              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { color: 'rgba(255, 78, 51, 1)', offset: 0 },
+                { color: 'rgba(252, 105, 0, 0)', offset: 1 }
+              ]);
+            } else {
+              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { color: 'rgba(242, 224, 27, 1)', offset: 0 },
+                { color: 'rgba(236, 227, 127, 0.55)', offset: 0.5 },
+                { color: 'rgba(230, 229, 227, 0.1)', offset: 1 }
+              ]);
+            }
+          }
+        },
+        label: {
+          show: true,
+          position: [200, -15],
+          formatter: function (params: any) {
+            if (params.dataIndex === dataIndex) {
+              return `{a| ${params.value}g}`;
+            } else {
+              return `{b| ${params.value}g}`;
+            }
+          },
+          rich: {
+            a: {
+              color: 'rgba(255, 78, 51, 1)'
+            },
+            b: {
+              color: 'rgba(255, 235, 59, 1)'
+            }
+          }
+        }
+      }
+    ]
+  };
+  return option;
+};
+export const getBarOptions = (data: any) => {
+  const option = {
+    backgroundColor: '',
+    grid: {
+      left: '7%',
+      top: '10%',
+      bottom: '23%',
+      right: '2%'
+    },
+    tooltip: {
+      show: true,
+      backgroundColor: '',
+      trigger: 'axis',
+      formatter: '{b0}：{c0}万元',
+      textStyle: {
+        color: '#fff'
+      }
+      // borderColor: 'rgba(252, 217, 18, 1)'
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: data.name,
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(108, 128, 151, 0.3)'
+          }
+        },
+        axisLabel: {
+          textStyle: {
+            color: '#999',
+            fontSize: 12
+          }
+        },
+        axisTick: {
+          // show: true,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(108, 128, 151, 0.3)',
+            type: 'dashed'
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        axisLabel: {
+          formatter: function (value) {
+            if (value >= 1000) {
+              value = (value / 1000).toFixed(1) + 'k'; // 大于等于1000的数字显示为1k、2.5k等
+            }
+            return value;
+          },
+          color: 'rgba(255, 255, 255, 0.8)'
+        },
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(108, 128, 151, 0.3)'
+          }
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(108, 128, 151, 0.3)',
+            type: 'dashed'
+          }
+        }
+      }
+    ],
+    dataZoom: [
+      {
+        // show: true,
+        start: 0,
+        end: 30,
+        bottom: 2, // 下滑块距离x轴底部的距离
+        height: 23
+      },
+      {
+        type: 'inside'
+      }
+    ],
+    series: [
+      {
+        type: 'bar',
+        data: data.value,
+        stack: '合并',
+        barWidth: '15',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: 'rgba(0, 111, 255, 0)' // 0% 处的颜色
+              },
+              {
+                offset: 0.7,
+                color: 'rgba(0, 111, 255, 0.5)' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(0, 111, 255, 1)' // 100% 处的颜色
+              }
+            ],
+            false
+          )
+        },
+        label: {
+          show: true,
+          formatter: '{c}',
+          position: 'top',
+          color: '#fff',
+          fontSize: 10
+          // padding: 5
+        }
+      }
+      // {
+      //   type: 'bar',
+      //   stack: '合并',
+      //   data: topData,
+      //   barWidth: '15',
+      //   itemStyle: {
+      //     color: 'rgba(252, 217, 18, 1)'
+      //   }
+      // }
+    ]
+  };
+  return option;
+};

src/views/largeScreen/components/rightPage.vue

@@ -0,0 +1,442 @@
+<template>
+  <div class="rightPage">
+    <div class="alarm-container">
+      <!-- 顶部标题栏 -->
+      <div class="header">
+        <img src="@/assets/large/right1.png" style="width: 17px; height: 18px" alt="" />
+        <span class="title">告警信息中心</span>
+        <!-- <el-badge :value="unhandledCount" class="unhandled-badge" type="danger"> {{ unhandledCount }}条未处理 </el-badge> -->
+        <span class="jgao">{{ alarmData.length }}条信息未处理</span>
+      </div>
+      <!-- 告警卡片列表（可循环渲染，这里演示单条） -->
+      <div class="alarm_list">
+        <el-card class="alarm-card" shadow="hover" v-for="(item, index) in alarmData" :key="index">
+          <div class="card-header">
+            <img src="@/assets/large/right2.png" style="width: 15px; height: 15px" alt="" />
+            <span class="card-title">{{ item.alarmMsg }}</span>
+            <span class="time">{{ formatDate(item.alarmBeginTime) }}</span>
+          </div>
+          <div class="card-content">
+            {{ item.advice }}
+          </div>
+          <div class="card-footer">
+            <el-tag type="danger" size="small">紧急</el-tag>
+            <el-tag type="danger" size="small">处理</el-tag>
+          </div>
+        </el-card>
+      </div>
+    </div>
+
+    <div class="overview">
+      <div class="left_title">
+        <div style="display: flex; align-items: center">
+          <div class="left_title_img">
+            <img src="@/assets/large/right4.png" alt="" />
+          </div>
+          <div class="left_title_text">项目概述</div>
+        </div>
+      </div>
+      <div class="overview_content">
+        <div>项目名称：田东光伏智慧生态工地开发项目</div>
+        <div>项目位置：广西壮族自治区百色市田东县平马镇东宁东路97号百通</div>
+        <div>项目位置：广西壮族自治区百色市田东县平马镇东宁东路97号百通</div>
+        <div>占地面积：约10000亩</div>
+        <div>土地性质：城镇住宅用地（兼容商业用地，容积率≤2.5）</div>
+        <div>建设单位：这里是建设单位的名称</div>
+        <div>项目类型：集中式光伏电站</div>
+        <div>总装机容量：200MW</div>
+      </div>
+    </div>
+    <div class="monitor">
+      <div class="left_title">
+        <div style="display: flex; align-items: center">
+          <div class="left_title_img">
+            <img src="@/assets/large/right3.png" alt="" />
+          </div>
+          <div class="left_title_text">设备状态监控</div>
+        </div>
+      </div>
+      <div class="stats-container">
+        <div class="container_item" v-for="(item, index) in deviceStats" :key="index">
+          <div class="container_item_one">
+            <div class="container_item_one_box">
+              <div class="box_img">
+                <img src="@/assets/large/right6.png" style="width: 20px; height: 20px" />
+              </div>
+              <div class="box_text">
+                <div>{{ item.name }}</div>
+                <div style="font-size: 12px">{{ item.total }}块</div>
+              </div>
+            </div>
+            <div class="card-right">
+              <div class="progress-top">
+                <span
+                  class="progress-percent"
+                  :class="{
+                    green1: item.rate >= 99, // 可根据需求调整颜色规则
+                    orange1: item.rate < 99 && item.rate >= 90
+                  }"
+                  >{{ item.rate }}%</span
+                >
+              </div>
+              <div class="progress-bg">
+                <div
+                  class="progress-fg"
+                  :style="{ width: item.rate + '%' }"
+                  :class="{
+                    green: item.rate >= 99, // 可根据需求调整颜色规则
+                    orange: item.rate < 99 && item.rate >= 90
+                  }"
+                ></div>
+              </div>
+            </div>
+          </div>
+          <div class="container_item_two">
+            <div>正常{{ item.normal }}台</div>
+
+            <div>异常{{ item.abnormal }}台</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { getAlarmListOverview } from '@/api/large';
+import { formatDate } from '@/utils/index';
+
+const alarmData: any = ref({});
+const deviceStats = ref([
+  {
+    name: '光伏组件',
+    icon: '../../../assets/large/right5.png', // 示例图标
+    total: '25,680',
+    unit: '块',
+    rate: 99.2,
+    normal: '25,472',
+    abnormal: 208
+  },
+  {
+    name: '逆变器',
+    icon: '@/assets/large/right6.png',
+    total: '1,246',
+    unit: '台',
+    rate: 98.6,
+    normal: '1,230',
+    abnormal: 16
+  },
+  {
+    name: '汇流箱',
+    icon: '@/assets/large/right7.png',
+    total: '128',
+    unit: '台',
+    rate: 100,
+    normal: '128',
+    abnormal: 0
+  },
+  {
+    name: '变压器',
+    icon: '@/assets/large/right8.png',
+    total: '32',
+    unit: '台',
+    rate: 96.8,
+    normal: '31',
+    abnormal: 1
+  },
+  {
+    name: '通信设备',
+    icon: '@/assets/large/right9.png',
+    total: '246',
+    unit: '台',
+    rate: 95.2,
+    normal: '234',
+    abnormal: 12
+  }
+]);
+const getAlarm = () => {
+  getAlarmListOverview().then((res) => {
+    console.log(res);
+    alarmData.value = res.data;
+  });
+};
+getAlarm();
+</script>
+
+<style scoped lang="scss">
+.rightPage {
+  width: 100%;
+  height: 100%;
+}
+
+.alarm-container {
+  border: 1px solid #1e2b3d; /* 深色背景模拟，可替换成项目背景 */
+  border-radius: 8px;
+  color: #fff;
+  // box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  padding: 10px;
+}
+
+/* 顶部标题栏 */
+.header {
+  display: flex;
+  align-items: center;
+}
+.title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #fff;
+  margin-left: 8px;
+}
+.unhandled-badge {
+  margin-left: auto; /* 右对齐 */
+}
+.jgao {
+  font-size: 12px;
+  color: #f56c6c;
+  background: rgba(255, 77, 79, 0.2);
+  padding: 5px 6px;
+  border-radius: 10px;
+  margin-left: auto; /* 右对齐 */
+}
+.alarm_list {
+  width: 100%;
+  padding: 5px 0;
+  height: 14vh;
+  overflow-y: auto; /* 垂直方向超出时显示滚动条 */
+}
+// 滚动条优化
+.alarm_list::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+.alarm_list::-webkit-scrollbar-thumb {
+  background-color: #0ff !important;
+  border-radius: 5px;
+}
+.alarm_list::-webkit-scrollbar-track {
+  background-color: rgba(0, 255, 255, 0.2);
+}
+/* 告警卡片 */
+.alarm-card {
+  background: rgba(12, 30, 53, 0.3);
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  border: 1px solid #f56c6c;
+  margin-top: 10px;
+}
+.card-header {
+  display: flex;
+  align-items: center;
+  // justify-content: space-between;
+  margin-bottom: 12px;
+}
+.card-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #f56c6c;
+  margin-left: 10px;
+}
+.time {
+  font-size: 12px;
+  color: #909399;
+  margin-left: auto; /* 右对齐 */
+}
+.card-content {
+  font-size: 13px;
+  color: #dcdfe6;
+  margin-bottom: 12px;
+  line-height: 1.6;
+}
+.card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.left_title {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 0;
+  .left_title_img {
+    height: 20px;
+    width: 20px;
+  }
+  .left_title_text {
+    font-size: 20px;
+    font-family: 'Rang_men_zheng_title', sans-serif;
+    display: flex;
+    align-items: flex-end;
+    margin-left: 15px;
+    padding-top: 2px;
+    box-sizing: border-box;
+  }
+  .left_title_text1 {
+    font-size: 14px;
+    display: flex;
+    align-items: flex-end;
+    margin-left: 15px;
+    padding-top: 2px;
+    box-sizing: border-box;
+    color: #fff;
+  }
+}
+img {
+  width: 100%;
+  height: 100%;
+}
+.overview {
+  width: 100%;
+  height: 28vh;
+  padding: 10px;
+  border-radius: 10px;
+  border: 1px solid #1e2b3d;
+  margin-top: 20px;
+
+  .overview_content {
+    height: 80%;
+    width: 100%;
+    font-size: 14px;
+    line-height: 30px;
+    overflow-y: auto; /* 垂直方向超出时显示滚动条 */
+  }
+  // 滚动条优化
+  .overview_content::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+  .overview_content::-webkit-scrollbar-thumb {
+    background-color: #0ff !important;
+    border-radius: 5px;
+  }
+  .overview_content::-webkit-scrollbar-track {
+    background-color: rgba(0, 255, 255, 0.2);
+  }
+}
+.monitor {
+  width: 100%;
+  height: 39vh;
+  border: 1px solid #1e2b3d;
+  margin-top: 20px;
+  padding: 10px;
+  border-radius: 10px;
+
+  .stats-container {
+    width: 100%; /* 可根据实际场景调整宽度 */
+    height: 87%;
+    padding: 10px;
+    border-radius: 8px;
+    box-sizing: border-box;
+    overflow-y: auto; /* 垂直方向超出时显示滚动条 */
+    .container_item {
+      width: 100%;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .container_item_one {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        .container_item_one_box {
+          width: 50%;
+          display: flex;
+          .box_img {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            background: rgba(12, 30, 53, 0.6);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          .box_text {
+            color: rgba(156, 163, 175, 1);
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            padding-left: 10px;
+            // align-items: center;
+          }
+        }
+        /* 右侧区域：进度条 + 数据 */
+        .card-right {
+          display: flex;
+
+          margin-left: 10px;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .progress-top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-right: 6px;
+          font-size: 14px;
+        }
+        .progress-percent {
+          font-weight: bold;
+        }
+        .abnormal {
+          color: #ff9900; /* 异常数据颜色 */
+        }
+        .progress-bg {
+          height: 6px;
+          background-color: rgba(255, 255, 255, 0.2);
+          border-radius: 3px;
+          overflow: hidden;
+          margin-bottom: 4px;
+          width: 100px;
+          text-align: right;
+        }
+        .progress-fg {
+          height: 100%;
+          width: 100px;
+          transition: width 0.3s;
+        }
+        /* 进度条颜色区分（可扩展更多规则） */
+        .green {
+          background-color: #28a745;
+        }
+        .orange {
+          background-color: #ffc107;
+        }
+        .green1 {
+          color: #28a745;
+        }
+        .orange1 {
+          color: #ffc107;
+        }
+      }
+    }
+    .container_item_two {
+      width: 90%;
+      height: 100%;
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 0;
+      margin-left: auto;
+      color: rgba(156, 163, 175, 1);
+      font-size: 12px;
+    }
+  }
+
+  // 滚动条优化
+  .stats-container::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  .stats-container::-webkit-scrollbar-thumb {
+    background-color: #0ff;
+    border-radius: 5px;
+  }
+
+  .stats-container::-webkit-scrollbar-track {
+    background-color: rgba(0, 255, 255, 0.2);
+  }
+}
+</style>

src/views/largeScreen/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="large-screen">
+    <Header />
+    <div class="nav">
+      <div class="nav_left">
+        <leftPage />
+      </div>
+      <div class="nav_center">
+        <centerPage />
+      </div>
+      <div class="nav_right">
+        <rightPage />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Header from './components/header.vue';
+import leftPage from './components/leftPage.vue';
+import centerPage from './components/centerPage.vue';
+import rightPage from './components/rightPage.vue';
+import '@/assets/styles/element.scss';
+</script>
+
+<style scoped lang="scss">
+.large-screen {
+  width: 100vw;
+  height: 100vh;
+  background: url('@/assets/large/bg.png') no-repeat;
+  background-size: 100% 100%;
+  background-color: rgba(4, 7, 17, 1);
+}
+.nav {
+  width: 100%;
+  height: calc(100vh - 80px);
+  box-sizing: border-box;
+  //   padding: 10px;
+  display: grid;
+  grid-template-columns: 1fr 2fr 1fr;
+  color: #fff;
+}
+</style>

src/views/materialManagement/components/DataAnalysis.vue

@@ -0,0 +1,234 @@
+<template>
+    <div class="dashboard-container">
+        <!-- 第一个图表：本月出入库统计 -->
+        <div class="chart-item">
+            <div class="title">
+                本月出入库统计
+            </div>
+            <div ref="lineChartRef" class="chart-container"></div>
+        </div>
+
+        <!-- 第二个图表：出入库类型分布 -->
+        <div class="chart-item">
+            <div class="title">
+                出入库类型分布
+            </div>
+            <div ref="barChartRef" class="chart-container"></div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+// 图表容器引用
+const lineChartRef = ref(null);
+const barChartRef = ref(null);
+
+// 图表实例
+let lineChart = null;
+let barChart = null;
+
+onMounted(() => {
+    // 初始化折线图
+    initLineChart();
+    // 初始化柱状图
+    initBarChart();
+
+    // 监听窗口大小变化，自适应图表
+    window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+    // 销毁图表实例
+    if (lineChart) {
+        lineChart.dispose();
+    }
+    if (barChart) {
+        barChart.dispose();
+    }
+
+    // 移除事件监听
+    window.removeEventListener('resize', handleResize);
+});
+
+// 初始化折线图
+const initLineChart = () => {
+    if (lineChartRef.value) {
+        lineChart = echarts.init(lineChartRef.value);
+
+        const option = {
+            tooltip: {
+                trigger: 'axis'
+            },
+            legend: {
+                data: ['入库数量', '出库数量'],
+                icon: 'circle',
+                itemWidth: 10,
+                itemHeight: 10,
+                top: 0
+            },
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+            },
+            xAxis: {
+                type: 'category',
+                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
+            },
+            yAxis: {
+                type: 'value'
+            },
+            series: [
+                {
+                    name: '入库数量',
+                    type: 'line',
+                    data: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
+                    symbol: 'none',
+                    smooth: true,
+                    lineStyle: {
+                        color: 'rgba(22, 93, 255, 1)'
+                    },
+                    itemStyle: {
+                        color: 'rgba(22, 93, 255, 1)'
+                    },
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(22, 93, 255, 0.2)' },
+                            { offset: 1, color: 'rgba(22, 93, 255, 0)' }
+                        ])
+                    }
+                },
+                {
+                    name: '出库数量',
+                    type: 'line',
+                    data: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90],
+                    symbol: 'none',
+                    smooth: true,
+                    lineStyle: {
+                        color: 'rgba(255, 153, 0, 1)'
+                    },
+                    itemStyle: {
+                        color: 'rgba(255, 153, 0, 1)'
+                    },
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(59, 179, 70, 0.2)' },
+                            { offset: 1, color: 'rgba(59, 179, 70, 0)' }
+                        ])
+                    }
+                }
+            ]
+        };
+
+        lineChart.setOption(option);
+    }
+};
+
+// 初始化柱状图
+const initBarChart = () => {
+    if (barChartRef.value) {
+        barChart = echarts.init(barChartRef.value);
+
+        const option = {
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                }
+            },
+            legend: {
+                data: ['入库数量', '出库数量'],
+                icon: 'circle',
+                itemWidth: 10,
+                itemHeight: 10,
+                top: 0
+            },
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+            },
+            xAxis: {
+                type: 'category',
+                data: ['电器部件', '机械部件', '电子元件', '控制模块', '结构部件', '其他'],
+                axisLabel: {
+                    interval: 0, // 强制显示所有标签
+                    rotate: 30, // 标签旋转30度
+                    margin: 15, // 增加与轴线的距离
+                    align: 'right', // 文字右对齐
+                    verticalAlign: 'top' // 垂直方向顶部对齐
+                }
+            },
+            yAxis: {
+                type: 'value'
+            },
+            series: [
+                {
+                    name: '入库数量',
+                    type: 'bar',
+                    data: [650, 480, 510, 280, 650, 220],
+                    itemStyle: {
+                        color: 'rgba(22, 93, 255, 1)' // 入库数量颜色
+                    },
+                    barWidth: '45%',
+                    barGap: '0' // 柱子之间的间距
+
+                },
+                {
+                    name: '出库数量',
+                    type: 'bar',
+                    data: [850, 400, 770, 590, 540, 310],
+                    itemStyle: {
+                        color: 'rgba(15, 198, 194, 1)' // 出库数量颜色
+                    },
+                    barWidth: '45%',
+                    barGap: '0' // 柱子之间的间距
+                }
+            ]
+        };
+
+        barChart.setOption(option);
+    }
+};
+
+// 处理窗口大小变化，让图表自适应
+const handleResize = () => {
+    if (lineChart) {
+        lineChart.resize();
+    }
+    if (barChart) {
+        barChart.resize();
+    }
+};
+</script>
+
+<style scoped>
+.dashboard-container {
+    padding: 20px;
+}
+
+.chart-item {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.title {
+    color: rgba(29, 33, 41, 1);
+    font-weight: bold;
+    font-size: 16px;
+    margin-bottom: 16px;
+}
+
+.chart-container {
+    width: 100%;
+    height: 300px;
+}
+</style>

src/views/materialManagement/components/DetailsProcess.vue

@@ -0,0 +1,146 @@
+<template>
+    <div class="approval-process-container">
+        <div class="approval-process-card">
+            <h2>审批流程</h2>
+            <!-- 时间线组件：展示审批步骤 -->
+            <el-timeline class="custom-timeline">
+                <!-- 步骤1：创建采购单 -->
+                <el-timeline-item timestamp="11月1日 10:18" placement="top" :icon="renderCustomIcon('/assets/yes.png')"
+                    color="green" type="danger" class="timeline-item">
+                    <h3 style="color: rgba(24, 109, 245, 1);font-weight: bold;">创建采购单</h3>
+                    <p>申请人张三：提交采购单</p>
+                    <p>计划：Q2风电轴承采购计划</p>
+                    <p>附件：<a href="#" class="attachment-link">一个图片.jpg</a></p>
+                </el-timeline-item>
+
+                <!-- 步骤2：审批未通过 -->
+                <el-timeline-item timestamp="11月1日 10:18" placement="top" :icon="renderCustomIcon('/assets/no.png')"
+                    color="red" class="timeline-item">
+                    <h3 style="color: rgba(24, 109, 245, 1);font-weight: bold;">审批未通过</h3>
+                    <p>部门经理李四：审批不通过</p>
+                    <p>计划：Q2风电轴承采购计划</p>
+                    <p>不通过原因：</p>
+                    <ul class="reason-list">
+                        <li>1. 出货时间过长</li>
+                        <li>2. 单价高于市场价</li>
+                        <li>3. 损耗重新评估</li>
+                        <li>4. 付款方式更改</li>
+                        <li>5. 发票开具方式更改</li>
+                    </ul>
+                </el-timeline-item>
+
+                <!-- 步骤3：未进行（财务主管） -->
+                <el-timeline-item timestamp="" placement="top" :icon="renderCustomIcon('/assets/re.png')" color="gray"
+                    class="timeline-item">
+                    <h3>未进行</h3>
+                    <p>财务主管王五：</p>
+                    <p>计划：Q2风电轴承采购计划</p>
+                    <p>备注：——</p>
+                </el-timeline-item>
+
+                <!-- 步骤4：未进行（总经理） -->
+                <el-timeline-item timestamp="" placement="top" :icon="renderCustomIcon('/assets/re.png')" color="gray"
+                    class="timeline-item">
+                    <h3>未进行</h3>
+                    <p>总经理赵六：</p>
+                    <p>计划：Q2风电轴承采购计划</p>
+                    <p>备注：——</p>
+                </el-timeline-item>
+            </el-timeline>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { Check, Close, Clock } from '@element-plus/icons-vue'; // 引入Element Plus图标
+
+const renderCustomIcon = (iconSrc) => {
+    return h('img', { src: iconSrc, class: 'custom-icon' });
+};
+
+</script>
+
+<style scoped>
+.approval-process-container {
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    /* padding: 40px 20px; */
+}
+
+.approval-process-card {
+    padding: 30px;
+    width: 100%;
+    max-width: 800px;
+    transition: transform 0.3s ease;
+}
+
+.approval-process-card:hover {
+    transform: translateY(-5px);
+}
+
+h2 {
+    margin-bottom: 30px;
+    font-size: 24px;
+    color: #333;
+    text-align: center;
+    position: relative;
+}
+
+h2::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 3px;
+    background-color: #409eff;
+}
+
+.custom-timeline {
+    margin-top: 20px;
+}
+
+.timeline-item {
+    margin-bottom: 25px;
+    transition: all 0.3s ease;
+}
+
+.timeline-item:hover {
+    transform: translateX(5px);
+}
+
+.el-timeline-item__content {
+    padding-top: 15px;
+    background-color: rgba(255, 255, 255, 0.8);
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+}
+
+ul.reason-list {
+    margin: 0;
+    padding-left: 20px;
+    color: red;
+    list-style: none;
+}
+
+li {
+    margin: 8px 0;
+    line-height: 1.6;
+}
+
+.attachment-link {
+    color: #409eff;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    display: inline-block;
+}
+
+.attachment-link:hover {
+    text-decoration: underline;
+    transform: translateY(-2px);
+}
+</style>

src/views/materialManagement/components/SystemInfo.vue

@@ -0,0 +1,142 @@
+<template>
+    <div class="bill-list">
+        <!-- 循环渲染单据列表 -->
+        <div v-for="(bill, index) in billList" :key="index" class="bill-item">
+            <!-- 左侧图标 + 单据类型 + 编号 -->
+            <div class="left">
+                <div class="icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                        height="40" viewBox="0 0 40 40" fill="none">
+                        <circle cx="20" cy="20" r="20" fill="#186DF5"></circle>
+                        <path fill="rgba(255, 255, 255, 1)"
+                            d="M15.1666 18.3333L15.1666 22.5L14.1666 22.5L14.1666 21.5L25.8333 21.5L25.8333 22.5L24.8333 22.5L24.8333 18.3333L25.8333 18.3333L24.8333 18.3333C24.8333 15.664 22.6693 13.5 20 13.5L20 13.5C17.3306 13.5 15.1666 15.664 15.1666 18.3333L15.1666 18.3333ZM13.1666 18.3333L14.1666 18.3333L13.1666 18.3333C13.1666 14.5594 16.226 11.5 20 11.5L20 12.5L20 11.5C23.7739 11.5 26.8333 14.5594 26.8333 18.3333L26.8333 18.3333L26.8333 22.5L25.8333 23.5L14.1666 23.5L13.1666 22.5L13.1666 18.3333ZM13.1666 22.5L14.1666 22.5L14.1666 23.5C13.8921 23.4961 13.6564 23.3985 13.4595 23.2071C13.2681 23.0102 13.1705 22.7745 13.1666 22.5ZM25.8333 23.5L25.8333 22.5L26.8333 22.5C26.8294 22.7745 26.7318 23.0102 26.5404 23.2071C26.3435 23.3985 26.1078 23.4961 25.8333 23.5Z">
+                        </path>
+                        <path fill="rgba(255, 255, 255, 1)"
+                            d="M13.5 23.75C13.5 23.8881 13.6119 24 13.75 24L13.75 25L13.75 24L26.25 24L26.25 25L26.25 24C26.3881 24 26.5 23.8881 26.5 23.75L27.5 23.75L26.5 23.75C26.5 23.6119 26.3881 23.5 26.25 23.5L26.25 23.5L13.75 23.5L13.75 22.5L13.75 23.5C13.6119 23.5 13.5 23.6119 13.5 23.75L13.5 23.75ZM11.5 23.75L12.5 23.75L11.5 23.75C11.5 22.5074 12.5074 21.5 13.75 21.5L13.75 21.5L26.25 21.5L26.25 22.5L26.25 21.5C27.4926 21.5 28.5 22.5074 28.5 23.75L28.5 23.75C28.5 24.9926 27.4926 26 26.25 26L26.25 26L13.75 26L13.75 26C12.5074 26 11.5 24.9926 11.5 23.75Z">
+                        </path>
+                        <path stroke="rgba(255, 255, 255, 1)" stroke-width="2" stroke-linejoin="round"
+                            stroke-linecap="round"
+                            d="M22.5 25C22.5 26.3807 21.3807 27.5 20 27.5C18.6193 27.5 17.5 26.3807 17.5 25"></path>
+                    </svg>
+                </div>
+                <div class="info">
+                    <div class="type">{{ bill.type }}</div>
+                    <div class="number">{{ bill.number }}</div>
+                </div>
+            </div>
+            <!-- 右侧时间 + 状态 -->
+            <div class="right">
+                <div class="time">{{ bill.time }}</div>
+                <div class="status" :class="{
+                    'approved': bill.status === '审批通过',
+                    'pending': bill.status === '待审批'
+                }">
+                    {{ bill.status }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 定义单据数据
+const billList = ref([
+    {
+        type: '出库单',
+        number: 'IN-2023-0615-001',
+        time: '10月20日 12:00:06',
+        status: '审批通过'
+    },
+    {
+        type: '入库单',
+        number: 'IN-2023-0615-001',
+        time: '10月20日 12:00:06',
+        status: '待审批'
+    },
+    {
+        type: '入库单',
+        number: 'IN-2023-0615-001',
+        time: '10月20日 12:00:06',
+        status: '待审批'
+    },
+    {
+        type: '入库单',
+        number: 'IN-2023-0615-001',
+        time: '10月20日 12:00:06',
+        status: '待审批'
+    },
+    {
+        type: '入库单',
+        number: 'IN-2023-0615-001',
+        time: '10月20日 12:00:06',
+        status: '待审批'
+    }
+]);
+</script>
+<style scoped>
+.bill-list {
+    display: flex;
+    flex-direction: column;
+    margin-top: 10px;
+    /* gap: 1rem; */
+    /* padding: 1rem; */
+}
+
+.bill-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    /* padding: 0.5rem; */
+    padding: 10px;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.left {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.info {
+    display: flex;
+    flex-direction: column;
+}
+
+.type {
+    font-weight: 600;
+}
+
+.number {
+    font-size: 0.875rem;
+    color: #6b7280;
+}
+
+.right {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+.time {
+    font-size: 0.875rem;
+    color: #6b7280;
+}
+
+.status {
+    font-size: 0.875rem;
+    /* padding: 0.25rem 0.5rem; */
+    border-radius: 0.25rem;
+}
+
+.approved {
+    color: #10b981;
+    /* background-color: rgba(16, 185, 129, 0.1); */
+}
+
+.pending {
+    color: #f59e0b;
+    /* background-color: rgba(245, 158, 11, 0.1); */
+}
+</style>

src/views/materialManagement/components/detailInfo.vue

@@ -0,0 +1,257 @@
+<template>
+    <div class="approval-form">
+        <!-- 基础信息 -->
+        <el-card class="card" shadow="hover">
+            <template #header>
+                <h3>基础信息</h3>
+            </template>
+            <el-form :model="basicInfo" label-width="120px">
+                <el-row :gutter="20">
+                    <el-col :span="8">
+                        <el-form-item label="订单编号">
+                            <el-input v-model="basicInfo.orderNo" disabled />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="创建时间">
+                            <el-input v-model="basicInfo.createTime" disabled />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="经办人">
+                            <el-input v-model="basicInfo.handler" disabled />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item label="所属部门">
+                            <el-select v-model="basicInfo.dept" placeholder="请选择">
+                                <el-option label="运维部" value="运维部" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="采购类型">
+                            <el-select v-model="basicInfo.purchaseType" placeholder="请选择">
+                                <el-option label="项目业务" value="项目业务" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-form-item label="申请原因">
+                    <el-input v-model="basicInfo.applyReason" type="textarea" :rows="2" placeholder="请输入申请原因" />
+                </el-form-item>
+            </el-form>
+        </el-card>
+
+        <!-- 供应商信息 -->
+        <el-card class="card" shadow="hover" style="margin-top: 20px">
+            <template #header>
+                <h3>供应商信息</h3>
+            </template>
+            <el-form :model="supplierInfo" label-width="120px">
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item label="供应商单位">
+                            <el-select v-model="supplierInfo.supplierName" placeholder="请选择">
+                                <el-option label="AAAA精密仪器制造有限公司" value="AAAA精密仪器制造有限公司" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="出货时间">
+                            <el-select v-model="supplierInfo.deliveryTime" placeholder="请选择">
+                                <el-option label="2年零4个月" value="2年零4个月" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                    <el-col :span="24">
+                        <el-form-item label="审批备注" prop="remark">
+                            <el-input v-model="supplierInfo.remark" :rows="1" placeholder="请输入审批备注"
+                                style="border: 1px solid red;color: red;" readonly value="1. 出货时间较长" />
+                            <!-- <div class="error-tip">1. 出货时间较长</div> -->
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+        </el-card>
+
+        <!-- 产品信息 -->
+        <el-card class="card" shadow="hover" style="margin-top: 20px">
+            <template #header>
+                <h3>产品信息</h3>
+            </template>
+            <el-table :data="productInfo.tableData" border style="width: 100%">
+                <el-table-column prop="productName" label="产品名称" />
+                <el-table-column prop="productModel" label="产品型号" />
+                <el-table-column prop="productPrice" label="产品单价" align="center" :cell-style="{ background: 'pink' }" />
+                <el-table-column prop="buyQuantity" label="购买数量" align="center" :cell-style="{ background: 'pink' }" />
+                <el-table-column prop="usage" label="用途" />
+                <el-table-column prop="total" label="合计" />
+            </el-table>
+            <el-form-item label="审批备注" style="margin-top: 10px">
+                <el-input v-model="productInfo.remark" :rows="1" placeholder="请输入审批备注"
+                    style="border: 1px solid red;color: red;" readonly value="2. 单价高于市场价3.采购数量需重新评估" />
+                <!-- <div class="error-tip">2. 单价高于市场价3.采购数量需重新评估</div> -->
+            </el-form-item>
+        </el-card>
+
+        <!-- 合同条款 -->
+        <el-card class="card" shadow="hover" style="margin-top: 20px">
+            <template #header>
+                <h3>合同条款</h3>
+            </template>
+            <el-form :model="contractInfo" label-width="120px">
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item label="付款条件">
+                            <el-select v-model="contractInfo.paymentCondition" placeholder="请选择">
+                                <el-option label="银行卡" value="银行卡" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="发票开具方式">
+                            <el-select v-model="contractInfo.invoiceWay" placeholder="请选择">
+                                <el-option label="请选择" value="请选择" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                    <el-col :span="24">
+                        <el-form-item label="审批备注" prop="remark">
+                            <el-input v-model="contractInfo.remark" placeholder="请输入审批备注"
+                                style="border: 1px solid red;color: red;" readonly value="4. 付款方式未标明5.发票开具方式未标明" />
+                            <!-- <div class="error-tip">4. 付款方式未标明5.发票开具方式未标明</div> -->
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+        </el-card>
+
+        <!-- 附件 -->
+        <el-card class="card" shadow="hover" style="margin-top: 20px">
+            <template #header>
+                <h3>附件</h3>
+            </template>
+            <el-upload class="upload-demo" action="#" :file-list="fileList" :auto-upload="false"
+                :on-preview="handlePreview">
+                <el-table :data="fileList" border style="width: 100%">
+                    <el-table-column prop="name" label="文件名" width="300" />
+                    <el-table-column prop="size" label="大小" width="100" />
+                    <el-table-column label="操作" width="100">
+                        <template #default="scope">
+                            <!-- <el-link type="primary" @click="handlePreview(scope.row)"> -->
+                            <el-link type="primary">
+                                预览
+                            </el-link>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-upload>
+        </el-card>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 基础信息数据
+const basicInfo = ref({
+    orderNo: '0035455',
+    createTime: '2023-11-02 16:32',
+    handler: '李四',
+    dept: '运维部',
+    purchaseType: '项目业务',
+    applyReason:
+        '随着业务拓展，光伏电站业务负责增加，现有设备已运行5年，部分出现效率下降情况。为保证电站正常运行，计划采购一批新的逆变器替换老旧设备，并补充备件库存。',
+});
+
+// 供应商信息数据
+const supplierInfo = ref({
+    supplierName: 'AAAA精密仪器制造有限公司',
+    deliveryTime: '2年零4个月',
+    remark: '',
+});
+
+// 产品信息数据
+const productInfo = ref({
+    tableData: [
+        {
+            productName: 'AAABBBCCC',
+            productModel: '15-42',
+            productPrice: 500,
+            buyQuantity: 10,
+            usage: '组件',
+            total: 5000,
+        },
+    ],
+    remark: '',
+});
+
+// 合同条款数据
+const contractInfo = ref({
+    paymentCondition: '银行卡',
+    invoiceWay: '请选择',
+    remark: '',
+});
+
+// 附件数据
+const fileList = ref([
+    {
+        name: 'MWwwwww.jpg',
+        size: '30kb',
+        url: '',
+    },
+    {
+        name: '231234124w.zip',
+        size: '50kb',
+        url: '',
+    },
+    {
+        name: '12451asdas.doc',
+        size: '80kb',
+        url: '',
+    },
+    {
+        name: '21seasda.xls',
+        size: '29kb',
+        url: '',
+    },
+    {
+        name: '12kjaklskw.png',
+        size: '16kb',
+        url: '',
+    },
+]);
+
+// 预览文件
+const handlePreview = (file) => {
+    console.log('预览文件：', file);
+    // 实际场景可在这里处理文件预览逻辑，如打开新窗口等
+};
+</script>
+
+<style scoped>
+.approval-form {
+    padding: 20px;
+}
+
+.card {
+    border-radius: 8px;
+}
+
+.error-tip {
+    color: red;
+    font-size: 12px;
+    margin-top: 5px;
+}
+
+::v-deep(.el-input__inner) {
+    color: red;
+}
+</style>