zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:数据大屏不显示AVG

This commit is contained in:
shijing 2025-04-29 14:43:37 +08:00
parent 3a7deef1bf
commit c5ac695a47
1 changed files with 114 additions and 394 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

506
src/views/bigScreen/index_photon.vue
View File

@ -7,84 +7,35 @@
</el-header>
<el-main id="mainBlock">
<el-row style="height: 100%">
<div
style="position: absolute; left: 0; width: 20%; z-index: 10"
>
<div
style="
display: flex;
flex-direction: column;
height: 100%;
padding: 0 10px;
"
>
<div class="leftPosition">
<div class="leftPositionContainer">
<div class="flexItem" style="flex: 1">
<div class="blockTitle">
<div class="blockTitleIcon"></div>
<div>本周交付数</div>
</div>
<div
id="line1"
style="
width: 100%;
height: 92%;
background: rgba(9, 31, 43, 0.5);
border-radius: 20px;
margin-top: 5px;
"
></div>
<div id="line1"></div>
</div>
<div class="flexItem" style="flex: 1">
<div class="blockTitle">
<div class="blockTitleIcon"></div>
<div>本周合格数</div>
</div>
<div
id="bar1"
style="
width: 100%;
height: 92%;
background: rgba(9, 31, 43, 0.5);
border-radius: 20px;
margin-top: 5px;
"
></div>
<div id="bar1"></div>
</div>
<div class="flexItem" style="flex: 1">
<div class="blockTitle">
<div class="blockTitleIcon"></div>
<div>本周合格率</div>
</div>
<div
id="line2"
style="
width: 100%;
height: 92%;
background: rgba(9, 31, 43, 0.5);
border-radius: 20px;
margin-top: 5px;
"
></div>
<div id="line2"></div>
</div>
</div>
</div>
<el-col :span="24">
<div class="model">
<div
style="
position: absolute;
width: 100%;
text-align: center;
"
>
<div
style="
margin: 5px 0 50px 0;
color: #fff;
font-size: 12px;
font-weight: bold;
"
>
<div class="modelContainer">
<div class="modeltopTitle">
<img src="img/photon_top_line.png" />
<span>枣庄</span>
{{ currentDay }}{{ currentWeek
@ -95,16 +46,6 @@
/>
</div>
<div class="totalNumContnier">
<div class="totalNumWrap totalNum_orange">
<img
class=""
src="img/number_bg_orange.png"
/>
<span class="totalNumText">AVG合格数</span>
<div class="totalNumber">
{{ countOk_AVG }}
</div>
</div>
<div class="totalNumWrap totalNumWrap_green">
<img src="img/number_bg_green.png" />
<span class="totalNumText"
@ -133,46 +74,16 @@
status="warning"
>
<template #default="{ percentage }">
<div
style="
font-size: 30px;
color: white;
font-weight: bold;
"
>
{{ percentage }}%
</div>
<div
style="
font-size: 18px;
color: white;
margin-top: 10px;
"
>
工厂模型加载中
</div>
<div class="progressNum">{{ percentage }}%</div>
<div class="progressText">工厂模型加载中</div>
</template>
</el-progress>
</div>
<canvas id="renderCanvas"></canvas>
</div>
</el-col>
<div
style="
position: absolute;
right: 0;
width: 20%;
z-index: 10;
"
>
<div
style="
display: flex;
flex-direction: column;
height: 100%;
padding: 20px;
"
>
<div class="rightPosition">
<div class="rightPositionContainer">
<div class="flexItem" style="flex: 1">
<div class="blockTitle">
<div class="blockTitleIcon"></div>
@ -182,32 +93,14 @@
<el-radio label="10车间">10车间</el-radio>
</el-radio-group>
</div>
<div
id="pie"
style="
width: 100%;
height: 92%;
background: rgba(9, 31, 43, 0.5);
border-radius: 20px;
margin-top: 5px;
"
></div>
<div id="pie"></div>
</div>
<div class="flexItem" style="flex: 1">
<div class="blockTitle">
<div class="blockTitleIcon"></div>
<div>本周计划完成度</div>
</div>
<div
id="line3"
style="
width: 100%;
height: 92%;
background: rgba(9, 31, 43, 0.5);
border-radius: 20px;
margin-top: 5px;
"
></div>
<div id="line3"></div>
</div>
<div class="flexItem" style="flex: 1">
<div class="blockTitle">
@ -483,7 +376,6 @@ export default {
},
deptName: "10车间",
heightTimer: null,
countOk_AVG: 0,
countOk_dept7: 0,
countOk_dept10: 0,
blockTableHeight: 0,
@ -705,36 +597,6 @@ export default {
});
}
that.saleOutdept6 = saleOutdept6;
that.getAVGDayData();
});
},
//获取AVG的交付数$合格数
getAVGDayData() {
let that = this;
this.$API.wpm.otherlog.list
.req({
product: "AVG",
page: 0,
handle_date__gte: that.start_date,
handle_date__lte: that.end_date,
})
.then((res) => {
let list = res;
let count_ok = 0,
saleOutAVG = [0, 0, 0, 0, 0, 0, 0],
countOkAVG = [0, 0, 0, 0, 0, 0, 0];
if (list.length > 0) {
list.forEach((item) => {
count_ok = count_ok + item.count_ok;
let day = item.handle_date.split("-");
let index = this.weekDateList.indexOf(day[2]);
saleOutAVG[index] = item.count_delivered;
countOkAVG[index] = item.count_ok;
});
that.saleOutAVG = saleOutAVG;
that.countOkAVG = countOkAVG;
that.countOk_AVG = count_ok;
}
that.getCountDept7();
//左1---本周交付数
let chartDom = document.getElementById("line1");
@ -745,9 +607,6 @@ export default {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
},
legend: {
@ -758,16 +617,12 @@ export default {
{
backgroundColor: "rgb(1,235,239)",
name: "预制棒管",
textStyle: {
color: "#fff",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
0,0,0,1,
[
{
offset: 0,
@ -781,31 +636,6 @@ export default {
),
},
},
{
name: "AVG",
textStyle: {
color: "#fff",
},
itemStyle: {
// color:'rgb(1,235,239)',
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgb(1,235,239)",
},
{
offset: 1,
color: "rgb(5, 158, 163)",
},
]
),
},
},
],
},
grid: {
@ -857,42 +687,6 @@ export default {
{
name: "预制棒管",
type: "line",
stack: "Total",
smooth: true,
lineStyle: {
width: 1,
color: "rgb(1,235,239)",
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(1,235,239)",
},
{
offset: 1,
color: "rgb(5, 158, 163)",
},
]
),
},
emphasis: {
focus: "series",
},
data: that.saleOutdept6,
},
{
name: "AVG",
type: "line",
stack: "Total",
smooth: true,
lineStyle: {
width: 1,
@ -902,10 +696,7 @@ export default {
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
0,0,0,1,
[
{
offset: 0,
@ -921,13 +712,42 @@ export default {
emphasis: {
focus: "series",
},
data: that.saleOutAVG,
data: that.saleOutdept6,
},
],
};
myChart.setOption(option);
});
},
//获取AVG的交付数$合格数
getAVGDayData() {
let that = this;
this.$API.wpm.otherlog.list
.req({
product: "AVG",
page: 0,
handle_date__gte: that.start_date,
handle_date__lte: that.end_date,
})
.then((res) => {
let list = res;
let count_ok = 0,
saleOutAVG = [0, 0, 0, 0, 0, 0, 0],
countOkAVG = [0, 0, 0, 0, 0, 0, 0];
if (list.length > 0) {
list.forEach((item) => {
count_ok = count_ok + item.count_ok;
let day = item.handle_date.split("-");
let index = this.weekDateList.indexOf(day[2]);
saleOutAVG[index] = item.count_delivered;
countOkAVG[index] = item.count_ok;
});
that.saleOutAVG = saleOutAVG;
that.countOkAVG = countOkAVG;
}
});
},
//7车间合格数&&合格率
getCountDept7() {
let that = this;
@ -993,15 +813,7 @@ export default {
that.$API.bi.dataset.exec.req("lineDay", obj).then((res) => {
let list = res.data2.ds0;
let countOkDept10 = [0, 0, 0, 0, 0, 0, 0],
countRateDept10 = [
null,
null,
null,
null,
null,
null,
null,
];
countRateDept10 = [null,null,null,null,null,null,null,];
let countOk_dept10 = 0;
if (list.length > 0) {
list.forEach((item) => {
@ -1039,9 +851,7 @@ export default {
dept_name: that.deptName,
},
};
that.$API.bi.dataset.exec
.req("productStatistic", obj)
.then((res) => {
that.$API.bi.dataset.exec.req("productStatistic", obj).then((res) => {
let list = res.data2.ds0;
let PlanRate = [0, 0, 0, 0, 0, 0, 0];
if (list.length > 0) {
@ -1119,23 +929,6 @@ export default {
show: false,
},
},
// {
// type: 'value',
// name: '完成度',
// min: 0,
// max: 100,
// interval: 20,
// axisLabel: {
// formatter: '{value} %',
// color: '#ffffff'
// },
// nameTextStyle: {
// color: '#ffffff'
// },
// splitLine: {
// show: false,
// },
// }
],
series: [
{
@ -1168,27 +961,6 @@ export default {
),
},
},
// {
// name: '合格率',
// type: 'line',
// yAxisIndex: 1,
// // 255,120,0
// tooltip: {
// valueFormatter: function (value) {
// return value;
// }
// },
// symbol: 'circle',
// symbolSize: 8,
// itemStyle: {
// // 设置symbol的颜色
// color: 'rgb(255,120,0)'
// },
// lineStyle: {
// color: 'rgb(255,120,0)'
// },
// data: [63, 80, 71, 82, 60, 70, 85],
// }
],
};
line3Chart.setOption(line3option);
@ -1759,31 +1531,6 @@ export default {
top: 5,
right: 5,
data: [
{
name: "AVG",
textStyle: {
color: "#fff",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgb(5,245,2)",
},
{
offset: 1,
color: "rgb(7,137,43)",
},
]
),
},
},
{
name: "预制管",
textStyle: {
@ -1791,10 +1538,7 @@ export default {
},
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
0,0,0,1,
[
{
offset: 0,
@ -1814,12 +1558,8 @@ export default {
color: "#fff",
},
itemStyle: {
// color:'rgb(1,235,239)',
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
0,0,0,1,
[
{
offset: 0,
@ -1881,12 +1621,8 @@ export default {
focus: "series",
},
itemStyle: {
// color:'rgb(1,235,239)',
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
0,0,0,1,
[
{
offset: 0,
@ -1912,10 +1648,7 @@ export default {
},
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
0,0,0,1,
[
{
offset: 0,
@ -1930,34 +1663,6 @@ export default {
},
data: that.countOkDept10,
},
{
name: "AVG",
type: "bar",
stack: "Ad",
barWidth: 20,
emphasis: {
focus: "series",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgb(5,245,2)",
},
{
offset: 1,
color: "rgb(7,137,43)",
},
]
),
},
data: that.countOkAVG,
},
],
};
bar1Chart.setOption(bar1option);
@ -1980,10 +1685,7 @@ export default {
},
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
0,0,0,1,
[
{
offset: 0,
@ -2004,10 +1706,7 @@ export default {
},
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
0,0,0,1,
[
{
offset: 0,
@ -2073,12 +1772,8 @@ export default {
symbolSize: 8, //设置折线上圆点大小
symbol: "circle",
itemStyle: {
// 设置symbol的颜色
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
0,0,0,1,
[
{
offset: 0,
@ -2110,7 +1805,7 @@ export default {
color: "yellow", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
globalCoord: false,
},
},
},
@ -2121,12 +1816,8 @@ export default {
symbolSize: 8, //设置折线上圆点大小
symbol: "circle",
itemStyle: {
// 设置symbol的颜色
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
0,0,0,1,
[
{
offset: 0,
@ -2139,7 +1830,7 @@ export default {
]
),
},
smooth: 0.5, // 设置折线弧度
smooth: 0.5,
data: that.countRateDept10,
lineStyle: {
color: {
@ -2158,7 +1849,7 @@ export default {
color: "rgb(5, 158, 163)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
globalCoord: false,
},
},
},
@ -2171,11 +1862,12 @@ export default {
let pieChart = echarts.init(pieDom);
let pieoption = {
color: [
"rgb(3,195,198)",
"rgb(237,224,45)",
"rgb(155,248,249)",
"rgb(110,181,249)",
"rgb(205,248,248)",
"rgb(248,189,118)",
"rgb(3,195,198)",
],
legend: {
bottom: 1,
@ -2197,33 +1889,9 @@ export default {
type: "pie",
radius: [30, 60],
center: ["50%", "45%"],
// roseType: 'area',
itemStyle: {
borderRadius: 2,
},
// label: {
// fontSize: 12,
// alignTo: 'edge',
// formatter: '{b}\n',
// edgeDistance: 10,
// lineHeight: 20,
// rich: {
// title: {
// fontSize: 12,
// color: '#999',
// lineHeight: 50,
// },
// }
// },
// labelLayout: function (params) {
// var isLeft = params.labelRect.x < myChart.getWidth() / 2;
// var points = params.labelLinePoints;
// points[2][0] = isLeft? params.labelRect.x: params.labelRect.x + params.labelRect.width;
// return {
// labelLinePoints: points
// };
// },
label: {
minMargin: 10,
edgeDistance: 10,
@ -2290,6 +1958,38 @@ export default {
background: url("/public/img/photon_bg.png") no-repeat;
background-size: cover;
}
.leftPosition{
position: absolute;
left: 0;
width: 20%;
z-index: 10
}
.leftPositionContainer{
display: flex;
flex-direction: column;
height: 100%;
padding: 0 10px;
}
#line1,#bar1,#line2,#pie,#line3{
width: 100%;
height: 92%;
background: rgba(9, 31, 43, 0.5);
border-radius: 20px;
margin-top: 5px;
}
.rightPosition{
position: absolute;
right: 0;
width: 20%;
z-index: 10;
}
.rightPositionContainer{
display: flex;
flex-direction: column;
height: 100%;
padding: 0 10px;
}
#mainBlock{
padding: 0;
overflow: hidden;
@ -2389,7 +2089,27 @@ export default {
width: 100%;
height: 100%;
}
.modelContainer{
position: absolute;
width: 100%;
text-align: center;
}
.modeltopTitle{
margin: 5px 0 50px 0;
color: #fff;
font-size: 12px;
font-weight: bold;
}
.progressNum{
font-size: 30px;
color: white;
font-weight: bold;
}
.progressText{
font-size: 18px;
color: white;
margin-top: 10px;
}
#renderCanvas {
width: 100%;
height: 100%;