445 lines
9.2 KiB
Vue
445 lines
9.2 KiB
Vue
<template>
|
|
<view :class="{ gray: store.isgray == 1 }">
|
|
<view class="wrapper f-col aic">
|
|
<view class="onduty">
|
|
<view class="title f-row aic jcb"><uni-title :title="strDate + '：生产数据'" type="h3" color="red" /></view>
|
|
<view class="info">
|
|
<!-- <uni-title :title="'天然气'" type="h3" color="blue" /> -->
|
|
<view v-for="(row, rowIndex) in groupedData" :key="rowIndex" class="data-row">
|
|
<uni-row>
|
|
<uni-col v-for="(item, colIndex) in row" :key="colIndex" :span="7">
|
|
<text style="color: black; font-size: 32; font-weight: bold">{{ item.gas }}</text>
|
|
<view class="value-group">
|
|
<text style="color: gray; font-size: 24">当日量:</text>
|
|
<text style="color: blue; font-size: 28; font-weight: bold">{{ item.dailyVolume }}</text>
|
|
<text style="color: gray; font-size: 24">年累计:</text>
|
|
<text style="color: blue; font-size: 28; font-weight: bold">{{ item.yearVolume }}</text>
|
|
</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, computed, nextTick } from 'vue';
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
import { queryJinriShengchansj, queryYearShengchansj } from '@/api/shengchan.js';
|
|
import { formatDate, getDateAfterDays } from '@/utils/dateTime.js';
|
|
import { beforeJump } from '@/utils/index.js';
|
|
import { useStore } from '@/store';
|
|
const store = useStore();
|
|
import dataCom from '@/bpm/dataCom.vue';
|
|
|
|
const shishiArr = ref([
|
|
{
|
|
gas: '气井气',
|
|
dailyVolume: '',
|
|
yearVolume: ''
|
|
},
|
|
{
|
|
gas: '伴生气',
|
|
dailyVolume: '',
|
|
yearVolume: ''
|
|
},
|
|
{
|
|
gas: '外部气',
|
|
dailyVolume: '',
|
|
yearVolume: ''
|
|
},
|
|
{
|
|
gas: '站输差',
|
|
dailyVolume: '',
|
|
yearVolume: ''
|
|
},
|
|
{
|
|
gas: '线输差',
|
|
dailyVolume: '',
|
|
yearVolume: ''
|
|
},
|
|
{
|
|
gas: '综合输差',
|
|
dailyVolume: '',
|
|
yearVolume: ''
|
|
}
|
|
]);
|
|
|
|
onMounted(() => {
|
|
getJinriShengchansj();
|
|
getYearShengchansj();
|
|
});
|
|
|
|
const strDate = ref('');
|
|
|
|
const dataJinri = ref([]);
|
|
const dataJinriSum = ref([]);
|
|
const dataJinriSumUnit = ref([]);
|
|
|
|
// 计算属性自动分组
|
|
const groupedData = computed(() => {
|
|
const groups = [];
|
|
for (let i = 0; i < shishiArr.value.length; i += 3) {
|
|
groups.push(shishiArr.value.slice(i, i + 3));
|
|
}
|
|
return groups;
|
|
});
|
|
const getJinriShengchansj = () => {
|
|
const now = new Date();
|
|
if (now.getHours() < 11) {
|
|
strDate.value = formatDate(getDateAfterDays(now, -1)).toString(); //11点之前 头一天的数据
|
|
} else {
|
|
strDate.value = formatDate(now).toString();
|
|
}
|
|
let queryParms = {};
|
|
dataJinri.value = [];
|
|
dataJinriSum.value = [];
|
|
dataJinriSumUnit.value = [];
|
|
queryParms.rqDate = strDate.value;
|
|
queryParms.pageSize = 100;
|
|
console.log(queryParms);
|
|
queryJinriShengchansj(queryParms).then((res) => {
|
|
if (res.success) {
|
|
console.log(res);
|
|
dataJinri.value = res.result.records;
|
|
dataJinriSumUnit.value = sumByUnit(dataJinri.value); //包含gas unit rq cq totalGas
|
|
console.log(dataJinriSumUnit.value);
|
|
// 使用 nextTick 等待 DOM 更新
|
|
nextTick();
|
|
getYearShengchansj(); //再获取今年以来的数据
|
|
}
|
|
});
|
|
};
|
|
const getYearShengchansj = () => {
|
|
const now = new Date();
|
|
let year = formatDate(now).split('-')[0];
|
|
let queryParms = {};
|
|
queryParms.yearStart = year;
|
|
queryParms.yearEnd = year;
|
|
|
|
// console.log(2, queryParms.value);
|
|
queryYearShengchansj(queryParms).then((res) => {
|
|
if (res.success) {
|
|
try {
|
|
// console.log(res.result);
|
|
let yearData = res.result[year];
|
|
console.log(dataJinriSumUnit.value.length, dataJinriSumUnit.value, yearData.length, yearData);
|
|
dataJinriSumUnit.value.forEach((item) => {
|
|
yearData.forEach((itemYear) => {
|
|
// console.log(item, itemYear);
|
|
if (item.unit === itemYear.unit) {
|
|
item.yearVolume = itemYear.yearSum || 0;
|
|
}
|
|
});
|
|
});
|
|
dataJinriSum.value = sumByGas(dataJinriSumUnit.value);
|
|
console.log(dataJinriSum.value);
|
|
shishiArr.value.forEach((item) => {
|
|
dataJinriSum.value.forEach((itemjinri) => {
|
|
if (item.gas === itemjinri.gas) {
|
|
// if (item.gas.includes('线')) {
|
|
// item.dailyVolume = itemjinri.totalGas.toFixed(4);
|
|
// } else {
|
|
item.dailyVolume = itemjinri.rq.toFixed(4);
|
|
item.yearVolume = itemjinri.yearVolume.toFixed(4);
|
|
// }
|
|
}
|
|
});
|
|
});
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
function sumByGas(records) {
|
|
console.log(records);
|
|
const summaryMap = {};
|
|
try {
|
|
records.forEach((record) => {
|
|
const gas = record.gas;
|
|
if (!summaryMap[gas]) {
|
|
// 初始化该 gas 类型的汇总对象
|
|
summaryMap[gas] = {
|
|
gas: gas,
|
|
rq: 0,
|
|
sq: 0,
|
|
totalGas: 0,
|
|
yearVolume: 0
|
|
};
|
|
}
|
|
// 无论是否是第一次遇到该 gas 类型，都进行累加操作
|
|
summaryMap[gas].rq += record.rq || 0;
|
|
summaryMap[gas].sq += record.sq || 0;
|
|
summaryMap[gas].totalGas += record.totalGas || 0;
|
|
summaryMap[gas].yearVolume += record.yearVolume || 0;
|
|
});
|
|
return Object.values(summaryMap);
|
|
} catch (error) {
|
|
//TODO handle the exception
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
function sumByUnit(records) {
|
|
console.log(records);
|
|
const summaryMap = {};
|
|
try {
|
|
records.forEach((record) => {
|
|
const unit = record.unit;
|
|
if (!summaryMap[unit]) {
|
|
// 初始化该 gas 类型的汇总对象
|
|
summaryMap[unit] = {
|
|
unit: unit,
|
|
gas: record.gas,
|
|
rq: 0,
|
|
sq: 0,
|
|
totalGas: 0,
|
|
yearVolume: 0
|
|
};
|
|
}
|
|
// 无论是否是第一次遇到该 unit 类型，都进行累加操作
|
|
summaryMap[unit].rq += record.rq || 0;
|
|
summaryMap[unit].sq += record.sq || 0;
|
|
summaryMap[unit].totalGas += record.totalGas || 0;
|
|
summaryMap[unit].yearVolume += record.yearVolume || 0;
|
|
});
|
|
return Object.values(summaryMap);
|
|
} catch (error) {
|
|
//TODO handle the exception
|
|
console.log(error);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// .container {
|
|
// padding: 20rpx;
|
|
// background-color: #f8f8f8;
|
|
// min-height: 100vh;
|
|
// }
|
|
|
|
.content {
|
|
padding: 0 30rpx 20rpx 30rpx;
|
|
}
|
|
|
|
.card-content {
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.data-row {
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.value-group {
|
|
background-color: aliceblue;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-color: #ff00ff;
|
|
gap: 5px;
|
|
}
|
|
.uni-col {
|
|
margin-right: 10px;
|
|
background-color: #f8f8f8;
|
|
border-radius: 15rpx;
|
|
}
|
|
.wrapper {
|
|
padding: 0 30rpx;
|
|
// transform: translateY(-50rpx);
|
|
|
|
.onduty {
|
|
background: #ffffff;
|
|
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
|
|
border-radius: 16rpx;
|
|
padding: 20rpx 24rpx 24rpx 24rpx;
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
background-size: 44rpx 12rpx;
|
|
background-repeat: no-repeat;
|
|
background-position: left bottom;
|
|
}
|
|
|
|
.info {
|
|
background: #f8f8f8;
|
|
border-radius: 8rpx;
|
|
text-align: left;
|
|
width: 642rpx;
|
|
margin-top: 23rpx;
|
|
|
|
.info_title {
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
padding: 24rpx 0;
|
|
border-bottom: 1px solid #efefef;
|
|
|
|
view {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.data_box {
|
|
font-size: 24rpx;
|
|
padding-bottom: 24rpx;
|
|
color: #888888;
|
|
|
|
.first {
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
|
|
.data {
|
|
margin-top: 23rpx;
|
|
|
|
view {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.more {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
text-align: right;
|
|
|
|
image {
|
|
width: 10rpx;
|
|
height: 18rpx;
|
|
}
|
|
}
|
|
|
|
.list_wrapper {
|
|
background: #ffffff;
|
|
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
|
|
border-radius: 16rpx;
|
|
padding: 26rpx 24rpx 24rpx 24rpx;
|
|
position: relative;
|
|
margin-top: 30rpx;
|
|
width: 642rpx;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
top: 100rpx;
|
|
left: 0;
|
|
content: ' ';
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #efefef;
|
|
}
|
|
|
|
.zhidu {
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
justify-content: flex-end;
|
|
padding-top: 40rpx;
|
|
|
|
view {
|
|
width: 120rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
|
|
&:first-child {
|
|
margin-right: 40rpx;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
position: relative;
|
|
color: #3179d6;
|
|
|
|
&::after {
|
|
content: ' ';
|
|
width: 120rpx;
|
|
height: 60rpx;
|
|
border-radius: 60rpx;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
position: absolute;
|
|
background-color: rgba(49, 121, 214, 0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.list_title {
|
|
text-align: center;
|
|
padding-bottom: 29rpx;
|
|
font-size: 32rpx;
|
|
color: #666666;
|
|
|
|
.active {
|
|
position: relative;
|
|
color: #3179d6;
|
|
|
|
&::after {
|
|
content: ' ';
|
|
width: 120rpx;
|
|
height: 70rpx;
|
|
border-radius: 70rpx;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
position: absolute;
|
|
background-color: rgba(49, 121, 214, 0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.list_box {
|
|
margin-top: 24rpx;
|
|
|
|
.list {
|
|
margin-bottom: 24rpx;
|
|
padding: 30rpx 30rpx 35rpx 30rpx;
|
|
// width: 570rpx;
|
|
background: #f8f8f8;
|
|
border-radius: 8rpx;
|
|
|
|
.topic {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.time_Box {
|
|
font-size: 24rpx;
|
|
color: #888888;
|
|
margin-top: 20rpx;
|
|
|
|
.time {
|
|
margin-right: 62rpx;
|
|
}
|
|
|
|
.look {
|
|
position: relative;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
left: -30rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
content: ' ';
|
|
width: 2rpx;
|
|
height: 20rpx;
|
|
background: #999999;
|
|
}
|
|
}
|
|
|
|
image {
|
|
width: 28rpx;
|
|
height: 22rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|