diff --git a/src/views/oneMap/FloodStuationReview/chartCl.vue b/src/views/oneMap/FloodStuationReview/chartCl.vue
new file mode 100644
index 0000000..a2ed3d3
--- /dev/null
+++ b/src/views/oneMap/FloodStuationReview/chartCl.vue
@@ -0,0 +1,282 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+import moment from 'moment';
+const emit = defineEmits(['updateKey']);
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+let activeName = ref(null);
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    legend: {
+      top: nowSize(10, 1920),
+      itemHeight: nowSize(10, 1920),
+      itemWidth: nowSize(10, 1920),
+      x: '34%',
+      itemGap: nowSize(50, 1920),
+      textStyle: {
+        color: '#FFFFFF',
+        fontSize: 14,
+      },
+      orient: 'horizontal',
+      icon: 'circle',
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      formatter: function (params) {
+        if (params[0].seriesName == '行驶里程') {
+          return params[0].seriesName + ' : ' + params[0].value + '公里';
+        } else {
+          return params[0].seriesName + ' : ' + params[0].value + '分钟';
+        }
+      },
+    },
+    grid: [
+      {
+        show: false,
+        left: '20%',
+        top: nowSize(44, 1920),
+        bottom: nowSize(6, 1920),
+        containLabel: true,
+        width: '38%',
+      },
+      {
+        show: false,
+        left: '20%',
+        top: nowSize(44, 1920),
+        bottom: nowSize(26, 1920),
+        width: '0',
+        containLabel: false,
+      },
+      {
+        show: false,
+        right: '4%',
+        top: nowSize(44, 1920),
+        bottom: nowSize(6, 1920),
+        containLabel: true,
+        width: '38%',
+      },
+    ],
+    xAxis: [
+      {
+        type: 'value',
+        inverse: true,
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          color: '#D8F1FF',
+          fontSize: nowSize(12, 1920),
+        },
+        splitLine: {
+          //网格线
+          lineStyle: {
+            type: 'dashed',
+            color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+          },
+          show: true, //隐藏或显示
+        },
+      },
+      {
+        gridIndex: 1,
+        show: false,
+      },
+      {
+        gridIndex: 2,
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          color: '#D8F1FF',
+          fontSize: nowSize(12, 1920),
+        },
+        splitLine: {
+          //网格线
+          lineStyle: {
+            type: 'dashed',
+            color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+          },
+          show: true, //隐藏或显示
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        inverse: true,
+        position: 'right',
+        splitArea: {
+          show: true,
+          areaStyle: {
+            color: ['rgba(77, 149, 217, 0.15)', 'rgba(77, 149, 217,0)'],
+          },
+        },
+        axisLine: {
+          show: false,
+        },
+
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        data: props.echartData.xData,
+      },
+      {
+        gridIndex: 1,
+        type: 'category',
+        inverse: true,
+        position: 'left',
+        triggerEvent: true,
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          // color: "rgba(255, 255, 255, 1)",
+          fontSize: nowSize(14, 1920),
+          color: (value, index) => {
+            if (activeName.value == index) {
+              return '#2CBBB6';
+            } else {
+              return 'rgba(255, 255, 255, 1)';
+            }
+          },
+        },
+        data: props.echartData.xData,
+      },
+      {
+        gridIndex: 2,
+        type: 'category',
+        inverse: true,
+        position: 'left',
+        splitArea: {
+          show: true,
+          areaStyle: {
+            color: ['rgba(77, 149, 217, 0.15)', 'rgba(77, 149, 217,0)'],
+          },
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: 'rgba(255, 255, 255, 0.5)',
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        data: props.echartData.xData,
+      },
+    ],
+    series: [
+      {
+        name: '行驶里程',
+        type: 'bar',
+        barWidth: 12,
+        stack: '1',
+        barWidth: nowSize(10, 1920),
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(0, 238, 253, 1)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(0, 238, 253, 0)',
+            },
+          ]),
+        },
+        data: props.echartData.data1,
+      },
+      {
+        name: '行驶时长',
+        type: 'bar',
+        stack: '2',
+        barWidth: 12,
+        xAxisIndex: 2,
+        yAxisIndex: 2,
+        barWidth: nowSize(10, 1920),
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(255, 255, 0, 0)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(255, 255, 0, 1)',
+            },
+          ]),
+        },
+        data: props.echartData.data2,
+      },
+    ],
+  });
+  myChart.value.on('click', params => {
+    activeName.value = params.dataIndex;
+    emit('updateKey', activeName.value);
+    myChart.value.resize();
+  });
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>

