已完成修改,现在点击"查看"按钮时:

- 如果机台筛选为"全部机台",图表将在对话框中显示
- 如果筛选为特定机台,图表将在表格下方显示
修改内容总结:

1. 新增状态变量 :

   - showChartDialog - 控制对话框显示
   - salesChartDialogRef - 对话框图表的 ref
2. 修改 showSalesHistory 函数 : EnamellingMachineStatus.vue:484-493

   - 根据 selectedEquipment 判断显示位置
3. 新增对话框组件 : EnamellingMachineStatus.vue:181-210

   - 使用 el-dialog 组件,包含完整的图表控制元素
4. 更新 initSalesChart 函数 : EnamellingMachineStatus.vue:645-662

   - 根据显示位置选择正确的图表 ref
master
huangjinysf 2 months ago
parent 825ea42171
commit 1c759f0b22

@ -177,7 +177,36 @@
</el-table> </el-table>
</div> </div>
<!-- 销售历史图表 --> <!-- 销售历史图表对话框 -->
<el-dialog
v-model="showChartDialog"
:title="`销售历史 - ${salesChartTitle}`"
width="90%"
destroy-on-close
@close="closeChart"
>
<div class="chart-controls">
<span class="filter-label">时间范围:</span>
<el-select v-model="selectedTimeRange" @change="onChartTimeRangeChange" style="width: 120px">
<el-option label="近1天" value="近1天" />
<el-option label="近3天" value="近3天" />
<el-option label="近1周" value="近1周" />
<el-option label="近1月" value="近1月" />
</el-select>
<span class="filter-label" style="margin-left: 20px;">显示单位:</span>
<el-radio-group v-model="chartUnit" @change="onChartUnitChange" size="small">
<el-radio-button value="box">箱数</el-radio-button>
<el-radio-button value="weight">重量</el-radio-button>
</el-radio-group>
</div>
<div v-if="salesChartLoading || historyChartLoading" v-loading="true" class="chart-loading" style="height: 400px;"></div>
<div v-else-if="!hasSalesData && !hasHistoryData" class="no-data-message" style="height: 400px;">
暂无销售和库存数据
</div>
<div v-show="!salesChartLoading && (hasSalesData || hasHistoryData)" ref="salesChartDialogRef" class="chart" style="height: 450px;"></div>
</el-dialog>
<!-- 销售历史图表表格下方显示 -->
<div v-if="showChart" class="sales-chart-container"> <div v-if="showChart" class="sales-chart-container">
<div class="chart-header"> <div class="chart-header">
<h4>销售历史 - {{ salesChartTitle }}</h4> <h4>销售历史 - {{ salesChartTitle }}</h4>
@ -230,8 +259,6 @@ const selectedEquipment = ref('all')
// //
const selectedCompletionLevel = ref('all') // const selectedCompletionLevel = ref('all') //
//
const showChart = ref(false)
const salesChartLoading = ref(false) const salesChartLoading = ref(false)
const historyChartLoading = ref(false) const historyChartLoading = ref(false)
const salesData = ref([]) const salesData = ref([])
@ -243,8 +270,13 @@ const chartUnit = ref('box')
const salesChartTitle = ref('') const salesChartTitle = ref('')
const currentSalesAxle = ref(null) const currentSalesAxle = ref(null)
const salesChartRef = ref(null) const salesChartRef = ref(null)
const salesChartDialogRef = ref(null)
let salesChart = null let salesChart = null
//
const showChart = ref(false)
const showChartDialog = ref(false)
// 使 // 使
equipmentData.value = props.equipmentData equipmentData.value = props.equipmentData
@ -480,7 +512,12 @@ const showSalesHistory = (row) => {
currentSalesAxle.value = { ...row }; currentSalesAxle.value = { ...row };
salesChartTitle.value = `${row.equipment_code} - ${row.axle_number} - ${row.specification} - ${row.model}`; salesChartTitle.value = `${row.equipment_code} - ${row.axle_number} - ${row.specification} - ${row.model}`;
if (selectedEquipment.value === 'all') {
showChartDialog.value = true;
} else {
showChart.value = true; showChart.value = true;
}
salesData.value = []; salesData.value = [];
historyData.value = []; historyData.value = [];
@ -494,6 +531,7 @@ const showSalesHistory = (row) => {
// //
const closeChart = () => { const closeChart = () => {
showChart.value = false; showChart.value = false;
showChartDialog.value = false;
if (salesChart) { if (salesChart) {
salesChart.dispose(); salesChart.dispose();
salesChart = null; salesChart = null;
@ -603,7 +641,10 @@ const initSalesChart = (retryCount = 0) => {
return; return;
} }
if (!salesChartRef.value) { const isDialog = showChartDialog.value;
const chartRef = isDialog ? salesChartDialogRef.value : salesChartRef.value;
if (!chartRef) {
if (retryCount >= 20) { if (retryCount >= 20) {
return; return;
} }
@ -617,7 +658,7 @@ const initSalesChart = (retryCount = 0) => {
salesChart.dispose(); salesChart.dispose();
} }
salesChart = echarts.init(salesChartRef.value); salesChart = echarts.init(chartRef);
const salesDateMap = new Map(); const salesDateMap = new Map();
const historyDateMap = new Map(); const historyDateMap = new Map();

Loading…
Cancel
Save