Compare commits
11 Commits
cdeba3f334
...
projects/q
| Author | SHA1 | Date | |
|---|---|---|---|
| fe2408c667 | |||
| a2375325a0 | |||
|
|
04d5896f6e | ||
|
|
46a23c249c | ||
| 242a52b98e | |||
|
|
945237557f | ||
|
|
8eb0a9fee1 | ||
|
|
a9645d03a9 | ||
| 2b5e476fdd | |||
|
|
f95d0473bf | ||
|
|
25dc76dfbe |
4
.env.dev
4
.env.dev
@@ -12,8 +12,8 @@ ENV = 'development'
|
||||
VUE_APP_TITLE = 智能监控分析系统
|
||||
|
||||
# 芋道管理系统/开发环境
|
||||
VUE_APP_BASE_API = 'http://172.16.32.79:48080'
|
||||
# VUE_APP_BASE_API = 'http://line.kszny.picaiba.com'
|
||||
# VUE_APP_BASE_API = 'http://172.16.32.79:48082'
|
||||
VUE_APP_BASE_API = 'http://line.kszny.picaiba.com'
|
||||
|
||||
|
||||
# 路由懒加载
|
||||
|
||||
Binary file not shown.
@@ -111,3 +111,17 @@ export function getProcessAutoReportNew(data) {
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
export function getProcessAutoReportLastGroup(data) {
|
||||
return request({
|
||||
url: '/monitoring/production-monitor/getProcessAutoReportLastGroup',
|
||||
method: 'post',
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
export function getPLlistByFactory(data) {
|
||||
return request({
|
||||
url: 'base/production-line/listByFactory',
|
||||
method: 'post',
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -15,3 +15,11 @@ export function getPdlDataOneDay(data) {
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 获得近24小时产线生产数据-新版
|
||||
export function getSectionDataOneDay(data) {
|
||||
return request({
|
||||
url: '/monitoring/production-monitor/getSectionDataOneDay',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class='centerBottomL'>
|
||||
<div class='title'>
|
||||
<svg-icon icon-class="dataBoard3" class='icon'/>
|
||||
<span>本月数据</span>
|
||||
<span>当月数据</span>
|
||||
</div>
|
||||
<div class='dataBox' style='top:50px'>
|
||||
<p>
|
||||
@@ -37,7 +37,7 @@ export default {
|
||||
watch: {
|
||||
dataObj(val) {
|
||||
val.monthAndLastMonth && val.monthAndLastMonth.forEach(item => {
|
||||
if (item.dataType === "本月") {
|
||||
if (item.dataType === "当月") {
|
||||
this.monthData = item
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,62 +1,195 @@
|
||||
<template>
|
||||
<div ref="centerTopBox" class='centerTopBox'>
|
||||
<div ref="centerTopBox" class="centerTopBox">
|
||||
<div>
|
||||
<video src="/static/videos/01.webm" muted autoplay loop class='videoStyle'></video>
|
||||
<video
|
||||
src="/static/videos/01.webm"
|
||||
muted
|
||||
autoplay
|
||||
loop
|
||||
class="videoStyle"></video>
|
||||
<div class="zhegaiceng" v-if="dataObj">
|
||||
<div
|
||||
class='eqTipBox'
|
||||
v-show='showTooltip'
|
||||
:style="'left:'+tooltipStyle.left+'px;top:'+tooltipStyle.top+'px;'"
|
||||
>
|
||||
<p><span class='eqTipTitle'>设备名称:</span><span class='eqTipNum'>{{eqTipMsg.name}}</span></p>
|
||||
<p><span class='eqTipTitle'>进口数量:</span><span class='eqTipNum'>{{eqTipMsg.input}}</span></p>
|
||||
<p><span class='eqTipTitle'>出口数量:</span><span class='eqTipNum'>{{eqTipMsg.output}}</span></p>
|
||||
<p><span class='eqTipTitle'>报警状态:</span>
|
||||
<span class='eqTipNum'>
|
||||
<img v-show='eqTipMsg.alarm' :src='dotY' width='16'/>
|
||||
<img v-show='!eqTipMsg.alarm' :src='dotG' width='16'/>
|
||||
v-show="
|
||||
!dataObj.productionDet.find((val) => val.line == 1).isProduction
|
||||
"
|
||||
class="production-line1"
|
||||
data-line="1"
|
||||
data-status="stopped">
|
||||
<!-- 半透明渐变遮罩 -->
|
||||
<div class="line-mask"></div>
|
||||
<!-- 状态标签 -->
|
||||
<div class="line-status-tag">
|
||||
<span class="status-dot stopped"></span>
|
||||
产线1 已停产
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-show="
|
||||
!dataObj.productionDet.find((val) => val.line == 2).isProduction
|
||||
"
|
||||
class="production-line2"
|
||||
data-line="2"
|
||||
data-status="stopped">
|
||||
<!-- 半透明渐变遮罩 -->
|
||||
<div class="line-mask"></div>
|
||||
<!-- 状态标签 -->
|
||||
<div class="line-status-tag">
|
||||
<span class="status-dot stopped"></span>
|
||||
产线2 已停产
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-show="
|
||||
!dataObj.productionDet.find((val) => val.line == 3).isProduction
|
||||
"
|
||||
class="production-line3"
|
||||
data-line="3"
|
||||
data-status="stopped">
|
||||
<!-- 半透明渐变遮罩 -->
|
||||
<div class="line-mask"></div>
|
||||
<!-- 状态标签 -->
|
||||
<div class="line-status-tag">
|
||||
<span class="status-dot stopped"></span>
|
||||
产线3 已停产
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-show="
|
||||
!dataObj.productionDet.find((val) => val.line == 4).isProduction
|
||||
"
|
||||
class="production-line4"
|
||||
data-line="4"
|
||||
data-status="stopped">
|
||||
<!-- 半透明渐变遮罩 -->
|
||||
<div class="line-mask"></div>
|
||||
<!-- 状态标签 -->
|
||||
<div class="line-status-tag">
|
||||
<span class="status-dot stopped"></span>
|
||||
产线4 已停产
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-show="
|
||||
!dataObj.productionDet.find((val) => val.line == 5).isProduction
|
||||
"
|
||||
class="production-line5"
|
||||
data-line="5"
|
||||
data-status="stopped">
|
||||
<!-- 半透明渐变遮罩 -->
|
||||
<div class="line-mask"></div>
|
||||
<!-- 状态标签 -->
|
||||
<div class="line-status-tag">
|
||||
<span class="status-dot stopped"></span>
|
||||
产线5 已停产
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="eqTipBox"
|
||||
v-show="showTooltip"
|
||||
:style="
|
||||
'left:' + tooltipStyle.left + 'px;top:' + tooltipStyle.top + 'px;'
|
||||
">
|
||||
<p>
|
||||
<span class="eqTipTitle">设备名称:</span>
|
||||
<span class="eqTipNum">{{ eqTipMsg.name }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="eqTipTitle">进口数量:</span>
|
||||
<span class="eqTipNum">{{ eqTipMsg.input }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="eqTipTitle">出口数量:</span>
|
||||
<span class="eqTipNum">{{ eqTipMsg.output }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="eqTipTitle">报警状态:</span>
|
||||
<span class="eqTipNum">
|
||||
<img v-show="eqTipMsg.alarm" :src="dotY" width="16" />
|
||||
<img v-show="!eqTipMsg.alarm" :src="dotG" width="16" />
|
||||
{{ eqTipMsg.alarm ? '报警' : '未报警' }}
|
||||
</span>
|
||||
</p>
|
||||
<p><span class='eqTipTitle'>在线状态:</span>
|
||||
<span class='eqTipNum'>
|
||||
<img v-show='eqTipMsg.status' :src='dotG' width='16'/>
|
||||
<img v-show='!eqTipMsg.status' :src='dotR' width='16'/>
|
||||
<p>
|
||||
<span class="eqTipTitle">在线状态:</span>
|
||||
<span class="eqTipNum">
|
||||
<img v-show="eqTipMsg.status" :src="dotG" width="16" />
|
||||
<img v-show="!eqTipMsg.status" :src="dotR" width="16" />
|
||||
{{ eqTipMsg.status ? '在线' : '离线' }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- 设备 -->
|
||||
<div class='eqBox'>
|
||||
<div class="eqBox">
|
||||
<!-- line-从上到下-从右往左 -->
|
||||
<span
|
||||
v-for='(item,index) in eqList'
|
||||
:key='index'
|
||||
:style="'width:'+item.w+'px;height:'+item.h+'px;left:'+item.l+'px;top:'+item.t+'px'"
|
||||
v-for="(item, index) in eqList"
|
||||
:key="index"
|
||||
:style="
|
||||
'width:' +
|
||||
item.w +
|
||||
'px;height:' +
|
||||
item.h +
|
||||
'px;left:' +
|
||||
item.l +
|
||||
'px;top:' +
|
||||
item.t +
|
||||
'px'
|
||||
"
|
||||
@mouseenter="handleMouseEnter(item, $event)"
|
||||
@mouseleave="handleMouseLeave"
|
||||
></span>
|
||||
@mouseleave="handleMouseLeave"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='centerTopTopBox'>
|
||||
<div style='display: inline-block;'>
|
||||
<img src="../../../../assets/images/dataBoard/centerNumB.png" alt="" width='203'>
|
||||
<p class='num'>{{dataObj?.productRate || '-'}}%</p>
|
||||
<p class='title'>成品率</p>
|
||||
<div class="centerTopTopBox">
|
||||
<div style="display: inline-block">
|
||||
<img
|
||||
src="../../../../assets/images/dataBoard/centerNumB.png"
|
||||
alt=""
|
||||
width="203" />
|
||||
<p class="num" style="font-size: 25px">
|
||||
<span style="color: #2e7dff">
|
||||
{{ dataObj?.productRateYesterday ?? '-' }}%
|
||||
</span>
|
||||
<span style="color: #999">/</span>
|
||||
<span style="color: #ff8a00">
|
||||
{{ dataObj?.productRate30day ?? '-' }}%
|
||||
</span>
|
||||
</p>
|
||||
<p class="title">昨日/近30天成品率</p>
|
||||
</div>
|
||||
<div style='display: inline-block;'>
|
||||
<img src="../../../../assets/images/dataBoard/centerNumY.png" alt="" width='261'>
|
||||
<p class='num' style='width: 260px;padding-left: 20px;'>{{dataObj?.todayProduct ? formatThousands(dataObj.todayProduct) : '-'}}</p>
|
||||
<p class='title' style='color:#FFB625'>今日产量</p>
|
||||
<div style="display: inline-block">
|
||||
<img
|
||||
src="../../../../assets/images/dataBoard/centerNumY.png"
|
||||
alt=""
|
||||
width="261" />
|
||||
<p class="num" style="width: 260px; padding-left: 20px">
|
||||
{{
|
||||
dataObj?.todayProduct ? formatThousands(dataObj.todayProduct) : '-'
|
||||
}}
|
||||
</p>
|
||||
<p class="title" style="color: #ffb625">当日产量</p>
|
||||
</div>
|
||||
<div style='display: inline-block;'>
|
||||
<img src="../../../../assets/images/dataBoard/centerNumY.png" alt="" width='261'>
|
||||
<p class='num' style='width: 260px;padding-left: 20px;'>{{dataObj?.monthProduct ? formatThousands(dataObj.monthProduct) : '-'}}</p>
|
||||
<p class='title' style='color:#FFB625'>本月产量</p>
|
||||
<div style="display: inline-block">
|
||||
<img
|
||||
src="../../../../assets/images/dataBoard/centerNumY.png"
|
||||
alt=""
|
||||
width="261" />
|
||||
<p class="num" style="width: 260px; padding-left: 20px">
|
||||
{{
|
||||
dataObj?.monthProduct ? formatThousands(dataObj.monthProduct) : '-'
|
||||
}}
|
||||
</p>
|
||||
<p class="title" style="color: #ffb625">当月产量</p>
|
||||
</div>
|
||||
<div style='display: inline-block;'>
|
||||
<img src="../../../../assets/images/dataBoard/centerNumB.png" alt="" width='203'>
|
||||
<p class='num'>{{dataObj?.alarmNum ? formatThousands(dataObj.alarmNum) : '-'}}</p>
|
||||
<p class='title'>设备报警数</p>
|
||||
<div style="display: inline-block">
|
||||
<img
|
||||
src="../../../../assets/images/dataBoard/centerNumB.png"
|
||||
alt=""
|
||||
width="203" />
|
||||
<p class="num">
|
||||
{{ dataObj?.alarmNum ? formatThousands(dataObj.alarmNum) : '-' }}
|
||||
</p>
|
||||
<p class="title">设备报警数</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -69,7 +202,7 @@ export default {
|
||||
showTooltip: false,
|
||||
tooltipStyle: {
|
||||
left: 0,
|
||||
top: 0
|
||||
top: 0,
|
||||
},
|
||||
dotY: require('../../../../assets/images/dataBoard/dotY.png'),
|
||||
dotR: require('../../../../assets/images/dataBoard/dotR.png'),
|
||||
@@ -188,44 +321,45 @@ export default {
|
||||
{ name: 'A5-包装清洗机-1', id: 501501, w: 30, h: 18, l: 185, t: 473 },
|
||||
{ name: 'A5-包装清洗机-2', id: 501502, w: 30, h: 18, l: 185, t: 511 },
|
||||
{ name: 'A5-铺纸机-1', id: 501601, w: 18, h: 15, l: 144, t: 475 },
|
||||
{name:'A5-铺纸机-2',id:501602,w:18,h:15,l:144,t:511}
|
||||
{ name: 'A5-铺纸机-2', id: 501602, w: 18, h: 15, l: 144, t: 511 },
|
||||
],
|
||||
eqTipMsg: {
|
||||
name: '',
|
||||
input: null,
|
||||
output: null,
|
||||
alarm: '未报警',
|
||||
status:'在线'
|
||||
}
|
||||
}
|
||||
status: '在线',
|
||||
},
|
||||
};
|
||||
},
|
||||
props: {
|
||||
scaleNum: {
|
||||
type: Number,
|
||||
default: 1
|
||||
default: 1,
|
||||
},
|
||||
dataObj: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
scaleNum(val) {
|
||||
this.scaleNum = val
|
||||
this.scaleNum = val;
|
||||
},
|
||||
dataObj(val) {
|
||||
val.equipmentDets && val.equipmentDets.forEach(item => {
|
||||
this.eqList.forEach(eq => {
|
||||
val.equipmentDets &&
|
||||
val.equipmentDets.forEach((item) => {
|
||||
this.eqList.forEach((eq) => {
|
||||
if (eq.id == item.id) {
|
||||
eq.name = item.name
|
||||
eq.input = item.input
|
||||
eq.output = item.output
|
||||
eq.alarm = item.isError
|
||||
eq.status = item.isRun
|
||||
}
|
||||
})
|
||||
})
|
||||
eq.name = item.name;
|
||||
eq.input = item.input;
|
||||
eq.output = item.output;
|
||||
eq.alarm = item.isError;
|
||||
eq.status = item.isRun;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
@@ -243,7 +377,7 @@ export default {
|
||||
this.showTooltip = false;
|
||||
},
|
||||
updateTooltipPosition(event) {
|
||||
const rect = this.$refs.centerTopBox.getBoundingClientRect()
|
||||
const rect = this.$refs.centerTopBox.getBoundingClientRect();
|
||||
const offset = 15;
|
||||
const tooltipWidth = 315 * this.scaleNum;
|
||||
const tooltipHeight = 170 * this.scaleNum;
|
||||
@@ -261,9 +395,9 @@ export default {
|
||||
}
|
||||
this.tooltipStyle.left = posX / this.scaleNum;
|
||||
this.tooltipStyle.top = posY / this.scaleNum;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
p {
|
||||
@@ -272,7 +406,8 @@ p{
|
||||
.centerTopBox {
|
||||
width: 1041px;
|
||||
height: 600px;
|
||||
background: url('../../../../assets/images/dataBoard/center-top.png') no-repeat;
|
||||
background: url('../../../../assets/images/dataBoard/center-top.png')
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
position: absolute;
|
||||
left: 440px;
|
||||
@@ -296,7 +431,7 @@ p{
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
letter-spacing: 1px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -314,6 +449,82 @@ p{
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.zhegaiceng {
|
||||
.production-line1 {
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 160px;
|
||||
width: 99%;
|
||||
height: 70px;
|
||||
}
|
||||
.production-line2 {
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 232px;
|
||||
width: 99%;
|
||||
height: 75px;
|
||||
}
|
||||
.production-line3 {
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 306px;
|
||||
width: 99%;
|
||||
height: 68px;
|
||||
}
|
||||
.production-line4 {
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 372px;
|
||||
width: 99%;
|
||||
height: 86px;
|
||||
}
|
||||
.production-line5 {
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 460px;
|
||||
width: 99%;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.line-mask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(14, 14, 14, 0.9),
|
||||
rgba(14, 14, 14, 0.7),
|
||||
rgba(14, 14, 14, 0.9)
|
||||
);
|
||||
}
|
||||
.line-status-tag {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
transform: translateY(-50%);
|
||||
padding: 6px 12px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
font-size: 25px;
|
||||
z-index: 10;
|
||||
/* 新增:让内部元素 flex 垂直居中 */
|
||||
display: flex;
|
||||
align-items: center; /* 核心:垂直居中 */
|
||||
gap: 6px; /* 控制点和文字的间距,避免重叠 */
|
||||
}
|
||||
.status-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
/* 移除可能影响对齐的 margin-top/margin-bottom */
|
||||
margin: 0;
|
||||
}
|
||||
.status-dot.stopped {
|
||||
background: #ff3d3d;
|
||||
}
|
||||
}
|
||||
.eqBox {
|
||||
span {
|
||||
display: inline-block;
|
||||
@@ -333,7 +544,7 @@ p{
|
||||
box-sizing: border-box;
|
||||
font-weight: 500;
|
||||
font-size: 38px;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
text-shadow: 0px 5px 2px rgba(0, 0, 0, 0.62);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
@@ -342,7 +553,7 @@ p{
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
color: #00C8F7;
|
||||
color: #00c8f7;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0px 5px 2px rgba(0, 0, 0, 0.62);
|
||||
text-align: center;
|
||||
|
||||
@@ -1,17 +1,20 @@
|
||||
<template>
|
||||
<div class='leftBottomBox'>
|
||||
<div class='title'>
|
||||
<svg-icon icon-class="dataBoard2" class='icon'/>
|
||||
<div class="leftBottomBox">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="dataBoard2" class="icon" />
|
||||
<span>投入产出及良品率</span>
|
||||
</div>
|
||||
<div v-if='xData.length === 0' class='noData'>暂无数据</div>
|
||||
<div v-if="xData.length === 0" class="noData">暂无数据</div>
|
||||
<div v-else>
|
||||
<div class="top_legend">
|
||||
<span class="chart_legend_icon1">投入</span>
|
||||
<span class="chart_legend_icon2">产出</span>
|
||||
<span><span class="chart_legend_icon3"></span>良品率</span>
|
||||
<span>
|
||||
<span class="chart_legend_icon3"></span>
|
||||
良品率
|
||||
</span>
|
||||
</div>
|
||||
<div id='inOutputChart' style='width: 400px;height: 290px;'></div>
|
||||
<div id="inOutputChart" style="width: 400px; height: 290px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -22,25 +25,26 @@ export default {
|
||||
props: {
|
||||
dataObj: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
dataObj(val) {
|
||||
this.xData = []
|
||||
this.inputData = []
|
||||
this.outputData = []
|
||||
this.goodRateData = []
|
||||
val.monthBar && val.monthBar.forEach(item => {
|
||||
this.xData.push(item.dataType)
|
||||
this.inputData.push(item.inputNum)
|
||||
this.outputData.push(item.outputNum)
|
||||
this.goodRateData.push(item.goodRate)
|
||||
})
|
||||
this.xData = [];
|
||||
this.inputData = [];
|
||||
this.outputData = [];
|
||||
this.goodRateData = [];
|
||||
val.monthBar &&
|
||||
val.monthBar.forEach((item) => {
|
||||
this.xData.push(item.dataType);
|
||||
this.inputData.push(item.inputNum);
|
||||
this.outputData.push(item.outputNum);
|
||||
this.goodRateData.push(item.goodRate.toFixed(2));
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -50,7 +54,7 @@ export default {
|
||||
inputData: [],
|
||||
outputData: [],
|
||||
goodRateData: [],
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
@@ -60,10 +64,10 @@ export default {
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
|
||||
this.chart.dispose(); // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
|
||||
}
|
||||
this.chartDom = document.getElementById('inOutputChart')
|
||||
this.chart = echarts.init(this.chartDom)
|
||||
this.chartDom = document.getElementById('inOutputChart');
|
||||
this.chart = echarts.init(this.chartDom);
|
||||
var option;
|
||||
option = {
|
||||
grid: { top: 40, right: 10, bottom: 5, left: 10, containLabel: true },
|
||||
@@ -71,85 +75,90 @@ export default {
|
||||
show: false,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
type: 'category',
|
||||
data: this.xData,
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
interval: 0,
|
||||
rotate:30
|
||||
rotate: 30,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
color: '#5982B2',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: [{
|
||||
name: "单位/片",
|
||||
yAxis: [
|
||||
{
|
||||
name: '单位/片',
|
||||
nameTextStyle: {
|
||||
color: "#DFF1FE",
|
||||
color: '#DFF1FE',
|
||||
fontSize: 12,
|
||||
},
|
||||
type: "value",
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: "#DFF1FE",
|
||||
color: '#DFF1FE',
|
||||
fontSize: 12,
|
||||
formatter: "{value}",
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
color: '#5982B2',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
color: '#5982B2',
|
||||
},
|
||||
},
|
||||
},{
|
||||
name: "良品率/%",
|
||||
},
|
||||
{
|
||||
name: '良品率/%',
|
||||
nameTextStyle: {
|
||||
color: "#DFF1FE",
|
||||
color: '#DFF1FE',
|
||||
fontSize: 12,
|
||||
},
|
||||
type: "value",
|
||||
type: 'value',
|
||||
max: 100,
|
||||
min: 80,
|
||||
axisLabel: {
|
||||
color: "#DFF1FE",
|
||||
color: '#DFF1FE',
|
||||
fontSize: 12,
|
||||
formatter: "{value}",
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
color: '#5982B2',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
color: '#5982B2',
|
||||
},
|
||||
},
|
||||
}],
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
type: 'shadow',
|
||||
},
|
||||
className: "qhd-chart-tooltip",
|
||||
className: 'qhd-chart-tooltip',
|
||||
show: true,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.inputData,
|
||||
type: "bar",
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
barGap: 0,
|
||||
itemStyle: {
|
||||
@@ -161,7 +170,7 @@ export default {
|
||||
},
|
||||
{
|
||||
data: this.outputData,
|
||||
type: "bar",
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
@@ -172,7 +181,7 @@ export default {
|
||||
},
|
||||
{
|
||||
data: this.goodRateData,
|
||||
type: "line",
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
symbol: 'circle',
|
||||
symbolSize: 7,
|
||||
@@ -183,20 +192,21 @@ export default {
|
||||
{ offset: 0.2, color: 'rgba(18, 255, 245, 0.2)' },
|
||||
{ offset: 0.4, color: 'rgba(18, 255, 245, 0)' },
|
||||
]),
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
};
|
||||
option && this.chart.setOption(option);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
<style lang="scss" scoped>
|
||||
.leftBottomBox {
|
||||
width: 402px;
|
||||
height: 332px;
|
||||
background: url('../../../../assets/images/dataBoard/left-bottom.png') no-repeat;
|
||||
background: url('../../../../assets/images/dataBoard/left-bottom.png')
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
position: absolute;
|
||||
left: 23px;
|
||||
@@ -212,7 +222,7 @@ export default {
|
||||
}
|
||||
span {
|
||||
font-size: 24px;
|
||||
color: #52FFF1;
|
||||
color: #52fff1;
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -231,21 +241,21 @@ export default {
|
||||
}
|
||||
.chart_legend_icon1:before {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 5px;
|
||||
border-radius: 2px;
|
||||
background: #73F8E0;
|
||||
background: #73f8e0;
|
||||
}
|
||||
.chart_legend_icon2:before {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 5px;
|
||||
border-radius: 2px;
|
||||
background: #497EFF;
|
||||
background: #497eff;
|
||||
}
|
||||
.chart_legend_icon3 {
|
||||
display: inline-block;
|
||||
@@ -253,15 +263,15 @@ export default {
|
||||
height: 8px;
|
||||
margin-right: 8px;
|
||||
border-radius: 4px;
|
||||
background: #73F8E0;
|
||||
background: #73f8e0;
|
||||
position: relative;
|
||||
}
|
||||
.chart_legend_icon3:before {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background: #73F8E0;
|
||||
background: #73f8e0;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: -4px;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
</div>
|
||||
<div class='title-split'>
|
||||
<img src="../../../../assets//images/dataBoard/leftbar.png" alt="">
|
||||
<span class='text'>本日</span>
|
||||
<span class='text'>当日</span>
|
||||
<img src="../../../../assets//images/dataBoard/rightbar.png" alt="">
|
||||
</div>
|
||||
<div class='data-box'>
|
||||
@@ -20,11 +20,11 @@
|
||||
</div>
|
||||
<div class='right-data' style="top:15px;">
|
||||
<p><span class='num'>{{todayData?.inputNum ? formatThousands(todayData.inputNum) : '-'}}</span><span class='text'>片数</span></p>
|
||||
<p><span class='num'>{{todayData?.inputArea ? formatThousands(todayData.inputArea) : '-'}}</span><span class='text'>面积/㎡</span></p>
|
||||
<!-- <p><span class='num'>{{todayData?.inputArea ? formatThousands(todayData.inputArea) : '-'}}</span><span class='text'>面积/㎡</span></p> -->
|
||||
</div>
|
||||
<div class='right-data' style="top:132px;">
|
||||
<p><span class='num'>{{todayData?.outputNum ? formatThousands(todayData.outputNum) : '-'}}</span><span class='text'>片数</span></p>
|
||||
<p><span class='num'>{{todayData?.outputArea ? formatThousands(todayData.outputArea) : '-'}}</span><span class='text'>面积/㎡</span></p>
|
||||
<!-- <p><span class='num'>{{todayData?.outputArea ? formatThousands(todayData.outputArea) : '-'}}</span><span class='text'>面积/㎡</span></p> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class='title-split'>
|
||||
@@ -43,11 +43,11 @@
|
||||
</div>
|
||||
<div class='right-data' style="top:15px;">
|
||||
<p><span class='num'>{{yesterdayData?.inputNum ? formatThousands(yesterdayData.inputNum) : '-'}}</span><span class='text'>片数</span></p>
|
||||
<p><span class='num'>{{yesterdayData?.inputArea ? formatThousands(yesterdayData.inputArea) : '-'}}</span><span class='text'>面积/㎡</span></p>
|
||||
<!-- <p><span class='num'>{{yesterdayData?.inputArea ? formatThousands(yesterdayData.inputArea) : '-'}}</span><span class='text'>面积/㎡</span></p> -->
|
||||
</div>
|
||||
<div class='right-data' style="top:132px;">
|
||||
<p><span class='num'>{{yesterdayData?.outputNum ? formatThousands(yesterdayData.outputNum) : '-'}}</span><span class='text'>片数</span></p>
|
||||
<p><span class='num'>{{yesterdayData?.outputArea ? formatThousands(yesterdayData.outputArea) : '-'}}</span><span class='text'>面积/㎡</span></p>
|
||||
<!-- <p><span class='num'>{{yesterdayData?.outputArea ? formatThousands(yesterdayData.outputArea) : '-'}}</span><span class='text'>面积/㎡</span></p> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -155,6 +155,7 @@ export default {
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0px 4px 2px rgba(0,0,0,0.62);
|
||||
line-height: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class='rightBottomBox'>
|
||||
<div class='title'>
|
||||
<svg-icon icon-class="dataBoard3" class='icon'/>
|
||||
<span>本月<span class='dotted'></span>班组生产排名</span>
|
||||
<span>当月<span class='dotted'></span>班组生产排名</span>
|
||||
</div>
|
||||
<div class='rankingLeft'>
|
||||
<div class='rankingLeftTitle'>产量</div>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
</div>
|
||||
<div class='box' style='width: 115px;'>
|
||||
<p class='name'>
|
||||
<span style='margin-right: 3px;'>本月</span>
|
||||
<span style='margin-right: 3px;'>当月</span>
|
||||
<img v-show='nokSumDet.month >= nokSumDet.lastMonth' src="../../../../assets/images/dataBoard/arrUp.png" alt="" width='5' height='15'>
|
||||
<img v-show='nokSumDet.month < nokSumDet.lastMonth' src="../../../../assets/images/dataBoard/arrDown.png" alt="" width='5' height='15'>
|
||||
</p>
|
||||
@@ -29,7 +29,7 @@
|
||||
</div>
|
||||
<div class='box' style='width: 110px;'>
|
||||
<p class='name'>
|
||||
<span style='margin-right: 3px;'>本年</span>
|
||||
<span style='margin-right: 3px;'>当年</span>
|
||||
<img v-show='nokSumDet.year >= nokSumDet.lastYear' src="../../../../assets/images/dataBoard/arrUp.png" alt="" width='5' height='15'>
|
||||
<img v-show='nokSumDet.year < nokSumDet.lastYear' src="../../../../assets/images/dataBoard/arrDown.png" alt="" width='5' height='15'>
|
||||
</p>
|
||||
|
||||
@@ -89,6 +89,31 @@ export default {
|
||||
},
|
||||
created() {},
|
||||
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>
|
||||
|
||||
@@ -120,6 +120,29 @@ export default {
|
||||
.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");
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -7,46 +7,20 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@select-changed="handleSearchBarChanged"
|
||||
<search-bar :formConfigs="formConfig" ref="searchBarForm" @select-changed="handleSearchBarChanged"
|
||||
@headBtnClick="buttonClick" />
|
||||
<div v-if="showData.length">
|
||||
<base-table
|
||||
class="right-aside"
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
:page="1"
|
||||
:limit="999"
|
||||
<base-table class="right-aside" v-loading="dataListLoading" :table-props="tableProps" :page="1" :limit="999"
|
||||
:table-data="showData">
|
||||
<method-btn
|
||||
v-if="showData.length"
|
||||
slot="handleBtn"
|
||||
:width="80"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
<method-btn v-if="showData.length" slot="handleBtn" :width="80" label="操作" :method-list="tableBtn"
|
||||
@clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<barChart
|
||||
v-for="item in chartData"
|
||||
:key="item.name + 'echart'"
|
||||
style="margin-top: 50px"
|
||||
height="600px"
|
||||
:id="item.name + 'echart'"
|
||||
:title="item.name + ' 节拍趋势图'"
|
||||
:bar-data="item" />
|
||||
<barChart v-for="item in chartData" :key="item.name + 'echart'" style="margin-top: 50px" height="600px"
|
||||
: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%">
|
||||
<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">
|
||||
@@ -64,7 +38,7 @@
|
||||
<script>
|
||||
import eqDetail from './eq-detail';
|
||||
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 { getFactoryPage } from '@/api/core/base/factory';
|
||||
// import codeFilter from '../../mixins/code-filter'
|
||||
@@ -135,6 +109,8 @@ export default {
|
||||
label: '工厂',
|
||||
selectOptions: [],
|
||||
param: 'factoryId',
|
||||
collapseTags: true,
|
||||
multiple: true,
|
||||
onchange: true,
|
||||
},
|
||||
{
|
||||
@@ -142,6 +118,7 @@ export default {
|
||||
label: '产线',
|
||||
selectOptions: [],
|
||||
param: 'lineId',
|
||||
collapseTags: true,
|
||||
multiple: true,
|
||||
},
|
||||
{
|
||||
@@ -183,7 +160,7 @@ export default {
|
||||
// 获取当前时间
|
||||
const now = new Date();
|
||||
// 获取前一天的同一时间
|
||||
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
|
||||
const yesterday = new Date(now.getTime());
|
||||
// 设置为00:00:00
|
||||
yesterday.setHours(0, 0, 0, 0);
|
||||
// 设置为23:59:59
|
||||
@@ -232,9 +209,9 @@ export default {
|
||||
return exportTableOut;
|
||||
},
|
||||
getPdLineList() {
|
||||
getPdList().then((res) => {
|
||||
this.formConfig[1].selectOptions = res.data || [];
|
||||
});
|
||||
// getPLlistByFactory().then((res) => {
|
||||
// this.formConfig[1].selectOptions = res.data || [];
|
||||
// });
|
||||
const params = {
|
||||
pageSize: 100,
|
||||
pageNo: 1,
|
||||
@@ -274,7 +251,7 @@ export default {
|
||||
handleSearchBarChanged({ param, value }) {
|
||||
this.listQuery.lineId = [];
|
||||
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 || [];
|
||||
});
|
||||
},
|
||||
|
||||
@@ -92,6 +92,8 @@ export default {
|
||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{ prop: 'name', label: '设备类型名称' },
|
||||
{ prop: 'isCraft', label: '是否为生产设备',
|
||||
filter: (val) => val?'是': '否', },
|
||||
{ prop: 'code', label: '设备类型编码' },
|
||||
{ prop: 'remark', label: '备注' },
|
||||
],
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<!-- <el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label=" 基板类型" prop="typeDictValue">
|
||||
<el-select :disabled="isdetail" v-model="dataForm.typeDictValue" clearable style="width: 100%"
|
||||
@@ -89,7 +89,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row> -->
|
||||
</el-form>
|
||||
|
||||
<small-title style="margin: 16px 0; padding-left: 8px" :no-padding="true">
|
||||
|
||||
@@ -17,14 +17,14 @@
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
:max-height="tableH"
|
||||
@emitFun="handleEmitFun"
|
||||
/>
|
||||
:span-method="mergeColumnHandler"
|
||||
@emitFun="handleEmitFun" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPdlDataOneDay } from '@/api/core/monitoring/data24'
|
||||
import { getSectionDataOneDay } from '@/api/core/monitoring/data24';
|
||||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||
|
||||
export default {
|
||||
@@ -35,7 +35,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: getPdlDataOneDay
|
||||
getDataListURL: getSectionDataOneDay,
|
||||
},
|
||||
initing: false,
|
||||
queryParams: {
|
||||
@@ -45,6 +45,7 @@ export default {
|
||||
list: [],
|
||||
arr: [],
|
||||
spanArr: [],
|
||||
spanArrProLine: [], // 产线合并行数组
|
||||
timeList: [],
|
||||
tableData: [],
|
||||
tableProps: [],
|
||||
@@ -58,78 +59,130 @@ export default {
|
||||
methods: {
|
||||
/** 构建tableProps - 依据第一个元素所提供的信息 */
|
||||
buildProps(plData) {
|
||||
plData.forEach(item => {
|
||||
this.timeList.push(item.name)
|
||||
})
|
||||
const timeArray = Array.from(new Set(this.timeList))
|
||||
console.log('nihc', timeArray)
|
||||
this.timeList = []; // 重置避免重复
|
||||
this.arr = []; // 重置避免重复
|
||||
plData.forEach((item) => {
|
||||
this.timeList.push(item.name);
|
||||
});
|
||||
const timeArray = Array.from(new Set(this.timeList));
|
||||
for (const times of timeArray) {
|
||||
if (times !== '投入数量' && times !== '产出数量' && times !== '报废数量' && times !== '产出面积') {
|
||||
if (!['投入数', '产出数', '报废数量', '报废比例'].includes(times)) {
|
||||
const subprop = {
|
||||
label: times.slice(0, 10) + ' ' + times.slice(11),
|
||||
label: `${times.slice(0, 10)} ${times.slice(11)}`,
|
||||
align: 'center',
|
||||
children: [
|
||||
{ prop: times + '_in', label: '投入数量',
|
||||
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
|
||||
{ prop: times + '_out', label: '产出数量',
|
||||
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
|
||||
{ prop: times + '_junk', label: '报废数量',
|
||||
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
|
||||
{ prop: times + '_area', label: '产出面积',
|
||||
filter: (val) => (val != null ? val.toFixed(2) : '-'), }
|
||||
]
|
||||
}
|
||||
this.arr.push(subprop)
|
||||
}
|
||||
}
|
||||
this.tableProps = this.arr
|
||||
{
|
||||
prop: `${times}_in`,
|
||||
label: '投入数',
|
||||
filter: (val) => (val != null ? val : '-'),
|
||||
},
|
||||
setRowSpan(arr) {
|
||||
let count = 0
|
||||
{
|
||||
prop: `${times}_out`,
|
||||
label: '产出数',
|
||||
filter: (val) => (val != null ? val : '-'),
|
||||
},
|
||||
{
|
||||
prop: `${times}_junk`,
|
||||
label: '报废数量',
|
||||
filter: (val) => (val != null ? val : '-'),
|
||||
},
|
||||
{
|
||||
prop: `${times}_area`,
|
||||
label: '报废比例',
|
||||
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||
},
|
||||
],
|
||||
};
|
||||
this.arr.push(subprop);
|
||||
}
|
||||
}
|
||||
this.tableProps = [
|
||||
{
|
||||
prop: 'proLineName',
|
||||
label: '产线',
|
||||
fixed: 'left',
|
||||
width: 120,
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
{
|
||||
prop: 'spec',
|
||||
label: '产品规格',
|
||||
fixed: 'left',
|
||||
width: 110,
|
||||
showOverflowTooltip: true,
|
||||
filter: (val) => val != null ? val.join(' / ') : '-',
|
||||
},
|
||||
{
|
||||
prop: 'sectionName',
|
||||
label: '工段名称',
|
||||
fixed: 'left',
|
||||
width: 120,
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
{
|
||||
prop: 'allNum',
|
||||
label: '生产总数',
|
||||
fixed: 'left',
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
...this.arr
|
||||
];
|
||||
},
|
||||
/** 通用合并行计算方法 */
|
||||
calcRowSpan(arr) {
|
||||
const spanArr = [];
|
||||
let count = 0;
|
||||
arr.forEach((item, index) => {
|
||||
if (index === 0) {
|
||||
this.spanArr.push(1)
|
||||
spanArr.push(1);
|
||||
} else {
|
||||
if (item === arr[index - 1]) {
|
||||
this.spanArr[count] += 1
|
||||
this.spanArr.push(0)
|
||||
spanArr[count] += 1;
|
||||
spanArr.push(0);
|
||||
} else {
|
||||
count = index
|
||||
this.spanArr.push(1)
|
||||
count = index;
|
||||
spanArr.push(1);
|
||||
}
|
||||
}
|
||||
})
|
||||
console.log('打印数组长度', this.spanArr)
|
||||
});
|
||||
return spanArr;
|
||||
},
|
||||
|
||||
/** 把 list 里的数据转换成 tableProps 对应的格式 */
|
||||
convertList(list) {
|
||||
let sectionArr= []
|
||||
console.log('打印看下数据list', list)
|
||||
list.forEach((ele, index) => {
|
||||
let tempData = []
|
||||
ele.data.forEach(item => {
|
||||
item.children.forEach(params => {
|
||||
if (params.dynamicName === '投入数量') {
|
||||
tempData[item.dynamicName + '_in'] = params.dynamicValue
|
||||
} else if (params.dynamicName === '产出数量') {
|
||||
tempData[item.dynamicName + '_out'] = params.dynamicValue
|
||||
} else if (params.dynamicName === '报废数量') {
|
||||
tempData[item.dynamicName + '_junk'] = params.dynamicValue
|
||||
} else {
|
||||
tempData[item.dynamicName + '_area'] = params.dynamicValue
|
||||
}
|
||||
})
|
||||
})
|
||||
tempData['proLineName'] = ele.proLineName
|
||||
tempData['spec'] = ele.spec
|
||||
this.tableData.push(tempData)
|
||||
console.log('看看数据', this.tableData, tempData)
|
||||
const { proLineName } = tempData
|
||||
sectionArr.push(proLineName)
|
||||
})
|
||||
this.setRowSpan(sectionArr)
|
||||
console.log('工段名称列表', sectionArr)
|
||||
this.tableData = []; // 重置避免重复
|
||||
const proLineNames = []; // 存储产线名称用于计算合并
|
||||
const specNames = []; // 存储规格名称用于计算合并
|
||||
|
||||
list.forEach((ele) => {
|
||||
const tempData = {};
|
||||
// 基础字段赋值
|
||||
tempData.proLineName = ele.proLineName;
|
||||
tempData.spec = ele.spec;
|
||||
tempData.sectionName = ele.sectionName;
|
||||
tempData.allNum = ele.allNum;
|
||||
|
||||
// 动态字段赋值
|
||||
ele.data.forEach((item) => {
|
||||
item.children.forEach((params) => {
|
||||
const keyMap = {
|
||||
'投入数': `${item.dynamicName}_in`,
|
||||
'产出数': `${item.dynamicName}_out`,
|
||||
'报废数量': `${item.dynamicName}_junk`,
|
||||
'报废比例': `${item.dynamicName}_area`,
|
||||
};
|
||||
const key = keyMap[params.dynamicName];
|
||||
if (key) tempData[key] = params.dynamicValue;
|
||||
});
|
||||
});
|
||||
|
||||
this.tableData.push(tempData);
|
||||
proLineNames.push(ele.proLineName);
|
||||
specNames.push(ele.spec);
|
||||
});
|
||||
|
||||
// 计算合并行数组
|
||||
this.spanArrProLine = this.calcRowSpan(proLineNames);
|
||||
},
|
||||
|
||||
buildData(data) {
|
||||
@@ -138,38 +191,55 @@ export default {
|
||||
|
||||
/** 合并table列的规则 */
|
||||
mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
|
||||
if (columnIndex == 0) {
|
||||
if (this.spanArr[rowIndex]) {
|
||||
return [
|
||||
this.spanArr[rowIndex], // row span
|
||||
1, // col span
|
||||
];
|
||||
} else {
|
||||
return [0, 0];
|
||||
// 列索引0: 产线列, 列索引1: 产品规格列
|
||||
if (columnIndex === 0) {
|
||||
return {
|
||||
rowspan: this.spanArrProLine[rowIndex] || 0,
|
||||
colspan: this.spanArrProLine[rowIndex] ? 1 : 0
|
||||
};
|
||||
}
|
||||
if (columnIndex === 1) {
|
||||
return {
|
||||
rowspan: this.spanArrProLine[rowIndex] || 0,
|
||||
colspan: this.spanArrProLine[rowIndex] ? 1 : 0
|
||||
};
|
||||
}
|
||||
// 其他列不合并
|
||||
return { rowspan: 1, colspan: 1 };
|
||||
},
|
||||
|
||||
async getList() {
|
||||
this.urlOptions.getDataListURL().then(res => {
|
||||
console.log('看看数据', res)
|
||||
this.urlOptions.getDataListURL().then((res) => {
|
||||
console.log('看看数据', res);
|
||||
this.arr = [
|
||||
{
|
||||
prop: 'proLineName',
|
||||
label: '生产线',
|
||||
label: '产线',
|
||||
fixed: 'left',
|
||||
showOverflowTooltip: true
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
{
|
||||
prop: 'spec',
|
||||
label: '产品规格',
|
||||
fixed: 'left',
|
||||
showOverflowTooltip: true
|
||||
}
|
||||
]
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
{
|
||||
prop: 'sectionName',
|
||||
label: '工段名称',
|
||||
fixed: 'left',
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
{
|
||||
prop: 'allNum',
|
||||
label: '生产总数',
|
||||
fixed: 'left',
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
];
|
||||
this.buildProps(res.data.nameData);
|
||||
this.buildData(res.data.data);
|
||||
})
|
||||
});
|
||||
|
||||
// // const data = this.res.data;
|
||||
// // console.log('recent-24', data);
|
||||
|
||||
@@ -348,7 +348,7 @@ export default {
|
||||
dataListLoading: false,
|
||||
tableProps,
|
||||
tableBtn: [
|
||||
this.$auth.hasPermi(`monitoring:group-off:update`)
|
||||
this.$auth.hasPermi(`monitoring:group-off:detail`)
|
||||
? {
|
||||
type: 'eq',
|
||||
btnName: '详情',
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -101,7 +101,7 @@ const tableProps = [
|
||||
},
|
||||
{
|
||||
prop: 'thick',
|
||||
label: '玻璃长度/mm'
|
||||
label: '玻璃厚度/mm'
|
||||
},
|
||||
];
|
||||
|
||||
@@ -275,7 +275,7 @@ export default {
|
||||
fileName += this.listQuery.thick + '_';
|
||||
}
|
||||
// 添加时间戳避免文件名重复
|
||||
fileName += + '.xlsx';
|
||||
fileName + '.xlsx';
|
||||
|
||||
FileSaver.saveAs(blob, fileName);
|
||||
this.$message.success('导出成功');
|
||||
|
||||
@@ -358,8 +358,8 @@ export default {
|
||||
handleExport() {
|
||||
// 处理查询参数
|
||||
let params = { ...this.listQuery };
|
||||
params.pageNo = undefined;
|
||||
params.pageSize = undefined;
|
||||
// params.pageNo = undefined;
|
||||
// params.pageSize = undefined;
|
||||
this.$modal.confirm('是否确认导出下片日志?').then(() => {
|
||||
this.exportLoading = true;
|
||||
return exportDownLogData(params);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -216,7 +216,7 @@ import {
|
||||
import { getTree } from '@/api/base/equipment';
|
||||
import { getEquipmentTypePage } from '@/api/base/equipmentType';
|
||||
import { getEquipmentOverall } from '@/api/base/equipment';
|
||||
|
||||
import { getTenantId } from '@/utils/auth'
|
||||
// import * as XLSX from 'xlsx';
|
||||
// import FileSaver from 'file-saver';
|
||||
import ButtonNav from '@/components/ButtonNav';
|
||||
@@ -569,7 +569,7 @@ export default {
|
||||
const token = getAccessToken();
|
||||
const headers = new Headers({
|
||||
Authorization: `Bearer ${token}`,
|
||||
'tenant-id': store.getters.userId,
|
||||
'tenant-id': getTenantId(),
|
||||
'Content-Type': 'text/event-stream',
|
||||
});
|
||||
|
||||
|
||||
@@ -278,8 +278,8 @@ export default {
|
||||
mobileCodeTimer: 0,
|
||||
loginForm: {
|
||||
loginType: 'uname',
|
||||
username: 'admin',
|
||||
password: 'admin123',
|
||||
username: '',
|
||||
password: '',
|
||||
captchaVerification: '',
|
||||
mobile: '',
|
||||
mobileCode: '',
|
||||
|
||||
@@ -34,28 +34,7 @@ export default {
|
||||
mixins: [basicPageMixin],
|
||||
data() {
|
||||
return {
|
||||
// tableBtn: [
|
||||
// this.$auth.hasPermi('base:quality-inspection-type:update')
|
||||
// ? {
|
||||
// type: 'edit',
|
||||
// btnName: '修改',
|
||||
// }
|
||||
// : undefined,
|
||||
// this.$auth.hasPermi('base:quality-inspection-type:delete')
|
||||
// ? {
|
||||
// type: 'delete',
|
||||
// btnName: '删除',
|
||||
// }
|
||||
// : undefined,
|
||||
// ].filter((v) => v),
|
||||
tableProps: [
|
||||
// {
|
||||
// prop: 'createTime',
|
||||
// label: '添加时间',
|
||||
// fixed: true,
|
||||
// width: 180,
|
||||
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
// },
|
||||
{ prop: 'factoryName', label: '工厂' },
|
||||
{ prop: 'lineName', label: '产线' },
|
||||
{ prop: 'remark', label: '玻璃编号' },
|
||||
@@ -74,42 +53,7 @@ export default {
|
||||
},
|
||||
{ prop: 'reason', label: '判等原因' },
|
||||
{ prop: 'specifications', label: '规格' },
|
||||
|
||||
|
||||
// {
|
||||
// label: '操作',
|
||||
// alignt: 'center',
|
||||
// subcomponent: {
|
||||
// render: function (h) {
|
||||
// return h('div', null, [
|
||||
// h(
|
||||
// 'el-button',
|
||||
// {
|
||||
// props: {
|
||||
// icon: 'el-icon-edit',
|
||||
// size: 'mini',
|
||||
// type: 'text',
|
||||
// },
|
||||
// },
|
||||
// ' 修改'
|
||||
// ),
|
||||
// h(
|
||||
// 'el-button',
|
||||
// {
|
||||
// props: {
|
||||
// icon: 'el-icon-edit',
|
||||
// size: 'mini',
|
||||
// type: 'text',
|
||||
// },
|
||||
// },
|
||||
// ' 修改'
|
||||
// ),
|
||||
// ]);
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
],
|
||||
//
|
||||
searchBarFormConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
@@ -121,6 +65,7 @@ export default {
|
||||
type: 'select',
|
||||
label: '产线',
|
||||
selectOptions: [],
|
||||
multiple: true,
|
||||
param: 'lineId',
|
||||
},
|
||||
{
|
||||
@@ -134,13 +79,13 @@ export default {
|
||||
label: '时间范围',
|
||||
dateType: 'datetimerange',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
// valueFormat: 'timestamp',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'timestamp',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
param: 'timeVal',
|
||||
width: 350
|
||||
width: 350,
|
||||
defaultSelect: [],
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@@ -148,23 +93,9 @@ export default {
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: '重置',
|
||||
// name: 'reset',
|
||||
// },
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
// {
|
||||
// type: this.$auth.hasPermi('base:quality-inspection-type:create')
|
||||
// ? 'button'
|
||||
// : '',
|
||||
// btnName: '新增',
|
||||
// name: 'add',
|
||||
// plain: true,
|
||||
// color: 'success',
|
||||
// },
|
||||
{
|
||||
type: this.$auth.hasPermi('base:quality-inspection-type:export')
|
||||
? 'button'
|
||||
@@ -214,11 +145,55 @@ export default {
|
||||
// deep: true
|
||||
// },
|
||||
// },
|
||||
created() {
|
||||
mounted() {
|
||||
const { startTimestamp, endTimestamp } = this.getThreeDaysAgoThisTimeToNowTimeStamps();
|
||||
// 找到时间范围的配置项并赋值(对应你代码中的timeVal参数)
|
||||
this.searchBarFormConfig[3].defaultSelect = [startTimestamp, endTimestamp]; // 赋值给日期选择器
|
||||
this.queryParams.startTime = startTimestamp;
|
||||
this.queryParams.endTime = endTimestamp;
|
||||
this.getList();
|
||||
this.getDict()
|
||||
},
|
||||
methods: {
|
||||
getThreeDaysAgoThisTimeToNowTimeStamps() {
|
||||
const now = new Date();
|
||||
// 1. 计算三天前的当前时刻(使用setDate直接修改日期,保留时分秒等信息)
|
||||
const threeDaysAgoThisTime = new Date(now); // 复制当前日期对象,避免修改原对象
|
||||
threeDaysAgoThisTime.setDate(threeDaysAgoThisTime.getDate() - 3); // 日期减3天,时分秒保持和当前一致
|
||||
|
||||
// 2. 获取时间戳(毫秒级和秒级)
|
||||
// 开始时间戳:三天前的当前时刻
|
||||
const startTimestamp = threeDaysAgoThisTime.getTime(); // 毫秒级
|
||||
const startTimestampSec = Math.floor(startTimestamp / 1000); // 秒级
|
||||
// 结束时间戳:当前时刻
|
||||
const endTimestamp = now.getTime(); // 毫秒级
|
||||
const endTimestampSec = Math.floor(endTimestamp / 1000); // 秒级
|
||||
|
||||
// 封装日期格式化函数,转换为yyyy-MM-dd HH:mm:ss格式
|
||||
const formatDateTime = (date) => {
|
||||
const y = date.getFullYear();
|
||||
// 月份是从0开始的,所以要+1;补零确保是两位
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const d = String(date.getDate()).padStart(2, '0');
|
||||
const h = String(date.getHours()).padStart(2, '0');
|
||||
const min = String(date.getMinutes()).padStart(2, '0');
|
||||
const s = String(date.getSeconds()).padStart(2, '0');
|
||||
return `${y}-${m}-${d} ${h}:${min}:${s}`;
|
||||
};
|
||||
|
||||
// 格式化后的字符串:三天前的当前时刻 和 当前时刻
|
||||
const startDateTimeStr = formatDateTime(threeDaysAgoThisTime);
|
||||
const endDateTimeStr = formatDateTime(now);
|
||||
|
||||
return {
|
||||
startTimestamp, // 三天前当前时刻的毫秒级时间戳
|
||||
endTimestamp, // 当前时刻的毫秒级时间戳
|
||||
startTimestampSec, // 三天前当前时刻的秒级时间戳
|
||||
endTimestampSec, // 当前时刻的秒级时间戳
|
||||
startDateTimeStr, // yyyy-MM-dd HH:mm:ss格式的开始时间字符串
|
||||
endDateTimeStr // yyyy-MM-dd HH:mm:ss格式的结束时间字符串
|
||||
};
|
||||
},
|
||||
getDict() {
|
||||
getPdList().then(res => {
|
||||
this.searchBarFormConfig[1].selectOptions = res.data || [];
|
||||
@@ -249,11 +224,6 @@ export default {
|
||||
this.queryParams.startTime = btn.timeVal ? btn.timeVal[0] : undefined
|
||||
this.queryParams.endTime = btn.timeVal ? btn.timeVal[1] : undefined
|
||||
this.queryParams.checkNum = btn.checkNum ? btn.checkNum : undefined
|
||||
|
||||
|
||||
// keys.forEach((key) => {
|
||||
// this.queryParams[key] = btn[key] || null;
|
||||
// });
|
||||
this.getList();
|
||||
break;
|
||||
case 'add':
|
||||
@@ -262,10 +232,6 @@ export default {
|
||||
case 'export':
|
||||
this.handleExport();
|
||||
break;
|
||||
// case 'reset':
|
||||
// this.$refs['search-bar'].resetForm();
|
||||
// this.resetQuery();
|
||||
// break;
|
||||
}
|
||||
},
|
||||
/** 查询列表 */
|
||||
|
||||
@@ -150,7 +150,8 @@ export default {
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
param: 'timeVal',
|
||||
width: 350
|
||||
width: 350,
|
||||
defaultSelect: [],
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@@ -226,11 +227,56 @@ export default {
|
||||
// deep: true
|
||||
// },
|
||||
// },
|
||||
created() {
|
||||
mounted() {
|
||||
|
||||
const { startTimestamp, endTimestamp } = this.getThreeDaysAgoThisTimeToNowTimeStamps();
|
||||
// 找到时间范围的配置项并赋值(对应你代码中的timeVal参数)
|
||||
this.searchBarFormConfig[2].defaultSelect = [startTimestamp, endTimestamp]; // 赋值给日期选择器
|
||||
this.queryParams.startTime = startTimestamp;
|
||||
this.queryParams.endTime = endTimestamp;
|
||||
this.getList();
|
||||
this.getDict()
|
||||
},
|
||||
methods: {
|
||||
getThreeDaysAgoThisTimeToNowTimeStamps() {
|
||||
const now = new Date();
|
||||
// 1. 计算三天前的当前时刻(使用setDate直接修改日期,保留时分秒等信息)
|
||||
const threeDaysAgoThisTime = new Date(now); // 复制当前日期对象,避免修改原对象
|
||||
threeDaysAgoThisTime.setDate(threeDaysAgoThisTime.getDate() - 3); // 日期减3天,时分秒保持和当前一致
|
||||
|
||||
// 2. 获取时间戳(毫秒级和秒级)
|
||||
// 开始时间戳:三天前的当前时刻
|
||||
const startTimestamp = threeDaysAgoThisTime.getTime(); // 毫秒级
|
||||
const startTimestampSec = Math.floor(startTimestamp / 1000); // 秒级
|
||||
// 结束时间戳:当前时刻
|
||||
const endTimestamp = now.getTime(); // 毫秒级
|
||||
const endTimestampSec = Math.floor(endTimestamp / 1000); // 秒级
|
||||
|
||||
// 封装日期格式化函数,转换为yyyy-MM-dd HH:mm:ss格式
|
||||
const formatDateTime = (date) => {
|
||||
const y = date.getFullYear();
|
||||
// 月份是从0开始的,所以要+1;补零确保是两位
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const d = String(date.getDate()).padStart(2, '0');
|
||||
const h = String(date.getHours()).padStart(2, '0');
|
||||
const min = String(date.getMinutes()).padStart(2, '0');
|
||||
const s = String(date.getSeconds()).padStart(2, '0');
|
||||
return `${y}-${m}-${d} ${h}:${min}:${s}`;
|
||||
};
|
||||
|
||||
// 格式化后的字符串:三天前的当前时刻 和 当前时刻
|
||||
const startDateTimeStr = formatDateTime(threeDaysAgoThisTime);
|
||||
const endDateTimeStr = formatDateTime(now);
|
||||
|
||||
return {
|
||||
startTimestamp, // 三天前当前时刻的毫秒级时间戳
|
||||
endTimestamp, // 当前时刻的毫秒级时间戳
|
||||
startTimestampSec, // 三天前当前时刻的秒级时间戳
|
||||
endTimestampSec, // 当前时刻的秒级时间戳
|
||||
startDateTimeStr, // yyyy-MM-dd HH:mm:ss格式的开始时间字符串
|
||||
endDateTimeStr // yyyy-MM-dd HH:mm:ss格式的结束时间字符串
|
||||
};
|
||||
},
|
||||
getDict() {
|
||||
getPdList().then(res => {
|
||||
this.searchBarFormConfig[1].selectOptions = res.data || [];
|
||||
|
||||
@@ -152,7 +152,8 @@ export default {
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
param: 'timeVal',
|
||||
width: 350
|
||||
width: 350,
|
||||
defaultSelect: [],
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@@ -225,11 +226,56 @@ export default {
|
||||
// deep: true
|
||||
// },
|
||||
// },
|
||||
created() {
|
||||
mounted() {
|
||||
|
||||
const { startTimestamp, endTimestamp } = this.getThreeDaysAgoThisTimeToNowTimeStamps();
|
||||
// 找到时间范围的配置项并赋值(对应你代码中的timeVal参数)
|
||||
this.searchBarFormConfig[2].defaultSelect = [startTimestamp, endTimestamp]; // 赋值给日期选择器
|
||||
this.queryParams.startTime = startTimestamp;
|
||||
this.queryParams.endTime = endTimestamp;
|
||||
this.getList();
|
||||
this.getDict()
|
||||
},
|
||||
methods: {
|
||||
getThreeDaysAgoThisTimeToNowTimeStamps() {
|
||||
const now = new Date();
|
||||
// 1. 计算三天前的当前时刻(使用setDate直接修改日期,保留时分秒等信息)
|
||||
const threeDaysAgoThisTime = new Date(now); // 复制当前日期对象,避免修改原对象
|
||||
threeDaysAgoThisTime.setDate(threeDaysAgoThisTime.getDate() - 3); // 日期减3天,时分秒保持和当前一致
|
||||
|
||||
// 2. 获取时间戳(毫秒级和秒级)
|
||||
// 开始时间戳:三天前的当前时刻
|
||||
const startTimestamp = threeDaysAgoThisTime.getTime(); // 毫秒级
|
||||
const startTimestampSec = Math.floor(startTimestamp / 1000); // 秒级
|
||||
// 结束时间戳:当前时刻
|
||||
const endTimestamp = now.getTime(); // 毫秒级
|
||||
const endTimestampSec = Math.floor(endTimestamp / 1000); // 秒级
|
||||
|
||||
// 封装日期格式化函数,转换为yyyy-MM-dd HH:mm:ss格式
|
||||
const formatDateTime = (date) => {
|
||||
const y = date.getFullYear();
|
||||
// 月份是从0开始的,所以要+1;补零确保是两位
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const d = String(date.getDate()).padStart(2, '0');
|
||||
const h = String(date.getHours()).padStart(2, '0');
|
||||
const min = String(date.getMinutes()).padStart(2, '0');
|
||||
const s = String(date.getSeconds()).padStart(2, '0');
|
||||
return `${y}-${m}-${d} ${h}:${min}:${s}`;
|
||||
};
|
||||
|
||||
// 格式化后的字符串:三天前的当前时刻 和 当前时刻
|
||||
const startDateTimeStr = formatDateTime(threeDaysAgoThisTime);
|
||||
const endDateTimeStr = formatDateTime(now);
|
||||
|
||||
return {
|
||||
startTimestamp, // 三天前当前时刻的毫秒级时间戳
|
||||
endTimestamp, // 当前时刻的毫秒级时间戳
|
||||
startTimestampSec, // 三天前当前时刻的秒级时间戳
|
||||
endTimestampSec, // 当前时刻的秒级时间戳
|
||||
startDateTimeStr, // yyyy-MM-dd HH:mm:ss格式的开始时间字符串
|
||||
endDateTimeStr // yyyy-MM-dd HH:mm:ss格式的结束时间字符串
|
||||
};
|
||||
},
|
||||
getDict() {
|
||||
getPdList().then(res => {
|
||||
this.searchBarFormConfig[1].selectOptions = res.data || [];
|
||||
|
||||
Reference in New Issue
Block a user