screenFront/src/views/Waterhouse/index.vue

<template>
    <div :class="$style['container']">
        <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.南门水房物联监测系统')" :titleTip="[]"
            :typeFun="['time']" :alarmType="['']"></header2>
        <div class="main">
            <div class="left-title">{{ t('messages.数据监测') }}</div>
            <div class="lt-data item">
                <div class="left">{{ t('messages.进水') }}</div>
                <div class="center">{{ allData.in }}</div>
            </div>
            <div class="rt-data item">
                <div class="left">{{ t('messages.出水') }}</div>
                <div class="center">{{ allData.out }}</div>
            </div>
            <div class="lb-data item">
                <div class="left">{{ t('messages.消耗') }}</div>
                <div class="center">{{ allData.use }}</div>
            </div>
            <div class="rb-data item">
                <div class="left">{{ t('messages.用电') }}</div>
                <div class="center">{{ allData.currentCount }}</div>
            </div>
            <!-- 总体趋势图 -->
            <div class="rt-title">{{ t('messages.总体趋势图') }}</div>
            <div class="rt-radio">
                <el-radio-group v-model="date" size="small" @change="dateChange">
                    <el-radio-button label="1">{{ t('messages.近一周') }}</el-radio-button>
                    <el-radio-button label="2">{{ t('messages.近一月') }}</el-radio-button>
                    <el-radio-button label="3">{{ t('messages.近三月') }}</el-radio-button>
                </el-radio-group>
            </div>
            <div class="mainChart" ref="mainChart"></div>
            <div class="math-content">
                <el-row>
                    <el-col :span="12" class="p-left10"></el-col>
                    <el-col :span="4" class="math-title-color">{{ t('messages.最大值') }}</el-col>
                    <el-col :span="4" class="math-title-color">{{ t('messages.最小值') }}</el-col>
                    <el-col :span="4" class="math-title-color">{{ t('messages.平均值') }}</el-col>
                </el-row>
                <el-row v-for="item in mathList">
                    <el-col :span="12" class="p-left10" style="display: flex;justify-content: start;align-items: center;">
                        <div
                            :style="{ 'background': item.color, 'width': '25px', 'height': '20px', 'margin-right': '5px' }">
                        </div>
                        <text>{{ item.name }}</text>
                    </el-col>
                    <el-col :span="4">{{ item.max }}</el-col>
                    <el-col :span="4">{{ item.min }}</el-col>
                    <el-col :span="4">{{ item.avg }}</el-col>
                </el-row>
            </div>
            <!-- 效益&效率 -->
            <div class="rb-title">{{ t('messages.效益&效率') }}</div>
            <div class="rb-content">
                <div class="progress">
                    <el-progress type="circle" :width="150" :percentage="allData.xy" />
                    <div class="progress-text">{{ t('messages.效益') }}</div>
                </div>
                <div class="progress">
                    <el-progress type="circle" :width="150" :percentage="allData.xl" />
                    <div class="progress-text">{{ t('messages.效率') }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, onUnmounted, reactive, ref, getCurrentInstance } from "vue";
import header2 from "@/components/headerBox/header2.vue";
import { getWaterFlowInfo } from '@/http/waterHouse'
import { useI18n } from 'vue-i18n'
let { t } = useI18n();
let imgUrl = require('@/assets/img/water_room.png')
const { proxy } = getCurrentInstance() as any
const mainChart = ref(null)
let chart = null
let date = ref('1')
let allData = reactive({
    in: 0,
    out: 0,
    use: 0,
    currentCount: 0,
    xl: 0,
    xy: 0
})
document.title = t('messages.南门水房物联监测系统')
const colors = ['#5470C6', '#91CC75', '#EE6666'];
//进水量 出水量 用电量 最大值 最小值 平均值
let mathList = reactive([
    { color: '#5470C6', name: '进水量', max: 100, min: 0, avg: 50 },
    { color: '#91CC75', name: '出水量', max: 100, min: 0, avg: 50 },
    { color: '#EE6666', name: '用电量', max: 100, min: 0, avg: 50 }
])

