diff --git a/src/assets/images/wjtc.png b/src/assets/images/wjtc.png
new file mode 100644
index 0000000..2476d77
--- /dev/null
+++ b/src/assets/images/wjtc.png
Binary files differ

diff --git a/src/assets/images/wjtc.png b/src/assets/images/wjtc.png
new file mode 100644
index 0000000..2476d77
--- /dev/null
+++ b/src/assets/images/wjtc.png
Binary files differ
diff --git a/src/views/ElectronicMap.vue b/src/views/ElectronicMap.vue
index b922ca8..91078b6 100644
--- a/src/views/ElectronicMap.vue
+++ b/src/views/ElectronicMap.vue
@@ -1,3 +1,428 @@
 <template>
-  <div>电子地图</div>
+  <!-- 地图 -->
+  <div class="position-r w-100 h-100" id="map"></div>
+  <!-- 顶部图层控制 移动 -->
+  <div class="TopTuLi">
+    <div class="Title">工程项目</div>
+    <div class="TuLiListBox">
+      <div v-for="item in AllData.TuLi" class="TuLiList" @click="TuLiClick(item)">
+        <img class="ListImg" :src="item.img" />
+        <div class="ShowDiv" v-show="item.check"></div>
+      </div>
+    </div>
+  </div>
+  <!-- 顶部图层控制 PC -->
+  <!-- <div class="TopTuLiPC" v-else></div> -->
+  <!-- 底部弹出 -->
+  <van-popup v-model:show="AllData.showBottom" position="bottom" :style="{ height: '60%' }" round>
+    <van-cell-group inset>
+      <van-cell title="项目名称:" :label="AllData.ProjectData.projectName" />
+      <van-cell title="项目类型:" :label="formatter(AllData.ProjectData.projectTypeCode)" />
+      <van-cell title="项目建设情况:" :label="formatter2(AllData.ProjectData.buildStatus)" />
+      <van-cell title="项目简介:" :label="AllData.ProjectData.projectOverview" />
+      <van-cell>
+        <template #title>
+          <span class="custom-title">项目图片</span>
+        </template>
+        <template #label>
+          <van-image
+            v-for="(item, index) in AllData.ProjectData.sysFileList"
+            width="100%"
+            height="auto"
+            fit="contain"
+            :src="item.url"
+            @click="Yulan(index)"
+          />
+        </template>
+      </van-cell>
+    </van-cell-group>
+  </van-popup>
+  <!-- PC弹窗 -->
+  <!-- <div class="dialog" v-show="AllData.showBottom" v-else></div> -->
+  <!-- <van-image-preview v-model:show="AllData.previewShow" :images="AllData.images">
+  </van-image-preview> -->
+  <van-image-preview
+    v-model:show="AllData.previewShow"
+    :images="AllData.images"
+    :close-on-click-image="false"
+    :start-position="AllData.imagesIndex"
+  >
+    <template #image="{ src, style, onLoad }">
+      <img :style="[{ width: '100%' }, style]" :src="src" />
+    </template>
+  </van-image-preview>
 </template>
+
+<script setup>
+import WKT from 'terraformer-wkt-parser';
+import { defineProps, computed, defineEmits, ref, onMounted } from 'vue';
+import { showImagePreview } from 'vant';
+import { getProjects } from '@/api/project';
+import AMapUtils from '@/utils/gis/AMapUtils';
+import Img1 from '/static/images/1.png';
+import Img2 from '/static/images/2.png';
+import Img3 from '/static/images/3.png';
+import Img4 from '/static/images/4.png';
+import Img5 from '/static/images/5.png';
+import Img6 from '/static/images/6.png';
+import Img7 from '/static/images/7.png';
+const ICONS_MAP = {
+  HMJZYSQ: '/static/images/HMJZYSQ.png',
+  HMXGYLD: '/static/images/HMXGYLD.png',
+  HMXDLGC: '/static/images/HMXDLGC.png',
+  HMXSX: '/static/images/HMXSX.png',
+  GIS: '/static/images/GIS.png',
+  GWPCYXF: '/static/images/GWPCYXF.png',
+  GWJBZ: '/static/images/GWJBZ.png',
+};
+const AllData = reactive({
+  TuLi: [
+    {
+      name: 'GIS',
+      img: Img1,
+      check: true,
+      font: 'GIS平台建设与监测设施',
+    },
+    {
+      name: 'HMXDLGC',
+      img: Img2,
+      check: true,
+      font: '海绵型道路广场',
+    },
+    {
+      name: 'HMXGYLD',
+      img: Img3,
+      check: true,
+      font: '海绵型公园绿地',
+    },
+    {
+      name: 'GWJBZ',
+      img: Img4,
+      check: true,
+      font: '雨水管网及泵站',
+    },
+    {
+      name: 'GWPCYXF',
+      img: Img5,
+      check: true,
+      font: '管网排查与修复项目',
+    },
+    {
+      name: 'HMJZYSQ',
+      img: Img6,
+      check: true,
+      font: '海绵型建筑与社区',
+    },
+    {
+      name: 'HMXSX',
+      img: Img7,
+      check: true,
+      font: '海绵型水系',
+    },
+  ],
+  showBottom: false,
+  keyObj: [
+    {
+      key: 'projectName',
+      name: '项目名称:',
+    },
+    {
+      key: 'projectOverview',
+      name: '项目简介:',
+    },
+    // {
+    //   key: "startTime",
+    //   name: "项目开始时间:",
+    // },
+    // {
+    //   key: "endTime",
+    //   name: "项目交付时间:",
+    // },
+    // {
+    //   key: "chargeDepartment",
+    //   name: "责任部门:",
+    // },
+    // {
+    //   key: "chargeUser",
+    //   name: "责任人:",
+    // },
+    // {
+    //   key: "phone",
+    //   name: "联系方式:",
+    // },
+  ],
+  ProjectData: {},
+  isPC: false,
+  jiansheleixing: [
+    {
+      name: 'not_approved',
+      font: '尚未立项',
+    },
+    {
+      name: 'XMQQSWWCSJJD',
+      font: '在建',
+    },
+    {
+      name: 'XMQQSWWCZB',
+      font: '在建',
+    },
+    {
+      name: 'not_yet_under_construction',
+      font: '在建',
+    },
+    {
+      name: 'opened',
+      font: '在建',
+    },
+    {
+      name: 'completed',
+      font: '已竣工',
+    },
+    {
+      name: 'Suspended',
+      font: '已停工',
+    },
+  ],
+  previewShow: false,
+  images: [],
+  imagesIndex: 0,
+});
+const getProjectss1 = async () => {
+  let { data } = await getProjects();
+  let features = data.data
+    .filter((i) => i.projectLocation)
+    .map((i) =>
+      turf.point(i.projectLocation.split(',').map(Number), {
+        ...i,
+        mapParams: {
+          icon: ICONS_MAP[i.projectTypeCode],
+          group: i.projectTypeCode,
+          name: i.projectName,
+        },
+      })
+    );
+  amapUtils.geojsonToMap(turf.featureCollection(features));
+};
+const getProjectss = async () => {
+  let { data } = await getProjects();
+  let features = data
+    .filter((i) => i.projectLocation)
+    .map((i) => {
+      if (i.projectLocation.indexOf('POINT') > -1) {
+        i.feature = {
+          type: 'Feature',
+          geometry: WKT.parse(i.projectLocation),
+          properties: {
+            ...i,
+            mapParams: {
+              icon: ICONS_MAP[i.projectTypeCode],
+              group: i.projectTypeCode,
+              name: i.projectName,
+            },
+          },
+        };
+        return i.feature;
+      } else {
+        return turf.point(i.projectLocation.split(',').map(Number), {
+          ...i,
+          mapParams: {
+            icon: ICONS_MAP[i.projectTypeCode],
+            group: i.projectTypeCode,
+            name: i.projectName,
+          },
+        });
+      }
+    });
+  amapUtils.geojsonToMap(turf.featureCollection(features));
+};
+const TuLiClick = (item) => {
+  item.check = !item.check;
+  amapUtils.setVisibleByIds([item.name], item.check);
+};
+
+const init = () => {
+  window.amapUtils = new AMapUtils('map');
+  // amapUtils.showCityInfo();
+  amapUtils.registerEvent(AMapUtils._default.events.click, (target, lngLat) => {
+    console.log('target,lngLat', target.getExtData(), lngLat);
+    // 内容赋值
+    AllData.ProjectData = target.getExtData();
+    // 判断当前环境
+    // if (AllData.isPC) {
+    // 打开PC弹窗
+    // } else {
+    // 打开移动端弹窗
+    AllData.showBottom = true;
+    // }
+  });
+  getProjectss();
+};
+/*
+ *根据分辨率用来检测是 PC还是移动终端
+ */
+// const flashChecker = () => {
+//   let winWidth = window.innerWidth || document.documentElement.clientWidth;
+//   if (winWidth < 750) {
+//     AllData.isPC = false;
+//   } else {
+//     AllData.isPC = true;
+//   }
+
+// };
+const formatter = (item) => {
+  let str = '';
+  AllData.TuLi.forEach((element) => {
+    if (element.name == item) {
+      str = element.font;
+    }
+  });
+  return str;
+};
+const formatter2 = (item) => {
+  let str = '';
+  AllData.jiansheleixing.forEach((element) => {
+    if (element.name == item) {
+      str = element.font;
+    }
+  });
+  return str;
+};
+const Yulan = (index) => {
+  let Arr = [];
+  AllData.ProjectData.sysFileList.forEach((tem) => {
+    Arr.push(tem.url);
+  });
+  // showImagePreview({
+  //   images: Arr,
+  //   startPosition: index,
+  // });
+  AllData.imagesIndex = index;
+  AllData.images = Arr;
+  AllData.previewShow = true;
+};
+onMounted(() => {
+  // flashChecker();
+  // 初始化地图
+  let interVal = setInterval(() => {
+    if (window.AMap) init(), clearInterval(interVal);
+  }, 500);
+});
+</script>
+
+<style lang="less" scoped>
+#map {
+  background: #ffffff;
+}
+
+/* 针对宽度小于750px的屏幕 */
+/**默认移动端,进行vw适配 */
+// @media screen and (max-width: 750px) {
+.TopTuLi {
+  position: absolute;
+  top: 5px;
+  left: 0;
+  width: calc(100% - 20px);
+  height: 200px;
+  background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.685));
+  z-index: 999;
+  border-radius: 30px;
+  margin-left: 10px;
+
+  .Title {
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    text-align: center;
+    font-size: 26px;
+    color: black;
+  }
+
+  .TuLiListBox {
+    width: 100%;
+    height: 140px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-evenly;
+    align-items: center;
+    border-radius: 10px;
+    .TuLiList {
+      width: 10%;
+      height: 140px;
+
+      .ListImg {
+        width: 100%;
+        height: auto;
+      }
+      .ShowDiv {
+        width: 100%;
+        height: 5px;
+        background: lime;
+        margin-top: 10px;
+      }
+    }
+  }
+}
+
+// }
+/* 针对宽度大于或等于750px的屏幕 不进行vw转换 */
+// @media screen and (min-width: 750px) {
+//   .TopTuLi {
+//     position: absolute;
+//     top: 5px;
+//     left: 0;
+//     width: calc(100% - 20px);
+//     height: 200px;
+//     background: linear-gradient(
+//       to bottom,
+//       rgb(255, 255, 255),
+//       rgba(255, 255, 255, 0.685)
+//     );
+//     z-index: 999;
+//     border-radius: 30px;
+//     margin-left: 10px;
+//     ::selection {
+//       background: none;
+//       color: inherit;
+//     }
+
+//     .Title {
+//       width: 100%;
+//       height: 60px;
+//       line-height: 60px;
+//       text-align: center;
+//       font-size: 26px;
+//       color: black;
+//     }
+
+//     .TuLiListBox {
+//       width: 100%;
+//       height: 140px;
+//       display: flex;
+//       flex-direction: row;
+//       flex-wrap: nowrap;
+//       justify-content: center;
+//       align-items: center;
+//       border-radius: 10px;
+//       .TuLiList {
+//         width: 84.2px;
+//         height: 140px;
+//         cursor: pointer;
+//         margin: 0 10px;
+
+//         .ListImg {
+//           width: 100%;
+//           height: 120px;
+//         }
+//         .ShowDiv {
+//           width: 100%;
+//           height: 5px;
+//           background: lime;
+//           margin-top: 5px;
+//           border-radius: 10px;
+//         }
+//       }
+//     }
+//   }
+// }
+</style>

