diff --git a/src/assets/images/chart/zhiku/component/HuoQingDetailModalLeft.png b/src/assets/images/chart/zhiku/component/HuoQingDetailModalLeft.png
new file mode 100644
index 0000000..90dc295
Binary files /dev/null and b/src/assets/images/chart/zhiku/component/HuoQingDetailModalLeft.png differ
diff --git a/src/assets/images/chart/zhiku/component/HuoQingDetailModalRight.png b/src/assets/images/chart/zhiku/component/HuoQingDetailModalRight.png
new file mode 100644
index 0000000..66e9cdc
Binary files /dev/null and b/src/assets/images/chart/zhiku/component/HuoQingDetailModalRight.png differ
diff --git a/src/packages/components/Zhiku/Zhiku/HuoQingDetailModal/config.ts b/src/packages/components/Zhiku/Zhiku/HuoQingDetailModal/config.ts
deleted file mode 100644
index 6e5e536..0000000
--- a/src/packages/components/Zhiku/Zhiku/HuoQingDetailModal/config.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import cloneDeep from 'lodash/cloneDeep'
-import { PublicConfigClass } from '@/packages/public'
-import { CreateComponentType } from '@/packages/index.d'
-import { chartInitConfig } from '@/settings/designSetting'
-import { HuoQingDetailModalConfig } from './index'
-
-export const option = {
-  dataStyle:{
-    onlyShowLeftFrame: true,
-    mouseListener: true,
-
-    mask: false,
-    maskClickClose: false,
-    maskColor: '#FFFFFF00',
-    maskFrameX: 0,
-    maskFrameY: 0,
-    maskFrameW: 0,
-    maskFrameH: 0,
-    maskFrameColor: '#FFFFFF00',
-
-    // 总矩形边框颜色
-    allUseStrokeColor: '#435A4E',
-    // 总矩形填充颜色
-    allUseFillColor: '#021E17',
-
-    // 左侧矩形边框颜色
-    leftStrokeColor1: '#435A4E',
-    leftStrokeColor2: '#7CA791',
-    // 左侧矩形填充颜色
-    leftFillColor: '#161A1A',
-    // 左侧矩形左上、右下修饰边角颜色
-    leftStopColor1: '#25673D',
-    leftStopColor2: '#3E674A',
-    leftStopColor3: '#8BE8A3',
-
-    // 左上、左下修饰矩形颜色
-    topLeftFillColor: '#4D815D',
-    bottomLeftFillColor: '#FFE4AC',
-    // 左上、修饰圆形颜色
-    topLeftEllipseColor: '#4A5C4A',
-  },
-}
-
-export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key = HuoQingDetailModalConfig.key
-  public attr = { ...chartInitConfig, w: 417, h: 891, zIndex: -1 }
-  public chartConfig = cloneDeep(HuoQingDetailModalConfig)
-  public option = cloneDeep(option)
-}
diff --git a/src/packages/components/Zhiku/Zhiku/HuoQingDetailModal/config.vue b/src/packages/components/Zhiku/Zhiku/HuoQingDetailModal/config.vue
deleted file mode 100644
index 8f69d65..0000000
--- a/src/packages/components/Zhiku/Zhiku/HuoQingDetailModal/config.vue
+++ /dev/null
@@ -1,275 +0,0 @@
-<template>
-  <CollapseItem name="弹窗设置" :expanded="true">
-    <SettingItemBox name="样式设置">
-      <SettingItem>
-        <n-space>
-          <n-switch v-model:value="optionData.dataStyle.onlyShowLeftFrame" size="small" />
-          <n-text>默认弹窗只显示左侧部分</n-text>
-        </n-space>
-      </SettingItem>
-      <SettingItem>
-        <n-space>
-          <n-switch v-model:value="optionData.dataStyle.mouseListener" size="small" />
-          <n-text>是否开启弹窗拖动</n-text>
-        </n-space>
-      </SettingItem>
-      <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
-          size="small"
-          :modes="['rgb']"
-          v-model:value="optionData.dataStyle.allUseStrokeColor"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button
-          size="small"
-          @click="optionData.dataStyle.allUseStrokeColor = dataStyleClone.allUseStrokeColor"
-        >
-          恢复默认
-        </n-button>
-      </SettingItem>
-      <SettingItem name="总矩形填充颜色">
-        <n-color-picker
-          size="small"
-          :modes="['rgb']"
-          v-model:value="optionData.dataStyle.allUseFillColor"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button
-          size="small"
-          @click="optionData.dataStyle.allUseFillColor = dataStyleClone.allUseFillColor"
-        >
-          恢复默认
-        </n-button>
-      </SettingItem>
-      <SettingItem name="左侧矩形边框颜色1">
-        <n-color-picker
-          size="small"
-          :modes="['rgb']"
-          v-model:value="optionData.dataStyle.leftStrokeColor1"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button
-          size="small"
-          @click="optionData.dataStyle.leftStrokeColor1 = dataStyleClone.leftStrokeColor1"
-        >
-          恢复默认
-        </n-button>
-      </SettingItem>
-      <SettingItem name="左侧矩形边框颜色2">
-        <n-color-picker
-          size="small"
-          :modes="['rgb']"
-          v-model:value="optionData.dataStyle.leftStrokeColor2"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button
-          size="small"
-          @click="optionData.dataStyle.leftStrokeColor2 = dataStyleClone.leftStrokeColor2"
-        >
-          恢复默认
-        </n-button>
-      </SettingItem>
-      <SettingItem name="左侧矩形填充颜色">
-        <n-color-picker
-          size="small"
-          :modes="['rgb']"
-          v-model:value="optionData.dataStyle.leftFillColor"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button
-          size="small"
-          @click="optionData.dataStyle.leftFillColor = dataStyleClone.leftFillColor"
-        >
-          恢复默认
-        </n-button>
-      </SettingItem>
-      <SettingItem name="左侧矩形左上、右下修饰边角颜色1">
-        <n-color-picker
-          size="small"
-          :modes="['rgb']"
-          v-model:value="optionData.dataStyle.leftStopColor1"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button
-          size="small"
-          @click="optionData.dataStyle.leftStopColor1 = dataStyleClone.leftStopColor1"
-        >
-          恢复默认
-        </n-button>
-      </SettingItem>
-      <SettingItem name="左侧矩形左上、右下修饰边角颜色2">
-        <n-color-picker
-          size="small"
-          :modes="['rgb']"
-          v-model:value="optionData.dataStyle.leftStopColor2"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button
-          size="small"
-          @click="optionData.dataStyle.leftStopColor2 = dataStyleClone.leftStopColor2"
-        >
-          恢复默认
-        </n-button>
-      </SettingItem>
-      <SettingItem name="左侧矩形左上、右下修饰边角颜色3">
-        <n-color-picker
-          size="small"
-          :modes="['rgb']"
-          v-model:value="optionData.dataStyle.leftStopColor3"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button
-          size="small"
-          @click="optionData.dataStyle.leftStopColor3 = dataStyleClone.leftStopColor3"
-        >
-          恢复默认
-        </n-button>
-      </SettingItem>
-      <SettingItem name="左上修饰矩形颜色">
-        <n-color-picker
-          size="small"
-          :modes="['rgb']"
-          v-model:value="optionData.dataStyle.topLeftFillColor"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button
-          size="small"
-          @click="optionData.dataStyle.topLeftFillColor = dataStyleClone.topLeftFillColor"
-        >
-          恢复默认
-        </n-button>
-      </SettingItem>
-      <SettingItem name="左下修饰矩形颜色">
-        <n-color-picker
-          size="small"
-          :modes="['rgb']"
-          v-model:value="optionData.dataStyle.bottomLeftFillColor"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button
-          size="small"
-          @click="optionData.dataStyle.bottomLeftFillColor = dataStyleClone.bottomLeftFillColor"
-        >
-          恢复默认
-        </n-button>
-      </SettingItem>
-      <SettingItem name="左上、修饰圆形颜色">
-        <n-color-picker
-          size="small"
-          :modes="['rgb']"
-          v-model:value="optionData.dataStyle.topLeftEllipseColor"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button
-          size="small"
-          @click="optionData.dataStyle.topLeftEllipseColor = dataStyleClone.topLeftEllipseColor"
-        >
-          恢复默认
-        </n-button>
-      </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 dataStyleClone = {
-    maskColor: '#000000FF',
-    // 总矩形边框颜色
-    allUseStrokeColor: '#435A4E',
-    // 总矩形填充颜色
-    allUseFillColor: '#021E17',
-
-    // 左侧矩形边框颜色
-    leftStrokeColor1: '#435A4E',
-    leftStrokeColor2: '#7CA791',
-    // 左侧矩形填充颜色
-    leftFillColor: '#161A1A',
-    // 左侧矩形左上、右下修饰边角颜色
-    leftStopColor1: '#25673D',
-    leftStopColor2: '#3E674A',
-    leftStopColor3: '#8BE8A3',
-
-    // 左上、左下修饰矩形颜色
-    topLeftFillColor: '#4D815D',
-    bottomLeftFillColor: '#FFE4AC',
-    // 左上、修饰圆形颜色
-    topLeftEllipseColor: '#4A5C4A',
-  };
-</script>
diff --git a/src/packages/components/Zhiku/Zhiku/HuoQingDetailModal/index.vue b/src/packages/components/Zhiku/Zhiku/HuoQingDetailModal/index.vue
deleted file mode 100644
index 5c5da49..0000000
--- a/src/packages/components/Zhiku/Zhiku/HuoQingDetailModal/index.vue
+++ /dev/null
@@ -1,311 +0,0 @@
-<template>
-  <div class="HuoQingDetailModal" @click="clickFrame">
-    <div class="frame">
-      <Frame :w="frameWidth" :h="frameHeight" :dataStyle="option.dataStyle" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  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>,
-      required: true,
-    },
-  });
-
-  const { w, h, x, y } = toRefs(props.chartConfig.attr);
-
-  const option = reactive({
-    dataStyle: props.chartConfig.option.dataStyle,
-  });
-  watch(
-    () => option.dataStyle.onlyShowLeftFrame,
-    () => {
-      if (option.dataStyle.onlyShowLeftFrame) {
-        w.value = (h.value / 891) * 417;
-      } else {
-        w.value = (h.value / 891) * 1343;
-      }
-    },
-  ),
-    {
-      immediate: true,
-    };
-
-  // 弹窗样式
-  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;
-        option.dataStyle.maskColor = option.dataStyle.maskFrameColor;
-      } else {
-        x.value = option.dataStyle.maskFrameX;
-        y.value = option.dataStyle.maskFrameY;
-        w.value = option.dataStyle.maskFrameW;
-        h.value = option.dataStyle.maskFrameH;
-        option.dataStyle.maskFrameColor = option.dataStyle.maskColor;
-        option.dataStyle.maskColor = '#FFFFFF00';
-      }
-    },
-  );
-
-  watch(
-    () => option.dataStyle.maskFrameW,
-    () => {
-      if (option.dataStyle.onlyShowLeftFrame) {
-        option.dataStyle.maskFrameH = (option.dataStyle.maskFrameW * 891) / 417;
-      } else {
-        option.dataStyle.maskFrameH = (option.dataStyle.maskFrameW * 891) / 1343;
-      }
-    },
-  );
-
-  // 有遮罩的情况点击
-  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 getHuoQingDetailModalIsNum() {
-    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(() => {
-    getHuoQingDetailModalIsNum();
-    window.addEventListener('click', handleKeydown);
-  });
-  // 在组件卸载时移除监听器
-  onBeforeUnmount(() => {
-    window.removeEventListener('click', handleKeydown);
-  });
-
-  // 添加鼠标拖动监听器
-  let isGroup = 0;
-  addListener();
-  // 监听器-参数
-  let isDragging = false;
-  let initialMouseX;
-  let initialMouseY;
-  let initialDocumentX;
-  let initialDocumentY;
-
-  // 添加鼠标拖动监听器
-  function addListener() {
-    if (option.dataStyle.mouseListener) {
-      chartEditStore.getComponentList.forEach((element) => {
-        // 未分组
-        if (isGroup == 1 || element.key == 'HuoQingDetailModal') {
-          isGroup = 1;
-          setTimeout(() => {
-            const dragDocument: any = document.querySelector('.HuoQingDetailModal');
-            if (dragDocument) {
-              // 鼠标按下
-              dragDocument.addEventListener('mousedown', function (event) {
-                isDragging = true;
-                initialMouseX = event.clientX;
-                initialMouseY = event.clientY;
-                initialDocumentX = cloneDeep(x.value);
-                initialDocumentY = cloneDeep(y.value);
-                dragDocument.style.cursor = 'grabbing';
-              });
-              // 鼠标移动
-              dragDocument.addEventListener('mousemove', function (event) {
-                if (isDragging) {
-                  const deltaX = event.clientX - initialMouseX;
-                  const deltaY = event.clientY - initialMouseY;
-                  x.value = initialDocumentX + deltaX;
-                  y.value = initialMouseY + deltaY;
-                }
-              });
-              // 鼠标放开
-              dragDocument.addEventListener('mouseup', function (event) {
-                isDragging = false;
-                dragDocument.style.cursor = 'default';
-              });
-            }
-          }, 1000);
-        }
-        // 分组
-        if (
-          isGroup == 2 ||
-          (element.isGroup && element?.groupList?.some((li) => li.key == 'HuoQingDetailModal'))
-        ) {
-          isGroup = 2;
-          setTimeout(() => {
-            const dragDocument = document.getElementById(element.id); // 使用 id 获取元素
-            if (dragDocument) {
-              // 鼠标按下
-              dragDocument.addEventListener('mousedown', function (event) {
-                isDragging = true;
-                initialMouseX = event.clientX;
-                initialMouseY = event.clientY;
-                initialDocumentX = dragDocument.offsetLeft;
-                initialDocumentY = dragDocument.offsetTop;
-                dragDocument.style.cursor = 'grabbing';
-              });
-              // 鼠标移动
-              dragDocument.addEventListener('mousemove', function (event) {
-                if (isDragging) {
-                  const deltaX = event.clientX - initialMouseX;
-                  const deltaY = event.clientY - initialMouseY;
-                  dragDocument.style.left = initialDocumentX + deltaX + 'px';
-                  dragDocument.style.top = initialDocumentY + deltaY + 'px';
-                }
-              });
-              // 鼠标放开
-              dragDocument.addEventListener('mouseup', function (event) {
-                isDragging = false;
-                dragDocument.style.cursor = 'default';
-              });
-            }
-          }, 1000);
-        }
-      });
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .HuoQingDetailModal {
-    display: flex;
-    justify-content: center;
-    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/Zhiku/Zhiku/HuoQingDetailModal/svg/frame.vue b/src/packages/components/Zhiku/Zhiku/HuoQingDetailModal/svg/frame.vue
deleted file mode 100644
index 505142e..0000000
--- a/src/packages/components/Zhiku/Zhiku/HuoQingDetailModal/svg/frame.vue
+++ /dev/null
@@ -1,596 +0,0 @@
-<template>
-  <div>
-    <svg
-      v-if="props.dataStyle.onlyShowLeftFrame"
-      :width="props.w"
-      :height="props.h"
-      viewBox="0 0 417 891"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-    >
-      <defs>
-        <path
-          d="M45.3704527,854.367225 L117.212468,854.367225 L117.212468,854.367225 L126.073687,847.147278 L269.344908,847.147278 L277.634385,855 L378.749294,855 C390.764133,855 400.504084,845.260049 400.504084,833.245211 L400.504084,4.46630114 L400.504084,4.46630114 L50.4892271,4.46630114 C38.4743887,4.46630114 28.7344378,14.2062521 28.7344378,26.2210905 L28.7344378,837.73121 C28.7344378,846.919027 36.1826354,854.367225 45.3704527,854.367225 Z"
-          id="path-HuoQingDetailModal-0-1"
-        ></path>
-        <filter
-          x="-8.9%"
-          y="-2.1%"
-          width="117.8%"
-          height="108.4%"
-          filterUnits="objectBoundingBox"
-          id="filter-HuoQingDetailModal-0-2"
-        >
-          <feMorphology
-            radius="0.639846743"
-            operator="dilate"
-            in="SourceAlpha"
-            result="shadowSpreadOuter1"
-          ></feMorphology>
-          <feOffset dx="0" dy="20" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-          <feGaussianBlur
-            stdDeviation="7.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 0   0 0 0 0 0  0 0 0 0.5 0"
-            type="matrix"
-            in="shadowBlurOuter1"
-          ></feColorMatrix>
-        </filter>
-        <linearGradient
-          x1="50%"
-          y1="0%"
-          x2="50%"
-          y2="100%"
-          id="linearGradient-HuoQingDetailModal-0-3"
-        >
-          <stop stop-color="#344534" offset="0%"></stop>
-          <stop stop-color="#647B64" offset="100%"></stop>
-        </linearGradient>
-        <polygon
-          id="path-HuoQingDetailModal-0-4"
-          points="-1.00972311e-14 -4.20781315e-13 14.0704612 -4.20781315e-13 16.8354658 2.40668967 2.76500463 2.40668967"
-        ></polygon>
-        <filter
-          x="-107.9%"
-          y="-685.6%"
-          width="315.9%"
-          height="1471.2%"
-          filterUnits="objectBoundingBox"
-          id="filter-HuoQingDetailModal-0-5"
-        >
-          <feMorphology
-            radius="0.5"
-            operator="dilate"
-            in="SourceAlpha"
-            result="shadowSpreadOuter1"
-          ></feMorphology>
-          <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-          <feGaussianBlur
-            stdDeviation="5"
-            in="shadowOffsetOuter1"
-            result="shadowBlurOuter1"
-          ></feGaussianBlur>
-          <feColorMatrix
-            values="0 0 0 0 1   0 0 0 0 0.462494493   0 0 0 0 0  0 0 0 0.7 0"
-            type="matrix"
-            in="shadowBlurOuter1"
-          ></feColorMatrix>
-        </filter>
-        <polygon
-          id="path-HuoQingDetailModal-0-6"
-          points="20.0745787 6.12769321e-14 34.1450399 6.12769321e-14 36.9100445 2.40668967 22.8395833 2.40668967"
-        ></polygon>
-        <filter
-          x="-107.9%"
-          y="-685.6%"
-          width="315.9%"
-          height="1471.2%"
-          filterUnits="objectBoundingBox"
-          id="filter-HuoQingDetailModal-0-7"
-        >
-          <feMorphology
-            radius="0.5"
-            operator="dilate"
-            in="SourceAlpha"
-            result="shadowSpreadOuter1"
-          ></feMorphology>
-          <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-          <feGaussianBlur
-            stdDeviation="5"
-            in="shadowOffsetOuter1"
-            result="shadowBlurOuter1"
-          ></feGaussianBlur>
-          <feColorMatrix
-            values="0 0 0 0 1   0 0 0 0 0.462494493   0 0 0 0 0  0 0 0 0.7 0"
-            type="matrix"
-            in="shadowBlurOuter1"
-          ></feColorMatrix>
-        </filter>
-        <linearGradient
-          x1="50.3209681%"
-          y1="99.6790319%"
-          x2="50.3209681%"
-          y2="0.320968094%"
-          id="linearGradient-HuoQingDetailModal-0-8"
-        >
-          <stop stop-color="#25673D" stop-opacity="0.8" offset="0.00819493007%"></stop>
-          <stop stop-color="#3E674A" offset="38.6691434%"></stop>
-          <stop stop-color="#8BE8A3" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient
-          x1="50.3209681%"
-          y1="99.6790319%"
-          x2="50.3209681%"
-          y2="0.320968094%"
-          id="linearGradient-HuoQingDetailModal-0-9"
-        >
-          <stop
-            :stop-color="props.dataStyle.leftStopColor1"
-            stop-opacity="0.8"
-            offset="0.00819493007%"
-          ></stop>
-          <stop :stop-color="props.dataStyle.leftStopColor2" offset="38.6691434%"></stop>
-          <stop :stop-color="props.dataStyle.leftStopColor3" offset="100%"></stop>
-        </linearGradient>
-      </defs>
-      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="林业防火-智库-切图版" transform="translate(-416, -168)">
-          <g id="弹窗---" transform="translate(416, 168)">
-            <g id="编组-34" transform="translate(0.2674, 0.0542)">
-              <g id="路径-22">
-                <use
-                  fill="black"
-                  fill-opacity="1"
-                  filter="url(#filter-HuoQingDetailModal-0-2)"
-                  xlink:href="#path-HuoQingDetailModal-0-1"
-                ></use>
-                <use
-                  :stroke="props.dataStyle.leftStrokeColor1"
-                  stroke-width="1.27969349"
-                  fill-opacity="0.85"
-                  :fill="props.dataStyle.leftFillColor"
-                  fill-rule="evenodd"
-                  xlink:href="#path-HuoQingDetailModal-0-1"
-                ></use>
-              </g>
-              <g
-                id="编组-5"
-                transform="translate(297.4837, 17.9031) scale(-1, 1) rotate(-180) translate(-297.4837, -17.9031)translate(198.9905, 15.9835)"
-              >
-                <line
-                  x1="-5.06780004e-13"
-                  y1="1.91954023"
-                  x2="196.976869"
-                  y2="1.91954023"
-                  id="路径-6"
-                  stroke="url(#linearGradient-HuoQingDetailModal-0-3)"
-                  stroke-width="1.27969349"
-                  opacity="0.399999976"
-                ></line>
-                <path
-                  d="M142.951484,3.83908046 C144.011153,3.83908046 144.870183,2.97967303 144.870183,1.91954023 C144.870183,0.859407434 144.011153,0 142.951484,0 C141.891816,0 141.032785,0.859407434 141.032785,1.91954023 C141.032785,2.97967303 141.891816,3.83908046 142.951484,3.83908046 Z"
-                  id="椭圆形"
-                  :fill="props.dataStyle.topLeftEllipseColor"
-                ></path>
-                <ellipse
-                  id="椭圆形"
-                  :fill="props.dataStyle.topLeftEllipseColor"
-                  cx="70.0409125"
-                  cy="1.91954023"
-                  rx="1.91869926"
-                  ry="1.91954023"
-                ></ellipse>
-              </g>
-              <path
-                d="M52.8631705,861.176833 L124.732625,861.176833 L124.732625,861.176833 L132.371139,853.956886 L276.274974,853.956886 L283.750917,861.176833 L381.026745,861.176833 C395.161849,861.176833 406.620615,849.718067 406.620615,835.582962 L406.620615,10.8647686 L406.620615,10.8647686 L56.6416991,10.8647686 C44.6268607,10.8647686 34.8869098,20.6047195 34.8869098,32.6195579 C34.8869098,32.6315283 34.8869197,32.6434986 34.8869394,32.6554689 L36.2271782,844.568279 C36.242327,853.745361 43.6860756,861.176833 52.8631705,861.176833 Z"
-                id="路径-22"
-                :stroke="props.dataStyle.leftStrokeColor2"
-                stroke-width="1.27969349"
-              ></path>
-              <g
-                id="编组"
-                transform="translate(150.0126, 859.9735) scale(1, -1) translate(-150.0126, -859.9735)translate(131.5576, 858.7701)"
-              >
-                <g id="矩形">
-                  <use
-                    fill="black"
-                    fill-opacity="1"
-                    filter="url(#filter-HuoQingDetailModal-0-5)"
-                    xlink:href="#path-HuoQingDetailModal-0-4"
-                  ></use>
-                  <use
-                    :fill="props.dataStyle.bottomLeftFillColor"
-                    fill-rule="evenodd"
-                    xlink:href="#path-HuoQingDetailModal-0-4"
-                  ></use>
-                </g>
-                <g id="矩形" opacity="0.399999976">
-                  <use
-                    fill="black"
-                    fill-opacity="1"
-                    filter="url(#filter-HuoQingDetailModal-0-7)"
-                    xlink:href="#path-HuoQingDetailModal-0-6"
-                  ></use>
-                  <use
-                    :fill="props.dataStyle.bottomLeftFillColor"
-                    fill-rule="evenodd"
-                    xlink:href="#path-HuoQingDetailModal-0-6"
-                  ></use>
-                </g>
-              </g>
-              <g
-                id="编组"
-                transform="translate(114.9289, 1.4324)"
-                :fill="props.dataStyle.topLeftFillColor"
-              >
-                <polygon
-                  id="矩形"
-                  points="-1.54661681e-14 -6.4452071e-13 21.5520588 -6.4452071e-13 25.7872819 3.68638359 4.2352231 3.68638359"
-                ></polygon>
-              </g>
-              <g
-                id="编组备份"
-                opacity="0.59407988"
-                transform="translate(147.9289, 1.4324)"
-                :fill="props.dataStyle.topLeftFillColor"
-              >
-                <polygon
-                  id="矩形"
-                  points="-1.54661681e-14 -6.4452071e-13 21.5520588 -6.4452071e-13 25.7872819 3.68638359 4.2352231 3.68638359"
-                ></polygon>
-              </g>
-              <polygon
-                id="路径-21"
-                fill="url(#linearGradient-HuoQingDetailModal-0-8)"
-                points="25 113.435276 25 26.2109979 51.1995145 8.19751628e-13 101.795125 8.19751628e-13 107.97292 4.73651289 54.0862279 4.73651289 29.7344378 29.0989765 29.7344378 120.104002"
-              ></polygon>
-              <polygon
-                id="路径-21"
-                fill="url(#linearGradient-HuoQingDetailModal-0-9)"
-                transform="translate(369.9569, 767.0012) scale(-1, -1) translate(-369.9569, -767.0012)"
-                points="329.913794 858.775264 329.913794 693.161091 354.341504 670.002367 405.265562 670.002367 410 673.294891 358.671574 673.294891 333.204875 698.772752 333.204875 864"
-              ></polygon>
-            </g>
-          </g>
-        </g>
-      </g>
-    </svg>
-    <svg
-      v-if="!props.dataStyle.onlyShowLeftFrame"
-      :width="props.w"
-      :height="props.h"
-      viewBox="0 0 1343 891"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-    >
-      <defs>
-        <path
-          d="M54.4074739,833.437486 L344.542554,833.437486 L344.542554,833.437486 L375.26618,826.400333 L872.016265,826.400333 L900.757548,834.05424 L1305.01667,834.05424 C1317.03151,834.05424 1326.77146,824.31429 1326.77146,812.299451 L1326.77146,5.0542405 L1326.77146,5.0542405 L59.5262483,5.0542405 C47.5114099,5.0542405 37.771459,14.7941915 37.771459,26.8090299 L37.771459,816.801471 C37.771459,825.989288 45.2196565,833.437486 54.4074739,833.437486 Z"
-          id="path-HuoQingDetailModal-1-1"
-        ></path>
-        <filter
-          x="-2.6%"
-          y="-2.2%"
-          width="105.1%"
-          height="108.6%"
-          filterUnits="objectBoundingBox"
-          id="filter-HuoQingDetailModal-1-3"
-        >
-          <feMorphology
-            radius="0.639846743"
-            operator="dilate"
-            in="SourceAlpha"
-            result="shadowSpreadOuter1"
-          ></feMorphology>
-          <feOffset dx="0" dy="20" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-          <feGaussianBlur
-            stdDeviation="7.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 0   0 0 0 0 0  0 0 0 0.5 0"
-            type="matrix"
-            in="shadowBlurOuter1"
-          ></feColorMatrix>
-        </filter>
-        <path
-          d="M45.3704527,854.367225 L117.212468,854.367225 L117.212468,854.367225 L126.073687,847.147278 L269.344908,847.147278 L277.634385,855 L378.749294,855 C390.764133,855 400.504084,845.260049 400.504084,833.245211 L400.504084,4.46630114 L400.504084,4.46630114 L50.4892271,4.46630114 C38.4743887,4.46630114 28.7344378,14.2062521 28.7344378,26.2210905 L28.7344378,837.73121 C28.7344378,846.919027 36.1826354,854.367225 45.3704527,854.367225 Z"
-          id="path-HuoQingDetailModal-1-4"
-        ></path>
-        <filter
-          x="-8.9%"
-          y="-2.1%"
-          width="117.8%"
-          height="108.4%"
-          filterUnits="objectBoundingBox"
-          id="filter-HuoQingDetailModal-1-5"
-        >
-          <feMorphology
-            radius="0.639846743"
-            operator="dilate"
-            in="SourceAlpha"
-            result="shadowSpreadOuter1"
-          ></feMorphology>
-          <feOffset dx="0" dy="20" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-          <feGaussianBlur
-            stdDeviation="7.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 0   0 0 0 0 0  0 0 0 0.5 0"
-            type="matrix"
-            in="shadowBlurOuter1"
-          ></feColorMatrix>
-        </filter>
-        <linearGradient
-          x1="50%"
-          y1="0%"
-          x2="50%"
-          y2="100%"
-          id="linearGradient-HuoQingDetailModal-1-6"
-        >
-          <stop stop-color="#344534" offset="0%"></stop>
-          <stop stop-color="#647B64" offset="100%"></stop>
-        </linearGradient>
-        <polygon
-          id="path-HuoQingDetailModal-1-7"
-          points="-1.00972311e-14 -4.20781315e-13 14.0704612 -4.20781315e-13 16.8354658 2.40668967 2.76500463 2.40668967"
-        ></polygon>
-        <filter
-          x="-107.9%"
-          y="-685.6%"
-          width="315.9%"
-          height="1471.2%"
-          filterUnits="objectBoundingBox"
-          id="filter-HuoQingDetailModal-1-8"
-        >
-          <feMorphology
-            radius="0.5"
-            operator="dilate"
-            in="SourceAlpha"
-            result="shadowSpreadOuter1"
-          ></feMorphology>
-          <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-          <feGaussianBlur
-            stdDeviation="5"
-            in="shadowOffsetOuter1"
-            result="shadowBlurOuter1"
-          ></feGaussianBlur>
-          <feColorMatrix
-            values="0 0 0 0 1   0 0 0 0 0.462494493   0 0 0 0 0  0 0 0 0.7 0"
-            type="matrix"
-            in="shadowBlurOuter1"
-          ></feColorMatrix>
-        </filter>
-        <polygon
-          id="path-HuoQingDetailModal-1-9"
-          points="20.0745787 6.12769321e-14 34.1450399 6.12769321e-14 36.9100445 2.40668967 22.8395833 2.40668967"
-        ></polygon>
-        <filter
-          x="-107.9%"
-          y="-685.6%"
-          width="315.9%"
-          height="1471.2%"
-          filterUnits="objectBoundingBox"
-          id="filter-HuoQingDetailModal-1-10"
-        >
-          <feMorphology
-            radius="0.5"
-            operator="dilate"
-            in="SourceAlpha"
-            result="shadowSpreadOuter1"
-          ></feMorphology>
-          <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-          <feGaussianBlur
-            stdDeviation="5"
-            in="shadowOffsetOuter1"
-            result="shadowBlurOuter1"
-          ></feGaussianBlur>
-          <feColorMatrix
-            values="0 0 0 0 1   0 0 0 0 0.462494493   0 0 0 0 0  0 0 0 0.7 0"
-            type="matrix"
-            in="shadowBlurOuter1"
-          ></feColorMatrix>
-        </filter>
-        <linearGradient
-          x1="50.3209681%"
-          y1="99.6790319%"
-          x2="50.3209681%"
-          y2="0.320968094%"
-          id="linearGradient-HuoQingDetailModal-1-11"
-        >
-          <stop
-            :stop-color="props.dataStyle.leftStopColor1"
-            stop-opacity="0.8"
-            offset="0.00819493007%"
-          ></stop>
-          <stop :stop-color="props.dataStyle.leftStopColor2" offset="38.6691434%"></stop>
-          <stop :stop-color="props.dataStyle.leftStopColor3" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient
-          x1="50.3209681%"
-          y1="99.6790319%"
-          x2="50.3209681%"
-          y2="0.320968094%"
-          id="linearGradient-HuoQingDetailModal-1-12"
-        >
-          <stop
-            :stop-color="props.dataStyle.leftStopColor1"
-            stop-opacity="0.8"
-            offset="0.00819493007%"
-          ></stop>
-          <stop :stop-color="props.dataStyle.leftStopColor2" offset="38.6691434%"></stop>
-          <stop :stop-color="props.dataStyle.leftStopColor3" offset="100%"></stop>
-        </linearGradient>
-      </defs>
-      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="林业防火-智库-切图版" transform="translate(-416, -168)">
-          <g id="编组-35" transform="translate(416, 168)">
-            <mask id="mask-2" fill="white">
-              <use xlink:href="#path-HuoQingDetailModal-1-1"></use>
-            </mask>
-            <g id="蒙版">
-              <use
-                fill="black"
-                fill-opacity="1"
-                filter="url(#filter-HuoQingDetailModal-1-3)"
-                xlink:href="#path-HuoQingDetailModal-1-1"
-              ></use>
-              <use
-                :stroke="props.dataStyle.allUseStrokeColor"
-                stroke-width="1.27969349"
-                :fill="props.dataStyle.allUseFillColor"
-                fill-rule="evenodd"
-                xlink:href="#path-HuoQingDetailModal-1-1"
-              ></use>
-            </g>
-            <g id="编组-34" transform="translate(0.2674, 0.0542)">
-              <g id="路径-22">
-                <use
-                  fill="black"
-                  fill-opacity="1"
-                  filter="url(#filter-HuoQingDetailModal-1-5)"
-                  xlink:href="#path-HuoQingDetailModal-1-4"
-                ></use>
-                <use
-                  :stroke="props.dataStyle.leftStrokeColor1"
-                  stroke-width="1.27969349"
-                  fill-opacity="0.85"
-                  :fill="props.dataStyle.leftFillColor"
-                  fill-rule="evenodd"
-                  xlink:href="#path-HuoQingDetailModal-1-4"
-                ></use>
-              </g>
-              <g
-                id="编组-5"
-                transform="translate(297.4837, 17.9031) scale(-1, 1) rotate(-180) translate(-297.4837, -17.9031)translate(198.9905, 15.9835)"
-              >
-                <line
-                  x1="-5.06780004e-13"
-                  y1="1.91954023"
-                  x2="196.976869"
-                  y2="1.91954023"
-                  id="路径-6"
-                  stroke="url(#linearGradient-HuoQingDetailModal-1-6)"
-                  stroke-width="1.27969349"
-                  opacity="0.399999976"
-                ></line>
-                <path
-                  d="M142.951484,3.83908046 C144.011153,3.83908046 144.870183,2.97967303 144.870183,1.91954023 C144.870183,0.859407434 144.011153,0 142.951484,0 C141.891816,0 141.032785,0.859407434 141.032785,1.91954023 C141.032785,2.97967303 141.891816,3.83908046 142.951484,3.83908046 Z"
-                  id="椭圆形"
-                  :fill="props.dataStyle.topLeftEllipseColor"
-                ></path>
-                <ellipse
-                  id="椭圆形"
-                  :fill="props.dataStyle.topLeftEllipseColor"
-                  cx="70.0409125"
-                  cy="1.91954023"
-                  rx="1.91869926"
-                  ry="1.91954023"
-                ></ellipse>
-              </g>
-              <path
-                d="M52.8631705,861.176833 L124.732625,861.176833 L124.732625,861.176833 L132.371139,853.956886 L276.274974,853.956886 L283.750917,861.176833 L381.026745,861.176833 C395.161849,861.176833 406.620615,849.718067 406.620615,835.582962 L406.620615,10.8647686 L406.620615,10.8647686 L56.6416991,10.8647686 C44.6268607,10.8647686 34.8869098,20.6047195 34.8869098,32.6195579 C34.8869098,32.6315283 34.8869197,32.6434986 34.8869394,32.6554689 L36.2271782,844.568279 C36.242327,853.745361 43.6860756,861.176833 52.8631705,861.176833 Z"
-                id="路径-22"
-                :stroke="props.dataStyle.leftStrokeColor2"
-                stroke-width="1.27969349"
-              ></path>
-              <g
-                id="编组"
-                transform="translate(150.0126, 859.9735) scale(1, -1) translate(-150.0126, -859.9735)translate(131.5576, 858.7701)"
-              >
-                <g id="矩形">
-                  <use
-                    fill="black"
-                    fill-opacity="1"
-                    filter="url(#filter-HuoQingDetailModal-1-8)"
-                    xlink:href="#path-HuoQingDetailModal-1-7"
-                  ></use>
-                  <use
-                    :fill="props.dataStyle.bottomLeftFillColor"
-                    fill-rule="evenodd"
-                    xlink:href="#path-HuoQingDetailModal-1-7"
-                  ></use>
-                </g>
-                <g id="矩形" opacity="0.399999976">
-                  <use
-                    fill="black"
-                    fill-opacity="1"
-                    filter="url(#filter-HuoQingDetailModal-1-10)"
-                    xlink:href="#path-HuoQingDetailModal-1-9"
-                  ></use>
-                  <use
-                    :fill="props.dataStyle.bottomLeftFillColor"
-                    fill-rule="evenodd"
-                    xlink:href="#path-HuoQingDetailModal-1-9"
-                  ></use>
-                </g>
-              </g>
-              <g
-                id="编组"
-                transform="translate(114.9289, 1.4324)"
-                :fill="props.dataStyle.topLeftFillColor"
-              >
-                <polygon
-                  id="矩形"
-                  points="-1.54661681e-14 -6.4452071e-13 21.5520588 -6.4452071e-13 25.7872819 3.68638359 4.2352231 3.68638359"
-                ></polygon>
-              </g>
-              <g
-                id="编组备份"
-                opacity="0.59407988"
-                transform="translate(147.9289, 1.4324)"
-                :fill="props.dataStyle.topLeftFillColor"
-              >
-                <polygon
-                  id="矩形"
-                  points="-1.54661681e-14 -6.4452071e-13 21.5520588 -6.4452071e-13 25.7872819 3.68638359 4.2352231 3.68638359"
-                ></polygon>
-              </g>
-              <polygon
-                id="路径-21"
-                fill="url(#linearGradient-HuoQingDetailModal-1-11)"
-                points="25 113.435276 25 26.2109979 51.1995145 8.19751628e-13 101.795125 8.19751628e-13 107.97292 4.73651289 54.0862279 4.73651289 29.7344378 29.0989765 29.7344378 120.104002"
-              ></polygon>
-              <polygon
-                id="路径-21"
-                fill="url(#linearGradient-HuoQingDetailModal-1-12)"
-                transform="translate(369.9569, 767.0012) scale(-1, -1) translate(-369.9569, -767.0012)"
-                points="329.913794 858.775264 329.913794 693.161091 354.341504 670.002367 405.265562 670.002367 410 673.294891 358.671574 673.294891 333.204875 698.772752 333.204875 864"
-              ></polygon>
-            </g>
-          </g>
-        </g>
-      </g>
-    </svg>
-  </div>
-</template>
-
-<script setup lang="ts">
-  const props = defineProps(['w', 'h', 'dataStyle']);
-</script>
diff --git a/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalLeft/config.ts b/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalLeft/config.ts
new file mode 100644
index 0000000..20b4aaa
--- /dev/null
+++ b/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalLeft/config.ts
@@ -0,0 +1,18 @@
+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { HuoQingDetailModalLeftConfig } from './index'
+
+export const option = {
+  dataStyle:{
+    mouseListener: true,
+  },
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = HuoQingDetailModalLeftConfig.key
+  public attr = { ...chartInitConfig, w: 394, h: 891, zIndex: -1 }
+  public chartConfig = cloneDeep(HuoQingDetailModalLeftConfig)
+  public option = cloneDeep(option)
+}
diff --git a/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalLeft/config.vue b/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalLeft/config.vue
new file mode 100644
index 0000000..f675030
--- /dev/null
+++ b/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalLeft/config.vue
@@ -0,0 +1,26 @@
+<template>
+  <CollapseItem name="弹窗设置" :expanded="true">
+    <SettingItemBox name="样式设置">
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.dataStyle.mouseListener" size="small" />
+          <n-text>是否开启弹窗拖动</n-text>
+        </n-space>
+      </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>
diff --git a/src/packages/components/Zhiku/Zhiku/HuoQingDetailModal/index.ts b/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalLeft/index.ts
similarity index 62%
rename from src/packages/components/Zhiku/Zhiku/HuoQingDetailModal/index.ts
rename to src/packages/components/Zhiku/Zhiku/HuoQingDetailModalLeft/index.ts
index b955aa0..5a761a8 100644
--- a/src/packages/components/Zhiku/Zhiku/HuoQingDetailModal/index.ts
+++ b/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalLeft/index.ts
@@ -1,11 +1,11 @@
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
-export const HuoQingDetailModalConfig: ConfigType = {
-  key: 'HuoQingDetailModal',
-  chartKey: 'VHuoQingDetailModal',
-  conKey: 'VCHuoQingDetailModal',
-  title: '火情详情弹窗框架',
+export const HuoQingDetailModalLeftConfig: ConfigType = {
+  key: 'HuoQingDetailModalLeft',
+  chartKey: 'VHuoQingDetailModalLeft',
+  conKey: 'VCHuoQingDetailModalLeft',
+  title: '火情详情弹窗框架（左）',
   category: ChatCategoryEnum.ZHIKU,
   categoryName: ChatCategoryEnumName.ZHIKU,
   package: PackagesCategoryEnum.ZHIKU,
diff --git a/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalLeft/index.vue b/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalLeft/index.vue
new file mode 100644
index 0000000..4bd2524
--- /dev/null
+++ b/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalLeft/index.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="HuoQingDetailModalLeft"> </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, PropType, toRefs, reactive } from 'vue';
+  import { CreateComponentType } from '@/packages/index.d';
+  import { icon } from '@/plugins';
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+  import { useChartDataFetch } from '@/hooks';
+  import cloneDeep from 'lodash/cloneDeep';
+
+  const chartEditStore = useChartEditStore();
+  const props = defineProps({
+    chartConfig: {
+      type: Object as PropType<CreateComponentType>,
+      required: true,
+    },
+  });
+
+  const { w, h, x, y } = toRefs(props.chartConfig.attr);
+
+  const option = reactive({
+    dataStyle: props.chartConfig.option.dataStyle,
+  });
+
+  // 添加鼠标拖动监听器
+  let isGroup = 0;
+  addListener();
+  // 监听器-参数
+  let isDragging = false;
+  let initialMouseX;
+  let initialMouseY;
+  let initialDocumentX;
+  let initialDocumentY;
+
+  // 添加鼠标拖动监听器
+  function addListener() {
+    if (option.dataStyle.mouseListener) {
+      chartEditStore.getComponentList.forEach((element) => {
+        // 未分组
+        if (isGroup == 1 || element.key == 'HuoQingDetailModalLeft') {
+          isGroup = 1;
+          setTimeout(() => {
+            const dragDocument: any = document.querySelector('.HuoQingDetailModalLeft');
+            if (dragDocument) {
+              // 鼠标按下
+              dragDocument.addEventListener('mousedown', function (event) {
+                isDragging = true;
+                initialMouseX = event.clientX;
+                initialMouseY = event.clientY;
+                initialDocumentX = cloneDeep(x.value);
+                initialDocumentY = cloneDeep(y.value);
+                dragDocument.style.cursor = 'grabbing';
+              });
+              // 鼠标移动
+              dragDocument.addEventListener('mousemove', function (event) {
+                if (isDragging) {
+                  const deltaX = event.clientX - initialMouseX;
+                  const deltaY = event.clientY - initialMouseY;
+                  x.value = initialDocumentX + deltaX;
+                  y.value = initialMouseY + deltaY;
+                }
+              });
+              // 鼠标放开
+              dragDocument.addEventListener('mouseup', function (event) {
+                isDragging = false;
+                dragDocument.style.cursor = 'default';
+              });
+            }
+          }, 1000);
+        }
+        // 分组
+        if (
+          isGroup == 2 ||
+          (element.isGroup && element?.groupList?.some((li) => li.key == 'HuoQingDetailModalLeft'))
+        ) {
+          isGroup = 2;
+          setTimeout(() => {
+            const dragDocument = document.getElementById(element.id); // 使用 id 获取元素
+            if (dragDocument) {
+              // 鼠标按下
+              dragDocument.addEventListener('mousedown', function (event) {
+                isDragging = true;
+                initialMouseX = event.clientX;
+                initialMouseY = event.clientY;
+                initialDocumentX = dragDocument.offsetLeft;
+                initialDocumentY = dragDocument.offsetTop;
+                dragDocument.style.cursor = 'grabbing';
+              });
+              // 鼠标移动
+              dragDocument.addEventListener('mousemove', function (event) {
+                if (isDragging) {
+                  const deltaX = event.clientX - initialMouseX;
+                  const deltaY = event.clientY - initialMouseY;
+                  dragDocument.style.left = initialDocumentX + deltaX + 'px';
+                  dragDocument.style.top = initialDocumentY + deltaY + 'px';
+                }
+              });
+              // 鼠标放开
+              dragDocument.addEventListener('mouseup', function (event) {
+                isDragging = false;
+                dragDocument.style.cursor = 'default';
+              });
+            }
+          }, 1000);
+        }
+      });
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .HuoQingDetailModalLeft {
+    width: v-bind('`${w}px`');
+    height: v-bind('`${h}px`');
+    background-image: url('@/assets/images/chart/zhiku/component/HuoQingDetailModalLeft.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+</style>
diff --git a/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalRight/config.ts b/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalRight/config.ts
new file mode 100644
index 0000000..5007014
--- /dev/null
+++ b/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalRight/config.ts
@@ -0,0 +1,15 @@
+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { HuoQingDetailModalRightConfig } from './index'
+
+export const option = {
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = HuoQingDetailModalRightConfig.key
+  public attr = { ...chartInitConfig, w: 935, h: 866, zIndex: -1 }
+  public chartConfig = cloneDeep(HuoQingDetailModalRightConfig)
+  public option = cloneDeep(option)
+}
diff --git a/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalRight/config.vue b/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalRight/config.vue
new file mode 100644
index 0000000..15e0a42
--- /dev/null
+++ b/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalRight/config.vue
@@ -0,0 +1,15 @@
+<template></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>
diff --git a/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalRight/index.ts b/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalRight/index.ts
new file mode 100644
index 0000000..8ac7e61
--- /dev/null
+++ b/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalRight/index.ts
@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const HuoQingDetailModalRightConfig: ConfigType = {
+  key: 'HuoQingDetailModalRight',
+  chartKey: 'VHuoQingDetailModalRight',
+  conKey: 'VCHuoQingDetailModalRight',
+  title: '火情详情弹窗框架(右)',
+  category: ChatCategoryEnum.ZHIKU,
+  categoryName: ChatCategoryEnumName.ZHIKU,
+  package: PackagesCategoryEnum.ZHIKU,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'HuoQingDetailModal.png'
+}
diff --git a/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalRight/index.vue b/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalRight/index.vue
new file mode 100644
index 0000000..893d23b
--- /dev/null
+++ b/src/packages/components/Zhiku/Zhiku/HuoQingDetailModalRight/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="HuoQingDetailModalRight"> </div>
+</template>
+
+<script setup lang="ts">
+  import { PropType, toRefs } from 'vue';
+  import { CreateComponentType } from '@/packages/index.d';
+  import { icon } from '@/plugins';
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+  import { useChartDataFetch } from '@/hooks';
+  import cloneDeep from 'lodash/cloneDeep';
+
+  const chartEditStore = useChartEditStore();
+  const props = defineProps({
+    chartConfig: {
+      type: Object as PropType<CreateComponentType>,
+      required: true,
+    },
+  });
+  const { w, h } = toRefs(props.chartConfig.attr);
+</script>
+
+<style lang="scss" scoped>
+  .HuoQingDetailModalRight {
+    width: v-bind('`${w}px`');
+    height: v-bind('`${h}px`');
+    background-image: url('@/assets/images/chart/zhiku/component/HuoQingDetailModalRight.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+</style>
diff --git a/src/packages/components/Zhiku/Zhiku/HuoQingDetailTimeLine/data.json b/src/packages/components/Zhiku/Zhiku/HuoQingDetailTimeLine/data.json
index 622c399..c71dae3 100644
--- a/src/packages/components/Zhiku/Zhiku/HuoQingDetailTimeLine/data.json
+++ b/src/packages/components/Zhiku/Zhiku/HuoQingDetailTimeLine/data.json
@@ -6,12 +6,7 @@
       "content": "临沂市，山东省辖地级市，位于山东省东南部，地跨北纬34°22′～36°13′，东经117°24′～119°11′之间，属温带季风气候，四季分明，雨热同季，地势自北而南有沂山、蒙山、尼山3条主要山脉延伸，控制着沂沭河上游及其支流的流向，向南构成的扇状临郯苍平原是山东三平原之一。",
       "time": "2025-02-11 01:27:14",
       "imageurl": [ "@/assets/images/chart/zhigan/component/ModalCarouselPng01.png", "@/assets/images/chart/zhigan/component/ModalCarouselPng02.png" ],
-      "videos": [ 
-        {
-          "title": "XZD153狼窝沟西南",
-          "videourl": "74b95e6575d741489b9a9061bb646467",
-          "manufacturer": "海康"
-        },         
+      "videos": [         
         {
           "title":"费县马庄镇陈家鱼后村南斜坡后村",
           "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv",
@@ -34,12 +29,7 @@
       "type": "success",
       "content": "",
       "time": "2025-02-11 01:27:15",
-      "imageurl": "@/assets/images/chart/zhigan/component/ModalCarouselPng03.png",
-      "videos": {
-        "title": "XZD153狼窝沟西南",
-        "videourl": "74b95e6575d741489b9a9061bb646467",
-        "manufacturer": "海康"
-      }
+      "imageurl": "@/assets/images/chart/zhigan/component/ModalCarouselPng03.png"
     },
     {
       "title":"临沂市",
diff --git a/src/packages/components/Zhiku/Zhiku/index.ts b/src/packages/components/Zhiku/Zhiku/index.ts
index 0c5f3ca..46f62f6 100644
--- a/src/packages/components/Zhiku/Zhiku/index.ts
+++ b/src/packages/components/Zhiku/Zhiku/index.ts
@@ -2,7 +2,8 @@ import { HuoQingButtonConfig } from "./HuoQingButton/index";
 
 import { HuoQingListConfig } from "./HuoQingList/index";
 
-import { HuoQingDetailModalConfig } from "./HuoQingDetailModal/index";
+import { HuoQingDetailModalLeftConfig } from "./HuoQingDetailModalLeft/index";
+import { HuoQingDetailModalRightConfig } from "./HuoQingDetailModalRight/index";
 import { HuoQingDetailModalCloseConfig } from "./HuoQingDetailModalClose/index";
 import { HuoQingDetailRadioConfig } from "./HuoQingDetailRadio/index";
 import { HuoQingDetailTiltButtonConfig } from "./HuoQingDetailTiltButton/index";
@@ -17,7 +18,8 @@ export default [
     
     HuoQingListConfig, 
 
-    HuoQingDetailModalConfig,
+    HuoQingDetailModalLeftConfig,
+    HuoQingDetailModalRightConfig,
     HuoQingDetailModalCloseConfig,
     HuoQingDetailRadioConfig,
     HuoQingDetailTiltButtonConfig,