Merge branch 'dev-sws' into dev-yxl

src/components/common/hot/index.vue

@@ -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 };
 };
 

src/components/model-hot-zone/index copy.vue

@@ -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>

src/components/model-hot-zone/index.vue

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

src/utils/index.ts

@@ -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;
+    const marks = (num / container_size) * 100;
-    return marks.toFixed(4)+ '%';
+    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;
+    }
+};

src/utils/request.ts

@@ -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();
+        // 如果是本地则使用静态tonken如果是线上则使用cookie的token
-        // const accessToken = localStorage.getItem(TOKEN_KEY);
+        const cookie = get_cookie('admin_info');
-        const accessToken = { token: 'b84c6cac0dacd1bc624393cd522dec37' };
+        if (import.meta.env.VITE_APP_BASE_API == '/dev-api') {
-        if (accessToken.token) {
+            config.url = config.url + '?token=' + 'f714594929c39071f21856b885f91556';
-            // config.headers.Authorization = accessToken.token;
+        } else {
-            // config.data = { ...config.data, token: accessToken.token };
+            if (cookie) {
-            config.url = config.url + '?token=' + accessToken.token;
+                config.url = config.url + '?token=' + JSON.parse(cookie).token;
+            }
         }
         return config;
     },