diff --git a/src/assets/images/wjtc.png b/src/assets/images/wjtc.png
new file mode 100644
index 0000000..2476d77
--- /dev/null
+++ b/src/assets/images/wjtc.png
Binary files differ
diff --git a/src/views/ElectronicMap.vue b/src/views/ElectronicMap.vue
index b922ca8..91078b6 100644
--- a/src/views/ElectronicMap.vue
+++ b/src/views/ElectronicMap.vue
@@ -1,3 +1,428 @@
 <template>
-  <div>电子地图</div>
+  <!-- 地图 -->
+  <div class="position-r w-100 h-100" id="map"></div>
+  <!-- 顶部图层控制 移动 -->
+  <div class="TopTuLi">
+    <div class="Title">工程项目</div>
+    <div class="TuLiListBox">
+      <div v-for="item in AllData.TuLi" class="TuLiList" @click="TuLiClick(item)">
+        <img class="ListImg" :src="item.img" />
+        <div class="ShowDiv" v-show="item.check"></div>
+      </div>
+    </div>
+  </div>
+  <!-- 顶部图层控制 PC -->
+  <!-- <div class="TopTuLiPC" v-else></div> -->
+  <!-- 底部弹出 -->
+  <van-popup v-model:show="AllData.showBottom" position="bottom" :style="{ height: '60%' }" round>
+    <van-cell-group inset>
+      <van-cell title="项目名称:" :label="AllData.ProjectData.projectName" />
+      <van-cell title="项目类型:" :label="formatter(AllData.ProjectData.projectTypeCode)" />
+      <van-cell title="项目建设情况:" :label="formatter2(AllData.ProjectData.buildStatus)" />
+      <van-cell title="项目简介:" :label="AllData.ProjectData.projectOverview" />
+      <van-cell>
+        <template #title>
+          <span class="custom-title">项目图片</span>
+        </template>
+        <template #label>
+          <van-image
+            v-for="(item, index) in AllData.ProjectData.sysFileList"
+            width="100%"
+            height="auto"
+            fit="contain"
+            :src="item.url"
+            @click="Yulan(index)"
+          />
+        </template>
+      </van-cell>
+    </van-cell-group>
+  </van-popup>
+  <!-- PC弹窗 -->
+  <!-- <div class="dialog" v-show="AllData.showBottom" v-else></div> -->
+  <!-- <van-image-preview v-model:show="AllData.previewShow" :images="AllData.images">
+  </van-image-preview> -->
+  <van-image-preview
+    v-model:show="AllData.previewShow"
+    :images="AllData.images"
+    :close-on-click-image="false"
+    :start-position="AllData.imagesIndex"
+  >
+    <template #image="{ src, style, onLoad }">
+      <img :style="[{ width: '100%' }, style]" :src="src" />
+    </template>
+  </van-image-preview>
 </template>
