123

src/views/dashboard/components/orguserage.vue

@@ -3,80 +3,79 @@
 @ 时间: 2023-11-08 18:48:27
 @ 备注: 行政组织年龄结构
 -->
-<script lang='ts' setup>
+<script lang="ts" setup>
-import * as echarts from 'echarts';	//引入图形界面
+import * as echarts from "echarts"; //引入图形界面
-import { statisticalAgeRatio } from '@/api/displayboardapi/indexapi'
+import { statisticalAgeRatio } from "@/api/displayboardapi/indexapi";
 
 const props = defineProps({
-	educationOrgId:{
+  educationOrgId: {
-		type:Number,
+    type: Number,
-		default:309
+    default: 309,
   },
-	orgListCont:{
+  orgListCont: {
-		type:Object,
+    type: Object,
-		default(){
+    default() {
-			return {}
+      return {};
-		}
+    },
-	}
+  },
-})
+});
-const orgAgeLoading = ref(false)
+const orgAgeLoading = ref(false);
-const orgAgeId = ref<number>(309)
+const orgAgeId = ref<number>(309);
-let seriesOrgAgeData = new Array
+let seriesOrgAgeData = new Array();
-const orgAgeTitle = ref<string>("年龄结构图")
+const orgAgeTitle = ref<string>("年龄结构图");
 //设置画表对象
-const orgAgeChart = ref<any>()
+const orgAgeChart = ref<any>();
 //获取学历图标对象
-const darwOrgAgeChart = ref<any>(null)
+const darwOrgAgeChart = ref<any>(null);
-
 
 /**
  * 获取年龄比例
-*/
+ */
-const gainOrgAgeRatio = () =>{
+const gainOrgAgeRatio = () => {
-	orgAgeLoading.value = true
+  orgAgeLoading.value = true;
-	statisticalAgeRatio({id:orgAgeId.value.toString()})
+  statisticalAgeRatio({ id: orgAgeId.value.toString() })
-		.then((data:any)=>{
+    .then((data: any) => {
-			if(data.code == 0){
+      if (data.code == 0) {
-				seriesOrgAgeData.splice(0,seriesOrgAgeData.length);
+        seriesOrgAgeData.splice(0, seriesOrgAgeData.length);
-				if(data.data){
+        if (data.data) {
-					seriesOrgAgeData = data.data
+          seriesOrgAgeData = data.data;
-					// console.log("年龄结构图",seriesOrgAgeData)
+          console.log("年龄结构图", seriesOrgAgeData);
           let optionOrgAge = {
             tooltip: {
-							trigger: 'item'
+              trigger: "item",
             },
             toolbox: {
-                            x: 'right',
+              x: "right",
               y: -5,
               feature: {
-								saveAsImage: {}
+                saveAsImage: {},
-							}
+              },
             },
             series: [
               {
-								type: 'pie',
+                type: "pie",
-                                radius: ['40%', '60%'],
+                radius: ["40%", "60%"],
-                                center:['50%','58%'],
+                center: ["50%", "58%"],
                 data: seriesOrgAgeData,
                 label: {
-									normal:{
+                  normal: {
                     show: true,
                     formatter: `{data|{b}} {serie|{c}人}`,
                     padding: [0, 15, 0, 0],
                     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,70 +92,80 @@ const gainOrgAgeRatio = () =>{
               // 		}
               // 	}
               // }
-						]
+            ],
           };
           orgAgeChart.value.clear();
-					orgAgeChart.value.setOption(optionOrgAge)
+          orgAgeChart.value.setOption(optionOrgAge);
-					orgAgeLoading.value=false
+          orgAgeLoading.value = false;
-			
         }
       }
     })
-		.finally(()=>{
+    .finally(() => {});
-			
+};
-		})
-}
 onMounted(() => {
-	orgAgeId.value = props.educationOrgId
+  orgAgeId.value = props.educationOrgId;
-	orgAgeChart.value = markRaw(echarts.init(darwOrgAgeChart.value))
+  orgAgeChart.value = markRaw(echarts.init(darwOrgAgeChart.value));
-	gainOrgAgeRatio()
+  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
-									
+      ref="darwOrgAgeChart"
-		</div>
+      v-loading="orgAgeLoading"
+      element-loading-text="Loading..."
+      class="allOrgAxisCares"
+    ></div>
   </el-card>
 </template>
-<style  lang='scss' scoped>
+<style lang="scss" scoped>
 // .readback{
-	.allOrgAxisCares{
+.allOrgAxisCares {
   display: block;
-		width:100%;
+  width: 100%;
-		height:330px;
+  height: 330px;
-	}
+}
 // }
-.orgAllMothsTitle{
+.orgAllMothsTitle {
-	width:calc(100% - 55px);
+  width: calc(100% - 55px);
   display: flex;
   align-items: center;
-	justify-content:space-between;
+  justify-content: space-between;
   position: absolute;
   left: 15px;
   top: 5px;
   z-index: 99;
 }
-.span_icon_left{
+.span_icon_left {
-	margin-right:10px;
+  margin-right: 10px;
 }
-.titleInfo{
+.titleInfo {
   font-size: 18px;
   font-weight: bold;
   color: #000000;