diff --git a/src/assets/images/chart/zhilan/ZhiLan_ZhongZhiShuLiangMianJi.png b/src/assets/images/chart/zhilan/ZhiLan_ZhongZhiShuLiangMianJi.png
new file mode 100644
index 0000000..d355e6e
Binary files /dev/null and b/src/assets/images/chart/zhilan/ZhiLan_ZhongZhiShuLiangMianJi.png differ
diff --git a/src/assets/images/chart/zhilan/weixingyaogan.gif b/src/assets/images/chart/zhilan/weixingyaogan.gif
new file mode 100644
index 0000000..5fb2daf
Binary files /dev/null and b/src/assets/images/chart/zhilan/weixingyaogan.gif differ
diff --git a/src/packages/components/Informations/Mores/Image/config.vue b/src/packages/components/Informations/Mores/Image/config.vue
index 8383672..b333c42 100644
--- a/src/packages/components/Informations/Mores/Image/config.vue
+++ b/src/packages/components/Informations/Mores/Image/config.vue
@@ -3,6 +3,7 @@
     <setting-item-box name="路径" :alone="true">
       <setting-item>
         <n-input v-model:value="optionData.dataset" size="small"></n-input>
+        <n-button @click="openModal">修改图片</n-button>
       </setting-item>
     </setting-item-box>
     <setting-item-box name="样式">
@@ -22,17 +23,30 @@
         ></n-input-number>
       </setting-item>
     </setting-item-box>
+    <a-modal 
+      class="photo-control-modal"
+      v-model:open="openChangePhotoModal"
+      width="1340px"
+      style="top: 90px"
+      :footer="null"
+      :closable="false"
+      :zIndex="3000"
+      :destroyOnClose="true"
+    >
+      <PhotoModal :readonly="true" @closePhotoModal="closePhotoModal" @saveChangePhoto="saveChangePhoto"/>
+    </a-modal>
   </collapse-item>
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, ref } from 'vue'
 import { option } from './config'
 import {
   CollapseItem,
   SettingItemBox,
   SettingItem,
 } from '@/components/Pages/ChartItemSetting'
