diff --git a/src/api/ywts/shms/sq.js b/src/api/ywts/shms/sq.js
new file mode 100644
index 0000000..04a5447
--- /dev/null
+++ b/src/api/ywts/shms/sq.js
@@ -0,0 +1,123 @@
+/**
+ * 社区接口
+ */
+import request from '@/utils/request'
+
+// 社区点位列表
+export function getCommunityList() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwlb',
+    method: 'post',
+  })
+}
+
+// 人员热力图
+export function getHeat() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqyyrlt',
+    method: 'post',
+  })
+}
+
+// 设备点位
+export function getDevice() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sbdwlb',
+    method: 'post',
+    params: {
+      type: '',
+      keywords: ''
+    }
+  })
+}
+
+// 社区车辆
+export function getCar() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqbyl',
+    method: 'post',
+  })
+}
+
+// 事件点位列表
+export function getCase(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sjdwlb',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+
+// 事件详情
+export function getCaseList(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/zjlbfy',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+// 获取社区基本信息
+export function getBaseInfo(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwxq',
+    method: 'post',
+    params:{
+      ...data
+    },
+    // data
+  })
+}
+// 居民年龄统计
+export function getAgeStatistics(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmnltj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 居民流动比例
+export function getCurrentRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmldbl',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1年人房车占比统计
+export function getPersonCarRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/rfczbtj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月居民通行量分析
+export function getTransitrRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmtxlfx',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月高频事件排行榜
+export function getCaseRank(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/gpsjphb',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}

diff --git a/src/api/ywts/shms/sq.js b/src/api/ywts/shms/sq.js
new file mode 100644
index 0000000..04a5447
--- /dev/null
+++ b/src/api/ywts/shms/sq.js
@@ -0,0 +1,123 @@
+/**
+ * 社区接口
+ */
+import request from '@/utils/request'
+
+// 社区点位列表
+export function getCommunityList() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwlb',
+    method: 'post',
+  })
+}
+
+// 人员热力图
+export function getHeat() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqyyrlt',
+    method: 'post',
+  })
+}
+
+// 设备点位
+export function getDevice() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sbdwlb',
+    method: 'post',
+    params: {
+      type: '',
+      keywords: ''
+    }
+  })
+}
+
+// 社区车辆
+export function getCar() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqbyl',
+    method: 'post',
+  })
+}
+
+// 事件点位列表
+export function getCase(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sjdwlb',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+
+// 事件详情
+export function getCaseList(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/zjlbfy',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+// 获取社区基本信息
+export function getBaseInfo(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwxq',
+    method: 'post',
+    params:{
+      ...data
+    },
+    // data
+  })
+}
+// 居民年龄统计
+export function getAgeStatistics(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmnltj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 居民流动比例
+export function getCurrentRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmldbl',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1年人房车占比统计
+export function getPersonCarRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/rfczbtj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月居民通行量分析
+export function getTransitrRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmtxlfx',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月高频事件排行榜
+export function getCaseRank(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/gpsjphb',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
diff --git a/src/pages/ywts/shms/jy/index.vue b/src/pages/ywts/shms/jy/index.vue
index 1293f28..1c1170e 100644
--- a/src/pages/ywts/shms/jy/index.vue
+++ b/src/pages/ywts/shms/jy/index.vue
@@ -6,7 +6,7 @@
       <common-btn id="personBtn" :select="selectIndex === 'personBtn'" :bg="personBg" :bg-hover="personHover" width="5"
         height="5" text-hover="师生热力" @click="btnClick" />
       <layer-manager-mix title="学校设备" :icons="icons" :menu-tab="menuTab" :menus="menus"
-        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" />
+        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" @menuClick="menuClick" />
       <keyword-manager :resultList="keywordList" :select="selectIndex === 'keywordBtn'" @handleKeyword="handleKeyword"
         @click="selectIndex = 'keywordBtn'" @localPoint="localPoint" />
     </div>
@@ -298,6 +298,18 @@
         })
       })
     },
+      menuClick(e) {
+      clearResetMap()
+      this.markerList = this.markerBakList.filter(item => item.type === e.type)
+      this.markerList.forEach((item) => {
+        AddLabelPoint(
+          item.id,
+          `${item.name}`,
+          item.type === '1' ? this.videoIcon : this.controlIcon,
+          [item.lon, item.lat, 0], 'yl-dev', item,
+          this.clickDevice)
+      })
+    },
     // 设备点位点击
     clickDevice(eventArg) {
       const item = eventArg._data.data

diff --git a/src/api/ywts/shms/sq.js b/src/api/ywts/shms/sq.js
new file mode 100644
index 0000000..04a5447
--- /dev/null
+++ b/src/api/ywts/shms/sq.js
@@ -0,0 +1,123 @@
+/**
+ * 社区接口
+ */
+import request from '@/utils/request'
+
+// 社区点位列表
+export function getCommunityList() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwlb',
+    method: 'post',
+  })
+}
+
+// 人员热力图
+export function getHeat() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqyyrlt',
+    method: 'post',
+  })
+}
+
+// 设备点位
+export function getDevice() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sbdwlb',
+    method: 'post',
+    params: {
+      type: '',
+      keywords: ''
+    }
+  })
+}
+
+// 社区车辆
+export function getCar() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqbyl',
+    method: 'post',
+  })
+}
+
+// 事件点位列表
+export function getCase(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sjdwlb',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+
+// 事件详情
+export function getCaseList(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/zjlbfy',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+// 获取社区基本信息
+export function getBaseInfo(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwxq',
+    method: 'post',
+    params:{
+      ...data
+    },
+    // data
+  })
+}
+// 居民年龄统计
+export function getAgeStatistics(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmnltj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 居民流动比例
+export function getCurrentRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmldbl',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1年人房车占比统计
+export function getPersonCarRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/rfczbtj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月居民通行量分析
+export function getTransitrRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmtxlfx',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月高频事件排行榜
+export function getCaseRank(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/gpsjphb',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
diff --git a/src/pages/ywts/shms/jy/index.vue b/src/pages/ywts/shms/jy/index.vue
index 1293f28..1c1170e 100644
--- a/src/pages/ywts/shms/jy/index.vue
+++ b/src/pages/ywts/shms/jy/index.vue
@@ -6,7 +6,7 @@
       <common-btn id="personBtn" :select="selectIndex === 'personBtn'" :bg="personBg" :bg-hover="personHover" width="5"
         height="5" text-hover="师生热力" @click="btnClick" />
       <layer-manager-mix title="学校设备" :icons="icons" :menu-tab="menuTab" :menus="menus"
-        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" />
+        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" @menuClick="menuClick" />
       <keyword-manager :resultList="keywordList" :select="selectIndex === 'keywordBtn'" @handleKeyword="handleKeyword"
         @click="selectIndex = 'keywordBtn'" @localPoint="localPoint" />
     </div>
@@ -298,6 +298,18 @@
         })
       })
     },
+      menuClick(e) {
+      clearResetMap()
+      this.markerList = this.markerBakList.filter(item => item.type === e.type)
+      this.markerList.forEach((item) => {
+        AddLabelPoint(
+          item.id,
+          `${item.name}`,
+          item.type === '1' ? this.videoIcon : this.controlIcon,
+          [item.lon, item.lat, 0], 'yl-dev', item,
+          this.clickDevice)
+      })
+    },
     // 设备点位点击
     clickDevice(eventArg) {
       const item = eventArg._data.data
diff --git a/src/pages/ywts/shms/sq/carPop.vue b/src/pages/ywts/shms/sq/carPop.vue
new file mode 100644
index 0000000..b1fe4c3
--- /dev/null
+++ b/src/pages/ywts/shms/sq/carPop.vue
@@ -0,0 +1,275 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.showType] }">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="list-down" style="width: 100%;margin: 0 auto;">
+      <div class="list-item">
+        <div style="width:100%;">
+          <div style="width: 100%">
+            <i class="item-line one-line" style="width: 100%;"><span>名称: {{
+              gdInfo.name }}</span></i>
+            <i class="item-line one-line" style="width: 100%;" :title="gdInfo.location"><span>位置: {{
+              gdInfo.location }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>车辆数量: {{ gdInfo.carNum
+                }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>停车位: {{ gdInfo.parkSpaceNum }}</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
+      defaultPhoto: require('@/assets/images/global_images/photo_error.png'),
+      statusColor: {
+        1: '#a1a1a1',
+        2: '#f8e31a',
+        3: '#5ab1fc',
+        4: '#f89835',
+        5: '#3def83',
+      },
+      urgencyColor: {
+        'C': '#2f8d00',
+        'B': '#c4ad00',
+        'A': '#8d0000'
+      },
+      heightDict: {
+        normal: '130px',
+        video: '300px'
+      }
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '弹窗内容')
+      if (!item.lon || !item.lat) { return }
+      showPositin(item.lon, item.lat)
+      item.showType = 'normal'
+      // 弹窗位置
+      if (window.localStorage.getItem('mousePosition')) {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      else {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      this.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.children-item {
+  width: 96% !important;
+  margin: 10px auto !important;
+  color: #fff !important;
+  // border: 1px solid #fff;
+  border-radius: 6px;
+  padding: 10px;
+  box-sizing: border-box;
+
+}
+
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 160px;
+  width: 27rem;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 25%;
+    height: 32%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+
+.list-down {
+  // margin-top: 10px;
+  // overflow-y: scroll;
+  width: 100%;
+  // height: calc(100% - 6rem);
+  padding: 0px 10px;
+}
+
+.list-item {
+  width: calc(100% - 35px);
+  // height: 12rem;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  padding: 0.8rem 10px;
+  margin: 0.2rem 0rem;
+  letter-spacing: 2px;
+  cursor: pointer;
+  background-size: 100% 100% !important;
+  color: white;
+  border-top: 2px solid #0494f3;
+  border-radius: 10px;
+}
+
+.list-item:hover {
+  background-size: cover !important;
+  background: url('../../../../assets/images/right/选中.png') !important;
+  background-size: 100% 100% !important;
+}
+
+.item-title {
+  width: 90%;
+  text-align: left;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+
+.item-line {
+  display: flex;
+  font-size: 1.2rem;
+  color: #aed2f3;
+  padding-left: 20px;
+  line-height: 1.8rem;
+  width: 95%;
+  word-break: break-all;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /* 设置最大行数 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.colorbox-text {
+  background-color: #0a88fc;
+  border-radius: 10px;
+  color: white;
+  font-size: 1rem;
+  padding: 0rem 0.4rem;
+  margin-left: 5px;
+  text-align: center;
+  width: 5rem;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+
+.one-line {
+  display: block !important;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+</style>

diff --git a/src/api/ywts/shms/sq.js b/src/api/ywts/shms/sq.js
new file mode 100644
index 0000000..04a5447
--- /dev/null
+++ b/src/api/ywts/shms/sq.js
@@ -0,0 +1,123 @@
+/**
+ * 社区接口
+ */
+import request from '@/utils/request'
+
+// 社区点位列表
+export function getCommunityList() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwlb',
+    method: 'post',
+  })
+}
+
+// 人员热力图
+export function getHeat() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqyyrlt',
+    method: 'post',
+  })
+}
+
+// 设备点位
+export function getDevice() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sbdwlb',
+    method: 'post',
+    params: {
+      type: '',
+      keywords: ''
+    }
+  })
+}
+
+// 社区车辆
+export function getCar() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqbyl',
+    method: 'post',
+  })
+}
+
+// 事件点位列表
+export function getCase(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sjdwlb',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+
+// 事件详情
+export function getCaseList(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/zjlbfy',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+// 获取社区基本信息
+export function getBaseInfo(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwxq',
+    method: 'post',
+    params:{
+      ...data
+    },
+    // data
+  })
+}
+// 居民年龄统计
+export function getAgeStatistics(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmnltj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 居民流动比例
+export function getCurrentRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmldbl',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1年人房车占比统计
+export function getPersonCarRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/rfczbtj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月居民通行量分析
+export function getTransitrRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmtxlfx',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月高频事件排行榜
+export function getCaseRank(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/gpsjphb',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
diff --git a/src/pages/ywts/shms/jy/index.vue b/src/pages/ywts/shms/jy/index.vue
index 1293f28..1c1170e 100644
--- a/src/pages/ywts/shms/jy/index.vue
+++ b/src/pages/ywts/shms/jy/index.vue
@@ -6,7 +6,7 @@
       <common-btn id="personBtn" :select="selectIndex === 'personBtn'" :bg="personBg" :bg-hover="personHover" width="5"
         height="5" text-hover="师生热力" @click="btnClick" />
       <layer-manager-mix title="学校设备" :icons="icons" :menu-tab="menuTab" :menus="menus"
-        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" />
+        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" @menuClick="menuClick" />
       <keyword-manager :resultList="keywordList" :select="selectIndex === 'keywordBtn'" @handleKeyword="handleKeyword"
         @click="selectIndex = 'keywordBtn'" @localPoint="localPoint" />
     </div>
@@ -298,6 +298,18 @@
         })
       })
     },
+      menuClick(e) {
+      clearResetMap()
+      this.markerList = this.markerBakList.filter(item => item.type === e.type)
+      this.markerList.forEach((item) => {
+        AddLabelPoint(
+          item.id,
+          `${item.name}`,
+          item.type === '1' ? this.videoIcon : this.controlIcon,
+          [item.lon, item.lat, 0], 'yl-dev', item,
+          this.clickDevice)
+      })
+    },
     // 设备点位点击
     clickDevice(eventArg) {
       const item = eventArg._data.data
diff --git a/src/pages/ywts/shms/sq/carPop.vue b/src/pages/ywts/shms/sq/carPop.vue
new file mode 100644
index 0000000..b1fe4c3
--- /dev/null
+++ b/src/pages/ywts/shms/sq/carPop.vue
@@ -0,0 +1,275 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.showType] }">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="list-down" style="width: 100%;margin: 0 auto;">
+      <div class="list-item">
+        <div style="width:100%;">
+          <div style="width: 100%">
+            <i class="item-line one-line" style="width: 100%;"><span>名称: {{
+              gdInfo.name }}</span></i>
+            <i class="item-line one-line" style="width: 100%;" :title="gdInfo.location"><span>位置: {{
+              gdInfo.location }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>车辆数量: {{ gdInfo.carNum
+                }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>停车位: {{ gdInfo.parkSpaceNum }}</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
+      defaultPhoto: require('@/assets/images/global_images/photo_error.png'),
+      statusColor: {
+        1: '#a1a1a1',
+        2: '#f8e31a',
+        3: '#5ab1fc',
+        4: '#f89835',
+        5: '#3def83',
+      },
+      urgencyColor: {
+        'C': '#2f8d00',
+        'B': '#c4ad00',
+        'A': '#8d0000'
+      },
+      heightDict: {
+        normal: '130px',
+        video: '300px'
+      }
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '弹窗内容')
+      if (!item.lon || !item.lat) { return }
+      showPositin(item.lon, item.lat)
+      item.showType = 'normal'
+      // 弹窗位置
+      if (window.localStorage.getItem('mousePosition')) {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      else {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      this.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.children-item {
+  width: 96% !important;
+  margin: 10px auto !important;
+  color: #fff !important;
+  // border: 1px solid #fff;
+  border-radius: 6px;
+  padding: 10px;
+  box-sizing: border-box;
+
+}
+
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 160px;
+  width: 27rem;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 25%;
+    height: 32%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+
+.list-down {
+  // margin-top: 10px;
+  // overflow-y: scroll;
+  width: 100%;
+  // height: calc(100% - 6rem);
+  padding: 0px 10px;
+}
+
+.list-item {
+  width: calc(100% - 35px);
+  // height: 12rem;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  padding: 0.8rem 10px;
+  margin: 0.2rem 0rem;
+  letter-spacing: 2px;
+  cursor: pointer;
+  background-size: 100% 100% !important;
+  color: white;
+  border-top: 2px solid #0494f3;
+  border-radius: 10px;
+}
+
+.list-item:hover {
+  background-size: cover !important;
+  background: url('../../../../assets/images/right/选中.png') !important;
+  background-size: 100% 100% !important;
+}
+
+.item-title {
+  width: 90%;
+  text-align: left;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+
+.item-line {
+  display: flex;
+  font-size: 1.2rem;
+  color: #aed2f3;
+  padding-left: 20px;
+  line-height: 1.8rem;
+  width: 95%;
+  word-break: break-all;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /* 设置最大行数 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.colorbox-text {
+  background-color: #0a88fc;
+  border-radius: 10px;
+  color: white;
+  font-size: 1rem;
+  padding: 0rem 0.4rem;
+  margin-left: 5px;
+  text-align: center;
+  width: 5rem;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+
+.one-line {
+  display: block !important;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/communityPop.vue b/src/pages/ywts/shms/sq/communityPop.vue
new file mode 100644
index 0000000..eb6bf07
--- /dev/null
+++ b/src/pages/ywts/shms/sq/communityPop.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="bottom">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="block" style="padding: 10px">
+      <div style="display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center">
+        <div class="num" style="text-align: left;width:100%;font-size: 20px;font-weight: bold">{{ name }}</div>
+        <div class="num" style="color: #B3F3F6;width:100%;word-break: break-all;text-align: left;">位置：{{ position
+          }}</span></div>
+        <!-- <div class="item" style="width: 51%">
+          <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/在校生总数.png')" class="base-map-image"
+            mode="fill" />
+          <div class="item-text">
+            <div class="num">{{ list[0] }}<span class="unit">人</span></div>
+            <div style="color: #B3F3F6;">在校生总数</div>
+          </div>
+        </div> -->
+        <!-- <div class="item">
+          <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/教师总数.png')" class="base-map-image"
+            mode="fill" />
+          <div class="item-text">
+            <div class="num">{{ list[1] }}<span class="unit">人</span></div>
+            <div style="color: #B3F3F6;">教师总数</div>
+          </div>
+        </div> -->
+        <div class="item" v-for="(item, index) in list">
+          <!-- <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/教职工总数.png')" class="base-map-image"
+            mode="fill" /> -->
+          <div class="item-text">
+            <div class="num">{{ item.total }}<span class="unit"></span></div>
+            <div style="color: #B3F3F6;">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">居民年龄统计</div>
+      <age-pie style="flex:1;" ref="agePie" />
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">居民流动比例</div>
+      <currentPie style="flex:1;" ref="currentPie"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1年人房车占比统计</div>
+      <personBar style="flex:1;" ref="personBar"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1月居民通行量分析</div>
+      <transitBar style="flex:1;" ref="transitBar"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1月高频事件排行榜</div>
+      <scoreLineBar style="flex:1;" ref="scoreLineBar"/>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import scoreLineBar from "./components/scoreLineBar";
+import transitBar from "./components/transitBar";
+import personBar from "./components/personBar";
+import AgePie from "./components/agePie";
+import currentPie from "./components/currentPie";
+import { getBaseInfo } from '@/api/ywts/shms/sq'
+
+export default {
+  name: 'SchoolPop',
+  // components: {SexPie, AgePie, StudentBar, TsLineBar, TeacherLine},
+  components: { AgePie, currentPie, personBar, transitBar, scoreLineBar },
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: [
+        {
+          name: '居民总数',
+          value: 'personnum',
+          total: '0',
+        },
+        {
+          name: '房屋总数',
+          value: 'buildingnum',
+          total: '0',
+        },
+        {
+          name: '车辆总数',
+          value: 'carnum',
+          total: '0',
+        },
+        {
+          name: '入住率',
+          value: 'inrate',
+          total: '0',
+        },
+      ],
+      name: '',
+      position: '',
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '社区信息')
+      this.name = item.name
+      getBaseInfo({ id: item.id }).then(res => {
+        const data = res.data.value[0]
+        this.position = data.location
+        this.list.forEach((item) => {
+          if (data[item.value]) {
+            item.total = data[item.value]
+          }
+        })
+      })
+      this.$refs.agePie.fetchData(item.id)
+      this.$refs.currentPie.fetchData(item.id)
+      this.$refs.personBar.fetchData(item.id)
+      this.$refs.transitBar.fetchData(item.id)
+      this.$refs.scoreLineBar.fetchData(item.id)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 220px;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 50%;
+    height: 35%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+</style>

diff --git a/src/api/ywts/shms/sq.js b/src/api/ywts/shms/sq.js
new file mode 100644
index 0000000..04a5447
--- /dev/null
+++ b/src/api/ywts/shms/sq.js
@@ -0,0 +1,123 @@
+/**
+ * 社区接口
+ */
+import request from '@/utils/request'
+
+// 社区点位列表
+export function getCommunityList() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwlb',
+    method: 'post',
+  })
+}
+
+// 人员热力图
+export function getHeat() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqyyrlt',
+    method: 'post',
+  })
+}
+
+// 设备点位
+export function getDevice() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sbdwlb',
+    method: 'post',
+    params: {
+      type: '',
+      keywords: ''
+    }
+  })
+}
+
+// 社区车辆
+export function getCar() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqbyl',
+    method: 'post',
+  })
+}
+
+// 事件点位列表
+export function getCase(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sjdwlb',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+
+// 事件详情
+export function getCaseList(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/zjlbfy',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+// 获取社区基本信息
+export function getBaseInfo(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwxq',
+    method: 'post',
+    params:{
+      ...data
+    },
+    // data
+  })
+}
+// 居民年龄统计
+export function getAgeStatistics(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmnltj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 居民流动比例
+export function getCurrentRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmldbl',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1年人房车占比统计
+export function getPersonCarRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/rfczbtj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月居民通行量分析
+export function getTransitrRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmtxlfx',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月高频事件排行榜
+export function getCaseRank(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/gpsjphb',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
diff --git a/src/pages/ywts/shms/jy/index.vue b/src/pages/ywts/shms/jy/index.vue
index 1293f28..1c1170e 100644
--- a/src/pages/ywts/shms/jy/index.vue
+++ b/src/pages/ywts/shms/jy/index.vue
@@ -6,7 +6,7 @@
       <common-btn id="personBtn" :select="selectIndex === 'personBtn'" :bg="personBg" :bg-hover="personHover" width="5"
         height="5" text-hover="师生热力" @click="btnClick" />
       <layer-manager-mix title="学校设备" :icons="icons" :menu-tab="menuTab" :menus="menus"
-        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" />
+        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" @menuClick="menuClick" />
       <keyword-manager :resultList="keywordList" :select="selectIndex === 'keywordBtn'" @handleKeyword="handleKeyword"
         @click="selectIndex = 'keywordBtn'" @localPoint="localPoint" />
     </div>
@@ -298,6 +298,18 @@
         })
       })
     },