+
+<script setup>
+import WKT from 'terraformer-wkt-parser';
+import { defineProps, computed, defineEmits, ref, onMounted } from 'vue';
+import { showImagePreview } from 'vant';
+import { getProjects } from '@/api/project';
+import AMapUtils from '@/utils/gis/AMapUtils';
+import Img1 from '/static/images/1.png';
+import Img2 from '/static/images/2.png';
+import Img3 from '/static/images/3.png';
+import Img4 from '/static/images/4.png';
+import Img5 from '/static/images/5.png';
+import Img6 from '/static/images/6.png';
+import Img7 from '/static/images/7.png';
+const ICONS_MAP = {
+  HMJZYSQ: '/static/images/HMJZYSQ.png',
+  HMXGYLD: '/static/images/HMXGYLD.png',
+  HMXDLGC: '/static/images/HMXDLGC.png',
+  HMXSX: '/static/images/HMXSX.png',
+  GIS: '/static/images/GIS.png',
+  GWPCYXF: '/static/images/GWPCYXF.png',
+  GWJBZ: '/static/images/GWJBZ.png',
+};
+const AllData = reactive({
+  TuLi: [
+    {
+      name: 'GIS',
+      img: Img1,
+      check: true,
+      font: 'GIS平台建设与监测设施',
+    },
+    {
+      name: 'HMXDLGC',
+      img: Img2,
+      check: true,
+      font: '海绵型道路广场',
+    },
+    {
+      name: 'HMXGYLD',
+      img: Img3,
+      check: true,
+      font: '海绵型公园绿地',
+    },
+    {
+      name: 'GWJBZ',
+      img: Img4,
+      check: true,
+      font: '雨水管网及泵站',
+    },
+    {
+      name: 'GWPCYXF',
+      img: Img5,
+      check: true,
+      font: '管网排查与修复项目',
+    },
+    {
+      name: 'HMJZYSQ',
+      img: Img6,
+      check: true,
+      font: '海绵型建筑与社区',
+    },
+    {
+      name: 'HMXSX',
+      img: Img7,
+      check: true,
+      font: '海绵型水系',
+    },
+  ],
+  showBottom: false,
+  keyObj: [
+    {
+      key: 'projectName',
+      name: '项目名称:',
+    },
+    {
+      key: 'projectOverview',
+      name: '项目简介:',
+    },
+    // {
+    //   key: "startTime",
+    //   name: "项目开始时间:",
+    // },
+    // {
+    //   key: "endTime",
+    //   name: "项目交付时间:",
+    // },
+    // {
+    //   key: "chargeDepartment",
+    //   name: "责任部门:",
+    // },
+    // {
+    //   key: "chargeUser",
+    //   name: "责任人:",
+    // },
+    // {
+    //   key: "phone",
+    //   name: "联系方式:",
+    // },
+  ],
+  ProjectData: {},
+  isPC: false,
+  jiansheleixing: [
+    {
+      name: 'not_approved',
+      font: '尚未立项',
+    },
+    {
+      name: 'XMQQSWWCSJJD',
+      font: '在建',
+    },
+    {
+      name: 'XMQQSWWCZB',
+      font: '在建',
+    },
+    {
+      name: 'not_yet_under_construction',
+      font: '在建',
+    },
+    {
+      name: 'opened',
+      font: '在建',
+    },
+    {
+      name: 'completed',
+      font: '已竣工',
+    },
+    {
+      name: 'Suspended',
+      font: '已停工',
+    },
+  ],
+  previewShow: false,
+  images: [],
+  imagesIndex: 0,
+});
+const getProjectss1 = async () => {
+  let { data } = await getProjects();
+  let features = data.data
+    .filter((i) => i.projectLocation)
+    .map((i) =>
+      turf.point(i.projectLocation.split(',').map(Number), {
+        ...i,
+        mapParams: {
+          icon: ICONS_MAP[i.projectTypeCode],
+          group: i.projectTypeCode,
+          name: i.projectName,
+        },
+      })
+    );
+  amapUtils.geojsonToMap(turf.featureCollection(features));
+};
+const getProjectss = async () => {
+  let { data } = await getProjects();
+  let features = data
+    .filter((i) => i.projectLocation)
+    .map((i) => {
+      if (i.projectLocation.indexOf('POINT') > -1) {
+        i.feature = {
+          type: 'Feature',
+          geometry: WKT.parse(i.projectLocation),
+          properties: {
+            ...i,
+            mapParams: {
+              icon: ICONS_MAP[i.projectTypeCode],
+              group: i.projectTypeCode,
+              name: i.projectName,
+            },
+          },
+        };
+        return i.feature;
+      } else {
+        return turf.point(i.projectLocation.split(',').map(Number), {
+          ...i,
+          mapParams: {
+            icon: ICONS_MAP[i.projectTypeCode],
+            group: i.projectTypeCode,
+            name: i.projectName,
+          },
+        });
+      }
+    });
+  amapUtils.geojsonToMap(turf.featureCollection(features));
+};
+const TuLiClick = (item) => {
+  item.check = !item.check;
+  amapUtils.setVisibleByIds([item.name], item.check);
+};
+
+const init = () => {
+  window.amapUtils = new AMapUtils('map');
+  // amapUtils.showCityInfo();
+  amapUtils.registerEvent(AMapUtils._default.events.click, (target, lngLat) => {
+    console.log('target,lngLat', target.getExtData(), lngLat);
+    // 内容赋值
+    AllData.ProjectData = target.getExtData();
+    // 判断当前环境
+    // if (AllData.isPC) {
+    // 打开PC弹窗
+    // } else {
+    // 打开移动端弹窗
+    AllData.showBottom = true;
+    // }
+  });
+  getProjectss();
+};
+/*
+ *根据分辨率用来检测是 PC还是移动终端
+ */
+// const flashChecker = () => {
+//   let winWidth = window.innerWidth || document.documentElement.clientWidth;
+//   if (winWidth < 750) {
+//     AllData.isPC = false;
+//   } else {
+//     AllData.isPC = true;
+//   }
+
+// };
+const formatter = (item) => {
+  let str = '';
+  AllData.TuLi.forEach((element) => {
+    if (element.name == item) {
+      str = element.font;
+    }
+  });
+  return str;
+};
+const formatter2 = (item) => {
+  let str = '';
+  AllData.jiansheleixing.forEach((element) => {
+    if (element.name == item) {
+      str = element.font;
+    }
+  });
+  return str;
+};
+const Yulan = (index) => {
+  let Arr = [];
+  AllData.ProjectData.sysFileList.forEach((tem) => {
+    Arr.push(tem.url);
+  });
+  // showImagePreview({
+  //   images: Arr,
+  //   startPosition: index,
+  // });
+  AllData.imagesIndex = index;
+  AllData.images = Arr;
+  AllData.previewShow = true;
+};
+onMounted(() => {
+  // flashChecker();
+  // 初始化地图
+  let interVal = setInterval(() => {
+    if (window.AMap) init(), clearInterval(interVal);
+  }, 500);
+});
+</script>
+
+<style lang="less" scoped>
+#map {
+  background: #ffffff;
+}
+
+/* 针对宽度小于750px的屏幕 */
+/**默认移动端,进行vw适配 */
+// @media screen and (max-width: 750px) {
+.TopTuLi {
+  position: absolute;
+  top: 5px;
+  left: 0;
+  width: calc(100% - 20px);
+  height: 200px;
+  background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.685));
+  z-index: 999;
+  border-radius: 30px;
+  margin-left: 10px;
+
+  .Title {
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    text-align: center;
+    font-size: 26px;
+    color: black;
+  }
+
+  .TuLiListBox {
+    width: 100%;
+    height: 140px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-evenly;
+    align-items: center;
+    border-radius: 10px;
+    .TuLiList {
+      width: 10%;
+      height: 140px;
+
+      .ListImg {
+        width: 100%;
+        height: auto;
+      }
+      .ShowDiv {
+        width: 100%;
+        height: 5px;
+        background: lime;
+        margin-top: 10px;
+      }
+    }
+  }
+}
+
+// }
+/* 针对宽度大于或等于750px的屏幕 不进行vw转换 */
+// @media screen and (min-width: 750px) {
+//   .TopTuLi {
+//     position: absolute;
+//     top: 5px;
+//     left: 0;
+//     width: calc(100% - 20px);
+//     height: 200px;
+//     background: linear-gradient(
+//       to bottom,
+//       rgb(255, 255, 255),
+//       rgba(255, 255, 255, 0.685)
+//     );
+//     z-index: 999;
+//     border-radius: 30px;
+//     margin-left: 10px;
+//     ::selection {
+//       background: none;
+//       color: inherit;
+//     }
+
+//     .Title {
+//       width: 100%;
+//       height: 60px;
+//       line-height: 60px;
+//       text-align: center;
+//       font-size: 26px;
+//       color: black;
+//     }
+
+//     .TuLiListBox {
+//       width: 100%;
+//       height: 140px;
+//       display: flex;
+//       flex-direction: row;
+//       flex-wrap: nowrap;
+//       justify-content: center;
+//       align-items: center;
+//       border-radius: 10px;
+//       .TuLiList {
+//         width: 84.2px;
+//         height: 140px;
+//         cursor: pointer;
+//         margin: 0 10px;
+
+//         .ListImg {
+//           width: 100%;
+//           height: 120px;
+//         }
+//         .ShowDiv {
+//           width: 100%;
+//           height: 5px;
+//           background: lime;
+//           margin-top: 5px;
+//           border-radius: 10px;
+//         }
+//       }
+//     }
+//   }
+// }
+</style>
diff --git a/src/views/PublicAdvice.vue b/src/views/PublicAdvice.vue
index 9fbbb2b..cf7791b 100644
--- a/src/views/PublicAdvice.vue
+++ b/src/views/PublicAdvice.vue
@@ -186,7 +186,7 @@
 };
 
 onMounted(() => {
-  // getDataList();
+  getDataList();
 });
 </script>
 
