Merge branch 'ft' into 'main_dev'

feat: 大屏新增自定义天气

See merge request yunteng/thingskit-view!65

@@ -4,7 +4,8 @@ import { DictItem, UploadResponse } from './model'
 enum Api {
   GET_DICT = '/dict_item',
   UPLOAD = '/oss/upload',
-  DOWNLOAD = '/oss/download_file/'
+  DOWNLOAD = '/oss/download_file/',
+  AREALIST = '/area/list'
 }
 
 export const getDictItemByCode = (value: string) => {
@@ -26,3 +27,10 @@ export const upload = (file: FormData) => {
 export const downloadFile = (fileName: string) => {
   return defHttp.get({ url: `${Api.DOWNLOAD}${fileName}` })
 }
+
+export const getAreaList = (data: object) => {
+  return defHttp.post<any>({
+    url: Api.AREALIST,
+    data
+  })
+}

+/**
+ * 覆盖原作者默认hooks
+ * hooks/useChartInteract.hook.ts
+ * 目的 修改tab切换显示不同内容
+ * 新增代码是写在注释之间，其他原作者代码逻辑未做修改
+ */
+import { toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+// 获取类型
+type ChartEditStoreType = typeof useChartEditStore
+
+// Params 参数修改触发 api 更新图表请求
+export const useChartInteract = (
+  chartConfig: CreateComponentType,
+  useChartEditStore: ChartEditStoreType,
+  param: { [T: string]: any },
+  interactEventOn: string
+) => {
+  /**新增代码 */
+  let combineData: any = null
+  const {
+    option: { dataset }
+  } = chartConfig
+  combineData = dataset
+  const { data } = param
+  /**新增代码 */
+  const chartEditStore = useChartEditStore()
+  const { interactEvents } = chartConfig.events
+  const fnOnEvent = interactEvents.filter(item => {
+    return item.interactOn === interactEventOn
+  })
+
+  if (fnOnEvent.length === 0) return
+  fnOnEvent.forEach((item, itemIndex) => {
+    const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
+    if (index === -1) return
+    const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams)
+    Object.keys(item.interactFn).forEach(key => {
+      if (Params.value[key]) {
+        Params.value[key] = param[item.interactFn[key]]
+      }
+      if (Header.value[key]) {
+        Header.value[key] = param[item.interactFn[key]]
+      }
+    })
+    /**新增代码 */
+    combineData.forEach((combinItem: any, combinIndex: number) => {
+      if (itemIndex === combinIndex) {
+        combinItem.targetItem = chartEditStore.componentList[index]
+      }
+    })
+    /**新增代码 */
+  })
+  /**新增代码 */
+  combineData.forEach((item: any) => {
+    try {
+      if (item.value === data) item.targetItem.status.hide = false
+      else {
+        item.targetItem.status.hide = true
+      }
+    } catch (e) {
+      console.log(`useChartInteract.hook.ts:${e}`)
+    }
+  })
+  /**新增代码 */
+}
+
+// 联动事件触发的 type 变更时，清除当前绑定内容
+
+/**新增代码 */
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export const clearInteractEvent = (chartConfig: CreateComponentType) => {}
+/**新增代码 */

+<template>
+  <video
+    crossOrigin="anonymous"
+    :id="`my-player${index}`"
+    ref="videoRef"
+    class="video-js my-video vjs-theme-city vjs-big-play-centered"
+  >
+    <source :src="sourceSrc" />
+  </video>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, onUnmounted, watch } from 'vue'
+import videojs from 'video.js'
+import type { VideoJsPlayerOptions } from 'video.js'
+import 'video.js/dist/video-js.min.css'
+
+const props = defineProps({
+  sourceSrc: {
+    type: String
+  },
+  name: {
+    type: String
+  },
+  avatar: {
+    type: String
+  },
+  w: {
+    type: Number,
+    default: 300
+  },
+  h: {
+    type: Number,
+    default: 300
+  },
+  index: {
+    type: Number
+  }
+})
+
+// video标签
+const videoRef = ref<HTMLElement | null>(null)
+
+// video实例对象
+let videoPlayer: videojs.Player | null = null
+
+//options配置
+const options: VideoJsPlayerOptions = {
+  language: 'zh-CN', // 设置语言
+  controls: true, // 是否显示控制条
+  preload: 'auto', // 预加载
+  autoplay: true, // 是否自动播放
+  fluid: false, // 自适应宽高
+  poster: props?.avatar || '',
+  src: props?.sourceSrc || '', // 要嵌入的视频源的源 URL
+  muted: true,
+  userActions: {
+    hotkeys: true
+  }
+}
+
+// 初始化videojs
+const initVideo = () => {
+  if (videoRef.value) {
+    // 创建 video 实例
+    videoPlayer = videojs(videoRef.value, options)
+  }
+}
+
+watch(
+  () => props.sourceSrc,
+  (newData: any) => {
+    // props.sourceSrc = newData
+    videoPlayer?.src(newData) as any
+    videoPlayer?.play()
+  },
+  {
+    immediate: true
+  }
+)
+
+onMounted(() => {
+  initVideo()
+})
+
+onUnmounted(() => {
+  handleVideoDispose()
+})
+
+//播放
+const handleVideoPlay = () => videoPlayer?.play()
+
+const handleVideoDispose = () => videoPlayer?.dispose() && videoPlayer?.pause()
+//暂停
+defineExpose({
+  handleVideoPlay,
+  handleVideoDispose
+})
+</script>
+
+<style lang="scss" scoped>
+.my-video {
+  width: 100%;
+  height: 100%;
+}
+</style>

+import CameraItem from './CameraItem.vue'
+
+export { CameraItem }

@@ -7,12 +7,13 @@ export const option = {
   dataset: [
     {
       url: ''
-    },
+    }
   ] as any,
   // 自动播放的间隔（ms）
   interval: 5000,
   autoplay: true,
-  effect: 'slide'
+  effect: 'slide',
+  displayMode: 'singleGrid'
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -8,11 +8,16 @@
         </n-input-group>
       </setting-item>
       <setting-item>
-        <n-button v-if="optionData.dataset.length < 5" size="small" @click="optionData.dataset.push({ url: '' })">
+        <n-button v-if="optionData.dataset.length < 9" size="small" @click="optionData.dataset.push({ url: '' })">
           +
         </n-button>
       </setting-item>
     </setting-item-box>
+    <setting-item-box name="排布">
+      <setting-item>
+        <n-select v-model:value="optionData.displayMode" size="small" :options="displayModeOptions"></n-select>
+      </setting-item>
+    </setting-item-box>
   </CollapseItem>
 </template>
 
@@ -27,4 +32,20 @@ defineProps({
     required: true
   }
 })
