page one

tengsx

2023-04-05 d50f9a2d262342ab6c39e8d3e5717ff381064572

page one

 public/images/ctrl-left.png

 public/images/go-down.png

 public/images/go-up.png

 src/App.vue

@@ -40,7 +40,6 @@
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    overflow: hidden;
}

 src/styles/font/Roboto-Bold.ttf

Binary files differ

 src/styles/index.scss

@@ -2,4 +2,263 @@
@import "./dc/index.scss";
@import "./icon/index.scss";
@import "./tool/index.scss";
@import "./element-ui/element-ui.scss";
@import "./element-ui/element-ui.scss";

@font-face {
  font-family: Roboto-Bold;
  src: url(./font/Roboto-Bold.ttf);
}
.pageContainer {
  color: #fff;
  width: 100%;
  .mt-15 {
    margin-top: 15px;
  }
  .flex {
    display: flex;
    align-items: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .common-text {
    font-size: 16px;
    font-family: Alibaba PuHuiTi;
    font-style: italic;
    color: #F6F9FE;
  }
  .left-container,
  .right-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    width: 408px;
    height: 100%;
    pointer-events: auto;
    background: rgba(28, 115, 195, 0.05);

    &>div {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;

      .title-box {
        position: relative;
        height: 38px;
        line-height: 38px;
        background: url(/images/title-box.png) no-repeat center / 100% 100%;

        .title {
          margin-left: 30px;
          text-align: left;
          font-size: 18px;
          font-family: Alibaba PuHuiTi;
          font-weight: bold;
          font-style: italic;
          color: transparent;
          text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
          background-image: linear-gradient(180deg, rgba(14, 197, 236, 0.36) 5%, rgba(49, 190, 255, 0.36) 20%, rgba(255, 255, 255, 1) 40%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparen
        }
        .title-sub {
          position: absolute;
          right: 10px;
          bottom: 4px;
          line-height: 1;
        }
      }

      .content-box {
        flex: 1;
      }
    }
    .chart-box {
      // background:  rgba(42,64,120,0.68);
    }
  }
  .common-empty {
    padding-top: 46px;
    display: flex;
    justify-content: center;
  }
  .left-container {
    left: 0;

    .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 {
      height: 454px;
    }

    .three {
      flex: 1;
    }
  }

  .right-container {
    right: 0;

    .one {
      height: 266px;
    }

    .two {
      height: 260px;
    }

    .three {
      height: 210px;
    }

    .four {
      flex: 1;
    }
  }
  .scroll-table {
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    font-style: italic;
    color: #AFBED8;
    .scroll-table-head {
      height: 38px;
      font-size: 16px;
      border-bottom: 2px solid #6187E4;
      background: rgba(42,64,120,0.68);
      &>div {
        flex: 1;
        text-align: center;
      }
    }
    .scroll-table-body {
      overflow: hidden;
      height: 155px;
      margin-top: 10px;
    }
    .scroll-item {
      margin-top: 5px;
      height: 38px;
      border: 1px solid rgba(36, 57, 110, 1);
      background: rgba(36,57,110,0.34);
      &>div {
        text-align: center;
        flex: 1;
        color: #D4E8F8;
        font-size: 14px;
      }
    }
    .type-img {
      margin-left: 5px;
    }
  }
  .carousel-box {
    position: relative;
    .el-carousel__container {
      height: 142px;
    }
    .card-item {
      height: 142px;
      width: 122px;
      border: 1px solid rgba(110, 135, 197, .32);
      background: rgba(36,57,110,0.34);
      line-height: 1;
      padding: 10px 0 0 0;
      text-align: left;
      text-indent: 10px;
      .type-img {
        margin-left: 5px;
        position: relative;
        top: 3px;
      }
      &>div:nth-of-type(2) {
        margin-top: 10px;
        & .num {
          font-size: 20px;
          font-family: Roboto-Bold;
          font-weight: bold;
        }
      }
      &>div:nth-of-type(3) {
        margin-top: 8px;
        color: #F7101A;
      }
      &>div:nth-of-type(4) {
        margin-top: 12px;
      }
      &>div:nth-of-type(5) {
        margin-top: 5px;
      }
    }
    .justify-between {
      padding: 0 10px;
    }
    .btn-item  {
      width: 40px;
      height: 40px;
      cursor: pointer;
    }
    .btn-left {
      background-image: url(./../../public/images/ctrl-left.png);
    }
    .btn-right {
      margin-left: 3px ;
      transform: rotate(180deg);
    }
  }
  .big-num {
    margin: 10px 0;
    line-height: 1;
    .num-num {
      margin-left: 10px;
      font-size: 48px;
      font-family: Roboto-Bold;
      font-weight: bold;
    }
    .num-text{
      margin-left: 10px;
    }
  }
  .big-section {
    flex: 1;
    .big-num {
      padding-left: 30px;
    }
    .section-text {
      height: 22px;
      line-height: 22px;
      text-align: right;
    }
    .time {
      margin-top: 5px;
      color: #B5C5D4;
    }
  }
}

 src/views/home/index.vue

@@ -10,180 +10,517 @@
-->

<template>
    <div class="container">
        <div class="left-container">
            <div class="one">
                <div class="title-box">
                    <div class="title">标题名称</div>
                </div>
                <div class="content-box">
                    <pie-echarts></pie-echarts>
                </div>
            </div>

            <div class="two">
                <div class="title-box">
                    <div class="title">每日8时超汛限</div>
                </div>
                <div class="content-box">
                    <bar-echarts></bar-echarts>
                </div>
            </div>

            <div class="three">
                <div class="title-box">
                    <div class="title">连续10天超汛限</div>
                </div>
                <div class="content-box"></div>
            </div>
  <div class="pageContainer">
    <div class="left-container">
      <div class="one">
        <div class="title-box">
          <div class="title">标题名称</div>
          <div class="title-sub common-text">4-1 14:31</div>
        </div>

        <div class="right-container">
            <div class="one">
                <div class="title-box">
                    <div class="title">水库数量分布</div>
                </div>
                <div class="content-box"></div>
        <div class="content-box">
          <div class="content-data flex justify-between mt-15">
            <div class="flex">
              <div class="data-item common-text">水库 0</div>
              <div class="data-item common-text">降雨 0</div>
            </div>

            <div class="two">
                <div class="title-box">
                    <div class="title">水库规模分布</div>
                </div>
                <div class="content-box"></div>
            </div>

            <div class="three">
                <div class="title-box">
                    <div class="title">泄调洪水库数量</div>
                </div>
                <div class="content-box"></div>
            </div>

            <div class="four">
                <div class="title-box">
                    <div class="title">降雨等级分布</div>
                </div>
                <div class="content-box"></div>
            </div>
            <div class="common-text">湖北省</div>
          </div>
          <div class="common-empty">
            <img src="images/缺省页_空白页-通用.png" alt="" />
          </div>
          <div class="common-text more-text">更多 ></div>
        </div>
      </div>

      <div class="two">
        <div class="title-box">
          <div class="title">每日8时超汛限</div>
        </div>
        <div class="content-box chart-box">
          <div id="stackBarChart" style="width: 100%; height: 213px"></div>
          <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 carousel-box">
          <div class="carousel-ctrl flex justify-between">
            <div class="big-num common-text">
              <span class="num-num">0</span>
              <span class="num-text">座</span>
            </div>
            <div class="ctrl-btn flex">
              <div class="btn-item btn-left" @click="$refs.carouselCard.prev()"></div>
              <div class="btn-item btn-left btn-right" @click="$refs.carouselCard.next()"></div>
            </div>
          </div>
          <el-carousel ref="carouselCard" :autoplay="false" :indicator-position="'none'" arrow="never">
            <el-carousel-item v-for="idx in Math.ceil(listData.length / 3)" :key="idx">
              <div class="flex justify-between">
                <div class="card-item" v-for="item in listData.slice((idx - 1) * 3, idx * 3)" :key="item">
                  <div class="common-text">{{ item.name }}</div>
                  <div class="flex common-text">
                    <span><span class="num">{{ item.waterLevel }}</span>m</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="common-text">超汛限{{ item.limit }}</div>
                  <div class="common-text">{{ item.area }}</div>
                  <div class="common-text">{{ item.scale }}</div>
                </div>
              </div> 
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>

    <div class="right-container">
      <div class="one">
        <div class="title-box">
          <div class="title">水库数量分布</div>
        </div>
        <div class="content-box">
          <div id="barChart_01" style="width: 100%; height: 220px"></div>
        </div>
      </div>

      <div class="two">
        <div class="title-box">
          <div class="title">水库规模分布</div>
        </div>
        <div class="content-box">
          <div id="barChart_02" style="width: 100%; height: 210px"></div>
        </div>
      </div>

      <div class="three">
        <div class="title-box">
          <div class="title">泄调洪水库数量</div>
        </div>
        <div class="content-box flex">
          <div class="big-section">
            <div class="big-num common-text">
              <span class="num-num">0</span>
              <span class="num-text">座</span>
            </div>
            <div class="common-text section-text"></div>
            <div class="common-text section-text">湖北省</div>
            <div class="common-text section-text time">2023-4-1</div>
          </div>
          <div class="big-section">
            <div class="big-num common-text">
              <span class="num-num">0</span>
              <span class="num-text">m<sup>3</sup>/s</span>
            </div>
            <div class="common-text section-text">湖北省</div>
            <div class="common-text section-text">日泄流总量0亿m3</div>
            <div class="common-text section-text time">2023-4-1</div>
          </div>
        </div>
      </div>

      <div class="four">
        <div class="title-box">
          <div class="title">降雨等级分布</div>
        </div>
        <div class="content-box">
          <div id="pie-chart" style="width: 100%; height: 210px"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pieEcharts from './components/pieEcharts.vue'
import barEcharts from './components/barEcharts.vue'
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
    components: { pieEcharts ,barEcharts},
  components: { vueSeamlessScroll },

    data () {
        return {
  data() {
    return {
      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
      }
    };
  },

  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);
    },

    created () {

    // 建言献策分析图表
    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);
    },
  },

    mounted () {

    },

    methods: {

    },

    destroyed () {

    },

}
  destroyed() {},
};
</script>

