diff --git a/public/photomodal/menu_item_icon.png b/public/photomodal/menu_item_icon.png
new file mode 100644
index 0000000..7ac6bc0
Binary files /dev/null and b/public/photomodal/menu_item_icon.png differ
diff --git a/public/photomodal/menu_title_icon.png b/public/photomodal/menu_title_icon.png
new file mode 100644
index 0000000..f261bb4
Binary files /dev/null and b/public/photomodal/menu_title_icon.png differ
diff --git a/public/photomodal/photo_close_button.png b/public/photomodal/photo_close_button.png
new file mode 100644
index 0000000..5c27881
Binary files /dev/null and b/public/photomodal/photo_close_button.png differ
diff --git a/src/api/demo/photo.ts b/src/api/demo/photo.ts
index 610ef23..6dd8c2d 100644
--- a/src/api/demo/photo.ts
+++ b/src/api/demo/photo.ts
@@ -3,19 +3,26 @@ enum Api {
   imageUpload = '/api/goview/project/image/upload',
   imageList = '/api/goview/project/image/list',
   imageDelete = '/api/goview/project/image/delete',
+  imageGroupList = '/api/goview/project/imageGroup/list',
 }
 
-export const imageList = (params?) =>
-  defHttp.get({ url: Api.imageList });
+export const imageList = (params:{GroupName:string,page:number,limit:number,key?:string}) =>
+  defHttp.get({ 
+    url: Api.imageList,
+    params
+  });
+
+export const getImageGroupList = () =>
+  defHttp.get({ url: Api.imageGroupList });
 
 export const imageDelete = (id:string) =>
   defHttp.post({ 
     url: `${Api.imageDelete}?ids=${id}`
   });
 
