简柏林 / thingskit-view · Commits

Commit 234efafada804526021b95a01ad33ec14cccbfc7

Authored by fengtao
1 parent cb6dbbed

feat(src/packages): 设备分布修改弹窗图标显示

Inline Side-by-side
Showing 10 changed files with 49 additions and 22 deletions
@@ -118,7 +118,7 @@ export const option = { @@ -118,7 +118,7 @@ export const option = {
118 amapLon: 104.108689, 118 amapLon: 104.108689,
119 amapLat: 30.66176, 119 amapLat: 30.66176,
120 amapZindex: 11, 120 amapZindex: 11,
121 - iconMarker: defaultImg, 121 + iconMarker: '1.png',
122 mpBorderConfig: { 122 mpBorderConfig: {
123 value: 'Border01' 123 value: 'Border01'
124 }, 124 },
@@ -118,6 +118,7 @@ import { PropType, ref, computed, h, onMounted } from 'vue' @@ -118,6 +118,7 @@ import { PropType, ref, computed, h, onMounted } from 'vue'
118 import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, FeaturesEnum } from './config' 118 import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, FeaturesEnum } from './config'
119 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' 119 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
120 import { NEllipsis, NImage, NSelect, NSpace, SelectOption } from 'naive-ui' 120 import { NEllipsis, NImage, NSelect, NSpace, SelectOption } from 'naive-ui'
  121 +import { getUrlBase64 } from '@/utils/external/imageUrlToBase64'
