diff --git a/src/views/backOfficeSystem/IntelligentControl/warningControl/components/bkjbtj.vue b/src/views/backOfficeSystem/IntelligentControl/warningControl/components/WarningCount.vue
similarity index 100%
rename from src/views/backOfficeSystem/IntelligentControl/warningControl/components/bkjbtj.vue
rename to src/views/backOfficeSystem/IntelligentControl/warningControl/components/WarningCount.vue
diff --git a/src/views/backOfficeSystem/IntelligentControl/warningControl/components/gjtj.vue b/src/views/backOfficeSystem/IntelligentControl/warningControl/components/gjtj.vue
deleted file mode 100644
index 381a197..0000000
--- a/src/views/backOfficeSystem/IntelligentControl/warningControl/components/gjtj.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<template>
-  <div id="circlecz" class="circlecz" style="width: 100%; height: 100%"></div>
-</template>
-
-<script setup>
-import * as echarts from "echarts";
-import { ref, onMounted, watch, defineProps } from "vue";
-
-function lineChartFn() {
-  var chartDom = document.getElementById("circlecz");
-  var myChart = echarts.init(chartDom);
-  var option;
-  option = {
-    legend: {
-      type: "plain",
-      show: true,
-      right: 0,
-      textStyle: { color: "#ddd" },
-      data: [
-        { name: "总数" },
-        { name: "已处置" }
-      ]
-    },
-    tooltip: {
-      trigger: "axis",
-      axisPointer: {
-        type: "shadow"
-      }
-    },
-    grid: {
-      top: "25%",
-      right: "10%",
-      left: "10%",
-      bottom: "22%"
-    },
-    xAxis: [
-      {
-        type: "category",
-        data: ['巴宜区','工布江达县','波密县','朗县','墨脱县','察隅县','米林县'],
-        axisLine: {
-          lineStyle: {
-            color: "rgba(255,255,255,0.12)"
-          }
-        },
-        axisLabel: {
-          margin: 10,
-          color: "#e2e9ff",
-          textStyle: {
-            fontSize: 14
-          }
-        }
-      }
-    ],
-    yAxis: [
-      {
-        // name: '单位：万元',
-        axisLabel: {
-          formatter: "{value}",
-          color: "#e2e9ff"
-        },
-        axisLine: {
-          show: false,
-          lineStyle: {
-            color: "rgba(255,255,255,1)"
-          }
-        },
-        splitLine: {
-          lineStyle: {
-            color: "rgba(255,255,255,0.12)"
-          }
-        }
-      }
-    ],
-    series: [
-      {
-        name: "总数",
-        type: "bar",
-        data: [10,20,30,40,50,60,70],
-        barWidth: "10px",
-        itemStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0,0,0,1,[
-              {
-                  offset: 0,
-                  color: "rgba(0,244,255,1)" // 0% 处的颜色
-                },
-                {
-                  offset: 1,
-                  color: "rgba(0,77,167,1)" // 100% 处的颜色
-                }
-              ],
-              false
-            ),
-          }
-        },
-        markPoint: {
-          symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
-          symbolSize: [11, 4], // 设置扁圆的宽和高
-          itemStyle: {
-            color: '#087df9' // 圆盘颜色
-          },
-          data: [10,20,30,40,50,60,70].map((obj, index) => ({
-            xAxis: index, // 对应柱子的横坐标
-            yAxis: obj + 0 // 柱子的值加上一些偏移量
-          }))
-        },
-      },
-      {
-        name: "已处置",
-        type: "bar",
-        data: [10,20,30,40,50,60,70],
-        barWidth: "10px",
-        itemStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0,0,0,1,
-              [
-                {
-                  offset: 0,
-                  color: "rgba(24, 232, 229, 1)" // 0% 处的颜色
-                },
-                {
-                  offset: 1,
-                  color: "rgba(3, 110, 83, 1)" // 100% 处的颜色
-                }
-              ],
-              false
-            ),
-          }
-        },
-        markPoint: {
-          symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
-          symbolSize: [11, 4], // 设置扁圆的宽和高
-          itemStyle: {
-            color: '#00FFFF' // 圆盘颜色
-          },
-          data: [10,20,30,40,50,60,70].map((obj, index) => ({
-            xAxis: index, // 对应柱子的横坐标
-            yAxis: obj + 0 // 柱子的值加上一些偏移量
-          }))
-        },
-      },
-    ]
-  };
-
-  option && myChart.setOption(option);
-  window.onresize = function () {
-    myChart.resize();
-  };
-  document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
-}
-onMounted(() => {
-  lineChartFn();
-});
-</script>
-
-<style lang="scss" scoped>
-.circlecz {
-  height: 100%;
-  background: rgba(0,29,75,0.6);
-  border-radius: 0 0 4px 4px;
-}
-</style>
diff --git a/src/views/backOfficeSystem/IntelligentControl/warningControl/components/ryCount.vue b/src/views/backOfficeSystem/IntelligentControl/warningControl/components/ryCount.vue
deleted file mode 100644
index 58a8f35..0000000
--- a/src/views/backOfficeSystem/IntelligentControl/warningControl/components/ryCount.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-  <div class="carCnt_bottom relative flex align-center">
-    <div class="bottom-item-left">
-      <div class="imgIcon"></div>
-      <div class="leftImg">
-        <div class="sirxle"></div>
-      </div>
-    </div>
-    <ul class="bottom-item-right noScollLine">
-      <li class="itemChild" v-for="item in dataObj.countList" :key="item">
-        <div class="label">
-          <span class="imgicon mr10" :style="{ background: item.color }"></span>
-          {{ item.label }}
-        </div>
-        <div class="num">{{ item.num }}</div>
-        <div class="per" :style="{ color: item.color }">{{ item.persont }}</div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup>
-import { onMounted, ref, reactive,defineProps, onUnmounted } from "vue";
-const dataObj = reactive({
-  btns:['今日','本周','自定义'],//按钮
-  head:{num:0,hb:0,tb:0},
-  countList:[
-    {color:'#F57100',label:'刑事重点人员',num:0,persont:'0%'},
-    {color:'#FFD15C',label:'禁毒重点人员',num:0,persont:'0%'},
-    {color:'#0072FF',label:'治安重点人员',num:0,persont:'0%'},
-    {color:'#00FFFF',label:'经侦重点人员',num:0,persont:'0%'},
-    {color:'#09FF66',label:'其他',num:0,persont:'0%'},
-  ]
-})
-</script>
-
-<style lang="scss" scoped>
-@mixin textColor($color1, $color2) {
-  background-image: linear-gradient(0deg, $color1 0%, $color2 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-@mixin beforeText($width, $height, $left: 0, $top: 0) {
-  position: absolute;
-  content: "";
-  left: $left;
-  top: $top;
-  height: $height;
-  width: $width;
-}
-.carCnt_bottom {
-  height: 100%;
-  position: relative;
-  background: rgba(0,29,75,0.6);
-  border-radius: 0 0 4px 4px;
-  .bottom-item-left {
-    width: 120px;
-    height: 120px;
-    position: absolute;
-    left: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    .imgIcon {
-      position: absolute;
-      left: 39px;
-      top: 40px;
-      width: 42px;
-      height: 40px;
-      background: url("~@/assets/images/imgIcon1.png") no-repeat center center;
-      background-size: 100% 100%;
-      border-radius: 50%;
-      animation: spin 10s infinite linear;
-    }
-    .leftImg {
-      width: 100%;
-      height: 100%;
-      &::before {
-        position: absolute;
-        content: "";
-        left: 0;
-        top: 0;
-        width: 120px;
-        height: 120px;
-        background: url("~@/assets/images/sircleOut.png") no-repeat center
-          center;
-        background-size: 100% 100%;
-        animation: revoleCrile 10s infinite linear;
-      }
-      .sirxle {
-        position: absolute;
-        width: 91px;
-        height: 91px;
-        left: 15px;
-        top: 15px;
-        background: url("~@/assets/images/sircleIn.png") no-repeat;
-        background-size: 100% 100%;
-      }
-    }
-  }
-  .bottom-item-right {
-    width: calc(100% - 150px);
-    height: 100%;
-    overflow: hidden;
-    overflow-y: auto;
-    margin-left: 30px;
-    position: absolute;
-    left: 116px;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    .itemChild {
-      display: flex;
-      align-items: center;
-      height: 26px;
-      border-bottom: 1px dashed #0072ff;
-    }
-    .label {
-      width: 60%;
-      .imgicon {
-        display: inline-block;
-        width: 13px;
-        height: 6px;
-        border-radius: 2px;
-        transform: rotate(-3deg) skew(5deg, 5deg);
-      }
-    }
-    .num {
-      width: 20%;
-    }
-    .per {
-      width: 20%;
-    }
-  }
-}
-@keyframes spin {
-  to {
-    transform: rotate((1turn));
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/backOfficeSystem/IntelligentControl/warningControl/index.vue b/src/views/backOfficeSystem/IntelligentControl/warningControl/index.vue
index e31c924..fef2ec3 100644
--- a/src/views/backOfficeSystem/IntelligentControl/warningControl/index.vue
+++ b/src/views/backOfficeSystem/IntelligentControl/warningControl/index.vue
@@ -32,40 +32,31 @@
     <!-- 右边模块 -->
     <div class="rightList">
       <!-- 第一部门 -->
-      <div>
-        <div class="hed flex align-center">
-          <span @click="active = it" :class="active == it ? 'active' : ''" class="f14 mr10 pointer" v-for="it in btn.bkBtn" :key="it">{{ it }}</span>
+      <div class="model-commom">
+        <div class="hed flex align-center">区域统计</div>
+        <div class="comm-cnt">
+          <BarHatEcharts echartsId="qylxEcharts" :data="list.QylxDate"></BarHatEcharts>
         </div>
-        <Count></Count>
       </div>
       <!-- 第二部分 -->
-      <div class="mt10">
-        <div class="hed flex align-center">布控级别统计</div>
-        <div style="width: 100%; height: 170px">
-          <Bkjbtj></Bkjbtj>
+      <div class="model-commom mt10">
+        <div class="hed flex align-center">人员类型统计</div>
+        <div class="comm-cnt">
+          <BarHatEcharts echartsId="rylxEcharts" :data="list.RylxDate"></BarHatEcharts>
         </div>
       </div>
       <!-- 第三部分 -->
-      <div class="mt10">
-        <div class="hed flex align-center">
-          <span
-            @click="active1 = it"
-            :class="active1 == it ? 'active' : ''"
-            class="f14 mr10 pointer"
-            v-for="it in btn.yrBtn"
-            :key="it"
-            >{{ it }}</span
-          >
-        </div>
-        <div style="width: 100%; height: 170px">
-          <RyCount></RyCount>
+      <div class="model-commom mt10">
+        <div class="hed flex align-center">感知源统计</div>
+        <div class="comm-cnt">
+          <BarHatEcharts echartsId="gzyEcharts" :data="list.GzyDate"></BarHatEcharts>
         </div>
       </div>
       <!-- 第四部分 -->
-      <div class="mt10">
-        <div class="hed flex align-center">轨迹统计</div>
-        <div style="width: 100%; height: 170px">
-          <Gjtj></Gjtj>
+      <div class="model-commom mt10">
+        <div class="hed flex align-center">预警等级统计</div>
+        <div class="comm-cnt">
+          <WarningCount></WarningCount>
         </div>
       </div>
     </div>
@@ -81,9 +72,8 @@
 import * as MOSTY from "@/components/MyComponents/index";
 import YjItem from "./components/yjItem.vue";
 import Count from "./components/count.vue";
-import Bkjbtj from "./components/bkjbtj.vue";
-import RyCount from "./components/ryCount.vue";
-import Gjtj from "./components/gjtj.vue";
+import WarningCount from "./components/WarningCount.vue";
+import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
 import { reactive, ref } from "vue";
 const listQuery = ref({
   keyword: ""
@@ -110,6 +100,29 @@ const search = reactive({
 const searchForm = ref({
   keyword: ""
 });
+const list = reactive({
+  GzyDate: {
+    xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
+    list:[
+      { name: "总数", value: [10,20,30,40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
+      { name: "已处置", value: [10,20,30,40,50,60,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
+    ],
+  },
+  RylxDate: {
+    xDate: ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6'],
+    list:[
+      { name: "总数", value: [10,20,30,40,50,60] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
+      { name: "已处置", value: [10,20,30,40,50,60],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
+    ],
+  },
+  QylxDate: {
+    xDate: ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6'],
+    list:[
+      { name: "总数", value: [10,20,30,40,50,60] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
+      { name: "已处置", value: [10,20,30,40,50,60],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
+    ],
+  },
+})
 const personList = ref([
   {
     name: "张三",
@@ -220,9 +233,12 @@ const active1 = ref("人员身份标签统计");
     top: 10px;
     width: 427px;
     height: calc(100% - 20px);
-    .active {
-      font-size: 18px;
-      font-family: "YSBTH";
+    .model-commom{
+      height: calc((100% / 4) - 10px);
+    }
+    .comm-cnt{
+      height: calc(100% - 40px);
+      background:  rgba(0,29,75,0.6);
     }
   }
   .footBox{
diff --git a/src/views/home/echarts/barHatEcharts.vue b/src/views/home/echarts/barHatEcharts.vue
new file mode 100644
index 0000000..b6069be
--- /dev/null
+++ b/src/views/home/echarts/barHatEcharts.vue
@@ -0,0 +1,138 @@
+<template>
+  <div style="height:100%;width:100%" :id="echartsId"></div>
+</template>
+
+<script setup>
+import * as echarts from "echarts";
+import { nextTick , onMounted, watch, defineProps } from "vue";
+const props = defineProps({
+  echartsId:{
+    type:String,
+    default:'barHatId'
+  },
+  data:{
+    type:Object,
+    default:{
+      xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
+      list:[
+        { name: "总数", value: [10,20,30,40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
+        { name: "已处置", value: [10,20,30,40,50,60,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
+      ],
+    }
+  }
+});
+
+watch(()=>props.data,val=>{
+  nextTick(()=>{ handleDate() })
+},{immediate:true,deep:true})
+
+// 处理数据
+function handleDate() {
+  let xDate = props.data.xDate;
+  let legend = props.data.list.map(v=>{return {name:v.name}})
+  let series = props.data.list.map((item,i)=>{
+    let obj = {
+      name: item.name,
+      type: "bar",
+      data: item.value,
+      barWidth: "10px",
+      itemStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0,0,0,1,[
+            { offset: 0, color: item.color ? item.color[0] : "rgba(0,244,255,1)" },
+            { offset: 1,  color: item.color ? item.color[1] : "rgba(0,77,167,1)" }],false),
+        }
+      },
+      markPoint: {
+        symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
+        symbolSize: [11, 4], // 设置扁圆的宽和高
+        itemStyle: { color: item.hatColor || '#087df9'   },// 圆盘颜色
+        data: item.value.map((obj, index) => ({
+          xAxis: index, // 对应柱子的横坐标
+          yAxis: obj + 0 // 柱子的值加上一些偏移量
+        }))
+      },
+    }
+    return obj
+  })
+  lineChartFn(xDate,legend,series)
+}
+
+function lineChartFn(xDate,legend,series) {
+  var myChart = echarts.init(document.getElementById(props.echartsId));
+  var option = {
+    legend: {
+      type: "plain",
+      show: true,
+      right: 0,
+      textStyle: { color: "#ddd" },
+      data: legend
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      }
+    },
+    grid: {
+      top: "25%",
+      right: "5%",
+      left: "10%",
+      bottom: "22%"
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: xDate,
+        axisLine: {
+          lineStyle: {
+            color: "rgba(255,255,255,0.12)"
+          }
+        },
+        axisLabel: {
+          margin: 10,
+          color: "#e2e9ff",
+          textStyle: {
+            fontSize: 14
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        // name: '单位：万元',
+        axisLabel: {
+          formatter: "{value}",
+          color: "#e2e9ff"
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: "rgba(255,255,255,1)"
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: "rgba(255,255,255,0.12)"
+          }
+        }
+      }
+    ],
+    series: series
+  };
+  option && myChart.setOption(option);
+  window.onresize = function () { myChart.resize(); };
+  document.getElementById(props.echartsId).setAttribute("_echarts_instance_", "");
+}
+onMounted(() => {
+  lineChartFn();
+});
+</script>
+
+<style lang="scss" scoped>
+.circlecz {
+  height: 100%;
+  background: rgba(0,29,75,0.6);
+  border-radius: 0 0 4px 4px;
+}
+</style>
diff --git a/src/views/home/model/qblyType.vue b/src/views/home/model/qblyType.vue
index fe4cccc..2102cf0 100644
--- a/src/views/home/model/qblyType.vue
+++ b/src/views/home/model/qblyType.vue
@@ -3,161 +3,25 @@
     <span class="title">情报来源类型</span>
   </div> 
   <div class="comom-cnt">
-    <div id="qbltBox" class="qbltBox" style="width: 100%; height: 100%"></div>
+    <BarHatEcharts echartsId="qbltBox" :data="list"></BarHatEcharts>
   </div>
 </template>
 
 <script setup>
 import LineEcharts from "../echarts/moreLineEcharts.vue";
+import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
 import * as echarts from "echarts";
-import { ref, onMounted, watch, defineProps } from "vue";
-
+import { ref, onMounted, watch, defineProps, reactive } from "vue";
+const list = reactive({
+  xDate: ['110警情','人力情报','系统采集','民警处置单'],
+  list:[
+    { name: "总数", value: [40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
+    { name: "已处置", value: [10,40,50,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
+  ],
+})
 onMounted(() => {
-  lineChartFn();
 });
 
-function lineChartFn() {
-  var chartDom = document.getElementById("qbltBox");
-  var myChart = echarts.init(chartDom);
-  var option;
-  option = {
-    legend: {
-      type: "plain",
-      show: true,
-      right: 0,
-      textStyle: { color: "#ddd" },
-      data: [
-        { name: "总数" },
-        { name: "已处置" }
-      ]
-    },
-    tooltip: {
-      trigger: "axis",
-      axisPointer: {
-        type: "shadow"
-      }
-    },
-    grid: {
-      top: "25%",
-      right: "5%",
-      left: "5%",
-      bottom: "22%"
-    },
-    xAxis: [
-      {
-        type: "category",
-        data: ['110警情','人力情报','系统采集','民警处置单'],
-        axisLine: {
-          lineStyle: {
-            color: "rgba(255,255,255,0.12)"
-          }
-        },
-        axisLabel: {
-          margin: 10,
-          color: "#e2e9ff",
-          textStyle: {
-            fontSize: 14
-          }
-        }
-      }
-    ],
-    yAxis: [
-      {
-        axisLabel: {
-          formatter: "{value}",
-          color: "#e2e9ff"
-        },
-        axisLine: {
-          show: false,
-          lineStyle: {
-            color: "rgba(255,255,255,1)"
-          }
-        },
-        splitLine: {
-          lineStyle: {
-            color: "rgba(255,255,255,0.12)"
-          }
-        }
-      }
-    ],
-    series: [
-      {
-        name: "总数",
-        type: "bar",
-        data: [10,20,30,40],
-        barWidth: "10px",
-        itemStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0,0,0,1,[
-              {
-                  offset: 0,
-                  color: "rgba(0,244,255,1)" // 0% 处的颜色
-                },
-                {
-                  offset: 1,
-                  color: "rgba(0,77,167,1)" // 100% 处的颜色
-                }
-              ],
-              false
-            ),
-          }
-        },
-        markPoint: {
-          symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
-          symbolSize: [11, 4], // 设置扁圆的宽和高
-          itemStyle: {
-            color: '#087df9' // 圆盘颜色
-          },
-          data: [10,20,30,40].map((obj, index) => ({
-            xAxis: index, // 对应柱子的横坐标
-            yAxis: obj + 0 // 柱子的值加上一些偏移量
-          }))
-        },
-      },
-      {
-        name: "已处置",
-        type: "bar",
-        data: [40,50,60,70],
-        barWidth: "10px",
-        itemStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0,0,0,1,
-              [
-                {
-                  offset: 0,
-                  color: "rgba(24, 232, 229, 1)" // 0% 处的颜色
-                },
-                {
-                  offset: 1,
-                  color: "rgba(3, 110, 83, 1)" // 100% 处的颜色
-                }
-              ],
-              false
-            ),
-          }
-        },
-        markPoint: {
-          symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
-          symbolSize: [11, 4], // 设置扁圆的宽和高
-          itemStyle: {
-            color: '#00FFFF' // 圆盘颜色
-          },
-          data: [40,50,60,70].map((obj, index) => ({
-            xAxis: index, // 对应柱子的横坐标
-            yAxis: obj + 0 // 柱子的值加上一些偏移量
-          }))
-        },
-      },
-    ]
-  };
-
-  option && myChart.setOption(option);
-  window.onresize = function () {
-    myChart.resize();
-  };
-  document.getElementById("qbltBox").setAttribute("_echarts_instance_", "");
-}
-
 </script>