<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-05-12 11:37:45
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-05-22 10:51:00
|
* @FilePath: \web\bigScreen\src\views\csmodel\index copy.vue
|
* @Description:
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
<template>
|
<div class="big-screen-box pageContainer">
|
<site-type-proportion :title="'水位'"></site-type-proportion>
|
|
<bar-echarts></bar-echarts>
|
|
<bar-echarts-single></bar-echarts-single>
|
|
<bar-echarts-fold></bar-echarts-fold>
|
|
<line-echarts-single></line-echarts-single>
|
|
<service-info></service-info>
|
|
<basic-statistics></basic-statistics>
|
|
<reservoir-survey></reservoir-survey>
|
|
<text-scroll class="text-scroll-box" :scollTextValue="scollTextValue"></text-scroll>
|
|
<reservoir-type-num class="reservoir"></reservoir-type-num>
|
|
<div class="one">
|
<div class="title-box">
|
<div class="title">连续超汛水库排行榜</div>
|
<div class="title-sub common-text">{{ getCurrentDate }}</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">
|
<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.res_nm }}</div>
|
<div style="flex: 3">{{ item.eng_scal }}</div>
|
<div style="flex: 4">
|
<span>{{ item.rz }}/{{ item.over_z }}</span>
|
</div>
|
<div style="flex: 3">{{ item.consecutive_cnt }}</div>
|
</li>
|
</ul>
|
</vue-seamless-scroll>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getOverZCont } from '@/api/sk/sk'
|
import vueSeamlessScroll from "vue-seamless-scroll"
|
import serviceInfo from "./components/serviceInfo.vue"
|
import basicStatistics from "./components/basicStatistics.vue"
|
import reservoirSurvey from "./components/reservoirSurvey.vue"
|
import textScroll from "./components/textScroll.vue"
|
import reservoirTypeNum from "./components/reservoirTypeNum.vue"
|
|
export default {
|
components: { vueSeamlessScroll, basicStatistics, serviceInfo, reservoirSurvey, reservoirTypeNum, textScroll },
|
|
data () {
|
return {
|
classOption0: {
|
step: .2,
|
limitMoveNum: 5
|
},
|
|
listData0: [
|
|
],
|
|
scollTextValue: ''
|
}
|
},
|
|
computed: {
|
getCurrentDate () {
|
var timestamp = Date.parse(new Date())
|
var serverDate = new Date(timestamp)
|
var tomorrowM = serverDate.getMonth() + 1
|
var tomorrowD = serverDate.getDate()
|
return tomorrowM + '-' + tomorrowD
|
}
|
},
|
|
created () {
|
this.getOverZCont()
|
|
this.scollTextValue = `5月6日8时,全省有92座水库超汛限水位，其中大型0座、中型1座、小型91座。与昨日比较，总数减少6座（大型增加0座、中型增加0座、小型减少6座),减少座数较多的市州有荆门市, 武汉市, 黄石市, 咸宁市分别减少7座, 3座, 2座, 1座。新增座数较多的市州有襄阳市, 孝感市, 十堰市分别新增3座, 3座, 1座。1座超汛限的中型水库分布为：孛畈镇1座（清水河水库）。超汛幅度0.19-0.19米。超幅最大的是清水河水库（超汛限0.19米，出库流量--立方米/秒，均质土坝，承雨面积165.7平方公里，无闸控制，堰顶高程、汛限水位和正常蓄水位71.2米，设计水位75.77米，校核水位78.13米）。91座超汛限的小型水库分布为：荆门市14座, 宜昌市3座, 鄂州市2座, 襄阳市29座, 随州市2座, 武汉市4座, 黄石市3座, 咸宁市4座, 孝感市28座, 十堰市2座。超汛幅度0.01-0.25米。其中超幅最大的是马港镇深谷垅水库（超汛限0.25米，当前水位263.2米，设计水位265.08米，水库承雨面积小，深谷垅水库水库水位下降缓慢）。各地调度超汛限水库泄洪，其中大中型水库出库流量0.16立方米/秒，日泄流量1.382万立方米。`
|
},
|
|
methods: {
|
getOverZCont () {
|
getOverZCont().then(res => {
|
this.listData0 = res.data.resultList.sort((a, b) => b.consecutive_cnt - a.consecutive_cnt)
|
})
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.big-screen-box {
|
position: relative;
|
display: flex;
|
flex-wrap: wrap;
|
|
.one {
|
width: 400px;
|
height: 360px;
|
display: flex;
|
flex-direction: column;
|
position: relative;
|
|
.scroll-table-body {
|
height: 165px;
|
}
|
|
.title-box {
|
position: relative;
|
height: 38px;
|
line-height: 38px;
|
background: url(/bigScreen/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 {
|
height: 0;
|
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;
|
}
|
}
|
|
.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
|
}
|
|
.text-scroll-box {
|
width: 800px;
|
height: 100px
|
}
|
}
|
</style>
|
