Merge branch 'ft' into 'main_dev'

fix(src/packages): 图表地图 地图右侧配置回显省份选择城市选择

See merge request yunteng/thingskit-view!112

@@ -46,6 +46,7 @@ export const getPlatformInfo = () => defHttp.get({ url: Api.PLATFORM })
 export const getConfigurationList = (params: object) => {
 export const getConfigurationList = (params: object) => {
   return defHttp.get({ url: `${Api.CONFIGURATION}`, params })
   return defHttp.get({ url: `${Api.CONFIGURATION}`, params })
 }
 }
+
 //组态设置是否公开或私有
 //组态设置是否公开或私有
 export const setConfigurationIsShare = (params: string,isShare:boolean,data:object) => {
 export const setConfigurationIsShare = (params: string,isShare:boolean,data:object) => {
   return defHttp.post({
   return defHttp.post({
@@ -53,3 +54,15 @@ export const setConfigurationIsShare = (params: string,isShare:boolean,data:obje
     data
     data
   })
   })
 }
 }
+
+// 获取设备状态，在线 or 离线时间
+export const getDeviceActiveTime = (entityId: string) => {
+  return defHttp.get(
+    {
+      url: `/plugins/telemetry/DEVICE/${entityId}/values/attributes?keys=active`,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { OverrideMapAmapConfig } from './index'
+import { chartInitConfig } from '@/settings/designSetting'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export type dataExtraInfoType = typeof dataJson.markers[number]['extraInfo'] //data.json下的extraInfo类型
+
+export type dataJsonType = typeof dataJson //data.json类型
+
+export type dataJsonMarkersType = typeof dataJson.markers[number] //data.json markers类型
+
+export enum ThemeEnum {
+  NORMAL = 'normal',
+  DARK = 'dark',
+  LIGHT = 'light',
+  WHITES_MOKE = 'whitesmoke',
+  FRESH = 'fresh',
+  GREY = 'grey',
+  GRAFFITI = 'graffiti',
+  MACARON = 'macaron',
+  BLUE = 'blue',
+  DARKBLUE = 'darkblue',
+  WINE = 'wine',
+  WEIXIN = 'tileLayer'
+}
+
+export enum LangEnum {
+  ZH_CN = 'zh_cn',
+  EN = 'en',
+  ZH_EN = 'zh_en'
+}
+
+export enum ViewModeEnum {
+  PLANE = '2D',
+  STEREOSCOPIC = '3D'
+}
+
+export enum FeaturesEnum {
+  BG = 'bg',
+  POINT = 'point',
+  ROAD = 'road',
+  BUILDING = 'building'
+}
+
+export enum MarkerEnum {
+  // 圆圈
+  CIRCLE_MARKER = 'CircleMarker',
+  // 定位标点
+  MARKER = 'Marker',
+  // 暂无
+  NONE = 'none'
+}
+
+export const option = {
+  dataset: dataJson,
+  mapOptions: {
+    pitch: 60,
+    skyColor: '#53A9DE',
+    amapKey: 'd5f3e16589dbecae64d05fe90e2ba4f2',
+    amapStyleKey: ThemeEnum.DARK,
+    amapStyleKeyCustom: '',
+    amapLon: 104.108689,
+    amapLat: 30.66176,
+    amapZindex: 11,
+    marker: {
+      fillColor: '#E98984FF',
+      fillOpacity: 0.5,
+      strokeColor: 'white',
+      strokeWeight: 2,
+      strokeOpacity: 0.5,
+      zIndex: 10,
+      bubble: true,
+      cursor: 'pointer',
+      clickable: true
+    },
+    mapMarkerType: MarkerEnum.MARKER,
+    viewMode: ViewModeEnum.PLANE,
+    lang: LangEnum.ZH_CN,
+    features: [FeaturesEnum.BG, FeaturesEnum.POINT, FeaturesEnum.ROAD, FeaturesEnum.BUILDING]
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideMapAmapConfig.key
+  public attr = { ...chartInitConfig, w: 1000, h: 800, zIndex: -1 }
+  public chartConfig = cloneDeep(OverrideMapAmapConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="基础" :expanded="true">
+    <setting-item-box name="语言类型" :alone="true">
+      <setting-item>
+        <n-select size="small" v-model:value="optionData.mapOptions.lang" :options="langOptions" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="Key" :alone="true">
+      <setting-item name="请务必使用自己的高德应用 key">
+        <n-input v-model:value="optionData.mapOptions.amapKey" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="自定义地图样式ID" :alone="true">
+      <setting-item>
+        <n-input size="small" v-model:value="optionData.mapOptions.amapStyleKeyCustom" />
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+  <collapse-item name="地图" :expanded="true">
+    <setting-item-box name="主题">
+      <setting-item>
+        <n-select size="small" v-model:value="optionData.mapOptions.amapStyleKey" :options="themeOptions" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="内容" :alone="true">
+      <n-checkbox-group v-model:value="optionData.mapOptions.features">
+        <n-space item-style="display: flex;">
+          <n-checkbox :value="item.value" :label="item.label" v-for="(item, index) in featuresOptions" :key="index" />
+        </n-space>
+      </n-checkbox-group>
+    </setting-item-box>
+    <setting-item-box name="位置">
+      <setting-item name="经度">
+        <n-input-number v-model:value="optionData.mapOptions.amapLon" :show-button="false" size="small">
+          <template #suffix>°</template>
+        </n-input-number>
+      </setting-item>
+      <setting-item name="纬度">
+        <n-input-number v-model:value="optionData.mapOptions.amapLat" :show-button="false" size="small">
+          <template #suffix>°</template>
+        </n-input-number>
+      </setting-item>
+      <setting-item name="初始缩放">
+        <n-input-number v-model:value="optionData.mapOptions.amapZindex" :min="0" size="small"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="模式" :alone="true">
+      <setting-item>
+        <n-radio-group v-model:value="optionData.mapOptions.viewMode" name="radiogroup">
+          <n-space>
+            <n-radio v-for="song in viewModeOptions" :key="song.value" :value="song.value">
+              {{ song.label }}
+            </n-radio>
+          </n-space>
+        </n-radio-group>
+      </setting-item>
+    </setting-item-box>
+    <template v-if="optionData.mapOptions.viewMode === '3D'">
+      <setting-item-box>
+        <setting-item name="天空色">
+          <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.mapOptions.skyColor"></n-color-picker>
+        </setting-item>
+        <setting-item name="俯仰角">
+          <n-input-number v-model:value="optionData.mapOptions.pitch" :min="0" :max="83" size="small"></n-input-number>
+        </setting-item>
+      </setting-item-box>
+    </template>
+  </collapse-item>
+  <collapse-item name="标记" :expanded="true">
+    <setting-item-box name="样式">
+      <setting-item name="类型">
+        <n-select size="small" v-model:value="optionData.mapOptions.mapMarkerType" :options="MarkerOptions" />
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker v-model:value="optionData.mapOptions.marker.fillColor" size="small"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, FeaturesEnum } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const themeOptions = [
+  {
+    value: ThemeEnum.NORMAL,
+    label: '标准'
+  },
+  {
+    value: ThemeEnum.DARK,
+    label: '幻影黑'
+  },
+  {
+    value: ThemeEnum.LIGHT,
+    label: '月光银'
+  },
+  {
+    value: ThemeEnum.WHITES_MOKE,
+    label: '远山黛'
+  },
+  {
+    value: ThemeEnum.FRESH,
+    label: '草色青'
+  },
+  {
+    value: ThemeEnum.GREY,
+    label: '雅士灰'
+  },
+  {
+    value: ThemeEnum.GRAFFITI,
+    label: '涂鸦'
+  },
+  {
+    value: ThemeEnum.MACARON,
+    label: '马卡龙'
+  },
+  {
+    value: ThemeEnum.BLUE,
+    label: '靛青蓝'
+  },
+  {
+    value: ThemeEnum.DARKBLUE,
+    label: '极夜蓝'
+  },
+  {
+    value: ThemeEnum.WINE,
+    label: '酱籽'
+  },
+  {
+    value: ThemeEnum.WEIXIN,
+    label: '卫星'
+  }
+]
+
+const langOptions = [
+  {
+    value: LangEnum.ZH_CN,
+    label: '中文简体'
+  },
+  {
+    value: LangEnum.EN,
+    label: '英文'
+  },
+  {
+    value: LangEnum.ZH_EN,
+    label: '中英文对照'
+  }
+]
+
+const viewModeOptions = [
+  {
+    value: ViewModeEnum.PLANE,
+    label: '2D'
+  },
+  {
+    value: ViewModeEnum.STEREOSCOPIC,
+    label: '3D'
+  }
+]
+
+const featuresOptions = [
+  {
+    value: FeaturesEnum.BG,
+    label: '显示地图背景'
+  },
+  {
+    value: FeaturesEnum.POINT,
+    label: '显示标识'
+  },
+  {
+    value: FeaturesEnum.ROAD,
+    label: '显示道路'
+  },
+  {
+    value: FeaturesEnum.BUILDING,
+    label: '显示建筑'
+  }
+]
+
+const MarkerOptions = [
+  {
+    value: MarkerEnum.CIRCLE_MARKER,
+    label: '圆形标点'
+  },
+  {
+    value: MarkerEnum.MARKER,
+    label: '定位标点'
+  },
+  {
+    value: MarkerEnum.NONE,
+    label: '隐藏标点'
+  }
+]
+</script>

+{
+  "markers": [
+    {
+      "name": "模拟11111111111",
+      "value": 20,
+      "position": [103.856504, 30.687278],
+      "extraInfo": {
+        "tbDeviceId": "@xxxxxxxxxxx",
+        "name": "模拟11111111111",
+        "alias": "模拟11111111111",
+        "organizationDTO": {
+          "name": "模拟11111111111"
+        },
+        "deviceState": "INACTIVE",
+        "deviceProfile": {
+          "transportType": "MQTT"
+        },
+        "deviceInfo": {
+          "address": "四川省",
+          "longitude": 103.856504,
+          "latitude": 30.687278
+        }
+      }
+    },
+    {
+      "name": "模拟22222222222",
+      "value": 30,
+      "position": [104.095368, 30.716787],
+      "extraInfo": {
+        "tbDeviceId": "@xxxxxxxxxxxxxxx",
+        "name": "模拟22222222222",
+        "alias": "模拟22222222222",
+        "organizationDTO": {
+          "name": "模拟22222222222"
+        },
+        "deviceState": "INACTIVE",
+        "deviceProfile": {
+          "transportType": "TCP"
+        },
+        "deviceInfo": {
+          "address": "四川省",
+          "longitude": 104.095368,
+          "latitude": 30.716787
+        }
+      }
+    }
+  ]
+}

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Charts/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideMapAmap', true)
+
+export const OverrideMapAmapConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '高德地图',
+  category: ChatCategoryEnum.MAP,
+  categoryName: ChatCategoryEnumName.MAP,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'map_amap.png'
+}

+<template>
+  <div ref="vChartRef"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, PropType, toRefs, watch } from 'vue'
+import AMapLoader from '@amap/amap-jsapi-loader'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { MarkerEnum, ThemeEnum, dataExtraInfoType, dataJsonType, dataJsonMarkersType } from './config'
+import { isArray } from '@/utils'
+import djh from './images/djh.png'
+import online from './images/online.png'
+import lx1 from './images/lx1.png'
+import { getDeviceActiveTime } from '@/api/external/common/index'
+import dayjs from 'dayjs'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+let {
+  amapKey,
+  amapStyleKey,
+  amapLon,
+  amapLat,
+  amapZindex,
+  mapMarkerType,
+  lang,
+  amapStyleKeyCustom,
+  features,
+  viewMode,
+  pitch,
+  skyColor,
+  marker
+} = toRefs(props.chartConfig.option.mapOptions)
+
+//官方没有高德地图api的ts，所以类型全用的any
+let mapIns: any = null
+let markers: any = []
+let AMapIns: any = null
+const vChartRef = ref<HTMLElement>()
+
+const initMap = (newData: any) => {
+  // 初始化
+  AMapLoader.load({
+    key: amapKey.value, //api服务key--另外需要在public中使用安全密钥！！！
+    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表
+  })
+    .then(AMap => {
+      AMapIns = AMap
+      mapIns = new AMap.Map(vChartRef.value, {
+        resizeEnable: true,
+        zoom: amapZindex.value, // 地图显示的缩放级别
+        center: [amapLon.value, amapLat.value],
+        lang: lang.value,
+        features: features.value,
+        pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
+        skyColor: skyColor.value,
+        viewMode: viewMode.value, // 地图模式
+        willReadFrequently: true
+      })
+      dataHandle(props.chartConfig.option.dataset) //处理地图标点
+      let satellite = new AMap.TileLayer.Satellite()
+      let roadNet = new AMap.TileLayer.RoadNet()
+      if (newData.amapStyleKey === ThemeEnum.WEIXIN) {
+        mapIns.add([satellite, roadNet])
+      } else {
+        mapIns.remove([satellite, roadNet])
+        mapIns.setMapStyle(
+          `amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`
+        )
+      }
+      //点击地图任意地方关闭infoWindow窗体
+      mapIns.on('click', () => {
+        mapIns.clearInfoWindow()
+      })
+    })
+    .catch(e => {
+      console.error(e)
+    })
+}
+
+//创建信息弹窗
+const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
+  try {
+    const { name, alias, organizationDTO, deviceState, deviceProfile, deviceInfo, tbDeviceId } = extraInfo
+    if (tbDeviceId.startsWith('@')) return //假的模拟数据则终止
+    const res = await getDeviceActiveTime(tbDeviceId) //查询设备最后离线时间
+    let { lastUpdateTs } = res[0]
+    const lastUpdateFormatTs = dayjs(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss')
+    return `
+        <div style="width:15vw;height:18vh;background-color:white;">
+         <div style="margin:0px 10px">
+          <div style="display:flex;justify-content:space-between; margin:20px 0px;">
+            <div style="font-size:16px;font-weight:bold">${alias || name}</div>
+            ${
+              deviceState === 'INACTIVE'
+                ? `<div style="display:flex;align-items:center;"><img style="width:15px;height:15px" src="${djh}" class="mr-1">待激活</div>`
+                : deviceState === 'ONLINE'
+                ? `<div style="display:flex;align-items:center; ">
+                <img style="width:15px;height:15px"  src="${online}"  class="mr-1">在线</div>`
+                : `<div style="display:flex;align-items:center;"><img style="width:15px;height:15px" src="${lx1}" class="mr-1">离线</div>`
+            }
+          </div>
+          <div>所属组织：${organizationDTO.name}</div>
+          <div style="margin-top:6px;">接入协议：${deviceProfile.transportType}</div>
+          <div style="margin-top:6px;">
+            设备位置：${!deviceInfo.address ? '该设备暂无地理位置' : deviceInfo.address}
+          </div>
+          <div style="margin-top:6px;">
+            ${
+              deviceState === 'ONLINE' ? '在线' : deviceState === 'INACTIVE' ? '创建' : '离线'
+            }时间：${lastUpdateFormatTs}
+            </div>
+            </div>
+          </div>
+          `
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+//地图点击
+const mapClick = (markerInstance: any, markerItem: dataJsonMarkersType) => {
+  markerInstance.setExtData({
+    extraInfo: markerItem.extraInfo
+  })
+  markerInstance.setLabel({
+    content: markerItem.extraInfo.alias || markerItem.extraInfo.name
+  })
+  markerInstance.on('click', async (e: any) => {
+    const { extraInfo } = e.target.getExtData()
+    let infoWindow = new AMapIns.InfoWindow({
+      content: await createInfoWindow(extraInfo),
+      offset: new AMapIns.Pixel(0, -50)
+    })
+    infoWindow.open(mapIns, e.target.getPosition())
+  })
+}
+
+const dataHandle = (newData: dataJsonType) => {
+  if (!mapIns && !AMapIns) {
+    initMap(props.chartConfig.option)
+    return
+  }
+  if (isArray(newData.markers)) {
+    // 先清除旧标记
+    mapIns.remove(markers)
+    markers = []
+    // 记录新标记
+    if (mapMarkerType.value === MarkerEnum.MARKER) {
+      newData.markers.forEach((markerItem: dataJsonMarkersType) => {
+        const markerInstance = new AMapIns.Marker({
+          position: [markerItem.position[0], markerItem.position[1]],
+          offset: new AMapIns.Pixel(-13, -30)
+        })
+        // markers.push(markerInstance) 原作者这种方式添加，属于JS API 1.4.8版本的
+        // markerInstance.setMap(mapIns)
+        mapIns.add(markerInstance)
+        mapClick(markerInstance, markerItem)
+      })
+    } else if (mapMarkerType.value === MarkerEnum.CIRCLE_MARKER) {
+      newData.markers.forEach((markerItem: dataJsonMarkersType) => {
+        const markerInstance = new AMapIns.CircleMarker({
+          center: [
+            !markerItem.position[0] ? 0 : markerItem.position[0],
+            !markerItem.position[1] ? 0 : markerItem.position[1]
+          ],
+          radius: markerItem.value, //圆圈半径大小
+          ...marker.value
+        })
+        // markers.push(markerInstance) //原作者这种方式添加，属于JS API 1.4.8版本的
+        // markerInstance.setMap(mapIns)
+        mapIns.add(markerInstance)
+        mapClick(markerInstance, markerItem)
+      })
+    }
+  }
+}
+
+const stopWatch = watch(
+  () => props.chartConfig.option.mapOptions,
+  option => {
+    initMap(option)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+// 预览
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  stopWatch()
+  dataHandle(newData)
+})
+</script>

@@ -4,9 +4,12 @@ import { getAreaList } from '@/api/external/common/index'
 import { areaEnum } from '../config'
 import { areaEnum } from '../config'
 
 
 const props = defineProps({
 const props = defineProps({
-  drillingIn:{
-    type:Boolean,
-    default:false
+  drillingIn: {
+    type: Boolean,
+    default: false
+  },
+  optionData: {
+    type: Object
   }
   }
 })
 })
 
 
@@ -39,6 +42,8 @@ onMounted(async () => {
     label: '中国',
     label: '中国',
     value: 'china'
     value: 'china'
   })
   })
+  onHandleSelectProvince(props.optionData?.mapRegion.saveSelect['provinceValue'])
+  for (let i in selectValues) Reflect.set(selectValues, i, props.optionData?.mapRegion.saveSelect[i])
 })
 })
 
 
 const onHandleSelectProvince = async (value: number | string) => {
 const onHandleSelectProvince = async (value: number | string) => {

@@ -22,7 +22,8 @@ export const option = {
   dataset: dataJson,
   dataset: dataJson,
   mapRegion: {
   mapRegion: {
     adcode: 'china',
     adcode: 'china',
-    showHainanIsLands: true
+    showHainanIsLands: true,
+    saveSelect:{}
   },
   },
   tooltip: {
   tooltip: {
     show: true,
     show: true,

@@ -39,7 +39,7 @@
         ></n-input-number>
         ></n-input-number>
       </SettingItem>
       </SettingItem>
     </SettingItemBox>
     </SettingItemBox>
-    <SelectCity :drillingIn="optionData.drillingIn" @submit="onHandleSelectValues" />
+    <SelectCity :optionData="optionData" :drillingIn="optionData.drillingIn" @submit="onHandleSelectValues" />
     <SettingItemBox name="区域颜色">
     <SettingItemBox name="区域颜色">
       <SettingItem name="0%处颜色">
       <SettingItem name="0%处颜色">
         <n-color-picker
         <n-color-picker
@@ -300,6 +300,7 @@ const mapRegion = computed(() => {
 
 
 const onHandleSelectValues = (values: any) => {
 const onHandleSelectValues = (values: any) => {
   const { cityValue, countyValue, provinceValue } = values
   const { cityValue, countyValue, provinceValue } = values
+  props.optionData.mapRegion.saveSelect = values
   props.optionData.mapRegion.adcode = countyValue
   props.optionData.mapRegion.adcode = countyValue
     ? countyValue
     ? countyValue
     : cityValue
     : cityValue

@@ -13,7 +13,7 @@ export const option = {
   // 下拉展示
   // 下拉展示
   isPanel: 0,
   isPanel: 0,
   // 默认值
   // 默认值
-  dataset: dayjs().valueOf() as number | number[] | null,
+  dataset: [new Date().getTime() - 86400000,new Date().getTime()],
   // 默认值类型
   // 默认值类型
   defaultType: DefaultTypeEnum.STATIC,
   defaultType: DefaultTypeEnum.STATIC,
   // 动态默认值偏移单位
   // 动态默认值偏移单位

@@ -224,5 +224,5 @@ const shortCutSelect = (value: number) => {
   const endTs = Date.now()
   const endTs = Date.now()
   props.optionData.dataset = [startTs, endTs] as any
   props.optionData.dataset = [startTs, endTs] as any
 }
 }
-shortCutSelect(24*60*60*1000)//默认近1天
+// shortCutSelect(24*60*60*1000)//默认近1天
 </script>
 </script>

@@ -5,20 +5,21 @@
     :panel="!!chartConfig.option.isPanel"
     :panel="!!chartConfig.option.isPanel"
     :type="chartConfig.option.componentInteractEventKey"
     :type="chartConfig.option.componentInteractEventKey"
     :style="`width:${w}px;`"
     :style="`width:${w}px;`"
-    :to="false"
+    :to="true"
     @update:value="onChange"
     @update:value="onChange"
+    :shortcuts="rangeShortcuts"
   />
   />
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
-import { PropType, toRefs, shallowReactive, watch ,ref,computed} from 'vue'
-import dayjs, {ManipulateType} from 'dayjs'
+import { PropType, toRefs, shallowReactive, watch, ref, computed } from 'vue'
+import dayjs, { ManipulateType } from 'dayjs'
 import { CreateComponentType } from '@/packages/index.d'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartInteract } from '@/hooks/external/useChartDateInteract.hook'
 import { useChartInteract } from '@/hooks/external/useChartDateInteract.hook'
 import { InteractEventOn } from '@/enums/eventEnum'
 import { InteractEventOn } from '@/enums/eventEnum'
-import {ComponentInteractEventEnum, ComponentInteractParamsEnum, DefaultTypeEnum} from './interact'
-import quarterOfYear from 'dayjs/plugin/quarterOfYear';
+import { ComponentInteractEventEnum, ComponentInteractParamsEnum, DefaultTypeEnum } from './interact'
+import quarterOfYear from 'dayjs/plugin/quarterOfYear'
 
 
 const props = defineProps({
 const props = defineProps({
   chartConfig: {
   chartConfig: {
@@ -28,8 +29,24 @@ const props = defineProps({
 })
 })
 
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const { w, h } = toRefs(props.chartConfig.attr)
+
 const rangeDate = ref<number | number[]>()
 const rangeDate = ref<number | number[]>()
 
 
+const rangeShortcuts = {
+  昨天: () => {
+    const cur = new Date().getTime()
+    return [cur - 86400000, cur] as const
+  },
+  最近7天: () => {
+    const cur = new Date().getTime()
+    return [cur - 604800000, cur] as const
+  },
+  最近30天: () => {
+    const cur = new Date().getTime()
+    return [cur - 2592000000, cur] as const
+  }
+}
+
 const option = shallowReactive({
 const option = shallowReactive({
   dataset: props.chartConfig.option.dataset
   dataset: props.chartConfig.option.dataset
 })
 })
@@ -38,36 +55,35 @@ const isRange = computed(() => {
   return props.chartConfig.option.componentInteractEventKey.endsWith('range')
   return props.chartConfig.option.componentInteractEventKey.endsWith('range')
 })
 })
 
 
-
 // 监听事件改变
 // 监听事件改变
 const onChange = (v: number | number[] | null) => {
 const onChange = (v: number | number[] | null) => {
   if (isRange.value) {
   if (isRange.value) {
     let dateStart = null
     let dateStart = null
     let dateEnd = null
     let dateEnd = null
     let daterange = null
     let daterange = null
-    if(v instanceof Array){
+    if (v instanceof Array) {
       dateStart = v[0]
       dateStart = v[0]
       dateEnd = v[1]
       dateEnd = v[1]
       daterange = `${v[0]}-${v[1]}`
       daterange = `${v[0]}-${v[1]}`
     }
     }
     // 存储到联动数据
     // 存储到联动数据
     useChartInteract(
     useChartInteract(
-        props.chartConfig,
-        useChartEditStore,
-        {
-          [ComponentInteractParamsEnum.DATE_START]: dateStart,
-          [ComponentInteractParamsEnum.DATE_END]: dateEnd,
-          [ComponentInteractParamsEnum.DATE_RANGE]: daterange
-        },
-        InteractEventOn.CHANGE
+      props.chartConfig,
+      useChartEditStore,
+      {
+        [ComponentInteractParamsEnum.DATE_START]: dateStart,
+        [ComponentInteractParamsEnum.DATE_END]: dateEnd,
+        [ComponentInteractParamsEnum.DATE_RANGE]: daterange
+      },
+      InteractEventOn.CHANGE
     )
     )
   } else {
   } else {
     // 存储到联动数据
     // 存储到联动数据
     useChartInteract(
     useChartInteract(
-        props.chartConfig,
-        useChartEditStore,
-        { [ComponentInteractParamsEnum.DATE]: v },
-        InteractEventOn.CHANGE
+      props.chartConfig,
+      useChartEditStore,
+      { [ComponentInteractParamsEnum.DATE]: v },
+      InteractEventOn.CHANGE
     )
     )
   }
   }
 }
 }
@@ -87,7 +103,7 @@ const getDiffDate = (type: ComponentInteractEventEnum, date: dayjs.Dayjs) => {
     case ComponentInteractEventEnum.YEAR:
     case ComponentInteractEventEnum.YEAR:
     case ComponentInteractEventEnum.YEAR_RANGE:
     case ComponentInteractEventEnum.YEAR_RANGE:
       date = date.startOf('year')
       date = date.startOf('year')
-        break
+      break
     case ComponentInteractEventEnum.QUARTER:
     case ComponentInteractEventEnum.QUARTER:
     case ComponentInteractEventEnum.QUARTER_RANGE:
     case ComponentInteractEventEnum.QUARTER_RANGE:
       date = date.startOf('quarter')
       date = date.startOf('quarter')
@@ -99,48 +115,50 @@ const getDiffDate = (type: ComponentInteractEventEnum, date: dayjs.Dayjs) => {
 }
 }
 
 
 watch(
 watch(
-    () => {
-      return {
-        type: props.chartConfig.option.componentInteractEventKey as ComponentInteractEventEnum,
-        defaultType: props.chartConfig.option.defaultType as string,
-        differValue: props.chartConfig.option.differValue as number[],
-        differUnit: props.chartConfig.option.differUnit as ManipulateType[],
-        dataset: props.chartConfig.option.dataset as number | number[] | null,
-      };
-    },
-    (newData, oldData) => {
-      const hasTypeChanged = newData.type !== oldData?.type;
-      const hasDefaultTypeChanged = newData.defaultType !== oldData?.defaultType;
-      const hasDifferValueChanged = newData.differValue !== oldData?.differValue;
-      const hasDifferUnitChanged = newData.differUnit !== oldData?.differUnit;
+  () => {
+    return {
+      type: props.chartConfig.option.componentInteractEventKey as ComponentInteractEventEnum,
+      defaultType: props.chartConfig.option.defaultType as string,
+      differValue: props.chartConfig.option.differValue as number[],
+      differUnit: props.chartConfig.option.differUnit as ManipulateType[],
+      dataset: props.chartConfig.option.dataset as number | number[] | null
+    }
+  },
+  (newData, oldData) => {
+    const hasTypeChanged = newData.type !== oldData?.type
+    const hasDefaultTypeChanged = newData.defaultType !== oldData?.defaultType
+    const hasDifferValueChanged = newData.differValue !== oldData?.differValue
+    const hasDifferUnitChanged = newData.differUnit !== oldData?.differUnit
 
 
-      if (hasTypeChanged || hasDefaultTypeChanged || hasDifferValueChanged || hasDifferUnitChanged) {
-        if (newData.defaultType === DefaultTypeEnum.NONE) {
-          props.chartConfig.option.dataset = null;
-        } else if (newData.defaultType === DefaultTypeEnum.DYNAMIC) {
-          let date = dayjs();
-          if (isRange.value) {
-            props.chartConfig.option.dataset = [
-             getDiffDate(newData.type,date.add(newData.differValue[0], newData.differUnit[0])).valueOf(),
-             getDiffDate(newData.type,date.add(newData.differValue[1], newData.differUnit[1])).valueOf(),
-            ];
-          } else {
-            props.chartConfig.option.dataset = getDiffDate(newData.type,date.add(newData.differValue[0], newData.differUnit[0])).valueOf()
-          }
+    if (hasTypeChanged || hasDefaultTypeChanged || hasDifferValueChanged || hasDifferUnitChanged) {
+      if (newData.defaultType === DefaultTypeEnum.NONE) {
+        props.chartConfig.option.dataset = null
+      } else if (newData.defaultType === DefaultTypeEnum.DYNAMIC) {
+        let date = dayjs()
+        if (isRange.value) {
+          props.chartConfig.option.dataset = [
+            getDiffDate(newData.type, date.add(newData.differValue[0], newData.differUnit[0])).valueOf(),
+            getDiffDate(newData.type, date.add(newData.differValue[1], newData.differUnit[1])).valueOf()
+          ]
+        } else {
+          props.chartConfig.option.dataset = getDiffDate(
+            newData.type,
+            date.add(newData.differValue[0], newData.differUnit[0])
+          ).valueOf()
         }
         }
       }
       }
-      option.dataset = props.chartConfig.option.dataset;
-      onChange(option.dataset);
-    },
-    {
-      immediate: true,
     }
     }
-);
-
+    option.dataset = props.chartConfig.option.dataset
+    onChange(option.dataset)
+  },
+  {
+    immediate: true
+  }
+)
 
 
 watch(
 watch(
   () => props.chartConfig.option.shortcut,
   () => props.chartConfig.option.shortcut,
-  (newData) => {
+  newData => {
     if (!newData) return
     if (!newData) return
     const startTs = Date.now() - newData
     const startTs = Date.now() - newData
     const endTs = Date.now()
     const endTs = Date.now()
@@ -153,7 +171,6 @@ watch(
 )
 )
 </script>
 </script>
 
 
-
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 @include deep() {
 @include deep() {
   .n-input {
   .n-input {
@@ -162,4 +179,4 @@ watch(
     align-items: center;
     align-items: center;
   }
   }
 }
 }
-</style>
+</style>

@@ -21,6 +21,7 @@ import { OverrideLineGradientsConfig } from '@/packages/components/external/Char
 import { OverrideProcessConfig } from '@/packages/components/external/Charts/Mores/OverrideProcess'
 import { OverrideProcessConfig } from '@/packages/components/external/Charts/Mores/OverrideProcess'
 import { OverridePieCircleConfig } from '@/packages/components/external/Charts/Pies/OverridePieCircle'
 import { OverridePieCircleConfig } from '@/packages/components/external/Charts/Pies/OverridePieCircle'
 import { OverrideMapBaseConfig } from '@/packages/components/external/Charts/Maps/OverrideMapBase'
 import { OverrideMapBaseConfig } from '@/packages/components/external/Charts/Maps/OverrideMapBase'
+import { OverrideMapAmapConfig } from '@/packages/components/external/Charts/Maps/OverrideMapAmap'
 import { OverrideVideoConfig } from '@/packages/components/external/Informations/Mores/OverrideVideo'
 import { OverrideVideoConfig } from '@/packages/components/external/Informations/Mores/OverrideVideo'
 import { OverrideWaterPoloConfig } from '@/packages/components/external/Charts/Mores/OverrideWaterPolo'
 import { OverrideWaterPoloConfig } from '@/packages/components/external/Charts/Mores/OverrideWaterPolo'
 import { OverrideDialConfig } from '@/packages/components/external/Charts/Mores/OverrideDial'
 import { OverrideDialConfig } from '@/packages/components/external/Charts/Mores/OverrideDial'
@@ -104,6 +105,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideProcessConfig)//重写图表下的native ui
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideProcessConfig)//重写图表下的native ui
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverridePieCircleConfig)//重写图表下的饼图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverridePieCircleConfig)//重写图表下的饼图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideMapBaseConfig)//重写图表下的地图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideMapBaseConfig)//重写图表下的地图
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideMapAmapConfig)//重写图表下的高德地图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideWaterPoloConfig)//重写图表下的水球图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideWaterPoloConfig)//重写图表下的水球图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideDialConfig)//重写图表下的表盘
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideDialConfig)//重写图表下的表盘
   //
   //

@@ -16,7 +16,8 @@ export const hideAsideComponentsObj = {
     'VPieCircle' //饼图-环形
     'VPieCircle' //饼图-环形
   ],
   ],
   Maps: [
   Maps: [
-    'VMapBase' //地图(可选省份)
+    'VMapBase', //地图(可选省份)
+    'VMapAmap', //高德地图
   ],
   ],
   Mores: [
   Mores: [
     'VProcess', //NaiveUI-进度
     'VProcess', //NaiveUI-进度
@@ -45,6 +46,7 @@ export const hideAsideComponentsObj = {
     'VLineGradients', //双折线渐变面积图
     'VLineGradients', //双折线渐变面积图
     'VPieCircle', //饼图-环形
     'VPieCircle', //饼图-环形
     'VMapBase', //地图(可选省份)
     'VMapBase', //地图(可选省份)
+    'VMapAmap',//高德地图
     'VProcess', //NaiveUI-进度
     'VProcess', //NaiveUI-进度
     'VTextGradient', //渐变文字
     'VTextGradient', //渐变文字
     'VTextBarrage', //弹幕文字
     'VTextBarrage', //弹幕文字

+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { canvasCut, downloadTextFile, JSONStringify } from '@/utils'
+const chartEditStore = useChartEditStore()
+
+// 导出
+export const exportHandle = () => {
+  // 取消选中
+  chartEditStore.setTargetSelectChart(undefined)
+
+  // 导出数据
+  downloadTextFile(
+    JSONStringify(chartEditStore.getStorageInfo || []),
+    undefined,
+    'json'
+  )
+
+  // 导出图片
+  const range = document.querySelector('.go-edit-range') as HTMLElement
+  const watermark = document.getElementById('go-edit-watermark')
+  // 隐藏边距线
+  if (!range || !watermark) {
+    window['$message'].error('导出失败！')
+    return
+  }
+
+  // 记录缩放比例
+  const scaleTemp = chartEditStore.getEditCanvas.scale
+  // 百分百展示页面
+  chartEditStore.setScale(1, true)
+  // 展示水印
+  // THINGS_KIT 隐藏水印
+  watermark.style.display = 'none'
+
+  //注释导出图片逻辑
+  // setTimeout(() => {
+  //   canvasCut(range, () => {
+  //     // 隐藏水印
+  //     if (watermark) watermark.style.display = 'none'
+  //     // 还原页面大小
+  //     chartEditStore.setScale(scaleTemp, true)
+  //   })
+  // }, 600)
+}

@@ -78,7 +78,7 @@ import { EditEnum } from '@/enums/pageEnum'
 import { StorageEnum } from '@/enums/storageEnum'
 import { StorageEnum } from '@/enums/storageEnum'
 import { useRoute } from 'vue-router'
 import { useRoute } from 'vue-router'
 import { GoSystemSet } from '@/components/GoSystemSet/index'
 import { GoSystemSet } from '@/components/GoSystemSet/index'
-import { exportHandle } from './utils'
+import { exportHandle } from './external'// THINGS_KIT 修改引入路径 
 import { useFile } from './hooks/useFile.hooks'
 import { useFile } from './hooks/useFile.hooks'
 import { useSyncUpdate } from './hooks/useSyncUpdate.hook'
 import { useSyncUpdate } from './hooks/useSyncUpdate.hook'
 import { BtnListType, TypeEnum } from './index.d'
 import { BtnListType, TypeEnum } from './index.d'