diff --git a/src/views/oneMap/FloodStuationReview/chartCl.vue b/src/views/oneMap/FloodStuationReview/chartCl.vue
new file mode 100644
index 0000000..a2ed3d3
--- /dev/null
+++ b/src/views/oneMap/FloodStuationReview/chartCl.vue
@@ -0,0 +1,282 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+import moment from 'moment';
+const emit = defineEmits(['updateKey']);
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+let activeName = ref(null);
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    legend: {
+      top: nowSize(10, 1920),
+      itemHeight: nowSize(10, 1920),
+      itemWidth: nowSize(10, 1920),
+      x: '34%',
+      itemGap: nowSize(50, 1920),
+      textStyle: {
+        color: '#FFFFFF',
+        fontSize: 14,
+      },
+      orient: 'horizontal',
+      icon: 'circle',
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      formatter: function (params) {
+        if (params[0].seriesName == '行驶里程') {
+          return params[0].seriesName + ' : ' + params[0].value + '公里';
+        } else {
+          return params[0].seriesName + ' : ' + params[0].value + '分钟';
+        }
+      },
+    },
+    grid: [
+      {
+        show: false,
+        left: '20%',
+        top: nowSize(44, 1920),
+        bottom: nowSize(6, 1920),
+        containLabel: true,
+        width: '38%',
+      },
+      {
+        show: false,
+        left: '20%',
+        top: nowSize(44, 1920),
+        bottom: nowSize(26, 1920),
+        width: '0',
+        containLabel: false,
+      },
+      {
+        show: false,
+        right: '4%',
+        top: nowSize(44, 1920),
+        bottom: nowSize(6, 1920),
+        containLabel: true,
+        width: '38%',
+      },
+    ],
+    xAxis: [
+      {
+        type: 'value',
+        inverse: true,
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          color: '#D8F1FF',
+          fontSize: nowSize(12, 1920),
+        },
+        splitLine: {
+          //网格线
+          lineStyle: {
+            type: 'dashed',
+            color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+          },
+          show: true, //隐藏或显示
+        },
+      },
+      {
+        gridIndex: 1,
+        show: false,
+      },
+      {
+        gridIndex: 2,
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          color: '#D8F1FF',
+          fontSize: nowSize(12, 1920),
+        },
+        splitLine: {
+          //网格线
+          lineStyle: {
+            type: 'dashed',
+            color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+          },
+          show: true, //隐藏或显示
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        inverse: true,
+        position: 'right',
+        splitArea: {
+          show: true,
+          areaStyle: {
+            color: ['rgba(77, 149, 217, 0.15)', 'rgba(77, 149, 217,0)'],
+          },
+        },
+        axisLine: {
+          show: false,
+        },
+
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        data: props.echartData.xData,
+      },
+      {
+        gridIndex: 1,
+        type: 'category',
+        inverse: true,
+        position: 'left',
+        triggerEvent: true,
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          // color: "rgba(255, 255, 255, 1)",
+          fontSize: nowSize(14, 1920),
+          color: (value, index) => {
+            if (activeName.value == index) {
+              return '#2CBBB6';
+            } else {
+              return 'rgba(255, 255, 255, 1)';
+            }
+          },
+        },
+        data: props.echartData.xData,
+      },
+      {
+        gridIndex: 2,
+        type: 'category',
+        inverse: true,
+        position: 'left',
+        splitArea: {
+          show: true,
+          areaStyle: {
+            color: ['rgba(77, 149, 217, 0.15)', 'rgba(77, 149, 217,0)'],
+          },
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: 'rgba(255, 255, 255, 0.5)',
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        data: props.echartData.xData,
+      },
+    ],
+    series: [
+      {
+        name: '行驶里程',
+        type: 'bar',
+        barWidth: 12,
+        stack: '1',
+        barWidth: nowSize(10, 1920),
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(0, 238, 253, 1)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(0, 238, 253, 0)',
+            },
+          ]),
+        },
+        data: props.echartData.data1,
+      },
+      {
+        name: '行驶时长',
+        type: 'bar',
+        stack: '2',
+        barWidth: 12,
+        xAxisIndex: 2,
+        yAxisIndex: 2,
+        barWidth: nowSize(10, 1920),
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(255, 255, 0, 0)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(255, 255, 0, 1)',
+            },
+          ]),
+        },
+        data: props.echartData.data2,
+      },
+    ],
+  });
+  myChart.value.on('click', params => {
+    activeName.value = params.dataIndex;
+    emit('updateKey', activeName.value);
+    myChart.value.resize();
+  });
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
index 449dcf6..044b287 100644
--- a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
@@ -18,7 +18,9 @@
       <div class="icon"></div>
       <div class="text">车辆调度</div>
     </div>
-    <div class="VehiclEcharts"></div>
+    <div class="VehiclEcharts">
+      <ChartCl :echartData="clData" :refresh="clData.refresh" />
+    </div>
   </div>
   <!-- 物资调度 -->
   <div class="MaterialScheduling">
@@ -31,7 +33,14 @@
 </template>
 
 <script setup name="ZHPS">
+import ChartCl from './chartCl.vue';
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
+const clData = {
+  xData: ['鄂A6JU85'],
+  data1: [9.8],
+  data2: [21],
+  refresh: '1',
+};
 </script>
 
 <style lang="scss" scoped>
@@ -61,7 +70,10 @@
         line-height: 25px;
         position: relative;
         left: 10px;
