Merge branch 'ft' into 'main_dev'

feat(src/packages): 重写信息里的视频组件，支持自定义上传等

See merge request yunteng/thingskit-view!78

@@ -14,7 +14,7 @@ export const enum areaEnum {
 export const includes = []
 
 export const option = {
-  drillingIn:false,
+  drillingIn: false,
   dataset: dataJson,
   mapRegion: {
     adcode: 'china',
@@ -152,7 +152,7 @@ export const option = {
         shadowOffsetY: 2,
         shadowBlur: 10
       }
-    }
+    },
   ]
 }
 export const MapDefaultConfig = { ...option }

@@ -27,6 +27,8 @@ import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
 import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } from 'echarts/components'
 import cityMap from './mapGeojson/china-main-city-map.json'
 
+type historyDataType = { name: string; code: string }
+
 const props = defineProps({
   themeSetting: {
     type: Object,
@@ -57,6 +59,12 @@ use([
 
 const saveSelectValue = ref('')
 
+const iconStr = ref(
+  'path://M853.333333 245.333333H245.333333l93.866667-93.866666c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333L256 311.466667h597.333333c6.4 0 10.666667 4.266667 10.666667 10.666666v426.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V320c0-40.533333-34.133333-74.666667-74.666667-74.666667z'
+)
+
+const historyData = ref<historyDataType[]>([])
+
 const option = reactive({
   value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
@@ -68,7 +76,7 @@ const toolBoxOption = {
     myFullButton: {
       show: true,
       title: '返回',
-      icon: 'path://M853.333333 245.333333H245.333333l93.866667-93.866666c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333L256 311.466667h597.333333c6.4 0 10.666667 4.266667 10.666667 10.666666v426.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V320c0-40.533333-34.133333-74.666667-74.666667-74.666667z',
+      icon: iconStr.value,
       onclick: () => watchAdcode()
     }
   }
@@ -79,10 +87,12 @@ props.chartConfig.option = {
   ...{ toolbox: toolBoxOption }
 }
 
+//地图点击返回
 const watchAdcode = () => {
   if (props.chartConfig.option.drillingIn) {
-    const findCity = (cityMap as any)[saveSelectValue.value]
-    props.chartConfig.option.mapRegion.adcode = 'china'
+    const code = historyData.value.at(-2)?.code
+    props.chartConfig.option.mapRegion.adcode = code ? code : 'china'
+    historyData.value.pop()
   }
 }
 
@@ -90,12 +100,16 @@ const vChartRef = ref<typeof VChart>()
 
 //动态获取json注册地图
 const getGeojson = (regionId: string) => {
-  return new Promise<boolean>(resolve => {
-    import(`./mapGeojson/${regionId}.json`).then(data => {
-      registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} })
-      resolve(true)
+  try {
+    return new Promise<boolean>(resolve => {
+      import(`./mapGeojson/${regionId}.json`).then(data => {
+        registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} })
+        resolve(true)
+      })
     })
-  })
+  } finally {
+    console.log
+  }
 }
 
 //异步时先注册空的 保证初始化不报错
@@ -199,7 +213,12 @@ const handleVChartClick = async (params: any) => {
     const { name } = params
     saveSelectValue.value = name
     const findAdcode = (cityMap as any)[name]
+    if (!findAdcode) return
     props.chartConfig.option.mapRegion.adcode = findAdcode
+    historyData.value.push({
+      name,
+      code: findAdcode
+    })
   }
 }
 </script>

 <template>
   <div class="videoPlay">
-    <video crossOrigin="anonymous" ref="videoRef" class="video-js vjs-default-skin vjs-big-play-centered" controls>
+    <video
+      style="object-fit: cover"
+      :poster="poster"
+      crossOrigin="anonymous"
+      ref="videoRef"
+      class="video-js vjs-default-skin vjs-big-play-centered"
+      controls
+    >
       <source :src="path" />
     </video>
   </div>
 </template>
 <script lang="ts" setup>
-import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref, watch, toRefs } from 'vue'
 import videojs, { VideoJsPlayer } from 'video.js'
 import type { VideoJsPlayerOptions } from 'video.js'
 import 'video.js/dist/video-js.css'
@@ -17,6 +24,7 @@ const props = withDefaults(
     path: string
     autoPlay?: boolean
     h?: number
+    poster?: string
   }>(),
   { autoPlay: false }
 )
