ldeyun/cxc-szcx-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善日报数据，添加日期范围选择组件，和折线图组件

Browse Source
This commit is contained in:
廖德云 2025-03-09 02:06:02 +08:00
parent 680b26c6c1
commit 4784772a65
17 changed files with 2847 additions and 1516 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
pages.json
View File

@ -176,6 +176,15 @@
// "navigationBarTextStyle": "white" // "navigationBarTextStyle": "white"
} }
}, },
{
"path": "pages/views/shengchan/ribaoshuju/rbsjLsxq",
"style": {
// "navigationStyle": "custom"
"navigationBarTitleText": "历史详情",
"enablePullDownRefresh": false,
"navigationBarTextStyle": "white"
}
},
{ {
"path": "pages/userlist/index", "path": "pages/userlist/index",
"style": { "style": {

444
pages/product/NatrueGas/index.vue
View File

@ -1,444 +0,0 @@
<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>

35
pages/product/index.vue
View File

@ -1,35 +0,0 @@
<template>
<view>
<view class="nav">生产经营数据</view>
<view class="placeholder"></view>
<ng-data></ng-data>
</view>
</template>
<script setup>
const res = wx.getSystemInfoSync();
const statusHeight = res.statusBarHeight; //状态栏高度
const cusnavbarheight = statusHeight + 44 + 'px';
import ngData from './NatrueGas/index.vue';
</script>
<style lang="scss" scoped>
.nav {
width: calc(100% - 60rpx);
padding: 0 30rpx;
height: v-bind(cusnavbarheight);
font-size: 24rpx;
color: #ffffff;
position: fixed;
top: 0;
left: 0;
z-index: 99;
background-image: url('../../static/my/navbg.png');
background-repeat: no-repeat;
background-size: 750rpx 458rpx;
}
.placeholder {
height: v-bind(cusnavbarheight);
}
</style>

779
pages/views/renliziyuan/renyuanxinxi/tongji.vue
View File

@ -6,8 +6,7 @@
</uni-row> </uni-row>
<uni-row style="margin-bottom: 20rpx; margin-left: 30rpx; margin-right: 30rpx"> <uni-row style="margin-bottom: 20rpx; margin-left: 30rpx; margin-right: 30rpx">
<uni-col :span="24"> <uni-col :span="24">
<trq-depart-select v-model="orgCode" returnCodeOrID="orgCode" <trq-depart-select v-model="orgCode" returnCodeOrID="orgCode" @change="departChange"></trq-depart-select>
@change="departChange"></trq-depart-select>
</uni-col> </uni-col>
</uni-row> </uni-row>
<!-- 概览统计 --> <!-- 概览统计 -->
@ -72,7 +71,7 @@
</uni-col> </uni-col>
<uni-col :span="6"> <uni-col :span="6">
<view class="dataStyle"> <view class="dataStyle">
<span @click="detail(item)" style="color: red;">详情</span> <span @click="detail(item)" style="color: red">详情</span>
<!-- <button size="mini" type="primary" @click="detail(item)">详情</button> --> <!-- <button size="mini" type="primary" @click="detail(item)">详情</button> -->
</view> </view>
</uni-col> </uni-col>
@ -83,295 +82,290 @@
</template> </template>
<script setup> <script setup>
import { import { ref, reactive, onMounted } from 'vue';
ref, import * as echarts from 'echarts';
reactive,
onMounted
} from 'vue';
import * as echarts from 'echarts';
import { import { queryRenyuanByDepartID } from '@/api/renyuan.js';
queryRenyuanByDepartID
} from '@/api/renyuan.js';
// 存储下方组件的高度 // 存储下方组件的高度
const bottomHeight = ref(0); const bottomHeight = ref(0);
// 新增加载状态 // 新增加载状态
const isLoading = ref(false); const isLoading = ref(false);
const orgCode = ref(''); const orgCode = ref('');
const rawData = ref([]); const rawData = ref([]);
const tableData = ref([]); const tableData = ref([]);
const summary = reactive({ const summary = reactive({
total: 0, total: 0,
avgAge: 0 avgAge: 0
});
const chart = ref(null);
const chartOption = ref({});
const drillPopup = ref(null);
const drillList = ref([]);
const drillTitle = ref('');
function detail(record) {
// console.log(record)
uni.navigateTo({
url: '/pages/views/renliziyuan/renyuanxinxi/detail?data=' + encodeURIComponent(JSON.stringify(record))
}); });
const chart = ref(null); }
const chartOption = ref({}); // 计算年龄
const drillPopup = ref(null); const calculateAge = (birthDate) => {
const drillList = ref([]); const today = new Date();
const drillTitle = ref(''); const birth = new Date(birthDate);
let age = today.getFullYear() - birth.getFullYear();
function detail(record) { const monthDiff = today.getMonth() - birth.getMonth();
// console.log(record) if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
uni.navigateTo({ age--;
url: '/pages/views/renliziyuan/renyuanxinxi/detail?data=' + encodeURIComponent(JSON.stringify(record))
});
} }
// 计算年龄initChart return age;
const calculateAge = (birthDate) => { };
const today = new Date(); // 加载数据
const birth = new Date(birthDate); const departChange = async (e, data) => {
let age = today.getFullYear() - birth.getFullYear(); tableData.value = [];
const monthDiff = today.getMonth() - birth.getMonth(); console.log(e);
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) { orgCode.value = e;
age--; try {
} // 显示加载状态
return age;
};
// 加载数据
const departChange = async (e, data) => {
tableData.value = [];
console.log(e);
orgCode.value = e;
try {
// 显示加载状态
isLoading.value = true; isLoading.value = true;
if (orgCode.value.length <= 6) { if (orgCode.value.length <= 6) {
console.log(123242353); console.log(123242353);
uni.showToast({
title: '全厂数据较多，请选 下一层级...',
icon: 'none',
duration: 1000
});
isLoading.value = false;
return;
} else {
uni.showLoading({
title: '数据加载中...',
mask: true
});
}
let params = {
pageSize: 3000,
fields: ['xm', 'nl', 'xb', 'xb_dictText', 'orgCode', 'jcdw', 'jcxd', 'jcxdCode']
};
if (orgCode.value.length <= 9) {
params.orgCode = orgCode.value;
} else {
params.jcxd_code = orgCode.value;
}
queryRenyuanByDepartID(params)
.then((res) => {
if (res.success) {
processData(res.result.records);
// 隐藏加载状态
isLoading.value = false;
uni.hideLoading();
}
})
.catch((err) => {
console.log(err);
uni.showToast({
title: '数据加载失败',
icon: 'none',
duration: 1000
});
});
} catch (error) {
console.log(error);
uni.showToast({ uni.showToast({
title: '数据加载失败', title: '全厂数据较多，请选 下一层级...',
icon: 'none', icon: 'none',
duration: 1000 duration: 1000
}); });
} finally {
// 隐藏加载状态
isLoading.value = false; isLoading.value = false;
uni.hideLoading(); return;
} else {
uni.showLoading({
title: '数据加载中...',
mask: true
});
} }
};
// 数据处理 let params = {
const processData = (data) => { pageSize: 3000,
// 添加年龄字段并过滤有效数据 fields: ['xm', 'nl', 'xb', 'xb_dictText', 'orgCode', 'jcdw', 'jcxd', 'jcxdCode']
const validData = data };
.map((item) => ({ if (orgCode.value.length <= 9) {
...item, params.orgCode = orgCode.value;
nl: calculateAge(item.cssj) } else {
})) params.jcxd_code = orgCode.value;
.filter((item) => item.nl >= 21 && item.nl <= 64); }
// 计算概览数据 queryRenyuanByDepartID(params)
summary.total = validData.length; .then((res) => {
summary.avgAge = validData.reduce((sum, cur) => sum + cur.nl, 0) / summary.total || 0; if (res.success) {
// 生成表格数据 processData(res.result.records);
// tableData.value = validData;
groupsData(validData); // 隐藏加载状态
// 生成图表数据 isLoading.value = false;
generateChartData(validData); uni.hideLoading();
}; }
})
// 计算统计信息... .catch((err) => {
const subOrgStaffs = ref({}); // 按下级单位存储所有人员 console.log(err);
const ageGroupStaffs = ref({}); // 按年龄段存储所有人员 uni.showToast({
title: '数据加载失败',
const groupsData = (data) => { icon: 'none',
// 清空旧数据 duration: 1000
subOrgStaffs.value = {}; });
ageGroupStaffs.value = {}; });
data.reduce((acc, cur) => { } catch (error) {
// console.log(cur) console.log(error);
let subOrg = ''; uni.showToast({
let ageRange = getAgeRange(cur.nl); title: '数据加载失败',
// console.log(cur.orgCode, cur.jcxdCode) icon: 'none',
if (cur.orgCode <= 6) { duration: 1000
subOrg = cur.orgCode;
} else {
subOrg = cur.jcxdCode;
}
// 存储到subOrgStaffs
if (!subOrgStaffs.value[subOrg]) {
subOrgStaffs.value[subOrg] = [];
}
subOrgStaffs.value[subOrg].push(cur);
// 存储到ageGroupStaffs
if (!ageGroupStaffs.value[ageRange]) {
ageGroupStaffs.value[ageRange] = [];
}
ageGroupStaffs.value[ageRange].push(cur);
}); });
}; } finally {
// 隐藏加载状态
isLoading.value = false;
uni.hideLoading();
}
};
// 新增年龄范围计算方法 // 数据处理
const getAgeRange = (age) => { const processData = (data) => {
const ranges = ['21-30岁', '31-40岁', '41-50岁', '51-60岁', '61-64岁']; // 添加年龄字段并过滤有效数据
const index = Math.floor((age - 21) / 10); const validData = data
return ranges[index] || '其他'; .map((item) => ({
}; ...item,
nl: calculateAge(item.cssj)
}))
.filter((item) => item.nl >= 21 && item.nl <= 64);
// 计算概览数据
summary.total = validData.length;
summary.avgAge = validData.reduce((sum, cur) => sum + cur.nl, 0) / summary.total || 0;
// 生成表格数据
// tableData.value = validData;
// 修改后的显示人员列表方法 groupsData(validData);
const showStaffList = (subOrg, ageRange) => { // 生成图表数据
// 从结构化数据中直接获取 generateChartData(validData);
const targetStaffs = subOrgStaffs.value[subOrg].filter((staff) => getAgeRange(staff.nl) === ageRange); };
staffList.value = targetStaffs; // 计算统计信息...
popupTitle.value = `${subOrg} ${ageRange}人员列表（共${targetStaffs.length}人）`; const subOrgStaffs = ref({}); // 按下级单位存储所有人员
popup.value.open(); const ageGroupStaffs = ref({}); // 按年龄段存储所有人员
};
// 新增获取指定单位人员的方法 const groupsData = (data) => {
const getSubOrgStaffs = (subOrgCode) => { // 清空旧数据
return subOrgStaffs.value[subOrgCode] || []; subOrgStaffs.value = {};
}; ageGroupStaffs.value = {};
data.reduce((acc, cur) => {
// console.log(cur)
let subOrg = '';
let ageRange = getAgeRange(cur.nl);
// console.log(cur.orgCode, cur.jcxdCode)
if (cur.orgCode <= 6) {
subOrg = cur.orgCode;
} else {
subOrg = cur.jcxdCode;
}
// 新增获取指定年龄段人员的方法 // 存储到subOrgStaffs
const getAgeGroupStaffs = (ageRange) => { if (!subOrgStaffs.value[subOrg]) {
return ageGroupStaffs.value[ageRange] || []; subOrgStaffs.value[subOrg] = [];
}; }
subOrgStaffs.value[subOrg].push(cur);
// 生成图表数据（修改部分） // 存储到ageGroupStaffs
const generateChartData = (data) => { if (!ageGroupStaffs.value[ageRange]) {
// 按基层单位分组 ageGroupStaffs.value[ageRange] = [];
const ageRanges = ['21-30岁', '31-40岁', '41-50岁', '51-60岁', '61-64岁']; }
const jcdwGroups = data.reduce((acc, cur) => { ageGroupStaffs.value[ageRange].push(cur);
if (!acc[cur.jcdw]) { });
acc[cur.jcdw] = { };
ageGroups: [0, 0, 0, 0, 0] // 21-30,31-40,41-50,51-60,61-64
};
}
const ageGroup = Math.floor((cur.nl - 21) / 10);
// console.log(ageGroup, cur.jcdw)
if (ageGroup >= 0 && ageGroup <= 4) {
acc[cur.jcdw].ageGroups[ageGroup]++;
}
return acc;
}, {});
// 生成分组柱状图配置 // 新增年龄范围计算方法
const xData = Object.keys(jcdwGroups); const getAgeRange = (age) => {
const ranges = ['21-30岁', '31-40岁', '41-50岁', '51-60岁', '61-64岁'];
const index = Math.floor((age - 21) / 10);
return ranges[index] || '其他';
};
const seriesData = ageRanges.map((range, index) => ({ // 修改后的显示人员列表方法
name: range, const showStaffList = (subOrg, ageRange) => {
type: 'bar', // 从结构化数据中直接获取
data: xData.map((jcdw) => jcdwGroups[jcdw].ageGroups[index] || 0), const targetStaffs = subOrgStaffs.value[subOrg].filter((staff) => getAgeRange(staff.nl) === ageRange);
itemStyle: {
color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE'][index]
},
// 显示数值标签
label: {
show: true,
position: 'top'
}
// 设置柱宽为 20 像素
// barWidth: 20
}));
chartOption.value = {
title: {
text: '人员年龄分组统计',
padding: [0, 0, 0, 30]
},
toolbox: {
padding: [0, 30, 0, 0],
show: true,
feature: {
//工具配置项
restore: { staffList.value = targetStaffs;
show: true //是否显示该工具 popupTitle.value = `${subOrg} ${ageRange}人员列表（共${targetStaffs.length}人）`;
}, popup.value.open();
saveAsImage: { };
show: true //是否显示该工具
} // 新增获取指定单位人员的方法
} const getSubOrgStaffs = (subOrgCode) => {
}, return subOrgStaffs.value[subOrgCode] || [];
// tooltip: { };
// trigger: 'axis',
// axisPointer: { // 新增获取指定年龄段人员的方法
// type: 'shadow', const getAgeGroupStaffs = (ageRange) => {
// label: { return ageGroupStaffs.value[ageRange] || [];
// show: false };
// }
// } // 生成图表数据（修改部分）
// }, const generateChartData = (data) => {
grid: { // 按基层单位分组
top: '15%', const ageRanges = ['21-30岁', '31-40岁', '41-50岁', '51-60岁', '61-64岁'];
left: '4%', const jcdwGroups = data.reduce((acc, cur) => {
right: '4%', if (!acc[cur.jcdw]) {
bottom: '10%', acc[cur.jcdw] = {
containLabel: true ageGroups: [0, 0, 0, 0, 0] // 21-30,31-40,41-50,51-60,61-64
}, };
legend: { }
data: ageRanges, const ageGroup = Math.floor((cur.nl - 21) / 10);
itemGap: 5, // console.log(ageGroup, cur.jcdw)
padding: [0, 15, 0, 15], if (ageGroup >= 0 && ageGroup <= 4) {
y: 'bottom', acc[cur.jcdw].ageGroups[ageGroup]++;
itemHeight: 8, //高 }
itemWidth: 8, //宽 return acc;
type: 'scroll' }, {});
},
xAxis: { // 生成分组柱状图配置
type: 'category', const xData = Object.keys(jcdwGroups);
data: xData,
axisLabel: { const seriesData = ageRanges.map((range, index) => ({
color: '#7F84B5', name: range,
fontWeight: 300, type: 'bar',
interval: 0, data: xData.map((jcdw) => jcdwGroups[jcdw].ageGroups[index] || 0),
rotate: 0 itemStyle: {
color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE'][index]
},
// 显示数值标签
label: {
show: true,
position: 'top'
}
// 设置柱宽为 20 像素
// barWidth: 20
}));
chartOption.value = {
title: {
text: '人员年龄分组统计',
padding: [0, 0, 0, 30]
},
toolbox: {
padding: [0, 30, 0, 0],
show: true,
feature: {
//工具配置项
restore: {
show: true //是否显示该工具
}, },
padding: [0, 10, 0, 10], saveAsImage: {
axisTick: { show: true //是否显示该工具
show: false //刻度线
},
axisLine: {
show: false //不显示坐标轴线
} }
}
},
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow',
// label: {
// show: false
// }
// }
// },
grid: {
top: '15%',
left: '4%',
right: '4%',
bottom: '10%',
containLabel: true
},
legend: {
data: ageRanges,
itemGap: 5,
padding: [0, 15, 0, 15],
y: 'bottom',
itemHeight: 8, //高
itemWidth: 8, //宽
type: 'scroll'
},
xAxis: {
type: 'category',
data: xData,
axisLabel: {
color: '#7F84B5',
fontWeight: 300,
interval: 0,
rotate: 0
}, },
yAxis: [{ padding: [0, 10, 0, 10],
axisTick: {
show: false //刻度线
},
axisLine: {
show: false //不显示坐标轴线
}
},
yAxis: [
{
show: true, show: true,
boundaryGap: false, //解决数据与线不对应问题 boundaryGap: false, //解决数据与线不对应问题
type: 'value', type: 'value',
@ -395,146 +389,147 @@
axisLine: { axisLine: {
show: false //不显示坐标轴线 show: false //不显示坐标轴线
} }
}], }
],
series: seriesData series: seriesData
};
// 初始化图表
setTimeout(async () => {
if (!chart.value) return;
const myChart = await chart.value.init(echarts);
myChart.setOption(chartOption.value);
myChart.on('click', (params) => {
console.log(params.seriesName);
tableData.value = getAgeGroupStaffs(params.seriesName);
});
}, 300);
// #ifdef APP
getHeight();
// #endif
}; };
onMounted(() => {
// #ifdef APP
getHeight();
// #endif
});
// #ifdef APP
const getHeight = () => {
// 获取屏幕高度
const systemInfo = uni.getSystemInfoSync();
const screenHeight = systemInfo.screenHeight;
// 创建选择器查询对象
const query = uni.createSelectorQuery();
// 获取上方组件的高度
query
.select('#top1')
.boundingClientRect((rect1) => {
// 计算上方组件高度总和
const topComponentsHeight = rect1.height;
// 计算下方组件的高度
bottomHeight.value = screenHeight - topComponentsHeight - 415;
})
.exec();
};
// #endif
// 初始化图表 // 初始化图表
const initChart = () => { setTimeout(async () => {
setTimeout(async () => { if (!chart.value) return;
if (!chart.value) return; const myChart = await chart.value.init(echarts);
const myChart = await chart.value.init(echarts); myChart.setOption(chartOption.value);
myChart.setOption(chartOption.value); myChart.on('click', (params) => {
}, 300); console.log(params.seriesName);
}; tableData.value = getAgeGroupStaffs(params.seriesName);
});
}, 300);
// #ifdef APP
getHeight();
// #endif
};
onMounted(() => {
// #ifdef APP
getHeight();
// #endif
});
// #ifdef APP
const getHeight = () => {
// 获取屏幕高度
const systemInfo = uni.getSystemInfoSync();
const screenHeight = systemInfo.screenHeight;
// 创建选择器查询对象
const query = uni.createSelectorQuery();
// 获取上方组件的高度
query
.select('#top1')
.boundingClientRect((rect1) => {
// 计算上方组件高度总和
const topComponentsHeight = rect1.height;
// 计算下方组件的高度
bottomHeight.value = screenHeight - topComponentsHeight - 415;
})
.exec();
};
// #endif
// 初始化图表
const initChart = () => {
setTimeout(async () => {
if (!chart.value) return;
const myChart = await chart.value.init(echarts);
myChart.setOption(chartOption.value);
}, 300);
};
</script> </script>
<style scoped> <style scoped>
.container { .container {
margin: 20, 20, 20, 20rpx; margin: 20, 20, 20, 20rpx;
} }
.input-group { .input-group {
display: flex; display: flex;
gap: 20rpx; gap: 20rpx;
margin-bottom: 30rpx; margin-bottom: 30rpx;
} }
.input { .input {
flex: 1; flex: 1;
border: 1rpx solid #ddd; border: 1rpx solid #ddd;
padding: 15rpx; padding: 15rpx;
border-radius: 8rpx; border-radius: 8rpx;
} }
.query-btn { .query-btn {
background: #007aff; background: #007aff;
color: white; color: white;
padding: 0 40rpx; padding: 0 40rpx;
border-radius: 8rpx; border-radius: 8rpx;
} }
.stats-box { .stats-box {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin: 30rpx 0; margin: 30rpx 0;
padding: 20rpx; padding: 20rpx;
background: #f8f8f8; background: #f8f8f8;
border-radius: 12rpx; border-radius: 12rpx;
} }
.stat-item { .stat-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.label { .label {
font-size: 24rpx; font-size: 24rpx;
color: #666; color: #666;
} }
.value { .value {
font-size: 36rpx; font-size: 36rpx;
font-weight: bold; font-weight: bold;
color: #0000ff; color: #0000ff;
} }
.chart-container { .chart-container {
height: 400rpx; height: 400rpx;
margin-top: 20rpx; margin-top: 20rpx;
} }
.titleStyle { .titleStyle {
font-size: 12px; font-size: 12px;
color: #747474; color: #747474;
line-height: 30px; line-height: 30px;
height: 30px; height: 30px;
background: #f2f9fc; background: #f2f9fc;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
border-left: 1px solid #919191; border-left: 1px solid #919191;
border-bottom: 1px solid #919191; border-bottom: 1px solid #919191;
} }
/* 内容样式 */ /* 内容样式 */
.dataStyle { .dataStyle {
max-font-size: 14px; max-font-size: 14px;
/* 最大字体限制 */ /* 最大字体限制 */
min-font-size: 10px; min-font-size: 10px;
/* 最小字体限制 */ /* 最小字体限制 */
font-size: 12px; font-size: 12px;
color: #00007f; color: #00007f;
line-height: 30px; line-height: 30px;
height: 30px; height: 30px;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
border-bottom: 1px solid #919191; border-bottom: 1px solid #919191;
border-left: 1px solid #919191; border-left: 1px solid #919191;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
</style> </style>

83
pages/views/shengchan/index.vue
View File

@ -1,52 +1,61 @@
<template> <template>
<view> <view>
<!-- <view class="nav">生产经营数据</view> --> <view class="nav"></view>
<view class="placeholder">生产经营数据</view> <view class="placeholder"></view>
<view style="width: 100%; display: grid; place-items: center">
<uni-title :title="dateDate + '：生产经营情况'" type="h1" color="blue" />
</view>
<trq-data></trq-data> <trq-data></trq-data>
<yy-data></yy-data> <yy-data></yy-data>
</view> </view>
</template> </template>
<script setup> <script setup>
import { import { formatDate, getDateAfterDays } from '@/utils/dateTime.js';
formatDate,
getDateAfterDays
} from '@/utils/dateTime.js';
const res = wx.getSystemInfoSync();
const statusHeight = res.statusBarHeight; //状态栏高度
const cusnavbarheight = statusHeight + 44 + 'px';
import trqData from './ribaoshuju/trqRbsj.vue'; import { ref, onMounted, computed, nextTick, watchEffect } from 'vue';
import yyData from './ribaoshuju/yyRbsj.vue';
const strDate = (() => { const res = wx.getSystemInfoSync();
const now = new Date(); const statusHeight = res.statusBarHeight; //状态栏高度
if (now.getHours() < 11) { const cusnavbarheight = statusHeight + 44 + 'px';
return formatDate(getDateAfterDays(now, -1)).toString(); //11点之前 头一天的数据
} else { const dateDate = ref('');
return formatDate(now).toString();
} import trqData from './ribaoshuju/trqRbsj.vue';
}) import yyData from './ribaoshuju/yyRbsj.vue';
const strDate = () => {
const now = new Date();
if (now.getHours() < 11) {
return formatDate(getDateAfterDays(now, -1)); //11点之前 头一天的数据
} else {
return formatDate(now);
}
};
onMounted(() => {
dateDate.value = strDate();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.nav { .nav {
width: calc(100% - 60rpx); width: calc(100% - 60rpx);
padding: 0 30rpx; padding: 0 30rpx;
height: v-bind(cusnavbarheight); height: v-bind(cusnavbarheight);
font-size: 24rpx; font-size: 24rpx;
color: #ffffff; color: #ffffff;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: 99; z-index: 99;
background-image: url('../../static/my/navbg.png'); background-image: url('../../static/my/navbg.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 750rpx 458rpx; background-size: 750rpx 458rpx;
} }
.placeholder { .placeholder {
height: v-bind(cusnavbarheight); height: v-bind(cusnavbarheight);
} }
</style> </style>

302
pages/views/shengchan/ribaoshuju/rbsjLsxq.vue Normal file
View File

@ -0,0 +1,302 @@
<template>
<view>
<view class="stats-container">
<uni-title :title="name.unit + '历史数据---单位（万方）'" color="blue" type="h2"></uni-title>
</view>
<view class="dateSelect">
<cxc-szcx-dateRangeSelect v-model="dateRange"></cxc-szcx-dateRangeSelect>
</view>
<cxc-szcx-lineChart :dataList="dataList" x-field="rqDate" y-field="rq" legend-field="unit" :reference-value="0"></cxc-szcx-lineChart>
<view style="margin: 0 15px">
<view class="stats-container">
<view class="stats-item">最大值: {{ dataStats.max }}</view>
<view class="stats-item">最小值: {{ dataStats.min }}</view>
<view class="stats-item">平均值: {{ dataStats.average }}</view>
</view>
<view class="table">
<!-- 表头 -->
<view class="tr header">
<view class="th1">序号</view>
<view class="th">名称</view>
<view class="th">日期</view>
<view class="th">日气量</view>
</view>
<scroll-view scroll-X="true" scroll-Y="true" class="table-container">
<!-- 表格内容 -->
<view class="tr" v-for="(item, index) in dataList" :key="index" :class="{ even: index % 2 === 0 }">
<view class="td1">{{ index + 1 }}</view>
<view class="td">{{ item.unit }}</view>
<view class="td">{{ item.rqDate }}</view>
<view class="td" :class="{ negative: item.rq < 0 }">
{{ item.rq }}
</view>
</view>
<!-- 空数据提示 -->
<view v-if="!dataList.length" class="empty">暂无相关数据</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted, computed, nextTick, watchEffect, warn, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { queryJinriShengchansj, queryJinriYuanyouShengchansj } from '@/api/shengchan.js';
import { formatDate, getDateAfterDays, getDateAfterMonths } from '@/utils/dateTime.js';
const name = ref({});
const type = ref('');
const dateRange = ref([]);
const dataList = ref([]);
const endDate = ref('');
const startDate = ref('');
const dataStats = ref({ min: 0, max: 0, avg: 0 });
const getJinriShengchansj = (tempDateRange) => {
console.log(tempDateRange);
// 添加日期有效性检查
if (!tempDateRange || tempDateRange.some((date) => !(date instanceof Date) || isNaN(date.getTime()))) {
console.error('收到无效日期范围:', tempDateRange);
return;
}
let queryParms = {};
dataList.value = [];
queryParms.gas = name.value.gas;
queryParms.unit = name.value.unit;
queryParms.rqDate_begin = formatDate(tempDateRange[0]);
queryParms.rqDate_end = formatDate(tempDateRange[1]);
queryParms.pageSize = 500;
// 添加参数有效性检查
if (!queryParms.rqDate_begin || !queryParms.rqDate_end) {
console.error('参数格式化失败:', queryParms);
return;
}
console.log(queryParms);
queryJinriShengchansj(queryParms).then((res) => {
if (res.success) {
console.log(res);
dataList.value = res.result.records;
dataStats.value = calculateStats(dataList.value, 'rq');
}
});
};
const getJinriYuanyouShengchansj = (tempDateRange) => {
console.log(tempDateRange);
// 添加日期有效性检查
if (!tempDateRange || tempDateRange.some((date) => !(date instanceof Date) || isNaN(date.getTime()))) {
console.error('收到无效日期范围:', tempDateRange);
return;
}
let queryParms = {};
dataList.value = [];
queryParms.dw = name.value.dw;
queryParms.scrq_begin = formatDate(tempDateRange[0]);
queryParms.scrq_end = formatDate(tempDateRange[1]);
queryParms.pageSize = 500;
// 添加参数有效性检查
if (!queryParms.rqDate_begin || !queryParms.rqDate_end) {
console.error('参数格式化失败:', queryParms);
return;
}
console.log(queryParms);
queryJinriYuanyouShengchansj(queryParms).then((res) => {
if (res.success) {
console.log(res);
dataList.value = res.result.records;
dataStats.value = calculateStats(dataList.value, 'rcwy');
}
});
};
function calculateStats(data, field) {
// 过滤掉 field 字段值为 null 或 undefined 的数据
const validData = data.filter((item) => item[field] !== null && item[field] !== undefined);
if (validData.length === 0) {
return {
max: null,
min: null,
average: null
};
}
// 初始化最大值、最小值和总和
let max = validData[0][field];
let min = validData[0][field];
let sum = 0;
// 遍历有效数据
for (let i = 0; i < validData.length; i++) {
const value = validData[i][field];
// 更新最大值
if (value > max) {
max = value;
}
// 更新最小值
if (value < min) {
min = value;
}
// 累加值到总和
sum += value;
}
// 计算平均值
const average = (sum / validData.length).toFixed(4);
return {
max: max,
min: min,
average: average
};
}
// 修改后（正确）
watch(
[() => type.value, dateRange], // 监听 type 和 dateRange
([newType, newDateRange]) => {
if (!newDateRange || !(newDateRange[0] instanceof Date) || !(newDateRange[1] instanceof Date)) {
console.error('无效的日期范围:', newDateRange);
return;
}
console.log(newType, newDateRange);
switch (
newType // 直接使用 newType
) {
case 'trq':
getJinriShengchansj(newDateRange);
break;
case 'yy':
getJinriYuanyouShengchansj(newDateRange);
break;
default:
console.warn('未知类型:', newType);
}
},
{ immediate: true, deep: true }
);
onMounted(() => {
// nextTick();
// getJinriShengchansj(dateRange.value);
});
onLoad((options) => {
name.value = JSON.parse(options.data);
type.value = options.type;
// console.log(name.value, type.value);
const now = new Date();
if (now.getHours() < 11) {
endDate.value = getDateAfterDays(now, -1); //11点之前 头一天的数据
startDate.value = getDateAfterMonths(endDate.value, -1); //11点之前 头一天的数据
} else {
endDate.value = now;
startDate.value = getDateAfterMonths(endDate.value, -1); //11点之前 头一天的数据
}
dateRange.value = [startDate.value, endDate.value];
});
</script>
<style scoped>
.table-container {
width: 100%;
height: 40vh;
overflow: hidden;
}
.table {
min-width: 100%;
border: 2rpx solid #e8e8e8;
.tr {
display: flex;
border-bottom: 2rpx solid #e8e8e8;
&.header {
background-color: #fafafa;
font-weight: 600;
}
&.even {
background-color: #f8f8f8;
}
}
.th,
.td {
flex: 1;
min-width: 80rpx;
padding: 10rpx;
font-size: 22rpx;
font-weight: bold;
color: #333;
text-align: center;
white-space: nowrap;
height: 30rpx;
vertical-align: middle;
}
.th1,
.td1 {
flex: 1;
max-width: 40rpx;
padding: 10rpx;
font-size: 22rpx;
font-weight: bold;
color: #333;
text-align: center;
white-space: nowrap;
height: 30rpx;
vertical-align: middle;
}
.th {
background-color: #f0f0f0;
}
.td.negative {
color: #ff4444;
font-weight: 500;
}
}
.empty {
padding: 40rpx;
text-align: center;
color: #888;
font-size: 16rpx;
}
.stats-container {
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
background-color: #f5f5f5;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 10px;
margin: 15 15px;
}
.dateSelect {
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
background-color: #f5f5f5;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 5px;
margin: 10px;
}
.stats-item {
font-size: 12px;
color: #00aa00;
font-weight: bold;
}
.stats-item + .stats-item {
border-left: 1px solid #ccc;
padding-left: 16px;
}
</style>

786
pages/views/shengchan/ribaoshuju/trqRbsj.vue
View File

@ -1,6 +1,10 @@
<template> <template>
<view :class="{ gray: store.isgray == 1 }"> <view :class="{ gray: store.isgray == 1 }">
<view style="margin-left: 20rpx;"> <uni-title :title="strDate + '：生产数据'" type="h1" color="red" /> <view class="progress-bar">
<!-- 动态设置宽度和颜色 -->
<view class="progressTime" :style="{ width: `${timePercent}%`, 'background-color': '#00aaff' }"></view>
<!-- 显示带符号的百分比 -->
<text class="progress-text">全年时间进度:{{ timePercent }}%</text>
</view> </view>
<view class="container"> <view class="container">
<view v-for="(item, index) in shishiArr" :key="index" class="card-item" @click="handleCardClick(item.gas)"> <view v-for="(item, index) in shishiArr" :key="index" class="card-item" @click="handleCardClick(item.gas)">
@ -14,6 +18,12 @@
<text class="label">年累计</text> <text class="label">年累计</text>
<text class="value">{{ item.yearVolume || '-' }}</text> <text class="value">{{ item.yearVolume || '-' }}</text>
</view> </view>
<view class="progress-bar">
<!-- 动态设置宽度和颜色 -->
<view class="progress" :style="{ width: `${Math.abs(item.yearPerCent)}%`, 'background-color': item.yearPerCent < 0 ? '#ff4444' : '#007aff' }"></view>
<!-- 显示带符号的百分比 -->
<text v-if="!(item.yearPlan === '' || item.yearPlan === '0')" class="progress-text">{{ item.yearPerCent }}%</text>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -25,424 +35,476 @@
<uni-icons type="closeempty" size="24" color="#666" @click="closePopup"></uni-icons> <uni-icons type="closeempty" size="24" color="#666" @click="closePopup"></uni-icons>
</view> </view>
<scroll-view scroll-X="true" scroll-Y="true" class="table-container"> <view class="table">
<view class="table"> <!-- 表头 -->
<!-- 表头 --> <view class="tr header">
<view class="tr header"> <view class="th1">序号</view>
<view class="th1">序号</view> <view class="th">名称</view>
<view class="th">名称</view> <view class="th">日气量</view>
<view class="th">日气量</view> <view class="th">年累计</view>
<view class="th">总气量 </view> <view class="th1">操作</view>
<view class="th">年累计 </view> </view>
</view> <scroll-view scroll-X="true" scroll-Y="true" class="table-container">
<!-- 表格内容 --> <!-- 表格内容 -->
<view class="tr" v-for="(item, index) in filteredData" :key="index" <view class="tr" v-for="(item, index) in filteredData" :key="index" :class="{ even: index % 2 === 0 }">
:class="{ even: index % 2 === 0 }"> <view class="td1">{{ index + 1 }}</view>
<view class="td1">{{ index }}</view>
<view class="td">{{ item.unit }}</view> <view class="td">{{ item.unit }}</view>
<view class="td" :class="{ negative: item.rq < 0 }"> <view class="td" :class="{ negative: item.rq < 0 }">
{{ formatNumber(item.rq) }} {{ formatNumber(item.rq) }}
</view> </view>
<view class="td">{{ formatNumber(item.totalGas) }}</view>
<view class="td" :class="{ negative: item.yearVolume < 0 }"> <view class="td" :class="{ negative: item.yearVolume < 0 }">
{{ formatNumber(item.yearVolume) }} {{ formatNumber(item.yearVolume) }}
</view> </view>
<view class="td1" style="color: red" @click="goHistory(item)">历史</view>
</view> </view>
<!-- 空数据提示 --> <!-- 空数据提示 -->
<view v-if="!filteredData.length" class="empty"> <view v-if="!filteredData.length" class="empty">暂无相关数据</view>
暂无相关数据 </scroll-view>
</view> </view>
</view>
</scroll-view>
</view> </view>
</uni-popup> </uni-popup>
</view> </view>
</template> </template>
<script setup> <script setup>
import { import { ref, onMounted, computed, nextTick, watchEffect } from 'vue';
ref, import { onLoad } from '@dcloudio/uni-app';
onMounted, import { queryJinriShengchansj, queryYearShengchansj } from '@/api/shengchan.js';
computed, import { formatDate, getDateAfterDays } from '@/utils/dateTime.js';
nextTick, import { beforeJump } from '@/utils/index.js';
watchEffect import { useStore } from '@/store';
} from 'vue'; import { getYearProgress } from '@/utils/dateTime.js';
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(); const store = useStore();
const shishiArr = ref([{ const shishiArr = ref([
gas: '气井气', {
dailyVolume: '', gas: '气井气',
yearVolume: '' dailyVolume: '',
}, yearVolume: '',
{ yearPlan: '7500',
gas: '伴生气', yearPerCent: ''
dailyVolume: '', },
yearVolume: '' {
}, gas: '伴生气',
{ dailyVolume: '',
gas: '外部气', yearVolume: '',
dailyVolume: '', yearPlan: '',
yearVolume: '' yearPerCent: ''
}, },
{ {
gas: '站输差', gas: '外部气',
dailyVolume: '', dailyVolume: '',
yearVolume: '' yearVolume: '',
}, yearPlan: '',
{ yearPerCent: ''
gas: '线输差', },
dailyVolume: '', {
yearVolume: '' gas: '站输差',
}, dailyVolume: '',
{ yearVolume: '',
gas: '综合输差', yearPlan: '',
dailyVolume: '', yearPerCent: ''
yearVolume: '' },
{
gas: '线输差',
dailyVolume: '',
yearVolume: '',
yearPlan: '',
yearPerCent: ''
},
{
gas: '综合输差',
dailyVolume: '',
yearVolume: '',
yearPlan: '100',
yearPerCent: ''
}
]);
const dataJinri = ref([]);
const dataJinriSum = ref([]);
const dataJinriSumUnit = ref([]);
const selectedGas = ref('');
const filteredData = ref([]);
const popup = ref(null);
const timePercent = ref(0);
// 点击卡片处理
const handleCardClick = (gas) => {
selectedGas.value = gas;
filteredData.value = dataJinriSumUnit.value.filter((item) => item.gas === gas);
popup.value.open();
};
// 关闭弹窗
const closePopup = () => {
popup.value.close();
};
onMounted(() => {
getJinriShengchansj();
getYearShengchansj();
timePercent.value = getYearProgress();
});
const strDate = ref('');
// 数字格式化
const formatNumber = (num) => {
if (typeof num !== 'number') return '-';
return num.toFixed(4).replace(/\.?0+$/, '');
};
// 计算属性自动分组
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;
});
// 自动计算综合输差
watchEffect(() => {
const station = shishiArr.value[3]; // 站输差
const line = shishiArr.value[4]; // 线输差
const composite = shishiArr.value[5]; // 综合输差
// 日输气量计算
const dailyStation = parseFloat(station.dailyVolume) || 0;
const dailyLine = parseFloat(line.dailyVolume) || 0;
composite.dailyVolume = (dailyStation + dailyLine).toFixed(4);
// 年输气量计算
const yearStation = parseFloat(station.yearVolume) || 0;
const yearLine = parseFloat(line.yearVolume) || 0;
composite.yearVolume = (yearStation + yearLine).toFixed(4);
composite.yearPerCent = calcPercent(composite.yearPlan, composite.yearVolume);
// console.log(composite);
});
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 dataJinri = ref([]);
const dataJinriSum = ref([]);
const dataJinriSumUnit = ref([]);
const selectedGas = ref('');
const filteredData = ref([]);
const popup = ref(null);
// 点击卡片处理
const handleCardClick = (gas) => {
selectedGas.value = gas;
filteredData.value = dataJinriSumUnit.value.filter(item => item.gas === gas);
popup.value.open();
};
// 关闭弹窗
const closePopup = () => {
popup.value.close();
};
onMounted(() => {
getJinriShengchansj();
getYearShengchansj();
}); });
};
const getYearShengchansj = () => {
const now = new Date();
let year = formatDate(now).split('-')[0];
let queryParms = {};
queryParms.yearStart = year;
queryParms.yearEnd = year;
const strDate = ref(''); // // // console.log(2, queryParms.value);
// 数字格式化 queryYearShengchansj(queryParms).then((res) => {
const formatNumber = (num) => { if (res.success) {
if (typeof num !== 'number') return '-'; try {
return num.toFixed(4).replace(/\.?0+$/, ''); // // // 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) {
item.dailyVolume = itemjinri.rq.toFixed(4);
item.yearVolume = itemjinri.yearVolume.toFixed(4);
item.yearPerCent = calcPercent(item.yearPlan, item.yearVolume);
}
});
});
// 计算属性自动分组 // // console.log(shishiArr);
const groupedData = computed(() => { } catch (error) {
const groups = []; // // console.log(error);
for (let i = 0; i < shishiArr.value.length; i += 3) { }
groups.push(shishiArr.value.slice(i, i + 3));
} }
return groups;
}); });
};
// 自动计算综合输差 function goHistory(val) {
watchEffect(() => { uni.navigateTo({
const station = shishiArr.value[3] // 站输差 url: '/pages/views/shengchan/ribaoshuju/rbsjLsxq?data=' + JSON.stringify(val) + '&type=trq'
const line = shishiArr.value[4] // 线输差 });
const composite = shishiArr.value[5] // 综合输差 }
function calcPercent(yearJihua, yearShiji) {
// 日输气量计算 // 计算进度百分比，避免除数为 0
const dailyStation = parseFloat(station.dailyVolume) || 0 // 确保进度百分比不超过 100
const dailyLine = parseFloat(line.dailyVolume) || 0 let plan = parseFloat(yearJihua === '' ? 0 : yearJihua);
composite.dailyVolume = (dailyStation + dailyLine).toFixed(4) let shiji = parseFloat(yearShiji);
let percent = 0;
// 年输气量计算 // 修改原始计算代码
const yearStation = parseFloat(station.yearVolume) || 0 if (plan > 0) {
const yearLine = parseFloat(line.yearVolume) || 0 percent = (shiji / plan) * 100;
composite.yearVolume = (yearStation + yearLine).toFixed(4) percent = Math.min(percent, 100); // 限制最大100%
}) }
return parseFloat(percent.toFixed(2)); // 转为数值
}
const getJinriShengchansj = () => { function sumByGas(records) {
const now = new Date(); // // console.log(records);
if (now.getHours() < 11) { const summaryMap = {};
strDate.value = formatDate(getDateAfterDays(now, -1)).toString(); //11点之前 头一天的数据 try {
} else { records.forEach((record) => {
strDate.value = formatDate(now).toString(); const gas = record.gas;
} if (!summaryMap[gas]) {
let queryParms = {}; // 初始化该 gas 类型的汇总对象
dataJinri.value = []; summaryMap[gas] = {
dataJinriSum.value = []; gas: gas,
dataJinriSumUnit.value = []; rq: 0,
queryParms.rqDate = strDate.value; sq: 0,
queryParms.pageSize = 100; totalGas: 0,
// console.log(queryParms); yearVolume: 0
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(); //再获取今年以来的数据
} }
// 无论是否是第一次遇到该 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);
const getYearShengchansj = () => { } catch (error) {
const now = new Date(); //TODO handle the exception
let year = formatDate(now).split('-')[0]; // // console.log(error);
let queryParms = {}; }
queryParms.yearStart = year; }
queryParms.yearEnd = year;
// // console.log(2, queryParms.value); function sumByUnit(records) {
queryYearShengchansj(queryParms).then((res) => { // // console.log(records);
if (res.success) { const summaryMap = {};
try { try {
// // console.log(res.result); records.forEach((record) => {
let yearData = res.result[year]; const unit = record.unit;
// console.log(dataJinriSumUnit.value.length, dataJinriSumUnit.value, yearData.length, if (!unit.includes('区')) {
// yearData); if (!summaryMap[unit]) {
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) {
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 类型的汇总对象 // 初始化该 gas 类型的汇总对象
summaryMap[gas] = { summaryMap[unit] = {
gas: gas, unit: unit,
gas: record.gas,
rq: 0, rq: 0,
sq: 0, sq: 0,
totalGas: 0, totalGas: 0,
yearVolume: 0 yearVolume: 0
}; };
} }
// 无论是否是第一次遇到该 gas 类型，都进行累加操作 // 无论是否是第一次遇到该 unit 类型，都进行累加操作
summaryMap[gas].rq += record.rq || 0; summaryMap[unit].rq += record.rq || 0;
summaryMap[gas].sq += record.sq || 0; summaryMap[unit].sq += record.sq || 0;
summaryMap[gas].totalGas += record.totalGas || 0; summaryMap[unit].totalGas += record.totalGas || 0;
summaryMap[gas].yearVolume += record.yearVolume || 0; summaryMap[unit].yearVolume += record.yearVolume || 0;
}); }
return Object.values(summaryMap); });
} catch (error) {
//TODO handle the exception
// console.log(error);
}
}
function sumByUnit(records) { return Object.values(summaryMap);
// console.log(records); } catch (error) {
const summaryMap = {}; //TODO handle the exception
try { // // console.log(error);
records.forEach((record) => {
const unit = record.unit;
if (!unit.includes('区')) {
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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
display: flex;
flex-wrap: wrap;
padding: 20rpx;
gap: 20rpx;
}
.popup-content {
padding: 30rpx;
max-height: 40vh;
}
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
padding-bottom: 20rpx;
border-bottom: 2rpx solid #eee;
.title {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
}
.table-container {
width: 100%;
height: 30vh;
overflow: hidden;
}
.table {
min-width: 100%;
border: 2rpx solid #e8e8e8;
.tr {
display: flex; display: flex;
flex-wrap: wrap; border-bottom: 2rpx solid #e8e8e8;
padding: 20rpx;
gap: 20rpx; &.header {
background-color: #fafafa;
font-weight: 600;
}
&.even {
background-color: #f8f8f8;
}
} }
.popup-content { .th,
padding: 30rpx; .td {
max-height: 70vh; flex: 1;
min-width: 80rpx;
padding: 10rpx;
font-size: 22rpx;
font-weight: bold;
color: #333;
text-align: center;
white-space: nowrap;
height: 30rpx;
vertical-align: middle;
} }
.popup-header { .th1,
.td1 {
flex: 1;
max-width: 40rpx;
padding: 10rpx;
font-size: 22rpx;
font-weight: bold;
color: #333;
text-align: center;
white-space: nowrap;
height: 30rpx;
vertical-align: middle;
}
.th {
background-color: #f0f0f0;
}
.td.negative {
color: #ff4444;
font-weight: 500;
}
}
.empty {
padding: 40rpx;
text-align: center;
color: #888;
font-size: 16rpx;
}
.card-item {
flex: 1 1 200rpx; // 基础宽度300rpx，自动伸缩 selectedGas formatNumber
min-width: 240rpx;
max-width: calc(50% - 10rpx); // 最大不超过容器一半（考虑间距）
@media (min-width: 768px) {
max-width: calc(33.33% - 14rpx); // 大屏显示3列
}
}
.card {
background: #ffffff;
border-radius: 16rpx;
padding: 10rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
.title {
display: block;
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 16rpx;
}
.content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 30rpx; margin-bottom: 10rpx;
padding-bottom: 20rpx;
border-bottom: 2rpx solid #eee;
.title { &:last-child {
font-size: 32rpx; margin-bottom: 0;
font-weight: 600;
color: #333;
}
}
.table-container {
width: 100%;
height: 30vh;
overflow: hidden;
}
.table {
min-width: 100%;
border: 2rpx solid #e8e8e8;
.tr {
display: flex;
border-bottom: 2rpx solid #e8e8e8;
&.header {
background-color: #fafafa;
font-weight: 600;
}
&.even {
background-color: #f8f8f8;
}
} }
.th, .label {
.td { font-size: 24rpx;
flex: 1; color: #666;
min-width: 80rpx;
padding: 10rpx;
font-size: 20rpx;
color: #333;
text-align: center;
white-space: nowrap;
} }
.th1, .value {
.td1 { font-size: 28rpx;
flex: 1; color: #0000ff;
max-width: 40rpx;
padding: 10rpx;
font-size: 20rpx;
color: #333;
text-align: center;
white-space: nowrap;
}
.th {
background-color: #f0f0f0;
}
.td.negative {
color: #ff4444;
font-weight: 500; font-weight: 500;
} }
} }
}
.empty { .progress-item {
padding: 40rpx; margin-bottom: 20px;
text-align: center; }
color: #888;
font-size: 16rpx;
}
.card-item { .progress-bar {
flex: 1 1 200rpx; // 基础宽度300rpx，自动伸缩 selectedGas formatNumber position: relative;
min-width: 240rpx; height: 20px;
max-width: calc(50% - 10rpx); // 最大不超过容器一半（考虑间距） background: #f0f0f0;
border-radius: 10px;
overflow: hidden;
}
@media (min-width: 768px) { .progress {
max-width: calc(33.33% - 14rpx); // 大屏显示3列 height: 100%;
} transition: all 0.3s;
} }
.progressTime {
height: 100%;
transition: all 0.3s;
}
.card { .progress-text {
background: #ffffff; position: absolute;
border-radius: 16rpx; left: 50%;
padding: 10rpx; top: 50%;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); transform: translate(-50%, -50%);
color: red; /* 保持红色 */
.title { font-size: 12px;
display: block; font-weight: bold;
font-size: 28rpx; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 提升可读性 */
font-weight: 600; }
color: #333; </style>
margin-bottom: 16rpx;
}
.content {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10rpx;
&:last-child {
margin-bottom: 0;
}
.label {
font-size: 24rpx;
color: #666;
}
.value {
font-size: 28rpx;
color: #0000ff;
font-weight: 500;
}
}
}
</style>

533
pages/views/shengchan/ribaoshuju/yyRbsj.vue
View File

@ -18,6 +18,19 @@
<text class="label">年累计</text> <text class="label">年累计</text>
<text class="value">{{ item.nl || '-' }}</text> <text class="value">{{ item.nl || '-' }}</text>
</view> </view>
<view class="progress-bar">
<!-- 动态设置宽度和颜色 -->
<view
class="progress"
:style="{
width: `${Math.abs(item.yearPerCent)}%`,
'background-color': item.yearPerCent < 0 ? '#ff4444' : '#007aff'
}"
></view>
<!-- 显示带符号的百分比 -->
<text v-if="!(item.yearPlan === '' || item.yearPlan === '0')" class="progress-text">{{ item.yearPerCent }}%</text>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -33,17 +46,17 @@
<view class="table"> <view class="table">
<!-- 表头 --> <!-- 表头 -->
<view class="tr header"> <view class="tr header">
<view class="th">序号</view> <view class="th1">序号</view>
<view class="th">名称</view> <view class="th">名称</view>
<view class="th">日油量</view> <view class="th">日油量</view>
<view class="th">月累计 </view> <view class="th">月累计</view>
<view class="th">年累计 </view> <view class="th">年累计</view>
<view class="th1">操作</view>
</view> </view>
<!-- 表格内容 --> <!-- 表格内容 -->
<view class="tr" v-for="(item, index) in dataJinri" :key="index" <view class="tr" v-for="(item, index) in dataJinri" :key="index" :class="{ even: index % 2 === 0 }">
:class="{ even: index % 2 === 0 }"> <view class="td1">{{ index }}</view>
<view class="td">{{ index }}</view>
<view class="td">{{ item.dw }}</view> <view class="td">{{ item.dw }}</view>
<view class="td"> <view class="td">
{{ formatNumber(item.rcwy) }} {{ formatNumber(item.rcwy) }}
@ -52,275 +65,305 @@
<view class="td"> <view class="td">
{{ formatNumber(item.nl) }} {{ formatNumber(item.nl) }}
</view> </view>
<view class="td1" style="color: red" @click="goHistory(item)">历史</view>
</view> </view>
<!-- 空数据提示 --> <!-- 空数据提示 -->
<view v-if="!dataJinri.length" class="empty"> <view v-if="!dataJinri.length" class="empty">暂无相关数据</view>
暂无相关数据
</view>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
</uni-popup> </uni-popup>
</view> </view>
</template> </template>
<script setup> <script setup>
import { import { ref, onMounted, computed, nextTick, watchEffect } from 'vue';
ref, import { onLoad } from '@dcloudio/uni-app';
onMounted, import { queryJinriYuanyouShengchansj } from '@/api/shengchan.js';
computed, import { formatDate, getDateAfterDays } from '@/utils/dateTime.js';
nextTick, import { beforeJump } from '@/utils/index.js';
watchEffect import { useStore } from '@/store';
} from 'vue';
import {
onLoad
} from '@dcloudio/uni-app';
import {
queryJinriYuanyouShengchansj
} from '@/api/shengchan.js';
import {
formatDate,
getDateAfterDays
} from '@/utils/dateTime.js';
import {
beforeJump
} from '@/utils/index.js';
import {
useStore
} from '@/store';
const store = useStore(); const store = useStore();
import dataCom from '@/bpm/dataCom.vue'; import dataCom from '@/bpm/dataCom.vue';
const shishiArr = ref([{ const shishiArr = ref([
gas: '原油产量', {
rcwy: '', gas: '原油产量',
yl: '', rcwy: '',
nl: '' yl: '',
}, nl: '',
yearPlan: '1500',
]); yearPerCent: ''
const dataJinri = ref([]);
const dataJinriSum = ref([]);
const popup = ref(null);
// 点击卡片处理
const handleCardClick = () => {
popup.value.open();
};
// 关闭弹窗
const closePopup = () => {
popup.value.close();
};
onMounted(() => {
getJinriYuanyouShengchansj();
// getYearShengchansj();
});
const strDate = ref('');
// 数字格式化
const formatNumber = (num) => {
if (typeof num !== 'number') return '-';
return num.toFixed(4).replace(/\.?0+$/, '');
};
const getJinriYuanyouShengchansj = () => {
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 = [];
queryParms.scrq = strDate.value;
queryParms.pageSize = 100;
console.log(queryParms);
queryJinriYuanyouShengchansj(queryParms).then((res) => {
if (res.success) {
console.log(res);
dataJinri.value = res.result.records;
dataJinriSum.value = sumByOil(dataJinri.value); //包含gas unit rq cq totalGas
console.log(dataJinriSum.value);
nextTick();
shishiArr.value.forEach((item) => {
dataJinriSum.value.forEach((itemjinri) => {
item.rcwy = itemjinri.rcwy.toFixed(4);
item.nl = itemjinri.nl.toFixed(4);
item.yl = itemjinri.yl.toFixed(4);
});
});
// getYearShengchansj(); //再获取今年以来的数据
}
});
};
function sumByOil(records) {
console.log(records);
const summaryMap = {};
try {
records.forEach((record) => {
const gas = record.gas;
if (!summaryMap[gas]) {
// 初始化该 gas 类型的汇总对象
summaryMap[gas] = {
rcwy: 0,
yl: 0,
nl: 0
};
}
// 无论是否是第一次遇到该 gas 类型，都进行累加操作
summaryMap[gas].rcwy += record.rcwy || 0;
summaryMap[gas].yl += record.yl || 0;
summaryMap[gas].nl += record.nl || 0
});
return Object.values(summaryMap);
} catch (error) {
//TODO handle the exception
console.log(error);
}
} }
]);
const dataJinri = ref([]);
const dataJinriSum = ref([]);
const popup = ref(null);
// 点击卡片处理
const handleCardClick = () => {
popup.value.open();
};
// 关闭弹窗
const closePopup = () => {
popup.value.close();
};
onMounted(() => {
getJinriYuanyouShengchansj();
// getYearShengchansj();
});
const strDate = ref('');
// 数字格式化
const formatNumber = (num) => {
if (typeof num !== 'number') return '-';
return num.toFixed(4).replace(/\.?0+$/, '');
};
function goHistory(val) {
uni.navigateTo({
url: '/pages/views/shengchan/ribaoshuju/rbsjLsxq?data=' + JSON.stringify(val) + '&type=yy'
});
}
const getJinriYuanyouShengchansj = () => {
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 = [];
queryParms.scrq = strDate.value;
queryParms.pageSize = 100;
// // console.log(queryParms);
queryJinriYuanyouShengchansj(queryParms).then((res) => {
if (res.success) {
// // console.log(res);
dataJinri.value = res.result.records;
dataJinriSum.value = sumByOil(dataJinri.value); //包含gas unit rq cq totalGas
// // console.log(dataJinriSum.value);
nextTick();
shishiArr.value.forEach((item) => {
dataJinriSum.value.forEach((itemjinri) => {
item.rcwy = itemjinri.rcwy.toFixed(4);
item.nl = itemjinri.nl.toFixed(4);
item.yl = itemjinri.yl.toFixed(4);
item.yearPerCent = calcPercent(item.yearPlan, item.nl);
});
});
// getYearShengchansj(); //再获取今年以来的数据
}
});
};
function calcPercent(yearJihua, yearShiji) {
// 计算进度百分比，避免除数为 0
// 确保进度百分比不超过 100
let plan = parseFloat(yearJihua === '' ? 0 : yearJihua);
let shiji = parseFloat(yearShiji);
let percent = 0;
// 修改原始计算代码
if (plan > 0) {
percent = (shiji / plan) * 100;
percent = Math.min(percent, 100); // 限制最大100%
}
return parseFloat(percent.toFixed(2)); // 转为数值
}
function sumByOil(records) {
// console.log(records);
const summaryMap = {};
try {
records.forEach((record) => {
const gas = record.gas;
if (!summaryMap[gas]) {
// 初始化该 gas 类型的汇总对象
summaryMap[gas] = {
rcwy: 0,
yl: 0,
nl: 0
};
}
// 无论是否是第一次遇到该 gas 类型，都进行累加操作
summaryMap[gas].rcwy += record.rcwy || 0;
summaryMap[gas].yl += record.yl || 0;
summaryMap[gas].nl += record.nl || 0;
});
return Object.values(summaryMap);
} catch (error) {
//TODO handle the exception
// console.log(error);
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
display: flex;
flex-wrap: wrap;
padding: 20rpx;
gap: 20rpx;
}
.popup-content {
padding: 30rpx;
max-height: 70vh;
}
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
padding-bottom: 20rpx;
border-bottom: 2rpx solid #eee;
.title {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
}
.table-container {
width: 100%;
height: 30vh;
overflow: hidden;
}
.table {
min-width: 100%;
border: 2rpx solid #e8e8e8;
.tr {
display: flex; display: flex;
flex-wrap: wrap; border-bottom: 2rpx solid #e8e8e8;
padding: 20rpx;
gap: 20rpx; &.header {
background-color: #fafafa;
font-weight: 600;
}
&.even {
background-color: #f8f8f8;
}
} }
.popup-content { .th,
padding: 30rpx; .td {
max-height: 70vh; flex: 1;
min-width: 80rpx;
padding: 10rpx;
font-size: 20rpx;
font-weight: 500;
color: #333;
text-align: center;
white-space: nowrap;
}
.th1,
.td1 {
flex: 1;
max-width: 40rpx;
padding: 10rpx;
font-size: 22rpx;
font-weight: bold;
color: #333;
text-align: center;
white-space: nowrap;
height: 30rpx;
vertical-align: middle;
} }
.popup-header { .th {
background-color: #f0f0f0;
}
.td.negative {
color: #ff4444;
font-weight: 500;
}
}
.empty {
padding: 40rpx;
text-align: center;
color: #888;
font-size: 16rpx;
}
.card-item {
flex: 1 1 200rpx; // 基础宽度300rpx，自动伸缩 selectedGas formatNumber
min-width: 200rpx;
max-width: calc(50% - 10rpx); // 最大不超过容器一半（考虑间距）
@media (min-width: 768px) {
max-width: calc(33.33% - 14rpx); // 大屏显示3列
}
}
.card {
background: #ffffff;
border-radius: 16rpx;
padding: 10rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
.title {
display: block;
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 16rpx;
}
.content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 30rpx; margin-bottom: 10rpx;
padding-bottom: 20rpx;
border-bottom: 2rpx solid #eee;
.title { &:last-child {
font-size: 32rpx; margin-bottom: 0;
font-weight: 600;
color: #333;
}
}
.table-container {
width: 100%;
height: 30vh;
overflow: hidden;
}
.table {
min-width: 100%;
border: 2rpx solid #e8e8e8;
.tr {
display: flex;
border-bottom: 2rpx solid #e8e8e8;
&.header {
background-color: #fafafa;
font-weight: 600;
}
&.even {
background-color: #f8f8f8;
}
} }
.th, .label {
.td { font-size: 24rpx;
flex: 1; color: #666;
min-width: 80rpx;
padding: 10rpx;
font-size: 20rpx;
font-weight: 500;
color: #333;
text-align: center;
white-space: nowrap;
} }
.th { .value {
background-color: #f0f0f0;
}
.td.negative {
color: #ff4444;
font-weight: 500;
}
}
.empty {
padding: 40rpx;
text-align: center;
color: #888;
font-size: 16rpx;
}
.card-item {
flex: 1 1 200rpx; // 基础宽度300rpx，自动伸缩 selectedGas formatNumber
min-width: 200rpx;
max-width: calc(50% - 10rpx); // 最大不超过容器一半（考虑间距）
@media (min-width: 768px) {
max-width: calc(33.33% - 14rpx); // 大屏显示3列
}
}
.card {
background: #ffffff;
border-radius: 16rpx;
padding: 10rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
.title {
display: block;
font-size: 28rpx; font-size: 28rpx;
font-weight: 600; color: #0000ff;
color: #333; font-weight: 500;
margin-bottom: 16rpx;
}
.content {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10rpx;
&:last-child {
margin-bottom: 0;
}
.label {
font-size: 24rpx;
color: #666;
}
.value {
font-size: 28rpx;
color: #0000ff;
font-weight: 500;
}
} }
} }
</style> }
.progress-item {
margin-bottom: 20px;
}
.progress-bar {
position: relative;
height: 20px;
background: #f0f0f0;
border-radius: 10px;
overflow: hidden;
}
.progress {
height: 100%;
transition: all 0.3s;
}
.progress-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: red; /* 保持红色 */
font-size: 12px;
font-weight: bold;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 提升可读性 */
}
</style>

