perf(external/Composes): 小组件下新增天气

@@ -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
+  })
+}

+<script lang="ts" setup>
+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>
+import { toRefs } from 'vue'
+import SelectCity from './SelectCity.vue'
+import { weatherTextMapImg } from '../config'
+
+const props = defineProps({
+  data: {
+    type: Array as any
+  }
+})
+
+const emits = defineEmits(['submit'])
+
+const { casts } = toRefs(props.data[0])
+
+const onHandleSelectValues = (values: any) => {
+  emits('submit', values)
+}
+
+//根据返回的文字加载不同天气图片
+const loadWeatherImg = (text: string) => {
+  return (
+    weatherTextMapImg.find((item: any) => item.text === text)?.img ||
+    '/large-designer/src/assets/external/weather/clearDay.png'
+  )
+}
+</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>
+      </div>
+      <template #footer>
+        <div v-for="(item, index) in casts?.slice(0, 3)" :key="index" class="footer-content">
+          <div>{{ index === 0 ? '今天' : index === 1 ? '明天' : '后天' }}</div>
+          <div>
+            <img :src="loadWeatherImg(item?.dayweather)" />
+          </div>
+          <div>{{ item?.daytemp }}/{{ item?.nighttemp }}</div>
+          <div>{{ item?.daywind }}</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 {
+    width: 100%;
+    @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 {
+    width: 100%;
+    @extend %flex-style;
+    gap: 30px;
+    margin-left: 5px;
+    div {
+      flex: 1;
+      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 const thirdPartyWeatherKey = `0551a87b45e0363ae6c7a2242e8ac944`
+export const thirdPartyWeatherApi = `https://restapi.amap.com/v3/weather/weatherInfo`
+
+//省市区枚举
+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 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',
+    backgroundColor: 'transparent',
+    borderRadius: '5'
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = WeatherConfig.key
+  public attr = { ...chartInitConfig, zIndex: 1, w: 181, h: 44 }
+  public chartConfig = cloneDeep(WeatherConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <CollapseItem name="天气配置" :expanded="true">
+    <SettingItemBox name="区域选择">
+      <SelectCity @submit="onHandleSelectValues" />
+    </SettingItemBox>
+    <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>
+  </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 { 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>
+import { PropType, toRefs, onMounted, reactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { option, thirdPartyWeatherKey, thirdPartyWeatherApi, weatherTextMapImg } from './config'
+import axios from 'axios'
+import WeatherContent from './componnets/WeatherContent.vue'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & { option: typeof option }>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const {
+  temperatureTextSize,
+  temperatureTextColor,
+  cityTextSize,
+  cityTextColor,
+  weatherIconSizeWidth,
+  weatherIconSizeHeight,
+  airSpeedTextSize,
+  airSpeedTextColor,
+  backgroundColor,
+  borderRadius
+} = toRefs(props.chartConfig.option.weatherCss)
+
+const weatherInfoValues: any = reactive({
+  weatherInfo: []
+})
+
+//获取第三方服务（高德天气）
+const getWeatherInfos = async (cityObj: any, extensions = 'all') => {
+  const { cityValue, countyValue } = cityObj || props.chartConfig.option.dataset
+  const params = {
+    key: thirdPartyWeatherKey,
+    city: !countyValue ? cityValue : countyValue,
+    extensions
+  } as any
+  const {
+    data: { forecasts }
+  } = await axios.get(thirdPartyWeatherApi, { 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)
+}
+
+//根据返回的文字加载不同天气图片
+const loadWeatherImg = (text: string) => {
+  return (
+    weatherTextMapImg.find((item: any) => item.text === text)?.img ||
+    '/large-designer/src/assets/external/weather/clearDay.png'
+  )
+}
+</script>
+
+<template>
+  <div>
+    <n-popover placement="bottom" trigger="hover" raw :show-arrow="false">
+      <template #trigger>
+        <n-card
+          class="card"
+          :bordered="false"
+          :style="`background-color:${backgroundColor};border-radius:${borderRadius}px;`"
+        >
+          <div class="card-content" v-for="(item, index) in weatherInfoValues.weatherInfo" :key="index">
+            <div :style="`font-size:${temperatureTextSize}px;color:${temperatureTextColor};`">
+              {{ item?.casts[0]?.daytemp }}°C
+            </div>
+            <div class="card-content-city-text" :style="`font-size:${cityTextSize}px;color:${cityTextColor};`">
+              {{ item?.city }}
+            </div>
+            <div>
+              <img
+                :style="`width:${weatherIconSizeWidth}px;height:${weatherIconSizeHeight}px;`"
+                :src="loadWeatherImg(item?.casts[0]?.dayweather)"
+              />
+            </div>
+            <div :style="`font-size:${airSpeedTextSize}px;color:${airSpeedTextColor};`">
+              {{ item?.casts[0]?.daywind }}
+            </div>
+          </div>
+        </n-card>
+      </template>
+      <div :style="`width:${300}px;height:${300}px;`">
+        <WeatherContent :data="weatherInfoValues.weatherInfo" @submit="onHandleSelectValues" />
+      </div>
+    </n-popover>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.card {
+  width: v-bind('w+"px"');
+  height: v-bind('h+"px"');
+  .card-content {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    img {
+      width: 24px;
+      height: 24px;
+    }
+    .card-content-city-text {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      word-break: break-all;
+      white-space: nowrap;
+    }
+  }
+}
+</style>

@@ -2,6 +2,7 @@ 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'
@@ -12,6 +13,7 @@ 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)