+      menuClick(e) {
+      clearResetMap()
+      this.markerList = this.markerBakList.filter(item => item.type === e.type)
+      this.markerList.forEach((item) => {
+        AddLabelPoint(
+          item.id,
+          `${item.name}`,
+          item.type === '1' ? this.videoIcon : this.controlIcon,
+          [item.lon, item.lat, 0], 'yl-dev', item,
+          this.clickDevice)
+      })
+    },
     // 设备点位点击
     clickDevice(eventArg) {
       const item = eventArg._data.data
diff --git a/src/pages/ywts/shms/sq/carPop.vue b/src/pages/ywts/shms/sq/carPop.vue
new file mode 100644
index 0000000..b1fe4c3
--- /dev/null
+++ b/src/pages/ywts/shms/sq/carPop.vue
@@ -0,0 +1,275 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.showType] }">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="list-down" style="width: 100%;margin: 0 auto;">
+      <div class="list-item">
+        <div style="width:100%;">
+          <div style="width: 100%">
+            <i class="item-line one-line" style="width: 100%;"><span>名称: {{
+              gdInfo.name }}</span></i>
+            <i class="item-line one-line" style="width: 100%;" :title="gdInfo.location"><span>位置: {{
+              gdInfo.location }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>车辆数量: {{ gdInfo.carNum
+                }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>停车位: {{ gdInfo.parkSpaceNum }}</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
+      defaultPhoto: require('@/assets/images/global_images/photo_error.png'),
+      statusColor: {
+        1: '#a1a1a1',
+        2: '#f8e31a',
+        3: '#5ab1fc',
+        4: '#f89835',
+        5: '#3def83',
+      },
+      urgencyColor: {
+        'C': '#2f8d00',
+        'B': '#c4ad00',
+        'A': '#8d0000'
+      },
+      heightDict: {
+        normal: '130px',
+        video: '300px'
+      }
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '弹窗内容')
+      if (!item.lon || !item.lat) { return }
+      showPositin(item.lon, item.lat)
+      item.showType = 'normal'
+      // 弹窗位置
+      if (window.localStorage.getItem('mousePosition')) {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      else {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      this.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.children-item {
+  width: 96% !important;
+  margin: 10px auto !important;
+  color: #fff !important;
+  // border: 1px solid #fff;
+  border-radius: 6px;
+  padding: 10px;
+  box-sizing: border-box;
+
+}
+
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 160px;
+  width: 27rem;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 25%;
+    height: 32%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+
+.list-down {
+  // margin-top: 10px;
+  // overflow-y: scroll;
+  width: 100%;
+  // height: calc(100% - 6rem);
+  padding: 0px 10px;
+}
+
+.list-item {
+  width: calc(100% - 35px);
+  // height: 12rem;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  padding: 0.8rem 10px;
+  margin: 0.2rem 0rem;
+  letter-spacing: 2px;
+  cursor: pointer;
+  background-size: 100% 100% !important;
+  color: white;
+  border-top: 2px solid #0494f3;
+  border-radius: 10px;
+}
+
+.list-item:hover {
+  background-size: cover !important;
+  background: url('../../../../assets/images/right/选中.png') !important;
+  background-size: 100% 100% !important;
+}
+
+.item-title {
+  width: 90%;
+  text-align: left;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+
+.item-line {
+  display: flex;
+  font-size: 1.2rem;
+  color: #aed2f3;
+  padding-left: 20px;
+  line-height: 1.8rem;
+  width: 95%;
+  word-break: break-all;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /* 设置最大行数 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.colorbox-text {
+  background-color: #0a88fc;
+  border-radius: 10px;
+  color: white;
+  font-size: 1rem;
+  padding: 0rem 0.4rem;
+  margin-left: 5px;
+  text-align: center;
+  width: 5rem;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+
+.one-line {
+  display: block !important;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/communityPop.vue b/src/pages/ywts/shms/sq/communityPop.vue
new file mode 100644
index 0000000..eb6bf07
--- /dev/null
+++ b/src/pages/ywts/shms/sq/communityPop.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="bottom">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="block" style="padding: 10px">
+      <div style="display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center">
+        <div class="num" style="text-align: left;width:100%;font-size: 20px;font-weight: bold">{{ name }}</div>
+        <div class="num" style="color: #B3F3F6;width:100%;word-break: break-all;text-align: left;">位置：{{ position
+          }}</span></div>
+        <!-- <div class="item" style="width: 51%">
+          <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/在校生总数.png')" class="base-map-image"
+            mode="fill" />
+          <div class="item-text">
+            <div class="num">{{ list[0] }}<span class="unit">人</span></div>
+            <div style="color: #B3F3F6;">在校生总数</div>
+          </div>
+        </div> -->
+        <!-- <div class="item">
+          <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/教师总数.png')" class="base-map-image"
+            mode="fill" />
+          <div class="item-text">
+            <div class="num">{{ list[1] }}<span class="unit">人</span></div>
+            <div style="color: #B3F3F6;">教师总数</div>
+          </div>
+        </div> -->
+        <div class="item" v-for="(item, index) in list">
+          <!-- <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/教职工总数.png')" class="base-map-image"
+            mode="fill" /> -->
+          <div class="item-text">
+            <div class="num">{{ item.total }}<span class="unit"></span></div>
+            <div style="color: #B3F3F6;">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">居民年龄统计</div>
+      <age-pie style="flex:1;" ref="agePie" />
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">居民流动比例</div>
+      <currentPie style="flex:1;" ref="currentPie"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1年人房车占比统计</div>
+      <personBar style="flex:1;" ref="personBar"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1月居民通行量分析</div>
+      <transitBar style="flex:1;" ref="transitBar"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1月高频事件排行榜</div>
+      <scoreLineBar style="flex:1;" ref="scoreLineBar"/>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import scoreLineBar from "./components/scoreLineBar";
+import transitBar from "./components/transitBar";
+import personBar from "./components/personBar";
+import AgePie from "./components/agePie";
+import currentPie from "./components/currentPie";
+import { getBaseInfo } from '@/api/ywts/shms/sq'
+
+export default {
+  name: 'SchoolPop',
+  // components: {SexPie, AgePie, StudentBar, TsLineBar, TeacherLine},
+  components: { AgePie, currentPie, personBar, transitBar, scoreLineBar },
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: [
+        {
+          name: '居民总数',
+          value: 'personnum',
+          total: '0',
+        },
+        {
+          name: '房屋总数',
+          value: 'buildingnum',
+          total: '0',
+        },
+        {
+          name: '车辆总数',
+          value: 'carnum',
+          total: '0',
+        },
+        {
+          name: '入住率',
+          value: 'inrate',
+          total: '0',
+        },
+      ],
+      name: '',
+      position: '',
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '社区信息')
+      this.name = item.name
+      getBaseInfo({ id: item.id }).then(res => {
+        const data = res.data.value[0]
+        this.position = data.location
+        this.list.forEach((item) => {
+          if (data[item.value]) {
+            item.total = data[item.value]
+          }
+        })
+      })
+      this.$refs.agePie.fetchData(item.id)
+      this.$refs.currentPie.fetchData(item.id)
+      this.$refs.personBar.fetchData(item.id)
+      this.$refs.transitBar.fetchData(item.id)
+      this.$refs.scoreLineBar.fetchData(item.id)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 220px;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 50%;
+    height: 35%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/agePie.vue b/src/pages/ywts/shms/sq/components/agePie.vue
new file mode 100644
index 0000000..9e41da8
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/agePie.vue
@@ -0,0 +1,185 @@
+<!--suppress ALL -->
+<template>
+  <div id="age-pie" class="container">
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {white} from "chalk";
+import { getAgeStatistics } from '@/api/ywts/shms/sq'
+export default {
+  name: 'AgePie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          // {name: '7岁以下',value: 70 },
+          // {name: '8岁',value: 20 },
+          // {name: '9岁',value: 20 },
+          // {name: '10岁',value: 20 },
+          // {name: '11岁及以上',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#ffa54a','#4ab228','#4AFFF7','#BAE7FF'],
+        legend: {
+          type: 'scroll',
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold',
+            fontSize: 14
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['30%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            // color: '#0270b2',
+            // fontSize: 14,
+            // color: '#0270b2',
+            // fontSize: 14,
+            fontSize: 14,
+            fontWeight: 'bold',
+            position: 'outside',
+            formatter: '{name|{b}}:{value|{c}}',
+            distanceToLabelLine: 2,
+            rich: {}
+          },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>人数：{c}人<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      },
+      myChart: null
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    // this.myChart = echarts.init(document.getElementById('age-pie'))
+    this.height = document.getElementById('age-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('age-pie').clientWidth - 10 + 'px'
+    // console.log(this.height, this.width)
+  },
+  methods: {
+    fetchData(id){
+      getAgeStatistics({id}).then(res => {
+        console.log(res.data, '社区年龄')
+        if(res.code === 200) {
+          const data = res.data.value
+          this.chartData.rows = data.map(item => {
+            return {
+              name: item.age,
+              value: item.num
+            }
+          })
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>

diff --git a/src/api/ywts/shms/sq.js b/src/api/ywts/shms/sq.js
new file mode 100644
index 0000000..04a5447
--- /dev/null
+++ b/src/api/ywts/shms/sq.js
@@ -0,0 +1,123 @@
+/**
+ * 社区接口
+ */
+import request from '@/utils/request'
+
+// 社区点位列表
+export function getCommunityList() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwlb',
+    method: 'post',
+  })
+}
+
+// 人员热力图
+export function getHeat() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqyyrlt',
+    method: 'post',
+  })
+}
+
+// 设备点位
+export function getDevice() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sbdwlb',
+    method: 'post',
+    params: {
+      type: '',
+      keywords: ''
+    }
+  })
+}
+
+// 社区车辆
+export function getCar() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqbyl',
+    method: 'post',
+  })
+}
+
+// 事件点位列表
+export function getCase(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sjdwlb',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+
+// 事件详情
+export function getCaseList(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/zjlbfy',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+// 获取社区基本信息
+export function getBaseInfo(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwxq',
+    method: 'post',
+    params:{
+      ...data
+    },
+    // data
+  })
+}
+// 居民年龄统计
+export function getAgeStatistics(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmnltj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 居民流动比例
+export function getCurrentRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmldbl',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1年人房车占比统计
+export function getPersonCarRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/rfczbtj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月居民通行量分析
+export function getTransitrRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmtxlfx',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月高频事件排行榜
+export function getCaseRank(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/gpsjphb',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
diff --git a/src/pages/ywts/shms/jy/index.vue b/src/pages/ywts/shms/jy/index.vue
index 1293f28..1c1170e 100644
--- a/src/pages/ywts/shms/jy/index.vue
+++ b/src/pages/ywts/shms/jy/index.vue
@@ -6,7 +6,7 @@
       <common-btn id="personBtn" :select="selectIndex === 'personBtn'" :bg="personBg" :bg-hover="personHover" width="5"
         height="5" text-hover="师生热力" @click="btnClick" />
       <layer-manager-mix title="学校设备" :icons="icons" :menu-tab="menuTab" :menus="menus"
-        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" />
+        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" @menuClick="menuClick" />
       <keyword-manager :resultList="keywordList" :select="selectIndex === 'keywordBtn'" @handleKeyword="handleKeyword"
         @click="selectIndex = 'keywordBtn'" @localPoint="localPoint" />
     </div>
@@ -298,6 +298,18 @@
         })
       })
     },
+      menuClick(e) {
+      clearResetMap()
+      this.markerList = this.markerBakList.filter(item => item.type === e.type)
+      this.markerList.forEach((item) => {
+        AddLabelPoint(
+          item.id,
+          `${item.name}`,
+          item.type === '1' ? this.videoIcon : this.controlIcon,
+          [item.lon, item.lat, 0], 'yl-dev', item,
+          this.clickDevice)
+      })
+    },
     // 设备点位点击
     clickDevice(eventArg) {
       const item = eventArg._data.data
diff --git a/src/pages/ywts/shms/sq/carPop.vue b/src/pages/ywts/shms/sq/carPop.vue
new file mode 100644
index 0000000..b1fe4c3
--- /dev/null
+++ b/src/pages/ywts/shms/sq/carPop.vue
@@ -0,0 +1,275 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.showType] }">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="list-down" style="width: 100%;margin: 0 auto;">
+      <div class="list-item">
+        <div style="width:100%;">
+          <div style="width: 100%">
+            <i class="item-line one-line" style="width: 100%;"><span>名称: {{
+              gdInfo.name }}</span></i>
+            <i class="item-line one-line" style="width: 100%;" :title="gdInfo.location"><span>位置: {{
+              gdInfo.location }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>车辆数量: {{ gdInfo.carNum
+                }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>停车位: {{ gdInfo.parkSpaceNum }}</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
+      defaultPhoto: require('@/assets/images/global_images/photo_error.png'),
+      statusColor: {
+        1: '#a1a1a1',
+        2: '#f8e31a',
+        3: '#5ab1fc',
+        4: '#f89835',
+        5: '#3def83',
+      },
+      urgencyColor: {
+        'C': '#2f8d00',
+        'B': '#c4ad00',
+        'A': '#8d0000'
+      },
+      heightDict: {
+        normal: '130px',
+        video: '300px'
+      }
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '弹窗内容')
+      if (!item.lon || !item.lat) { return }
+      showPositin(item.lon, item.lat)
+      item.showType = 'normal'
+      // 弹窗位置
+      if (window.localStorage.getItem('mousePosition')) {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      else {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      this.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.children-item {
+  width: 96% !important;
+  margin: 10px auto !important;
+  color: #fff !important;
+  // border: 1px solid #fff;
+  border-radius: 6px;
+  padding: 10px;
+  box-sizing: border-box;
+
+}
+
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 160px;
+  width: 27rem;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 25%;
+    height: 32%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+
+.list-down {
+  // margin-top: 10px;
+  // overflow-y: scroll;
+  width: 100%;
+  // height: calc(100% - 6rem);
+  padding: 0px 10px;
+}
+
+.list-item {
+  width: calc(100% - 35px);
+  // height: 12rem;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  padding: 0.8rem 10px;
+  margin: 0.2rem 0rem;
+  letter-spacing: 2px;
+  cursor: pointer;
+  background-size: 100% 100% !important;
+  color: white;
+  border-top: 2px solid #0494f3;
+  border-radius: 10px;
+}
+
+.list-item:hover {
+  background-size: cover !important;
+  background: url('../../../../assets/images/right/选中.png') !important;
+  background-size: 100% 100% !important;
+}
+
+.item-title {
+  width: 90%;
+  text-align: left;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+
+.item-line {
+  display: flex;
+  font-size: 1.2rem;
+  color: #aed2f3;
+  padding-left: 20px;
+  line-height: 1.8rem;
+  width: 95%;
+  word-break: break-all;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /* 设置最大行数 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.colorbox-text {
+  background-color: #0a88fc;
+  border-radius: 10px;
+  color: white;
+  font-size: 1rem;
+  padding: 0rem 0.4rem;
+  margin-left: 5px;
+  text-align: center;
+  width: 5rem;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+
+.one-line {
+  display: block !important;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/communityPop.vue b/src/pages/ywts/shms/sq/communityPop.vue
new file mode 100644
index 0000000..eb6bf07
--- /dev/null
+++ b/src/pages/ywts/shms/sq/communityPop.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="bottom">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="block" style="padding: 10px">
+      <div style="display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center">
+        <div class="num" style="text-align: left;width:100%;font-size: 20px;font-weight: bold">{{ name }}</div>
+        <div class="num" style="color: #B3F3F6;width:100%;word-break: break-all;text-align: left;">位置：{{ position
+          }}</span></div>
+        <!-- <div class="item" style="width: 51%">
+          <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/在校生总数.png')" class="base-map-image"
+            mode="fill" />
+          <div class="item-text">
+            <div class="num">{{ list[0] }}<span class="unit">人</span></div>
+            <div style="color: #B3F3F6;">在校生总数</div>
+          </div>
+        </div> -->
+        <!-- <div class="item">
+          <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/教师总数.png')" class="base-map-image"
+            mode="fill" />
+          <div class="item-text">
+            <div class="num">{{ list[1] }}<span class="unit">人</span></div>
+            <div style="color: #B3F3F6;">教师总数</div>
+          </div>
+        </div> -->
+        <div class="item" v-for="(item, index) in list">
+          <!-- <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/教职工总数.png')" class="base-map-image"
+            mode="fill" /> -->
+          <div class="item-text">
+            <div class="num">{{ item.total }}<span class="unit"></span></div>
+            <div style="color: #B3F3F6;">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">居民年龄统计</div>
+      <age-pie style="flex:1;" ref="agePie" />
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">居民流动比例</div>
+      <currentPie style="flex:1;" ref="currentPie"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1年人房车占比统计</div>
+      <personBar style="flex:1;" ref="personBar"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1月居民通行量分析</div>
+      <transitBar style="flex:1;" ref="transitBar"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1月高频事件排行榜</div>
+      <scoreLineBar style="flex:1;" ref="scoreLineBar"/>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import scoreLineBar from "./components/scoreLineBar";
+import transitBar from "./components/transitBar";
+import personBar from "./components/personBar";
+import AgePie from "./components/agePie";
+import currentPie from "./components/currentPie";
+import { getBaseInfo } from '@/api/ywts/shms/sq'
+
+export default {
+  name: 'SchoolPop',
+  // components: {SexPie, AgePie, StudentBar, TsLineBar, TeacherLine},
+  components: { AgePie, currentPie, personBar, transitBar, scoreLineBar },
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: [
+        {
+          name: '居民总数',
+          value: 'personnum',
+          total: '0',
+        },
+        {
+          name: '房屋总数',
+          value: 'buildingnum',
+          total: '0',
+        },
+        {
+          name: '车辆总数',
+          value: 'carnum',
+          total: '0',
+        },
+        {
+          name: '入住率',
+          value: 'inrate',
+          total: '0',
+        },
+      ],
+      name: '',
+      position: '',
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '社区信息')
+      this.name = item.name
+      getBaseInfo({ id: item.id }).then(res => {
+        const data = res.data.value[0]
+        this.position = data.location
+        this.list.forEach((item) => {
+          if (data[item.value]) {
+            item.total = data[item.value]
+          }
+        })
+      })
+      this.$refs.agePie.fetchData(item.id)
+      this.$refs.currentPie.fetchData(item.id)
+      this.$refs.personBar.fetchData(item.id)
+      this.$refs.transitBar.fetchData(item.id)
+      this.$refs.scoreLineBar.fetchData(item.id)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 220px;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 50%;
+    height: 35%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/agePie.vue b/src/pages/ywts/shms/sq/components/agePie.vue
new file mode 100644
index 0000000..9e41da8
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/agePie.vue
@@ -0,0 +1,185 @@
+<!--suppress ALL -->
+<template>
+  <div id="age-pie" class="container">
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {white} from "chalk";
+import { getAgeStatistics } from '@/api/ywts/shms/sq'
+export default {
+  name: 'AgePie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          // {name: '7岁以下',value: 70 },
+          // {name: '8岁',value: 20 },
+          // {name: '9岁',value: 20 },
+          // {name: '10岁',value: 20 },
+          // {name: '11岁及以上',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#ffa54a','#4ab228','#4AFFF7','#BAE7FF'],
+        legend: {
+          type: 'scroll',
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold',
+            fontSize: 14
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['30%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            // color: '#0270b2',
+            // fontSize: 14,
+            // color: '#0270b2',
+            // fontSize: 14,
+            fontSize: 14,
+            fontWeight: 'bold',
+            position: 'outside',
+            formatter: '{name|{b}}:{value|{c}}',
+            distanceToLabelLine: 2,
+            rich: {}
+          },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>人数：{c}人<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      },
+      myChart: null
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    // this.myChart = echarts.init(document.getElementById('age-pie'))
+    this.height = document.getElementById('age-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('age-pie').clientWidth - 10 + 'px'
+    // console.log(this.height, this.width)
+  },
+  methods: {
+    fetchData(id){
+      getAgeStatistics({id}).then(res => {
+        console.log(res.data, '社区年龄')
+        if(res.code === 200) {
+          const data = res.data.value
+          this.chartData.rows = data.map(item => {
+            return {
+              name: item.age,
+              value: item.num
+            }
+          })
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/currentPie.vue b/src/pages/ywts/shms/sq/components/currentPie.vue
new file mode 100644
index 0000000..c7dfe20
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/currentPie.vue
@@ -0,0 +1,178 @@
+<!--suppress ALL -->
+<template>
+  <div id="sex-pie" class="container">
+    <ve-ring :style='{ "height": height, "width": width }' :width='width' :height='height' :judge-width="true"
+      :data="chartData" :extend="extend" :settings="chartSettings" />
+  </div>
+</template>
+
+<script>
+// import {deviceStatus, statisticsBuilding} from '@/api/pop'
+// import { getDoorAreaTree } from '@/api/system/area'
+import { white } from "chalk";
+import { getCurrentRatio } from '@/api/ywts/shms/sq'
+export default {
+  name: 'CurrentPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          // {name: '男',value: 70 },
+          // {name: '女',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF', '#4AFFF7', '#BAE7FF'],
+        legend: {
+          show: false,
+          top: '0%',
+          left: 'center',
+          textStyle: {
+            color: white,
+            fontWeight: 'bold',
+            fontSize: 18
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['0%', '60%'],
+          center: ['50%', '50%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            // color: '#0270b2',
+            // fontSize: 14,
+            fontSize: 18,
+            fontWeight: 'bold',
+            position: 'outside',
+            formatter: '{name|{b}}:{value|{c}}',
+            distanceToLabelLine: 2,
+            rich: {}
+          },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: {
+          trigger: 'item', formatter: '{b}<br/>人数：{c}人<br/>占比：{d}%',
+          fontSize: 20
+        }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('sex-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('sex-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    fetchData(id) {
+      getCurrentRatio({ id }).then(res => {
+        console.log(res.data, '流动比例')
+        if (res.code === 200) {
+          const data = res.data.value
+          this.chartData.rows = data.map(item => {
+            return {
+              name: item.name,
+              value: item.num
+            }
+          })
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .round {
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+
+.circle {
+  position: absolute;
+  top: 76px;
+  left: 107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {
+  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute; //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>

diff --git a/src/api/ywts/shms/sq.js b/src/api/ywts/shms/sq.js
new file mode 100644
index 0000000..04a5447
--- /dev/null
+++ b/src/api/ywts/shms/sq.js
@@ -0,0 +1,123 @@
+/**
+ * 社区接口
+ */
+import request from '@/utils/request'
+
+// 社区点位列表
+export function getCommunityList() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwlb',
+    method: 'post',
+  })
+}
+
+// 人员热力图
+export function getHeat() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqyyrlt',
+    method: 'post',
+  })
+}
+
+// 设备点位
+export function getDevice() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sbdwlb',
+    method: 'post',
+    params: {
+      type: '',
+      keywords: ''
+    }
+  })
+}
+
+// 社区车辆
+export function getCar() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqbyl',
+    method: 'post',
+  })
+}
+
+// 事件点位列表
+export function getCase(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sjdwlb',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+
+// 事件详情
+export function getCaseList(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/zjlbfy',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+// 获取社区基本信息
+export function getBaseInfo(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwxq',
+    method: 'post',
+    params:{
+      ...data
+    },
+    // data
+  })
+}
+// 居民年龄统计
+export function getAgeStatistics(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmnltj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 居民流动比例
+export function getCurrentRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmldbl',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1年人房车占比统计
+export function getPersonCarRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/rfczbtj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月居民通行量分析
+export function getTransitrRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmtxlfx',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月高频事件排行榜
+export function getCaseRank(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/gpsjphb',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
diff --git a/src/pages/ywts/shms/jy/index.vue b/src/pages/ywts/shms/jy/index.vue
index 1293f28..1c1170e 100644
--- a/src/pages/ywts/shms/jy/index.vue
+++ b/src/pages/ywts/shms/jy/index.vue
@@ -6,7 +6,7 @@
       <common-btn id="personBtn" :select="selectIndex === 'personBtn'" :bg="personBg" :bg-hover="personHover" width="5"
         height="5" text-hover="师生热力" @click="btnClick" />
       <layer-manager-mix title="学校设备" :icons="icons" :menu-tab="menuTab" :menus="menus"
-        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" />
+        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" @menuClick="menuClick" />
       <keyword-manager :resultList="keywordList" :select="selectIndex === 'keywordBtn'" @handleKeyword="handleKeyword"
         @click="selectIndex = 'keywordBtn'" @localPoint="localPoint" />
     </div>
@@ -298,6 +298,18 @@
         })
       })
     },
