diff --git a/src/api/map.js b/src/api/map.js
index afdfa8b..b1ee1b5 100644
--- a/src/api/map.js
+++ b/src/api/map.js
@@ -35,6 +35,7 @@
   })
 }
 
+// ---------------------------------------------------------------------------------------
 export function fetchCommunityInfo () {
   return request({
     baseURL: config.mockUrl,
@@ -43,3 +44,13 @@
     method: 'post'
   })
 }
+
+// 区域人口
+export function fetchAreaPopulation () {
+  return request({
+    baseURL: config.mockUrl,
+    url: 'population/area',
+    data: {},
+    method: 'post'
+  })
+}

diff --git a/src/api/map.js b/src/api/map.js
index afdfa8b..b1ee1b5 100644
--- a/src/api/map.js
+++ b/src/api/map.js
@@ -35,6 +35,7 @@
   })
 }
 
+// ---------------------------------------------------------------------------------------
 export function fetchCommunityInfo () {
   return request({
     baseURL: config.mockUrl,
@@ -43,3 +44,13 @@
     method: 'post'
   })
 }
+
+// 区域人口
+export function fetchAreaPopulation () {
+  return request({
+    baseURL: config.mockUrl,
+    url: 'population/area',
+    data: {},
+    method: 'post'
+  })
+}
diff --git a/src/views/cityManage/components/introduce/components/eventBar.vue b/src/views/cityManage/components/introduce/components/eventBar.vue
new file mode 100644
index 0000000..5245255
--- /dev/null
+++ b/src/views/cityManage/components/introduce/components/eventBar.vue
@@ -0,0 +1,57 @@
+<template>
+  <single-layout  title="事件数量趋势">
+    <div style="width: 100%;height:100%;">
+      <simple-bar-chart
+        :id="options.id"
+        :unit="options.unit"
+        :height="options.height"
+        :xAxisData="options.xAxisData"
+        :seriesData="options.seriesData"
+      />
+    </div>
+  </single-layout>
+</template>
+
+<script>
+import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
+import ChartLayout from '@/components/layout/chartLayout'
+import {fetchPipeCount} from '@/api/cityManage'
+import SingleLayout from '@/components/layout/singleLayout'
+import SimpleBarChart from '@/components/barChart/simpleBarChart'
+import mockData from '../../../../../../static/city.json'
+export default {
+  name: 'schoolCaseBar',
+  components: {SimpleBarChart, SingleLayout, ChartLayout, ColorfulBarChart},
+  data () {
+    return {
+      options: {
+        id: 'school_case_bar',
+        height: '100%',
+        width: '100%',
+        unit: '件',
+        xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        seriesData: [0, 0, 0, 0, 0, 0, 0]
+      }
+    }
+  },
+  created () {
+    this.getData()
+  },
+  methods: {
+    getData () {
+      // fetchPipeCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.name })
+      //     this.options.seriesData = data.map(item => { return item.value })
+      //   }
+      // })
+      this.options.seriesData = mockData.adolescent.schoolEventTrends
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

diff --git a/src/api/map.js b/src/api/map.js
index afdfa8b..b1ee1b5 100644
--- a/src/api/map.js
+++ b/src/api/map.js
@@ -35,6 +35,7 @@
   })
 }
 
+// ---------------------------------------------------------------------------------------
 export function fetchCommunityInfo () {
   return request({
     baseURL: config.mockUrl,
@@ -43,3 +44,13 @@
     method: 'post'
   })
 }
