<!--
|
* @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>
|