121 122
122 interface BaseSelectBorderIF extends SelectOption { 123 interface BaseSelectBorderIF extends SelectOption {
123 config?: string 124 config?: string
@@ -283,7 +284,9 @@ const renderOption = (option: SelectOption) => { @@ -283,7 +284,9 @@ const renderOption = (option: SelectOption) => {
283 284
284 const selectHandle = (value: string) => { 285 const selectHandle = (value: string) => {
285 iconMarkerValue.value = value 286 iconMarkerValue.value = value
286 - props.optionData.mapOptions.iconMarker = getMarkerImagePath(value) 287 + getUrlBase64(getMarkerImagePath(value),'png',(baseEncodeText: string)=>{
  288 + props.optionData.mapOptions.iconMarker =baseEncodeText
  289 + })
287 } 290 }
288 291
289 const mapSelectBorderValue = ref<string | null>('border01.png') 292 const mapSelectBorderValue = ref<string | null>('border01.png')
@@ -332,9 +335,9 @@ const selectMapBorderHandle = (value: string) => { @@ -332,9 +335,9 @@ const selectMapBorderHandle = (value: string) => {
332 } 335 }
333 336
334 onMounted(() => { 337 onMounted(() => {
335 - iconMarkerValue.value = props.optionData.mapOptions.iconMarker?.split('/')?.at(-1) as string  
336 - props.optionData.mapOptions.iconMarker = getMarkerImagePath(iconMarkerValue.value)  
337 - console.log(getMarkerImagePath(iconMarkerValue.value)); 338 + getUrlBase64(getMarkerImagePath(props.optionData.mapOptions.iconMarker),'png',(baseEncodeText: string)=>{
  339 + props.optionData.mapOptions.iconMarker = baseEncodeText
  340 + })
338 mapSelectBorderValue.value = `${props.optionData.mapOptions.mpBorderConfig.value?.toLocaleLowerCase()}.png` 341 mapSelectBorderValue.value = `${props.optionData.mapOptions.mpBorderConfig.value?.toLocaleLowerCase()}.png`
339 }) 342 })
340 </script> 343 </script>
@@ -12,15 +12,15 @@ import { useChartDataFetch } from '@/hooks' @@ -12,15 +12,15 @@ import { useChartDataFetch } from '@/hooks'
12 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' 12 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
13 import { MarkerEnum, ThemeEnum, dataExtraInfoType, dataJsonType, dataJsonMarkersType, devicePartInfoInterface } from './config' 13 import { MarkerEnum, ThemeEnum, dataExtraInfoType, dataJsonType, dataJsonMarkersType, devicePartInfoInterface } from './config'
14 import { isArray } from '@/utils' 14 import { isArray } from '@/utils'
15 -import djh from './images/djh.png' 15 +import inactive from './images/inactive.png'
16 import online from './images/online.png' 16 import online from './images/online.png'
17 -import lx1 from './images/lx1.png'  
18 -import onLineImg from '../../../../../../assets/external/marker/3.png'  
19 -import listImg from './images/list.png' 17 +import offline from './images/offline.png'
  18 +import listView from './images/list.png'
20 import { getDeviceActiveTime } from '@/api/external/common/index' 19 import { getDeviceActiveTime } from '@/api/external/common/index'
21 import dayjs from 'dayjs' 20 import dayjs from 'dayjs'
22 import DeviceLatestTable from './components/DeviceLatestTable.vue' 21 import DeviceLatestTable from './components/DeviceLatestTable.vue'
23 import { getDeviceLatest, getProfileAttrs } from '@/api/external/common' 22 import { getDeviceLatest, getProfileAttrs } from '@/api/external/common'
  23 +import { NButton } from 'naive-ui'
24 24
25 const props = defineProps({ 25 const props = defineProps({
26 chartConfig: { 26 chartConfig: {
@@ -127,11 +127,11 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => { @@ -127,11 +127,11 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
127 render(h(BorderInstance.default, { chartConfig: BorderConfigInstance }), document.getElementById(id)!) 127 render(h(BorderInstance.default, { chartConfig: BorderConfigInstance }), document.getElementById(id)!)
128 }, 100) 128 }, 100)
129 // 129 //
130 - const textOverflow = `width:20rem;text-overflow:ellipsis;overflow:hidden;word-break:break-all;white-space:nowrap;`  
131 - const textOverflowFontBold = `width:12rem;text-overflow:ellipsis;overflow:hidden;word-break:break-all;white-space:nowrap;font-size:17px;font-weight:bold;` 130 + const textOverflow = `width:16rem;text-overflow:ellipsis;overflow:hidden;word-break:break-all;white-space:nowrap;`
  131 + const textOverflowFontBold = `width:12rem;text-overflow:ellipsis;overflow:hidden;word-break:break-all;white-space:nowrap;font-size:15px;font-weight:bold;`
132 const deviceStateContainer = `display:flex;justify-content:space-between;align-items:center;` 132 const deviceStateContainer = `display:flex;justify-content:space-between;align-items:center;`
133 const deviceStateImg = `width:1.2rem;height:1.2rem;` 133 const deviceStateImg = `width:1.2rem;height:1.2rem;`
134 - const deviceStateText = `margin-left:0.6rem;font-size:17px;font-weight:bold;` 134 + const deviceStateText = `margin-left:0.6rem;font-weight:bold;`
135 return ` 135 return `
136 <div id="${id}" style="width:30rem;"> 136 <div id="${id}" style="width:30rem;">
137 <div style="display:flex;flex-direction:column;margin:3.5rem 5.5rem 2rem 6.5rem;position:relative;"> 137 <div style="display:flex;flex-direction:column;margin:3.5rem 5.5rem 2rem 6.5rem;position:relative;">
@@ -140,24 +140,24 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => { @@ -140,24 +140,24 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
140 ${ 140 ${
141 deviceState === 'INACTIVE' 141 deviceState === 'INACTIVE'
142 ? `<div style="${deviceStateContainer}"> 142 ? `<div style="${deviceStateContainer}">
143 - <img style="${deviceStateImg}" src="${djh}"/> 143 + <img onclick="handleOpenDrawer()" alt="最新数据" style="${deviceStateImg};cursor:pointer;" src="${listView}"/>
  144 + <img style="${deviceStateImg};margin-left:0.3rem" src="${inactive}"/>
144 <span style="${deviceStateText}">待激活</span> 145 <span style="${deviceStateText}">待激活</span>
145 </div>` 146 </div>`
146 : deviceState === 'ONLINE' 147 : deviceState === 'ONLINE'
147 ? `<div style="${deviceStateContainer}"> 148 ? `<div style="${deviceStateContainer}">
148 - <img style="${deviceStateImg}" src="${online}"/> 149 + <img onclick="handleOpenDrawer()" alt="最新数据" style="${deviceStateImg};cursor:pointer;" src="${listView}"/>
  150 + <img style="${deviceStateImg};margin-left:0.3rem" src="${online}"/>
149 <span style="${deviceStateText}">在线</span> 151 <span style="${deviceStateText}">在线</span>
150 </div>` 152 </div>`
151 : `<div style="${deviceStateContainer}"> 153 : `<div style="${deviceStateContainer}">
152 - <img style="${deviceStateImg}" src="${lx1}"/> 154 + <img onclick="handleOpenDrawer()" alt="最新数据" style="${deviceStateImg};cursor:pointer;" src="${listView}"/>
  155 + <img style="${deviceStateImg};margin-left:0.3rem" src="${offline}"/>
153 <span style="${deviceStateText}">离线</span> 156 <span style="${deviceStateText}">离线</span>
154 </div>` 157 </div>`
155 } 158 }
156 </div> 159 </div>
157 - <div style="display:flex;justify-content:flex-end;cursor:pointer;" onclick="handleOpenDrawer()">  
158 - <img style="${deviceStateImg};position:relative;top:0.7rem" src="${listImg}"/>  
159 - </div>  
160 - <div style="display:flex;flex-direction:column;justify-content:space-between;color:white;margin-top:1rem;gap:0.8rem;"> 160 + <div style="display:flex;flex-direction:column;justify-content:space-between;color:white;margin-top:1rem;gap:0.95rem;">
161 <div style="${textOverflow}">所属组织：${organizationDTO.name}</div> 161 <div style="${textOverflow}">所属组织：${organizationDTO.name}</div>
162 <div style="${textOverflow}">接入协议：${deviceProfile.transportType}</div> 162 <div style="${textOverflow}">接入协议：${deviceProfile.transportType}</div>
163 <div style="${textOverflow}">设备位置：${!deviceInfo.address ? '该设备暂无地理位置' : deviceInfo.address}</div> 163 <div style="${textOverflow}">设备位置：${!deviceInfo.address ? '该设备暂无地理位置' : deviceInfo.address}</div>
@@ -220,11 +220,10 @@ const dataHandle = (newData: dataJsonType) => { @@ -220,11 +220,10 @@ const dataHandle = (newData: dataJsonType) => {
220 // 记录新标记 220 // 记录新标记
221 if (mapMarkerType.value === MarkerEnum.MARKER) { 221 if (mapMarkerType.value === MarkerEnum.MARKER) {
222 newData.markers.forEach((markerItem: dataJsonMarkersType) => { 222 newData.markers.forEach((markerItem: dataJsonMarkersType) => {
223 - const { deviceState } = markerItem.extraInfo  
224 const markerInstance = new AMapIns.Marker({ 223 const markerInstance = new AMapIns.Marker({
225 position: [markerItem.position[0], markerItem.position[1]], 224 position: [markerItem.position[0], markerItem.position[1]],
226 - offset: new AMapIns.Pixel(-13, -30),  
227 - icon: deviceState === 'ONLINE' ? onLineImg : iconMarker.value 225 + offset: new AMapIns.Pixel(-13, 5),
  226 + icon: iconMarker.value
228 }) 227 })
229 // markers.push(markerInstance) 原作者这种方式添加，属于JS API 1.4.8版本的 228 // markers.push(markerInstance) 原作者这种方式添加，属于JS API 1.4.8版本的
230 // markerInstance.setMap(mapIns) 229 // markerInstance.setMap(mapIns)
@@ -286,6 +285,9 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { @@ -286,6 +285,9 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
286 285
287 <style> 286 <style>
288 /**去除高德地图原生弹窗 */ 287 /**去除高德地图原生弹窗 */
  288 +.amap-info-outer, .amap-menu-outer {
  289 + box-shadow: 0 1px 2px rgba(0,0,0,0)!important;
  290 +}
289 .amap-info-outer { 291 .amap-info-outer {
290 background-color: rgba(0, 0, 0, 0) !important; 292 background-color: rgba(0, 0, 0, 0) !important;
291 } 293 }
  1 +/**
  2 + *
  3 + * @param url 图片路径
  4 + * @param ext 图片格式
  5 + * @param callback 结果回调
  6 + * 类型暂定any
  7 + */
  8 +export function getUrlBase64(url: any, ext: any, callback: any) {
  9 + let canvas = document.createElement("canvas") as any; //创建canvas DOM元素
  10 + const ctx = canvas.getContext("2d") as any;
  11 + const img = new Image;
  12 + img.crossOrigin = 'Anonymous';
  13 + img.src = url;
  14 + img.onload = function () {
  15 + canvas.height = 35; //指定画板的高度,自定义
  16 + canvas.width = 35; //指定画板的宽度，自定义
  17 + ctx.drawImage(img, 0, 0, 35, 35); //参数可自定义
  18 + const dataURL = canvas.toDataURL("image/" + ext);
  19 + callback.call(this, dataURL); //回掉函数获取Base64编码
  20 + canvas = null;
  21 + };
  22 +}