-        box-shadow: inset 0px -7px 10px -5px #47eef38a;
+        background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+        height: 10px;
+        line-height: 0px;
+        margin-top: 10px;
       }
     }
     .ScheduEcharts {
@@ -97,15 +109,16 @@
       line-height: 25px;
       position: relative;
       left: 10px;
-      box-shadow: inset 0px -7px 10px -5px #47eef38a;
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      height: 10px;
+      line-height: 0px;
+      margin-top: 10px;
     }
   }
   .VehiclEcharts {
     margin: 10px auto;
     width: 410px;
     height: calc(100% - 45px);
-    background: url('@/assets/images/fhpl/cldd.png') no-repeat;
-    background-size: 100% 100%;
   }
 }
 .MaterialScheduling {
@@ -131,7 +144,10 @@
       line-height: 25px;
       position: relative;
       left: 10px;
-      box-shadow: inset 0px -7px 10px -5px #47eef38a;
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      height: 10px;
+      line-height: 0px;
+      margin-top: 10px;
     }
   }
   .MaterialEcharts {

diff --git a/src/views/oneMap/FloodStuationReview/chartCl.vue b/src/views/oneMap/FloodStuationReview/chartCl.vue
new file mode 100644
index 0000000..a2ed3d3
--- /dev/null
+++ b/src/views/oneMap/FloodStuationReview/chartCl.vue
@@ -0,0 +1,282 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+import moment from 'moment';
+const emit = defineEmits(['updateKey']);
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+let activeName = ref(null);
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    legend: {
+      top: nowSize(10, 1920),
+      itemHeight: nowSize(10, 1920),
+      itemWidth: nowSize(10, 1920),
+      x: '34%',
+      itemGap: nowSize(50, 1920),
+      textStyle: {
+        color: '#FFFFFF',
+        fontSize: 14,
+      },
+      orient: 'horizontal',
+      icon: 'circle',
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      formatter: function (params) {
+        if (params[0].seriesName == '行驶里程') {
+          return params[0].seriesName + ' : ' + params[0].value + '公里';
+        } else {
+          return params[0].seriesName + ' : ' + params[0].value + '分钟';
+        }
+      },
+    },
+    grid: [
+      {
+        show: false,
+        left: '20%',
+        top: nowSize(44, 1920),
+        bottom: nowSize(6, 1920),
+        containLabel: true,
+        width: '38%',
+      },
+      {
+        show: false,
+        left: '20%',
+        top: nowSize(44, 1920),
+        bottom: nowSize(26, 1920),
+        width: '0',
+        containLabel: false,
+      },
+      {
+        show: false,
+        right: '4%',
+        top: nowSize(44, 1920),
+        bottom: nowSize(6, 1920),
+        containLabel: true,
+        width: '38%',
+      },
+    ],
+    xAxis: [
+      {
+        type: 'value',
+        inverse: true,
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          color: '#D8F1FF',
+          fontSize: nowSize(12, 1920),
+        },
+        splitLine: {
+          //网格线
+          lineStyle: {
+            type: 'dashed',
+            color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+          },
+          show: true, //隐藏或显示
+        },
+      },
+      {
+        gridIndex: 1,
+        show: false,
+      },
+      {
+        gridIndex: 2,
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          color: '#D8F1FF',
+          fontSize: nowSize(12, 1920),
+        },
+        splitLine: {
+          //网格线
+          lineStyle: {
+            type: 'dashed',
+            color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+          },
+          show: true, //隐藏或显示
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        inverse: true,
+        position: 'right',
+        splitArea: {
+          show: true,
+          areaStyle: {
+            color: ['rgba(77, 149, 217, 0.15)', 'rgba(77, 149, 217,0)'],
+          },
+        },
+        axisLine: {
+          show: false,
+        },
+
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        data: props.echartData.xData,
+      },
+      {
+        gridIndex: 1,
+        type: 'category',
+        inverse: true,
+        position: 'left',
+        triggerEvent: true,
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          // color: "rgba(255, 255, 255, 1)",
+          fontSize: nowSize(14, 1920),
+          color: (value, index) => {
+            if (activeName.value == index) {
+              return '#2CBBB6';
+            } else {
+              return 'rgba(255, 255, 255, 1)';
+            }
+          },
+        },
+        data: props.echartData.xData,
+      },
+      {
+        gridIndex: 2,
+        type: 'category',
+        inverse: true,
+        position: 'left',
+        splitArea: {
+          show: true,
+          areaStyle: {
+            color: ['rgba(77, 149, 217, 0.15)', 'rgba(77, 149, 217,0)'],
+          },
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: 'rgba(255, 255, 255, 0.5)',
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        data: props.echartData.xData,
+      },
+    ],
+    series: [
+      {
+        name: '行驶里程',
+        type: 'bar',
+        barWidth: 12,
+        stack: '1',
+        barWidth: nowSize(10, 1920),
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(0, 238, 253, 1)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(0, 238, 253, 0)',
+            },
+          ]),
+        },
+        data: props.echartData.data1,
+      },
+      {
+        name: '行驶时长',
+        type: 'bar',
+        stack: '2',
+        barWidth: 12,
+        xAxisIndex: 2,
+        yAxisIndex: 2,
+        barWidth: nowSize(10, 1920),
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(255, 255, 0, 0)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(255, 255, 0, 1)',
+            },
+          ]),
+        },
+        data: props.echartData.data2,
+      },
+    ],
+  });
+  myChart.value.on('click', params => {
+    activeName.value = params.dataIndex;
+    emit('updateKey', activeName.value);
+    myChart.value.resize();
+  });
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
index 449dcf6..044b287 100644
--- a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
@@ -18,7 +18,9 @@
       <div class="icon"></div>
       <div class="text">车辆调度</div>
     </div>
-    <div class="VehiclEcharts"></div>
+    <div class="VehiclEcharts">
+      <ChartCl :echartData="clData" :refresh="clData.refresh" />
+    </div>
   </div>
   <!-- 物资调度 -->
   <div class="MaterialScheduling">
@@ -31,7 +33,14 @@
 </template>
 
 <script setup name="ZHPS">
+import ChartCl from './chartCl.vue';
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
+const clData = {
+  xData: ['鄂A6JU85'],
+  data1: [9.8],
+  data2: [21],
+  refresh: '1',
+};
 </script>
 
 <style lang="scss" scoped>
@@ -61,7 +70,10 @@
         line-height: 25px;
         position: relative;
         left: 10px;