+      menuClick(e) {
+      clearResetMap()
+      this.markerList = this.markerBakList.filter(item => item.type === e.type)
+      this.markerList.forEach((item) => {
+        AddLabelPoint(
+          item.id,
+          `${item.name}`,
+          item.type === '1' ? this.videoIcon : this.controlIcon,
+          [item.lon, item.lat, 0], 'yl-dev', item,
+          this.clickDevice)
+      })
+    },
     // 设备点位点击
     clickDevice(eventArg) {
       const item = eventArg._data.data
diff --git a/src/pages/ywts/shms/sq/carPop.vue b/src/pages/ywts/shms/sq/carPop.vue
new file mode 100644
index 0000000..b1fe4c3
--- /dev/null
+++ b/src/pages/ywts/shms/sq/carPop.vue
@@ -0,0 +1,275 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.showType] }">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="list-down" style="width: 100%;margin: 0 auto;">
+      <div class="list-item">
+        <div style="width:100%;">
+          <div style="width: 100%">
+            <i class="item-line one-line" style="width: 100%;"><span>名称: {{
+              gdInfo.name }}</span></i>
+            <i class="item-line one-line" style="width: 100%;" :title="gdInfo.location"><span>位置: {{
+              gdInfo.location }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>车辆数量: {{ gdInfo.carNum
+                }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>停车位: {{ gdInfo.parkSpaceNum }}</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
+      defaultPhoto: require('@/assets/images/global_images/photo_error.png'),
+      statusColor: {
+        1: '#a1a1a1',
+        2: '#f8e31a',
+        3: '#5ab1fc',
+        4: '#f89835',
+        5: '#3def83',
+      },
+      urgencyColor: {
+        'C': '#2f8d00',
+        'B': '#c4ad00',
+        'A': '#8d0000'
+      },
+      heightDict: {
+        normal: '130px',
+        video: '300px'
+      }
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '弹窗内容')
+      if (!item.lon || !item.lat) { return }
+      showPositin(item.lon, item.lat)
+      item.showType = 'normal'
+      // 弹窗位置
+      if (window.localStorage.getItem('mousePosition')) {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      else {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      this.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.children-item {
+  width: 96% !important;
+  margin: 10px auto !important;
+  color: #fff !important;
+  // border: 1px solid #fff;
+  border-radius: 6px;
+  padding: 10px;
+  box-sizing: border-box;
+
+}
+
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 160px;
+  width: 27rem;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 25%;
+    height: 32%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+
+.list-down {
+  // margin-top: 10px;
+  // overflow-y: scroll;
+  width: 100%;
+  // height: calc(100% - 6rem);
+  padding: 0px 10px;
+}
+
+.list-item {
+  width: calc(100% - 35px);
+  // height: 12rem;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  padding: 0.8rem 10px;
+  margin: 0.2rem 0rem;
+  letter-spacing: 2px;
+  cursor: pointer;
+  background-size: 100% 100% !important;
+  color: white;
+  border-top: 2px solid #0494f3;
+  border-radius: 10px;
+}
+
+.list-item:hover {
+  background-size: cover !important;
+  background: url('../../../../assets/images/right/选中.png') !important;
+  background-size: 100% 100% !important;
+}
+
+.item-title {
+  width: 90%;
+  text-align: left;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+
+.item-line {
+  display: flex;
+  font-size: 1.2rem;
+  color: #aed2f3;
+  padding-left: 20px;
+  line-height: 1.8rem;
+  width: 95%;
+  word-break: break-all;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /* 设置最大行数 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.colorbox-text {
+  background-color: #0a88fc;
+  border-radius: 10px;
+  color: white;
+  font-size: 1rem;
+  padding: 0rem 0.4rem;
+  margin-left: 5px;
+  text-align: center;
+  width: 5rem;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+
+.one-line {
+  display: block !important;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/communityPop.vue b/src/pages/ywts/shms/sq/communityPop.vue
new file mode 100644
index 0000000..eb6bf07
--- /dev/null
+++ b/src/pages/ywts/shms/sq/communityPop.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="bottom">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="block" style="padding: 10px">
+      <div style="display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center">
+        <div class="num" style="text-align: left;width:100%;font-size: 20px;font-weight: bold">{{ name }}</div>
+        <div class="num" style="color: #B3F3F6;width:100%;word-break: break-all;text-align: left;">位置：{{ position
+          }}</span></div>
+        <!-- <div class="item" style="width: 51%">
+          <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/在校生总数.png')" class="base-map-image"
+            mode="fill" />
+          <div class="item-text">
+            <div class="num">{{ list[0] }}<span class="unit">人</span></div>
+            <div style="color: #B3F3F6;">在校生总数</div>
+          </div>
+        </div> -->
+        <!-- <div class="item">
+          <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/教师总数.png')" class="base-map-image"
+            mode="fill" />
+          <div class="item-text">
+            <div class="num">{{ list[1] }}<span class="unit">人</span></div>
+            <div style="color: #B3F3F6;">教师总数</div>
+          </div>
+        </div> -->
+        <div class="item" v-for="(item, index) in list">
+          <!-- <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/教职工总数.png')" class="base-map-image"
+            mode="fill" /> -->
+          <div class="item-text">
+            <div class="num">{{ item.total }}<span class="unit"></span></div>
+            <div style="color: #B3F3F6;">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">居民年龄统计</div>
+      <age-pie style="flex:1;" ref="agePie" />
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">居民流动比例</div>
+      <currentPie style="flex:1;" ref="currentPie"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1年人房车占比统计</div>
+      <personBar style="flex:1;" ref="personBar"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1月居民通行量分析</div>
+      <transitBar style="flex:1;" ref="transitBar"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1月高频事件排行榜</div>
+      <scoreLineBar style="flex:1;" ref="scoreLineBar"/>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import scoreLineBar from "./components/scoreLineBar";
+import transitBar from "./components/transitBar";
+import personBar from "./components/personBar";
+import AgePie from "./components/agePie";
+import currentPie from "./components/currentPie";
+import { getBaseInfo } from '@/api/ywts/shms/sq'
+
+export default {
+  name: 'SchoolPop',
+  // components: {SexPie, AgePie, StudentBar, TsLineBar, TeacherLine},
+  components: { AgePie, currentPie, personBar, transitBar, scoreLineBar },
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: [
+        {
+          name: '居民总数',
+          value: 'personnum',
+          total: '0',
+        },
+        {
+          name: '房屋总数',
+          value: 'buildingnum',
+          total: '0',
+        },
+        {
+          name: '车辆总数',
+          value: 'carnum',
+          total: '0',
+        },
+        {
+          name: '入住率',
+          value: 'inrate',
+          total: '0',
+        },
+      ],
+      name: '',
+      position: '',
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '社区信息')
+      this.name = item.name
+      getBaseInfo({ id: item.id }).then(res => {
+        const data = res.data.value[0]
+        this.position = data.location
+        this.list.forEach((item) => {
+          if (data[item.value]) {
+            item.total = data[item.value]
+          }
+        })
+      })
+      this.$refs.agePie.fetchData(item.id)
+      this.$refs.currentPie.fetchData(item.id)
+      this.$refs.personBar.fetchData(item.id)
+      this.$refs.transitBar.fetchData(item.id)
+      this.$refs.scoreLineBar.fetchData(item.id)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 220px;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 50%;
+    height: 35%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/agePie.vue b/src/pages/ywts/shms/sq/components/agePie.vue
new file mode 100644
index 0000000..9e41da8
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/agePie.vue
@@ -0,0 +1,185 @@
+<!--suppress ALL -->
+<template>
+  <div id="age-pie" class="container">
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {white} from "chalk";
+import { getAgeStatistics } from '@/api/ywts/shms/sq'
+export default {
+  name: 'AgePie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          // {name: '7岁以下',value: 70 },
+          // {name: '8岁',value: 20 },
+          // {name: '9岁',value: 20 },
+          // {name: '10岁',value: 20 },
+          // {name: '11岁及以上',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#ffa54a','#4ab228','#4AFFF7','#BAE7FF'],
+        legend: {
+          type: 'scroll',
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold',
+            fontSize: 14
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['30%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            // color: '#0270b2',
+            // fontSize: 14,
+            // color: '#0270b2',
+            // fontSize: 14,
+            fontSize: 14,
+            fontWeight: 'bold',
+            position: 'outside',
+            formatter: '{name|{b}}:{value|{c}}',
+            distanceToLabelLine: 2,
+            rich: {}
+          },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>人数：{c}人<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      },
+      myChart: null
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    // this.myChart = echarts.init(document.getElementById('age-pie'))
+    this.height = document.getElementById('age-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('age-pie').clientWidth - 10 + 'px'
+    // console.log(this.height, this.width)
+  },
+  methods: {
+    fetchData(id){
+      getAgeStatistics({id}).then(res => {
+        console.log(res.data, '社区年龄')
+        if(res.code === 200) {
+          const data = res.data.value
+          this.chartData.rows = data.map(item => {
+            return {
+              name: item.age,
+              value: item.num
+            }
+          })
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/currentPie.vue b/src/pages/ywts/shms/sq/components/currentPie.vue
new file mode 100644
index 0000000..c7dfe20
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/currentPie.vue
@@ -0,0 +1,178 @@
+<!--suppress ALL -->
+<template>
+  <div id="sex-pie" class="container">
+    <ve-ring :style='{ "height": height, "width": width }' :width='width' :height='height' :judge-width="true"
+      :data="chartData" :extend="extend" :settings="chartSettings" />
+  </div>
+</template>
+
+<script>
+// import {deviceStatus, statisticsBuilding} from '@/api/pop'
+// import { getDoorAreaTree } from '@/api/system/area'
+import { white } from "chalk";
+import { getCurrentRatio } from '@/api/ywts/shms/sq'
+export default {
+  name: 'CurrentPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          // {name: '男',value: 70 },
+          // {name: '女',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF', '#4AFFF7', '#BAE7FF'],
+        legend: {
+          show: false,
+          top: '0%',
+          left: 'center',
+          textStyle: {
+            color: white,
+            fontWeight: 'bold',
+            fontSize: 18
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['0%', '60%'],
+          center: ['50%', '50%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            // color: '#0270b2',
+            // fontSize: 14,
+            fontSize: 18,
+            fontWeight: 'bold',
+            position: 'outside',
+            formatter: '{name|{b}}:{value|{c}}',
+            distanceToLabelLine: 2,
+            rich: {}
+          },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: {
+          trigger: 'item', formatter: '{b}<br/>人数：{c}人<br/>占比：{d}%',
+          fontSize: 20
+        }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('sex-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('sex-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    fetchData(id) {
+      getCurrentRatio({ id }).then(res => {
+        console.log(res.data, '流动比例')
+        if (res.code === 200) {
+          const data = res.data.value
+          this.chartData.rows = data.map(item => {
+            return {
+              name: item.name,
+              value: item.num
+            }
+          })
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .round {
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+
+.circle {
+  position: absolute;
+  top: 76px;
+  left: 107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {
+  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute; //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/personBar.vue b/src/pages/ywts/shms/sq/components/personBar.vue
new file mode 100644
index 0000000..b065487
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/personBar.vue
@@ -0,0 +1,193 @@
+<template>
+  <div id="person-bar2" class="container"/>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { getPersonCarRatio } from '@/api/ywts/shms/sq';
+
+export default {
+  name: 'PersonBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['人', '房', '车']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '人',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }, {
+            name: '房',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#4ab228' }
+              ])
+            }
+          },
+          {
+            name: '车',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('person-bar2'))
+    this.height = document.getElementById('person-bar2').clientHeight - 10 + 'px'
+    this.width = document.getElementById('person-bar2').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      if(!document.getElementById('person-bar2')) {
+        return
+      }
+      that.reload()
+    })
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('person-bar2').clientHeight - 10 + 'px'
+      this.width = document.getElementById('person-bar2').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData(id) {
+      getPersonCarRatio({id}).then(response => {
+        console.log(response.data, '人房车')
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.value.map(item => item.people)
+          this.extend.series[1].data = response.data.value.map(item => item.building)
+          this.extend.series[2].data = response.data.value.map(item => item.car)
+          this.extend.xAxis.data = response.data.value.map(item => item.month)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+      // this.extend.series[0].data = [5154,4545,2455,7212]
+      // this.extend.series[1].data = [554,545,455,722]
+      // this.extend.xAxis.data = ['20岁以下', '20-30岁', '30-40岁', '40岁以上' ]
+      // this.myChart.setOption(this.extend, true)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+

diff --git a/src/api/ywts/shms/sq.js b/src/api/ywts/shms/sq.js
new file mode 100644
index 0000000..04a5447
--- /dev/null
+++ b/src/api/ywts/shms/sq.js
@@ -0,0 +1,123 @@
+/**
+ * 社区接口
+ */
+import request from '@/utils/request'
+
+// 社区点位列表
+export function getCommunityList() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwlb',
+    method: 'post',
+  })
+}
+
+// 人员热力图
+export function getHeat() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqyyrlt',
+    method: 'post',
+  })
+}
+
+// 设备点位
+export function getDevice() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sbdwlb',
+    method: 'post',
+    params: {
+      type: '',
+      keywords: ''
+    }
+  })
+}
+
+// 社区车辆
+export function getCar() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqbyl',
+    method: 'post',
+  })
+}
+
+// 事件点位列表
+export function getCase(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sjdwlb',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+
+// 事件详情
+export function getCaseList(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/zjlbfy',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+// 获取社区基本信息
+export function getBaseInfo(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwxq',
+    method: 'post',
+    params:{
+      ...data
+    },
+    // data
+  })
+}
+// 居民年龄统计
+export function getAgeStatistics(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmnltj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 居民流动比例
+export function getCurrentRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmldbl',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1年人房车占比统计
+export function getPersonCarRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/rfczbtj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月居民通行量分析
+export function getTransitrRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmtxlfx',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月高频事件排行榜
+export function getCaseRank(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/gpsjphb',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
diff --git a/src/pages/ywts/shms/jy/index.vue b/src/pages/ywts/shms/jy/index.vue
index 1293f28..1c1170e 100644
--- a/src/pages/ywts/shms/jy/index.vue
+++ b/src/pages/ywts/shms/jy/index.vue
@@ -6,7 +6,7 @@
       <common-btn id="personBtn" :select="selectIndex === 'personBtn'" :bg="personBg" :bg-hover="personHover" width="5"
         height="5" text-hover="师生热力" @click="btnClick" />
       <layer-manager-mix title="学校设备" :icons="icons" :menu-tab="menuTab" :menus="menus"
-        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" />
+        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" @menuClick="menuClick" />
       <keyword-manager :resultList="keywordList" :select="selectIndex === 'keywordBtn'" @handleKeyword="handleKeyword"
         @click="selectIndex = 'keywordBtn'" @localPoint="localPoint" />
     </div>
@@ -298,6 +298,18 @@
         })
       })
     },
+      menuClick(e) {
+      clearResetMap()
+      this.markerList = this.markerBakList.filter(item => item.type === e.type)
+      this.markerList.forEach((item) => {
+        AddLabelPoint(
+          item.id,
+          `${item.name}`,
+          item.type === '1' ? this.videoIcon : this.controlIcon,
+          [item.lon, item.lat, 0], 'yl-dev', item,
+          this.clickDevice)
+      })
+    },
     // 设备点位点击
     clickDevice(eventArg) {
       const item = eventArg._data.data
diff --git a/src/pages/ywts/shms/sq/carPop.vue b/src/pages/ywts/shms/sq/carPop.vue
new file mode 100644
index 0000000..b1fe4c3
--- /dev/null
+++ b/src/pages/ywts/shms/sq/carPop.vue
@@ -0,0 +1,275 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.showType] }">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="list-down" style="width: 100%;margin: 0 auto;">
+      <div class="list-item">
+        <div style="width:100%;">
+          <div style="width: 100%">
+            <i class="item-line one-line" style="width: 100%;"><span>名称: {{
+              gdInfo.name }}</span></i>
+            <i class="item-line one-line" style="width: 100%;" :title="gdInfo.location"><span>位置: {{
+              gdInfo.location }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>车辆数量: {{ gdInfo.carNum
+                }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>停车位: {{ gdInfo.parkSpaceNum }}</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
+      defaultPhoto: require('@/assets/images/global_images/photo_error.png'),
+      statusColor: {
+        1: '#a1a1a1',
+        2: '#f8e31a',
+        3: '#5ab1fc',
+        4: '#f89835',
+        5: '#3def83',
+      },
+      urgencyColor: {
+        'C': '#2f8d00',
+        'B': '#c4ad00',
+        'A': '#8d0000'
+      },
+      heightDict: {
+        normal: '130px',
+        video: '300px'
+      }
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '弹窗内容')
+      if (!item.lon || !item.lat) { return }
+      showPositin(item.lon, item.lat)
+      item.showType = 'normal'
+      // 弹窗位置
+      if (window.localStorage.getItem('mousePosition')) {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      else {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      this.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.children-item {
+  width: 96% !important;
+  margin: 10px auto !important;
+  color: #fff !important;
+  // border: 1px solid #fff;
+  border-radius: 6px;
+  padding: 10px;
+  box-sizing: border-box;
+
+}
+
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 160px;
+  width: 27rem;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 25%;
+    height: 32%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+
+.list-down {
+  // margin-top: 10px;
+  // overflow-y: scroll;
+  width: 100%;
+  // height: calc(100% - 6rem);
+  padding: 0px 10px;
+}
+
+.list-item {
+  width: calc(100% - 35px);
+  // height: 12rem;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  padding: 0.8rem 10px;
+  margin: 0.2rem 0rem;
+  letter-spacing: 2px;
+  cursor: pointer;
+  background-size: 100% 100% !important;
+  color: white;
+  border-top: 2px solid #0494f3;
+  border-radius: 10px;
+}
+
+.list-item:hover {
+  background-size: cover !important;
+  background: url('../../../../assets/images/right/选中.png') !important;
+  background-size: 100% 100% !important;
+}
+
+.item-title {
+  width: 90%;
+  text-align: left;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+
+.item-line {
+  display: flex;
+  font-size: 1.2rem;
+  color: #aed2f3;
+  padding-left: 20px;
+  line-height: 1.8rem;
+  width: 95%;
+  word-break: break-all;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /* 设置最大行数 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.colorbox-text {
+  background-color: #0a88fc;
+  border-radius: 10px;
+  color: white;
+  font-size: 1rem;
+  padding: 0rem 0.4rem;
+  margin-left: 5px;
+  text-align: center;
+  width: 5rem;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+
+.one-line {
+  display: block !important;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/communityPop.vue b/src/pages/ywts/shms/sq/communityPop.vue
new file mode 100644
index 0000000..eb6bf07
--- /dev/null
+++ b/src/pages/ywts/shms/sq/communityPop.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="bottom">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="block" style="padding: 10px">
+      <div style="display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center">
+        <div class="num" style="text-align: left;width:100%;font-size: 20px;font-weight: bold">{{ name }}</div>
+        <div class="num" style="color: #B3F3F6;width:100%;word-break: break-all;text-align: left;">位置：{{ position
+          }}</span></div>
+        <!-- <div class="item" style="width: 51%">
+          <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/在校生总数.png')" class="base-map-image"
+            mode="fill" />
+          <div class="item-text">
+            <div class="num">{{ list[0] }}<span class="unit">人</span></div>
+            <div style="color: #B3F3F6;">在校生总数</div>
+          </div>
+        </div> -->
+        <!-- <div class="item">
+          <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/教师总数.png')" class="base-map-image"
+            mode="fill" />
+          <div class="item-text">
+            <div class="num">{{ list[1] }}<span class="unit">人</span></div>
+            <div style="color: #B3F3F6;">教师总数</div>
+          </div>
+        </div> -->
+        <div class="item" v-for="(item, index) in list">
+          <!-- <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/教职工总数.png')" class="base-map-image"
+            mode="fill" /> -->
+          <div class="item-text">
+            <div class="num">{{ item.total }}<span class="unit"></span></div>
+            <div style="color: #B3F3F6;">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">居民年龄统计</div>
+      <age-pie style="flex:1;" ref="agePie" />
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">居民流动比例</div>
+      <currentPie style="flex:1;" ref="currentPie"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1年人房车占比统计</div>
+      <personBar style="flex:1;" ref="personBar"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1月居民通行量分析</div>
+      <transitBar style="flex:1;" ref="transitBar"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1月高频事件排行榜</div>
+      <scoreLineBar style="flex:1;" ref="scoreLineBar"/>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import scoreLineBar from "./components/scoreLineBar";
+import transitBar from "./components/transitBar";
+import personBar from "./components/personBar";
+import AgePie from "./components/agePie";
+import currentPie from "./components/currentPie";
+import { getBaseInfo } from '@/api/ywts/shms/sq'
+
+export default {
+  name: 'SchoolPop',
+  // components: {SexPie, AgePie, StudentBar, TsLineBar, TeacherLine},
+  components: { AgePie, currentPie, personBar, transitBar, scoreLineBar },
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: [
+        {
+          name: '居民总数',
+          value: 'personnum',
+          total: '0',
+        },
+        {
+          name: '房屋总数',
+          value: 'buildingnum',
+          total: '0',
+        },
+        {
+          name: '车辆总数',
+          value: 'carnum',
+          total: '0',
+        },
+        {
+          name: '入住率',
+          value: 'inrate',
+          total: '0',
+        },
+      ],
+      name: '',
+      position: '',
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '社区信息')
+      this.name = item.name
+      getBaseInfo({ id: item.id }).then(res => {
+        const data = res.data.value[0]
+        this.position = data.location
+        this.list.forEach((item) => {
+          if (data[item.value]) {
+            item.total = data[item.value]
+          }
+        })
+      })
+      this.$refs.agePie.fetchData(item.id)
+      this.$refs.currentPie.fetchData(item.id)
+      this.$refs.personBar.fetchData(item.id)
+      this.$refs.transitBar.fetchData(item.id)
+      this.$refs.scoreLineBar.fetchData(item.id)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 220px;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 50%;
+    height: 35%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/agePie.vue b/src/pages/ywts/shms/sq/components/agePie.vue
new file mode 100644
index 0000000..9e41da8
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/agePie.vue
@@ -0,0 +1,185 @@
+<!--suppress ALL -->
+<template>
+  <div id="age-pie" class="container">
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {white} from "chalk";
+import { getAgeStatistics } from '@/api/ywts/shms/sq'
+export default {
+  name: 'AgePie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          // {name: '7岁以下',value: 70 },
+          // {name: '8岁',value: 20 },
+          // {name: '9岁',value: 20 },
+          // {name: '10岁',value: 20 },
+          // {name: '11岁及以上',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#ffa54a','#4ab228','#4AFFF7','#BAE7FF'],
+        legend: {
+          type: 'scroll',
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold',
+            fontSize: 14
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['30%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            // color: '#0270b2',
+            // fontSize: 14,
+            // color: '#0270b2',
+            // fontSize: 14,
+            fontSize: 14,
+            fontWeight: 'bold',
+            position: 'outside',
+            formatter: '{name|{b}}:{value|{c}}',
+            distanceToLabelLine: 2,
+            rich: {}
+          },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>人数：{c}人<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      },
+      myChart: null
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    // this.myChart = echarts.init(document.getElementById('age-pie'))
+    this.height = document.getElementById('age-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('age-pie').clientWidth - 10 + 'px'
+    // console.log(this.height, this.width)
+  },
+  methods: {
+    fetchData(id){
+      getAgeStatistics({id}).then(res => {
+        console.log(res.data, '社区年龄')
+        if(res.code === 200) {
+          const data = res.data.value
+          this.chartData.rows = data.map(item => {
+            return {
+              name: item.age,
+              value: item.num
+            }
+          })
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/currentPie.vue b/src/pages/ywts/shms/sq/components/currentPie.vue
new file mode 100644
index 0000000..c7dfe20
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/currentPie.vue
@@ -0,0 +1,178 @@
+<!--suppress ALL -->
+<template>
+  <div id="sex-pie" class="container">
+    <ve-ring :style='{ "height": height, "width": width }' :width='width' :height='height' :judge-width="true"
+      :data="chartData" :extend="extend" :settings="chartSettings" />
+  </div>
+</template>
+
+<script>
+// import {deviceStatus, statisticsBuilding} from '@/api/pop'
+// import { getDoorAreaTree } from '@/api/system/area'
+import { white } from "chalk";
+import { getCurrentRatio } from '@/api/ywts/shms/sq'
+export default {
+  name: 'CurrentPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          // {name: '男',value: 70 },
+          // {name: '女',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF', '#4AFFF7', '#BAE7FF'],
+        legend: {
+          show: false,
+          top: '0%',
+          left: 'center',
+          textStyle: {
+            color: white,
+            fontWeight: 'bold',
+            fontSize: 18
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['0%', '60%'],
+          center: ['50%', '50%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            // color: '#0270b2',
+            // fontSize: 14,
+            fontSize: 18,
+            fontWeight: 'bold',
+            position: 'outside',
+            formatter: '{name|{b}}:{value|{c}}',
+            distanceToLabelLine: 2,
+            rich: {}
+          },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: {
+          trigger: 'item', formatter: '{b}<br/>人数：{c}人<br/>占比：{d}%',
+          fontSize: 20
+        }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('sex-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('sex-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    fetchData(id) {
+      getCurrentRatio({ id }).then(res => {
+        console.log(res.data, '流动比例')
+        if (res.code === 200) {
+          const data = res.data.value
+          this.chartData.rows = data.map(item => {
+            return {
+              name: item.name,
+              value: item.num
+            }
+          })
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .round {
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+
+.circle {
+  position: absolute;
+  top: 76px;
+  left: 107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {
+  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute; //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/personBar.vue b/src/pages/ywts/shms/sq/components/personBar.vue
new file mode 100644
index 0000000..b065487
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/personBar.vue
@@ -0,0 +1,193 @@
+<template>
+  <div id="person-bar2" class="container"/>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { getPersonCarRatio } from '@/api/ywts/shms/sq';
+
+export default {
+  name: 'PersonBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['人', '房', '车']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '人',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }, {
+            name: '房',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#4ab228' }
+              ])
+            }
+          },
+          {
+            name: '车',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('person-bar2'))
+    this.height = document.getElementById('person-bar2').clientHeight - 10 + 'px'
+    this.width = document.getElementById('person-bar2').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      if(!document.getElementById('person-bar2')) {
+        return
+      }
+      that.reload()
+    })
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('person-bar2').clientHeight - 10 + 'px'
+      this.width = document.getElementById('person-bar2').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData(id) {
+      getPersonCarRatio({id}).then(response => {
+        console.log(response.data, '人房车')
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.value.map(item => item.people)
+          this.extend.series[1].data = response.data.value.map(item => item.building)
+          this.extend.series[2].data = response.data.value.map(item => item.car)
+          this.extend.xAxis.data = response.data.value.map(item => item.month)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+      // this.extend.series[0].data = [5154,4545,2455,7212]
+      // this.extend.series[1].data = [554,545,455,722]
+      // this.extend.xAxis.data = ['20岁以下', '20-30岁', '30-40岁', '40岁以上' ]
+      // this.myChart.setOption(this.extend, true)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/pages/ywts/shms/sq/components/scoreLineBar.vue b/src/pages/ywts/shms/sq/components/scoreLineBar.vue
new file mode 100644
index 0000000..1551e69
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/scoreLineBar.vue
@@ -0,0 +1,189 @@
+<template>
+  <div id="score-linebar" className="container"/>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { getCaseRank } from '@/api/ywts/shms/sq'
+export default {
+  name: 'ScoreLineBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: {date: '时间'},
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['得分', '环比']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '数量',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          // {
+          //   name: '环比',
+          //   position: 'right',
+          //   type: 'value',
+          //   axisLine: {
+          //     lineStyle: {
+          //       color: '#cce9ff'
+          //     }
+          //   },
+          //   axisLabel: {
+          //     color: '#cce9ff'
+          //   }
+          // }
+        ],
+        series: [
+          {
+            name: '数量',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {offset: 1, color: 'rgba(10,25,124,0.0)'},
+                {offset: 0.3, color: 'rgba(0,253,232,0.8)'},
+                {offset: 0, color: 'rgba(0,178,172,0.8)'}
+              ])
+            }
+          },
+          // {
+          //   name: '环比',
+          //   yAxisIndex: 1,
+          //   type: 'line',
+          //   symbol: 'circle',
+          //   symbolSize: 6,
+          //   color: 'rgba(255,190,68,1)',
+          //   areaStyle: {
+          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //       {
+          //         offset: 0.5,
+          //         color: 'rgba(255,190,68,0.7)',
+          //       },
+          //       {
+          //         offset: 1,
+          //         color: 'rgba(10,25,124,0.2)'
+          //       }
+          //     ])
+          //   },
+          //   emphasis: {
+          //     focus: 'series'
+          //   },
+          //   label: {
+          //     show: true,
+          //     position: 'insideBottom'
+          //   }
+          // }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('score-linebar'))
+    this.height = document.getElementById('score-linebar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('score-linebar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function () {
+      if(!document.getElementById('score-linebar')) {
+        return
+      }
+      that.reload()
+    })
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('score-linebar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('score-linebar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData(id) {
+      getCaseRank({id}).then(response => {
+        console.log(response.data, '111111排行榜')
+        if (response.code === 200) {
+          response.data.value = response.data.value.sort((a,b) => Number(b.value) - Number(a.value))
+          this.extend.series[0].data = response.data.value.map(item => item.value)
+          // this.extend.series[1].data = response.data.value.map(item => item.rate.replace('%',''))
+          this.extend.xAxis.data = response.data.value.map(item => item.name)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+      // this.extend.series[0].data = [84, 85, 85, 81, 85, 85, 72]
+      // this.extend.series[1].data = [1, 0.5, 1, 1.5, 1, 1.8, 0.9]
+      // this.extend.xAxis.data = ['1', '2', '3', '4', '5', '6', '7']
+      // this.myChart.setOption(this.extend, true)
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>
+

diff --git a/src/api/ywts/shms/sq.js b/src/api/ywts/shms/sq.js
new file mode 100644
index 0000000..04a5447
--- /dev/null
+++ b/src/api/ywts/shms/sq.js
@@ -0,0 +1,123 @@
+/**
+ * 社区接口
+ */
+import request from '@/utils/request'
+
+// 社区点位列表
+export function getCommunityList() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwlb',
+    method: 'post',
+  })
+}
+
+// 人员热力图
+export function getHeat() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqyyrlt',
+    method: 'post',
+  })
+}
+
+// 设备点位
+export function getDevice() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sbdwlb',
+    method: 'post',
+    params: {
+      type: '',
+      keywords: ''
+    }
+  })
+}
+
+// 社区车辆
+export function getCar() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqbyl',
+    method: 'post',
+  })
+}
+
+// 事件点位列表
+export function getCase(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sjdwlb',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+
+// 事件详情
+export function getCaseList(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/zjlbfy',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+// 获取社区基本信息
+export function getBaseInfo(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwxq',
+    method: 'post',
+    params:{
+      ...data
+    },
+    // data
+  })
+}
+// 居民年龄统计
+export function getAgeStatistics(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmnltj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 居民流动比例
+export function getCurrentRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmldbl',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1年人房车占比统计
+export function getPersonCarRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/rfczbtj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月居民通行量分析
+export function getTransitrRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmtxlfx',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月高频事件排行榜
+export function getCaseRank(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/gpsjphb',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
diff --git a/src/pages/ywts/shms/jy/index.vue b/src/pages/ywts/shms/jy/index.vue
index 1293f28..1c1170e 100644
--- a/src/pages/ywts/shms/jy/index.vue
+++ b/src/pages/ywts/shms/jy/index.vue
@@ -6,7 +6,7 @@
       <common-btn id="personBtn" :select="selectIndex === 'personBtn'" :bg="personBg" :bg-hover="personHover" width="5"
         height="5" text-hover="师生热力" @click="btnClick" />
       <layer-manager-mix title="学校设备" :icons="icons" :menu-tab="menuTab" :menus="menus"
-        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" />
+        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" @menuClick="menuClick" />
       <keyword-manager :resultList="keywordList" :select="selectIndex === 'keywordBtn'" @handleKeyword="handleKeyword"
         @click="selectIndex = 'keywordBtn'" @localPoint="localPoint" />
     </div>
@@ -298,6 +298,18 @@
         })
       })
     },
