From 9470de796ef95cee856dc7d44392a24bb096872a Mon Sep 17 00:00:00 2001
From: suyanyan <1321717064@qq.com>
Date: Tue, 30 Jul 2024 13:38:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=A6=E6=A0=A1=E7=94=BB=E5=83=8F=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 SafeCampus.WEB/src/api/modules/index.ts       |   3 +-
 .../src/api/modules/violation/index.ts        |  16 +++
 .../api/modules/violation/portraitSummary.ts  |  45 +++++++
 .../src/views/violation/portrait/detail.vue   |  32 ++---
 .../views/violation/portraitSummary/index.vue | 117 +++++++++---------
 5 files changed, 141 insertions(+), 72 deletions(-)
 create mode 100644 SafeCampus.WEB/src/api/modules/violation/index.ts
 create mode 100644 SafeCampus.WEB/src/api/modules/violation/portraitSummary.ts

diff --git a/SafeCampus.WEB/src/api/modules/index.ts b/SafeCampus.WEB/src/api/modules/index.ts
index 3ac6dc9..ffc0a40 100644
--- a/SafeCampus.WEB/src/api/modules/index.ts
+++ b/SafeCampus.WEB/src/api/modules/index.ts
@@ -20,4 +20,5 @@ export * from "./monitor";
 export * from "./sysconfig";
 export * from "./statistion";
 export * from "./usermanage";
-export * from "./attendance";
\ No newline at end of file
+export * from "./attendance";
+export * from "./violation";
diff --git a/SafeCampus.WEB/src/api/modules/violation/index.ts b/SafeCampus.WEB/src/api/modules/violation/index.ts
new file mode 100644
index 0000000..4b49ec9
--- /dev/null
+++ b/SafeCampus.WEB/src/api/modules/violation/index.ts
@@ -0,0 +1,16 @@
+/**
+ * @description
+ * @license Apache License Version 2.0
+ * @Copyright (c) 2022-Now 少林寺驻北固山办事处大神父王喇嘛
+ * @remarks
+ * SimpleAdmin 基于 Apache License Version 2.0 协议发布，可用于商业项目，但必须遵守以下补充条款:
+ * 1.请不要删除和修改根目录下的LICENSE文件。
+ * 2.请不要删除和修改SimpleAdmin源码头部的版权声明。
+ * 3.分发源码时候，请注明软件出处 https://gitee.com/dotnetmoyu/SimpleAdmin
+ * 4.基于本软件的作品，只能使用 SimpleAdmin 作为后台服务，除外情况不可商用且不允许二次分发或开源。
+ * 5.请不得将本软件应用于危害国家安全、荣誉和利益的行为，不能以任何形式用于非法为目的的行为不要删除和修改作者声明。
+ * 6.任何基于本软件而产生的一切法律纠纷和责任，均于我司无关
+ * @see https://gitee.com/dotnetmoyu/SimpleAdmin
+ */
+
+export * from "./portraitSummary";
diff --git a/SafeCampus.WEB/src/api/modules/violation/portraitSummary.ts b/SafeCampus.WEB/src/api/modules/violation/portraitSummary.ts
new file mode 100644
index 0000000..8b9db03
--- /dev/null
+++ b/SafeCampus.WEB/src/api/modules/violation/portraitSummary.ts
@@ -0,0 +1,45 @@
+/**
+ * @description  学校画像接口
+ * @license Apache License Version 2.0
+ * @Copyright (c) 2022-Now 少林寺驻北固山办事处大神父王喇嘛
+ * @remarks
+ * SimpleAdmin 基于 Apache License Version 2.0 协议发布，可用于商业项目，但必须遵守以下补充条款:
+ * 1.请不要删除和修改根目录下的LICENSE文件。
+ * 2.请不要删除和修改SimpleAdmin源码头部的版权声明。
+ * 3.分发源码时候，请注明软件出处 https://gitee.com/dotnetmoyu/SimpleAdmin
+ * 4.基于本软件的作品，只能使用 SimpleAdmin 作为后台服务，除外情况不可商用且不允许二次分发或开源。
+ * 5.请不得将本软件应用于危害国家安全、荣誉和利益的行为，不能以任何形式用于非法为目的的行为不要删除和修改作者声明。
+ * 6.任何基于本软件而产生的一切法律纠纷和责任，均于我司无关
+ * @see https://gitee.com/dotnetmoyu/SimpleAdmin
+ */
+import { moduleRequest } from "@/api/request";
+const http = moduleRequest("/violation/portraitSummary/");
+/**
+ * @Description: 学校画像
+ * @Author: SYY
+ * @Date: 2024-7-30 15:34:54
+ */
+const portraitSummaryApi = {
+  /** 获取学生性别 */
+  getStudentSex() {
+    return http.get("getStudentSex");
+  },
+  /** 获取学生年龄 */
+  getStudentAge() {
+    return http.get("getStudentAge");
+  },
+  /** 获取地理位置 */
+  getAddress() {
+    return http.get("getAddress");
+  },
+  /** 获取属性标签 */
+  getStudentAttr() {
+    return http.get("getStudentAttr");
+  },
+  /** 获取学生属性标签 */
+  getStudentDetail(params: any) {
+    return http.get("getStudentDetail", params);
+  }
+};
+
+export { portraitSummaryApi };
diff --git a/SafeCampus.WEB/src/views/violation/portrait/detail.vue b/SafeCampus.WEB/src/views/violation/portrait/detail.vue
index 0b0c871..0d5e701 100644
--- a/SafeCampus.WEB/src/views/violation/portrait/detail.vue
+++ b/SafeCampus.WEB/src/views/violation/portrait/detail.vue
@@ -40,7 +40,7 @@
   </div>
 </template>
 <script setup lang="ts" name="ViolationPortraitDetail">
