192 lines
4.9 KiB
Vue
192 lines
4.9 KiB
Vue
<template>
|
||
<view class="info_24">
|
||
<div class="heart">
|
||
<p class="title">
|
||
<span class="line"></span><span class="h4">实时汛情</span>
|
||
</p>
|
||
<div>{{ tm }}</div>
|
||
</div>
|
||
<div class="chartChange fl">
|
||
<div class="tabItem tabLf" :class="{ bgBlue: tabKey === 1 }" @click="tabChange(1)">
|
||
<div class="tabNum">131</div>
|
||
<div class="tabText">水库</div>
|
||
</div>
|
||
<!-- <div class="borderLine"></div> -->
|
||
<div class="tabItem tabRf" :class="{ bgYellow: tabKey === 2 }" @click="tabChange(2)">
|
||
<div class="tabNum">9</div>
|
||
<div class="tabText">超汛限</div>
|
||
</div>
|
||
</div>
|
||
<qiun-data-charts type="column" :opts="opts" :chartData="echartsOptios" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
|
||
import moment from "moment";
|
||
export default {
|
||
data() {
|
||
return {
|
||
tm:null,
|
||
tabOptions:['水库', '超汛限水库'],
|
||
tabKey:1,
|
||
opts:{
|
||
update: true,
|
||
color: ["#6e93f2","#efa161"],
|
||
padding: [15,15,0,5],
|
||
enableScroll: false,
|
||
legend: {
|
||
show:false,
|
||
},
|
||
xAxis: {
|
||
disableGrid: true
|
||
},
|
||
yAxis: {
|
||
showTitle: true,
|
||
data: [
|
||
{
|
||
position: "left",
|
||
title: "座",
|
||
titleOffsetX: -10, // 向左偏移 10px
|
||
titleOffsetY: -5, // 向上偏移 5px
|
||
min: 0,
|
||
}
|
||
]
|
||
},
|
||
extra: {
|
||
column: {
|
||
type: "group",
|
||
width: 30,
|
||
activeBgColor: "#000000",
|
||
activeBgOpacity: 0.08
|
||
}
|
||
}
|
||
},
|
||
data: [],
|
||
loading:false,
|
||
tm:null,
|
||
};
|
||
},
|
||
computed: {
|
||
echartsOptios() {
|
||
let res = {
|
||
categories: this.data.map(i=>i.type),
|
||
series: [
|
||
{
|
||
name: "水库",
|
||
show: this.tabKey===1?true:false,
|
||
data: this.data.map(i=>i.sk)
|
||
},
|
||
{
|
||
name: "超汛限水库",
|
||
show: this.tabKey===2?true:false,
|
||
data: this.data.map(i=>i.cxx)
|
||
}
|
||
]
|
||
};
|
||
return JSON.parse(JSON.stringify(res));
|
||
},
|
||
},
|
||
methods: {
|
||
async getData() {
|
||
this.loading = true
|
||
try {
|
||
// const res = await uni.$http.post("/gunshiApp/xfflood/weather/area", { tm });
|
||
this.data = [
|
||
{ type:'大(1)型',sk:4,cxx:0 },
|
||
{ type:'大(2)型',sk:2,cxx:1 },
|
||
{ type:'中型',sk:7,cxx:0 },
|
||
{ type:'小(1)型',sk:31,cxx:3 },
|
||
{ type:'小(2)型',sk:22,cxx:1 },
|
||
];
|
||
this.loading = false
|
||
} catch (e) {
|
||
uni.$showMsg();
|
||
}
|
||
},
|
||
tabChange(val) {
|
||
this.tabKey = val
|
||
},
|
||
getDataTime() {
|
||
this.tm = moment().format("YYYY-MM-DD HH");
|
||
},
|
||
},
|
||
// 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
|
||
created() {
|
||
this.getDataTime();
|
||
this.getData()
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.info_24 {
|
||
padding: 15px;
|
||
background-color: #fff;
|
||
margin-bottom: 12rpx;
|
||
box-shadow: 0px 0px 5px #eee;
|
||
}
|
||
.heart {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.fl {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.title .line {
|
||
border: 2px solid #3380ff;
|
||
border-radius: 3rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
.title .h4 {
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #121b3d;
|
||
}
|
||
.chartChange {
|
||
text-align: center;
|
||
margin: 16rpx 0;
|
||
}
|
||
.tabItem{
|
||
width: 200px;
|
||
padding: 5px 0;
|
||
border: 1px solid #eee;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.tabLf{
|
||
border-right: 0;
|
||
}
|
||
.tabRf{
|
||
border-left: 0;
|
||
}
|
||
.bgBlue{
|
||
border: 1px solid #6e93f2;
|
||
color: #6e93f2;
|
||
}
|
||
.bgYellow{
|
||
border: 1px solid #efa161;
|
||
color: #efa161;
|
||
}
|
||
.tabNum{
|
||
padding: 3px 0;
|
||
font-size: 14px;
|
||
line-height: 14px;
|
||
font-weight: 800;
|
||
}
|
||
.tabText{
|
||
padding: 3px 0;
|
||
font-size: 14px;
|
||
line-height: 14px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
</style>
|
||
|