From 0fb59328c77f7b4769b1bae1dfd5628c36d08030 Mon Sep 17 00:00:00 2001
From: herenshan112 <hreenshan112@163.com>
Date: Mon, 21 Jul 2025 10:20:58 +0800
Subject: [PATCH] 123

---
 src/views/dashboard/components/orguserage.vue | 295 +++++++++---------
 1 file changed, 152 insertions(+), 143 deletions(-)

diff --git a/src/views/dashboard/components/orguserage.vue b/src/views/dashboard/components/orguserage.vue
index 48f8327..e9ad468 100644
--- a/src/views/dashboard/components/orguserage.vue
+++ b/src/views/dashboard/components/orguserage.vue
@@ -3,162 +3,171 @@
 @ 时间: 2023-11-08 18:48:27
 @ 备注: 行政组织年龄结构
 -->
-<script lang='ts' setup>
-import * as echarts from 'echarts';	//引入图形界面
-import { statisticalAgeRatio } from '@/api/displayboardapi/indexapi'
+<script lang="ts" setup>
+import * as echarts from "echarts"; //引入图形界面
+import { statisticalAgeRatio } from "@/api/displayboardapi/indexapi";
 
 const props = defineProps({
-	educationOrgId:{
-		type:Number,
-		default:309
-	},
-	orgListCont:{
-		type:Object,
-		default(){
-			return {}
-		}
-	}
-})
-const orgAgeLoading = ref(false)
-const orgAgeId = ref<number>(309)
-let seriesOrgAgeData = new Array
-const orgAgeTitle = ref<string>("年龄结构图")
+  educationOrgId: {
+    type: Number,
+    default: 309,
+  },
+  orgListCont: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+});
+const orgAgeLoading = ref(false);
+const orgAgeId = ref<number>(309);
+let seriesOrgAgeData = new Array();
+const orgAgeTitle = ref<string>("年龄结构图");
 //设置画表对象
-const orgAgeChart = ref<any>()
+const orgAgeChart = ref<any>();
 //获取学历图标对象
-const darwOrgAgeChart = ref<any>(null)
-
+const darwOrgAgeChart = ref<any>(null);
 
 /**
-  * 获取年龄比例
-*/
-const gainOrgAgeRatio = () =>{
-	orgAgeLoading.value = true
-	statisticalAgeRatio({id:orgAgeId.value.toString()})
-		.then((data:any)=>{
-			if(data.code == 0){
-				seriesOrgAgeData.splice(0,seriesOrgAgeData.length);
-				if(data.data){
-					seriesOrgAgeData = data.data
-					// console.log("年龄结构图",seriesOrgAgeData)
-					let optionOrgAge = {
-						tooltip: {
-							trigger: 'item'
-						},
-						toolbox: {
-                            x: 'right',
-                            y: -5,
-							feature: {
-								saveAsImage: {}
-							}
-						},
-						series: [
-							{
-								type: 'pie',
-                                radius: ['40%', '60%'],
-                                center:['50%','58%'],
-								data: seriesOrgAgeData,
-								label: {
-									normal:{
-										show: true,
-                                        formatter:  `{data|{b}} {serie|{c}人}`,
-                                        padding: [0, 15, 0, 0],
-                                        rich: {
-                                            data: {
-                                                fontSize: 14,
-                                                color: '#666666'
-                                            },
-                                            serie: {
-                                                fontSize: 15,
-                                                color: '#000000',
-                                                fontweight: 600,
-                                                padding: [0, 0, 0, 3]
-                                            }
-                                        }
-									}
-								}
-							},
-							// {
-							// 	type: 'pie',
-							// 	radius: ['40%', '60%'],
-							// 	data: seriesOrgAgeData,
-                            //     center:['50%','58%'],
-							// 	label: {
-							// 		normal:{
-							// 			position: 'inside',
-							// 			show: false,
-							// 			formatter: (d: any) => {
-							// 				return d.percent + '%'
-							// 			}
-							// 		}
-							// 	}
-							// }
-						]
-					};
-					orgAgeChart.value.clear();
-					orgAgeChart.value.setOption(optionOrgAge)
-					orgAgeLoading.value=false
-			
-				}
-			}
-		})
-		.finally(()=>{
-			
-		})
-}
+ * 获取年龄比例
+ */
+const gainOrgAgeRatio = () => {
+  orgAgeLoading.value = true;
+  statisticalAgeRatio({ id: orgAgeId.value.toString() })
+    .then((data: any) => {
+      if (data.code == 0) {
+        seriesOrgAgeData.splice(0, seriesOrgAgeData.length);
+        if (data.data) {
+          seriesOrgAgeData = data.data;
+          console.log("年龄结构图", seriesOrgAgeData);
+          let optionOrgAge = {
+            tooltip: {
+              trigger: "item",
+            },
+            toolbox: {
+              x: "right",
+              y: -5,
+              feature: {
+                saveAsImage: {},
+              },
+            },
+            series: [
+              {
+                type: "pie",
+                radius: ["40%", "60%"],
+                center: ["50%", "58%"],
+                data: seriesOrgAgeData,
+                label: {
+                  normal: {
+                    show: true,
+                    formatter: `{data|{b}} {serie|{c}人}`,
+                    padding: [0, 15, 0, 0],
+                    rich: {
+                      data: {
+                        fontSize: 14,
+                        color: "#666666",
+                      },
+                      serie: {
+                        fontSize: 15,
+                        color: "#000000",
+                        fontweight: 600,
+                        padding: [0, 0, 0, 3],
+                      },
+                    },
+                  },
+                },
+              },
+              // {
+              // 	type: 'pie',
+              // 	radius: ['40%', '60%'],
+              // 	data: seriesOrgAgeData,
+              //     center:['50%','58%'],
+              // 	label: {
+              // 		normal:{
+              // 			position: 'inside',
+              // 			show: false,
+              // 			formatter: (d: any) => {
+              // 				return d.percent + '%'
+              // 			}
+              // 		}
+              // 	}
+              // }
+            ],
+          };
+          orgAgeChart.value.clear();
+          orgAgeChart.value.setOption(optionOrgAge);
+          orgAgeLoading.value = false;
+        }
+      }
+    })
+    .finally(() => {});
+};
 onMounted(() => {
-	orgAgeId.value = props.educationOrgId
-	orgAgeChart.value = markRaw(echarts.init(darwOrgAgeChart.value))
-	gainOrgAgeRatio()
-	// 大小自适应
-	window.addEventListener('resize', () => {
-		orgAgeChart.value.resize();
-	});
-})
+  orgAgeId.value = props.educationOrgId;
+  orgAgeChart.value = markRaw(echarts.init(darwOrgAgeChart.value));
+  gainOrgAgeRatio();
+  // 大小自适应
+  window.addEventListener("resize", () => {
+    orgAgeChart.value.resize();
+  });
+});
 </script>
 <template>