+import PhotoModal from '@/views/chart/ContentCharts/components/PhotoModal/index.vue'
 
 const props = defineProps({
   optionData: {
@@ -40,6 +54,14 @@ const props = defineProps({
     required: true,
   },
 })
+const openChangePhotoModal = ref(false)
+const closePhotoModal = () => {
+  openChangePhotoModal.value = false
+}
+const saveChangePhoto = (url) => {
+  props.optionData.dataset = url
+  openChangePhotoModal.value = false
+}
 
 // 适应类型
 const fitList = [
@@ -64,4 +86,7 @@ const fitList = [
     label: 'none'
   },
 ]
+const openModal = () => {
+  openChangePhotoModal.value = true
+}
 </script>
diff --git a/src/packages/components/Tasks/Tasks/TaskBanner/config.ts b/src/packages/components/Tasks/Tasks/TaskBanner/config.ts
index eb9771b..3335394 100644
--- a/src/packages/components/Tasks/Tasks/TaskBanner/config.ts
+++ b/src/packages/components/Tasks/Tasks/TaskBanner/config.ts
@@ -10,37 +10,39 @@ export const option = {
   titleSize: 15,
   desColor: '#FFFFFF',
   desSize: 15,
-  bannerArr: [
-    "/src/assets/images/chart/tasks/bannerimg1.png",
-    "/src/assets/images/chart/tasks/bannerimg1.png",
-    "/src/assets/images/chart/tasks/bannerimg1.png",
-  ],
-  dataset:[
-    {
-      title: '预警描述',
-      desc: '费县马庄镇牛田村村委东北方向375.75° 1.197公里处发现火情'
-    },
-    {
-      title: '水平角',
-      desc: '375.75°'
-    },
-    {
-      title: '俯视角',
-      desc: '98.5°'
-    },
-    {
-      title: '经纬度',
-      desc: '117.90911,3012349'
-    },
-    {
-      title: '预警时间',
-      desc: '2024.12.24 13:08:07'
-    },
-    {
-      title: '线索来源',
-      desc: '无人机上报'
-    }
-  ]
+  dataset:{
+    data: [
+      {
+        title: '预警描述',
+        desc: '费县马庄镇牛田村村委东北方向375.75° 1.197公里处发现火情'
+      },
+      {
+        title: '水平角',
+        desc: '375.75°'
+      },
+      {
+        title: '俯视角',
+        desc: '98.5°'
+      },
+      {
+        title: '经纬度',
+        desc: '117.90911,3012349'
+      },
+      {
+        title: '预警时间',
+        desc: '2024.12.24 13:08:07'
+      },
+      {
+        title: '线索来源',
+        desc: '无人机上报'
+      }
+    ],
+    imgArr: [
+      "/src/assets/images/chart/tasks/bannerimg1.png",
+      "/src/assets/images/chart/tasks/bannerimg1.png",
+      "/src/assets/images/chart/tasks/bannerimg1.png",
+    ]
+  }
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
diff --git a/src/packages/components/Tasks/Tasks/TaskBanner/index.ts b/src/packages/components/Tasks/Tasks/TaskBanner/index.ts
index bbb7cf3..270070f 100644
--- a/src/packages/components/Tasks/Tasks/TaskBanner/index.ts
+++ b/src/packages/components/Tasks/Tasks/TaskBanner/index.ts
@@ -9,6 +9,6 @@ export const TaskBannerConfig: ConfigType = {
   category: ChatCategoryEnum.TITLE,
   categoryName: ChatCategoryEnumName.TITLE,
   package: PackagesCategoryEnum.TASKS,
-  chartFrame: ChartFrameEnum.STATIC,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'banner.png',
 };
diff --git a/src/packages/components/Tasks/Tasks/TaskBanner/index.vue b/src/packages/components/Tasks/Tasks/TaskBanner/index.vue
index 429f634..57d6732 100644
--- a/src/packages/components/Tasks/Tasks/TaskBanner/index.vue
+++ b/src/packages/components/Tasks/Tasks/TaskBanner/index.vue
@@ -2,13 +2,13 @@
   <div  class="go-title-03">
     <div class="bannerbox">
       <a-carousel autoplay dots-class="slick-dots slick-thumb" preview-disabled>
-        <div v-for="item in bannerArr">
+        <div v-for="item in dataset.imgArr">
           <a-image :src="item" />
         </div>
       </a-carousel>
     </div>
     <div class="flex column sectionsbox">
-      <div class="flex mt-1" v-for="item in dataset">
+      <div class="flex mt-1" v-for="item in dataset.data">
         <div class="flex ai-c jc-c tasktitlesbox">
           <div class="dots"></div>
           <div class="titleText">{{ item.title }}</div>
@@ -39,12 +39,11 @@ const {
   titleColor,
   desColor,
   desSize,
-  bannerArr,
   dataset
 } = toRefs(props.chartConfig.option)
 
 // 数据callback处理（预览时触发）
-useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any) => {
   props.chartConfig.option.dataset = resData;
 });
 </script>
diff --git a/src/packages/components/Tasks/Tasks/TaskRadio/config.ts b/src/packages/components/Tasks/Tasks/TaskRadio/config.ts
index ec259fd..3507919 100644
--- a/src/packages/components/Tasks/Tasks/TaskRadio/config.ts
+++ b/src/packages/components/Tasks/Tasks/TaskRadio/config.ts
@@ -1,5 +1,5 @@
 import { PublicConfigClass } from '@/packages/public'
-import { chartInitConfig } from '@/settings/designSetting'
+import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
 import { CreateComponentType } from '@/packages/index.d'
 import { TaskRadioConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -23,4 +23,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public attr = { ...chartInitConfig, w: 484, h: 40, zIndex: 1 }
   public chartConfig = cloneDeep(TaskRadioConfig)
   public option = cloneDeep(option)
+  public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
+  public filter = "return res.result;"
 }
diff --git a/src/packages/components/Tasks/Tasks/TaskRadio/index.ts b/src/packages/components/Tasks/Tasks/TaskRadio/index.ts
index b63be3e..064679d 100644
--- a/src/packages/components/Tasks/Tasks/TaskRadio/index.ts
+++ b/src/packages/components/Tasks/Tasks/TaskRadio/index.ts
@@ -9,6 +9,6 @@ export const TaskRadioConfig: ConfigType = {
   category: ChatCategoryEnum.TITLE,
   categoryName: ChatCategoryEnumName.TITLE,
   package: PackagesCategoryEnum.TASKS,
-  chartFrame: ChartFrameEnum.STATIC,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'radiobg.png',
 };
diff --git a/src/packages/components/Tasks/Tasks/TaskRadio/index.vue b/src/packages/components/Tasks/Tasks/TaskRadio/index.vue
index 2cba44d..76b669b 100644
--- a/src/packages/components/Tasks/Tasks/TaskRadio/index.vue
+++ b/src/packages/components/Tasks/Tasks/TaskRadio/index.vue
@@ -9,6 +9,8 @@
 <script setup lang="ts">
 import { PropType, toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks';
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
 
 const props = defineProps({
   chartConfig: {
@@ -26,6 +28,10 @@ const {
   dataValue,
   dataset
 } = toRefs(props.chartConfig.option)
+// 数据callback处理（预览时触发）
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
+  props.chartConfig.option.dataValue = JSON.stringify(resData);
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/components/Tasks/Tasks/TaskTextArea/index.ts b/src/packages/components/Tasks/Tasks/TaskTextArea/index.ts
index d114bd9..ba9cd2a 100644
--- a/src/packages/components/Tasks/Tasks/TaskTextArea/index.ts
+++ b/src/packages/components/Tasks/Tasks/TaskTextArea/index.ts
@@ -9,6 +9,6 @@ export const TaskTextAreaConfig: ConfigType = {
   category: ChatCategoryEnum.TITLE,
   categoryName: ChatCategoryEnumName.TITLE,
   package: PackagesCategoryEnum.TASKS,
-  chartFrame: ChartFrameEnum.STATIC,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'textareabg.png',
 };
diff --git a/src/packages/components/Units/Titles/LeftCharts/data.json b/src/packages/components/Units/Titles/LeftCharts/data.json
index b0dbe05..5d4add3 100644
--- a/src/packages/components/Units/Titles/LeftCharts/data.json
+++ b/src/packages/components/Units/Titles/LeftCharts/data.json
@@ -1,33 +1,32 @@
 {
-  "dimensions": ["product", "data1"],
   "source": [
     {
-      "product": "Mon",
-      "data1": 120
+      "label": "Mon",
+      "value": 120
     },
     {
-      "product": "Tue",
-      "data1": 200
+      "label": "Tue",
+      "value": 200
     },
     {
-      "product": "Wed",
-      "data1": 150
+      "label": "Wed",
+      "value": 150
     },
     {
-      "product": "Thu",
-      "data1": 80
+      "label": "Thu",
+      "value": 80
     },
     {
-      "product": "Fri",
-      "data1": 70
+      "label": "Fri",
+      "value": 70
     },
     {
-      "product": "Sat",
-      "data1": 110
+      "label": "Sat",
+      "value": 110
     },
     {
-      "product": "Sun",
-      "data1": 130
+      "label": "Sun",
+      "value": 130
     }
   ]
 }
diff --git a/src/packages/components/Units/Titles/LeftCharts/index.ts b/src/packages/components/Units/Titles/LeftCharts/index.ts
index 2dff90c..fa285f9 100644
--- a/src/packages/components/Units/Titles/LeftCharts/index.ts
+++ b/src/packages/components/Units/Titles/LeftCharts/index.ts
@@ -9,6 +9,6 @@ export const LeftChartsConfig: ConfigType = {
   category: ChatCategoryEnum.TITLE,
   categoryName: ChatCategoryEnumName.TITLE,
   package: PackagesCategoryEnum.UNITS,
-  chartFrame: ChartFrameEnum.STATIC,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'leftchartsbg.png'
 }
diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalFrame/index.ts b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalFrame/index.ts
index 60c672d..427fa5a 100644
--- a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalFrame/index.ts
+++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalFrame/index.ts
@@ -5,7 +5,7 @@ export const ZhiChu_ModalFrameConfig: ConfigType = {
   key: 'ZhiChu_ModalFrame',
   chartKey: 'VZhiChu_ModalFrame',
   conKey: 'VCZhiChu_ModalFrame',
-  title: '弹窗框架',
+  title: '在线人员弹窗框架',
   category: ChatCategoryEnum.ZHICHU,
   categoryName: ChatCategoryEnumName.ZHICHU,
   package: PackagesCategoryEnum.ZHICHU,
diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalFrameClose/index.ts b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalFrameClose/index.ts
index 673ca90..0cd24f6 100644
--- a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalFrameClose/index.ts
+++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalFrameClose/index.ts
@@ -5,7 +5,7 @@ export const ZhiChu_ModalFrameCloseConfig: ConfigType = {
   key: 'ZhiChu_ModalFrameClose',
   chartKey: 'VZhiChu_ModalFrameClose',
   conKey: 'VCZhiChu_ModalFrameClose',
-  title: '弹窗关闭按钮',
+  title: '在线人员弹窗关闭按钮',
   category: ChatCategoryEnum.ZHICHU,
   categoryName: ChatCategoryEnumName.ZHICHU,
   package: PackagesCategoryEnum.ZHICHU,
diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.ts b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.ts
index 754ff1d..764b155 100644
--- a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.ts
+++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.ts
@@ -5,34 +5,28 @@ import { chartInitConfig } from '@/settings/designSetting'
 import { ZhiChu_ModalTableConfig } from './index'
 import dataJson from './data.json'
 
-const {header, source} = dataJson;
+const {header, source, filterset} = dataJson;
 
 export const option = {
   header: header,
   dataset: source,
+  filterset: filterset,
   dataStyle: {
-    mapshow: ['水源', '物资', '营房', '防火通道', '', ],
-    distance: '1',
+    colLeft: 4,
 
-    // filterSet: [
-    //   { label: '地图显示', field:'circle', showType: '', value: ''},
-    //   { label: '资源列表', field:'', showType: '', value: ''},
-    //   { label: '重点资源', field:'', showType: '', value: ''},
-    //   { label: '距离', field:'', showType: '', value: ''},
-    // ],
-    
-    filterHeight: 200,
-    filterMarginTop: 40,
+    filterMarginTop: 20,
     filterMarginLeft: 50,
+    filterItemHeight: 45,
+
+    filterTitleAlign: 'left',
     filterTitleFontSize: 24,
     filterTitleFontColor: '#ADFFC0',
-    filterTitleWidth: 100,
-    filterTitleMarginRight: 20,
 
+    filterContentAlign: 'left',
     filterChooseFontSize: 18,
     filterChooseFontColor: '#FFFFFF',
 
-    tableMarginTop: 10,
+    tableMarginTop: 20,
     tableMarginLeft: 20,
     tableBordered: false,
     tableSigleColumn: true,
@@ -41,9 +35,9 @@ export const option = {
     tableSize: 'small',
     tableAlign: 'center',
     // 表头
-    tableHeaderShow: true,
+    tableHeaderShow: false,
     // 序号
-    orderBumberShow: true,
+    orderBumberShow: false,
     // 操作
     buttonDivShow: true,
     buttonDivShow1: true,
@@ -57,6 +51,9 @@ export const option = {
     tableHeaderBackgroud: '#FFFFFF',
     tableHeaderFontSize: 20,
     tableHeaderFontColor: '#000000',
+
+    tableDataBackgroudShow: false,
+    tableDataBackgroud: '#FFFFFF',
     tableDataFontSize: 20,
     tableDataFontColor: '#FFFFFF',
   },
@@ -64,7 +61,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = ZhiChu_ModalTableConfig.key
-  public attr = { ...chartInitConfig, w: 995, h: 544, zIndex: -1 }
+  public attr = { ...chartInitConfig, w: 1060, h: 570, zIndex: -1 }
   public chartConfig = cloneDeep(ZhiChu_ModalTableConfig)
   public option = cloneDeep(option)
 }
diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.vue b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.vue
index 3ea7e7d..ec15759 100644
--- a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.vue
+++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.vue
@@ -1,121 +1,406 @@
 <template>
+  <!-- 筛选项数据显示设置 -->
+  <CollapseItem name="筛选项数据显示设置" :expanded="true">
+    <span style="font-size: 12px; margin-left: 8px"> 筛选项字段与类型 </span>
+    <div style="overflow-x: auto">
+      <n-table
+        class="go-request-header-table-box"
+        style="margin-top: 12px"
+        :single-line="false"
+        size="small"
+      >
+        <thead>
+          <tr>
+            <th>标题名称</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, index) in props.optionData.filterset" :key="index">
+            <td>
+              <n-input v-model:value="item.title" type="text" size="small" />
+            </td>
+            <td>
+              <div style="width: 70px">
+                <n-button
+                  class="go-ml-2"
+                  type="primary"
+                  size="small"
+                  ghost
+                  @click="
+                    props.optionData.filterset.splice(index + 1, 0, {
+                      title: null,
+                      field: null,
+                      compareType: null,
+                      showType: null,
+                      value: [],
+                      options: [{ label: null, value: null }],
+                    })
+                  "
+                >
+                  +
+                </n-button>
+                <n-button
+                  class="go-ml-2"
+                  type="warning"
+                  size="small"
+                  ghost
+                  :disabled="props.optionData.filterset.length === 1"
+                  @click="
+                    if (props.optionData.filterset.length !== 1) {
+                      props.optionData.filterset.splice(index, 1);
+                    }
+                  "
+                >
+                  -
+                </n-button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </n-table>
+    </div>
+  </CollapseItem>
+  <CollapseItem
+    :expanded="false"
+    v-for="(filtersetItem, filtersetIndex) in optionData.filterset"
+    :key="filtersetIndex"
+    :alone="false"
+    :name="'筛选项【' + filtersetItem.title + '】设置'"
+  >
+    <SettingItem name="筛选类型">
+      <n-select
+        v-model:value="filtersetItem.showType"
+        :options="[
+          { label: '多选框', value: 'checkbox' },
+          { label: '单选框', value: 'radio' },
+          { label: '下拉框', value: 'select' },
+          { label: '下拉框（多选）', value: 'selectGroup' },
+          { label: '按钮组', value: 'buttonGroup' },
+          { label: '按钮组（多选）', value: 'buttonGroupList' },
+          { label: '列搜索框', value: 'inputSearch' },
+          { label: '全数据搜索框', value: 'inputSearchAll' },
+          { label: '时间选择器', value: 'timePicker' },
+          { label: '时间范围', value: 'timeRange' },
+          { label: '日期范围', value: 'dateRange' },
+        ]"
+        clearable
+        size="small"
+        placeholder="筛选类型"
+        @change="
+          filtersetItem.compareType = null;
+          filtersetItem.value = null;
+        "
+      />
+    </SettingItem>
+    <SettingItem v-if="!['inputSearchAll'].includes(filtersetItem.showType)" name="对应字段">
+      <n-select
+        v-model:value="filtersetItem.field"
+        :options="columnsOptions"
+        size="small"
+        clearable
+        placeholder="对应字段"
+      />
+    </SettingItem>
+    <SettingItem name="筛选方式">
+      <n-select
+        v-model:value="filtersetItem.compareType"
+        :options="getOptionsByShowType(filtersetItem)"
+        clearable
+        size="small"
+        placeholder="筛选方式"
+      />
+    </SettingItem>
+
+    <!-- 默认值，搜索框无默认值 -->
+    <SettingItem
+      v-if="!['inputSearch', 'inputSearchAll'].includes(filtersetItem.showType)"
+      name="默认值"
+    >
+      <!-- 多选框、下拉框（多选）、按钮组 （多选）-->
+      <n-select
+        v-if="['checkbox', 'selectGroup', 'buttonGroupList'].includes(filtersetItem.showType)"
+        v-model:value="filtersetItem.value"
+        :options="filtersetItem.options"
+        multiple
+        clearable
+        size="small"
+        placeholder="默认值"
+      />
+      <!-- 时间选择器 -->
+      <n-time-picker
+        v-else-if="['timePicker'].includes(filtersetItem.showType)"
+        v-model:formatted-value="filtersetItem.value"
+        value-format="HH:mm:ss"
+        format="HH:mm:ss"
+        size="small"
+        clearable
+        placeholder="默认时间"
+      />
+      <!-- 时间范围 -->
+      <div v-else-if="['timeRange'].includes(filtersetItem.showType)">
+        <n-time-picker
+          v-model:formatted-value="filtersetItem.value"
+          value-format="HH:mm:ss"
+          format="HH:mm:ss"
+          size="small"
+          clearable
+          placeholder="开始时间"
+        />
+        <n-time-picker
+          v-model:formatted-value="filtersetItem.value2"
+          value-format="HH:mm:ss"
+          format="HH:mm:ss"
+          size="small"
+          clearable
+          placeholder="结束时间"
+        />
+      </div>
+      <!-- 日期范围 -->
+      <n-date-picker
+        v-else-if="['dateRange'].includes(filtersetItem.showType)"
+        v-model:formatted-value="filtersetItem.value"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        format="yyyy-MM-dd HH:mm:ss"
+        type="datetimerange"
+        size="small"
+        clearable
+      />
+      <!-- 其他 -->
+      <n-select
+        v-else
+        v-model:value="filtersetItem.value"
+        :options="filtersetItem.options"
+        clearable
+        size="small"
+        placeholder="默认值"
+      />
+    </SettingItem>
+
+    <!-- 搜索框、时间日期框无选项 -->
+    <div style="overflow-x: auto">
+      <n-table
+        v-if="
+          !['inputSearch', 'inputSearchAll', 'timePicker', 'timeRange', 'dateRange'].includes(
+            filtersetItem.showType,
+          )
+        "
+        class="go-request-header-table-box"
+        style="margin-top: 12px"
+        :single-line="false"
+        size="small"
+      >
+        <thead>
+          <tr>
+            <th>名称</th>
+            <th>值</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(optionsItem, optionsIndex) in filtersetItem.options" :key="optionsIndex">
+            <td>
+              <n-input
+                v-model:value="optionsItem.label"
+                type="text"
+                size="small"
+                placeholder="名称"
+              />
+            </td>
+            <td>
+              <n-input
+                v-model:value="optionsItem.value"
+                type="text"
+                size="small"
+                placeholder="值"
+              />
+            </td>
+            <td>
+              <div style="width: 70px">
+                <n-button
+                  class="go-ml-2"
+                  type="primary"
+                  size="small"
+                  ghost
+                  @click="
+                    filtersetItem.options.splice(optionsIndex + 1, 0, {
+                      label: null,
+                      value: null,
+                    })
+                  "
+                >
+                  +
+                </n-button>
+                <n-button
+                  class="go-ml-2"
+                  type="warning"
+                  size="small"
+                  ghost
+                  :disabled="optionsItem.length === 1"
+                  @click="
+                    if (filtersetItem.options.length !== 1) {
+                      filtersetItem.options.splice(optionsIndex, 1);
+                    }
+                  "
+                >
+                  -
+                </n-button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </n-table>
+    </div>
+  </CollapseItem>
+
+  <br />
+  <!-- 筛选项样式设置 -->
+  <CollapseItem name="筛选项样式设置" :expanded="true">
+    <SettingItemBox :alone="false" name="整体设置">
+      <SettingItem :alone="false" name="上方距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.filterMarginTop"
+          :min="0"
+          size="small"
+          placeholder="上方距离"
+        />
+      </SettingItem>
+      <SettingItem :alone="false" name="左右距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.filterMarginLeft"
+          :min="0"
+          size="small"
+          placeholder="左右距离"
+        />
+      </SettingItem>
+      <SettingItem :alone="false" name="单个筛选项高度">
+        <n-input-number
+          v-model:value="optionData.dataStyle.filterItemHeight"
+          :min="0"
+          size="small"
+          placeholder="单个筛选项高度"
+        />
+      </SettingItem>
+      <SettingItem name="标题对齐方式">
+        <n-select
+          v-model:value="optionData.dataStyle.filterTitleAlign"
+          :options="[
+            { label: '靠左', value: 'left' },
+            { label: '居中', value: 'center' },
+            { label: '靠右', value: 'right' },
+          ]"
+          size="small"
+        />
+      </SettingItem>
+      <SettingItem name="内容对齐方式">
+        <n-select
+          v-model:value="optionData.dataStyle.filterContentAlign"
+          :options="[
+            { label: '靠左', value: 'left' },
+            { label: '居中', value: 'center' },
+            { label: '靠右', value: 'right' },
+          ]"
+          size="small"
+        />
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox :alone="false" name="标题样式">
+      <SettingItem :alone="false" name="标题占比">
+        <n-space vertical>
+          <n-slider v-model:value="optionData.dataStyle.colLeft" :step="1" :min="0" :max="24" />
+          <n-input-number v-model:value="optionData.dataStyle.colLeft" size="small">
+            <template #suffix> / 24 </template>
+          </n-input-number>
+        </n-space>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox :alone="false" name="字体设置">
+      <SettingItem name="筛选标题字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.filterTitleFontColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="筛选标题字体大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.filterTitleFontSize"
+          :min="0"
+          size="small"
+          placeholder="筛选标题字体大小"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="筛选内容字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.filterChooseFontColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="筛选内容字体大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.filterChooseFontSize"
+          :min="0"
+          size="small"
+          placeholder="筛选内容字体大小"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+
   <CollapseItem name="表格数据显示设置" :expanded="true">
     <span style="font-size: 12px; margin-left: 8px">
       表格数据（请先确定数据部分，再确定表格数据）
     </span>
-    <n-table
-      class="go-request-header-table-box"
-      style="margin-top: 12px"
-      :single-line="false"
-      size="small"
-    >
-      <thead>
-        <tr>
-          <th></th>
-          <th>表头名称</th>
-          <th>表格字段</th>
-          <th>操作</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(item, index) in props.optionData.header" :key="index">
-          <td>
-            {{ index + 1 }}
-          </td>
-          <td>
-            <n-input v-model:value="item.title" type="text" size="small" />
-          </td>
-          <td>
-            <n-select v-model:value="item.key" :options="columnsOptions" size="small" />
-          </td>
-          <td>
-            <div style="width: 70px">
-              <n-button class="go-ml-2" type="primary" size="small" ghost @click="add(index)">
-                +
-              </n-button>
-              <n-button
-                class="go-ml-2"
-                type="warning"
-                size="small"
-                ghost
-                :disabled="props.optionData.header.length === 1"
-                @click="remove(index)"
-              >
-                -
-              </n-button>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </n-table>
+    <div style="overflow-x: auto">
+      <n-table
+        class="go-request-header-table-box"
+        style="margin-top: 12px"
+        :single-line="false"
+        size="small"
+      >
+        <thead>
+          <tr>
+            <th></th>
+            <th>表头名称</th>
+            <th>表格字段</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, index) in props.optionData.header" :key="index">
+            <td>
+              {{ index + 1 }}
+            </td>
+            <td>
+              <n-input v-model:value="item.title" type="text" size="small" />
+            </td>
+            <td>
+              <n-select v-model:value="item.key" :options="columnsOptions" size="small" />
+            </td>
+            <td>
+              <div style="width: 70px">
+                <n-button class="go-ml-2" type="primary" size="small" ghost @click="add(index)">
+                  +
+                </n-button>
+                <n-button
+                  class="go-ml-2"
+                  type="warning"
+                  size="small"
+                  ghost
+                  :disabled="props.optionData.header.length === 1"
+                  @click="remove(index)"
+                >
+                  -
+                </n-button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </n-table>
+    </div>
 
-    <br />
-    <span style="font-size: 12px; margin-left: 8px"> 表格数据（前缀和后缀） </span>
-    <n-table
-      class="go-request-header-table-box"
-      style="margin-top: 12px"
-      :single-line="false"
-      size="small"
-    >
-      <thead>
-        <tr>
-          <th>表头名称</th>
-          <th>前缀</th>
-          <th>后缀</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(item, index) in props.optionData.header" :key="index">
-          <td>
-            {{ item.title }}
-          </td>
-          <td>
-            <n-input v-model:value="item.prefix" size="small" placeholder="前缀" />
-          </td>
-          <td>
-            <n-input v-model:value="item.suffix" size="small" placeholder="后缀" />
-          </td>
-        </tr>
-      </tbody>
-    </n-table>
-
-    <br />
-    <span style="font-size: 12px; margin-left: 8px"> 表格数据（数据格式转换） </span>
-    <n-table
-      class="go-request-header-table-box"
-      style="margin-top: 12px"
-      :single-line="false"
-      size="small"
-    >
-      <thead>
-        <tr>
-          <th>表头名称</th>
-          <th>数据格式转换</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(item, index) in props.optionData.header" :key="index">
-          <td style="width: 70px">
-            {{ item.title }}
-          </td>
-          <td>
-            <n-select
-              v-model:value="item.convert"
-              :options="[
-                { label: '小数点保留后两位', value: '0' },
-                { label: '转换时间格式（例：0小时0分钟0秒）', value: '1' },
-              ]"
-              clearable
-              size="small"
-              placeholder="数据格式转换"
-            />
-          </td>
-        </tr>
-      </tbody>
-    </n-table>
-  </CollapseItem>
-
-  <CollapseItem name="表格样式设置" :expanded="true">
     <SettingItemBox :alone="true" name="表格宽度">
       <SettingItem :alone="true" name="不包含序列和操作列">
         <n-input v-model:value="columnsWidths" type="text" size="small" />
@@ -137,47 +422,78 @@
         />
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="整体设置">
-      <SettingItem name="上方距离">
-        <n-input-number
-          v-model:value="optionData.dataStyle.tableMarginTop"
-          :min="0"
-          size="small"
-          placeholder="上方距离"
-        />
-      </SettingItem>
-      <SettingItem name="左右距离">
-        <n-input-number
-          v-model:value="optionData.dataStyle.tableMarginLeft"
-          :min="0"
-          size="small"
-          placeholder="左右距离"
-        />
-      </SettingItem>
 
-      <SettingItem name="对齐方式">
-        <n-select
-          v-model:value="optionData.dataStyle.tableAlign"
-          size="small"
-          :options="[
-            { label: '靠左', value: 'left' },
-            { label: '居中', value: 'center' },
-            { label: '靠右', value: 'right' },
-          ]"
-        />
-      </SettingItem>
-      <SettingItem name="表格尺寸大小">
-        <n-select
-          v-model:value="optionData.dataStyle.tableSize"
-          size="small"
-          :options="[
-            { label: '小', value: 'small' },
-            { label: '中', value: 'medium' },
-            { label: '大', value: 'large' },
-          ]"
-        />
-      </SettingItem>
-    </SettingItemBox>
+    <span style="font-size: 12px; margin-left: 8px"> 表格数据（前缀和后缀） </span>
+    <div style="overflow-x: auto">
+      <n-table
+        class="go-request-header-table-box"
+        style="margin-top: 12px"
+        :single-line="false"
+        size="small"
+      >
+        <thead>
+          <tr>
+            <th>表头名称</th>
+            <th>前缀</th>
+            <th>后缀</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, index) in props.optionData.header" :key="index">
+            <td>
+              {{ item.title }}
+            </td>
+            <td>
+              <n-input v-model:value="item.prefix" size="small" placeholder="前缀" />
+            </td>
+            <td>
+              <n-input v-model:value="item.suffix" size="small" placeholder="后缀" />
+            </td>
+          </tr>
+        </tbody>
+      </n-table>
+    </div>
+
+    <br />
+    <span style="font-size: 12px; margin-left: 8px"> 表格数据（数据格式转换） </span>
+    <div style="overflow-x: auto">
+      <n-table
+        class="go-request-header-table-box"
+        style="margin-top: 12px"
+        :single-line="false"
+        size="small"
+      >
+        <thead>
+          <tr>
+            <th>表头名称</th>
+            <th>数据格式转换</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, index) in props.optionData.header" :key="index">
+            <td style="width: 70px">
+              {{ item.title }}
+            </td>
+            <td>
+              <n-select
+                v-model:value="item.convert"
+                :options="[
+                  { label: '小数点保留后两位', value: '0' },
+                  { label: '转换时间格式（例：0小时0分钟0秒）', value: '1' },
+                  { label: '转换日期格式（例：2025-01-01）', value: '2' },
+                  { label: '转换日期格式（例：2025/01/01）', value: '3' },
+                  { label: '转换日期格式（例：2025-01-01 00:00:00）', value: '4' },
+                ]"
+                clearable
+                size="small"
+                placeholder="数据格式转换"
+              />
+            </td>
+          </tr>
+        </tbody>
+      </n-table>
+    </div>
+
     <SettingItemBox :alone="false" name="显示设置">
       <SettingItem name="是否显示边框">
         <n-space>