0
uni_modules/cxc-szcx-dateRangeSelect/changelog.md Normal file
View File

573
uni_modules/cxc-szcx-dateRangeSelect/components/cxc-szcx-dateRangeSelect/cxc-szcx-dateRangeSelect.vue Normal file
View File

@ -0,0 +1,573 @@
<template>
<view class="compact-datetime-picker">
<!-- 输入框区域 -->
<view class="input-container">
<view class="compact-input" :class="{ active: activeType === 'start' }" @click="openPicker('start')">
{{ formattedStart || '开始日期' }}
</view>
<text class="separator">至</text>
<view class="compact-input" :class="{ active: activeType === 'end' }" @click="openPicker('end')">
{{ formattedEnd || '结束日期' }}
</view>
</view>
<!-- 日期选择弹窗 -->
<uni-popup ref="popup" type="bottom" :is-mask-click="false">
<view class="compact-popup">
<!-- 快捷按钮区域 -->
<view class="quick-actions">
<view class="mode-switch">
<text :class="['mode-btn', { active: isNatural }]" @click="toggleMode(true)">自然周期</text>
<text :class="['mode-btn', { active: !isNatural }]" @click="toggleMode(false)">相对周期</text>
</view>
<!-- 快捷操作 -->
<view class="action-buttons">
<button v-if="isNatural" v-for="btn in quickButtonszr" size="mini" :key="btn.type" class="action-btn" @click="setQuickRange(btn.type)">
{{ btn.label }}
</button>
<button v-else v-for="btn in quickButtonsxd" size="mini" :key="btn.type" class="action-btn" @click="setQuickRange(btn.type)">
{{ btn.label }}
</button>
</view>
</view>
<!-- 日历选择区域 -->
<view class="compact-calendar">
<view class="compact-header">
<text class="nav-arrow" @click="changeMonth(-1)">‹</text>
<text class="month-title">{{ monthText }}</text>
<text class="nav-arrow" @click="changeMonth(1)">›</text>
</view>
<view class="compact-weekdays">
<text v-for="day in weekDays" :key="day" class="weekday">
{{ day }}
</text>
</view>
<view class="compact-days">
<text
v-for="(day, index) in calendarDays"
:key="index"
:class="[
'compact-day',
{
'other-month': !day.isCurrentMonth,
'selected-start': isStart(day.date),
'selected-end': isEnd(day.date),
'in-range': isInRange(day.date),
today: isToday(day.date)
}
]"
@click="handleDayClick(day)"
>
{{ day.day }}
</text>
</view>
</view>
<!-- 操作按钮 -->
<view class="compact-footer">
<text class="footer-btn cancel" @click="closePicker">取消</text>
<text class="footer-btn confirm" @click="confirmSelection">确定</text>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
const MONTH_NAMES = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
export default {
props: {
modelValue: {
type: Array,
default: () => [null, null]
}
},
data() {
return {
isNatural: true,
activeType: 'start',
currentMonth: new Date(),
tempStart: null,
tempEnd: null,
weekDays: ['日', '一', '二', '三', '四', '五', '六'],
quickButtonszr: [
{ label: '本周', type: 'week' },
{ label: '本月', type: 'month' },
{ label: '本季', type: 'quarter' },
{ label: '本年', type: 'year' }
],
quickButtonsxd: [
{ label: '近一周', type: 'week' },
{ label: '近一月', type: 'month' },
{ label: '近一季', type: 'quarter' },
{ label: '近一年', type: 'year' }
]
};
},
filters: {
naturalMonth(date) {
return `${date.getFullYear()}年${(date.getMonth() + 1).toString().padStart(2, '0')}月`;
}
},
computed: {
formattedStart() {
return this.formatDate(this.modelValue[0]);
},
formattedEnd() {
return this.formatDate(this.modelValue[1]);
},
calendarDays() {
return this.generateCalendar(this.currentMonth);
},
monthText() {
const [year, month] = this.formatDate(this.currentMonth).split('-');
return `${year}年${month}月`;
}
},
watch: {
modelValue: {
immediate: true,
handler(newVal) {
// console.log(newVal);
this.tempStart = newVal[0];
this.tempEnd = newVal[1];
}
}
},
methods: {
// 打开弹窗并初始化临时值
openPicker(type) {
this.activeType = type;
if (!this.tempStart) this.tempStart = new Date();
if (!this.tempEnd) this.tempEnd = new Date();
this.$refs.popup.open();
},
// 日期点击处理
handleDayClick(day) {
if (!day.isCurrentMonth) return;
const clickedDate = day.date;
if (this.activeType === 'start') {
if (clickedDate > this.tempEnd) {
this.tempStart = clickedDate;
this.tempEnd = clickedDate;
this.activeType = 'end';
} else {
this.tempStart = clickedDate;
}
} else {
if (clickedDate < this.tempStart) {
this.tempStart = clickedDate;
this.tempEnd = clickedDate;
this.activeType = 'start';
} else {
this.tempEnd = clickedDate;
}
}
},
// 确认选择
confirmSelection() {
this.$emit('update:modelValue', [this.tempStart, this.tempEnd]);
this.closePicker();
},
// 关闭弹窗
closePicker() {
this.$refs.popup.close();
this.resetTempDates();
},
// 重置临时日期
resetTempDates() {
this.tempStart = this.modelValue[0];
this.tempEnd = this.modelValue[1];
},
// 生成日历数据
generateCalendar(date) {
const year = date.getFullYear();
const month = date.getMonth();
const firstDay = new Date(year, month, 1);
const lastDay = new Date(year, month + 1, 0);
const startDay = firstDay.getDay();
const days = [];
// 填充上月日期
for (let i = startDay; i > 0; i--) {
const d = new Date(year, month, -i + 1);
days.push({
day: d.getDate(),
date: d,
isCurrentMonth: false
});
}
// 填充本月日期
for (let i = 1; i <= lastDay.getDate(); i++) {
const d = new Date(year, month, i);
days.push({
day: i,
date: d,
isCurrentMonth: true
});
}
// 修正后的下月日期填充
const totalCells = Math.ceil(days.length / 7) * 7;
let nextMonthDay = 1;
while (days.length < totalCells) {
const d = new Date(year, month + 1, nextMonthDay);
days.push({
day: d.getDate(),
date: d,
isCurrentMonth: false
});
nextMonthDay++;
}
return days;
},
// 日期选择处理
selectDate(date) {
if (!date.isCurrentMonth) return;
const newValue = [...this.modelValue];
const index = this.activeType === 'start' ? 0 : 1;
newValue[index] = date.date;
// 自动调整日期顺序
if (newValue[0] && newValue[1] && newValue[0] > newValue[1]) {
[newValue[0], newValue[1]] = [newValue[1], newValue[0]];
}
this.$emit('update:modelValue', newValue);
},
// 切换月份
changeMonth(offset) {
const newMonth = new Date(this.currentMonth);
newMonth.setMonth(newMonth.getMonth() + offset);
this.currentMonth = newMonth;
// console.log(this.currentMonth);
},
// 判断日期状态
isSelected(date) {
return date === this.modelValue[0] || date === this.modelValue[1];
},
isEnd(date) {
return date === this.modelValue[1];
},
isToday(date) {
return this.formatDate(date) === this.formatDate(new Date());
},
isStart(date) {
return this.tempStart && this.isSameDay(date, this.tempStart);
},
isEnd(date) {
return this.tempEnd && this.isSameDay(date, this.tempEnd);
},
// 改进范围判断
isInRange(date) {
if (!this.tempStart || !this.tempEnd) return false;
return date > this.tempStart && date < this.tempEnd;
},
isSameDay(d1, d2) {
return d1 && d2 && d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
},
// 快捷范围设置
setQuickRange(type) {
const currentDate = new Date(); // 使用当前日期
const range = this.isNatural ? this.calcNaturalRange(type, currentDate) : this.calcRelativeRange(type, currentDate);
this.$emit('update:modelValue', [range.start, range.end]);
this.$refs.popup.close();
},
// 自然周期计算
calcNaturalRange(type, currentDate) {
let start, end;
switch (type) {
case 'week':
start = this.getWeekStart(currentDate);
end = this.getWeekEnd(start);
break;
case 'month':
start = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
end = this.lastDayOfMonth(currentDate);
break;
case 'quarter':
const quarter = Math.floor(currentDate.getMonth() / 3);
start = new Date(currentDate.getFullYear(), quarter * 3, 1);
end = this.lastDayOfMonth(new Date(currentDate.getFullYear(), quarter * 3 + 2, 1));
break;
case 'year':
start = new Date(currentDate.getFullYear(), 0, 1);
end = new Date(currentDate.getFullYear(), 11, 31);
break;
}
return { start, end };
},
// 相对周期计算
calcRelativeRange(type, currentDate) {
let start = new Date(currentDate);
switch (type) {
case 'week':
start.setDate(currentDate.getDate() - 6);
break;
case 'month':
start.setMonth(currentDate.getMonth() - 1);
this.adjustMonthEnd(start, currentDate);
break;
case 'quarter':
start.setMonth(currentDate.getMonth() - 3);
this.adjustMonthEnd(start, currentDate);
break;
case 'year':
start.setFullYear(currentDate.getFullYear() - 1);
this.adjustMonthEnd(start, currentDate);
break;
}
return { start, end: new Date(currentDate) };
},
// 周计算（周一为起点）
getWeekStart(date) {
const day = date.getDay();
const diff = date.getDate() - day + (day === 0 ? -6 : 1);
return new Date(date.setDate(diff));
},
getWeekEnd(startDate) {
const end = new Date(startDate);
end.setDate(startDate.getDate() + 6);
return end;
},
// 月末处理
lastDayOfMonth(date) {
return new Date(date.getFullYear(), date.getMonth() + 1, 0);
},
// 月末日调整
adjustMonthEnd(start, end) {
const lastDay = this.lastDayOfMonth(start).getDate();
if (end.getDate() > lastDay) {
start.setDate(lastDay);
} else {
start.setDate(end.getDate());
}
},
// 闰年判断
isLeapYear(year) {
return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
},
// 模式切换
toggleMode(isNatural) {
this.isNatural = isNatural;
},
// 日期格式化 monthFormat
formatDate(date) {
if (!date || !(date instanceof Date)) return '';
const pad = (n) => n.toString().padStart(2, '0');
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
}
}
};
</script>
<style scoped>
.input-container {
display: flex;
align-items: center;
gap: 10px;
}
/* 紧凑型输入框 */
.compact-input {
flex: 1;
padding: 6px 8px;
font-size: 16px;
height: 20px;
line-height: 20px;
border: 1px solid #dcdfe6;
border-radius: 4px;
text-align: center;
}
.compact-input.active {
border-color: #409eff;
background-color: #f5f7ff;
}
/* 紧凑弹窗 */
.compact-popup {
padding: 12px 8px;
background: #fff;
border-radius: 12px 12px 0 0;
}
/* 紧凑头部 */
.compact-header {
display: flex;
align-items: center;
justify-content: center;
margin: 8px 0;
font-size: 14px;
}
.nav-arrow {
font-size: 20px;
padding: 0 12px;
color: #606266;
}
.month-title {
font-weight: 500;
min-width: 120px;
text-align: center;
}
/* 紧凑日期网格 */
.compact-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin: 4px 0;
}
.weekday {
text-align: center;
font-size: 20px;
color: #909399;
padding: 4px 0;
}
.compact-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
}
/* 修改非本月日期样式 */
.compact-day.other-month {
color: #c0c4cc;
opacity: 0.8;
}
.compact-day {
aspect-ratio: 1;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
border-radius: 3px;
}
/* 日期状态 */
.compact-day.today {
font-weight: bold;
color: #409eff;
background: #e8f3ff;
}
.compact-day.selected-start {
background: #409eff;
color: white;
border-radius: 3px 0 0 3px;
}
.compact-day.selected-end {
background: #409eff;
color: white;
border-radius: 0 3px 3px 0;
}
.compact-day.in-range {
background: #ccd2d8;
}
.quick-actions {
/* padding: 0 10px; */
}
.mode-switch {
display: flex;
margin-bottom: 8px;
border-radius: 8px;
overflow: hidden;
background: #f5f7fa;
}
.mode-btn {
flex: 1;
padding: 6px 8px;
text-align: center;
color: #606266;
transition: all 0.3s;
}
.mode-btn.active {
background: #409eff;
color: #fff;
}
.action-buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
margin-bottom: 5px;
}
.action-btn {
background: #f5f7fa;
color: #606266;
height: 24px;
font-size: 14px;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
text-align: center;
}
/* 底部操作 */
.compact-footer {
display: flex;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #eee;
}
.footer-btn {
flex: 1;
text-align: center;
padding: 10px;
font-size: 14px;
}
.cancel {
color: #606266;
}
.confirm {
color: #409eff;
font-weight: 500;
}
</style>

