diff --git a/src/assets/images/fhpl/hgp1.png b/src/assets/images/fhpl/hgp1.png
new file mode 100644
index 0000000..84f38e3
--- /dev/null
+++ b/src/assets/images/fhpl/hgp1.png
Binary files differ

diff --git a/src/assets/images/fhpl/hgp1.png b/src/assets/images/fhpl/hgp1.png
new file mode 100644
index 0000000..84f38e3
--- /dev/null
+++ b/src/assets/images/fhpl/hgp1.png
Binary files differ
diff --git a/src/assets/images/fhpl/hgp2.png b/src/assets/images/fhpl/hgp2.png
new file mode 100644
index 0000000..fc90e92
--- /dev/null
+++ b/src/assets/images/fhpl/hgp2.png
Binary files differ

diff --git a/src/assets/images/fhpl/hgp1.png b/src/assets/images/fhpl/hgp1.png
new file mode 100644
index 0000000..84f38e3
--- /dev/null
+++ b/src/assets/images/fhpl/hgp1.png
Binary files differ
diff --git a/src/assets/images/fhpl/hgp2.png b/src/assets/images/fhpl/hgp2.png
new file mode 100644
index 0000000..fc90e92
--- /dev/null
+++ b/src/assets/images/fhpl/hgp2.png
Binary files differ
diff --git a/src/views/oneMap/Echarts/ChartLs.vue b/src/views/oneMap/Echarts/ChartLs.vue
new file mode 100644
index 0000000..e0f9ca0
--- /dev/null
+++ b/src/views/oneMap/Echarts/ChartLs.vue
@@ -0,0 +1,484 @@
+<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';
+import { reactive } from 'vue';
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const AllData = reactive({
+  Options: {},
+});
+const id = guid();
+const myChart = shallowRef('');
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    if (props.echartData.activeIndex > 0) {
+      // myChart.value.resize();
+      reasizeFun();
+    } else {
+      myChart.value && myChart.value.dispose();
+      intChart();
+    }
+  }
+);
+watch(
+  () => props.echartData,
+  value => {
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+// 重绘之前的样式填充
+function reasizeFun() {
+  // debugger;
+  if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == '中雨') {
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1) * 2
+    // ].color = "rgba(222, 230, 0, 1)";
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1 + 1) * 2
+    // ].color = "rgba(222, 230, 0, 1)";
+    AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color = 'rgba(222, 230, 0, 1)';
+  } else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == '小雨') {
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1) * 2
+    // ].color = "rgba(0, 191, 253, 1)";
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1 + 1) * 2
+    // ].color = "rgba(0, 191, 253, 1)";
+    AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color = 'rgba(0, 191, 253, 1)';
+  } else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == '大雨') {
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1) * 2
+    // ].color = "rgba(255, 184, 15, 1)";
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1 + 1) * 2
+    // ].color = "rgba(255, 184, 15, 1)";
+    AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color = 'rgba(255, 184, 15, 1)';
+  } else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == '暴雨') {
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1) * 2
+    // ].color = "rgba(255, 26, 26, 1)";
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1 + 1) * 2
+    // ].color = "rgba(255, 26, 26, 1)";
+    AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color = 'rgba(255, 26, 26, 1)';
+  } else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == '大暴雨') {
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1) * 2
+    // ].color = "rgba(255, 26, 26, 1)";
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1 + 1) * 2
+    // ].color = "rgba(255, 26, 26, 1)";
+    AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color = 'rgba(255, 26, 26, 1)';
+  } else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == '特大暴雨') {
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1) * 2
+    // ].color = "rgba(255, 26, 26, 1)";
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1 + 1) * 2
+    // ].color = "rgba(255, 26, 26, 1)";
+    AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color = 'rgba(255, 26, 26, 1)';
+  } else {
+    // AllData.Options.visualMap.pieces.push({
+    //   gt: props.echartData.activeIndex,
+    //   lte: props.echartData.activeIndex,
+    //   color: "rgba(121, 159, 200, 1)",
+    // });
+  }
+  console.log(AllData.Options.visualMap);
+  myChart.value.setOption(AllData.Options, true);
+  // myChart.value.resize();
+  // intChart();
+  // myChart.value = proxy.echarts.init(document.getElementById(id));
+  // myChart.value.clear();
+
+  // myChart.value.setOption(AllData.Options);
+}
+
+//初始化
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 处理数据
+  let XData = [];
+  props.echartData.rainTrend.forEach((element, index) => {
+    if (index == 0) {
+      XData.push('');
+      XData.push(element);
+      XData.push('');
+    } else {
+      XData.push(element);
+      XData.push('');
+    }
+  });
+  console.log(`1231`, XData);
+  let Servers = [];
+  props.echartData.history.forEach((element, index) => {
+    if (index == 0) {
+      Servers.push(Number(element));
+      Servers.push(Number(element));
+    } else {
+      Servers.push((Number(element) + Number(props.echartData.history[index - 1])) / 2);
+      Servers.push(Number(element));
+    }
+  });
+  console.log(`1232`, Servers);
+  // 绘制图表
+  // 设置图形配置项
+  AllData.Options = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      formatter: function (params) {
+        console.log(params);
+        let str = '';
+        if (params[0].name == '') {
+          str = '';
+        } else {
+          str =
+            "<div style='padding:0 5px;width:100%;height:32px;line-height:16px;border-radius:3px;'>" +
+            params[0].name +
+            '<br />' +
+            params[0].data +
+            '(mm)</div>';
+        }
+        return str;
+      },
+    },
+    grid: {
+      top: nowSize(20, 1920),
+      bottom: nowSize(6, 1920), //也可设置left和right设置距离来控制图表的大小
+      left: nowSize(50, 1920),
+      right: nowSize(20, 1920),
+    },
+    xAxis: {
+      // data: props.echartData.rainTrend,
+      data: XData,
+      axisLine: {
+        show: false, //隐藏X轴轴线
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLabel: {
+        show: false,
+      },
+      boundaryGap: false,
+    },
+    yAxis: {
+      type: 'value',
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: true,
+        color: '#FFFFFF',
+        fontSize: nowSize(12, 1920),
+      },
+      splitLine: {
+        //网格线
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+        },
+        show: true, //隐藏或显示
+      },
+    },
+    visualMap: {
+      type: 'piecewise',
+      show: false,
+      dimension: 0,
+      seriesIndex: 0,
+      pieces: [],
+      zlevel: 4,
+    },
+
+    series: [
+      {
+        type: 'line',
+        // data: props.echartData.history,
+        data: Servers,
+        barWidth: nowSize(10, 1920),
+        areaStyle: {},
+        // itemStyle: {},
+        zlevel: 1,
+        symbol: 'circle',
+        symbolSize: nowSize(6, 1920),
+        // lineStyle: {
+        //   shadowColor: "rgba(0, 0, 0, .5)",
+        //   shadowBlur: nowSize(5, 1920),
+        //   shadowOffsetY: nowSize(5, 1920),
+        //   shadowOffsetX: nowSize(5, 1920),
+        //   // color: (parms) => {
+        //   //   debugger;
+        //   //   let yanse = "";
+        //   //   let colorType = props.echartData.rainTrend[value.dataIndex];
+        //   //   if (value.dataIndex <= props.echartData.activeIndex && colorType == "小雨") {
+        //   //     yanse = "rgba(0, 191, 253, 1)";
+        //   //   } else if (
+        //   //     value.dataIndex <= props.echartData.activeIndex &&
+        //   //     colorType == "中雨"
+        //   //   ) {
+        //   //     yanse = "rgba(222, 230, 0, 1)";
+        //   //   } else if (
+        //   //     value.dataIndex <= props.echartData.activeIndex &&
+        //   //     colorType == "大雨"
+        //   //   ) {
+        //   //     yanse = "rgba(255, 184, 15, 1)";
+        //   //   } else if (
+        //   //     (value.dataIndex <= props.echartData.activeIndex && colorType == "暴雨") ||
+        //   //     colorType == "大暴雨" ||
+        //   //     colorType == "特大暴雨"
+        //   //   ) {
+        //   //     yanse = "rgba(255, 26, 26, 1)";
+        //   //   } else {
+        //   //     yanse = "rgba(121, 159, 200, 1)";
+        //   //   }
+        //   //   console.log("lineStyle", yanse);
+        //   //   return yanse;
+        //   // },
+        //   color: "rgba(255, 26, 26, 1)",
+        // },
+        itemStyle: {
+          borderColor: 'rgba(57, 247, 255, 0.3)',
+          borderWidth: nowSize(6, 1920),
+          barBorderRadius: nowSize(6, 1920),
+          // color: "rgba(255, 255, 255, 1)",
+          color: value => {
+            // let yanse=''
+            // let colorType=props.echartData.rainTrend[value.dataIndex]
+            // if(value.dataIndex<=props.echartData.activeIndex&&colorType=='小雨'){
+            //   yanse="rgba(0, 191, 253, 1)"
+            // }else if(value.dataIndex<=props.echartData.activeIndex&&colorType=='中雨'){
+            //   yanse= "rgba(222, 230, 0, 1)"
+            // }else if(value.dataIndex<=props.echartData.activeIndex&&colorType=='大雨'){
+            //   yanse= "rgba(255, 184, 15, 1)"
+            // }else if(value.dataIndex<=props.echartData.activeIndex&&colorType=='暴雨'||colorType=='大暴雨'||colorType=='特大暴雨'){
+            //   yanse= "rgba(255, 26, 26, 1)"
+            // }else{
+            //   yanse= "rgba(121, 159, 200, 1)"
+            // }
+            // console.log('lineStyle',yanse)
+            // return yanse
+            let colorType = props.echartData.rainTrend[value.dataIndex];
+            let color1 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(0, 191, 253, 1)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(0, 191, 253, 0.2)',
+              },
+            ]);
+            let color2 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(222, 230, 0, 1)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(222, 230, 0, 0.2)',
+              },
+            ]);
+            let color3 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(255, 184, 15, 1)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(255, 184, 15, 0.2)',
+              },
+            ]);
+            let color4 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(255, 26, 26, 1)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(255, 26, 26, 0.2)',
+              },
+            ]);
+            let color5 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(121, 159, 200, 1)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(121, 159, 200, 0.2)',
+              },
+            ]);
+            let yanse = '';
+            if (value.dataIndex < props.echartData.activeIndex && colorType == '小雨') {
+              yanse = color1;
+            } else if (value.dataIndex < props.echartData.activeIndex && colorType == '中雨') {
+              yanse = color2;
+            } else if (value.dataIndex < props.echartData.activeIndex && colorType == '大雨') {
+              yanse = color3;
+            } else if (
+              value.dataIndex < props.echartData.activeIndex &&
+              (colorType == '暴雨' || colorType == '大暴雨' || colorType == '特大暴雨')
+            ) {
+              yanse = color4;
+            } else {
+              yanse = color5;
+            }
+            // console.log(yanse)
+            return yanse;
+          },
+        },
+        // areaStyle: {
+        //   // color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //   //   {
+        //   //     offset: 0,
+        //   //     color: "rgba(0, 191, 253, 1)",
+        //   //   },
+        //   //   {
+        //   //     offset: 1,
+        //   //     color: "rgba(0, 191, 253, 0.2)",
+        //   //   },
+        //   // ]),
+        //   color: (value) => {
+        //     debugger;
+        //     let colorType = props.echartData.rainTrend[value.dataIndex];
+        //     let color1 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //       {
+        //         offset: 0,
+        //         color: "rgba(0, 191, 253, 1)",
+        //       },
+        //       {
+        //         offset: 1,
+        //         color: "rgba(0, 191, 253, 0.2)",
+        //       },
+        //     ]);
+        //     let color2 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //       {
+        //         offset: 0,
+        //         color: "rgba(222, 230, 0, 1)",
+        //       },
+        //       {
+        //         offset: 1,
+        //         color: "rgba(222, 230, 0, 0.2)",
+        //       },
+        //     ]);
+        //     let color3 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //       {
+        //         offset: 0,
+        //         color: "rgba(255, 184, 15, 1)",
+        //       },
+        //       {
+        //         offset: 1,
+        //         color: "rgba(255, 184, 15, 0.2)",
+        //       },
+        //     ]);
+        //     let color4 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //       {
+        //         offset: 0,
+        //         color: "rgba(255, 26, 26, 1)",
+        //       },
+        //       {
+        //         offset: 1,
+        //         color: "rgba(255, 26, 26, 0.2)",
+        //       },
+        //     ]);
+        //     let color5 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //       {
+        //         offset: 0,
+        //         color: "rgba(121, 159, 200, 1)",
+        //       },
+        //       {
+        //         offset: 1,
+        //         color: "rgba(121, 159, 200, 0.2)",
+        //       },
+        //     ]);
+        //     let yanse = "";
+        //     if (value.dataIndex <= props.echartData.activeIndex && colorType == "小雨") {
+        //       yanse = color1;
+        //     } else if (
+        //       value.dataIndex <= props.echartData.activeIndex &&
+        //       colorType == "中雨"
+        //     ) {
+        //       yanse = color2;
+        //     } else if (
+        //       value.dataIndex <= props.echartData.activeIndex &&
+        //       colorType == "大雨"
+        //     ) {
+        //       yanse = color3;
+        //     } else if (
+        //       (value.dataIndex <= props.echartData.activeIndex && colorType == "暴雨") ||
+        //       colorType == "大暴雨" ||
+        //       colorType == "特大暴雨"
+        //     ) {
+        //       yanse = color4;
+        //     } else {
+        //       yanse = color5;
+        //     }
+        //     console.log(yanse);
+        //     return yanse;
+        //   },
+        // },
+      },
+    ],
+  };
+  for (let index = 0; index < XData.length; index++) {
+    AllData.Options.visualMap.pieces.push({
+      gte: index * 2,
+      lte: (index + 1) * 2,
+      color: 'rgba(121, 159, 200, 1)',
+    });
+  }
+  myChart.value.setOption(AllData.Options, true);
+}
+onMounted(() => {
+  // intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>

diff --git a/src/assets/images/fhpl/hgp1.png b/src/assets/images/fhpl/hgp1.png
new file mode 100644
index 0000000..84f38e3
--- /dev/null
+++ b/src/assets/images/fhpl/hgp1.png
Binary files differ
diff --git a/src/assets/images/fhpl/hgp2.png b/src/assets/images/fhpl/hgp2.png
new file mode 100644
index 0000000..fc90e92
--- /dev/null
+++ b/src/assets/images/fhpl/hgp2.png
Binary files differ
diff --git a/src/views/oneMap/Echarts/ChartLs.vue b/src/views/oneMap/Echarts/ChartLs.vue
new file mode 100644
index 0000000..e0f9ca0
--- /dev/null
+++ b/src/views/oneMap/Echarts/ChartLs.vue
@@ -0,0 +1,484 @@
+<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';
+import { reactive } from 'vue';
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const AllData = reactive({
+  Options: {},
+});
+const id = guid();
+const myChart = shallowRef('');
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    if (props.echartData.activeIndex > 0) {
+      // myChart.value.resize();
+      reasizeFun();
+    } else {
+      myChart.value && myChart.value.dispose();
+      intChart();
+    }
+  }
+);
+watch(
+  () => props.echartData,
+  value => {
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+// 重绘之前的样式填充
+function reasizeFun() {
+  // debugger;
+  if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == '中雨') {
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1) * 2
+    // ].color = "rgba(222, 230, 0, 1)";
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1 + 1) * 2
+    // ].color = "rgba(222, 230, 0, 1)";
+    AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color = 'rgba(222, 230, 0, 1)';
+  } else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == '小雨') {
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1) * 2
+    // ].color = "rgba(0, 191, 253, 1)";
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1 + 1) * 2
+    // ].color = "rgba(0, 191, 253, 1)";
+    AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color = 'rgba(0, 191, 253, 1)';
+  } else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == '大雨') {
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1) * 2
+    // ].color = "rgba(255, 184, 15, 1)";
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1 + 1) * 2
+    // ].color = "rgba(255, 184, 15, 1)";
+    AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color = 'rgba(255, 184, 15, 1)';
+  } else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == '暴雨') {
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1) * 2
+    // ].color = "rgba(255, 26, 26, 1)";
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1 + 1) * 2
+    // ].color = "rgba(255, 26, 26, 1)";
+    AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color = 'rgba(255, 26, 26, 1)';
+  } else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == '大暴雨') {
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1) * 2
+    // ].color = "rgba(255, 26, 26, 1)";
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1 + 1) * 2
+    // ].color = "rgba(255, 26, 26, 1)";
+    AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color = 'rgba(255, 26, 26, 1)';
+  } else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == '特大暴雨') {
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1) * 2
+    // ].color = "rgba(255, 26, 26, 1)";
+    // AllData.Options.visualMap.pieces[
+    //   (Number(props.echartData.activeIndex) - 1 + 1) * 2
+    // ].color = "rgba(255, 26, 26, 1)";
+    AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color = 'rgba(255, 26, 26, 1)';
+  } else {
+    // AllData.Options.visualMap.pieces.push({
+    //   gt: props.echartData.activeIndex,
+    //   lte: props.echartData.activeIndex,
+    //   color: "rgba(121, 159, 200, 1)",
+    // });
+  }
+  console.log(AllData.Options.visualMap);
+  myChart.value.setOption(AllData.Options, true);
+  // myChart.value.resize();
+  // intChart();
+  // myChart.value = proxy.echarts.init(document.getElementById(id));
+  // myChart.value.clear();
+
+  // myChart.value.setOption(AllData.Options);
+}
+
+//初始化
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 处理数据
+  let XData = [];
+  props.echartData.rainTrend.forEach((element, index) => {
+    if (index == 0) {
+      XData.push('');
+      XData.push(element);
+      XData.push('');
+    } else {
+      XData.push(element);
+      XData.push('');
+    }
+  });
+  console.log(`1231`, XData);
+  let Servers = [];
+  props.echartData.history.forEach((element, index) => {
+    if (index == 0) {
+      Servers.push(Number(element));
+      Servers.push(Number(element));
+    } else {
+      Servers.push((Number(element) + Number(props.echartData.history[index - 1])) / 2);
+      Servers.push(Number(element));
+    }
+  });
+  console.log(`1232`, Servers);
+  // 绘制图表
+  // 设置图形配置项
+  AllData.Options = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      formatter: function (params) {
+        console.log(params);
+        let str = '';
+        if (params[0].name == '') {
+          str = '';
+        } else {
+          str =
+            "<div style='padding:0 5px;width:100%;height:32px;line-height:16px;border-radius:3px;'>" +
+            params[0].name +
+            '<br />' +
+            params[0].data +
+            '(mm)</div>';
+        }
+        return str;
+      },
+    },
+    grid: {
+      top: nowSize(20, 1920),
+      bottom: nowSize(6, 1920), //也可设置left和right设置距离来控制图表的大小
+      left: nowSize(50, 1920),
+      right: nowSize(20, 1920),
+    },
+    xAxis: {
+      // data: props.echartData.rainTrend,
+      data: XData,
+      axisLine: {
+        show: false, //隐藏X轴轴线
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLabel: {
+        show: false,
+      },
+      boundaryGap: false,
+    },
+    yAxis: {
+      type: 'value',
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: true,
+        color: '#FFFFFF',
+        fontSize: nowSize(12, 1920),
+      },
+      splitLine: {
+        //网格线
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+        },
+        show: true, //隐藏或显示
+      },
+    },
+    visualMap: {
+      type: 'piecewise',
+      show: false,
+      dimension: 0,
+      seriesIndex: 0,
+      pieces: [],
+      zlevel: 4,
+    },
+
+    series: [
+      {
+        type: 'line',
+        // data: props.echartData.history,
+        data: Servers,
+        barWidth: nowSize(10, 1920),
+        areaStyle: {},
+        // itemStyle: {},
+        zlevel: 1,
+        symbol: 'circle',
+        symbolSize: nowSize(6, 1920),
+        // lineStyle: {
+        //   shadowColor: "rgba(0, 0, 0, .5)",
+        //   shadowBlur: nowSize(5, 1920),
+        //   shadowOffsetY: nowSize(5, 1920),
+        //   shadowOffsetX: nowSize(5, 1920),
+        //   // color: (parms) => {
+        //   //   debugger;
+        //   //   let yanse = "";
+        //   //   let colorType = props.echartData.rainTrend[value.dataIndex];
+        //   //   if (value.dataIndex <= props.echartData.activeIndex && colorType == "小雨") {
+        //   //     yanse = "rgba(0, 191, 253, 1)";
+        //   //   } else if (
+        //   //     value.dataIndex <= props.echartData.activeIndex &&
+        //   //     colorType == "中雨"
+        //   //   ) {
+        //   //     yanse = "rgba(222, 230, 0, 1)";
+        //   //   } else if (
+        //   //     value.dataIndex <= props.echartData.activeIndex &&
+        //   //     colorType == "大雨"
+        //   //   ) {
+        //   //     yanse = "rgba(255, 184, 15, 1)";
+        //   //   } else if (
+        //   //     (value.dataIndex <= props.echartData.activeIndex && colorType == "暴雨") ||
+        //   //     colorType == "大暴雨" ||
+        //   //     colorType == "特大暴雨"
+        //   //   ) {
+        //   //     yanse = "rgba(255, 26, 26, 1)";
+        //   //   } else {
+        //   //     yanse = "rgba(121, 159, 200, 1)";
+        //   //   }
+        //   //   console.log("lineStyle", yanse);
+        //   //   return yanse;
+        //   // },
+        //   color: "rgba(255, 26, 26, 1)",
+        // },
+        itemStyle: {
+          borderColor: 'rgba(57, 247, 255, 0.3)',
+          borderWidth: nowSize(6, 1920),
+          barBorderRadius: nowSize(6, 1920),
+          // color: "rgba(255, 255, 255, 1)",
+          color: value => {
+            // let yanse=''
+            // let colorType=props.echartData.rainTrend[value.dataIndex]
+            // if(value.dataIndex<=props.echartData.activeIndex&&colorType=='小雨'){
+            //   yanse="rgba(0, 191, 253, 1)"
+            // }else if(value.dataIndex<=props.echartData.activeIndex&&colorType=='中雨'){
+            //   yanse= "rgba(222, 230, 0, 1)"
+            // }else if(value.dataIndex<=props.echartData.activeIndex&&colorType=='大雨'){
+            //   yanse= "rgba(255, 184, 15, 1)"
+            // }else if(value.dataIndex<=props.echartData.activeIndex&&colorType=='暴雨'||colorType=='大暴雨'||colorType=='特大暴雨'){
+            //   yanse= "rgba(255, 26, 26, 1)"
+            // }else{
+            //   yanse= "rgba(121, 159, 200, 1)"
+            // }
+            // console.log('lineStyle',yanse)
+            // return yanse
+            let colorType = props.echartData.rainTrend[value.dataIndex];
+            let color1 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(0, 191, 253, 1)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(0, 191, 253, 0.2)',
+              },
+            ]);
+            let color2 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(222, 230, 0, 1)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(222, 230, 0, 0.2)',
+              },
+            ]);
+            let color3 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(255, 184, 15, 1)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(255, 184, 15, 0.2)',
+              },
+            ]);
+            let color4 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(255, 26, 26, 1)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(255, 26, 26, 0.2)',
+              },
+            ]);
+            let color5 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(121, 159, 200, 1)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(121, 159, 200, 0.2)',
+              },
+            ]);
+            let yanse = '';
+            if (value.dataIndex < props.echartData.activeIndex && colorType == '小雨') {
+              yanse = color1;
+            } else if (value.dataIndex < props.echartData.activeIndex && colorType == '中雨') {
+              yanse = color2;
+            } else if (value.dataIndex < props.echartData.activeIndex && colorType == '大雨') {
+              yanse = color3;
+            } else if (
+              value.dataIndex < props.echartData.activeIndex &&
+              (colorType == '暴雨' || colorType == '大暴雨' || colorType == '特大暴雨')
+            ) {
+              yanse = color4;
+            } else {
+              yanse = color5;
+            }
+            // console.log(yanse)
+            return yanse;
+          },
+        },
+        // areaStyle: {
+        //   // color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //   //   {
+        //   //     offset: 0,
+        //   //     color: "rgba(0, 191, 253, 1)",
+        //   //   },
+        //   //   {
+        //   //     offset: 1,
+        //   //     color: "rgba(0, 191, 253, 0.2)",
+        //   //   },
+        //   // ]),
+        //   color: (value) => {
+        //     debugger;
+        //     let colorType = props.echartData.rainTrend[value.dataIndex];
+        //     let color1 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //       {
+        //         offset: 0,
+        //         color: "rgba(0, 191, 253, 1)",
+        //       },
+        //       {
+        //         offset: 1,
+        //         color: "rgba(0, 191, 253, 0.2)",
+        //       },
+        //     ]);
+        //     let color2 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //       {
+        //         offset: 0,
+        //         color: "rgba(222, 230, 0, 1)",
+        //       },
+        //       {
+        //         offset: 1,
+        //         color: "rgba(222, 230, 0, 0.2)",
+        //       },
+        //     ]);
+        //     let color3 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //       {
+        //         offset: 0,
+        //         color: "rgba(255, 184, 15, 1)",
+        //       },
+        //       {
+        //         offset: 1,
+        //         color: "rgba(255, 184, 15, 0.2)",
+        //       },
+        //     ]);
+        //     let color4 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //       {
+        //         offset: 0,
+        //         color: "rgba(255, 26, 26, 1)",
+        //       },
+        //       {
+        //         offset: 1,
+        //         color: "rgba(255, 26, 26, 0.2)",
+        //       },
+        //     ]);
+        //     let color5 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //       {
+        //         offset: 0,
+        //         color: "rgba(121, 159, 200, 1)",
+        //       },
+        //       {
+        //         offset: 1,
+        //         color: "rgba(121, 159, 200, 0.2)",
+        //       },
+        //     ]);
+        //     let yanse = "";
+        //     if (value.dataIndex <= props.echartData.activeIndex && colorType == "小雨") {
+        //       yanse = color1;
+        //     } else if (
+        //       value.dataIndex <= props.echartData.activeIndex &&
+        //       colorType == "中雨"
+        //     ) {
+        //       yanse = color2;
+        //     } else if (
+        //       value.dataIndex <= props.echartData.activeIndex &&
+        //       colorType == "大雨"
+        //     ) {
+        //       yanse = color3;
+        //     } else if (
+        //       (value.dataIndex <= props.echartData.activeIndex && colorType == "暴雨") ||
+        //       colorType == "大暴雨" ||
+        //       colorType == "特大暴雨"
+        //     ) {
+        //       yanse = color4;
+        //     } else {
+        //       yanse = color5;
+        //     }
+        //     console.log(yanse);
+        //     return yanse;
+        //   },
+        // },
+      },
+    ],
+  };
+  for (let index = 0; index < XData.length; index++) {
+    AllData.Options.visualMap.pieces.push({
+      gte: index * 2,
+      lte: (index + 1) * 2,
+      color: 'rgba(121, 159, 200, 1)',
+    });
+  }
+  myChart.value.setOption(AllData.Options, true);
+}
+onMounted(() => {
+  // intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index 0a76869..bbe8911 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -1,3 +1,453 @@
 <template>
-  <div>555</div>
+  <!-- 汛情回顾状态框 -->
+  <div class="rainMapLeng flex flex-align-center" v-if="showRainLegend">
+    <div class="flex flex-align-center" v-for="i in showRainList" :key="i">
+      <span :style="{ background: i.color }"></span>{{ i.value }}
+    </div>
+  </div>
+  <div class="timeList">
+    <div class="colorRadio flex">
+      <div class="btn blue flex flex-align-center">
+        <span></span>
+        <div>小雨</div>
+      </div>
+      <div class="btn yellow flex flex-align-center">
+        <span></span>
+        <div>中雨</div>
+      </div>
+      <div class="btn orange flex flex-align-center">
+        <span></span>
+        <div>大雨</div>
+      </div>
+      <div class="btn read flex flex-align-center">
+        <span></span>
+        <div>暴雨</div>
+      </div>
+    </div>
+    <div class="rainList flex">
+      请选择最大雨强
+      <ul class="flex">
+        <li @click="changeHourTime(i.key)" :class="hgEndActive == i.key ? 'active' : ''" v-for="i in hgEngList" :key="i.key">
+          {{ i.name }}
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="timeScheduleBox flex flex-align-center flex-justcontent-spacebetween">
+    <div class="playBtn" @click="(hgEngPlay = !hgEngPlay), runDayTime()">
+      <img v-if="hgEngPlay" src="@/assets/images/fhpl/hgp2.png" /><img v-else src="@/assets/images/fhpl/hgp1.png" />
+    </div>
+    <div class="playBg"><div class="playIn" :style="{ width: stepLin }"></div></div>
+  </div>
+  <div class="timeScheduleBox flex flex-justcontent-end">
+    <ul class="playRadio">
+      <li
+        v-for="(k, i) in hoursScale"
+        :key="i"
+        :class="{
+          blue: (k.weather == '小雨' && i < stepNum) || (k.weather == '小雨' && k.chuse),
+          yellow: (k.weather == '中雨' && i < stepNum) || (k.weather == '中雨' && k.chuse),
+          orange: (k.weather == '大雨' && i < stepNum) || (k.weather == '大雨' && k.chuse),
+          read:
+            (i < stepNum && (k.weather == '暴雨' || k.weather == '大暴雨' || k.weather == '特大暴雨')) ||
+            ((k.weather == '暴雨' || k.weather == '大暴雨' || k.weather == '特大暴雨') && k.chuse),
+        }"
+      >
+        <div>{{ k.time }}</div>
+      </li>
+    </ul>
+  </div>
+  <div class="timeChart">
+    <ChartLs />
+  </div>
 </template>
+
+<script setup>
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
+import ChartLs from '@/views/oneMap/Echarts/ChartLs.vue';
+
+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++;
+
+    let levels = ranLeng[0].map((i, idx) => ({
+      ...i,
+      value: Number(i.value.split('-')[0]),
+    }));
+
+    console.log(
+      'levels',
+      levels.map(i => i.value)
+    );
+  });
+}
+function emptyRun() {
+  stepLin.value = '0%';
+  showRainLegend.value = false;
+}
+
+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];
+}
+</script>
+
+<style lang="scss" scoped>
+.rainMapLeng {
+  position: absolute;
+  right: 0px;
+  bottom: 270px;
+  background: linear-gradient(0deg, rgba(0, 93, 114, 0.8) 0%, rgba(0, 93, 114, 0.8) 100%);
+  height: 40px;
+  div {
+    margin: 0 10px;
+    font-size: 14px;
+    color: #fff;
+    cursor: pointer;
+    &:nth-child(1) {
+      span {
+        border: 1px solid #fff;
+      }
+    }
+    span {
+      display: block;
+      width: 16px;
+      height: 16px;
+      margin-right: 4px;
+      border-radius: 4px;
+    }
+  }
+}
+.timeList {
+  padding: 12px 20px 10px;
+  overflow: hidden;
+  .colorRadio {
+    float: left;
+    .btn {
+      margin-right: 20px;
+      span {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        margin-right: 5px;
+      }
+      div {
+        width: 42px;
+        line-height: 22px;
+        border: 1px solid rgba(0, 191, 253, 0);
+        border-radius: 4px;
+        text-align: center;
+        font-weight: 400;
+        font-size: 14px;
+      }
+      &.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%);
+        }
+      }
+      &.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%);
+        }
+      }
+      &.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%);
+        }
+      }
+      &.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%);
+        }
+      }
+    }
+  }
+  .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);
+    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/oneMap/hgpx.png) repeat-x;
+      background-size: 16px 12px;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 72px;
+      height: 12px;
+      // background: url(@/assets/images/oneMap/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;
+        }
+      }
+    }
+  }
+}
+.timeScheduleBox {
+  padding: 0 20px;
+  overflow: hidden;
+  .playBtn {
+    width: 22px;
+    height: 22px;
+    cursor: pointer;
+    img {
+      width: 100%;
+      height: 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);
+    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/oneMap/hgpx.png) repeat-x;
+      background-size: 16px 12px;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 72px;
+      height: 12px;
+      background: url(@/assets/images/oneMap/hgpr.png) no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .playRadio {
+    display: flex;
+    width: calc(100% - 30px);
+    padding-top: 34px;
+    position: relative;
+    li {
+      width: 4.1666%;
+      padding-top: 10px;
+      display: flex;
+      justify-content: center;
+      position: relative;
+      &::before {
+        content: '';
+        position: absolute;
+        width: 2px;
+        height: 7px;
+        background: #799fc8;
+        top: -7px;
+        left: 50%;
+        margin-left: -1px;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        background: #799fc8;
+        top: -20px;
+        left: 50%;
+        margin-left: -4px;
+        border-radius: 50%;
+        display: none;
+      }
+      div {
+        width: 22px;
+        line-height: 22px;
+        background: #799fc8;
+        font-family: DINPro;
+        font-weight: 400;
+        font-size: 16px;
+        color: #ffffff;
+        text-align: center;
+      }
+      &.blue {
+        &::before {
+          background: #00bffd;
+        }
+        &::after {
+          background: #00bffd;
+          display: block;
+        }
+        div {
+          background: #00bffd;
+        }
+      }
+      &.yellow {
+        &::before {
+          background: #dee600;
+        }
+        &::after {
+          background: #dee600;
+          display: block;
+        }
+        div {
+          background: #dee600;
+        }
+      }
+      &.orange {
+        &::before {
+          background: #ffb80f;
+        }
+        &::after {
+          background: #ffb80f;
+          display: block;
+        }
+        div {
+          background: #ffb80f;
+        }
+      }
+      &.read {
+        &::before {
+          background: #ff1a1a;
+        }
+        &::after {
+          background: #ff1a1a;
+          display: block;
+        }
+        div {
+          background: #ff1a1a;
+        }
+      }
+    }
+    &::before {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 34px;
+      left: 0;
+      height: 2px;
+      background: #799fc8;
+    }
+  }
+}
+.timeChart {
+  height: calc(100% - 140px);
+  overflow: hidden;
+  // background: red;
+}
+</style>