+
+// 区域人口
+export function fetchAreaPopulation () {
+  return request({
+    baseURL: config.mockUrl,
+    url: 'population/area',
+    data: {},
+    method: 'post'
+  })
+}
diff --git a/src/views/cityManage/components/introduce/components/eventBar.vue b/src/views/cityManage/components/introduce/components/eventBar.vue
new file mode 100644
index 0000000..5245255
--- /dev/null
+++ b/src/views/cityManage/components/introduce/components/eventBar.vue
@@ -0,0 +1,57 @@
+<template>
+  <single-layout  title="事件数量趋势">
+    <div style="width: 100%;height:100%;">
+      <simple-bar-chart
+        :id="options.id"
+        :unit="options.unit"
+        :height="options.height"
+        :xAxisData="options.xAxisData"
+        :seriesData="options.seriesData"
+      />
+    </div>
+  </single-layout>
+</template>
+
+<script>
+import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
+import ChartLayout from '@/components/layout/chartLayout'
+import {fetchPipeCount} from '@/api/cityManage'
+import SingleLayout from '@/components/layout/singleLayout'
+import SimpleBarChart from '@/components/barChart/simpleBarChart'
+import mockData from '../../../../../../static/city.json'
+export default {
+  name: 'schoolCaseBar',
+  components: {SimpleBarChart, SingleLayout, ChartLayout, ColorfulBarChart},
+  data () {
+    return {
+      options: {
+        id: 'school_case_bar',
+        height: '100%',
+        width: '100%',
+        unit: '件',
+        xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        seriesData: [0, 0, 0, 0, 0, 0, 0]
+      }
+    }
+  },
+  created () {
+    this.getData()
+  },
+  methods: {
+    getData () {
+      // fetchPipeCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.name })
+      //     this.options.seriesData = data.map(item => { return item.value })
+      //   }
+      // })
+      this.options.seriesData = mockData.adolescent.schoolEventTrends
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/views/cityManage/components/introduce/introduce.vue b/src/views/cityManage/components/introduce/introduce.vue
index 978daff..00f6993 100644
--- a/src/views/cityManage/components/introduce/introduce.vue
+++ b/src/views/cityManage/components/introduce/introduce.vue
@@ -6,10 +6,18 @@
 <template>
   <chart-layout title="整体概况" @click="getData">
     <div class="block-container">
-      <div class="block" v-for="(value,key,index) in data" :key="index">
-        <simple-block :data="value">
-          <img :src="images[key]">
-        </simple-block>
+      <div style="width:50%; display: flex;flex-wrap: wrap;justify-content: space-around;">
+        <div v-for="(value,key,index) in data" :key="index">
+          <simple-block :data="value">
+            <img :src="images[key]">
+          </simple-block>
+        </div>
+      </div>
+      <div class="block" style="width:25%">
+        <!-- <youth-crime-bar/> -->
+      </div>
+      <div class="block" style="width:25%">
+        <!-- <school-count/> -->
       </div>
     </div>
     <corner1 slot="corner"/>

diff --git a/src/api/map.js b/src/api/map.js
index afdfa8b..b1ee1b5 100644
--- a/src/api/map.js
+++ b/src/api/map.js
@@ -35,6 +35,7 @@
   })
 }
 
+// ---------------------------------------------------------------------------------------
 export function fetchCommunityInfo () {
   return request({
     baseURL: config.mockUrl,
@@ -43,3 +44,13 @@
     method: 'post'
   })
 }
+
+// 区域人口
+export function fetchAreaPopulation () {
+  return request({
+    baseURL: config.mockUrl,
+    url: 'population/area',
+    data: {},
+    method: 'post'
+  })
+}
diff --git a/src/views/cityManage/components/introduce/components/eventBar.vue b/src/views/cityManage/components/introduce/components/eventBar.vue
new file mode 100644
index 0000000..5245255
--- /dev/null
+++ b/src/views/cityManage/components/introduce/components/eventBar.vue
@@ -0,0 +1,57 @@
+<template>
+  <single-layout  title="事件数量趋势">
+    <div style="width: 100%;height:100%;">
+      <simple-bar-chart
+        :id="options.id"
+        :unit="options.unit"
+        :height="options.height"
+        :xAxisData="options.xAxisData"
+        :seriesData="options.seriesData"
+      />
+    </div>
+  </single-layout>
+</template>
+
+<script>
+import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
+import ChartLayout from '@/components/layout/chartLayout'
+import {fetchPipeCount} from '@/api/cityManage'
+import SingleLayout from '@/components/layout/singleLayout'
+import SimpleBarChart from '@/components/barChart/simpleBarChart'
+import mockData from '../../../../../../static/city.json'
+export default {
+  name: 'schoolCaseBar',
+  components: {SimpleBarChart, SingleLayout, ChartLayout, ColorfulBarChart},
+  data () {
+    return {
+      options: {
+        id: 'school_case_bar',
+        height: '100%',
+        width: '100%',
+        unit: '件',
+        xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        seriesData: [0, 0, 0, 0, 0, 0, 0]
+      }
+    }
+  },
+  created () {
+    this.getData()
+  },
+  methods: {
+    getData () {
+      // fetchPipeCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.name })
+      //     this.options.seriesData = data.map(item => { return item.value })
+      //   }
+      // })
+      this.options.seriesData = mockData.adolescent.schoolEventTrends
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/views/cityManage/components/introduce/introduce.vue b/src/views/cityManage/components/introduce/introduce.vue
index 978daff..00f6993 100644
--- a/src/views/cityManage/components/introduce/introduce.vue
+++ b/src/views/cityManage/components/introduce/introduce.vue
@@ -6,10 +6,18 @@
 <template>
   <chart-layout title="整体概况" @click="getData">
     <div class="block-container">
-      <div class="block" v-for="(value,key,index) in data" :key="index">
-        <simple-block :data="value">
-          <img :src="images[key]">
-        </simple-block>
+      <div style="width:50%; display: flex;flex-wrap: wrap;justify-content: space-around;">
+        <div v-for="(value,key,index) in data" :key="index">
+          <simple-block :data="value">
+            <img :src="images[key]">
+          </simple-block>
+        </div>
+      </div>
+      <div class="block" style="width:25%">
+        <!-- <youth-crime-bar/> -->
+      </div>
+      <div class="block" style="width:25%">
+        <!-- <school-count/> -->
       </div>
     </div>
     <corner1 slot="corner"/>
diff --git a/src/views/mapViews/components/population/population.vue b/src/views/mapViews/components/population/population.vue
new file mode 100644
index 0000000..2332fc9
--- /dev/null
+++ b/src/views/mapViews/components/population/population.vue
@@ -0,0 +1,176 @@
+<!-- 人口分布 -->
+<template>
+  <!-- <div> -->
+    <div class="bottom" >
+      <!-- <i class="el-icon-close close-pop" @click="$emit('close')" /> -->
+      <div class="block-container">
+        <div style="width: 50%;height: 45%;" v-for="(value,key,index) in data" :key="index">
+          <simple-block :data="value">
+            <img :src="images[key]" style="width: 40px;height: 30px;">
+          </simple-block>
+        </div>
+      </div>
+      <div class="block">
+        <div class="title">各类型案件数</div>
+        <div class="chart-wrapper">
+          <colorful-bar-chart
+            id="population1"
+            :unit="options.unit"
+            :height="options.height"
+            :xAxisData="options.barXData"
+            :seriesData="options.barYData"
+          />
+        </div>
+      </div>
+      <div class="block">
+        <div class="title">各年份案件数</div>
+        <div class="chart-wrapper">
+          <gradient-line-chart
+            id="communityInfo2"
+            :unit="options.unit"
+            :height="options.height"
+            :legend="options.xAxisData"
+            :xAxisData="options.lineXData"
+            :seriesData="options.lineYData"
+          />
+        </div>
+      </div>
+    </div>
+  <!-- </div> -->
+</template>
+
+<script>
+// import { showPositin } from '@/utils/freedo/index'
+import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
+import GradientLineChart from '@/components/lineChart/gradientLineChart'
+import { fetchAreaPopulation } from '@/api/map'
+export default {
+  name: 'tcyPopup',
+  components: {GradientLineChart, ColorfulBarChart},
+  data () {
+    return {
+      data: {
+        changzhu: {name: '总常住人口', value: '', unit: '人'},
+        liudong: {name: '户籍人口', value: '', unit: '人'},
+        huji: {name: '高校师生', value: '', unit: '人'},
+        zanzhu: {name: '流动人口', value: '', unit: '人'}
+      },
+      images: {
+        changzhu: require('@/assets/images/city/icon-changzhu.png'),
+        liudong: require('@/assets/images/city/icon-liudong.png'),
+        huji: require('@/assets/images/city/icon-xuncha.png'),
+        liushou: require('@/assets/images/city/icon-shouli.png'),
+        gaoxiao: require('@/assets/images/city/icon-shouli.png')
+      },
+      options: {
+        id: 'case_line1',
+        height: '100%',
+        width: '100%',
+        unit: '个',
+        barXData: [],
+        barYData: [],
+        lineXData: [],
+        lineYData: [
+          // {name: '案件总数', data: [120, 252, 101, 134, 290, 230, 110], color: '255,45,85'},
+          // {name: '处理数', data: [110, 222, 91, 82, 278, 200, 91], color: '0,144,255'}
+        ]
+      },
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'), // 背景图片
+      list: ['', '', '', ''],
+      tcyInfo: {},
+      windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
+      statusColor: {
+        1: '#a1a1a1',
+        2: '#f8e31a',
+        3: '#5ab1fc',
+        4: '#f89835',
+        5: '#3def83'
+      },
+      urgencyColor: {
+        'C': '#2f8d00',
+        'B': '#c4ad00',
+        'A': '#8d0000'
+      },
+      heightDict: {
+        normal: '135px',
+        video: '300px'
+      }
+    }
+  },
+  methods: {
+    initData () {
+      console.log('请求区域人口数据')
+      fetchAreaPopulation().then(res => {
+        if (res.code === 200) {
+          this.data = res.data.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bottom {
+  z-index: 111111111111;
+  width: 4rem;
+  height: 1rem;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  // overflow: hidden;
+  // padding: 0px 0px;
+  gap: 10px; /* 新增：两个盒子之间的间距 */
+  padding: 0 5px;
+  box-sizing: border-box; /* 新增：避免padding增加总宽度 */
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    // 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;
+    margin: 0; /* 移除原margin，用gap控制间距 */
+  }
+  .chart-wrapper {
+    flex: 1;
+    // padding: 0.1rem;
+    box-sizing: border-box; /* 关键：padding不增加实际高度 */
+  }
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 16px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+}
+.block-base {
+  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);
+}
+
+.ellipsis {
+  white-space: nowrap;      /* 防止文本换行 */
+  overflow: hidden;         /* 隐藏溢出的文本 */
+  text-overflow: ellipsis;  /* 用省略号表示溢出的文本 */
+}
+.ellipsis-multiline {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2; /* 限制显示的行数 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

diff --git a/src/api/map.js b/src/api/map.js
index afdfa8b..b1ee1b5 100644
--- a/src/api/map.js
+++ b/src/api/map.js
@@ -35,6 +35,7 @@
   })
 }
 
+// ---------------------------------------------------------------------------------------
 export function fetchCommunityInfo () {
   return request({
     baseURL: config.mockUrl,
@@ -43,3 +44,13 @@
     method: 'post'
   })
 }
+
+// 区域人口
+export function fetchAreaPopulation () {
+  return request({
+    baseURL: config.mockUrl,
+    url: 'population/area',
+    data: {},
+    method: 'post'
+  })
+}
diff --git a/src/views/cityManage/components/introduce/components/eventBar.vue b/src/views/cityManage/components/introduce/components/eventBar.vue
new file mode 100644
index 0000000..5245255
--- /dev/null
+++ b/src/views/cityManage/components/introduce/components/eventBar.vue
@@ -0,0 +1,57 @@
+<template>
+  <single-layout  title="事件数量趋势">
+    <div style="width: 100%;height:100%;">
+      <simple-bar-chart
+        :id="options.id"
+        :unit="options.unit"
+        :height="options.height"
+        :xAxisData="options.xAxisData"
+        :seriesData="options.seriesData"
+      />
+    </div>
+  </single-layout>
+</template>
+
+<script>
+import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
+import ChartLayout from '@/components/layout/chartLayout'
+import {fetchPipeCount} from '@/api/cityManage'
+import SingleLayout from '@/components/layout/singleLayout'
+import SimpleBarChart from '@/components/barChart/simpleBarChart'
+import mockData from '../../../../../../static/city.json'
+export default {
+  name: 'schoolCaseBar',
+  components: {SimpleBarChart, SingleLayout, ChartLayout, ColorfulBarChart},
+  data () {
+    return {
+      options: {
+        id: 'school_case_bar',
+        height: '100%',
+        width: '100%',
+        unit: '件',
+        xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        seriesData: [0, 0, 0, 0, 0, 0, 0]
+      }
+    }
+  },
+  created () {
+    this.getData()
+  },
+  methods: {
+    getData () {
+      // fetchPipeCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.name })
+      //     this.options.seriesData = data.map(item => { return item.value })
+      //   }
+      // })
+      this.options.seriesData = mockData.adolescent.schoolEventTrends
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/views/cityManage/components/introduce/introduce.vue b/src/views/cityManage/components/introduce/introduce.vue
index 978daff..00f6993 100644
--- a/src/views/cityManage/components/introduce/introduce.vue
+++ b/src/views/cityManage/components/introduce/introduce.vue
@@ -6,10 +6,18 @@
 <template>
   <chart-layout title="整体概况" @click="getData">
     <div class="block-container">
-      <div class="block" v-for="(value,key,index) in data" :key="index">
-        <simple-block :data="value">
-          <img :src="images[key]">
-        </simple-block>
+      <div style="width:50%; display: flex;flex-wrap: wrap;justify-content: space-around;">
+        <div v-for="(value,key,index) in data" :key="index">
+          <simple-block :data="value">
+            <img :src="images[key]">
+          </simple-block>
+        </div>
+      </div>
+      <div class="block" style="width:25%">
+        <!-- <youth-crime-bar/> -->
+      </div>
+      <div class="block" style="width:25%">
+        <!-- <school-count/> -->
       </div>
     </div>
     <corner1 slot="corner"/>
diff --git a/src/views/mapViews/components/population/population.vue b/src/views/mapViews/components/population/population.vue
new file mode 100644
index 0000000..2332fc9
--- /dev/null
+++ b/src/views/mapViews/components/population/population.vue
@@ -0,0 +1,176 @@
+<!-- 人口分布 -->
+<template>
+  <!-- <div> -->
+    <div class="bottom" >
+      <!-- <i class="el-icon-close close-pop" @click="$emit('close')" /> -->
+      <div class="block-container">
+        <div style="width: 50%;height: 45%;" v-for="(value,key,index) in data" :key="index">
+          <simple-block :data="value">
+            <img :src="images[key]" style="width: 40px;height: 30px;">
+          </simple-block>
+        </div>
+      </div>
+      <div class="block">
+        <div class="title">各类型案件数</div>
+        <div class="chart-wrapper">
+          <colorful-bar-chart
+            id="population1"
+            :unit="options.unit"
+            :height="options.height"
+            :xAxisData="options.barXData"
+            :seriesData="options.barYData"
+          />
+        </div>
+      </div>
+      <div class="block">
+        <div class="title">各年份案件数</div>
+        <div class="chart-wrapper">
+          <gradient-line-chart
+            id="communityInfo2"
+            :unit="options.unit"
+            :height="options.height"
+            :legend="options.xAxisData"
+            :xAxisData="options.lineXData"
+            :seriesData="options.lineYData"
+          />
+        </div>
+      </div>
+    </div>
+  <!-- </div> -->
+</template>
+
+<script>
+// import { showPositin } from '@/utils/freedo/index'
+import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
+import GradientLineChart from '@/components/lineChart/gradientLineChart'
+import { fetchAreaPopulation } from '@/api/map'
+export default {
+  name: 'tcyPopup',
+  components: {GradientLineChart, ColorfulBarChart},
+  data () {
+    return {
+      data: {
+        changzhu: {name: '总常住人口', value: '', unit: '人'},
+        liudong: {name: '户籍人口', value: '', unit: '人'},
+        huji: {name: '高校师生', value: '', unit: '人'},
+        zanzhu: {name: '流动人口', value: '', unit: '人'}
+      },
+      images: {
+        changzhu: require('@/assets/images/city/icon-changzhu.png'),
+        liudong: require('@/assets/images/city/icon-liudong.png'),
+        huji: require('@/assets/images/city/icon-xuncha.png'),
+        liushou: require('@/assets/images/city/icon-shouli.png'),
+        gaoxiao: require('@/assets/images/city/icon-shouli.png')
+      },
+      options: {
+        id: 'case_line1',
+        height: '100%',
+        width: '100%',
+        unit: '个',
+        barXData: [],
+        barYData: [],
+        lineXData: [],
+        lineYData: [
+          // {name: '案件总数', data: [120, 252, 101, 134, 290, 230, 110], color: '255,45,85'},
+          // {name: '处理数', data: [110, 222, 91, 82, 278, 200, 91], color: '0,144,255'}
+        ]
+      },
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'), // 背景图片
+      list: ['', '', '', ''],
+      tcyInfo: {},
+      windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
+      statusColor: {
+        1: '#a1a1a1',
+        2: '#f8e31a',
+        3: '#5ab1fc',
+        4: '#f89835',
+        5: '#3def83'
+      },
+      urgencyColor: {
+        'C': '#2f8d00',
+        'B': '#c4ad00',
+        'A': '#8d0000'
+      },
+      heightDict: {
+        normal: '135px',
+        video: '300px'
+      }
+    }
+  },
+  methods: {
+    initData () {
+      console.log('请求区域人口数据')
+      fetchAreaPopulation().then(res => {
+        if (res.code === 200) {
+          this.data = res.data.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bottom {
+  z-index: 111111111111;
+  width: 4rem;
+  height: 1rem;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  // overflow: hidden;
+  // padding: 0px 0px;
+  gap: 10px; /* 新增：两个盒子之间的间距 */
+  padding: 0 5px;
+  box-sizing: border-box; /* 新增：避免padding增加总宽度 */
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    // 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;
+    margin: 0; /* 移除原margin，用gap控制间距 */
+  }
+  .chart-wrapper {
+    flex: 1;
+    // padding: 0.1rem;
+    box-sizing: border-box; /* 关键：padding不增加实际高度 */
+  }
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 16px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+}
+.block-base {
+  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);
+}
+
+.ellipsis {
+  white-space: nowrap;      /* 防止文本换行 */
+  overflow: hidden;         /* 隐藏溢出的文本 */
+  text-overflow: ellipsis;  /* 用省略号表示溢出的文本 */
+}
+.ellipsis-multiline {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2; /* 限制显示的行数 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/src/views/mapViews/mars3dMap.vue b/src/views/mapViews/mars3dMap.vue
index 0a648b6..925a6b9 100644
--- a/src/views/mapViews/mars3dMap.vue
+++ b/src/views/mapViews/mars3dMap.vue
@@ -36,8 +36,9 @@
           <div class="prism-player" id="player-con"></div>
         </div>
       </div>
-      <div v-show="showCommunityInfo" class="communityInfo">
-        <communityInfo ref="communityInfoRef"/>
+      <div class="communityInfo">
+        <communityInfo v-show="showCommunityInfo"  ref="communityInfoRef"/>
+        <population ref="populationRef"/>
       </div>
     </div>
   </div>
@@ -58,11 +59,12 @@
 import MapFrame from './mapFrame'
 import {fetchVideoToken, fetchFlushVideoToken, fetchVideo} from '@/api/camera'
 import communityInfo from './components/communityInfo.vue'
+import population from './components/population/population.vue'
 // 导入必须的样式表
 var Cesium = require('../../../node_modules/cesium/Source/Cesium')
 export default {
   name: 'Mars3dMap',
-  components: {MapFrame, Button2, Button3, communityInfo},
+  components: {MapFrame, Button2, Button3, communityInfo, population},
   data () {
     return {
       top: '250px',
@@ -103,18 +105,6 @@
         //     {index: '27', name: '智慧交通', children: []}],
         //   layersShow: [false, false, false, false, false, false]
         // },
-        {
-          index: '03',
-          name: '视频云',
-          children: [
-            {index: '31', name: '智慧交通', children: ['卡口', '电警', 'AR鹰眼']},
-            {index: '32', name: '智慧工地', children: []},
-            {index: '33', name: '智慧社区', children: []},
-            {index: '34', name: '智慧园林', children: []},
-            {index: '35', name: '智慧公安', children: []},
-            {index: '36', name: '智慧教育', children: []}],
-          layersShow: [false, false, false, false, false, false]
-        },
         // {
         //   index: '04',
         //   name: '一卡通',
@@ -131,6 +121,16 @@
         //   layersShow: []
         // },
         {
+          index: '02',
+          name: '人口分布',
+          children: [
+            {index: 'new03', name: '区域人口统计', children: []},
+            {index: 'new04', name: '网格人口统计', children: []},
+            {index: 'new05', name: '楼栋人口统计', children: []}
+          ],
+          layersShow: [false, false, false, false, false, false]
+        },
+        {
           index: '04',
           name: '各场所分布',
           children: [
@@ -165,6 +165,18 @@
       ],
       labelsRight: [
         {
+          index: '03',
+          name: '视频云',
+          children: [
+            {index: '31', name: '智慧交通', children: ['卡口', '电警', 'AR鹰眼']},
+            {index: '32', name: '智慧工地', children: []},
+            {index: '33', name: '智慧社区', children: []},
+            {index: '34', name: '智慧园林', children: []},
+            {index: '35', name: '智慧公安', children: []},
+            {index: '36', name: '智慧教育', children: []}],
+          layersShow: [false, false, false, false, false, false]
+        },
+        {
           index: '',
           name: '市域社会治理',
           children: [

diff --git a/src/api/map.js b/src/api/map.js
index afdfa8b..b1ee1b5 100644
--- a/src/api/map.js
+++ b/src/api/map.js
@@ -35,6 +35,7 @@
   })
 }
 
+// ---------------------------------------------------------------------------------------
 export function fetchCommunityInfo () {
   return request({
     baseURL: config.mockUrl,
@@ -43,3 +44,13 @@
     method: 'post'
   })
 }
+
+// 区域人口
+export function fetchAreaPopulation () {
+  return request({
+    baseURL: config.mockUrl,
+    url: 'population/area',
+    data: {},
+    method: 'post'
+  })
+}
diff --git a/src/views/cityManage/components/introduce/components/eventBar.vue b/src/views/cityManage/components/introduce/components/eventBar.vue
new file mode 100644
index 0000000..5245255
--- /dev/null
+++ b/src/views/cityManage/components/introduce/components/eventBar.vue
@@ -0,0 +1,57 @@
+<template>
+  <single-layout  title="事件数量趋势">
+    <div style="width: 100%;height:100%;">
+      <simple-bar-chart
+        :id="options.id"
+        :unit="options.unit"
+        :height="options.height"
+        :xAxisData="options.xAxisData"
+        :seriesData="options.seriesData"
+      />
+    </div>
+  </single-layout>
+</template>
+
+<script>
+import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
+import ChartLayout from '@/components/layout/chartLayout'
+import {fetchPipeCount} from '@/api/cityManage'
+import SingleLayout from '@/components/layout/singleLayout'
+import SimpleBarChart from '@/components/barChart/simpleBarChart'
+import mockData from '../../../../../../static/city.json'
+export default {
+  name: 'schoolCaseBar',
+  components: {SimpleBarChart, SingleLayout, ChartLayout, ColorfulBarChart},
+  data () {
+    return {
+      options: {
+        id: 'school_case_bar',
+        height: '100%',
+        width: '100%',
+        unit: '件',
+        xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        seriesData: [0, 0, 0, 0, 0, 0, 0]
+      }
+    }
+  },
+  created () {
+    this.getData()
+  },
+  methods: {
+    getData () {
+      // fetchPipeCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.name })
+      //     this.options.seriesData = data.map(item => { return item.value })
+      //   }
+      // })
+      this.options.seriesData = mockData.adolescent.schoolEventTrends
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/views/cityManage/components/introduce/introduce.vue b/src/views/cityManage/components/introduce/introduce.vue
index 978daff..00f6993 100644
--- a/src/views/cityManage/components/introduce/introduce.vue
+++ b/src/views/cityManage/components/introduce/introduce.vue
@@ -6,10 +6,18 @@
 <template>
   <chart-layout title="整体概况" @click="getData">
     <div class="block-container">
-      <div class="block" v-for="(value,key,index) in data" :key="index">
-        <simple-block :data="value">
-          <img :src="images[key]">
-        </simple-block>
+      <div style="width:50%; display: flex;flex-wrap: wrap;justify-content: space-around;">
+        <div v-for="(value,key,index) in data" :key="index">
+          <simple-block :data="value">
+            <img :src="images[key]">
+          </simple-block>
+        </div>
+      </div>
+      <div class="block" style="width:25%">
+        <!-- <youth-crime-bar/> -->
+      </div>
+      <div class="block" style="width:25%">
+        <!-- <school-count/> -->
       </div>
     </div>
     <corner1 slot="corner"/>
diff --git a/src/views/mapViews/components/population/population.vue b/src/views/mapViews/components/population/population.vue
new file mode 100644
index 0000000..2332fc9
--- /dev/null
+++ b/src/views/mapViews/components/population/population.vue
@@ -0,0 +1,176 @@
+<!-- 人口分布 -->
+<template>
+  <!-- <div> -->
+    <div class="bottom" >
+      <!-- <i class="el-icon-close close-pop" @click="$emit('close')" /> -->
+      <div class="block-container">
+        <div style="width: 50%;height: 45%;" v-for="(value,key,index) in data" :key="index">
+          <simple-block :data="value">
+            <img :src="images[key]" style="width: 40px;height: 30px;">
+          </simple-block>
+        </div>
+      </div>
+      <div class="block">
+        <div class="title">各类型案件数</div>
+        <div class="chart-wrapper">
+          <colorful-bar-chart
+            id="population1"
+            :unit="options.unit"
+            :height="options.height"
+            :xAxisData="options.barXData"
+            :seriesData="options.barYData"
+          />
+        </div>
+      </div>
+      <div class="block">
+        <div class="title">各年份案件数</div>
+        <div class="chart-wrapper">
+          <gradient-line-chart
+            id="communityInfo2"
+            :unit="options.unit"
+            :height="options.height"
+            :legend="options.xAxisData"
+            :xAxisData="options.lineXData"
+            :seriesData="options.lineYData"
+          />
+        </div>
+      </div>
+    </div>
+  <!-- </div> -->
+</template>
+
+<script>
+// import { showPositin } from '@/utils/freedo/index'
+import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
+import GradientLineChart from '@/components/lineChart/gradientLineChart'
+import { fetchAreaPopulation } from '@/api/map'
+export default {
+  name: 'tcyPopup',
+  components: {GradientLineChart, ColorfulBarChart},
+  data () {
+    return {
+      data: {
+        changzhu: {name: '总常住人口', value: '', unit: '人'},
+        liudong: {name: '户籍人口', value: '', unit: '人'},
+        huji: {name: '高校师生', value: '', unit: '人'},
+        zanzhu: {name: '流动人口', value: '', unit: '人'}
+      },
+      images: {
+        changzhu: require('@/assets/images/city/icon-changzhu.png'),
+        liudong: require('@/assets/images/city/icon-liudong.png'),
+        huji: require('@/assets/images/city/icon-xuncha.png'),
+        liushou: require('@/assets/images/city/icon-shouli.png'),
+        gaoxiao: require('@/assets/images/city/icon-shouli.png')
+      },
+      options: {
+        id: 'case_line1',
+        height: '100%',
+        width: '100%',
+        unit: '个',
+        barXData: [],
+        barYData: [],
+        lineXData: [],
+        lineYData: [
+          // {name: '案件总数', data: [120, 252, 101, 134, 290, 230, 110], color: '255,45,85'},
+          // {name: '处理数', data: [110, 222, 91, 82, 278, 200, 91], color: '0,144,255'}
+        ]
+      },
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'), // 背景图片
+      list: ['', '', '', ''],
+      tcyInfo: {},
+      windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
+      statusColor: {
+        1: '#a1a1a1',
+        2: '#f8e31a',
+        3: '#5ab1fc',
+        4: '#f89835',
+        5: '#3def83'
+      },
+      urgencyColor: {
+        'C': '#2f8d00',
+        'B': '#c4ad00',
+        'A': '#8d0000'
+      },
+      heightDict: {
+        normal: '135px',
+        video: '300px'
+      }
+    }
+  },
+  methods: {
+    initData () {
+      console.log('请求区域人口数据')
+      fetchAreaPopulation().then(res => {
+        if (res.code === 200) {
+          this.data = res.data.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bottom {
+  z-index: 111111111111;
+  width: 4rem;
+  height: 1rem;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  // overflow: hidden;
+  // padding: 0px 0px;
+  gap: 10px; /* 新增：两个盒子之间的间距 */
+  padding: 0 5px;
+  box-sizing: border-box; /* 新增：避免padding增加总宽度 */
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    // 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;
+    margin: 0; /* 移除原margin，用gap控制间距 */
+  }
+  .chart-wrapper {
+    flex: 1;
+    // padding: 0.1rem;
+    box-sizing: border-box; /* 关键：padding不增加实际高度 */
+  }
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 16px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+}
+.block-base {
+  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);
+}
+
+.ellipsis {
+  white-space: nowrap;      /* 防止文本换行 */
+  overflow: hidden;         /* 隐藏溢出的文本 */
+  text-overflow: ellipsis;  /* 用省略号表示溢出的文本 */
+}
+.ellipsis-multiline {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2; /* 限制显示的行数 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/src/views/mapViews/mars3dMap.vue b/src/views/mapViews/mars3dMap.vue
index 0a648b6..925a6b9 100644
--- a/src/views/mapViews/mars3dMap.vue
+++ b/src/views/mapViews/mars3dMap.vue
@@ -36,8 +36,9 @@
           <div class="prism-player" id="player-con"></div>
         </div>
       </div>
-      <div v-show="showCommunityInfo" class="communityInfo">
-        <communityInfo ref="communityInfoRef"/>
+      <div class="communityInfo">
+        <communityInfo v-show="showCommunityInfo"  ref="communityInfoRef"/>
+        <population ref="populationRef"/>
       </div>
     </div>
   </div>
@@ -58,11 +59,12 @@
 import MapFrame from './mapFrame'
 import {fetchVideoToken, fetchFlushVideoToken, fetchVideo} from '@/api/camera'
 import communityInfo from './components/communityInfo.vue'
+import population from './components/population/population.vue'
 // 导入必须的样式表
 var Cesium = require('../../../node_modules/cesium/Source/Cesium')
 export default {
   name: 'Mars3dMap',
-  components: {MapFrame, Button2, Button3, communityInfo},
+  components: {MapFrame, Button2, Button3, communityInfo, population},
   data () {
     return {
       top: '250px',
@@ -103,18 +105,6 @@
         //     {index: '27', name: '智慧交通', children: []}],
         //   layersShow: [false, false, false, false, false, false]
         // },
-        {
-          index: '03',
-          name: '视频云',
-          children: [
-            {index: '31', name: '智慧交通', children: ['卡口', '电警', 'AR鹰眼']},
-            {index: '32', name: '智慧工地', children: []},
-            {index: '33', name: '智慧社区', children: []},
-            {index: '34', name: '智慧园林', children: []},
-            {index: '35', name: '智慧公安', children: []},
-            {index: '36', name: '智慧教育', children: []}],
-          layersShow: [false, false, false, false, false, false]
-        },
         // {
         //   index: '04',
         //   name: '一卡通',
@@ -131,6 +121,16 @@
         //   layersShow: []
         // },
         {
+          index: '02',
+          name: '人口分布',
+          children: [
+            {index: 'new03', name: '区域人口统计', children: []},
+            {index: 'new04', name: '网格人口统计', children: []},
+            {index: 'new05', name: '楼栋人口统计', children: []}
+          ],
+          layersShow: [false, false, false, false, false, false]
+        },
+        {
           index: '04',
           name: '各场所分布',
           children: [
@@ -165,6 +165,18 @@
       ],
       labelsRight: [
         {
+          index: '03',
+          name: '视频云',
+          children: [
+            {index: '31', name: '智慧交通', children: ['卡口', '电警', 'AR鹰眼']},
+            {index: '32', name: '智慧工地', children: []},
+            {index: '33', name: '智慧社区', children: []},
+            {index: '34', name: '智慧园林', children: []},
+            {index: '35', name: '智慧公安', children: []},
+            {index: '36', name: '智慧教育', children: []}],
+          layersShow: [false, false, false, false, false, false]
+        },
+        {
           index: '',
           name: '市域社会治理',
           children: [
diff --git a/static/city.json b/static/city.json
index 434c6c6..ce4b1f2 100644
--- a/static/city.json
+++ b/static/city.json
@@ -314,9 +314,11 @@
       "line": {
         "xData": ["周一","周二","周三","周四","周五","周六", "周日"],
         "yData": [
-          {"name": "拥堵指数", "data": [0, 0, 0, 0, 0, 2, 4], "color": "255,45,85"},
-          {"name": "违章事故指数", "data": [0, 0, 0, 0, 0, 1, 3], "color": "255,204,0"},
-          {"name": "交通流量", "data": [1, 1, 1, 1, 1, 3, 5], "color": "0,144,255"}
+          {"name": "拥堵指数", "data": [0, 0, 0, 0, 0, 20, 40], "color": "255,45,85"},
+          {"name": "违章事故指数", "data": [0, 0, 0, 0, 0, 10, 30], "color": "255,204,0"},
+          {"name": "城区车流量", "data": [102, 145, 55, 11, 52, 123, 45], "color": "0,144,255"},
+          {"name": "进入区域车流量", "data": [75, 52, 46, 75, 20, 33, 101], "color": "252, 44, 85"},
+          {"name": "离开区域车流量", "data": [72, 42, 47, 77, 42, 12, 56], "color": "35, 217, 110"}
         ]
       },
       "bar": {