diff --git a/src/api/hsApi.js b/src/api/hsApi.js
index df144fe..5418193 100644
--- a/src/api/hsApi.js
+++ b/src/api/hsApi.js
@@ -6,4 +6,18 @@
     method: "get",
     params
   });
+}
+export function rainMapDataListBack(params) {
+  return request({
+    url: `/hsApi/drainageDispatch/rainMapDataListBack`,
+    method: "get",
+    params
+  });
+}
+export function rainCalendar(params) {
+  return request({
+    url: `/hsApi/rainData/rainCalendar`,
+    method: "get",
+    params
+  });
 }
\ No newline at end of file

diff --git a/src/api/hsApi.js b/src/api/hsApi.js
index df144fe..5418193 100644
--- a/src/api/hsApi.js
+++ b/src/api/hsApi.js
@@ -6,4 +6,18 @@
     method: "get",
     params
   });
+}
+export function rainMapDataListBack(params) {
+  return request({
+    url: `/hsApi/drainageDispatch/rainMapDataListBack`,
+    method: "get",
+    params
+  });
+}
+export function rainCalendar(params) {
+  return request({
+    url: `/hsApi/rainData/rainCalendar`,
+    method: "get",
+    params
+  });
 }
\ No newline at end of file
diff --git a/src/assets/images/fxhg/hgpr.png b/src/assets/images/fxhg/hgpr.png
new file mode 100644
index 0000000..abeb567
--- /dev/null
+++ b/src/assets/images/fxhg/hgpr.png
Binary files differ

diff --git a/src/api/hsApi.js b/src/api/hsApi.js
index df144fe..5418193 100644
--- a/src/api/hsApi.js
+++ b/src/api/hsApi.js
@@ -6,4 +6,18 @@
     method: "get",
     params
   });
+}
+export function rainMapDataListBack(params) {
+  return request({
+    url: `/hsApi/drainageDispatch/rainMapDataListBack`,
+    method: "get",
+    params
+  });
+}
+export function rainCalendar(params) {
+  return request({
+    url: `/hsApi/rainData/rainCalendar`,
+    method: "get",
+    params
+  });
 }
\ No newline at end of file
diff --git a/src/assets/images/fxhg/hgpr.png b/src/assets/images/fxhg/hgpr.png
new file mode 100644
index 0000000..abeb567
--- /dev/null
+++ b/src/assets/images/fxhg/hgpr.png
Binary files differ
diff --git a/src/assets/images/fxhg/hgpx.png b/src/assets/images/fxhg/hgpx.png
new file mode 100644
index 0000000..eb5f225
--- /dev/null
+++ b/src/assets/images/fxhg/hgpx.png
Binary files differ

diff --git a/src/api/hsApi.js b/src/api/hsApi.js
index df144fe..5418193 100644
--- a/src/api/hsApi.js
+++ b/src/api/hsApi.js
@@ -6,4 +6,18 @@
     method: "get",
     params
   });
+}
+export function rainMapDataListBack(params) {
+  return request({
+    url: `/hsApi/drainageDispatch/rainMapDataListBack`,
+    method: "get",
+    params
+  });
+}
+export function rainCalendar(params) {
+  return request({
+    url: `/hsApi/rainData/rainCalendar`,
+    method: "get",
+    params
+  });
 }
\ No newline at end of file
diff --git a/src/assets/images/fxhg/hgpr.png b/src/assets/images/fxhg/hgpr.png
new file mode 100644
index 0000000..abeb567
--- /dev/null
+++ b/src/assets/images/fxhg/hgpr.png
Binary files differ
diff --git a/src/assets/images/fxhg/hgpx.png b/src/assets/images/fxhg/hgpx.png
new file mode 100644
index 0000000..eb5f225
--- /dev/null
+++ b/src/assets/images/fxhg/hgpx.png
Binary files differ
diff --git a/src/views/oneMap/FloodStuationReview/monitorCalender.vue b/src/views/oneMap/FloodStuationReview/monitorCalender.vue
index fcdb747..2febbfe 100644
--- a/src/views/oneMap/FloodStuationReview/monitorCalender.vue
+++ b/src/views/oneMap/FloodStuationReview/monitorCalender.vue
@@ -56,6 +56,7 @@
 </template>
 
 <script setup>
+import * as hsApi from '@/api/hsApi.js';
 const props = defineProps({
   defaultDate: {
     type: String,
@@ -75,29 +76,27 @@
 const selectVal = ref(props.defaultDate);
 const scheduleData = ref({});
 const loading = ref(false);
-function timeChange(val) {
-  datevalueNew.value = new Date(val);
-  getRainTimeDayData();
-}
 
+let huiguActiveTime=ref('')
+let huiguActiveMoon=ref(proxy.moment().format('YYYY-MM'))
 //获取降雨日历数据
 const getRainTimeDayData = () => {
-  // let data = {
-  //   fromTime: proxy.moment(datevalue.value).startOf('month').format('YYYY-MM-DD'),
-  //   toTime: proxy.moment(datevalue.value).endOf('month').format('YYYY-MM-DD'),
-  // };
-  // loading.value = true;
-  // rainTimeDay(data)
-  //   .then(res => {
-  //     res.data &&
-  //       res.data.forEach(item => {
-  //         scheduleData.value[item.rainTime] = item.rainCumulative;
-  //       });
-  //   })
-  //   .finally(() => {
-  //     loading.value = false;
-  //   });
+  loading.value = true;
+  let parms={queryTime:huiguActiveMoon.value}
+  hsApi.rainCalendar(parms).then(res=>{
+    res.forEach(item => {
+      scheduleData.value[item.date] = item.value;
+    });
+  }).finally(() => {
+    loading.value = false;
+  });
 };
+
+function timeChange(val) {
+  datevalueNew.value = new Date(val);
+  huiguActiveMoon.value=proxy.moment(val).format('YYYY-MM')
+  getRainTimeDayData();
+}
 // 降雨日历点击事件
 const changepeople = val => {
   selectVal.value = val;
@@ -164,6 +163,7 @@
   .datadiv {
     font-size: 10px;
     height: 20px;
+    line-height:1;
   }
 }
 
@@ -237,14 +237,16 @@
       font-size: 15px;
       margin-top: -5px;
       color: #a8abb2 !important;
+      height:30px;
+      line-height:30px;
     }
 
-    .datadiv {
-      width: 100%;
-      position: absolute;
-      bottom: -10px;
-      font-size: 12px;
-    }
+    // .datadiv {
+    //   width: 100%;
+    //   position: absolute;
+    //   bottom: -10px;
+    //   font-size: 12px;
+    // }
   }
 
   .is-today {

diff --git a/src/api/hsApi.js b/src/api/hsApi.js
index df144fe..5418193 100644
--- a/src/api/hsApi.js
+++ b/src/api/hsApi.js
@@ -6,4 +6,18 @@
     method: "get",
     params
   });
+}
+export function rainMapDataListBack(params) {
+  return request({
+    url: `/hsApi/drainageDispatch/rainMapDataListBack`,
+    method: "get",
+    params
+  });
+}
+export function rainCalendar(params) {
+  return request({
+    url: `/hsApi/rainData/rainCalendar`,
+    method: "get",
+    params
+  });
 }
\ No newline at end of file
diff --git a/src/assets/images/fxhg/hgpr.png b/src/assets/images/fxhg/hgpr.png
new file mode 100644
index 0000000..abeb567
--- /dev/null
+++ b/src/assets/images/fxhg/hgpr.png
Binary files differ
diff --git a/src/assets/images/fxhg/hgpx.png b/src/assets/images/fxhg/hgpx.png
new file mode 100644
index 0000000..eb5f225
--- /dev/null
+++ b/src/assets/images/fxhg/hgpx.png
Binary files differ
diff --git a/src/views/oneMap/FloodStuationReview/monitorCalender.vue b/src/views/oneMap/FloodStuationReview/monitorCalender.vue
index fcdb747..2febbfe 100644
--- a/src/views/oneMap/FloodStuationReview/monitorCalender.vue
+++ b/src/views/oneMap/FloodStuationReview/monitorCalender.vue
@@ -56,6 +56,7 @@
 </template>
 
 <script setup>
