简柏林 / thingskit-view · Commits

Commit 64edde27db82feef61e29b54dc0e5f45a9e79777

Authored by fengwotao
1 parent 67e296ba

feat(src/packages): 优化高德地图标点弹窗和数据展示

Inline Side-by-side
Showing 4 changed files with 68 additions and 68 deletions
@@ -235,6 +235,7 @@ const updateVChart = async (newData: SocketReceiveMessageType) => { @@ -235,6 +235,7 @@ const updateVChart = async (newData: SocketReceiveMessageType) => {
235 } 235 }
236 236
237 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any, targetComponent: any) => { 237 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any, targetComponent: any) => {
  238 + props.chartConfig.option.queryCondition.timeRange=[targetComponent.requestParams.Params.startTs,targetComponent.requestParams.Params.endTs]
238 //联动支持分组 239 //联动支持分组
239 /** 240 /**
240 * 修复多个分组，然后下拉框联动，会影响另一个组件 241 * 修复多个分组，然后下拉框联动，会影响另一个组件
@@ -90,9 +90,7 @@ export const option = { @@ -90,9 +90,7 @@ export const option = {
90 amapZindex: 11, 90 amapZindex: 11,
91 typeMarker: '', 91 typeMarker: '',
92 mpBorderConfig: { 92 mpBorderConfig: {
93 - label: '弹窗边框1',  
94 value: 'Border01', 93 value: 'Border01',
95 - config: 'Border01'  
96 }, 94 },
97 marker: { 95 marker: {
98 fillColor: '#E98984FF', 96 fillColor: '#E98984FF',
@@ -92,7 +92,7 @@ @@ -92,7 +92,7 @@
92 </setting-item-box> 92 </setting-item-box>
93 <setting-item-box name="弹窗选择" v-if="optionData.mapOptions.mapMarkerType === MarkerEnum.MARKER"> 93 <setting-item-box name="弹窗选择" v-if="optionData.mapOptions.mapMarkerType === MarkerEnum.MARKER">
94 <setting-item name="弹窗选择"> 94 <setting-item name="弹窗选择">
95 - <NSelect 95 + <!-- <NSelect
96 size="small" 96 size="small"
97 placeholder="请选择您要使用的弹窗" 97 placeholder="请选择您要使用的弹窗"
98 style="width: 250px" 98 style="width: 250px"
@@ -101,6 +101,17 @@ @@ -101,6 +101,17 @@
101 @update:value="mapSelectBorderHandle" 101 @update:value="mapSelectBorderHandle"
102 clearable 102 clearable
103 filterable 103 filterable
  104 + /> -->
  105 + <NSelect
  106 + size="small"
  107 + placeholder="请选择您要使用的弹窗"
  108 + style="width: 250px"
  109 + :value="mapSelectBorderValue"
  110 + :options="mapBorderOptions"
  111 + :render-label="renderMapBorderOption"
  112 + clearable
  113 + filterable
  114 + @update:value="selectMapBorderHandle"
104 /> 115 />
105 </setting-item> 116 </setting-item>
106 </setting-item-box> 117 </setting-item-box>
@@ -238,74 +249,13 @@ const MarkerOptions = [ @@ -238,74 +249,13 @@ const MarkerOptions = [
238 onMounted(() => { 249 onMounted(() => {
239 props.optionData.mapOptions.typeMarker = getMarkerImagePath(props.optionData.mapOptions.typeMarker || 'position1.png') 250 props.optionData.mapOptions.typeMarker = getMarkerImagePath(props.optionData.mapOptions.typeMarker || 'position1.png')
240 typeMarkerValue.value = props.optionData.mapOptions.typeMarker || 'position1.png' 251 typeMarkerValue.value = props.optionData.mapOptions.typeMarker || 'position1.png'
241 - mapSelectBorderValue.value = props.optionData.mapOptions.mpBorderConfig.value || '弹窗边框1' 252 + mapSelectBorderValue.value =
  253 + `${props.optionData.mapOptions.mpBorderConfig.value.toLocaleLowerCase()}.png` || 'border01.png'
242 }) 254 })
243 255
244 const typeMarkerValue = ref<string | null>('position1.png') 256 const typeMarkerValue = ref<string | null>('position1.png')
245 257
246 -const mapSelectBorderValue = ref<string | null>('Border01')  
247 -  
248 -const mapSelectBorderOption = reactive<{ option: BaseSelectBorderIF[] }>({  
249 - option: [  
250 - {  
251 - label: '弹窗边框1',  
252 - value: 'Border01'  
253 - },  
254 - {  
255 - label: '弹窗边框2',  
256 - value: 'Border02'  
257 - },  
258 - {  
259 - label: '弹窗边框3',  
260 - value: 'Border03'  
261 - },  
262 - {  
263 - label: '弹窗边框4',  
264 - value: 'Border04'  
265 - },  
266 - {  
267 - label: '弹窗边框5',  
268 - value: 'Border05'  
269 - },  
270 - {  
271 - label: '弹窗边框6',  
272 - value: 'Border06'  
273 - },  
274 - {  
275 - label: '弹窗边框7',  
276 - value: 'Border07'  
277 - },  
278 - {  
279 - label: '弹窗边框8',  
280 - value: 'Border08'  
281 - },  
282 - {  
283 - label: '弹窗边框9',  
284 - value: 'Border09'  
285 - },  
286 - {  
287 - label: '弹窗边框10',  
288 - value: 'Border10'  
289 - },  
290 - {  
291 - label: '弹窗边框11',  
292 - value: 'Border11'  
293 - },  
294 - {  
295 - label: '弹窗边框12',  
296 - value: 'Border12'  
297 - },  
298 - {  
299 - label: '弹窗边框13',  
300 - value: 'Border13'  
301 - }  
302 - ]  
303 -})  
304 -  
305 -const mapSelectBorderHandle = (value: string, option: BaseSelectBorderIF) => {  
306 - mapSelectBorderValue.value = value  
307 - ;(props.optionData.mapOptions.mpBorderConfig as BaseSelectBorderIF) = { ...option }  
308 -} 258 +const mapSelectBorderValue = ref<string | null>('border01.png')
309 259
310 const isHref = (url: string) => { 260 const isHref = (url: string) => {
311 try { 261 try {
@@ -349,4 +299,47 @@ const selectHandle = (value: string) => { @@ -349,4 +299,47 @@ const selectHandle = (value: string) => {
349 typeMarkerValue.value = value 299 typeMarkerValue.value = value
350 props.optionData.mapOptions.typeMarker = getMarkerImagePath(value) 300 props.optionData.mapOptions.typeMarker = getMarkerImagePath(value)
351 } 301 }
  302 +
  303 +const needBorder = ['border01.png', 'border02.png', 'border03.png', 'border05.png', 'border07.png']
  304 +
  305 +// import.meta.glob 这个不能封装，必须是字符串，不能通过传值传进去
  306 +const mapBorderOptions = computed(() => {
  307 + const pathList = import.meta.glob('../../../../../../assets/images/chart/decorates/*')
  308 + return Object.keys(pathList)
  309 + .map(item => {
  310 + const imgName = item.split('/').at(-1) as string
  311 + if (needBorder.includes(imgName)) {
  312 + return {
  313 + label: imgName,
  314 + value: imgName
  315 + } as SelectOption
  316 + }
  317 + })
  318 + .filter(Boolean) as SelectOption[]
  319 +})
  320 +//
  321 +
  322 +const getMapBorderImagePath = (name: string) => {
  323 + return isHref(name) ? name : new URL(`../../../../../../assets/images/chart/decorates/${name}`, import.meta.url).href
  324 +}
  325 +
  326 +const renderMapBorderOption = (option: SelectOption) => {
  327 + return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
  328 + h(NImage, {
  329 + width: 25,
  330 + src: getMapBorderImagePath(option.value as string),
  331 + previewDisabled: true,
  332 + style: { height: '25px' }
  333 + } as Recordable),
  334 + h(NEllipsis, null, () => option.label)
  335 + ])
  336 +}
  337 +
  338 +const selectMapBorderHandle = (value: string) => {
  339 + mapSelectBorderValue.value = value
  340 + const toLowerValue = value.toLocaleLowerCase()
  341 + ;(props.optionData.mapOptions.mpBorderConfig as BaseSelectBorderIF) = {
  342 + value: toLowerValue[0]?.toUpperCase() + toLowerValue?.substr(1)?.split('.')[0]
  343 + }
  344 +}
352 </script> 345 </script>
@@ -105,6 +105,7 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => { @@ -105,6 +105,7 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
105 let { lastUpdateTs } = res[0] 105 let { lastUpdateTs } = res[0]
106 const lastUpdateFormatTs = dayjs(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss') 106 const lastUpdateFormatTs = dayjs(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss')
107 //render方式渲染小组件里的边框组件 107 //render方式渲染小组件里的边框组件
  108 + console.log(mpBorderConfig.value.value)
108 const BorderInstance = await import(`../../../../Decorates/Borders/${mpBorderConfig.value.value}/index.vue`) 109 const BorderInstance = await import(`../../../../Decorates/Borders/${mpBorderConfig.value.value}/index.vue`)
109 const config = await import(`../../../../Decorates/Borders/${mpBorderConfig.value.value}/config.ts`) 110 const config = await import(`../../../../Decorates/Borders/${mpBorderConfig.value.value}/config.ts`)
110 const BorderConfigInstance = new config.default() 111 const BorderConfigInstance = new config.default()
@@ -115,7 +116,7 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => { @@ -115,7 +116,7 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
115 }, 100) 116 }, 100)
116 // 117 //
117 return ` 118 return `
118 - <div id="${id}" style="width:25vw;height:29vh;position:relative;top:30px"> 119 + <div id="${id}" style="width:25vw;height:29vh;position:relative;top:30px;">
119 <div style="position: absolute;top: 52px;left: 105px;"> 120 <div style="position: absolute;top: 52px;left: 105px;">
120 <div style="display:flex;justify-content:space-between; margin:20px 0px;"> 121 <div style="display:flex;justify-content:space-between; margin:20px 0px;">
121 <div style="width:12vw;text-overflow: ellipsis;overflow: hidden; word-break: break-all;white-space: nowrap;font-size:18px;font-weight:bold;color:white">${ 122 <div style="width:12vw;text-overflow: ellipsis;overflow: hidden; word-break: break-all;white-space: nowrap;font-size:18px;font-weight:bold;color:white">${
@@ -273,6 +274,13 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { @@ -273,6 +274,13 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
273 position: absolute; 274 position: absolute;
274 transform: scale(0.7); 275 transform: scale(0.7);
275 top: -10px; 276 top: -10px;
  277 + /* opacity: 0,8; */
  278 + /* background-color: rgba(0, 0, 0, 0.1); */
  279 + background-color:rgba(255,255,255,0.1)
  280 +}
  281 +.amap-info-content .go-border-box svg {
  282 + /* background-color: rgba(0, 0, 0, 0.1); */
  283 + /* background-color: rgba(255, 255, 255, 0.8); */
276 } 284 }
277 </style> 285 </style>
278 <style lang="scss" scoped> 286 <style lang="scss" scoped>