<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-05-12 11:37:45
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-05-15 15:10:36
|
* @FilePath: \web\bigScreen\src\views\csmodel\index.vue
|
* @Description:
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
<template>
|
<div class="big-screen-box pageContainer flex flex-d-c h-100">
|
<div class="h-0 flex-1 flex w-100">
|
<div class="w-0 flex-2 flex flex-d-c h-100">
|
<div class="h-0 w-100 flex-3 flex flex-d-c">
|
<div class="title">水库概览</div>
|
<div class="h-0 w-100 flex-1 flex flex-d-c">
|
<div class="h-0 w-100 flex-2 flex">
|
<div class="w-0 flex-1">
|
<statistics-box :params="reservoirBase"></statistics-box>
|
</div>
|
<div class="w-0 flex-2">
|
<reservoir-type-num class="reservoir"></reservoir-type-num>
|
</div>
|
</div>
|
<div class="h-0 w-100 flex-3 flex">
|
<div class="flex-1 flex">
|
<div class="flex">
|
<reservoir-survey></reservoir-survey>
|
</div>
|
<div class="flex">
|
<reservoir-survey></reservoir-survey>
|
</div>
|
</div>
|
<div class="flex-1">
|
<el-table :data="tableData" style="width: 100%">
|
<el-table-column label="类型" width="120">
|
<template slot-scope="scope">
|
<i
|
style="display: inline-block; width: 10px; height: 10px; border-radius: 50%;"
|
:style="{ background: scope.row.color }"
|
></i>
|
<span style="margin-left: 10px">{{ scope.row.type }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="库容">
|
<template slot-scope="scope">
|
<span>{{ scope.row.capacity }}亿m³</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="蓄水量">
|
<template slot-scope="scope">
|
<span>{{ scope.row.retainWater }}亿m³</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<div class="h-0 w-100 flex-3">
|
<bar-echarts></bar-echarts>
|
</div>
|
</div>
|
</div>
|
<div class="h-0 w-100 flex-1 flex flex-d-c">
|
<div class="title">业务信息</div>
|
<div class="h-0 w-100 flex-1">
|
<service-info></service-info>
|
</div>
|
</div>
|
</div>
|
<div class="w-0 flex-3 h-100">
|
<div class="flex">
|
<statistics-box
|
class="flex-1"
|
v-for="( item, index ) in params "
|
:key="index"
|
:params="item"
|
></statistics-box>
|
</div>
|
<div class="flex" style="height: 54px;">
|
<div class="scoll-title flex justify-content-c">日报</div>
|
<div class="h-100 flex-1">
|
<text-scroll class="text-scroll-box" :scollTextValue="scollTextValue"></text-scroll>
|
</div>
|
</div>
|
</div>
|
<div class="w-0 flex-2 flex flex-d-c h-100">
|
<div class="h-0 w-100 flex-1 flex flex-d-c">
|
<div class="title">超汛排行统计</div>
|
<div class="h-0 w-100 flex-1">
|
<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>
|
</div>
|
<div class="h-0 w-100 flex-1 flex flex-d-c">
|
<div class="title">库容曲线统计</div>
|
<div class="h-0 w-100 flex-1">
|
<bar-echarts-fold></bar-echarts-fold>
|
</div>
|
</div>
|
<div class="h-0 w-100 flex-1 flex flex-d-c">
|
<div class="title">巡查监管（昨日）</div>
|
<div class="h-0 w-100 flex-1">
|
<bar-echarts-single></bar-echarts-single>
|
</div>
|
</div>
|
<div class="h-0 w-100 flex-1 flex flex-d-c">
|
<div class="title">外呼抽查（昨日）</div>
|
<div class="h-0 w-100 flex-1">
|
<line-echarts-single></line-echarts-single>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="flex">
|
<site-type-proportion class="around-m-5" :title="'水位'"></site-type-proportion>
|
<site-type-proportion class="around-m-5" :title="'水位'"></site-type-proportion>
|
<site-type-proportion class="around-m-5" :title="'水位'"></site-type-proportion>
|
<site-type-proportion class="around-m-5" :title="'水位'"></site-type-proportion>
|
<site-type-proportion class="around-m-5" :title="'水位'"></site-type-proportion>
|
<site-type-proportion class="around-m-5" :title="'水位'"></site-type-proportion>
|
<site-type-proportion class="around-m-5" :title="'水位'"></site-type-proportion>
|
<site-type-proportion class="around-m-5" :title="'水位'"></site-type-proportion>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getOverZCont } from "@/api/sk/sk";
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
import serviceInfo from "./components/serviceInfo.vue";
|
import reservoirSurvey from "./components/reservoirSurvey.vue";
|
import reservoirTypeNum from "./components/reservoirTypeNum.vue";
|
import statisticsBox from "./components/echarts/statisticsBox.vue";
|
import textScroll from "./components/textScroll.vue";
|
|
export default {
|
components: {
|
vueSeamlessScroll,
|
serviceInfo,
|
reservoirSurvey,
|
reservoirTypeNum,
|
statisticsBox,
|
textScroll
|
},
|
|
data() {
|
return {
|
classOption0: {
|
step: 0.2,
|
limitMoveNum: 5
|
},
|
|
listData0: [],
|
|
scollTextValue: "",
|
|
reservoirBase: {
|
color: "#44EFFF",
|
imgUrl: "/images/水质监测站.png",
|
typeNum: "2302",
|
unit: "座",
|
title: "水库总数"
|
},
|
|
params: [
|
{
|
color: "#0DF4D1",
|
imgUrl: "/images/水质监测站.png",
|
typeNum: "安全",
|
title: "大坝安全监测"
|
},
|
{
|
color: "#66BBF9",
|
imgUrl: "/images/水质监测站.png",
|
typeNum: "87",
|
unit: "%",
|
title: "责任人落实"
|
},
|
{
|
color: "#66BBF9",
|
imgUrl: "/images/水质监测站.png",
|
typeNum: "239",
|
unit: "座",
|
title: "超汛水库"
|
},
|
{
|
color: "#0DF4D1",
|
imgUrl: "/images/水质监测站.png",
|
typeNum: "0",
|
title: "洪水预报"
|
}
|
],
|
|
tableData: [
|
{
|
type: "公益型水库",
|
capacity: 325,
|
retainWater: 282,
|
color: "#2391FF"
|
},
|
{
|
type: "电站型水库",
|
capacity: 325,
|
retainWater: 282,
|
color: "#5AD8A6"
|
},
|
{
|
type: "其他水库",
|
capacity: 325,
|
retainWater: 282,
|
color: "#6DC8EC"
|
}
|
]
|
};
|
},
|
|
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: 100%;
|
height: 100%;
|
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 {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
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 {
|
height: 0;
|
flex: 1;
|
overflow: hidden;
|
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;
|
}
|
|
.scoll-title {
|
width: 54px;
|
height: 100%;
|
font-size: 18px;
|
background: #f0b626;
|
}
|
|
.text-scroll-box {
|
height: 100%;
|
}
|
}
|
|
.around-m-5 {
|
margin: 0 5px;
|
}
|
|
.w-100 {
|
width: 100%;
|
}
|
|
.w-0 {
|
width: 0;
|
}
|
|
.h-100 {
|
height: 100%;
|
}
|
|
.h-0 {
|
height: 0;
|
}
|
|
.flex {
|
display: flex;
|
align-items: center;
|
}
|
|
.justify-content-c {
|
justify-content: center;
|
}
|
|
.flex-1 {
|
flex: 1;
|
}
|
|
.flex-2 {
|
flex: 2;
|
}
|
|
.flex-3 {
|
flex: 3;
|
}
|
|
.flex-d-c {
|
flex-direction: column;
|
}
|
|
.title {
|
width: 100%;
|
height: 36px;
|
line-height: 36px;
|
text-align: left;
|
font-size: 18px;
|
}
|
</style>
|
