南部水房接口对接,调试

This commit is contained in:
hzz 2023-06-17 17:33:08 +08:00
parent 752211c2db
commit 86a382c36f

View File

@ -1,29 +1,29 @@
<template>
<div :class="$style['container']">
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.南门水房物联监测系统')" :titleTip="[]" :typeFun="['time']"
:alarmType="['']"></header2>
<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">20</div>
<div class="center">{{ allData.in }}</div>
</div>
<div class="rt-data item">
<div class="left">{{ t('messages.出水') }}</div>
<div class="center">20</div>
</div>
<div class="center">{{ allData.out }}</div>
</div>
<div class="lb-data item">
<div class="left">{{ t('messages.消耗') }}</div>
<div class="center">20</div>
<div class="center">{{ allData.use }}</div>
</div>
<div class="rb-data item">
<div class="left">{{ t('messages.用电') }}</div>
<div class="center">20</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">
<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>
@ -39,7 +39,7 @@
</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>
<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>
@ -51,11 +51,11 @@
<div class="rb-title">{{ t('messages.效益&效率') }}</div>
<div class="rb-content">
<div class="progress">
<el-progress type="circle" :width="150" :percentage="25" />
<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="25" />
<el-progress type="circle" :width="150" :percentage="allData.xl" />
<div class="progress-text">{{ t('messages.效益') }}</div>
</div>
</div>
@ -66,6 +66,7 @@
<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')
@ -73,6 +74,14 @@ 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'];
//
@ -104,7 +113,15 @@ function init() {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
data: [
"2023-06-11",
"2023-06-12",
"2023-06-13",
"2023-06-14",
"2023-06-15",
"2023-06-16",
"2023-06-17"
]
},
yAxis: [
{
@ -128,26 +145,76 @@ function init() {
{
name: '进水量',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
data: [0,2,1,1,2,0,1]
},
{
name: '出水量',
type: 'line',
yAxisIndex: 0,
data: [220, 182, 191, 234, 290, 330, 310]
data: [0,0,0,0,0,0,0]
},
{
name: '用电量',
type: 'line',
yAxisIndex: 1,
data: [150, 232, 201, 154, 190, 330, 1000]
data: [1.0907,0.595,0.9884,1.625,1.7888,1.9918,1.6647]
}
]
};
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
allData.xy = data.xy
chart.setOption({
xAxis: { data: data.date },
series: [
{
name: '进水量',
type: 'line',
data: data.inChart
},
{
name: '出水量',
type: 'line',
yAxisIndex: 0,
data: data.outChart
},
{
name: '用电量',
type: 'line',
yAxisIndex: 1,
data: 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(() => {
init()
getWaterFlowInfoFun()
})
</script>
<style module>
@ -290,6 +357,7 @@ onMounted(() => {
box-sizing: border-box;
padding-left: 10px;
}
.math-title-color {
color: #025AE5;
}