From d50f9a2d262342ab6c39e8d3e5717ff381064572 Mon Sep 17 00:00:00 2001
From: tengsx <tengsx1009@163.com>
Date: Wed, 05 Apr 2023 22:39:35 +0800
Subject: [PATCH] page one
---
src/views/home/index.vue | 659 +++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 498 insertions(+), 161 deletions(-)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 2ca737c..badd386 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -10,180 +10,517 @@
-->
<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">
+ <div id="stackBarChart" style="width: 100%; height: 213px"></div>
+ <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">
+ <div id="barChart_01" style="width: 100%; height: 220px"></div>
+ </div>
+ </div>
+
+ <div class="two">
+ <div class="title-box">
+ <div class="title">水库规模分布</div>
+ </div>
+ <div class="content-box">
+ <div id="barChart_02" style="width: 100%; height: 210px"></div>
+ </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">
+ <div id="pie-chart" style="width: 100%; height: 210px"></div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
-import pieEcharts from './components/pieEcharts.vue'
-import barEcharts from './components/barEcharts.vue'
+import vueSeamlessScroll from "vue-seamless-scroll";
export default {
- components: { pieEcharts ,barEcharts},
+ components: { vueSeamlessScroll },
- 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() {},
+
+ mounted() {
+ let stackBarData = {
+ id: 'stackBarChart',
+ xAxisData: ["武汉市", "黄石市", "十堰市", "宜昌市", "襄阳市", "鄂州市", "荆门市", "孝感市"],
+ xAxisRotate: 30,
+ title: '总数 39座',
+ showLegend: true,
+ yAxisName: '数量',
+ series: [
+ {
+ name: "大型",
+ type: "bar",
+ stack: "one",
+ barWidth: 12,
+ data: ["20", "30", "15", "1", "10", "8", "5", "18"],
+ showBackground: true,
+ backgroundStyle: {
+ color: "rgba(187,230,245,.3)",
+ }
+ },
+ {
+ name: "中型",
+ type: "bar",
+ stack: "one",
+ data: ["2", "6", "5", "10", "10", "8", "5", "1"],
+ },
+ {
+ name: "小型",
+ type: "bar",
+ stack: "one",
+ data: ["3", "5", "1", "10", "3", "9", "15", "1"],
+ },
+ ],
+ }
+ this.createStackBarChart(stackBarData);
+ let barData_01 = {
+ id: 'barChart_01',
+ xAxisData: ["武汉市", "黄石市", "十堰市", "宜昌市", "襄阳市", "鄂州市", "荆门市", "孝感市"],
+ xAxisRotate: 30,
+ title: '',
+ showLegend: false,
+ yAxisName: '座',
+ series: [
+ {
+ name: "水库数量",
+ type: "bar",
+ color: '#63B7F9',
+ barWidth: 12,
+ data: ["20", "30", "15", "1", "10", "8", "5", "18"],
+ showBackground: true,
+ backgroundStyle: {
+ color: "rgba(187,230,245,.3)",
+ }
}
+ ]
+ }
+ this.createStackBarChart(barData_01);
+ let barData_02 = {
+ id: 'barChart_02',
+ xAxisData: ["大（1）型", "大（2）型", "中型", "小（1）型", "小（2）型"],
+ xAxisRotate: 0,
+ title: '',
+ showLegend: false,
+ yAxisName: '座',
+ series: [
+ {
+ name: "水库规模",
+ type: "bar",
+ color: '#81E79C',
+ barWidth: 12,
+ data: ["20", "30", "15", "1", "10", "8", "5", "18"],
+ showBackground: true,
+ backgroundStyle: {
+ color: "rgba(187,230,245,.3)",
+ }
+ }
+ ]
+ }
+ this.createStackBarChart(barData_02);
+ this.createPieChart()
+ },
+
+ methods: {
+ createStackBarChart(chartData) {
+ const myChart = this.$echarts.init(
+ document.getElementById(chartData.id)
+ );
+ // 指定图表的配置项和数据
+ var option = {
+ title: {
+ show: chartData.title != '',
+ text: chartData.title,
+ top: 10,
+ right: 20,
+ textStyle: {
+ color: "#BDD8F9",
+ fontSize: 16,
+ fontWeight: 400,
+ },
+ },
+ legend: {
+ show: chartData.showLegend,
+ top: 10,
+ itemWidth: 8,
+ itemHeight: 8,
+ itemGap: 20,
+ left: "center",
+ textStyle: {
+ color: "#B5C5D4",
+ fontSize: 14,
+ },
+ },
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow"
+ },
+ formatter: function (e) {
+ if (e.length > 0) {
+ var t = "".concat(e[0].name + " <br/>");
+ e.forEach((item) => {
+ t += item.marker + item.seriesName + ": " + item.value + " 座 <br/>"
+ })
+ return t
+ }
+ }
+ },
+ xAxis: {
+ data: chartData.xAxisData,
+ name: "",
+ axisLine: {
+ onZero: true,
+ lineStyle: {
+ color: "rgba(186, 198, 208, .4)",
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ rotate: chartData.xAxisRotate,
+ interval: 0,
+ fontSize: 14,
+ color: "#B5C5D4",
+ },
+ },
+ yAxis: {
+ name: chartData.yAxisName,
+ axisLabel: {
+ fontSize: 13,
+ color: "#B5C5D4",
+ },
+ nameTextStyle: {
+ fontSize: 14,
+ color: "#B5C5D4",
+ },
+ splitLine: {
+ lineStyle: {
+ color: ["#344B64"],
+ type: "dashed",
+ width: 2,
+ },
+ },
+ },
+ grid: {
+ left: 20,
+ right: 15,
+ top: 50,
+ bottom: 7,
+ containLabel: true,
+ },
+ series: chartData.series,
+ };
+
+ myChart.setOption(option);
},
-
- created () {
-
+ // 建言献策分析图表
+ createPieChart() {
+ let data = [
+ {
+ name: '特大暴雨',
+ value: 59
+ },
+ {
+ name: '大暴雨',
+ value: 20
+ },
+ {
+ name: '暴雨',
+ value: 281
+ }
+ ,
+ {
+ name: '大雨',
+ value: 59
+ }
+ ,
+ {
+ name: '中雨',
+ value: 29
+ }
+ ,
+ {
+ name: '小雨',
+ value: 281
+ }
+ ,
+ {
+ name: '无雨',
+ value: 281
+ }
+ ]
+ let total = data.reduce((prev, curr) => prev + curr.value, 0)
+ let dom = document.getElementById("pie-chart");
+ let pieChart = this.$echarts.init(dom);
+ let option = {
+ legend: {
+ orient: 'vertical',
+ left: '50%',
+ top: 15,
+ width: '100%',
+ itemGap: 10,
+ itemWidth: 8,
+ itemHeight: 8,
+ formatter: function (name) {
+ let value = 0
+ data.forEach((item) => {
+ if(item.name == name) {
+ value = item.value
+ }
+ })
+ return `${name} ${value}个 ${((value*100)/total).toFixed(2)}%`;
+ },
+ textStyle: {
+ color: '#fff',
+ fontSize: 16,
+ fontFamily: 'Roboto-Bold',
+ }
+ },
+ radar: [
+ {
+ indicator: [
+ { text: 'Indicator1' },
+ { text: 'Indicator2' },
+ { text: 'Indicator3' },
+ { text: 'Indicator4' },
+ { text: 'Indicator5' }
+ ],
+ center: ['25%', '50%'],
+ radius: '80%',
+ startAngle: 90,
+ splitNumber: 1,
+ shape: 'circle',
+ axisName: {
+ show: false,
+ },
+ splitArea: {
+ areaStyle: {
+ color: ['rgba(0, 0, 0, 0.2)'],
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(211, 253, 250, 0)'
+ }
+ },
+ splitLine: {
+ lineStyle: {
+ color: 'rgba(51, 114, 210, .5)'
+ }
+ }
+ },
+ ],
+ color: [
+ '#DB983F',
+ '#5D4EC5',
+ '#379CF2',
+ '#81E79C',
+ '#AA8A6E',
+ '#71E4D5',
+ '#CDE5FF',
+ ],
+ series: [
+ {
+ name: '降雨等级',
+ type: 'pie',
+ radius: ['50%', '65%'],
+ center: ['25%', '50%'],
+ label: {
+ show: true,
+ position: 'center',
+ color: '#D4E8F8',
+ fontSize: 34,
+ fontFamily: 'Roboto-Bold',
+ formatter: () => {
+ return total;
+ },
+ },
+ labelLine: {
+ show: false
+ },
+ itemStyle: {
+ borderRadius: 0
+ },
+ data
+ }
+ ]
+ };
+ pieChart.setOption(option);
},
+ },
- mounted () {
-
- },
-
- methods: {
-
- },
-
- destroyed () {
-
- },
-
-}
+ 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>
--
Gitblit v1.9.3