Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo

2025-02-18 17:05:05 +08:00 · 2025-02-18 17:05:05 +08:00 · a0a2262339
parent 1ef7b68291 aa495a9cf1
commit a0a2262339
39 changed files with 1453 additions and 27 deletions
--- a/src/assets/images/chart/zhigan/LowerLeft.png
+++ b/src/assets/images/chart/zhigan/LowerLeft.png
--- a/src/assets/images/chart/zhigan/ModalCarousel.png
+++ b/src/assets/images/chart/zhigan/ModalCarousel.png
--- a/src/assets/images/chart/zhigan/ModalInfo.png
+++ b/src/assets/images/chart/zhigan/ModalInfo.png
--- a/src/assets/images/chart/zhigan/ModalVideo.png
+++ b/src/assets/images/chart/zhigan/ModalVideo.png
--- a/src/assets/images/chart/zhigan/component/lowerLeft.svg
+++ b/src/assets/images/chart/zhigan/component/lowerLeft.svg
@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="26px" height="28px" viewBox="0 0 26 28" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <linearGradient x1="87.055629%" y1="0%" x2="0%" y2="86.1698764%" id="linearGradient-1">
+            <stop stop-color="#00D586" offset="0%"></stop>
+            <stop stop-color="#00AB4E" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="6.17106015%" y1="0%" x2="67.7872653%" y2="117.560409%" id="linearGradient-2">
+            <stop stop-color="#007343" offset="0%"></stop>
+            <stop stop-color="#89E5A1" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1870, -733)">
+            <g id="可视化" transform="translate(-0.5, -1)">
+                <g id="模块" transform="translate(46, 88)">
+                    <g id="标题模块--右侧1" transform="translate(1450, 285)">
+                        <g id="底部背景" transform="translate(0, 0)">
+                            <g id="边框"
+                                transform="translate(199.8663, 194.0447) scale(-1, 1) translate(-199.8663, -194.0447)">
+                                <g id="编组-22" transform="translate(0, 361.9394)">
+                                    <polygon id="路径-11" fill="url(#linearGradient-1)"
+                                        transform="translate(3.6525, 22.4974) scale(1, -1) translate(-3.6525, -22.4974)"
+                                        points="0 18.8448966 0 26.1499885 7.30509189 18.8448966"></polygon>
+                                    <polygon id="装饰线段-" fill="url(#linearGradient-2)" fill-rule="nonzero"
+                                        points="3.65254594 3.65254594 3.65254594 11.0802231 14.2622788 22.4971686 20.9471886 22.4971686 24.4831325 26.1499885 12.6709441 26.1499885 12.1291089 25.566951 0.488499319 13.0411664 0 12.5155206 2.49903173e-11 -2.59476354e-14">
+                                    </polygon>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/src/packages/components/Icons/Default/Icon/index.vue
+++ b/src/packages/components/Icons/Default/Icon/index.vue
@ -7,14 +7,15 @@
      :rotate="rotate"
      @click="clickBtn"
      @dblclick="dblclickBtn"
-      @rightclick="rightclickBtn"
      @contextmenu="rightclickBtn"
+      @mouseenter="mouseenterBtn"
+      @mouseleave="mouseleaveBtn"
    />
  </div>
 </template>

 <script setup lang="ts">
-  import { PropType, toRefs, ref } from 'vue';
+  import { PropType, toRefs, ref, watch, onMounted } from 'vue';
  import { CreateComponentType } from '@/packages/index.d';
  import { GoIconify } from '@/components/GoIconify';
  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
@ -27,7 +28,7 @@
      required: true,
    },
  });
-
+  console.log(props.chartConfig.option);
  const { w, h } = toRefs(props.chartConfig.attr);
  const { dataset, color, size, rotate } = toRefs(props.chartConfig.option);
  // 单击交互
@ -36,6 +37,11 @@
  const dbclickElementItem = ref([]);
  // 右击交互
  const rightclickElementItem = ref([]);
+  // 鼠标移入交互
+  const mouseenterElementItem = ref([]);
+  // 鼠标移出交互
+  const mouseleaveElementItem = ref([]);
+
  const list = props.chartConfig.events.interactConfigEvents;
  for (let i = 0; i < list.length; i++) {
    if (list[i].type == 'click') {
@ -50,6 +56,14 @@
      for (let j = 0; j < list[i].movementList.length; j++) {
        rightclickElementItem.value.push(list[i].movementList[j]);
      }
+    } else if (list[i].type == 'mousein') {
+      for (let j = 0; j < list[i].movementList.length; j++) {
+        mouseenterElementItem.value.push(list[i].movementList[j]);
+      }
+    } else if (list[i].type == 'mouseout') {
+      for (let j = 0; j < list[i].movementList.length; j++) {
+        mouseleaveElementItem.value.push(list[i].movementList[j]);
+      }
    }
  }
  const clickBtn = () => {
@ -65,6 +79,14 @@
    event.preventDefault(); // 阻止默认的右键菜单
    eventHandlerHook(chartEditStore.getComponentList, rightclickElementItem.value);
  };
+  const mouseenterBtn = () => {
+    console.log('鼠标移入');
+    eventHandlerHook(chartEditStore.getComponentList, mouseenterElementItem.value);
+  };
+  const mouseleaveBtn = () => {
+    console.log('鼠标移出');
+    eventHandlerHook(chartEditStore.getComponentList, mouseleaveElementItem.value);
+  };
 </script>

 <style lang="scss" scoped>
--- a/src/packages/components/Informations/Mores/Image/config.ts
+++ b/src/packages/components/Informations/Mores/Image/config.ts
@ -10,7 +10,10 @@ export const option = {
  // 适应方式
  fit: 'contain',
  // 圆角
-  borderRadius: 10
+  borderRadius: 10,
+  photoMouseEventClose: false,
+  mouseSelectClose: false,
+  mouseCursor: 'default'
 }

 export default class Config extends PublicConfigClass implements CreateComponentType
--- a/src/packages/components/Informations/Mores/Image/config.vue
+++ b/src/packages/components/Informations/Mores/Image/config.vue
@ -22,6 +22,31 @@
        ></n-input-number>
      </setting-item>
    </setting-item-box>
+    <setting-item-box name="鼠标样式" :alone="true">
+      <setting-item>
+        <n-select
+          v-model:value="optionData.mouseCursor"
+          size="small"
+          :options="mouseCursor"
+        ></n-select>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="是否禁止选中属性" :alone="true">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.mouseSelectClose" size="small" />
+          <n-text>是否禁用</n-text>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="是否允许鼠标穿透事件" :alone="true">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.photoMouseEventClose" size="small" />
+          <n-text>是否允许</n-text>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
  </collapse-item>
 </template>

@ -64,4 +89,22 @@ const fitList = [
    label: 'none'
  },
 ]
