<!--
|
* @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">4-1 14:31</div>
|
</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="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 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, dayEightBar, reservoirCountBar, reservoirSizeBar, rainLevelPie },
|
|
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() {
|
|
},
|
|
methods: {
|
|
|
},
|
|
destroyed() {},
|
};
|
</script>
|
