123
parent
548336345f
commit
42fddcc5fc
|
|
@ -0,0 +1,125 @@
|
||||||
|
<template>
|
||||||
|
<div class="green">
|
||||||
|
<div class="index-top">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="index-bottom">
|
||||||
|
<div class="one-card">
|
||||||
|
<h2>数据显示</h2>
|
||||||
|
<div class="one-card-content">
|
||||||
|
<div>
|
||||||
|
<p>地块面积</p>
|
||||||
|
<font>730</font>
|
||||||
|
<font>㎡</font>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>地块调蓄容积</p>
|
||||||
|
<font>500</font>
|
||||||
|
<font>m³</font>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>调蓄池液位</p>
|
||||||
|
<font>3.6</font>
|
||||||
|
<font>m</font>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>溢流量</p>
|
||||||
|
<font>1.25</font>
|
||||||
|
<font>L/s</font>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>COD</p>
|
||||||
|
<font>8</font>
|
||||||
|
<font>mg/L</font>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>氨氮</p>
|
||||||
|
<font>12.5</font>
|
||||||
|
<font>mg/L</font>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>ss</p>
|
||||||
|
<font>20.7</font>
|
||||||
|
<font>mg/L</font>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>地块剩余调蓄容积</p>
|
||||||
|
<font>316</font>
|
||||||
|
<font>m³</font>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Menus from "@/components/Menus.vue";
|
||||||
|
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||||
|
export default {
|
||||||
|
name: 'green',
|
||||||
|
components: {
|
||||||
|
Menus
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.mt10 {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.green {
|
||||||
|
width: 100%;
|
||||||
|
height:100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: column;
|
||||||
|
.index-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 74%;
|
||||||
|
border: 1px solid rgb(179, 174, 174);
|
||||||
|
}
|
||||||
|
.index-bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 25%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.one-card {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-shadow: 0 0 8px #99ACB0 inset;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.one-card-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 73%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
>div {
|
||||||
|
width: 10%;
|
||||||
|
height: 80%;
|
||||||
|
border: 1px solid rgb(197, 195, 195);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background:#d8e8f7;
|
||||||
|
// align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,176 @@
|
||||||
|
<template>
|
||||||
|
<div class="index">
|
||||||
|
<div class="index-left">
|
||||||
|
<div class="index-left-top">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="index-left-bottom">
|
||||||
|
<div class="one-card-content">
|
||||||
|
<div>
|
||||||
|
<p>透水铺砖储水量</p>
|
||||||
|
<font>200</font>
|
||||||
|
<font>m³</font>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>透水铺砖表面温度</p>
|
||||||
|
<font>16.5</font>
|
||||||
|
<font>℃</font>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>热岛消减率</p>
|
||||||
|
<font>19.6</font>
|
||||||
|
<font>%</font>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>孔隙率</p>
|
||||||
|
<font>10</font>
|
||||||
|
<font>%</font>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="index-right">
|
||||||
|
<div class="one-card">
|
||||||
|
<h2>数据显示</h2>
|
||||||
|
<div class="one-card-content">
|
||||||
|
<div>
|
||||||
|
<p>透水铺装面积</p>
|
||||||
|
<font>500</font>
|
||||||
|
<font>㎡</font>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>入渗系统面积</p>
|
||||||
|
<font>437</font>
|
||||||
|
<font>㎡</font>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>透水系数</p>
|
||||||
|
<font>10</font>
|
||||||
|
<font>mm/min</font>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>入渗系数</p>
|
||||||
|
<font>1.3</font>
|
||||||
|
<font>mm/min</font>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>透水层厚度</p>
|
||||||
|
<font>300</font>
|
||||||
|
<font>mm</font>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>渗透量</p>
|
||||||
|
<font>362</font>
|
||||||
|
<font>m³</font>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Menus from "@/components/Menus.vue";
|
||||||
|
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||||
|
export default {
|
||||||
|
name: 'index',
|
||||||
|
components: {
|
||||||
|
Menus
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.mt10 {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.index {
|
||||||
|
width: 100%;
|
||||||
|
height:100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.index-left {
|
||||||
|
width: 74%;
|
||||||
|
border: 1px solid rgb(179, 174, 174);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: column;
|
||||||
|
.index-left-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 80%;
|
||||||
|
border: 1px solid red;
|
||||||
|
}
|
||||||
|
.index-left-bottom {
|
||||||
|
height: 20%;
|
||||||
|
}
|
||||||
|
.one-card-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
>div {
|
||||||
|
width: 24%;
|
||||||
|
height: 80%;
|
||||||
|
border: 1px solid rgb(197, 195, 195);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background:#d8e8f7;
|
||||||
|
// align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 26px;
|
||||||
|
line-height: 45px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-right {
|
||||||
|
width: 25%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: column;
|
||||||
|
.one-card {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-shadow: 0 0 8px #99ACB0 inset;
|
||||||
|
.one-card-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 90%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
>div {
|
||||||
|
width: 40%;
|
||||||
|
height: 30%;
|
||||||
|
border: 1px solid rgb(197, 195, 195);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background:#d8e8f7;
|
||||||
|
// align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 26px;
|
||||||
|
line-height: 45px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,273 @@
|
||||||
|
<template>
|
||||||
|
<div class="analyse-container">
|
||||||
|
<div id="echartDiv1" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv2" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv3" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv4" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv5" class="echartDiv100"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import myApi from "@/api/myApi.js";
|
||||||
|
import BarEchart from "./BarEchart.vue";
|
||||||
|
import Process from "./Process.vue";
|
||||||
|
import Date from "@/components/Date.vue";
|
||||||
|
export default {
|
||||||
|
name: "Analyse",
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
|
||||||
|
});
|
||||||
|
onMounted(async () => {
|
||||||
|
getChartsZfl("echartDiv1", '蒸腾量');
|
||||||
|
getChartsZfl("echartDiv2", 'COD')
|
||||||
|
getChartsZfl("echartDiv3", '氨氮');
|
||||||
|
getChartsZfl("echartDiv4", 'SS')
|
||||||
|
getChartsZfl("echartDiv5", '屋面温度')
|
||||||
|
});
|
||||||
|
const getChartsZfl = (id, text) => {
|
||||||
|
var dom = document.getElementById(id);
|
||||||
|
var op = {
|
||||||
|
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||||
|
title: {
|
||||||
|
text: text
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: [
|
||||||
|
"00",
|
||||||
|
"01",
|
||||||
|
"02",
|
||||||
|
"03",
|
||||||
|
"04",
|
||||||
|
"05",
|
||||||
|
"06",
|
||||||
|
"07",
|
||||||
|
"08",
|
||||||
|
"09",
|
||||||
|
"10",
|
||||||
|
"11",
|
||||||
|
"12",
|
||||||
|
"13",
|
||||||
|
"14",
|
||||||
|
"15",
|
||||||
|
"16",
|
||||||
|
"17",
|
||||||
|
"18",
|
||||||
|
"19",
|
||||||
|
"20",
|
||||||
|
"21",
|
||||||
|
"22",
|
||||||
|
"23",
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '系统A',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(128, 255, 165)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(1, 191, 236)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统B',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(0, 221, 255)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(77, 119, 255)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统C',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(55, 162, 255)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(116, 21, 219)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统D',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(255, 0, 135)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(135, 0, 157)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统E',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top'
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(255, 191, 0)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(224, 62, 76)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
getEchart(dom, op)
|
||||||
|
}
|
||||||
|
const getEchart = (dom, op) => {
|
||||||
|
if (dom) {
|
||||||
|
var myChart = echarts.init(dom);
|
||||||
|
var option = op;
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
getChartsZfl,
|
||||||
|
getEchart
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.analyse-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
.echartDiv100 {
|
||||||
|
width: 100%;
|
||||||
|
height: 20%;
|
||||||
|
margin: 0 auto;
|
||||||
|
// border: 1px solid red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -46,6 +46,16 @@ const router = createRouter({
|
||||||
path: '/biology',
|
path: '/biology',
|
||||||
name: 'biology',
|
name: 'biology',
|
||||||
component: () => import(/* webpackChunkName: "link" */ '../views/Biology.vue')
|
component: () => import(/* webpackChunkName: "link" */ '../views/Biology.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/shentou',
|
||||||
|
name: 'shentou',
|
||||||
|
component: () => import(/* webpackChunkName: "link" */ '../views/Shentou.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/chuxu',
|
||||||
|
name: 'chuxu',
|
||||||
|
component: () => import(/* webpackChunkName: "link" */ '../views/Chuxu.vue')
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -34,5 +34,7 @@ export const pathMap = {
|
||||||
page: '世博浦西区活水公园',
|
page: '世博浦西区活水公园',
|
||||||
weather: '世博浦西区活水公园',
|
weather: '世博浦西区活水公园',
|
||||||
green: '世博浦西区活水公园',
|
green: '世博浦西区活水公园',
|
||||||
biology: '世博浦西区活水公园'
|
biology: '世博浦西区活水公园',
|
||||||
|
shentou: '世博浦西区活水公园',
|
||||||
|
chuxu: '世博浦西区活水公园'
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
<template>
|
||||||
|
<div class="cl-hy">
|
||||||
|
<div class="menus">
|
||||||
|
<Menus :activeI="0" @changeIndex="changeIndex" :menus="menus"/>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<Cindex v-if="index === 0"/>
|
||||||
|
<Report v-else-if="index === 1"/>
|
||||||
|
<Ganalyse v-else-if="index === 2"/>
|
||||||
|
<History v-else-if="index === 3"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Menus from "@/components/Menus.vue";
|
||||||
|
import Cindex from "@/components/Cindex.vue";
|
||||||
|
import Report from "@/components/Report.vue";
|
||||||
|
import Ganalyse from "@/components/Ganalyse.vue";
|
||||||
|
import History from "@/components/History.vue";
|
||||||
|
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||||
|
export default {
|
||||||
|
name: 'weather',
|
||||||
|
components: {
|
||||||
|
Menus,
|
||||||
|
Cindex,
|
||||||
|
Report,
|
||||||
|
Ganalyse,
|
||||||
|
History
|
||||||
|
},
|
||||||
|
setup(props, ctx) {
|
||||||
|
const state = reactive({
|
||||||
|
index: 0,
|
||||||
|
menus:[
|
||||||
|
{
|
||||||
|
name: '首页',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '检测指标',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '数据分析',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '历史数据',
|
||||||
|
}
|
||||||
|
],
|
||||||
|
})
|
||||||
|
const changeIndex = (index) => {
|
||||||
|
state.index = index;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
changeIndex
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.mt10 {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.cl-hy {
|
||||||
|
width: 100%;
|
||||||
|
height:100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
// border: 1px solid red;
|
||||||
|
.menus {
|
||||||
|
width: 4%;
|
||||||
|
height: 700px;
|
||||||
|
// border: 1px solid red;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 96%;
|
||||||
|
height:100%;
|
||||||
|
// border: 1px solid red;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<Gindex v-if="index === 0"/>
|
<Gindex v-if="index === 0"/>
|
||||||
<Report v-else-if="index === 1"/>
|
<Zhibiao v-else-if="index === 1"/>
|
||||||
<Ganalyse v-else-if="index === 2"/>
|
<Ganalyse v-else-if="index === 2"/>
|
||||||
<History v-else-if="index === 3"/>
|
<History v-else-if="index === 3"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
<script>
|
<script>
|
||||||
import Menus from "@/components/Menus.vue";
|
import Menus from "@/components/Menus.vue";
|
||||||
import Gindex from "@/components/Gindex.vue";
|
import Gindex from "@/components/Gindex.vue";
|
||||||
import Report from "@/components/Report.vue";
|
import Zhibiao from "@/components/Zhibiao.vue";
|
||||||
import Ganalyse from "@/components/Ganalyse.vue";
|
import Ganalyse from "@/components/Ganalyse.vue";
|
||||||
import History from "@/components/History.vue";
|
import History from "@/components/History.vue";
|
||||||
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||||
|
|
@ -24,7 +24,7 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
Menus,
|
Menus,
|
||||||
Gindex,
|
Gindex,
|
||||||
Report,
|
Zhibiao,
|
||||||
Ganalyse,
|
Ganalyse,
|
||||||
History
|
History
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -32,10 +32,10 @@ export default {
|
||||||
url: 'biology'
|
url: 'biology'
|
||||||
}, {
|
}, {
|
||||||
name: '透水铺装&入渗系统',
|
name: '透水铺装&入渗系统',
|
||||||
url: 'level'
|
url: 'shentou'
|
||||||
}, {
|
}, {
|
||||||
name: '调蓄系统&逆流监测系统',
|
name: '调蓄系统&逆流监测系统',
|
||||||
url: 'level'
|
url: 'chuxu'
|
||||||
}, {
|
}, {
|
||||||
name: '气象监测系统',
|
name: '气象监测系统',
|
||||||
url: 'weather'
|
url: 'weather'
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
<template>
|
||||||
|
<div class="cl-hy">
|
||||||
|
<div class="menus">
|
||||||
|
<Menus :activeI="0" @changeIndex="changeIndex" :menus="menus"/>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<Sindex v-if="index === 0"/>
|
||||||
|
<Report v-else-if="index === 1"/>
|
||||||
|
<Analyse v-else-if="index === 2"/>
|
||||||
|
<History v-else-if="index === 3"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Menus from "@/components/Menus.vue";
|
||||||
|
import Sindex from "@/components/Sindex.vue";
|
||||||
|
import Report from "@/components/Report.vue";
|
||||||
|
import Analyse from "@/components/Analyse.vue";
|
||||||
|
import History from "@/components/History.vue";
|
||||||
|
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||||
|
export default {
|
||||||
|
name: 'weather',
|
||||||
|
components: {
|
||||||
|
Menus,
|
||||||
|
Sindex,
|
||||||
|
Report,
|
||||||
|
Analyse,
|
||||||
|
History
|
||||||
|
},
|
||||||
|
setup(props, ctx) {
|
||||||
|
const state = reactive({
|
||||||
|
index: 0,
|
||||||
|
menus:[
|
||||||
|
{
|
||||||
|
name: '首页',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '气象预报',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '数据分析',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '历史数据',
|
||||||
|
}
|
||||||
|
],
|
||||||
|
})
|
||||||
|
const changeIndex = (index) => {
|
||||||
|
state.index = index;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
changeIndex
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.mt10 {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.cl-hy {
|
||||||
|
width: 100%;
|
||||||
|
height:100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
// border: 1px solid red;
|
||||||
|
.menus {
|
||||||
|
width: 4%;
|
||||||
|
height: 700px;
|
||||||
|
// border: 1px solid red;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 96%;
|
||||||
|
height:100%;
|
||||||
|
// border: 1px solid red;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue