Skip to content

D
dwsproject
Commit 4966f52c by 冀忠欣
Options

增加单位展示

parent d9e064f0
Showing with 158 additions and 20 deletions
tht_project/static/html/big_screen/view/cook_process.html
......@@ -31,7 +31,8 @@
</div>
<div class="pageContentBox">
<div class="pageContentBackgroundBox">
<img class="badgeIcon" src="/tht_project/static/html/big_screen/image/777.png" alt="" v-for="item in 4" :key="item">
<img class="badgeIcon" src="/tht_project/static/html/big_screen/image/777.png" alt="" v-for="item in 4"
:key="item">
</div>
<div class="pageContentArea">
<div class="contentColumnBox one">
......@@ -373,9 +374,7 @@
"plant_name": "蒸煮车间",
"category_name": "烟熏炉"
}).then(result => {
console.log(result.data)
}).catch(error => { console.error(error) })
console.log('烟熏机：', smudgingChance)
setTimeout(() => {
this.initWaterBoilTempChart()
this.initStationaryTempChart()
......@@ -1208,11 +1207,35 @@
// x轴数据
const xAxisData = ['产品1', '产品2', '产品3', '产品4']
// 投产数量
const operationData = [100, 140, 230, 50]
const operationData = [{
value: 100,
uom_name: 'kg'
}, {
value: 140,
uom_name: '件'
}, {
value: 230,
uom_name: 'm'
}, {
value: 50,
uom_name: 'km'
}]
// 完成数量
const quantityData = [20, 140, 90, 290]
const quantityData = [{
value: 20,
uom_name: 'kg'
}, {
value: 140,
uom_name: '件'
}, {
value: 90,
uom_name: 'm'
}, {
value: 290,
uom_name: 'km'
}]
// 设置最大值处理显示数值时和顶部重叠问题; 三方表达式：防止无数据时不显示y轴
const max = [...operationData, ...quantityData].length ? Math.ceil(Math.max(...[...operationData, ...quantityData]) * 1.5) : 100
const max = this.calculateMaxValue([operationData, quantityData], 1.5)
chart.setOption({
grid: {
left: '5%', right: '5%', top: '15%', bottom: '5%',
......@@ -1235,7 +1258,33 @@
axisPointer: {
type: 'shadow'
},
valueFormatter: (value) => value + '个'
formatter: (params) => {
let tooltipHtml = `<div style="font-weight:bold;margin-bottom:5px">${params[0].name}</div>`
params.forEach(param => {
const dataIndex = param.dataIndex
const unit = param.seriesIndex === 0 ? operationData[dataIndex].unit : quantityData[dataIndex].unit
// 使用系列颜色作为小圆点颜色
tooltipHtml += `
<div style="display:flex;align-items:center;margin:5px 0">
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${param.color};margin-right:10px"></span>
<span style="margin-right:10px">${param.seriesName}:</span>
<strong>${param.value}</strong>
<span>${unit}</span>
</div>
`
})
// 计算完成率
const total = params[0].value
const completed = params[1].value
const percentage = total > 0 ? ((completed / total) * 100).toFixed(1) : 0
tooltipHtml += `
<div style="margin-top:10px;border-top:1px solid #eee;padding-top:5px">
完成率: <strong>${percentage}%</strong>
</div>
`
return tooltipHtml
}
},
dataZoom: [{
id: 'meatGrainAnalysisChart',
......@@ -1271,7 +1320,7 @@
position: 'top',
color: '#FFF',
fontSize: 10,
formatter: (params) => params.value
formatter: (params) => params.value + params.data.unit
}
}, {
name: '完成数量',
......@@ -1285,11 +1334,29 @@
position: 'top',
color: '#FFF',
fontSize: 10,
formatter: (params) => params.value
formatter: (params) => params.value + params.data.unit
}
}]
})
},
/**
* 计算图表Y轴最大值
* @param {Array} dataArrays 需要合并计算的数据数组
* @param {number} multiplier 放大系数，默认1.2
* @param {number} defaultValue 默认最大值，当无数据时使用
* @returns {number} 计算后的最大值
*/
calculateMaxValue(dataArrays, multiplier = 1.2, defaultValue = 100) {
// 合并所有数组并提取value值
const allValues = dataArrays.flat().map(item => item.value);
// 如果没有数据，返回默认值
if (allValues.length === 0) return defaultValue;
// 计算最大值并应用放大系数，然后向上取整
const maxValue = Math.max(...allValues);
return Math.ceil(maxValue * multiplier);
}
},
beforeDestroy() {
// 清除时间定时器
......
tht_project/static/html/big_screen/view/expected_process.html
......@@ -31,7 +31,8 @@
</div>
<div class="pageContentBox">
<div class="pageContentBackgroundBox">
<img class="badgeIcon" src="/tht_project/static/html/big_screen/image/777.png" alt="" v-for="item in 4" :key="item">
<img class="badgeIcon" src="/tht_project/static/html/big_screen/image/777.png" alt="" v-for="item in 4"
:key="item">
</div>
<div class="pageContentArea">
<div class="contentColumnBox one">
......@@ -431,10 +432,13 @@
const seriesData = []
data.forEach(item => {
xAxisData.push(item.product_name)
seriesData.push(item.finish_qty)
seriesData.push({
value: item.finish_qty,
unit: item.uom_name
})
})
// 设置最大值处理显示数值时和顶部重叠问题; 三方表达式：防止无数据时不显示y轴
const max = [...seriesData].length ? Math.max(...[...seriesData]) * 1.5 : 100
const max = this.calculateMaxValue(seriesData, 1.5)
chart.setOption({
grid: {
left: '5%', right: '5%', top: '8%', bottom: '5%',
......@@ -448,7 +452,24 @@
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
valueFormatter: (value) => value
formatter: (params) => {
console.log(params)
let tooltipHtml = `<div style="font-weight:bold;margin-bottom:5px">${params[0].name}</div>`
params.forEach(param => {
const dataIndex = param.dataIndex
const unit = seriesData[dataIndex].unit
// 使用系列颜色作为小圆点颜色
tooltipHtml += `
<div style="display:flex;align-items:center;margin:5px 0">
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${param.color};margin-right:10px"></span>
<strong>${param.value}</strong>
<span>${unit}</span>
</div>
`
})
return tooltipHtml
}
},
dataZoom: [{
id: 'proportionChart',
......@@ -483,7 +504,7 @@
position: 'top',
color: '#FFF',
fontSize: 10,
formatter: (params) => params.value
formatter: (params) => params.value + params.data.unit
}
}]
})
......@@ -1605,11 +1626,17 @@
const quantityData = []
data.forEach(item => {
xAxisData.push(item.product_name)
operationData.push(item.produce_qty)
quantityData.push(item.finish_qty)
operationData.push({
value: item.produce_qty || 0,
unit: item.uom_name
})
quantityData.push({
value: item.finish_qty || 0,
unit: item.uom_name
})
})
// 设置最大值处理显示数值时和顶部重叠问题; 三方表达式：防止无数据时不显示y轴
const max = [...operationData, ...quantityData].length ? Math.max(...[...operationData, ...quantityData]) * 1.5 : 100
const max = this.calculateMaxValue([operationData, quantityData], 1.5)
chart.setOption({
grid: {
left: '5%', right: '5%', top: '15%', bottom: '5%',
......@@ -1630,7 +1657,33 @@
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
valueFormatter: (value) => value
formatter: (params) => {
let tooltipHtml = `<div style="font-weight:bold;margin-bottom:5px">${params[0].name}</div>`
params.forEach(param => {
const dataIndex = param.dataIndex
const unit = param.seriesIndex === 0 ? operationData[dataIndex].unit : quantityData[dataIndex].unit
// 使用系列颜色作为小圆点颜色
tooltipHtml += `
<div style="display:flex;align-items:center;margin:5px 0">
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${param.color};margin-right:10px"></span>
<span style="margin-right:10px">${param.seriesName}:</span>
<strong>${param.value}</strong>
<span>${unit}</span>
</div>
`
})
// 计算完成率
const total = params[0].value
const completed = params[1].value
const percentage = total > 0 ? ((completed / total) * 100).toFixed(1) : 0
tooltipHtml += `
<div style="margin-top:10px;border-top:1px solid #eee;padding-top:5px">
完成率: <strong>${percentage}%</strong>
</div>
`
return tooltipHtml
}
},
dataZoom: [{
id: 'meatGrainAnalysisChart',
......@@ -1666,7 +1719,7 @@
position: 'top',
color: '#FFF',
fontSize: 10,
formatter: (params) => params.value
formatter: (params) => params.value + params.data.unit
}
}, {
name: '完成数量',
......@@ -1680,11 +1733,29 @@
position: 'top',
color: '#FFF',
fontSize: 10,
formatter: (params) => params.value
formatter: (params) => params.value + params.data.unit
}
}]
})
},
/**
* 计算图表Y轴最大值
* @param {Array} dataArrays 需要合并计算的数据数组
* @param {number} multiplier 放大系数，默认1.2
* @param {number} defaultValue 默认最大值，当无数据时使用
* @returns {number} 计算后的最大值
*/
calculateMaxValue(dataArrays, multiplier = 1.2, defaultValue = 100) {
// 合并所有数组并提取value值
const allValues = dataArrays.flat().map(item => item.value);
// 如果没有数据，返回默认值
if (allValues.length === 0) return defaultValue;
// 计算最大值并应用放大系数，然后向上取整
const maxValue = Math.max(...allValues);
return Math.ceil(maxValue * multiplier);
}
},
beforeDestroy() {
// 清除时间定时器
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment