Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/hbwri/bigScreen

tengsx

2023-04-07 36c045a4f518f6506eab91e48ee48ce7d1aaa21d

 src/views/home/index.vue

@@ -10,180 +10,219 @@
-->

<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">
          <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 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">
          <reservoir-count-bar></reservoir-count-bar>
        </div>
      </div>

      <div class="two">
        <div class="title-box">
          <div class="title">水库规模分布</div>
        </div>
        <div class="content-box">
          <reservoir-size-bar></reservoir-size-bar>
        </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">
          <rain-level-pie></rain-level-pie>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pieEcharts from './components/pieEcharts.vue'
import barEcharts from './components/barEcharts.vue'
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: { pieEcharts ,barEcharts},
  components: { vueSeamlessScroll, dayEightBar, reservoirCountBar, reservoirSizeBar, rainLevelPie },

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

    created () {
  mounted() {
  
  },

    },
  methods: {

    mounted () {
   
  },

    },

    methods: {

    },

    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>
  destroyed() {},
};
</script>