diff --git a/.env.development b/.env.development index 287520d..54fa899 100644 --- a/.env.development +++ b/.env.development @@ -1,5 +1,11 @@ # VITE_APP_URL = 'http://192.168.3.116:8001/' # VITE_APP_URL_WEBSOCKET = 'http://192.168.3.116:8000/api/websocket' -VITE_APP_URL = 'http://api.handcuff.youaikang.cn' -VITE_APP_URL_WEBSOCKET = 'ws://device.handcuff.youaikang.cn:8000/api/websocket' +VITE_APP_URL = 'http://47.112.185.26:8001/' +VITE_APP_URL_WEBSOCKET = 'ws://47.112.185.26:8000/api/websocket' + +# VITE_APP_URL = 'http://api.handcuff.zhuhaiguangdun.cn' +# VITE_APP_URL_WEBSOCKET = 'ws://device.handcuff.zhuhaiguangdun.cn:8000/api/websocket' + +# VITE_APP_URL = 'http://api.handcuff.youaikang.cn' +# VITE_APP_URL_WEBSOCKET = 'http://device.handcuff.youaikang.cn:8000/api/websocket' diff --git a/.env.production b/.env.production index d5da010..41b1104 100644 --- a/.env.production +++ b/.env.production @@ -1,5 +1,5 @@ -VITE_APP_URL = 'http://api.handcuff.youaikang.cn' -VITE_APP_URL_WEBSOCKET = 'http://device.handcuff.youaikang.cn:8000/api/websocket' - - +VITE_APP_URL = 'http://47.112.185.26:8001/' +VITE_APP_URL_WEBSOCKET = 'ws://47.112.185.26:8000/api/websocket' +# VITE_APP_URL = 'http://api.handcuff.zhuhaiguangdun.cn' +# VITE_APP_URL_WEBSOCKET = 'ws://device.handcuff.zhuhaiguangdun.cn:8000/api/websocket' \ No newline at end of file diff --git a/src/assets/img/end-marker.png b/src/assets/img/end-marker.png new file mode 100644 index 0000000..1bc8880 Binary files /dev/null and b/src/assets/img/end-marker.png differ diff --git a/src/assets/img/start-marker.png b/src/assets/img/start-marker.png new file mode 100644 index 0000000..bfa7779 Binary files /dev/null and b/src/assets/img/start-marker.png differ diff --git a/src/assets/img/via-marker.png b/src/assets/img/via-marker.png new file mode 100644 index 0000000..28a3223 Binary files /dev/null and b/src/assets/img/via-marker.png differ diff --git a/src/components/InfoWindow.vue b/src/components/InfoWindow.vue index a7daafb..b82d506 100644 --- a/src/components/InfoWindow.vue +++ b/src/components/InfoWindow.vue @@ -2,8 +2,7 @@
-
手铐：
-
{{ value.id }}
+ {{ value.deviceId }}
@@ -17,10 +16,6 @@
-
-
IMEI号
-
{{ value.deviceId }}
-
定位时间
{{ value.locationTime }}
@@ -86,12 +81,8 @@ enum locateEnum { font-size: 16px; color: #333; font-weight: 400; - - .span { - flex-shrink: 0; - font-weight: 700; - } - + flex-shrink: 0; + font-weight: 700; .battery { width: 34px; height: 16px; diff --git a/src/layout/index.vue b/src/layout/index.vue index 7b36c70..da85188 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -38,7 +38,6 @@ const handleBeforeUnload = (event: any) => { }; const onMessage = (res) => { - console.log(res, "WebSocket接收服务器消息"); if (res.cmd == "warning") { alarmRef.value.visible = true; alarmRef.value.warningList.unshift({ ...res, createTime: format(new Date(), "HH:mm:ss") }); @@ -51,20 +50,21 @@ const onMessage = (res) => { }; onMounted(() => { - // const isReload = localStorage.getItem("isReload"); - // if (isReload !== "true") { - // ElMessageBox.alert("由于浏览器安全策略，用户必须点击屏幕才能播放告警声音", "提示", { - // confirmButtonText: "OK", - // callback: () => { - // localStorage.setItem("isReload", "true"); - // }, - // }); - // } + const isReload = localStorage.getItem("isReload"); + if (isReload !== "true") { + ElMessageBox.alert("由于浏览器安全策略，用户必须点击屏幕才能播放告警声音", "提示", { + confirmButtonText: "OK", + callback: () => { + localStorage.setItem("isReload", "true"); + }, + }); + } if (ws.socket == null) { ws.connect(); } ws.onMessage(onMessage); + window.addEventListener("beforeunload", handleBeforeUnload); }); diff --git a/src/utils/mapCustom.js b/src/utils/mapCustom.js index c17405f..d541721 100644 --- a/src/utils/mapCustom.js +++ b/src/utils/mapCustom.js @@ -103,20 +103,30 @@ export class MapCustom { }) } - newIcon(url) { - return new AMap.Icon({ + newIcon(option) { + let data = { size: new AMap.Size(36, 42), - image: url, // Icon的图像 + image: '', // Icon的图像 imageSize: new AMap.Size(36, 42) - }) + } + if (typeof option == 'string') { + data.image = option + } else { + data = { + image: option.image, // Icon的图像 + size: new AMap.Size(option.size[0], option.size[1]), + imageSize: new AMap.Size(option.size[0], option.size[1]), + } + } + return new AMap.Icon({ ...data }) } // 创建marker - marker({ icon, position }) { + marker({ icon, position, offset }) { return new AMap.Marker({ icon, position, map: this.map, - offset: new AMap.Pixel(-20, -40), + offset: new AMap.Pixel(-13, -26), }) } lngLat(lng, lat) { diff --git a/src/utils/webSocket.js b/src/utils/webSocket.js index 2d44688..6da176f 100644 --- a/src/utils/webSocket.js +++ b/src/utils/webSocket.js @@ -41,9 +41,10 @@ export default class WebSocketService { } webScoketLogin() { + const comm = useCommonStore(); this.sendMessage({ - username: "admin", - password: "111111", + username: comm.user.username, + token: comm.user.token, type: 'web', cmd: "webLogin", }) @@ -106,6 +107,8 @@ export default class WebSocketService { onMessage = (callback) => { this.socket.onmessage = (event) => { const data = JSON.parse(event.data); + console.log(data, 'onMessage'); + if (data.cmd == "webLogin" && !data.code == 200) return this.webScoketLogin() callback && callback(data); if (event.data.includes('heartbeat')) { diff --git a/src/views/incidentDispose/index.vue b/src/views/incidentDispose/index.vue index 4354133..53ddc50 100644 --- a/src/views/incidentDispose/index.vue +++ b/src/views/incidentDispose/index.vue @@ -13,7 +13,6 @@
-
设备序号：{{ curData.id }}
IMEI号：{{ curData.deviceId }}
告警时间：{{ curData.createTime }}
@@ -77,6 +76,9 @@
+
+ +
@@ -117,6 +119,8 @@ const disabled = ref(false); const ruleFormRef = ref(); let map = null; let myChart = null; +let InfoWin = null; +let locationInfo = ref({}); const options = { tooltip: { @@ -138,7 +142,7 @@ const options = { grid: { left: "0%", right: "4%", - bottom: "3%", + bottom: "6%", containLabel: true, }, xAxis: { @@ -150,6 +154,28 @@ const options = { yAxis: { type: "value", }, + dataZoom: [ + { + type: "slider", //slider表示有滑动块的，inside表示内置的 + start: 90, // 左边在 10% 的位置。 + end: 100, // 右边在 60% 的位置。 + show: true, + xAxisIndex: [0], + handleSize: 0, //滑动条的 左右2个滑动条的大小 + height: 12, //组件高度 + bottom: -2, //右边的距离 + borderColor: "#eee", + fillerColor: "#E7E7E7", + backgroundColor: "#eee", //两边未选中的滑动条区域的颜色 + showDataShadow: false, //是否显示数据阴影 默认auto + showDetail: false, //即拖拽时候是否显示详细数值信息 默认true + realtime: true, //是否实时更新 + filterMode: "filter", + handleStyle: { + borderRadius: "20", + }, + }, + ], series: [ { itemStyle: { @@ -235,14 +261,13 @@ watch( const getData = async () => { try { const res = await warningDetail({ id: query.id as string }); + locationInfo.value = res; curData.value = res; ruleForm.name = res.rname; ruleForm.username = res.rname; ruleForm.content = res.rcontent; ruleForm.images = JSON.parse(res.rimg); - let icon = map.newIcon(location); - let marker = map.marker({ icon, position: [116.406315, 39.908775] }); - marker.setMap(map.map); + if (res.healthData && res.healthData.length) { res.healthData.forEach((item) => { options.times.push(item.time); @@ -253,6 +278,16 @@ const getData = async () => { }); myChart.setOption(options); } + + map.clearMap(); + map.setCenter([res.lng, res.lat]); + let icon = map.newIcon(location); + let marker = map.marker({ icon, position: [res.lng, res.lat] }); + marker.setMap(map.map); + marker.on("click", () => { + InfoWin = map.infoWindow(); + InfoWin.open(map.map, marker.getPosition()); + }); } catch (error) {} }; const submitForm = async (formEl: FormInstance | undefined) => { diff --git a/src/views/login.vue b/src/views/login.vue index aa6fa58..ab1cb06 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -14,10 +14,7 @@ 登 录 -
- 如遇到账号问题，请联系管理员
- 管理员联系方式：13812345678 邮箱：123456@qq.com -
+
如遇到账号问题，请联系管理员
diff --git a/src/views/monitoringCenter/deviceHistory.vue b/src/views/monitoringCenter/deviceHistory.vue index 55966a0..95798cd 100644 --- a/src/views/monitoringCenter/deviceHistory.vue +++ b/src/views/monitoringCenter/deviceHistory.vue @@ -8,30 +8,118 @@
-
- -
+