-        box-shadow: inset 0px -7px 10px -5px #47eef38a;
+        background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+        height: 10px;
+        line-height: 0px;
+        margin-top: 10px;
       }
     }
     .ScheduEcharts {
@@ -97,15 +109,16 @@
       line-height: 25px;
       position: relative;
       left: 10px;
-      box-shadow: inset 0px -7px 10px -5px #47eef38a;
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      height: 10px;
+      line-height: 0px;
+      margin-top: 10px;
     }
   }
   .VehiclEcharts {
     margin: 10px auto;
     width: 410px;
     height: calc(100% - 45px);
-    background: url('@/assets/images/fhpl/cldd.png') no-repeat;
-    background-size: 100% 100%;
   }
 }
 .MaterialScheduling {
@@ -131,7 +144,10 @@
       line-height: 25px;
       position: relative;
       left: 10px;
-      box-shadow: inset 0px -7px 10px -5px #47eef38a;
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      height: 10px;
+      line-height: 0px;
+      margin-top: 10px;
     }
   }
   .MaterialEcharts {
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index e95d5e9..85bbd64 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -53,7 +53,7 @@
     <div class="yxjcTop">
       <div class="topVehicl flex">
         <div class="icon"></div>
-        <div class="text">车辆调度</div>
+        <div class="text">预警监测</div>
 
         <div class="yxjcList">
           <div class="head-right" style="">
@@ -321,6 +321,7 @@
     // background: red;
     .topVehicl {
       height: 26px;
+
       .icon {
         position: relative;
         left: 10px;
@@ -336,7 +337,12 @@
         line-height: 25px;
         position: relative;
         left: 12px;
-        box-shadow: inset 0px -7px 10px -5px #47eef38a;
+        top: 10px;
+
+        // box-shadow: inset 0px -7px 10px -5px #47eef38a;
+        background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+        height: 10px;
+        line-height: 0px;
       }
       .yxjcList {
         position: relative;

diff --git a/src/views/oneMap/FloodStuationReview/chartCl.vue b/src/views/oneMap/FloodStuationReview/chartCl.vue
new file mode 100644
index 0000000..a2ed3d3
--- /dev/null
+++ b/src/views/oneMap/FloodStuationReview/chartCl.vue
@@ -0,0 +1,282 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+import moment from 'moment';
+const emit = defineEmits(['updateKey']);
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+let activeName = ref(null);
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    legend: {
+      top: nowSize(10, 1920),
+      itemHeight: nowSize(10, 1920),
+      itemWidth: nowSize(10, 1920),
+      x: '34%',
+      itemGap: nowSize(50, 1920),
+      textStyle: {
+        color: '#FFFFFF',
+        fontSize: 14,
+      },
+      orient: 'horizontal',
+      icon: 'circle',
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      formatter: function (params) {
+        if (params[0].seriesName == '行驶里程') {
+          return params[0].seriesName + ' : ' + params[0].value + '公里';
+        } else {
+          return params[0].seriesName + ' : ' + params[0].value + '分钟';
+        }
+      },
+    },
+    grid: [
+      {
+        show: false,
+        left: '20%',
+        top: nowSize(44, 1920),
+        bottom: nowSize(6, 1920),
+        containLabel: true,
+        width: '38%',
+      },
+      {
+        show: false,
+        left: '20%',
+        top: nowSize(44, 1920),
+        bottom: nowSize(26, 1920),
+        width: '0',
+        containLabel: false,
+      },
+      {
+        show: false,
+        right: '4%',
+        top: nowSize(44, 1920),
+        bottom: nowSize(6, 1920),
+        containLabel: true,
+        width: '38%',
+      },
+    ],
+    xAxis: [
+      {
+        type: 'value',
+        inverse: true,
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          color: '#D8F1FF',
+          fontSize: nowSize(12, 1920),
+        },
+        splitLine: {
+          //网格线
+          lineStyle: {
+            type: 'dashed',
+            color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+          },
+          show: true, //隐藏或显示
+        },
+      },
+      {
+        gridIndex: 1,
+        show: false,
+      },
+      {
+        gridIndex: 2,
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          color: '#D8F1FF',
+          fontSize: nowSize(12, 1920),
+        },
+        splitLine: {
+          //网格线
+          lineStyle: {
+            type: 'dashed',
+            color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+          },
+          show: true, //隐藏或显示
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        inverse: true,
+        position: 'right',
+        splitArea: {
+          show: true,
+          areaStyle: {
+            color: ['rgba(77, 149, 217, 0.15)', 'rgba(77, 149, 217,0)'],
+          },
+        },
+        axisLine: {
+          show: false,
+        },
+
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        data: props.echartData.xData,
+      },
+      {
+        gridIndex: 1,
+        type: 'category',
+        inverse: true,
+        position: 'left',
+        triggerEvent: true,
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          // color: "rgba(255, 255, 255, 1)",
+          fontSize: nowSize(14, 1920),
+          color: (value, index) => {
+            if (activeName.value == index) {
+              return '#2CBBB6';
+            } else {
+              return 'rgba(255, 255, 255, 1)';
+            }
+          },
+        },
+        data: props.echartData.xData,
+      },
+      {
+        gridIndex: 2,
+        type: 'category',
+        inverse: true,
+        position: 'left',
+        splitArea: {
+          show: true,
+          areaStyle: {
+            color: ['rgba(77, 149, 217, 0.15)', 'rgba(77, 149, 217,0)'],
+          },
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: 'rgba(255, 255, 255, 0.5)',
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        data: props.echartData.xData,
+      },
+    ],
+    series: [
+      {
+        name: '行驶里程',
+        type: 'bar',
+        barWidth: 12,
+        stack: '1',
+        barWidth: nowSize(10, 1920),
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(0, 238, 253, 1)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(0, 238, 253, 0)',
+            },
+          ]),
+        },
+        data: props.echartData.data1,
+      },
+      {
+        name: '行驶时长',
+        type: 'bar',
+        stack: '2',
+        barWidth: 12,
+        xAxisIndex: 2,
+        yAxisIndex: 2,
+        barWidth: nowSize(10, 1920),
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(255, 255, 0, 0)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(255, 255, 0, 1)',
+            },
+          ]),
+        },
+        data: props.echartData.data2,
+      },
+    ],
+  });
+  myChart.value.on('click', params => {
+    activeName.value = params.dataIndex;
+    emit('updateKey', activeName.value);
+    myChart.value.resize();
+  });
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
index 449dcf6..044b287 100644
--- a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
@@ -18,7 +18,9 @@
       <div class="icon"></div>
       <div class="text">车辆调度</div>
     </div>
-    <div class="VehiclEcharts"></div>
+    <div class="VehiclEcharts">
+      <ChartCl :echartData="clData" :refresh="clData.refresh" />
+    </div>
   </div>
   <!-- 物资调度 -->
   <div class="MaterialScheduling">
@@ -31,7 +33,14 @@
 </template>
 
 <script setup name="ZHPS">
+import ChartCl from './chartCl.vue';
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
+const clData = {
+  xData: ['鄂A6JU85'],
+  data1: [9.8],
+  data2: [21],
+  refresh: '1',
+};
 </script>
 
 <style lang="scss" scoped>
@@ -61,7 +70,10 @@
         line-height: 25px;
         position: relative;
         left: 10px;
