123

src/views/dashboard/components/orguserage.vue

@@ -3,60 +3,59 @@
 @ 时间: 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
+    default: 309,
   },
   orgListCont: {
     type: Object,
     default() {
-			return {}
-		}
-	}
-})
-const orgAgeLoading = ref(false)
-const orgAgeId = ref<number>(309)
-let seriesOrgAgeData = new Array
-const orgAgeTitle = ref<string>("年龄结构图")
+      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
+  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)
+          seriesOrgAgeData = data.data;
+          console.log("年龄结构图", seriesOrgAgeData);
           let optionOrgAge = {
             tooltip: {
-							trigger: 'item'
+              trigger: "item",
             },
             toolbox: {
-                            x: 'right',
+              x: "right",
               y: -5,
               feature: {
-								saveAsImage: {}
-							}
+                saveAsImage: {},
+              },
             },
             series: [
               {
-								type: 'pie',
-                                radius: ['40%', '60%'],
-                                center:['50%','58%'],
+                type: "pie",
+                radius: ["40%", "60%"],
+                center: ["50%", "58%"],
                 data: seriesOrgAgeData,
                 label: {
                   normal: {
@@ -66,17 +65,17 @@ const gainOrgAgeRatio = () =>{
                     rich: {
                       data: {
                         fontSize: 14,
-                                                color: '#666666'
+                        color: "#666666",
                       },
                       serie: {
                         fontSize: 15,
-                                                color: '#000000',
+                        color: "#000000",
                         fontweight: 600,
-                                                padding: [0, 0, 0, 3]
-                                            }
-                                        }
-									}
-								}
+                        padding: [0, 0, 0, 3],
+                      },
+                    },
+                  },
+                },
               },
               // {
               // 	type: 'pie',
@@ -93,49 +92,59 @@ const gainOrgAgeRatio = () =>{
               // 		}
               // 	}
               // }
-						]
+            ],
           };
           orgAgeChart.value.clear();
-					orgAgeChart.value.setOption(optionOrgAge)
-					orgAgeLoading.value=false
-			
+          orgAgeChart.value.setOption(optionOrgAge);
+          orgAgeLoading.value = false;
         }
       }
     })
-		.finally(()=>{
-			
-		})
-}
+    .finally(() => {});
+};
 onMounted(() => {
-	orgAgeId.value = props.educationOrgId
-	orgAgeChart.value = markRaw(echarts.init(darwOrgAgeChart.value))
-	gainOrgAgeRatio()
+  orgAgeId.value = props.educationOrgId;
+  orgAgeChart.value = markRaw(echarts.init(darwOrgAgeChart.value));
+  gainOrgAgeRatio();
   // 大小自适应
-	window.addEventListener('resize', () => {
+  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%;">
+  <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-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">
+          :value="item.id"
+        >
         </el-option>
       </el-select>
     </div>
-		<div  ref="darwOrgAgeChart"  v-loading="orgAgeLoading" element-loading-text="Loading..." class="allOrgAxisCares">
-									
-		</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;