<!--
|
* @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>
|
<div class="content-box detail-box">
|
<img src="https://img2.baidu.com/it/u=4176068029,1540480464&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=337" alt="">
|
<div class="all-text common-text">
|
红卫水库是一座以农业灌溉为主，兼顾综合供水的小（一）型水库工程，
|
位于德宏州陇川县陇把镇境内，距陇川县城约21公里，
|
地处伊洛瓦底江水系南宛河一级支流丙寅河上。红卫水库于1970年1月动工兴建，
|
1981....工，水库坝高19.4m，总库容827万立方米，承
|
担3978人的生活用水任务及16656亩农田灌溉。水库自1983年开始出现病险，
|
出现病险以来，一直采取控制蓄水，影响水库效益的正常发挥。
|
</div>
|
</div>
|
</div>
|
|
<div class="two">
|
<div class="title-box">
|
<div class="title">监测设备统计</div>
|
</div>
|
<div class="content-box device-box flex justify-between">
|
<div class="device-item">
|
<div class="item-title">水文监测站</div>
|
<div class="item-num">6060</div>
|
</div>
|
<div class="device-item">
|
<div class="item-title">监控视频</div>
|
<div class="item-num">2048</div>
|
</div>
|
<div class="device-item">
|
<div class="item-title">安全监测</div>
|
<div class="item-num">456</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="three">
|
<div class="title-box">
|
<div class="title">预警情况</div>
|
</div>
|
<div class="content-box">
|
<div class="warning-box">
|
<el-carousel trigger="click" height="115px" arrow="never" :autoplay="false">
|
<el-carousel-item v-for="item in 2" :key="item">
|
<div class="flex">
|
<div class="warning-item flex">
|
<img src="images/warn_01.png" alt="">
|
<div class="item-text">
|
<div class="item-title common-text">入侵</div>
|
<div class="item-num flex"><span>1024</span></div>
|
</div>
|
</div>
|
<div class="warning-item flex">
|
<img src="images/warn_01.png" alt="">
|
<div class="item-text">
|
<div class="item-title common-text">巡查</div>
|
<div class="item-num flex"><span>865</span></div>
|
</div>
|
</div>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
</div>
|
<div class="scroll-table">
|
<div class="scroll-table-head flex">
|
<div style="flex: 2">序号</div>
|
<div style="flex: 4">报警名称</div>
|
<div style="flex: 4">所属水库</div>
|
<div style="flex: 4">报警类型</div>
|
<div style="flex: 7">报警时间</div>
|
</div>
|
<vue-seamless-scroll :class-option="classOption" :data="listData" class="scroll-table-body" style="height: 210px">
|
<ul class="item">
|
<li class="scroll-item flex" v-for="(item, index) in listData" :key="index">
|
<div style="flex: 2">{{ index + 1 }}</div>
|
<div style="flex: 4">{{ item.name }}</div>
|
<div style="flex: 4">{{ item.reservoir }}</div>
|
<div style="flex: 4">{{ item.type }}</div>
|
<div style="flex: 7;white-space: nowrap;">{{ item.time }}</div>
|
</li>
|
</ul>
|
</vue-seamless-scroll>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="right-container">
|
<div class="one">
|
<div class="title-box">
|
<div class="title">雨水情监测</div>
|
</div>
|
<div class="content-box rain-monitor-box">
|
<div class="flex justify-between">
|
<div class="rain-monitor-item">
|
<div class="item-title">水情监测</div>
|
<div style="width: 190px; height: 180px">
|
<waterMonitorLine></waterMonitorLine>
|
</div>
|
</div>
|
<div class="monitor-tab-section">
|
<div class="tab-wrap flex">
|
<div class="tab-item">当前水位</div>
|
<div class="tab-item">水位曲线</div>
|
</div>
|
<div class="info-section">
|
<div class="info-item">当前汛期：主汛期</div>
|
<div class="info-item">汛限水位：20m</div>
|
<div class="info-item">蓄水量：45m<sup>3</sup></div>
|
<div class="info-item">入库流量：11m<sup>3</sup>/s</div>
|
<div class="info-item">出库流量：11m<sup>3</sup>/s</div>
|
</div>
|
</div>
|
</div>
|
<div class="rain-monitor-item box-bottom">
|
<div class="item-title">雨情监测</div>
|
<div class="flex justify-between">
|
<div class="info-section">
|
<div class="info-item">今日降水：6.6 mm</div>
|
<div class="info-item">降水状态：小雨</div>
|
<div class="info-item">本月总蓄水：25241 万m<sup>3</sup></div>
|
</div>
|
<div style="width: 160px; height: 100px">
|
<rainMonitorLine></rainMonitorLine>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="two">
|
<div class="title-box">
|
<div class="title">库容曲线</div>
|
</div>
|
<div class="content-box">
|
<reservoir-capacity-line></reservoir-capacity-line>
|
</div>
|
</div>
|
|
<div class="three">
|
<div class="title-box">
|
<div class="title">泄流曲线</div>
|
</div>
|
<div class="content-box">
|
<water-flow-line></water-flow-line>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import reservoirCapacityLine from "./components/reservoirCapacityLine.vue";
|
import waterFlowLine from "./components/waterFlowLine.vue";
|
import rainMonitorLine from "./components/rainMonitorLine.vue";
|
import waterMonitorLine from "./components/waterMonitorLine.vue";
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
|
export default {
|
components: { vueSeamlessScroll, reservoirCapacityLine, waterFlowLine, rainMonitorLine, waterMonitorLine },
|
|
data() {
|
return {
|
listData: [
|
{
|
reservoir: "汪店水库",
|
name: '水位超汛限 ',
|
type: "监测点1",
|
time: '2023-3-29 16:49:49'
|
},
|
{
|
reservoir: "汪店水库",
|
name: '水位超汛限 ',
|
type: "监测点2",
|
time: '2023-3-29 16:49:49'
|
},
|
{
|
reservoir: "汪店水库",
|
name: '水位超汛限 ',
|
type: "监测点3",
|
time: '2023-3-29 16:49:49'
|
},
|
{
|
reservoir: "汪店水库",
|
name: '水位超汛限 ',
|
type: "监测点4",
|
time: '2023-3-29 16:49:49'
|
},
|
{
|
reservoir: "汪店水库",
|
name: '水位超汛限 ',
|
type: "监测点5",
|
time: '2023-3-29 16:49:49'
|
},
|
{
|
reservoir: "汪店水库",
|
name: '水位超汛限 ',
|
type: "监测点6",
|
time: '2023-3-29 16:49:49'
|
},
|
],
|
classOption: {
|
step: .2,
|
limitMoveNum: 6
|
}
|
};
|
},
|
|
created() {},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
|
},
|
|
destroyed() {},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.pageContainer {
|
.left-container {
|
left: 0;
|
|
.one {
|
height: 340px;
|
}
|
|
.two {
|
height: 210px;
|
}
|
|
.three {
|
flex: 1;
|
}
|
}
|
|
.right-container {
|
right: 0;
|
|
.one {
|
height: 470px;
|
}
|
|
.two {
|
height: 258px;
|
}
|
|
.three {
|
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>
|