+      menuClick(e) {
+      clearResetMap()
+      this.markerList = this.markerBakList.filter(item => item.type === e.type)
+      this.markerList.forEach((item) => {
+        AddLabelPoint(
+          item.id,
+          `${item.name}`,
+          item.type === '1' ? this.videoIcon : this.controlIcon,
+          [item.lon, item.lat, 0], 'yl-dev', item,
+          this.clickDevice)
+      })
+    },
     // 设备点位点击
     clickDevice(eventArg) {
       const item = eventArg._data.data
diff --git a/src/pages/ywts/shms/sq/carPop.vue b/src/pages/ywts/shms/sq/carPop.vue
new file mode 100644
index 0000000..b1fe4c3
--- /dev/null
+++ b/src/pages/ywts/shms/sq/carPop.vue
@@ -0,0 +1,275 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.showType] }">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="list-down" style="width: 100%;margin: 0 auto;">
+      <div class="list-item">
+        <div style="width:100%;">
+          <div style="width: 100%">
+            <i class="item-line one-line" style="width: 100%;"><span>名称: {{
+              gdInfo.name }}</span></i>
+            <i class="item-line one-line" style="width: 100%;" :title="gdInfo.location"><span>位置: {{
+              gdInfo.location }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>车辆数量: {{ gdInfo.carNum
+                }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>停车位: {{ gdInfo.parkSpaceNum }}</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
+      defaultPhoto: require('@/assets/images/global_images/photo_error.png'),
+      statusColor: {
+        1: '#a1a1a1',
+        2: '#f8e31a',
+        3: '#5ab1fc',
+        4: '#f89835',
+        5: '#3def83',
+      },
+      urgencyColor: {
+        'C': '#2f8d00',
+        'B': '#c4ad00',
+        'A': '#8d0000'
+      },
+      heightDict: {
+        normal: '130px',
+        video: '300px'
+      }
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '弹窗内容')
+      if (!item.lon || !item.lat) { return }
+      showPositin(item.lon, item.lat)
+      item.showType = 'normal'
+      // 弹窗位置
+      if (window.localStorage.getItem('mousePosition')) {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      else {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      this.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.children-item {
+  width: 96% !important;
+  margin: 10px auto !important;
+  color: #fff !important;
+  // border: 1px solid #fff;
+  border-radius: 6px;
+  padding: 10px;
+  box-sizing: border-box;
+
+}
+
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 160px;
+  width: 27rem;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 25%;
+    height: 32%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+
+.list-down {
+  // margin-top: 10px;
+  // overflow-y: scroll;
+  width: 100%;
+  // height: calc(100% - 6rem);
+  padding: 0px 10px;
+}
+
+.list-item {
+  width: calc(100% - 35px);
+  // height: 12rem;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  padding: 0.8rem 10px;
+  margin: 0.2rem 0rem;
+  letter-spacing: 2px;
+  cursor: pointer;
+  background-size: 100% 100% !important;
+  color: white;
+  border-top: 2px solid #0494f3;
+  border-radius: 10px;
+}
+
+.list-item:hover {
+  background-size: cover !important;
+  background: url('../../../../assets/images/right/选中.png') !important;
+  background-size: 100% 100% !important;
+}
+
+.item-title {
+  width: 90%;
+  text-align: left;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+
+.item-line {
+  display: flex;
+  font-size: 1.2rem;
+  color: #aed2f3;
+  padding-left: 20px;
+  line-height: 1.8rem;
+  width: 95%;
+  word-break: break-all;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /* 设置最大行数 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.colorbox-text {
+  background-color: #0a88fc;
+  border-radius: 10px;
+  color: white;
+  font-size: 1rem;
+  padding: 0rem 0.4rem;
+  margin-left: 5px;
+  text-align: center;
+  width: 5rem;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+
+.one-line {
+  display: block !important;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/communityPop.vue b/src/pages/ywts/shms/sq/communityPop.vue
new file mode 100644
index 0000000..eb6bf07
--- /dev/null
+++ b/src/pages/ywts/shms/sq/communityPop.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="bottom">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="block" style="padding: 10px">
+      <div style="display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center">
+        <div class="num" style="text-align: left;width:100%;font-size: 20px;font-weight: bold">{{ name }}</div>
+        <div class="num" style="color: #B3F3F6;width:100%;word-break: break-all;text-align: left;">位置：{{ position
+          }}</span></div>
+        <!-- <div class="item" style="width: 51%">
+          <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/在校生总数.png')" class="base-map-image"
+            mode="fill" />
+          <div class="item-text">
+            <div class="num">{{ list[0] }}<span class="unit">人</span></div>
+            <div style="color: #B3F3F6;">在校生总数</div>
+          </div>
+        </div> -->
+        <!-- <div class="item">
+          <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/教师总数.png')" class="base-map-image"
+            mode="fill" />
+          <div class="item-text">
+            <div class="num">{{ list[1] }}<span class="unit">人</span></div>
+            <div style="color: #B3F3F6;">教师总数</div>
+          </div>
+        </div> -->
+        <div class="item" v-for="(item, index) in list">
+          <!-- <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/教职工总数.png')" class="base-map-image"
+            mode="fill" /> -->
+          <div class="item-text">
+            <div class="num">{{ item.total }}<span class="unit"></span></div>
+            <div style="color: #B3F3F6;">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">居民年龄统计</div>
+      <age-pie style="flex:1;" ref="agePie" />
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">居民流动比例</div>
+      <currentPie style="flex:1;" ref="currentPie"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1年人房车占比统计</div>
+      <personBar style="flex:1;" ref="personBar"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1月居民通行量分析</div>
+      <transitBar style="flex:1;" ref="transitBar"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1月高频事件排行榜</div>
+      <scoreLineBar style="flex:1;" ref="scoreLineBar"/>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import scoreLineBar from "./components/scoreLineBar";
+import transitBar from "./components/transitBar";
+import personBar from "./components/personBar";
+import AgePie from "./components/agePie";
+import currentPie from "./components/currentPie";
+import { getBaseInfo } from '@/api/ywts/shms/sq'
+
+export default {
+  name: 'SchoolPop',
+  // components: {SexPie, AgePie, StudentBar, TsLineBar, TeacherLine},
+  components: { AgePie, currentPie, personBar, transitBar, scoreLineBar },
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: [
+        {
+          name: '居民总数',
+          value: 'personnum',
+          total: '0',
+        },
+        {
+          name: '房屋总数',
+          value: 'buildingnum',
+          total: '0',
+        },
+        {
+          name: '车辆总数',
+          value: 'carnum',
+          total: '0',
+        },
+        {
+          name: '入住率',
+          value: 'inrate',
+          total: '0',
+        },
+      ],
+      name: '',
+      position: '',
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '社区信息')
+      this.name = item.name
+      getBaseInfo({ id: item.id }).then(res => {
+        const data = res.data.value[0]
+        this.position = data.location
+        this.list.forEach((item) => {
+          if (data[item.value]) {
+            item.total = data[item.value]
+          }
+        })
+      })
+      this.$refs.agePie.fetchData(item.id)
+      this.$refs.currentPie.fetchData(item.id)
+      this.$refs.personBar.fetchData(item.id)
+      this.$refs.transitBar.fetchData(item.id)
+      this.$refs.scoreLineBar.fetchData(item.id)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 220px;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 50%;
+    height: 35%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/agePie.vue b/src/pages/ywts/shms/sq/components/agePie.vue
new file mode 100644
index 0000000..9e41da8
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/agePie.vue
@@ -0,0 +1,185 @@
+<!--suppress ALL -->
+<template>
+  <div id="age-pie" class="container">
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {white} from "chalk";
+import { getAgeStatistics } from '@/api/ywts/shms/sq'
+export default {
+  name: 'AgePie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          // {name: '7岁以下',value: 70 },
+          // {name: '8岁',value: 20 },
+          // {name: '9岁',value: 20 },
+          // {name: '10岁',value: 20 },
+          // {name: '11岁及以上',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#ffa54a','#4ab228','#4AFFF7','#BAE7FF'],
+        legend: {
+          type: 'scroll',
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold',
+            fontSize: 14
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['30%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            // color: '#0270b2',
+            // fontSize: 14,
+            // color: '#0270b2',
+            // fontSize: 14,
+            fontSize: 14,
+            fontWeight: 'bold',
+            position: 'outside',
+            formatter: '{name|{b}}:{value|{c}}',
+            distanceToLabelLine: 2,
+            rich: {}
+          },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>人数：{c}人<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      },
+      myChart: null
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    // this.myChart = echarts.init(document.getElementById('age-pie'))
+    this.height = document.getElementById('age-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('age-pie').clientWidth - 10 + 'px'
+    // console.log(this.height, this.width)
+  },
+  methods: {
+    fetchData(id){
+      getAgeStatistics({id}).then(res => {
+        console.log(res.data, '社区年龄')
+        if(res.code === 200) {
+          const data = res.data.value
+          this.chartData.rows = data.map(item => {
+            return {
+              name: item.age,
+              value: item.num
+            }
+          })
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/currentPie.vue b/src/pages/ywts/shms/sq/components/currentPie.vue
new file mode 100644
index 0000000..c7dfe20
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/currentPie.vue
@@ -0,0 +1,178 @@
+<!--suppress ALL -->
+<template>
+  <div id="sex-pie" class="container">
+    <ve-ring :style='{ "height": height, "width": width }' :width='width' :height='height' :judge-width="true"
+      :data="chartData" :extend="extend" :settings="chartSettings" />
+  </div>
+</template>
+
+<script>
+// import {deviceStatus, statisticsBuilding} from '@/api/pop'
+// import { getDoorAreaTree } from '@/api/system/area'
+import { white } from "chalk";
+import { getCurrentRatio } from '@/api/ywts/shms/sq'
+export default {
+  name: 'CurrentPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          // {name: '男',value: 70 },
+          // {name: '女',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF', '#4AFFF7', '#BAE7FF'],
+        legend: {
+          show: false,
+          top: '0%',
+          left: 'center',
+          textStyle: {
+            color: white,
+            fontWeight: 'bold',
+            fontSize: 18
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['0%', '60%'],
+          center: ['50%', '50%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            // color: '#0270b2',
+            // fontSize: 14,
+            fontSize: 18,
+            fontWeight: 'bold',
+            position: 'outside',
+            formatter: '{name|{b}}:{value|{c}}',
+            distanceToLabelLine: 2,
+            rich: {}
+          },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: {
+          trigger: 'item', formatter: '{b}<br/>人数：{c}人<br/>占比：{d}%',
+          fontSize: 20
+        }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('sex-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('sex-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    fetchData(id) {
+      getCurrentRatio({ id }).then(res => {
+        console.log(res.data, '流动比例')
+        if (res.code === 200) {
+          const data = res.data.value
+          this.chartData.rows = data.map(item => {
+            return {
+              name: item.name,
+              value: item.num
+            }
+          })
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .round {
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+
+.circle {
+  position: absolute;
+  top: 76px;
+  left: 107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {
+  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute; //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/personBar.vue b/src/pages/ywts/shms/sq/components/personBar.vue
new file mode 100644
index 0000000..b065487
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/personBar.vue
@@ -0,0 +1,193 @@
+<template>
+  <div id="person-bar2" class="container"/>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { getPersonCarRatio } from '@/api/ywts/shms/sq';
+
+export default {
+  name: 'PersonBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['人', '房', '车']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '人',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }, {
+            name: '房',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#4ab228' }
+              ])
+            }
+          },
+          {
+            name: '车',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('person-bar2'))
+    this.height = document.getElementById('person-bar2').clientHeight - 10 + 'px'
+    this.width = document.getElementById('person-bar2').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      if(!document.getElementById('person-bar2')) {
+        return
+      }
+      that.reload()
+    })
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('person-bar2').clientHeight - 10 + 'px'
+      this.width = document.getElementById('person-bar2').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData(id) {
+      getPersonCarRatio({id}).then(response => {
+        console.log(response.data, '人房车')
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.value.map(item => item.people)
+          this.extend.series[1].data = response.data.value.map(item => item.building)
+          this.extend.series[2].data = response.data.value.map(item => item.car)
+          this.extend.xAxis.data = response.data.value.map(item => item.month)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+      // this.extend.series[0].data = [5154,4545,2455,7212]
+      // this.extend.series[1].data = [554,545,455,722]
+      // this.extend.xAxis.data = ['20岁以下', '20-30岁', '30-40岁', '40岁以上' ]
+      // this.myChart.setOption(this.extend, true)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/pages/ywts/shms/sq/components/scoreLineBar.vue b/src/pages/ywts/shms/sq/components/scoreLineBar.vue
new file mode 100644
index 0000000..1551e69
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/scoreLineBar.vue
@@ -0,0 +1,189 @@
+<template>
+  <div id="score-linebar" className="container"/>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { getCaseRank } from '@/api/ywts/shms/sq'
+export default {
+  name: 'ScoreLineBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: {date: '时间'},
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['得分', '环比']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '数量',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          // {
+          //   name: '环比',
+          //   position: 'right',
+          //   type: 'value',
+          //   axisLine: {
+          //     lineStyle: {
+          //       color: '#cce9ff'
+          //     }
+          //   },
+          //   axisLabel: {
+          //     color: '#cce9ff'
+          //   }
+          // }
+        ],
+        series: [
+          {
+            name: '数量',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {offset: 1, color: 'rgba(10,25,124,0.0)'},
+                {offset: 0.3, color: 'rgba(0,253,232,0.8)'},
+                {offset: 0, color: 'rgba(0,178,172,0.8)'}
+              ])
+            }
+          },
+          // {
+          //   name: '环比',
+          //   yAxisIndex: 1,
+          //   type: 'line',
+          //   symbol: 'circle',
+          //   symbolSize: 6,
+          //   color: 'rgba(255,190,68,1)',
+          //   areaStyle: {
+          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //       {
+          //         offset: 0.5,
+          //         color: 'rgba(255,190,68,0.7)',
+          //       },
+          //       {
+          //         offset: 1,
+          //         color: 'rgba(10,25,124,0.2)'
+          //       }
+          //     ])
+          //   },
+          //   emphasis: {
+          //     focus: 'series'
+          //   },
+          //   label: {
+          //     show: true,
+          //     position: 'insideBottom'
+          //   }
+          // }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('score-linebar'))
+    this.height = document.getElementById('score-linebar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('score-linebar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function () {
+      if(!document.getElementById('score-linebar')) {
+        return
+      }
+      that.reload()
+    })
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('score-linebar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('score-linebar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData(id) {
+      getCaseRank({id}).then(response => {
+        console.log(response.data, '111111排行榜')
+        if (response.code === 200) {
+          response.data.value = response.data.value.sort((a,b) => Number(b.value) - Number(a.value))
+          this.extend.series[0].data = response.data.value.map(item => item.value)
+          // this.extend.series[1].data = response.data.value.map(item => item.rate.replace('%',''))
+          this.extend.xAxis.data = response.data.value.map(item => item.name)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+      // this.extend.series[0].data = [84, 85, 85, 81, 85, 85, 72]
+      // this.extend.series[1].data = [1, 0.5, 1, 1.5, 1, 1.8, 0.9]
+      // this.extend.xAxis.data = ['1', '2', '3', '4', '5', '6', '7']
+      // this.myChart.setOption(this.extend, true)
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>
+
diff --git a/src/pages/ywts/shms/sq/components/transitBar.vue b/src/pages/ywts/shms/sq/components/transitBar.vue
new file mode 100644
index 0000000..c23b4ba
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/transitBar.vue
@@ -0,0 +1,173 @@
+<template>
+  <div id="person-bar1" class="container"/>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { getTransitrRatio } from '@/api/ywts/shms/sq';
+
+export default {
+  name: 'PersonBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['进', '出']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '进',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }, {
+            name: '出',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#4ab228' }
+              ])
+            }
+          },
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('person-bar1'))
+    this.height = document.getElementById('person-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('person-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      if(!document.getElementById('person-bar1')) {
+        return
+      }
+      that.reload()
+    })
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('person-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('person-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData(id) {
+      getTransitrRatio({id}).then(response => {
+        console.log(response.data, '通行量分析')
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.value.map(item => item.in)
+          this.extend.series[1].data = response.data.value.map(item => item.out)
+          this.extend.xAxis.data = response.data.value.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+      // this.extend.series[0].data = [5154,4545,2455,7212]
+      // this.extend.series[1].data = [554,545,455,722]
+      // this.extend.xAxis.data = ['20岁以下', '20-30岁', '30-40岁', '40岁以上' ]
+      // this.myChart.setOption(this.extend, true)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+

diff --git a/src/api/ywts/shms/sq.js b/src/api/ywts/shms/sq.js
new file mode 100644
index 0000000..04a5447
--- /dev/null
+++ b/src/api/ywts/shms/sq.js
@@ -0,0 +1,123 @@
+/**
+ * 社区接口
+ */
+import request from '@/utils/request'
+
+// 社区点位列表
+export function getCommunityList() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwlb',
+    method: 'post',
+  })
+}
+
+// 人员热力图
+export function getHeat() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqyyrlt',
+    method: 'post',
+  })
+}
+
+// 设备点位
+export function getDevice() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sbdwlb',
+    method: 'post',
+    params: {
+      type: '',
+      keywords: ''
+    }
+  })
+}
+
+// 社区车辆
+export function getCar() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqbyl',
+    method: 'post',
+  })
+}
+
+// 事件点位列表
+export function getCase(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sjdwlb',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+
+// 事件详情
+export function getCaseList(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/zjlbfy',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+// 获取社区基本信息
+export function getBaseInfo(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwxq',
+    method: 'post',
+    params:{
+      ...data
+    },
+    // data
+  })
+}
+// 居民年龄统计
+export function getAgeStatistics(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmnltj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 居民流动比例
+export function getCurrentRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmldbl',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1年人房车占比统计
+export function getPersonCarRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/rfczbtj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月居民通行量分析
+export function getTransitrRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmtxlfx',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月高频事件排行榜
+export function getCaseRank(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/gpsjphb',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
diff --git a/src/pages/ywts/shms/jy/index.vue b/src/pages/ywts/shms/jy/index.vue
index 1293f28..1c1170e 100644
--- a/src/pages/ywts/shms/jy/index.vue
+++ b/src/pages/ywts/shms/jy/index.vue
@@ -6,7 +6,7 @@
       <common-btn id="personBtn" :select="selectIndex === 'personBtn'" :bg="personBg" :bg-hover="personHover" width="5"
         height="5" text-hover="师生热力" @click="btnClick" />
       <layer-manager-mix title="学校设备" :icons="icons" :menu-tab="menuTab" :menus="menus"
-        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" />
+        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" @menuClick="menuClick" />
       <keyword-manager :resultList="keywordList" :select="selectIndex === 'keywordBtn'" @handleKeyword="handleKeyword"
         @click="selectIndex = 'keywordBtn'" @localPoint="localPoint" />
     </div>
@@ -298,6 +298,18 @@
         })
       })
     },