@@ -33,19 +41,22 @@ const initPlay = async () => {
     controls: true,
     autoplay: props.autoPlay,
     src: props?.path,
+    poster: props?.poster,
     language: 'zh-CN',
-    techOrder: ['html5']
+    techOrder: ['html5'],
+    preload: 'none'
   }
   player = videojs(videoRef.value, options, () => {
-    videojs.log('播放器已经准备好了!')
+    videojs.log('Video is reading')
     if (props.autoPlay) {
       player.play()
     }
     player.on('ended', () => {
-      videojs.log('播放结束了!')
+      videojs.log('Play end')
     })
     player.on('error', () => {
-      videojs.log('播放器解析出错!')
+      player.errorDisplay.close()
+      videojs.log('Play parse error')
     })
   })
 }
@@ -58,10 +69,10 @@ onMounted(() => {
 watch(
   () => props.path,
   () => {
-    player?.pause()
-    player?.src(props.path)
-    player?.load()
-    if (props.path) {
+    if (props.path && props.autoPlay) {
+      player?.pause()
+      player?.load()
+      player?.src(props.path)
       player?.play()
     }
   },
@@ -74,11 +85,15 @@ onBeforeUnmount(() => {
   player?.dispose()
 })
 </script>
+<style>
+.vjs-poster {
+  background-size: cover !important;
+}
+</style>
 <style lang="scss" scoped>
 .videoPlay {
   flex: 1;
   height: v-bind('`${h}px`');
-
   .video-js {
     height: 100%;
     width: 100%;

@@ -6,6 +6,7 @@ import cloneDeep from 'lodash/cloneDeep'
 export const option = {
   dataset: '',
   autoplay: false,
+  poster: ''
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

 <template>
   <CollapseItem name="播放器配置" :expanded="true">
+    <setting-item-box name="上传图片" :alone="true">
+      <setting-item>
+        <n-card class="upload-box">
+          <n-upload
+            :show-file-list="false"
+            v-model:file-list="uploadFileListRef"
+            :customRequest="customRequest"
+            :onBeforeUpload="beforeUploadHandle"
+          >
+            <n-upload-dragger>
+              <img v-if="optionData.poster" class="upload-show" :src="optionData.poster" alt="背景" />
+              <div class="upload-img" v-show="!optionData.poster">
+                <img src="@/assets/images/canvas/noImage.png" />
+                <n-text class="upload-desc" depth="3">
+                  图片需小于 {{ backgroundImageSize }}M ，格式为 png/jpg/gif 的文件
+                </n-text>
+              </div>
+            </n-upload-dragger>
+          </n-upload>
+        </n-card>
+      </setting-item>
+    </setting-item-box>
     <setting-item-box name="源地址" :alone="true">
       <setting-item>
         <n-input-group>
@@ -16,14 +38,94 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, ref, nextTick } from 'vue'
 import { option } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { FileTypeEnum } from '@/enums/fileTypeEnum'
+import { uploadFile } from '@/api/external/contentSave/content'
+import { UploadCustomRequestOptions } from 'naive-ui'
+import { backgroundImageSize } from '@/settings/designSetting'
+import { fetchRouteParamsLocation } from '@/utils'
 
-defineProps({
+const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option>,
     required: true
   }
 })
+
+const uploadFileListRef = ref()
+
+// 上传图片前置处理
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+const beforeUploadHandle = async ({ file }) => {
+  uploadFileListRef.value = []
+  const type = file.file.type
+  const size = file.file.size
+
+  if (size > 1024 * 1024 * backgroundImageSize) {
+    window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
+    return false
+  }
+  if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
+    window['$message'].warning('文件格式不符合，请重新上传！')
+    return false
+  }
+  return true
+}
+
+// 自定义上传操作
+const customRequest = (options: UploadCustomRequestOptions) => {
+  const { file } = options
+  nextTick(async () => {
+    if (file.file) {
+      // 修改名称
+      const newNameFile = new File([file.file], `${fetchRouteParamsLocation()}_index_background.png`, {
+        type: file.file.type
+      })
+      let uploadParams = new FormData()
+      uploadParams.append('file', newNameFile)
+      const uploadRes = await uploadFile(uploadParams)
+      if (uploadRes) {
+        props.optionData.poster = uploadRes?.fileStaticUri
+        window['$message'].success('添加图片成功！')
+      }
+    } else {
+      window['$message'].error('添加图片失败，请稍后重试！')
+    }
+  })
+}
 </script>
+<style lang="scss" scoped>
+$uploadHeight: 193px;
+.upload-box {
+  cursor: pointer;
+  margin-bottom: 20px;
+  @include deep() {
+    .n-card__content {
+      padding: 0;
+      overflow: hidden;
+    }
+    .n-upload-dragger {
+      padding: 5px;
+    }
+  }
+  .upload-show {
+    width: -webkit-fill-available;
+    height: $uploadHeight;
+    border-radius: 5px;
+  }
+  .upload-img {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    img {
+      height: 150px;
+    }
+    .upload-desc {
+      padding: 10px 0;
+    }
+  }
+}
+</style>

 <template>
   <div>
-    <VideoPlay :h="h" :path="option.dataset" :autoPlay="autoplay" />
+    <VideoPlay :h="h" :path="option.dataset" :autoPlay="autoplay" :poster="option.poster" />
   </div>
 </template>
 <script setup lang="ts">
@@ -18,10 +18,11 @@ const props = defineProps({
 
 const { h } = toRefs(props.chartConfig.attr)
 
-const { autoplay, dataset } = toRefs(props.chartConfig.option)
+const { autoplay, dataset, poster } = toRefs(props.chartConfig.option)
 
 const option = shallowReactive({
-  dataset: configOption.dataset
+  dataset: configOption.dataset,
+  poster: configOption.poster
 })
 
 watch(
@@ -30,7 +31,17 @@ watch(
     option.dataset = newData
   },
   {
-    immediate: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => poster?.value,
+  (newData: string) => {
+    option.poster = newData
+  },
+  {
+    immediate: true
   }
 )
 </script>

 <script lang="ts" setup name="WeatherContent">
-import { toRefs } from 'vue'
+import { toRefs, PropType, computed } from 'vue'
 import SelectCity from './SelectCity.vue'
 import { useUtils } from '../hooks/useUtils'
 import weatherBg from '@/assets/external/weather/bg.png'
+import { weatherInfoInterface, selectValueType } from '../config'
 
 const props = defineProps({
   data: {
-    type: Array as any
+    type: Array as PropType<weatherInfoInterface[]>,
+    required: true
   }
 })
 
@@ -16,21 +18,31 @@ const { loadWeatherImg, loadWeatherLevel } = useUtils()
 
 const { casts } = toRefs(props.data[0])
 
-const onHandleSelectValues = (values: any) => {
+const onHandleSelectValues = (values: selectValueType) => {
   emits('submit', values)
 }
+
+const nCardComputed = computed(() => {
+  return {
+    backgroundImage: `url('${weatherBg}')`
+  }
+})
+
+const segmentedComputed = computed(() => {
+  return {
+    content: true,
+    footer: 'soft'
+  }
+})
+
+const indexMapDayFunc = (index: number) => {
+  return index === 0 ? '今天' : index === 1 ? '明天' : index === 2 ? '后天' : '外天'
+}
 </script>
 
 <template>
   <div>
-    <n-card
-      :segmented="{
-        content: true,
-        footer: 'soft'
-      }"
-      :style="{ backgroundImage: `url('${weatherBg}')` }"
-      class="n-card"
-    >
+    <n-card :segmented="segmentedComputed" :style="nCardComputed" class="n-card">
       <template #header>
         <div class="card-header">
           <div class="city-text">{{ data[0]?.city }}</div>
@@ -59,7 +71,7 @@ const onHandleSelectValues = (values: any) => {
       </div>
       <template #footer>
         <div v-for="(item, index) in casts" :key="index" class="footer-content">
-          <div>{{ index === 0 ? '今天' : index === 1 ? '明天' : index === 2 ? '后天' : '外天' }}</div>
+          <div>{{ indexMapDayFunc(index) }}</div>
           <div>
             <img :src="loadWeatherImg(item?.dayweather)" />
           </div>

@@ -7,6 +7,8 @@ import clearDay from '@/assets/external/weather/clearDay.png'
 import cloudy from '@/assets/external/weather/cloudy.png'
 import cloudyDay from '@/assets/external/weather/cloudyDay.png'
 import lightRain from '@/assets/external/weather/lightRain.png'
+import thunderstorm from '@/assets/external/weather/thunderstorm.png'
+import shower from '@/assets/external/weather/shower.png'
 
 //第三方 天气接口key值和api配置(高德)
 export class ThirdPartyWeatherConnfig {
@@ -23,7 +25,7 @@ export const enum areaEnum {
   COUNTY = 'COUNTY'
 }
 
-//天气文字映射图片
+//天气文字图片映射
 export const weatherTextMapImg = [
   {
     text: '晴',
@@ -40,10 +42,17 @@ export const weatherTextMapImg = [
   {
     text: '小雨',
     img: lightRain
+  },
+  {
+    text: '雷阵雨',
+    img: thunderstorm
+  },
+  {
+    text: '阵雨',
+    img: shower
   }
 ]
 
-console.log(clearDay, cloudy)
 //风力等级文字映射
 export const weatherSpeedMapText = [
   {
@@ -100,6 +109,36 @@ export const weatherSpeedMapText = [
   }
 ]
 
+export type selectValueType = {
+  provinceValue: null
+  cityValue: string
+  countyValue: null
+}
+
+export interface castsInterface {
+  date: string
+  week: string
+  dayweather: string
+  nightweather: string
+  daytemp: string
+  nighttemp: string
+  daywind: string
+  nightwind: string
+  daypower: string
+  nightpower: string
+  daytemp_float: string
+  nighttemp_float: string
+}
+export interface weatherInfoInterface {
+  city: string
+  adcode: string
+  province: string
+  reporttime: string
+  casts: castsInterface[]
+}
+
+export type weatherTextMapType = { text: string; img: string; level: Fn }
+
 export const option = {
   dataset: {
     provinceValue: null,

@@ -6,6 +6,8 @@
       <SettingItem name="颜色">
         <n-color-picker v-model:value="optionData.weatherCss.backgroundColor" />
       </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="背景">
       <SettingItem>
         <n-button size="small" @click="optionData.weatherCss.backgroundColor = 'transparent'"> 恢复默认颜色 </n-button>
       </SettingItem>
@@ -73,7 +75,7 @@
 <script setup lang="ts">
 import { PropType } from 'vue'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { option } from './config'
+import { option, selectValueType } from './config'
 import SelectCity from './componnets/SelectCity.vue'
 
 const props = defineProps({
@@ -83,7 +85,7 @@ const props = defineProps({
   }
 })
 
-const onHandleSelectValues = (values: any) => {
+const onHandleSelectValues = (values: selectValueType) => {
   props.optionData.dataset = values
 }
 </script>

-import { weatherSpeedMapText, weatherTextMapImg } from '../config'
+import { weatherSpeedMapText, weatherTextMapImg, weatherTextMapType } from '../config'
 import clearDay from '@/assets/external/weather/clearDay.png'
 
 export const useUtils = () => {
   const loadWeatherImg = (text: string) => {
-    return weatherTextMapImg.find((item: any) => item.text === text)?.img || clearDay
+    return weatherTextMapImg.find((item: Omit<weatherTextMapType, 'level'>) => item.text === text)?.img || clearDay
   }
 
   //风力等级 ≤3 3
@@ -14,7 +14,7 @@ export const useUtils = () => {
     } else {
       handleSpeed = speed
     }
-    return weatherSpeedMapText.find((item: any) => item.level(Number(handleSpeed)))?.text
+    return weatherSpeedMapText.find((item: { text: string; level: Fn }) => item.level(Number(handleSpeed)))?.text
   }
   return {
     loadWeatherImg,

 <script lang="ts" setup name="Weather">
 import { PropType, toRefs, onMounted, reactive, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
-import { option, ThirdPartyWeatherConnfig } from './config'
+import { option, ThirdPartyWeatherConnfig, selectValueType, weatherInfoInterface } from './config'
 import axios from 'axios'
 import WeatherContent from './componnets/WeatherContent.vue'
 import { useUtils } from './hooks/useUtils'
@@ -19,11 +19,15 @@ const { w, h } = toRefs(props.chartConfig.attr)
 
 const { weatherCss } = toRefs(props.chartConfig.option)
 
-const weatherInfoValues = reactive<any>({
+type weatherInfoValuesType = {
+  weatherInfo: weatherInfoInterface[]
+}
+
+const weatherInfoValues = reactive<weatherInfoValuesType>({
   weatherInfo: []
 })
 
-const getWeatherInfos = async (area: any) => {
+const getWeatherInfos = async (area: selectValueType) => {
   const { cityValue, countyValue } = area || props.chartConfig.option.dataset
   const params = {
     key: ThirdPartyWeatherConnfig.ak,
@@ -52,7 +56,7 @@ watch(
   }
 )
 
-const onHandleSelectValues = (values: any) => {
+const onHandleSelectValues = (values: selectValueType) => {
   getWeatherInfos(values)
 }
 </script>

@@ -6,13 +6,17 @@ import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
   // 网站路径
-  dataset: "",
+  dataset: '',
   // 圆角
-  borderRadius: 10
+  borderRadius: 10,
+  pages: {
+    page: 1,
+    pageSize: 10
+  },
+  color: 'black'
 }
 
-export default class Config extends PublicConfigClass implements CreateComponentType
-{
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = OverrideILoadConfigurationframeConfig.key
   public attr = { ...chartInitConfig, w: 1200, h: 800, zIndex: -1 }
   public chartConfig = cloneDeep(OverrideILoadConfigurationframeConfig)

@@ -15,16 +15,38 @@
         ></n-input-number>
       </setting-item>
     </setting-item-box>
+    <setting-item-box name="分页">
+      <setting-item name="页码">
+        <n-input-number v-model:value="optionData.pages.page" size="small" :min="1" placeholder="页码"></n-input-number>
+      </setting-item>
+      <setting-item name="页数">
+        <n-input-number
+          disabled
+          v-model:value="optionData.pages.pageSize"
+          size="small"
+          :min="10"
+          placeholder="页数"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.color = 'black'"> 恢复默认 </n-button>
+      </SettingItem>
+    </setting-item-box>
   </collapse-item>
 </template>
 
 <script setup lang="ts">
-import { PropType, onMounted, ref } from 'vue'
+import { PropType, onMounted, ref, watch } from 'vue'
 import { option } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { getConfigurationList } from '@/api/external/common/index'
 
-defineProps({
+const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option>,
     required: true
@@ -40,7 +62,18 @@ const getConfigurationOptions = async (params: object) => {
   }
 }
 
+watch(
+  () => props.optionData.pages,
+  (newData: any) => {
+    getConfigurationOptions({ page: newData.page, pageSize: newData.pageSize })
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
 onMounted(() => {
-  getConfigurationOptions({ page: 1, pageSize: 10 })
+  getConfigurationOptions({ page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize })
 })
 </script>

@@ -3,9 +3,9 @@
     <div v-show="isShowSvg" @click="handleFullScreen" id="fullscreenButton">
       <svg
         focusable="false"
-        class=""
         data-icon="fullscreen"
         width="4vw"
+        :style="`color:${color}`"
         height="4vh"
         fill="currentColor"
         aria-hidden="true"
@@ -35,8 +35,7 @@ import { useChartDataFetch } from '@/hooks'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useFullScreen } from '@/packages/components/external/Charts/utls/fullScreen'
-import { isDevMode } from '@/utils/external/env';
-
+import { isDevMode } from '@/utils/external/env'
 
 const props = defineProps({
   chartConfig: {
@@ -50,7 +49,7 @@ const isShowSvg = ref(false)
 const allowfullscreen = ref(false)
 
 const { w, h } = toRefs(props.chartConfig.attr)
-const { borderRadius } = toRefs(props.chartConfig.option)
+const { borderRadius, color } = toRefs(props.chartConfig.option)
 
 const option = shallowReactive({
   dataset: ''
@@ -63,7 +62,7 @@ const getStyle = (radius: number) => {
   }
 }
 
-const isDev = isDevMode();
+const isDev = isDevMode()
 
 // 编辑更新
 watch(
@@ -72,7 +71,9 @@ watch(
     const currentHost = window.location.host
     const currentProtocol = window.location.protocol
     //预览
-    option.dataset = `${currentProtocol}//${currentHost}/thingskit-scada/${isDev ? '?dev=1&' : '?'}configurationId=${newData}&lightbox=1`
+    option.dataset = `${currentProtocol}//${currentHost}/thingskit-scada/${
+      isDev ? '?dev=1&' : '?'
+    }configurationId=${newData}&lightbox=1`
   },
   {
     immediate: true

@@ -6,13 +6,13 @@ import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
   // 网站路径
-  dataset: "https://www.thingskit.com/",
+  dataset: 'https://www.thingskit.com/',
   // 圆角
-  borderRadius: 10
+  borderRadius: 10,
+  color: 'black'
 }
 
-export default class Config extends PublicConfigClass implements CreateComponentType
-{
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = OverrideIframeConfig.key
   public attr = { ...chartInitConfig, w: 1200, h: 800, zIndex: -1 }
   public chartConfig = cloneDeep(OverrideIframeConfig)

@@ -15,22 +15,26 @@
         ></n-input-number>
       </setting-item>
     </setting-item-box>
+    <setting-item-box name="颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.color = 'black'"> 恢复默认 </n-button>
+      </SettingItem>
+    </setting-item-box>
   </collapse-item>
 </template>
 
 <script setup lang="ts">
-import { PropType } from "vue";
-import { option } from "./config";
-import {
-  CollapseItem,
-  SettingItemBox,
-  SettingItem,
-} from "@/components/Pages/ChartItemSetting";
+import { PropType } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 
 const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option>,
-    required: true,
-  },
-});
+    required: true
+  }
+})
 </script>

@@ -3,9 +3,9 @@
     <div v-show="isShowSvg" @click="handleFullScreen" id="fullscreenButton">
       <svg
         focusable="false"
-        class=""
         data-icon="fullscreen"
         width="4vw"
+        :style="`color:${color}`"
         height="4vh"
         fill="currentColor"
         aria-hidden="true"
@@ -48,7 +48,7 @@ const isShowSvg = ref(false)
 const allowfullscreen = ref(false)
 
 const { w, h } = toRefs(props.chartConfig.attr)
-const { borderRadius } = toRefs(props.chartConfig.option)
+const { borderRadius, color } = toRefs(props.chartConfig.option)
 
 const option = shallowReactive({
   dataset: ''

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { OverrideVideoConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import video from '@/assets/videos/earth.mp4'
+
+export const option = {
+  // 视频路径
+  dataset: video,
+  // 循环播放
+  loop: true,
+  // 静音
+  muted: true,
+  // 适应方式
+  fit: 'contain',
+  // 圆角
+  borderRadius: 10
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideVideoConfig.key
+  public chartConfig = cloneDeep(OverrideVideoConfig)
+  public option = cloneDeep(option)
+}

+<!-- eslint-disable vue/multi-word-component-names -->
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <collapse-item name="视频" expanded>
+    <setting-item-box name="源" alone>
+      <FileUpload
+        :fileSizeConst="fileSizeConst"
+        :max="1"
+        :threeSupportFileFormat="supportVideoType"
+        @fileStaticUri="handleFileStaticUri"
+      />
+    </setting-item-box>
+    <setting-item-box name="控制">
+      <setting-item>
+        <n-checkbox v-model:checked="optionData.loop" size="small">循环播放</n-checkbox>
+      </setting-item>
+      <setting-item>
+        <n-checkbox v-model:checked="optionData.muted" size="small">静音</n-checkbox>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="样式">
+      <setting-item name="类型">
+        <n-select v-model:value="optionData.fit" size="small" :options="fitList"></n-select>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import FileUpload from '../../../Composes/Mores/ThreeDimensional/components/FileUpload.vue'
+import type { UploadFileInfo } from 'naive-ui'
+
+//视频类型
+const supportVideoType = ['mp4']
+
+const fileSizeConst = ref(100)
+
+// 适应类型
+const fitList = [
+  {
+    value: 'fill',
+    label: 'fill'
+  },
+  {
+    value: 'contain',
+    label: 'contain'
+  },
+  {
+    value: 'cover',
+    label: 'cover'
+  },
+  {
+    value: 'scale-down',
+    label: 'scale-down'
+  },
+  {
+    value: 'none',
+    label: 'none'
+  }
+]
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const handleFileStaticUri = (value: UploadFileInfo[]) => {
+  props.optionData.dataset = value[0]?.url as string
+}
+</script>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideVideo', true)
+
+export const OverrideVideoConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义视频',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,        
+  image: 'video.png'
+}

+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- 重要：需要设置 crossOrigin="anonymous"，否则保存画板缩略图会失败 -->
+  <video
+    ref="vVideoRef"
+    class="go-video"
+    preload="auto"
+    crossOrigin="anonymous"
+    playsinline
+    autoplay
+    :loop="option.loop"
+    :muted="option.muted"
+    :width="w"
+    :height="h"
+    :src="option.dataset"
+    controls
+  ></video>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch, ref } from 'vue'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+let option = shallowReactive({ ...configOption })
+
+// 预览更新
+const vVideoRef = ref(null)
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option = newData
+})
+
+// 编辑更新
+watch(
+  () => props.chartConfig.option,
+  (newData: any) => {
+    option = newData
+    if (!vVideoRef.value) return
+    const video: any = vVideoRef.value
+    video.loop = option.loop
+    video.muted = option.muted
+    video.play()
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@include go('video') {
+  display: block;
+  object-fit: v-bind('option.fit');
+}
+</style>

@@ -20,6 +20,7 @@ import { OverrideProcessConfig } from '@/packages/components/external/Charts/Mor
 import { OverridePieCircleConfig } from '@/packages/components/external/Charts/Pies/OverridePieCircle'
 import { OverrideMapBaseConfig } from '@/packages/components/external/Charts/Maps/OverrideMapBase'
 import { OverrideILoadConfigurationframeConfig } from '@/packages/components/external/Informations/Mores/OverrideILoadConfigurationframe'
+import { OverrideVideoConfig } from '@/packages/components/external/Informations/Mores/OverrideVideo'
 
 export function useInjectLib(packagesList: EPackagesType) {
   packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
@@ -43,6 +44,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverridePieCircleConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideMapBaseConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideILoadConfigurationframeConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideVideoConfig)
 }
 
 /**