Compare commits
4 Commits
242a52b98e
...
projects/q
| Author | SHA1 | Date | |
|---|---|---|---|
| fe2408c667 | |||
| a2375325a0 | |||
|
04d5896f6e | ||
|
|
46a23c249c |
@@ -118,3 +118,10 @@ export function getProcessAutoReportLastGroup(data) {
|
|||||||
data: data,
|
data: data,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
export function getPLlistByFactory(data) {
|
||||||
|
return request({
|
||||||
|
url: 'base/production-line/listByFactory',
|
||||||
|
method: 'post',
|
||||||
|
data: data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
* @Date: 2023-09-12 09:44:53
|
* @Date: 2023-09-12 09:44:53
|
||||||
* @LastEditTime: 2023-09-15 14:12:26
|
* @LastEditTime: 2023-09-15 14:12:26
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
import request from '@/utils/request'
|
import request from '@/utils/request'
|
||||||
|
|
||||||
@@ -15,3 +15,11 @@ export function getPdlDataOneDay(data) {
|
|||||||
data: data
|
data: data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 获得近24小时产线生产数据-新版
|
||||||
|
export function getSectionDataOneDay(data) {
|
||||||
|
return request({
|
||||||
|
url: '/monitoring/production-monitor/getSectionDataOneDay',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div class='centerBottomL'>
|
<div class='centerBottomL'>
|
||||||
<div class='title'>
|
<div class='title'>
|
||||||
<svg-icon icon-class="dataBoard3" class='icon'/>
|
<svg-icon icon-class="dataBoard3" class='icon'/>
|
||||||
<span>本月数据</span>
|
<span>当月数据</span>
|
||||||
</div>
|
</div>
|
||||||
<div class='dataBox' style='top:50px'>
|
<div class='dataBox' style='top:50px'>
|
||||||
<p>
|
<p>
|
||||||
@@ -13,7 +13,7 @@
|
|||||||
</p>
|
</p>
|
||||||
<p class='num'>{{monthData?.inputNum ? formatThousands(monthData.inputNum) : '-'}}</p>
|
<p class='num'>{{monthData?.inputNum ? formatThousands(monthData.inputNum) : '-'}}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class='dataBox'style='top:180px'>
|
<div class='dataBox' style='top:180px'>
|
||||||
<p>
|
<p>
|
||||||
<span class='text'>总生产片数</span>
|
<span class='text'>总生产片数</span>
|
||||||
<span class='precent' :class='{precentR:monthData?.outputNumChange>=0,precentG:monthData?.outputNumChange<0}'>{{monthData?.outputNumChange || '-'}}%</span>
|
<span class='precent' :class='{precentR:monthData?.outputNumChange>=0,precentG:monthData?.outputNumChange<0}'>{{monthData?.outputNumChange || '-'}}%</span>
|
||||||
@@ -37,7 +37,7 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
dataObj(val) {
|
dataObj(val) {
|
||||||
val.monthAndLastMonth && val.monthAndLastMonth.forEach(item => {
|
val.monthAndLastMonth && val.monthAndLastMonth.forEach(item => {
|
||||||
if (item.dataType === "本月") {
|
if (item.dataType === "当月") {
|
||||||
this.monthData = item
|
this.monthData = item
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -113,4 +113,4 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,352 +1,563 @@
|
|||||||
<template>
|
<template>
|
||||||
<div ref="centerTopBox" class='centerTopBox'>
|
<div ref="centerTopBox" class="centerTopBox">
|
||||||
<div>
|
<div>
|
||||||
<video src="/static/videos/01.webm" muted autoplay loop class='videoStyle'></video>
|
<video
|
||||||
<div
|
src="/static/videos/01.webm"
|
||||||
class='eqTipBox'
|
muted
|
||||||
v-show='showTooltip'
|
autoplay
|
||||||
:style="'left:'+tooltipStyle.left+'px;top:'+tooltipStyle.top+'px;'"
|
loop
|
||||||
>
|
class="videoStyle"></video>
|
||||||
<p><span class='eqTipTitle'>设备名称:</span><span class='eqTipNum'>{{eqTipMsg.name}}</span></p>
|
<div class="zhegaiceng" v-if="dataObj">
|
||||||
<p><span class='eqTipTitle'>进口数量:</span><span class='eqTipNum'>{{eqTipMsg.input}}</span></p>
|
<div
|
||||||
<p><span class='eqTipTitle'>出口数量:</span><span class='eqTipNum'>{{eqTipMsg.output}}</span></p>
|
v-show="
|
||||||
<p><span class='eqTipTitle'>报警状态:</span>
|
!dataObj.productionDet.find((val) => val.line == 1).isProduction
|
||||||
<span class='eqTipNum'>
|
"
|
||||||
<img v-show='eqTipMsg.alarm' :src='dotY' width='16'/>
|
class="production-line1"
|
||||||
<img v-show='!eqTipMsg.alarm' :src='dotG' width='16'/>
|
data-line="1"
|
||||||
{{eqTipMsg.alarm?'报警':'未报警'}}
|
data-status="stopped">
|
||||||
</span>
|
<!-- 半透明渐变遮罩 -->
|
||||||
</p>
|
<div class="line-mask"></div>
|
||||||
<p><span class='eqTipTitle'>在线状态:</span>
|
<!-- 状态标签 -->
|
||||||
<span class='eqTipNum'>
|
<div class="line-status-tag">
|
||||||
<img v-show='eqTipMsg.status' :src='dotG' width='16'/>
|
<span class="status-dot stopped"></span>
|
||||||
<img v-show='!eqTipMsg.status' :src='dotR' width='16'/>
|
产线1 已停产
|
||||||
{{eqTipMsg.status?'在线':'离线'}}
|
</div>
|
||||||
</span>
|
</div>
|
||||||
</p>
|
<div
|
||||||
</div>
|
v-show="
|
||||||
<!-- 设备 -->
|
!dataObj.productionDet.find((val) => val.line == 2).isProduction
|
||||||
<div class='eqBox'>
|
"
|
||||||
<!-- line-从上到下-从右往左 -->
|
class="production-line2"
|
||||||
<span
|
data-line="2"
|
||||||
v-for='(item,index) in eqList'
|
data-status="stopped">
|
||||||
:key='index'
|
<!-- 半透明渐变遮罩 -->
|
||||||
:style="'width:'+item.w+'px;height:'+item.h+'px;left:'+item.l+'px;top:'+item.t+'px'"
|
<div class="line-mask"></div>
|
||||||
@mouseenter="handleMouseEnter(item, $event)"
|
<!-- 状态标签 -->
|
||||||
@mouseleave="handleMouseLeave"
|
<div class="line-status-tag">
|
||||||
></span>
|
<span class="status-dot stopped"></span>
|
||||||
</div>
|
产线2 已停产
|
||||||
</div>
|
</div>
|
||||||
<div class='centerTopTopBox'>
|
</div>
|
||||||
<div style='display: inline-block;'>
|
<div
|
||||||
<img src="../../../../assets/images/dataBoard/centerNumB.png" alt="" width='203'>
|
v-show="
|
||||||
<p class='num'>{{dataObj?.productRate || '-'}}%</p>
|
!dataObj.productionDet.find((val) => val.line == 3).isProduction
|
||||||
<p class='title'>成品率</p>
|
"
|
||||||
</div>
|
class="production-line3"
|
||||||
<div style='display: inline-block;'>
|
data-line="3"
|
||||||
<img src="../../../../assets/images/dataBoard/centerNumY.png" alt="" width='261'>
|
data-status="stopped">
|
||||||
<p class='num' style='width: 260px;padding-left: 20px;'>{{dataObj?.todayProduct ? formatThousands(dataObj.todayProduct) : '-'}}</p>
|
<!-- 半透明渐变遮罩 -->
|
||||||
<p class='title' style='color:#FFB625'>今日产量</p>
|
<div class="line-mask"></div>
|
||||||
</div>
|
<!-- 状态标签 -->
|
||||||
<div style='display: inline-block;'>
|
<div class="line-status-tag">
|
||||||
<img src="../../../../assets/images/dataBoard/centerNumY.png" alt="" width='261'>
|
<span class="status-dot stopped"></span>
|
||||||
<p class='num' style='width: 260px;padding-left: 20px;'>{{dataObj?.monthProduct ? formatThousands(dataObj.monthProduct) : '-'}}</p>
|
产线3 已停产
|
||||||
<p class='title' style='color:#FFB625'>本月产量</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style='display: inline-block;'>
|
<div
|
||||||
<img src="../../../../assets/images/dataBoard/centerNumB.png" alt="" width='203'>
|
v-show="
|
||||||
<p class='num'>{{dataObj?.alarmNum ? formatThousands(dataObj.alarmNum) : '-'}}</p>
|
!dataObj.productionDet.find((val) => val.line == 4).isProduction
|
||||||
<p class='title'>设备报警数</p>
|
"
|
||||||
</div>
|
class="production-line4"
|
||||||
</div>
|
data-line="4"
|
||||||
</div>
|
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" />
|
||||||
|
{{ eqTipMsg.status ? '在线' : '离线' }}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- 设备 -->
|
||||||
|
<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'
|
||||||
|
"
|
||||||
|
@mouseenter="handleMouseEnter(item, $event)"
|
||||||
|
@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" 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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'CenterTop',
|
name: 'CenterTop',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
showTooltip:false,
|
showTooltip: false,
|
||||||
tooltipStyle: {
|
tooltipStyle: {
|
||||||
left: 0,
|
left: 0,
|
||||||
top: 0
|
top: 0,
|
||||||
},
|
},
|
||||||
dotY:require('../../../../assets/images/dataBoard/dotY.png'),
|
dotY: require('../../../../assets/images/dataBoard/dotY.png'),
|
||||||
dotR:require('../../../../assets/images/dataBoard/dotR.png'),
|
dotR: require('../../../../assets/images/dataBoard/dotR.png'),
|
||||||
dotG:require('../../../../assets/images/dataBoard/dotG.png'),
|
dotG: require('../../../../assets/images/dataBoard/dotG.png'),
|
||||||
eqList:[
|
eqList: [
|
||||||
{name:'A1-磨边机-1',id:100301,w:70,h:18,l:830,t:160},
|
{ name: 'A1-磨边机-1', id: 100301, w: 70, h: 18, l: 830, t: 160 },
|
||||||
{name:'A1-磨边机-2',id:100302,w:70,h:18,l:830,t:183},
|
{ name: 'A1-磨边机-2', id: 100302, w: 70, h: 18, l: 830, t: 183 },
|
||||||
{name:'A1-磨边机-3',id:100303,w:70,h:18,l:832,t:206},
|
{ name: 'A1-磨边机-3', id: 100303, w: 70, h: 18, l: 832, t: 206 },
|
||||||
{name:'A1-磨边后清洗机-1',id:100401,w:30,h:15,l:798,t:160},
|
{ name: 'A1-磨边后清洗机-1', id: 100401, w: 30, h: 15, l: 798, t: 160 },
|
||||||
{name:'A1-磨边后清洗机-2',id:100402,w:30,h:15,l:798,t:183},
|
{ name: 'A1-磨边后清洗机-2', id: 100402, w: 30, h: 15, l: 798, t: 183 },
|
||||||
{name:'A1-磨边后清洗机-3',id:100403,w:30,h:15,l:800,t:206},
|
{ name: 'A1-磨边后清洗机-3', id: 100403, w: 30, h: 15, l: 800, t: 206 },
|
||||||
{name:'A1-打孔机-1',id:100501,w:13,h:12,l:730,t:163},
|
{ name: 'A1-打孔机-1', id: 100501, w: 13, h: 12, l: 730, t: 163 },
|
||||||
{name:'A1-打孔机-2',id:100502,w:13,h:12,l:730,t:187},
|
{ name: 'A1-打孔机-2', id: 100502, w: 13, h: 12, l: 730, t: 187 },
|
||||||
{name:'A1-打孔机-3',id:100503,w:13,h:12,l:730,t:210},
|
{ name: 'A1-打孔机-3', id: 100503, w: 13, h: 12, l: 730, t: 210 },
|
||||||
{name:'A1-打孔后清洗机-1',id:100601,w:32,h:15,l:665,t:160},
|
{ name: 'A1-打孔后清洗机-1', id: 100601, w: 32, h: 15, l: 665, t: 160 },
|
||||||
{name:'A1-打孔后清洗机-2',id:100602,w:32,h:15,l:665,t:183},
|
{ name: 'A1-打孔后清洗机-2', id: 100602, w: 32, h: 15, l: 665, t: 183 },
|
||||||
{name:'A1-打孔后清洗机-3',id:100603,w:32,h:15,l:665,t:206},
|
{ name: 'A1-打孔后清洗机-3', id: 100603, w: 32, h: 15, l: 665, t: 206 },
|
||||||
{name:'A1-丝印机-1',id:100701,w:30,h:12,l:605,t:163},
|
{ name: 'A1-丝印机-1', id: 100701, w: 30, h: 12, l: 605, t: 163 },
|
||||||
{name:'A1-丝印机-2',id:100702,w:30,h:12,l:605,t:187},
|
{ name: 'A1-丝印机-2', id: 100702, w: 30, h: 12, l: 605, t: 187 },
|
||||||
{name:'A1-丝印机-3',id:100703,w:30,h:12,l:605,t:210},
|
{ name: 'A1-丝印机-3', id: 100703, w: 30, h: 12, l: 605, t: 210 },
|
||||||
{name:'A1-丝印后固化机-1',id:101301,w:37,h:12,l:558,t:163},
|
{ name: 'A1-丝印后固化机-1', id: 101301, w: 37, h: 12, l: 558, t: 163 },
|
||||||
{name:'A1-丝印后固化机-2',id:101302,w:37,h:12,l:558,t:187},
|
{ name: 'A1-丝印后固化机-2', id: 101302, w: 37, h: 12, l: 558, t: 187 },
|
||||||
{name:'A1-丝印后固化机-3',id:101303,w:37,h:12,l:558,t:210},
|
{ name: 'A1-丝印后固化机-3', id: 101303, w: 37, h: 12, l: 558, t: 210 },
|
||||||
{name:'A1-钢化炉',id:101401,w:75,h:15,l:382,t:209},
|
{ name: 'A1-钢化炉', id: 101401, w: 75, h: 15, l: 382, t: 209 },
|
||||||
{name:'A1-包装清洗机-1',id:101501,w:30,h:15,l:228,t:173},
|
{ name: 'A1-包装清洗机-1', id: 101501, w: 30, h: 15, l: 228, t: 173 },
|
||||||
{name:'A1-包装清洗机-2',id:101502,w:30,h:15,l:228,t:206},
|
{ name: 'A1-包装清洗机-2', id: 101502, w: 30, h: 15, l: 228, t: 206 },
|
||||||
{name:'A1-铺纸机-1',id:101601,w:18,h:15,l:188,t:175},
|
{ name: 'A1-铺纸机-1', id: 101601, w: 18, h: 15, l: 188, t: 175 },
|
||||||
{name:'A1-铺纸机-2',id:101602,w:18,h:15,l:188,t:206},
|
{ name: 'A1-铺纸机-2', id: 101602, w: 18, h: 15, l: 188, t: 206 },
|
||||||
|
|
||||||
{name:'A2-磨边机-1',id:200301,w:70,h:18,l:832,t:233},
|
{ name: 'A2-磨边机-1', id: 200301, w: 70, h: 18, l: 832, t: 233 },
|
||||||
{name:'A2-磨边机-2',id:200302,w:70,h:18,l:833,t:257},
|
{ name: 'A2-磨边机-2', id: 200302, w: 70, h: 18, l: 833, t: 257 },
|
||||||
{name:'A2-磨边机-3',id:200303,w:70,h:18,l:834,t:281},
|
{ name: 'A2-磨边机-3', id: 200303, w: 70, h: 18, l: 834, t: 281 },
|
||||||
{name:'A2-磨边后清洗机-1',id:200401,w:30,h:15,l:800,t:233},
|
{ name: 'A2-磨边后清洗机-1', id: 200401, w: 30, h: 15, l: 800, t: 233 },
|
||||||
{name:'A2-磨边后清洗机-2',id:200402,w:30,h:15,l:801,t:257},
|
{ name: 'A2-磨边后清洗机-2', id: 200402, w: 30, h: 15, l: 801, t: 257 },
|
||||||
{name:'A2-磨边后清洗机-3',id:200403,w:30,h:15,l:802,t:281},
|
{ name: 'A2-磨边后清洗机-3', id: 200403, w: 30, h: 15, l: 802, t: 281 },
|
||||||
{name:'A2-打孔机-1',id:200501,w:13,h:12,l:731,t:240},
|
{ name: 'A2-打孔机-1', id: 200501, w: 13, h: 12, l: 731, t: 240 },
|
||||||
{name:'A2-打孔机-2',id:200502,w:13,h:12,l:731,t:262},
|
{ name: 'A2-打孔机-2', id: 200502, w: 13, h: 12, l: 731, t: 262 },
|
||||||
{name:'A2-打孔机-3',id:200503,w:13,h:12,l:731,t:285},
|
{ name: 'A2-打孔机-3', id: 200503, w: 13, h: 12, l: 731, t: 285 },
|
||||||
{name:'A2-打孔后清洗机-1',id:200601,w:32,h:15,l:666,t:234},
|
{ name: 'A2-打孔后清洗机-1', id: 200601, w: 32, h: 15, l: 666, t: 234 },
|
||||||
{name:'A2-打孔后清洗机-2',id:200602,w:32,h:15,l:666,t:258},
|
{ name: 'A2-打孔后清洗机-2', id: 200602, w: 32, h: 15, l: 666, t: 258 },
|
||||||
{name:'A2-打孔后清洗机-3',id:200603,w:32,h:15,l:666,t:282},
|
{ name: 'A2-打孔后清洗机-3', id: 200603, w: 32, h: 15, l: 666, t: 282 },
|
||||||
{name:'A2-丝印机-1',id:200701,w:30,h:12,l:605,t:238},
|
{ name: 'A2-丝印机-1', id: 200701, w: 30, h: 12, l: 605, t: 238 },
|
||||||
{name:'A2-丝印机-2',id:200702,w:30,h:12,l:605,t:262},
|
{ name: 'A2-丝印机-2', id: 200702, w: 30, h: 12, l: 605, t: 262 },
|
||||||
{name:'A2-丝印机-3',id:200703,w:30,h:12,l:605,t:286},
|
{ name: 'A2-丝印机-3', id: 200703, w: 30, h: 12, l: 605, t: 286 },
|
||||||
{name:'A2-丝印后固化机-1',id:201301,w:37,h:12,l:558,t:238},
|
{ name: 'A2-丝印后固化机-1', id: 201301, w: 37, h: 12, l: 558, t: 238 },
|
||||||
{name:'A2-丝印后固化机-2',id:201302,w:37,h:12,l:558,t:262},
|
{ name: 'A2-丝印后固化机-2', id: 201302, w: 37, h: 12, l: 558, t: 262 },
|
||||||
{name:'A2-丝印后固化机-3',id:201303,w:37,h:12,l:558,t:286},
|
{ name: 'A2-丝印后固化机-3', id: 201303, w: 37, h: 12, l: 558, t: 286 },
|
||||||
{name:'A2-钢化炉',id:201401,w:75,h:15,l:382,t:238},
|
{ name: 'A2-钢化炉', id: 201401, w: 75, h: 15, l: 382, t: 238 },
|
||||||
{name:'A2-包装清洗机-1',id:201501,w:30,h:15,l:228,t:234},
|
{ name: 'A2-包装清洗机-1', id: 201501, w: 30, h: 15, l: 228, t: 234 },
|
||||||
{name:'A2-包装清洗机-2',id:201502,w:30,h:15,l:228,t:267},
|
{ name: 'A2-包装清洗机-2', id: 201502, w: 30, h: 15, l: 228, t: 267 },
|
||||||
{name:'A2-铺纸机-1',id:201601,w:18,h:15,l:187,t:234},
|
{ name: 'A2-铺纸机-1', id: 201601, w: 18, h: 15, l: 187, t: 234 },
|
||||||
{name:'A2-铺纸机-2',id:201602,w:18,h:15,l:186,t:267},
|
{ name: 'A2-铺纸机-2', id: 201602, w: 18, h: 15, l: 186, t: 267 },
|
||||||
|
|
||||||
{name:'A3-磨边机-1',id:300301,w:70,h:18,l:834,t:318},
|
{ name: 'A3-磨边机-1', id: 300301, w: 70, h: 18, l: 834, t: 318 },
|
||||||
{name:'A3-磨边机-2',id:300302,w:70,h:18,l:834,t:342},
|
{ name: 'A3-磨边机-2', id: 300302, w: 70, h: 18, l: 834, t: 342 },
|
||||||
{name:'A3-磨边后清洗机-1',id:300401,w:30,h:15,l:802,t:319},
|
{ name: 'A3-磨边后清洗机-1', id: 300401, w: 30, h: 15, l: 802, t: 319 },
|
||||||
{name:'A3-磨边后清洗机-2',id:300402,w:30,h:15,l:802,t:342},
|
{ name: 'A3-磨边后清洗机-2', id: 300402, w: 30, h: 15, l: 802, t: 342 },
|
||||||
{name:'A3-打孔机-1',id:300501,w:13,h:12,l:731,t:324},
|
{ name: 'A3-打孔机-1', id: 300501, w: 13, h: 12, l: 731, t: 324 },
|
||||||
{name:'A3-打孔机-2',id:300502,w:13,h:12,l:731,t:348},
|
{ name: 'A3-打孔机-2', id: 300502, w: 13, h: 12, l: 731, t: 348 },
|
||||||
{name:'A3-打孔后清洗机-1',id:300601,w:32,h:15,l:666,t:320},
|
{ name: 'A3-打孔后清洗机-1', id: 300601, w: 32, h: 15, l: 666, t: 320 },
|
||||||
{name:'A3-打孔后清洗机-2',id:300602,w:32,h:15,l:666,t:342},
|
{ name: 'A3-打孔后清洗机-2', id: 300602, w: 32, h: 15, l: 666, t: 342 },
|
||||||
{name:'A3-丝印机-1',id:300701,w:30,h:12,l:605,t:324},
|
{ name: 'A3-丝印机-1', id: 300701, w: 30, h: 12, l: 605, t: 324 },
|
||||||
{name:'A3-丝印机-2',id:300702,w:30,h:12,l:605,t:348},
|
{ name: 'A3-丝印机-2', id: 300702, w: 30, h: 12, l: 605, t: 348 },
|
||||||
{name:'A3-一次镀膜机-1',id:300801,w:20,h:15,l:553,t:322},
|
{ name: 'A3-一次镀膜机-1', id: 300801, w: 20, h: 15, l: 553, t: 322 },
|
||||||
{name:'A3-一次镀膜机-2',id:300802,w:20,h:15,l:553,t:346},
|
{ name: 'A3-一次镀膜机-2', id: 300802, w: 20, h: 15, l: 553, t: 346 },
|
||||||
{name:'A3-丝印后固化机-1',id:301301,w:37,h:12,l:506,t:324},
|
{ name: 'A3-丝印后固化机-1', id: 301301, w: 37, h: 12, l: 506, t: 324 },
|
||||||
{name:'A3-丝印后固化机-2',id:301302,w:37,h:12,l:506,t:347},
|
{ name: 'A3-丝印后固化机-2', id: 301302, w: 37, h: 12, l: 506, t: 347 },
|
||||||
{name:'A3-钢化炉',id:301401,w:75,h:15,l:340,t:346},
|
{ name: 'A3-钢化炉', id: 301401, w: 75, h: 15, l: 340, t: 346 },
|
||||||
{name:'A3-包装清洗机-1',id:301501,w:30,h:15,l:240,t:343},
|
{ name: 'A3-包装清洗机-1', id: 301501, w: 30, h: 15, l: 240, t: 343 },
|
||||||
{name:'A3-铺纸机-1',id:301601,w:18,h:15,l:200,t:343},
|
{ name: 'A3-铺纸机-1', id: 301601, w: 18, h: 15, l: 200, t: 343 },
|
||||||
{name:'A3-铺纸机-2',id:301602,w:18,h:15,l:170,t:343},
|
{ name: 'A3-铺纸机-2', id: 301602, w: 18, h: 15, l: 170, t: 343 },
|
||||||
|
|
||||||
{name:'A4-磨边机-1',id:400301,w:70,h:18,l:838,t:380},
|
{ name: 'A4-磨边机-1', id: 400301, w: 70, h: 18, l: 838, t: 380 },
|
||||||
{name:'A4-磨边机-2',id:400302,w:70,h:18,l:838,t:405},
|
{ name: 'A4-磨边机-2', id: 400302, w: 70, h: 18, l: 838, t: 405 },
|
||||||
{name:'A4-磨边机-3',id:400303,w:70,h:18,l:839,t:428},
|
{ name: 'A4-磨边机-3', id: 400303, w: 70, h: 18, l: 839, t: 428 },
|
||||||
{name:'A4-磨边后清洗机-1',id:400401,w:30,h:15,l:804,t:380},
|
{ name: 'A4-磨边后清洗机-1', id: 400401, w: 30, h: 15, l: 804, t: 380 },
|
||||||
{name:'A4-磨边后清洗机-2',id:400402,w:30,h:15,l:805,t:405},
|
{ name: 'A4-磨边后清洗机-2', id: 400402, w: 30, h: 15, l: 805, t: 405 },
|
||||||
{name:'A4-磨边后清洗机-3',id:400403,w:30,h:15,l:806,t:427},
|
{ name: 'A4-磨边后清洗机-3', id: 400403, w: 30, h: 15, l: 806, t: 427 },
|
||||||
{name:'A4-一次镀膜机-1',id:400801,w:20,h:15,l:707,t:381},
|
{ name: 'A4-一次镀膜机-1', id: 400801, w: 20, h: 15, l: 707, t: 381 },
|
||||||
{name:'A4-一次镀膜机-2',id:400802,w:20,h:15,l:707,t:407},
|
{ name: 'A4-一次镀膜机-2', id: 400802, w: 20, h: 15, l: 707, t: 407 },
|
||||||
{name:'A4-一次镀膜机-3',id:400803,w:20,h:15,l:707,t:429},
|
{ name: 'A4-一次镀膜机-3', id: 400803, w: 20, h: 15, l: 707, t: 429 },
|
||||||
{name:'A4-一次固化机-1',id:401001,w:37,h:12,l:660,t:383},
|
{ name: 'A4-一次固化机-1', id: 401001, w: 37, h: 12, l: 660, t: 383 },
|
||||||
{name:'A4-一次固化机-2',id:401002,w:37,h:12,l:660,t:409},
|
{ name: 'A4-一次固化机-2', id: 401002, w: 37, h: 12, l: 660, t: 409 },
|
||||||
{name:'A4-一次固化机-3',id:401003,w:37,h:12,l:660,t:431},
|
{ name: 'A4-一次固化机-3', id: 401003, w: 37, h: 12, l: 660, t: 431 },
|
||||||
{name:'A4-二次镀膜机-1',id:401101,w:20,h:15,l:605,t:382},
|
{ name: 'A4-二次镀膜机-1', id: 401101, w: 20, h: 15, l: 605, t: 382 },
|
||||||
{name:'A4-二次镀膜机-2',id:401102,w:20,h:15,l:605,t:408},
|
{ name: 'A4-二次镀膜机-2', id: 401102, w: 20, h: 15, l: 605, t: 408 },
|
||||||
{name:'A4-二次镀膜机-3',id:401103,w:20,h:15,l:605,t:430},
|
{ name: 'A4-二次镀膜机-3', id: 401103, w: 20, h: 15, l: 605, t: 430 },
|
||||||
{name:'A4-二次固化机-1',id:401201,w:37,h:12,l:557,t:383},
|
{ name: 'A4-二次固化机-1', id: 401201, w: 37, h: 12, l: 557, t: 383 },
|
||||||
{name:'A4-二次固化机-2',id:401202,w:37,h:12,l:557,t:409},
|
{ name: 'A4-二次固化机-2', id: 401202, w: 37, h: 12, l: 557, t: 409 },
|
||||||
{name:'A4-二次固化机-3',id:401203,w:37,h:12,l:557,t:431},
|
{ name: 'A4-二次固化机-3', id: 401203, w: 37, h: 12, l: 557, t: 431 },
|
||||||
{name:'A4-钢化炉',id:401401,w:75,h:15,l:379,t:381},
|
{ name: 'A4-钢化炉', id: 401401, w: 75, h: 15, l: 379, t: 381 },
|
||||||
{name:'A4-包装清洗机-1',id:401501,w:30,h:15,l:220,t:379},
|
{ name: 'A4-包装清洗机-1', id: 401501, w: 30, h: 15, l: 220, t: 379 },
|
||||||
{name:'A4-包装清洗机-2',id:401502,w:30,h:18,l:220,t:410},
|
{ name: 'A4-包装清洗机-2', id: 401502, w: 30, h: 18, l: 220, t: 410 },
|
||||||
{name:'A4-铺纸机-1',id:401601,w:18,h:15,l:180,t:381},
|
{ name: 'A4-铺纸机-1', id: 401601, w: 18, h: 15, l: 180, t: 381 },
|
||||||
{name:'A4-铺纸机-2',id:401602,w:18,h:15,l:180,t:414},
|
{ name: 'A4-铺纸机-2', id: 401602, w: 18, h: 15, l: 180, t: 414 },
|
||||||
|
|
||||||
{name:'A5-磨边机-1',id:500301,w:70,h:18,l:817,t:465},
|
{ name: 'A5-磨边机-1', id: 500301, w: 70, h: 18, l: 817, t: 465 },
|
||||||
{name:'A5-磨边机-2',id:500302,w:70,h:18,l:817,t:488},
|
{ name: 'A5-磨边机-2', id: 500302, w: 70, h: 18, l: 817, t: 488 },
|
||||||
{name:'A5-磨边机-3',id:500303,w:70,h:18,l:819,t:512},
|
{ name: 'A5-磨边机-3', id: 500303, w: 70, h: 18, l: 819, t: 512 },
|
||||||
{name:'A5-磨边后清洗机-1',id:500401,w:30,h:15,l:784,t:462},
|
{ name: 'A5-磨边后清洗机-1', id: 500401, w: 30, h: 15, l: 784, t: 462 },
|
||||||
{name:'A5-磨边后清洗机-2',id:500402,w:30,h:15,l:784,t:488},
|
{ name: 'A5-磨边后清洗机-2', id: 500402, w: 30, h: 15, l: 784, t: 488 },
|
||||||
{name:'A5-磨边后清洗机-3',id:500403,w:30,h:15,l:785,t:512},
|
{ name: 'A5-磨边后清洗机-3', id: 500403, w: 30, h: 15, l: 785, t: 512 },
|
||||||
{name:'A5-一次镀膜机-1',id:500801,w:20,h:15,l:685,t:466},
|
{ name: 'A5-一次镀膜机-1', id: 500801, w: 20, h: 15, l: 685, t: 466 },
|
||||||
{name:'A5-一次镀膜机-2',id:500802,w:20,h:15,l:685,t:490},
|
{ name: 'A5-一次镀膜机-2', id: 500802, w: 20, h: 15, l: 685, t: 490 },
|
||||||
{name:'A5-一次镀膜机-3',id:500803,w:20,h:15,l:685,t:513},
|
{ name: 'A5-一次镀膜机-3', id: 500803, w: 20, h: 15, l: 685, t: 513 },
|
||||||
{name:'A5-一次固化机-1',id:501001,w:37,h:12,l:638,t:468},
|
{ name: 'A5-一次固化机-1', id: 501001, w: 37, h: 12, l: 638, t: 468 },
|
||||||
{name:'A5-一次固化机-2',id:501002,w:37,h:12,l:638,t:491},
|
{ name: 'A5-一次固化机-2', id: 501002, w: 37, h: 12, l: 638, t: 491 },
|
||||||
{name:'A5-一次固化机-3',id:501003,w:37,h:12,l:638,t:514},
|
{ name: 'A5-一次固化机-3', id: 501003, w: 37, h: 12, l: 638, t: 514 },
|
||||||
{name:'A5-二次镀膜机-1',id:501101,w:20,h:15,l:584,t:468},
|
{ name: 'A5-二次镀膜机-1', id: 501101, w: 20, h: 15, l: 584, t: 468 },
|
||||||
{name:'A5-二次镀膜机-2',id:501102,w:20,h:15,l:584,t:490},
|
{ name: 'A5-二次镀膜机-2', id: 501102, w: 20, h: 15, l: 584, t: 490 },
|
||||||
{name:'A5-二次镀膜机-3',id:501103,w:20,h:15,l:584,t:513},
|
{ name: 'A5-二次镀膜机-3', id: 501103, w: 20, h: 15, l: 584, t: 513 },
|
||||||
{name:'A5-二次固化机-1',id:501201,w:37,h:12,l:535,t:468},
|
{ name: 'A5-二次固化机-1', id: 501201, w: 37, h: 12, l: 535, t: 468 },
|
||||||
{name:'A5-二次固化机-2',id:501202,w:37,h:12,l:535,t:492},
|
{ name: 'A5-二次固化机-2', id: 501202, w: 37, h: 12, l: 535, t: 492 },
|
||||||
{name:'A5-二次固化机-3',id:501203,w:37,h:12,l:535,t:514},
|
{ name: 'A5-二次固化机-3', id: 501203, w: 37, h: 12, l: 535, t: 514 },
|
||||||
{name:'A5-钢化炉',id:501401,w:75,h:15,l:344,t:513},
|
{ name: 'A5-钢化炉', id: 501401, w: 75, h: 15, l: 344, t: 513 },
|
||||||
{name:'A5-包装清洗机-1',id:501501,w:30,h:18,l:185,t:473},
|
{ 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-包装清洗机-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-铺纸机-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:{
|
eqTipMsg: {
|
||||||
name:'',
|
name: '',
|
||||||
input:null,
|
input: null,
|
||||||
output:null,
|
output: null,
|
||||||
alarm:'未报警',
|
alarm: '未报警',
|
||||||
status:'在线'
|
status: '在线',
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
scaleNum: {
|
scaleNum: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 1
|
default: 1,
|
||||||
},
|
},
|
||||||
dataObj: {
|
dataObj: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => {}
|
default: () => {},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
scaleNum(val) {
|
scaleNum(val) {
|
||||||
this.scaleNum = val
|
this.scaleNum = val;
|
||||||
},
|
},
|
||||||
dataObj(val) {
|
dataObj(val) {
|
||||||
val.equipmentDets && val.equipmentDets.forEach(item => {
|
val.equipmentDets &&
|
||||||
this.eqList.forEach(eq => {
|
val.equipmentDets.forEach((item) => {
|
||||||
if (eq.id == item.id) {
|
this.eqList.forEach((eq) => {
|
||||||
eq.name = item.name
|
if (eq.id == item.id) {
|
||||||
eq.input = item.input
|
eq.name = item.name;
|
||||||
eq.output = item.output
|
eq.input = item.input;
|
||||||
eq.alarm = item.isError
|
eq.output = item.output;
|
||||||
eq.status = item.isRun
|
eq.alarm = item.isError;
|
||||||
}
|
eq.status = item.isRun;
|
||||||
})
|
}
|
||||||
})
|
});
|
||||||
}
|
});
|
||||||
},
|
},
|
||||||
mounted() {},
|
},
|
||||||
methods: {
|
mounted() {},
|
||||||
// 鼠标hover事件
|
methods: {
|
||||||
handleMouseEnter(item, event) {
|
// 鼠标hover事件
|
||||||
this.showTooltip = true;
|
handleMouseEnter(item, event) {
|
||||||
this.eqTipMsg.name = item.name;
|
this.showTooltip = true;
|
||||||
this.eqTipMsg.input = item.input;
|
this.eqTipMsg.name = item.name;
|
||||||
this.eqTipMsg.output = item.output;
|
this.eqTipMsg.input = item.input;
|
||||||
this.eqTipMsg.alarm = item.alarm;
|
this.eqTipMsg.output = item.output;
|
||||||
this.eqTipMsg.status = item.status;
|
this.eqTipMsg.alarm = item.alarm;
|
||||||
this.updateTooltipPosition(event);
|
this.eqTipMsg.status = item.status;
|
||||||
},
|
this.updateTooltipPosition(event);
|
||||||
handleMouseLeave() {
|
},
|
||||||
this.showTooltip = false;
|
handleMouseLeave() {
|
||||||
},
|
this.showTooltip = false;
|
||||||
updateTooltipPosition(event) {
|
},
|
||||||
const rect = this.$refs.centerTopBox.getBoundingClientRect()
|
updateTooltipPosition(event) {
|
||||||
const offset = 15;
|
const rect = this.$refs.centerTopBox.getBoundingClientRect();
|
||||||
const tooltipWidth = 315*this.scaleNum;
|
const offset = 15;
|
||||||
const tooltipHeight = 170*this.scaleNum;
|
const tooltipWidth = 315 * this.scaleNum;
|
||||||
const startX = rect.left;
|
const tooltipHeight = 170 * this.scaleNum;
|
||||||
const startY = rect.top;
|
const startX = rect.left;
|
||||||
const endX = rect.width;
|
const startY = rect.top;
|
||||||
const endY = rect.height;
|
const endX = rect.width;
|
||||||
let posX = event.clientX-startX + offset;
|
const endY = rect.height;
|
||||||
let posY = event.clientY-startY + offset;
|
let posX = event.clientX - startX + offset;
|
||||||
if (posX + tooltipWidth > endX) {
|
let posY = event.clientY - startY + offset;
|
||||||
posX = event.clientX-startX - tooltipWidth - offset;
|
if (posX + tooltipWidth > endX) {
|
||||||
}
|
posX = event.clientX - startX - tooltipWidth - offset;
|
||||||
if (posY + tooltipHeight > endY) {
|
}
|
||||||
posY = event.clientY -startY - tooltipHeight - offset;
|
if (posY + tooltipHeight > endY) {
|
||||||
}
|
posY = event.clientY - startY - tooltipHeight - offset;
|
||||||
this.tooltipStyle.left = posX/this.scaleNum;
|
}
|
||||||
this.tooltipStyle.top = posY/this.scaleNum;
|
this.tooltipStyle.left = posX / this.scaleNum;
|
||||||
}
|
this.tooltipStyle.top = posY / this.scaleNum;
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
p{
|
p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.centerTopBox {
|
.centerTopBox {
|
||||||
width: 1041px;
|
width: 1041px;
|
||||||
height: 600px;
|
height: 600px;
|
||||||
background: url('../../../../assets/images/dataBoard/center-top.png') no-repeat;
|
background: url('../../../../assets/images/dataBoard/center-top.png')
|
||||||
background-size: 100%;
|
no-repeat;
|
||||||
position: absolute;
|
background-size: 100%;
|
||||||
left: 440px;
|
position: absolute;
|
||||||
top:113px;
|
left: 440px;
|
||||||
overflow: hidden;
|
top: 113px;
|
||||||
.videoStyle {
|
overflow: hidden;
|
||||||
width: 1920px;
|
.videoStyle {
|
||||||
height: 1080px;
|
width: 1920px;
|
||||||
position: absolute;
|
height: 1080px;
|
||||||
left:-440px;
|
position: absolute;
|
||||||
top:-113px;
|
left: -440px;
|
||||||
}
|
top: -113px;
|
||||||
.eqTipBox {
|
}
|
||||||
width: 315px;
|
.eqTipBox {
|
||||||
height: 170px;
|
width: 315px;
|
||||||
background: url('../../../../assets/images/dataBoard/eq-tip.png') no-repeat;
|
height: 170px;
|
||||||
background-size: 100%;
|
background: url('../../../../assets/images/dataBoard/eq-tip.png') no-repeat;
|
||||||
position: absolute;
|
background-size: 100%;
|
||||||
padding-top: 10px;
|
position: absolute;
|
||||||
z-index: 1;
|
padding-top: 10px;
|
||||||
span{
|
z-index: 1;
|
||||||
display: inline-block;
|
span {
|
||||||
font-size: 20px;
|
display: inline-block;
|
||||||
color: #FFFFFF;
|
font-size: 20px;
|
||||||
letter-spacing: 1px;
|
color: #ffffff;
|
||||||
vertical-align: middle;
|
letter-spacing: 1px;
|
||||||
}
|
vertical-align: middle;
|
||||||
.eqTipTitle {
|
}
|
||||||
width: 112px;
|
.eqTipTitle {
|
||||||
height: 30px;
|
width: 112px;
|
||||||
padding-left: 15px;
|
height: 30px;
|
||||||
}
|
padding-left: 15px;
|
||||||
.eqTipNum {
|
}
|
||||||
width: 190px;
|
.eqTipNum {
|
||||||
height: 30px;
|
width: 190px;
|
||||||
line-height: 30px;
|
height: 30px;
|
||||||
white-space: nowrap;
|
line-height: 30px;
|
||||||
overflow: hidden;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
overflow: hidden;
|
||||||
}
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.eqBox {
|
}
|
||||||
span{
|
.zhegaiceng {
|
||||||
display: inline-block;
|
.production-line1 {
|
||||||
// border: 1px solid red;
|
position: absolute;
|
||||||
position: absolute;
|
left: 3px;
|
||||||
}
|
top: 160px;
|
||||||
}
|
width: 99%;
|
||||||
.centerTopTopBox {
|
height: 70px;
|
||||||
padding-left: 48px;
|
}
|
||||||
position: absolute;
|
.production-line2 {
|
||||||
top:30px;
|
position: absolute;
|
||||||
.num {
|
left: 3px;
|
||||||
width: 203px;
|
top: 232px;
|
||||||
height: 65px;
|
width: 99%;
|
||||||
line-height: 65px;
|
height: 75px;
|
||||||
padding-left: 10px;
|
}
|
||||||
box-sizing: border-box;
|
.production-line3 {
|
||||||
font-weight: 500;
|
position: absolute;
|
||||||
font-size: 38px;
|
left: 3px;
|
||||||
color: #FFFFFF;
|
top: 306px;
|
||||||
text-shadow: 0px 5px 2px rgba(0,0,0,0.62);
|
width: 99%;
|
||||||
text-align: center;
|
height: 68px;
|
||||||
position: absolute;
|
}
|
||||||
top:0px;
|
.production-line4 {
|
||||||
}
|
position: absolute;
|
||||||
.title {
|
left: 3px;
|
||||||
font-weight: 500;
|
top: 372px;
|
||||||
font-size: 20px;
|
width: 99%;
|
||||||
color: #00C8F7;
|
height: 86px;
|
||||||
letter-spacing: 2px;
|
}
|
||||||
text-shadow: 0px 5px 2px rgba(0,0,0,0.62);
|
.production-line5 {
|
||||||
text-align: center;
|
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;
|
||||||
|
// border: 1px solid red;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.centerTopTopBox {
|
||||||
|
padding-left: 48px;
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
.num {
|
||||||
|
width: 203px;
|
||||||
|
height: 65px;
|
||||||
|
line-height: 65px;
|
||||||
|
padding-left: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 38px;
|
||||||
|
color: #ffffff;
|
||||||
|
text-shadow: 0px 5px 2px rgba(0, 0, 0, 0.62);
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #00c8f7;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-shadow: 0px 5px 2px rgba(0, 0, 0, 0.62);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,286 +1,296 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class='leftBottomBox'>
|
<div class="leftBottomBox">
|
||||||
<div class='title'>
|
<div class="title">
|
||||||
<svg-icon icon-class="dataBoard2" class='icon'/>
|
<svg-icon icon-class="dataBoard2" class="icon" />
|
||||||
<span>投入产出及良品率</span>
|
<span>投入产出及良品率</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-if='xData.length === 0' class='noData'>暂无数据</div>
|
<div v-if="xData.length === 0" class="noData">暂无数据</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<div class="top_legend">
|
<div class="top_legend">
|
||||||
<span class="chart_legend_icon1">投入</span>
|
<span class="chart_legend_icon1">投入</span>
|
||||||
<span class="chart_legend_icon2">产出</span>
|
<span class="chart_legend_icon2">产出</span>
|
||||||
<span><span class="chart_legend_icon3"></span>良品率</span>
|
<span>
|
||||||
</div>
|
<span class="chart_legend_icon3"></span>
|
||||||
<div id='inOutputChart' style='width: 400px;height: 290px;'></div>
|
良品率
|
||||||
</div>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="inOutputChart" style="width: 400px; height: 290px"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
export default {
|
export default {
|
||||||
name: 'LeftBottom',
|
name: 'LeftBottom',
|
||||||
props: {
|
props: {
|
||||||
dataObj: {
|
dataObj: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => {}
|
default: () => {},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
dataObj(val) {
|
dataObj(val) {
|
||||||
this.xData = []
|
this.xData = [];
|
||||||
this.inputData = []
|
this.inputData = [];
|
||||||
this.outputData = []
|
this.outputData = [];
|
||||||
this.goodRateData = []
|
this.goodRateData = [];
|
||||||
val.monthBar && val.monthBar.forEach(item => {
|
val.monthBar &&
|
||||||
this.xData.push(item.dataType)
|
val.monthBar.forEach((item) => {
|
||||||
this.inputData.push(item.inputNum)
|
this.xData.push(item.dataType);
|
||||||
this.outputData.push(item.outputNum)
|
this.inputData.push(item.inputNum);
|
||||||
this.goodRateData.push(item.goodRate)
|
this.outputData.push(item.outputNum);
|
||||||
})
|
this.goodRateData.push(item.goodRate.toFixed(2));
|
||||||
this.$nextTick(()=>{
|
});
|
||||||
this.initChart();
|
this.$nextTick(() => {
|
||||||
})
|
this.initChart();
|
||||||
}
|
});
|
||||||
},
|
},
|
||||||
data() {
|
},
|
||||||
return {
|
data() {
|
||||||
chartDom: '',
|
return {
|
||||||
chart: '',
|
chartDom: '',
|
||||||
xData:[],
|
chart: '',
|
||||||
inputData:[],
|
xData: [],
|
||||||
outputData:[],
|
inputData: [],
|
||||||
goodRateData:[],
|
outputData: [],
|
||||||
}
|
goodRateData: [],
|
||||||
},
|
};
|
||||||
mounted() {},
|
},
|
||||||
methods: {
|
mounted() {},
|
||||||
initChart() {
|
methods: {
|
||||||
if (
|
initChart() {
|
||||||
this.chart !== null &&
|
if (
|
||||||
this.chart !== '' &&
|
this.chart !== null &&
|
||||||
this.chart !== undefined
|
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');
|
||||||
var option;
|
this.chart = echarts.init(this.chartDom);
|
||||||
option = {
|
var option;
|
||||||
grid: { top: 40, right: 10, bottom: 5, left: 10, containLabel: true },
|
option = {
|
||||||
legend: {
|
grid: { top: 40, right: 10, bottom: 5, left: 10, containLabel: true },
|
||||||
show: false,
|
legend: {
|
||||||
},
|
show: false,
|
||||||
xAxis: {
|
},
|
||||||
type: "category",
|
xAxis: {
|
||||||
data: this.xData,
|
type: 'category',
|
||||||
axisLabel: {
|
data: this.xData,
|
||||||
color: "#fff",
|
axisLabel: {
|
||||||
fontSize: 10,
|
color: '#fff',
|
||||||
interval: 0,
|
fontSize: 10,
|
||||||
rotate:30
|
interval: 0,
|
||||||
},
|
rotate: 30,
|
||||||
axisTick: { show: false },
|
},
|
||||||
axisLine: {
|
axisTick: { show: false },
|
||||||
lineStyle: {
|
axisLine: {
|
||||||
width: 2,
|
lineStyle: {
|
||||||
color: "#5982B2",
|
width: 2,
|
||||||
},
|
color: '#5982B2',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: [{
|
},
|
||||||
name: "单位/片",
|
yAxis: [
|
||||||
nameTextStyle: {
|
{
|
||||||
color: "#DFF1FE",
|
name: '单位/片',
|
||||||
fontSize: 12,
|
nameTextStyle: {
|
||||||
},
|
color: '#DFF1FE',
|
||||||
type: "value",
|
fontSize: 12,
|
||||||
axisLabel: {
|
},
|
||||||
color: "#DFF1FE",
|
type: 'value',
|
||||||
fontSize: 12,
|
axisLabel: {
|
||||||
formatter: "{value}",
|
color: '#DFF1FE',
|
||||||
},
|
fontSize: 12,
|
||||||
axisLine: {
|
formatter: '{value}',
|
||||||
show: true,
|
},
|
||||||
lineStyle: {
|
axisLine: {
|
||||||
width: 2,
|
show: true,
|
||||||
color: "#5982B2",
|
lineStyle: {
|
||||||
},
|
width: 2,
|
||||||
},
|
color: '#5982B2',
|
||||||
splitLine: {
|
},
|
||||||
lineStyle: {
|
},
|
||||||
width: 2,
|
splitLine: {
|
||||||
color: "#5982B2",
|
lineStyle: {
|
||||||
},
|
width: 2,
|
||||||
},
|
color: '#5982B2',
|
||||||
},{
|
},
|
||||||
name: "良品率/%",
|
},
|
||||||
nameTextStyle: {
|
},
|
||||||
color: "#DFF1FE",
|
{
|
||||||
fontSize: 12,
|
name: '良品率/%',
|
||||||
},
|
nameTextStyle: {
|
||||||
type: "value",
|
color: '#DFF1FE',
|
||||||
axisLabel: {
|
fontSize: 12,
|
||||||
color: "#DFF1FE",
|
},
|
||||||
fontSize: 12,
|
type: 'value',
|
||||||
formatter: "{value}",
|
max: 100,
|
||||||
},
|
min: 80,
|
||||||
axisLine: {
|
axisLabel: {
|
||||||
show: true,
|
color: '#DFF1FE',
|
||||||
lineStyle: {
|
fontSize: 12,
|
||||||
width: 2,
|
formatter: '{value}',
|
||||||
color: "#5982B2",
|
},
|
||||||
},
|
axisLine: {
|
||||||
},
|
show: true,
|
||||||
splitLine: {
|
lineStyle: {
|
||||||
lineStyle: {
|
width: 2,
|
||||||
width: 2,
|
color: '#5982B2',
|
||||||
color: "#5982B2",
|
},
|
||||||
},
|
},
|
||||||
},
|
splitLine: {
|
||||||
}],
|
lineStyle: {
|
||||||
tooltip: {
|
width: 2,
|
||||||
trigger: "axis",
|
color: '#5982B2',
|
||||||
axisPointer: {
|
},
|
||||||
type: "shadow",
|
},
|
||||||
},
|
},
|
||||||
className: "qhd-chart-tooltip",
|
],
|
||||||
show: true,
|
tooltip: {
|
||||||
},
|
trigger: 'axis',
|
||||||
series: [
|
axisPointer: {
|
||||||
{
|
type: 'shadow',
|
||||||
data: this.inputData,
|
},
|
||||||
type: "bar",
|
className: 'qhd-chart-tooltip',
|
||||||
barWidth: 10,
|
show: true,
|
||||||
barGap:0,
|
},
|
||||||
itemStyle: {
|
series: [
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{
|
||||||
{ offset: 0, color: 'rgba(157, 234, 245, 1)' },
|
data: this.inputData,
|
||||||
{ offset: 1, color: 'rgba(110, 249, 222, 1)' },
|
type: 'bar',
|
||||||
]),
|
barWidth: 10,
|
||||||
},
|
barGap: 0,
|
||||||
},
|
itemStyle: {
|
||||||
{
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
data:this.outputData,
|
{ offset: 0, color: 'rgba(157, 234, 245, 1)' },
|
||||||
type: "bar",
|
{ offset: 1, color: 'rgba(110, 249, 222, 1)' },
|
||||||
barWidth: 10,
|
]),
|
||||||
itemStyle: {
|
},
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
},
|
||||||
{ offset: 0, color: 'rgba(92, 183, 255, 1)' },
|
{
|
||||||
{ offset: 1, color: 'rgba(54, 75, 254, 1)' },
|
data: this.outputData,
|
||||||
]),
|
type: 'bar',
|
||||||
},
|
barWidth: 10,
|
||||||
},
|
itemStyle: {
|
||||||
{
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
data:this.goodRateData,
|
{ offset: 0, color: 'rgba(92, 183, 255, 1)' },
|
||||||
type: "line",
|
{ offset: 1, color: 'rgba(54, 75, 254, 1)' },
|
||||||
yAxisIndex: 1,
|
]),
|
||||||
symbol:'circle',
|
},
|
||||||
symbolSize: 7,
|
},
|
||||||
color:'rgba(18, 255, 245, 1)',
|
{
|
||||||
areaStyle: {
|
data: this.goodRateData,
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
type: 'line',
|
||||||
{ offset: 0, color: 'rgba(18, 255, 245, 0.8)' },
|
yAxisIndex: 1,
|
||||||
{ offset: 0.2, color: 'rgba(18, 255, 245, 0.2)' },
|
symbol: 'circle',
|
||||||
{ offset: 0.4, color: 'rgba(18, 255, 245, 0)' },
|
symbolSize: 7,
|
||||||
]),
|
color: 'rgba(18, 255, 245, 1)',
|
||||||
}
|
areaStyle: {
|
||||||
}
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
],
|
{ offset: 0, color: 'rgba(18, 255, 245, 0.8)' },
|
||||||
}
|
{ offset: 0.2, color: 'rgba(18, 255, 245, 0.2)' },
|
||||||
option && this.chart.setOption(option);
|
{ offset: 0.4, color: 'rgba(18, 255, 245, 0)' },
|
||||||
}
|
]),
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
option && this.chart.setOption(option);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang='scss' scoped>
|
<style lang="scss" scoped>
|
||||||
.leftBottomBox {
|
.leftBottomBox {
|
||||||
width: 402px;
|
width: 402px;
|
||||||
height: 332px;
|
height: 332px;
|
||||||
background: url('../../../../assets/images/dataBoard/left-bottom.png') no-repeat;
|
background: url('../../../../assets/images/dataBoard/left-bottom.png')
|
||||||
background-size: 100%;
|
no-repeat;
|
||||||
position: absolute;
|
background-size: 100%;
|
||||||
left: 23px;
|
position: absolute;
|
||||||
bottom:23px;
|
left: 23px;
|
||||||
.title {
|
bottom: 23px;
|
||||||
margin: 7px 0 0 15px;
|
.title {
|
||||||
.icon {
|
margin: 7px 0 0 15px;
|
||||||
width: 32px;
|
.icon {
|
||||||
height: 32px;
|
width: 32px;
|
||||||
margin-right: 5px;
|
height: 32px;
|
||||||
vertical-align:middle;
|
margin-right: 5px;
|
||||||
margin-top: 5px;
|
vertical-align: middle;
|
||||||
}
|
margin-top: 5px;
|
||||||
span {
|
}
|
||||||
font-size: 24px;
|
span {
|
||||||
color: #52FFF1;
|
font-size: 24px;
|
||||||
line-height: 24px;
|
color: #52fff1;
|
||||||
vertical-align:middle;
|
line-height: 24px;
|
||||||
}
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
.top_legend {
|
}
|
||||||
color: #fff;
|
.top_legend {
|
||||||
font-size: 14px;
|
color: #fff;
|
||||||
position: absolute;
|
font-size: 14px;
|
||||||
left:120px;
|
position: absolute;
|
||||||
top:50px;
|
left: 120px;
|
||||||
.chart_legend_icon1{
|
top: 50px;
|
||||||
margin-right: 10px;
|
.chart_legend_icon1 {
|
||||||
}
|
margin-right: 10px;
|
||||||
.chart_legend_icon2{
|
}
|
||||||
margin-right: 14px;
|
.chart_legend_icon2 {
|
||||||
}
|
margin-right: 14px;
|
||||||
.chart_legend_icon1:before {
|
}
|
||||||
display: inline-block;
|
.chart_legend_icon1:before {
|
||||||
content: "";
|
display: inline-block;
|
||||||
width: 10px;
|
content: '';
|
||||||
height: 10px;
|
width: 10px;
|
||||||
margin-right: 5px;
|
height: 10px;
|
||||||
border-radius: 2px;
|
margin-right: 5px;
|
||||||
background: #73F8E0;
|
border-radius: 2px;
|
||||||
}
|
background: #73f8e0;
|
||||||
.chart_legend_icon2:before {
|
}
|
||||||
display: inline-block;
|
.chart_legend_icon2:before {
|
||||||
content: "";
|
display: inline-block;
|
||||||
width: 10px;
|
content: '';
|
||||||
height: 10px;
|
width: 10px;
|
||||||
margin-right: 5px;
|
height: 10px;
|
||||||
border-radius: 2px;
|
margin-right: 5px;
|
||||||
background: #497EFF;
|
border-radius: 2px;
|
||||||
}
|
background: #497eff;
|
||||||
.chart_legend_icon3 {
|
}
|
||||||
display: inline-block;
|
.chart_legend_icon3 {
|
||||||
width: 8px;
|
display: inline-block;
|
||||||
height: 8px;
|
width: 8px;
|
||||||
margin-right: 8px;
|
height: 8px;
|
||||||
border-radius: 4px;
|
margin-right: 8px;
|
||||||
background: #73F8E0;
|
border-radius: 4px;
|
||||||
position:relative;
|
background: #73f8e0;
|
||||||
}
|
position: relative;
|
||||||
.chart_legend_icon3:before {
|
}
|
||||||
display: inline-block;
|
.chart_legend_icon3:before {
|
||||||
content: "";
|
display: inline-block;
|
||||||
width: 16px;
|
content: '';
|
||||||
height:2px;
|
width: 16px;
|
||||||
background: #73F8E0;
|
height: 2px;
|
||||||
position:absolute;
|
background: #73f8e0;
|
||||||
top:3px;
|
position: absolute;
|
||||||
left:-4px;
|
top: 3px;
|
||||||
}
|
left: -4px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.noData {
|
.noData {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 100px;
|
padding-top: 100px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style>
|
<style>
|
||||||
.qhd-chart-tooltip {
|
.qhd-chart-tooltip {
|
||||||
background: #0a2b4f77 !important;
|
background: #0a2b4f77 !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
backdrop-filter: blur(12px);
|
backdrop-filter: blur(12px);
|
||||||
}
|
}
|
||||||
.qhd-chart-tooltip * {
|
.qhd-chart-tooltip * {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class='title-split'>
|
<div class='title-split'>
|
||||||
<img src="../../../../assets//images/dataBoard/leftbar.png" alt="">
|
<img src="../../../../assets//images/dataBoard/leftbar.png" alt="">
|
||||||
<span class='text'>本日</span>
|
<span class='text'>当日</span>
|
||||||
<img src="../../../../assets//images/dataBoard/rightbar.png" alt="">
|
<img src="../../../../assets//images/dataBoard/rightbar.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div class='data-box'>
|
<div class='data-box'>
|
||||||
@@ -20,11 +20,11 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class='right-data' style="top:15px;">
|
<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?.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>
|
||||||
<div class='right-data' style="top:132px;">
|
<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?.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>
|
</div>
|
||||||
<div class='title-split'>
|
<div class='title-split'>
|
||||||
@@ -43,11 +43,11 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class='right-data' style="top:15px;">
|
<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?.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>
|
||||||
<div class='right-data' style="top:132px;">
|
<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?.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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -155,8 +155,9 @@ export default {
|
|||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
text-shadow: 0px 4px 2px rgba(0,0,0,0.62);
|
text-shadow: 0px 4px 2px rgba(0,0,0,0.62);
|
||||||
|
line-height: 90px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div class='rightBottomBox'>
|
<div class='rightBottomBox'>
|
||||||
<div class='title'>
|
<div class='title'>
|
||||||
<svg-icon icon-class="dataBoard3" class='icon'/>
|
<svg-icon icon-class="dataBoard3" class='icon'/>
|
||||||
<span>本月<span class='dotted'></span>班组生产排名</span>
|
<span>当月<span class='dotted'></span>班组生产排名</span>
|
||||||
</div>
|
</div>
|
||||||
<div class='rankingLeft'>
|
<div class='rankingLeft'>
|
||||||
<div class='rankingLeftTitle'>产量</div>
|
<div class='rankingLeftTitle'>产量</div>
|
||||||
|
|||||||
@@ -21,7 +21,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class='box' style='width: 115px;'>
|
<div class='box' style='width: 115px;'>
|
||||||
<p class='name'>
|
<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/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'>
|
<img v-show='nokSumDet.month < nokSumDet.lastMonth' src="../../../../assets/images/dataBoard/arrDown.png" alt="" width='5' height='15'>
|
||||||
</p>
|
</p>
|
||||||
@@ -29,7 +29,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class='box' style='width: 110px;'>
|
<div class='box' style='width: 110px;'>
|
||||||
<p class='name'>
|
<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/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'>
|
<img v-show='nokSumDet.year < nokSumDet.lastYear' src="../../../../assets/images/dataBoard/arrDown.png" alt="" width='5' height='15'>
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -88,7 +88,32 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {},
|
created() {},
|
||||||
methods: {
|
methods: {
|
||||||
},
|
dataFormSubmit() {
|
||||||
|
this.$refs["dataForm"].validate((valid) => {
|
||||||
|
if (!valid) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// 修改的提交
|
||||||
|
if (this.dataForm.id) {
|
||||||
|
this.urlOptions.updateURL(this.dataForm).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.visible = false;
|
||||||
|
this.$emit("refreshDataList");
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 添加的提交
|
||||||
|
this.urlOptions.createURL(this.dataForm).then(response => {
|
||||||
|
if (response.code === 1001033 || response.code === 1001034) {
|
||||||
|
return this.$modal.msgError(response.msg);
|
||||||
|
}
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.visible = false;
|
||||||
|
this.$emit("refreshDataList");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -120,7 +120,30 @@ export default {
|
|||||||
.label;
|
.label;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
dataFormSubmit() {
|
||||||
|
this.$refs["dataForm"].validate((valid) => {
|
||||||
|
if (!valid) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// 修改的提交
|
||||||
|
if (this.dataForm.id) {
|
||||||
|
this.urlOptions.updateURL(this.dataForm).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.visible = false;
|
||||||
|
this.$emit("refreshDataList");
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 添加的提交
|
||||||
|
this.urlOptions.createURL(this.dataForm).then(response => {
|
||||||
|
console.log('response', response);
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.visible = false;
|
||||||
|
this.$emit("refreshDataList");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -6,65 +6,39 @@
|
|||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<search-bar
|
<search-bar :formConfigs="formConfig" ref="searchBarForm" @select-changed="handleSearchBarChanged"
|
||||||
:formConfigs="formConfig"
|
@headBtnClick="buttonClick" />
|
||||||
ref="searchBarForm"
|
<div v-if="showData.length">
|
||||||
@select-changed="handleSearchBarChanged"
|
<base-table class="right-aside" v-loading="dataListLoading" :table-props="tableProps" :page="1" :limit="999"
|
||||||
@headBtnClick="buttonClick" />
|
:table-data="showData">
|
||||||
<div v-if="showData.length">
|
<method-btn v-if="showData.length" slot="handleBtn" :width="80" label="操作" :method-list="tableBtn"
|
||||||
<base-table
|
@clickBtn="handleClick" />
|
||||||
class="right-aside"
|
</base-table>
|
||||||
v-loading="dataListLoading"
|
<barChart v-for="item in chartData" :key="item.name + 'echart'" style="margin-top: 50px" height="600px"
|
||||||
:table-props="tableProps"
|
:id="item.name + 'echart'" :title="item.name + ' 节拍趋势图'" :bar-data="item" />
|
||||||
:page="1"
|
</div>
|
||||||
:limit="999"
|
<div v-else class="no-data-bg"></div>
|
||||||
:table-data="showData">
|
<base-dialog :dialogTitle="addOrEditTitle" :dialogVisible="addOrUpdateVisible" @cancel="handleCancel"
|
||||||
<method-btn
|
@confirm="handleConfirm" :before-close="handleCancel" close-on-click-modal top="0" width="50%">
|
||||||
v-if="showData.length"
|
<eq-detail ref="eqDetail" />
|
||||||
slot="handleBtn"
|
<slot name="footer">
|
||||||
:width="80"
|
<el-row slot="footer" type="flex" justify="end">
|
||||||
label="操作"
|
<el-col :span="24">
|
||||||
:method-list="tableBtn"
|
<el-button size="small" class="btnTextStyle" @click="handleCancel">
|
||||||
@clickBtn="handleClick" />
|
取消
|
||||||
</base-table>
|
</el-button>
|
||||||
<barChart
|
</el-col>
|
||||||
v-for="item in chartData"
|
</el-row>
|
||||||
:key="item.name + 'echart'"
|
</slot>
|
||||||
style="margin-top: 50px"
|
</base-dialog>
|
||||||
height="600px"
|
</div>
|
||||||
:id="item.name + 'echart'"
|
|
||||||
:title="item.name + ' 节拍趋势图'"
|
|
||||||
:bar-data="item" />
|
|
||||||
</div>
|
|
||||||
<div v-else class="no-data-bg"></div>
|
|
||||||
<base-dialog
|
|
||||||
:dialogTitle="addOrEditTitle"
|
|
||||||
:dialogVisible="addOrUpdateVisible"
|
|
||||||
@cancel="handleCancel"
|
|
||||||
@confirm="handleConfirm"
|
|
||||||
:before-close="handleCancel"
|
|
||||||
close-on-click-modal
|
|
||||||
top="0"
|
|
||||||
width="50%">
|
|
||||||
<eq-detail ref="eqDetail" />
|
|
||||||
<slot name="footer">
|
|
||||||
<el-row slot="footer" type="flex" justify="end">
|
|
||||||
<el-col :span="24">
|
|
||||||
<el-button size="small" class="btnTextStyle" @click="handleCancel">
|
|
||||||
取消
|
|
||||||
</el-button>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</slot>
|
|
||||||
</base-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import eqDetail from './eq-detail';
|
import eqDetail from './eq-detail';
|
||||||
import { parseTime } from '../../mixins/code-filter';
|
import { parseTime } from '../../mixins/code-filter';
|
||||||
import { getPdList } from '@/api/core/monitoring/auto';
|
import { getPLlistByFactory } from '@/api/core/monitoring/auto';
|
||||||
import { getNewCTNow, getNewCTCharts } from '@/api/core/analysis/index';
|
import { getNewCTNow, getNewCTCharts } from '@/api/core/analysis/index';
|
||||||
import { getFactoryPage } from '@/api/core/base/factory';
|
import { getFactoryPage } from '@/api/core/base/factory';
|
||||||
// import codeFilter from '../../mixins/code-filter'
|
// import codeFilter from '../../mixins/code-filter'
|
||||||
@@ -73,230 +47,233 @@ import FileSaver from 'file-saver';
|
|||||||
import barChart from './BarChart.vue';
|
import barChart from './BarChart.vue';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
prop: 'factoryName',
|
prop: 'factoryName',
|
||||||
label: '工厂',
|
label: '工厂',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'lineName',
|
prop: 'lineName',
|
||||||
label: '产线',
|
label: '产线',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'size',
|
prop: 'size',
|
||||||
label: '规格',
|
label: '规格',
|
||||||
showOverflowtooltip: true,
|
showOverflowtooltip: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'process',
|
prop: 'process',
|
||||||
label: '产品工艺',
|
label: '产品工艺',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'edgeCt',
|
prop: 'edgeCt',
|
||||||
label: '磨边当前节拍pcs/min',
|
label: '磨边当前节拍pcs/min',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'temperCt',
|
prop: 'temperCt',
|
||||||
label: '钢化当前节拍pcs/min',
|
label: '钢化当前节拍pcs/min',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'downCt',
|
prop: 'downCt',
|
||||||
label: '下片当前节拍pcs/min',
|
label: '下片当前节拍pcs/min',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
barChart,
|
barChart,
|
||||||
eqDetail,
|
eqDetail,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
getDataListURL: getNewCTNow,
|
getDataListURL: getNewCTNow,
|
||||||
},
|
},
|
||||||
listQuery: {
|
listQuery: {
|
||||||
lineId: [],
|
lineId: [],
|
||||||
},
|
},
|
||||||
fileName: '',
|
fileName: '',
|
||||||
dataListLoading: false,
|
dataListLoading: false,
|
||||||
tableProps,
|
tableProps,
|
||||||
tableBtn: [
|
tableBtn: [
|
||||||
{
|
{
|
||||||
type: 'eq',
|
type: 'eq',
|
||||||
btnName: '详情',
|
btnName: '详情',
|
||||||
},
|
},
|
||||||
].filter((v) => v),
|
].filter((v) => v),
|
||||||
showData: [],
|
showData: [],
|
||||||
tableData: [],
|
tableData: [],
|
||||||
chartData: [],
|
chartData: [],
|
||||||
formConfig: [
|
formConfig: [
|
||||||
{
|
{
|
||||||
type: 'select',
|
type: 'select',
|
||||||
label: '工厂',
|
label: '工厂',
|
||||||
selectOptions: [],
|
selectOptions: [],
|
||||||
param: 'factoryId',
|
param: 'factoryId',
|
||||||
onchange: true,
|
collapseTags: true,
|
||||||
},
|
multiple: true,
|
||||||
{
|
onchange: true,
|
||||||
type: 'select',
|
},
|
||||||
label: '产线',
|
{
|
||||||
selectOptions: [],
|
type: 'select',
|
||||||
param: 'lineId',
|
label: '产线',
|
||||||
multiple: true,
|
selectOptions: [],
|
||||||
},
|
param: 'lineId',
|
||||||
{
|
collapseTags: true,
|
||||||
type: 'datePicker',
|
multiple: true,
|
||||||
label: '时间范围',
|
},
|
||||||
dateType: 'datetimerange',
|
{
|
||||||
format: 'yyyy-MM-dd HH:mm:ss',
|
type: 'datePicker',
|
||||||
valueFormat: 'timestamp',
|
label: '时间范围',
|
||||||
rangeSeparator: '-',
|
dateType: 'datetimerange',
|
||||||
startPlaceholder: '开始时间',
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
endPlaceholder: '结束时间',
|
valueFormat: 'timestamp',
|
||||||
defaultTime: ['00:00:00', '23:59:59'],
|
rangeSeparator: '-',
|
||||||
param: 'timeVal',
|
startPlaceholder: '开始时间',
|
||||||
width: 350,
|
endPlaceholder: '结束时间',
|
||||||
clearable: false,
|
defaultTime: ['00:00:00', '23:59:59'],
|
||||||
},
|
param: 'timeVal',
|
||||||
{
|
width: 350,
|
||||||
type: 'button',
|
clearable: false,
|
||||||
btnName: '查询',
|
},
|
||||||
name: 'search',
|
{
|
||||||
color: 'primary',
|
type: 'button',
|
||||||
},
|
btnName: '查询',
|
||||||
// {
|
name: 'search',
|
||||||
// type: 'separate',
|
color: 'primary',
|
||||||
// },
|
},
|
||||||
// {
|
// {
|
||||||
// // type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
|
// type: 'separate',
|
||||||
// type: 'button',
|
// },
|
||||||
// btnName: '导出',
|
// {
|
||||||
// name: 'export',
|
// // type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
|
||||||
// color: 'warning',
|
// type: 'button',
|
||||||
// },
|
// btnName: '导出',
|
||||||
],
|
// name: 'export',
|
||||||
addOrEditTitle: '',
|
// color: 'warning',
|
||||||
addOrUpdateVisible: false,
|
// },
|
||||||
};
|
],
|
||||||
},
|
addOrEditTitle: '',
|
||||||
created() {
|
addOrUpdateVisible: false,
|
||||||
// 获取当前时间
|
};
|
||||||
const now = new Date();
|
},
|
||||||
// 获取前一天的同一时间
|
created() {
|
||||||
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
|
// 获取当前时间
|
||||||
// 设置为00:00:00
|
const now = new Date();
|
||||||
yesterday.setHours(0, 0, 0, 0);
|
// 获取前一天的同一时间
|
||||||
// 设置为23:59:59
|
const yesterday = new Date(now.getTime());
|
||||||
const end = new Date(yesterday.getTime());
|
// 设置为00:00:00
|
||||||
end.setHours(23, 59, 59, 59);
|
yesterday.setHours(0, 0, 0, 0);
|
||||||
this.listQuery.startTime = yesterday.getTime();
|
// 设置为23:59:59
|
||||||
this.listQuery.endTime = end.getTime();
|
const end = new Date(yesterday.getTime());
|
||||||
this.$nextTick(() => {
|
end.setHours(23, 59, 59, 59);
|
||||||
this.$refs.searchBarForm.formInline.timeVal = [
|
this.listQuery.startTime = yesterday.getTime();
|
||||||
yesterday.getTime(),
|
this.listQuery.endTime = end.getTime();
|
||||||
end.getTime(),
|
this.$nextTick(() => {
|
||||||
];
|
this.$refs.searchBarForm.formInline.timeVal = [
|
||||||
});
|
yesterday.getTime(),
|
||||||
this.getDataList();
|
end.getTime(),
|
||||||
this.getPdLineList();
|
];
|
||||||
},
|
});
|
||||||
methods: {
|
this.getDataList();
|
||||||
handleExport() {
|
this.getPdLineList();
|
||||||
let tables = document.querySelector('.el-table').cloneNode(true);
|
},
|
||||||
const fix = tables.querySelector('.el-table__fixed');
|
methods: {
|
||||||
const fixRight = tables.querySelector('.el-table__fixed-right');
|
handleExport() {
|
||||||
if (fix) {
|
let tables = document.querySelector('.el-table').cloneNode(true);
|
||||||
tables.removeChild(tables.querySelector('.el-table__fixed'));
|
const fix = tables.querySelector('.el-table__fixed');
|
||||||
}
|
const fixRight = tables.querySelector('.el-table__fixed-right');
|
||||||
if (fixRight) {
|
if (fix) {
|
||||||
tables.removeChild(tables.querySelector('.el-table__fixed-right'));
|
tables.removeChild(tables.querySelector('.el-table__fixed'));
|
||||||
}
|
}
|
||||||
let exportTable = XLSX.utils.table_to_book(tables);
|
if (fixRight) {
|
||||||
|
tables.removeChild(tables.querySelector('.el-table__fixed-right'));
|
||||||
|
}
|
||||||
|
let exportTable = XLSX.utils.table_to_book(tables);
|
||||||
|
|
||||||
var exportTableOut = XLSX.write(exportTable, {
|
var exportTableOut = XLSX.write(exportTable, {
|
||||||
bookType: 'xlsx',
|
bookType: 'xlsx',
|
||||||
bookSST: true,
|
bookSST: true,
|
||||||
type: 'array',
|
type: 'array',
|
||||||
});
|
});
|
||||||
// sheetjs.xlsx为导出表格的标题名称
|
// sheetjs.xlsx为导出表格的标题名称
|
||||||
try {
|
try {
|
||||||
FileSaver.saveAs(
|
FileSaver.saveAs(
|
||||||
new Blob([exportTableOut], {
|
new Blob([exportTableOut], {
|
||||||
type: 'application/octet-stream',
|
type: 'application/octet-stream',
|
||||||
}),
|
}),
|
||||||
this.fileName + '产线自动报表.xlsx'
|
this.fileName + '产线自动报表.xlsx'
|
||||||
);
|
);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
if (typeof console !== 'undefined') console.log(e, exportTableOut);
|
if (typeof console !== 'undefined') console.log(e, exportTableOut);
|
||||||
}
|
}
|
||||||
return exportTableOut;
|
return exportTableOut;
|
||||||
},
|
},
|
||||||
getPdLineList() {
|
getPdLineList() {
|
||||||
getPdList().then((res) => {
|
// getPLlistByFactory().then((res) => {
|
||||||
this.formConfig[1].selectOptions = res.data || [];
|
// this.formConfig[1].selectOptions = res.data || [];
|
||||||
});
|
// });
|
||||||
const params = {
|
const params = {
|
||||||
pageSize: 100,
|
pageSize: 100,
|
||||||
pageNo: 1,
|
pageNo: 1,
|
||||||
};
|
};
|
||||||
getFactoryPage(params).then((res) => {
|
getFactoryPage(params).then((res) => {
|
||||||
this.formConfig[0].selectOptions = res.data.list || [];
|
this.formConfig[0].selectOptions = res.data.list || [];
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
switch (val.btnName) {
|
switch (val.btnName) {
|
||||||
case 'search':
|
case 'search':
|
||||||
this.listQuery.factoryId = val.factoryId || undefined;
|
this.listQuery.factoryId = val.factoryId || undefined;
|
||||||
this.listQuery.lineId = val.lineId ? val.lineId : [];
|
this.listQuery.lineId = val.lineId ? val.lineId : [];
|
||||||
this.listQuery.startTime = val.timeVal ? val.timeVal[0] : undefined;
|
this.listQuery.startTime = val.timeVal ? val.timeVal[0] : undefined;
|
||||||
this.listQuery.endTime = val.timeVal ? val.timeVal[1] : undefined;
|
this.listQuery.endTime = val.timeVal ? val.timeVal[1] : undefined;
|
||||||
this.getDataList();
|
this.getDataList();
|
||||||
break;
|
break;
|
||||||
case 'export':
|
case 'export':
|
||||||
this.handleExport();
|
this.handleExport();
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
console.log(val);
|
console.log(val);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 获取数据列表
|
// 获取数据列表
|
||||||
getDataList() {
|
getDataList() {
|
||||||
this.dataListLoading = true;
|
this.dataListLoading = true;
|
||||||
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
|
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
|
||||||
this.tableData = response.data;
|
this.tableData = response.data;
|
||||||
this.dataListLoading = false;
|
this.dataListLoading = false;
|
||||||
this.showData = this.tableData;
|
this.showData = this.tableData;
|
||||||
});
|
});
|
||||||
getNewCTCharts(this.listQuery).then((response) => {
|
getNewCTCharts(this.listQuery).then((response) => {
|
||||||
this.chartData = response.data;
|
this.chartData = response.data;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleSearchBarChanged({ param, value }) {
|
handleSearchBarChanged({ param, value }) {
|
||||||
this.listQuery.lineId = [];
|
this.listQuery.lineId = [];
|
||||||
this.$refs.searchBarForm.formInline.lineId = undefined;
|
this.$refs.searchBarForm.formInline.lineId = undefined;
|
||||||
getPdList(value).then((res) => {
|
getPLlistByFactory({ factoryIds: this.$refs.searchBarForm.formInline.factoryId }).then((res) => {
|
||||||
this.formConfig[1].selectOptions = res.data || [];
|
this.formConfig[1].selectOptions = res.data || [];
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleClick(val) {
|
handleClick(val) {
|
||||||
this.addOrUpdateVisible = true;
|
this.addOrUpdateVisible = true;
|
||||||
this.addOrEditTitle =
|
this.addOrEditTitle =
|
||||||
val.data?.factoryName + '-' + val.data?.lineName + ' 详情';
|
val.data?.factoryName + '-' + val.data?.lineName + ' 详情';
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.eqDetail.init(
|
this.$refs.eqDetail.init(
|
||||||
val.data.lineId,
|
val.data.lineId,
|
||||||
this.listQuery.startTime,
|
this.listQuery.startTime,
|
||||||
this.listQuery.endTime
|
this.listQuery.endTime
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleCancel() {
|
handleCancel() {
|
||||||
this.addOrUpdateVisible = false;
|
this.addOrUpdateVisible = false;
|
||||||
this.addOrEditTitle = '';
|
this.addOrEditTitle = '';
|
||||||
},
|
},
|
||||||
handleConfirm() {
|
handleConfirm() {
|
||||||
this.handleCancel();
|
this.handleCancel();
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -92,6 +92,8 @@ export default {
|
|||||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||||
},
|
},
|
||||||
{ prop: 'name', label: '设备类型名称' },
|
{ prop: 'name', label: '设备类型名称' },
|
||||||
|
{ prop: 'isCraft', label: '是否为生产设备',
|
||||||
|
filter: (val) => val?'是': '否', },
|
||||||
{ prop: 'code', label: '设备类型编码' },
|
{ prop: 'code', label: '设备类型编码' },
|
||||||
{ prop: 'remark', label: '备注' },
|
{ prop: 'remark', label: '备注' },
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -12,19 +12,19 @@
|
|||||||
<el-skeleton v-if="initing" :rows="6" animated />
|
<el-skeleton v-if="initing" :rows="6" animated />
|
||||||
<!-- :span-method="mergeColumnHandler" -->
|
<!-- :span-method="mergeColumnHandler" -->
|
||||||
<div v-else :class="{ 'no-data-bg': !tableData || tableData.length == 0 }">
|
<div v-else :class="{ 'no-data-bg': !tableData || tableData.length == 0 }">
|
||||||
<base-table
|
<base-table
|
||||||
v-if="tableData && tableData.length > 0"
|
v-if="tableData && tableData.length > 0"
|
||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:table-data="tableData"
|
:table-data="tableData"
|
||||||
:max-height="tableH"
|
:max-height="tableH"
|
||||||
@emitFun="handleEmitFun"
|
:span-method="mergeColumnHandler"
|
||||||
/>
|
@emitFun="handleEmitFun" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getPdlDataOneDay } from '@/api/core/monitoring/data24'
|
import { getSectionDataOneDay } from '@/api/core/monitoring/data24';
|
||||||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -34,8 +34,8 @@ export default {
|
|||||||
mixins: [tableHeightMixin],
|
mixins: [tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
getDataListURL: getPdlDataOneDay
|
getDataListURL: getSectionDataOneDay,
|
||||||
},
|
},
|
||||||
initing: false,
|
initing: false,
|
||||||
queryParams: {
|
queryParams: {
|
||||||
@@ -45,6 +45,7 @@ export default {
|
|||||||
list: [],
|
list: [],
|
||||||
arr: [],
|
arr: [],
|
||||||
spanArr: [],
|
spanArr: [],
|
||||||
|
spanArrProLine: [], // 产线合并行数组
|
||||||
timeList: [],
|
timeList: [],
|
||||||
tableData: [],
|
tableData: [],
|
||||||
tableProps: [],
|
tableProps: [],
|
||||||
@@ -58,78 +59,130 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
/** 构建tableProps - 依据第一个元素所提供的信息 */
|
/** 构建tableProps - 依据第一个元素所提供的信息 */
|
||||||
buildProps(plData) {
|
buildProps(plData) {
|
||||||
plData.forEach(item => {
|
this.timeList = []; // 重置避免重复
|
||||||
this.timeList.push(item.name)
|
this.arr = []; // 重置避免重复
|
||||||
})
|
plData.forEach((item) => {
|
||||||
const timeArray = Array.from(new Set(this.timeList))
|
this.timeList.push(item.name);
|
||||||
console.log('nihc', timeArray)
|
});
|
||||||
|
const timeArray = Array.from(new Set(this.timeList));
|
||||||
for (const times of timeArray) {
|
for (const times of timeArray) {
|
||||||
if (times !== '投入数量' && times !== '产出数量' && times !== '报废数量' && times !== '产出面积') {
|
if (!['投入数', '产出数', '报废数量', '报废比例'].includes(times)) {
|
||||||
const subprop = {
|
const subprop = {
|
||||||
label: times.slice(0, 10) + ' ' + times.slice(11),
|
label: `${times.slice(0, 10)} ${times.slice(11)}`,
|
||||||
align: 'center',
|
align: 'center',
|
||||||
children: [
|
children: [
|
||||||
{ prop: times + '_in', label: '投入数量',
|
{
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
|
prop: `${times}_in`,
|
||||||
{ prop: times + '_out', label: '产出数量',
|
label: '投入数',
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
|
filter: (val) => (val != null ? val : '-'),
|
||||||
{ prop: times + '_junk', label: '报废数量',
|
},
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
|
{
|
||||||
{ prop: times + '_area', label: '产出面积',
|
prop: `${times}_out`,
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-'), }
|
label: '产出数',
|
||||||
]
|
filter: (val) => (val != null ? val : '-'),
|
||||||
}
|
},
|
||||||
this.arr.push(subprop)
|
{
|
||||||
|
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 = this.arr
|
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) {
|
||||||
|
spanArr.push(1);
|
||||||
|
} else {
|
||||||
|
if (item === arr[index - 1]) {
|
||||||
|
spanArr[count] += 1;
|
||||||
|
spanArr.push(0);
|
||||||
|
} else {
|
||||||
|
count = index;
|
||||||
|
spanArr.push(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return spanArr;
|
||||||
},
|
},
|
||||||
setRowSpan(arr) {
|
|
||||||
let count = 0
|
|
||||||
arr.forEach((item, index) => {
|
|
||||||
if(index === 0) {
|
|
||||||
this.spanArr.push(1)
|
|
||||||
} else {
|
|
||||||
if (item === arr[index - 1]) {
|
|
||||||
this.spanArr[count] += 1
|
|
||||||
this.spanArr.push(0)
|
|
||||||
} else {
|
|
||||||
count = index
|
|
||||||
this.spanArr.push(1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
console.log('打印数组长度', this.spanArr)
|
|
||||||
},
|
|
||||||
|
|
||||||
/** 把 list 里的数据转换成 tableProps 对应的格式 */
|
/** 把 list 里的数据转换成 tableProps 对应的格式 */
|
||||||
convertList(list) {
|
convertList(list) {
|
||||||
let sectionArr= []
|
this.tableData = []; // 重置避免重复
|
||||||
console.log('打印看下数据list', list)
|
const proLineNames = []; // 存储产线名称用于计算合并
|
||||||
list.forEach((ele, index) => {
|
const specNames = []; // 存储规格名称用于计算合并
|
||||||
let tempData = []
|
|
||||||
ele.data.forEach(item => {
|
list.forEach((ele) => {
|
||||||
item.children.forEach(params => {
|
const tempData = {};
|
||||||
if (params.dynamicName === '投入数量') {
|
// 基础字段赋值
|
||||||
tempData[item.dynamicName + '_in'] = params.dynamicValue
|
tempData.proLineName = ele.proLineName;
|
||||||
} else if (params.dynamicName === '产出数量') {
|
tempData.spec = ele.spec;
|
||||||
tempData[item.dynamicName + '_out'] = params.dynamicValue
|
tempData.sectionName = ele.sectionName;
|
||||||
} else if (params.dynamicName === '报废数量') {
|
tempData.allNum = ele.allNum;
|
||||||
tempData[item.dynamicName + '_junk'] = params.dynamicValue
|
|
||||||
} else {
|
// 动态字段赋值
|
||||||
tempData[item.dynamicName + '_area'] = params.dynamicValue
|
ele.data.forEach((item) => {
|
||||||
}
|
item.children.forEach((params) => {
|
||||||
})
|
const keyMap = {
|
||||||
})
|
'投入数': `${item.dynamicName}_in`,
|
||||||
tempData['proLineName'] = ele.proLineName
|
'产出数': `${item.dynamicName}_out`,
|
||||||
tempData['spec'] = ele.spec
|
'报废数量': `${item.dynamicName}_junk`,
|
||||||
this.tableData.push(tempData)
|
'报废比例': `${item.dynamicName}_area`,
|
||||||
console.log('看看数据', this.tableData, tempData)
|
};
|
||||||
const { proLineName } = tempData
|
const key = keyMap[params.dynamicName];
|
||||||
sectionArr.push(proLineName)
|
if (key) tempData[key] = params.dynamicValue;
|
||||||
})
|
});
|
||||||
this.setRowSpan(sectionArr)
|
});
|
||||||
console.log('工段名称列表', sectionArr)
|
|
||||||
|
this.tableData.push(tempData);
|
||||||
|
proLineNames.push(ele.proLineName);
|
||||||
|
specNames.push(ele.spec);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 计算合并行数组
|
||||||
|
this.spanArrProLine = this.calcRowSpan(proLineNames);
|
||||||
},
|
},
|
||||||
|
|
||||||
buildData(data) {
|
buildData(data) {
|
||||||
@@ -138,38 +191,55 @@ export default {
|
|||||||
|
|
||||||
/** 合并table列的规则 */
|
/** 合并table列的规则 */
|
||||||
mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
|
mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
|
||||||
if (columnIndex == 0) {
|
// 列索引0: 产线列, 列索引1: 产品规格列
|
||||||
if (this.spanArr[rowIndex]) {
|
if (columnIndex === 0) {
|
||||||
return [
|
return {
|
||||||
this.spanArr[rowIndex], // row span
|
rowspan: this.spanArrProLine[rowIndex] || 0,
|
||||||
1, // col span
|
colspan: this.spanArrProLine[rowIndex] ? 1 : 0
|
||||||
];
|
};
|
||||||
} else {
|
|
||||||
return [0, 0];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
if (columnIndex === 1) {
|
||||||
|
return {
|
||||||
|
rowspan: this.spanArrProLine[rowIndex] || 0,
|
||||||
|
colspan: this.spanArrProLine[rowIndex] ? 1 : 0
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// 其他列不合并
|
||||||
|
return { rowspan: 1, colspan: 1 };
|
||||||
},
|
},
|
||||||
|
|
||||||
async getList() {
|
async getList() {
|
||||||
this.urlOptions.getDataListURL().then(res => {
|
this.urlOptions.getDataListURL().then((res) => {
|
||||||
console.log('看看数据', res)
|
console.log('看看数据', res);
|
||||||
this.arr = [
|
this.arr = [
|
||||||
{
|
{
|
||||||
prop: 'proLineName',
|
prop: 'proLineName',
|
||||||
label: '生产线',
|
label: '产线',
|
||||||
fixed: 'left',
|
fixed: 'left',
|
||||||
showOverflowTooltip: true
|
showOverflowTooltip: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'spec',
|
prop: 'spec',
|
||||||
label: '产品规格',
|
label: '产品规格',
|
||||||
fixed: 'left',
|
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.buildProps(res.data.nameData);
|
||||||
this.buildData(res.data.data);
|
this.buildData(res.data.data);
|
||||||
})
|
});
|
||||||
|
|
||||||
// // const data = this.res.data;
|
// // const data = this.res.data;
|
||||||
// // console.log('recent-24', data);
|
// // console.log('recent-24', data);
|
||||||
|
|||||||
@@ -106,7 +106,7 @@
|
|||||||
<span>{{ reportTypeMap[listQuery.reportType] }}</span>
|
<span>{{ reportTypeMap[listQuery.reportType] }}</span>
|
||||||
<span>
|
<span>
|
||||||
{{ parseTime(listQuery.startTime) }} 至{{
|
{{ parseTime(listQuery.startTime) }} 至{{
|
||||||
parseTime(listQuery.endTime) }}
|
parseTime(listQuery.endTime) }}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span class="tip" v-else>生产数据 </span>
|
<span class="tip" v-else>生产数据 </span>
|
||||||
@@ -163,7 +163,7 @@
|
|||||||
<span>{{ reportTypeMap[listQuery.reportType] }}</span>
|
<span>{{ reportTypeMap[listQuery.reportType] }}</span>
|
||||||
<span>
|
<span>
|
||||||
{{ parseTime(listQuery.startTime) }} 至{{
|
{{ parseTime(listQuery.startTime) }} 至{{
|
||||||
parseTime(listQuery.endTime) }}
|
parseTime(listQuery.endTime) }}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span class="tip" v-else>生产数据 </span>
|
<span class="tip" v-else>生产数据 </span>
|
||||||
@@ -190,175 +190,6 @@ import barChart from './BarChart.vue';
|
|||||||
import ButtonNav from '@/components/ButtonNav';
|
import ButtonNav from '@/components/ButtonNav';
|
||||||
import { listData } from '@/api/system/dict/data';
|
import { listData } from '@/api/system/dict/data';
|
||||||
// 表格列配置
|
// 表格列配置
|
||||||
const tableProps = [
|
|
||||||
{
|
|
||||||
prop: 'factoryName',
|
|
||||||
label: '工厂',
|
|
||||||
fixed: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'lineName',
|
|
||||||
label: '产线',
|
|
||||||
fixed: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'sizes',
|
|
||||||
label: '规格',
|
|
||||||
width: 105,
|
|
||||||
showOverflowtooltip: true,
|
|
||||||
fixed: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'process',
|
|
||||||
label: '产品工艺',
|
|
||||||
fixed: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'inputN',
|
|
||||||
label: '投入',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: 'inputNum', label: '投入数量/片' },
|
|
||||||
{
|
|
||||||
prop: 'inputArea',
|
|
||||||
label: '投入面积/m²',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'outputN',
|
|
||||||
label: '产出',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: 'outputNum', label: '产出数量/片' },
|
|
||||||
{
|
|
||||||
prop: 'outputArea',
|
|
||||||
label: '产出面积/㎡',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'lossN',
|
|
||||||
label: '不良',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: 'lossNum', label: '不良数量/片' },
|
|
||||||
{
|
|
||||||
prop: 'lossArea',
|
|
||||||
label: '不良面积/㎡',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'lossRatio',
|
|
||||||
label: '不良率/%',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'outputRatio',
|
|
||||||
label: '投入产出率/%',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'processingRatio',
|
|
||||||
label: '加工成品率/%',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '不良详情',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '原片',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: 'originalLossNum', label: '原片不良/片' },
|
|
||||||
{
|
|
||||||
prop: 'originalLossArea',
|
|
||||||
label: '原片不良/㎡',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '磨边',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: 'edgeLossNum', label: '磨边不良/片' },
|
|
||||||
{
|
|
||||||
prop: 'edgeLossArea',
|
|
||||||
label: '磨边不良/㎡',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '打孔',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: 'drillLossNum', label: '打孔不良/片' },
|
|
||||||
{
|
|
||||||
prop: 'drillLossArea',
|
|
||||||
label: '打孔不良/㎡',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '镀膜',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: 'coatingLossNum', label: '镀膜不良/片' },
|
|
||||||
{
|
|
||||||
prop: 'coatingLossArea',
|
|
||||||
label: '镀膜不良/㎡',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '丝印',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: 'silkLossNum', label: '丝印不良/片' },
|
|
||||||
{
|
|
||||||
prop: 'silkLossArea',
|
|
||||||
label: '丝印不良/㎡',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '钢化',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: 'temperingLossNum', label: '钢化不良/片' },
|
|
||||||
{
|
|
||||||
prop: 'temperingLossArea',
|
|
||||||
label: '钢化不良/㎡',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
|
|
||||||
label: '包装',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: 'packingLossNum', label: '包装不良/片' },
|
|
||||||
{
|
|
||||||
prop: 'packingLossArea',
|
|
||||||
label: '包装不良/㎡',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { barChart, ButtonNav, baseTableS },
|
components: { barChart, ButtonNav, baseTableS },
|
||||||
@@ -372,6 +203,7 @@ export default {
|
|||||||
total: 1,
|
total: 1,
|
||||||
timeType: 1 // 1-当天，2-自定义
|
timeType: 1 // 1-当天，2-自定义
|
||||||
},
|
},
|
||||||
|
isPeriodicReport: false,
|
||||||
reportTypeMap: {
|
reportTypeMap: {
|
||||||
1: '日报',
|
1: '日报',
|
||||||
2: '周报',
|
2: '周报',
|
||||||
@@ -381,9 +213,8 @@ export default {
|
|||||||
activeLabel: 'table', // 当班数据tab
|
activeLabel: 'table', // 当班数据tab
|
||||||
activeLabelDay: 'table', // 当天数据tab
|
activeLabelDay: 'table', // 当天数据tab
|
||||||
fileName: '',
|
fileName: '',
|
||||||
headFormValue:{},
|
headFormValue: {},
|
||||||
dataListLoading: false,
|
dataListLoading: false,
|
||||||
tableProps,
|
|
||||||
factoryColumns: [],
|
factoryColumns: [],
|
||||||
factoryColumnsDay: [],
|
factoryColumnsDay: [],
|
||||||
activeName: 'product',
|
activeName: 'product',
|
||||||
@@ -511,6 +342,184 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
tableProps() {
|
||||||
|
const props = [
|
||||||
|
{
|
||||||
|
prop: 'factoryName',
|
||||||
|
label: '工厂',
|
||||||
|
fixed: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineName',
|
||||||
|
label: '产线',
|
||||||
|
fixed: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'sizes',
|
||||||
|
label: '规格',
|
||||||
|
width: 105,
|
||||||
|
showOverflowtooltip: true,
|
||||||
|
fixed: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'process',
|
||||||
|
label: '产品工艺',
|
||||||
|
fixed: true
|
||||||
|
},
|
||||||
|
(this.isPeriodicReport ? {
|
||||||
|
prop: 'reportDate',
|
||||||
|
label: '日期',
|
||||||
|
fixed: true,
|
||||||
|
width: 120
|
||||||
|
} : ''),
|
||||||
|
{
|
||||||
|
prop: 'inputN',
|
||||||
|
label: '投入',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: 'inputNum', label: '投入数量/片' },
|
||||||
|
{
|
||||||
|
prop: 'inputArea',
|
||||||
|
label: '投入面积/m²',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'outputN',
|
||||||
|
label: '产出',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: 'outputNum', label: '产出数量/片' },
|
||||||
|
{
|
||||||
|
prop: 'outputArea',
|
||||||
|
label: '产出面积/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lossN',
|
||||||
|
label: '不良',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: 'lossNum', label: '不良数量/片' },
|
||||||
|
{
|
||||||
|
prop: 'lossArea',
|
||||||
|
label: '不良面积/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lossRatio',
|
||||||
|
label: '不良率/%',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'outputRatio',
|
||||||
|
label: '投入产出率/%',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'processingRatio',
|
||||||
|
label: '加工成品率/%',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '不良详情',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
label: '原片',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: 'originalLossNum', label: '原片不良/片' },
|
||||||
|
{
|
||||||
|
prop: 'originalLossArea',
|
||||||
|
label: '原片不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '磨边',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: 'edgeLossNum', label: '磨边不良/片' },
|
||||||
|
{
|
||||||
|
prop: 'edgeLossArea',
|
||||||
|
label: '磨边不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '打孔',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: 'drillLossNum', label: '打孔不良/片' },
|
||||||
|
{
|
||||||
|
prop: 'drillLossArea',
|
||||||
|
label: '打孔不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '镀膜',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: 'coatingLossNum', label: '镀膜不良/片' },
|
||||||
|
{
|
||||||
|
prop: 'coatingLossArea',
|
||||||
|
label: '镀膜不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '丝印',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: 'silkLossNum', label: '丝印不良/片' },
|
||||||
|
{
|
||||||
|
prop: 'silkLossArea',
|
||||||
|
label: '丝印不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '钢化',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: 'temperingLossNum', label: '钢化不良/片' },
|
||||||
|
{
|
||||||
|
prop: 'temperingLossArea',
|
||||||
|
label: '钢化不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
|
||||||
|
label: '包装',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: 'packingLossNum', label: '包装不良/片' },
|
||||||
|
{
|
||||||
|
prop: 'packingLossArea',
|
||||||
|
label: '包装不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
return props
|
||||||
|
},
|
||||||
productTableProps() {
|
productTableProps() {
|
||||||
// 当班数据的完整表头（基础列 + 当班动态表头）
|
// 当班数据的完整表头（基础列 + 当班动态表头）
|
||||||
const baseColumns = [
|
const baseColumns = [
|
||||||
@@ -530,14 +539,20 @@ export default {
|
|||||||
prop: 'processType',
|
prop: 'processType',
|
||||||
label: '产品类型',
|
label: '产品类型',
|
||||||
filter: (val) => (val === 1 ? '面板' : '背板'),
|
filter: (val) => (val === 1 ? '面板' : '背板'),
|
||||||
fixed: true,
|
|
||||||
sortable: true,
|
sortable: true,
|
||||||
|
fixed: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'factoryName',
|
prop: 'factoryName',
|
||||||
label: '工厂',
|
label: '工厂',
|
||||||
fixed: true
|
fixed: true
|
||||||
}
|
},
|
||||||
|
(this.isPeriodicReport ? {
|
||||||
|
prop: 'reportDate',
|
||||||
|
label: '日期',
|
||||||
|
fixed: true,
|
||||||
|
width: 120
|
||||||
|
} : ''),
|
||||||
];
|
];
|
||||||
return [...baseColumns, ...this.factoryColumns];
|
return [...baseColumns, ...this.factoryColumns];
|
||||||
},
|
},
|
||||||
@@ -559,7 +574,7 @@ export default {
|
|||||||
{
|
{
|
||||||
prop: 'processType',
|
prop: 'processType',
|
||||||
label: '产品类型',
|
label: '产品类型',
|
||||||
filter: (val) => (val === 1 ? '面板' : '背板'),
|
filter: (val) => (val != 1 ? '面板' : '背板'),
|
||||||
sortable: true,
|
sortable: true,
|
||||||
fixed: true
|
fixed: true
|
||||||
},
|
},
|
||||||
@@ -567,7 +582,13 @@ export default {
|
|||||||
prop: 'factoryName',
|
prop: 'factoryName',
|
||||||
label: '工厂',
|
label: '工厂',
|
||||||
fixed: true
|
fixed: true
|
||||||
}
|
},
|
||||||
|
(this.isPeriodicReport ? {
|
||||||
|
prop: 'reportDate',
|
||||||
|
label: '日期',
|
||||||
|
fixed: true,
|
||||||
|
width: 120
|
||||||
|
} : ''),
|
||||||
];
|
];
|
||||||
return [...baseColumns, ...this.factoryColumnsDay];
|
return [...baseColumns, ...this.factoryColumnsDay];
|
||||||
}
|
}
|
||||||
@@ -704,94 +725,157 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// 导出表格
|
// 导出表格（改为async方法，支持await调用）
|
||||||
handleExport() {
|
async handleExport() {
|
||||||
// 按产线监控
|
// 按产线监控
|
||||||
if (this.activeName === 'productLine') {
|
if (this.activeName === 'productLine') {
|
||||||
if (this.listQuery.timeType === 1) {
|
if (this.listQuery.timeType === 1) {
|
||||||
// 产线-当天：导出当班 + 当天两个表格（自定义汇总文件名）
|
// 产线-当天：导出当班 + 当天两个表格（自定义汇总文件名）
|
||||||
this.exportMultipleTables([
|
await this.exportMultipleTables([
|
||||||
{ ref: 'lineCurrentShiftTable', name: '产线监控_当班数据' },
|
{ ref: 'lineCurrentShiftTable', name: '产线监控_当班数据' },
|
||||||
{ ref: 'lineTodayTable', name: '产线监控_当天数据' }
|
{ ref: 'lineTodayTable', name: '产线监控_当天数据' }
|
||||||
], '产线监控_当班及当天数据汇总'); // 传入自定义汇总文件名
|
], '产线监控_当班及当天数据汇总'); // 传入自定义汇总文件名
|
||||||
} else if (this.listQuery.timeType === 1) {
|
} else if (this.listQuery.timeType === 3) {
|
||||||
// 产线-当天：导出当班 + 当天两个表格（自定义汇总文件名）
|
// 修复：注释错误，原为“产线-当天”，实际是“产线-上一班”
|
||||||
this.exportMultipleTables([
|
// 产线-上一班：导出单个表格
|
||||||
{ ref: 'lineCurrentShiftTable', name: '产线监控_上一班数据' },
|
await this.exportSingleTable('lineCustomTable', '产线监控_上一班时间数据');
|
||||||
{ ref: 'lineTodayTable', name: '产线监控_当天数据' }
|
|
||||||
], '产线监控_当班及当天数据汇总'); // 传入自定义汇总文件名
|
|
||||||
} else {
|
} else {
|
||||||
// 产线-自定义：导出一个表格（自定义文件名）
|
// 产线-自定义：导出一个表格（自定义文件名）
|
||||||
this.exportSingleTable('lineCustomTable', '产线监控_自定义时间数据');
|
await this.exportSingleTable('lineCustomTable', '产线监控_自定义时间数据');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 按产品监控
|
// 按产品监控
|
||||||
else {
|
else {
|
||||||
if (this.listQuery.timeType === 1) {
|
if (this.listQuery.timeType === 1) {
|
||||||
// 产品-当天：导出当班 + 当天两个表格（自定义汇总文件名）
|
// 产品-当天：导出当班 + 当天两个表格（自定义汇总文件名）
|
||||||
this.exportMultipleTables([
|
await this.exportMultipleTables([
|
||||||
{ ref: 'productCurrentShiftTable', name: '产品监控_当班数据' },
|
{ ref: 'productCurrentShiftTable', name: '产品监控_当班数据' },
|
||||||
{ ref: 'productTodayTable', name: '产品监控_当天数据' }
|
{ ref: 'productCurrentShiftTable', name: '产品监控_当天数据' }
|
||||||
], '产品监控_当班及当天数据汇总'); // 传入自定义汇总文件名
|
], '产品监控_当班及当天数据汇总'); // 传入自定义汇总文件名
|
||||||
|
} else if (this.listQuery.timeType === 3) {
|
||||||
|
// 修复：注释错误，原为“产线-当天”，实际是“产品-上一班”
|
||||||
|
// 产品-上一班：导出单个表格
|
||||||
|
await this.exportSingleTable('productCustomTable', '产品监控_上一班时间数据');
|
||||||
} else {
|
} else {
|
||||||
// 产品-自定义：导出一个表格（自定义文件名）
|
// 产品-自定义：导出一个表格（自定义文件名）
|
||||||
this.exportSingleTable('productCustomTable', '产品监控_自定义时间数据');
|
await this.exportSingleTable('productCustomTable', '产品监控_自定义时间数据');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// 导出单个表格（保持原有逻辑，文件名由调用方传入，已区分不同场景）
|
// 导出单个表格（改为async方法，使用await获取DOM）
|
||||||
exportSingleTable(refName, fileName) {
|
async exportSingleTable(refName, fileName) {
|
||||||
const table = this.getTableDom(refName);
|
try {
|
||||||
if (!table) return;
|
// 关键修复：使用await等待getTableDom返回DOM元素（而非Promise）
|
||||||
|
const table = await this.getTableDom(refName);
|
||||||
|
if (!table) {
|
||||||
|
this.$message.warning(`无法导出：${refName}表格DOM获取失败`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const clonedTable = table.cloneNode(true);
|
// 确认table是原生DOM元素后再调用cloneNode
|
||||||
this.adjustTableForExport(clonedTable);
|
if (!(table instanceof HTMLElement)) {
|
||||||
|
this.$message.error(`无法导出：${refName}表格不是合法的DOM元素`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const workbook = XLSX.utils.table_to_book(clonedTable);
|
|
||||||
const fullName = `${fileName}_${this.formatDate()}.xlsx`;
|
|
||||||
XLSX.writeFile(workbook, fullName);
|
|
||||||
},
|
|
||||||
|
|
||||||
// 导出多个表格（新增自定义汇总文件名参数，适配不同选项卡）
|
|
||||||
exportMultipleTables(tables, customSummaryName) {
|
|
||||||
const workbook = XLSX.utils.book_new();
|
|
||||||
let hasValidTable = false;
|
|
||||||
|
|
||||||
tables.forEach(({ ref, name }) => {
|
|
||||||
const table = this.getTableDom(ref);
|
|
||||||
if (!table) return;
|
|
||||||
|
|
||||||
hasValidTable = true;
|
|
||||||
const clonedTable = table.cloneNode(true);
|
const clonedTable = table.cloneNode(true);
|
||||||
this.adjustTableForExport(clonedTable);
|
this.adjustTableForExport(clonedTable);
|
||||||
|
|
||||||
const worksheet = XLSX.utils.table_to_sheet(clonedTable);
|
const workbook = XLSX.utils.table_to_book(clonedTable);
|
||||||
XLSX.utils.book_append_sheet(workbook, worksheet, name);
|
const fullName = `${fileName}_${this.formatDate()}.xlsx`;
|
||||||
});
|
XLSX.writeFile(workbook, fullName);
|
||||||
|
} catch (error) {
|
||||||
if (!hasValidTable) {
|
this.$message.error(`导出表格失败：${error.message}`);
|
||||||
this.$message.warning('未找到有效表格数据');
|
console.error('单个表格导出错误：', error);
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 动态生成汇总文件名：自定义名称 + 日期
|
|
||||||
const fullName = `${customSummaryName}_${this.formatDate()}.xlsx`;
|
|
||||||
XLSX.writeFile(workbook, fullName);
|
|
||||||
},
|
},
|
||||||
// 辅助方法：获取表格DOM元素（包含表头）
|
|
||||||
getTableDom(refName) {
|
// 导出多个表格（改为async方法，使用await获取DOM）
|
||||||
const tableComponent = this.$refs[refName];
|
async exportMultipleTables(tables, customSummaryName) {
|
||||||
if (!tableComponent) {
|
try {
|
||||||
this.$message.warning(`未找到${refName}表格`);
|
const workbook = XLSX.utils.book_new();
|
||||||
return null;
|
let hasValidTable = false;
|
||||||
|
|
||||||
|
// 遍历表格配置，使用await获取每个表格的DOM
|
||||||
|
for (const { ref, name } of tables) { // 改用for...of循环，支持await
|
||||||
|
const table = await this.getTableDom(ref);
|
||||||
|
if (!table) {
|
||||||
|
this.$message.warning(`${ref}表格DOM获取失败，跳过该表格`);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确认table是原生DOM元素
|
||||||
|
if (!(table instanceof HTMLElement)) {
|
||||||
|
this.$message.warning(`${ref}表格不是合法的DOM元素，跳过该表格`);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
hasValidTable = true;
|
||||||
|
const clonedTable = table.cloneNode(true);
|
||||||
|
this.adjustTableForExport(clonedTable);
|
||||||
|
|
||||||
|
const worksheet = XLSX.utils.table_to_sheet(clonedTable);
|
||||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, name);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!hasValidTable) {
|
||||||
|
this.$message.warning('未找到有效表格数据，导出失败');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 动态生成汇总文件名：自定义名称 + 日期
|
||||||
|
const fullName = `${customSummaryName}_${this.formatDate()}.xlsx`;
|
||||||
|
XLSX.writeFile(workbook, fullName);
|
||||||
|
} catch (error) {
|
||||||
|
this.$message.error(`导出多个表格失败：${error.message}`);
|
||||||
|
console.error('多个表格导出错误：', error);
|
||||||
}
|
}
|
||||||
// 获取完整表格容器（包含表头和表体）
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取表格DOM元素（支持异步重试）
|
||||||
|
* @param {string} refName - 表格的ref名称
|
||||||
|
* @param {number} retryCount - 当前重试次数（内部使用，外部调用无需传参）
|
||||||
|
* @returns {Promise<HTMLElement|null>} 表格DOM元素Promise
|
||||||
|
*/
|
||||||
|
async getTableDom(refName, retryCount = 0) {
|
||||||
|
// 1. 配置常量，便于维护
|
||||||
|
const maxRetry = 5; // 最大重试次数
|
||||||
|
const retryDelay = 300; // 每次重试延迟时间(ms)
|
||||||
|
|
||||||
|
// 2. 设置激活标签，确保重试时也能执行该逻辑
|
||||||
|
this.activeLabel = 'table';
|
||||||
|
this.activeLabelDay = 'table';
|
||||||
|
// 若需调试，可保留日志
|
||||||
|
// console.log(`[getTableDom-${refName}] activeLabel:`, this.activeLabel, 'activeLabelDay:', this.activeLabelDay);
|
||||||
|
|
||||||
|
// 3. 获取表格组件
|
||||||
|
const tableComponent = this.$refs[refName];
|
||||||
|
|
||||||
|
// 4. 表格组件不存在时，处理重试逻辑
|
||||||
|
if (!tableComponent) {
|
||||||
|
// 达到最大重试次数，返回失败
|
||||||
|
if (retryCount >= maxRetry) {
|
||||||
|
this.$message.warning(`未找到${refName}表格，已达到最大重试次数（${maxRetry}次）`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 未达到最大重试次数，延迟后重试
|
||||||
|
this.$message.warning(`未找到${refName}表格，将进行第${retryCount + 1}次重试...`);
|
||||||
|
await new Promise(resolve => setTimeout(resolve, retryDelay));
|
||||||
|
// 递归调用并返回结果
|
||||||
|
return this.getTableDom(refName, retryCount + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 5. 获取完整表格容器（包含表头和表体）
|
||||||
const tableContainer = tableComponent.$el.querySelector('.el-table');
|
const tableContainer = tableComponent.$el.querySelector('.el-table');
|
||||||
if (!tableContainer) {
|
if (!tableContainer) {
|
||||||
this.$message.warning(`${refName}表格数据为空`);
|
this.$message.warning(`${refName}表格容器不存在（可能表格数据为空）`);
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 6. 成功获取表格DOM，返回结果
|
||||||
return tableContainer;
|
return tableContainer;
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -856,7 +940,7 @@ export default {
|
|||||||
if (mainTable && allHeaderRows.length > 0) {
|
if (mainTable && allHeaderRows.length > 0) {
|
||||||
const newThead = document.createElement('thead');
|
const newThead = document.createElement('thead');
|
||||||
// 按层级添加表头行
|
// 按层级添加表头行
|
||||||
allHeaderRows.forEach(cells => {
|
allHeaderRows.forEach((cells, rowIndex) => {
|
||||||
const newTr = document.createElement('tr');
|
const newTr = document.createElement('tr');
|
||||||
cells.forEach(cell => {
|
cells.forEach(cell => {
|
||||||
// 复制单元格（避免DOM残留引用问题）
|
// 复制单元格（避免DOM残留引用问题）
|
||||||
@@ -867,6 +951,18 @@ export default {
|
|||||||
});
|
});
|
||||||
// 将新表头插入主表体最前面
|
// 将新表头插入主表体最前面
|
||||||
mainTable.insertBefore(newThead, mainTable.firstChild);
|
mainTable.insertBefore(newThead, mainTable.firstChild);
|
||||||
|
|
||||||
|
// ================ 新增：修改第一列表头为“序号” ================
|
||||||
|
// 找到第一层级的第一个表头单元格（<th>）
|
||||||
|
const firstHeaderCell = newThead.querySelector('tr:first-child th:first-child');
|
||||||
|
if (firstHeaderCell) {
|
||||||
|
// 清空原有内容，设置为“序号”
|
||||||
|
firstHeaderCell.innerHTML = ''; // 清空原有内容（包括子元素）
|
||||||
|
firstHeaderCell.textContent = '序号'; // 设置纯文本“序号”（更稳定）
|
||||||
|
// 可选：添加样式（如居中，根据需求调整）
|
||||||
|
// firstHeaderCell.style.textAlign = 'center';
|
||||||
|
}
|
||||||
|
// =============================================================
|
||||||
}
|
}
|
||||||
|
|
||||||
// 7. 合并固定列数据到主表体（仅处理tbody数据）
|
// 7. 合并固定列数据到主表体（仅处理tbody数据）
|
||||||
@@ -897,6 +993,23 @@ export default {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ================ 可选优化：为tbody第一列添加序号数字 ================
|
||||||
|
// 如果表格体的第一列原本无数据，可补充1、2、3...的序号
|
||||||
|
if (mainTable) {
|
||||||
|
const tbodyRows = mainTable.querySelectorAll('tbody tr');
|
||||||
|
tbodyRows.forEach((row, index) => {
|
||||||
|
const firstTd = row.querySelector('td:first-child');
|
||||||
|
if (firstTd) {
|
||||||
|
// 清空原有内容，设置为序号（index+1，因为索引从0开始）
|
||||||
|
firstTd.innerHTML = '';
|
||||||
|
firstTd.textContent = index + 1;
|
||||||
|
// 可选：居中显示
|
||||||
|
// firstTd.style.textAlign = 'center';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// =============================================================
|
||||||
},
|
},
|
||||||
|
|
||||||
// 辅助方法：格式化日期（用于文件名）
|
// 辅助方法：格式化日期（用于文件名）
|
||||||
@@ -913,7 +1026,7 @@ export default {
|
|||||||
// 获取产线和工厂列表
|
// 获取产线和工厂列表
|
||||||
getPdLineList() {
|
getPdLineList() {
|
||||||
getPLlistByFactory({
|
getPLlistByFactory({
|
||||||
factoryIds:this.listQuery.factoryIds
|
factoryIds: this.listQuery.factoryIds
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
this.formConfig[3].selectOptions = res.data || [];
|
this.formConfig[3].selectOptions = res.data || [];
|
||||||
});
|
});
|
||||||
@@ -1517,6 +1630,7 @@ export default {
|
|||||||
// 搜索栏下拉选择变化
|
// 搜索栏下拉选择变化
|
||||||
handleSearchBarChanged({ param, value }) {
|
handleSearchBarChanged({ param, value }) {
|
||||||
if (param === 'timeType') {
|
if (param === 'timeType') {
|
||||||
|
this.isPeriodicReport = false
|
||||||
this.tableData2 = []
|
this.tableData2 = []
|
||||||
this.tableDataCustom = []
|
this.tableDataCustom = []
|
||||||
this.tableData = []
|
this.tableData = []
|
||||||
@@ -1584,15 +1698,59 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
} else if (param === 'searchType') {
|
} else if (param === 'searchType') {
|
||||||
|
this.isPeriodicReport = value === 2;
|
||||||
|
if (this.$refs.searchBarForm && this.$refs.searchBarForm.formInline) {
|
||||||
|
const formInline = this.$refs.searchBarForm.formInline;
|
||||||
|
formInline.reportType = ''
|
||||||
|
// 精准判断：只有字段存在时，才置为undefined（不存在则不处理）
|
||||||
|
if ('timeVal' in formInline) {
|
||||||
|
formInline.timeVal = undefined;
|
||||||
|
}
|
||||||
|
if ('timeValWeek' in formInline) {
|
||||||
|
formInline.timeValWeek = undefined;
|
||||||
|
}
|
||||||
|
if ('timeValMonth' in formInline) {
|
||||||
|
formInline.timeValMonth = undefined;
|
||||||
|
}
|
||||||
|
if ('timeValYear' in formInline) {
|
||||||
|
formInline.timeValYear = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// const formInline = this.$refs.searchBarForm.formInline;
|
||||||
|
this.listQuery.startTime = undefined
|
||||||
|
this.listQuery.endTime = undefined
|
||||||
|
console.log(this.listQuery, 'list');
|
||||||
if (value === 1) {
|
if (value === 1) {
|
||||||
// 统计数据：显示时间范围，隐藏报表类型
|
// 统计数据：显示时间范围，隐藏报表类型
|
||||||
this.formConfig[7].type = 'datePicker';
|
this.formConfig[7] = {
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '时间范围',
|
||||||
|
dateType: 'datetimerange',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'timestamp',
|
||||||
|
rangeSeparator: '-',
|
||||||
|
startPlaceholder: '开始时间',
|
||||||
|
endPlaceholder: '结束时间',
|
||||||
|
param: 'timeVal',
|
||||||
|
width: 350
|
||||||
|
};
|
||||||
this.formConfig[6].type = '';
|
this.formConfig[6].type = '';
|
||||||
this.$refs.searchBarForm.formInline.timeVal = undefined;
|
|
||||||
} else {
|
} else {
|
||||||
// 周期性报表：显示报表类型，隐藏时间范围
|
// 周期性报表：显示报表类型，隐藏时间范围
|
||||||
this.formConfig[6].type = 'select';
|
this.formConfig[6].type = 'select';
|
||||||
this.formConfig[7].type = 'datePicker';
|
this.formConfig[7] = {
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '时间范围',
|
||||||
|
dateType: 'datetimerange',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'timestamp',
|
||||||
|
rangeSeparator: '-',
|
||||||
|
startPlaceholder: '开始时间',
|
||||||
|
endPlaceholder: '结束时间',
|
||||||
|
param: 'timeVal',
|
||||||
|
width: 350
|
||||||
|
};
|
||||||
}
|
}
|
||||||
} else if (param === 'reportType') {
|
} else if (param === 'reportType') {
|
||||||
if (this.$refs.searchBarForm && this.$refs.searchBarForm.formInline) {
|
if (this.$refs.searchBarForm && this.$refs.searchBarForm.formInline) {
|
||||||
@@ -1671,7 +1829,7 @@ export default {
|
|||||||
this.listQuery.lineId = [];
|
this.listQuery.lineId = [];
|
||||||
this.$refs.searchBarForm.formInline.lineId = undefined;
|
this.$refs.searchBarForm.formInline.lineId = undefined;
|
||||||
getPLlistByFactory({
|
getPLlistByFactory({
|
||||||
factoryIds:value
|
factoryIds: value
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
this.formConfig[3].selectOptions = res.data || [];
|
this.formConfig[3].selectOptions = res.data || [];
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -190,176 +190,6 @@ import barChart from './BarChart.vue';
|
|||||||
import ButtonNav from '@/components/ButtonNav';
|
import ButtonNav from '@/components/ButtonNav';
|
||||||
import { listData } from '@/api/system/dict/data';
|
import { listData } from '@/api/system/dict/data';
|
||||||
// 表格列配置
|
// 表格列配置
|
||||||
const tableProps = [
|
|
||||||
{
|
|
||||||
prop: 'factoryName',
|
|
||||||
label: '工厂',
|
|
||||||
fixed: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'lineName',
|
|
||||||
label: '产线',
|
|
||||||
fixed: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'sizes',
|
|
||||||
label: '规格',
|
|
||||||
width: 105,
|
|
||||||
showOverflowtooltip: true,
|
|
||||||
fixed: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'process',
|
|
||||||
label: '产品工艺',
|
|
||||||
fixed: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'inputN',
|
|
||||||
label: '投入',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: 'inputNum', label: '投入数量/片' },
|
|
||||||
{
|
|
||||||
prop: 'inputArea',
|
|
||||||
label: '投入面积/m²',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'outputN',
|
|
||||||
label: '产出',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: 'outputNum', label: '产出数量/片' },
|
|
||||||
{
|
|
||||||
prop: 'outputArea',
|
|
||||||
label: '产出面积/㎡',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'lossN',
|
|
||||||
label: '不良',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: 'lossNum', label: '不良数量/片' },
|
|
||||||
{
|
|
||||||
prop: 'lossArea',
|
|
||||||
label: '不良面积/㎡',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'lossRatio',
|
|
||||||
label: '不良率/%',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'outputRatio',
|
|
||||||
label: '投入产出率/%',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'processingRatio',
|
|
||||||
label: '加工成品率/%',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '不良详情',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '原片',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: 'originalLossNum', label: '原片不良/片' },
|
|
||||||
{
|
|
||||||
prop: 'originalLossArea',
|
|
||||||
label: '原片不良/㎡',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '磨边',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: 'edgeLossNum', label: '磨边不良/片' },
|
|
||||||
{
|
|
||||||
prop: 'edgeLossArea',
|
|
||||||
label: '磨边不良/㎡',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '打孔',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: 'drillLossNum', label: '打孔不良/片' },
|
|
||||||
{
|
|
||||||
prop: 'drillLossArea',
|
|
||||||
label: '打孔不良/㎡',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '镀膜',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: 'coatingLossNum', label: '镀膜不良/片' },
|
|
||||||
{
|
|
||||||
prop: 'coatingLossArea',
|
|
||||||
label: '镀膜不良/㎡',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '丝印',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: 'silkLossNum', label: '丝印不良/片' },
|
|
||||||
{
|
|
||||||
prop: 'silkLossArea',
|
|
||||||
label: '丝印不良/㎡',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '钢化',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: 'temperingLossNum', label: '钢化不良/片' },
|
|
||||||
{
|
|
||||||
prop: 'temperingLossArea',
|
|
||||||
label: '钢化不良/㎡',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
|
|
||||||
label: '包装',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: 'packingLossNum', label: '包装不良/片' },
|
|
||||||
{
|
|
||||||
prop: 'packingLossArea',
|
|
||||||
label: '包装不良/㎡',
|
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { barChart, ButtonNav, baseTableS },
|
components: { barChart, ButtonNav, baseTableS },
|
||||||
data() {
|
data() {
|
||||||
@@ -382,13 +212,13 @@ export default {
|
|||||||
activeLabelDay: 'table', // 当天数据tab
|
activeLabelDay: 'table', // 当天数据tab
|
||||||
fileName: '',
|
fileName: '',
|
||||||
dataListLoading: false,
|
dataListLoading: false,
|
||||||
tableProps,
|
|
||||||
factoryColumns: [],
|
factoryColumns: [],
|
||||||
factoryColumnsDay: [],
|
factoryColumnsDay: [],
|
||||||
activeName: 'product',
|
activeName: 'product',
|
||||||
headFormValue: {},
|
headFormValue: {},
|
||||||
tableBtn: [],
|
tableBtn: [],
|
||||||
showData: [],
|
showData: [],
|
||||||
|
isPeriodicReport: false,
|
||||||
tableData: [],
|
tableData: [],
|
||||||
tableData2: [], // 示例数据，实际从接口获取
|
tableData2: [], // 示例数据，实际从接口获取
|
||||||
productTableData: [],
|
productTableData: [],
|
||||||
@@ -506,6 +336,184 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
tableProps() {
|
||||||
|
const props = [
|
||||||
|
{
|
||||||
|
prop: 'factoryName',
|
||||||
|
label: '工厂',
|
||||||
|
fixed: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineName',
|
||||||
|
label: '产线',
|
||||||
|
fixed: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'sizes',
|
||||||
|
label: '规格',
|
||||||
|
width: 105,
|
||||||
|
showOverflowtooltip: true,
|
||||||
|
fixed: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'process',
|
||||||
|
label: '产品工艺',
|
||||||
|
fixed: true
|
||||||
|
},
|
||||||
|
(this.isPeriodicReport ? {
|
||||||
|
prop: 'reportDate',
|
||||||
|
label: '日期',
|
||||||
|
fixed: true,
|
||||||
|
width: 120
|
||||||
|
} : ''),
|
||||||
|
{
|
||||||
|
prop: 'inputN',
|
||||||
|
label: '投入',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: 'inputNum', label: '投入数量/片' },
|
||||||
|
{
|
||||||
|
prop: 'inputArea',
|
||||||
|
label: '投入面积/m²',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'outputN',
|
||||||
|
label: '产出',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: 'outputNum', label: '产出数量/片' },
|
||||||
|
{
|
||||||
|
prop: 'outputArea',
|
||||||
|
label: '产出面积/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lossN',
|
||||||
|
label: '不良',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: 'lossNum', label: '不良数量/片' },
|
||||||
|
{
|
||||||
|
prop: 'lossArea',
|
||||||
|
label: '不良面积/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lossRatio',
|
||||||
|
label: '不良率/%',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'outputRatio',
|
||||||
|
label: '投入产出率/%',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'processingRatio',
|
||||||
|
label: '加工成品率/%',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '不良详情',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
label: '原片',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: 'originalLossNum', label: '原片不良/片' },
|
||||||
|
{
|
||||||
|
prop: 'originalLossArea',
|
||||||
|
label: '原片不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '磨边',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: 'edgeLossNum', label: '磨边不良/片' },
|
||||||
|
{
|
||||||
|
prop: 'edgeLossArea',
|
||||||
|
label: '磨边不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '打孔',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: 'drillLossNum', label: '打孔不良/片' },
|
||||||
|
{
|
||||||
|
prop: 'drillLossArea',
|
||||||
|
label: '打孔不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '镀膜',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: 'coatingLossNum', label: '镀膜不良/片' },
|
||||||
|
{
|
||||||
|
prop: 'coatingLossArea',
|
||||||
|
label: '镀膜不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '丝印',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: 'silkLossNum', label: '丝印不良/片' },
|
||||||
|
{
|
||||||
|
prop: 'silkLossArea',
|
||||||
|
label: '丝印不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '钢化',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: 'temperingLossNum', label: '钢化不良/片' },
|
||||||
|
{
|
||||||
|
prop: 'temperingLossArea',
|
||||||
|
label: '钢化不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
|
||||||
|
label: '包装',
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: 'packingLossNum', label: '包装不良/片' },
|
||||||
|
{
|
||||||
|
prop: 'packingLossArea',
|
||||||
|
label: '包装不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
return props
|
||||||
|
},
|
||||||
productTableProps() {
|
productTableProps() {
|
||||||
// 当班数据的完整表头（基础列 + 当班动态表头）
|
// 当班数据的完整表头（基础列 + 当班动态表头）
|
||||||
const baseColumns = [
|
const baseColumns = [
|
||||||
@@ -532,7 +540,13 @@ export default {
|
|||||||
prop: 'factoryName',
|
prop: 'factoryName',
|
||||||
label: '工厂',
|
label: '工厂',
|
||||||
fixed: true
|
fixed: true
|
||||||
}
|
},
|
||||||
|
(this.isPeriodicReport ? {
|
||||||
|
prop: 'reportDate',
|
||||||
|
label: '日期',
|
||||||
|
fixed: true,
|
||||||
|
width: 120
|
||||||
|
} : ''),
|
||||||
];
|
];
|
||||||
return [...baseColumns, ...this.factoryColumns];
|
return [...baseColumns, ...this.factoryColumns];
|
||||||
},
|
},
|
||||||
@@ -562,7 +576,13 @@ export default {
|
|||||||
prop: 'factoryName',
|
prop: 'factoryName',
|
||||||
label: '工厂',
|
label: '工厂',
|
||||||
fixed: true
|
fixed: true
|
||||||
}
|
},
|
||||||
|
(this.isPeriodicReport ? {
|
||||||
|
prop: 'reportDate',
|
||||||
|
label: '日期',
|
||||||
|
fixed: true,
|
||||||
|
width: 120
|
||||||
|
} : ''),
|
||||||
];
|
];
|
||||||
return [...baseColumns, ...this.factoryColumnsDay];
|
return [...baseColumns, ...this.factoryColumnsDay];
|
||||||
}
|
}
|
||||||
@@ -787,97 +807,159 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
// 导出表格
|
// 导出表格（改为async方法，支持await调用）
|
||||||
handleExport() {
|
async handleExport() {
|
||||||
// 按产线监控
|
// 按产线监控
|
||||||
if (this.activeName === 'productLine') {
|
if (this.activeName === 'productLine') {
|
||||||
if (this.listQuery.timeType === 1) {
|
if (this.listQuery.timeType === 1) {
|
||||||
// 产线-当天：导出当班 + 当天两个表格（自定义汇总文件名）
|
// 产线-当天：导出当班 + 当天两个表格（自定义汇总文件名）
|
||||||
this.exportMultipleTables([
|
await this.exportMultipleTables([
|
||||||
{ ref: 'lineCurrentShiftTable', name: '产线监控_当班数据' },
|
{ ref: 'lineCurrentShiftTable', name: '产线监控_当班数据' },
|
||||||
{ ref: 'lineTodayTable', name: '产线监控_当天数据' }
|
{ ref: 'lineTodayTable', name: '产线监控_当天数据' }
|
||||||
], '产线监控_当班及当天数据汇总'); // 传入自定义汇总文件名
|
], '产线监控_当班及当天数据汇总'); // 传入自定义汇总文件名
|
||||||
} else if (this.listQuery.timeType === 1) {
|
} else if (this.listQuery.timeType === 3) {
|
||||||
// 产线-当天：导出当班 + 当天两个表格（自定义汇总文件名）
|
// 修复：注释错误，原为“产线-当天”，实际是“产线-上一班”
|
||||||
this.exportMultipleTables([
|
// 产线-上一班：导出单个表格
|
||||||
{ ref: 'lineCurrentShiftTable', name: '产线监控_上一班数据' },
|
await this.exportSingleTable('lineCustomTable', '产线监控_上一班时间数据');
|
||||||
{ ref: 'lineTodayTable', name: '产线监控_当天数据' }
|
|
||||||
], '产线监控_当班及当天数据汇总'); // 传入自定义汇总文件名
|
|
||||||
} else {
|
} else {
|
||||||
// 产线-自定义：导出一个表格（自定义文件名）
|
// 产线-自定义：导出一个表格（自定义文件名）
|
||||||
this.exportSingleTable('lineCustomTable', '产线监控_自定义时间数据');
|
await this.exportSingleTable('lineCustomTable', '产线监控_自定义时间数据');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 按产品监控
|
// 按产品监控
|
||||||
else {
|
else {
|
||||||
if (this.listQuery.timeType === 1) {
|
if (this.listQuery.timeType === 1) {
|
||||||
// 产品-当天：导出当班 + 当天两个表格（自定义汇总文件名）
|
// 产品-当天：导出当班 + 当天两个表格（自定义汇总文件名）
|
||||||
this.exportMultipleTables([
|
await this.exportMultipleTables([
|
||||||
{ ref: 'productCurrentShiftTable', name: '产品监控_当班数据' },
|
{ ref: 'productCurrentShiftTable', name: '产品监控_当班数据' },
|
||||||
{ ref: 'productTodayTable', name: '产品监控_当天数据' }
|
{ ref: 'productCurrentShiftTable', name: '产品监控_当天数据' }
|
||||||
], '产品监控_当班及当天数据汇总'); // 传入自定义汇总文件名
|
], '产品监控_当班及当天数据汇总'); // 传入自定义汇总文件名
|
||||||
|
} else if (this.listQuery.timeType === 3) {
|
||||||
|
// 修复：注释错误，原为“产线-当天”，实际是“产品-上一班”
|
||||||
|
// 产品-上一班：导出单个表格
|
||||||
|
await this.exportSingleTable('productCustomTable', '产品监控_上一班时间数据');
|
||||||
} else {
|
} else {
|
||||||
// 产品-自定义：导出一个表格（自定义文件名）
|
// 产品-自定义：导出一个表格（自定义文件名）
|
||||||
this.exportSingleTable('productCustomTable', '产品监控_自定义时间数据');
|
await this.exportSingleTable('productCustomTable', '产品监控_自定义时间数据');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// 导出单个表格（保持原有逻辑，文件名由调用方传入，已区分不同场景）
|
// 导出单个表格（改为async方法，使用await获取DOM）
|
||||||
exportSingleTable(refName, fileName) {
|
async exportSingleTable(refName, fileName) {
|
||||||
const table = this.getTableDom(refName);
|
try {
|
||||||
if (!table) return;
|
// 关键修复：使用await等待getTableDom返回DOM元素（而非Promise）
|
||||||
|
const table = await this.getTableDom(refName);
|
||||||
|
if (!table) {
|
||||||
|
this.$message.warning(`无法导出：${refName}表格DOM获取失败`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const clonedTable = table.cloneNode(true);
|
// 确认table是原生DOM元素后再调用cloneNode
|
||||||
this.adjustTableForExport(clonedTable);
|
if (!(table instanceof HTMLElement)) {
|
||||||
|
this.$message.error(`无法导出：${refName}表格不是合法的DOM元素`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const workbook = XLSX.utils.table_to_book(clonedTable);
|
|
||||||
const fullName = `${fileName}_${this.formatDate()}.xlsx`;
|
|
||||||
XLSX.writeFile(workbook, fullName);
|
|
||||||
},
|
|
||||||
|
|
||||||
// 导出多个表格（新增自定义汇总文件名参数，适配不同选项卡）
|
|
||||||
exportMultipleTables(tables, customSummaryName) {
|
|
||||||
const workbook = XLSX.utils.book_new();
|
|
||||||
let hasValidTable = false;
|
|
||||||
|
|
||||||
tables.forEach(({ ref, name }) => {
|
|
||||||
const table = this.getTableDom(ref);
|
|
||||||
if (!table) return;
|
|
||||||
|
|
||||||
hasValidTable = true;
|
|
||||||
const clonedTable = table.cloneNode(true);
|
const clonedTable = table.cloneNode(true);
|
||||||
this.adjustTableForExport(clonedTable);
|
this.adjustTableForExport(clonedTable);
|
||||||
|
|
||||||
const worksheet = XLSX.utils.table_to_sheet(clonedTable);
|
const workbook = XLSX.utils.table_to_book(clonedTable);
|
||||||
XLSX.utils.book_append_sheet(workbook, worksheet, name);
|
const fullName = `${fileName}_${this.formatDate()}.xlsx`;
|
||||||
});
|
XLSX.writeFile(workbook, fullName);
|
||||||
|
} catch (error) {
|
||||||
if (!hasValidTable) {
|
this.$message.error(`导出表格失败：${error.message}`);
|
||||||
this.$message.warning('未找到有效表格数据');
|
console.error('单个表格导出错误：', error);
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 动态生成汇总文件名：自定义名称 + 日期
|
|
||||||
const fullName = `${customSummaryName}_${this.formatDate()}.xlsx`;
|
|
||||||
XLSX.writeFile(workbook, fullName);
|
|
||||||
},
|
},
|
||||||
// 辅助方法：获取表格DOM元素（包含表头）
|
|
||||||
getTableDom(refName) {
|
// 导出多个表格（改为async方法，使用await获取DOM）
|
||||||
const tableComponent = this.$refs[refName];
|
async exportMultipleTables(tables, customSummaryName) {
|
||||||
if (!tableComponent) {
|
try {
|
||||||
this.$message.warning(`未找到${refName}表格`);
|
const workbook = XLSX.utils.book_new();
|
||||||
return null;
|
let hasValidTable = false;
|
||||||
|
|
||||||
|
// 遍历表格配置，使用await获取每个表格的DOM
|
||||||
|
for (const { ref, name } of tables) { // 改用for...of循环，支持await
|
||||||
|
const table = await this.getTableDom(ref);
|
||||||
|
if (!table) {
|
||||||
|
this.$message.warning(`${ref}表格DOM获取失败，跳过该表格`);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确认table是原生DOM元素
|
||||||
|
if (!(table instanceof HTMLElement)) {
|
||||||
|
this.$message.warning(`${ref}表格不是合法的DOM元素，跳过该表格`);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
hasValidTable = true;
|
||||||
|
const clonedTable = table.cloneNode(true);
|
||||||
|
this.adjustTableForExport(clonedTable);
|
||||||
|
|
||||||
|
const worksheet = XLSX.utils.table_to_sheet(clonedTable);
|
||||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, name);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!hasValidTable) {
|
||||||
|
this.$message.warning('未找到有效表格数据，导出失败');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 动态生成汇总文件名：自定义名称 + 日期
|
||||||
|
const fullName = `${customSummaryName}_${this.formatDate()}.xlsx`;
|
||||||
|
XLSX.writeFile(workbook, fullName);
|
||||||
|
} catch (error) {
|
||||||
|
this.$message.error(`导出多个表格失败：${error.message}`);
|
||||||
|
console.error('多个表格导出错误：', error);
|
||||||
}
|
}
|
||||||
// 获取完整表格容器（包含表头和表体）
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取表格DOM元素（支持异步重试）
|
||||||
|
* @param {string} refName - 表格的ref名称
|
||||||
|
* @param {number} retryCount - 当前重试次数（内部使用，外部调用无需传参）
|
||||||
|
* @returns {Promise<HTMLElement|null>} 表格DOM元素Promise
|
||||||
|
*/
|
||||||
|
async getTableDom(refName, retryCount = 0) {
|
||||||
|
// 1. 配置常量，便于维护
|
||||||
|
const maxRetry = 5; // 最大重试次数
|
||||||
|
const retryDelay = 300; // 每次重试延迟时间(ms)
|
||||||
|
|
||||||
|
// 2. 设置激活标签，确保重试时也能执行该逻辑
|
||||||
|
this.activeLabel = 'table';
|
||||||
|
this.activeLabelDay = 'table';
|
||||||
|
// 若需调试，可保留日志
|
||||||
|
// console.log(`[getTableDom-${refName}] activeLabel:`, this.activeLabel, 'activeLabelDay:', this.activeLabelDay);
|
||||||
|
|
||||||
|
// 3. 获取表格组件
|
||||||
|
const tableComponent = this.$refs[refName];
|
||||||
|
|
||||||
|
// 4. 表格组件不存在时，处理重试逻辑
|
||||||
|
if (!tableComponent) {
|
||||||
|
// 达到最大重试次数，返回失败
|
||||||
|
if (retryCount >= maxRetry) {
|
||||||
|
this.$message.warning(`未找到${refName}表格，已达到最大重试次数（${maxRetry}次）`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 未达到最大重试次数，延迟后重试
|
||||||
|
this.$message.warning(`未找到${refName}表格，将进行第${retryCount + 1}次重试...`);
|
||||||
|
await new Promise(resolve => setTimeout(resolve, retryDelay));
|
||||||
|
// 递归调用并返回结果
|
||||||
|
return this.getTableDom(refName, retryCount + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 5. 获取完整表格容器（包含表头和表体）
|
||||||
const tableContainer = tableComponent.$el.querySelector('.el-table');
|
const tableContainer = tableComponent.$el.querySelector('.el-table');
|
||||||
if (!tableContainer) {
|
if (!tableContainer) {
|
||||||
this.$message.warning(`${refName}表格数据为空`);
|
this.$message.warning(`${refName}表格容器不存在（可能表格数据为空）`);
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 6. 成功获取表格DOM，返回结果
|
||||||
return tableContainer;
|
return tableContainer;
|
||||||
},
|
},
|
||||||
|
|
||||||
// 重点修复：调整表格结构（解决表头重复问题）
|
// 重点修复：调整表格结构（解决表头重复问题）
|
||||||
adjustTableForExport(tableContainer) {
|
adjustTableForExport(tableContainer) {
|
||||||
// 1. 移除空表格提示和分页等无关元素
|
// 1. 移除空表格提示和分页等无关元素
|
||||||
@@ -939,7 +1021,7 @@ export default {
|
|||||||
if (mainTable && allHeaderRows.length > 0) {
|
if (mainTable && allHeaderRows.length > 0) {
|
||||||
const newThead = document.createElement('thead');
|
const newThead = document.createElement('thead');
|
||||||
// 按层级添加表头行
|
// 按层级添加表头行
|
||||||
allHeaderRows.forEach(cells => {
|
allHeaderRows.forEach((cells, rowIndex) => {
|
||||||
const newTr = document.createElement('tr');
|
const newTr = document.createElement('tr');
|
||||||
cells.forEach(cell => {
|
cells.forEach(cell => {
|
||||||
// 复制单元格（避免DOM残留引用问题）
|
// 复制单元格（避免DOM残留引用问题）
|
||||||
@@ -950,6 +1032,18 @@ export default {
|
|||||||
});
|
});
|
||||||
// 将新表头插入主表体最前面
|
// 将新表头插入主表体最前面
|
||||||
mainTable.insertBefore(newThead, mainTable.firstChild);
|
mainTable.insertBefore(newThead, mainTable.firstChild);
|
||||||
|
|
||||||
|
// ================ 新增：修改第一列表头为“序号” ================
|
||||||
|
// 找到第一层级的第一个表头单元格（<th>）
|
||||||
|
const firstHeaderCell = newThead.querySelector('tr:first-child th:first-child');
|
||||||
|
if (firstHeaderCell) {
|
||||||
|
// 清空原有内容，设置为“序号”
|
||||||
|
firstHeaderCell.innerHTML = ''; // 清空原有内容（包括子元素）
|
||||||
|
firstHeaderCell.textContent = '序号'; // 设置纯文本“序号”（更稳定）
|
||||||
|
// 可选：添加样式（如居中，根据需求调整）
|
||||||
|
// firstHeaderCell.style.textAlign = 'center';
|
||||||
|
}
|
||||||
|
// =============================================================
|
||||||
}
|
}
|
||||||
|
|
||||||
// 7. 合并固定列数据到主表体（仅处理tbody数据）
|
// 7. 合并固定列数据到主表体（仅处理tbody数据）
|
||||||
@@ -980,6 +1074,23 @@ export default {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ================ 可选优化：为tbody第一列添加序号数字 ================
|
||||||
|
// 如果表格体的第一列原本无数据，可补充1、2、3...的序号
|
||||||
|
if (mainTable) {
|
||||||
|
const tbodyRows = mainTable.querySelectorAll('tbody tr');
|
||||||
|
tbodyRows.forEach((row, index) => {
|
||||||
|
const firstTd = row.querySelector('td:first-child');
|
||||||
|
if (firstTd) {
|
||||||
|
// 清空原有内容，设置为序号（index+1，因为索引从0开始）
|
||||||
|
firstTd.innerHTML = '';
|
||||||
|
firstTd.textContent = index + 1;
|
||||||
|
// 可选：居中显示
|
||||||
|
// firstTd.style.textAlign = 'center';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// =============================================================
|
||||||
},
|
},
|
||||||
|
|
||||||
// 辅助方法：格式化日期（用于文件名）
|
// 辅助方法：格式化日期（用于文件名）
|
||||||
@@ -1003,7 +1114,45 @@ export default {
|
|||||||
this.formConfig[2].selectOptions = res.data.list || [];
|
this.formConfig[2].selectOptions = res.data.list || [];
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
getWeekTimeRange(date) {
|
||||||
|
const targetDate = new Date(date);
|
||||||
|
const day = targetDate.getDay() || 7; // 周日转为7
|
||||||
|
const year = targetDate.getFullYear();
|
||||||
|
const month = targetDate.getMonth();
|
||||||
|
const dateNum = targetDate.getDate();
|
||||||
|
|
||||||
|
// 本周一 00:00:00
|
||||||
|
const startDate = new Date(year, month, dateNum - day + 1);
|
||||||
|
startDate.setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
|
// 本周日 23:59:59
|
||||||
|
const endDate = new Date(year, month, dateNum - day + 7);
|
||||||
|
endDate.setHours(23, 59, 59, 999);
|
||||||
|
|
||||||
|
return {
|
||||||
|
startTime: startDate.getTime(),
|
||||||
|
endTime: endDate.getTime()
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 辅助函数：获取本年的开始和结束时间戳（1月1日00:00:00 到 12月31日23:59:59）
|
||||||
|
getYearTimeRange(date) {
|
||||||
|
const targetDate = new Date(date);
|
||||||
|
const year = targetDate.getFullYear();
|
||||||
|
|
||||||
|
// 本年1月1日 00:00:00
|
||||||
|
const startDate = new Date(year, 0, 1);
|
||||||
|
startDate.setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
|
// 本年12月31日 23:59:59
|
||||||
|
const endDate = new Date(year, 11, 31);
|
||||||
|
endDate.setHours(23, 59, 59, 999);
|
||||||
|
|
||||||
|
return {
|
||||||
|
startTime: startDate.getTime(),
|
||||||
|
endTime: endDate.getTime()
|
||||||
|
};
|
||||||
|
},
|
||||||
// 搜索/导出按钮点击
|
// 搜索/导出按钮点击
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
this.headFormValue = val
|
this.headFormValue = val
|
||||||
@@ -1498,6 +1647,7 @@ export default {
|
|||||||
handleSearchBarChanged({ param, value }) {
|
handleSearchBarChanged({ param, value }) {
|
||||||
console.log(value, param);
|
console.log(value, param);
|
||||||
if (param === 'timeType') {
|
if (param === 'timeType') {
|
||||||
|
this.isPeriodicReport = false
|
||||||
this.tableData = []
|
this.tableData = []
|
||||||
this.tableDataCustom = []
|
this.tableDataCustom = []
|
||||||
this.tableData2 = []
|
this.tableData2 = []
|
||||||
@@ -1566,15 +1716,60 @@ export default {
|
|||||||
this.formConfig[7].type = '';
|
this.formConfig[7].type = '';
|
||||||
}
|
}
|
||||||
} else if (param === 'searchType') {
|
} else if (param === 'searchType') {
|
||||||
|
this.isPeriodicReport = value === 2;
|
||||||
|
console.log('this.isPeriodicReport ', this.isPeriodicReport);
|
||||||
|
if (this.$refs.searchBarForm && this.$refs.searchBarForm.formInline) {
|
||||||
|
const formInline = this.$refs.searchBarForm.formInline;
|
||||||
|
formInline.reportType = ''
|
||||||
|
// 精准判断：只有字段存在时，才置为undefined（不存在则不处理）
|
||||||
|
if ('timeVal' in formInline) {
|
||||||
|
formInline.timeVal = undefined;
|
||||||
|
}
|
||||||
|
if ('timeValWeek' in formInline) {
|
||||||
|
formInline.timeValWeek = undefined;
|
||||||
|
}
|
||||||
|
if ('timeValMonth' in formInline) {
|
||||||
|
formInline.timeValMonth = undefined;
|
||||||
|
}
|
||||||
|
if ('timeValYear' in formInline) {
|
||||||
|
formInline.timeValYear = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// const formInline = this.$refs.searchBarForm.formInline;
|
||||||
|
this.listQuery.startTime = undefined
|
||||||
|
this.listQuery.endTime = undefined
|
||||||
|
console.log(this.listQuery, 'list');
|
||||||
if (value === 1) {
|
if (value === 1) {
|
||||||
// 统计数据：显示时间范围，隐藏报表类型
|
// 统计数据：显示时间范围，隐藏报表类型
|
||||||
this.formConfig[7].type = 'datePicker';
|
this.formConfig[7] = {
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '时间范围',
|
||||||
|
dateType: 'datetimerange',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'timestamp',
|
||||||
|
rangeSeparator: '-',
|
||||||
|
startPlaceholder: '开始时间',
|
||||||
|
endPlaceholder: '结束时间',
|
||||||
|
param: 'timeVal',
|
||||||
|
width: 350
|
||||||
|
};
|
||||||
this.formConfig[6].type = '';
|
this.formConfig[6].type = '';
|
||||||
this.$refs.searchBarForm.formInline.timeVal = undefined;
|
|
||||||
} else {
|
} else {
|
||||||
// 周期性报表：显示报表类型，隐藏时间范围
|
// 周期性报表：显示报表类型，隐藏时间范围
|
||||||
this.formConfig[6].type = 'select';
|
this.formConfig[6].type = 'select';
|
||||||
this.formConfig[7].type = 'datePicker';
|
this.formConfig[7] = {
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '时间范围',
|
||||||
|
dateType: 'datetimerange',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'timestamp',
|
||||||
|
rangeSeparator: '-',
|
||||||
|
startPlaceholder: '开始时间',
|
||||||
|
endPlaceholder: '结束时间',
|
||||||
|
param: 'timeVal',
|
||||||
|
width: 350
|
||||||
|
};
|
||||||
}
|
}
|
||||||
} else if (param === 'reportType') {
|
} else if (param === 'reportType') {
|
||||||
if (this.$refs.searchBarForm && this.$refs.searchBarForm.formInline) {
|
if (this.$refs.searchBarForm && this.$refs.searchBarForm.formInline) {
|
||||||
|
|||||||
Reference in New Issue
Block a user