Merge branch 'StableVersion' into develop

.env.dev

@@ -3,6 +3,6 @@ NODE_ENV = 'development'
 # VUE_APP_BASE_URL = 'https://api.aida.com.hk'
 
 # VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
-VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
+# VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
 # VUE_APP_BASE_URL = 'http://192.168.1.9:17088'
-# VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
+VUE_APP_BASE_URL = 'http://192.168.1.7:5567'

.env.test_build

@@ -2,6 +2,6 @@ NODE_ENV = 'production'
 # VUE_APP_BASE_URL = 'https://aida.com.hk/test'
 # VUE_APP_BASE_URL = 'http://18.167.251.121:10088'
 # VUE_APP_BASE_URL = 'https://api.aida.com.hk'
-VUE_APP_BASE_URL = 'https://test.api.aida.com.hk'
+# VUE_APP_BASE_URL = 'https://test.api.aida.com.hk'
-# VUE_APP_BASE_URL = 'https://api.aida.com.hk'
+VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
 

src/assets/iconfont2/iconfont.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id  */
-  src: url('iconfont.ttf?t=1701308010197') format('truetype');
+  src: url('iconfont.ttf?t=1709865709415') format('truetype');
 }
 
 .iconfont {
@@ -43,3 +43,47 @@
   content: "\e685";
 }
 
+.icon-bianji:before {
+  content: "\e600";
+}
+
+.icon-circle:before {
+  content: "\e64f";
+}
+
+.icon-sanjiaoxing:before {
+  content: "\e615";
+}
+
+.icon-tuceng:before {
+  content: "\e632";
+}
+
+.icon-move:before {
+  content: "\e616";
+}
+
+.icon-xiangpi_huaban1:before {
+  content: "\e67b";
+}
+
+.icon-tx-fill-tuoyuanxing:before {
+  content: "\e64c";
+}
+
+.icon-zhixian:before {
+  content: "\e602";
+}
+
+.icon-xian:before {
+  content: "\ec5f";
+}
+
+.icon-checkbox-full:before {
+  content: "\ea6f";
+}
+
+.icon-tuceng1:before {
+  content: "\e62d";
+}
+

src/assets/iconfont2/iconfont.json

@@ -60,6 +60,83 @@
       "font_class": "dianwei",
       "unicode": "e685",
       "unicode_decimal": 59013
+    },
+    {
+      "icon_id": "130743908",
+      "name": "编辑",
+      "font_class": "bianji",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "130743909",
+      "name": "圆形",
+      "font_class": "circle",
+      "unicode": "e64f",
+      "unicode_decimal": 58959
+    },
+    {
+      "icon_id": "130743910",
+      "name": "三角形",
+      "font_class": "sanjiaoxing",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "130743911",
+      "name": "图层",
+      "font_class": "tuceng",
+      "unicode": "e632",
+      "unicode_decimal": 58930
+    },
+    {
+      "icon_id": "130743912",
+      "name": "平移",
+      "font_class": "move",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "130743913",
+      "name": "橡皮",
+      "font_class": "xiangpi_huaban1",
+      "unicode": "e67b",
+      "unicode_decimal": 59003
+    },
+    {
+      "icon_id": "130743914",
+      "name": "tx-fill-椭圆形",
+      "font_class": "tx-fill-tuoyuanxing",
+      "unicode": "e64c",
+      "unicode_decimal": 58956
+    },
+    {
+      "icon_id": "130743915",
+      "name": "直线",
+      "font_class": "zhixian",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "130743916",
+      "name": "线",
+      "font_class": "xian",
+      "unicode": "ec5f",
+      "unicode_decimal": 60511
+    },
+    {
+      "icon_id": "130743917",
+      "name": "正方形",
+      "font_class": "checkbox-full",
+      "unicode": "ea6f",
+      "unicode_decimal": 60015
+    },
+    {
+      "icon_id": "130743918",
+      "name": "图层",
+      "font_class": "tuceng1",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
     }
   ]
 }

src/assets/style/style.css

@@ -1001,6 +1001,10 @@ i {
   color: #fff;
   flex-direction: column;
 }
+.mark_loading.bgFFF {
+  background: #ffffff;
+  color: #000;
+}
 .mark_loading .mark_loading_text {
   text-align: center;
   font-size: 1.2rem;
@@ -1017,16 +1021,25 @@ i {
 }
 .mark_loading .mark_loading_title {
   font-size: 3rem;
-  text-decoration: underline;
+  font-weight: 600;
-  cursor: pointer;
   margin-bottom: 2rem;
 }
+.mark_loading .mark_loading_intro {
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 1.4rem;
+  margin-bottom: 2rem;
+  text-align: center;
+  width: 80%;
+}
+.mark_loading .mark_loading_title_box {
+  display: flex;
+}
 .mark_loading .mark_loading_btn,
 .mark_loading .mark_loading_btn2 {
+  display: flex;
   margin-top: 10px;
   text-align: center;
   border: 2px solid;
-  display: inline-block;
   padding: 0 20px;
   border-radius: 10px;
   cursor: pointer;
@@ -1035,9 +1048,10 @@ i {
   color: #fff;
   border: none;
   margin: 0 2rem;
+  align-items: center;
 }
 .mark_loading .mark_loading_btn2 {
   border: 2px solid #000;
+  color: #000;
   background: rgba(0, 0, 0, 0);
-  color: #fff;
 }

src/assets/style/style.less

@@ -1066,6 +1066,10 @@ i{
     justify-content: center;
 	color: #fff;
 	flex-direction: column;
+	&.bgFFF{
+		background: rgba(255,255,255, 1);
+		color: #000;
+	}
 	.mark_loading_text{
 		text-align: center;
 		font-size: 1.2rem;
@@ -1085,18 +1089,29 @@ i{
 	}
 	.mark_loading_title{
 		font-size: 3rem;
-		text-decoration: underline;
+		// text-decoration: underline;
-		cursor: pointer;
+		font-weight: 600;
 		margin-bottom: 2rem;
 		// color: #fff;
 	}
+	.mark_loading_intro{
+		color: rgba(0, 0, 0, 0.6);
+		font-size: 1.4rem;
+		margin-bottom: 2rem;
+		text-align: center;
+		width: 80%;
+	}
+	.mark_loading_title_box{
+		display: flex;
+	}
+
 	.mark_loading_btn,.mark_loading_btn2{
 		// border: #000;
 		// color: #fff;
+		display: flex;
 		margin-top: 10px;
 		text-align: center;
 		border: 2px solid;
-		display: inline-block;
 		padding: 0 20px;
 		border-radius: 10px;
 		cursor: pointer;
@@ -1105,10 +1120,11 @@ i{
 		color: #fff;
 		border: none;
 		margin: 0 2rem;
+		align-items: center;
 	}
 	.mark_loading_btn2{
 		border: 2px solid #000;
+		color: #000;
 		background: rgba(0,0,0,0);
-		color: #fff;
 	}
 }

src/component/HomePage/ExportModel.vue

@@ -29,19 +29,19 @@
                     <div>Height:</div>
                     <input type="number" @input="setMaxInput('height', 10000)" v-model="canvasWH.height"/>
                 </label>
-                <div class="exportCanvasBox_title" @click.stop="setCloseNav(0)">
+                <div class="exportCanvasBox_title" @click.stop="setCloseNav('nav')">
 					Canvas Nav
 					<div
                         :class="[
                             'icon',
                             'iconfont',
                             'icon-xiala',
-							closeNav==0?'icon-rotate':''
+							closeNav.nav?'icon-rotate':''
                         ]"
                     >
 					</div>
 				</div>
-                <div class="exportCanvasBox_img" :class="{'closeNav' :closeNav==0}">
+                <div class="exportCanvasBox_img exportCanvasBox_left_item" :class="{'closeNav' :closeNav.nav}">
                     <div
                         class="exportCanvasBox_allItem"
                         v-for="(item,key) in allBoardData"
@@ -65,16 +65,62 @@
                         </div>
                     </div>
                 </div>
-				<div class="exportCanvasBox_title" @click.stop="setCloseNav(1)">
+				<div class="exportCanvasBox_title" @click.stop="setCloseNav('tool')">
 					Canvas Tool
 					<div
                         :class="[
                             'icon',
                             'iconfont',
                             'icon-xiala',
-							closeNav==1?'icon-rotate':''
+							closeNav.tool?'icon-rotate':''
                         ]"
                     >
+					
+					</div>
+				</div>
+				<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
+					<div class="exportCanvasBox_left_tool_item">
+						<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
+						<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
+						<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:operation == 'pencil'}"></i>
+						<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:operation == 'move'}"></i>
+						<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:operation == 'eraser'}"></i>
+					</div>
+					<div class="exportCanvasBox_left_tool_item">
+						<label>
+							<div >Color</div>
+							<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
+						</label>
+						<label>
+							<div >Size:</div>
+							<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth">
+						</label>
+					</div>
+				</div>
+				<div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
+					More
+					<div
+                        :class="[
+                            'icon',
+                            'iconfont',
+                            'icon-xiala',
+							closeNav.move?'icon-rotate':''
+                        ]"
+                    >
+					</div>
+				</div>
+				<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.move}">
+					<div class="exportCanvasBox_left_tool_item">
+						<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
+						<i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i>
+						<i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i>
+						<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
+						<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
+						<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
+					</div>
+					<div class="exportCanvasBox_left_tool_item leftAlign">
+						<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
+						<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
 					</div>
 				</div>
             </div>
@@ -86,8 +132,6 @@
                 <div class="exportCanvasBox_title">
 					High-definition Download
 				</div>
-				<div @click="historyState(stateIndex - 1)">123</div>
-				<div @click="historyState(stateIndex + 1)">321</div>
 				<div class="exportCanvasBox_right_definition">
 					<label>
 						<div>Width:</div>
@@ -100,7 +144,7 @@
 				</div>
 				<div class="" @click="multiselect">all</div>
 				<div class="exportCanvasBox_right_btn">
