update 银川地图中心点做特殊处理
This commit is contained in:
@@ -31,6 +31,7 @@ export const Map = {
|
|||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
AMap = res;
|
AMap = res;
|
||||||
const { zoom, center, mapStyle } = { ...defaultOption, ...option };
|
const { zoom, center, mapStyle } = { ...defaultOption, ...option };
|
||||||
|
console.log(zoom, center);
|
||||||
//基本地图加载
|
//基本地图加载
|
||||||
this.map = new AMap.Map(el, {
|
this.map = new AMap.Map(el, {
|
||||||
resizeEnable: true,
|
resizeEnable: true,
|
||||||
@@ -119,14 +120,17 @@ export const Map = {
|
|||||||
* @param result
|
* @param result
|
||||||
* @param extData
|
* @param extData
|
||||||
* @param callback
|
* @param callback
|
||||||
|
* @param computedCenter 是否计算中心点
|
||||||
*/
|
*/
|
||||||
createOverlay(result: ResultType[], extData?: ExtDataType, callback?: Callback) {
|
createOverlay(result: ResultType[], extData?: ExtDataType, callback?: Callback, computedCenter?: boolean) {
|
||||||
this.removeOverlayGroup();
|
this.removeOverlayGroup();
|
||||||
this.overlayGroup = new AMap.OverlayGroup();
|
this.overlayGroup = new AMap.OverlayGroup();
|
||||||
let list = getLonLat(result);
|
let list = getLonLat(result);
|
||||||
let center = getCenter(list);
|
let center = getCenter(list);
|
||||||
let zoom = getZoom(list);
|
let zoom = getZoom(list);
|
||||||
|
if (computedCenter) {
|
||||||
this.setZoomCenter(center, zoom);
|
this.setZoomCenter(center, zoom);
|
||||||
|
}
|
||||||
for (let i = 0; i < result.length; i++) {
|
for (let i = 0; i < result.length; i++) {
|
||||||
let { type, lon, lat, lng } = result[i];
|
let { type, lon, lat, lng } = result[i];
|
||||||
if (lng) {
|
if (lng) {
|
||||||
|
|||||||
@@ -1,9 +1,15 @@
|
|||||||
// 西安地图默认配置
|
// 西安地图默认配置
|
||||||
export const defaultOption = {
|
export const defaultOption = {
|
||||||
// center: [108.660704, 36.386058], //地图中心点
|
center: [108.660704, 36.386058], //地图中心点
|
||||||
zoom: 6.5, //地图显示的缩放级别
|
zoom: 6.5, //地图显示的缩放级别
|
||||||
mapStyle: 'darkblue', //地图样式
|
mapStyle: 'darkblue', //地图样式
|
||||||
};
|
};
|
||||||
|
export const YinChuanOption = {
|
||||||
|
center: [106.32, 38.45], //地图中心点
|
||||||
|
zoom: 8, //地图显示的缩放级别
|
||||||
|
mapStyle: 'darkblue', //地图样式
|
||||||
|
};
|
||||||
|
|
||||||
// 地图key
|
// 地图key
|
||||||
export const mapKey = '4bbcb216b889f2d612cbed05ae6979c8';
|
export const mapKey = '4bbcb216b889f2d612cbed05ae6979c8';
|
||||||
export const mapPlugin = ['AMap.ToolBar', 'AMap.Driving', 'AMap.GeoJSON', 'AMap.MarkerCluster', 'AMap.PlaceSearch'];
|
export const mapPlugin = ['AMap.ToolBar', 'AMap.Driving', 'AMap.GeoJSON', 'AMap.MarkerCluster', 'AMap.PlaceSearch'];
|
||||||
|
|||||||
@@ -48,7 +48,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- <div class="level">地图层级:{{ level }}</div>-->
|
<!-- <div class="level">地图层级:{{ level }}</div>-->
|
||||||
</div>
|
</div>
|
||||||
<div class="center-footer">
|
<div class="center-footer" v-if="showFooter">
|
||||||
<div class="count-item">
|
<div class="count-item">
|
||||||
<div class="num">{{ useDetail?.alerdyreceive || '0' }}</div>
|
<div class="num">{{ useDetail?.alerdyreceive || '0' }}</div>
|
||||||
<div class="text">累计受理</div>
|
<div class="text">累计受理</div>
|
||||||
@@ -67,6 +67,26 @@
|
|||||||
import { aircraft, getKmStr, getTimeStr, legendList, mapApiSwitch, tabList, TabType } from '/@/components/chinaMap/chinaHooks';
|
import { aircraft, getKmStr, getTimeStr, legendList, mapApiSwitch, tabList, TabType } from '/@/components/chinaMap/chinaHooks';
|
||||||
import { useDetailStore } from '/@/store/modules/detailData.ts';
|
import { useDetailStore } from '/@/store/modules/detailData.ts';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
showFooter: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => {
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computedCenter: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => {
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mapOptions: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
const useDetail = useDetailStore();
|
const useDetail = useDetailStore();
|
||||||
const formState = ref({
|
const formState = ref({
|
||||||
start: '',
|
start: '',
|
||||||
@@ -116,7 +136,9 @@
|
|||||||
const { code, result } = await mapApiSwitch(type, params);
|
const { code, result } = await mapApiSwitch(type, params);
|
||||||
if (code == 200) {
|
if (code == 200) {
|
||||||
if (Array.isArray(result) && result.length > 0) {
|
if (Array.isArray(result) && result.length > 0) {
|
||||||
Map.createOverlay(result, {
|
Map.createOverlay(
|
||||||
|
result,
|
||||||
|
{
|
||||||
content: (val) => {
|
content: (val) => {
|
||||||
return `<div style="
|
return `<div style="
|
||||||
width: 21px;
|
width: 21px;
|
||||||
@@ -126,7 +148,10 @@
|
|||||||
top: -20px;" title="${val?.name}">
|
top: -20px;" title="${val?.name}">
|
||||||
</div>`;
|
</div>`;
|
||||||
},
|
},
|
||||||
});
|
},
|
||||||
|
() => {},
|
||||||
|
props.computedCenter
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
Map.removeOverlayGroup();
|
Map.removeOverlayGroup();
|
||||||
}
|
}
|
||||||
@@ -137,7 +162,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
Map.initMap({ el: 'mapContainer' }).then(() => {
|
Map.initMap({ el: 'mapContainer', option: props.mapOptions }).then(() => {
|
||||||
getMapData(tabList[0].type);
|
getMapData(tabList[0].type);
|
||||||
Map.map && Map.map.on('zoomend', setLevel);
|
Map.map && Map.map.on('zoomend', setLevel);
|
||||||
Map.map && Map.map.on('zoomend', setLevel);
|
Map.map && Map.map.on('zoomend', setLevel);
|
||||||
|
|||||||
@@ -1,12 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<Dialog :openVis="visible" width="50%" title="健康终端报警列表" @close="closeDialog" :maskClosable="false">
|
<Dialog :openVis="visible" width="50%" title="健康终端报警列表" @close="closeDialog" :maskClosable="false">
|
||||||
<template #container>
|
<template #container>
|
||||||
<BasicTable ref="registerTable" class="table-container" :columns="columns" :api="getMonitorList" :apiParams="formState"></BasicTable>
|
<BasicTable ref="registerTable" class="table-container" :columns="columns" :api="getMonitorList" :apiParams="formState">
|
||||||
|
<template #address="{ record, column, index }">
|
||||||
|
<span v-if="record['address']">{{ record?.address }}</span>
|
||||||
|
<span v-else style="color: #eb3636">{{ record?.gpsErrorMsg }}</span>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
</template>
|
</template>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref, watch } from 'vue';
|
import { computed, ref, watch, h } from 'vue';
|
||||||
import Dialog from '/@/components/dialog/Dialog.vue';
|
import Dialog from '/@/components/dialog/Dialog.vue';
|
||||||
import { useDialog } from '/@/views/components/dialogHooks.ts';
|
import { useDialog } from '/@/views/components/dialogHooks.ts';
|
||||||
import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
|
import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
|
||||||
@@ -30,8 +35,8 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '二级单位',
|
title: '二级单位',
|
||||||
dataIndex: 'orgName1',
|
dataIndex: 'orgName2',
|
||||||
key: 'orgName1',
|
key: 'orgName2',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '联系电话',
|
title: '联系电话',
|
||||||
@@ -57,9 +62,14 @@
|
|||||||
title: '发生地点',
|
title: '发生地点',
|
||||||
dataIndex: 'address',
|
dataIndex: 'address',
|
||||||
key: 'address',
|
key: 'address',
|
||||||
customRender: ({ record }) => {
|
slot: 'address',
|
||||||
return record?.address || record?.gpsErrorMsg;
|
// customRender: ({ record }) => {
|
||||||
},
|
// if (record?.address) {
|
||||||
|
// return record?.address;
|
||||||
|
// } else {
|
||||||
|
// return h('span', { style: { color: '#eb3636' } }, record?.gpsErrorMsg);
|
||||||
|
// }
|
||||||
|
// },
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
const formState = computed(() => ({
|
const formState = computed(() => ({
|
||||||
|
|||||||
@@ -4,7 +4,10 @@
|
|||||||
<div class="title-d-left">
|
<div class="title-d-left">
|
||||||
{{ dayTimeO }}
|
{{ dayTimeO }}
|
||||||
</div>
|
</div>
|
||||||
<div class="title-d-middle"> 银川应急就医服务中心</div>
|
<div class="title-d-middle">
|
||||||
|
<span>{{ title }}</span>
|
||||||
|
<span class="phone">{{ phone }}</span>
|
||||||
|
</div>
|
||||||
<div class="title-d-right"> 累计运行时间:{{ dayTimeT }}</div>
|
<div class="title-d-right"> 累计运行时间:{{ dayTimeT }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="body-d">
|
<div class="body-d">
|
||||||
@@ -15,7 +18,7 @@
|
|||||||
<DailyWorkTrends :refreshState="refreshState" class="daily-work-trends" />
|
<DailyWorkTrends :refreshState="refreshState" class="daily-work-trends" />
|
||||||
</div>
|
</div>
|
||||||
<div class="body-d-middle">
|
<div class="body-d-middle">
|
||||||
<china-map />
|
<china-map :showFooter="false" :computedCenter="false" :mapOptions="YinChuanOption" />
|
||||||
</div>
|
</div>
|
||||||
<div class="body-d-right">
|
<div class="body-d-right">
|
||||||
<!--健康终端报警-->
|
<!--健康终端报警-->
|
||||||
@@ -52,11 +55,15 @@
|
|||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import { DataType, getSettings } from '/@/utils/settings.ts';
|
import { DataType, getSettings } from '/@/utils/settings.ts';
|
||||||
import { ServerDetailType } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
import { ServerDetailType } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||||
|
import { YinChuanOption } from '/@/assets/mapUtils/mapConstant.ts';
|
||||||
|
|
||||||
|
const title = ref('银川片应急就医服务中心');
|
||||||
|
const phone = '(0951-6805199)';
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const setting = getSettings(DataType.yinChuan);
|
const setting = getSettings(DataType.yinChuan);
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
init();
|
init();
|
||||||
|
document.title = title.value;
|
||||||
document.addEventListener('visibilitychange', checkTabState);
|
document.addEventListener('visibilitychange', checkTabState);
|
||||||
});
|
});
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
@@ -210,6 +217,13 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.title-d-middle {
|
||||||
|
.phone {
|
||||||
|
font-size: 27px;
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
> :nth-child(1) {
|
> :nth-child(1) {
|
||||||
width: 29%;
|
width: 29%;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user