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 @@ ...@@ -31,7 +31,8 @@
</div> </div>
<div class="pageContentBox"> <div class="pageContentBox">
<div class="pageContentBackgroundBox"> <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>
<div class="pageContentArea"> <div class="pageContentArea">
<div class="contentColumnBox one"> <div class="contentColumnBox one">
...@@ -373,9 +374,7 @@ ...@@ -373,9 +374,7 @@
"plant_name": "蒸煮车间", "plant_name": "蒸煮车间",
"category_name": "烟熏炉" "category_name": "烟熏炉"
}).then(result => { }).then(result => {
console.log(result.data)
}).catch(error => { console.error(error) }) }).catch(error => { console.error(error) })
console.log('烟熏机：', smudgingChance)
setTimeout(() => { setTimeout(() => {
this.initWaterBoilTempChart() this.initWaterBoilTempChart()
this.initStationaryTempChart() this.initStationaryTempChart()
...@@ -1208,11 +1207,35 @@ ...@@ -1208,11 +1207,35 @@
// x轴数据 // x轴数据
const xAxisData = ['产品1', '产品2', '产品3', '产品4'] 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轴 // 设置最大值处理显示数值时和顶部重叠问题; 三方表达式：防止无数据时不显示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({ chart.setOption({
grid: { grid: {
left: '5%', right: '5%', top: '15%', bottom: '5%', left: '5%', right: '5%', top: '15%', bottom: '5%',
...@@ -1235,7 +1258,33 @@ ...@@ -1235,7 +1258,33 @@
axisPointer: { axisPointer: {
type: 'shadow' 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: [{ dataZoom: [{
id: 'meatGrainAnalysisChart', id: 'meatGrainAnalysisChart',
...@@ -1271,7 +1320,7 @@ ...@@ -1271,7 +1320,7 @@
position: 'top', position: 'top',
color: '#FFF', color: '#FFF',
fontSize: 10, fontSize: 10,
formatter: (params) => params.value formatter: (params) => params.value + params.data.unit
} }
}, { }, {
name: '完成数量', name: '完成数量',
...@@ -1285,11 +1334,29 @@ ...@@ -1285,11 +1334,29 @@
position: 'top', position: 'top',
color: '#FFF', color: '#FFF',
fontSize: 10, 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() { beforeDestroy() {
// 清除时间定时器 // 清除时间定时器
......
tht_project/static/html/big_screen/view/expected_process.html
...@@ -31,7 +31,8 @@ ...@@ -31,7 +31,8 @@
</div> </div>
<div class="pageContentBox"> <div class="pageContentBox">
<div class="pageContentBackgroundBox"> <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>
<div class="pageContentArea"> <div class="pageContentArea">
<div class="contentColumnBox one"> <div class="contentColumnBox one">
...@@ -431,10 +432,13 @@ ...@@ -431,10 +432,13 @@
const seriesData = [] const seriesData = []
data.forEach(item => { data.forEach(item => {
xAxisData.push(item.product_name) xAxisData.push(item.product_name)
seriesData.push(item.finish_qty) seriesData.push({
value: item.finish_qty,
unit: item.uom_name
})
}) })
// 设置最大值处理显示数值时和顶部重叠问题; 三方表达式：防止无数据时不显示y轴 // 设置最大值处理显示数值时和顶部重叠问题; 三方表达式：防止无数据时不显示y轴
const max = [...seriesData].length ? Math.max(...[...seriesData]) * 1.5 : 100 const max = this.calculateMaxValue(seriesData, 1.5)
chart.setOption({ chart.setOption({
grid: { grid: {
left: '5%', right: '5%', top: '8%', bottom: '5%', left: '5%', right: '5%', top: '8%', bottom: '5%',
...@@ -448,7 +452,24 @@ ...@@ -448,7 +452,24 @@
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { type: 'shadow' }, 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: [{ dataZoom: [{
id: 'proportionChart', id: 'proportionChart',
...@@ -483,7 +504,7 @@ ...@@ -483,7 +504,7 @@
position: 'top', position: 'top',
color: '#FFF', color: '#FFF',
fontSize: 10, fontSize: 10,
formatter: (params) => params.value formatter: (params) => params.value + params.data.unit
} }
}] }]
}) })
...@@ -1605,11 +1626,17 @@ ...@@ -1605,11 +1626,17 @@
const quantityData = [] const quantityData = []
data.forEach(item => { data.forEach(item => {
xAxisData.push(item.product_name) xAxisData.push(item.product_name)
operationData.push(item.produce_qty) operationData.push({
quantityData.push(item.finish_qty) value: item.produce_qty || 0,
unit: item.uom_name
})
quantityData.push({
value: item.finish_qty || 0,
unit: item.uom_name
})
}) })
// 设置最大值处理显示数值时和顶部重叠问题; 三方表达式：防止无数据时不显示y轴 // 设置最大值处理显示数值时和顶部重叠问题; 三方表达式：防止无数据时不显示y轴
const max = [...operationData, ...quantityData].length ? Math.max(...[...operationData, ...quantityData]) * 1.5 : 100 const max = this.calculateMaxValue([operationData, quantityData], 1.5)
chart.setOption({ chart.setOption({
grid: { grid: {
left: '5%', right: '5%', top: '15%', bottom: '5%', left: '5%', right: '5%', top: '15%', bottom: '5%',
...@@ -1630,7 +1657,33 @@ ...@@ -1630,7 +1657,33 @@
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { type: 'shadow' }, 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: [{ dataZoom: [{
id: 'meatGrainAnalysisChart', id: 'meatGrainAnalysisChart',
...@@ -1666,7 +1719,7 @@ ...@@ -1666,7 +1719,7 @@
position: 'top', position: 'top',
color: '#FFF', color: '#FFF',
fontSize: 10, fontSize: 10,
formatter: (params) => params.value formatter: (params) => params.value + params.data.unit
} }
}, { }, {
name: '完成数量', name: '完成数量',
...@@ -1680,11 +1733,29 @@ ...@@ -1680,11 +1733,29 @@
position: 'top', position: 'top',
color: '#FFF', color: '#FFF',
fontSize: 10, 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() { 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