diff --git a/src/assets/less/amap-item.less b/src/assets/less/amap-item.less new file mode 100644 index 0000000..e8aee68 --- /dev/null +++ b/src/assets/less/amap-item.less @@ -0,0 +1,59 @@ +//高德信息弹窗 +.amap-info-contentContainer { + .amap-content-body { + background: #00152B; + border: 1px solid #129BFF; + + .amap-lib-infowindow { + background: #00152B; + + .amap-lib-infowindow-title { + color: #fff; + border-bottom: 1px solid #129BFF; + padding: 4px 0; + } + + .amap-lib-infowindow-content { + color: #fff; + padding: 4px 0; + } + } + } +} + + +/*地图元素样式---start*/ +//marker +.amap-marker-label { + padding: 0; +} + +.alarm-content { + background-color: #263d5e; + color: red; + font-size: 14px; + padding: 7px 10px; + border: 1px solid #1b7ef2; + position: relative; + + .close-btn { + position: absolute; + top: -6px; + right: -8px; + width: 15px; + height: 15px; + font-size: 12px; + background: #ccc; + border-radius: 50%; + color: #fff; + text-align: center; + line-height: 15px; + box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2); + } + + .close-btn:hover { + background: #666; + } +} + +/*地图元素样式---end*/ \ No newline at end of file diff --git a/src/assets/less/index.less b/src/assets/less/index.less index 2bbc9d1..02c3609 100644 --- a/src/assets/less/index.less +++ b/src/assets/less/index.less @@ -1,3 +1,5 @@ +@import "./amap-item"; + .type-time { padding-right: 4%; padding-top: 3%; @@ -107,25 +109,3 @@ margin-bottom: 4px; } -//高德信息弹窗 -.amap-info-contentContainer { - .amap-content-body { - background: #00152B; - border: 1px solid #129BFF; - - .amap-lib-infowindow { - background: #00152B; - - .amap-lib-infowindow-title { - color: #fff; - border-bottom: 1px solid #129BFF; - padding: 4px 0; - } - - .amap-lib-infowindow-content { - color: #fff; - padding: 4px 0; - } - } - } -} \ No newline at end of file diff --git a/src/assets/mapUtils/commonFun.ts b/src/assets/mapUtils/commonFun.ts index 875fd0f..6891e80 100644 --- a/src/assets/mapUtils/commonFun.ts +++ b/src/assets/mapUtils/commonFun.ts @@ -45,7 +45,6 @@ export function createCircle(option) { radius: 100000, //半径 borderWeight: 3, strokeColor: '#FF33FF', - strokeOpacity: 1, // strokeWeight: 6, strokeOpacity: 0.2, fillOpacity: 0.4, @@ -56,4 +55,4 @@ export function createCircle(option) { zIndex: 50, ...option, }); -} \ No newline at end of file +} diff --git a/src/assets/mapUtils/map.ts b/src/assets/mapUtils/map.ts index 32a7968..1f0fb05 100644 --- a/src/assets/mapUtils/map.ts +++ b/src/assets/mapUtils/map.ts @@ -36,10 +36,9 @@ export const Map = { this.drawInnerLine(); this.drawOutLine(); }); - }, - /** + } /** * @desc 中国外层边界线 - */ + */, drawOutLine() { let geojson = new AMap.GeoJSON({ geoJSON: china, @@ -56,10 +55,9 @@ export const Map = { }, }); this.map.add(geojson); - }, - /** + } /** * @desc 中国内层边界线 - */ + */, drawInnerLine() { let geojson = new AMap.GeoJSON({ geoJSON: chinaInner, @@ -72,20 +70,19 @@ export const Map = { }, }); this.map.add(geojson); - }, - // 清空当前地图上除了边界线的覆盖物 + }, // 清空当前地图上除了边界线的覆盖物 removeOverlayGroup() { this.clearAircraft(); this.clearOverlay(); this.clearAirRange(); + this.clearMarker(); // if (this.airMarkerList.length > 0) { for (let i = 0; i < this.airMarkerList.length; i++) { this.airMarkerList[i].setMap(null); } } // this.map.remove(this.airMarkerList); - }, - // + }, // /** * @desc 创建覆盖物组，用于批量处理点 （控制显隐，点击事件等） * @param result @@ -95,17 +92,17 @@ export const Map = { this.overlayGroup = new AMap.OverlayGroup(); for (let i = 0; i < result.length; i++) { let { type, lon, lat } = result[i]; + if (!lon || !lat || !type) { + continue; + } // 创建一个 Icon let startIcon = typeToIcon(type); // 将 icon 传入 marker let startMarker = new AMap.Marker({ // 点的坐标 - position: [lon, lat], - // 指定点的icon，也可以是个url ，但这样就不能对图片进行设置了 - icon: startIcon, - //启用点击事件 如果需要点击事件，必须开启 - clickable: true, - //点额外携带的数据，用户自定义属性，支持JavaScript API任意数据类型 + position: [lon, lat], // 指定点的icon，也可以是个url ，但这样就不能对图片进行设置了 + icon: startIcon, //启用点击事件 如果需要点击事件，必须开启 + clickable: true, //点额外携带的数据，用户自定义属性，支持JavaScript API任意数据类型 extData: result[i], }); // 可以调用setExtData（）设置自定义属性 @@ -174,11 +171,10 @@ export const Map = { this.map.remove(this.cluster); this.cluster = null; } - }, - /** + } /** * @desc 飞机范围 * @param list - */ + */, createAirRange(list) { this.removeOverlayGroup(); this.circleGroup = new AMap.OverlayGroup(); @@ -193,20 +189,15 @@ export const Map = { this.map.remove(this.circleGroup); this.circleGroup = null; } - }, - /** + } /** * @desc 地方医院医疗点显示 * @param cityCode 城市code * @param keywords 搜索名称 - */ + */, createActiveHospital(cityCode: string, keywords = '医院') { this.removeOverlayGroup(); this.clearActiveHospital(); if (!cityCode) return; - // AMap.plugin(['AMap.PlaceSearch'], () => { - // //构造地点查询类 - // - // }); this.placeSearch = new AMap.PlaceSearch({ pageSize: 30, // 单页显示结果条数 pageIndex: 1, // 页码 @@ -226,7 +217,7 @@ export const Map = { this.placeSearch = null; } }, - createMarker(option) { + createMarker(option, callbck: () => {}) { this.clearMarker(); let { lon, lat, zoom = 12 } = option; const icon = createIcon({ icon: alarmIcon, iconSize: [36, 42], imageSize: [36, 42] }); @@ -234,17 +225,21 @@ export const Map = { position: [lon, lat], icon: icon, offset: new AMap.Pixel(0, 0), //设置偏移量 - // label: { - // content: labelContent, - // offset: labelOffset, - // }, + label: { + content: `
+
${option?.realName},${option?.eventType_dictText}
+
`, + offset: new AMap.Pixel(0, -9), + direction: 'top', + }, }); this.map.add(this.marker); this.map.setZoomAndCenter(zoom, [lon, lat]); + this.marker.on('click', callbck); }, clearMarker() { if (this.marker) { - this.marker.setMap(null); + this.marker?.setMap(null); this.marker = null; } }, diff --git a/src/components/body-d-left/oneL.vue b/src/components/body-d-left/oneL.vue index 4fd57cb..cbe8908 100644 --- a/src/components/body-d-left/oneL.vue +++ b/src/components/body-d-left/oneL.vue @@ -47,8 +47,8 @@ return; } setStatistics(result[0]); - let { alerdyreceive = '' } = result[0]; - bus.emit('alerdyreceive', alerdyreceive); + let { alerdyreceive = '', totalacceptance = '' } = result[0]; + bus.emit('alerdyreceive', { alerdyreceive, totalacceptance }); } catch { setSpin(!spinning.value); } diff --git a/src/components/body-d-right/oneR.vue b/src/components/body-d-right/oneR.vue index 94c77ae..2e3dfd4 100644 --- a/src/components/body-d-right/oneR.vue +++ b/src/components/body-d-right/oneR.vue @@ -8,8 +8,8 @@ {{ item?.eventType_dictText }}
{{ item?.warnTime }} - - + +
@@ -61,6 +61,7 @@ import Dialog from '/@/components/dialog/Dialog.vue'; import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'; import { getMonitorList } from '/@/components/body-d-right/right.api.ts'; + import { Map } from '/@/assets/mapUtils/map.ts'; const classOption = ref({ step: 0.3, // 速度 @@ -98,7 +99,6 @@ */ function handlePolice(item) { userInfo.value = item; - console.log('item', item); openInfor.value = true; classOption.value.step = 0; } @@ -125,14 +125,14 @@ if (code == 200) { scrollList.value = result.records; } - - // console.log('dd', result); } function sendPosition(item) { let { lon, lat } = item; if (lon && lat) { - $bus.emit('sendPosition', item); + Map.createMarker(item, () => { + handlePolice(item); + }); } } diff --git a/src/components/chinaMap/chinaHooks.ts b/src/components/chinaMap/chinaHooks.ts index 33860bb..e3a515b 100644 --- a/src/components/chinaMap/chinaHooks.ts +++ b/src/components/chinaMap/chinaHooks.ts @@ -80,6 +80,9 @@ export const aircraft = [ }, ]; +/** + * @desc 直升机文本 + */ export function aircraftContent() { return `
diff --git a/src/components/chinaMap/chinaMap.vue b/src/components/chinaMap/chinaMap.vue index 7f7809d..b973257 100644 --- a/src/components/chinaMap/chinaMap.vue +++ b/src/components/chinaMap/chinaMap.vue @@ -46,7 +46,7 @@
{{ item.text }}
- +
地图层级：{{ level }}
@@ -54,7 +54,7 @@
累计受理
-
1054
+
{{ footerData?.totalacceptance || '/' }}
累计处置
@@ -105,13 +105,11 @@ } function logMapinfo() { - let zoom = Map.map.getZoom(); - if (zoom > 6) { - Map.map.getCity(function (info) { - const { citycode } = info; - Map.createActiveHospital(citycode); - }); - } + // let zoom = Map.map.getZoom(); + Map.map.getCity(function (info) { + const { citycode } = info; + Map.createActiveHospital(citycode); + }); } const level = ref(0); @@ -137,20 +135,16 @@ const footerData = ref({ alerdyreceive: '', + totalacceptance: '', }); onMounted(() => { console.log('reload'); initMap(); getMapData(tabList[0].type); - Map.map.on('moveend', setLevel); - Map.map.on('zoomend', setLevel); - $bus.on('sendPosition', (item) => { - Map.createMarker(item); - }); + Map.map && Map.map.on('moveend', setLevel); + Map.map && Map.map.on('zoomend', setLevel); $bus.on('alerdyreceive', (val) => { - footerData.value = { - alerdyreceive: val, - }; + footerData.value = val; }); }); diff --git a/src/utils/socket.ts b/src/utils/socket.ts index 6de9341..3f67c53 100644 --- a/src/utils/socket.ts +++ b/src/utils/socket.ts @@ -1,10 +1,12 @@ import { onMounted, onUnmounted, ref } from 'vue'; - -const path = 'ws://192.168.1.16:7098/websocket/watchMonitor'; +//健康监测工具报警 +export const basicPath = 'ws://192.168.1.16:7098/websocket/watchMonitor'; +//应急求助 +export const emergencyPath = 'ws://192.168.1.16:7011/websocket/emergency'; const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWRlbnRpZmllciI6ImU5Y2EyM2Q2OGQ4ODRkNGViYjE5ZDA3ODg5NzI3ZGFlIiwiZXhwIjoxNzAyNjA0MDI3fQ.MYf9yUnXO0RTFL4u96pN1Z2mBwtXU5W-QlxDgoAsoOw'; -export function useSocket() { +export function useSocket(path = basicPath) { const socket = ref(); let socketData = ref({}); diff --git a/src/views/components/emergencyDialog.vue b/src/views/components/emergencyDialog.vue new file mode 100644 index 0000000..b8647fe --- /dev/null +++ b/src/views/components/emergencyDialog.vue @@ -0,0 +1,86 @@ + + + \ No newline at end of file diff --git a/src/views/components/employeeDialog.vue b/src/views/components/employeeDialog.vue index 0970f3a..b8647fe 100644 --- a/src/views/components/employeeDialog.vue +++ b/src/views/components/employeeDialog.vue @@ -2,6 +2,11 @@