465 lines
13 KiB
Vue
465 lines
13 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 日月年汇总单选 -->
|
||
<view class="tab-container">
|
||
<view
|
||
v-for="item in timeTabs"
|
||
:key="item.value"
|
||
class="tab-item"
|
||
:class="{ active: activeTab === item.value }"
|
||
@click="handleTabChange(item.value)"
|
||
>
|
||
{{ item.label }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 日期选择器 -->
|
||
<view class="date-picker">
|
||
<!-- 日模式 -->
|
||
<view v-if="activeTab === 'day'" class="date-item">
|
||
<picker
|
||
mode="date"
|
||
:value="startDate"
|
||
@change="handleDateChange"
|
||
>
|
||
<view class="picker-text">选择日期：{{ startDate }}</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<!-- 月模式 -->
|
||
<view v-else-if="activeTab === 'month'" class="date-range">
|
||
<view class="date-item">
|
||
<picker
|
||
mode="date"
|
||
fields="month"
|
||
:value="startDate"
|
||
@change="handleStartMonthChange"
|
||
>
|
||
<view class="picker-text">开始月份：{{ startDate }}</view>
|
||
</picker>
|
||
</view>
|
||
<view class="date-item">
|
||
<picker
|
||
mode="date"
|
||
fields="month"
|
||
:value="endDate"
|
||
:start="startDate"
|
||
:end="maxMonthEnd"
|
||
@change="handleEndMonthChange"
|
||
>
|
||
<view class="picker-text">结束月份：{{ endDate }}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 年模式 -->
|
||
<view v-else class="date-range">
|
||
<view class="date-item">
|
||
<picker
|
||
mode="date"
|
||
fields="year"
|
||
:value="startDate"
|
||
@change="handleStartYearChange"
|
||
>
|
||
<view class="picker-text">开始年份：{{ startDate }}</view>
|
||
</picker>
|
||
</view>
|
||
<view class="date-item">
|
||
<picker
|
||
mode="date"
|
||
fields="year"
|
||
:value="endDate"
|
||
@change="handleEndYearChange"
|
||
>
|
||
<view class="picker-text">结束年份：{{ endDate }}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 统计图轮播（产量相关） -->
|
||
<view class="chart-container">
|
||
<swiper
|
||
class="chart-swiper"
|
||
:current="currentSwiperIndex"
|
||
@change="onSwiperChange"
|
||
:autoplay="false"
|
||
:circular="false"
|
||
:indicator-dots="true"
|
||
indicator-active-color="#1a73e8"
|
||
indicator-color="#e5e5e5"
|
||
>
|
||
<swiper-item v-for="(item, index) in chanLiangChartConfig" :key="index">
|
||
<qiun-data-charts :type="item.type" :chartData="item.chartData" :title="item.title"/>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<!-- 日期范围汇总 -->
|
||
<klp-collapse-panel :title="'汇总（' + displayDateRange + '）'">
|
||
<k-metric-card
|
||
:items="summaryData"
|
||
:columns="3"
|
||
/>
|
||
|
||
<!-- 汇总饼图轮播 -->
|
||
<swiper
|
||
class="chart-swiper"
|
||
:autoplay="false"
|
||
:circular="false"
|
||
:indicator-dots="true"
|
||
indicator-active-color="#1a73e8"
|
||
indicator-color="#e5e5e5"
|
||
>
|
||
<swiper-item v-for="(item, index) in summaryChartConfig" :key="index">
|
||
<qiun-data-charts type="pie" :opts="item.opts" :chartData="item.chartData" :title="item.title"/>
|
||
</swiper-item>
|
||
</swiper>
|
||
</klp-collapse-panel>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 2. 独立工具函数（避免Vue2 data初始化时调用this.methods的问题）
|
||
/**
|
||
* 获取默认日期（根据视图类型）
|
||
* @param {string} type - 视图类型：day/month/year
|
||
* @returns {string} 格式化后的日期
|
||
*/
|
||
function getDefaultDate(type = "day") {
|
||
const date = new Date();
|
||
return formatDate(date, type);
|
||
}
|
||
|
||
/**
|
||
* 格式化日期
|
||
* @param {Date} date - 日期对象
|
||
* @param {string} type - 视图类型：day/month/year
|
||
* @returns {string} 格式化后的日期
|
||
*/
|
||
function formatDate(date, type) {
|
||
const year = date.getFullYear();
|
||
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||
const day = date.getDate().toString().padStart(2, "0");
|
||
|
||
switch (type) {
|
||
case "day": return `${year}-${month}-${day}`;
|
||
case "month": return `${year}-${month}`;
|
||
case "year": return `${year}`;
|
||
default: return `${year}-${month}-${day}`;
|
||
}
|
||
}
|
||
|
||
export default {
|
||
// 4. 响应式数据（替代 Vue3 的 ref）
|
||
data() {
|
||
return {
|
||
// 激活的视图类型（日/月/年）
|
||
activeTab: "day",
|
||
// 开始/结束日期（月份/年份）
|
||
startDate: getDefaultDate(),
|
||
endDate: getDefaultDate(),
|
||
// 视图切换选项
|
||
timeTabs: [
|
||
{ label: "日视图", value: "day" },
|
||
{ label: "月视图", value: "month" },
|
||
{ label: "年视图", value: "year" }
|
||
],
|
||
// 产量相关图表配置（轮播）
|
||
chanLiangChartConfig: [
|
||
{
|
||
title: "规格曲线",
|
||
type: "column",
|
||
chartData: {} // 初始空对象，后续加载数据
|
||
},
|
||
{
|
||
title: "超产-欠产统计",
|
||
type: "line",
|
||
chartData: {} // 初始空对象，后续加载数据
|
||
},
|
||
{
|
||
title: "产量-成材率统计",
|
||
type: "column",
|
||
chartData: {
|
||
categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
|
||
series: [
|
||
{ name: "目标值", data: [35, 36, 31, 33, 13, 34] },
|
||
{ name: "完成量", data: [18, 27, 21, 24, 6, 28] }
|
||
]
|
||
} // 固定初始数据
|
||
}
|
||
],
|
||
// 汇总饼图配置（轮播）
|
||
summaryChartConfig: [
|
||
{
|
||
title: "成品厚度统计(mm)",
|
||
opts: {
|
||
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
||
padding: [5,5,5,5],
|
||
enableScroll: false,
|
||
position: "left",
|
||
float: "left",
|
||
extra: {
|
||
pie: {
|
||
activeOpacity: 0.5,
|
||
activeRadius: 10,
|
||
offsetAngle: 0,
|
||
labelWidth: 15,
|
||
border: false,
|
||
borderWidth: 3,
|
||
borderColor: "#FFFFFF"
|
||
}
|
||
}
|
||
},
|
||
chartData: JSON.parse(JSON.stringify({
|
||
series: [{ data: [{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18},{"name":"五班","value":8}] }]
|
||
}))
|
||
},
|
||
{
|
||
title: "钢种统计",
|
||
opts: {
|
||
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
||
padding: [5,5,5,5],
|
||
enableScroll: false,
|
||
extra: {
|
||
pie: {
|
||
activeOpacity: 0.5,
|
||
activeRadius: 10,
|
||
offsetAngle: 0,
|
||
labelWidth: 15,
|
||
border: false,
|
||
borderWidth: 3,
|
||
borderColor: "#FFFFFF"
|
||
}
|
||
}
|
||
},
|
||
chartData: JSON.parse(JSON.stringify({
|
||
series: [{ data: [{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18},{"name":"五班","value":8}] }]
|
||
}))
|
||
},
|
||
{
|
||
title: "班组统计",
|
||
opts: {
|
||
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
||
padding: [5,5,5,5],
|
||
enableScroll: false,
|
||
extra: {
|
||
pie: {
|
||
activeOpacity: 0.5,
|
||
activeRadius: 10,
|
||
offsetAngle: 0,
|
||
labelWidth: 15,
|
||
border: false,
|
||
borderWidth: 3,
|
||
borderColor: "#FFFFFF"
|
||
}
|
||
}
|
||
},
|
||
chartData: JSON.parse(JSON.stringify({
|
||
series: [{ data: [{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18},{"name":"五班","value":8}] }]
|
||
}))
|
||
}
|
||
],
|
||
// 轮播图当前索引
|
||
currentSwiperIndex: 0,
|
||
// 服务器加载的图表基础数据
|
||
chartData: {},
|
||
// 汇总指标卡数据
|
||
summaryData: [
|
||
{ label: "生产钢卷数", value: 186 },
|
||
{ label: "平均宽度", value: 1054, unit: "mm" },
|
||
{ label: "平均厚度", value: 0.93, unit: "mm" },
|
||
{ label: "原料总量", value: 3396.47, unit: "t" },
|
||
{ label: "成品总量", value: 4360.18, unit: "t" },
|
||
{ label: "成材率", value: 95.99, unit: "%" } // 原代码unit写t，推测是笔误，修正为%
|
||
]
|
||
};
|
||
},
|
||
// 5. 计算属性（替代 Vue3 的 computed 函数）
|
||
computed: {
|
||
// 月模式：最大结束月份（开始月份+1年）
|
||
maxMonthEnd() {
|
||
if (!this.startDate) return "";
|
||
const date = new Date(this.startDate);
|
||
date.setFullYear(date.getFullYear() + 1);
|
||
return formatDate(date, "month");
|
||
},
|
||
// 日期范围展示文本（汇总标题用）
|
||
displayDateRange() {
|
||
switch (this.activeTab) {
|
||
case "day":
|
||
return this.startDate;
|
||
case "month":
|
||
return `${this.startDate} 至 ${this.endDate}`;
|
||
case "year":
|
||
return `${this.startDate} 至 ${this.endDate}`;
|
||
default:
|
||
return "";
|
||
}
|
||
}
|
||
},
|
||
// 6. 生命周期钩子（替代 Vue3 的 onMounted）
|
||
mounted() {
|
||
this.getServerData(); // 页面挂载后加载图表数据
|
||
},
|
||
// 7. 方法定义（所有交互逻辑与数据处理）
|
||
methods: {
|
||
// 切换视图（日/月/年）
|
||
handleTabChange(tab) {
|
||
this.activeTab = tab;
|
||
// 重置日期：日视图首尾一致，月/年视图首尾默认当前
|
||
const defaultDate = getDefaultDate();
|
||
this.startDate = defaultDate;
|
||
this.endDate = tab === "day" ? defaultDate : getDefaultDate(tab);
|
||
},
|
||
// 日模式：日期选择器变更
|
||
handleDateChange(e) {
|
||
this.startDate = e.detail.value;
|
||
this.endDate = e.detail.value; // 日视图首尾日期同步
|
||
},
|
||
// 月模式：开始月份变更
|
||
handleStartMonthChange(e) {
|
||
this.startDate = e.detail.value;
|
||
// 自动调整结束月份：不超过开始月份+1年
|
||
const maxEndDate = new Date(this.startDate);
|
||
maxEndDate.setFullYear(maxEndDate.getFullYear() + 1);
|
||
const maxEndStr = formatDate(maxEndDate, "month");
|
||
if (new Date(this.endDate) > maxEndDate) {
|
||
this.endDate = maxEndStr;
|
||
}
|
||
},
|
||
// 月模式：结束月份变更
|
||
handleEndMonthChange(e) {
|
||
this.endDate = e.detail.value;
|
||
},
|
||
// 年模式：开始年份变更
|
||
handleStartYearChange(e) {
|
||
this.startDate = e.detail.value;
|
||
},
|
||
// 年模式：结束年份变更
|
||
handleEndYearChange(e) {
|
||
this.endDate = e.detail.value;
|
||
},
|
||
// 轮播图切换回调（更新当前索引）
|
||
onSwiperChange(e) {
|
||
this.currentSwiperIndex = e.detail.current;
|
||
},
|
||
// 模拟从服务器加载图表数据
|
||
getServerData() {
|
||
setTimeout(() => {
|
||
// 模拟服务器返回数据
|
||
const serverRes = {
|
||
categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
|
||
series: [
|
||
{ name: "目标值", data: [35, 36, 31, 33, 13, 34] },
|
||
{ name: "完成量", data: [18, 27, 21, 24, 6, 28] }
|
||
]
|
||
};
|
||
// 深拷贝避免引用问题，确保Vue2响应式
|
||
this.chartData = JSON.parse(JSON.stringify(serverRes));
|
||
|
||
// 更新产量图表配置的前两个图表数据（第三个固定）
|
||
this.chanLiangChartConfig.forEach((item, index) => {
|
||
if (index < 2) { // 仅前两个图表用服务器数据
|
||
item.chartData = JSON.parse(JSON.stringify(this.chartData));
|
||
}
|
||
});
|
||
}, 500);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.container {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
/* 简洁Tab容器 */
|
||
.tab-container {
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
margin-bottom: 20rpx;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
border: 1rpx solid #e8e8e8;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 24rpx 20rpx;
|
||
color: #666;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
|
||
&:not(:last-child)::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 1rpx;
|
||
height: 40rpx;
|
||
background: #e8e8e8;
|
||
}
|
||
}
|
||
|
||
.tab-item.active {
|
||
color: #fff;
|
||
background: #1a73e8;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 日期选择器 */
|
||
.date-picker {
|
||
padding: 20rpx;
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 20rpx;
|
||
border: 1rpx solid #e8e8e8;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.date-range {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.date-item {
|
||
flex: 1;
|
||
}
|
||
|
||
.picker-text {
|
||
padding: 20rpx;
|
||
background: #f8f9fa;
|
||
border-radius: 10rpx;
|
||
color: #333;
|
||
font-size: 28rpx;
|
||
border: 1rpx solid #e8e8e8;
|
||
transition: all 0.2s ease;
|
||
|
||
&:active {
|
||
background: #f0f2f5;
|
||
}
|
||
}
|
||
|
||
/* 图表容器 */
|
||
.chart-container {
|
||
margin-bottom: 20rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
border: 1rpx solid #e8e8e8;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.chart-swiper {
|
||
height: 500rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
</style> |