-        box-shadow: inset 0px -7px 10px -5px #47eef38a;
+        background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+        height: 10px;
+        line-height: 0px;
+        margin-top: 10px;
       }
     }
     .ScheduEcharts {
@@ -97,15 +109,16 @@
       line-height: 25px;
       position: relative;
       left: 10px;
-      box-shadow: inset 0px -7px 10px -5px #47eef38a;
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      height: 10px;
+      line-height: 0px;
+      margin-top: 10px;
     }
   }
   .VehiclEcharts {
     margin: 10px auto;
     width: 410px;
     height: calc(100% - 45px);
-    background: url('@/assets/images/fhpl/cldd.png') no-repeat;
-    background-size: 100% 100%;
   }
 }
 .MaterialScheduling {
@@ -131,7 +144,10 @@
       line-height: 25px;
       position: relative;
       left: 10px;
-      box-shadow: inset 0px -7px 10px -5px #47eef38a;
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      height: 10px;
+      line-height: 0px;
+      margin-top: 10px;
     }
   }
   .MaterialEcharts {
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index e95d5e9..85bbd64 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -53,7 +53,7 @@
     <div class="yxjcTop">
       <div class="topVehicl flex">
         <div class="icon"></div>
-        <div class="text">车辆调度</div>
+        <div class="text">预警监测</div>
 
         <div class="yxjcList">
           <div class="head-right" style="">
@@ -321,6 +321,7 @@
     // background: red;
     .topVehicl {
       height: 26px;
+
       .icon {
         position: relative;
         left: 10px;
@@ -336,7 +337,12 @@
         line-height: 25px;
         position: relative;
         left: 12px;
-        box-shadow: inset 0px -7px 10px -5px #47eef38a;
+        top: 10px;
+
+        // box-shadow: inset 0px -7px 10px -5px #47eef38a;
+        background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+        height: 10px;
+        line-height: 0px;
       }
       .yxjcList {
         position: relative;
diff --git a/src/views/oneMap/OverallOverview/RightBox.vue b/src/views/oneMap/OverallOverview/RightBox.vue
index 5000722..99db179 100644
--- a/src/views/oneMap/OverallOverview/RightBox.vue
+++ b/src/views/oneMap/OverallOverview/RightBox.vue
@@ -373,7 +373,10 @@
       color: #ebfeff;
       line-height: 25px;
       padding-left: 5px;
-      box-shadow: inset 0px -8px 10px -5px #47eef38a;
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      height: 10px;
+      line-height: 0px;
+      margin-top: 10px;
     }
   }
   .riskZs {

diff --git a/src/views/oneMap/FloodStuationReview/chartCl.vue b/src/views/oneMap/FloodStuationReview/chartCl.vue
new file mode 100644
index 0000000..a2ed3d3
--- /dev/null
+++ b/src/views/oneMap/FloodStuationReview/chartCl.vue
@@ -0,0 +1,282 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+import moment from 'moment';
+const emit = defineEmits(['updateKey']);
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+let activeName = ref(null);
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    legend: {
+      top: nowSize(10, 1920),
+      itemHeight: nowSize(10, 1920),
+      itemWidth: nowSize(10, 1920),
+      x: '34%',
+      itemGap: nowSize(50, 1920),
+      textStyle: {
+        color: '#FFFFFF',
+        fontSize: 14,
+      },
+      orient: 'horizontal',
+      icon: 'circle',
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      formatter: function (params) {
+        if (params[0].seriesName == '行驶里程') {
+          return params[0].seriesName + ' : ' + params[0].value + '公里';
+        } else {
+          return params[0].seriesName + ' : ' + params[0].value + '分钟';
+        }
+      },
+    },
+    grid: [
+      {
+        show: false,
+        left: '20%',
+        top: nowSize(44, 1920),
+        bottom: nowSize(6, 1920),
+        containLabel: true,
+        width: '38%',
+      },
+      {
+        show: false,
+        left: '20%',
+        top: nowSize(44, 1920),
+        bottom: nowSize(26, 1920),
+        width: '0',
+        containLabel: false,
+      },
+      {
+        show: false,
+        right: '4%',
+        top: nowSize(44, 1920),
+        bottom: nowSize(6, 1920),
+        containLabel: true,
+        width: '38%',
+      },
+    ],
+    xAxis: [
+      {
+        type: 'value',
+        inverse: true,
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          color: '#D8F1FF',
+          fontSize: nowSize(12, 1920),
+        },
+        splitLine: {
+          //网格线
+          lineStyle: {
+            type: 'dashed',
+            color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+          },
+          show: true, //隐藏或显示
+        },
+      },
+      {
+        gridIndex: 1,
+        show: false,
+      },
+      {
+        gridIndex: 2,
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          color: '#D8F1FF',
+          fontSize: nowSize(12, 1920),
+        },
+        splitLine: {
+          //网格线
+          lineStyle: {
+            type: 'dashed',
+            color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+          },
+          show: true, //隐藏或显示
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        inverse: true,
+        position: 'right',
+        splitArea: {
+          show: true,
+          areaStyle: {
+            color: ['rgba(77, 149, 217, 0.15)', 'rgba(77, 149, 217,0)'],
+          },
+        },
+        axisLine: {
+          show: false,
+        },
+
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        data: props.echartData.xData,
+      },
+      {
+        gridIndex: 1,
+        type: 'category',
+        inverse: true,
+        position: 'left',
+        triggerEvent: true,
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          // color: "rgba(255, 255, 255, 1)",
+          fontSize: nowSize(14, 1920),
+          color: (value, index) => {
+            if (activeName.value == index) {
+              return '#2CBBB6';
+            } else {
+              return 'rgba(255, 255, 255, 1)';
+            }
+          },
+        },
+        data: props.echartData.xData,
+      },
+      {
+        gridIndex: 2,
+        type: 'category',
+        inverse: true,
+        position: 'left',
+        splitArea: {
+          show: true,
+          areaStyle: {
+            color: ['rgba(77, 149, 217, 0.15)', 'rgba(77, 149, 217,0)'],
+          },
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: 'rgba(255, 255, 255, 0.5)',
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        data: props.echartData.xData,
+      },
+    ],
+    series: [
+      {
+        name: '行驶里程',
+        type: 'bar',
+        barWidth: 12,
+        stack: '1',
+        barWidth: nowSize(10, 1920),
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(0, 238, 253, 1)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(0, 238, 253, 0)',
+            },
+          ]),
+        },
+        data: props.echartData.data1,
+      },
+      {
+        name: '行驶时长',
+        type: 'bar',
+        stack: '2',
+        barWidth: 12,
+        xAxisIndex: 2,
+        yAxisIndex: 2,
+        barWidth: nowSize(10, 1920),
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(255, 255, 0, 0)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(255, 255, 0, 1)',
+            },
+          ]),
+        },
+        data: props.echartData.data2,
+      },
+    ],
+  });
+  myChart.value.on('click', params => {
+    activeName.value = params.dataIndex;
+    emit('updateKey', activeName.value);
+    myChart.value.resize();
+  });
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
index 449dcf6..044b287 100644
--- a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
@@ -18,7 +18,9 @@
       <div class="icon"></div>
       <div class="text">车辆调度</div>
     </div>