+
+// 旋转方式
+const displayModeOptions = [
+  {
+    value: 'singleGrid',
+    label: '默认'
+  },
+  {
+    value: 'fourGrid',
+    label: '四宫格'
+  },
+  {
+    value: 'nineGrid',
+    label: '九宫格'
+  }
+]
 </script>

 <template>
   <div class="banner-box" ref="root">
-    <div  class="wrapper">
-      <div v-for="(item, index) in option.dataset" :key="index + item" :class="item.className" :style="item.sty">
+    <div class="wrapper">
+      <div
+        v-for="(item, index) in option.dataset"
+        :key="index + item"
+        :class="item.className"
+        :style="item.sty"
+      >
         <CameraItem
           ref="cameraRef"
           :name="item.name"
@@ -24,7 +29,7 @@ import { PropType, watch, toRefs, shallowReactive, onMounted, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import 'video.js/dist/video-js.min.css'
 import { option as configOption } from './config'
-import CameraItem from './cameraItem.vue'
+import { CameraItem } from './components'
 
 const props = defineProps({
   chartConfig: {
@@ -83,7 +88,7 @@ const computedFunc = (initial: number, source: any) => {
       }
       item.sty = {
         transform,
-        zIndex,
+        zIndex
       }
       item.className = className
       return item
@@ -101,6 +106,7 @@ watch(
     deep: true
   }
 )
+
 option.dataset = computedFunc(initial.value, option.dataset)
 
 watch(
@@ -109,6 +115,7 @@ watch(
     option.dataset = computedFunc(newV, option.dataset)
   }
 )
+
 // 处理自动轮播
 let timer: any = null
 
@@ -135,13 +142,11 @@ onMounted(() => {
 // 点击左右按钮切换图片
 function changeVideo(dir: string) {
   if (dir === 'left') {
-    // cameraRef.value?.handleVideoPlay()
     clearInterval(timer)
     initial.value++
     initial.value >= option.dataset.length ? (initial.value = 0) : false
     return
   }
-  // cameraRef.value?.handleVideoDispose()
   initial.value--
   initial.value < 0 ? (initial.value = option.dataset.length - 1) : false
 }
@@ -155,16 +160,13 @@ function changeSlide(dir: string) {
 <style lang="scss" scoped>
 .banner-box {
   .wrapper {
-    // width: 100%;
     height: 100%;
-    // position: relative;
     display: flex;
     overflow: hidden;
     .slide {
       width: 20%;
       height: 100%;
       position: absolute;
-      // top: 50%;
       left: 10%;
       transform: translateX(-50%);
       transition: 0.5s;
@@ -193,12 +195,12 @@ function changeSlide(dir: string) {
   }
   a.left {
     @extend .arrow;
-    background-image: url(./left.svg);
+    background-image: url(./static/left.svg);
     left: 0px;
   }
   a.right {
     @extend .arrow;
-    background-image: url(./right.svg);
+    background-image: url(./static/right.svg);
     right: 0px;
   }
 }

+<template>
+  <div class="banner-box" ref="root">
+    <n-grid x-gap="12" :y-gap="12" :cols="computedCols">
+      <n-gi v-for="(item, index) in option.dataset" :key="index + item">
+        <div class="camera-container">
+          <CameraItem
+            ref="cameraRef"
+            :name="item.name"
+            :avatar="item.avatar"
+            :key="item + index"
+            :sourceSrc="item.url"
+            :index="index"
+          />
+        </div>
+      </n-gi>
+    </n-grid>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs, watch, shallowReactive, ref, computed } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import 'video.js/dist/video-js.min.css'
+import { option as configOption } from './config'
+import { CameraItem } from './components'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { h } = toRefs(props.chartConfig.attr)
+
+const responsiveComputeValue = ref(0)
+
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+const computedCols = computed(() => {
+  if (option.dataset.length <= 1) return 1
+  if (option.dataset.length <= 4) return 2
+  return 3
+})
+
+const cameraRef = ref<InstanceType<typeof CameraItem>>()
+
+const responsive = (value: number) => {
+  responsiveComputeValue.value = value
+  if (option.dataset.length <= 2) responsiveComputeValue.value = value
+  if (option.dataset.length > 2 && option.dataset.length <= 4) responsiveComputeValue.value = value / 2.03
+  if (option.dataset.length > 4 && option.dataset.length <= 9) responsiveComputeValue.value = value / 3.1
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    option.dataset = newData
+    responsive(h.value)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+watch(
+  () => h.value,
+  newData => responsive(newData),
+  {
+    immediate: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.banner-box {
+  .camera-container {
+    height: v-bind('`${responsiveComputeValue}px`');
+  }
+}
+</style>

+<script lang="ts" setup name="SelectCity">
+import { onMounted, reactive } from 'vue'
+import { getAreaList } from '@/api/external/common/index'
+import { areaEnum } from '../config'
+
+const emits = defineEmits(['submit'])
+
+const selectOptions = reactive({
+  provinceOptions: [],
+  cityOptions: [],
+  countryOptions: []
+})
+
+const selectValues = reactive({
+  provinceValue: null,
+  cityValue: null,
+  countyValue: null
+})
+
+const getAreaLists = async (level = areaEnum.PROVINCE, parentId = 1) => {
+  const resp = await getAreaList({
+    level,
+    parentId
+  })
+  if (!resp) return []
+  return resp.map((item: any) => ({ label: item.name, value: item.code }))
+}
+
+onMounted(async () => {
+  selectOptions.provinceOptions = await getAreaLists()
+})
+
+const onHandleSelectProvince = async (value: number) => {
+  selectValues.cityValue = null
+  selectValues.countyValue = null
+  selectOptions.cityOptions = await getAreaLists(areaEnum.CITY, value)
+}
+
+const onHandleSelectCity = async (value: number) => {
+  selectValues.countyValue = null
+  selectOptions.countryOptions = await getAreaLists(areaEnum.COUNTY, value)
+}
+
+const onHandleSubmit = () => {
+  emits('submit', selectValues)
+}
+</script>
+
+<template>
+  <div class="select-city-content">
+    <n-select
+      @change="onHandleSelectProvince"
+      placeholder="请选择省份"
+      v-model:value="selectValues.provinceValue"
+      :options="selectOptions.provinceOptions"
+    />
+    <n-select
+      @change="onHandleSelectCity"
+      placeholder="请选择城市"
+      v-model:value="selectValues.cityValue"
+      :options="selectOptions.cityOptions"
+    />
+    <n-select
+      placeholder="请选择区域"
+      v-model:value="selectValues.countyValue"
+      :options="selectOptions.countryOptions"
+    />
+    <n-button type="primary" @click="onHandleSubmit">确定</n-button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.select-city-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  gap: 30px;
+}
+</style>

+<script lang="ts" setup name="WeatherContent">
+import { toRefs } from 'vue'
+import SelectCity from './SelectCity.vue'
+import { useUtils } from '../hooks/useUtils'
+
+const props = defineProps({
+  data: {
+    type: Array as any
+  }
+})
+
+const emits = defineEmits(['submit'])
+
+const { loadWeatherImg, loadWeatherLevel } = useUtils()
+
+const { casts } = toRefs(props.data[0])
+
+const onHandleSelectValues = (values: any) => {
+  emits('submit', values)
+}
+</script>
+
+<template>
+  <div>
+    <n-card
+      :segmented="{
+        content: true,
+        footer: 'soft'
+      }"
+      :style="{ backgroundImage: `url('src/assets/external/weather/bg.png')` }"
+      class="n-card"
+    >
+      <template #header>
+        <div class="card-header">
+          <div class="city-text">{{ data[0]?.city }}</div>
+          <n-popover placement="bottom" trigger="hover">
+            <template #trigger>
+              <div class="city-text">切换城市</div>
+            </template>
+            <div :style="`width:${300}px;height:${300}px;`">
+              <SelectCity @submit="onHandleSelectValues" />
+            </div>
+          </n-popover>
+        </div>
+      </template>
+      <div class="card-content">
+        <div class="content-weather">
+          <div>{{ casts[0]?.daytemp }}°</div>
+          <div>
+            <img :src="loadWeatherImg(casts[0]?.dayweather)" />
+          </div>
+        </div>
+        <div class="content-weather-air">
+          <div>{{ casts[0]?.dayweather }}</div>
+          <div>{{ casts[0]?.daywind }}</div>
+          <div>{{ loadWeatherLevel(casts[0]?.daypower) }}</div>
+        </div>
+      </div>
+      <template #footer>
+        <div v-for="(item, index) in casts" :key="index" class="footer-content">
+          <div>{{ index === 0 ? '今天' : index === 1 ? '明天' : index === 2 ? '后天' : '外天' }}</div>
+          <div>
+            <img :src="loadWeatherImg(item?.dayweather)" />
+          </div>
+          <div>{{ item?.daytemp }}/{{ item?.nighttemp }}</div>
+          <div>{{ item?.daywind }}</div>
+          <div>{{ loadWeatherLevel(item?.daypower) }}</div>
+        </div>
+      </template>
+    </n-card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+%flex-style {
+  display: flex;
+  justify-content: space-between;
+  color: white;
+}
+.n-card {
+  background-repeat: no-repeat;
+  background-size: cover;
+  .card-header {
+    @extend %flex-style;
+    .city-text {
+      color: white;
+      cursor: pointer;
+    }
+  }
+  .card-content {
+    @extend %flex-style;
+    .content-weather {
+      @extend %flex-style;
+      font-size: 45px;
+    }
+    .content-weather-air {
+      display: flex;
+      flex-direction: column;
+    }
+    img {
+      width: 24px;
+      height: 24px;
+    }
+  }
+  .footer-content {
+    @extend %flex-style;
+    gap: 10px;
+    margin-left: 10px;
+    div {
+      flex: 1;
+      text-align: left;
+      img {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+}
+</style>

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { WeatherConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+//第三方 天气接口key值和api配置(高德)
+export class ThirdPartyWeatherConnfig {
+  static ak = '0551a87b45e0363ae6c7a2242e8ac944'
+  static api = 'https://restapi.amap.com/v3/weather/weatherInfo'
+  // ((all,预报天气),(base,实况天气))
+  static extensions = 'all'
+}
+
+//省市区枚举
+export const enum areaEnum {
+  PROVINCE = 'PROVINCE',
+  CITY = 'CITY',
+  COUNTY = 'COUNTY'
+}
+
+//天气文字映射图片
+export const weatherTextMapImg = [
+  {
+    text: '晴',
+    img: '/large-designer/src/assets/external/weather/clearDay.png'
+  },
+  {
+    text: '多云',
+    img: '/large-designer/src/assets/external/weather/cloudy.png'
+  },
+  {
+    text: '阴',
+    img: '/large-designer/src/assets/external/weather/cloudyDay.png'
+  },
+  {
+    text: '小雨',
+    img: '/large-designer/src/assets/external/weather/lightRain.png'
+  }
+]
+
+//风力等级文字映射
+export const weatherSpeedMapText = [
+  {
+    level: (value: number) => value >= 0.0 && value <= 0.2,
+    text: '无风'
+  },
+  {
+    level: (value: number) => value >= 0.3 && value <= 1.5,
+    text: '软风'
+  },
+  {
+    level: (value: number) => value >= 1.6 && value <= 3.3,
+    text: '轻风'
+  },
+  {
+    level: (value: number) => value >= 3.4 && value <= 5.4,
+    text: '微风'
+  },
+  {
+    level: (value: number) => value >= 5.5 && value <= 7.9,
+    text: '和风'
+  },
+  {
+    level: (value: number) => value >= 8.0 && value <= 10.7,
+    text: '劲风'
+  },
+  {
+    level: (value: number) => value >= 10.8 && value <= 13.8,
+    text: '强风'
+  },
+  {
+    level: (value: number) => value >= 13.9 || value <= 17.1,
+    text: '疾风'
+  },
+  {
+    level: (value: number) => value >= 17.2 && value <= 20.7,
+    text: '大风'
+  },
+  {
+    level: (value: number) => value >= 20.8 && value <= 24.4,
+    text: '烈风'
+  },
+  {
+    level: (value: number) => value >= 24.5 && value <= 28.4,
+    text: '狂风'
+  },
+  {
+    level: (value: number) => value >= 28.5 && value <= 32.6,
+    text: '暴风'
+  },
+  {
+    level: (value: number) => value >= 32.7 && value <= 36.9,
+    text: '飓风'
+  }
+]
+
+export const option = {
+  dataset: {
+    provinceValue: null,
+    cityValue: '510100',
+    countyValue: null
+  },
+  weatherCss: {
+    temperatureTextSize: '16',
+    temperatureTextColor: '#000000',
+    cityTextSize: '16',
+    cityTextColor: '#000000',
+    weatherIconSizeWidth: '24',
+    weatherIconSizeHeight: '24',
+    airSpeedTextSize: '16',
+    airSpeedTextColor: '#000000',
+    airSpeedLevelTextSize: '16',
+    airSpeedLevelTextColor: '#000000',
+    backgroundColor: 'transparent',
+    borderRadius: '5'
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = WeatherConfig.key
+  public attr = { ...chartInitConfig, zIndex: 1, w: 300, h: 60 }
+  public chartConfig = cloneDeep(WeatherConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <CollapseItem name="天气配置" :expanded="true">
+    <SettingItemBox name="区域选择"> </SettingItemBox>
+    <SelectCity @submit="onHandleSelectValues" />
+    <SettingItemBox name="背景">
+      <SettingItem name="颜色">
+        <n-color-picker v-model:value="optionData.weatherCss.backgroundColor" />
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.weatherCss.backgroundColor = 'transparent'"> 恢复默认颜色 </n-button>
+      </SettingItem>
+      <SettingItem name="圆角">
+        <n-input v-model:value="optionData.weatherCss.borderRadius" />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="温度文字">
+      <SettingItem name="大小">
+        <n-input v-model:value="optionData.weatherCss.temperatureTextSize" />
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker v-model:value="optionData.weatherCss.temperatureTextColor" />
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.weatherCss.temperatureTextColor = '#000000'"> 恢复默认颜色 </n-button>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="城市名">
+      <SettingItem name="大小">
+        <n-input v-model:value="optionData.weatherCss.cityTextSize" />
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker v-model:value="optionData.weatherCss.cityTextColor" />
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.weatherCss.cityTextColor = '#000000'"> 恢复默认颜色 </n-button>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="天气图标">
+      <SettingItem name="宽度">
+        <n-input v-model:value="optionData.weatherCss.weatherIconSizeWidth" />
+      </SettingItem>
+      <SettingItem name="高度">
+        <n-input v-model:value="optionData.weatherCss.weatherIconSizeHeight" />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="风速文字">
+      <SettingItem name="大小">
+        <n-input v-model:value="optionData.weatherCss.airSpeedTextSize" />
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker v-model:value="optionData.weatherCss.airSpeedTextColor" />
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.weatherCss.airSpeedTextColor = '#000000'"> 恢复默认颜色 </n-button>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="风速等级">
+      <SettingItem name="大小">
+        <n-input v-model:value="optionData.weatherCss.airSpeedLevelTextSize" />
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker v-model:value="optionData.weatherCss.airSpeedLevelTextColor" />
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.weatherCss.airSpeedLevelTextColor = '#000000'">
+          恢复默认颜色
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+import SelectCity from './componnets/SelectCity.vue'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const onHandleSelectValues = (values: any) => {
+  props.optionData.dataset = values
+}
+</script>

+import { weatherSpeedMapText, weatherTextMapImg } from '../config'
+
+export const useUtils = () => {
+  const loadWeatherImg = (text: string) => {
+    return (
+      weatherTextMapImg.find((item: any) => item.text === text)?.img ||
+      '/large-designer/src/assets/external/weather/clearDay.png'
+    )
+  }
+
+  //风力等级 ≤3 3
+  const loadWeatherLevel = (speed: string) => {
+    let handleSpeed = ''
+    if (speed?.startsWith('≤')) {
+      handleSpeed = speed.slice(1)
+    } else {
+      handleSpeed = speed
+    }
+    return weatherSpeedMapText.find((item: any) => item.level(Number(handleSpeed)))?.text
+  }
+  return {
+    loadWeatherImg,
+    loadWeatherLevel
+  }
+}

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Decorates/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('Weather', true)
+
+export const WeatherConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '天气',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'weather.png'
+}

+<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 axios from 'axios'
+import WeatherContent from './componnets/WeatherContent.vue'
+import { useUtils } from './hooks/useUtils'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & { option: typeof option }>,
+    required: true
+  }
+})
+
+const { loadWeatherImg, loadWeatherLevel } = useUtils()
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const { weatherCss } = toRefs(props.chartConfig.option)
+
+const weatherInfoValues = reactive<any>({
+  weatherInfo: []
+})
+
+const getWeatherInfos = async (area: any) => {
+  const { cityValue, countyValue } = area || props.chartConfig.option.dataset
+  const params = {
+    key: ThirdPartyWeatherConnfig.ak,
+    city: !countyValue ? cityValue : countyValue,
+    extensions: ThirdPartyWeatherConnfig.extensions
+  }
+  const {
+    data: { forecasts }
+  } = await axios.get(ThirdPartyWeatherConnfig.api, { params })
+  if (!forecasts) return
+  weatherInfoValues.weatherInfo = forecasts
+}
+
+onMounted(() => {
+  getWeatherInfos(props.chartConfig.option.dataset)
+})
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newValue => {
+    getWeatherInfos(newValue)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+const onHandleSelectValues = (values: any) => {
+  getWeatherInfos(values)
+}
+</script>
+
+<template>
+  <div>
+    <n-popover placement="bottom" trigger="hover" raw :show-arrow="false">
+      <template #trigger>
+        <n-card class="card" :bordered="false">
+          <div class="card-content" v-for="(item, index) in weatherInfoValues.weatherInfo" :key="index">
+            <div class="weather-temp">{{ item?.casts[0]?.daytemp }}°C</div>
+            <div class="weather-city">{{ item?.city }}</div>
+            <div><img class="weather-img" :src="loadWeatherImg(item?.casts[0]?.dayweather)" /></div>
+            <div class="weather-speed">{{ item?.casts[0]?.daywind }}</div>
+            <div class="weather-speed-level">{{ loadWeatherLevel(item?.casts[0]?.daypower) }}</div>
+          </div>
+        </n-card>
+      </template>
+      <div class="popup-content">
+        <WeatherContent :data="weatherInfoValues.weatherInfo" @submit="onHandleSelectValues" />
+      </div>
+    </n-popover>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.popup-content {
+  width: 300px;
+  height: 300px;
+}
+.card {
+  width: v-bind('w+"px"');
+  height: v-bind('h+"px"');
+  background-color: v-bind('weatherCss.backgroundColor');
+  border-radius: v-bind('`${weatherCss.borderRadius}px`');
+  .card-content {
+    display: flex;
+    justify-content: space-between;
+    .weather-temp {
+      font-size: v-bind('`${weatherCss.temperatureTextSize}px`');
+      color: v-bind('weatherCss.temperatureTextColor');
+    }
+    .weather-city {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      word-break: break-all;
+      white-space: nowrap;
+      font-size: v-bind('`${weatherCss.cityTextSize}px`');
+      color: v-bind('weatherCss.cityTextColor');
+    }
+    .weather-img {
+      width: v-bind('`${weatherCss.weatherIconSizeWidth}px`');
+      height: v-bind('`${weatherCss.weatherIconSizeHeight}px`');
+    }
+    .weather-speed {
+      font-size: v-bind('`${weatherCss.airSpeedTextSize}px`');
+      color: v-bind('weatherCss.airSpeedTextColor');
+    }
+    .weather-speed-level {
+      font-size: v-bind('`${weatherCss.airSpeedLevelTextSize}px`');
+      color: v-bind('weatherCss.airSpeedLevelTextColor');
+    }
+    img {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+</style>

+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
+import { interactActions, ComponentInteractEventEnum } from './interact'
+import { OverrideInputsTabConfig } from './index'
+
+export const option = {
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+  // 默认值
+  tabLabel: '选项1',
+  // 样式
+  tabType: 'segment',
+  // 暴露配置内容给用户
+  dataset: [
+    {
+      label: '选项1',
+      value: '1'
+    },
+    {
+      label: '选项2',
+      value: '2'
+    },
+    {
+      label: '选项3',
+      value: '3'
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideInputsTabConfig.key
+  public attr = { ...chartInitConfig, w: 460, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(OverrideInputsTabConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="标签页配置" :expanded="true">
+    <setting-item-box name="默认值" :alone="true">
+      <n-select size="small" v-model:value="optionData.tabType" :options="tabTypeOptions" />
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const tabTypeOptions = [
+  {
+    label: '线条',
+    value: 'bar'
+  },
+  {
+    label: '分段',
+    value: 'segment'
+  }
+]
+</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('OverrideInputsTab', true)
+
+export const OverrideInputsTabConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义标签选择器',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'inputs_tab.png'
+}

+<template>
+  <n-tabs :type="option.value.tabType" @update:value="onChange">
+    <n-tab v-for="(item, index) in option.value.dataset" :name="item.label" :key="index"> {{ item.label }} </n-tab>
+  </n-tabs>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch, onMounted } from 'vue'
+import cloneDeep from 'lodash/cloneDeep'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartInteract } from '@/hooks/external/useChartInteract.hook'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { ComponentInteractParamsEnum } from './interact'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const option = shallowReactive({
+  value: cloneDeep(props.chartConfig.option)
+})
+
+// 监听事件改变
+const onChange = (v: string) => {
+  if (v === undefined) return
+  const selectItem = option.value.dataset.find((item: { label: string; value: any }) => item.label === v)
+  // 存储到联动数据
+  useChartInteract(
+    props.chartConfig,
+    useChartEditStore,
+    { [ComponentInteractParamsEnum.DATA]: selectItem.value },
+    InteractEventOn.CHANGE
+  )
+}
+
+/**新增代码 */
+onMounted(() => {
+  onChange(option.value.dataset[0].label)
+})
+/**新增代码 */
+
+// 手动更新
+watch(
+  () => props.chartConfig.option,
+  (newData: any) => {
+    option.value = newData
+    onChange(newData.tabValue)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>

+import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
+
+// 时间组件类型
+export enum ComponentInteractEventEnum {
+  DATA = 'data'
+}
+
+// 联动参数
+export enum ComponentInteractParamsEnum {
+  DATA = 'data'
+}
+
+// 定义组件触发回调事件
+export const interactActions: InteractActionsType[] = [
+  {
+    interactType: InteractEventOn.CHANGE,
+    interactName: '选择完成',
+    componentEmitEvents: {
+      [ComponentInteractEventEnum.DATA]: [
+        {
+          value: ComponentInteractParamsEnum.DATA,
+          label: '选择项'
+        }
+      ]
+    }
+  }
+]

@@ -86,7 +86,7 @@
 
 <script lang="ts" setup>
 import { PropType } from 'vue'
-import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { option } from './config'
 
 defineProps({

@@ -2,20 +2,24 @@ import { EPackagesCategoryEnum, EPackagesType } from '@/packages/components/exte
 import { ComposesList } from '@/packages/components/external/Composes'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ClockConfig } from '@/packages/components/external/Decorates/Mores/Icon'
+import { WeatherConfig } from '@/packages/components/external/Decorates/Mores/Weather'
 import { OverrideImageConfig } from '@/packages/components/external/Informations/Mores/OverrideImage'
 import { OverrideCarouselConfig } from '@/packages/components/external/Informations/Mores/OverrideCarousel'
 import { OverrideSelectConfig } from '@/packages/components/external/Informations/Mores/OverrideSelect'
 import { OverrideInputsDateConfig } from '@/packages/components/external/Informations/Mores/OverrideInputsDate'
+import { OverrideInputsTabConfig } from '@/packages/components/external/Informations/Mores/OverrideInputsTab'
 
 export function useInjectLib(packagesList: EPackagesType) {
 
   packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
 
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, ClockConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, WeatherConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideImageConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideCarouselConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideSelectConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsDateConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsTabConfig)
 }
 
 /**