-import { userManagePersonnelApi } from "@/api";
+import { userManagePersonnelApi, portraitSummaryApi } from "@/api";
 const route = useRoute();
 const formData = ref<any>({}); //班级人员列表
 import * as echarts from "echarts";
@@ -54,11 +54,12 @@ const getDetail = () => {
   userManagePersonnelApi.detail({ id: route.query.personId }).then((res: any) => {
     formData.value = res.data;
   });
+  portraitSummaryApi.getStudentDetail({ id: route.query.personId }).then((res: any) => {
+    getCharts(res.data.label, res.data.value);
+  });
 };
-const getCharts = (data: any) => {
+const getCharts = (nameArr: any, valueArr: any) => {
   const chart = echarts.init(chartEl.value);
-  const nameArr = ["爱好运动", "爱好学习", "比较调皮（爱打闹）", "上课不认真听讲"];
-  const valueArr = [150, 60, 80, 180];
   const option = {
     title: {
       text: "人员属性标签",
@@ -147,15 +148,6 @@ const getCharts = (data: any) => {
       }
     },
     series: [
-      {
-        yAxisIndex: 0,
-        color: "rgba(12, 245, 229, 1)",
-        lineStyle: {
-          color: "rgba(12, 245, 229, 1)"
-        },
-        type: "line",
-        data: valueArr
-      },
       {
         type: "bar",
         name: "",
@@ -163,6 +155,19 @@ const getCharts = (data: any) => {
         emphasis: {
           itemStyle: {
             color: "#7fb7e9"
+          },
+          label: {
+            textStyle: {
+              color: "#7fb7e9"
+            }
+          }
+        },
+        label: {
+          show: true,
+          position: "top",
+          textStyle: {
+            color: "rgba(12, 245, 229, 1)",
+            padding: [0, 10]
           }
         },
         itemStyle: {
@@ -208,7 +213,6 @@ const getCharts = (data: any) => {
 };
 onMounted(() => {
   getDetail();
-  getCharts({});
 });
 </script>
 <style lang="scss" scoped>
diff --git a/SafeCampus.WEB/src/views/violation/portraitSummary/index.vue b/SafeCampus.WEB/src/views/violation/portraitSummary/index.vue
index 24cd7fa..9362e35 100644
--- a/SafeCampus.WEB/src/views/violation/portraitSummary/index.vue
+++ b/SafeCampus.WEB/src/views/violation/portraitSummary/index.vue
@@ -51,6 +51,7 @@
 
 <script setup lang="ts" name="home">
 import * as echarts from "echarts";
+import { portraitSummaryApi } from "@/api";
 const chart1 = ref(null);
 const chart2 = ref(null);
 const chart4 = ref(null);
@@ -58,15 +59,35 @@ const chart5 = ref(null);
 onMounted(() => {
   getDataChart();
 });
-function getDataChart() {
-  getCharts1();
-  getCharts2();
-  getCharts4();
-  getCharts5();
-}
+const getDataChart = async () => {
+  /* 获取学生性别 */
+  let sex: any = await portraitSummaryApi.getStudentSex();
+  getCharts1(sex.data.label, sex.data.value);
+  /* 获取学生年龄 */
+  let age: any = await portraitSummaryApi.getStudentAge();
+  getCharts2(age.data.label, age.data.value);
+  /* 获取属性标签 */
+  let attr: any = await portraitSummaryApi.getStudentAttr();
+  getCharts4(attr.data.label, attr.data.value);
+  /* 获取地理位置 */
+  let address: any = await portraitSummaryApi.getAddress();
+  getCharts5(address.data.label, address.data.value);
+};
+
+const handleDate = (label: any, value: any, key: any = "") => {
+  let data: any = [];
+  label.forEach((item: any, index: number) => {
+    data.push({
+      value: value[index],
+      name: item + key
+    });
+  });
+  return data;
+};
 /* 性別 */
-function getCharts1() {
+function getCharts1(label: any, value: any) {
   const chart = echarts.init(chart1.value);
+  const data = handleDate(label, value);
   const option = {
     tooltip: {
       confine: true
@@ -76,7 +97,7 @@ function getCharts1() {
       right: "0%",
       top: "center",
       orient: "vertical",
-      data: ["男", "女"]
+      data: label
     },
     series: [
       {
@@ -104,16 +125,7 @@ function getCharts1() {
             show: true
           }
         },
-        data: [
-          {
-            value: 62,
-            name: "男"
-          },
-          {
-            value: 100,
-            name: "女"
-          }
-        ]
+        data: data
       }
     ]
   };
@@ -124,15 +136,18 @@ function getCharts1() {
   });
 }
 /* 年齡 */
-function getCharts2() {
+function getCharts2(label: any, value: any) {
   const chartstation = echarts.init(chart2.value);
+  const data = handleDate(label, value, "岁");
+  const labelArr: any = [];
+  label.map((item: any) => labelArr.push(item + "岁"));
   const option = {
     legend: {
       show: true,
       right: "0%",
       top: "center",
       orient: "vertical",
-      data: ["<20", ">60岁", "50-60岁", "40-50岁", "30-40岁", "20-30岁"]
+      data: labelArr
     },
     tooltip: {
       trigger: "item",
@@ -146,32 +161,7 @@ function getCharts2() {
         radius: [50, 140],
 
         roseType: "area",
-        data: [
-          {
-            value: 10,
-            name: "<20"
-          },
-          {
-            value: 15,
-            name: ">60岁"
-          },
-          {
-            value: 25,
-            name: "50-60岁"
-          },
-          {
-            value: 20,
-            name: "40-50岁"
-          },
-          {
-            value: 35,
-            name: "30-40岁"
-          },
-          {
-            value: 30,
-            name: "20-30岁"
-          }
-        ],
+        data: data,
         itemStyle: {
           normal: {
             label: {
@@ -194,17 +184,19 @@ function getCharts2() {
   });
 }
 /* 兴趣爱好 */
-function getCharts4() {
+function getCharts4(categoryData: any, dataArr: any) {
   const chartstation = echarts.init(chart4.value);
-  var dataArr = [100, 200, 300, 400, 500];
   var spaceLength = 5,
     fixedData = [],
     end = 0,
     max = 300;
   // var categoryData =  ys.超市品牌;
-  var categoryData = ["调皮/爱打闹", "上课不认真听讲", "爱好运动", "爱好画画", "爱好学习"];
-  var xhao = [1, 2, 3, 4, 5];
-  var data1 = dataArr.map(item => {
+  let xhao: any = [];
+  for (var i = 0; i < dataArr.length; i++) {
+    xhao.push(i + 1);
+  }
+
+  var data1 = dataArr.map((item: any) => {
     fixedData.push(spaceLength);
     return item - spaceLength;
   });
@@ -399,11 +391,9 @@ function getCharts4() {
   });
 }
 
-/* 标签 */
-function getCharts5() {
+/* 标签、地理位置 */
+function getCharts5(nameArr: any, valueArr: any) {
   const chartstation5 = echarts.init(chart5.value);
-  const nameArr = ["杭州", "宁波", "金华", "台州", "嘉兴", "丽水", "温州", "潮州", "绍兴", "衢州"];
-  const valueArr = [150, 60, 80, 180, 120, 160, 80, 40, 20, 10];
   const option = {
     grid: {
       top: "10%",
@@ -449,7 +439,7 @@ function getCharts5() {
       },
       axisLabel: {
         textStyle: {
-          color: "#B3CFFF", // x轴文本颜色
+          color: "#333", // x轴文本颜色
           fontSize: 12
         }
         // rotate:30,
@@ -471,7 +461,7 @@ function getCharts5() {
       axisLabel: {
         formatter: "{value}",
         textStyle: {
-          color: "#B3CFFF", // x轴文本颜色
+          color: "#333", // x轴文本颜色
           fontSize: 12
         }
       },
@@ -489,6 +479,19 @@ function getCharts5() {
         emphasis: {
           itemStyle: {
             color: "#7fb7e9"
+          },
+          label: {
+            textStyle: {
+              color: "#7fb7e9"
+            }
+          }
+        },
+        label: {
+          show: true,
+          position: "top",
+          textStyle: {
+            color: "rgba(147, 157, 223, 1)",
+            padding: [0, 10]
           }
         },
         itemStyle: {