修改样式图片

src/App.vue

@@ -2,5 +2,25 @@
   <router-view></router-view>
 </template>
 
-<style scoped>
+<style >
+@import url("@/css/common.scss");
+* {
+  margin: 0;
+  padding: 0;
+}
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+::-webkit-scrollbar-track {
+  background-color: #00000000;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: #0a496a;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: #0c5277;
+}
 </style>

src/api/screen.js

+import request from "@/utils/request";
+
+export function getCommunityList(params) {
+    return request({
+        url: "/atlas/lsc/communitylist",
+        method: "get",
+        params,
+    });
+}
+
+export function getGridList(params) {
+    return request({
+        url: "/atlas/grid/list",
+        method: "get",
+        params,
+    });
+}
+
+export function getBlockList(params) {
+    return request({
+        url: "/atlas/block/list",
+        method: "get",
+        params,
+    });
+}
+
+export function getHouseList(params) {
+    return request({
+        url: "/wcwy/house/list",
+        method: "get",
+        params,
+    });
+}
+
+export function putBlock(data) {
+    return request({
+        url: "/atlas/block",
+        method: "put",
+        data,
+    });
+}
+export function putGrid(data) {
+    return request({
+        url: "/atlas/grid",
+        method: "put",
+        data,
+    });
+}
+export function putCommunity(data) {
+    return request({
+        url: "/atlas/community",
+        method: "put",
+        data,
+    });
+}
+export function putHouse(data) {
+    return request({
+        url: "/wcwy/house/update",
+        method: "put",
+        data,
+    });
+}
+
+export function getSelectCountPB(data) {
+    return request({
+        url: `/atlas/lsc/selectCountPB`,
+        method: "post",
+        data,
+    });
+}
+
+export function getSelectCountEdu(data) {
+    return request({
+        url: `/atlas/lsc/selectCountEdu`,
+        method: "post",
+        data,
+    });
+}
+
+export function getSelectCountPS(data) {
+    return request({
+        url: `/atlas/lsc/selectCountPS`,
+        method: "post",
+        data,
+    });
+}
+
+export function getSelectCountAge(data) {
+    return request({
+        url: `/atlas/lsc/selectCountAge`,
+        method: "post",
+        data,
+    });
+}
+
+export function getDemandlist(data) {
+    return request({
+        url: `/atlas/lsc/demandlist`,
+        method: "post",
+        data,
+    });
+}
+
+export function getDemandcount(data) {
+    return request({
+        url: `/atlas/lsc/demandcount`,
+        method: "post",
+        data,
+    });
+}
+
+export function getCpclist(data) {
+    return request({
+        url: `/atlas/lsc/swlist`,
+        method: "post",
+        data,
+    });
+}
+
+export function getCoBuilddingUnitList(params) {
+    return request({
+        url: `/atlas/coBuildingUnit/list`,
+        method: 'get',
+        params
+    })
+}
+export function putCoBuilddingUnit(data) {
+    return request({
+        url: "/atlas/coBuildingUnit",
+        method: "put",
+        data,
+    });
+}
+
+export function getStreet(data) {
+    return request({
+        url: `/atlas/lsc/street`,
+        method: "post",
+        data,
+    });
+}
+
+export function getStoreList(params) {
+    return request({
+        url: `atlas/store/list`,
+        method: 'get',
+        params
+    })
+}
+export function putStore(data) {
+    return request({
+        url: "/atlas/store",
+        method: "put",
+        data,
+    });
+}
+export function getSiteList(params) {
+    return request({
+        url: `atlas/site/list`,
+        method: 'get',
+        params
+    })
+}
+export function putSite(data) {
+    return request({
+        url: "/atlas/site",
+        method: "put",
+        data,
+    })
+}
+
+export function getHonorList(data) {
+    return request({
+        url: `/atlas/lsc/honor`,
+        method: 'post',
+        data
+    })
+}
\ No newline at end of file

src/components/echartMoudle.vue

+<template>
+  <div :id="props.id" :style="'width:'+props.width+'px;height:'+props.height+'px;margin:0 auto'"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, computed, onUnmounted } from "vue";
+import * as echarts from "echarts";
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  options: {
+    type: Object,
+    required: true,
+  },
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+});
+
+const options = computed(() => {
+  console.log("props.options", props.options);
+  return props.options;
+});
+const myChart = ref("");
+const getEchart = (options) => {
+  const chart = document.getElementById(props.id);
+  if (chart) {
+    myChart.value = echarts.init(chart);
+    myChart.value.setOption(options, true);
+    window.addEventListener("resize", function () {
+      myChart.value.resize();
+    });
+  }
+};
+watch(options, (newVal) => {
+  getEchart(newVal);
+});
+// onUnmounted(() => {
+//   if (myChart.value) {
+//     myChart.value.dispose(); // 销毁图表实例
+//   }
+// });
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file

src/components/eventAnalysis.vue

