diff --git a/public/statistical/charts_button.png b/public/statistical/charts_button.png
new file mode 100644
index 00000000..82194c32
Binary files /dev/null and b/public/statistical/charts_button.png differ
diff --git a/public/statistical/item_label.png b/public/statistical/item_label.png
new file mode 100644
index 00000000..20566671
Binary files /dev/null and b/public/statistical/item_label.png differ
diff --git a/public/statistical/item_title.png b/public/statistical/item_title.png
new file mode 100644
index 00000000..63aef23c
Binary files /dev/null and b/public/statistical/item_title.png differ
diff --git a/public/statistical/left_direction_left.png b/public/statistical/left_direction_left1.png
similarity index 100%
rename from public/statistical/left_direction_left.png
rename to public/statistical/left_direction_left1.png
diff --git a/public/statistical/left_direction_left2.png b/public/statistical/left_direction_left2.png
new file mode 100644
index 00000000..757bff51
Binary files /dev/null and b/public/statistical/left_direction_left2.png differ
diff --git a/public/statistical/left_direction_right1.png b/public/statistical/left_direction_right1.png
new file mode 100644
index 00000000..92f7a9a1
Binary files /dev/null and b/public/statistical/left_direction_right1.png differ
diff --git a/public/statistical/left_direction_right.png b/public/statistical/left_direction_right2.png
similarity index 100%
rename from public/statistical/left_direction_right.png
rename to public/statistical/left_direction_right2.png
diff --git a/public/statistical/page_turning.png b/public/statistical/page_turning.png
new file mode 100644
index 00000000..626dad5f
Binary files /dev/null and b/public/statistical/page_turning.png differ
diff --git a/public/statistical/right_decoration.png b/public/statistical/right_decoration.png
new file mode 100644
index 00000000..73fb3a47
Binary files /dev/null and b/public/statistical/right_decoration.png differ
diff --git a/public/statistical/select_center_bg.png b/public/statistical/select_center_bg.png
new file mode 100644
index 00000000..d0c3e3e0
Binary files /dev/null and b/public/statistical/select_center_bg.png differ
diff --git a/public/statistical/select_left_bg.png b/public/statistical/select_left_bg.png
new file mode 100644
index 00000000..8f6665c7
Binary files /dev/null and b/public/statistical/select_left_bg.png differ
diff --git a/public/statistical/select_right_bg.png b/public/statistical/select_right_bg.png
new file mode 100644
index 00000000..0585c4fb
Binary files /dev/null and b/public/statistical/select_right_bg.png differ
diff --git a/public/statistical/selected_charts_button.png b/public/statistical/selected_charts_button.png
new file mode 100644
index 00000000..ff954615
Binary files /dev/null and b/public/statistical/selected_charts_button.png differ
diff --git a/public/statistical/sub_title.png b/public/statistical/sub_title.png
new file mode 100644
index 00000000..1ee233b9
Binary files /dev/null and b/public/statistical/sub_title.png differ
diff --git a/src/api/statistical/index.ts b/src/api/statistical/index.ts
new file mode 100644
index 00000000..5cde02eb
--- /dev/null
+++ b/src/api/statistical/index.ts
@@ -0,0 +1,20 @@
+import { defHttp } from '@/utils/http/axios';
+enum Api {
+  GetTrendData = '/api/DroneScreenDisplay/GetTrendData',
+  GetTuBanSummary = '/api/DroneScreenDisplay/GetTuBanSummary',
+  GetTotalAndAreaByType = '/api/DroneScreenDisplay/GetTotalAndAreaByType',
+  GetTotalAndArea = '/api/DroneScreenDisplay/GetTotalAndArea'
+}
+export function GetTrendData(params:{countyid:string;type:string;datatype:number;begindate?:string;enddate?:string;}) {
+  // datatype 0按天统计，1按月统计
+  return defHttp.get({ url: Api.GetTrendData, params });
+}
+export function GetTuBanSummary(params:{countyid:string;type:string;}) {
+  return defHttp.get({ url: Api.GetTuBanSummary, params });
+}
+export function GetTotalAndAreaByType(params:{countyid:string;type:string;}) {
+  return defHttp.get({ url: Api.GetTotalAndAreaByType, params });
+}
+export function GetTotalAndArea(params:{countyid:string;type:string;}) {
+  return defHttp.get({ url: Api.GetTotalAndArea, params });
+}
\ No newline at end of file
diff --git a/src/views/demo/caseoffence/RecordList.vue b/src/views/demo/caseoffence/RecordList.vue
index 91099f7b..26ed531c 100644
--- a/src/views/demo/caseoffence/RecordList.vue
+++ b/src/views/demo/caseoffence/RecordList.vue
@@ -40,6 +40,7 @@
   import { BasicModal, useModal } from '@/components/Modal';
   import { getCaseInfoList } from '@/api/monitor/index';
   import { getLoadCaseInfoListOffence } from '@/api/demo/system';
+  import { dataProcessingCount } from '@/views/demo/tiankongdi/util.ts';
 
   const [registerModal, { openModal, setModalProps }] = useModal();
 
@@ -165,6 +166,10 @@
 
   function handleGetList() {
     getLoadCaseInfoListOffence(props.currentListQuery).then((res) => {
+      res.items.forEach((item) => {
+        item.area = dataProcessingCount(item.area);
+        item.gengdi_area = dataProcessingCount(item.gengdi_area);
+      });
       columns.data = res.items;
       total.value = res.total;
     });
diff --git a/src/views/demo/caseoffence/index.vue b/src/views/demo/caseoffence/index.vue
index 65fe7c35..52ce4547 100644
--- a/src/views/demo/caseoffence/index.vue
+++ b/src/views/demo/caseoffence/index.vue
@@ -130,7 +130,7 @@
           <a @click="handlePreViewData(column, record, 9)">{{ record.zghsywfgdgdmj }}</a>
         </template>
         <!-- 面积只取小数点后两位 -->
-        <template v-if="column.key.slice(-2) === 'mj' && record.countyname == '总计'">
+        <template v-if="column.key.slice(-2) === 'mj'">
           {{ record[column.key].toFixed(2) }}
         </template>
       </template>
diff --git a/src/views/demo/statistical/patchsummary/index.vue b/src/views/demo/statistical/patchsummary/index.vue
index fe8261a3..7aa60fee 100644
--- a/src/views/demo/statistical/patchsummary/index.vue
+++ b/src/views/demo/statistical/patchsummary/index.vue
@@ -67,7 +67,7 @@
   import axios from 'axios';
   import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
   import { getCaseInfoById } from '@/api/tiankongdi/index';
-  import { dataProcessingCount } from '@/views/demo/tiankongdi/util.ts';
+  import { dataProcessingCount } from '@/views/demo/tiankongdi/util';
   import { BasicForm, useForm } from '@/components/Form';
   import { PageWrapper } from '@/components/Page';
 
diff --git a/src/views/demo/tiankongdi/mapaggregation/index.vue b/src/views/demo/tiankongdi/mapaggregation/index.vue
new file mode 100644
index 00000000..5ea45646
--- /dev/null
+++ b/src/views/demo/tiankongdi/mapaggregation/index.vue
@@ -0,0 +1,6 @@
+<template>
+  <Exception />
+</template>
+<script lang="ts" setup>
+  import Exception from '@/views/sys/exception/Exception.vue';
+</script>
diff --git a/src/views/sys/exception/Exception.vue b/src/views/sys/exception/Exception.vue
index 88575424..e6b5663d 100644
--- a/src/views/sys/exception/Exception.vue
+++ b/src/views/sys/exception/Exception.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="statistical">
-    <Map style="position:absolute;top:0px;left:0px;" ref="MapboxComponent"></Map>
+    <Map style="position: absolute; top: 0px; left: 0px" ref="MapboxComponent"></Map>
     <div class="statistical-left">
       <img
         src="/statistical/left_decorative_left.png"
         :style="{
           position: 'relative',
-          width: '84px',
-          height: '920px',
+          width: '73px',
+          height: '100%',
         }"
       />
       <layerButton