@@ -226,14 +542,58 @@
         </n-space>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox :alone="false" name="字体设置">
-      <!-- <SettingItem name="表头背景颜色">
+  </CollapseItem>
+
+  <CollapseItem name="表格样式设置" :expanded="true">
+    <SettingItemBox name="整体设置">
+      <SettingItem name="上方距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.tableMarginTop"
+          :min="0"
+          size="small"
+          placeholder="上方距离"
+        />
+      </SettingItem>
+      <SettingItem name="左右距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.tableMarginLeft"
+          :min="0"
+          size="small"
+          placeholder="左右距离"
+        />
+      </SettingItem>
+
+      <SettingItem name="对齐方式">
+        <n-select
+          v-model:value="optionData.dataStyle.tableAlign"
+          :options="[
+            { label: '靠左', value: 'left' },
+            { label: '居中', value: 'center' },
+            { label: '靠右', value: 'right' },
+          ]"
+          size="small"
+        />
+      </SettingItem>
+      <SettingItem name="表格尺寸大小">
+        <n-select
+          v-model:value="optionData.dataStyle.tableSize"
+          :options="[
+            { label: '小', value: 'small' },
+            { label: '中', value: 'medium' },
+            { label: '大', value: 'large' },
+          ]"
+          size="small"
+        />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox :alone="false" name="表头设置">
+      <SettingItem name="表头背景颜色">
         <n-color-picker
           size="small"
           :modes="['hex']"
           v-model:value="optionData.dataStyle.tableHeaderBackgroud"
         ></n-color-picker>
-      </SettingItem> -->
+      </SettingItem>
       <SettingItem name="表头字体颜色">
         <n-color-picker
           size="small"
@@ -249,6 +609,23 @@
           placeholder="表头字体大小"
         ></n-input-number>
       </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox :alone="false" name="表格设置">
+      <SettingItem name="表格背景颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.tableDataBackgroud"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="是否使用表格背景颜色">
+        <n-space>
+          <n-switch
+            v-model:value="optionData.dataStyle.tableDataBackgroudShow"
+            size="small"
+          ></n-switch>
+        </n-space>
+      </SettingItem>
       <SettingItem name="表格字体颜色">
         <n-color-picker
           size="small"
@@ -309,9 +686,9 @@
       title: '',
       align: props.optionData.dataStyle.tableAlign,
       width: '200',
-      prefix: '',
-      suffix: '',
-      convert: '',
+      prefix: null,
+      suffix: null,
+      convert: null,
     });
   };
 
@@ -339,7 +716,7 @@
       columnsWidths.value = props.optionData.header.map((item) => item.width).join(',');
     },
     {
-      deep: false,
+      deep: true,
       immediate: true,
     },
   );
@@ -351,5 +728,99 @@
         item.width = widths[index];
       });
     },
+    {
+      deep: true,
+      immediate: true,
+    },
   );
+
+  // 筛选方式
+  function getOptionsByShowType(filtersetItem) {
+    let result: any = [];
+    if (filtersetItem.showType) {
+      switch (filtersetItem.showType) {
+        case 'checkbox':
+          // 多选框
+          result = [
+            { label: '等于', value: 'equal' },
+            { label: '含有', value: 'contain' },
+          ];
+          break;
+        case 'radio':
+          // 单选框
+          result = [
+            { label: '大于', value: 'greater' },
+            { label: '小于', value: 'less' },
+            { label: '大于等于', value: 'greaterAndEqual' },
+            { label: '小于等于', value: 'lessAndEqual' },
+            { label: '等于', value: 'equal' },
+            { label: '不等于', value: 'notequal' },
+            { label: '含有', value: 'contain' },
+            { label: '不含有', value: 'notcontain' },
+          ];
+          break;
+        case 'select':
+          // 下拉框
+          result = [
+            { label: '等于', value: 'equal' },
+            { label: '含有', value: 'contain' },
+          ];
+          break;
+        case 'selectGroup':
+          // 下拉框（多选）
+          result = [
+            { label: '等于', value: 'equal' },
+            { label: '含有', value: 'contain' },
+          ];
+          break;
+        case 'buttonGroup':
+          // 按钮组
+          result = [
+            { label: '等于', value: 'equal' },
+            { label: '不等于', value: 'notequal' },
+            { label: '含有', value: 'contain' },
+            { label: '不含有', value: 'notcontain' },
+          ];
+          break;
+        case 'buttonGroupList':
+          // 按钮组（多选）
+          result = [
+            { label: '等于', value: 'equal' },
+            { label: '不等于', value: 'notequal' },
+            { label: '含有', value: 'contain' },
+            { label: '不含有', value: 'notcontain' },
+          ];
+          break;
+        case 'inputSearch':
+          // 列搜索框
+          result = [{ label: '含有', value: 'contain' }];
+          break;
+        case 'inputSearchAll':
+          // 全数据搜索框
+          result = [{ label: '含有', value: 'contain' }];
+          break;
+        case 'timePicker':
+          // 时间选择器
+          result = [
+            { label: '大于', value: 'greater' },
+            { label: '小于', value: 'less' },
+            { label: '大于等于', value: 'greaterAndEqual' },
+            { label: '小于等于', value: 'lessAndEqual' },
+            { label: '等于', value: 'equal' },
+            { label: '不等于', value: 'notequal' },
+          ];
+          break;
+        case 'timeRange':
+          // 时间范围
+          result = [{ label: '在两者之间', value: 'between' }];
+          break;
+        case 'dateRange':
+          // 日期范围
+          result = [{ label: '在两者之间', value: 'between' }];
+          break;
+      }
+    }
+
+    return result;
+  }
 </script>
diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/data.json b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/data.json
index ecd3bb2..1d6f880 100644
--- a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/data.json
+++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/data.json
@@ -46,48 +46,141 @@
       "convert": "1"
     }
   ],
