From ab8c4c20d643b60199f634af52be7103c85ce8de Mon Sep 17 00:00:00 2001
From: "DESKTOP-CUI7KST\\HXGK" <1501216501@qq.com>
Date: Tue, 21 May 2024 08:49:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=80=A7=E6=A0=BC=E8=89=B2=E5=BD=A9=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/hr/people/index.ts                    | 105 ++++++--
 src/api/hr/people/type.ts                     |   9 +
 src/types/components.d.ts                     |   1 +
 .../basicinformation/charactercolor.vue       | 227 +++++++++++++-----
 4 files changed, 253 insertions(+), 89 deletions(-)

diff --git a/src/api/hr/people/index.ts b/src/api/hr/people/index.ts
index 1ee07e4d2..f5ce74aaa 100644
--- a/src/api/hr/people/index.ts
+++ b/src/api/hr/people/index.ts
@@ -35,6 +35,7 @@ import {
 	JobtitleContEdit,
 	CertificatesContAdd,
 	CertificatesContEdit,
+	contNumber,
 } from './type';
 /**
  * 获取人员档案
@@ -378,149 +379,205 @@ import {
 	  data: data
 	});
 }
+//获取性格色彩
+export function getCharacterColor(data?: contNumber):any {
+	return request({
+	  url: '/hrapi/staff/getPeopleColor',
+	  method: 'post',
+	  data: data
+	});
+}
 
 // 获取奖惩记录
 export function getRewardsAndPunishmentsCont(data?: contId) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //添加奖惩记录
 export function addRewardsAndPunishmentsCont(data?: RewardsAndPunishmentsContAdd) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //编辑奖惩记录
 export function editRewardsAndPunishmentsCont(data?: RewardsAndPunishmentsContEdit) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //编辑奖惩记录状态
 export function editRewardsAndPunishmentsContState(data?: delJjlxr) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //获取考评记录
 export function getAppraisalrecordCont(data?: contId) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //添加考评记录
 export function addAppraisalrecordCont(data?: AppraisalrecordContAdd) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //编辑考评记录
 export function editAppraisalrecordCont(data?: AppraisalrecordContEdit) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //编辑考评记录状态
 export function editAppraisalrecordContState(data?: delJjlxr) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 
 //获取人才盘点
 export function getTalentinventoryCont(data?: contId) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //添加人才盘点
 export function addTalentinventoryCont(data?: TalentinventoryContAdd) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //编辑人才盘点
 export function editTalentinventoryCont(data?: TalentinventoryContEdit) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //编辑人才盘点状态
 export function editTalentinventoryContState(data?: delJjlxr) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //获取用工关系
 export function getEmploymentrelationsCont(data?: contId) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //添加用工关系
 export function addEmploymentrelationsCont(data?: EmploymentrelationsContAdd) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //编辑用工关系
 export function editEmploymentrelationsCont(data?: EmploymentrelationsContEdit) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //编辑用工关系状态
 export function editEmploymentrelationsContState(data?: delJjlxr) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //获取职称信息
 export function getJobtitleCont(data?: contId) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //添加职称信息
 export function addJobtitleCont(data?: JobtitleContAdd) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //编辑职称信息
 export function editJobtitleCont(data?: JobtitleContEdit) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //编辑职称信息状态
 export function editJobtitleContState(data?: delJjlxr) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //获取证书信息
 export function getCertificatesCont(data?: contId) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //添加证书信息
 export function addCertificatesCont(data?: CertificatesContAdd) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //编辑证书信息
 export function editCertificatesCont(data?: CertificatesContEdit) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
 //编辑证书信息状态
 export function editCertificatesContState(data?: delJjlxr) {
 	return request({
-
+		url: '/hrapi/',
+		method: 'post',
+		data: data
 	})
 }
\ No newline at end of file
diff --git a/src/api/hr/people/type.ts b/src/api/hr/people/type.ts
index 002386aab..9be7c574f 100644
--- a/src/api/hr/people/type.ts
+++ b/src/api/hr/people/type.ts
@@ -596,6 +596,15 @@ export interface queryPeopleCont{
 	tema:number // 1,
 	temaname:string // "长白班"
 }
+//根据工号获取性格色彩
+export interface contNumber{
+	number:number;
+}
+export interface charactercolor{
+	id:string;
+	number:number;
+	color?:string;
+}
 
 //奖惩记录
 export interface jiangchengjilu{
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index d6cf27221..c622760dc 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -48,6 +48,7 @@ declare module '@vue/runtime-core' {
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
diff --git a/src/views/hr/archives/basicinformation/charactercolor.vue b/src/views/hr/archives/basicinformation/charactercolor.vue
index b60c89442..9d0f2760c 100644
--- a/src/views/hr/archives/basicinformation/charactercolor.vue
+++ b/src/views/hr/archives/basicinformation/charactercolor.vue
@@ -4,74 +4,170 @@
 @ 备注: 性格色彩
 -->
 <script lang="ts" setup>
-import { ref } from "vue";
-import * as echarts from "echarts";
-
-// 定义一个ref用于存储占比最高的两种性格色彩
-const topTwoColours = ref<string[]>([]);
-const option = {
-  tooltip: {
-    trigger: "axis",
-  },
-  radar: [
-    {
-      indicator: [
-        { name: "红色", max: 100 },
-        { name: "蓝色", max: 100 },
-        { name: "黄色", max: 100 },
-        { name: "绿色", max: 100 },
-      ],
-      center: ["50%", "50%"],
-      radius: 90,
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+import * as echarts from 'echarts';
+import { getCharacterColor } from '@/api/hr/people'; 
+const props = defineProps({
+  tabsid: {
+		type: String,
+		default: "1",
+	},
+	usercont:{
+		type:Object,
+		default(){
+			return {}
+		}
+	} 
+});
+// 定义数据和方法
+const chartContainer = ref<HTMLDivElement | null>(null);
+let chartInstance: echarts.ECharts | null = null;
+// 添加对ColourNameList的响应式引用
+const ColourNameList = ref<string[]>([]);
+const error = ref<string | null>(null); 
+//添加了一个新的变量用来处理尺寸变化
+let resizeObserver: ResizeObserver | null = null;
+// 使用计算属性确保number存在且非空字符串再初始化
+const isReadyToInit = computed(() => {
+  return props.usercont.number !== undefined && props.usercont.number.trim() !== '';
+});
+// 处理数据和初始化ECharts 
+const initChart = async () => {
+  // console.log(chartContainer.value)
+  // 检查并销毁已有实例
+    if (chartInstance) {
+        chartInstance.dispose();
+        chartInstance = null;
+    }
+    //确保chartContainer关联的DOM元素存在
+    if (!chartContainer.value) {
+      console.warn('DOM元素未找到，无法初始化图表');
+      return;
+    }
+  try {
+    // 确保usercont.number存在再发起请求
+    if (!isReadyToInit.value) {
+      throw new Error("员工信息未准备好，无法初始化图表");
+    }
+    // 调用接口获取性格色彩数据
+    const response = await getCharacterColor({ number: props.usercont.number });
+    // 初始化图表实例
+    chartInstance = echarts.init(chartContainer.value);
+    // console.log('Response:', response, chartInstance);
+    if (response.code === 0) {
+      // 处理返回的数据，得到颜色列表和雷达图颜色数据，解构数据
+      const { ColourNameList: apiColourNameList, RadarColour } = response.data;
+      ColourNameList.value = apiColourNameList; // 更新响应式数组
+       // 确保所有颜色都在雷达图中显示，即使ColourNameList中没有提及
+      const allColours = ["红色", "蓝色", "黄色", "绿色"];
+      // 更新雷达图
+      updateRadarChart(chartInstance, RadarColour, allColours);
+    } else {
+      ElMessage.error(response.data.msg || '系统出错');
+    }
+  } catch (e) {
+    console.error(e);
+  }
+}
+// 更新雷达图
+const updateRadarChart = (chart: echarts.ECharts, radarColour: any[], colourNameList: string[]) => {
+  const radarOptions = createRadarOptions(radarColour, colourNameList);
+  chart.setOption(radarOptions);
+  chart.resize();
+  // 将colourNameList赋值给ColourNameList，以便在模板中使用
+  // ColourNameList.value = colourNameList;
+}
+// 创建雷达图配置项
+const createRadarOptions = (radarColour: any[], colourNameList: string[]) => {
+  let maxVal = Math.max(...radarColour);
+  return {
+    tooltip: { trigger: "item" },
+    radar: {
+      indicator: colourNameList.map((color, index) => ({ 
+        name: color,
+        max: maxVal + 2,
+        min: 0 ,
+      })),
+      shape: "circle",
+      splitNumber: 4,
     },
-  ],
-  series: [
-    {
-      type: "radar",
-      tooltip: {
-        trigger: "item",
-      },
-      areaStyle: {},
-      data: [
-        {
-          value: [77, 55, 66, 33],
-          name: "性格色彩",
+    series: [
+      {
+        name: "个人性格色彩",
+        type: "radar",
+        areaStyle: {
+          // 填充区颜色
+          color: '#a0c3f8',
         },
-      ],
-    },
-  ],
-};
-onMounted(() => {
-  // 计算四种色彩的占比并找出最高的两种
-  const values = option.series[0].data[0].value;
-  const colors = ["红色", "蓝色", "黄色", "绿色"];
-  const percentages = values.map((val) => val / 100);
-  const sortedColors = colors.sort(
-    (a, b) => percentages[colors.indexOf(b)] - percentages[colors.indexOf(a)]
-  );
-  topTwoColours.value = sortedColors.slice(0, 2);
-  // 初始化echarts实例
-  Promise.resolve().then(() => {
-    const dom = document.getElementById("myChart");
-    const myChart = echarts.init(dom);
-    window.addEventListener("resize", () => {
-      myChart.resize(); // 大小自适应
-    });
-
-    myChart.setOption(option);
+        data: [{ value: radarColour, 
+                  name: "个人色彩分布" 
+              }],
+        itemStyle: { color: "#3c96ff" }, // 示例颜色
+      },
+    ],
+  };
+}
+onMounted(async () => {
+  //在DOM就绪后初始化echarts实例
+  await nextTick();
+  // console.log(chartContainer.value);
+  // 初始化ResizeObserver
+  resizeObserver = new ResizeObserver(() => {
+    if (chartInstance) {
+      chartInstance.resize();
+    }
   });
+  resizeObserver.observe(chartContainer.value!); // 监听chartContainer尺寸变化
+});
+// 监听员工信息变化
+watch(
+  () => ({
+    usercont: props.usercont,
+    tabsid: props.tabsid
+  }),
+  async (newValues) => {
+    const { usercont, tabsid } = newValues;
+    // 如果tabsid为'2'且usercont.number准备好了
+    if (tabsid === '2' && usercont.number) {
+      error.value = null;
+      await nextTick();
+      await initChart();
+    } else if (usercont.number) {
+      // 如果只是usercont.number变化了
+      error.value = null;
+      await nextTick();
+      await initChart();
+    } else {
+      error.value = "员工信息未准备好";
+    }
+  },
+  { immediate: true, deep: true }
+);
+// 组件卸载时清理ECharts实例
+onUnmounted(() => {
+  if (chartInstance) {
+    chartInstance.dispose();
+    chartInstance = null;
+  }
+  // 清理ResizeObserver
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
 });
+//监听tabsid变化（点击性格色彩选项）
+// watch(()=>props.tabsid,(val:string)=>{
+//   if(val == '2'){
+//     initChart();
+//   }
+// })
 </script>
 <template>
-  <div>
-    <div class="title">性格色彩特质</div>
-    <!-- 雷达图 -->
-    <div id="myChart" class="chart"></div>
-    <!-- 文字部分 -->
-    <div class="text-content">
-      <el-row>
-        <el-col v-for="(item, index) in topTwoColours" :key="index" :span="24">
-          <div v-if="item == '红色'">
+  <!-- 在模板中根据loading状态显示加载提示 -->
+  <div class="chart-container">
+    <div ref="chartContainer" class="chart"></div>
+    <div v-for="(item, index) in ColourNameList" :key="index">
+      <div v-if="item == '红色'">
             <el-text type="info" class="color-title">{{ item }}：<br/></el-text>
             <el-text type="info">——他们的优势是：<br /></el-text>
             <el-text type="info">积极乐观，</el-text>
@@ -123,13 +219,14 @@ onMounted(() => {
             <el-text type="info">没有主见，</el-text>
             <el-text type="info">缺乏创意。<br /></el-text>
           </div>
-        </el-col>
-      </el-row>
     </div>
   </div>
 </template>
 <style scoped>
-
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
 .title {
   font-size: 18px;
   font-weight: bold;