From 593ca352b7332894f575adfead0659f3814b25a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Thu, 20 Mar 2025 17:02:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=99=BA=E5=A4=84-=E5=BC=B9=E7=AA=97=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E7=AD=9B=E9=80=89=E5=8A=9F=E8=83=BD-=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=97=A5=E6=9C=9F=E7=AD=9B=E9=80=89=E3=80=81=E6=91=84?=
 =?UTF-8?q?=E5=83=8F=E5=A4=B4=E7=B1=BB=E5=9E=8Bbug=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Zhichu/Zhichu/ZhiChu_ModalFrame/index.ts  |   2 +-
 .../Zhichu/ZhiChu_ModalFrameClose/index.ts    |   2 +-
 .../Zhichu/Zhichu/ZhiChu_ModalTable/config.ts |   5 +-
 .../Zhichu/ZhiChu_ModalTable/config.vue       | 299 ++++++++++--------
 .../Zhichu/Zhichu/ZhiChu_ModalTable/data.json |  30 +-
 .../Zhichu/Zhichu/ZhiChu_ModalTable/index.ts  |   2 +-
 .../Zhichu/Zhichu/ZhiChu_ModalTable/index.vue | 104 +++++-
 .../ZhiGan_SheXiangTouLeiXing/data.json       |  32 +-
 .../ZhiGan_SheXiangTouLeiXing/index.vue       |  38 ++-
 .../ZhiGan_SheXiangTouLeiXing/svg/tupian1.vue |  12 +-
 .../ZhiGan_SheXiangTouLeiXing/svg/tupian2.vue |  10 +-
 .../ZhiGan_SheXiangTouLeiXing/svg/tupian3.vue |  12 +-
 .../ZhiGan_SheXiangTouLeiXing/svg/tupian6.vue |   4 +-
 .../ZhiGan_SheXiangTouLeiXing/svg/tupian7.vue |   4 +-
 .../ZhiGan_SheXiangTouLeiXing/svg/tupian8.vue |   4 +-
 .../ZhiGan_SheXiangTouLeiXing/svg/tupian9.vue |   4 +-
 16 files changed, 357 insertions(+), 207 deletions(-)

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 6959140..764b155 100644
--- a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.ts
+++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.ts
@@ -51,6 +51,9 @@ export const option = {
     tableHeaderBackgroud: '#FFFFFF',
     tableHeaderFontSize: 20,
     tableHeaderFontColor: '#000000',
+
+    tableDataBackgroudShow: false,
+    tableDataBackgroud: '#FFFFFF',
     tableDataFontSize: 20,
     tableDataFontColor: '#FFFFFF',
   },
@@ -58,7 +61,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = ZhiChu_ModalTableConfig.key
-  public attr = { ...chartInitConfig, w: 1060, h: 485, 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 4041d99..ec15759 100644
--- a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.vue
+++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.vue
@@ -1,8 +1,8 @@
 <template>
   <!-- 筛选项数据显示设置 -->
   <CollapseItem name="筛选项数据显示设置" :expanded="true">
+    <span style="font-size: 12px; margin-left: 8px"> 筛选项字段与类型 </span>
     <div style="overflow-x: auto">
-      <span style="font-size: 12px; margin-left: 8px"> 筛选项字段与类型 </span>
       <n-table
         class="go-request-header-table-box"
         style="margin-top: 12px"
@@ -82,6 +82,7 @@
           { label: '全数据搜索框', value: 'inputSearchAll' },
           { label: '时间选择器', value: 'timePicker' },
           { label: '时间范围', value: 'timeRange' },
+          { label: '日期范围', value: 'dateRange' },
         ]"
         clearable
         size="small"
@@ -91,7 +92,6 @@
           filtersetItem.value = null;
         "
       />
-      <!-- { label: '日期范围', value: 'dateRange' }, -->
     </SettingItem>
     <SettingItem v-if="!['inputSearchAll'].includes(filtersetItem.showType)" name="对应字段">
       <n-select
@@ -178,72 +178,79 @@
     </SettingItem>
 
     <!-- 搜索框、时间日期框无选项 -->