83
uni_modules/cxc-szcx-dateRangeSelect/package.json Normal file
View File

@ -0,0 +1,83 @@
{
"id": "cxc-szcx-dateRangeSelect",
"displayName": "cxc-szcx-dateRangeSelect",
"version": "1.0.0",
"description": "cxc-szcx-dateRangeSelect",
"keywords": [
"cxc-szcx-dateRangeSelect"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "",
"data": "",
"permissions": ""
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "u",
"aliyun": "u",
"alipay": "u"
},
"client": {
"Vue": {
"vue2": "u",
"vue3": "u"
},
"App": {
"app-vue": "u",
"app-nvue": "u",
"app-uvue": "u"
},
"H5-mobile": {
"Safari": "u",
"Android Browser": "u",
"微信浏览器(Android)": "u",
"QQ浏览器(Android)": "u"
},
"H5-pc": {
"Chrome": "u",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "u",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

139
uni_modules/cxc-szcx-dateRangeSelect/readme.md Normal file
View File

@ -0,0 +1,139 @@
# cxc-szcx-dateRangeSelect
# # 紧凑型日期时间选择器组件说明书
## 一、组件概述
`compact-datetime-picker` 是一个基于 Vue 开发的紧凑型日期时间选择器组件，用于在页面中选择日期范围。组件提供了自然周期和相对周期两种选择模式，并且支持快捷选择本周、本月、本季、本年、近一周、近一月、近一季、近一年等常见时间范围。
## 二、组件依赖
- **Vue**：组件基于 Vue 框架开发。
- **uni-popup**：来自 `uni-app` 的弹窗组件，用于显示日期选择器的弹出层。
## 三、组件使用方法
### 1. 引入组件
在需要使用该组件的 Vue 文件中，引入 `compact-datetime-picker` 组件。
```vue
<template>
<view>
<compact-datetime-picker v-model="dateRange" />
</view>
</template>
<script>
import CompactDateTimePicker from '@/components/compact-datetime-picker.vue';
export default {
components: {
CompactDateTimePicker
},
data() {
return {
dateRange: [null, null]
};
}
};
</script>
```
### 2. 组件属性
| 属性名 | 类型 | 默认值 | 描述 |
| ---- | ---- | ---- | ---- |
| `modelValue` | `Array` | `[null, null]` | 双向绑定的日期范围数组，第一个元素为开始日期，第二个元素为结束日期。 |
## 四、组件内部实现
### 1. 模板部分
- **输入框区域**：显示开始日期和结束日期的输入框，点击输入框可打开日期选择弹窗。
- **日期选择弹窗**：
- **快捷按钮区域**：包含自然周期和相对周期的切换按钮，以及不同模式下的快捷操作按钮。
- **日历选择区域**：显示当前月份的日历，可选择日期。
- **操作按钮**：包含取消和确定按钮，用于关闭弹窗和确认选择的日期范围。
### 2. 脚本部分
#### 2.1 数据属性
```javascript
data() {
return {
isNatural: true, // 是否为自然周期模式
activeType: 'start', // 当前活跃的日期选择类型（开始或结束）
currentMonth: new Date(), // 当前显示的月份
tempStart: null, // 临时开始日期
tempEnd: null, // 临时结束日期
weekDays: ['日', '一', '二', '三', '四', '五', '六'], // 星期几的显示文本
quickButtonszr: [
{ label: '本周', type: 'week' },
{ label: '本月', type: 'month' },
{ label: '本季', type: 'quarter' },
{ label: '本年', type: 'year' }
], // 自然周期模式下的快捷按钮
quickButtonsxd: [
{ label: '近一周', type: 'week' },
{ label: '近一月', type: 'month' },
{ label: '近一季', type: 'quarter' },
{ label: '近一年', type: 'year' }
] // 相对周期模式下的快捷按钮
};
}
```
#### 2.2 计算属性
- `formattedStart`：格式化后的开始日期。
- `formattedEnd`：格式化后的结束日期。
- `calendarDays`：生成当前月份的日历数据。
- `monthText`：当前月份的显示文本。
#### 2.3 监听属性
```javascript
watch: {
modelValue: {
immediate: true,
handler(newVal) {
this.tempStart = newVal[0];
this.tempEnd = newVal[1];
}
}
}
```
监听 `modelValue` 的变化，初始化临时日期。
#### 2.4 方法
- **打开弹窗并初始化临时值**：`openPicker(type)`，打开日期选择弹窗，并根据活跃类型初始化临时日期。
- **日期点击处理**：`handleDayClick(day)`，处理日期点击事件，更新临时开始或结束日期。
- **确认选择**：`confirmSelection()`，确认选择的日期范围，触发 `update:modelValue` 事件并关闭弹窗。
- **关闭弹窗**：`closePicker()`，关闭日期选择弹窗，并重置临时日期。
- **重置临时日期**：`resetTempDates()`，将临时日期重置为当前的 `modelValue`。
- **生成日历数据**：`generateCalendar(date)`，根据给定的月份生成日历数据。
- **日期选择处理**：`selectDate(date)`，处理日期选择，更新 `modelValue`。
- **切换月份**：`changeMonth(offset)`，切换当前显示的月份。
- **判断日期状态**：
- `isSelected(date)`：判断日期是否被选中。
- `isEnd(date)`：判断日期是否为结束日期。
- `isToday(date)`：判断日期是否为今天。
- `isStart(date)`：判断日期是否为开始日期。
- `isInRange(date)`：判断日期是否在选择的范围内。
- `isSameDay(d1, d2)`：判断两个日期是否为同一天。
- **快捷范围设置**：`setQuickRange(type)`，根据快捷按钮的类型设置日期范围，并关闭弹窗。
- **自然周期计算**：`calcNaturalRange(type, currentDate)`，计算自然周期模式下的日期范围。
- **相对周期计算**：`calcRelativeRange(type, currentDate)`，计算相对周期模式下的日期范围。
- **周计算（周一为起点）**：
- `getWeekStart(date)`：获取一周的开始日期。
- `getWeekEnd(startDate)`：获取一周的结束日期。
- **月末处理**：`lastDayOfMonth(date)`，获取给定月份的最后一天。
- **月末日调整**：`adjustMonthEnd(start, end)`，调整开始日期到合适的月末日期。
- **闰年判断**：`isLeapYear(year)`，判断给定年份是否为闰年。
- **模式切换**：`toggleMode(isNatural)`，切换自然周期和相对周期模式。
- **日期格式化**：`formatDate(date)`，将日期格式化为 `YYYY-MM-DD` 的字符串。
### 3. 样式部分
- **输入框区域**：设置输入框的样式，包括边框、背景色、字体大小等。
- **紧凑弹窗**：设置弹窗的整体样式，包括背景色、边框半径等。
- **紧凑头部**：设置月份标题和导航箭头的样式。
- **紧凑日期网格**：设置星期几和日期的显示样式，以及不同状态下的日期背景色和字体颜色。
- **快捷按钮区域**：设置模式切换按钮和快捷操作按钮的样式。
- **底部操作**：设置取消和确定按钮的样式。
## 五、注意事项
- 组件使用了 `uni-popup` 组件，确保项目中已正确引入和配置。
- 日期范围的选择逻辑较为复杂，特别是在自然周期和相对周期的切换以及快捷范围设置时，需注意日期的计算和显示。
- 组件的样式是基于 `scoped` 作用域的，可根据项目需求进行调整和扩展。

0
uni_modules/cxc-szcx-lineChart/changelog.md Normal file
View File

274
uni_modules/cxc-szcx-lineChart/components/cxc-szcx-lineChart/cxc-szcx-lineChart.vue Normal file
View File

@ -0,0 +1,274 @@
<template>
<view>
<!-- ECharts图表 -->
<view class="chart-container">
<l-echart ref="chart" @finished="initChart" />
</view>
</view>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts';
import { formatDate, getDateAfterDays, getDateAfterMonths } from '@/utils/dateTime.js';
const props = defineProps({
dataList: {
type: Array,
default: () => [],
required: true
},
xField: {
type: String,
default: 'rqDate'
},
yField: {
type: String,
default: 'rq'
},
legendField: {
type: String,
default: 'unit'
},
referenceValue: {
type: Number,
default: 0
}
});
const chart = ref(null);
const chartOption = ref({});
const chartTitle = ref('');
//、数据处理
const processSeriesData = () => {
const legendItems = [...new Set(props.dataList.map((item) => item[props.legendField]?.trim() || '未命名'))];
return legendItems.map((legend) => {
const items = props.dataList
.filter((item) => item[props.legendField] === legend)
.sort((a, b) => new Date(a[props.xField]) - new Date(b[props.xField]))
.map((item) => ({
name: item[props.xField],
value: [
formatDate(item[props.xField]), // X轴时间戳
parseFloat(item[props.yField]) || 0 // Y轴数值
]
}));
return {
name: legend,
type: 'line',
showSymbol: true,
smooth: true,
data: items
};
});
};
// 监听数据变化
watch(
() => props.dataList,
() => {
chartTitle.value = '历史趋势';
updateChart();
},
{ deep: true }
);
// 生命周期管理
onMounted(() => {});
onUnmounted(() => {
if (chart.value) {
chart.value.dispose();
chart.value = null;
}
});
// 更新图表 formatDate
const updateChart = () => {
if (!chart.value) return;
chartOption.value = generateOptions();
chart.value.setOption(chartOption.value, true);
};
// 生成图表配置
const generateOptions = () => ({
title: {
text: chartTitle.value,
padding: [0, 0, 0, 30]
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255, 255, 255, 0.96)',
borderColor: '#eee',
borderWidth: 1,
textStyle: {
color: '#333',
fontSize: 14
},
axisPointer: {
type: 'line',
lineStyle: {
color: '#FF6B6B',
width: 1,
type: 'dashed'
}
},
confine: true // 将 tooltip 限制在图表区域内
},
backgroundColor: 'rgba(255, 255, 255, 0.8)',
textStyle: {
color: '#666',
fontSize: 12
},
xAxis: {
type: 'time',
axisLine: {
lineStyle: {
color: '#ddd'
}
},
axisLabel: {
color: '#666',
formatter: '{MM}-{dd}',
rotate: 30
},
splitLine: {
show: true,
lineStyle: {
color: '#f5f5f5'
}
}
},
yAxis: {
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#ddd'
}
},
splitLine: {
lineStyle: {
color: '#f5f5f5'
}
},
axisLabel: {
color: '#666',
formatter: (value) => `${value.toFixed(2)}`
}
},
series: [
...processSeriesData().map((series) => ({
...series,
lineStyle: {
width: 2,
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 6,
shadowOffsetY: 3
},
itemStyle: {
color: '#00007f', // 建议改为动态颜色
borderColor: '#fff',
borderWidth: 1
}
})),
{
type: 'line',
markLine: {
silent: true,
lineStyle: {
type: 'dashed',
color: '#FF4757',
width: 2
},
data: [{ yAxis: props.referenceValue }],
label: {
show: true,
position: 'end',
formatter: `参考值: ${props.referenceValue}`,
fontSize: 12
}
},
data: [] // 空数据系列仅用于显示参考线
}
],
legend: {
type: 'scroll',
bottom: 5,
textStyle: {
color: '#666',
fontSize: 12
},
pageIconColor: '#FF6B6B',
pageTextStyle: {
color: '#999'
}
},
grid: {
top: 30,
right: 30,
bottom: 40,
left: 20,
containLabel: true
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100,
minValueSpan: 3600 * 24 * 1000 * 7 // 最小缩放范围7天
}
]
});
// 初始化图表
const initChart = () => {
setTimeout(async () => {
if (!chart.value) return;
const myChart = await chart.value.init(echarts);
myChart.setOption(chartOption.value);
}, 300);
};
</script>
<style scoped>
/* 容器样式 */
.chart-container {
width: 100%;
height: 30vh;
min-height: 200px;
padding: 20rpx;
background: linear-gradient(145deg, #f8f9fa 0%, #ffffff 100%);
border-radius: 16rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
/* 图表加载占位 */
.chart-container::before {
/* content: '数据加载中...'; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #666;
font-size: 28rpx;
z-index: 1;
}
/* 图表主体样式 */
.chart-wrapper {
width: 100%;
height: 100%;
transition: opacity 0.3s ease;
}
/* 移动端优化 */
@media screen and (max-width: 768px) {
.chart-container {
height: 30vh;
min-height: 200px;
padding: 10rpx;
border-radius: 12rpx;
}
}
</style>

83
uni_modules/cxc-szcx-lineChart/package.json Normal file
View File

@ -0,0 +1,83 @@
{
"id": "cxc-szcx-lineChart",
"displayName": "cxc-szcx-lineChart",
"version": "1.0.0",
"description": "cxc-szcx-lineChart",
"keywords": [
"cxc-szcx-lineChart"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "",
"data": "",
"permissions": ""
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "u",
"aliyun": "u",
"alipay": "u"
},
"client": {
"Vue": {
"vue2": "u",
"vue3": "u"
},
"App": {
"app-vue": "u",
"app-nvue": "u",
"app-uvue": "u"
},
"H5-mobile": {
"Safari": "u",
"Android Browser": "u",
"微信浏览器(Android)": "u",
"QQ浏览器(Android)": "u"
},
"H5-pc": {
"Chrome": "u",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "u",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

179
uni_modules/cxc-szcx-lineChart/readme.md Normal file
View File

@ -0,0 +1,179 @@
# cxc-szcx-lineChart
# # `line-chart.vue` 组件说明书
## 一、组件概述
`line-chart.vue` 是一个基于 ECharts 实现的折线图组件，用于在 UniApp 项目中展示数据的折线图。该组件接收一系列数据和配置参数，支持动态更新数据，并展示参考线。
## 二、组件依赖
- **Vue 3**：使用 Vue 3 的组合式 API 进行开发。
- **ECharts**：用于绘制折线图。
- **`lime-echart`**：UniApp 插件，提供 ECharts 的渲染支持。
## 三、组件使用方法
### 1. 引入组件
在需要使用该组件的页面中引入 `line-chart.vue` 组件。
```vue
<template>
<view>
<line-chart
:dataList="dataList"
:xField="xField"
:yField="yField"
:legendField="legendField"
:referenceValue="referenceValue"
/>
</view>
</template>
<script setup>
import LineChart from '@/components/line-chart.vue';
const dataList = [
{ date: '2023-01-01', value: 10, category: 'A' },
// 更多数据...
];
const xField = 'date';
const yField = 'value';
const legendField = 'category';
const referenceValue = 15;
</script>
```
### 2. 组件属性
| 属性名 | 类型 | 默认值 | 描述 |
| ---- | ---- | ---- | ---- |
| `dataList` | `Object` | `[]` | 包含图表数据的数组，每个元素是一个对象，包含 `xField`、`yField` 和 `legendField` 对应的数据。 |
| `xField` | `String` | `''` | 数据中用于表示 x 轴的字段名。 |
| `yField` | `String` | `''` | 数据中用于表示 y 轴的字段名。 |
| `legendField` | `String` | `''` | 数据中用于表示图例的字段名。 |
| `referenceValue` | `Number` | `10` | 图表中参考线的数值。 |
## 四、组件内部实现
### 1. 模板部分
```vue
<template>
<view class="chart-container">
<l-echart ref="chart" @init="initChart"></l-echart>
</view>
</template>
```
- 使用 `l-echart` 组件渲染图表，通过 `ref` 绑定到 `chart`，并在初始化完成时调用 `initChart` 方法。
### 2. 脚本部分
#### 2.1 引入必要的模块
```javascript
import { ref, watch } from 'vue';
```
引入 Vue 3 的 `ref` 和 `watch` 函数。
#### 2.2 定义组件属性
```javascript
const props = defineProps({
dataList: {
type: Object,
default: () => []
},
// 其他属性...
});
```
定义组件接收的属性。
#### 2.3 初始化图表
```javascript
const chart = ref(null);
let echarts = null;
const initChart = async (canvas) => {
await initEcharts(canvas);
updateChart();
};
const initEcharts = async (canvas) => {
echarts = await import('echarts');
const { init } = await import('@/uni_modules/lime-echart/static/echarts.min');
echarts = init(canvas, echarts);
};
```
- `chart` 用于引用 `l-echart` 组件。
- `initChart` 方法在图表初始化时调用，先初始化 ECharts 实例，再更新图表。
- `initEcharts` 方法异步加载 ECharts 并初始化实例。
#### 2.4 处理数据
```javascript
const processData = () => {
const legendData = [...new Set(props.dataList.map((item) => item[props.legendField]))];
return legendData.map((legendItem) => {
const seriesData = props.dataList
.filter((item) => item[props.legendField] === legendItem)
.sort((a, b) => new Date(a[props.xField]) - new Date(b[props.xField]))
.map((item) => ({
name: item[props.xField],
value: [item[props.xField], item[props.yField]]
}));
return {
name: legendItem,
type: 'line',
showSymbol: true,
data: seriesData
};
});
};
```
处理传入的数据，根据 `legendField` 分组，对每组数据按 `xField` 排序，并转换为 ECharts 所需的格式。
#### 2.5 获取图表配置
```javascript
const getOption = () => ({
tooltip: {
trigger: 'axis',
formatter: (params) => {
return `${params[0].axisValue}<br/>` + params.map((item) => `${item.marker} ${item.seriesName}: ${item.value[1]}`).join('<br/>');
}
},
// 其他配置...
});
```
返回 ECharts 的配置对象，包括 tooltip、x 轴、y 轴、系列数据、图例和网格等配置。
#### 2.6 更新图表
```javascript
const updateChart = () => {
if (!chart.value) return;
const option = getOption();
chart.value.setOption(option);
};
```
如果 `chart` 实例存在，获取最新的图表配置并更新图表。
#### 2.7 监听数据变化
```javascript
watch(
() => props.dataList,
() => {
updateChart();
},
{ deep: true }
);
```
当 `props.dataList` 发生变化时，调用 `updateChart` 方法更新图表。
### 3. 样式部分
```css
.chart-container {
width: 100%;
height: 30vh;
}
```
设置图表容器的宽度为 100%，高度为 30vh。
## 五、注意事项
- 确保项目中已经正确安装并配置了 `lime-echart` 插件。
- 传入的 `dataList` 数据格式要符合要求，包含 `xField`、`yField` 和 `legendField` 对应的数据。
- 由于使用了异步加载 ECharts，可能会有一定的延迟，需要确保在合适的时机初始化图表。

61
utils/dateTime.js
View File

@ -52,8 +52,67 @@ function getDateAfterDays(date, days) {
return newDate; return newDate;
} }
function getDateAfterMonths(date, months) {
const newDate = new Date(date);
const originalDate = date.getDate();
// 保存原始年月日
const originalYear = date.getFullYear();
const originalMonth = date.getMonth();
// 计算目标年月
const totalMonths = originalMonth + months;
const expectedYear = originalYear + Math.floor(totalMonths / 12);
const expectedMonth = totalMonths % 12;
// 尝试设置新月份
newDate.setMonth(totalMonths);
// 处理月末边界情况
if (
newDate.getFullYear() !== expectedYear ||
newDate.getMonth() !== expectedMonth
) {
// 当设置月份失败时（如1月31日设置到2月）
// 设置为目标月份的最后一天
newDate.setFullYear(expectedYear, expectedMonth + 1, 0);
} else if (newDate.getDate() !== originalDate) {
// 当日期自动变化时（如1月30日设置到2月）
// 同样设置为目标月份的最后一天
newDate.setDate(0);
}
return newDate;
}
//计算当前日期占全年的进度数据
// 示例用法
// console.log(getYearProgress()); // 输出如 "35.42%"
function getYearProgress() {
const now = new Date(); // 当前时间
const year = now.getFullYear();
// 关键时间点
const yearStart = new Date(year, 0, 1); // 当年1月1日
const nextYearStart = new Date(year + 1, 0, 1); // 下一年1月1日
// 计算时间差（毫秒）
const totalMs = nextYearStart - yearStart; // 全年总时长
const passedMs = now - yearStart; // 已过时长
// 计算百分比（保留2位小数）
const progress = ((passedMs / totalMs) * 100).toFixed(2);
return parseFloat(progress);
}
export { export {
formatDate, formatDate,
getDateAfterDays, getDateAfterDays,
getDaysDifference getDaysDifference,
getDateAfterMonths,
getYearProgress
} }