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

update

Browse Source
This commit is contained in:
zk
2023-12-22 16:57:16 +08:00
parent dd5a47e7fb
commit b9f2b3b521
15 changed files with 240 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -15,6 +15,7 @@
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@iamzzg/data-view": "^2.10.0",
"@turf/turf": "^6.5.0",
"autoprefixer": "^10.4.16",
"axios": "^1.6.2",
"dayjs": "^1.11.10",
src/assets/less/amap-item.less
+1
View File
@@ -31,6 +31,7 @@
//marker
.amap-marker-label {
padding: 0;
border: none;
}
.alarm-content {
src/assets/less/index.less
+4
View File
@@ -68,6 +68,10 @@
}
// 下拉框样式-start
.ant-select {
background-color: #000;
}
.ant-select-dropdown {
background-color: #00152b !important;
border-right: 1px solid #1b7ef2;
src/assets/mapUtils/commonFun.ts
+34
View File
@@ -1,5 +1,6 @@
import { mapIcon1, mapIcon2, mapIcon3, mapIcon4 } from '/@/components/chinaMap/chinaHooks.ts';
import { watchIcon } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
import * as turf from '@turf/turf';
/**
* @desc 创建icon
@@ -60,3 +61,36 @@ export function createCircle(option) {
...option,
});
}
export function getLonLat(result = []) {
let arr = [];
for (let i = 0; i < result.length; i++) {
let { lon, lat, lng } = result[i];
if (lng) {
lon = lng;
}
if (!lon || !lat) {
continue;
}
let point = turf.point([lon, lat]);
arr.push(point);
}
return arr;
}
/**
* @desc 根据多点算中心点
*/
export function getCenter(list = []) {
if (!list || !Array.isArray(list)) {
return undefined;
}
if (list.length < 1) {
return undefined;
}
let features = turf.featureCollection(list);
let centerObj = turf.center(features);
return centerObj?.geometry?.coordinates;
}
// export function
src/assets/mapUtils/map.ts
+12 -11
View File
@@ -1,17 +1,12 @@
import AMapLoader from '@amap/amap-jsapi-loader';
import china from '/@/assets/lngLat/china.ts';
import chinaInner from '/@/assets/lngLat/chinaInner.ts';
import { createCircle, createIcon, typeToIcon } from '/@/assets/mapUtils/commonFun.ts';
import { createCircle, createIcon, getCenter, getLonLat, typeToIcon } from '/@/assets/mapUtils/commonFun.ts';
import { aircraftContent, alarmIcon } from '/@/components/chinaMap/chinaHooks.ts';
import { isFunction } from '/@/utils/is.ts';
import { Callback, ExtDataType, InitMap, MarkerOption, ResultType } from '/@/assets/mapUtils/mapFunTypes.ts';
import { defaultOption, getZoom, mapKey, mapPlugin } from '/@/assets/mapUtils/mapConstant.ts';
export const defaultOption = {
center: [106.3, 37.87], //地图中心点
zoom: 4.3, //地图显示的缩放级别
mapStyle: 'darkblue', //地图样式
};
export const mapPlugin = ['AMap.ToolBar', 'AMap.Driving', 'AMap.GeoJSON', 'AMap.MarkerCluster', 'AMap.PlaceSearch'];
let AMap = null;
export const Map = {
map: null,
@@ -29,7 +24,7 @@ export const Map = {
initMap({ el, option }: InitMap) {
return new Promise((resolve) => {
AMapLoader.load({
key: '4bbcb216b889f2d612cbed05ae6979c8', // 申请好的Web端开发者Key，首次调用 load 时必填
key: mapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: mapPlugin, // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((res) => {
@@ -40,7 +35,7 @@ export const Map = {
resizeEnable: true,
center: center,
zoom: zoom,
mapStyle: 'amap://styles/darkblue',
mapStyle: 'amap://styles/' + mapStyle,
version: '2.0',
});
// 异步同时加载多个插件
@@ -105,6 +100,7 @@ export const Map = {
if (this.airMarkerList) {
this.airMarkerList = [];
}
this.clearActiveHospital();
// this.map.remove(this.airMarkerList);
}, //
/**
@@ -116,6 +112,10 @@ export const Map = {
createOverlay(result: ResultType[], extData?: ExtDataType, callback?: Callback) {
this.removeOverlayGroup();
this.overlayGroup = new AMap.OverlayGroup();
let list = getLonLat(result);
let center = getCenter(list);
let zoom = getZoom(list);
this.setZoomCenter(center, zoom);
for (let i = 0; i < result.length; i++) {
let { type, lon, lat, lng } = result[i];
if (lng) {
@@ -231,6 +231,7 @@ export const Map = {
this.removeOverlayGroup();
this.clearActiveHospital();
if (!cityCode) return;
if (!this.placeSearch) {
this.placeSearch = new AMap.PlaceSearch({
pageSize: 30, // 单页显示结果条数
pageIndex: 1, // 页码
@@ -240,14 +241,14 @@ export const Map = {
// panel: 'map_hospital', // 结果列表将在此容器中进行展示。
autoFitView: false, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});
}
this.placeSearch.setCity(cityCode);
//关键字查询
this.placeSearch.search(keywords);
},
clearActiveHospital() {
if (this.placeSearch) {
// debugger;
this.placeSearch.clear();
this.placeSearch = null;
}
},
createMarker(option: MarkerOption, callbck?: Callback) {
src/assets/mapUtils/mapConstant.ts
+22
View File
@@ -0,0 +1,22 @@
// 地图默认配置
export const defaultOption = {
center: [108.660704, 36.386058], //地图中心点
zoom: 6.5, //地图显示的缩放级别
mapStyle: 'darkblue', //地图样式
};
// 地图key
export const mapKey = '4bbcb216b889f2d612cbed05ae6979c8'
export const mapPlugin = ['AMap.ToolBar', 'AMap.Driving', 'AMap.GeoJSON', 'AMap.MarkerCluster', 'AMap.PlaceSearch'];
//根据数据量设置地图层级
export function getZoom(list = []) {
let len = list.length
// console.log('len', len)
if (len <= 5) {
return 7.5;
} else if (len <= 30) {
return 6.7;
} else {
return 7;
}
}
src/components/body-d-left/oneL.vue
+5 -2
View File
@@ -23,10 +23,10 @@
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import bus from '/@/utils/bus.ts';
import PublicTitle from '../publicTitle.vue';
import { list } from './left.api';
import { timeTab, useSpin, useStatistics } from '/@/components/body-d-left/bodyLeftHooks.ts';
import { useDetailStore } from '/@/store/modules/detailData.ts';
const typeTime = ref(timeTab);
const { statistics, setStatistics } = useStatistics();
@@ -38,6 +38,8 @@
getList();
});
const useDetail = useDetailStore();
async function getList() {
setSpin(true);
try {
@@ -48,7 +50,8 @@
}
setStatistics(result[0]);
let { alerdyreceive = '', totalacceptance = '' } = result[0];
bus.emit('alerdyreceive', { alerdyreceive, totalacceptance });
useDetail.setAlerdyreceive(alerdyreceive);
useDetail.setTotalacceptance(totalacceptance);
} catch {
setSpin(!spinning.value);
}
src/components/chinaMap/chinaMap.vue
+12 -14
View File
@@ -49,12 +49,12 @@
<!-- <div class="level">地图层级：{{ level }}</div>-->
</div>
<div class="center-footer">
<div class="count-item" @click="test">
<div class="num">{{ footerData?.alerdyreceive || '/' }}</div>
<div class="count-item">
<div class="num">{{ useDetail?.alerdyreceive || '/' }}</div>
<div class="text">累计受理</div>
</div>
<div class="count-item">
<div class="num">{{ footerData?.totalacceptance || '/' }}</div>
<div class="num">{{ useDetail?.totalacceptance || '/' }}</div>
<div class="text">累计处置</div>
</div>
</div>
@@ -62,11 +62,12 @@
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import $bus from '/@/utils/bus.ts';
import { message } from 'ant-design-vue';
import { Map } from '/@/assets/mapUtils/map';
import { aircraft, getKmStr, getTimeStr, legendList, mapApiSwitch, tabList, TabType } from '/@/components/chinaMap/chinaHooks';
import { useDetailStore } from '/@/store/modules/detailData.ts';
const useDetail = useDetailStore();
function test() {
Map.clearActiveHospital();
@@ -97,11 +98,15 @@
}
}
const currentCityCode = ref('');
function logMapinfo() {
// let zoom = Map.map.getZoom();
Map.map.getCity(function (info) {
const { citycode } = info;
if (currentCityCode.value != citycode) {
Map.createActiveHospital(citycode);
currentCityCode.value = citycode;
}
});
}
@@ -137,19 +142,12 @@
}
}
const footerData = ref({
alerdyreceive: '',
totalacceptance: '',
});
onMounted(() => {
console.log('reload');
Map.initMap({ el: 'mapContainer' }).then(() => {
getMapData(tabList[0].type);
Map.map && Map.map.on('moveend', setLevel);
Map.map && Map.map.on('zoomend', setLevel);
$bus.on('alerdyreceive', (val) => {
footerData.value = val;
});
Map.map && Map.map.on('zoomend', setLevel);
});
});
const routeList = ref([]);
src/components/secondaryScreen/secondMap/components/watchListDialog.vue
+1 -1
View File
@@ -128,7 +128,7 @@
:deep(.ant-table-tbody > tr > td) {
border-bottom: none;
padding: 0 4px;
padding: 10px 4px;
}
:deep(.ant-table-row:hover) {
src/components/secondaryScreen/secondMap/secondMapHooks.ts
-1
View File
@@ -115,7 +115,6 @@ export function useFooterTable() {
function setFooterList(res: any) {
const arrList = cloneDeep(footerList.value);
if (res) {
console.log('resssss', res);
arrList.forEach((item) => {
item.value = res[item.key];
item.extData = res;
src/router/index.ts
+1 -23
View File
@@ -1,6 +1,4 @@
import { createRouter, createWebHistory, Router, RouteRecordRaw } from 'vue-router';
import {getAuthCache} from '/@/utils/auth.ts';
import {TOKEN_KEY} from '/@/enum/cacheEnum.ts';
const routes: Array<RouteRecordRaw> = [
{
@@ -36,27 +34,7 @@ const routes: Array<RouteRecordRaw> = [
const router: Router = createRouter({
history: createWebHistory('/'),
// mode: 'hash',
routes: [...routes],
});
let token = getAuthCache(TOKEN_KEY);
// router.beforeEach((to, from, next) => {
// console.log('to', to);
// console.log('token', token);
// // token = null;
// if (token) {
// // 如果已经登录的话
// next();
// } else {
// if (to.path === '/login') {
// // 如果是登录页面的话，直接next()
// next();
// } else {
// // 否则 跳转到登录页面
// next({
// path: '/login',
// });
// }
// }
// });
export default router;
src/store/modules/detailData.ts
+17
View File
@@ -0,0 +1,17 @@
import { defineStore } from 'pinia';
export const useDetailStore = defineStore({
id: 'detail-store',
state: () => ({
alerdyreceive: '',
totalacceptance: '',
}),
actions: {
setAlerdyreceive(info) {
this.alerdyreceive = info;
},
setTotalacceptance(info) {
this.totalacceptance = info;
},
},
});
src/utils/utils.ts
+2 -2
View File
@@ -8,9 +8,9 @@ export function getZero(num: any) {
return num;
}
export function useTopTime() {
export function useTopTime(startDay = '2018-10-01') {
const timeLeft = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒');
const timeRight = dayjs().diff(dayjs('2018-10-01'), 'day') + '天';
const timeRight = dayjs().diff(dayjs(startDay), 'day') + '天';
// +
// getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD') + ' 00:00:00'), 'hours')) +
// '时' +
src/views/index.vue
+43 -43
View File
@@ -78,57 +78,57 @@
});
//应急求助
// const { socketData: emergencyData, setSocketData: setEmergencyData, closeSocket: closeSocket2 } = useSocket(emergencyPath);
// const emergencyDialogRef = ref();
//
// watch(emergencyData, (nVal) => {
// if (nVal) {
// nextTick(() => {
// setEmergencyData(nVal);
// emergencyDialogRef.value.openDialog;
// });
// }
// });
const { socketData: emergencyData, setSocketData: setEmergencyData, closeSocket: closeSocket2 } = useSocket(emergencyPath);
const emergencyDialogRef = ref();
watch(emergencyData, (nVal) => {
if (nVal) {
nextTick(() => {
setEmergencyData(nVal);
emergencyDialogRef.value.openDialog;
});
}
});
onUnmounted(() => {
// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
// closeSocket();
// closeSocket2();
closeSocket();
closeSocket2();
};
clearInterval(interval.value);
});
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(() => {
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(() => {
// setEmergencyData(nVal);
// emergencyDialogRef.value.openDialog();
// });
// }
</script>
<style lang="less" scoped>
.outer {
src/views/indexSon.vue
+3 -3
View File
@@ -10,7 +10,7 @@
</span>
</div>
<div class="title-d-middle"> 心血管监测</div>
<div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
<div class="title-d-right"> 累计监测时间：{{ dayTimeT }}</div>
</div>
<div class="body-d">
<div class="body-d-left">
@@ -79,12 +79,12 @@
const dayTimeT = ref();
function getTime() {
const { timeRight } = useTopTime();
const { timeRight } = useTopTime('2022-12-20');
dayTimeT.value = timeRight;
}
function clickBack() {
router.replace({ path: '/home' });
router.push({ path: '/home' });
}
</script>
<style lang="less" scoped>