+      menuClick(e) {
+      clearResetMap()
+      this.markerList = this.markerBakList.filter(item => item.type === e.type)
+      this.markerList.forEach((item) => {
+        AddLabelPoint(
+          item.id,
+          `${item.name}`,
+          item.type === '1' ? this.videoIcon : this.controlIcon,
+          [item.lon, item.lat, 0], 'yl-dev', item,
+          this.clickDevice)
+      })
+    },
     // 设备点位点击
     clickDevice(eventArg) {
       const item = eventArg._data.data
diff --git a/src/pages/ywts/shms/sq/carPop.vue b/src/pages/ywts/shms/sq/carPop.vue
new file mode 100644
index 0000000..b1fe4c3
--- /dev/null
+++ b/src/pages/ywts/shms/sq/carPop.vue
@@ -0,0 +1,275 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.showType] }">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="list-down" style="width: 100%;margin: 0 auto;">
+      <div class="list-item">
+        <div style="width:100%;">
+          <div style="width: 100%">
+            <i class="item-line one-line" style="width: 100%;"><span>名称: {{
+              gdInfo.name }}</span></i>
+            <i class="item-line one-line" style="width: 100%;" :title="gdInfo.location"><span>位置: {{
+              gdInfo.location }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>车辆数量: {{ gdInfo.carNum
+                }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>停车位: {{ gdInfo.parkSpaceNum }}</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
+      defaultPhoto: require('@/assets/images/global_images/photo_error.png'),
+      statusColor: {
+        1: '#a1a1a1',
+        2: '#f8e31a',
+        3: '#5ab1fc',
+        4: '#f89835',
+        5: '#3def83',
+      },
+      urgencyColor: {
+        'C': '#2f8d00',
+        'B': '#c4ad00',
+        'A': '#8d0000'
+      },
+      heightDict: {
+        normal: '130px',
+        video: '300px'
+      }
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '弹窗内容')
+      if (!item.lon || !item.lat) { return }
+      showPositin(item.lon, item.lat)
+      item.showType = 'normal'
+      // 弹窗位置
+      if (window.localStorage.getItem('mousePosition')) {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      else {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      this.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.children-item {
+  width: 96% !important;
+  margin: 10px auto !important;
+  color: #fff !important;
+  // border: 1px solid #fff;
+  border-radius: 6px;
+  padding: 10px;
+  box-sizing: border-box;
+
+}
+
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 160px;
+  width: 27rem;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 25%;
+    height: 32%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+
+.list-down {
+  // margin-top: 10px;
+  // overflow-y: scroll;
+  width: 100%;
+  // height: calc(100% - 6rem);
+  padding: 0px 10px;
+}
+
+.list-item {
+  width: calc(100% - 35px);
+  // height: 12rem;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  padding: 0.8rem 10px;
+  margin: 0.2rem 0rem;
+  letter-spacing: 2px;
+  cursor: pointer;
+  background-size: 100% 100% !important;
+  color: white;
+  border-top: 2px solid #0494f3;
+  border-radius: 10px;
+}
+
+.list-item:hover {
+  background-size: cover !important;
+  background: url('../../../../assets/images/right/选中.png') !important;
+  background-size: 100% 100% !important;
+}
+
+.item-title {
+  width: 90%;
+  text-align: left;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+
+.item-line {
+  display: flex;
+  font-size: 1.2rem;
+  color: #aed2f3;
+  padding-left: 20px;
+  line-height: 1.8rem;
+  width: 95%;
+  word-break: break-all;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /* 设置最大行数 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.colorbox-text {
+  background-color: #0a88fc;
+  border-radius: 10px;
+  color: white;
+  font-size: 1rem;
+  padding: 0rem 0.4rem;
+  margin-left: 5px;
+  text-align: center;
+  width: 5rem;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+
+.one-line {
+  display: block !important;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/communityPop.vue b/src/pages/ywts/shms/sq/communityPop.vue
new file mode 100644
index 0000000..eb6bf07
--- /dev/null
+++ b/src/pages/ywts/shms/sq/communityPop.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="bottom">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="block" style="padding: 10px">
+      <div style="display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center">
+        <div class="num" style="text-align: left;width:100%;font-size: 20px;font-weight: bold">{{ name }}</div>
+        <div class="num" style="color: #B3F3F6;width:100%;word-break: break-all;text-align: left;">位置：{{ position
+          }}</span></div>
+        <!-- <div class="item" style="width: 51%">
+          <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/在校生总数.png')" class="base-map-image"
+            mode="fill" />
+          <div class="item-text">
+            <div class="num">{{ list[0] }}<span class="unit">人</span></div>
+            <div style="color: #B3F3F6;">在校生总数</div>
+          </div>
+        </div> -->
+        <!-- <div class="item">
+          <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/教师总数.png')" class="base-map-image"
+            mode="fill" />
+          <div class="item-text">
+            <div class="num">{{ list[1] }}<span class="unit">人</span></div>
+            <div style="color: #B3F3F6;">教师总数</div>
+          </div>
+        </div> -->
+        <div class="item" v-for="(item, index) in list">
+          <!-- <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/教职工总数.png')" class="base-map-image"
+            mode="fill" /> -->
+          <div class="item-text">
+            <div class="num">{{ item.total }}<span class="unit"></span></div>
+            <div style="color: #B3F3F6;">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">居民年龄统计</div>
+      <age-pie style="flex:1;" ref="agePie" />
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">居民流动比例</div>
+      <currentPie style="flex:1;" ref="currentPie"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1年人房车占比统计</div>
+      <personBar style="flex:1;" ref="personBar"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1月居民通行量分析</div>
+      <transitBar style="flex:1;" ref="transitBar"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1月高频事件排行榜</div>
+      <scoreLineBar style="flex:1;" ref="scoreLineBar"/>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import scoreLineBar from "./components/scoreLineBar";
+import transitBar from "./components/transitBar";
+import personBar from "./components/personBar";
+import AgePie from "./components/agePie";
+import currentPie from "./components/currentPie";
+import { getBaseInfo } from '@/api/ywts/shms/sq'
+
+export default {
+  name: 'SchoolPop',
+  // components: {SexPie, AgePie, StudentBar, TsLineBar, TeacherLine},
+  components: { AgePie, currentPie, personBar, transitBar, scoreLineBar },
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: [
+        {
+          name: '居民总数',
+          value: 'personnum',
+          total: '0',
+        },
+        {
+          name: '房屋总数',
+          value: 'buildingnum',
+          total: '0',
+        },
+        {
+          name: '车辆总数',
+          value: 'carnum',
+          total: '0',
+        },
+        {
+          name: '入住率',
+          value: 'inrate',
+          total: '0',
+        },
+      ],
+      name: '',
+      position: '',
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '社区信息')
+      this.name = item.name
+      getBaseInfo({ id: item.id }).then(res => {
+        const data = res.data.value[0]
+        this.position = data.location
+        this.list.forEach((item) => {
+          if (data[item.value]) {
+            item.total = data[item.value]
+          }
+        })
+      })
+      this.$refs.agePie.fetchData(item.id)
+      this.$refs.currentPie.fetchData(item.id)
+      this.$refs.personBar.fetchData(item.id)
+      this.$refs.transitBar.fetchData(item.id)
+      this.$refs.scoreLineBar.fetchData(item.id)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 220px;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 50%;
+    height: 35%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/agePie.vue b/src/pages/ywts/shms/sq/components/agePie.vue
new file mode 100644
index 0000000..9e41da8
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/agePie.vue
@@ -0,0 +1,185 @@
+<!--suppress ALL -->
+<template>
+  <div id="age-pie" class="container">
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {white} from "chalk";
+import { getAgeStatistics } from '@/api/ywts/shms/sq'
+export default {
+  name: 'AgePie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          // {name: '7岁以下',value: 70 },
+          // {name: '8岁',value: 20 },
+          // {name: '9岁',value: 20 },
+          // {name: '10岁',value: 20 },
+          // {name: '11岁及以上',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#ffa54a','#4ab228','#4AFFF7','#BAE7FF'],
+        legend: {
+          type: 'scroll',
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold',
+            fontSize: 14
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['30%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            // color: '#0270b2',
+            // fontSize: 14,
+            // color: '#0270b2',
+            // fontSize: 14,
+            fontSize: 14,
+            fontWeight: 'bold',
+            position: 'outside',
+            formatter: '{name|{b}}:{value|{c}}',
+            distanceToLabelLine: 2,
+            rich: {}
+          },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>人数：{c}人<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      },
+      myChart: null
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    // this.myChart = echarts.init(document.getElementById('age-pie'))
+    this.height = document.getElementById('age-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('age-pie').clientWidth - 10 + 'px'
+    // console.log(this.height, this.width)
+  },
+  methods: {
+    fetchData(id){
+      getAgeStatistics({id}).then(res => {
+        console.log(res.data, '社区年龄')
+        if(res.code === 200) {
+          const data = res.data.value
+          this.chartData.rows = data.map(item => {
+            return {
+              name: item.age,
+              value: item.num
+            }
+          })
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/currentPie.vue b/src/pages/ywts/shms/sq/components/currentPie.vue
new file mode 100644
index 0000000..c7dfe20
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/currentPie.vue
@@ -0,0 +1,178 @@
+<!--suppress ALL -->
+<template>
+  <div id="sex-pie" class="container">
+    <ve-ring :style='{ "height": height, "width": width }' :width='width' :height='height' :judge-width="true"
+      :data="chartData" :extend="extend" :settings="chartSettings" />
+  </div>
+</template>
+
+<script>
+// import {deviceStatus, statisticsBuilding} from '@/api/pop'
+// import { getDoorAreaTree } from '@/api/system/area'
+import { white } from "chalk";
+import { getCurrentRatio } from '@/api/ywts/shms/sq'
+export default {
+  name: 'CurrentPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          // {name: '男',value: 70 },
+          // {name: '女',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF', '#4AFFF7', '#BAE7FF'],
+        legend: {
+          show: false,
+          top: '0%',
+          left: 'center',
+          textStyle: {
+            color: white,
+            fontWeight: 'bold',
+            fontSize: 18
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['0%', '60%'],
+          center: ['50%', '50%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            // color: '#0270b2',
+            // fontSize: 14,
+            fontSize: 18,
+            fontWeight: 'bold',
+            position: 'outside',
+            formatter: '{name|{b}}:{value|{c}}',
+            distanceToLabelLine: 2,
+            rich: {}
+          },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: {
+          trigger: 'item', formatter: '{b}<br/>人数：{c}人<br/>占比：{d}%',
+          fontSize: 20
+        }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('sex-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('sex-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    fetchData(id) {
+      getCurrentRatio({ id }).then(res => {
+        console.log(res.data, '流动比例')
+        if (res.code === 200) {
+          const data = res.data.value
+          this.chartData.rows = data.map(item => {
+            return {
+              name: item.name,
+              value: item.num
+            }
+          })
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .round {
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+
+.circle {
+  position: absolute;
+  top: 76px;
+  left: 107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {
+  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute; //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/personBar.vue b/src/pages/ywts/shms/sq/components/personBar.vue
new file mode 100644
index 0000000..b065487
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/personBar.vue
@@ -0,0 +1,193 @@
+<template>
+  <div id="person-bar2" class="container"/>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { getPersonCarRatio } from '@/api/ywts/shms/sq';
+
+export default {
+  name: 'PersonBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['人', '房', '车']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '人',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }, {
+            name: '房',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#4ab228' }
+              ])
+            }
+          },
+          {
+            name: '车',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('person-bar2'))
+    this.height = document.getElementById('person-bar2').clientHeight - 10 + 'px'
+    this.width = document.getElementById('person-bar2').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      if(!document.getElementById('person-bar2')) {
+        return
+      }
+      that.reload()
+    })
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('person-bar2').clientHeight - 10 + 'px'
+      this.width = document.getElementById('person-bar2').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData(id) {
+      getPersonCarRatio({id}).then(response => {
+        console.log(response.data, '人房车')
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.value.map(item => item.people)
+          this.extend.series[1].data = response.data.value.map(item => item.building)
+          this.extend.series[2].data = response.data.value.map(item => item.car)
+          this.extend.xAxis.data = response.data.value.map(item => item.month)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+      // this.extend.series[0].data = [5154,4545,2455,7212]
+      // this.extend.series[1].data = [554,545,455,722]
+      // this.extend.xAxis.data = ['20岁以下', '20-30岁', '30-40岁', '40岁以上' ]
+      // this.myChart.setOption(this.extend, true)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/pages/ywts/shms/sq/components/scoreLineBar.vue b/src/pages/ywts/shms/sq/components/scoreLineBar.vue
new file mode 100644
index 0000000..1551e69
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/scoreLineBar.vue
@@ -0,0 +1,189 @@
+<template>
+  <div id="score-linebar" className="container"/>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { getCaseRank } from '@/api/ywts/shms/sq'
+export default {
+  name: 'ScoreLineBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: {date: '时间'},
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['得分', '环比']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '数量',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          // {
+          //   name: '环比',
+          //   position: 'right',
+          //   type: 'value',
+          //   axisLine: {
+          //     lineStyle: {
+          //       color: '#cce9ff'
+          //     }
+          //   },
+          //   axisLabel: {
+          //     color: '#cce9ff'
+          //   }
+          // }
+        ],
+        series: [
+          {
+            name: '数量',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {offset: 1, color: 'rgba(10,25,124,0.0)'},
+                {offset: 0.3, color: 'rgba(0,253,232,0.8)'},
+                {offset: 0, color: 'rgba(0,178,172,0.8)'}
+              ])
+            }
+          },
+          // {
+          //   name: '环比',
+          //   yAxisIndex: 1,
+          //   type: 'line',
+          //   symbol: 'circle',
+          //   symbolSize: 6,
+          //   color: 'rgba(255,190,68,1)',
+          //   areaStyle: {
+          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //       {
+          //         offset: 0.5,
+          //         color: 'rgba(255,190,68,0.7)',
+          //       },
+          //       {
+          //         offset: 1,
+          //         color: 'rgba(10,25,124,0.2)'
+          //       }
+          //     ])
+          //   },
+          //   emphasis: {
+          //     focus: 'series'
+          //   },
+          //   label: {
+          //     show: true,
+          //     position: 'insideBottom'
+          //   }
+          // }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('score-linebar'))
+    this.height = document.getElementById('score-linebar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('score-linebar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function () {
+      if(!document.getElementById('score-linebar')) {
+        return
+      }
+      that.reload()
+    })
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('score-linebar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('score-linebar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData(id) {
+      getCaseRank({id}).then(response => {
+        console.log(response.data, '111111排行榜')
+        if (response.code === 200) {
+          response.data.value = response.data.value.sort((a,b) => Number(b.value) - Number(a.value))
+          this.extend.series[0].data = response.data.value.map(item => item.value)
+          // this.extend.series[1].data = response.data.value.map(item => item.rate.replace('%',''))
+          this.extend.xAxis.data = response.data.value.map(item => item.name)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+      // this.extend.series[0].data = [84, 85, 85, 81, 85, 85, 72]
+      // this.extend.series[1].data = [1, 0.5, 1, 1.5, 1, 1.8, 0.9]
+      // this.extend.xAxis.data = ['1', '2', '3', '4', '5', '6', '7']
+      // this.myChart.setOption(this.extend, true)
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>
+
diff --git a/src/pages/ywts/shms/sq/components/transitBar.vue b/src/pages/ywts/shms/sq/components/transitBar.vue
new file mode 100644
index 0000000..c23b4ba
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/transitBar.vue
@@ -0,0 +1,173 @@
+<template>
+  <div id="person-bar1" class="container"/>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { getTransitrRatio } from '@/api/ywts/shms/sq';
+
+export default {
+  name: 'PersonBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['进', '出']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '进',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }, {
+            name: '出',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#4ab228' }
+              ])
+            }
+          },
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('person-bar1'))
+    this.height = document.getElementById('person-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('person-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      if(!document.getElementById('person-bar1')) {
+        return
+      }
+      that.reload()
+    })
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('person-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('person-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData(id) {
+      getTransitrRatio({id}).then(response => {
+        console.log(response.data, '通行量分析')
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.value.map(item => item.in)
+          this.extend.series[1].data = response.data.value.map(item => item.out)
+          this.extend.xAxis.data = response.data.value.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+      // this.extend.series[0].data = [5154,4545,2455,7212]
+      // this.extend.series[1].data = [554,545,455,722]
+      // this.extend.xAxis.data = ['20岁以下', '20-30岁', '30-40岁', '40岁以上' ]
+      // this.myChart.setOption(this.extend, true)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/pages/ywts/shms/sq/devicePop.vue b/src/pages/ywts/shms/sq/devicePop.vue
new file mode 100644
index 0000000..2c44979
--- /dev/null
+++ b/src/pages/ywts/shms/sq/devicePop.vue
@@ -0,0 +1,281 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.showType] }">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="list-down" style="width: 100%;margin: 0 auto;">
+      <div class="list-item">
+        <div style="width:100%;">
+          <div style="width: 100%">
+            <i class="item-line one-line" style="width: 100%;"><span>设备名称: {{
+              gdInfo.name }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>设备类型: {{
+              gdInfo.typename }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>设备状态: {{
+              gdInfo.statusName }}</span></i>
+            <i class="item-line one-line" style="width: 100%;" :title="gdInfo.location"><span>设备位置: {{
+              gdInfo.location }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>时间: {{ gdInfo.time
+            }}</span></i>
+            <i class="item-line one-line" v-if="gdInfo.type === '2'" style="width: 100%;"><span>进/出人口数: {{ gdInfo.in
+                }}/{{ gdInfo.out }}</span></i>
+            <i class="item-line one-line" v-if="gdInfo.type === '1'" style="width: 100%;"><span>是否赋能: 否</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
+      defaultPhoto: require('@/assets/images/global_images/photo_error.png'),
+      statusColor: {
+        1: '#a1a1a1',
+        2: '#f8e31a',
+        3: '#5ab1fc',
+        4: '#f89835',
+        5: '#3def83',
+      },
+      urgencyColor: {
+        'C': '#2f8d00',
+        'B': '#c4ad00',
+        'A': '#8d0000'
+      },
+      heightDict: {
+        normal: '170px',
+        video: '300px'
+      }
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '弹窗内容')
+      if (!item.lon || !item.lat) { return }
+      showPositin(item.lon, item.lat)
+      item.showType = 'normal'
+      // 弹窗位置
+      if (window.localStorage.getItem('mousePosition')) {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      else {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      this.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.children-item {
+  width: 96% !important;
+  margin: 10px auto !important;
+  color: #fff !important;
+  // border: 1px solid #fff;
+  border-radius: 6px;
+  padding: 10px;
+  box-sizing: border-box;
+
+}
+
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 160px;
+  width: 27rem;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 25%;
+    height: 32%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+
+.list-down {
+  // margin-top: 10px;
+  // overflow-y: scroll;
+  width: 100%;
+  // height: calc(100% - 6rem);
+  padding: 0px 10px;
+}
+
+.list-item {
+  width: calc(100% - 35px);
+  // height: 12rem;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  padding: 0.8rem 10px;
+  margin: 0.2rem 0rem;
+  letter-spacing: 2px;
+  cursor: pointer;
+  background-size: 100% 100% !important;
+  color: white;
+  border-top: 2px solid #0494f3;
+  border-radius: 10px;
+}
+
+.list-item:hover {
+  background-size: cover !important;
+  background: url('../../../../assets/images/right/选中.png') !important;
+  background-size: 100% 100% !important;
+}
+
+.item-title {
+  width: 90%;
+  text-align: left;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+
+.item-line {
+  display: flex;
+  font-size: 1.2rem;
+  color: #aed2f3;
+  padding-left: 20px;
+  line-height: 1.8rem;
+  width: 95%;
+  word-break: break-all;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /* 设置最大行数 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.colorbox-text {
+  background-color: #0a88fc;
+  border-radius: 10px;
+  color: white;
+  font-size: 1rem;
+  padding: 0rem 0.4rem;
+  margin-left: 5px;
+  text-align: center;
+  width: 5rem;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+
+.one-line {
+  display: block !important;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+</style>

diff --git a/src/api/ywts/shms/sq.js b/src/api/ywts/shms/sq.js
new file mode 100644
index 0000000..04a5447
--- /dev/null
+++ b/src/api/ywts/shms/sq.js
@@ -0,0 +1,123 @@
+/**
+ * 社区接口
+ */
+import request from '@/utils/request'
+
+// 社区点位列表
+export function getCommunityList() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwlb',
+    method: 'post',
+  })
+}
+
+// 人员热力图
+export function getHeat() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqyyrlt',
+    method: 'post',
+  })
+}
+
+// 设备点位
+export function getDevice() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sbdwlb',
+    method: 'post',
+    params: {
+      type: '',
+      keywords: ''
+    }
+  })
+}
+
+// 社区车辆
+export function getCar() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqbyl',
+    method: 'post',
+  })
+}
+
+// 事件点位列表
+export function getCase(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sjdwlb',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+
+// 事件详情
+export function getCaseList(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/zjlbfy',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+// 获取社区基本信息
+export function getBaseInfo(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwxq',
+    method: 'post',
+    params:{
+      ...data
+    },
+    // data
+  })
+}
+// 居民年龄统计
+export function getAgeStatistics(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmnltj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 居民流动比例
+export function getCurrentRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmldbl',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1年人房车占比统计
+export function getPersonCarRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/rfczbtj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月居民通行量分析
+export function getTransitrRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmtxlfx',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月高频事件排行榜
+export function getCaseRank(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/gpsjphb',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
diff --git a/src/pages/ywts/shms/jy/index.vue b/src/pages/ywts/shms/jy/index.vue
index 1293f28..1c1170e 100644
--- a/src/pages/ywts/shms/jy/index.vue
+++ b/src/pages/ywts/shms/jy/index.vue
@@ -6,7 +6,7 @@
       <common-btn id="personBtn" :select="selectIndex === 'personBtn'" :bg="personBg" :bg-hover="personHover" width="5"
         height="5" text-hover="师生热力" @click="btnClick" />
       <layer-manager-mix title="学校设备" :icons="icons" :menu-tab="menuTab" :menus="menus"
-        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" />
+        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" @menuClick="menuClick" />
       <keyword-manager :resultList="keywordList" :select="selectIndex === 'keywordBtn'" @handleKeyword="handleKeyword"
         @click="selectIndex = 'keywordBtn'" @localPoint="localPoint" />
     </div>
@@ -298,6 +298,18 @@
         })
       })
     },
