mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 2 Releases Wiki Activity

更新大屏

Browse Source
This commit is contained in:
朱文强
2026-07-01 09:38:25 +08:00
parent a2375325a0
commit fe2408c667
9 changed files with 1020 additions and 718 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/core/monitoring/data24.js
View File

@@ -15,3 +15,11 @@ export function getPdlDataOneDay(data) {
data: data
})
}
// 获得近24小时产线生产数据-新版
export function getSectionDataOneDay(data) {
return request({
url: '/monitoring/production-monitor/getSectionDataOneDay',
method: 'post',
data: data
})
}

4
src/views/base/dataBoard/components/CenterBottomL.vue
View File

@@ -2,7 +2,7 @@
<div class='centerBottomL'>
<div class='title'>
<svg-icon icon-class="dataBoard3" class='icon'/>
<span>本月数据</span>
<span>当月数据</span>
</div>
<div class='dataBox' style='top:50px'>
<p>
@@ -37,7 +37,7 @@ export default {
watch: {
dataObj(val) {
val.monthAndLastMonth && val.monthAndLastMonth.forEach(item => {
if (item.dataType === "本月") {
if (item.dataType === "当月") {
this.monthData = item
}
})

345
src/views/base/dataBoard/components/CenterTop.vue
View File

@@ -1,62 +1,195 @@
<template>
<div ref="centerTopBox" class='centerTopBox'>
<div ref="centerTopBox" class="centerTopBox">
<div>
<video src="/static/videos/01.webm" muted autoplay loop class='videoStyle'></video>
<video
src="/static/videos/01.webm"
muted
autoplay
loop
class="videoStyle"></video>
<div class="zhegaiceng" v-if="dataObj">
<div
class='eqTipBox'
v-show='showTooltip'
:style="'left:'+tooltipStyle.left+'px;top:'+tooltipStyle.top+'px;'"
>
<p><span class='eqTipTitle'>设备名称:</span><span class='eqTipNum'>{{eqTipMsg.name}}</span></p>
<p><span class='eqTipTitle'>进口数量:</span><span class='eqTipNum'>{{eqTipMsg.input}}</span></p>
<p><span class='eqTipTitle'>出口数量:</span><span class='eqTipNum'>{{eqTipMsg.output}}</span></p>
<p><span class='eqTipTitle'>报警状态:</span>
<span class='eqTipNum'>
<img v-show='eqTipMsg.alarm' :src='dotY' width='16'/>
<img v-show='!eqTipMsg.alarm' :src='dotG' width='16'/>
v-show="
!dataObj.productionDet.find((val) => val.line == 1).isProduction
"
class="production-line1"
data-line="1"
data-status="stopped">
<!-- 半透明渐变遮罩 -->
<div class="line-mask"></div>
<!-- 状态标签 -->
<div class="line-status-tag">
<span class="status-dot stopped"></span>
产线1 已停产
</div>
</div>
<div
v-show="
!dataObj.productionDet.find((val) => val.line == 2).isProduction
"
class="production-line2"
data-line="2"
data-status="stopped">
<!-- 半透明渐变遮罩 -->
<div class="line-mask"></div>
<!-- 状态标签 -->
<div class="line-status-tag">
<span class="status-dot stopped"></span>
产线2 已停产
</div>
</div>
<div
v-show="
!dataObj.productionDet.find((val) => val.line == 3).isProduction
"
class="production-line3"
data-line="3"
data-status="stopped">
<!-- 半透明渐变遮罩 -->
<div class="line-mask"></div>
<!-- 状态标签 -->
<div class="line-status-tag">
<span class="status-dot stopped"></span>
产线3 已停产
</div>
</div>
<div
v-show="
!dataObj.productionDet.find((val) => val.line == 4).isProduction
"
class="production-line4"
data-line="4"
data-status="stopped">
<!-- 半透明渐变遮罩 -->
<div class="line-mask"></div>
<!-- 状态标签 -->
<div class="line-status-tag">
<span class="status-dot stopped"></span>
产线4 已停产
</div>
</div>
<div
v-show="
!dataObj.productionDet.find((val) => val.line == 5).isProduction
"
class="production-line5"
data-line="5"
data-status="stopped">
<!-- 半透明渐变遮罩 -->
<div class="line-mask"></div>
<!-- 状态标签 -->
<div class="line-status-tag">
<span class="status-dot stopped"></span>
产线5 已停产
</div>
</div>
</div>
<div
class="eqTipBox"
v-show="showTooltip"
:style="
'left:' + tooltipStyle.left + 'px;top:' + tooltipStyle.top + 'px;'
">
<p>
<span class="eqTipTitle">设备名称:</span>
<span class="eqTipNum">{{ eqTipMsg.name }}</span>
</p>
<p>
<span class="eqTipTitle">进口数量:</span>
<span class="eqTipNum">{{ eqTipMsg.input }}</span>
</p>
<p>
<span class="eqTipTitle">出口数量:</span>
<span class="eqTipNum">{{ eqTipMsg.output }}</span>
</p>
<p>
<span class="eqTipTitle">报警状态:</span>
<span class="eqTipNum">
<img v-show="eqTipMsg.alarm" :src="dotY" width="16" />
<img v-show="!eqTipMsg.alarm" :src="dotG" width="16" />
{{ eqTipMsg.alarm ? '报警' : '未报警' }}
</span>
</p>
<p><span class='eqTipTitle'>在线状态:</span>
<span class='eqTipNum'>
<img v-show='eqTipMsg.status' :src='dotG' width='16'/>
<img v-show='!eqTipMsg.status' :src='dotR' width='16'/>
<p>
<span class="eqTipTitle">在线状态:</span>
<span class="eqTipNum">
<img v-show="eqTipMsg.status" :src="dotG" width="16" />
<img v-show="!eqTipMsg.status" :src="dotR" width="16" />
{{ eqTipMsg.status ? '在线' : '离线' }}
</span>
</p>
</div>
<!-- 设备 -->
<div class='eqBox'>
<div class="eqBox">
<!-- line-从上到下-从右往左 -->
<span
v-for='(item,index) in eqList'
:key='index'
:style="'width:'+item.w+'px;height:'+item.h+'px;left:'+item.l+'px;top:'+item.t+'px'"
v-for="(item, index) in eqList"
:key="index"
:style="
'width:' +
item.w +
'px;height:' +
item.h +
'px;left:' +
item.l +
'px;top:' +
item.t +
'px'
"
@mouseenter="handleMouseEnter(item, $event)"
@mouseleave="handleMouseLeave"
></span>
@mouseleave="handleMouseLeave"></span>
</div>
</div>
<div class='centerTopTopBox'>
<div style='display: inline-block;'>
<img src="../../../../assets/images/dataBoard/centerNumB.png" alt="" width='203'>
<p class='num'>{{dataObj?.productRate || '-'}}%</p>
<p class='title'>成品率</p>
<div class="centerTopTopBox">
<div style="display: inline-block">
<img
src="../../../../assets/images/dataBoard/centerNumB.png"
alt=""
width="203" />
<p class="num" style="font-size: 25px">
<span style="color: #2e7dff">
{{ dataObj?.productRateYesterday ?? '-' }}%
</span>
<span style="color: #999">/</span>
<span style="color: #ff8a00">
{{ dataObj?.productRate30day ?? '-' }}%
</span>
</p>
<p class="title">昨日/近30天成品率</p>
</div>
<div style='display: inline-block;'>
<img src="../../../../assets/images/dataBoard/centerNumY.png" alt="" width='261'>
<p class='num' style='width: 260px;padding-left: 20px;'>{{dataObj?.todayProduct ? formatThousands(dataObj.todayProduct) : '-'}}</p>
<p class='title' style='color:#FFB625'>今日产量</p>
<div style="display: inline-block">
<img
src="../../../../assets/images/dataBoard/centerNumY.png"
alt=""
width="261" />
<p class="num" style="width: 260px; padding-left: 20px">
{{
dataObj?.todayProduct ? formatThousands(dataObj.todayProduct) : '-'
}}
</p>
<p class="title" style="color: #ffb625">当日产量</p>
</div>
<div style='display: inline-block;'>
<img src="../../../../assets/images/dataBoard/centerNumY.png" alt="" width='261'>
<p class='num' style='width: 260px;padding-left: 20px;'>{{dataObj?.monthProduct ? formatThousands(dataObj.monthProduct) : '-'}}</p>
<p class='title' style='color:#FFB625'>本月产量</p>
<div style="display: inline-block">
<img
src="../../../../assets/images/dataBoard/centerNumY.png"
alt=""
width="261" />
<p class="num" style="width: 260px; padding-left: 20px">
{{
dataObj?.monthProduct ? formatThousands(dataObj.monthProduct) : '-'
}}
</p>
<p class="title" style="color: #ffb625">当月产量</p>
</div>
<div style='display: inline-block;'>
<img src="../../../../assets/images/dataBoard/centerNumB.png" alt="" width='203'>
<p class='num'>{{dataObj?.alarmNum ? formatThousands(dataObj.alarmNum) : '-'}}</p>
<p class='title'>设备报警数</p>
<div style="display: inline-block">
<img
src="../../../../assets/images/dataBoard/centerNumB.png"
alt=""
width="203" />
<p class="num">
{{ dataObj?.alarmNum ? formatThousands(dataObj.alarmNum) : '-' }}
</p>
<p class="title">设备报警数</p>
</div>
</div>
</div>
@@ -69,7 +202,7 @@ export default {
showTooltip: false,
tooltipStyle: {
left: 0,
top: 0
top: 0,
},
dotY: require('../../../../assets/images/dataBoard/dotY.png'),
dotR: require('../../../../assets/images/dataBoard/dotR.png'),
@@ -188,44 +321,45 @@ export default {
{ name: 'A5-包装清洗机-1', id: 501501, w: 30, h: 18, l: 185, t: 473 },
{ name: 'A5-包装清洗机-2', id: 501502, w: 30, h: 18, l: 185, t: 511 },
{ name: 'A5-铺纸机-1', id: 501601, w: 18, h: 15, l: 144, t: 475 },
{name:'A5-铺纸机-2',id:501602,w:18,h:15,l:144,t:511}
{ name: 'A5-铺纸机-2', id: 501602, w: 18, h: 15, l: 144, t: 511 },
],
eqTipMsg: {
name: '',
input: null,
output: null,
alarm: '未报警',
status:'在线'
}
}
status: '在线',
},
};
},
props: {
scaleNum: {
type: Number,
default: 1
default: 1,
},
dataObj: {
type: Object,
default: () => {}
}
default: () => {},
},
},
watch: {
scaleNum(val) {
this.scaleNum = val
this.scaleNum = val;
},
dataObj(val) {
val.equipmentDets && val.equipmentDets.forEach(item => {
this.eqList.forEach(eq => {
val.equipmentDets &&
val.equipmentDets.forEach((item) => {
this.eqList.forEach((eq) => {
if (eq.id == item.id) {
eq.name = item.name
eq.input = item.input
eq.output = item.output
eq.alarm = item.isError
eq.status = item.isRun
}
})
})
eq.name = item.name;
eq.input = item.input;
eq.output = item.output;
eq.alarm = item.isError;
eq.status = item.isRun;
}
});
});
},
},
mounted() {},
methods: {
@@ -243,7 +377,7 @@ export default {
this.showTooltip = false;
},
updateTooltipPosition(event) {
const rect = this.$refs.centerTopBox.getBoundingClientRect()
const rect = this.$refs.centerTopBox.getBoundingClientRect();
const offset = 15;
const tooltipWidth = 315 * this.scaleNum;
const tooltipHeight = 170 * this.scaleNum;
@@ -261,9 +395,9 @@ export default {
}
this.tooltipStyle.left = posX / this.scaleNum;
this.tooltipStyle.top = posY / this.scaleNum;
}
}
}
},
},
};
</script>
<style lang="scss" scoped>
p {
@@ -272,7 +406,8 @@ p{
.centerTopBox {
width: 1041px;
height: 600px;
background: url('../../../../assets/images/dataBoard/center-top.png') no-repeat;
background: url('../../../../assets/images/dataBoard/center-top.png')
no-repeat;
background-size: 100%;
position: absolute;
left: 440px;
@@ -296,7 +431,7 @@ p{
span {
display: inline-block;
font-size: 20px;
color: #FFFFFF;
color: #ffffff;
letter-spacing: 1px;
vertical-align: middle;
}
@@ -314,6 +449,82 @@ p{
text-overflow: ellipsis;
}
}
.zhegaiceng {
.production-line1 {
position: absolute;
left: 3px;
top: 160px;
width: 99%;
height: 70px;
}
.production-line2 {
position: absolute;
left: 3px;
top: 232px;
width: 99%;
height: 75px;
}
.production-line3 {
position: absolute;
left: 3px;
top: 306px;
width: 99%;
height: 68px;
}
.production-line4 {
position: absolute;
left: 3px;
top: 372px;
width: 99%;
height: 86px;
}
.production-line5 {
position: absolute;
left: 3px;
top: 460px;
width: 99%;
height: 80px;
}
.line-mask {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(
to right,
rgba(14, 14, 14, 0.9),
rgba(14, 14, 14, 0.7),
rgba(14, 14, 14, 0.9)
);
}
.line-status-tag {
position: absolute;
top: 50%;
left: 40%;
transform: translateY(-50%);
padding: 6px 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 4px;
font-size: 25px;
z-index: 10;
/* 新增：让内部元素 flex 垂直居中 */
display: flex;
align-items: center; /* 核心：垂直居中 */
gap: 6px; /* 控制点和文字的间距，避免重叠 */
}
.status-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
/* 移除可能影响对齐的 margin-top/margin-bottom */
margin: 0;
}
.status-dot.stopped {
background: #ff3d3d;
}
}
.eqBox {
span {
display: inline-block;
@@ -333,7 +544,7 @@ p{
box-sizing: border-box;
font-weight: 500;
font-size: 38px;
color: #FFFFFF;
color: #ffffff;
text-shadow: 0px 5px 2px rgba(0, 0, 0, 0.62);
text-align: center;
position: absolute;
@@ -342,7 +553,7 @@ p{
.title {
font-weight: 500;
font-size: 20px;
color: #00C8F7;
color: #00c8f7;
letter-spacing: 2px;
text-shadow: 0px 5px 2px rgba(0, 0, 0, 0.62);
text-align: center;

144
src/views/base/dataBoard/components/LeftBottom.vue
View File

@@ -1,17 +1,20 @@
<template>
<div class='leftBottomBox'>
<div class='title'>
<svg-icon icon-class="dataBoard2" class='icon'/>
<div class="leftBottomBox">
<div class="title">
<svg-icon icon-class="dataBoard2" class="icon" />
<span>投入产出及良品率</span>
</div>
<div v-if='xData.length === 0' class='noData'>暂无数据</div>
<div v-if="xData.length === 0" class="noData">暂无数据</div>
<div v-else>
<div class="top_legend">
<span class="chart_legend_icon1">投入</span>
<span class="chart_legend_icon2">产出</span>
<span><span class="chart_legend_icon3"></span>良品率</span>
<span>
<span class="chart_legend_icon3"></span>
良品率
</span>
</div>
<div id='inOutputChart' style='width: 400px;height: 290px;'></div>
<div id="inOutputChart" style="width: 400px; height: 290px"></div>
</div>
</div>
</template>
@@ -22,25 +25,26 @@ export default {
props: {
dataObj: {
type: Object,
default: () => {}
}
default: () => {},
},
},
watch: {
dataObj(val) {
this.xData = []
this.inputData = []
this.outputData = []
this.goodRateData = []
val.monthBar && val.monthBar.forEach(item => {
this.xData.push(item.dataType)
this.inputData.push(item.inputNum)
this.outputData.push(item.outputNum)
this.goodRateData.push(item.goodRate)
})
this.xData = [];
this.inputData = [];
this.outputData = [];
this.goodRateData = [];
val.monthBar &&
val.monthBar.forEach((item) => {
this.xData.push(item.dataType);
this.inputData.push(item.inputNum);
this.outputData.push(item.outputNum);
this.goodRateData.push(item.goodRate.toFixed(2));
});
this.$nextTick(() => {
this.initChart();
})
}
});
},
},
data() {
return {
@@ -50,7 +54,7 @@ export default {
inputData: [],
outputData: [],
goodRateData: [],
}
};
},
mounted() {},
methods: {
@@ -60,10 +64,10 @@ export default {
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
this.chart.dispose(); // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
}
this.chartDom = document.getElementById('inOutputChart')
this.chart = echarts.init(this.chartDom)
this.chartDom = document.getElementById('inOutputChart');
this.chart = echarts.init(this.chartDom);
var option;
option = {
grid: { top: 40, right: 10, bottom: 5, left: 10, containLabel: true },
@@ -71,85 +75,90 @@ export default {
show: false,
},
xAxis: {
type: "category",
type: 'category',
data: this.xData,
axisLabel: {
color: "#fff",
color: '#fff',
fontSize: 10,
interval: 0,
rotate:30
rotate: 30,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 2,
color: "#5982B2",
color: '#5982B2',
},
},
},
yAxis: [{
name: "单位/片",
yAxis: [
{
name: '单位/片',
nameTextStyle: {
color: "#DFF1FE",
color: '#DFF1FE',
fontSize: 12,
},
type: "value",
type: 'value',
axisLabel: {
color: "#DFF1FE",
color: '#DFF1FE',
fontSize: 12,
formatter: "{value}",
formatter: '{value}',
},
axisLine: {
show: true,
lineStyle: {
width: 2,
color: "#5982B2",
color: '#5982B2',
},
},
splitLine: {
lineStyle: {
width: 2,
color: "#5982B2",
color: '#5982B2',
},
},
},{
name: "良品率/%",
},
{
name: '良品率/%',
nameTextStyle: {
color: "#DFF1FE",
color: '#DFF1FE',
fontSize: 12,
},
type: "value",
type: 'value',
max: 100,
min: 80,
axisLabel: {
color: "#DFF1FE",
color: '#DFF1FE',
fontSize: 12,
formatter: "{value}",
formatter: '{value}',
},
axisLine: {
show: true,
lineStyle: {
width: 2,
color: "#5982B2",
color: '#5982B2',
},
},
splitLine: {
lineStyle: {
width: 2,
color: "#5982B2",
color: '#5982B2',
},
},
}],
},
],
tooltip: {
trigger: "axis",
trigger: 'axis',
axisPointer: {
type: "shadow",
type: 'shadow',
},
className: "qhd-chart-tooltip",
className: 'qhd-chart-tooltip',
show: true,
},
series: [
{
data: this.inputData,
type: "bar",
type: 'bar',
barWidth: 10,
barGap: 0,
itemStyle: {
@@ -161,7 +170,7 @@ export default {
},
{
data: this.outputData,
type: "bar",
type: 'bar',
barWidth: 10,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -172,7 +181,7 @@ export default {
},
{
data: this.goodRateData,
type: "line",
type: 'line',
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 7,
@@ -183,20 +192,21 @@ export default {
{ offset: 0.2, color: 'rgba(18, 255, 245, 0.2)' },
{ offset: 0.4, color: 'rgba(18, 255, 245, 0)' },
]),
}
}
},
},
],
}
};
option && this.chart.setOption(option);
}
}
}
},
},
};
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.leftBottomBox {
width: 402px;
height: 332px;
background: url('../../../../assets/images/dataBoard/left-bottom.png') no-repeat;
background: url('../../../../assets/images/dataBoard/left-bottom.png')
no-repeat;
background-size: 100%;
position: absolute;
left: 23px;
@@ -212,7 +222,7 @@ export default {
}
span {
font-size: 24px;
color: #52FFF1;
color: #52fff1;
line-height: 24px;
vertical-align: middle;
}
@@ -231,21 +241,21 @@ export default {
}
.chart_legend_icon1:before {
display: inline-block;
content: "";
content: '';
width: 10px;
height: 10px;
margin-right: 5px;
border-radius: 2px;
background: #73F8E0;
background: #73f8e0;
}
.chart_legend_icon2:before {
display: inline-block;
content: "";
content: '';
width: 10px;
height: 10px;
margin-right: 5px;
border-radius: 2px;
background: #497EFF;
background: #497eff;
}
.chart_legend_icon3 {
display: inline-block;
@@ -253,15 +263,15 @@ export default {
height: 8px;
margin-right: 8px;
border-radius: 4px;
background: #73F8E0;
background: #73f8e0;
position: relative;
}
.chart_legend_icon3:before {
display: inline-block;
content: "";
content: '';
width: 16px;
height: 2px;
background: #73F8E0;
background: #73f8e0;
position: absolute;
top: 3px;
left: -4px;

11
src/views/base/dataBoard/components/LeftTop.vue
View File

@@ -6,7 +6,7 @@
</div>
<div class='title-split'>
<img src="../../../../assets//images/dataBoard/leftbar.png" alt="">
<span class='text'>本日</span>
<span class='text'>当日</span>
<img src="../../../../assets//images/dataBoard/rightbar.png" alt="">
</div>
<div class='data-box'>
@@ -20,11 +20,11 @@
</div>
<div class='right-data' style="top:15px;">
<p><span class='num'>{{todayData?.inputNum ? formatThousands(todayData.inputNum) : '-'}}</span><span class='text'>片数</span></p>
<p><span class='num'>{{todayData?.inputArea ? formatThousands(todayData.inputArea) : '-'}}</span><span class='text'>面积/㎡</span></p>
<!-- <p><span class='num'>{{todayData?.inputArea ? formatThousands(todayData.inputArea) : '-'}}</span><span class='text'>面积/㎡</span></p> -->
</div>
<div class='right-data' style="top:132px;">
<p><span class='num'>{{todayData?.outputNum ? formatThousands(todayData.outputNum) : '-'}}</span><span class='text'>片数</span></p>
<p><span class='num'>{{todayData?.outputArea ? formatThousands(todayData.outputArea) : '-'}}</span><span class='text'>面积/㎡</span></p>
<!-- <p><span class='num'>{{todayData?.outputArea ? formatThousands(todayData.outputArea) : '-'}}</span><span class='text'>面积/㎡</span></p> -->
</div>
</div>
<div class='title-split'>
@@ -43,11 +43,11 @@
</div>
<div class='right-data' style="top:15px;">
<p><span class='num'>{{yesterdayData?.inputNum ? formatThousands(yesterdayData.inputNum) : '-'}}</span><span class='text'>片数</span></p>
<p><span class='num'>{{yesterdayData?.inputArea ? formatThousands(yesterdayData.inputArea) : '-'}}</span><span class='text'>面积/㎡</span></p>
<!-- <p><span class='num'>{{yesterdayData?.inputArea ? formatThousands(yesterdayData.inputArea) : '-'}}</span><span class='text'>面积/㎡</span></p> -->
</div>
<div class='right-data' style="top:132px;">
<p><span class='num'>{{yesterdayData?.outputNum ? formatThousands(yesterdayData.outputNum) : '-'}}</span><span class='text'>片数</span></p>
<p><span class='num'>{{yesterdayData?.outputArea ? formatThousands(yesterdayData.outputArea) : '-'}}</span><span class='text'>面积/㎡</span></p>
<!-- <p><span class='num'>{{yesterdayData?.outputArea ? formatThousands(yesterdayData.outputArea) : '-'}}</span><span class='text'>面积/㎡</span></p> -->
</div>
</div>
</div>
@@ -155,6 +155,7 @@ export default {
color: #FFFFFF;
letter-spacing: 1px;
text-shadow: 0px 4px 2px rgba(0,0,0,0.62);
line-height: 90px;
}
}
}

2
src/views/base/dataBoard/components/RightBottom.vue
View File

@@ -2,7 +2,7 @@
<div class='rightBottomBox'>
<div class='title'>
<svg-icon icon-class="dataBoard3" class='icon'/>
<span>本月<span class='dotted'></span>班组生产排名</span>
<span>当月<span class='dotted'></span>班组生产排名</span>
</div>
<div class='rankingLeft'>
<div class='rankingLeftTitle'>产量</div>

4
src/views/base/dataBoard/components/RightTop.vue
View File

@@ -21,7 +21,7 @@
</div>
<div class='box' style='width: 115px;'>
<p class='name'>
<span style='margin-right: 3px;'>本月</span>
<span style='margin-right: 3px;'>当月</span>
<img v-show='nokSumDet.month >= nokSumDet.lastMonth' src="../../../../assets/images/dataBoard/arrUp.png" alt="" width='5' height='15'>
<img v-show='nokSumDet.month < nokSumDet.lastMonth' src="../../../../assets/images/dataBoard/arrDown.png" alt="" width='5' height='15'>
</p>
@@ -29,7 +29,7 @@
</div>
<div class='box' style='width: 110px;'>
<p class='name'>
<span style='margin-right: 3px;'>本年</span>
<span style='margin-right: 3px;'>当年</span>
<img v-show='nokSumDet.year >= nokSumDet.lastYear' src="../../../../assets/images/dataBoard/arrUp.png" alt="" width='5' height='15'>
<img v-show='nokSumDet.year < nokSumDet.lastYear' src="../../../../assets/images/dataBoard/arrDown.png" alt="" width='5' height='15'>
</p>

2
src/views/core/base/equipmentType/index.vue
View File

@@ -92,6 +92,8 @@ export default {
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
},
{ prop: 'name', label: '设备类型名称' },
{ prop: 'isCraft', label: '是否为生产设备',
filter: (val) => val?'是': '否', },
{ prop: 'code', label: '设备类型编码' },
{ prop: 'remark', label: '备注' },
],

