南部水房接口对接,调试
This commit is contained in:
parent
752211c2db
commit
86a382c36f
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user