@@ -16,8 +16,8 @@
         @layerbutton_2="layerbutton_2"
         :style="{
           position: 'absolute',
-          top: '102px',
-          left: '54px',
+          top: '60px',
+          left: '48px',
         }"
       />
       <statisticalType
@@ -25,9 +25,9 @@
         @handlerChangePolygonType="handlerChangePolygonType"
         :style="{
           position: 'absolute',
-          top: '700px',
-          left: '54px',
-          height: '200px',
+          top: '680px',
+          left: '48px',
+          height: '180px',
         }"
       />
       <county
@@ -40,51 +40,55 @@
         }"
       />
     </div>
+    <DataScreen :countyId="countyId"/>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {ref} from "vue";
-import Map from "./LargeScreenMap/index.vue"
+  import { ref } from 'vue';
+  import Map from './LargeScreenMap/index.vue';
   import layerButton from './mapComponent/left_layerButton.vue';
   import statisticalType from './mapComponent/left_statisticalType.vue';
   import county from './mapComponent/left_county.vue';
+  import DataScreen from './dataScreen/index.vue'
 
-  // 
+  //
   const MapboxComponent = ref();
-
+  const countyId = ref('371325')
 
   // 控制图斑图层
   function layerbutton_1(data) {
-    MapboxComponent.value.handlerChangeLayerVisible("historyLayerLine",data);
-    MapboxComponent.value.handlerChangeLayerVisible("historyLayerFill",data);
+    MapboxComponent.value.handlerChangeLayerVisible('historyLayerLine', data);
+    MapboxComponent.value.handlerChangeLayerVisible('historyLayerFill', data);
   }
 
   // 控制热力图显示
   function layerbutton_2(data) {
-    MapboxComponent.value.handlerChangeLayerVisible("heatLayer",data);
+    MapboxComponent.value.handlerChangeLayerVisible('heatLayer', data);
   }
 
   // 选择区县
-  const currentCounty = ref({name:"",code:""});
+  const currentCounty = ref({ name: '', code: '' });
 
   function countyClick(data) {
-    currentCounty.value = {name:data['name'],code:data['id']}
+    countyId.value = data.id
+    currentCounty.value = { name: data['name'], code: data['id'] };
     MapboxComponent.value.handlerChangeCounty(currentCounty.value);
   }
 
   // 图例点击