function initChart(date,inChart, outChart, currentChart) {
    if (!chart) {
        chart = proxy.$echarts.init(mainChart.value, 'dark');
    }
    
    let option = {
        // title: {
        //     text: '水房数据大屏',
        // },
        color: colors,
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['进水量', '出水量', '用电量']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date
        },
        yAxis: [
            {
                type: 'value',
                name: '水量',
            },
            {
                type: 'value',
                name: '电量',
                position: 'right',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[2]
                    }
                },
            }
        ],
        series: [
            {
                name: '进水量',
                type: 'line',
                smooth: true,
                data: inChart
            },
            {
                name: '出水量',
                type: 'line',
                smooth: true,
                yAxisIndex: 0,
                data: outChart
            },
            {
                name: '用电量',
                type: 'line',
                smooth: true,
                yAxisIndex: 1,
                data: currentChart
            }
        ]
    };
    chart.setOption(option);
}
function dateChange() {
    getWaterFlowInfoFun()
}
async function getWaterFlowInfoFun() {
    let { code, data }: any = await getWaterFlowInfo(date.value)
    if (code == 200) {
        allData.in = data.in
        allData.out = data.out
        allData.use = data.use
        allData.currentCount = data.currentCount
        allData.xl = data.xl.toFixed(1)
        allData.xy = data.xy.toFixed(1)
        initChart(data.date, data.inChart, data.outChart, data.currentChart)

        mathList[0].max = data.math.WaterInflow.max
        mathList[0].min = data.math.WaterInflow.min
        mathList[0].avg = data.math.WaterInflow.avg
        mathList[1].max = data.math.WaterOutflow.max
        mathList[1].min = data.math.WaterOutflow.min
        mathList[1].avg = data.math.WaterOutflow.avg
        mathList[2].max = data.math.CurrentUsage.max
        mathList[2].min = data.math.CurrentUsage.min
        mathList[2].avg = data.math.CurrentUsage.avg


    }


}
onMounted(() => {
    getWaterFlowInfoFun()
})
</script>
<style module>
.container {
    height: 1080px;
    width: 1920px;
    color: #20aec5;
    background-color: #100c2a;
    box-sizing: border-box;
    overflow: hidden;
}
</style>
<style scoped>
.main {
    position: relative;
    width: 100%;
    height: 980px;
    background: url('/src/assets/img/water_house_bg.jpg') no-repeat;
}

.left-title {
    position: absolute;
    top: 94px;
    left: 129px;
    font-size: 28px;
    color: #fff;
    /* font-weight: bold; */
}

.lt-data {
    position: absolute;
    top: 513px;
    left: 176px;
}

.rt-data {
    position: absolute;
    top: 508px;
    left: 581px;
}

.lb-data {
    position: absolute;
    top: 743px;
    left: 176px;
}

.rb-data {
    position: absolute;
    top: 726px;
    left: 581px;
}

.item {
    width: 200px;
    height: 86px;
    font-size: 24px;
    color: #fff;
}

.left {
    padding-left: 10px;
    text-align: left;
    line-height: 50px;
}

.center {
    line-height: 36px;
}

.rt-title {
    position: absolute;
    top: 47px;
    right: 536px;
    font-size: 28px;
    color: #fff;
}

.rt-radio {
    position: absolute;
    top: 96px;
    right: 78px;
    background: #110C2C;
}

.mainChart {
    position: absolute;
    width: 650px;
    height: 270px;
    top: 136px;
    left: 1227px;
}

.math-content {
    position: absolute;
    width: 555px;
    height: 100px;
    top: 418px;
    left: 1271px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: #fff;
}

.rb-title {
    position: absolute;
    bottom: 399px;
    right: 551px;
    font-size: 28px;
    color: #fff;
}

.rb-content {
    position: absolute;
    display: flex;
    justify-content: space-around;
    align-items: center;
    bottom: 120px;
    right: 64px;
    width: 650px;
    height: 270px;
    font-size: 16px;
}

:deep(.progress .el-progress__text) {
    font-weight: bold;
    font-size: 30px !important;
}

.progress-text {
    font-size: 18px;
    font-weight: bold;
    margin-top: 5px;
    color: #fff;
}

.p-left10 {
    text-align: left;
    box-sizing: border-box;
    padding-left: 10px;
}

.math-title-color {
    color: #025AE5;
}
</style>