-    <div class="VehiclEcharts"></div>
+    <div class="VehiclEcharts">
+      <ChartCl :echartData="clData" :refresh="clData.refresh" />
+    </div>
   </div>
   <!-- 物资调度 -->
   <div class="MaterialScheduling">
@@ -31,7 +33,14 @@
 </template>
 
 <script setup name="ZHPS">
+import ChartCl from './chartCl.vue';
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
+const clData = {
+  xData: ['鄂A6JU85'],
+  data1: [9.8],
+  data2: [21],
+  refresh: '1',
+};
 </script>
 
 <style lang="scss" scoped>
@@ -61,7 +70,10 @@
         line-height: 25px;
         position: relative;
         left: 10px;
-        box-shadow: inset 0px -7px 10px -5px #47eef38a;
+        background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+        height: 10px;
+        line-height: 0px;
+        margin-top: 10px;
       }
     }
     .ScheduEcharts {
@@ -97,15 +109,16 @@
       line-height: 25px;
       position: relative;
       left: 10px;
-      box-shadow: inset 0px -7px 10px -5px #47eef38a;
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      height: 10px;
+      line-height: 0px;
+      margin-top: 10px;
     }
   }
   .VehiclEcharts {
     margin: 10px auto;
     width: 410px;
     height: calc(100% - 45px);
-    background: url('@/assets/images/fhpl/cldd.png') no-repeat;
-    background-size: 100% 100%;
   }
 }
 .MaterialScheduling {
@@ -131,7 +144,10 @@
       line-height: 25px;
       position: relative;
       left: 10px;
-      box-shadow: inset 0px -7px 10px -5px #47eef38a;
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      height: 10px;
+      line-height: 0px;
+      margin-top: 10px;
     }
   }
   .MaterialEcharts {
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index e95d5e9..85bbd64 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -53,7 +53,7 @@
     <div class="yxjcTop">
       <div class="topVehicl flex">
         <div class="icon"></div>
-        <div class="text">车辆调度</div>
+        <div class="text">预警监测</div>
 
         <div class="yxjcList">
           <div class="head-right" style="">
@@ -321,6 +321,7 @@
     // background: red;
     .topVehicl {
       height: 26px;
+
       .icon {
         position: relative;
         left: 10px;
@@ -336,7 +337,12 @@
         line-height: 25px;
         position: relative;
         left: 12px;
-        box-shadow: inset 0px -7px 10px -5px #47eef38a;
+        top: 10px;
+
+        // box-shadow: inset 0px -7px 10px -5px #47eef38a;
+        background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+        height: 10px;
+        line-height: 0px;
       }
       .yxjcList {
         position: relative;
diff --git a/src/views/oneMap/OverallOverview/RightBox.vue b/src/views/oneMap/OverallOverview/RightBox.vue
index 5000722..99db179 100644
--- a/src/views/oneMap/OverallOverview/RightBox.vue
+++ b/src/views/oneMap/OverallOverview/RightBox.vue
@@ -373,7 +373,10 @@
       color: #ebfeff;
       line-height: 25px;
       padding-left: 5px;
-      box-shadow: inset 0px -8px 10px -5px #47eef38a;
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      height: 10px;
+      line-height: 0px;
+      margin-top: 10px;
     }
   }
   .riskZs {
diff --git a/src/views/oneMap/components/FHPL.vue b/src/views/oneMap/components/FHPL.vue
index 99d2db9..72ee30d 100644
--- a/src/views/oneMap/components/FHPL.vue
+++ b/src/views/oneMap/components/FHPL.vue
@@ -8,9 +8,8 @@
     </div>
 
     <!-- 顶部内容 -->
-    <div class="top_content flex flex-justcontent-center flex-justcontent-spacearound" v-if="showPanel == false">
+    <div class="top_content" v-if="showPanel == false">
       <div class="hujiao_button flex flex-justcontent-center flex-align-center" @click="openUserDialog">汛情回顾</div>
-      <img :src="warn" class="img_box" />
     </div>
     <!-- 降雨日历 -->
     <div class="monitorCalenderBox">
@@ -26,7 +25,6 @@
 import FhplLeftBox from '@/views/oneMap/floodPrevention/FhplLeftBox.vue';
 import FholRightBox from '@/views/oneMap/floodPrevention/FholRightBox.vue';
 import FXHG from '@/views/oneMap/components/FXHG.vue';
-import warn from '@/assets/images/fhpl/warn.png';
 import monitorCalender from '@/views/oneMap/FloodStuationReview/monitorCalender.vue';
 import bus from '@/bus';
 const emits = defineEmits(['update:ActiveKey', 'closeMonitorCalender']);
@@ -100,13 +98,11 @@
     box-shadow: inset 0 0 5px 5px #47eef38a;
   }
   .top_content {
-    transition: all 0.5s;
     position: absolute;
     top: 110px;
     left: 480px;
-    right: 480px;
     height: 35px;
-    width: 950px;
+    width: 90px;
     // background: rgb(221, 216, 216);
     .hujiao_button {
       width: 90px;
@@ -123,10 +119,6 @@
       font-size: 16px;
       color: #ffffff;
     }
-    .img_box {
-      position: relative;
-      left: -50px;
-    }
   }
   .monitorCalenderBox {
     position: absolute;

diff --git a/src/views/oneMap/FloodStuationReview/chartCl.vue b/src/views/oneMap/FloodStuationReview/chartCl.vue
new file mode 100644
index 0000000..a2ed3d3
--- /dev/null
+++ b/src/views/oneMap/FloodStuationReview/chartCl.vue
@@ -0,0 +1,282 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+import moment from 'moment';
+const emit = defineEmits(['updateKey']);
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+let activeName = ref(null);
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    legend: {
+      top: nowSize(10, 1920),
+      itemHeight: nowSize(10, 1920),
+      itemWidth: nowSize(10, 1920),
+      x: '34%',
+      itemGap: nowSize(50, 1920),
+      textStyle: {
+        color: '#FFFFFF',
+        fontSize: 14,
+      },
+      orient: 'horizontal',
+      icon: 'circle',
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      formatter: function (params) {
+        if (params[0].seriesName == '行驶里程') {
+          return params[0].seriesName + ' : ' + params[0].value + '公里';
+        } else {
+          return params[0].seriesName + ' : ' + params[0].value + '分钟';
+        }
+      },
+    },
+    grid: [
+      {
+        show: false,
+        left: '20%',
+        top: nowSize(44, 1920),
+        bottom: nowSize(6, 1920),
+        containLabel: true,
+        width: '38%',
+      },
+      {
+        show: false,
+        left: '20%',
+        top: nowSize(44, 1920),
+        bottom: nowSize(26, 1920),
+        width: '0',
+        containLabel: false,
+      },
+      {
+        show: false,
+        right: '4%',
+        top: nowSize(44, 1920),
+        bottom: nowSize(6, 1920),
+        containLabel: true,
+        width: '38%',
+      },
+    ],
+    xAxis: [
+      {
+        type: 'value',
+        inverse: true,
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          color: '#D8F1FF',
+          fontSize: nowSize(12, 1920),
+        },
+        splitLine: {
+          //网格线
+          lineStyle: {
+            type: 'dashed',
+            color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+          },
+          show: true, //隐藏或显示
+        },
+      },
+      {
+        gridIndex: 1,
+        show: false,
+      },
+      {
+        gridIndex: 2,
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          color: '#D8F1FF',
+          fontSize: nowSize(12, 1920),
+        },
+        splitLine: {
+          //网格线
+          lineStyle: {
+            type: 'dashed',
+            color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+          },
+          show: true, //隐藏或显示
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        inverse: true,
+        position: 'right',
+        splitArea: {
+          show: true,
+          areaStyle: {
+            color: ['rgba(77, 149, 217, 0.15)', 'rgba(77, 149, 217,0)'],
+          },
+        },
+        axisLine: {
+          show: false,
+        },
+
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        data: props.echartData.xData,
+      },
+      {
+        gridIndex: 1,
+        type: 'category',
+        inverse: true,
+        position: 'left',
+        triggerEvent: true,
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          // color: "rgba(255, 255, 255, 1)",
+          fontSize: nowSize(14, 1920),
+          color: (value, index) => {
+            if (activeName.value == index) {
+              return '#2CBBB6';
+            } else {
+              return 'rgba(255, 255, 255, 1)';
+            }
+          },
+        },
+        data: props.echartData.xData,
+      },
+      {
+        gridIndex: 2,
+        type: 'category',
+        inverse: true,
+        position: 'left',
+        splitArea: {
+          show: true,
+          areaStyle: {
+            color: ['rgba(77, 149, 217, 0.15)', 'rgba(77, 149, 217,0)'],
+          },
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: 'rgba(255, 255, 255, 0.5)',
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        data: props.echartData.xData,
+      },
+    ],
+    series: [
+      {
+        name: '行驶里程',
+        type: 'bar',
+        barWidth: 12,
+        stack: '1',
+        barWidth: nowSize(10, 1920),
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(0, 238, 253, 1)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(0, 238, 253, 0)',
+            },
+          ]),
+        },
+        data: props.echartData.data1,
+      },
+      {
+        name: '行驶时长',
+        type: 'bar',
+        stack: '2',
+        barWidth: 12,
+        xAxisIndex: 2,
+        yAxisIndex: 2,
+        barWidth: nowSize(10, 1920),
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(255, 255, 0, 0)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(255, 255, 0, 1)',
+            },
+          ]),
+        },
+        data: props.echartData.data2,
+      },
+    ],
+  });
+  myChart.value.on('click', params => {
+    activeName.value = params.dataIndex;
+    emit('updateKey', activeName.value);
+    myChart.value.resize();
+  });
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
index 449dcf6..044b287 100644
--- a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
@@ -18,7 +18,9 @@
       <div class="icon"></div>
       <div class="text">车辆调度</div>
     </div>