@@ -194,7 +194,7 @@
 .SpongeCultureCLass {
   height: 100%;
   overflow: auto;
-  background: #ffffff00;
+  background: #f1f1f1;
   .ConstrucClass {
     margin: 30px 20px 30px 20px;
     padding: 20px;

diff --git a/src/assets/images/wjtc.png b/src/assets/images/wjtc.png
new file mode 100644
index 0000000..2476d77
--- /dev/null
+++ b/src/assets/images/wjtc.png
Binary files differ
diff --git a/src/views/ElectronicMap.vue b/src/views/ElectronicMap.vue
index b922ca8..91078b6 100644
--- a/src/views/ElectronicMap.vue
+++ b/src/views/ElectronicMap.vue
@@ -1,3 +1,428 @@
 <template>
-  <div>电子地图</div>
+  <!-- 地图 -->
+  <div class="position-r w-100 h-100" id="map"></div>
+  <!-- 顶部图层控制 移动 -->
+  <div class="TopTuLi">
+    <div class="Title">工程项目</div>
+    <div class="TuLiListBox">
+      <div v-for="item in AllData.TuLi" class="TuLiList" @click="TuLiClick(item)">
+        <img class="ListImg" :src="item.img" />
+        <div class="ShowDiv" v-show="item.check"></div>
+      </div>
+    </div>
+  </div>
+  <!-- 顶部图层控制 PC -->
+  <!-- <div class="TopTuLiPC" v-else></div> -->
+  <!-- 底部弹出 -->
+  <van-popup v-model:show="AllData.showBottom" position="bottom" :style="{ height: '60%' }" round>
+    <van-cell-group inset>
+      <van-cell title="项目名称:" :label="AllData.ProjectData.projectName" />
+      <van-cell title="项目类型:" :label="formatter(AllData.ProjectData.projectTypeCode)" />
+      <van-cell title="项目建设情况:" :label="formatter2(AllData.ProjectData.buildStatus)" />
+      <van-cell title="项目简介:" :label="AllData.ProjectData.projectOverview" />
+      <van-cell>
+        <template #title>
+          <span class="custom-title">项目图片</span>
+        </template>
+        <template #label>
+          <van-image
+            v-for="(item, index) in AllData.ProjectData.sysFileList"
+            width="100%"
+            height="auto"
+            fit="contain"
+            :src="item.url"
+            @click="Yulan(index)"
+          />
+        </template>
+      </van-cell>
+    </van-cell-group>
+  </van-popup>
+  <!-- PC弹窗 -->
+  <!-- <div class="dialog" v-show="AllData.showBottom" v-else></div> -->
+  <!-- <van-image-preview v-model:show="AllData.previewShow" :images="AllData.images">
+  </van-image-preview> -->
+  <van-image-preview
+    v-model:show="AllData.previewShow"
+    :images="AllData.images"
+    :close-on-click-image="false"
+    :start-position="AllData.imagesIndex"
+  >
+    <template #image="{ src, style, onLoad }">
+      <img :style="[{ width: '100%' }, style]" :src="src" />
+    </template>
+  </van-image-preview>
 </template>
+
+<script setup>
+import WKT from 'terraformer-wkt-parser';
+import { defineProps, computed, defineEmits, ref, onMounted } from 'vue';
+import { showImagePreview } from 'vant';
+import { getProjects } from '@/api/project';
+import AMapUtils from '@/utils/gis/AMapUtils';
+import Img1 from '/static/images/1.png';
+import Img2 from '/static/images/2.png';
+import Img3 from '/static/images/3.png';
+import Img4 from '/static/images/4.png';
+import Img5 from '/static/images/5.png';
+import Img6 from '/static/images/6.png';
+import Img7 from '/static/images/7.png';
+const ICONS_MAP = {
+  HMJZYSQ: '/static/images/HMJZYSQ.png',
+  HMXGYLD: '/static/images/HMXGYLD.png',
+  HMXDLGC: '/static/images/HMXDLGC.png',
+  HMXSX: '/static/images/HMXSX.png',
+  GIS: '/static/images/GIS.png',
+  GWPCYXF: '/static/images/GWPCYXF.png',
+  GWJBZ: '/static/images/GWJBZ.png',
+};
+const AllData = reactive({
+  TuLi: [
+    {
+      name: 'GIS',
+      img: Img1,
+      check: true,
+      font: 'GIS平台建设与监测设施',
+    },
+    {
+      name: 'HMXDLGC',
+      img: Img2,
+      check: true,
+      font: '海绵型道路广场',
+    },
+    {
+      name: 'HMXGYLD',
+      img: Img3,
+      check: true,
+      font: '海绵型公园绿地',
+    },
+    {
+      name: 'GWJBZ',
+      img: Img4,
+      check: true,
+      font: '雨水管网及泵站',
+    },
+    {
+      name: 'GWPCYXF',
+      img: Img5,
+      check: true,
+      font: '管网排查与修复项目',
+    },
+    {
+      name: 'HMJZYSQ',
+      img: Img6,
+      check: true,
+      font: '海绵型建筑与社区',
+    },
+    {
+      name: 'HMXSX',
+      img: Img7,
+      check: true,
+      font: '海绵型水系',
+    },
+  ],
+  showBottom: false,
+  keyObj: [
+    {
+      key: 'projectName',
+      name: '项目名称:',
+    },
+    {
+      key: 'projectOverview',
+      name: '项目简介:',
+    },
+    // {
+    //   key: "startTime",
+    //   name: "项目开始时间:",
+    // },
+    // {
+    //   key: "endTime",
+    //   name: "项目交付时间:",
+    // },
+    // {
+    //   key: "chargeDepartment",
+    //   name: "责任部门:",
+    // },
+    // {
+    //   key: "chargeUser",
+    //   name: "责任人:",
+    // },
+    // {
+    //   key: "phone",
+    //   name: "联系方式:",
+    // },
+  ],
+  ProjectData: {},
+  isPC: false,
+  jiansheleixing: [
+    {
+      name: 'not_approved',
+      font: '尚未立项',
+    },
+    {
+      name: 'XMQQSWWCSJJD',
+      font: '在建',
+    },
+    {
+      name: 'XMQQSWWCZB',
+      font: '在建',
+    },
+    {
+      name: 'not_yet_under_construction',
+      font: '在建',
+    },
+    {
+      name: 'opened',
+      font: '在建',
+    },
+    {
+      name: 'completed',
+      font: '已竣工',
+    },
+    {
+      name: 'Suspended',
+      font: '已停工',
+    },
+  ],
+  previewShow: false,
+  images: [],
+  imagesIndex: 0,
+});
+const getProjectss1 = async () => {
+  let { data } = await getProjects();
+  let features = data.data
+    .filter((i) => i.projectLocation)
+    .map((i) =>
+      turf.point(i.projectLocation.split(',').map(Number), {
+        ...i,
+        mapParams: {
+          icon: ICONS_MAP[i.projectTypeCode],
+          group: i.projectTypeCode,
+          name: i.projectName,
+        },
+      })
+    );
+  amapUtils.geojsonToMap(turf.featureCollection(features));
+};
+const getProjectss = async () => {
+  let { data } = await getProjects();
+  let features = data
+    .filter((i) => i.projectLocation)
+    .map((i) => {
+      if (i.projectLocation.indexOf('POINT') > -1) {
+        i.feature = {
+          type: 'Feature',
+          geometry: WKT.parse(i.projectLocation),
+          properties: {
+            ...i,
+            mapParams: {
+              icon: ICONS_MAP[i.projectTypeCode],
+              group: i.projectTypeCode,
+              name: i.projectName,
+            },
+          },
+        };
+        return i.feature;
+      } else {
+        return turf.point(i.projectLocation.split(',').map(Number), {
+          ...i,
+          mapParams: {
+            icon: ICONS_MAP[i.projectTypeCode],
+            group: i.projectTypeCode,
+            name: i.projectName,
+          },
+        });
+      }
+    });
+  amapUtils.geojsonToMap(turf.featureCollection(features));
+};
+const TuLiClick = (item) => {
+  item.check = !item.check;
+  amapUtils.setVisibleByIds([item.name], item.check);
+};
+
+const init = () => {
+  window.amapUtils = new AMapUtils('map');
+  // amapUtils.showCityInfo();
+  amapUtils.registerEvent(AMapUtils._default.events.click, (target, lngLat) => {
+    console.log('target,lngLat', target.getExtData(), lngLat);
+    // 内容赋值
+    AllData.ProjectData = target.getExtData();
+    // 判断当前环境
+    // if (AllData.isPC) {
+    // 打开PC弹窗
+    // } else {
+    // 打开移动端弹窗
+    AllData.showBottom = true;
+    // }
+  });
+  getProjectss();
+};
+/*
+ *根据分辨率用来检测是 PC还是移动终端
+ */
+// const flashChecker = () => {
+//   let winWidth = window.innerWidth || document.documentElement.clientWidth;
+//   if (winWidth < 750) {
+//     AllData.isPC = false;
+//   } else {
+//     AllData.isPC = true;
+//   }
+
+// };
+const formatter = (item) => {
+  let str = '';
+  AllData.TuLi.forEach((element) => {
+    if (element.name == item) {
+      str = element.font;
+    }
+  });
+  return str;
+};
+const formatter2 = (item) => {
+  let str = '';
+  AllData.jiansheleixing.forEach((element) => {
+    if (element.name == item) {
+      str = element.font;
+    }
+  });
+  return str;
+};
+const Yulan = (index) => {
+  let Arr = [];
+  AllData.ProjectData.sysFileList.forEach((tem) => {
+    Arr.push(tem.url);
+  });
+  // showImagePreview({
+  //   images: Arr,
+  //   startPosition: index,
+  // });
+  AllData.imagesIndex = index;
+  AllData.images = Arr;
+  AllData.previewShow = true;
+};
+onMounted(() => {
+  // flashChecker();
+  // 初始化地图
+  let interVal = setInterval(() => {
+    if (window.AMap) init(), clearInterval(interVal);
+  }, 500);
+});
+</script>
+
+<style lang="less" scoped>
+#map {
+  background: #ffffff;
+}
+
+/* 针对宽度小于750px的屏幕 */
+/**默认移动端,进行vw适配 */
+// @media screen and (max-width: 750px) {
+.TopTuLi {
+  position: absolute;
+  top: 5px;
+  left: 0;
+  width: calc(100% - 20px);
+  height: 200px;
+  background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.685));
+  z-index: 999;
+  border-radius: 30px;
+  margin-left: 10px;
+
+  .Title {
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    text-align: center;
+    font-size: 26px;
+    color: black;
+  }
+
+  .TuLiListBox {
+    width: 100%;
+    height: 140px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-evenly;
+    align-items: center;
+    border-radius: 10px;
+    .TuLiList {
+      width: 10%;
+      height: 140px;
+
+      .ListImg {
+        width: 100%;
+        height: auto;
+      }
+      .ShowDiv {
+        width: 100%;
+        height: 5px;
+        background: lime;
+        margin-top: 10px;
+      }
+    }
+  }
+}
+
+// }
+/* 针对宽度大于或等于750px的屏幕 不进行vw转换 */
+// @media screen and (min-width: 750px) {
+//   .TopTuLi {
+//     position: absolute;
+//     top: 5px;
+//     left: 0;
+//     width: calc(100% - 20px);
+//     height: 200px;
+//     background: linear-gradient(
+//       to bottom,
+//       rgb(255, 255, 255),
+//       rgba(255, 255, 255, 0.685)
+//     );
+//     z-index: 999;
+//     border-radius: 30px;
+//     margin-left: 10px;
+//     ::selection {
+//       background: none;
+//       color: inherit;
+//     }
+
+//     .Title {
+//       width: 100%;
+//       height: 60px;
+//       line-height: 60px;
+//       text-align: center;
+//       font-size: 26px;
+//       color: black;
+//     }
+
+//     .TuLiListBox {
+//       width: 100%;
+//       height: 140px;
+//       display: flex;
+//       flex-direction: row;
+//       flex-wrap: nowrap;
+//       justify-content: center;
+//       align-items: center;
+//       border-radius: 10px;
+//       .TuLiList {
+//         width: 84.2px;
+//         height: 140px;
+//         cursor: pointer;
+//         margin: 0 10px;
+
+//         .ListImg {
+//           width: 100%;
+//           height: 120px;
+//         }
+//         .ShowDiv {
+//           width: 100%;
+//           height: 5px;
+//           background: lime;
+//           margin-top: 5px;
+//           border-radius: 10px;
+//         }
+//       }
+//     }
+//   }
+// }
+</style>
diff --git a/src/views/PublicAdvice.vue b/src/views/PublicAdvice.vue
index 9fbbb2b..cf7791b 100644
--- a/src/views/PublicAdvice.vue
+++ b/src/views/PublicAdvice.vue
@@ -186,7 +186,7 @@
 };
 
 onMounted(() => {
-  // getDataList();
+  getDataList();
 });
 </script>
 
