性格色彩接口对接

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
 	})
 }

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{

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']

src/views/hr/archives/basicinformation/charactercolor.vue

@@ -4,73 +4,169 @@
 @ 备注: 性格色彩
 -->
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
-
+import { getCharacterColor } from '@/api/hr/people'; 
-// 定义一个ref用于存储占比最高的两种性格色彩
+const props = defineProps({
-const topTwoColours = ref<string[]>([]);
+  tabsid: {
-const option = {
+		type: String,
-  tooltip: {
+		default: "1",
-    trigger: "axis",
 	},
-  radar: [
+	usercont:{
-    {
+		type:Object,
-      indicator: [
+		default(){
-        { name: "红色", max: 100 },
+			return {}
-        { name: "蓝色", max: 100 },
+		}
-        { name: "黄色", max: 100 },
+	} 
-        { name: "绿色", max: 100 },
+});
-      ],
+// 定义数据和方法
-      center: ["50%", "50%"],
+const chartContainer = ref<HTMLDivElement | null>(null);
-      radius: 90,
+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: [
       {
+        name: "个人性格色彩",
         type: "radar",
-      tooltip: {
+        areaStyle: {
-        trigger: "item",
+          // 填充区颜色
+          color: '#a0c3f8',
         },
-      areaStyle: {},
+        data: [{ value: radarColour, 
-      data: [
+                  name: "个人色彩分布" 
-        {
+              }],
-          value: [77, 55, 66, 33],
+        itemStyle: { color: "#3c96ff" }, // 示例颜色
-          name: "性格色彩",
-        },
-      ],
       },
     ],
   };
-onMounted(() => {
+}
-  // 计算四种色彩的占比并找出最高的两种
+onMounted(async () => {
-  const values = option.series[0].data[0].value;
+  //在DOM就绪后初始化echarts实例
-  const colors = ["红色", "蓝色", "黄色", "绿色"];
+  await nextTick();
-  const percentages = values.map((val) => val / 100);
+  // console.log(chartContainer.value);
-  const sortedColors = colors.sort(
+  // 初始化ResizeObserver
-    (a, b) => percentages[colors.indexOf(b)] - percentages[colors.indexOf(a)]
+  resizeObserver = new ResizeObserver(() => {
-  );
+    if (chartInstance) {
-  topTwoColours.value = sortedColors.slice(0, 2);
+      chartInstance.resize();
-  // 初始化echarts实例
+    }
-  Promise.resolve().then(() => {
-    const dom = document.getElementById("myChart");
-    const myChart = echarts.init(dom);
-    window.addEventListener("resize", () => {
-      myChart.resize(); // 大小自适应
   });
-
+  resizeObserver.observe(chartContainer.value!); // 监听chartContainer尺寸变化
-    myChart.setOption(option);
 });
+// 监听员工信息变化
+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>
+  <!-- 在模板中根据loading状态显示加载提示 -->
-    <div class="title">性格色彩特质</div>
+  <div class="chart-container">
-    <!-- 雷达图 -->
+    <div ref="chartContainer" class="chart"></div>
-    <div id="myChart" class="chart"></div>
+    <div v-for="(item, index) in ColourNameList" :key="index">
-    <!-- 文字部分 -->
-    <div class="text-content">
-      <el-row>
-        <el-col v-for="(item, index) in topTwoColours" :key="index" :span="24">
       <div v-if="item == '红色'">
             <el-text type="info" class="color-title">{{ item }}：<br/></el-text>
             <el-text type="info">——他们的优势是：<br /></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;