+      menuClick(e) {
+      clearResetMap()
+      this.markerList = this.markerBakList.filter(item => item.type === e.type)
+      this.markerList.forEach((item) => {
+        AddLabelPoint(
+          item.id,
+          `${item.name}`,
+          item.type === '1' ? this.videoIcon : this.controlIcon,
+          [item.lon, item.lat, 0], 'yl-dev', item,
+          this.clickDevice)
+      })
+    },
     // 设备点位点击
     clickDevice(eventArg) {
       const item = eventArg._data.data
diff --git a/src/pages/ywts/shms/sq/carPop.vue b/src/pages/ywts/shms/sq/carPop.vue
new file mode 100644
index 0000000..b1fe4c3
--- /dev/null
+++ b/src/pages/ywts/shms/sq/carPop.vue
@@ -0,0 +1,275 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.showType] }">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="list-down" style="width: 100%;margin: 0 auto;">
+      <div class="list-item">
+        <div style="width:100%;">
+          <div style="width: 100%">
+            <i class="item-line one-line" style="width: 100%;"><span>名称: {{
+              gdInfo.name }}</span></i>
+            <i class="item-line one-line" style="width: 100%;" :title="gdInfo.location"><span>位置: {{
+              gdInfo.location }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>车辆数量: {{ gdInfo.carNum
+                }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>停车位: {{ gdInfo.parkSpaceNum }}</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
+      defaultPhoto: require('@/assets/images/global_images/photo_error.png'),
+      statusColor: {
+        1: '#a1a1a1',
+        2: '#f8e31a',
+        3: '#5ab1fc',
+        4: '#f89835',
+        5: '#3def83',
+      },
+      urgencyColor: {
+        'C': '#2f8d00',
+        'B': '#c4ad00',
+        'A': '#8d0000'
+      },
+      heightDict: {
+        normal: '130px',
+        video: '300px'
+      }
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '弹窗内容')
+      if (!item.lon || !item.lat) { return }
+      showPositin(item.lon, item.lat)
+      item.showType = 'normal'
+      // 弹窗位置
+      if (window.localStorage.getItem('mousePosition')) {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      else {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      this.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.children-item {
+  width: 96% !important;
+  margin: 10px auto !important;
+  color: #fff !important;
+  // border: 1px solid #fff;
+  border-radius: 6px;
+  padding: 10px;
+  box-sizing: border-box;
+
+}
+
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 160px;
+  width: 27rem;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 25%;
+    height: 32%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+
+.list-down {
+  // margin-top: 10px;
+  // overflow-y: scroll;
+  width: 100%;
+  // height: calc(100% - 6rem);
+  padding: 0px 10px;
+}
+
+.list-item {
+  width: calc(100% - 35px);
+  // height: 12rem;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  padding: 0.8rem 10px;
+  margin: 0.2rem 0rem;
+  letter-spacing: 2px;
+  cursor: pointer;
+  background-size: 100% 100% !important;
+  color: white;
+  border-top: 2px solid #0494f3;
+  border-radius: 10px;
+}
+
+.list-item:hover {
+  background-size: cover !important;
+  background: url('../../../../assets/images/right/选中.png') !important;
+  background-size: 100% 100% !important;
+}
+
+.item-title {
+  width: 90%;
+  text-align: left;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+
+.item-line {
+  display: flex;
+  font-size: 1.2rem;
+  color: #aed2f3;
+  padding-left: 20px;
+  line-height: 1.8rem;
+  width: 95%;
+  word-break: break-all;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /* 设置最大行数 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.colorbox-text {
+  background-color: #0a88fc;
+  border-radius: 10px;
+  color: white;
+  font-size: 1rem;
+  padding: 0rem 0.4rem;
+  margin-left: 5px;
+  text-align: center;
+  width: 5rem;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+
+.one-line {
+  display: block !important;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/communityPop.vue b/src/pages/ywts/shms/sq/communityPop.vue
new file mode 100644
index 0000000..eb6bf07
--- /dev/null
+++ b/src/pages/ywts/shms/sq/communityPop.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="bottom">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="block" style="padding: 10px">
+      <div style="display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center">
+        <div class="num" style="text-align: left;width:100%;font-size: 20px;font-weight: bold">{{ name }}</div>
+        <div class="num" style="color: #B3F3F6;width:100%;word-break: break-all;text-align: left;">位置：{{ position
+          }}</span></div>
+        <!-- <div class="item" style="width: 51%">
+          <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/在校生总数.png')" class="base-map-image"
+            mode="fill" />
+          <div class="item-text">
+            <div class="num">{{ list[0] }}<span class="unit">人</span></div>
+            <div style="color: #B3F3F6;">在校生总数</div>
+          </div>
+        </div> -->
+        <!-- <div class="item">
+          <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/教师总数.png')" class="base-map-image"
+            mode="fill" />
+          <div class="item-text">
+            <div class="num">{{ list[1] }}<span class="unit">人</span></div>
+            <div style="color: #B3F3F6;">教师总数</div>
+          </div>
+        </div> -->
+        <div class="item" v-for="(item, index) in list">
+          <!-- <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/教职工总数.png')" class="base-map-image"
+            mode="fill" /> -->
+          <div class="item-text">
+            <div class="num">{{ item.total }}<span class="unit"></span></div>
+            <div style="color: #B3F3F6;">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">居民年龄统计</div>
+      <age-pie style="flex:1;" ref="agePie" />
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">居民流动比例</div>
+      <currentPie style="flex:1;" ref="currentPie"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1年人房车占比统计</div>
+      <personBar style="flex:1;" ref="personBar"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1月居民通行量分析</div>
+      <transitBar style="flex:1;" ref="transitBar"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1月高频事件排行榜</div>
+      <scoreLineBar style="flex:1;" ref="scoreLineBar"/>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import scoreLineBar from "./components/scoreLineBar";
+import transitBar from "./components/transitBar";
+import personBar from "./components/personBar";
+import AgePie from "./components/agePie";
+import currentPie from "./components/currentPie";
+import { getBaseInfo } from '@/api/ywts/shms/sq'
+
+export default {
+  name: 'SchoolPop',
+  // components: {SexPie, AgePie, StudentBar, TsLineBar, TeacherLine},
+  components: { AgePie, currentPie, personBar, transitBar, scoreLineBar },
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: [
+        {
+          name: '居民总数',
+          value: 'personnum',
+          total: '0',
+        },
+        {
+          name: '房屋总数',
+          value: 'buildingnum',
+          total: '0',
+        },
+        {
+          name: '车辆总数',
+          value: 'carnum',
+          total: '0',
+        },
+        {
+          name: '入住率',
+          value: 'inrate',
+          total: '0',
+        },
+      ],
+      name: '',
+      position: '',
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '社区信息')
+      this.name = item.name
+      getBaseInfo({ id: item.id }).then(res => {
+        const data = res.data.value[0]
+        this.position = data.location
+        this.list.forEach((item) => {
+          if (data[item.value]) {
+            item.total = data[item.value]
+          }
+        })
+      })
+      this.$refs.agePie.fetchData(item.id)
+      this.$refs.currentPie.fetchData(item.id)
+      this.$refs.personBar.fetchData(item.id)
+      this.$refs.transitBar.fetchData(item.id)
+      this.$refs.scoreLineBar.fetchData(item.id)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 220px;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 50%;
+    height: 35%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/agePie.vue b/src/pages/ywts/shms/sq/components/agePie.vue
new file mode 100644
index 0000000..9e41da8
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/agePie.vue
@@ -0,0 +1,185 @@
+<!--suppress ALL -->
+<template>
+  <div id="age-pie" class="container">
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {white} from "chalk";
+import { getAgeStatistics } from '@/api/ywts/shms/sq'
+export default {
+  name: 'AgePie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          // {name: '7岁以下',value: 70 },
+          // {name: '8岁',value: 20 },
+          // {name: '9岁',value: 20 },
+          // {name: '10岁',value: 20 },
+          // {name: '11岁及以上',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#ffa54a','#4ab228','#4AFFF7','#BAE7FF'],
+        legend: {
+          type: 'scroll',
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold',
+            fontSize: 14
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['30%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            // color: '#0270b2',
+            // fontSize: 14,
+            // color: '#0270b2',
+            // fontSize: 14,
+            fontSize: 14,
+            fontWeight: 'bold',
+            position: 'outside',
+            formatter: '{name|{b}}:{value|{c}}',
+            distanceToLabelLine: 2,
+            rich: {}
+          },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>人数：{c}人<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      },
+      myChart: null
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    // this.myChart = echarts.init(document.getElementById('age-pie'))
+    this.height = document.getElementById('age-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('age-pie').clientWidth - 10 + 'px'
+    // console.log(this.height, this.width)
+  },
+  methods: {
+    fetchData(id){
+      getAgeStatistics({id}).then(res => {
+        console.log(res.data, '社区年龄')
+        if(res.code === 200) {
+          const data = res.data.value
+          this.chartData.rows = data.map(item => {
+            return {
+              name: item.age,
+              value: item.num
+            }
+          })
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/currentPie.vue b/src/pages/ywts/shms/sq/components/currentPie.vue
new file mode 100644
index 0000000..c7dfe20
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/currentPie.vue
@@ -0,0 +1,178 @@
+<!--suppress ALL -->
+<template>
+  <div id="sex-pie" class="container">
+    <ve-ring :style='{ "height": height, "width": width }' :width='width' :height='height' :judge-width="true"
+      :data="chartData" :extend="extend" :settings="chartSettings" />
+  </div>
+</template>
+
+<script>
+// import {deviceStatus, statisticsBuilding} from '@/api/pop'
+// import { getDoorAreaTree } from '@/api/system/area'
+import { white } from "chalk";
+import { getCurrentRatio } from '@/api/ywts/shms/sq'
+export default {
+  name: 'CurrentPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          // {name: '男',value: 70 },
+          // {name: '女',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF', '#4AFFF7', '#BAE7FF'],
+        legend: {
+          show: false,
+          top: '0%',
+          left: 'center',
+          textStyle: {
+            color: white,
+            fontWeight: 'bold',
+            fontSize: 18
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['0%', '60%'],
+          center: ['50%', '50%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            // color: '#0270b2',
+            // fontSize: 14,
+            fontSize: 18,
+            fontWeight: 'bold',
+            position: 'outside',
+            formatter: '{name|{b}}:{value|{c}}',
+            distanceToLabelLine: 2,
+            rich: {}
+          },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: {
+          trigger: 'item', formatter: '{b}<br/>人数：{c}人<br/>占比：{d}%',
+          fontSize: 20
+        }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('sex-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('sex-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    fetchData(id) {
+      getCurrentRatio({ id }).then(res => {
+        console.log(res.data, '流动比例')
+        if (res.code === 200) {
+          const data = res.data.value
+          this.chartData.rows = data.map(item => {
+            return {
+              name: item.name,
+              value: item.num
+            }
+          })
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .round {
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+
+.circle {
+  position: absolute;
+  top: 76px;
+  left: 107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {
+  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute; //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/personBar.vue b/src/pages/ywts/shms/sq/components/personBar.vue
new file mode 100644
index 0000000..b065487
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/personBar.vue
@@ -0,0 +1,193 @@
+<template>
+  <div id="person-bar2" class="container"/>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { getPersonCarRatio } from '@/api/ywts/shms/sq';
+
+export default {
+  name: 'PersonBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['人', '房', '车']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '人',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }, {
+            name: '房',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#4ab228' }
+              ])
+            }
+          },
+          {
+            name: '车',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('person-bar2'))
+    this.height = document.getElementById('person-bar2').clientHeight - 10 + 'px'
+    this.width = document.getElementById('person-bar2').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      if(!document.getElementById('person-bar2')) {
+        return
+      }
+      that.reload()
+    })
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('person-bar2').clientHeight - 10 + 'px'
+      this.width = document.getElementById('person-bar2').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData(id) {
+      getPersonCarRatio({id}).then(response => {
+        console.log(response.data, '人房车')
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.value.map(item => item.people)
+          this.extend.series[1].data = response.data.value.map(item => item.building)
+          this.extend.series[2].data = response.data.value.map(item => item.car)
+          this.extend.xAxis.data = response.data.value.map(item => item.month)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+      // this.extend.series[0].data = [5154,4545,2455,7212]
+      // this.extend.series[1].data = [554,545,455,722]
+      // this.extend.xAxis.data = ['20岁以下', '20-30岁', '30-40岁', '40岁以上' ]
+      // this.myChart.setOption(this.extend, true)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/pages/ywts/shms/sq/components/scoreLineBar.vue b/src/pages/ywts/shms/sq/components/scoreLineBar.vue
new file mode 100644
index 0000000..1551e69
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/scoreLineBar.vue
@@ -0,0 +1,189 @@
+<template>
+  <div id="score-linebar" className="container"/>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { getCaseRank } from '@/api/ywts/shms/sq'
+export default {
+  name: 'ScoreLineBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: {date: '时间'},
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['得分', '环比']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '数量',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          // {
+          //   name: '环比',
+          //   position: 'right',
+          //   type: 'value',
+          //   axisLine: {
+          //     lineStyle: {
+          //       color: '#cce9ff'
+          //     }
+          //   },
+          //   axisLabel: {
+          //     color: '#cce9ff'
+          //   }
+          // }
+        ],
+        series: [
+          {
+            name: '数量',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {offset: 1, color: 'rgba(10,25,124,0.0)'},
+                {offset: 0.3, color: 'rgba(0,253,232,0.8)'},
+                {offset: 0, color: 'rgba(0,178,172,0.8)'}
+              ])
+            }
+          },
+          // {
+          //   name: '环比',
+          //   yAxisIndex: 1,
+          //   type: 'line',
+          //   symbol: 'circle',
+          //   symbolSize: 6,
+          //   color: 'rgba(255,190,68,1)',
+          //   areaStyle: {
+          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //       {
+          //         offset: 0.5,
+          //         color: 'rgba(255,190,68,0.7)',
+          //       },
+          //       {
+          //         offset: 1,
+          //         color: 'rgba(10,25,124,0.2)'
+          //       }
+          //     ])
+          //   },
+          //   emphasis: {
+          //     focus: 'series'
+          //   },
+          //   label: {
+          //     show: true,
+          //     position: 'insideBottom'
+          //   }
+          // }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('score-linebar'))
+    this.height = document.getElementById('score-linebar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('score-linebar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function () {
+      if(!document.getElementById('score-linebar')) {
+        return
+      }
+      that.reload()
+    })
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('score-linebar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('score-linebar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData(id) {
+      getCaseRank({id}).then(response => {
+        console.log(response.data, '111111排行榜')
+        if (response.code === 200) {
+          response.data.value = response.data.value.sort((a,b) => Number(b.value) - Number(a.value))
+          this.extend.series[0].data = response.data.value.map(item => item.value)
+          // this.extend.series[1].data = response.data.value.map(item => item.rate.replace('%',''))
+          this.extend.xAxis.data = response.data.value.map(item => item.name)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+      // this.extend.series[0].data = [84, 85, 85, 81, 85, 85, 72]
+      // this.extend.series[1].data = [1, 0.5, 1, 1.5, 1, 1.8, 0.9]
+      // this.extend.xAxis.data = ['1', '2', '3', '4', '5', '6', '7']
+      // this.myChart.setOption(this.extend, true)
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>
+
diff --git a/src/pages/ywts/shms/sq/components/transitBar.vue b/src/pages/ywts/shms/sq/components/transitBar.vue
new file mode 100644
index 0000000..c23b4ba
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/transitBar.vue
@@ -0,0 +1,173 @@
+<template>
+  <div id="person-bar1" class="container"/>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { getTransitrRatio } from '@/api/ywts/shms/sq';
+
+export default {
+  name: 'PersonBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['进', '出']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '进',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }, {
+            name: '出',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#4ab228' }
+              ])
+            }
+          },
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('person-bar1'))
+    this.height = document.getElementById('person-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('person-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      if(!document.getElementById('person-bar1')) {
+        return
+      }
+      that.reload()
+    })
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('person-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('person-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData(id) {
+      getTransitrRatio({id}).then(response => {
+        console.log(response.data, '通行量分析')
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.value.map(item => item.in)
+          this.extend.series[1].data = response.data.value.map(item => item.out)
+          this.extend.xAxis.data = response.data.value.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+      // this.extend.series[0].data = [5154,4545,2455,7212]
+      // this.extend.series[1].data = [554,545,455,722]
+      // this.extend.xAxis.data = ['20岁以下', '20-30岁', '30-40岁', '40岁以上' ]
+      // this.myChart.setOption(this.extend, true)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/pages/ywts/shms/sq/devicePop.vue b/src/pages/ywts/shms/sq/devicePop.vue
new file mode 100644
index 0000000..2c44979
--- /dev/null
+++ b/src/pages/ywts/shms/sq/devicePop.vue
@@ -0,0 +1,281 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.showType] }">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="list-down" style="width: 100%;margin: 0 auto;">
+      <div class="list-item">
+        <div style="width:100%;">
+          <div style="width: 100%">
+            <i class="item-line one-line" style="width: 100%;"><span>设备名称: {{
+              gdInfo.name }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>设备类型: {{
+              gdInfo.typename }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>设备状态: {{
+              gdInfo.statusName }}</span></i>
+            <i class="item-line one-line" style="width: 100%;" :title="gdInfo.location"><span>设备位置: {{
+              gdInfo.location }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>时间: {{ gdInfo.time
+            }}</span></i>
+            <i class="item-line one-line" v-if="gdInfo.type === '2'" style="width: 100%;"><span>进/出人口数: {{ gdInfo.in
+                }}/{{ gdInfo.out }}</span></i>
+            <i class="item-line one-line" v-if="gdInfo.type === '1'" style="width: 100%;"><span>是否赋能: 否</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
+      defaultPhoto: require('@/assets/images/global_images/photo_error.png'),
+      statusColor: {
+        1: '#a1a1a1',
+        2: '#f8e31a',
+        3: '#5ab1fc',
+        4: '#f89835',
+        5: '#3def83',
+      },
+      urgencyColor: {
+        'C': '#2f8d00',
+        'B': '#c4ad00',
+        'A': '#8d0000'
+      },
+      heightDict: {
+        normal: '170px',
+        video: '300px'
+      }
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '弹窗内容')
+      if (!item.lon || !item.lat) { return }
+      showPositin(item.lon, item.lat)
+      item.showType = 'normal'
+      // 弹窗位置
+      if (window.localStorage.getItem('mousePosition')) {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      else {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      this.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.children-item {
+  width: 96% !important;
+  margin: 10px auto !important;
+  color: #fff !important;
+  // border: 1px solid #fff;
+  border-radius: 6px;
+  padding: 10px;
+  box-sizing: border-box;
+
+}
+
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 160px;
+  width: 27rem;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 25%;
+    height: 32%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+
+.list-down {
+  // margin-top: 10px;
+  // overflow-y: scroll;
+  width: 100%;
+  // height: calc(100% - 6rem);
+  padding: 0px 10px;
+}
+
+.list-item {
+  width: calc(100% - 35px);
+  // height: 12rem;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  padding: 0.8rem 10px;
+  margin: 0.2rem 0rem;
+  letter-spacing: 2px;
+  cursor: pointer;
+  background-size: 100% 100% !important;
+  color: white;
+  border-top: 2px solid #0494f3;
+  border-radius: 10px;
+}
+
+.list-item:hover {
+  background-size: cover !important;
+  background: url('../../../../assets/images/right/选中.png') !important;
+  background-size: 100% 100% !important;
+}
+
+.item-title {
+  width: 90%;
+  text-align: left;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+
+.item-line {
+  display: flex;
+  font-size: 1.2rem;
+  color: #aed2f3;
+  padding-left: 20px;
+  line-height: 1.8rem;
+  width: 95%;
+  word-break: break-all;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /* 设置最大行数 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.colorbox-text {
+  background-color: #0a88fc;
+  border-radius: 10px;
+  color: white;
+  font-size: 1rem;
+  padding: 0rem 0.4rem;
+  margin-left: 5px;
+  text-align: center;
+  width: 5rem;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+
+.one-line {
+  display: block !important;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/index.vue b/src/pages/ywts/shms/sq/index.vue
new file mode 100644
index 0000000..8433b85
--- /dev/null
+++ b/src/pages/ywts/shms/sq/index.vue
@@ -0,0 +1,467 @@
+<template>
+  <div>
+    <div class="video-menu">
+      <common-btn id="communityBtn" :select="selectIndex === 'communityBtn'" :bg="communityBg"
+        :bg-hover="communityHover" width="5" height="5" text-hover="社区" @click="btnClick" />
+      <common-btn id="personBtn" :select="selectIndex === 'personBtn'" :bg="personBg" :bg-hover="personHover" width="5"
+        height="5" text-hover="人员热力" @click="btnClick" />
+      <layer-manager-mix title="社区设备" :icons="icons" :menu-tab="menuTab" :menus="menus"
+        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" @menuClick="menuClick" />
+      <common-btn id="carBtn" :select="selectIndex === 'carBtn'" :bg="parkBg" :bg-hover="parkHover" width="5" height="5"
+        text-hover="社区车辆" @click="btnClick" />
+      <common-btn id="caseBtn" :select="selectIndex === 'caseBtn'" :bg="caseBg" :bg-hover="caseHover" width="5"
+        height="5" text-hover="社区事件" @click="btnClick" />
+      <time-manager v-show="selectIndex === 'caseBtn'" @handleTimeRange="handleTimeRange" />
+
+      <!-- 信息窗体 -->
+      <devicePop ref="deviceRef" v-show="showDevice" @close="showDevice = false" />
+      <carPop ref="carRef" v-show="showCar" @close="showCar = false" />
+    </div>
+    <list-page title="监测事件" :list="caseList" :query="caseListQuery" :total="caseTotal" @change="changePage"
+      v-show="isListPage" @close="isListPage = false" />
+    <communityPop ref="communityPop" v-if="isShow" @close="isShow = false" />
+  </div>
+</template>
+
+<script>
+import CommonBtn from "@/components/CommonBtn"
+import LayerManagerMix from "@/components/LayerManagerMix"
+import KeywordManager from "@/components/KeywordManager"
+import TimeManager from "@/components/TimeManager"
+import ListPage from "@/components/ListPage";
+import { clearUpMap, clearResetMap, AddLabelPoint } from '@/utils/freedo'
+import { getCommunityList, getHeat, getDevice, getCar, getCase, getCaseList } from '@/api/ywts/shms/sq'
+import { heat } from '@/utils/freedo/heat'
+import devicePop from './devicePop.vue'
+import carPop from './carPop.vue'
+import communityPop from './communityPop.vue'
+import gridJson from "@/assets/mapJson/grid.json";
+import mapJson from "@/assets/mapJson/map.json";
+import modelJson from "@/assets/mapJson/school.json";
+import { eventBus } from "../../../../main";
+export default {
+  name: 'Sq',
+  components: { TimeManager, KeywordManager, LayerManagerMix, CommonBtn, devicePop, carPop, ListPage, communityPop },
+  data() {
+    return {
+      isShow: false,
+      selectIndex: 'communityBtn',
+      communityBg: require('@/assets/images/function/一卡通/场所未选中.png'),
+      communityHover: require('@/assets/images/function/一卡通/场所选中.png'),
+      communityIcon: require('@/assets/images/icon/一卡通/场所.png'),
+      communityList: [],
+      personBg: require('@/assets/images/function/教育/热力图未选中.png'),
+      personHover: require('@/assets/images/function/教育/热力图选中.png'),
+      menuTab: [{
+        name: '社区设备',
+        value: 'device'
+      }],
+      menus: {
+        device: [
+          { type: "1", typename: "视频设备", total: "0" },
+          { type: "2", typename: "门禁设备", total: "0" }
+        ]
+      },
+      icons: {
+        device: [
+          require('@/assets/images/left/icon/雷达.png'),
+          require('@/assets/images/left/icon/卡口.png')
+        ]
+      },
+      markerList: [],
+      markerBakList: [],
+      videoIcon: require('@/assets/images/icon/视频云/枪机未赋能在线.png'),
+      controlIcon: require('@/assets/images/icon/一卡通/门禁.png'),
+      heatData: [],
+      showDevice: false,
+      parkBg: require('@/assets/images/function/交通/智慧停车未选中.png'),
+      parkHover: require('@/assets/images/function/交通/智慧停车选中.png'),
+      carList: [],
+      showCar: false,
+      caseBg: require('@/assets/images/function/物联网/物联事件未选中.png'),
+      caseHover: require('@/assets/images/function/物联网/物联事件选中.png'),
+      isListPage: false,
+      time: {
+        startTime: '',
+        endTime: '',
+      },
+      caseListQuery: {
+        startTime: '',
+        endTime: '',
+        id: '',
+        pageNo: 0,
+        pageSize: 5
+      },
+      caseTotal: 0,
+      caseList: [],
+      caseIcon: {
+        1: require('@/assets/images/icon/事件/已撤案.png'),
+        2: require('@/assets/images/icon/事件/指派中.png'),
+        3: require('@/assets/images/icon/事件/处置中.png'),
+        4: require('@/assets/images/icon/事件/已办结.png'),
+        5: require('@/assets/images/icon/事件/已结案.png'),
+      },
+      caseColor: {
+        1: '#ffffff',
+        2: '#fdeb56',
+        3: '#85c8ff',
+        4: '#ffba74',
+        5: '#87f6b3',
+      }
+    }
+  },
+  mounted() {
+    clearResetMap()
+    this.selectIndex = 'communityBtn'
+    this.fetchCommunityList()
+    window.imageryManager.addByPMTS({
+      url: gridJson['智慧社区'],
+      name: 'jy',
+      autoFlyto: true,
+    })
+    eventBus.$emit('change-layer', { id: 1, checked: false });
+    eventBus.$emit('change-layer', { id: 2, checked: false });
+    eventBus.$emit('change-layer', { id: 3, checked: false });
+    eventBus.$emit('change-layer', { id: 4, checked: false });
+    eventBus.$emit('change-layer', { id: 5, checked: true });
+    eventBus.$emit('change-layer', { id: 43, checked: true });
+    eventBus.$emit('change-layer', { id: 21, checked: true });
+    eventBus.$emit('change-layer', { id: 12, checked: true });
+  },
+  methods: {
+    async btnClick(e) {
+      clearResetMap()
+      this.isShow = false
+      this.showCar = false
+      this.showDevice = false
+      this.isListPage = false
+      this.selectIndex = e.target.id
+      switch (this.selectIndex) {
+        case "communityBtn":
+          this.fetchCommunityList()
+          break
+        case "personBtn":
+          this.fetchHeat()
+          break
+        case "layerBtn":
+          this.fetchDevice()
+          break
+        case "carBtn":
+          this.fetchCar()
+          break
+        case "caseBtn":
+          this.fetchCase()
+          break
+      }
+    },
+    // 获取社区列表
+    fetchCommunityList() {
+      const drawMarker = (list) => {
+        const communityIcon = require('@/assets/images/icon/一卡通/场所.png')
+        list.forEach(item => {
+          if (item.lat && item.lon) {
+            AddLabelPoint(
+              item.id,
+              item.name,
+              communityIcon,
+              [item.lon, item.lat, 0], 'sq', item,
+              this.clickMarker)
+          }
+        })
+      }
+      if (this.communityList.length) {
+        drawMarker(this.communityList)
+        return
+      }
+      getCommunityList({}).then(res => {
+        this.communityList = res.data.value
+        drawMarker(this.communityList)
+
+      })
+    },
+    // 点击社区
+    clickMarker(eventArg) {
+      const item = eventArg._data.data
+      this.isShow = true
+      this.$nextTick(() => {
+        this.$refs.communityPop.initData(item)
+      })
+    },
+    // 获取人员热力
+    fetchHeat() {
+      if (this.heatData.length) {
+        heat(this.heatData)
+        return
+      }
+      // 获取人员热力
+      getHeat({}).then(res => {
+        this.heatData = res.data.value.filter((item) => item.lat && item.lng && item.value)
+        // 绘制热力图
+        heat(this.heatData)
+      })
+    },
+    // 获取设备点位
+    fetchDevice() {
+      if (this.markerBakList.length) {
+        this.markerList = JSON.parse(JSON.stringify(this.markerBakList))
+        this.menus.device[0].total = this.markerList.filter((item) => item.type === '1').length
+        this.menus.device[1].total = this.markerList.filter((item) => item.type === '2').length
+        // 绘制点位
+        this.markerList.forEach((item) => {
+          AddLabelPoint(
+            item.id,
+            `${item.name}`,
+            item.type === '1' ? this.videoIcon : this.controlIcon,
+            [item.lon, item.lat, 0], 'yl-dev', item,
+            this.clickDevice)
+        })
+        return
+      }
+      getDevice({}).then(res => {
+        // console.log(res.data, '设备点位')
+        this.markerList = [
+          {
+            "name": "设备1",
+            "lon": "114.859995",
+            "location": "江西省赣州市南康区三江乡",
+            "id": "1676397864375291905",
+            "lat": "25.802129",
+            "type": "1",
+            "typename": "视频设备",
+            statusName: '正常',
+            time: '2025-06-16 09:05:05',
+            in: '0',
+            out: '0',
+          },
+          {
+            "name": "设备2",
+            "lon": "114.861027",
+            "location": "江西省赣州市章贡区潭六路135号靠近逸夫小学",
+            "id": "1676398916763914241",
+            "lat": "25.757553",
+            "type": "2",
+            "typename": "门禁设备",
+            statusName: '正常',
+            time: '2025-06-16 09:05:05',
+            in: '0',
+            out: '0',
+          },
+          {
+            "name": "设备3",
+            "lon": "114.880246",
+            "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
+            "id": "1676414593390350337",
+            "lat": "25.753119",
+            "type": "1",
+            "typename": "视频设备",
+            statusName: '正常',
+            time: '2025-06-16 09:05:05',
+            in: '0',
+            out: '0',
+          },
+          {
+            "name": "设备4",
+            "lon": "114.879855",
+            "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
+            "id": "1676414955455254529",
+            "lat": "25.752771",
+            "type": "1",
+            "typename": "视频设备",
+            statusName: '正常',
+            time: '2025-06-16 09:05:05',
+            in: '0',
+            out: '0',
+          },
+          {
+            "name": "设备5",
+            "lon": "114.875438",
+            "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
+            "id": "1676418661630349312",
+            "lat": "25.748733",
+            "type": "2",
+            "typename": "门禁设备",
+            statusName: '正常',
+            time: '2025-06-16 09:05:05',
+            in: '0',
+            out: '0',
+          },
+          {
+            "name": "设备6",
+            "lon": "114.867371",
+            "location": "江西省赣州市章贡区105国道135号靠近松岭上",
+            "id": "1676422908220542977",
+            "lat": "25.750388",
+            "typename": "2",
+            "typename": "门禁设备",
+            statusName: '正常',
+            time: '2025-06-16 09:05:05',
+            in: '0',
+            out: '0',
+          },
+        ]
+        this.markerBakList = JSON.parse(JSON.stringify(this.markerList))
+        this.menus.device[0].total = this.markerList.filter((item) => item.type === '1').length
+        this.menus.device[1].total = this.markerList.filter((item) => item.type === '2').length
+        // 绘制点位
+        this.markerList.forEach((item) => {
+          AddLabelPoint(
+            item.id,
+            `${item.name}`,
+            item.type === '1' ? this.videoIcon : this.controlIcon,
+            [item.lon, item.lat, 0], 'yl-dev', item,
+            this.clickDevice)
+        })
+      })
+    },
+    menuClick(e) {
+      clearResetMap()
+      this.markerList = this.markerBakList.filter(item => item.type === e.type)
+      this.markerList.forEach((item) => {
+        AddLabelPoint(
+          item.id,
+          `${item.name}`,
+          item.type === '1' ? this.videoIcon : this.controlIcon,
+          [item.lon, item.lat, 0], 'yl-dev', item,
+          this.clickDevice)
+      })
+    },
+    // 设备点位点击
+    clickDevice(eventArg) {
+      const item = eventArg._data.data
+      this.showDevice = true
+      this.$nextTick(() => {
+        this.$refs.deviceRef.initData(item)
+      })
+    },
+    // 获取社区车辆
+    fetchCar() {
+      const drawMarker = (list) => {
+        const carIcon = require('@/assets/images/icon/环卫/车辆.png')
+        list.forEach((item) => {
+          AddLabelPoint(
+            item.id,
+            `${item.name}`,
+            carIcon,
+            [item.lon, item.lat, 0], 'yl-dev', item,
+            this.clickCar)
+        })
+      }
+      if (this.carList.length) {
+        drawMarker(this.carList)
+        return
+      }
+      getCar().then(res => {
+        // console.log(res.data, '社区车辆')
+        // this.carList = res.data.value
+        this.carList = [
+          {
+            "name": "停车场1",
+            "lon": "114.859995",
+            "location": "江西省赣州市南康区三江乡",
+            "id": "1676397864375291905",
+            "lat": "25.802129",
+            carNum: '50',
+            parkSpaceNum: '2',
+          },
+          {
+            "name": "停车场2",
+            "lon": "114.861027",
+            "location": "江西省赣州市章贡区潭六路135号靠近逸夫小学",
+            "id": "1676398916763914241",
+            "lat": "25.757553",
+            carNum: '88',
+            parkSpaceNum: '2',
+          },
+          {
+            "name": "停车场3",
+            "lon": "114.880246",
+            "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
+            "id": "1676414593390350337",
+            "lat": "25.753119",
+            carNum: '15',
+            parkSpaceNum: '1',
+          },
+        ]
+        drawMarker(this.carList)
+      })
+    },
+    // 点击社区车辆
+    clickCar(eventArg) {
+      const item = eventArg._data.data
+      this.showCar = true
+      this.$nextTick(() => {
+        this.$refs.carRef.initData(item)
+      })
+    },
+    // 事件时间查询条件
+    handleTimeRange(time) {
+      this.isListPage = false
+      if (this.time.startTime !== '') {
+        this.time = time
+        this.fetchCase()
+      } else {
+        this.time = time
+      }
+    },
+    // 获取事件
+    fetchCase() {
+      clearResetMap()
+      getCase(this.time).then(res => {
+        console.log(res.data, '事件点位')
+        res.data.value.forEach(item => {
+          AddLabelPoint(
+            item.id,
+            '',
+            this.caseIcon[item.status],
+            [item.lon, item.lat, 0], 'yl-case', item,
+            this.clickCase)
+        })
+      })
+    },
+    // 点击事件点位
+    clickCase(eventArg) {
+      const item = eventArg._data.data
+      // 查询事件详情
+      this.isListPage = true
+      this.caseListQuery = {
+        startTime: this.time.startTime,
+        endTime: this.time.endTime,
+        id: item.id,
+        pageNo: 0,
+        pageSize: 5
+      }
+      this.caseList = []
+      this.caseTotal = 0
+      this.searchCaseMarkerList()
+    },
+    // 事件详情分页
+    changePage(val) {
+      if (val && val.page) {
+        this.caseListQuery.pageNo = val.page
+      }
+      this.searchCaseMarkerList()
+    },
+    searchCaseMarkerList() {
+      getCaseList(this.caseListQuery).then(res => {
+        console.log(res.data, ' 时间性情')
+        this.caseList = res.data.value
+        this.caseTotal = res.data.valueSize
+      })
+    }
+  },
+
+
+}
+</script>
+
+<style scoped>
+.video-menu {
+  display: flex;
+  z-index: 111111111;
+  width: 40rem;
+  height: 5rem;
+  position: absolute;
+  left: 20px;
+  top: 1rem;
+}
+</style>

diff --git a/src/api/ywts/shms/sq.js b/src/api/ywts/shms/sq.js
new file mode 100644
index 0000000..04a5447
--- /dev/null
+++ b/src/api/ywts/shms/sq.js
@@ -0,0 +1,123 @@
+/**
+ * 社区接口
+ */
+import request from '@/utils/request'
+
+// 社区点位列表
+export function getCommunityList() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwlb',
+    method: 'post',
+  })
+}
+
+// 人员热力图
+export function getHeat() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqyyrlt',
+    method: 'post',
+  })
+}
+
+// 设备点位
+export function getDevice() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sbdwlb',
+    method: 'post',
+    params: {
+      type: '',
+      keywords: ''
+    }
+  })
+}
+
+// 社区车辆
+export function getCar() {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqbyl',
+    method: 'post',
+  })
+}
+
+// 事件点位列表
+export function getCase(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sjdwlb',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+
+// 事件详情
+export function getCaseList(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/zjlbfy',
+    method: 'post',
+    params:{
+      ...data
+    }
+  })
+}
+// 获取社区基本信息
+export function getBaseInfo(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/sqdwxq',
+    method: 'post',
+    params:{
+      ...data
+    },
+    // data
+  })
+}
+// 居民年龄统计
+export function getAgeStatistics(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmnltj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 居民流动比例
+export function getCurrentRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmldbl',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1年人房车占比统计
+export function getPersonCarRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/rfczbtj',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月居民通行量分析
+export function getTransitrRatio(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/jmtxlfx',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
+// 近1月高频事件排行榜
+export function getCaseRank(data) {
+  return request({
+    url: 'zhsq-gktj/zhsq/gpsjphb',
+    method: 'post',
+    params:{
+      ...data
+    },
+  })
+}
diff --git a/src/pages/ywts/shms/jy/index.vue b/src/pages/ywts/shms/jy/index.vue
index 1293f28..1c1170e 100644
--- a/src/pages/ywts/shms/jy/index.vue
+++ b/src/pages/ywts/shms/jy/index.vue
@@ -6,7 +6,7 @@
       <common-btn id="personBtn" :select="selectIndex === 'personBtn'" :bg="personBg" :bg-hover="personHover" width="5"
         height="5" text-hover="师生热力" @click="btnClick" />
       <layer-manager-mix title="学校设备" :icons="icons" :menu-tab="menuTab" :menus="menus"
-        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" />
+        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" @menuClick="menuClick" />
       <keyword-manager :resultList="keywordList" :select="selectIndex === 'keywordBtn'" @handleKeyword="handleKeyword"
         @click="selectIndex = 'keywordBtn'" @localPoint="localPoint" />
     </div>
@@ -298,6 +298,18 @@
         })
       })
     },
