From 80eb2e8d0eb78caf0b5d369aba18f99ed1222b97 Mon Sep 17 00:00:00 2001
From: tengsx <tengsx1009@163.com>
Date: Thu, 06 Apr 2023 22:53:58 +0800
Subject: [PATCH] page 2 and 3
---
src/views/home/components/dayEightBar.vue | 160 +++
public/images/back-bg.png | 0
src/views/home/index_02.vue | 333 +++++++
src/views/home/components/rainMonitorLine.vue | 89 +
public/images/warnbg_02.png | 0
public/images/back.png | 0
src/views/home/index_03.vue | 280 +++++
public/images/device_02.png | 0
src/views/home/components/reservoirCapacityLine.vue | 133 ++
src/views/home/components/waterMonitorLine.vue | 113 ++
src/styles/index.scss | 395 +++++++
public/images/mode-tab.png | 0
src/router/page/index.js | 18
src/views/home/components/rainLevelPie.vue | 164 +++
src/views/home/components/waterFlowLine.vue | 133 ++
src/views/home/components/reservoirSizeBar.vue | 138 ++
src/views/home/components/reservoirFloodLine.vue | 164 +++
public/images/device_01.png | 0
src/views/home/components/reservoirCountBar.vue | 139 ++
public/images/rain-title.png | 0
public/images/warn_01.png | 0
public/images/warn_02.png | 0
src/views/home/index.vue | 324 ------
public/images/mode-tab-ac.png | 0
src/views/layout/index.vue | 183 +++
public/images/warnbg_01.png | 0
26 files changed, 2,431 insertions(+), 335 deletions(-)
diff --git a/public/images/back-bg.png b/public/images/back-bg.png
new file mode 100644
index 0000000..51e0ab8
--- /dev/null
+++ b/public/images/back-bg.png
Binary files differ
diff --git a/public/images/back.png b/public/images/back.png
new file mode 100644
index 0000000..7590be8
--- /dev/null
+++ b/public/images/back.png
Binary files differ
diff --git a/public/images/device_01.png b/public/images/device_01.png
new file mode 100644
index 0000000..98ea191
--- /dev/null
+++ b/public/images/device_01.png
Binary files differ
diff --git a/public/images/device_02.png b/public/images/device_02.png
new file mode 100644
index 0000000..347a541
--- /dev/null
+++ b/public/images/device_02.png
Binary files differ
diff --git "a/public/images/\347\273\274\345\220\210\344\277\241\346\201\257\345\261\225\347\216\260.png" b/public/images/mode-tab-ac.png
similarity index 100%
rename from "public/images/\347\273\274\345\220\210\344\277\241\346\201\257\345\261\225\347\216\260.png"
rename to public/images/mode-tab-ac.png
Binary files differ
diff --git "a/public/images/\346\234\252\351\200\211\344\270\255.png" b/public/images/mode-tab.png
similarity index 100%
rename from "public/images/\346\234\252\351\200\211\344\270\255.png"
rename to public/images/mode-tab.png
Binary files differ
diff --git a/public/images/rain-title.png b/public/images/rain-title.png
new file mode 100644
index 0000000..c07685b
--- /dev/null
+++ b/public/images/rain-title.png
Binary files differ
diff --git a/public/images/warn_01.png b/public/images/warn_01.png
new file mode 100644
index 0000000..6f313b0
--- /dev/null
+++ b/public/images/warn_01.png
Binary files differ
diff --git a/public/images/warn_02.png b/public/images/warn_02.png
new file mode 100644
index 0000000..b11534b
--- /dev/null
+++ b/public/images/warn_02.png
Binary files differ
diff --git a/public/images/warnbg_01.png b/public/images/warnbg_01.png
new file mode 100644
index 0000000..b7e5dec
--- /dev/null
+++ b/public/images/warnbg_01.png
Binary files differ
diff --git a/public/images/warnbg_02.png b/public/images/warnbg_02.png
new file mode 100644
index 0000000..e5419e6
--- /dev/null
+++ b/public/images/warnbg_02.png
Binary files differ
diff --git a/src/router/page/index.js b/src/router/page/index.js
index e404feb..c304cf9 100644
--- a/src/router/page/index.js
+++ b/src/router/page/index.js
@@ -12,6 +12,8 @@
const layout = () => import('../../views/layout/index.vue')
const home = () => import('../../views/home/index.vue')
+const home_02 = () => import('../../views/home/index_02.vue')
+const home_03 = () => import('../../views/home/index_03.vue')
const routes = [
{
@@ -32,7 +34,21 @@
title: '首页'
},
component: home
- }
+ },
+ {
+ path: 'home2',
+ meta: {
+ title: '首页'
+ },
+ component: home_02
+ },
+ {
+ path: 'home3',
+ meta: {
+ title: '首页'
+ },
+ component: home_03
+ }
]
},
diff --git a/src/styles/index.scss b/src/styles/index.scss
index bab44d4..b8d13bf 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -92,27 +92,7 @@
.one {
height: 258px;
position: relative;
- .content-data {
- padding-left: 18px;
- &>.common-text {
- margin-right: 8px
- }
- };
- .data-item {
- height: 26px;
- line-height: 26px;
- background: #879EC7;
- border-radius: 6px;
- padding: 0 15px;
- margin-right: 12px;
- }
- .more-text {
- position: absolute;
- color: #3BCAFF;
- right: 10px;
- bottom: 36px;
- cursor: pointer;
- }
+
}
.two {
@@ -142,6 +122,28 @@
.four {
flex: 1;
}
+ }
+ .content-data {
+ padding-left: 18px;
+ &>.common-text {
+ margin-right: 8px
+ }
+ .data-item {
+ height: 26px;
+ line-height: 26px;
+ background: #879EC7;
+ border-radius: 6px;
+ padding: 0 15px;
+ margin-right: 12px;
+ }
+ };
+
+ .more-text {
+ position: absolute;
+ color: #3BCAFF;
+ right: 10px;
+ bottom: 36px;
+ cursor: pointer;
}
.scroll-table {
font-family: Alibaba PuHuiTi;
@@ -226,7 +228,7 @@
cursor: pointer;
}
.btn-left {
- background-image: url(./../../public/images/ctrl-left.png);
+ background-image: url(/images/ctrl-left.png);
}
.btn-right {
margin-left: 3px ;
@@ -261,4 +263,353 @@
color: #B5C5D4;
}
}
+ .video-box {
+ padding: 5px 12px 0;
+ video {
+ width: 100%;
+ height: 185px;
+ background-color: #333;
+ }
+ }
+ .all-text-box {
+ position: relative;
+ .more-text {
+ right: 24px
+ }
+ }
+ .all-text {
+ color: #D4E8F8;
+ padding: 12px 18px 0 18px;
+ line-height: 26px;
+ text-indent: 32px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 5;
+ -webkit-box-orient: vertical;
+ }
+ .detail-box {
+ padding: 12px;
+ img {
+ height: 180px;
+ width: 100%;
+ }
+ .all-text{
+ -webkit-line-clamp: 3;
+ text-indent: 0;
+ }
+ }
+ .device-box {
+ padding: 15px 8px 0;
+ align-items: flex-start;
+ .device-item {
+ width: 110px;
+ height: 113px;
+ text-align: center;
+ background-image: url(/images/device_01.png);
+ background-size: 100% 100%;
+ padding-top: 20px;
+ &:nth-of-type(2) {
+ background-image: url(/images/device_02.png);
+ .item-title {
+ color: #AED6FF;
+ }
+ .item-num {
+ background: linear-gradient(to bottom, #FFF9C5 10%, #FFD24D 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+ }
+ }
+ .item-title {
+ color: #44C1EF;
+ line-height: 1;
+ text-shadow: 1px 2px 0px rgba(17,20,22,0.22);
+ font-size: 16px;
+ font-weight: bold;
+ }
+ .item-num {
+ margin-top: 5px;
+ font-size: 28px;
+ font-family: Roboto-Bold;
+ font-weight: bold;
+ font-style: italic;
+ color: #EDFBFF;
+ background: linear-gradient(to bottom, #8CEAFF 10%, rgba(255,255,255,1) 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+ }
+ .warning-box {
+ padding: 0 5px;
+ img {
+ width: 101px;
+ height: 90px;
+ }
+ .warning-item {
+ flex: 1;
+ }
+ .item-title {
+ width: 100px;
+ line-height: 32px;
+ text-indent:32px;
+ position: relative;
+ left: -28px;
+ color: #fff;
+ font-size: 18px;
+ background-image: url(/images/warnbg_01.png);
+ background-repeat: no-repeat;
+ background-position: left bottom;
+ background-size: 100px 18px;
+ }
+ .item-num {
+ height: 31.5px;
+ width: 84px;
+ margin-top: 5px;
+ font-size: 28px;
+ font-family: Roboto-Bold;
+ font-weight: bold;
+ font-style: italic;
+ background-image: url(/images/warnbg_02.png);
+ background-size: cover;
+ span {
+ width: 100%;
+ background: linear-gradient(to right, #76B2EC 30%, rgba(255,255,255,1) 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+ }
+ .el-carousel__indicators--horizontal {
+ bottom: 5px
+ }
+ .el-carousel__button {
+ height: 4px;
+ border-radius: 2px;
+ width: 40px;
+ }
+ }
+ .rain-monitor-box {
+ padding: 12px 15px;
+ .item-title {
+ text-indent: 15px;
+ position: relative;
+ line-height: 20px;
+ font-size: 20px;
+ text-shadow: 0px 2px 8px rgba(5,28,55,0.42);
+ background: linear-gradient(to bottom, rgba(14,197,236, .6) 0%, #EFFCFE 20%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 1px;
+ width: 4px;
+ height: 18px;
+ background-image: url(/images/rain-title.png);
+ }
+ }
+ .info-item {
+ padding-left: 20px;
+ font-size: 16px;
+ color: #BFD3E5;
+ margin-top: 20px;
+ }
+ .box-bottom {
+ margin-top: 20px;
+ }
+ .monitor-tab-section {
+ .info-item {
+ margin-top: 18px;
+ }
+ }
+ &>.justify-between {
+ align-items: flex-start;
+ }
+ .tab-item {
+ font-size: 16px;
+ color: #BFD3E5;
+ cursor: pointer;
+ background: rgba(55,75,123,0.36);
+ &:first-of-type {
+ margin-right: 20px;
+ }
+ }
+ }
+}
+.page-search {
+ position: absolute;
+ left: 488px;
+ z-index: 99;
+ top: 110px;
+ .el-input {
+ height: 38px;
+ width: 280px;
+ }
+ .el-input__inner {
+ padding-right: 30px;
+ font-size: 16px;
+ font-weight: 400;
+ color: #BFD3E5;
+ border: 1px solid #4081CB;
+ border-radius: 4px;
+ background: rgba(135,158,199,0.3);
+ box-shadow: inset 0px 3px 7px 0px rgba(42,138,236,0.95);
+ }
+}
+.page-select {
+ left: 788px;
+ .el-input {
+ width: 120px;
+ }
+}
+.select-popup {
+ border: 1px solid #4081CB;
+ background: rgba(0,0,0,1);
+ box-shadow: inset 0px 3px 7px 0px rgba(42,138,236,0.95);
+ .el-cascader-menu {
+ color: #fff;
+ }
+ .el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {
+ background: rgba(42,138,236,0.35)
+ }
+ .el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {
+ background: rgba(42,138,236,0.35)
+ }
+}
+.page-full {
+ top: auto;
+ bottom: 55px;
+ width: 80px;
+ height: 30px;
+ background: rgba(135,158,199,0.2);
+ border-radius: 6px;
+ font-size: 16px;
+ color: #BFD3E5;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ line-height: 1;
+ .el-icon-rank {
+ font-size: 20px;
+ margin-right: 5px;
+ }
+}
+.page-mode {
+ top: auto;
+ bottom: 55px;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ &>div {
+ background-image: url(/images/mode-tab.png);
+ background-size: cover;
+ width: 150px;
+ height: 50px;
+ font-size: 16px;
+ text-align: center;
+ font-weight: bold;
+ color: #BFD3E5;
+ line-height: 32px;
+ padding-top: 12px;
+ font-style: italic;
+ cursor: pointer;
+ &:first-of-type {
+ margin-right: -20px;
+ }
+ &.active {
+ color: #F6FCFF;
+ background-image: url(/images/mode-tab-ac.png);
+ }
+ }
+}
+.page-map {
+ position: absolute;
+ z-index: 99;
+ bottom: 55px;
+ right: 488px;
+ width: 100px;
+ height: 220px;
+ background: rgba(135,158,199,0.2);
+ border-radius: 6px;
+ padding: 10px;
+ &>div {
+ height: 60px;
+ background: #879EC7;
+ border: 1px solid #3BCAFF;
+ border-radius: 6px;
+ margin-bottom: 10px;
+ cursor: pointer;
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+ }
+}
+.page-section {
+ left: auto;
+ right: 488px;
+ width: 160px;
+ .el-collapse-item__header{
+ height: 40px;
+ background: rgba(135,158,199,0.1);
+ border: 0;
+ padding-left: 10px;
+ font-size: 18px;
+ color: rgba(191, 211, 229, 0.7);
+ &.is-active {
+ background: rgba(13,43,84,0.76);
+ }
+ }
+ .el-collapse-item__arrow {
+ color: rgba(199,219,245,0.88);
+ &::before {
+ content: "\e790";
+ }
+ }
+ .el-collapse-item__arrow.is-active {
+ color: #2CB7FF;
+ &::before {
+ content: "\e792";
+ }
+ }
+ .el-collapse-item__wrap {
+ background: rgba(135,158,199,0.3);
+ border: 0;
+ }
+ .el-collapse-item__content {
+ padding-bottom: 0;
+ }
+ .check-item {
+ padding-left: 10px;
+ height: 40px;
+ font-weight: 500;
+
+ font-size: 18px;
+ display: flex;
+ align-items: center;
+ .el-checkbox__label {
+ color: rgba(191, 211, 229, 0.7);
+ }
+ .is-checked {
+ .el-checkbox__label {
+ color: #3BCAFF;
+ }
+ }
+ }
+}
+.page-back {
+ min-width: 182px;
+ height: 50px;
+ background-image: url(/images/back-bg.png);
+ background-size: cover;
+ display: flex;
+ align-items: center;
+ img {
+ height: 100%;
+ }
+ div {
+ font-size: 26px;
+ color: #BFD3E5;
+ }
}
\ No newline at end of file
diff --git a/src/views/home/components/dayEightBar.vue b/src/views/home/components/dayEightBar.vue
new file mode 100644
index 0000000..3972262
--- /dev/null
+++ b/src/views/home/components/dayEightBar.vue
@@ -0,0 +1,160 @@
+
+<template>
+ <div class="echarts-box" id="stackBarChart">
+
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ myChart: null
+ }
+ },
+
+ mounted() {
+ let stackBarData = {
+ xAxisData: ["武汉市", "黄石市", "十堰市", "宜昌市", "襄阳市", "鄂州市", "荆门市", "孝感市"],
+ seriesData_01: ["20", "30", "15", "1", "10", "8", "5", "18"],
+ seriesData_02: ["2", "6", "5", "10", "10", "8", "5", "1"],
+ seriesData_03: ["3", "5", "1", "10", "3", "9", "15", "1"]
+ }
+ this.$nextTick(() => {
+ this.createStackBarChart(stackBarData)
+ })
+ },
+ destroyed() {
+
+ },
+ methods: {
+ createStackBarChart(chartData) {
+ if(!this.myChart) {
+ this.myChart = this.$echarts.init(
+ document.getElementById('stackBarChart')
+ );
+ }
+
+ // 指定图表的配置项和数据
+ var option = {
+ title: {
+ text: '总数 39座',
+ top: 10,
+ right: 20,
+ textStyle: {
+ color: "#BDD8F9",
+ fontSize: 16,
+ fontWeight: 400,
+ },
+ },
+ legend: {
+ show: true,
+ 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: 30,
+ interval: 0,
+ fontSize: 14,
+ color: "#B5C5D4",
+ },
+ },
+ yAxis: {
+ name: '数量',
+ 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: [
+ {
+ name: "大型",
+ type: "bar",
+ stack: "one",
+ barWidth: 12,
+ data: chartData.seriesData_01,
+ showBackground: true,
+ backgroundStyle: {
+ color: "rgba(187,230,245,.3)",
+ }
+ },
+ {
+ name: "中型",
+ type: "bar",
+ stack: "one",
+ data: chartData.seriesData_02,
+ },
+ {
+ name: "小型",
+ type: "bar",
+ stack: "one",
+ data: chartData.seriesData_03
+ },
+ ],
+ };
+
+ this.myChart.setOption(option);
+ },
+
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.echarts-box {
+ width: 100%;
+ height: 213px;
+}
+</style>
diff --git a/src/views/home/components/rainLevelPie.vue b/src/views/home/components/rainLevelPie.vue
new file mode 100644
index 0000000..8860290
--- /dev/null
+++ b/src/views/home/components/rainLevelPie.vue
@@ -0,0 +1,164 @@
+
+<template>
+ <div class="echarts-box" id="rainLevelPieChart"></div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ myChart: null,
+ };
+ },
+
+ mounted() {
+ this.$nextTick(() => {
+ this.createPieChart();
+ });
+ },
+ destroyed() {},
+ methods: {
+ 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);
+ if(!this.myChart) {
+ this.myChart = this.$echarts.init(
+ document.getElementById('rainLevelPieChart')
+ );
+ }
+ 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,
+ },
+ ],
+ };
+ this.myChart.setOption(option);
+ },
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+.echarts-box {
+ width: 100%;
+ height: 210px;
+}
+</style>
diff --git a/src/views/home/components/rainMonitorLine.vue b/src/views/home/components/rainMonitorLine.vue
new file mode 100644
index 0000000..0c256db
--- /dev/null
+++ b/src/views/home/components/rainMonitorLine.vue
@@ -0,0 +1,89 @@
+
+<template>
+ <div class="echarts-box" id="rainLineChart">
+
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ myChart: null
+ }
+ },
+
+ mounted() {
+ let stackBarData = {
+ xAxisData: ["4-1", "4-2", "4-3", "4-4", "4-5", "4-6", "4-7", "4-8"],
+ seriesData: [820, 932, 901, 934, 1290, 1330, 1320,1320,1320],
+ }
+ this.$nextTick(() => {
+ this.createAreaLine(stackBarData)
+ })
+ },
+ destroyed() {
+
+ },
+ methods: {
+ createAreaLine(chartData) {
+ this.myChart = this.$echarts.init(
+ document.getElementById('rainLineChart')
+ );
+ let option = {
+ xAxis: {
+ show: true,
+ type: 'category',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ widht: 2,
+ color: '#EA7629'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: false
+ },
+ data: chartData.xAxisData
+ },
+ yAxis: {
+ show: false,
+ type: 'value'
+ },
+ grid: {
+ left: 0,
+ right: 0,
+ top: 0,
+ bottom: 2,
+ },
+ series: [
+ {
+ data: chartData.seriesData,
+ type: 'line',
+ symbol: 'none',
+ lineStyle: {
+ widht: 2,
+ color: '#EA7629'
+ },
+ areaStyle: {
+ color: 'rgba(234,118,41,0.5)'
+ }
+ }
+ ]
+ };
+ this.myChart.setOption(option)
+ }
+
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.echarts-box {
+ width: 100%;
+ height: 100%;
+}
+</style>
diff --git a/src/views/home/components/reservoirCapacityLine.vue b/src/views/home/components/reservoirCapacityLine.vue
new file mode 100644
index 0000000..dd4d169
--- /dev/null
+++ b/src/views/home/components/reservoirCapacityLine.vue
@@ -0,0 +1,133 @@
+
+<template>
+ <div class="echarts-box" id="capacityLineChart">
+
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ myChart: null
+ }
+ },
+
+ mounted() {
+ let stackBarData = {
+ xAxisData: ["4-1", "4-2", "4-3", "4-4", "4-5", "4-6", "4-7"],
+ seriesData: ["20", "30", "15", "14", "10", "8", "5", "18"],
+ }
+ this.$nextTick(() => {
+ this.createStackBarChart(stackBarData)
+ })
+ },
+ destroyed() {
+
+ },
+ methods: {
+ createStackBarChart(chartData) {
+ if(!this.myChart) {
+ this.myChart = this.$echarts.init(
+ document.getElementById('capacityLineChart')
+ );
+ }
+
+ // 指定图表的配置项和数据
+ var option = {
+ legend: {
+ show: false,
+ top: 5,
+ 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: {
+ interval: 0,
+ fontSize: 14,
+ color: "#B5C5D4",
+ },
+ },
+ yAxis: {
+ name: '数量',
+ axisLabel: {
+ fontSize: 13,
+ color: "#B5C5D4",
+ },
+ nameTextStyle: {
+ fontSize: 14,
+ color: "#B5C5D4",
+ },
+ splitLine: {
+ lineStyle: {
+ color: ["#344B64"],
+ type: "dashed",
+ width: 2,
+ },
+ },
+ },
+ grid: {
+ left: 20,
+ right: 15,
+ top: 40,
+ bottom: 15,
+ containLabel: true,
+ },
+ series: [
+ {
+ name: "库容",
+ type: "line",
+ data: chartData.seriesData,
+ symbol: 'none',
+ lineStyle: {
+ color: '#81E79C'
+ }
+ }
+ ],
+ };
+
+ this.myChart.setOption(option);
+ },
+
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.echarts-box {
+ width: 100%;
+ height: 220px;
+}
+</style>
diff --git a/src/views/home/components/reservoirCountBar.vue b/src/views/home/components/reservoirCountBar.vue
new file mode 100644
index 0000000..3020ed7
--- /dev/null
+++ b/src/views/home/components/reservoirCountBar.vue
@@ -0,0 +1,139 @@
+
+<template>
+ <div class="echarts-box" id="countBarChart">
+
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ myChart: null
+ }
+ },
+
+ mounted() {
+ let barData = {
+ xAxisData: ["武汉市", "黄石市", "十堰市", "宜昌市", "襄阳市", "鄂州市", "荆门市", "孝感市"],
+ seriesData: ["20", "30", "15", "1", "10", "8", "5", "18"]
+ }
+ this.$nextTick(() => {
+ this.createBarChart(barData)
+ })
+ },
+ destroyed() {
+
+ },
+ methods: {
+ createBarChart(chartData) {
+ if(!this.myChart) {
+ this.myChart = this.$echarts.init(
+ document.getElementById('countBarChart')
+ );
+ }
+
+ // 指定图表的配置项和数据
+ var option = {
+ title: {
+ show: false
+ },
+ legend: {
+ show: false,
+ 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: 30,
+ interval: 0,
+ fontSize: 14,
+ color: "#B5C5D4",
+ },
+ },
+ yAxis: {
+ name: '座',
+ 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: [
+ {
+ name: "水库数量",
+ type: "bar",
+ color: '#63B7F9',
+ barWidth: 12,
+ data: chartData.seriesData,
+ showBackground: true,
+ backgroundStyle: {
+ color: "rgba(187,230,245,.3)",
+ }
+ }
+ ],
+ };
+
+ this.myChart.setOption(option);
+ },
+
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.echarts-box {
+ width: 100%;
+ height: 220px;
+}
+</style>
diff --git a/src/views/home/components/reservoirFloodLine.vue b/src/views/home/components/reservoirFloodLine.vue
new file mode 100644
index 0000000..5d34c7b
--- /dev/null
+++ b/src/views/home/components/reservoirFloodLine.vue
@@ -0,0 +1,164 @@
+
+<template>
+ <div class="echarts-box" id="floodLineChart">
+
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ myChart: null
+ }
+ },
+
+ mounted() {
+ let stackBarData = {
+ xAxisData: ["4-1", "4-2", "4-3", "4-4", "4-5", "4-6", "4-7", "4-8"],
+ seriesData_01: ["20", "30", "15", "14", "10", "8", "5", "18"],
+ seriesData_02: ["12", "16", "10", "8", "6", "4", "3", "13"],
+ seriesData_03: ["6", "10", "3", "4", "3", "3", "1", "4"],
+ seriesData_04: ["2", "4", "2", "2", "1", "1", "1", "1"]
+ }
+ this.$nextTick(() => {
+ this.createStackBarChart(stackBarData)
+ })
+ },
+ destroyed() {
+
+ },
+ methods: {
+ createStackBarChart(chartData) {
+ if(!this.myChart) {
+ this.myChart = this.$echarts.init(
+ document.getElementById('floodLineChart')
+ );
+ }
+
+ // 指定图表的配置项和数据
+ var option = {
+ legend: {
+ show: true,
+ top: 5,
+ 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: 30,
+ interval: 0,
+ fontSize: 14,
+ color: "#B5C5D4",
+ },
+ },
+ yAxis: {
+ name: '座',
+ axisLabel: {
+ fontSize: 13,
+ color: "#B5C5D4",
+ },
+ nameTextStyle: {
+ fontSize: 14,
+ color: "#B5C5D4",
+ },
+ splitLine: {
+ lineStyle: {
+ color: ["#344B64"],
+ type: "dashed",
+ width: 2,
+ },
+ },
+ },
+ grid: {
+ left: 20,
+ right: 15,
+ top: 40,
+ bottom: 7,
+ containLabel: true,
+ },
+ series: [
+ {
+ name: "总数",
+ type: "line",
+ data: chartData.seriesData_01,
+ symbol: 'none',
+ lineStyle: {
+ color: '#6152C7'
+ }
+ },
+ {
+ name: "小库",
+ type: "line",
+ symbol: 'none',
+ data: chartData.seriesData_02,
+ lineStyle: {
+ color: '#81E79C'
+ }
+ },
+ {
+ name: "中库",
+ type: "line",
+ symbol: 'none',
+ data: chartData.seriesData_03,
+ lineStyle: {
+ color: '#1C73C3'
+ }
+ },
+ {
+ name: "大库",
+ type: "line",
+ symbol: 'none',
+ data: chartData.seriesData_04,
+ lineStyle: {
+ color: '#F4B34E'
+ }
+ },
+ ],
+ };
+
+ this.myChart.setOption(option);
+ },
+
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.echarts-box {
+ width: 100%;
+ height: 220px;
+}
+</style>
diff --git a/src/views/home/components/reservoirSizeBar.vue b/src/views/home/components/reservoirSizeBar.vue
new file mode 100644
index 0000000..81a1160
--- /dev/null
+++ b/src/views/home/components/reservoirSizeBar.vue
@@ -0,0 +1,138 @@
+
+<template>
+ <div class="echarts-box" id="sizeBarChart">
+
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ myChart: null
+ }
+ },
+
+ mounted() {
+ let barData = {
+ xAxisData: ["大（1）型", "大（2）型", "中型", "小（1）型", "小（2）型"],
+ seriesData: ["20", "30", "15", "1", "10", "8", "5", "18"]
+ }
+ this.$nextTick(() => {
+ this.createBarChart(barData)
+ })
+ },
+ destroyed() {
+
+ },
+ methods: {
+ createBarChart(chartData) {
+ if(!this.myChart) {
+ this.myChart = this.$echarts.init(
+ document.getElementById('sizeBarChart')
+ );
+ }
+
+ // 指定图表的配置项和数据
+ var option = {
+ title: {
+ show: false
+ },
+ legend: {
+ show: false,
+ 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: {
+ interval: 0,
+ fontSize: 14,
+ color: "#B5C5D4",
+ },
+ },
+ yAxis: {
+ name: '座',
+ 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: [
+ {
+ 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.myChart.setOption(option);
+ },
+
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.echarts-box {
+ width: 100%;
+ height: 210px;
+}
+</style>
diff --git a/src/views/home/components/waterFlowLine.vue b/src/views/home/components/waterFlowLine.vue
new file mode 100644
index 0000000..3a45873
--- /dev/null
+++ b/src/views/home/components/waterFlowLine.vue
@@ -0,0 +1,133 @@
+
+<template>
+ <div class="echarts-box" id="flowLineChart">
+
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ myChart: null
+ }
+ },
+
+ mounted() {
+ let stackBarData = {
+ xAxisData: ["4-1", "4-2", "4-3", "4-4", "4-5", "4-6", "4-7"],
+ seriesData: ["20", "30", "15", "14", "10", "8", "5", "18"],
+ }
+ this.$nextTick(() => {
+ this.createStackBarChart(stackBarData)
+ })
+ },
+ destroyed() {
+
+ },
+ methods: {
+ createStackBarChart(chartData) {
+ if(!this.myChart) {
+ this.myChart = this.$echarts.init(
+ document.getElementById('flowLineChart')
+ );
+ }
+
+ // 指定图表的配置项和数据
+ var option = {
+ legend: {
+ show: false,
+ top: 5,
+ 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: {
+ interval: 0,
+ fontSize: 14,
+ color: "#B5C5D4",
+ },
+ },
+ yAxis: {
+ name: '数量',
+ axisLabel: {
+ fontSize: 13,
+ color: "#B5C5D4",
+ },
+ nameTextStyle: {
+ fontSize: 14,
+ color: "#B5C5D4",
+ },
+ splitLine: {
+ lineStyle: {
+ color: ["#344B64"],
+ type: "dashed",
+ width: 2,
+ },
+ },
+ },
+ grid: {
+ left: 20,
+ right: 15,
+ top: 40,
+ bottom: 15,
+ containLabel: true,
+ },
+ series: [
+ {
+ name: "流量",
+ type: "line",
+ data: chartData.seriesData,
+ symbol: 'none',
+ lineStyle: {
+ color: '#63B7F9'
+ }
+ }
+ ],
+ };
+
+ this.myChart.setOption(option);
+ },
+
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.echarts-box {
+ width: 100%;
+ height: 220px;
+}
+</style>
diff --git a/src/views/home/components/waterMonitorLine.vue b/src/views/home/components/waterMonitorLine.vue
new file mode 100644
index 0000000..d636321
--- /dev/null
+++ b/src/views/home/components/waterMonitorLine.vue
@@ -0,0 +1,113 @@
+
+<template>
+ <div class="echarts-box" id="waterLineChart">
+
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ myChart: null
+ }
+ },
+
+ mounted() {
+ let stackBarData = {
+ xAxisData: ["4-1", "4-2", "4-3", "4-4", "4-5", "4-6", "4-7", "4-8"],
+ seriesData: [820, 932, 901, 934, 1290, 1330, 1320,1320,1320],
+ }
+ this.$nextTick(() => {
+ this.createAreaLine(stackBarData)
+ })
+ },
+ destroyed() {
+
+ },
+ methods: {
+ createAreaLine(chartData) {
+ this.myChart = this.$echarts.init(
+ document.getElementById('waterLineChart')
+ );
+ let option = {
+ xAxis: {
+ show: true,
+ type: 'category',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ widht: 2,
+ color: 'rgba(43,163,255,1)'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: false
+ },
+ data: chartData.xAxisData
+ },
+ yAxis: {
+ show: false,
+ type: 'value'
+ },
+ grid: {
+ left: 0,
+ right: 0,
+ top: 40,
+ bottom: 2,
+ },
+ series: [
+ {
+ data: chartData.seriesData,
+ type: 'line',
+ symbol: 'none',
+ smooth: true,
+ lineStyle: {
+ widht: 2,
+ color: 'rgba(43,163,255,1)'
+ },
+ areaStyle: {
+ color: 'rgba(43,163,255,0.5)'
+ },
+ markLine: {
+ silent: true,
+ symbol: 'none',
+ label: {
+ position: 'middle',
+ color: '#FFF',
+ fontSize: 12
+ },
+ data: [
+ {
+ yAxis: 500,
+ label: {
+ formatter: '临界值500'
+ }
+ },
+ {
+ yAxis: 1000
+ },
+ {
+ yAxis: 1500
+ }
+ ]
+ }
+ }
+ ]
+ };
+ this.myChart.setOption(option)
+ }
+
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.echarts-box {
+ width: 100%;
+ height: 100%;
+}
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index badd386..c1eb088 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -37,7 +37,7 @@
<div class="title">每日8时超汛限</div>
</div>
<div class="content-box chart-box">
- <div id="stackBarChart" style="width: 100%; height: 213px"></div>
+ <day-eight-bar></day-eight-bar>
<div class="scroll-table">
<div class="scroll-table-head flex">
<div>名称</div>
@@ -107,7 +107,7 @@
<div class="title">水库数量分布</div>
</div>
<div class="content-box">
- <div id="barChart_01" style="width: 100%; height: 220px"></div>
+ <reservoir-count-bar></reservoir-count-bar>
</div>
</div>
@@ -116,7 +116,7 @@
<div class="title">水库规模分布</div>
</div>
<div class="content-box">
- <div id="barChart_02" style="width: 100%; height: 210px"></div>
+ <reservoir-size-bar></reservoir-size-bar>
</div>
</div>
@@ -151,7 +151,7 @@
<div class="title">降雨等级分布</div>
</div>
<div class="content-box">
- <div id="pie-chart" style="width: 100%; height: 210px"></div>
+ <rain-level-pie></rain-level-pie>
</div>
</div>
</div>
@@ -159,10 +159,15 @@
</template>
<script>
+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: { vueSeamlessScroll },
+ components: { vueSeamlessScroll, dayEightBar, reservoirCountBar, reservoirSizeBar, rainLevelPie },
data() {
return {
@@ -210,317 +215,14 @@
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);
- },
- // 建言献策分析图表
- 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);
- },
+
},
destroyed() {},
};
-</script>
+</script>
\ No newline at end of file
diff --git a/src/views/home/index_02.vue b/src/views/home/index_02.vue
new file mode 100644
index 0000000..4e5e854
--- /dev/null
+++ b/src/views/home/index_02.vue
@@ -0,0 +1,333 @@
+<!--
+ * @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 class="title-sub common-text">3-30</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" style="height: 204px">
+ <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.area }}</div>
+ <div style="flex: 3">{{ item.scale }}</div>
+ <div style="flex: 4">
+ <span>{{ item.waterLevel }}</span>
+ </div>
+ <div style="flex: 3">{{ item.limit }}</div>
+ </li>
+ </ul>
+ </vue-seamless-scroll>
+ </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">
+ <reservoir-flood-line></reservoir-flood-line>
+ </div>
+ </div>
+ </div>
+
+ <div class="right-container">
+ <div class="one">
+ <div class="title-box">
+ <div class="title">水库水情快报</div>
+ </div>
+ <div class="content-box all-text-box">
+ <div class="all-text common-text">
+ 3月30日8时,全首有39座水库超汛限水位，其中大型0座、中型1座、小型38座。
+ 与昨日比较，总数增加1座(大型增加0座、中型增加O座、小型增加1座),
+ 减少座数较多的市有宜昌市,孝感市,恩施州分别减少1座,1座,1座。
+ 新增座券较多的市州有襄阳市,随州市分别新增3座,
+ </div>
+ <div class="common-text more-text">详情>></div>
+ </div>
+ </div>
+
+ <div class="two">
+ <div class="title-box">
+ <div class="title">视频</div>
+ </div>
+ <div class="content-box video-box">
+ <video preload="auto" controls src=""></video>
+ </div>
+ </div>
+
+ <div class="three">
+ <div class="title-box">
+ <div class="title">责任履职不到位</div>
+ </div>
+ <div class="content-box">
+ <div class="scroll-table">
+ <div class="scroll-table-head flex">
+ <div>行政区</div>
+ <div>名称</div>
+ <div>巡查责任人</div>
+ <div>抽查结果</div>
+ </div>
+ <vue-seamless-scroll :class-option="classOption" :data="listData1" class="scroll-table-body">
+ <ul class="item">
+ <li class="scroll-item flex" v-for="(item, index) in listData1" :key="index">
+ <div class="">{{ item.area }}</div>
+ <div class="">{{ item.name }}</div>
+ <div class="">{{ item.man }}</div>
+ <div class="flex justify-center">
+ <span>{{ item.result }}</span>
+ </div>
+ </li>
+ </ul>
+ </vue-seamless-scroll>
+ </div>
+ </div>
+ </div>
+
+ <div class="four">
+ <div class="title-box">
+ <div class="title">超汛水库分布</div>
+ </div>
+ <div class="content-box">
+ <reservoir-count-bar></reservoir-count-bar>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import dayEightBar from "./components/dayEightBar.vue";
+import reservoirCountBar from "./components/reservoirCountBar.vue";
+import vueSeamlessScroll from "vue-seamless-scroll";
+import reservoirFloodLine from './components/reservoirFloodLine.vue';
+
+
+export default {
+ components: { vueSeamlessScroll, dayEightBar, reservoirFloodLine, reservoirCountBar },
+
+ data() {
+ return {
+ classOption0: {
+ step: .2,
+ limitMoveNum: 5
+ },
+ listData0: [
+ {
+ name: "汪店水库",
+ area: '杨河镇',
+ scale: "小（1）型",
+ waterLevel: '62.77/0.27',
+ limit: '9'
+ },
+ {
+ name: "汪店水库",
+ area: '杨河镇',
+ scale: "小（1）型",
+ waterLevel: '62.77/0.27',
+ limit: '9'
+ },
+ {
+ name: "汪店水库",
+ area: '杨河镇',
+ scale: "小（1）型",
+ waterLevel: '62.77/0.27',
+ limit: '9'
+ },
+ {
+ name: "汪店水库",
+ area: '杨河镇',
+ scale: "小（1）型",
+ waterLevel: '62.77/0.27',
+ limit: '9'
+ },
+ {
+ name: "汪店水库",
+ area: '杨河镇',
+ scale: "小（1）型",
+ waterLevel: '62.77/0.27',
+ limit: '9'
+ },
+ ],
+ 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
+ },
+ listData1: [
+ {
+ area: '武汉市',
+ name: '水位超汛限',
+ man: '李艺伟1',
+ result: '优秀'
+ },
+ {
+ area: '武汉市',
+ name: '水位超汛限',
+ man: '李艺伟2',
+ result: '优秀'
+ },
+ {
+ area: '武汉市',
+ name: '水位超汛限',
+ man: '李艺伟3',
+ result: '优秀'
+ },
+ {
+ area: '武汉市',
+ name: '水位超汛限',
+ man: '李艺伟4',
+ result: '优秀'
+ },
+ ]
+ };
+ },
+
+ created() {},
+
+ mounted() {
+
+ },
+
+ methods: {
+
+
+ },
+
+ destroyed() {},
+};
+</script>
+<style lang="scss" scoped>
+ .pageContainer {
+ .left-container {
+ left: 0;
+
+ .one {
+ height: 290px;
+ }
+
+ .two {
+ height: 454px;
+ }
+
+ .three {
+ flex: 1;
+ }
+ }
+
+ .right-container {
+ right: 0;
+
+ .one {
+ height: 244px;
+ }
+
+ .two {
+ height: 255px;
+ }
+
+ .three {
+ height: 246px;
+ }
+ .four {
+ 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>
\ No newline at end of file
diff --git a/src/views/home/index_03.vue b/src/views/home/index_03.vue
new file mode 100644
index 0000000..1f9ca54
--- /dev/null
+++ b/src/views/home/index_03.vue
@@ -0,0 +1,280 @@
+<!--
+ * @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>
\ No newline at end of file
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index ddd68d6..55fee32 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -26,6 +26,51 @@
</div>
</div>
</map-box>
+ <div class="page-search" v-if="!showBack">
+ <el-input
+ size="medium"
+ placeholder="请输入内容"
+ suffix-icon="el-icon-search"
+ @change="onSearch()"
+ v-model="searchVal">
+ </el-input>
+ </div>
+ <div class="page-search page-select" v-if="!showBack">
+ <el-cascader
+ size="medium"
+ v-model="value"
+ :options="options"
+ popper-class="select-popup"
+ :show-all-levels="false"
+ @change="selectChange">
+ </el-cascader>
+ </div>
+ <div class="page-search page-full" @click="changeFullscreen">
+ <i class="el-icon-rank"></i>
+ {{ fullscreen ? '缩小' : '全屏'}}
+ </div>
+ <div class="page-search page-mode">
+ <div :class="{active: modeActive == 0 }" @click="modeActive = 0">综合态势感知</div>
+ <div :class="{active: modeActive == 1 }" @click="modeActive = 1">防汛值班</div>
+ </div>
+ <div class="page-map">
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+ <div class="page-search page-section">
+ <el-collapse v-model="activeSection" @change="handleChange">
+ <el-collapse-item v-for="item in sectionList" :key="item.title" :title="item.title" :name="item.title">
+ <div class="check-item" v-for="child in item.children" :key="child.title">
+ <el-checkbox :class="{active: child.checked}" v-model="child.checked">{{ child.title }}</el-checkbox>
+ </div>
+ </el-collapse-item>
+ </el-collapse>
+ </div>
+ <div class="page-back page-search" v-if="showBack">
+ <img src="images/back.png" alt="">
+ <div>红卫水库</div>
+ </div>
</div>
</template>
@@ -34,8 +79,144 @@
export default {
data () {
return {
-
+ fullscreen: false, //是否全屏
+ searchVal: '', //搜索值
+ modeActive: 0, //底部切换
+ showBack: false, //是否显示返回
+ options: [{
+ value: 'zhinan',
+ label: '指南',
+ children: [{
+ value: 'shejiyuanze',
+ label: '设计原则',
+ children: [{
+ value: 'yizhi',
+ label: '一致'
+ }, {
+ value: 'fankui',
+ label: '反馈'
+ }, {
+ value: 'xiaolv',
+ label: '效率'
+ }, {
+ value: 'kekong',
+ label: '可控'
+ }]
+ }, {
+ value: 'daohang',
+ label: '导航',
+ children: [{
+ value: 'cexiangdaohang',
+ label: '侧向导航'
+ }, {
+ value: 'dingbudaohang',
+ label: '顶部导航'
+ }]
+ }],
+
+ }],
+ activeSection: '水库',
+ sectionList: [
+ {
+ title: '水库',
+ children: [
+ {
+ title: '全部',
+ checked: false
+ },
+ {
+ title: '大型',
+ checked: false
+ }
+ ]
+ },
+ {
+ title: '水文监测站',
+ children: [
+ {
+ title: '水位站',
+ checked: false
+ },
+ {
+ title: '雨量站',
+ checked: false
+ }
+ ]
+ },
+ {
+ title: '安全监测站',
+ children: [
+ {
+ title: '全部',
+ checked: false
+ }
+ ]
+ },
+ {
+ title: '监控视频',
+ children: [
+ {
+ title: '全部',
+ checked: false
+ }
+ ]
+ }
+ ]
+ }
+ },
+ watch: {
+ $route(val) {
+ if(val.path == '/layout/home3') {
+ this.showBack = true
+ } else {
+ this.showBack = false
}
+ }
+ },
+ created() {
+ if(this.$route.path == '/layout/home3') {
+ this.showBack = true
+ }
+ } ,
+ methods: {
+ onSearch() {
+
+ },
+ selectChange(val) {
+
+ },
+ changeFullscreen() {
+ if(this.fullscreen) {
+ this.exitFullScreen()
+ return
+ }
+ this.requestFullscreen()
+ },
+ requestFullscreen () {
+ const docElm = document.documentElement
+ if (docElm.requestFullscreen) {
+ docElm.requestFullscreen()
+ } else if (docElm.msRequestFullscreen) {
+ docElm.msRequestFullscreen()
+ } else if (docElm.mozRequestFullScreen) {
+ docElm.mozRequestFullScreen()
+ } else if (docElm.webkitRequestFullScreen) {
+ docElm.webkitRequestFullScreen()
+ }
+ this.fullscreen = true
+ },
+ exitFullScreen () {
+ if (document.exitFullscreen) {
+ document.exitFullscreen()
+ } else if (document.msExitFullscreen) {
+ document.msExitFullscreen()
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen()
+ } else if (document.webkitCancelFullScreen) {
+ document.webkitCancelFullScreen()
+ }
+ this.fullscreen = false
+ }
}
}
</script>
--
Gitblit v1.9.3