南部水房接口对接,调试
This commit is contained in:
parent
752211c2db
commit
86a382c36f
@ -1,29 +1,29 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="$style['container']">
|
<div :class="$style['container']">
|
||||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.南门水房物联监测系统')" :titleTip="[]" :typeFun="['time']"
|
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.南门水房物联监测系统')" :titleTip="[]"
|
||||||
:alarmType="['']"></header2>
|
:typeFun="['time']" :alarmType="['']"></header2>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div class="left-title">{{ t('messages.数据监测') }}</div>
|
<div class="left-title">{{ t('messages.数据监测') }}</div>
|
||||||
<div class="lt-data item">
|
<div class="lt-data item">
|
||||||
<div class="left">{{ t('messages.进水') }}</div>
|
<div class="left">{{ t('messages.进水') }}</div>
|
||||||
<div class="center">20</div>
|
<div class="center">{{ allData.in }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rt-data item">
|
<div class="rt-data item">
|
||||||
<div class="left">{{ t('messages.出水') }}</div>
|
<div class="left">{{ t('messages.出水') }}</div>
|
||||||
<div class="center">20</div>
|
<div class="center">{{ allData.out }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="lb-data item">
|
<div class="lb-data item">
|
||||||
<div class="left">{{ t('messages.消耗') }}</div>
|
<div class="left">{{ t('messages.消耗') }}</div>
|
||||||
<div class="center">20</div>
|
<div class="center">{{ allData.use }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rb-data item">
|
<div class="rb-data item">
|
||||||
<div class="left">{{ t('messages.用电') }}</div>
|
<div class="left">{{ t('messages.用电') }}</div>
|
||||||
<div class="center">20</div>
|
<div class="center">{{ allData.currentCount }}</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 总体趋势图 -->
|
<!-- 总体趋势图 -->
|
||||||
<div class="rt-title">{{ t('messages.总体趋势图') }}</div>
|
<div class="rt-title">{{ t('messages.总体趋势图') }}</div>
|
||||||
<div class="rt-radio">
|
<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="1">{{ t('messages.近一周') }}</el-radio-button>
|
||||||
<el-radio-button label="2">{{ 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-button label="3">{{ t('messages.近三月') }}</el-radio-button>
|
||||||
@ -39,7 +39,7 @@
|
|||||||
</el-row>
|
</el-row>
|
||||||
<el-row v-for="item in mathList">
|
<el-row v-for="item in mathList">
|
||||||
<el-col :span="12" class="p-left10" style="display: flex;justify-content: start;align-items: center;">
|
<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>
|
<text>{{ item.name }}</text>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="4">{{ item.max }}</el-col>
|
<el-col :span="4">{{ item.max }}</el-col>
|
||||||
@ -51,11 +51,11 @@
|
|||||||
<div class="rb-title">{{ t('messages.效益&效率') }}</div>
|
<div class="rb-title">{{ t('messages.效益&效率') }}</div>
|
||||||
<div class="rb-content">
|
<div class="rb-content">
|
||||||
<div class="progress">
|
<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 class="progress-text">{{ t('messages.效益') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress">
|
<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 class="progress-text">{{ t('messages.效益') }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -66,6 +66,7 @@
|
|||||||
<script setup lang='ts'>
|
<script setup lang='ts'>
|
||||||
import { onMounted, onUnmounted, reactive, ref, getCurrentInstance } from "vue";
|
import { onMounted, onUnmounted, reactive, ref, getCurrentInstance } from "vue";
|
||||||
import header2 from "@/components/headerBox/header2.vue";
|
import header2 from "@/components/headerBox/header2.vue";
|
||||||
|
import { getWaterFlowInfo } from '@/http/waterHouse'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
let { t } = useI18n();
|
let { t } = useI18n();
|
||||||
let imgUrl = require('@/assets/img/water_room.png')
|
let imgUrl = require('@/assets/img/water_room.png')
|
||||||
@ -73,6 +74,14 @@ const { proxy } = getCurrentInstance() as any
|
|||||||
const mainChart = ref(null)
|
const mainChart = ref(null)
|
||||||
let chart = null
|
let chart = null
|
||||||
let date = ref('1')
|
let date = ref('1')
|
||||||
|
let allData = reactive({
|
||||||
|
in: 0,
|
||||||
|
out: 0,
|
||||||
|
use: 0,
|
||||||
|
currentCount: 0,
|
||||||
|
xl: 0,
|
||||||
|
xy: 0
|
||||||
|
})
|
||||||
document.title = t('messages.南门水房物联监测系统')
|
document.title = t('messages.南门水房物联监测系统')
|
||||||
const colors = ['#5470C6', '#91CC75', '#EE6666'];
|
const colors = ['#5470C6', '#91CC75', '#EE6666'];
|
||||||
//进水量 出水量 用电量 最大值 最小值 平均值
|
//进水量 出水量 用电量 最大值 最小值 平均值
|
||||||
@ -104,7 +113,15 @@ function init() {
|
|||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
boundaryGap: false,
|
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: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
@ -128,26 +145,76 @@ function init() {
|
|||||||
{
|
{
|
||||||
name: '进水量',
|
name: '进水量',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: [120, 132, 101, 134, 90, 230, 210]
|
data: [0,2,1,1,2,0,1]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '出水量',
|
name: '出水量',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
yAxisIndex: 0,
|
yAxisIndex: 0,
|
||||||
data: [220, 182, 191, 234, 290, 330, 310]
|
data: [0,0,0,0,0,0,0]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '用电量',
|
name: '用电量',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
yAxisIndex: 1,
|
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);
|
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(() => {
|
onMounted(() => {
|
||||||
init()
|
init()
|
||||||
|
getWaterFlowInfoFun()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style module>
|
<style module>
|
||||||
@ -290,6 +357,7 @@ onMounted(() => {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.math-title-color {
|
.math-title-color {
|
||||||
color: #025AE5;
|
color: #025AE5;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user