-    <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"
+    <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"
-                ghost
-                @click="
-                  filtersetItem.options.splice(optionsIndex + 1, 0, {
-                    label: null,
-                    value: null,
-                  })
-                "
-              >
-                +
-              </n-button>
-              <n-button
-                class="go-ml-2"
-                type="warning"
+                placeholder="名称"
+              />
+            </td>
+            <td>
+              <n-input
+                v-model:value="optionsItem.value"
+                type="text"
                 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>
+                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 />
@@ -343,10 +350,10 @@
   </CollapseItem>
 
   <CollapseItem name="表格数据显示设置" :expanded="true">
+    <span style="font-size: 12px; margin-left: 8px">
+      表格数据（请先确定数据部分，再确定表格数据）
+    </span>
     <div style="overflow-x: auto">
-      <span style="font-size: 12px; margin-left: 8px">
-        表格数据（请先确定数据部分，再确定表格数据）
-      </span>
       <n-table
         class="go-request-header-table-box"
         style="margin-top: 12px"
@@ -417,68 +424,75 @@
     </SettingItemBox>
 
     <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>
+    <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>
-    <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>
+    <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="是否显示边框">
@@ -572,14 +586,14 @@
         />
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox :alone="false" name="字体设置">
-      <!-- <SettingItem name="表头背景颜色">
+    <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"
@@ -595,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"
@@ -685,7 +716,7 @@
       columnsWidths.value = props.optionData.header.map((item) => item.width).join(',');
     },
     {
-      deep: false,
+      deep: true,
       immediate: true,
     },
   );
@@ -697,6 +728,10 @@
         item.width = widths[index];
       });
     },
+    {
+      deep: true,
+      immediate: true,
+    },
   );
 
   // 筛选方式
diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/data.json b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/data.json
index 56a91f7..1d6f880 100644
--- a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/data.json
+++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/data.json
@@ -66,7 +66,7 @@
       "title": "资源列表", 
       "field": "type", 
       "compareType": "equal",
-      "showType": "button", 
+      "showType": "buttonGroup", 
       "value": null, 
       "options": [
         { "label": "水源", "value": "水源" },
@@ -106,7 +106,8 @@
       "area": null,
       "time": null,
       "distance": "21.14",
-      "estimatedTime": "00:05:45"
+      "estimatedTime": "00:05:45",
+      "date": "2025-03-01 00:05:45"
     },
     {
       "name": "东蒙布袋口检查",
@@ -114,7 +115,8 @@
       "area": "300",
       "time": "12.50",
       "distance": "14.14",
-      "estimatedTime": "00:05:45"
+      "estimatedTime": "00:05:45",
+      "date": "2025-03-11 00:05:45"
     },
     {
       "name": "北刘家庄蓄水池",
@@ -122,7 +124,9 @@
       "area": "300",
       "time": "12.50",
       "distance": "0.14",
-      "estimatedTime": "00:05:45"
+      "estimatedTime": "00:05:45",
+      "date": "2025/03/01 00:05:45"
+      
     },
     {
       "name": "防火通道",
@@ -130,7 +134,8 @@
       "area": null,
       "time": null,
       "distance": "2.14",
-      "estimatedTime": "00:05:45"
+      "estimatedTime": "00:05:45",
+      "date": "2025-12-01 00:05:45"
     },
     {
       "name": "步行道",
@@ -138,7 +143,8 @@
       "area": "300",
       "time": "5.50",
       "distance": "1.14",
-      "estimatedTime": "00:05:45"
+      "estimatedTime": "00:05:45",
+      "date": "2025-08-01 00:05:45"
     },
     {
       "name": "三轮通道",
@@ -146,7 +152,8 @@
       "area": "300",
       "time": "9.50",
       "distance": "5.14",
-      "estimatedTime": "00:05:45"
+      "estimatedTime": "00:05:45",
+      "date": "2025-10-21 00:05:45"
     },
     {
       "name": "坑塘",
@@ -154,7 +161,8 @@
       "area": null,
       "time": null,
       "distance": "10.14",
-      "estimatedTime": "00:05:45"
+      "estimatedTime": "00:05:45",
+      "date": "2025-06-01 00:05:45"
     },
     {
       "name": "东蒙布袋口检查",
@@ -162,7 +170,8 @@
       "area": "300",
       "time": "12.50",
       "distance": "10.14",
-      "estimatedTime": "00:05:45"
+      "estimatedTime": "00:05:45",
+      "date": "2025-06-12 00:05:45"
     },
     {
       "name": "北刘家庄蓄水池",
@@ -170,7 +179,8 @@
       "area": "300",
       "time": "12.50",
       "distance": "19.14",
-      "estimatedTime": "00:05:45"
+      "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 efb3bdc..e96291a 100644
--- a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.vue
+++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.vue
@@ -181,7 +181,15 @@
           <!-- 日期范围 -->
           <a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'dateRange'">
             <div class="filterContentDiv">
-              <n-date-picker />
+              <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>
           <!-- 其他 -->
@@ -193,6 +201,7 @@
     </div>
 
     <!-- 表格部分 -->
+    <!-- 表头 -->
     <div class="theadDiv">
       <n-table
         :bordered="option.dataStyle.tableBordered"
@@ -210,17 +219,16 @@
               class="th"
               v-if="option.dataStyle.orderBumberShow"
               :style="{
-                width: option.dataStyle.orderDivWidth + 'px',
+                width: headWidths[0] + 'px',
               }"
             >
