简柏林 / thingskit-view · Commits

Commit a319a226e3d949a87470245968327c7a86bf7c3a

Authored by fengwotao
1 parent e3244f4a

fix(src/api/external): 修改设备分布弹窗背景

Inline Side-by-side
Showing 3 changed files with 67 additions and 53 deletions
@@ -4,6 +4,7 @@ import { OverrideMapAmapConfig } from './index' @@ -4,6 +4,7 @@ import { OverrideMapAmapConfig } from './index'
4 import { chartInitConfig } from '@/settings/designSetting' 4 import { chartInitConfig } from '@/settings/designSetting'
5 import cloneDeep from 'lodash/cloneDeep' 5 import cloneDeep from 'lodash/cloneDeep'
6 import dataJson from './data.json' 6 import dataJson from './data.json'
  7 +import defaultImg from './images/marker/1.png'
7 8
8 export type dataExtraInfoType = typeof dataJson.markers[number]['extraInfo'] //data.json下的extraInfo类型 9 export type dataExtraInfoType = typeof dataJson.markers[number]['extraInfo'] //data.json下的extraInfo类型
9 10
@@ -88,7 +89,7 @@ export const option = { @@ -88,7 +89,7 @@ export const option = {
88 amapLon: 104.108689, 89 amapLon: 104.108689,
89 amapLat: 30.66176, 90 amapLat: 30.66176,
90 amapZindex: 11, 91 amapZindex: 11,
91 - iconMarker: '1.png', 92 + iconMarker: defaultImg,
92 mpBorderConfig: { 93 mpBorderConfig: {
93 value: 'Border01' 94 value: 'Border01'
94 }, 95 },
@@ -76,7 +76,7 @@ @@ -76,7 +76,7 @@
76 </setting-item> 76 </setting-item>
77 </setting-item-box> 77 </setting-item-box>
78 <setting-item-box name="图标选择" v-if="optionData.mapOptions.mapMarkerType === MarkerEnum.MARKER"> 78 <setting-item-box name="图标选择" v-if="optionData.mapOptions.mapMarkerType === MarkerEnum.MARKER">
79 - <setting-item name="图标选择"> 79 + <setting-item>
80 <NSelect 80 <NSelect
81 size="small" 81 size="small"
82 placeholder="请选择您要使用的图标" 82 placeholder="请选择您要使用的图标"
@@ -91,7 +91,7 @@ @@ -91,7 +91,7 @@
91 </setting-item> 91 </setting-item>
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>
95 <NSelect 95 <NSelect
96 size="small" 96 size="small"
97 placeholder="请选择您要使用的弹窗" 97 placeholder="请选择您要使用的弹窗"
@@ -11,15 +11,15 @@ import AMapLoader from '@amap/amap-jsapi-loader' @@ -11,15 +11,15 @@ import AMapLoader from '@amap/amap-jsapi-loader'
11 import { CreateComponentType } from '@/packages/index.d' 11 import { CreateComponentType } from '@/packages/index.d'
12 import { useChartDataFetch } from '@/hooks' 12 import { useChartDataFetch } from '@/hooks'
13 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' 13 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
14 -import { MarkerEnum, ThemeEnum, dataExtraInfoType, dataJsonType, dataJsonMarkersType, filterDevice } from './config' 14 +import { MarkerEnum, ThemeEnum, dataExtraInfoType, dataJsonType, dataJsonMarkersType } from './config'
15 import { isArray } from '@/utils' 15 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 onLineImg from './images/marker/3.png' 19 import onLineImg from './images/marker/3.png'
20 -import { getDeviceActiveTime, getDeviceList } from '@/api/external/common/index' 20 +import { getDeviceActiveTime } 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'
23 23
24 const props = defineProps({ 24 const props = defineProps({
25 chartConfig: { 25 chartConfig: {
@@ -28,7 +28,7 @@ const props = defineProps({ @@ -28,7 +28,7 @@ const props = defineProps({
28 } 28 }
29 }) 29 })
30 30
31 -const modelShow = ref(false) 31 +// const modelShow = ref(false)
32 32
33 const showSearchBox = ref(false) 33 const showSearchBox = ref(false)
34 34
@@ -115,35 +115,42 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => { @@ -115,35 +115,42 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
115 render(h(BorderInstance.default, { chartConfig: BorderConfigInstance }), document.getElementById(id)!) 115 render(h(BorderInstance.default, { chartConfig: BorderConfigInstance }), document.getElementById(id)!)
116 }, 100) 116 }, 100)
117 // 117 //
  118 + const textOverflow = `width:20rem;text-overflow:ellipsis;overflow:hidden;word-break:break-all;white-space:nowrap;`
  119 + const textOverflowFontBold = `width:12rem;text-overflow:ellipsis;overflow:hidden;word-break:break-all;white-space:nowrap;font-size:17px;font-weight:bold;`
  120 + const deviceStateContainer = `display:flex;justify-content:space-between;align-items:center;`
  121 + const deviceStateImg = `width:1.2rem;height:1.2rem;`
  122 + const deviceStateText = `margin-left:0.6rem;font-size:17px;font-weight:bold;`
118 return ` 123 return `
119 - <div id="${id}" style="width:25vw;height:29vh;position:relative;top:30px;">  
120 - <div style="position: absolute;top: 52px;left: 105px;">  
121 - <div style="display:flex;justify-content:space-between; margin:20px 0px;">  
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">${  
123 - alias || name  
124 - }</div>  
125 - ${  
126 - deviceState === 'INACTIVE'  
127 - ? `<div style="display:flex;align-items:center;color:#999999"><img style="width:15px;height:15px;margin-right:5px" src="${djh}">待激活</div>`  
128 - : deviceState === 'ONLINE'  
129 - ? `<div style="display:flex;align-items:center;color:green">  
130 - <img style="width:15px;height:15px;margin-right:5px" src="${online}" class="mr-1">在线</div>`  
131 - : `<div style="display:flex;align-items:center;color:#F5222D"><img style="width:15px;height:15px;margin-right:5px" src="${lx1}">离线</div>`  
132 - }  
133 - </div>  
134 - <div style="color:white;">所属组织：${organizationDTO.name}</div>  
135 - <div style="margin-top:6px;color:white">接入协议：${deviceProfile.transportType}</div>  
136 - <div style="margin-top:6px;color:white;width:15vw;text-overflow: ellipsis;overflow: hidden; word-break: break-all;white-space: nowrap;">  
137 - 设备位置：${!deviceInfo.address ? '该设备暂无地理位置' : deviceInfo.address}  
138 - </div>  
139 - <div style="margin-top:6px;color:white">  
140 - ${  
141 - deviceState === 'ONLINE' ? '在线' : deviceState === 'INACTIVE' ? '创建' : '离线'  
142 - }时间：${lastUpdateFormatTs}  
143 - </div>  
144 - </div>  
145 - </div>  
146 - ` 124 + <div id="${id}" style="width:30rem;">
  125 + <div style="display:flex;flex-direction:column;margin:3.5rem 5.5rem 2rem 6.5rem;position:relative;">
  126 + <div style="display:flex;justify-content:space-between;align-items:center;color:white;">
  127 + <span style="${textOverflowFontBold}">${alias || name}</span>
  128 + ${
  129 + deviceState === 'INACTIVE'
  130 + ? `<div style="${deviceStateContainer}">
  131 + <img style="${deviceStateImg}" src="${djh}"/>
  132 + <span style="${deviceStateText}">待激活</span>
  133 + </div>`
  134 + : deviceState === 'ONLINE'
  135 + ? `<div style="${deviceStateContainer}">
  136 + <img style="${deviceStateImg}" src="${online}"/>
  137 + <span style="${deviceStateText}">在线</span>
  138 + </div>`
  139 + : `<div style="${deviceStateContainer}">
  140 + <img style="${deviceStateImg}" src="${lx1}"/>
  141 + <span style="${deviceStateText}">离线</span>
  142 + </div>`
  143 + }
  144 + </div>
  145 + <div style="display:flex;flex-direction:column;justify-content:space-between;color:white;margin-top:2rem;gap:0.8rem;">
  146 + <div style="${textOverflow}">所属组织：${organizationDTO.name}</div>
  147 + <div style="${textOverflow}">接入协议：${deviceProfile.transportType}</div>
  148 + <div style="${textOverflow}">设备位置：${!deviceInfo.address ? '该设备暂无地理位置' : deviceInfo.address}</div>
  149 + <div style="${textOverflow}">${deviceState === 'ONLINE' ? '在线' : deviceState === 'INACTIVE' ? '创建' : '离线'}时间：${lastUpdateFormatTs}</div>
  150 + </div>
  151 + </div>
  152 + </div>
  153 + `
147 } catch (e) { 154 } catch (e) {
148 console.error(e) 155 console.error(e)
149 } 156 }
@@ -153,31 +160,32 @@ const handleMouseenter = () => (showSearchBox.value = true) @@ -153,31 +160,32 @@ const handleMouseenter = () => (showSearchBox.value = true)
153 160
154 const handleMouseleave = () => (showSearchBox.value = false) 161 const handleMouseleave = () => (showSearchBox.value = false)
155 162
156 -const handleOpenSearchBox = () => (modelShow.value = true) 163 +// const handleOpenSearchBox = () => (modelShow.value = true)
157 164
158 -const handleCloseDrawer = () => (modelShow.value = false) 165 +// const handleCloseDrawer = () => (modelShow.value = false)
159 166
160 -const handleSearchParams = async (searchPage: any, params: any) => {  
161 - try {  
162 - Object.keys(params).forEach(item => {  
163 - if (!params[item]) Reflect.deleteProperty(params, item)  
164 - })  
165 - const { items } = await getDeviceList(searchPage, params)  
166 - const values = filterDevice(items)  
167 - if (!values) return  
168 - setTimeout(() => {  
169 - dataHandle(values)  
170 - }, 1000)  
171 - } finally {  
172 - handleCloseDrawer()  
173 - }  
174 -} 167 +// const handleSearchParams = async (searchPage: any, params: any) => {
  168 +// try {
  169 +// Object.keys(params).forEach(item => {
  170 +// if (!params[item]) Reflect.deleteProperty(params, item)
  171 +// })
  172 +// const { items } = await getDeviceList(searchPage, params)
  173 +// const values = filterDevice(items)
  174 +// if (!values) return
  175 +// setTimeout(() => {
  176 +// dataHandle(values)
  177 +// }, 1000)
  178 +// } finally {
  179 +// handleCloseDrawer()
  180 +// }
  181 +// }
