343 lines
9.2 KiB
Vue
343 lines
9.2 KiB
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 }} m³</div>
|
||
</div>
|
||
<div class="rt-data item">
|
||
<div class="left">{{ t('messages.出水') }}</div>
|
||
<div class="center">{{ allData.out }} m³</div>
|
||
</div>
|
||
<div class="lb-data item">
|
||
<div class="left">{{ t('messages.消耗') }}</div>
|
||
<div class="center">{{ allData.use }} m³</div>
|
||
</div>
|
||
<div class="rb-data item">
|
||
<div class="left">{{ t('messages.用电') }}</div>
|
||
<div class="center">{{ allData.currentCount }} kW·h</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: '进水量（m³）', max: 100, min: 0, avg: 50 },
|
||
{ color: '#91CC75', name: '出水量（m³）', max: 100, min: 0, avg: 50 },
|
||
{ color: '#EE6666', name: '用电量（kW·h）', 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: '水量（m³）',
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '电量（kW·h）',
|
||
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.toFixed(2)
|
||
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>
|