-              序号
             </th>
             <th
               class="th"
               v-for="(item, index) in option.header"
               :key="index"
               :style="{
-                width: item.width + 'px',
+                width: headWidths[option.dataStyle.orderBumberShow ? index + 1 : index] + 'px',
               }"
             >
               {{ item.title }}
@@ -229,7 +237,7 @@
               class="th"
               v-if="option.dataStyle.buttonDivShow"
               :style="{
-                width: option.dataStyle.buttonDivWidth + 'px',
+                width: headWidths[headWidths.length - 1] + 'px',
               }"
             >
               操作
@@ -238,6 +246,7 @@
         </thead>
       </n-table>
     </div>
+    <!-- 表格数据 -->
     <div class="tbodyDiv">
       <n-table
         :bordered="option.dataStyle.tableBordered"
@@ -249,10 +258,17 @@
           <tr
             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',
@@ -262,6 +278,7 @@
             </td>
             <!-- 数据 -->
             <td
+              :id="'dataTd_' + headerIndex"
               v-for="(headerItem, headerIndex) in option.header"
               :key="headerIndex"
               :style="{
@@ -274,6 +291,7 @@
             </td>
             <!-- 操作 -->
             <td
+              id="dataTd_button"
               v-if="option.dataStyle.buttonDivShow"
               :style="{
                 width: option.dataStyle.buttonDivWidth + 'px',
@@ -339,7 +357,7 @@
   });
 
   // 表头高度
-  const headHeight = computed(() => {
+  const headHeight: any = computed(() => {
     if (option.dataStyle.tableHeaderShow) {
       return document.querySelector('.theadDiv')?.offsetHeight + 10;
     } else {
@@ -347,6 +365,27 @@
     }
   });
 
+  // 数据表实际宽度
+  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);
@@ -362,8 +401,12 @@
   const filterData = computed(() => {
     let data = cloneDeep(option.dataset);
     option.filterset.forEach((filtersetItem) => {
-      if (filtersetItem.value) {
-        switch (filtersetItem.field && filtersetItem.compareType) {
+      // console.log(filtersetItem);
+      if (
+        (filtersetItem.field && filtersetItem.value) ||
+        (!filtersetItem.field && filtersetItem.showType == 'inputSearchAll')
+      ) {
+        switch (filtersetItem.compareType) {
           // 大于
           case 'greater':
             if (['timePicker'].includes(filtersetItem.showType)) {
@@ -534,9 +577,9 @@
             }
             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, 'yyyy-MM-dd HH:mm:ss');
-                const endTime = dayjs(filtersetItem.value, 'yyyy-MM-dd HH:mm:ss');
+                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;
               });
             }
@@ -581,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() +
         '小时' +
@@ -590,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;
   }
 
@@ -598,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;
@@ -608,6 +665,15 @@
       return false;
     }
   }
+  // 检查字符串可否转成日期
+  function isValidDate(str, format) {
+    const parsedDate = dayjs(str, format);
+    if (parsedDate.isValid()) {
+      return true;
+    } else {
+      return false;
+    }
+  }
 
   // 表格按钮方法
   function pitchLocation(dataItem, dataIndex) {}
@@ -720,6 +786,7 @@
   }
 
   .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`');
@@ -731,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>