+      menuClick(e) {
+      clearResetMap()
+      this.markerList = this.markerBakList.filter(item => item.type === e.type)
+      this.markerList.forEach((item) => {
+        AddLabelPoint(
+          item.id,
+          `${item.name}`,
+          item.type === '1' ? this.videoIcon : this.controlIcon,
+          [item.lon, item.lat, 0], 'yl-dev', item,
+          this.clickDevice)
+      })
+    },
     // 设备点位点击
     clickDevice(eventArg) {
       const item = eventArg._data.data
diff --git a/src/pages/ywts/shms/sq/carPop.vue b/src/pages/ywts/shms/sq/carPop.vue
new file mode 100644
index 0000000..b1fe4c3
--- /dev/null
+++ b/src/pages/ywts/shms/sq/carPop.vue
@@ -0,0 +1,275 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.showType] }">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="list-down" style="width: 100%;margin: 0 auto;">
+      <div class="list-item">
+        <div style="width:100%;">
+          <div style="width: 100%">
+            <i class="item-line one-line" style="width: 100%;"><span>名称: {{
+              gdInfo.name }}</span></i>
+            <i class="item-line one-line" style="width: 100%;" :title="gdInfo.location"><span>位置: {{
+              gdInfo.location }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>车辆数量: {{ gdInfo.carNum
+                }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>停车位: {{ gdInfo.parkSpaceNum }}</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
+      defaultPhoto: require('@/assets/images/global_images/photo_error.png'),
+      statusColor: {
+        1: '#a1a1a1',
+        2: '#f8e31a',
+        3: '#5ab1fc',
+        4: '#f89835',
+        5: '#3def83',
+      },
+      urgencyColor: {
+        'C': '#2f8d00',
+        'B': '#c4ad00',
+        'A': '#8d0000'
+      },
+      heightDict: {
+        normal: '130px',
+        video: '300px'
+      }
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '弹窗内容')
+      if (!item.lon || !item.lat) { return }
+      showPositin(item.lon, item.lat)
+      item.showType = 'normal'
+      // 弹窗位置
+      if (window.localStorage.getItem('mousePosition')) {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      else {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      this.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.children-item {
+  width: 96% !important;
+  margin: 10px auto !important;
+  color: #fff !important;
+  // border: 1px solid #fff;
+  border-radius: 6px;
+  padding: 10px;
+  box-sizing: border-box;
+
+}
+
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 160px;
+  width: 27rem;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 25%;
+    height: 32%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+
+.list-down {
+  // margin-top: 10px;
+  // overflow-y: scroll;
+  width: 100%;
+  // height: calc(100% - 6rem);
+  padding: 0px 10px;
+}
+
+.list-item {
+  width: calc(100% - 35px);
+  // height: 12rem;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  padding: 0.8rem 10px;
+  margin: 0.2rem 0rem;
+  letter-spacing: 2px;
+  cursor: pointer;
+  background-size: 100% 100% !important;
+  color: white;
+  border-top: 2px solid #0494f3;
+  border-radius: 10px;
+}
+
+.list-item:hover {
+  background-size: cover !important;
+  background: url('../../../../assets/images/right/选中.png') !important;
+  background-size: 100% 100% !important;
+}
+
+.item-title {
+  width: 90%;
+  text-align: left;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+
+.item-line {
+  display: flex;
+  font-size: 1.2rem;
+  color: #aed2f3;
+  padding-left: 20px;
+  line-height: 1.8rem;
+  width: 95%;
+  word-break: break-all;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /* 设置最大行数 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.colorbox-text {
+  background-color: #0a88fc;
+  border-radius: 10px;
+  color: white;
+  font-size: 1rem;
+  padding: 0rem 0.4rem;
+  margin-left: 5px;
+  text-align: center;
+  width: 5rem;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+
+.one-line {
+  display: block !important;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/communityPop.vue b/src/pages/ywts/shms/sq/communityPop.vue
new file mode 100644
index 0000000..eb6bf07
--- /dev/null
+++ b/src/pages/ywts/shms/sq/communityPop.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="bottom">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="block" style="padding: 10px">
+      <div style="display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center">
+        <div class="num" style="text-align: left;width:100%;font-size: 20px;font-weight: bold">{{ name }}</div>
+        <div class="num" style="color: #B3F3F6;width:100%;word-break: break-all;text-align: left;">位置：{{ position
+          }}</span></div>
+        <!-- <div class="item" style="width: 51%">
+          <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/在校生总数.png')" class="base-map-image"
+            mode="fill" />
+          <div class="item-text">
+            <div class="num">{{ list[0] }}<span class="unit">人</span></div>
+            <div style="color: #B3F3F6;">在校生总数</div>
+          </div>
+        </div> -->
+        <!-- <div class="item">
+          <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/教师总数.png')" class="base-map-image"
+            mode="fill" />
+          <div class="item-text">
+            <div class="num">{{ list[1] }}<span class="unit">人</span></div>
+            <div style="color: #B3F3F6;">教师总数</div>
+          </div>
+        </div> -->
+        <div class="item" v-for="(item, index) in list">
+          <!-- <el-image :src="require('@/assets/images/function/教育/专项数据看板图标/教职工总数.png')" class="base-map-image"
+            mode="fill" /> -->
+          <div class="item-text">
+            <div class="num">{{ item.total }}<span class="unit"></span></div>
+            <div style="color: #B3F3F6;">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">居民年龄统计</div>
+      <age-pie style="flex:1;" ref="agePie" />
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">居民流动比例</div>
+      <currentPie style="flex:1;" ref="currentPie"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1年人房车占比统计</div>
+      <personBar style="flex:1;" ref="personBar"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1月居民通行量分析</div>
+      <transitBar style="flex:1;" ref="transitBar"/>
+    </div>
+    <div class="block">
+      <div :style="{ backgroundImage: 'url(' + titleImg + ')' }" class="title">近1月高频事件排行榜</div>
+      <scoreLineBar style="flex:1;" ref="scoreLineBar"/>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import scoreLineBar from "./components/scoreLineBar";
+import transitBar from "./components/transitBar";
+import personBar from "./components/personBar";
+import AgePie from "./components/agePie";
+import currentPie from "./components/currentPie";
+import { getBaseInfo } from '@/api/ywts/shms/sq'
+
+export default {
+  name: 'SchoolPop',
+  // components: {SexPie, AgePie, StudentBar, TsLineBar, TeacherLine},
+  components: { AgePie, currentPie, personBar, transitBar, scoreLineBar },
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: [
+        {
+          name: '居民总数',
+          value: 'personnum',
+          total: '0',
+        },
+        {
+          name: '房屋总数',
+          value: 'buildingnum',
+          total: '0',
+        },
+        {
+          name: '车辆总数',
+          value: 'carnum',
+          total: '0',
+        },
+        {
+          name: '入住率',
+          value: 'inrate',
+          total: '0',
+        },
+      ],
+      name: '',
+      position: '',
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '社区信息')
+      this.name = item.name
+      getBaseInfo({ id: item.id }).then(res => {
+        const data = res.data.value[0]
+        this.position = data.location
+        this.list.forEach((item) => {
+          if (data[item.value]) {
+            item.total = data[item.value]
+          }
+        })
+      })
+      this.$refs.agePie.fetchData(item.id)
+      this.$refs.currentPie.fetchData(item.id)
+      this.$refs.personBar.fetchData(item.id)
+      this.$refs.transitBar.fetchData(item.id)
+      this.$refs.scoreLineBar.fetchData(item.id)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 220px;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 50%;
+    height: 35%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/agePie.vue b/src/pages/ywts/shms/sq/components/agePie.vue
new file mode 100644
index 0000000..9e41da8
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/agePie.vue
@@ -0,0 +1,185 @@
+<!--suppress ALL -->
+<template>
+  <div id="age-pie" class="container">
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {white} from "chalk";
+import { getAgeStatistics } from '@/api/ywts/shms/sq'
+export default {
+  name: 'AgePie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          // {name: '7岁以下',value: 70 },
+          // {name: '8岁',value: 20 },
+          // {name: '9岁',value: 20 },
+          // {name: '10岁',value: 20 },
+          // {name: '11岁及以上',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#ffa54a','#4ab228','#4AFFF7','#BAE7FF'],
+        legend: {
+          type: 'scroll',
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold',
+            fontSize: 14
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['30%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            // color: '#0270b2',
+            // fontSize: 14,
+            // color: '#0270b2',
+            // fontSize: 14,
+            fontSize: 14,
+            fontWeight: 'bold',
+            position: 'outside',
+            formatter: '{name|{b}}:{value|{c}}',
+            distanceToLabelLine: 2,
+            rich: {}
+          },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>人数：{c}人<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      },
+      myChart: null
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    // this.myChart = echarts.init(document.getElementById('age-pie'))
+    this.height = document.getElementById('age-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('age-pie').clientWidth - 10 + 'px'
+    // console.log(this.height, this.width)
+  },
+  methods: {
+    fetchData(id){
+      getAgeStatistics({id}).then(res => {
+        console.log(res.data, '社区年龄')
+        if(res.code === 200) {
+          const data = res.data.value
+          this.chartData.rows = data.map(item => {
+            return {
+              name: item.age,
+              value: item.num
+            }
+          })
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/currentPie.vue b/src/pages/ywts/shms/sq/components/currentPie.vue
new file mode 100644
index 0000000..c7dfe20
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/currentPie.vue
@@ -0,0 +1,178 @@
+<!--suppress ALL -->
+<template>
+  <div id="sex-pie" class="container">
+    <ve-ring :style='{ "height": height, "width": width }' :width='width' :height='height' :judge-width="true"
+      :data="chartData" :extend="extend" :settings="chartSettings" />
+  </div>
+</template>
+
+<script>
+// import {deviceStatus, statisticsBuilding} from '@/api/pop'
+// import { getDoorAreaTree } from '@/api/system/area'
+import { white } from "chalk";
+import { getCurrentRatio } from '@/api/ywts/shms/sq'
+export default {
+  name: 'CurrentPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          // {name: '男',value: 70 },
+          // {name: '女',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF', '#4AFFF7', '#BAE7FF'],
+        legend: {
+          show: false,
+          top: '0%',
+          left: 'center',
+          textStyle: {
+            color: white,
+            fontWeight: 'bold',
+            fontSize: 18
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['0%', '60%'],
+          center: ['50%', '50%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            // color: '#0270b2',
+            // fontSize: 14,
+            fontSize: 18,
+            fontWeight: 'bold',
+            position: 'outside',
+            formatter: '{name|{b}}:{value|{c}}',
+            distanceToLabelLine: 2,
+            rich: {}
+          },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: {
+          trigger: 'item', formatter: '{b}<br/>人数：{c}人<br/>占比：{d}%',
+          fontSize: 20
+        }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('sex-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('sex-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    fetchData(id) {
+      getCurrentRatio({ id }).then(res => {
+        console.log(res.data, '流动比例')
+        if (res.code === 200) {
+          const data = res.data.value
+          this.chartData.rows = data.map(item => {
+            return {
+              name: item.name,
+              value: item.num
+            }
+          })
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .round {
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+
+.circle {
+  position: absolute;
+  top: 76px;
+  left: 107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {
+  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute; //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/components/personBar.vue b/src/pages/ywts/shms/sq/components/personBar.vue
new file mode 100644
index 0000000..b065487
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/personBar.vue
@@ -0,0 +1,193 @@
+<template>
+  <div id="person-bar2" class="container"/>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { getPersonCarRatio } from '@/api/ywts/shms/sq';
+
+export default {
+  name: 'PersonBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['人', '房', '车']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '人',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }, {
+            name: '房',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#4ab228' }
+              ])
+            }
+          },
+          {
+            name: '车',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('person-bar2'))
+    this.height = document.getElementById('person-bar2').clientHeight - 10 + 'px'
+    this.width = document.getElementById('person-bar2').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      if(!document.getElementById('person-bar2')) {
+        return
+      }
+      that.reload()
+    })
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('person-bar2').clientHeight - 10 + 'px'
+      this.width = document.getElementById('person-bar2').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData(id) {
+      getPersonCarRatio({id}).then(response => {
+        console.log(response.data, '人房车')
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.value.map(item => item.people)
+          this.extend.series[1].data = response.data.value.map(item => item.building)
+          this.extend.series[2].data = response.data.value.map(item => item.car)
+          this.extend.xAxis.data = response.data.value.map(item => item.month)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+      // this.extend.series[0].data = [5154,4545,2455,7212]
+      // this.extend.series[1].data = [554,545,455,722]
+      // this.extend.xAxis.data = ['20岁以下', '20-30岁', '30-40岁', '40岁以上' ]
+      // this.myChart.setOption(this.extend, true)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/pages/ywts/shms/sq/components/scoreLineBar.vue b/src/pages/ywts/shms/sq/components/scoreLineBar.vue
new file mode 100644
index 0000000..1551e69
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/scoreLineBar.vue
@@ -0,0 +1,189 @@
+<template>
+  <div id="score-linebar" className="container"/>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { getCaseRank } from '@/api/ywts/shms/sq'
+export default {
+  name: 'ScoreLineBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: {date: '时间'},
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['得分', '环比']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '数量',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          // {
+          //   name: '环比',
+          //   position: 'right',
+          //   type: 'value',
+          //   axisLine: {
+          //     lineStyle: {
+          //       color: '#cce9ff'
+          //     }
+          //   },
+          //   axisLabel: {
+          //     color: '#cce9ff'
+          //   }
+          // }
+        ],
+        series: [
+          {
+            name: '数量',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {offset: 1, color: 'rgba(10,25,124,0.0)'},
+                {offset: 0.3, color: 'rgba(0,253,232,0.8)'},
+                {offset: 0, color: 'rgba(0,178,172,0.8)'}
+              ])
+            }
+          },
+          // {
+          //   name: '环比',
+          //   yAxisIndex: 1,
+          //   type: 'line',
+          //   symbol: 'circle',
+          //   symbolSize: 6,
+          //   color: 'rgba(255,190,68,1)',
+          //   areaStyle: {
+          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //       {
+          //         offset: 0.5,
+          //         color: 'rgba(255,190,68,0.7)',
+          //       },
+          //       {
+          //         offset: 1,
+          //         color: 'rgba(10,25,124,0.2)'
+          //       }
+          //     ])
+          //   },
+          //   emphasis: {
+          //     focus: 'series'
+          //   },
+          //   label: {
+          //     show: true,
+          //     position: 'insideBottom'
+          //   }
+          // }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('score-linebar'))
+    this.height = document.getElementById('score-linebar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('score-linebar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function () {
+      if(!document.getElementById('score-linebar')) {
+        return
+      }
+      that.reload()
+    })
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('score-linebar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('score-linebar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData(id) {
+      getCaseRank({id}).then(response => {
+        console.log(response.data, '111111排行榜')
+        if (response.code === 200) {
+          response.data.value = response.data.value.sort((a,b) => Number(b.value) - Number(a.value))
+          this.extend.series[0].data = response.data.value.map(item => item.value)
+          // this.extend.series[1].data = response.data.value.map(item => item.rate.replace('%',''))
+          this.extend.xAxis.data = response.data.value.map(item => item.name)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+      // this.extend.series[0].data = [84, 85, 85, 81, 85, 85, 72]
+      // this.extend.series[1].data = [1, 0.5, 1, 1.5, 1, 1.8, 0.9]
+      // this.extend.xAxis.data = ['1', '2', '3', '4', '5', '6', '7']
+      // this.myChart.setOption(this.extend, true)
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>
+
diff --git a/src/pages/ywts/shms/sq/components/transitBar.vue b/src/pages/ywts/shms/sq/components/transitBar.vue
new file mode 100644
index 0000000..c23b4ba
--- /dev/null
+++ b/src/pages/ywts/shms/sq/components/transitBar.vue
@@ -0,0 +1,173 @@
+<template>
+  <div id="person-bar1" class="container"/>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { getTransitrRatio } from '@/api/ywts/shms/sq';
+
+export default {
+  name: 'PersonBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['进', '出']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '进',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }, {
+            name: '出',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#4ab228' }
+              ])
+            }
+          },
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('person-bar1'))
+    this.height = document.getElementById('person-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('person-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      if(!document.getElementById('person-bar1')) {
+        return
+      }
+      that.reload()
+    })
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('person-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('person-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData(id) {
+      getTransitrRatio({id}).then(response => {
+        console.log(response.data, '通行量分析')
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.value.map(item => item.in)
+          this.extend.series[1].data = response.data.value.map(item => item.out)
+          this.extend.xAxis.data = response.data.value.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+      // this.extend.series[0].data = [5154,4545,2455,7212]
+      // this.extend.series[1].data = [554,545,455,722]
+      // this.extend.xAxis.data = ['20岁以下', '20-30岁', '30-40岁', '40岁以上' ]
+      // this.myChart.setOption(this.extend, true)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/pages/ywts/shms/sq/devicePop.vue b/src/pages/ywts/shms/sq/devicePop.vue
new file mode 100644
index 0000000..2c44979
--- /dev/null
+++ b/src/pages/ywts/shms/sq/devicePop.vue
@@ -0,0 +1,281 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.showType] }">
+    <i class="el-icon-close close-pop" @click="$emit('close')" />
+    <div class="list-down" style="width: 100%;margin: 0 auto;">
+      <div class="list-item">
+        <div style="width:100%;">
+          <div style="width: 100%">
+            <i class="item-line one-line" style="width: 100%;"><span>设备名称: {{
+              gdInfo.name }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>设备类型: {{
+              gdInfo.typename }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>设备状态: {{
+              gdInfo.statusName }}</span></i>
+            <i class="item-line one-line" style="width: 100%;" :title="gdInfo.location"><span>设备位置: {{
+              gdInfo.location }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>时间: {{ gdInfo.time
+            }}</span></i>
+            <i class="item-line one-line" v-if="gdInfo.type === '2'" style="width: 100%;"><span>进/出人口数: {{ gdInfo.in
+                }}/{{ gdInfo.out }}</span></i>
+            <i class="item-line one-line" v-if="gdInfo.type === '1'" style="width: 100%;"><span>是否赋能: 否</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
+      defaultPhoto: require('@/assets/images/global_images/photo_error.png'),
+      statusColor: {
+        1: '#a1a1a1',
+        2: '#f8e31a',
+        3: '#5ab1fc',
+        4: '#f89835',
+        5: '#3def83',
+      },
+      urgencyColor: {
+        'C': '#2f8d00',
+        'B': '#c4ad00',
+        'A': '#8d0000'
+      },
+      heightDict: {
+        normal: '170px',
+        video: '300px'
+      }
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '弹窗内容')
+      if (!item.lon || !item.lat) { return }
+      showPositin(item.lon, item.lat)
+      item.showType = 'normal'
+      // 弹窗位置
+      if (window.localStorage.getItem('mousePosition')) {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      else {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      this.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.children-item {
+  width: 96% !important;
+  margin: 10px auto !important;
+  color: #fff !important;
+  // border: 1px solid #fff;
+  border-radius: 6px;
+  padding: 10px;
+  box-sizing: border-box;
+
+}
+
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 160px;
+  width: 27rem;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 25%;
+    height: 32%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+
+.list-down {
+  // margin-top: 10px;
+  // overflow-y: scroll;
+  width: 100%;
+  // height: calc(100% - 6rem);
+  padding: 0px 10px;
+}
+
+.list-item {
+  width: calc(100% - 35px);
+  // height: 12rem;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  padding: 0.8rem 10px;
+  margin: 0.2rem 0rem;
+  letter-spacing: 2px;
+  cursor: pointer;
+  background-size: 100% 100% !important;
+  color: white;
+  border-top: 2px solid #0494f3;
+  border-radius: 10px;
+}
+
+.list-item:hover {
+  background-size: cover !important;
+  background: url('../../../../assets/images/right/选中.png') !important;
+  background-size: 100% 100% !important;
+}
+
+.item-title {
+  width: 90%;
+  text-align: left;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+
+.item-line {
+  display: flex;
+  font-size: 1.2rem;
+  color: #aed2f3;
+  padding-left: 20px;
+  line-height: 1.8rem;
+  width: 95%;
+  word-break: break-all;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /* 设置最大行数 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.colorbox-text {
+  background-color: #0a88fc;
+  border-radius: 10px;
+  color: white;
+  font-size: 1rem;
+  padding: 0rem 0.4rem;
+  margin-left: 5px;
+  text-align: center;
+  width: 5rem;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+
+.one-line {
+  display: block !important;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+</style>
diff --git a/src/pages/ywts/shms/sq/index.vue b/src/pages/ywts/shms/sq/index.vue
new file mode 100644
index 0000000..8433b85
--- /dev/null
+++ b/src/pages/ywts/shms/sq/index.vue
@@ -0,0 +1,467 @@
+<template>
+  <div>
+    <div class="video-menu">
+      <common-btn id="communityBtn" :select="selectIndex === 'communityBtn'" :bg="communityBg"
+        :bg-hover="communityHover" width="5" height="5" text-hover="社区" @click="btnClick" />
+      <common-btn id="personBtn" :select="selectIndex === 'personBtn'" :bg="personBg" :bg-hover="personHover" width="5"
+        height="5" text-hover="人员热力" @click="btnClick" />
+      <layer-manager-mix title="社区设备" :icons="icons" :menu-tab="menuTab" :menus="menus"
+        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" @menuClick="menuClick" />
+      <common-btn id="carBtn" :select="selectIndex === 'carBtn'" :bg="parkBg" :bg-hover="parkHover" width="5" height="5"
+        text-hover="社区车辆" @click="btnClick" />
+      <common-btn id="caseBtn" :select="selectIndex === 'caseBtn'" :bg="caseBg" :bg-hover="caseHover" width="5"
+        height="5" text-hover="社区事件" @click="btnClick" />
+      <time-manager v-show="selectIndex === 'caseBtn'" @handleTimeRange="handleTimeRange" />
+
+      <!-- 信息窗体 -->
+      <devicePop ref="deviceRef" v-show="showDevice" @close="showDevice = false" />
+      <carPop ref="carRef" v-show="showCar" @close="showCar = false" />
+    </div>
+    <list-page title="监测事件" :list="caseList" :query="caseListQuery" :total="caseTotal" @change="changePage"
+      v-show="isListPage" @close="isListPage = false" />
+    <communityPop ref="communityPop" v-if="isShow" @close="isShow = false" />
+  </div>
+</template>
+
+<script>
+import CommonBtn from "@/components/CommonBtn"
+import LayerManagerMix from "@/components/LayerManagerMix"
+import KeywordManager from "@/components/KeywordManager"
+import TimeManager from "@/components/TimeManager"
+import ListPage from "@/components/ListPage";
+import { clearUpMap, clearResetMap, AddLabelPoint } from '@/utils/freedo'
+import { getCommunityList, getHeat, getDevice, getCar, getCase, getCaseList } from '@/api/ywts/shms/sq'
+import { heat } from '@/utils/freedo/heat'
+import devicePop from './devicePop.vue'
+import carPop from './carPop.vue'
+import communityPop from './communityPop.vue'
+import gridJson from "@/assets/mapJson/grid.json";
+import mapJson from "@/assets/mapJson/map.json";
+import modelJson from "@/assets/mapJson/school.json";
+import { eventBus } from "../../../../main";
+export default {
+  name: 'Sq',
+  components: { TimeManager, KeywordManager, LayerManagerMix, CommonBtn, devicePop, carPop, ListPage, communityPop },
+  data() {
+    return {
+      isShow: false,
+      selectIndex: 'communityBtn',
+      communityBg: require('@/assets/images/function/一卡通/场所未选中.png'),
+      communityHover: require('@/assets/images/function/一卡通/场所选中.png'),
+      communityIcon: require('@/assets/images/icon/一卡通/场所.png'),
+      communityList: [],
+      personBg: require('@/assets/images/function/教育/热力图未选中.png'),
+      personHover: require('@/assets/images/function/教育/热力图选中.png'),
+      menuTab: [{
+        name: '社区设备',
+        value: 'device'
+      }],
+      menus: {
+        device: [
+          { type: "1", typename: "视频设备", total: "0" },
+          { type: "2", typename: "门禁设备", total: "0" }
+        ]
+      },
+      icons: {
+        device: [
+          require('@/assets/images/left/icon/雷达.png'),
+          require('@/assets/images/left/icon/卡口.png')
+        ]
+      },
+      markerList: [],
+      markerBakList: [],
+      videoIcon: require('@/assets/images/icon/视频云/枪机未赋能在线.png'),
+      controlIcon: require('@/assets/images/icon/一卡通/门禁.png'),
+      heatData: [],
+      showDevice: false,
+      parkBg: require('@/assets/images/function/交通/智慧停车未选中.png'),
+      parkHover: require('@/assets/images/function/交通/智慧停车选中.png'),
+      carList: [],
+      showCar: false,
+      caseBg: require('@/assets/images/function/物联网/物联事件未选中.png'),
+      caseHover: require('@/assets/images/function/物联网/物联事件选中.png'),
+      isListPage: false,
+      time: {
+        startTime: '',
+        endTime: '',
+      },
+      caseListQuery: {
+        startTime: '',
+        endTime: '',
+        id: '',
+        pageNo: 0,
+        pageSize: 5
+      },
+      caseTotal: 0,
+      caseList: [],
+      caseIcon: {
+        1: require('@/assets/images/icon/事件/已撤案.png'),
+        2: require('@/assets/images/icon/事件/指派中.png'),
+        3: require('@/assets/images/icon/事件/处置中.png'),
+        4: require('@/assets/images/icon/事件/已办结.png'),
+        5: require('@/assets/images/icon/事件/已结案.png'),
+      },
+      caseColor: {
+        1: '#ffffff',
+        2: '#fdeb56',
+        3: '#85c8ff',
+        4: '#ffba74',
+        5: '#87f6b3',
+      }
+    }
+  },
+  mounted() {
+    clearResetMap()
+    this.selectIndex = 'communityBtn'
+    this.fetchCommunityList()
+    window.imageryManager.addByPMTS({
+      url: gridJson['智慧社区'],
+      name: 'jy',
+      autoFlyto: true,
+    })
+    eventBus.$emit('change-layer', { id: 1, checked: false });
+    eventBus.$emit('change-layer', { id: 2, checked: false });
+    eventBus.$emit('change-layer', { id: 3, checked: false });
+    eventBus.$emit('change-layer', { id: 4, checked: false });
+    eventBus.$emit('change-layer', { id: 5, checked: true });
+    eventBus.$emit('change-layer', { id: 43, checked: true });
+    eventBus.$emit('change-layer', { id: 21, checked: true });
+    eventBus.$emit('change-layer', { id: 12, checked: true });
+  },
+  methods: {
+    async btnClick(e) {
+      clearResetMap()
+      this.isShow = false
+      this.showCar = false
+      this.showDevice = false
+      this.isListPage = false
+      this.selectIndex = e.target.id
+      switch (this.selectIndex) {
+        case "communityBtn":
+          this.fetchCommunityList()
+          break
+        case "personBtn":
+          this.fetchHeat()
+          break
+        case "layerBtn":
+          this.fetchDevice()
+          break
+        case "carBtn":
+          this.fetchCar()
+          break
+        case "caseBtn":
+          this.fetchCase()
+          break
+      }
+    },
+    // 获取社区列表
+    fetchCommunityList() {
+      const drawMarker = (list) => {
+        const communityIcon = require('@/assets/images/icon/一卡通/场所.png')
+        list.forEach(item => {
+          if (item.lat && item.lon) {
+            AddLabelPoint(
+              item.id,
+              item.name,
+              communityIcon,
+              [item.lon, item.lat, 0], 'sq', item,
+              this.clickMarker)
+          }
+        })
+      }
+      if (this.communityList.length) {
+        drawMarker(this.communityList)
+        return
+      }
+      getCommunityList({}).then(res => {
+        this.communityList = res.data.value
+        drawMarker(this.communityList)
+
+      })
+    },
+    // 点击社区
+    clickMarker(eventArg) {
+      const item = eventArg._data.data
+      this.isShow = true
+      this.$nextTick(() => {
+        this.$refs.communityPop.initData(item)
+      })
+    },
+    // 获取人员热力
+    fetchHeat() {
+      if (this.heatData.length) {
+        heat(this.heatData)
+        return
+      }
+      // 获取人员热力
+      getHeat({}).then(res => {
+        this.heatData = res.data.value.filter((item) => item.lat && item.lng && item.value)
+        // 绘制热力图
+        heat(this.heatData)
+      })
+    },
+    // 获取设备点位
+    fetchDevice() {
+      if (this.markerBakList.length) {
+        this.markerList = JSON.parse(JSON.stringify(this.markerBakList))
+        this.menus.device[0].total = this.markerList.filter((item) => item.type === '1').length
+        this.menus.device[1].total = this.markerList.filter((item) => item.type === '2').length
+        // 绘制点位
+        this.markerList.forEach((item) => {
+          AddLabelPoint(
+            item.id,
+            `${item.name}`,
+            item.type === '1' ? this.videoIcon : this.controlIcon,
+            [item.lon, item.lat, 0], 'yl-dev', item,
+            this.clickDevice)
+        })
+        return
+      }
+      getDevice({}).then(res => {
+        // console.log(res.data, '设备点位')
+        this.markerList = [
+          {
+            "name": "设备1",
+            "lon": "114.859995",
+            "location": "江西省赣州市南康区三江乡",
+            "id": "1676397864375291905",
+            "lat": "25.802129",
+            "type": "1",
+            "typename": "视频设备",
+            statusName: '正常',
+            time: '2025-06-16 09:05:05',
+            in: '0',
+            out: '0',
+          },
+          {
+            "name": "设备2",
+            "lon": "114.861027",
+            "location": "江西省赣州市章贡区潭六路135号靠近逸夫小学",
+            "id": "1676398916763914241",
+            "lat": "25.757553",
+            "type": "2",
+            "typename": "门禁设备",
+            statusName: '正常',
+            time: '2025-06-16 09:05:05',
+            in: '0',
+            out: '0',
+          },
+          {
+            "name": "设备3",
+            "lon": "114.880246",
+            "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
+            "id": "1676414593390350337",
+            "lat": "25.753119",
+            "type": "1",
+            "typename": "视频设备",
+            statusName: '正常',
+            time: '2025-06-16 09:05:05',
+            in: '0',
+            out: '0',
+          },
+          {
+            "name": "设备4",
+            "lon": "114.879855",
+            "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
+            "id": "1676414955455254529",
+            "lat": "25.752771",
+            "type": "1",
+            "typename": "视频设备",
+            statusName: '正常',
+            time: '2025-06-16 09:05:05',
+            in: '0',
+            out: '0',
+          },
+          {
+            "name": "设备5",
+            "lon": "114.875438",
+            "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
+            "id": "1676418661630349312",
+            "lat": "25.748733",
+            "type": "2",
+            "typename": "门禁设备",
+            statusName: '正常',
+            time: '2025-06-16 09:05:05',
+            in: '0',
+            out: '0',
+          },
+          {
+            "name": "设备6",
+            "lon": "114.867371",
+            "location": "江西省赣州市章贡区105国道135号靠近松岭上",
+            "id": "1676422908220542977",
+            "lat": "25.750388",
+            "typename": "2",
+            "typename": "门禁设备",
+            statusName: '正常',
+            time: '2025-06-16 09:05:05',
+            in: '0',
+            out: '0',
+          },
+        ]
+        this.markerBakList = JSON.parse(JSON.stringify(this.markerList))
+        this.menus.device[0].total = this.markerList.filter((item) => item.type === '1').length
+        this.menus.device[1].total = this.markerList.filter((item) => item.type === '2').length
+        // 绘制点位
+        this.markerList.forEach((item) => {
+          AddLabelPoint(
+            item.id,
+            `${item.name}`,
+            item.type === '1' ? this.videoIcon : this.controlIcon,
+            [item.lon, item.lat, 0], 'yl-dev', item,
+            this.clickDevice)
+        })
+      })
+    },
+    menuClick(e) {
+      clearResetMap()
+      this.markerList = this.markerBakList.filter(item => item.type === e.type)
+      this.markerList.forEach((item) => {
+        AddLabelPoint(
+          item.id,
+          `${item.name}`,
+          item.type === '1' ? this.videoIcon : this.controlIcon,
+          [item.lon, item.lat, 0], 'yl-dev', item,
+          this.clickDevice)
+      })
+    },
+    // 设备点位点击
+    clickDevice(eventArg) {
+      const item = eventArg._data.data
+      this.showDevice = true
+      this.$nextTick(() => {
+        this.$refs.deviceRef.initData(item)
+      })
+    },
+    // 获取社区车辆
+    fetchCar() {
+      const drawMarker = (list) => {
+        const carIcon = require('@/assets/images/icon/环卫/车辆.png')
+        list.forEach((item) => {
+          AddLabelPoint(
+            item.id,
+            `${item.name}`,
+            carIcon,
+            [item.lon, item.lat, 0], 'yl-dev', item,
+            this.clickCar)
+        })
+      }
+      if (this.carList.length) {
+        drawMarker(this.carList)
+        return
+      }
+      getCar().then(res => {
+        // console.log(res.data, '社区车辆')
+        // this.carList = res.data.value
+        this.carList = [
+          {
+            "name": "停车场1",
+            "lon": "114.859995",
+            "location": "江西省赣州市南康区三江乡",
+            "id": "1676397864375291905",
+            "lat": "25.802129",
+            carNum: '50',
+            parkSpaceNum: '2',
+          },
+          {
+            "name": "停车场2",
+            "lon": "114.861027",
+            "location": "江西省赣州市章贡区潭六路135号靠近逸夫小学",
+            "id": "1676398916763914241",
+            "lat": "25.757553",
+            carNum: '88',
+            parkSpaceNum: '2',
+          },
+          {
+            "name": "停车场3",
+            "lon": "114.880246",
+            "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
+            "id": "1676414593390350337",
+            "lat": "25.753119",
+            carNum: '15',
+            parkSpaceNum: '1',
+          },
+        ]
+        drawMarker(this.carList)
+      })
+    },
+    // 点击社区车辆
+    clickCar(eventArg) {
+      const item = eventArg._data.data
+      this.showCar = true
+      this.$nextTick(() => {
+        this.$refs.carRef.initData(item)
+      })
+    },
+    // 事件时间查询条件
+    handleTimeRange(time) {
+      this.isListPage = false
+      if (this.time.startTime !== '') {
+        this.time = time
+        this.fetchCase()
+      } else {
+        this.time = time
+      }
+    },
+    // 获取事件
+    fetchCase() {
+      clearResetMap()
+      getCase(this.time).then(res => {
+        console.log(res.data, '事件点位')
+        res.data.value.forEach(item => {
+          AddLabelPoint(
+            item.id,
+            '',
+            this.caseIcon[item.status],
+            [item.lon, item.lat, 0], 'yl-case', item,
+            this.clickCase)
+        })
+      })
+    },
+    // 点击事件点位
+    clickCase(eventArg) {
+      const item = eventArg._data.data
+      // 查询事件详情
+      this.isListPage = true
+      this.caseListQuery = {
+        startTime: this.time.startTime,
+        endTime: this.time.endTime,
+        id: item.id,
+        pageNo: 0,
+        pageSize: 5
+      }
+      this.caseList = []
+      this.caseTotal = 0
+      this.searchCaseMarkerList()
+    },
+    // 事件详情分页
+    changePage(val) {
+      if (val && val.page) {
+        this.caseListQuery.pageNo = val.page
+      }
+      this.searchCaseMarkerList()
+    },
+    searchCaseMarkerList() {
+      getCaseList(this.caseListQuery).then(res => {
+        console.log(res.data, ' 时间性情')
+        this.caseList = res.data.value
+        this.caseTotal = res.data.valueSize
+      })
+    }
+  },
+
+
+}
+</script>
+
+<style scoped>
+.video-menu {
+  display: flex;
+  z-index: 111111111;
+  width: 40rem;
+  height: 5rem;
+  position: absolute;
+  left: 20px;
+  top: 1rem;
+}
+</style>
diff --git a/src/pages/ywts/ywts.vue b/src/pages/ywts/ywts.vue
index 99a5d69..80b53f9 100644
--- a/src/pages/ywts/ywts.vue
+++ b/src/pages/ywts/ywts.vue
@@ -1,23 +1,17 @@
 <template>
   <div>
-    <common-function/>
-    <freedo-map map-key="ywts"/>
-    <div class="csdz-menu" :style="`bottom: ${Number(size)/3}rem`">
-      <menu-btn v-for="(item, index) of menus" :key="index"
-                :id="`${item}Btn`"
-                :bg="bg[index]"
-                :bg-hover="bgHover[index]"
-                :text="menuName[index]"
-                :hasChildren="showChildren[index]"
-                :children="children[index]"
-                @menuHover="menuHover"
-                @btnClick="btnClick"/>
-      </div>
-    <transition mode="out-in" class="function-menu" v-show="currentComp!==''">
-      <component :is="currentComp"/>
+    <common-function />
+    <freedo-map map-key="ywts" />
+    <div class="csdz-menu" :style="`bottom: ${Number(size) / 3}rem`">
+      <menu-btn v-for="(item, index) of menus" :key="index" :id="`${item}Btn`" :bg="bg[index]"
+        :bg-hover="bgHover[index]" :text="menuName[index]" :hasChildren="showChildren[index]"
+        :children="children[index]" @menuHover="menuHover" @btnClick="btnClick" />
+    </div>
+    <transition mode="out-in" class="function-menu" v-show="currentComp !== ''">
+      <component :is="currentComp" />
     </transition>
-<!--    <list-page :list="pageList" :type="pageType" :has-urge="false"/>-->
-<!--    <list-info :data="pageInfo" :list="flowList"/>-->
+    <!--    <list-page :list="pageList" :type="pageType" :has-urge="false"/>-->
+    <!--    <list-info :data="pageInfo" :list="flowList"/>-->
   </div>
 </template>
 <script>
@@ -29,6 +23,7 @@
 import FreedoMap from "@/components/Freedo/Freedo";
 import { clearUpMap } from "@/utils/freedo/index"
 import Jy from "./shms/jy";
+import Sq from './shms/sq';
 import Gd from "./cszl/gd";
 import Jxh from "./cszl/jxh";
 import Hw from "./cszl/hw";
@@ -38,13 +33,14 @@
 import Jt from "./cszl/jt";
 import Yj from "./cszl/yj";
 
+
 export default {
-  components: {Yj, Jt, Gw, Yl, Hw, Jxh, Gd, Jy,Hb, FreedoMap, ListInfo, ListPage, CommonFunction, MenuBtn },
+  components: { Yj, Jt, Gw, Yl, Hw, Jxh, Gd, Jy, Hb, Sq, FreedoMap, ListInfo, ListPage, CommonFunction, MenuBtn },
   data() {
     var pmtsManager
     return {
-      menus: ['cszl','shms', 'zyhj', 'cyjj'],
-      menuName: ['城市治理','社会民生', '资源环境', '产业经济'],
+      menus: ['cszl', 'shms', 'zyhj', 'cyjj'],
+      menuName: ['城市治理', '社会民生', '资源环境', '产业经济'],
       showChildren: [false, false, false, false],
       pageInfo: {
         id: '1',
@@ -78,15 +74,15 @@
       flowList: [
         {
           time: '2022-12-12 12:12:12',
-          sendPerson:'发送人',
+          sendPerson: '发送人',
           receivePerson: '接收人',
           detail: '处置详情',
           picUrl: '处置图片',
           title: '流程标题',
           id: '1'
-        },  {
+        }, {
           time: '2023-01-12 12:12:12',
-          sendPerson:'发送人',
+          sendPerson: '发送人',
           receivePerson: '接收人',
           detail: '处置详情',
           picUrl: '处置图片',
@@ -94,7 +90,7 @@
           id: '2'
         }, {
           time: '2023-02-12 12:12:12',
-          sendPerson:'发送人',
+          sendPerson: '发送人',
           receivePerson: '接收人',
           detail: '处置详情',
           picUrl: '处置图片',
@@ -163,20 +159,20 @@
       size: '10',
       currentComp: '',
       children: [[
-        {name: '应急',value: 'yj'},
-        {name: '管网',value: 'gw'},
-        {name: '精细化',value: 'jxh'},
-        {name: '交通',value: 'jt'},
-        {name: '工地',value: 'gd'},
-        {name: '环卫',value: 'hw'},
+        { name: '应急', value: 'yj' },
+        { name: '管网', value: 'gw' },
+        { name: '精细化', value: 'jxh' },
+        { name: '交通', value: 'jt' },
+        { name: '工地', value: 'gd' },
+        { name: '环卫', value: 'hw' },
       ], [
-        {name: '社区',value: 'sq'},
-        {name: '教育',value: 'jy'}
+        { name: '社区', value: 'sq' },
+        { name: '教育', value: 'jy' }
       ], [
-        {name: '环保',value: 'hb'},
-        {name: '园林',value: 'yl'}
+        { name: '环保', value: 'hb' },
+        { name: '园林', value: 'yl' }
       ], [
-        {name: '产业',value: 'cy'}
+        { name: '产业', value: 'cy' }
       ]],
       bg: [
         require('../../assets/images/menubtn/城市治理未选中.png'),
@@ -192,10 +188,10 @@
       ]
     }
   },
-  mounted(){
+  mounted() {
   },
   methods: {
-    calSize () {
+    calSize() {
       const width = document.body.clientWidth
       if (width >= 1920) {
         this.size = '10'
@@ -205,7 +201,7 @@
     },
     menuHover(id) {
       this.showChildren = [false, false, false, false]
-      switch(id) {
+      switch (id) {
         case "cszlBtn":
           this.showChildren[0] = true
           break
@@ -221,9 +217,11 @@
       }
     },
     btnClick(item) {
+      console.log(item, 'item')
       clearUpMap()
       this.showChildren = [false, false, false, false]
       this.currentComp = item.value
+      console.log(item.value, 'item.value')
     }
   }
 };
@@ -237,6 +235,7 @@
   width: 44%;
   z-index: 1111111111;
 }
+
 /*.function-menu {*/
 /*  position: absolute;*/
 /*  left: 20px;*/