-export const imageUpload = (params) =>
+export const imageUpload = (params,groupName) =>
   defHttp.post({
-    url: Api.imageUpload,
+    url: `${Api.imageUpload}?groupName=${groupName}`,
     params,
     headers: {
       'Content-type': 'multipart/form-data',
diff --git a/src/api/path/project.api.ts b/src/api/path/project.api.ts
index e151974..ee534f3 100644
--- a/src/api/path/project.api.ts
+++ b/src/api/path/project.api.ts
@@ -19,6 +19,9 @@ enum Api {
   projectFile = '/api/goview/project/uploadFile',
   SetMainPage = '/api/goview/project/mainPage/set',
   GetMainPage = '/api/goview/project/mainPage/get',
+  CustomComponentSave = '/api/goview/project/customComponent/save',
+  CustomComponentSaveList = '/api/goview/project/customComponent/list',
+  CustomComponentSaveDelete = '/api/goview/project/customComponent/delete',
 }
 // * 项目列表
 export const projectListApi = (params?: ProjectItem) =>
@@ -80,7 +83,6 @@ export function projectUploadFile(
   params,
   onUploadProgress: (progressEvent: AxiosProgressEvent) => void,
 ) {
-  console.log(params);
   return defHttp.uploadFile<UploadApiResult>(
     {
       url: uploadFileUrl,
@@ -106,7 +108,6 @@ export function projectUploadFile(
 
 // 设置系统主页面
 export function setMainPage(params) {
-  console.log(params);
   return defHttp.post({
     url: Api.SetMainPage,
     params,
@@ -114,3 +115,22 @@ export function setMainPage(params) {
 }
 // 获取系统主页面
 export const getMainPage = () => defHttp.get({ url: Api.GetMainPage });
+
+// 保存组件
+export function customComponentSave(params) {
+  return defHttp.post({
+    url: Api.CustomComponentSave,
+    params,
+  });
+}
+// 获取组件列表
+export const customComponentList = (params: any) =>
+  defHttp.get({ url: Api.CustomComponentSaveList, params });
+
+// 删除组件
+export function customComponentSaveDelete(params) {
+  return defHttp.post({
+    url: Api.CustomComponentSaveDelete + '?ids=' + params.ids,
+    params,
+  });
+}
diff --git a/src/assets/images/chart/zhigan/component/example1.gif b/src/assets/images/chart/zhigan/component/example1.gif
new file mode 100644
index 0000000..cd6d74d
Binary files /dev/null and b/src/assets/images/chart/zhigan/component/example1.gif differ
diff --git a/src/assets/images/chart/zhigan/component/example1.png b/src/assets/images/chart/zhigan/component/example1.png
deleted file mode 100644
index 33e4307..0000000
Binary files a/src/assets/images/chart/zhigan/component/example1.png and /dev/null differ
diff --git a/src/assets/images/chart/zhigan/component/example2.gif b/src/assets/images/chart/zhigan/component/example2.gif
new file mode 100644
index 0000000..2c88168
Binary files /dev/null and b/src/assets/images/chart/zhigan/component/example2.gif differ
diff --git a/src/assets/images/chart/zhigan/component/example2.png b/src/assets/images/chart/zhigan/component/example2.png
deleted file mode 100644
index 66e3e0f..0000000
Binary files a/src/assets/images/chart/zhigan/component/example2.png and /dev/null differ
diff --git a/src/enums/editPageEnum.ts b/src/enums/editPageEnum.ts
index 5eb0ca4..7bd5271 100644
--- a/src/enums/editPageEnum.ts
+++ b/src/enums/editPageEnum.ts
@@ -60,6 +60,8 @@ export enum MenuEnum {
   HIDE = 'hide',
   // 显示
   SHOW = 'show',
+  // 保存至分组
+  SAVETOGROUP = 'saveToGroup',
 }
 
 // Win 键盘枚举
diff --git a/src/hooks/ceshiFun.hook.ts b/src/hooks/ceshiFun.hook.ts
index 6b8cf07..ab883fa 100644
--- a/src/hooks/ceshiFun.hook.ts
+++ b/src/hooks/ceshiFun.hook.ts
@@ -1,17 +1,218 @@
+import * as mars3d from "mars3d";
 // 地图函数列表
 export function mapFun() {
-  // 根据坐标点跳转位置
-  const handlerFlyToPoint = (params) => {
-    window.globalMap.flyToPoint([118.000666, 35.11987], {
-      alt: 4269.7,
-      heading: 359.2,
-      pitch: -51.9,
-    });
+  const ceshiClick = () => {
+    console.log('ceshi');
+    alert('ceshi');
   };
 
-  const handlerAddEntity = (data) => {
+  // 根据坐标点跳转位置
+  const handlerFlyToPoint = (params) => {
+    window.globalMap.flyToPoint([118.000666,35.11987],
+    {"alt":4269.7,"heading":359.2,"pitch":-51.9}); 
+  }
+
+
+
+  const handlerMeasureSurfaceLength = async () => {
+    const graphic = await window.measureTool.distanceSurface({
+      showAddText: true,
+      exact: false
+    })
+  }
+  
+  const handlerMeasureLenth = async () => {
+
+  }
+
+  const handlerMeasureLength = async () => {
+    const graphic = await window.measureTool.distance({
+      showAddText: true,
+      label: {
+        type: "div",
+        updateText: function (text, graphic) {
+          graphic.html = `<div class="marsGreenGradientPnl" >${text}</div>`
+        },
+        html: `<div class="marsGreenGradientPnl" ></div>`,
+      }
+    })
+  }
+
+  const handlerMeasureSurfaceArea = async () => {
+    const graphic = await window.measureTool.areaSurface({
+      style: {
+        color: "#ffff00"
+      },
+      splitNum: 10, // step插值分割的个数
+      exact: false // 是否进行精确计算， 传false时是否快速概略计算方式，该方式计算精度较低，但计算速度快，仅能计算在当前视域内坐标的高度
+    })
+  }
+
+  const handlerMeasureArea = async () => {
+    const graphic = await window.measureTool.area({
+      style: {
+        color: '#00fff2',
+        opacity: 0.4,
+        outline: true,
+        outlineColor: '#fafa5a',
+        outlineWidth: 1,
+        clampToGround: false //贴地
+      }
+    })
+  }
+
+  const handlerMeasurePoint = async () => {
+    const graphic = await window.measureTool.point({
+      popupOptions: {
+        pointerEvents: false
+      },
+      popup: function (point, event) {
+        return `<div class="mars3d-template-title">位置信息</div>
+        <div class="mars3d-template-content">
+            <div><label>经度</label>${point.lng}</div>
+            <div><label>纬度</label>${point.lat}</div>
+            <div><label>海拔</label>${point.alt}米</div>
+        </div>`
+      }
+    })
+  }
+
+
+  const handlerMeasureHeight = async () => {
+    const graphic = await window.measureTool.height();
+  }
+
+  const handlerClearMeasure =  () => {
+    window.measureTool.clear();
+  }
+
+  const handlerDrawPolygon = async () => {
+    const graphic = await window.drawGraphicLayer.startDraw({
+      type: "polygon",
+      style: {
+        color: "#3388ff",
+        opacity: 0.5,
+        outline: true,
+        outlineColor: "#ffffff",
+        outlineWidth: 2.0,
+        clampToGround:true
+      }
+    })
+  }
+
+  const handlerClearDraw = async ()=>{
+    window.drawGraphicLayer.clear();
+  }
+
+  const handlerDrawRectangle = async () => {
+    const graphic = await window.drawGraphicLayer.startDraw({
+      type: isEntityPrimitive ? "rectangle" : "rectangleP",
+      style: {
+        color: clampToGround ? "#ffff00" : "#3388ff",
+        opacity: 0.6,
+        outline: true,
+        outlineColor: "#ffffff",
+        outlineWidth: 2.0,
+        clampToGround
+      }
+    })
+  }
+
+
+
+  const handlerDrawBrushLine =async ()=> {
+    const graphic = await window.drawGraphicLayer.startDraw({
+      type: "brushLine",
+      style: {
+        color: "#ffff00",
+        width: 3,
+        clampToGround:true
+      }
+    })
+  
+  }
+
+  const handlerDrawLine =async () => {
+
+    const graphic = await window.drawGraphicLayer.startDraw({
+      type: "polylineP",
+      style: {
+        color: "#ffff00",
+        width: 3,
+        clampToGround:true
+      }
+    })
+  
+    console.log("标绘完成", graphic.toJSON())
+  }
+
+
+  const handlerDrawPoint= async () => {
+    const graphic = await window.drawGraphicLayer.startDraw({
+      type: "pointP",
+      style: {
+        pixelSize: 12,
+        color: "#3388ff",
+        label: {
+          // 不需要文字时，去掉label配置即可
+          text: "可以同时支持文字",
+          font_size: 20,
+          color: "#ffffff",
+          outline: true,
+          outlineColor: "#000000",
+          pixelOffsetY: -20
+        }
+      }
+    })
+  
+    console.log("标绘完成", graphic.toJSON())
+  }
+
+
+
+
+  // 矢量坐标点控制
+
+  const handlerGetPoint = async () => {
+    const graphic = await window.drawGraphicLayer.startDraw({
+      type: "point",
+    })
+  
+    let position = graphic.toJSON().position;
+  
+    let res = {
+      lng:position[0],
+      lat:position[1],
+      alt:position[0]
+    }
+    
+    graphicLayer.removeGraphic(graphic);
+  
+    return res;
+  }
+  
+  // 添加Entity
+  const handlerAddEntity = () => { 
+
+    let data = {
+      id:10000001,
+      position:{
+        lat:35.451451,
+        lng:118.0804257,
+      },
+      image:{
+        generalIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
+        activeIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
+      },
+      attribute:{
+        label:"测试火点",
+        address:"遍历"
+      }
+      
+    }
+
     let graphicOptions = {
-      id: data.id,
+      id:data.id,
       position: [parseFloat(data.position.lng), parseFloat(data.position.lat)],
       style: {
         image: data.image.generalIcon,
@@ -20,7 +221,7 @@ export function mapFun() {
         label: {
           text: data.attribute.label,
           font_size: 14,
-          color: '#ffffff',
+          color: "#ffffff",
           pixelOffsetY: 10,
           distanceDisplayCondition: true,
           distanceDisplayCondition_far: 500000,
@@ -63,105 +264,252 @@ export function mapFun() {
       </div>`,
       popupOptions: {
         offsetY: -30,
-        template: '{content}',
-        horizontalOrigin: 'Cesium.HorizontalOrigin.LEFT',
-        verticalOrigin: 'Cesium.VerticalOrigin.CENTER',
+        template: "{content}",
+        horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
+        verticalOrigin: "Cesium.VerticalOrigin.CENTER",
       },
-    };
-
-    let graphic = window.graphicLayer.getGraphicById(data.id);
-
-    if (graphic) {
-      graphic.setStyleOptions(graphicOptions);
-    } else {
-      graphic = new mars3d.graphic.BillboardEntity(graphicOptions);
-
-      window.graphicLayer.addGraphic(graphic);
     }
-  };
+  
+    let graphic = window.graphicLayer.getGraphicById(data.id);
+  
+    if(graphic){
+        graphic.setStyleOptions(graphicOptions);
+    }else{
+        graphic = new mars3d.graphic.BillboardEntity(graphicOptions);
+        window.graphicLayer.addGraphic(graphic);
+    }
+  }
+  
+  
+  const handlerShowEntity = () => {
+    let data = {
+      id:10000001,
+      position:{
+        lat:35.451451,
+        lng:118.0804257,
+      },
+      image:{
+        generalIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
+        activeIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
+      },
+      attribute:{
+        label:"测试火点",
+        address:"遍历"
+      }
+      
+    }
 
-  const handlerMeasureSurfaceLength = async () => {
-    const graphic = await window.measureTool.distanceSurface({
-      showAddText: true,
-      exact: false,
-    });
-  };
+    let graphic =  window.graphicLayer.getGraphicById(data.id);
+    if(graphic){
+      graphic.show = true;
+    }
+  }
 
-  const handlerMeasureLength = async () => {
-    const graphic = await window.measureTool.distance({
-      showAddText: true,
-      label: {
-        type: 'div',
-        updateText: function (text, graphic) {
-          graphic.html = `<div class="marsGreenGradientPnl" >${text}</div>`;
+  const handlerHiddenEntity = () => {
+    let data = {
+      id:10000001,
+      position:{
+        lat:35.451451,
+        lng:118.0804257,
+      },
+      image:{
+        generalIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
+        activeIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
+      },
+      attribute:{
+        label:"测试火点",
+        address:"遍历"
+      }
+      
+    }
+
+    let graphic =  window.graphicLayer.getGraphicById(data.id);
+    if(graphic){
+      graphic.show = false;
+    }
+  }
+  
+  
+  const handlerRemoveEntity = () => {
+
+    let data = {
+      id:10000001,
+      position:{
+        lat:35.451451,
+        lng:118.0804257,
+      },
+      image:{
+        generalIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
+        activeIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
+      },
+      attribute:{
+        label:"测试火点",
+        address:"遍历"
+      }
+      
+    }
+
+    let graphic =  window.graphicLayer.getGraphicById(data.id);
+    if(graphic){
+      graphicLayer.removeGraphic(graphic);
+    }
+  }
+  
+  const handlerFlyToEntity = ()  => {
+
+    let data = {
+      id:10000001,
+      position:{
+        lat:35.451451,
+        lng:118.0804257,
+      },
+      image:{
+        generalIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
+        activeIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
+      },
+      attribute:{
+        label:"测试火点",
+        address:"遍历"
+      }
+      
+    }
+  
+    let graphic =  window.graphicLayer.getGraphicById(data.id);
+  
+    if(graphic){
+  
+      // if(data.image.activeIcon){
+      //   grasphic.setStyle({
+      //     image:data.image.activeIcon
+      //   })
+      // }
+  
+      window.globalMap.flyToGraphic(graphic);
+    }
+  
+  
+  }
+  
+  // 清空所有适量图标
+  const handlerClearEntityLayer = () => {
+    window.graphicLayer.clear();
+  }
+  
+  // 隐藏所有矢量图标
+  const handlerHiddenEntityLayer = ()=> {
+    window.graphicLayer.show = false;
+  }
+
+  const handlerShowEntityLayer = () => {
+    window.graphicLayer.show = true;
+  }
+
+  // 图层控制类
+  const handlerAddLayer = ()=>{
+    let layer = new mars3d.layer.WmsLayer({
+        "id": 4460,
+        "name": "建筑物面",
+        "type": "wms",
+        "url": "http://221.2.83.254:9007/geoserver/ksp/wms",
+        "layers": "ksp:beibushanqudaolufenlei0923",
+        "crs": "EPSG:4326",
+        "parameters": {
+            "transparent": "true",
+            "format": "image/png"
         },
-        html: `<div class="marsGreenGradientPnl" ></div>`,
-      },
-    });
-  };
+        "highlight": {
+            "showTime": 5000,
+            "fill": true,
+            "color": "#2deaf7",
+            "opacity": 0.6,
+            "outline": true,
+            "outlineWidth": 3,
+            "outlineColor": "#e000d9",
+            "outlineOpacity": 1,
+            "clampToGround": true
+        },
+        "center": {"lat":35.376403,"lng":117.97628,"alt":3615.8,"heading":3.1,"pitch":-26.8},
+        "popup": "all",
+        "show": true,
+        "flyTo": true
+    })
 
-  const handlerMeasureSurfaceArea = async () => {
-    const graphic = await window.measureTool.areaSurface({
+    window.globalMap.addLayer(layer);
+
+  }
+
+  const handlerHiddenLayer = ()=>{
+
+    let layer = window.globalMap.getLayerById(4460);
+    if(layer){
+      layer.show = false;
+    }
+
+  }
+
+  const handlerShowLayer = ()=>{
+    let layer = window.globalMap.getLayerById(4460);
+    console.log("layer",layer);
+
+    if(layer){
+      layer.show = true;
+    }
+  }
+
+  const handlerRemoveLayer = ()=>{
+    let layer = window.globalMap.getLayerById(4460);
+
+    if(layer){
+      window.globalMap.removeLayer(layer);
+    }
+  }
+
+  const handlerFlyToLayer = ()=>{
+    let layer = window.globalMap.getLayerById(4460);
+
+    if(layer){
+      layer.flyTo();
+    }
+  }
+
+  // 三维模型
+  const handlerAddModel = ()=>{
+    // {"lat":35.4422,"lng":117.985466,"alt":2070.2,"heading":1.1,"pitch":-87.1}
+    const graphic = new mars3d.graphic.ModelEntity({
+      name:"消防车",
+      position: [117.985466, 35.4422, 11.34],
       style: {
-        color: '#ffff00',
+        url: "http://221.2.83.254:9010/cartoon_fire_truck/xiaofangche.gltf",
+        scale: 20,
+        minimumPixelSize: 50,
+        heading: 90,
+        distanceDisplayCondition: true,
+        distanceDisplayCondition_near: 0,
+        distanceDisplayCondition_far: 10000,
+        distanceDisplayPoint: {
+          // 当视角距离超过一定距离(distanceDisplayCondition_far定义的) 后显示为点对象的样式
+          color: "#00ff00",
+          pixelSize: 8
+        },
+        label: {
+          text: "显示信息",
+          font_size: 18,
+          color: "#ffffff",
+          pixelOffsetY: -50,
+          distanceDisplayCondition: true,
+          distanceDisplayCondition_far: 10000,
+          distanceDisplayCondition_near: 0
+        }
       },
-      splitNum: 10, // step插值分割的个数
-      exact: false, // 是否进行精确计算， 传false时是否快速概略计算方式，该方式计算精度较低，但计算速度快，仅能计算在当前视域内坐标的高度
-    });
-  };
+      attr: { remark: "示例1" }
+    })
+    
+    window.graphicLayer.addGraphic(graphic)
+  }
 
-  const handlerMeasureArea = async () => {
-    const graphic = await window.measureTool.area({
-      style: {
-        color: '#00fff2',
-        opacity: 0.4,
-        outline: true,
-        outlineColor: '#fafa5a',
-        outlineWidth: 1,
-        clampToGround: false, //贴地
-      },
-    });
-  };
-
-  const handlerMeasurePoint = async () => {
-    const graphic = await window.measureTool.point({
-      popupOptions: {
-        pointerEvents: false,
-      },
-      popup: function (point, event) {
-        return `<div class="mars3d-template-title">位置信息</div>
-        <div class="mars3d-template-content">
-            <div><label>经度</label>${point.lng}</div>
-            <div><label>纬度</label>${point.lat}</div>
-            <div><label>海拔</label>${point.alt}米</div>
-        </div>`;
-      },
-    });
-  };
-
-  const handlerMeasureHeight = async () => {
-    const graphic = await window.measureTool.height();
-  };
-
-  const handlerClearMeasure = () => {
-    window.measureTool.clear();
-  };
-
-  const handlerDrawPolygon = async () => {
-    const graphic = await graphicLayer.startDraw({
-      type: 'polygon',
-      style: {
-        color: '#3388ff',
-        opacity: 0.5,
-        outline: true,
-        outlineColor: '#ffffff',
-        outlineWidth: 2.0,
-        clampToGround: true,
-      },
-    });
-  };
 
   return {
+    ceshiClick,
     handlerFlyToPoint,
     handlerAddEntity,
     handlerMeasureSurfaceLength,
@@ -172,109 +520,159 @@ export function mapFun() {
     handlerMeasureHeight,
     handlerClearMeasure,
     handlerDrawPolygon,
+    handlerDrawBrushLine,
+    handlerDrawLine,
+    handlerDrawPoint,
+    handlerDrawRectangle,
+    handlerClearDraw,
+    // 矢量操作
+    handlerHiddenEntity,
+    handlerShowEntity,
+    handlerRemoveEntity,
+    handlerFlyToEntity,
+    // 图层操作
+    handlerClearEntityLayer,
+    handlerHiddenEntityLayer,
+    handlerShowEntityLayer,
+    // 图层控制类
+    handlerAddLayer,
+    handlerHiddenLayer,
+    handlerShowLayer,
+    handlerRemoveLayer,
+    handlerFlyToLayer,
+    // 三维模型
+    handlerAddModel
   };
 }
 
 // 地图函数列表options
 export const funSelectOptions = [
   {
-    label: '根据坐标定位地图视角',
-    value: 'handlerFlyToPoint',
+    // 事件名称（用于选择显示）
+    label: 'ceshi点击',
+    // 事件名(用于触发)
+    value: 'ceshiClick',
   },
   {
-    label: '添加任意类型图层',
-    value: 'handlerAddLayer',
+    label:"根据坐标定位地图视角",
+    value: 'handlerFlyToPoint'
   },
   {
-    label: '隐藏任意类型图层',
-    value: 'handlerHiddenLayer',
+    label:"添加任意类型图层",
+    value: 'handlerAddLayer'
   },
   {
-    label: '删除任意类型图层',
-    value: 'handlerRemoveLayer',
+    label:"隐藏指定图层",
+    value: 'handlerHiddenLayer'
+  },{
+    label:"显示指定图层",
+    value: 'handlerShowLayer'
   },
   {
-    label: '添加单个矢量数据',
-    value: 'handlerAddEntity',
+    label:"删除指定图层",
+    value: 'handlerRemoveLayer'
   },
   {
-    label: '隐藏单个矢量数据',
-    value: 'handlerHiddenEntity',
+    label:"跳转到指定图层",
+    value: 'handlerFlyToLayer'
   },
   {
-    label: '移除单个矢量数据',
-    value: 'handlerRemoveEntity',
+    label:"添加单个矢量数据",
+    value: 'handlerAddEntity'
   },
   {
-    label: '定位和高亮矢量数据',
-    value: 'handlerFlyToEntity',
+    label:"隐藏单个矢量数据",
+    value:"handlerHiddenEntity"
   },
   {
-    label: '清除全部矢量数据',
-    value: 'handlerClearEntityLayer',
+    label:"显示单个矢量数据",
+    value:"handlerShowEntity"
   },
   {
-    label: '隐藏全部矢量数据',
-    value: 'handlerHiddenEntityLayer',
+    label:"移除单个矢量数据",
+    value:"handlerRemoveEntity"
   },
   {
-    label: '点击地图拾取坐标',
-    value: 'handlerDrawPoint',
+    label:"定位和高亮矢量数据",
+    value:"handlerFlyToEntity"
   },
   {
-    label: '绘制贴地线',
-    value: 'handlerDrawLine',
+    label:"清除全部矢量数据",
+    value:"handlerClearEntityLayer"
   },
   {
-    label: '绘制图标点',
-    value: 'handlerDrawIconPoint',
+    label:"隐藏全部矢量数据",
+    value:"handlerHiddenEntityLayer"
   },
   {
-    label: '绘制贴地线',
-    value: 'handlerDrawLine',
+    label:"显示全部矢量数据",
+    value:"handlerShowEntityLayer"
   },
   {
-    label: '绘制贴地自由线',
-    value: 'handlerDrawBrushLine',
+    label:"点击地图拾取坐标",
+    value:"handlerGetPoint"
   },
   {
-    label: '绘制贴地面',
-    value: 'handlerDrawLine',
+    label:"绘制贴地线",
+    value:"handlerDrawLine"
   },
   {
-    label: '绘制贴地矩形',
-    value: 'handlerDrawRectangle',
+    label:"绘制图标点",
+    value:"handlerDrawPoint"
   },
   {
-    label: '绘制贴地面',
-    value: 'handlerDrawPolygon',
+    label:"绘制贴地自由线",
+    value:"handlerDrawBrushLine"
   },
   {
-    label: '贴地距离测量',
-    value: 'handlerMeasureSurfaceLength',
+    label:"军事标绘",
+    value:"handlerDrawJun"
   },
   {
-    label: '空间距离测量',
-    value: 'handlerMeasureLength',
+    label:"绘制贴地矩形",
+    value:"handlerDrawRectangle"
   },
   {
-    label: '贴地面积测量',
-    value: 'handlerMeasureSurfaceArea',
+    label:"绘制贴地面",
+    value:"handlerDrawPolygon"
   },
   {
-    label: '水平面积测量',
-    value: 'handlerMeasureArea',
+    label:"清除图层绘制",
+    value:"handlerClearDraw"
   },
   {
-    label: '坐标点位测量',
-    value: 'handlerMeasurePoint',
+    label:"贴地距离测量",
+    value:"handlerMeasureSurfaceLength"
   },
   {
-    label: '高度差测量',
-    value: 'handlerMeasureHeight',
+    label:"绘制自由线",
+    value:"drawBrushLine",
   },
   {
-    label: '清空测量数据',
-    value: 'handlerClearMeasure',
+    label:"空间距离测量",
+    value:"handlerMeasureLength"
   },
+  {
+    label:"贴地面积测量",
+    value:"handlerMeasureSurfaceArea"
+  },
+  {
+    label:"水平面积测量",
+    value:"handlerMeasureArea"
+  },
+  {
+    label:"坐标点位测量",
+    value:"handlerMeasurePoint"
+  },
+  {
+    label:"高度差测量",
+    value:"handlerMeasureHeight"
+  },
+  {
+    label:"清空测量数据",
+    value:"handlerClearMeasure"
+  },{
+    label:"添加三维模型",
+    value:"handlerAddModel"
+  }
 ];
diff --git a/src/hooks/eventHandler.hook.ts b/src/hooks/eventHandler.hook.ts
index 421bfca..0c44e6a 100644
--- a/src/hooks/eventHandler.hook.ts
+++ b/src/hooks/eventHandler.hook.ts
@@ -1,6 +1,7 @@
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
 import { mapFun } from '@/hooks/ceshiFun.hook';
 import { router } from '@/router';
+import { previewUrl } from '@/utils';
 
 const chartEditStore = useChartEditStore();
 const ceshiFunction = mapFun();
@@ -20,6 +21,12 @@ export const eventHandlerHook = (comonentList: any, elementList: any, params: an
             });
             window.open(routeUrl.href, '_blank');
             return;
+          } else if (elementList[j].skipType == 'publishLink') {
+            const routeUrl = router.resolve({
+              path: previewUrl(elementList[j].url),
+            });
+            window.open(routeUrl.href, '_blank');
+            return;
           } else {
             window.open(elementList[j].url, '_blank');
             return;
@@ -28,6 +35,12 @@ export const eventHandlerHook = (comonentList: any, elementList: any, params: an
           if (elementList[j].skipType == 'routeLink') {
             router.replace(elementList[j].url);
             return;
+          } else if (elementList[j].skipType == 'publishLink') {
+            const routeUrl = router.resolve({
+              path: previewUrl(elementList[j].url),
+            });
+            window.open(routeUrl.href, '_self');
+            return;
           } else {
             window.open(elementList[j].url, '_self');
             return;
diff --git a/src/locales/lang/en/global.json b/src/locales/lang/en/global.json
index 204426a..7599291 100644
--- a/src/locales/lang/en/global.json
+++ b/src/locales/lang/en/global.json
@@ -20,5 +20,6 @@
   "r_unpublish": "Unpublish",
   "r_download": "Download",
   "r_delete": "Delete",
-  "r_more": "More"
+  "r_more": "More",
+  "r_copy_url": "Copy Release Address"
 }
\ No newline at end of file
diff --git a/src/locales/lang/zh-CN/global.json b/src/locales/lang/zh-CN/global.json
index 85f38b1..0853bdc 100644
--- a/src/locales/lang/zh-CN/global.json
+++ b/src/locales/lang/zh-CN/global.json
@@ -17,5 +17,6 @@
   "r_unpublish": "取消发布",
   "r_download": "下载",
   "r_delete": "删除",
-  "r_more": "更多"
+  "r_more": "更多",
+  "r_copy_url": "复制发布地址"
 }
\ No newline at end of file
diff --git a/src/packages/components/Charts/Maps/MapMars3d/index.vue b/src/packages/components/Charts/Maps/MapMars3d/index.vue
index 95341bf..e3c7e2f 100644
--- a/src/packages/components/Charts/Maps/MapMars3d/index.vue
+++ b/src/packages/components/Charts/Maps/MapMars3d/index.vue
@@ -73,7 +73,10 @@ const initMap = (newData: any) => {
 
   // 初始化测量工具
   handlerInitMeasureTool();
-  
+
+  // 初始化绘图层
+  handlerInitDrawLayer();
+
   return null;
   // 初始化
   AMapLoader.load({
@@ -172,7 +175,7 @@ const stopWatch = watch(
     await nextTick();
 
 
-    options = {
+     options = {
         "scene": {
             "center": {
                 "lat": 30.526361,
@@ -2153,6 +2156,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
 // 方法函数封装
 
 let graphicLayer = null;
+let drawGraphicLayer = null;
 let measureTool = null;
 //  地球创建完成后默认加载矢量数据图层
 const handlerInitEntityLayer = () => {
@@ -2185,6 +2189,17 @@ const handlerInitEntityLayer = () => {
   }
 }
 
+const handlerInitDrawLayer = () => {
+  if(drawGraphicLayer == null){
+
+    drawGraphicLayer = new mars3d.layer.GraphicLayer({ id: 888 });
+
+    window.drawGraphicLayer = drawGraphicLayer;
+
+    window.globalMap.addLayer(drawGraphicLayer);
+  }
+}
+
 const handlerInitMeasureTool = () => {
   measureTool = new mars3d.thing.Measure({
     label: {
@@ -2203,6 +2218,8 @@ const handlerInitMeasureTool = () => {
   window.globalMap.addThing(measureTool)
 }
 
+
+
 // 点击获取点击位置点位信息  用于常见的下发火点、下发任务点等使用
 
 const handlerDrawPoint = async () => {
diff --git a/src/packages/components/Diy/Diy/DiyTest/config.ts b/src/packages/components/Diy/Diy/DiyTest/config.ts
deleted file mode 100644
index c0890f0..0000000
--- a/src/packages/components/Diy/Diy/DiyTest/config.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { PublicConfigClass } from '@/packages/public'
-import { CreateComponentType } from '@/packages/index.d'
-import { DiyTestConfig } from './index'
-import cloneDeep from 'lodash/cloneDeep'
-import dataJson from './data.json'
-
-export const option = {
-  // 数据
-  dataset: dataJson,
-  // 表行数
-  rowNum: 5,
-  // 轮播时间
-  waitTime: 2,
-  // 数值单位
-  unit: '',
-  // 自动排序
-  sort: true,
-  color: '#1370fb',
-  textColor: '#CDD2F8FF',
-  borderColor: '#1370fb80',
-  carousel: 'single',
-  //序号字体大小
-  indexFontSize: 12,
-  //左侧数据字体大小
-  leftFontSize: 12,
-  //右侧数据字体大小
-  rightFontSize: 12,
-  // 格式化
-  valueFormatter(item: { value: any}) { return item.value}
-}
-
-export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key = DiyTestConfig.key
-  public chartConfig = cloneDeep(DiyTestConfig)
-  public option = cloneDeep(option)
-}
diff --git a/src/packages/components/Diy/Diy/DiyTest/config.vue b/src/packages/components/Diy/Diy/DiyTest/config.vue
deleted file mode 100644
index fb76b46..0000000
--- a/src/packages/components/Diy/Diy/DiyTest/config.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-  <CollapseItem name="列表" :expanded="true">
-    <SettingItemBox name="基础">
-      <SettingItem name="表行数">
-        <n-input-number
-          v-model:value="optionData.rowNum"
-          :min="1"
-          size="small"
-          placeholder="请输入自动计算"
-        ></n-input-number>
-      </SettingItem>
-      <SettingItem name="轮播时间(s)">
-        <n-input-number
-          v-model:value="optionData.waitTime"
-          :min="1"
-          size="small"
-          placeholder="请输入轮播时间"
-        ></n-input-number>
-      </SettingItem>
-      <SettingItem name="数值单位">
-        <n-input
-          v-model:value="optionData.unit"
-          size="small"
-          placeholder="数值单位"
-        ></n-input>
-      </SettingItem>
-    </SettingItemBox>
-
-    <SettingItemBox name="样式">
-      <SettingItem name="主体颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.color"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem name="数据颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.textColor"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem name="底部线条">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.borderColor"
-        ></n-color-picker>
-      </SettingItem>
-    </SettingItemBox>
-
-    <SettingItemBox name="字体样式">
-       <SettingItem name="序号字体">
-        <n-input-number
-          size="small"
-          v-model:value="optionData.indexFontSize"
-          :min="12"
-        />
-      </SettingItem>
-      <SettingItem name="左侧数据字体">
-        <n-input-number
-          size="small"
-          v-model:value="optionData.leftFontSize"
-          :min="12"
-        />
-      </SettingItem>
-      <SettingItem name="右侧数据字体">
-        <n-input-number
-          size="small"
-          v-model:value="optionData.rightFontSize"
-          :min="12"
-        />
-      </SettingItem>
-    </SettingItemBox>
-      
-  </CollapseItem>
-</template>
-
-<script setup lang="ts">
-import { PropType } from 'vue'
-import {
-  CollapseItem,
-  SettingItemBox,
-  SettingItem,
-} from '@/components/Pages/ChartItemSetting'
-import { option } from './config'
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true,
-  },
-})
-</script>
diff --git a/src/packages/components/Diy/Diy/DiyTest/data.json b/src/packages/components/Diy/Diy/DiyTest/data.json
deleted file mode 100644
index ed8bb52..0000000
--- a/src/packages/components/Diy/Diy/DiyTest/data.json
+++ /dev/null
@@ -1,14 +0,0 @@
-[
-  { "name": "荣成", "value": 26700 },
-  { "name": "河南", "value": 20700 },
-  { "name": "河北", "value": 18700 },
-  { "name": "徐州", "value": 17800 },
-  { "name": "漯河", "value": 16756 },
-  { "name": "三门峡", "value": 12343 },
-  { "name": "郑州", "value": 9822 },
-  { "name": "周口", "value": 8912 },
-  { "name": "濮阳", "value": 6834 },
-  { "name": "信阳", "value": 5875 },
-  { "name": "新乡", "value": 3832 },
-  { "name": "大同", "value": 1811 }
-]
diff --git a/src/packages/components/Diy/Diy/DiyTest/index.ts b/src/packages/components/Diy/Diy/DiyTest/index.ts
deleted file mode 100644
index 3ad8b16..0000000
--- a/src/packages/components/Diy/Diy/DiyTest/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
-
-export const DiyTestConfig: ConfigType = {
-  key: 'DiyTest',
-  chartKey: 'VDiyTest',
-  conKey: 'VCDiyTest',
-  title: '自定义测试组件',
-  category: ChatCategoryEnum.DIY,
-  categoryName: ChatCategoryEnumName.DIY,
-  package: PackagesCategoryEnum.DIY,
-  chartFrame: ChartFrameEnum.COMMON,
-  image: 'tables_list.png'
-}
diff --git a/src/packages/components/Diy/Diy/DiyTest/index.vue b/src/packages/components/Diy/Diy/DiyTest/index.vue
deleted file mode 100644
index af48dc4..0000000
--- a/src/packages/components/Diy/Diy/DiyTest/index.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <component :is="remote" v-if="remote" @childClick="childClick" :optionParam="optionParam" />
-</template>
-
-<script setup lang="ts">
-import { loadModule } from 'vue3-sfc-loader/dist/vue3-sfc-loader'
-import { ref, onMounted, getCurrentInstance, defineAsyncComponent } from 'vue'
-import * as Vue from 'vue'
-import { PropType } from 'vue'
-import { option } from './config'
-import { CreateComponentType } from '@/packages/index.d'
-
-let remote = ref()
-let url = 'http://localhost:3000/getVue3Str'
-
-onMounted(() => {
-  load(url)
-})
-const load = async url => {
-  let res = await fetch(url).then(res => res.json())
-
-  const options = {
-    moduleCache: {
-      vue: Vue
-    },
-    async getFile() {
-      return res.fileStr
-    },
-    addStyle(textContent) {
-      const style = Object.assign(document.createElement('style'), { textContent })
-      const ref = document.head.getElementsByTagName('style')[0] || null
-      document.head.insertBefore(style, ref)
-    }
-  }
-
-  // 加载远程组件
-  remote.value = defineAsyncComponent(() => loadModule(res.fileName || 'loader.vue', options))
-}
-const childClick = newVal => {
-  console.log('子组件点击事件', newVal)
-}
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true
-  },
-  chartConfig: {
-    type: Object as PropType<CreateComponentType>,
-    required: true
-  }
-})
-console.log('props', props)
-const optionParam = ref(props.chartConfig.option ? props.chartConfig.option : option)
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/packages/components/Diy/Diy/Remote/config.ts b/src/packages/components/Diy/Diy/Remote/config.ts
deleted file mode 100644
index ca423e5..0000000
--- a/src/packages/components/Diy/Diy/Remote/config.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { PublicConfigClass } from '@/packages/public'
-import { CreateComponentType } from '@/packages/index.d'
-import { RemoteConfig } from './index'
-import cloneDeep from 'lodash/cloneDeep'
-import dataJson from './data.json'
-
-export const option = {
-  backgroundColor: '#000000FF',
-  // 数据
-  dataset: dataJson,
-}
-
-export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key = RemoteConfig.key
-  public chartConfig = cloneDeep(RemoteConfig)
-  public option = cloneDeep(option)
-  constructor() {
-    super(); 
-    this.attr.w = 600;
-    this.attr.h = 600;
-  }
-}
diff --git a/src/packages/components/Diy/Diy/Remote/config.vue b/src/packages/components/Diy/Diy/Remote/config.vue
deleted file mode 100644
index e5b4179..0000000
--- a/src/packages/components/Diy/Diy/Remote/config.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <CollapseItem name="配置" :expanded="true">
-
-    <SettingItemBox name="背景颜色">
-    
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.backgroundColor"
-        ></n-color-picker>
-    </SettingItemBox>
-
-      
-  </CollapseItem>
-</template>
-
-<script setup lang="ts">
-import { PropType } from 'vue'
-import {
-  CollapseItem,
-  SettingItemBox,
-  SettingItem,
-} from '@/components/Pages/ChartItemSetting'
-import { option } from './config'
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true,
-  },
-})
-console.log('自定义组件配置props',props)
-</script>
diff --git a/src/packages/components/Diy/Diy/Remote/data.json b/src/packages/components/Diy/Diy/Remote/data.json
deleted file mode 100644
index ed8bb52..0000000
--- a/src/packages/components/Diy/Diy/Remote/data.json
+++ /dev/null
@@ -1,14 +0,0 @@
-[
-  { "name": "荣成", "value": 26700 },
-  { "name": "河南", "value": 20700 },
-  { "name": "河北", "value": 18700 },
-  { "name": "徐州", "value": 17800 },
-  { "name": "漯河", "value": 16756 },
-  { "name": "三门峡", "value": 12343 },
-  { "name": "郑州", "value": 9822 },
-  { "name": "周口", "value": 8912 },
-  { "name": "濮阳", "value": 6834 },
-  { "name": "信阳", "value": 5875 },
-  { "name": "新乡", "value": 3832 },
-  { "name": "大同", "value": 1811 }
-]
diff --git a/src/packages/components/Diy/Diy/Remote/index.ts b/src/packages/components/Diy/Diy/Remote/index.ts
deleted file mode 100644
index ec530df..0000000
--- a/src/packages/components/Diy/Diy/Remote/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
-
-export const RemoteConfig: ConfigType = {
-  key: 'Remote',
-  chartKey: 'Remote',
-  conKey: 'RemoteConfig',
-  title: '测试远程组件',
-  category: ChatCategoryEnum.DIY,
-  categoryName: ChatCategoryEnumName.DIY,
-  package: PackagesCategoryEnum.DIY,
-  chartFrame: ChartFrameEnum.COMMON,
-  image: 'tables_list.png'
-}
diff --git a/src/packages/components/Diy/Diy/Remote/index.vue b/src/packages/components/Diy/Diy/Remote/index.vue
deleted file mode 100644
index e5bc773..0000000
--- a/src/packages/components/Diy/Diy/Remote/index.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <component :is="remote" v-if="remote" :config="chartConfig" :data="data" />
-</template>
-
-<script setup lang="ts">
-import { loadModule } from 'vue3-sfc-loader/dist/vue3-sfc-loader'
-import { ref, onMounted, getCurrentInstance, defineAsyncComponent } from 'vue'
-import * as Vue from 'vue'
-import { PropType } from 'vue'
-import { option } from './config'
-import { CreateComponentType } from '@/packages/index.d'
-import { useChartDataFetch } from '@/hooks'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true
-  },
-  chartConfig: {
-    type: Object as PropType<CreateComponentType>,
-    required: true
-  }
-})
-
-let remote = ref()
-let url = 'http://192.168.10.124:3000/getVue3Str2'
-const data = ref(props.chartConfig.option.dataset)
-
-onMounted(() => {
-  load(url)
-})
-const load = async url => {
-  let res = await fetch(url).then(res => res.json())
-
-  const options = {
-    moduleCache: {
-      vue: Vue
-    },
-    async getFile() {
-      return res.fileStr
-    },
-    addStyle(textContent) {
-      const style = Object.assign(document.createElement('style'), { textContent })
-      const ref = document.head.getElementsByTagName('style')[0] || null
-      document.head.insertBefore(style, ref)
-    }
-  }
-
-  // 加载远程组件
-  remote.value = defineAsyncComponent(() => loadModule(res.fileName || 'loader.vue', options))
-}
-
-
-console.log('props', props)
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
-  console.log('接口获取数据',newData)
-  data.value = newData
-})
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/packages/components/Diy/Diy/index.ts b/src/packages/components/Diy/Diy/index.ts
deleted file mode 100644
index adb754a..0000000
--- a/src/packages/components/Diy/Diy/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { DiyTestConfig } from './DiyTest'
-import { RemoteConfig } from './Remote'
-export default [ DiyTestConfig, RemoteConfig ]
diff --git a/src/packages/components/Diy/index.d.ts b/src/packages/components/Diy/index.d.ts
deleted file mode 100644
index 5c67b45..0000000
--- a/src/packages/components/Diy/index.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export enum ChatCategoryEnum {
-  TABLE = 'Tables',
-  DIY = 'Diy'
-}
-
-export enum ChatCategoryEnumName {
-  TABLE = '表格',
-  DIY = '自定义'
-}
\ No newline at end of file
diff --git a/src/packages/components/Diy/index.ts b/src/packages/components/Diy/index.ts
deleted file mode 100644
index 834b490..0000000
--- a/src/packages/components/Diy/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Diy from './Diy'
-
-export const DiyList = [...Diy]
diff --git a/src/packages/components/Zhigan/Zhigan/GeneralHead/svg/title.vue b/src/packages/components/Zhigan/Zhigan/GeneralHead/svg/title.vue
index 979ff07..8ab7698 100644
--- a/src/packages/components/Zhigan/Zhigan/GeneralHead/svg/title.vue
+++ b/src/packages/components/Zhigan/Zhigan/GeneralHead/svg/title.vue
@@ -39,7 +39,7 @@
           width="106.1%"
           height="124.9%"
           filterUnits="objectBoundingBox"
-          id="filter-6"
+          id="filter-GeneralHead-6"
         >
           <feGaussianBlur stdDeviation="4.31844888" in="SourceGraphic"></feGaussianBlur>
         </filter>
@@ -76,7 +76,7 @@
                         points="10.3064025 0 166.362718 0 176.570151 13.6763066 255.888803 13.6763066 399.202062 13.6763066 399.201597 38.3517324 205.452516 38.3517324 0 38.3517324 0 11.1814815"
                       ></polygon>
                       <g id="椭圆形">
-                        <mask id="mask-4" fill="white">
+                        <mask id="mask-GeneralHead-4" fill="white">
                           <use xlink:href="#path-GeneralHead-3"></use>
                         </mask>
                         <use
@@ -86,8 +86,8 @@
                         ></use>
                         <ellipse
                           fill="url(#radialGradient-5)"
-                          filter="url(#filter-6)"
-                          mask="url(#mask-4)"
+                          filter="url(#filter-GeneralHead-6)"
+                          mask="url(#mask-GeneralHead-4)"
                           cx="180.697047"
                           cy="25.5190419"
                           rx="214"
diff --git a/src/packages/components/Zhigan/Zhigan/HeadMoreButton/index.vue b/src/packages/components/Zhigan/Zhigan/HeadMoreButton/index.vue
index 7161050..7145a6c 100644
--- a/src/packages/components/Zhigan/Zhigan/HeadMoreButton/index.vue
+++ b/src/packages/components/Zhigan/Zhigan/HeadMoreButton/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="MoreButton">
+  <div class="MoreButton" @click="clickBtn">
     <n-button text :color="option.buttonStyle.color" size="large">
       <span :style="{ fontSize: option.buttonStyle.fontSize + 'px' }">{{ option.buttonName }}</span>
       <Title v-if="option.buttonStyle.iconFlag" class="title" :buttonStyle="option.buttonStyle" />
@@ -13,8 +13,10 @@
   import { icon } from '@/plugins';
   import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
   import { useChartDataFetch } from '@/hooks';
+  import { eventHandlerHook } from '@/hooks/eventHandler.hook';
   import Title from './svg/title.vue';
 
+  const chartEditStore = useChartEditStore();
   const props = defineProps({
     chartConfig: {
       type: Object as PropType<CreateComponentType>,
@@ -28,6 +30,22 @@
     buttonName: props.chartConfig.option.buttonName,
     buttonStyle: props.chartConfig.option.buttonStyle,
   });
+
+  // 单击交互
+  const clickElementItem = ref([]);
+
+  const list = props.chartConfig.events.interactConfigEvents;
+  for (let i = 0; i < list.length; i++) {
+    if (list[i].type == 'click') {
+      for (let j = 0; j < list[i].movementList.length; j++) {
+        clickElementItem.value.push(list[i].movementList[j]);
+      }
+    }
+  }
+
+  const clickBtn = () => {
+    eventHandlerHook(chartEditStore.getComponentList, clickElementItem.value);
+  };
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/components/Zhigan/Zhigan/ModalButton/index.vue b/src/packages/components/Zhigan/Zhigan/ModalButton/index.vue
index a2e75cf..c493fcf 100644
--- a/src/packages/components/Zhigan/Zhigan/ModalButton/index.vue
+++ b/src/packages/components/Zhigan/Zhigan/ModalButton/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ModalButton">
+  <div class="ModalButton" @click="clickBtn">
     <n-button text>
       <Button :w="w" :h="h" :buttonName="option.buttonName" :buttonStyle="option.buttonStyle" />
     </n-button>
@@ -12,8 +12,10 @@
   import { icon } from '@/plugins';
   import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
   import { useChartDataFetch } from '@/hooks';
+  import { eventHandlerHook } from '@/hooks/eventHandler.hook';
   import Button from './svg/button.vue';
 
+  const chartEditStore = useChartEditStore();
   const props = defineProps({
     chartConfig: {
       type: Object as PropType<CreateComponentType>,
@@ -27,6 +29,22 @@
     buttonName: props.chartConfig.option.buttonName,
     buttonStyle: props.chartConfig.option.buttonStyle,
   });
+
+  // 单击交互
+  const clickElementItem = ref([]);
+
+  const list = props.chartConfig.events.interactConfigEvents;
+  for (let i = 0; i < list.length; i++) {
+    if (list[i].type == 'click') {
+      for (let j = 0; j < list[i].movementList.length; j++) {
+        clickElementItem.value.push(list[i].movementList[j]);
+      }
+    }
+  }
+
+  const clickBtn = () => {
+    eventHandlerHook(chartEditStore.getComponentList, clickElementItem.value);
+  };
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/components/Zhigan/Zhigan/ModalButton/svg/button.vue b/src/packages/components/Zhigan/Zhigan/ModalButton/svg/button.vue
index 94393a4..bee9819 100644
--- a/src/packages/components/Zhigan/Zhigan/ModalButton/svg/button.vue
+++ b/src/packages/components/Zhigan/Zhigan/ModalButton/svg/button.vue
@@ -11,14 +11,21 @@
       xmlns:xlink="http://www.w3.org/1999/xlink"
     >
       <defs>
-        <rect id="path-ModalButton-1" x="0" y="0" width="120.597701" height="43" rx="3"></rect>
+        <rect
+          id="path-ModalButton-yellow-1"
+          x="0"
+          y="0"
+          width="120.597701"
+          height="43"
+          rx="3"
+        ></rect>
         <filter
           x="-3.3%"
           y="-9.3%"
           width="106.6%"
           height="118.6%"
           filterUnits="objectBoundingBox"
-          id="filter-2"
+          id="filter-yellow-2"
         >
           <feMorphology
             radius="2"
@@ -46,11 +53,23 @@
             in="shadowInnerInner1"
           ></feColorMatrix>
         </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="99.5930705%" id="linearGradient-3">
+        <linearGradient
+          x1="50%"
+          y1="0%"
+          x2="50%"
+          y2="99.5930705%"
+          id="linearGradient-ModalButton-yellow-3"
+        >
           <stop stop-color="#FF8D00" offset="0%"></stop>
           <stop stop-color="#7D3700" stop-opacity="0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="99.7555179%" y1="50%" x2="0.659186059%" y2="50%" id="linearGradient-4">
+        <linearGradient
+          x1="99.7555179%"
+          y1="50%"
+          x2="0.659186059%"
+          y2="50%"
+          id="linearGradient-ModalButton-yellow-4"
+        >
           <stop stop-color="#FF8900" stop-opacity="0" offset="0%"></stop>
           <stop stop-color="#FFB200" offset="52.4037608%"></stop>
           <stop stop-color="#FF8900" stop-opacity="0" offset="100%"></stop>
@@ -61,12 +80,16 @@
           <g id="弹窗----" transform="translate(175.2674, 165.0542)">
             <g id="编组-56" transform="translate(997, 604)">
               <g id="矩形">
-                <use fill="#582900" fill-rule="evenodd" xlink:href="#path-ModalButton-1"></use>
+                <use
+                  fill="#582900"
+                  fill-rule="evenodd"
+                  xlink:href="#path-ModalButton-yellow-1"
+                ></use>
                 <use
                   fill="black"
                   fill-opacity="1"
-                  filter="url(#filter-2)"
-                  xlink:href="#path-ModalButton-1"
+                  filter="url(#filter-yellow-2)"
+                  xlink:href="#path-ModalButton-yellow-1"
                 ></use>
                 <rect
                   stroke="#FF8900"
@@ -82,12 +105,12 @@
               <path
                 d="M2.68679754,0 L117.920714,2.22044605e-15 C118.472999,9.96743133e-15 118.920714,0.44771525 118.920714,1 C118.920714,1.28969745 118.795083,1.56515805 118.576335,1.75508987 L92.5517241,24.3514589 L92.5517241,24.3514589 L28.045977,24.2338973 L2.03298651,1.75665787 C1.6150959,1.39556801 1.56904981,0.764079571 1.93013967,0.346188968 C2.12009371,0.126354469 2.39626399,-1.9450313e-15 2.68679754,-1.99840144e-15 Z"
                 id="矩形"
-                fill="url(#linearGradient-3)"
+                fill="url(#linearGradient-ModalButton-yellow-3)"
                 opacity="0.480172294"
               ></path>
               <rect
                 id="矩形"
-                fill="url(#linearGradient-4)"
+                fill="url(#linearGradient-ModalButton-yellow-4)"
                 x="25.5110522"
                 y="41.7453581"
                 width="64.9372237"
@@ -129,14 +152,21 @@
       xmlns:xlink="http://www.w3.org/1999/xlink"
     >
       <defs>
-        <rect id="path-ModalButton-1" x="0" y="0" width="120.597701" height="43" rx="3"></rect>
+        <rect
+          id="path-ModalButton-green-1"
+          x="0"
+          y="0"
+          width="120.597701"
+          height="43"
+          rx="3"
+        ></rect>
         <filter
           x="-3.3%"
           y="-9.3%"
           width="106.6%"
           height="118.6%"
           filterUnits="objectBoundingBox"
-          id="filter-2"
+          id="filter-ModalButton-green-2"
         >
           <feMorphology
             radius="2"
@@ -164,11 +194,17 @@
             in="shadowInnerInner1"
           ></feColorMatrix>
         </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-ModalButton-green-3">
           <stop stop-color="#00F535" offset="0%"></stop>
           <stop stop-color="#003310" stop-opacity="0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="99.7555179%" y1="50%" x2="0%" y2="50%" id="linearGradient-4">
+        <linearGradient
+          x1="99.7555179%"
+          y1="50%"
+          x2="0%"
+          y2="50%"
+          id="linearGradient-ModalButton-green-4"
+        >
           <stop stop-color="#00FF2F" stop-opacity="0" offset="0%"></stop>
           <stop stop-color="#00F535" offset="50.8795251%"></stop>
           <stop stop-color="#00FF4B" stop-opacity="0" offset="100%"></stop>
@@ -179,12 +215,16 @@
           <g id="弹窗----" transform="translate(175.2674, 165.0542)">
             <g id="编组-61" transform="translate(1281, 604)">
               <g id="矩形">
-                <use fill="#003310" fill-rule="evenodd" xlink:href="#path-ModalButton-1"></use>
+                <use
+                  fill="#003310"
+                  fill-rule="evenodd"
+                  xlink:href="#path-ModalButton-green-1"
+                ></use>
                 <use
                   fill="black"
                   fill-opacity="1"
-                  filter="url(#filter-2)"
-                  xlink:href="#path-ModalButton-1"
+                  filter="url(#filter-ModalButton-green-2)"
+                  xlink:href="#path-ModalButton-green-1"
                 ></use>
                 <rect
                   stroke="#00FC3A"
@@ -247,14 +287,14 @@
       xmlns:xlink="http://www.w3.org/1999/xlink"
     >
       <defs>
-        <rect id="path-ModalButton-1" x="0" y="0" width="120.597701" height="43" rx="3"></rect>
+        <rect id="path-ModalButton-red-1" x="0" y="0" width="120.597701" height="43" rx="3"></rect>
         <filter
           x="-3.3%"
           y="-9.3%"
           width="106.6%"
           height="118.6%"
           filterUnits="objectBoundingBox"
-          id="filter-2"
+          id="filter-ModalButton-red-2"
         >
           <feMorphology
             radius="2"
@@ -282,11 +322,17 @@
             in="shadowInnerInner1"
           ></feColorMatrix>
         </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-ModalButton-red-3">
           <stop stop-color="#F02626" offset="0%"></stop>
           <stop stop-color="#F02626" stop-opacity="0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="99.7555179%" y1="50%" x2="0%" y2="50%" id="linearGradient-4">
+        <linearGradient
+          x1="99.7555179%"
+          y1="50%"
+          x2="0%"
+          y2="50%"
+          id="linearGradient-ModalButton-red-4"
+        >
           <stop stop-color="#FB6C69" stop-opacity="0" offset="0%"></stop>
           <stop stop-color="#F02626" offset="50.8795251%"></stop>
           <stop stop-color="#F9413E" stop-opacity="0" offset="100%"></stop>
@@ -297,12 +343,12 @@
           <g id="弹窗----" transform="translate(175.2674, 165.0542)">
             <g id="编组-61" transform="translate(1281, 604)">
               <g id="矩形">
-                <use fill="#270304" fill-rule="evenodd" xlink:href="#path-ModalButton-1"></use>
+                <use fill="#270304" fill-rule="evenodd" xlink:href="#path-ModalButton-red-1"></use>
                 <use
                   fill="black"
                   fill-opacity="1"
                   filter="url(#filter-2)"
-                  xlink:href="#path-ModalButton-1"
+                  xlink:href="#path-ModalButton-red-1"
                 ></use>
                 <rect
                   stroke="#F02626"
@@ -318,12 +364,12 @@
               <path
                 d="M2.68679754,0 L117.920714,2.22044605e-15 C118.472999,9.96743133e-15 118.920714,0.44771525 118.920714,1 C118.920714,1.28969745 118.795083,1.56515805 118.576335,1.75508987 L92.5517241,24.3514589 L92.5517241,24.3514589 L28.045977,24.2338973 L2.03298651,1.75665787 C1.6150959,1.39556801 1.56904981,0.764079571 1.93013967,0.346188968 C2.12009371,0.126354469 2.39626399,-1.9450313e-15 2.68679754,-1.99840144e-15 Z"
                 id="矩形"
-                fill="url(#linearGradient-3)"
+                fill="url(#linearGradient-ModalButton-red-3)"
                 opacity="0.480172294"
               ></path>
               <rect
                 id="矩形"
-                fill="url(#linearGradient-4)"
+                fill="url(#linearGradient-ModalButton-red-4)"
                 x="40.5857648"
                 y="41.7453581"
                 width="64.9372237"
diff --git a/src/packages/components/Zhigan/Zhigan/ModalCarousel/config.ts b/src/packages/components/Zhigan/Zhigan/ModalCarousel/config.ts
index d4fabae..12d2821 100644
--- a/src/packages/components/Zhigan/Zhigan/ModalCarousel/config.ts
+++ b/src/packages/components/Zhigan/Zhigan/ModalCarousel/config.ts
@@ -12,15 +12,15 @@ export const option = {
       'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg',
     ],
     buttonStyle:{
-      dotBottom: 10,
-      dotLeft: 120,
+      dotBottom: 5,
+      dotLeft: 37,
       dotColor1: '#00611a', 
       dotColor2: '#00cc13', 
 
       buttonWidth: 20,
       buttonHeight: 60,
       
-      buttonBottom: 80,
+      buttonBottom: 37,
       buttonLeftAndRight: 0,
       buttonColor: '#A4A4A4FF',
 
diff --git a/src/packages/components/Zhigan/Zhigan/ModalCarousel/config.vue b/src/packages/components/Zhigan/Zhigan/ModalCarousel/config.vue
index 641f170..1d51156 100644
--- a/src/packages/components/Zhigan/Zhigan/ModalCarousel/config.vue
+++ b/src/packages/components/Zhigan/Zhigan/ModalCarousel/config.vue
@@ -70,7 +70,7 @@
       <SettingItem>
         <n-space>
           <n-switch v-model:value="optionData.dataStyle.showDots" size="small" />
-          <n-text>显示</n-text>
+          <n-text>控制点</n-text>
         </n-space>
       </SettingItem>
       <SettingItem>
@@ -87,19 +87,16 @@
       </SettingItem>
     </SettingItem-box>
 
-    <SettingItem-box name="控制点样式">
+    <SettingItem-box name="控制点样式" v-if="optionData.dataStyle.showDots">
       <SettingItem name="控制点位置（下）">
-        <n-input-number
-          v-model:value="optionData.buttonStyle.dotBottom"
-          size="small"
-        ></n-input-number>
+        <n-input-number v-model:value="optionData.buttonStyle.dotBottom" size="small">
+          <template #suffix> % </template>
+        </n-input-number>
       </SettingItem>
       <SettingItem name="控制点位置（左）">
-        <n-input-number
-          v-model:value="optionData.buttonStyle.dotLeft"
-          size="small"
-          :min="0"
-        ></n-input-number>
+        <n-input-number v-model:value="optionData.buttonStyle.dotLeft" size="small" :min="0">
+          <template #suffix> % </template>
+        </n-input-number>
       </SettingItem>
       <SettingItem name="控制点颜色1">
         <n-color-picker
@@ -132,34 +129,34 @@
         </n-button>
       </SettingItem>
     </SettingItem-box>
-    <SettingItem-box name="箭头样式">
-      <SettingItem name="箭头按钮长度">
+    <SettingItem-box name="箭头样式" v-if="optionData.dataStyle.showArrow">
+      <SettingItem name="箭头按钮宽度">
         <n-input-number
-          v-model:value="optionData.buttonStyle.buttonBottom"
+          v-model:value="optionData.buttonStyle.buttonWidth"
           size="small"
           :min="0"
         ></n-input-number>
       </SettingItem>
-      <SettingItem name="箭头按钮宽度">
+      <SettingItem name="箭头按钮长度">
         <n-input-number
           v-model:value="optionData.buttonStyle.buttonHeight"
           size="small"
           :min="0"
         ></n-input-number>
       </SettingItem>
-      <SettingItem name="箭头位置（上下）">
-        <n-input-number
-          v-model:value="optionData.buttonStyle.buttonBottom"
-          size="small"
-          :min="0"
-        ></n-input-number>
+      <SettingItem name="箭头位置（下）">
+        <n-input-number v-model:value="optionData.buttonStyle.buttonBottom" size="small" :min="0">
+          <template #suffix> % </template>
+        </n-input-number>
       </SettingItem>
-      <SettingItem name="箭头位置（左右）">
+      <SettingItem name="箭头位置（边界）">
         <n-input-number
-          v-model:value="optionData.buttonStyle.buttonWidth"
+          v-model:value="optionData.buttonStyle.buttonLeftAndRight"
           size="small"
           :min="0"
-        ></n-input-number>
+        >
+          <template #suffix> % </template>
+        </n-input-number>
       </SettingItem>
       <SettingItem name="箭头按钮颜色">
         <n-color-picker
diff --git a/src/packages/components/Zhigan/Zhigan/ModalCarousel/index.vue b/src/packages/components/Zhigan/Zhigan/ModalCarousel/index.vue
index 39ca5ac..5cc5cf8 100644
--- a/src/packages/components/Zhigan/Zhigan/ModalCarousel/index.vue
+++ b/src/packages/components/Zhigan/Zhigan/ModalCarousel/index.vue
@@ -127,14 +127,14 @@
   .arrow-left {
     display: flex;
     position: absolute;
-    bottom: v-bind('`${option.buttonStyle.buttonBottom}px`');
-    left: v-bind('`${option.buttonStyle.buttonLeftAndRight}px`');
+    bottom: v-bind('`${option.buttonStyle.buttonBottom}%`');
+    left: v-bind('`${option.buttonStyle.buttonLeftAndRight}%`');
   }
   .arrow-right {
     display: flex;
     position: absolute;
-    bottom: v-bind('`${option.buttonStyle.buttonBottom}px`');
-    right: v-bind('`${option.buttonStyle.buttonLeftAndRight}px`');
+    bottom: v-bind('`${option.buttonStyle.buttonBottom}%`');
+    right: v-bind('`${option.buttonStyle.buttonLeftAndRight}%`');
   }
 
   .dots {
@@ -142,8 +142,8 @@
     margin: 0;
     padding: 0;
     position: absolute;
-    bottom: v-bind('`${option.buttonStyle.dotBottom}px`');
-    left: v-bind('`${option.buttonStyle.dotLeft}px`');
+    bottom: v-bind('`${option.buttonStyle.dotBottom}%`');
+    left: v-bind('`${option.buttonStyle.dotLeft}%`');
   }
 
   .dots li {
diff --git a/src/packages/components/Zhigan/Zhigan/ModalFrame/config.ts b/src/packages/components/Zhigan/Zhigan/ModalFrame/config.ts
index 7a4e586..ba8ab1e 100644
--- a/src/packages/components/Zhigan/Zhigan/ModalFrame/config.ts
+++ b/src/packages/components/Zhigan/Zhigan/ModalFrame/config.ts
@@ -6,6 +6,13 @@ import { ModalFrameConfig } from './index'
 
 export const option = {
   dataStyle:{
+    mask: false,
+    maskClickClose: false,
+    maskColor:'#FFFFFF00',
+    maskFrameX: 0,
+    maskFrameY: 0,
+    maskFrameW: 0,
+    maskFrameH: 0,
     // 背景颜色
     backgroud: '#161A1A',
     // 左上、右下角装饰颜色
@@ -24,6 +31,7 @@ export const option = {
     bottomUseColor: '#FFE4AC',
   },
   dataStyleClone:{
+    maskColor:'#000000FF',
     // 背景颜色
     backgroud: '#161A1A',
     // 左上、右下角装饰颜色
@@ -45,7 +53,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = ModalFrameConfig.key
-  public attr = { ...chartInitConfig, w: 1490, h: 712, zIndex: 5 }
+  public attr = { ...chartInitConfig, w: 1490, h: 712, zIndex: -1 }
   public chartConfig = cloneDeep(ModalFrameConfig)
   public option = cloneDeep(option)
 }
diff --git a/src/packages/components/Zhigan/Zhigan/ModalFrame/config.vue b/src/packages/components/Zhigan/Zhigan/ModalFrame/config.vue
index 8cfcde4..ab6259e 100644
--- a/src/packages/components/Zhigan/Zhigan/ModalFrame/config.vue
+++ b/src/packages/components/Zhigan/Zhigan/ModalFrame/config.vue
@@ -1,5 +1,59 @@
 <template>
   <CollapseItem name="弹窗设置" :expanded="true">
+    <SettingItemBox name="样式设置">
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.dataStyle.mask" size="small" />
+          <n-text>展示遮罩</n-text>
+        </n-space>
+      </SettingItem>
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.dataStyle.maskClickClose" size="small" />
+          <n-text>点击非弹窗部分是否关闭弹窗</n-text>
+        </n-space>
+      </SettingItem>
+      <SettingItem name="遮罩颜色" v-if="optionData.dataStyle.mask">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.maskColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="弹窗宽度" v-if="optionData.dataStyle.mask">
+        <n-input-number
+          v-model:value="optionData.dataStyle.maskFrameW"
+          :min="0"
+          size="small"
+          placeholder="弹窗宽度"
+        />
+      </SettingItem>
+      <SettingItem name="弹窗X轴位置" v-if="optionData.dataStyle.mask">
+        <n-input-number
+          v-model:value="optionData.dataStyle.maskFrameX"
+          :min="0"
+          size="small"
+          placeholder="弹窗X轴位置"
+        />
+      </SettingItem>
+      <SettingItem name="弹窗Y轴位置" v-if="optionData.dataStyle.mask">
+        <n-input-number
+          v-model:value="optionData.dataStyle.maskFrameY"
+          :min="0"
+          size="small"
+          placeholder="弹窗Y轴位置"
+        />
+      </SettingItem>
+      <!-- <SettingItem name="弹窗高度" v-if="optionData.dataStyle.mask">
+        <n-input-number
+          v-model:value="optionData.dataStyle.maskFrameH"
+          :min="0"
+          size="small"
+          placeholder="弹窗高度"
+        />
+      </SettingItem> -->
+    </SettingItemBox>
+
     <SettingItemBox name="颜色设置">
       <SettingItem name="背景颜色">
         <n-color-picker
diff --git a/src/packages/components/Zhigan/Zhigan/ModalFrame/index.vue b/src/packages/components/Zhigan/Zhigan/ModalFrame/index.vue
index 8ddc28f..d5130bd 100644
--- a/src/packages/components/Zhigan/Zhigan/ModalFrame/index.vue
+++ b/src/packages/components/Zhigan/Zhigan/ModalFrame/index.vue
@@ -1,17 +1,30 @@
 <template>
-  <div class="ModalFrame">
-    <Frame :w="w" :h="h" :dataStyle="option.dataStyle" />
+  <div class="ModalFrame" @click="clickFrame">
+    <div class="frame">
+      <Frame :w="oframeWidth" :h="frameHeight" :dataStyle="option.dataStyle" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
+  import {
+    computed,
+    PropType,
+    toRefs,
+    watch,
+    reactive,
+    ref,
+    onMounted,
+    onBeforeUnmount,
+  } from 'vue';
   import { CreateComponentType } from '@/packages/index.d';
   import { icon } from '@/plugins';
   import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
   import { useChartDataFetch } from '@/hooks';
   import Frame from './svg/frame.vue';
+  import cloneDeep from 'lodash/cloneDeep';
 
+  const chartEditStore = useChartEditStore();
   const props = defineProps({
     chartConfig: {
       type: Object as PropType<CreateComponentType>,
@@ -19,11 +32,160 @@
     },
   });
 
-  const { w, h } = toRefs(props.chartConfig.attr);
+  const { w, h, x, y } = toRefs(props.chartConfig.attr);
 
   const option = reactive({
     dataStyle: props.chartConfig.option.dataStyle,
   });
+  // 弹窗样式
+  const frameWidth = computed(() => {
+    if (option.dataStyle.mask) {
+      return option.dataStyle.maskFrameW;
+    } else {
+      return w.value;
+    }
+  });
+  const frameHeight = computed(() => {
+    if (option.dataStyle.mask) {
+      return option.dataStyle.maskFrameH;
+    } else {
+      return h.value;
+    }
+  });
+  const frameTop = computed(() => {
+    if (option.dataStyle.mask) {
+      return option.dataStyle.maskFrameY;
+    } else {
+      return 0;
+    }
+  });
+  const frameLeft = computed(() => {
+    if (option.dataStyle.mask) {
+      return option.dataStyle.maskFrameX;
+    } else {
+      return 0;
+    }
+  });
+  // 监听遮罩
+  watch(
+    () => option.dataStyle.mask,
+    () => {
+      if (option.dataStyle.mask) {
+        option.dataStyle.maskFrameX = cloneDeep(x.value);
+        option.dataStyle.maskFrameY = cloneDeep(y.value);
+        option.dataStyle.maskFrameW = cloneDeep(w.value);
+        option.dataStyle.maskFrameH = cloneDeep(h.value);
+        x.value = 0;
+        y.value = 0;
+        w.value = chartEditStore.getEditCanvasConfig.width;
+        h.value = chartEditStore.getEditCanvasConfig.height;
+      } else {
+        x.value = option.dataStyle.maskFrameX;
+        y.value = option.dataStyle.maskFrameY;
+        w.value = option.dataStyle.maskFrameW;
+        h.value = option.dataStyle.maskFrameH;
+      }
+    },
+  );
+
+  watch(
+    () => option.dataStyle.maskFrameW,
+    () => {
+      option.dataStyle.maskFrameH = (option.dataStyle.maskFrameW * 712) / 1490;
+    },
+  );
+
+  // 有遮罩的情况点击
+  function clickFrame(event) {
+    if (!window.location.href.includes('/chart/home/')) {
+      if (option.dataStyle.mask && option.dataStyle.maskClickClose) {
+        chartEditStore.getComponentList.forEach((element) => {
+          if (
+            element.key == props.chartConfig.key ||
+            (element.isGroup && element?.groupList.some((li) => li.key == props.chartConfig.key))
+          ) {
+            if (
+              !(
+                element.option.maskFrameX <= event.x &&
+                event.x <= element.option.maskFrameX + element.option.maskFrameW &&
+                element.option.maskFrameY <= event.y &&
+                event.y <= element.option.maskFrameY + element.option.maskFrameH
+              )
+            ) {
+              if (!element.status.hide) {
+                element.status.hide = true;
+              }
+            }
+          }
+        });
+      }
+    }
+  }
+
+  const num = ref(0);
+  function getModalFrameIsNum() {
+    chartEditStore.getComponentList.forEach((element, index) => {
+      if (
+        element.key == props.chartConfig.key ||
+        (element.isGroup && element?.groupList.some((li) => li.key == props.chartConfig.key))
+      ) {
+        num.value = index;
+      }
+    });
+  }
+
+  let isClickUpdate = false;
+  watch(
+    () => chartEditStore.getComponentList[num.value]?.status?.hide,
+    () => {
+      // if (!chartEditStore.getComponentList[num.value]?.status?.hide) {
+      isClickUpdate = true;
+      // }
+    },
+    {
+      deep: true,
+    },
+  );
+
+  // 处理无遮罩的情况下的鼠标点击事件
+  const handleKeydown = (event: MouseEvent) => {
+    if (!window.location.href.includes('/chart/home/')) {
+      if (!option.dataStyle.mask && option.dataStyle.maskClickClose) {
+        chartEditStore.getComponentList.forEach((element) => {
+          // 单个
+          if (
+            element.key == props.chartConfig.key ||
+            (element.isGroup && element?.groupList.some((li) => li.key == props.chartConfig.key))
+          ) {
+            if (
+              !(
+                element.attr.x <= event.x &&
+                event.x <= element.attr.x + element.attr.w &&
+                element.attr.y <= event.y &&
+                event.y <= element.attr.y + element.attr.h
+              )
+            ) {
+              if (!element.status.hide && !isClickUpdate) {
+                element.status.hide = true;
+              } else {
+                isClickUpdate = false;
+              }
+            }
+          }
+        });
+      }
+    }
+  };
+
+  // 在组件挂载时添加监听器
+  onMounted(() => {
+    getModalFrameIsNum();
+    window.addEventListener('click', handleKeydown);
+  });
+  // 在组件卸载时移除监听器
+  onBeforeUnmount(() => {
+    window.removeEventListener('click', handleKeydown);
+  });
 </script>
 
 <style lang="scss" scoped>
@@ -33,5 +195,11 @@
     text-align: center;
     width: v-bind('`${w}px`');
     height: v-bind('`${h}px`');
+    background: v-bind('`${option.dataStyle.maskColor}`');
+  }
+  .frame {
+    position: absolute;
+    top: v-bind('`${frameTop}px`');
+    left: v-bind('`${frameLeft}px`');
   }
 </style>
diff --git a/src/packages/components/Zhigan/Zhigan/ModalVideo/config.ts b/src/packages/components/Zhigan/Zhigan/ModalVideo/config.ts
index 7115a04..b1a815d 100644
--- a/src/packages/components/Zhigan/Zhigan/ModalVideo/config.ts
+++ b/src/packages/components/Zhigan/Zhigan/ModalVideo/config.ts
@@ -16,6 +16,7 @@ export const option = {
 
     borderWidth: 2,
     borderColor: '#008000', 
+    borderColorClone: '#008000', 
     padding: 4,
   }
 }
diff --git a/src/packages/components/Zhigan/Zhigan/ModalVideo/config.vue b/src/packages/components/Zhigan/Zhigan/ModalVideo/config.vue
index 07f1bf1..1c3ebc0 100644
--- a/src/packages/components/Zhigan/Zhigan/ModalVideo/config.vue
+++ b/src/packages/components/Zhigan/Zhigan/ModalVideo/config.vue
@@ -34,6 +34,14 @@
           v-model:value="optionData.dataStyle.borderColor"
         ></n-color-picker>
       </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.borderColor = optionData.dataStyle.borderColorClone"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
       <SettingItem name="边框宽度">
         <n-input-number
           v-model:value="optionData.dataStyle.borderWidth"
diff --git a/src/packages/components/Zhigan/Zhigan/ModalVideo/index.vue b/src/packages/components/Zhigan/Zhigan/ModalVideo/index.vue
index da53982..702dea5 100644
--- a/src/packages/components/Zhigan/Zhigan/ModalVideo/index.vue
+++ b/src/packages/components/Zhigan/Zhigan/ModalVideo/index.vue
@@ -8,8 +8,8 @@
       :object-fit="option.dataset.fit"
       :loop="option.dataStyle.videoLoop"
       :muted="option.dataStyle.videoMuted"
-      :width="`${w - option.dataStyle.padding - option.dataStyle.borderWidth}`"
-      :height="`${h - option.dataStyle.padding - option.dataStyle.borderWidth}`"
+      :width="`${w - option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
+      :height="`${h - option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
       :src="option.dataset"
     />
   </div>
diff --git a/src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/config.ts b/src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/config.ts
index 88f6082..5a5ff2c 100644
--- a/src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/config.ts
+++ b/src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/config.ts
@@ -15,10 +15,8 @@ export const option = {
     marginleft: 20,
     gap: 16,
 
-    topMarginTop: 5,
-    iconSize: 45,
-    iconX: 12,
-    iconY: 12,
+    iconColor1: '#B8FDB4',
+    iconColor2: '#60EC8D',
     topWidth: 80,
     topHeight: 80,
     rectStrokeColor: '#00611A',
@@ -29,17 +27,35 @@ export const option = {
     bottomFontSize1: 20,
     bottomFontColor2: '#FFFFFF',
     bottomFontSize2: 12,
+    lineColor: '#A4F9AB',
+    lineFontSize: 12,
     bottomFontColor3: '#FFFFFF',
     bottomFontSize3: 12,
-    lineColor: '#A4F9AB',
     bottomMarginTop: 16,
     bottomWidth: 80,
     bottomHeight: 80 * 97 / 71,
+
+    bottomLineColor1: '#337D4E',
+    bottomLineColor2: '#2D593B',
+    bottomComponentColor1: '#6FEF94',
+    bottomComponentColor2: '#A8F8C6',
   },
   dataStyleClone: {
+    iconColor1: '#B8FDB4',
+    iconColor2: '#60EC8D',
     rectStrokeColor: '#00611A',
     rectFillColor: '#0A251E',
     gFillColor: '#4FE985',
+
+    bottomFontColor1: '#A4F9AB',
+    bottomFontColor2: '#FFFFFF',
+    lineColor: '#A4F9AB',
+    bottomFontColor3: '#FFFFFF',
+
+    bottomComponentColor1: '#337D4E',
+    bottomComponentColor2: '#2D593B',
+    bottomLineColor1: '#6FEF94',
+    bottomLineColor2: '#A8F8C6',
   }
 }
 
diff --git a/src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/config.vue b/src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/config.vue
index ac8c250..fde4193 100644
--- a/src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/config.vue
+++ b/src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/config.vue
@@ -35,57 +35,47 @@
       <SettingItem name="组件间隔">
         <n-input-number v-model:value="optionData.dataStyle.gap" min="0" type="text" size="small" />
       </SettingItem>
+      <SettingItem name="上方组件与下方组件之间的间隔距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.bottomMarginTop"
+          min="0"
+          type="text"
+          size="small"
+        />
+      </SettingItem>
     </SettingItemBox>
 
     <SettingItemBox name="上方组件设置">
-      <SettingItem name="上方距离">
-        <n-input-number
-          v-model:value="optionData.dataStyle.topMarginTop"
-          min="0"
-          type="text"
+      <SettingItem name="图标渐变颜色(始)">
+        <n-color-picker
           size="small"
-        />
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.iconColor1"
+        ></n-color-picker>
       </SettingItem>
-      <SettingItem name="图标大小">
-        <n-input-number
-          v-model:value="optionData.dataStyle.iconSize"
-          min="0"
-          type="text"
+      <SettingItem>
+        <n-button
           size="small"
-        />
+          @click="optionData.dataStyle.iconColor1 = optionData.dataStyleClone.iconColor1"
+        >
+          恢复默认
+        </n-button>
       </SettingItem>
-      <SettingItem name="图标横坐标位置">
-        <n-input-number
-          v-model:value="optionData.dataStyle.iconX"
-          min="0"
-          type="text"
+      <SettingItem name="图标渐变颜色(终)">
+        <n-color-picker
           size="small"
-        />
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.iconColor2"
+        ></n-color-picker>
       </SettingItem>
-      <SettingItem name="图标纵坐标位置">
-        <n-input-number
-          v-model:value="optionData.dataStyle.iconY"
-          min="0"
-          type="text"
+      <SettingItem>
+        <n-button
           size="small"
-        />
+          @click="optionData.dataStyle.iconColor2 = optionData.dataStyleClone.iconColor2"
+        >
+          恢复默认
+        </n-button>
       </SettingItem>
-      <!-- <SettingItem name="组件宽度">
-        <n-input-number
-          v-model:value="optionData.dataStyle.topWidth"
-          min="0"
-          type="text"
-          size="small"
-        />
-      </SettingItem>
-      <SettingItem name="组件高度">
-        <n-input-number
-          v-model:value="optionData.dataStyle.topHeight"
-          min="0"
-          type="text"
-          size="small"
-        />
-      </SettingItem> -->
       <SettingItem name="组件边框颜色">
         <n-color-picker
           size="small"
@@ -141,12 +131,15 @@
           v-model:value="optionData.dataStyle.bottomFontColor1"
         ></n-color-picker>
       </SettingItem>
-      <SettingItem name="数量字体大小">
-        <n-input-number
-          v-model:value="optionData.dataStyle.bottomFontSize1"
-          :min="0"
+      <SettingItem>
+        <n-button
           size="small"
-        />
+          @click="
+            optionData.dataStyle.bottomFontColor1 = optionData.dataStyleClone.bottomFontColor1
+          "
+        >
+          恢复默认
+        </n-button>
       </SettingItem>
       <SettingItem name="单位字体颜色">
         <n-color-picker
@@ -155,26 +148,15 @@
           v-model:value="optionData.dataStyle.bottomFontColor2"
         ></n-color-picker>
       </SettingItem>
-      <SettingItem name="单位字体大小">
-        <n-input-number
-          v-model:value="optionData.dataStyle.bottomFontSize2"
-          :min="0"
+      <SettingItem>
+        <n-button
           size="small"
-        />
-      </SettingItem>
-      <SettingItem name="标题字体颜色">
-        <n-color-picker
-          size="small"
-          :modes="['rgb']"
-          v-model:value="optionData.dataStyle.bottomFontColor3"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem name="标题字体大小">
-        <n-input-number
-          v-model:value="optionData.dataStyle.bottomFontSize3"
-          :min="0"
-          size="small"
-        />
+          @click="
+            optionData.dataStyle.bottomFontColor2 = optionData.dataStyleClone.bottomFontColor2
+          "
+        >
+          恢复默认
+        </n-button>
       </SettingItem>
       <SettingItem name="横线颜色">
         <n-color-picker
@@ -183,14 +165,127 @@
           v-model:value="optionData.dataStyle.lineColor"
         ></n-color-picker>
       </SettingItem>
-      <SettingItem name="距离上方组件距离">
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.lineColor = optionData.dataStyleClone.lineColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="标题字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.bottomFontColor3"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="
+            optionData.dataStyle.bottomFontColor3 = optionData.dataStyleClone.bottomFontColor3
+          "
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="数量字体大小">
         <n-input-number
-          v-model:value="optionData.dataStyle.bottomMarginTop"
-          min="0"
-          type="text"
+          v-model:value="optionData.dataStyle.bottomFontSize1"
+          :min="0"
           size="small"
         />
       </SettingItem>
+      <SettingItem name="单位字体大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.bottomFontSize2"
+          :min="0"
+          size="small"
+        />
+      </SettingItem>
+      <SettingItem name="横线字体大小">
+        <n-input-number v-model:value="optionData.dataStyle.lineFontSize" :min="0" size="small" />
+      </SettingItem>
+      <SettingItem name="标题字体大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.bottomFontSize3"
+          :min="0"
+          size="small"
+        />
+      </SettingItem>
+
+      <SettingItem name="边界渐变颜色(始)">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.bottomLineColor1"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="
+            optionData.dataStyle.bottomLineColor1 = optionData.dataStyleClone.bottomLineColor1
+          "
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="边界渐变颜色(终)">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.bottomLineColor2"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="
+            optionData.dataStyle.bottomLineColor2 = optionData.dataStyleClone.bottomLineColor2
+          "
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+
+      <SettingItem name="组件渐变颜色(始)">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.bottomComponentColor1"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="
+            optionData.dataStyle.bottomComponentColor1 =
+              optionData.dataStyleClone.bottomComponentColor1
+          "
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="组件渐变颜色(终)">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.bottomComponentColor2"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="
+            optionData.dataStyle.bottomComponentColor2 =
+              optionData.dataStyleClone.bottomComponentColor2
+          "
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
 
       <!-- <SettingItem name="组件宽度">
         <n-input-number
diff --git a/src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/index.vue b/src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/index.vue
index 19026b7..371e319 100644
--- a/src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/index.vue
+++ b/src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/index.vue
@@ -34,19 +34,6 @@
     dataStyle: props.chartConfig.option.dataStyle,
   });
 
-  // watch(
-  //   () => option.dataStyle.topWidth,
-  //   () => {
-  //     option.dataStyle.topHeight = option.dataStyle.topWidth;
-  //     option.dataStyle.bottomWidth = option.dataStyle.topWidth;
-  //     option.dataStyle.bottomHeight = 97 * (option.dataStyle.bottomWidth / 71);
-  //   },
-  //   {
-  //     immediate: true,
-  //     deep: true,
-  //   },
-  // );
-
   watch(
     () => w.value,
     () => {
diff --git a/src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/svg/bottom.vue b/src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/svg/bottom.vue
index 921755a..6a422dc 100644
--- a/src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/svg/bottom.vue
+++ b/src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/svg/bottom.vue
@@ -16,8 +16,12 @@
           y2="68.6506732%"
           id="linearGradient-WuRenJiFeiXingShuJu-1"
         >
-          <stop stop-color="#337D4E" offset="0%"></stop>
-          <stop stop-color="#2D593B" stop-opacity="0" offset="100%"></stop>
+          <stop :stop-color="props.dataStyle.bottomComponentColor1" offset="0%"></stop>
+          <stop
+            :stop-color="props.dataStyle.bottomComponentColor2"
+            stop-opacity="0"
+            offset="100%"
+          ></stop>
         </linearGradient>
         <linearGradient
           x1="100%"
@@ -26,8 +30,8 @@
           y2="50%"
           id="linearGradient-WuRenJiFeiXingShuJu-2"
         >
-          <stop stop-color="#6FEF94" stop-opacity="0" offset="0%"></stop>
-          <stop stop-color="#A8F8C6" offset="100%"></stop>
+          <stop :stop-color="props.dataStyle.bottomLineColor1" stop-opacity="0" offset="0%"></stop>
+          <stop :stop-color="props.dataStyle.bottomLineColor2" offset="100%"></stop>
         </linearGradient>
       </defs>
       <g
@@ -65,7 +69,7 @@
         </g>
       </g>
       <text
-        x="45%"
+        x="50%"
         y="30"
         text-anchor="middle"
         :fill="props.dataStyle.bottomFontColor1"
@@ -74,7 +78,7 @@
         {{ Number(props.item.num).toLocaleString() }}
       </text>
       <text
-        x="45%"
+        x="50%"
         y="50"
         text-anchor="middle"
         :fill="props.dataStyle.bottomFontColor2"
@@ -82,11 +86,17 @@
       >
         {{ props.item.unit }}
       </text>
-      <text x="45%" y="60" text-anchor="middle" :fill="props.dataStyle.lineColor" font-size="16">
+      <text
+        x="50%"
+        y="60"
+        text-anchor="middle"
+        :fill="props.dataStyle.lineColor"
+        :font-size="props.dataStyle.lineFontSize"
+      >
         ——
       </text>
       <text
-        x="45%"
+        x="50%"
         y="75"
         text-anchor="middle"
         :fill="props.dataStyle.bottomFontColor3"
diff --git a/src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/svg/top.vue b/src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/svg/top.vue
index 299967c..65bdcf1 100644
--- a/src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/svg/top.vue
+++ b/src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/svg/top.vue
@@ -8,6 +8,128 @@
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
     >
+      <defs>
+        <!-- 1 -->
+        <linearGradient
+          x1="100%"
+          y1="50%"
+          x2="0%"
+          y2="50%"
+          id="linearGradient-WuRenJiFeiXingShuJu-icon-1"
+        >
+          <stop :stop-color="props.dataStyle.iconColor1" offset="0%"></stop>
+          <stop :stop-color="props.dataStyle.iconColor2" offset="100%"></stop>
+        </linearGradient>
+        <path
+          d="M10.9626524,13.3304532 C11.3197125,13.1243044 11.539541,12.7432911 11.539541,12.3309937 L11.539541,1.946999 C11.5374517,1.57376524 11.354943,1.22459799 11.0496853,1.00982943 C10.7444276,0.795060873 10.3541343,0.741224873 10.0021329,0.86533289 C3.04517243,3.32754998 -1.08928183,10.4822778 0.251273414,17.7393242 C0.319529018,18.107955 0.562633287,18.4204408 0.903157524,18.5772549 C1.05438224,18.6479719 1.21935977,18.6844147 1.38630172,18.6839832 C1.58880838,18.6839832 1.78776893,18.6308362 1.96319031,18.5296616 L10.9626524,13.3304532 Z M9.23198659,3.69497144 L9.23198659,11.6646874 L2.32663013,15.6495453 C2.30932347,15.4317699 2.30932347,15.2125522 2.30932347,14.9991034 C2.31349764,10.2307443 4.98650358,5.86594831 9.23198659,3.69497144 Z M29.999988,14.9991034 C30.0023193,21.7681561 25.4705044,27.699965 18.9389252,29.4771966 C12.407346,31.2544282 5.49477434,28.4366176 2.06703026,22.5996106 C1.91003062,22.3347072 1.86543841,22.0180357 1.94317846,21.7200773 C2.02091851,21.422119 2.21453964,21.1675995 2.48094783,21.013167 L13.8470953,14.3976971 L13.8470953,1.15377719 C13.8470953,0.516563642 14.363659,0 15.0008725,0 C20.3269097,0.00271753692 25.2524528,2.82829093 27.9433681,7.4245562 C27.9592325,7.44763174 27.9736548,7.47070728 27.988077,7.49522505 C28.0024992,7.51974281 28.0169214,7.54858724 28.0299014,7.57454723 C29.3240379,9.83475067 30.0032902,12.3946269 29.999988,14.9991034 Z"
+          id="path-WuRenJiFeiXingShuJu-icon-1"
+        ></path>
+        <filter
+          x="-25.0%"
+          y="-25.0%"
+          width="150.0%"
+          height="150.0%"
+          filterUnits="objectBoundingBox"
+          id="filter-WuRenJiFeiXingShuJu-icon-1"
+        >
+          <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+          <feGaussianBlur
+            stdDeviation="2.5"
+            in="shadowOffsetOuter1"
+            result="shadowBlurOuter1"
+          ></feGaussianBlur>
+          <feColorMatrix
+            values="0 0 0 0 0.517647059   0 0 0 0 1   0 0 0 0 0.470588235  0 0 0 0.5 0"
+            type="matrix"
+            in="shadowBlurOuter1"
+          ></feColorMatrix>
+        </filter>
+
+        <!-- 2 -->
+        <linearGradient
+          x1="100%"
+          y1="50%"
+          x2="0%"
+          y2="50%"
+          id="linearGradient-WuRenJiFeiXingShuJu-icon-2"
+        >
+          <stop :stop-color="props.dataStyle.iconColor1" offset="0%"></stop>
+          <stop :stop-color="props.dataStyle.iconColor2" offset="100%"></stop>
+        </linearGradient>
+        <path
+          d="M26.5323394,10.3942424 C26.5323394,9.43784568 27.3076521,8.66253293 28.2640488,8.66253293 C29.2204456,8.66253293 29.9957583,9.43784568 29.9957583,10.3942424 C29.9957583,11.3506392 29.2204456,12.1259519 28.2640488,12.1259519 C27.3076521,12.1259519 26.5323394,11.3506392 26.5323394,10.3942424 Z M24.8006299,6.93082343 C25.7570266,6.93082343 26.5323394,6.15551068 26.5323394,5.19911394 C26.5323394,4.24271719 25.7570266,3.46740444 24.8006299,3.46740444 C23.8442331,3.46740444 23.0689204,4.24271719 23.0689204,5.19911394 C23.0689204,6.15551068 23.8442331,6.93082343 24.8006299,6.93082343 Z M28.9365294,15.0121344 C28.3013941,14.9597558 27.7439519,15.4319346 27.6911416,16.0670341 C27.116192,22.7834987 21.4000376,27.8843162 14.6617,27.6938727 C7.92336235,27.5034291 2.50442805,22.087904 2.30974394,15.3496876 C2.11505982,8.61147112 7.21227903,2.89210776 13.9283804,2.31293145 C14.5659782,2.26032962 15.0402112,1.70081225 14.9876094,1.06321443 C14.9350075,0.425616606 14.3754902,-0.0486163577 13.7378924,0.00398545321 C5.80256263,0.686552266 -0.221520462,7.44249368 0.00625017976,15.4038677 C0.234020821,23.3652417 6.63450211,29.765723 14.5958761,29.9934936 C22.5572501,30.2212643 29.3131915,24.1971812 29.9957583,16.2618514 C30.022088,15.9554336 29.9250671,15.6511755 29.7262153,15.4165629 C29.5273635,15.1819503 29.2431193,15.0363779 28.9365294,15.0121344 Z M14.9876094,4.62187744 C20.7259899,4.62187744 25.3778664,9.27375394 25.3778664,15.0121344 C25.3778664,20.7505149 20.7259899,25.4023914 14.9876094,25.4023914 C9.24922891,25.4023914 4.59735241,20.7505149 4.59735241,15.0121344 C4.60371486,9.27639142 9.25186639,4.62823989 14.9876094,4.62187744 Z M13.8331364,15.0121344 C13.8331364,15.6497322 14.3500116,16.1666074 14.9876094,16.1666074 L21.9144474,16.1666074 C22.5520452,16.1666074 23.0689204,15.6497322 23.0689204,15.0121344 C23.0689204,14.3745366 22.5520452,13.8576614 21.9144474,13.8576614 L16.1420824,13.8576614 L16.1420824,8.08529643 C16.1420824,7.4476986 15.6252072,6.93082343 14.9876094,6.93082343 C14.3500116,6.93082343 13.8331364,7.4476986 13.8331364,8.08529643 L13.8331364,15.0121344 Z M19.6055014,3.46740444 C20.5618981,3.46740444 21.3372109,2.69209169 21.3372109,1.73569495 C21.3372109,0.779298203 20.5618981,0.00398545321 19.6055014,0.00398545321 C18.6491046,0.00398545321 17.8737919,0.779298203 17.8737919,1.73569495 C17.8737919,2.69209169 18.6491046,3.46740444 19.6055014,3.46740444 Z"
+          id="path-WuRenJiFeiXingShuJu-icon-2"
+        ></path>
+        <filter
+          x="-25.0%"
+          y="-25.0%"
+          width="150.0%"
+          height="150.0%"
+          filterUnits="objectBoundingBox"
+          id="filter-WuRenJiFeiXingShuJu-icon-2"
+        >
+          <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+          <feGaussianBlur
+            stdDeviation="2.5"
+            in="shadowOffsetOuter2"
+            result="shadowBlurOuter2"
+          ></feGaussianBlur>
+          <feColorMatrix
+            values="0 0 0 0 0.517647059   0 0 0 0 1   0 0 0 0 0.470588235  0 0 0 0.45098877 0"
+            type="matrix"
+            in="shadowBlurOuter2"
+          ></feColorMatrix>
+        </filter>
+
+        <!-- 3 -->
+        <linearGradient
+          x1="50%"
+          y1="0%"
+          x2="50%"
+          y2="100%"
+          id="linearGradient-WuRenJiFeiXingShuJu-icon-3"
+        >
+          <stop :stop-color="props.dataStyle.iconColor1" offset="0%"></stop>
+          <stop :stop-color="props.dataStyle.iconColor2" offset="100%"></stop>
+        </linearGradient>
+
+        <!-- 4 -->
+        <linearGradient
+          x1="50%"
+          y1="0%"
+          x2="50%"
+          y2="100%"
+          id="linearGradient-WuRenJiFeiXingShuJu-icon-4"
+        >
+          <stop :stop-color="props.dataStyle.iconColor1" offset="0%"></stop>
+          <stop :stop-color="props.dataStyle.iconColor2" offset="100%"></stop>
+        </linearGradient>
+        <path
+          d="M7.35073551,1.60474883 L7.35073551,2.26420696 L9.5019842,2.26420696 L9.5019842,1.60474883 C9.5019842,1.4572317 9.38239423,1.33764173 9.2348771,1.33764173 L8.8713099,1.33764173 L8.8713099,0.633808536 C8.8713099,0.495029351 8.76576919,0.381093354 8.63058799,0.367900765 C8.62185004,0.262188719 8.53429922,0.178749876 8.42635985,0.178749876 C8.31824915,0.178749876 8.23069834,0.262188719 8.22213172,0.367900765 C8.08695051,0.381093354 7.98123847,0.495029351 7.98123847,0.633808536 L7.98123847,1.33764173 L7.6178426,1.33764173 C7.47032547,1.33764173 7.35073551,1.4572317 7.35073551,1.60474883 L7.35073551,1.60474883 Z M7.65005308,0.326438342 L7.65005308,0.172753245 L7.64868242,0.000221592033 C7.64868242,0.000221592033 5.6392969,-0.0208522841 0.0591743525,0.348026215 C-0.117126612,0.38006536 -0.0288904633,0.548313705 2.18386653,0.608622684 C4.39662353,0.66876033 6.41988698,0.837008675 6.79424811,0.837008675 C7.02520409,0.837008675 7.47238146,0.47361281 7.65005308,0.326438342 L7.65005308,0.326438342 Z M14.0659347,8.49265102 L14.6876997,6.22609567 L13.2964812,5.68211554 L11.1419772,16.0175668 C11.1034275,16.2252216 11.2406646,16.4251664 11.4484908,16.4637162 C11.6475789,16.500724 11.8396425,16.3751374 11.8893288,16.1820458 L13.7475993,9.73995036 L17.7449538,7.55529186 L16.2146134,6.95699938 L14.0659347,8.49265102 Z M14.6650839,0.608622684 C16.8778409,0.548313705 16.966077,0.38006536 16.789776,0.348026215 C11.2096535,-0.0208522841 9.20026797,0.000221592033 9.20026797,0.000221592033 L9.19889731,0.172753245 L9.19889731,0.326438342 C9.37656894,0.47361281 9.82374631,0.837008675 10.0547023,0.837008675 C10.4288921,0.837008675 12.4523269,0.66876033 14.6650839,0.608622684 L14.6650839,0.608622684 Z M42.940743,0.348026215 C37.3607918,-0.0208522841 35.3514063,0.000221592033 35.3514063,0.000221592033 L35.3500356,0.172753245 L35.3500356,0.326438342 C35.5277073,0.47361281 35.9748846,0.837008675 36.2056693,0.837008675 C36.5800304,0.837008675 38.6034652,0.66876033 40.8162222,0.608622684 C43.0289792,0.548313705 43.1172153,0.38006536 42.940743,0.348026215 L42.940743,0.348026215 Z M29.7036075,5.68211554 L28.312389,6.22609567 L28.934154,8.49265102 L26.7854753,6.95699938 L25.2549636,7.55529186 L29.2523181,9.73995036 L31.1107599,16.1820458 C31.1604463,16.3751374 31.3523385,16.500724 31.5514266,16.4637162 C31.7592527,16.4251664 31.8966613,16.2252216 31.8579402,16.0175668 L29.7036075,5.68211554 Z M35.8352488,2.67300589 L30.4979042,2.67300589 C30.4955055,2.67300589 30.4932782,2.67334855 30.4910509,2.67334855 C30.4896802,2.67334855 30.4881382,2.67351988 30.4867676,2.67351988 C30.4391372,2.67437655 30.3928774,2.68088717 30.3485024,2.69185244 L24.517892,3.41898684 C24.4985314,3.42344148 24.4796849,3.42892411 24.4608383,3.43492074 C24.446789,3.33948864 24.4096099,3.25176649 24.3552976,3.17740826 L24.3554689,3.17740826 C23.7972682,2.20424064 22.7279831,1.67893573 21.5000444,1.67893573 C20.2721056,1.67893573 19.2028205,2.20424064 18.6444485,3.17740826 L18.6447911,3.17740826 C18.5903075,3.25176649 18.5531283,3.33948864 18.5392504,3.43492074 C18.5204039,3.42892411 18.5015573,3.42344148 18.4821968,3.41898684 L12.651415,2.69185244 C12.60704,2.68088717 12.5609516,2.67437655 12.5133212,2.67351988 C12.5119505,2.67351988 12.5104085,2.67334855 12.5090379,2.67334855 C12.5066392,2.67334855 12.5045832,2.67300589 12.5020132,2.67300589 L7.16483993,2.67300589 C6.83485387,2.67300589 6.56740411,2.93206036 6.56740411,3.25159515 L6.56740411,3.63435157 C6.56740411,3.95388636 6.83485387,4.21294084 7.16483993,4.21294084 L12.5020132,4.72693782 C12.5229158,4.72693782 12.5434757,4.72590982 12.5636929,4.72402517 C12.5857947,4.73156379 12.6080679,4.73824575 12.6308551,4.74338572 L18.4821968,7.20217594 C18.49933,7.20628792 18.5159492,7.2088579 18.5327398,7.21142788 L18.5327398,7.33153185 C18.5327398,7.65123797 18.7917943,7.91012111 19.1113291,7.91012111 L23.8885883,7.91012111 C24.2082944,7.91012111 24.4671776,7.65123797 24.4671776,7.33153185 L24.4671776,7.21142788 C24.4839682,7.2088579 24.5007587,7.20628792 24.517892,7.20217594 L30.3692336,4.74338572 C30.3918494,4.73824575 30.414294,4.73156379 30.4363959,4.72402517 C30.4566131,4.72590982 30.4771729,4.72693782 30.4979042,4.72693782 L35.8352488,4.21294084 C36.1650635,4.21294084 36.4325133,3.95388636 36.4325133,3.63435157 L36.4325133,3.25159515 C36.4325133,2.93206036 36.1650635,2.67300589 35.8352488,2.67300589 L35.8352488,2.67300589 Z M33.4981045,1.60474883 L33.4981045,2.26420696 L35.6493532,2.26420696 L35.6493532,1.60474883 C35.6493532,1.4572317 35.5297633,1.33764173 35.3822461,1.33764173 L35.0188503,1.33764173 L35.0188503,0.633808536 C35.0188503,0.495029351 34.9131382,0.381093354 34.777957,0.367900765 C34.7693904,0.262188719 34.6816682,0.178749876 34.5737289,0.178749876 C34.4656182,0.178749876 34.3780674,0.262188719 34.3695007,0.367900765 C34.2343195,0.381093354 34.1286075,0.495029351 34.1286075,0.633808536 L34.1286075,1.33764173 L33.7650403,1.33764173 C33.6176945,1.33764173 33.4981045,1.4572317 33.4981045,1.60474883 L33.4981045,1.60474883 Z M28.3350049,0.608622684 C30.5477619,0.66876033 32.5710253,0.837008675 32.9453864,0.837008675 C33.1761711,0.837008675 33.6235198,0.47361281 33.8010201,0.326438342 L33.8010201,0.172753245 L33.7998208,0.000221592033 C33.7998208,0.000221592033 31.7904352,-0.0208522841 26.2103127,0.348026215 C26.0338404,0.38006536 26.1220765,0.548313705 28.3350049,0.608622684 L28.3350049,0.608622684 Z M21.5000444,13.146551 C20.4598858,13.146551 19.6138468,12.3003406 19.6138468,11.2603534 C19.6138468,10.2203662 20.4598858,9.37415584 21.5000444,9.37415584 C22.5400316,9.37415584 23.3862419,10.2203662 23.3862419,11.2603534 C23.3862419,12.3003406 22.5400316,13.146551 21.5000444,13.146551 L21.5000444,13.146551 Z M23.3958366,9.17917966 L22.4565927,9.17917966 L22.4565927,8.41383815 L20.5433247,8.41383815 L20.5433247,9.17917966 L19.6040808,9.17917966 C19.2269784,9.17917966 18.9211502,9.48517919 18.9211502,9.86228164 L18.9211502,12.7197622 C18.9211502,13.0968646 19.2269784,13.4026928 19.6040808,13.4026928 L23.3958366,13.4026928 C23.7731103,13.4026928 24.0789385,13.0968646 24.0789385,12.7197622 L24.0789385,9.86228164 C24.0789385,9.48517919 23.7731103,9.17917966 23.3958366,9.17917966 L23.3958366,9.17917966 Z M21.8822868,10.7749689 C21.7284304,10.656921 21.5168349,10.6180285 21.3290547,10.6725122 C21.4202035,10.7347058 21.4781138,10.8392186 21.4781138,10.9538399 C21.4781138,11.1417915 21.3251141,11.2946199 21.1371625,11.2946199 C21.0415591,11.2946199 20.9519523,11.2543568 20.8885593,11.1866805 C20.8746814,11.2920499 20.8877026,11.3999893 20.9269377,11.4991907 C20.9605189,11.5824582 21.0102052,11.6557884 21.0746262,11.7167827 C21.1904468,11.8271208 21.3424186,11.8877724 21.502443,11.8877724 C21.6744607,11.8877724 21.8343137,11.8192395 21.9527044,11.6945095 C22.1888003,11.4464203 22.1786917,11.052356 21.9304312,10.8164314 C21.9148399,10.8016968 21.898906,10.7878189 21.8822868,10.7749689 L21.8822868,10.7749689 Z M21.5000444,12.3183305 C20.9166578,12.3183305 20.4420672,11.84374 20.4420672,11.2603534 C20.4420672,10.6769669 20.9166578,10.2023763 21.5000444,10.2023763 C22.0834309,10.2023763 22.5580215,10.6769669 22.5580215,11.2603534 C22.5580215,11.84374 22.0834309,12.3183305 21.5000444,12.3183305 L21.5000444,12.3183305 Z M21.5000444,9.70431324 C20.6420121,9.70431324 19.9440042,10.4023211 19.9440042,11.2603534 C19.9440042,12.1183857 20.6420121,12.8163936 21.5000444,12.8163936 C22.3580767,12.8163936 23.0560846,12.1183857 23.0560846,11.2603534 C23.0560846,10.4023211 22.3580767,9.70431324 21.5000444,9.70431324 L21.5000444,9.70431324 Z"
+          id="path-WuRenJiFeiXingShuJu-icon-4"
+        ></path>
+        <filter
+          x="-14.0%"
+          y="-36.4%"
+          width="127.9%"
+          height="172.9%"
+          filterUnits="objectBoundingBox"
+          id="filter-WuRenJiFeiXingShuJu-icon-4"
+        >
+          <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter4"></feOffset>
+          <feGaussianBlur
+            stdDeviation="2"
+            in="shadowOffsetOuter4"
+            result="shadowBlurOuter4"
+          ></feGaussianBlur>
+          <feColorMatrix
+            values="0 0 0 0 0.517647059   0 0 0 0 1   0 0 0 0 0.470588235  0 0 0 0.5 0"
+            type="matrix"
+            in="shadowBlurOuter4"
+          ></feColorMatrix>
+        </filter>
+      </defs>
+      <!-- 背景 -->
       <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1524, -831)">
           <g id="可视化" transform="translate(-0.5, -1)">
@@ -76,13 +198,163 @@
           </g>
         </g>
       </g>
-      <image
-        :x="props.dataStyle.iconX"
-        :y="props.dataStyle.iconY"
-        :width="props.dataStyle.iconSize"
-        :height="props.dataStyle.iconSize"
-        :href="`/src/assets/images/chart/zhigan/component/WuRenJiFeiXingShuJu${props.item.icon}.png`"
-      />
+      <!-- 1 -->
+      <g
+        id="监测平台"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd"
+        v-if="props.item.icon == '01'"
+        transform="translate(10, 10) scale(1.2)"
+      >
+        <g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1538, -846)">
+          <g id="可视化" transform="translate(-0.5, -1)">
+            <g id="模块" transform="translate(46, 88)">
+              <g id="标题模块--右侧1" transform="translate(1450, 684)">
+                <g id="a" transform="translate(28.5, 60)">
+                  <g id="1" transform="translate(0.5, 0.5)">
+                    <g id="Panzer" transform="translate(13.5, 14.5)">
+                      <g id="编组-9" transform="translate(0.5, 0.0159)">
+                        <rect id="矩形" x="0" y="0" width="42" height="42"></rect>
+                        <g
+                          id="chart-pie-slice-fill"
+                          transform="translate(6, 6)"
+                          fill-rule="nonzero"
+                        >
+                          <g id="形状">
+                            <use
+                              fill="black"
+                              fill-opacity="1"
+                              filter="url(#filter-WuRenJiFeiXingShuJu-icon-1)"
+                              xlink:href="#path-WuRenJiFeiXingShuJu-icon-1"
+                            ></use>
+                            <use
+                              fill="url(#linearGradient-WuRenJiFeiXingShuJu-icon-1)"
+                              xlink:href="#path-WuRenJiFeiXingShuJu-icon-1"
+                            ></use>
+                          </g>
+                        </g>
+                      </g>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+      <!-- 2 -->
+      <g
+        id="监测平台"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd"
+        v-if="props.item.icon == '02'"
+        transform="translate(10, 10) scale(1.2)"
+      >
+        <g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1628, -846)">
+          <g id="可视化" transform="translate(-0.5, -1)">
+            <g id="模块" transform="translate(46, 88)">
+              <g id="标题模块--右侧1" transform="translate(1450, 684)">
+                <g id="a" transform="translate(119, 60.5)">
+                  <g id="编组-6" transform="translate(0, 0.5)">
+                    <g id="编组-11" transform="translate(14, 14.0159)">
+                      <rect id="矩形" x="0" y="0" width="42" height="42"></rect>
+                      <g id="clock-countdown-fill" transform="translate(5, 5)" fill-rule="nonzero">
+                        <g id="形状">
+                          <use
+                            fill="black"
+                            fill-opacity="1"
+                            filter="url(#filter-WuRenJiFeiXingShuJu-icon-2)"
+                            xlink:href="#path-WuRenJiFeiXingShuJu-icon-2"
+                          ></use>
+                          <use
+                            fill="url(#linearGradient-WuRenJiFeiXingShuJu-icon-2)"
+                            xlink:href="#path-WuRenJiFeiXingShuJu-icon-2"
+                          ></use>
+                        </g>
+                      </g>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+      <!-- 3 -->
+      <g
+        id="监测平台"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd"
+        v-if="props.item.icon == '03'"
+        transform="translate(10, 10) scale(1.2)"
+      >
+        <g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1718, -846)">
+          <g id="可视化" transform="translate(-0.5, -1)">
+            <g id="模块" transform="translate(46, 88)">
+              <g id="标题模块--右侧1" transform="translate(1450, 684)">
+                <g id="a" transform="translate(209, 60.5)">
+                  <g id="编组-6" transform="translate(0, 0.5)">
+                    <g id="编组-14" transform="translate(14, 14.0159)">
+                      <rect id="矩形" x="0" y="0" width="42" height="42"></rect>
+                      <path
+                        d="M22.4403522,10.9841347 C29.9970401,11.4524749 36.0313601,17.486645 36.5,25.0419841 L33.7245785,25.0419841 C33.2052363,25.0419841 32.7842263,25.4629941 32.7842263,25.9823363 C32.7842263,26.5016785 33.2052363,26.9226885 33.7245785,26.9226885 L36.5,26.9226885 C36.4268981,28.1012262 36.2183717,29.242747 35.8897671,30.3319012 L7.1102329,30.3319012 C6.78162835,29.242747 6.57310192,28.1012262 6.5,26.9226885 L9.27542151,26.9226885 C9.79013388,26.9161905 10.2039772,26.4970897 10.2039772,25.9823363 C10.2039772,25.4675829 9.79013388,25.0484821 9.27542151,25.0419841 L6.5,25.0419841 C6.96863993,17.486645 13.0029599,11.4526248 20.5596478,10.9841347 L20.5596478,13.7577578 C20.5596478,14.2771 20.9806578,14.69811 21.5,14.69811 C22.0193422,14.69811 22.4403522,14.2771 22.4403522,13.7577578 L22.4403522,10.9841347 Z M29.9591233,17.5230632 C29.9591233,17.5230632 27.3551219,19.0377897 24.7345382,20.6284916 L24.1929606,20.9582145 C22.0324935,22.2776668 19.9828843,23.5811959 19.5107156,24.0532992 C18.4288123,25.1352025 18.4288123,26.8894176 19.5107156,27.9714708 C20.592619,29.0533742 22.346834,29.0533742 23.4288872,27.9714708 C23.9009905,27.4993022 25.2045197,25.449693 26.523972,23.2892258 L26.8536948,22.7476482 C28.4443967,20.1270645 29.9591233,17.5230632 29.9591233,17.5230632 Z"
+                        id="形状结合"
+                        fill="url(#linearGradient-WuRenJiFeiXingShuJu-icon-3)"
+                        fill-rule="nonzero"
+                      ></path>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+      <!-- 4 -->
+      <g
+        id="监测平台"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd"
+        v-if="props.item.icon == '04'"
+        transform="translate(3, 18) scale(1.3)"
+      >
+        <g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1804, -855)">
+          <g id="可视化" transform="translate(-0.5, -1)">
+            <g id="模块" transform="translate(46, 88)">
+              <g id="标题模块--右侧1" transform="translate(1450, 684)">
+                <g id="a" transform="translate(299, 60.5)">
+                  <g id="编组-6" transform="translate(0, 0.5)">
+                    <g id="Panzer" transform="translate(13.5, 13.5159)">
+                      <rect id="矩形" x="1" y="0.5" width="42" height="42"></rect>
+                      <g id="Fill-1" transform="translate(0, 13.4841)">
+                        <use
+                          fill="black"
+                          fill-opacity="1"
+                          filter="url(#filter-WuRenJiFeiXingShuJu-icon-4)"
+                          xlink:href="#path-WuRenJiFeiXingShuJu-icon-4"
+                        ></use>
+                        <use
+                          fill="url(#linearGradient-WuRenJiFeiXingShuJu-icon-4)"
+                          fill-rule="evenodd"
+                          xlink:href="#path-WuRenJiFeiXingShuJu-icon-4"
+                        ></use>
+                      </g>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
     </svg>
   </div>
 </template>
diff --git a/src/packages/components/Zhigan/Zhigan/WuRenJiImage/config.ts b/src/packages/components/Zhigan/Zhigan/WuRenJiImage/config.ts
index ae01811..dec86ff 100644
--- a/src/packages/components/Zhigan/Zhigan/WuRenJiImage/config.ts
+++ b/src/packages/components/Zhigan/Zhigan/WuRenJiImage/config.ts
@@ -6,7 +6,7 @@ import { WuRenJiImageConfig } from './index'
 
 export const option = {
   dataset: {
-    url: 'src/assets/images/chart/zhigan/component/example1.png'
+    url: 'src/assets/images/chart/zhigan/component/example1.gif'
   },
 }
 
diff --git a/src/packages/components/Zhigan/Zhigan/WuRenJiImage/config.vue b/src/packages/components/Zhigan/Zhigan/WuRenJiImage/config.vue
index 29365fe..8ab1566 100644
--- a/src/packages/components/Zhigan/Zhigan/WuRenJiImage/config.vue
+++ b/src/packages/components/Zhigan/Zhigan/WuRenJiImage/config.vue
@@ -32,7 +32,7 @@
   });
 
   const options = [
-    { label: '卫星例图', value: 'src/assets/images/chart/zhigan/component/example1.png' },
-    { label: '无人机例图', value: 'src/assets/images/chart/zhigan/component/example2.png' },
+    { label: '卫星例图', value: 'src/assets/images/chart/zhigan/component/example1.gif' },
+    { label: '无人机例图', value: 'src/assets/images/chart/zhigan/component/example2.gif' },
   ];
 </script>
diff --git a/src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/config.ts b/src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/config.ts
index 47468d5..e6df4ad 100644
--- a/src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/config.ts
+++ b/src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/config.ts
@@ -26,6 +26,30 @@ export const option = {
     videowidth: 181,
     videoheight: 115,
     videoMarginTop: 10,
+
+    borderWidth: 2,
+    borderColor: '#008000', 
+    padding: 4,
+
+    titleColorStop1: '#1F6B55',
+    titleColorStop2: '#0A392A',
+    titleRightrColor: '#00611A',
+    iconColorStop1: '#73F095',
+    iconColorStop2: '#BBFDB5',
+    iconStrokeColor: '#00611A',
+    iconFillColor: '#0A251E',
+    iconBottomColor: '#0E4030',
+  },
+  dataStyleClone:{
+    borderColor: '#008000', 
+    titleColorStop1: '#1F6B55',
+    titleColorStop2: '#0A392A',
+    titleRightrColor: '#00611A',
+    iconColorStop1: '#73F095',
+    iconColorStop2: '#BBFDB5',
+    iconStrokeColor: '#00611A',
+    iconFillColor: '#0A251E',
+    iconBottomColor: '#0E4030',
   }
 }
 
diff --git a/src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/config.vue b/src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/config.vue
index 4d81ae5..74f9172 100644
--- a/src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/config.vue
+++ b/src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/config.vue
@@ -58,7 +58,162 @@
       </SettingItem>
     </SettingItemBox>
 
+    <SettingItemBox name="边框设置">
+      <SettingItem name="边框颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.borderColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.borderColor = optionData.dataStyleClone.borderColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="边框宽度">
+        <n-input-number
+          v-model:value="optionData.dataStyle.borderWidth"
+          size="small"
+          :min="0"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="边框距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.padding"
+          size="small"
+          :min="0"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+
     <SettingItemBox name="标题设置">
+      <SettingItem name="标题底色（始）">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.titleColorStop1"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.titleColorStop1 = optionData.dataStyleClone.titleColorStop1"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="标题底色（终）">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.titleColorStop2"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.titleColorStop2 = optionData.dataStyleClone.titleColorStop2"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="标题右边颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.titleRightrColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="
+            optionData.dataStyle.titleRightrColor = optionData.dataStyleClone.titleRightrColor
+          "
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="无人机标记颜色(始)">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.iconColorStop1"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.iconColorStop1 = optionData.dataStyleClone.iconColorStop1"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="无人机标记颜色(终)">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.iconColorStop2"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.iconColorStop2 = optionData.dataStyleClone.iconColorStop2"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="无人机边框颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.iconStrokeColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.iconStrokeColor = optionData.dataStyleClone.iconStrokeColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="无人机填充颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.iconFillColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.iconFillColor = optionData.dataStyleClone.iconFillColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="标记下方矩形颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.iconBottomColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.iconBottomColor = optionData.dataStyleClone.iconBottomColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+
       <SettingItem name="标题字体颜色">
         <n-color-picker
           size="small"
diff --git a/src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/index.vue b/src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/index.vue
index 15ae761..7e9a85e 100644
--- a/src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/index.vue
+++ b/src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/index.vue
@@ -4,7 +4,10 @@
       <div v-for="item in option.dataset" :key="item.key">
         <div class="item">
           <video
-            style="border: 2px solid green; padding: 5px"
+            :style="{
+              border: `${option.dataStyle.borderWidth}px solid ${option.dataStyle.borderColor}`,
+              padding: `${option.dataStyle.padding}px`,
+            }"
             preload="auto"
             crossOrigin="anonymous"
             playsinline
diff --git a/src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/svg/title.vue b/src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/svg/title.vue
index 7bf125c..b2f4c97 100644
--- a/src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/svg/title.vue
+++ b/src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/svg/title.vue
@@ -9,6 +9,7 @@
       xmlns:xlink="http://www.w3.org/1999/xlink"
     >
       <defs>
+        <!-- 标题 -->
         <linearGradient
           x1="100%"
           y1="50%"
@@ -19,7 +20,67 @@
           <stop stop-color="#1F6B55" stop-opacity="0" offset="0%"></stop>
           <stop stop-color="#0A392A" offset="100%"></stop>
         </linearGradient>
+
+        <!-- 无人机 -->
+        <linearGradient
+          x1="100%"
+          y1="50%"
+          x2="2.30946189%"
+          y2="50%"
+          id="linearGradient-WuRenJiShiShiHuaMian-icon-1"
+        >
+          <stop :stop-color="props.dataStyle.titleColorStop1" stop-opacity="0" offset="0%"></stop>
+          <stop :stop-color="props.dataStyle.titleColorStop2" offset="100%"></stop>
+        </linearGradient>
+        <polygon
+          id="path-WuRenJiShiShiHuaMian-icon-2"
+          points="0 0 5.59739371 0 5.59739371 2.65844991 0 2.65844991"
+        ></polygon>
+        <polygon
+          id="path-WuRenJiShiShiHuaMian-icon-4"
+          points="0 0 30 0 30 7.11435377 0 7.11435377"
+        ></polygon>
+        <polygon
+          id="path-WuRenJiShiShiHuaMian-icon-6"
+          points="0 0 18 0 18 6.8944728 0 6.8944728"
+        ></polygon>
+        <linearGradient
+          x1="50%"
+          y1="0%"
+          x2="50%"
+          y2="100%"
+          id="linearGradient-WuRenJiShiShiHuaMian-icon-8"
+        >
+          <stop :stop-color="props.dataStyle.iconColorStop1" offset="0%"></stop>
+          <stop :stop-color="props.dataStyle.iconColorStop1" offset="100%"></stop>
+        </linearGradient>
+        <path
+          d="M3.07704942,0.671727749 L3.07704942,0.947780248 L3.97757298,0.947780248 L3.97757298,0.671727749 C3.97757298,0.609976332 3.92751201,0.55991537 3.8657606,0.55991537 L3.71356953,0.55991537 L3.71356953,0.265287241 C3.71356953,0.207193574 3.66938966,0.15949939 3.61280212,0.153976906 C3.60914437,0.10972531 3.57249516,0.0747973894 3.5273112,0.0747973894 C3.48205551,0.0747973894 3.4454063,0.10972531 3.44182027,0.153976906 C3.38523273,0.15949939 3.34098114,0.207193574 3.34098114,0.265287241 L3.34098114,0.55991537 L3.18886179,0.55991537 C3.12711038,0.55991537 3.07704942,0.609976332 3.07704942,0.671727749 L3.07704942,0.671727749 Z M3.20234526,0.136620526 L3.20234526,0.0722871692 L3.2017715,6.45485189e-05 C3.2017715,6.45485189e-05 2.36063258,-0.00875708241 0.0247651151,0.145657319 C-0.0490353582,0.159069067 -0.0120992613,0.229498673 0.914171986,0.254744316 C1.84044323,0.279918239 2.68739152,0.350347845 2.84410098,0.350347845 C2.94078032,0.350347845 3.12797102,0.198228502 3.20234526,0.136620526 L3.20234526,0.136620526 Z M5.8880657,3.55503837 L6.14833967,2.60624686 L5.56596859,2.37853403 L4.66408234,6.7050061 C4.64794521,6.79193144 4.70539339,6.87562935 4.79239045,6.89176648 C4.87572976,6.90725812 4.95612852,6.85468694 4.97692749,6.77385785 L5.75480886,4.07716417 L7.42812164,3.1626551 L6.78751345,2.91220684 L5.8880657,3.55503837 Z M6.13887255,0.254744316 C7.0651438,0.229498673 7.1020799,0.159069067 7.02827942,0.145657319 C4.69241196,-0.00875708241 3.85127304,6.45485189e-05 3.85127304,6.45485189e-05 L3.85069928,0.0722871692 L3.85069928,0.136620526 C3.92507351,0.198228502 4.11226422,0.350347845 4.20894356,0.350347845 C4.3655813,0.350347845 5.21260131,0.279918239 6.13887255,0.254744316 L6.13887255,0.254744316 Z M17.9752062,0.145657319 C15.6394105,-0.00875708241 14.7982715,6.45485189e-05 14.7982715,6.45485189e-05 L14.7976978,0.0722871692 L14.7976978,0.136620526 C14.872072,0.198228502 15.0592627,0.350347845 15.1558703,0.350347845 C15.3125798,0.350347845 16.1595998,0.279918239 17.085871,0.254744316 C18.0121423,0.229498673 18.0490784,0.159069067 17.9752062,0.145657319 L17.9752062,0.145657319 Z M12.4340744,2.37853403 L11.8517034,2.60624686 L12.1119773,3.55503837 L11.2125296,2.91220684 L10.5718497,3.1626551 L12.2451624,4.07716417 L13.0231155,6.77385785 C13.0439145,6.85468694 13.1242416,6.90725812 13.2075809,6.89176648 C13.2945779,6.87562935 13.3520978,6.79193144 13.335889,6.7050061 L12.4340744,2.37853403 Z M15.0008104,1.11890554 L12.766571,1.11890554 C12.765567,1.11890554 12.7646346,1.11904899 12.7637022,1.11904899 C12.7631285,1.11904899 12.762483,1.11912071 12.7619092,1.11912071 C12.7419709,1.11947931 12.7226063,1.12220469 12.7040307,1.12679481 L10.2633078,1.43117693 C10.2552033,1.43304167 10.2473141,1.43533673 10.2394248,1.43784695 C10.2335437,1.39789859 10.2179803,1.36117765 10.1952449,1.33005092 L10.1953166,1.33005092 C9.96165101,0.922678046 9.51404289,0.702782758 9.00002152,0.702782758 C8.48600014,0.702782758 8.03839202,0.922678046 7.80465467,1.33005092 L7.80479811,1.33005092 C7.78199096,1.36117765 7.7664276,1.39789859 7.76061823,1.43784695 C7.75272897,1.43533673 7.7448397,1.43304167 7.73673528,1.43117693 L5.29594062,1.12679481 C5.27736499,1.12220469 5.25807215,1.11947931 5.23813383,1.11912071 C5.23756007,1.11912071 5.23691458,1.11904899 5.23634082,1.11904899 C5.23533673,1.11904899 5.23447608,1.11890554 5.23340027,1.11890554 L2.99923259,1.11890554 C2.86109876,1.11890554 2.74914294,1.22734706 2.74914294,1.36110593 L2.74914294,1.5213297 C2.74914294,1.65508857 2.86109876,1.76353009 2.99923259,1.76353009 L5.23340027,1.97869182 C5.24215018,1.97869182 5.25075665,1.97826149 5.25921968,1.97747257 C5.26847163,1.98062827 5.27779531,1.98342537 5.28733415,1.98557699 L7.73673528,3.01483899 C7.74390734,3.01656028 7.75086423,3.01763609 7.75789285,3.0187119 L7.75789285,3.06898802 C7.75789285,3.20281862 7.86633436,3.31118841 8.00009324,3.31118841 L9.99987808,3.31118841 C10.1337087,3.31118841 10.2420785,3.20281862 10.2420785,3.06898802 L10.2420785,3.0187119 C10.2491071,3.01763609 10.2561357,3.01656028 10.2633078,3.01483899 L12.7127089,1.98557699 C12.722176,1.98342537 12.7315714,1.98062827 12.7408234,1.97747257 C12.7492864,1.97826149 12.7578928,1.97869182 12.766571,1.97869182 L15.0008104,1.76353009 C15.1388726,1.76353009 15.2508284,1.65508857 15.2508284,1.5213297 L15.2508284,1.36110593 C15.2508284,1.22734706 15.1388726,1.11890554 15.0008104,1.11890554 L15.0008104,1.11890554 Z M14.0224701,0.671727749 L14.0224701,0.947780248 L14.9229936,0.947780248 L14.9229936,0.671727749 C14.9229936,0.609976332 14.8729327,0.55991537 14.8111812,0.55991537 L14.6590619,0.55991537 L14.6590619,0.265287241 C14.6590619,0.207193574 14.6148103,0.15949939 14.5582228,0.153976906 C14.5546367,0.10972531 14.5179158,0.0747973894 14.4727318,0.0747973894 C14.4274762,0.0747973894 14.3908269,0.10972531 14.3872409,0.153976906 C14.3306534,0.15949939 14.2864018,0.207193574 14.2864018,0.265287241 L14.2864018,0.55991537 L14.1342107,0.55991537 C14.072531,0.55991537 14.0224701,0.609976332 14.0224701,0.671727749 L14.0224701,0.671727749 Z M11.8611705,0.254744316 C12.7874417,0.279918239 13.63439,0.350347845 13.7910995,0.350347845 C13.8877071,0.350347845 14.0749695,0.198228502 14.149272,0.136620526 L14.149272,0.0722871692 L14.14877,6.45485189e-05 C14.14877,6.45485189e-05 13.3076311,-0.00875708241 10.9717636,0.145657319 C10.8978914,0.159069067 10.9348275,0.229498673 11.8611705,0.254744316 L11.8611705,0.254744316 Z M9.00002152,5.50318439 C8.5646059,5.50318439 8.21044969,5.14895647 8.21044969,4.71361257 C8.21044969,4.27826867 8.5646059,3.92404074 9.00002152,3.92404074 C9.43536542,3.92404074 9.78959334,4.27826867 9.78959334,4.71361257 C9.78959334,5.14895647 9.43536542,5.50318439 9.00002152,5.50318439 L9.00002152,5.50318439 Z M9.7936097,3.84242272 L9.4004375,3.84242272 L9.4004375,3.52204691 L8.59953382,3.52204691 L8.59953382,3.84242272 L8.20636162,3.84242272 C8.04850463,3.84242272 7.9204834,3.97051567 7.9204834,4.12837266 L7.9204834,5.32452844 C7.9204834,5.48238543 8.04850463,5.61040666 8.20636162,5.61040666 L9.7936097,5.61040666 C9.95153841,5.61040666 10.0795596,5.48238543 10.0795596,5.32452844 L10.0795596,4.12837266 C10.0795596,3.97051567 9.95153841,3.84242272 9.7936097,3.84242272 L9.7936097,3.84242272 Z M9.16003012,4.51042817 C9.09562504,4.46101269 9.00705013,4.44473212 8.92844438,4.46753927 C8.96659973,4.49357384 8.99084128,4.53732339 8.99084128,4.58530445 C8.99084128,4.66398193 8.92679481,4.72795668 8.84811733,4.72795668 C8.80809725,4.72795668 8.77058739,4.71110235 8.74405078,4.68277272 C8.73824141,4.72688087 8.74369218,4.77206484 8.76011619,4.81359105 C8.77417342,4.84844725 8.79497239,4.87914366 8.82193932,4.90467618 C8.87042243,4.95086423 8.93403859,4.97625332 9.0010256,4.97625332 C9.07303306,4.97625332 9.13994836,4.94756509 9.18950728,4.89535251 C9.28833823,4.79150111 9.28410672,4.62654379 9.1801836,4.52778455 C9.17365703,4.52161658 9.16698702,4.51580722 9.16003012,4.51042817 L9.16003012,4.51042817 Z M9.00002152,5.15648713 C8.75581295,5.15648713 8.55714696,4.95782113 8.55714696,4.71361257 C8.55714696,4.469404 8.75581295,4.270738 9.00002152,4.270738 C9.24423008,4.270738 9.44289608,4.469404 9.44289608,4.71361257 C9.44289608,4.95782113 9.24423008,5.15648713 9.00002152,5.15648713 L9.00002152,5.15648713 Z M9.00002152,4.06224629 C8.64084487,4.06224629 8.34865524,4.35443592 8.34865524,4.71361257 C8.34865524,5.07278921 8.64084487,5.36497884 9.00002152,5.36497884 C9.35919816,5.36497884 9.65138779,5.07278921 9.65138779,4.71361257 C9.65138779,4.35443592 9.35919816,4.06224629 9.00002152,4.06224629 L9.00002152,4.06224629 Z"
+          id="path-WuRenJiShiShiHuaMian-icon-9"
+        ></path>
+        <filter
+          x="-33.3%"
+          y="-87.0%"
+          width="166.7%"
+          height="274.1%"
+          filterUnits="objectBoundingBox"
+          id="filter-WuRenJiShiShiHuaMian-icon-10"
+        >
+          <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+          <feGaussianBlur
+            stdDeviation="2"
+            in="shadowOffsetOuter1"
+            result="shadowBlurOuter1"
+          ></feGaussianBlur>
+          <feColorMatrix
+            values="0 0 0 0 0.517647059   0 0 0 0 1   0 0 0 0 0.470588235  0 0 0 0.5 0"
+            type="matrix"
+            in="shadowBlurOuter1"
+          ></feColorMatrix>
+        </filter>
       </defs>
+
+      <!-- 标题 -->
       <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1512, -711)">
           <g id="可视化" transform="translate(-0.5, -1)">
@@ -38,7 +99,7 @@
                     ></rect>
                     <rect
                       id="矩形"
-                      fill="#00611A"
+                      :fill="props.dataStyle.titleRightrColor"
                       transform="translate(1.5, 15) scale(1, -1) translate(-1.5, -15)"
                       x="0"
                       y="0"
@@ -47,7 +108,7 @@
                     ></rect>
                     <rect
                       id="矩形"
-                      fill="#00611A"
+                      :fill="props.dataStyle.titleRightrColor"
                       transform="translate(179.5, 15) scale(1, -1) translate(-179.5, -15)"
                       x="178"
                       y="0"
@@ -61,7 +122,116 @@
           </g>
         </g>
       </g>
-      <image x="8" y="2" width="25" height="25" href="./wurenji.svg" />
+
+      <!-- 无人机 -->
+      <g
+        id="监测平台"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd"
+        transform="translate(2, 2) scale(1.3)"
+      >
+        <g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1521, -716)">
+          <g id="可视化" transform="translate(-0.5, -1)">
+            <g id="模块" transform="translate(46, 88)">
+              <g id="标题模块--右侧1" transform="translate(1450, 285)">
+                <g id="1" transform="translate(15.1305, 215.5427)">
+                  <g id="文案" transform="translate(1.3695, 123.4573)">
+                    <g id="编组-16" fill="url(#linearGradient-WuRenJiShiShiHuaMian-icon-1)">
+                      <rect
+                        id="矩形"
+                        transform="translate(90.5, 15) scale(1, -1) translate(-90.5, -15)"
+                        x="0"
+                        y="0"
+                        width="181"
+                        height="30"
+                      ></rect>
+                    </g>
+                    <g id="编组" transform="translate(7, 12)">
+                      <g transform="translate(12.2011, 5.3191)">
+                        <mask id="mask-3" fill="white">
+                          <use xlink:href="#path-WuRenJiShiShiHuaMian-icon-2"></use>
+                        </mask>
+                        <g id="Clip-2"></g>
+                      </g>
+                      <g>
+                        <mask id="mask-5" fill="white">
+                          <use xlink:href="#path-WuRenJiShiShiHuaMian-icon-4"></use>
+                        </mask>
+                        <g id="Clip-6"></g>
+                      </g>
+                    </g>
+                    <g id="编组-15" transform="translate(9, 5)">
+                      <g id="编组-6">
+                        <rect
+                          id="矩形"
+                          :stroke="props.dataStyle.iconStrokeColor"
+                          stroke-width="0.5"
+                          :fill="props.dataStyle.iconFillColor"
+                          x="0.25"
+                          y="0.25"
+                          width="19.5"
+                          height="19.5"
+                        ></rect>
+                        <line
+                          x1="0.600805608"
+                          y1="0.600805608"
+                          x2="19.3072654"
+                          y2="19.3072654"
+                          id="路径-3"
+                          stroke="#3D4D3F"
+                          stroke-width="0.5"
+                          opacity="0.299999982"
+                        ></line>
+                        <line
+                          x1="0.600805608"
+                          y1="0.570692035"
+                          x2="19.6707123"
+                          y2="19.6405987"
+                          id="路径-3"
+                          stroke="#3D4D3F"
+                          stroke-width="0.5"
+                          opacity="0.299999982"
+                          transform="translate(10.0301, 10) scale(1, -1) translate(-10.0301, -10)"
+                        ></line>
+                        <rect
+                          id="矩形"
+                          :fill="props.dataStyle.iconBottomColor"
+                          x="1.5"
+                          y="17"
+                          width="17"
+                          height="1.5"
+                        ></rect>
+                      </g>
+                      <g id="编组" transform="translate(1, 7)">
+                        <mask id="mask-WuRenJiShiShiHuaMian-icon-7" fill="white">
+                          <use xlink:href="#path-WuRenJiShiShiHuaMian-icon-6"></use>
+                        </mask>
+                        <g id="Clip-2"></g>
+                        <g id="Fill-1" mask="url(#mask-WuRenJiShiShiHuaMian-icon-7)">
+                          <use
+                            fill="black"
+                            fill-opacity="1"
+                            filter="url(#filter-WuRenJiShiShiHuaMian-icon-10)"
+                            xlink:href="#path-WuRenJiShiShiHuaMian-icon-9"
+                          ></use>
+                          <use
+                            fill="url(#linearGradient-WuRenJiShiShiHuaMian-icon-8)"
+                            fill-rule="evenodd"
+                            xlink:href="#path-WuRenJiShiShiHuaMian-icon-9"
+                          ></use>
+                        </g>
+                      </g>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+      <!-- <image x="8" y="2" width="25" height="25" href="./wurenji.svg" /> -->
       <text
         x="40"
         y="20"
diff --git a/src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/svg/wurenji.svg b/src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/svg/wurenji.svg
deleted file mode 100644
index a300b90..0000000
--- a/src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/svg/wurenji.svg
+++ /dev/null
@@ -1,83 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs>
-        <linearGradient x1="100%" y1="50%" x2="2.30946189%" y2="50%" id="linearGradient-1">
-            <stop stop-color="#1F6B55" stop-opacity="0" offset="0%"></stop>
-            <stop stop-color="#0A392A" offset="100%"></stop>
-        </linearGradient>
-        <polygon id="path-2" points="0 0 5.59739371 0 5.59739371 2.65844991 0 2.65844991"></polygon>
-        <polygon id="path-4" points="0 0 30 0 30 7.11435377 0 7.11435377"></polygon>
-        <polygon id="path-6" points="0 0 18 0 18 6.8944728 0 6.8944728"></polygon>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-8">
-            <stop stop-color="#73F095" offset="0%"></stop>
-            <stop stop-color="#BBFDB5" offset="100%"></stop>
-        </linearGradient>
-        <path
-            d="M3.07704942,0.671727749 L3.07704942,0.947780248 L3.97757298,0.947780248 L3.97757298,0.671727749 C3.97757298,0.609976332 3.92751201,0.55991537 3.8657606,0.55991537 L3.71356953,0.55991537 L3.71356953,0.265287241 C3.71356953,0.207193574 3.66938966,0.15949939 3.61280212,0.153976906 C3.60914437,0.10972531 3.57249516,0.0747973894 3.5273112,0.0747973894 C3.48205551,0.0747973894 3.4454063,0.10972531 3.44182027,0.153976906 C3.38523273,0.15949939 3.34098114,0.207193574 3.34098114,0.265287241 L3.34098114,0.55991537 L3.18886179,0.55991537 C3.12711038,0.55991537 3.07704942,0.609976332 3.07704942,0.671727749 L3.07704942,0.671727749 Z M3.20234526,0.136620526 L3.20234526,0.0722871692 L3.2017715,6.45485189e-05 C3.2017715,6.45485189e-05 2.36063258,-0.00875708241 0.0247651151,0.145657319 C-0.0490353582,0.159069067 -0.0120992613,0.229498673 0.914171986,0.254744316 C1.84044323,0.279918239 2.68739152,0.350347845 2.84410098,0.350347845 C2.94078032,0.350347845 3.12797102,0.198228502 3.20234526,0.136620526 L3.20234526,0.136620526 Z M5.8880657,3.55503837 L6.14833967,2.60624686 L5.56596859,2.37853403 L4.66408234,6.7050061 C4.64794521,6.79193144 4.70539339,6.87562935 4.79239045,6.89176648 C4.87572976,6.90725812 4.95612852,6.85468694 4.97692749,6.77385785 L5.75480886,4.07716417 L7.42812164,3.1626551 L6.78751345,2.91220684 L5.8880657,3.55503837 Z M6.13887255,0.254744316 C7.0651438,0.229498673 7.1020799,0.159069067 7.02827942,0.145657319 C4.69241196,-0.00875708241 3.85127304,6.45485189e-05 3.85127304,6.45485189e-05 L3.85069928,0.0722871692 L3.85069928,0.136620526 C3.92507351,0.198228502 4.11226422,0.350347845 4.20894356,0.350347845 C4.3655813,0.350347845 5.21260131,0.279918239 6.13887255,0.254744316 L6.13887255,0.254744316 Z M17.9752062,0.145657319 C15.6394105,-0.00875708241 14.7982715,6.45485189e-05 14.7982715,6.45485189e-05 L14.7976978,0.0722871692 L14.7976978,0.136620526 C14.872072,0.198228502 15.0592627,0.350347845 15.1558703,0.350347845 C15.3125798,0.350347845 16.1595998,0.279918239 17.085871,0.254744316 C18.0121423,0.229498673 18.0490784,0.159069067 17.9752062,0.145657319 L17.9752062,0.145657319 Z M12.4340744,2.37853403 L11.8517034,2.60624686 L12.1119773,3.55503837 L11.2125296,2.91220684 L10.5718497,3.1626551 L12.2451624,4.07716417 L13.0231155,6.77385785 C13.0439145,6.85468694 13.1242416,6.90725812 13.2075809,6.89176648 C13.2945779,6.87562935 13.3520978,6.79193144 13.335889,6.7050061 L12.4340744,2.37853403 Z M15.0008104,1.11890554 L12.766571,1.11890554 C12.765567,1.11890554 12.7646346,1.11904899 12.7637022,1.11904899 C12.7631285,1.11904899 12.762483,1.11912071 12.7619092,1.11912071 C12.7419709,1.11947931 12.7226063,1.12220469 12.7040307,1.12679481 L10.2633078,1.43117693 C10.2552033,1.43304167 10.2473141,1.43533673 10.2394248,1.43784695 C10.2335437,1.39789859 10.2179803,1.36117765 10.1952449,1.33005092 L10.1953166,1.33005092 C9.96165101,0.922678046 9.51404289,0.702782758 9.00002152,0.702782758 C8.48600014,0.702782758 8.03839202,0.922678046 7.80465467,1.33005092 L7.80479811,1.33005092 C7.78199096,1.36117765 7.7664276,1.39789859 7.76061823,1.43784695 C7.75272897,1.43533673 7.7448397,1.43304167 7.73673528,1.43117693 L5.29594062,1.12679481 C5.27736499,1.12220469 5.25807215,1.11947931 5.23813383,1.11912071 C5.23756007,1.11912071 5.23691458,1.11904899 5.23634082,1.11904899 C5.23533673,1.11904899 5.23447608,1.11890554 5.23340027,1.11890554 L2.99923259,1.11890554 C2.86109876,1.11890554 2.74914294,1.22734706 2.74914294,1.36110593 L2.74914294,1.5213297 C2.74914294,1.65508857 2.86109876,1.76353009 2.99923259,1.76353009 L5.23340027,1.97869182 C5.24215018,1.97869182 5.25075665,1.97826149 5.25921968,1.97747257 C5.26847163,1.98062827 5.27779531,1.98342537 5.28733415,1.98557699 L7.73673528,3.01483899 C7.74390734,3.01656028 7.75086423,3.01763609 7.75789285,3.0187119 L7.75789285,3.06898802 C7.75789285,3.20281862 7.86633436,3.31118841 8.00009324,3.31118841 L9.99987808,3.31118841 C10.1337087,3.31118841 10.2420785,3.20281862 10.2420785,3.06898802 L10.2420785,3.0187119 C10.2491071,3.01763609 10.2561357,3.01656028 10.2633078,3.01483899 L12.7127089,1.98557699 C12.722176,1.98342537 12.7315714,1.98062827 12.7408234,1.97747257 C12.7492864,1.97826149 12.7578928,1.97869182 12.766571,1.97869182 L15.0008104,1.76353009 C15.1388726,1.76353009 15.2508284,1.65508857 15.2508284,1.5213297 L15.2508284,1.36110593 C15.2508284,1.22734706 15.1388726,1.11890554 15.0008104,1.11890554 L15.0008104,1.11890554 Z M14.0224701,0.671727749 L14.0224701,0.947780248 L14.9229936,0.947780248 L14.9229936,0.671727749 C14.9229936,0.609976332 14.8729327,0.55991537 14.8111812,0.55991537 L14.6590619,0.55991537 L14.6590619,0.265287241 C14.6590619,0.207193574 14.6148103,0.15949939 14.5582228,0.153976906 C14.5546367,0.10972531 14.5179158,0.0747973894 14.4727318,0.0747973894 C14.4274762,0.0747973894 14.3908269,0.10972531 14.3872409,0.153976906 C14.3306534,0.15949939 14.2864018,0.207193574 14.2864018,0.265287241 L14.2864018,0.55991537 L14.1342107,0.55991537 C14.072531,0.55991537 14.0224701,0.609976332 14.0224701,0.671727749 L14.0224701,0.671727749 Z M11.8611705,0.254744316 C12.7874417,0.279918239 13.63439,0.350347845 13.7910995,0.350347845 C13.8877071,0.350347845 14.0749695,0.198228502 14.149272,0.136620526 L14.149272,0.0722871692 L14.14877,6.45485189e-05 C14.14877,6.45485189e-05 13.3076311,-0.00875708241 10.9717636,0.145657319 C10.8978914,0.159069067 10.9348275,0.229498673 11.8611705,0.254744316 L11.8611705,0.254744316 Z M9.00002152,5.50318439 C8.5646059,5.50318439 8.21044969,5.14895647 8.21044969,4.71361257 C8.21044969,4.27826867 8.5646059,3.92404074 9.00002152,3.92404074 C9.43536542,3.92404074 9.78959334,4.27826867 9.78959334,4.71361257 C9.78959334,5.14895647 9.43536542,5.50318439 9.00002152,5.50318439 L9.00002152,5.50318439 Z M9.7936097,3.84242272 L9.4004375,3.84242272 L9.4004375,3.52204691 L8.59953382,3.52204691 L8.59953382,3.84242272 L8.20636162,3.84242272 C8.04850463,3.84242272 7.9204834,3.97051567 7.9204834,4.12837266 L7.9204834,5.32452844 C7.9204834,5.48238543 8.04850463,5.61040666 8.20636162,5.61040666 L9.7936097,5.61040666 C9.95153841,5.61040666 10.0795596,5.48238543 10.0795596,5.32452844 L10.0795596,4.12837266 C10.0795596,3.97051567 9.95153841,3.84242272 9.7936097,3.84242272 L9.7936097,3.84242272 Z M9.16003012,4.51042817 C9.09562504,4.46101269 9.00705013,4.44473212 8.92844438,4.46753927 C8.96659973,4.49357384 8.99084128,4.53732339 8.99084128,4.58530445 C8.99084128,4.66398193 8.92679481,4.72795668 8.84811733,4.72795668 C8.80809725,4.72795668 8.77058739,4.71110235 8.74405078,4.68277272 C8.73824141,4.72688087 8.74369218,4.77206484 8.76011619,4.81359105 C8.77417342,4.84844725 8.79497239,4.87914366 8.82193932,4.90467618 C8.87042243,4.95086423 8.93403859,4.97625332 9.0010256,4.97625332 C9.07303306,4.97625332 9.13994836,4.94756509 9.18950728,4.89535251 C9.28833823,4.79150111 9.28410672,4.62654379 9.1801836,4.52778455 C9.17365703,4.52161658 9.16698702,4.51580722 9.16003012,4.51042817 L9.16003012,4.51042817 Z M9.00002152,5.15648713 C8.75581295,5.15648713 8.55714696,4.95782113 8.55714696,4.71361257 C8.55714696,4.469404 8.75581295,4.270738 9.00002152,4.270738 C9.24423008,4.270738 9.44289608,4.469404 9.44289608,4.71361257 C9.44289608,4.95782113 9.24423008,5.15648713 9.00002152,5.15648713 L9.00002152,5.15648713 Z M9.00002152,4.06224629 C8.64084487,4.06224629 8.34865524,4.35443592 8.34865524,4.71361257 C8.34865524,5.07278921 8.64084487,5.36497884 9.00002152,5.36497884 C9.35919816,5.36497884 9.65138779,5.07278921 9.65138779,4.71361257 C9.65138779,4.35443592 9.35919816,4.06224629 9.00002152,4.06224629 L9.00002152,4.06224629 Z"
-            id="path-9"></path>
-        <filter x="-33.3%" y="-87.0%" width="166.7%" height="274.1%" filterUnits="objectBoundingBox" id="filter-10">
-            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.517647059   0 0 0 0 1   0 0 0 0 0.470588235  0 0 0 0.5 0" type="matrix"
-                in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1521, -716)">
-            <g id="可视化" transform="translate(-0.5, -1)">
-                <g id="模块" transform="translate(46, 88)">
-                    <g id="标题模块--右侧1" transform="translate(1450, 285)">
-                        <g id="1" transform="translate(15.1305, 215.5427)">
-                            <g id="文案" transform="translate(1.3695, 123.4573)">
-                                <g id="编组-16" fill="url(#linearGradient-1)">
-                                    <rect id="矩形" transform="translate(90.5, 15) scale(1, -1) translate(-90.5, -15)"
-                                        x="0" y="0" width="181" height="30"></rect>
-                                </g>
-                                <g id="编组" transform="translate(7, 12)">
-                                    <g transform="translate(12.2011, 5.3191)">
-                                        <mask id="mask-3" fill="white">
-                                            <use xlink:href="#path-2"></use>
-                                        </mask>
-                                        <g id="Clip-2"></g>
-                                    </g>
-                                    <g>
-                                        <mask id="mask-5" fill="white">
-                                            <use xlink:href="#path-4"></use>
-                                        </mask>
-                                        <g id="Clip-6"></g>
-                                    </g>
-                                </g>
-                                <g id="编组-15" transform="translate(9, 5)">
-                                    <g id="编组-6">
-                                        <rect id="矩形" stroke="#00611A" stroke-width="0.5" fill="#0A251E" x="0.25"
-                                            y="0.25" width="19.5" height="19.5"></rect>
-                                        <line x1="0.600805608" y1="0.600805608" x2="19.3072654" y2="19.3072654"
-                                            id="路径-3" stroke="#3D4D3F" stroke-width="0.5" opacity="0.299999982"></line>
-                                        <line x1="0.600805608" y1="0.570692035" x2="19.6707123" y2="19.6405987"
-                                            id="路径-3" stroke="#3D4D3F" stroke-width="0.5" opacity="0.299999982"
-                                            transform="translate(10.0301, 10) scale(1, -1) translate(-10.0301, -10)">
-                                        </line>
-                                        <rect id="矩形" fill="#0E4030" x="1.5" y="17" width="17" height="1.5"></rect>
-                                    </g>
-                                    <g id="编组" transform="translate(1, 7)">
-                                        <mask id="mask-7" fill="white">
-                                            <use xlink:href="#path-6"></use>
-                                        </mask>
-                                        <g id="Clip-2"></g>
-                                        <g id="Fill-1" mask="url(#mask-7)">
-                                            <use fill="black" fill-opacity="1" filter="url(#filter-10)"
-                                                xlink:href="#path-9"></use>
-                                            <use fill="url(#linearGradient-8)" fill-rule="evenodd" xlink:href="#path-9">
-                                            </use>
-                                        </g>
-                                    </g>
-                                </g>
-                            </g>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/config.ts b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/config.ts
index eac7eca..61751d3 100644
--- a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/config.ts
+++ b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/config.ts
@@ -10,27 +10,57 @@ const { typeOptions, source } = dataJson;
 export const option = {
   type: typeOptions[0].value,
   typeOptions: typeOptions,
-  typeStyle: {
+  dataset: source,
+  dataStyle: {
+    backgroud: '#FFFFFF00',
     typeColor1: '#FFC600',
     typeTitle1: '已处置',
     typeColor2: '#08B47A',
     typeTitle2: '总数',
     typeFontColor: '#FFFFFF',
-    typeFontSize: 16,
-  },
-  dataset: source,
-  dataStyle: {
+    typeFontSize: 13,
+
+    listTitlePathStrokeColor: '#049D73',
+    listTitlePathFillColor: '#05A074',
+    listTitlePathStrokeColor2: '#049D72',
+    listTitleRectFillColor: '#05A074',
+    listTypePathStrokeColor: '#06A475',
+    listTypePathFillColor: '#FFFFFF00',
+    listTypeRactFillColor: '#06A475',
+
     fontSize1: 13,
     fontSize2: 10,
     fontSize3: 13,
     fontColor1: '#FFFFFF',
     fontColor2: '#FFFFFF',
+    fontColor3: '#FFFFFF',
+    sortOrder: "0",
+
+    typeTop: 5,
+    listTop: 5,
+    listLeft: 15,
+    listTitleWidth: 106,
+    listTitleHeight: 30,
+    listProgressHeight: 15,
+    listTypeWidth: 66,
+    listTypeHeight: 30,
+  },
+  dataStyleClone:{
+    typeColor1: '#FFC600',
+    typeColor2: '#08B47A',
+    listTitlePathStrokeColor: '#049D73',
+    listTitlePathFillColor: '#05A074',
+    listTitlePathStrokeColor2: '#049D72',
+    listTitleRectFillColor: '#05A074',
+    listTypePathStrokeColor: '#06A475',
+    listTypePathFillColor: '#FFFFFF00',
+    listTypeRactFillColor: '#06A475',
   }
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = XianSuoShangBaoConfig.key
-  public attr = { ...chartInitConfig, w: 400, h: 235, zIndex: -1 }
+  public attr = { ...chartInitConfig, w: 400, h: 225, zIndex: -1 }
   public chartConfig = cloneDeep(XianSuoShangBaoConfig)
   public option = cloneDeep(option)
 }
diff --git a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/config.vue b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/config.vue
index 52daf8f..94c70db 100644
--- a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/config.vue
+++ b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/config.vue
@@ -1,46 +1,46 @@
 <template>
   <CollapseItem name="标记设置" :expanded="true">
     <SettingItemBox name="标记样式">
-      <SettingItem name="宽度">
-        <n-input-number
-          v-model:value="optionData.typeStyle.width"
-          :min="0"
-          size="small"
-          placeholder="宽度"
-        ></n-input-number>
-      </SettingItem>
-      <SettingItem name="高度">
-        <n-input-number
-          v-model:value="optionData.typeStyle.height"
-          :min="0"
-          size="small"
-          placeholder="高度"
-        ></n-input-number>
-      </SettingItem>
       <SettingItem name="标识颜色1">
         <n-color-picker
           size="small"
           :modes="['rgb']"
-          v-model:value="optionData.typeStyle.typeColor1"
+          v-model:value="optionData.dataStyle.typeColor1"
         ></n-color-picker>
       </SettingItem>
-      <SettingItem name="标识标题1">
-        <n-input
-          v-model:value="optionData.typeStyle.typeTitle1"
+      <SettingItem>
+        <n-button
           size="small"
-          placeholder="标识标题1"
-        ></n-input>
+          @click="optionData.dataStyle.typeColor1 = optionData.dataStyleClone.typeColor1"
+        >
+          恢复默认
+        </n-button>
       </SettingItem>
       <SettingItem name="标识颜色2">
         <n-color-picker
           size="small"
           :modes="['rgb']"
-          v-model:value="optionData.typeStyle.typeColor2"
+          v-model:value="optionData.dataStyle.typeColor2"
         ></n-color-picker>
       </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.typeColor2 = optionData.dataStyleClone.typeColor2"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="标识标题1">
+        <n-input
+          v-model:value="optionData.dataStyle.typeTitle1"
+          size="small"
+          placeholder="标识标题1"
+        ></n-input>
+      </SettingItem>
       <SettingItem name="标识标题2">
         <n-input
-          v-model:value="optionData.typeStyle.typeTitle2"
+          v-model:value="optionData.dataStyle.typeTitle2"
           size="small"
           placeholder="标识标题2"
         ></n-input>
@@ -49,20 +49,35 @@
         <n-color-picker
           size="small"
           :modes="['rgb']"
-          v-model:value="optionData.typeStyle.typeFontColor"
+          v-model:value="optionData.dataStyle.typeFontColor"
         ></n-color-picker>
       </SettingItem>
       <SettingItem name="标识字体大小">
         <n-input-number
-          v-model:value="optionData.typeStyle.typeFontSize"
+          v-model:value="optionData.dataStyle.typeFontSize"
           :min="0"
           size="small"
           placeholder="标识字体大小"
         ></n-input-number>
       </SettingItem>
+      <SettingItem name="背景颜色">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.backgroud"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-radio-group v-model:value="optionData.dataStyle.sortOrder" name="radiogroup">
+          <n-space>
+            <n-radio value="0"> {{ optionData.dataStyle.typeTitle2 }}排序 </n-radio>
+            <n-radio value="1"> {{ optionData.dataStyle.typeTitle1 }}排序 </n-radio>
+            <n-radio value="2"> 比例排序 </n-radio>
+            <n-text>排序方式</n-text>
+          </n-space>
+        </n-radio-group>
+      </SettingItem>
     </SettingItemBox>
-  </CollapseItem>
-  <CollapseItem name="数据设置" :expanded="true">
     <SettingItemBox name="数据样式">
       <SettingItem name="字体颜色1">
         <n-color-picker
@@ -71,13 +86,6 @@
           v-model:value="optionData.dataStyle.fontColor1"
         ></n-color-picker>
       </SettingItem>
-      <SettingItem name="字体颜色2">
-        <n-color-picker
-          size="small"
-          :modes="['rgb']"
-          v-model:value="optionData.dataStyle.fontColor2"
-        ></n-color-picker>
-      </SettingItem>
       <SettingItem name="字体大小1">
         <n-input-number
           v-model:value="optionData.dataStyle.fontSize1"
@@ -86,6 +94,13 @@
           placeholder="字体大小1"
         ></n-input-number>
       </SettingItem>
+      <SettingItem name="字体颜色2">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.fontColor2"
+        ></n-color-picker>
+      </SettingItem>
       <SettingItem name="字体大小2">
         <n-input-number
           v-model:value="optionData.dataStyle.fontSize2"
@@ -94,6 +109,13 @@
           placeholder="字体大小2"
         ></n-input-number>
       </SettingItem>
+      <SettingItem name="字体颜色3">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.fontColor3"
+        ></n-color-picker>
+      </SettingItem>
       <SettingItem name="字体大小3">
         <n-input-number
           v-model:value="optionData.dataStyle.fontSize3"
@@ -103,6 +125,136 @@
         ></n-input-number>
       </SettingItem>
     </SettingItemBox>
+
+    <SettingItemBox name="颜色样式">
+      <SettingItem name="标题矩形边框颜色">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.listTitlePathStrokeColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="
+            optionData.dataStyle.listTitlePathStrokeColor =
+              optionData.dataStyleClone.listTitlePathStrokeColor
+          "
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="标题矩形填充颜色">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.listTitlePathFillColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="
+            optionData.dataStyle.listTitlePathFillColor =
+              optionData.dataStyleClone.listTitlePathFillColor
+          "
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="标题左侧矩形颜色">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.listTitlePathStrokeColor2"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="
+            optionData.dataStyle.listTitlePathStrokeColor2 =
+              optionData.dataStyleClone.listTitlePathStrokeColor2
+          "
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="标题右侧矩形边框颜色">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.listTitleRectFillColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="
+            optionData.dataStyle.listTitleRectFillColor =
+              optionData.dataStyleClone.listTitleRectFillColor
+          "
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+
+      <SettingItem name="比例矩形边框颜色">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.listTypePathStrokeColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="
+            optionData.dataStyle.listTypePathStrokeColor =
+              optionData.dataStyleClone.listTypePathStrokeColor
+          "
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="比例矩形填充颜色">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.listTypePathFillColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="
+            optionData.dataStyle.listTypePathFillColor =
+              optionData.dataStyleClone.listTypePathFillColor
+          "
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="比例矩形装饰点颜色">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.listTypeRactFillColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="
+            optionData.dataStyle.listTypeRactFillColor =
+              optionData.dataStyleClone.listTypeRactFillColor
+          "
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
   </CollapseItem>
 </template>
 
diff --git a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/data.json b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/data.json
index 09831d9..61de9d4 100644
--- a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/data.json
+++ b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/data.json
@@ -11,47 +11,40 @@
   ],
   "source": [
     {
-      "key": "01",
       "title":"临沂市",
       "total": "10",
       "handled": "6"
     },
     {
-      "key": "02",
       "title":"临沂市",
       "total": "20",
       "handled": "6"
     },
     {
-      "key": "03",
       "title":"临沂市",
       "total": "4",
       "handled": "3"
     },
     {
-      "key": "04",
       "title":"临沂市",
       "total": "5",
       "handled": "1"
     },
     {
-
       "key": "05",
       "title":"临沂市",
       "total": "5",
       "handled": "2"
     },
     {
-      "key": "06",
       "title":"临沂市",
       "total": "6",
       "handled": "1"
     },
     {
-      "key": "07",
       "title":"临沂市",
       "total": "7",
-      "handled": "3"
+      "handled": "7"
     }
   ]
 }
diff --git a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/index.vue b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/index.vue
index b4117cb..52ff29a 100644
--- a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/index.vue
+++ b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/index.vue
@@ -2,10 +2,10 @@
   <div class="XianSuoShangBao">
     <div class="type">
       <div class="type-left">
-        <Progress :color="option.typeStyle.typeColor1" :numberOfDivs="1" />
-        <span>{{ option.typeStyle.typeTitle1 }}</span>
-        <Progress :color="option.typeStyle.typeColor2" :numberOfDivs="1" />
-        <span>{{ option.typeStyle.typeTitle2 }}</span>
+        <Progress :color="option.dataStyle.typeColor1" :numberOfDivs="1" />
+        <span>{{ option.dataStyle.typeTitle1 }}</span>
+        <Progress :color="option.dataStyle.typeColor2" :numberOfDivs="1" />
+        <span>{{ option.dataStyle.typeTitle2 }}</span>
       </div>
       <div class="type-right">
         <n-select v-model:value="option.type" size="small" :options="option.typeOptions" />
@@ -16,14 +16,19 @@
         <ListTitle :item="item" :dataStyle="option.dataStyle" />
         <div class="progressDiv">
           <div class="list-jindu">
-            <Progress :color="option.typeStyle.typeColor1" :numberOfDivs="Number(item.handled)" />
             <Progress
-              :color="option.typeStyle.typeColor2"
+              :color="option.dataStyle.typeColor1"
+              :numberOfDivs="Number(item.handled)"
+              :height="option.dataStyle.listProgressHeight"
+            />
+            <Progress
+              :color="option.dataStyle.typeColor2"
               :numberOfDivs="Number(item.total - item.handled)"
+              :height="Number(option.dataStyle.listProgressHeight)"
             />
           </div>
         </div>
-        <ListType style="margin-top: 3px" :item="item" :dataStyle="option.dataStyle" />
+        <ListType class="listType" :item="item" :dataStyle="option.dataStyle" />
       </div>
     </div>
   </div>
@@ -35,6 +40,7 @@
   import { icon } from '@/plugins';
   import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
   import { useChartDataFetch } from '@/hooks';
+  import dayjs from 'dayjs';
   import ListTitle from './svg/listTitle.vue';
   import ListType from './svg/listType.vue';
   import Progress from './svg/progress.vue';
@@ -51,14 +57,60 @@
   const option = reactive({
     type: props.chartConfig.option.type,
     typeOptions: props.chartConfig.option.typeOptions,
-    typeStyle: props.chartConfig.option.typeStyle,
     dataset: props.chartConfig.option.dataset,
     dataStyle: props.chartConfig.option.dataStyle,
   });
+
+  watch(
+    () => option.dataStyle.sortOrder,
+    () => {
+      if (option.dataStyle.sortOrder == '0') {
+        // 分母排序
+        option.dataset = option.dataset.sort((a, b) => parseInt(b.total) - parseInt(a.total));
+      } else if (option.dataStyle.sortOrder == '1') {
+        // 分子排序
+        option.dataset = option.dataset.sort((a, b) => parseInt(b.handled) - parseInt(a.handled));
+      } else if (option.dataStyle.sortOrder == '2') {
+        // 比例排序
+        option.dataset = option.dataset.sort(
+          (a, b) =>
+            parseInt(b.handled) / parseInt(b.total) - parseInt(a.handled) / parseInt(a.total),
+        );
+      }
+      option.dataset = option.dataset.map((item, index) => {
+        const order = String(index + 1);
+        const newKey = Number(order) >= 10 ? `${order}` : `0${order}`;
+        return {
+          ...item,
+          key: newKey,
+        };
+      });
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
+
+  watch(
+    () => w.value,
+    () => {
+      option.dataStyle.listTitleWidth = (w.value * 106.5) / 400;
+      option.dataStyle.listTitleHeight = (option.dataStyle.listTitleWidth * 20) / 71;
+      option.dataStyle.listTypeWidth = (w.value * 66) / 400;
+      option.dataStyle.listTypeHeight = (option.dataStyle.listTypeWidth * 30) / 66;
+      option.dataStyle.listProgressHeight = (w.value * 15) / 400;
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
 </script>
 
 <style lang="scss" scoped>
   .XianSuoShangBao {
+    background: v-bind('`${option.dataStyle.backgroud}`');
     width: v-bind('`${w}px`');
     height: v-bind('`${h}px`');
   }
@@ -67,9 +119,8 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-top: 5px;
-    margin-left: 30px;
-    margin-right: 10px;
+    margin-top: v-bind('`${option.dataStyle.typeTop}px`');
+    margin-left: v-bind('`${option.dataStyle.listLeft + 10}px`');
 
     .type-left {
       display: flex;
@@ -82,8 +133,8 @@
     }
 
     span {
-      color: v-bind('`${option.typeStyle.typeFontColor}`');
-      font-size: v-bind('`${option.typeStyle.typeFontSize}px`');
+      color: v-bind('`${option.dataStyle.typeFontColor}`');
+      font-size: v-bind('`${option.dataStyle.typeFontSize}px`');
       margin-left: 20px;
       margin-right: 30px;
     }
@@ -92,9 +143,8 @@
   .list {
     width: v-bind('`${w}px`');
     height: v-bind('`${h - 45}px`');
-    margin-top: 5px;
-    margin-left: 20px;
-    margin-right: 10px;
+    margin-top: v-bind('`${option.dataStyle.listTop}px`');
+    margin-left: v-bind('`${option.dataStyle.listLeft}px`');
     overflow-y: auto;
     display: flex;
     flex-direction: column;
@@ -102,21 +152,33 @@
     .inline-container {
       display: flex;
 
+      .listTitle {
+      }
+
       .progressDiv {
-        margin-top: 3px;
+        // margin-top: 3px;
         margin-left: 5px;
         margin-right: 5px;
-        width: v-bind('`${w - 180}px`');
-        height: 23px;
-        background: #000000;
+        width: v-bind(
+          '`${w - option.dataStyle.listTypeWidth - option.dataStyle.listTitleWidth - option.dataStyle.listLeft * 2}px`'
+        );
+        height: v-bind('`${option.dataStyle.listTypeHeight}px`');
+        background: #ffffff00;
+        border: 1px solid#000000;
       }
 
       .list-jindu {
         margin-left: 5px;
         margin-right: 5px;
-        width: v-bind('`${w - 200}px`');
+        width: v-bind(
+          '`${w - option.dataStyle.listTypeWidth - option.dataStyle.listTitleWidth - option.dataStyle.listLeft * 2 - 10}px`'
+        );
         display: flex;
       }
+
+      .listType {
+        // margin-top: 3px;
+      }
     }
   }
 
diff --git a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/listMark.vue b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/listMark.vue
deleted file mode 100644
index 17aa2df..0000000
--- a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/listMark.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <div>
-    <svg
-      width="60px"
-      height="30px"
-      viewBox="0 0 88 26"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-    >
-      <defs>
-        <linearGradient
-          x1="100%"
-          y1="50%"
-          x2="-21.8928848%"
-          y2="50%"
-          id="linearGradient-XianSuoShangBao-listMark-1"
-        >
-          <stop stop-color="#02221B" offset="0%"></stop>
-          <stop stop-color="#06463A" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-      </defs>
-      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="林业防火-智感-火情线索-切图版" transform="translate(-1782, -584)">
-          <g id="可视化" transform="translate(-8, -1)">
-            <g id="模块" transform="translate(53, 92)">
-              <g id="标题模块--右侧1" transform="translate(1449.5, 444)">
-                <g id="按钮" transform="translate(288, 49)">
-                  <rect
-                    id="矩形"
-                    stroke="#06A475"
-                    fill-opacity="0.4"
-                    x="0.5"
-                    y="0.5"
-                    width="86"
-                    height="25"
-                  ></rect>
-                  <polygon
-                    id="路径-11"
-                    fill="#06A475"
-                    points="0.5 0 0.5 7.33194884 8.38666648 0"
-                  ></polygon>
-                  <polygon
-                    id="路径-11"
-                    fill="#06A475"
-                    transform="translate(82.4433, 21.666) scale(-1, -1) translate(-82.4433, -21.666)"
-                    points="78.5 18 78.5 25.3319488 86.3866665 18"
-                  ></polygon>
-                </g>
-              </g>
-            </g>
-          </g>
-        </g>
-      </g>
-      <text x="40%" y="13" text-anchor="middle" font-size="15" fill="#000000">
-        {{ props.item.handled }} / {{ props.item.total }}
-      </text>
-    </svg>
-  </div>
-</template>
-
-<script setup lang="ts">
-  const props = defineProps(['item']);
-</script>
diff --git a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/listTitle.vue b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/listTitle.vue
index dc7eeab..20a6687 100644
--- a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/listTitle.vue
+++ b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/listTitle.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <svg
-      width="90px"
-      height="30px"
+      :width="props.dataStyle.listTitleWidth"
+      :height="props.dataStyle.listTitleHeight"
       viewBox="0 0 71 20"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
@@ -17,28 +17,35 @@
                   <path
                     d="M38.0468141,0.5 L24.9195699,19.5 L5.5,19.5 L5.5,0.5 L38.0468141,0.5 Z"
                     id="矩形"
-                    stroke="#049D73"
-                    fill="#05A074"
+                    :stroke="props.dataStyle.listTitlePathStrokeColor"
+                    :fill="props.dataStyle.listTitlePathFillColor"
                   ></path>
                   <path
                     d="M70.0581002,0.5 L57.2050021,19.5 L23.5,19.5 L23.5,0.5 L70.0581002,0.5 Z"
                     id="矩形"
-                    stroke="#049D72"
+                    :stroke="props.dataStyle.listTitlePathStrokeColor2"
                     fill-opacity="0.46"
                     opacity="0.79897926"
                     transform="translate(47, 10) scale(-1, -1) translate(-47, -10)"
                   ></path>
-                  <rect id="矩形" fill="#05A074" x="0" y="0" width="2" height="30"></rect>
+                  <rect
+                    id="矩形"
+                    :fill="props.dataStyle.listTitleRectFillColor"
+                    x="0"
+                    y="0"
+                    width="2"
+                    height="30"
+                  ></rect>
                 </g>
               </g>
             </g>
           </g>
         </g>
       </g>
-      <text x="12" y="13" :font-size="dataStyle.fontSize1" :fill="dataStyle.fontColor1">
+      <text x="10" y="15" :font-size="props.dataStyle.fontSize1" :fill="props.dataStyle.fontColor1">
         {{ props.item.key }}
       </text>
-      <text x="36" y="13" :font-size="dataStyle.fontSize2" :fill="dataStyle.fontColor1">
+      <text x="36" y="13" :font-size="props.dataStyle.fontSize2" :fill="props.dataStyle.fontColor2">
         {{ props.item.title }}
       </text>
     </svg>
diff --git a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/listType.vue b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/listType.vue
index eadc1a2..082fbfd 100644
--- a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/listType.vue
+++ b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/listType.vue
@@ -1,58 +1,52 @@
 <template>
   <div>
     <svg
-      width="50px"
-      height="30px"
-      viewBox="0 0 50 30"
+      :width="props.dataStyle.listTypeWidth"
+      :height="props.dataStyle.listTypeHeight"
+      viewBox="0 0 44 20"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
     >
-      <defs>
-        <linearGradient
-          x1="100%"
-          y1="50%"
-          x2="-21.8928848%"
-          y2="50%"
-          id="linearGradient-XianSuoShangBao-listType-1"
-        >
-          <stop stop-color="#02221B" offset="0%"></stop>
-          <stop stop-color="#06463A" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-      </defs>
       <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="林业防火-智感-火情线索-切图版" transform="translate(-1782, -584)">
+        <g id="林业防火-智感-火情线索-切图版" transform="translate(-1829, -621)">
           <g id="可视化" transform="translate(-8, -1)">
             <g id="模块" transform="translate(53, 92)">
               <g id="标题模块--右侧1" transform="translate(1449.5, 444)">
-                <g id="按钮" transform="translate(288, 49)">
-                  <rect
-                    id="矩形"
-                    stroke="#06A475"
-                    fill-opacity="0.4"
-                    x="1"
-                    y="1"
-                    width="40"
-                    height="20"
-                  ></rect>
-                  <polygon
-                    id="路径-11"
-                    fill="#06A475"
-                    points="0.5 0 0.5 7.33194884 8.38666648 0"
-                  ></polygon>
-                  <polygon
-                    id="路径-11"
-                    fill="#06A475"
-                    transform="translate(82.4433, 21.666) scale(-1, -1) translate(-82.4433, -21.666)"
-                    points="78.5 18 78.5 25.3319488 86.3866665 18"
-                  ></polygon>
+                <g id="list" transform="translate(17.5, 86)">
+                  <g id="编组-56" transform="translate(317, 0)">
+                    <path
+                      d="M43.5,0.5 L43.5,19.5 L0.5,19.5 L0.5,0.5 L43.5,0.5 Z"
+                      id="矩形"
+                      :stroke="props.dataStyle.listTypePathStrokeColor"
+                      fill-opacity="0.4"
+                      :fill="props.dataStyle.listTypePathFillColor"
+                      transform="translate(22, 10) scale(-1, 1) translate(-22, -10)"
+                    ></path>
+                    <rect
+                      id="矩形"
+                      :fill="props.dataStyle.listTypeRactFillColor"
+                      x="0"
+                      y="0"
+                      width="4"
+                      height="4"
+                    ></rect>
+                    <rect
+                      id="矩形备份-17"
+                      :fill="props.dataStyle.listTypeRactFillColor"
+                      x="40"
+                      y="16"
+                      width="4"
+                      height="4"
+                    ></rect>
+                  </g>
                 </g>
               </g>
             </g>
           </g>
         </g>
       </g>
-      <text x="5" y="15" :font-size="dataStyle.fontSize3" :fill="dataStyle.fontColor2">
+      <text x="6" y="15" :font-size="props.dataStyle.fontSize3" :fill="props.dataStyle.fontColor3">
         {{ props.item.handled }} / {{ props.item.total }}
       </text>
     </svg>
diff --git a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/mark.vue b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/mark.vue
deleted file mode 100644
index a970a80..0000000
--- a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/mark.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <svg
-      width="120px"
-      height="40px"
-      viewBox="0 0 88 26"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-    >
-      <defs>
-        <linearGradient
-          x1="100%"
-          y1="50%"
-          x2="-21.8928848%"
-          y2="50%"
-          id="linearGradient-XianSuoShangBao-mark-1"
-        >
-          <stop stop-color="#02221B" offset="0%"></stop>
-          <stop stop-color="#06463A" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-      </defs>
-      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="林业防火-智感-火情线索-切图版" transform="translate(-1782, -584)">
-          <g id="可视化" transform="translate(-8, -1)">
-            <g id="模块" transform="translate(53, 92)">
-              <g id="标题模块--右侧1" transform="translate(1449.5, 444)">
-                <g id="按钮" transform="translate(288, 49)">
-                  <rect
-                    id="矩形"
-                    stroke="#06A475"
-                    fill-opacity="0.4"
-                    x="0.5"
-                    y="0.5"
-                    width="86"
-                    height="25"
-                  ></rect>
-                  <polygon
-                    id="路径-11"
-                    fill="#06A475"
-                    points="0.5 0 0.5 7.33194884 8.38666648 0"
-                  ></polygon>
-                  <polygon
-                    id="路径-11"
-                    fill="#06A475"
-                    transform="translate(82.4433, 21.666) scale(-1, -1) translate(-82.4433, -21.666)"
-                    points="78.5 18 78.5 25.3319488 86.3866665 18"
-                  ></polygon>
-                </g>
-              </g>
-            </g>
-          </g>
-        </g>
-      </g>
-    </svg>
-    <n-select
-      class="overlay-select"
-      v-model:value="props.type"
-      size="small"
-      :options="props.typeOptions"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-  const props = defineProps(['typeOptions', 'type']);
-</script>
-
-<style lang="scss" scoped>
-  .container {
-    position: absolute;
-    left: 245px;
-    display: inline-block;
-
-    .overlay-select {
-      position: absolute;
-      width: 115px;
-      top: 45%;
-      left: 15%;
-      transform: translate(-50%, -50%);
-      z-index: 10;
-    }
-  }
-</style>
diff --git a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/progress.vue b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/progress.vue
index 7dd21a4..e550f5b 100644
--- a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/progress.vue
+++ b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/progress.vue
@@ -3,13 +3,17 @@
 </template>
 
 <script setup lang="ts">
-  const props = defineProps(['color', 'numberOfDivs']);
+  const props = defineProps({
+    color: { type: String },
+    numberOfDivs: { type: Number },
+    height: { type: Number, default: 15 },
+  });
 </script>
 
 <style lang="scss" scoped>
   .parallelogram {
-    width: 21px;
-    height: 10px;
+    width: 20px;
+    height: v-bind('`${props.height}px`');
     margin-top: 6px;
     margin-right: 1px;
     background-color: v-bind('`${props.color}`');
diff --git a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/title.vue b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/title.vue
deleted file mode 100644
index 9166183..0000000
--- a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/title.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<template>
-  <div>
-    <svg
-      width="400px"
-      height="40px"
-      viewBox="0 0 401 40"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-    >
-      <defs>
-        <linearGradient
-          x1="97.3499803%"
-          y1="112.35863%"
-          x2="0%"
-          y2="112.35863%"
-          id="linearGradient-XianSuoShangBao-1"
-        >
-          <stop stop-color="#08251E" stop-opacity="0.1742622" offset="0%"></stop>
-          <stop stop-color="#00A374" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="linearGradient-XianSuoShangBao-2">
-          <stop stop-color="#11B472" offset="0%"></stop>
-          <stop stop-color="#00A374" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <polygon
-          id="path-3"
-          points="10.9822114 0 112.704666 0 119.46341 11.2799213 173.1989 11.2799213 270.2884 11.2799213 270.2884 38.3517324 139.186577 38.3517324 0 38.3517324 0 11.1814815"
-        ></polygon>
-        <radialGradient
-          cx="50%"
-          cy="0%"
-          fx="50%"
-          fy="0%"
-          r="100%"
-          gradientTransform="translate(0.5, 0), scale(0.243, 1), rotate(90), scale(1, 2.7755), translate(-0.5, -0)"
-          id="radialGradient-5"
-        >
-          <stop stop-color="#00FF8C" offset="0%"></stop>
-          <stop stop-color="#00F4B6" stop-opacity="0" offset="100%"></stop>
-        </radialGradient>
-        <filter
-          x="-3.0%"
-          y="-12.5%"
-          width="106.1%"
-          height="124.9%"
-          filterUnits="objectBoundingBox"
-          id="filter-6"
-        >
-          <feGaussianBlur stdDeviation="4.31844888" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient
-          x1="27.2222213%"
-          y1="49.528366%"
-          x2="102.926609%"
-          y2="50.2892453%"
-          id="linearGradient-XianSuoShangBao-7"
-        >
-          <stop stop-color="#00FF77" offset="0%"></stop>
-          <stop stop-color="#00BF6B" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-XianSuoShangBao-8">
-          <stop stop-color="#00673F" stop-opacity="0" offset="0%"></stop>
-          <stop stop-color="#00683F" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-XianSuoShangBao-9">
-          <stop stop-color="#72A18A" stop-opacity="0" offset="0%"></stop>
-          <stop stop-color="#1CC370" offset="100%"></stop>
-        </linearGradient>
-      </defs>
-      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="林业防火-智感-火情线索-切图版" transform="translate(-1495, -535)">
-          <g id="可视化" transform="translate(-8, -1)">
-            <g id="模块" transform="translate(53, 92)">
-              <g id="标题模块--右侧1" transform="translate(1449.5, 444)">
-                <g id="底部背景" transform="translate(0, -0)">
-                  <g id="小标题" transform="translate(0.5, 0)">
-                    <g transform="translate(1, 1)">
-                      <polygon
-                        id="矩形"
-                        fill="url(#linearGradient-XianSuoShangBao-1)"
-                        points="10.3064025 0 166.362718 0 176.570151 13.6763066 255.888803 13.6763066 399.202062 13.6763066 399.201597 38.3517324 205.452516 38.3517324 0 38.3517324 0 11.1814815"
-                      ></polygon>
-                      <g id="椭圆形">
-                        <mask id="mask-4" fill="white">
-                          <use xlink:href="#path-3"></use>
-                        </mask>
-                        <use
-                          id="蒙版"
-                          fill="url(#linearGradient-XianSuoShangBao-2)"
-                          xlink:href="#path-3"
-                        ></use>
-                        <ellipse
-                          fill="url(#radialGradient-5)"
-                          filter="url(#filter-6)"
-                          mask="url(#mask-4)"
-                          cx="180.697047"
-                          cy="25.5190419"
-                          rx="214"
-                          ry="52"
-                        ></ellipse>
-                      </g>
-                      <polyline
-                        id="路径"
-                        stroke="url(#linearGradient-XianSuoShangBao-7)"
-                        stroke-width="0.616921269"
-                        points="0 25.7188334 0 11.1814815 11.0190925 0 177.866737 0 188.53316 13.2759293 264.809581 13.2759293"
-                      ></polyline>
-                      <polygon
-                        id="矩形"
-                        fill="url(#linearGradient-XianSuoShangBao-8)"
-                        points="118.561275 2.99401198 393.561275 2.99401198 393.561275 9.76196476 122.229351 9.76196476"
-                      ></polygon>
-                      <polygon
-                        id="路径-11"
-                        fill="#EBBE10"
-                        points="0 0 0 7.33194884 7.88666648 0"
-                      ></polygon>
-                      <g
-                        id="编组-2"
-                        opacity="0.691816057"
-                        transform="translate(370.7821, 6.5393) scale(-1, -1) translate(-370.7821, -6.5393)translate(345.3094, 3.992)"
-                        fill="#00C157"
-                      >
-                        <polygon
-                          id="矩形"
-                          opacity="0.558652605"
-                          points="46.5583547 0 50.945502 0 46.48422 5.0945502 42.0970727 5.0945502"
-                        ></polygon>
-                        <polygon
-                          id="矩形备份"
-                          opacity="0.385865711"
-                          points="38.2461939 0 42.6333411 0 38.1720591 5.0945502 33.7849118 5.0945502"
-                        ></polygon>
-                        <polygon
-                          id="矩形备份-2"
-                          opacity="0.321045648"
-                          points="29.6658988 0 34.0530461 0 29.5917641 5.0945502 25.2046168 5.0945502"
-                        ></polygon>
-                        <polygon
-                          id="矩形备份-3"
-                          opacity="0.191528"
-                          points="21.3537379 0 25.7408852 0 21.2796032 5.0945502 16.8924559 5.0945502"
-                        ></polygon>
-                        <polygon
-                          id="矩形备份-4"
-                          opacity="0.123233"
-                          points="12.5053086 0 16.8924559 0 12.4311739 5.0945502 8.04402663 5.0945502"
-                        ></polygon>
-                        <polygon
-                          id="矩形备份-5"
-                          opacity="0.097781"
-                          points="4.46128201 0 8.84842929 0 4.38714728 5.0945502 0 5.0945502"
-                        ></polygon>
-                      </g>
-                    </g>
-                    <g id="装饰线" transform="translate(8.3051, 37.5255)">
-                      <polygon
-                        id="矩形"
-                        fill="#EBBE10"
-                        points="1.58053304 0 11.6250344 0 10.0445013 1.82627297 0 1.82627297"
-                      ></polygon>
-                      <polygon
-                        id="矩形备份-13"
-                        fill="#4FE985"
-                        points="14.4276265 0 24.4721279 0 22.8284122 1.82627297 12.7839108 1.82627297"
-                      ></polygon>
-                      <polygon
-                        id="矩形备份-14"
-                        fill="url(#linearGradient-XianSuoShangBao-9)"
-                        points="27.2666802 0 390.822416 0 390.822416 1.82627297 25.5678216 1.82627297"
-                      ></polygon>
-                    </g>
-                  </g>
-                </g>
-              </g>
-            </g>
-          </g>
-        </g>
-      </g>
-      <text x="20%" y="30" text-anchor="middle" font-size="20" fill="#FFFFFF">
-        {{ props.title }}
-      </text>
-      <a xlink:href="https://www.example.com">
-        <text x="360" y="30" text-anchor="middle" font-size="20" fill="#FFFFFF">更多>></text>
-      </a>
-    </svg>
-  </div>
-</template>
-
-<script setup lang="ts">
-  const props = defineProps({
-    title: {
-      type: String,
-      required: true,
-    },
-  });
-</script>
diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts
index ac25e63..2cf89cc 100644
--- a/src/packages/index.d.ts
+++ b/src/packages/index.d.ts
@@ -200,7 +200,6 @@ export enum PackagesCategoryEnum {
   ICONS = 'Icons',
   DECORATES = 'Decorates',
   CUSTOM = 'Custom',
-  DIY = 'Diy',
   UNITS = 'Units',
   ZHIGAN = 'Zhigan',
   MAPICONS = 'MapIcons'
@@ -216,7 +215,6 @@ export enum PackagesCategoryName {
   ICONS = '图标',
   DECORATES = '小组件',
   CUSTOM = '预警信息',
-  DIY = 'DIY',
   UNITS = '组件',
   ZHIGAN = '智感',
   MAPICONS = '地图图标'
@@ -238,7 +236,6 @@ export type PackagesType = {
   [PackagesCategoryEnum.ICONS]: ConfigType[];
   [PackagesCategoryEnum.DECORATES]: ConfigType[];
   [PackagesCategoryEnum.CUSTOM]: ConfigType[];
-  [PackagesCategoryEnum.DIY]: ConfigType[];
   [PackagesCategoryEnum.UNITS]: ConfigType[];
   [PackagesCategoryEnum.ZHIGAN]: ConfigType[];
   [PackagesCategoryEnum.MAPICONS]: ConfigType[];
diff --git a/src/packages/index.ts b/src/packages/index.ts
index 5fb2012..3f5d79d 100644
--- a/src/packages/index.ts
+++ b/src/packages/index.ts
@@ -43,7 +43,6 @@ export let packagesList: PackagesType = {
   [PackagesCategoryEnum.DECORATES]: DecorateList,
   [PackagesCategoryEnum.PHOTOS]: PhotoList,
   [PackagesCategoryEnum.ICONS]: IconList,
-  [PackagesCategoryEnum.DIY]: DiyList,
   [PackagesCategoryEnum.UNITS]: UnitsList,
   [PackagesCategoryEnum.ZHIGAN]: ZhiganList,
   [PackagesCategoryEnum.MAPICONS]: MapIconsList,
diff --git a/src/router/routes/index.ts b/src/router/routes/index.ts
index a1b3693..d4a746e 100644
--- a/src/router/routes/index.ts
+++ b/src/router/routes/index.ts
@@ -7,9 +7,8 @@ import { mainOutRoutes } from './mainOut';
 import { PageEnum } from '@/enums/pageEnum';
 import { t } from '@/hooks/web/useI18n';
 import { projectRoutes, chartRoutes, previewRoutes, editRoutes } from '@/router/disposition/index';
-import { router } from '@/router';
-import { usePermissionStore } from '@/store/modules/permission';
 import { getMainPage } from '@/api/path/project.api';
+import { previewPath } from '@/utils';
 
 // import.meta.glob() 直接引入所有的模块 Vite 独有的功能
 const modules = import.meta.glob('./modules/**/*.ts', { eager: true });
@@ -37,34 +36,23 @@ export const asyncRoutes = [
 export const RootRoute: AppRouteRecordRaw = {
   path: '/',
   name: 'Root',
-  redirect: PageEnum.BASE_HOME,
+  // redirect: PageEnum.BASE_HOME,
   meta: {
     title: 'Root',
   },
-  // beforeEnter: async (to, from, next) => {
-  //   const mainPage = await getMainPage();
-  //   console.log('to', to);
-  //   console.log('from', from);
-  //   if (to.fullPath == '/') {
-  //     console.log('进入重定向');
-  //     if (mainPage) {
-  //       console.log('设置了主页');
-  //       console.log('mainPage', mainPage);
-  //       // window.open(
-  //       //   'http://192.168.10.120:5173/#/chart/preview/f0adeb4b-8f11-4cbb-84e3-7e03de472a7b',
-  //       //   '_self',
-  //       // );
-  //       window.location.replace(
-  //         'http://192.168.10.120:5173/#/chart/preview/f0adeb4b-8f11-4cbb-84e3-7e03de472a7b',
-  //       );
-  //       // window.location.href = mainPage;
-  //     } else {
-  //       next();
-  //     }
-  //   } else {
-  //     next();
-  //   }
-  // },
+  beforeEnter: async (to, from, next) => {
+    const mainPage = await getMainPage();
+    const path = previewPath(mainPage);
+    if (to.fullPath == '/') {
+      if (mainPage) {
+        next(path.split('#')[1]);
+      } else {
+        next();
+      }
+    } else {
+      next();
+    }
+  },
 };
 
 export const LoginRoute: AppRouteRecordRaw = {
diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index 043fc46..7c716c0 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -30,6 +30,7 @@ import {
   EditCanvasConfigType,
 } from './chartEditStore.d';
 import useClipboard from 'vue-clipboard3';
+import { customComponentSave } from '@/api/path/project.api';
 
 const { toClipboard } = useClipboard();
 
@@ -1040,5 +1041,35 @@ export const useChartEditStore = defineStore({
         this.getEditCanvas.scale = scale;
       }
     },
+    // 保存至分组
+    saveToGroup() {
+      if (this.getTargetChart.selectId.length > 1) {
+        window['$message'].warning('多个组件，请先创建分组后保存');
+        return;
+      }
+      let obj = {};
+      this.getComponentList.forEach((item) => {
+        if (item.id == this.getTargetChart.selectId[0]) {
+          obj = {
+            title: item.chartConfig.title,
+            image: 'upload.png',
+            key: 'GroupItem',
+            json: {
+              charts: item,
+              type: 'copy',
+            },
+          };
+        }
+      });
+      customComponentSave({
+        content: JSON.stringify(obj),
+      }).then((res) => {
+        if (res) {
+          window['$message'].success('保存成功');
+        } else {
+          window['$message'].error('保存失败');
+        }
+      });
+    },
   },
 });
diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts
index 9ec7920..9d2b6e3 100644
--- a/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts
+++ b/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts
@@ -1,5 +1,5 @@
-import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
-import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d';
+import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d';
 
 // 操作类型枚举
 
@@ -37,19 +37,19 @@ export enum HistoryActionTypeEnum {
   // 隐藏
   HIDE = 'hide',
   // 显示
-  SHOW = 'show'
+  SHOW = 'show',
 }
 
 // 对象类型
 export enum HistoryTargetTypeEnum {
   CANVAS = 'canvas',
-  CHART = 'chart'
+  CHART = 'chart',
 }
 
 // 历史栈
 export enum HistoryStackEnum {
   BACK_STACK = 'backStack',
-  FORWARD_STACK = 'forwardStack'
+  FORWARD_STACK = 'forwardStack',
 }
 
 // 历史记录项
@@ -57,22 +57,25 @@ export enum HistoryStackItemEnum {
   ID = 'id',
   TARGET_TYPE = 'targetType',
   ACTION_TYPE = 'actionType',
-  HISTORY_DATA = 'historyData'
+  HISTORY_DATA = 'historyData',
 }
 
 // 历史记录项类型
 export interface HistoryItemType {
   // 会有同时操作多个组件场景
-  [HistoryStackItemEnum.ID]: string
-  [HistoryStackItemEnum.TARGET_TYPE]: HistoryTargetTypeEnum
-  [HistoryStackItemEnum.ACTION_TYPE]: HistoryActionTypeEnum
-  [HistoryStackItemEnum.HISTORY_DATA]: CreateComponentType[] | CreateComponentGroupType[] | EditCanvasType[]
+  [HistoryStackItemEnum.ID]: string;
+  [HistoryStackItemEnum.TARGET_TYPE]: HistoryTargetTypeEnum;
+  [HistoryStackItemEnum.ACTION_TYPE]: HistoryActionTypeEnum;
+  [HistoryStackItemEnum.HISTORY_DATA]:
+    | CreateComponentType[]
+    | CreateComponentGroupType[]
+    | EditCanvasType[];
 }
 
 // 历史 Store 类型
 export interface ChartHistoryStoreType {
   // 后退栈
-  [HistoryStackEnum.BACK_STACK]: Array<HistoryItemType>
+  [HistoryStackEnum.BACK_STACK]: Array<HistoryItemType>;
   // 前进栈
-  [HistoryStackEnum.FORWARD_STACK]: Array<HistoryItemType>
+  [HistoryStackEnum.FORWARD_STACK]: Array<HistoryItemType>;
 }
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index dfb2e7d..9a5f6d8 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -28,6 +28,7 @@ import { router } from '@/router';
 import { LAYOUT } from '@/router/constant';
 import dayjs from 'dayjs';
 import { getMainPage } from '@/api/path/project.api';
+import { previewPath } from '@/utils';
 
 interface PermissionState {
   // Permission code list
@@ -371,7 +372,6 @@ export const usePermissionStore = defineStore({
        * @description 根据设置的首页path，修正routes中的affix标记（固定首页）
        * */
       const patchHomeAffix = async (routes: AppRouteRecordRaw[]) => {
-        console.log('patchHomeAffix')
         if (!routes || routes.length === 0) return;
         let homePath: string = userStore.getUserInfo.homePath || PageEnum.BASE_HOME;
 
@@ -394,9 +394,9 @@ export const usePermissionStore = defineStore({
 
         try {
           const homePage = await getMainPage();
-          console.log(homePage);
+          const path = previewPath(homePage);
           if (hoemPage) {
-            window.open(hoemPage, '_self');
+            window.open(path, '_self');
           } else {
             patcher(routes);
           }
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 2a6da14..7bb50ce 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -26,6 +26,7 @@ import { h } from 'vue';
 import md5 from 'js-md5';
 import { useMultipleTabStore } from '@/store/modules/multipleTab';
 import { getMainPage } from '@/api/path/project.api';
+import { previewPath } from '@/utils';
 
 interface UserState {
   userInfo: Nullable<UserInfo>;
@@ -166,9 +167,11 @@ export const useUserStore = defineStore({
           permissionStore.setDynamicAddedRoute(true);
         }
         const homePage = await getMainPage();
+        const path = previewPath(homePage);
+
         // 配置主页面后，进入主页面
         if (homePage) {
-          window.open(homePage, '_self');
+          router.replace(path.split('#')[1]);
         } else {
           goHome && (await router.replace(userInfo?.homePath || PageEnum.BASE_HOME));
           // goHome && (await router.replace(userInfo?.homePath || PageEnum.SUBJECT_HOME));
diff --git a/src/utils/router.ts b/src/utils/router.ts
index 5659ede..d13f737 100644
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -200,3 +200,9 @@ export const previewPath = (id?: string | number) => {
   const previewPath = `${origin}${pathname}${path}/${id || fetchRouteParamsLocation()}`;
   return previewPath;
 };
+// 跳转地址
+export const previewUrl = (id?: string | number) => {
+  const path = fetchPathByName(PreviewEnum.CHART_PREVIEW_NAME, 'href');
+  const previewPath = `${path.split('#')[1]}/${id || fetchRouteParamsLocation()}`;
+  return previewPath;
+};
diff --git a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
index d937c64..32f5543 100644
--- a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
+++ b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
@@ -24,6 +24,9 @@
           ></mac-os-control-btn>
           <n-text class="list-header-text" depth="3">
             <n-ellipsis>{{ item.title }}</n-ellipsis>
+            <span class="span-icon" @click="deleteComponent(item, index)">
+              <TrashIcon v-if="item.key == 'GroupItem'" />
+            </span>
           </n-text>
         </div>
         <div class="list-center go-flex-center go-transition" draggable="true">
@@ -80,16 +83,25 @@
     loadingError,
     JSONStringify,
     goDialog,
+    getUUID,
   } from '@/utils';
   import { DragKeyEnum } from '@/enums/editPageEnum';
   import { createComponent } from '@/packages';
-  import { ConfigType, CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d';
+  import {
+    ConfigType,
+    CreateComponentType,
+    PackagesCategoryEnum,
+    CreateComponentGroupType,
+  } from '@/packages/index.d';
   import { ChatCategoryEnum } from '@/packages/components/Photos/index.d';
   import { fetchConfigComponent, fetchChartComponent } from '@/packages/index';
   import { GoIconify } from '@/components/GoIconify';
   import { icon } from '@/plugins';
+  import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d';
 
   import omit from 'lodash/omit';
+  import cloneDeep from 'lodash/cloneDeep';
+  import { customComponentSaveDelete } from '@/api/path/project.api';
 
   const chartEditStore = useChartEditStore();
   const { TrashIcon } = icon.ionicons5;
@@ -140,27 +152,88 @@
   const dblclickHandle = async (item: ConfigType) => {
     console.log('双击添加', item);
     if (item.disabled) return;
-    try {
-      loadingStart();
-      // 动态注册图表组件
-      componentInstall(item.chartKey, fetchChartComponent(item));
-      componentInstall(item.conKey, fetchConfigComponent(item));
-      // 创建新图表组件
-      let newComponent: CreateComponentType = await createComponent(item);
-      if (item.redirectComponent) {
-        item.dataset && (newComponent.option.dataset = item.dataset);
-        newComponent.chartConfig.title = item.title;
-        newComponent.chartConfig.chartFrame = item.chartFrame;
+    // 保存的分组，进行使用
+    if (item.key == 'GroupItem') {
+      console.log('分组');
+      try {
+        loadingStart();
+        const recordCharts = item.json;
+
+        if (recordCharts === undefined) {
+          loadingFinish();
+          return;
+        }
+        const parseHandle = (e: CreateComponentType | CreateComponentGroupType) => {
+          e = cloneDeep(e);
+          e.attr.x = chartEditStore.getMousePosition.startX;
+          e.attr.y = chartEditStore.getMousePosition.startY;
+          // 外层生成新 id
+          e.id = getUUID();
+          // 分组列表生成新 id
+          if (e.isGroup) {
+            (e as CreateComponentGroupType).groupList.forEach(async (item: CreateComponentType) => {
+              item.id = getUUID();
+            });
+          }
+
+          return e;
+        };
+        const createComponentInstall = (e) => {
+          if (e.isGroup) {
+            // 分组
+            e.groupList.forEach(async (item) => {
+              // // 动态注册图表组件
+              componentInstall(item.chartConfig.chartKey, fetchChartComponent(item.chartConfig));
+              componentInstall(item.chartConfig.conKey, fetchConfigComponent(item.chartConfig));
+            });
+          } else {
+            componentInstall(e.chartConfig.chartKey, fetchChartComponent(e.chartConfig));
+            componentInstall(e.chartConfig.conKey, fetchConfigComponent(e.chartConfig));
+          }
+        };
+        const isCut = recordCharts.type === HistoryActionTypeEnum.CUT;
+        const targetList = Array.isArray(recordCharts.charts)
+          ? recordCharts.charts
+          : [recordCharts.charts];
+        // 多项
+        targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => {
+          createComponentInstall(e);
+          chartEditStore.addComponentList(parseHandle(e), undefined, true);
+          // 剪切需删除原数据
+          if (isCut) {
+            chartEditStore.setTargetSelectChart(e.id);
+            chartEditStore.removeComponentList(undefined, true);
+          }
+        });
+        if (isCut) chartEditStore.setRecordChart(undefined);
+        loadingFinish();
+      } catch (value) {
+        window['$message'].warning(`图表正在研发中, 敬请期待...`);
+        loadingError();
+      }
+    } else {
+      try {
+        loadingStart();
+        // 动态注册图表组件
+        componentInstall(item.chartKey, fetchChartComponent(item));
+        componentInstall(item.conKey, fetchConfigComponent(item));
+        // 创建新图表组件
+        let newComponent: CreateComponentType = await createComponent(item);
+        if (item.redirectComponent) {
+          item.dataset && (newComponent.option.dataset = item.dataset);
+          newComponent.chartConfig.title = item.title;
+          newComponent.chartConfig.chartFrame = item.chartFrame;
+        }
+        // 添加
+        chartEditStore.addComponentList(newComponent, false, true);
+        // 选中
+        chartEditStore.setTargetSelectChart(newComponent.id);
+        loadingFinish();
+      } catch (error) {
+        loadingError();
+        console.log('chartItemBox-index');
+        window['$message'].warning(`图表正在研发中, 敬请期待...`);
       }
-      // 添加
-      chartEditStore.addComponentList(newComponent, false, true);
-      // 选中
-      chartEditStore.setTargetSelectChart(newComponent.id);
-      loadingFinish();
-    } catch (error) {
-      loadingError();
-      console.log('chartItemBox-index');
-      window['$message'].warning(`图表正在研发中, 敬请期待...`);
     }
   };
 
@@ -191,6 +264,18 @@
       }
     },
   );
+  const deleteComponent = (item: ConfigType, index: number) => {
+    props.menuOptions.splice(index, 1);
+    customComponentSaveDelete({
+      ids: item.id,
+    }).then((res) => {
+      if (res) {
+        window['$message'].success(`删除成功`);
+      } else {
+        window['$message'].success(`删除失败`);
+      }
+    });
+  };
 </script>
 
 <style lang="scss" scoped>
@@ -338,4 +423,11 @@
       animation: miniAnimation 0.5s;
     }
   }
+  .span-icon {
+    font-size: 16px;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    margin-left: 5px;
+  }
 </style>
diff --git a/src/views/chart/ContentCharts/components/PhotoModal/index.vue b/src/views/chart/ContentCharts/components/PhotoModal/index.vue
index c49154e..27bf309 100644
--- a/src/views/chart/ContentCharts/components/PhotoModal/index.vue
+++ b/src/views/chart/ContentCharts/components/PhotoModal/index.vue
@@ -1,19 +1,115 @@
 <template>
   <div class="modal-content">
     <div class="modal-title">
-      图片管理
-      <div class="close-button" @click="closeModal">
-        <Icon icon="material-symbols:cancel-outline-rounded" :size="30"/>
+      <div class="title-span">图片管理</div>
+      <div class="close-button-div">
+        <div class="close-button" @click="closeModal"></div>
       </div>
     </div>
     <div class="content-div">
-      <div class="photo-item" v-for="(item, index) in photoList" :key="index" @click="changeSelect(selectPhotoList.some(obj => obj.id === item.id)? 1: 2,item)">
-        <Image
-          :src="`${apiUrl}/${item.filePath}`"
-        />
-        <div class="select-div">
-          <Icon v-if="selectPhotoList.some(obj => obj.id === item.id)" icon="material-symbols-light:check-circle" :size="25" style="color: #18a058;"/>
-          <Icon v-else icon="material-symbols-light:check-circle-outline" :size="25" style="color: #cacdcd;"/>
+      <div class="menu-div">
+        <div class="menu-title">
+          <div class="menu-title-icon"></div>
+          <div class="menu-title-span">图片资源</div>
+          <div style="font-size: 20px;cursor: pointer;" @click="openAddMenu"><PlusSquareOutlined /></div>
+        </div>
+        <div class="menu-list">
+          <div :class="`menu-item ${selectPhotoGroup == item? 'select-menu': ''}`" v-for="(item, index) in photoGroupList" :key="index" @click="changeMenu">
+            <div class="menu-item-icon"></div>
+            <div class="menu-item-span">{{ item }}</div>
+          </div>
+          <!-- <div v-if="!addMenuOpen" class="add-menu-div" @click="openAddMenu"><PlusSquareOutlined /></div> -->
+          <div v-if="addMenuOpen" class="add-menu-div" style="padding: 0px 10px;">
+            <a-input v-model:value="addMenuName" style="margin-right: 7px;" />
+            <a-button type="primary" style="background-color: #52c41a;margin-right: 5px;" shape="circle" :icon="h(CheckOutlined)" @click="submitMenu"></a-button>
+            <a-button type="primary" style="background-color: #ff7875;" shape="circle" :icon="h(CloseOutlined)" @click="closeAddMenu"></a-button>
+          </div>
+        </div>
+      </div>
+      <div class="show-list-div">
+        <div class="show-control">
+          <div class="control-left">
+            <a-radio-group class="show-type" v-model:value="showType">
+              <a-radio-button  class="custom-radio-btn" value="item">
+                  <AppstoreOutlined style="font-size: 20px;"/>
+              </a-radio-button>
+              <a-radio-button  class="custom-radio-btn" value="list">
+                <BarsOutlined style="font-size: 20px;"/>
+              </a-radio-button>
+            </a-radio-group>
+            <a-select
+              class="select-sort"
+              v-model:value="sort"
+              style="width: 166px;"
+              :options="selectSortOptions"/>
+          </div>
+          <div class="control-right">
+            <a-input-search
+              class="search-input"
+              v-model:value="search"
+              placeholder="查询图片名称"
+            >
+              <template #enterButton>
+                <a-button 
+                  type="primary"
+                  :icon="h(SearchOutlined)"
+                  style="height: 36px;"
+                  @click="searchPhoto"
+                >搜索</a-button>
+              </template>
+            </a-input-search>
+          </div>
+        </div>
+        <div class="show-list" v-if="showType == `item`">
+          <div class="show-item" v-for="(item,index) in paginatedData" :key="index">
+            <div class="item-image-div">
+              <a-image
+                class="item-image"
+                :src="`${apiUrl}/${item.filePath}`"
+              />
+              <div class="image-size">{{ `` }}</div>
+              <a-checkbox class="select-image" 
+                :checked="selectPhotoList.some(obj => obj.id === item.id)"
+                @change="changeSelect(selectPhotoList.some(obj => obj.id === item.id)? 1: 2,item)">
+              </a-checkbox>
+            </div>
+            <div class="item-span">{{ item.fileName }}</div>
+          </div>
+        </div>
+        <div class="show-list" v-else style="margin-right: 74px;border: 1px solid #D9D9D9;border-radius: 4px;">
+          <div class="list-title">
+            <div style="margin-left: 69px;margin-right: 339px;">素材名称</div>
+            <div style="margin-right: 103px;">尺寸</div>
+            <div style="margin-right: 161px;">大小</div>
+            <div>更新时间</div>
+          </div>
+          <div class="list-content">
+            <div class="list-item" v-for="(item, index) in paginatedData" :key="index">
+              <a-checkbox class="list-select-image" 
+                :checked="selectPhotoList.some(obj => obj.id === item.id)"
+                @change="changeSelect(selectPhotoList.some(obj => obj.id === item.id)? 1: 2,item)"/>
+              <a-image
+                class="list-item-image"
+                :src="`${apiUrl}/${item.filePath}`"
+              />
+              <div class="list-item-span">{{ item.fileName }}</div>
+              <div class="list-item-size"></div>
+              <div class="list-item-size">{{ `${(item.fileSize / 1024).toFixed(1)}kb`}}</div>
+              <div class="list-item-time">{{item.createTime}}</div>
+            </div>
+          </div>
+          
+        </div>
+        <div class="pagination-div">
+          <a-pagination
+            v-model:current="current"
+            v-model:page-size="pageSize"
+            show-quick-jumper
+            show-size-changer
+            :total="photoList.length"
+            :show-total="total => `共 ${total} 条`"
+            @showSizeChange="handlePageSizeChange"
+          />
         </div>
       </div>
     </div>
@@ -33,12 +129,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, h } from "vue"
-import { imageList, imageUpload, imageDelete } from '@/api/demo/photo'
+import { ref, onMounted, h, computed } from "vue"
+import { imageList, imageUpload, imageDelete, getImageGroupList } from '@/api/demo/photo'
 import { useGlobSetting } from '@/hooks/setting';
 import { Image, Button, Upload, Modal } from 'ant-design-vue';
 import Icon from '@/components/Icon/Icon.vue';
-import { UploadOutlined } from '@ant-design/icons-vue';
+import { UploadOutlined,AppstoreOutlined, BarsOutlined, SearchOutlined, PlusSquareOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
 import { photoModalStore } from '@/store/modules/photoModal'
 import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
 import { StorageEnum } from '@/enums/storageEnum'
@@ -46,24 +142,60 @@ import { ImageConfig } from '@/packages/components/Informations/Mores/Image/inde
 import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Photos/index.d'
 import { ChartFrameEnum, ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
+import { selectSortOptions } from './util'
 
 const photoModalStateStore = photoModalStore()
 const packagesStore = usePackagesStore()
 const { apiUrl } = useGlobSetting();
 
 onMounted(() => {
-  getList()
+  // getList()
+  getPhotoGroup()
 })
 
 const StoreKey = StorageEnum.GO_USER_MEDIA_PHOTOS
 const photoList = ref([])
 const selectPhotoList = ref([])
+const photoGroupList = ref([])
+const selectPhotoGroup = ref()
+const showType = ref('item')
+const sort = ref()
+const search = ref()
+const checked = ref()
+const current = ref(1)
+const pageSize = ref(10)
+const addMenuName = ref('')
+const addMenuOpen = ref(false)
+
+const paginatedData = computed(() => {
+  const start = (current.value - 1) * pageSize.value;
+  const end = start + pageSize.value;
+  return photoList.value.slice(start, end);
+});
 
 const getList = () => {
-  imageList().then(res => {
+  let params = {
+    GroupName: selectPhotoGroup.value,
+    page: current.value,
+    limit: pageSize.value,
+  }
+  if(search.value){
+    params['key'] = search.value
+  }
+  imageList(params).then(res => {
     photoList.value = res
   })
 }
+const getPhotoGroup = () => {
+  getImageGroupList().then(res => {
+    console.log('res',res)
+    photoGroupList.value = res
+    if(res.length > 0){
+      selectPhotoGroup.value = res[0]
+      getList()
+    }
+  })
+}
 const closeModal = () => {
   photoModalStateStore.changeOpenState(false)
 }
@@ -80,7 +212,7 @@ const changeSelect = (type,item) => {
 const customRequest = (file) => {
   const formData = new FormData()
   formData.append('files', file.file)
-  imageUpload(formData).then(res => {
+  imageUpload(formData,selectPhotoGroup.value).then(res => {
     console.log(res)
     getList()
   })
@@ -134,63 +266,355 @@ const addPhotoToList = () =>{
   selectPhotoList.value = []
   closeModal()
 }
+const handlePageSizeChange = (page, size) => {
+  pageSize.value = size;
+  current.value = 1;
+};
+const searchPhoto = () => {
+  current.value = 1
+  getList()
+}
+const openAddMenu = () => {
+  addMenuName.value = ''
+  addMenuOpen.value = true
+}
+const closeAddMenu = () => {
+  addMenuOpen.value = false
+  addMenuName.value = ''
+}
+const submitMenu = () => {
+  if(addMenuName.value.trim()){
+    photoGroupList.value.push(addMenuName.value.trim())
+    addMenuOpen.value = false
+    addMenuName.value = ''
+  }else{
+    window.$message.warning('分组名称不能为空')
+  }
+}
+const changeMenu = (item) => {
+  selectPhotoGroup.value = item.target.textContent
+  current.value = 1
+  getList()
+}
 </script>
 
 <style lang="scss" scoped>
 .modal-content{
-  width: 1152px;
-  height: 700px;
+  height: 790px;
   .modal-title{
+    height: 91px;
     font-size: 23px;
     font-weight: 500;
-    margin-bottom: 10px;
+    // margin-bottom: 10px;
     display:flex;
     justify-content: space-between;
-    .close-button{
-      width: 30px;
-      height: 30px;
+    border-bottom: 1px solid #E9E9E9;
+    .title-span{
       display: flex;
       align-items: center;
-      justify-content: center;
-      transform: rotate(0deg);
-      transition: 0.5s;
-      cursor: pointer;
+      padding-left: 42px;
+      font-family: 'PingFangSC-Medium';
+      font-weight: 500;
+      font-size: 30px;
+      color: #1A1A1A;
+      line-height: 42px;
+    }
+    .close-button-div{
+      display: flex;
+      align-items: center;
+      padding-right: 39px;
+      .close-button{
+        width: 30px;
+        height: 30px;
+        transform: rotate(0deg);
+        transition: 0.5s;
+        cursor: pointer;
+        background-image: url('/public/photomodal/photo_close_button.png');
+        background-size: 100% 100%;
+      }
     }
     .close-button:hover{
       transform: rotate(180deg);
     }
   }
   .content-div{
-    // background-color: aqua;
-    height: 600px;
+    height: 630px;
     display: flex;
-    flex-wrap: wrap;
-    overflow: auto;
-    align-content: flex-start;
-    scrollbar-width: none; 
     margin-bottom: 10px;
-    ::-webkit-scrollbar {
-      width: 0;
-      height: 0;
-    }
-    .photo-item{
-      position: relative;
-      width: 150px;
-      height: 150px;
-      background-color: rgb(24,24,28);
-      margin-bottom: 10px;
-      margin-right: 10px;
-      cursor: pointer;
-      .select-div{
-        position: absolute;
-        bottom: 0px;
-        height: 20px;
-        width: 100%;
-        height: 30px;
-        background-color: #00000075;
+    .menu-div{
+      width: 260px;
+      border-right: 1px solid #E9E9E9;
+      border-bottom: 1px solid #E9E9E9;
+      .menu-title{
+        height: 63px;
         display: flex;
         align-items: center;
-        justify-content: center;
+        padding-left: 45px;
+        .menu-title-icon{
+          width: 18px;
+          height: 16px;
+          background-image: url('/public/photomodal/menu_title_icon.png');
+          background-size: 100% 100%;
+          margin-right: 8px;
+        }
+        .menu-title-span{
+          font-family: 'PingFangSC-Regular';
+          font-weight: 400;
+          font-size: 18px;
+          color: #333333;
+          line-height: 25px;
+          margin-right: 40px;
+        }
+      }
+      .menu-list{
+        height: 567px;
+        overflow: auto;
+        scrollbar-width: none; 
+        ::-webkit-scrollbar {
+          width: 0;
+          height: 0;
+        }
+        .menu-item{
+          height: 40px;
+          display: flex;
+          align-items: center;
+          padding-left: 91px;
+          cursor: pointer;
+          .menu-item-icon{
+            width: 18px;
+            height: 14px;
+            background-image: url('/public/photomodal/menu_item_icon.png');
+            background-size: 100% 100%;
+            margin-right: 11px;
+          }
+          .menu-item-span{
+            font-family: 'PingFangSC-Regular';
+            font-weight: 400;
+            font-size: 14px;
+            color: #333333;
+            line-height: 20px;
+          }
+        }
+        .menu-item:hover{
+          background-color: #F4F8FF;
+        }
+        .select-menu{
+          background-color: #F4F8FF;
+        }
+        .add-menu-div{
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 20px;
+        }
+      }
+    }
+    .show-list-div{
+      flex: 1;
+      padding-top: 34px;
+      padding-left: 31px;
+      position: relative;
+      border-bottom: 1px solid #E9E9E9;
+      .show-control{
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 34px;
+        .control-left{
+          display: flex;
+          .show-type{
+            display: flex;
+            margin-right: 14px;
+            .custom-radio-btn {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              height: 36px;
+              padding: 0 12px;
+              .anticon {
+                font-size: 20px;
+              }
+              span{
+                display: flex;
+              }
+            }
+          }
+          .select-sort{
+            :deep(.ant-select-selector){
+              height: 36px;
+              .ant-select-selection-item{
+                display: flex;
+                align-items: center;
+              }
+            }
+          }
+        }
+        .control-right{
+          padding-right: 74px;
+          .search-input{
+            :deep(.ant-input){
+              height: 36px;
+            }
+          }
+        }
+      }
+      .show-list{
+        height: 440px;
+        display: flex;
+        flex-wrap: wrap;
+        align-content: flex-start;
+        overflow: auto;
+        scrollbar-width: none;
+        ::-webkit-scrollbar {
+          width: 0;
+          height: 0;
+        }
+        .show-item{
+          width: 150px;
+          margin-right: 28px;
+          margin-bottom: 13px;
+          .item-image-div{
+            position: relative;
+            border-radius: 11px;
+            margin-bottom: 15px;
+            background-color: rgb(24,24,28);
+            :deep(.item-image){
+              width: 150px;
+              height: 150px;
+              object-fit: contain;
+              border-radius: 11px;
+            }
+            .image-size{
+              position: absolute;
+              bottom: 0px;
+              left: 0px;
+              width: 150px;
+              height: 30px;
+              background-color: rgba(22, 22, 22, 0.56);
+              border-bottom-right-radius: 11px;
+              border-bottom-left-radius: 11px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-family:  'PingFangSC-Regular';
+              font-weight: 400;
+              font-size: 14px;
+              color: #FFFFFF;
+              line-height: 20px;
+              user-select: none;
+            }
+            .select-image{
+              position: absolute;
+              top: 12px;
+              right: 14px;
+              :deep(.ant-checkbox-inner){
+                width: 23px;
+                height: 23px;
+              }
+            }
+          }
+          .item-span{
+            font-family: 'PingFangSC-Regular';
+            font-weight: 400;
+            font-size: 16px;
+            color: #040404;
+            line-height: 22px;
+            text-align: center;
+            font-style: normal;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+        .list-title{
+          width: 974px;
+          height: 50px;
+          display: flex;
+          align-items: center;
+          background: #F3F3F3;
+          font-family: 'PingFangSC-Medium';
+          font-weight: 500;
+          font-size: 18px;
+          color: #504E4E;
+          line-height: 25px;
+          font-style: normal;
+          text-transform: none;
+        }
+        .list-item{
+          width: 974px;
+          height: 110px;
+          display: flex;
+          align-items: center;
+          padding-left: 29px;
+          border-bottom: 1px solid #EFEFEF;
+          .list-select-image{
+            margin-right: 20px;
+            :deep(.ant-checkbox-inner){
+              width: 20px;
+              height: 20px;
+            }
+          }
+          :deep(.list-item-image){
+            width: 70px;
+            height: 70px;
+            object-fit: contain;
+            border-radius: 5px;
+            background-color: rgb(24,24,28);
+          }
+          .list-item-span{
+            width: 220px;
+            font-family: 'PingFangSC-Regular';
+            font-weight: 400;
+            font-size: 16px;
+            color: #040404;
+            line-height: 22px;
+            font-style: normal;
+            margin-left: 20px;
+            margin-right: 51px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          .list-item-size{
+            width: 138px;
+            font-family: 'PingFangSC-Regular';
+            font-weight: 400;
+            font-size: 16px;
+            color: #171717;
+            line-height: 22px;
+            text-align: center;
+            font-style: normal;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          .list-item-time{
+            font-family: 'PingFangSC-Regular';
+            font-weight: 400;
+            font-size: 16px;
+            color: #171717;
+            line-height: 22px;
+            text-align: center;
+            font-style: normal;
+            margin-left: 60px;
+          }
+        }
+        .list-content{
+          height: 388px;
+          overflow: auto;
+          scrollbar-width: none;
+          ::-webkit-scrollbar {
+            width: 0;
+            height: 0;
+          }
+        }
+      }
+      .pagination-div{
+        height: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: end;
+        padding-right: 73px;
       }
     }
   }
@@ -199,6 +623,7 @@ const addPhotoToList = () =>{
     display: flex;
     align-items: center;
     justify-content: flex-end;
+    padding-right: 73px;
   }
 }
 </style>
diff --git a/src/views/chart/ContentCharts/components/PhotoModal/util.ts b/src/views/chart/ContentCharts/components/PhotoModal/util.ts
new file mode 100644
index 0000000..6c0ce51
--- /dev/null
+++ b/src/views/chart/ContentCharts/components/PhotoModal/util.ts
@@ -0,0 +1,8 @@
+export const selectSortOptions = [
+  { label: '最近上传在前', value: '1' },
+  { label: '最近上传在后', value: '2' },
+  { label: '最近更新在前', value: '3' },
+  { label: '最近更新在后', value: '4' },
+  { label: '按照文件名升序', value: '5' },
+  { label: '按照文件名降序', value: '6' },
+]
\ No newline at end of file
diff --git a/src/views/chart/ContentCharts/hooks/useAside.hook.ts b/src/views/chart/ContentCharts/hooks/useAside.hook.ts
index 8ea2ab1..90c3f35 100644
--- a/src/views/chart/ContentCharts/hooks/useAside.hook.ts
+++ b/src/views/chart/ContentCharts/hooks/useAside.hook.ts
@@ -1,62 +1,60 @@
-import { ref, watch, computed } from 'vue'
-import { icon } from '@/plugins'
-import { renderLang, renderIcon } from '@/utils'
-import { themeColor, setItem, getCharts } from './useLayout.hook'
-import { PackagesCategoryEnum, PackagesCategoryName, ConfigType } from '@/packages/index.d'
-import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
-import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { ref, watch, computed } from 'vue';
+import { icon } from '@/plugins';
+import { renderLang, renderIcon } from '@/utils';
+import { themeColor, setItem, getCharts } from './useLayout.hook';
+import { PackagesCategoryEnum, PackagesCategoryName, ConfigType } from '@/packages/index.d';
+import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore';
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d';
+
 // 图标
-const { AirPlaneOutlineIcon, ImageIcon, BarChartIcon } = icon.ionicons5
-const { TableSplitIcon, RoadmapIcon, ChartPieIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon
+const { AirPlaneOutlineIcon, ImageIcon, BarChartIcon, GridIcon } = icon.ionicons5;
+const { TableSplitIcon, RoadmapIcon, ChartPieIcon, SpellCheckIcon, GraphicalDataFlowIcon } =
+  icon.carbon;
 
 // 图表
 export type MenuOptionsType = {
-  key: string
-  icon: ReturnType<typeof renderIcon>
-  label: ReturnType<typeof renderLang>
-  list: ConfigType[]
-}
+  key: string;
+  icon: ReturnType<typeof renderIcon>;
+  label: ReturnType<typeof renderLang>;
+  list: ConfigType[];
+};
 
 const packagesListObj = {
   [PackagesCategoryEnum.CHARTS]: {
     icon: renderIcon(RoadmapIcon),
-    label: PackagesCategoryName.CHARTS
+    label: PackagesCategoryName.CHARTS,
   },
   [PackagesCategoryEnum.VCHART]: {
     icon: renderIcon(ChartPieIcon),
-    label: PackagesCategoryName.VCHART
+    label: PackagesCategoryName.VCHART,
   },
   [PackagesCategoryEnum.INFORMATIONS]: {
     icon: renderIcon(SpellCheckIcon),
-    label: PackagesCategoryName.INFORMATIONS
+    label: PackagesCategoryName.INFORMATIONS,
   },
   [PackagesCategoryEnum.TABLES]: {
     icon: renderIcon(TableSplitIcon),
-    label: PackagesCategoryName.TABLES
+    label: PackagesCategoryName.TABLES,
   },
   [PackagesCategoryEnum.DECORATES]: {
     icon: renderIcon(GraphicalDataFlowIcon),
-    label: PackagesCategoryName.DECORATES
+    label: PackagesCategoryName.DECORATES,
   },
   [PackagesCategoryEnum.PHOTOS]: {
     icon: renderIcon(ImageIcon),
-    label: PackagesCategoryName.PHOTOS
+    label: PackagesCategoryName.PHOTOS,
   },
   [PackagesCategoryEnum.ICONS]: {
     icon: renderIcon(AirPlaneOutlineIcon),
-    label: PackagesCategoryName.ICONS
+    label: PackagesCategoryName.ICONS,
   },
   [PackagesCategoryEnum.CUSTOM]: {
     icon: renderIcon(AirPlaneOutlineIcon),
-    label: PackagesCategoryName.CUSTOM
-  },
-  [PackagesCategoryEnum.DIY]: {
-    icon: renderIcon(AirPlaneOutlineIcon),
-    label: PackagesCategoryName.DIY
+    label: PackagesCategoryName.CUSTOM,
   },
   [PackagesCategoryEnum.UNITS]: {
     icon: renderIcon(AirPlaneOutlineIcon),
-    label: PackagesCategoryName.UNITS
+    label: PackagesCategoryName.UNITS,
   },
   [PackagesCategoryEnum.ZHIGAN]: {
     icon: renderIcon(AirPlaneOutlineIcon),
@@ -66,14 +64,14 @@ const packagesListObj = {
     icon: renderIcon(AirPlaneOutlineIcon),
     label: PackagesCategoryName.MAPICONS
   }
-}
+};
 
 export const useAsideHook = () => {
-  const packagesStore = usePackagesStore()
-  const menuOptions: MenuOptionsType[] = []
+  const packagesStore = usePackagesStore();
+  const menuOptions: MenuOptionsType[] = [];
 
   // 处理列表
-  const handlePackagesList = () => {
+  const handlePackagesList = async () => {
     for (const val in packagesStore.getPackagesList) {
       menuOptions.push({
         key: val,
@@ -82,30 +80,29 @@ export const useAsideHook = () => {
         // @ts-ignore
         label: packagesListObj[val].label,
         // @ts-ignore
-        list: packagesStore.getPackagesList[val]
-      })
+        list: packagesStore.getPackagesList[val],
+      });
     }
-  }
-  handlePackagesList()
-
+  };
+  handlePackagesList();
   // 记录选中值
-  let beforeSelect: string = menuOptions[0]['key']
-  const selectValue = ref<string>(menuOptions[0]['key'])
+  let beforeSelect: string = menuOptions[0]['key'];
+  const selectValue = ref<string>(menuOptions[0]['key']);
 
   // 选中的对象值
-  const selectOptions = ref(menuOptions[0])
+  const selectOptions = ref(menuOptions[0]);
 
   // 点击 item
   const clickItemHandle = (key: string, item: any) => {
-    selectOptions.value = item
+    selectOptions.value = item;
     // 处理折叠
     if (beforeSelect === key) {
-      setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value, false)
+      setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value, false);
     } else {
-      setItem(ChartLayoutStoreEnum.CHARTS, true, false)
+      setItem(ChartLayoutStoreEnum.CHARTS, true, false);
     }
-    beforeSelect = key
-  }
+    beforeSelect = key;
+  };
 
   return {
     getCharts,
@@ -114,6 +111,6 @@ export const useAsideHook = () => {
     selectOptions,
     selectValue,
     clickItemHandle,
-    menuOptions
-  }
-}
+    menuOptions,
+  };
+};
diff --git a/src/views/chart/ContentCharts/index.vue b/src/views/chart/ContentCharts/index.vue
index 50b198d..de801ea 100644
--- a/src/views/chart/ContentCharts/index.vue
+++ b/src/views/chart/ContentCharts/index.vue
@@ -1,6 +1,12 @@
 <template>
   <!-- 左侧所有组件的展示列表 -->
-  <content-box class="go-content-charts" :class="{ scoped: !getCharts }" title="组件" :depth="1" :backIcon="false">
+  <content-box
+    class="go-content-charts"
+    :class="{ scoped: !getCharts }"
+    title="组件"
+    :depth="1"
+    :backIcon="false"
+  >
     <template #icon>
       <n-icon size="14" :depth="2">
         <bar-chart-icon></bar-chart-icon>
@@ -8,7 +14,7 @@
     </template>
 
     <template #top-right>
-      <charts-search v-show="getCharts" :menuOptions="menuOptions"></charts-search>
+      <charts-search v-show="getCharts" :menuOptions="menuOptionsList"></charts-search>
     </template>
     <!-- 图表 -->
     <aside>
@@ -16,13 +22,19 @@
         <n-menu
           class="menu-width"
           v-model:value="selectValue"
-          :options="menuOptions"
+          :options="menuOptionsList"
           :icon-size="16"
           :indent="18"
           @update:value="clickItemHandle"
         ></n-menu>
         <div class="menu-component-box">
-          <go-skeleton :load="!selectOptions" round text :repeat="2" style="width: 90%"></go-skeleton>
+          <go-skeleton
+            :load="!selectOptions"
+            round
+            text
+            :repeat="2"
+            style="width: 90%"
+          ></go-skeleton>
           <charts-option-content
             v-if="selectOptions"
             :selectOptions="selectOptions"
@@ -32,11 +44,12 @@
       </div>
     </aside>
   </content-box>
-  <a-modal 
+  <a-modal
+    class="photo-control-modal"
     v-model:open="photoModalStateStore.getOpen"
-    width="1200px"
-    :okButtonProps="{ style: { display: 'none' } }"
-    :cancelButtonProps="{ style: { display: 'none' } }"
+    width="1340px"
+    style="top: 90px"
+    :footer="null"
     :closable="false"
   >
     <PhotoModal />
@@ -44,74 +57,120 @@
 </template>
 
 <script setup lang="ts">
-import { ContentBox } from '../ContentBox/index'
-import { ChartsOptionContent } from './components/ChartsOptionContent'
-import { ChartsSearch } from './components/ChartsSearch'
-import { useAsideHook } from './hooks/useAside.hook'
-import PhotoModal from './components/PhotoModal/index.vue'
-import { photoModalStore } from '@/store/modules/photoModal'
+  import { ContentBox } from '../ContentBox/index';
+  import { ChartsOptionContent } from './components/ChartsOptionContent';
+  import { ChartsSearch } from './components/ChartsSearch';
+  import { useAsideHook } from './hooks/useAside.hook';
+  import PhotoModal from './components/PhotoModal/index.vue';
+  import { photoModalStore } from '@/store/modules/photoModal';
+  import { onMounted, ref } from 'vue';
+  import { customComponentList } from '@/api/path/project.api';
+  import { icon } from '@/plugins';
+  import { renderIcon } from '@/utils';
 
-const { getCharts, BarChartIcon, themeColor, selectOptions, selectValue, clickItemHandle, menuOptions } = useAsideHook()
-const photoModalStateStore = photoModalStore()
+  const { GridIcon } = icon.ionicons5;
+  const {
+    getCharts,
+    BarChartIcon,
+    themeColor,
+    selectOptions,
+    selectValue,
+    clickItemHandle,
+    menuOptions,
+  } = useAsideHook();
+  const photoModalStateStore = photoModalStore();
+  const menuOptionsList = ref(menuOptions);
+  const getCustomComponentList = async () => {
+    const data = await customComponentList({
+      page: 1,
+      limit: 999,
+    });
+    let list = [];
+    data.items.forEach((item) => {
+      let obj = JSON.parse(item.content);
+      list.push({
+        ...obj,
+        id: item.id,
+      });
+    });
+    return list;
+  };
+  onMounted(async () => {
+    getCustomComponentList().then((res) => {
+      menuOptionsList.value.push({
+        key: 'Group',
+        label: '分组',
+        icon: renderIcon(GridIcon),
+        list: res,
+      });
+    });
+  });
 </script>
 
 <style lang="scss" scoped>
-/* 整体宽度 */
-$width: 330px;
-/* 列表的宽度 */
-$widthScoped: 65px;
-/* 此高度与 ContentBox 组件关联 */
-$topHeight: 40px;
+  /* 整体宽度 */
+  $width: 330px;
+  /* 列表的宽度 */
+  $widthScoped: 65px;
+  /* 此高度与 ContentBox 组件关联 */
+  $topHeight: 40px;
 
-@include go(content-charts) {
-  width: $width;
-  @extend .go-transition;
-  &.scoped,
-  .menu-width {
-    width: $widthScoped;
-  }
-  .menu-width-box {
-    display: flex;
-    height: calc(100vh - #{$--header-height} - #{$topHeight});
+  @include go(content-charts) {
+    width: $width;
+    @extend .go-transition;
+    &.scoped,
     .menu-width {
-      flex-shrink: 0;
-      @include fetch-bg-color('background-color2');
+      width: $widthScoped;
     }
-    .menu-component-box {
-      flex-shrink: 0;
-      width: $width - $widthScoped;
-      overflow: hidden;
+    .menu-width-box {
+      display: flex;
+      height: calc(100vh - #{$--header-height} - #{$topHeight});
+      .menu-width {
+        flex-shrink: 0;
+        @include fetch-bg-color('background-color2');
+      }
+      .menu-component-box {
+        flex-shrink: 0;
+        width: $width - $widthScoped;
+        overflow: hidden;
+      }
     }
-  }
-  @include deep() {
-    .menu-width {
-      .n-menu-item {
-        height: auto !important;
-        &.n-menu-item--selected {
-          &::after {
-            content: '';
-            position: absolute;
-            left: 2px;
-            top: 0;
-            height: 100%;
-            width: 3px;
-            background-color: v-bind('themeColor');
-            border-top-right-radius: 3px;
-            border-bottom-right-radius: 3px;
+    @include deep() {
+      .menu-width {
+        .n-menu-item {
+          height: auto !important;
+          &.n-menu-item--selected {
+            &::after {
+              content: '';
+              position: absolute;
+              left: 2px;
+              top: 0;
+              height: 100%;
+              width: 3px;
+              background-color: v-bind('themeColor');
+              border-top-right-radius: 3px;
+              border-bottom-right-radius: 3px;
+            }
+          }
+          .n-menu-item-content {
+            display: flex;
+            flex-direction: column;
+            padding: 6px 12px !important;
+            font-size: 14px !important;
+          }
+          .n-menu-item-content__icon {
+            font-size: 18px !important;
+            margin-right: 0 !important;
           }
-        }
-        .n-menu-item-content {
-          display: flex;
-          flex-direction: column;
-          padding: 6px 12px !important;
-          font-size: 14px !important;
-        }
-        .n-menu-item-content__icon {
-          font-size: 18px !important;
-          margin-right: 0 !important;
         }
       }
     }
   }
-}
+</style>
+<style lang="scss">
+  .photo-control-modal {
+    .ant-modal-content {
+      padding: 0px;
+    }
+  }
 </style>
diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteractionConfiguration/components/EventItem.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteractionConfiguration/components/EventItem.vue
index bf71b39..0b2506e 100644
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteractionConfiguration/components/EventItem.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteractionConfiguration/components/EventItem.vue
@@ -128,6 +128,7 @@
   import { funSelectOptions } from '@/hooks/ceshiFun.hook';
 
   const { chartEditStore } = useTargetData();
+
   const routeOptions = ref([]);
   const skipTypeOptions = ref([
     {
@@ -144,6 +145,7 @@
     },
   ]);
   const publishOptions = ref([]);
+
   const props = defineProps({
     eventData: {
       type: Object,
@@ -240,12 +242,18 @@
     publishOptions.value = data.items.map((item) => {
       return {
         label: item.projectName,
-        value: previewPath(item.id),
+        // value: previewPath(item.id),
+        value: item.id,
       };
     });
   };
   onMounted(() => {
-    routeOptions.value = [];
+    routeOptions.value = [
+      {
+        label: '首页',
+        value: '/dashboard/analysis',
+      },
+    ];
     getRouteList();
     getPublishedPageList();
   });
diff --git a/src/views/chart/hooks/useContextMenu.hook.ts b/src/views/chart/hooks/useContextMenu.hook.ts
index e0aa782..8aaeaea 100644
--- a/src/views/chart/hooks/useContextMenu.hook.ts
+++ b/src/views/chart/hooks/useContextMenu.hook.ts
@@ -1,11 +1,11 @@
-import { ref, nextTick, toRaw } from 'vue'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
-import { renderIcon, loadingError } from '@/utils'
-import { icon } from '@/plugins'
-import { MenuOptionsItemType } from './useContextMenu.hook.d'
-import { MenuEnum } from '@/enums/editPageEnum'
-import cloneDeep from 'lodash/cloneDeep'
+import { ref, nextTick, toRaw } from 'vue';
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d';
+import { renderIcon, loadingError } from '@/utils';
+import { icon } from '@/plugins';
+import { MenuOptionsItemType } from './useContextMenu.hook.d';
+import { MenuEnum } from '@/enums/editPageEnum';
+import cloneDeep from 'lodash/cloneDeep';
 
 const {
   CopyIcon,
@@ -17,11 +17,13 @@ const {
   LockOpenOutlineIcon,
   LockClosedOutlineIcon,
   EyeOutlineIcon,
-  EyeOffOutlineIcon
-} = icon.ionicons5
-const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon, Carbon3DSoftwareIcon, Carbon3DCursorIcon } = icon.carbon
+  EyeOffOutlineIcon,
+  GridIcon,
+} = icon.ionicons5;
+const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon, Carbon3DSoftwareIcon, Carbon3DCursorIcon } =
+  icon.carbon;
 
-const chartEditStore = useChartEditStore()
+const chartEditStore = useChartEditStore();
 
 /**
  * 分割线
@@ -31,9 +33,9 @@ const chartEditStore = useChartEditStore()
 export const divider = (n: number = 3) => {
   return {
     type: 'divider',
-    key: `d${n}`
-  }
-}
+    key: `d${n}`,
+  };
+};
 
 // * 默认单组件选项
 export const defaultOptions: MenuOptionsItemType[] = [
@@ -41,93 +43,99 @@ export const defaultOptions: MenuOptionsItemType[] = [
     label: '锁定',
     key: MenuEnum.LOCK,
     icon: renderIcon(LockClosedOutlineIcon),
-    fnHandle: chartEditStore.setLock
+    fnHandle: chartEditStore.setLock,
   },
   {
     label: '解锁',
     key: MenuEnum.UNLOCK,
     icon: renderIcon(LockOpenOutlineIcon),
-    fnHandle: chartEditStore.setUnLock
+    fnHandle: chartEditStore.setUnLock,
   },
   {
     label: '隐藏',
     key: MenuEnum.HIDE,
     icon: renderIcon(EyeOffOutlineIcon),
-    fnHandle: chartEditStore.setHide
+    fnHandle: chartEditStore.setHide,
   },
   {
     label: '显示',
     key: MenuEnum.SHOW,
     icon: renderIcon(EyeOutlineIcon),
-    fnHandle: chartEditStore.setShow
+    fnHandle: chartEditStore.setShow,
   },
   {
     type: 'divider',
-    key: 'd0'
+    key: 'd0',
   },
   {
     label: '复制',
     key: MenuEnum.COPY,
     icon: renderIcon(CopyIcon),
-    fnHandle: chartEditStore.setCopy
+    fnHandle: chartEditStore.setCopy,
   },
   {
     label: '剪切',
     key: MenuEnum.CUT,
     icon: renderIcon(CutIcon),
-    fnHandle: chartEditStore.setCut
+    fnHandle: chartEditStore.setCut,
   },
   {
     label: '粘贴',
     key: MenuEnum.PARSE,
     icon: renderIcon(ClipboardOutlineIcon),
-    fnHandle: chartEditStore.setParse
+    fnHandle: chartEditStore.setParse,
   },
   {
     type: 'divider',
-    key: 'd1'
+    key: 'd1',
   },
   {
     label: '置顶',
     key: MenuEnum.TOP,
     icon: renderIcon(UpToTopIcon),
-    fnHandle: chartEditStore.setTop
+    fnHandle: chartEditStore.setTop,
   },
   {
     label: '置底',
     key: MenuEnum.BOTTOM,
     icon: renderIcon(DownToBottomIcon),
-    fnHandle: chartEditStore.setBottom
+    fnHandle: chartEditStore.setBottom,
   },
   {
     label: '上移',
     key: MenuEnum.UP,
     icon: renderIcon(ChevronUpIcon),
-    fnHandle: chartEditStore.setUp
+    fnHandle: chartEditStore.setUp,
   },
   {
     label: '下移',
     key: MenuEnum.DOWN,
     icon: renderIcon(ChevronDownIcon),
-    fnHandle: chartEditStore.setDown
+    fnHandle: chartEditStore.setDown,
   },
   {
     type: 'divider',
-    key: 'd2'
+    key: 'd2',
   },
   {
     label: '清空剪贴板',
     key: MenuEnum.CLEAR,
     icon: renderIcon(PaintBrushIcon),
-    fnHandle: chartEditStore.setRecordChart
+    fnHandle: chartEditStore.setRecordChart,
   },
   {
     label: '删除',
     key: MenuEnum.DELETE,
     icon: renderIcon(TrashIcon),
-    fnHandle: chartEditStore.removeComponentList
-  }
-]
+    fnHandle: chartEditStore.removeComponentList,
+  },
+  {
+    label: '保存至分组',
+    key: MenuEnum.SAVETOGROUP,
+    icon: renderIcon(GridIcon),
+    fnHandle: chartEditStore.saveToGroup,
+  },
+];
 
 // * 默认多选组件选项
 export const defaultMultiSelectOptions: MenuOptionsItemType[] = [
@@ -135,18 +143,18 @@ export const defaultMultiSelectOptions: MenuOptionsItemType[] = [
     label: '创建分组',
     key: MenuEnum.GROUP,
     icon: renderIcon(Carbon3DSoftwareIcon),
-    fnHandle: chartEditStore.setGroup
+    fnHandle: chartEditStore.setGroup,
   },
   {
     label: '解除分组',
     key: MenuEnum.UN_GROUP,
     icon: renderIcon(Carbon3DCursorIcon),
-    fnHandle: chartEditStore.setUnGroup
-  }
-]
+    fnHandle: chartEditStore.setUnGroup,
+  },
+];
 
 // * 无数据传递拥有的选项
-const defaultNoItemKeys = [MenuEnum.PARSE, MenuEnum.CLEAR]
+const defaultNoItemKeys = [MenuEnum.PARSE, MenuEnum.CLEAR];
 
 /**
  * * 挑选选项
@@ -155,13 +163,13 @@ const defaultNoItemKeys = [MenuEnum.PARSE, MenuEnum.CLEAR]
  * @returns
  */
 const pickOption = (options: MenuOptionsItemType[], pickList?: MenuEnum[]) => {
-  if (!pickList) return options
-  const list: MenuOptionsItemType[] = []
-  pickList.forEach(e => {
-    list.push(...options.filter(op => op.key === e))
-  })
-  return list
-}
+  if (!pickList) return options;
+  const list: MenuOptionsItemType[] = [];
+  pickList.forEach((e) => {
+    list.push(...options.filter((op) => op.key === e));
+  });
+  return list;
+};
 
 /**
  * * 去除选项
@@ -170,14 +178,14 @@ const pickOption = (options: MenuOptionsItemType[], pickList?: MenuEnum[]) => {
  * @returns
  */
 const hideOption = (options: MenuOptionsItemType[], hideList?: MenuEnum[]) => {
-  if (!hideList) return options
+  if (!hideList) return options;
   return options.filter((op: MenuOptionsItemType) => {
-    return hideList.findIndex((e: MenuEnum) => e !== op.key) !== -1
-  })
-}
+    return hideList.findIndex((e: MenuEnum) => e !== op.key) !== -1;
+  });
+};
 
 // * 右键内容
-const menuOptions = ref<MenuOptionsItemType[]>([])
+const menuOptions = ref<MenuOptionsItemType[]>([]);
 
 // * 右键处理
 const handleContextMenu = (
@@ -189,51 +197,57 @@ const handleContextMenu = (
   // 隐藏选项列表
   hideOptionsList?: MenuEnum[],
   // 挑选选项列表
-  pickOptionsList?: MenuEnum[]
+  pickOptionsList?: MenuEnum[],
 ) => {
-  e.stopPropagation()
-  e.preventDefault()
+  e.stopPropagation();
+  e.preventDefault();
 
-  let target = e.target
+  let target = e.target;
   while (target instanceof SVGElement) {
-    target = target.parentNode
+    target = target.parentNode;
   }
 
-  chartEditStore.setTargetSelectChart(targetInstance && targetInstance.id)
+  chartEditStore.setTargetSelectChart(targetInstance && targetInstance.id);
 
   // 隐藏旧列表
-  chartEditStore.setRightMenuShow(false)
+  chartEditStore.setRightMenuShow(false);
 
   // * 多选默认选项
   if (chartEditStore.getTargetChart.selectId.length > 1) {
-    menuOptions.value = defaultMultiSelectOptions
+    menuOptions.value = defaultMultiSelectOptions;
   } else {
     // * 单选默认选项
-    menuOptions.value = defaultOptions
+    menuOptions.value = defaultOptions;
   }
 
   if (!targetInstance) {
-    menuOptions.value = pickOption(toRaw(menuOptions.value), defaultNoItemKeys)
+    menuOptions.value = pickOption(toRaw(menuOptions.value), defaultNoItemKeys);
   }
   if (hideOptionsList) {
-    menuOptions.value = hideOption([...defaultMultiSelectOptions, divider(), ...defaultOptions], hideOptionsList)
+    menuOptions.value = hideOption(
+      [...defaultMultiSelectOptions, divider(), ...defaultOptions],
+      hideOptionsList,
+    );
   }
   if (pickOptionsList) {
-    menuOptions.value = pickOption([...defaultMultiSelectOptions, divider(), ...defaultOptions], pickOptionsList)
+    menuOptions.value = pickOption(
+      [...defaultMultiSelectOptions, divider(), ...defaultOptions],
+      pickOptionsList,
+    );
   }
   if (optionsHandle) {
     // 自定义函数能够拿到当前选项和所有选项
     menuOptions.value = optionsHandle(
       cloneDeep(toRaw(menuOptions.value)),
       [...defaultMultiSelectOptions, ...defaultOptions],
-      targetInstance
-    )
+      targetInstance,
+    );
   }
   nextTick().then(() => {
-    chartEditStore.setMousePosition(e.clientX, e.clientY)
-    chartEditStore.setRightMenuShow(true)
-  })
-}
+    chartEditStore.setMousePosition(e.clientX, e.clientY);
+    chartEditStore.setRightMenuShow(true);
+  });
+};
 
 /**
  * * 右键hook
@@ -242,28 +256,30 @@ const handleContextMenu = (
  */
 export const useContextMenu = () => {
   // 设置默认项
-  menuOptions.value = defaultOptions
+  menuOptions.value = defaultOptions;
 
   // * 失焦
   const onClickOutSide = () => {
-    chartEditStore.setRightMenuShow(false)
-  }
+    chartEditStore.setRightMenuShow(false);
+  };
 
   // * 事件处理
   const handleMenuSelect = (key: string) => {
-    chartEditStore.setRightMenuShow(false)
-    const targetItem: MenuOptionsItemType[] = menuOptions.value.filter((e: MenuOptionsItemType) => e.key === key)
+    chartEditStore.setRightMenuShow(false);
+    const targetItem: MenuOptionsItemType[] = menuOptions.value.filter(
+      (e: MenuOptionsItemType) => e.key === key,
+    );
 
     menuOptions.value.forEach((e: MenuOptionsItemType) => {
       if (e.key === key) {
         if (e.fnHandle) {
-          e.fnHandle()
-          return
+          e.fnHandle();
+          return;
         }
-        if (!targetItem) loadingError()
+        if (!targetItem) loadingError();
       }
-    })
-  }
+    });
+  };
 
   return {
     menuOptions,
@@ -272,6 +288,6 @@ export const useContextMenu = () => {
     handleContextMenu,
     onClickOutSide,
     handleMenuSelect,
-    mousePosition: chartEditStore.getMousePosition
-  }
-}
+    mousePosition: chartEditStore.getMousePosition,
+  };
+};
diff --git a/src/views/demo/system/homepage/index.vue b/src/views/demo/system/homepage/index.vue
index 1161313..c1c4b70 100644
--- a/src/views/demo/system/homepage/index.vue
+++ b/src/views/demo/system/homepage/index.vue
@@ -63,7 +63,7 @@
     publishOptions.value = data.items.map((item) => {
       return {
         label: item.projectName,
-        value: previewPath(item.id),
+        value: item.id,
       };
     });
   };
diff --git a/src/views/preview/suspenseIndex.vue b/src/views/preview/suspenseIndex.vue
index a12de95..5aea605 100644
--- a/src/views/preview/suspenseIndex.vue
+++ b/src/views/preview/suspenseIndex.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue';
+  import { computed, watch } from 'vue';
   import { PreviewRenderList } from './components/PreviewRenderList';
   import { getFilterStyle, setTitle } from '@/utils';
   import {
@@ -45,8 +45,10 @@
   import { PreviewScaleEnum } from '@/enums/styleEnum';
   import type { ChartEditStorageType } from './index.d';
   import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+  import { useRoute } from 'vue-router';
 
   // const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
+  const route = useRoute();
 
   await getSessionStorageInfo();
   const chartEditStore = useChartEditStore() as unknown as ChartEditStorageType;
@@ -72,6 +74,12 @@
 
   // 开启键盘监听
   keyRecordHandle();
+  watch(
+    () => route.fullPath,
+    (newValue) => {
+      location.reload();
+    },
+  );
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/project/items/components/ProjectItemsCard/index.vue b/src/views/project/items/components/ProjectItemsCard/index.vue
index 72ebe60..3f60f3e 100644
--- a/src/views/project/items/components/ProjectItemsCard/index.vue
+++ b/src/views/project/items/components/ProjectItemsCard/index.vue
@@ -62,7 +62,7 @@
                   </n-dropdown>
                 </template>
 
-                <n-tooltip v-else placement="bottom" trigger="hover">
+                <n-tooltip v-else placement="bottom" trigger="hover" v-if="!(item.key === 'copyUrl') || (item.key === 'copyUrl' && cardData.release)">
                   <template #trigger>
                     <n-button size="small" @click="handleSelect(item.key)">
                       <template #icon>
@@ -84,7 +84,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, PropType } from 'vue';
-  import { renderIcon, renderLang, requireErrorImg } from '@/utils';
+  import { renderIcon, renderLang, requireErrorImg, previewPath } from '@/utils';
   import { icon } from '@/plugins';
   import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn';
   import { Chartype } from '../../index.d';
@@ -115,6 +115,11 @@
       key: 'edit',
       icon: renderIcon(HammerIcon),
     },
+    {
+      label: renderLang('global.r_copy_url'),
+      key: 'copyUrl',
+      icon: renderIcon(CopyIcon),
+    },
     {
       lable: renderLang('global.r_more'),
       key: 'select',
@@ -156,6 +161,9 @@
       case 'edit':
         editHandle();
         break;
+      case 'copyUrl':
+        copyUrl()
+        break
     }
   };
 
@@ -187,6 +195,21 @@
   const requireUrl = (name: string) => {
     return new URL(`../../../../../assets/images/${name}`, import.meta.url).href;
   };
+  // 复制发布的地址
+  const copyUrl = () => {
+    try{
+      let url = previewPath(props.cardData.id)
+      const textarea = document.createElement("textarea");
+      textarea.value = url;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+      window['$message'].success('地址复制成功')
+    }catch(error){
+      window['$message'].error('地址复制失败')
+    }
+  }
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/project/items/components/ProjectItemsList/hooks/useData.hook.ts b/src/views/project/items/components/ProjectItemsList/hooks/useData.hook.ts
index cf337a0..091dbf7 100644
--- a/src/views/project/items/components/ProjectItemsList/hooks/useData.hook.ts
+++ b/src/views/project/items/components/ProjectItemsList/hooks/useData.hook.ts
@@ -18,6 +18,7 @@ export const useDataListInit = () => {
     count: 10,
   });
 
+  const state = ref('0')
   const list = ref<ChartList>([]);
   // const list = ref<ChartList>([
   //   {
@@ -58,6 +59,7 @@ export const useDataListInit = () => {
     const res = await projectListApi({
       page: paginat.page,
       limit: paginat.limit,
+      state: state.value == '0'? '': state.value,
     });
     if (res && res.items) {
       const { total } = res as any; // 这里的count与data平级，不在Response结构中
@@ -87,6 +89,13 @@ export const useDataListInit = () => {
     fetchList();
   };
 
+  // 修改筛选条件
+  const changeState = (value) => {
+    console.log(111,value)
+    state.value = value
+    fetchList();
+  }
+
   // 修改大小
   const changeSize = (_size: number) => {
     paginat.limit = _size;
@@ -147,10 +156,12 @@ export const useDataListInit = () => {
     loading,
     paginat,
     list,
+    state,
     fetchList,
     releaseHandle,
     changeSize,
     changePage,
     deleteHandle,
+    changeState,
   };
 };
diff --git a/src/views/project/items/components/ProjectItemsList/index.vue b/src/views/project/items/components/ProjectItemsList/index.vue
index 76edf9d..a43a629 100644
--- a/src/views/project/items/components/ProjectItemsList/index.vue
+++ b/src/views/project/items/components/ProjectItemsList/index.vue
@@ -1,12 +1,23 @@
 <template>
   <div class="go-items-list">
+    <div class="filter">
+      <a-select
+        v-model:value="state"
+        style="width: 200px"
+        @change="changeState"
+      >
+        <a-select-option value="0">全部</a-select-option>
+        <a-select-option value="1">已发布</a-select-option>
+        <a-select-option value="-1">未发布</a-select-option>
+      </a-select>
+    </div>
     <!-- 加载 -->
     <div v-show="loading">
       <go-loading></go-loading>
     </div>
     <!-- 列表 -->
-    <div v-show="!loading">
-      <n-grid :x-gap="20" :y-gap="20" cols="2 s:2 m:3 l:4 xl:4 xxl:4" responsive="screen">
+    <div v-show="!loading" style="height: calc(100vh - 230px); overflow: auto;">
+      <n-grid :x-gap="20" :y-gap="18" cols="2 s:2 m:3 l:4 xl:4 xxl:4" responsive="screen">
         <n-grid-item v-for="(item, index) in list" :key="item.id">
           <project-items-card
             :cardData="item"
@@ -54,7 +65,7 @@
   const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5;
   const { modalData, modalShow, closeModal, previewHandle, resizeHandle, editHandle } =
     useModalDataInit();
-  const { loading, paginat, list, changeSize, changePage, releaseHandle, deleteHandle } =
+  const { loading, paginat, list, state, changeSize, changePage, releaseHandle, deleteHandle, changeState } =
     useDataListInit();
 </script>
 
@@ -64,7 +75,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    min-height: calc(100vh - #{$--header-height} - 40px - 2px);
+    min-height: calc(100vh - #{$--header-height} - 40px - 40px);
     .list-content {
       position: relative;
       height: $contentHeight;
@@ -74,5 +85,10 @@
       justify-content: flex-end;
       margin-top: 20px;
     }
+    .filter{
+      display: flex;
+      justify-content: end;
+      margin-bottom: 10px;
+    }
   }
 </style>