+<template>
+  <div class="common-box" style="margin-top: 10px;">
+    <div class="common-box-title"><span>事件分析</span> </div>
+    <div class="box">
+      <div class="toptitle">
+        <div class="num">编号</div>
+        <div class="title">事件描述</div>
+        <div class="status">办理情况</div>
+      </div>
+      <div style="height:230px;width:100%">
+        <vue3-seamless-scroll :list="listData" :speed="speed" :step="0.5" :interval="interval" class="scroll" :limitScrollNum="6">
+          <div class="item" v-for="(item, index) in listData" :key="index" @click="toDetail(item)">
+            <span class="num">{{index+1}}</span>
+            <span class="title">{{item.title}}</span>
+            <span class="status" :style="`color:${['#F2B739','#29E8A8','#FFFFFF'][item.status]}`">{{['待处理','处理中','已处理'][item.status]}}</span>
+          </div>
+        </vue3-seamless-scroll>
+      </div>
+
+      <!-- <div class="dialog-box" v-show="showDialog">
+        <div class="content-box">
+          <div class="content">反映人姓名：{{currentForm.name}}</div>
+          <div class="content">反映人电话：{{currentForm.phone}}</div>
+          <div class="content">反映类型：{{currentForm.demandType}}</div>
+          <div class="content">反映时间：{{currentForm.createTime}}</div>
+          <div class="content">事件描述：{{currentForm.demand}}</div>
+          <div class="content">处理状态：{{currentForm.status}}</div>
+          <div class="content">
+            <span>处理评价：</span>
+            <el-rate v-model="currentForm.stars" disabled />
+            <span>{{currentForm.remark}}</span>
+          </div>
+
+          <img src="@/assets/homeImgs/close.png" class="close" alt="" @click.stop="close">
+        </div>
+
+      </div> -->
+
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { inject, onMounted, watch, ref, computed, reactive } from "vue";
+// import { getDemandlist } from "@/api/screen";
+const props = defineProps({
+  communityId: Number,
+});
+const currentCommunityId = computed(() => {
+  return props.communityId;
+});
+const speed = ref(10);
+const interval = ref(6000);
+
+const showDialog = ref(false);
+
+const currentForm = ref({});
+
+watch(
+  currentCommunityId,
+  (newVal) => {
+    getDataList(newVal);
+  },
+  { immediate: true }
+);
+const status = ref(false);
+const listData = ref([
+  { id: 1, title: "关于xxxxxxxxxx事件", status: 0 },
+  { id: 2, title: "关于xxxxxxxxxx事件", status: 1 },
+  { id: 3, title: "关于xxxxxxxxxx事件", status: 2 },
+]);
+let optionHover = computed(() => {
+  return {
+    step: 0.5, // 数值越大速度滚动越快
+    limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
+    hoverStop: true, // 是否开启鼠标悬停stop
+    direction: 1, // 0向下 1向上 2向左 3向右
+    openWatch: true, // 开启数据实时监控刷新dom
+    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+    waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+  };
+});
+
+function getDataList(communityId = null) {
+  //   getDemandlist({ communityId }).then((res) => {
+  //     if (res.code === 200) {
+  //       listData.value = res.data.map((ele) => {
+  //         return {
+  //           ...ele,
+  //           name: formatName(ele.fullName),
+  //           phone: formatMobile(ele.phoneNumber),
+  //         };
+  //       });
+  //     }
+  //   });
+}
+
+function toDetail(item) {
+  showDialog.value = true;
+  currentForm.value = item;
+}
+
+const close = () => {
+  showDialog.value = false;
+};
+
+const formatName = (name) => {
+  let newStr = "";
+  if (name.length === 2) {
+    newStr = name.substr(0, 1) + "*";
+  } else if (name.length > 2) {
+    let char = "";
+    for (let i = 0, len = name.length - 2; i < len; i++) {
+      char += "*";
+    }
+    newStr = name.substr(0, 1) + char + char;
+  } else {
+    newStr = name;
+  }
+
+  return newStr;
+};
+const formatMobile = (mobile) => {
+  let newStr = "";
+  let char = "";
+  for (let i = 0, len = mobile.length - 7; i < len; i++) {
+    char += "*";
+  }
+  newStr = mobile.substr(0, 3) + char + mobile.substr(-4, 4);
+  return newStr;
+};
+</script>
+
+<style lang="scss" scoped>
+.box {
+  font-size: 18px;
+  color: #ffffff;
+  width: 100%;
+  margin: 0 auto;
+  background: url("@/assets/homeImgs/yjtj_boxbg.png") no-repeat;
+  background-size: 100% 100%;
+  margin-top: 10px;
+  padding-bottom: 20px;
+  .toptitle {
+    line-height: 40px;
+  }
+  .toptitle {
+    width: 98%;
+    display: flex;
+    margin: 0 auto;
+    // background: url("@/assets/homeImgs/blue_titlebg.png") no-repeat;
+    // background-size: 100% 100%;
+    background: rgba(26, 92, 175, 0.25);
+    .num {
+      width: 60px;
+      margin-left: 16px;
+      text-align: center;
+    }
+    .title {
+      width: 260px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .status {
+      width: 80px;
+      text-align: center;
+    }
+  }
+
+  .item {
+    width: 98%;
+    display: flex;
+    margin: 0 auto;
+    background: url("@/assets/homeImgs/blue_titlebg.png") no-repeat;
+    background-size: 100% 100%;
+    .num {
+      width: 60px;
+      text-align: center;
+    }
+    .title {
+      width: 260px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      text-align: left;
+    }
+    .status {
+      width: 80px;
+      text-align: center;
+    }
+  }
+}
+.scroll {
+  height: 230px;
+  width: 450px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.scroll .item {
+  padding: 10px 0;
+  text-align: center;
+  background: none;
+  font-size: 18px;
+  border-bottom: 0.5px solid rgba(124, 131, 163, 0.2);
+}
+
+.dialog-box {
+  width: 20%;
+  max-height: 600px;
+  position: fixed;
+  top: 10%;
+  left: 50%;
+  transform: translate(-50%, 0);
+  z-index: 999;
+  background: url("@/assets/homeImgs/jdry_bg.png") no-repeat;
+  background-size: 100% 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+
+  .content-box {
+    width: 95%;
+    height: 100%;
+    margin: 0 auto 10px;
+    overflow: hidden;
+    position: relative;
+    .content {
+      margin-top: 10px;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+    .close {
+      position: absolute;
+      right: 0px;
+      top: 10px;
+      z-index: 999;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/components/eventTransact.vue

+<template>
+  <div class="common-box1">
+    <div class="common-box-title1">
+      <img src="@/assets/homeImgs/title_icon.png" alt=""><span>事件受办情况</span>
+    </div>
+
+    <div class="content">
+      <div class="box">
+        <div class="toptitle">
+          <div class="id">编号</div>
+          <div class="house">小区</div>
+          <div class="num">受理数</div>
+          <div class="num" style="margin-right:100px">办结数</div>
+          <div class="dot_box">
+            <div class="dot"></div>
+          </div>
+          <div class="dot_box">
+            <div class="dot dot2"></div>
+          </div>
+          <div class="dot_box">
+            <div class="dot dot3"></div>
+          </div>
+
+        </div>
+        <div style="height:230px;width:100%">
+          <vue3-seamless-scroll :list="listData" :speed="speed" :step="0.5" :interval="interval" class="scroll" :limitScrollNum="6">
+            <div class="item" v-for="(item, index) in listData" :key="index" @click="toDetail(item)">
+              <span class="id">{{index+1}}</span>
+              <span class="house">{{item.house}}</span>
+              <div class="num">{{item.receivedNum}}</div>
+              <div class="num" style="margin-right:100px">{{item.concludeNum}}</div>
+              <div class="dot_box">
+                <div class="dot">{{item.red}}</div>
+              </div>
+              <div class="dot_box">
+                <div class="dot">{{item.yellow}}</div>
+              </div>
+              <div class="dot_box">
+                <div class="dot">{{item.green}}</div>
+              </div>
+            </div>
+          </vue3-seamless-scroll>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { inject, onMounted, watch, ref, computed, nextTick } from "vue";
+// import { getCpclist } from "@/api/screen";
+const currentIndex = ref(0);
+const listData = ref([
+  {
+    id: 1,
+    house: "望春佳苑",
+    receivedNum: 20,
+    concludeNum: 30,
+    red: 1,
+    yellow: 2,
+    green: 108,
+  },
+  {
+    id: 1,
+    house: "望春佳苑",
+    receivedNum: 20,
+    concludeNum: 30,
+    red: 1,
+    yellow: 2,
+    green: 108,
+  },
+  {
+    id: 1,
+    house: "望春佳苑",
+    receivedNum: 20,
+    concludeNum: 30,
+    red: 1,
+    yellow: 2,
+    green: 108,
+  },
+  {
+    id: 1,
+    house: "望春佳苑",
+    receivedNum: 20,
+    concludeNum: 30,
+    red: 1,
+    yellow: 2,
+    green: 108,
+  },
+  {
+    id: 1,
+    house: "望春佳苑",
+    receivedNum: 20,
+    concludeNum: 30,
+    red: 1,
+    yellow: 2,
+    green: 108,
+  },
+  {
+    id: 1,
+    house: "望春佳苑",
+    receivedNum: 20,
+    concludeNum: 30,
+    red: 1,
+    yellow: 2,
+    green: 108,
+  },
+]);
+const props = defineProps({
+  communityId: Number,
+});
+const currentCommunityId = computed(() => {
+  return props.communityId;
+});
+watch(
+  currentCommunityId,
+  (newVal) => {
+    if (newVal) {
+      //   getData(newVal);
+    }
+  },
+  { immediate: true }
+);
+
+const getData = (communityId) => {
+  //   getCpclist({ communityId }).then((res) => {
+  //     if (res.code === 200) {
+  //       currentPage.value = 0;
+  //       list.value = res.data;
+  //       currentList.value = list.value.slice(0, 10);
+  //     }
+  //   });
+};
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.common-box1 {
+  position: relative;
+
+  .content {
+    background-size: 100% 100%;
+    width: 833px;
+    height: 326px;
+    margin: 0 0 10px 20px;
+    display: flex;
+    flex-wrap: wrap;
+    .box {
+      font-size: 18px;
+      color: #ffffff;
+      width: 100%;
+      margin-top: 10px;
+      padding-bottom: 20px;
+      .toptitle {
+        line-height: 40px;
+      }
+      .toptitle {
+        width: 98%;
+        display: flex;
+        margin: 0 auto;
+        background: rgba(26, 92, 175, 0.25);
+        align-items: center;
+        .id {
+          width: 60px;
+          margin-left: 16px;
+          text-align: center;
+        }
+        .house {
+          width: 240px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .num {
+          width: 80px;
+          text-align: center;
+          margin-right: 60px;
+        }
+        .dot_box {
+          width: 80px;
+          .dot {
+            width: 14px;
+            height: 14px;
+            background: #ff0400;
+            border-radius: 50%;
+          }
+          .dot2 {
+            background: #f2b739;
+          }
+          .dot3 {
+            background: #0acf9a;
+          }
+        }
+      }
+
+      .item {
+        width: 98%;
+        display: flex;
+        margin: 0 auto;
+        align-items: center;
+        .id {
+          width: 60px;
+          margin-left: 16px;
+          text-align: center;
+          font-style: normal;
+        }
+        .house {
+          width: 240px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          text-align: left;
+          color: #fff;
+          font-weight: 400;
+          font-style: normal;
+        }
+        .num {
+          width: 80px;
+          text-align: center;
+          margin-right: 60px;
+        }
+        .dot_box {
+          width: 80px;
+          text-align: center;
+          .dot {
+            width: 30px;
+            text-align: left;
+          }
+        }
+      }
+    }
+  }
+}
+.scroll {
+  height: 230px;
+  width: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.scroll .item {
+  padding: 10px 0;
+  text-align: center;
+  background: none;
+  font-size: 18px;
+  border-bottom: 0.5px solid rgba(124, 131, 163, 0.2);
+}
+.common-box-title1 {
+  margin: 19px 0 10px 31px;
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+  font-weight: bold;
+  color: #bee8fc;
+}
+</style>
\ No newline at end of file

src/components/header.vue

@@ -8,6 +8,7 @@
     </div>
     <div class="weather-box" v-if="!props.showBtn">
       <div id="he-plugin-simple"></div>
+      <div class="logout" @click="logout" v-if="!isLogin">退出登录</div>
     </div>
     <div class="button-box" v-else>
       <div class="btn" @click="toIndex">返回首页</div>
@@ -25,6 +26,7 @@ import {
   reactive,
   onUnmounted,
 } from "vue";
+import { removeToken } from "@/utils/auth";
 import { useRouter } from "vue-router";
 const weekMap = ["日", "一", "二", "三", "四", "五", "六"];
 const timeInfo = reactive({
@@ -39,6 +41,9 @@ const props = defineProps({
   },
 });
 
+const isLogin = computed(() => {
+  return router.currentRoute.value.path === "/login";
+});
 let timerID = ref(null);
 let router = new useRouter();
 
@@ -62,34 +67,47 @@ function getNowTime() {
   timeInfo.todayDate = date;
   timeInfo.todayWeek = "星期" + weekMap[today.getDay()];
 }
+
+function logout() {
+  ElMessageBox.confirm("确定退出登录吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      removeToken();
+      router.push("/login");
+    })
+    .catch(() => {});
+}
 onMounted(() => {
-  if (!props.showBtn) {
-    window.WIDGET = {
-      CONFIG: {
-        modules: "02",
-        background: "5",
-        tmpColor: "FFFFFF",
-        tmpSize: "30",
-        cityColor: "FFFFFF",
-        citySize: "16",
-        aqiColor: "FFFFFF",
-        aqiSize: "16",
-        weatherIconSize: "40",
-        alertIconSize: "18",
-        padding: "10px 10px 10px 10px",
-        shadow: "0",
-        language: "auto",
-        fixed: "false",
-        vertical: "top",
-        horizontal: "left",
-        key: "45d56907b4ad4ead870bfd4f515e8b97",
-      },
-    };
-    let script = document.createElement("script");
-    script.src =
-      "https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0";
-    document.getElementById("he-plugin-simple").appendChild(script);
-  }
+  // if (!props.showBtn) {
+  //   window.WIDGET = {
+  //     CONFIG: {
+  //       modules: "02",
+  //       background: "5",
+  //       tmpColor: "FFFFFF",
+  //       tmpSize: "30",
+  //       cityColor: "FFFFFF",
+  //       citySize: "16",
+  //       aqiColor: "FFFFFF",
+  //       aqiSize: "16",
+  //       weatherIconSize: "40",
+  //       alertIconSize: "18",
+  //       padding: "10px 10px 10px 10px",
+  //       shadow: "0",
+  //       language: "auto",
+  //       fixed: "false",
+  //       vertical: "top",
+  //       horizontal: "left",
+  //       key: "45d56907b4ad4ead870bfd4f515e8b97",
+  //     },
+  //   };
+  //   let script = document.createElement("script");
+  //   script.src =
+  //     "https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0";
+  //   document.getElementById("he-plugin-simple").appendChild(script);
+  // }
 
   timerID.value = setInterval(() => {
     getNowTime();
@@ -121,8 +139,8 @@ onUnmounted(() => {
   height: 97px;
   width: 100%;
   display: flex;
-  // background: url("@/assets/top_tile.png") no-repeat;
-  background-size: 100% 100%;
+  background: url("@/assets/top_tile.png") no-repeat;
+  background-size: cover;
   .button-box {
     pointer-events: auto;
     margin-top: 30px;
@@ -136,7 +154,7 @@ onUnmounted(() => {
       color: #eff7ff;
       text-align: center;
       line-height: 44px;
-      // background: url("@/assets/top_btn.png") no-repeat;
+      background: url("@/assets/top_btn.png") no-repeat;
       background-size: 100% 100%;
     }
   }
@@ -145,7 +163,21 @@ onUnmounted(() => {
     margin-top: 20px;
     margin-left: auto;
     margin-right: 35px;
+
     display: flex;
+
+    .logout {
+      cursor: pointer;
+      margin-top: 14px;
+      padding-top: 5px;
+      width: 120px;
+      height: 50px;
+      color: #eff7ff;
+      text-align: center;
+
+      background: url("@/assets/top_btn.png") no-repeat;
+      background-size: 100% 100%;
+    }
   }
   .time-box {
     display: flex;

src/components/majorConferenceNews.vue

+<template>
+  <div class="common-box" style="margin-top: 10px;">
+    <div class="common-box-title"><span>重大会议动态</span> </div>
+
+    <div class="box">
+      <div class="toptitle">
+        <div class="num">编号</div>
+        <div class="title">标题</div>
+        <div class="status">状态</div>
+      </div>
+      <div style="height:140px">
+        <vue3-seamless-scroll :list="listData" :speed="speed" :step="0.5" :interval="interval" class="scroll" :limitScrollNum="4">
+          <div class="item" v-for="(item, index) in listData" :key="index" @click="toDetail(item)">
+            <span class="num">{{index+1}}</span>
+            <span class="title">{{item.name}}</span>
+            <div class="status" :style="`color:${['#F2B739','#FFFFFF'][item.status]}`">{{['待完成','已完成'][item.status]}}</div>
+          </div>
+        </vue3-seamless-scroll>
+      </div>
+
+      <!-- <div class="dialog-box" v-show="showDialog">
+        <div class="content-box">
+          <div class="content">反映人姓名：{{currentForm.name}}</div>
+          <div class="content">反映人电话：{{currentForm.phone}}</div>
+          <div class="content">反映类型：{{currentForm.demandType}}</div>
+          <div class="content">反映时间：{{currentForm.createTime}}</div>
+          <div class="content">事件描述：{{currentForm.demand}}</div>
+          <div class="content">处理状态：{{currentForm.status}}</div>
+          <div class="content">
+            <span>处理评价：</span>
+            <el-rate v-model="currentForm.stars" disabled />
+            <span>{{currentForm.remark}}</span>
+          </div>
+
+          <img src="@/assets/homeImgs/close.png" class="close" alt="" @click.stop="close">
+        </div>
+
+      </div> -->
+
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { inject, onMounted, watch, ref, computed, reactive } from "vue";
+// import { getDemandlist } from "@/api/screen";
+const props = defineProps({
+  communityId: Number,
+});
+const currentCommunityId = computed(() => {
+  return props.communityId;
+});
+const speed = ref(10);
+const interval = ref(6000);
+
+const showDialog = ref(false);
+
+const currentForm = ref({});
+
+watch(
+  currentCommunityId,
+  (newVal) => {
+    // getDataList(newVal);
+  },
+  { immediate: true }
+);
+const status = ref(false);
+const listData = [
+  {
+    id: 1,
+    name: "xxxxx小区12幢电梯故障",
+    status: 1,
+  },
+  {
+    id: 2,
+    name: "xxxxx小区地下车库积水严重",
+    status: 0,
+  },
+  {
+    id: 2,
+    name: "xxxxx小区12幢电梯故障",
+    status: 1,
+  },
+  {
+    id: 2,
+    name: "xxxxx小区12幢电梯故障",
+    status: 1,
+  },
+];
+let optionHover = computed(() => {
+  return {
+    step: 0.5, // 数值越大速度滚动越快
+    limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
+    hoverStop: true, // 是否开启鼠标悬停stop
+    direction: 1, // 0向下 1向上 2向左 3向右
+    openWatch: true, // 开启数据实时监控刷新dom
+    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+    waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+  };
+});
+
+function getDataList(communityId = null) {
+  //   getDemandlist({ communityId }).then((res) => {
+  //     if (res.code === 200) {
+  //       listData.value = res.data.map((ele) => {
+  //         return {
+  //           ...ele,
+  //           name: formatName(ele.fullName),
+  //           phone: formatMobile(ele.phoneNumber),
+  //         };
+  //       });
+  //     }
+  //   });
+  listData.value = [
+    {
+      id: 1,
+      name: "xxxxx小区12幢电梯故障",
+      status: 1,
+    },
+    {
+      id: 2,
+      name: "xxxxx小区地下车库积水严重",
+      status: 0,
+    },
+    {
+      id: 2,
+      name: "xxxxx小区12幢电梯故障",
+      status: 2,
+    },
+  ];
+}
+
+function toDetail(item) {
+  showDialog.value = true;
+  currentForm.value = item;
+}
+
+const close = () => {
+  showDialog.value = false;
+};
+
+const formatName = (name) => {
+  let newStr = "";
+  if (name.length === 2) {
+    newStr = name.substr(0, 1) + "*";
+  } else if (name.length > 2) {
+    let char = "";
+    for (let i = 0, len = name.length - 2; i < len; i++) {
+      char += "*";
+    }
+    newStr = name.substr(0, 1) + char + char;
+  } else {
+    newStr = name;
+  }
+
+  return newStr;
+};
+const formatMobile = (mobile) => {
+  let newStr = "";
+  let char = "";
+  for (let i = 0, len = mobile.length - 7; i < len; i++) {
+    char += "*";
+  }
+  newStr = mobile.substr(0, 3) + char + mobile.substr(-4, 4);
+  return newStr;
+};
+</script>
+
+<style lang="scss" scoped>
+.box {
+  font-size: 18px;
+  color: #ffffff;
+  width: 100%;
+  margin: 0 auto;
+  background: url("@/assets/homeImgs/yjtj_boxbg.png") no-repeat;
+  background-size: 100% 100%;
+  margin-top: 10px;
+  padding-bottom: 20px;
+  .toptitle {
+    line-height: 40px;
+  }
+  .toptitle,
+  .item {
+    width: 98%;
+    display: flex;
+    margin: 0 auto;
+    // background: url("@/assets/homeImgs/blue_titlebg.png") no-repeat;
+    // background-size: 100% 100%;
+    background: rgba(26, 92, 175, 0.25);
+    .num {
+      width: 60px;
+      margin-left: 22px;
+    }
+    .title {
+      width: 250px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .status {
+      width: 80px;
+      text-align: right;
+    }
+  }
+  .item {
+    .num {
+      margin-left: 22px;
+    }
+    .title {
+      width: 250px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .status {
+      width: 80px;
+      text-align: center;
+      margin-left: 8px;
+    }
+  }
+}
+.scroll {
+  width: 450px;
+  height: 140px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.scroll .item {
+  padding: 10px 0;
+  text-align: left;
+  background: none;
+  font-size: 18px;
+  border-bottom: 0.5px solid rgba(124, 131, 163, 0.2);
+}
+
+.dialog-box {
+  width: 20%;
+  max-height: 600px;
+  position: fixed;
+  top: 10%;
+  left: 50%;
+  transform: translate(-50%, 0);
+  z-index: 999;
+  background: url("@/assets/homeImgs/jdry_bg.png") no-repeat;
+  background-size: 100% 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+
+  .content-box {
+    width: 95%;
+    height: 100%;
+    margin: 0 auto 10px;
+    overflow: hidden;
+    position: relative;
+    .content {
+      margin-top: 10px;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+    .close {
+      position: absolute;
+      right: 0px;
+      top: 10px;
+      z-index: 999;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/components/materialNotice.vue

+<template>
+  <div class="common-box" style="margin-top: 80px;">
+    <div class="common-box-title"><span>重大通知</span> </div>
+    <div class="material_notice">
+      <div style="height:150px">
+        <vue3-seamless-scroll :list="dataList" :speed="10" :step="0.5" :interval="interval" class="scroll" :limitScrollNum="4">
+          <div class="item" v-for="item in dataList">
+            <span class="title">{{item.title}}</span>
+            <span>{{item.time.slice(0,10)}}</span>
+          </div>
+        </vue3-seamless-scroll>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { inject, onMounted, watch, ref, computed } from "vue";
+const props = defineProps({
+  intro: {
+    type: String,
+  },
+  communityId: {
+    type: String,
+  },
+});
+
+const dataList = [
+  {
+    id: 1,
+    title: "关于小区治安管理会议召开通知",
+    time: "2024-06-27 13:00:00",
+  },
+  {
+    id: 2,
+    title: "关于小区治安管理会议召开通知1111",
+    time: "2024-06-27 13:00:00",
+  },
+  {
+    id: 3,
+    title: "关于小区治安管理会议召开通知22",
+    time: "2024-06-27 13:00:00",
+  },
+];
+
+const intro = computed(() => {
+  return props.intro;
+});
+
+watch(
+  intro,
+  (newVal) => {
+    if (newVal) {
+    }
+  },
+  { immediate: true }
+);
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.scroll {
+  width: 450px;
+  height: 150px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+.material_notice {
+  font-size: 18px;
+  color: #ffffff;
+  line-height: 32px;
+  width: 470px;
+  padding: 5px 21px 26px 21px;
+  background: url("@/assets/homeImgs/sqjj_boxbg.png") no-repeat;
+  background-size: 100% 100%;
+  margin-top: 10px;
+
+  .item {
+    font-size: 16px;
+    color: #ffffff;
+    border-bottom: 0.5px solid rgba(124, 131, 163, 0.2);
+    font-weight: 400;
+    line-height: 49px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .title {
+      display: inline-block;
+      width: 70%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/components/supervisoryAnalysis.vue

+<template>
+  <div class="common-box" style="margin-top: 75px;">
+    <div class="common-box-title"><span>督导分析</span> </div>
+
+    <div class="box">
+      <div class="total_box">
+        <div class="total_item">
+          <div class="total_label">红色等级</div>
+          <div class="total_num" style="color: #EF403C;">19</div>
+        </div>
+        <div class="total_item">
+          <div class="total_label">黄色等级</div>
+          <div class="total_num" style="color: #FCBE37;">88</div>
+        </div>
+        <div class="total_item">
+          <div class="total_label">绿色等级</div>
+          <div class="total_num" style="color: #29E8A8;">28</div>
+        </div>
+
+      </div>
+      <div class="toptitle">
+        <div class="num">编号</div>
+        <div class="title">名称</div>
+        <div class="status">预警等级</div>
+      </div>
+      <div style="height:140px">
+        <vue3-seamless-scroll :list="listData" :speed="speed" :step="0.5" :interval="interval" class="scroll" :limitScrollNum="4">
+          <div class="item" v-for="(item, index) in listData" :key="index" @click="toDetail(item)">
+            <span class="num">{{index+1}}</span>
+            <span class="title">{{item.name}}</span>
+            <div class="status" :style="`background:${['#0ACF9A','#F2B739','#FF0400'][item.status]}`"></div>
+          </div>
+        </vue3-seamless-scroll>
+      </div>
+
+      <!-- <div class="dialog-box" v-show="showDialog">
+        <div class="content-box">
+          <div class="content">反映人姓名：{{currentForm.name}}</div>
+          <div class="content">反映人电话：{{currentForm.phone}}</div>
+          <div class="content">反映类型：{{currentForm.demandType}}</div>
+          <div class="content">反映时间：{{currentForm.createTime}}</div>
+          <div class="content">事件描述：{{currentForm.demand}}</div>
+          <div class="content">处理状态：{{currentForm.status}}</div>
+          <div class="content">
+            <span>处理评价：</span>
+            <el-rate v-model="currentForm.stars" disabled />
+            <span>{{currentForm.remark}}</span>
+          </div>
+
+          <img src="@/assets/homeImgs/close.png" class="close" alt="" @click.stop="close">
+        </div>
+
+      </div> -->
+
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { inject, onMounted, watch, ref, computed, reactive } from "vue";
+// import { getDemandlist } from "@/api/screen";
+const props = defineProps({
+  communityId: Number,
+});
+const currentCommunityId = computed(() => {
+  return props.communityId;
+});
+const speed = ref(10);
+const interval = ref(6000);
+
+const showDialog = ref(false);
+
+const currentForm = ref({});
+
+watch(
+  currentCommunityId,
+  (newVal) => {
+    // getDataList(newVal);
+  },
+  { immediate: true }
+);
+const status = ref(false);
+const listData = [
+  {
+    id: 1,
+    name: "xxxxx小区12幢电梯故障",
+    status: 1,
+  },
+  {
+    id: 2,
+    name: "xxxxx小区地下车库积水严重",
+    status: 0,
+  },
+  {
+    id: 2,
+    name: "xxxxx小区12幢电梯故障",
+    status: 2,
+  },
+  {
+    id: 2,
+    name: "xxxxx小区12幢电梯故障",
+    status: 2,
+  },
+];
+let optionHover = computed(() => {
+  return {
+    step: 0.5, // 数值越大速度滚动越快
+    limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
+    hoverStop: true, // 是否开启鼠标悬停stop
+    direction: 1, // 0向下 1向上 2向左 3向右
+    openWatch: true, // 开启数据实时监控刷新dom
+    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+    waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+  };
+});
+
+function getDataList(communityId = null) {
+  //   getDemandlist({ communityId }).then((res) => {
+  //     if (res.code === 200) {
+  //       listData.value = res.data.map((ele) => {
+  //         return {
+  //           ...ele,
+  //           name: formatName(ele.fullName),
+  //           phone: formatMobile(ele.phoneNumber),
+  //         };
+  //       });
+  //     }
+  //   });
+  listData.value = [
+    {
+      id: 1,
+      name: "xxxxx小区12幢电梯故障",
+      status: 1,
+    },
+    {
+      id: 2,
+      name: "xxxxx小区地下车库积水严重",
+      status: 0,
+    },
+    {
+      id: 2,
+      name: "xxxxx小区12幢电梯故障",
+      status: 2,
+    },
+  ];
+}
+
+function toDetail(item) {
+  showDialog.value = true;
+  currentForm.value = item;
+}
+
+const close = () => {
+  showDialog.value = false;
+};
+
+const formatName = (name) => {
+  let newStr = "";
+  if (name.length === 2) {
+    newStr = name.substr(0, 1) + "*";
+  } else if (name.length > 2) {
+    let char = "";
+    for (let i = 0, len = name.length - 2; i < len; i++) {
+      char += "*";
+    }
+    newStr = name.substr(0, 1) + char + char;
+  } else {
+    newStr = name;
+  }
+
+  return newStr;
+};
+const formatMobile = (mobile) => {
+  let newStr = "";
+  let char = "";
+  for (let i = 0, len = mobile.length - 7; i < len; i++) {
+    char += "*";
+  }
+  newStr = mobile.substr(0, 3) + char + mobile.substr(-4, 4);
+  return newStr;
+};
+</script>
+
+<style lang="scss" scoped>
+.total_box {
+  width: 100%;
+  margin: 10px auto 10px;
+  padding-top: 10px;
+  font-size: 16px;
+
+  display: flex;
+  .total_item {
+    width: 33%;
+    text-align: center;
+  }
+  .total_label {
+    color: #ffffff;
+    background: linear-gradient(
+      0deg,
+      rgba(77, 105, 157, 1) 0%,
+      rgba(127, 192, 243, 1) 50%,
+      rgba(215, 237, 255, 1) 100%
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  .total_num {
+    font-weight: bold;
+    font-size: 30px;
+    margin: 5px 0 5px;
+  }
+}
+.box {
+  font-size: 18px;
+  color: #ffffff;
+  width: 100%;
+  margin: 0 auto;
+  background: url("@/assets/homeImgs/yjtj_boxbg.png") no-repeat;
+  background-size: 100% 100%;
+  margin-top: 10px;
+  padding-bottom: 20px;
+  .toptitle {
+    line-height: 40px;
+  }
+  .toptitle,
+  .item {
+    width: 98%;
+    display: flex;
+    margin: 0 auto;
+    // background: url("@/assets/homeImgs/blue_titlebg.png") no-repeat;
+    // background-size: 100% 100%;
+    background: rgba(26, 92, 175, 0.25);
+    .num {
+      width: 60px;
+      margin-left: 22px;
+    }
+    .title {
+      width: 250px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .status {
+      width: 80px;
+      text-align: right;
+    }
+  }
+  .item {
+    .num {
+      margin-left: 22px;
+    }
+    .title {
+      width: 250px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .status {
+      width: 14px;
+      height: 14px;
+      background: #f2b739;
+      border-radius: 50%;
+      margin-left: 20px;
+    }
+  }
+}
+.scroll {
+  width: 450px;
+  height: 140px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.scroll .item {
+  padding: 10px 0;
+  text-align: left;
+  background: none;
+  font-size: 18px;
+  border-bottom: 0.5px solid rgba(124, 131, 163, 0.2);
+}
+
+.dialog-box {
+  width: 20%;
+  max-height: 600px;
+  position: fixed;
+  top: 10%;
+  left: 50%;
+  transform: translate(-50%, 0);
+  z-index: 999;
+  background: url("@/assets/homeImgs/jdry_bg.png") no-repeat;
+  background-size: 100% 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+
+  .content-box {
+    width: 95%;
+    height: 100%;
+    margin: 0 auto 10px;
+    overflow: hidden;
+    position: relative;
+    .content {
+      margin-top: 10px;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+    .close {
+      position: absolute;
+      right: 0px;
+      top: 10px;
+      z-index: 999;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/css/common.scss

+.common-box {
+    width: 100%;
+    font-size: 20px;
+
+    .common-box-title {
+        width: 100%;
+        height: 44px;
+        line-height: 30px;
+        background: url("../assets/homeImgs/title.png") no-repeat;
+        text-indent: 40px;
+        background-size: contain;
+
+        span {
+            font-weight: 600;
+            font-style: italic;
+            // text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
+            background-image: linear-gradient(180deg,
+                    rgba(49, 190, 255, 1) 0%,
+                    rgba(255, 255, 255, 1) 50%,
+                    rgba(255, 255, 255, 1) 100%);
+            color: transparent;
+            -webkit-background-clip: text;
+            padding-right: 10px;
+            // display: inline-block;
+
+        }
+    }
+
+
+}
+
+.common-box1 {
+    width: 100%;
+    font-size: 20px;
+    background: url("../assets/homeImgs/yxsg_boxbg.png") 100% 100% no-repeat;
+
+    span {
+        font-weight: 600;
+        font-style: italic;
+        background-image: linear-gradient(180deg,
+                rgba(49, 190, 255, 1) 0%,
+                rgba(255, 255, 255, 1) 50%,
+                rgba(255, 255, 255, 1) 100%);
+        color: transparent;
+        -webkit-background-clip: text;
+    }
+}
\ No newline at end of file

src/main.js

@@ -4,6 +4,7 @@ import { router } from './router/router.js'
 import store from './store';
 import './style.css'
 import 'element-plus/dist/index.css'
+import vue3SeamlessScroll from "vue3-seamless-scroll";
 const app = createApp(App)
-
+app.use(vue3SeamlessScroll);
 app.use(router).use(store).mount('#app')

src/router/router.js

@@ -2,15 +2,21 @@ import { createRouter, createWebHashHistory } from "vue-router";
 import { getToken } from "../utils/auth";
 import index from "../view/index.vue";
 import Login from "../view/login.vue";
+import home from "../view/home.vue";
+
 const routes = [
   {
-    path: "/",
+    path: "/index",
     component: index,
   },
   {
     path: "/login",
     component: Login,
   },
+  {
+    path: "/",
+    component: home,
+  },
 ];
 const router = createRouter({
   history: createWebHashHistory(),

src/static/mapPoint.js

+const pointList1 = [{ "x": 219, "y": 40 }, { "x": 203, "y": 40 }, { "x": 190, "y": 49 }, { "x": 176, "y": 57 }, { "x": 183, "y": 66 }, { "x": 182, "y": 78 }, { "x": 164, "y": 83 }, { "x": 144, "y": 87 }, { "x": 135, "y": 96 }, { "x": 110, "y": 100 }, { "x": 91, "y": 103 }, { "x": 81, "y": 94 }, { "x": 76, "y": 71 }, { "x": 64, "y": 76 }, { "x": 51, "y": 94 }, { "x": 40, "y": 102 }, { "x": 35, "y": 116 }, { "x": 49, "y": 119 }, { "x": 39, "y": 131 }, { "x": 35, "y": 151 }, { "x": 28, "y": 159 }, { "x": 48, "y": 167 }, { "x": 64, "y": 171 }, { "x": 72, "y": 189 }, { "x": 90, "y": 195 }, { "x": 96, "y": 207 }, { "x": 109, "y": 214 }, { "x": 124, "y": 218 }, { "x": 141, "y": 209 }, { "x": 155, "y": 199 }, { "x": 162, "y": 184 }, { "x": 170, "y": 170 }, { "x": 169, "y": 155 }, { "x": 182, "y": 148 }, { "x": 203, "y": 142 }, { "x": 219, "y": 132 }, { "x": 229, "y": 118 }, { "x": 240, "y": 105 }, { "x": 240, "y": 86 }, { "x": 232, "y": 72 }, { "x": 226, "y": 62 }, { "x": 226, "y": 51 }]
+const pointList2 = [{ "x": 336, "y": 81 }, { "x": 322, "y": 91 }, { "x": 306, "y": 95 }, { "x": 295, "y": 101 }, { "x": 302, "y": 112 }, { "x": 301, "y": 119 }, { "x": 294, "y": 125 }, { "x": 276, "y": 122 }, { "x": 265, "y": 118 }, { "x": 254, "y": 120 }, { "x": 240, "y": 126 }, { "x": 231, "y": 130 }, { "x": 221, "y": 134 }, { "x": 209, "y": 142 }, { "x": 195, "y": 151 }, { "x": 181, "y": 155 }, { "x": 177, "y": 165 }, { "x": 175, "y": 175 }, { "x": 174, "y": 182 }, { "x": 160, "y": 194 }, { "x": 149, "y": 207 }, { "x": 147, "y": 216 }, { "x": 165, "y": 223 }, { "x": 178, "y": 228 }, { "x": 183, "y": 237 }, { "x": 188, "y": 245 }, { "x": 195, "y": 252 }, { "x": 207, "y": 254 }, { "x": 215, "y": 245 }, { "x": 228, "y": 251 }, { "x": 236, "y": 253 }, { "x": 245, "y": 261 }, { "x": 255, "y": 266 }, { "x": 268, "y": 268 }, { "x": 278, "y": 266 }, { "x": 289, "y": 255 }, { "x": 302, "y": 246 }, { "x": 308, "y": 232 }, { "x": 321, "y": 228 }, { "x": 319, "y": 212 }, { "x": 315, "y": 195 }, { "x": 325, "y": 183 }, { "x": 334, "y": 177 }, { "x": 343, "y": 165 }, { "x": 345, "y": 150 }, { "x": 357, "y": 141 }, { "x": 356, "y": 127 }, { "x": 342, "y": 120 }, { "x": 334, "y": 114 }, { "x": 339, "y": 102 }, { "x": 339, "y": 91 }]
+const pointListAll = [
+    {
+        name: "西成社区",
+        keyName: "西城",
+        x: 640,
+        y: 520,
+        data: [{ "x": 505, "y": 421 }, { "x": 505, "y": 465 }, { "x": 503, "y": 498 }, { "x": 497, "y": 526 }, { "x": 482, "y": 593 }, { "x": 503, "y": 599 }, { "x": 579, "y": 609 }, { "x": 607, "y": 442 }, { "x": 505, "y": 421 }],
+        show: false,
+    },
+    {
+        name: '天一家园',
+        keyName: '天一家园',
+        x: 740,
+        y: 545,
+        data: [{ "x": 612, "y": 443 }, { "x": 584, "y": 607 }, { "x": 669, "y": 622 }, { "x": 699, "y": 460 }, { "x": 612, "y": 443 }],
+        show: false,
+    },
+    {
+        name: "青林湾社区",
+        keyName: '青林湾',
+        x: 815,
+        y: 126,
+        data: [{ "x": 659, "y": 55 }, { "x": 691, "y": 131 }, { "x": 691, "y": 248 }, { "x": 758, "y": 260 }, { "x": 769, "y": 23 }, { "x": 726, "y": 28 }, { "x": 689, "y": 40 }, { "x": 659, "y": 55 }],
+        show: false,
+    },
+    {
+        name: "广安社区",
+        keyName: "广安",
+        x: 820,
+        y: 356,
+        show: false,
+        data: [{ "x": 694, "y": 252 }, { "x": 693, "y": 269 }, { "x": 692, "y": 291 }, { "x": 698, "y": 309 }, { "x": 699, "y": 324 }, { "x": 692, "y": 343 }, { "x": 686, "y": 363 }, { "x": 679, "y": 381 }, { "x": 678, "y": 403 }, { "x": 673, "y": 424 }, { "x": 670, "y": 442 }, { "x": 668, "y": 455 }, { "x": 689, "y": 457 }, { "x": 711, "y": 457 }, { "x": 729, "y": 454 }, { "x": 748, "y": 454 }, { "x": 758, "y": 447 }, { "x": 782, "y": 323 }, { "x": 788, "y": 302 }, { "x": 791, "y": 283 }, { "x": 791, "y": 272 }, { "x": 754, "y": 263 }, { "x": 721, "y": 255 }],
+    }, {
+        name: "广华社区",
+        keyName: "广华",
+        x: 662,
+        y: 356,
+        show: false,
+        data: [{ "x": 510, "y": 301 }, { "x": 510, "y": 314 }, { "x": 509, "y": 329 }, { "x": 508, "y": 342 }, { "x": 508, "y": 359 }, { "x": 506, "y": 418 }, { "x": 539, "y": 427 }, { "x": 576, "y": 434 }, { "x": 614, "y": 438 }, { "x": 671, "y": 451 }, { "x": 673, "y": 426 }, { "x": 675, "y": 409 }, { "x": 679, "y": 391 }, { "x": 680, "y": 377 }, { "x": 683, "y": 364 }, { "x": 689, "y": 353 }, { "x": 693, "y": 337 }, { "x": 696, "y": 325 }, { "x": 695, "y": 309 }, { "x": 694, "y": 285 }, { "x": 693, "y": 268 }, { "x": 690, "y": 255 }, { "x": 682, "y": 254 }, { "x": 673, "y": 254 }, { "x": 657, "y": 259 }, { "x": 629, "y": 264 }, { "x": 578, "y": 280 }, { "x": 542, "y": 289 }]
+    },
+    {
+        name: "新星社区",
+        keyName: "新星",
+        x: 910,
+        y: 130,
+        show: false,
+        data: [{ "x": 772, "y": 22 }, { "x": 847, "y": 55 }, { "x": 816, "y": 161 }, { "x": 795, "y": 267 }, { "x": 757, "y": 262 }, { "x": 772, "y": 22 }],
+    },
+    {
+        name: "泰安社区",
+        keyName: "泰安",
+        x: 820,
+        y: 560,
+        show: false,
+        data: [{ "x": 702, "y": 458 }, { "x": 757, "y": 458 }, { "x": 738, "y": 545 }, { "x": 733, "y": 600 }, { "x": 734, "y": 633 }, { "x": 673, "y": 620 }, { "x": 702, "y": 458 }],
+    },
+    {
+        name: "春城社区",
+        keyName: "春城",
+        x: 500,
+        y: 495,
+        show: false,
+        data: [{ "x": 403, "y": 392 }, { "x": 502, "y": 416 }, { "x": 499, "y": 499 }, { "x": 479, "y": 589 }, { "x": 434, "y": 553 }, { "x": 349, "y": 507 }, { "x": 370, "y": 400 }, { "x": 404, "y": 403 }, { "x": 403, "y": 392 }],
+    },
+    {
+        name: "信谊社区",
+        keyName: "信谊",
+        x: 400,
+        y: 570,
+        show: false,
+        data: [{ "x": 264, "y": 463 }, { "x": 248, "y": 587 }, { "x": 337, "y": 565 }, { "x": 377, "y": 562 }, { "x": 417, "y": 564 }, { "x": 430, "y": 554 }, { "x": 264, "y": 463 }],
+    },
+    {
+        name: "徐家漕社区",
+        keyName: "徐家漕",
+        x: 350,
+        y: 580,
+        show: false,
+        data: [{ "x": 258, "y": 482 }, { "x": 222, "y": 472 }, { "x": 226, "y": 503 }, { "x": 195, "y": 504 }, { "x": 197, "y": 534 }, { "x": 199, "y": 556 }, { "x": 196, "y": 572 }, { "x": 210, "y": 569 }, { "x": 232, "y": 572 }, { "x": 232, "y": 589 }, { "x": 244, "y": 587 }, { "x": 258, "y": 482 }],
+    },
+    {
+        name: "后塘河社区",
+        keyName: "后塘河",
+        x: 220,
+        y: 526,
+        show: false,
+        data: [{ "x": 190, "y": 421 }, { "x": 261, "y": 462 }, { "x": 259, "y": 477 }, { "x": 221, "y": 467 }, { "x": 221, "y": 500 }, { "x": 191, "y": 498 }, { "x": 196, "y": 551 }, { "x": 193, "y": 566 }, { "x": 131, "y": 578 }, { "x": 124, "y": 556 }, { "x": 59, "y": 545 }, { "x": 71, "y": 504 }, { "x": 144, "y": 504 }, { "x": 147, "y": 483 }, { "x": 193, "y": 484 }, { "x": 182, "y": 463 }, { "x": 190, "y": 421 }],
+    },
+    {
+        name: "广泽社区",
+        keyName: "广泽",
+        x: 185,
+        y: 655,
+        show: false,
+        data: [{ "x": 58, "y": 548 }, { "x": 122, "y": 558 }, { "x": 126, "y": 591 }, { "x": 144, "y": 594 }, { "x": 144, "y": 603 }, { "x": 81, "y": 619 }, { "x": 88, "y": 640 }, { "x": 50, "y": 644 }, { "x": 47, "y": 633 }, { "x": 66, "y": 625 }, { "x": 61, "y": 601 }, { "x": 32, "y": 606 }, { "x": 58, "y": 548 }],
+    },
+    {
+        name: "五江口社区",
+        keyName: "五江口",
+        x: 515,
+        y: 235,
+        show: false,
+        data: [{ "x": 505, "y": 138 }, { "x": 503, "y": 412 }, { "x": 403, "y": 387 }, { "x": 402, "y": 330 }, { "x": 362, "y": 327 }, { "x": 357, "y": 313 }, { "x": 366, "y": 307 }, { "x": 362, "y": 298 }, { "x": 368, "y": 293 }, { "x": 356, "y": 285 }, { "x": 373, "y": 256 }, { "x": 381, "y": 258 }, { "x": 399, "y": 242 }, { "x": 392, "y": 235 }, { "x": 410, "y": 219 }, { "x": 429, "y": 235 }, { "x": 441, "y": 221 }, { "x": 438, "y": 212 }, { "x": 447, "y": 205 }, { "x": 454, "y": 211 }, { "x": 458, "y": 199 }, { "x": 486, "y": 206 }, { "x": 494, "y": 180 }, { "x": 491, "y": 172 }, { "x": 483, "y": 166 }, { "x": 472, "y": 165 }, { "x": 478, "y": 127 }, { "x": 487, "y": 135 }, { "x": 505, "y": 138 }],
+    },
+    {
+        name: "清风社区",
+        keyName: "清风",
+        x: 660,
+        y: 204,
+        show: false,
+        data: [{ "x": 509, "y": 137 }, { "x": 509, "y": 295 }, { "x": 629, "y": 263 }, { "x": 602, "y": 157 }, { "x": 603, "y": 142 }, { "x": 587, "y": 98 }, { "x": 555, "y": 115 }, { "x": 509, "y": 137 }],
+    },
+    {
+        name: "水岸心境社区",
+        keyName: "水岸心境",
+        x: 740,
+        y: 160,
+        show: false,
+        data: [{ "x": 589, "y": 96 }, { "x": 657, "y": 56 }, { "x": 688, "y": 134 }, { "x": 688, "y": 246 }, { "x": 631, "y": 262 }, { "x": 605, "y": 147 }, { "x": 589, "y": 96 }],
+    }
+]
+
+
+
+
+export { pointList1, pointList2, pointListAll }
\ No newline at end of file

src/style.css

-*{
+* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: "SourceHanSansCN";
 }
+
 @font-face {
   font-family: "YouSheBiaoTiHei";
   src: url("./font/YouSheBiaoTiHei-2.ttf");
 }
+
 @font-face {
   font-family: "SourceHanSansCN";
   src: url("./font/SourceHanSansCN-Medium.otf");
 }
-.line{
+
+.line {
   display: flex;
 }
-.line-x{
+
+.line-x {
   display: flex;
   justify-content: center;
 }
-.line-y{
+
+.line-y {
   display: flex;
   align-items: center;
 }
-.line-xy{
+
+.line-xy {
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.fs-12{
+
+.fs-12 {
   font-size: 12px;
 }
-.fs-14{
+
+.fs-14 {
   font-size: 14px;
 }
-.fs-16{
+
+.fs-16 {
   font-size: 16px;
 }
-.fs-18{
+
+.fs-18 {
   font-size: 18px;
 }
-.fs-24{
+
+.fs-24 {
   font-size: 24px;
 }
-.module-title{
+
+.module-title {
   background: url('./assets/imgs/title_bg.png') no-repeat;
   background-size: 100% 100%;
   height: 38px;
@@ -53,6 +65,7 @@
   font-style: italic;
   padding-left: 10px;
 }
-.font-Sans{
+
+.font-Sans {
   font-family: "SourceHanSansCN";
 }
\ No newline at end of file

src/view/Login.vue

@@ -2,13 +2,7 @@
   <div class="screen" id="screen">
     <top-header></top-header>
     <div class="title"></div>
-    <el-form
-      class="form"
-      ref="formRef"
-      :model="loginForm"
-      :rules="loginRules"
-      @keyup.enter.native="submitForm(formRef)"
-    >
+    <el-form class="form" ref="formRef" :model="loginForm" :rules="loginRules" @keyup.enter.native="submitForm(formRef)">
       <el-form-item label="" prop="username">
         <el-input v-model="loginForm.username" placeholder="请输入账号">
           <template #prefix>
@@ -18,23 +12,14 @@
       </el-form-item>
 
       <el-form-item label="" prop="password">
-        <el-input
-          v-model="loginForm.password"
-          placeholder="请输入密码"
-          type="password"
-        >
+        <el-input v-model="loginForm.password" placeholder="请输入密码" type="password">
           <template #prefix>
             <img src="@/assets/imgs/password_icon.png" alt="" />
           </template>
         </el-input>
       </el-form-item>
       <el-form-item prop="code" v-if="captchaEnabled">
-        <el-input
-          v-model="loginForm.code"
-          auto-complete="off"
-          style="width: 266px"
-          placeholder="验证码"
-        >
+        <el-input v-model="loginForm.code" auto-complete="off" style="width: 266px" placeholder="验证码">
           <template #prefix>
             <img src="@/assets/imgs/yzm_icon.png" alt="" />
           </template>
@@ -43,9 +28,7 @@
           <img :src="codeUrl" @click="getCode" class="login-code-img" />
         </div>
       </el-form-item>
-      <el-button type="primary" @click="submitForm(formRef)"
-        >登录{{ $store.state.count }}</el-button
-      >
+      <el-button type="primary" @click="submitForm(formRef)">登录{{ $store.state.count }}</el-button>
     </el-form>
   </div>
 </template>

src/view/components/communitySelect.vue

@@ -5,16 +5,8 @@
       选择社区
     </div>
     <div class="community-list" :class="{ show: showList }">
-      <div
-        class="community-item fs-14 line-y"
-        @click="itemClick(item, index)"
-        :class="{ active: index === selectIndex }"
-        v-for="(item, index) in communityList"
-      >
-        <img
-          v-show="index === selectIndex"
-          src="../../assets/imgs/sqxx_icon.png"
-        />
+      <div class="community-item fs-14 line-y" @click="itemClick(item, index)" :class="{ active: index === selectIndex }" v-for="(item, index) in communityList">
+        <img v-show="index === selectIndex" src="../../assets/imgs/sqxx_icon.png" />
         {{ item.name }}
       </div>
     </div>
@@ -26,7 +18,7 @@
 
 <script setup>
 import { ref, defineEmits, watch, onMounted } from "vue";
-const props = defineProps(["communityList"]);
+const props = defineProps(["communityList", "currentCommunityInfo"]);
 const emit = defineEmits(["communityChange"]);
 let showList = ref(false);
 let selectIndex = ref(-1);
@@ -43,7 +35,10 @@ function itemClick(item, index) {
   emit("communityChange", selectIndex.value);
 }
 onMounted(() => {
-  itemClick(props.communityList[0], 0);
+  // itemClick(props.communityList[0], 0);
+  selectIndex.value = props.communityList.findIndex((i) => {
+    return props.currentCommunityInfo == i;
+  });
 });
 </script>
 

src/view/components/screenHeader.vue

@@ -51,31 +51,31 @@ function logout() {
     .catch(() => {});
 }
 onMounted(() => {
-  window.WIDGET = {
-    CONFIG: {
-      modules: "02",
-      background: "5",
-      tmpColor: "FFFFFF",
-      tmpSize: "20",
-      cityColor: "FFFFFF",
-      citySize: "16",
-      aqiColor: "FFFFFF",
-      aqiSize: "16",
-      weatherIconSize: "26",
-      alertIconSize: "18",
-      padding: "4px 10px 10px 50px",
-      shadow: "0",
-      language: "auto",
-      fixed: "false",
-      vertical: "top",
-      horizontal: "left",
-      key: "45d56907b4ad4ead870bfd4f515e8b97",
-    },
-  };
-  let script = document.createElement("script");
-  script.src =
-    "https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0";
-  document.getElementById("he-plugin-simple").appendChild(script);
+  // window.WIDGET = {
+  //   CONFIG: {
+  //     modules: "02",
+  //     background: "5",
+  //     tmpColor: "FFFFFF",
+  //     tmpSize: "20",
+  //     cityColor: "FFFFFF",
+  //     citySize: "16",
+  //     aqiColor: "FFFFFF",
+  //     aqiSize: "16",
+  //     weatherIconSize: "26",
+  //     alertIconSize: "18",
+  //     padding: "4px 10px 10px 50px",
+  //     shadow: "0",
+  //     language: "auto",
+  //     fixed: "false",
+  //     vertical: "top",
+  //     horizontal: "left",
+  //     key: "45d56907b4ad4ead870bfd4f515e8b97",
+  //   },
+  // };
+  // let script = document.createElement("script");
+  // script.src =
+  //   "https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0";
+  // document.getElementById("he-plugin-simple").appendChild(script);
   getNowTime();
 });
 </script>

src/view/components/screenLeft.vue

@@ -6,12 +6,7 @@
         <div class="content-item-box line-y">
           <div class="content-item line-y">
             <img src="../../assets/imgs/xq_tb_icon.png" />
-            <el-tooltip
-              popper-class="tooltip"
-              effect="light"
-              :content="currentHouseInfo.name"
-              placement="bottom"
-            >
+            <el-tooltip popper-class="tooltip" effect="light" :content="currentHouseInfo.name" placement="bottom">
               <div class="text">
                 <div class="value">{{ currentHouseInfo.name }}</div>
                 <div class="label">小区名称</div>
@@ -20,25 +15,18 @@
           </div>
           <div class="content-item line-y">
             <img src="../../assets/imgs/jfsj_tb_icon.png" />
-            <el-tooltip
-              popper-class="tooltip"
-              effect="light"
-              :content="currentHouseInfo.deliveryDate"
-              placement="bottom"
-              ><div class="text">
-                <div
-                  class="value"
-                  style="
+            <el-tooltip popper-class="tooltip" effect="light" :content="currentHouseInfo.deliveryDate" placement="bottom">
+              <div class="text">
+                <div class="value" style="
                     color: #6effe5;
                     font-family: 'YouSheBiaoTiHei';
                     font-size: 18px;
-                  "
-                >
+                  ">
                   {{ currentHouseInfo.deliveryDate }}
                 </div>
                 <div class="label">交付时间</div>
-              </div></el-tooltip
-            >
+              </div>
+            </el-tooltip>
           </div>
         </div>
         <div class="info-box">
@@ -53,18 +41,10 @@
       <div class="module-title">小区总览</div>
       <div class="content-container">
         <div class="overview-data-box">
-          <div
-            class="overview-data-item"
-            v-for="(item, index) in overviewData"
-            @mouseenter="itemHover(index)"
-            @mouseleave="itemLeave(index)"
-            :key="item.label"
-          >
+          <div class="overview-data-item" v-for="(item, index) in overviewData" @mouseenter="itemHover(index)" @mouseleave="itemLeave(index)" :key="item.label">
             <div class="value" :style="{ color: item.color }">
               {{ currentHouseInfo[item.valueKey] || "--"
-              }}<span
-                style="font-size: 14px; font-family: 'SourceHanSansCN'"
-              ></span>
+              }}<span style="font-size: 14px;"></span>
             </div>
             <div class="label">{{ item.label }}</div>
           </div>
@@ -77,11 +57,7 @@
           <div class="tab-item line-xy" :class="{ active: tabIndex === 0 }">
             房屋类型
           </div>
-          <div
-            class="tab-item line-xy"
-            :class="{ active: tabIndex === 1 }"
-            style="margin-left: 30px"
-          >
+          <div class="tab-item line-xy" :class="{ active: tabIndex === 1 }" style="margin-left: 30px">
             人口详情
           </div>
         </div>

src/view/home.vue

+<template>
+  <!--  <div id="index"> -->
+  <div class="screen" id="screen">
+
+    <top-header></top-header>
+
+    <div class="left-box">
+      <material-notice></material-notice>
+      <house-general-view :communityId="1"></house-general-view>
+    </div>
+
+    <div class="right-box">
+      <supervisory-analysis :communityId="1"></supervisory-analysis>
+      <event-analysis :communityId="1"></event-analysis>
+      <major-conference-news :communityId="1"></major-conference-news>
+    </div>
+
+    <div class="bottom-box">
+      <event-transact :communityId="1"></event-transact>
+    </div>
+  </div>
+
+  <!-- 首页 -->
+  <div class="plan-img" id="plan-img" @mousewheel.prevent @click="changeCommunity" @dblclick="toMapArea" :style="{
+      width: imgWidth + 'px',
+      height: imgHeight + 'px',
+    }">
+    <canvas ref="canvas" style="z-index: 9999"></canvas>
+    <div class="block" :style="{
+        left: item.x + 'px',
+        top: item.y + 'px',
+        transform: 'translate(-50%, -50%)',
+      }" v-for="(item, idx) in pointListAll">
+      <img v-if="currentCommunity.id === item.id" :src="getAssetsImages(item.keyName)" class="mark-icon" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { pointListAll } from "../static/mapPoint";
+import {
+  onMounted,
+  ref,
+  watch,
+  reactive,
+  computed,
+  provide,
+  onUnmounted,
+} from "vue";
+import { useRouter } from "vue-router";
+import topHeader from "@/components/header.vue";
+import materialNotice from "@/components/materialNotice.vue";
+import supervisoryAnalysis from "@/components/supervisoryAnalysis.vue";
+import eventAnalysis from "@/components/eventAnalysis.vue";
+import majorConferenceNews from "@/components/majorConferenceNews.vue";
+import eventTransact from "@/components/eventTransact.vue";
+import houseGeneralView from "@/components/houseGeneralView.vue";
+// import { getWcjdToken } from "@/api/wcjd";
+import { getCommunityList, getStreet } from "@/api/screen";
+import { getUserType } from "../api/user";
+
+let imgWidth = 868; //底图的宽像素
+let imgHeight = 671; //底图的高像素
+let pointsList = ref([]); //绘制的点的数组 ，划区域用
+let currentCommunity = ref({});
+
+let currentCommunityImg = ref("");
+const communityList = ref([]);
+
+let showImg = ref(false);
+
+let userTypeInfo = ref({});
+
+watch(currentCommunity, (newVal) => {
+  if (newVal) {
+    showImg.value = true;
+  }
+});
+
+const honorRef = ref(null);
+
+const promotionalVideoRef = ref(null);
+
+function getAssetsImages(name) {
+  return new URL(`../assets/homeImgs/map_moudle/${name}.png`, import.meta.url)
+    .href;
+}
+
+function changeCommunity(e) {
+  console.log("点击到了", judge(e).id);
+
+  if (!determineType(e)) return;
+  if (judge(e).id) {
+    //点击空白处不修改currentCommunity
+    showImg.value = false;
+    currentCommunity.value = judge(e);
+    // honorRef.value.stopAutoplay();
+  } else {
+    getStreetInfo();
+    // honorRef.value.sartAutoplay();
+  }
+}
+
+const router = new useRouter();
+
+//点击区域跳转地图
+function toMapArea(e) {
+  if (!determineType(e)) return;
+  if (!currentCommunity.value.id) return;
+  router.push(
+    `/index?communityName=${judge(e).name}&communityId=${judge(e).id}`
+  );
+}
+
+//点击点位加点
+function drawArea(e) {
+  e = e || window.event;
+  let x = e.offsetX || e.layerX;
+  let y = e.offsetY || e.layerY;
+  console.log(x, y);
+  pointsList.value.push({ x, y });
+}
+
+//保存描点点位数组
+function savePoint() {
+  sessionStorage.setItem("point", JSON.stringify(pointsList.value));
+}
+
+//初始化区域模块
+function getCanvas() {
+  const canvas = document.querySelector("canvas");
+  canvas.width = imgWidth;
+  canvas.height = imgHeight;
+
+  pointListAll.forEach((ele, idx) => {
+    let ctx = canvas.getContext("2d");
+    ctx.beginPath();
+    for (let i = 0; i < ele.data.length; i++) {
+      const dataTemp = ele.data[i];
+      if (i === 0) {
+        ctx.moveTo(dataTemp.x, dataTemp.y);
+      } else {
+        ctx.lineTo(dataTemp.x, dataTemp.y);
+      }
+    }
+    // ctx.fillStyle = "red";
+    // ctx.fill();
+    // ctx.stroke();
+    ctx.closePath();
+  });
+}
+
+// 判断点是否在某个多边形内
+function pointInPolygon(targetPoint, targetPoints) {
+  let leftPointCount = 0;
+  let rightPointCount = 0; //左右点的个数
+  let _points = [];
+  //第一步：取出所有的点，并计算交点坐标
+  for (let i = 0, _length = targetPoints.length - 1; i < _length; i++) {
+    let p1 = targetPoints[i],
+      p2 = targetPoints[i + 1]; //取出当前点和当前点的下一个点
+    let point = calcCrossoverPoint(targetPoint, p1, p2);
+    //如果交点有效，则保存
+    if (point) {
+      _points.push(point);
+    }
+  }
+  // 第二步：计算给定的坐标点，左右两边的交点个数，奇数在范围内，偶数则不在
+  for (let j = 0, length = _points.length; j < length; j++) {
+    let x = _points[j];
+    if (x === targetPoint.x) {
+      return false; //在线上，直接返回不在范围内
+    } else {
+      targetPoint.x !== x && targetPoint.x > x
+        ? leftPointCount++
+        : rightPointCount++;
+    }
+  }
+  //判断交点个数
+  return leftPointCount % 2 !== 0 && rightPointCount % 2 !== 0;
+}
+
+function calcCrossoverPoint(targetPoint, startPoint, endPoint) {
+  let crossoverPointX =
+    startPoint.x -
+    ((startPoint.y - targetPoint.y) * (startPoint.x - endPoint.x)) /
+      (startPoint.y - endPoint.y);
+  //判断交点坐标是否有效，即交点在startPoint，endPoint构成的线段范围内
+  if (
+    (startPoint.y < targetPoint.y && endPoint.y >= targetPoint.y) ||
+    (endPoint.y < targetPoint.y && startPoint.y >= targetPoint.y)
+  ) {
+    if (
+      (crossoverPointX >= startPoint.x && crossoverPointX <= endPoint.x) ||
+      (crossoverPointX <= startPoint.x && crossoverPointX >= endPoint.x)
+    ) {
+      return crossoverPointX;
+    } else {
+      return false;
+    }
+  } else {
+    return false;
+  }
+}
+
+function determineType(e) {
+  const userType = userTypeInfo.value.type;
+  if (userType === 3 || userType === 6) return true;
+  if (userType === 5) {
+    if (judge(e).id === currentCommunity.value.id) return true;
+    else return false;
+  }
+}
+function judge(e) {
+  e = e || window.event;
+  let x = e.offsetX || e.layerX;
+  let y = e.offsetY || e.layerY;
+  let ele = {};
+  pointListAll.forEach((pointDataCopy, idx) => {
+    // 判断画布上有无图形
+    if (pointDataCopy.data.length > 0) {
+      let dot = { x, y };
+      if (pointInPolygon(dot, pointDataCopy.data)) {
+        ele = pointDataCopy;
+      } else {
+        return;
+      }
+    }
+  });
+  return ele;
+}
+function getCommunityLists() {
+  getCommunityList().then((res) => {
+    if (res.code === 200) {
+      communityList.value = res.data;
+      pointListAll.forEach((ele) => {
+        res.data.forEach((i) => {
+          if (ele.name === i.name) {
+            ele.id = i.id;
+            ele.synopsis = i.synopsis;
+            ele.promotionalVideo = i.promotionalVideo;
+            ele.cover = i.cover;
+          }
+        });
+      });
+
+      if (userTypeInfo.value.type == 3) {
+        getStreetInfo();
+      } else {
+        const id = userTypeInfo.value.communityId || "";
+
+        currentCommunity.value =
+          pointListAll.find((ele) => ele.id === id) || -1;
+      }
+      getCanvas();
+    }
+  });
+}
+//3dtiles Token
+async function getTilesToken() {
+  localStorage.setItem("wcjdToken", (await getWcjdToken()).data.datas.token);
+}
+function getStreetInfo() {
+  getStreet({}).then((res) => {
+    if (res.code === 200) {
+      currentCommunity.value = res.data;
+      currentCommunity.value.id = "";
+    }
+  });
+}
+
+// 获取登录用户信息
+function getUserTypeInfo() {
+  getUserType().then((res) => {
+    if (!res.data) userTypeInfo.value = { type: 6 };
+    else userTypeInfo.value = res.data;
+    getCommunityLists();
+  });
+}
+
+onMounted(() => {
+  //   getTilesToken();
+  getUserTypeInfo();
+});
+</script>
+
+<style lang="scss" scoped>
+.point {
+  width: 10px;
+  height: 10px;
+  background: green;
+  border-radius: 5px;
+  z-index: 999;
+  position: absolute;
+}
+.plan-img {
+  margin: 30px auto 0;
+  position: relative;
+  overflow: hidden;
+  background: url("../assets/homeImgs/map_nor.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+
+  .block {
+    cursor: pointer;
+    z-index: 29;
+    position: absolute;
+    display: flex;
+    width: 349px;
+    height: 253px;
+    user-select: none;
+    pointer-events: none;
+    .mark-icon {
+      position: absolute;
+      transform-origin: 0% 0%;
+      top: 0;
+      left: 0;
+      z-index: 30;
+    }
+  }
+}
+#screen {
+  position: absolute;
+  width: 100%;
+  height: 1080px;
+  transform-origin: 0% 0%;
+  top: 0;
+  bottom: 0;
+  overflow: hidden;
+  background: url("../assets/homeImgs/index_bg.jpg") no-repeat;
+  background-size: 100% 100%;
+
+  .left-box {
+    position: absolute;
+    left: 26px;
+    top: 0px;
+    height: 100vh;
+    width: 25%;
+    overflow: hidden;
+  }
+
+  .right-box {
+    position: absolute;
+    right: 26px;
+    top: 0;
+    height: 100vh;
+    z-index: 999;
+    width: 25%;
+  }
+  .bottom-box {
+    pointer-events: auto;
+    position: absolute;
+    top: 60%;
+    left: 50%;
+    transform: translate(-50%, 0);
+    width: 44.6%;
+    display: flex;
+    justify-content: center;
+    //padding-bottom: 20px;
+    z-index: 1000;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .honor {
+    top: 820px;
+  }
+}
+</style>

src/view/index.vue

@@ -4,17 +4,8 @@
 
     <screen-left :currentHouseInfo="currentHouseInfo"></screen-left>
     <screen-right :currentHouseInfo="currentHouseInfo"></screen-right>
-    <searchBox
-      v-if="userTypeInfo.type === 6"
-      @searchChange="searchChangeHandle"
-      ref="searchBoxRef"
-    ></searchBox>
-    <community-select
-      ref="communitySelectRef"
-      v-if="userTypeInfo.type === 6"
-      :communityList="communityList"
-      @communityChange="communityChangeHandle"
-    ></community-select>
+    <searchBox v-if="userTypeInfo.type === 6" @searchChange="searchChangeHandle" ref="searchBoxRef"></searchBox>
+    <community-select ref="communitySelectRef" v-if="userTypeInfo.type === 6" :communityList="communityList" :currentCommunityInfo='currentCommunityInfo' @communityChange="communityChangeHandle"></community-select>
   </div>
 </template>
 
@@ -30,6 +21,7 @@ import searchBox from "./components/searchBox.vue";
 import { drawLabel } from "../utils/cesiumTools";
 import { getCommunityList, getHouseList, getHouseInfo } from "../api/index.js";
 import { getUserType } from "../api/user";
+import { useRoute } from "vue-router";
 const communitySelectRef = ref(null);
 const searchBoxRef = ref(null);
 let viewer = null;
@@ -37,6 +29,8 @@ let communityList = ref([]);
 let userTypeInfo = ref({});
 let currentCommunityInfo = ref({});
 let currentHouseInfo = ref({});
+
+const route = new useRoute();
 watch(currentCommunityInfo, (val) => {
   console.log("currentCommunityInfo", val);
   let position = JSON.parse(val.solid);
@@ -46,7 +40,6 @@ watch(currentCommunityInfo, (val) => {
     if (item._data && item._data.type === "house") removeArr.push(item);
   });
   removeArr.forEach((item) => viewer.entities.remove(item));
-
   getHouseListFunc(val.id);
 });
 function communityChangeHandle(index) {
@@ -72,13 +65,18 @@ function getUserTypeInfo() {
 
     if (userTypeInfo.value.type === 6) {
       // 街道管理员
-      drawCommunityMarker(communityList.value);
+      let communityInfo = communityList.value.find((item) => {
+        return item.id === Number(route.query.communityId);
+      });
+      currentCommunityInfo.value = communityInfo;
+      drawCommunityMarker([communityInfo]);
     } else if (userTypeInfo.value.type === 4) {
       // 社区管理员
-      let communityInfo = communityList.value.find(
-        (item) => item.id === userTypeInfo.value.communityId
-      );
+      let communityInfo = communityList.value.find((item) => {
+        return item.id === userTypeInfo.value.communityId;
+      });
       console.log("communityInfo", communityInfo);
+      currentCommunityInfo.value = communityInfo;
       drawCommunityMarker([communityInfo]);
       getHouseListFunc(userTypeInfo.value.communityId);
     } else if (userTypeInfo.value.type === 5) {

src/view/text.vue

+<template>
+  <view class="container">
+    <!--  <view class="box" v-if="rate <= 0.8">
+	      <view class="row1" v-for="(item,index) in dataList" :key="index">
+	        <view :style="{ 'color' : index == 0 ? 'red' : '#000' }" class="text">
+	          <view v-for="(str,i) in 15" :key="i" class="text">
+	            {{ item[i] }}
+	          </view>
+	        </view>
+	      </view>
+	    </view>
+	    <view class="box" v-if="rate > 0.8 && rate <= 1.2">
+	      <view class="row2" v-for="(item,index) in dataList" :key="index">
+	        <view :style="{ 'color' : index == 0 ? 'red' : '#000' }" class="text">
+	          <view v-for="(str,i) in 15" :key="i" class="text">
+	            {{ item[i] }}
+	          </view>
+	        </view>
+	      </view>
+	    </view>
+	    <view class="box" v-if="rate > 1.2">
+	      <view class="row3" v-for="(item,index) in dataList" :key="index">
+	        <view :style="{ 'color' : index == 0 ? 'red' : '#000' }" class="text">
+	          <view v-for="(str,i) in 15" :key="i" class="text">
+	            {{ item[i] }}
+	          </view>
+	        </view>
+	      </view>
+	    </view> -->
+    <view class="tip">
+      1111
+      <!-- <van-notice-bar left-icon="volume-o" scrollable color="#fff" background="transparent" text="取号后请关注窗口叫号信息，过号需要重新取号排队。" /> -->
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: [],
+      rate: null,
+      socket: null,
+    };
+  },
+  onLoad() {
+    // web(`ws://192.168.10.20:18000/hmit-admin/websocket/dh`, dealData);
+    //     adjustFontSize();
+  },
+  methods: {
+    adjustFontSize() {
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+      this.rate = width / height;
+    },
+    web(url, onMessage, res) {
+      return new Promise((resolve, reject) => {
+        this.socket = new WebSocket(url);
+        this.socket.onopen = () => {
+          this.socket.send(res); //（也可在建立成功后给服务器就发消息或者传参数）
+          console.log("WebSocket 连接已建立");
+        };
+
+        this.socket.onmessage = (event) => {
+          console.log("收到来自服务器的消息:", event.data);
+          // const data = JSON.parse(event.data);
+          // console.log("收到来自服务器的消息:", data);
+          // socket.send(res); //（收到服务器的消息后在发送消息）
+          onMessage(event.data);
+        };
+
+        this.socket.onclose = () => {
+          console.log("WebSocket 连接已关闭");
+        };
+
+        this.socket.onerror = (error) => {
+          console.error("WebSocket 错误:", error);
+          reject(error); // 如果发生错误，将其传递给 Promise 的 reject 函数
+        };
+      });
+    },
+
+    // // 用于在组件卸载时关闭 WebSocket 连接
+    // function useCloseWebSocketOnUnmounted() {
+    //   onUnmounted(() => {
+    //     if (socket) {
+    //       console.log("正在关闭 WebSocket 连接...");
+    //       socket.close(); // 直接关闭连接
+    //     }
+    //   });
+    // }
+
+    // 用于发送消息
+    sendMessage() {
+      this.socket.send("Hello Server");
+      console.log(this.socket);
+    },
+
+    dealData(data) {
+      console.log("data", data);
+      if (data && data != undefined) {
+        let info = data.split(",");
+        console.log("info", info);
+        if (`请${info[1]}号到${info[0]}窗口` === this.dataList[0]) return;
+        this.dataList.unshift(`请${info[1]}号到${info[0]}窗口`);
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.container {
+  font-weight: bold;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.tip {
+  width: 100%;
+  font-size: 2vh;
+  color: #fff;
+}
+
+.box {
+  height: 84vh;
+  width: 88vw;
+  background: #cdd9f0;
+  margin-top: 8vh;
+  border-radius: 4vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 1.25vh;
+  overflow-y: hidden;
+}
+
+.row1 {
+  font-size: 4vh;
+  line-height: 7vh;
+  width: 80vw;
+  .text {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.row2 {
+  font-size: 6vh;
+  line-height: 8.4vh;
+  width: 80vw;
+  .text {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.row3 {
+  font-size: 8vh;
+  line-height: 14vh;
+  width: 80vw;
+  .text {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</style>