修复库存分布问题
This commit is contained in:
@@ -99,6 +99,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { listStoppage } from '@/api/pocket/plantState'
|
||||||
|
|
||||||
// 2. 独立工具函数(避免data初始化时调用this.methods的问题)
|
// 2. 独立工具函数(避免data初始化时调用this.methods的问题)
|
||||||
/**
|
/**
|
||||||
* 获取默认日期(根据视图类型)
|
* 获取默认日期(根据视图类型)
|
||||||
@@ -353,11 +355,14 @@ export default {
|
|||||||
const defaultDate = getDefaultDate();
|
const defaultDate = getDefaultDate();
|
||||||
this.startDate = defaultDate;
|
this.startDate = defaultDate;
|
||||||
this.endDate = tab === "day" ? defaultDate : getDefaultDate(tab);
|
this.endDate = tab === "day" ? defaultDate : getDefaultDate(tab);
|
||||||
|
// 切换视图时重新加载数据
|
||||||
|
this.loadStoppageData();
|
||||||
},
|
},
|
||||||
// 日模式:日期选择器变更
|
// 日模式:日期选择器变更
|
||||||
handleDateChange(e) {
|
handleDateChange(e) {
|
||||||
this.startDate = e.detail.value;
|
this.startDate = e.detail.value;
|
||||||
this.endDate = e.detail.value; // 日模式首尾日期一致
|
this.endDate = e.detail.value; // 日模式首尾日期一致
|
||||||
|
this.loadStoppageData();
|
||||||
},
|
},
|
||||||
// 月模式:开始月份变更
|
// 月模式:开始月份变更
|
||||||
handleStartMonthChange(e) {
|
handleStartMonthChange(e) {
|
||||||
@@ -369,19 +374,105 @@ export default {
|
|||||||
if (new Date(this.endDate) > maxEndDate) {
|
if (new Date(this.endDate) > maxEndDate) {
|
||||||
this.endDate = maxEndStr;
|
this.endDate = maxEndStr;
|
||||||
}
|
}
|
||||||
|
this.loadStoppageData();
|
||||||
},
|
},
|
||||||
// 月模式:结束月份变更
|
// 月模式:结束月份变更
|
||||||
handleEndMonthChange(e) {
|
handleEndMonthChange(e) {
|
||||||
this.endDate = e.detail.value;
|
this.endDate = e.detail.value;
|
||||||
|
this.loadStoppageData();
|
||||||
},
|
},
|
||||||
// 年模式:开始年份变更
|
// 年模式:开始年份变更
|
||||||
handleStartYearChange(e) {
|
handleStartYearChange(e) {
|
||||||
this.startDate = e.detail.value;
|
this.startDate = e.detail.value;
|
||||||
|
this.loadStoppageData();
|
||||||
},
|
},
|
||||||
// 年模式:结束年份变更
|
// 年模式:结束年份变更
|
||||||
handleEndYearChange(e) {
|
handleEndYearChange(e) {
|
||||||
this.endDate = e.detail.value;
|
this.endDate = e.detail.value;
|
||||||
|
this.loadStoppageData();
|
||||||
|
},
|
||||||
|
// 加载停机数据
|
||||||
|
loadStoppageData() {
|
||||||
|
uni.showLoading({ title: '加载中' })
|
||||||
|
|
||||||
|
const queryParams = {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 100,
|
||||||
|
startDate: this.startDate,
|
||||||
|
endDate: this.endDate
|
||||||
}
|
}
|
||||||
|
|
||||||
|
listStoppage(queryParams).then(response => {
|
||||||
|
uni.hideLoading()
|
||||||
|
|
||||||
|
if (response.code === 200 && response.rows && response.rows.length > 0) {
|
||||||
|
// 处理停机数据
|
||||||
|
console.log('停机数据:', response.rows)
|
||||||
|
|
||||||
|
// 更新表格数据(日视图)
|
||||||
|
this.tableData = response.rows.map(item => ({
|
||||||
|
time: this.formatDateTime(item.startDate) + ' - ' + this.formatDateTime(item.endDate),
|
||||||
|
duration: item.duration + 'min',
|
||||||
|
remark: item.remark || '-',
|
||||||
|
machine: item.unit || '-'
|
||||||
|
}))
|
||||||
|
|
||||||
|
// 计算汇总数据
|
||||||
|
const totalDuration = response.rows.reduce((sum, item) => sum + (item.duration || 0), 0)
|
||||||
|
const totalCount = response.rows.length
|
||||||
|
|
||||||
|
this.summaryData = [
|
||||||
|
{ label: '停机时间', value: totalDuration, unit: 'min' },
|
||||||
|
{ label: '停机次数', value: totalCount },
|
||||||
|
{ label: '作业率', value: this.calculateWorkRate(totalDuration), unit: '%' }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 更新饼图数据(按班组统计)
|
||||||
|
const crewMap = {}
|
||||||
|
response.rows.forEach(item => {
|
||||||
|
const crew = item.crew || '未知班组'
|
||||||
|
crewMap[crew] = (crewMap[crew] || 0) + (item.duration || 0)
|
||||||
|
})
|
||||||
|
|
||||||
|
this.pieChartData = {
|
||||||
|
series: [{
|
||||||
|
data: Object.keys(crewMap).map(crew => ({
|
||||||
|
name: crew,
|
||||||
|
value: crewMap[crew]
|
||||||
|
}))
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 没有数据时使用默认值
|
||||||
|
console.log('暂无停机数据')
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
uni.hideLoading()
|
||||||
|
console.error('加载停机数据失败:', error)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 格式化日期时间
|
||||||
|
formatDateTime(dateStr) {
|
||||||
|
if (!dateStr) return '-'
|
||||||
|
const date = new Date(dateStr)
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||||
|
const day = String(date.getDate()).padStart(2, '0')
|
||||||
|
const hours = String(date.getHours()).padStart(2, '0')
|
||||||
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||||
|
return `${year}-${month}-${day} ${hours}:${minutes}`
|
||||||
|
},
|
||||||
|
// 计算作业率
|
||||||
|
calculateWorkRate(stopDuration) {
|
||||||
|
// 假设一天工作24小时,1440分钟
|
||||||
|
const totalMinutes = 1440
|
||||||
|
const workRate = ((totalMinutes - stopDuration) / totalMinutes) * 100
|
||||||
|
return Math.max(0, Math.min(100, workRate)).toFixed(2)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 生命周期钩子
|
||||||
|
mounted() {
|
||||||
|
this.loadStoppageData()
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -101,6 +101,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import HeadTabsVue from '../panels/klp-tabs/klp-tabs.vue';
|
import HeadTabsVue from '../panels/klp-tabs/klp-tabs.vue';
|
||||||
|
import { listPlantStateCurrent, listPlantStateHistory } from '@/api/pocket/plantState'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -169,41 +170,98 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getServerData();
|
this.getServerData();
|
||||||
|
this.loadCurrentState();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 加载当前设备状态
|
||||||
|
loadCurrentState() {
|
||||||
|
listPlantStateCurrent({ pageNum: 1, pageSize: 10 }).then(response => {
|
||||||
|
if (response.code === 200 && response.rows && response.rows.length > 0) {
|
||||||
|
const currentData = response.rows[0]
|
||||||
|
// 更新能耗状态数据
|
||||||
|
this.energyStatus = [
|
||||||
|
{ label: '工艺缎带钢线速度', value: currentData.value1 || '9.9' },
|
||||||
|
{ label: '轧机出口带钢线速度', value: currentData.value2 || '126.0' }
|
||||||
|
]
|
||||||
|
console.log('当前状态数据:', response.rows)
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
console.error('加载设备状态失败:', error)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 从服务器获取历史数据
|
||||||
getServerData() {
|
getServerData() {
|
||||||
// 模拟从服务器获取数据时的延时
|
|
||||||
uni.showLoading({
|
uni.showLoading({
|
||||||
title: '加载中'
|
title: '加载中'
|
||||||
});
|
});
|
||||||
|
|
||||||
setTimeout(() => {
|
const queryParams = {
|
||||||
let res = {
|
pageNum: 1,
|
||||||
|
pageSize: 20
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果有时间范围选择,添加到查询参数中
|
||||||
|
if (this.selectedTimeRange && this.selectedTimeRange.length === 2) {
|
||||||
|
queryParams.startTime = this.selectedTimeRange[0]
|
||||||
|
queryParams.endTime = this.selectedTimeRange[1]
|
||||||
|
}
|
||||||
|
|
||||||
|
listPlantStateHistory(queryParams).then(response => {
|
||||||
|
uni.hideLoading();
|
||||||
|
|
||||||
|
if (response.code === 200 && response.rows && response.rows.length > 0) {
|
||||||
|
const categories = []
|
||||||
|
const targetData = []
|
||||||
|
const completeData = []
|
||||||
|
|
||||||
|
response.rows.forEach(item => {
|
||||||
|
const dateStr = this.formatDate(item.insdate)
|
||||||
|
categories.push(dateStr)
|
||||||
|
targetData.push(item.value1 || 0)
|
||||||
|
completeData.push(item.value2 || 0)
|
||||||
|
})
|
||||||
|
|
||||||
|
const res = {
|
||||||
|
categories: categories,
|
||||||
|
series: [
|
||||||
|
{ name: '目标值', data: targetData },
|
||||||
|
{ name: '完成量', data: completeData }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chartData = JSON.parse(JSON.stringify(res))
|
||||||
|
} else {
|
||||||
|
this.loadDefaultChartData()
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
uni.hideLoading();
|
||||||
|
console.error('加载历史数据失败:', error)
|
||||||
|
this.loadDefaultChartData()
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 加载默认图表数据
|
||||||
|
loadDefaultChartData() {
|
||||||
|
const res = {
|
||||||
categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
|
categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
|
||||||
series: [
|
series: [
|
||||||
{
|
{ name: '目标值', data: [35, 36, 31, 33, 13, 34] },
|
||||||
name: '目标值',
|
{ name: '完成量', data: [18, 27, 21, 24, 6, 28] }
|
||||||
data: [35, 36, 31, 33, 13, 34],
|
]
|
||||||
|
}
|
||||||
|
this.chartData = JSON.parse(JSON.stringify(res))
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: '完成量',
|
// 格式化日期
|
||||||
data: [18, 27, 21, 24, 6, 28],
|
formatDate(dateStr) {
|
||||||
},
|
if (!dateStr) return ''
|
||||||
],
|
const date = new Date(dateStr)
|
||||||
};
|
return `${date.getMonth() + 1}/${date.getDate()}`
|
||||||
this.chartData = JSON.parse(JSON.stringify(res));
|
|
||||||
uni.hideLoading();
|
|
||||||
}, 500);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
openTimePicker() {
|
openTimePicker() {
|
||||||
this.$refs.timePickerPopup.open();
|
this.$refs.timePickerPopup.open();
|
||||||
uni.showLoading({
|
|
||||||
title: '加载中'
|
|
||||||
});
|
|
||||||
// 模拟数据加载
|
|
||||||
setTimeout(() => {
|
|
||||||
uni.hideLoading();
|
|
||||||
}, 500);
|
|
||||||
},
|
},
|
||||||
closeTimePicker() {
|
closeTimePicker() {
|
||||||
this.$refs.timePickerPopup.close();
|
this.$refs.timePickerPopup.close();
|
||||||
@@ -217,7 +275,7 @@ export default {
|
|||||||
if (!e) return;
|
if (!e) return;
|
||||||
this.selectedTimeRange = e;
|
this.selectedTimeRange = e;
|
||||||
this.closeTimePicker();
|
this.closeTimePicker();
|
||||||
// 这里可以调用接口重新获取数据
|
// 根据时间范围重新获取数据
|
||||||
this.getServerData();
|
this.getServerData();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -152,6 +152,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { listPlantStateCurrent, listPlantStateHistory } from '@/api/pocket/plantState'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
// 响应式数据(替代 Vue 3 的 ref)
|
// 响应式数据(替代 Vue 3 的 ref)
|
||||||
data() {
|
data() {
|
||||||
@@ -173,12 +175,71 @@ export default {
|
|||||||
// 生命周期钩子(替代 Vue 3 的 onMounted)
|
// 生命周期钩子(替代 Vue 3 的 onMounted)
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getServerData() // 页面挂载后加载数据
|
this.getServerData() // 页面挂载后加载数据
|
||||||
|
this.loadCurrentState() // 加载当前状态
|
||||||
},
|
},
|
||||||
// 方法定义(所有函数需放在 methods 中)
|
// 方法定义(所有函数需放在 methods 中)
|
||||||
methods: {
|
methods: {
|
||||||
// 模拟从服务器获取数据
|
// 加载当前设备状态
|
||||||
|
loadCurrentState() {
|
||||||
|
uni.showLoading({ title: '加载中' })
|
||||||
|
listPlantStateCurrent({ pageNum: 1, pageSize: 10 }).then(response => {
|
||||||
|
uni.hideLoading()
|
||||||
|
if (response.code === 200 && response.rows) {
|
||||||
|
// 处理当前状态数据
|
||||||
|
console.log('当前状态数据:', response.rows)
|
||||||
|
// 可以根据实际需求更新status数据
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
uni.hideLoading()
|
||||||
|
console.error('加载设备状态失败:', error)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 从服务器获取历史数据用于图表
|
||||||
getServerData() {
|
getServerData() {
|
||||||
setTimeout(() => {
|
uni.showLoading({ title: '加载中' })
|
||||||
|
|
||||||
|
listPlantStateHistory({ pageNum: 1, pageSize: 20 }).then(response => {
|
||||||
|
uni.hideLoading()
|
||||||
|
|
||||||
|
if (response.code === 200 && response.rows && response.rows.length > 0) {
|
||||||
|
// 处理历史数据,转换为图表需要的格式
|
||||||
|
const categories = []
|
||||||
|
const targetData = []
|
||||||
|
const completeData = []
|
||||||
|
|
||||||
|
response.rows.forEach(item => {
|
||||||
|
// 根据实际数据结构调整
|
||||||
|
const dateStr = this.formatDate(item.insdate)
|
||||||
|
categories.push(dateStr)
|
||||||
|
// 这里使用value1和value2作为示例,实际应根据业务需求调整
|
||||||
|
targetData.push(item.value1 || 0)
|
||||||
|
completeData.push(item.value2 || 0)
|
||||||
|
})
|
||||||
|
|
||||||
|
const res = {
|
||||||
|
categories: categories,
|
||||||
|
series: [
|
||||||
|
{ name: '目标值', data: targetData },
|
||||||
|
{ name: '完成量', data: completeData }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chartData = JSON.parse(JSON.stringify(res))
|
||||||
|
} else {
|
||||||
|
// 如果没有数据,使用默认数据
|
||||||
|
this.loadDefaultChartData()
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
uni.hideLoading()
|
||||||
|
console.error('加载历史数据失败:', error)
|
||||||
|
// 加载失败时使用默认数据
|
||||||
|
this.loadDefaultChartData()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 加载默认图表数据
|
||||||
|
loadDefaultChartData() {
|
||||||
const res = {
|
const res = {
|
||||||
categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
|
categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
|
||||||
series: [
|
series: [
|
||||||
@@ -186,9 +247,14 @@ export default {
|
|||||||
{ name: '完成量', data: [18, 27, 21, 24, 6, 28] }
|
{ name: '完成量', data: [18, 27, 21, 24, 6, 28] }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
// 深拷贝避免引用问题(Vue 2 响应式兼容)
|
|
||||||
this.chartData = JSON.parse(JSON.stringify(res))
|
this.chartData = JSON.parse(JSON.stringify(res))
|
||||||
}, 500)
|
},
|
||||||
|
|
||||||
|
// 格式化日期
|
||||||
|
formatDate(dateStr) {
|
||||||
|
if (!dateStr) return ''
|
||||||
|
const date = new Date(dateStr)
|
||||||
|
return `${date.getMonth() + 1}/${date.getDate()}`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -173,6 +173,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { listPlantStateCurrent, listPlantStateHistory } from '@/api/pocket/plantState'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
// 3. 响应式数据(替代 Vue 3 的 ref)
|
// 3. 响应式数据(替代 Vue 3 的 ref)
|
||||||
data() {
|
data() {
|
||||||
@@ -190,23 +192,77 @@ export default {
|
|||||||
// 4. 生命周期钩子(替代 Vue 3 的 onMounted)
|
// 4. 生命周期钩子(替代 Vue 3 的 onMounted)
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getServerData(); // 页面挂载后加载图表数据
|
this.getServerData(); // 页面挂载后加载图表数据
|
||||||
|
this.loadCurrentState(); // 加载当前状态
|
||||||
},
|
},
|
||||||
// 5. 方法定义(所有数据处理与逻辑)
|
// 5. 方法定义(所有数据处理与逻辑)
|
||||||
methods: {
|
methods: {
|
||||||
// 模拟从服务器获取图表数据
|
// 加载当前设备状态
|
||||||
|
loadCurrentState() {
|
||||||
|
listPlantStateCurrent({ pageNum: 1, pageSize: 10 }).then(response => {
|
||||||
|
if (response.code === 200 && response.rows) {
|
||||||
|
console.log('当前状态数据:', response.rows)
|
||||||
|
// 可以根据实际需求更新页面数据
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
console.error('加载设备状态失败:', error)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 从服务器获取图表数据
|
||||||
getServerData() {
|
getServerData() {
|
||||||
setTimeout(() => {
|
uni.showLoading({ title: '加载中' })
|
||||||
// 模拟服务器返回的图表数据
|
|
||||||
|
listPlantStateHistory({ pageNum: 1, pageSize: 20 }).then(response => {
|
||||||
|
uni.hideLoading()
|
||||||
|
|
||||||
|
if (response.code === 200 && response.rows && response.rows.length > 0) {
|
||||||
|
const categories = []
|
||||||
|
const targetData = []
|
||||||
|
const completeData = []
|
||||||
|
|
||||||
|
response.rows.forEach(item => {
|
||||||
|
const dateStr = this.formatDate(item.insdate)
|
||||||
|
categories.push(dateStr)
|
||||||
|
targetData.push(item.value1 || 0)
|
||||||
|
completeData.push(item.value2 || 0)
|
||||||
|
})
|
||||||
|
|
||||||
|
const serverRes = {
|
||||||
|
categories: categories,
|
||||||
|
series: [
|
||||||
|
{ name: "目标值", data: targetData },
|
||||||
|
{ name: "完成量", data: completeData }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chartData = JSON.parse(JSON.stringify(serverRes))
|
||||||
|
} else {
|
||||||
|
this.loadDefaultChartData()
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
uni.hideLoading()
|
||||||
|
console.error('加载历史数据失败:', error)
|
||||||
|
this.loadDefaultChartData()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 加载默认图表数据
|
||||||
|
loadDefaultChartData() {
|
||||||
const serverRes = {
|
const serverRes = {
|
||||||
categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
|
categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
|
||||||
series: [
|
series: [
|
||||||
{ name: "目标值", data: [35, 36, 31, 33, 13, 34] },
|
{ name: "目标值", data: [35, 36, 31, 33, 13, 34] },
|
||||||
{ name: "完成量", data: [18, 27, 21, 24, 6, 28] }
|
{ name: "完成量", data: [18, 27, 21, 24, 6, 28] }
|
||||||
]
|
]
|
||||||
};
|
}
|
||||||
// 深拷贝避免 Vue 2 响应式引用问题
|
this.chartData = JSON.parse(JSON.stringify(serverRes))
|
||||||
this.chartData = JSON.parse(JSON.stringify(serverRes));
|
},
|
||||||
}, 500);
|
|
||||||
|
// 格式化日期
|
||||||
|
formatDate(dateStr) {
|
||||||
|
if (!dateStr) return ''
|
||||||
|
const date = new Date(dateStr)
|
||||||
|
return `${date.getMonth() + 1}/${date.getDate()}`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -169,6 +169,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { listPlantStateCurrent, listPlantStateHistory } from '@/api/pocket/plantState'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
// 3. 响应式数据(替代 Vue 3 的 ref)
|
// 3. 响应式数据(替代 Vue 3 的 ref)
|
||||||
data() {
|
data() {
|
||||||
@@ -186,23 +188,77 @@ export default {
|
|||||||
// 4. 生命周期钩子(替代 Vue 3 的 onMounted)
|
// 4. 生命周期钩子(替代 Vue 3 的 onMounted)
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getServerData(); // 页面挂载后加载图表数据
|
this.getServerData(); // 页面挂载后加载图表数据
|
||||||
|
this.loadCurrentState(); // 加载当前状态
|
||||||
},
|
},
|
||||||
// 5. 方法定义(所有数据处理与逻辑)
|
// 5. 方法定义(所有数据处理与逻辑)
|
||||||
methods: {
|
methods: {
|
||||||
// 模拟从服务器获取图表数据
|
// 加载当前设备状态
|
||||||
|
loadCurrentState() {
|
||||||
|
listPlantStateCurrent({ pageNum: 1, pageSize: 10 }).then(response => {
|
||||||
|
if (response.code === 200 && response.rows) {
|
||||||
|
console.log('当前状态数据:', response.rows)
|
||||||
|
// 可以根据实际需求更新页面数据
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
console.error('加载设备状态失败:', error)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 从服务器获取图表数据
|
||||||
getServerData() {
|
getServerData() {
|
||||||
setTimeout(() => {
|
uni.showLoading({ title: '加载中' })
|
||||||
// 模拟服务器返回的图表数据
|
|
||||||
|
listPlantStateHistory({ pageNum: 1, pageSize: 20 }).then(response => {
|
||||||
|
uni.hideLoading()
|
||||||
|
|
||||||
|
if (response.code === 200 && response.rows && response.rows.length > 0) {
|
||||||
|
const categories = []
|
||||||
|
const targetData = []
|
||||||
|
const completeData = []
|
||||||
|
|
||||||
|
response.rows.forEach(item => {
|
||||||
|
const dateStr = this.formatDate(item.insdate)
|
||||||
|
categories.push(dateStr)
|
||||||
|
targetData.push(item.value1 || 0)
|
||||||
|
completeData.push(item.value2 || 0)
|
||||||
|
})
|
||||||
|
|
||||||
|
const serverRes = {
|
||||||
|
categories: categories,
|
||||||
|
series: [
|
||||||
|
{ name: "目标值", data: targetData },
|
||||||
|
{ name: "完成量", data: completeData }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chartData = JSON.parse(JSON.stringify(serverRes))
|
||||||
|
} else {
|
||||||
|
this.loadDefaultChartData()
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
uni.hideLoading()
|
||||||
|
console.error('加载历史数据失败:', error)
|
||||||
|
this.loadDefaultChartData()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 加载默认图表数据
|
||||||
|
loadDefaultChartData() {
|
||||||
const serverRes = {
|
const serverRes = {
|
||||||
categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
|
categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
|
||||||
series: [
|
series: [
|
||||||
{ name: "目标值", data: [35, 36, 31, 33, 13, 34] },
|
{ name: "目标值", data: [35, 36, 31, 33, 13, 34] },
|
||||||
{ name: "完成量", data: [18, 27, 21, 24, 6, 28] }
|
{ name: "完成量", data: [18, 27, 21, 24, 6, 28] }
|
||||||
]
|
]
|
||||||
};
|
}
|
||||||
// 深拷贝避免 Vue 2 响应式引用问题
|
this.chartData = JSON.parse(JSON.stringify(serverRes))
|
||||||
this.chartData = JSON.parse(JSON.stringify(serverRes));
|
},
|
||||||
}, 500);
|
|
||||||
|
// 格式化日期
|
||||||
|
formatDate(dateStr) {
|
||||||
|
if (!dateStr) return ''
|
||||||
|
const date = new Date(dateStr)
|
||||||
|
return `${date.getMonth() + 1}/${date.getDate()}`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -169,6 +169,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { listPlantStateCurrent, listPlantStateHistory } from '@/api/pocket/plantState'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
// 3. 响应式数据(替代 Vue 3 的 ref)
|
// 3. 响应式数据(替代 Vue 3 的 ref)
|
||||||
data() {
|
data() {
|
||||||
@@ -186,23 +188,77 @@ export default {
|
|||||||
// 4. 生命周期钩子(替代 Vue 3 的 onMounted)
|
// 4. 生命周期钩子(替代 Vue 3 的 onMounted)
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getServerData(); // 页面挂载后加载图表数据
|
this.getServerData(); // 页面挂载后加载图表数据
|
||||||
|
this.loadCurrentState(); // 加载当前状态
|
||||||
},
|
},
|
||||||
// 5. 方法定义(所有数据处理与逻辑)
|
// 5. 方法定义(所有数据处理与逻辑)
|
||||||
methods: {
|
methods: {
|
||||||
// 模拟从服务器获取图表数据
|
// 加载当前设备状态
|
||||||
|
loadCurrentState() {
|
||||||
|
listPlantStateCurrent({ pageNum: 1, pageSize: 10 }).then(response => {
|
||||||
|
if (response.code === 200 && response.rows) {
|
||||||
|
console.log('当前状态数据:', response.rows)
|
||||||
|
// 可以根据实际需求更新页面数据
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
console.error('加载设备状态失败:', error)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 从服务器获取图表数据
|
||||||
getServerData() {
|
getServerData() {
|
||||||
setTimeout(() => {
|
uni.showLoading({ title: '加载中' })
|
||||||
// 模拟服务器返回的图表数据
|
|
||||||
|
listPlantStateHistory({ pageNum: 1, pageSize: 20 }).then(response => {
|
||||||
|
uni.hideLoading()
|
||||||
|
|
||||||
|
if (response.code === 200 && response.rows && response.rows.length > 0) {
|
||||||
|
const categories = []
|
||||||
|
const targetData = []
|
||||||
|
const completeData = []
|
||||||
|
|
||||||
|
response.rows.forEach(item => {
|
||||||
|
const dateStr = this.formatDate(item.insdate)
|
||||||
|
categories.push(dateStr)
|
||||||
|
targetData.push(item.value1 || 0)
|
||||||
|
completeData.push(item.value2 || 0)
|
||||||
|
})
|
||||||
|
|
||||||
|
const serverRes = {
|
||||||
|
categories: categories,
|
||||||
|
series: [
|
||||||
|
{ name: "目标值", data: targetData },
|
||||||
|
{ name: "完成量", data: completeData }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chartData = JSON.parse(JSON.stringify(serverRes))
|
||||||
|
} else {
|
||||||
|
this.loadDefaultChartData()
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
uni.hideLoading()
|
||||||
|
console.error('加载历史数据失败:', error)
|
||||||
|
this.loadDefaultChartData()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 加载默认图表数据
|
||||||
|
loadDefaultChartData() {
|
||||||
const serverRes = {
|
const serverRes = {
|
||||||
categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
|
categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
|
||||||
series: [
|
series: [
|
||||||
{ name: "目标值", data: [35, 36, 31, 33, 13, 34] },
|
{ name: "目标值", data: [35, 36, 31, 33, 13, 34] },
|
||||||
{ name: "完成量", data: [18, 27, 21, 24, 6, 28] }
|
{ name: "完成量", data: [18, 27, 21, 24, 6, 28] }
|
||||||
]
|
]
|
||||||
};
|
}
|
||||||
// 深拷贝避免 Vue 2 响应式引用问题
|
this.chartData = JSON.parse(JSON.stringify(serverRes))
|
||||||
this.chartData = JSON.parse(JSON.stringify(serverRes));
|
},
|
||||||
}, 500);
|
|
||||||
|
// 格式化日期
|
||||||
|
formatDate(dateStr) {
|
||||||
|
if (!dateStr) return ''
|
||||||
|
const date = new Date(dateStr)
|
||||||
|
return `${date.getMonth() + 1}/${date.getDate()}`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user