@@ -194,7 +194,7 @@
 .SpongeCultureCLass {
   height: 100%;
   overflow: auto;
-  background: #ffffff00;
+  background: #f1f1f1;
   .ConstrucClass {
     margin: 30px 20px 30px 20px;
     padding: 20px;
diff --git a/src/views/SpongeCulture.vue b/src/views/SpongeCulture.vue
index cec68eb..923db9f 100644
--- a/src/views/SpongeCulture.vue
+++ b/src/views/SpongeCulture.vue
@@ -40,7 +40,7 @@
 }
 
 onMounted(() => {
-  // getDataList();
+  getDataList();
 });
 </script>
 
@@ -49,7 +49,7 @@
   height: 100%;
   overflow: auto;
   //   background: red;
-  background: #ffffff00;
+  background: #f1f1f1;
 
   .newsList {
     margin: 30px 20px 30px 20px;

diff --git a/src/assets/images/wjtc.png b/src/assets/images/wjtc.png
new file mode 100644
index 0000000..2476d77
--- /dev/null
+++ b/src/assets/images/wjtc.png
Binary files differ
diff --git a/src/views/ElectronicMap.vue b/src/views/ElectronicMap.vue
index b922ca8..91078b6 100644
--- a/src/views/ElectronicMap.vue
+++ b/src/views/ElectronicMap.vue
@@ -1,3 +1,428 @@
 <template>
-  <div>电子地图</div>
+  <!-- 地图 -->
+  <div class="position-r w-100 h-100" id="map"></div>
+  <!-- 顶部图层控制 移动 -->
+  <div class="TopTuLi">
+    <div class="Title">工程项目</div>
+    <div class="TuLiListBox">
+      <div v-for="item in AllData.TuLi" class="TuLiList" @click="TuLiClick(item)">
+        <img class="ListImg" :src="item.img" />
+        <div class="ShowDiv" v-show="item.check"></div>
+      </div>
+    </div>
+  </div>
+  <!-- 顶部图层控制 PC -->
+  <!-- <div class="TopTuLiPC" v-else></div> -->
+  <!-- 底部弹出 -->
+  <van-popup v-model:show="AllData.showBottom" position="bottom" :style="{ height: '60%' }" round>
+    <van-cell-group inset>
+      <van-cell title="项目名称:" :label="AllData.ProjectData.projectName" />
+      <van-cell title="项目类型:" :label="formatter(AllData.ProjectData.projectTypeCode)" />
+      <van-cell title="项目建设情况:" :label="formatter2(AllData.ProjectData.buildStatus)" />
+      <van-cell title="项目简介:" :label="AllData.ProjectData.projectOverview" />
+      <van-cell>
+        <template #title>
+          <span class="custom-title">项目图片</span>
+        </template>
+        <template #label>
+          <van-image
+            v-for="(item, index) in AllData.ProjectData.sysFileList"
+            width="100%"
+            height="auto"
+            fit="contain"
+            :src="item.url"
+            @click="Yulan(index)"
+          />
+        </template>
+      </van-cell>
+    </van-cell-group>
+  </van-popup>
+  <!-- PC弹窗 -->
+  <!-- <div class="dialog" v-show="AllData.showBottom" v-else></div> -->
+  <!-- <van-image-preview v-model:show="AllData.previewShow" :images="AllData.images">
+  </van-image-preview> -->
+  <van-image-preview
+    v-model:show="AllData.previewShow"
+    :images="AllData.images"
+    :close-on-click-image="false"
+    :start-position="AllData.imagesIndex"
+  >
+    <template #image="{ src, style, onLoad }">
+      <img :style="[{ width: '100%' }, style]" :src="src" />
+    </template>
+  </van-image-preview>
 </template>
+
+<script setup>
+import WKT from 'terraformer-wkt-parser';
+import { defineProps, computed, defineEmits, ref, onMounted } from 'vue';
+import { showImagePreview } from 'vant';
+import { getProjects } from '@/api/project';
+import AMapUtils from '@/utils/gis/AMapUtils';
+import Img1 from '/static/images/1.png';
+import Img2 from '/static/images/2.png';
+import Img3 from '/static/images/3.png';
+import Img4 from '/static/images/4.png';
+import Img5 from '/static/images/5.png';
+import Img6 from '/static/images/6.png';
+import Img7 from '/static/images/7.png';
+const ICONS_MAP = {
+  HMJZYSQ: '/static/images/HMJZYSQ.png',
+  HMXGYLD: '/static/images/HMXGYLD.png',
+  HMXDLGC: '/static/images/HMXDLGC.png',
+  HMXSX: '/static/images/HMXSX.png',
+  GIS: '/static/images/GIS.png',
+  GWPCYXF: '/static/images/GWPCYXF.png',
+  GWJBZ: '/static/images/GWJBZ.png',
+};
+const AllData = reactive({
+  TuLi: [
+    {
+      name: 'GIS',
+      img: Img1,
+      check: true,
+      font: 'GIS平台建设与监测设施',
+    },
+    {
+      name: 'HMXDLGC',
+      img: Img2,
+      check: true,
+      font: '海绵型道路广场',
+    },
+    {
+      name: 'HMXGYLD',
+      img: Img3,
+      check: true,
+      font: '海绵型公园绿地',
+    },
+    {
+      name: 'GWJBZ',
+      img: Img4,
+      check: true,
+      font: '雨水管网及泵站',
+    },
+    {
+      name: 'GWPCYXF',
+      img: Img5,
+      check: true,
+      font: '管网排查与修复项目',
+    },
+    {
+      name: 'HMJZYSQ',
+      img: Img6,
+      check: true,
+      font: '海绵型建筑与社区',
+    },
+    {
+      name: 'HMXSX',
+      img: Img7,
+      check: true,
+      font: '海绵型水系',
+    },
+  ],
+  showBottom: false,
+  keyObj: [
+    {
+      key: 'projectName',
+      name: '项目名称:',
+    },
+    {
+      key: 'projectOverview',
+      name: '项目简介:',
+    },
+    // {
+    //   key: "startTime",
+    //   name: "项目开始时间:",
+    // },
+    // {
+    //   key: "endTime",
+    //   name: "项目交付时间:",
+    // },
+    // {
+    //   key: "chargeDepartment",
+    //   name: "责任部门:",
+    // },
+    // {
+    //   key: "chargeUser",
+    //   name: "责任人:",
+    // },
+    // {
+    //   key: "phone",
+    //   name: "联系方式:",
+    // },
+  ],
+  ProjectData: {},
+  isPC: false,
+  jiansheleixing: [
+    {
+      name: 'not_approved',
+      font: '尚未立项',
+    },
+    {
+      name: 'XMQQSWWCSJJD',
+      font: '在建',
+    },
+    {
+      name: 'XMQQSWWCZB',
+      font: '在建',
+    },
+    {
+      name: 'not_yet_under_construction',
+      font: '在建',
+    },
+    {
+      name: 'opened',
+      font: '在建',
+    },
+    {
+      name: 'completed',
+      font: '已竣工',
+    },
+    {
+      name: 'Suspended',
+      font: '已停工',
+    },
+  ],
+  previewShow: false,
+  images: [],
+  imagesIndex: 0,
+});
+const getProjectss1 = async () => {
+  let { data } = await getProjects();
+  let features = data.data
+    .filter((i) => i.projectLocation)
+    .map((i) =>
+      turf.point(i.projectLocation.split(',').map(Number), {
+        ...i,
+        mapParams: {
+          icon: ICONS_MAP[i.projectTypeCode],
+          group: i.projectTypeCode,
+          name: i.projectName,
+        },
+      })
+    );
+  amapUtils.geojsonToMap(turf.featureCollection(features));
+};
+const getProjectss = async () => {
+  let { data } = await getProjects();
+  let features = data
+    .filter((i) => i.projectLocation)
+    .map((i) => {
+      if (i.projectLocation.indexOf('POINT') > -1) {
+        i.feature = {
+          type: 'Feature',
+          geometry: WKT.parse(i.projectLocation),
+          properties: {
+            ...i,
+            mapParams: {
+              icon: ICONS_MAP[i.projectTypeCode],
+              group: i.projectTypeCode,
+              name: i.projectName,
+            },
+          },
+        };
+        return i.feature;
+      } else {
+        return turf.point(i.projectLocation.split(',').map(Number), {
+          ...i,
+          mapParams: {
+            icon: ICONS_MAP[i.projectTypeCode],
+            group: i.projectTypeCode,
+            name: i.projectName,
+          },
+        });
+      }
+    });
+  amapUtils.geojsonToMap(turf.featureCollection(features));
+};
+const TuLiClick = (item) => {
+  item.check = !item.check;
+  amapUtils.setVisibleByIds([item.name], item.check);
+};
+
+const init = () => {
+  window.amapUtils = new AMapUtils('map');
+  // amapUtils.showCityInfo();
+  amapUtils.registerEvent(AMapUtils._default.events.click, (target, lngLat) => {
+    console.log('target,lngLat', target.getExtData(), lngLat);
+    // 内容赋值
+    AllData.ProjectData = target.getExtData();
+    // 判断当前环境
+    // if (AllData.isPC) {
+    // 打开PC弹窗
+    // } else {
+    // 打开移动端弹窗
+    AllData.showBottom = true;
+    // }
+  });
+  getProjectss();
+};
+/*
+ *根据分辨率用来检测是 PC还是移动终端
+ */
+// const flashChecker = () => {
+//   let winWidth = window.innerWidth || document.documentElement.clientWidth;
+//   if (winWidth < 750) {
+//     AllData.isPC = false;
+//   } else {
+//     AllData.isPC = true;
+//   }
+
+// };
+const formatter = (item) => {
+  let str = '';
+  AllData.TuLi.forEach((element) => {
+    if (element.name == item) {
+      str = element.font;
+    }
+  });
+  return str;
+};
+const formatter2 = (item) => {
+  let str = '';
+  AllData.jiansheleixing.forEach((element) => {
+    if (element.name == item) {
+      str = element.font;
+    }
+  });
+  return str;
+};
+const Yulan = (index) => {
+  let Arr = [];
+  AllData.ProjectData.sysFileList.forEach((tem) => {
+    Arr.push(tem.url);
+  });
+  // showImagePreview({
+  //   images: Arr,
+  //   startPosition: index,
+  // });
+  AllData.imagesIndex = index;
+  AllData.images = Arr;
+  AllData.previewShow = true;
+};
+onMounted(() => {
+  // flashChecker();
+  // 初始化地图
+  let interVal = setInterval(() => {
+    if (window.AMap) init(), clearInterval(interVal);
+  }, 500);
+});
+</script>
+
+<style lang="less" scoped>
+#map {
+  background: #ffffff;
+}
+
+/* 针对宽度小于750px的屏幕 */
+/**默认移动端,进行vw适配 */
+// @media screen and (max-width: 750px) {
+.TopTuLi {
+  position: absolute;
+  top: 5px;
+  left: 0;
+  width: calc(100% - 20px);
+  height: 200px;
+  background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.685));
+  z-index: 999;
+  border-radius: 30px;
+  margin-left: 10px;
+
+  .Title {
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    text-align: center;
+    font-size: 26px;
+    color: black;
+  }
+
+  .TuLiListBox {
+    width: 100%;
+    height: 140px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-evenly;
+    align-items: center;
+    border-radius: 10px;
+    .TuLiList {
+      width: 10%;
+      height: 140px;
+
+      .ListImg {
+        width: 100%;
+        height: auto;
+      }
+      .ShowDiv {
+        width: 100%;
+        height: 5px;
+        background: lime;
+        margin-top: 10px;
+      }
+    }
+  }
+}
+
+// }
+/* 针对宽度大于或等于750px的屏幕 不进行vw转换 */
+// @media screen and (min-width: 750px) {
+//   .TopTuLi {
+//     position: absolute;
+//     top: 5px;
+//     left: 0;
+//     width: calc(100% - 20px);
+//     height: 200px;
+//     background: linear-gradient(
+//       to bottom,
+//       rgb(255, 255, 255),
+//       rgba(255, 255, 255, 0.685)
+//     );
+//     z-index: 999;
+//     border-radius: 30px;
+//     margin-left: 10px;
+//     ::selection {
+//       background: none;
+//       color: inherit;
+//     }
+
+//     .Title {
+//       width: 100%;
+//       height: 60px;
+//       line-height: 60px;
+//       text-align: center;
+//       font-size: 26px;
+//       color: black;
+//     }
+
+//     .TuLiListBox {
+//       width: 100%;
+//       height: 140px;
+//       display: flex;
+//       flex-direction: row;
+//       flex-wrap: nowrap;
+//       justify-content: center;
+//       align-items: center;
+//       border-radius: 10px;
+//       .TuLiList {
+//         width: 84.2px;
+//         height: 140px;
+//         cursor: pointer;
+//         margin: 0 10px;
+
+//         .ListImg {
+//           width: 100%;
+//           height: 120px;
+//         }
+//         .ShowDiv {
+//           width: 100%;
+//           height: 5px;
+//           background: lime;
+//           margin-top: 5px;
+//           border-radius: 10px;
+//         }
+//       }
+//     }
+//   }
+// }
+</style>
diff --git a/src/views/PublicAdvice.vue b/src/views/PublicAdvice.vue
index 9fbbb2b..cf7791b 100644
--- a/src/views/PublicAdvice.vue
+++ b/src/views/PublicAdvice.vue
@@ -186,7 +186,7 @@
 };
 
 onMounted(() => {
-  // getDataList();
+  getDataList();
 });
 </script>
 