175 182
176 //地图鼠标hover 183 //地图鼠标hover
177 const mapClick = (markerInstance: any, markerItem: dataJsonMarkersType) => { 184 const mapClick = (markerInstance: any, markerItem: dataJsonMarkersType) => {
178 markerInstance.setExtData({ 185 markerInstance.setExtData({
179 extraInfo: markerItem.extraInfo 186 extraInfo: markerItem.extraInfo
180 }) 187 })
  188 + // click
181 markerInstance.on('mouseover', async (e: any) => { 189 markerInstance.on('mouseover', async (e: any) => {
182 const { extraInfo } = e.target.getExtData() 190 const { extraInfo } = e.target.getExtData()
183 if (extraInfo.tbDeviceId.startsWith('@')) return //假的模拟数据则终止弹窗 191 if (extraInfo.tbDeviceId.startsWith('@')) return //假的模拟数据则终止弹窗
@@ -269,6 +277,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { @@ -269,6 +277,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
269 </script> 277 </script>
270 278
271 <style> 279 <style>
  280 +/**去除高德地图原生弹窗 */
272 .amap-info-outer { 281 .amap-info-outer {
273 background-color: rgba(0, 0, 0, 0) !important; 282 background-color: rgba(0, 0, 0, 0) !important;
274 } 283 }
@@ -278,10 +287,14 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { @@ -278,10 +287,14 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
278 .amap-info-content { 287 .amap-info-content {
279 overflow: hidden !important; 288 overflow: hidden !important;
280 } 289 }
  290 +/**去除高德地图原生弹窗*/
281 .amap-info-content .go-border-box { 291 .amap-info-content .go-border-box {
282 position: absolute; 292 position: absolute;
283 transform: scale(0.68); 293 transform: scale(0.68);
284 - top: -10px; 294 + top: 0;
  295 + z-index: -100;
  296 +}
  297 +.amap-info-content .go-border-box svg {
285 background-color: v-bind(bgColor); 298 background-color: v-bind(bgColor);
286 } 299 }
287 </style> 300 </style>