diff --git a/src/assets/images/chart/zhigan/ZhiGan_SheXiangTouModal.png b/src/assets/images/chart/zhigan/ZhiGan_SheXiangTouModal.png
new file mode 100644
index 0000000..8560413
Binary files /dev/null and b/src/assets/images/chart/zhigan/ZhiGan_SheXiangTouModal.png differ
diff --git a/src/assets/images/chart/zhigan/component/SheXiangTouModal_Back.png b/src/assets/images/chart/zhigan/component/SheXiangTouModal_Back.png
new file mode 100644
index 0000000..f067d35
Binary files /dev/null and b/src/assets/images/chart/zhigan/component/SheXiangTouModal_Back.png differ
diff --git a/src/assets/images/chart/zhigan/component/SheXiangTouModal_VideoBack.png b/src/assets/images/chart/zhigan/component/SheXiangTouModal_VideoBack.png
new file mode 100644
index 0000000..676195c
Binary files /dev/null and b/src/assets/images/chart/zhigan/component/SheXiangTouModal_VideoBack.png differ
diff --git a/src/packages/components/Charts/Maps/MapLayer/index.vue b/src/packages/components/Charts/Maps/MapLayer/index.vue
index 49b998b..f441e24 100644
--- a/src/packages/components/Charts/Maps/MapLayer/index.vue
+++ b/src/packages/components/Charts/Maps/MapLayer/index.vue
@@ -227,7 +227,6 @@ const handlerGetLayerTree = ()=>{
       handlerLayers.value.push(layerGroup);
     });
     
-    console.log("configlayers",handlerLayers.value);
     // window.globalMap.setLayersOptions(configLayers);
   })
 }
@@ -320,9 +319,8 @@ onMounted(()=>{
   });
 })
 
-
-
 const isFirstLoad = ref(true);
+
 const initMap = (newData: any) => {
   // 第一次加载
   if(isFirstLoad.value){
@@ -331,6 +329,7 @@ const initMap = (newData: any) => {
     // map.setOptions(newData);
     map.setSceneOptions(newData.scene);
   }
+
   isFirstLoad.value = false;
 
   window.globalMap = map;
diff --git a/src/packages/components/Charts/Maps/MapMars3d/index.vue b/src/packages/components/Charts/Maps/MapMars3d/index.vue
index dbc03fc..fe2af37 100644
--- a/src/packages/components/Charts/Maps/MapMars3d/index.vue
+++ b/src/packages/components/Charts/Maps/MapMars3d/index.vue
@@ -71,6 +71,7 @@ const initMap = (newData: any) => {
 
     // 所有绑定的点击事件
     let bindEvents = props.chartConfig.events.interactConfigEvents
+
     console.log("bindEvents",bindEvents);
 
     // 图层点击事件
@@ -2134,7 +2135,7 @@ const stopWatch = watch(
     //         }
     //     ]
     // }
-
+      console.log("options",options);
     initMap(options);
 
   },
diff --git a/src/packages/components/Tasks/Tasks/TaskBanner/config.ts b/src/packages/components/Tasks/Tasks/TaskBanner/config.ts
index 3335394..191716a 100644
--- a/src/packages/components/Tasks/Tasks/TaskBanner/config.ts
+++ b/src/packages/components/Tasks/Tasks/TaskBanner/config.ts
@@ -42,7 +42,30 @@ export const option = {
       "/src/assets/images/chart/tasks/bannerimg1.png",
       "/src/assets/images/chart/tasks/bannerimg1.png",
     ]
-  }
+  },
+  primaryKey:"id",
+  showColumns:[
+    {
+      type:"text",
+      en_name: 'ReportPerson',
+      zh_name: '人员名称',
+    },
+    {
+      type:"text",
+      en_name: 'ReportTime',
+      zh_name: '上报时间',
+    },
+    {
+      type:"text",
+      en_name: 'Describe',
+      zh_name: '火情描述',
+    },
+    {
+      type:"text",
+      en_name: 'Address',
+      zh_name: '位置地点',
+    },
+  ]
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
diff --git a/src/packages/components/Tasks/Tasks/TaskBanner/config.vue b/src/packages/components/Tasks/Tasks/TaskBanner/config.vue
index 2d2a068..563a4a9 100644
--- a/src/packages/components/Tasks/Tasks/TaskBanner/config.vue
+++ b/src/packages/components/Tasks/Tasks/TaskBanner/config.vue
@@ -58,10 +58,59 @@
         </SettingItem>
       </SettingItemBox>
   </CollapseItem>
+
+
+  <CollapseItem name="展示信息" :expanded="true">
+
+    <SettingItem name="主键字段">
+      <a-input size="small"  v-model:value="optionData.primaryKey"  placeholder="主键字段" />
+    </SettingItem>
+      
+
+        <a-table size="small" :dataSource="optionData.showColumns" :columns="columns" 
+          :pagination="false"
+        >
+          
+          <template #bodyCell="{ column,record}">
+
+            <template v-if="column.key === 'type'">
+              <a-select v-model:value="record.type" size="small">
+                <a-select-option value="text">文本</a-select-option>
+                <a-select-option value="image">图片</a-select-option>
+                <a-select-option value="video">视频</a-select-option>
+              </a-select>
+            </template>
+    
+            <template v-if="column.key === 'en_name'">
+              <a-input size="small" v-model:value="record.en_name"  placeholder="英文字段" />
+            </template>
+    
+            <template v-if="column.key === 'zh_name'">
+              <a-input size="small"  v-model:value="record.zh_name"  placeholder="中文名称" />
+            </template>
+    
+          </template>
+    
+    
+          <template #footer>
+            <a-button type="default"  size="small" @click="addShowColumns">
+              <template #icon>
+                <PlusOutlined />
+              </template>
+              添加显示字段
+            </a-button>
+          </template>
+          
+        </a-table>
+
+  </CollapseItem>
+
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType,ref } from 'vue'
+import { PlusOutlined } from '@ant-design/icons-vue';
+
 import {
   CollapseItem,
   SettingItemBox,
@@ -75,4 +124,35 @@ const props = defineProps({
     required: true
   }
 })
+
+
+
+
+const columns = ref(
+  [
+    {
+      title: '字段类型',
+      dataIndex: 'type',
+      key: 'type',
+    },
+    {
+      title: '英文字段',
+      dataIndex: 'en_name',
+      key: 'en_name',
+    },
+    {
+      title: '中文名称',
+      dataIndex: 'zh_name',
+      key: 'zh_name',
+    }
+  ]
+)
+
+const addShowColumns = ()=>{
+    props.optionData.showColumns.push({
+      type:"text",
+      en_name: '',
+      zh_name: '',
+    })
+}
 </script>
diff --git a/src/packages/components/Tasks/Tasks/TaskBanner/index.vue b/src/packages/components/Tasks/Tasks/TaskBanner/index.vue
index 8841854..83289e0 100644
--- a/src/packages/components/Tasks/Tasks/TaskBanner/index.vue
+++ b/src/packages/components/Tasks/Tasks/TaskBanner/index.vue
@@ -45,7 +45,7 @@ const {
 
 
 
-console.log("props.chartConfig",props.chartConfig.request.requestSQLContent.sql);
+console.log("props.chartConfig",props.chartConfig.option.showColumns);
 
 
 
@@ -56,25 +56,37 @@ onMounted(()=>{
   // 组件通信 获取列表中的信息
   EventBus.on(props.chartConfig.id+'dataupdate', (data) => {
 
-      props.chartConfig.request.requestSQLContent.sql = replaceSqlParams(sql,{id:data.id})
-      
+      props.chartConfig.request.requestSQLContent.sql = replaceSqlParams(sql,{Id:data.id})
+
       // 数据callback处理（预览时触发）
       useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any) => {
         // props.chartConfig.option.dataset = resData;
         let data = [];
-        for(let key in resData[0]){
-          let item = {
-            title:key,
-            desc:resData[0][key]
+
+        props.chartConfig.option.showColumns?.forEach((item,index)=>{
+          let info = {
+            title:item.zh_name,
+            desc:resData[0][firstLetterToLowerCase(item.en_name)]
           }
-          data.push(item);
-        }
+          data.push(info);
+
+        })
+       
         props.chartConfig.option.dataset.data = data;
       });
 
   });
 })
 
