diff --git a/SafeCampus.WEB/components.d.ts b/SafeCampus.WEB/components.d.ts
index 84a8379..fb733d8 100644
--- a/SafeCampus.WEB/components.d.ts
+++ b/SafeCampus.WEB/components.d.ts
@@ -12,6 +12,7 @@ declare module 'vue' {
     500: typeof import('./src/components/ErrorMessage/500.vue')['default']
     CheckCard: typeof import('./src/components/CheckCard/index.vue')['default']
     ChooseModule: typeof import('./src/components/ChooseModule/index.vue')['default']
+    ClassUserselector: typeof import('./src/components/Selectors/ClassUserselector/index.vue')['default']
     CodeHighLight: typeof import('./src/components/CodeHighLight/index.vue')['default']
     ColSetting: typeof import('./src/components/ProTable/components/ColSetting.vue')['default']
     CropUpload: typeof import('./src/components/CropUpload/index.vue')['default']
@@ -19,13 +20,14 @@ declare module 'vue' {
     ECharts: typeof import('./src/components/ECharts/index.vue')['default']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
-    ElBadge: typeof import('element-plus/es')['ElBadge']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -38,14 +40,21 @@ declare module 'vue' {
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElLink: typeof import('element-plus/es')['ElLink']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSpace: typeof import('element-plus/es')['ElSpace']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
@@ -54,9 +63,11 @@ declare module 'vue' {
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
+    ElText: typeof import('element-plus/es')['ElText']
+    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
     ESign: typeof import('./src/components/ESign/index.vue')['default']
     FormContainer: typeof import('./src/components/Form/FormContainer/index.vue')['default']
     Grid: typeof import('./src/components/Grid/index.vue')['default']
diff --git a/SafeCampus.WEB/package.json b/SafeCampus.WEB/package.json
index b435dea..3edfa30 100644
--- a/SafeCampus.WEB/package.json
+++ b/SafeCampus.WEB/package.json
@@ -52,6 +52,7 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
+    "pinyin-pro": "^3.24.2",
     "print-js": "^1.6.0",
     "qs": "^6.11.2",
     "screenfull": "^6.0.2",
diff --git a/SafeCampus.WEB/pnpm-lock.yaml b/SafeCampus.WEB/pnpm-lock.yaml
index 528e024..766581a 100644
--- a/SafeCampus.WEB/pnpm-lock.yaml
+++ b/SafeCampus.WEB/pnpm-lock.yaml
@@ -56,6 +56,9 @@ importers:
       pinia-plugin-persistedstate:
         specifier: ^3.2.1
         version: 3.2.1(pinia@2.1.7(typescript@5.3.3)(vue@3.4.21(typescript@5.3.3)))
+      pinyin-pro:
+        specifier: ^3.24.2
+        version: 3.24.2
       print-js:
         specifier: ^1.6.0
         version: 1.6.0
@@ -167,7 +170,7 @@ importers:
         version: 3.2.5
       rollup-plugin-visualizer:
         specifier: ^5.12.0
-        version: 5.12.0(rollup@4.6.1)
+        version: 5.12.0(rollup@2.79.1)
       sass:
         specifier: ^1.71.1
         version: 1.71.1
@@ -203,16 +206,16 @@ importers:
         version: 5.3.3
       unocss:
         specifier: ^0.58.5
-        version: 0.58.5(postcss@8.4.35)(rollup@4.6.1)(vite@5.1.4(@types/node@20.14.10)(sass@1.71.1)(terser@5.19.2))
+        version: 0.58.5(postcss@8.4.35)(rollup@2.79.1)(vite@5.1.4(@types/node@20.14.10)(sass@1.71.1)(terser@5.19.2))
       unplugin-auto-import:
         specifier: ^0.17.5
-        version: 0.17.5(@vueuse/core@10.9.0(vue@3.4.21(typescript@5.3.3)))(rollup@4.6.1)
+        version: 0.17.5(@vueuse/core@10.9.0(vue@3.4.21(typescript@5.3.3)))(rollup@2.79.1)
       unplugin-icons:
         specifier: ^0.18.5
         version: 0.18.5(@vue/compiler-sfc@3.4.21)(vue-template-compiler@2.7.14)
       unplugin-vue-components:
         specifier: ^0.26.0
-        version: 0.26.0(@babel/parser@7.24.0)(rollup@4.6.1)(vue@3.4.21(typescript@5.3.3))
+        version: 0.26.0(@babel/parser@7.24.0)(rollup@2.79.1)(vue@3.4.21(typescript@5.3.3))
       unplugin-vue-setup-extend-plus:
         specifier: ^1.0.1
         version: 1.0.1
@@ -4090,6 +4093,9 @@ packages:
       typescript:
         optional: true
 
+  pinyin-pro@3.24.2:
+    resolution: {integrity: sha512-5tPyLhxT4CZ9dWqQRqm3X5ADdS18Sb2w0ranNBgr6jCrqO4O8gtfuyqG7Y6+1Mre+0n2VlhKDz+3P5oqSLrkOw==}
+
   pkcs7@0.2.3:
     resolution: {integrity: sha512-kJRwmADEQUg+qJyRgWLtpEL9q9cFjZschejTEK3GRjKvnsU9G5WWoe/wKqRgbBoqWdVSeTUKP6vIA3Y72M3rWA==}
     engines: {node: ^0.10, npm: ^1.4.6}
@@ -6867,13 +6873,13 @@ snapshots:
       estree-walker: 2.0.2
       picomatch: 2.3.1
 
-  '@rollup/pluginutils@5.1.0(rollup@4.6.1)':
+  '@rollup/pluginutils@5.1.0(rollup@2.79.1)':
     dependencies:
       '@types/estree': 1.0.0
       estree-walker: 2.0.2
       picomatch: 2.3.1
     optionalDependencies:
-      rollup: 4.6.1
+      rollup: 2.79.1
 
   '@rollup/rollup-android-arm-eabi@4.6.1':
     optional: true
@@ -7073,20 +7079,20 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@unocss/astro@0.58.5(rollup@4.6.1)(vite@5.1.4(@types/node@20.14.10)(sass@1.71.1)(terser@5.19.2))':
+  '@unocss/astro@0.58.5(rollup@2.79.1)(vite@5.1.4(@types/node@20.14.10)(sass@1.71.1)(terser@5.19.2))':
     dependencies:
       '@unocss/core': 0.58.5
       '@unocss/reset': 0.58.5
-      '@unocss/vite': 0.58.5(rollup@4.6.1)(vite@5.1.4(@types/node@20.14.10)(sass@1.71.1)(terser@5.19.2))
+      '@unocss/vite': 0.58.5(rollup@2.79.1)(vite@5.1.4(@types/node@20.14.10)(sass@1.71.1)(terser@5.19.2))
     optionalDependencies:
       vite: 5.1.4(@types/node@20.14.10)(sass@1.71.1)(terser@5.19.2)
     transitivePeerDependencies:
       - rollup
 
-  '@unocss/cli@0.58.5(rollup@4.6.1)':
+  '@unocss/cli@0.58.5(rollup@2.79.1)':
     dependencies:
       '@ampproject/remapping': 2.2.1
-      '@rollup/pluginutils': 5.1.0(rollup@4.6.1)
+      '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
       '@unocss/config': 0.58.5
       '@unocss/core': 0.58.5
       '@unocss/preset-uno': 0.58.5
@@ -7210,10 +7216,10 @@ snapshots:
     dependencies:
       '@unocss/core': 0.58.5
 
-  '@unocss/vite@0.58.5(rollup@4.6.1)(vite@5.1.4(@types/node@20.14.10)(sass@1.71.1)(terser@5.19.2))':
+  '@unocss/vite@0.58.5(rollup@2.79.1)(vite@5.1.4(@types/node@20.14.10)(sass@1.71.1)(terser@5.19.2))':
     dependencies:
       '@ampproject/remapping': 2.2.1
-      '@rollup/pluginutils': 5.1.0(rollup@4.6.1)
+      '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
       '@unocss/config': 0.58.5
       '@unocss/core': 0.58.5
       '@unocss/inspector': 0.58.5
@@ -9901,6 +9907,8 @@ snapshots:
     optionalDependencies:
       typescript: 5.3.3
 
+  pinyin-pro@3.24.2: {}
+
   pkcs7@0.2.3: {}
 
   pkcs7@1.0.4:
@@ -10176,14 +10184,14 @@ snapshots:
       serialize-javascript: 4.0.0
       terser: 5.19.2
 
-  rollup-plugin-visualizer@5.12.0(rollup@4.6.1):
+  rollup-plugin-visualizer@5.12.0(rollup@2.79.1):
     dependencies:
       open: 8.4.2
       picomatch: 2.3.1
       source-map: 0.7.4
       yargs: 17.7.1
     optionalDependencies:
-      rollup: 4.6.1
+      rollup: 2.79.1
 
   rollup@0.25.8:
     dependencies:
@@ -10905,9 +10913,9 @@ snapshots:
 
   unicorn-magic@0.1.0: {}
 
-  unimport@3.7.1(rollup@4.6.1):
+  unimport@3.7.1(rollup@2.79.1):
     dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@4.6.1)
+      '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
       acorn: 8.11.2
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
@@ -10936,10 +10944,10 @@ snapshots:
 
   universalify@2.0.0: {}
 
-  unocss@0.58.5(postcss@8.4.35)(rollup@4.6.1)(vite@5.1.4(@types/node@20.14.10)(sass@1.71.1)(terser@5.19.2)):
+  unocss@0.58.5(postcss@8.4.35)(rollup@2.79.1)(vite@5.1.4(@types/node@20.14.10)(sass@1.71.1)(terser@5.19.2)):
     dependencies:
-      '@unocss/astro': 0.58.5(rollup@4.6.1)(vite@5.1.4(@types/node@20.14.10)(sass@1.71.1)(terser@5.19.2))
-      '@unocss/cli': 0.58.5(rollup@4.6.1)
+      '@unocss/astro': 0.58.5(rollup@2.79.1)(vite@5.1.4(@types/node@20.14.10)(sass@1.71.1)(terser@5.19.2))
+      '@unocss/cli': 0.58.5(rollup@2.79.1)
       '@unocss/core': 0.58.5
       '@unocss/extractor-arbitrary-variants': 0.58.5
       '@unocss/postcss': 0.58.5(postcss@8.4.35)
@@ -10957,7 +10965,7 @@ snapshots:
       '@unocss/transformer-compile-class': 0.58.5
       '@unocss/transformer-directives': 0.58.5
       '@unocss/transformer-variant-group': 0.58.5
-      '@unocss/vite': 0.58.5(rollup@4.6.1)(vite@5.1.4(@types/node@20.14.10)(sass@1.71.1)(terser@5.19.2))
+      '@unocss/vite': 0.58.5(rollup@2.79.1)(vite@5.1.4(@types/node@20.14.10)(sass@1.71.1)(terser@5.19.2))
     optionalDependencies:
       vite: 5.1.4(@types/node@20.14.10)(sass@1.71.1)(terser@5.19.2)
     transitivePeerDependencies:
@@ -10965,15 +10973,15 @@ snapshots:
       - rollup
       - supports-color
 
-  unplugin-auto-import@0.17.5(@vueuse/core@10.9.0(vue@3.4.21(typescript@5.3.3)))(rollup@4.6.1):
+  unplugin-auto-import@0.17.5(@vueuse/core@10.9.0(vue@3.4.21(typescript@5.3.3)))(rollup@2.79.1):
     dependencies:
       '@antfu/utils': 0.7.7
-      '@rollup/pluginutils': 5.1.0(rollup@4.6.1)
+      '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
       fast-glob: 3.3.2
       local-pkg: 0.5.0
       magic-string: 0.30.5
       minimatch: 9.0.3
-      unimport: 3.7.1(rollup@4.6.1)
+      unimport: 3.7.1(rollup@2.79.1)
       unplugin: 1.7.1
     optionalDependencies:
       '@vueuse/core': 10.9.0(vue@3.4.21(typescript@5.3.3))
@@ -10995,10 +11003,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  unplugin-vue-components@0.26.0(@babel/parser@7.24.0)(rollup@4.6.1)(vue@3.4.21(typescript@5.3.3)):
+  unplugin-vue-components@0.26.0(@babel/parser@7.24.0)(rollup@2.79.1)(vue@3.4.21(typescript@5.3.3)):
     dependencies:
       '@antfu/utils': 0.7.6
-      '@rollup/pluginutils': 5.1.0(rollup@4.6.1)
+      '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
       chokidar: 3.5.3
       debug: 4.3.4
       fast-glob: 3.3.1
diff --git a/SafeCampus.WEB/src/utils/index.ts b/SafeCampus.WEB/src/utils/index.ts
index a0cbdd4..76bddd7 100644
--- a/SafeCampus.WEB/src/utils/index.ts
+++ b/SafeCampus.WEB/src/utils/index.ts
@@ -327,7 +327,7 @@ export function findItemNested(enumData: any, callValue: any, value: string, chi
 /**
  * @description 时间戳转化为日期
  * */
-export function formatDate(timestamp:number) {
+export function formatDate(timestamp: number) {
   let date = new Date(timestamp);
   let year = date.getFullYear();
   let month = "0" + (date.getMonth() + 1); // getMonth返回的月份是从0开始的
@@ -336,6 +336,29 @@ export function formatDate(timestamp:number) {
   let minutes = "0" + date.getMinutes();
   let seconds = "0" + date.getSeconds();
 
-  return year + "-" + month.substr(-2) + "-" + day.substr(-2) 
-         + " " + hours.substr(-2) + ":" + minutes.substr(-2) + ":" + seconds.substr(-2);
+  return year + "-" + month.substr(-2) + "-" + day.substr(-2) + " " + hours.substr(-2) + ":" + minutes.substr(-2) + ":" + seconds.substr(-2);
+}
+
+/**
+ * 日期格式化
+ */
+export function dateFormat(date: any, format: any) {
+  format = format || "yyyy-MM-dd hh:mm:ss";
+  if (date !== "Invalid Date") {
+    let o: any = {
+      "M+": date.getMonth() + 1, //month
+      "d+": date.getDate(), //day
+      "h+": date.getHours(), //hour
+      "m+": date.getMinutes(), //minute
+      "s+": date.getSeconds(), //second
+      "q+": Math.floor((date.getMonth() + 3) / 3), //quarter
+      S: date.getMilliseconds() //millisecond
+    };
+    if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
+    for (let k in o)
+      if (new RegExp("(" + k + ")").test(format))
+        format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
+    return format;
+  }
+  return "";
 }
diff --git a/SafeCampus.WEB/src/views/violation/portrait/detail.vue b/SafeCampus.WEB/src/views/violation/portrait/detail.vue
index 0d5e701..eeca2d6 100644
--- a/SafeCampus.WEB/src/views/violation/portrait/detail.vue
+++ b/SafeCampus.WEB/src/views/violation/portrait/detail.vue
@@ -1,50 +1,241 @@
 <template>
   <div class="roolcallDetail">
     <div class="header">
-      <div class="left">
-        <el-image
-          style="width: 100px; height: 100px"
-          src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
-          :zoom-rate="1.2"
-          :max-scale="7"
-          :min-scale="0.2"
-          :preview-src-list="['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']"
-          :initial-index="4"
-          fit="cover"
-        />
+      <div class="top">
+        <span class="title">学生档案</span> <span class="updateTime">更新时间：{{ formData.createTime }}</span>
       </div>
-      <div class="right">
+      <div class="topContent">
         <el-row>
-          <el-col :span="6">
-            <span>人员编号：{{ formData.personId }}</span></el-col
-          >
-          <el-col :span="6"
-            ><span>姓名：{{ formData.name }}</span></el-col
-          >
-          <el-col :span="6"
-            ><span>性别：{{ genderOptions[formData.gender] }}</span></el-col
+          <el-col :span="4" :offset="2">
+            <div class="left">
+              <el-image
+                class="avatar"
+                style="width: 80px; height: 80px"
+                :src="formData.faces?.[0]?.faceUrl"
+                :zoom-rate="1.2"
+                :max-scale="7"
+                :min-scale="0.2"
+                :preview-src-list="[formData.faces?.[0]?.faceUrl]"
+                :initial-index="4"
+                fit="cover"
+              />
+              <span class="name"
+                >{{ formData.name }}
+                <Male class="gender GENDER_MALE" v-if="formData.gender == 'GENDER_MALE'"></Male>
+                <Female class="gender GENDER_FEMALE" v-if="formData.gender == 'GENDER_FEMALE'"></Female>
+              </span>
+
+              <span class="personId">编号：{{ formData.personId }}</span>
+              <!-- <el-tag type="primary">学霸型</el-tag> -->
+            </div></el-col
           >
-          <el-col :span="6"
-            ><span>年龄：{{ formData.age }}</span></el-col
+          <el-col :span="16">
+            <div class="right">
+              <el-row>
+                <el-col :span="6">
+                  <span v-if="formData.name"
+                    >姓名拼音：{{ pinyin(formData.name, { toneType: "none", type: "array" }).flat().join(" ") }}</span
+                  ></el-col
+                >
+                <el-col :span="6"
+                  ><span>姓名：{{ formData.name }}</span></el-col
+                >
+
+                <el-col :span="6">
+                  <span>编号：{{ formData.personId }}</span></el-col
+                >
+
+                <el-col :span="6"
+                  ><span>性别：{{ genderOptions[formData.gender] }}</span></el-col
+                >
+                <el-col :span="6"
+                  ><span>年龄：{{ formData.age }}</span></el-col
+                >
+
+                <el-col :span="6"
+                  ><span>联系方式：{{ formData.phone }}</span>
+                </el-col>
+
+                <el-col :span="6"
+                  ><span>所属院系：{{ formData.depName }}</span>
+                </el-col>
+                <el-col :span="6"
+                  ><span>所属专业：{{ formData.majorName }}</span>
+                </el-col>
+                <el-col :span="6"
+                  ><span>所属班级：{{ formData.personSetName }}</span>
+                </el-col>
+                <el-col :span="6"
+                  ><span>寝室名称：{{ formData.dormitoryName }}</span>
+                </el-col>
+              </el-row>
+            </div></el-col
           >
-          <el-col :span="6"
-            ><span>联系方式：{{ formData.phone }}</span>
-          </el-col>
-          <el-col :span="6"><span>班级：演示一班</span> </el-col>
         </el-row>
       </div>
     </div>
     <div class="content">
-      <div ref="chartEl" style="width: 100%; height: 100%"></div>
+      <el-row>
+        <el-col :span="10" :offset="2">
+          <div class="labelAtteribute">
+            <p class="labelAtteribute-item">
+              <span class="laberAttrName">
+                <span class="icon"><svg-icon icon="ant-design:like-outlined" class="like-outlined" /></span>总评分</span
+              >
+              <span class="laberAttrValue">95分</span>
+            </p>
+            <p class="labelAtteribute-item">
+              <span class="laberAttrName">
+                <span class="icon"><svg-icon icon="ant-design:like-outlined" class="like-outlined" /></span>总学分</span
+              ><span class="laberAttrValue">93分</span>
+            </p>
+            <p class="labelAtteribute-item" v-for="(item, index) in state.laberAttrName" :key="index">
+              <span class="laberAttrName">{{ item }}：</span><span class="laberAttrValue">{{ state.laberAttrValue[index] }}</span
+              >次
+            </p>
+          </div>
+        </el-col>
+        <el-col :span="10">
+          <div ref="chartEl" style="width: 100%; height: 500px"></div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="content modeContent2">
+      <div class="titleParent">学习过程情况分析</div>
+      <el-row :gutter="40">
+        <el-col :span="9" :offset="2">
+          <div class="situation attendanceStatus">
+            <div class="top">
+              <span class="title">出勤情况分析</span>
+              <s-select v-model="state.time" :options="state.options" style="width: 100px"></s-select>
+            </div>
+            <div class="contentBox">
+              <div class="tip">
+                <span>60%出勤率，在班级中属于中等水平</span>
+              </div>
+              <div class="box">
+                <div ref="chartEl2" style="width: 100%; height: 100%"></div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="11">
+          <div class="situation schoolStatus">
+            <div class="top">
+              <span class="title">出校访学情况</span>
+              <s-select v-model="state.time" :options="state.options" style="width: 100px"></s-select>
+            </div>
+            <div class="contentBox">
+              <div class="tip">
+                <span>有3次出校访问经历，在班级中属于优秀水平</span>
+              </div>
+              <div class="box">
+                <el-table :data="tableData" style="width: 100%">
+                  <el-table-column width="40">
+                    <template #default="{ row }">
+                      <div style="display: flex; align-items: center" :row="row">
+                        <span style="display: inline-block; width: 10px; height: 10px; background: #175bfe"></span>
+                      </div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="date" label="时间" />
+                  <el-table-column prop="name" label="姓名" />
+                  <el-table-column prop="address" label="班级" />
+                  <el-table-column prop="address" label="图片" />
+                </el-table>
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="content modeContent2">
+      <el-row :gutter="40">
+        <el-col :span="20" :offset="2">
+          <div class="situation attendanceStatus">
+            <div class="top">
+              <span class="title">图书馆使用情况</span>
+              <s-select v-model="state.time" :options="state.options" style="width: 100px"></s-select>
+            </div>
+            <div class="contentBox">
+              <div class="tip">
+                <span>每周平均使用图书馆5次，周六、周日使用时间较长，与班级其他学生相较为频繁</span>
+              </div>
+              <div class="box">
+                <div ref="chartEl3" style="width: 100%; height: 100%"></div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="content modeContent2">
+      <el-row :gutter="40">
+        <el-col :span="20" :offset="2">
+          <div class="situation attendanceStatus">
+            <div class="top">
+              <span class="title">一卡通消费情况</span>
+              <s-select v-model="state.time" :options="state.options" style="width: 100px"></s-select>
+            </div>
+            <div class="contentBox">
+              <div class="tip">
+                <span>与全校学生消费情况相比较为节俭</span>
+              </div>
+              <div class="box">
+                <div ref="chartEl4" style="width: 100%; height: 100%"></div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
 <script setup lang="ts" name="ViolationPortraitDetail">
 import { userManagePersonnelApi, portraitSummaryApi } from "@/api";
+import { pinyin } from "pinyin-pro";
+import * as echarts from "echarts";
+import { dateFormat } from "@/utils";
 const route = useRoute();
 const formData = ref<any>({}); //班级人员列表
-import * as echarts from "echarts";
 const chartEl = ref(null);
+const chartEl2 = ref(null);
+const chartEl3 = ref(null);
+const chartEl4 = ref(null);
+const state: any = reactive({
+  laberAttrName: [],
+  laberAttrValue: [],
+  time: "1",
+  options: [
+    {
+      label: "本周",
+      value: "1"
+    }
+  ],
+  weekDates: []
+});
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles"
+  }
+];
 const genderOptions = ref<any>({
   GENDER_UNKNOWN: "未知",
   GENDER_MALE: "男",
@@ -55,200 +246,520 @@ const getDetail = () => {
     formData.value = res.data;
   });
   portraitSummaryApi.getStudentDetail({ id: route.query.personId }).then((res: any) => {
+    state.laberAttrName = res.data.label;
+    state.laberAttrValue = res.data.value;
     getCharts(res.data.label, res.data.value);
   });
 };
 const getCharts = (nameArr: any, valueArr: any) => {
+  let nameObj: any = [];
+  nameArr.map((item: any) => {
+    nameObj.push({
+      name: item
+      // max: 30
+    });
+  });
   const chart = echarts.init(chartEl.value);
-  const option = {
-    title: {
-      text: "人员属性标签",
-      left: "center",
-      top: "5%",
-      textStyle: {
-        color: "#000",
-        fontSize: 25
-      }
-    },
-    grid: {
-      top: "18%",
-      left: "5%",
-      right: "5%",
-      bottom: "12%"
-    },
+  let option = {
+    backgroundColor: "#fff",
+    color: ["rgba(0,183,238, 1)", "rgba(86,199,60, 1)"],
     tooltip: {
-      trigger: "axis",
-      backgroundColor: "#3A4667",
-      borderColor: "#3A4667",
-      textStyle: {
-        color: "#fff"
-      },
-      formatter: "{b} : {c}",
-      axisPointer: {
-        type: "cross",
-        crossStyle: {
-          color: "#999"
-        }
-      }
-    },
-    legend: {
-      icon: "rect",
-      top: 10,
-      right: 5,
-      itemWidth: 10,
-      itemHeight: 10,
-      textStyle: {
-        fontSize: 12, // 字体大小
-        // 			color: '#B3CFFF', // 字体颜色
-        color: "#FFEB3B"
-      }
+      show: true,
+      trigger: "item",
+      extraCssText: "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;"
     },
-    xAxis: {
-      type: "category",
-      axisPointer: {
-        type: "shadow"
-      },
-      axisLine: {
-        lineStyle: {
-          color: "rgba(112, 138, 198, 1)"
+    radar: {
+      center: ["50%", "50%"],
+      radius: "70%",
+      startAngle: 90,
+      splitNumber: 10,
+      // shape: "circle",
+      splitArea: {
+        areaStyle: {
+          color: ["#fff", "rgba(204,204,204,0.3)"].reverse()
         }
       },
       axisLabel: {
-        textStyle: {
-          color: "#333", // x轴文本颜色
-          fontSize: 12
-        }
-        // rotate:30,
+        show: false,
+        fontSize: 20,
+        color: "#000",
+        fontStyle: "normal",
+        fontWeight: "normal"
       },
-      axisTick: {
-        show: false
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#E38F8F"
+        }
       },
-      data: nameArr
-    },
-    yAxis: {
-      name: "次",
-      type: "value",
       splitLine: {
         show: true,
         lineStyle: {
-          color: "#333",
-          type: "dashed"
+          color: "#e6e6e6"
         }
       },
-      axisLabel: {
+      axisName: {
         formatter: "{value}",
-        textStyle: {
-          color: "#333", // x轴文本颜色
-          fontSize: 12
-        }
+        color: "#333"
       },
-      nameTextStyle: {
-        color: "#333",
-        fontSize: 12
-      }
+      indicator: nameObj
     },
+
     series: [
       {
-        type: "bar",
-        name: "",
-        barWidth: 27,
-        emphasis: {
-          itemStyle: {
-            color: "#7fb7e9"
+        name: "标签属性",
+        type: "radar",
+        symbol: "circle",
+        symbolSize: 9,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: "#f73131"
+              },
+              {
+                offset: 1,
+                color: "#f73131"
+              }
+            ],
+            false
+          )
+        },
+        itemStyle: {
+          color: "#f73131",
+          borderColor: "#fff",
+          borderWidth: 2
+        },
+        lineStyle: {
+          color: "#E38F8F",
+          width: 2
+        },
+        data: [valueArr]
+      }
+    ]
+  };
+
+  chart.setOption(option);
+  window.addEventListener("resize", function () {
+    chart.resize();
+  });
+};
+const getCharts2 = () => {
+  const chart2 = echarts.init(chartEl2.value);
+  var giftImageUrl =
+    "data:image/png;base64,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";
+  let option = {
+    tooltip: {
+      trigger: "item",
+      formatter: "{a} <br/>{b}: {c} ({d}%)"
+    },
+    graphic: {
+      elements: [
+        {
+          type: "image",
+          style: {
+            image: giftImageUrl,
+            width: 30,
+            height: 30
           },
-          label: {
-            textStyle: {
-              color: "#7fb7e9"
-            }
+          left: "center",
+          top: "42%"
+        }
+      ]
+    },
+    title: {
+      text: "出勤率分析",
+      left: "center",
+      top: "50%",
+      padding: [10, 0],
+
+      color: "#175BFE",
+      fontSize: 14,
+      align: "center"
+    },
+    legend: {
+      orient: "horizontal",
+      icon: "circle",
+      top: 20,
+      x: "center",
+      data: ["正常出勤", "未出勤", "请假", "其他"]
+    },
+    color: ["#175BFE", "#F4B91E", "#816AF6", "#13C8CB"],
+    series: [
+      {
+        name: "人员类型",
+        type: "pie",
+        radius: ["43%", "55%"],
+        labelLine: {
+          show: true,
+          length: 20,
+          length2: 20,
+          lineStyle: {
+            width: 2
           }
         },
         label: {
           show: true,
-          position: "top",
-          textStyle: {
-            color: "rgba(12, 245, 229, 1)",
-            padding: [0, 10]
-          }
+          formatter: "{d}%"
         },
-        itemStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {
-                offset: 1,
-                color: "rgba(12, 245, 229, 1)"
-                // opacity: 0.6
-              },
-              {
-                offset: 0,
-                color: "rgba(12, 245, 229, 0)"
-                // opacity: 1
-              }
-            ])
+        data: [
+          {
+            value: 100,
+            name: "正常出勤"
+          },
+          {
+            value: 100,
+            name: "未出勤"
+          },
+          {
+            value: 100,
+            name: "请假"
+          },
+          {
+            value: 100,
+            name: "其他"
           }
-        },
-        data: valueArr
+        ]
+      }
+    ]
+  };
+  chart2.setOption(option);
+  window.addEventListener("resize", function () {
+    chart2.resize();
+  });
+};
+const getCharts3 = () => {
+  const chart3 = echarts.init(chartEl3.value);
+  let option = {
+    xAxis: {
+      type: "category",
+      data: state.weekDates
+    },
+    yAxis: {
+      type: "value"
+    },
+    series: [
+      {
+        data: [150, 230, 224, 218, 135, 147, 260],
+        type: "line"
+      }
+    ]
+  };
+  chart3.setOption(option);
+  window.addEventListener("resize", function () {
+    chart3.resize();
+  });
+};
+const getCharts4 = () => {
+  const chart4 = echarts.init(chartEl4.value);
+  let xAxisData = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
+  let data1 = [];
+  let data2 = [];
+  let data3 = [];
+  let data4 = [];
+  for (let i = 0; i < 10; i++) {
+    data1.push(+(Math.random() * 2).toFixed(2));
+    data2.push(+(Math.random() * 5).toFixed(2));
+    data3.push(+(Math.random() + 0.3).toFixed(2));
+    data4.push(+Math.random().toFixed(2));
+  }
+  var data5 = (function () {
+    var datas = [];
+
+    for (var i = 0; i < data1.length; i++) {
+      datas.push((data1[i] + data2[i] + data3[i] + data4[i]).toFixed(2));
+    }
+
+    return datas;
+  })();
+  var emphasisStyle = {
+    itemStyle: {
+      shadowBlur: 10,
+      shadowColor: "rgba(0,0,0,0.3)"
+    }
+  };
+  let option = {
+    legend: {
+      top: "5%",
+      data: ["食堂", "生活消费", "交通", "其他"]
+    },
+    xAxis: {
+      data: xAxisData,
+      name: "时间",
+      axisLine: { onZero: true },
+      splitLine: { show: false },
+      splitArea: { show: false }
+    },
+    tooltip: {},
+    yAxis: {
+      name: "金额"
+    },
+    grid: {
+      bottom: "10%"
+    },
+    color: ["#175CFF", "#15C9CA", "#F9B71D", "#9EDB1C"],
+    series: [
+      {
+        name: "食堂",
+        barWidth: 20,
+        type: "bar",
+        stack: "one",
+        emphasis: emphasisStyle,
+        data: data1
+      },
+      {
+        name: "生活消费",
+        barWidth: 20,
+        type: "bar",
+        stack: "one",
+        emphasis: emphasisStyle,
+        data: data2
+      },
+      {
+        name: "交通",
+        barWidth: 20,
+        type: "bar",
+        stack: "one",
+        emphasis: emphasisStyle,
+        data: data3
+      },
+      {
+        name: "其他",
+        barWidth: 20,
+        type: "bar",
+        stack: "one",
+        emphasis: emphasisStyle,
+        data: data4
       },
       {
-        name: "",
-        type: "pictorialBar",
+        name: "总计",
+        type: "bar",
+        stack: "one",
+        label: {
+          show: true,
+          position: "insideBottom",
+          formatter: "{c}",
+          textStyle: { color: "#000" }
+        },
         itemStyle: {
-          normal: {
-            color: "rgba(12, 245, 229, 1)"
-          }
+          color: "rgba(128, 128, 128, 0)"
         },
-        symbol: "rect", // 图形类型，这里是矩形
-        symbolRotate: 0,
-        symbolSize: ["27", "3"],
-        symbolPosition: "end",
-        data: valueArr,
-        z: 3
+        data: data5
       }
     ]
   };
-
-  chart.setOption(option);
+  chart4.setOption(option);
   window.addEventListener("resize", function () {
-    chart.resize();
+    chart4.resize();
   });
 };
+const getWeekDates = () => {
+  let date = new Date();
+  state.weekDates = bz(date); // 获取本周一到本周日的日期
+  state.weekDates.forEach((item: any, index: any) => {
+    state.weekDates[index] = dateFormat(item, "yyyy-MM-dd");
+  });
+  function bz(date: any) {
+    const weekDates = [];
+    const dayOfWeek = date.getDay();
+    for (let i = 0; i <= 6; i++) {
+      const day = new Date(date);
+      day.setDate(date.getDate() - dayOfWeek + i + (dayOfWeek === 0 ? 0 : 1));
+      weekDates.push(day);
+    }
+    return weekDates;
+  }
+};
 onMounted(() => {
+  getWeekDates();
   getDetail();
+  getCharts2();
+  getCharts3();
+  getCharts4();
 });
 </script>
 <style lang="scss" scoped>
 .roolcallDetail {
   .header {
     box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
     width: 100%;
-    height: 180px;
-    padding: 10px 20px;
+    padding-bottom: 20px;
     background: #ffffff;
-    .left {
+    .top {
       display: flex;
+      flex-direction: column;
       align-items: center;
-      justify-content: flex-end;
-      width: 200px;
-      height: 100%;
+      justify-content: center;
+      height: 80px;
+      padding: 10px 0 20px;
+      border-bottom: 2px solid #f3f3f3;
+      .title {
+        margin-bottom: 12px;
+        font-size: 24px;
+        font-weight: 600;
+        color: #333333;
+      }
+      .updateTime {
+        font-size: 14px;
+      }
     }
-    .right {
-      width: calc(100% - 200px);
-      .el-row {
+    .topContent {
+      padding: 20px 0 25px;
+      .left {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
         height: 100%;
-        .el-col {
-          height: 50px;
-          line-height: 50px;
-          text-align: center;
+        .avatar {
+          margin-bottom: 10px;
+          border-radius: 50%;
+        }
+        .name {
+          margin-bottom: 10px;
+          font-size: 18px;
+          color: #333333;
+          .gender {
+            width: 18px;
+            &.GENDER_MALE {
+              color: #0a7df3;
+            }
+            &.GENDER_FEMALE {
+              color: #f73131;
+            }
+          }
+        }
+        .personId {
+          margin-bottom: 10px;
+          font-size: 14px;
+        }
+      }
+      .right {
+        width: 100%;
+        .el-row {
+          height: 100%;
+          .el-col {
+            height: 50px;
+            line-height: 50px;
+          }
         }
       }
     }
   }
   .content {
-    height: 550px;
     margin-top: 20px;
     background: #ffffff;
+    .labelAtteribute {
+      display: flex;
+      flex-flow: row wrap;
+      width: 100%;
+      padding-top: 40px;
+      .labelAtteribute-item {
+        box-sizing: border-box;
+        width: calc(50% - 30px);
+        height: 50px;
+        margin-right: 30px;
+        line-height: 50px;
+        text-align: center;
+        border: 2px solid #f2f2f2;
+        .laberAttrValue {
+          margin-right: 5px;
+          color: #f27078;
+        }
+        &:nth-child(1),
+        &:nth-child(2) {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 40px;
+          .laberAttrName {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+          }
+          .icon {
+            display: inline-block;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 30px;
+            height: 30px;
+            margin-right: 15px;
+            background: #ffffff;
+            border-radius: 50%;
+          }
+        }
+        &:nth-child(1) {
+          background: rgb(60 126 221 / 10%);
+          .like-outlined,
+          .laberAttrValue {
+            font-weight: 600;
+            color: rgb(60 126 221);
+          }
+        }
+        &:nth-child(2) {
+          background: rgb(243 169 148 / 20%);
+          .like-outlined,
+          .laberAttrValue {
+            font-weight: 600;
+            color: rgb(243 169 148);
+          }
+        }
+        &:nth-child(2n) {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+  .modeContent2 {
+    padding-bottom: 30px;
+    .titleParent {
+      width: 100%;
+      height: 80px;
+      margin-bottom: 25px;
+      font-size: 20px;
+      font-weight: 600;
+      line-height: 80px;
+      color: #333333;
+      text-align: center;
+      border: 2px solid #f2f2f2;
+    }
+    .situation {
+      width: 100%;
+      .top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 60px;
+        .title {
+          font-size: 18px;
+          font-weight: 600;
+          line-height: 60px;
+        }
+      }
+      .contentBox {
+        height: 450px;
+        .tip {
+          height: 50px;
+          background: #eef1f6;
+          span {
+            padding-left: 12px;
+            font-size: 14px;
+            line-height: 50px;
+            border-left: 3px solid #3c7edd;
+          }
+        }
+        .box {
+          height: calc(100% - 50px);
+          border: 2px solid #f2f2f2;
+        }
+      }
+    }
   }
 }
 </style>