renkang/xj-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 对接底部数据，添加地图公共less

Browse Source
This commit is contained in:
zk
2023-12-08 18:16:52 +08:00
parent 190d69573f
commit b7e84b89a9
12 changed files with 269 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/less/amap-item.less
+59
View File
@@ -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*/
src/assets/less/index.less
+2 -22
View File
@@ -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;
}
}
}
}
src/assets/mapUtils/commonFun.ts
+1 -2
View File
@@ -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,
});
}
}
src/assets/mapUtils/map.ts
+27 -32
View File
@@ -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: `<div class="alarm-content" >
<div>${option?.realName},${option?.eventType_dictText}</div>
</div>`,
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;
}
},
src/components/body-d-left/oneL.vue
+2 -2
View File
@@ -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);
}
src/components/body-d-right/oneR.vue
+6 -6
View File
@@ -8,8 +8,8 @@
<span class="fixed-width" :title="item?.eventType_dictText">{{ item?.eventType_dictText }}</span>
<div class="time-icon">
<span>{{ item?.warnTime }}</span>
<span class="terminal-icon" @click="handlePolice(item)"></span>
<span class="position" @click="sendPosition(item)"></span>
<span class="terminal-icon" @click="handlePolice(item)" title="健康报警员工信息"></span>
<span class="position" @click="sendPosition(item)" title="员工定位"></span>
</div>
</div>
</vue3-seamless-scroll>
@@ -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);
});
}
}
</script>
src/components/chinaMap/chinaHooks.ts
+3
View File
@@ -80,6 +80,9 @@ export const aircraft = [
},
];
/**
* @desc 直升机文本
*/
export function aircraftContent() {
return `
<div style="display: flex;justify-content: center;align-items: center;">
src/components/chinaMap/chinaMap.vue
+11 -17
View File
@@ -46,7 +46,7 @@
<div><img :src="item.img" alt="" class="legend-img" /> {{ item.text }}</div>
</div>
</div>
<!-- <div class="level">地图层级：{{ level }}</div>-->
<div class="level">地图层级：{{ level }}</div>
</div>
<div class="center-footer">
<div class="count-item" @click="test">
@@ -54,7 +54,7 @@
<div class="text">累计受理</div>
</div>
<div class="count-item">
<div class="num">1054</div>
<div class="num">{{ footerData?.totalacceptance || '/' }}</div>
<div class="text">累计处置</div>
</div>
</div>
@@ -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;
});
});
src/utils/socket.ts
+5 -3
View File
@@ -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({});
src/views/components/emergencyDialog.vue
+86
View File
@@ -0,0 +1,86 @@
<template>
<Dialog :openVis="visible" width="30%" :title="title" @close="closeDialog" :maskClosable="false">
<template #container>
<div class="police-con">
<div class="sub-text">有一个员工健康监测发生异常！</div>
<div class="con-item">
<span>异常事件：</span>
<span>{{ userInfo?.eventType_dictText }}</span>
</div>
<div class="con-item">
<span>姓名：</span>
<span>{{ userInfo?.realName }}</span>
</div>
<div class="con-item">
<span>二级单位：</span>
<span>{{ userInfo?.orgName }}</span>
</div>
<div class="con-item">
<span>手机号码：</span>
<span>{{ userInfo?.phone }}</span>
</div>
<div class="con-item">
<span>发生时间：</span>
<span>{{ userInfo?.warnTime }}</span>
</div>
<div class="con-item">
<span>发生地点：</span>
<span>{{ userInfo?.address }}</span>
</div>
</div>
</template>
</Dialog>
</template>
<script setup lang="ts">
import Dialog from '/@/components/dialog/Dialog.vue';
import { useDialog } from '/@/views/components/dialogHooks.ts';
import { watch, ref } from 'vue';
const props = defineProps({
record: Object,
});
const userInfo = ref({});
watch(
() => props.record,
(nVal) => {
userInfo.value = nVal;
}
);
const { visible, title, closeDialog, openDialog } = useDialog({ title: '健康监测工具报警' });
defineExpose({
openDialog,
});
</script>
<style scoped lang="less">
.police-con {
color: #ffffff;
background-color: #00152b;
border: 1px solid #129bff;
padding: 2% 0 2% 5%;
.sub-text {
font-weight: bold;
margin-left: 8px;
}
.con-item {
padding: 1.3% 0;
display: flex;
span:nth-child(1) {
font-weight: bold;
text-align: right;
display: inline-flex;
justify-content: flex-end;
width: 80px;
}
span:nth-child(2) {
flex: 1;
padding-left: 2%;
padding-right: 2%;
}
}
}
</style>
src/views/components/employeeDialog.vue
+17 -7
View File
@@ -2,6 +2,11 @@
<Dialog :openVis="visible" width="30%" :title="title" @close="closeDialog" :maskClosable="false">
<template #container>
<div class="police-con">
<div class="sub-text">有一个员工健康监测发生异常！</div>
<div class="con-item">
<span>异常事件：</span>
<span>{{ userInfo?.eventType_dictText }}</span>
</div>
<div class="con-item">
<span>姓名：</span>
<span>{{ userInfo?.realName }}</span>
@@ -14,10 +19,6 @@
<span>手机号码：</span>
<span>{{ userInfo?.phone }}</span>
</div>
<div class="con-item">
<span>异常事件：</span>
<span>{{ userInfo?.eventType_dictText }}</span>
</div>
<div class="con-item">
<span>发生时间：</span>
<span>{{ userInfo?.warnTime }}</span>
@@ -45,7 +46,7 @@
userInfo.value = nVal;
}
);
const { visible, title, closeDialog, openDialog } = useDialog({ title: '健康报警员工信息' });
const { visible, title, closeDialog, openDialog } = useDialog({ title: '健康监测工具报警' });
defineExpose({
openDialog,
@@ -58,18 +59,27 @@
border: 1px solid #129bff;
padding: 2% 0 2% 5%;
.sub-text {
font-weight: bold;
margin-left: 8px;
}
.con-item {
padding: 1.3% 0;
display: flex;
span:nth-child(1) {
font-weight: bold;
display: inline-block;
width: 20%;
text-align: right;
display: inline-flex;
justify-content: flex-end;
width: 80px;
}
span:nth-child(2) {
flex: 1;
padding-left: 2%;
padding-right: 2%;
}
}
}
src/views/index.vue
+50 -4
View File
@@ -22,8 +22,9 @@
<three-r />
</div>
</div>
<div class="bottom-d"></div>
<div class="bottom-d" @click="test"></div>
<EmployeeDialog ref="employeeDialogRef" :record="socketData" />
<EmergencyDialog ref="emergencyDialogRef" :record="emergencyData" />
</div>
</template>
<script setup lang="ts">
@@ -36,8 +37,9 @@
import ThreeR from '../components/body-d-right/threeR.vue';
import ChinaMap from '../components/chinaMap/chinaMap.vue';
import EmployeeDialog from '/@/views/components/employeeDialog.vue';
import EmergencyDialog from '/@/views/components/emergencyDialog.vue';
import { useTopTime } from '/@/utils/utils.ts';
import { useSocket } from '/@/utils/socket.ts';
import { basicPath, emergencyPath, useSocket } from '/@/utils/socket.ts';
const dayTimeO = ref();
const dayTimeT = ref();
@@ -60,10 +62,10 @@
clearInterval(interval.value);
});
init();
const { socketData, setSocketData } = useSocket();
// 健康监测工具报警
const { socketData, setSocketData } = useSocket(basicPath);
const employeeDialogRef = ref();
watch(socketData, (nVal) => {
console.log('nval', nVal);
if (nVal) {
nextTick(() => {
setSocketData(nVal);
@@ -71,6 +73,50 @@
});
}
});
//应急求助
const { socketData: emergencyData, setSocketData: setEmergencyData } = useSocket(emergencyPath);
const emergencyDialogRef = ref();
watch(emergencyData, (nVal) => {
if (nVal) {
nextTick(() => {
setEmergencyData(nVal);
emergencyDialogRef.value.openDialog;
});
}
});
function test() {
let nVal = {
watchNo: 'CRFTQ22C03000080',
eventType: 'heart_rate',
bindUserId: 'fd358031299d4816b5d304fd818ecc73',
createBy: null,
createDate: null,
dataValue: '999',
address:
'一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字',
lon: 108.6666,
lat: 29.8888,
dataDate: '2023-12-07',
warnTime: '2023-12-07',
gpsErrorMsg: '',
lonGd: 108.67084314886117,
latGd: 29.88607705672868,
addressGd: null,
sendFlag: '0',
largeScreenFlag: '0',
orgCode: null,
orgName: '冯地坑采油作业区',
realName: '王志文',
phone: '15229020494',
};
nextTick(() => {
setSocketData(nVal);
employeeDialogRef.value.openDialog();
});
}
</script>
<style lang="less" scoped>
.outer {