+const mouseCursor = [
+  { value: 'default', label: 'default', },
+  { value: 'none', label: 'none', },
+  { value: 'context-menu', label: 'context-menu', },
+  { value: 'pointer', label: 'pointer', },
+  { value: 'help', label: 'help', },
+  { value: 'wait', label: 'wait', },
+  { value: 'progress', label: 'progress', },
+  { value: 'text', label: 'text', },
+  { value: 'vertical-text', label: 'vertical-text', },
+  { value: 'move', label: 'move', },
+  { value: 'grab', label: 'grab', },
+  { value: 'grabbing', label: 'grabbing', },
+  { value: 'move', label: 'move', },
+  { value: 'move', label: 'move', },
+  { value: 'move', label: 'move', },
+  { value: 'move', label: 'move', },
+]
 </script>
--- a/src/packages/components/Zhigan/Zhigan/HeadMoreButton/config.ts
+++ b/src/packages/components/Zhigan/Zhigan/HeadMoreButton/config.ts
@ -20,7 +20,7 @@ export const option = {

 export default class Config extends PublicConfigClass implements CreateComponentType {
  public key = HeadMoreButtonConfig.key
-  public attr = { ...chartInitConfig, w: 80, h: 40, zIndex: 5 }
+  public attr = { ...chartInitConfig, w: 80, h: 32, zIndex: 5 }
  public chartConfig = cloneDeep(HeadMoreButtonConfig)
  public option = cloneDeep(option)
 }
--- a/src/packages/components/Zhigan/Zhigan/LowerLeft/config.ts
+++ b/src/packages/components/Zhigan/Zhigan/LowerLeft/config.ts
@ -0,0 +1,21 @@
+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { LowerLeftConfig } from './index'
+
+export const option = {
+  imageStyle: {
+    imageWidth: 26,
+    imageHeight: 28,
+    bottom: 0,
+    right: 5,
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = LowerLeftConfig.key
+  public attr = { ...chartInitConfig, w: 400, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(LowerLeftConfig)
+  public option = cloneDeep(option)
+}
--- a/src/packages/components/Zhigan/Zhigan/LowerLeft/config.vue
+++ b/src/packages/components/Zhigan/Zhigan/LowerLeft/config.vue
@ -0,0 +1,52 @@
+<template>
+  <CollapseItem name="图标设置" :expanded="true">
+    <SettingItemBox name="属性设置">
+      <SettingItem name="图标宽度">
+        <n-input-number
+          v-model:value="optionData.imageStyle.imageWidth"
+          :min="0"
+          size="small"
+          placeholder="图标宽度"
+        />
+      </SettingItem>
+      <SettingItem name="图标高度">
+        <n-input-number
+          v-model:value="optionData.imageStyle.imageHeight"
+          :min="0"
+          size="small"
+          placeholder="图标高度"
+        />
+      </SettingItem>
+      <SettingItem name="图标距离右侧的距离">
+        <n-input-number
+          v-model:value="optionData.imageStyle.right"
+          :min="0"
+          size="small"
+          placeholder="高度"
+        />
+      </SettingItem>
+      <SettingItem name="图标距离底部的距离">
+        <n-input-number
+          v-model:value="optionData.imageStyle.bottom"
+          :min="0"
+          size="small"
+          placeholder="宽度"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+  import { PropType, watch, ref } from 'vue';
+  import { option } from './config';
+  import { cloneDeep } from 'lodash-es';
+  import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting';
+
+  const props = defineProps({
+    optionData: {
+      type: Object as PropType<typeof option>,
+      required: true,
+    },
+  });
+</script>
--- a/src/packages/components/Zhigan/Zhigan/LowerLeft/index.ts
+++ b/src/packages/components/Zhigan/Zhigan/LowerLeft/index.ts
@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const LowerLeftConfig: ConfigType = {
+  key: 'LowerLeft',
+  chartKey: 'VLowerLeft',
+  conKey: 'VCLowerLeft',
+  title: '组件底部栏',
+  category: ChatCategoryEnum.ZHIGAN,
+  categoryName: ChatCategoryEnumName.ZHIGAN,
+  package: PackagesCategoryEnum.ZHIGAN,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'LowerLeft.png'
+}
--- a/src/packages/components/Zhigan/Zhigan/LowerLeft/index.vue
+++ b/src/packages/components/Zhigan/Zhigan/LowerLeft/index.vue
@ -0,0 +1,52 @@
+<template>
+  <div class="lowerLeft">
+    <div class="image">
+      <n-image
+        :width="option.imageStyle.imageWidth"
+        :height="option.imageStyle.imageHeight"
+        src="src/assets/images/chart/zhigan/component/lowerLeft.svg"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
+  import { CreateComponentType } from '@/packages/index.d';
+  import { icon } from '@/plugins';
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+  import { useChartDataFetch } from '@/hooks';
+
+  const props = defineProps({
+    chartConfig: {
+      type: Object as PropType<CreateComponentType>,
+      required: true,
+    },
+  });
+
+  const { w, h } = toRefs(props.chartConfig.attr);
+
+  const option = reactive({
+    imageStyle: props.chartConfig.option.imageStyle,
+  });
+</script>
+
+<style lang="scss" scoped>
+  .lowerLeft {
+    width: v-bind('`${w}px`');
+    height: v-bind('`${h}px`');
+  }
+
+  .bottom {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    // height: 32px;
+  }
+  .image {
+    position: absolute;
+    bottom: 0px;
+    right: v-bind('`${option.imageStyle.right}px`');
+    bottom: v-bind('`${option.imageStyle.bottom}px`');
+  }
+</style>
--- a/src/packages/components/Zhigan/Zhigan/ModalCarousel/config.ts
+++ b/src/packages/components/Zhigan/Zhigan/ModalCarousel/config.ts
@ -0,0 +1,64 @@
+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { ModalCarouselConfig } from './index'
+
+export const option = {
+    // 图片资源列表
+    dataset: [
+      'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg',
+      'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg',
+      'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg',
+    ],
+    buttonStyle:{
+      dotBottom: 10,
+      dotLeft: 120,
+      dotColor1: '#00611a', 
+      dotColor2: '#00cc13', 
+
+      buttonWidth: 20,
+      buttonHeight: 60,
+      
+      buttonBottom: 80,
+      buttonLeftAndRight: 0,
+      buttonColor: '#A4A4A4FF',
+
+      iconFontSize: 20,
+      iconColor: '#1EC233',
+
+      borderWidth: 2,
+      borderColor: '#008000', 
+    },
+    dataStyle: {
+      // 自动播放
+      autoplay: true,
+      // 自动播放的间隔（豪秒）
+      interval: 5000,
+      // 每页显示的图片数量
+      slidesPerview: 1,
+      // 轮播方向
+      direction: "horizontal",
+      // 拖曳切换
+      draggable: true,
+      // 居中显示
+      centeredSlides: false,
+      // 过渡效果
+      effect: "slide",
+      // 是否显示指示点
+      showDots: true,
+      // 指示器样式
+      dotType: "line",
+      // 显示箭头
+      showArrow: true,
+      // 图片样式
+      fit: "contain",
+    }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = ModalCarouselConfig.key
+  public attr = { ...chartInitConfig, w: 320, h: 250, zIndex: -1 }
+  public chartConfig = cloneDeep(ModalCarouselConfig)
+  public option = cloneDeep(option)
+}
--- a/src/packages/components/Zhigan/Zhigan/ModalCarousel/config.vue
+++ b/src/packages/components/Zhigan/Zhigan/ModalCarousel/config.vue
@ -0,0 +1,262 @@
+<template>
+  <CollapseItem name="路径" :expanded="true">
+    <SettingItem v-for="(item, index) in optionData.dataset" :key="index">
+      <n-input-group>
+        <n-input
+          v-model:value="optionData.dataset[index]"
+          size="small"
+          placeholder="请输入图片地址"
+        ></n-input>
+        <n-button ghost @click="optionData.dataset.splice(index, 1)"> - </n-button>
+      </n-input-group>
+    </SettingItem>
+    <SettingItem>
+      <n-button size="small" @click="optionData.dataset.push('')"> + 新增</n-button>
+    </SettingItem>
+  </CollapseItem>
+  <CollapseItem name="轮播属性" :expanded="true">
+    <SettingItem-box name="播放器">
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.dataStyle.autoplay" size="small" />
+          <n-text>自动播放</n-text>
+        </n-space>
+      </SettingItem>
+      <!-- 开启自动播放时，设置间隔时间 -->
+      <SettingItem name="间隔时间">
+        <n-input-number v-model:value="optionData.dataStyle.interval" size="small" placeholder="">
+          <template #suffix> 毫秒 </template>
+        </n-input-number>
+      </SettingItem>
+      <SettingItem name="轮播方向">
+        <n-select
+          v-model:value="optionData.dataStyle.direction"
+          :options="directions"
+          placeholder="选择方向"
+        />
+      </SettingItem>
+      <SettingItem name="过渡效果">
+        <n-select
+          v-model:value="optionData.dataStyle.effect"
+          :options="effects"
+          placeholder="效果"
+        />
+      </SettingItem>
+      <SettingItem name="每页数量">
+        <n-input-number
+          v-model:value="optionData.dataStyle.slidesPerview"
+          size="small"
+          placeholder=""
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.dataStyle.centeredSlides" size="small" />
+          <n-text>居中显示</n-text>
+        </n-space>
+      </SettingItem>
+      <SettingItem name="图片样式">
+        <n-select v-model:value="optionData.dataStyle.fit" :options="fitList" placeholder="样式" />
+      </SettingItem>
+    </SettingItem-box>
+    <SettingItem-box name="指示器">
+      <!-- <SettingItem name="样式">
+        <n-select
+          v-model:value="optionData.dataStyle.dotType"
+          :options="dotTypes"
+          placeholder="选择样式"
+        />
+      </SettingItem> -->
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.dataStyle.showDots" size="small" />
+          <n-text>显示</n-text>
+        </n-space>
+      </SettingItem>
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.dataStyle.showArrow" size="small" />
+          <n-text>箭头</n-text>
+        </n-space>
+      </SettingItem>
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.dataStyle.draggable" size="small" />
+          <n-text>拖曳切换</n-text>
+        </n-space>
+      </SettingItem>
+    </SettingItem-box>
+
+    <SettingItem-box name="控制点和箭头样式">
+      <SettingItem name="控制点位置（下）">
+        <n-input-number
+          v-model:value="optionData.buttonStyle.dotBottom"
+          size="small"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="控制点位置（左）">
+        <n-input-number
+          v-model:value="optionData.buttonStyle.dotLeft"
+          size="small"
+          :min="0"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="控制点颜色1">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.buttonStyle.dotColor1"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="控制点颜色2">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.buttonStyle.dotColor2"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="箭头按钮长度">
+        <n-input-number
+          v-model:value="optionData.buttonStyle.buttonBottom"
+          size="small"
+          :min="0"
+        ></n-input-number>
+      </SettingItem>
+      <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>
+      <SettingItem name="箭头位置（左右）">
+        <n-input-number
+          v-model:value="optionData.buttonStyle.buttonWidth"
+          size="small"
+          :min="0"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="箭头按钮颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.buttonStyle.buttonColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="箭头图标大小">
+        <n-input-number
+          v-model:value="optionData.buttonStyle.iconFontSize"
+          size="small"
+          :min="0"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="箭头图标颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.buttonStyle.iconColor"
+        ></n-color-picker>
+      </SettingItem>
+
+      <SettingItem name="边框颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.buttonStyle.borderColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="边框宽度">
+        <n-input-number
+          v-model:value="optionData.buttonStyle.borderWidth"
+          size="small"
+          :min="0"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItem-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+  import { PropType, watch, ref } from 'vue';
+  import { option } from './config';
+  import { cloneDeep } from 'lodash-es';
+  import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting';
+
+  const props = defineProps({
+    optionData: {
+      type: Object as PropType<typeof option>,
+      required: true,
+    },
+  });
+
+  // 字典
+  const dotTypes = [
+    {
+      label: '点',
+      value: 'dot',
+    },
+    {
+      label: '线',
+      value: 'line',
+    },
+  ];
+  const directions = [
+    {
+      label: '水平方向',
+      value: 'horizontal',
+    },
+    {
+      label: '垂直方向',
+      value: 'vertical',
+    },
+  ];
+  const effects = [
+    {
+      label: 'slide',
+      value: 'slide',
+    },
+    {
+      label: 'fade',
+      value: 'fade',
+    },
+    {
+      label: 'card',
+      value: 'card',
+    },
+    {
+      label: 'custom',
+      value: 'custom',
+    },
+  ];
+
+  // 适应类型
+  const fitList = [
+    {
+      value: 'fill',
+      label: 'fill',
+    },
+    {
+      value: 'contain',
+      label: 'contain',
+    },
+    {
+      value: 'cover',
+      label: 'cover',
+    },
+    {
+      value: 'scale-down',
+      label: 'scale-down',
+    },
+    {
+      value: 'none',
+      label: 'none',
+    },
+  ];
+</script>
--- a/src/packages/components/Zhigan/Zhigan/ModalCarousel/index.ts
+++ b/src/packages/components/Zhigan/Zhigan/ModalCarousel/index.ts
@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const ModalCarouselConfig: ConfigType = {
+  key: 'ModalCarousel',
+  chartKey: 'VModalCarousel',
+  conKey: 'VCModalCarousel',
+  title: '重复报警弹窗轮播图',
+  category: ChatCategoryEnum.ZHIGAN,
+  categoryName: ChatCategoryEnumName.ZHIGAN,
+  package: PackagesCategoryEnum.ZHIGAN,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'ModalCarousel.png'
+}
--- a/src/packages/components/Zhigan/Zhigan/ModalCarousel/index.vue
+++ b/src/packages/components/Zhigan/Zhigan/ModalCarousel/index.vue
@ -0,0 +1,170 @@
+<template>
+  <div class="ModalCarousel">
+    <n-carousel
+      :autoplay="option.dataStyle.autoplay"
+      :interval="option.dataStyle.interval"
+      :centered-slides="option.dataStyle.centeredSlides"
+      :direction="option.dataStyle.direction"
+      :dot-placement="option.dataStyle.dotPlacement"
+      :dot-type="option.dataStyle.dotType"
+      :draggable="option.dataStyle.draggable"
+      :effect="option.dataStyle.effect"
+      :slides-per-view="option.dataStyle.slidesPerview"
+      :show-arrow="option.dataStyle.showArrow"
+      :show-dots="option.dataStyle.showDots"
+    >
+      <n-image
+        v-for="(url, index) in option.dataset"
+        preview-disabled
+        :key="index"
+        :object-fit="option.dataStyle.fit"
+        :src="url"
+        :fallback-src="requireErrorImg()"
+        :width="w"
+        :height="h"
+      ></n-image>
+      <template #arrow="{ prev, next }">
+        <div class="arrow-left">
+          <n-button
+            type="text"
+            :color="option.buttonStyle.buttonColor"
+            :style="{
+              display: flex,
+              alignItems: center,
+              justifyContent: center,
+              width: option.buttonStyle.buttonWidth + 'px',
+              height: option.buttonStyle.buttonHeight + 'px',
+            }"
+            @click="prev"
+          >
+            <LeftOutlined
+              :style="{
+                color: option.buttonStyle.iconColor,
+                fontSize: option.buttonStyle.iconFontSize + 'px',
+              }"
+            />
+          </n-button>
+        </div>
+        <div class="arrow-right">
+          <n-button
+            type="text"
+            :color="option.buttonStyle.buttonColor"
+            :style="{
+              display: flex,
+              alignItems: center,
+              justifyContent: center,
+              width: option.buttonStyle.buttonWidth + 'px',
+              height: option.buttonStyle.buttonHeight + 'px',
+            }"
+            @click="next"
+          >
+            <RightOutlined
+              :style="{
+                color: option.buttonStyle.iconColor,
+                fontSize: option.buttonStyle.iconFontSize + 'px',
+              }"
+            />
+          </n-button>
+        </div>
+      </template>
+      <template #dots="{ total, currentIndex, to }">
+        <ul class="dots">
+          <li
+            v-for="index of total"
+            :key="index"
+            :class="{ ['is-active']: currentIndex === index - 1 }"
+            @click="to(index - 1)"
+          />
+        </ul>
+      </template>
+    </n-carousel>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ArrowBack, ArrowForward } from '@vicons/ionicons5';
+  import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
+  import { CreateComponentType } from '@/packages/index.d';
+  import { requireErrorImg } from '@/utils';
+  import { useChartDataFetch } from '@/hooks';
+  import { icon } from '@/plugins';
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+  import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
+
+  const props = defineProps({
+    chartConfig: {
+      type: Object as PropType<CreateComponentType>,
+      required: true,
+    },
+  });
+
+  const { w, h } = toRefs(props.chartConfig.attr);
+
+  const option = reactive({
+    dataset: props.chartConfig.option.dataset,
+    dataStyle: props.chartConfig.option.dataStyle,
+    buttonStyle: props.chartConfig.option.buttonStyle,
+  });
+</script>
+
+<style lang="scss" scoped>
+  .ModalCarousel {
+    // overflow-y: auto;
+    border: v-bind('`${option.buttonStyle.borderWidth}px`') solid
+      v-bind('`${option.buttonStyle.borderColor}`');
+    padding: 2px;
+    width: v-bind('`${w}px`');
+    height: v-bind('`${h}px`');
+  }
+  .ModalCarousel::-webkit-scrollbar {
+    display: none;
+  }
+  .ModalCarousel {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .arrow-left {
+    display: flex;
+    position: absolute;
+    bottom: v-bind('`${option.buttonStyle.buttonBottom}px`');
+    left: v-bind('`${option.buttonStyle.buttonLeftAndRight}px`');
+  }
+  .arrow-right {
+    display: flex;
+    position: absolute;
+    bottom: v-bind('`${option.buttonStyle.buttonBottom}px`');
+    right: v-bind('`${option.buttonStyle.buttonLeftAndRight}px`');
+  }
+
+  .dots {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    bottom: v-bind('`${option.buttonStyle.dotBottom}px`');
+    left: v-bind('`${option.buttonStyle.dotLeft}px`');
+  }
+
+  .dots li {
+    display: inline-block;
+    width: 12px;
+    height: 4px;
+    margin: 0 3px;
+    border-radius: 4px;
+    background-color: v-bind('`${option.buttonStyle.dotColor1}`');
+    transition:
+      width 0.3s,
+      background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+  }
+
+  .dots li.is-active {
+    width: 40px;
+    background: v-bind('`${option.buttonStyle.dotColor2}`');
+  }
+
+  ::v-deep .n-button {
+    padding: 0px !important;
+  }
+</style>
--- a/src/packages/components/Zhigan/Zhigan/ModalHead/svg/title.vue
+++ b/src/packages/components/Zhigan/Zhigan/ModalHead/svg/title.vue
@ -8,7 +8,6 @@
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
-      <title>编组 54</title>
      <defs>
        <linearGradient x1="100%" y1="50%" x2="2.30946189%" y2="50%" id="linearGradient-1">
          <stop stop-color="#1F6B55" stop-opacity="0" offset="0%"></stop>
--- a/src/packages/components/Zhigan/Zhigan/ModalInfo/config.ts
+++ b/src/packages/components/Zhigan/Zhigan/ModalInfo/config.ts
@ -0,0 +1,42 @@
+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { ModalInfoConfig } from './index'
+import dataJson from './data.json'
+
+const { source } = dataJson;
+
+export const option = {
+  dataset: source,
+  dataStyle:{
+    backgroud: '#FFFFFF00',
+    marginTop: 10,
+    marginLeft: 20,
+    listMarginTop: 0,
+    listMarginLeft: 0,
+  },
+  titleStyle: {
+    dotColor: '#C9FFC7',
+    dotSize: 12,
+    dotMarginRight: 10,
+    width: 100,
+    height: 20,
+    fontcolor: '#CBE6CD',
+    fontsize: 16,
+    align: 'left',
+  },
+  contentStyle: {
+    width: 250,
+    fontcolor: '#FFFFFF',
+    fontsize: 16,
+    align: 'left',
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = ModalInfoConfig.key
+  public attr = { ...chartInitConfig, w: 400, h: 300, zIndex: -1 }
+  public chartConfig = cloneDeep(ModalInfoConfig)
+  public option = cloneDeep(option)
+}
--- a/src/packages/components/Zhigan/Zhigan/ModalInfo/config.vue
+++ b/src/packages/components/Zhigan/Zhigan/ModalInfo/config.vue
@ -0,0 +1,154 @@
+<template>
+  <CollapseItem name="设置" :expanded="true">
+    <SettingItemBox name="整体设置">
+      <SettingItem name="上方距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.marginTop"
+          :min="0"
+          size="small"
+          placeholder="上方距离"
+        />
+      </SettingItem>
+      <SettingItem name="左侧距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.marginLeft"
+          :min="0"
+          size="small"
+          placeholder="左侧距离"
+        />
+      </SettingItem>
+      <SettingItem name="单项上方距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.listMarginTop"
+          :min="0"
+          size="small"
+          placeholder="单项上方距离"
+        />
+      </SettingItem>
+      <SettingItem name="单项左侧距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.listMarginLeft"
+          :min="0"
+          size="small"
+          placeholder="单项左侧距离"
+        />
+      </SettingItem>
+      <SettingItem name="背景颜色">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.backgroud"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="标题设置">
+      <SettingItem name="标题点颜色">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.titleStyle.dotColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="标题点大小">
+        <n-input-number
+          v-model:value="optionData.titleStyle.dotSize"
+          :min="0"
+          size="small"
+          placeholder="标题宽度"
+        />
+      </SettingItem>
+      <SettingItem name="标题点与文字间的距离">
+        <n-input-number
+          v-model:value="optionData.titleStyle.dotMarginRight"
+          :min="0"
+          size="small"
+          placeholder="标题宽度"
+        />
+      </SettingItem>
+      <SettingItem name="标题宽度">
+        <n-input-number
+          v-model:value="optionData.titleStyle.width"
+          :min="0"
+          size="small"
+          placeholder="标题宽度"
+        />
+      </SettingItem>
+      <SettingItem name="标题高度">
+        <n-input-number
+          v-model:value="optionData.titleStyle.height"
+          :min="0"
+          size="small"
+          placeholder="标题高度"
+        />
+      </SettingItem>
+      <SettingItem name="标题字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.titleStyle.fontcolor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="标题字体大小">
+        <n-input-number v-model:value="optionData.titleStyle.fontsize" :min="0" size="small" />
+      </SettingItem>
+      <SettingItem name="标题排列方式">
+        <n-select
+          v-model:value="optionData.titleStyle.align"
+          size="small"
+          :options="[
+            { label: '左侧', value: 'left' },
+            { label: '中间', value: 'center' },
+            { label: '右侧', value: 'right' },
+          ]"
+        />
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="内容设置">
+      <SettingItem name="内容宽度">
+        <n-input-number
+          v-model:value="optionData.contentStyle.width"
+          :min="0"
+          size="small"
+          placeholder="内容宽度"
+        />
+      </SettingItem>
+      <SettingItem name="内容字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.contentStyle.fontcolor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="内容字体大小">
+        <n-input-number v-model:value="optionData.contentStyle.fontsize" :min="0" size="small" />
+      </SettingItem>
+      <SettingItem name="内容排列方式">
+        <n-select
+          v-model:value="optionData.contentStyle.align"
+          size="small"
+          :options="[
+            { label: '左侧', value: 'left' },
+            { label: '中间', value: 'center' },
+            { label: '右侧', value: 'right' },
+          ]"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+  import { PropType, watch, ref } from 'vue';
+  import { option } from './config';
+  import { cloneDeep } from 'lodash-es';
+  import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting';
+
+  const props = defineProps({
+    optionData: {
+      type: Object as PropType<typeof option>,
+      required: true,
+    },
+  });
+</script>
--- a/src/packages/components/Zhigan/Zhigan/ModalInfo/data.json
+++ b/src/packages/components/Zhigan/Zhigan/ModalInfo/data.json
@ -0,0 +1,28 @@
+{
+  "source": [
+    {
+      "title": "预警描述",
+      "content": "费县马庄镇牛田村村委东北方向375.75°1.197公里处发现火情"
+    },
+    {
+      "title": "水平角",
+      "content": "375.75°"
+    },
+    {
+      "title": "俯视角",
+      "content": "98°"
+    },
+    {
+      "title": "经纬度",
+      "content": "117.90911.3012349"
+    },
+    {
+      "title": "预警时间",
+      "content": "2024.12.24 13:08:07"
+    },
+    {
+      "title": "瞭望塔",
+      "content": "费县瞭望塔"
+    }
+  ]
+}
--- a/src/packages/components/Zhigan/Zhigan/ModalInfo/index.ts
+++ b/src/packages/components/Zhigan/Zhigan/ModalInfo/index.ts
@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const ModalInfoConfig: ConfigType = {
+  key: 'ModalInfo',
+  chartKey: 'VModalInfo',
+  conKey: 'VCModalInfo',
+  title: '重复报警弹窗信息展示',
+  category: ChatCategoryEnum.ZHIGAN,
+  categoryName: ChatCategoryEnumName.ZHIGAN,
+  package: PackagesCategoryEnum.ZHIGAN,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'ModalInfo.png'
+}
--- a/src/packages/components/Zhigan/Zhigan/ModalInfo/index.vue
+++ b/src/packages/components/Zhigan/Zhigan/ModalInfo/index.vue
@ -0,0 +1,93 @@
+<template>
+  <div class="ModalInfo">
+    <div class="list">
+      <div v-for="item in option.dataset" :key="item.key">
+        <div class="item">
+          <div class="title">
+            <!-- <n-image
+              :width="option.dataStyle.dotSize"
+              :height="option.dataStyle.dotSize"
+              src="src/assets/images/chart/zhigan/component/modalInfoDot.svg"
+            /> -->
+            <Dot :dotSize="option.titleStyle.dotSize" :dotColor="option.titleStyle.dotColor" />
+            <span class="dot">{{ item.title }}</span>
+          </div>
+          <div class="content"> {{ item.content }} </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
+  import { CreateComponentType } from '@/packages/index.d';
+  import { icon } from '@/plugins';
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+  import { useChartDataFetch } from '@/hooks';
+  import Dot from './svg/dot.vue';
+
+  const props = defineProps({
+    chartConfig: {
+      type: Object as PropType<CreateComponentType>,
+      required: true,
+    },
+  });
+
+  const { w, h } = toRefs(props.chartConfig.attr);
+
+  const option = reactive({
+    dataset: props.chartConfig.option.dataset,
+    dataStyle: props.chartConfig.option.dataStyle,
+    titleStyle: props.chartConfig.option.titleStyle,
+    contentStyle: props.chartConfig.option.contentStyle,
+  });
+</script>
+
+<style lang="scss" scoped>
+  .ModalInfo {
+    overflow-y: auto;
+    background: v-bind('`${option.dataStyle.backgroud}`');
+    width: v-bind('`${w}px`');
+    height: v-bind('`${h}px`');
+  }
+  .ModalInfo::-webkit-scrollbar {
+    display: none;
+  }
+  .ModalInfo {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .list {
+    display: inline-block;
+    flex-wrap: wrap;
+    width: 100%;
+    margin-top: v-bind('`${option.dataStyle.marginTop}px`');
+    margin-left: v-bind('`${option.dataStyle.marginLeft}px`');
+  }
+  .item {
+    display: inline-flex;
+    margin-top: v-bind('`${option.dataStyle.listMarginTop}px`');
+    margin-left: v-bind('`${option.dataStyle.listMarginLeft}px`');
+  }
+  .title {
+    display: inline-flex;
+    width: v-bind('`${option.titleStyle.width}px`');
+    height: v-bind('`${option.titleStyle.height}px`');
+    color: v-bind('`${option.titleStyle.fontcolor}`');
+    font-size: v-bind('`${option.titleStyle.fontsize}px`');
+    text-align: v-bind('`${option.titleStyle.align}`');
+  }
+  .dot {
+    margin-left: v-bind('`${option.titleStyle.dotMarginRight}px`');
+  }
+  .content {
+    width: v-bind('`${option.contentStyle.width}px`');
+    // height: v-bind('`${option.contentStyle.height}px`');
+    height: 100%;
+    color: v-bind('`${option.contentStyle.fontcolor}`');
+    font-size: v-bind('`${option.contentStyle.fontsize}px`');
+    text-align: v-bind('`${option.contentStyle.align}`');
+  }
+</style>
--- a/src/packages/components/Zhigan/Zhigan/ModalInfo/svg/dot.vue
+++ b/src/packages/components/Zhigan/Zhigan/ModalInfo/svg/dot.vue
@ -0,0 +1,94 @@
+<template>
+  <div>
+    <svg
+      :width="props.dotSize"
+      :height="props.dotSize"
+      :viewBox="`0 0 ${props.dotSize} ${props.dotSize}`"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <defs>
+        <ellipse
+          id="path-1"
+          cx="1.4433567"
+          cy="10.4439893"
+          rx="1.4433567"
+          ry="1.44398933"
+        ></ellipse>
+        <filter
+          x="-311.8%"
+          y="-311.6%"
+          width="723.5%"
+          height="723.3%"
+          filterUnits="objectBoundingBox"
+          id="filter-2"
+        >
+          <feMorphology
+            radius="0.5"
+            operator="dilate"
+            in="SourceAlpha"
+            result="shadowSpreadOuter1"
+          ></feMorphology>
+          <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+          <feGaussianBlur
+            stdDeviation="2.5"
+            in="shadowOffsetOuter1"
+            result="shadowBlurOuter1"
+          ></feGaussianBlur>
+          <feComposite
+            in="shadowBlurOuter1"
+            in2="SourceAlpha"
+            operator="out"
+            result="shadowBlurOuter1"
+          ></feComposite>
+          <feColorMatrix
+            values="0 0 0 0 0   0 0 0 0 1   0 0 0 0 0.314202964  0 0 0 0.6 0"
+            type="matrix"
+            in="shadowBlurOuter1"
+          ></feColorMatrix>
+        </filter>
+      </defs>
+      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g
+          id="林业防火-智感-重复报警弹窗-切图版"
+          transform="translate(-240, -490)"
+          fill-rule="nonzero"
+        >
+          <g id="弹窗----" transform="translate(175.2674, 165.0542)">
+            <g id="文字" transform="translate(64.7326, 10.2458)">
+              <g id="预警信息-" transform="translate(0, 36.7)">
+                <g id="编组-47" transform="translate(0.5, 44)">
+                  <g id="椭圆形" transform="translate(6.4709, 231.1981)">
+                    <use
+                      fill="black"
+                      fill-opacity="1"
+                      filter="url(#filter-2)"
+                      xlink:href="#path-1"
+                    ></use>
+                    <ellipse
+                      stroke-opacity="0.338068182"
+                      stroke="#FFFFFF"
+                      stroke-width="0.255938697"
+                      stroke-linejoin="square"
+                      :fill="props.dotColor"
+                      fill-rule="evenodd"
+                      cx="1.4433567"
+                      cy="10.4439893"
+                      rx="1.31538735"
+                      ry="1.31601998"
+                    ></ellipse>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps(['dotSize', 'dotColor']);
+</script>
--- a/src/packages/components/Zhigan/Zhigan/ModalVideo/config.ts
+++ b/src/packages/components/Zhigan/Zhigan/ModalVideo/config.ts
@ -0,0 +1,27 @@
+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { ModalVideoConfig } from './index'
+
+export const option = {
+  dataset: '/src/assets/videos/earth.mp4',
+  dataStyle: {
+    backgroud: '#FFFFFF00',
+    videoloop: true,  // 视频-循环播放
+    videomuted: true, // 视频-静音
+    videofit: 'fill', // 视频-适应方式
+    videoMarginTop: 10,
+
+    borderWidth: 2,
+    borderColor: '#008000', 
+    padding: 4,
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = ModalVideoConfig.key
+  public attr = { ...chartInitConfig, w: 320, h: 220, zIndex: -1 }
+  public chartConfig = cloneDeep(ModalVideoConfig)
+  public option = cloneDeep(option)
+}
--- a/src/packages/components/Zhigan/Zhigan/ModalVideo/config.vue
+++ b/src/packages/components/Zhigan/Zhigan/ModalVideo/config.vue
@ -0,0 +1,91 @@
+<template>
+  <CollapseItem name="数据设置" :expanded="true">
+    <SettingItemBox name="主题设置">
+      <SettingItem name="背景颜色">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.backgroud"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="视频设置">
+      <SettingItem>
+        <n-checkbox v-model:checked="optionData.dataStyle.videoloop" size="small">
+          循环播放
+        </n-checkbox>
+      </SettingItem>
+      <SettingItem>
+        <n-checkbox v-model:checked="optionData.dataStyle.videomuted" size="small">
+          静音
+        </n-checkbox>
+      </SettingItem>
+      <SettingItem name="视频类型">
+        <n-select v-model:value="optionData.dataStyle.videofit" size="small" :options="fitList" />
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="边框设置">
+      <SettingItem name="边框颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.borderColor"
+        ></n-color-picker>
+      </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>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+  import { PropType, watch, ref } from 'vue';
+  import { option } from './config';
+  import { cloneDeep } from 'lodash-es';
+  import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting';
+
+  const props = defineProps({
+    optionData: {
+      type: Object as PropType<typeof option>,
+      required: true,
+    },
+  });
+
+  // 适应类型
+  const fitList = [
+    {
+      value: 'fill',
+      label: 'fill',
+    },
+    {
+      value: 'contain',
+      label: 'contain',
+    },
+    {
+      value: 'cover',
+      label: 'cover',
+    },
+    {
+      value: 'scale-down',
+      label: 'scale-down',
+    },
+    {
+      value: 'none',
+      label: 'none',
+    },
+  ];
+</script>
--- a/src/packages/components/Zhigan/Zhigan/ModalVideo/index.ts
+++ b/src/packages/components/Zhigan/Zhigan/ModalVideo/index.ts
@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const ModalVideoConfig: ConfigType = {
+  key: 'ModalVideo',
+  chartKey: 'VModalVideo',
+  conKey: 'VCModalVideo',
+  title: '重复报警弹窗视频组件',
+  category: ChatCategoryEnum.ZHIGAN,
+  categoryName: ChatCategoryEnumName.ZHIGAN,
+  package: PackagesCategoryEnum.ZHIGAN,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'ModalVideo.png'
+}
--- a/src/packages/components/Zhigan/Zhigan/ModalVideo/index.vue
+++ b/src/packages/components/Zhigan/Zhigan/ModalVideo/index.vue
@ -0,0 +1,64 @@
+<template>
+  <div class="WuRenJiShiShiHuaMian">
+    <video
+      preload="auto"
+      crossOrigin="anonymous"
+      playsinline
+      autoplay
+      :object-fit="option.dataset.fit"
+      :loop="option.dataStyle.videoloop"
+      :muted="option.dataStyle.videomuted"
+      :width="`${w - option.dataStyle.padding}`"
+      :height="`${h - option.dataStyle.padding}`"
+      :src="option.dataset"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
+  import { CreateComponentType } from '@/packages/index.d';
+  import { icon } from '@/plugins';
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+  import { useChartDataFetch } from '@/hooks';
+  import dayjs from 'dayjs';
+
+  const props = defineProps({
+    chartConfig: {
+      type: Object as PropType<CreateComponentType>,
+      required: true,
+    },
+  });
+
+  const { w, h } = toRefs(props.chartConfig.attr);
+
+  const option = reactive({
+    dataset: props.chartConfig.option.dataset,
+    dataStyle: props.chartConfig.option.dataStyle,
+  });
+</script>
+
+<style lang="scss" scoped>
+  .WuRenJiShiShiHuaMian {
+    overflow-y: auto;
+    border: v-bind('`${option.dataStyle.borderWidth}px`') solid
+      v-bind('`${option.dataStyle.borderColor}`');
+    background: v-bind('`${option.dataStyle.backgroud}`');
+    width: v-bind('`${w}px`');
+    height: v-bind('`${h}px`');
+  }
+
+  .WuRenJiShiShiHuaMian::-webkit-scrollbar {
+    display: none;
+  }
+
+  .WuRenJiShiShiHuaMian {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  video {
+    display: block;
+    padding: 4px;
+    object-fit: v-bind('option.dataStyle.videofit');
+  }
+</style>
--- a/src/packages/components/Zhigan/Zhigan/index.ts
+++ b/src/packages/components/Zhigan/Zhigan/index.ts
@ -1,24 +1,26 @@
 import { GeneralHeadConfig } from "./GeneralHead/index";
-import { ModalHeadConfig } from "./ModalHead/index";
 import { HeadMoreButtonConfig } from "./HeadMoreButton/index";
 import { WuRenJiImageConfig } from "./WuRenJiImage/index";

 import { WeiXingYaoGanConfig } from "./WeiXingYaoGan/index";
 import { XianSuoShangBaoConfig } from "./XianSuoShangBao/index";
 import { MeiRiShangBaoConfig } from "./MeiRiShangBao/index";
-
-
 import { WuRenJiShiShiHuaMianConfig } from "./WuRenJiShiShiHuaMian/index";
 import { WuRenJiFeiXingShuJuConfig } from "./WuRenJiFeiXingShuJu/index";
+
 import { ModalFrameConfig } from "./ModalFrame/index";
 import { ModalFrameCloseConfig } from "./ModalFrameClose/index";
-import { ModalButtonConfig } from "./ModalButton/index";
+import { ModalHeadConfig } from "./ModalHead/index";
+import { ModalCarouselConfig } from "./ModalCarousel/index";
+import { ModalVideoConfig } from "./ModalVideo/index";
+import { ModalInfoConfig } from "./ModalInfo/index";
 import { ModalTimeLineConfig } from "./ModalTimeLine/index";
+import { ModalButtonConfig } from "./ModalButton/index";

+import { LowerLeftConfig } from "./LowerLeft/index";

 export default [
    GeneralHeadConfig, 
-    ModalHeadConfig, 
    HeadMoreButtonConfig, 
    WuRenJiImageConfig,

@ -28,8 +30,15 @@ export default [

    WuRenJiShiShiHuaMianConfig,
    WuRenJiFeiXingShuJuConfig,
+
+    LowerLeftConfig,
+
    ModalFrameConfig, 
-    ModalFrameCloseConfig, 
+    ModalFrameCloseConfig,
+    ModalHeadConfig, 
+    ModalCarouselConfig,
+    ModalVideoConfig,
+    ModalInfoConfig, 
+    ModalTimeLineConfig,
    ModalButtonConfig, 
-    ModalTimeLineConfig
 ];
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@ -528,6 +528,7 @@ export const useChartEditStore = defineStore({
            type: isCut ? HistoryActionTypeEnum.CUT : HistoryActionTypeEnum.COPY,
          };
          this.setRecordChart(copyData);
+          localStorage.setItem('copyData', JSON.stringify(copyData));
          window['$message'].success(isCut ? '剪切图表成功' : '复制图表成功！');
          loadingFinish();
        }
@ -541,9 +542,13 @@ export const useChartEditStore = defineStore({
    },
    // * 粘贴
    setParse() {
+      console.log('setParse');
      try {
        loadingStart();
-        const recordCharts = this.getRecordChart;
+        const recordCharts = this.getRecordChart
+          ? this.getRecordChart
+          : JSON.parse(localStorage.getItem('copyData'));
+
        if (recordCharts === undefined) {
          loadingFinish();
          return;
--- a/src/store/modules/packagesStore/packagesStore.d.ts
+++ b/src/store/modules/packagesStore/packagesStore.d.ts
@ -5,5 +5,5 @@ export { ConfigType }
 export { PackagesType }
 export interface PackagesStoreType {
  packagesList: PackagesType,
-  newPhoto?: ConfigType
+  newPhoto?: ConfigType[]
 }
--- a/src/store/modules/packagesStore/packagesStore.ts
+++ b/src/store/modules/packagesStore/packagesStore.ts
@ -17,9 +17,9 @@ export const usePackagesStore = defineStore({
    }
  },
  actions: {
-    addPhotos(newPhoto: ConfigType, index: number) {
+    addPhotos(newPhoto: ConfigType[], index: number) {
      this.newPhoto = newPhoto
-      this.packagesList.Photos.splice(index, 0, newPhoto)
+      this.packagesList.Photos.splice(index, 0, ...newPhoto)
    },
    deletePhotos(photoInfo: ConfigType, index: number) {
      this.packagesList.Photos.splice(index, 1)
--- a/src/views/chart/ContentCharts/components/ChartsOptionContent/index.vue
+++ b/src/views/chart/ContentCharts/components/ChartsOptionContent/index.vue
@ -105,10 +105,10 @@ watch(
 watch(
  () => packagesStore.newPhoto,
  newPhoto => {
-    if (!newPhoto) return
-    const newPhotoCategory = newPhoto.category
-    packages.categorys[newPhotoCategory].splice(1, 0, newPhoto)
-    packages.categorys['all'].splice(1, 0, newPhoto)
+    if (!newPhoto || newPhoto.length <= 0) return
+    const newPhotoCategory = newPhoto[0].category
+    packages.categorys[newPhotoCategory].splice(1, 0, ...newPhoto)
+    packages.categorys['all'].splice(1, 0, ...newPhoto)
  }
 )

--- a/src/views/chart/ContentCharts/components/PhotoModal/index.vue
+++ b/src/views/chart/ContentCharts/components/PhotoModal/index.vue
@ -7,20 +7,20 @@
      </div>
    </div>
    <div class="content-div">
-      <div class="photo-item" v-for="(item, index) in photoList" :key="index">
+      <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;cursor: pointer;" @click="changeSelect(1,item)"/>
-          <Icon v-else icon="material-symbols-light:check-circle-outline" :size="25" style="color: #cacdcd;cursor: pointer;" @click="changeSelect(2,item)"/>
+          <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>
      </div>
    </div>
    <div class="button-div">
      <Button  type="primary" style="margin-right: 10px;background-color: #ed6f6f;" @click="deleteImage">删除图片</Button>
      <Upload
+        :multiple="true"
        :accept="'.jpg,.png,.jpeg'"
        :showUploadList="false"
        :custom-request="customRequest"
@ -113,6 +113,7 @@ const addPhotoToList = () =>{
    return
  }
  const userPhotosList: ConfigType[] = getLocalStorage(StoreKey) || []
+  const addNewPhotosList: ConfigType[] = []
  selectPhotoList.value.forEach(item => {
    const newPhoto = {
      ...ImageConfig,
@ -126,9 +127,11 @@ const addPhotoToList = () =>{
      redirectComponent: `${ImageConfig.package}/${ImageConfig.category}/${ImageConfig.key}` // 跳转组件路径规则：packageName/categoryName/componentKey
    }
    userPhotosList.unshift(newPhoto)
-    packagesStore.addPhotos(newPhoto, 1)
+    addNewPhotosList.unshift(newPhoto)
  })
  setLocalStorage(StoreKey, userPhotosList)
+  packagesStore.addPhotos(addNewPhotosList, 1)
+  selectPhotoList.value = []
  closeModal()
 }
 </script>
@ -177,6 +180,7 @@ const addPhotoToList = () =>{
      background-color: rgb(24,24,28);
      margin-bottom: 10px;
      margin-right: 10px;
+      cursor: pointer;
      .select-div{
        position: absolute;
        bottom: 0px;
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteractionConfiguration/components/EventItem.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteractionConfiguration/components/EventItem.vue
@ -178,7 +178,7 @@
  }
  .event-type {
    .event-type__content {
-      background-color: #f5f5f5;
+      // background-color: #f5f5f5;
      padding: 10px 20px;
      border-radius: 6px;
      .event-type__content__item {
--- a/src/views/chart/ContentConfigurations/components/hooks/eventData.hook.ts
+++ b/src/views/chart/ContentConfigurations/components/hooks/eventData.hook.ts
@ -14,6 +14,14 @@ export const eventTypeOptions: EventOptionsItemType[] = [
    label: '右击',
    value: 'rightclick',
  },
+  {
+    label: '鼠标移入',
+    value: 'mousein',
+  },
+  {
+    label: '鼠标移出',
+    value: 'mouseout',
+  },
 ];
 // * 动作类型
 export const movementTypeOptions: EventOptionsItemType[] = [
--- a/src/views/chart/index.vue
+++ b/src/views/chart/index.vue
@ -69,6 +69,16 @@

  // 右键
  const { menuOptions, onClickOutSide, mousePosition, handleMenuSelect } = useContextMenu();
+  // 阻止页面ctrl+鼠标滚轮进行缩放
+  document.addEventListener(
+    'wheel',
+    function (event) {
+      if (event.ctrlKey) {
+        event.preventDefault();
+      }
+    },
+    { passive: false },
+  );
 </script>

 <style lang="scss" scoped>
--- a/src/views/preview/components/PreviewRenderList/index.vue
+++ b/src/views/preview/components/PreviewRenderList/index.vue
@ -12,6 +12,7 @@
      ...getPreviewConfigStyle(item.preview),
      ...(getBlendModeStyle(item.styles) as any),
      ...getSizeStyle(item.attr),
+      ...setMouseEventClose(item.option)
    }"
  >
    <!-- 分组 -->
@ -60,6 +61,7 @@
    getComponentAttrStyle,
    getStatusStyle,
    getPreviewConfigStyle,
+    setMouseEventClose,
  } from '../../utils';
  import { useLifeHandler } from '@/hooks';

--- a/src/views/preview/utils/style.ts
+++ b/src/views/preview/utils/style.ts
@ -56,3 +56,17 @@ export const getEditCanvasConfigStyle = (canvas: EditCanvasConfigType) => {
    ...computedBackground
  }
 }
+// 图片设置禁用鼠标事件
+export const setMouseEventClose = (option) => {
+  let resultObj = {}
+  if(option.photoMouseEventClose){
+      resultObj['pointer-events'] = 'none'
+  }
+  if(option.mouseSelectClose){
+      resultObj['user-select'] = 'none'
+  }
+  if(option.mouseCursor){
+    resultObj['cursor'] = option.mouseCursor
+  }
+  return resultObj
+}