+  "filterset": [
+    {
+      "title": "地图显示",
+      "field": "type",
+      "compareType": "contain",
+      "showType": "checkbox",
+      "value": [ "水源", "物资", "营房", "防火通道", "三轮通道", "步行道" ],
+      "options": [
+        { "label": "水源", "value": "水源" },
+        { "label": "物资", "value": "物资" },
+        { "label": "营房", "value": "营房" },
+        { "label": "防火通道", "value": "防火通道" },
+        { "label": "三轮通道", "value": "三轮通道" },
+        { "label": "步行道", "value": "步行道" }
+      ]
+    },
+    { 
+      "title": "资源列表", 
+      "field": "type", 
+      "compareType": "equal",
+      "showType": "buttonGroup", 
+      "value": null, 
+      "options": [
+        { "label": "水源", "value": "水源" },
+        { "label": "物资", "value": "物资" },
+        { "label": "营房", "value": "营房" }
+      ] 
+    },
+    { 
+      "title": "重点资源", 
+      "field": null, 
+      "compareType": null,
+      "showType": null, 
+      "value": null, 
+      "options": [
+        { "label": null, "value": null }
+      ] 
+    },
+    { 
+      "title": "距离", 
+      "field": "distance", 
+      "compareType": "lessAndEqual",
+      "showType": "radio", 
+      "value": null, 
+      "options": [
+        { "label": "1km以内", "value": "1" },
+        { "label": "5km以内", "value": "5" },
+        { "label": "10km以内", "value": "10" },
+        { "label": "20km以内", "value": "20" },
+        { "label": "全部", "value": null }
+      ] 
+    }
+  ],
   "source": [
     {
       "name": "坑塘",
+      "type": "水源",
       "area": null,
       "time": null,
-      "distance": "1.14",
-      "estimatedTime": "00:05:45"
+      "distance": "21.14",
+      "estimatedTime": "00:05:45",
+      "date": "2025-03-01 00:05:45"
     },
     {
       "name": "东蒙布袋口检查",
+      "type": "物资",
       "area": "300",
       "time": "12.50",
-      "distance": "1.14",
-      "estimatedTime": "00:05:45"
+      "distance": "14.14",
+      "estimatedTime": "00:05:45",
+      "date": "2025-03-11 00:05:45"
     },
     {
       "name": "北刘家庄蓄水池",
+      "type": "营房",
       "area": "300",
       "time": "12.50",
+      "distance": "0.14",
+      "estimatedTime": "00:05:45",
+      "date": "2025/03/01 00:05:45"
+      
+    },
+    {
+      "name": "防火通道",
+      "type": "防火通道",
+      "area": null,
+      "time": null,
+      "distance": "2.14",
+      "estimatedTime": "00:05:45",
+      "date": "2025-12-01 00:05:45"
+    },
+    {
+      "name": "步行道",
+      "type": "步行道",
+      "area": "300",
+      "time": "5.50",
       "distance": "1.14",
-      "estimatedTime": "00:05:45"
+      "estimatedTime": "00:05:45",
+      "date": "2025-08-01 00:05:45"
+    },
+    {
+      "name": "三轮通道",
+      "type": "三轮通道",
+      "area": "300",
+      "time": "9.50",
+      "distance": "5.14",
+      "estimatedTime": "00:05:45",
+      "date": "2025-10-21 00:05:45"
     },
     {
       "name": "坑塘",
+      "type": "水源",
       "area": null,
       "time": null,
-      "distance": "1.14",
-      "estimatedTime": "00:05:45"
+      "distance": "10.14",
+      "estimatedTime": "00:05:45",
+      "date": "2025-06-01 00:05:45"
     },
     {
       "name": "东蒙布袋口检查",
+      "type": "物资",
       "area": "300",
       "time": "12.50",
-      "distance": "1.14",
-      "estimatedTime": "00:05:45"
+      "distance": "10.14",
+      "estimatedTime": "00:05:45",
+      "date": "2025-06-12 00:05:45"
     },
     {
       "name": "北刘家庄蓄水池",
+      "type": "营房",
       "area": "300",
       "time": "12.50",
-      "distance": "1.14",
-      "estimatedTime": "00:05:45"
+      "distance": "19.14",
+      "estimatedTime": "00:05:45",
+      "date": "2025-05-01 00:05:45"
     }
   ]
 }
diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.ts b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.ts
index d5b5caf..17a326d 100644
--- a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.ts
+++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.ts
@@ -5,7 +5,7 @@ export const ZhiChu_ModalTableConfig: ConfigType = {
   key: 'ZhiChu_ModalTable',
   chartKey: 'VZhiChu_ModalTable',
   conKey: 'VCZhiChu_ModalTable',
-  title: '弹窗表格',
+  title: '在线人员弹窗筛选表格',
   category: ChatCategoryEnum.ZHICHU,
   categoryName: ChatCategoryEnumName.ZHICHU,
   package: PackagesCategoryEnum.ZHICHU,
diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.vue b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.vue
index 5dd1f71..e96291a 100644
--- a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.vue
+++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.vue
@@ -1,95 +1,208 @@
 <template>
   <div class="ZhiChu_ModalTable">
-    <div class="filter">
-      <a-row>
-        <!-- 地图显示 -->
-        <a-col :span="6">
-          <div class="filterTitle">地图显示</div>
-        </a-col>
-        <a-col :span="18">
-          <n-checkbox-group v-model:value="option.dataStyle.mapshow">
-            <n-space item-style="display: flex;">
-              <n-checkbox value="水源">
-                <template #default>
-                  <span class="filterChoose">水源</span>
-                </template>
-              </n-checkbox>
-              <n-checkbox value="物资">
-                <template #default>
-                  <span class="filterChoose">物资</span>
-                </template>
-              </n-checkbox>
-              <n-checkbox value="营房">
-                <template #default>
-                  <span class="filterChoose">营房</span>
-                </template>
-              </n-checkbox>
-              <n-checkbox value="防火通道">
-                <template #default>
-                  <span class="filterChoose">防火通道</span>
-                </template>
-              </n-checkbox>
-              <n-checkbox value="三轮通道">
-                <template #default>
-                  <span class="filterChoose">三轮通道</span>
-                </template>
-              </n-checkbox>
-              <n-checkbox value="步行道">
-                <template #default>
-                  <span class="filterChoose">步行道</span>
-                </template>
-              </n-checkbox>
-            </n-space>
-          </n-checkbox-group>
-        </a-col>
-        <!-- 资源列表 -->
-        <a-col :span="6">
-          <div class="filterTitle">资源列表</div>
-        </a-col>
-        <a-col :span="18">
-          <div style="display: inline-flex">
-            <div class="ziyuanlist_choose">水源</div>
-            <div class="ziyuanlist_nochoose">物资</div>
-            <div class="ziyuanlist_nochoose">营房</div>
-          </div>
-        </a-col>
-        <!-- 重点资源 -->
-        <a-col :span="6">
-          <div class="filterTitle">重点资源</div>
-        </a-col>
-        <a-col :span="18">
-          <div class="filterChoose"></div>
-        </a-col>
-        <!-- 距离 -->
-        <a-col :span="6">
-          <div class="filterTitle">距离</div>
-        </a-col>
-        <a-col :span="18">
-          <div class="filterChoose">
-            <n-radio-group v-model:value="option.dataStyle.distance" name="radiogroup">
-              <n-space>
-                <n-radio value="1">
-                  <span class="filterChoose">1km以内</span>
-                </n-radio>
-                <n-radio value="5">
-                  <span class="filterChoose">5km以内</span>
-                </n-radio>
-                <n-radio value="10">
-                  <span class="filterChoose">10km以内</span>
-                </n-radio>
-                <n-radio value="20">
-                  <span class="filterChoose">20km以内</span>
-                </n-radio>
-                <n-radio value="all">
-                  <span class="filterChoose">全部</span>
-                </n-radio>
-              </n-space>
-            </n-radio-group>
-          </div>
-        </a-col>
-      </a-row>
+    <div class="filterDiv">
+      <div class="filterItem" v-for="(item, index) in option.filterset" :key="index">
+        <a-row>
+          <!-- 筛选标题 -->
+          <a-col :span="option.dataStyle.colLeft">
+            <div class="filterTitle">{{ item.title }}</div>
+          </a-col>
+          <!-- 筛选内容 -->
+          <!-- 多选框 -->
+          <a-col :span="24 - option.dataStyle.colLeft" v-if="item.showType == 'checkbox'">
+            <div class="filterContentDiv">
+              <n-checkbox-group v-model:value="item.value">
+                <n-checkbox
+                  :style="{
+                    marginRight: option.dataStyle.filterTitleFontSize + 'px',
+                  }"
+                  v-for="(checkboxItem, checkboxIndex) in item.options"
+                  :key="checkboxIndex"
+                  :value="checkboxItem.value"
+                >
+                  <template #default>
+                    <span class="filterContentFont">{{ checkboxItem.label }}</span>
+                  </template>
+                </n-checkbox>
+              </n-checkbox-group>
+            </div>
+          </a-col>
+          <!-- 单选框 -->
+          <a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'radio'">
+            <div class="filterContentDiv">
+              <n-radio-group v-model:value="item.value" name="radiogroup">
+                <n-space>
+                  <n-radio
+                    :style="{
+                      marginRight: option.dataStyle.filterTitleFontSize + 'px',
+                    }"
+                    v-for="(radioItem, radioIndex) in item.options"
+                    :key="radioIndex"
+                    :value="radioItem.value"
+                  >
+                    <span class="filterContentFont">{{ radioItem.label }}</span>
+                  </n-radio>
+                </n-space>
+              </n-radio-group>
+            </div>
+          </a-col>
+          <!-- 下拉框 -->
+          <a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'select'">
+            <div class="filterContentDiv">
+              <n-select
+                v-model:value="item.value"
+                :options="item.options"
+                :style="{ width: '50%' }"
+                placeholder="请选择选项"
+                clearable
+              />
+            </div>
+          </a-col>
+          <!-- 下拉框（多选） -->
+          <a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'selectGroup'">
+            <div class="filterContentDiv">
+              <n-select
+                v-model:value="item.value"
+                :options="item.options"
+                placeholder="请选择选项（可多选）"
+                clearable
+                multiple
+              />
+            </div>
+          </a-col>
+          <!-- 按钮组 -->
+          <a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'buttonGroup'">
+            <div class="filterContentDiv" style="display: inline-flex">
+              <div
+                :style="{
+                  marginRight: option.dataStyle.filterTitleFontSize + 'px',
+                }"
+                v-for="(buttonItem, buttonIndex) in item.options"
+                :key="buttonIndex"
+                :class="
+                  item.value == buttonItem.value
+                    ? 'filterContentFont_choose'
+                    : 'filterContentFont_nochoose'
+                "
+                @click="clickFilterButton(item, buttonItem)"
+              >
+                {{ buttonItem.label }}
+              </div>
+            </div>
+          </a-col>
+          <!-- 按钮组（多选） -->
+          <a-col
+            :span="24 - option.dataStyle.colLeft"
+            v-else-if="item.showType == 'buttonGroupList'"
+          >
+            <div class="filterContentDiv" style="display: inline-flex">
+              <div
+                :style="{
+                  marginRight: option.dataStyle.filterTitleFontSize + 'px',
+                }"
+                v-for="(buttonItem, buttonIndex) in item.options"
+                :key="buttonIndex"
+                :class="
+                  item.value && item.value.includes(buttonItem.value)
+                    ? 'filterContentFont_choose'
+                    : 'filterContentFont_nochoose'
+                "
+                @click="clickFilterButtonList(item, buttonItem)"
+              >
+                {{ buttonItem.label }}
+              </div>
+            </div>
+          </a-col>
+          <!-- 列搜索框 -->
+          <a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'inputSearch'">
+            <div class="filterContentDiv">
+              <n-input-group>
+                <n-input
+                  v-model:value="item.value"
+                  :style="{ width: '50%' }"
+                  :placeholder="'请输入' + item.title"
+                  clearable
+                />
+                <n-button type="primary" ghost @click="search"> 搜索 </n-button>
+              </n-input-group>
+            </div>
+          </a-col>
+          <!-- 全数据搜索框 -->
+          <a-col
+            :span="24 - option.dataStyle.colLeft"
+            v-else-if="item.showType == 'inputSearchAll'"
+          >
+            <div class="filterContentDiv">
+              <n-input-group>
+                <n-input
+                  v-model:value="item.value"
+                  :style="{ width: '50%' }"
+                  placeholder="请输入搜索数据"
+                  clearable
+                />
+                <n-button type="primary" ghost @click="searchAll"> 搜索 </n-button>
+              </n-input-group>
+            </div>
+          </a-col>
+          <!-- 时间选择器 -->
+          <a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'timePicker'">
+            <div class="filterContentDiv">
+              <n-time-picker
+                v-model:formatted-value="item.value"
+                value-format="HH:mm:ss"
+                format="HH:mm:ss"
+                :style="{ width: '50%' }"
+                clearable
+                placeholder="请选择时间"
+              />
+            </div>
+          </a-col>
+          <!-- 时间范围 -->
+          <a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'timeRange'">
+            <div class="filterContentDiv" :style="{ display: 'inline-flex' }">
+              <n-time-picker
+                v-model:formatted-value="item.value"
+                value-format="HH:mm:ss"
+                format="HH:mm:ss"
+                :style="{ width: '40%', marginRight: '30px' }"
+                clearable
+                placeholder="请选择开始时间"
+              />
+              <n-time-picker
+                v-model:formatted-value="item.value2"
+                value-format="HH:mm:ss"
+                format="HH:mm:ss"
+                :style="{ width: '40%' }"
+                clearable
+                placeholder="请选择结束时间"
+              />
+            </div>
+          </a-col>
+          <!-- 日期范围 -->
+          <a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'dateRange'">
+            <div class="filterContentDiv">
+              <n-date-picker
+                v-model:formatted-value="item.value"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                format="yyyy-MM-dd HH:mm:ss"
+                type="datetimerange"
+                :style="{ width: '80%' }"
+                size="small"
+                clearable
+              />
+            </div>
+          </a-col>
+          <!-- 其他 -->
+          <a-col :span="24 - option.dataStyle.colLeft" v-else>
+            <div class="filterContent"> </div>
+          </a-col>
+        </a-row>
+      </div>
     </div>