-					<div class="subitOkPreviewBtn" @click="setExport">HD Export</div>
+					<div class="subitOkPreviewBtn" @click="setHDExport">HD Export</div>
 					<div class="subitOkPreviewBtn" @click="setExport">Export</div>
 				</div>
             </div>
@@ -114,13 +158,13 @@
 import {defineComponent, computed, h, ref, nextTick, inject, reactive, onMounted,
 } from "vue";
 import { Https } from "@/tool/https";
-import { multiselectJS } from "@/tool/canvasDrawing";
 import scaleImage from "@/component/HomePage/scaleImage.vue";
 import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
 import { useStore } from "vuex";
 import JSZip, { forEach } from "jszip";
 import { message, Modal } from "ant-design-vue";
 const FileSaver = require("file-saver");
+import { multiselectJS,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck } from "@/tool/canvasDrawing";
 export default defineComponent({
     components: {
         scaleImage,
@@ -164,10 +208,13 @@ export default defineComponent({
 		let disposeMoodboardShow = true;
 
 		
-		let canvasState = ref([])//存放canvas操作
+		let canvasState = ref()//存放canvas操作
-		let stateIndex = ref(-1)//表示撤回数量
+		let reverseCanvasState = ref([])//存放canvas操作
+		let normalCanvasState = ref([])//存放canvas操作
 		let isLoadCanvas = false//撤回或者反撤回false为撤回
         let init = () => {
+			normalCanvasState.value = []
+			reverseCanvasState.value = []
             showUpgradePlan.value = true;
             nextTick().then(async () => {
                 allBoardData.value.likeDesignCollectionList =
@@ -187,15 +234,27 @@ export default defineComponent({
                     isDrawingMode: false, // 开启绘图模式
 					// preserveObjectStacking: true,
                 });
+				JSchangeType(canvas,'init')
 				canvasOnDrop()//开启鼠标到画布事件
 				setRemoveImage()//设置元素删除
 				canvas.on("object:modified", ()=>{
 					updateCanvasState()
 				});
-				canvas.on('selection:created', ()=>{
+				//鼠标移动
-					updateCanvasState('created')
+				canvas.on("mouse:move", event =>setCanvasMove(event));
-				});
+				canvas.on("mouse:out", event=>setCanvasOut(event));
-				// canvas.on("object:added", updateCanvasState);
+				canvas.on("mouse:down", event=>setCanvasDown(event));
+				canvas.on("mouse:up", event=>setCanvasUp(event));
+				// canvas.on('path:created', (event)=>{updateCanvasState()});
+				// canvas.on("selection:created", (event)=>{setZIndex(event)});
+				// canvas.on('object:removed', function() {
+				// });
+				// canvas.on("object:added", (obj)=>{
+				// 	obj.target.cornerSize = 10
+				// 	obj.target.transparentCorners = false
+				// });
+				fabric.Object.prototype.cornerSize = 10
+				fabric.Object.prototype.transparentCorners = false 
 				// setCanvasOperation()//设置监听添加修改画布元素，用来做撤回功能
                 let arr = [
                     "disposeMoodboard",
@@ -303,24 +362,29 @@ export default defineComponent({
 						canvas.setHeight(canvasWH.value.height);
 					}
                 }
+				updateCanvasState('')//加载完成后记录一下
             });
         };
 		let setRemoveImage = ()=>{
 			let deleteObject = (eventData, transform)=> {
-				var target = [transform.target];
+				// var target = [transform.target];
-				if(transform.target._objects){
+				let target = canvas.getActiveObjects()
-					target = transform.target._objects
-				}
-			// canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。 
-			// 	const sel = new fabric.ActiveSelection(canvas.getObjects(), {
-			// 	canvas
-			// })
 				target.forEach((item)=>{
-					var canvas = item.canvas;
+					// var canvas = item.canvas;
-					canvas.remove(item);
+					// canvas.remove(item);
+					canvas.fxRemove(item, {
+						onComplete(){
+						canvas.discardActiveObject(); // 丢弃当前选中的对象
+						canvas.renderAll(); // 重新渲染 Canvas
+						}
 					})
-				canvas.requestRenderAll();
+					canvas.FX_DURATION = 300
-				canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。 
+				})
+				// canvas.requestRenderAll();
+				// canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。 
+				// canvas.discardActiveObject(); // 丢弃当前选中的对象
+				// canvas.renderAll(); // 重新渲染 Canvas
+				updateCanvasState('remove')
 			}
 			const deleteIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC"
 			// 创建删除图片元素
@@ -348,22 +412,7 @@ export default defineComponent({
 				cornerSize: 24
 			})
 		}
-		//设置画布监听修改添加事件，用来做撤回功能
+		
-		let updateCanvasState = (str) =>{
-			if (!isLoadCanvas) {
-				const canvasAsJson = JSON.stringify(canvas.toJSON());
-				if(str == 'created'){
-					if(canvasState.value.length == 0){
-						canvasState.value.push(canvasAsJson);
-					}
-				}else{
-					canvasState.value.push(canvasAsJson);
-				}
-				stateIndex.value = canvasState.value.length - 1;
-			} else {
-				isLoadCanvas = false;
-			}
-		}
 		let setImageWidth = (key)=>{
 			let imgWidth = canvasWH.value.width; //这是设置画布等宽
 			if (
@@ -405,12 +454,9 @@ export default defineComponent({
 				scaleX:
 					imgWidth / img.width,
 				scaleY:(img.width * proportion * scaleWH) / img.height,
-				cornerSize: 10, // 选中时，角的大小为20
+				// cornerSize: 10, // 选中时，角的大小为20
-				// lockRotation:true,
+				// transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
-				// lockScalingX:true,
 				lockRotation: true,
-				transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
-				// cornerColor: "#a1de93", // 选中时，角的颜色是 青色
 			});
 		}
 		
@@ -552,24 +598,19 @@ export default defineComponent({
             canvas.setWidth(canvasWH.value.width);
         };
 
-		let closeNav = ref(0)
+		let closeNav = ref({
-		let setCloseNav = (num)=>{
+			nav:true,
-			if(closeNav.value == num){
+			tool:false,
-				closeNav.value = -1
+			move:false,
-			}else{
+		})
-				closeNav.value = num
+		let setCloseNav = (key)=>{
+			closeNav.value[key] = !closeNav.value[key]
 		}
-		}
-		// let multiselect = ()=>{
-		// 	console.log(canvas);
-		// 	multiselectJS(canvas)
-		// }
 		function multiselect() {//获取整体宽高
 			canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。 
 			const sel = new fabric.ActiveSelection(canvas.getObjects(), {
 				canvas
 			})
-			// console.log(sel)
 			canvas.setActiveObject(sel)
 			canvas.requestRenderAll()
 			const activeObject = canvas.getActiveObject(); // 获取当前选中的整体对象
@@ -579,7 +620,6 @@ export default defineComponent({
 				console.log('Total Width:', totalWidth);
 				console.log('Total Height:', totalHeight);
 			}
-
 		}
 		let currentType = ref({
 			type:'',
@@ -591,7 +631,6 @@ export default defineComponent({
 		}
 		let canvasOnDrop = ()=>{
 			canvas.on('drop', (opt)=> {
-			// 省略部分代码......
 				let offset = {
 					left: canvas.getSelectionElement().getBoundingClientRect().left,
 					top: canvas.getSelectionElement().getBoundingClientRect().top
@@ -607,15 +646,16 @@ export default defineComponent({
 						setCanvasColor(pointerVpt.y, pointerVpt.x,rect)
 					break
 					case 'moodboardFiles':
-				createRect(pointerVpt.y, pointerVpt.x,currentType.value.type)
+					createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
 					break
 					default :
-				createRect(pointerVpt.y, pointerVpt.x,currentType.value.type)
+					createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
 					break
 				}
 				// 创建完元素，把当前操作的元素类型设置回 null
 				currentType.value.type = null
 				currentType.value.data = null
+
 			})
 		}
 		let setGroup = (data)=>{
@@ -651,43 +691,274 @@ export default defineComponent({
 				top,
 				width: rect.width,
 				fill: "rgb(255,255,255)",
-				cornerSize: 10, // 选中时，角的大小为20
-				transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
 				stroke: "#212121",
 				strokeWidth: 1,
 			});
-			// 将矩形对象添加到 canvas 中
-
 			canvas.add(group);
 			return group
 		}
 		// 创建矩形
-		let createRect = (top, left,key)=> {
+		let createImage = async (top, left,key)=> {
 			let itemCanvasImg = currentType.value.data.imgUrl
 			if(key == 'likeDesignCollectionList'){
 				itemCanvasImg = currentType.value.data.designOutfitUrl;
 			}
+			await new Promise((resolve,reject)=>{
 				fabric.Image.fromURL(itemCanvasImg,(img) => {
 					setCanvasImage(img,key,left,top)//设置图片
 					canvas.add(img);
+					resolve()
 				},{ crossOrigin: "Anonymous" });
+			})
+			updateCanvasState()
+		}
+		//设置画布监听修改添加事件，用来做撤回功能
+		let updateCanvasState = (str) =>{
+				const canvasAsJson = JSON.stringify(canvas.toJSON());
+				if(str == 'loadingCompleted'){
+					// reverseCanvasState.value.push(canvasAsJson);
+				}
+				normalCanvasState.value.push(canvasAsJson);
+			if (isLoadCanvas) {
+				reverseCanvasState.value = []
+				isLoadCanvas = false;
+				canvasState.value = canvasAsJson
+			}
 		}
 		//撤回
-		let historyState = (index)=> {
+		let historyState = (str)=> {
-			if(index<=0){
+			if(str == 'reverse' && reverseCanvasState.value.length > 0){
-				index = 0
+				canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
-			}else if (index >canvasState.value.length){
+				let obj = reverseCanvasState.value.pop()
-				index = canvasState.value.length-1
+				normalCanvasState.value.push(obj);
-			}
+			}else if(str == '' && normalCanvasState.value.length > 1){
+				let obj = normalCanvasState.value.pop()
+				reverseCanvasState.value.push(obj);
+				canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
 				isLoadCanvas = true;
-			canvas.loadFromJSON(canvasState.value[index], () => {
+			}else{
-				canvas.forEachObject(function(obj) {
+				return
-					obj.cornerSize = 10
+			}
-					obj.transparentCorners=false
+			canvas.loadFromJSON(canvasState.value, () => {});
-				});
+		}
-				canvas.renderAll();
+		
-				stateIndex.value = index;
+		//在画布进行画画
+		let operation = ref('move')
+		let operationMode = ref('fill')
+		//铅笔颜色 大小
+		let canvasPencilColor = ref('#000000')
+		let canvasPencilWidth = ref(20)
+		let setOperation = (str)=>{
+			operation.value = str
+			canvas.discardActiveObject();//取消所有选中边框
+			clearPatterning()//临时图形置为空并且添加撤回对象里面
+			if(str == 'pencil'){
+				setPencil()
+			}else if(str == 'move'){
+				setMove()
+				canvas.forEachObject((obj) =>obj.selectable = true);
+				JSchangeType(canvas,'init')
+			}else if(str == 'eraser'){
+				setEraser()
+			}else{
+				canvas.forEachObject((obj) =>obj.selectable = false);
+				canvas.isDrawingMode = false
+			}
+		}
+		let setOperationMode = (str) =>{
+			operationMode.value = str
+		}
+		let brushIndicator = new fabric.Circle({
+			radius:canvasPencilWidth.value/2,
+            fill: '#fff',
+			stroke: '#000',
+			strokeWidth: 0,
+            originX: 'center',
+            originY: 'center',
+			visible :true,
+			erasable: false,
         });
+		let setPencil =()=>{
+            let pencil = new fabric.PencilBrush(canvas); //笔
+			canvas.preserveObjectStacking = true;
+			canvas.isDrawingMode = true//开启绘画模式
+            canvas.freeDrawingBrush = pencil
+            canvas.freeDrawingBrush.color = canvasPencilColor.value;
+			brushIndicator.set('fill',canvasPencilColor.value)
+			canvas.freeDrawingBrush.isEraser = false
+			canvas.freeDrawingBrush.width = canvasPencilWidth.value;
+		}
+		
+		let setMove = () =>{
+			canvas.isDrawingMode = false
+			canvas.forEachObject((obj) =>obj.selectable = true);
+		}
+		let setEraser = ()=>{
+			canvas.isDrawingMode = true
+			let eraser = new fabric.EraserBrush(canvas)
+            canvas.freeDrawingBrush = eraser
+			brushIndicator.set({fill: '#FFF'});
+			canvas.requestRenderAll();
+			canvas.freeDrawingBrush.isEraser = true
+			canvas.freeDrawingBrush.width = canvasPencilWidth.value;
+		}
+		let setTimeOut = {
+			color:null,
+			width:null,
+		}//给切换颜色设置防抖
+		let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
+			clearTimeout(setTimeOut.color)
+			setTimeOut.color = setTimeout(()=>{
+				// brushIndicator.fill = canvasPencilColor.value;
+				if(canvas.freeDrawingBrush.isEraser){
+
+				}else{
+					brushIndicator.set({fill: canvasPencilColor.value});
+				}
+				canvas.freeDrawingBrush.color = canvasPencilColor.value;
+
+			},300)
+		}
+		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
+			clearTimeout(setTimeOut.width)
+			canvasPencilWidth.value = Number(canvasPencilWidth.value)
+			setTimeOut.width = setTimeout(()=>{
+				canvas.freeDrawingBrush.width = canvasPencilWidth.value;
+				// setPencil()
+			},300)
+		}
+		let downPoint = null;//鼠标按下位置
+		let upPoint = null;//鼠标抬起位置
+		let currentPatterning = null//临时图形
+		let polyLineBtn = null
+		let createPatterningIs = false
+		let clearPatterning = () =>{
+			if(createPatterningIs){
+				canvas.remove(currentPatterning)
+			}
+			currentPatterning = null
+			canvas.remove(polyLineBtn)
+			updateCanvasState()
+		}
+		//设置再画布上移动 
+		let setCanvasMove = (event)=>{
+			var pointer = canvas.getPointer(event.e);
+			if(canvas.isDrawingMode){
+				canvas.setCursor('none');
+				if(!canvas.contains(brushIndicator)){
+					canvas.add(brushIndicator)
+					canvas.bringToFront(brushIndicator);//设置优先级最高
+				}
+				// brushIndicator.fill = canvasPencilColor.value
+				brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:canvasPencilWidth.value/2 });
+				
+			}else{
+				if(createPatterningIs){
+					JScanvasMouseMove(operation.value,event,currentPatterning,downPoint)
+				}
+			}
+			canvas.requestRenderAll()
+		}
+		let setCanvasOut = (event)=>{
+			canvas.remove(brushIndicator)//鼠标移出删除绘画范围的圆形
+		}
+		//设置再画布上按下
+		let setCanvasDown = (event)=>{
+
+			downPoint = event.absolutePointer
+			let arr = ['rect','line','circle','triangle','ellipse','fold']
+			if(arr.indexOf(operation.value) > -1){
+				JSchangeType(canvas,operation.value)
+				createPatterningIs = true
+				if(currentPatterning && operation.value == 'fold'){
+					canvas.skipTargetFind = false
+					currentPatterning.points.push({
+						x: downPoint.x,
+						y: downPoint.y
+					})
+					// currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value,currentPatterning)
+				}else{
+					if(operation.value == 'fold'){
+						polyLineBtn = JScreateCheck(event)
+						polyLineBtn.on('mousedown',()=>{
+							canvas.skipTargetFind = true
+							let points = currentPatterning.points
+							currentPatterning.points.pop()
+							currentPatterning.points.pop()
+							// canvas.remove(currentPatterning)
+							// let polyline = new fabric.Polyline(points, {
+							// 	fill: 'transparent',
+							// 	stroke: canvasPencilColor.value,
+							// 	strokeWidth:canvasPencilWidth.value,
+							// 	selection:false,
+							// })
+							// canvas.add(polyline)
+							currentPatterning.set({stroke: canvasPencilColor.value})
+							createPatterningIs = false
+							clearPatterning()//临时图形置为空并且添加撤回对象里面
+						})
+						canvas.add(polyLineBtn)
+					}
+					currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value,currentPatterning)
+					canvas.add(currentPatterning)
+					canvas.bringToFront(currentPatterning);//设置优先级最高
+				}
+			}else{
+				createPatterningIs = false
+			}
+		}
+		//设置再画布上抬起
+		let setCanvasUp = (event)=>{
+			upPoint = event.absolutePointer
+			if(canvas.isDrawingMode){
+				canvas.remove(brushIndicator)
+				updateCanvasState()
+			}else{
+				// event.target && (event.target.bringToFront())//设置优先级
+			}
+			if(createPatterningIs){
+				switch (operation.value) {
+					case 'line':
+						currentPatterning.set({stroke: canvasPencilColor.value})
+					break
+					case 'fold':
+						// currentPatterning.set({stroke: canvasPencilColor.value})
+					break
+					default :
+						if(operationMode.value == 'fill'){
+							currentPatterning.set({fill: canvasPencilColor.value})
+						}else if (operationMode.value == 'border'){
+							currentPatterning.set({fill: 'transparent',stroke: canvasPencilColor.value,strokeWidth: canvasPencilWidth.value})
+						}
+						if(JSON.stringify(downPoint) == JSON.stringify(upPoint)){
+							canvas.remove(currentPatterning)
+						}
+					break
+				}
+				if(operation.value == 'fold'){
+					canvas.forEachObject((obj) =>obj.selectable = false);
+					canvas.bringToFront(polyLineBtn);//设置优先级最高
+				}else{
+					createPatterningIs = false
+					clearPatterning()//临时图形置为空并且添加撤回对象里面
+				}
+			}
+		}
+		let setHDExport = ()=>{
+			let selectedObject = canvas.getActiveObject();
+			if (selectedObject && selectedObject.type === 'image') {
+				// 如果是图片对象，则可以对其进行操作
+				let selectedImage = selectedObject;
+				let img = new Image
+				img.src = selectedImage.getSrc()
+				img.onload = ()=>{
+					console.log(img.width,img.height);
+				}
+				// 输出图片对象的 URL
+				console.log('Selected image URL:', selectedImage.getSrc());
+			} else {
+				console.log('No image selected.');
+			}
 		}
         onMounted(() => {});
 
@@ -705,7 +976,15 @@ export default defineComponent({
 			multiselect,
 			onDragstart,
 			historyState,
-			stateIndex,
+			operation,
+			operationMode,
+			setOperation,
+			setOperationMode,
+			canvasPencilColor,
+			canvasPencilWidth,
+			setPencilColor,
+			setPencilWidth,
+			setHDExport,
         };
     },
     data(prop) {
@@ -780,8 +1059,11 @@ export default defineComponent({
 			margin-top: 2rem;
 			display: flex;
 			justify-content: space-between;
-			padding-right: 2rem;
 			cursor: pointer;
+			position: sticky;
+			top: 1rem;
+			background: #f9fafb;
+			z-index: 2;
 			.icon{
 				transition: all .3s;
 			}
@@ -812,20 +1094,27 @@ export default defineComponent({
                     width: 10em;
                 }
             }
-			.exportCanvasBox_img.closeNav{
+			.exportCanvasBox_left_item.closeNav{
-				max-height: 1000rem;
+				// max-height: 1000rem;
+				height: auto;
 			}
         }
 		.exportCanvasBox_left::-webkit-scrollbar,
 		.exportCanvasBox_right::-webkit-scrollbar{display: none;}
         .exportCanvasBox_left {
-            
+				padding-right: 1rem;
-            .exportCanvasBox_img {
+			.exportCanvasBox_title {
-				transition: all .3s;
+				padding-right: 2rem;
+			}
+            .exportCanvasBox_left_item{
 				overflow: hidden;
-				// height: auto;
+				transition: all .3s;
-				max-height: 0;
+				// max-height: 0;
+				height: 0;
 				transform: translate3d(0, 0, 0);
+			}
+            .exportCanvasBox_img {
+				// height: auto;
 				
                 .exportCanvasBox_allItem {
                     display: flex;
@@ -862,10 +1151,35 @@ export default defineComponent({
 					}
                 }
             }
+			.exportCanvasBox_left_tool{
+				.exportCanvasBox_left_tool_item{
+					display: flex;
+					flex-wrap: wrap;
+					justify-content: space-between;
+					margin-bottom: 1rem;
+					&.leftAlign{
+						justify-content: flex-start;
+					}
+					i{
+						font-size: 2.5rem;
+						cursor: pointer;
+						width: 4rem;
+						height: 4rem;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						&.active{
+							border: 1px solid;
+							border-radius: .4rem;
+						}
+					}
+				}
+			}
         }
 		.exportCanvasBox_right{
 			display: flex;
 			flex-direction: column;
+			padding-left: 1rem;
 			position: relative;
 			.exportCanvasBox_right_definition{
 				// display: flex;

src/component/HomePage/Header.vue

@@ -217,7 +217,7 @@ export default defineComponent({
 		let isTest = ref()
 		let isMurmur = ref()
 		let credits = computed(()=>{
-			return store.state.UserHabit.credits.value
+			return Number(store.state.UserHabit.credits.value)
 		})
 		let activeCredits = ref(false)
 		return {
@@ -281,6 +281,7 @@ export default defineComponent({
 			this.operateClick();
 			document.addEventListener("click", this.operateClick);
 		}
+		this.getCredits()
 		this.getLang('')
     },
     methods: {
@@ -297,16 +298,22 @@ export default defineComponent({
 			UpgradePlan.init()
 		},
 		Assignment(){//任务
-			let num = 123+this.credits
+			// let num = 123+this.credits
-			this.store.commit('setCredits',num)
+			// this.store.commit('setCredits',num)
 		},
 		getCredits(){//刷新当前积分
-			let num = 123+this.credits
+			if(!this.activeCredits){
 				this.activeCredits = true
+				this.store.dispatch('getCredits').then((rv)=>{
 					setTimeout(()=>{
 						this.activeCredits = false
 					},300)
-			this.store.commit('setCredits',num)
+				})
+			}else{
+				this.activeCredits = false
+			}
+			
+			
 		},
         //点击下拉图标出现操作
         changeShowOperateContent() {

src/component/HomePage/UpgradePlan.vue

@@ -101,8 +101,15 @@
 				<div class="UpgradePlan_payList_item_upgrade2 subitOkPreviewBtn" @click="payment">Payment</div>
 			</div>
 		</div>
-		<div class="mark_loading" v-show="isShowMark">
+		<div class="mark_loading bgFFF" v-show="isShowMark">
-			<div class="mark_loading_title" @click="getTradeQuery">Paid completed</div>
+			<div class="mark_loading_title">Paid completed</div>
+			<div class="mark_loading_intro">Please keep the window open until the payment is completed. If you are unable to open the payment window, please check your browser settings to see if pop-ups are being blocked.</div>
+
+			<div class="mark_loading_title_box">
+				<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">Back</div>
+				<div class="mark_loading_btn" @click="getTradeQuery">OK</div>
+			</div>
+			
 			</div>
 	</a-modal>
 </template>
@@ -132,8 +139,8 @@ export default defineComponent({
 		let stepNum = ref(0)
 		let price = ref({
 			num:1,
-			price:15,
+			price:2,
-			credits:115,
+			credits:45,
 		})
 		let modeOfPayment = ref('paypal')
 		let clause = ref(false)//同意条款
@@ -214,9 +221,8 @@ export default defineComponent({
 			if(this.modeOfPayment == 'paypal'){
 				httpsUrl = Https.httpUrls.payPaypal
 			}
-			Https.axiosPost(httpsUrl+`/${this.payIndex}?returnUrl=${url}`, {returnUrl:url}).then(
+			Https.axiosPost(httpsUrl+`/${this.price.num}?returnUrl=${url}`,).then(
 				(rv: any) => {
-					console.log(rv);
 					var width = 800;
 					var height = 600;
 					var left = (screen.width - width) / 2;
@@ -239,16 +245,12 @@ export default defineComponent({
 		//查询是否支付
 		getTradeQuery(){
 			this.isShowMark = false
-			this.newWindow.close();
+			this.newWindow.close();//关闭打开的窗口页面
-			let num = this.store.state.UserHabit.credits.value+111
+			this.store.dispatch('getCredits')
-			this.store.commit('setCredits',num)
+			this.cancelDsign()
-
+		},
-			// let params = 1
+		setPaidBack(){//点击返回
-			// Https.axiosGet(Https.httpUrls.tradeQuery,{params:{enumName:params}}).then((rv) => {
+			this.isShowMark = false
-			// 	if (rv) {
-			// 		console.log(rv);
-			// 	}
-			// })
 		},
 		cancel(){//取消
 			this.stepNum = 0
@@ -277,6 +279,7 @@ export default defineComponent({
 	position: relative;
 	.mark_loading{
 		position: absolute;
+		background: #fff;
 	}
 	.UpgradePlan_content{
 		font-size: var(--aida-fsize2);

src/router/index.ts

@@ -9,7 +9,7 @@ const routes: Array<RouteRecordRaw> = [
 		path: "/",
 		// redirect重定向
 		redirect: "/login"
-		// redirect: "/Upgrade"
+		// redirect: "/upgrade"
 	},
 	{
 		path: '/login',
@@ -89,15 +89,13 @@ router.beforeEach((to, from, next) => {
 	// 检查路由是否存在
 	// 机房用户
 	let userInfo = JSON.parse(getCookie("userInfo") as any);
-	console.log(userInfo);
-	
 
 	let murmurStr: any = localStorage.getItem('murmurStr')
 	let getIsMurmur: any = getCookie("isMurmur")
 	let token = getCookie("token");
 	let isMurmur = JSON.parse(getIsMurmur)
-    let routeList = ['/testClickData']
+    let routeList = ['/testClickData','/trialApproval']//指定页面需要指定id才能进入
-    let userIdList = [83]
+    let userIdList = [83,88,6]
 	const routeExists = router.getRoutes().some(({ name }) =>{
 		if(name){
 			return  name === to.name
@@ -105,33 +103,31 @@ router.beforeEach((to, from, next) => {
 			return false
 		}
 	});
+	if (routeExists) {
+		if (isMurmur && murmurStr && token) {
+			const toName = to.name === 'login';
+			if (toName) {
+				next({ name: 'home' });
+			} else {
 				next();
+			}
+		} else {
+			if (routeList.indexOf(to.path) > -1 ) {
 				
-	// if (routeExists) {
+				if(userIdList.indexOf(userInfo.userId) > -1){
-	// 	if (isMurmur && murmurStr && token) {
+					next();
-	// 		const toName = to.name === 'login';
+				}else{
-	// 		if (toName) {
+					next({ name: 'home' });
-	// 			next({ name: 'home' });
+				}
-	// 		} else {
+			}else{
-	// 			next();
+				next();
-	// 		}
+			}
-	// 	} else {
+				// 如果页面存在，正常跳转
-	// 		if (routeList.indexOf(to.path) > -1 ) {
+		}
-				
+	} else {
-	// 			if(userIdList.indexOf(userInfo.userId) > -1){
+		// 如果页面不存在，可以跳转到404页面或者其他页面
-	// 				next();
+		next('/404');
-	// 			}else{
+	}
-	// 				next({ name: 'home' });
-	// 			}
-	// 		}else{
-	// 			next();
-	// 		}
-	// 			// 如果页面存在，正常跳转
-	// 	}
-	// } else {
-	// 	// 如果页面不存在，可以跳转到404页面或者其他页面
-	// 	next('/404');
-	// }
 
 
 });

src/store/userHabit/userHabit.ts

@@ -45,6 +45,17 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
 			// 	.catch((rv) => {
 			// 	});
 		},
+		getCredits(context){
+			return new Promise( async (resolve) => {
+				await Https.axiosGet(Https.httpUrls.getCredits,).then((rv) => {
+					context.commit('setCredits',rv)
+					resolve(true)
+				}).catch((res) => {
+					resolve(true)
+				});
+			})
+			
+		}
     }
 }
 

src/tool/canvasDrawing.js

@@ -10,10 +10,200 @@ function multiselectJS(canvas) {//获取整体宽高
 	if (activeObject && activeObject.type === 'activeSelection') {
 		const totalWidth = activeObject.width * activeObject.scaleX;
 		const totalHeight = activeObject.height * activeObject.scaleY;
-		return {totalWidth,totalHeight}
+		return { totalWidth, totalHeight }
 		console.log('Total Width:', totalWidth);
 		console.log('Total Height:', totalHeight);
 	}
+}
+function JSchangeType(canvas, val) {
+	switch (val) {
+		case 'init':
+			canvas.selection = true
+			canvas.selectionColor = 'rgba(0, 0, 0, 0.2)'
+			canvas.selectionBorderColor = 'rgba(255, 255, 255, 0.3)'
+			canvas.skipTargetFind = false 
+			break
+		default:
+			canvas.selectionColor = 'transparent'
+			canvas.selectionBorderColor = 'transparent'
+			canvas.skipTargetFind = true // 禁止选中
+			break
+	}
+}
+//绘制直线
+function JScanvasMouseDown(str,e, width,patterning) {//创建线
+	let downPoint = e.absolutePointer
+	let currentPatterning
+	switch (str) {
+		case 'rect':
+			let top = Math.min(downPoint.y)
+			let left = Math.min(downPoint.x)
+			// let height = Math.abs(downPoint.y - upPointer.y)
+			// let width = Math.abs(downPoint.x - upPointer.x)
+			currentPatterning = new fabric.Rect({
+				top,
+				left,
+				fill: 'rgba(0, 0, 0, 0.2)',
+				rx:5,
+				ry:5,
+			})
+		break
+		case 'line':
+			currentPatterning = new fabric.Line([
+				downPoint.x, downPoint.y, // 起始点坐标
+				downPoint.x, downPoint.y // 结束点坐标
+			],
+				{
+					stroke: 'rgba(0, 0, 0, 0.2)', // 笔触颜色
+					strokeLineCap: 'round',
+					strokeWidth:Number(width),
+				}
+			)
+		break
+		case 'circle':
+			currentPatterning = new fabric.Circle({
+				top: downPoint.y,
+				left: downPoint.x,
+				radius: 0,
+				fill: 'rgba(0, 0, 0, 0.2)',
+				// fill: 'transparent',
+				// stroke: 'rgba(0, 0, 0, 0.2)'
+			  })
+		break
+		case 'triangle':
+			currentPatterning = new fabric.Triangle({
+				top: downPoint.y,
+				left: downPoint.x,
+				width: 0,
+				height: 0,
+				fill: 'rgba(0, 0, 0, 0.2)',
+				// fill: 'transparent',
+				// stroke: 'rgba(0, 0, 0, 0.2)'
+			  })
+		break
+		case 'ellipse':
+			currentPatterning = new fabric.Ellipse({
+				top: downPoint.y,
+				left: downPoint.x,
+				rx: 0,
+				ry: 0,
+				fill: 'rgba(0, 0, 0, 0.2)',
+				// fill: 'transparent',
+				// stroke: 'rgba(0, 0, 0, 0.2)'
+			  })
+		break
+		case 'fold':
+			currentPatterning = new fabric.Polyline([
+					{ x: downPoint.x, y: downPoint.y },
+					{ x: downPoint.x, y: downPoint.y }
+				],{
+					fill: 'transparent',
+					stroke: 'rgba(0, 0, 0, 0.2)',
+					objectCaching: false,
+					strokeWidth:Number(width),
+					selection:false,
+				}
+			)
+		break
+	}
+	return currentPatterning
+}
+function JScreateCheck(e){//创建对号
+	let downPoint = e.absolutePointer
+
+	let rect = new fabric.Rect({
+		width:20,
+		height:20,
+		fill: 'rgba(0, 0, 0, 0.2)',
+		rx:5,
+		ry:5,
+		
+	})
+	var path = new fabric.Path('M2 10 L8 16 L18 4', {
+		left: 2.5,
+		top: 2.5,
+		stroke: 'white',
+		strokeWidth: 2,
+		fill:'transparent',
+	});
+	var polyLineBtn = new fabric.Group([rect, path],{
+		top:downPoint.y-40,
+		left:downPoint.x-10,
+		width:20,
+		height:20,
+		hasControls: false, // 禁用控制点
+		hasBorders: false, // 禁用边框线
+		selectable: false, // 禁用选择功能
+		hoverCursor: 'pointer'
+	});
+	return polyLineBtn
+}
+function JScanvasMouseMove(str,e, currentPatterning,downPoint) {
+	const currentPoint = e.absolutePointer
+	let width,height,top,left,radius,rx,ry
+	switch (str) {
+		case 'line':
+			currentPatterning.set('x2', currentPoint.x)
+			currentPatterning.set('y2', currentPoint.y)
+		break
+		case 'rect':
+			width = Math.abs(downPoint.x - currentPoint.x)
+			height = Math.abs(downPoint.y - currentPoint.y)
+		
+			top = currentPoint.y > downPoint.y ? downPoint.y : currentPoint.y
+			left = currentPoint.x > downPoint.x ? downPoint.x : currentPoint.x
+		
+			currentPatterning.set('width', width)
+			currentPatterning.set('height', height)
+			currentPatterning.set('top', top)
+			currentPatterning.set('left', left)
+		break
+		case 'circle':
+			radius = Math.min(Math.abs(downPoint.x - currentPoint.x), Math.abs(downPoint.y - currentPoint.y)) / 2
+			top = currentPoint.y > downPoint.y ? downPoint.y : downPoint.y - radius * 2
+			left = currentPoint.x > downPoint.x ? downPoint.x :  downPoint.x - radius * 2
+
+			currentPatterning.set('radius', radius)
+			currentPatterning.set('top', top)
+			currentPatterning.set('left', left)
+		break
+		case 'triangle':
+			width = Math.abs(downPoint.x - currentPoint.x)
+			height = Math.abs(downPoint.y - currentPoint.y)
+			top = currentPoint.y > downPoint.y ? downPoint.y : currentPoint.y
+			left = currentPoint.x > downPoint.x ? downPoint.x : currentPoint.x
+			currentPatterning.set('width', width)
+			currentPatterning.set('height', height)
+			currentPatterning.set('top', top)
+			currentPatterning.set('left', left)
+		break
+		case 'ellipse':
+			rx = Math.abs(downPoint.x - currentPoint.x) / 2
+			ry = Math.abs(downPoint.y - currentPoint.y) / 2
+		
+			top = currentPoint.y > downPoint.y ? downPoint.y : downPoint.y - ry * 2
+			left = currentPoint.x > downPoint.x ? downPoint.x :  downPoint.x - rx * 2
+		
+			currentPatterning.set('rx', rx)
+			currentPatterning.set('ry', ry)
+			currentPatterning.set('top', top)
+			currentPatterning.set('left', left)
+		break
+		case 'fold':
+			let points = currentPatterning.points
+			points[points.length - 1].x = currentPoint.x
+			points[points.length - 1].y = currentPoint.y
+		break
+	}
 
 }
-export default {multiselectJS,}
+function JSRectUpdata(rect, downPointer, upPointer) {
+	let height = (downPointer.y - upPointer.y)
+	let width = (downPointer.x - upPointer.x)
+	rect.set({
+		height,
+		width
+	})
+	return rect
+}
+export { multiselectJS, JSRectUpdata, JSchangeType, JScanvasMouseDown, JScanvasMouseMove,JScreateCheck }

src/tool/flexible.js

@@ -4,26 +4,23 @@ let flexible = (designWidth, maxWidth,minWidth) =>{
     maxWidth = maxWidth || 2560;
     minWidth = minWidth || 1024;
     function refreshRem() {
-		console.log(1);
         var width = docEl.getBoundingClientRect().width;
         maxWidth = maxWidth || 1920;
         width > maxWidth && (width = maxWidth);
         width > maxWidth && (width = maxWidth);
         width < minWidth && (width = minWidth);
         var rem = width * 10 / designWidth;
-		console.log(2);
+		docEl.style.fontSize = rem+'px'
         remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
     }
-    if (docEl.firstElementChild) {
+    // if (docEl.firstElementChild) {
-		console.log(22);
+    //     docEl.firstElementChild.appendChild(remStyle);
-        docEl.firstElementChild.appendChild(remStyle);
+    // } else {
-    } else {
+    //     var wrap = doc.createElement("div");
-		console.log(33);
+    //     wrap.appendChild(remStyle);
-        var wrap = doc.createElement("div");
+    //     doc.write(wrap.innerHTML);
-        wrap.appendChild(remStyle);
+    //     wrap = null;
-        doc.write(wrap.innerHTML);
+    // }
-        wrap = null;
-    }
     //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
     refreshRem();
     win.addEventListener("resize", function() {

src/tool/https.js

@@ -137,6 +137,7 @@ export const Https = {
         productList:`/api/product/list`, //获取商品列表
         payAlipay:`/api/ali-pay/trade/page/pay`, //支付宝确认支付
         payPaypal:`/api/paypal/trade`, //paypal确认支付
+        getCredits:`/api/credits/getCredits`, //查询用户积分
 		
         orderInfoList:`/api/order-info/list`, //查询订单列表
         tradeRefundAlipay:`/api/ali-pay/trade/refund`, //支付宝退款
@@ -203,6 +204,11 @@ export const Https = {
 		trialOrderApproval:`/api/account/trialOrderApproval`,//通过审批
 		trialOrderRefuse:`/api/account/trialOrderRefuse`,//拒绝审批
 		
+		//查询所有试用用户
+		inquiryGetTrial:`/api/inquiry/getTrial`,//拒绝审批
+		//查询某个时间内design点击次数
+		getDesignStatistic:`/api/inquiry/getDesignStatistic`,//拒绝审批
+
     },
 
     axiosGet(url,config) {

src/views/HistoryPage.vue

@@ -67,7 +67,7 @@
 						  <template #bodyCell="{ column, text, record ,index}">
 								<div class="operate_list" v-if="column?.Operations">
 									<div class="operate_item" @click="turnToDetail(record)">{{ $t('HistoryPage.Detail') }}</div>
-									<div class="operate_item" @click="renameCollection(record,index)">{{ $t('HistoryPage.Rename') }}</div>
+									<div class="operate_item" @click="renameCollection(record,index)">{{ $t('LibraryPage.Rename') }}</div>
 									<div class="operate_item" @click="retrieveHome(record)">{{ $t('HistoryPage.Retrieve') }}</div>
 									<div class="operate_item" @click="deleteGroup(record, index)">{{ $t('HistoryPage.Delete') }}</div>
 								</div>
@@ -82,6 +82,9 @@
 		<setLabel ref="setLabel"></setLabel>
 		<RobotAssist></RobotAssist>
 		<searchLabel ref="searchLabel"></searchLabel>
+		<div class="mark_loading" v-show="isShowMark">
+            <a-spin size="large" />
+        </div>
     </div>
 </template>
 <script lang="ts">
@@ -110,6 +113,7 @@ export default defineComponent({
     setup() {
         let rangePickerValue:any = ref([])
         let renameData:any = ref({}) //修改名字选中的数据
+		let isShowMark:any = ref(false)
         const columns:any = computed(()=>{
 			return [
 				{ title: useI18n().t('HistoryPage.CollectionsName'), align:'center', ellipsis: true, width: 150, dataIndex: 'name', key: 'collectionName' },
@@ -163,6 +167,7 @@ export default defineComponent({
 			props,
 			intersection,
 			selectCode,
+			isShowMark,
         }
     },
     data(){
@@ -198,7 +203,6 @@ export default defineComponent({
 				"userId": ''
 			}
 			
-			console.log(data);
 			Https.axiosPost(Https.httpUrls.queryClassification, data).then(
                 (rv: any) => {
 					this.options = rv
@@ -236,19 +240,23 @@ export default defineComponent({
         },
 
         getHistoryList(){
+			this.isShowMark = true
             let startDate:any = this.rangePickerValue ? new Date(this.rangePickerValue[0]).getTime(): ''
             let endDate:any = this.rangePickerValue ? new Date(this.rangePickerValue[1]).getTime(): ''
-            let data = {
+           
-                page:this.currentPage,
-                size:this.pageSize,
-                collectionName:this.searchCollectionName,
-                startDate:startDate,
-                endDate:endDate
-            }
 			let labelArr:any = []
 			this.value.labelValue.forEach((item:any)=>{
 				labelArr.push(item[item.length-1])
 			})
+			let data = {
+				classificationIdList:labelArr,
+                page:this.currentPage,
+                size:this.pageSize,
+                collectionName:this.searchCollectionName,
+                startDate:startDate,
+                endDate:endDate,
+				intersection:this.intersection,
+            }
 			// console.log(this.value.labelValue);
 			
 			// let data = {
@@ -271,8 +279,11 @@ export default defineComponent({
 						this.collectionList = rv.content
 						this.total = rv.total
 					}
+					this.isShowMark = false
                 }
-            );
+            ).catch(res=>{
+				this.isShowMark = false
+			});;
         },
 
         //删除分组

src/views/HomeView.vue

@@ -116,7 +116,7 @@
 									<div class="button_second Guide_1_31" @click="exportModel()">
 										{{ $t('HomeView.Export') }}
 									</div>
-									<div
+									<!-- <div
 										:class="[
 											'icon',
 											'iconfont',
@@ -124,12 +124,12 @@
 											isShowOperate ? 'icon_rotate' : '',
 										]"
 										@click.stop="changeShowOperateContent()"
-									></div>
+									></div> -->
-									<div class="export_nav" v-show="isShowOperate" @click.stop="">
+									<!-- <div class="export_nav" v-show="isShowOperate" @click.stop="">
 										<a-checkbox v-for="item in exportNav" v-model:checked="item.change" :disabled='item.noChange'>
 											{{ item.name }}
 										</a-checkbox>
-									</div>
+									</div> -->
 								</div>
 								
 							</div>

src/views/TestClickData.vue

@@ -1,75 +1,87 @@
 <template>
-     <div class="history_page">
+    <div class="trial_page">
         <div class="page_content">
             <img
                 class="page_content_bg"
-                src="@/assets/images/homePage/bg.png"
+                src="@/assets/images/homePage/bg1.jpg"
             />
             <div class="page_content_body">
-                <HeaderComponent></HeaderComponent>
+                <div class="trial_page_body">
-                <div class="history_page_body">
+                    <div class="trial_table_search">
-                    <div class="history_header">{{ $t('HistoryPage.History') }}</div>
+                        <a-range-picker
-                    <div class="history_table_search">
+                            class="range_picker"
-                       
+                            v-model:value="rangePickerValue"
-                        <!-- <div class="content_search_block">
+                            :placeholder="[
-                            <input class="search_input" :placeholder="$t('HistoryPage.inputContent1')" v-model="searchCollectionName"  @keydown.enter="searchHistoryList()">
+                                $t('HistoryPage.StartDate'),
-                            <div class="search_icon_block" @click="searchHistoryList()"><span class="icon iconfont icon-sousuo"></span></div>
+                                $t('HistoryPage.EndDate'),
-                        </div> -->
+                            ]"
-						<div class="content_search_block">
+                            valueFormat="YYYY-MM-DD"
-							<a-range-picker class="range_picker" v-model:value="rangePickerValue" :placeholder="[$t('HistoryPage.StartDate'), $t('HistoryPage.EndDate')]" valueFormat="YYYY-MM-DD">
+                        >
                             <template #suffixIcon>
-                                <span class="icon iconfont range_picker_icon icon-rili"></span>
+                                <span
+                                    class="icon iconfont range_picker_icon icon-rili"
+                                ></span>
                             </template>
                         </a-range-picker>
-							<input class="search_input" :placeholder="$t('LibraryPage.inputContent1')" v-model="searchCollectionName"  @keydown.enter="searchHistoryList()">
+                        <div class="content_search_block">
-							<div class="search_cascader">
+                            <input
-								<el-cascader 
+                                class="search_input"
-									:options="options" 
+                                :placeholder="$t('HistoryPage.inputContent1')"
-									filterable
+                                v-model="searchCollectionName"
-									v-model="value.labelValue"
+                                @keydown.enter="searchHistoryList()"
-									:collapse-tags="true" 
+                            />
-									:show-all-levels="false" 
+                            <div
-									:clearable="true"
+                                class="search_icon_block"
-									:placeholder="$t('LibraryPage.Select')"
+                                @click="searchHistoryList()"
-									:max-collapse-tags=3
-									:props="props" 
-									:collapse-tags-tooltip="true"
-									ref="cascader"
-									popper-class="libraryPageCascader"
-									@visible-change="dropdownVisibleChange"
                             >
-									<template #empty>
+                                <span class="icon iconfont icon-sousuo"></span>
-										<div>
-											{{$t('LibraryPage.Select')}}
                             </div>
-									</template>
-								</el-cascader>
-							</div>
-							<div class="intersection">
-								<div :title="$t('LibraryPage.unionSet')" @click="()=>intersection = 1" v-show="intersection == 0" :class="['icon', 'iconfont','icon-bingji',]"></div>
-								<div :title="$t('LibraryPage.intersection')" @click="()=>intersection = 0" v-show="intersection == 1" :class="['icon', 'iconfont','icon-bingji1',]"></div>
-							</div>
-							<!-- <div class="search_icon_block" @click="getLibraryList('')"><span class="icon iconfont icon-sousuo"></span></div> -->
-							<div class="generage_btn search_icon_block" @click="searchHistoryList()"><span class="icon iconfont icon-sousuo"></span></div>
                         </div>
                     </div>
 
-                    <div class="history_table_content" ref="historyTable">
+                    <div class="trial_table_content" ref="historyTable">
-                         <a-table :columns="columns" :data-source="collectionList" :scroll="{ y: historyTableHeight }" @change="changePage"
+                        <a-table
+                            :columns="columns"
+                            :data-source="collectionList"
+                            :scroll="{ y: historyTableHeight }"
+                            @change="changePage"
                             :pagination="{
-                            showSizeChanger:true,
+                                showSizeChanger: true,
                                 current: currentPage,
-                            pageSize:pageSize,
+                                pageSize: pageSize,
                                 total: total,
-                            showQuickJumper:true,
+                                showQuickJumper: true,
-                            bordered:false
+                                bordered: false,
-                         }">
+                            }"
-						  <template #bodyCell="{ column, text, record ,index}">
+                        >
-								<div class="operate_list" v-if="column?.Operations">
+                            <template
-									<div class="operate_item" @click="turnToDetail(record)">{{ $t('HistoryPage.Detail') }}</div>
+                                #bodyCell="{ column, text, record, index }"
-									<div class="operate_item" @click="renameCollection(record,index)">{{ $t('HistoryPage.Rename') }}</div>
+                            >
-									<div class="operate_item" @click="retrieveHome(record)">{{ $t('HistoryPage.Retrieve') }}</div>
+                                <div
-									<div class="operate_item" @click="deleteGroup(record, index)">{{ $t('HistoryPage.Delete') }}</div>
+                                    class="operate_list"
+                                    v-if="column?.Operations"
+                                >
+                                    <div
+										v-show="status == 0"
+                                        class="operate_item"
+                                        @click="setConsent(record, index)"
+                                    >
+										consent
+                                    </div>
+									<div
+										v-show="status == 0"
+                                        class="operate_item"
+                                        @click="setRefuse(record, index)"
+                                    >
+										refuse
+                                    </div>
+                                    <!-- <div
+                                        class="operate_item"
+                                        @click="deleteGroup(record, index)"
+                                    >
+										Delete
+                                    </div> -->
+									
                                 </div>
                             </template>
                         </a-table>
@@ -77,292 +89,254 @@
                 </div>
             </div>
         </div>
-        <HistoryDetail ref="historyDetail" :groupDetails="groupDetails" :collectionName="collectionName"></HistoryDetail>
-
-		<setLabel ref="setLabel"></setLabel>
-		<RobotAssist></RobotAssist>
-		<searchLabel ref="searchLabel"></searchLabel>
     </div>
 </template>
 <script lang="ts">
-import { defineComponent,ref,createVNode,computed,nextTick,provide} from 'vue'
+import { defineComponent, ref, createVNode, computed } from "vue";
+import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
 import HeaderComponent from "@/component/HomePage/Header.vue";
 import HistoryDetail from "@/component/Detail/HistoryDetail.vue";
+import router from "@/router/index";
 import { Https } from "@/tool/https";
-import { formatTime } from "@/tool/util"
+import { formatTime } from "@/tool/util";
-import { Modal,message } from 'ant-design-vue';
+import { Modal, message } from "ant-design-vue";
 import RobotAssist from "@/component/HomePage/RobotAssist.vue";
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
-import { ElCascader } from 'element-plus'
+import { useI18n } from "vue-i18n";
-import { useI18n } from 'vue-i18n';
-import setLabel from '@/component/LibraryPage/setLabel.vue';
-import searchLabel from '@/component/LibraryPage/searchLabel.vue';
-
 export default defineComponent({
     components: {
         HeaderComponent,
         HistoryDetail,
         RobotAssist,
-		setLabel,
-		ElCascader,
-		searchLabel
     },
     setup() {
-        let rangePickerValue:any = ref([])
+        let rangePickerValue: any = ref([]);
-        let renameData:any = ref({}) //修改名字选中的数据
+        let renameData: any = ref({}); //修改名字选中的数据
-        const columns:any = computed(()=>{
+        const columns: any = computed(() => {
             return [
-				{ title: useI18n().t('HistoryPage.CollectionsName'), align:'center', ellipsis: true, width: 150, dataIndex: 'name', key: 'collectionName' },
-				{ title: useI18n().t('HistoryPage.UptateTime'), align:'center', ellipsis: true,width: 150, dataIndex: 'updateDate', key: 'updateTime',customRender:(record:any)=>{
-					let time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
-					return time
-				}},
-				{ title: useI18n().t('HistoryPage.SketchCounts'), align:'center', ellipsis: true, width: 150, dataIndex: 'sketchCount', key: 'sketchCounts' },
                 {
-					title: useI18n().t('HistoryPage.Operations'),
+                    title: 'Email',
-					key: 'operation',
+                    align: "center",
-					align:'center', 
+                    ellipsis: true,
-					fixed: 'right',
+                    width: 170,
-					width: 150, 
+                    dataIndex: "email",
-					// slots:{customRender:'action'}
+                    key: "email",
-					Operations:true,
                 },
-			]
+                {
+                    title: 'Create Time',
+                    align: "center",
+                    ellipsis: 200,
+                    dataIndex: "updateTime",
+                    key: "updateTime",
+                    // customRender: (record: any) => {
+                    //     let time = formatTime(
+                    //         record.text / 1000,
+                    //         "YYYY-MM-DD hh:mm:ss"
+                    //     );
+                    //     return time;
+                    // },
+                },
+				{
+                    title: 'State',
+                    align: "center",
+                    ellipsis: true,
+                    width: 150,
+                    dataIndex: "status",
+                    key: "status",
+					   customRender: (record: any) => {
+                        let str
+						if(record.value == 0){
+							str ='pending'
+						}else if(record.value == 1){
+							str ='consent'
+						}else if(record.value == 2){
+							str ='reject'
+						}
+                        return str;
+                    },
+                },
+                {
+                    title: 'Address',
+                    align: "center",
+                    ellipsis: true,
+                    width: 150,
+                    dataIndex: "country",
+                    key: "country",
+                },
+				{
+                    title: 'Surname',
+                    align: "center",
+                    ellipsis: true,
+                    width: 150,
+                    dataIndex: "surname",
+                    key: "surname",
+                },
+				{
+                    title: 'Name',
+                    align: "center",
+                    ellipsis: true,
+                    width: 150,
+                    dataIndex: "userName",
+                    key: "userName",
+                },
+                {
+                    title: 'Operations',
+                    key: "operation",
+                    align: "center",
+                    fixed: "right",
+                    width: 200,
+                    // slots:{customRender:'action'}
+                    Operations: true,
+                },
+            ];
         });
-        let collectionList:any = ref([])
+
-		let {t} = useI18n()
+		let state:any = ref([
-		const options:any = ref([
+			{
-		]);
+				name:'all',
-		let value = ref({
+				value:'',
-			labelValue:[],
+			},
-			editLabelValue:[],
+			{
-		})
+				name:'unprocessed',
-		let props = {
+				value:0,
-			multiple: true,
+			},
-			checkStrictly: true,
+			{
-			emitPath:true,
+				name:'pending',
-			children:'childList',
+				value:1,
-			value:'id',
+			},
-			label:'classificationName',
+			{
-		}
+				name:'rejected',
-		let intersection = ref(1)
+				value:2,
-		let selectCode = ref('History')
+			},
-		let type:any = {
+		])
-			selectCode:selectCode,
+        let collectionList: any = ref([]);
-			designType:''
+        let status: any = ref(0);
-		}
+        let voluntarily: any = ref(false);
-		provide('type',type)
         return {
             rangePickerValue,
             columns,
             collectionList,
             renameData,
-			t,
+            status,
-			options,
+			state,
-			value,
+			voluntarily,
-			props,
+        };
-			intersection,
-			selectCode,
-        }
     },
-    data(){
+    data() {
-        return{
+        return {
-            currentPage:1,
+            currentPage: 1,
-            pageSize:10,
+            pageSize: 10,
-            total:0,
+            total: 0,
-            historyTableHeight:0,
+            historyTableHeight: 0,
-            newCollectionName:'',
+            newCollectionName: "",
-            groupDetails:{},//每个collection的详情
+            renameVisivle: false, //修改名字弹窗
-            collectionName:'',//选中的名字
+            collectionName: "", //选中的名字
-            searchCollectionName:'',
+            searchCollectionName: "",
-        }
+        };
     },
-    mounted(){
+    mounted() {
-        let historyTable:any = this.$refs.historyTable
+        let historyTable: any = this.$refs.historyTable;
-        this.historyTableHeight = historyTable.clientHeight - 130
+        this.historyTableHeight = historyTable.clientHeight - 130;
-        this.getHistoryList()
+        this.gettrialList();
-		this.getClass()
     },
-    methods:{
+    methods: {
-		getClass(){
-			let data = {
-				"classificationIdList": [],
-				"classificationName": "",
-				"createTime": "",
-				"deleteConfirm": '',
-				"id": '',
-				"libraryId": '',
-				"parentId": '',
-				"type": this.selectCode,
-				"updateTime": "",
-				"userId": ''
-			}
-			
-			console.log(data);
-			Https.axiosPost(Https.httpUrls.queryClassification, data).then(
-                (rv: any) => {
-					this.options = rv
-					rv.forEach((rvItem:any,rvIndex:number) => {
-						this.options[rvIndex].value = rvItem.id
-						this.options[rvIndex].label = rvItem.classificationName
-						rvItem.childList.forEach((childItem:any,index:number) => {
-							this.options[rvIndex].childList[index].value = childItem.id
-							this.options[rvIndex].childList[index].label = childItem.classificationName
-						});
-					});
-                }
-            ).catch((res)=>{
-            });
-		},
-        turnToDetail(record:any){
-            this.groupDetails = record.groupDetails
-            let historyDetail:any = this.$refs.historyDetail
-            this.collectionName = record.name
-            historyDetail.changeDetailShow()
-        },
-
-
         //改变页码
-        changePage(e:any){
+        changePage(e: any) {
-            this.currentPage = e.current
+            this.currentPage = e.current;
-            this.pageSize = e.pageSize
+            this.pageSize = e.pageSize;
-            this.getHistoryList()
+            this.gettrialList();
         },
 
         //查询列表
-        searchHistoryList(){
+        searchHistoryList() {
-             this.currentPage = 1
+            this.currentPage = 1;
-             this.getHistoryList()
+            this.gettrialList();
         },
 		
-        getHistoryList(){
-            let startDate:any = this.rangePickerValue ? new Date(this.rangePickerValue[0]).getTime(): ''
-            let endDate:any = this.rangePickerValue ? new Date(this.rangePickerValue[1]).getTime(): ''
-            let data = {
-                page:this.currentPage,
-                size:this.pageSize,
-                collectionName:this.searchCollectionName,
-                startDate:startDate,
-                endDate:endDate
-            }
-			let labelArr:any = []
-			this.value.labelValue.forEach((item:any)=>{
-				labelArr.push(item[item.length-1])
-			})
-			// console.log(this.value.labelValue);
 
-			// let data = {
+
-			// 	classificationIdList:labelArr,
+		//获取列表
-            //     level1Type:this.selectCode,
+        gettrialList() {
-            //     level2Type:'',
+			let startDate: any = this.rangePickerValue[0]
-            //     page:1,
+                ? this.rangePickerValue[0]+' '+'00:00:00'
-			// 	modelSex:'',
+                : "";
-            //     pictureName:this.searchCollectionName,
+            let endDate: any = this.rangePickerValue[1]
-            //     size:this.pageSize,
+                ? this.rangePickerValue[1]+' '+'00:00:00'
-			// 	intersection:this.intersection,
+                : "";
-            // }
+			let data = {
-            Https.axiosPost( Https.httpUrls.queryUserGroup, data).then(
+				endTime:startDate,
-            // Https.axiosPost( Https.httpUrls.queryLibraryPage, data).then(
+				startTime:endDate,
-                (rv: any) => {
-					if(this.currentPage > 1 && rv.content.length == 0){
-						this.currentPage = 1
-						this.getHistoryList()
-					}else{
-						this.collectionList = rv.content
-						this.total = rv.total
 			}
+			console.log(data);
+			
+			console.log(this.rangePickerValue,startDate,endDate);
+			Https.axiosGet(Https.httpUrls.getDesignStatistic,{params:data}).then((rv: any) => {
+				if (rv) {
+					console.log(rv);
+					
+					// this.workspaceItem.position = this.singleTypeList[0].label
+				}
+			})
+        },
+		setConsent(record: any, index: number){
+			const formData = new FormData()
+			formData.append('ids',record.id)
+			let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+			Https.axiosPost(Https.httpUrls.trialOrderApproval, {ids:record.id}).then(
+				(rv: any) => {
+					message.success('同意成功~')
+				}
+			);
+		},
+		setRefuse(record: any, index: number){
+			const formData = new FormData()
+			formData.append('ids',record.id)
+			let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+			Https.axiosPost(Https.httpUrls.trialOrderRefuse, formData,config).then(
+				(rv: any) => {
+					this.gettrialList();
+					message.success('拒绝成功~')
 				}
 			);
 		},
-
         //删除分组
-        deleteGroup(record:any,index:number){
+        // deleteGroup(record: any, index: number) {
-            let deleteGroupFun = (id:any,index:number) =>{
+        //     let deleteGroupFun = (id: any, index: number) => {
-                let data = {
+        //         let data = {
-                    userGroupId:id
+        //             userGroupId: id,
-                }
+        //         };
-                Https.axiosPost(Https.httpUrls.deleteUserGroup,data).then(
+        //         Https.axiosPost(Https.httpUrls.deleteUserGroup, data).then(
-                    (rv: any) => {
+        //             (rv: any) => {
-                        message.success(this.t('HistoryPage.jsContent1'))
+        //                 this.collectionList.splice(index, 1);
-                        this.collectionList.splice(index,1)
+        //             }
-                    }
+        //         );
-                );
+        //     };
-            }
+        //     Modal.confirm({
-            Modal.confirm({
+        //         title: "",
-                title: this.t('HistoryPage.jsContent2'),
+        //         icon: createVNode(ExclamationCircleOutlined),
-                icon: createVNode(ExclamationCircleOutlined),
+        //         okText: "Yes",
-                okText: 'Yes',
+        //         cancelText: "No",
-                cancelText: 'No',
+        //         centered: true,
-                centered:true,
+        //         mask: false,
-				mask:false,
+        //         onOk() {
-                onOk() {
+        //             deleteGroupFun(record.id, index);
-                    deleteGroupFun(record.id,index)
+        //         },
-                }
+        //     });
-            });
+        // },
-        },
-
-        //修改名字
-        renameCollection(record:any,index:number){
-			let searchLabel:any = this.$refs.searchLabel
-			searchLabel.init(record,index)
-        },
-
-        retrieveHome(record:any){
-            this.$router.push({name:'home',params: {id:record.id}})
-        },
 		
 		
-		removeLabel(){
-			let setLabel:any = this.$refs.setLabel
-			let cascader:any = this.$refs.cascader
-			cascader.togglePopperVisible()
-			let event = new Event('click', {"bubbles":true, "cancelable":true});
-			document.dispatchEvent(event);
-			setLabel.init('add',this.options)
     },
-		dropdownVisibleChange(){
+});
-			let element:any = this.$refs.cascader
-			nextTick().then(()=>{
-				let cascader = document.getElementsByClassName('libraryPageCascader')[0]
-				let cascaderChild = cascader
-				let element:any = this.$refs.cascader
-				if(cascader.children.length > 3 ){
-				}else{
-					let button1:any = document.createElement("span")
-					button1.classList.add('started_btn','cascader_btn1')
-					let button2:any = document.createElement("span")
-					button2.classList.add('started_btn','cascader_btn2')
-					let divMax:any = document.createElement("div")
-					divMax.classList.add('cascader_btn_max')
-					button1.textContent = 'Edit'
-					// button2.textContent = '删除'
-					button1.addEventListener('click',this.removeLabel,false)
-					divMax.appendChild(button1)
-					// divMax.appendChild(button2)
-					cascaderChild?.insertAdjacentElement("afterbegin", divMax);
-					
-					// cascader.addEventListener('click',this.cascaderClick)
-				}
-			})
-			let el = element.contentRef?.getElementsByClassName('el-cascader-menu__empty-text')?.[0]
-			if(el){
-				el.innerHTML = this.t('LibraryPage.NoLabel')
-			}
-		},
-    }
-})
 </script>
 <style lang="less">
-.history_page {
+.trial_page {
     width: 100%;
     height: 100%;
-	padding: 0 9rem;
     overflow: hidden;
     // min-width: 1440px;
     position: relative;
     .page_content {
         position: relative;
-
         .page_content_bg {
             position: absolute;
             width: 100%;
@@ -375,138 +349,115 @@ export default defineComponent({
             height: 100%;
             box-sizing: border-box;
 
-            .history_page_body{
+            .trial_page_body {
                 width: 100%;
                 height: calc(100% - 7rem);
                 padding: 0 2.5rem 4rem;
                 box-sizing: border-box;
-
+                .trial_table_search {
-                .history_header{
-                    font-size: 1.8rem;
-                    height: 6.3rem;
-                    line-height: 6.3rem;
-                    font-weight: 500;
-                    color: #333333;
-                }
-
-                .history_table_search{
                     display: flex;
                     align-items: center;
-
+                    margin-top: 5rem;
-                    .range_picker{
+					color: #fff;
+                    .range_picker {
                         width: 36rem;
-                        height: 3rem;
+                        height: 4.8rem;
-						margin-right: 2rem;
 
-                        .ant-picker-input > input{
+                        .ant-picker-input > input {
                             font-size: 1.6rem;
                         }
 
-                        .range_picker_icon{
+                        .range_picker_icon {
                             font-size: 2.2rem;
                         }
                     }
-					.ant-picker:hover, .ant-picker-focused{
+                    .content_search_block {
-						border-color: #d5d8df;
+                        margin-left: 4rem;
-					}
-					.content_search_block{
                         display: flex;
-						align-items: center;
+
-						width: 140rem; 
+                        .search_input {
-						.search_input{
+                            width: 32.8rem;
-							height: 3rem;
-							border-radius: 0.5rem;
-							width: 20rem;
-							border: 1px solid rgba(0, 0, 0, 0.15);
                             padding-left: 1.5rem;
-							border: 0.2rem solid #d5d8df;
+                            height: 4.8rem;
-							font-size: 1.2rem;
+                            line-height: 4.6rem;
+                            background: #ffffff;
+                            border: 0.1rem solid #f1f1f1;
+                            font-size: 1.6rem;
                             font-weight: 400;
-							margin-right: 2rem;
                             &::placeholder {
-								color: #C2C2C2;
+                                color: #c2c2c2;
                             }
                         }
-						.search_cascader{
-							// width: 53%;
-							width: 38rem;
-							display: flex;
-							position: relative;
 
-							
+                        .search_icon_block {
-						}
+                            width: 7.2rem;
-						.search_icon_block{
+                            height: 4.8rem;
-							width: 5.2rem;
+                            line-height: 4.8rem;
-							height: 2.8rem;
-							line-height: 2.8rem;
                             text-align: center;
                             background: #343579;
-							background-color: #39215b;
                             cursor: pointer;
-							border-radius: 2rem;
-							margin-left: 3rem;
-							.icon-sousuo{
-								font-size: 1.6rem;
-								color: #FFFFFF;
-							}
-						}
-						.intersection{
-							margin-left: 3rem;
-							cursor: pointer;
-						}
 
+                            .icon-sousuo {
+                                font-size: 2rem;
+                                color: #ffffff;
+                            }
+                        }
                     }
                 }
 
-                .history_table_content{
+                .trial_table_content {
                     margin-top: 2.6rem;
                     width: 100%;
                     height: calc(100% - 13.7rem);
-                    background: rgba(255, 255, 255, 0.6);
+                    background: rgba(255, 255, 255, 0.3);
                     padding-bottom: 3rem;
-
+					border-radius: 2rem;
-                    .ant-table{
+					backdrop-filter: blur(3rem);
+					overflow: hidden;
+					box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.38);
+                    .ant-table {
                         background: transparent;
                     }
 
-                    .ant-table-body{
+                    .ant-table-body {
                         overflow-y: auto !important;
                         -ms-overflow-style: none;
                         overflow: -moz-scrollbars-none;
 
-                        &::-webkit-scrollbar { width: 0 !important }
+                        &::-webkit-scrollbar {
-
+                            width: 0 !important;
+                        }
+                    }
+                    .ant-table-thead > tr > th {
+                        background: #ffffff00;
+						color: #fff;
+						border-bottom: none;
+						backdrop-filter: blur(1rem);
                     }
 
-                    .ant-table-thead > tr > th{
+                    .ant-table-tbody > tr > td {
-                        background: #FFFFFF;
-                    }
-
-                    .ant-table-tbody > tr > td{
                         border: none;
                         background: transparent;
-
+						// color: #fff;
-                        
                     }
 
-                     .ant-table-tbody > tr{
+                    .ant-table-tbody > tr {
-
+                        &:hover > td {
-                         &:hover > td{
+                            background: #ffffff3a;
-                            background: #FFFFFF;
                         }
                     }
 
-                     .ant-table-pagination-right{
+                    .ant-table-pagination-right {
                         padding-right: 3.5rem;
                     }
 
-                    .operate_list{
+                    .operate_list {
                         display: flex;
                         align-items: center;
                         justify-content: space-between;
                         padding: 0 1rem;
 
-                        .operate_item{
+                        .operate_item {
                             font-size: 1.4rem;
                             font-family: Roboto;
                             font-weight: 400;
@@ -518,46 +469,5 @@ export default defineComponent({
             }
         }
     }
-
-    
-}
-
-.rename_modal_component{
-
-    .collection_rename_content{
-        padding:2rem 9.2rem 3rem;
-
-
-        .rename_form_content{
-
-            .rename_form_input{
-                width: 100%;
-                height: 4.6rem;
-                margin-top: 1rem;
-                border: 0.1rem solid #B4BED7;
-                padding-left: 2.1rem;
-                line-height: 4.6rem;
-                font-size: 1.8rem;
-                box-sizing: border-box;
-
-                &::placeholder {
-                    color:#A5B0C2,
-                }
-            }
-        }
-
-        .rename_submit_button{
-            height: 4.8rem;
-            line-height: 4.8rem;
-            background: #343579;
-            font-size: 2.4rem;
-            font-weight: 500;
-            color: #FFFFFF;
-            width: 16rem;
-            text-align: center;
-            cursor: pointer;
-            margin: 4.5rem auto 0;
-        }
-    }
 }
 </style>

src/views/Upgrade.vue

@@ -7,7 +7,7 @@
 			<div class="upgrade-content-wire"></div>
 			<!-- <div class="upgrade-content-text">System upgrading</div> -->
 			<div class="upgrade-content-text">System maintenance</div>
-			<div class="upgrade-content-textab">System maintenance will start at 10:00 and is expected to be completed at 12:00.</div>
+			<div class="upgrade-content-textab">Due to system server upgrades, we will be conducting maintenance on Monday, March 4th, from 10:00 AM to 3:00 PM Hong Kong time. During this period, access to the AiDA system will be temporarily unavailable.<br> We apologize for any inconvenience this may cause and appreciate your understanding.</div>
 		</div>
 	</div>
 </template>
@@ -85,6 +85,7 @@ export default defineComponent({
 			transform: translateX(-50%);
 			font-size: 1.8rem;
 			color: #8e8e8e;
+			text-align: center;
 		}
 	}
 	

src/views/trialApproval.vue

@@ -265,12 +265,6 @@ export default defineComponent({
         this.gettrialList();
 		let userInfo:any = getCookie("userInfo")
         this.userInfo = JSON.parse(userInfo);
-
-        if (this.userInfo.userId == 83 || this.userInfo.userId == 88 || this.userInfo.userId == 6) {
-        } else {
-            router.replace("/home");
-			return
-        }
 		this.getIsAutoApproval()
     },
     methods: {