+function firstLetterToLowerCase(str) {
+  return str.charAt(0).toLowerCase() + str.slice(1);
+}
+
+// 处理展示字段
+const handlerShowColumns = ()=> {
+
+}
+
 
 function replaceSqlParams(sql, params) {
   return sql.replace(/#\{([^}]+)\}/g, (match, p1) => {
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/config.ts b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/config.ts
new file mode 100644
index 0000000..e5062a5
--- /dev/null
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/config.ts
@@ -0,0 +1,91 @@
+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
+import { ZhiGan_SheXiangTouModalConfig } from './index'
+import dataJson from './data.json'
+
+const { source } = dataJson;
+
+export const option = {
+  videoList: [
+    {
+    }
+  ],
+  dataset: source,
+  dataStyle: {
+    // 弹窗关闭按钮
+    closeButtonWidth: 52,
+    closeButtonHeight: 30,
+
+    // 弹窗标题
+    generalTitleFontSize: 24,
+    generalTitleFontColor: '#ffffff',
+    generalTitleFontShadow: '#00CF2C',
+
+    // 弹窗类型按钮
+    typeButtonWidth: 115,
+    typeButtonHeight: 32,
+    typeButtonFontSize: 14,
+    typeButtonFontColor: '#FFFFFF',
+
+    // 主体
+    mainBodyMarginTop: 15,
+    mainLeftMarginLeft1: 10,
+    mainLeftMarginLeft2: 10,
+    mainLeftMarginLeft3: 10,
+
+    // 左侧标题
+    leftTitleIcon1_WidthAndHeight: 36,
+    leftTitle_FontSize: 24,
+    leftTitle_FontColor: '#ffffff',
+    leftTitle_FontShadow: '#00CF2C',
+    leftTitleIcon2_Width: 15,
+    leftTitleIcon2_Height: 12,
+
+    // 左侧查询
+    leftSearchMarginTop: 10,
+    leftSearchMarginLeft: 10,
+
+    // 左侧列表
+    leftListMarginTop: 10,
+    leftListMarginLeft: 10,
+    leftListHeight: 600,
+    leftListAloneHeight: 30,
+    leftListWidth: 300,
+    leftListWidth_Icon: 50,
+    leftListWidth_Title: 250,
+    
+    leftDivVideoListIconWidth: 23,
+    leftDivVideoListIconHeight: 16,
+
+    leftListFontSize: 12,
+    leftListFontColor: '#cfdae6',
+    leftListFontBackgroud: '#242d33',
+
+    // 右侧视频
+    nowType: '1',
+    videoWidth: 956,
+    videoHeight: 688,
+    // 关闭按钮
+    closeVideoIconColor: '#027734',
+    closeVideoIconWidthAndHeight: 34,
+    // 标题
+    videoTitleFontSize: 16,
+    videoTitleFontColor: '#ffffff',
+        
+    videoloop: false,  // 视频-循环播放
+    videomuted: true, // 视频-静音
+    videofit: 'fill', // 视频-适应方式
+
+  },
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = ZhiGan_SheXiangTouModalConfig.key
+  public attr = { ...chartInitConfig, w: 1360, h: 838, zIndex: -1 }
+  // public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from zg_wurenjishishihuamian' }, }
+  public filter = "return res.result;"
+  public chartConfig = cloneDeep(ZhiGan_SheXiangTouModalConfig)
+  public option = cloneDeep(option)
+}
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/config.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/config.vue
new file mode 100644
index 0000000..e2c8d73
--- /dev/null
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/config.vue
@@ -0,0 +1,351 @@
+<template>
+  <CollapseItem name="数据设置" :expanded="true">
+    <SettingItem :alone="false" name="监控画面默认展示">
+      <n-radio-group v-model:value="optionData.dataStyle.nowType" name="radiogroup">
+        <n-radio value="1"> 监控画面X1 </n-radio>
+        <n-radio value="4"> 监控画面X4 </n-radio>
+        <n-radio value="9"> 监控画面X9 </n-radio>
+      </n-radio-group>
+    </SettingItem>
+
+    <SettingItemBox :alone="false" name="视频样式设置">
+      <SettingItem name="视频关闭按钮颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.closeVideoIconColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="视频关闭按钮大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.closeVideoIconWidthAndHeight"
+          :min="0"
+          size="small"
+          placeholder="视频关闭按钮大小"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="视频标题字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.videoTitleFontColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="视频标题字体大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.videoTitleFontSize"
+          :min="0"
+          size="small"
+          placeholder="视频标题字体大小"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox :alone="false" name="视频属性设置">
+      <SettingItem>
+        <n-checkbox v-model:checked="optionData.dataStyle.videoloop" size="small">
+          循环播放
+        </n-checkbox>
+      </SettingItem>
+      <SettingItem>
+        <n-checkbox v-model:checked="optionData.dataStyle.videomuted" size="small">
+          静音
+        </n-checkbox>
+      </SettingItem>
+      <SettingItem name="视频类型">
+        <n-select v-model:value="optionData.dataStyle.videofit" size="small" :options="fitList" />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+
+  <CollapseItem name="整体设置" :expanded="true">
+    <SettingItemBox :alone="false" name="弹窗标题栏设置">
+      <SettingItem name="弹窗标题字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.generalTitleFontColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="弹窗标题阴影颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.generalTitleFontShadow"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="弹窗标题字体大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.generalTitleFontSize"
+          :min="0"
+          size="small"
+          placeholder="弹窗标题字体大小"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem></SettingItem>
+
+      <SettingItem name="弹窗切换按钮字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.typeButtonFontColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="弹窗切换按钮字体大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.typeButtonFontSize"
+          :min="0"
+          size="small"
+          placeholder="弹窗切换按钮字体大小"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="弹窗切换按钮大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.typeButtonWidth"
+          :min="0"
+          size="small"
+          placeholder="弹窗切换按钮大小"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem></SettingItem>
+
+      <SettingItem name="弹窗关闭按钮大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.closeButtonWidth"
+          :min="0"
+          size="small"
+          placeholder="弹窗关闭按钮大小"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox :alone="false" name="展示主体整体设置">
+      <SettingItem name="标题栏与展示主体之间的距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.mainBodyMarginTop"
+          :min="0"
+          size="small"
+          placeholder="标题栏与展示主体之间的距离"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="展示主体左侧间隔距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.mainLeftMarginLeft1"
+          :min="0"
+          size="small"
+          placeholder="展示主体左侧间隔距离"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="展示主体之间的间隔距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.mainLeftMarginLeft2"
+          :min="0"
+          size="small"
+          placeholder="展示主体之间的间隔距离"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="展示主体右侧间隔距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.mainLeftMarginLeft3"
+          :min="0"
+          size="small"
+          placeholder="展示主体右侧间隔距离"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+
+  <CollapseItem name="左侧列表设置" :expanded="true">
+    <SettingItemBox :alone="false" name="左侧列表设置1">
+      <SettingItem name="左侧图案大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.leftTitleIcon1_WidthAndHeight"
+          :min="0"
+          size="small"
+          placeholder="左侧图案大小"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem></SettingItem>
+
+      <SettingItem name="标题字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.leftTitle_FontColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="标题阴影颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.leftTitle_FontShadow"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="标题字体大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.leftTitle_FontSize"
+          :min="0"
+          size="small"
+          placeholder="标题字体大小"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem></SettingItem>
+
+      <SettingItem name="右侧图案大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.leftTitleIcon2_Width"
+          :min="0"
+          size="small"
+          placeholder="右侧图案大小"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem></SettingItem>
+
+      <SettingItem name="查询上边间隔距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.leftSearchMarginTop"
+          :min="0"
+          size="small"
+          placeholder="查询上边间隔距离"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="查询左侧间隔距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.leftSearchMarginLeft"
+          :min="0"
+          size="small"
+          placeholder="查询左侧间隔距离"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox :alone="false" name="左侧列表设置2">
+      <SettingItem name="列表上边间隔距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.leftListMarginTop"
+          :min="0"
+          size="small"
+          placeholder="列表上边间隔距离"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="列表左侧间隔距离">
+        <n-input-number
+          v-model:value="optionData.dataStyle.leftListMarginLeft"
+          :min="0"
+          size="small"
+          placeholder="列表左侧间隔距离"
+        ></n-input-number>
+      </SettingItem>
+
+      <SettingItem name="列表整体高度">
+        <n-input-number
+          v-model:value="optionData.dataStyle.leftListHeight"
+          :min="0"
+          size="small"
+          placeholder="列表整体高度"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="列表个体高度">
+        <n-input-number
+          v-model:value="optionData.dataStyle.leftListAloneHeight"
+          :min="0"
+          size="small"
+          placeholder="列表个体高度"
+        ></n-input-number>
+      </SettingItem>
+
+      <SettingItem name="列表整体宽度">
+        <n-input-number
+          v-model:value="optionData.dataStyle.leftListWidth"
+          :min="0"
+          size="small"
+          placeholder="列表整体宽度"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="列表个体图案宽度">
+        <n-input-number
+          v-model:value="optionData.dataStyle.leftListWidth_Icon"
+          :min="0"
+          size="small"
+          placeholder="列表个体图案宽度"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="列表个体文本宽度">
+        <n-input-number
+          v-model:value="optionData.dataStyle.leftListWidth_Title"
+          :min="0"
+          size="small"
+          placeholder="列表个体文本宽度"
+        ></n-input-number>
+      </SettingItem>
+
+      <SettingItem name="列表个体图案大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.leftDivVideoListIconWidth"
+          :min="0"
+          size="small"
+          placeholder="列表个体文本大小"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="列表个体文本背景颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.leftListFontBackgroud"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="列表个体文本颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.leftListFontColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="列表个体文本大小">
+        <n-input-number
+          v-model:value="optionData.dataStyle.leftListFontSize"
+          :min="0"
+          size="small"
+          placeholder="列表个体文本大小"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+  import { PropType, watch, ref, reactive } from 'vue';
+  import { option } from './config';
+  import { cloneDeep } from 'lodash-es';
+  import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting';
+
+  const props = defineProps({
+    optionData: {
+      type: Object as PropType<typeof option>,
+      required: true,
+    },
+  });
+
+  // 适应类型
+  const fitList = [
+    {
+      value: 'fill',
+      label: 'fill',
+    },
+    {
+      value: 'contain',
+      label: 'contain',
+    },
+    {
+      value: 'cover',
+      label: 'cover',
+    },
+    {
+      value: 'scale-down',
+      label: 'scale-down',
+    },
+    {
+      value: 'none',
+      label: 'none',
+    },
+  ];
+</script>
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/data.json b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/data.json
new file mode 100644
index 0000000..2d53d2a
--- /dev/null
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/data.json
@@ -0,0 +1,108 @@
+{
+  "source": [
+    {
+      "title":"费县马庄镇陈家鱼后村南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县东蒙镇天蒙景区二村东边南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县东蒙镇沂蒙抽水蓄能业营地",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县薛庄镇火山后村南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县冯庄镇陈家鱼后村南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县东蒙镇天蒙景区二村东边南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县冻蒙镇沂蒙抽水蓄能业营地",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县薛庄镇火山后村南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县马庄镇陈家鱼后村南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县东蒙镇天蒙景区二村东边南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县东蒙镇沂蒙抽水蓄能业营地",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县薛庄镇火山后村南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县马庄镇陈家鱼后村南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县东蒙镇天蒙景区二村东边南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县薛庄镇火山后村南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县马庄镇陈家鱼后村南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县东蒙镇天蒙景区二村东边南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县薛庄镇火山后村南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县马庄镇陈家鱼后村南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县东蒙镇天蒙景区二村东边南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县薛庄镇火山后村南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县马庄镇陈家鱼后村南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县东蒙镇天蒙景区二村东边南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县薛庄镇火山后村南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县马庄镇陈家鱼后村南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    },
+    {
+      "title":"费县东蒙镇天蒙景区二村东边南斜坡后村",
+      "videourl": "http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv"
+    }
+  ]
+}
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/index.ts b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/index.ts
new file mode 100644
index 0000000..832f4eb
--- /dev/null
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/index.ts
@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const ZhiGan_SheXiangTouModalConfig: ConfigType = {
+  key: 'ZhiGan_SheXiangTouModal',
+  chartKey: 'VZhiGan_SheXiangTouModal',
+  conKey: 'VCZhiGan_SheXiangTouModal',
+  title: '摄像头监控列表',
+  category: ChatCategoryEnum.ZHIGAN,
+  categoryName: ChatCategoryEnumName.ZHIGAN,
+  package: PackagesCategoryEnum.ZHIGAN,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'ZhiGan_SheXiangTouModal.png'
+}
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/index.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/index.vue
new file mode 100644
index 0000000..161dc87
--- /dev/null
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/index.vue
@@ -0,0 +1,679 @@
+<template>
+  <div class="ZhiGan_SheXiangTouModal">
+    <div class="modalCloseloseButton">
+      <CloseButton :dataStyle="option.dataStyle" @click="option.status.hide = true" />
+    </div>
+    <div class="modalTitleName">
+      <span>摄像头监控列表</span>
+    </div>
+    <div class="modalTitleButton">
+      <TypeButton
+        :typeName="'监控画面X1'"
+        :thisType="'1'"
+        :nowType="option.dataStyle.nowType"
+        :dataStyle="option.dataStyle"
+        @click="option.dataStyle.nowType = '1'"
+      />
+      <TypeButton
+        :typeName="'监控画面X4'"
+        :thisType="'4'"
+        :nowType="option.dataStyle.nowType"
+        :dataStyle="option.dataStyle"
+        @click="option.dataStyle.nowType = '4'"
+      />
+      <TypeButton
+        :typeName="'监控画面X9'"
+        :thisType="'9'"
+        :nowType="option.dataStyle.nowType"
+        :dataStyle="option.dataStyle"
+        @click="option.dataStyle.nowType = '9'"
+      />
+    </div>
+
+    <div class="mainBodyDiv">
+      <div class="leftDiv">
+        <div class="leftDivTitle">
+          <LeftTitleIcon1 :dataStyle="option.dataStyle" />
+          <div class="leftDivTitleSpan">费县林业防火监控列表</div>
+          <div class="leftDivSelect">
+            <LeftTitleIcon2 :dataStyle="option.dataStyle" />
+          </div>
+        </div>
+        <div class="leftDivSearch">
+          <n-input-group>
+            <div class="search-input" :style="{ width: '70%' }">
+              <n-input v-model:value="searchValue" placeholder="请输入搜索关键字" />
+            </div>
+            <n-button type="primary" class="search-button" @click="searchDataList"> 搜索 </n-button>
+          </n-input-group>
+        </div>
+        <div class="leftDivVideoList">
+          <div
+            class="leftDivVideoListItem"
+            v-for="(item, index) in dataList"
+            :key="index"
+            @click="clickListVideo(item)"
+          >
+            <div class="leftDivVideoListIcon">
+              <ListVideoNameIcon :dataStyle="option.dataStyle" />
+            </div>
+            <div class="leftDivVideoListIcontitle">
+              <span>{{ item.title }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="rightDiv">
+        <div
+          class="rightVideoItem"
+          v-for="(videoItem, videoIndex) in option.videoList"
+          :key="videoIndex"
+        >
+          <div class="rightVideoItemTitle" v-if="isEdit || videoItem.title">
+            <span
+              :style="{
+                color: option.dataStyle.videoTitleFontColor,
+                fontSize: option.dataStyle.videoTitleFontSize + 'px',
+              }"
+            >
+              {{ videoItem.title ? videoItem.title : '视频标题' }}
+            </span>
+          </div>
+          <div class="rightVideoItemCloseButton" v-if="isEdit || videoItem.videourl">
+            <CloseVideoIcon :dataStyle="option.dataStyle" @click="closeThisVideo(videoIndex)" />
+          </div>
+
+          <div
+            :class="changeThisNum == videoIndex ? 'rightVideoItemDiv2' : 'rightVideoItemDiv'"
+            @click="changeThisVideo(videoIndex)"
+          >
+            <!-- 无视频url的情况 -->
+            <n-image
+              v-if="isEdit || !videoItem.videourl"
+              :width="videoWidthNoPadding"
+              :height="videoHeightNoPadding"
+              src="/src/assets/images/chart/zhichu/component/SheXiangTouModal_Image.png"
+              preview-disabled
+            />
+            <!-- 其他情况 -->
+            <video
+              v-else
+              :id="
+                'ZhiGan_SheXiangTouModal' +
+                videoItem.title +
+                videoIndex +
+                option.dataStyle.timestamp
+              "
+              class="TCPlayer-video-contaiiner"
+              preload="auto"
+              crossOrigin="anonymous"
+              playsinline
+              autoplay
+              :object-fit="option.dataset.fit"
+              :loop="option.dataStyle.videoloop"
+              :muted="option.dataStyle.videomuted"
+              :style="{
+                width: videoWidthNoPadding + 'px',
+                height: videoHeightNoPadding + 'px',
+              }"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import {
+    PropType,
+    toRefs,
+    watch,
+    reactive,
+    ref,
+    computed,
+    onMounted,
+    onBeforeUnmount,
+  } from 'vue';
+  import { CreateComponentType } from '@/packages/index.d';
+  import { icon } from '@/plugins';
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+  import { useChartDataFetch } from '@/hooks';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { cloneDeep } from 'lodash-es';
+  import dayjs from 'dayjs';
+
+  import CloseButton from './svg/closeButton.vue';
+  import TypeButton from './svg/typeButton.vue';
+  import LeftTitleIcon1 from './svg/leftTitleIcon1.vue';
+  import LeftTitleIcon2 from './svg/leftTitleIcon2.vue';
+  import ListVideoNameIcon from './svg/listVideoNameIcon.vue';
+  import CloseVideoIcon from './svg/closeVideoIcon.vue';
+
+  const { createMessage } = useMessage();
+
+  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,
+    videoList: props.chartConfig.option.videoList,
+    status: props.chartConfig.status,
+  });
+
+  // 搜索
+  const searchValue = ref('');
+  const dataList = ref(option.dataset);
+
+  function searchDataList() {
+    if (searchValue.value.trim()) {
+      dataList.value = option.dataset.filter((item) => {
+        return item.title.includes(searchValue.value);
+      });
+    } else {
+      dataList.value = option.dataset;
+    }
+  }
+
+  // 是否是编辑状态
+  const isEdit = window.location.href.includes('/chart/home/');
+
+  // 视频宽高
+  const videoWidthNoPadding = ref(
+    option.dataStyle.videoWidth - (20 / Math.sqrt(parseInt(option.dataStyle.nowType))) * 2,
+  );
+  const videoHeightNoPadding = ref(
+    option.dataStyle.videoHeight - (20 / Math.sqrt(parseInt(option.dataStyle.nowType))) * 2,
+  );
+
+  watch(
+    () => option.dataStyle.nowType,
+    (newValue, oldValue) => {
+      // 高度
+      option.dataStyle.videoHeight =
+        h.value -
+        option.dataStyle.mainBodyMarginTop -
+        option.dataStyle.leftListMarginTop -
+        (h.value * 125) / 838;
+
+      if (newValue == '1') {
+        option.dataStyle.videoHeight = option.dataStyle.videoHeight;
+      }
+      if (newValue == '4') {
+        option.dataStyle.videoHeight = (option.dataStyle.videoHeight - 10) / 2;
+      }
+      if (newValue == '9') {
+        option.dataStyle.videoHeight = (option.dataStyle.videoHeight - 20) / 3;
+      }
+      videoHeightNoPadding.value =
+        option.dataStyle.videoHeight - (20 / Math.sqrt(parseInt(option.dataStyle.nowType))) * 2;
+
+      // 宽度
+      option.dataStyle.videoWidth =
+        w.value -
+        option.dataStyle.mainLeftMarginLeft1 -
+        ((w.value * 1315) / 1360) * 0.25 -
+        option.dataStyle.mainLeftMarginLeft2 -
+        option.dataStyle.mainLeftMarginLeft3 -
+        (w.value * 45) / 1360;
+
+      if (newValue == '1') {
+        option.dataStyle.videoWidth = option.dataStyle.videoWidth;
+      }
+      if (newValue == '4') {
+        option.dataStyle.videoWidth = (option.dataStyle.videoWidth - 10) / 2;
+      }
+      if (newValue == '9') {
+        option.dataStyle.videoWidth = (option.dataStyle.videoWidth - 20) / 3;
+      }
+      videoWidthNoPadding.value =
+        option.dataStyle.videoWidth - (20 / Math.sqrt(parseInt(option.dataStyle.nowType))) * 2;
+
+      // 监控画面X1
+      if (newValue == '1') {
+        option.dataStyle.proportion = 100;
+        let temp = cloneDeep(option.videoList);
+        option.videoList = [temp[0]];
+
+        closeThisVideo(1);
+        closeThisVideo(2);
+        closeThisVideo(3);
+        if (oldValue == '9') {
+          closeThisVideo(4);
+          closeThisVideo(5);
+          closeThisVideo(6);
+          closeThisVideo(7);
+          closeThisVideo(8);
+        }
+      }
+
+      // 监控画面X4
+      if (newValue == '4') {
+        option.dataStyle.proportion = 49;
+
+        if (oldValue == '1') {
+          let temp = cloneDeep(option.videoList);
+          option.videoList = [temp[0], {}, {}, {}];
+        }
+        if (oldValue == '9') {
+          let temp = cloneDeep(option.videoList);
+          option.videoList = [temp[0], temp[1], temp[2], temp[3]];
+          closeThisVideo(4);
+          closeThisVideo(5);
+          closeThisVideo(6);
+          closeThisVideo(7);
+          closeThisVideo(8);
+        }
+      }
+
+      // 监控画面X9
+      if (newValue == '9') {
+        if (oldValue == '1') {
+          let temp = cloneDeep(option.videoList);
+          option.videoList = [temp[0], {}, {}, {}, {}, {}, {}, {}, {}];
+        }
+        if (oldValue == '4') {
+          let temp = cloneDeep(option.videoList);
+          option.videoList = [temp[0], temp[1], temp[2], temp[3], {}, {}, {}, {}, {}];
+        }
+      }
+    },
+  );
+
+  // 点击标题播放此视频
+  const changeThisFlag = ref(false);
+  const changeThisNum = ref(9);
+
+  // 指定修改视频
+  function changeThisVideo(videoIndex) {
+    if (videoIndex == changeThisNum.value) {
+      changeThisNum.value = 9;
+      changeThisFlag.value = false;
+    } else {
+      changeThisNum.value = videoIndex;
+      changeThisFlag.value = true;
+    }
+  }
+
+  // 修改视频
+  function clickListVideo(item) {
+    // 不显示已有视频
+    if (
+      option.videoList.some((li: any) => li.title == item.title) &&
+      option.videoList.some((li: any) => li.videourl == item.videourl)
+    ) {
+      createMessage.warning('点击的视频【' + item.title + '】已展示!');
+      return;
+    }
+
+    // 指定修改视频
+    if (changeThisFlag.value) {
+      option.videoList[cloneDeep(changeThisNum.value)] = item;
+      playVideo(cloneDeep(changeThisNum.value), item);
+      changeThisNum.value = 9;
+      changeThisFlag.value = false;
+      return;
+    }
+
+    // 先修改为空的
+    let flag = true;
+    let num = 0;
+    option.videoList.forEach((li, index) => {
+      if (!li.videourl && flag) {
+        option.videoList[index] = item;
+        playVideo(index, item);
+        flag = false;
+      }
+    });
+    // 全不为空时，按顺序修改
+    if (flag) {
+      option.videoList[num] = item;
+      playVideo(num, item);
+      num++;
+    }
+    if (num == option.videoList.length) {
+      num = 0;
+    }
+  }
+
+  // 视频控件初始化
+  let players: any = [];
+  // 播放当前视频
+  function playVideo(index, element) {
+    setTimeout(() => {
+      if (players[index]) {
+        players[index].src(element.videourl);
+      } else {
+        players[index] = TCPlayer(
+          'ZhiGan_SheXiangTouModal' + element.title + index + +option.dataStyle.timestamp,
+          {},
+        );
+        players[index].src(element.videourl);
+      }
+    }, 500);
+  }
+  // 关闭当前视频
+  function closeThisVideo(index) {
+    if (index < option.videoList.length) {
+      option.videoList[index] = {};
+    }
+    if (players[index]) {
+      players[index].dispose();
+      players[index] = null;
+    }
+  }
+
+  // 初始化视频控件
+  onMounted(() => {
+    // 用于规避视频id重复
+    if (!option.dataStyle.timestamp) {
+      option.dataStyle.timestamp = dayjs().unix();
+    }
+
+    // 初始化视频控件
+    let player: any = null;
+    players.push(player);
+    players.push(player);
+    players.push(player);
+    players.push(player);
+    players.push(player);
+    players.push(player);
+    players.push(player);
+    players.push(player);
+    players.push(player);
+    // 视频初始化
+    if (
+      !window.location.href.includes('/chart/home/') &&
+      !option.status.hide &&
+      props.chartConfig.option.videoList.length > 0
+    ) {
+      props.chartConfig.option.videoList.forEach((element: any, index) => {
+        if (parseInt(option.dataStyle.nowType) > index) {
+          playVideo(index, element);
+        }
+      });
+    }
+  });
+
+  // 销毁视频控件
+  onBeforeUnmount(() => {
+    if (players) {
+      players.forEach((player) => {
+        if (player) {
+          player.dispose();
+          player = null;
+        }
+      });
+    }
+  });
+
+  // 数据callback处理（预览时触发）
+  useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
+    option.dataset = resData;
+  });
+
+  watch(
+    () => option.dataStyle.closeButtonWidth,
+    () => {
+      option.dataStyle.closeButtonHeight = (option.dataStyle.closeButtonWidth / 52) * 30;
+    },
+  );
+  watch(
+    () => option.dataStyle.typeButtonWidth,
+    () => {
+      option.dataStyle.typeButtonHeight = (option.dataStyle.closeButtonWidth / 115) * 32;
+    },
+  );
+  watch(
+    () => option.dataStyle.leftTitleIcon2_Width,
+    () => {
+      option.dataStyle.leftTitleIcon2_Height = (option.dataStyle.closeButtonWidth / 15) * 12;
+    },
+  );
+  watch(
+    () => option.dataStyle.leftDivVideoListIconWidth,
+    () => {
+      option.dataStyle.leftDivVideoListIconHeight =
+        (option.dataStyle.leftDivVideoListIconWidth / 23) * 16;
+    },
+  );
+</script>
+
+<style lang="scss" scoped>
+  .ZhiGan_SheXiangTouModal {
+    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;
+    background-image: url('@/assets/images/chart/zhigan/component/SheXiangTouModal_Back.png');
+    background-size: 100% 100%;
+
+    position: relative;
+  }
+
+  .modalCloseloseButton {
+    position: absolute;
+    top: 1%;
+    right: 1%;
+  }
+  .modalTitleName {
+    position: absolute;
+    top: v-bind('`${ 3 * h / 838}%`');
+    left: v-bind('`${ 7 * w / 1360}%`');
+
+    span {
+      font-family:
+        PingFangSC,
+        PingFang SC;
+      font-weight: 900;
+      font-size: v-bind('`${ option.dataStyle.generalTitleFontSize }px`');
+      color: v-bind('`${option.dataStyle.generalTitleFontColor}`');
+      text-shadow: 0px 0px 13px v-bind('`${option.dataStyle.generalTitleFontShadow}`');
+      text-align: left;
+      font-style: normal;
+    }
+  }
+  .modalTitleButton {
+    position: absolute;
+    top: v-bind('`${ 3.5 * h / 838}%`');
+    left: v-bind('`${ 27 * w / 1360}%`');
+    display: inline-flex;
+  }
+
+  // 主体
+  .mainBodyDiv {
+    padding-top: v-bind('`${h*75/838}px`');
+    padding-bottom: v-bind('`${h*50/838}px`');
+    height: 1v-bind('`${h-h*125/838}px`');
+
+    padding-left: v-bind('`${w*25/1360}px`');
+    padding-right: v-bind('`${w*20/1360}px`');
+    width: v-bind('`${w*1360/1360}px`');
+
+    display: flex;
+
+    // 左侧
+    .leftDiv {
+      width: v-bind('`${(w*1315/1360) * 0.25}px`');
+      height: v-bind('`${h-h*125/838}px`');
+      margin-top: v-bind('`${option.dataStyle.mainBodyMarginTop}px`');
+      margin-left: v-bind('`${option.dataStyle.mainLeftMarginLeft1}px`');
+
+      // 标题
+      .leftDivTitle {
+        display: inline-flex;
+        height: v-bind('`${option.dataStyle.leftTitleIcon1_WidthAndHeight}px`');
+
+        .leftDivTitleSpan {
+          margin-left: 5px;
+          font-family:
+            PingFangSC,
+            PingFang SC;
+          font-weight: 900;
+          font-size: v-bind('`${ option.dataStyle.leftTitle_FontSize }px`');
+          color: v-bind('`${option.dataStyle.leftTitle_FontColor}`');
+          text-shadow: 0px 0px 13px v-bind('`${option.dataStyle.leftTitle_FontShadow}`');
+          text-align: left;
+          font-style: normal;
+        }
+
+        .leftDivSelect {
+          height: v-bind('`${option.dataStyle.leftTitleIcon1_WidthAndHeight}px`');
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+
+      // 查询
+      .leftDivSearch {
+        margin-top: v-bind('`${option.dataStyle.leftSearchMarginTop}px`');
+        margin-left: v-bind('`${option.dataStyle.leftSearchMarginLeft}px`');
+        width: 100%;
+
+        .search-button {
+          background: linear-gradient(95deg, #00c16b 0%, #008e39 100%), #000000;
+          border-radius: 3px;
+        }
+      }
+
+      // 列表
+      .leftDivVideoList {
+        margin-top: v-bind('`${option.dataStyle.leftListMarginTop}px`');
+        margin-left: v-bind('`${option.dataStyle.leftListMarginLeft}px`');
+        overflow-y: auto;
+        display: inline-block;
+        height: v-bind('`${option.dataStyle.leftListHeight}px`');
+
+        .leftDivVideoListItem {
+          display: inline-flex;
+          width: v-bind('`${option.dataStyle.leftListWidth}px`');
+          height: v-bind('`${option.dataStyle.leftListAloneHeight}px`');
+          background: v-bind('`${option.dataStyle.leftListFontBackgroud}`');
+
+          .leftDivVideoListIcon {
+            width: v-bind('`${option.dataStyle.leftListWidth_Icon}px`');
+            height: v-bind('`${option.dataStyle.leftListAloneHeight}px`');
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #15251c;
+            border-bottom: 2px solid #3baf64;
+          }
+
+          .leftDivVideoListIcontitle {
+            width: v-bind('`${option.dataStyle.leftListWidth_Title}px`');
+            height: v-bind('`${option.dataStyle.leftListAloneHeight}px`');
+
+            span {
+              height: v-bind('`${option.dataStyle.leftListAloneHeight}px`');
+              margin-left: 15px;
+              font-family:
+                PingFangSC,
+                PingFang SC;
+              font-weight: 400;
+              font-size: v-bind('`${option.dataStyle.leftListFontSize}px`');
+              color: v-bind('`${option.dataStyle.leftListFontColor}`');
+              line-height: v-bind('`${option.dataStyle.leftListAloneHeight}px`');
+              text-align: left;
+              justify-content: center;
+              font-style: normal;
+              text-transform: uppercase;
+            }
+          }
+        }
+      }
+
+      .leftDivVideoList::-webkit-scrollbar {
+        display: none;
+      }
+
+      .leftDivVideoList {
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+      }
+    }
+
+    // 右侧
+    .rightDiv {
+      width: v-bind('`${(w*1315/1360) * 0.75}px`');
+      height: v-bind('`${(h-h*125/838) * 0.92}px`');
+      margin-top: v-bind('`${option.dataStyle.mainBodyMarginTop}px`');
+      margin-left: v-bind('`${option.dataStyle.mainLeftMarginLeft2}px`');
+      margin-right: v-bind('`${option.dataStyle.mainLeftMarginLeft3}px`');
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+
+      .rightVideoItem {
+        position: relative;
+        background-image: url('@/assets/images/chart/zhigan/component/SheXiangTouModal_VideoBack.png');
+        background-size: 100% 100%;
+        width: v-bind('`${option.dataStyle.videoWidth}px`');
+        height: v-bind('`${option.dataStyle.videoHeight}px`');
+
+        .rightVideoItemTitle {
+          position: absolute;
+          top: 6%;
+          left: 5%;
+          z-index: 100;
+        }
+        .rightVideoItemCloseButton {
+          position: absolute;
+          top: 6%;
+          right: 5%;
+          z-index: 100;
+        }
+
+        .rightVideoItemDiv {
+          width: 100%;
+          height: 100%;
+          padding: v-bind('`${20 / Math.sqrt(parseInt(option.dataStyle.nowType))}px`');
+        }
+
+        .rightVideoItemDiv2 {
+          width: 100%;
+          height: 100%;
+          padding: v-bind('`${17 / Math.sqrt(parseInt(option.dataStyle.nowType))}px`');
+          border: v-bind('`${3 / Math.sqrt(parseInt(option.dataStyle.nowType))}px`') solid #0fab3f;
+        }
+      }
+    }
+  }
+
+  video {
+    display: block;
+    object-fit: v-bind('option.dataStyle.videofit');
+  }
+
+  ::v-deep .vjs-live-control .vjs-live-display {
+    width: 100px !important;
+  }
+
+  ::v-deep .search-input {
+    background-image: url('./svg/searchInput.svg') !important;
+    background-size: 100% 100% !important;
+    background-repeat: no-repeat !important;
+  }
+
+  ::v-deep .n-input {
+    background: #ffffff00 !important;
+    color: #ffffff !important;
+  }
+
+  ::v-deep .n-input__input-el {
+    color: #ffffff !important;
+  }
+</style>
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/closeButton.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/closeButton.vue
new file mode 100644
index 0000000..099c254
--- /dev/null
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/closeButton.vue
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <svg
+      :width="props.dataStyle.closeButtonWidth"
+      :height="props.dataStyle.closeButtonHeight"
+      viewBox="0 0 52 30"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <defs>
+        <path
+          d="M37.4145826,17.552873 C37.7704392,17.9087377 37.909417,18.4274219 37.7791645,18.9135422 C37.6489119,19.3996625 37.2692174,19.7793656 36.7831083,19.9096212 C36.2969991,20.0398767 35.7783268,19.9008957 35.4224702,19.545031 L32.1949665,16.3156936 L28.9657031,19.545031 C28.4155964,20.0946642 27.5240913,20.0942703 26.9744706,19.544151 C26.4248499,18.9940318 26.4252439,18.1025062 26.9753505,17.552873 L30.204614,14.3252954 L26.9753505,11.0977179 C26.6194939,10.7421675 26.4803484,10.2237738 26.6103287,9.73781074 C26.740309,9.25184764 27.1196681,8.87214447 27.605505,8.74173174 C28.0913419,8.61131902 28.6098465,8.75000954 28.9657031,9.10555992 L32.1949665,12.3348973 L35.4224702,9.10555992 C35.7783268,8.74969517 36.2969991,8.61071416 36.7831083,8.7409697 C37.2692174,8.87122524 37.6489119,9.25092841 37.7791645,9.7370487 C37.909417,10.223169 37.7704392,10.7418532 37.4145826,11.0977179 L34.1853191,14.3252954 L37.4145826,17.552873 Z"
+          id="path-ZhiGan_SheXiangTouModal-closeButton-1"
+        ></path>
+        <filter
+          x="-26.6%"
+          y="-26.6%"
+          width="153.3%"
+          height="153.3%"
+          filterUnits="objectBoundingBox"
+          id="filter-ZhiGan_SheXiangTouModal-closeButton-2"
+        >
+          <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+          <feGaussianBlur
+            stdDeviation="1"
+            in="shadowOffsetOuter1"
+            result="shadowBlurOuter1"
+          ></feGaussianBlur>
+          <feColorMatrix
+            values="0 0 0 0 0   0 0 0 0 0.208047569   0 0 0 0 0.0613686219  0 0 0 1 0"
+            type="matrix"
+            in="shadowBlurOuter1"
+          ></feColorMatrix>
+        </filter>
+      </defs>
+      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g
+          id="林业防火-智感-重复报警弹窗-切图版-"
+          transform="translate(-1596, -175)"
+          fill-rule="nonzero"
+        >
+          <g id="弹窗----" transform="translate(175.2674, 165.0542)">
+            <g id="文字" transform="translate(64.7326, 10.2458)">
+              <g id="编组-62" transform="translate(1356.6879, 0)">
+                <path
+                  d="M0,0 L16.4866044,27.8390432 C17.0497068,28.627131 18.0567376,29.1100832 19.1444648,29.1137009 L47.7125903,29.1137009 C49.4244221,29.1137009 50.812136,27.9385478 50.812136,26.4889231 L50.812136,0 L0,0 Z"
+                  id="形状"
+                  fill="#005516"
+                ></path>
+                <g id="路径">
+                  <use
+                    fill="black"
+                    fill-opacity="1"
+                    filter="url(#filter-ZhiGan_SheXiangTouModal-closeButton-2)"
+                    xlink:href="#path-ZhiGan_SheXiangTouModal-closeButton-1"
+                  ></use>
+                  <use
+                    fill="#FFFFFF"
+                    xlink:href="#path-ZhiGan_SheXiangTouModal-closeButton-1"
+                  ></use>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps(['dataStyle']);
+</script>
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/closeVideoIcon.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/closeVideoIcon.vue
new file mode 100644
index 0000000..a78074e
--- /dev/null
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/closeVideoIcon.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <svg
+      :width="props.dataStyle.closeVideoIconWidthAndHeight"
+      :height="props.dataStyle.closeVideoIconWidthAndHeight"
+      viewBox="0 0 34 34"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <g
+        id="监测平台"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd"
+        opacity="0.713935489"
+      >
+        <g
+          id="林业防火-智感-摄像头更多弹窗2.0"
+          transform="translate(-1535, -255)"
+          :fill="props.dataStyle.closeVideoIconColor"
+          fill-rule="nonzero"
+        >
+          <g id="弹窗" transform="translate(4, 2)">
+            <g id="弹窗----" transform="translate(289, 139)">
+              <g id="文字" transform="translate(18, 8)">
+                <g id="画面4" transform="translate(347, 91)">
+                  <g id="x-circle-fill" transform="translate(877, 15)">
+                    <path
+                      d="M17,-1.16146409e-15 C7.61115925,-1.16146409e-15 1.16146409e-15,7.61115925 1.16146409e-15,17 C1.16146409e-15,26.3888407 7.61115925,34 17,34 C26.3888407,34 34,26.3888407 34,17 C33.9900896,7.61526736 26.3847326,0.00991044452 17,-1.16146409e-15 L17,-1.16146409e-15 Z M23.1559615,21.3055769 C23.4865009,21.6361163 23.6155912,22.1178879 23.4946054,22.5694131 C23.3736196,23.0209383 23.0209383,23.3736196 22.5694131,23.4946054 C22.1178879,23.6155912 21.6361163,23.4865009 21.3055769,23.1559615 L17,18.84875 L12.6944231,23.1559615 C12.3638837,23.4865009 11.8821121,23.6155912 11.4305869,23.4946054 C10.9790617,23.3736196 10.6263804,23.0209383 10.5053946,22.5694131 C10.3844088,22.1178879 10.5134991,21.6361163 10.8440385,21.3055769 L15.15125,17 L10.8440385,12.6944231 C10.3330689,12.1834535 10.3330689,11.3550081 10.8440385,10.8440385 C11.3550081,10.3330689 12.1834535,10.3330689 12.6944231,10.8440385 L17,15.15125 L21.3055769,10.8440385 C21.6361163,10.5134991 22.1178879,10.3844088 22.5694131,10.5053946 C23.0209383,10.6263804 23.3736196,10.9790617 23.4946054,11.4305869 C23.6155912,11.8821121 23.4865009,12.3638837 23.1559615,12.6944231 L18.84875,17 L23.1559615,21.3055769 Z"
+                      id="形状"
+                    ></path>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps(['dataStyle']);
+</script>
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/leftTitleIcon1.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/leftTitleIcon1.vue
new file mode 100644
index 0000000..d225252
--- /dev/null
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/leftTitleIcon1.vue
@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <svg
+      :width="props.dataStyle.leftTitleIcon1_WidthAndHeight"
+      :height="props.dataStyle.leftTitleIcon1_WidthAndHeight"
+      viewBox="0 0 36 36"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <defs>
+        <linearGradient
+          x1="50%"
+          y1="0%"
+          x2="50%"
+          y2="100%"
+          id="linearGradient-ZhiGan_SheXiangTouModal-leftTitleIcon1-1"
+        >
+          <stop stop-color="#3AFE81" offset="0%"></stop>
+          <stop stop-color="#0EDC39" offset="100%"></stop>
+        </linearGradient>
+        <path
+          d="M9.47615827,9.85255326 L4.92627663,9.85255326 C2.21812648,9.85255326 0,7.63679405 0,4.92627663 C0,2.21812648 2.21575922,0 4.92627663,0 C7.63442678,0 9.85255326,2.21575922 9.85255326,4.92627663 L9.85255326,9.47615827 C9.850186,9.68447751 9.68211025,9.85255326 9.47615827,9.85255326 L9.47615827,9.85255326 Z M16.0713561,9.85255326 L11.5214745,9.85255326 C11.3155225,9.85255326 11.1474467,9.68447751 11.1474467,9.47852553 L11.1474467,4.9286439 C11.1474467,2.22049374 13.363206,0.00236726412 16.0737234,0.00236726412 C18.7818735,0.00236726412 21,2.21812648 21,4.9286439 C20.9976327,7.63679405 18.7818735,9.85255326 16.0713561,9.85255326 L16.0713561,9.85255326 Z M4.92627663,21 C2.21812648,21 0,18.7842408 0,16.0737234 C0,13.3655732 2.21575922,11.1474467 4.92627663,11.1474467 L9.47615827,11.1474467 C9.68211025,11.1474467 9.850186,11.3155225 9.850186,11.5214745 L9.850186,16.0713561 C9.850186,18.7842408 7.63442678,21 4.92627663,21 Z M12,11 L19,11 C19.5522847,11 20,11.4477153 20,12 C20,12.5522847 19.5522847,13 19,13 L12,13 C11.4477153,13 11,12.5522847 11,12 C11,11.4477153 11.4477153,11 12,11 Z M12,15 L17,15 C17.5522847,15 18,15.4477153 18,16 C18,16.5522847 17.5522847,17 17,17 L12,17 C11.4477153,17 11,16.5522847 11,16 C11,15.4477153 11.4477153,15 12,15 Z M12,19 L14,19 C14.5522847,19 15,19.4477153 15,20 C15,20.5522847 14.5522847,21 14,21 L12,21 C11.4477153,21 11,20.5522847 11,20 C11,19.4477153 11.4477153,19 12,19 Z"
+          id="path-ZhiGan_SheXiangTouModal-leftTitleIcon1-2"
+        ></path>
+        <filter
+          x="-64.3%"
+          y="-64.3%"
+          width="228.6%"
+          height="228.6%"
+          filterUnits="objectBoundingBox"
+          id="filter-ZhiGan_SheXiangTouModal-leftTitleIcon1-3"
+        >
+          <feMorphology
+            radius="0.5"
+            operator="dilate"
+            in="SourceAlpha"
+            result="shadowSpreadOuter1"
+          ></feMorphology>
+          <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+          <feGaussianBlur
+            stdDeviation="4"
+            in="shadowOffsetOuter1"
+            result="shadowBlurOuter1"
+          ></feGaussianBlur>
+          <feColorMatrix
+            values="0 0 0 0 0.0980392157   0 0 0 0 0.564705882   0 0 0 0 0.274509804  0 0 0 0.414177848 0"
+            type="matrix"
+            in="shadowBlurOuter1"
+          ></feColorMatrix>
+        </filter>
+      </defs>
+      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g
+          id="林业防火-智感-摄像头更多弹窗2.0"
+          transform="translate(-311, -233)"
+          fill-rule="nonzero"
+        >
+          <g id="弹窗" transform="translate(4, 2)">
+            <g id="弹窗----" transform="translate(289, 139)">
+              <g id="文字" transform="translate(18, 8)">
+                <g id="小标题" transform="translate(0, 12)">
+                  <g id="编组-18" transform="translate(0, 72)">
+                    <g id="形状" transform="translate(7, 7)">
+                      <use
+                        fill="black"
+                        fill-opacity="1"
+                        filter="url(#filter-ZhiGan_SheXiangTouModal-leftTitleIcon1-3)"
+                        xlink:href="#path-ZhiGan_SheXiangTouModal-leftTitleIcon1-2"
+                      ></use>
+                      <use
+                        fill="url(#linearGradient-ZhiGan_SheXiangTouModal-leftTitleIcon1-1)"
+                        xlink:href="#path-ZhiGan_SheXiangTouModal-leftTitleIcon1-2"
+                      ></use>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps(['dataStyle']);
+</script>
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/leftTitleIcon2.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/leftTitleIcon2.vue
new file mode 100644
index 0000000..2f4cb8a
--- /dev/null
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/leftTitleIcon2.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <svg
+      :width="props.dataStyle.leftTitleIcon2_Width"
+      :height="props.dataStyle.leftTitleIcon2_Height"
+      viewBox="0 0 15 12"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="林业防火-智感-摄像头更多弹窗2.0" transform="translate(-623, -244)" fill="#57FF94">
+          <g id="弹窗" transform="translate(4, 2)">
+            <g id="弹窗----" transform="translate(289, 139)">
+              <g id="文字" transform="translate(18, 8)">
+                <g id="小标题" transform="translate(0, 12)">
+                  <g id="编组-18" transform="translate(0, 72)">
+                    <g
+                      id="小图标"
+                      transform="translate(319.3972, 17) rotate(90) translate(-319.3972, -17)translate(314, 10)"
+                    >
+                      <polygon
+                        id="Fill-1"
+                        transform="translate(3.3801, 7) scale(-1, 1) rotate(90) translate(-3.3801, -7)"
+                        points="6.76849945 3.61994109 3.40277312 6.88441736 0.00771109727 3.61994109 -3.61994109 3.61994109 3.41031659 10.3800589 10.3800589 3.61994109"
+                      ></polygon>
+                      <polygon
+                        id="Fill-1"
+                        opacity="0.596255"
+                        transform="translate(8.3801, 7.0343) scale(-1, 1) rotate(90) translate(-8.3801, -7.0343)"
+                        points="10.8003736 4.61994109 8.39628335 6.95170985 5.97123904 4.61994109 3.38005891 4.61994109 8.40167154 9.44859668 13.3800589 4.61994109"
+                      ></polygon>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps(['dataStyle']);
+</script>
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/listVideoNameIcon.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/listVideoNameIcon.vue
new file mode 100644
index 0000000..edd073b
--- /dev/null
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/listVideoNameIcon.vue
@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <svg
+      :width="props.dataStyle.leftDivVideoListIconWidth"
+      :height="props.dataStyle.leftDivVideoListIconHeight"
+      viewBox="0 0 23 16"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <defs>
+        <linearGradient
+          x1="50%"
+          y1="25.2526583%"
+          x2="50%"
+          y2="190.400407%"
+          id="linearGradient-ZhiGan_SheXiangTouModal-listVideoNameIcon-1"
+        >
+          <stop stop-color="#12231A" offset="0%"></stop>
+          <stop stop-color="#1C3A28" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient
+          x1="50%"
+          y1="0%"
+          x2="50%"
+          y2="100%"
+          id="linearGradient-ZhiGan_SheXiangTouModal-listVideoNameIcon-2"
+        >
+          <stop stop-color="#20F06B" offset="0%"></stop>
+          <stop stop-color="#A1FFB4" offset="100%"></stop>
+        </linearGradient>
+        <path
+          d="M14.5143707,0.87907023 L14.6051872,0.890899123 C14.8376599,0.940919496 15.0000432,1.1157079 14.9999221,1.31578947 L14.9999221,6.56140351 C15.0031317,6.72033362 14.9069467,6.86922182 14.745976,6.95449561 C14.5713156,7.04253713 14.3513175,7.03847731 14.1815051,6.94407895 L11.9591476,5.70942982 C11.885933,5.66872306 11.8419858,5.60020957 11.8420429,5.52686404 L11.8420429,2.36787281 C11.8419858,2.29452727 11.885933,2.22601378 11.9591476,2.18530702 L14.1690052,0.957785088 C14.29627,0.884613368 14.4550024,0.860272694 14.6051872,0.890899123 Z M0,0.877192982 C0,0.392732676 0.471276886,0 1.05262639,0 L10.5262639,0 C11.1076134,0 11.5788903,0.392732676 11.5788903,0.877192982 L10.7894166,1.70983861 L10.7894166,5.9798161 C10.7894166,6.21042227 11.0525745,6.55633152 11.5788903,7.01754386 C11.5788903,7.50200417 11.1076134,7.89473684 10.5262639,7.89473684 L1.05262639,7.89473684 C0.471276886,7.89473684 0,7.50200417 0,7.01754386 L0,2.36842105 L2.36842105,2.36842105 L2.36842105,1.57894737 L0,1.57894737 L0,0.877192982 Z"
+          id="path-ZhiGan_SheXiangTouModal-listVideoNameIcon-3"
+        ></path>
+        <filter
+          x="-46.7%"
+          y="-63.3%"
+          width="193.3%"
+          height="277.3%"
+          filterUnits="objectBoundingBox"
+          id="filter-ZhiGan_SheXiangTouModal-listVideoNameIcon-4"
+        >
+          <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+          <feGaussianBlur
+            stdDeviation="2"
+            in="shadowOffsetOuter1"
+            result="shadowBlurOuter1"
+          ></feGaussianBlur>
+          <feColorMatrix
+            values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0"
+            type="matrix"
+            in="shadowBlurOuter1"
+          ></feColorMatrix>
+        </filter>
+      </defs>
+      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="林业防火-智感-摄像头更多弹窗2.0" transform="translate(-337, -324)">
+          <g id="弹窗" transform="translate(4, 2)">
+            <g id="弹窗----" transform="translate(289, 139)">
+              <g id="list" transform="translate(25, 176)">
+                <rect
+                  id="矩形"
+                  fill="url(#linearGradient-ZhiGan_SheXiangTouModal-listVideoNameIcon-1)"
+                  opacity="0.699999988"
+                  x="0"
+                  y="0"
+                  width="60"
+                  height="30"
+                ></rect>
+                <g id="video-camera-fill" transform="translate(23, 11)" fill-rule="nonzero">
+                  <g id="形状结合">
+                    <use
+                      fill="black"
+                      fill-opacity="1"
+                      filter="url(#filter-ZhiGan_SheXiangTouModal-listVideoNameIcon-4)"
+                      xlink:href="#path-ZhiGan_SheXiangTouModal-listVideoNameIcon-3"
+                    ></use>
+                    <use
+                      fill="url(#linearGradient-ZhiGan_SheXiangTouModal-listVideoNameIcon-2)"
+                      xlink:href="#path-ZhiGan_SheXiangTouModal-listVideoNameIcon-3"
+                    ></use>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps(['dataStyle']);
+</script>
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/searchInput.svg b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/searchInput.svg
new file mode 100644
index 0000000..7ba0091
--- /dev/null
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/searchInput.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="303px" height="37px" viewBox="0 0 303 37" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 33</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="125.568224%" id="linearGradient-1">
+            <stop stop-color="#00AF4A" offset="0%"></stop>
+            <stop stop-color="#00751E" stop-opacity="0.206314727" offset="100%"></stop>
+        </linearGradient>
+        <polygon id="path-2"
+            points="-7.8938096e-15 -3.28814141e-13 11 -3.28814141e-13 13.1616243 1.88067666 2.1616243 1.88067666">
+        </polygon>
+        <filter x="-115.3%" y="-717.8%" width="330.6%" height="1535.7%" filterUnits="objectBoundingBox" id="filter-3">
+            <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.462494493   0 0 0 0 0  0 0 0 0.7 0" type="matrix"
+                in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <polygon id="path-4"
+            points="15.6938967 4.78840697e-14 26.6938967 4.78840697e-14 28.855521 1.88067666 17.855521 1.88067666">
+        </polygon>
+        <filter x="-115.3%" y="-717.8%" width="330.6%" height="1535.7%" filterUnits="objectBoundingBox" id="filter-5">
+            <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.462494493   0 0 0 0 0  0 0 0 0.7 0" type="matrix"
+                in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="50.3209681%" y1="99.6790319%" x2="50.3209681%" y2="0.320968094%" id="linearGradient-6">
+            <stop stop-color="#25673D" stop-opacity="0.8" offset="0.00819493007%"></stop>
+            <stop stop-color="#3E674A" offset="38.6691434%"></stop>
+            <stop stop-color="#8BE8A3" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="林业防火-智库-切图版" transform="translate(-67, -112)">
+            <g id="可视化" transform="translate(-0.5, -1)">
+                <g id="模块" transform="translate(45.5, 85.9394)">
+                    <g id="标题模块--左侧1" transform="translate(0, 7.0606)">
+                        <g id="搜索框" transform="translate(22, 20)">
+                            <g id="编组-33" transform="translate(1.8157, 0)">
+                                <path
+                                    d="M0.623319965,34.544374 L57.6046543,34.544374 L297.62332,34.544374 C299.280174,34.544374 300.62332,33.2012283 300.62332,31.544374 L300.62332,3.54437402 C300.62332,1.88751977 299.280174,0.544374024 297.62332,0.544374024 C269.469545,0.544374024 241.315769,0.544374024 213.161994,0.544374024 C210.776592,0.544374024 209.573632,0.544374024 205.98527,0.544374024 C148.557416,0.544374024 148.557416,0.544374024 91.1295612,0.544374024 C87.7697753,0.544374024 86.535175,0.544374024 84.401344,0.544374024 C84.2696878,0.544374024 84.1346083,0.544374024 83.9953953,0.544374024 C57.2047035,0.544374024 30.4140118,0.544374024 3.62331996,0.544374024 C1.96646572,0.544374024 0.623319965,1.88751977 0.623319965,3.54437402 L0.623319965,34.544374 L0.623319965,34.544374 Z"
+                                    id="路径-22" stroke="url(#linearGradient-1)" fill-opacity="0.85" fill="#07261E">
+                                </path>
+                                <g id="黄色棱形"
+                                    transform="translate(24.184, 33.9078) scale(1, -1) translate(-24.184, -33.9078)translate(9.7562, 32.9674)">
+                                    <g id="矩形">
+                                        <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2">
+                                        </use>
+                                        <use fill="#FFE4AC" fill-rule="evenodd" xlink:href="#path-2"></use>
+                                    </g>
+                                    <g id="矩形" opacity="0.399999976">
+                                        <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4">
+                                        </use>
+                                        <use fill="#FFE4AC" fill-rule="evenodd" xlink:href="#path-4"></use>
+                                    </g>
+                                </g>
+                                <g id="编组" transform="translate(23.1843, 0)" fill="#84DC9B">
+                                    <polygon id="矩形"
+                                        points="-4.79807623e-15 -2.54310124e-13 6.68610484 -2.54310124e-13 8 1.45454545 1.31389516 1.45454545">
+                                    </polygon>
+                                </g>
+                                <polygon id="路径-21" fill="url(#linearGradient-6)"
+                                    points="0 20.2414285 -1.0089794e-14 8.32362407 8.3324047 0.0542404987 21.055195 0.0542404987 22.9166667 1.54857666 9.25048523 1.54857666 1.50572453 9.23476082 1.50572453 22.0542405">
+                                </polygon>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/typeButton.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/typeButton.vue
new file mode 100644
index 0000000..c7e97be
--- /dev/null
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/svg/typeButton.vue
@@ -0,0 +1,286 @@
+<template>
+  <div>
+    <!-- 绿色 -->
+    <svg
+      v-if="props.thisType != props.nowType"
+      :width="props.dataStyle.typeButtonWidth"
+      :height="props.dataStyle.typeButtonHeight"
+      viewBox="0 0 115 32"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <defs>
+        <linearGradient
+          x1="50%"
+          y1="-98.3856176%"
+          x2="50%"
+          y2="80.0197161%"
+          id="linearGradient-ZhiGan_SheXiangTouModal-typeButton-green-1"
+        >
+          <stop stop-color="#09A63D" offset="0%"></stop>
+          <stop stop-color="#05441B" offset="100%"></stop>
+        </linearGradient>
+        <radialGradient
+          cx="102.018952%"
+          cy="111.362974%"
+          fx="102.018952%"
+          fy="111.362974%"
+          r="78.3480262%"
+          gradientTransform="translate(1.0202, 1.1136), scale(0.2788, 1), rotate(90), scale(1, 5.5632), translate(-1.0202, -1.1136)"
+          id="radialGradient-ZhiGan_SheXiangTouModal-typeButton-green-2"
+        >
+          <stop stop-color="#1BF157" offset="0%"></stop>
+          <stop stop-color="#09AF40" stop-opacity="0.298780641" offset="100%"></stop>
+        </radialGradient>
+        <path
+          d="M16.1393711,0 L90.4347826,0 L90.4347826,0 L114.782609,32 L24.3478261,32 L9.77274159,12.8441747 L16.1393711,0 Z"
+          id="path-ZhiGan_SheXiangTouModal-typeButton-green-3"
+        ></path>
+        <linearGradient
+          x1="50%"
+          y1="91.9466397%"
+          x2="50%"
+          y2="11.2470176%"
+          id="linearGradient-ZhiGan_SheXiangTouModal-typeButton-green-5"
+        >
+          <stop stop-color="#16FFA1" offset="0%"></stop>
+          <stop stop-color="#02B56D" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient
+          x1="50%"
+          y1="91.9466397%"
+          x2="50%"
+          y2="10.5142024%"
+          id="linearGradient-ZhiGan_SheXiangTouModal-typeButton-green-6"
+        >
+          <stop stop-color="#4786B3" stop-opacity="0.2" offset="0%"></stop>
+          <stop stop-color="#A6E9FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient
+          x1="0.00956075175%"
+          y1="50.0095608%"
+          x2="99.9904392%"
+          y2="50.0095608%"
+          id="linearGradient-ZhiGan_SheXiangTouModal-typeButton-green-7"
+        >
+          <stop stop-color="#07772C" offset="0.0191215035%"></stop>
+          <stop stop-color="#58FF95" offset="100%"></stop>
+        </linearGradient>
+      </defs>
+      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="林业防火-智感-摄像头更多弹窗2.0" transform="translate(-645, -167)">
+          <g id="弹窗" transform="translate(4, 2)">
+            <g id="弹窗----" transform="translate(289, 139)">
+              <g id="文字" transform="translate(18, 8)">
+                <g
+                  id="编组-35"
+                  transform="translate(391.3913, 34) scale(-1, 1) translate(-391.3913, -34)translate(334, 18)"
+                >
+                  <mask id="mask-ZhiGan_SheXiangTouModal-typeButton-green-4" fill="white">
+                    <use xlink:href="#path-ZhiGan_SheXiangTouModal-typeButton-green-3"></use>
+                  </mask>
+                  <g id="矩形">
+                    <use
+                      fill="url(#linearGradient-ZhiGan_SheXiangTouModal-typeButton-green-1)"
+                      xlink:href="#path-ZhiGan_SheXiangTouModal-typeButton-green-3"
+                    ></use>
+                    <use
+                      fill="url(#radialGradient-ZhiGan_SheXiangTouModal-typeButton-green-2)"
+                      xlink:href="#path-ZhiGan_SheXiangTouModal-typeButton-green-3"
+                    ></use>
+                  </g>
+                  <polyline
+                    id="路径-2"
+                    stroke="url(#linearGradient-ZhiGan_SheXiangTouModal-typeButton-green-5)"
+                    stroke-width="20"
+                    opacity="0.34375"
+                    mask="url(#mask-ZhiGan_SheXiangTouModal-typeButton-green-4)"
+                    points="3.94055873 -4.39015104 85.1635013 -4.39015104 113.982609 33.7391304"
+                  ></polyline>
+                  <line
+                    x1="-1.39130435"
+                    y1="-2.7826087"
+                    x2="28.4019451"
+                    y2="36.173913"
+                    id="路径-2"
+                    stroke="url(#linearGradient-ZhiGan_SheXiangTouModal-typeButton-green-6)"
+                    stroke-width="2"
+                    opacity="0.34375"
+                    mask="url(#mask-ZhiGan_SheXiangTouModal-typeButton-green-4)"
+                  ></line>
+                  <rect
+                    id="矩形"
+                    fill="url(#linearGradient-ZhiGan_SheXiangTouModal-typeButton-green-7)"
+                    mask="url(#mask-ZhiGan_SheXiangTouModal-typeButton-green-4)"
+                    x="24.3478261"
+                    y="30.6086957"
+                    width="90.4347826"
+                    height="1.39130435"
+                  ></rect>
+                  <path
+                    d="M9.87240329,0 L11.9208233,0 L11.9208233,0 L7.04648815,9.6 L5.84167779,7.95858953 L9.87240329,0 Z"
+                    id="路径-4"
+                    fill="#EBBE10"
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+      <text
+        x="50%"
+        y="65%"
+        text-anchor="middle"
+        :font-size="props.dataStyle.typeButtonFontSize"
+        :fill="props.dataStyle.typeButtonFontColor"
+      >
+        {{ props.typeName }}
+      </text>
+    </svg>
+    <!-- 黄色 -->
+    <svg
+      v-if="props.thisType == props.nowType"
+      :width="props.dataStyle.typeButtonWidth"
+      :height="props.dataStyle.typeButtonHeight"
+      viewBox="0 0 115 32"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <defs>
+        <linearGradient
+          x1="50%"
+          y1="-98.3856176%"
+          x2="50%"
+          y2="80.0197161%"
+          id="linearGradient-ZhiGan_SheXiangTouModal-typeButton-yellow-1"
+        >
+          <stop stop-color="#E35D0D" offset="0%"></stop>
+          <stop stop-color="#441405" offset="100%"></stop>
+        </linearGradient>
+        <radialGradient
+          cx="102.018952%"
+          cy="111.362974%"
+          fx="102.018952%"
+          fy="111.362974%"
+          r="78.3480262%"
+          gradientTransform="translate(1.0202, 1.1136), scale(0.2788, 1), rotate(90), scale(1, 5.5632), translate(-1.0202, -1.1136)"
+          id="radialGradient-ZhiGan_SheXiangTouModal-typeButton-yellow-2"
+        >
+          <stop stop-color="#F19E1B" offset="0%"></stop>
+          <stop stop-color="#AF5E09" stop-opacity="0.298780641" offset="100%"></stop>
+        </radialGradient>
+        <path
+          d="M16.1393711,0 L90.4347826,0 L90.4347826,0 L114.782609,32 L24.3478261,32 L9.77274159,12.8441747 L16.1393711,0 Z"
+          id="path-ZhiGan_SheXiangTouModal-typeButton-yellow-3"
+        ></path>
+        <linearGradient
+          x1="50%"
+          y1="91.9466397%"
+          x2="50%"
+          y2="11.2470176%"
+          id="linearGradient-ZhiGan_SheXiangTouModal-typeButton-yellow-5"
+        >
+          <stop stop-color="#FF7F16" offset="0%"></stop>
+          <stop stop-color="#B54602" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient
+          x1="50%"
+          y1="91.9466397%"
+          x2="50%"
+          y2="10.5142024%"
+          id="linearGradient-ZhiGan_SheXiangTouModal-typeButton-yellow-6"
+        >
+          <stop stop-color="#B36347" stop-opacity="0.2" offset="0%"></stop>
+          <stop stop-color="#FF6903" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient
+          x1="0.00956075175%"
+          y1="50.0095608%"
+          x2="99.9904392%"
+          y2="50.0095608%"
+          id="linearGradient-ZhiGan_SheXiangTouModal-typeButton-yellow-7"
+        >
+          <stop stop-color="#C45F06" offset="0.0191215035%"></stop>
+          <stop stop-color="#FFE858" offset="100%"></stop>
+        </linearGradient>
+      </defs>
+      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="林业防火-智感-摄像头更多弹窗2.0" transform="translate(-752, -167)">
+          <g id="弹窗" transform="translate(4, 2)">
+            <g id="弹窗----" transform="translate(289, 139)">
+              <g id="文字" transform="translate(18, 8)">
+                <g
+                  id="编组-44"
+                  transform="translate(498.3913, 34) scale(-1, 1) translate(-498.3913, -34)translate(441, 18)"
+                >
+                  <mask id="mask-ZhiGan_SheXiangTouModal-typeButton-yellow-4" fill="white">
+                    <use xlink:href="#path-ZhiGan_SheXiangTouModal-typeButton-yellow-3"></use>
+                  </mask>
+                  <g id="矩形">
+                    <use
+                      fill="url(#linearGradient-ZhiGan_SheXiangTouModal-typeButton-yellow-1)"
+                      xlink:href="#path-ZhiGan_SheXiangTouModal-typeButton-yellow-3"
+                    ></use>
+                    <use
+                      fill="url(#radialGradient-ZhiGan_SheXiangTouModal-typeButton-yellow-2)"
+                      xlink:href="#path-ZhiGan_SheXiangTouModal-typeButton-yellow-3"
+                    ></use>
+                  </g>
+                  <polyline
+                    id="路径-2"
+                    stroke="url(#linearGradient-ZhiGan_SheXiangTouModal-typeButton-yellow-5)"
+                    stroke-width="20"
+                    opacity="0.34375"
+                    mask="url(#mask-ZhiGan_SheXiangTouModal-typeButton-yellow-4)"
+                    points="3.94055873 -4.39015104 85.1635013 -4.39015104 113.982609 33.7391304"
+                  ></polyline>
+                  <line
+                    x1="-1.39130435"
+                    y1="-2.7826087"
+                    x2="28.4019451"
+                    y2="36.173913"
+                    id="路径-2"
+                    stroke="url(#linearGradient-ZhiGan_SheXiangTouModal-typeButton-yellow-6)"
+                    stroke-width="2"
+                    opacity="0.34375"
+                    mask="url(#mask-ZhiGan_SheXiangTouModal-typeButton-yellow-4)"
+                  ></line>
+                  <rect
+                    id="矩形"
+                    fill="url(#linearGradient-ZhiGan_SheXiangTouModal-typeButton-yellow-7)"
+                    mask="url(#mask-ZhiGan_SheXiangTouModal-typeButton-yellow-4)"
+                    x="24.3478261"
+                    y="30.6086957"
+                    width="90.4347826"
+                    height="1.39130435"
+                  ></rect>
+                  <path
+                    d="M9.87240329,0 L11.9208233,0 L11.9208233,0 L7.04648815,9.6 L5.84167779,7.95858953 L9.87240329,0 Z"
+                    id="路径-4"
+                    fill="#EBBE10"
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+      <text
+        x="50%"
+        y="65%"
+        text-anchor="middle"
+        :font-size="props.dataStyle.typeButtonFontSize"
+        :fill="props.dataStyle.typeButtonFontColor"
+      >
+        {{ props.typeName }}
+      </text>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps(['typeName', 'thisType', 'nowType', 'dataStyle']);
+</script>
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_XianSuoShangBaoFenLei/index.ts b/src/packages/components/Zhigan/Zhigan/ZhiGan_XianSuoShangBaoFenLei/index.ts
index a32ef1e..6514962 100644
--- a/src/packages/components/Zhigan/Zhigan/ZhiGan_XianSuoShangBaoFenLei/index.ts
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_XianSuoShangBaoFenLei/index.ts
@@ -9,6 +9,6 @@ export const ZhiGan_XianSuoShangBaoFenLeiConfig: ConfigType = {
   category: ChatCategoryEnum.ZHIGAN,
   categoryName: ChatCategoryEnumName.ZHIGAN,
   package: PackagesCategoryEnum.ZHIGAN,
-  chartFrame: ChartFrameEnum.ECHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'ZhiGan_XianSuoShangBaoFenLei.png'
 }
diff --git a/src/packages/components/Zhigan/Zhigan/index.ts b/src/packages/components/Zhigan/Zhigan/index.ts
index 85d7289..ddb2f0e 100644
--- a/src/packages/components/Zhigan/Zhigan/index.ts
+++ b/src/packages/components/Zhigan/Zhigan/index.ts
@@ -21,6 +21,8 @@ import { ZhiGan_ModalTimeLineConfig } from "./ZhiGan_ModalTimeLine/index";
 import { ZhiGan_ModalButtonConfig } from "./ZhiGan_ModalButton/index";
 
 import { ZhiGan_SheXiangTouLeiXingConfig } from "./ZhiGan_SheXiangTouLeiXing/index";
+import { ZhiGan_SheXiangTouModalConfig } from "./ZhiGan_SheXiangTouModal/index";
+
 
 import { ZhiGan_YongHuShuConfig } from "./ZhiGan_YongHuShu/index";
 import { ZhiGan_XianSuoShangBaoFenLeiConfig } from "./ZhiGan_XianSuoShangBaoFenLei/index";
@@ -53,6 +55,7 @@ export default [
     ZhiGan_ModalButtonConfig, 
 
     ZhiGan_SheXiangTouLeiXingConfig, 
+    ZhiGan_SheXiangTouModalConfig,
     ZhiGan_YongHuShuConfig,
     ZhiGan_XianSuoShangBaoFenLeiConfig,
 ];
diff --git a/src/packages/components/Zhiku/Zhiku/HuoQingDetailPie/index.ts b/src/packages/components/Zhiku/Zhiku/HuoQingDetailPie/index.ts
index cab5b80..a0df45a 100644
--- a/src/packages/components/Zhiku/Zhiku/HuoQingDetailPie/index.ts
+++ b/src/packages/components/Zhiku/Zhiku/HuoQingDetailPie/index.ts
@@ -9,6 +9,6 @@ export const HuoQingDetailPieConfig: ConfigType = {
   category: ChatCategoryEnum.ZHIKU,
   categoryName: ChatCategoryEnumName.ZHIKU,
   package: PackagesCategoryEnum.ZHIKU,
-  chartFrame: ChartFrameEnum.ECHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'HuoQingDetailPie.png'
 }