-    <div class="VehiclEcharts"></div>
+    <div class="VehiclEcharts">
+      <ChartCl :echartData="clData" :refresh="clData.refresh" />
+    </div>
   </div>
   <!-- 物资调度 -->
   <div class="MaterialScheduling">
@@ -31,7 +33,14 @@
 </template>
 
 <script setup name="ZHPS">
+import ChartCl from './chartCl.vue';
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
+const clData = {
+  xData: ['鄂A6JU85'],
+  data1: [9.8],
+  data2: [21],
+  refresh: '1',
+};
 </script>
 
 <style lang="scss" scoped>
@@ -61,7 +70,10 @@
         line-height: 25px;
         position: relative;
         left: 10px;
-        box-shadow: inset 0px -7px 10px -5px #47eef38a;
+        background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+        height: 10px;
+        line-height: 0px;
+        margin-top: 10px;
       }
     }
     .ScheduEcharts {
@@ -97,15 +109,16 @@
       line-height: 25px;
       position: relative;
       left: 10px;
-      box-shadow: inset 0px -7px 10px -5px #47eef38a;
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      height: 10px;
+      line-height: 0px;
+      margin-top: 10px;
     }
   }
   .VehiclEcharts {
     margin: 10px auto;
     width: 410px;
     height: calc(100% - 45px);
-    background: url('@/assets/images/fhpl/cldd.png') no-repeat;
-    background-size: 100% 100%;
   }
 }
 .MaterialScheduling {
@@ -131,7 +144,10 @@
       line-height: 25px;
       position: relative;
       left: 10px;
-      box-shadow: inset 0px -7px 10px -5px #47eef38a;
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      height: 10px;
+      line-height: 0px;
+      margin-top: 10px;
     }
   }
   .MaterialEcharts {
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index e95d5e9..85bbd64 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -53,7 +53,7 @@
     <div class="yxjcTop">
       <div class="topVehicl flex">
         <div class="icon"></div>
-        <div class="text">车辆调度</div>
+        <div class="text">预警监测</div>
 
         <div class="yxjcList">
           <div class="head-right" style="">
@@ -321,6 +321,7 @@
     // background: red;
     .topVehicl {
       height: 26px;
+
       .icon {
         position: relative;
         left: 10px;
@@ -336,7 +337,12 @@
         line-height: 25px;
         position: relative;
         left: 12px;
-        box-shadow: inset 0px -7px 10px -5px #47eef38a;
+        top: 10px;
+
+        // box-shadow: inset 0px -7px 10px -5px #47eef38a;
+        background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+        height: 10px;
+        line-height: 0px;
       }
       .yxjcList {
         position: relative;
diff --git a/src/views/oneMap/OverallOverview/RightBox.vue b/src/views/oneMap/OverallOverview/RightBox.vue
index 5000722..99db179 100644
--- a/src/views/oneMap/OverallOverview/RightBox.vue
+++ b/src/views/oneMap/OverallOverview/RightBox.vue
@@ -373,7 +373,10 @@
       color: #ebfeff;
       line-height: 25px;
       padding-left: 5px;
-      box-shadow: inset 0px -8px 10px -5px #47eef38a;
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      height: 10px;
+      line-height: 0px;
+      margin-top: 10px;
     }
   }
   .riskZs {
diff --git a/src/views/oneMap/components/FHPL.vue b/src/views/oneMap/components/FHPL.vue
index 99d2db9..72ee30d 100644
--- a/src/views/oneMap/components/FHPL.vue
+++ b/src/views/oneMap/components/FHPL.vue
@@ -8,9 +8,8 @@
     </div>
 
     <!-- 顶部内容 -->
-    <div class="top_content flex flex-justcontent-center flex-justcontent-spacearound" v-if="showPanel == false">
+    <div class="top_content" v-if="showPanel == false">
       <div class="hujiao_button flex flex-justcontent-center flex-align-center" @click="openUserDialog">汛情回顾</div>
-      <img :src="warn" class="img_box" />
     </div>
     <!-- 降雨日历 -->
     <div class="monitorCalenderBox">
@@ -26,7 +25,6 @@
 import FhplLeftBox from '@/views/oneMap/floodPrevention/FhplLeftBox.vue';
 import FholRightBox from '@/views/oneMap/floodPrevention/FholRightBox.vue';
 import FXHG from '@/views/oneMap/components/FXHG.vue';
-import warn from '@/assets/images/fhpl/warn.png';
 import monitorCalender from '@/views/oneMap/FloodStuationReview/monitorCalender.vue';
 import bus from '@/bus';
 const emits = defineEmits(['update:ActiveKey', 'closeMonitorCalender']);
@@ -100,13 +98,11 @@
     box-shadow: inset 0 0 5px 5px #47eef38a;
   }
   .top_content {
-    transition: all 0.5s;
     position: absolute;
     top: 110px;
     left: 480px;
-    right: 480px;
     height: 35px;
-    width: 950px;
+    width: 90px;
     // background: rgb(221, 216, 216);
     .hujiao_button {
       width: 90px;
@@ -123,10 +119,6 @@
       font-size: 16px;
       color: #ffffff;
     }
-    .img_box {
-      position: relative;
-      left: -50px;
-    }
   }
   .monitorCalenderBox {
     position: absolute;
diff --git a/src/views/oneMap/floodPrevention/FhplLeftBox.vue b/src/views/oneMap/floodPrevention/FhplLeftBox.vue
index 8986dfb..f78de23 100644
--- a/src/views/oneMap/floodPrevention/FhplLeftBox.vue
+++ b/src/views/oneMap/floodPrevention/FhplLeftBox.vue
@@ -1,4 +1,10 @@
 <template>
+  <!-- 顶部内容 -->
+  <div class="TopWarning">
+    <img :src="warn" class="img_box" v-if="gjimg" />
+    <img :src="lsyj" class="img_lsyj" v-if="lsyjimg" />
+  </div>
+
   <!-- 气象实况预报 -->
   <div class="meteorological">
     <div class="ListBoxHeader">
@@ -153,12 +159,17 @@
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 const yuJingVisible = ref(false);
 import monitor_icon from '@/assets/images/fhpl/monitor_icon.png';
+import warn from '@/assets/images/fhpl/warn.png';
+import lsyj from '@/assets/images/fhpl/lsyj.png';
+
+const LegendShow = ref(false);
+const gjimg = ref(true);
+const lsyjimg = ref(false);
 
 const form = ref({
   modelId: '',
   rangeTime: [],
 });
-const LegendShow = ref(false);
 const FXJCData = ref([
   {
     zb: '永安路',
@@ -249,10 +260,24 @@
 function noticeBtnClick() {
   yuJingVisible.value = false;
   LegendShow.value = true;
+  gjimg.value = false;
+  lsyjimg.value = true;
 }
 </script>
 
 <style lang="scss" scoped>
+.TopWarning {
+  position: absolute;
+  top: 39px;
+  left: 600px;
+  // height: 35px;
+  width: 750px;
+  // background: rgb(221, 216, 216);
+  .img_lsyj {
+    position: relative;
+    left: 150px;
+  }
+}
 .meteorological {
   width: 450px;
   height: 33%;
@@ -510,7 +535,7 @@
 }
 .LegendEx {
   position: absolute;
-  left: 503px;
+  left: 470px;
   top: 90px;
   width: 150px;
   height: 200px;