sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev-sws' into dev-yxl

v1.0.0
于肖磊 2024-08-16 18:13:05 +08:00
parent f47b44301c bc611830e8
commit 37b23a146f
5 changed files with 158 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/common/hot/index.vue
View File

@ -148,6 +148,7 @@ const end_drag = (event: MouseEvent) => {
drag_end: cloneDeep(rect_end.value),
});
}
rect_start.value = { x: 0, y: 0, width: 0, height: 0 };
rect_end.value = { x: 0, y: 0, width: 0, height: 0 };
};

87
src/components/model-hot-zone/index copy.vue Normal file
View File

@ -0,0 +1,87 @@
<template>
<div ref="containerRef" class="oh" :style="style_container">
<div ref="hotRef" class="hot re" :style="style">
<image-empty v-model="img" class="w" error-img-style="width:10rem;height:10rem;" error-style="padding:15rem 0;"></image-empty>
<div v-for="(item, index) in hot_data" :key="index" class="hot_box" :style="rect_style(item.drag_start, item.drag_end)"></div>
</div>
</div>
</template>
<script setup lang="ts">
import { common_styles_computer } from '@/utils';
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
});
const containerRef = ref<HTMLElement | null>(null);
const hotRef = ref<HTMLElement | null>(null);
const style = ref('');
const style_container = ref('');
const img = ref('');
const hot_data = ref<hotListData[]>([]);
// 热区组件图片的宽高
const img_width = ref(1);
const img_height = ref(1);
const container_ref_h = ref(0);
const container_ref_w = ref(0);
const hot_ref_w = ref(0);
const hot_ref_h = ref(0);
watch(
props.value,
(newVal, oldValue) => {
const new_content = newVal?.content || {};
const new_style = newVal?.style || {};
img.value = new_content?.img[0];
img_width.value = new_content?.hot.img_width || 1;
img_height.value = new_content?.hot.img_height || 1;
style_container.value = common_styles_computer(new_style.common_style);
hot_data.value = new_content?.hot?.data || [];
console.log(1);
},
{ immediate: true, deep: true }
);
onMounted(() => {
nextTick(() => {
console.log(2);
container_ref_h.value = containerRef.value?.clientHeight || 0;
container_ref_w.value = containerRef.value?.clientWidth || 0;
hot_ref_w.value = hotRef.value?.clientWidth || 0;
hot_ref_h.value = hotRef.value?.clientHeight || 0;
console.log(container_ref_h.value, container_ref_w.value, hot_ref_w.value, hot_ref_h.value);
});
});
// containerRef的宽高
const w_scale1 = computed(() => {
return container_ref_h.value / img_width.value;
});
const h_scale1 = computed(() => {
return container_ref_h.value / img_height.value;
});
// hotRef的宽高
const w_scale2 = computed(() => {
return hot_ref_w.value / container_ref_h.value;
});
const h_scale2 = computed(() => {
return hot_ref_h.value / container_ref_h.value;
});
const rect_style = computed(() => {
return (start: rectCoords, end: rectCoords) => {
return `left: ${start.x * w_scale1.value * w_scale2.value}px;top: ${start.y * h_scale1.value * h_scale2.value}px;width: ${Math.max(end.width * w_scale1.value * w_scale2.value, 1)}px;height: ${Math.max(end.height * h_scale1.value * h_scale2.value, 1)}px;display: flex;`;
};
});
</script>
<style lang="scss" scoped>
.hot {
min-height: 1rem;
.hot_box {
background: rgba(42, 148, 255, 0.25);
border: 1px dashed #8ec6ff;
position: absolute;
opacity: 0.6;
}
}
</style>

2
src/components/model-hot-zone/index.vue
View File

@ -49,7 +49,7 @@ watch(
w_scale2.value = hotRef.value?.clientWidth / containerRef.value?.clientWidth;
h_scale2.value = hotRef.value?.clientHeight / containerRef.value?.clientHeight;
}
}, 50);
}, 200);
},
{ immediate: true, deep: true }
);

67
src/utils/index.ts
View File