<style scoped lang="scss">
.container {
    color: #fff;
    width: 100%;

    .left-container,
    .right-container {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0;
        width: 408px;
        height: 100%;
        pointer-events: auto;
        background: rgba(28, 115, 195, 0.05);

        &>div {
            display: flex;
            flex-direction: column;

            .title-box {
                height: 38px;
                line-height: 38px;
                background: url(/images/title-box.png) no-repeat center / 100% 100%;

                .title {
                    margin-left: 30px;
                    text-align: left;

                    font-size: 18px;
                    font-family: Alibaba PuHuiTi;
                    font-weight: bold;
                    font-style: italic;
                    color: #F6F9FE;
                    text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);

                    background: linear-gradient(0deg, rgba(14, 197, 236, 0.36) 0%, rgba(49, 190, 255, 0.36) 0%, rgba(239, 252, 254, 0.36) 58.7646484375%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparen
                }
            }

            .content-box {
                flex: 1;
            }
        }
    }

    .left-container {
        left: 0;

        .one {
            height: 258px;
        }

        .two {
            height: 454px;
        }

        .three {
            flex: 1;
        }
    }

    .right-container {
        right: 0;

        .one {
            height: 266px;
        }

        .two {
            height: 260px;
        }

        .three {
            height: 210px;
        }

        .four {
            flex: 1;
        }
    }
}
</style>