diff --git a/src/assets/images/map/m1.png b/src/assets/images/map/m1.png new file mode 100644 index 0000000..128800e Binary files /dev/null and b/src/assets/images/map/m1.png differ diff --git a/src/assets/images/map/m2.png b/src/assets/images/map/m2.png new file mode 100644 index 0000000..630babe Binary files /dev/null and b/src/assets/images/map/m2.png differ diff --git a/src/view/analyze.vue b/src/view/analyze.vue index 29f47ea..4ffaa4c 100644 --- a/src/view/analyze.vue +++ b/src/view/analyze.vue @@ -50,7 +50,7 @@
-
+
diff --git a/src/view/dialog/dialogMap.vue b/src/view/dialog/dialogMap.vue index a2f924e..37f604b 100644 --- a/src/view/dialog/dialogMap.vue +++ b/src/view/dialog/dialogMap.vue @@ -45,7 +45,8 @@
- + +
@@ -63,7 +64,7 @@ import { } from "vue"; import { CircleCloseFilled } from "@element-plus/icons-vue"; import Map from "../echart_analyze/map.vue"; - +import Map2 from "./echarts/map.vue"; const props = defineProps({ dialogShowMap: { type: Boolean, @@ -77,24 +78,6 @@ const props = defineProps({ return ""; }, }, - list1: { - type: Array, - default: () => { - return []; - }, - }, - list2: { - type: Array, - default: () => { - return []; - }, - }, - year: { - type: Array, - default: () => { - return []; - }, - }, }); const emit = defineEmits(["close"]); @@ -117,29 +100,14 @@ watch( } ); watch( - () => props.list1, + () => props.title, (newVal, oldVal) => { - data.list1 = newVal; - } -); -watch( - () => props.list2, - (newVal, oldVal) => { - data.list2 = newVal; - } -); -watch( - () => props.year, - (newVal, oldVal) => { - data.year = newVal; + data.title = newVal; } ); // 使用生命钩子 onMounted(() => { data.title = props.title; - data.list1 = props.list1; - data.list2 = props.list2; - data.year = props.year; }); const closeDialog = () => { diff --git a/src/view/dialog/dialogMap2.vue b/src/view/dialog/dialogMap2.vue new file mode 100644 index 0000000..befb84e --- /dev/null +++ b/src/view/dialog/dialogMap2.vue @@ -0,0 +1,225 @@ + + + + \ No newline at end of file diff --git a/src/view/dialog/echarts/map.vue b/src/view/dialog/echarts/map.vue new file mode 100644 index 0000000..636fa62 --- /dev/null +++ b/src/view/dialog/echarts/map.vue @@ -0,0 +1,258 @@ + + + + + + diff --git a/src/view/echart_analyze/map.vue b/src/view/echart_analyze/map.vue index 7b5a579..737d627 100644 --- a/src/view/echart_analyze/map.vue +++ b/src/view/echart_analyze/map.vue @@ -9,27 +9,45 @@ import { onBeforeMount, onBeforeUnmount, computed, + defineProps, + watch, } from "vue"; -var map = null +const props = defineProps({ + center: { + type: Array, + default: () => { + return [119.178783, 29.034583]; + }, + }, +}); +var map = null; const initMap = () => { - map = new BMapGL.Map('map', { minZoom: 11, maxZoom: 20 }) - map.enableScrollWheelZoom(true) + map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 }); + map.enableScrollWheelZoom(true); map.setMapStyleV2({ - styleId: 'd0acde891abd157741b71e12670ee2e6' - }) - goMapCenter([119.178783,29.034583], 15) -} + styleId: "d0acde891abd157741b71e12670ee2e6", + }); + goMapCenter(props.center, 15); +}; //地图中点 const goMapCenter = (point, zoom) => { - map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom) -} + map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom); +}; +watch( + () => props.center, + (newVal) => { + console.log(newVal); + goMapCenter(newVal, 15); + } +); onMounted(() => { - initMap() -}) + + initMap(); +}); \ No newline at end of file diff --git a/src/view/yl.vue b/src/view/yl.vue index 04cecfa..47bd4a5 100644 --- a/src/view/yl.vue +++ b/src/view/yl.vue @@ -219,7 +219,7 @@
{{ data.yljgzlzx.yljg }} @@ -313,6 +313,8 @@
晚餐
+ +
@@ -329,6 +331,7 @@ import ylJHSY from "./echarts_yl/ylJHSY.vue"; import ylSMFW from "./echarts_yl/ylSMFW.vue"; import ylXZZC from "./echarts_yl/ylXZZC.vue"; import Dialog from "./dialog/dialog.vue"; +import DialogMap from "./dialog/dialogMap.vue"; import { ref, onMounted, onBeforeMount, reactive, computed } from "vue"; import http from "@/utils/request.js"; const leftchoose = ref({ @@ -339,6 +342,8 @@ const leftchoose = ref({ const showEchart = ref(false); // 详情弹框 const dialogShow = ref(false); +const dialogShowMap = ref(false); +const mapTitle = ref(""); const tableType = reactive({ url: "", title: "", @@ -439,6 +444,11 @@ const showDialog = (title, url, coulumn) => { getTable(url, pagination.currentPage); }; +//养老机构地图 +const showMapDialog =(title)=>{ + mapTitle.value = title; + dialogShowMap.value = true; +} //获取表格数据 const getTable = (url, currentPage) => { http @@ -453,6 +463,7 @@ const getTable = (url, currentPage) => { }; const close = () => { dialogShow.value = false; + dialogShowMap.value = false; pagination.currentPage = 1; pagination.total = 100; };