-    <div class="table">
+
+    <!-- 表格部分 -->
+    <!-- 表头 -->
+    <div class="theadDiv">
       <n-table
         :bordered="option.dataStyle.tableBordered"
         :single-column="option.dataStyle.tableSigleColumn"
@@ -102,19 +215,60 @@
               backgroud: option.dataStyle.tableHeaderBackgroud,
             }"
           >
-            <th class="th" v-if="option.dataStyle.orderBumberShow">序号</th>
-            <th class="th" v-for="(item, index) in option.header" :key="index">{{ item.title }}</th>
-            <th class="th" v-if="option.dataStyle.buttonDivShow">操作</th>
+            <th
+              class="th"
+              v-if="option.dataStyle.orderBumberShow"
+              :style="{
+                width: headWidths[0] + 'px',
+              }"
+            >
+            </th>
+            <th
+              class="th"
+              v-for="(item, index) in option.header"
+              :key="index"
+              :style="{
+                width: headWidths[option.dataStyle.orderBumberShow ? index + 1 : index] + 'px',
+              }"
+            >
+              {{ item.title }}
+            </th>
+            <th
+              class="th"
+              v-if="option.dataStyle.buttonDivShow"
+              :style="{
+                width: headWidths[headWidths.length - 1] + 'px',
+              }"
+            >
+              操作
+            </th>
           </tr>
         </thead>
+      </n-table>
+    </div>
+    <!-- 表格数据 -->
+    <div class="tbodyDiv">
+      <n-table
+        :bordered="option.dataStyle.tableBordered"
+        :single-column="option.dataStyle.tableSigleColumn"
+        :single-line="option.dataStyle.tableSingleLine"
+        :size="option.dataStyle.tableSize"
+      >
         <tbody>
           <tr
-            v-for="(dataItem, dataIndex) in option.dataset"
+            v-for="(dataItem, dataIndex) in filterData"
             :key="dataIndex"
-            :class="dataIndex % 2 == 0 ? 'td1' : 'td2'"
+            :class="
+              option.dataStyle.tableDataBackgroudShow
+                ? 'td_background'
+                : dataIndex % 2 == 0
+                  ? 'td_image1'
+                  : 'td_image2'
+            "
           >
             <!-- 序号 -->
             <td
+              id="dataTd_order"
               v-if="option.dataStyle.orderBumberShow"
               :style="{
                 width: option.dataStyle.orderDivWidth + 'px',
@@ -124,6 +278,7 @@
             </td>
             <!-- 数据 -->
             <td
+              :id="'dataTd_' + headerIndex"
               v-for="(headerItem, headerIndex) in option.header"
               :key="headerIndex"
               :style="{
@@ -131,21 +286,23 @@
               }"
             >
               <span>
-                {{ dataItem[headerItem.key] ? convertData(headerItem, dataItem) : '--' }}</span
-              >
+                {{ dataItem[headerItem.key] ? convertData(headerItem, dataItem) : '--' }}
+              </span>
             </td>
             <!-- 操作 -->
             <td
+              id="dataTd_button"
+              v-if="option.dataStyle.buttonDivShow"
               :style="{
                 width: option.dataStyle.buttonDivWidth + 'px',
               }"
             >
-              <div v-if="option.dataStyle.buttonDivShow" class="buttonDiv">
+              <div class="buttonDiv">
                 <n-button
                   v-if="option.dataStyle.buttonDivShow1"
                   size="small"
                   quaternary
-                  @click="addRight(dataIndex)"
+                  @click="pitchLocation(dataItem, dataIndex)"
                 >
                   <Button1 :dataStyle="option.dataStyle" />
                 </n-button>
@@ -159,7 +316,7 @@
                   v-if="option.dataStyle.buttonDivShow2"
                   size="small"
                   quaternary
-                  @click="removeRight(index1)"
+                  @click="moveLocation(dataItem, dataIndex)"
                 >
                   <Button2 :dataStyle="option.dataStyle" />
                 </n-button>
@@ -179,6 +336,7 @@
   import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
   import { useChartDataFetch } from '@/hooks';
   import dayjs from 'dayjs';
+  import { cloneDeep } from 'lodash-es';
   import Button1 from './svg/button1.vue';
   import Button2 from './svg/button2.vue';
 
@@ -189,25 +347,269 @@
     },
   });
 
-  //查询字段
-  const inputData = ref('');
-  //前台过滤
-  const filterData = computed(() => {
-    return option?.dataset?.filter((item: any) => {
-      return Object.values(item).some((val) => {
-        return String(val).toLowerCase().includes(inputData.value.toLowerCase());
-      });
-    });
-  });
-
   const { w, h } = toRefs(props.chartConfig.attr);
 
   const option = reactive({
-    dataset: props.chartConfig.option.dataset,
     header: props.chartConfig.option.header,
+    dataset: props.chartConfig.option.dataset,
+    filterset: props.chartConfig.option.filterset,
     dataStyle: props.chartConfig.option.dataStyle,
   });
 
+  // 表头高度
+  const headHeight: any = computed(() => {
+    if (option.dataStyle.tableHeaderShow) {
+      return document.querySelector('.theadDiv')?.offsetHeight + 10;
+    } else {
+      return 0;
+    }
+  });
+
+  // 数据表实际宽度
+  const headWidths = computed(() => {
+    let widths: any = [];
+    if (option.dataStyle.tableHeaderShow) {
+      setTimeout(() => {
+        if (option.dataStyle.orderBumberShow) {
+          widths.push(document.getElementById('dataTd_order')?.offsetWidth);
+        }
+        option.header.forEach((item, index) => {
+          let td = document.getElementById('dataTd_' + index);
+          widths.push(td?.offsetWidth);
+        });
+        if (option.dataStyle.buttonDivShow) {
+          widths.push(document.getElementById('dataTd_button')?.offsetWidth);
+        }
+        console.log(widths);
+      }, 500);
+    }
+    return widths;
+  });
+
+  // 搜索框
+  const searchFlag = ref(false);
+  const searchAllFlag = ref(false);
+
+  function search() {
+    searchFlag.value = true;
+  }
+  function searchAll() {
+    searchAllFlag.value = true;
+  }
+
+  // 数据过滤
+  const filterData = computed(() => {
+    let data = cloneDeep(option.dataset);
+    option.filterset.forEach((filtersetItem) => {
+      // console.log(filtersetItem);
+      if (
+        (filtersetItem.field && filtersetItem.value) ||
+        (!filtersetItem.field && filtersetItem.showType == 'inputSearchAll')
+      ) {
+        switch (filtersetItem.compareType) {
+          // 大于
+          case 'greater':
+            if (['timePicker'].includes(filtersetItem.showType)) {
+              data = data.filter(
+                (d) =>
+                  dayjs(d[filtersetItem.field], 'HH:mm:ss').diff(
+                    dayjs(filtersetItem.value, 'HH:mm:ss'),
+                  ) > 0,
+              );
+            } else {
+              data = data.filter(
+                (d) => Number(d[filtersetItem.field]) > Number(filtersetItem.value),
+              );
+            }
+            break;
+          // 小于
+          case 'less':
+            if (['timePicker'].includes(filtersetItem.showType)) {
+              data = data.filter(
+                (d) =>
+                  dayjs(d[filtersetItem.field], 'HH:mm:ss').diff(
+                    dayjs(filtersetItem.value, 'HH:mm:ss'),
+                  ) < 0,
+              );
+            } else {
+              data = data.filter(
+                (d) => Number(d[filtersetItem.field]) < Number(filtersetItem.value),
+              );
+            }
+            break;
+          // 大于等于
+          case 'greaterAndEqual':
+            if (['timePicker'].includes(filtersetItem.showType)) {
+              data = data.filter(
+                (d) =>
+                  dayjs(d[filtersetItem.field], 'HH:mm:ss').diff(
+                    dayjs(filtersetItem.value, 'HH:mm:ss'),
+                  ) >= 0,
+              );
+            } else {
+              data = data.filter(
+                (d) => Number(d[filtersetItem.field]) >= Number(filtersetItem.value),
+              );
+            }
+            break;
+          // 小于等于
+          case 'lessAndEqual':
+            if (['timePicker'].includes(filtersetItem.showType)) {
+              data = data.filter(
+                (d) =>
+                  dayjs(d[filtersetItem.field], 'HH:mm:ss').diff(
+                    dayjs(filtersetItem.value, 'HH:mm:ss'),
+                  ) <= 0,
+              );
+            } else {
+              data = data.filter(
+                (d) => Number(d[filtersetItem.field]) <= Number(filtersetItem.value),
+              );
+            }
+            break;
+          // 等于
+          case 'equal':
+            if (['checkbox'].includes(filtersetItem.showType)) {
+              // 多选框不选中时，不展示
+              data = data.filter((d) =>
+                filtersetItem.value.some((li) => d[filtersetItem.field].includes(li)),
+              );
+            } else if (['selectGroup', 'buttonGroupList'].includes(filtersetItem.showType)) {
+              // 下拉框（多选）、按钮组（多选）不选中时，全展示
+              if (filtersetItem.value.length > 0) {
+                data = data.filter((d) =>
+                  filtersetItem.value.some((li) => d[filtersetItem.field].includes(li)),
+                );
+              }
+            } else {
+              // 其他统一
+              data = data.filter((d) => d[filtersetItem.field] == filtersetItem.value);
+            }
+            break;
+          // 不等于
+          case 'notequal':
+            if (['checkbox'].includes(filtersetItem.showType)) {
+              // 多选框不选中时，不展示
+              data = data.filter((d) =>
+                filtersetItem.value.some((li) => !d[filtersetItem.field].includes(li)),
+              );
+            } else if (['selectGroup', 'buttonGroupList'].includes(filtersetItem.showType)) {
+              // 下拉框（多选）、按钮组（多选）不选中时，全展示
+              if (filtersetItem.value.length > 0) {
+                data = data.filter((d) =>
+                  filtersetItem.value.some((li) => !d[filtersetItem.field].includes(li)),
+                );
+              }
+            } else {
+              // 其他统一
+              data = data.filter((d) => d[filtersetItem.field] !== filtersetItem.value);
+            }
+            break;
+          // 含有
+          case 'contain':
+            if (['checkbox'].includes(filtersetItem.showType)) {
+              // 多选框不选中时，不展示
+              data = data.filter((d) =>
+                filtersetItem.value.some((li) => d[filtersetItem.field].includes(li)),
+              );
+            } else if (['selectGroup', 'buttonGroupList'].includes(filtersetItem.showType)) {
+              // 下拉框（多选）、按钮组（多选）不选中时，全展示
+              if (filtersetItem.value.length > 0) {
+                data = data.filter((d) =>
+                  filtersetItem.value.some((li) => d[filtersetItem.field].includes(li)),
+                );
+              }
+            } else if (['inputSearch'].includes(filtersetItem.showType)) {
+              // 搜索框单独处理
+              if (searchFlag.value) {
+                data = data.filter(
+                  (d) => d[filtersetItem.field].indexOf(filtersetItem.value) !== -1,
+                );
+                searchFlag.value = false;
+              }
+            } else if (['inputSearchAll'].includes(filtersetItem.showType)) {
+              // 全数据搜索框单独处理
+              if (searchAllFlag.value) {
+                data = data.filter((d) => {
+                  let flag = false;
+                  option.header.some((headerLi) => {
+                    if (d[headerLi.key]) {
+                      flag = flag ? true : d[headerLi.key].includes(filtersetItem.value);
+                    }
+                  });
+                  return flag;
+                });
+                searchAllFlag.value = false;
+              }
+            } else {
+              // 其他统一
+              data = data.filter((d) => d[filtersetItem.field].indexOf(filtersetItem.value) !== -1);
+            }
+            break;
+          // 不含有
+          case 'notcontain':
+            if (['checkbox'].includes(filtersetItem.showType)) {
+              // 多选框不选中时，不展示
+              data = data.filter((d) =>
+                filtersetItem.value.some((li) => !d[filtersetItem.field].includes(li)),
+              );
+            } else if (['selectGroup', 'buttonGroupList'].includes(filtersetItem.showType)) {
+              // 下拉框（多选）、按钮组（多选）不选中时，全展示
+              if (filtersetItem.value.length > 0) {
+                data = data.filter((d) =>
+                  filtersetItem.value.some((li) => !d[filtersetItem.field].includes(li)),
+                );
+              }
+            } else {
+              // 其他统一
+              data = data.filter((d) => d[filtersetItem.field].indexOf(filtersetItem.value) == -1);
+            }
+            break;
+          // 两者之间
+          case 'between':
+            if (['timeRange'].includes(filtersetItem.showType)) {
+              data = data.filter((d) => {
+                const time = dayjs(d[filtersetItem.field], 'HH:mm:ss');
+                const startTime = dayjs(filtersetItem.value, 'HH:mm:ss');
+                const endTime = dayjs(filtersetItem.value2, 'HH:mm:ss');
+                return time.diff(startTime) >= 0 && time.diff(endTime) <= 0;
+              });
+            }
+            if (['dateRange'].includes(filtersetItem.showType)) {
+              data = data.filter((d) => {
+                const time = dayjs(d[filtersetItem.field], 'YYYY-MM-DD HH:mm:ss');
+                const startTime = dayjs(filtersetItem.value[0], 'YYYY-MM-DD HH:mm:ss');
+                const endTime = dayjs(filtersetItem.value[1], 'YYYY-MM-DD HH:mm:ss');
+                return time.diff(startTime) >= 0 && time.diff(endTime) <= 0;
+              });
+            }
+            break;
+        }
+      }
+    });
+    return data;
+  });
+
+  // 筛选-按钮点击事件
+  function clickFilterButton(item, buttonItem) {
+    if (item.value == buttonItem.value) {
+      item.value = '';
+    } else {
+      item.value = buttonItem.value;
+    }
+  }
+  // 筛选-按钮点击事件（多选）
+  function clickFilterButtonList(item, buttonItem) {
+    if (!item.value) {
+      item.value = [];
+    }
+    if (item.value.includes(buttonItem.value)) {
+      item.value.splice(item.value.indexOf(buttonItem.value), 1);
+    } else {
+      item.value.push(buttonItem.value);
+    }
+  }
+
   // 数据转换
   function convertData(header, data) {
     let prefix = header.prefix ? header.prefix : '';
@@ -222,7 +624,7 @@
           : String(convertData.toFixed(2));
     }
     // 转换时间格式（例：0小时0分钟0秒）
