page 2 and 3

tengsx

2023-04-06 80eb2e8d0eb78caf0b5d369aba18f99ed1222b97

page 2 and 3

 public/images/back-bg.png

 public/images/back.png

 public/images/device_01.png

 public/images/device_02.png

 public/images/mode-tab-ac.png

 public/images/mode-tab.png

 public/images/rain-title.png

 public/images/warn_01.png

 public/images/warn_02.png

 public/images/warnbg_01.png

 public/images/warnbg_02.png

 src/router/page/index.js

@@ -12,6 +12,8 @@

const layout = () => import('../../views/layout/index.vue')
const home = () => import('../../views/home/index.vue')
const home_02 = () => import('../../views/home/index_02.vue')
const home_03 = () => import('../../views/home/index_03.vue')

const routes = [
    {
@@ -32,6 +34,20 @@
                    title: '首页'
                },
                component: home
            },
            {
              path: 'home2',
              meta: {
                  title: '首页'
              },
              component: home_02
            },
            {
            path: 'home3',
            meta: {
                title: '首页'
            },
            component: home_03
            }
        ]
    },

 src/styles/index.scss

@@ -92,27 +92,7 @@
    .one {
      height: 258px;
      position: relative;
      .content-data  {
        padding-left: 18px;
        &>.common-text {
          margin-right: 8px
        }
      };
      .data-item {
        height: 26px;
        line-height: 26px;
        background: #879EC7;
        border-radius: 6px;
        padding: 0 15px;
        margin-right: 12px;
      }
      .more-text {
        position: absolute;
        color: #3BCAFF;
        right: 10px;
        bottom: 36px;
        cursor: pointer;
      }
      
    }

    .two {
@@ -142,6 +122,28 @@
    .four {
      flex: 1;
    }
  }
  .content-data  {
    padding-left: 18px;
    &>.common-text {
      margin-right: 8px
    }
    .data-item {
      height: 26px;
      line-height: 26px;
      background: #879EC7;
      border-radius: 6px;
      padding: 0 15px;
      margin-right: 12px;
    }
  };
  
  .more-text {
    position: absolute;
    color: #3BCAFF;
    right: 10px;
    bottom: 36px;
    cursor: pointer;
  }
  .scroll-table {
    font-family: Alibaba PuHuiTi;
@@ -226,7 +228,7 @@
      cursor: pointer;
    }
    .btn-left {
      background-image: url(./../../public/images/ctrl-left.png);
      background-image: url(/images/ctrl-left.png);
    }
    .btn-right {
      margin-left: 3px ;
@@ -261,4 +263,353 @@
      color: #B5C5D4;
    }
  }
  .video-box {
    padding: 5px 12px 0;
    video {
      width: 100%;
      height: 185px;
      background-color: #333;
    }
  }
  .all-text-box {
    position: relative;
    .more-text {
      right: 24px
    }
  }
  .all-text {
    color: #D4E8F8;
    padding: 12px 18px 0 18px;
    line-height: 26px;
    text-indent: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
  }
  .detail-box {
    padding: 12px;
    img {
      height: 180px;
      width: 100%;
    }
    .all-text{
      -webkit-line-clamp: 3;
      text-indent: 0;
    }
  }
  .device-box {
    padding: 15px 8px 0;
    align-items: flex-start;
    .device-item {
      width: 110px;
      height: 113px;
      text-align: center;
      background-image: url(/images/device_01.png);
      background-size: 100% 100%;
      padding-top: 20px;
      &:nth-of-type(2) {
        background-image: url(/images/device_02.png);
        .item-title {
          color: #AED6FF;
        }
        .item-num {
          background: linear-gradient(to bottom, #FFF9C5 10%, #FFD24D 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
    .item-title {
      color: #44C1EF;
      line-height: 1;
      text-shadow: 1px 2px 0px rgba(17,20,22,0.22);
      font-size: 16px;
      font-weight: bold;
    }
    .item-num {
      margin-top: 5px;
      font-size: 28px;
      font-family: Roboto-Bold;
      font-weight: bold;
      font-style: italic;
      color: #EDFBFF;
      background: linear-gradient(to bottom, #8CEAFF 10%, rgba(255,255,255,1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .warning-box {
    padding: 0 5px;
    img {
      width: 101px;
      height: 90px;
    }
    .warning-item {
      flex: 1;
    }
    .item-title {
      width: 100px;
      line-height: 32px;
      text-indent:32px;
      position: relative;
      left: -28px;
      color: #fff;
      font-size: 18px;
      background-image: url(/images/warnbg_01.png);
      background-repeat: no-repeat;
      background-position: left bottom;
      background-size: 100px 18px;
    }
    .item-num {
      height: 31.5px;
      width: 84px;
      margin-top: 5px;
      font-size: 28px;
      font-family: Roboto-Bold;
      font-weight: bold;
      font-style: italic;
      background-image: url(/images/warnbg_02.png);
      background-size: cover;
      span {
        width: 100%;
        background: linear-gradient(to right, #76B2EC 30%, rgba(255,255,255,1) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .el-carousel__indicators--horizontal {
      bottom: 5px
    }
    .el-carousel__button {
      height: 4px;
      border-radius: 2px;
      width: 40px;
    }
  }
  .rain-monitor-box {
    padding: 12px 15px;
    .item-title {
      text-indent: 15px;
      position: relative;
      line-height: 20px;
      font-size: 20px;
      text-shadow: 0px 2px 8px rgba(5,28,55,0.42);
      background: linear-gradient(to bottom,  rgba(14,197,236, .6) 0%, #EFFCFE 20%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 1px;
        width: 4px;
        height: 18px;
        background-image: url(/images/rain-title.png);
      }
    }
    .info-item {
      padding-left: 20px;
      font-size: 16px;
      color: #BFD3E5;
      margin-top: 20px;
    }
    .box-bottom {
      margin-top: 20px;
    }
    .monitor-tab-section {
      .info-item  {
        margin-top: 18px;
      }
    }
    &>.justify-between {
      align-items: flex-start;
    }
    .tab-item {
      font-size: 16px;
      color: #BFD3E5;
      cursor: pointer;
      background: rgba(55,75,123,0.36);
      &:first-of-type {
        margin-right: 20px;
      }
    }
  }
}
.page-search {
  position: absolute;
  left: 488px;
  z-index: 99;
  top: 110px;
  .el-input {
    height: 38px;
    width: 280px;  
  }
  .el-input__inner {
    padding-right: 30px;
    font-size: 16px;
    font-weight: 400;
    color: #BFD3E5;
    border: 1px solid #4081CB;
    border-radius: 4px;
    background: rgba(135,158,199,0.3);
    box-shadow: inset 0px 3px 7px 0px rgba(42,138,236,0.95); 
  }
}
.page-select {
  left: 788px;
  .el-input {
    width: 120px;
  }
}
.select-popup {
  border: 1px solid #4081CB;
  background: rgba(0,0,0,1);
  box-shadow: inset 0px 3px 7px 0px rgba(42,138,236,0.95); 
  .el-cascader-menu {
    color: #fff;
  }
  .el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {
    background: rgba(42,138,236,0.35)
  }
  .el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {
    background: rgba(42,138,236,0.35)
  }
}
.page-full {
  top: auto;
  bottom: 55px;
  width: 80px;
  height: 30px;
  background: rgba(135,158,199,0.2);
  border-radius: 6px;
  font-size: 16px;
  color: #BFD3E5;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  line-height: 1;
  .el-icon-rank {
    font-size: 20px;
    margin-right: 5px;
  }
}
.page-mode {
  top: auto;
  bottom: 55px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  &>div {
    background-image: url(/images/mode-tab.png);
    background-size: cover;
    width: 150px;
    height: 50px;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    color: #BFD3E5;
    line-height: 32px;
    padding-top: 12px;
    font-style: italic;
    cursor: pointer;
    &:first-of-type {
      margin-right: -20px;
    }
    &.active {
      color: #F6FCFF;
      background-image: url(/images/mode-tab-ac.png);
    }
  }
}
.page-map {
  position: absolute;
  z-index: 99;
  bottom: 55px;
  right: 488px;
  width: 100px;
  height: 220px;
  background: rgba(135,158,199,0.2);
  border-radius: 6px;
  padding: 10px;
  &>div {
    height: 60px;
    background: #879EC7;
    border: 1px solid #3BCAFF;
    border-radius: 6px;
    margin-bottom: 10px;
    cursor: pointer;
    &:last-of-type {
      margin-bottom: 0;
    }
  }
}
.page-section {
  left: auto;
  right: 488px;
  width: 160px;
  .el-collapse-item__header{
    height: 40px;
    background: rgba(135,158,199,0.1);
    border: 0;
    padding-left: 10px;
    font-size: 18px;
    color: rgba(191, 211, 229, 0.7);
    &.is-active {
      background: rgba(13,43,84,0.76);
    }
  }
  .el-collapse-item__arrow {
    color: rgba(199,219,245,0.88);
    &::before {
      content: "\e790";
    }
  }
  .el-collapse-item__arrow.is-active {
    color: #2CB7FF;
    &::before {
      content: "\e792";
    }
  }
  .el-collapse-item__wrap {
    background: rgba(135,158,199,0.3);
    border: 0;
  }
  .el-collapse-item__content {
    padding-bottom: 0;
  }
  .check-item {
    padding-left: 10px;
    height: 40px;
    font-weight: 500;
    
    font-size: 18px;
    display: flex;
    align-items: center;
    .el-checkbox__label {
      color: rgba(191, 211, 229, 0.7);
    }
    .is-checked {
      .el-checkbox__label {
        color: #3BCAFF;
      }
    }
  }
}
.page-back {
  min-width: 182px;
  height: 50px;
  background-image: url(/images/back-bg.png);
  background-size: cover;
  display: flex;
  align-items: center;
  img {
    height: 100%;
  }
  div {
    font-size: 26px;
    color: #BFD3E5;
  }
}

 src/views/home/components/dayEightBar.vue

New file
@@ -0,0 +1,160 @@

<template>
    <div class="echarts-box" id="stackBarChart">
    
    </div>
</template>

<script>
export default {
    data() {
        return {
          myChart: null
        }
    },
    
    mounted() {
      let stackBarData = {
          xAxisData: ["武汉市", "黄石市", "十堰市", "宜昌市", "襄阳市", "鄂州市", "荆门市", "孝感市"],
          seriesData_01: ["20", "30", "15", "1", "10", "8", "5", "18"],
          seriesData_02: ["2", "6", "5", "10", "10", "8", "5", "1"],
          seriesData_03: ["3", "5", "1", "10", "3", "9", "15", "1"]
        }
        this.$nextTick(() => {
            this.createStackBarChart(stackBarData)
        })
    },
    destroyed() {

    },
    methods: {
      createStackBarChart(chartData) {
        if(!this.myChart) {
          this.myChart = this.$echarts.init(
            document.getElementById('stackBarChart')
          );
        }
          
          // 指定图表的配置项和数据
          var option = {
            title: {
              text: '总数 39座',
              top: 10,
              right: 20,
              textStyle: {
                color: "#BDD8F9",
                fontSize: 16,
                fontWeight: 400,
              },
            },
            legend: {
              show: true,
              top: 10,
              itemWidth: 8,
              itemHeight: 8,
              itemGap: 20,
              left: "center",
              textStyle: {
                color: "#B5C5D4",
                fontSize: 14,
              },
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              },
              formatter: function (e) {
                if (e.length > 0) {
                  var t = "".concat(e[0].name + " <br/>");
                  e.forEach((item) => {
                    t += item.marker + item.seriesName + ": " + item.value + " 座 <br/>"
                  })
                  return t
                }
              }
            },
            xAxis: {
              data: chartData.xAxisData,
              name: "",
              axisLine: {
                onZero: true,
                lineStyle: {
                  color: "rgba(186, 198, 208, .4)",
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                rotate: 30,
                interval: 0,
                fontSize: 14,
                color: "#B5C5D4",
              },
            },
            yAxis: {
              name: '数量',
              axisLabel: {
                fontSize: 13,
                color: "#B5C5D4",
              },
              nameTextStyle: {
                fontSize: 14,
                color: "#B5C5D4",
              },
              splitLine: {
                lineStyle: {
                  color: ["#344B64"],
                  type: "dashed",
                  width: 2,
                },
              },
            },
            grid: {
              left: 20,
              right: 15,
              top: 50,
              bottom: 7,
              containLabel: true,
            },
            series: [
              {
                name: "大型",
                type: "bar",
                stack: "one",
                barWidth: 12,
                data: chartData.seriesData_01,
                showBackground: true,
                backgroundStyle: {
                  color: "rgba(187,230,245,.3)",
                }
              },
              {
                name: "中型",
                type: "bar",
                stack: "one",
                data: chartData.seriesData_02,
              },
              {
                name: "小型",
                type: "bar",
                stack: "one",
                data: chartData.seriesData_03
              },
          ],
          };

          this.myChart.setOption(option);
        },
        
    },
}
</script>

<style lang="scss" scoped>
.echarts-box {
    width: 100%;
    height: 213px;
}
</style>

 src/views/home/components/rainLevelPie.vue

New file
@@ -0,0 +1,164 @@

<template>
  <div class="echarts-box" id="rainLevelPieChart"></div>
</template>

<script>
export default {
  data() {
    return {
      myChart: null,
    };
  },

  mounted() {
    this.$nextTick(() => {
      this.createPieChart();
    });
  },
  destroyed() {},
  methods: {
    createPieChart() {
      let data = [
        {
          name: "特大暴雨",
          value: 59,
        },
        {
          name: "大暴雨",
          value: 20,
        },
        {
          name: "暴雨",
          value: 281,
        },
        {
          name: "大雨",
          value: 59,
        },
        {
          name: "中雨",
          value: 29,
        },
        {
          name: "小雨",
          value: 281,
        },
        {
          name: "无雨",
          value: 281,
        },
      ];
      let total = data.reduce((prev, curr) => prev + curr.value, 0);
      if(!this.myChart) {
        this.myChart = this.$echarts.init(
          document.getElementById('rainLevelPieChart')
        );
      }
      let option = {
        legend: {
          orient: "vertical",
          left: "50%",
          top: 15,
          width: "100%",
          itemGap: 10,
          itemWidth: 8,
          itemHeight: 8,
          formatter: function (name) {
            let value = 0;
            data.forEach((item) => {
              if (item.name == name) {
                value = item.value;
              }
            });
            return `${name}    ${value}个   ${((value * 100) / total).toFixed(
              2
            )}%`;
          },
          textStyle: {
            color: "#fff",
            fontSize: 16,
            fontFamily: "Roboto-Bold",
          },
        },
        radar: [
          {
            indicator: [
              { text: "Indicator1" },
              { text: "Indicator2" },
              { text: "Indicator3" },
              { text: "Indicator4" },
              { text: "Indicator5" },
            ],
            center: ["25%", "50%"],
            radius: "80%",
            startAngle: 90,
            splitNumber: 1,
            shape: "circle",
            axisName: {
              show: false,
            },
            splitArea: {
              areaStyle: {
                color: ["rgba(0, 0, 0, 0.2)"],
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgba(211, 253, 250, 0)",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(51, 114, 210, .5)",
              },
            },
          },
        ],
        color: [
          "#DB983F",
          "#5D4EC5",
          "#379CF2",
          "#81E79C",
          "#AA8A6E",
          "#71E4D5",
          "#CDE5FF",
        ],
        series: [
          {
            name: "降雨等级",
            type: "pie",
            radius: ["50%", "65%"],
            center: ["25%", "50%"],
            label: {
              show: true,
              position: "center",
              color: "#D4E8F8",
              fontSize: 34,
              fontFamily: "Roboto-Bold",
              formatter: () => {
                return total;
              },
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              borderRadius: 0,
            },
            data,
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts-box {
  width: 100%;
  height: 210px;
}
</style>

 src/views/home/components/rainMonitorLine.vue

New file
@@ -0,0 +1,89 @@

<template>
  <div class="echarts-box" id="rainLineChart">
  
  </div>
</template>

<script>
export default {
  data() {
      return {
        myChart: null
      }
  },
  
  mounted() {
    let stackBarData = {
        xAxisData: ["4-1", "4-2", "4-3", "4-4", "4-5", "4-6", "4-7", "4-8"],
        seriesData: [820, 932, 901, 934, 1290, 1330, 1320,1320,1320],
      }
      this.$nextTick(() => {
          this.createAreaLine(stackBarData)
      })
  },
  destroyed() {

  },
  methods: {
    createAreaLine(chartData) {
      this.myChart = this.$echarts.init(
          document.getElementById('rainLineChart')
        );
      let option =  {
        xAxis: {
          show: true,
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              widht: 2,
              color: '#EA7629'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          data: chartData.xAxisData
        },
        yAxis: {
          show: false,
          type: 'value'
        },
        grid: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 2,
        },
        series: [
          {
            data: chartData.seriesData,
            type: 'line',
            symbol: 'none',
            lineStyle: {
              widht: 2,
              color: '#EA7629'
            },
            areaStyle: {
              color: 'rgba(234,118,41,0.5)'
            }
          }
        ]
      };
      this.myChart.setOption(option)
    }
      
  },
}
</script>

<style lang="scss" scoped>
.echarts-box {
  width: 100%;
  height: 100%;
}
</style>

 src/views/home/components/reservoirCapacityLine.vue

New file
@@ -0,0 +1,133 @@

<template>
  <div class="echarts-box" id="capacityLineChart">
  
  </div>
</template>

<script>
export default {
  data() {
      return {
        myChart: null
      }
  },
  
  mounted() {
    let stackBarData = {
        xAxisData: ["4-1", "4-2", "4-3", "4-4", "4-5", "4-6", "4-7"],
        seriesData: ["20", "30", "15", "14", "10", "8", "5", "18"],
      }
      this.$nextTick(() => {
          this.createStackBarChart(stackBarData)
      })
  },
  destroyed() {

  },
  methods: {
    createStackBarChart(chartData) {
      if(!this.myChart) {
        this.myChart = this.$echarts.init(
          document.getElementById('capacityLineChart')
        );
      }
        
        // 指定图表的配置项和数据
        var option = {
          legend: {
            show: false,
            top: 5,
            itemWidth: 8,
            itemHeight: 8,
            itemGap: 20,
            left: "center",
            textStyle: {
              color: "#B5C5D4",
              fontSize: 14,
            },
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter: function (e) {
              if (e.length > 0) {
                var t = "".concat(e[0].name + " <br/>");
                e.forEach((item) => {
                  t += item.marker + item.seriesName + ": " + item.value + " <br/>"
                })
                return t
              }
            }
          },
          xAxis: {
            data: chartData.xAxisData,
            name: "",
            axisLine: {
              onZero: true,
              lineStyle: {
                color: "rgba(186, 198, 208, .4)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              fontSize: 14,
              color: "#B5C5D4",
            },
          },
          yAxis: {
            name: '数量',
            axisLabel: {
              fontSize: 13,
              color: "#B5C5D4",
            },
            nameTextStyle: {
              fontSize: 14,
              color: "#B5C5D4",
            },
            splitLine: {
              lineStyle: {
                color: ["#344B64"],
                type: "dashed",
                width: 2,
              },
            },
          },
          grid: {
            left: 20,
            right: 15,
            top: 40,
            bottom: 15,
            containLabel: true,
          },
          series: [
            {
              name: "库容",
              type: "line",
              data: chartData.seriesData,
              symbol: 'none',
              lineStyle: {
                color: '#81E79C'
              }
            }
          ],
        };

        this.myChart.setOption(option);
      },
      
  },
}
</script>

<style lang="scss" scoped>
.echarts-box {
  width: 100%;
  height: 220px;
}
</style>

 src/views/home/components/reservoirCountBar.vue

New file
@@ -0,0 +1,139 @@

<template>
  <div class="echarts-box" id="countBarChart">
  
  </div>
</template>

<script>
export default {
  data() {
      return {
        myChart: null
      }
  },
  
  mounted() {
    let barData = {
        xAxisData: ["武汉市", "黄石市", "十堰市", "宜昌市", "襄阳市", "鄂州市", "荆门市", "孝感市"],
        seriesData: ["20", "30", "15", "1", "10", "8", "5", "18"]
      }
      this.$nextTick(() => {
          this.createBarChart(barData)
      })
  },
  destroyed() {

  },
  methods: {
    createBarChart(chartData) {
      if(!this.myChart) {
        this.myChart = this.$echarts.init(
          document.getElementById('countBarChart')
        );
      }
        
        // 指定图表的配置项和数据
        var option = {
          title: {
            show: false
          },
          legend: {
            show: false,
            top: 10,
            itemWidth: 8,
            itemHeight: 8,
            itemGap: 20,
            left: "center",
            textStyle: {
              color: "#B5C5D4",
              fontSize: 14,
            },
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter: function (e) {
              if (e.length > 0) {
                var t = "".concat(e[0].name + " <br/>");
                e.forEach((item) => {
                  t += item.marker + item.seriesName + ": " + item.value + " 座 <br/>"
                })
                return t
              }
            }
          },
          xAxis: {
            data: chartData.xAxisData,
            name: "",
            axisLine: {
              onZero: true,
              lineStyle: {
                color: "rgba(186, 198, 208, .4)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              rotate: 30,
              interval: 0,
              fontSize: 14,
              color: "#B5C5D4",
            },
          },
          yAxis: {
            name: '座',
            axisLabel: {
              fontSize: 13,
              color: "#B5C5D4",
            },
            nameTextStyle: {
              fontSize: 14,
              color: "#B5C5D4",
            },
            splitLine: {
              lineStyle: {
                color: ["#344B64"],
                type: "dashed",
                width: 2,
              },
            },
          },
          grid: {
            left: 20,
            right: 15,
            top: 50,
            bottom: 7,
            containLabel: true,
          },
          series: [
          {
              name: "水库数量",
              type: "bar",
              color: '#63B7F9',
              barWidth: 12,
              data: chartData.seriesData,
              showBackground: true,
              backgroundStyle: {
                color: "rgba(187,230,245,.3)",
              }
            }
          ],
        };

        this.myChart.setOption(option);
      },
      
  },
}
</script>

<style lang="scss" scoped>
.echarts-box {
  width: 100%;
  height: 220px;
}
</style>

 src/views/home/components/reservoirFloodLine.vue

New file
@@ -0,0 +1,164 @@

<template>
  <div class="echarts-box" id="floodLineChart">
  
  </div>
</template>

<script>
export default {
  data() {
      return {
        myChart: null
      }
  },
  
  mounted() {
    let stackBarData = {
        xAxisData: ["4-1", "4-2", "4-3", "4-4", "4-5", "4-6", "4-7", "4-8"],
        seriesData_01: ["20", "30", "15", "14", "10", "8", "5", "18"],
        seriesData_02: ["12", "16", "10", "8", "6", "4", "3", "13"],
        seriesData_03: ["6", "10", "3", "4", "3", "3", "1", "4"],
        seriesData_04: ["2", "4", "2", "2", "1", "1", "1", "1"]
      }
      this.$nextTick(() => {
          this.createStackBarChart(stackBarData)
      })
  },
  destroyed() {

  },
  methods: {
    createStackBarChart(chartData) {
      if(!this.myChart) {
        this.myChart = this.$echarts.init(
          document.getElementById('floodLineChart')
        );
      }
        
        // 指定图表的配置项和数据
        var option = {
          legend: {
            show: true,
            top: 5,
            itemWidth: 8,
            itemHeight: 8,
            itemGap: 20,
            left: "center",
            textStyle: {
              color: "#B5C5D4",
              fontSize: 14,
            },
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter: function (e) {
              if (e.length > 0) {
                var t = "".concat(e[0].name + " <br/>");
                e.forEach((item) => {
                  t += item.marker + item.seriesName + ": " + item.value + " 座 <br/>"
                })
                return t
              }
            }
          },
          xAxis: {
            data: chartData.xAxisData,
            name: "",
            axisLine: {
              onZero: true,
              lineStyle: {
                color: "rgba(186, 198, 208, .4)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              rotate: 30,
              interval: 0,
              fontSize: 14,
              color: "#B5C5D4",
            },
          },
          yAxis: {
            name: '座',
            axisLabel: {
              fontSize: 13,
              color: "#B5C5D4",
            },
            nameTextStyle: {
              fontSize: 14,
              color: "#B5C5D4",
            },
            splitLine: {
              lineStyle: {
                color: ["#344B64"],
                type: "dashed",
                width: 2,
              },
            },
          },
          grid: {
            left: 20,
            right: 15,
            top: 40,
            bottom: 7,
            containLabel: true,
          },
          series: [
            {
              name: "总数",
              type: "line",
              data: chartData.seriesData_01,
              symbol: 'none',
              lineStyle: {
                color: '#6152C7'
              }
            },
            {
              name: "小库",
              type: "line",
              symbol: 'none',
              data: chartData.seriesData_02,
              lineStyle: {
                color: '#81E79C'
              }
            },
            {
              name: "中库",
              type: "line",
              symbol: 'none',
              data: chartData.seriesData_03,
              lineStyle: {
                color: '#1C73C3'
              }
            },
            {
              name: "大库",
              type: "line",
              symbol: 'none',
              data: chartData.seriesData_04,
              lineStyle: {
                color: '#F4B34E'
              }
            },
        ],
        };

        this.myChart.setOption(option);
      },
      
  },
}
</script>

<style lang="scss" scoped>
.echarts-box {
  width: 100%;
  height: 220px;
}
</style>

 src/views/home/components/reservoirSizeBar.vue

New file
@@ -0,0 +1,138 @@

<template>
  <div class="echarts-box" id="sizeBarChart">
  
  </div>
</template>

<script>
export default {
  data() {
      return {
        myChart: null
      }
  },
  
  mounted() {
    let barData = {
        xAxisData: ["大（1）型", "大（2）型", "中型", "小（1）型", "小（2）型"],
        seriesData: ["20", "30", "15", "1", "10", "8", "5", "18"]
      }
      this.$nextTick(() => {
          this.createBarChart(barData)
      })
  },
  destroyed() {

  },
  methods: {
    createBarChart(chartData) {
      if(!this.myChart) {
        this.myChart = this.$echarts.init(
          document.getElementById('sizeBarChart')
        );
      }
        
        // 指定图表的配置项和数据
        var option = {
          title: {
            show: false
          },
          legend: {
            show: false,
            top: 10,
            itemWidth: 8,
            itemHeight: 8,
            itemGap: 20,
            left: "center",
            textStyle: {
              color: "#B5C5D4",
              fontSize: 14,
            },
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter: function (e) {
              if (e.length > 0) {
                var t = "".concat(e[0].name + " <br/>");
                e.forEach((item) => {
                  t += item.marker + item.seriesName + ": " + item.value + " 座 <br/>"
                })
                return t
              }
            }
          },
          xAxis: {
            data: chartData.xAxisData,
            name: "",
            axisLine: {
              onZero: true,
              lineStyle: {
                color: "rgba(186, 198, 208, .4)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              fontSize: 14,
              color: "#B5C5D4",
            },
          },
          yAxis: {
            name: '座',
            axisLabel: {
              fontSize: 13,
              color: "#B5C5D4",
            },
            nameTextStyle: {
              fontSize: 14,
              color: "#B5C5D4",
            },
            splitLine: {
              lineStyle: {
                color: ["#344B64"],
                type: "dashed",
                width: 2,
              },
            },
          },
          grid: {
            left: 20,
            right: 15,
            top: 50,
            bottom: 7,
            containLabel: true,
          },
          series: [
          {
              name: "水库规模",
              type: "bar",
              color: '#81E79C',
              barWidth: 12,
              data: ["20", "30", "15", "1", "10", "8", "5", "18"],
              showBackground: true,
              backgroundStyle: {
                color: "rgba(187,230,245,.3)",
              }
            }
          ],
        };

        this.myChart.setOption(option);
      },
      
  },
}
</script>

<style lang="scss" scoped>
.echarts-box {
  width: 100%;
  height: 210px;
}
</style>

 src/views/home/components/waterFlowLine.vue

New file
@@ -0,0 +1,133 @@

<template>
  <div class="echarts-box" id="flowLineChart">
  
  </div>
</template>

<script>
export default {
  data() {
      return {
        myChart: null
      }
  },
  
  mounted() {
    let stackBarData = {
        xAxisData: ["4-1", "4-2", "4-3", "4-4", "4-5", "4-6", "4-7"],
        seriesData: ["20", "30", "15", "14", "10", "8", "5", "18"],
      }
      this.$nextTick(() => {
          this.createStackBarChart(stackBarData)
      })
  },
  destroyed() {

  },
  methods: {
    createStackBarChart(chartData) {
      if(!this.myChart) {
        this.myChart = this.$echarts.init(
          document.getElementById('flowLineChart')
        );
      }
        
        // 指定图表的配置项和数据
        var option = {
          legend: {
            show: false,
            top: 5,
            itemWidth: 8,
            itemHeight: 8,
            itemGap: 20,
            left: "center",
            textStyle: {
              color: "#B5C5D4",
              fontSize: 14,
            },
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter: function (e) {
              if (e.length > 0) {
                var t = "".concat(e[0].name + " <br/>");
                e.forEach((item) => {
                  t += item.marker + item.seriesName + ": " + item.value + " <br/>"
                })
                return t
              }
            }
          },
          xAxis: {
            data: chartData.xAxisData,
            name: "",
            axisLine: {
              onZero: true,
              lineStyle: {
                color: "rgba(186, 198, 208, .4)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              fontSize: 14,
              color: "#B5C5D4",
            },
          },
          yAxis: {
            name: '数量',
            axisLabel: {
              fontSize: 13,
              color: "#B5C5D4",
            },
            nameTextStyle: {
              fontSize: 14,
              color: "#B5C5D4",
            },
            splitLine: {
              lineStyle: {
                color: ["#344B64"],
                type: "dashed",
                width: 2,
              },
            },
          },
          grid: {
            left: 20,
            right: 15,
            top: 40,
            bottom: 15,
            containLabel: true,
          },
          series: [
            {
              name: "流量",
              type: "line",
              data: chartData.seriesData,
              symbol: 'none',
              lineStyle: {
                color: '#63B7F9'
              }
            }
          ],
        };

        this.myChart.setOption(option);
      },
      
  },
}
</script>

<style lang="scss" scoped>
.echarts-box {
  width: 100%;
  height: 220px;
}
</style>

 src/views/home/components/waterMonitorLine.vue

New file
@@ -0,0 +1,113 @@

<template>
  <div class="echarts-box" id="waterLineChart">
  
  </div>
</template>

<script>
export default {
  data() {
      return {
        myChart: null
      }
  },
  
  mounted() {
    let stackBarData = {
        xAxisData: ["4-1", "4-2", "4-3", "4-4", "4-5", "4-6", "4-7", "4-8"],
        seriesData: [820, 932, 901, 934, 1290, 1330, 1320,1320,1320],
      }
      this.$nextTick(() => {
          this.createAreaLine(stackBarData)
      })
  },
  destroyed() {

  },
  methods: {
    createAreaLine(chartData) {
      this.myChart = this.$echarts.init(
          document.getElementById('waterLineChart')
        );
      let option =  {
        xAxis: {
          show: true,
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              widht: 2,
              color: 'rgba(43,163,255,1)'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          data: chartData.xAxisData
        },
        yAxis: {
          show: false,
          type: 'value'
        },
        grid: {
          left: 0,
          right: 0,
          top: 40,
          bottom: 2,
        },
        series: [
          {
            data: chartData.seriesData,
            type: 'line',
            symbol: 'none',
            smooth: true,
            lineStyle: {
              widht: 2,
              color: 'rgba(43,163,255,1)'
            },
            areaStyle: {
              color: 'rgba(43,163,255,0.5)'
            },
            markLine: {
              silent: true,
              symbol: 'none',
              label: {
                position: 'middle',
                color: '#FFF',
                fontSize: 12
              },
              data: [
                {
                  yAxis: 500,
                  label: {
                    formatter: '临界值500'
                  }
                },
                {
                  yAxis: 1000
                },
                {
                  yAxis: 1500
                }
              ]
            }
          }
        ]
      };
      this.myChart.setOption(option)
    }
      
  },
}
</script>

<style lang="scss" scoped>
.echarts-box {
  width: 100%;
  height: 100%;
}
</style>

 src/views/home/index.vue

@@ -37,7 +37,7 @@
          <div class="title">每日8时超汛限</div>
        </div>
        <div class="content-box chart-box">
          <div id="stackBarChart" style="width: 100%; height: 213px"></div>
          <day-eight-bar></day-eight-bar>
          <div class="scroll-table">
            <div class="scroll-table-head flex">
              <div>名称</div>
@@ -107,7 +107,7 @@
          <div class="title">水库数量分布</div>
        </div>
        <div class="content-box">
          <div id="barChart_01" style="width: 100%; height: 220px"></div>
          <reservoir-count-bar></reservoir-count-bar>
        </div>
      </div>

@@ -116,7 +116,7 @@
          <div class="title">水库规模分布</div>
        </div>
        <div class="content-box">
          <div id="barChart_02" style="width: 100%; height: 210px"></div>
          <reservoir-size-bar></reservoir-size-bar>
        </div>
      </div>

@@ -151,7 +151,7 @@
          <div class="title">降雨等级分布</div>
        </div>
        <div class="content-box">
          <div id="pie-chart" style="width: 100%; height: 210px"></div>
          <rain-level-pie></rain-level-pie>
        </div>
      </div>
    </div>
@@ -159,10 +159,15 @@
</template>

<script>
import dayEightBar from "./components/dayEightBar.vue";
import reservoirCountBar from './components/reservoirCountBar.vue';
import reservoirSizeBar from './components/reservoirSizeBar.vue';
import rainLevelPie from "./components/rainLevelPie.vue";
import vueSeamlessScroll from "vue-seamless-scroll";


export default {
  components: { vueSeamlessScroll },
  components: { vueSeamlessScroll, dayEightBar, reservoirCountBar, reservoirSizeBar, rainLevelPie },

  data() {
    return {
@@ -210,315 +215,12 @@
  created() {},

  mounted() {
    let stackBarData = {
      id: 'stackBarChart',
      xAxisData: ["武汉市", "黄石市", "十堰市", "宜昌市", "襄阳市", "鄂州市", "荆门市", "孝感市"],
      xAxisRotate: 30,
      title: '总数 39座',
      showLegend: true,
      yAxisName: '数量',
      series: [
          {
            name: "大型",
            type: "bar",
            stack: "one",
            barWidth: 12,
            data: ["20", "30", "15", "1", "10", "8", "5", "18"],
            showBackground: true,
            backgroundStyle: {
              color: "rgba(187,230,245,.3)",
            }
          },
          {
            name: "中型",
            type: "bar",
            stack: "one",
            data: ["2", "6", "5", "10", "10", "8", "5", "1"],
          },
          {
            name: "小型",
            type: "bar",
            stack: "one",
            data: ["3", "5", "1", "10", "3", "9", "15", "1"],
          },
      ],
    }
    this.createStackBarChart(stackBarData);
    let barData_01 = {
      id: 'barChart_01',
      xAxisData: ["武汉市", "黄石市", "十堰市", "宜昌市", "襄阳市", "鄂州市", "荆门市", "孝感市"],
      xAxisRotate: 30,
      title: '',
      showLegend: false,
      yAxisName: '座',
      series: [
        {
          name: "水库数量",
          type: "bar",
          color: '#63B7F9',
          barWidth: 12,
          data: ["20", "30", "15", "1", "10", "8", "5", "18"],
          showBackground: true,
          backgroundStyle: {
            color: "rgba(187,230,245,.3)",
          }
        }
      ]
    }
    this.createStackBarChart(barData_01);
    let barData_02 = {
      id: 'barChart_02',
      xAxisData: ["大（1）型", "大（2）型", "中型", "小（1）型", "小（2）型"],
      xAxisRotate: 0,
      title: '',
      showLegend: false,
      yAxisName: '座',
      series: [
        {
          name: "水库规模",
          type: "bar",
          color: '#81E79C',
          barWidth: 12,
          data: ["20", "30", "15", "1", "10", "8", "5", "18"],
          showBackground: true,
          backgroundStyle: {
            color: "rgba(187,230,245,.3)",
          }
        }
      ]
    }
    this.createStackBarChart(barData_02);
    this.createPieChart()
  
  },

  methods: {
    createStackBarChart(chartData) {
      const myChart = this.$echarts.init(
        document.getElementById(chartData.id)
      );
      // 指定图表的配置项和数据
      var option = {
        title: {
          show: chartData.title != '',
          text: chartData.title,
          top: 10,
          right: 20,
          textStyle: {
            color: "#BDD8F9",
            fontSize: 16,
            fontWeight: 400,
          },
        },
        legend: {
          show: chartData.showLegend,
          top: 10,
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 20,
          left: "center",
          textStyle: {
            color: "#B5C5D4",
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          formatter: function (e) {
            if (e.length > 0) {
              var t = "".concat(e[0].name + " <br/>");
              e.forEach((item) => {
                t += item.marker + item.seriesName + ": " + item.value + " 座 <br/>"
              })
              return t
            }
          }
        },
        xAxis: {
          data: chartData.xAxisData,
          name: "",
          axisLine: {
            onZero: true,
            lineStyle: {
              color: "rgba(186, 198, 208, .4)",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            rotate: chartData.xAxisRotate,
            interval: 0,
            fontSize: 14,
            color: "#B5C5D4",
          },
        },
        yAxis: {
          name: chartData.yAxisName,
          axisLabel: {
            fontSize: 13,
            color: "#B5C5D4",
          },
          nameTextStyle: {
            fontSize: 14,
            color: "#B5C5D4",
          },
          splitLine: {
            lineStyle: {
              color: ["#344B64"],
              type: "dashed",
              width: 2,
            },
          },
        },
        grid: {
          left: 20,
          right: 15,
          top: 50,
          bottom: 7,
          containLabel: true,
        },
        series: chartData.series,
      };

      myChart.setOption(option);
    },
    // 建言献策分析图表
    createPieChart() {
      let data = [
              {
                name: '特大暴雨',
                value: 59
              },
              {
                name: '大暴雨',
                value: 20
              },
              {
                name: '暴雨',
                value: 281
              }
              ,
              {
                name: '大雨',
                value: 59
              }
              ,
              {
                name: '中雨',
                value: 29
              }
              ,
              {
                name: '小雨',
                value: 281
              }
              ,
              {
                name: '无雨',
                value: 281
              }
      ]
      let total = data.reduce((prev, curr) => prev + curr.value, 0)
      let dom = document.getElementById("pie-chart");
      let pieChart = this.$echarts.init(dom);
      let option = {
        legend: {
          orient: 'vertical',
          left: '50%',
          top: 15,
          width: '100%',
          itemGap: 10,
          itemWidth: 8,
          itemHeight: 8,
          formatter: function (name) {
            let value = 0
            data.forEach((item) => {
              if(item.name == name) {
                value = item.value
              }
            })
              return `${name}    ${value}个   ${((value*100)/total).toFixed(2)}%`;
          },
          textStyle: {
            color: '#fff',
            fontSize: 16,
            fontFamily: 'Roboto-Bold',
          }
        },
        radar: [
          {
            indicator: [
              { text: 'Indicator1' },
              { text: 'Indicator2' },
              { text: 'Indicator3' },
              { text: 'Indicator4' },
              { text: 'Indicator5' }
            ],
            center: ['25%', '50%'],
            radius: '80%',
            startAngle: 90,
            splitNumber: 1,
            shape: 'circle',
            axisName: {
              show: false,
            },
            splitArea: {
              areaStyle: {
                color: ['rgba(0, 0, 0, 0.2)'],
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(211, 253, 250, 0)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(51, 114, 210, .5)'
              }
            }
          },
        ],
        color: [
          '#DB983F',
          '#5D4EC5',
          '#379CF2',
          '#81E79C',
          '#AA8A6E',
          '#71E4D5',
          '#CDE5FF',
        ],
        series: [
          {
            name: '降雨等级',
            type: 'pie',
            radius: ['50%', '65%'],
            center: ['25%', '50%'],
            label: {
              show: true,
              position: 'center',
              color: '#D4E8F8',
              fontSize: 34,
              fontFamily: 'Roboto-Bold',
              formatter: () => {
                return total;
              },
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              borderRadius: 0
            },
            data
          }
        ]
      };
      pieChart.setOption(option);
    },
   
  },

  destroyed() {},

 src/views/home/index_02.vue

New file
@@ -0,0 +1,333 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-04-04 13:50:06
 * @FilePath: \hbsl\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
-->

<template>
  <div class="pageContainer ">
    <div class="left-container">
      <div class="one">
        <div class="title-box">
          <div class="title">连续超汛水库排行榜</div>
          <div class="title-sub common-text">3-30</div>
        </div>
        <div class="content-box">
          <div class="scroll-table">
            <div class="scroll-table-head flex">
              <div style="flex: 2">排名</div>
              <div style="flex: 3">名称</div>
              <div style="flex: 3">水库规模</div>
              <div style="flex: 4">水位/超汛限M</div>
              <div style="flex: 3">超汛限天数</div>
            </div>
            <vue-seamless-scroll :class-option="classOption0" :data="listData0" class="scroll-table-body" style="height: 204px">
              <ul class="item">
                <li class="scroll-item flex" v-for="(item, index) in listData0" :key="index">
                  <div style="flex: 2" class="color-num">TOP{{ index+1 }}</div>
                  <div style="flex: 3">{{ item.area }}</div>
                  <div style="flex: 3">{{ item.scale }}</div>
                  <div style="flex: 4">
                    <span>{{ item.waterLevel }}</span>
                  </div>
                  <div style="flex: 3">{{ item.limit }}</div>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>

      <div class="two">
        <div class="title-box">
          <div class="title">每日8时超汛限</div>
        </div>
        <div class="content-box chart-box">
          <day-eight-bar></day-eight-bar>
          <div class="scroll-table">
            <div class="scroll-table-head flex">
              <div>名称</div>
              <div>行政区</div>
              <div>工程规模</div>
              <div>水位</div>
              <div>超汛限M</div>
            </div>
            <vue-seamless-scroll :class-option="classOption" :data="listData" class="scroll-table-body">
              <ul class="item">
                <li class="scroll-item flex" v-for="(item, index) in listData" :key="index">
                  <div class="">{{ item.name }}</div>
                  <div class="">{{ item.area }}</div>
                  <div class="">{{ item.scale }}</div>
                  <div class="flex justify-center">
                    <span>{{ item.waterLevel }}</span>
                    <img class="type-img" v-if="item.waterLeveltype == '0'" src="images/go-down.png" alt="">
                    <img class="type-img" v-else src="images/go-up.png" alt="">
                  </div>
                  <div class="">{{ item.limit }}</div>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>

      <div class="three">
        <div class="title-box">
          <div class="title">连续10天超汛限</div>
        </div>
        <div class="content-box">
         <reservoir-flood-line></reservoir-flood-line>
        </div>
      </div>
    </div>

    <div class="right-container">
      <div class="one">
        <div class="title-box">
          <div class="title">水库水情快报</div>
        </div>
        <div class="content-box all-text-box">
          <div class="all-text common-text">
            3月30日8时,全首有39座水库超汛限水位，其中大型0座、中型1座、小型38座。
            与昨日比较，总数增加1座(大型增加0座、中型增加O座、小型增加1座),
            减少座数较多的市有宜昌市,孝感市,恩施州分别减少1座,1座,1座。
            新增座券较多的市州有襄阳市,随州市分别新增3座,
          </div>
          <div class="common-text more-text">详情>></div>
        </div>
      </div>

      <div class="two">
        <div class="title-box">
          <div class="title">视频</div>
        </div>
        <div class="content-box video-box">
          <video preload="auto" controls src=""></video>
        </div>
      </div>

      <div class="three">
        <div class="title-box">
          <div class="title">责任履职不到位</div>
        </div>
        <div class="content-box">
          <div class="scroll-table">
            <div class="scroll-table-head flex">
              <div>行政区</div>
              <div>名称</div>
              <div>巡查责任人</div>
              <div>抽查结果</div>
            </div>
            <vue-seamless-scroll :class-option="classOption" :data="listData1" class="scroll-table-body">
              <ul class="item">
                <li class="scroll-item flex" v-for="(item, index) in listData1" :key="index">
                  <div class="">{{ item.area }}</div>
                  <div class="">{{ item.name }}</div>
                  <div class="">{{ item.man }}</div>
                  <div class="flex justify-center">
                    <span>{{ item.result }}</span>
                  </div>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>

      <div class="four">
        <div class="title-box">
          <div class="title">超汛水库分布</div>
        </div>
        <div class="content-box">
          <reservoir-count-bar></reservoir-count-bar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayEightBar from "./components/dayEightBar.vue";
import reservoirCountBar from "./components/reservoirCountBar.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
import reservoirFloodLine from './components/reservoirFloodLine.vue';


export default {
  components: { vueSeamlessScroll, dayEightBar, reservoirFloodLine, reservoirCountBar },

  data() {
    return {
      classOption0: {
        step: .2,
        limitMoveNum: 5
      },
      listData0: [
        {
          name: "汪店水库",
          area: '杨河镇',
          scale: "小（1）型",
          waterLevel: '62.77/0.27',
          limit: '9'
        },
        {
          name: "汪店水库",
          area: '杨河镇',
          scale: "小（1）型",
          waterLevel: '62.77/0.27',
          limit: '9'
        },
        {
          name: "汪店水库",
          area: '杨河镇',
          scale: "小（1）型",
          waterLevel: '62.77/0.27',
          limit: '9'
        },
        {
          name: "汪店水库",
          area: '杨河镇',
          scale: "小（1）型",
          waterLevel: '62.77/0.27',
          limit: '9'
        },
        {
          name: "汪店水库",
          area: '杨河镇',
          scale: "小（1）型",
          waterLevel: '62.77/0.27',
          limit: '9'
        },
      ],
      listData: [
        {
          name: "汪店水库",
          area: '杨河镇',
          scale: "小（1）型",
          waterLevel: '62.77',
          waterLeveltype: '0',
          limit: '0.27'
        },
        {
          name: "汪店水库",
          area: '杨河镇',
          scale: "小（1）型",
          waterLevel: '62.77',
          waterLeveltype: '1',
          limit: '0.27'
        },
        {
          name: "汪店水库",
          area: '杨河镇',
          scale: "小（1）型",
          waterLevel: '62.77',
          waterLeveltype: '0',
          limit: '0.27'
        },
        {
          name: "汪店水库",
          area: '杨河镇',
          scale: "小（1）型",
          waterLevel: '62.77',
          waterLeveltype: '1',
          limit: '0.27'
        },
      ],
      classOption: {
        step: .2,
        limitMoveNum: 4
      },
      listData1: [
        {
          area: '武汉市',
          name: '水位超汛限',
          man: '李艺伟1',
          result: '优秀'
        },
        {
          area: '武汉市',
          name: '水位超汛限',
          man: '李艺伟2',
          result: '优秀'
        },
        {
          area: '武汉市',
          name: '水位超汛限',
          man: '李艺伟3',
          result: '优秀'
        },
        {
          area: '武汉市',
          name: '水位超汛限',
          man: '李艺伟4',
          result: '优秀'
        },
      ]
    };
  },

  created() {},

  mounted() {
    
  },

  methods: {

   
  },

  destroyed() {},
};
</script>
<style lang="scss" scoped>
  .pageContainer {
    .left-container {
      left: 0;

      .one {
        height: 290px;
      }

      .two {
        height: 454px;
      }

      .three {
        flex: 1;
      }
    }

    .right-container {
      right: 0;

      .one {
        height: 244px;
      }

      .two {
        height: 255px;
      }

      .three {
        height: 246px;
      }
      .four {
        flex: 1;
      }
    }
    .color-num {
      // color: #EDB058;
      font-size: 16px!important;
      font-family: Roboto-Bold;
      background: linear-gradient(to right, RGBA(228, 134, 41, 1) 60%, #fff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent
    }
  }
</style>

 src/views/home/index_03.vue

New file
@@ -0,0 +1,280 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-04-04 13:50:06
 * @FilePath: \hbsl\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
-->

<template>
  <div class="pageContainer ">
    <div class="left-container">
      <div class="one">
        <div class="title-box">
          <div class="title">水库概况</div>
        </div>
        <div class="content-box detail-box">
          <img src="https://img2.baidu.com/it/u=4176068029,1540480464&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=337" alt="">
          <div class="all-text common-text">
            红卫水库是一座以农业灌溉为主，兼顾综合供水的小（一）型水库工程，
            位于德宏州陇川县陇把镇境内，距陇川县城约21公里，
            地处伊洛瓦底江水系南宛河一级支流丙寅河上。红卫水库于1970年1月动工兴建，
            1981....工，水库坝高19.4m，总库容827万立方米，承
            担3978人的生活用水任务及16656亩农田灌溉。水库自1983年开始出现病险，
            出现病险以来，一直采取控制蓄水，影响水库效益的正常发挥。
          </div>
        </div>
      </div>

      <div class="two">
        <div class="title-box">
          <div class="title">监测设备统计</div>
        </div>
        <div class="content-box device-box flex justify-between">
          <div class="device-item">
            <div class="item-title">水文监测站</div>
            <div class="item-num">6060</div>
          </div>
          <div class="device-item">
            <div class="item-title">监控视频</div>
            <div class="item-num">2048</div>
          </div>
          <div class="device-item">
            <div class="item-title">安全监测</div>
            <div class="item-num">456</div>
          </div>
        </div>
      </div>

      <div class="three">
        <div class="title-box">
          <div class="title">预警情况</div>
        </div>
        <div class="content-box">
          <div class="warning-box">
            <el-carousel trigger="click" height="115px" arrow="never" :autoplay="false">
              <el-carousel-item v-for="item in 2" :key="item">
                <div class="flex">
                  <div class="warning-item flex">
                    <img src="images/warn_01.png" alt="">
                    <div class="item-text">
                      <div class="item-title common-text">入侵</div>
                      <div class="item-num flex"><span>1024</span></div>
                    </div>
                  </div>
                  <div class="warning-item flex">
                    <img src="images/warn_01.png" alt="">
                    <div class="item-text">
                      <div class="item-title common-text">巡查</div>
                      <div class="item-num flex"><span>865</span></div>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="scroll-table">
            <div class="scroll-table-head flex">
              <div style="flex: 2">序号</div>
              <div style="flex: 4">报警名称</div>
              <div style="flex: 4">所属水库</div>
              <div style="flex: 4">报警类型</div>
              <div style="flex: 7">报警时间</div>
            </div>
            <vue-seamless-scroll :class-option="classOption" :data="listData" class="scroll-table-body" style="height: 210px">
              <ul class="item">
                <li class="scroll-item flex" v-for="(item, index) in listData" :key="index">
                  <div style="flex: 2">{{ index + 1 }}</div>
                  <div style="flex: 4">{{ item.name }}</div>
                  <div style="flex: 4">{{ item.reservoir }}</div>
                  <div style="flex: 4">{{ item.type }}</div>
                  <div style="flex: 7;white-space: nowrap;">{{ item.time }}</div>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
    </div>

    <div class="right-container">
      <div class="one">
        <div class="title-box">
          <div class="title">雨水情监测</div>
        </div>
        <div class="content-box rain-monitor-box">
          <div class="flex justify-between">
            <div class="rain-monitor-item">
              <div class="item-title">水情监测</div>
              <div style="width: 190px; height: 180px">
                <waterMonitorLine></waterMonitorLine>
              </div>
            </div>
            <div class="monitor-tab-section">
              <div class="tab-wrap flex">
                <div class="tab-item">当前水位</div> 
                <div class="tab-item">水位曲线</div> 
              </div> 
              <div class="info-section">
                <div class="info-item">当前汛期：主汛期</div>
                <div class="info-item">汛限水位：20m</div>
                <div class="info-item">蓄水量：45m<sup>3</sup></div>
                <div class="info-item">入库流量：11m<sup>3</sup>/s</div>
                <div class="info-item">出库流量：11m<sup>3</sup>/s</div>
              </div>
            </div>
          </div>
          <div class="rain-monitor-item box-bottom">
            <div class="item-title">雨情监测</div>
            <div class="flex justify-between">
              <div class="info-section">
                <div class="info-item">今日降水：6.6 mm</div>
                <div class="info-item">降水状态：小雨</div>
                <div class="info-item">本月总蓄水：25241 万m<sup>3</sup></div>
              </div>
              <div style="width: 160px; height: 100px">
                <rainMonitorLine></rainMonitorLine>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="two">
        <div class="title-box">
          <div class="title">库容曲线</div>
        </div>
        <div class="content-box">
          <reservoir-capacity-line></reservoir-capacity-line>
        </div>
      </div>

      <div class="three">
        <div class="title-box">
          <div class="title">泄流曲线</div>
        </div>
        <div class="content-box">
          <water-flow-line></water-flow-line>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import reservoirCapacityLine from "./components/reservoirCapacityLine.vue";
import waterFlowLine from "./components/waterFlowLine.vue";
import rainMonitorLine from "./components/rainMonitorLine.vue";
import waterMonitorLine from "./components/waterMonitorLine.vue";
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  components: { vueSeamlessScroll, reservoirCapacityLine, waterFlowLine, rainMonitorLine, waterMonitorLine },

  data() {
    return {
      listData: [
        {
          reservoir: "汪店水库",
          name: '水位超汛限 ',
          type: "监测点1",
          time: '2023-3-29 16:49:49'
        },
        {
          reservoir: "汪店水库",
          name: '水位超汛限 ',
          type: "监测点2",
          time: '2023-3-29 16:49:49'
        },
        {
          reservoir: "汪店水库",
          name: '水位超汛限 ',
          type: "监测点3",
          time: '2023-3-29 16:49:49'
        },
        {
          reservoir: "汪店水库",
          name: '水位超汛限 ',
          type: "监测点4",
          time: '2023-3-29 16:49:49'
        },
        {
          reservoir: "汪店水库",
          name: '水位超汛限 ',
          type: "监测点5",
          time: '2023-3-29 16:49:49'
        },
        {
          reservoir: "汪店水库",
          name: '水位超汛限 ',
          type: "监测点6",
          time: '2023-3-29 16:49:49'
        },
      ],
      classOption: {
        step: .2,
        limitMoveNum: 6
      }
    };
  },

  created() {},

  mounted() {
  
  },

  methods: {
    
   
  },

  destroyed() {},
};
</script>
<style lang="scss" scoped>
  .pageContainer {
    .left-container {
      left: 0;

      .one {
        height: 340px;
      }

      .two {
        height: 210px;
      }

      .three {
        flex: 1;
      }
    }

    .right-container {
      right: 0;

      .one {
        height: 470px;
      }

      .two {
        height: 258px;
      }

      .three {
        flex: 1;
      }
    }
    .color-num {
      // color: #EDB058;
      font-size: 16px!important;
      font-family: Roboto-Bold;
      background: linear-gradient(to right, RGBA(228, 134, 41, 1) 60%, #fff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent
    }
  }
</style>

 src/views/layout/index.vue

@@ -26,6 +26,51 @@
                </div>
            </div>
        </map-box>
        <div class="page-search" v-if="!showBack">
          <el-input
            size="medium"
            placeholder="请输入内容"
            suffix-icon="el-icon-search"
            @change="onSearch()"
            v-model="searchVal">
          </el-input>
        </div>
        <div class="page-search page-select" v-if="!showBack">
          <el-cascader
            size="medium"
            v-model="value"
            :options="options"
            popper-class="select-popup"
            :show-all-levels="false"
            @change="selectChange">
          </el-cascader>
        </div>
        <div class="page-search page-full" @click="changeFullscreen">
          <i class="el-icon-rank"></i>
          {{ fullscreen ? '缩小' : '全屏'}}
        </div>
        <div class="page-search page-mode">
          <div :class="{active: modeActive == 0 }" @click="modeActive = 0">综合态势感知</div>
          <div :class="{active: modeActive == 1 }" @click="modeActive = 1">防汛值班</div>
        </div>
        <div class="page-map">
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="page-search page-section">
          <el-collapse v-model="activeSection" @change="handleChange">
            <el-collapse-item v-for="item in sectionList" :key="item.title" :title="item.title" :name="item.title">
              <div class="check-item" v-for="child in item.children" :key="child.title">
                <el-checkbox :class="{active: child.checked}" v-model="child.checked">{{ child.title }}</el-checkbox>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div> 
        <div class="page-back page-search" v-if="showBack">
          <img src="images/back.png" alt="">
          <div>红卫水库</div>
        </div>
    </div>
</template>

@@ -34,7 +79,143 @@
export default {
    data () {
        return {
          fullscreen: false,  //是否全屏
          searchVal: '',      //搜索值
          modeActive: 0,      //底部切换
          showBack: false,    //是否显示返回
          options: [{
            value: 'zhinan',
            label: '指南',
            children: [{
              value: 'shejiyuanze',
              label: '设计原则',
              children: [{
                value: 'yizhi',
                label: '一致'
              }, {
                value: 'fankui',
                label: '反馈'
              }, {
                value: 'xiaolv',
                label: '效率'
              }, {
                value: 'kekong',
                label: '可控'
              }]
            }, {
              value: 'daohang',
              label: '导航',
              children: [{
                value: 'cexiangdaohang',
                label: '侧向导航'
                }, {
                value: 'dingbudaohang',
                label: '顶部导航'
              }]
            }],

          }],
          activeSection: '水库',
          sectionList: [
            {
              title: '水库',
              children: [
                {
                  title: '全部',
                  checked: false
                },
                {
                  title: '大型',
                  checked: false
                }
              ]
            },
            {
              title: '水文监测站',
              children: [
                {
                  title: '水位站',
                  checked: false
                },
                {
                  title: '雨量站',
                  checked: false
                }
              ]
            },
            {
              title: '安全监测站',
              children: [
                {
                  title: '全部',
                  checked: false
                }
              ]
            },
            {
              title: '监控视频',
              children: [
                {
                  title: '全部',
                  checked: false
                }
              ]
            }
          ]
      }
    },
    watch: {
      $route(val) {
        if(val.path == '/layout/home3') {
          this.showBack = true
        } else {
          this.showBack = false
        }
      }
    },
    created() {
      if(this.$route.path == '/layout/home3') {
          this.showBack = true
        }
    } ,
    methods: {
      onSearch() {

      },
      selectChange(val) {
        
      },
      changeFullscreen() {
        if(this.fullscreen) {
          this.exitFullScreen()
          return
        }
        this.requestFullscreen()
      },
      requestFullscreen () {
        const docElm = document.documentElement
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen()
        } else if (docElm.msRequestFullscreen) {
          docElm.msRequestFullscreen()
        } else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen()
        } else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen()
        }
        this.fullscreen = true
      },
      exitFullScreen () {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        }
        this.fullscreen = false
        }
    }
}