@ -1,4 +1,4 @@
import { isEmpty } from "lodash";
import { isEmpty } from 'lodash';
/**
* 判断一个对象是否为空。
*
@ -41,13 +41,13 @@ export function gradient_handle(color_list: color_list[], direction: string) {
new_color_list.forEach((item: any, index: number) => {
container_common_styles += `${item.color ? item.color : 'rgb(255 255 255 / 0%)'}`;
if (color_list.length == 1) {
container_common_styles += ` ${ item.color_percentage || 0 }%, ${ item.color } 100%`;
container_common_styles += ` ${item.color_percentage || 0}%, ${item.color} 100%`;
} else {
if (!isEmpty(item.color_percentage)) {
if (index == color_list.length - 1) {
container_common_styles += ` ${ item.color_percentage }%`;
container_common_styles += ` ${item.color_percentage}%`;
} else {
container_common_styles += ` ${ item.color_percentage }%,`;
container_common_styles += ` ${item.color_percentage}%,`;
}
} else {
if (index == color_list.length - 1) {
@ -58,7 +58,6 @@ export function gradient_handle(color_list: color_list[], direction: string) {
container_common_styles += ` ${(100 / color_list.length) * index}%,`;
}
}
}
});
container_common_styles += `);`;
@ -200,7 +199,6 @@ export const ext_name = (name: string) => {
return '';
};
/**
* 将大小计算成百分比
*
@ -209,9 +207,9 @@ export const ext_name = (name: string) => {
* @returns 计算后的百分比值，含4位小数
*/
export const percentage_count = (num: number, container_size: number) => {
const marks = num / container_size * 100;
return marks.toFixed(4)+ '%';
}
const marks = (num / container_size) * 100;
return marks.toFixed(4) + '%';
};
/**
* 计算当前偏移量
@ -232,4 +230,53 @@ export const location_compute = (size: number, location: number, container_size:
} else {
return location;
}
}
};
/**
* 读取指定名称的cookie值
* @param name 需要读取的cookie的名称
* @returns 返回cookie的值，如果未找到则返回空字符串
*/
export const get_cookie = (name: string) => {
// 初始化cookie值为空字符串
var cookievalue = '';
// 定义要搜索的cookie名称字符串
var search = name + '=';
// 检查是否存在cookie
if (document.cookie.length > 0) {
// 尝试查找cookie名称的位置
let offset = document.cookie.indexOf(search);
// 如果找到了cookie名称
if (offset != -1) {
// 跳过cookie名称的长度
offset += search.length;
// 查找cookie值的结束位置（可能是分号或者字符串末尾）
let end = document.cookie.indexOf(';', offset);
if (end == -1) end = document.cookie.length;
// 提取并解码cookie值
cookievalue = decodeURIComponent(document.cookie.substring(offset, end));
}
}
// 返回获取到的cookie值
return cookievalue;
};
/**
* 设置cookie
* 该函数用于设置一个cookie，包括cookie的名称、值和过期时间
* @param name {string} - cookie的名称
* @param value {string} - cookie的值
* @param expire_time {number} - cookie的过期时间，单位为天
*/
export const set_cookie = (name: string, value: string, expire_time?: number) => {
// 构造cookie字符串
var cookie_str = name + '=' + encodeURIComponent(value);
if (expire_time) {
// 获取当前时间
var now = new Date();
// 计算过期时间
var expire_date = new Date(now.getTime() + expire_time * 86400);
cookie_str += ';expires=' + expire_date.toUTCString();
// 将新增的cookie储存到cookie中，可以存储多个而不是替换
document.cookie = cookie_str;
}
};

20
src/utils/request.ts
View File

@ -1,8 +1,11 @@
import axios, { InternalAxiosRequestConfig, AxiosResponse } from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { get_cookie } from './index';
// 创建 axios 实例
const index = window.location.href.lastIndexOf('?');
const pro_url = window.location.href.substring(0, index);
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API == '/dev-api' ? import.meta.env.VITE_APP_BASE_API : window.location.origin,
baseURL: import.meta.env.VITE_APP_BASE_API == '/dev-api' ? import.meta.env.VITE_APP_BASE_API : pro_url,
timeout: 50000,
headers: { 'Content-Type': 'application/json;charset=utf-8' },
});
@ -10,13 +13,14 @@ const service = axios.create({
// 请求拦截器
service.interceptors.request.use(
(config: InternalAxiosRequestConfig) => {
// const userStore = useUserStoreHook();
// const accessToken = localStorage.getItem(TOKEN_KEY);
const accessToken = { token: 'b84c6cac0dacd1bc624393cd522dec37' };
if (accessToken.token) {
// config.headers.Authorization = accessToken.token;
// config.data = { ...config.data, token: accessToken.token };
config.url = config.url + '?token=' + accessToken.token;
// 如果是本地则使用静态tonken如果是线上则使用cookie的token
const cookie = get_cookie('admin_info');
if (import.meta.env.VITE_APP_BASE_API == '/dev-api') {
config.url = config.url + '?token=' + 'f714594929c39071f21856b885f91556';
} else {
if (cookie) {
config.url = config.url + '?token=' + JSON.parse(cookie).token;
}
}
return config;
},