222
src/views/core/monitoring/data24/index.vue
View File

@@ -17,14 +17,14 @@
:table-props="tableProps"
:table-data="tableData"
:max-height="tableH"
@emitFun="handleEmitFun"
/>
:span-method="mergeColumnHandler"
@emitFun="handleEmitFun" />
</div>
</div>
</template>
<script>
import { getPdlDataOneDay } from '@/api/core/monitoring/data24'
import { getSectionDataOneDay } from '@/api/core/monitoring/data24';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
export default {
@@ -35,7 +35,7 @@ export default {
data() {
return {
urlOptions: {
getDataListURL: getPdlDataOneDay
getDataListURL: getSectionDataOneDay,
},
initing: false,
queryParams: {
@@ -45,6 +45,7 @@ export default {
list: [],
arr: [],
spanArr: [],
spanArrProLine: [], // 产线合并行数组
timeList: [],
tableData: [],
tableProps: [],
@@ -58,78 +59,130 @@ export default {
methods: {
/** 构建tableProps - 依据第一个元素所提供的信息 */
buildProps(plData) {
plData.forEach(item => {
this.timeList.push(item.name)
})
const timeArray = Array.from(new Set(this.timeList))
console.log('nihc', timeArray)
this.timeList = []; // 重置避免重复
this.arr = []; // 重置避免重复
plData.forEach((item) => {
this.timeList.push(item.name);
});
const timeArray = Array.from(new Set(this.timeList));
for (const times of timeArray) {
if (times !== '投入数量' && times !== '产出数量' && times !== '报废数量' && times !== '产出面积') {
if (!['投入数', '产出数', '报废数量', '报废比例'].includes(times)) {
const subprop = {
label: times.slice(0, 10) + ' ' + times.slice(11),
label: `${times.slice(0, 10)} ${times.slice(11)}`,
align: 'center',
children: [
{ prop: times + '_in', label: '投入数量',
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
{ prop: times + '_out', label: '产出数量',
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
{ prop: times + '_junk', label: '报废数量',
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
{ prop: times + '_area', label: '产出面积',
filter: (val) => (val != null ? val.toFixed(2) : '-'), }
]
}
this.arr.push(subprop)
}
}
this.tableProps = this.arr
{
prop: `${times}_in`,
label: '投入数',
filter: (val) => (val != null ? val : '-'),
},
setRowSpan(arr) {
let count = 0
{
prop: `${times}_out`,
label: '产出数',
filter: (val) => (val != null ? val : '-'),
},
{
prop: `${times}_junk`,
label: '报废数量',
filter: (val) => (val != null ? val : '-'),
},
{
prop: `${times}_area`,
label: '报废比例',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
],
};
this.arr.push(subprop);
}
}
this.tableProps = [
{
prop: 'proLineName',
label: '产线',
fixed: 'left',
width: 120,
showOverflowTooltip: true,
},
{
prop: 'spec',
label: '产品规格',
fixed: 'left',
width: 110,
showOverflowTooltip: true,
filter: (val) => val != null ? val.join(' / ') : '-',
},
{
prop: 'sectionName',
label: '工段名称',
fixed: 'left',
width: 120,
showOverflowTooltip: true,
},
{
prop: 'allNum',
label: '生产总数',
fixed: 'left',
showOverflowTooltip: true,
},
...this.arr
];
},
/** 通用合并行计算方法 */
calcRowSpan(arr) {
const spanArr = [];
let count = 0;
arr.forEach((item, index) => {
if (index === 0) {
this.spanArr.push(1)
spanArr.push(1);
} else {
if (item === arr[index - 1]) {
this.spanArr[count] += 1
this.spanArr.push(0)
spanArr[count] += 1;
spanArr.push(0);
} else {
count = index
this.spanArr.push(1)
count = index;
spanArr.push(1);
}
}
})
console.log('打印数组长度', this.spanArr)
});
return spanArr;
},
/** 把 list 里的数据转换成 tableProps 对应的格式 */
convertList(list) {
let sectionArr= []
console.log('打印看下数据list', list)
list.forEach((ele, index) => {
let tempData = []
ele.data.forEach(item => {
item.children.forEach(params => {
if (params.dynamicName === '投入数量') {
tempData[item.dynamicName + '_in'] = params.dynamicValue
} else if (params.dynamicName === '产出数量') {
tempData[item.dynamicName + '_out'] = params.dynamicValue
} else if (params.dynamicName === '报废数量') {
tempData[item.dynamicName + '_junk'] = params.dynamicValue
} else {
tempData[item.dynamicName + '_area'] = params.dynamicValue
}
})
})
tempData['proLineName'] = ele.proLineName
tempData['spec'] = ele.spec
this.tableData.push(tempData)
console.log('看看数据', this.tableData, tempData)
const { proLineName } = tempData
sectionArr.push(proLineName)
})
this.setRowSpan(sectionArr)
console.log('工段名称列表', sectionArr)
this.tableData = []; // 重置避免重复
const proLineNames = []; // 存储产线名称用于计算合并
const specNames = []; // 存储规格名称用于计算合并
list.forEach((ele) => {
const tempData = {};
// 基础字段赋值
tempData.proLineName = ele.proLineName;
tempData.spec = ele.spec;
tempData.sectionName = ele.sectionName;
tempData.allNum = ele.allNum;
// 动态字段赋值
ele.data.forEach((item) => {
item.children.forEach((params) => {
const keyMap = {
'投入数': `${item.dynamicName}_in`,
'产出数': `${item.dynamicName}_out`,
'报废数量': `${item.dynamicName}_junk`,
'报废比例': `${item.dynamicName}_area`,
};
const key = keyMap[params.dynamicName];
if (key) tempData[key] = params.dynamicValue;
});
});
this.tableData.push(tempData);
proLineNames.push(ele.proLineName);
specNames.push(ele.spec);
});
// 计算合并行数组
this.spanArrProLine = this.calcRowSpan(proLineNames);
},
buildData(data) {
@@ -138,38 +191,55 @@ export default {
/** 合并table列的规则 */
mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 0) {
if (this.spanArr[rowIndex]) {
return [
this.spanArr[rowIndex], // row span
1, // col span
];
} else {
return [0, 0];
// 列索引0: 产线列, 列索引1: 产品规格列
if (columnIndex === 0) {
return {
rowspan: this.spanArrProLine[rowIndex] || 0,
colspan: this.spanArrProLine[rowIndex] ? 1 : 0
};
}
if (columnIndex === 1) {
return {
rowspan: this.spanArrProLine[rowIndex] || 0,
colspan: this.spanArrProLine[rowIndex] ? 1 : 0
};
}
// 其他列不合并
return { rowspan: 1, colspan: 1 };
},
async getList() {
this.urlOptions.getDataListURL().then(res => {
console.log('看看数据', res)
this.urlOptions.getDataListURL().then((res) => {
console.log('看看数据', res);
this.arr = [
{
prop: 'proLineName',
label: '生产线',
label: '产线',
fixed: 'left',
showOverflowTooltip: true
showOverflowTooltip: true,
},
{
prop: 'spec',
label: '产品规格',
fixed: 'left',
showOverflowTooltip: true
}
]
showOverflowTooltip: true,
},
{
prop: 'sectionName',
label: '工段名称',
fixed: 'left',
showOverflowTooltip: true,
},
{
prop: 'allNum',
label: '生产总数',
fixed: 'left',
showOverflowTooltip: true,
},
];
this.buildProps(res.data.nameData);
this.buildData(res.data.data);
})
});
// // const data = this.res.data;
// // console.log('recent-24', data);