From 36c045a4f518f6506eab91e48ee48ce7d1aaa21d Mon Sep 17 00:00:00 2001
From: tengsx <tengsx1009@163.com>
Date: Fri, 07 Apr 2023 09:29:18 +0800
Subject: [PATCH] Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/hbwri/bigScreen
---
src/views/home/index.vue | 363 ++++++++++++++++++++++++++++-----------------------
1 files changed, 201 insertions(+), 162 deletions(-)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 2ca737c..c1eb088 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -10,180 +10,219 @@
-->
<template>
- <div class="container">
- <div class="left-container">
- <div class="one">
- <div class="title-box">
- <div class="title">标题名称</div>
- </div>
- <div class="content-box">
- <pie-echarts></pie-echarts>
- </div>
- </div>
-
- <div class="two">
- <div class="title-box">
- <div class="title">每日8时超汛限</div>
- </div>
- <div class="content-box">
- <bar-echarts></bar-echarts>
- </div>
- </div>
-
- <div class="three">
- <div class="title-box">
- <div class="title">连续10天超汛限</div>
- </div>
- <div class="content-box"></div>
- </div>
+ <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="right-container">
- <div class="one">
- <div class="title-box">
- <div class="title">水库数量分布</div>
- </div>
- <div class="content-box"></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="two">
- <div class="title-box">
- <div class="title">水库规模分布</div>
- </div>
- <div class="content-box"></div>
- </div>
-
- <div class="three">
- <div class="title-box">
- <div class="title">泄调洪水库数量</div>
- </div>
- <div class="content-box"></div>
- </div>
-
- <div class="four">
- <div class="title-box">
- <div class="title">降雨等级分布</div>
- </div>
- <div class="content-box"></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 pieEcharts from './components/pieEcharts.vue'
-import barEcharts from './components/barEcharts.vue'
+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: { pieEcharts ,barEcharts},
+ components: { vueSeamlessScroll, dayEightBar, reservoirCountBar, reservoirSizeBar, rainLevelPie },
- data () {
- return {
+ 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() {},
- created () {
+ mounted() {
+
+ },
- },
+ methods: {
- mounted () {
+
+ },
- },
-
- methods: {
-
- },
-
- destroyed () {
-
- },
-
-}
-</script>
-
-<style scoped lang="scss">
-.container {
- color: #fff;
- width: 100%;
-
- .left-container,
- .right-container {
- display: flex;
- flex-direction: column;
- position: absolute;
- top: 0;
- width: 408px;
- height: 100%;
- pointer-events: auto;
- background: rgba(28, 115, 195, 0.05);
-
- &>div {
- display: flex;
- flex-direction: column;
-
- .title-box {
- height: 38px;
- line-height: 38px;
- background: url(/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: #F6F9FE;
- text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
-
- background: linear-gradient(0deg, rgba(14, 197, 236, 0.36) 0%, rgba(49, 190, 255, 0.36) 0%, rgba(239, 252, 254, 0.36) 58.7646484375%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparen
- }
- }
-
- .content-box {
- flex: 1;
- }
- }
- }
-
- .left-container {
- left: 0;
-
- .one {
- height: 258px;
- }
-
- .two {
- height: 454px;
- }
-
- .three {
- flex: 1;
- }
- }
-
- .right-container {
- right: 0;
-
- .one {
- height: 266px;
- }
-
- .two {
- height: 260px;
- }
-
- .three {
- height: 210px;
- }
-
- .four {
- flex: 1;
- }
- }
-}
-</style>
+ destroyed() {},
+};
+</script>
\ No newline at end of file
--
Gitblit v1.9.3