+import * as hsApi from '@/api/hsApi.js';
 const props = defineProps({
   defaultDate: {
     type: String,
@@ -75,29 +76,27 @@
 const selectVal = ref(props.defaultDate);
 const scheduleData = ref({});
 const loading = ref(false);
-function timeChange(val) {
-  datevalueNew.value = new Date(val);
-  getRainTimeDayData();
-}
 
+let huiguActiveTime=ref('')
+let huiguActiveMoon=ref(proxy.moment().format('YYYY-MM'))
 //获取降雨日历数据
 const getRainTimeDayData = () => {
-  // let data = {
-  //   fromTime: proxy.moment(datevalue.value).startOf('month').format('YYYY-MM-DD'),
-  //   toTime: proxy.moment(datevalue.value).endOf('month').format('YYYY-MM-DD'),
-  // };
-  // loading.value = true;
-  // rainTimeDay(data)
-  //   .then(res => {
-  //     res.data &&
-  //       res.data.forEach(item => {
-  //         scheduleData.value[item.rainTime] = item.rainCumulative;
-  //       });
-  //   })
-  //   .finally(() => {
-  //     loading.value = false;
-  //   });
+  loading.value = true;
+  let parms={queryTime:huiguActiveMoon.value}
+  hsApi.rainCalendar(parms).then(res=>{
+    res.forEach(item => {
+      scheduleData.value[item.date] = item.value;
+    });
+  }).finally(() => {
+    loading.value = false;
+  });
 };
+
+function timeChange(val) {
+  datevalueNew.value = new Date(val);
+  huiguActiveMoon.value=proxy.moment(val).format('YYYY-MM')
+  getRainTimeDayData();
+}
 // 降雨日历点击事件
 const changepeople = val => {
   selectVal.value = val;
@@ -164,6 +163,7 @@
   .datadiv {
     font-size: 10px;
     height: 20px;
+    line-height:1;
   }
 }
 
@@ -237,14 +237,16 @@
       font-size: 15px;
       margin-top: -5px;
       color: #a8abb2 !important;
+      height:30px;
+      line-height:30px;
     }
 
-    .datadiv {
-      width: 100%;
-      position: absolute;
-      bottom: -10px;
-      font-size: 12px;
-    }
+    // .datadiv {
+    //   width: 100%;
+    //   position: absolute;
+    //   bottom: -10px;
+    //   font-size: 12px;
+    // }
   }
 
   .is-today {
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index c2102b1..0ec1107 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -72,90 +72,211 @@
     </ul>
   </div>
   <div class="timeChart">
-    <ChartLs />
+    <ChartLs :echartData="hoursList" :refresh="refresh"/>
   </div>
 </template>
 
 <script setup>
-  import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
-  import ChartLs from "@/views/oneMap/Echarts/ChartLs.vue";
+import * as hsApi from '@/api/hsApi.js';
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import ChartLs from "@/views/oneMap/Echarts/ChartLs.vue";
+const { proxy } = getCurrentInstance();
 
-  let hgEngPlay = ref(false);
-  let stepLin = ref("0");
-  let hgEndActive = ref("");
-  let showRainList = ref([]);
-  let hoursScale = ref([]);
-  let stepNum = ref(0);
-  const showRainLegend = ref(false);
-  const ranLeng = [
-    [
-      { value: "0-0.2", color: "rgba(7, 213, 118, 0)" },
-      { value: "0.2-5", color: "rgba(7, 213, 118, 1)" },
-      { value: "5-25", color: "rgba(38, 129, 240,1)" },
-      { value: ">25", color: "rgba(255, 26, 26, 1)" },
-    ],
-    [
-      { value: "0-5", color: "rgba(7, 213, 118, 0)" },
-      { value: "5-15", color: "rgba(7, 213, 118, 1)" },
-      { value: "15-30", color: "rgba(38, 129, 240,1)" },
-      { value: "30-70", color: "rgba(247, 223, 56, 1)" },
-      { value: "70-140", color: "rgba(230, 85, 41, 1)" },
-      { value: ">140", color: "rgba(255, 26, 26, 1)" },
-    ],
-    [
-      { value: "0-5", color: "rgba(7, 213, 118, 0)" },
-      { value: "5-15", color: "rgba(7, 213, 118, 1)" },
-      { value: "15-30", color: "rgba(38, 129, 240,1)" },
-      { value: "30-70", color: "rgba(247, 223, 56, 1)" },
-      { value: "70-140", color: "rgba(230, 85, 41, 1)" },
-      { value: ">140", color: "rgba(255, 26, 26, 1)" },
-    ],
-    [
-      { value: "0-10", color: "rgba(7, 213, 118, 0)" },
-      { value: "10-25", color: "rgba(7, 213, 118, 1)" },
-      { value: "25-50", color: "rgba(38, 129, 240,1)" },
-      { value: "50-100", color: "rgba(247, 223, 56, 1)" },
-      { value: "100-250", color: "rgba(230, 85, 41, 1)" },
-      { value: ">250", color: "rgba(255, 26, 26, 1)" },
-    ],
-  ];
-  const hgEngList = [
-    { key: 1, name: "1小时" },
-    { key: 3, name: "3小时" },
-    { key: 12, name: "12小时" },
-    { key: 24, name: "24小时" },
-  ];
-  function runDayTime() {
-    hgEndActive.value = "";
-    showRainLegend.value = true;
-    showRainList.value = ranLeng[0];
-  }
-  function timeLoop() {
-    runDayInterval.value = setTimeout(() => {
-      stepNum.value++;
+// 面板内容展开收起控制
+const props = defineProps({
+  checkTime: {
+    type: String,
+  },
+});
 
-      let levels = ranLeng[0].map((i, idx) => ({
-        ...i,
-        value: Number(i.value.split("-")[0]),
-      }));
+let hgEngPlay = ref(false);
+let stepLin = ref("0");
+let refresh = ref(0);
+let hgEndActive = ref("");
+let showRainList = ref([]);
+let hoursList=ref({})
+let hoursScale = ref([]);
+let stepNum = ref(0);
+const showRainLegend = ref(false);
+const ranLeng = [
+  [
+    { value: "0-0.2", color: "rgba(7, 213, 118, 0)" },
+    { value: "0.2-5", color: "rgba(7, 213, 118, 1)" },
+    { value: "5-25", color: "rgba(38, 129, 240,1)" },
+    { value: ">25", color: "rgba(255, 26, 26, 1)" },
+  ],
+  [
+    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
+    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
+    { value: "15-30", color: "rgba(38, 129, 240,1)" },
+    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
+    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
+    { value: ">140", color: "rgba(255, 26, 26, 1)" },
+  ],
+  [
+    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
+    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
+    { value: "15-30", color: "rgba(38, 129, 240,1)" },
+    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
+    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
+    { value: ">140", color: "rgba(255, 26, 26, 1)" },
+  ],
+  [
+    { value: "0-10", color: "rgba(7, 213, 118, 0)" },
+    { value: "10-25", color: "rgba(7, 213, 118, 1)" },
+    { value: "25-50", color: "rgba(38, 129, 240,1)" },
+    { value: "50-100", color: "rgba(247, 223, 56, 1)" },
+    { value: "100-250", color: "rgba(230, 85, 41, 1)" },
+    { value: ">250", color: "rgba(255, 26, 26, 1)" },
+  ],
+];
+const hgEngList = [
+  { key: 1, name: "1小时" },
+  { key: 3, name: "3小时" },
+  { key: 12, name: "12小时" },
+  { key: 24, name: "24小时" },
+];
+//获取底部数据
+function getTimeData(){
+   hsApi.rainMapDataBack({time:props.checkTime}).then(res=>{
+    if(res.code==200){
+      hoursList.value=res.data
+      hoursList.value.activeIndex=0
+      let array=[]
+      let list=JSON.parse(JSON.stringify(hoursList.value.rainTrend))
+      list.forEach((e,i)=>{
+        let obj={
+          weather:e,
+          time:proxy.moment(hoursList.value.date[i]).format("H"),
+          rain:hoursList.value.history[i],
+          chuse:false
+        }
+        array.push(obj)
+      })
+      hoursScale.value=array
+      refresh.value=Math.random();
+      hgEngPlay.value=false
+    }
+  })
+}
+let runDayInterval=ref()
+function runDayTime(){
+  hgEndActive.value=''
+  showRainLegend.value=true
+  showRainList.value=ranLeng[0]
+  hoursScale.value.forEach(e=>{
+    e.chuse=false
+  })
+  if(hgEngPlay.value){
+    // newfiberMap.setCenter({
+    //   "roll": 0,
+    //   "pitch": -89.87733174015287,
+    //   "heading": 360,
+    //   "lng": 114.30934084478585,
+    //   "lat": 30.44275262912909,
+    //   "zoom": 112193.80415470112
+    // });
+    timeLoop()
+  }else{
+    hgEngPlay.value=false
+    clearInterval(runDayInterval.value)
+  }
+}
 
-      console.log(
-              "levels",
-              levels.map((i) => i.value)
-      );
-    });
+function timeLoop(){
+  let runTime=500
+  if(hoursList.value.rainTrend[Number(stepNum.value)]=='无雨'){
+    runTime=500
+  }else{
+    runTime=3000
   }
-  function emptyRun() {
-    stepLin.value = "0%";
-    showRainLegend.value = false;
-  }
+  runDayInterval.value=setTimeout(()=> {
+    stepNum.value++
+    if(stepNum.value<=24){
+      // NewFiberMapUtils.disposeRainfall(hoursList.value.rainTrend[Number(stepNum.value)-1])
+      stepLin.value=`${stepNum.value*4.1666}%`
+      let levels = ranLeng[0].map((i,idx) => ({...i,value:Number(i.value.split('-')[0])}));
+      // console.log('stepNum.value',stepNum.value - 1);
+      // console.log('levels',levels.map(i => i.value));
+      // console.log('dataas',hoursList.value.resultList[Number(stepNum.value)-1].map(i => i.value));
+      // NewFiberMapUtils.getKringImg(0, true, {data:hoursList.value.resultList[Number(stepNum.value)-1],code:200}, newfiberMap, levels);
+      timeLoop()
+    }else{
+      emptyRun()
+    }
+    changeChartData()
+  }, runTime)
+}
 
-  function changeHourTime(num) {
-    hgEndActive.value = num;
-    showRainLegend.value = true;
-    showRainList.value =
-            num == 1 ? ranLeng[0] : num == 3 ? ranLeng[1] : num == 12 ? ranLeng[2] : ranLeng[3];
+function emptyRun(){
+  stepLin.value='0%'
+  stepNum.value=0
+  hgEngPlay.value=false
+  showRainLegend.value=false
+  // NewFiberMapUtils.disposeRainfall('')
+  // newfiberMap.setLayersVisible(["krigingImage"],false)
+  hoursList.value.activeIndex=stepNum.value
+  clearInterval(runDayInterval.value)
+  if(runDayInterval.value){
+    runDayInterval.value=null
+    refresh.value=Math.random();
   }
+}
+
+function changeChartData(){
+  hoursList.value.activeIndex=stepNum.value
+  refresh.value=Math.random()
+}
+
+function changeHourTime(num){
+  hgEndActive.value=num
+  emptyRun()
+  showRainLegend.value=true
+  showRainList.value=num==1?ranLeng[0]:num==3?ranLeng[1]:num==12?ranLeng[2]:ranLeng[3]
+  let parms={
+    type:num,
+    time:props.checkTime
+  }
+  hsApi.rainMapDataListBack(parms).then(res=>{
+    if(res.code==200){
+      // 24小时前端处理
+      if(hgEndActive.value==24){
+        hoursScale.value.forEach(e=>{
+          e.chuse=true
+        })
+      }else{
+        hoursScale.value.forEach(e=>{
+          e.chuse=false
+        })
+        res.data.max.forEach(s=>{
+          hoursScale.value.forEach(e=>{
+            if(e.time==proxy.moment(s).format("H")){
+              e.chuse=true
+            }
+          })
+        })
+      }
+      // newfiberMap.setCenter({
+      //   "roll": 0,
+      //   "pitch": -89.87733174015287,
+      //   "heading": 360,
+      //   "lng": 114.30934084478585,
+      //   "lat": 30.44275262912909,
+      //   "zoom": 112193.80415470112
+      // });
+      // NewFiberMapUtils.disposeRainfall(res.data.weather)
+      // let levels = ranLeng[{1:0,3:1,12:2,24:3}[num]].map((i,idx) => ({...i,value:Number(i.value.split('-')[0])}));
+      //  NewFiberMapUtils.getKringImg(num, true, {data:res.data.resultList,code:200}, newfiberMap, levels);
+    }
+  })
+}
+watch(
+  () => props.checkTime,
+  () => {
+    getTimeData()
+  },
+  { immediate: true }
+);
 </script>
 
 <style lang="scss" scoped>
@@ -187,79 +308,132 @@
   .timeList {
     padding: 12px 20px 10px;
     overflow: hidden;
-    .colorRadio {
+    .colorRadio{
       float: left;
-      .btn {
-        margin-right: 20px;
-        span {
+      .btn{
+        margin-right:20px;
+        span{
           width: 8px;
           height: 8px;
           border-radius: 50%;
           margin-right: 5px;
         }
-        div {
+        div{
           width: 42px;
           line-height: 22px;
-          border: 1px solid rgba(0, 191, 253, 0);
+          border: 1px solid  rgba(0, 191, 253, 0);
           border-radius: 4px;
           text-align: center;
           font-weight: 400;
           font-size: 14px;
         }
-        &.blue {
-          span {
+        &.blue{
+          span{
             background: rgba(0, 191, 253, 1);
           }
-          div {
-            border-color: rgba(0, 191, 253, 1);
-            color: rgba(0, 191, 253, 1);
-            background: linear-gradient(0deg, #08324f 0%, #0b3360 100%);
+          div{
+            border-color:rgba(0, 191, 253, 1);
+            color:rgba(0, 191, 253, 1);
+            background: linear-gradient(0deg, #08324F 0%, #0B3360 100%);
           }
         }
-        &.yellow {
-          span {
-            background: rgba(222, 230, 0, 1);
+        &.yellow{
+          span{
+            background:rgba(222, 230, 0, 1);
           }
-          div {
-            border-color: rgba(222, 230, 0, 1);
-            color: rgba(222, 230, 0, 1);
-            background: linear-gradient(0deg, #4f4b06 0%, #4f4e06 98%);
+          div{
+            border-color:rgba(222, 230, 0, 1);
+            color:rgba(222, 230, 0, 1);
+            background: linear-gradient(0deg, #4F4B06 0%, #4F4E06 98%);
           }
         }
-        &.orange {
-          span {
-            background: rgba(255, 184, 15, 1);
+        &.orange{
+          span{
+            background:rgba(255, 184, 15, 1);
           }
-          div {
-            border-color: rgba(255, 184, 15, 1);
-            color: rgba(255, 184, 15, 1);
-            background: linear-gradient(0deg, #4f3d06 0%, #4f3d06 98%);
+          div{
+            border-color:rgba(255, 184, 15, 1);
+            color:rgba(255, 184, 15, 1);
+            background: linear-gradient(0deg, #4F3D06 0%, #4F3D06 98%);
           }
         }
-        &.read {
-          span {
-            background: rgba(255, 26, 26, 1);
+        &.read{
+          span{
+            background:rgba(255, 26, 26, 1);
           }
-          div {
-            border-color: rgba(255, 26, 26, 1);
-            color: rgba(255, 26, 26, 1);
-            background: linear-gradient(0deg, #3e0808 0%, #420808 100%);
+          div{
+            border-color:rgba(255, 26, 26, 1);
+            color:rgba(255, 26, 26, 1);
+            background: linear-gradient(0deg, #3E0808 0%, #420808 100%);
           }
         }
       }
     }
-    .playBg {
-      width: calc(100% - 30px);
-      height: 18px;
-      background: rgba(77, 149, 217, 0.15);
-      border-radius: 9px;
-      padding: 3px;
-      overflow: hidden;
-    }
-    .playIn {
-      height: 100%;
-      background: linear-gradient(90deg, #1890ff, #1ee7e7);
+  }
+  .playIn {
+    height: 100%;
+    background: linear-gradient(90deg, #1890ff, #1ee7e7);
+    border-radius: 6px;
+    position: relative;
+    overflow: hidden;
+    &::before {
+      content: "";
+      position: absolute;
+      right: 0;
+      top: 0;
+      left: 0;
+      height: 12px;
       border-radius: 6px;
+      background: url(@/assets/images/fxhg/hgpx.png) repeat-x;
+      background-size: 16px 12px;
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 72px;
+      height: 12px;
+      background: url(@/assets/images/fxhg/hgpr.png) no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .rainList {
+    float: right;
+    line-height: 24px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #ffffff;
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      li {
+        width: 54px;
+        text-align: center;
+        background: #00344fff;
+        margin-left: 10px;
+        cursor: pointer;
+        &.active {
+          background: #002d44;
+          border-radius: 2px;
+          border: 1px solid #1cf5fc;
+        }
+      }
+    }
+  }
+  .playRadio {
+    display: flex;
+    width: calc(100% - 30px);
+    padding: 0;
+    margin: 0;
+    padding-top: 34px;
+    position: relative;
+    li {
+      width: 4.1666%;
+      padding-top: 10px;
+      display: flex;
+      justify-content: center;
       position: relative;
       overflow: hidden;
       &::before {

diff --git a/src/api/hsApi.js b/src/api/hsApi.js
index df144fe..5418193 100644
--- a/src/api/hsApi.js
+++ b/src/api/hsApi.js
@@ -6,4 +6,18 @@
     method: "get",
     params
   });
+}
+export function rainMapDataListBack(params) {
+  return request({
+    url: `/hsApi/drainageDispatch/rainMapDataListBack`,
+    method: "get",
+    params
+  });
+}
+export function rainCalendar(params) {
+  return request({
+    url: `/hsApi/rainData/rainCalendar`,
+    method: "get",
+    params
+  });
 }
\ No newline at end of file
diff --git a/src/assets/images/fxhg/hgpr.png b/src/assets/images/fxhg/hgpr.png
new file mode 100644
index 0000000..abeb567
--- /dev/null
+++ b/src/assets/images/fxhg/hgpr.png
Binary files differ
diff --git a/src/assets/images/fxhg/hgpx.png b/src/assets/images/fxhg/hgpx.png
new file mode 100644
index 0000000..eb5f225
--- /dev/null
+++ b/src/assets/images/fxhg/hgpx.png
Binary files differ
diff --git a/src/views/oneMap/FloodStuationReview/monitorCalender.vue b/src/views/oneMap/FloodStuationReview/monitorCalender.vue
index fcdb747..2febbfe 100644
--- a/src/views/oneMap/FloodStuationReview/monitorCalender.vue
+++ b/src/views/oneMap/FloodStuationReview/monitorCalender.vue
@@ -56,6 +56,7 @@
 </template>
 
 <script setup>
+import * as hsApi from '@/api/hsApi.js';
 const props = defineProps({
   defaultDate: {
     type: String,
@@ -75,29 +76,27 @@
 const selectVal = ref(props.defaultDate);
 const scheduleData = ref({});
 const loading = ref(false);
-function timeChange(val) {
-  datevalueNew.value = new Date(val);
-  getRainTimeDayData();
-}
 
+let huiguActiveTime=ref('')
+let huiguActiveMoon=ref(proxy.moment().format('YYYY-MM'))
 //获取降雨日历数据
 const getRainTimeDayData = () => {
-  // let data = {
-  //   fromTime: proxy.moment(datevalue.value).startOf('month').format('YYYY-MM-DD'),
-  //   toTime: proxy.moment(datevalue.value).endOf('month').format('YYYY-MM-DD'),
-  // };
-  // loading.value = true;
-  // rainTimeDay(data)
-  //   .then(res => {
-  //     res.data &&
-  //       res.data.forEach(item => {
-  //         scheduleData.value[item.rainTime] = item.rainCumulative;
-  //       });
-  //   })
-  //   .finally(() => {
-  //     loading.value = false;
-  //   });
+  loading.value = true;
+  let parms={queryTime:huiguActiveMoon.value}
+  hsApi.rainCalendar(parms).then(res=>{
+    res.forEach(item => {
+      scheduleData.value[item.date] = item.value;
+    });
+  }).finally(() => {
+    loading.value = false;
+  });
 };
+
+function timeChange(val) {
+  datevalueNew.value = new Date(val);
+  huiguActiveMoon.value=proxy.moment(val).format('YYYY-MM')
+  getRainTimeDayData();
+}
 // 降雨日历点击事件
 const changepeople = val => {
   selectVal.value = val;
@@ -164,6 +163,7 @@
   .datadiv {
     font-size: 10px;
     height: 20px;
+    line-height:1;
   }
 }
 
@@ -237,14 +237,16 @@
       font-size: 15px;
       margin-top: -5px;
       color: #a8abb2 !important;
+      height:30px;
+      line-height:30px;
     }
 
-    .datadiv {
-      width: 100%;
-      position: absolute;
-      bottom: -10px;
-      font-size: 12px;
-    }
+    // .datadiv {
+    //   width: 100%;
+    //   position: absolute;
+    //   bottom: -10px;
+    //   font-size: 12px;
+    // }
   }
 
   .is-today {
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index c2102b1..0ec1107 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -72,90 +72,211 @@
     </ul>
   </div>
   <div class="timeChart">
-    <ChartLs />
+    <ChartLs :echartData="hoursList" :refresh="refresh"/>
   </div>
 </template>
 
 <script setup>
-  import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
-  import ChartLs from "@/views/oneMap/Echarts/ChartLs.vue";
+import * as hsApi from '@/api/hsApi.js';
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import ChartLs from "@/views/oneMap/Echarts/ChartLs.vue";
+const { proxy } = getCurrentInstance();
 
-  let hgEngPlay = ref(false);
-  let stepLin = ref("0");
-  let hgEndActive = ref("");
-  let showRainList = ref([]);
-  let hoursScale = ref([]);
-  let stepNum = ref(0);
-  const showRainLegend = ref(false);
-  const ranLeng = [
-    [
-      { value: "0-0.2", color: "rgba(7, 213, 118, 0)" },
-      { value: "0.2-5", color: "rgba(7, 213, 118, 1)" },
-      { value: "5-25", color: "rgba(38, 129, 240,1)" },
-      { value: ">25", color: "rgba(255, 26, 26, 1)" },
-    ],
-    [
-      { value: "0-5", color: "rgba(7, 213, 118, 0)" },
-      { value: "5-15", color: "rgba(7, 213, 118, 1)" },
-      { value: "15-30", color: "rgba(38, 129, 240,1)" },
-      { value: "30-70", color: "rgba(247, 223, 56, 1)" },
-      { value: "70-140", color: "rgba(230, 85, 41, 1)" },
-      { value: ">140", color: "rgba(255, 26, 26, 1)" },
-    ],
-    [
-      { value: "0-5", color: "rgba(7, 213, 118, 0)" },
-      { value: "5-15", color: "rgba(7, 213, 118, 1)" },
-      { value: "15-30", color: "rgba(38, 129, 240,1)" },
-      { value: "30-70", color: "rgba(247, 223, 56, 1)" },
-      { value: "70-140", color: "rgba(230, 85, 41, 1)" },
-      { value: ">140", color: "rgba(255, 26, 26, 1)" },
-    ],
-    [
-      { value: "0-10", color: "rgba(7, 213, 118, 0)" },
-      { value: "10-25", color: "rgba(7, 213, 118, 1)" },
-      { value: "25-50", color: "rgba(38, 129, 240,1)" },
-      { value: "50-100", color: "rgba(247, 223, 56, 1)" },
-      { value: "100-250", color: "rgba(230, 85, 41, 1)" },
-      { value: ">250", color: "rgba(255, 26, 26, 1)" },
-    ],
-  ];
-  const hgEngList = [
-    { key: 1, name: "1小时" },
-    { key: 3, name: "3小时" },
-    { key: 12, name: "12小时" },
-    { key: 24, name: "24小时" },
-  ];
-  function runDayTime() {
-    hgEndActive.value = "";
-    showRainLegend.value = true;
-    showRainList.value = ranLeng[0];
-  }
-  function timeLoop() {
-    runDayInterval.value = setTimeout(() => {
-      stepNum.value++;
+// 面板内容展开收起控制
+const props = defineProps({
+  checkTime: {
+    type: String,
+  },
+});
 
-      let levels = ranLeng[0].map((i, idx) => ({
-        ...i,
-        value: Number(i.value.split("-")[0]),
-      }));
+let hgEngPlay = ref(false);
+let stepLin = ref("0");
+let refresh = ref(0);
+let hgEndActive = ref("");
+let showRainList = ref([]);
+let hoursList=ref({})
+let hoursScale = ref([]);
+let stepNum = ref(0);
+const showRainLegend = ref(false);
+const ranLeng = [
+  [
+    { value: "0-0.2", color: "rgba(7, 213, 118, 0)" },
+    { value: "0.2-5", color: "rgba(7, 213, 118, 1)" },
+    { value: "5-25", color: "rgba(38, 129, 240,1)" },
+    { value: ">25", color: "rgba(255, 26, 26, 1)" },
+  ],
+  [
+    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
+    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
+    { value: "15-30", color: "rgba(38, 129, 240,1)" },
+    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
+    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
+    { value: ">140", color: "rgba(255, 26, 26, 1)" },
+  ],
+  [
+    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
+    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
+    { value: "15-30", color: "rgba(38, 129, 240,1)" },
+    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
+    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
+    { value: ">140", color: "rgba(255, 26, 26, 1)" },
+  ],
+  [
+    { value: "0-10", color: "rgba(7, 213, 118, 0)" },
+    { value: "10-25", color: "rgba(7, 213, 118, 1)" },
+    { value: "25-50", color: "rgba(38, 129, 240,1)" },
+    { value: "50-100", color: "rgba(247, 223, 56, 1)" },
+    { value: "100-250", color: "rgba(230, 85, 41, 1)" },
+    { value: ">250", color: "rgba(255, 26, 26, 1)" },
+  ],
+];
+const hgEngList = [
+  { key: 1, name: "1小时" },
+  { key: 3, name: "3小时" },
+  { key: 12, name: "12小时" },
+  { key: 24, name: "24小时" },
+];
+//获取底部数据
+function getTimeData(){
+   hsApi.rainMapDataBack({time:props.checkTime}).then(res=>{
+    if(res.code==200){
+      hoursList.value=res.data
+      hoursList.value.activeIndex=0
+      let array=[]
+      let list=JSON.parse(JSON.stringify(hoursList.value.rainTrend))
+      list.forEach((e,i)=>{
+        let obj={
+          weather:e,
+          time:proxy.moment(hoursList.value.date[i]).format("H"),
+          rain:hoursList.value.history[i],
+          chuse:false
+        }
+        array.push(obj)
+      })
+      hoursScale.value=array
+      refresh.value=Math.random();
+      hgEngPlay.value=false
+    }
+  })
+}
+let runDayInterval=ref()
+function runDayTime(){
+  hgEndActive.value=''
+  showRainLegend.value=true
+  showRainList.value=ranLeng[0]
+  hoursScale.value.forEach(e=>{
+    e.chuse=false
+  })
+  if(hgEngPlay.value){
+    // newfiberMap.setCenter({
+    //   "roll": 0,
+    //   "pitch": -89.87733174015287,
+    //   "heading": 360,
+    //   "lng": 114.30934084478585,
+    //   "lat": 30.44275262912909,
+    //   "zoom": 112193.80415470112
+    // });
+    timeLoop()
+  }else{
+    hgEngPlay.value=false
+    clearInterval(runDayInterval.value)
+  }
+}
 
-      console.log(
-              "levels",
-              levels.map((i) => i.value)
-      );
-    });
+function timeLoop(){
+  let runTime=500
+  if(hoursList.value.rainTrend[Number(stepNum.value)]=='无雨'){
+    runTime=500
+  }else{
+    runTime=3000
   }
-  function emptyRun() {
-    stepLin.value = "0%";
-    showRainLegend.value = false;
-  }
+  runDayInterval.value=setTimeout(()=> {
+    stepNum.value++
+    if(stepNum.value<=24){
+      // NewFiberMapUtils.disposeRainfall(hoursList.value.rainTrend[Number(stepNum.value)-1])
+      stepLin.value=`${stepNum.value*4.1666}%`
+      let levels = ranLeng[0].map((i,idx) => ({...i,value:Number(i.value.split('-')[0])}));
+      // console.log('stepNum.value',stepNum.value - 1);
+      // console.log('levels',levels.map(i => i.value));
+      // console.log('dataas',hoursList.value.resultList[Number(stepNum.value)-1].map(i => i.value));
+      // NewFiberMapUtils.getKringImg(0, true, {data:hoursList.value.resultList[Number(stepNum.value)-1],code:200}, newfiberMap, levels);
+      timeLoop()
+    }else{
+      emptyRun()
+    }
+    changeChartData()
+  }, runTime)
+}
 
-  function changeHourTime(num) {
-    hgEndActive.value = num;
-    showRainLegend.value = true;
-    showRainList.value =
-            num == 1 ? ranLeng[0] : num == 3 ? ranLeng[1] : num == 12 ? ranLeng[2] : ranLeng[3];
+function emptyRun(){
+  stepLin.value='0%'
+  stepNum.value=0
+  hgEngPlay.value=false
+  showRainLegend.value=false
+  // NewFiberMapUtils.disposeRainfall('')
+  // newfiberMap.setLayersVisible(["krigingImage"],false)
+  hoursList.value.activeIndex=stepNum.value
+  clearInterval(runDayInterval.value)
+  if(runDayInterval.value){
+    runDayInterval.value=null
+    refresh.value=Math.random();
   }
+}
+
+function changeChartData(){
+  hoursList.value.activeIndex=stepNum.value
+  refresh.value=Math.random()
+}
+
+function changeHourTime(num){
+  hgEndActive.value=num
+  emptyRun()
+  showRainLegend.value=true
+  showRainList.value=num==1?ranLeng[0]:num==3?ranLeng[1]:num==12?ranLeng[2]:ranLeng[3]
+  let parms={
+    type:num,
+    time:props.checkTime
+  }
+  hsApi.rainMapDataListBack(parms).then(res=>{
+    if(res.code==200){
+      // 24小时前端处理
+      if(hgEndActive.value==24){
+        hoursScale.value.forEach(e=>{
+          e.chuse=true
+        })
+      }else{
+        hoursScale.value.forEach(e=>{
+          e.chuse=false
+        })
+        res.data.max.forEach(s=>{
+          hoursScale.value.forEach(e=>{
+            if(e.time==proxy.moment(s).format("H")){
+              e.chuse=true
+            }
+          })
+        })
+      }
+      // newfiberMap.setCenter({
+      //   "roll": 0,
+      //   "pitch": -89.87733174015287,
+      //   "heading": 360,
+      //   "lng": 114.30934084478585,
+      //   "lat": 30.44275262912909,
+      //   "zoom": 112193.80415470112
+      // });
+      // NewFiberMapUtils.disposeRainfall(res.data.weather)
+      // let levels = ranLeng[{1:0,3:1,12:2,24:3}[num]].map((i,idx) => ({...i,value:Number(i.value.split('-')[0])}));
+      //  NewFiberMapUtils.getKringImg(num, true, {data:res.data.resultList,code:200}, newfiberMap, levels);
+    }
+  })
+}
+watch(
+  () => props.checkTime,
+  () => {
+    getTimeData()
+  },
+  { immediate: true }
+);
 </script>
 
 <style lang="scss" scoped>
@@ -187,79 +308,132 @@
   .timeList {
     padding: 12px 20px 10px;
     overflow: hidden;
-    .colorRadio {
+    .colorRadio{
       float: left;
-      .btn {
-        margin-right: 20px;
-        span {
+      .btn{
+        margin-right:20px;
+        span{
           width: 8px;
           height: 8px;
           border-radius: 50%;
           margin-right: 5px;
         }
-        div {
+        div{
           width: 42px;
           line-height: 22px;
-          border: 1px solid rgba(0, 191, 253, 0);
+          border: 1px solid  rgba(0, 191, 253, 0);
           border-radius: 4px;
           text-align: center;
           font-weight: 400;
           font-size: 14px;
         }
-        &.blue {
-          span {
+        &.blue{
+          span{
             background: rgba(0, 191, 253, 1);
           }
-          div {
-            border-color: rgba(0, 191, 253, 1);
-            color: rgba(0, 191, 253, 1);
-            background: linear-gradient(0deg, #08324f 0%, #0b3360 100%);
+          div{
+            border-color:rgba(0, 191, 253, 1);
+            color:rgba(0, 191, 253, 1);
+            background: linear-gradient(0deg, #08324F 0%, #0B3360 100%);
           }
         }
-        &.yellow {
-          span {
-            background: rgba(222, 230, 0, 1);
+        &.yellow{
+          span{
+            background:rgba(222, 230, 0, 1);
           }
-          div {
-            border-color: rgba(222, 230, 0, 1);
-            color: rgba(222, 230, 0, 1);
-            background: linear-gradient(0deg, #4f4b06 0%, #4f4e06 98%);
+          div{
+            border-color:rgba(222, 230, 0, 1);
+            color:rgba(222, 230, 0, 1);
+            background: linear-gradient(0deg, #4F4B06 0%, #4F4E06 98%);
           }
         }
-        &.orange {
-          span {
-            background: rgba(255, 184, 15, 1);
+        &.orange{
+          span{
+            background:rgba(255, 184, 15, 1);
           }
-          div {
-            border-color: rgba(255, 184, 15, 1);
-            color: rgba(255, 184, 15, 1);
-            background: linear-gradient(0deg, #4f3d06 0%, #4f3d06 98%);
+          div{
+            border-color:rgba(255, 184, 15, 1);
+            color:rgba(255, 184, 15, 1);
+            background: linear-gradient(0deg, #4F3D06 0%, #4F3D06 98%);
           }
         }
-        &.read {
-          span {
-            background: rgba(255, 26, 26, 1);
+        &.read{
+          span{
+            background:rgba(255, 26, 26, 1);
           }
-          div {
-            border-color: rgba(255, 26, 26, 1);
-            color: rgba(255, 26, 26, 1);
-            background: linear-gradient(0deg, #3e0808 0%, #420808 100%);
+          div{
+            border-color:rgba(255, 26, 26, 1);
+            color:rgba(255, 26, 26, 1);
+            background: linear-gradient(0deg, #3E0808 0%, #420808 100%);
           }
         }
       }
     }
-    .playBg {
-      width: calc(100% - 30px);
-      height: 18px;
-      background: rgba(77, 149, 217, 0.15);
-      border-radius: 9px;
-      padding: 3px;
-      overflow: hidden;
-    }
-    .playIn {
-      height: 100%;
-      background: linear-gradient(90deg, #1890ff, #1ee7e7);
+  }
+  .playIn {
+    height: 100%;
+    background: linear-gradient(90deg, #1890ff, #1ee7e7);
+    border-radius: 6px;
+    position: relative;
+    overflow: hidden;
+    &::before {
+      content: "";
+      position: absolute;
+      right: 0;
+      top: 0;
+      left: 0;
+      height: 12px;
       border-radius: 6px;
+      background: url(@/assets/images/fxhg/hgpx.png) repeat-x;
+      background-size: 16px 12px;
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 72px;
+      height: 12px;
+      background: url(@/assets/images/fxhg/hgpr.png) no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .rainList {
+    float: right;
+    line-height: 24px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #ffffff;
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      li {
+        width: 54px;
+        text-align: center;
+        background: #00344fff;
+        margin-left: 10px;
+        cursor: pointer;
+        &.active {
+          background: #002d44;
+          border-radius: 2px;
+          border: 1px solid #1cf5fc;
+        }
+      }
+    }
+  }
+  .playRadio {
+    display: flex;
+    width: calc(100% - 30px);
+    padding: 0;
+    margin: 0;
+    padding-top: 34px;
+    position: relative;
+    li {
+      width: 4.1666%;
+      padding-top: 10px;
+      display: flex;
+      justify-content: center;
       position: relative;
       overflow: hidden;
       &::before {
diff --git a/src/views/oneMap/components/FHPL.vue b/src/views/oneMap/components/FHPL.vue
index 6327831..2f6a470 100644
--- a/src/views/oneMap/components/FHPL.vue
+++ b/src/views/oneMap/components/FHPL.vue
@@ -19,7 +19,7 @@
     </div>
   </div>
 
-  <FXHG v-if="curType == true" />
+  <FXHG v-if="curType == true" :checkTime="checkTime"/>
 </template>
 
 <script setup name="FHPL">
@@ -36,6 +36,7 @@
 const control = ref('0');
 const Showtop = ref(true);
 const showPanel = ref(true); //面板展开收起
+const checkTime = ref('');
 // 面板内容展开收起控制
 const props = defineProps({
   showPanel: {
@@ -46,7 +47,7 @@
   isShowMonitorCalender.value = true;
 }
 const change = date => {
-  bus.emit('checkRili', date);
+  checkTime.value=date
 
   isShowMonitorCalender.value = false;
   Showtop.value = false;

diff --git a/src/api/hsApi.js b/src/api/hsApi.js
index df144fe..5418193 100644
--- a/src/api/hsApi.js
+++ b/src/api/hsApi.js
@@ -6,4 +6,18 @@
     method: "get",
     params
   });
+}
+export function rainMapDataListBack(params) {
+  return request({
+    url: `/hsApi/drainageDispatch/rainMapDataListBack`,
+    method: "get",
+    params
+  });
+}
+export function rainCalendar(params) {
+  return request({
+    url: `/hsApi/rainData/rainCalendar`,
+    method: "get",
+    params
+  });
 }
\ No newline at end of file
diff --git a/src/assets/images/fxhg/hgpr.png b/src/assets/images/fxhg/hgpr.png
new file mode 100644
index 0000000..abeb567
--- /dev/null
+++ b/src/assets/images/fxhg/hgpr.png
Binary files differ
diff --git a/src/assets/images/fxhg/hgpx.png b/src/assets/images/fxhg/hgpx.png
new file mode 100644
index 0000000..eb5f225
--- /dev/null
+++ b/src/assets/images/fxhg/hgpx.png
Binary files differ
diff --git a/src/views/oneMap/FloodStuationReview/monitorCalender.vue b/src/views/oneMap/FloodStuationReview/monitorCalender.vue
index fcdb747..2febbfe 100644
--- a/src/views/oneMap/FloodStuationReview/monitorCalender.vue
+++ b/src/views/oneMap/FloodStuationReview/monitorCalender.vue
@@ -56,6 +56,7 @@
 </template>
 
 <script setup>
+import * as hsApi from '@/api/hsApi.js';
 const props = defineProps({
   defaultDate: {
     type: String,
@@ -75,29 +76,27 @@
 const selectVal = ref(props.defaultDate);
 const scheduleData = ref({});
 const loading = ref(false);
-function timeChange(val) {
-  datevalueNew.value = new Date(val);
-  getRainTimeDayData();
-}
 
+let huiguActiveTime=ref('')
+let huiguActiveMoon=ref(proxy.moment().format('YYYY-MM'))
 //获取降雨日历数据
 const getRainTimeDayData = () => {
-  // let data = {
-  //   fromTime: proxy.moment(datevalue.value).startOf('month').format('YYYY-MM-DD'),
-  //   toTime: proxy.moment(datevalue.value).endOf('month').format('YYYY-MM-DD'),
-  // };
-  // loading.value = true;
-  // rainTimeDay(data)
-  //   .then(res => {
-  //     res.data &&
-  //       res.data.forEach(item => {
-  //         scheduleData.value[item.rainTime] = item.rainCumulative;
-  //       });
-  //   })
-  //   .finally(() => {
-  //     loading.value = false;
-  //   });
+  loading.value = true;
+  let parms={queryTime:huiguActiveMoon.value}
+  hsApi.rainCalendar(parms).then(res=>{
+    res.forEach(item => {
+      scheduleData.value[item.date] = item.value;
+    });
+  }).finally(() => {
+    loading.value = false;
+  });
 };
+
+function timeChange(val) {
+  datevalueNew.value = new Date(val);
+  huiguActiveMoon.value=proxy.moment(val).format('YYYY-MM')
+  getRainTimeDayData();
+}
 // 降雨日历点击事件
 const changepeople = val => {
   selectVal.value = val;
@@ -164,6 +163,7 @@
   .datadiv {
     font-size: 10px;
     height: 20px;
+    line-height:1;
   }
 }
 
@@ -237,14 +237,16 @@
       font-size: 15px;
       margin-top: -5px;
       color: #a8abb2 !important;
+      height:30px;
+      line-height:30px;
     }
 
-    .datadiv {
-      width: 100%;
-      position: absolute;
-      bottom: -10px;
-      font-size: 12px;
-    }
+    // .datadiv {
+    //   width: 100%;
+    //   position: absolute;
+    //   bottom: -10px;
+    //   font-size: 12px;
+    // }
   }
 
   .is-today {
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index c2102b1..0ec1107 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -72,90 +72,211 @@
     </ul>
   </div>
   <div class="timeChart">
-    <ChartLs />
+    <ChartLs :echartData="hoursList" :refresh="refresh"/>
   </div>
 </template>
 
 <script setup>
-  import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
-  import ChartLs from "@/views/oneMap/Echarts/ChartLs.vue";
+import * as hsApi from '@/api/hsApi.js';
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import ChartLs from "@/views/oneMap/Echarts/ChartLs.vue";
+const { proxy } = getCurrentInstance();
 
-  let hgEngPlay = ref(false);
-  let stepLin = ref("0");
-  let hgEndActive = ref("");
-  let showRainList = ref([]);
-  let hoursScale = ref([]);
-  let stepNum = ref(0);
-  const showRainLegend = ref(false);
-  const ranLeng = [
-    [
-      { value: "0-0.2", color: "rgba(7, 213, 118, 0)" },
-      { value: "0.2-5", color: "rgba(7, 213, 118, 1)" },
-      { value: "5-25", color: "rgba(38, 129, 240,1)" },
-      { value: ">25", color: "rgba(255, 26, 26, 1)" },
-    ],
-    [
-      { value: "0-5", color: "rgba(7, 213, 118, 0)" },
-      { value: "5-15", color: "rgba(7, 213, 118, 1)" },
-      { value: "15-30", color: "rgba(38, 129, 240,1)" },
-      { value: "30-70", color: "rgba(247, 223, 56, 1)" },
-      { value: "70-140", color: "rgba(230, 85, 41, 1)" },
-      { value: ">140", color: "rgba(255, 26, 26, 1)" },
-    ],
-    [
-      { value: "0-5", color: "rgba(7, 213, 118, 0)" },
-      { value: "5-15", color: "rgba(7, 213, 118, 1)" },
-      { value: "15-30", color: "rgba(38, 129, 240,1)" },
-      { value: "30-70", color: "rgba(247, 223, 56, 1)" },
-      { value: "70-140", color: "rgba(230, 85, 41, 1)" },
-      { value: ">140", color: "rgba(255, 26, 26, 1)" },
-    ],
-    [
-      { value: "0-10", color: "rgba(7, 213, 118, 0)" },
-      { value: "10-25", color: "rgba(7, 213, 118, 1)" },
-      { value: "25-50", color: "rgba(38, 129, 240,1)" },
-      { value: "50-100", color: "rgba(247, 223, 56, 1)" },
-      { value: "100-250", color: "rgba(230, 85, 41, 1)" },
-      { value: ">250", color: "rgba(255, 26, 26, 1)" },
-    ],
-  ];
-  const hgEngList = [
-    { key: 1, name: "1小时" },
-    { key: 3, name: "3小时" },
-    { key: 12, name: "12小时" },
-    { key: 24, name: "24小时" },
-  ];
-  function runDayTime() {
-    hgEndActive.value = "";
-    showRainLegend.value = true;
-    showRainList.value = ranLeng[0];
-  }
-  function timeLoop() {
-    runDayInterval.value = setTimeout(() => {
-      stepNum.value++;
+// 面板内容展开收起控制
+const props = defineProps({
+  checkTime: {
+    type: String,
+  },
+});
 
-      let levels = ranLeng[0].map((i, idx) => ({
-        ...i,
-        value: Number(i.value.split("-")[0]),
-      }));
+let hgEngPlay = ref(false);
+let stepLin = ref("0");
+let refresh = ref(0);
+let hgEndActive = ref("");
+let showRainList = ref([]);
+let hoursList=ref({})
+let hoursScale = ref([]);
+let stepNum = ref(0);
+const showRainLegend = ref(false);
+const ranLeng = [
+  [
+    { value: "0-0.2", color: "rgba(7, 213, 118, 0)" },
+    { value: "0.2-5", color: "rgba(7, 213, 118, 1)" },
+    { value: "5-25", color: "rgba(38, 129, 240,1)" },
+    { value: ">25", color: "rgba(255, 26, 26, 1)" },
+  ],
+  [
+    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
+    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
+    { value: "15-30", color: "rgba(38, 129, 240,1)" },
+    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
+    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
+    { value: ">140", color: "rgba(255, 26, 26, 1)" },
+  ],
+  [
+    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
+    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
+    { value: "15-30", color: "rgba(38, 129, 240,1)" },
+    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
+    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
+    { value: ">140", color: "rgba(255, 26, 26, 1)" },
+  ],
+  [
+    { value: "0-10", color: "rgba(7, 213, 118, 0)" },
+    { value: "10-25", color: "rgba(7, 213, 118, 1)" },
+    { value: "25-50", color: "rgba(38, 129, 240,1)" },
+    { value: "50-100", color: "rgba(247, 223, 56, 1)" },
+    { value: "100-250", color: "rgba(230, 85, 41, 1)" },
+    { value: ">250", color: "rgba(255, 26, 26, 1)" },
+  ],
+];
+const hgEngList = [
+  { key: 1, name: "1小时" },
+  { key: 3, name: "3小时" },
+  { key: 12, name: "12小时" },
+  { key: 24, name: "24小时" },
+];
+//获取底部数据
+function getTimeData(){
+   hsApi.rainMapDataBack({time:props.checkTime}).then(res=>{
+    if(res.code==200){
+      hoursList.value=res.data
+      hoursList.value.activeIndex=0
+      let array=[]
+      let list=JSON.parse(JSON.stringify(hoursList.value.rainTrend))
+      list.forEach((e,i)=>{
+        let obj={
+          weather:e,
+          time:proxy.moment(hoursList.value.date[i]).format("H"),
+          rain:hoursList.value.history[i],
+          chuse:false
+        }
+        array.push(obj)
+      })
+      hoursScale.value=array
+      refresh.value=Math.random();
+      hgEngPlay.value=false
+    }
+  })
+}
+let runDayInterval=ref()
+function runDayTime(){
+  hgEndActive.value=''
+  showRainLegend.value=true
+  showRainList.value=ranLeng[0]
+  hoursScale.value.forEach(e=>{
+    e.chuse=false
+  })
+  if(hgEngPlay.value){
+    // newfiberMap.setCenter({
+    //   "roll": 0,
+    //   "pitch": -89.87733174015287,
+    //   "heading": 360,
+    //   "lng": 114.30934084478585,
+    //   "lat": 30.44275262912909,
+    //   "zoom": 112193.80415470112
+    // });
+    timeLoop()
+  }else{
+    hgEngPlay.value=false
+    clearInterval(runDayInterval.value)
+  }
+}
 
-      console.log(
-              "levels",
-              levels.map((i) => i.value)
-      );
-    });
+function timeLoop(){
+  let runTime=500
+  if(hoursList.value.rainTrend[Number(stepNum.value)]=='无雨'){
+    runTime=500
+  }else{
+    runTime=3000
   }
-  function emptyRun() {
-    stepLin.value = "0%";
-    showRainLegend.value = false;
-  }
+  runDayInterval.value=setTimeout(()=> {
+    stepNum.value++
+    if(stepNum.value<=24){
+      // NewFiberMapUtils.disposeRainfall(hoursList.value.rainTrend[Number(stepNum.value)-1])
+      stepLin.value=`${stepNum.value*4.1666}%`
+      let levels = ranLeng[0].map((i,idx) => ({...i,value:Number(i.value.split('-')[0])}));
+      // console.log('stepNum.value',stepNum.value - 1);
+      // console.log('levels',levels.map(i => i.value));
+      // console.log('dataas',hoursList.value.resultList[Number(stepNum.value)-1].map(i => i.value));
+      // NewFiberMapUtils.getKringImg(0, true, {data:hoursList.value.resultList[Number(stepNum.value)-1],code:200}, newfiberMap, levels);
+      timeLoop()
+    }else{
+      emptyRun()
+    }
+    changeChartData()
+  }, runTime)
+}
 
-  function changeHourTime(num) {
-    hgEndActive.value = num;
-    showRainLegend.value = true;
-    showRainList.value =
-            num == 1 ? ranLeng[0] : num == 3 ? ranLeng[1] : num == 12 ? ranLeng[2] : ranLeng[3];
+function emptyRun(){
+  stepLin.value='0%'
+  stepNum.value=0
+  hgEngPlay.value=false
+  showRainLegend.value=false
+  // NewFiberMapUtils.disposeRainfall('')
+  // newfiberMap.setLayersVisible(["krigingImage"],false)
+  hoursList.value.activeIndex=stepNum.value
+  clearInterval(runDayInterval.value)
+  if(runDayInterval.value){
+    runDayInterval.value=null
+    refresh.value=Math.random();
   }
+}
+
+function changeChartData(){
+  hoursList.value.activeIndex=stepNum.value
+  refresh.value=Math.random()
+}
+
+function changeHourTime(num){
+  hgEndActive.value=num
+  emptyRun()
+  showRainLegend.value=true
+  showRainList.value=num==1?ranLeng[0]:num==3?ranLeng[1]:num==12?ranLeng[2]:ranLeng[3]
+  let parms={
+    type:num,
+    time:props.checkTime
+  }
+  hsApi.rainMapDataListBack(parms).then(res=>{
+    if(res.code==200){
+      // 24小时前端处理
+      if(hgEndActive.value==24){
+        hoursScale.value.forEach(e=>{
+          e.chuse=true
+        })
+      }else{
+        hoursScale.value.forEach(e=>{
+          e.chuse=false
+        })
+        res.data.max.forEach(s=>{
+          hoursScale.value.forEach(e=>{
+            if(e.time==proxy.moment(s).format("H")){
+              e.chuse=true
+            }
+          })
+        })
+      }
+      // newfiberMap.setCenter({
+      //   "roll": 0,
+      //   "pitch": -89.87733174015287,
+      //   "heading": 360,
+      //   "lng": 114.30934084478585,
+      //   "lat": 30.44275262912909,
+      //   "zoom": 112193.80415470112
+      // });
+      // NewFiberMapUtils.disposeRainfall(res.data.weather)
+      // let levels = ranLeng[{1:0,3:1,12:2,24:3}[num]].map((i,idx) => ({...i,value:Number(i.value.split('-')[0])}));
+      //  NewFiberMapUtils.getKringImg(num, true, {data:res.data.resultList,code:200}, newfiberMap, levels);
+    }
+  })
+}
+watch(
+  () => props.checkTime,
+  () => {
+    getTimeData()
+  },
+  { immediate: true }
+);
 </script>
 
 <style lang="scss" scoped>
@@ -187,79 +308,132 @@
   .timeList {
     padding: 12px 20px 10px;
     overflow: hidden;
-    .colorRadio {
+    .colorRadio{
       float: left;
-      .btn {
-        margin-right: 20px;
-        span {
+      .btn{
+        margin-right:20px;
+        span{
           width: 8px;
           height: 8px;
           border-radius: 50%;
           margin-right: 5px;
         }
-        div {
+        div{
           width: 42px;
           line-height: 22px;
-          border: 1px solid rgba(0, 191, 253, 0);
+          border: 1px solid  rgba(0, 191, 253, 0);
           border-radius: 4px;
           text-align: center;
           font-weight: 400;
           font-size: 14px;
         }
-        &.blue {
-          span {
+        &.blue{
+          span{
             background: rgba(0, 191, 253, 1);
           }
-          div {
-            border-color: rgba(0, 191, 253, 1);
-            color: rgba(0, 191, 253, 1);
-            background: linear-gradient(0deg, #08324f 0%, #0b3360 100%);
+          div{
+            border-color:rgba(0, 191, 253, 1);
+            color:rgba(0, 191, 253, 1);
+            background: linear-gradient(0deg, #08324F 0%, #0B3360 100%);
           }
         }
-        &.yellow {
-          span {
-            background: rgba(222, 230, 0, 1);
+        &.yellow{
+          span{
+            background:rgba(222, 230, 0, 1);
           }
-          div {
-            border-color: rgba(222, 230, 0, 1);
-            color: rgba(222, 230, 0, 1);
-            background: linear-gradient(0deg, #4f4b06 0%, #4f4e06 98%);
+          div{
+            border-color:rgba(222, 230, 0, 1);
+            color:rgba(222, 230, 0, 1);
+            background: linear-gradient(0deg, #4F4B06 0%, #4F4E06 98%);
           }
         }
-        &.orange {
-          span {
-            background: rgba(255, 184, 15, 1);
+        &.orange{
+          span{
+            background:rgba(255, 184, 15, 1);
           }
-          div {
-            border-color: rgba(255, 184, 15, 1);
-            color: rgba(255, 184, 15, 1);
-            background: linear-gradient(0deg, #4f3d06 0%, #4f3d06 98%);
+          div{
+            border-color:rgba(255, 184, 15, 1);
+            color:rgba(255, 184, 15, 1);
+            background: linear-gradient(0deg, #4F3D06 0%, #4F3D06 98%);
           }
         }
-        &.read {
-          span {
-            background: rgba(255, 26, 26, 1);
+        &.read{
+          span{
+            background:rgba(255, 26, 26, 1);
           }
-          div {
-            border-color: rgba(255, 26, 26, 1);
-            color: rgba(255, 26, 26, 1);
-            background: linear-gradient(0deg, #3e0808 0%, #420808 100%);
+          div{
+            border-color:rgba(255, 26, 26, 1);
+            color:rgba(255, 26, 26, 1);
+            background: linear-gradient(0deg, #3E0808 0%, #420808 100%);
           }
         }
       }
     }
-    .playBg {
-      width: calc(100% - 30px);
-      height: 18px;
-      background: rgba(77, 149, 217, 0.15);
-      border-radius: 9px;
-      padding: 3px;
-      overflow: hidden;
-    }
-    .playIn {
-      height: 100%;
-      background: linear-gradient(90deg, #1890ff, #1ee7e7);
+  }
+  .playIn {
+    height: 100%;
+    background: linear-gradient(90deg, #1890ff, #1ee7e7);
+    border-radius: 6px;
+    position: relative;
+    overflow: hidden;
+    &::before {
+      content: "";
+      position: absolute;
+      right: 0;
+      top: 0;
+      left: 0;
+      height: 12px;
       border-radius: 6px;
+      background: url(@/assets/images/fxhg/hgpx.png) repeat-x;
+      background-size: 16px 12px;
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 72px;
+      height: 12px;
+      background: url(@/assets/images/fxhg/hgpr.png) no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .rainList {
+    float: right;
+    line-height: 24px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #ffffff;
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      li {
+        width: 54px;
+        text-align: center;
+        background: #00344fff;
+        margin-left: 10px;
+        cursor: pointer;
+        &.active {
+          background: #002d44;
+          border-radius: 2px;
+          border: 1px solid #1cf5fc;
+        }
+      }
+    }
+  }
+  .playRadio {
+    display: flex;
+    width: calc(100% - 30px);
+    padding: 0;
+    margin: 0;
+    padding-top: 34px;
+    position: relative;
+    li {
+      width: 4.1666%;
+      padding-top: 10px;
+      display: flex;
+      justify-content: center;
       position: relative;
       overflow: hidden;
       &::before {
diff --git a/src/views/oneMap/components/FHPL.vue b/src/views/oneMap/components/FHPL.vue
index 6327831..2f6a470 100644
--- a/src/views/oneMap/components/FHPL.vue
+++ b/src/views/oneMap/components/FHPL.vue
@@ -19,7 +19,7 @@
     </div>
   </div>
 
-  <FXHG v-if="curType == true" />
+  <FXHG v-if="curType == true" :checkTime="checkTime"/>
 </template>
 
 <script setup name="FHPL">
@@ -36,6 +36,7 @@
 const control = ref('0');
 const Showtop = ref(true);
 const showPanel = ref(true); //面板展开收起
+const checkTime = ref('');
 // 面板内容展开收起控制
 const props = defineProps({
   showPanel: {
@@ -46,7 +47,7 @@
   isShowMonitorCalender.value = true;
 }
 const change = date => {
-  bus.emit('checkRili', date);
+  checkTime.value=date
 
   isShowMonitorCalender.value = false;
   Showtop.value = false;
diff --git a/src/views/oneMap/components/FXHG.vue b/src/views/oneMap/components/FXHG.vue
index 7f79c2d..ffc6147 100644
--- a/src/views/oneMap/components/FXHG.vue
+++ b/src/views/oneMap/components/FXHG.vue
@@ -7,7 +7,7 @@
       <xqRightBox />
     </div>
     <div :class="['BottomBox', 'animate__animated', showPanel ? 'animate__bounceInUp' : 'animate__bounceInUp']" v-if="showBottom">
-      <sqhgBottomBox />
+      <sqhgBottomBox :checkTime="props.checkTime"/>
     </div>
   </div>
   <div v-if="showPanel == false" class="bnt" @click="goBack">放回</div>
@@ -15,7 +15,6 @@
 </template>
 
 <script setup name="ZHPS">
-import * as hsApi from '@/api/hsApi.js';
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
 import FHPL from '@/views/oneMap/components/FHPL.vue';
 import xqhgLeftBox from '@/views/oneMap/FloodStuationReview/xqhgLeftBox.vue';
@@ -31,6 +30,9 @@
 const props = defineProps({
   showPanel: {
     type: Boolean,
+  }, 
+  checkTime: {
+    type: String,
   },
 });
 function goBack(params) {
@@ -38,15 +40,6 @@
   showBottom.value = false;
   curType.value = true;
 }
-
-// hsApi.rainMapDataBack({time:"2024-10-07"}).then(res=>{
-//     debugger
-//   })
-
-
-
-
-
 watch(
   () => props.showPanel,
   () => {
@@ -54,7 +47,6 @@
   },
   { immediate: true }
 );
-
 onMounted(() => {
   bus.emit('checkBottom', control.value);
 

diff --git a/src/api/hsApi.js b/src/api/hsApi.js
index df144fe..5418193 100644
--- a/src/api/hsApi.js
+++ b/src/api/hsApi.js
@@ -6,4 +6,18 @@
     method: "get",
     params
   });
+}
+export function rainMapDataListBack(params) {
+  return request({
+    url: `/hsApi/drainageDispatch/rainMapDataListBack`,
+    method: "get",
+    params
+  });
+}
+export function rainCalendar(params) {
+  return request({
+    url: `/hsApi/rainData/rainCalendar`,
+    method: "get",
+    params
+  });
 }
\ No newline at end of file
diff --git a/src/assets/images/fxhg/hgpr.png b/src/assets/images/fxhg/hgpr.png
new file mode 100644
index 0000000..abeb567
--- /dev/null
+++ b/src/assets/images/fxhg/hgpr.png
Binary files differ
diff --git a/src/assets/images/fxhg/hgpx.png b/src/assets/images/fxhg/hgpx.png
new file mode 100644
index 0000000..eb5f225
--- /dev/null
+++ b/src/assets/images/fxhg/hgpx.png
Binary files differ
diff --git a/src/views/oneMap/FloodStuationReview/monitorCalender.vue b/src/views/oneMap/FloodStuationReview/monitorCalender.vue
index fcdb747..2febbfe 100644
--- a/src/views/oneMap/FloodStuationReview/monitorCalender.vue
+++ b/src/views/oneMap/FloodStuationReview/monitorCalender.vue
@@ -56,6 +56,7 @@
 </template>
 
 <script setup>
+import * as hsApi from '@/api/hsApi.js';
 const props = defineProps({
   defaultDate: {
     type: String,
@@ -75,29 +76,27 @@
 const selectVal = ref(props.defaultDate);
 const scheduleData = ref({});
 const loading = ref(false);
-function timeChange(val) {
-  datevalueNew.value = new Date(val);
-  getRainTimeDayData();
-}
 
+let huiguActiveTime=ref('')
+let huiguActiveMoon=ref(proxy.moment().format('YYYY-MM'))
 //获取降雨日历数据
 const getRainTimeDayData = () => {
-  // let data = {
-  //   fromTime: proxy.moment(datevalue.value).startOf('month').format('YYYY-MM-DD'),
-  //   toTime: proxy.moment(datevalue.value).endOf('month').format('YYYY-MM-DD'),
-  // };
-  // loading.value = true;
-  // rainTimeDay(data)
-  //   .then(res => {
-  //     res.data &&
-  //       res.data.forEach(item => {
-  //         scheduleData.value[item.rainTime] = item.rainCumulative;
-  //       });
-  //   })
-  //   .finally(() => {
-  //     loading.value = false;
-  //   });
+  loading.value = true;
+  let parms={queryTime:huiguActiveMoon.value}
+  hsApi.rainCalendar(parms).then(res=>{
+    res.forEach(item => {
+      scheduleData.value[item.date] = item.value;
+    });
+  }).finally(() => {
+    loading.value = false;
+  });
 };
+
+function timeChange(val) {
+  datevalueNew.value = new Date(val);
+  huiguActiveMoon.value=proxy.moment(val).format('YYYY-MM')
+  getRainTimeDayData();
+}
 // 降雨日历点击事件
 const changepeople = val => {
   selectVal.value = val;
@@ -164,6 +163,7 @@
   .datadiv {
     font-size: 10px;
     height: 20px;
+    line-height:1;
   }
 }
 
@@ -237,14 +237,16 @@
       font-size: 15px;
       margin-top: -5px;
       color: #a8abb2 !important;
+      height:30px;
+      line-height:30px;
     }
 
-    .datadiv {
-      width: 100%;
-      position: absolute;
-      bottom: -10px;
-      font-size: 12px;
-    }
+    // .datadiv {
+    //   width: 100%;
+    //   position: absolute;
+    //   bottom: -10px;
+    //   font-size: 12px;
+    // }
   }
 
   .is-today {
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index c2102b1..0ec1107 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -72,90 +72,211 @@
     </ul>
   </div>
   <div class="timeChart">
-    <ChartLs />
+    <ChartLs :echartData="hoursList" :refresh="refresh"/>
   </div>
 </template>
 
 <script setup>
-  import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
-  import ChartLs from "@/views/oneMap/Echarts/ChartLs.vue";
+import * as hsApi from '@/api/hsApi.js';
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import ChartLs from "@/views/oneMap/Echarts/ChartLs.vue";
+const { proxy } = getCurrentInstance();
 
-  let hgEngPlay = ref(false);
-  let stepLin = ref("0");
-  let hgEndActive = ref("");
-  let showRainList = ref([]);
-  let hoursScale = ref([]);
-  let stepNum = ref(0);
-  const showRainLegend = ref(false);
-  const ranLeng = [
-    [
-      { value: "0-0.2", color: "rgba(7, 213, 118, 0)" },
-      { value: "0.2-5", color: "rgba(7, 213, 118, 1)" },
-      { value: "5-25", color: "rgba(38, 129, 240,1)" },
-      { value: ">25", color: "rgba(255, 26, 26, 1)" },
-    ],
-    [
-      { value: "0-5", color: "rgba(7, 213, 118, 0)" },
-      { value: "5-15", color: "rgba(7, 213, 118, 1)" },
-      { value: "15-30", color: "rgba(38, 129, 240,1)" },
-      { value: "30-70", color: "rgba(247, 223, 56, 1)" },
-      { value: "70-140", color: "rgba(230, 85, 41, 1)" },
-      { value: ">140", color: "rgba(255, 26, 26, 1)" },
-    ],
-    [
-      { value: "0-5", color: "rgba(7, 213, 118, 0)" },
-      { value: "5-15", color: "rgba(7, 213, 118, 1)" },
-      { value: "15-30", color: "rgba(38, 129, 240,1)" },
-      { value: "30-70", color: "rgba(247, 223, 56, 1)" },
-      { value: "70-140", color: "rgba(230, 85, 41, 1)" },
-      { value: ">140", color: "rgba(255, 26, 26, 1)" },
-    ],
-    [
-      { value: "0-10", color: "rgba(7, 213, 118, 0)" },
-      { value: "10-25", color: "rgba(7, 213, 118, 1)" },
-      { value: "25-50", color: "rgba(38, 129, 240,1)" },
-      { value: "50-100", color: "rgba(247, 223, 56, 1)" },
-      { value: "100-250", color: "rgba(230, 85, 41, 1)" },
-      { value: ">250", color: "rgba(255, 26, 26, 1)" },
-    ],
-  ];
-  const hgEngList = [
-    { key: 1, name: "1小时" },
-    { key: 3, name: "3小时" },
-    { key: 12, name: "12小时" },
-    { key: 24, name: "24小时" },
-  ];
-  function runDayTime() {
-    hgEndActive.value = "";
-    showRainLegend.value = true;
-    showRainList.value = ranLeng[0];
-  }
-  function timeLoop() {
-    runDayInterval.value = setTimeout(() => {
-      stepNum.value++;
+// 面板内容展开收起控制
+const props = defineProps({
+  checkTime: {
+    type: String,
+  },
+});
 
-      let levels = ranLeng[0].map((i, idx) => ({
-        ...i,
-        value: Number(i.value.split("-")[0]),
-      }));
+let hgEngPlay = ref(false);
+let stepLin = ref("0");
+let refresh = ref(0);
+let hgEndActive = ref("");
+let showRainList = ref([]);
+let hoursList=ref({})
+let hoursScale = ref([]);
+let stepNum = ref(0);
+const showRainLegend = ref(false);
+const ranLeng = [
+  [
+    { value: "0-0.2", color: "rgba(7, 213, 118, 0)" },
+    { value: "0.2-5", color: "rgba(7, 213, 118, 1)" },
+    { value: "5-25", color: "rgba(38, 129, 240,1)" },
+    { value: ">25", color: "rgba(255, 26, 26, 1)" },
+  ],
+  [
+    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
+    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
+    { value: "15-30", color: "rgba(38, 129, 240,1)" },
+    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
+    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
+    { value: ">140", color: "rgba(255, 26, 26, 1)" },
+  ],
+  [
+    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
+    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
+    { value: "15-30", color: "rgba(38, 129, 240,1)" },
+    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
+    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
+    { value: ">140", color: "rgba(255, 26, 26, 1)" },
+  ],
+  [
+    { value: "0-10", color: "rgba(7, 213, 118, 0)" },
+    { value: "10-25", color: "rgba(7, 213, 118, 1)" },
+    { value: "25-50", color: "rgba(38, 129, 240,1)" },
+    { value: "50-100", color: "rgba(247, 223, 56, 1)" },
+    { value: "100-250", color: "rgba(230, 85, 41, 1)" },
+    { value: ">250", color: "rgba(255, 26, 26, 1)" },
+  ],
+];
+const hgEngList = [
+  { key: 1, name: "1小时" },
+  { key: 3, name: "3小时" },
+  { key: 12, name: "12小时" },
+  { key: 24, name: "24小时" },
+];
+//获取底部数据
+function getTimeData(){
+   hsApi.rainMapDataBack({time:props.checkTime}).then(res=>{
+    if(res.code==200){
+      hoursList.value=res.data
+      hoursList.value.activeIndex=0
+      let array=[]
+      let list=JSON.parse(JSON.stringify(hoursList.value.rainTrend))
+      list.forEach((e,i)=>{
+        let obj={
+          weather:e,
+          time:proxy.moment(hoursList.value.date[i]).format("H"),
+          rain:hoursList.value.history[i],
+          chuse:false
+        }
+        array.push(obj)
+      })
+      hoursScale.value=array
+      refresh.value=Math.random();
+      hgEngPlay.value=false
+    }
+  })
+}
+let runDayInterval=ref()
+function runDayTime(){
+  hgEndActive.value=''
+  showRainLegend.value=true
+  showRainList.value=ranLeng[0]
+  hoursScale.value.forEach(e=>{
+    e.chuse=false
+  })
+  if(hgEngPlay.value){
+    // newfiberMap.setCenter({
+    //   "roll": 0,
+    //   "pitch": -89.87733174015287,
+    //   "heading": 360,
+    //   "lng": 114.30934084478585,
+    //   "lat": 30.44275262912909,
+    //   "zoom": 112193.80415470112
+    // });
+    timeLoop()
+  }else{
+    hgEngPlay.value=false
+    clearInterval(runDayInterval.value)
+  }
+}
 
-      console.log(
-              "levels",
-              levels.map((i) => i.value)
-      );
-    });
+function timeLoop(){
+  let runTime=500
+  if(hoursList.value.rainTrend[Number(stepNum.value)]=='无雨'){
+    runTime=500
+  }else{
+    runTime=3000
   }
-  function emptyRun() {
-    stepLin.value = "0%";
-    showRainLegend.value = false;
-  }
+  runDayInterval.value=setTimeout(()=> {
+    stepNum.value++
+    if(stepNum.value<=24){
+      // NewFiberMapUtils.disposeRainfall(hoursList.value.rainTrend[Number(stepNum.value)-1])
+      stepLin.value=`${stepNum.value*4.1666}%`
+      let levels = ranLeng[0].map((i,idx) => ({...i,value:Number(i.value.split('-')[0])}));
+      // console.log('stepNum.value',stepNum.value - 1);
+      // console.log('levels',levels.map(i => i.value));
+      // console.log('dataas',hoursList.value.resultList[Number(stepNum.value)-1].map(i => i.value));
+      // NewFiberMapUtils.getKringImg(0, true, {data:hoursList.value.resultList[Number(stepNum.value)-1],code:200}, newfiberMap, levels);
+      timeLoop()
+    }else{
+      emptyRun()
+    }
+    changeChartData()
+  }, runTime)
+}
 
-  function changeHourTime(num) {
-    hgEndActive.value = num;
-    showRainLegend.value = true;
-    showRainList.value =
-            num == 1 ? ranLeng[0] : num == 3 ? ranLeng[1] : num == 12 ? ranLeng[2] : ranLeng[3];
+function emptyRun(){
+  stepLin.value='0%'
+  stepNum.value=0
+  hgEngPlay.value=false
+  showRainLegend.value=false
+  // NewFiberMapUtils.disposeRainfall('')
+  // newfiberMap.setLayersVisible(["krigingImage"],false)
+  hoursList.value.activeIndex=stepNum.value
+  clearInterval(runDayInterval.value)
+  if(runDayInterval.value){
+    runDayInterval.value=null
+    refresh.value=Math.random();
   }
+}
+
+function changeChartData(){
+  hoursList.value.activeIndex=stepNum.value
+  refresh.value=Math.random()
+}
+
+function changeHourTime(num){
+  hgEndActive.value=num
+  emptyRun()
+  showRainLegend.value=true
+  showRainList.value=num==1?ranLeng[0]:num==3?ranLeng[1]:num==12?ranLeng[2]:ranLeng[3]
+  let parms={
+    type:num,
+    time:props.checkTime
+  }
+  hsApi.rainMapDataListBack(parms).then(res=>{
+    if(res.code==200){
+      // 24小时前端处理
+      if(hgEndActive.value==24){
+        hoursScale.value.forEach(e=>{
+          e.chuse=true
+        })
+      }else{
+        hoursScale.value.forEach(e=>{
+          e.chuse=false
+        })
+        res.data.max.forEach(s=>{
+          hoursScale.value.forEach(e=>{
+            if(e.time==proxy.moment(s).format("H")){
+              e.chuse=true
+            }
+          })
+        })
+      }
+      // newfiberMap.setCenter({
+      //   "roll": 0,
+      //   "pitch": -89.87733174015287,
+      //   "heading": 360,
+      //   "lng": 114.30934084478585,
+      //   "lat": 30.44275262912909,
+      //   "zoom": 112193.80415470112
+      // });
+      // NewFiberMapUtils.disposeRainfall(res.data.weather)
+      // let levels = ranLeng[{1:0,3:1,12:2,24:3}[num]].map((i,idx) => ({...i,value:Number(i.value.split('-')[0])}));
+      //  NewFiberMapUtils.getKringImg(num, true, {data:res.data.resultList,code:200}, newfiberMap, levels);
+    }
+  })
+}
+watch(
+  () => props.checkTime,
+  () => {
+    getTimeData()
+  },
+  { immediate: true }
+);
 </script>
 
 <style lang="scss" scoped>
@@ -187,79 +308,132 @@
   .timeList {
     padding: 12px 20px 10px;
     overflow: hidden;
-    .colorRadio {
+    .colorRadio{
       float: left;
-      .btn {
-        margin-right: 20px;
-        span {
+      .btn{
+        margin-right:20px;
+        span{
           width: 8px;
           height: 8px;
           border-radius: 50%;
           margin-right: 5px;
         }
-        div {
+        div{
           width: 42px;
           line-height: 22px;
-          border: 1px solid rgba(0, 191, 253, 0);
+          border: 1px solid  rgba(0, 191, 253, 0);
           border-radius: 4px;
           text-align: center;
           font-weight: 400;
           font-size: 14px;
         }
-        &.blue {
-          span {
+        &.blue{
+          span{
             background: rgba(0, 191, 253, 1);
           }
-          div {
-            border-color: rgba(0, 191, 253, 1);
-            color: rgba(0, 191, 253, 1);
-            background: linear-gradient(0deg, #08324f 0%, #0b3360 100%);
+          div{
+            border-color:rgba(0, 191, 253, 1);
+            color:rgba(0, 191, 253, 1);
+            background: linear-gradient(0deg, #08324F 0%, #0B3360 100%);
           }
         }
-        &.yellow {
-          span {
-            background: rgba(222, 230, 0, 1);
+        &.yellow{
+          span{
+            background:rgba(222, 230, 0, 1);
           }
-          div {
-            border-color: rgba(222, 230, 0, 1);
-            color: rgba(222, 230, 0, 1);
-            background: linear-gradient(0deg, #4f4b06 0%, #4f4e06 98%);
+          div{
+            border-color:rgba(222, 230, 0, 1);
+            color:rgba(222, 230, 0, 1);
+            background: linear-gradient(0deg, #4F4B06 0%, #4F4E06 98%);
           }
         }
-        &.orange {
-          span {
-            background: rgba(255, 184, 15, 1);
+        &.orange{
+          span{
+            background:rgba(255, 184, 15, 1);
           }
-          div {
-            border-color: rgba(255, 184, 15, 1);
-            color: rgba(255, 184, 15, 1);
-            background: linear-gradient(0deg, #4f3d06 0%, #4f3d06 98%);
+          div{
+            border-color:rgba(255, 184, 15, 1);
+            color:rgba(255, 184, 15, 1);
+            background: linear-gradient(0deg, #4F3D06 0%, #4F3D06 98%);
           }
         }
-        &.read {
-          span {
-            background: rgba(255, 26, 26, 1);
+        &.read{
+          span{
+            background:rgba(255, 26, 26, 1);
           }
-          div {
-            border-color: rgba(255, 26, 26, 1);
-            color: rgba(255, 26, 26, 1);
-            background: linear-gradient(0deg, #3e0808 0%, #420808 100%);
+          div{
+            border-color:rgba(255, 26, 26, 1);
+            color:rgba(255, 26, 26, 1);
+            background: linear-gradient(0deg, #3E0808 0%, #420808 100%);
           }
         }
       }
     }
-    .playBg {
-      width: calc(100% - 30px);
-      height: 18px;
-      background: rgba(77, 149, 217, 0.15);
-      border-radius: 9px;
-      padding: 3px;
-      overflow: hidden;
-    }
-    .playIn {
-      height: 100%;
-      background: linear-gradient(90deg, #1890ff, #1ee7e7);
+  }
+  .playIn {
+    height: 100%;
+    background: linear-gradient(90deg, #1890ff, #1ee7e7);
+    border-radius: 6px;
+    position: relative;
+    overflow: hidden;
+    &::before {
+      content: "";
+      position: absolute;
+      right: 0;
+      top: 0;
+      left: 0;
+      height: 12px;
       border-radius: 6px;
+      background: url(@/assets/images/fxhg/hgpx.png) repeat-x;
+      background-size: 16px 12px;
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 72px;
+      height: 12px;
+      background: url(@/assets/images/fxhg/hgpr.png) no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .rainList {
+    float: right;
+    line-height: 24px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #ffffff;
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      li {
+        width: 54px;
+        text-align: center;
+        background: #00344fff;
+        margin-left: 10px;
+        cursor: pointer;
+        &.active {
+          background: #002d44;
+          border-radius: 2px;
+          border: 1px solid #1cf5fc;
+        }
+      }
+    }
+  }
+  .playRadio {
+    display: flex;
+    width: calc(100% - 30px);
+    padding: 0;
+    margin: 0;
+    padding-top: 34px;
+    position: relative;
+    li {
+      width: 4.1666%;
+      padding-top: 10px;
+      display: flex;
+      justify-content: center;
       position: relative;
       overflow: hidden;
       &::before {
diff --git a/src/views/oneMap/components/FHPL.vue b/src/views/oneMap/components/FHPL.vue
index 6327831..2f6a470 100644
--- a/src/views/oneMap/components/FHPL.vue
+++ b/src/views/oneMap/components/FHPL.vue
@@ -19,7 +19,7 @@
     </div>
   </div>
 
-  <FXHG v-if="curType == true" />
+  <FXHG v-if="curType == true" :checkTime="checkTime"/>
 </template>
 
 <script setup name="FHPL">
@@ -36,6 +36,7 @@
 const control = ref('0');
 const Showtop = ref(true);
 const showPanel = ref(true); //面板展开收起
+const checkTime = ref('');
 // 面板内容展开收起控制
 const props = defineProps({
   showPanel: {
@@ -46,7 +47,7 @@
   isShowMonitorCalender.value = true;
 }
 const change = date => {
-  bus.emit('checkRili', date);
+  checkTime.value=date
 
   isShowMonitorCalender.value = false;
   Showtop.value = false;
diff --git a/src/views/oneMap/components/FXHG.vue b/src/views/oneMap/components/FXHG.vue
index 7f79c2d..ffc6147 100644
--- a/src/views/oneMap/components/FXHG.vue
+++ b/src/views/oneMap/components/FXHG.vue
@@ -7,7 +7,7 @@
       <xqRightBox />
     </div>
     <div :class="['BottomBox', 'animate__animated', showPanel ? 'animate__bounceInUp' : 'animate__bounceInUp']" v-if="showBottom">
-      <sqhgBottomBox />
+      <sqhgBottomBox :checkTime="props.checkTime"/>
     </div>
   </div>
   <div v-if="showPanel == false" class="bnt" @click="goBack">放回</div>
@@ -15,7 +15,6 @@
 </template>
 
 <script setup name="ZHPS">
-import * as hsApi from '@/api/hsApi.js';
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
 import FHPL from '@/views/oneMap/components/FHPL.vue';
 import xqhgLeftBox from '@/views/oneMap/FloodStuationReview/xqhgLeftBox.vue';
@@ -31,6 +30,9 @@
 const props = defineProps({
   showPanel: {
     type: Boolean,
+  }, 
+  checkTime: {
+    type: String,
   },
 });
 function goBack(params) {
@@ -38,15 +40,6 @@
   showBottom.value = false;
   curType.value = true;
 }
-
-// hsApi.rainMapDataBack({time:"2024-10-07"}).then(res=>{
-//     debugger
-//   })
-
-
-
-
-
 watch(
   () => props.showPanel,
   () => {
@@ -54,7 +47,6 @@
   },
   { immediate: true }
 );
-
 onMounted(() => {
   bus.emit('checkBottom', control.value);
 
diff --git a/src/views/voice/recordPage/index.vue b/src/views/voice/recordPage/index.vue
index 974b8bc..f91cdfb 100644
--- a/src/views/voice/recordPage/index.vue
+++ b/src/views/voice/recordPage/index.vue
@@ -81,7 +81,7 @@
   let wsuri;
   if (window.location.protocol.includes("https")) {
     //线上环境
-    wsuri = `wss://${window.location.host}/websocket/voicesWebocket`;
+    wsuri = `wss://${window.location.host}/websocket/voiceWebocket`;
   } else {
     //本地环境
     // wsuri = `ws://192.168.20.145:13002/voiceWebsocket`;