cbsl-app/pages/homeIndex/skWarn.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>