@@ -194,7 +194,7 @@
 .SpongeCultureCLass {
   height: 100%;
   overflow: auto;
-  background: #ffffff00;
+  background: #f1f1f1;
   .ConstrucClass {
     margin: 30px 20px 30px 20px;
     padding: 20px;
diff --git a/src/views/SpongeCulture.vue b/src/views/SpongeCulture.vue
index cec68eb..923db9f 100644
--- a/src/views/SpongeCulture.vue
+++ b/src/views/SpongeCulture.vue
@@ -40,7 +40,7 @@
 }
 
 onMounted(() => {
-  // getDataList();
+  getDataList();
 });
 </script>
 
@@ -49,7 +49,7 @@
   height: 100%;
   overflow: auto;
   //   background: red;
-  background: #ffffff00;
+  background: #f1f1f1;
 
   .newsList {
     margin: 30px 20px 30px 20px;
diff --git a/src/views/login.vue b/src/views/login.vue
index 6d01690..0e2865c 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -210,6 +210,7 @@
 };
 const getProjectss = async () => {
   let { data } = await getProjects();
+  console.log(data, 'data');
   let features = data.data
     .filter((i) => i.projectLocation)
     .map((i) => {

diff --git a/src/assets/images/wjtc.png b/src/assets/images/wjtc.png
new file mode 100644
index 0000000..2476d77
--- /dev/null
+++ b/src/assets/images/wjtc.png
Binary files differ
diff --git a/src/views/ElectronicMap.vue b/src/views/ElectronicMap.vue
index b922ca8..91078b6 100644
--- a/src/views/ElectronicMap.vue
+++ b/src/views/ElectronicMap.vue
@@ -1,3 +1,428 @@
 <template>
-  <div>电子地图</div>
+  <!-- 地图 -->
+  <div class="position-r w-100 h-100" id="map"></div>
+  <!-- 顶部图层控制 移动 -->
+  <div class="TopTuLi">
+    <div class="Title">工程项目</div>
+    <div class="TuLiListBox">
+      <div v-for="item in AllData.TuLi" class="TuLiList" @click="TuLiClick(item)">
+        <img class="ListImg" :src="item.img" />
+        <div class="ShowDiv" v-show="item.check"></div>
+      </div>
+    </div>
+  </div>
+  <!-- 顶部图层控制 PC -->
+  <!-- <div class="TopTuLiPC" v-else></div> -->
+  <!-- 底部弹出 -->
+  <van-popup v-model:show="AllData.showBottom" position="bottom" :style="{ height: '60%' }" round>
+    <van-cell-group inset>
+      <van-cell title="项目名称:" :label="AllData.ProjectData.projectName" />
+      <van-cell title="项目类型:" :label="formatter(AllData.ProjectData.projectTypeCode)" />
+      <van-cell title="项目建设情况:" :label="formatter2(AllData.ProjectData.buildStatus)" />
+      <van-cell title="项目简介:" :label="AllData.ProjectData.projectOverview" />
+      <van-cell>
+        <template #title>
+          <span class="custom-title">项目图片</span>
+        </template>
+        <template #label>
+          <van-image
+            v-for="(item, index) in AllData.ProjectData.sysFileList"
+            width="100%"
+            height="auto"
+            fit="contain"
+            :src="item.url"
+            @click="Yulan(index)"
+          />
+        </template>
+      </van-cell>
+    </van-cell-group>
+  </van-popup>
+  <!-- PC弹窗 -->
+  <!-- <div class="dialog" v-show="AllData.showBottom" v-else></div> -->
+  <!-- <van-image-preview v-model:show="AllData.previewShow" :images="AllData.images">
+  </van-image-preview> -->
+  <van-image-preview
+    v-model:show="AllData.previewShow"
+    :images="AllData.images"
+    :close-on-click-image="false"
+    :start-position="AllData.imagesIndex"
+  >
+    <template #image="{ src, style, onLoad }">
+      <img :style="[{ width: '100%' }, style]" :src="src" />
+    </template>
+  </van-image-preview>
 </template>
+
+<script setup>
+import WKT from 'terraformer-wkt-parser';
+import { defineProps, computed, defineEmits, ref, onMounted } from 'vue';
+import { showImagePreview } from 'vant';
+import { getProjects } from '@/api/project';
+import AMapUtils from '@/utils/gis/AMapUtils';
+import Img1 from '/static/images/1.png';
+import Img2 from '/static/images/2.png';
+import Img3 from '/static/images/3.png';
+import Img4 from '/static/images/4.png';
+import Img5 from '/static/images/5.png';
+import Img6 from '/static/images/6.png';
+import Img7 from '/static/images/7.png';
+const ICONS_MAP = {
+  HMJZYSQ: '/static/images/HMJZYSQ.png',
+  HMXGYLD: '/static/images/HMXGYLD.png',
+  HMXDLGC: '/static/images/HMXDLGC.png',
+  HMXSX: '/static/images/HMXSX.png',
+  GIS: '/static/images/GIS.png',
+  GWPCYXF: '/static/images/GWPCYXF.png',
+  GWJBZ: '/static/images/GWJBZ.png',
+};
+const AllData = reactive({
+  TuLi: [
+    {
+      name: 'GIS',
+      img: Img1,
+      check: true,
+      font: 'GIS平台建设与监测设施',
+    },
+    {
+      name: 'HMXDLGC',
+      img: Img2,
+      check: true,
+      font: '海绵型道路广场',
+    },
+    {
+      name: 'HMXGYLD',
+      img: Img3,
+      check: true,
+      font: '海绵型公园绿地',
+    },
+    {
+      name: 'GWJBZ',
+      img: Img4,
+      check: true,
+      font: '雨水管网及泵站',
+    },
+    {
+      name: 'GWPCYXF',
+      img: Img5,
+      check: true,
+      font: '管网排查与修复项目',
+    },
+    {
+      name: 'HMJZYSQ',
+      img: Img6,
+      check: true,
+      font: '海绵型建筑与社区',
+    },
+    {
+      name: 'HMXSX',
+      img: Img7,
+      check: true,
+      font: '海绵型水系',
+    },
+  ],
+  showBottom: false,
+  keyObj: [
+    {
+      key: 'projectName',
+      name: '项目名称:',
+    },
+    {
+      key: 'projectOverview',
+      name: '项目简介:',
+    },
+    // {
+    //   key: "startTime",
+    //   name: "项目开始时间:",
+    // },
+    // {
+    //   key: "endTime",
+    //   name: "项目交付时间:",
+    // },
+    // {
+    //   key: "chargeDepartment",
+    //   name: "责任部门:",
+    // },
+    // {
+    //   key: "chargeUser",
+    //   name: "责任人:",
+    // },
+    // {
+    //   key: "phone",
+    //   name: "联系方式:",
+    // },
+  ],
+  ProjectData: {},
+  isPC: false,
+  jiansheleixing: [
+    {
+      name: 'not_approved',
+      font: '尚未立项',
+    },
+    {
+      name: 'XMQQSWWCSJJD',
+      font: '在建',
+    },
+    {
+      name: 'XMQQSWWCZB',
+      font: '在建',
+    },
+    {
+      name: 'not_yet_under_construction',
+      font: '在建',
+    },
+    {
+      name: 'opened',
+      font: '在建',
+    },
+    {
+      name: 'completed',
+      font: '已竣工',
+    },
+    {
+      name: 'Suspended',
+      font: '已停工',
+    },
+  ],
+  previewShow: false,
+  images: [],
+  imagesIndex: 0,
+});
+const getProjectss1 = async () => {
+  let { data } = await getProjects();
+  let features = data.data
+    .filter((i) => i.projectLocation)
+    .map((i) =>
+      turf.point(i.projectLocation.split(',').map(Number), {
+        ...i,
+        mapParams: {
+          icon: ICONS_MAP[i.projectTypeCode],
+          group: i.projectTypeCode,
+          name: i.projectName,
+        },
+      })
+    );
+  amapUtils.geojsonToMap(turf.featureCollection(features));
+};
+const getProjectss = async () => {
+  let { data } = await getProjects();
+  let features = data
+    .filter((i) => i.projectLocation)
+    .map((i) => {
+      if (i.projectLocation.indexOf('POINT') > -1) {
+        i.feature = {
+          type: 'Feature',
+          geometry: WKT.parse(i.projectLocation),
+          properties: {
+            ...i,
+            mapParams: {
+              icon: ICONS_MAP[i.projectTypeCode],
+              group: i.projectTypeCode,
+              name: i.projectName,
+            },
+          },
+        };
+        return i.feature;
+      } else {
+        return turf.point(i.projectLocation.split(',').map(Number), {
+          ...i,
+          mapParams: {
+            icon: ICONS_MAP[i.projectTypeCode],
+            group: i.projectTypeCode,
+            name: i.projectName,
+          },
+        });
+      }
+    });
+  amapUtils.geojsonToMap(turf.featureCollection(features));
+};
+const TuLiClick = (item) => {
+  item.check = !item.check;
+  amapUtils.setVisibleByIds([item.name], item.check);
+};
+
+const init = () => {
+  window.amapUtils = new AMapUtils('map');
+  // amapUtils.showCityInfo();
+  amapUtils.registerEvent(AMapUtils._default.events.click, (target, lngLat) => {
+    console.log('target,lngLat', target.getExtData(), lngLat);
+    // 内容赋值
+    AllData.ProjectData = target.getExtData();
+    // 判断当前环境
+    // if (AllData.isPC) {
+    // 打开PC弹窗
+    // } else {
+    // 打开移动端弹窗
+    AllData.showBottom = true;
+    // }
+  });
+  getProjectss();
+};
+/*
+ *根据分辨率用来检测是 PC还是移动终端
+ */
+// const flashChecker = () => {
+//   let winWidth = window.innerWidth || document.documentElement.clientWidth;
+//   if (winWidth < 750) {
+//     AllData.isPC = false;
+//   } else {
+//     AllData.isPC = true;
+//   }
+
+// };
+const formatter = (item) => {
+  let str = '';
+  AllData.TuLi.forEach((element) => {
+    if (element.name == item) {
+      str = element.font;
+    }
+  });
+  return str;
+};
+const formatter2 = (item) => {
+  let str = '';
+  AllData.jiansheleixing.forEach((element) => {
+    if (element.name == item) {
+      str = element.font;
+    }
+  });
+  return str;
+};
+const Yulan = (index) => {
+  let Arr = [];
+  AllData.ProjectData.sysFileList.forEach((tem) => {
+    Arr.push(tem.url);
+  });
+  // showImagePreview({
+  //   images: Arr,
+  //   startPosition: index,
+  // });
+  AllData.imagesIndex = index;
+  AllData.images = Arr;
+  AllData.previewShow = true;
+};
+onMounted(() => {
+  // flashChecker();
+  // 初始化地图
+  let interVal = setInterval(() => {
+    if (window.AMap) init(), clearInterval(interVal);
+  }, 500);
+});
+</script>
+
+<style lang="less" scoped>
+#map {
+  background: #ffffff;
+}
+
+/* 针对宽度小于750px的屏幕 */
+/**默认移动端,进行vw适配 */
+// @media screen and (max-width: 750px) {
+.TopTuLi {
+  position: absolute;
+  top: 5px;
+  left: 0;
+  width: calc(100% - 20px);
+  height: 200px;
+  background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.685));
+  z-index: 999;
+  border-radius: 30px;
+  margin-left: 10px;
+
+  .Title {
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    text-align: center;
+    font-size: 26px;
+    color: black;
+  }
+
+  .TuLiListBox {
+    width: 100%;
+    height: 140px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-evenly;
+    align-items: center;
+    border-radius: 10px;
+    .TuLiList {
+      width: 10%;
+      height: 140px;
+
+      .ListImg {
+        width: 100%;
+        height: auto;
+      }
+      .ShowDiv {
+        width: 100%;
+        height: 5px;
+        background: lime;
+        margin-top: 10px;
+      }
+    }
+  }
+}
+
+// }
+/* 针对宽度大于或等于750px的屏幕 不进行vw转换 */
+// @media screen and (min-width: 750px) {
+//   .TopTuLi {
+//     position: absolute;
+//     top: 5px;
+//     left: 0;
+//     width: calc(100% - 20px);
+//     height: 200px;
+//     background: linear-gradient(
+//       to bottom,
+//       rgb(255, 255, 255),
+//       rgba(255, 255, 255, 0.685)
+//     );
+//     z-index: 999;
+//     border-radius: 30px;
+//     margin-left: 10px;
+//     ::selection {
+//       background: none;
+//       color: inherit;
+//     }
+
+//     .Title {
+//       width: 100%;
+//       height: 60px;
+//       line-height: 60px;
+//       text-align: center;
+//       font-size: 26px;
+//       color: black;
+//     }
+
+//     .TuLiListBox {
+//       width: 100%;
+//       height: 140px;
+//       display: flex;
+//       flex-direction: row;
+//       flex-wrap: nowrap;
+//       justify-content: center;
+//       align-items: center;
+//       border-radius: 10px;
+//       .TuLiList {
+//         width: 84.2px;
+//         height: 140px;
+//         cursor: pointer;
+//         margin: 0 10px;
+
+//         .ListImg {
+//           width: 100%;
+//           height: 120px;
+//         }
+//         .ShowDiv {
+//           width: 100%;
+//           height: 5px;
+//           background: lime;
+//           margin-top: 5px;
+//           border-radius: 10px;
+//         }
+//       }
+//     }
+//   }
+// }
+</style>
diff --git a/src/views/PublicAdvice.vue b/src/views/PublicAdvice.vue
index 9fbbb2b..cf7791b 100644
--- a/src/views/PublicAdvice.vue
+++ b/src/views/PublicAdvice.vue
@@ -186,7 +186,7 @@
 };
 
 onMounted(() => {
-  // getDataList();
+  getDataList();
 });
 </script>
 
@@ -194,7 +194,7 @@
 .SpongeCultureCLass {
   height: 100%;
   overflow: auto;
-  background: #ffffff00;
+  background: #f1f1f1;
   .ConstrucClass {
     margin: 30px 20px 30px 20px;
     padding: 20px;
diff --git a/src/views/SpongeCulture.vue b/src/views/SpongeCulture.vue
index cec68eb..923db9f 100644
--- a/src/views/SpongeCulture.vue
+++ b/src/views/SpongeCulture.vue
@@ -40,7 +40,7 @@
 }
 
 onMounted(() => {
-  // getDataList();
+  getDataList();
 });
 </script>
 
@@ -49,7 +49,7 @@
   height: 100%;
   overflow: auto;
   //   background: red;
-  background: #ffffff00;
+  background: #f1f1f1;
 
   .newsList {
     margin: 30px 20px 30px 20px;
diff --git a/src/views/login.vue b/src/views/login.vue
index 6d01690..0e2865c 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -210,6 +210,7 @@
 };
 const getProjectss = async () => {
   let { data } = await getProjects();
+  console.log(data, 'data');
   let features = data.data
     .filter((i) => i.projectLocation)
     .map((i) => {
diff --git a/src/views/questionnaire.vue b/src/views/questionnaire.vue
index fdcf969..2a8863a 100644
--- a/src/views/questionnaire.vue
+++ b/src/views/questionnaire.vue
@@ -1,3 +1,60 @@
 <template>
-  <div>问卷调查</div>
+  <div class="questionnaire">
+    <div class="top">
+      <div>
+        <img class="ImgCLass" src="../assets/images/wjtc.png" alt="" />
+      </div>
+      <div class="below">
+        <p>
+          您好!今年是开封市创建海绵城市建设示范城市的第二年,为进一步了解群众对孝感市海绵城市建设的看法，我们正在进行项关于海绵城市建设群众满意度的调查,希望能够占用您三分钟的时间,填写问卷,您的看法对我们非常重要,数据资料我们将严格保密,结果将作为海绵城市建设绩效评价的参考,希望能够得到您的支持和配合,非常感谢!
+        </p>
+      </div>
+    </div>
+    <div class="under">1</div>
+  </div>
 </template>
+
+<script setup name="questionnaire"></script>
+
+<style lang="less" scoped>
+.questionnaire {
+  height: 100%;
+  overflow: auto;
+  background: #f1f1f1;
+
+  .top {
+    width: 100%;
+    background: red;
+    .ImgCLass {
+      margin: auto;
+      display: block;
+      width: 667px;
+      height: 120px;
+      position: relative;
+      top: 12px;
+    }
+    .below {
+      margin-top: 15px;
+      width: 667px;
+      margin-left: auto;
+      margin-right: auto;
+      // background: yellow;
+      p {
+        text-indent: 2em;
+        padding: 0px;
+        margin: 0px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 25px;
+        color: #121212;
+        line-height: 39px;
+      }
+    }
+  }
+  .under {
+    width: 100%;
+    margin-top: 10px;
+    background: yellow;
+  }
+}
+</style>