-	<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;position: relative;height: 100%;">
-		<!--单月全厂统计-->
-		<div class="orgAllMothsTitle">
-			<el-text class="titleInfo">{{ orgAgeTitle }}</el-text>
-			<el-select v-model="orgAgeId" placeholder="请选择公司"   @change="gainOrgAgeRatio" style="width: 240px;">
-				<el-option
-					v-for="item in props.orgListCont"
-					:key="item.id"
-					:label="item.name"
-					:value="item.id">
-				</el-option>
-			</el-select>
-		</div>
-		<div  ref="darwOrgAgeChart"  v-loading="orgAgeLoading" element-loading-text="Loading..." class="allOrgAxisCares">
-									
-		</div>
-	</el-card>
+  <el-card
+    shadow="always"
+    :body-style="{ padding: '10px' }"
+    style="border-radius: 12px; margin-top: 10px; position: relative; height: 100%"
+  >
+    <!--单月全厂统计-->
+    <div class="orgAllMothsTitle">
+      <el-text class="titleInfo">{{ orgAgeTitle }}</el-text>
+      <el-select
+        v-model="orgAgeId"
+        placeholder="请选择公司"
+        @change="gainOrgAgeRatio"
+        style="width: 240px"
+      >
+        <el-option
+          v-for="item in props.orgListCont"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div
+      ref="darwOrgAgeChart"
+      v-loading="orgAgeLoading"
+      element-loading-text="Loading..."
+      class="allOrgAxisCares"
+    ></div>
+  </el-card>
 </template>
-<style  lang='scss' scoped>
+<style lang="scss" scoped>
 // .readback{
-	.allOrgAxisCares{
-		display: block;
-		width:100%;
-		height:330px;
-	}
+.allOrgAxisCares {
+  display: block;
+  width: 100%;
+  height: 330px;
+}
 // }
-.orgAllMothsTitle{
-	width:calc(100% - 55px);
-	display: flex;
-	align-items: center;
-	justify-content:space-between;
-    position: absolute;
-    left: 15px;
-    top: 5px;
-    z-index: 99;
+.orgAllMothsTitle {
+  width: calc(100% - 55px);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  left: 15px;
+  top: 5px;
+  z-index: 99;
 }
-.span_icon_left{
-	margin-right:10px;
+.span_icon_left {
+  margin-right: 10px;
 }
-.titleInfo{
-	font-size: 18px;
-	font-weight: bold;
-    color: #000000;
+.titleInfo {
+  font-size: 18px;
+  font-weight: bold;
+  color: #000000;
 }
 </style>