-  function handlerChangePolygonType(data){
-    MapboxComponent.value.handlerChangeCounty(currentCounty.value,data);
+  function handlerChangePolygonType(data) {
+    MapboxComponent.value.handlerChangeCounty(currentCounty.value, data);
   }
 </script>
 
 <style lang="less" scoped>
   .statistical {
+  // position: relative;
     // 页面不能被选中
     -webkit-user-select: none; /* Safari */
     -moz-user-select: none; /* Firefox */
     -ms-user-select: none; /* IE/Edge */
     user-select: none;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/sys/exception/dataScreen/DataStatistics/index.vue b/src/views/sys/exception/dataScreen/DataStatistics/index.vue
new file mode 100644
index 00000000..b4ab8d09
--- /dev/null
+++ b/src/views/sys/exception/dataScreen/DataStatistics/index.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="sub-title">
+    总数与面积统计
+  </div>
+  <div class="area-data-div">
+    <div class="area-div">
+      <div class="data-item">
+        <div class="data-label data-center">下发图斑数(个）</div>
+        <div class="data-value data-center">{{wfzs}}</div>
+      </div>
+      <div class="data-item">
+        <div class="data-label data-center">图斑面积(亩）</div>
+        <div class="data-value data-center">{{ wfmj }}</div>
+      </div>
+      <div class="data-item">
+        <div class="data-label data-center">耕地面积(亩）</div>
+        <div class="data-value data-center">{{xfgdmj}}</div>
+      </div>
+      <div class="data-item">
+        <div class="data-label data-center">整改后剩余耕地面积(亩）</div>
+        <div class="data-value data-center">{{zghsywfgdgdmj}}</div>
+      </div>
+      <div class="data-item">
+        <div class="data-label data-center">核实后新增违法耕地(亩）</div>
+        <div class="data-value data-center">{{hshxzwfgdgdmj}}</div>
+      </div>
+    </div>
+    <div class="data-div">
+      <div class="sub-title-div">新增建设用地</div>
+      <div class="row-item-div" style="margin-bottom: 22px;">
+        <div class="item-div">
+          <div class="item-label">合法用地(个）</div>
+          <div class="item-value">{{hfzs}}</div>
+        </div>
+        <div class="item-interval"></div>
+        <div class="item-div" style=" padding-left: 17px;">
+          <div class="item-label">合法用地(亩）</div>
+          <div class="item-value">{{hfmj}}</div>
+        </div>
+      </div>
+      <div class="row-item-div" style="margin-bottom: 27px;">
+        <div class="item-div">
+          <div class="item-label">违法用地(个）</div>
+          <div class="item-value">{{wfzs}}</div>
+        </div>
+        <div class="item-interval"></div>
+        <div class="item-div" style=" padding-left: 17px;">
+          <div class="item-label">违法用地(亩）</div>
+          <div class="item-value">{{wfmj}}</div>
+        </div>
+      </div>
+      <div class="sub-title-div" style="margin-bottom:15px;">其他用地</div>
+      <div class="row-item-div">
+        <div class="item-div">
+          <div class="item-label">其他用地(个）</div>
+          <div class="item-value">{{qtzs}}</div>
+        </div>
+        <div class="item-interval"></div>
+        <div class="item-div" style=" padding-left: 17px;">
+          <div class="item-label">其他用地(亩）</div>
+          <div class="item-value">{{qtmj}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, onMounted,watch } from "vue"
+import { GetTotalAndArea } from '@/api/statistical/index.ts'
+
+const props = defineProps(['countyId','landType'])
+
+const hfmj = ref(0)
+const hfzs = ref(0)
+const hshxzwfgdgdmj = ref(0)
+const qtmj = ref(0)
+const qtzs = ref(0)
+const wfmj = ref(0)
+const wfzs = ref(0)
+const xfgdmj = ref(0)
+const xfmj = ref(0)
+const xfzs = ref(0)
+const zghsywfgdgdmj = ref(0)
+
+onMounted(() => {
+  getData()
+})
+const getData = () => {
+  GetTotalAndArea({countyid:props.countyId,type:props.landType}).then(res => {
+    hfmj.value = res.hfmj
+    hfzs.value = res.hfzs
+    hshxzwfgdgdmj.value = res.hshxzwfgdgdmj
+    qtmj.value = res.qtmj
+    qtzs.value = res.qtzs
+    wfmj.value = res.wfmj
+    wfzs.value = res.wfzs
+    xfgdmj.value = res.xfgdmj
+    xfmj.value = res.xfmj
+    xfzs.value = res.xfzs
+    zghsywfgdgdmj.value = res.zghsywfgdgdmj
+  })
+}
+watch(() => [props.countyId,props.landType], () => {
+  getData()
+})
+</script>
+
+<style lang="scss" scoped>
+.sub-title{
+  height: 37px;
+  display: flex;
+  align-items: center;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 16px;
+  color: #FFFFFF;
+  text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
+  -webkit-background-clip: text;
+  text-shadow: 0px 2px 6px rgba(5,28,55,0.42);
+  background: url(./statistical/sub_title.png);
+  padding-left: 35px;
+}
+.area-data-div{
+  height: 283px;
+  display:flex;
+  padding-top:15px;
+  padding-left:9px;
+  .area-div{
+    width: 156px;
+    margin-right: 36px;
+    :nth-last-child(1){
+      margin-bottom: 0;
+    }
+  }
+  .data-item{
+    height: 43px;
+    padding-top:6px;
+    margin-bottom: 8px;
+    background: url(./statistical/item_label.png) no-repeat;
+    background-size: cover;
+    .data-center{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .data-label{
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      font-size: 10px;
+      color: #7EBBFF;
+      margin-bottom:6px;
+      line-height: 10px;
+    }
+    .data-value{
+      font-family: DIN;
+      font-weight: 500;
+      font-size: 20px;
+      color: #FFFFFF;
+      line-height: 15px;
+    }
+  }
+  .data-div{
+    width: 194px;
+    .sub-title-div{
+      height: 19px;
+      display:flex;
+      align-items:center;
+      justify-content: center;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      font-size: 11px;
+      color: #7EBBFF;
+      margin-bottom:19px;
+      background: url(./statistical/item_title.png) no-repeat;
+      background-size: cover;
+    }
+    .row-item-div{
+      display: flex;
+      height:35px;
+      .item-div{
+        flex: 1;
+        .item-label{
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          font-size: 11px;
+          color: #7EBBFF;
+          margin-bottom:10px;
+        }
+        .item-value{
+          font-family: DIN;
+          font-weight: 500;
+          font-size: 23px;
+          color: #FFFFFF;
+        }
+      }
+      .item-interval{
+        width: 1px;
+        height: 43px;
+        background: #2A89DA;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sys/exception/dataScreen/PatchSummary/index.vue b/src/views/sys/exception/dataScreen/PatchSummary/index.vue
new file mode 100644
index 00000000..7e5794d2
--- /dev/null
+++ b/src/views/sys/exception/dataScreen/PatchSummary/index.vue
@@ -0,0 +1,556 @@
+<template>
+  <div class="sub-title">
+    图斑汇总统计
+  </div>
+  <div style="height: 650px;" id="patch-summary"></div>
+</template>
+
+<script setup lang="ts">
+import { onMounted,ref,defineProps,watch} from "vue"
+import * as echarts from 'echarts'
+import { GetTuBanSummary } from '@/api/statistical/index.ts'
+
+const props = defineProps(['countyId','landType'])
+
+const shaft = ref([])
+const sywfgdgdmj = ref([])
+const sywfgdtbzs = ref([])
+const xfmj = ref([])
+const xftbzs = ref([])
+let myChart:any = null
+onMounted(() => {
+  let chartsDom = document.getElementById('patch-summary')
+  myChart = echarts.init(chartsDom)
+  GetTuBanSummary({countyid:props.countyId,type:props.landType}).then(res => {
+    shaft.value = []
+    sywfgdgdmj.value = []
+    sywfgdtbzs.value = []
+    xfmj.value = []
+    xftbzs.value = []
+    res.forEach(item => {
+      shaft.value.push(item.countyname)
+      sywfgdgdmj.value.push(item.sywfgdgdmj)
+      sywfgdtbzs.value.push(item.sywfgdtbzs)
+      xfmj.value.push(item.xfmj)
+      xftbzs.value.push(item.xftbzs)
+    })
+    myChart.setOption({
+      legend:[
+        {
+          data:['总面积(亩/平方米）','耕地面积(亩/平方米）'],
+          right:'0px',
+          top:'10px',
+          itemWidth: 7,
+          itemHeight: 7,
+          textStyle:{
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+            fontSize: '10px',
+            color: '#FFFFFF',
+          }
+        },
+        {
+          data:['下发总数(个）','剩余总数（个）'],
+          left:'0px',
+          top:'10px',
+          itemWidth: 7,
+          itemHeight: 7,
+          gridIndex: 2,
+          textStyle:{
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+            fontSize: '10px',
+            color: '#FFFFFF',
+          }
+        }
+      ],
+      grid: [
+        // 左
+        {
+          left: "0%",
+          width: "40%",
+          height: "90%",
+          containLabel: true,
+        },
+        // 中
+        {
+          width: "0%",
+        },
+        // 右
+        {
+          right: "0%",
+          width: "60%",
+          height: "90%",
+          containLabel: true,
+        },
+      ],
+      xAxis: [
+        {
+          type: "value",
+          inverse: true,
+          show: false,
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            //轴线
+            // show: false,
+            lineStyle: {
+              color: "rgba(25, 35, 57,0.2)",
+            },
+          },
+        },
+        {
+          gridIndex: 1,
+          show: true,
+          axisTick: {
+            //y轴刻度线
+            show: false,
+          },
+          axisLine: {
+            //轴线
+            show: false,
+          },
+        },
+        {
+          gridIndex: 2,
+          type: "value",
+          show: false,
+          splitLine: {
+            // 网格线
+            show: false,
+          },
+          axisTick: {
+            //y轴刻度线
+            show: false,
+          },
+        },
+      ],
+      yAxis: [
+        {
+          axisLabel: {
+            show: false,
+          },
+          align: "center",
+          type: "category",
+          axisTick: {
+            //y轴刻度线
+            show: false,
+          },
+          data: shaft.value,
+          axisLine: {
+            //轴线
+            // show: false,
+            lineStyle: {
+              color: "#FFFFFF",
+              opacity: 0.6,
+            },
+          },
+        },
+        {
+          gridIndex: 1,
+          position: "center",
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          type: "category",
+          inverse: false,
+          axisTick: {
+            //y轴刻度线
+            show: false,
+          },
+          data: shaft.value, //使用空格使文字居中
+        },
+        {
+          gridIndex: 2,
+          position: "left",
+          axisLabel: {
+            fontFamily: 'PingFang SC',
+            fontWeight: '500',
+            fontSize: '11px',
+            color: '#FFFFFF',
+            show: true,
+            margin: 30,
+            // width: 100,
+            align: 'center',
+          },
+          type: "category",
+          inverse: false,
+          axisTick: {
+            //y轴刻度线
+            show: false,
+          },
+          axisLine: {
+            //轴线
+            // show: false,
+            lineStyle: {
+              color: "#FFFFFF",
+              opacity: 0.6,
+            },
+          },
+          data: shaft.value,
+        },
+      ],
+      series: [
+        {
+          type: "bar",
+          barWidth: 8,
+          stack:'left',
+          name: "耕地面积(亩/平方米）",
+          itemStyle: {
+            color: "#FF9C5D",
+          },
+          label:{
+            show: true,
+            position: 'top',
+            fontFamily: 'DIN',
+            fontWeight: '500',
+            fontSize: '11px',
+            color: '#FFFFFF',
+          },
+          data: sywfgdgdmj.value,
+        },
+        {
+          type: "bar",
+          barWidth: 8,
+          name: "总面积(亩/平方米）",
+          stack:'left',
+          itemStyle: {
+            color: "#00AEFF",
+            barBorderRadius:[4, 0, 0, 4],
+          },
+          label:{
+            show: true,
+            position: 'top',
+            fontFamily: 'DIN',
+            fontWeight: '500',
+            fontSize: '11px',
+            color: '#FFFFFF',
+          },
+          data: xfmj.value,
+        },
+        
+        {
+          type: "bar",
+          barWidth: 8,
+          stack:'right',
+          xAxisIndex: 2,
+          yAxisIndex: 2,
+          name: "下发总数(个）",
+          itemStyle: {
+            color: "#3058E1",
+          },
+          label:{
+            show: true,
+            position: 'top',
+            fontFamily: 'DIN',
+            fontWeight: '500',
+            fontSize: '11px',
+            color: '#FFFFFF',
+          },
+          data: xftbzs.value,
+        },
+        {
+          type: "bar",
+          barWidth: 8,
+          xAxisIndex: 2,
+          yAxisIndex: 2,
+          stack:'right',
+          name: "剩余总数（个）",
+          itemStyle: {
+            color: "#16C8C5",
+            barBorderRadius:[0, 4, 4, 0],
+          },
+          label:{
+            show: true,
+            position: 'top',
+            fontFamily: 'DIN',
+            fontWeight: '500',
+            fontSize: '11px',
+            color: '#FFFFFF',
+          },
+          data: sywfgdtbzs.value,
+        },
+      ],
+    })
+  })
+})
+watch(() => [props.countyId,props.landType],() => {
+  GetTuBanSummary({countyid:props.countyId,type:props.landType}).then(res => {
+    shaft.value = []
+    sywfgdgdmj.value = []
+    sywfgdtbzs.value = []
+    xfmj.value = []
+    xftbzs.value = []
+    res.forEach(item => {
+      shaft.value.push(item.countyname)
+      sywfgdgdmj.value.push(item.sywfgdgdmj)
+      sywfgdtbzs.value.push(item.sywfgdtbzs)
+      xfmj.value.push(item.xfmj)
+      xftbzs.value.push(item.xftbzs)
+    })
+    myChart.setOption({
+      legend:[
+        {
+          data:['总面积(亩/平方米）','耕地面积(亩/平方米）'],
+          right:'0px',
+          top:'10px',
+          itemWidth: 7,
+          itemHeight: 7,
+          textStyle:{
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+            fontSize: '10px',
+            color: '#FFFFFF',
+          }
+        },
+        {
+          data:['下发总数(个）','剩余总数（个）'],
+          left:'0px',
+          top:'10px',
+          itemWidth: 7,
+          itemHeight: 7,
+          gridIndex: 2,
+          textStyle:{
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+            fontSize: '10px',
+            color: '#FFFFFF',
+          }
+        }
+      ],
+      grid: [
+        // 左
+        {
+          left: "0%",
+          width: "40%",
+          height: "90%",
+          containLabel: true,
+        },
+        // 中
+        {
+          width: "0%",
+        },
+        // 右
+        {
+          right: "0%",
+          width: "60%",
+          height: "90%",
+          containLabel: true,
+        },
+      ],
+      xAxis: [
+        {
+          type: "value",
+          inverse: true,
+          show: false,
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            //轴线
+            // show: false,
+            lineStyle: {
+              color: "rgba(25, 35, 57,0.2)",
+            },
+          },
+        },
+        {
+          gridIndex: 1,
+          show: true,
+          axisTick: {
+            //y轴刻度线
+            show: false,
+          },
+          axisLine: {
+            //轴线
+            show: false,
+          },
+        },
+        {
+          gridIndex: 2,
+          type: "value",
+          show: false,
+          splitLine: {
+            // 网格线
+            show: false,
+          },
+          axisTick: {
+            //y轴刻度线
+            show: false,
+          },
+        },
+      ],
+      yAxis: [
+        {
+          axisLabel: {
+            show: false,
+          },
+          align: "center",
+          type: "category",
+          axisTick: {
+            //y轴刻度线
+            show: false,
+          },
+          data: shaft.value,
+          axisLine: {
+            //轴线
+            // show: false,
+            lineStyle: {
+              color: "#FFFFFF",
+              opacity: 0.6,
+            },
+          },
+        },
+        {
+          gridIndex: 1,
+          position: "center",
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          type: "category",
+          inverse: false,
+          axisTick: {
+            //y轴刻度线
+            show: false,
+          },
+          data: shaft.value, //使用空格使文字居中
+        },
+        {
+          gridIndex: 2,
+          position: "left",
+          axisLabel: {
+            fontFamily: 'PingFang SC',
+            fontWeight: '500',
+            fontSize: '11px',
+            color: '#FFFFFF',
+            show: true,
+            margin: 30,
+            // width: 100,
+            align: 'center',
+          },
+          type: "category",
+          inverse: false,
+          axisTick: {
+            //y轴刻度线
+            show: false,
+          },
+          axisLine: {
+            //轴线
+            // show: false,
+            lineStyle: {
+              color: "#FFFFFF",
+              opacity: 0.6,
+            },
+          },
+          data: shaft.value,
+        },
+      ],
+      series: [
+        {
+          type: "bar",
+          barWidth: 8,
+          stack:'left',
+          name: "耕地面积(亩/平方米）",
+          itemStyle: {
+            color: "#FF9C5D",
+          },
+          label:{
+            show: true,
+            position: 'top',
+            fontFamily: 'DIN',
+            fontWeight: '500',
+            fontSize: '11px',
+            color: '#FFFFFF',
+          },
+          data: sywfgdgdmj.value,
+        },
+        {
+          type: "bar",
+          barWidth: 8,
+          name: "总面积(亩/平方米）",
+          stack:'left',
+          itemStyle: {
+            color: "#00AEFF",
+            barBorderRadius:[4, 0, 0, 4],
+          },
+          label:{
+            show: true,
+            position: 'top',
+            fontFamily: 'DIN',
+            fontWeight: '500',
+            fontSize: '11px',
+            color: '#FFFFFF',
+          },
+          data: xfmj.value,
+        },
+        
+        {
+          type: "bar",
+          barWidth: 8,
+          stack:'right',
+          xAxisIndex: 2,
+          yAxisIndex: 2,
+          name: "下发总数(个）",
+          itemStyle: {
+            color: "#3058E1",
+          },
+          label:{
+            show: true,
+            position: 'top',
+            fontFamily: 'DIN',
+            fontWeight: '500',
+            fontSize: '11px',
+            color: '#FFFFFF',
+          },
+          data: xftbzs.value,
+        },
+        {
+          type: "bar",
+          barWidth: 8,
+          xAxisIndex: 2,
+          yAxisIndex: 2,
+          stack:'right',
+          name: "剩余总数（个）",
+          itemStyle: {
+            color: "#16C8C5",
+            barBorderRadius:[0, 4, 4, 0],
+          },
+          label:{
+            show: true,
+            position: 'top',
+            fontFamily: 'DIN',
+            fontWeight: '500',
+            fontSize: '11px',
+            color: '#FFFFFF',
+          },
+          data: sywfgdtbzs.value,
+        },
+      ],
+    })
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.sub-title{
+  height: 37px;
+  display: flex;
+  align-items: center;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 16px;
+  color: #FFFFFF;
+  text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
+  -webkit-background-clip: text;
+  text-shadow: 0px 2px 6px rgba(5,28,55,0.42);
+  background: url(./statistical/sub_title.png);
+  padding-left: 35px;
+}
+</style>
diff --git a/src/views/sys/exception/dataScreen/TitleSelect/index.vue b/src/views/sys/exception/dataScreen/TitleSelect/index.vue
new file mode 100644
index 00000000..6a25a870
--- /dev/null
+++ b/src/views/sys/exception/dataScreen/TitleSelect/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <a-segmented v-model:value="props.landType" :options="data" 
+  style="width: 100%;height:37px;border-radius: 19px;background:#102649;margin-bottom: 23px;"
+  @change="(v) => emits('changeLandType', v)"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, defineEmits } from "vue"
+const props = defineProps(['landType'])
+const emits = defineEmits(['changeLandType'])
+const data = ref([
+  {
+    label: '农用地',
+    value: '农用地'
+  },
+  {
+    label: '建设用地',
+    value: '建设用地'
+  },
+  {
+    label: '推堆土',
+    value: '推堆土'
+  },
+])
+</script>
+
+<style lang="scss" scoped>
+:deep(.ant-segmented-item){
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 19px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    font-size: 15px;
+    color: rgba(255, 255, 255, 0.5)
+  }
+  :deep(.ant-segmented-group){
+    height: 100%;
+  }
+  :deep(.ant-segmented-item-selected){
+    background: linear-gradient(-38deg, #3058E1, #4CBBF5);
+    box-shadow: 0px 1px 3px 0px rgba(3,10,26,0.25);
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    font-size: 15px;
+    color: #FFFFFF;
+  }
+</style>
diff --git a/src/views/sys/exception/dataScreen/TopSelect/index.vue b/src/views/sys/exception/dataScreen/TopSelect/index.vue
new file mode 100644
index 00000000..72d10d89
--- /dev/null
+++ b/src/views/sys/exception/dataScreen/TopSelect/index.vue
@@ -0,0 +1,138 @@
+<template>
+  
+  <div class="show-data">
+    <div class="left-data-item">
+      <div class="item-mark"></div>
+      <div class="item-value">
+        <div>{{`已办结${ybjzs}个`}}</div>
+        <div>{{`共${ybjmj}亩`}}</div>
+      </div>
+    </div>
+    <div class="right-data-item">
+      <div class="item-value">
+        <div>{{`未办结${wbjzs}个`}}</div>
+        <div>{{`共${wbjmj}亩`}}</div>
+      </div>
+      <div class="item-mark"></div>
+    </div>
+    <div style="width: 150px;position: absolute; top:50%;left:50%;transform:translate(-50%, -90%);z-index:1;">
+      <div style="font-family: DIN;
+font-weight: 500;
+font-size: 46px;
+color: #FFFFFF;
+margin-bottom:9px;
+display:flex;
+justify-content:center;">{{totalzs}}</div>
+      <div style="font-family: Microsoft YaHei;
+font-weight: 400;
+font-size: 17px;
+color: #FFFFFF;
+display:flex;
+justify-content:center;">总数量</div>
+    </div>
+    <div class="left-bg"></div>
+    <div class="center-bg"></div>
+    <div class="right-bg"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, defineProps, watch } from "vue"
+import { GetTotalAndAreaByType } from '@/api/statistical/index.ts'
+
+const totalzs = ref(0)
+const wbjmj = ref(0)
+const wbjzs = ref(0)
+const ybjmj = ref(0)
+const ybjzs = ref(0)
+
+const props = defineProps(['countyId','landType'])
+onMounted(() => {
+  getData()
+})
+const getData = () => {
+  GetTotalAndAreaByType({countyid: props.countyId,type:props.landType}).then(res => {
+    wbjmj.value = res.wbjmj
+    wbjzs.value = res.wbjzs
+    ybjmj.value = res.ybjmj
+    ybjzs.value = res.ybjzs
+    totalzs.value = res.totalzs
+  })
+}
+watch(() => [props.countyId,props.landType], () => {
+  getData()
+})
+
+</script>
+
+<style lang="scss" scoped>
+  .show-data{
+    height: 142px;
+    // padding-top: 23px;
+    position: relative;
+    .left-data-item{
+      display: flex;
+      .item-mark{
+        width: 2px;
+        height: 33px;
+        background: #1B62BA;
+        margin-right:12px;
+      }
+      .item-value{
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        font-size: 16px;
+        color: #7EBBFF;
+        margin-bottom: 9px;
+      }
+    }
+    .right-data-item{
+      display: flex;
+      position: absolute;
+      right: 0;
+      bottom: 30px;
+      .item-mark{
+        width: 2px;
+        height: 33px;
+        background: #04F4C3;
+        
+      }
+      .item-value{
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        font-size: 16px;
+        color: #01FFC7;
+        margin-bottom: 8px;
+        margin-right:9px;
+      }
+    }
+    .left-bg{
+      position: absolute;
+      left: 14px;
+      width: 136px;
+      height:38px;
+      background: url(./statistical/select_left_bg.png) no-repeat;
+      background-size: cover;
+    }
+    .center-bg{
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%,-50%);
+      width: 150px;
+      height:85px;
+      background: url(./statistical/select_center_bg.png) no-repeat;
+      background-size: cover;
+    }
+    .right-bg{
+      position: absolute;
+      width: 136px;
+      height:39px;
+      background: url(./statistical/select_right_bg.png) no-repeat;
+      background-size: cover;
+      right: 14px;
+      bottom: 30px;
+    }
+  }
+  
+</style>
diff --git a/src/views/sys/exception/dataScreen/TrendStatistics/index.vue b/src/views/sys/exception/dataScreen/TrendStatistics/index.vue
new file mode 100644
index 00000000..9e85e263
--- /dev/null
+++ b/src/views/sys/exception/dataScreen/TrendStatistics/index.vue
@@ -0,0 +1,321 @@
+<template>
+  <div class="sub-title">
+    趋势统计
+  </div>
+  <div class="show-charts-div">
+    <div class="button-div">
+      <div :class="`button-item ${unit == 0 && 'select-button-item'}`" @click="unit = 0">天</div>
+      <div :class="`button-item ${unit == 1 && 'select-button-item'}`" @click="unit = 1">月</div>
+      <!-- <div class="button-item">季度</div> -->
+    </div>
+    <div style="height: 184px;" id="trendECharts"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {onMounted, ref,toRaw, defineProps, watch} from "vue"
+import * as echarts from 'echarts';
+import { GetTrendData } from '@/api/statistical/index.ts'
+const props = defineProps(['countyId','landType'])
+
+ const unit = ref(0)
+ const illegal = ref([])
+ const buban = ref([])
+ const fugeng = ref([])
+ const other = ref([])
+ const unillegal = ref([])
+ const time = ref([])
+
+let myChart:any = null
+
+onMounted(() => {
+  getData()
+})
+const getData = (isInit=true) => {
+  GetTrendData({countyid:props.countyId,type:props.landType,datatype:unit.value}).then(res => {
+    illegal.value = []
+    buban.value = []
+    fugeng.value = []
+    other.value = []
+    unillegal.value = []
+    time.value = []
+    console.log(111,res)
+    res.forEach(item => {
+      illegal.value.push(item.illegal)
+      buban.value.push(item.buban)
+      fugeng.value.push(item.fugeng)
+      other.value.push(item.other)
+      unillegal.value.push(item.unillegal)
+      time.value.push(item.time)
+    })
+    if(isInit){
+      initEcharts()
+    }else{
+      updataEcharts()
+    }
+    
+  })
+}
+const initEcharts = () => {
+  let chartDom = document.getElementById('trendECharts');
+  myChart = echarts.init(chartDom);
+  myChart.setOption({
+    xAxis: {
+      // type: 'category',
+      axisLabel:{
+        textStyle:{
+          align: 'center',
+          fontFamily: 'Arial',
+          fontWeight: '400',
+          fontSize: '7px',
+          color: '#5092C1',
+        },
+        interval: 0,  
+      },
+      axisLine:{
+        lineStyle:{
+          color: '#65C6E7',
+          opacity: 0.2,
+        }
+      },
+      boundaryGap: false,
+      data: time.value
+    },
+    yAxis: {
+      type: 'value',
+      splitLine:{
+        lineStyle:{
+          color: ['#65C6E7'],
+          opacity: 0.2,
+        }
+      },
+      axisLine:{
+        lineStyle:{
+          color: '#65ABE7',
+          opacity: 0.7,
+          fontFamily: 'Source Han Sans SC',
+          fontWeight: '200',
+          fontSize: '10px',
+        },
+      },
+    },
+    legend: {
+      right:'0px',
+      top: '5px',
+      orient:'vertical',
+      textStyle:{
+        fontFamily:'Microsoft YaHei',
+        fontWeight: '400',
+        fontSize: '10px',
+        color: '#FFFFFF',
+      },
+      data:['合法','违法','其他','拆除复耕','补办手续'],
+    },
+    series: [
+      {
+        name: '合法',
+        type: 'line',
+        data: illegal.value,
+        itemStyle:{
+          color:'#FF9C5D',
+        }
+      },
+      {
+        name: '违法',
+        type: 'line',
+        data: unillegal.value,
+        itemStyle:{
+          color:'#04CDF4',
+        }
+      },
+      {
+        name: '其他',
+        type: 'line',
+        data: other.value,
+        itemStyle:{
+          color:'#20A70A',
+        }
+      },
+      {
+        name: '拆除复耕',
+        type: 'line',
+        data: fugeng.value,
+        itemStyle:{
+          color:'#AD04F4',
+        }
+      },
+      {
+        name: '补办手续',
+        type: 'line',
+        data: buban.value,
+        itemStyle:{
+          color:'#F4E004',
+        }
+      },
+    ],
+    grid: {
+      left: '0%',
+      right: '30%',
+      bottom: '3%',
+      containLabel: true
+    },
+  });
+}
+const updataEcharts = () => {
+  let chartDom = document.getElementById('trendECharts');
+  let chart = echarts.getInstanceByDom(chartDom)
+  chart?.setOption({
+    xAxis: {
+      // type: 'category',
+      axisLabel:{
+        textStyle:{
+          align: 'center',
+          fontFamily: 'Arial',
+          fontWeight: '400',
+          fontSize: '7px',
+          color: '#5092C1',
+        },
+        interval: 0,  
+      },
+      axisLine:{
+        lineStyle:{
+          color: '#65C6E7',
+          opacity: 0.2,
+        }
+      },
+      boundaryGap: false,
+      data: time.value
+    },
+    yAxis: {
+      type: 'value',
+      splitLine:{
+        lineStyle:{
+          color: ['#65C6E7'],
+          opacity: 0.2,
+        }
+      },
+      axisLine:{
+        lineStyle:{
+          color: '#65ABE7',
+          opacity: 0.7,
+          fontFamily: 'Source Han Sans SC',
+          fontWeight: '200',
+          fontSize: '10px',
+        },
+      },
+    },
+    legend: {
+      right:'0px',
+      top: '5px',
+      orient:'vertical',
+      textStyle:{
+        fontFamily:'Microsoft YaHei',
+        fontWeight: '400',
+        fontSize: '10px',
+        color: '#FFFFFF',
+      },
+      data:['合法','违法','其他','拆除复耕','补办手续'],
+    },
+    series: [
+      {
+        name: '合法',
+        type: 'line',
+        data: illegal.value,
+        itemStyle:{
+          color:'#FF9C5D',
+        }
+      },
+      {
+        name: '违法',
+        type: 'line',
+        data: unillegal.value,
+        itemStyle:{
+          color:'#04CDF4',
+        }
+      },
+      {
+        name: '其他',
+        type: 'line',
+        data: other.value,
+        itemStyle:{
+          color:'#20A70A',
+        }
+      },
+      {
+        name: '拆除复耕',
+        type: 'line',
+        data: fugeng.value,
+        itemStyle:{
+          color:'#AD04F4',
+        }
+      },
+      {
+        name: '补办手续',
+        type: 'line',
+        data: buban.value,
+        itemStyle:{
+          color:'#F4E004',
+        }
+      },
+    ],
+    grid: {
+      left: '0%',
+      right: '30%',
+      bottom: '3%',
+      containLabel: true
+    },
+  });
+}
+watch(() => [props.countyId,props.landType,unit.value], () => {
+  getData(false)
+})
+</script>
+
+<style lang="scss" scoped>
+.sub-title{
+  height: 33px;
+  display: flex;
+  align-items: center;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 16px;
+  color: #FFFFFF;
+  text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
+  -webkit-background-clip: text;
+  text-shadow: 0px 2px 6px rgba(5,28,55,0.42);
+  background: url(./statistical/sub_title.png);
+  padding-left: 35px;
+}
+.show-charts-div{
+  height: 212px;
+  z-index: 1;
+  .button-div{
+    display: flex;
+    justify-content: end;
+    .button-item{
+      margin-top: 8px;
+      width: 52px;
+      height:20px;
+      margin-right:8px;
+      background: url(./statistical/charts_button.png) no-repeat;
+      background-size: cover;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      font-size: 10px;
+      color: rgba(255,255,255,0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+    .select-button-item{
+      background: url(./statistical/selected_charts_button.png) no-repeat;
+      background-size: cover;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      font-size: 10px;
+      color: #FFFFFF;
+    }
+  }
+}
+</style>
diff --git a/src/views/sys/exception/dataScreen/index.vue b/src/views/sys/exception/dataScreen/index.vue
new file mode 100644
index 00000000..9bdd248b
--- /dev/null
+++ b/src/views/sys/exception/dataScreen/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <!-- <div class="data-screen-div"> -->
+    <div class="right-data-div">
+      <TitleSelect :landType="landType" @changeLandType="changeLandType"/>
+      <template v-if="firstPage">
+        <TopSelect :landType="landType" :countyId="props.countyId"/>
+        <DataStatistics :landType="landType" :countyId="props.countyId"/>
+        <TrendStatistics :landType="landType" :countyId="props.countyId"/>
+      </template>
+      <template v-else>
+        <PatchSummary :countyId="props.countyId" :landType="landType"/>
+      </template>
+      
+      <div class="page-turning" @click="() => firstPage = !firstPage">{{firstPage? '下一页' : '上一页'}}</div>
+      <div class="right-decoration"></div>
+    </div>
+  <!-- </div> -->
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, defineProps } from "vue"
+import TitleSelect from './TitleSelect/index.vue'
+import TopSelect from './TopSelect/index.vue'
+import DataStatistics from './DataStatistics/index.vue'
+import TrendStatistics from './TrendStatistics/index.vue'
+import PatchSummary from './PatchSummary/index.vue'
+
+const props = defineProps(['countyId'])
+
+const firstPage = ref(true)
+const landType = ref('农用地')
+const changeLandType = (value) => {
+  landType.value = value
+}
+</script>
+
+<style lang="scss" scoped>
+// .data-screen-div{
+//   position: absolute;
+//   top: 0;
+//   left: 0;
+//   width: 100%;
+//   height: 100%;
+  .right-data-div{
+    position: absolute;
+    top:0;
+    width: 462px;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    right: 0px;
+    padding: 74px 42px 15px 21px;
+  }
+// }
+.page-turning{
+  position: absolute;
+  top: 31px;
+  right: 34px;
+  width: 74px;
+  height: 30px;
+  background: url(./statistical/page_turning.png);
+  background-size: cover;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 13px;
+  color: #FFFFFF;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 1;
+}
+.right-decoration{
+  position: absolute;
+  right: 10px;
+  width: 69px;
+  background: url(./statistical/right_decoration.png);
+  background-size: cover;
+  height: 100%;
+  top: 0;
+  z-index: 0;
+}
+</style>
diff --git a/src/views/sys/exception/mapComponent/left_county.vue b/src/views/sys/exception/mapComponent/left_county.vue
index 90cba612..d1b41abb 100644
--- a/src/views/sys/exception/mapComponent/left_county.vue
+++ b/src/views/sys/exception/mapComponent/left_county.vue
@@ -3,25 +3,26 @@
     <div class="county_div">
       <img
         id="left_direction_left"
-        src="/statistical/left_direction_left.png"
+        src="/statistical/left_direction_left1.png"
         :style="{
           position: 'relative',
           top: '42px',
+          left: '-4px',
           height: '31px',
           width: '31px',
         }"
         @click="scrollToElement('left')"
       />
-      <div ref="countyList" class="county_div_list" id="county_list">
-        <div v-for="(item, index) in list" :key="item.id" :id="item.id" @click="clickCounty(item)">
+      <div ref="countyList" class="county_div_list">
+        <div v-for="item in list" :key="item.id" :id="item.id" @click="clickCounty(item)">
           <span>{{ item.name }}</span>
           <img
             v-if="!item.isClick"
             id="left_county_nochoose"
             src="/statistical/left_county_nochoose.png"
             :style="{
-              marginLeft: '10px',
-              marginRight: '10px',
+              marginLeft: '11.5px',
+              marginRight: '11.5px',
             }"
           />
           <img
@@ -37,10 +38,11 @@
       </div>
       <img
         id="left_direction_right"
-        src="/statistical/left_direction_right.png"
+        src="/statistical/left_direction_right2.png"
         :style="{
           position: 'relative',
           top: '42px',
+          left: '4px',
           height: '31px',
           width: '31px',
         }"
@@ -48,7 +50,13 @@
       />
     </div>
     <div>
-      <img id="left_decorative_bottom" src="/statistical/left_decorative_bottom.png" />
+      <img
+        id="left_decorative_bottom"
+        src="/statistical/left_decorative_bottom.png"
+        :style="{
+          width: '840px',
+        }"
+      />
     </div>
   </div>
 </template>
@@ -65,17 +73,16 @@
   const scrollToElement = async (type) => {
     if (countyList.value) {
       if (type == 'left') {
-        countyList.value.scrollLeft = countyList.value.scrollLeft - 107;
+        countyList.value.scrollLeft = countyList.value.scrollLeft - 110;
       }
       if (type == 'right') {
-        countyList.value.scrollLeft = countyList.value.scrollLeft + 107;
+        countyList.value.scrollLeft = countyList.value.scrollLeft + 110;
       }
     }
   };
 
   // 选择区县
   function clickCounty(record) {
-    
     list.value.forEach((item) => {
       if (item.cascadeId == record.cascadeId) {
         item.isClick = true;
@@ -105,8 +112,7 @@
 <style lang="less" scoped>
   .county_div {
     display: flex;
-    left: 10px;
-    width: 927px;
+    width: 840px;
     position: relative;
     bottom: 10px;
 
@@ -114,16 +120,20 @@
       cursor: pointer;
       display: flex;
       overflow: hidden;
-      width: 856px;
+      width: 770px;
 
       span {
         position: relative;
         top: 35px;
-        left: 30px;
+        width: 110px;
+        display: inline-flex;
+        align-items: center;
+        text-align: center;
+        justify-content: center;
 
         font-family: Alibaba PuHuiTi;
-        font-weight: 500;
-        font-size: 14px;
+        font-weight: 900;
+        font-size: 15px;
         color: rgba(255, 255, 255, 0);
 
         background: linear-gradient(0deg, #6f81d4 0.146484375%, #ffffff 86.7919921875%);
diff --git a/src/views/sys/exception/mapComponent/left_layerButton.vue b/src/views/sys/exception/mapComponent/left_layerButton.vue
index c60736d5..897ebe7b 100644
--- a/src/views/sys/exception/mapComponent/left_layerButton.vue
+++ b/src/views/sys/exception/mapComponent/left_layerButton.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="layerbutton">
-    <div>
+    <div class="layerbutton_div">
       <img
         id="left_layerButton_1"
         src="/statistical/left_layerButton_1.png"
@@ -12,7 +12,7 @@
         src="/statistical/left_layerButton_3.png"
         @click="layerbutton_1"
       />
-      <span v-if="button_1" class="layerbutton_span">图斑</span>
+      <span v-if="button_1" class="layerbutton_div_span">图斑</span>
     </div>
     <div>
       <img
@@ -24,9 +24,9 @@
         v-if="button_2"
         id="left_layerButton_3"
         src="/statistical/left_layerButton_3.png"
-        @click="layerbutton_1"
+        @click="layerbutton_2"
       />
-      <span v-if="button_2" class="layerbutton_span">热力图</span>
+      <span v-if="button_2" class="layerbutton_div_span">热力图</span>
     </div>
   </div>
 </template>
@@ -51,35 +51,38 @@
 
 <style lang="less" scoped>
   .layerbutton {
-    &_span {
-      font-family: Adobe Heiti Std;
-      font-weight: normal;
-      font-size: 20px;
-      position: relative;
-      left: -110px;
-      color: #ffffff;
+    &_div {
+      margin-bottom: 15px;
+
+      &_span {
+        font-family: Adobe Heiti Std;
+        font-weight: normal;
+        font-size: 16px;
+        position: relative;
+        left: -85px;
+        top: 3px;
+        color: #ffffff;
+      }
     }
   }
 
   #left_layerButton_1 {
     position: relative;
-    width: 90px;
-    height: 73px;
-    margin-bottom: 15px;
+    width: 78px;
+    height: 63.5px;
     z-index: 1;
   }
   #left_layerButton_3 {
     position: relative;
-    left: -25px;
-    width: 128px;
-    height: 47px;
-    margin-bottom: 15px;
+    left: -10px;
+    width: 104px;
+    height: 41px;
     z-index: 0;
   }
   #left_layerButton_2 {
     position: relative;
-    width: 90px;
-    height: 73px;
+    width: 78px;
+    height: 63.5px;
     z-index: 1;
   }
 </style>
diff --git a/src/views/sys/exception/mapComponent/left_statisticalType.vue b/src/views/sys/exception/mapComponent/left_statisticalType.vue
index c23f622b..3ade67b3 100644
--- a/src/views/sys/exception/mapComponent/left_statisticalType.vue
+++ b/src/views/sys/exception/mapComponent/left_statisticalType.vue
@@ -4,32 +4,34 @@
       src="/statistical/left_statistical.png"
       :style="{
         position: 'relative',
+        height: '100px',
+        width: '200px',
       }"
     />
     <div class="statistical_div">
       <a-row>
-        <a-col :span="10" @click="handlerChangePolygonType('违法');">
-          <span class="statistical_div_dot" style="background:#FDA1A1;" />
+        <a-col :span="10" @click="handlerChangePolygonType('违法')">
+          <span class="statistical_div_dot" style="background: #fda1a1" />
           <span class="statistical_div_span">违法</span>
         </a-col>
-        <a-col :span="10" @click="handlerChangePolygonType('补办手续');">
-          <span class="statistical_div_dot" style="background:#ABFCFF;" />
+        <a-col :span="10" @click="handlerChangePolygonType('补办手续')">
+          <span class="statistical_div_dot" style="background: #abfcff" />
           <span class="statistical_div_span">补办手续</span>
         </a-col>
       </a-row>
       <a-row>
-        <a-col :span="10" @click="handlerChangePolygonType('合法');">
-          <span class="statistical_div_dot" style="background:#FFECB9;"/>
+        <a-col :span="10" @click="handlerChangePolygonType('合法')">
+          <span class="statistical_div_dot" style="background: #ffecb9" />
           <span class="statistical_div_span">合法</span>
         </a-col>
-        <a-col :span="10" @click="handlerChangePolygonType('拆除复耕');">
-          <span class="statistical_div_dot" style="background:#C2B3FB;" />
+        <a-col :span="10" @click="handlerChangePolygonType('拆除复耕')">
+          <span class="statistical_div_dot" style="background: #c2b3fb" />
           <span class="statistical_div_span">拆除复耕</span>
         </a-col>
       </a-row>
       <a-row>
-        <a-col :span="10" @click="handlerChangePolygonType('其他');">
-          <span class="statistical_div_dot" style="background:#C7FFBC;" />
+        <a-col :span="10" @click="handlerChangePolygonType('其他')">
+          <span class="statistical_div_dot" style="background: #c7ffbc" />
           <span class="statistical_div_span">其他</span>
         </a-col>
       </a-row>
@@ -38,34 +40,39 @@
 </template>
 
 <script setup lang="ts">
+  import { defineEmits } from 'vue';
+  const emits = defineEmits(['handlerChangePolygonType']);
 
-import {defineEmits} from "vue"
-const emits = defineEmits(["handlerChangePolygonType"])
-
-function handlerChangePolygonType(type:String):void{
-  emits("handlerChangePolygonType",type);
-}
+  function handlerChangePolygonType(type: String): void {
+    emits('handlerChangePolygonType', type);
+  }
 </script>
 
 <style lang="less" scoped>
   .statistical {
     &_div {
       position: relative;
-      top: -80px;
-      left: 15px;
+      top: -75px;
+      left: 30px;
 
       &_dot {
-        display:inline-block;
-        width: 10px;
-        height: 10px;
-        position:relative;
-        left:-5px;
+        display: inline-block;
+        width: 5px;
+        height: 5px;
+        position: relative;
+        left: -5px;
+        top: -2px;
+        margin-right: 5px;
+        margin-bottom: 20px;
+        // border-radius: 50%;
       }
 
       &_span {
+        position: relative;
+        top: -20px;
         font-family: Microsoft YaHei;
         font-weight: 400;
-        font-size: 18px;
+        font-size: 13px;
         color: #7ebbff;
       }
     }