From dfa2e66389df106ef38a4fd621f2e3e0cf91ace8 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 08 三月 2024 15:28:48 +0800
Subject: [PATCH] feat:地图信息框点击
---
src/assets/img/test_img/show_img4.jpeg | 0
src/views/daoAnOffice/center/dialog/dialog-type5.vue | 153 ++++++
src/views/daoAnOffice/center/dialog/dialog-type3.vue | 121 +++++
src/views/daoAnOffice/center/dialog/dialog-type2.vue | 93 ++++
src/views/daoAnOffice/center/map.vue | 84 +++
src/views/daoAnOffice/center/dialog/dialog-type7.vue | 146 ++++++
src/assets/img/test_img/show_img2.jpg | 0
src/views/daoAnOffice/center-map.vue | 11
src/views/daoAnOffice/center/dialog/dialog-type9.vue | 145 ++++++
src/assets/img/test_img/show_img1.jpg | 0
src/views/daoAnOffice/center/dialog/dialog-type1.vue | 92 ++++
src/views/daoAnOffice/center/dialog/dialog-type6.vue | 142 ++++++
src/views/daoAnOffice/center/dialog/dialog-type4.vue | 139 ++++++
src/assets/img/test_img/show_img3.jpg | 0
src/views/daoAnOffice/center/dialog/dialog-type8.vue | 150 ++++++
15 files changed, 1,269 insertions(+), 7 deletions(-)
diff --git a/src/assets/img/test_img/show_img1.jpg b/src/assets/img/test_img/show_img1.jpg
new file mode 100644
index 0000000..a5dd2e9
--- /dev/null
+++ b/src/assets/img/test_img/show_img1.jpg
Binary files differ
diff --git a/src/assets/img/test_img/show_img2.jpg b/src/assets/img/test_img/show_img2.jpg
new file mode 100644
index 0000000..7b676ef
--- /dev/null
+++ b/src/assets/img/test_img/show_img2.jpg
Binary files differ
diff --git a/src/assets/img/test_img/show_img3.jpg b/src/assets/img/test_img/show_img3.jpg
new file mode 100644
index 0000000..31843ea
--- /dev/null
+++ b/src/assets/img/test_img/show_img3.jpg
Binary files differ
diff --git a/src/assets/img/test_img/show_img4.jpeg b/src/assets/img/test_img/show_img4.jpeg
new file mode 100644
index 0000000..3ecc379
--- /dev/null
+++ b/src/assets/img/test_img/show_img4.jpeg
Binary files differ
diff --git a/src/views/daoAnOffice/center-map.vue b/src/views/daoAnOffice/center-map.vue
index fa8412e..d32e142 100644
--- a/src/views/daoAnOffice/center-map.vue
+++ b/src/views/daoAnOffice/center-map.vue
@@ -5,6 +5,16 @@
</div>
<div class="mapwrap">
<CityMap @mapItemClick="mapItemClick" @cancleClick="cancleClick"></CityMap>
+
+ <!-- <DialogType1></DialogType1>
+ <DialogType2></DialogType2>
+ <DialogType3></DialogType3>
+ <DialogType4></DialogType4>
+ <DialogType5></DialogType5>
+ <DialogType6></DialogType6>
+ <DialogType7></DialogType7>
+ <DialogType8></DialogType8>
+ <DialogType9></DialogType9> -->
</div>
<div class="map-info-container">
@@ -64,6 +74,7 @@
<script setup>
import CityMap from './center/city-map.vue';
+
import { ref,onMounted } from "vue";
const mapData = ref([
{
diff --git a/src/views/daoAnOffice/center/dialog/dialog-type1.vue b/src/views/daoAnOffice/center/dialog/dialog-type1.vue
new file mode 100644
index 0000000..b6e8675
--- /dev/null
+++ b/src/views/daoAnOffice/center/dialog/dialog-type1.vue
@@ -0,0 +1,92 @@
+<template>
+ <!-- 淇℃伅寮圭獥涓� 浜嬫晠璺-->
+ <div class="dialog-container" ref="dialog">
+ <div class="dialog-content">
+ <el-scrollbar max-height="200px">
+ <div class="scroll-content">
+ <div class="dialog-title">鏂伴┈璺竴娈�</div>
+ <div class="dialog-text">
+ 杩�3骞村彂鐢熶氦閫氫簨鏁厁x璧凤紝 鍏朵腑閫犳垚浜哄憳浼や骸xx璧�
+ </div>
+ </div>
+ </el-scrollbar>
+ </div>
+ </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+$bg-color: #572438;
+$border-color: #B24C57;
+$title-color: #FE3146;
+$text-color: #D991AA;
+
+.dialog-container {
+ width: 205px;
+ position: relative;
+ background-color: $bg-color;
+ border: 1px solid $border-color;
+ border-radius: 5px;
+
+ .dialog-content {
+ width: 100%;
+ }
+ .scroll-content {
+ width: 100%;
+ padding: 14px 18px;
+ }
+
+ &:before {
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0;
+ border: 8px solid transparent;
+ border-color: $bg-color transparent transparent transparent;
+ content: '';
+ z-index: 12;
+ border-left-width: 6px;
+ border-right-width: 6px;
+ }
+
+ &:after {
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0;
+ border: 10px solid transparent;
+ border-color: $border-color transparent transparent transparent;
+ content: '';
+ z-index: 10;
+ border-left-width: 8px;
+ border-right-width: 8px;
+ }
+}
+
+.dialog-title {
+ font-family: PingFang SC;
+ font-weight: 500;
+ font-size: 14px;
+ color: $title-color;
+ line-height: 20px;
+ margin-bottom: 13px;
+}
+
+.dialog-text {
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-size: 14px;
+ color: $text-color;
+ line-height: 20px;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/daoAnOffice/center/dialog/dialog-type2.vue b/src/views/daoAnOffice/center/dialog/dialog-type2.vue
new file mode 100644
index 0000000..d8b2fab
--- /dev/null
+++ b/src/views/daoAnOffice/center/dialog/dialog-type2.vue
@@ -0,0 +1,93 @@
+<template>
+ <!-- 淇℃伅寮圭獥浜� 鏃呮父閫氶亾-->
+ <div class="dialog-container" ref="dialog">
+ <div class="dialog-content">
+ <el-scrollbar max-height="200px">
+ <div class="scroll-content">
+ <div class="dialog-title">閮芥睙鍫板杩愪腑蹇�</div>
+ <div class="dialog-text">
+ 鏃ョ疮绉汉娴侀噺杈惧埌3000+
+ </div>
+ </div>
+ </el-scrollbar>
+ </div>
+ </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+$bg-color: #275767;
+$border-color: #58B1B3;
+$title-color: #17CDD2;
+$text-color: #7ACDCF;
+
+.dialog-container {
+ width: 205px;
+ position: relative;
+ background-color: $bg-color;
+ border: 1px solid $border-color;
+ border-radius: 5px;
+
+ .dialog-content {
+ width: 100%;
+ }
+
+ .scroll-content {
+ width: 100%;
+ padding: 14px 18px;
+ }
+
+ &:before {
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0;
+ border: 8px solid transparent;
+ border-color: $bg-color transparent transparent transparent;
+ content: '';
+ z-index: 12;
+ border-left-width: 6px;
+ border-right-width: 6px;
+ }
+
+ &:after {
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0;
+ border: 10px solid transparent;
+ border-color: $border-color transparent transparent transparent;
+ content: '';
+ z-index: 10;
+ border-left-width: 8px;
+ border-right-width: 8px;
+ }
+}
+
+.dialog-title {
+ font-family: PingFang SC;
+ font-weight: 500;
+ font-size: 14px;
+ color: $title-color;
+ line-height: 20px;
+ margin-bottom: 13px;
+}
+
+.dialog-text {
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-size: 14px;
+ color: $text-color;
+ line-height: 20px;
+ margin-bottom: 13px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/daoAnOffice/center/dialog/dialog-type3.vue b/src/views/daoAnOffice/center/dialog/dialog-type3.vue
new file mode 100644
index 0000000..9827292
--- /dev/null
+++ b/src/views/daoAnOffice/center/dialog/dialog-type3.vue
@@ -0,0 +1,121 @@
+<template>
+ <!-- 淇℃伅寮圭獥涓� 鏅尯-->
+ <div class="dialog-container" ref="dialog">
+ <div class="dialog-content">
+ <el-scrollbar max-height="277px">
+ <div class="scroll-content">
+ <div class="dialog-title">閮芥睙鍫伴潚鍩庡北鏅尯</div>
+ <div class="dialog-text">
+ 闈掑煄灞憋紙Mount Qingcheng锛夛紝涓栫晫鏂囧寲閬椾骇闈掑煄灞�-閮芥睙鍫扮殑涓讳綋鏅尯銆佸叏鍥介噸鐐规枃
+ 鐗╀繚鎶ゅ崟浣嶃�佸浗瀹堕噸鐐归鏅悕鑳滃尯銆佸浗瀹禔AAAA绾ф梾娓告櫙鍖恒�佸叏鐪熼緳闂ㄦ淳鍦ｅ湴锛屽崄澶�
+ 娲炲ぉ涔嬩竴锛屼腑鍥藉洓澶ч亾鏁欏悕灞变箣涓�锛屼簲澶т粰灞变箣涓�锛屾垚閮藉崄鏅箣涓�銆�
+ </div>
+ <div class="dialog-img">
+ <div class="img-item">
+ <img src="@/assets/img/test_img/show_img1.jpg">
+ </div>
+ <div class="img-item">
+ <img src="@/assets/img/test_img/show_img2.jpg">
+ </div>
+ </div>
+ </div>
+ </el-scrollbar>
+ </div>
+ </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+$bg-color: #244E45;
+$border-color: #65B68D;
+$title-color: #2BB06D;
+$text-color: #94E8BE;
+
+.dialog-container {
+ position: relative;
+ background-color: $bg-color;
+ border: 1px solid $border-color;
+ border-radius: 5px;
+ max-width: 565px;
+
+ .dialog-content {
+ width: 100%;
+ }
+
+ .scroll-content {
+ width: 100%;
+ padding: 14px 18px;
+ }
+
+ &:before {
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0;
+ border: 8px solid transparent;
+ border-color: $bg-color transparent transparent transparent;
+ content: '';
+ z-index: 12;
+ border-left-width: 6px;
+ border-right-width: 6px;
+ }
+
+ &:after {
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0;
+ border: 10px solid transparent;
+ border-color: $border-color transparent transparent transparent;
+ content: '';
+ z-index: 10;
+ border-left-width: 8px;
+ border-right-width: 8px;
+ }
+}
+
+.dialog-title {
+ font-family: PingFang SC;
+ font-weight: 500;
+ font-size: 14px;
+ color: $title-color;
+ line-height: 20px;
+ margin-bottom: 13px;
+}
+
+.dialog-text {
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-size: 14px;
+ color: $text-color;
+ line-height: 20px;
+ margin-bottom: 13px;
+}
+
+.dialog-img {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ .img-item {
+ width: 247px;
+ height: 125px;
+ margin-bottom: 13px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/daoAnOffice/center/dialog/dialog-type4.vue b/src/views/daoAnOffice/center/dialog/dialog-type4.vue
new file mode 100644
index 0000000..2df5b0c
--- /dev/null
+++ b/src/views/daoAnOffice/center/dialog/dialog-type4.vue
@@ -0,0 +1,139 @@
+<template>
+ <!-- 淇℃伅寮圭獥鍥� 璀﹀姏-->
+ <div class="dialog-container" ref="dialog">
+ <div class="dialog-content">
+ <el-scrollbar max-height="277px">
+ <div class="scroll-content">
+ <div class="dialog-title">鎴愰兘鐧捐揣澶фゼ浜ゅ弶璺彛</div>
+ <div class="info-container">
+ <div class="info-item">
+ <span class="lable">鍦ㄥ矖璀﹀姏</span>
+ <span class="num">5</span>
+ </div>
+ <div class="info-item">
+ <span class="lable">鍦ㄥ矖璀﹁溅</span>
+ <span class="num">2</span>
+ </div>
+ <div class="info-item">
+ <span class="lable">澶囧嫟璀﹀姏</span>
+ <span class="num">3</span>
+ </div>
+ </div>
+ </div>
+ </el-scrollbar>
+ </div>
+ </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+$bg-color: #182A54;
+$border-color: #5695F5;
+$title-color: #005DBA;
+$text-color: #94E8BE;
+
+.dialog-container {
+ position: relative;
+ background-color: $bg-color;
+ border: 1px solid $border-color;
+ border-radius: 5px;
+ max-width: 210px;
+
+ .dialog-content {
+ width: 100%;
+ }
+
+ .scroll-content {
+ width: 100%;
+ padding: 14px 18px;
+ }
+
+ &:before {
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0;
+ border: 8px solid transparent;
+ border-color: $bg-color transparent transparent transparent;
+ content: '';
+ z-index: 12;
+ border-left-width: 6px;
+ border-right-width: 6px;
+ }
+
+ &:after {
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0;
+ border: 10px solid transparent;
+ border-color: $border-color transparent transparent transparent;
+ content: '';
+ z-index: 10;
+ border-left-width: 8px;
+ border-right-width: 8px;
+ }
+}
+
+.dialog-title {
+ font-family: PingFang SC;
+ font-weight: 500;
+ font-size: 14px;
+ color: $title-color;
+ line-height: 20px;
+ margin-bottom: 13px;
+}
+
+.dialog-text {
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-size: 14px;
+ color: $text-color;
+ line-height: 20px;
+ margin-bottom: 13px;
+}
+
+.dialog-img {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ .img-item {
+ width: 247px;
+ height: 125px;
+ margin-bottom: 13px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+}
+
+.info-container {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ margin-bottom: 10px;
+ font-size: 14px;
+
+ .info-item {
+ color: #9DB8DF;
+
+ .num {
+ color: #E5BF33;
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/daoAnOffice/center/dialog/dialog-type5.vue b/src/views/daoAnOffice/center/dialog/dialog-type5.vue
new file mode 100644
index 0000000..38a5307
--- /dev/null
+++ b/src/views/daoAnOffice/center/dialog/dialog-type5.vue
@@ -0,0 +1,153 @@
+<template>
+ <!-- 淇℃伅寮圭獥浜� 鏂藉伐-->
+ <div class="dialog-container" ref="dialog">
+ <div class="dialog-content">
+ <el-scrollbar max-height="277px">
+ <div class="scroll-content">
+ <div class="dialog-title">閮芥睙鍫伴潚鍩庡北鏅尯</div>
+ <div class="info-container">
+ <div class="info-item">
+ <span class="lable">鏂藉伐鍗曚綅:</span>
+ <span class="num">XXXX鍏徃</span>
+ </div>
+ <div class="info-item">
+ <span class="lable">鏂藉伐鍛ㄦ湡:</span>
+ <span class="num">1骞�</span>
+ </div>
+ <div class="info-item">
+ <span class="lable">寮�濮嬫椂闂�:</span>
+ <span class="num">2024骞�1鏈�</span>
+ </div>
+ </div>
+ <div class="infor-desc">
+ 鏈鏂藉伐鍖呮嫭xxxxxxxxxxxxxxxxxxxxxxxxxx
+ xxxxxxxxxxxxxx銆�
+ </div>
+ </div>
+ </el-scrollbar>
+ </div>
+ </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+$bg-color: #1D3D61;
+$border-color: #629BB9;
+$title-color: #0F80BC;
+$text-color: #79B7D7;
+
+.dialog-container {
+ position: relative;
+ background-color: $bg-color;
+ border: 1px solid $border-color;
+ border-radius: 5px;
+ max-width: 305px;
+
+ .dialog-content {
+ width: 100%;
+ }
+
+ .scroll-content {
+ width: 100%;
+ padding: 14px 18px;
+ }
+
+ &:before {
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0;
+ border: 8px solid transparent;
+ border-color: $bg-color transparent transparent transparent;
+ content: '';
+ z-index: 12;
+ border-left-width: 6px;
+ border-right-width: 6px;
+ }
+
+ &:after {
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0;
+ border: 10px solid transparent;
+ border-color: $border-color transparent transparent transparent;
+ content: '';
+ z-index: 10;
+ border-left-width: 8px;
+ border-right-width: 8px;
+ }
+}
+
+.dialog-title {
+ font-family: PingFang SC;
+ font-weight: 500;
+ font-size: 14px;
+ color: $title-color;
+ line-height: 20px;
+ margin-bottom: 13px;
+}
+
+.dialog-text {
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-size: 14px;
+ color: $text-color;
+ line-height: 20px;
+ margin-bottom: 13px;
+}
+
+.dialog-img {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ .img-item {
+ width: 247px;
+ height: 125px;
+ margin-bottom: 13px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+}
+
+.info-container {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ font-size: 14px;
+
+ span {
+ margin-left: 0;
+ }
+
+ .info-item {
+ color: $text-color;
+
+ .num {
+ color: $text-color;
+ }
+ }
+}
+
+.infor-desc {
+ font-size: 14px;
+ word-break: break-all;
+ color: $text-color;
+ margin-bottom: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/daoAnOffice/center/dialog/dialog-type6.vue b/src/views/daoAnOffice/center/dialog/dialog-type6.vue
new file mode 100644
index 0000000..9fd9db3
--- /dev/null
+++ b/src/views/daoAnOffice/center/dialog/dialog-type6.vue
@@ -0,0 +1,142 @@
+<template>
+ <!-- 淇℃伅寮圭獥鍏� 浜嬫晠鍙戠敓鐐�-->
+ <div class="dialog-container" ref="dialog">
+ <div class="dialog-content">
+ <el-scrollbar max-height="277px">
+ <div class="scroll-content">
+ <div class="dialog-title">xx璺笌xx璺氦鍙夎矾鍙�</div>
+ <div class="dialog-text">
+ 杩�3骞村彂鐢熶氦閫氫簨鏁厁x璧凤紝鍏朵腑閫犳垚浜哄憳浼や骸 xx璧凤紝xxxxxxxxxxxxxxxxxx銆�
+ </div>
+
+ </div>
+ </el-scrollbar>
+ </div>
+ </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+$bg-color: #522933;
+$border-color: #F2908C;
+$title-color: #FE433C;
+$text-color: #F2908C;
+
+.dialog-container {
+ position: relative;
+ background-color: $bg-color;
+ border: 1px solid $border-color;
+ border-radius: 5px;
+ max-width: 305px;
+
+ .dialog-content {
+ width: 100%;
+ }
+
+ .scroll-content {
+ width: 100%;
+ padding: 14px 18px;
+ }
+
+ &:before {
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0;
+ border: 8px solid transparent;
+ border-color: $bg-color transparent transparent transparent;
+ content: '';
+ z-index: 12;
+ border-left-width: 6px;
+ border-right-width: 6px;
+ }
+
+ &:after {
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0;
+ border: 10px solid transparent;
+ border-color: $border-color transparent transparent transparent;
+ content: '';
+ z-index: 10;
+ border-left-width: 8px;
+ border-right-width: 8px;
+ }
+}
+
+.dialog-title {
+ font-family: PingFang SC;
+ font-weight: 500;
+ font-size: 14px;
+ color: $title-color;
+ line-height: 20px;
+ margin-bottom: 13px;
+}
+
+.dialog-text {
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-size: 14px;
+ color: $text-color;
+ line-height: 20px;
+ margin-bottom: 13px;
+ word-break: break-all;
+
+}
+
+.dialog-img {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ .img-item {
+ width: 247px;
+ height: 125px;
+ margin-bottom: 13px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+}
+
+.info-container {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ font-size: 14px;
+
+ span {
+ margin-left: 0;
+ }
+
+ .info-item {
+ color: $text-color;
+
+ .num {
+ color: $text-color;
+ }
+ }
+}
+
+.infor-desc {
+ font-size: 14px;
+ word-break: break-all;
+ color: $text-color;
+ margin-bottom: 10px;
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/daoAnOffice/center/dialog/dialog-type7.vue b/src/views/daoAnOffice/center/dialog/dialog-type7.vue
new file mode 100644
index 0000000..1a1c731
--- /dev/null
+++ b/src/views/daoAnOffice/center/dialog/dialog-type7.vue
@@ -0,0 +1,146 @@
+<template>
+ <!-- 淇℃伅寮圭獥涓� 浼佷笟-->
+ <div class="dialog-container" ref="dialog">
+ <div class="dialog-content">
+ <el-scrollbar max-height="277px">
+ <div class="scroll-content">
+ <div class="dialog-title">鍗庡厜鍓ч櫌</div>
+ <div class="dialog-text">
+ 涓昏浠庝簨xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx
+ </div>
+ <div class="dialog-img">
+ <div class="img-item">
+ <img src="@/assets/img/test_img/show_img3.jpg">
+ </div>
+ </div>
+ </div>
+ </el-scrollbar>
+ </div>
+ </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+$bg-color: #583228;
+$border-color: #AF6F6B;
+$title-color: #FF591F;
+$text-color: #ECABAC;
+
+.dialog-container {
+ position: relative;
+ background-color: $bg-color;
+ border: 1px solid $border-color;
+ border-radius: 5px;
+ max-width: 305px;
+
+ .dialog-content {
+ width: 100%;
+ }
+
+ .scroll-content {
+ width: 100%;
+ padding: 14px 18px;
+ }
+
+ &:before {
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0;
+ border: 8px solid transparent;
+ border-color: $bg-color transparent transparent transparent;
+ content: '';
+ z-index: 12;
+ border-left-width: 6px;
+ border-right-width: 6px;
+ }
+
+ &:after {
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0;
+ border: 10px solid transparent;
+ border-color: $border-color transparent transparent transparent;
+ content: '';
+ z-index: 10;
+ border-left-width: 8px;
+ border-right-width: 8px;
+ }
+}
+
+.dialog-title {
+ font-family: PingFang SC;
+ font-weight: 500;
+ font-size: 14px;
+ color: $title-color;
+ line-height: 20px;
+ margin-bottom: 13px;
+}
+
+.dialog-text {
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-size: 14px;
+ color: $text-color;
+ line-height: 20px;
+ margin-bottom: 13px;
+ word-break: break-all;
+
+}
+
+.dialog-img {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ .img-item {
+ width: 100%;
+ height: 125px;
+ margin-bottom: 13px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+}
+
+.info-container {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ font-size: 14px;
+
+ span {
+ margin-left: 0;
+ }
+
+ .info-item {
+ color: $text-color;
+
+ .num {
+ color: $text-color;
+ }
+ }
+}
+
+.infor-desc {
+ font-size: 14px;
+ word-break: break-all;
+ color: $text-color;
+ margin-bottom: 10px;
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/daoAnOffice/center/dialog/dialog-type8.vue b/src/views/daoAnOffice/center/dialog/dialog-type8.vue
new file mode 100644
index 0000000..0dec44a
--- /dev/null
+++ b/src/views/daoAnOffice/center/dialog/dialog-type8.vue
@@ -0,0 +1,150 @@
+<template>
+ <!-- 淇℃伅寮圭獥涓� 浼佷笟-->
+ <div class="dialog-container" ref="dialog">
+ <div class="dialog-content">
+ <el-scrollbar max-height="277px">
+ <div class="scroll-content">
+ <div class="dialog-title">106璺�</div>
+ <div class="info-container">
+ <div class="info-item">
+ <span class="lable">棣栫彮:</span>
+ <span class="num">08:00</span>
+ </div>
+ <div class="info-item">
+ <span class="lable">鏈彮:</span>
+ <span class="num">23:00</span>
+ </div>
+ </div>
+ <div class="infor-desc">
+ 閫旂粡绔欑偣锛歺xx銆亁xx銆亁xx銆亁xx銆亁xx銆亁xx銆� xxx銆亁xx銆�
+ </div>
+ </div>
+ </el-scrollbar>
+ </div>
+ </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+$bg-color: #1D3D61;
+$border-color: #629BB9;
+$title-color: #006EE4;
+$text-color: #79B7D7;
+
+.dialog-container {
+ position: relative;
+ background-color: $bg-color;
+ border: 1px solid $border-color;
+ border-radius: 5px;
+ max-width: 305px;
+
+ .dialog-content {
+ width: 100%;
+ }
+
+ .scroll-content {
+ width: 100%;
+ padding: 14px 18px;
+ }
+
+ &:before {
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0;
+ border: 8px solid transparent;
+ border-color: $bg-color transparent transparent transparent;
+ content: '';
+ z-index: 12;
+ border-left-width: 6px;
+ border-right-width: 6px;
+ }
+
+ &:after {
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0;
+ border: 10px solid transparent;
+ border-color: $border-color transparent transparent transparent;
+ content: '';
+ z-index: 10;
+ border-left-width: 8px;
+ border-right-width: 8px;
+ }
+}
+
+.dialog-title {
+ font-family: PingFang SC;
+ font-weight: 500;
+ font-size: 14px;
+ color: $title-color;
+ line-height: 20px;
+ margin-bottom: 13px;
+}
+
+.dialog-text {
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-size: 14px;
+ color: $text-color;
+ line-height: 20px;
+ margin-bottom: 13px;
+ word-break: break-all;
+
+}
+
+.dialog-img {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ .img-item {
+ width: 100%;
+ height: 125px;
+ margin-bottom: 13px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+}
+
+.info-container {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ font-size: 14px;
+
+ span {
+ margin-left: 0;
+ }
+
+ .info-item {
+ color: $text-color;
+ margin-right: 25px;
+
+ .num {
+ color: #E5BF33;
+ }
+ }
+}
+
+.infor-desc {
+ font-size: 14px;
+ word-break: break-all;
+ color: $text-color;
+ margin-bottom: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/daoAnOffice/center/dialog/dialog-type9.vue b/src/views/daoAnOffice/center/dialog/dialog-type9.vue
new file mode 100644
index 0000000..41f5bfe
--- /dev/null
+++ b/src/views/daoAnOffice/center/dialog/dialog-type9.vue
@@ -0,0 +1,145 @@
+<template>
+ <!-- 淇℃伅寮圭獥涓� 浼佷笟-->
+ <div class="dialog-container" ref="dialog">
+ <div class="dialog-content">
+ <el-scrollbar max-height="277px">
+ <div class="scroll-content">
+ <div class="dialog-title">xxx灏忓尯娑堥槻瀹夊叏闅愭偅</div>
+ <div class="dialog-text">
+ xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx
+ </div>
+ <div class="dialog-img">
+ <div class="img-item">
+ <img src="@/assets/img/test_img/show_img4.jpeg">
+ </div>
+ </div>
+ </div>
+ </el-scrollbar>
+ </div>
+ </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+$bg-color: #50122B;
+$border-color: #DC707F;
+$title-color: #E90020;
+$text-color: #E86E7F;
+
+.dialog-container {
+ position: relative;
+ background-color: $bg-color;
+ border: 1px solid $border-color;
+ border-radius: 5px;
+ max-width: 305px;
+
+ .dialog-content {
+ width: 100%;
+ }
+
+ .scroll-content {
+ width: 100%;
+ padding: 14px 18px;
+ }
+
+ &:before {
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0;
+ border: 8px solid transparent;
+ border-color: $bg-color transparent transparent transparent;
+ content: '';
+ z-index: 12;
+ border-left-width: 6px;
+ border-right-width: 6px;
+ }
+
+ &:after {
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0;
+ border: 10px solid transparent;
+ border-color: $border-color transparent transparent transparent;
+ content: '';
+ z-index: 10;
+ border-left-width: 8px;
+ border-right-width: 8px;
+ }
+}
+
+.dialog-title {
+ font-family: PingFang SC;
+ font-weight: 500;
+ font-size: 14px;
+ color: $title-color;
+ line-height: 20px;
+ margin-bottom: 13px;
+}
+
+.dialog-text {
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-size: 14px;
+ color: $text-color;
+ line-height: 20px;
+ margin-bottom: 13px;
+ word-break: break-all;
+
+}
+
+.dialog-img {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ .img-item {
+ width: 100%;
+ height: 125px;
+ margin-bottom: 13px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+}
+
+.info-container {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ font-size: 14px;
+
+ span {
+ margin-left: 0;
+ }
+
+ .info-item {
+ color: $text-color;
+ margin-right: 25px;
+
+ .num {
+ color: #E5BF33;
+ }
+ }
+}
+
+.infor-desc {
+ font-size: 14px;
+ word-break: break-all;
+ color: $text-color;
+ margin-bottom: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/daoAnOffice/center/map.vue b/src/views/daoAnOffice/center/map.vue
index dc1c3ad..3600a7d 100644
--- a/src/views/daoAnOffice/center/map.vue
+++ b/src/views/daoAnOffice/center/map.vue
@@ -24,16 +24,36 @@
<img src="@/assets/img/sslk.png" alt="" class="item-tb-img">
<p class="item-tb-p">瀹炴椂璺喌</p>
</div>
+ </div>
+ <!-- 瀵煎叆鑷畾涔夊脊绐� -->
+ <div class="dialog-container dialog">
+ <DialogType1 ref="dtype1"></DialogType1>
+ <DialogType2 ref="dtype2"></DialogType2>
+ <DialogType3 ref="dtype3"></DialogType3>
+ <DialogType4 ref="dtype4"></DialogType4>
+ <DialogType5 ref="dtype5"></DialogType5>
+ <DialogType6 ref="dtype6"></DialogType6>
+ <DialogType7 ref="dtype7"></DialogType7>
+ <DialogType8 ref="dtype8"></DialogType8>
+ <DialogType9 ref="dtype9"></DialogType9>
</div>
</div>
</template>
<script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref,getCurrentInstance } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
-import { require } from '@/utils/require.js';
+import DialogType1 from './dialog/dialog-type1.vue';
+import DialogType2 from './dialog/dialog-type2.vue';
+import DialogType3 from './dialog/dialog-type3.vue';
+import DialogType4 from './dialog/dialog-type4.vue';
+import DialogType5 from './dialog/dialog-type5.vue';
+import DialogType6 from './dialog/dialog-type6.vue';
+import DialogType7 from './dialog/dialog-type7.vue';
+import DialogType8 from './dialog/dialog-type8.vue';
+import DialogType9 from './dialog/dialog-type9.vue';
import icon1 from '@/assets/img/icon/icon1.png';
import icon2 from '@/assets/img/icon/icon2.png';
@@ -45,8 +65,23 @@
import icon8 from '@/assets/img/icon/icon8.png';
import icon9 from '@/assets/img/icon/icon9.png';
+const dtype1 = ref(null);
+const dtype2 = ref(null);
+const dtype3 = ref(null);
+const dtype4 = ref(null);
+const dtype5 = ref(null);
+const dtype6 = ref(null);
+const dtype7 = ref(null);
+const dtype8 = ref(null);
+const dtype9 = ref(null);
const map = ref(null);
+
+// dialog闆嗗悎
+const dialogList = ref({});
+// 鑾峰彇褰撳墠瀹炰緥
+const {ctx} = getCurrentInstance();
+
let mapInstance = null;
let trafficLayer = null;;
@@ -55,6 +90,9 @@
// 鍦板浘鐨勫浘鏍囨暟缁�
const markers = [];
+
+// 淇℃伅寮圭獥
+let infoWindow = null;
// 鍥惧垪
const legendList = ref([
@@ -164,14 +202,29 @@
// 杩囨护鍥惧垪
const filterLegend = (item) => {
const { icon, positions, type } = item;
+ const dialog = dialogList.value[type].$refs.dialog;
const tempList = [];
positions.map(position => {
const markerIcon = createIcon(icon);
- const marker = ceateMarker(markerIcon, position);
+ const marker = ceateMarker(type, markerIcon, position);
tempList.push(marker);
+ marker.on('click', (markerEvent) => {
+ infoWindow.setContent(dialog);
+ infoWindow.open(mapInstance, markerEvent.target.getPosition());
+ // console.log(dialogList.value[type]);
+ });
});
markers.push({ type: type, markerList: tempList })
mapInstance.add(tempList);
+}
+
+// 鍒涘缓寮圭獥
+const createInfoWindow = () => {
+ infoWindow = new AMap.InfoWindow({
+ isCustom: true,
+ closeWhenClickMap: true,
+ offset: new AMap.Pixel(20, -20),
+ });
}
// 鍒涘缓鍥炬爣
@@ -185,11 +238,12 @@
// 鍒涘缓marker
-const ceateMarker = (icon, position) => {
+const ceateMarker = (type, icon, position) => {
return new AMap.Marker({
icon: icon,
position: new AMap.LngLat(position[0], position[1]),
zooms: [2, 20],
+ extData: type
});
}
@@ -222,6 +276,14 @@
}
+// 寮圭獥涓庣粍浠舵槧灏�
+const mapComponentInstance = () => {
+ legendList.value.map((item) => {
+ dialogList.value[item.id] = ctx.$refs[`dtype${item.id}`];
+ })
+}
+
+
onMounted(() => {
AMapLoader.load({
key: "2898109c22191c3969957500934169dc", //鐢宠濂界殑 Web 绔紑鍙戣�� Key锛岄娆¤皟鐢� load 鏃跺繀濉�
@@ -243,14 +305,13 @@
trafficLayer.setMap(mapInstance);
-
+ // 闄愬埗涓�涓尯鍩熻疆寤�
const options = {
subdistrict: 0,
extensions: "all",
level: "district",
};
- // 闄愬埗涓�涓尯鍩熻疆寤�
AMap.plugin("AMap.DistrictSearch", function () {
//鍦ㄥ洖璋冨嚱鏁颁腑瀹炰緥鍖栨彃浠讹紝骞朵娇鐢ㄦ彃浠跺姛鑳�
const district = new AMap.DistrictSearch(options);
@@ -290,7 +351,10 @@
mapInstance.add(polygon);
});
});
-
+ // 鍒涘缓infowindow
+ createInfoWindow();
+ // 鏄犲皠缁勪欢
+ mapComponentInstance();
})
.catch((e) => {
console.log(e);
@@ -400,4 +464,10 @@
:deep(.amap-copyright) {
visibility: hidden !important;
}
+
+.dialog {
+ opacity: 0;
+ position: absolute;
+ left: -500px;
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0