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',
|
||||
name: 'biology',
|
||||
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: '世博浦西区活水公园',
|
||||
weather: '世博浦西区活水公园',
|
||||
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 class="content">
|
||||
<Gindex v-if="index === 0"/>
|
||||
<Report v-else-if="index === 1"/>
|
||||
<Zhibiao v-else-if="index === 1"/>
|
||||
<Ganalyse v-else-if="index === 2"/>
|
||||
<History v-else-if="index === 3"/>
|
||||
</div>
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
<script>
|
||||
import Menus from "@/components/Menus.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 History from "@/components/History.vue";
|
||||
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||
|
|
@ -24,7 +24,7 @@ export default {
|
|||
components: {
|
||||
Menus,
|
||||
Gindex,
|
||||
Report,
|
||||
Zhibiao,
|
||||
Ganalyse,
|
||||
History
|
||||
},
|
||||
|
|
|
|||
|
|
@ -32,10 +32,10 @@ export default {
|
|||
url: 'biology'
|
||||
}, {
|
||||
name: '透水铺装&入渗系统',
|
||||
url: 'level'
|
||||
url: 'shentou'
|
||||
}, {
|
||||
name: '调蓄系统&逆流监测系统',
|
||||
url: 'level'
|
||||
url: 'chuxu'
|
||||
}, {
|
||||
name: '气象监测系统',
|
||||
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