diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue
index 36792e1..e7ac255 100644
--- a/src/views/cityManage/cityManageLeft2.vue
+++ b/src/views/cityManage/cityManageLeft2.vue
@@ -56,7 +56,9 @@
             </div>
             <!--多元化解-->
             <div class="modular-row-30">
-              <contradiction/>
+              <contradiction style="width: 49%;"/>
+              <RoadLine  style="width: 24%;"/>
+              <ThreeConstruction  style="width: 24%;"/>
             </div>
           </div><!-- .col50 over-->
           <!--./右半-->
@@ -90,12 +92,14 @@
 import ParkIntroduce from './components/parkingSystem/parkIntroduce'
 import ParkEarth from './components/parkingSystem/parkEarth'
 import ParkDetail from './components/parkingSystem/parkDetail'
-import ParkIncomeCount from "./components/parkingSystem/parkIncomeCount";
-import ParkFlowLine from "./components/parkingSystem/parkFlowLine";
-import ParkIncomeLine from "./components/parkingSystem/parkIncomLine";
-import Contradiction from "./components/contradiction/contradiction";
-import Service from "./components/service/service";
-import Youth from "./components/youth/youth";
+import ParkIncomeCount from './components/parkingSystem/parkIncomeCount'
+import ParkFlowLine from './components/parkingSystem/parkFlowLine'
+import ParkIncomeLine from './components/parkingSystem/parkIncomLine'
+import Contradiction from './components/contradiction/contradiction'
+import Service from './components/service/service'
+import Youth from './components/youth/youth'
+import RoadLine from './components/contradiction/components/roadLine.vue'
+import ThreeConstruction from './components/contradiction/components/threeConstruction.vue'
 export default {
   name: 'CityManageLeft',
   components: {
@@ -128,7 +132,9 @@
     Introduce,
     Corner1,
     wisdomTraffic,
-    eventCom
+    eventCom,
+    RoadLine,
+    ThreeConstruction
   },
   data () {
     return {

diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue
index 36792e1..e7ac255 100644
--- a/src/views/cityManage/cityManageLeft2.vue
+++ b/src/views/cityManage/cityManageLeft2.vue
@@ -56,7 +56,9 @@
             </div>
             <!--多元化解-->
             <div class="modular-row-30">
-              <contradiction/>
+              <contradiction style="width: 49%;"/>
+              <RoadLine  style="width: 24%;"/>
+              <ThreeConstruction  style="width: 24%;"/>
             </div>
           </div><!-- .col50 over-->
           <!--./右半-->
@@ -90,12 +92,14 @@
 import ParkIntroduce from './components/parkingSystem/parkIntroduce'
 import ParkEarth from './components/parkingSystem/parkEarth'
 import ParkDetail from './components/parkingSystem/parkDetail'
-import ParkIncomeCount from "./components/parkingSystem/parkIncomeCount";
-import ParkFlowLine from "./components/parkingSystem/parkFlowLine";
-import ParkIncomeLine from "./components/parkingSystem/parkIncomLine";
-import Contradiction from "./components/contradiction/contradiction";
-import Service from "./components/service/service";
-import Youth from "./components/youth/youth";
+import ParkIncomeCount from './components/parkingSystem/parkIncomeCount'
+import ParkFlowLine from './components/parkingSystem/parkFlowLine'
+import ParkIncomeLine from './components/parkingSystem/parkIncomLine'
+import Contradiction from './components/contradiction/contradiction'
+import Service from './components/service/service'
+import Youth from './components/youth/youth'
+import RoadLine from './components/contradiction/components/roadLine.vue'
+import ThreeConstruction from './components/contradiction/components/threeConstruction.vue'
 export default {
   name: 'CityManageLeft',
   components: {
@@ -128,7 +132,9 @@
     Introduce,
     Corner1,
     wisdomTraffic,
-    eventCom
+    eventCom,
+    RoadLine,
+    ThreeConstruction
   },
   data () {
     return {
diff --git a/src/views/cityManage/components/contradiction/components/roadLine.vue b/src/views/cityManage/components/contradiction/components/roadLine.vue
new file mode 100644
index 0000000..b9a0d1a
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/roadLine.vue
@@ -0,0 +1,62 @@
+<template>
+  <chart-layout title="护路护线管理" @click="getData">
+    <div class="block-container">
+        <simple-pie-chart
+          :id="data.id"
+          :width="data.width"
+          :height="data.height"
+          :seriesData="data.data"
+        >
+        </simple-pie-chart>
+    </div>
+  </chart-layout>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SingleLayout from '@/components/layout/singleLayout'
+// import SimpleBlock from './components/simpleBlock'
+import ChartLayout from '@/components/layout/chartLayout'
+import mockData from '../../../../../../static/city.json'
+export default {
+  name: 'introduce',
+  components: {ChartLayout, SimplePieChart, SingleLayout},
+  data () {
+    return {
+      data: {
+        id: 'contradiction-pie',
+        width: '100%',
+        height: '100%',
+        legend: ['潭东镇', '潭口镇', '高校园区工作组'],
+        data: [
+          {'value': 0, 'name': '潭东镇'},
+          {'value': 0, 'name': '潭口镇'},
+          {'value': 0, 'name': '高校园区工作组'}
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  methods: {
+    getData () {
+      this.data.data = mockData.roadLinePie
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.block-container{
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 0.04rem;
+  .block{
+    width: 25%;
+    height: 45%;
+  }
+}
+</style>

diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue
index 36792e1..e7ac255 100644
--- a/src/views/cityManage/cityManageLeft2.vue
+++ b/src/views/cityManage/cityManageLeft2.vue
@@ -56,7 +56,9 @@
             </div>
             <!--多元化解-->
             <div class="modular-row-30">
-              <contradiction/>
+              <contradiction style="width: 49%;"/>
+              <RoadLine  style="width: 24%;"/>
+              <ThreeConstruction  style="width: 24%;"/>
             </div>
           </div><!-- .col50 over-->
           <!--./右半-->
@@ -90,12 +92,14 @@
 import ParkIntroduce from './components/parkingSystem/parkIntroduce'
 import ParkEarth from './components/parkingSystem/parkEarth'
 import ParkDetail from './components/parkingSystem/parkDetail'
-import ParkIncomeCount from "./components/parkingSystem/parkIncomeCount";
-import ParkFlowLine from "./components/parkingSystem/parkFlowLine";
-import ParkIncomeLine from "./components/parkingSystem/parkIncomLine";
-import Contradiction from "./components/contradiction/contradiction";
-import Service from "./components/service/service";
-import Youth from "./components/youth/youth";
+import ParkIncomeCount from './components/parkingSystem/parkIncomeCount'
+import ParkFlowLine from './components/parkingSystem/parkFlowLine'
+import ParkIncomeLine from './components/parkingSystem/parkIncomLine'
+import Contradiction from './components/contradiction/contradiction'
+import Service from './components/service/service'
+import Youth from './components/youth/youth'
+import RoadLine from './components/contradiction/components/roadLine.vue'
+import ThreeConstruction from './components/contradiction/components/threeConstruction.vue'
 export default {
   name: 'CityManageLeft',
   components: {
@@ -128,7 +132,9 @@
     Introduce,
     Corner1,
     wisdomTraffic,
-    eventCom
+    eventCom,
+    RoadLine,
+    ThreeConstruction
   },
   data () {
     return {
diff --git a/src/views/cityManage/components/contradiction/components/roadLine.vue b/src/views/cityManage/components/contradiction/components/roadLine.vue
new file mode 100644
index 0000000..b9a0d1a
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/roadLine.vue
@@ -0,0 +1,62 @@
+<template>
+  <chart-layout title="护路护线管理" @click="getData">
+    <div class="block-container">
+        <simple-pie-chart
+          :id="data.id"
+          :width="data.width"
+          :height="data.height"
+          :seriesData="data.data"
+        >
+        </simple-pie-chart>
+    </div>
+  </chart-layout>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SingleLayout from '@/components/layout/singleLayout'
+// import SimpleBlock from './components/simpleBlock'
+import ChartLayout from '@/components/layout/chartLayout'
+import mockData from '../../../../../../static/city.json'
+export default {
+  name: 'introduce',
+  components: {ChartLayout, SimplePieChart, SingleLayout},
+  data () {
+    return {
+      data: {
+        id: 'contradiction-pie',
+        width: '100%',
+        height: '100%',
+        legend: ['潭东镇', '潭口镇', '高校园区工作组'],
+        data: [
+          {'value': 0, 'name': '潭东镇'},
+          {'value': 0, 'name': '潭口镇'},
+          {'value': 0, 'name': '高校园区工作组'}
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  methods: {
+    getData () {
+      this.data.data = mockData.roadLinePie
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.block-container{
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 0.04rem;
+  .block{
+    width: 25%;
+    height: 45%;
+  }
+}
+</style>
diff --git a/src/views/cityManage/components/contradiction/components/threeConstruction.vue b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
new file mode 100644
index 0000000..266c61f
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
@@ -0,0 +1,132 @@
+<template>
+  <chart-layout title="三项建设管理">
+    <!-- <div class="block-container"> -->
+      <div id="threeConstruction-bar" class="container" />
+    <!-- </div> -->
+  </chart-layout>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { automaticCarousel } from '@/utils/automaticCarousel'
+import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
+export default {
+  name: 'SocialStability',
+  data () {
+    return {
+      isShow: true,
+      myChart: null,
+      extend: {
+        color: [], // 动态填充颜色
+        legend: {
+          textStyle: { color: '#cce9ff', fontWeight: 'bold' },
+          data: [] // 动态填充图例
+        },
+        dataZoom: [
+          { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#092647',
+              borderColor: '#404a59',
+              borderWidth: 1,
+              textStyle: { color: '#ffffff', fontSize: 12 }
+            }
+          },
+          formatter: function (params) {
+            const date = params[0].axisValue
+            let content = `<div>${date}</div>`
+            params.forEach(item => {
+              content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
+            })
+            return content
+          }
+        },
+        grid: { left: '5%', right: '5%', bottom: '1%', top: '22%', containLabel: true },
+        xAxis: {
+          type: 'category',
+          axisLine: { lineStyle: { color: '#cce9ff' } },
+          axisLabel: { color: '#cce9ff' },
+          data: []
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: { lineStyle: { color: '#cce9ff' } },
+            axisLabel: { color: '#cce9ff' },
+            splitLine: {
+              show: true,
+              lineStyle: { color: ['#c8d0da'], type: 'dashed' }
+            }
+          }
+        ],
+        series: [] // 动态填充系列（折线+柱形）
+      }
+    }
+  },
+  mounted () {
+    this.myChart = echarts.init(document.getElementById('threeConstruction-bar'))
+    window.addEventListener('resize', () => {
+      this.myChart.resize()
+    })
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      const threeConstructionData = mockData.threeConstruction
+      console.log('-66666666666666666=', threeConstructionData)
+
+      // 1. 提取基础数据
+      const { year, threeConstructionTypes } = threeConstructionData
+      const threeConstructionTypeNames = Object.keys(threeConstructionTypes) // 所有事件类型名称
+      const threeConstructionTypeCount = threeConstructionTypeNames.length // 柱形图数量
+
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        ...COLOR_POOL.slice(0, threeConstructionTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = year
+
+      // 5. 动态生成series
+      this.extend.series = []
+
+      // 循环添加柱形图系列（每个事件类型一个柱形）
+      threeConstructionTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index] },
+          data: threeConstructionTypes[typeName]
+        })
+      })
+      const showCount = mockData.threeConstruction.showDataCount + '' ? mockData.threeConstruction.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
+    }
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', () => {})
+    this.myChart.dispose()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+</style>

diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue
index 36792e1..e7ac255 100644
--- a/src/views/cityManage/cityManageLeft2.vue
+++ b/src/views/cityManage/cityManageLeft2.vue
@@ -56,7 +56,9 @@
             </div>
             <!--多元化解-->
             <div class="modular-row-30">
-              <contradiction/>
+              <contradiction style="width: 49%;"/>
+              <RoadLine  style="width: 24%;"/>
+              <ThreeConstruction  style="width: 24%;"/>
             </div>
           </div><!-- .col50 over-->
           <!--./右半-->
@@ -90,12 +92,14 @@
 import ParkIntroduce from './components/parkingSystem/parkIntroduce'
 import ParkEarth from './components/parkingSystem/parkEarth'
 import ParkDetail from './components/parkingSystem/parkDetail'
-import ParkIncomeCount from "./components/parkingSystem/parkIncomeCount";
-import ParkFlowLine from "./components/parkingSystem/parkFlowLine";
-import ParkIncomeLine from "./components/parkingSystem/parkIncomLine";
-import Contradiction from "./components/contradiction/contradiction";
-import Service from "./components/service/service";
-import Youth from "./components/youth/youth";
+import ParkIncomeCount from './components/parkingSystem/parkIncomeCount'
+import ParkFlowLine from './components/parkingSystem/parkFlowLine'
+import ParkIncomeLine from './components/parkingSystem/parkIncomLine'
+import Contradiction from './components/contradiction/contradiction'
+import Service from './components/service/service'
+import Youth from './components/youth/youth'
+import RoadLine from './components/contradiction/components/roadLine.vue'
+import ThreeConstruction from './components/contradiction/components/threeConstruction.vue'
 export default {
   name: 'CityManageLeft',
   components: {
@@ -128,7 +132,9 @@
     Introduce,
     Corner1,
     wisdomTraffic,
-    eventCom
+    eventCom,
+    RoadLine,
+    ThreeConstruction
   },
   data () {
     return {
diff --git a/src/views/cityManage/components/contradiction/components/roadLine.vue b/src/views/cityManage/components/contradiction/components/roadLine.vue
new file mode 100644
index 0000000..b9a0d1a
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/roadLine.vue
@@ -0,0 +1,62 @@
+<template>
+  <chart-layout title="护路护线管理" @click="getData">
+    <div class="block-container">
+        <simple-pie-chart
+          :id="data.id"
+          :width="data.width"
+          :height="data.height"
+          :seriesData="data.data"
+        >
+        </simple-pie-chart>
+    </div>
+  </chart-layout>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SingleLayout from '@/components/layout/singleLayout'
+// import SimpleBlock from './components/simpleBlock'
+import ChartLayout from '@/components/layout/chartLayout'
+import mockData from '../../../../../../static/city.json'
+export default {
+  name: 'introduce',
+  components: {ChartLayout, SimplePieChart, SingleLayout},
+  data () {
+    return {
+      data: {
+        id: 'contradiction-pie',
+        width: '100%',
+        height: '100%',
+        legend: ['潭东镇', '潭口镇', '高校园区工作组'],
+        data: [
+          {'value': 0, 'name': '潭东镇'},
+          {'value': 0, 'name': '潭口镇'},
+          {'value': 0, 'name': '高校园区工作组'}
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  methods: {
+    getData () {
+      this.data.data = mockData.roadLinePie
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.block-container{
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 0.04rem;
+  .block{
+    width: 25%;
+    height: 45%;
+  }
+}
+</style>
diff --git a/src/views/cityManage/components/contradiction/components/threeConstruction.vue b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
new file mode 100644
index 0000000..266c61f
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
@@ -0,0 +1,132 @@
+<template>
+  <chart-layout title="三项建设管理">
+    <!-- <div class="block-container"> -->
+      <div id="threeConstruction-bar" class="container" />
+    <!-- </div> -->
+  </chart-layout>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { automaticCarousel } from '@/utils/automaticCarousel'
+import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
+export default {
+  name: 'SocialStability',
+  data () {
+    return {
+      isShow: true,
+      myChart: null,
+      extend: {
+        color: [], // 动态填充颜色
+        legend: {
+          textStyle: { color: '#cce9ff', fontWeight: 'bold' },
+          data: [] // 动态填充图例
+        },
+        dataZoom: [
+          { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#092647',
+              borderColor: '#404a59',
+              borderWidth: 1,
+              textStyle: { color: '#ffffff', fontSize: 12 }
+            }
+          },
+          formatter: function (params) {
+            const date = params[0].axisValue
+            let content = `<div>${date}</div>`
+            params.forEach(item => {
+              content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
+            })
+            return content
+          }
+        },
+        grid: { left: '5%', right: '5%', bottom: '1%', top: '22%', containLabel: true },
+        xAxis: {
+          type: 'category',
+          axisLine: { lineStyle: { color: '#cce9ff' } },
+          axisLabel: { color: '#cce9ff' },
+          data: []
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: { lineStyle: { color: '#cce9ff' } },
+            axisLabel: { color: '#cce9ff' },
+            splitLine: {
+              show: true,
+              lineStyle: { color: ['#c8d0da'], type: 'dashed' }
+            }
+          }
+        ],
+        series: [] // 动态填充系列（折线+柱形）
+      }
+    }
+  },
+  mounted () {
+    this.myChart = echarts.init(document.getElementById('threeConstruction-bar'))
+    window.addEventListener('resize', () => {
+      this.myChart.resize()
+    })
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      const threeConstructionData = mockData.threeConstruction
+      console.log('-66666666666666666=', threeConstructionData)
+
+      // 1. 提取基础数据
+      const { year, threeConstructionTypes } = threeConstructionData
+      const threeConstructionTypeNames = Object.keys(threeConstructionTypes) // 所有事件类型名称
+      const threeConstructionTypeCount = threeConstructionTypeNames.length // 柱形图数量
+
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        ...COLOR_POOL.slice(0, threeConstructionTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = year
+
+      // 5. 动态生成series
+      this.extend.series = []
+
+      // 循环添加柱形图系列（每个事件类型一个柱形）
+      threeConstructionTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index] },
+          data: threeConstructionTypes[typeName]
+        })
+      })
+      const showCount = mockData.threeConstruction.showDataCount + '' ? mockData.threeConstruction.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
+    }
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', () => {})
+    this.myChart.dispose()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/cityManage/components/introduce/components/eventBarLine.vue b/src/views/cityManage/components/introduce/components/eventBarLine.vue
index ee8104d..b317147 100644
--- a/src/views/cityManage/components/introduce/components/eventBarLine.vue
+++ b/src/views/cityManage/components/introduce/components/eventBarLine.vue
@@ -1,11 +1,18 @@
 <template>
-  <div id="caseType-linebar" class="container"/>
+  <div id="event-Bar-Line" class="container" />
 </template>
 
 <script>
 import * as echarts from 'echarts'
 import { automaticCarousel } from '@/utils/automaticCarousel'
 import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
 export default {
   name: 'SocialStability',
   data () {
@@ -13,10 +20,10 @@
       isShow: true,
       myChart: null,
       extend: {
-        color: ['#CEDE0F', '#41B8FF', '#FF7D00', '#F53F3F'], // 事件类型颜色
+        color: [], // 动态填充颜色
         legend: {
           textStyle: { color: '#cce9ff', fontWeight: 'bold' },
-          data: ['事件总数趋势', '矛盾纠纷调解', '治安案件处置', '涉稳隐患排查', '反邪宣传与排查']
+          data: [] // 动态填充图例
         },
         dataZoom: [
           { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
@@ -33,7 +40,7 @@
             }
           },
           formatter: function (params) {
-            let date = params[0].axisValue
+            const date = params[0].axisValue
             let content = `<div>${date}</div>`
             params.forEach(item => {
               content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
@@ -46,7 +53,7 @@
           type: 'category',
           axisLine: { lineStyle: { color: '#cce9ff' } },
           axisLabel: { color: '#cce9ff' },
-          data: [] // 月份数据后续填充
+          data: [] // 动态填充月份
         },
         yAxis: [
           {
@@ -59,95 +66,81 @@
             }
           }
         ],
-        series: [
-          // 1. 事件总数趋势（折线图）
-          {
-            name: '事件总数趋势',
-            type: 'line',
-            smooth: true,
-            symbol: 'circle',
-            symbolSize: 6,
-            color: '#CEDE0F',
-            data: [], // 后续填充
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0.5, color: '#CEDE0F' },
-                { offset: 1, color: 'rgba(10,25,124,0.2)' }
-              ])
-            }
-          },
-          // 2. 矛盾纠纷调解（柱状图）
-          {
-            name: '矛盾纠纷调解',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#41B8FF' },
-            data: [] // 后续填充
-          },
-          // 3. 治安案件处置（柱状图）
-          {
-            name: '治安案件处置',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#FF7D00' },
-            data: [] // 后续填充
-          },
-          // 4. 涉稳隐患排查（柱状图）
-          {
-            name: '涉稳隐患排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#F53F3F' },
-            data: [] // 后续填充
-          },
-          // 5. 反邪宣传与排查（柱状图）
-          {
-            name: '反邪宣传与排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#722ED1' },
-            data: [] // 后续填充
-          }
-        ]
+        series: [] // 动态填充系列（折线+柱形）
       }
     }
   },
   mounted () {
-    this.myChart = echarts.init(document.getElementById('caseType-linebar'))
+    this.myChart = echarts.init(document.getElementById('event-Bar-Line'))
     window.addEventListener('resize', () => {
-      if (this.myChart) this.myChart.resize()
+      this.myChart.resize()
     })
     this.fetchData()
   },
   methods: {
     fetchData () {
-      // 社会稳定和政治安全专项事件数据（模拟）
       const eventData = mockData.eventData
+      // 1. 提取基础数据
+      const { month, trend, eventTypes } = eventData
+      const eventTypeNames = Object.keys(eventTypes) // 所有事件类型名称
+      const eventTypeCount = eventTypeNames.length // 柱形图数量
 
-      // 填充X轴月份
-      this.extend.xAxis.data = eventData.month
-      // 填充折线图（事件总数趋势）
-      this.extend.series[0].data = eventData.trendData
-      // 填充柱状图（各事件类型）
-      this.extend.series[1].data = eventData.eventTypeData['矛盾纠纷调解']
-      this.extend.series[2].data = eventData.eventTypeData['治安案件处置']
-      this.extend.series[3].data = eventData.eventTypeData['涉稳隐患排查']
-      this.extend.series[4].data = eventData.eventTypeData['反邪宣传与排查']
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        COLOR_POOL[0], // 折线图颜色
+        ...COLOR_POOL.slice(1, 1 + eventTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
 
-      // 渲染图表
-      // this.myChart.setOption(this.extend, true)
-      automaticCarousel(this.extend, this.myChart, 3000, 3)
+      // 3. 动态生成图例（折线名称 + 所有事件类型名称）
+      this.extend.legend.data = [trend.name, ...eventTypeNames]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = month
+
+      // 5. 动态生成series（先折线，后柱形）
+      this.extend.series = []
+
+      // 5.1 添加折线图系列
+      this.extend.series.push({
+        name: trend.name,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        color: this.extend.color[0], // 用第一种颜色
+        data: trend.data,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0.5, color: this.extend.color[0] },
+            { offset: 1, color: 'rgba(10,25,124,0.2)' }
+          ])
+        }
+      })
+
+      // 5.2 循环添加柱形图系列（每个事件类型一个柱形）
+      eventTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index + 1] }, // 柱形颜色从第二种开始
+          data: eventTypes[typeName]
+        })
+      })
+      const showCount = mockData.showDataCount + '' ? mockData.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
     }
   },
   beforeDestroy () {
     window.removeEventListener('resize', () => {})
-    if (this.myChart) this.myChart.dispose()
+    this.myChart.dispose()
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.container{
+.container {
   width: 100%;
   height: 100%;
 }

diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue
index 36792e1..e7ac255 100644
--- a/src/views/cityManage/cityManageLeft2.vue
+++ b/src/views/cityManage/cityManageLeft2.vue
@@ -56,7 +56,9 @@
             </div>
             <!--多元化解-->
             <div class="modular-row-30">
-              <contradiction/>
+              <contradiction style="width: 49%;"/>
+              <RoadLine  style="width: 24%;"/>
+              <ThreeConstruction  style="width: 24%;"/>
             </div>
           </div><!-- .col50 over-->
           <!--./右半-->
@@ -90,12 +92,14 @@
 import ParkIntroduce from './components/parkingSystem/parkIntroduce'
 import ParkEarth from './components/parkingSystem/parkEarth'
 import ParkDetail from './components/parkingSystem/parkDetail'
-import ParkIncomeCount from "./components/parkingSystem/parkIncomeCount";
-import ParkFlowLine from "./components/parkingSystem/parkFlowLine";
-import ParkIncomeLine from "./components/parkingSystem/parkIncomLine";
-import Contradiction from "./components/contradiction/contradiction";
-import Service from "./components/service/service";
-import Youth from "./components/youth/youth";
+import ParkIncomeCount from './components/parkingSystem/parkIncomeCount'
+import ParkFlowLine from './components/parkingSystem/parkFlowLine'
+import ParkIncomeLine from './components/parkingSystem/parkIncomLine'
+import Contradiction from './components/contradiction/contradiction'
+import Service from './components/service/service'
+import Youth from './components/youth/youth'
+import RoadLine from './components/contradiction/components/roadLine.vue'
+import ThreeConstruction from './components/contradiction/components/threeConstruction.vue'
 export default {
   name: 'CityManageLeft',
   components: {
@@ -128,7 +132,9 @@
     Introduce,
     Corner1,
     wisdomTraffic,
-    eventCom
+    eventCom,
+    RoadLine,
+    ThreeConstruction
   },
   data () {
     return {
diff --git a/src/views/cityManage/components/contradiction/components/roadLine.vue b/src/views/cityManage/components/contradiction/components/roadLine.vue
new file mode 100644
index 0000000..b9a0d1a
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/roadLine.vue
@@ -0,0 +1,62 @@
+<template>
+  <chart-layout title="护路护线管理" @click="getData">
+    <div class="block-container">
+        <simple-pie-chart
+          :id="data.id"
+          :width="data.width"
+          :height="data.height"
+          :seriesData="data.data"
+        >
+        </simple-pie-chart>
+    </div>
+  </chart-layout>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SingleLayout from '@/components/layout/singleLayout'
+// import SimpleBlock from './components/simpleBlock'
+import ChartLayout from '@/components/layout/chartLayout'
+import mockData from '../../../../../../static/city.json'
+export default {
+  name: 'introduce',
+  components: {ChartLayout, SimplePieChart, SingleLayout},
+  data () {
+    return {
+      data: {
+        id: 'contradiction-pie',
+        width: '100%',
+        height: '100%',
+        legend: ['潭东镇', '潭口镇', '高校园区工作组'],
+        data: [
+          {'value': 0, 'name': '潭东镇'},
+          {'value': 0, 'name': '潭口镇'},
+          {'value': 0, 'name': '高校园区工作组'}
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  methods: {
+    getData () {
+      this.data.data = mockData.roadLinePie
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.block-container{
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 0.04rem;
+  .block{
+    width: 25%;
+    height: 45%;
+  }
+}
+</style>
diff --git a/src/views/cityManage/components/contradiction/components/threeConstruction.vue b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
new file mode 100644
index 0000000..266c61f
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
@@ -0,0 +1,132 @@
+<template>
+  <chart-layout title="三项建设管理">
+    <!-- <div class="block-container"> -->
+      <div id="threeConstruction-bar" class="container" />
+    <!-- </div> -->
+  </chart-layout>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { automaticCarousel } from '@/utils/automaticCarousel'
+import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
+export default {
+  name: 'SocialStability',
+  data () {
+    return {
+      isShow: true,
+      myChart: null,
+      extend: {
+        color: [], // 动态填充颜色
+        legend: {
+          textStyle: { color: '#cce9ff', fontWeight: 'bold' },
+          data: [] // 动态填充图例
+        },
+        dataZoom: [
+          { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#092647',
+              borderColor: '#404a59',
+              borderWidth: 1,
+              textStyle: { color: '#ffffff', fontSize: 12 }
+            }
+          },
+          formatter: function (params) {
+            const date = params[0].axisValue
+            let content = `<div>${date}</div>`
+            params.forEach(item => {
+              content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
+            })
+            return content
+          }
+        },
+        grid: { left: '5%', right: '5%', bottom: '1%', top: '22%', containLabel: true },
+        xAxis: {
+          type: 'category',
+          axisLine: { lineStyle: { color: '#cce9ff' } },
+          axisLabel: { color: '#cce9ff' },
+          data: []
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: { lineStyle: { color: '#cce9ff' } },
+            axisLabel: { color: '#cce9ff' },
+            splitLine: {
+              show: true,
+              lineStyle: { color: ['#c8d0da'], type: 'dashed' }
+            }
+          }
+        ],
+        series: [] // 动态填充系列（折线+柱形）
+      }
+    }
+  },
+  mounted () {
+    this.myChart = echarts.init(document.getElementById('threeConstruction-bar'))
+    window.addEventListener('resize', () => {
+      this.myChart.resize()
+    })
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      const threeConstructionData = mockData.threeConstruction
+      console.log('-66666666666666666=', threeConstructionData)
+
+      // 1. 提取基础数据
+      const { year, threeConstructionTypes } = threeConstructionData
+      const threeConstructionTypeNames = Object.keys(threeConstructionTypes) // 所有事件类型名称
+      const threeConstructionTypeCount = threeConstructionTypeNames.length // 柱形图数量
+
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        ...COLOR_POOL.slice(0, threeConstructionTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = year
+
+      // 5. 动态生成series
+      this.extend.series = []
+
+      // 循环添加柱形图系列（每个事件类型一个柱形）
+      threeConstructionTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index] },
+          data: threeConstructionTypes[typeName]
+        })
+      })
+      const showCount = mockData.threeConstruction.showDataCount + '' ? mockData.threeConstruction.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
+    }
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', () => {})
+    this.myChart.dispose()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/cityManage/components/introduce/components/eventBarLine.vue b/src/views/cityManage/components/introduce/components/eventBarLine.vue
index ee8104d..b317147 100644
--- a/src/views/cityManage/components/introduce/components/eventBarLine.vue
+++ b/src/views/cityManage/components/introduce/components/eventBarLine.vue
@@ -1,11 +1,18 @@
 <template>
-  <div id="caseType-linebar" class="container"/>
+  <div id="event-Bar-Line" class="container" />
 </template>
 
 <script>
 import * as echarts from 'echarts'
 import { automaticCarousel } from '@/utils/automaticCarousel'
 import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
 export default {
   name: 'SocialStability',
   data () {
@@ -13,10 +20,10 @@
       isShow: true,
       myChart: null,
       extend: {
-        color: ['#CEDE0F', '#41B8FF', '#FF7D00', '#F53F3F'], // 事件类型颜色
+        color: [], // 动态填充颜色
         legend: {
           textStyle: { color: '#cce9ff', fontWeight: 'bold' },
-          data: ['事件总数趋势', '矛盾纠纷调解', '治安案件处置', '涉稳隐患排查', '反邪宣传与排查']
+          data: [] // 动态填充图例
         },
         dataZoom: [
           { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
@@ -33,7 +40,7 @@
             }
           },
           formatter: function (params) {
-            let date = params[0].axisValue
+            const date = params[0].axisValue
             let content = `<div>${date}</div>`
             params.forEach(item => {
               content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
@@ -46,7 +53,7 @@
           type: 'category',
           axisLine: { lineStyle: { color: '#cce9ff' } },
           axisLabel: { color: '#cce9ff' },
-          data: [] // 月份数据后续填充
+          data: [] // 动态填充月份
         },
         yAxis: [
           {
@@ -59,95 +66,81 @@
             }
           }
         ],
-        series: [
-          // 1. 事件总数趋势（折线图）
-          {
-            name: '事件总数趋势',
-            type: 'line',
-            smooth: true,
-            symbol: 'circle',
-            symbolSize: 6,
-            color: '#CEDE0F',
-            data: [], // 后续填充
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0.5, color: '#CEDE0F' },
-                { offset: 1, color: 'rgba(10,25,124,0.2)' }
-              ])
-            }
-          },
-          // 2. 矛盾纠纷调解（柱状图）
-          {
-            name: '矛盾纠纷调解',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#41B8FF' },
-            data: [] // 后续填充
-          },
-          // 3. 治安案件处置（柱状图）
-          {
-            name: '治安案件处置',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#FF7D00' },
-            data: [] // 后续填充
-          },
-          // 4. 涉稳隐患排查（柱状图）
-          {
-            name: '涉稳隐患排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#F53F3F' },
-            data: [] // 后续填充
-          },
-          // 5. 反邪宣传与排查（柱状图）
-          {
-            name: '反邪宣传与排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#722ED1' },
-            data: [] // 后续填充
-          }
-        ]
+        series: [] // 动态填充系列（折线+柱形）
       }
     }
   },
   mounted () {
-    this.myChart = echarts.init(document.getElementById('caseType-linebar'))
+    this.myChart = echarts.init(document.getElementById('event-Bar-Line'))
     window.addEventListener('resize', () => {
-      if (this.myChart) this.myChart.resize()
+      this.myChart.resize()
     })
     this.fetchData()
   },
   methods: {
     fetchData () {
-      // 社会稳定和政治安全专项事件数据（模拟）
       const eventData = mockData.eventData
+      // 1. 提取基础数据
+      const { month, trend, eventTypes } = eventData
+      const eventTypeNames = Object.keys(eventTypes) // 所有事件类型名称
+      const eventTypeCount = eventTypeNames.length // 柱形图数量
 
-      // 填充X轴月份
-      this.extend.xAxis.data = eventData.month
-      // 填充折线图（事件总数趋势）
-      this.extend.series[0].data = eventData.trendData
-      // 填充柱状图（各事件类型）
-      this.extend.series[1].data = eventData.eventTypeData['矛盾纠纷调解']
-      this.extend.series[2].data = eventData.eventTypeData['治安案件处置']
-      this.extend.series[3].data = eventData.eventTypeData['涉稳隐患排查']
-      this.extend.series[4].data = eventData.eventTypeData['反邪宣传与排查']
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        COLOR_POOL[0], // 折线图颜色
+        ...COLOR_POOL.slice(1, 1 + eventTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
 
-      // 渲染图表
-      // this.myChart.setOption(this.extend, true)
-      automaticCarousel(this.extend, this.myChart, 3000, 3)
+      // 3. 动态生成图例（折线名称 + 所有事件类型名称）
+      this.extend.legend.data = [trend.name, ...eventTypeNames]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = month
+
+      // 5. 动态生成series（先折线，后柱形）
+      this.extend.series = []
+
+      // 5.1 添加折线图系列
+      this.extend.series.push({
+        name: trend.name,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        color: this.extend.color[0], // 用第一种颜色
+        data: trend.data,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0.5, color: this.extend.color[0] },
+            { offset: 1, color: 'rgba(10,25,124,0.2)' }
+          ])
+        }
+      })
+
+      // 5.2 循环添加柱形图系列（每个事件类型一个柱形）
+      eventTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index + 1] }, // 柱形颜色从第二种开始
+          data: eventTypes[typeName]
+        })
+      })
+      const showCount = mockData.showDataCount + '' ? mockData.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
     }
   },
   beforeDestroy () {
     window.removeEventListener('resize', () => {})
-    if (this.myChart) this.myChart.dispose()
+    this.myChart.dispose()
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.container{
+.container {
   width: 100%;
   height: 100%;
 }
diff --git a/src/views/industrialEconomy/components/commercial/commercial.vue b/src/views/industrialEconomy/components/commercial/commercial.vue
index 95fa443..8e14d51 100644
--- a/src/views/industrialEconomy/components/commercial/commercial.vue
+++ b/src/views/industrialEconomy/components/commercial/commercial.vue
@@ -6,13 +6,16 @@
 <template>
   <chart-layout title="营商环境" @click="getData">
     <div class="block-container">
-      <div class="block" style="width:20%;height: 100%">
+      <!-- <div class="block" style="width:20%;height: 100%">
         <commercial-total/>
       </div>
       <div class="block" style="width:40%;height: 100%">
         <commercial-pie/>
+      </div> -->
+      <div class="block" style="width:60%">
+        <CommercialTable/>
       </div>
-      <div class="block" style="width:40%;height: 100%">
+      <div class="block" style="width:40%">
         <commercial-bar/>
       </div>
     </div>
@@ -24,12 +27,15 @@
 import CommercialTotal from './components/commercialTotal'
 import CommercialPie from './components/commercialPie'
 import CommercialBar from './components/commercialBar'
+import CommercialTable from './components/commercialTable.vue'
 export default {
   name: 'Expense',
   components: {
     CommercialBar,
     CommercialPie,
-    CommercialTotal},
+    CommercialTotal,
+    CommercialTable
+  },
   methods: {
     getData () {
       // this.$refs.ecardEarth.getData()

diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue
index 36792e1..e7ac255 100644
--- a/src/views/cityManage/cityManageLeft2.vue
+++ b/src/views/cityManage/cityManageLeft2.vue
@@ -56,7 +56,9 @@
             </div>
             <!--多元化解-->
             <div class="modular-row-30">
-              <contradiction/>
+              <contradiction style="width: 49%;"/>
+              <RoadLine  style="width: 24%;"/>
+              <ThreeConstruction  style="width: 24%;"/>
             </div>
           </div><!-- .col50 over-->
           <!--./右半-->
@@ -90,12 +92,14 @@
 import ParkIntroduce from './components/parkingSystem/parkIntroduce'
 import ParkEarth from './components/parkingSystem/parkEarth'
 import ParkDetail from './components/parkingSystem/parkDetail'
-import ParkIncomeCount from "./components/parkingSystem/parkIncomeCount";
-import ParkFlowLine from "./components/parkingSystem/parkFlowLine";
-import ParkIncomeLine from "./components/parkingSystem/parkIncomLine";
-import Contradiction from "./components/contradiction/contradiction";
-import Service from "./components/service/service";
-import Youth from "./components/youth/youth";
+import ParkIncomeCount from './components/parkingSystem/parkIncomeCount'
+import ParkFlowLine from './components/parkingSystem/parkFlowLine'
+import ParkIncomeLine from './components/parkingSystem/parkIncomLine'
+import Contradiction from './components/contradiction/contradiction'
+import Service from './components/service/service'
+import Youth from './components/youth/youth'
+import RoadLine from './components/contradiction/components/roadLine.vue'
+import ThreeConstruction from './components/contradiction/components/threeConstruction.vue'
 export default {
   name: 'CityManageLeft',
   components: {
@@ -128,7 +132,9 @@
     Introduce,
     Corner1,
     wisdomTraffic,
-    eventCom
+    eventCom,
+    RoadLine,
+    ThreeConstruction
   },
   data () {
     return {
diff --git a/src/views/cityManage/components/contradiction/components/roadLine.vue b/src/views/cityManage/components/contradiction/components/roadLine.vue
new file mode 100644
index 0000000..b9a0d1a
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/roadLine.vue
@@ -0,0 +1,62 @@
+<template>
+  <chart-layout title="护路护线管理" @click="getData">
+    <div class="block-container">
+        <simple-pie-chart
+          :id="data.id"
+          :width="data.width"
+          :height="data.height"
+          :seriesData="data.data"
+        >
+        </simple-pie-chart>
+    </div>
+  </chart-layout>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SingleLayout from '@/components/layout/singleLayout'
+// import SimpleBlock from './components/simpleBlock'
+import ChartLayout from '@/components/layout/chartLayout'
+import mockData from '../../../../../../static/city.json'
+export default {
+  name: 'introduce',
+  components: {ChartLayout, SimplePieChart, SingleLayout},
+  data () {
+    return {
+      data: {
+        id: 'contradiction-pie',
+        width: '100%',
+        height: '100%',
+        legend: ['潭东镇', '潭口镇', '高校园区工作组'],
+        data: [
+          {'value': 0, 'name': '潭东镇'},
+          {'value': 0, 'name': '潭口镇'},
+          {'value': 0, 'name': '高校园区工作组'}
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  methods: {
+    getData () {
+      this.data.data = mockData.roadLinePie
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.block-container{
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 0.04rem;
+  .block{
+    width: 25%;
+    height: 45%;
+  }
+}
+</style>
diff --git a/src/views/cityManage/components/contradiction/components/threeConstruction.vue b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
new file mode 100644
index 0000000..266c61f
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
@@ -0,0 +1,132 @@
+<template>
+  <chart-layout title="三项建设管理">
+    <!-- <div class="block-container"> -->
+      <div id="threeConstruction-bar" class="container" />
+    <!-- </div> -->
+  </chart-layout>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { automaticCarousel } from '@/utils/automaticCarousel'
+import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
+export default {
+  name: 'SocialStability',
+  data () {
+    return {
+      isShow: true,
+      myChart: null,
+      extend: {
+        color: [], // 动态填充颜色
+        legend: {
+          textStyle: { color: '#cce9ff', fontWeight: 'bold' },
+          data: [] // 动态填充图例
+        },
+        dataZoom: [
+          { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#092647',
+              borderColor: '#404a59',
+              borderWidth: 1,
+              textStyle: { color: '#ffffff', fontSize: 12 }
+            }
+          },
+          formatter: function (params) {
+            const date = params[0].axisValue
+            let content = `<div>${date}</div>`
+            params.forEach(item => {
+              content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
+            })
+            return content
+          }
+        },
+        grid: { left: '5%', right: '5%', bottom: '1%', top: '22%', containLabel: true },
+        xAxis: {
+          type: 'category',
+          axisLine: { lineStyle: { color: '#cce9ff' } },
+          axisLabel: { color: '#cce9ff' },
+          data: []
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: { lineStyle: { color: '#cce9ff' } },
+            axisLabel: { color: '#cce9ff' },
+            splitLine: {
+              show: true,
+              lineStyle: { color: ['#c8d0da'], type: 'dashed' }
+            }
+          }
+        ],
+        series: [] // 动态填充系列（折线+柱形）
+      }
+    }
+  },
+  mounted () {
+    this.myChart = echarts.init(document.getElementById('threeConstruction-bar'))
+    window.addEventListener('resize', () => {
+      this.myChart.resize()
+    })
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      const threeConstructionData = mockData.threeConstruction
+      console.log('-66666666666666666=', threeConstructionData)
+
+      // 1. 提取基础数据
+      const { year, threeConstructionTypes } = threeConstructionData
+      const threeConstructionTypeNames = Object.keys(threeConstructionTypes) // 所有事件类型名称
+      const threeConstructionTypeCount = threeConstructionTypeNames.length // 柱形图数量
+
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        ...COLOR_POOL.slice(0, threeConstructionTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = year
+
+      // 5. 动态生成series
+      this.extend.series = []
+
+      // 循环添加柱形图系列（每个事件类型一个柱形）
+      threeConstructionTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index] },
+          data: threeConstructionTypes[typeName]
+        })
+      })
+      const showCount = mockData.threeConstruction.showDataCount + '' ? mockData.threeConstruction.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
+    }
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', () => {})
+    this.myChart.dispose()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/cityManage/components/introduce/components/eventBarLine.vue b/src/views/cityManage/components/introduce/components/eventBarLine.vue
index ee8104d..b317147 100644
--- a/src/views/cityManage/components/introduce/components/eventBarLine.vue
+++ b/src/views/cityManage/components/introduce/components/eventBarLine.vue
@@ -1,11 +1,18 @@
 <template>
-  <div id="caseType-linebar" class="container"/>
+  <div id="event-Bar-Line" class="container" />
 </template>
 
 <script>
 import * as echarts from 'echarts'
 import { automaticCarousel } from '@/utils/automaticCarousel'
 import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
 export default {
   name: 'SocialStability',
   data () {
@@ -13,10 +20,10 @@
       isShow: true,
       myChart: null,
       extend: {
-        color: ['#CEDE0F', '#41B8FF', '#FF7D00', '#F53F3F'], // 事件类型颜色
+        color: [], // 动态填充颜色
         legend: {
           textStyle: { color: '#cce9ff', fontWeight: 'bold' },
-          data: ['事件总数趋势', '矛盾纠纷调解', '治安案件处置', '涉稳隐患排查', '反邪宣传与排查']
+          data: [] // 动态填充图例
         },
         dataZoom: [
           { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
@@ -33,7 +40,7 @@
             }
           },
           formatter: function (params) {
-            let date = params[0].axisValue
+            const date = params[0].axisValue
             let content = `<div>${date}</div>`
             params.forEach(item => {
               content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
@@ -46,7 +53,7 @@
           type: 'category',
           axisLine: { lineStyle: { color: '#cce9ff' } },
           axisLabel: { color: '#cce9ff' },
-          data: [] // 月份数据后续填充
+          data: [] // 动态填充月份
         },
         yAxis: [
           {
@@ -59,95 +66,81 @@
             }
           }
         ],
-        series: [
-          // 1. 事件总数趋势（折线图）
-          {
-            name: '事件总数趋势',
-            type: 'line',
-            smooth: true,
-            symbol: 'circle',
-            symbolSize: 6,
-            color: '#CEDE0F',
-            data: [], // 后续填充
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0.5, color: '#CEDE0F' },
-                { offset: 1, color: 'rgba(10,25,124,0.2)' }
-              ])
-            }
-          },
-          // 2. 矛盾纠纷调解（柱状图）
-          {
-            name: '矛盾纠纷调解',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#41B8FF' },
-            data: [] // 后续填充
-          },
-          // 3. 治安案件处置（柱状图）
-          {
-            name: '治安案件处置',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#FF7D00' },
-            data: [] // 后续填充
-          },
-          // 4. 涉稳隐患排查（柱状图）
-          {
-            name: '涉稳隐患排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#F53F3F' },
-            data: [] // 后续填充
-          },
-          // 5. 反邪宣传与排查（柱状图）
-          {
-            name: '反邪宣传与排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#722ED1' },
-            data: [] // 后续填充
-          }
-        ]
+        series: [] // 动态填充系列（折线+柱形）
       }
     }
   },
   mounted () {
-    this.myChart = echarts.init(document.getElementById('caseType-linebar'))
+    this.myChart = echarts.init(document.getElementById('event-Bar-Line'))
     window.addEventListener('resize', () => {
-      if (this.myChart) this.myChart.resize()
+      this.myChart.resize()
     })
     this.fetchData()
   },
   methods: {
     fetchData () {
-      // 社会稳定和政治安全专项事件数据（模拟）
       const eventData = mockData.eventData
+      // 1. 提取基础数据
+      const { month, trend, eventTypes } = eventData
+      const eventTypeNames = Object.keys(eventTypes) // 所有事件类型名称
+      const eventTypeCount = eventTypeNames.length // 柱形图数量
 
-      // 填充X轴月份
-      this.extend.xAxis.data = eventData.month
-      // 填充折线图（事件总数趋势）
-      this.extend.series[0].data = eventData.trendData
-      // 填充柱状图（各事件类型）
-      this.extend.series[1].data = eventData.eventTypeData['矛盾纠纷调解']
-      this.extend.series[2].data = eventData.eventTypeData['治安案件处置']
-      this.extend.series[3].data = eventData.eventTypeData['涉稳隐患排查']
-      this.extend.series[4].data = eventData.eventTypeData['反邪宣传与排查']
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        COLOR_POOL[0], // 折线图颜色
+        ...COLOR_POOL.slice(1, 1 + eventTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
 
-      // 渲染图表
-      // this.myChart.setOption(this.extend, true)
-      automaticCarousel(this.extend, this.myChart, 3000, 3)
+      // 3. 动态生成图例（折线名称 + 所有事件类型名称）
+      this.extend.legend.data = [trend.name, ...eventTypeNames]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = month
+
+      // 5. 动态生成series（先折线，后柱形）
+      this.extend.series = []
+
+      // 5.1 添加折线图系列
+      this.extend.series.push({
+        name: trend.name,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        color: this.extend.color[0], // 用第一种颜色
+        data: trend.data,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0.5, color: this.extend.color[0] },
+            { offset: 1, color: 'rgba(10,25,124,0.2)' }
+          ])
+        }
+      })
+
+      // 5.2 循环添加柱形图系列（每个事件类型一个柱形）
+      eventTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index + 1] }, // 柱形颜色从第二种开始
+          data: eventTypes[typeName]
+        })
+      })
+      const showCount = mockData.showDataCount + '' ? mockData.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
     }
   },
   beforeDestroy () {
     window.removeEventListener('resize', () => {})
-    if (this.myChart) this.myChart.dispose()
+    this.myChart.dispose()
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.container{
+.container {
   width: 100%;
   height: 100%;
 }
diff --git a/src/views/industrialEconomy/components/commercial/commercial.vue b/src/views/industrialEconomy/components/commercial/commercial.vue
index 95fa443..8e14d51 100644
--- a/src/views/industrialEconomy/components/commercial/commercial.vue
+++ b/src/views/industrialEconomy/components/commercial/commercial.vue
@@ -6,13 +6,16 @@
 <template>
   <chart-layout title="营商环境" @click="getData">
     <div class="block-container">
-      <div class="block" style="width:20%;height: 100%">
+      <!-- <div class="block" style="width:20%;height: 100%">
         <commercial-total/>
       </div>
       <div class="block" style="width:40%;height: 100%">
         <commercial-pie/>
+      </div> -->
+      <div class="block" style="width:60%">
+        <CommercialTable/>
       </div>
-      <div class="block" style="width:40%;height: 100%">
+      <div class="block" style="width:40%">
         <commercial-bar/>
       </div>
     </div>
@@ -24,12 +27,15 @@
 import CommercialTotal from './components/commercialTotal'
 import CommercialPie from './components/commercialPie'
 import CommercialBar from './components/commercialBar'
+import CommercialTable from './components/commercialTable.vue'
 export default {
   name: 'Expense',
   components: {
     CommercialBar,
     CommercialPie,
-    CommercialTotal},
+    CommercialTotal,
+    CommercialTable
+  },
   methods: {
     getData () {
       // this.$refs.ecardEarth.getData()
diff --git a/src/views/industrialEconomy/components/commercial/components/commercialTable.vue b/src/views/industrialEconomy/components/commercial/components/commercialTable.vue
new file mode 100644
index 0000000..a7d1a9f
--- /dev/null
+++ b/src/views/industrialEconomy/components/commercial/components/commercialTable.vue
@@ -0,0 +1,74 @@
+<template>
+  <div style="width: 100%;height:100%;padding:0.1rem;">
+    <scroll-board :config="boardConfig"/>
+  </div>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import Corner1 from '@/components/corner/Corner1'
+import ChartLayout from '@/components/layout/chartLayout'
+import {fetchTruckCaseByType} from '@/api/cityManage'
+import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/industrialEconomy.json'
+export default {
+  name: 'TruckCaseDetail',
+  components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
+  data () {
+    return {
+      boardConfig: {
+        header: ['', '所属区域', '金融服务次数', '政策支持数量', '基础设施数量', '道路数量', '园林数量', '景点数量', '区人口总量'],
+        rowNum: 4,
+        hoverColor: true,
+        headerBGC: 'rgba(46,145,244,0.4)',
+        oddRowBGC: 'transparent',
+        evenRowBGC: '#030737',
+        headerColor: '#00F0FF',
+        rowColor: '#FFFFFF',
+        headerFontSize: '0.072rem', // 表头字体大小
+        rowFontSize: '0.07rem', // 行字体大小
+        columnWidth: [160],
+        data: [
+          ['潭东镇产业园区', '潭东镇', '135次/年', '12项', '18个', '20条', '4处', '2处', '约1.6万'],
+          ['潭东镇中心社区', '潭东镇', '160次/年', '9项', '22个', '25条', '6处', '3处', '约2.1万'],
+          ['潭东镇乡村片区', '潭东镇', '90次/年', '7项', '10个', '18条', '3处', '2处', '约1.21万'],
+          ['潭东镇商贸街区', '潭东镇', '85次/年', '6项', '9个', '12条', '2处', '1处', '约0.8万'],
+          ['潭口镇老街片区', '潭口镇', '110次/年', '8项', '15个', '16条', '3处', '2处', '约0.9万'],
+          ['潭口镇商贸新区', '潭口镇', '190次/年', '10项', '20个', '22条', '4处', '2处', '约1.2万'],
+          ['潭口镇乡村集中区', '潭口镇', '120次/年', '7项', '13个', '19条', '3处', '2处', '约0.87万'],
+          ['潭口镇工业园区', '潭口镇', '105次/年', '9项', '16个', '15条', '2处', '1处', '约0.4万'],
+          ['高校园区主校区周边', '高校园区工作组', '230次/年', '16项', '22个', '14条', '6处', '3处', '约4.5万'],
+          ['高校园区科创孵化区', '高校园区工作组', '200次/年', '12项', '18个', '12条', '5处', '2处', '约2.3万'],
+          ['高校园区人才社区', '高校园区工作组', '170次/年', '10项', '15个', '10条', '4处', '2处', '约1.2万'],
+          ['高校园区商业配套区', '高校园区工作组', '145次/年', '9项', '12个', '9条', '3处', '1处', '约0.5万']
+        ]
+      }
+    }
+  },
+  created () {
+    // this.getData()
+    this.boardConfig.header = mockData.left.commercial.table.header
+    this.boardConfig.data = mockData.left.commercial.table.data
+  },
+  methods: {
+    getData () {
+      fetchTruckCaseByType().then(response => {
+        if (response.code === 200) {
+          const data = response.data
+          const list = data.map(item => {
+            return [item.name, item.num, item.rate + '%']
+          })
+          this.boardConfig.data = list
+          const boardConfig = this.boardConfig
+          // this.$set(this, 'boardConfig', boardConfig)
+          this.boardConfig = Object.assign({}, boardConfig)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue
index 36792e1..e7ac255 100644
--- a/src/views/cityManage/cityManageLeft2.vue
+++ b/src/views/cityManage/cityManageLeft2.vue
@@ -56,7 +56,9 @@
             </div>
             <!--多元化解-->
             <div class="modular-row-30">
-              <contradiction/>
+              <contradiction style="width: 49%;"/>
+              <RoadLine  style="width: 24%;"/>
+              <ThreeConstruction  style="width: 24%;"/>
             </div>
           </div><!-- .col50 over-->
           <!--./右半-->
@@ -90,12 +92,14 @@
 import ParkIntroduce from './components/parkingSystem/parkIntroduce'
 import ParkEarth from './components/parkingSystem/parkEarth'
 import ParkDetail from './components/parkingSystem/parkDetail'
-import ParkIncomeCount from "./components/parkingSystem/parkIncomeCount";
-import ParkFlowLine from "./components/parkingSystem/parkFlowLine";
-import ParkIncomeLine from "./components/parkingSystem/parkIncomLine";
-import Contradiction from "./components/contradiction/contradiction";
-import Service from "./components/service/service";
-import Youth from "./components/youth/youth";
+import ParkIncomeCount from './components/parkingSystem/parkIncomeCount'
+import ParkFlowLine from './components/parkingSystem/parkFlowLine'
+import ParkIncomeLine from './components/parkingSystem/parkIncomLine'
+import Contradiction from './components/contradiction/contradiction'
+import Service from './components/service/service'
+import Youth from './components/youth/youth'
+import RoadLine from './components/contradiction/components/roadLine.vue'
+import ThreeConstruction from './components/contradiction/components/threeConstruction.vue'
 export default {
   name: 'CityManageLeft',
   components: {
@@ -128,7 +132,9 @@
     Introduce,
     Corner1,
     wisdomTraffic,
-    eventCom
+    eventCom,
+    RoadLine,
+    ThreeConstruction
   },
   data () {
     return {
diff --git a/src/views/cityManage/components/contradiction/components/roadLine.vue b/src/views/cityManage/components/contradiction/components/roadLine.vue
new file mode 100644
index 0000000..b9a0d1a
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/roadLine.vue
@@ -0,0 +1,62 @@
+<template>
+  <chart-layout title="护路护线管理" @click="getData">
+    <div class="block-container">
+        <simple-pie-chart
+          :id="data.id"
+          :width="data.width"
+          :height="data.height"
+          :seriesData="data.data"
+        >
+        </simple-pie-chart>
+    </div>
+  </chart-layout>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SingleLayout from '@/components/layout/singleLayout'
+// import SimpleBlock from './components/simpleBlock'
+import ChartLayout from '@/components/layout/chartLayout'
+import mockData from '../../../../../../static/city.json'
+export default {
+  name: 'introduce',
+  components: {ChartLayout, SimplePieChart, SingleLayout},
+  data () {
+    return {
+      data: {
+        id: 'contradiction-pie',
+        width: '100%',
+        height: '100%',
+        legend: ['潭东镇', '潭口镇', '高校园区工作组'],
+        data: [
+          {'value': 0, 'name': '潭东镇'},
+          {'value': 0, 'name': '潭口镇'},
+          {'value': 0, 'name': '高校园区工作组'}
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  methods: {
+    getData () {
+      this.data.data = mockData.roadLinePie
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.block-container{
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 0.04rem;
+  .block{
+    width: 25%;
+    height: 45%;
+  }
+}
+</style>
diff --git a/src/views/cityManage/components/contradiction/components/threeConstruction.vue b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
new file mode 100644
index 0000000..266c61f
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
@@ -0,0 +1,132 @@
+<template>
+  <chart-layout title="三项建设管理">
+    <!-- <div class="block-container"> -->
+      <div id="threeConstruction-bar" class="container" />
+    <!-- </div> -->
+  </chart-layout>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { automaticCarousel } from '@/utils/automaticCarousel'
+import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
+export default {
+  name: 'SocialStability',
+  data () {
+    return {
+      isShow: true,
+      myChart: null,
+      extend: {
+        color: [], // 动态填充颜色
+        legend: {
+          textStyle: { color: '#cce9ff', fontWeight: 'bold' },
+          data: [] // 动态填充图例
+        },
+        dataZoom: [
+          { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#092647',
+              borderColor: '#404a59',
+              borderWidth: 1,
+              textStyle: { color: '#ffffff', fontSize: 12 }
+            }
+          },
+          formatter: function (params) {
+            const date = params[0].axisValue
+            let content = `<div>${date}</div>`
+            params.forEach(item => {
+              content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
+            })
+            return content
+          }
+        },
+        grid: { left: '5%', right: '5%', bottom: '1%', top: '22%', containLabel: true },
+        xAxis: {
+          type: 'category',
+          axisLine: { lineStyle: { color: '#cce9ff' } },
+          axisLabel: { color: '#cce9ff' },
+          data: []
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: { lineStyle: { color: '#cce9ff' } },
+            axisLabel: { color: '#cce9ff' },
+            splitLine: {
+              show: true,
+              lineStyle: { color: ['#c8d0da'], type: 'dashed' }
+            }
+          }
+        ],
+        series: [] // 动态填充系列（折线+柱形）
+      }
+    }
+  },
+  mounted () {
+    this.myChart = echarts.init(document.getElementById('threeConstruction-bar'))
+    window.addEventListener('resize', () => {
+      this.myChart.resize()
+    })
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      const threeConstructionData = mockData.threeConstruction
+      console.log('-66666666666666666=', threeConstructionData)
+
+      // 1. 提取基础数据
+      const { year, threeConstructionTypes } = threeConstructionData
+      const threeConstructionTypeNames = Object.keys(threeConstructionTypes) // 所有事件类型名称
+      const threeConstructionTypeCount = threeConstructionTypeNames.length // 柱形图数量
+
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        ...COLOR_POOL.slice(0, threeConstructionTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = year
+
+      // 5. 动态生成series
+      this.extend.series = []
+
+      // 循环添加柱形图系列（每个事件类型一个柱形）
+      threeConstructionTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index] },
+          data: threeConstructionTypes[typeName]
+        })
+      })
+      const showCount = mockData.threeConstruction.showDataCount + '' ? mockData.threeConstruction.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
+    }
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', () => {})
+    this.myChart.dispose()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/cityManage/components/introduce/components/eventBarLine.vue b/src/views/cityManage/components/introduce/components/eventBarLine.vue
index ee8104d..b317147 100644
--- a/src/views/cityManage/components/introduce/components/eventBarLine.vue
+++ b/src/views/cityManage/components/introduce/components/eventBarLine.vue
@@ -1,11 +1,18 @@
 <template>
-  <div id="caseType-linebar" class="container"/>
+  <div id="event-Bar-Line" class="container" />
 </template>
 
 <script>
 import * as echarts from 'echarts'
 import { automaticCarousel } from '@/utils/automaticCarousel'
 import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
 export default {
   name: 'SocialStability',
   data () {
@@ -13,10 +20,10 @@
       isShow: true,
       myChart: null,
       extend: {
-        color: ['#CEDE0F', '#41B8FF', '#FF7D00', '#F53F3F'], // 事件类型颜色
+        color: [], // 动态填充颜色
         legend: {
           textStyle: { color: '#cce9ff', fontWeight: 'bold' },
-          data: ['事件总数趋势', '矛盾纠纷调解', '治安案件处置', '涉稳隐患排查', '反邪宣传与排查']
+          data: [] // 动态填充图例
         },
         dataZoom: [
           { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
@@ -33,7 +40,7 @@
             }
           },
           formatter: function (params) {
-            let date = params[0].axisValue
+            const date = params[0].axisValue
             let content = `<div>${date}</div>`
             params.forEach(item => {
               content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
@@ -46,7 +53,7 @@
           type: 'category',
           axisLine: { lineStyle: { color: '#cce9ff' } },
           axisLabel: { color: '#cce9ff' },
-          data: [] // 月份数据后续填充
+          data: [] // 动态填充月份
         },
         yAxis: [
           {
@@ -59,95 +66,81 @@
             }
           }
         ],
-        series: [
-          // 1. 事件总数趋势（折线图）
-          {
-            name: '事件总数趋势',
-            type: 'line',
-            smooth: true,
-            symbol: 'circle',
-            symbolSize: 6,
-            color: '#CEDE0F',
-            data: [], // 后续填充
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0.5, color: '#CEDE0F' },
-                { offset: 1, color: 'rgba(10,25,124,0.2)' }
-              ])
-            }
-          },
-          // 2. 矛盾纠纷调解（柱状图）
-          {
-            name: '矛盾纠纷调解',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#41B8FF' },
-            data: [] // 后续填充
-          },
-          // 3. 治安案件处置（柱状图）
-          {
-            name: '治安案件处置',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#FF7D00' },
-            data: [] // 后续填充
-          },
-          // 4. 涉稳隐患排查（柱状图）
-          {
-            name: '涉稳隐患排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#F53F3F' },
-            data: [] // 后续填充
-          },
-          // 5. 反邪宣传与排查（柱状图）
-          {
-            name: '反邪宣传与排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#722ED1' },
-            data: [] // 后续填充
-          }
-        ]
+        series: [] // 动态填充系列（折线+柱形）
       }
     }
   },
   mounted () {
-    this.myChart = echarts.init(document.getElementById('caseType-linebar'))
+    this.myChart = echarts.init(document.getElementById('event-Bar-Line'))
     window.addEventListener('resize', () => {
-      if (this.myChart) this.myChart.resize()
+      this.myChart.resize()
     })
     this.fetchData()
   },
   methods: {
     fetchData () {
-      // 社会稳定和政治安全专项事件数据（模拟）
       const eventData = mockData.eventData
+      // 1. 提取基础数据
+      const { month, trend, eventTypes } = eventData
+      const eventTypeNames = Object.keys(eventTypes) // 所有事件类型名称
+      const eventTypeCount = eventTypeNames.length // 柱形图数量
 
-      // 填充X轴月份
-      this.extend.xAxis.data = eventData.month
-      // 填充折线图（事件总数趋势）
-      this.extend.series[0].data = eventData.trendData
-      // 填充柱状图（各事件类型）
-      this.extend.series[1].data = eventData.eventTypeData['矛盾纠纷调解']
-      this.extend.series[2].data = eventData.eventTypeData['治安案件处置']
-      this.extend.series[3].data = eventData.eventTypeData['涉稳隐患排查']
-      this.extend.series[4].data = eventData.eventTypeData['反邪宣传与排查']
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        COLOR_POOL[0], // 折线图颜色
+        ...COLOR_POOL.slice(1, 1 + eventTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
 
-      // 渲染图表
-      // this.myChart.setOption(this.extend, true)
-      automaticCarousel(this.extend, this.myChart, 3000, 3)
+      // 3. 动态生成图例（折线名称 + 所有事件类型名称）
+      this.extend.legend.data = [trend.name, ...eventTypeNames]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = month
+
+      // 5. 动态生成series（先折线，后柱形）
+      this.extend.series = []
+
+      // 5.1 添加折线图系列
+      this.extend.series.push({
+        name: trend.name,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        color: this.extend.color[0], // 用第一种颜色
+        data: trend.data,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0.5, color: this.extend.color[0] },
+            { offset: 1, color: 'rgba(10,25,124,0.2)' }
+          ])
+        }
+      })
+
+      // 5.2 循环添加柱形图系列（每个事件类型一个柱形）
+      eventTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index + 1] }, // 柱形颜色从第二种开始
+          data: eventTypes[typeName]
+        })
+      })
+      const showCount = mockData.showDataCount + '' ? mockData.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
     }
   },
   beforeDestroy () {
     window.removeEventListener('resize', () => {})
-    if (this.myChart) this.myChart.dispose()
+    this.myChart.dispose()
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.container{
+.container {
   width: 100%;
   height: 100%;
 }
diff --git a/src/views/industrialEconomy/components/commercial/commercial.vue b/src/views/industrialEconomy/components/commercial/commercial.vue
index 95fa443..8e14d51 100644
--- a/src/views/industrialEconomy/components/commercial/commercial.vue
+++ b/src/views/industrialEconomy/components/commercial/commercial.vue
@@ -6,13 +6,16 @@
 <template>
   <chart-layout title="营商环境" @click="getData">
     <div class="block-container">
-      <div class="block" style="width:20%;height: 100%">
+      <!-- <div class="block" style="width:20%;height: 100%">
         <commercial-total/>
       </div>
       <div class="block" style="width:40%;height: 100%">
         <commercial-pie/>
+      </div> -->
+      <div class="block" style="width:60%">
+        <CommercialTable/>
       </div>
-      <div class="block" style="width:40%;height: 100%">
+      <div class="block" style="width:40%">
         <commercial-bar/>
       </div>
     </div>
@@ -24,12 +27,15 @@
 import CommercialTotal from './components/commercialTotal'
 import CommercialPie from './components/commercialPie'
 import CommercialBar from './components/commercialBar'
+import CommercialTable from './components/commercialTable.vue'
 export default {
   name: 'Expense',
   components: {
     CommercialBar,
     CommercialPie,
-    CommercialTotal},
+    CommercialTotal,
+    CommercialTable
+  },
   methods: {
     getData () {
       // this.$refs.ecardEarth.getData()
diff --git a/src/views/industrialEconomy/components/commercial/components/commercialTable.vue b/src/views/industrialEconomy/components/commercial/components/commercialTable.vue
new file mode 100644
index 0000000..a7d1a9f
--- /dev/null
+++ b/src/views/industrialEconomy/components/commercial/components/commercialTable.vue
@@ -0,0 +1,74 @@
+<template>
+  <div style="width: 100%;height:100%;padding:0.1rem;">
+    <scroll-board :config="boardConfig"/>
+  </div>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import Corner1 from '@/components/corner/Corner1'
+import ChartLayout from '@/components/layout/chartLayout'
+import {fetchTruckCaseByType} from '@/api/cityManage'
+import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/industrialEconomy.json'
+export default {
+  name: 'TruckCaseDetail',
+  components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
+  data () {
+    return {
+      boardConfig: {
+        header: ['', '所属区域', '金融服务次数', '政策支持数量', '基础设施数量', '道路数量', '园林数量', '景点数量', '区人口总量'],
+        rowNum: 4,
+        hoverColor: true,
+        headerBGC: 'rgba(46,145,244,0.4)',
+        oddRowBGC: 'transparent',
+        evenRowBGC: '#030737',
+        headerColor: '#00F0FF',
+        rowColor: '#FFFFFF',
+        headerFontSize: '0.072rem', // 表头字体大小
+        rowFontSize: '0.07rem', // 行字体大小
+        columnWidth: [160],
+        data: [
+          ['潭东镇产业园区', '潭东镇', '135次/年', '12项', '18个', '20条', '4处', '2处', '约1.6万'],
+          ['潭东镇中心社区', '潭东镇', '160次/年', '9项', '22个', '25条', '6处', '3处', '约2.1万'],
+          ['潭东镇乡村片区', '潭东镇', '90次/年', '7项', '10个', '18条', '3处', '2处', '约1.21万'],
+          ['潭东镇商贸街区', '潭东镇', '85次/年', '6项', '9个', '12条', '2处', '1处', '约0.8万'],
+          ['潭口镇老街片区', '潭口镇', '110次/年', '8项', '15个', '16条', '3处', '2处', '约0.9万'],
+          ['潭口镇商贸新区', '潭口镇', '190次/年', '10项', '20个', '22条', '4处', '2处', '约1.2万'],
+          ['潭口镇乡村集中区', '潭口镇', '120次/年', '7项', '13个', '19条', '3处', '2处', '约0.87万'],
+          ['潭口镇工业园区', '潭口镇', '105次/年', '9项', '16个', '15条', '2处', '1处', '约0.4万'],
+          ['高校园区主校区周边', '高校园区工作组', '230次/年', '16项', '22个', '14条', '6处', '3处', '约4.5万'],
+          ['高校园区科创孵化区', '高校园区工作组', '200次/年', '12项', '18个', '12条', '5处', '2处', '约2.3万'],
+          ['高校园区人才社区', '高校园区工作组', '170次/年', '10项', '15个', '10条', '4处', '2处', '约1.2万'],
+          ['高校园区商业配套区', '高校园区工作组', '145次/年', '9项', '12个', '9条', '3处', '1处', '约0.5万']
+        ]
+      }
+    }
+  },
+  created () {
+    // this.getData()
+    this.boardConfig.header = mockData.left.commercial.table.header
+    this.boardConfig.data = mockData.left.commercial.table.data
+  },
+  methods: {
+    getData () {
+      fetchTruckCaseByType().then(response => {
+        if (response.code === 200) {
+          const data = response.data
+          const list = data.map(item => {
+            return [item.name, item.num, item.rate + '%']
+          })
+          this.boardConfig.data = list
+          const boardConfig = this.boardConfig
+          // this.$set(this, 'boardConfig', boardConfig)
+          this.boardConfig = Object.assign({}, boardConfig)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/views/industrialEconomy/components/daily/components/dailyCount.vue b/src/views/industrialEconomy/components/daily/components/dailyCount.vue
index 79b57f9..bd64a9a 100644
--- a/src/views/industrialEconomy/components/daily/components/dailyCount.vue
+++ b/src/views/industrialEconomy/components/daily/components/dailyCount.vue
@@ -8,6 +8,7 @@
 
 <script>
 import ImageBlock2 from '@/components/block/imageBlock2'
+import mockData from '../../../../../../static/industrialEconomy.json'
 export default {
   name: 'DailyCount',
   components: {ImageBlock2},
@@ -26,7 +27,7 @@
   },
   methods: {
     getData () {
-
+      this.data = mockData.left.index.count
     }
 
   }

diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue
index 36792e1..e7ac255 100644
--- a/src/views/cityManage/cityManageLeft2.vue
+++ b/src/views/cityManage/cityManageLeft2.vue
@@ -56,7 +56,9 @@
             </div>
             <!--多元化解-->
             <div class="modular-row-30">
-              <contradiction/>
+              <contradiction style="width: 49%;"/>
+              <RoadLine  style="width: 24%;"/>
+              <ThreeConstruction  style="width: 24%;"/>
             </div>
           </div><!-- .col50 over-->
           <!--./右半-->
@@ -90,12 +92,14 @@
 import ParkIntroduce from './components/parkingSystem/parkIntroduce'
 import ParkEarth from './components/parkingSystem/parkEarth'
 import ParkDetail from './components/parkingSystem/parkDetail'
-import ParkIncomeCount from "./components/parkingSystem/parkIncomeCount";
-import ParkFlowLine from "./components/parkingSystem/parkFlowLine";
-import ParkIncomeLine from "./components/parkingSystem/parkIncomLine";
-import Contradiction from "./components/contradiction/contradiction";
-import Service from "./components/service/service";
-import Youth from "./components/youth/youth";
+import ParkIncomeCount from './components/parkingSystem/parkIncomeCount'
+import ParkFlowLine from './components/parkingSystem/parkFlowLine'
+import ParkIncomeLine from './components/parkingSystem/parkIncomLine'
+import Contradiction from './components/contradiction/contradiction'
+import Service from './components/service/service'
+import Youth from './components/youth/youth'
+import RoadLine from './components/contradiction/components/roadLine.vue'
+import ThreeConstruction from './components/contradiction/components/threeConstruction.vue'
 export default {
   name: 'CityManageLeft',
   components: {
@@ -128,7 +132,9 @@
     Introduce,
     Corner1,
     wisdomTraffic,
-    eventCom
+    eventCom,
+    RoadLine,
+    ThreeConstruction
   },
   data () {
     return {
diff --git a/src/views/cityManage/components/contradiction/components/roadLine.vue b/src/views/cityManage/components/contradiction/components/roadLine.vue
new file mode 100644
index 0000000..b9a0d1a
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/roadLine.vue
@@ -0,0 +1,62 @@
+<template>
+  <chart-layout title="护路护线管理" @click="getData">
+    <div class="block-container">
+        <simple-pie-chart
+          :id="data.id"
+          :width="data.width"
+          :height="data.height"
+          :seriesData="data.data"
+        >
+        </simple-pie-chart>
+    </div>
+  </chart-layout>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SingleLayout from '@/components/layout/singleLayout'
+// import SimpleBlock from './components/simpleBlock'
+import ChartLayout from '@/components/layout/chartLayout'
+import mockData from '../../../../../../static/city.json'
+export default {
+  name: 'introduce',
+  components: {ChartLayout, SimplePieChart, SingleLayout},
+  data () {
+    return {
+      data: {
+        id: 'contradiction-pie',
+        width: '100%',
+        height: '100%',
+        legend: ['潭东镇', '潭口镇', '高校园区工作组'],
+        data: [
+          {'value': 0, 'name': '潭东镇'},
+          {'value': 0, 'name': '潭口镇'},
+          {'value': 0, 'name': '高校园区工作组'}
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  methods: {
+    getData () {
+      this.data.data = mockData.roadLinePie
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.block-container{
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 0.04rem;
+  .block{
+    width: 25%;
+    height: 45%;
+  }
+}
+</style>
diff --git a/src/views/cityManage/components/contradiction/components/threeConstruction.vue b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
new file mode 100644
index 0000000..266c61f
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
@@ -0,0 +1,132 @@
+<template>
+  <chart-layout title="三项建设管理">
+    <!-- <div class="block-container"> -->
+      <div id="threeConstruction-bar" class="container" />
+    <!-- </div> -->
+  </chart-layout>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { automaticCarousel } from '@/utils/automaticCarousel'
+import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
+export default {
+  name: 'SocialStability',
+  data () {
+    return {
+      isShow: true,
+      myChart: null,
+      extend: {
+        color: [], // 动态填充颜色
+        legend: {
+          textStyle: { color: '#cce9ff', fontWeight: 'bold' },
+          data: [] // 动态填充图例
+        },
+        dataZoom: [
+          { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#092647',
+              borderColor: '#404a59',
+              borderWidth: 1,
+              textStyle: { color: '#ffffff', fontSize: 12 }
+            }
+          },
+          formatter: function (params) {
+            const date = params[0].axisValue
+            let content = `<div>${date}</div>`
+            params.forEach(item => {
+              content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
+            })
+            return content
+          }
+        },
+        grid: { left: '5%', right: '5%', bottom: '1%', top: '22%', containLabel: true },
+        xAxis: {
+          type: 'category',
+          axisLine: { lineStyle: { color: '#cce9ff' } },
+          axisLabel: { color: '#cce9ff' },
+          data: []
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: { lineStyle: { color: '#cce9ff' } },
+            axisLabel: { color: '#cce9ff' },
+            splitLine: {
+              show: true,
+              lineStyle: { color: ['#c8d0da'], type: 'dashed' }
+            }
+          }
+        ],
+        series: [] // 动态填充系列（折线+柱形）
+      }
+    }
+  },
+  mounted () {
+    this.myChart = echarts.init(document.getElementById('threeConstruction-bar'))
+    window.addEventListener('resize', () => {
+      this.myChart.resize()
+    })
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      const threeConstructionData = mockData.threeConstruction
+      console.log('-66666666666666666=', threeConstructionData)
+
+      // 1. 提取基础数据
+      const { year, threeConstructionTypes } = threeConstructionData
+      const threeConstructionTypeNames = Object.keys(threeConstructionTypes) // 所有事件类型名称
+      const threeConstructionTypeCount = threeConstructionTypeNames.length // 柱形图数量
+
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        ...COLOR_POOL.slice(0, threeConstructionTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = year
+
+      // 5. 动态生成series
+      this.extend.series = []
+
+      // 循环添加柱形图系列（每个事件类型一个柱形）
+      threeConstructionTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index] },
+          data: threeConstructionTypes[typeName]
+        })
+      })
+      const showCount = mockData.threeConstruction.showDataCount + '' ? mockData.threeConstruction.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
+    }
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', () => {})
+    this.myChart.dispose()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/cityManage/components/introduce/components/eventBarLine.vue b/src/views/cityManage/components/introduce/components/eventBarLine.vue
index ee8104d..b317147 100644
--- a/src/views/cityManage/components/introduce/components/eventBarLine.vue
+++ b/src/views/cityManage/components/introduce/components/eventBarLine.vue
@@ -1,11 +1,18 @@
 <template>
-  <div id="caseType-linebar" class="container"/>
+  <div id="event-Bar-Line" class="container" />
 </template>
 
 <script>
 import * as echarts from 'echarts'
 import { automaticCarousel } from '@/utils/automaticCarousel'
 import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
 export default {
   name: 'SocialStability',
   data () {
@@ -13,10 +20,10 @@
       isShow: true,
       myChart: null,
       extend: {
-        color: ['#CEDE0F', '#41B8FF', '#FF7D00', '#F53F3F'], // 事件类型颜色
+        color: [], // 动态填充颜色
         legend: {
           textStyle: { color: '#cce9ff', fontWeight: 'bold' },
-          data: ['事件总数趋势', '矛盾纠纷调解', '治安案件处置', '涉稳隐患排查', '反邪宣传与排查']
+          data: [] // 动态填充图例
         },
         dataZoom: [
           { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
@@ -33,7 +40,7 @@
             }
           },
           formatter: function (params) {
-            let date = params[0].axisValue
+            const date = params[0].axisValue
             let content = `<div>${date}</div>`
             params.forEach(item => {
               content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
@@ -46,7 +53,7 @@
           type: 'category',
           axisLine: { lineStyle: { color: '#cce9ff' } },
           axisLabel: { color: '#cce9ff' },
-          data: [] // 月份数据后续填充
+          data: [] // 动态填充月份
         },
         yAxis: [
           {
@@ -59,95 +66,81 @@
             }
           }
         ],
-        series: [
-          // 1. 事件总数趋势（折线图）
-          {
-            name: '事件总数趋势',
-            type: 'line',
-            smooth: true,
-            symbol: 'circle',
-            symbolSize: 6,
-            color: '#CEDE0F',
-            data: [], // 后续填充
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0.5, color: '#CEDE0F' },
-                { offset: 1, color: 'rgba(10,25,124,0.2)' }
-              ])
-            }
-          },
-          // 2. 矛盾纠纷调解（柱状图）
-          {
-            name: '矛盾纠纷调解',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#41B8FF' },
-            data: [] // 后续填充
-          },
-          // 3. 治安案件处置（柱状图）
-          {
-            name: '治安案件处置',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#FF7D00' },
-            data: [] // 后续填充
-          },
-          // 4. 涉稳隐患排查（柱状图）
-          {
-            name: '涉稳隐患排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#F53F3F' },
-            data: [] // 后续填充
-          },
-          // 5. 反邪宣传与排查（柱状图）
-          {
-            name: '反邪宣传与排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#722ED1' },
-            data: [] // 后续填充
-          }
-        ]
+        series: [] // 动态填充系列（折线+柱形）
       }
     }
   },
   mounted () {
-    this.myChart = echarts.init(document.getElementById('caseType-linebar'))
+    this.myChart = echarts.init(document.getElementById('event-Bar-Line'))
     window.addEventListener('resize', () => {
-      if (this.myChart) this.myChart.resize()
+      this.myChart.resize()
     })
     this.fetchData()
   },
   methods: {
     fetchData () {
-      // 社会稳定和政治安全专项事件数据（模拟）
       const eventData = mockData.eventData
+      // 1. 提取基础数据
+      const { month, trend, eventTypes } = eventData
+      const eventTypeNames = Object.keys(eventTypes) // 所有事件类型名称
+      const eventTypeCount = eventTypeNames.length // 柱形图数量
 
-      // 填充X轴月份
-      this.extend.xAxis.data = eventData.month
-      // 填充折线图（事件总数趋势）
-      this.extend.series[0].data = eventData.trendData
-      // 填充柱状图（各事件类型）
-      this.extend.series[1].data = eventData.eventTypeData['矛盾纠纷调解']
-      this.extend.series[2].data = eventData.eventTypeData['治安案件处置']
-      this.extend.series[3].data = eventData.eventTypeData['涉稳隐患排查']
-      this.extend.series[4].data = eventData.eventTypeData['反邪宣传与排查']
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        COLOR_POOL[0], // 折线图颜色
+        ...COLOR_POOL.slice(1, 1 + eventTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
 
-      // 渲染图表
-      // this.myChart.setOption(this.extend, true)
-      automaticCarousel(this.extend, this.myChart, 3000, 3)
+      // 3. 动态生成图例（折线名称 + 所有事件类型名称）
+      this.extend.legend.data = [trend.name, ...eventTypeNames]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = month
+
+      // 5. 动态生成series（先折线，后柱形）
+      this.extend.series = []
+
+      // 5.1 添加折线图系列
+      this.extend.series.push({
+        name: trend.name,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        color: this.extend.color[0], // 用第一种颜色
+        data: trend.data,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0.5, color: this.extend.color[0] },
+            { offset: 1, color: 'rgba(10,25,124,0.2)' }
+          ])
+        }
+      })
+
+      // 5.2 循环添加柱形图系列（每个事件类型一个柱形）
+      eventTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index + 1] }, // 柱形颜色从第二种开始
+          data: eventTypes[typeName]
+        })
+      })
+      const showCount = mockData.showDataCount + '' ? mockData.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
     }
   },
   beforeDestroy () {
     window.removeEventListener('resize', () => {})
-    if (this.myChart) this.myChart.dispose()
+    this.myChart.dispose()
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.container{
+.container {
   width: 100%;
   height: 100%;
 }
diff --git a/src/views/industrialEconomy/components/commercial/commercial.vue b/src/views/industrialEconomy/components/commercial/commercial.vue
index 95fa443..8e14d51 100644
--- a/src/views/industrialEconomy/components/commercial/commercial.vue
+++ b/src/views/industrialEconomy/components/commercial/commercial.vue
@@ -6,13 +6,16 @@
 <template>
   <chart-layout title="营商环境" @click="getData">
     <div class="block-container">
-      <div class="block" style="width:20%;height: 100%">
+      <!-- <div class="block" style="width:20%;height: 100%">
         <commercial-total/>
       </div>
       <div class="block" style="width:40%;height: 100%">
         <commercial-pie/>
+      </div> -->
+      <div class="block" style="width:60%">
+        <CommercialTable/>
       </div>
-      <div class="block" style="width:40%;height: 100%">
+      <div class="block" style="width:40%">
         <commercial-bar/>
       </div>
     </div>
@@ -24,12 +27,15 @@
 import CommercialTotal from './components/commercialTotal'
 import CommercialPie from './components/commercialPie'
 import CommercialBar from './components/commercialBar'
+import CommercialTable from './components/commercialTable.vue'
 export default {
   name: 'Expense',
   components: {
     CommercialBar,
     CommercialPie,
-    CommercialTotal},
+    CommercialTotal,
+    CommercialTable
+  },
   methods: {
     getData () {
       // this.$refs.ecardEarth.getData()
diff --git a/src/views/industrialEconomy/components/commercial/components/commercialTable.vue b/src/views/industrialEconomy/components/commercial/components/commercialTable.vue
new file mode 100644
index 0000000..a7d1a9f
--- /dev/null
+++ b/src/views/industrialEconomy/components/commercial/components/commercialTable.vue
@@ -0,0 +1,74 @@
+<template>
+  <div style="width: 100%;height:100%;padding:0.1rem;">
+    <scroll-board :config="boardConfig"/>
+  </div>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import Corner1 from '@/components/corner/Corner1'
+import ChartLayout from '@/components/layout/chartLayout'
+import {fetchTruckCaseByType} from '@/api/cityManage'
+import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/industrialEconomy.json'
+export default {
+  name: 'TruckCaseDetail',
+  components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
+  data () {
+    return {
+      boardConfig: {
+        header: ['', '所属区域', '金融服务次数', '政策支持数量', '基础设施数量', '道路数量', '园林数量', '景点数量', '区人口总量'],
+        rowNum: 4,
+        hoverColor: true,
+        headerBGC: 'rgba(46,145,244,0.4)',
+        oddRowBGC: 'transparent',
+        evenRowBGC: '#030737',
+        headerColor: '#00F0FF',
+        rowColor: '#FFFFFF',
+        headerFontSize: '0.072rem', // 表头字体大小
+        rowFontSize: '0.07rem', // 行字体大小
+        columnWidth: [160],
+        data: [
+          ['潭东镇产业园区', '潭东镇', '135次/年', '12项', '18个', '20条', '4处', '2处', '约1.6万'],
+          ['潭东镇中心社区', '潭东镇', '160次/年', '9项', '22个', '25条', '6处', '3处', '约2.1万'],
+          ['潭东镇乡村片区', '潭东镇', '90次/年', '7项', '10个', '18条', '3处', '2处', '约1.21万'],
+          ['潭东镇商贸街区', '潭东镇', '85次/年', '6项', '9个', '12条', '2处', '1处', '约0.8万'],
+          ['潭口镇老街片区', '潭口镇', '110次/年', '8项', '15个', '16条', '3处', '2处', '约0.9万'],
+          ['潭口镇商贸新区', '潭口镇', '190次/年', '10项', '20个', '22条', '4处', '2处', '约1.2万'],
+          ['潭口镇乡村集中区', '潭口镇', '120次/年', '7项', '13个', '19条', '3处', '2处', '约0.87万'],
+          ['潭口镇工业园区', '潭口镇', '105次/年', '9项', '16个', '15条', '2处', '1处', '约0.4万'],
+          ['高校园区主校区周边', '高校园区工作组', '230次/年', '16项', '22个', '14条', '6处', '3处', '约4.5万'],
+          ['高校园区科创孵化区', '高校园区工作组', '200次/年', '12项', '18个', '12条', '5处', '2处', '约2.3万'],
+          ['高校园区人才社区', '高校园区工作组', '170次/年', '10项', '15个', '10条', '4处', '2处', '约1.2万'],
+          ['高校园区商业配套区', '高校园区工作组', '145次/年', '9项', '12个', '9条', '3处', '1处', '约0.5万']
+        ]
+      }
+    }
+  },
+  created () {
+    // this.getData()
+    this.boardConfig.header = mockData.left.commercial.table.header
+    this.boardConfig.data = mockData.left.commercial.table.data
+  },
+  methods: {
+    getData () {
+      fetchTruckCaseByType().then(response => {
+        if (response.code === 200) {
+          const data = response.data
+          const list = data.map(item => {
+            return [item.name, item.num, item.rate + '%']
+          })
+          this.boardConfig.data = list
+          const boardConfig = this.boardConfig
+          // this.$set(this, 'boardConfig', boardConfig)
+          this.boardConfig = Object.assign({}, boardConfig)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/views/industrialEconomy/components/daily/components/dailyCount.vue b/src/views/industrialEconomy/components/daily/components/dailyCount.vue
index 79b57f9..bd64a9a 100644
--- a/src/views/industrialEconomy/components/daily/components/dailyCount.vue
+++ b/src/views/industrialEconomy/components/daily/components/dailyCount.vue
@@ -8,6 +8,7 @@
 
 <script>
 import ImageBlock2 from '@/components/block/imageBlock2'
+import mockData from '../../../../../../static/industrialEconomy.json'
 export default {
   name: 'DailyCount',
   components: {ImageBlock2},
@@ -26,7 +27,7 @@
   },
   methods: {
     getData () {
-
+      this.data = mockData.left.index.count
     }
 
   }
diff --git a/src/views/industrialEconomy/components/daily/daily.vue b/src/views/industrialEconomy/components/daily/daily.vue
index 7b9de8c..000b2f5 100644
--- a/src/views/industrialEconomy/components/daily/daily.vue
+++ b/src/views/industrialEconomy/components/daily/daily.vue
@@ -1,7 +1,7 @@
 <template>
   <chart-layout title="产业指数" @click="getData">
     <div class="block-container">
-      <div class="block" style="width:50%">
+      <div class="block" style="width:100%">
         <daily-count/>
       </div>
     </div>

diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue
index 36792e1..e7ac255 100644
--- a/src/views/cityManage/cityManageLeft2.vue
+++ b/src/views/cityManage/cityManageLeft2.vue
@@ -56,7 +56,9 @@
             </div>
             <!--多元化解-->
             <div class="modular-row-30">
-              <contradiction/>
+              <contradiction style="width: 49%;"/>
+              <RoadLine  style="width: 24%;"/>
+              <ThreeConstruction  style="width: 24%;"/>
             </div>
           </div><!-- .col50 over-->
           <!--./右半-->
@@ -90,12 +92,14 @@
 import ParkIntroduce from './components/parkingSystem/parkIntroduce'
 import ParkEarth from './components/parkingSystem/parkEarth'
 import ParkDetail from './components/parkingSystem/parkDetail'
-import ParkIncomeCount from "./components/parkingSystem/parkIncomeCount";
-import ParkFlowLine from "./components/parkingSystem/parkFlowLine";
-import ParkIncomeLine from "./components/parkingSystem/parkIncomLine";
-import Contradiction from "./components/contradiction/contradiction";
-import Service from "./components/service/service";
-import Youth from "./components/youth/youth";
+import ParkIncomeCount from './components/parkingSystem/parkIncomeCount'
+import ParkFlowLine from './components/parkingSystem/parkFlowLine'
+import ParkIncomeLine from './components/parkingSystem/parkIncomLine'
+import Contradiction from './components/contradiction/contradiction'
+import Service from './components/service/service'
+import Youth from './components/youth/youth'
+import RoadLine from './components/contradiction/components/roadLine.vue'
+import ThreeConstruction from './components/contradiction/components/threeConstruction.vue'
 export default {
   name: 'CityManageLeft',
   components: {
@@ -128,7 +132,9 @@
     Introduce,
     Corner1,
     wisdomTraffic,
-    eventCom
+    eventCom,
+    RoadLine,
+    ThreeConstruction
   },
   data () {
     return {
diff --git a/src/views/cityManage/components/contradiction/components/roadLine.vue b/src/views/cityManage/components/contradiction/components/roadLine.vue
new file mode 100644
index 0000000..b9a0d1a
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/roadLine.vue
@@ -0,0 +1,62 @@
+<template>
+  <chart-layout title="护路护线管理" @click="getData">
+    <div class="block-container">
+        <simple-pie-chart
+          :id="data.id"
+          :width="data.width"
+          :height="data.height"
+          :seriesData="data.data"
+        >
+        </simple-pie-chart>
+    </div>
+  </chart-layout>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SingleLayout from '@/components/layout/singleLayout'
+// import SimpleBlock from './components/simpleBlock'
+import ChartLayout from '@/components/layout/chartLayout'
+import mockData from '../../../../../../static/city.json'
+export default {
+  name: 'introduce',
+  components: {ChartLayout, SimplePieChart, SingleLayout},
+  data () {
+    return {
+      data: {
+        id: 'contradiction-pie',
+        width: '100%',
+        height: '100%',
+        legend: ['潭东镇', '潭口镇', '高校园区工作组'],
+        data: [
+          {'value': 0, 'name': '潭东镇'},
+          {'value': 0, 'name': '潭口镇'},
+          {'value': 0, 'name': '高校园区工作组'}
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  methods: {
+    getData () {
+      this.data.data = mockData.roadLinePie
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.block-container{
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 0.04rem;
+  .block{
+    width: 25%;
+    height: 45%;
+  }
+}
+</style>
diff --git a/src/views/cityManage/components/contradiction/components/threeConstruction.vue b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
new file mode 100644
index 0000000..266c61f
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
@@ -0,0 +1,132 @@
+<template>
+  <chart-layout title="三项建设管理">
+    <!-- <div class="block-container"> -->
+      <div id="threeConstruction-bar" class="container" />
+    <!-- </div> -->
+  </chart-layout>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { automaticCarousel } from '@/utils/automaticCarousel'
+import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
+export default {
+  name: 'SocialStability',
+  data () {
+    return {
+      isShow: true,
+      myChart: null,
+      extend: {
+        color: [], // 动态填充颜色
+        legend: {
+          textStyle: { color: '#cce9ff', fontWeight: 'bold' },
+          data: [] // 动态填充图例
+        },
+        dataZoom: [
+          { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#092647',
+              borderColor: '#404a59',
+              borderWidth: 1,
+              textStyle: { color: '#ffffff', fontSize: 12 }
+            }
+          },
+          formatter: function (params) {
+            const date = params[0].axisValue
+            let content = `<div>${date}</div>`
+            params.forEach(item => {
+              content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
+            })
+            return content
+          }
+        },
+        grid: { left: '5%', right: '5%', bottom: '1%', top: '22%', containLabel: true },
+        xAxis: {
+          type: 'category',
+          axisLine: { lineStyle: { color: '#cce9ff' } },
+          axisLabel: { color: '#cce9ff' },
+          data: []
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: { lineStyle: { color: '#cce9ff' } },
+            axisLabel: { color: '#cce9ff' },
+            splitLine: {
+              show: true,
+              lineStyle: { color: ['#c8d0da'], type: 'dashed' }
+            }
+          }
+        ],
+        series: [] // 动态填充系列（折线+柱形）
+      }
+    }
+  },
+  mounted () {
+    this.myChart = echarts.init(document.getElementById('threeConstruction-bar'))
+    window.addEventListener('resize', () => {
+      this.myChart.resize()
+    })
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      const threeConstructionData = mockData.threeConstruction
+      console.log('-66666666666666666=', threeConstructionData)
+
+      // 1. 提取基础数据
+      const { year, threeConstructionTypes } = threeConstructionData
+      const threeConstructionTypeNames = Object.keys(threeConstructionTypes) // 所有事件类型名称
+      const threeConstructionTypeCount = threeConstructionTypeNames.length // 柱形图数量
+
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        ...COLOR_POOL.slice(0, threeConstructionTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = year
+
+      // 5. 动态生成series
+      this.extend.series = []
+
+      // 循环添加柱形图系列（每个事件类型一个柱形）
+      threeConstructionTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index] },
+          data: threeConstructionTypes[typeName]
+        })
+      })
+      const showCount = mockData.threeConstruction.showDataCount + '' ? mockData.threeConstruction.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
+    }
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', () => {})
+    this.myChart.dispose()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/cityManage/components/introduce/components/eventBarLine.vue b/src/views/cityManage/components/introduce/components/eventBarLine.vue
index ee8104d..b317147 100644
--- a/src/views/cityManage/components/introduce/components/eventBarLine.vue
+++ b/src/views/cityManage/components/introduce/components/eventBarLine.vue
@@ -1,11 +1,18 @@
 <template>
-  <div id="caseType-linebar" class="container"/>
+  <div id="event-Bar-Line" class="container" />
 </template>
 
 <script>
 import * as echarts from 'echarts'
 import { automaticCarousel } from '@/utils/automaticCarousel'
 import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
 export default {
   name: 'SocialStability',
   data () {
@@ -13,10 +20,10 @@
       isShow: true,
       myChart: null,
       extend: {
-        color: ['#CEDE0F', '#41B8FF', '#FF7D00', '#F53F3F'], // 事件类型颜色
+        color: [], // 动态填充颜色
         legend: {
           textStyle: { color: '#cce9ff', fontWeight: 'bold' },
-          data: ['事件总数趋势', '矛盾纠纷调解', '治安案件处置', '涉稳隐患排查', '反邪宣传与排查']
+          data: [] // 动态填充图例
         },
         dataZoom: [
           { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
@@ -33,7 +40,7 @@
             }
           },
           formatter: function (params) {
-            let date = params[0].axisValue
+            const date = params[0].axisValue
             let content = `<div>${date}</div>`
             params.forEach(item => {
               content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
@@ -46,7 +53,7 @@
           type: 'category',
           axisLine: { lineStyle: { color: '#cce9ff' } },
           axisLabel: { color: '#cce9ff' },
-          data: [] // 月份数据后续填充
+          data: [] // 动态填充月份
         },
         yAxis: [
           {
@@ -59,95 +66,81 @@
             }
           }
         ],
-        series: [
-          // 1. 事件总数趋势（折线图）
-          {
-            name: '事件总数趋势',
-            type: 'line',
-            smooth: true,
-            symbol: 'circle',
-            symbolSize: 6,
-            color: '#CEDE0F',
-            data: [], // 后续填充
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0.5, color: '#CEDE0F' },
-                { offset: 1, color: 'rgba(10,25,124,0.2)' }
-              ])
-            }
-          },
-          // 2. 矛盾纠纷调解（柱状图）
-          {
-            name: '矛盾纠纷调解',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#41B8FF' },
-            data: [] // 后续填充
-          },
-          // 3. 治安案件处置（柱状图）
-          {
-            name: '治安案件处置',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#FF7D00' },
-            data: [] // 后续填充
-          },
-          // 4. 涉稳隐患排查（柱状图）
-          {
-            name: '涉稳隐患排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#F53F3F' },
-            data: [] // 后续填充
-          },
-          // 5. 反邪宣传与排查（柱状图）
-          {
-            name: '反邪宣传与排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#722ED1' },
-            data: [] // 后续填充
-          }
-        ]
+        series: [] // 动态填充系列（折线+柱形）
       }
     }
   },
   mounted () {
-    this.myChart = echarts.init(document.getElementById('caseType-linebar'))
+    this.myChart = echarts.init(document.getElementById('event-Bar-Line'))
     window.addEventListener('resize', () => {
-      if (this.myChart) this.myChart.resize()
+      this.myChart.resize()
     })
     this.fetchData()
   },
   methods: {
     fetchData () {
-      // 社会稳定和政治安全专项事件数据（模拟）
       const eventData = mockData.eventData
+      // 1. 提取基础数据
+      const { month, trend, eventTypes } = eventData
+      const eventTypeNames = Object.keys(eventTypes) // 所有事件类型名称
+      const eventTypeCount = eventTypeNames.length // 柱形图数量
 
-      // 填充X轴月份
-      this.extend.xAxis.data = eventData.month
-      // 填充折线图（事件总数趋势）
-      this.extend.series[0].data = eventData.trendData
-      // 填充柱状图（各事件类型）
-      this.extend.series[1].data = eventData.eventTypeData['矛盾纠纷调解']
-      this.extend.series[2].data = eventData.eventTypeData['治安案件处置']
-      this.extend.series[3].data = eventData.eventTypeData['涉稳隐患排查']
-      this.extend.series[4].data = eventData.eventTypeData['反邪宣传与排查']
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        COLOR_POOL[0], // 折线图颜色
+        ...COLOR_POOL.slice(1, 1 + eventTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
 
-      // 渲染图表
-      // this.myChart.setOption(this.extend, true)
-      automaticCarousel(this.extend, this.myChart, 3000, 3)
+      // 3. 动态生成图例（折线名称 + 所有事件类型名称）
+      this.extend.legend.data = [trend.name, ...eventTypeNames]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = month
+
+      // 5. 动态生成series（先折线，后柱形）
+      this.extend.series = []
+
+      // 5.1 添加折线图系列
+      this.extend.series.push({
+        name: trend.name,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        color: this.extend.color[0], // 用第一种颜色
+        data: trend.data,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0.5, color: this.extend.color[0] },
+            { offset: 1, color: 'rgba(10,25,124,0.2)' }
+          ])
+        }
+      })
+
+      // 5.2 循环添加柱形图系列（每个事件类型一个柱形）
+      eventTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index + 1] }, // 柱形颜色从第二种开始
+          data: eventTypes[typeName]
+        })
+      })
+      const showCount = mockData.showDataCount + '' ? mockData.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
     }
   },
   beforeDestroy () {
     window.removeEventListener('resize', () => {})
-    if (this.myChart) this.myChart.dispose()
+    this.myChart.dispose()
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.container{
+.container {
   width: 100%;
   height: 100%;
 }
diff --git a/src/views/industrialEconomy/components/commercial/commercial.vue b/src/views/industrialEconomy/components/commercial/commercial.vue
index 95fa443..8e14d51 100644
--- a/src/views/industrialEconomy/components/commercial/commercial.vue
+++ b/src/views/industrialEconomy/components/commercial/commercial.vue
@@ -6,13 +6,16 @@
 <template>
   <chart-layout title="营商环境" @click="getData">
     <div class="block-container">
-      <div class="block" style="width:20%;height: 100%">
+      <!-- <div class="block" style="width:20%;height: 100%">
         <commercial-total/>
       </div>
       <div class="block" style="width:40%;height: 100%">
         <commercial-pie/>
+      </div> -->
+      <div class="block" style="width:60%">
+        <CommercialTable/>
       </div>
-      <div class="block" style="width:40%;height: 100%">
+      <div class="block" style="width:40%">
         <commercial-bar/>
       </div>
     </div>
@@ -24,12 +27,15 @@
 import CommercialTotal from './components/commercialTotal'
 import CommercialPie from './components/commercialPie'
 import CommercialBar from './components/commercialBar'
+import CommercialTable from './components/commercialTable.vue'
 export default {
   name: 'Expense',
   components: {
     CommercialBar,
     CommercialPie,
-    CommercialTotal},
+    CommercialTotal,
+    CommercialTable
+  },
   methods: {
     getData () {
       // this.$refs.ecardEarth.getData()
diff --git a/src/views/industrialEconomy/components/commercial/components/commercialTable.vue b/src/views/industrialEconomy/components/commercial/components/commercialTable.vue
new file mode 100644
index 0000000..a7d1a9f
--- /dev/null
+++ b/src/views/industrialEconomy/components/commercial/components/commercialTable.vue
@@ -0,0 +1,74 @@
+<template>
+  <div style="width: 100%;height:100%;padding:0.1rem;">
+    <scroll-board :config="boardConfig"/>
+  </div>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import Corner1 from '@/components/corner/Corner1'
+import ChartLayout from '@/components/layout/chartLayout'
+import {fetchTruckCaseByType} from '@/api/cityManage'
+import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/industrialEconomy.json'
+export default {
+  name: 'TruckCaseDetail',
+  components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
+  data () {
+    return {
+      boardConfig: {
+        header: ['', '所属区域', '金融服务次数', '政策支持数量', '基础设施数量', '道路数量', '园林数量', '景点数量', '区人口总量'],
+        rowNum: 4,
+        hoverColor: true,
+        headerBGC: 'rgba(46,145,244,0.4)',
+        oddRowBGC: 'transparent',
+        evenRowBGC: '#030737',
+        headerColor: '#00F0FF',
+        rowColor: '#FFFFFF',
+        headerFontSize: '0.072rem', // 表头字体大小
+        rowFontSize: '0.07rem', // 行字体大小
+        columnWidth: [160],
+        data: [
+          ['潭东镇产业园区', '潭东镇', '135次/年', '12项', '18个', '20条', '4处', '2处', '约1.6万'],
+          ['潭东镇中心社区', '潭东镇', '160次/年', '9项', '22个', '25条', '6处', '3处', '约2.1万'],
+          ['潭东镇乡村片区', '潭东镇', '90次/年', '7项', '10个', '18条', '3处', '2处', '约1.21万'],
+          ['潭东镇商贸街区', '潭东镇', '85次/年', '6项', '9个', '12条', '2处', '1处', '约0.8万'],
+          ['潭口镇老街片区', '潭口镇', '110次/年', '8项', '15个', '16条', '3处', '2处', '约0.9万'],
+          ['潭口镇商贸新区', '潭口镇', '190次/年', '10项', '20个', '22条', '4处', '2处', '约1.2万'],
+          ['潭口镇乡村集中区', '潭口镇', '120次/年', '7项', '13个', '19条', '3处', '2处', '约0.87万'],
+          ['潭口镇工业园区', '潭口镇', '105次/年', '9项', '16个', '15条', '2处', '1处', '约0.4万'],
+          ['高校园区主校区周边', '高校园区工作组', '230次/年', '16项', '22个', '14条', '6处', '3处', '约4.5万'],
+          ['高校园区科创孵化区', '高校园区工作组', '200次/年', '12项', '18个', '12条', '5处', '2处', '约2.3万'],
+          ['高校园区人才社区', '高校园区工作组', '170次/年', '10项', '15个', '10条', '4处', '2处', '约1.2万'],
+          ['高校园区商业配套区', '高校园区工作组', '145次/年', '9项', '12个', '9条', '3处', '1处', '约0.5万']
+        ]
+      }
+    }
+  },
+  created () {
+    // this.getData()
+    this.boardConfig.header = mockData.left.commercial.table.header
+    this.boardConfig.data = mockData.left.commercial.table.data
+  },
+  methods: {
+    getData () {
+      fetchTruckCaseByType().then(response => {
+        if (response.code === 200) {
+          const data = response.data
+          const list = data.map(item => {
+            return [item.name, item.num, item.rate + '%']
+          })
+          this.boardConfig.data = list
+          const boardConfig = this.boardConfig
+          // this.$set(this, 'boardConfig', boardConfig)
+          this.boardConfig = Object.assign({}, boardConfig)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/views/industrialEconomy/components/daily/components/dailyCount.vue b/src/views/industrialEconomy/components/daily/components/dailyCount.vue
index 79b57f9..bd64a9a 100644
--- a/src/views/industrialEconomy/components/daily/components/dailyCount.vue
+++ b/src/views/industrialEconomy/components/daily/components/dailyCount.vue
@@ -8,6 +8,7 @@
 
 <script>
 import ImageBlock2 from '@/components/block/imageBlock2'
+import mockData from '../../../../../../static/industrialEconomy.json'
 export default {
   name: 'DailyCount',
   components: {ImageBlock2},
@@ -26,7 +27,7 @@
   },
   methods: {
     getData () {
-
+      this.data = mockData.left.index.count
     }
 
   }
diff --git a/src/views/industrialEconomy/components/daily/daily.vue b/src/views/industrialEconomy/components/daily/daily.vue
index 7b9de8c..000b2f5 100644
--- a/src/views/industrialEconomy/components/daily/daily.vue
+++ b/src/views/industrialEconomy/components/daily/daily.vue
@@ -1,7 +1,7 @@
 <template>
   <chart-layout title="产业指数" @click="getData">
     <div class="block-container">
-      <div class="block" style="width:50%">
+      <div class="block" style="width:100%">
         <daily-count/>
       </div>
     </div>
diff --git a/src/views/industrialEconomy/industrialEconomyLeft.vue b/src/views/industrialEconomy/industrialEconomyLeft.vue
index 0f9b1d3..6047108 100644
--- a/src/views/industrialEconomy/industrialEconomyLeft.vue
+++ b/src/views/industrialEconomy/industrialEconomyLeft.vue
@@ -9,7 +9,7 @@
               <indicator/>
             </div>
             <div class="modular-row-30">
-              <div class="modular-col-60 modular-padding-right">
+              <div class="modular-col-100 modular-padding-right">
                 <commercial/>
               </div>
               <div class="modular-col-30">

diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue
index 36792e1..e7ac255 100644
--- a/src/views/cityManage/cityManageLeft2.vue
+++ b/src/views/cityManage/cityManageLeft2.vue
@@ -56,7 +56,9 @@
             </div>
             <!--多元化解-->
             <div class="modular-row-30">
-              <contradiction/>
+              <contradiction style="width: 49%;"/>
+              <RoadLine  style="width: 24%;"/>
+              <ThreeConstruction  style="width: 24%;"/>
             </div>
           </div><!-- .col50 over-->
           <!--./右半-->
@@ -90,12 +92,14 @@
 import ParkIntroduce from './components/parkingSystem/parkIntroduce'
 import ParkEarth from './components/parkingSystem/parkEarth'
 import ParkDetail from './components/parkingSystem/parkDetail'
-import ParkIncomeCount from "./components/parkingSystem/parkIncomeCount";
-import ParkFlowLine from "./components/parkingSystem/parkFlowLine";
-import ParkIncomeLine from "./components/parkingSystem/parkIncomLine";
-import Contradiction from "./components/contradiction/contradiction";
-import Service from "./components/service/service";
-import Youth from "./components/youth/youth";
+import ParkIncomeCount from './components/parkingSystem/parkIncomeCount'
+import ParkFlowLine from './components/parkingSystem/parkFlowLine'
+import ParkIncomeLine from './components/parkingSystem/parkIncomLine'
+import Contradiction from './components/contradiction/contradiction'
+import Service from './components/service/service'
+import Youth from './components/youth/youth'
+import RoadLine from './components/contradiction/components/roadLine.vue'
+import ThreeConstruction from './components/contradiction/components/threeConstruction.vue'
 export default {
   name: 'CityManageLeft',
   components: {
@@ -128,7 +132,9 @@
     Introduce,
     Corner1,
     wisdomTraffic,
-    eventCom
+    eventCom,
+    RoadLine,
+    ThreeConstruction
   },
   data () {
     return {
diff --git a/src/views/cityManage/components/contradiction/components/roadLine.vue b/src/views/cityManage/components/contradiction/components/roadLine.vue
new file mode 100644
index 0000000..b9a0d1a
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/roadLine.vue
@@ -0,0 +1,62 @@
+<template>
+  <chart-layout title="护路护线管理" @click="getData">
+    <div class="block-container">
+        <simple-pie-chart
+          :id="data.id"
+          :width="data.width"
+          :height="data.height"
+          :seriesData="data.data"
+        >
+        </simple-pie-chart>
+    </div>
+  </chart-layout>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SingleLayout from '@/components/layout/singleLayout'
+// import SimpleBlock from './components/simpleBlock'
+import ChartLayout from '@/components/layout/chartLayout'
+import mockData from '../../../../../../static/city.json'
+export default {
+  name: 'introduce',
+  components: {ChartLayout, SimplePieChart, SingleLayout},
+  data () {
+    return {
+      data: {
+        id: 'contradiction-pie',
+        width: '100%',
+        height: '100%',
+        legend: ['潭东镇', '潭口镇', '高校园区工作组'],
+        data: [
+          {'value': 0, 'name': '潭东镇'},
+          {'value': 0, 'name': '潭口镇'},
+          {'value': 0, 'name': '高校园区工作组'}
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  methods: {
+    getData () {
+      this.data.data = mockData.roadLinePie
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.block-container{
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 0.04rem;
+  .block{
+    width: 25%;
+    height: 45%;
+  }
+}
+</style>
diff --git a/src/views/cityManage/components/contradiction/components/threeConstruction.vue b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
new file mode 100644
index 0000000..266c61f
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
@@ -0,0 +1,132 @@
+<template>
+  <chart-layout title="三项建设管理">
+    <!-- <div class="block-container"> -->
+      <div id="threeConstruction-bar" class="container" />
+    <!-- </div> -->
+  </chart-layout>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { automaticCarousel } from '@/utils/automaticCarousel'
+import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
+export default {
+  name: 'SocialStability',
+  data () {
+    return {
+      isShow: true,
+      myChart: null,
+      extend: {
+        color: [], // 动态填充颜色
+        legend: {
+          textStyle: { color: '#cce9ff', fontWeight: 'bold' },
+          data: [] // 动态填充图例
+        },
+        dataZoom: [
+          { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#092647',
+              borderColor: '#404a59',
+              borderWidth: 1,
+              textStyle: { color: '#ffffff', fontSize: 12 }
+            }
+          },
+          formatter: function (params) {
+            const date = params[0].axisValue
+            let content = `<div>${date}</div>`
+            params.forEach(item => {
+              content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
+            })
+            return content
+          }
+        },
+        grid: { left: '5%', right: '5%', bottom: '1%', top: '22%', containLabel: true },
+        xAxis: {
+          type: 'category',
+          axisLine: { lineStyle: { color: '#cce9ff' } },
+          axisLabel: { color: '#cce9ff' },
+          data: []
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: { lineStyle: { color: '#cce9ff' } },
+            axisLabel: { color: '#cce9ff' },
+            splitLine: {
+              show: true,
+              lineStyle: { color: ['#c8d0da'], type: 'dashed' }
+            }
+          }
+        ],
+        series: [] // 动态填充系列（折线+柱形）
+      }
+    }
+  },
+  mounted () {
+    this.myChart = echarts.init(document.getElementById('threeConstruction-bar'))
+    window.addEventListener('resize', () => {
+      this.myChart.resize()
+    })
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      const threeConstructionData = mockData.threeConstruction
+      console.log('-66666666666666666=', threeConstructionData)
+
+      // 1. 提取基础数据
+      const { year, threeConstructionTypes } = threeConstructionData
+      const threeConstructionTypeNames = Object.keys(threeConstructionTypes) // 所有事件类型名称
+      const threeConstructionTypeCount = threeConstructionTypeNames.length // 柱形图数量
+
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        ...COLOR_POOL.slice(0, threeConstructionTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = year
+
+      // 5. 动态生成series
+      this.extend.series = []
+
+      // 循环添加柱形图系列（每个事件类型一个柱形）
+      threeConstructionTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index] },
+          data: threeConstructionTypes[typeName]
+        })
+      })
+      const showCount = mockData.threeConstruction.showDataCount + '' ? mockData.threeConstruction.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
+    }
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', () => {})
+    this.myChart.dispose()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/cityManage/components/introduce/components/eventBarLine.vue b/src/views/cityManage/components/introduce/components/eventBarLine.vue
index ee8104d..b317147 100644
--- a/src/views/cityManage/components/introduce/components/eventBarLine.vue
+++ b/src/views/cityManage/components/introduce/components/eventBarLine.vue
@@ -1,11 +1,18 @@
 <template>
-  <div id="caseType-linebar" class="container"/>
+  <div id="event-Bar-Line" class="container" />
 </template>
 
 <script>
 import * as echarts from 'echarts'
 import { automaticCarousel } from '@/utils/automaticCarousel'
 import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
 export default {
   name: 'SocialStability',
   data () {
@@ -13,10 +20,10 @@
       isShow: true,
       myChart: null,
       extend: {
-        color: ['#CEDE0F', '#41B8FF', '#FF7D00', '#F53F3F'], // 事件类型颜色
+        color: [], // 动态填充颜色
         legend: {
           textStyle: { color: '#cce9ff', fontWeight: 'bold' },
-          data: ['事件总数趋势', '矛盾纠纷调解', '治安案件处置', '涉稳隐患排查', '反邪宣传与排查']
+          data: [] // 动态填充图例
         },
         dataZoom: [
           { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
@@ -33,7 +40,7 @@
             }
           },
           formatter: function (params) {
-            let date = params[0].axisValue
+            const date = params[0].axisValue
             let content = `<div>${date}</div>`
             params.forEach(item => {
               content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
@@ -46,7 +53,7 @@
           type: 'category',
           axisLine: { lineStyle: { color: '#cce9ff' } },
           axisLabel: { color: '#cce9ff' },
-          data: [] // 月份数据后续填充
+          data: [] // 动态填充月份
         },
         yAxis: [
           {
@@ -59,95 +66,81 @@
             }
           }
         ],
-        series: [
-          // 1. 事件总数趋势（折线图）
-          {
-            name: '事件总数趋势',
-            type: 'line',
-            smooth: true,
-            symbol: 'circle',
-            symbolSize: 6,
-            color: '#CEDE0F',
-            data: [], // 后续填充
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0.5, color: '#CEDE0F' },
-                { offset: 1, color: 'rgba(10,25,124,0.2)' }
-              ])
-            }
-          },
-          // 2. 矛盾纠纷调解（柱状图）
-          {
-            name: '矛盾纠纷调解',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#41B8FF' },
-            data: [] // 后续填充
-          },
-          // 3. 治安案件处置（柱状图）
-          {
-            name: '治安案件处置',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#FF7D00' },
-            data: [] // 后续填充
-          },
-          // 4. 涉稳隐患排查（柱状图）
-          {
-            name: '涉稳隐患排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#F53F3F' },
-            data: [] // 后续填充
-          },
-          // 5. 反邪宣传与排查（柱状图）
-          {
-            name: '反邪宣传与排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#722ED1' },
-            data: [] // 后续填充
-          }
-        ]
+        series: [] // 动态填充系列（折线+柱形）
       }
     }
   },
   mounted () {
-    this.myChart = echarts.init(document.getElementById('caseType-linebar'))
+    this.myChart = echarts.init(document.getElementById('event-Bar-Line'))
     window.addEventListener('resize', () => {
-      if (this.myChart) this.myChart.resize()
+      this.myChart.resize()
     })
     this.fetchData()
   },
   methods: {
     fetchData () {
-      // 社会稳定和政治安全专项事件数据（模拟）
       const eventData = mockData.eventData
+      // 1. 提取基础数据
+      const { month, trend, eventTypes } = eventData
+      const eventTypeNames = Object.keys(eventTypes) // 所有事件类型名称
+      const eventTypeCount = eventTypeNames.length // 柱形图数量
 
-      // 填充X轴月份
-      this.extend.xAxis.data = eventData.month
-      // 填充折线图（事件总数趋势）
-      this.extend.series[0].data = eventData.trendData
-      // 填充柱状图（各事件类型）
-      this.extend.series[1].data = eventData.eventTypeData['矛盾纠纷调解']
-      this.extend.series[2].data = eventData.eventTypeData['治安案件处置']
-      this.extend.series[3].data = eventData.eventTypeData['涉稳隐患排查']
-      this.extend.series[4].data = eventData.eventTypeData['反邪宣传与排查']
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        COLOR_POOL[0], // 折线图颜色
+        ...COLOR_POOL.slice(1, 1 + eventTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
 
-      // 渲染图表
-      // this.myChart.setOption(this.extend, true)
-      automaticCarousel(this.extend, this.myChart, 3000, 3)
+      // 3. 动态生成图例（折线名称 + 所有事件类型名称）
+      this.extend.legend.data = [trend.name, ...eventTypeNames]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = month
+
+      // 5. 动态生成series（先折线，后柱形）
+      this.extend.series = []
+
+      // 5.1 添加折线图系列
+      this.extend.series.push({
+        name: trend.name,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        color: this.extend.color[0], // 用第一种颜色
+        data: trend.data,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0.5, color: this.extend.color[0] },
+            { offset: 1, color: 'rgba(10,25,124,0.2)' }
+          ])
+        }
+      })
+
+      // 5.2 循环添加柱形图系列（每个事件类型一个柱形）
+      eventTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index + 1] }, // 柱形颜色从第二种开始
+          data: eventTypes[typeName]
+        })
+      })
+      const showCount = mockData.showDataCount + '' ? mockData.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
     }
   },
   beforeDestroy () {
     window.removeEventListener('resize', () => {})
-    if (this.myChart) this.myChart.dispose()
+    this.myChart.dispose()
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.container{
+.container {
   width: 100%;
   height: 100%;
 }
diff --git a/src/views/industrialEconomy/components/commercial/commercial.vue b/src/views/industrialEconomy/components/commercial/commercial.vue
index 95fa443..8e14d51 100644
--- a/src/views/industrialEconomy/components/commercial/commercial.vue
+++ b/src/views/industrialEconomy/components/commercial/commercial.vue
@@ -6,13 +6,16 @@
 <template>
   <chart-layout title="营商环境" @click="getData">
     <div class="block-container">
-      <div class="block" style="width:20%;height: 100%">
+      <!-- <div class="block" style="width:20%;height: 100%">
         <commercial-total/>
       </div>
       <div class="block" style="width:40%;height: 100%">
         <commercial-pie/>
+      </div> -->
+      <div class="block" style="width:60%">
+        <CommercialTable/>
       </div>
-      <div class="block" style="width:40%;height: 100%">
+      <div class="block" style="width:40%">
         <commercial-bar/>
       </div>
     </div>
@@ -24,12 +27,15 @@
 import CommercialTotal from './components/commercialTotal'
 import CommercialPie from './components/commercialPie'
 import CommercialBar from './components/commercialBar'
+import CommercialTable from './components/commercialTable.vue'
 export default {
   name: 'Expense',
   components: {
     CommercialBar,
     CommercialPie,
-    CommercialTotal},
+    CommercialTotal,
+    CommercialTable
+  },
   methods: {
     getData () {
       // this.$refs.ecardEarth.getData()
diff --git a/src/views/industrialEconomy/components/commercial/components/commercialTable.vue b/src/views/industrialEconomy/components/commercial/components/commercialTable.vue
new file mode 100644
index 0000000..a7d1a9f
--- /dev/null
+++ b/src/views/industrialEconomy/components/commercial/components/commercialTable.vue
@@ -0,0 +1,74 @@
+<template>
+  <div style="width: 100%;height:100%;padding:0.1rem;">
+    <scroll-board :config="boardConfig"/>
+  </div>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import Corner1 from '@/components/corner/Corner1'
+import ChartLayout from '@/components/layout/chartLayout'
+import {fetchTruckCaseByType} from '@/api/cityManage'
+import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/industrialEconomy.json'
+export default {
+  name: 'TruckCaseDetail',
+  components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
+  data () {
+    return {
+      boardConfig: {
+        header: ['', '所属区域', '金融服务次数', '政策支持数量', '基础设施数量', '道路数量', '园林数量', '景点数量', '区人口总量'],
+        rowNum: 4,
+        hoverColor: true,
+        headerBGC: 'rgba(46,145,244,0.4)',
+        oddRowBGC: 'transparent',
+        evenRowBGC: '#030737',
+        headerColor: '#00F0FF',
+        rowColor: '#FFFFFF',
+        headerFontSize: '0.072rem', // 表头字体大小
+        rowFontSize: '0.07rem', // 行字体大小
+        columnWidth: [160],
+        data: [
+          ['潭东镇产业园区', '潭东镇', '135次/年', '12项', '18个', '20条', '4处', '2处', '约1.6万'],
+          ['潭东镇中心社区', '潭东镇', '160次/年', '9项', '22个', '25条', '6处', '3处', '约2.1万'],
+          ['潭东镇乡村片区', '潭东镇', '90次/年', '7项', '10个', '18条', '3处', '2处', '约1.21万'],
+          ['潭东镇商贸街区', '潭东镇', '85次/年', '6项', '9个', '12条', '2处', '1处', '约0.8万'],
+          ['潭口镇老街片区', '潭口镇', '110次/年', '8项', '15个', '16条', '3处', '2处', '约0.9万'],
+          ['潭口镇商贸新区', '潭口镇', '190次/年', '10项', '20个', '22条', '4处', '2处', '约1.2万'],
+          ['潭口镇乡村集中区', '潭口镇', '120次/年', '7项', '13个', '19条', '3处', '2处', '约0.87万'],
+          ['潭口镇工业园区', '潭口镇', '105次/年', '9项', '16个', '15条', '2处', '1处', '约0.4万'],
+          ['高校园区主校区周边', '高校园区工作组', '230次/年', '16项', '22个', '14条', '6处', '3处', '约4.5万'],
+          ['高校园区科创孵化区', '高校园区工作组', '200次/年', '12项', '18个', '12条', '5处', '2处', '约2.3万'],
+          ['高校园区人才社区', '高校园区工作组', '170次/年', '10项', '15个', '10条', '4处', '2处', '约1.2万'],
+          ['高校园区商业配套区', '高校园区工作组', '145次/年', '9项', '12个', '9条', '3处', '1处', '约0.5万']
+        ]
+      }
+    }
+  },
+  created () {
+    // this.getData()
+    this.boardConfig.header = mockData.left.commercial.table.header
+    this.boardConfig.data = mockData.left.commercial.table.data
+  },
+  methods: {
+    getData () {
+      fetchTruckCaseByType().then(response => {
+        if (response.code === 200) {
+          const data = response.data
+          const list = data.map(item => {
+            return [item.name, item.num, item.rate + '%']
+          })
+          this.boardConfig.data = list
+          const boardConfig = this.boardConfig
+          // this.$set(this, 'boardConfig', boardConfig)
+          this.boardConfig = Object.assign({}, boardConfig)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/views/industrialEconomy/components/daily/components/dailyCount.vue b/src/views/industrialEconomy/components/daily/components/dailyCount.vue
index 79b57f9..bd64a9a 100644
--- a/src/views/industrialEconomy/components/daily/components/dailyCount.vue
+++ b/src/views/industrialEconomy/components/daily/components/dailyCount.vue
@@ -8,6 +8,7 @@
 
 <script>
 import ImageBlock2 from '@/components/block/imageBlock2'
+import mockData from '../../../../../../static/industrialEconomy.json'
 export default {
   name: 'DailyCount',
   components: {ImageBlock2},
@@ -26,7 +27,7 @@
   },
   methods: {
     getData () {
-
+      this.data = mockData.left.index.count
     }
 
   }
diff --git a/src/views/industrialEconomy/components/daily/daily.vue b/src/views/industrialEconomy/components/daily/daily.vue
index 7b9de8c..000b2f5 100644
--- a/src/views/industrialEconomy/components/daily/daily.vue
+++ b/src/views/industrialEconomy/components/daily/daily.vue
@@ -1,7 +1,7 @@
 <template>
   <chart-layout title="产业指数" @click="getData">
     <div class="block-container">
-      <div class="block" style="width:50%">
+      <div class="block" style="width:100%">
         <daily-count/>
       </div>
     </div>
diff --git a/src/views/industrialEconomy/industrialEconomyLeft.vue b/src/views/industrialEconomy/industrialEconomyLeft.vue
index 0f9b1d3..6047108 100644
--- a/src/views/industrialEconomy/industrialEconomyLeft.vue
+++ b/src/views/industrialEconomy/industrialEconomyLeft.vue
@@ -9,7 +9,7 @@
               <indicator/>
             </div>
             <div class="modular-row-30">
-              <div class="modular-col-60 modular-padding-right">
+              <div class="modular-col-100 modular-padding-right">
                 <commercial/>
               </div>
               <div class="modular-col-30">
diff --git a/src/views/industrialEconomy/industrialEconomyRight.vue b/src/views/industrialEconomy/industrialEconomyRight.vue
index 848b398..e23cbc5 100644
--- a/src/views/industrialEconomy/industrialEconomyRight.vue
+++ b/src/views/industrialEconomy/industrialEconomyRight.vue
@@ -32,10 +32,10 @@
 import Enterprise from './components/enterprise/enterprise'
 import Commercial from './components/commercial/commercial'
 import Daily from './components/daily/daily'
-import Expense from "./components/expense/expense";
-import Structure from "./components/structure/structure";
-import Building from "./components/building/building";
-import Assets from "./components/assets/assets";
+import Expense from './components/expense/expense'
+import Structure from './components/structure/structure'
+import Building from './components/building/building'
+import Assets from './components/assets/assets'
 export default {
   name: 'industrialEconomyRight',
   components: {

diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue
index 36792e1..e7ac255 100644
--- a/src/views/cityManage/cityManageLeft2.vue
+++ b/src/views/cityManage/cityManageLeft2.vue
@@ -56,7 +56,9 @@
             </div>
             <!--多元化解-->
             <div class="modular-row-30">
-              <contradiction/>
+              <contradiction style="width: 49%;"/>
+              <RoadLine  style="width: 24%;"/>
+              <ThreeConstruction  style="width: 24%;"/>
             </div>
           </div><!-- .col50 over-->
           <!--./右半-->
@@ -90,12 +92,14 @@
 import ParkIntroduce from './components/parkingSystem/parkIntroduce'
 import ParkEarth from './components/parkingSystem/parkEarth'
 import ParkDetail from './components/parkingSystem/parkDetail'
-import ParkIncomeCount from "./components/parkingSystem/parkIncomeCount";
-import ParkFlowLine from "./components/parkingSystem/parkFlowLine";
-import ParkIncomeLine from "./components/parkingSystem/parkIncomLine";
-import Contradiction from "./components/contradiction/contradiction";
-import Service from "./components/service/service";
-import Youth from "./components/youth/youth";
+import ParkIncomeCount from './components/parkingSystem/parkIncomeCount'
+import ParkFlowLine from './components/parkingSystem/parkFlowLine'
+import ParkIncomeLine from './components/parkingSystem/parkIncomLine'
+import Contradiction from './components/contradiction/contradiction'
+import Service from './components/service/service'
+import Youth from './components/youth/youth'
+import RoadLine from './components/contradiction/components/roadLine.vue'
+import ThreeConstruction from './components/contradiction/components/threeConstruction.vue'
 export default {
   name: 'CityManageLeft',
   components: {
@@ -128,7 +132,9 @@
     Introduce,
     Corner1,
     wisdomTraffic,
-    eventCom
+    eventCom,
+    RoadLine,
+    ThreeConstruction
   },
   data () {
     return {
diff --git a/src/views/cityManage/components/contradiction/components/roadLine.vue b/src/views/cityManage/components/contradiction/components/roadLine.vue
new file mode 100644
index 0000000..b9a0d1a
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/roadLine.vue
@@ -0,0 +1,62 @@
+<template>
+  <chart-layout title="护路护线管理" @click="getData">
+    <div class="block-container">
+        <simple-pie-chart
+          :id="data.id"
+          :width="data.width"
+          :height="data.height"
+          :seriesData="data.data"
+        >
+        </simple-pie-chart>
+    </div>
+  </chart-layout>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SingleLayout from '@/components/layout/singleLayout'
+// import SimpleBlock from './components/simpleBlock'
+import ChartLayout from '@/components/layout/chartLayout'
+import mockData from '../../../../../../static/city.json'
+export default {
+  name: 'introduce',
+  components: {ChartLayout, SimplePieChart, SingleLayout},
+  data () {
+    return {
+      data: {
+        id: 'contradiction-pie',
+        width: '100%',
+        height: '100%',
+        legend: ['潭东镇', '潭口镇', '高校园区工作组'],
+        data: [
+          {'value': 0, 'name': '潭东镇'},
+          {'value': 0, 'name': '潭口镇'},
+          {'value': 0, 'name': '高校园区工作组'}
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  methods: {
+    getData () {
+      this.data.data = mockData.roadLinePie
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.block-container{
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 0.04rem;
+  .block{
+    width: 25%;
+    height: 45%;
+  }
+}
+</style>
diff --git a/src/views/cityManage/components/contradiction/components/threeConstruction.vue b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
new file mode 100644
index 0000000..266c61f
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
@@ -0,0 +1,132 @@
+<template>
+  <chart-layout title="三项建设管理">
+    <!-- <div class="block-container"> -->
+      <div id="threeConstruction-bar" class="container" />
+    <!-- </div> -->
+  </chart-layout>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { automaticCarousel } from '@/utils/automaticCarousel'
+import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
+export default {
+  name: 'SocialStability',
+  data () {
+    return {
+      isShow: true,
+      myChart: null,
+      extend: {
+        color: [], // 动态填充颜色
+        legend: {
+          textStyle: { color: '#cce9ff', fontWeight: 'bold' },
+          data: [] // 动态填充图例
+        },
+        dataZoom: [
+          { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#092647',
+              borderColor: '#404a59',
+              borderWidth: 1,
+              textStyle: { color: '#ffffff', fontSize: 12 }
+            }
+          },
+          formatter: function (params) {
+            const date = params[0].axisValue
+            let content = `<div>${date}</div>`
+            params.forEach(item => {
+              content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
+            })
+            return content
+          }
+        },
+        grid: { left: '5%', right: '5%', bottom: '1%', top: '22%', containLabel: true },
+        xAxis: {
+          type: 'category',
+          axisLine: { lineStyle: { color: '#cce9ff' } },
+          axisLabel: { color: '#cce9ff' },
+          data: []
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: { lineStyle: { color: '#cce9ff' } },
+            axisLabel: { color: '#cce9ff' },
+            splitLine: {
+              show: true,
+              lineStyle: { color: ['#c8d0da'], type: 'dashed' }
+            }
+          }
+        ],
+        series: [] // 动态填充系列（折线+柱形）
+      }
+    }
+  },
+  mounted () {
+    this.myChart = echarts.init(document.getElementById('threeConstruction-bar'))
+    window.addEventListener('resize', () => {
+      this.myChart.resize()
+    })
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      const threeConstructionData = mockData.threeConstruction
+      console.log('-66666666666666666=', threeConstructionData)
+
+      // 1. 提取基础数据
+      const { year, threeConstructionTypes } = threeConstructionData
+      const threeConstructionTypeNames = Object.keys(threeConstructionTypes) // 所有事件类型名称
+      const threeConstructionTypeCount = threeConstructionTypeNames.length // 柱形图数量
+
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        ...COLOR_POOL.slice(0, threeConstructionTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = year
+
+      // 5. 动态生成series
+      this.extend.series = []
+
+      // 循环添加柱形图系列（每个事件类型一个柱形）
+      threeConstructionTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index] },
+          data: threeConstructionTypes[typeName]
+        })
+      })
+      const showCount = mockData.threeConstruction.showDataCount + '' ? mockData.threeConstruction.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
+    }
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', () => {})
+    this.myChart.dispose()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/cityManage/components/introduce/components/eventBarLine.vue b/src/views/cityManage/components/introduce/components/eventBarLine.vue
index ee8104d..b317147 100644
--- a/src/views/cityManage/components/introduce/components/eventBarLine.vue
+++ b/src/views/cityManage/components/introduce/components/eventBarLine.vue
@@ -1,11 +1,18 @@
 <template>
-  <div id="caseType-linebar" class="container"/>
+  <div id="event-Bar-Line" class="container" />
 </template>
 
 <script>
 import * as echarts from 'echarts'
 import { automaticCarousel } from '@/utils/automaticCarousel'
 import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
 export default {
   name: 'SocialStability',
   data () {
@@ -13,10 +20,10 @@
       isShow: true,
       myChart: null,
       extend: {
-        color: ['#CEDE0F', '#41B8FF', '#FF7D00', '#F53F3F'], // 事件类型颜色
+        color: [], // 动态填充颜色
         legend: {
           textStyle: { color: '#cce9ff', fontWeight: 'bold' },
-          data: ['事件总数趋势', '矛盾纠纷调解', '治安案件处置', '涉稳隐患排查', '反邪宣传与排查']
+          data: [] // 动态填充图例
         },
         dataZoom: [
           { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
@@ -33,7 +40,7 @@
             }
           },
           formatter: function (params) {
-            let date = params[0].axisValue
+            const date = params[0].axisValue
             let content = `<div>${date}</div>`
             params.forEach(item => {
               content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
@@ -46,7 +53,7 @@
           type: 'category',
           axisLine: { lineStyle: { color: '#cce9ff' } },
           axisLabel: { color: '#cce9ff' },
-          data: [] // 月份数据后续填充
+          data: [] // 动态填充月份
         },
         yAxis: [
           {
@@ -59,95 +66,81 @@
             }
           }
         ],
-        series: [
-          // 1. 事件总数趋势（折线图）
-          {
-            name: '事件总数趋势',
-            type: 'line',
-            smooth: true,
-            symbol: 'circle',
-            symbolSize: 6,
-            color: '#CEDE0F',
-            data: [], // 后续填充
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0.5, color: '#CEDE0F' },
-                { offset: 1, color: 'rgba(10,25,124,0.2)' }
-              ])
-            }
-          },
-          // 2. 矛盾纠纷调解（柱状图）
-          {
-            name: '矛盾纠纷调解',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#41B8FF' },
-            data: [] // 后续填充
-          },
-          // 3. 治安案件处置（柱状图）
-          {
-            name: '治安案件处置',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#FF7D00' },
-            data: [] // 后续填充
-          },
-          // 4. 涉稳隐患排查（柱状图）
-          {
-            name: '涉稳隐患排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#F53F3F' },
-            data: [] // 后续填充
-          },
-          // 5. 反邪宣传与排查（柱状图）
-          {
-            name: '反邪宣传与排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#722ED1' },
-            data: [] // 后续填充
-          }
-        ]
+        series: [] // 动态填充系列（折线+柱形）
       }
     }
   },
   mounted () {
-    this.myChart = echarts.init(document.getElementById('caseType-linebar'))
+    this.myChart = echarts.init(document.getElementById('event-Bar-Line'))
     window.addEventListener('resize', () => {
-      if (this.myChart) this.myChart.resize()
+      this.myChart.resize()
     })
     this.fetchData()
   },
   methods: {
     fetchData () {
-      // 社会稳定和政治安全专项事件数据（模拟）
       const eventData = mockData.eventData
+      // 1. 提取基础数据
+      const { month, trend, eventTypes } = eventData
+      const eventTypeNames = Object.keys(eventTypes) // 所有事件类型名称
+      const eventTypeCount = eventTypeNames.length // 柱形图数量
 
-      // 填充X轴月份
-      this.extend.xAxis.data = eventData.month
-      // 填充折线图（事件总数趋势）
-      this.extend.series[0].data = eventData.trendData
-      // 填充柱状图（各事件类型）
-      this.extend.series[1].data = eventData.eventTypeData['矛盾纠纷调解']
-      this.extend.series[2].data = eventData.eventTypeData['治安案件处置']
-      this.extend.series[3].data = eventData.eventTypeData['涉稳隐患排查']
-      this.extend.series[4].data = eventData.eventTypeData['反邪宣传与排查']
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        COLOR_POOL[0], // 折线图颜色
+        ...COLOR_POOL.slice(1, 1 + eventTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
 
-      // 渲染图表
-      // this.myChart.setOption(this.extend, true)
-      automaticCarousel(this.extend, this.myChart, 3000, 3)
+      // 3. 动态生成图例（折线名称 + 所有事件类型名称）
+      this.extend.legend.data = [trend.name, ...eventTypeNames]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = month
+
+      // 5. 动态生成series（先折线，后柱形）
+      this.extend.series = []
+
+      // 5.1 添加折线图系列
+      this.extend.series.push({
+        name: trend.name,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        color: this.extend.color[0], // 用第一种颜色
+        data: trend.data,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0.5, color: this.extend.color[0] },
+            { offset: 1, color: 'rgba(10,25,124,0.2)' }
+          ])
+        }
+      })
+
+      // 5.2 循环添加柱形图系列（每个事件类型一个柱形）
+      eventTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index + 1] }, // 柱形颜色从第二种开始
+          data: eventTypes[typeName]
+        })
+      })
+      const showCount = mockData.showDataCount + '' ? mockData.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
     }
   },
   beforeDestroy () {
     window.removeEventListener('resize', () => {})
-    if (this.myChart) this.myChart.dispose()
+    this.myChart.dispose()
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.container{
+.container {
   width: 100%;
   height: 100%;
 }
diff --git a/src/views/industrialEconomy/components/commercial/commercial.vue b/src/views/industrialEconomy/components/commercial/commercial.vue
index 95fa443..8e14d51 100644
--- a/src/views/industrialEconomy/components/commercial/commercial.vue
+++ b/src/views/industrialEconomy/components/commercial/commercial.vue
@@ -6,13 +6,16 @@
 <template>
   <chart-layout title="营商环境" @click="getData">
     <div class="block-container">
-      <div class="block" style="width:20%;height: 100%">
+      <!-- <div class="block" style="width:20%;height: 100%">
         <commercial-total/>
       </div>
       <div class="block" style="width:40%;height: 100%">
         <commercial-pie/>
+      </div> -->
+      <div class="block" style="width:60%">
+        <CommercialTable/>
       </div>
-      <div class="block" style="width:40%;height: 100%">
+      <div class="block" style="width:40%">
         <commercial-bar/>
       </div>
     </div>
@@ -24,12 +27,15 @@
 import CommercialTotal from './components/commercialTotal'
 import CommercialPie from './components/commercialPie'
 import CommercialBar from './components/commercialBar'
+import CommercialTable from './components/commercialTable.vue'
 export default {
   name: 'Expense',
   components: {
     CommercialBar,
     CommercialPie,
-    CommercialTotal},
+    CommercialTotal,
+    CommercialTable
+  },
   methods: {
     getData () {
       // this.$refs.ecardEarth.getData()
diff --git a/src/views/industrialEconomy/components/commercial/components/commercialTable.vue b/src/views/industrialEconomy/components/commercial/components/commercialTable.vue
new file mode 100644
index 0000000..a7d1a9f
--- /dev/null
+++ b/src/views/industrialEconomy/components/commercial/components/commercialTable.vue
@@ -0,0 +1,74 @@
+<template>
+  <div style="width: 100%;height:100%;padding:0.1rem;">
+    <scroll-board :config="boardConfig"/>
+  </div>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import Corner1 from '@/components/corner/Corner1'
+import ChartLayout from '@/components/layout/chartLayout'
+import {fetchTruckCaseByType} from '@/api/cityManage'
+import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/industrialEconomy.json'
+export default {
+  name: 'TruckCaseDetail',
+  components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
+  data () {
+    return {
+      boardConfig: {
+        header: ['', '所属区域', '金融服务次数', '政策支持数量', '基础设施数量', '道路数量', '园林数量', '景点数量', '区人口总量'],
+        rowNum: 4,
+        hoverColor: true,
+        headerBGC: 'rgba(46,145,244,0.4)',
+        oddRowBGC: 'transparent',
+        evenRowBGC: '#030737',
+        headerColor: '#00F0FF',
+        rowColor: '#FFFFFF',
+        headerFontSize: '0.072rem', // 表头字体大小
+        rowFontSize: '0.07rem', // 行字体大小
+        columnWidth: [160],
+        data: [
+          ['潭东镇产业园区', '潭东镇', '135次/年', '12项', '18个', '20条', '4处', '2处', '约1.6万'],
+          ['潭东镇中心社区', '潭东镇', '160次/年', '9项', '22个', '25条', '6处', '3处', '约2.1万'],
+          ['潭东镇乡村片区', '潭东镇', '90次/年', '7项', '10个', '18条', '3处', '2处', '约1.21万'],
+          ['潭东镇商贸街区', '潭东镇', '85次/年', '6项', '9个', '12条', '2处', '1处', '约0.8万'],
+          ['潭口镇老街片区', '潭口镇', '110次/年', '8项', '15个', '16条', '3处', '2处', '约0.9万'],
+          ['潭口镇商贸新区', '潭口镇', '190次/年', '10项', '20个', '22条', '4处', '2处', '约1.2万'],
+          ['潭口镇乡村集中区', '潭口镇', '120次/年', '7项', '13个', '19条', '3处', '2处', '约0.87万'],
+          ['潭口镇工业园区', '潭口镇', '105次/年', '9项', '16个', '15条', '2处', '1处', '约0.4万'],
+          ['高校园区主校区周边', '高校园区工作组', '230次/年', '16项', '22个', '14条', '6处', '3处', '约4.5万'],
+          ['高校园区科创孵化区', '高校园区工作组', '200次/年', '12项', '18个', '12条', '5处', '2处', '约2.3万'],
+          ['高校园区人才社区', '高校园区工作组', '170次/年', '10项', '15个', '10条', '4处', '2处', '约1.2万'],
+          ['高校园区商业配套区', '高校园区工作组', '145次/年', '9项', '12个', '9条', '3处', '1处', '约0.5万']
+        ]
+      }
+    }
+  },
+  created () {
+    // this.getData()
+    this.boardConfig.header = mockData.left.commercial.table.header
+    this.boardConfig.data = mockData.left.commercial.table.data
+  },
+  methods: {
+    getData () {
+      fetchTruckCaseByType().then(response => {
+        if (response.code === 200) {
+          const data = response.data
+          const list = data.map(item => {
+            return [item.name, item.num, item.rate + '%']
+          })
+          this.boardConfig.data = list
+          const boardConfig = this.boardConfig
+          // this.$set(this, 'boardConfig', boardConfig)
+          this.boardConfig = Object.assign({}, boardConfig)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/views/industrialEconomy/components/daily/components/dailyCount.vue b/src/views/industrialEconomy/components/daily/components/dailyCount.vue
index 79b57f9..bd64a9a 100644
--- a/src/views/industrialEconomy/components/daily/components/dailyCount.vue
+++ b/src/views/industrialEconomy/components/daily/components/dailyCount.vue
@@ -8,6 +8,7 @@
 
 <script>
 import ImageBlock2 from '@/components/block/imageBlock2'
+import mockData from '../../../../../../static/industrialEconomy.json'
 export default {
   name: 'DailyCount',
   components: {ImageBlock2},
@@ -26,7 +27,7 @@
   },
   methods: {
     getData () {
-
+      this.data = mockData.left.index.count
     }
 
   }
diff --git a/src/views/industrialEconomy/components/daily/daily.vue b/src/views/industrialEconomy/components/daily/daily.vue
index 7b9de8c..000b2f5 100644
--- a/src/views/industrialEconomy/components/daily/daily.vue
+++ b/src/views/industrialEconomy/components/daily/daily.vue
@@ -1,7 +1,7 @@
 <template>
   <chart-layout title="产业指数" @click="getData">
     <div class="block-container">
-      <div class="block" style="width:50%">
+      <div class="block" style="width:100%">
         <daily-count/>
       </div>
     </div>
diff --git a/src/views/industrialEconomy/industrialEconomyLeft.vue b/src/views/industrialEconomy/industrialEconomyLeft.vue
index 0f9b1d3..6047108 100644
--- a/src/views/industrialEconomy/industrialEconomyLeft.vue
+++ b/src/views/industrialEconomy/industrialEconomyLeft.vue
@@ -9,7 +9,7 @@
               <indicator/>
             </div>
             <div class="modular-row-30">
-              <div class="modular-col-60 modular-padding-right">
+              <div class="modular-col-100 modular-padding-right">
                 <commercial/>
               </div>
               <div class="modular-col-30">
diff --git a/src/views/industrialEconomy/industrialEconomyRight.vue b/src/views/industrialEconomy/industrialEconomyRight.vue
index 848b398..e23cbc5 100644
--- a/src/views/industrialEconomy/industrialEconomyRight.vue
+++ b/src/views/industrialEconomy/industrialEconomyRight.vue
@@ -32,10 +32,10 @@
 import Enterprise from './components/enterprise/enterprise'
 import Commercial from './components/commercial/commercial'
 import Daily from './components/daily/daily'
-import Expense from "./components/expense/expense";
-import Structure from "./components/structure/structure";
-import Building from "./components/building/building";
-import Assets from "./components/assets/assets";
+import Expense from './components/expense/expense'
+import Structure from './components/structure/structure'
+import Building from './components/building/building'
+import Assets from './components/assets/assets'
 export default {
   name: 'industrialEconomyRight',
   components: {
diff --git a/src/views/socialLive/components/education/components/peopleCount.vue b/src/views/socialLive/components/education/components/peopleCount.vue
index 3905ca6..5b2c9e7 100644
--- a/src/views/socialLive/components/education/components/peopleCount.vue
+++ b/src/views/socialLive/components/education/components/peopleCount.vue
@@ -25,7 +25,8 @@
       data: {
         child: {name: '幼儿', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
         pupil: {name: '小学生', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
-        student: {name: '中学生', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
+        student: {name: '初中生', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
+        highSchoolStudent: {name: '高中生', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
         teacher: {name: '教职工', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')}
       }
     }
@@ -36,6 +37,7 @@
     this.data.pupil.value = mockData.right.education.countRight.pupil
     this.data.student.value = mockData.right.education.countRight.student
     this.data.teacher.value = mockData.right.education.countRight.teacher
+    this.data.highSchoolStudent.value = mockData.right.education.countRight.highSchoolStudent
   },
   methods: {
     getData () {

diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue
index 36792e1..e7ac255 100644
--- a/src/views/cityManage/cityManageLeft2.vue
+++ b/src/views/cityManage/cityManageLeft2.vue
@@ -56,7 +56,9 @@
             </div>
             <!--多元化解-->
             <div class="modular-row-30">
-              <contradiction/>
+              <contradiction style="width: 49%;"/>
+              <RoadLine  style="width: 24%;"/>
+              <ThreeConstruction  style="width: 24%;"/>
             </div>
           </div><!-- .col50 over-->
           <!--./右半-->
@@ -90,12 +92,14 @@
 import ParkIntroduce from './components/parkingSystem/parkIntroduce'
 import ParkEarth from './components/parkingSystem/parkEarth'
 import ParkDetail from './components/parkingSystem/parkDetail'
-import ParkIncomeCount from "./components/parkingSystem/parkIncomeCount";
-import ParkFlowLine from "./components/parkingSystem/parkFlowLine";
-import ParkIncomeLine from "./components/parkingSystem/parkIncomLine";
-import Contradiction from "./components/contradiction/contradiction";
-import Service from "./components/service/service";
-import Youth from "./components/youth/youth";
+import ParkIncomeCount from './components/parkingSystem/parkIncomeCount'
+import ParkFlowLine from './components/parkingSystem/parkFlowLine'
+import ParkIncomeLine from './components/parkingSystem/parkIncomLine'
+import Contradiction from './components/contradiction/contradiction'
+import Service from './components/service/service'
+import Youth from './components/youth/youth'
+import RoadLine from './components/contradiction/components/roadLine.vue'
+import ThreeConstruction from './components/contradiction/components/threeConstruction.vue'
 export default {
   name: 'CityManageLeft',
   components: {
@@ -128,7 +132,9 @@
     Introduce,
     Corner1,
     wisdomTraffic,
-    eventCom
+    eventCom,
+    RoadLine,
+    ThreeConstruction
   },
   data () {
     return {
diff --git a/src/views/cityManage/components/contradiction/components/roadLine.vue b/src/views/cityManage/components/contradiction/components/roadLine.vue
new file mode 100644
index 0000000..b9a0d1a
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/roadLine.vue
@@ -0,0 +1,62 @@
+<template>
+  <chart-layout title="护路护线管理" @click="getData">
+    <div class="block-container">
+        <simple-pie-chart
+          :id="data.id"
+          :width="data.width"
+          :height="data.height"
+          :seriesData="data.data"
+        >
+        </simple-pie-chart>
+    </div>
+  </chart-layout>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SingleLayout from '@/components/layout/singleLayout'
+// import SimpleBlock from './components/simpleBlock'
+import ChartLayout from '@/components/layout/chartLayout'
+import mockData from '../../../../../../static/city.json'
+export default {
+  name: 'introduce',
+  components: {ChartLayout, SimplePieChart, SingleLayout},
+  data () {
+    return {
+      data: {
+        id: 'contradiction-pie',
+        width: '100%',
+        height: '100%',
+        legend: ['潭东镇', '潭口镇', '高校园区工作组'],
+        data: [
+          {'value': 0, 'name': '潭东镇'},
+          {'value': 0, 'name': '潭口镇'},
+          {'value': 0, 'name': '高校园区工作组'}
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  methods: {
+    getData () {
+      this.data.data = mockData.roadLinePie
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.block-container{
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 0.04rem;
+  .block{
+    width: 25%;
+    height: 45%;
+  }
+}
+</style>
diff --git a/src/views/cityManage/components/contradiction/components/threeConstruction.vue b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
new file mode 100644
index 0000000..266c61f
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
@@ -0,0 +1,132 @@
+<template>
+  <chart-layout title="三项建设管理">
+    <!-- <div class="block-container"> -->
+      <div id="threeConstruction-bar" class="container" />
+    <!-- </div> -->
+  </chart-layout>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { automaticCarousel } from '@/utils/automaticCarousel'
+import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
+export default {
+  name: 'SocialStability',
+  data () {
+    return {
+      isShow: true,
+      myChart: null,
+      extend: {
+        color: [], // 动态填充颜色
+        legend: {
+          textStyle: { color: '#cce9ff', fontWeight: 'bold' },
+          data: [] // 动态填充图例
+        },
+        dataZoom: [
+          { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#092647',
+              borderColor: '#404a59',
+              borderWidth: 1,
+              textStyle: { color: '#ffffff', fontSize: 12 }
+            }
+          },
+          formatter: function (params) {
+            const date = params[0].axisValue
+            let content = `<div>${date}</div>`
+            params.forEach(item => {
+              content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
+            })
+            return content
+          }
+        },
+        grid: { left: '5%', right: '5%', bottom: '1%', top: '22%', containLabel: true },
+        xAxis: {
+          type: 'category',
+          axisLine: { lineStyle: { color: '#cce9ff' } },
+          axisLabel: { color: '#cce9ff' },
+          data: []
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: { lineStyle: { color: '#cce9ff' } },
+            axisLabel: { color: '#cce9ff' },
+            splitLine: {
+              show: true,
+              lineStyle: { color: ['#c8d0da'], type: 'dashed' }
+            }
+          }
+        ],
+        series: [] // 动态填充系列（折线+柱形）
+      }
+    }
+  },
+  mounted () {
+    this.myChart = echarts.init(document.getElementById('threeConstruction-bar'))
+    window.addEventListener('resize', () => {
+      this.myChart.resize()
+    })
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      const threeConstructionData = mockData.threeConstruction
+      console.log('-66666666666666666=', threeConstructionData)
+
+      // 1. 提取基础数据
+      const { year, threeConstructionTypes } = threeConstructionData
+      const threeConstructionTypeNames = Object.keys(threeConstructionTypes) // 所有事件类型名称
+      const threeConstructionTypeCount = threeConstructionTypeNames.length // 柱形图数量
+
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        ...COLOR_POOL.slice(0, threeConstructionTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = year
+
+      // 5. 动态生成series
+      this.extend.series = []
+
+      // 循环添加柱形图系列（每个事件类型一个柱形）
+      threeConstructionTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index] },
+          data: threeConstructionTypes[typeName]
+        })
+      })
+      const showCount = mockData.threeConstruction.showDataCount + '' ? mockData.threeConstruction.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
+    }
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', () => {})
+    this.myChart.dispose()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/cityManage/components/introduce/components/eventBarLine.vue b/src/views/cityManage/components/introduce/components/eventBarLine.vue
index ee8104d..b317147 100644
--- a/src/views/cityManage/components/introduce/components/eventBarLine.vue
+++ b/src/views/cityManage/components/introduce/components/eventBarLine.vue
@@ -1,11 +1,18 @@
 <template>
-  <div id="caseType-linebar" class="container"/>
+  <div id="event-Bar-Line" class="container" />
 </template>
 
 <script>
 import * as echarts from 'echarts'
 import { automaticCarousel } from '@/utils/automaticCarousel'
 import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
 export default {
   name: 'SocialStability',
   data () {
@@ -13,10 +20,10 @@
       isShow: true,
       myChart: null,
       extend: {
-        color: ['#CEDE0F', '#41B8FF', '#FF7D00', '#F53F3F'], // 事件类型颜色
+        color: [], // 动态填充颜色
         legend: {
           textStyle: { color: '#cce9ff', fontWeight: 'bold' },
-          data: ['事件总数趋势', '矛盾纠纷调解', '治安案件处置', '涉稳隐患排查', '反邪宣传与排查']
+          data: [] // 动态填充图例
         },
         dataZoom: [
           { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
@@ -33,7 +40,7 @@
             }
           },
           formatter: function (params) {
-            let date = params[0].axisValue
+            const date = params[0].axisValue
             let content = `<div>${date}</div>`
             params.forEach(item => {
               content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
@@ -46,7 +53,7 @@
           type: 'category',
           axisLine: { lineStyle: { color: '#cce9ff' } },
           axisLabel: { color: '#cce9ff' },
-          data: [] // 月份数据后续填充
+          data: [] // 动态填充月份
         },
         yAxis: [
           {
@@ -59,95 +66,81 @@
             }
           }
         ],
-        series: [
-          // 1. 事件总数趋势（折线图）
-          {
-            name: '事件总数趋势',
-            type: 'line',
-            smooth: true,
-            symbol: 'circle',
-            symbolSize: 6,
-            color: '#CEDE0F',
-            data: [], // 后续填充
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0.5, color: '#CEDE0F' },
-                { offset: 1, color: 'rgba(10,25,124,0.2)' }
-              ])
-            }
-          },
-          // 2. 矛盾纠纷调解（柱状图）
-          {
-            name: '矛盾纠纷调解',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#41B8FF' },
-            data: [] // 后续填充
-          },
-          // 3. 治安案件处置（柱状图）
-          {
-            name: '治安案件处置',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#FF7D00' },
-            data: [] // 后续填充
-          },
-          // 4. 涉稳隐患排查（柱状图）
-          {
-            name: '涉稳隐患排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#F53F3F' },
-            data: [] // 后续填充
-          },
-          // 5. 反邪宣传与排查（柱状图）
-          {
-            name: '反邪宣传与排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#722ED1' },
-            data: [] // 后续填充
-          }
-        ]
+        series: [] // 动态填充系列（折线+柱形）
       }
     }
   },
   mounted () {
-    this.myChart = echarts.init(document.getElementById('caseType-linebar'))
+    this.myChart = echarts.init(document.getElementById('event-Bar-Line'))
     window.addEventListener('resize', () => {
-      if (this.myChart) this.myChart.resize()
+      this.myChart.resize()
     })
     this.fetchData()
   },
   methods: {
     fetchData () {
-      // 社会稳定和政治安全专项事件数据（模拟）
       const eventData = mockData.eventData
+      // 1. 提取基础数据
+      const { month, trend, eventTypes } = eventData
+      const eventTypeNames = Object.keys(eventTypes) // 所有事件类型名称
+      const eventTypeCount = eventTypeNames.length // 柱形图数量
 
-      // 填充X轴月份
-      this.extend.xAxis.data = eventData.month
-      // 填充折线图（事件总数趋势）
-      this.extend.series[0].data = eventData.trendData
-      // 填充柱状图（各事件类型）
-      this.extend.series[1].data = eventData.eventTypeData['矛盾纠纷调解']
-      this.extend.series[2].data = eventData.eventTypeData['治安案件处置']
-      this.extend.series[3].data = eventData.eventTypeData['涉稳隐患排查']
-      this.extend.series[4].data = eventData.eventTypeData['反邪宣传与排查']
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        COLOR_POOL[0], // 折线图颜色
+        ...COLOR_POOL.slice(1, 1 + eventTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
 
-      // 渲染图表
-      // this.myChart.setOption(this.extend, true)
-      automaticCarousel(this.extend, this.myChart, 3000, 3)
+      // 3. 动态生成图例（折线名称 + 所有事件类型名称）
+      this.extend.legend.data = [trend.name, ...eventTypeNames]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = month
+
+      // 5. 动态生成series（先折线，后柱形）
+      this.extend.series = []
+
+      // 5.1 添加折线图系列
+      this.extend.series.push({
+        name: trend.name,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        color: this.extend.color[0], // 用第一种颜色
+        data: trend.data,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0.5, color: this.extend.color[0] },
+            { offset: 1, color: 'rgba(10,25,124,0.2)' }
+          ])
+        }
+      })
+
+      // 5.2 循环添加柱形图系列（每个事件类型一个柱形）
+      eventTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index + 1] }, // 柱形颜色从第二种开始
+          data: eventTypes[typeName]
+        })
+      })
+      const showCount = mockData.showDataCount + '' ? mockData.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
     }
   },
   beforeDestroy () {
     window.removeEventListener('resize', () => {})
-    if (this.myChart) this.myChart.dispose()
+    this.myChart.dispose()
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.container{
+.container {
   width: 100%;
   height: 100%;
 }
diff --git a/src/views/industrialEconomy/components/commercial/commercial.vue b/src/views/industrialEconomy/components/commercial/commercial.vue
index 95fa443..8e14d51 100644
--- a/src/views/industrialEconomy/components/commercial/commercial.vue
+++ b/src/views/industrialEconomy/components/commercial/commercial.vue
@@ -6,13 +6,16 @@
 <template>
   <chart-layout title="营商环境" @click="getData">
     <div class="block-container">
-      <div class="block" style="width:20%;height: 100%">
+      <!-- <div class="block" style="width:20%;height: 100%">
         <commercial-total/>
       </div>
       <div class="block" style="width:40%;height: 100%">
         <commercial-pie/>
+      </div> -->
+      <div class="block" style="width:60%">
+        <CommercialTable/>
       </div>
-      <div class="block" style="width:40%;height: 100%">
+      <div class="block" style="width:40%">
         <commercial-bar/>
       </div>
     </div>
@@ -24,12 +27,15 @@
 import CommercialTotal from './components/commercialTotal'
 import CommercialPie from './components/commercialPie'
 import CommercialBar from './components/commercialBar'
+import CommercialTable from './components/commercialTable.vue'
 export default {
   name: 'Expense',
   components: {
     CommercialBar,
     CommercialPie,
-    CommercialTotal},
+    CommercialTotal,
+    CommercialTable
+  },
   methods: {
     getData () {
       // this.$refs.ecardEarth.getData()
diff --git a/src/views/industrialEconomy/components/commercial/components/commercialTable.vue b/src/views/industrialEconomy/components/commercial/components/commercialTable.vue
new file mode 100644
index 0000000..a7d1a9f
--- /dev/null
+++ b/src/views/industrialEconomy/components/commercial/components/commercialTable.vue
@@ -0,0 +1,74 @@
+<template>
+  <div style="width: 100%;height:100%;padding:0.1rem;">
+    <scroll-board :config="boardConfig"/>
+  </div>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import Corner1 from '@/components/corner/Corner1'
+import ChartLayout from '@/components/layout/chartLayout'
+import {fetchTruckCaseByType} from '@/api/cityManage'
+import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/industrialEconomy.json'
+export default {
+  name: 'TruckCaseDetail',
+  components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
+  data () {
+    return {
+      boardConfig: {
+        header: ['', '所属区域', '金融服务次数', '政策支持数量', '基础设施数量', '道路数量', '园林数量', '景点数量', '区人口总量'],
+        rowNum: 4,
+        hoverColor: true,
+        headerBGC: 'rgba(46,145,244,0.4)',
+        oddRowBGC: 'transparent',
+        evenRowBGC: '#030737',
+        headerColor: '#00F0FF',
+        rowColor: '#FFFFFF',
+        headerFontSize: '0.072rem', // 表头字体大小
+        rowFontSize: '0.07rem', // 行字体大小
+        columnWidth: [160],
+        data: [
+          ['潭东镇产业园区', '潭东镇', '135次/年', '12项', '18个', '20条', '4处', '2处', '约1.6万'],
+          ['潭东镇中心社区', '潭东镇', '160次/年', '9项', '22个', '25条', '6处', '3处', '约2.1万'],
+          ['潭东镇乡村片区', '潭东镇', '90次/年', '7项', '10个', '18条', '3处', '2处', '约1.21万'],
+          ['潭东镇商贸街区', '潭东镇', '85次/年', '6项', '9个', '12条', '2处', '1处', '约0.8万'],
+          ['潭口镇老街片区', '潭口镇', '110次/年', '8项', '15个', '16条', '3处', '2处', '约0.9万'],
+          ['潭口镇商贸新区', '潭口镇', '190次/年', '10项', '20个', '22条', '4处', '2处', '约1.2万'],
+          ['潭口镇乡村集中区', '潭口镇', '120次/年', '7项', '13个', '19条', '3处', '2处', '约0.87万'],
+          ['潭口镇工业园区', '潭口镇', '105次/年', '9项', '16个', '15条', '2处', '1处', '约0.4万'],
+          ['高校园区主校区周边', '高校园区工作组', '230次/年', '16项', '22个', '14条', '6处', '3处', '约4.5万'],
+          ['高校园区科创孵化区', '高校园区工作组', '200次/年', '12项', '18个', '12条', '5处', '2处', '约2.3万'],
+          ['高校园区人才社区', '高校园区工作组', '170次/年', '10项', '15个', '10条', '4处', '2处', '约1.2万'],
+          ['高校园区商业配套区', '高校园区工作组', '145次/年', '9项', '12个', '9条', '3处', '1处', '约0.5万']
+        ]
+      }
+    }
+  },
+  created () {
+    // this.getData()
+    this.boardConfig.header = mockData.left.commercial.table.header
+    this.boardConfig.data = mockData.left.commercial.table.data
+  },
+  methods: {
+    getData () {
+      fetchTruckCaseByType().then(response => {
+        if (response.code === 200) {
+          const data = response.data
+          const list = data.map(item => {
+            return [item.name, item.num, item.rate + '%']
+          })
+          this.boardConfig.data = list
+          const boardConfig = this.boardConfig
+          // this.$set(this, 'boardConfig', boardConfig)
+          this.boardConfig = Object.assign({}, boardConfig)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/views/industrialEconomy/components/daily/components/dailyCount.vue b/src/views/industrialEconomy/components/daily/components/dailyCount.vue
index 79b57f9..bd64a9a 100644
--- a/src/views/industrialEconomy/components/daily/components/dailyCount.vue
+++ b/src/views/industrialEconomy/components/daily/components/dailyCount.vue
@@ -8,6 +8,7 @@
 
 <script>
 import ImageBlock2 from '@/components/block/imageBlock2'
+import mockData from '../../../../../../static/industrialEconomy.json'
 export default {
   name: 'DailyCount',
   components: {ImageBlock2},
@@ -26,7 +27,7 @@
   },
   methods: {
     getData () {
-
+      this.data = mockData.left.index.count
     }
 
   }
diff --git a/src/views/industrialEconomy/components/daily/daily.vue b/src/views/industrialEconomy/components/daily/daily.vue
index 7b9de8c..000b2f5 100644
--- a/src/views/industrialEconomy/components/daily/daily.vue
+++ b/src/views/industrialEconomy/components/daily/daily.vue
@@ -1,7 +1,7 @@
 <template>
   <chart-layout title="产业指数" @click="getData">
     <div class="block-container">
-      <div class="block" style="width:50%">
+      <div class="block" style="width:100%">
         <daily-count/>
       </div>
     </div>
diff --git a/src/views/industrialEconomy/industrialEconomyLeft.vue b/src/views/industrialEconomy/industrialEconomyLeft.vue
index 0f9b1d3..6047108 100644
--- a/src/views/industrialEconomy/industrialEconomyLeft.vue
+++ b/src/views/industrialEconomy/industrialEconomyLeft.vue
@@ -9,7 +9,7 @@
               <indicator/>
             </div>
             <div class="modular-row-30">
-              <div class="modular-col-60 modular-padding-right">
+              <div class="modular-col-100 modular-padding-right">
                 <commercial/>
               </div>
               <div class="modular-col-30">
diff --git a/src/views/industrialEconomy/industrialEconomyRight.vue b/src/views/industrialEconomy/industrialEconomyRight.vue
index 848b398..e23cbc5 100644
--- a/src/views/industrialEconomy/industrialEconomyRight.vue
+++ b/src/views/industrialEconomy/industrialEconomyRight.vue
@@ -32,10 +32,10 @@
 import Enterprise from './components/enterprise/enterprise'
 import Commercial from './components/commercial/commercial'
 import Daily from './components/daily/daily'
-import Expense from "./components/expense/expense";
-import Structure from "./components/structure/structure";
-import Building from "./components/building/building";
-import Assets from "./components/assets/assets";
+import Expense from './components/expense/expense'
+import Structure from './components/structure/structure'
+import Building from './components/building/building'
+import Assets from './components/assets/assets'
 export default {
   name: 'industrialEconomyRight',
   components: {
diff --git a/src/views/socialLive/components/education/components/peopleCount.vue b/src/views/socialLive/components/education/components/peopleCount.vue
index 3905ca6..5b2c9e7 100644
--- a/src/views/socialLive/components/education/components/peopleCount.vue
+++ b/src/views/socialLive/components/education/components/peopleCount.vue
@@ -25,7 +25,8 @@
       data: {
         child: {name: '幼儿', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
         pupil: {name: '小学生', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
-        student: {name: '中学生', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
+        student: {name: '初中生', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
+        highSchoolStudent: {name: '高中生', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
         teacher: {name: '教职工', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')}
       }
     }
@@ -36,6 +37,7 @@
     this.data.pupil.value = mockData.right.education.countRight.pupil
     this.data.student.value = mockData.right.education.countRight.student
     this.data.teacher.value = mockData.right.education.countRight.teacher
+    this.data.highSchoolStudent.value = mockData.right.education.countRight.highSchoolStudent
   },
   methods: {
     getData () {
diff --git a/src/views/socialLive/components/hospital/hospital.vue b/src/views/socialLive/components/hospital/hospital.vue
index f8c3965..023ee71 100644
--- a/src/views/socialLive/components/hospital/hospital.vue
+++ b/src/views/socialLive/components/hospital/hospital.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-11-18 10:10:06
  -->
 <template>
-  <chart-layout title="智慧医疗" @click="getData">
+  <chart-layout title="智慧医疗" @click="getData" style="height: 100%;">
     <div class="block-container">
-      <div class="block" style="width:40%">
-        <hospital-count ref="hospitalCount"/>
+      <div class="block" style="width:40%;height: 100%;">
+        <hospital-count ref="hospitalCount" style="height: 100%;"/>
       </div>
       <div class="block" style="width:60%;display:flex;flex-direction:column;flex-wrap: wrap;justify-content: space-between;">
         <!--<div style="width:100%;flex:1">-->

diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue
index 36792e1..e7ac255 100644
--- a/src/views/cityManage/cityManageLeft2.vue
+++ b/src/views/cityManage/cityManageLeft2.vue
@@ -56,7 +56,9 @@
             </div>
             <!--多元化解-->
             <div class="modular-row-30">
-              <contradiction/>
+              <contradiction style="width: 49%;"/>
+              <RoadLine  style="width: 24%;"/>
+              <ThreeConstruction  style="width: 24%;"/>
             </div>
           </div><!-- .col50 over-->
           <!--./右半-->
@@ -90,12 +92,14 @@
 import ParkIntroduce from './components/parkingSystem/parkIntroduce'
 import ParkEarth from './components/parkingSystem/parkEarth'
 import ParkDetail from './components/parkingSystem/parkDetail'
-import ParkIncomeCount from "./components/parkingSystem/parkIncomeCount";
-import ParkFlowLine from "./components/parkingSystem/parkFlowLine";
-import ParkIncomeLine from "./components/parkingSystem/parkIncomLine";
-import Contradiction from "./components/contradiction/contradiction";
-import Service from "./components/service/service";
-import Youth from "./components/youth/youth";
+import ParkIncomeCount from './components/parkingSystem/parkIncomeCount'
+import ParkFlowLine from './components/parkingSystem/parkFlowLine'
+import ParkIncomeLine from './components/parkingSystem/parkIncomLine'
+import Contradiction from './components/contradiction/contradiction'
+import Service from './components/service/service'
+import Youth from './components/youth/youth'
+import RoadLine from './components/contradiction/components/roadLine.vue'
+import ThreeConstruction from './components/contradiction/components/threeConstruction.vue'
 export default {
   name: 'CityManageLeft',
   components: {
@@ -128,7 +132,9 @@
     Introduce,
     Corner1,
     wisdomTraffic,
-    eventCom
+    eventCom,
+    RoadLine,
+    ThreeConstruction
   },
   data () {
     return {
diff --git a/src/views/cityManage/components/contradiction/components/roadLine.vue b/src/views/cityManage/components/contradiction/components/roadLine.vue
new file mode 100644
index 0000000..b9a0d1a
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/roadLine.vue
@@ -0,0 +1,62 @@
+<template>
+  <chart-layout title="护路护线管理" @click="getData">
+    <div class="block-container">
+        <simple-pie-chart
+          :id="data.id"
+          :width="data.width"
+          :height="data.height"
+          :seriesData="data.data"
+        >
+        </simple-pie-chart>
+    </div>
+  </chart-layout>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SingleLayout from '@/components/layout/singleLayout'
+// import SimpleBlock from './components/simpleBlock'
+import ChartLayout from '@/components/layout/chartLayout'
+import mockData from '../../../../../../static/city.json'
+export default {
+  name: 'introduce',
+  components: {ChartLayout, SimplePieChart, SingleLayout},
+  data () {
+    return {
+      data: {
+        id: 'contradiction-pie',
+        width: '100%',
+        height: '100%',
+        legend: ['潭东镇', '潭口镇', '高校园区工作组'],
+        data: [
+          {'value': 0, 'name': '潭东镇'},
+          {'value': 0, 'name': '潭口镇'},
+          {'value': 0, 'name': '高校园区工作组'}
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  methods: {
+    getData () {
+      this.data.data = mockData.roadLinePie
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.block-container{
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 0.04rem;
+  .block{
+    width: 25%;
+    height: 45%;
+  }
+}
+</style>
diff --git a/src/views/cityManage/components/contradiction/components/threeConstruction.vue b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
new file mode 100644
index 0000000..266c61f
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
@@ -0,0 +1,132 @@
+<template>
+  <chart-layout title="三项建设管理">
+    <!-- <div class="block-container"> -->
+      <div id="threeConstruction-bar" class="container" />
+    <!-- </div> -->
+  </chart-layout>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { automaticCarousel } from '@/utils/automaticCarousel'
+import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
+export default {
+  name: 'SocialStability',
+  data () {
+    return {
+      isShow: true,
+      myChart: null,
+      extend: {
+        color: [], // 动态填充颜色
+        legend: {
+          textStyle: { color: '#cce9ff', fontWeight: 'bold' },
+          data: [] // 动态填充图例
+        },
+        dataZoom: [
+          { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#092647',
+              borderColor: '#404a59',
+              borderWidth: 1,
+              textStyle: { color: '#ffffff', fontSize: 12 }
+            }
+          },
+          formatter: function (params) {
+            const date = params[0].axisValue
+            let content = `<div>${date}</div>`
+            params.forEach(item => {
+              content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
+            })
+            return content
+          }
+        },
+        grid: { left: '5%', right: '5%', bottom: '1%', top: '22%', containLabel: true },
+        xAxis: {
+          type: 'category',
+          axisLine: { lineStyle: { color: '#cce9ff' } },
+          axisLabel: { color: '#cce9ff' },
+          data: []
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: { lineStyle: { color: '#cce9ff' } },
+            axisLabel: { color: '#cce9ff' },
+            splitLine: {
+              show: true,
+              lineStyle: { color: ['#c8d0da'], type: 'dashed' }
+            }
+          }
+        ],
+        series: [] // 动态填充系列（折线+柱形）
+      }
+    }
+  },
+  mounted () {
+    this.myChart = echarts.init(document.getElementById('threeConstruction-bar'))
+    window.addEventListener('resize', () => {
+      this.myChart.resize()
+    })
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      const threeConstructionData = mockData.threeConstruction
+      console.log('-66666666666666666=', threeConstructionData)
+
+      // 1. 提取基础数据
+      const { year, threeConstructionTypes } = threeConstructionData
+      const threeConstructionTypeNames = Object.keys(threeConstructionTypes) // 所有事件类型名称
+      const threeConstructionTypeCount = threeConstructionTypeNames.length // 柱形图数量
+
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        ...COLOR_POOL.slice(0, threeConstructionTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = year
+
+      // 5. 动态生成series
+      this.extend.series = []
+
+      // 循环添加柱形图系列（每个事件类型一个柱形）
+      threeConstructionTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index] },
+          data: threeConstructionTypes[typeName]
+        })
+      })
+      const showCount = mockData.threeConstruction.showDataCount + '' ? mockData.threeConstruction.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
+    }
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', () => {})
+    this.myChart.dispose()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/cityManage/components/introduce/components/eventBarLine.vue b/src/views/cityManage/components/introduce/components/eventBarLine.vue
index ee8104d..b317147 100644
--- a/src/views/cityManage/components/introduce/components/eventBarLine.vue
+++ b/src/views/cityManage/components/introduce/components/eventBarLine.vue
@@ -1,11 +1,18 @@
 <template>
-  <div id="caseType-linebar" class="container"/>
+  <div id="event-Bar-Line" class="container" />
 </template>
 
 <script>
 import * as echarts from 'echarts'
 import { automaticCarousel } from '@/utils/automaticCarousel'
 import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
 export default {
   name: 'SocialStability',
   data () {
@@ -13,10 +20,10 @@
       isShow: true,
       myChart: null,
       extend: {
-        color: ['#CEDE0F', '#41B8FF', '#FF7D00', '#F53F3F'], // 事件类型颜色
+        color: [], // 动态填充颜色
         legend: {
           textStyle: { color: '#cce9ff', fontWeight: 'bold' },
-          data: ['事件总数趋势', '矛盾纠纷调解', '治安案件处置', '涉稳隐患排查', '反邪宣传与排查']
+          data: [] // 动态填充图例
         },
         dataZoom: [
           { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
@@ -33,7 +40,7 @@
             }
           },
           formatter: function (params) {
-            let date = params[0].axisValue
+            const date = params[0].axisValue
             let content = `<div>${date}</div>`
             params.forEach(item => {
               content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
@@ -46,7 +53,7 @@
           type: 'category',
           axisLine: { lineStyle: { color: '#cce9ff' } },
           axisLabel: { color: '#cce9ff' },
-          data: [] // 月份数据后续填充
+          data: [] // 动态填充月份
         },
         yAxis: [
           {
@@ -59,95 +66,81 @@
             }
           }
         ],
-        series: [
-          // 1. 事件总数趋势（折线图）
-          {
-            name: '事件总数趋势',
-            type: 'line',
-            smooth: true,
-            symbol: 'circle',
-            symbolSize: 6,
-            color: '#CEDE0F',
-            data: [], // 后续填充
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0.5, color: '#CEDE0F' },
-                { offset: 1, color: 'rgba(10,25,124,0.2)' }
-              ])
-            }
-          },
-          // 2. 矛盾纠纷调解（柱状图）
-          {
-            name: '矛盾纠纷调解',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#41B8FF' },
-            data: [] // 后续填充
-          },
-          // 3. 治安案件处置（柱状图）
-          {
-            name: '治安案件处置',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#FF7D00' },
-            data: [] // 后续填充
-          },
-          // 4. 涉稳隐患排查（柱状图）
-          {
-            name: '涉稳隐患排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#F53F3F' },
-            data: [] // 后续填充
-          },
-          // 5. 反邪宣传与排查（柱状图）
-          {
-            name: '反邪宣传与排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#722ED1' },
-            data: [] // 后续填充
-          }
-        ]
+        series: [] // 动态填充系列（折线+柱形）
       }
     }
   },
   mounted () {
-    this.myChart = echarts.init(document.getElementById('caseType-linebar'))
+    this.myChart = echarts.init(document.getElementById('event-Bar-Line'))
     window.addEventListener('resize', () => {
-      if (this.myChart) this.myChart.resize()
+      this.myChart.resize()
     })
     this.fetchData()
   },
   methods: {
     fetchData () {
-      // 社会稳定和政治安全专项事件数据（模拟）
       const eventData = mockData.eventData
+      // 1. 提取基础数据
+      const { month, trend, eventTypes } = eventData
+      const eventTypeNames = Object.keys(eventTypes) // 所有事件类型名称
+      const eventTypeCount = eventTypeNames.length // 柱形图数量
 
-      // 填充X轴月份
-      this.extend.xAxis.data = eventData.month
-      // 填充折线图（事件总数趋势）
-      this.extend.series[0].data = eventData.trendData
-      // 填充柱状图（各事件类型）
-      this.extend.series[1].data = eventData.eventTypeData['矛盾纠纷调解']
-      this.extend.series[2].data = eventData.eventTypeData['治安案件处置']
-      this.extend.series[3].data = eventData.eventTypeData['涉稳隐患排查']
-      this.extend.series[4].data = eventData.eventTypeData['反邪宣传与排查']
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        COLOR_POOL[0], // 折线图颜色
+        ...COLOR_POOL.slice(1, 1 + eventTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
 
-      // 渲染图表
-      // this.myChart.setOption(this.extend, true)
-      automaticCarousel(this.extend, this.myChart, 3000, 3)
+      // 3. 动态生成图例（折线名称 + 所有事件类型名称）
+      this.extend.legend.data = [trend.name, ...eventTypeNames]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = month
+
+      // 5. 动态生成series（先折线，后柱形）
+      this.extend.series = []
+
+      // 5.1 添加折线图系列
+      this.extend.series.push({
+        name: trend.name,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        color: this.extend.color[0], // 用第一种颜色
+        data: trend.data,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0.5, color: this.extend.color[0] },
+            { offset: 1, color: 'rgba(10,25,124,0.2)' }
+          ])
+        }
+      })
+
+      // 5.2 循环添加柱形图系列（每个事件类型一个柱形）
+      eventTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index + 1] }, // 柱形颜色从第二种开始
+          data: eventTypes[typeName]
+        })
+      })
+      const showCount = mockData.showDataCount + '' ? mockData.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
     }
   },
   beforeDestroy () {
     window.removeEventListener('resize', () => {})
-    if (this.myChart) this.myChart.dispose()
+    this.myChart.dispose()
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.container{
+.container {
   width: 100%;
   height: 100%;
 }
diff --git a/src/views/industrialEconomy/components/commercial/commercial.vue b/src/views/industrialEconomy/components/commercial/commercial.vue
index 95fa443..8e14d51 100644
--- a/src/views/industrialEconomy/components/commercial/commercial.vue
+++ b/src/views/industrialEconomy/components/commercial/commercial.vue
@@ -6,13 +6,16 @@
 <template>
   <chart-layout title="营商环境" @click="getData">
     <div class="block-container">
-      <div class="block" style="width:20%;height: 100%">
+      <!-- <div class="block" style="width:20%;height: 100%">
         <commercial-total/>
       </div>
       <div class="block" style="width:40%;height: 100%">
         <commercial-pie/>
+      </div> -->
+      <div class="block" style="width:60%">
+        <CommercialTable/>
       </div>
-      <div class="block" style="width:40%;height: 100%">
+      <div class="block" style="width:40%">
         <commercial-bar/>
       </div>
     </div>
@@ -24,12 +27,15 @@
 import CommercialTotal from './components/commercialTotal'
 import CommercialPie from './components/commercialPie'
 import CommercialBar from './components/commercialBar'
+import CommercialTable from './components/commercialTable.vue'
 export default {
   name: 'Expense',
   components: {
     CommercialBar,
     CommercialPie,
-    CommercialTotal},
+    CommercialTotal,
+    CommercialTable
+  },
   methods: {
     getData () {
       // this.$refs.ecardEarth.getData()
diff --git a/src/views/industrialEconomy/components/commercial/components/commercialTable.vue b/src/views/industrialEconomy/components/commercial/components/commercialTable.vue
new file mode 100644
index 0000000..a7d1a9f
--- /dev/null
+++ b/src/views/industrialEconomy/components/commercial/components/commercialTable.vue
@@ -0,0 +1,74 @@
+<template>
+  <div style="width: 100%;height:100%;padding:0.1rem;">
+    <scroll-board :config="boardConfig"/>
+  </div>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import Corner1 from '@/components/corner/Corner1'
+import ChartLayout from '@/components/layout/chartLayout'
+import {fetchTruckCaseByType} from '@/api/cityManage'
+import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/industrialEconomy.json'
+export default {
+  name: 'TruckCaseDetail',
+  components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
+  data () {
+    return {
+      boardConfig: {
+        header: ['', '所属区域', '金融服务次数', '政策支持数量', '基础设施数量', '道路数量', '园林数量', '景点数量', '区人口总量'],
+        rowNum: 4,
+        hoverColor: true,
+        headerBGC: 'rgba(46,145,244,0.4)',
+        oddRowBGC: 'transparent',
+        evenRowBGC: '#030737',
+        headerColor: '#00F0FF',
+        rowColor: '#FFFFFF',
+        headerFontSize: '0.072rem', // 表头字体大小
+        rowFontSize: '0.07rem', // 行字体大小
+        columnWidth: [160],
+        data: [
+          ['潭东镇产业园区', '潭东镇', '135次/年', '12项', '18个', '20条', '4处', '2处', '约1.6万'],
+          ['潭东镇中心社区', '潭东镇', '160次/年', '9项', '22个', '25条', '6处', '3处', '约2.1万'],
+          ['潭东镇乡村片区', '潭东镇', '90次/年', '7项', '10个', '18条', '3处', '2处', '约1.21万'],
+          ['潭东镇商贸街区', '潭东镇', '85次/年', '6项', '9个', '12条', '2处', '1处', '约0.8万'],
+          ['潭口镇老街片区', '潭口镇', '110次/年', '8项', '15个', '16条', '3处', '2处', '约0.9万'],
+          ['潭口镇商贸新区', '潭口镇', '190次/年', '10项', '20个', '22条', '4处', '2处', '约1.2万'],
+          ['潭口镇乡村集中区', '潭口镇', '120次/年', '7项', '13个', '19条', '3处', '2处', '约0.87万'],
+          ['潭口镇工业园区', '潭口镇', '105次/年', '9项', '16个', '15条', '2处', '1处', '约0.4万'],
+          ['高校园区主校区周边', '高校园区工作组', '230次/年', '16项', '22个', '14条', '6处', '3处', '约4.5万'],
+          ['高校园区科创孵化区', '高校园区工作组', '200次/年', '12项', '18个', '12条', '5处', '2处', '约2.3万'],
+          ['高校园区人才社区', '高校园区工作组', '170次/年', '10项', '15个', '10条', '4处', '2处', '约1.2万'],
+          ['高校园区商业配套区', '高校园区工作组', '145次/年', '9项', '12个', '9条', '3处', '1处', '约0.5万']
+        ]
+      }
+    }
+  },
+  created () {
+    // this.getData()
+    this.boardConfig.header = mockData.left.commercial.table.header
+    this.boardConfig.data = mockData.left.commercial.table.data
+  },
+  methods: {
+    getData () {
+      fetchTruckCaseByType().then(response => {
+        if (response.code === 200) {
+          const data = response.data
+          const list = data.map(item => {
+            return [item.name, item.num, item.rate + '%']
+          })
+          this.boardConfig.data = list
+          const boardConfig = this.boardConfig
+          // this.$set(this, 'boardConfig', boardConfig)
+          this.boardConfig = Object.assign({}, boardConfig)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/views/industrialEconomy/components/daily/components/dailyCount.vue b/src/views/industrialEconomy/components/daily/components/dailyCount.vue
index 79b57f9..bd64a9a 100644
--- a/src/views/industrialEconomy/components/daily/components/dailyCount.vue
+++ b/src/views/industrialEconomy/components/daily/components/dailyCount.vue
@@ -8,6 +8,7 @@
 
 <script>
 import ImageBlock2 from '@/components/block/imageBlock2'
+import mockData from '../../../../../../static/industrialEconomy.json'
 export default {
   name: 'DailyCount',
   components: {ImageBlock2},
@@ -26,7 +27,7 @@
   },
   methods: {
     getData () {
-
+      this.data = mockData.left.index.count
     }
 
   }
diff --git a/src/views/industrialEconomy/components/daily/daily.vue b/src/views/industrialEconomy/components/daily/daily.vue
index 7b9de8c..000b2f5 100644
--- a/src/views/industrialEconomy/components/daily/daily.vue
+++ b/src/views/industrialEconomy/components/daily/daily.vue
@@ -1,7 +1,7 @@
 <template>
   <chart-layout title="产业指数" @click="getData">
     <div class="block-container">
-      <div class="block" style="width:50%">
+      <div class="block" style="width:100%">
         <daily-count/>
       </div>
     </div>
diff --git a/src/views/industrialEconomy/industrialEconomyLeft.vue b/src/views/industrialEconomy/industrialEconomyLeft.vue
index 0f9b1d3..6047108 100644
--- a/src/views/industrialEconomy/industrialEconomyLeft.vue
+++ b/src/views/industrialEconomy/industrialEconomyLeft.vue
@@ -9,7 +9,7 @@
               <indicator/>
             </div>
             <div class="modular-row-30">
-              <div class="modular-col-60 modular-padding-right">
+              <div class="modular-col-100 modular-padding-right">
                 <commercial/>
               </div>
               <div class="modular-col-30">
diff --git a/src/views/industrialEconomy/industrialEconomyRight.vue b/src/views/industrialEconomy/industrialEconomyRight.vue
index 848b398..e23cbc5 100644
--- a/src/views/industrialEconomy/industrialEconomyRight.vue
+++ b/src/views/industrialEconomy/industrialEconomyRight.vue
@@ -32,10 +32,10 @@
 import Enterprise from './components/enterprise/enterprise'
 import Commercial from './components/commercial/commercial'
 import Daily from './components/daily/daily'
-import Expense from "./components/expense/expense";
-import Structure from "./components/structure/structure";
-import Building from "./components/building/building";
-import Assets from "./components/assets/assets";
+import Expense from './components/expense/expense'
+import Structure from './components/structure/structure'
+import Building from './components/building/building'
+import Assets from './components/assets/assets'
 export default {
   name: 'industrialEconomyRight',
   components: {
diff --git a/src/views/socialLive/components/education/components/peopleCount.vue b/src/views/socialLive/components/education/components/peopleCount.vue
index 3905ca6..5b2c9e7 100644
--- a/src/views/socialLive/components/education/components/peopleCount.vue
+++ b/src/views/socialLive/components/education/components/peopleCount.vue
@@ -25,7 +25,8 @@
       data: {
         child: {name: '幼儿', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
         pupil: {name: '小学生', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
-        student: {name: '中学生', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
+        student: {name: '初中生', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
+        highSchoolStudent: {name: '高中生', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
         teacher: {name: '教职工', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')}
       }
     }
@@ -36,6 +37,7 @@
     this.data.pupil.value = mockData.right.education.countRight.pupil
     this.data.student.value = mockData.right.education.countRight.student
     this.data.teacher.value = mockData.right.education.countRight.teacher
+    this.data.highSchoolStudent.value = mockData.right.education.countRight.highSchoolStudent
   },
   methods: {
     getData () {
diff --git a/src/views/socialLive/components/hospital/hospital.vue b/src/views/socialLive/components/hospital/hospital.vue
index f8c3965..023ee71 100644
--- a/src/views/socialLive/components/hospital/hospital.vue
+++ b/src/views/socialLive/components/hospital/hospital.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-11-18 10:10:06
  -->
 <template>
-  <chart-layout title="智慧医疗" @click="getData">
+  <chart-layout title="智慧医疗" @click="getData" style="height: 100%;">
     <div class="block-container">
-      <div class="block" style="width:40%">
-        <hospital-count ref="hospitalCount"/>
+      <div class="block" style="width:40%;height: 100%;">
+        <hospital-count ref="hospitalCount" style="height: 100%;"/>
       </div>
       <div class="block" style="width:60%;display:flex;flex-direction:column;flex-wrap: wrap;justify-content: space-between;">
         <!--<div style="width:100%;flex:1">-->
diff --git a/static/city.json b/static/city.json
index 0b8cf12..20485f8 100644
--- a/static/city.json
+++ b/static/city.json
@@ -8,27 +8,24 @@
     "zanzhu": 26752
   },
 
-
   "specialPopulationsDesc": "特殊人群",
   "specialPopulations": [
-    {"value": 72, "name": "社区矫正人员"},
-    {"value": 34, "name": "刑满释放人员"},
-    {"value": 2, "name": "吸毒人员"},
-    {"value": 156, "name": "精神障碍患者"}
+    { "value": 72, "name": "社区矫正人员" },
+    { "value": 34, "name": "刑满释放人员" },
+    { "value": 2, "name": "吸毒人员" },
+    { "value": 156, "name": "精神障碍患者" }
   ],
 
-
   "psychosocialServicesDesc": "社会心理服务",
   "psychosocialServices": {
     "count": [
-      {"name": "今日服务", "value": 2, "unit": "次"},
-      {"name": "本月服务", "value": 53, "unit": "次"},
-      {"name": "全年服务", "value": 187, "unit": "次"}
+      { "name": "今日服务", "value": 2, "unit": "次" },
+      { "name": "本月服务", "value": 53, "unit": "次" },
+      { "name": "全年服务", "value": 187, "unit": "次" }
     ],
-    "line": [3,1,1,2,3,1,2]
+    "line": [3, 1, 1, 2, 3, 1, 2]
   },
 
-
   "overallOverviewDesc": "整体概况",
   "overallOverview": {
     "totalArea": 130,
@@ -43,9 +40,26 @@
 
   "eventDataDesc": "事件数量及趋势",
   "eventData": {
-    "month": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
-    "trendData": [28, 22, 35, 40, 44, 40, 32, 28, 36, 40, 34, 28],
-    "eventTypeData": {
+    "month": [
+      "1月",
+      "2月",
+      "3月",
+      "4月",
+      "5月",
+      "6月",
+      "7月",
+      "8月",
+      "9月",
+      "10月",
+      "11月",
+      "12月"
+    ],
+    "trend": {
+      "name": "事件总数趋势",
+      "data": [28, 22, 35, 40, 44, 40, 32, 28, 36, 40, 34, 28]
+    },
+    "showDataCount": 3,
+    "eventTypes": {
       "矛盾纠纷调解": [12, 9, 15, 18, 22, 19, 16, 14, 17, 20, 18, 15],
       "治安案件处置": [8, 6, 10, 12, 9, 11, 8, 7, 9, 10, 8, 7],
       "涉稳隐患排查": [5, 4, 6, 7, 8, 6, 5, 4, 6, 7, 5, 4],
@@ -61,31 +75,30 @@
     { "name": "反邪宣传与排查", "value": 4 }
   ],
 
-
   "adolescentDesc": "青少年犯罪与校园安全",
   "adolescent": {
     "count": [
-      {"name": "重点青少年", "value": 203, "unit": "人"},
-      {"name": "平均年龄", "value": 11.4, "unit": "岁"},
-      {"name": "违法数", "value": 452, "unit": "个"}
+      { "name": "重点青少年", "value": 203, "unit": "人" },
+      { "name": "平均年龄", "value": 11.4, "unit": "岁" },
+      { "name": "违法数", "value": 452, "unit": "个" },
+      { "name": "上门服务次数", "value": 232, "unit": "次" }
     ],
     "crimeTrendsDesc": "犯罪趋势",
-    "crimeTrends": [1,0,2,0,0,3,1],
+    "crimeTrends": [1, 0, 2, 0, 0, 3, 1],
     "schoolCount": [
-      {"name": "校园", "value": 7, "unit": "个"},
-      {"name": "校园安保", "value": 36, "unit": "人"},
-      {"name": "校园事件", "value": 23, "unit": "个"}
+      { "name": "校园", "value": 7, "unit": "个" },
+      { "name": "校园安保", "value": 36, "unit": "人" },
+      { "name": "校园事件", "value": 23, "unit": "个" }
     ],
-    "schoolEventTrends": [0,0,1,0,2,0,0],
+    "schoolEventTrends": [0, 0, 1, 0, 2, 0, 0],
     "schoolEventPercent": [
-      {"value": 52.17, "name": "活动事件"},
-      {"value": 8.7, "name": "卫生事件"},
-      {"value": 4.35, "name": "消防事件"},
-      {"value": 34.78, "name": "其他事件"}
+      { "value": 52.17, "name": "活动事件" },
+      { "value": 8.7, "name": "卫生事件" },
+      { "value": 4.35, "name": "消防事件" },
+      { "value": 34.78, "name": "其他事件" }
     ]
   },
 
-
   "diversifiedSolutionsDesc": "多元化解",
   "diversifiedSolutions": {
     "count": [
@@ -96,38 +109,79 @@
     "contradictionTrends": {
       "xData": ["1月", "2月", "3月", "4月"],
       "yData": [
-        {"name": "案件总数", "data": [11,20,8,12], "color": "255,45,85"},
-        {"name": "处理数", "data": [9,15,7,10], "color": "0,144,255"}
+        { "name": "案件总数", "data": [11, 20, 8, 12], "color": "255,45,85" },
+        { "name": "处理数", "data": [9, 15, 7, 10], "color": "0,144,255" }
       ]
     },
     "contradictionPercent": [
-      {"value": 34, "name": "民事纠纷"},
-      {"value": 5, "name": "行政纠纷"},
-      {"value": 1, "name": "涉法纠纷"},
-      {"value": 11, "name": "其他纠纷"}
+      { "value": 34, "name": "民事纠纷" },
+      { "value": 5, "name": "行政纠纷" },
+      { "value": 1, "name": "涉法纠纷" },
+      { "value": 11, "name": "其他纠纷" }
     ]
   },
 
+  "roadLineDesc": "护线护路管理",
+  "roadLinePie": [
+    { "value": 1001, "name": "潭东镇" },
+    { "value": 1423, "name": "潭口镇" },
+    { "value": 865, "name": "高校园区工作组" }
+  ],
 
+  "threeConstructionDesc": "三项建设管理",
+  "threeConstruction": {
+    "year": ["2022年", "2023年", "2024年", "2025年"],
+    "showDataCount": 2,
+    "threeConstructionTypes": {
+      "综治中心建设": [6, 12, 18, 8],
+      "网格覆盖社区数": [20, 30, 36, 16],
+      "专职网格员数量": [50, 86, 120, 32],
+      "信息化系统上线数": [3, 8, 15, 2],
+      "智能设备安装数": [120, 180, 200, 68]
+    }
+  },
 
   "title-right-1": "=======================城市治理--右半屏==============================",
   "urbanManagementDesc": "---------------------------城管执法--------------------------------",
   "urbanManagement": {
     "mobileCaseCount": [
-      {"name": "立案数", "value": "152", "unit": "个"},
-      {"name": "结案数", "value": "131", "unit": "个"},
-      {"name": "待结案", "value": "21", "unit": "个"}
+      { "name": "立案数", "value": "152", "unit": "个" },
+      { "name": "结案数", "value": "131", "unit": "个" },
+      { "name": "待结案", "value": "21", "unit": "个" }
     ],
     "mobileCaseBar": {
       "week": ["12", "13", "11", "16", "13", "22", "13"],
-      "month": ["12", "32", "13", "41", "15", "16", "7", "8", "9", "10", "11", "12", "13", "24", "15", "16", "27", "18", "19", "20", "21", "22"]
+      "month": [
+        "12",
+        "32",
+        "13",
+        "41",
+        "15",
+        "16",
+        "7",
+        "8",
+        "9",
+        "10",
+        "11",
+        "12",
+        "13",
+        "24",
+        "15",
+        "16",
+        "27",
+        "18",
+        "19",
+        "20",
+        "21",
+        "22"
+      ]
     },
     "mobileCasePie": [
-      {"value": 103, "name": "潭中"},
-      {"value": 134, "name": "潭口"},
-      {"value": 214, "name": "高校园区"}
+      { "value": 103, "name": "潭中" },
+      { "value": 134, "name": "潭口" },
+      { "value": 214, "name": "高校园区" }
     ],
-    "table":  [
+    "table": [
       ["施工噪声", "6", "3", "1"],
       ["绿化弃料", "3", "2", "0"],
       ["道路不洁", "15", "18", "32"],
@@ -136,99 +190,250 @@
 
     "desc": "-----城管执法切换的第二张屏----------",
     "staffCount": [
-      {"name": "执法人员", "value": 37, "unit": "人"},
-      {"name": "在岗人员", "value": 32, "unit": "人"},
-      {"name": "出勤率", "value": 86.5, "unit": ""}
+      { "name": "执法人员", "value": 37, "unit": "人" },
+      { "name": "在岗人员", "value": 32, "unit": "人" },
+      { "name": "出勤率", "value": 86.5, "unit": "" }
     ],
     "staffBarDesc": "各区人员数量",
     "staffBar": [311, 55, 222],
 
-
     "inspectionCountDesc": "巡查情况总计",
     "inspectionCount": {
       "today": {
-        "count": {"name": "巡查次数", "value": 2, "unit": "次"},
-        "time": {"name": "巡查时间", "value": 3, "unit": "h"},
-        "distance": {"name": "巡查里程", "value": 12, "unit": "km"},
-        "case": {"name": "立案数", "value": 2, "unit": "件"},
-        "fines": {"name": "罚款金额", "value": 500, "unit": "元"}
+        "count": { "name": "巡查次数", "value": 2, "unit": "次" },
+        "time": { "name": "巡查时间", "value": 3, "unit": "h" },
+        "distance": { "name": "巡查里程", "value": 12, "unit": "km" },
+        "case": { "name": "立案数", "value": 2, "unit": "件" },
+        "fines": { "name": "罚款金额", "value": 500, "unit": "元" }
       },
       "month": {
-        "count": {"name": "巡查次数", "value": 58, "unit": "次"},
-        "time": {"name": "巡查时间", "value": 63, "unit": "h"},
-        "distance": {"name": "巡查里程", "value": 352, "unit": "km"},
-        "case": {"name": "立案数", "value": 31, "unit": "件"},
-        "fines": {"name": "罚款金额", "value": 6348, "unit": "元"}
+        "count": { "name": "巡查次数", "value": 58, "unit": "次" },
+        "time": { "name": "巡查时间", "value": 63, "unit": "h" },
+        "distance": { "name": "巡查里程", "value": 352, "unit": "km" },
+        "case": { "name": "立案数", "value": 31, "unit": "件" },
+        "fines": { "name": "罚款金额", "value": 6348, "unit": "元" }
       },
       "year": {
-        "count": {"name": "巡查次数", "value": 278, "unit": "次"},
-        "time": {"name": "巡查时间", "value": 302, "unit": "h"},
-        "distance": {"name": "巡查里程", "value": 1622, "unit": "km"},
-        "case": {"name": "立案数", "value": 152, "unit": "件"},
-        "fines": {"name": "罚款金额", "value": 13475, "unit": "元"}
+        "count": { "name": "巡查次数", "value": 278, "unit": "次" },
+        "time": { "name": "巡查时间", "value": 302, "unit": "h" },
+        "distance": { "name": "巡查里程", "value": 1622, "unit": "km" },
+        "case": { "name": "立案数", "value": 152, "unit": "件" },
+        "fines": { "name": "罚款金额", "value": 13475, "unit": "元" }
       }
     }
   },
 
-
   "socialSecurityDesc": "社会治安专项管理",
   "socialSecurity": {
     "desc": "图1、图2（案件趋势）使用接口",
     "socialSecurityRank": [
-      {"value": 12, "name": "乱丢垃圾"},
-      {"value": 2, "name": "施工噪声"},
-      {"value": 7, "name": "道路不洁"},
-      {"value": 3, "name": "施工废弃物"},
-      {"value": 8, "name": "绿化弃料"},
-      {"value": 4, "name": "施工占道"},
-      {"value": 1, "name": "易腐垃圾"}
+      { "value": 12, "name": "乱丢垃圾" },
+      { "value": 2, "name": "施工噪声" },
+      { "value": 7, "name": "道路不洁" },
+      { "value": 3, "name": "施工废弃物" },
+      { "value": 8, "name": "绿化弃料" },
+      { "value": 4, "name": "施工占道" },
+      { "value": 1, "name": "易腐垃圾" }
     ]
   },
 
-
   "pipeAlarmDesc": "地下管线安全",
   "pipeAlarm": {
     "count": [
-      {"name": "报警", "value": 11, "unit": "次"},
-      {"name": "抢修", "value": 93, "unit": "次"},
-      {"name": "抢修率", "value": 84.5, "unit": "%"}
+      { "name": "报警", "value": 11, "unit": "次" },
+      { "name": "抢修", "value": 93, "unit": "次" },
+      { "name": "抢修率", "value": 84.5, "unit": "%" }
     ],
     "bar": {
-      "xData": ["液位超限", "噪声超限", "井盖开启", "燃气浓度超标", "消防栓开启", "有害气体超标"],
-      "yData": [10, 17, 24, 26, 14,20]
+      "xData": [
+        "液位超限",
+        "噪声超限",
+        "井盖开启",
+        "燃气浓度超标",
+        "消防栓开启",
+        "有害气体超标"
+      ],
+      "yData": [10, 17, 24, 26, 14, 20]
     },
     "pie": [
-      {"value": 34, "name": "潭东镇"},
-      {"value": 27, "name": "潭口镇"},
-      {"value": 59, "name": "高校园区管理处"}
+      { "value": 34, "name": "潭东镇" },
+      { "value": 27, "name": "潭口镇" },
+      { "value": 59, "name": "高校园区管理处" }
     ],
     "line": {
       "week": {
         "xData": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
         "yData": [
-          {"name": "井盖开启", "data": [120, 252, 101, 134, 290, 230, 110], "color": "255,45,85"},
-          {"name": "液位超限", "data": [120, 222, 191, 234, 250, 200, 310], "color": "0,144,255"},
-          {"name": "燃气泄漏", "data": [120, 21, 12, 10, 8, 12, 6], "color": "255,204,0"}
+          {
+            "name": "井盖开启",
+            "data": [120, 252, 101, 134, 290, 230, 110],
+            "color": "255,45,85"
+          },
+          {
+            "name": "液位超限",
+            "data": [120, 222, 191, 234, 250, 200, 310],
+            "color": "0,144,255"
+          },
+          {
+            "name": "燃气泄漏",
+            "data": [120, 21, 12, 10, 8, 12, 6],
+            "color": "255,204,0"
+          }
         ]
       },
       "month": {
-        "xData": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"],
+        "xData": [
+          "1",
+          "2",
+          "3",
+          "4",
+          "5",
+          "6",
+          "7",
+          "8",
+          "9",
+          "10",
+          "11",
+          "12",
+          "13",
+          "14",
+          "15",
+          "16",
+          "17",
+          "18",
+          "19",
+          "20",
+          "21",
+          "22",
+          "23",
+          "24",
+          "25",
+          "26",
+          "27",
+          "28",
+          "29",
+          "30"
+        ],
         "yData": [
-          {"name": "井盖开启", "data": [120, 252, 101, 134, 290, 230, 110, 120, 252, 101, 134, 290, 230, 110,120, 252, 101, 134, 290, 230, 110, 120, 252, 101, 134, 290, 230, 110, 220, 30], "color": "255,45,85"},
-          {"name": "液位超限", "data": [120, 222, 191, 234, 250, 200, 310, 120, 222, 191, 234, 250, 200, 310, 120, 222, 191, 234, 250, 200, 310, 120, 222, 191, 234, 250, 200, 310, 452, 160], "color": "0,144,255"},
-          {"name": "燃气泄漏", "data": [120, 21, 12, 10, 8, 12, 6, 120, 21, 12, 10, 8, 12, 6, 120, 21, 12, 10, 8, 12, 6, 120, 21, 12, 10, 8, 12, 6, 15, 45], "color": "255,204,0"}
+          {
+            "name": "井盖开启",
+            "data": [
+              120,
+              252,
+              101,
+              134,
+              290,
+              230,
+              110,
+              120,
+              252,
+              101,
+              134,
+              290,
+              230,
+              110,
+              120,
+              252,
+              101,
+              134,
+              290,
+              230,
+              110,
+              120,
+              252,
+              101,
+              134,
+              290,
+              230,
+              110,
+              220,
+              30
+            ],
+            "color": "255,45,85"
+          },
+          {
+            "name": "液位超限",
+            "data": [
+              120,
+              222,
+              191,
+              234,
+              250,
+              200,
+              310,
+              120,
+              222,
+              191,
+              234,
+              250,
+              200,
+              310,
+              120,
+              222,
+              191,
+              234,
+              250,
+              200,
+              310,
+              120,
+              222,
+              191,
+              234,
+              250,
+              200,
+              310,
+              452,
+              160
+            ],
+            "color": "0,144,255"
+          },
+          {
+            "name": "燃气泄漏",
+            "data": [
+              120,
+              21,
+              12,
+              10,
+              8,
+              12,
+              6,
+              120,
+              21,
+              12,
+              10,
+              8,
+              12,
+              6,
+              120,
+              21,
+              12,
+              10,
+              8,
+              12,
+              6,
+              120,
+              21,
+              12,
+              10,
+              8,
+              12,
+              6,
+              15,
+              45
+            ],
+            "color": "255,204,0"
+          }
         ]
       }
     }
   },
 
-
   "truckDesc": "渣土车管理",
   "truck": {
     "count": [
-      {"name": "渣土车", "value": 78, "unit": "辆"},
-      {"name": "在线数", "value": 53, "unit": "辆"},
-      {"name": "在线率", "value": 67.9, "unit": "%"}
+      { "name": "渣土车", "value": 78, "unit": "辆" },
+      { "name": "在线数", "value": 53, "unit": "辆" },
+      { "name": "在线率", "value": 67.9, "unit": "%" }
     ],
     "table": [
       ["超越电子围栏", 15, "11.9%"],
@@ -239,29 +444,89 @@
       ["区域放行", 40, "31%"]
     ],
     "line": {
-      "week": [{"name": "违章次数", "data": [120, 253, 121, 134, 290, 230, 110], "color": "255,45,85"}],
-      "month": [{"name": "违章次数", "data": [3120, 3101, 3134, 3290, 3230, 3110, 3252,3101,3134,3190,3230,3110,3134,3230,3101,3134,3190,3230,3110,3134,3230,3101,3134,3190,3230,3110,3134,3230, 3111, 3222], "color": "255,45,85"}],
-      "year": [{"name": "违章次数", "data": [3120, 3101, 3134, 3290, 3230, 3110, 3252,3101,3134,3111,3211,3121], "color": "255,45,85"}]
+      "week": [
+        {
+          "name": "违章次数",
+          "data": [120, 253, 121, 134, 290, 230, 110],
+          "color": "255,45,85"
+        }
+      ],
+      "month": [
+        {
+          "name": "违章次数",
+          "data": [
+            3120,
+            3101,
+            3134,
+            3290,
+            3230,
+            3110,
+            3252,
+            3101,
+            3134,
+            3190,
+            3230,
+            3110,
+            3134,
+            3230,
+            3101,
+            3134,
+            3190,
+            3230,
+            3110,
+            3134,
+            3230,
+            3101,
+            3134,
+            3190,
+            3230,
+            3110,
+            3134,
+            3230,
+            3111,
+            3222
+          ],
+          "color": "255,45,85"
+        }
+      ],
+      "year": [
+        {
+          "name": "违章次数",
+          "data": [
+            3120,
+            3101,
+            3134,
+            3290,
+            3230,
+            3110,
+            3252,
+            3101,
+            3134,
+            3111,
+            3211,
+            3121
+          ],
+          "color": "255,45,85"
+        }
+      ]
     }
   },
 
-
   "lampDesc": "城市路灯",
   "lamp": {
     "count": [
-      {"name": "路灯", "value": 1227, "unit": "个"},
-      {"name": "亮灯率", "value": 93, "unit": "%"},
-      {"name": "能耗", "value": 5477.3, "unit": "千瓦时"}
+      { "name": "路灯", "value": 1227, "unit": "个" },
+      { "name": "亮灯率", "value": 93, "unit": "%" },
+      { "name": "能耗", "value": 5477.3, "unit": "千瓦时" }
     ],
     "line": "路灯能耗统计取接口",
     "pie": [
-      {"value": 315, "name": "潭东镇"},
-      {"value": 436, "name": "潭口镇"},
-      {"value": 476, "name": "高校园区管理处"}
+      { "value": 315, "name": "潭东镇" },
+      { "value": 436, "name": "潭口镇" },
+      { "value": 476, "name": "高校园区管理处" }
     ]
   },
 
-
   "trafficDesc": "---------------------------交通--------------------------------",
   "traffic": {
     "introduceDesc": "交通概况",
@@ -274,7 +539,6 @@
       "time": 0.02
     },
 
-
     "safeDesc": "交通安全指数",
     "safe": {
       "gem": {
@@ -332,43 +596,69 @@
       },
 
       "line": {
-        "xData": ["周一","周二","周三","周四","周五","周六", "周日"],
+        "xData": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
         "yData": [
-          {"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"}
+          {
+            "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": {
         "xData": ["潭东镇", "潭口镇", "高校园区"],
-        "yData": [ 1.8, 2.3, 3.4 ]
+        "yData": [1.8, 2.3, 3.4]
       }
     },
 
     "eventDesc": "交通事件",
     "event": {
       "count": [
-        {"name": "事件总数", "value": 101, "unit": "个"},
-        {"name": "现场执法数量", "value": 76, "unit": "个"},
-        {"name": "非现场执法数量", "value": 25, "unit": "个"}
+        { "name": "事件总数", "value": 101, "unit": "个" },
+        { "name": "现场执法数量", "value": 76, "unit": "个" },
+        { "name": "非现场执法数量", "value": 25, "unit": "个" }
       ],
       "rank": [
-        {"value": 17, "name": "追尾"},
-        {"value": 12, "name": "超车"},
-        {"value": 10, "name": "直行"},
-        {"value": 8, "name": "左转弯"},
-        {"value": 4, "name": "右转弯"}
+        { "value": 17, "name": "追尾" },
+        { "value": 12, "name": "超车" },
+        { "value": 10, "name": "直行" },
+        { "value": 8, "name": "左转弯" },
+        { "value": 4, "name": "右转弯" }
       ],
       "pie": [
-        {"value": 30, "name": "潭东镇"},
-        {"value": 14, "name": "潭口镇"},
-        {"value": 57, "name": "高校园区"}
+        { "value": 30, "name": "潭东镇" },
+        { "value": 14, "name": "潭口镇" },
+        { "value": 57, "name": "高校园区" }
       ],
       "line": {
         "xData": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
-        "yData": [{"name": "事故数量", "data": [120, 252, 101, 134, 290, 230, 110], "color": "255,45,85"}]
+        "yData": [
+          {
+            "name": "事故数量",
+            "data": [120, 252, 101, 134, 290, 230, 110],
+            "color": "255,45,85"
+          }
+        ]
       }
     },
 
@@ -377,13 +667,19 @@
     "trafficPeccancyDesc": "交通违章",
     "trafficPeccancy": {
       "count": [
-        {"name": "今日违章", "value": 1476, "unit": "个"},
-        {"name": "本月违章", "value": 42537, "unit": "个"},
-        {"name": "全年违章", "value": 488828, "unit": "个"}
+        { "name": "今日违章", "value": 1476, "unit": "个" },
+        { "name": "本月违章", "value": 42537, "unit": "个" },
+        { "name": "全年违章", "value": 488828, "unit": "个" }
       ],
       "line": {
         "xData": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
-        "yData": [{"name": "事故数量", "data": [120, 252, 101, 134, 290, 230, 110], "color": "255,45,85"}]
+        "yData": [
+          {
+            "name": "事故数量",
+            "data": [120, 252, 101, 134, 290, 230, 110],
+            "color": "255,45,85"
+          }
+        ]
       },
       "table": [
         ["摩托车未带头盔", 346, "<span class=\"span-red\">80%</span>"],
@@ -396,32 +692,30 @@
         ["其他", 822, "20%"]
       ],
       "pie": [
-        {"value": 436, "name": "潭东镇"},
-        {"value": 257, "name": "潭口镇"},
-        {"value": 734, "name": "高校园区"}
+        { "value": 436, "name": "潭东镇" },
+        { "value": 257, "name": "潭口镇" },
+        { "value": 734, "name": "高校园区" }
       ]
     },
 
-
-
     "videoDesc": "视频网管",
     "video": {
-      "total": {"name": "监控总数", "value": 3587, "unit": "个"},
-      "hd": {"name": "高清", "value": 1037, "unit": "个"},
-      "md": {"name": "标清", "value": 2550, "unit": "个"},
-      "online": {"name": "在线", "value": 3208, "unit": "个"},
-      "offline": {"name": "离线", "value": 379, "unit": "个"},
-      "onlineRate": {"name": "在线率", "value": 89.4, "unit": "%"}
+      "total": { "name": "监控总数", "value": 3587, "unit": "个" },
+      "hd": { "name": "高清", "value": 1037, "unit": "个" },
+      "md": { "name": "标清", "value": 2550, "unit": "个" },
+      "online": { "name": "在线", "value": 3208, "unit": "个" },
+      "offline": { "name": "离线", "value": 379, "unit": "个" },
+      "onlineRate": { "name": "在线率", "value": 89.4, "unit": "%" }
     },
 
     "environmentDesc": "智慧环卫",
     "environment": {
-      "dev": {"name": "环卫设施", "value": 56, "unit": "个"},
-      "work": {"name": "环卫工作", "value": 36, "unit": "件"},
-      "complete": {"name": "工作完成数", "value": 24, "unit": "件"},
-      "rate": {"name": "工作完成率", "value": 67, "unit": "%"},
-      "person": {"name": "环卫人员", "value": 142, "unit": "人"},
-      "car": {"name": "环卫车", "value": 37, "unit": "辆"}
+      "dev": { "name": "环卫设施", "value": 56, "unit": "个" },
+      "work": { "name": "环卫工作", "value": 36, "unit": "件" },
+      "complete": { "name": "工作完成数", "value": 24, "unit": "件" },
+      "rate": { "name": "工作完成率", "value": 67, "unit": "%" },
+      "person": { "name": "环卫人员", "value": 142, "unit": "人" },
+      "car": { "name": "环卫车", "value": 37, "unit": "辆" }
     }
   }
 }

diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue
index 36792e1..e7ac255 100644
--- a/src/views/cityManage/cityManageLeft2.vue
+++ b/src/views/cityManage/cityManageLeft2.vue
@@ -56,7 +56,9 @@
             </div>
             <!--多元化解-->
             <div class="modular-row-30">
-              <contradiction/>
+              <contradiction style="width: 49%;"/>
+              <RoadLine  style="width: 24%;"/>
+              <ThreeConstruction  style="width: 24%;"/>
             </div>
           </div><!-- .col50 over-->
           <!--./右半-->
@@ -90,12 +92,14 @@
 import ParkIntroduce from './components/parkingSystem/parkIntroduce'
 import ParkEarth from './components/parkingSystem/parkEarth'
 import ParkDetail from './components/parkingSystem/parkDetail'
-import ParkIncomeCount from "./components/parkingSystem/parkIncomeCount";
-import ParkFlowLine from "./components/parkingSystem/parkFlowLine";
-import ParkIncomeLine from "./components/parkingSystem/parkIncomLine";
-import Contradiction from "./components/contradiction/contradiction";
-import Service from "./components/service/service";
-import Youth from "./components/youth/youth";
+import ParkIncomeCount from './components/parkingSystem/parkIncomeCount'
+import ParkFlowLine from './components/parkingSystem/parkFlowLine'
+import ParkIncomeLine from './components/parkingSystem/parkIncomLine'
+import Contradiction from './components/contradiction/contradiction'
+import Service from './components/service/service'
+import Youth from './components/youth/youth'
+import RoadLine from './components/contradiction/components/roadLine.vue'
+import ThreeConstruction from './components/contradiction/components/threeConstruction.vue'
 export default {
   name: 'CityManageLeft',
   components: {
@@ -128,7 +132,9 @@
     Introduce,
     Corner1,
     wisdomTraffic,
-    eventCom
+    eventCom,
+    RoadLine,
+    ThreeConstruction
   },
   data () {
     return {
diff --git a/src/views/cityManage/components/contradiction/components/roadLine.vue b/src/views/cityManage/components/contradiction/components/roadLine.vue
new file mode 100644
index 0000000..b9a0d1a
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/roadLine.vue
@@ -0,0 +1,62 @@
+<template>
+  <chart-layout title="护路护线管理" @click="getData">
+    <div class="block-container">
+        <simple-pie-chart
+          :id="data.id"
+          :width="data.width"
+          :height="data.height"
+          :seriesData="data.data"
+        >
+        </simple-pie-chart>
+    </div>
+  </chart-layout>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SingleLayout from '@/components/layout/singleLayout'
+// import SimpleBlock from './components/simpleBlock'
+import ChartLayout from '@/components/layout/chartLayout'
+import mockData from '../../../../../../static/city.json'
+export default {
+  name: 'introduce',
+  components: {ChartLayout, SimplePieChart, SingleLayout},
+  data () {
+    return {
+      data: {
+        id: 'contradiction-pie',
+        width: '100%',
+        height: '100%',
+        legend: ['潭东镇', '潭口镇', '高校园区工作组'],
+        data: [
+          {'value': 0, 'name': '潭东镇'},
+          {'value': 0, 'name': '潭口镇'},
+          {'value': 0, 'name': '高校园区工作组'}
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  methods: {
+    getData () {
+      this.data.data = mockData.roadLinePie
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.block-container{
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 0.04rem;
+  .block{
+    width: 25%;
+    height: 45%;
+  }
+}
+</style>
diff --git a/src/views/cityManage/components/contradiction/components/threeConstruction.vue b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
new file mode 100644
index 0000000..266c61f
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
@@ -0,0 +1,132 @@
+<template>
+  <chart-layout title="三项建设管理">
+    <!-- <div class="block-container"> -->
+      <div id="threeConstruction-bar" class="container" />
+    <!-- </div> -->
+  </chart-layout>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { automaticCarousel } from '@/utils/automaticCarousel'
+import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
+export default {
+  name: 'SocialStability',
+  data () {
+    return {
+      isShow: true,
+      myChart: null,
+      extend: {
+        color: [], // 动态填充颜色
+        legend: {
+          textStyle: { color: '#cce9ff', fontWeight: 'bold' },
+          data: [] // 动态填充图例
+        },
+        dataZoom: [
+          { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#092647',
+              borderColor: '#404a59',
+              borderWidth: 1,
+              textStyle: { color: '#ffffff', fontSize: 12 }
+            }
+          },
+          formatter: function (params) {
+            const date = params[0].axisValue
+            let content = `<div>${date}</div>`
+            params.forEach(item => {
+              content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
+            })
+            return content
+          }
+        },
+        grid: { left: '5%', right: '5%', bottom: '1%', top: '22%', containLabel: true },
+        xAxis: {
+          type: 'category',
+          axisLine: { lineStyle: { color: '#cce9ff' } },
+          axisLabel: { color: '#cce9ff' },
+          data: []
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: { lineStyle: { color: '#cce9ff' } },
+            axisLabel: { color: '#cce9ff' },
+            splitLine: {
+              show: true,
+              lineStyle: { color: ['#c8d0da'], type: 'dashed' }
+            }
+          }
+        ],
+        series: [] // 动态填充系列（折线+柱形）
+      }
+    }
+  },
+  mounted () {
+    this.myChart = echarts.init(document.getElementById('threeConstruction-bar'))
+    window.addEventListener('resize', () => {
+      this.myChart.resize()
+    })
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      const threeConstructionData = mockData.threeConstruction
+      console.log('-66666666666666666=', threeConstructionData)
+
+      // 1. 提取基础数据
+      const { year, threeConstructionTypes } = threeConstructionData
+      const threeConstructionTypeNames = Object.keys(threeConstructionTypes) // 所有事件类型名称
+      const threeConstructionTypeCount = threeConstructionTypeNames.length // 柱形图数量
+
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        ...COLOR_POOL.slice(0, threeConstructionTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = year
+
+      // 5. 动态生成series
+      this.extend.series = []
+
+      // 循环添加柱形图系列（每个事件类型一个柱形）
+      threeConstructionTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index] },
+          data: threeConstructionTypes[typeName]
+        })
+      })
+      const showCount = mockData.threeConstruction.showDataCount + '' ? mockData.threeConstruction.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
+    }
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', () => {})
+    this.myChart.dispose()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/cityManage/components/introduce/components/eventBarLine.vue b/src/views/cityManage/components/introduce/components/eventBarLine.vue
index ee8104d..b317147 100644
--- a/src/views/cityManage/components/introduce/components/eventBarLine.vue
+++ b/src/views/cityManage/components/introduce/components/eventBarLine.vue
@@ -1,11 +1,18 @@
 <template>
-  <div id="caseType-linebar" class="container"/>
+  <div id="event-Bar-Line" class="container" />
 </template>
 
 <script>
 import * as echarts from 'echarts'
 import { automaticCarousel } from '@/utils/automaticCarousel'
 import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
 export default {
   name: 'SocialStability',
   data () {
@@ -13,10 +20,10 @@
       isShow: true,
       myChart: null,
       extend: {
-        color: ['#CEDE0F', '#41B8FF', '#FF7D00', '#F53F3F'], // 事件类型颜色
+        color: [], // 动态填充颜色
         legend: {
           textStyle: { color: '#cce9ff', fontWeight: 'bold' },
-          data: ['事件总数趋势', '矛盾纠纷调解', '治安案件处置', '涉稳隐患排查', '反邪宣传与排查']
+          data: [] // 动态填充图例
         },
         dataZoom: [
           { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
@@ -33,7 +40,7 @@
             }
           },
           formatter: function (params) {
-            let date = params[0].axisValue
+            const date = params[0].axisValue
             let content = `<div>${date}</div>`
             params.forEach(item => {
               content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
@@ -46,7 +53,7 @@
           type: 'category',
           axisLine: { lineStyle: { color: '#cce9ff' } },
           axisLabel: { color: '#cce9ff' },
-          data: [] // 月份数据后续填充
+          data: [] // 动态填充月份
         },
         yAxis: [
           {
@@ -59,95 +66,81 @@
             }
           }
         ],
-        series: [
-          // 1. 事件总数趋势（折线图）
-          {
-            name: '事件总数趋势',
-            type: 'line',
-            smooth: true,
-            symbol: 'circle',
-            symbolSize: 6,
-            color: '#CEDE0F',
-            data: [], // 后续填充
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0.5, color: '#CEDE0F' },
-                { offset: 1, color: 'rgba(10,25,124,0.2)' }
-              ])
-            }
-          },
-          // 2. 矛盾纠纷调解（柱状图）
-          {
-            name: '矛盾纠纷调解',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#41B8FF' },
-            data: [] // 后续填充
-          },
-          // 3. 治安案件处置（柱状图）
-          {
-            name: '治安案件处置',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#FF7D00' },
-            data: [] // 后续填充
-          },
-          // 4. 涉稳隐患排查（柱状图）
-          {
-            name: '涉稳隐患排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#F53F3F' },
-            data: [] // 后续填充
-          },
-          // 5. 反邪宣传与排查（柱状图）
-          {
-            name: '反邪宣传与排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#722ED1' },
-            data: [] // 后续填充
-          }
-        ]
+        series: [] // 动态填充系列（折线+柱形）
       }
     }
   },
   mounted () {
-    this.myChart = echarts.init(document.getElementById('caseType-linebar'))
+    this.myChart = echarts.init(document.getElementById('event-Bar-Line'))
     window.addEventListener('resize', () => {
-      if (this.myChart) this.myChart.resize()
+      this.myChart.resize()
     })
     this.fetchData()
   },
   methods: {
     fetchData () {
-      // 社会稳定和政治安全专项事件数据（模拟）
       const eventData = mockData.eventData
+      // 1. 提取基础数据
+      const { month, trend, eventTypes } = eventData
+      const eventTypeNames = Object.keys(eventTypes) // 所有事件类型名称
+      const eventTypeCount = eventTypeNames.length // 柱形图数量
 
-      // 填充X轴月份
-      this.extend.xAxis.data = eventData.month
-      // 填充折线图（事件总数趋势）
-      this.extend.series[0].data = eventData.trendData
-      // 填充柱状图（各事件类型）
-      this.extend.series[1].data = eventData.eventTypeData['矛盾纠纷调解']
-      this.extend.series[2].data = eventData.eventTypeData['治安案件处置']
-      this.extend.series[3].data = eventData.eventTypeData['涉稳隐患排查']
-      this.extend.series[4].data = eventData.eventTypeData['反邪宣传与排查']
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        COLOR_POOL[0], // 折线图颜色
+        ...COLOR_POOL.slice(1, 1 + eventTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
 
-      // 渲染图表
-      // this.myChart.setOption(this.extend, true)
-      automaticCarousel(this.extend, this.myChart, 3000, 3)
+      // 3. 动态生成图例（折线名称 + 所有事件类型名称）
+      this.extend.legend.data = [trend.name, ...eventTypeNames]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = month
+
+      // 5. 动态生成series（先折线，后柱形）
+      this.extend.series = []
+
+      // 5.1 添加折线图系列
+      this.extend.series.push({
+        name: trend.name,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        color: this.extend.color[0], // 用第一种颜色
+        data: trend.data,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0.5, color: this.extend.color[0] },
+            { offset: 1, color: 'rgba(10,25,124,0.2)' }
+          ])
+        }
+      })
+
+      // 5.2 循环添加柱形图系列（每个事件类型一个柱形）
+      eventTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index + 1] }, // 柱形颜色从第二种开始
+          data: eventTypes[typeName]
+        })
+      })
+      const showCount = mockData.showDataCount + '' ? mockData.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
     }
   },
   beforeDestroy () {
     window.removeEventListener('resize', () => {})
-    if (this.myChart) this.myChart.dispose()
+    this.myChart.dispose()
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.container{
+.container {
   width: 100%;
   height: 100%;
 }
diff --git a/src/views/industrialEconomy/components/commercial/commercial.vue b/src/views/industrialEconomy/components/commercial/commercial.vue
index 95fa443..8e14d51 100644
--- a/src/views/industrialEconomy/components/commercial/commercial.vue
+++ b/src/views/industrialEconomy/components/commercial/commercial.vue
@@ -6,13 +6,16 @@
 <template>
   <chart-layout title="营商环境" @click="getData">
     <div class="block-container">
-      <div class="block" style="width:20%;height: 100%">
+      <!-- <div class="block" style="width:20%;height: 100%">
         <commercial-total/>
       </div>
       <div class="block" style="width:40%;height: 100%">
         <commercial-pie/>
+      </div> -->
+      <div class="block" style="width:60%">
+        <CommercialTable/>
       </div>
-      <div class="block" style="width:40%;height: 100%">
+      <div class="block" style="width:40%">
         <commercial-bar/>
       </div>
     </div>
@@ -24,12 +27,15 @@
 import CommercialTotal from './components/commercialTotal'
 import CommercialPie from './components/commercialPie'
 import CommercialBar from './components/commercialBar'
+import CommercialTable from './components/commercialTable.vue'
 export default {
   name: 'Expense',
   components: {
     CommercialBar,
     CommercialPie,
-    CommercialTotal},
+    CommercialTotal,
+    CommercialTable
+  },
   methods: {
     getData () {
       // this.$refs.ecardEarth.getData()
diff --git a/src/views/industrialEconomy/components/commercial/components/commercialTable.vue b/src/views/industrialEconomy/components/commercial/components/commercialTable.vue
new file mode 100644
index 0000000..a7d1a9f
--- /dev/null
+++ b/src/views/industrialEconomy/components/commercial/components/commercialTable.vue
@@ -0,0 +1,74 @@
+<template>
+  <div style="width: 100%;height:100%;padding:0.1rem;">
+    <scroll-board :config="boardConfig"/>
+  </div>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import Corner1 from '@/components/corner/Corner1'
+import ChartLayout from '@/components/layout/chartLayout'
+import {fetchTruckCaseByType} from '@/api/cityManage'
+import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/industrialEconomy.json'
+export default {
+  name: 'TruckCaseDetail',
+  components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
+  data () {
+    return {
+      boardConfig: {
+        header: ['', '所属区域', '金融服务次数', '政策支持数量', '基础设施数量', '道路数量', '园林数量', '景点数量', '区人口总量'],
+        rowNum: 4,
+        hoverColor: true,
+        headerBGC: 'rgba(46,145,244,0.4)',
+        oddRowBGC: 'transparent',
+        evenRowBGC: '#030737',
+        headerColor: '#00F0FF',
+        rowColor: '#FFFFFF',
+        headerFontSize: '0.072rem', // 表头字体大小
+        rowFontSize: '0.07rem', // 行字体大小
+        columnWidth: [160],
+        data: [
+          ['潭东镇产业园区', '潭东镇', '135次/年', '12项', '18个', '20条', '4处', '2处', '约1.6万'],
+          ['潭东镇中心社区', '潭东镇', '160次/年', '9项', '22个', '25条', '6处', '3处', '约2.1万'],
+          ['潭东镇乡村片区', '潭东镇', '90次/年', '7项', '10个', '18条', '3处', '2处', '约1.21万'],
+          ['潭东镇商贸街区', '潭东镇', '85次/年', '6项', '9个', '12条', '2处', '1处', '约0.8万'],
+          ['潭口镇老街片区', '潭口镇', '110次/年', '8项', '15个', '16条', '3处', '2处', '约0.9万'],
+          ['潭口镇商贸新区', '潭口镇', '190次/年', '10项', '20个', '22条', '4处', '2处', '约1.2万'],
+          ['潭口镇乡村集中区', '潭口镇', '120次/年', '7项', '13个', '19条', '3处', '2处', '约0.87万'],
+          ['潭口镇工业园区', '潭口镇', '105次/年', '9项', '16个', '15条', '2处', '1处', '约0.4万'],
+          ['高校园区主校区周边', '高校园区工作组', '230次/年', '16项', '22个', '14条', '6处', '3处', '约4.5万'],
+          ['高校园区科创孵化区', '高校园区工作组', '200次/年', '12项', '18个', '12条', '5处', '2处', '约2.3万'],
+          ['高校园区人才社区', '高校园区工作组', '170次/年', '10项', '15个', '10条', '4处', '2处', '约1.2万'],
+          ['高校园区商业配套区', '高校园区工作组', '145次/年', '9项', '12个', '9条', '3处', '1处', '约0.5万']
+        ]
+      }
+    }
+  },
+  created () {
+    // this.getData()
+    this.boardConfig.header = mockData.left.commercial.table.header
+    this.boardConfig.data = mockData.left.commercial.table.data
+  },
+  methods: {
+    getData () {
+      fetchTruckCaseByType().then(response => {
+        if (response.code === 200) {
+          const data = response.data
+          const list = data.map(item => {
+            return [item.name, item.num, item.rate + '%']
+          })
+          this.boardConfig.data = list
+          const boardConfig = this.boardConfig
+          // this.$set(this, 'boardConfig', boardConfig)
+          this.boardConfig = Object.assign({}, boardConfig)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/views/industrialEconomy/components/daily/components/dailyCount.vue b/src/views/industrialEconomy/components/daily/components/dailyCount.vue
index 79b57f9..bd64a9a 100644
--- a/src/views/industrialEconomy/components/daily/components/dailyCount.vue
+++ b/src/views/industrialEconomy/components/daily/components/dailyCount.vue
@@ -8,6 +8,7 @@
 
 <script>
 import ImageBlock2 from '@/components/block/imageBlock2'
+import mockData from '../../../../../../static/industrialEconomy.json'
 export default {
   name: 'DailyCount',
   components: {ImageBlock2},
@@ -26,7 +27,7 @@
   },
   methods: {
     getData () {
-
+      this.data = mockData.left.index.count
     }
 
   }
diff --git a/src/views/industrialEconomy/components/daily/daily.vue b/src/views/industrialEconomy/components/daily/daily.vue
index 7b9de8c..000b2f5 100644
--- a/src/views/industrialEconomy/components/daily/daily.vue
+++ b/src/views/industrialEconomy/components/daily/daily.vue
@@ -1,7 +1,7 @@
 <template>
   <chart-layout title="产业指数" @click="getData">
     <div class="block-container">
-      <div class="block" style="width:50%">
+      <div class="block" style="width:100%">
         <daily-count/>
       </div>
     </div>
diff --git a/src/views/industrialEconomy/industrialEconomyLeft.vue b/src/views/industrialEconomy/industrialEconomyLeft.vue
index 0f9b1d3..6047108 100644
--- a/src/views/industrialEconomy/industrialEconomyLeft.vue
+++ b/src/views/industrialEconomy/industrialEconomyLeft.vue
@@ -9,7 +9,7 @@
               <indicator/>
             </div>
             <div class="modular-row-30">
-              <div class="modular-col-60 modular-padding-right">
+              <div class="modular-col-100 modular-padding-right">
                 <commercial/>
               </div>
               <div class="modular-col-30">
diff --git a/src/views/industrialEconomy/industrialEconomyRight.vue b/src/views/industrialEconomy/industrialEconomyRight.vue
index 848b398..e23cbc5 100644
--- a/src/views/industrialEconomy/industrialEconomyRight.vue
+++ b/src/views/industrialEconomy/industrialEconomyRight.vue
@@ -32,10 +32,10 @@
 import Enterprise from './components/enterprise/enterprise'
 import Commercial from './components/commercial/commercial'
 import Daily from './components/daily/daily'
-import Expense from "./components/expense/expense";
-import Structure from "./components/structure/structure";
-import Building from "./components/building/building";
-import Assets from "./components/assets/assets";
+import Expense from './components/expense/expense'
+import Structure from './components/structure/structure'
+import Building from './components/building/building'
+import Assets from './components/assets/assets'
 export default {
   name: 'industrialEconomyRight',
   components: {
diff --git a/src/views/socialLive/components/education/components/peopleCount.vue b/src/views/socialLive/components/education/components/peopleCount.vue
index 3905ca6..5b2c9e7 100644
--- a/src/views/socialLive/components/education/components/peopleCount.vue
+++ b/src/views/socialLive/components/education/components/peopleCount.vue
@@ -25,7 +25,8 @@
       data: {
         child: {name: '幼儿', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
         pupil: {name: '小学生', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
-        student: {name: '中学生', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
+        student: {name: '初中生', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
+        highSchoolStudent: {name: '高中生', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
         teacher: {name: '教职工', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')}
       }
     }
@@ -36,6 +37,7 @@
     this.data.pupil.value = mockData.right.education.countRight.pupil
     this.data.student.value = mockData.right.education.countRight.student
     this.data.teacher.value = mockData.right.education.countRight.teacher
+    this.data.highSchoolStudent.value = mockData.right.education.countRight.highSchoolStudent
   },
   methods: {
     getData () {
diff --git a/src/views/socialLive/components/hospital/hospital.vue b/src/views/socialLive/components/hospital/hospital.vue
index f8c3965..023ee71 100644
--- a/src/views/socialLive/components/hospital/hospital.vue
+++ b/src/views/socialLive/components/hospital/hospital.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-11-18 10:10:06
  -->
 <template>
-  <chart-layout title="智慧医疗" @click="getData">
+  <chart-layout title="智慧医疗" @click="getData" style="height: 100%;">
     <div class="block-container">
-      <div class="block" style="width:40%">
-        <hospital-count ref="hospitalCount"/>
+      <div class="block" style="width:40%;height: 100%;">
+        <hospital-count ref="hospitalCount" style="height: 100%;"/>
       </div>
       <div class="block" style="width:60%;display:flex;flex-direction:column;flex-wrap: wrap;justify-content: space-between;">
         <!--<div style="width:100%;flex:1">-->
diff --git a/static/city.json b/static/city.json
index 0b8cf12..20485f8 100644
--- a/static/city.json
+++ b/static/city.json
@@ -8,27 +8,24 @@
     "zanzhu": 26752
   },
 
-
   "specialPopulationsDesc": "特殊人群",
   "specialPopulations": [
-    {"value": 72, "name": "社区矫正人员"},
-    {"value": 34, "name": "刑满释放人员"},
-    {"value": 2, "name": "吸毒人员"},
-    {"value": 156, "name": "精神障碍患者"}
+    { "value": 72, "name": "社区矫正人员" },
+    { "value": 34, "name": "刑满释放人员" },
+    { "value": 2, "name": "吸毒人员" },
+    { "value": 156, "name": "精神障碍患者" }
   ],
 
-
   "psychosocialServicesDesc": "社会心理服务",
   "psychosocialServices": {
     "count": [
-      {"name": "今日服务", "value": 2, "unit": "次"},
-      {"name": "本月服务", "value": 53, "unit": "次"},
-      {"name": "全年服务", "value": 187, "unit": "次"}
+      { "name": "今日服务", "value": 2, "unit": "次" },
+      { "name": "本月服务", "value": 53, "unit": "次" },
+      { "name": "全年服务", "value": 187, "unit": "次" }
     ],
-    "line": [3,1,1,2,3,1,2]
+    "line": [3, 1, 1, 2, 3, 1, 2]
   },
 
-
   "overallOverviewDesc": "整体概况",
   "overallOverview": {
     "totalArea": 130,
@@ -43,9 +40,26 @@
 
   "eventDataDesc": "事件数量及趋势",
   "eventData": {
-    "month": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
-    "trendData": [28, 22, 35, 40, 44, 40, 32, 28, 36, 40, 34, 28],
-    "eventTypeData": {
+    "month": [
+      "1月",
+      "2月",
+      "3月",
+      "4月",
+      "5月",
+      "6月",
+      "7月",
+      "8月",
+      "9月",
+      "10月",
+      "11月",
+      "12月"
+    ],
+    "trend": {
+      "name": "事件总数趋势",
+      "data": [28, 22, 35, 40, 44, 40, 32, 28, 36, 40, 34, 28]
+    },
+    "showDataCount": 3,
+    "eventTypes": {
       "矛盾纠纷调解": [12, 9, 15, 18, 22, 19, 16, 14, 17, 20, 18, 15],
       "治安案件处置": [8, 6, 10, 12, 9, 11, 8, 7, 9, 10, 8, 7],
       "涉稳隐患排查": [5, 4, 6, 7, 8, 6, 5, 4, 6, 7, 5, 4],
@@ -61,31 +75,30 @@
     { "name": "反邪宣传与排查", "value": 4 }
   ],
 
-
   "adolescentDesc": "青少年犯罪与校园安全",
   "adolescent": {
     "count": [
-      {"name": "重点青少年", "value": 203, "unit": "人"},
-      {"name": "平均年龄", "value": 11.4, "unit": "岁"},
-      {"name": "违法数", "value": 452, "unit": "个"}
+      { "name": "重点青少年", "value": 203, "unit": "人" },
+      { "name": "平均年龄", "value": 11.4, "unit": "岁" },
+      { "name": "违法数", "value": 452, "unit": "个" },
+      { "name": "上门服务次数", "value": 232, "unit": "次" }
     ],
     "crimeTrendsDesc": "犯罪趋势",
-    "crimeTrends": [1,0,2,0,0,3,1],
+    "crimeTrends": [1, 0, 2, 0, 0, 3, 1],
     "schoolCount": [
-      {"name": "校园", "value": 7, "unit": "个"},
-      {"name": "校园安保", "value": 36, "unit": "人"},
-      {"name": "校园事件", "value": 23, "unit": "个"}
+      { "name": "校园", "value": 7, "unit": "个" },
+      { "name": "校园安保", "value": 36, "unit": "人" },
+      { "name": "校园事件", "value": 23, "unit": "个" }
     ],
-    "schoolEventTrends": [0,0,1,0,2,0,0],
+    "schoolEventTrends": [0, 0, 1, 0, 2, 0, 0],
     "schoolEventPercent": [
-      {"value": 52.17, "name": "活动事件"},
-      {"value": 8.7, "name": "卫生事件"},
-      {"value": 4.35, "name": "消防事件"},
-      {"value": 34.78, "name": "其他事件"}
+      { "value": 52.17, "name": "活动事件" },
+      { "value": 8.7, "name": "卫生事件" },
+      { "value": 4.35, "name": "消防事件" },
+      { "value": 34.78, "name": "其他事件" }
     ]
   },
 
-
   "diversifiedSolutionsDesc": "多元化解",
   "diversifiedSolutions": {
     "count": [
@@ -96,38 +109,79 @@
     "contradictionTrends": {
       "xData": ["1月", "2月", "3月", "4月"],
       "yData": [
-        {"name": "案件总数", "data": [11,20,8,12], "color": "255,45,85"},
-        {"name": "处理数", "data": [9,15,7,10], "color": "0,144,255"}
+        { "name": "案件总数", "data": [11, 20, 8, 12], "color": "255,45,85" },
+        { "name": "处理数", "data": [9, 15, 7, 10], "color": "0,144,255" }
       ]
     },
     "contradictionPercent": [
-      {"value": 34, "name": "民事纠纷"},
-      {"value": 5, "name": "行政纠纷"},
-      {"value": 1, "name": "涉法纠纷"},
-      {"value": 11, "name": "其他纠纷"}
+      { "value": 34, "name": "民事纠纷" },
+      { "value": 5, "name": "行政纠纷" },
+      { "value": 1, "name": "涉法纠纷" },
+      { "value": 11, "name": "其他纠纷" }
     ]
   },
 
+  "roadLineDesc": "护线护路管理",
+  "roadLinePie": [
+    { "value": 1001, "name": "潭东镇" },
+    { "value": 1423, "name": "潭口镇" },
+    { "value": 865, "name": "高校园区工作组" }
+  ],
 
+  "threeConstructionDesc": "三项建设管理",
+  "threeConstruction": {
+    "year": ["2022年", "2023年", "2024年", "2025年"],
+    "showDataCount": 2,
+    "threeConstructionTypes": {
+      "综治中心建设": [6, 12, 18, 8],
+      "网格覆盖社区数": [20, 30, 36, 16],
+      "专职网格员数量": [50, 86, 120, 32],
+      "信息化系统上线数": [3, 8, 15, 2],
+      "智能设备安装数": [120, 180, 200, 68]
+    }
+  },
 
   "title-right-1": "=======================城市治理--右半屏==============================",
   "urbanManagementDesc": "---------------------------城管执法--------------------------------",
   "urbanManagement": {
     "mobileCaseCount": [
-      {"name": "立案数", "value": "152", "unit": "个"},
-      {"name": "结案数", "value": "131", "unit": "个"},
-      {"name": "待结案", "value": "21", "unit": "个"}
+      { "name": "立案数", "value": "152", "unit": "个" },
+      { "name": "结案数", "value": "131", "unit": "个" },
+      { "name": "待结案", "value": "21", "unit": "个" }
     ],
     "mobileCaseBar": {
       "week": ["12", "13", "11", "16", "13", "22", "13"],
-      "month": ["12", "32", "13", "41", "15", "16", "7", "8", "9", "10", "11", "12", "13", "24", "15", "16", "27", "18", "19", "20", "21", "22"]
+      "month": [
+        "12",
+        "32",
+        "13",
+        "41",
+        "15",
+        "16",
+        "7",
+        "8",
+        "9",
+        "10",
+        "11",
+        "12",
+        "13",
+        "24",
+        "15",
+        "16",
+        "27",
+        "18",
+        "19",
+        "20",
+        "21",
+        "22"
+      ]
     },
     "mobileCasePie": [
-      {"value": 103, "name": "潭中"},
-      {"value": 134, "name": "潭口"},
-      {"value": 214, "name": "高校园区"}
+      { "value": 103, "name": "潭中" },
+      { "value": 134, "name": "潭口" },
+      { "value": 214, "name": "高校园区" }
     ],
-    "table":  [
+    "table": [
       ["施工噪声", "6", "3", "1"],
       ["绿化弃料", "3", "2", "0"],
       ["道路不洁", "15", "18", "32"],
@@ -136,99 +190,250 @@
 
     "desc": "-----城管执法切换的第二张屏----------",
     "staffCount": [
-      {"name": "执法人员", "value": 37, "unit": "人"},
-      {"name": "在岗人员", "value": 32, "unit": "人"},
-      {"name": "出勤率", "value": 86.5, "unit": ""}
+      { "name": "执法人员", "value": 37, "unit": "人" },
+      { "name": "在岗人员", "value": 32, "unit": "人" },
+      { "name": "出勤率", "value": 86.5, "unit": "" }
     ],
     "staffBarDesc": "各区人员数量",
     "staffBar": [311, 55, 222],
 
-
     "inspectionCountDesc": "巡查情况总计",
     "inspectionCount": {
       "today": {
-        "count": {"name": "巡查次数", "value": 2, "unit": "次"},
-        "time": {"name": "巡查时间", "value": 3, "unit": "h"},
-        "distance": {"name": "巡查里程", "value": 12, "unit": "km"},
-        "case": {"name": "立案数", "value": 2, "unit": "件"},
-        "fines": {"name": "罚款金额", "value": 500, "unit": "元"}
+        "count": { "name": "巡查次数", "value": 2, "unit": "次" },
+        "time": { "name": "巡查时间", "value": 3, "unit": "h" },
+        "distance": { "name": "巡查里程", "value": 12, "unit": "km" },
+        "case": { "name": "立案数", "value": 2, "unit": "件" },
+        "fines": { "name": "罚款金额", "value": 500, "unit": "元" }
       },
       "month": {
-        "count": {"name": "巡查次数", "value": 58, "unit": "次"},
-        "time": {"name": "巡查时间", "value": 63, "unit": "h"},
-        "distance": {"name": "巡查里程", "value": 352, "unit": "km"},
-        "case": {"name": "立案数", "value": 31, "unit": "件"},
-        "fines": {"name": "罚款金额", "value": 6348, "unit": "元"}
+        "count": { "name": "巡查次数", "value": 58, "unit": "次" },
+        "time": { "name": "巡查时间", "value": 63, "unit": "h" },
+        "distance": { "name": "巡查里程", "value": 352, "unit": "km" },
+        "case": { "name": "立案数", "value": 31, "unit": "件" },
+        "fines": { "name": "罚款金额", "value": 6348, "unit": "元" }
       },
       "year": {
-        "count": {"name": "巡查次数", "value": 278, "unit": "次"},
-        "time": {"name": "巡查时间", "value": 302, "unit": "h"},
-        "distance": {"name": "巡查里程", "value": 1622, "unit": "km"},
-        "case": {"name": "立案数", "value": 152, "unit": "件"},
-        "fines": {"name": "罚款金额", "value": 13475, "unit": "元"}
+        "count": { "name": "巡查次数", "value": 278, "unit": "次" },
+        "time": { "name": "巡查时间", "value": 302, "unit": "h" },
+        "distance": { "name": "巡查里程", "value": 1622, "unit": "km" },
+        "case": { "name": "立案数", "value": 152, "unit": "件" },
+        "fines": { "name": "罚款金额", "value": 13475, "unit": "元" }
       }
     }
   },
 
-
   "socialSecurityDesc": "社会治安专项管理",
   "socialSecurity": {
     "desc": "图1、图2（案件趋势）使用接口",
     "socialSecurityRank": [
-      {"value": 12, "name": "乱丢垃圾"},
-      {"value": 2, "name": "施工噪声"},
-      {"value": 7, "name": "道路不洁"},
-      {"value": 3, "name": "施工废弃物"},
-      {"value": 8, "name": "绿化弃料"},
-      {"value": 4, "name": "施工占道"},
-      {"value": 1, "name": "易腐垃圾"}
+      { "value": 12, "name": "乱丢垃圾" },
+      { "value": 2, "name": "施工噪声" },
+      { "value": 7, "name": "道路不洁" },
+      { "value": 3, "name": "施工废弃物" },
+      { "value": 8, "name": "绿化弃料" },
+      { "value": 4, "name": "施工占道" },
+      { "value": 1, "name": "易腐垃圾" }
     ]
   },
 
-
   "pipeAlarmDesc": "地下管线安全",
   "pipeAlarm": {
     "count": [
-      {"name": "报警", "value": 11, "unit": "次"},
-      {"name": "抢修", "value": 93, "unit": "次"},
-      {"name": "抢修率", "value": 84.5, "unit": "%"}
+      { "name": "报警", "value": 11, "unit": "次" },
+      { "name": "抢修", "value": 93, "unit": "次" },
+      { "name": "抢修率", "value": 84.5, "unit": "%" }
     ],
     "bar": {
-      "xData": ["液位超限", "噪声超限", "井盖开启", "燃气浓度超标", "消防栓开启", "有害气体超标"],
-      "yData": [10, 17, 24, 26, 14,20]
+      "xData": [
+        "液位超限",
+        "噪声超限",
+        "井盖开启",
+        "燃气浓度超标",
+        "消防栓开启",
+        "有害气体超标"
+      ],
+      "yData": [10, 17, 24, 26, 14, 20]
     },
     "pie": [
-      {"value": 34, "name": "潭东镇"},
-      {"value": 27, "name": "潭口镇"},
-      {"value": 59, "name": "高校园区管理处"}
+      { "value": 34, "name": "潭东镇" },
+      { "value": 27, "name": "潭口镇" },
+      { "value": 59, "name": "高校园区管理处" }
     ],
     "line": {
       "week": {
         "xData": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
         "yData": [
-          {"name": "井盖开启", "data": [120, 252, 101, 134, 290, 230, 110], "color": "255,45,85"},
-          {"name": "液位超限", "data": [120, 222, 191, 234, 250, 200, 310], "color": "0,144,255"},
-          {"name": "燃气泄漏", "data": [120, 21, 12, 10, 8, 12, 6], "color": "255,204,0"}
+          {
+            "name": "井盖开启",
+            "data": [120, 252, 101, 134, 290, 230, 110],
+            "color": "255,45,85"
+          },
+          {
+            "name": "液位超限",
+            "data": [120, 222, 191, 234, 250, 200, 310],
+            "color": "0,144,255"
+          },
+          {
+            "name": "燃气泄漏",
+            "data": [120, 21, 12, 10, 8, 12, 6],
+            "color": "255,204,0"
+          }
         ]
       },
       "month": {
-        "xData": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"],
+        "xData": [
+          "1",
+          "2",
+          "3",
+          "4",
+          "5",
+          "6",
+          "7",
+          "8",
+          "9",
+          "10",
+          "11",
+          "12",
+          "13",
+          "14",
+          "15",
+          "16",
+          "17",
+          "18",
+          "19",
+          "20",
+          "21",
+          "22",
+          "23",
+          "24",
+          "25",
+          "26",
+          "27",
+          "28",
+          "29",
+          "30"
+        ],
         "yData": [
-          {"name": "井盖开启", "data": [120, 252, 101, 134, 290, 230, 110, 120, 252, 101, 134, 290, 230, 110,120, 252, 101, 134, 290, 230, 110, 120, 252, 101, 134, 290, 230, 110, 220, 30], "color": "255,45,85"},
-          {"name": "液位超限", "data": [120, 222, 191, 234, 250, 200, 310, 120, 222, 191, 234, 250, 200, 310, 120, 222, 191, 234, 250, 200, 310, 120, 222, 191, 234, 250, 200, 310, 452, 160], "color": "0,144,255"},
-          {"name": "燃气泄漏", "data": [120, 21, 12, 10, 8, 12, 6, 120, 21, 12, 10, 8, 12, 6, 120, 21, 12, 10, 8, 12, 6, 120, 21, 12, 10, 8, 12, 6, 15, 45], "color": "255,204,0"}
+          {
+            "name": "井盖开启",
+            "data": [
+              120,
+              252,
+              101,
+              134,
+              290,
+              230,
+              110,
+              120,
+              252,
+              101,
+              134,
+              290,
+              230,
+              110,
+              120,
+              252,
+              101,
+              134,
+              290,
+              230,
+              110,
+              120,
+              252,
+              101,
+              134,
+              290,
+              230,
+              110,
+              220,
+              30
+            ],
+            "color": "255,45,85"
+          },
+          {
+            "name": "液位超限",
+            "data": [
+              120,
+              222,
+              191,
+              234,
+              250,
+              200,
+              310,
+              120,
+              222,
+              191,
+              234,
+              250,
+              200,
+              310,
+              120,
+              222,
+              191,
+              234,
+              250,
+              200,
+              310,
+              120,
+              222,
+              191,
+              234,
+              250,
+              200,
+              310,
+              452,
+              160
+            ],
+            "color": "0,144,255"
+          },
+          {
+            "name": "燃气泄漏",
+            "data": [
+              120,
+              21,
+              12,
+              10,
+              8,
+              12,
+              6,
+              120,
+              21,
+              12,
+              10,
+              8,
+              12,
+              6,
+              120,
+              21,
+              12,
+              10,
+              8,
+              12,
+              6,
+              120,
+              21,
+              12,
+              10,
+              8,
+              12,
+              6,
+              15,
+              45
+            ],
+            "color": "255,204,0"
+          }
         ]
       }
     }
   },
 
-
   "truckDesc": "渣土车管理",
   "truck": {
     "count": [
-      {"name": "渣土车", "value": 78, "unit": "辆"},
-      {"name": "在线数", "value": 53, "unit": "辆"},
-      {"name": "在线率", "value": 67.9, "unit": "%"}
+      { "name": "渣土车", "value": 78, "unit": "辆" },
+      { "name": "在线数", "value": 53, "unit": "辆" },
+      { "name": "在线率", "value": 67.9, "unit": "%" }
     ],
     "table": [
       ["超越电子围栏", 15, "11.9%"],
@@ -239,29 +444,89 @@
       ["区域放行", 40, "31%"]
     ],
     "line": {
-      "week": [{"name": "违章次数", "data": [120, 253, 121, 134, 290, 230, 110], "color": "255,45,85"}],
-      "month": [{"name": "违章次数", "data": [3120, 3101, 3134, 3290, 3230, 3110, 3252,3101,3134,3190,3230,3110,3134,3230,3101,3134,3190,3230,3110,3134,3230,3101,3134,3190,3230,3110,3134,3230, 3111, 3222], "color": "255,45,85"}],
-      "year": [{"name": "违章次数", "data": [3120, 3101, 3134, 3290, 3230, 3110, 3252,3101,3134,3111,3211,3121], "color": "255,45,85"}]
+      "week": [
+        {
+          "name": "违章次数",
+          "data": [120, 253, 121, 134, 290, 230, 110],
+          "color": "255,45,85"
+        }
+      ],
+      "month": [
+        {
+          "name": "违章次数",
+          "data": [
+            3120,
+            3101,
+            3134,
+            3290,
+            3230,
+            3110,
+            3252,
+            3101,
+            3134,
+            3190,
+            3230,
+            3110,
+            3134,
+            3230,
+            3101,
+            3134,
+            3190,
+            3230,
+            3110,
+            3134,
+            3230,
+            3101,
+            3134,
+            3190,
+            3230,
+            3110,
+            3134,
+            3230,
+            3111,
+            3222
+          ],
+          "color": "255,45,85"
+        }
+      ],
+      "year": [
+        {
+          "name": "违章次数",
+          "data": [
+            3120,
+            3101,
+            3134,
+            3290,
+            3230,
+            3110,
+            3252,
+            3101,
+            3134,
+            3111,
+            3211,
+            3121
+          ],
+          "color": "255,45,85"
+        }
+      ]
     }
   },
 
-
   "lampDesc": "城市路灯",
   "lamp": {
     "count": [
-      {"name": "路灯", "value": 1227, "unit": "个"},
-      {"name": "亮灯率", "value": 93, "unit": "%"},
-      {"name": "能耗", "value": 5477.3, "unit": "千瓦时"}
+      { "name": "路灯", "value": 1227, "unit": "个" },
+      { "name": "亮灯率", "value": 93, "unit": "%" },
+      { "name": "能耗", "value": 5477.3, "unit": "千瓦时" }
     ],
     "line": "路灯能耗统计取接口",
     "pie": [
-      {"value": 315, "name": "潭东镇"},
-      {"value": 436, "name": "潭口镇"},
-      {"value": 476, "name": "高校园区管理处"}
+      { "value": 315, "name": "潭东镇" },
+      { "value": 436, "name": "潭口镇" },
+      { "value": 476, "name": "高校园区管理处" }
     ]
   },
 
-
   "trafficDesc": "---------------------------交通--------------------------------",
   "traffic": {
     "introduceDesc": "交通概况",
@@ -274,7 +539,6 @@
       "time": 0.02
     },
 
-
     "safeDesc": "交通安全指数",
     "safe": {
       "gem": {
@@ -332,43 +596,69 @@
       },
 
       "line": {
-        "xData": ["周一","周二","周三","周四","周五","周六", "周日"],
+        "xData": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
         "yData": [
-          {"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"}
+          {
+            "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": {
         "xData": ["潭东镇", "潭口镇", "高校园区"],
-        "yData": [ 1.8, 2.3, 3.4 ]
+        "yData": [1.8, 2.3, 3.4]
       }
     },
 
     "eventDesc": "交通事件",
     "event": {
       "count": [
-        {"name": "事件总数", "value": 101, "unit": "个"},
-        {"name": "现场执法数量", "value": 76, "unit": "个"},
-        {"name": "非现场执法数量", "value": 25, "unit": "个"}
+        { "name": "事件总数", "value": 101, "unit": "个" },
+        { "name": "现场执法数量", "value": 76, "unit": "个" },
+        { "name": "非现场执法数量", "value": 25, "unit": "个" }
       ],
       "rank": [
-        {"value": 17, "name": "追尾"},
-        {"value": 12, "name": "超车"},
-        {"value": 10, "name": "直行"},
-        {"value": 8, "name": "左转弯"},
-        {"value": 4, "name": "右转弯"}
+        { "value": 17, "name": "追尾" },
+        { "value": 12, "name": "超车" },
+        { "value": 10, "name": "直行" },
+        { "value": 8, "name": "左转弯" },
+        { "value": 4, "name": "右转弯" }
       ],
       "pie": [
-        {"value": 30, "name": "潭东镇"},
-        {"value": 14, "name": "潭口镇"},
-        {"value": 57, "name": "高校园区"}
+        { "value": 30, "name": "潭东镇" },
+        { "value": 14, "name": "潭口镇" },
+        { "value": 57, "name": "高校园区" }
       ],
       "line": {
         "xData": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
-        "yData": [{"name": "事故数量", "data": [120, 252, 101, 134, 290, 230, 110], "color": "255,45,85"}]
+        "yData": [
+          {
+            "name": "事故数量",
+            "data": [120, 252, 101, 134, 290, 230, 110],
+            "color": "255,45,85"
+          }
+        ]
       }
     },
 
@@ -377,13 +667,19 @@
     "trafficPeccancyDesc": "交通违章",
     "trafficPeccancy": {
       "count": [
-        {"name": "今日违章", "value": 1476, "unit": "个"},
-        {"name": "本月违章", "value": 42537, "unit": "个"},
-        {"name": "全年违章", "value": 488828, "unit": "个"}
+        { "name": "今日违章", "value": 1476, "unit": "个" },
+        { "name": "本月违章", "value": 42537, "unit": "个" },
+        { "name": "全年违章", "value": 488828, "unit": "个" }
       ],
       "line": {
         "xData": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
-        "yData": [{"name": "事故数量", "data": [120, 252, 101, 134, 290, 230, 110], "color": "255,45,85"}]
+        "yData": [
+          {
+            "name": "事故数量",
+            "data": [120, 252, 101, 134, 290, 230, 110],
+            "color": "255,45,85"
+          }
+        ]
       },
       "table": [
         ["摩托车未带头盔", 346, "<span class=\"span-red\">80%</span>"],
@@ -396,32 +692,30 @@
         ["其他", 822, "20%"]
       ],
       "pie": [
-        {"value": 436, "name": "潭东镇"},
-        {"value": 257, "name": "潭口镇"},
-        {"value": 734, "name": "高校园区"}
+        { "value": 436, "name": "潭东镇" },
+        { "value": 257, "name": "潭口镇" },
+        { "value": 734, "name": "高校园区" }
       ]
     },
 
-
-
     "videoDesc": "视频网管",
     "video": {
-      "total": {"name": "监控总数", "value": 3587, "unit": "个"},
-      "hd": {"name": "高清", "value": 1037, "unit": "个"},
-      "md": {"name": "标清", "value": 2550, "unit": "个"},
-      "online": {"name": "在线", "value": 3208, "unit": "个"},
-      "offline": {"name": "离线", "value": 379, "unit": "个"},
-      "onlineRate": {"name": "在线率", "value": 89.4, "unit": "%"}
+      "total": { "name": "监控总数", "value": 3587, "unit": "个" },
+      "hd": { "name": "高清", "value": 1037, "unit": "个" },
+      "md": { "name": "标清", "value": 2550, "unit": "个" },
+      "online": { "name": "在线", "value": 3208, "unit": "个" },
+      "offline": { "name": "离线", "value": 379, "unit": "个" },
+      "onlineRate": { "name": "在线率", "value": 89.4, "unit": "%" }
     },
 
     "environmentDesc": "智慧环卫",
     "environment": {
-      "dev": {"name": "环卫设施", "value": 56, "unit": "个"},
-      "work": {"name": "环卫工作", "value": 36, "unit": "件"},
-      "complete": {"name": "工作完成数", "value": 24, "unit": "件"},
-      "rate": {"name": "工作完成率", "value": 67, "unit": "%"},
-      "person": {"name": "环卫人员", "value": 142, "unit": "人"},
-      "car": {"name": "环卫车", "value": 37, "unit": "辆"}
+      "dev": { "name": "环卫设施", "value": 56, "unit": "个" },
+      "work": { "name": "环卫工作", "value": 36, "unit": "件" },
+      "complete": { "name": "工作完成数", "value": 24, "unit": "件" },
+      "rate": { "name": "工作完成率", "value": 67, "unit": "%" },
+      "person": { "name": "环卫人员", "value": 142, "unit": "人" },
+      "car": { "name": "环卫车", "value": 37, "unit": "辆" }
     }
   }
 }
diff --git a/static/industrialEconomy.json b/static/industrialEconomy.json
index dbcc95a..423a2bf 100644
--- a/static/industrialEconomy.json
+++ b/static/industrialEconomy.json
@@ -50,6 +50,23 @@
         {"value": 3, "name": "代理商"},
         {"value": 1, "name": "其他"}
       ],
+      "table": {
+        "header": ["", "所属区域", "金融服务次数", "政策支持数量", "基础设施数量", "道路数量", "园林数量", "景点数量", "区人口总量"],
+        "data": [
+          ["潭东镇产业园区", "潭东镇", "135次/年", "12项", "18个", "20条", "4处", "2处", "约1.6万"],
+          ["潭东镇中心社区", "潭东镇", "160次/年", "9项", "22个", "25条", "6处", "3处", "约2.1万"],
+          ["潭东镇乡村片区", "潭东镇", "90次/年", "7项", "10个", "18条", "3处", "2处", "约1.21万"],
+          ["潭东镇商贸街区", "潭东镇", "85次/年", "6项", "9个", "12条", "2处", "1处", "约0.8万"],
+          ["潭口镇老街片区", "潭口镇", "110次/年", "8项", "15个", "16条", "3处", "2处", "约0.9万"],
+          ["潭口镇商贸新区", "潭口镇", "190次/年", "10项", "20个", "22条", "4处", "2处", "约1.2万"],
+          ["潭口镇乡村集中区", "潭口镇", "120次/年", "7项", "13个", "19条", "3处", "2处", "约0.87万"],
+          ["潭口镇工业园区", "潭口镇", "105次/年", "9项", "16个", "15条", "2处", "1处", "约0.4万"],
+          ["高校园区主校区周边", "高校园区工作组", "230次/年", "16项", "22个", "14条", "6处", "3处", "约4.5万"],
+          ["高校园区科创孵化区", "高校园区工作组", "200次/年", "12项", "18个", "12条", "5处", "2处", "约2.3万"],
+          ["高校园区人才社区", "高校园区工作组", "170次/年", "10项", "15个", "10条", "4处", "2处", "约1.2万"],
+          ["高校园区商业配套区", "高校园区工作组", "145次/年", "9项", "12个", "9条", "3处", "1处", "约0.5万"]
+        ]
+      },
       "bar": {
         "xAxisData": [ "上市企业", "高新技术企业", "国有企业", "重点企业","独角兽企业", "挂点企业"],
         "seriesData": [ 56, 72, 13, 8, 3, 21]

diff --git a/src/views/cityManage/cityManageLeft2.vue b/src/views/cityManage/cityManageLeft2.vue
index 36792e1..e7ac255 100644
--- a/src/views/cityManage/cityManageLeft2.vue
+++ b/src/views/cityManage/cityManageLeft2.vue
@@ -56,7 +56,9 @@
             </div>
             <!--多元化解-->
             <div class="modular-row-30">
-              <contradiction/>
+              <contradiction style="width: 49%;"/>
+              <RoadLine  style="width: 24%;"/>
+              <ThreeConstruction  style="width: 24%;"/>
             </div>
           </div><!-- .col50 over-->
           <!--./右半-->
@@ -90,12 +92,14 @@
 import ParkIntroduce from './components/parkingSystem/parkIntroduce'
 import ParkEarth from './components/parkingSystem/parkEarth'
 import ParkDetail from './components/parkingSystem/parkDetail'
-import ParkIncomeCount from "./components/parkingSystem/parkIncomeCount";
-import ParkFlowLine from "./components/parkingSystem/parkFlowLine";
-import ParkIncomeLine from "./components/parkingSystem/parkIncomLine";
-import Contradiction from "./components/contradiction/contradiction";
-import Service from "./components/service/service";
-import Youth from "./components/youth/youth";
+import ParkIncomeCount from './components/parkingSystem/parkIncomeCount'
+import ParkFlowLine from './components/parkingSystem/parkFlowLine'
+import ParkIncomeLine from './components/parkingSystem/parkIncomLine'
+import Contradiction from './components/contradiction/contradiction'
+import Service from './components/service/service'
+import Youth from './components/youth/youth'
+import RoadLine from './components/contradiction/components/roadLine.vue'
+import ThreeConstruction from './components/contradiction/components/threeConstruction.vue'
 export default {
   name: 'CityManageLeft',
   components: {
@@ -128,7 +132,9 @@
     Introduce,
     Corner1,
     wisdomTraffic,
-    eventCom
+    eventCom,
+    RoadLine,
+    ThreeConstruction
   },
   data () {
     return {
diff --git a/src/views/cityManage/components/contradiction/components/roadLine.vue b/src/views/cityManage/components/contradiction/components/roadLine.vue
new file mode 100644
index 0000000..b9a0d1a
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/roadLine.vue
@@ -0,0 +1,62 @@
+<template>
+  <chart-layout title="护路护线管理" @click="getData">
+    <div class="block-container">
+        <simple-pie-chart
+          :id="data.id"
+          :width="data.width"
+          :height="data.height"
+          :seriesData="data.data"
+        >
+        </simple-pie-chart>
+    </div>
+  </chart-layout>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SingleLayout from '@/components/layout/singleLayout'
+// import SimpleBlock from './components/simpleBlock'
+import ChartLayout from '@/components/layout/chartLayout'
+import mockData from '../../../../../../static/city.json'
+export default {
+  name: 'introduce',
+  components: {ChartLayout, SimplePieChart, SingleLayout},
+  data () {
+    return {
+      data: {
+        id: 'contradiction-pie',
+        width: '100%',
+        height: '100%',
+        legend: ['潭东镇', '潭口镇', '高校园区工作组'],
+        data: [
+          {'value': 0, 'name': '潭东镇'},
+          {'value': 0, 'name': '潭口镇'},
+          {'value': 0, 'name': '高校园区工作组'}
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  methods: {
+    getData () {
+      this.data.data = mockData.roadLinePie
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.block-container{
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 0.04rem;
+  .block{
+    width: 25%;
+    height: 45%;
+  }
+}
+</style>
diff --git a/src/views/cityManage/components/contradiction/components/threeConstruction.vue b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
new file mode 100644
index 0000000..266c61f
--- /dev/null
+++ b/src/views/cityManage/components/contradiction/components/threeConstruction.vue
@@ -0,0 +1,132 @@
+<template>
+  <chart-layout title="三项建设管理">
+    <!-- <div class="block-container"> -->
+      <div id="threeConstruction-bar" class="container" />
+    <!-- </div> -->
+  </chart-layout>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { automaticCarousel } from '@/utils/automaticCarousel'
+import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
+export default {
+  name: 'SocialStability',
+  data () {
+    return {
+      isShow: true,
+      myChart: null,
+      extend: {
+        color: [], // 动态填充颜色
+        legend: {
+          textStyle: { color: '#cce9ff', fontWeight: 'bold' },
+          data: [] // 动态填充图例
+        },
+        dataZoom: [
+          { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#092647',
+              borderColor: '#404a59',
+              borderWidth: 1,
+              textStyle: { color: '#ffffff', fontSize: 12 }
+            }
+          },
+          formatter: function (params) {
+            const date = params[0].axisValue
+            let content = `<div>${date}</div>`
+            params.forEach(item => {
+              content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
+            })
+            return content
+          }
+        },
+        grid: { left: '5%', right: '5%', bottom: '1%', top: '22%', containLabel: true },
+        xAxis: {
+          type: 'category',
+          axisLine: { lineStyle: { color: '#cce9ff' } },
+          axisLabel: { color: '#cce9ff' },
+          data: []
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: { lineStyle: { color: '#cce9ff' } },
+            axisLabel: { color: '#cce9ff' },
+            splitLine: {
+              show: true,
+              lineStyle: { color: ['#c8d0da'], type: 'dashed' }
+            }
+          }
+        ],
+        series: [] // 动态填充系列（折线+柱形）
+      }
+    }
+  },
+  mounted () {
+    this.myChart = echarts.init(document.getElementById('threeConstruction-bar'))
+    window.addEventListener('resize', () => {
+      this.myChart.resize()
+    })
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      const threeConstructionData = mockData.threeConstruction
+      console.log('-66666666666666666=', threeConstructionData)
+
+      // 1. 提取基础数据
+      const { year, threeConstructionTypes } = threeConstructionData
+      const threeConstructionTypeNames = Object.keys(threeConstructionTypes) // 所有事件类型名称
+      const threeConstructionTypeCount = threeConstructionTypeNames.length // 柱形图数量
+
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        ...COLOR_POOL.slice(0, threeConstructionTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = year
+
+      // 5. 动态生成series
+      this.extend.series = []
+
+      // 循环添加柱形图系列（每个事件类型一个柱形）
+      threeConstructionTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index] },
+          data: threeConstructionTypes[typeName]
+        })
+      })
+      const showCount = mockData.threeConstruction.showDataCount + '' ? mockData.threeConstruction.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
+    }
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', () => {})
+    this.myChart.dispose()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/cityManage/components/introduce/components/eventBarLine.vue b/src/views/cityManage/components/introduce/components/eventBarLine.vue
index ee8104d..b317147 100644
--- a/src/views/cityManage/components/introduce/components/eventBarLine.vue
+++ b/src/views/cityManage/components/introduce/components/eventBarLine.vue
@@ -1,11 +1,18 @@
 <template>
-  <div id="caseType-linebar" class="container"/>
+  <div id="event-Bar-Line" class="container" />
 </template>
 
 <script>
 import * as echarts from 'echarts'
 import { automaticCarousel } from '@/utils/automaticCarousel'
 import mockData from '../../../../../../static/city.json'
+
+// 颜色池：用于动态分配折线和柱形图颜色（可根据需要扩展）
+const COLOR_POOL = [
+  '#CEDE0F', // 折线图默认颜色
+  '#41B8FF', '#FF7D00', '#F53F3F', '#722ED1', '#00B42A', '#FF5722', '#1890FF'
+]
+
 export default {
   name: 'SocialStability',
   data () {
@@ -13,10 +20,10 @@
       isShow: true,
       myChart: null,
       extend: {
-        color: ['#CEDE0F', '#41B8FF', '#FF7D00', '#F53F3F'], // 事件类型颜色
+        color: [], // 动态填充颜色
         legend: {
           textStyle: { color: '#cce9ff', fontWeight: 'bold' },
-          data: ['事件总数趋势', '矛盾纠纷调解', '治安案件处置', '涉稳隐患排查', '反邪宣传与排查']
+          data: [] // 动态填充图例
         },
         dataZoom: [
           { xAxisIndex: 0, show: false, type: 'inside', startValue: 0, endValue: 5 }
@@ -33,7 +40,7 @@
             }
           },
           formatter: function (params) {
-            let date = params[0].axisValue
+            const date = params[0].axisValue
             let content = `<div>${date}</div>`
             params.forEach(item => {
               content += `<div>${item.marker}${item.seriesName}: ${item.value}</div>`
@@ -46,7 +53,7 @@
           type: 'category',
           axisLine: { lineStyle: { color: '#cce9ff' } },
           axisLabel: { color: '#cce9ff' },
-          data: [] // 月份数据后续填充
+          data: [] // 动态填充月份
         },
         yAxis: [
           {
@@ -59,95 +66,81 @@
             }
           }
         ],
-        series: [
-          // 1. 事件总数趋势（折线图）
-          {
-            name: '事件总数趋势',
-            type: 'line',
-            smooth: true,
-            symbol: 'circle',
-            symbolSize: 6,
-            color: '#CEDE0F',
-            data: [], // 后续填充
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0.5, color: '#CEDE0F' },
-                { offset: 1, color: 'rgba(10,25,124,0.2)' }
-              ])
-            }
-          },
-          // 2. 矛盾纠纷调解（柱状图）
-          {
-            name: '矛盾纠纷调解',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#41B8FF' },
-            data: [] // 后续填充
-          },
-          // 3. 治安案件处置（柱状图）
-          {
-            name: '治安案件处置',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#FF7D00' },
-            data: [] // 后续填充
-          },
-          // 4. 涉稳隐患排查（柱状图）
-          {
-            name: '涉稳隐患排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#F53F3F' },
-            data: [] // 后续填充
-          },
-          // 5. 反邪宣传与排查（柱状图）
-          {
-            name: '反邪宣传与排查',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: { color: '#722ED1' },
-            data: [] // 后续填充
-          }
-        ]
+        series: [] // 动态填充系列（折线+柱形）
       }
     }
   },
   mounted () {
-    this.myChart = echarts.init(document.getElementById('caseType-linebar'))
+    this.myChart = echarts.init(document.getElementById('event-Bar-Line'))
     window.addEventListener('resize', () => {
-      if (this.myChart) this.myChart.resize()
+      this.myChart.resize()
     })
     this.fetchData()
   },
   methods: {
     fetchData () {
-      // 社会稳定和政治安全专项事件数据（模拟）
       const eventData = mockData.eventData
+      // 1. 提取基础数据
+      const { month, trend, eventTypes } = eventData
+      const eventTypeNames = Object.keys(eventTypes) // 所有事件类型名称
+      const eventTypeCount = eventTypeNames.length // 柱形图数量
 
-      // 填充X轴月份
-      this.extend.xAxis.data = eventData.month
-      // 填充折线图（事件总数趋势）
-      this.extend.series[0].data = eventData.trendData
-      // 填充柱状图（各事件类型）
-      this.extend.series[1].data = eventData.eventTypeData['矛盾纠纷调解']
-      this.extend.series[2].data = eventData.eventTypeData['治安案件处置']
-      this.extend.series[3].data = eventData.eventTypeData['涉稳隐患排查']
-      this.extend.series[4].data = eventData.eventTypeData['反邪宣传与排查']
+      // 2. 动态分配颜色（折线1种 + 柱形N种）
+      this.extend.color = [
+        COLOR_POOL[0], // 折线图颜色
+        ...COLOR_POOL.slice(1, 1 + eventTypeCount) // 柱形图颜色（从颜色池取后续颜色）
+      ]
 
-      // 渲染图表
-      // this.myChart.setOption(this.extend, true)
-      automaticCarousel(this.extend, this.myChart, 3000, 3)
+      // 3. 动态生成图例（折线名称 + 所有事件类型名称）
+      this.extend.legend.data = [trend.name, ...eventTypeNames]
+
+      // 4. 填充X轴月份
+      this.extend.xAxis.data = month
+
+      // 5. 动态生成series（先折线，后柱形）
+      this.extend.series = []
+
+      // 5.1 添加折线图系列
+      this.extend.series.push({
+        name: trend.name,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        color: this.extend.color[0], // 用第一种颜色
+        data: trend.data,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0.5, color: this.extend.color[0] },
+            { offset: 1, color: 'rgba(10,25,124,0.2)' }
+          ])
+        }
+      })
+
+      // 5.2 循环添加柱形图系列（每个事件类型一个柱形）
+      eventTypeNames.forEach((typeName, index) => {
+        this.extend.series.push({
+          name: typeName,
+          type: 'bar',
+          barWidth: 15,
+          itemStyle: { color: this.extend.color[index + 1] }, // 柱形颜色从第二种开始
+          data: eventTypes[typeName]
+        })
+      })
+      const showCount = mockData.showDataCount + '' ? mockData.showDataCount : 3
+      // 6. 渲染图表（带自动轮播）
+      automaticCarousel(this.extend, this.myChart, 3000, showCount)
     }
   },
   beforeDestroy () {
     window.removeEventListener('resize', () => {})
-    if (this.myChart) this.myChart.dispose()
+    this.myChart.dispose()
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.container{
+.container {
   width: 100%;
   height: 100%;
 }
diff --git a/src/views/industrialEconomy/components/commercial/commercial.vue b/src/views/industrialEconomy/components/commercial/commercial.vue
index 95fa443..8e14d51 100644
--- a/src/views/industrialEconomy/components/commercial/commercial.vue
+++ b/src/views/industrialEconomy/components/commercial/commercial.vue
@@ -6,13 +6,16 @@
 <template>
   <chart-layout title="营商环境" @click="getData">
     <div class="block-container">
-      <div class="block" style="width:20%;height: 100%">
+      <!-- <div class="block" style="width:20%;height: 100%">
         <commercial-total/>
       </div>
       <div class="block" style="width:40%;height: 100%">
         <commercial-pie/>
+      </div> -->
+      <div class="block" style="width:60%">
+        <CommercialTable/>
       </div>
-      <div class="block" style="width:40%;height: 100%">
+      <div class="block" style="width:40%">
         <commercial-bar/>
       </div>
     </div>
@@ -24,12 +27,15 @@
 import CommercialTotal from './components/commercialTotal'
 import CommercialPie from './components/commercialPie'
 import CommercialBar from './components/commercialBar'
+import CommercialTable from './components/commercialTable.vue'
 export default {
   name: 'Expense',
   components: {
     CommercialBar,
     CommercialPie,
-    CommercialTotal},
+    CommercialTotal,
+    CommercialTable
+  },
   methods: {
     getData () {
       // this.$refs.ecardEarth.getData()
diff --git a/src/views/industrialEconomy/components/commercial/components/commercialTable.vue b/src/views/industrialEconomy/components/commercial/components/commercialTable.vue
new file mode 100644
index 0000000..a7d1a9f
--- /dev/null
+++ b/src/views/industrialEconomy/components/commercial/components/commercialTable.vue
@@ -0,0 +1,74 @@
+<template>
+  <div style="width: 100%;height:100%;padding:0.1rem;">
+    <scroll-board :config="boardConfig"/>
+  </div>
+</template>
+
+<script>
+import SimplePieChart from '@/components/pieChart/simplePieChart'
+import Corner1 from '@/components/corner/Corner1'
+import ChartLayout from '@/components/layout/chartLayout'
+import {fetchTruckCaseByType} from '@/api/cityManage'
+import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/industrialEconomy.json'
+export default {
+  name: 'TruckCaseDetail',
+  components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
+  data () {
+    return {
+      boardConfig: {
+        header: ['', '所属区域', '金融服务次数', '政策支持数量', '基础设施数量', '道路数量', '园林数量', '景点数量', '区人口总量'],
+        rowNum: 4,
+        hoverColor: true,
+        headerBGC: 'rgba(46,145,244,0.4)',
+        oddRowBGC: 'transparent',
+        evenRowBGC: '#030737',
+        headerColor: '#00F0FF',
+        rowColor: '#FFFFFF',
+        headerFontSize: '0.072rem', // 表头字体大小
+        rowFontSize: '0.07rem', // 行字体大小
+        columnWidth: [160],
+        data: [
+          ['潭东镇产业园区', '潭东镇', '135次/年', '12项', '18个', '20条', '4处', '2处', '约1.6万'],
+          ['潭东镇中心社区', '潭东镇', '160次/年', '9项', '22个', '25条', '6处', '3处', '约2.1万'],
+          ['潭东镇乡村片区', '潭东镇', '90次/年', '7项', '10个', '18条', '3处', '2处', '约1.21万'],
+          ['潭东镇商贸街区', '潭东镇', '85次/年', '6项', '9个', '12条', '2处', '1处', '约0.8万'],
+          ['潭口镇老街片区', '潭口镇', '110次/年', '8项', '15个', '16条', '3处', '2处', '约0.9万'],
+          ['潭口镇商贸新区', '潭口镇', '190次/年', '10项', '20个', '22条', '4处', '2处', '约1.2万'],
+          ['潭口镇乡村集中区', '潭口镇', '120次/年', '7项', '13个', '19条', '3处', '2处', '约0.87万'],
+          ['潭口镇工业园区', '潭口镇', '105次/年', '9项', '16个', '15条', '2处', '1处', '约0.4万'],
+          ['高校园区主校区周边', '高校园区工作组', '230次/年', '16项', '22个', '14条', '6处', '3处', '约4.5万'],
+          ['高校园区科创孵化区', '高校园区工作组', '200次/年', '12项', '18个', '12条', '5处', '2处', '约2.3万'],
+          ['高校园区人才社区', '高校园区工作组', '170次/年', '10项', '15个', '10条', '4处', '2处', '约1.2万'],
+          ['高校园区商业配套区', '高校园区工作组', '145次/年', '9项', '12个', '9条', '3处', '1处', '约0.5万']
+        ]
+      }
+    }
+  },
+  created () {
+    // this.getData()
+    this.boardConfig.header = mockData.left.commercial.table.header
+    this.boardConfig.data = mockData.left.commercial.table.data
+  },
+  methods: {
+    getData () {
+      fetchTruckCaseByType().then(response => {
+        if (response.code === 200) {
+          const data = response.data
+          const list = data.map(item => {
+            return [item.name, item.num, item.rate + '%']
+          })
+          this.boardConfig.data = list
+          const boardConfig = this.boardConfig
+          // this.$set(this, 'boardConfig', boardConfig)
+          this.boardConfig = Object.assign({}, boardConfig)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/views/industrialEconomy/components/daily/components/dailyCount.vue b/src/views/industrialEconomy/components/daily/components/dailyCount.vue
index 79b57f9..bd64a9a 100644
--- a/src/views/industrialEconomy/components/daily/components/dailyCount.vue
+++ b/src/views/industrialEconomy/components/daily/components/dailyCount.vue
@@ -8,6 +8,7 @@
 
 <script>
 import ImageBlock2 from '@/components/block/imageBlock2'
+import mockData from '../../../../../../static/industrialEconomy.json'
 export default {
   name: 'DailyCount',
   components: {ImageBlock2},
@@ -26,7 +27,7 @@
   },
   methods: {
     getData () {
-
+      this.data = mockData.left.index.count
     }
 
   }
diff --git a/src/views/industrialEconomy/components/daily/daily.vue b/src/views/industrialEconomy/components/daily/daily.vue
index 7b9de8c..000b2f5 100644
--- a/src/views/industrialEconomy/components/daily/daily.vue
+++ b/src/views/industrialEconomy/components/daily/daily.vue
@@ -1,7 +1,7 @@
 <template>
   <chart-layout title="产业指数" @click="getData">
     <div class="block-container">
-      <div class="block" style="width:50%">
+      <div class="block" style="width:100%">
         <daily-count/>
       </div>
     </div>
diff --git a/src/views/industrialEconomy/industrialEconomyLeft.vue b/src/views/industrialEconomy/industrialEconomyLeft.vue
index 0f9b1d3..6047108 100644
--- a/src/views/industrialEconomy/industrialEconomyLeft.vue
+++ b/src/views/industrialEconomy/industrialEconomyLeft.vue
@@ -9,7 +9,7 @@
               <indicator/>
             </div>
             <div class="modular-row-30">
-              <div class="modular-col-60 modular-padding-right">
+              <div class="modular-col-100 modular-padding-right">
                 <commercial/>
               </div>
               <div class="modular-col-30">
diff --git a/src/views/industrialEconomy/industrialEconomyRight.vue b/src/views/industrialEconomy/industrialEconomyRight.vue
index 848b398..e23cbc5 100644
--- a/src/views/industrialEconomy/industrialEconomyRight.vue
+++ b/src/views/industrialEconomy/industrialEconomyRight.vue
@@ -32,10 +32,10 @@
 import Enterprise from './components/enterprise/enterprise'
 import Commercial from './components/commercial/commercial'
 import Daily from './components/daily/daily'
-import Expense from "./components/expense/expense";
-import Structure from "./components/structure/structure";
-import Building from "./components/building/building";
-import Assets from "./components/assets/assets";
+import Expense from './components/expense/expense'
+import Structure from './components/structure/structure'
+import Building from './components/building/building'
+import Assets from './components/assets/assets'
 export default {
   name: 'industrialEconomyRight',
   components: {
diff --git a/src/views/socialLive/components/education/components/peopleCount.vue b/src/views/socialLive/components/education/components/peopleCount.vue
index 3905ca6..5b2c9e7 100644
--- a/src/views/socialLive/components/education/components/peopleCount.vue
+++ b/src/views/socialLive/components/education/components/peopleCount.vue
@@ -25,7 +25,8 @@
       data: {
         child: {name: '幼儿', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
         pupil: {name: '小学生', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
-        student: {name: '中学生', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
+        student: {name: '初中生', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
+        highSchoolStudent: {name: '高中生', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
         teacher: {name: '教职工', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')}
       }
     }
@@ -36,6 +37,7 @@
     this.data.pupil.value = mockData.right.education.countRight.pupil
     this.data.student.value = mockData.right.education.countRight.student
     this.data.teacher.value = mockData.right.education.countRight.teacher
+    this.data.highSchoolStudent.value = mockData.right.education.countRight.highSchoolStudent
   },
   methods: {
     getData () {
diff --git a/src/views/socialLive/components/hospital/hospital.vue b/src/views/socialLive/components/hospital/hospital.vue
index f8c3965..023ee71 100644
--- a/src/views/socialLive/components/hospital/hospital.vue
+++ b/src/views/socialLive/components/hospital/hospital.vue
@@ -4,10 +4,10 @@
  * @Date: 2020-11-18 10:10:06
  -->
 <template>
-  <chart-layout title="智慧医疗" @click="getData">
+  <chart-layout title="智慧医疗" @click="getData" style="height: 100%;">
     <div class="block-container">
-      <div class="block" style="width:40%">
-        <hospital-count ref="hospitalCount"/>
+      <div class="block" style="width:40%;height: 100%;">
+        <hospital-count ref="hospitalCount" style="height: 100%;"/>
       </div>
       <div class="block" style="width:60%;display:flex;flex-direction:column;flex-wrap: wrap;justify-content: space-between;">
         <!--<div style="width:100%;flex:1">-->
diff --git a/static/city.json b/static/city.json
index 0b8cf12..20485f8 100644
--- a/static/city.json
+++ b/static/city.json
@@ -8,27 +8,24 @@
     "zanzhu": 26752
   },
 
-
   "specialPopulationsDesc": "特殊人群",
   "specialPopulations": [
-    {"value": 72, "name": "社区矫正人员"},
-    {"value": 34, "name": "刑满释放人员"},
-    {"value": 2, "name": "吸毒人员"},
-    {"value": 156, "name": "精神障碍患者"}
+    { "value": 72, "name": "社区矫正人员" },
+    { "value": 34, "name": "刑满释放人员" },
+    { "value": 2, "name": "吸毒人员" },
+    { "value": 156, "name": "精神障碍患者" }
   ],
 
-
   "psychosocialServicesDesc": "社会心理服务",
   "psychosocialServices": {
     "count": [
-      {"name": "今日服务", "value": 2, "unit": "次"},
-      {"name": "本月服务", "value": 53, "unit": "次"},
-      {"name": "全年服务", "value": 187, "unit": "次"}
+      { "name": "今日服务", "value": 2, "unit": "次" },
+      { "name": "本月服务", "value": 53, "unit": "次" },
+      { "name": "全年服务", "value": 187, "unit": "次" }
     ],
-    "line": [3,1,1,2,3,1,2]
+    "line": [3, 1, 1, 2, 3, 1, 2]
   },
 
-
   "overallOverviewDesc": "整体概况",
   "overallOverview": {
     "totalArea": 130,
@@ -43,9 +40,26 @@
 
   "eventDataDesc": "事件数量及趋势",
   "eventData": {
-    "month": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
-    "trendData": [28, 22, 35, 40, 44, 40, 32, 28, 36, 40, 34, 28],
-    "eventTypeData": {
+    "month": [
+      "1月",
+      "2月",
+      "3月",
+      "4月",
+      "5月",
+      "6月",
+      "7月",
+      "8月",
+      "9月",
+      "10月",
+      "11月",
+      "12月"
+    ],
+    "trend": {
+      "name": "事件总数趋势",
+      "data": [28, 22, 35, 40, 44, 40, 32, 28, 36, 40, 34, 28]
+    },
+    "showDataCount": 3,
+    "eventTypes": {
       "矛盾纠纷调解": [12, 9, 15, 18, 22, 19, 16, 14, 17, 20, 18, 15],
       "治安案件处置": [8, 6, 10, 12, 9, 11, 8, 7, 9, 10, 8, 7],
       "涉稳隐患排查": [5, 4, 6, 7, 8, 6, 5, 4, 6, 7, 5, 4],
@@ -61,31 +75,30 @@
     { "name": "反邪宣传与排查", "value": 4 }
   ],
 
-
   "adolescentDesc": "青少年犯罪与校园安全",
   "adolescent": {
     "count": [
-      {"name": "重点青少年", "value": 203, "unit": "人"},
-      {"name": "平均年龄", "value": 11.4, "unit": "岁"},
-      {"name": "违法数", "value": 452, "unit": "个"}
+      { "name": "重点青少年", "value": 203, "unit": "人" },
+      { "name": "平均年龄", "value": 11.4, "unit": "岁" },
+      { "name": "违法数", "value": 452, "unit": "个" },
+      { "name": "上门服务次数", "value": 232, "unit": "次" }
     ],
     "crimeTrendsDesc": "犯罪趋势",
-    "crimeTrends": [1,0,2,0,0,3,1],
+    "crimeTrends": [1, 0, 2, 0, 0, 3, 1],
     "schoolCount": [
-      {"name": "校园", "value": 7, "unit": "个"},
-      {"name": "校园安保", "value": 36, "unit": "人"},
-      {"name": "校园事件", "value": 23, "unit": "个"}
+      { "name": "校园", "value": 7, "unit": "个" },
+      { "name": "校园安保", "value": 36, "unit": "人" },
+      { "name": "校园事件", "value": 23, "unit": "个" }
     ],
-    "schoolEventTrends": [0,0,1,0,2,0,0],
+    "schoolEventTrends": [0, 0, 1, 0, 2, 0, 0],
     "schoolEventPercent": [
-      {"value": 52.17, "name": "活动事件"},
-      {"value": 8.7, "name": "卫生事件"},
-      {"value": 4.35, "name": "消防事件"},
-      {"value": 34.78, "name": "其他事件"}
+      { "value": 52.17, "name": "活动事件" },
+      { "value": 8.7, "name": "卫生事件" },
+      { "value": 4.35, "name": "消防事件" },
+      { "value": 34.78, "name": "其他事件" }
     ]
   },
 
-
   "diversifiedSolutionsDesc": "多元化解",
   "diversifiedSolutions": {
     "count": [
@@ -96,38 +109,79 @@
     "contradictionTrends": {
       "xData": ["1月", "2月", "3月", "4月"],
       "yData": [
-        {"name": "案件总数", "data": [11,20,8,12], "color": "255,45,85"},
-        {"name": "处理数", "data": [9,15,7,10], "color": "0,144,255"}
+        { "name": "案件总数", "data": [11, 20, 8, 12], "color": "255,45,85" },
+        { "name": "处理数", "data": [9, 15, 7, 10], "color": "0,144,255" }
       ]
     },
     "contradictionPercent": [
-      {"value": 34, "name": "民事纠纷"},
-      {"value": 5, "name": "行政纠纷"},
-      {"value": 1, "name": "涉法纠纷"},
-      {"value": 11, "name": "其他纠纷"}
+      { "value": 34, "name": "民事纠纷" },
+      { "value": 5, "name": "行政纠纷" },
+      { "value": 1, "name": "涉法纠纷" },
+      { "value": 11, "name": "其他纠纷" }
     ]
   },
 
+  "roadLineDesc": "护线护路管理",
+  "roadLinePie": [
+    { "value": 1001, "name": "潭东镇" },
+    { "value": 1423, "name": "潭口镇" },
+    { "value": 865, "name": "高校园区工作组" }
+  ],
 
+  "threeConstructionDesc": "三项建设管理",
+  "threeConstruction": {
+    "year": ["2022年", "2023年", "2024年", "2025年"],
+    "showDataCount": 2,
+    "threeConstructionTypes": {
+      "综治中心建设": [6, 12, 18, 8],
+      "网格覆盖社区数": [20, 30, 36, 16],
+      "专职网格员数量": [50, 86, 120, 32],
+      "信息化系统上线数": [3, 8, 15, 2],
+      "智能设备安装数": [120, 180, 200, 68]
+    }
+  },
 
   "title-right-1": "=======================城市治理--右半屏==============================",
   "urbanManagementDesc": "---------------------------城管执法--------------------------------",
   "urbanManagement": {
     "mobileCaseCount": [
-      {"name": "立案数", "value": "152", "unit": "个"},
-      {"name": "结案数", "value": "131", "unit": "个"},
-      {"name": "待结案", "value": "21", "unit": "个"}
+      { "name": "立案数", "value": "152", "unit": "个" },
+      { "name": "结案数", "value": "131", "unit": "个" },
+      { "name": "待结案", "value": "21", "unit": "个" }
     ],
     "mobileCaseBar": {
       "week": ["12", "13", "11", "16", "13", "22", "13"],
-      "month": ["12", "32", "13", "41", "15", "16", "7", "8", "9", "10", "11", "12", "13", "24", "15", "16", "27", "18", "19", "20", "21", "22"]
+      "month": [
+        "12",
+        "32",
+        "13",
+        "41",
+        "15",
+        "16",
+        "7",
+        "8",
+        "9",
+        "10",
+        "11",
+        "12",
+        "13",
+        "24",
+        "15",
+        "16",
+        "27",
+        "18",
+        "19",
+        "20",
+        "21",
+        "22"
+      ]
     },
     "mobileCasePie": [
-      {"value": 103, "name": "潭中"},
-      {"value": 134, "name": "潭口"},
-      {"value": 214, "name": "高校园区"}
+      { "value": 103, "name": "潭中" },
+      { "value": 134, "name": "潭口" },
+      { "value": 214, "name": "高校园区" }
     ],
-    "table":  [
+    "table": [
       ["施工噪声", "6", "3", "1"],
       ["绿化弃料", "3", "2", "0"],
       ["道路不洁", "15", "18", "32"],
@@ -136,99 +190,250 @@
 
     "desc": "-----城管执法切换的第二张屏----------",
     "staffCount": [
-      {"name": "执法人员", "value": 37, "unit": "人"},
-      {"name": "在岗人员", "value": 32, "unit": "人"},
-      {"name": "出勤率", "value": 86.5, "unit": ""}
+      { "name": "执法人员", "value": 37, "unit": "人" },
+      { "name": "在岗人员", "value": 32, "unit": "人" },
+      { "name": "出勤率", "value": 86.5, "unit": "" }
     ],
     "staffBarDesc": "各区人员数量",
     "staffBar": [311, 55, 222],
 
-
     "inspectionCountDesc": "巡查情况总计",
     "inspectionCount": {
       "today": {
-        "count": {"name": "巡查次数", "value": 2, "unit": "次"},
-        "time": {"name": "巡查时间", "value": 3, "unit": "h"},
-        "distance": {"name": "巡查里程", "value": 12, "unit": "km"},
-        "case": {"name": "立案数", "value": 2, "unit": "件"},
-        "fines": {"name": "罚款金额", "value": 500, "unit": "元"}
+        "count": { "name": "巡查次数", "value": 2, "unit": "次" },
+        "time": { "name": "巡查时间", "value": 3, "unit": "h" },
+        "distance": { "name": "巡查里程", "value": 12, "unit": "km" },
+        "case": { "name": "立案数", "value": 2, "unit": "件" },
+        "fines": { "name": "罚款金额", "value": 500, "unit": "元" }
       },
       "month": {
-        "count": {"name": "巡查次数", "value": 58, "unit": "次"},
-        "time": {"name": "巡查时间", "value": 63, "unit": "h"},
-        "distance": {"name": "巡查里程", "value": 352, "unit": "km"},
-        "case": {"name": "立案数", "value": 31, "unit": "件"},
-        "fines": {"name": "罚款金额", "value": 6348, "unit": "元"}
+        "count": { "name": "巡查次数", "value": 58, "unit": "次" },
+        "time": { "name": "巡查时间", "value": 63, "unit": "h" },
+        "distance": { "name": "巡查里程", "value": 352, "unit": "km" },
+        "case": { "name": "立案数", "value": 31, "unit": "件" },
+        "fines": { "name": "罚款金额", "value": 6348, "unit": "元" }
       },
       "year": {
-        "count": {"name": "巡查次数", "value": 278, "unit": "次"},
-        "time": {"name": "巡查时间", "value": 302, "unit": "h"},
-        "distance": {"name": "巡查里程", "value": 1622, "unit": "km"},
-        "case": {"name": "立案数", "value": 152, "unit": "件"},
-        "fines": {"name": "罚款金额", "value": 13475, "unit": "元"}
+        "count": { "name": "巡查次数", "value": 278, "unit": "次" },
+        "time": { "name": "巡查时间", "value": 302, "unit": "h" },
+        "distance": { "name": "巡查里程", "value": 1622, "unit": "km" },
+        "case": { "name": "立案数", "value": 152, "unit": "件" },
+        "fines": { "name": "罚款金额", "value": 13475, "unit": "元" }
       }
     }
   },
 
-
   "socialSecurityDesc": "社会治安专项管理",
   "socialSecurity": {
     "desc": "图1、图2（案件趋势）使用接口",
     "socialSecurityRank": [
-      {"value": 12, "name": "乱丢垃圾"},
-      {"value": 2, "name": "施工噪声"},
-      {"value": 7, "name": "道路不洁"},
-      {"value": 3, "name": "施工废弃物"},
-      {"value": 8, "name": "绿化弃料"},
-      {"value": 4, "name": "施工占道"},
-      {"value": 1, "name": "易腐垃圾"}
+      { "value": 12, "name": "乱丢垃圾" },
+      { "value": 2, "name": "施工噪声" },
+      { "value": 7, "name": "道路不洁" },
+      { "value": 3, "name": "施工废弃物" },
+      { "value": 8, "name": "绿化弃料" },
+      { "value": 4, "name": "施工占道" },
+      { "value": 1, "name": "易腐垃圾" }
     ]
   },
 
-
   "pipeAlarmDesc": "地下管线安全",
   "pipeAlarm": {
     "count": [
-      {"name": "报警", "value": 11, "unit": "次"},
-      {"name": "抢修", "value": 93, "unit": "次"},
-      {"name": "抢修率", "value": 84.5, "unit": "%"}
+      { "name": "报警", "value": 11, "unit": "次" },
+      { "name": "抢修", "value": 93, "unit": "次" },
+      { "name": "抢修率", "value": 84.5, "unit": "%" }
     ],
     "bar": {
-      "xData": ["液位超限", "噪声超限", "井盖开启", "燃气浓度超标", "消防栓开启", "有害气体超标"],
-      "yData": [10, 17, 24, 26, 14,20]
+      "xData": [
+        "液位超限",
+        "噪声超限",
+        "井盖开启",
+        "燃气浓度超标",
+        "消防栓开启",
+        "有害气体超标"
+      ],
+      "yData": [10, 17, 24, 26, 14, 20]
     },
     "pie": [
-      {"value": 34, "name": "潭东镇"},
-      {"value": 27, "name": "潭口镇"},
-      {"value": 59, "name": "高校园区管理处"}
+      { "value": 34, "name": "潭东镇" },
+      { "value": 27, "name": "潭口镇" },
+      { "value": 59, "name": "高校园区管理处" }
     ],
     "line": {
       "week": {
         "xData": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
         "yData": [
-          {"name": "井盖开启", "data": [120, 252, 101, 134, 290, 230, 110], "color": "255,45,85"},
-          {"name": "液位超限", "data": [120, 222, 191, 234, 250, 200, 310], "color": "0,144,255"},
-          {"name": "燃气泄漏", "data": [120, 21, 12, 10, 8, 12, 6], "color": "255,204,0"}
+          {
+            "name": "井盖开启",
+            "data": [120, 252, 101, 134, 290, 230, 110],
+            "color": "255,45,85"
+          },
+          {
+            "name": "液位超限",
+            "data": [120, 222, 191, 234, 250, 200, 310],
+            "color": "0,144,255"
+          },
+          {
+            "name": "燃气泄漏",
+            "data": [120, 21, 12, 10, 8, 12, 6],
+            "color": "255,204,0"
+          }
         ]
       },
       "month": {
-        "xData": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"],
+        "xData": [
+          "1",
+          "2",
+          "3",
+          "4",
+          "5",
+          "6",
+          "7",
+          "8",
+          "9",
+          "10",
+          "11",
+          "12",
+          "13",
+          "14",
+          "15",
+          "16",
+          "17",
+          "18",
+          "19",
+          "20",
+          "21",
+          "22",
+          "23",
+          "24",
+          "25",
+          "26",
+          "27",
+          "28",
+          "29",
+          "30"
+        ],
         "yData": [
-          {"name": "井盖开启", "data": [120, 252, 101, 134, 290, 230, 110, 120, 252, 101, 134, 290, 230, 110,120, 252, 101, 134, 290, 230, 110, 120, 252, 101, 134, 290, 230, 110, 220, 30], "color": "255,45,85"},
-          {"name": "液位超限", "data": [120, 222, 191, 234, 250, 200, 310, 120, 222, 191, 234, 250, 200, 310, 120, 222, 191, 234, 250, 200, 310, 120, 222, 191, 234, 250, 200, 310, 452, 160], "color": "0,144,255"},
-          {"name": "燃气泄漏", "data": [120, 21, 12, 10, 8, 12, 6, 120, 21, 12, 10, 8, 12, 6, 120, 21, 12, 10, 8, 12, 6, 120, 21, 12, 10, 8, 12, 6, 15, 45], "color": "255,204,0"}
+          {
+            "name": "井盖开启",
+            "data": [
+              120,
+              252,
+              101,
+              134,
+              290,
+              230,
+              110,
+              120,
+              252,
+              101,
+              134,
+              290,
+              230,
+              110,
+              120,
+              252,
+              101,
+              134,
+              290,
+              230,
+              110,
+              120,
+              252,
+              101,
+              134,
+              290,
+              230,
+              110,
+              220,
+              30
+            ],
+            "color": "255,45,85"
+          },
+          {
+            "name": "液位超限",
+            "data": [
+              120,
+              222,
+              191,
+              234,
+              250,
+              200,
+              310,
+              120,
+              222,
+              191,
+              234,
+              250,
+              200,
+              310,
+              120,
+              222,
+              191,
+              234,
+              250,
+              200,
+              310,
+              120,
+              222,
+              191,
+              234,
+              250,
+              200,
+              310,
+              452,
+              160
+            ],
+            "color": "0,144,255"
+          },
+          {
+            "name": "燃气泄漏",
+            "data": [
+              120,
+              21,
+              12,
+              10,
+              8,
+              12,
+              6,
+              120,
+              21,
+              12,
+              10,
+              8,
+              12,
+              6,
+              120,
+              21,
+              12,
+              10,
+              8,
+              12,
+              6,
+              120,
+              21,
+              12,
+              10,
+              8,
+              12,
+              6,
+              15,
+              45
+            ],
+            "color": "255,204,0"
+          }
         ]
       }
     }
   },
 
-
   "truckDesc": "渣土车管理",
   "truck": {
     "count": [
-      {"name": "渣土车", "value": 78, "unit": "辆"},
-      {"name": "在线数", "value": 53, "unit": "辆"},
-      {"name": "在线率", "value": 67.9, "unit": "%"}
+      { "name": "渣土车", "value": 78, "unit": "辆" },
+      { "name": "在线数", "value": 53, "unit": "辆" },
+      { "name": "在线率", "value": 67.9, "unit": "%" }
     ],
     "table": [
       ["超越电子围栏", 15, "11.9%"],
@@ -239,29 +444,89 @@
       ["区域放行", 40, "31%"]
     ],
     "line": {
-      "week": [{"name": "违章次数", "data": [120, 253, 121, 134, 290, 230, 110], "color": "255,45,85"}],
-      "month": [{"name": "违章次数", "data": [3120, 3101, 3134, 3290, 3230, 3110, 3252,3101,3134,3190,3230,3110,3134,3230,3101,3134,3190,3230,3110,3134,3230,3101,3134,3190,3230,3110,3134,3230, 3111, 3222], "color": "255,45,85"}],
-      "year": [{"name": "违章次数", "data": [3120, 3101, 3134, 3290, 3230, 3110, 3252,3101,3134,3111,3211,3121], "color": "255,45,85"}]
+      "week": [
+        {
+          "name": "违章次数",
+          "data": [120, 253, 121, 134, 290, 230, 110],
+          "color": "255,45,85"
+        }
+      ],
+      "month": [
+        {
+          "name": "违章次数",
+          "data": [
+            3120,
+            3101,
+            3134,
+            3290,
+            3230,
+            3110,
+            3252,
+            3101,
+            3134,
+            3190,
+            3230,
+            3110,
+            3134,
+            3230,
+            3101,
+            3134,
+            3190,
+            3230,
+            3110,
+            3134,
+            3230,
+            3101,
+            3134,
+            3190,
+            3230,
+            3110,
+            3134,
+            3230,
+            3111,
+            3222
+          ],
+          "color": "255,45,85"
+        }
+      ],
+      "year": [
+        {
+          "name": "违章次数",
+          "data": [
+            3120,
+            3101,
+            3134,
+            3290,
+            3230,
+            3110,
+            3252,
+            3101,
+            3134,
+            3111,
+            3211,
+            3121
+          ],
+          "color": "255,45,85"
+        }
+      ]
     }
   },
 
-
   "lampDesc": "城市路灯",
   "lamp": {
     "count": [
-      {"name": "路灯", "value": 1227, "unit": "个"},
-      {"name": "亮灯率", "value": 93, "unit": "%"},
-      {"name": "能耗", "value": 5477.3, "unit": "千瓦时"}
+      { "name": "路灯", "value": 1227, "unit": "个" },
+      { "name": "亮灯率", "value": 93, "unit": "%" },
+      { "name": "能耗", "value": 5477.3, "unit": "千瓦时" }
     ],
     "line": "路灯能耗统计取接口",
     "pie": [
-      {"value": 315, "name": "潭东镇"},
-      {"value": 436, "name": "潭口镇"},
-      {"value": 476, "name": "高校园区管理处"}
+      { "value": 315, "name": "潭东镇" },
+      { "value": 436, "name": "潭口镇" },
+      { "value": 476, "name": "高校园区管理处" }
     ]
   },
 
-
   "trafficDesc": "---------------------------交通--------------------------------",
   "traffic": {
     "introduceDesc": "交通概况",
@@ -274,7 +539,6 @@
       "time": 0.02
     },
 
-
     "safeDesc": "交通安全指数",
     "safe": {
       "gem": {
@@ -332,43 +596,69 @@
       },
 
       "line": {
-        "xData": ["周一","周二","周三","周四","周五","周六", "周日"],
+        "xData": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
         "yData": [
-          {"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"}
+          {
+            "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": {
         "xData": ["潭东镇", "潭口镇", "高校园区"],
-        "yData": [ 1.8, 2.3, 3.4 ]
+        "yData": [1.8, 2.3, 3.4]
       }
     },
 
     "eventDesc": "交通事件",
     "event": {
       "count": [
-        {"name": "事件总数", "value": 101, "unit": "个"},
-        {"name": "现场执法数量", "value": 76, "unit": "个"},
-        {"name": "非现场执法数量", "value": 25, "unit": "个"}
+        { "name": "事件总数", "value": 101, "unit": "个" },
+        { "name": "现场执法数量", "value": 76, "unit": "个" },
+        { "name": "非现场执法数量", "value": 25, "unit": "个" }
       ],
       "rank": [
-        {"value": 17, "name": "追尾"},
-        {"value": 12, "name": "超车"},
-        {"value": 10, "name": "直行"},
-        {"value": 8, "name": "左转弯"},
-        {"value": 4, "name": "右转弯"}
+        { "value": 17, "name": "追尾" },
+        { "value": 12, "name": "超车" },
+        { "value": 10, "name": "直行" },
+        { "value": 8, "name": "左转弯" },
+        { "value": 4, "name": "右转弯" }
       ],
       "pie": [
-        {"value": 30, "name": "潭东镇"},
-        {"value": 14, "name": "潭口镇"},
-        {"value": 57, "name": "高校园区"}
+        { "value": 30, "name": "潭东镇" },
+        { "value": 14, "name": "潭口镇" },
+        { "value": 57, "name": "高校园区" }
       ],
       "line": {
         "xData": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
-        "yData": [{"name": "事故数量", "data": [120, 252, 101, 134, 290, 230, 110], "color": "255,45,85"}]
+        "yData": [
+          {
+            "name": "事故数量",
+            "data": [120, 252, 101, 134, 290, 230, 110],
+            "color": "255,45,85"
+          }
+        ]
       }
     },
 
@@ -377,13 +667,19 @@
     "trafficPeccancyDesc": "交通违章",
     "trafficPeccancy": {
       "count": [
-        {"name": "今日违章", "value": 1476, "unit": "个"},
-        {"name": "本月违章", "value": 42537, "unit": "个"},
-        {"name": "全年违章", "value": 488828, "unit": "个"}
+        { "name": "今日违章", "value": 1476, "unit": "个" },
+        { "name": "本月违章", "value": 42537, "unit": "个" },
+        { "name": "全年违章", "value": 488828, "unit": "个" }
       ],
       "line": {
         "xData": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
-        "yData": [{"name": "事故数量", "data": [120, 252, 101, 134, 290, 230, 110], "color": "255,45,85"}]
+        "yData": [
+          {
+            "name": "事故数量",
+            "data": [120, 252, 101, 134, 290, 230, 110],
+            "color": "255,45,85"
+          }
+        ]
       },
       "table": [
         ["摩托车未带头盔", 346, "<span class=\"span-red\">80%</span>"],
@@ -396,32 +692,30 @@
         ["其他", 822, "20%"]
       ],
       "pie": [
-        {"value": 436, "name": "潭东镇"},
-        {"value": 257, "name": "潭口镇"},
-        {"value": 734, "name": "高校园区"}
+        { "value": 436, "name": "潭东镇" },
+        { "value": 257, "name": "潭口镇" },
+        { "value": 734, "name": "高校园区" }
       ]
     },
 
-
-
     "videoDesc": "视频网管",
     "video": {
-      "total": {"name": "监控总数", "value": 3587, "unit": "个"},
-      "hd": {"name": "高清", "value": 1037, "unit": "个"},
-      "md": {"name": "标清", "value": 2550, "unit": "个"},
-      "online": {"name": "在线", "value": 3208, "unit": "个"},
-      "offline": {"name": "离线", "value": 379, "unit": "个"},
-      "onlineRate": {"name": "在线率", "value": 89.4, "unit": "%"}
+      "total": { "name": "监控总数", "value": 3587, "unit": "个" },
+      "hd": { "name": "高清", "value": 1037, "unit": "个" },
+      "md": { "name": "标清", "value": 2550, "unit": "个" },
+      "online": { "name": "在线", "value": 3208, "unit": "个" },
+      "offline": { "name": "离线", "value": 379, "unit": "个" },
+      "onlineRate": { "name": "在线率", "value": 89.4, "unit": "%" }
     },
 
     "environmentDesc": "智慧环卫",
     "environment": {
-      "dev": {"name": "环卫设施", "value": 56, "unit": "个"},
-      "work": {"name": "环卫工作", "value": 36, "unit": "件"},
-      "complete": {"name": "工作完成数", "value": 24, "unit": "件"},
-      "rate": {"name": "工作完成率", "value": 67, "unit": "%"},
-      "person": {"name": "环卫人员", "value": 142, "unit": "人"},
-      "car": {"name": "环卫车", "value": 37, "unit": "辆"}
+      "dev": { "name": "环卫设施", "value": 56, "unit": "个" },
+      "work": { "name": "环卫工作", "value": 36, "unit": "件" },
+      "complete": { "name": "工作完成数", "value": 24, "unit": "件" },
+      "rate": { "name": "工作完成率", "value": 67, "unit": "%" },
+      "person": { "name": "环卫人员", "value": 142, "unit": "人" },
+      "car": { "name": "环卫车", "value": 37, "unit": "辆" }
     }
   }
 }
diff --git a/static/industrialEconomy.json b/static/industrialEconomy.json
index dbcc95a..423a2bf 100644
--- a/static/industrialEconomy.json
+++ b/static/industrialEconomy.json
@@ -50,6 +50,23 @@
         {"value": 3, "name": "代理商"},
         {"value": 1, "name": "其他"}
       ],
+      "table": {
+        "header": ["", "所属区域", "金融服务次数", "政策支持数量", "基础设施数量", "道路数量", "园林数量", "景点数量", "区人口总量"],
+        "data": [
+          ["潭东镇产业园区", "潭东镇", "135次/年", "12项", "18个", "20条", "4处", "2处", "约1.6万"],
+          ["潭东镇中心社区", "潭东镇", "160次/年", "9项", "22个", "25条", "6处", "3处", "约2.1万"],
+          ["潭东镇乡村片区", "潭东镇", "90次/年", "7项", "10个", "18条", "3处", "2处", "约1.21万"],
+          ["潭东镇商贸街区", "潭东镇", "85次/年", "6项", "9个", "12条", "2处", "1处", "约0.8万"],
+          ["潭口镇老街片区", "潭口镇", "110次/年", "8项", "15个", "16条", "3处", "2处", "约0.9万"],
+          ["潭口镇商贸新区", "潭口镇", "190次/年", "10项", "20个", "22条", "4处", "2处", "约1.2万"],
+          ["潭口镇乡村集中区", "潭口镇", "120次/年", "7项", "13个", "19条", "3处", "2处", "约0.87万"],
+          ["潭口镇工业园区", "潭口镇", "105次/年", "9项", "16个", "15条", "2处", "1处", "约0.4万"],
+          ["高校园区主校区周边", "高校园区工作组", "230次/年", "16项", "22个", "14条", "6处", "3处", "约4.5万"],
+          ["高校园区科创孵化区", "高校园区工作组", "200次/年", "12项", "18个", "12条", "5处", "2处", "约2.3万"],
+          ["高校园区人才社区", "高校园区工作组", "170次/年", "10项", "15个", "10条", "4处", "2处", "约1.2万"],
+          ["高校园区商业配套区", "高校园区工作组", "145次/年", "9项", "12个", "9条", "3处", "1处", "约0.5万"]
+        ]
+      },
       "bar": {
         "xAxisData": [ "上市企业", "高新技术企业", "国有企业", "重点企业","独角兽企业", "挂点企业"],
         "seriesData": [ 56, 72, 13, 8, 3, 21]
diff --git a/static/socialLive.json b/static/socialLive.json
index 752b882..48cd1c0 100644
--- a/static/socialLive.json
+++ b/static/socialLive.json
@@ -8,10 +8,10 @@
         "seriesData": [15492, 1107, 421, 1688]
       },
       "pie": [
-        {"value": 15492, "name": "自住"},
-        {"value": 1107, "name": "出租"},
-        {"value": 421, "name": "空置"},
-        {"value": 1688, "name": "其他"}
+        {"value": 15492, "name": "楼房"},
+        {"value": 1107, "name": "平房"},
+        {"value": 421, "name": "别墅"},
+        {"value": 1688, "name": "特殊"}
       ],
       "count": [
         { "name": "房屋总数", "num": "18708" },
@@ -206,7 +206,7 @@
       "countLeft": {
         "kindergarten": { "name": "幼儿园", "num": 4 },
         "primarySchool": { "name": "小学", "num": 37 },
-        "middleSchool": { "name": "中学", "num": 4 },
+        "middleSchool": { "name": "初中", "num": 4 },
         "highSchool": { "name": "高中", "num": 3 }
       },
       "countRightDesc": "右侧（表格上方）的数量统计、幼儿园、小学、中学",
@@ -214,7 +214,8 @@
         "child": 278,
         "pupil": 73231,
         "student": 9203,
-        "teacher": 6891
+        "teacher": 6891,
+        "highSchoolStudent": 9526
       },
       "table": [
         ["武陵小学", "2872", "252"],