简柏林 / thingskit-view · Commits

Commit c845c5b2c083eb7022c4d1c01ee29a9c24b1b437

Authored by fengwotao
1 parent f446ac4c

feat(src/packages): 优化高德地图组件部分代码

Inline Side-by-side
Showing 5 changed files with 42 additions and 21 deletions
@@ -129,7 +129,7 @@ const loadList = async () => { @@ -129,7 +129,7 @@ const loadList = async () => {
129 } 129 }
130 130
131 const handleSubmit = () => { 131 const handleSubmit = () => {
132 - searchParams.deviceProfileIds = [searchParams.deviceProfileIds] as any 132 + // searchParams.deviceProfileIds = [searchParams.deviceProfileIds] as any
133 emit('searchParams', searchPage, searchParams) 133 emit('searchParams', searchPage, searchParams)
134 handleCancel() 134 handleCancel()
135 } 135 }
@@ -90,8 +90,9 @@ export const option = { @@ -90,8 +90,9 @@ export const option = {
90 amapZindex: 11, 90 amapZindex: 11,
91 iconMarker: '1.png', 91 iconMarker: '1.png',
92 mpBorderConfig: { 92 mpBorderConfig: {
93 - value: 'Border01', 93 + value: 'Border01'
94 }, 94 },
  95 + bgColor: 'rgba(255, 255, 255, 0.1)',
95 marker: { 96 marker: {
96 fillColor: '#E98984FF', 97 fillColor: '#E98984FF',
97 fillOpacity: 0.5, 98 fillOpacity: 0.5,
@@ -105,6 +105,11 @@ @@ -105,6 +105,11 @@
105 /> 105 />
106 </setting-item> 106 </setting-item>
107 </setting-item-box> 107 </setting-item-box>
  108 + <setting-item-box name="弹窗背景" v-if="optionData.mapOptions.mapMarkerType === MarkerEnum.MARKER">
  109 + <div style="width: 10vw">
  110 + <n-color-picker :modes="['rgb']" v-model:value="optionData.mapOptions.bgColor" size="small"></n-color-picker>
  111 + </div>
  112 + </setting-item-box>
108 </collapse-item> 113 </collapse-item>
109 </template> 114 </template>
110 115
@@ -326,6 +331,5 @@ onMounted(() => { @@ -326,6 +331,5 @@ onMounted(() => {
326 iconMarkerValue.value = props.optionData.mapOptions.iconMarker?.split('/')?.at(-1) as string 331 iconMarkerValue.value = props.optionData.mapOptions.iconMarker?.split('/')?.at(-1) as string
327 props.optionData.mapOptions.iconMarker = getMarkerImagePath(iconMarkerValue.value) 332 props.optionData.mapOptions.iconMarker = getMarkerImagePath(iconMarkerValue.value)
328 mapSelectBorderValue.value = `${props.optionData.mapOptions.mpBorderConfig.value?.toLocaleLowerCase()}.png` 333 mapSelectBorderValue.value = `${props.optionData.mapOptions.mpBorderConfig.value?.toLocaleLowerCase()}.png`
329 - props.optionData.mapOptions.mpBorderConfig.value = getMarkerImagePath(mapSelectBorderValue.value)  
330 }) 334 })
331 </script> 335 </script>
1 <template> 1 <template>
2 <div @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" class="chart-amap" ref="vChartRef"> 2 <div @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" class="chart-amap" ref="vChartRef">
3 - <div v-show="showSearchBox" @click.stop="handleOpenSearchBox" class="search-box"></div>  
4 - <search-box :modelShow="modelShow" @searchParams="handleSearchParams" @closeDrawer="handleCloseDrawer"></search-box> 3 + <!-- <div v-show="showSearchBox" @click.stop="handleOpenSearchBox" class="search-box"></div>
  4 + <search-box :modelShow="modelShow" @searchParams="handleSearchParams" @closeDrawer="handleCloseDrawer"></search-box> -->
5 </div> 5 </div>
6 </template> 6 </template>
7 7
@@ -16,7 +16,7 @@ import { isArray } from '@/utils' @@ -16,7 +16,7 @@ import { isArray } from '@/utils'
16 import djh from './images/djh.png' 16 import djh from './images/djh.png'
17 import online from './images/online.png' 17 import online from './images/online.png'
18 import lx1 from './images/lx1.png' 18 import lx1 from './images/lx1.png'
19 -import positionImg from './images/marker/1.png' 19 +import onLineImg from './images/marker/3.png'
20 import { getDeviceActiveTime, getDeviceList } from '@/api/external/common/index' 20 import { getDeviceActiveTime, getDeviceList } from '@/api/external/common/index'
21 import dayjs from 'dayjs' 21 import dayjs from 'dayjs'
22 import SearchBox from './components/SearchBox.vue' 22 import SearchBox from './components/SearchBox.vue'
@@ -32,7 +32,7 @@ const modelShow = ref(false) @@ -32,7 +32,7 @@ const modelShow = ref(false)
32 32
33 const showSearchBox = ref(false) 33 const showSearchBox = ref(false)
34 34
35 -let { 35 +const {
36 amapKey, 36 amapKey,
37 amapStyleKey, 37 amapStyleKey,
38 amapLon, 38 amapLon,
@@ -47,7 +47,8 @@ let { @@ -47,7 +47,8 @@ let {
47 skyColor, 47 skyColor,
48 marker, 48 marker,
49 iconMarker, 49 iconMarker,
50 - mpBorderConfig 50 + mpBorderConfig,
  51 + bgColor
51 } = toRefs(props.chartConfig.option.mapOptions) 52 } = toRefs(props.chartConfig.option.mapOptions)
52 53
53 //官方没有高德地图api的ts，所以类型全用的any 54 //官方没有高德地图api的ts，所以类型全用的any
@@ -132,7 +133,7 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => { @@ -132,7 +133,7 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
132 </div> 133 </div>
133 <div style="color:white;">所属组织：${organizationDTO.name}</div> 134 <div style="color:white;">所属组织：${organizationDTO.name}</div>
134 <div style="margin-top:6px;color:white">接入协议：${deviceProfile.transportType}</div> 135 <div style="margin-top:6px;color:white">接入协议：${deviceProfile.transportType}</div>
135 - <div style="margin-top:6px;color:white"> 136 + <div style="margin-top:6px;color:white;width:15vw;text-overflow: ellipsis;overflow: hidden; word-break: break-all;white-space: nowrap;">
136 设备位置：${!deviceInfo.address ? '该设备暂无地理位置' : deviceInfo.address} 137 设备位置：${!deviceInfo.address ? '该设备暂无地理位置' : deviceInfo.address}
137 </div> 138 </div>
138 <div style="margin-top:6px;color:white"> 139 <div style="margin-top:6px;color:white">
@@ -158,10 +159,15 @@ const handleCloseDrawer = () => (modelShow.value = false) @@ -158,10 +159,15 @@ const handleCloseDrawer = () => (modelShow.value = false)
158 159
159 const handleSearchParams = async (searchPage: any, params: any) => { 160 const handleSearchParams = async (searchPage: any, params: any) => {
160 try { 161 try {
  162 + Object.keys(params).forEach(item => {
  163 + if (!params[item]) Reflect.deleteProperty(params, item)
  164 + })
161 const { items } = await getDeviceList(searchPage, params) 165 const { items } = await getDeviceList(searchPage, params)
162 const values = filterDevice(items) 166 const values = filterDevice(items)
163 if (!values) return 167 if (!values) return
164 - dataHandle(values) 168 + setTimeout(() => {
  169 + dataHandle(values)
  170 + }, 1000)
165 } finally { 171 } finally {
166 handleCloseDrawer() 172 handleCloseDrawer()
167 } 173 }
@@ -198,10 +204,11 @@ const dataHandle = (newData: dataJsonType) => { @@ -198,10 +204,11 @@ const dataHandle = (newData: dataJsonType) => {
198 // 记录新标记 204 // 记录新标记
199 if (mapMarkerType.value === MarkerEnum.MARKER) { 205 if (mapMarkerType.value === MarkerEnum.MARKER) {
200 newData.markers.forEach((markerItem: dataJsonMarkersType) => { 206 newData.markers.forEach((markerItem: dataJsonMarkersType) => {
  207 + const { deviceState } = markerItem.extraInfo
201 const markerInstance = new AMapIns.Marker({ 208 const markerInstance = new AMapIns.Marker({
202 position: [markerItem.position[0], markerItem.position[1]], 209 position: [markerItem.position[0], markerItem.position[1]],
203 offset: new AMapIns.Pixel(-13, -30), 210 offset: new AMapIns.Pixel(-13, -30),
204 - icon: iconMarker.value || positionImg 211 + icon: deviceState === 'ONLINE' ? onLineImg : iconMarker.value
205 }) 212 })
206 // markers.push(markerInstance) 原作者这种方式添加，属于JS API 1.4.8版本的 213 // markers.push(markerInstance) 原作者这种方式添加，属于JS API 1.4.8版本的
207 // markerInstance.setMap(mapIns) 214 // markerInstance.setMap(mapIns)
@@ -255,7 +262,9 @@ watch( @@ -255,7 +262,9 @@ watch(
255 // 预览 262 // 预览
256 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { 263 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
257 stopWatch() 264 stopWatch()
258 - dataHandle(newData) 265 + setTimeout(() => {
  266 + dataHandle(newData)
  267 + }, 1000)
259 }) 268 })
260 </script> 269 </script>
261 270
@@ -271,15 +280,9 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { @@ -271,15 +280,9 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
271 } 280 }
272 .amap-info-content .go-border-box { 281 .amap-info-content .go-border-box {
273 position: absolute; 282 position: absolute;
274 - transform: scale(0.7); 283 + transform: scale(0.68);
275 top: -10px; 284 top: -10px;
276 - /* opacity: 0,8; */  
277 - /* background-color: rgba(0, 0, 0, 0.1); */  
278 - background-color:rgba(255,255,255,0.1)  
279 -}  
280 -.amap-info-content .go-border-box svg {  
281 - /* background-color: rgba(0, 0, 0, 0.1); */  
282 - /* background-color: rgba(255, 255, 255, 0.8); */ 285 + background-color: v-bind(bgColor);
283 } 286 }
284 </style> 287 </style>
285 <style lang="scss" scoped> 288 <style lang="scss" scoped>
1 <template> 1 <template>
2 <div> 2 <div>
3 <n-tree 3 <n-tree
  4 + ref="nTreeRef"
4 :accordion="treeConfig.accordion" 5 :accordion="treeConfig.accordion"
5 :checkable="treeConfig.checkable" 6 :checkable="treeConfig.checkable"
6 :default-expand-all="treeConfig.defaultExpandAll" 7 :default-expand-all="treeConfig.defaultExpandAll"
@@ -11,17 +12,20 @@ @@ -11,17 +12,20 @@
11 label-field="name" 12 label-field="name"
12 children-field="children" 13 children-field="children"
13 @update:selected-keys="onClick" 14 @update:selected-keys="onClick"
  15 + @update:checked-keys="onClick"
  16 + :checked-keys="checkedKeys"
14 /> 17 />
15 </div> 18 </div>
16 </template> 19 </template>
17 20
18 <script setup lang="ts"> 21 <script setup lang="ts">
19 -import { PropType, toRefs } from 'vue' 22 +import { PropType, toRefs, ref } from 'vue'
20 import { CreateComponentType } from '@/packages/index.d' 23 import { CreateComponentType } from '@/packages/index.d'
21 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' 24 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
22 import { useChartInteract } from '@/hooks/external/useChartSelectInteract.hook' 25 import { useChartInteract } from '@/hooks/external/useChartSelectInteract.hook'
23 import { InteractEventOn } from '@/enums/eventEnum' 26 import { InteractEventOn } from '@/enums/eventEnum'
24 import { ComponentInteractParamsEnum } from './interact' 27 import { ComponentInteractParamsEnum } from './interact'
  28 +import { NTree } from 'naive-ui'
25 29
26 const props = defineProps({ 30 const props = defineProps({
27 chartConfig: { 31 chartConfig: {
@@ -32,7 +36,16 @@ const props = defineProps({ @@ -32,7 +36,16 @@ const props = defineProps({
32 36
33 const { dataset, treeConfig } = toRefs(props.chartConfig.option) 37 const { dataset, treeConfig } = toRefs(props.chartConfig.option)
34 38
  39 +const nTreeRef = ref<null | InstanceType<typeof NTree>>(null)
  40 +
  41 +const checkedKeys = ref([])
  42 +
35 const onClick = (v: string[]) => { 43 const onClick = (v: string[]) => {
  44 + // nTreeRef.value?.selectedKeys(v)
  45 + console.log(nTreeRef.value)
  46 + console.log(v)
  47 + // nTreeRef.value?.onUpdateCheckedKeys(v)
  48 + if (Array.isArray(v) && v.length == 0) return
36 useChartInteract( 49 useChartInteract(
37 props.chartConfig, 50 props.chartConfig,
38 useChartEditStore, 51 useChartEditStore,