-    if (convertData && header.convert == '1' && isValidDate(convertData)) {
+    if (convertData && header.convert == '1' && isValidTime(convertData)) {
       convertData =
         dayjs(convertData, 'HH:mm:ss').hour() +
         '小时' +
@@ -231,6 +633,21 @@
         dayjs(convertData, 'HH:mm:ss').second() +
         '秒';
     }
+    // 转换日期格式（例：YYYY-MM-DD HH:mm:ss）
+    let format = 'YYYY-MM-DD HH:mm:ss';
+    if (header.convert == '2') {
+      format = 'YYYY-MM-DD';
+    }
+    if (header.convert == '3') {
+      format = 'YYYY/MM/DD';
+    }
+    if (
+      convertData &&
+      ['2', '3', '4'].includes(header.convert) &&
+      isValidDate(convertData, format)
+    ) {
+      convertData = dayjs(convertData).format(format);
+    }
     return prefix + convertData + suffix;
   }
 
@@ -239,9 +656,8 @@
     const regex = /^-?\d+(\.\d+)?$/;
     return regex.test(String(str).trim());
   }
-
   // 检查字符串可否转成时间
-  function isValidDate(str) {
+  function isValidTime(str) {
     const parsedDate = dayjs(str, 'HH:mm:ss');
     if (parsedDate.isValid()) {
       return true;
@@ -249,6 +665,20 @@
       return false;
     }
   }
+  // 检查字符串可否转成日期
+  function isValidDate(str, format) {
+    const parsedDate = dayjs(str, format);
+    if (parsedDate.isValid()) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  // 表格按钮方法
+  function pitchLocation(dataItem, dataIndex) {}
+
+  function moveLocation(dataItem, dataIndex) {}
 
   // setdata 数据监听与更改
   useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
@@ -268,63 +698,95 @@
     user-select: none;
   }
 
-  .filter {
+  .filterDiv {
     width: 100%;
-    height: v-bind('`${option.dataStyle.filterHeight}px`');
-    margin-top: v-bind('`${option.dataStyle.filterMarginTop}px`');
-    margin-left: v-bind('`${option.dataStyle.filterMarginLeft}px`');
-    margin-right: v-bind('`${option.dataStyle.filterMarginLeft}px`');
+    padding-top: v-bind('`${option.dataStyle.filterMarginTop}px`');
+    padding-left: v-bind('`${option.dataStyle.filterMarginLeft}px`');
+    padding-right: v-bind('`${option.dataStyle.filterMarginLeft}px`');
   }
 
+  // 筛选标题
   .filterTitle {
-    align-items: center;
-    width: v-bind('`${option.dataStyle.filterTitleWidth}px`');
+    text-align: v-bind('`${option.dataStyle.filterTitleAlign}`');
     font-size: v-bind('`${option.dataStyle.filterTitleFontSize}px`');
     color: v-bind('`${option.dataStyle.filterTitleFontColor}`');
-    margin-right: v-bind('`${option.dataStyle.filterTitleMarginRight}px`');
     font-family:
       PingFangSC,
       PingFang SC;
     font-weight: 500;
-    line-height: 33px;
-    text-align: left;
+    line-height: v-bind('`${option.dataStyle.filterTitleFontSize}px`');
+    height: v-bind('`${option.dataStyle.filterItemHeight}px`');
     font-style: normal;
   }
-  .filterChoose {
+  .filterContentDiv {
+    width: 100%;
+    height: v-bind('`${option.dataStyle.filterItemHeight}px`');
+    justify-content: v-bind('`${option.dataStyle.filterContentAlign}`');
+    text-align: v-bind('`${option.dataStyle.filterContentAlign}`');
+    align-items: v-bind('`${option.dataStyle.filterContentAlign}`');
+  }
+
+  // 内容通用字体
+  .filterContentFont {
     font-size: v-bind('`${option.dataStyle.filterChooseFontSize}px`');
     color: v-bind('`${option.dataStyle.filterChooseFontColor}`');
   }
+  ::v-deep .n-checkbox-box {
+    width: v-bind('`${option.dataStyle.filterChooseFontSize}px`') !important;
+    height: v-bind('`${option.dataStyle.filterChooseFontSize}px`') !important;
+  }
+  ::v-deep .n-radio__dot {
+    width: v-bind('`${option.dataStyle.filterChooseFontSize}px`') !important;
+    height: v-bind('`${option.dataStyle.filterChooseFontSize}px`') !important;
+  }
 
-  .ziyuanlist_nochoose {
-    margin-right: 30px;
+  .filterContentFont_nochoose {
     background: #1c211f;
     color: #18d09d;
     border: 1px solid #18d09d;
     font-size: v-bind('`${option.dataStyle.filterChooseFontSize}px`');
-    width: 80px;
-    height: 30px;
-    border-radius: 30px;
+    width: v-bind('`${option.dataStyle.filterChooseFontSize + 62}px`');
+    height: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
+    border-radius: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
     text-align: center;
-    line-height: 30px;
+    line-height: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
   }
-  .ziyuanlist_choose {
-    margin-right: 30px;
+  .filterContentFont_choose {
     background: #26d1ad;
     color: #0d2822;
     font-size: v-bind('`${option.dataStyle.filterChooseFontSize}px`');
-    width: 80px;
-    height: 30px;
-    border-radius: 30px;
+    width: v-bind('`${option.dataStyle.filterChooseFontSize + 62}px`');
+    height: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
+    border-radius: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
     text-align: center;
-    line-height: 30px;
+    line-height: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
   }
 
-  .table {
-    padding-top: v-bind('`${option.dataStyle.tableMarginTop}px`');
+  // 表头
+  .theadDiv {
+    margin-top: v-bind('`${option.dataStyle.tableMarginTop}px`');
     padding-left: v-bind('`${option.dataStyle.tableMarginLeft}px`');
     padding-right: v-bind('`${option.dataStyle.tableMarginLeft}px`');
   }
+  // 表格部分
+  .tbodyDiv {
+    overflow-y: auto;
+    height: v-bind(
+      '`${h - headHeight - option.dataStyle.filterMarginTop - option.dataStyle.filterItemHeight * option.filterset.length  - option.dataStyle.tableMarginTop}px`'
+    );
+    padding-left: v-bind('`${option.dataStyle.tableMarginLeft}px`');
+    padding-right: v-bind('`${option.dataStyle.tableMarginLeft}px`');
+  }
+  .tbodyDiv::-webkit-scrollbar {
+    display: none;
+  }
+  .tbodyDiv {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
   .th {
+    background: v-bind('`${option.dataStyle.tableHeaderBackgroud}`');
     text-align: v-bind('`${option.dataStyle.tableAlign}`');
     color: v-bind('`${option.dataStyle.tableHeaderFontColor}`');
     font-size: v-bind('`${option.dataStyle.tableHeaderFontSize}px`');
@@ -336,11 +798,14 @@
     font-size: v-bind('`${option.dataStyle.tableDataFontSize}px`');
     border-bottom: 0px;
   }
-  .td1 {
+  .td_background {
+    background: v-bind('`${option.dataStyle.tableDataBackgroud}`');
+  }
+  .td_image1 {
     background-image: url('@/assets/images/chart/zhichu/component/ModalTable_td1.png');
     background-size: 100% 100%;
   }
-  .td2 {
+  .td_image2 {
     background-image: url('@/assets/images/chart/zhichu/component/ModalTable_td2.png');
     background-size: 100% 100%;
   }
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/data.json b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/data.json
index c82c9ab..a4f1222 100644
--- a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/data.json
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/data.json
@@ -4,34 +4,34 @@
       "title":"高空瞭望",
       "num": "132"
     },
-    {
-      "title":"生态林视频监控",
-      "num": "53"
-    },
-    {
-      "title":"市应急热成像",
-      "num": "13"
-    },
     {
       "title":"铁塔监控",
       "num": "153"
     },
-    {
-      "title":"林区摄像头",
-      "num": "523"
-    },
-    {
-      "title":"智能语音卡口",
-      "num": "28"
-    },
     {
       "title":"视频监控",
       "num": "332"
     },
+    {
+      "title":"生态林视频监控",
+      "num": "53"
+    },
+    {
+      "title":"林区摄像头",
+      "num": "523"
+    },
     {
       "title":"无人机机场",
       "num": "45"
     },
+    {
+      "title":"市应急热成像",
+      "num": "13"
+    },
+    {
+      "title":"智能语音卡口",
+      "num": "28"
+    },
     {
       "title":"费县现有基站",
       "num": "45"
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/index.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/index.vue
index c66c6a7..2e7e0a5 100644
--- a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/index.vue
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="ZhiGan_SheXiangTouLeiXing">
     <div class="list">
-      <div v-for="(item, index) in option.dataset" :key="item.title">
+      <div v-for="(item, index) in option.dataset" :key="item.title" @click="clickBtn(item)">
         <div class="item">
           <Tupian1 v-if="checkType(item, index) == 0" :item="item" :dataStyle="option.dataStyle" />
           <Tupian2 v-if="checkType(item, index) == 1" :item="item" :dataStyle="option.dataStyle" />
@@ -19,11 +19,12 @@
 </template>
 
 <script setup lang="ts">
-  import { PropType, toRefs, watch, reactive, ref, onMounted, onBeforeUnmount } from 'vue';
+  import { 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 { eventHandlerHook } from '@/hooks/eventHandler.hook';
   import Tupian1 from './svg/tupian1.vue';
   import Tupian2 from './svg/tupian2.vue';
   import Tupian3 from './svg/tupian3.vue';
@@ -35,6 +36,7 @@
   import Tupian9 from './svg/tupian9.vue';
   import dayjs from 'dayjs';
 
+  const chartEditStore = useChartEditStore();
   const props = defineProps({
     chartConfig: {
       type: Object as PropType<CreateComponentType>,
@@ -63,9 +65,39 @@
 
   // 确定类型
   function checkType(item, index) {
-    return index;
+    if (item.title.includes('瞭望')) {
+      return 0;
+    } else if (item.title.includes('铁塔')) {
+      return 1;
+    } else if (item.title.includes('生态林')) {
+      return 3;
+    } else if (item.title.includes('视频监控')) {
+      return 2;
+    } else if (item.title.includes('林区')) {
+      return 4;
+    } else if (item.title.includes('无人机')) {
+      return 5;
+    } else if (item.title.includes('应急')) {
+      return 6;
+    } else if (item.title.includes('卡口')) {
+      return 7;
+    } else if (item.title.includes('基站')) {
+      return 8;
+    } else {
+      return index % 9;
+    }
   }
 
+  // 单击交互
+  const clickBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'click',
+      val,
+    );
+  };
+
   // 数据callback处理（预览时触发）
   useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
     option.dataset = resData;
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian1.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian1.vue
index ab74019..aed1e3c 100644
--- a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian1.vue
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian1.vue
@@ -415,17 +415,17 @@
                         id="矩形"
                         fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-1-28)"
                         opacity="0.59535072"
-                        x="0"
-                        y="83.0014701"
-                        width="92.8480217"
+                        x="-12"
+                        y="83.6227657"
+                        width="113"
                         height="28"
                       ></rect>
                       <rect
                         id="矩形"
                         fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-1-29)"
-                        x="0"
-                        y="109.899697"
-                        width="92.8480217"
+                        x="-12"
+                        y="110.995475"
+                        width="113"
                         height="1"
                       ></rect>
                     </g>
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian2.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian2.vue
index 0d4da1e..6c3b91f 100644
--- a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian2.vue
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian2.vue
@@ -369,17 +369,17 @@
                         id="矩形"
                         fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-2-26)"
                         opacity="0.59535072"
-                        x="0"
-                        y="83"
-                        width="92.8480217"
+                        x="-12"
+                        y="83.6227657"
+                        width="113"
                         height="28"
                       ></rect>
                       <rect
                         id="矩形"
                         fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-2-27)"
-                        x="0"
+                        x="-12"
                         y="110"
-                        width="92.8480217"
+                        width="113"
                         height="1"
                       ></rect>
                     </g>
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian3.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian3.vue
index 56e2f27..4edc6df 100644
--- a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian3.vue
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian3.vue
@@ -434,17 +434,17 @@
                         id="矩形"
                         fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-3-28)"
                         opacity="0.59535072"
-                        x="0"
-                        y="83.000794"
-                        width="92.8480217"
+                        x="-12"
+                        y="83.6227657"
+                        width="113"
                         height="28"
                       ></rect>
                       <rect
                         id="矩形"
                         fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-3-29)"
-                        x="0"
-                        y="109.339134"
-                        width="92.8480217"
+                        x="-12"
+                        y="110.995475"
+                        width="113"
                         height="1"
                       ></rect>
                     </g>
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian6.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian6.vue
index 96049a4..c844e21 100644
--- a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian6.vue
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian6.vue
@@ -337,7 +337,7 @@
                         fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-6-25)"
                         opacity="0.59535072"
                         x="0"
-                        y="80.9716418"
+                        y="83.6227657"
                         width="113"
                         height="28"
                       ></rect>
@@ -345,7 +345,7 @@
                         id="矩形"
                         fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-6-26)"
                         x="0"
-                        y="107.971642"
+                        y="110.995475"
                         width="113"
                         height="1"
                       ></rect>
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian7.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian7.vue
index d12131c..9f1657f 100644
--- a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian7.vue
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian7.vue
@@ -324,7 +324,7 @@
                           fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-7-24)"
                           opacity="0.59535072"
                           x="0"
-                          y="75.8571429"
+                          y="79.8571429"
                           width="113"
                           height="28"
                         ></rect>
@@ -332,7 +332,7 @@
                           id="矩形"
                           fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-7-25)"
                           x="0"
-                          y="103.628571"
+                          y="105.628571"
                           width="113"
                           height="1"
                         ></rect>
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian8.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian8.vue
index acbe7e5..e967482 100644
--- a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian8.vue
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian8.vue
@@ -404,7 +404,7 @@
                         fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-8-27)"
                         opacity="0.59535072"
                         x="0"
