111
This commit is contained in:
FengHui
@@ -1,13 +1,12 @@
|
||||
<template>
|
||||
<view style="display: flex; justify-content: center; padding: 0px 0">
|
||||
<canvas canvas-id="radarCanvas" id="radarCanvas" style="width: 300px; height: 250px"></canvas>
|
||||
<canvas canvas-id="radarCanvas" style="width: 600rpx; height: 500rpx"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
// const src = ref('');
|
||||
import { onReady } from '@dcloudio/uni-app';
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
@@ -41,7 +40,7 @@ function getRadarData() {
|
||||
}
|
||||
|
||||
// 监听页面初始化
|
||||
onMounted(() => {
|
||||
onReady(() => {
|
||||
// 延迟执行，确保 canvas 已经渲染
|
||||
setTimeout(() => {
|
||||
const { labels, data } = getRadarData();
|
||||
@@ -66,12 +65,10 @@ watch(
|
||||
|
||||
function rawRadarChart(labels, data) {
|
||||
const ctx = uni.createCanvasContext('radarCanvas');
|
||||
const width = 80;
|
||||
const height = 80;
|
||||
const centerX = 150;
|
||||
const centerY = 125;
|
||||
// const data = [2, 3.5, 5, 3.5, 5, 3.5]; // 示例数据
|
||||
// const labels = ['火烧', '泡水', '事故', '外观', '部件', '火烧'];
|
||||
const width = 150;
|
||||
const height = 125;
|
||||
const centerX = 300;
|
||||
const centerY = 250;
|
||||
const colors = ['#F5F5F5', '#F5F5F5', '#F5F5F5', '#F5F5F5', '#F5F5F5'];
|
||||
const maxScore = 5; // 数据最大值
|
||||
|
||||
@@ -89,7 +86,6 @@ function rawRadarChart(labels, data) {
|
||||
ctx.fill();
|
||||
|
||||
//多边形圈
|
||||
// 多边形圈
|
||||
for (let i = 5; i > 0; i--) {
|
||||
ctx.setStrokeStyle(colors[i - 1]); // 设置边框颜色
|
||||
ctx.beginPath();
|
||||
@@ -106,20 +102,14 @@ function rawRadarChart(labels, data) {
|
||||
ctx.stroke(); // 只描边，不填充
|
||||
}
|
||||
|
||||
// //竖线
|
||||
// 绘制连接线
|
||||
labels.forEach((label, index) => {
|
||||
ctx.setStrokeStyle('#F5F5F5');
|
||||
ctx.setFillStyle('#F5F5F5');
|
||||
ctx.beginPath();
|
||||
|
||||
const x1 = centerX + width * 0.6 * Math.sin(angleStep * index);
|
||||
const y1 = centerY + height * 0.6 * Math.cos(angleStep * index);
|
||||
const x = centerX + width * Math.sin(angleStep * index);
|
||||
const y = centerY + height * Math.cos(angleStep * index);
|
||||
|
||||
ctx.moveTo(x1, y1);
|
||||
ctx.moveTo(centerX, centerY);
|
||||
const x = centerX + width * Math.cos(angleStep * index - Math.PI / 2);
|
||||
const y = centerY + height * Math.sin(angleStep * index - Math.PI / 2);
|
||||
ctx.lineTo(x, y);
|
||||
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
});
|
||||
@@ -145,15 +135,16 @@ function rawRadarChart(labels, data) {
|
||||
ctx.stroke();
|
||||
|
||||
// 绘制每个小圆点
|
||||
ctx.setFillStyle('#256BFA'); // 小圆点颜色（你可以改）
|
||||
ctx.setFillStyle('#256BFA'); // 小圆点颜色
|
||||
pointList.forEach((point) => {
|
||||
ctx.beginPath();
|
||||
ctx.arc(point.x, point.y, 4, 0, 2 * Math.PI); // 半径 4，可以自己调大小
|
||||
ctx.arc(point.x, point.y, 4, 0, 2 * Math.PI); // 半径 4
|
||||
ctx.fill();
|
||||
});
|
||||
|
||||
// 绘制标签
|
||||
ctx.setTextAlign('center');
|
||||
ctx.setTextBaseline('middle');
|
||||
|
||||
labels.forEach((label, index) => {
|
||||
const x = centerX + (width + 30) * Math.cos(angleStep * index - Math.PI / 2);
|
||||
@@ -162,33 +153,13 @@ function rawRadarChart(labels, data) {
|
||||
//标题
|
||||
ctx.setFillStyle('#000');
|
||||
ctx.setFontSize(12);
|
||||
ctx.font = 'bold 12px sans-serif';
|
||||
ctx.fillText(label, x, y);
|
||||
|
||||
// ctx.setFillStyle('#A2A4A2');
|
||||
// ctx.font = '12px sans-serif';
|
||||
// ctx.setFontSize(12);
|
||||
// ctx.fillText(data[index], x, y + 16);
|
||||
});
|
||||
|
||||
ctx.draw();
|
||||
|
||||
//转图片
|
||||
|
||||
// uni.canvasToTempFilePath({
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// width: 320,
|
||||
// height: 320,
|
||||
// destWidth: 840,
|
||||
// destHeight: 840,
|
||||
// canvasId: 'radarCanvas',
|
||||
// success: (res) => {
|
||||
// // 在H5平台下，tempFilePath 为 base64
|
||||
// src = res.tempFilePath;
|
||||
// },
|
||||
// });
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style>
|
||||
/* 确保canvas容器有足够的空间 */
|
||||
</style>
|
||||
|
||||
@@ -293,7 +293,7 @@ const showConfirmDialog = ref(false);
|
||||
|
||||
onLoad((option) => {
|
||||
console.log(option, 'option');
|
||||
if (option.jobId) {
|
||||
if (option.encryptJobId) {
|
||||
initLoad(option);
|
||||
}
|
||||
});
|
||||
@@ -303,7 +303,7 @@ onShow(() => {
|
||||
// #ifdef H5
|
||||
try {
|
||||
const option = parseQueryParams(); // 兼容微信内置浏览器
|
||||
if (option.jobId) {
|
||||
if (option.encryptJobId) {
|
||||
initLoad(option);
|
||||
}
|
||||
} catch (e) {
|
||||
@@ -312,10 +312,10 @@ onShow(() => {
|
||||
// #endif
|
||||
});
|
||||
function initLoad(option) {
|
||||
const jobId = decodeURIComponent(option.jobId);
|
||||
if (jobId !== jobIdRef.value) {
|
||||
jobIdRef.value = jobId;
|
||||
getDetail(jobId);
|
||||
const encryptJobId = decodeURIComponent(option.encryptJobId);
|
||||
if (encryptJobId !== jobIdRef.value) {
|
||||
jobIdRef.value = encryptJobId;
|
||||
getDetail(encryptJobId);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -327,17 +327,17 @@ function seeExplain() {
|
||||
}
|
||||
}
|
||||
|
||||
function getDetail(jobId) {
|
||||
function getDetail(encryptJobId) {
|
||||
return new Promise((reslove, reject) => {
|
||||
$api.createRequest(`/app/job/${jobId}`).then((resData) => {
|
||||
$api.createRequest(`/app/job/${encryptJobId}`).then((resData) => {
|
||||
const { latitude, longitude, companyName, companyId } = resData.data;
|
||||
jobInfo.value = resData.data;
|
||||
reslove(resData.data);
|
||||
getCompanyIsAJobs(companyId);
|
||||
if (currentUserType.value !== 0) {
|
||||
getCompetivetuveness(jobId);
|
||||
getCompetivetuveness(encryptJobId);
|
||||
}
|
||||
// getCompetivetuveness(jobId);
|
||||
// getCompetivetuveness(encryptJobId);
|
||||
if (latitude && longitude) {
|
||||
mapCovers.value = [
|
||||
{
|
||||
@@ -379,8 +379,8 @@ function getTextWidth(text, size = 12) {
|
||||
return -(estimatedWidth / 2) - 20; // 计算文字中心点
|
||||
}
|
||||
|
||||
function getCompetivetuveness(jobId) {
|
||||
$api.createRequest(`/app/job/competitiveness/${jobId}`, {}, 'GET').then((resData) => {
|
||||
function getCompetivetuveness(encryptJobId) {
|
||||
$api.createRequest(`/app/job/competitiveness/${encryptJobId}`, {}, 'GET').then((resData) => {
|
||||
// 如果接口返回的数据为 null 或空，使用默认值0
|
||||
if (resData && resData.data) {
|
||||
// 确保 radarChart 字段存在，如果不存在则使用默认值
|
||||
@@ -455,19 +455,19 @@ function hideDialog() {
|
||||
|
||||
// 确认操作
|
||||
function confirmAction() {
|
||||
const jobId = jobInfo.value.jobId;
|
||||
const encryptJobId = jobIdRef.value;
|
||||
if (jobInfo.value.isApply === 1) {
|
||||
// 取消投递
|
||||
$api.createRequest(`/app/job/applyJobCencal`, { jobId }, 'DELETE').then((resData) => {
|
||||
$api.createRequest(`/app/job/applyJobCencal`, { encryptJobId }, 'DELETE').then((resData) => {
|
||||
$api.msg('取消投递成功');
|
||||
getDetail(jobId); // 刷新职位信息
|
||||
getDetail(encryptJobId); // 刷新职位信息
|
||||
showConfirmDialog.value = false;
|
||||
});
|
||||
} else {
|
||||
// 确认投递
|
||||
$api.createRequest(`/app/job/apply/${jobId}`, {}, 'GET').then((resData) => {
|
||||
$api.createRequest(`/app/job/apply/${encryptJobId}`, {}, 'GET').then((resData) => {
|
||||
$api.msg('申请成功');
|
||||
getDetail(jobId); // 刷新职位信息
|
||||
getDetail(encryptJobId); // 刷新职位信息
|
||||
showConfirmDialog.value = false;
|
||||
});
|
||||
}
|
||||
@@ -475,8 +475,8 @@ function confirmAction() {
|
||||
|
||||
// 确认投递
|
||||
function confirmApply() {
|
||||
const jobId = jobInfo.value.jobId;
|
||||
$api.createRequest(`/app/job/apply/${jobId}`, {}, 'GET').then((resData) => {
|
||||
const encryptJobId = jobIdRef.value;
|
||||
$api.createRequest(`/app/job/apply/${encryptJobId}`, {}, 'GET').then((resData) => {
|
||||
$api.msg('申请成功');
|
||||
const jobUrl = jobInfo.value.jobUrl;
|
||||
// return window.open(jobUrl);
|
||||
@@ -486,8 +486,8 @@ function confirmApply() {
|
||||
|
||||
// 取消投递
|
||||
function cancelApply() {
|
||||
const jobId = jobInfo.value.jobId;
|
||||
$api.createRequest(`/app/job/applyJobCencal`, { jobId }, 'DELETE').then((resData) => {
|
||||
const encryptJobId = jobIdRef.value;
|
||||
$api.createRequest(`/app/job/applyJobCencal`, { encryptJobId }, 'DELETE').then((resData) => {
|
||||
$api.msg('取消投递成功');
|
||||
showConfirmDialog.value = false;
|
||||
});
|
||||
@@ -495,15 +495,15 @@ function cancelApply() {
|
||||
|
||||
// 取消/收藏岗位
|
||||
function jobCollection() {
|
||||
const jobId = jobInfo.value.jobId;
|
||||
const encryptJobId = jobIdRef.value;
|
||||
if (jobInfo.value.isCollection) {
|
||||
$api.createRequest(`/app/job/collection/${jobId}`, {}, 'DELETE').then((resData) => {
|
||||
getDetail(jobId);
|
||||
$api.createRequest(`/app/job/collection/${encryptJobId}`, {}, 'DELETE').then((resData) => {
|
||||
getDetail(encryptJobId);
|
||||
$api.msg('取消收藏成功');
|
||||
});
|
||||
} else {
|
||||
$api.createRequest(`/app/job/collection/${jobId}`, {}, 'POST').then((resData) => {
|
||||
getDetail(jobId);
|
||||
$api.createRequest(`/app/job/collection/${encryptJobId}`, {}, 'POST').then((resData) => {
|
||||
getDetail(encryptJobId);
|
||||
$api.msg('收藏成功');
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user