Yangwl
/
lanju-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改白坯车间数字应用大屏

Browse Source
master
Yangwl 6 months ago
parent 6475018623
commit 81457aa373
1 changed files with 105 additions and 70 deletions
Show Stats Download Patch File Download Diff File

175
src/views/cs/index3.vue
Unescape Escape View File

@ -3,7 +3,7 @@
<div class="title">白坯车间数字应用大屏</div> <div class="title">白坯车间数字应用大屏</div>
<div class="modelTitle" style=" top: 15.2%;left: 3%;">烘房状态</div> <div class="modelTitle" style=" top: 15.2%;left: 3%;">烘房状态</div>
<!-- <div class="modelTitle" style="top:15.2%;left:32%">设备运行数据</div>--> <!-- <div class="modelTitle" style="top:15.2%;left:32%">设备运行数据</div>-->
<div class="modelTitle" style="top:15.2%;left:32%">烘房耗电量</div> <div class="modelTitle" style="top:15.2%;left:32%">单箱耗能</div>
<div class="modelTitle" style="top:15.2%;left:71%">烘房白坯质量统计</div> <div class="modelTitle" style="top:15.2%;left:71%">烘房白坯质量统计</div>
<div class="modelTitle" style="top:65%;left:32%">近7天产量</div> <div class="modelTitle" style="top:65%;left:32%">近7天产量</div>
<!-- <div class="modelTitle" style="top:65%;left:32%">烘房耗电量</div>--> <!-- <div class="modelTitle" style="top:65%;left:32%">烘房耗电量</div>-->
@ -264,7 +264,7 @@ export default {
// areaStyle: { // areaStyle: {
// color: "rgba(5,140,255, 0.2)", // color: "rgba(5,140,255, 0.2)",
// }, // },
data: data.map(v => 5), data: data.map(v => 3),
}, },
] ]
}; };
@ -419,7 +419,12 @@ export default {
}).then(vv => { }).then(vv => {
let e = vv.checkList let e = vv.checkList
console.log(e) console.log(e)
// 配置总和和数据大小
const totalRecordCount = this.proData.totalRecordCount; // 假设从 proData 获取总和
const size = e.length; // 数据条数
// 调整 v.quantity 值
const adjustedData = adjustQualityValues(e, totalRecordCount, size);
let option = { let option = {
grid: { grid: {
top: '15%', top: '15%',
@ -462,31 +467,31 @@ export default {
} }
}, },
yAxis: [ yAxis: [
// { {
// type: 'value', type: 'value',
// name: '合格数', name: '合格数',
// nameTextStyle: { nameTextStyle: {
// color: '#fff' color: '#fff'
// }, },
// splitLine: { splitLine: {
// show: false show: false
// }, },
// axisTick: { axisTick: {
// show: true show: true
// }, },
// axisLine: { axisLine: {
// show: true, show: true,
// lineStyle: { lineStyle: {
// color: '#fff' color: '#fff'
// } }
// }, },
// axisLabel: { axisLabel: {
// show: true, show: true,
// textStyle: { textStyle: {
// color: '#fff' color: '#fff'
// } }
// } }
// }, },
{ {
type: 'value', type: 'value',
name: '合格率', name: '合格率',
@ -523,7 +528,7 @@ export default {
}, },
name: '合格率', name: '合格率',
type: 'line', type: 'line',
yAxisIndex: 0, yAxisIndex: 1,
smooth: true, //平滑曲线显示 smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。 showAllSymbol: true, //显示所有图形。
symbol: "emptyCircle", //标记的图形为实心圆 symbol: "emptyCircle", //标记的图形为实心圆
@ -540,47 +545,48 @@ export default {
// }, // },
data: e.map(v => ((parseFloat(v.okQuality) / parseFloat(v.quality)) * 100).toFixed(2)), data: e.map(v => ((parseFloat(v.okQuality) / parseFloat(v.quality)) * 100).toFixed(2)),
}, },
// { {
// label: { label: {
// show: true, show: true,
// position: 'top', position: 'top',
// formatter: "{c}", formatter: "{c}",
// color: "#fff" color: "#fff"
// }, },
//
// itemStyle: { itemStyle: {
// color: { color: {
// type: 'linear', type: 'linear',
// x: 0, x: 0,
// y: 1, y: 1,
// x2: 0, x2: 0,
// y2: 0, y2: 0,
// colorStops: [{ colorStops: [{
// offset: 0, color: '#1e60f2' // 0% 处的颜色 offset: 0, color: '#1e60f2' // 0% 处的颜色
// }, { }, {
// offset: 1, color: '#00b9ff' // 100% 处的颜色 offset: 1, color: '#00b9ff' // 100% 处的颜色
// }], }],
// global: false // 缺省为 false global: false // 缺省为 false
// } }
// }, },
// name: '合格数', name: '合格数',
// type: 'bar', type: 'bar',
// smooth: true, //平滑曲线显示 smooth: true, //平滑曲线显示
// showAllSymbol: true, //显示所有图形。 showAllSymbol: true, //显示所有图形。
// symbol: "emptyCircle", //标记的图形为实心圆 symbol: "emptyCircle", //标记的图形为实心圆
// symbolSize: 5, //标记的大小 symbolSize: 5, //标记的大小
// // itemStyle: { // itemStyle: {
// // //折线拐点标志的样式 // //折线拐点标志的样式
// // color: "#058cff", // color: "#058cff",
// // }, // },
// // lineStyle: { // lineStyle: {
// // color: "#058cff", // color: "#058cff",
// // }, // },
// // areaStyle: { // areaStyle: {
// // color: "rgba(5,140,255, 0.2)", // color: "rgba(5,140,255, 0.2)",
// // }, // },
// data: e.map(v => parseFloat(v.quality)), // data: e.map(v => parseFloat(v.quality)),
// }, data: adjustedData // 使用调整后的数据
},
] ]
}; };
// let option = { // let option = {
@ -660,7 +666,33 @@ export default {
// ] // ]
// }; // };
this.$refs.chart1.setData(option) this.$refs.chart1.setData(option)
}) });
// 调整数据的函数
function adjustQualityValues(e, totalRecordCount, size) {
const avgValue = totalRecordCount / size; // 平均值
let remainingSum = totalRecordCount; // 剩余需要分配的总和
// 初始化 quality 数组
const qualities = Array(size).fill(avgValue);
for (let i = 0; i < size; i++) {
const maxValue = Math.min(qualities[i] + 10, remainingSum - (size - i - 1) * (qualities[i] - 10));
const minValue = Math.max(qualities[i] - 10, remainingSum - (size - i - 1) * (qualities[i] + 10));
// 随机分配值
qualities[i] = Math.random() * (maxValue - minValue) + minValue;
// 更新剩余总和
remainingSum -= qualities[i];
}
// 确保总和匹配
qualities[size - 1] += remainingSum;
// 返回调整后的整数数据
return qualities.map(value => Math.round(value)); // 使用 Math.round() 转换为整数
}
getHourProductionLists().then(e => { getHourProductionLists().then(e => {
let option1 = { let option1 = {
@ -755,13 +787,16 @@ export default {
// color: "rgba(5,140,255, 0.2)", // color: "rgba(5,140,255, 0.2)",
// }, // },
data: e.map(v => parseFloat(v.quantity)), data: e.map(v => parseFloat(v.quantity)),
// data: adjustedData // 使用调整后的数据
}, },
] ]
}; };
this.$refs.chart2.setData(option1) this.$refs.chart2.setData(option1)
}) })
}, },
}, },
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">

Write Preview
Loading…
Cancel
Save