-                        y="83.3623409"
+                        y="83.6227657"
                         width="113"
                         height="28"
                       ></rect>
@@ -412,7 +412,7 @@
                         id="矩形"
                         fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-8-28)"
                         x="0"
-                        y="110.999895"
+                        y="110.995475"
                         width="113"
                         height="1"
                       ></rect>
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian9.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian9.vue
index 4f9fea8..f6edfce 100644
--- a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian9.vue
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian9.vue
@@ -422,7 +422,7 @@
                       fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-9-28)"
                       opacity="0.59535072"
                       x="0"
-                      y="83.7533891"
+                      y="83.6227657"
                       width="113"
                       height="28"
                     ></rect>
@@ -430,7 +430,7 @@
                       id="矩形"
                       fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-9-29)"
                       x="0"
-                      y="110.999959"
+                      y="110.995475"
                       width="113"
                       height="1"
                     ></rect>
diff --git a/src/packages/components/Zhilan/Zhilan/WeiXingGuoLv/config.ts b/src/packages/components/Zhilan/Zhilan/WeiXingGuoLv/config.ts
index 89e8405..e00970c 100644
--- a/src/packages/components/Zhilan/Zhilan/WeiXingGuoLv/config.ts
+++ b/src/packages/components/Zhilan/Zhilan/WeiXingGuoLv/config.ts
@@ -7,7 +7,7 @@ import cloneDeep from 'lodash/cloneDeep'
 export const option = {
   textColors: ['#FFFFFF','#FFFFFF'],
   textSize: [14,10],
-  backgroundColors: ["#05231A","#0A392A","#0A392A"],
+  backgroundColors: ["#05231A","#0A392A","#06281D"],
   headerData:["卫星","观测目标","开始时间","结束时间"],
   dataset: [
     { title: '山东卫星一号' , target: '山东临沂市费县费城街道', startTime: '2025-3-17 16:12:57', endTime: '2025-3-17 16:12:57' },
diff --git a/src/packages/components/Zhilan/Zhilan/WeiXingImg/index.vue b/src/packages/components/Zhilan/Zhilan/WeiXingImg/index.vue
index 17759be..490d69f 100644
--- a/src/packages/components/Zhilan/Zhilan/WeiXingImg/index.vue
+++ b/src/packages/components/Zhilan/Zhilan/WeiXingImg/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div  class="go-title-03">
-    <img :width="w" :height="h" src="/src/assets/images/chart/zhilan/weixingimg.png" />
+    <img :width="w" :height="h" src="/src/assets/images/chart/zhilan/weixingyaogan.gif" />
   </div>
 </template>
 
diff --git a/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/config.ts b/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/config.ts
new file mode 100644
index 0000000..7f38c00
--- /dev/null
+++ b/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/config.ts
@@ -0,0 +1,48 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig,requestSqlConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { ZhiLan_ZhongZhiShuLiangMianJiConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+const { source } = dataJson;
+
+export const option = {
+  dataset: source,
+  dataStyle: {
+    backgroud: '#FFFFFF00',
+    marginTop: 100,
+    marginLeft: 25,
+    sortOrder: '0',
+
+    unitTitle: '单位 / 平方米',
+    unitName: 'm²',
+    unitFontSize: 14,
+    unitFontColor: '#738073',
+
+    itemMarginTop: 15,
+    itemHeight: 40,
+
+    labelFontSize: 13,
+    labelFontColor: '#9ab398',
+    labelWidth: 100,
+    labelAlign: 'center',
+
+    valueFontSize: 16,
+    valueFontColor: '#FFFFFF',
+
+    lineBackgroud: '#000000',
+    lineBorderWidth: 1,
+    lineBorderColor: '#ffffff',
+    lineHeight: 15,
+    lineStartColor: '#0B4D2C',
+    lineEndColor: '#4DFFB5',
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = ZhiLan_ZhongZhiShuLiangMianJiConfig.key
+  public attr = { ...chartInitConfig, w: 400, h: 900, zIndex: 1 }
+  public chartConfig = cloneDeep(ZhiLan_ZhongZhiShuLiangMianJiConfig)
+  public option = cloneDeep(option)
+}
diff --git a/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/config.vue b/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/config.vue
new file mode 100644
index 0000000..89c7530
--- /dev/null
+++ b/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/config.vue
@@ -0,0 +1,237 @@
+<template>
+  <CollapseItem name="样式设置" :expanded="true">
+    <SettingItemBox :alone="false" name="整体设置">
+      <SettingItem :alone="false" name="上方距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.marginTop"
+          :min="0"
+          size="small"
+          placeholder="上方距离"
+        />
+      </SettingItem>
+      <SettingItem :alone="false" name="左右距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.marginLeft"
+          :min="0"
+          size="small"
+          placeholder="左右距离"
+        />
+      </SettingItem>
+      <SettingItem name="背景颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.backgroud"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="单个高度">
+        <n-input-number
+          v-model:value="optionData.dataStyle.itemHeight"
+          :min="0"
+          size="small"
+          placeholder="单个高度"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="单位与内容之间的距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.itemMarginTop"
+          :min="0"
+          size="small"
+          placeholder="单位与内容之间的距离"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="排序方式">
+        <n-radio-group
+          v-model:value="optionData.dataStyle.sortOrder"
+          size="small"
+          name="radiogroup"
+        >
+          <n-space>
+            <n-radio value="0"> 不排序 </n-radio>
+            <n-radio value="1"> 升序 </n-radio>
+            <n-radio value="2"> 降序 </n-radio>
+          </n-space>
+        </n-radio-group>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox :alone="false" name="单位设置">
+      <SettingItem :alone="false" name="单位名称">
+        <n-input
+          v-model:value="optionData.dataStyle.unitTitle"
+          size="small"
+          placeholder="单位名称"
+        />
+      </SettingItem>
+      <SettingItem :alone="false" name="单位符号">
+        <n-input
+          v-model:value="optionData.dataStyle.unitName"
+          size="small"
+          placeholder="单位符号"
+        />
+      </SettingItem>
+      <SettingItem name="单位字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.unitFontColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.unitFontColor = dataStyleClone.unitFontColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem :alone="false" name="单位字体大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.unitFontSize"
+          :min="0"
+          size="small"
+          placeholder="单位字体大小"
+        />
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox :alone="false" name="标题设置">
+      <SettingItem name="标题宽度">
+        <n-input-number
+          v-model:value="optionData.dataStyle.labelWidth"
+          :min="0"
+          size="small"
+          placeholder="标题宽度"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="标题字体大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.labelFontSize"
+          :min="0"
+          size="small"
+          placeholder="标题字体大小"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="标题字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.labelFontColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.labelFontColor = dataStyleClone.labelFontColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="标题对齐方式">
+        <n-select
+          v-model:value="optionData.dataStyle.labelAlign"
+          :options="[
+            { label: '靠左', value: 'left' },
+            { label: '居中', value: 'center' },
+            { label: '靠右', value: 'right' },
+          ]"
+          size="small"
+        />
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox :alone="false" name="进度条设置">
+      <SettingItem name="进度条背景颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.lineBackgroud"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="进度条高度">
+        <n-input-number
+          v-model:value="optionData.dataStyle.lineHeight"
+          :min="0"
+          size="small"
+          placeholder="进度条高度"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="进度条边框颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.lineBorderColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="进度条边框宽度">
+        <n-input-number
+          v-model:value="optionData.dataStyle.lineBorderWidth"
+          :min="0"
+          size="small"
+          placeholder="进度条边框宽度"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="标题字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.lineStartColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.dataStyle.lineStartColor = '#0B4D2C'">
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="标题字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.lineEndColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.dataStyle.lineEndColor = '#4DFFB5'">
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox :alone="false" name="值设置">
+      <SettingItem name="值的字体大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.valueFontSize"
+          :min="0"
+          size="small"
+          placeholder="值的字体大小"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="值的字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.valueFontColor"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+  import { PropType } from 'vue';
+  import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting';
+  import { option } from './config';
+
+  const props = defineProps({
+    optionData: {
+      type: Object as PropType<typeof option>,
+      required: true,
+    },
+  });
+
+  const dataStyleClone = {
+    unitFontColor: '#738073',
+    labelFontColor: '#9ab398',
+    lineStartColor: '#0B4D2C',
+    lineEndColor: '#4DFFB5',
+  };
+</script>
diff --git a/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/data.json b/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/data.json
new file mode 100644
index 0000000..172f845
--- /dev/null
+++ b/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/data.json
@@ -0,0 +1,64 @@
+{
+  "source": [
+    {
+      "label": "林种类型",
+      "value": "4820"
+    },
+    {
+      "label": "林种类型",
+      "value": "14820"
+    },
+    {
+      "label": "林种类型",
+      "value": "8820"
+    },
+    {
+      "label": "林种类型",
+      "value": "1220"
+    },
+    {
+      "label": "林种类型",
+      "value": "7421"
+    },
+    {
+      "label": "林种类型",
+      "value": "4820"
+    },
+    {
+      "label": "林种类型",
+      "value": "14820"
+    },
+    {
+      "label": "林种类型",
+      "value": "8820"
+    },
+    {
+      "label": "林种类型",
+      "value": "1220"
+    },
+    {
+      "label": "林种类型",
+      "value": "7421"
+    },
+    {
+      "label": "林种类型",
+      "value": "4820"
+    },
+    {
+      "label": "林种类型",
+      "value": "14820"
+    },
+    {
+      "label": "林种类型",
+      "value": "8820"
+    },
+    {
+      "label": "林种类型",
+      "value": "1220"
+    },
+    {
+      "label": "林种类型",
+      "value": "7421"
+    }
+  ]
+}
diff --git a/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/index.ts b/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/index.ts
new file mode 100644
index 0000000..4b6747c
--- /dev/null
+++ b/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/index.ts
@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const ZhiLan_ZhongZhiShuLiangMianJiConfig: ConfigType = {
+  key: 'ZhiLan_ZhongZhiShuLiangMianJi',
+  chartKey: 'VZhiLan_ZhongZhiShuLiangMianJi',
+  conKey: 'VCZhiLan_ZhongZhiShuLiangMianJi',
+  title: '种植数量面积',
+  category: ChatCategoryEnum.ZHILAN,
+  categoryName: ChatCategoryEnumName.ZHILAN,
+  package: PackagesCategoryEnum.ZHILAN,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'ZhiLan_ZhongZhiShuLiangMianJi.png',
+};
diff --git a/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/index.vue b/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/index.vue
new file mode 100644
index 0000000..33d52af
--- /dev/null
+++ b/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/index.vue
@@ -0,0 +1,187 @@
+<template>
+  <div class="ZhiLan_ZhongZhiShuLiangMianJi">
+    <div class="box">
+      <div class="unit">{{ option.dataStyle.unitTitle }} （{{ option.dataStyle.unitName }}）</div>
+      <div class="itemList">
+        <div class="item" v-for="(item, index) in sortData" :key="index">
+          <div class="label">{{ item.label }}</div>
+          <div class="backbox">
+            <div class="num">
+              <div
+                class="rate"
+                :style="{
+                  width: `${(item.value / maxValue) * valueWidth * 0.7}px`,
+                  background: `linear-gradient(90deg, 
+                    ${option.dataStyle.lineStartColor} 0%, 
+                    ${option.dataStyle.lineEndColor} 100%)`,
+                }"
+              >
+              </div>
+              <span class="value">{{ item.value }}</span>
+              <span class="value_unit">{{ option.dataStyle.unitName }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { PropType, toRefs, ref, reactive, computed } from 'vue';
+  import { CreateComponentType } from '@/packages/index.d';
+  import { useChartDataFetch } from '@/hooks';
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+  import { cloneDeep } from 'lodash-es';
+
+  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,
+  });
+
+  // 排序
+  const sortData = computed(() => {
+    let cloneData = cloneDeep(option.dataset);
+    if (option.dataStyle.sortOrder == '0') {
+      // 不排序
+      return cloneData;
+    } else if (option.dataStyle.sortOrder == '1') {
+      // 升序
+      return cloneData.sort((a, b) => parseInt(a.value) - parseInt(b.value));
+    } else if (option.dataStyle.sortOrder == '2') {
+      // 降序
+      return cloneData.sort((a, b) => parseInt(b.value) - parseInt(a.value));
+    }
+  });
+
+  // 最大值
+  const maxValue = Math.max(...option.dataset.map((item) => parseInt(item.value, 10)));
+  // 进度条宽度
+  const valueWidth = computed(() => {
+    return w.value - option.dataStyle.marginLeft * 2 - option.dataStyle.labelWidth;
+  });
+  // 单位DIV高度
+  const unitHeight = computed(() => {
+    return document.querySelector('.unit')?.offsetHeight;
+  });
+
+  // setdata 数据监听与更改
+  useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+    props.chartConfig.option.dataset = newData;
+  });
+</script>
+
+<style lang="scss" scoped>
+  .ZhiLan_ZhongZhiShuLiangMianJi {
+    background: v-bind('`${option.dataStyle.backgroud}`');
+    width: v-bind('`${w}px`');
+    height: v-bind('`${h}px`');
+
+    // 页面不能被选中
+    -webkit-user-select: none; /* Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE/Edge */
+    user-select: none;
+  }
+
+  .box {
+    margin-top: v-bind('`${option.dataStyle.marginTop}px`');
+    padding-left: v-bind('`${option.dataStyle.marginLeft}px`');
+    padding-right: v-bind('`${option.dataStyle.marginLeft}px`');
+  }
+
+  .unit {
+    text-align: right;
+    color: v-bind('`${option.dataStyle.unitFontColor}`');
+    font-size: v-bind('`${option.dataStyle.unitFontSize}px`');
+    margin-bottom: v-bind('`${option.dataStyle.itemMarginTop}px`');
+    font-family:
+      PingFangSC,
+      PingFang SC;
+    font-weight: 500;
+    font-style: normal;
+  }
+
+  .itemList {
+    overflow-y: auto;
+    height: v-bind(
+      '`${h - option.dataStyle.marginTop - option.dataStyle.itemMarginTop - unitHeight}px`'
+    );
+  }
+  .itemList::-webkit-scrollbar {
+    display: none;
+  }
+  .itemList {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .item {
+    display: inline-flex;
+    width: 100%;
+    height: v-bind('`${option.dataStyle.itemHeight}px`');
+  }
+
+  .label {
+    display: flex;
+    align-items: center;
+    justify-content: v-bind('`${option.dataStyle.labelAlign}`');
+    width: v-bind('`${option.dataStyle.labelWidth}px`');
+    border-right: 1px solid #ffffff;
+
+    color: v-bind('`${option.dataStyle.labelFontColor}`');
+    font-size: v-bind('`${option.dataStyle.labelFontSize}px`');
+    font-family:
+      PingFangSC,
+      PingFang SC;
+    font-weight: 400;
+    text-align: right;
+    font-style: normal;
+  }
+
+  .backbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: v-bind('`${valueWidth}px`');
+    height: 100%;
+
+    .num {
+      background: v-bind('`${option.dataStyle.lineBackgroud}`');
+      border: v-bind('`${option.dataStyle.lineBorderWidth}px`') solid
+        v-bind('`${option.dataStyle.lineBorderColor}`');
+      display: inline-flex;
+      align-items: center;
+      width: 100%;
+      height: v-bind('`${option.dataStyle.lineHeight}px`');
+
+      .rate {
+        height: v-bind('`${option.dataStyle.lineHeight * 0.5}px`');
+        margin-right: 10px;
+      }
+
+      .value {
+        color: v-bind('`${option.dataStyle.valueFontColor}`');
+        font-size: v-bind('`${option.dataStyle.valueFontSize}px`');
+        font-family: D-DIN, D-DIN;
+        font-weight: bold;
+        font-style: normal;
+      }
+      .value_unit {
+        color: v-bind('`${option.dataStyle.valueFontColor}`');
+        font-size: v-bind('`${option.dataStyle.valueFontSize}px`');
+        font-family: D, D;
+        font-weight: normal;
+        font-style: normal;
+      }
+    }
+  }
+</style>
diff --git a/src/packages/components/Zhilan/Zhilan/index.ts b/src/packages/components/Zhilan/Zhilan/index.ts
index e8035d8..c5d91c5 100644
--- a/src/packages/components/Zhilan/Zhilan/index.ts
+++ b/src/packages/components/Zhilan/Zhilan/index.ts
@@ -18,7 +18,7 @@ import { ZhiLanRenYuanLeiXingConfig } from './ZhiLanRenYuanLeiXing/index';
 import { ZhiLanGongNengLeiXingConfig } from './ZhiLanGongNengLeiXing/index';
 import { WeiXingGuoLvConfig } from './WeiXingGuoLv/index';
 import { WeiXingImgConfig } from './WeiXingImg/index';
-
+import { ZhiLan_ZhongZhiShuLiangMianJiConfig } from './ZhiLan_ZhongZhiShuLiangMianJi/index';
 
 export default [
     ZhiLanTitlesConfig,
@@ -27,6 +27,7 @@ export default [
     ZhiLanGongNengLeiXingConfig,
     WeiXingGuoLvConfig,
     WeiXingImgConfig,
+    ZhiLan_ZhongZhiShuLiangMianJiConfig,
     ZhiLanIcons01Config,
     ZhiLanIcons02Config,
     ZhiLanIcons03Config,
diff --git a/src/views/chart/ContentCharts/components/PhotoModal/index.vue b/src/views/chart/ContentCharts/components/PhotoModal/index.vue
index 27bf309..8367d13 100644
--- a/src/views/chart/ContentCharts/components/PhotoModal/index.vue
+++ b/src/views/chart/ContentCharts/components/PhotoModal/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="modal-content">
+  <div ref="modalContent" class="modal-content">
     <div class="modal-title">
       <div class="title-span">图片管理</div>
       <div class="close-button-div">
@@ -11,7 +11,7 @@
         <div class="menu-title">
           <div class="menu-title-icon"></div>
           <div class="menu-title-span">图片资源</div>
-          <div style="font-size: 20px;cursor: pointer;" @click="openAddMenu"><PlusSquareOutlined /></div>
+          <div v-if="isChange" style="font-size: 20px;cursor: pointer;" @click="openAddMenu"><PlusSquareOutlined /></div>
         </div>
         <div class="menu-list">
           <div :class="`menu-item ${selectPhotoGroup == item? 'select-menu': ''}`" v-for="(item, index) in photoGroupList" :key="index" @click="changeMenu">
@@ -66,6 +66,7 @@
               <a-image
                 class="item-image"
                 :src="`${apiUrl}/${item.filePath}`"
+                :preview="{ getContainer: () => modalContent }"
               />
               <div class="image-size">{{ `` }}</div>
               <a-checkbox class="select-image" 
@@ -114,22 +115,24 @@
       </div>
     </div>
     <div class="button-div">
-      <Button  type="primary" style="margin-right: 10px;background-color: #ed6f6f;" @click="deleteImage">删除图片</Button>
+      <Button v-if="isChange"  type="primary" style="margin-right: 10px;background-color: #ed6f6f;" @click="deleteImage">删除图片</Button>
       <Upload
         :multiple="true"
         :accept="'.jpg,.png,.jpeg'"
         :showUploadList="false"
         :custom-request="customRequest"
+        v-if="isChange"
       >
         <Button  type="primary" :icon="h(UploadOutlined)" style="margin-right: 10px;">上传图片</Button>
       </Upload>
-      <Button  type="primary" @click="addPhotoToList">添加到图片列表</Button>
+      <Button v-if="isChange"  type="primary" @click="addPhotoToList">添加到图片列表</Button>
+      <Button v-if="!isChange"  type="primary" @click="changePhotoPath">修改</Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, h, computed } from "vue"
+import { ref, onMounted, h, computed, defineProps, defineEmits } from "vue"
 import { imageList, imageUpload, imageDelete, getImageGroupList } from '@/api/demo/photo'
 import { useGlobSetting } from '@/hooks/setting';
 import { Image, Button, Upload, Modal } from 'ant-design-vue';
@@ -147,6 +150,14 @@ import { selectSortOptions } from './util'
 const photoModalStateStore = photoModalStore()
 const packagesStore = usePackagesStore()
 const { apiUrl } = useGlobSetting();
+const props = defineProps({
+  readonly: {
+    type: Boolean,
+    required: true,
+  },
+})
+const emits = defineEmits(['closePhotoModal','saveChangePhoto'])
+const isChange = computed(() => !props.readonly)
 
 onMounted(() => {
   // getList()
@@ -166,6 +177,7 @@ const current = ref(1)
 const pageSize = ref(10)
 const addMenuName = ref('')
 const addMenuOpen = ref(false)
+const modalContent = ref()
 
 const paginatedData = computed(() => {
   const start = (current.value - 1) * pageSize.value;
@@ -197,7 +209,12 @@ const getPhotoGroup = () => {
   })
 }
 const closeModal = () => {
-  photoModalStateStore.changeOpenState(false)
+  if(isChange.value){
+    photoModalStateStore.changeOpenState(false)
+  }else{
+    emits('closePhotoModal')
+  }
+  
 }
 const changeSelect = (type,item) => {
   switch(type){
@@ -296,6 +313,17 @@ const changeMenu = (item) => {
   current.value = 1
   getList()
 }
+const changePhotoPath = () => {
+  if(selectPhotoList.value.length <= 0){
+    window.$message.warning('请选择要修改的图片')
+    return
+  }
+  if(selectPhotoList.value.length > 1){
+    window.$message.warning('请只选择一张需要修改的图片')
+    return
+  }
+  emits('saveChangePhoto',`${apiUrl}/${selectPhotoList.value[0].filePath}`)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/chart/ContentCharts/index.vue b/src/views/chart/ContentCharts/index.vue
index 662782f..23e3e07 100644
--- a/src/views/chart/ContentCharts/index.vue
+++ b/src/views/chart/ContentCharts/index.vue
@@ -52,7 +52,7 @@
     :footer="null"
     :closable="false"
   >
-    <PhotoModal />
+    <PhotoModal :readonly="false"/>
   </a-modal>
 </template>