首页布局完成

package.json

@@ -48,7 +48,7 @@
     "@wecom/jssdk": "^1.3.2",
     "axios": "^1.4.0",
     "clipboard": "^2.0.11",
-    "echarts": "^5.2.2",
+    "echarts": "^5.4.3",
     "element-plus": "^2.3.4",
     "font-awesome": "^4.7.0",
     "js-beautify": "^1.14.8",

src/api/auth/types.ts

@@ -46,6 +46,7 @@ export interface LoginResult {
   tokenType?: string;
 	key?: string;
   token?: string;
+	userinfo?:any;
 }
 
 /**

src/api/displayboardapi/indexapi.ts

@@ -1,6 +1,6 @@
 import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
-import { dimissionRateQuery,publicId,eduStruCont,sendOrgCont,outputOrgAndUser,orgAndPeople } from './types';
+import { dimissionRateQuery,publicId,eduStruCont,sendOrgCont,outputOrgAndUser,orgAndPeople,orgId,targetCanShu,dlTargetTbHbfenxi,dlTargetTbHbfenxis,orgGardes,attributePage } from './types';
 /**
  * 获取离职率
  */
@@ -65,11 +65,23 @@ import { dimissionRateQuery,publicId,eduStruCont,sendOrgCont,outputOrgAndUser,or
 //获取组织及成员(新版)
 export const getOrgEveryonePeople = (data?: publicId): AxiosPromise<orgAndPeople[]> => {
     return request({
-        url: '/org/get_org_everyone_people',
+        url: '/hrapi/org/get_org_everyone_people',
         method: 'post',
         data: data
     })
 }
+/**
+ * 获取当前行政组织的所有主行政部门
+ */
+ export const getCompanyDeparment = (data?: orgId):any => {
+	return request({
+	  url: '/hrapi/org/getcompanydeparment',
+	  method: 'post',
+	  data: data
+	});
+}
+
+
 //搜索成员(新版)
 export const getEmployees = (data?: any) => {
     return request({
@@ -103,6 +115,16 @@ export const GetPositionUnify = (data?: any) => {
         data: data
     })
 }
+
+//根据部门获取指标列表
+export const targetListForDepartment = (data?: targetCanShu):any => {
+	return request({
+			url: '/kpiapi/department_web/target_list_for_department',
+			method: 'post',
+			data: data
+	})
+}
+
 //获取审批节点或条件节点
 export const gainNodeFactor = (data?: any) => {
     return request({
@@ -111,3 +133,52 @@ export const gainNodeFactor = (data?: any) => {
         data: data
     })
 }
+//定量指标同比环比分析
+export const bdTtsyoy = (data: dlTargetTbHbfenxi):any => {
+	return request({
+			url: '/kpiapi/department_web/bdttsyoy',
+			method: 'post',
+			data: data
+	})
+}
+//定量指标同比环比分析
+export const bdBdtTs = (data: dlTargetTbHbfenxis):any => {
+	return request({
+			url: '/kpiapi/department_web/bdtts',
+			method: 'post',
+			data: data
+	})
+}
+//定性指标同比环比分析
+export const bDtTsatTryoy = (data: dlTargetTbHbfenxi):any => {
+	return request({
+			url: '/kpiapi/department_web/bdttsattryoy',
+			method: 'post',
+			data: data
+	})
+}
+//行政组织年度成绩单
+export const orgTargetAnnualStatistics = (data: orgGardes):any => {
+	return request({
+			url: '/kpiapi/strtistics/org_target_annual_statistics',
+			method: 'post',
+			data: data
+	})
+}
+//统计行政组织下人员年龄比例
+export const statisticalAgeRatio = (data: publicId):any => {
+	return request({
+			url: '/systemapi/user/statisticalAgeRatio',
+			method: 'post',
+			data: data
+	})
+}
+
+//统计行政组织下人员年龄比例
+export const hotNews = (data: attributePage):any => {
+	return request({
+			url: '/systemapi/news/hot_news',
+			method: 'post',
+			data: data
+	})
+}

src/api/displayboardapi/types.ts

@@ -1,6 +1,14 @@
 export interface publicId{
 	id?:number|string;
 }
+//根据部门获取指标列表
+export interface targetCanShu extends publicId{
+	attribute?:number;
+}
+export interface orgId{
+	id?:number;
+	idstr?:string;
+}
 /**
  * 获取离职率参数
  */
@@ -118,3 +126,27 @@ export interface orgAndPeople{
 	temaname: string;
 	child:orgAndPeople[];
 }
+//定量指标同比环比分析
+export interface dlTargetTbHbfenxi{
+	orgid:string;
+	targetid:string;
+	datetime:number[];
+}
+export interface dlTargetTbHbfenxis{
+	orgid:string;
+	targetid:string;
+	datetime:string;
+}
+export interface orgGardes{
+	orgid:string;
+	years:string;
+}
+//翻页数据
+export interface setupPage {
+	page?:number;	//页码
+	pagesize?:number;	//每页获取数量
+}
+//属性文章
+export interface attributePage extends setupPage{
+	type?:number
+}

src/layout/components/Navbar.vue

@@ -18,6 +18,29 @@ const { device } = storeToRefs(appStore); // 设备类型：desktop-宽屏设备
 
 const myPasswordBoxIsShow = ref(false);
 
+const date: Date = new Date();
+
+const tipsType = ref<number>(1)
+
+const greetings = computed(() => {
+  if (date.getHours() >= 6 && date.getHours() < 8) {
+		tipsType.value = 1
+    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
+  } else if (date.getHours() >= 8 && date.getHours() < 12) {
+		tipsType.value = 2
+    return "上午好🌞！";
+  } else if (date.getHours() >= 12 && date.getHours() < 18) {
+		tipsType.value = 3
+    return "下午好☕！";
+  } else if (date.getHours() >= 18 && date.getHours() < 24) {
+		tipsType.value = 4
+    return "晚上好🌃！";
+  } else if (date.getHours() >= 0 && date.getHours() < 6) {
+		tipsType.value = 5
+    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
+  }
+});
+
 /**
  * 左侧菜单栏显示/隐藏
  */
@@ -63,6 +86,7 @@ const editMyPasswordForm = () =>{
 	myPasswordBoxIsShow.value = true;
 	// console.log("修改个人密码",myPasswordBoxIsShow.value );
 }
+
 </script>
 
 <template>
@@ -75,12 +99,18 @@ const editMyPasswordForm = () =>{
         @toggle-click="toggleSideBar"
       />
       <breadcrumb />
+			
     </div>
 
     <!-- 右侧导航设置 -->
     <div class="flex">
       <!-- 导航栏设置(窄屏隐藏)-->
       <div v-if="device !== 'mobile'" class="setting-container">
+				<el-text v-if="tipsType==1" class="mx-1" type="success">{{ greetings }}</el-text>
+				<el-text v-if="tipsType==2" class="mx-1" type="primary">{{ greetings }}</el-text>
+				<el-text v-if="tipsType==3" class="mx-1" type="warning">{{ greetings }}</el-text>
+				<el-text v-if="tipsType==4" class="mx-1" type="danger">{{ greetings }}</el-text>
+				<el-text v-if="tipsType==5" class="mx-1" >{{ greetings }}</el-text>
         <!--全屏 -->
         <div class="setting-item" @click="toggle">
           <svg-icon

src/store/modules/user.ts

@@ -20,6 +20,8 @@ export const useUserStore = defineStore("user", () => {
   const perms = ref<Array<string>>([]); // 用户权限编码集合 → 判断按钮权限
   const userKey = useStorage("userKey", "");
   const userToken = useStorage("userToken", "");
+
+	const userInfoCont = ref<any>("");
   /**
    * 登录调用
    *
@@ -30,10 +32,12 @@ export const useUserStore = defineStore("user", () => {
     return new Promise<void>((resolve, reject) => {
       loginApiIng(loginData)
         .then((response) => {
-          const { tokenType, accessToken, key, token } = response.data;
+					// console.log("登陆使用",response);
+          const { tokenType, accessToken, key, token,userinfo } = response.data;
           tokenIng.value = key + "_" + token; // Bearer eyJhbGciOiJIUzI1NiJ9.xxx.xxx
 					userKey.value = key;
           userToken.value = token;
+					// userInfoCont.value = userinfo
           resolve();
         })
         .catch((error) => {
@@ -64,6 +68,7 @@ export const useUserStore = defineStore("user", () => {
       //   });
 			getUserInfoIng()
 					.then(({data})=>{
+						console.log("获取用户信息：角色必须是非null数组！",data);
 						if (!data) {
 							return reject("验证失败，请重新登录。");
 						}
@@ -74,6 +79,7 @@ export const useUserStore = defineStore("user", () => {
 						avatar.value = data.avatar;
 						roles.value = data.roles;
 						perms.value = data.perms;
+						userInfoCont.value = data
 						resolve(data);
 					})
 					.catch((error) => {
@@ -104,6 +110,7 @@ export const useUserStore = defineStore("user", () => {
     nickname.value = "";
 		userKey.value = "";
 		userToken.value = "";
+		userInfoCont.value = ""
     avatar.value = "";
     roles.value = [];
     perms.value = [];
@@ -112,6 +119,7 @@ export const useUserStore = defineStore("user", () => {
     tokenIng,
 		userKey,
     userToken,
+		userInfoCont,
     nickname,
     avatar,
     roles,

src/views/dashboard/components/allorgyear.vue

@@ -0,0 +1,175 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-11-08 10:45:48
+@ 备注: 公司下所有部门当前时间统计值
+-->
+<script lang='ts' setup>
+import * as echarts from 'echarts';	//引入图形界面 
+import { orgTargetAnnualStatistics } from '@/api/displayboardapi/indexapi'
+
+const props = defineProps({
+	educationOrgId:{
+		type:Number,
+		default:309
+	},
+	orgListCont:{
+		type:Object,
+		default(){
+			return {}
+		}
+	}
+})
+const curreorgId = ref<number>(309)
+const allOrgOneMonth = ref<any>() //指定月
+const orgAllYearLoading = ref(false)
+//所有行政组织月度画图对象
+const orgYearFullMonths = ref(null)
+//行政组织月度绩效
+const departmentYears = ref<any>(null)
+
+const yearsInfo = ref<any>("2023")
+
+//获取统计图
+const orgChartDrowData = () => {
+	orgAllYearLoading.value = true
+	let timeYears = allOrgOneMonth.value.getFullYear()
+	yearsInfo.value = timeYears
+	let sendInfo = {
+		orgid:curreorgId.value.toString(),
+		years:timeYears
+	}
+	orgTargetAnnualStatistics(sendInfo)
+		.then((data:any)=>{
+			console.log(" props.dlyear.data", data)
+			if(data.code == 0){
+				let dataAry = new Array
+				if(data.data.series&&data.data.series.length > 0){
+					data.data.series.forEach((item:any)=>{
+						dataAry.push({
+							name: item.name,
+							type: 'line',
+							data: item.datalist
+						})
+					})
+				}
+				let option = {
+ 
+					tooltip: {
+						trigger: 'axis'
+					},
+					legend: {
+						data: data.data.legend,
+						bottom:0
+					},
+					grid: {
+						top:"20px",
+						left: '1%',
+						right: '2%',
+						bottom: '60px',
+						containLabel: true
+					},
+					toolbox: {
+						feature: {
+							saveAsImage: {}
+						}
+					},
+					xAxis: {
+						type: 'category',
+						boundaryGap: false,
+						data: data.data.xAxis
+					},
+					yAxis: {
+						type: 'value',
+						max:data.data.maxscore,
+						min:data.data.minscore,
+					},
+					series: dataAry
+				};
+				orgYearFullMonths.value.clear();
+				orgYearFullMonths.value.setOption(option)
+
+			}
+			orgAllYearLoading.value = false
+		})
+		.finally(()=>{
+			
+		})
+}
+
+onMounted(() => {
+	let dataTime:any = new Date();
+	allOrgOneMonth.value = dataTime
+	
+	curreorgId.value = props.educationOrgId
+	orgYearFullMonths.value = markRaw(echarts.init(departmentYears.value))
+
+	orgChartDrowData();
+	window.addEventListener('resize', () => {
+		orgYearFullMonths.value.resize();
+	});
+	
+	
+})
+</script>
+<template>
+	<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
+			<!--分厂数据统计-->
+			<div class="orgAllMothsTitle">
+				<el-text class="titleInfo">{{ yearsInfo }}年绩效成绩</el-text>
+				<div>
+					<el-select v-model="curreorgId" placeholder="请选择公司"  @change="orgChartDrowData">
+						<el-option
+							v-for="item in props.orgListCont"
+							:key="item.id"
+							:label="item.name"
+							:value="item.id">
+						</el-option>
+					</el-select>
+					<el-date-picker
+						v-model="allOrgOneMonth"
+						type="year"
+						placeholder="请选择时间"
+						@change="orgChartDrowData"
+					/>
+				</div>
+							
+			</div>
+		<div ref="departmentYears" v-loading="orgAllYearLoading" element-loading-text="Loading..." class="allOrgAxisCares">
+							
+		</div>
+	</el-card>
+</template>
+<style  lang='scss' scoped>
+.readback{
+	// background-color:#FF0000;
+	.allOrgAxisCares{
+		display: block;
+		width:100%;
+		height:280px;
+		// overflow:auto;
+	}
+	
+}
+.orgAllMothsTitle{
+	width:100%;
+	display: flex;
+	align-items: center;
+	justify-content:space-between;
+		
+}
+.greenColor{
+	// background-color:#FFAC52;
+	
+	// padding:0 10px 0 10px;
+}
+.span_icon_left{
+	margin-right:10px;
+}
+.cart_top_juLi{
+	// margin-top:10px;
+}
+.titleInfo{
+	font-size: 20px;
+	font-weight: bold;
+}
+</style>

src/views/dashboard/components/application.vue

@@ -0,0 +1,117 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-11-08 19:38:49
+@ 备注: 应用
+-->
+<script lang='ts' setup>
+import AppContent from '@/views/appstore/appmarket/content.vue'
+const appLoading = ref(false)
+const fits = 'fill'
+const boxIsShow = ref(false)
+const appId = ref<number>()
+
+/**
+ * 查看详情
+ */
+ function lookappcont(id:number){
+	appId.value = id
+	boxIsShow.value = true
+}
+//跳转地址
+const jumpUrl = (val:any) =>{
+	createOneClickLogin({url:val})
+		.then(data =>{
+			console.log("跳转地址--->",data.data)
+			if(data.code == 0){
+				window.open(data.data,'_blank')
+			}
+		})
+}
+</script>
+<template>
+	<el-card shadow="always" :body-style="{ padding: '10px' }"  style = "border-radius: 12px; margin-top: 10px; min-height: 335px">
+		<div class="orgAllMothsTitle">
+			<el-text class="titleInfo">快捷应用</el-text>	
+		</div>
+		<div  v-loading="appLoading" element-loading-text="Loading..." class="allOrgAxisCares demo-image">
+			<el-row :gutter="10">
+				<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="gongge_top">
+					<el-image  style="width: 100%; height: 100%" src="/src/assets/index/15.jpg" :fit="fits" @click="jumpUrl('https://jy.hxgk.group')" />
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="gongge_top">
+					<el-image style="width: 100%; height: 100%" src="/src/assets/index/13.jpg" :fit="fits" @click="jumpUrl('http://36.133.124.103:9080/eassso/login?service=http%3A%2F%2F36.133.124.103%3A9080%2Fshr%2F')" />
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="gongge_top">
+					<el-image style="width: 100%; height: 100%" src="/src/assets/icons/zxxy.svg" :fit="fits"  @click="jumpUrl('http://www.hxgk.group')" />
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="gongge_top">
+					<el-image style="width: 100%; height: 100%" src="/src/assets/index/8.png" :fit="fits" @click="jumpUrl('http://120.224.6.6:6005/SyncPlant/login')" />
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="gongge_top">
+					<el-image style="width: 100%; height: 100%" src="/src/assets/index/1.jpg" :fit="fits" @click="lookappcont(3)" />
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="gongge_top">
+					<el-image style="width: 100%; height: 100%" src="/src/assets/icons/jxkh.svg" :fit="fits"  @click="jumpUrl('http://ginadmin.hxgk.group')" />
+				</el-col>
+			</el-row>			
+		</div>
+	</el-card>
+	<AppContent v-model:isshow="boxIsShow" :appcontid="appId" />
+</template>
+<style  lang='scss' scoped>
+.readback{
+	// background-color:#FF0000;
+	.allOrgAxisCares{
+		display: block;
+		width:100%;
+		height:280px;
+		overflow:auto;
+	}
+	
+}
+.gongge_top{
+	margin-top:10px;
+}
+.orgAllMothsTitle{
+	width:100%;
+	display: flex;
+	align-items: center;
+	justify-content:space-between;
+		
+}
+.greenColor{
+	// background-color:#FFAC52;
+	
+	// padding:0 10px 0 10px;
+}
+.span_icon_left{
+	margin-right:10px;
+}
+.cart_top_juLi{
+	// margin-top:10px;
+}
+.titleInfo{
+	font-size: 20px;
+	font-weight: bold;
+}
+</style>
+<style scoped>
+.demo-image .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  display: inline-block;
+  width: 20%;
+  box-sizing: border-box;
+  vertical-align: top;
+}
+.demo-image .block:last-child {
+  border-right: none;
+}
+.demo-image .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+</style>

src/views/dashboard/components/dltbhb.vue

@@ -0,0 +1,162 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-11-07 16:10:10
+@ 备注: 定量指标同比环比
+-->
+<script lang='ts' setup>
+import * as echarts from 'echarts';	//引入图形界面
+import { bdTtsyoy } from '@/api/displayboardapi/indexapi'
+
+const props = defineProps({
+	dlyear:{
+		type:String,
+		default:new Date()
+	},
+	dingLiangOrg:{
+		type:String,
+		default:""
+	},
+	dingLiangTarget:{
+		type:String,
+		default:""
+	},
+	targetListAry:{
+		type:Object,
+		default(){
+			return {}
+		}
+	},
+	mainOrgList:{
+		type:Object,
+		default(){
+			return {}
+		}
+	}
+})
+const creeTime = ref<string>(new Date())
+const loadingDlTHbi = ref(false)
+
+const dingLiangOrgIng = ref()
+const dingLiangTargetIng = ref()
+
+//设置画表对象
+const echartsDlTarThChart = ref<any>()
+//获取学历图标对象
+const dlTargetThChart = ref<any>(null)
+
+const gainDltbhxfx = () =>{
+	let years = creeTime.value.getFullYear()
+	let sebdData = {
+		orgid:dingLiangOrgIng.value.toString(),
+		targetid:dingLiangTargetIng.value.toString(),
+		datetime:[years]
+	}
+	bdTtsyoy(sebdData)
+		.then((data:any) =>{
+			console.log(" props.dlyear.data", data)
+		})
+}
+watch(props.mainOrgList,()=>{
+	
+})
+watch(props.targetListAry,()=>{
+	console.log("改变值---1-->",props.targetListAry)
+	if(props.targetListAry&&props.targetListAry.length > 0){
+		console.log("改变值----->",props.targetListAry)
+		dingLiangTargetIng.value = props.targetListAry[0].id
+	}
+})
+
+watch(props.dingLiangOrg,()=>{
+	dingLiangOrgIng.value = props.dingLiangOrg
+})
+watch(props.dingLiangTarget,()=>{
+	dingLiangTargetIng.value = props.dingLiangTarget
+})
+
+onMounted(() => {
+	console.log(" props.dlyear", props.targetListAry)
+	loadingDlTHbi.value = false
+	creeTime.value = props.dlyear
+	dingLiangOrgIng.value = props.dingLiangOrg
+	dingLiangTargetIng.value = props.dingLiangTarget
+	if(props.targetListAry&&props.targetListAry.length > 0){
+		dingLiangTargetIng.value = props.targetListAry[0].id
+	}
+	// gainDltbhxfx();
+})
+</script>
+<template>
+	<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
+		<div class="orgAllMothsTitle">
+			<el-row>
+				<el-col :span="8">
+					<el-date-picker
+						v-model="creeTime"
+						type="year"
+						placeholder="请选择时间"
+						style="width:100%"
+						
+					/>
+				</el-col>
+				<el-col :span="8">
+					<el-select v-model="dingLiangOrgIng" placeholder="" style="width:100%">
+						<el-option
+							v-for="item in props.mainOrgList"
+							:key="item.id"
+							:label="item.name"
+							:value="item.id">
+						</el-option>
+					</el-select>
+				</el-col>
+				<el-col :span="8">
+					<el-select v-model="dingLiangTargetIng" placeholder="" style="width:100%">
+						<el-option
+							v-for="item in props.targetListAry"
+							:key="item.id"
+							:label="item.name"
+							:value="item.id">
+						</el-option>
+					</el-select>
+				</el-col>
+			</el-row>
+		</div>
+		<div ref="dlTargetThChart"  v-loading="loading" element-loading-text="Loading..." class="allOrgAxisCares">
+			
+		</div>
+	</el-card>
+</template>
+<style  lang='scss' scoped>
+.readback{
+	// background-color:#FF0000;
+	.allOrgAxisCares{
+		display: block;
+		width:100%;
+		height:280px;
+		overflow:auto;
+	}
+	
+}
+.orgAllMothsTitle{
+	width:100%;
+	display: flex;
+	align-items: center;
+	justify-content:space-between;
+		
+}
+.greenColor{
+	// background-color:#FFAC52;
+	
+	// padding:0 10px 0 10px;
+}
+.span_icon_left{
+	margin-right:10px;
+}
+.cart_top_juLi{
+	// margin-top:10px;
+}
+.titleInfo{
+	font-size: 20px;
+	font-weight: bold;
+}
+</style>

src/views/dashboard/components/education.vue

@@ -0,0 +1,145 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-11-07 08:44:17
+@ 备注: 学历饼形图
+-->
+<script lang='ts' setup>
+import * as echarts from 'echarts';	//引入图形界面
+
+import { sendOrgCont,dimissionRateQuery } from '@/api/displayboardapi/types'
+import { getEdtuStru } from '@/api/displayboardapi/indexapi'
+
+const props = defineProps({
+	educationOrgId:{
+		type:Number,
+		default:309
+	},
+	orgListCont:{
+		type:Object,
+		default(){
+			return {}
+		}
+	}
+})
+const loading = ref(false)
+const orgId = ref<number>(309)
+const legendList = new Array
+const seriesData = new Array
+//设置画表对象
+const echartsEducationChart = ref<any>()
+//获取学历图标对象
+const educationChart = ref<any>(null)
+/**
+  * 获取学历
+*/
+function giveXueLi(){
+	getEdtuStru({id:orgId.value})
+		.then(( {data} )=>{
+			seriesData.splice(0,seriesData.length);
+			if(data){
+				if(data.length > 0){
+					
+					data.forEach((item: { education: any; percentage: any; }) => {
+						legendList.push(item.education)
+						seriesData.push({
+							name: item.education,
+							value: item.percentage,
+						})
+					});
+				}
+			}
+		})
+		.finally(()=>{
+			echartsEducationChart.value.clear();
+			echartsEducationChart.value.setOption(option)
+			loading.value=false
+			// 大小自适应
+			window.addEventListener('resize', () => {
+				echartsEducationChart.value.resize();
+			});
+		})
+}
+const option = {
+	tooltip: {
+		trigger: 'item'
+	},
+	toolbox: {
+		feature: {
+			saveAsImage: {}
+		}
+	},
+	series: [
+		{
+		type: 'pie',
+		radius: '60%',
+		data: seriesData,
+		emphasis: {
+			itemStyle: {
+			shadowBlur: 10,
+			shadowOffsetX: 0,
+			shadowColor: 'rgba(0, 0, 0, 0.5)'
+			}
+		}
+		}
+	]
+};
+onMounted(() => {
+	loading.value = true
+	orgId.value = props.educationOrgId
+	echartsEducationChart.value = markRaw(echarts.init(educationChart.value))
+	giveXueLi()
+})
+</script>
+<template>
+	<el-card v-loading="loading" element-loading-text="Loading..." shadow="always" :body-style="{ padding: '10px' }"  style = "border-radius: 12px; margin-top: 10px; min-height: 335px">
+		<!--公司学历-->
+		<div class="orgAllMothsTitle">
+			<el-text class="titleInfo">学历占比</el-text>	
+			<el-select v-model="orgId" placeholder="请选择公司" style="width:170px"  @change="giveXueLi">
+				<el-option
+					v-for="item in props.orgListCont"
+					:key="item.id"
+					:label="item.name"
+					:value="item.id">
+				</el-option>
+			</el-select>
+		</div>
+		<div ref="educationChart" class="allOrgAxisCares">
+									
+		</div>
+	</el-card>
+</template>
+<style  lang='scss' scoped>
+
+	// background-color:#FF0000;
+	.allOrgAxisCares{
+		display: block;
+		width:100%;
+		height:280px;
+		// overflow:auto;
+	}
+	
+
+.orgAllMothsTitle{
+	width:100%;
+	display: flex;
+	align-items: center;
+	justify-content:space-between;
+		
+}
+.greenColor{
+	// background-color:#FFAC52;
+	
+	// padding:0 10px 0 10px;
+}
+.span_icon_left{
+	margin-right:10px;
+}
+.cart_top_juLi{
+	margin-top:10px;
+}
+.titleInfo{
+	font-size: 20px;
+	font-weight: bold;
+}
+</style>

src/views/dashboard/components/hostnews.vue

@@ -0,0 +1,106 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-11-09 08:09:10
+@ 备注: 热门新闻
+-->
+<script lang='ts' setup>
+import { hotNews } from '@/api/displayboardapi/indexapi'
+
+const hotNewsLoading = ref(false)
+const list = ref<any[]>([])
+const gainHotNews = () =>{
+	hotNewsLoading.value=true
+	hotNews({page:1,pagesize:7,type:1})
+		.then((data:any) =>{
+			console.log("热门新闻",data);
+			list.value = data.data.list
+		})
+		.finally(() =>{
+			hotNewsLoading.value=false
+		})
+}
+onMounted(() => {
+	gainHotNews()
+})
+</script>
+<template>
+	<el-card shadow="always" :body-style="{ padding: '10px' }"  style = "border-radius: 12px;margin-top: 10px;; height: 335px">
+		<div class="orgAllMothsTitle">
+			<el-text class="titleInfo">热门新闻</el-text>	
+		</div>
+		<div v-loading="hotNewsLoading" element-loading-text="Loading..." class="allOrgAxisCares">
+			<ul>
+				<li v-for="item in list" :key="item.id" class="orgAllMothsTitle">
+					<el-text truncated>{{ item.title }}</el-text>
+					<span>{{ item.time }}</span>
+				</li>
+			</ul>
+		</div>
+	</el-card>
+</template>
+<style  lang='scss' scoped>
+
+	// background-color:#FF0000;
+	.allOrgAxisCares{
+		display: block;
+		width:100%;
+		height:100%;
+		overflow:auto;
+		ul,	li {
+			font-size:14px;
+			padding:9px 0;
+			// border-bottom:1px solid #EEEEEE;
+		}
+	}
+	
+
+.orgAllMothsTitle{
+	width:100%;
+	display: flex;
+	align-items: center;
+	justify-content:space-between;
+	
+}
+.greenColor{
+	// background-color:#FFAC52;
+	
+	// padding:0 10px 0 10px;
+}
+.span_icon_left{
+	margin-right:10px;
+}
+.cart_top_juLi{
+	// margin-top:10px;
+}
+.titleInfo{
+	font-size: 20px;
+	font-weight: bold;
+}
+
+.alarm-infoList {
+	padding: 15px;
+	box-sizing: border-box;
+	:deep(.el-table) {
+		background-color: transparent;
+    color: #fff;
+ 
+		th {
+			background-color: transparent;
+		}
+		tr {
+			color: #fff;
+			background-color: transparent;
+			&.el-table__row--striped {
+				td.el-table__cell {
+					background-color: transparent;
+				}
+			}
+			&:hover {
+				td.el-table__cell {
+					background-color: transparent;
+				}
+			}
+		}
+	}
+}
+</style>

src/views/dashboard/components/orgeducation.vue

@@ -0,0 +1,173 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-11-08 19:17:12
+@ 备注: 学历占比
+-->
+<script lang='ts' setup>
+import * as echarts from 'echarts';	//引入图形界面
+
+import { sendOrgCont,dimissionRateQuery } from '@/api/displayboardapi/types'
+import { getEdtuStru } from '@/api/displayboardapi/indexapi'
+
+const props = defineProps({
+	educationOrgId:{
+		type:Number,
+		default:309
+	},
+	orgListCont:{
+		type:Object,
+		default(){
+			return {}
+		}
+	}
+})
+const loading = ref(false)
+const orgId = ref<number>(309)
+const legendList = new Array
+const seriesData = new Array
+//设置画表对象
+const echartsEducationChart = ref<any>()
+//获取学历图标对象
+const educationChart = ref<any>(null)
+/**
+  * 获取学历
+*/
+function giveXueLi(){
+	getEdtuStru({id:orgId.value})
+		.then(( {data} )=>{
+			seriesData.splice(0,seriesData.length);
+			if(data){
+				if(data.length > 0){
+					
+					data.forEach((item: { education: any; percentage: any; }) => {
+						legendList.push(item.education)
+						seriesData.push({
+							name: item.education,
+							value: item.percentage,
+						})
+					});
+				}
+			}
+		})
+		.finally(()=>{
+			echartsEducationChart.value.clear();
+			echartsEducationChart.value.setOption(option)
+			loading.value=false
+			// 大小自适应
+			window.addEventListener('resize', () => {
+				echartsEducationChart.value.resize();
+			});
+		})
+}
+const option = {
+	tooltip: {
+		trigger: 'item'
+	},
+	toolbox: {
+		feature: {
+			saveAsImage: {}
+		}
+	},
+	series: [
+		{
+			type: 'pie',
+			radius: '60%',
+			data: seriesData,
+			emphasis: {
+				itemStyle: {
+					shadowBlur: 10,
+					shadowOffsetX: 0,
+					shadowColor: 'rgba(0, 0, 0, 0.5)'
+				}
+			},
+			label: {
+				normal:{
+					show: true,
+						formatter: (d: any) => {
+							return d.name + '（' +  d.value  + '人' +'）'
+						}
+				}
+			}
+		},
+		{
+			type: 'pie',
+			radius: '60%',
+			data: seriesData,
+			emphasis: {
+				itemStyle: {
+					shadowBlur: 10,
+					shadowOffsetX: 0,
+					shadowColor: 'rgba(0, 0, 0, 0.5)'
+				}
+			},
+			label: {
+				normal:{
+					position: 'inside',
+					show: true,
+					formatter: (d: any) => {
+						return d.percent + '%'
+					}
+				}
+			}
+		}
+
+	]
+};
+onMounted(() => {
+	loading.value = true
+	orgId.value = props.educationOrgId
+	echartsEducationChart.value = markRaw(echarts.init(educationChart.value))
+	giveXueLi()
+})
+</script>
+<template>
+	<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
+								<!--单一行政组织全年统计-->
+		<div class="orgAllMothsTitle">
+			<el-text class="titleInfo">学历占比</el-text>
+			<el-select v-model="orgId" placeholder="请选择公司"  @change="giveXueLi">
+				<el-option
+					v-for="item in props.orgListCont"
+					:key="item.id"
+					:label="item.name"
+					:value="item.id">
+				</el-option>
+			</el-select>
+		</div>
+		<div ref="educationChart" class="allOrgAxisCares">
+									
+		</div>
+	</el-card>
+</template>
+<style  lang='scss' scoped>
+.allOrgAxisCares{
+	display: block;
+	width:100%;
+	height:280px;
+	// overflow:auto;
+}
+	
+
+.orgAllMothsTitle{
+	width:100%;
+	display: flex;
+	align-items: center;
+	justify-content:space-between;
+		
+}
+.greenColor{
+	// background-color:#FFAC52;
+	
+	// padding:0 10px 0 10px;
+}
+.span_icon_left{
+	margin-right:10px;
+}
+.cart_top_juLi{
+	margin-top:10px;
+}
+.titleInfo{
+	font-size: 20px;
+	font-weight: bold;
+}
+</style>

src/views/dashboard/components/orguserage.vue

@@ -0,0 +1,170 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-11-08 18:48:27
+@ 备注: 行政组织年龄结构
+-->
+<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>("年龄结构图")
+//设置画表对象
+const orgAgeChart = ref<any>()
+//获取学历图标对象
+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: {
+							feature: {
+								saveAsImage: {}
+							}
+						},
+						series: [
+							{
+								type: 'pie',
+								radius: '60%',
+								data: seriesOrgAgeData,
+								emphasis: {
+									itemStyle: {
+										shadowBlur: 10,
+										shadowOffsetX: 0,
+										shadowColor: 'rgba(0, 0, 0, 0.5)'
+									}
+								},
+								label: {
+									normal:{
+										show: true,
+										formatter: (d: any) => {
+											return d.name + '（' +  d.value  + '人' +'）'
+										}
+									}
+								}
+							},
+							{
+								type: 'pie',
+								radius: '60%',
+								data: seriesOrgAgeData,
+								emphasis: {
+									itemStyle: {
+										shadowBlur: 10,
+										shadowOffsetX: 0,
+										shadowColor: 'rgba(0, 0, 0, 0.5)'
+									}
+								},
+								label: {
+									normal:{
+										position: 'inside',
+										show: true,
+										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();
+	});
+})
+</script>
+<template>
+	<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
+		<!--单月全厂统计-->
+		<div class="orgAllMothsTitle">
+			<el-text class="titleInfo">{{ orgAgeTitle }}</el-text>
+			<el-select v-model="orgAgeId" placeholder="请选择公司"   @change="gainOrgAgeRatio">
+				<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>
+.readback{
+	// background-color:#FF0000;
+	.allOrgAxisCares{
+		display: block;
+		width:100%;
+		height:280px;
+		overflow:auto;
+	}
+	
+}
+.orgAllMothsTitle{
+	width:100%;
+	display: flex;
+	align-items: center;
+	justify-content:space-between;
+		
+}
+.greenColor{
+	// background-color:#FFAC52;
+	
+	// padding:0 10px 0 10px;
+}
+.span_icon_left{
+	margin-right:10px;
+}
+.cart_top_juLi{
+	// margin-top:10px;
+}
+.titleInfo{
+	font-size: 20px;
+	font-weight: bold;
+}
+</style>

src/views/dashboard/components/sanlianping.vue

@@ -0,0 +1,587 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-11-08 08:44:54
+@ 备注: 三联屏
+-->
+<script lang='ts' setup>
+import * as echarts from 'echarts';	//引入图形界面
+import { bdTtsyoy,getCompanyDeparment,targetListForDepartment,bdBdtTs,bDtTsatTryoy } from '@/api/displayboardapi/indexapi'
+
+const dlhbLoading = ref(false)
+const dlhbLoadingMb = ref(false)
+const mainOrgList = ref<any[]>([])
+const targetListAry = ref<any[]>([])
+const targetListAryes = ref<any[]>([])
+
+const targetXingListAry = ref<any[]>([])
+//定性同比环比分析
+const dingXingYear = ref<number>()
+const dingXingOrg = ref<any>()
+const dingXingTarget = ref<any>()
+//定量指标目标达成
+const dingLiangDaChengYear = ref<number>()
+const dingLiangDaChengOrg = ref<any>()
+const dingLiangDaChengTarget = ref<any>()
+//定量同比环比分析
+const dingLiangYear = ref<number>()
+const dingLiangOrg = ref<any>()
+const dingLiangTarget = ref<any>()
+//获取公司下的主部门
+const getCompanyMainSunOrg = () =>{
+	let sendIfo = {
+		"idstr":"309" //userStore.userInfoCont.company
+	}
+	getCompanyDeparment(sendIfo)
+		.then((data:any) =>{
+			console.log("获取行政组织-1-->",data)
+			mainOrgList.value = data.data
+			if(data.data && data.data.length > 0){
+				dingXingOrg.value = data.data[0].id
+				dingLiangDaChengOrg.value = data.data[0].id
+				dingLiangOrg.value = data.data[0].id
+				orgAboutTarget(data.data[0].id.toString(),1)
+				orgAboutTarget(data.data[0].id.toString(),2)
+			}
+			
+		})
+}
+//根据行政组织获取指标
+const orgAboutTarget = (orgId:string,tarAttribute:number,types?:number) =>{
+	let sendIfo = {
+		id:orgId,
+		attribute:tarAttribute
+	}
+	targetListForDepartment(sendIfo)
+		.then((data:any) =>{
+			console.log("获取指标-1-->",data)
+			if(tarAttribute==1){
+				targetXingListAry.value = data.data
+				if(data.data&&data.data.length>0){
+					dingXingTarget.value = data.data[0].id
+					darwDxTargetChart()
+				}
+			}else{
+				
+				if(data.data&&data.data.length>0){
+					switch (types) {
+						case 1:
+							targetListAryes.value =  data.data
+							dingLiangTarget.value = data.data[0].id.toString()
+							drawDlTbHbFx();
+							break;
+						case 2:
+							targetListAry.value = data.data
+							dingLiangDaChengTarget.value = data.data[0].id
+							bdBdtTsMubiao();
+							break
+						default:
+							targetListAryes.value =  data.data
+							targetListAry.value = data.data
+							dingLiangDaChengTarget.value = data.data[0].id
+							dingLiangTarget.value = data.data[0].id.toString()
+							drawDlTbHbFx();
+							bdBdtTsMubiao();
+							break;
+					}
+					
+				}
+			}
+			
+		})
+}
+//定量指标同比环比分析
+const dlDbHbFx = ref<any>()
+const dlTargetThChart  = ref<any>(null)
+const drawDlTbHbFx = () =>{
+	dlhbLoading.value=true
+	let timeYears = dingLiangYear.value.getFullYear()
+	let sendInfo = {
+		orgid:dingLiangOrg.value.toString(),
+		targetid:dingLiangTarget.value,
+		datetime:[timeYears]
+	}
+	bdTtsyoy(sendInfo)
+		.then((data)=>{
+			if(data.code == 0){
+				let seriesAry = new Array
+				if(data.data.series&&data.data.series.length>0){
+					data.data.series.forEach((item:any)=>{
+						seriesAry.push({
+							type:'bar',
+							data:item.data,
+							tooltip:item.tooltip,
+							name:item.name,
+							itemStyle: {
+								normal: {
+									label: {
+										show: true,		//开启显示
+										position: 'top',	//在上方显示
+									}
+								}
+							}
+						})
+					})
+				}
+				let optionData = {
+					tooltip: {
+					    trigger: 'axis',
+					    axisPointer: {
+					      type: 'shadow'
+					    }
+					},
+					label:{
+						normal:{
+							show:true,
+							position:"top"
+						}
+					},
+					toolbox: {
+						feature: {
+							saveAsImage: {}
+						}
+					},
+					grid:{
+						bottom: "1%",
+						left: "3%",
+						right: "1%",
+						top:"15%",
+						containLabel: true
+					},
+					xAxis: {
+					    type: 'category',
+					    data: data.data.xaxis,
+					    axisPointer: {
+					  		type: 'shadow'
+					  	},
+						axisLabel:{
+							interval: 0
+						}
+					},
+					yAxis: {
+					    type: data.data.yaxis.type,
+					    name:"定量指标同比环比",
+					    max:data.data.yaxis.max,
+					    min:data.data.yaxis.min,
+					    nameTextStyle:{
+							padding:[0,0,0,0]
+						},
+					    axisLabel: {
+							formatter: '{value} '+data.data.yaxis.formatter
+						}
+					},
+					series:seriesAry
+				}
+				dlDbHbFx.value.clear();
+				dlDbHbFx.value.setOption(optionData)
+				dlhbLoading.value=false
+				
+			}
+		})
+}
+//定量指标目标达成分析
+const dlDbHbFxMubiao = ref<any>()
+const dlTargetThChartMubiao  = ref<any>(null)
+const bdBdtTsMubiao = () =>{
+	dlhbLoadingMb.value = true
+	let timeYears = dingLiangDaChengYear.value.getFullYear()
+	let sendInfo = {
+		orgid:dingLiangDaChengOrg.value.toString(),
+		targetid:dingLiangDaChengTarget.value,
+		datetime:timeYears.toString()
+	}
+	bdBdtTs(sendInfo)
+		.then((data:any) =>{
+			console.log("val.toString",data)
+			if(data.code == 0){
+				let chartMapDateJixiaoDuo =  {
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+						  type: 'cross',
+						  crossStyle: {
+							color: '#999'
+						  }
+						}
+					},
+					grid:{
+						bottom: "1%",
+						containLabel: true,
+						left: "0%",
+						right: "0%"
+					},
+					toolbox: {
+						feature: {
+							saveAsImage: {}
+						}
+					},
+					legend: {
+						data: data.data.legend
+					},
+					xAxis: [
+						{
+							type: 'category',
+							data: data.data.xaxis,
+							axisPointer: {
+								type: 'shadow'
+							},
+							axisLabel:{
+								interval: 0
+							}
+						}
+					],
+					yAxis: [
+						{
+							type: data.data.yaxis[0].type,
+							name: data.data.yaxis[0].name,
+							min: data.data.yaxis[0].min,
+							max: data.data.yaxis[0].max,
+							nameTextStyle:{
+								padding:[0,0,0,100]
+							},
+							axisLabel: {
+								formatter: '{value} '+data.data.yaxis[0].formatter,
+								interval: 0
+							}
+						},
+						{
+							type: data.data.yaxis[1].type,
+							name: data.data.yaxis[1].name,
+							min: data.data.yaxis[1].min,
+							max: data.data.yaxis[1].max,
+				
+							axisLabel: {
+								formatter: '{value} '+data.data.yaxis[1].formatter,
+								interval: 0
+							},
+							splitLine: {
+								show: false
+							}
+						}
+					],
+					series: [
+						{
+							name: data.data.series[0].name,
+							type: data.data.series[0].type,
+							tooltip: {
+								valueFormatter: function (value) {
+									return value + data.data.series[0].tooltip;
+								}
+							},
+							data: data.data.series[0].data
+						},
+						{
+						  name: data.data.series[1].name,
+						  type: data.data.series[1].type,
+						  tooltip: {
+							valueFormatter: function (value) {
+							  return value + data.data.series[1].tooltip;
+							}
+						  },
+						  data: data.data.series[1].data
+						},
+						{
+						  name: data.data.series[2].name,
+						  type: data.data.series[2].type,
+						  yAxisIndex: 1,
+						  tooltip: {
+							valueFormatter: function (value) {
+							  return value + data.data.series[2].tooltip;
+							}
+						  },
+						  data: data.data.series[2].data
+						}
+					]
+				}
+				dlDbHbFxMubiao.value.clear();
+				dlDbHbFxMubiao.value.setOption(chartMapDateJixiaoDuo)
+				dlhbLoadingMb.value=false
+			}
+		})
+}
+//定性指标同比环比分析
+const dxTargetDarw = ref<any>()
+const dxTargetChart  = ref<any>(null)
+const dxTargetLoad = ref(false)
+const darwDxTargetChart = () => {
+	dxTargetLoad.value = true
+	let timeYears = dingXingYear.value.getFullYear()
+	let sendInfo = {
+		orgid:dingXingOrg.value.toString(),
+		targetid:dingXingTarget.value,
+		datetime:[timeYears]
+	}
+	bDtTsatTryoy(sendInfo)
+		.then((data:any)=>{
+			if(data.code == 0){
+				let seriesAry = new Array
+				if(data.data.series&&data.data.series.length>0){
+					data.data.series.forEach((item:any)=>{
+						seriesAry.push({
+							type:'bar',
+							data:item.data,
+							tooltip:item.tooltip,
+							name:item.name,
+							itemStyle: {
+								normal: {
+									label: {
+										show: true,		//开启显示
+										position: 'bottom',	//在上方显示
+									}
+								}
+							}
+						})
+					})
+				}
+				let optionData = {
+					tooltip: {
+					    trigger: 'axis',
+					    axisPointer: {
+					      type: 'shadow'
+					    }
+					},
+					label:{
+						normal:{
+							show:true,
+							position:"top"
+						}
+					},
+					toolbox: {
+						feature: {
+							saveAsImage: {}
+						}
+					},
+					grid:{
+						bottom: "1%",
+						left: "3%",
+						right: "1%",
+						top:"15%",
+						containLabel: true
+					},
+					xAxis: {
+					    type: 'category',
+					    data: data.data.xaxis,
+					    axisPointer: {
+					  		type: 'shadow'
+					  	},
+						axisLabel:{
+							interval: 0
+						}
+					},
+					yAxis: {
+					    type: data.data.yaxis.type,
+					    name:"定性指标同比环比分析",
+					    max:data.data.yaxis.max,
+					    min:data.data.yaxis.min,
+					    nameTextStyle:{
+							padding:[0,0,0,0]
+						},
+					    axisLabel: {
+							formatter: '{value} '+data.data.yaxis.formatter
+						}
+					},
+					series:seriesAry
+				}
+				dxTargetDarw.value.clear();
+				dxTargetDarw.value.setOption(optionData)
+			}
+			dxTargetLoad.value = false
+		})
+}
+onMounted(() => {
+	let dataTime:any = new Date();
+	dingXingYear.value = dataTime
+	dingLiangDaChengYear.value = dataTime
+	dingLiangYear.value = dataTime
+	getCompanyMainSunOrg();
+	dlDbHbFx.value = markRaw(echarts.init(dlTargetThChart.value));
+	dlDbHbFxMubiao.value = markRaw(echarts.init(dlTargetThChartMubiao.value));
+	dxTargetDarw.value = markRaw(echarts.init(dxTargetChart.value));
+	// 大小自适应
+	window.addEventListener('resize', () => {
+		dlDbHbFx.value.resize();
+		dlDbHbFxMubiao.value.resize();
+		dxTargetDarw.value.resize();
+	});
+})
+
+
+//历史同比获取指标列表
+const alterDlTbhb = () => {
+	drawDlTbHbFx();
+}
+const alterDlTbhbOrg = (id:any) => {
+	orgAboutTarget(id.toString(),2,1)
+}
+//定量指标目标达成分析
+const dlMuBiaoZhiBiao = () => {
+	bdBdtTsMubiao()
+}
+const dlMuBiaoOrg = (id:any) => {
+	orgAboutTarget(id.toString(),2,2)
+}
+//定性指标同比环比分析
+const dxTargetGaibian = () => {
+	darwDxTargetChart();
+}
+const dxOrgGaibian = (id:any) => {
+	orgAboutTarget(id.toString(),1)
+}
+</script>
+<template>
+	<el-row :gutter="10">
+		<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
+			<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
+				<div class="orgAllMothsTitle">
+					<el-row>
+						<el-col :span="8">
+							<el-date-picker
+								v-model="dingXingYear"
+								type="year"
+								placeholder="请选择时间"
+								style="width:100%"
+							/>
+						</el-col>
+						<el-col :span="8">
+							<el-select v-model="dingXingOrg" placeholder="" style="width:100%" @change="dxOrgGaibian">
+								<el-option
+									v-for="item in mainOrgList"
+									:key="item.id"
+									:label="item.name"
+									:value="item.id">
+								</el-option>
+							</el-select>
+						</el-col>
+						<el-col :span="8">
+							<el-select v-model="dingXingTarget" placeholder="" style="width:100%" @change="dxTargetGaibian">
+								<el-option
+									v-for="item in targetXingListAry"
+									:key="item.id"
+									:label="item.name"
+									:value="item.id">
+								</el-option>
+							</el-select>
+						</el-col>
+					</el-row>
+				</div>
+				<div ref="dxTargetChart" v-loading="dxTargetLoad" element-loading-text="Loading..." class="allOrgAxisCares">
+					
+				</div>
+			</el-card>
+		</el-col>
+		<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
+			<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
+				<div class="orgAllMothsTitle">
+					<el-row>
+						<el-col :span="8">
+							<el-date-picker
+								v-model="dingLiangDaChengYear"
+								type="year"
+								placeholder="请选择时间"
+								style="width:100%"
+							/>
+						</el-col>
+						<el-col :span="8">
+							<el-select v-model="dingLiangDaChengOrg" placeholder="" style="width:100%" @change="dlMuBiaoOrg">
+								<el-option
+									v-for="item in mainOrgList"
+									:key="item.id"
+									:label="item.name"
+									:value="item.id">
+								</el-option>
+							</el-select>
+						</el-col>
+						<el-col :span="8">
+							<el-select v-model="dingLiangDaChengTarget" placeholder="" style="width:100%" @change="dlMuBiaoZhiBiao">
+								<el-option
+									v-for="item in targetListAry"
+									:key="item.id"
+									:label="item.name"
+									:value="item.id">
+								</el-option>
+							</el-select>
+						</el-col>
+					</el-row>
+				</div> 
+				<div ref="dlTargetThChartMubiao" v-loading="dlhbLoadingMb" element-loading-text="Loading..." class="allOrgAxisCares">
+					
+				</div>
+			</el-card>
+		</el-col>
+		<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
+			<!--定量指标同比环比-->
+			<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
+				<div class="orgAllMothsTitle">
+					<el-row>
+						<el-col :span="8">
+							<el-date-picker
+								v-model="dingLiangYear"
+								type="year"
+								placeholder="请选择时间"
+								style="width:100%"
+								
+							/>
+						</el-col>
+						<el-col :span="8">
+							<el-select v-model="dingLiangOrg" placeholder="" style="width:100%" @change="alterDlTbhbOrg">
+								<el-option
+									v-for="item in mainOrgList"
+									:key="item.id"
+									:label="item.name"
+									:value="item.id">
+								</el-option>
+							</el-select>
+						</el-col>
+						<el-col :span="8">
+							<el-select v-model="dingLiangTarget" placeholder="" style="width:100%" @change="alterDlTbhb">
+								<el-option
+									v-for="item in targetListAryes"
+									:key="item.id"
+									:label="item.name"
+									:value="item.id">
+								</el-option>
+							</el-select>
+						</el-col>
+					</el-row>
+				</div>
+				<div ref="dlTargetThChart"  v-loading="dlhbLoading" element-loading-text="Loading..." class="allOrgAxisCares">
+					
+				</div>
+			</el-card>
+		</el-col>
+	</el-row>
+</template>
+<style  lang='scss' scoped>
+.readback{
+	// background-color:#FF0000;
+	.allOrgAxisCares{
+		display: block;
+		width:100%;
+		height:280px;
+		overflow:auto;
+	}
+	
+}
+.orgAllMothsTitle{
+	width:100%;
+	display: flex;
+	align-items: center;
+	justify-content:space-between;
+		
+}
+.greenColor{
+	// background-color:#FFAC52;
+	
+	// padding:0 10px 0 10px;
+}
+.span_icon_left{
+	margin-right:10px;
+}
+.cart_top_juLi{
+	// margin-top:10px;
+}
+.titleInfo{
+	font-size: 20px;
+	font-weight: bold;
+	
+}
+</style>

src/views/dashboard/components/userinfo.vue

@@ -0,0 +1,74 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-11-07 09:48:35
+@ 备注: 当前登陆人信息
+-->
+<script lang='ts' setup>
+import UserRole from '@/assets/icons/user.svg'
+const props = defineProps({
+	userStore:{
+		type:Object,
+		default(){
+			return {}
+		}
+	}
+})
+// const userStore = props.userStore
+// onMounted(()=>{
+
+// })
+</script>
+<template>
+	<el-card shadow="always" :body-style="{ padding: '10px'  }" style = "border-radius: 12px;margin-top: 10px;; min-height: 335px">
+			<el-row :gutter="10">
+				<el-col :xs="24" :sm="12" :md="11" :lg="11" :xl="10" class="readback">
+					<!--人员头像-->
+					<el-avatar shape="square" :fit="cover" :src="props.userStore.avatar!=''?props.userStore.avatar:UserRole" style="width:100%; height:130px;" />
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="13" :lg="13" :xl="14" class="greenColor">
+					<!--人员信息-->
+					<el-descriptions :column="1">
+						<el-descriptions-item>
+							<template #label>
+								<span class="fa fa-user-o span_icon_left"></span> 姓名
+							</template>
+							{{props.userStore.userInfoCont.nickname}}
+						</el-descriptions-item>
+						<el-descriptions-item>
+							<template #label>
+								<span class="fa fa-vcard-o span_icon_left"></span>工号
+							</template>
+							{{ props.userStore.userInfoCont.number }}
+						</el-descriptions-item>
+						<el-descriptions-item>
+							<template #label>
+								<span class="fa fa-transgender-alt span_icon_left"></span>性别
+							</template>
+							{{ props.userStore.userInfoCont.genderstr }}
+						</el-descriptions-item>
+						<el-descriptions-item>
+							<template #label>
+								<span class="fa fa-volume-control-phone span_icon_left"></span>电话
+							</template>
+							{{ props.userStore.userInfoCont.mobilephone }}
+						</el-descriptions-item>
+					</el-descriptions>
+				</el-col>
+			</el-row>
+			<el-row>
+				<el-col :xs="4" :sm="7" :md="6" :lg="5" :xl="4"><span class="fa fa-map-marker span_icon_left"></span>住址</el-col>
+				<el-col :xs="20" :sm="17" :md="18" :lg="19" :xl="20">{{ props.userStore.userInfoCont.currentresidence }}</el-col>
+			</el-row>
+			<el-row>
+				<el-col :xs="4" :sm="7" :md="6" :lg="5" :xl="4"><span class="fa fa-podcast span_icon_left"></span>职务</el-col>
+				<el-col :xs="20" :sm="17" :md="18" :lg="19" :xl="20"><el-text v-for="(im,index) in props.userStore.userInfoCont.postlist" :key="index">{{im}}</el-text></el-col>
+			</el-row>
+			
+	</el-card>
+</template>
+<style  lang='scss' scoped>
+.span_icon_left{
+	margin-right:10px;
+	
+}
+</style>

src/views/dashboard/index.vue

@@ -1,250 +1,138 @@
-<script lang="ts">
-export default { name: "Dashboard" };
-</script>
+<!--
+@ 作者: 秦东
+@ 时间: 2023-11-06 13:39:13
+@ 备注: 首页
+-->
+<script lang='ts' setup>
+import * as echarts from 'echarts';	//引入图形界面
 
-<script setup lang="ts">
 import { useUserStore } from "@/store/modules/user";
-import { useTransition, TransitionPresets } from "@vueuse/core";
 
-import GithubCorner from "@/components/GithubCorner/index.vue";
-import SvgIcon from "@/components/SvgIcon/index.vue";
-import BarChart from "./components/BarChart.vue";
-import PieChart from "./components/PieChart.vue";
-import RadarChart from "./components/RadarChart.vue";
+
+import { sendOrgCont } from '@/api/displayboardapi/types'
+import { getOrgChiled,getCompanyDeparment,targetListForDepartment } from '@/api/displayboardapi/indexapi'
+
+import UserInfo from "@/views/dashboard/components/userinfo.vue";
+import SanLianpIng from "@/views/dashboard/components/sanlianping.vue";
+import EducationChart from "@/views/dashboard/components/education.vue";
+import AllOrgYear from "@/views/dashboard/components/allorgyear.vue";
+import OrgUserAge from "@/views/dashboard/components/orguserage.vue"; 
+import OrgEducation from "@/views/dashboard/components/orgeducation.vue"; 
+import Application from "@/views/dashboard/components/application.vue";  
+import HostNews from "@/views/dashboard/components/hostnews.vue";
 
 const userStore = useUserStore();
+const orgListCont = ref<sendOrgCont>()
+const educationOrgId = ref<number>(309)
+
+/**
+ * 获取行政组织
+ */
+function getOrgList(){
+	getOrgChiled({id:313})
+		.then(( {data} )=>{
+			console.log("获取行政组织-2-->",data)
+			orgListCont.value = data.list
+			educationOrgId.value = data.current
+			
+		})
+}
+
+
+
+const orgAllYears = ref<any>()	//当前年
+
+const oenOrg = ref<any>() //单一行政组织
 
-const date: Date = new Date();
-
-const greetings = computed(() => {
-  if (date.getHours() >= 6 && date.getHours() < 8) {
-    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
-  } else if (date.getHours() >= 8 && date.getHours() < 12) {
-    return "上午好🌞！";
-  } else if (date.getHours() >= 12 && date.getHours() < 18) {
-    return "下午好☕！";
-  } else if (date.getHours() >= 18 && date.getHours() < 24) {
-    return "晚上好🌃！";
-  } else if (date.getHours() >= 0 && date.getHours() < 6) {
-    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
-  }
-});
-
-const duration = 5000;
-
-// 收入金额
-const amount = ref(0);
-const amountOutput = useTransition(amount, {
-  duration: duration,
-  transition: TransitionPresets.easeOutExpo,
-});
-amount.value = 2000;
-
-// 访问数
-const visitCount = ref(0);
-const visitCountOutput = useTransition(visitCount, {
-  duration: duration,
-  transition: TransitionPresets.easeOutExpo,
-});
-visitCount.value = 2000;
-
-//消息数
-const messageCount = ref(0);
-const messageCountOutput = useTransition(messageCount, {
-  duration: duration,
-  transition: TransitionPresets.easeOutExpo,
-});
-messageCount.value = 2000;
-
-// 订单数
-const orderCount = ref(0);
-const orderCountOutput = useTransition(orderCount, {
-  duration: duration,
-  transition: TransitionPresets.easeOutExpo,
-});
-orderCount.value = 2000;
-</script>
 
+//渲染完页面再执行
+onMounted(() => {
+	
+	getOrgList();
+	
+})
+</script>
 <template>
-  <div class="dashboard-container">
-    <!-- github角标 -->
-    
-
-    <!-- 用户信息 -->
-    <el-row class="mb-8">
-      <el-card class="w-full">
-        <div class="flex justify-between flex-wrap">
-          <div class="flex items-center">
-            <img
-              class="user-avatar"
-              :src="userStore.avatar + '?imageView2/1/w/80/h/80'"
-            />
-            <span class="ml-[10px] text-[16px]">
-              {{ userStore.nickname }}
-            </span>
-          </div>
-
-          <div class="leading-[40px]">
-            {{ greetings }}
-          </div>
-
-          <div v-if="false" class="space-x-2 flex items-center" >
-            <el-link
-              target="_blank"
-              type="danger"
-              href="https://www.cnblogs.com/haoxianrui/p/16090029.html"
-              >官方0到1教程</el-link
-            >
-            <el-divider direction="vertical" />
-            <el-link
-              target="_blank"
-              type="success"
-              href="https://gitee.com/youlaiorg/vue3-element-admin"
-              >Gitee源码</el-link
-            >
-            <el-divider direction="vertical" />
-            <el-link
-              target="_blank"
-              type="primary"
-              href="https://github.com/youlaitech/vue3-element-admin"
-              >GitHub源码
-            </el-link>
-          </div>
-        </div>
-      </el-card>
-    </el-row>
-
-    <!-- 数据卡片 -->
-    <el-row :gutter="40" class="mb-4">
-      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
-        <div class="data-box">
-          <div
-            class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded"
-          >
-            <svg-icon icon-class="uv" size="3em" />
-          </div>
-          <div class="flex flex-col space-y-3">
-            <div class="text-[var(--el-text-color-secondary)]">访问数</div>
-            <div class="text-lg">
-              {{ Math.round(visitCountOutput) }}
-            </div>
-          </div>
-        </div>
-      </el-col>
-
-      <!--消息数-->
-      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
-        <div class="data-box">
-          <div
-            class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded"
-          >
-            <svg-icon icon-class="message" size="3em" />
-          </div>
-          <div class="flex flex-col space-y-3">
-            <div class="text-[var(--el-text-color-secondary)]">消息数</div>
-            <div class="text-lg">
-              {{ Math.round(messageCountOutput) }}
-            </div>
-          </div>
-        </div>
-      </el-col>
-
-      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
-        <div class="data-box">
-          <div
-            class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded"
-          >
-            <svg-icon icon-class="money" size="3em" />
-          </div>
-          <div class="flex flex-col space-y-3">
-            <div class="text-[var(--el-text-color-secondary)]">收入金额</div>
-            <div class="text-lg">
-              {{ Math.round(amountOutput) }}
-            </div>
-          </div>
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="12" :lg="6" class="mb-2">
-        <div class="data-box">
-          <div
-            class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
-          >
-            <svg-icon icon-class="shopping" size="3em" />
-          </div>
-          <div class="flex flex-col space-y-3">
-            <div class="text-[var(--el-text-color-secondary)]">订单数</div>
-            <div class="text-lg">
-              {{ Math.round(orderCountOutput) }}
-            </div>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
-
-    <!-- Echarts 图表 -->
-    <el-row :gutter="40">
-      <el-col :sm="24" :lg="8" class="mb-4">
-        <BarChart
-          id="barChart"
-          height="400px"
-          width="100%"
-          class="bg-[var(--el-bg-color-overlay)]"
-        />
-      </el-col>
-
-      <el-col :xs="24" :sm="12" :lg="8" class="mb-4">
-        <PieChart
-          id="pieChart"
-          height="400px"
-          width="100%"
-          class="bg-[var(--el-bg-color-overlay)]"
-        />
-      </el-col>
-
-      <el-col :xs="24" :sm="12" :lg="8" class="mb-4">
-        <RadarChart
-          id="radarChart"
-          height="400px"
-          width="100%"
-          class="bg-[var(--el-bg-color-overlay)]"
-        />
-      </el-col>
-    </el-row>
-  </div>
+		<div ref="masterBody" class="app-container" style="margin-top:10px;">
+			<el-row :gutter="10">
+				<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback">
+					<AllOrgYear  :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
+				</el-col>
+				<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor">
+					<UserInfo :user-store="userStore" />
+				</el-col>
+			</el-row>
+			<el-row :gutter="10" class="cart_top_juLi">
+				<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback">
+
+					<el-row :gutter="10">
+						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback">
+						
+							<OrgUserAge :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
+						
+						</el-col>
+						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback">
+							
+							<OrgEducation :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
+						
+						</el-col>
+					</el-row>
+					
+					
+
+
+
+				</el-col>
+				<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor">
+				
+					<HostNews />
+				
+				</el-col>
+			</el-row>
+			<el-row :gutter="10" class="cart_top_juLi">
+				<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback">
+				
+					<SanLianpIng />
+				
+				</el-col>
+				<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor">
+					<Application :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
+					
+				</el-col>
+			</el-row>
+		</div>
 </template>
+<style  lang='scss' scoped>
+.readback{
+	// background-color:#FF0000;
+	.allOrgAxisCares{
+		display: block;
+		width:100%;
+		height:280px;
+		overflow:auto;
+	}
+	
+}
+.orgAllMothsTitle{
+	width:100%;
+	display: flex;
+	align-items: center;
+	justify-content:space-between;
+		
+}
+.greenColor{
+	// background-color:#FFAC52;
 	
-<style lang="scss" scoped>
-.dashboard-container {
-  position: relative;
-  padding: 24px;
-
-  .user-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-  }
-
-  .github-corner {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 99;
-    border: 0;
-  }
-
-  .data-box {
-    display: flex;
-    justify-content: space-between;
-    padding: 20px;
-    font-weight: bold;
-    color: var(--el-text-color-regular);
-    background: var(--el-bg-color-overlay);
-    border-color: var(--el-border-color);
-    box-shadow: var(--el-box-shadow-dark);
-  }
-
-  .svg-icon {
-    fill: currentcolor !important;
-  }
+	// padding:0 10px 0 10px;
+}
+.span_icon_left{
+	margin-right:10px;
+}
+.cart_top_juLi{
+	// margin-top:10px;
+}
+.titleInfo{
+	font-size: 20px;
+	font-weight: bold;
 }
 </style>

src/views/dashboard/index_20231108.vue

@@ -0,0 +1,398 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-11-06 13:39:13
+@ 备注: 首页
+-->
+<script lang='ts' setup>
+import * as echarts from 'echarts';	//引入图形界面
+
+import { useUserStore } from "@/store/modules/user";
+
+
+import { sendOrgCont } from '@/api/displayboardapi/types'
+import { getOrgChiled,getCompanyDeparment,targetListForDepartment } from '@/api/displayboardapi/indexapi'
+
+import UserInfo from "@/views/dashboard/components/userinfo.vue";
+
+import DingLiangTongBiHuanBi from "@/views/dashboard/components/dltbhb.vue";
+
+import EducationChart from "@/views/dashboard/components/education.vue";
+
+const userStore = useUserStore();
+
+const legendList = new Array
+const seriesData = new Array
+const orgListCont = ref<sendOrgCont>()
+const educationOrgId = ref<number>(309)
+//公司主部门
+const mainOrgList = ref<any[]>([])
+const targetListAry = ref<any[]>([])
+const targetXingListAry = ref<any[]>([])
+//定性同比环比分析
+const dingXingYear = ref<number>()
+const dingXingOrg = ref<any>()
+const dingXingTarget = ref<any>()
+//定量指标目标达成
+const dingLiangDaChengYear = ref<number>()
+const dingLiangDaChengOrg = ref<any>()
+const dingLiangDaChengTarget = ref<any>()
+//定量同比环比分析
+const dingLiangYear = ref<number>()
+const dingLiangOrg = ref<any>()
+const dingLiangTarget = ref<any>()
+
+const loadPage = ref(false)
+/**
+ * 获取行政组织
+ */
+function getOrgList(){
+	getOrgChiled({id:313})
+		.then(( {data} )=>{
+			console.log("获取行政组织-2-->",data)
+			orgListCont.value = data.list
+			educationOrgId.value = data.current
+			
+		})
+}
+
+
+
+//根据行政组织获取指标
+const orgAboutTarget = (orgId:string,tarAttribute:number) =>{
+	let sendIfo = {
+		id:orgId,
+		attribute:tarAttribute
+	}
+	targetListForDepartment(sendIfo)
+		.then((data:any) =>{
+			console.log("获取指标-1-->",data)
+			if(tarAttribute==1){
+				targetXingListAry.value = data.data
+				if(data.data&&data.data.length>0){
+					dingXingTarget.value = data.data[0].id
+				}
+			}else{
+				targetListAry.value = data.data
+				if(data.data&&data.data.length>0){
+					dingLiangDaChengTarget.value = data.data[0].id
+					dingLiangTarget.value = data.data[0].id.toString()
+				}
+			}
+			
+		})
+		.finally(() =>{
+			loadPage.value = true
+		})
+}
+
+//所有行政组织月度画图对象
+const orgYearFullMonths = ref<any>()
+const orgAllYears = ref<any>()	//当前年
+const allOrgOneMonth = ref<any>() //指定月
+const oenOrgAllYears = ref<any>() //单一行政指定年
+const oenOrg = ref<any>() //单一行政组织
+//行政组织月度绩效
+const departmentYears = ref<any>(null)
+
+//渲染完页面再执行
+onMounted(() => {
+	let dataTime:any = new Date();
+	console.log("dataTime--->",dataTime.getFullYear())
+	let timeStrint:any = dataTime;
+	dingXingYear.value = dataTime
+	dingLiangDaChengYear.value = dataTime
+	dingLiangYear.value = dataTime
+	console.log("timeStrint-1-->",dataTime,dingLiangYear)
+	getOrgList();
+	orgYearFullMonths.value = echarts.init(departmentYears.value)
+	let option = {
+ 
+ tooltip: {
+   trigger: 'axis'
+ },
+ legend: {
+   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
+   bottom:0
+ },
+ grid: {
+   top:"20px",
+   left: '1%',
+   right: '2%',
+   bottom: '30px',
+   containLabel: true
+ },
+ toolbox: {
+   feature: {
+	 saveAsImage: {}
+   }
+ },
+ xAxis: {
+   type: 'category',
+   boundaryGap: false,
+   data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+   type: 'value'
+ },
+ series: [
+   {
+	 name: 'Email',
+	 type: 'line',
+	 stack: 'Total',
+	 data: [120, 132, 101, 134, 90, 230, 210]
+   },
+   {
+	 name: 'Union Ads',
+	 type: 'line',
+	 stack: 'Total',
+	 data: [220, 182, 191, 234, 290, 330, 310]
+   },
+   {
+	 name: 'Video Ads',
+	 type: 'line',
+	 stack: 'Total',
+	 data: [150, 232, 201, 154, 190, 330, 410]
+   },
+   {
+	 name: 'Direct',
+	 type: 'line',
+	 stack: 'Total',
+	 data: [320, 332, 301, 334, 390, 330, 320]
+   },
+   {
+	 name: 'Search Engine',
+	 type: 'line',
+	 stack: 'Total',
+	 data: [820, 932, 901, 934, 1290, 1330, 1320]
+   }
+ ]
+};
+
+	orgYearFullMonths.value.setOption(option)
+})
+</script>
+<template>
+		<div ref="masterBody" class="app-container" style="margin-top:10px;">
+			<el-row :gutter="10">
+				<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback">
+					<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
+						<!--分厂数据统计-->
+						<div class="orgAllMothsTitle">
+							<el-text class="titleInfo">2023年绩效成绩</el-text>
+							<el-date-picker
+								v-model="allOrgOneMonth"
+								type="year"
+								placeholder="请选择时间"
+							/>
+						</div>
+						<div ref="departmentYears" class="allOrgAxisCares">
+							
+						</div>
+					</el-card>
+				</el-col>
+				<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor">
+					<UserInfo :user-store="userStore" />
+				</el-col>
+			</el-row>
+			<el-row :gutter="10" class="cart_top_juLi">
+				<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback">
+
+					<el-row :gutter="10">
+						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback">
+						
+							<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
+								<!--单月全厂统计-->
+								<div class="orgAllMothsTitle">
+									<el-text class="titleInfo">2023年10月绩效成绩</el-text>
+									<el-date-picker
+										v-model="orgAllYears"
+										type="month"
+										placeholder="请选择时间"
+									/>
+								</div>
+								<div ref="departmentMonths" class="allOrgAxisCares">
+									
+								</div>
+							</el-card>
+						
+						</el-col>
+						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback">
+							
+							<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
+								<!--单一行政组织全年统计-->
+								<div class="orgAllMothsTitle">
+									<el-text class="titleInfo">2023年备煤绩效成绩</el-text>
+									<div>
+										<el-select v-model="oenOrg" placeholder="" style="width:100px">
+											<el-option
+												v-for="item in options"
+												:key="item.value"
+												:label="item.label"
+												:value="item.value">
+											</el-option>
+										</el-select>
+										<el-date-picker
+											v-model="oenOrgAllmonth"
+											type="month"
+											placeholder="请选择时间"
+											style="width:120px"
+										/>
+									</div>
+								</div>
+								<div ref="departmentMonths" class="allOrgAxisCares">
+									
+								</div>
+							</el-card>
+						
+						</el-col>
+					</el-row>
+					
+					
+
+
+
+				</el-col>
+				<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor">
+				
+					<el-card shadow="always" :body-style="{ padding: '10px' }"  style = "border-radius: 12px;margin-top: 10px;; height: 335px">
+						<!--单月全厂统计-->
+						<div class="orgAllMothsTitle">
+							<el-text class="titleInfo">热门新闻</el-text>	
+						</div>
+						<div ref="departmentMonths" class="allOrgAxisCares">
+									
+						</div>
+					</el-card>
+				
+				</el-col>
+			</el-row>
+			<el-row :gutter="10" class="cart_top_juLi">
+				<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback">
+				
+					<el-row :gutter="10">
+						<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
+							<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
+								<div class="orgAllMothsTitle">
+									<el-row>
+										<el-col :span="8">
+											<el-date-picker
+												v-model="dingXingYear"
+												type="year"
+												placeholder="请选择时间"
+												style="width:100%"
+											/>
+										</el-col>
+										<el-col :span="8">
+											<el-select v-model="dingXingOrg" placeholder="" style="width:100%">
+												<el-option
+													v-for="item in mainOrgList"
+													:key="item.id"
+													:label="item.name"
+													:value="item.id">
+												</el-option>
+											</el-select>
+										</el-col>
+										<el-col :span="8">
+											<el-select v-model="dingXingTarget" placeholder="" style="width:100%">
+												<el-option
+													v-for="item in targetXingListAry"
+													:key="item.id"
+													:label="item.name"
+													:value="item.id">
+												</el-option>
+											</el-select>
+										</el-col>
+									</el-row>
+								</div>
+								<div ref="departmentMonths" class="allOrgAxisCares">
+									
+								</div>
+							</el-card>
+						</el-col>
+						<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
+							<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
+								<div class="orgAllMothsTitle">
+									<el-row>
+										<el-col :span="8">
+											<el-date-picker
+												v-model="dingLiangDaChengYear"
+												type="year"
+												placeholder="请选择时间"
+												style="width:100%"
+											/>
+										</el-col>
+										<el-col :span="8">
+											<el-select v-model="dingLiangDaChengOrg" placeholder="" style="width:100%">
+												<el-option
+													v-for="item in mainOrgList"
+													:key="item.id"
+													:label="item.name"
+													:value="item.id">
+												</el-option>
+											</el-select>
+										</el-col>
+										<el-col :span="8">
+											<el-select v-model="dingLiangDaChengTarget" placeholder="" style="width:100%">
+												<el-option
+													v-for="item in targetListAry"
+													:key="item.id"
+													:label="item.name"
+													:value="item.id">
+												</el-option>
+											</el-select>
+										</el-col>
+									</el-row>
+								</div>
+								<div ref="departmentMonths" class="allOrgAxisCares">
+									
+								</div>
+							</el-card>
+						</el-col>
+						<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
+							<!--定量指标同比环比-->
+							<DingLiangTongBiHuanBi v-if="loadPage"  :main-org-list="mainOrgList" :target-list-ary="targetListAry" :dlyear="dingLiangYear" :ding-liang-org="dingLiangOrg" :ding-liang-target="dingLiangTarget" />
+						</el-col>
+					</el-row>
+				
+				</el-col>
+				<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor">
+					<EducationChart :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
+					
+				</el-col>
+			</el-row>
+		</div>
+</template>
+<style  lang='scss' scoped>
+.readback{
+	// background-color:#FF0000;
+	.allOrgAxisCares{
+		display: block;
+		width:100%;
+		height:280px;
+		overflow:auto;
+	}
+	
+}
+.orgAllMothsTitle{
+	width:100%;
+	display: flex;
+	align-items: center;
+	justify-content:space-between;
+		
+}
+.greenColor{
+	// background-color:#FFAC52;
+	
+	// padding:0 10px 0 10px;
+}
+.span_icon_left{
+	margin-right:10px;
+}
+.cart_top_juLi{
+	// margin-top:10px;
+}
+.titleInfo{
+	font-size: 20px;
+	font-weight: bold;
+}
+</style>

src/views/dashboard/index_old.vue

@@ -0,0 +1,250 @@
+<script lang="ts">
+export default { name: "Dashboard" };
+</script>
+
+<script setup lang="ts">
+import { useUserStore } from "@/store/modules/user";
+import { useTransition, TransitionPresets } from "@vueuse/core";
+
+import GithubCorner from "@/components/GithubCorner/index.vue";
+import SvgIcon from "@/components/SvgIcon/index.vue";
+import BarChart from "./components/BarChart.vue";
+import PieChart from "./components/PieChart.vue";
+import RadarChart from "./components/RadarChart.vue";
+
+const userStore = useUserStore();
+
+const date: Date = new Date();
+
+const greetings = computed(() => {
+  if (date.getHours() >= 6 && date.getHours() < 8) {
+    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
+  } else if (date.getHours() >= 8 && date.getHours() < 12) {
+    return "上午好🌞！";
+  } else if (date.getHours() >= 12 && date.getHours() < 18) {
+    return "下午好☕！";
+  } else if (date.getHours() >= 18 && date.getHours() < 24) {
+    return "晚上好🌃！";
+  } else if (date.getHours() >= 0 && date.getHours() < 6) {
+    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
+  }
+});
+
+const duration = 5000;
+
+// 收入金额
+const amount = ref(0);
+const amountOutput = useTransition(amount, {
+  duration: duration,
+  transition: TransitionPresets.easeOutExpo,
+});
+amount.value = 2000;
+
+// 访问数
+const visitCount = ref(0);
+const visitCountOutput = useTransition(visitCount, {
+  duration: duration,
+  transition: TransitionPresets.easeOutExpo,
+});
+visitCount.value = 2000;
+
+//消息数
+const messageCount = ref(0);
+const messageCountOutput = useTransition(messageCount, {
+  duration: duration,
+  transition: TransitionPresets.easeOutExpo,
+});
+messageCount.value = 2000;
+
+// 订单数
+const orderCount = ref(0);
+const orderCountOutput = useTransition(orderCount, {
+  duration: duration,
+  transition: TransitionPresets.easeOutExpo,
+});
+orderCount.value = 2000;
+</script>
+
+<template>
+  <div class="dashboard-container">
+    <!-- github角标 -->
+    
+
+    <!-- 用户信息 -->
+    <el-row class="mb-8">
+      <el-card class="w-full">
+        <div class="flex justify-between flex-wrap">
+          <div class="flex items-center">
+            <img
+              class="user-avatar"
+              :src="userStore.avatar + '?imageView2/1/w/80/h/80'"
+            />
+            <span class="ml-[10px] text-[16px]">
+              {{ userStore.nickname }}
+            </span>
+          </div>
+
+          <div class="leading-[40px]">
+            {{ greetings }}
+          </div>
+
+          <div v-if="false" class="space-x-2 flex items-center" >
+            <el-link
+              target="_blank"
+              type="danger"
+              href="https://www.cnblogs.com/haoxianrui/p/16090029.html"
+              >官方0到1教程</el-link
+            >
+            <el-divider direction="vertical" />
+            <el-link
+              target="_blank"
+              type="success"
+              href="https://gitee.com/youlaiorg/vue3-element-admin"
+              >Gitee源码</el-link
+            >
+            <el-divider direction="vertical" />
+            <el-link
+              target="_blank"
+              type="primary"
+              href="https://github.com/youlaitech/vue3-element-admin"
+              >GitHub源码
+            </el-link>
+          </div>
+        </div>
+      </el-card>
+    </el-row>
+
+    <!-- 数据卡片 -->
+    <el-row :gutter="40" class="mb-4">
+      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
+        <div class="data-box">
+          <div
+            class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded"
+          >
+            <svg-icon icon-class="uv" size="3em" />
+          </div>
+          <div class="flex flex-col space-y-3">
+            <div class="text-[var(--el-text-color-secondary)]">访问数</div>
+            <div class="text-lg">
+              {{ Math.round(visitCountOutput) }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+
+      <!--消息数-->
+      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
+        <div class="data-box">
+          <div
+            class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded"
+          >
+            <svg-icon icon-class="message" size="3em" />
+          </div>
+          <div class="flex flex-col space-y-3">
+            <div class="text-[var(--el-text-color-secondary)]">消息数</div>
+            <div class="text-lg">
+              {{ Math.round(messageCountOutput) }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+
+      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
+        <div class="data-box">
+          <div
+            class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded"
+          >
+            <svg-icon icon-class="money" size="3em" />
+          </div>
+          <div class="flex flex-col space-y-3">
+            <div class="text-[var(--el-text-color-secondary)]">收入金额</div>
+            <div class="text-lg">
+              {{ Math.round(amountOutput) }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="12" :lg="6" class="mb-2">
+        <div class="data-box">
+          <div
+            class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
+          >
+            <svg-icon icon-class="shopping" size="3em" />
+          </div>
+          <div class="flex flex-col space-y-3">
+            <div class="text-[var(--el-text-color-secondary)]">订单数</div>
+            <div class="text-lg">
+              {{ Math.round(orderCountOutput) }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!-- Echarts 图表 -->
+    <el-row :gutter="40">
+      <el-col :sm="24" :lg="8" class="mb-4">
+        <BarChart
+          id="barChart"
+          height="400px"
+          width="100%"
+          class="bg-[var(--el-bg-color-overlay)]"
+        />
+      </el-col>
+
+      <el-col :xs="24" :sm="12" :lg="8" class="mb-4">
+        <PieChart
+          id="pieChart"
+          height="400px"
+          width="100%"
+          class="bg-[var(--el-bg-color-overlay)]"
+        />
+      </el-col>
+
+      <el-col :xs="24" :sm="12" :lg="8" class="mb-4">
+        <RadarChart
+          id="radarChart"
+          height="400px"
+          width="100%"
+          class="bg-[var(--el-bg-color-overlay)]"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.dashboard-container {
+  position: relative;
+  padding: 24px;
+
+  .user-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+  }
+
+  .github-corner {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 99;
+    border: 0;
+  }
+
+  .data-box {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    font-weight: bold;
+    color: var(--el-text-color-regular);
+    background: var(--el-bg-color-overlay);
+    border-color: var(--el-border-color);
+    box-shadow: var(--el-box-shadow-dark);
+  }
+
+  .svg-icon {
+    fill: currentcolor !important;
+  }
+}
+</style>