Initial commit
This commit is contained in:
Cui Hongwei
227
src/views/DT.vue
Normal file
227
src/views/DT.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<div class="background">
|
||||
<el-row>
|
||||
<div style="position: relative;height: 980px;">
|
||||
<div style="height: 100%; width: 100%;position: absolute;">
|
||||
<div style="width: 100%;height:980px;filter:blur(10);z-index: 999;">
|
||||
<d-m-t ref="dmtCom" containerHeight="980px" containerWidth="100%" />
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: absolute;left: 10px; top:10px;width: 200px;height: 30px" @mouseover="isShowBtn='inline'" @mouseleave="isShowBtn='none'">
|
||||
<div :style="{display: isShowBtn}">
|
||||
<el-button size="mini" style="background: #103666;color: white;border: 1px solid #103666;" @click="restView">复原</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import DMT from '../components/DMT/index'
|
||||
|
||||
export default {
|
||||
name: 'MingLuo',
|
||||
components: { DMT },
|
||||
data() {
|
||||
return {
|
||||
isShow1: true,
|
||||
isShow: 'inline',
|
||||
isShowBtn1: false,
|
||||
isShowBtn: 'none',
|
||||
src: localStorage.getItem('twinAddress'),
|
||||
titlePng: '',
|
||||
titlePng1: '',
|
||||
date: new Date(),
|
||||
year: '',
|
||||
month: '',
|
||||
day: '',
|
||||
minute: '',
|
||||
hour: '',
|
||||
second: '',
|
||||
week: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getLogo()
|
||||
},
|
||||
mounted() {
|
||||
const _this = this // 声明一个变量指向Vue实例this，保证作用域一致
|
||||
this.timer = setInterval(() => {
|
||||
_this.date = new Date() // 修改数据date
|
||||
this.year = new Date().getFullYear() + 1 < 10 ? '0' + (new Date().getFullYear() + 1) : new Date().getFullYear()
|
||||
this.month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
|
||||
this.day = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
|
||||
this.hour = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
|
||||
this.minute = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
|
||||
this.second = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
|
||||
this.week = '日一二三四五六'.charAt(new Date().getDay())
|
||||
}, 1000)
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
methods: {
|
||||
restView() {
|
||||
window.editor.cameraControls.resetState(window.editor.cameraState.target, window.editor.cameraState.position, window.editor.cameraState.zoom0)
|
||||
},
|
||||
getLogo() {
|
||||
axios.get('../../DFlogo.jpg', {
|
||||
responseType: 'arraybuffer'
|
||||
}).then(res => {
|
||||
this.titlePng = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
|
||||
})
|
||||
axios.get('../../MESlogo.png', {
|
||||
responseType: 'arraybuffer'
|
||||
}).then(res => {
|
||||
this.titlePng1 = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
HTML{
|
||||
overflow: auto;
|
||||
}
|
||||
body{
|
||||
margin:0;
|
||||
padding:0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
font-family: MiSans Bold, serif;
|
||||
}
|
||||
/*css主要部分的样式*/
|
||||
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
|
||||
::-webkit-scrollbar {
|
||||
width: 5px; /*对垂直流动条有效*/
|
||||
height: 5px; /*对水平流动条有效*/
|
||||
}
|
||||
|
||||
/*定义滚动条的轨道颜色、内阴影及圆角*/
|
||||
::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
||||
background-color: rgb(14, 50, 97);
|
||||
/*background-color: #ffffff;*/
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/*定义滑块颜色、内阴影及圆角*/
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
||||
background-color: rgb(10, 35, 82);
|
||||
}
|
||||
|
||||
/*定义两端按钮的样式*/
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*定义右下角汇合处的样式*/
|
||||
::-webkit-scrollbar-corner {
|
||||
background: #dedede;
|
||||
}
|
||||
</style>
|
||||
<style scoped="scoped">
|
||||
.title-date {
|
||||
position: absolute;
|
||||
}
|
||||
.title-date>p {
|
||||
color: #fff;
|
||||
/* background: linear-gradient(to bottom, #043768, #000c3b,#043768); */
|
||||
box-shadow: inset 0 0 30px #07417a;
|
||||
border: solid 2px #032d60;
|
||||
border-radius: 10px;
|
||||
/* box-shadow: 4px 2px 6px #033579, -4px -2px 6px #033579, 0px 0px 12px 5px #033579 inset; */
|
||||
font-size: 1.5rem;
|
||||
margin: 0px 390px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.planParams {
|
||||
text-align: center;
|
||||
width: 73px;
|
||||
height: 45px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.other-params-label {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.other-params-value {
|
||||
color: #ffcb6f;
|
||||
font-size: 20px;
|
||||
text-align: center
|
||||
}
|
||||
.background{
|
||||
width:1920px;
|
||||
height: 1080px;
|
||||
background-color: rgb(8, 31, 72);
|
||||
color: white;
|
||||
background-size: 100%;
|
||||
}
|
||||
.data-box {
|
||||
position: absolute;
|
||||
width: 360px;
|
||||
height: 310px;
|
||||
-webkit-box-shadow: rgb(24, 78, 135) 0 0 10px;
|
||||
-moz-box-shadow: rgb(24, 78, 135) 0 0 10px;
|
||||
box-shadow: inset 0 0 30px rgb(24, 78, 135);
|
||||
}
|
||||
.boxBorder{
|
||||
position:absolute;
|
||||
padding:10px;
|
||||
border-style: solid;
|
||||
border-color: rgb(71, 209, 226);
|
||||
}
|
||||
.borderLeft1{border-width: 2px 0 0 2px;top:-2px;left:-2px;}
|
||||
.borderLeft2{border-width: 2px 2px 0 0;top:-2px;right:-2px;}
|
||||
.borderRight1{border-width: 0 0 2px 2px;bottom:-2px;left:-2px;}
|
||||
.borderRight2{border-width: 0 2px 2px 0;bottom:-2px;right:-2px;}
|
||||
.indicatorBlock {
|
||||
float: left;
|
||||
margin: 12px 0 0 30px;
|
||||
width: 15px;
|
||||
height: 26px;
|
||||
background-color: #016eea
|
||||
}
|
||||
.indicatorText {
|
||||
margin: 16px 0 0 20px;
|
||||
float: left;
|
||||
font-size:20px
|
||||
}
|
||||
/deep/ .el-table--enable-row-transition .el-table__body td,
|
||||
/deep/.el-table .cell {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
/deep/ .el-table td, .el-table th{
|
||||
padding: 8px 0;
|
||||
}
|
||||
.el-table__body-wrapper::-webkit-scrollbar {
|
||||
/*width: 0;宽度为0隐藏*/
|
||||
width: 0;
|
||||
}
|
||||
.el-table::before {
|
||||
/*left: 0;*/
|
||||
/*bottom: 0;*/
|
||||
width: 100%;
|
||||
height: 0;
|
||||
}
|
||||
table {
|
||||
border-right: 1px solid #d7d7d7;
|
||||
border-bottom: 1px solid #d7d7d7;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table th {
|
||||
border-left: 1px solid #d7d7d7;
|
||||
border-top: 1px solid #d7d7d7;
|
||||
}
|
||||
|
||||
table td {
|
||||
border-left: 1px solid #d7d7d7;
|
||||
border-top: 1px solid #d7d7d7;
|
||||
}
|
||||
</style>
|
||||
463
src/views/DataPage.vue
Normal file
463
src/views/DataPage.vue
Normal file
@@ -0,0 +1,463 @@
|
||||
<template>
|
||||
<div
|
||||
id="screen"
|
||||
class="allShow"
|
||||
:style="{
|
||||
width: `${style.width}px`,
|
||||
height: `${style.height}px`,
|
||||
transform: `${style.transform}`,
|
||||
}"
|
||||
>
|
||||
<!-- 相同的顶部标题栏 -->
|
||||
<el-row class="topBox">
|
||||
<div style="height: 80px; width: 1918px">
|
||||
<el-col :span="6">
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
margin-left: 70px;
|
||||
cursor: pointer;
|
||||
"
|
||||
@click="goHomePage"
|
||||
>
|
||||
<img
|
||||
style="
|
||||
height: 60px;
|
||||
background-color: #d7d7d7;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
"
|
||||
:src="require('/public/machLogo.png')"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div style="margin-top: 7px; color: white; text-align: center">
|
||||
<span
|
||||
style="
|
||||
font-size: 2.5rem;
|
||||
text-align: center;
|
||||
letter-spacing: 5px;
|
||||
font-weight: bolder;
|
||||
background: linear-gradient(to bottom, white, #add8e6);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
"
|
||||
>{{ title }}</span
|
||||
>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 25px;
|
||||
margin-left: 150px;
|
||||
height: 80px;
|
||||
color: white;
|
||||
width: 645px;
|
||||
"
|
||||
>
|
||||
<el-col :span="11" style="font-size: 25px">
|
||||
<span>{{ usDateTime }}</span>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<!-- 数据页面内容 -->
|
||||
<div class="page-content">
|
||||
<div class="data-table-container">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%; height: 100%;"
|
||||
:header-cell-style="headerCellStyle"
|
||||
:cell-style="cellStyle"
|
||||
empty-text="No Data"
|
||||
>
|
||||
<el-table-column
|
||||
prop="parameter"
|
||||
label="Parameter"
|
||||
width="250"
|
||||
fixed="left"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-for="machine in machineList"
|
||||
:key="machine.deviceId"
|
||||
:label="machine.name"
|
||||
:prop="machine.deviceId"
|
||||
min-width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row[machine.deviceId] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DataPage',
|
||||
data() {
|
||||
return {
|
||||
style: {
|
||||
width: '1920',
|
||||
height: '1080',
|
||||
transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
|
||||
},
|
||||
title: '',
|
||||
usDateTime: '',
|
||||
timer: null,
|
||||
machineDataTimer: null,
|
||||
machineData: [], // 存储从数据库查询的机床数据
|
||||
machineList: [
|
||||
{ deviceId: 'Fanuc_CNC_1_1', name: 'CNC_1' },
|
||||
{ deviceId: 'Fanuc_CNC_2_1', name: 'CNC_2' },
|
||||
{ deviceId: 'Fanuc_CNC_3_1', name: 'CNC_3' },
|
||||
{ deviceId: 'Fanuc_CNC_4_1', name: 'CNC_4' }
|
||||
],
|
||||
tableData: [] // 表格数据
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.title = window.dt_Config.title
|
||||
},
|
||||
mounted() {
|
||||
this.updateDateTime()
|
||||
this.timer = setInterval(this.updateDateTime, 1000)
|
||||
this.setScale()
|
||||
window.addEventListener('resize', this.setScale)
|
||||
|
||||
// 初始化数据查询
|
||||
this.searchMachineData()
|
||||
this.startMachineDataTimer()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
if (this.machineDataTimer) {
|
||||
clearInterval(this.machineDataTimer)
|
||||
}
|
||||
window.removeEventListener('resize', this.setScale)
|
||||
},
|
||||
methods: {
|
||||
// 查询机床数据
|
||||
searchMachineData() {
|
||||
var param = []
|
||||
var Data = this.CreateData('11', '设备管理_设备信息_机床_查询', param)
|
||||
this.ExecDatabase(Data)
|
||||
.then((response) => {
|
||||
// 检查不同的响应结构
|
||||
let data = null
|
||||
|
||||
if (response && response.data) {
|
||||
data = response.data // { data: [...] } 结构
|
||||
} else if (Array.isArray(response)) {
|
||||
data = response // [...] 结构
|
||||
} else if (response && response.result) {
|
||||
data = response.result // { result: [...] } 结构
|
||||
}
|
||||
if (data && data.length > 0) {
|
||||
this.machineData = data
|
||||
this.processMachineData()
|
||||
} else {
|
||||
console.warn('Query successful but no data')
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Failed to query machine data:', error)
|
||||
})
|
||||
},
|
||||
|
||||
// 处理机床数据
|
||||
processMachineData() {
|
||||
// 按设备编号分组数据
|
||||
const groupedData = {}
|
||||
this.machineData.forEach((item) => {
|
||||
if (item.设备编号) {
|
||||
groupedData[item.设备编号] = item
|
||||
}
|
||||
})
|
||||
|
||||
// 构建表格数据
|
||||
this.buildTableData(groupedData)
|
||||
},
|
||||
|
||||
// 构建表格数据
|
||||
buildTableData(groupedData) {
|
||||
const parameters = [
|
||||
{ key: '程序号', name: 'Program No.' },
|
||||
{ key: '主轴转速组', name: 'Spindle Speed' },
|
||||
{ key: '进给速度', name: 'Feed Rate' },
|
||||
{ key: '主轴倍率', name: 'Spindle Override' },
|
||||
{ key: '进给倍率', name: 'Feed Override' },
|
||||
{ key: '伺服负载组', name: 'Servo Load' },
|
||||
{ key: '开机时间', name: 'Power On Time' },
|
||||
{ key: '运行时间', name: 'Operating Time' },
|
||||
{ key: '切削时间', name: 'Cutting Time' },
|
||||
{ key: '循环时间', name: 'Cycle Time' },
|
||||
{ key: '机床时间', name: 'Machine Time' }
|
||||
]
|
||||
|
||||
this.tableData = parameters.map((param) => {
|
||||
const row = { parameter: param.name }
|
||||
|
||||
this.machineList.forEach((machine) => {
|
||||
const machineData = groupedData[machine.deviceId]
|
||||
if (machineData) {
|
||||
row[machine.deviceId] = this.formatParameterValue(
|
||||
machineData[param.key],
|
||||
param.key
|
||||
)
|
||||
} else {
|
||||
row[machine.deviceId] = '-'
|
||||
}
|
||||
})
|
||||
|
||||
return row
|
||||
})
|
||||
},
|
||||
|
||||
// 格式化参数值
|
||||
formatParameterValue(value, key) {
|
||||
if (value === null || value === undefined || value === '') {
|
||||
return '-'
|
||||
}
|
||||
|
||||
// 处理数组类型的数据（如主轴转速组、伺服负载组）
|
||||
if (Array.isArray(value)) {
|
||||
return value.map((v) => v || 0).join(', ')
|
||||
}
|
||||
|
||||
// 处理字符串类型的数组（如 "[0,0,0,0,0,0,0,0]"）
|
||||
if (
|
||||
typeof value === 'string' &&
|
||||
value.startsWith('[') &&
|
||||
value.endsWith(']')
|
||||
) {
|
||||
try {
|
||||
const arr = JSON.parse(value)
|
||||
return arr.map((v) => v || 0).join(', ')
|
||||
} catch (e) {
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
// 处理时间相关字段
|
||||
const timeFields = [
|
||||
'开机时间',
|
||||
'运行时间',
|
||||
'切削时间',
|
||||
'循环时间',
|
||||
'机床时间'
|
||||
]
|
||||
if (timeFields.includes(key)) {
|
||||
return this.formatTime(value)
|
||||
}
|
||||
|
||||
// 处理数字字段
|
||||
if (typeof value === 'number') {
|
||||
return value
|
||||
}
|
||||
|
||||
return value
|
||||
},
|
||||
|
||||
// 格式化时间
|
||||
formatTime(value) {
|
||||
if (!value) return '-'
|
||||
|
||||
// 如果是数字，假设是秒数
|
||||
if (typeof value === 'number') {
|
||||
const hours = Math.floor(value / 3600)
|
||||
const minutes = Math.floor((value % 3600) / 60)
|
||||
const seconds = Math.floor(value % 60)
|
||||
|
||||
if (hours > 0) {
|
||||
return `${hours}h ${minutes}m ${seconds}s`
|
||||
} else if (minutes > 0) {
|
||||
return `${minutes}m ${seconds}s`
|
||||
} else {
|
||||
return `${seconds}s`
|
||||
}
|
||||
}
|
||||
|
||||
return value
|
||||
},
|
||||
|
||||
// 启动定时刷新
|
||||
startMachineDataTimer() {
|
||||
this.machineDataTimer = setInterval(() => {
|
||||
this.searchMachineData()
|
||||
}, 5000) // 1秒刷新一次
|
||||
},
|
||||
|
||||
// 表格头部样式
|
||||
headerCellStyle() {
|
||||
return {
|
||||
backgroundColor: 'rgba(24, 78, 135, 0.8)',
|
||||
color: '#fff',
|
||||
fontSize: '22px',
|
||||
fontWeight: 'normal',
|
||||
textAlign: 'center',
|
||||
border: '1px solid #fff'
|
||||
}
|
||||
},
|
||||
|
||||
// 表格单元格样式
|
||||
cellStyle() {
|
||||
return {
|
||||
backgroundColor: 'rgba(0, 38, 121, 0.3)',
|
||||
color: '#fff',
|
||||
fontSize: '18px',
|
||||
textAlign: 'center',
|
||||
border: '1px solid #fff',
|
||||
padding: '8px 4px',
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
|
||||
updateDateTime() {
|
||||
const now = new Date()
|
||||
const formatDateNumber = (num) => (num < 10 ? '0' + num : num)
|
||||
|
||||
const year = now.getFullYear()
|
||||
const month = formatDateNumber(now.getMonth() + 1)
|
||||
const day = formatDateNumber(now.getDate())
|
||||
|
||||
let hour = now.getHours()
|
||||
const ampm = hour >= 12 ? 'PM' : 'AM'
|
||||
hour = hour % 12 || 12
|
||||
|
||||
const minute = formatDateNumber(now.getMinutes())
|
||||
const second = formatDateNumber(now.getSeconds())
|
||||
|
||||
this.usDateTime = `${month}/${day}/${year} ${formatDateNumber(
|
||||
hour
|
||||
)}:${minute}:${second} ${ampm}`
|
||||
},
|
||||
|
||||
getScale() {
|
||||
const w = window.innerWidth / this.style.width
|
||||
const h = window.innerHeight / this.style.height
|
||||
return { x: w, y: h }
|
||||
},
|
||||
|
||||
setScale() {
|
||||
const scale = this.getScale()
|
||||
this.style.transform =
|
||||
'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
|
||||
},
|
||||
|
||||
goHomePage() {
|
||||
this.$router.push('/')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
/* 复制相同的样式 */
|
||||
.allShow {
|
||||
overflow-y: hidden;
|
||||
z-index: 100;
|
||||
transform-origin: 0 0;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transition: 0.3s;
|
||||
color: white;
|
||||
font-family: "Microsoft YaHei", 微软雅黑, "PingFang SC", "Helvetica Neue",
|
||||
Helvetica, Arial, sans-serif;
|
||||
background-image: url("../../public/背景.png");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.topBox {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
z-index: 10;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
background-image: url(../../public/top1.png);
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 20px;
|
||||
height: calc(100% - 100px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*表格透明写法*/
|
||||
::v-deep .el-table,
|
||||
.el-table__expanded-cell {
|
||||
background-color: transparent;
|
||||
}
|
||||
::v-deep .el-table th {
|
||||
background-color: transparent !important;
|
||||
color: #fefefe;
|
||||
}
|
||||
::v-deep .el-table tr {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
::v-deep .el-table--enable-row-transition .el-table__body td,
|
||||
::v-deep.el-table .cell {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
border: none;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
::v-deep.el-table th > .cell {
|
||||
color: rgba(254, 254, 254, 1);
|
||||
font-weight: 700;
|
||||
}
|
||||
::v-deep .el-table td,
|
||||
.el-table th {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper::-webkit-scrollbar {
|
||||
/*width: 0;宽度为0隐藏*/
|
||||
width: 0;
|
||||
}
|
||||
.el-table::before {
|
||||
/*left: 0;*/
|
||||
/*bottom: 0;*/
|
||||
width: 100%;
|
||||
height: 0;
|
||||
}
|
||||
table {
|
||||
border-right: 1px solid #d7d7d7;
|
||||
border-bottom: 1px solid #d7d7d7;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table th {
|
||||
border-left: 1px solid #d7d7d7;
|
||||
border-top: 1px solid #d7d7d7;
|
||||
}
|
||||
|
||||
table td {
|
||||
border-left: 1px solid #d7d7d7;
|
||||
border-top: 1px solid #d7d7d7;
|
||||
}
|
||||
.data-table-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
1579
src/views/HomePage copy.vue
Normal file
1579
src/views/HomePage copy.vue
Normal file
File diff suppressed because it is too large
Load Diff
1666
src/views/HomePage.vue
Normal file
1666
src/views/HomePage.vue
Normal file
File diff suppressed because it is too large
Load Diff
1750
src/views/index copy.vue
Normal file
1750
src/views/index copy.vue
Normal file
File diff suppressed because it is too large
Load Diff
134
src/views/page/UploadExcel.vue
Normal file
134
src/views/page/UploadExcel.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div>
|
||||
<input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
|
||||
<div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
|
||||
将Excel文件拖入或
|
||||
<el-button :loading="loading" style="margin-left: 16px" plain type="success" size="mini" @click="handleUpload">浏览</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import XLSX from 'xlsx'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
beforeUpload: Function, // eslint-disable-line
|
||||
onSuccess: Function// eslint-disable-line
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
excelData: {
|
||||
header: null,
|
||||
results: null
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateData({ header, results }) {
|
||||
this.excelData.header = header
|
||||
this.excelData.results = results
|
||||
this.onSuccess && this.onSuccess(this.excelData)
|
||||
},
|
||||
handleDrop(e) {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
if (this.loading) return
|
||||
const files = e.dataTransfer.files
|
||||
if (files.length !== 1) {
|
||||
this.$message.error('Only support uploading one file!')
|
||||
return
|
||||
}
|
||||
const rawFile = files[0] // only use files[0]
|
||||
if (!this.isExcel(rawFile)) {
|
||||
this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files')
|
||||
return false
|
||||
}
|
||||
this.upload(rawFile)
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
},
|
||||
handleDragover(e) {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
e.dataTransfer.dropEffect = 'copy'
|
||||
},
|
||||
handleUpload() {
|
||||
this.$refs['excel-upload-input'].click()
|
||||
},
|
||||
handleClick(e) {
|
||||
const files = e.target.files
|
||||
const rawFile = files[0] // only use files[0]
|
||||
if (!rawFile) return
|
||||
this.upload(rawFile)
|
||||
},
|
||||
upload(rawFile) {
|
||||
this.$refs['excel-upload-input'].value = null // fix can't select the same excel
|
||||
if (!this.beforeUpload) {
|
||||
this.readerData(rawFile)
|
||||
return
|
||||
}
|
||||
const before = this.beforeUpload(rawFile)
|
||||
if (before) {
|
||||
this.readerData(rawFile)
|
||||
}
|
||||
},
|
||||
readerData(rawFile) {
|
||||
this.loading = true
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = e => {
|
||||
const data = e.target.result
|
||||
const workbook = XLSX.read(data, { type: 'array' })
|
||||
const firstSheetName = workbook.SheetNames[0]
|
||||
const worksheet = workbook.Sheets[firstSheetName]
|
||||
const header = this.getHeaderRow(worksheet)
|
||||
const results = XLSX.utils.sheet_to_json(worksheet)
|
||||
this.generateData({ header, results })
|
||||
this.loading = false
|
||||
resolve()
|
||||
}
|
||||
reader.readAsArrayBuffer(rawFile)
|
||||
})
|
||||
},
|
||||
getHeaderRow(sheet) {
|
||||
const headers = []
|
||||
const range = XLSX.utils.decode_range(sheet['!ref'])
|
||||
let C
|
||||
const R = range.s.r
|
||||
/* start in the first row */
|
||||
for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
|
||||
const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
|
||||
/* find the cell in the first row */
|
||||
let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
|
||||
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
|
||||
headers.push(hdr)
|
||||
}
|
||||
return headers
|
||||
},
|
||||
isExcel(file) {
|
||||
return /\.(xlsx|xls|csv)$/.test(file.name)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.excel-upload-input{
|
||||
display: none;
|
||||
z-index: -9999;
|
||||
}
|
||||
.drop{
|
||||
border: 2px dashed #bbb;
|
||||
width: 600px;
|
||||
height: 160px;
|
||||
line-height: 160px;
|
||||
margin: 0 auto;
|
||||
font-size: 24px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
color: #bbb;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
223
src/views/page/alarmManagementPage.vue
Normal file
223
src/views/page/alarmManagementPage.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card style="height: 958px; border-radius: 0%">
|
||||
<el-col :span="8">
|
||||
<span style="color: #ff0000; font-weight: bolder">设备实时报警</span>
|
||||
<el-button
|
||||
:disabled="loading"
|
||||
type="text"
|
||||
icon="el-icon-refresh"
|
||||
style="margin-left: 10px; font-size: 14px"
|
||||
@click="searchTable()"
|
||||
></el-button>
|
||||
<div style="margin-top: 10px">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:header-cell-style="{ background: '#F5F5F5' }"
|
||||
element-loading-text="数据加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.2)"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
height="850"
|
||||
border
|
||||
highlight-current-row
|
||||
stripe
|
||||
>
|
||||
<el-table-column type="index" width="50"> </el-table-column>
|
||||
<el-table-column align="center" label="报警内容" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.报警内容 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="开始时间" width="180">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.开始时间 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="15" style="margin-left: 10px">
|
||||
<span>报警名称</span>
|
||||
<el-input
|
||||
v-model="alarmName"
|
||||
style="width: 250px; margin-left: 10px"
|
||||
clearable
|
||||
placeholder="报警名称"
|
||||
></el-input>
|
||||
<span style="margin-left: 5px">日期：</span>
|
||||
<el-date-picker
|
||||
v-model="deliveryDate"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
end-placeholder="结束日期"
|
||||
style="width: 250px"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="loading"
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-search"
|
||||
style="margin-left: 10px"
|
||||
@click="searchTable1()"
|
||||
>查询</el-button
|
||||
>
|
||||
<div style="margin-top: 10px">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData1"
|
||||
:header-cell-style="{ background: '#F5F5F5' }"
|
||||
element-loading-text="数据加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.2)"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
height="780"
|
||||
border
|
||||
highlight-current-row
|
||||
stripe
|
||||
>
|
||||
<el-table-column type="index" width="50"> </el-table-column>
|
||||
<el-table-column align="center" label="报警内容" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.报警内容 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="开始时间" width="180">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.开始时间 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="解除时间" width="180">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.结束时间 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="持续时长(s)" width="180">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.持续时间 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="block" style="margin-top: 10px">
|
||||
<el-pagination
|
||||
:current-page="PageCurrent"
|
||||
:page-sizes="[50, 70, 100, 150]"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getNowTime2 } from "@/utils/tool";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
deliveryDate: [],
|
||||
textarea: "",
|
||||
alarmName: "",
|
||||
programName: "",
|
||||
upValue: 0,
|
||||
downValue: 0,
|
||||
loading: false,
|
||||
tableData: [],
|
||||
tableData1: [],
|
||||
timer: null,
|
||||
total: 0, // 总条数
|
||||
pageSize: 50, // 每页显示条数
|
||||
PageCurrent: 1, // 后台获取页
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.searchTable();
|
||||
this.searchTable1();
|
||||
},
|
||||
created() {
|
||||
const scope = this;
|
||||
const start = new Date();
|
||||
const end = new Date(start.getTime() - 3600 * 1000 * 24 * 15);
|
||||
this.deliveryDate[1] = getNowTime2(start);
|
||||
this.deliveryDate[0] = getNowTime2(end);
|
||||
this.timer = setInterval(() => {
|
||||
scope.searchTable();
|
||||
}, 5000);
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
methods: {
|
||||
searchTable() {
|
||||
var param = [];
|
||||
var Data = this.CreateData("11", "报警管理_设备当前报警_查询", param);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
if (response.data.length !== 0) {
|
||||
this.tableData = response.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
searchTable1() {
|
||||
this.loading = true;
|
||||
var param = [];
|
||||
param[0] = ["开始时间", this.deliveryDate[0]];
|
||||
param[1] = ["结束时间", this.deliveryDate[1]];
|
||||
param[2] = ["PageCurrent", this.PageCurrent];
|
||||
param[3] = ["PageSize", this.pageSize];
|
||||
param[4] = ["PageCount", "1111", "int", "1"];
|
||||
param[5] = ["ItemCount", "1111", "int", "1"];
|
||||
param[6] = ["报警名称", this.alarmName];
|
||||
var Data = this.CreateData("11", "报警管理_设备历史报警_查询", param);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
if (response.data.length !== 0) {
|
||||
this.tableData1 = response.data.result;
|
||||
this.total = parseInt(response.data.output[0].ItemCount);
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.PageCurrent = 1;
|
||||
this.pageSize = val;
|
||||
this.searchTable1();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.PageCurrent = val;
|
||||
this.searchTable1();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.div1 {
|
||||
width: 140px;
|
||||
height: 105px;
|
||||
margin-left: 15px;
|
||||
margin-top: 15px;
|
||||
background: green;
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
}
|
||||
.div2 {
|
||||
width: 140px;
|
||||
height: 105px;
|
||||
margin-left: 15px;
|
||||
margin-top: 15px;
|
||||
background: #60839e;
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
}
|
||||
.Checkbox {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
600
src/views/page/andonCallPage1.vue
Normal file
600
src/views/page/andonCallPage1.vue
Normal file
@@ -0,0 +1,600 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card style="height: 867px">
|
||||
<span>工位：</span>
|
||||
<el-select v-model="opnameThis" style="width:250px" placeholder="工位号">
|
||||
<el-option
|
||||
v-for="item in opnames"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"/>
|
||||
</el-select>
|
||||
<span style="margin-left: 10px">类型：</span>
|
||||
<el-select v-model="andonBasic" multiple collapse-tags style="width:200px" placeholder="andon类型">
|
||||
<el-option
|
||||
v-for="item in andonBasicList"
|
||||
:key="item.AndonCode"
|
||||
:label="item.AndonName"
|
||||
:value="item.AndonCode"/>
|
||||
</el-select>
|
||||
<span style="margin-left: 10px">日期：</span>
|
||||
<el-date-picker v-model="deliveryDate" type="daterange" range-separator="至" start-placeholder="开始日期" value-format="yyyy-MM-dd" end-placeholder="结束日期" style="width:250px"/>
|
||||
<el-button :disabled="loading" type="success" plain icon="el-icon-search" style="margin-left: 10px" @click="searchTable()">查询</el-button>
|
||||
<el-button :disabled="loading" type="warning" plain icon="el-icon-download" style="margin-left: 10px" @click="searchTable1()">导出</el-button>
|
||||
<div style="margin-top: 10px">
|
||||
<el-col :span="14">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
:header-cell-style="{background:'#F5F5F5'}"
|
||||
element-loading-text="数据加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.2)"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
height="740"
|
||||
border
|
||||
highlight-current-row
|
||||
stripe>
|
||||
<el-table-column
|
||||
type="index"
|
||||
align="center"
|
||||
width="50">
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="Andon类型" min-width="50">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.AndonName }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="呼叫时间" min-width="60">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.TriggerTime }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="响应时间" min-width="60">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.ResponseTime }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="响应时长(H)" min-width="60">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.CountResponseTime }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="解除时间" min-width="60">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.CallOffTime }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="处理时长(H)" min-width="50">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.CountTime }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="block" style="margin-top: 10px;">
|
||||
<el-pagination
|
||||
v-if="!loading"
|
||||
:current-page="PageCurrent"
|
||||
:page-sizes="[50, 70, 100, 150]"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-row>
|
||||
<div style="height: 370px;border: 1px solid #c4c4c4">
|
||||
<div class="div11" style="height: 240px">
|
||||
<el-button v-for="(item,index) in andonBasicList" :ref="'andon_' + item.AndonCode" :key="index" class="div12" @click="clickAndon(item.AndonCode)">
|
||||
{{item.AndonName}}
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="div11" style="height: 100px;">
|
||||
<el-button :disabled="callEnable" style="border: none" @click="callAndon(1)">
|
||||
<img class="picture" src="../../assets/image/call.png">
|
||||
</el-button>
|
||||
<el-button :disabled="receiveEnable" style="border: none" @click="callAndon(2)">
|
||||
<img class="picture" src="../../assets/image/response.png">
|
||||
</el-button>
|
||||
<el-button :disabled="resetEnable" style="border: none" @click="callAndon(0)">
|
||||
<img class="picture" src="../../assets/image/reset.png">
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="div111" style="height: 30px">
|
||||
<div class="call">呼叫</div>
|
||||
<div class="receive">响应</div>
|
||||
<div class="reset">复位</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-card style="height: 370px;border: 1px solid #c4c4c4">
|
||||
<div id="myChart2222" style="width: 630px;height: 350px"/>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getNowTime2 } from '@/utils/tool'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
callEnable: true,
|
||||
resetEnable: true,
|
||||
receiveEnable: true,
|
||||
PersonNum: 1,
|
||||
andonBasicList: [],
|
||||
andonBasic: [],
|
||||
andonCurrList: [],
|
||||
andonSelectList: [],
|
||||
andonCurrSelectList: [],
|
||||
opMeasureRangeData: {
|
||||
name: '',
|
||||
min1: 0,
|
||||
max1: 0,
|
||||
min2: 0,
|
||||
max2: 0
|
||||
},
|
||||
upValue: 0,
|
||||
downValue: 0,
|
||||
daliyOutPutData_X: [],
|
||||
daliyOutPutData_Y: [],
|
||||
daliyOutPutData_Average: [],
|
||||
daliyOutPutData1_X: [],
|
||||
daliyOutPutData1_Y: [],
|
||||
daliyOutPutData1_Average: [],
|
||||
opnames: [],
|
||||
opnameThis: '',
|
||||
opnameThisName: '',
|
||||
ymin: 0,
|
||||
ymax: 100,
|
||||
listOP: [],
|
||||
deliveryDate: [],
|
||||
loading: false,
|
||||
tableData: [],
|
||||
total: 0, // 总条数
|
||||
pageSize: 50, // 每页显示条数
|
||||
PageCurrent: 1 // 后台获取页
|
||||
}
|
||||
},
|
||||
props: ['opname'],
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.searchTable()
|
||||
},
|
||||
created() {
|
||||
const start = new Date()
|
||||
const end = new Date(start.getTime() - 3600 * 1000 * 24 * 20)
|
||||
this.deliveryDate[1] = getNowTime2(start)
|
||||
this.deliveryDate[0] = getNowTime2(end)
|
||||
this.searchTableAndonBasic()
|
||||
this.opnameThis = this.opname
|
||||
this.searchTableOpName()
|
||||
},
|
||||
methods: {
|
||||
sendAndonMessageToMes(QtypeID, State, StationID) {
|
||||
|
||||
},
|
||||
// 获取工位号
|
||||
searchTableOpName() {
|
||||
var param = []
|
||||
this.machineInfo_state = {}
|
||||
var Data = this.CreateData('11', 'AAA临工看板_主看板_查询数据', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
this.opnames.push({
|
||||
label: response.data[i].工位号 + '-' + response.data[i].工位名称,
|
||||
value: response.data[i].工位号,
|
||||
id: response.data[i].id
|
||||
})
|
||||
if (response.data[i].工位号 === this.opnameThis) {
|
||||
this.opnameThisName = response.data[i].工位号 + '-' + response.data[i].工位名称
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取Andon基础表
|
||||
searchTableAndonBasic() {
|
||||
var param = []
|
||||
this.andonBasicList = []
|
||||
var Data = this.CreateData('11', 'LG_临工看板_Andon管理_基础数据查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
this.andonBasicList.push({
|
||||
AndonCode: response.data[i].AndonCode,
|
||||
AndonName: response.data[i].AndonName
|
||||
})
|
||||
this.andonBasic.push(response.data[i].AndonCode)
|
||||
}
|
||||
this.searchTableAndon()
|
||||
})
|
||||
},
|
||||
// 获取Andon实时表
|
||||
searchTableAndon() {
|
||||
var param = []
|
||||
this.andonCurrList = []
|
||||
param[0] = ['opname', this.opnameThis]
|
||||
var Data = this.CreateData('11', 'LG_临工看板_Andon管理_当前Andon', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
if (response.data.length > 0) {
|
||||
this.andonCurrList = response.data
|
||||
}
|
||||
this.solveAndon()
|
||||
this.solveButtonStatus()
|
||||
})
|
||||
},
|
||||
solveAndon() {
|
||||
this.$nextTick(() => {
|
||||
for (const andonInfo of this.andonCurrList) {
|
||||
if (andonInfo.ProcessType === 1) {
|
||||
this.$refs['andon_' + andonInfo.AndonCode][0].$el.style.color = '#f57777'
|
||||
}
|
||||
if (andonInfo.ProcessType === 2) {
|
||||
this.$refs['andon_' + andonInfo.AndonCode][0].$el.style.color = '#ecb665'
|
||||
}
|
||||
if (andonInfo.ProcessType === 0) {
|
||||
this.$refs['andon_' + andonInfo.AndonCode][0].$el.style.color = '#409EFF'
|
||||
}
|
||||
}
|
||||
const arrayList = this.andonBasicList.filter(item => !this.andonCurrList.some(ele => ele.AndonCode === item.AndonCode))
|
||||
for (const andonInfo of arrayList) {
|
||||
this.$refs['andon_' + andonInfo.AndonCode][0].$el.style.color = '#409EFF'
|
||||
}
|
||||
})
|
||||
},
|
||||
solveButtonStatus() {
|
||||
const ValueColorMap = new Map()
|
||||
this.andonSelectList.forEach(value => {
|
||||
const color = this.$refs[value][0].$el.style.color
|
||||
ValueColorMap.set(color, color)
|
||||
})
|
||||
const call = 'rgb(245, 119, 119)'
|
||||
const reset = 'rgb(64, 158, 255)'
|
||||
const receive = 'rgb(236, 182, 101)'
|
||||
if (ValueColorMap.size > 1) {
|
||||
this.callEnable = true
|
||||
this.resetEnable = true
|
||||
this.receiveEnable = true
|
||||
} else {
|
||||
if (ValueColorMap.get(reset)) {
|
||||
this.callEnable = false
|
||||
this.resetEnable = true
|
||||
this.receiveEnable = true
|
||||
} else if (ValueColorMap.get(call)) {
|
||||
this.callEnable = true
|
||||
this.resetEnable = true
|
||||
this.receiveEnable = false
|
||||
} else if (ValueColorMap.get(receive)) {
|
||||
this.callEnable = true
|
||||
this.resetEnable = false
|
||||
this.receiveEnable = true
|
||||
} else {
|
||||
this.callEnable = true
|
||||
this.resetEnable = true
|
||||
this.receiveEnable = true
|
||||
}
|
||||
}
|
||||
},
|
||||
clickAndon(AndonCode) {
|
||||
if (this.andonSelectList.indexOf('andon_' + AndonCode) !== -1) {
|
||||
this.andonSelectList = this.andonSelectList.filter(res => { return res !== 'andon_' + AndonCode })
|
||||
} else {
|
||||
this.andonSelectList.push('andon_' + AndonCode)
|
||||
}
|
||||
let currentText = this.$refs['andon_' + AndonCode][0].$el.innerText
|
||||
if (currentText.indexOf('√') !== -1) {
|
||||
currentText = currentText.replace('√', '')
|
||||
this.$refs['andon_' + AndonCode][0].$el.innerText = currentText
|
||||
this.$refs['andon_' + AndonCode][0].$el.style.border = '1px solid #b3d8ff'
|
||||
} else {
|
||||
currentText = '√' + currentText
|
||||
this.$refs['andon_' + AndonCode][0].$el.innerText = currentText
|
||||
this.$refs['andon_' + AndonCode][0].$el.style.border = '4px solid #0080ff'
|
||||
}
|
||||
this.solveButtonStatus()
|
||||
},
|
||||
// andon呼叫 响应 解除
|
||||
callAndon(type) {
|
||||
if (this.andonSelectList.length === 0) {
|
||||
this.$message.warning('请选择要处理的andon')
|
||||
return
|
||||
}
|
||||
const andonCodeList = [1, 2, 0]
|
||||
var param = []
|
||||
const AndonCodePromise = []
|
||||
for (const andonInfo of this.andonSelectList) {
|
||||
AndonCodePromise.push(new Promise((resolve, reject) => {
|
||||
param[0] = ['AndonCode', andonInfo.replace('andon_', '')]
|
||||
param[1] = ['type', type]
|
||||
param[2] = ['opname', this.opnameThis]
|
||||
param[3] = ['PersonNum', this.PersonNum]
|
||||
var Data = this.CreateData('12', 'LG_临工看板_Andon管理_Andon呼叫解除', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
if (response.data[0].result === '1') {
|
||||
resolve(response.data[0].result)
|
||||
} else {
|
||||
reject(response.data[0].result)
|
||||
}
|
||||
})
|
||||
}))
|
||||
}
|
||||
const AndonCodePromiseMes = []
|
||||
for (const andonInfo of this.andonSelectList) {
|
||||
AndonCodePromiseMes.push(new Promise((resolve, reject) => {
|
||||
const url = 'apis/WebService/Andon.asmx'
|
||||
const xmlData = `<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:mes="http://mes.elingong.cn/">
|
||||
<soapenv:Header/>
|
||||
<soapenv:Body>
|
||||
<mes:Andon_Alarm>
|
||||
<mes:Qtype>${andonInfo.replace('andon_', '')}</mes:Qtype>
|
||||
<mes:State>${andonCodeList[type]}</mes:State>
|
||||
<!--Optional:-->
|
||||
<mes:StationID>${this.opnameThis}</mes:StationID>
|
||||
</mes:Andon_Alarm>
|
||||
</soapenv:Body>
|
||||
</soapenv:Envelope>`
|
||||
this.Andon_Alarm(url, xmlData).then(response => {
|
||||
resolve(response)
|
||||
}).catch(err => {
|
||||
reject(err)
|
||||
})
|
||||
}))
|
||||
}
|
||||
Promise.all(AndonCodePromise).then(res => {
|
||||
for (const argument of this.andonSelectList) {
|
||||
let currentText = this.$refs[argument][0].$el.innerText
|
||||
currentText = currentText.replace('√', '')
|
||||
this.$refs[argument][0].$el.innerText = currentText
|
||||
this.$refs[argument][0].$el.style.border = '1px solid #b3d8ff'
|
||||
}
|
||||
this.andonSelectList = []
|
||||
this.searchTableAndon()
|
||||
this.solveButtonStatus()
|
||||
})
|
||||
Promise.all(AndonCodePromiseMes).then(res => {
|
||||
for (const paramElement of res) {
|
||||
console.log('res', this.$x2js.xml2js(paramElement.data))
|
||||
try {
|
||||
const xmlData = this.$x2js.xml2js(paramElement.data)
|
||||
const Flag = xmlData.Envelope.Body.Andon_AlarmResponse.Andon_AlarmResult.Flag
|
||||
const Message = xmlData.Envelope.Body.Andon_AlarmResponse.Andon_AlarmResult.Message
|
||||
console.log(Flag, Message)
|
||||
if (Flag === 'true') {
|
||||
this.$message.success(Message)
|
||||
} else {
|
||||
this.$message.warning(Message)
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('error', e)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
searchTable() {
|
||||
let andonCodeString = '0'
|
||||
if (!this.deliveryDate) {
|
||||
this.$message.warning('请选择查询时间')
|
||||
return
|
||||
}
|
||||
if (this.deliveryDate.length < 2) {
|
||||
this.$message.warning('请选择查询时间')
|
||||
return
|
||||
}
|
||||
if (this.deliveryDate[0] === '') {
|
||||
this.$message.warning('请选择查询时间')
|
||||
return
|
||||
}
|
||||
for (const datum of this.andonBasic) {
|
||||
andonCodeString = andonCodeString + ',' + datum
|
||||
}
|
||||
andonCodeString.substring(0, andonCodeString.lastIndexOf(','))
|
||||
|
||||
this.loading = true
|
||||
this.tableData = []
|
||||
var param = []
|
||||
param[0] = ['startTime', this.deliveryDate[0]]
|
||||
param[1] = ['endTime', this.deliveryDate[1]]
|
||||
param[2] = ['PageCurrent', this.PageCurrent]
|
||||
param[3] = ['PageSize', this.pageSize]
|
||||
param[4] = ['PageCount', '1111', 'int', '1']
|
||||
param[5] = ['ItemCount', '1111', 'int', '1']
|
||||
param[6] = ['opname', this.opnameThis]
|
||||
param[7] = ['AndonCode', andonCodeString]
|
||||
|
||||
var Data = this.CreateData('11', 'LG_临工看板_Andon管理_Andon呼叫历史查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
if (response.data.length !== 0) {
|
||||
this.tableData = response.data.result
|
||||
this.total = parseInt(response.data.output[0].ItemCount)
|
||||
}
|
||||
this.loading = false
|
||||
this.searchTable2()
|
||||
})
|
||||
},
|
||||
searchTable2() {
|
||||
this.daliyOutPutData_X = []
|
||||
var param = []
|
||||
param[0] = ['startTime', this.deliveryDate[0]]
|
||||
param[1] = ['endTime', this.deliveryDate[1]]
|
||||
param[2] = ['opname', this.opnameThis]
|
||||
var Data = this.CreateData('11', 'LG_临工看板_Andon管理_Andon呼叫次数统计', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
if (response.data.length !== 0) {
|
||||
this.daliyOutPutData_X = response.data
|
||||
this.drawLine51()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 导出
|
||||
searchTable1() {
|
||||
if (!this.deliveryDate) {
|
||||
this.$message.warning('请选择查询时间')
|
||||
return
|
||||
}
|
||||
if (this.deliveryDate.length < 2) {
|
||||
this.$message.warning('请选择查询时间')
|
||||
return
|
||||
}
|
||||
if (this.deliveryDate[0] === '') {
|
||||
this.$message.warning('请选择查询时间')
|
||||
return
|
||||
}
|
||||
this.tableData1 = []
|
||||
let andonCodeString = '0'
|
||||
for (const datum of this.andonBasic) {
|
||||
andonCodeString = andonCodeString + ',' + datum
|
||||
}
|
||||
var param = []
|
||||
const blob = 'data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7'
|
||||
param[0] = ['startTime', this.deliveryDate[0]]
|
||||
param[1] = ['endTime', this.deliveryDate[1]]
|
||||
param[2] = ['opname', this.opnameThis]
|
||||
param[3] = ['AndonCode', andonCodeString]
|
||||
var Data = this.CreateData('2003', 'LG_临工看板_Andon管理_Andon呼叫历史导出', param)
|
||||
this.exportExcel_NPOI(Data, blob)
|
||||
},
|
||||
//
|
||||
drawLine51() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.$echarts.dispose(document.getElementById('myChart2222'))
|
||||
if (this.daliyOutPutData_X.length === 0) return
|
||||
const myChart2222 = this.$echarts.init(document.getElementById('myChart2222'))
|
||||
// 绘制图表
|
||||
myChart2222.setOption(
|
||||
{
|
||||
title: {
|
||||
text: 'Andon呼叫次数统计',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '呼叫次数',
|
||||
type: 'pie',
|
||||
radius: '70%',
|
||||
data: this.daliyOutPutData_X,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
normal: {
|
||||
formatter: function(params) {
|
||||
console.log(params)
|
||||
const data = params.data
|
||||
return data['name'].replace(' ', '').replace('Andon', '：') + '' + data['value'] + '次'
|
||||
},
|
||||
// formatter: '{b}: {c}次',
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
fontSize: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
)
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.PageCurrent = 1
|
||||
this.pageSize = val
|
||||
this.searchTable()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.PageCurrent = val
|
||||
this.searchTable()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.div1{
|
||||
width: 140px;
|
||||
height: 105px;
|
||||
margin-left:15px;
|
||||
margin-top:15px;
|
||||
background: green;
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
}
|
||||
.div2{
|
||||
width: 140px;
|
||||
height: 105px;
|
||||
margin-left:15px;
|
||||
margin-top:15px;
|
||||
background: #60839e;
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
}
|
||||
.div11{
|
||||
width: 100%;
|
||||
display: flex;/*父元素设置flex属性*/
|
||||
align-items: center;/*垂直交叉轴居中*/
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.div111{
|
||||
width: 100%;
|
||||
display: flex;/*父元素设置flex属性*/
|
||||
align-items: center;/*垂直交叉轴居中*/
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
/*中间部分显示故障的样式*/
|
||||
.div12{
|
||||
width: 170px;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
font-size: 24px;
|
||||
color: #409EFF;
|
||||
background: #ecf5ff;
|
||||
border: 1px solid #b3d8ff;
|
||||
}
|
||||
/*右侧复位图片样式*/
|
||||
.picture{
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
margin: 0 25px;
|
||||
}
|
||||
/*右侧文字样式*/
|
||||
.call{
|
||||
font-size: 25px;
|
||||
color: #f57777;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
/*右侧文字样式*/
|
||||
.receive{
|
||||
font-size: 25px;
|
||||
color: #ecb665;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
.reset{
|
||||
font-size: 25px;
|
||||
color: #409EFF;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
1285
src/views/page/deviceManagementPage.vue
Normal file
1285
src/views/page/deviceManagementPage.vue
Normal file
File diff suppressed because it is too large
Load Diff
515
src/views/page/energyManagementPage.vue
Normal file
515
src/views/page/energyManagementPage.vue
Normal file
@@ -0,0 +1,515 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card style="height: 958px; border-radius: 0%">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="电表总览" name="first" style="height: 867px">
|
||||
<div style="display: flex; flex-wrap: wrap; overflow-y: auto">
|
||||
<div
|
||||
v-for="(item, index) in energyList"
|
||||
:key="index"
|
||||
class="toolCard"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 520px;
|
||||
height: 160px;
|
||||
border: 1px solid #afafaf;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 5px;
|
||||
background-color: #009e1c;
|
||||
color: #fff;
|
||||
"
|
||||
>
|
||||
{{ "【" + item.设备名称 + "】" }}
|
||||
</div>
|
||||
<div
|
||||
style="text-align: left; margin-left: 10px; font-size: 16px"
|
||||
>
|
||||
<el-col :span="10">
|
||||
<div style="height: 40px; line-height: 40px">
|
||||
昨日累计：{{ item.前一日的电能 }}kW·h
|
||||
</div>
|
||||
<div style="height: 40px; line-height: 40px">
|
||||
今日累计：{{ item.电能 }}kW·h
|
||||
</div>
|
||||
<div style="height: 40px; line-height: 40px">
|
||||
产线能耗：{{ item.总能耗 }}kW·h
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<el-row style="margin-top: 20px">
|
||||
<el-col :span="6">
|
||||
<img src="../../img/erengy.png" />
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="18"
|
||||
style="font-size: 34px; font-weight: bolder"
|
||||
>
|
||||
<div style="color: #009e1c">
|
||||
{{ item.今日电能 }}kW·h
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>今日能耗</el-row>
|
||||
</el-col>
|
||||
</div>
|
||||
<div style="margin-left: 20px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="电表详情" name="second" style="height: 867px">
|
||||
<span>电流表：</span>
|
||||
<el-input
|
||||
v-model="deviceName"
|
||||
style="width: 250px; margin-left: 10px"
|
||||
clearable
|
||||
placeholder="设备名称"
|
||||
></el-input>
|
||||
<span style="margin-left: 5px">日期：</span>
|
||||
<el-date-picker
|
||||
v-model="deliveryDate"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
end-placeholder="结束日期"
|
||||
style="width: 250px"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="loading"
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-search"
|
||||
style="margin-left: 10px"
|
||||
@click="searchTable()"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button
|
||||
:disabled="loading"
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
style="margin-left: 10px"
|
||||
@click="searchTable1()"
|
||||
>导出</el-button
|
||||
>
|
||||
<div style="margin-top: 10px">
|
||||
<el-col :span="15">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
:header-cell-style="{ background: '#F5F5F5' }"
|
||||
element-loading-text="数据加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.2)"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
height="780"
|
||||
border
|
||||
highlight-current-row
|
||||
stripe
|
||||
>
|
||||
<el-table-column align="center" label="日期" width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.日期 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="设备名称" min-width="90">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.设备名称 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="当日开始(kW·h)"
|
||||
min-width="90"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.当日开始 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="当日结束(kW·h)"
|
||||
min-width="90"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.当日结束 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="当日消耗(kW·h)"
|
||||
min-width="90"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.当日消耗 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="block" style="margin-top: 10px">
|
||||
<el-pagination
|
||||
:current-page="PageCurrent"
|
||||
:page-sizes="[50, 70, 100, 150]"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<el-row>
|
||||
<div style="height: 370px; border: 1px solid #c4c4c4">
|
||||
<div
|
||||
id="myChart22gt324422"
|
||||
style="width: 600px; height: 350px; margin-top: 5px"
|
||||
/>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-card style="height: 370px; border: 1px solid #c4c4c4">
|
||||
<div
|
||||
id="myChart22gt324ddd422"
|
||||
style="width: 590px; height: 350px; margin-top: 5px"
|
||||
/>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getNowTime2 } from "@/utils/tool";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
let myChartDom1 = null;
|
||||
let myChartDom2 = null;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: "first",
|
||||
energyList: [],
|
||||
opMeasureRangeData: {
|
||||
name: "",
|
||||
min1: 0,
|
||||
max1: 0,
|
||||
min2: 0,
|
||||
max2: 0,
|
||||
},
|
||||
upValue: 0,
|
||||
downValue: 0,
|
||||
daliyOutPutData_X: [],
|
||||
daliyOutPutData_Y: [],
|
||||
daliyOutPutData_Average: [],
|
||||
daliyOutPutData1_X: [],
|
||||
daliyOutPutData1_Y: [],
|
||||
daliyOutPutData1_Average: [],
|
||||
opnames: [],
|
||||
opnameThis: "",
|
||||
deviceName: "",
|
||||
opnameThisName: "",
|
||||
ymin: 0,
|
||||
ymax: 100,
|
||||
listOP: [],
|
||||
deliveryDate: [],
|
||||
loading: false,
|
||||
timer: null,
|
||||
tableData: [],
|
||||
total: 0, // 总条数
|
||||
pageSize: 50, // 每页显示条数
|
||||
PageCurrent: 1, // 后台获取页
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
const scope = this;
|
||||
myChartDom1 = echarts.init(document.getElementById("myChart22gt324422"));
|
||||
myChartDom2 = echarts.init(document.getElementById("myChart22gt324ddd422"));
|
||||
this.timer = setInterval(() => {
|
||||
scope.searchTableToday();
|
||||
}, 5000);
|
||||
},
|
||||
created() {
|
||||
const start = new Date();
|
||||
const end = new Date(start.getTime() - 3600 * 1000 * 24 * 20);
|
||||
this.deliveryDate[1] = getNowTime2(start);
|
||||
this.deliveryDate[0] = getNowTime2(end);
|
||||
this.searchTableToday();
|
||||
this.searchTable();
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
methods: {
|
||||
// 查询主表
|
||||
searchTableToday() {
|
||||
const param = [];
|
||||
var Data = this.CreateData("11", "能源管理_今日能耗_查询", param);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
if (response.data.length !== 0) {
|
||||
this.energyList = response.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 查询主表
|
||||
searchTable() {
|
||||
if (!this.deliveryDate) {
|
||||
this.$message.warning("请选择查询时间");
|
||||
return;
|
||||
}
|
||||
if (this.deliveryDate.length < 2) {
|
||||
this.$message.warning("请选择查询时间");
|
||||
return;
|
||||
}
|
||||
if (this.deliveryDate[0] === "") {
|
||||
this.$message.warning("请选择查询时间");
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
this.tableData = [];
|
||||
var param = [];
|
||||
param[0] = ["开始时间", this.deliveryDate[0]];
|
||||
param[1] = ["结束时间", this.deliveryDate[1]];
|
||||
param[2] = ["设备名称", this.deviceName];
|
||||
param[3] = ["PageCurrent", this.PageCurrent];
|
||||
param[4] = ["PageSize", this.pageSize];
|
||||
param[5] = ["PageCount", "1111", "int", "1"];
|
||||
param[6] = ["ItemCount", "1111", "int", "1"];
|
||||
var Data = this.CreateData("11", "能源管理_每日能耗_历史_查询", param);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
if (response.data.length !== 0) {
|
||||
this.tableData = response.data.result;
|
||||
this.total = parseInt(response.data.output[0].ItemCount);
|
||||
}
|
||||
this.loading = false;
|
||||
this.searchTableChart();
|
||||
});
|
||||
},
|
||||
// 查询折线图
|
||||
searchTableChart() {
|
||||
this.daliyOutPutData_X = [];
|
||||
this.daliyOutPutData_Y = [];
|
||||
var param = [];
|
||||
param[0] = ["开始时间", this.deliveryDate[0]];
|
||||
param[1] = ["结束时间", this.deliveryDate[1]];
|
||||
var Data = this.CreateData("11", "能源管理_每日能耗折线图_查询", param);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
if (response.data.length !== 0) {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
this.daliyOutPutData_X.push(
|
||||
response.data[i]["今日日期"].substring(5, 10)
|
||||
);
|
||||
this.daliyOutPutData_Y.push(response.data[i]["今日电能"]);
|
||||
}
|
||||
}
|
||||
this.searchTable3();
|
||||
this.drawLine51();
|
||||
});
|
||||
},
|
||||
// 查询饼图
|
||||
searchTable3() {
|
||||
this.daliyOutPutData_Y1 = [];
|
||||
var param = [];
|
||||
param[0] = ["开始时间", this.deliveryDate[0]];
|
||||
param[1] = ["结束时间", this.deliveryDate[1]];
|
||||
var Data = this.CreateData("11", "能源管理_单表占比能耗饼图_查询", param);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
console.log(response.data);
|
||||
if (response.data.length !== 0) {
|
||||
for (const info of response.data) {
|
||||
this.daliyOutPutData_Y1.push({
|
||||
name: info.设备名称,
|
||||
value: info.今日电能,
|
||||
});
|
||||
}
|
||||
}
|
||||
this.drawLine5133();
|
||||
});
|
||||
},
|
||||
searchTable1() {
|
||||
if (!this.deliveryDate) {
|
||||
this.$message.warning("请选择查询时间");
|
||||
return;
|
||||
}
|
||||
if (this.deliveryDate.length < 2) {
|
||||
this.$message.warning("请选择查询时间");
|
||||
return;
|
||||
}
|
||||
if (this.deliveryDate[0] === "") {
|
||||
this.$message.warning("请选择查询时间");
|
||||
return;
|
||||
}
|
||||
this.tableData1 = [];
|
||||
|
||||
var param = [];
|
||||
const blob =
|
||||
"data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7";
|
||||
param[0] = ["开始时间", this.deliveryDate[0]];
|
||||
param[1] = ["结束时间", this.deliveryDate[1]];
|
||||
param[2] = ["opname", this.opnameThis];
|
||||
var Data = this.CreateData(
|
||||
"2003",
|
||||
"LG_临工看板_产量管理_测量数据导出",
|
||||
param
|
||||
);
|
||||
this.exportExcel_NPOI(Data, blob);
|
||||
},
|
||||
// 画折线图
|
||||
drawLine51() {
|
||||
if (this.daliyOutPutData_X.length === 0) return;
|
||||
// 绘制图表
|
||||
myChartDom1.setOption({
|
||||
title: {
|
||||
text: "总能耗信息(kW·h)",
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
left: "15%",
|
||||
top: "10%",
|
||||
right: "5%",
|
||||
bottom: "15%",
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.daliyOutPutData_X,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#409EFF",
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
symbolOffset: [0, 10],
|
||||
},
|
||||
axisLabel: {
|
||||
color: "409EFF",
|
||||
interval: 0,
|
||||
rotate: 45,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
style: "#409EFF",
|
||||
scale: true,
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#409EFF",
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
symbolOffset: [0, 10],
|
||||
},
|
||||
axisLabel: {
|
||||
color: "409EFF",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.daliyOutPutData_Y,
|
||||
type: "line",
|
||||
color: "#006868",
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
// 画饼图
|
||||
drawLine5133() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
if (this.daliyOutPutData_X.length === 0) return;
|
||||
// 绘制图表
|
||||
myChartDom2.setOption({
|
||||
title: {
|
||||
text: "单表能耗占比",
|
||||
left: "left",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: "right",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "单表能耗",
|
||||
type: "pie",
|
||||
radius: "65%",
|
||||
data: this.daliyOutPutData_Y1,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 8,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
normal: {
|
||||
textStyle: {
|
||||
fontWeight: "normal",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.PageCurrent = 1;
|
||||
this.pageSize = val;
|
||||
this.searchTable();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.PageCurrent = val;
|
||||
this.searchTable();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.toolCard {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
margin: 10px 0 0 10px;
|
||||
}
|
||||
.div1 {
|
||||
width: 140px;
|
||||
height: 105px;
|
||||
margin-left: 15px;
|
||||
margin-top: 15px;
|
||||
background: green;
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
}
|
||||
.div2 {
|
||||
width: 140px;
|
||||
height: 105px;
|
||||
margin-left: 15px;
|
||||
margin-top: 15px;
|
||||
background: #60839e;
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
}
|
||||
.Checkbox {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
1232
src/views/page/firstStation.vue
Normal file
1232
src/views/page/firstStation.vue
Normal file
File diff suppressed because it is too large
Load Diff
1165
src/views/page/firstStation1.vue
Normal file
1165
src/views/page/firstStation1.vue
Normal file
File diff suppressed because it is too large
Load Diff
383
src/views/page/orderManagementPage.vue
Normal file
383
src/views/page/orderManagementPage.vue
Normal file
@@ -0,0 +1,383 @@
|
||||
<template>
|
||||
<el-card style="height: 958px">
|
||||
<span>上线时间：</span>
|
||||
<el-date-picker v-model="deliveryDate" type="daterange" range-separator="至" start-placeholder="开始日期" value-format="yyyy-MM-dd" end-placeholder="结束日期" style="width:250px"/>
|
||||
<el-button :disabled="loading" type="success" plain icon="el-icon-search" style="margin-left: 10px" @click="searchTable()">查询</el-button>
|
||||
<el-button :disabled="loading" type="warning" plain icon="el-icon-download" style="margin-left: 10px" @click="searchTable1()">导出</el-button>
|
||||
<div style="margin-top: 10px">
|
||||
<el-col :span="14">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
:header-cell-style="{background:'#F5F5F5'}"
|
||||
element-loading-text="数据加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.2)"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
height="740"
|
||||
border
|
||||
highlight-current-row
|
||||
stripe>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="50">
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="工位号" width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.opName }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="工位名称" min-width="60">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.工位名称 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="工件号" min-width="60">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.partId }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="上线时间" min-width="60">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.scanTime }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="block" style="margin-top: 10px;">
|
||||
<el-pagination
|
||||
v-if="!loading"
|
||||
:current-page="PageCurrent"
|
||||
:page-sizes="[50, 70, 100, 150]"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-row>
|
||||
<div style="height: 370px;border: 1px solid #c4c4c4">
|
||||
<div id="myChart21" style="width: 100%;height: 350px;margin-top: 5px"/>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<div style="height: 370px;border: 1px solid #c4c4c4">
|
||||
<div id="myChart22" style="width: 100%;height: 350px;margin-top: 5px"/>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
import { getNowTime2 } from '@/utils/tool'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
daliyOutPutData_X: [],
|
||||
daliyOutPutData_Y: [],
|
||||
daliyOutPutData_Average: [],
|
||||
daliyOutPutData1_X: [],
|
||||
daliyOutPutData1_Y: [],
|
||||
daliyOutPutData1_Average: [],
|
||||
deliveryDate: [],
|
||||
loading: false,
|
||||
tableData: [],
|
||||
total: 0, // 总条数
|
||||
pageSize: 50, // 每页显示条数
|
||||
PageCurrent: 1 // 后台获取页
|
||||
}
|
||||
},
|
||||
props: ['opname'],
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.searchTable()
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
created() {
|
||||
const start = new Date()
|
||||
const end = new Date(start.getTime() - 3600 * 1000 * 24 * 15)
|
||||
this.deliveryDate[1] = getNowTime2(start)
|
||||
this.deliveryDate[0] = getNowTime2(end)
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
methods: {
|
||||
searchTable() {
|
||||
if (!this.deliveryDate) {
|
||||
this.$message.warning('请选择查询时间')
|
||||
return
|
||||
}
|
||||
if (this.deliveryDate.length < 2) {
|
||||
this.$message.warning('请选择查询时间')
|
||||
return
|
||||
}
|
||||
if (this.deliveryDate[0] === '') {
|
||||
this.$message.warning('请选择查询时间')
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
this.tableData = []
|
||||
var param = []
|
||||
param[0] = ['开始时间', this.deliveryDate[0]]
|
||||
param[1] = ['结束时间', this.deliveryDate[1]]
|
||||
param[2] = ['PageCurrent', this.PageCurrent]
|
||||
param[3] = ['PageSize', this.pageSize]
|
||||
param[4] = ['PageCount', '1111', 'int', '1']
|
||||
param[5] = ['ItemCount', '1111', 'int', '1']
|
||||
var Data = this.CreateData('11', 'LG_临工看板_产量管理_上线信息查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
if (response.data.length !== 0) {
|
||||
this.tableData = response.data.result
|
||||
this.total = parseInt(response.data.output[0].ItemCount)
|
||||
this.searchdailyOutPutTable()
|
||||
this.searchdailyOutPutTable1()
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
searchTable1() {
|
||||
if (!this.deliveryDate) {
|
||||
this.$message.warning('请选择查询时间')
|
||||
return
|
||||
}
|
||||
if (this.deliveryDate.length < 2) {
|
||||
this.$message.warning('请选择查询时间')
|
||||
return
|
||||
}
|
||||
if (this.deliveryDate[0] === '') {
|
||||
this.$message.warning('请选择查询时间')
|
||||
return
|
||||
}
|
||||
if (this.tableData.length === 0) {
|
||||
this.$message.warning('请查询要导出的数据')
|
||||
return
|
||||
}
|
||||
var param = []
|
||||
const blob = 'data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7'
|
||||
param[0] = ['开始时间', this.deliveryDate[0]]
|
||||
param[1] = ['结束时间', this.deliveryDate[1]]
|
||||
var Data = this.CreateData('2003', 'LG_临工看板_产量管理_上线信息导出', param)
|
||||
this.exportExcel_NPOI(Data, blob)
|
||||
},
|
||||
searchdailyOutPutTable() {
|
||||
var param = []
|
||||
this.daliyOutPutData_X = []
|
||||
this.daliyOutPutData_Y = []
|
||||
param[0] = ['开始时间', this.deliveryDate[0]]
|
||||
param[1] = ['结束时间', this.deliveryDate[1]]
|
||||
param[2] = ['opName', 'OP70']
|
||||
param[3] = ['type', '1']
|
||||
var Data = this.CreateData('11', 'LG_临工看板_产量管理_产出曲线查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
if (response.data.length > 0) {
|
||||
for (const info of response.data) {
|
||||
this.daliyOutPutData_X.push(info.date.substring(info.date.length - 5, info.date.length))
|
||||
this.daliyOutPutData_Y.push(info.num)
|
||||
}
|
||||
let num = 0
|
||||
this.daliyOutPutData_Y.forEach(value => {
|
||||
num += parseInt(value)
|
||||
})
|
||||
this.daliyOutPutData_Average = num / this.daliyOutPutData_Y.length
|
||||
this.drawLine51()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 线产量图
|
||||
drawLine51() {
|
||||
this.$echarts.dispose(document.getElementById('myChart21'))
|
||||
if (this.daliyOutPutData_X.length === 0) return
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
const myChart21 = this.$echarts.init(document.getElementById('myChart21'))
|
||||
// 绘制图表
|
||||
myChart21.setOption(
|
||||
{
|
||||
title: {
|
||||
text: '上线数量(台)'
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
left: '5%',
|
||||
top: '10%',
|
||||
right: '5%',
|
||||
bottom: '15%'
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.daliyOutPutData_X,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#409EFF'
|
||||
},
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolOffset: [0, 10]
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#409EFF',
|
||||
interval: 0,
|
||||
rotate: 45
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
style: '#409EFF',
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#409EFF'
|
||||
},
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolOffset: [0, 10]
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#409EFF'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.daliyOutPutData_Y,
|
||||
type: 'bar',
|
||||
color: '#009797',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
markLine: {
|
||||
symbol: 'none',
|
||||
data: [{ yAxis: Math.trunc(this.daliyOutPutData_Average), name: '平均值' }],
|
||||
lineStyle: {
|
||||
color: '#ffc823'
|
||||
},
|
||||
label: {
|
||||
position: 'end',
|
||||
color: '#409EFF',
|
||||
distance: -80
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
)
|
||||
},
|
||||
searchdailyOutPutTable1() {
|
||||
var param = []
|
||||
this.daliyOutPutData1_X = []
|
||||
this.daliyOutPutData1_Y = []
|
||||
param[0] = ['开始时间', this.deliveryDate[0]]
|
||||
param[1] = ['结束时间', this.deliveryDate[1]]
|
||||
param[2] = ['opName', 'OP150']
|
||||
param[3] = ['type', '2']
|
||||
var Data = this.CreateData('11', 'LG_临工看板_产量管理_产出曲线查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
if (response.data.length > 0) {
|
||||
for (const info of response.data) {
|
||||
this.daliyOutPutData1_X.push(info.date.substring(info.date.length - 5, info.date.length))
|
||||
this.daliyOutPutData1_Y.push(info.num)
|
||||
}
|
||||
let num = 0
|
||||
this.daliyOutPutData1_Y.forEach(value => {
|
||||
num += parseInt(value)
|
||||
})
|
||||
this.daliyOutPutData_Average1 = num / this.daliyOutPutData1_Y.length
|
||||
this.drawLine52()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 下线产量图
|
||||
drawLine52() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
const myChart22 = this.$echarts.init(document.getElementById('myChart22'))
|
||||
// 绘制图表
|
||||
myChart22.setOption(
|
||||
{
|
||||
title: {
|
||||
text: '下线数量(台)'
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
left: '5%',
|
||||
top: '10%',
|
||||
right: '5%',
|
||||
bottom: '15%'
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.daliyOutPutData1_X,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#409EFF'
|
||||
},
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolOffset: [0, 10]
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#409EFF',
|
||||
interval: 0,
|
||||
rotate: 45
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
style: '#409EFF',
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#409EFF'
|
||||
},
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolOffset: [0, 10]
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#409EFF'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.daliyOutPutData1_Y,
|
||||
type: 'bar',
|
||||
color: '#009797',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
markLine: {
|
||||
symbol: 'none',
|
||||
data: [{ yAxis: Math.trunc(this.daliyOutPutData_Average1), name: '平均值' }],
|
||||
lineStyle: {
|
||||
color: '#ffc823'
|
||||
},
|
||||
label: {
|
||||
position: 'end',
|
||||
color: '#409EFF',
|
||||
distance: -80
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
)
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.PageCurrent = 1
|
||||
this.pageSize = val
|
||||
this.searchTable()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.PageCurrent = val
|
||||
this.searchTable()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
|
||||
517
src/views/page/planeManagementPage.vue
Normal file
517
src/views/page/planeManagementPage.vue
Normal file
@@ -0,0 +1,517 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card style="height: 958px; border-radius: 0%">
|
||||
<div style="height: 100px">
|
||||
<div style="display: flex">
|
||||
<div class="planInfo" style="background: #009e1c">
|
||||
<span>工单号</span>
|
||||
<br />
|
||||
<span style="line-height: 0">{{ orderData.ORDER_CODE }}</span>
|
||||
</div>
|
||||
<div class="planInfo" style="background: #009e1c">
|
||||
<span>产品编码</span>
|
||||
<br />
|
||||
<span>{{ orderData.PRO_CODE }}</span>
|
||||
</div>
|
||||
<div class="planInfo" style="background: #009e1c">
|
||||
<span>计划数量</span>
|
||||
<br />
|
||||
<span>{{ orderData.QTY }}</span>
|
||||
</div>
|
||||
<div class="planInfo" style="background: #009e1c">
|
||||
<span>今日下线</span>
|
||||
<br />
|
||||
<span>{{ orderData.QTY_TODAY }}</span>
|
||||
</div>
|
||||
<div class="planInfo" style="background: #009e1c">
|
||||
<span>完成率</span>
|
||||
<br />
|
||||
<span>{{ orderData.完成率 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="产量总览" name="first" style="height: 867px">
|
||||
<div style="display: flex; flex-wrap: wrap; overflow-y: auto">
|
||||
<div
|
||||
v-for="(item, index) in countList"
|
||||
:key="index"
|
||||
class="toolCard"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 400px;
|
||||
height: 160px;
|
||||
border: 1px solid #afafaf;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 5px;
|
||||
background-color: #03a9f4;
|
||||
color: #fff;
|
||||
"
|
||||
>
|
||||
{{ item.工位号 }}{{ "【" + item.工位名称 + "】" }}
|
||||
</div>
|
||||
<div
|
||||
style="text-align: left; margin-left: 10px; font-size: 16px"
|
||||
>
|
||||
<el-col :span="14">
|
||||
<div style="height: 40px; line-height: 40px">
|
||||
今日累计：{{ item.今日累计 }}台
|
||||
</div>
|
||||
<div
|
||||
style="height: 40px; line-height: 40px; color: #ff0000"
|
||||
>
|
||||
今日报废：{{ item.今日报废 }}台
|
||||
</div>
|
||||
<div style="height: 40px; line-height: 40px">
|
||||
昨日合格：{{ item.昨日合格 }}台
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-row style="margin-top: 20px">
|
||||
<el-col :span="6">
|
||||
<img src="../../img/productCount.png" />
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="18"
|
||||
style="font-size: 34px; font-weight: bolder"
|
||||
>
|
||||
<div style="color: #00893d">{{ item.今日合格 }}台</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>今日合格</el-row>
|
||||
</el-col>
|
||||
</div>
|
||||
<div style="margin-left: 20px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="产量详细" name="second" style="height: 867px">
|
||||
<span>工位号：</span>
|
||||
<el-select
|
||||
v-model="opnameThis"
|
||||
style="width: 250px"
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="工位号"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in opnames"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<span style="margin-left: 10px">时间：</span>
|
||||
<el-date-picker
|
||||
v-model="deliveryDate"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
end-placeholder="结束日期"
|
||||
style="width: 250px"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="loading"
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-search"
|
||||
style="margin-left: 10px"
|
||||
@click="searchTable()"
|
||||
>查询</el-button
|
||||
>
|
||||
<!-- <el-button :disabled="loading" type="warning" plain icon="el-icon-download" style="margin-left: 10px" @click="searchTable1()">导出</el-button>-->
|
||||
<div style="margin-top: 10px">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
:header-cell-style="{ background: '#F5F5F5' }"
|
||||
element-loading-text="数据加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.2)"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
height="660"
|
||||
border
|
||||
highlight-current-row
|
||||
stripe
|
||||
>
|
||||
<el-table-column type="index" align="center" width="100">
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="工位名称" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.工位名称 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="产品编码" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.产品编码 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="进站时间" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.进站时间 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="出站时间" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.出站时间 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="节拍(s)" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.停站时长 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="合格标志" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span
|
||||
v-if="scope.row.合格标志 === 2"
|
||||
style="color: #ff0000; font-weight: bolder"
|
||||
>不合格</span
|
||||
>
|
||||
<span v-else style="color: #009e1c; font-weight: bolder"
|
||||
>合格</span
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="block" style="margin-top: 10px">
|
||||
<el-pagination
|
||||
v-if="!loading"
|
||||
:current-page="PageCurrent"
|
||||
:page-sizes="[50, 70, 100, 150]"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<span>上线时间：</span>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getNowTime2 } from "@/utils/tool";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
opnameThis: "",
|
||||
opnames: [],
|
||||
activeName: "first",
|
||||
orderData: {
|
||||
ORDER_CODE: "",
|
||||
QTY: "0",
|
||||
QTY_TODAY: "0",
|
||||
PRO_CODE: "",
|
||||
PLAN_START_DATE: "",
|
||||
PLAN_END_DATE: "",
|
||||
完成率: 0,
|
||||
},
|
||||
addData: {
|
||||
Value: "",
|
||||
planDate: "",
|
||||
},
|
||||
editData: {
|
||||
planDate: "",
|
||||
Value: "",
|
||||
ID: "",
|
||||
disabled: true,
|
||||
},
|
||||
daliyOutPutData_X: [],
|
||||
daliyOutPutData_Y: [],
|
||||
daliyOutPutData_Average: [],
|
||||
daliyOutPutData1_X: [],
|
||||
daliyOutPutData1_Y: [],
|
||||
daliyOutPutData1_Average: [],
|
||||
deliveryDate: [],
|
||||
loading: false,
|
||||
countList: [],
|
||||
tableData: [],
|
||||
total: 0, // 总条数
|
||||
pageSize: 50, // 每页显示条数
|
||||
PageCurrent: 1, // 后台获取页
|
||||
};
|
||||
},
|
||||
props: ["opname"],
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.searchDayPlan();
|
||||
this.searchDayCount();
|
||||
},
|
||||
beforeDestroy() {},
|
||||
created() {
|
||||
this.searchTableOpName();
|
||||
const start = new Date();
|
||||
const end = new Date(start.getTime() - 3600 * 1000 * 24 * 20);
|
||||
this.deliveryDate[1] = getNowTime2(start);
|
||||
this.deliveryDate[0] = getNowTime2(end);
|
||||
},
|
||||
watch: {},
|
||||
methods: {
|
||||
searchTableOpName() {
|
||||
var param = [];
|
||||
this.opnames = [];
|
||||
var Data = this.CreateData("11", "工位管理_工位基础信息_查询", param);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
this.opnames.push({
|
||||
label: response.data[i].工位号 + "-" + response.data[i].工位名称,
|
||||
value: response.data[i].工位号,
|
||||
id: response.data[i].GUID,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
searchDayCount() {
|
||||
this.countList = [];
|
||||
var param = [];
|
||||
var Data = this.CreateData("11", "产量管理_今日产出_查询", param);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
if (response.data.length !== 0) {
|
||||
this.countList = response.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
searchDayPlan() {
|
||||
this.orderData = {};
|
||||
var param = [];
|
||||
var Data = this.CreateData("11", "产量管理_今日计划_查询", param);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
if (response.data.length !== 0) {
|
||||
this.orderData.QTY = response.data[0]["QTY"];
|
||||
this.orderData.PRO_CODE = response.data[0]["PRO_CODE"];
|
||||
this.orderData.QTY_TODAY = response.data[0]["QTY_TODAY"];
|
||||
this.orderData.ORDER_CODE = response.data[0]["ORDER_CODE"];
|
||||
this.orderData.PLAN_END_DATE = response.data[0]["PLAN_END_DATE"];
|
||||
this.orderData.PLAN_START_DATE = response.data[0]["PLAN_START_DATE"];
|
||||
this.orderData.完成率 = response.data[0]["完成率"];
|
||||
}
|
||||
});
|
||||
},
|
||||
searchTable() {
|
||||
if (!this.deliveryDate) {
|
||||
this.$message.warning("请选择查询时间");
|
||||
return;
|
||||
}
|
||||
if (this.deliveryDate.length < 2) {
|
||||
this.$message.warning("请选择查询时间");
|
||||
return;
|
||||
}
|
||||
if (this.deliveryDate[0] === "") {
|
||||
this.$message.warning("请选择查询时间");
|
||||
return;
|
||||
}
|
||||
let op = "";
|
||||
if (this.opnameThis.length === 0) {
|
||||
for (const datum of this.opnames) {
|
||||
op += `${datum.value}","`;
|
||||
}
|
||||
} else {
|
||||
for (const datum of this.opnameThis) {
|
||||
op += `${datum}","`;
|
||||
}
|
||||
}
|
||||
op = "'" + op.substring(0, op.length - 3).replaceAll('"', "'") + "'";
|
||||
this.loading = true;
|
||||
this.tableData = [];
|
||||
var param = [];
|
||||
param[0] = ["开始时间", this.deliveryDate[0]];
|
||||
param[1] = ["结束时间", this.deliveryDate[1]];
|
||||
param[2] = ["PageCurrent", this.PageCurrent];
|
||||
param[3] = ["PageSize", this.pageSize];
|
||||
param[4] = ["PageCount", "1111", "int", "1"];
|
||||
param[1] = ["结束时间", this.deliveryDate[1]];
|
||||
param[5] = ["ItemCount", "1111", "int", "1"];
|
||||
param[6] = ["工位号", op];
|
||||
var Data = this.CreateData("11", "产量管理_过站信息_查询", param);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
if (response.data.result.length !== 0) {
|
||||
this.tableData = response.data.result;
|
||||
this.total = parseInt(response.data.output[0].ItemCount);
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
searchTable1() {
|
||||
if (!this.deliveryDate) {
|
||||
this.$message.warning("请选择查询时间");
|
||||
return;
|
||||
}
|
||||
if (this.deliveryDate.length < 2) {
|
||||
this.$message.warning("请选择查询时间");
|
||||
return;
|
||||
}
|
||||
if (this.deliveryDate[0] === "") {
|
||||
this.$message.warning("请选择查询时间");
|
||||
return;
|
||||
}
|
||||
this.tableData1 = [];
|
||||
|
||||
var param = [];
|
||||
const blob =
|
||||
"data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7";
|
||||
param[0] = ["开始时间", this.deliveryDate[0]];
|
||||
param[1] = ["结束时间", this.deliveryDate[1]];
|
||||
var Data = this.CreateData(
|
||||
"2003",
|
||||
"LG_临工看板_计划管理_每日计划导出",
|
||||
param
|
||||
);
|
||||
this.exportExcel_NPOI(Data, blob);
|
||||
},
|
||||
editPlanInfo(row) {
|
||||
this.editData.ID = row.ID;
|
||||
this.editData.planDate = row.planDate;
|
||||
this.editData.Value = row.Value;
|
||||
this.editData.disabled = false;
|
||||
},
|
||||
confirmEditData() {
|
||||
if (this.editData.Value === null) {
|
||||
this.$message.warning("请重新选择计划");
|
||||
return;
|
||||
}
|
||||
if (this.editData.planDate === "") {
|
||||
this.$message.warning("请重新选择计划");
|
||||
return;
|
||||
}
|
||||
|
||||
var param = [];
|
||||
param[0] = ["planDate", this.editData.planDate];
|
||||
param[1] = ["Value", this.editData.Value];
|
||||
var Data = this.CreateData(
|
||||
"11",
|
||||
"LG_临工看板_计划管理_每日计划新增",
|
||||
param
|
||||
);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
if (response.data.length !== 0) {
|
||||
if (response.data[0]["result"] === 1) {
|
||||
this.$message.success("计划修改成功");
|
||||
} else if (response.data[0]["result"] === 2) {
|
||||
this.$message.success("计划修改成功");
|
||||
} else {
|
||||
this.$message.error("计划修改失败");
|
||||
}
|
||||
this.editData.ID = "";
|
||||
this.editData.planDate = "";
|
||||
this.editData.Value = 0;
|
||||
this.editData.disabled = true;
|
||||
}
|
||||
this.searchTable();
|
||||
});
|
||||
},
|
||||
confirmAddData() {
|
||||
const _this = this;
|
||||
if (this.addData.Value === null) {
|
||||
this.$message.warning("请输入计划数");
|
||||
return;
|
||||
}
|
||||
if (this.addData.planDate === "") {
|
||||
this.$message.warning("请选择计划时间");
|
||||
return;
|
||||
}
|
||||
var param = [];
|
||||
param[0] = ["planDate", this.addData.planDate];
|
||||
param[1] = ["Value", this.addData.Value];
|
||||
var Data = this.CreateData(
|
||||
"11",
|
||||
"LG_临工看板_计划管理_每日计划新增",
|
||||
param
|
||||
);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
if (!_this.deliveryDate) {
|
||||
_this.deliveryDate = [_this.addData.planDate, _this.addData.planDate];
|
||||
}
|
||||
if (_this.deliveryDate.length < 2) {
|
||||
_this.deliveryDate = [_this.addData.planDate, _this.addData.planDate];
|
||||
}
|
||||
if (_this.deliveryDate[0] === "") {
|
||||
_this.deliveryDate = [_this.addData.planDate, _this.addData.planDate];
|
||||
}
|
||||
if (response.data.length !== 0) {
|
||||
if (response.data[0]["result"] === 1) {
|
||||
this.$message.success("计划新增成功");
|
||||
this.addData.planDate = "";
|
||||
this.addData.Value = 0;
|
||||
} else if (response.data[0]["result"] === 2) {
|
||||
this.$message.warning("计划存在，修改成功");
|
||||
this.addData.planDate = "";
|
||||
this.addData.Value = 0;
|
||||
} else {
|
||||
this.$message.error("计划新增失败");
|
||||
}
|
||||
}
|
||||
|
||||
this.searchTable();
|
||||
});
|
||||
},
|
||||
confirmDeleteData() {
|
||||
if (this.editData.Value === null) {
|
||||
this.$message.warning("请重新选择计划");
|
||||
return;
|
||||
}
|
||||
if (this.editData.planDate === "") {
|
||||
this.$message.warning("请重新选择计划");
|
||||
return;
|
||||
}
|
||||
|
||||
var param = [];
|
||||
param[0] = ["ID", this.editData.ID];
|
||||
var Data = this.CreateData(
|
||||
"11",
|
||||
"LG_临工看板_计划管理_每日计划删除",
|
||||
param
|
||||
);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
if (response.data.length !== 0) {
|
||||
if (response.data[0]["result"] === 1) {
|
||||
this.$message.success("计划删除成功");
|
||||
} else {
|
||||
this.$message.error("计划删除失败");
|
||||
}
|
||||
}
|
||||
this.searchTable();
|
||||
});
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.PageCurrent = 1;
|
||||
this.pageSize = val;
|
||||
this.searchTable();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.PageCurrent = val;
|
||||
this.searchTable();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.toolCard {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
margin: 10px 0 0 10px;
|
||||
}
|
||||
.planInfo {
|
||||
height: 100px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
color: white;
|
||||
flex: 1;
|
||||
margin: 0 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
382
src/views/page/processManagementPage.vue
Normal file
382
src/views/page/processManagementPage.vue
Normal file
@@ -0,0 +1,382 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card style="height: 958px; border-radius: 0%">
|
||||
<span>工位号：</span>
|
||||
<el-select
|
||||
v-model="opnameThis"
|
||||
style="width: 200px"
|
||||
clearable
|
||||
placeholder="工位号"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in opnames"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<span style="margin-left: 10px">文件名称：</span>
|
||||
<el-input
|
||||
v-model="processFileName"
|
||||
placeholder="请输入文件名称"
|
||||
style="width: 180px"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-button
|
||||
:disabled="loading"
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-search"
|
||||
style="margin-left: 10px"
|
||||
@click="searchTable()"
|
||||
>查询文件</el-button
|
||||
>
|
||||
<el-upload
|
||||
ref="uploadStandFile"
|
||||
:on-remove="handleRemove"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
:file-list="fileList"
|
||||
:auto-upload="false"
|
||||
:action="action"
|
||||
:data="Data"
|
||||
:limit="1"
|
||||
:on-success="stnFileSuccess"
|
||||
:on-error="stnFileError"
|
||||
accept=".png,.jpg,.jpeg,.pdf,.gif"
|
||||
style="margin-top: 10px"
|
||||
>
|
||||
<el-button slot="trigger" plain type="primary" icon="el-icon-thumb"
|
||||
>选取工艺文件</el-button
|
||||
>
|
||||
<el-button
|
||||
style="margin-left: 10px"
|
||||
plain
|
||||
type="warning"
|
||||
icon="el-icon-upload2"
|
||||
@click="uploadStandFile"
|
||||
>上传文件</el-button
|
||||
>
|
||||
<span
|
||||
style="font-size: 18px; font-weight: bolder; margin-left: 150px"
|
||||
v-if="fileName !== ''"
|
||||
>{{ fileName + "." + fileType }}</span
|
||||
>
|
||||
<span
|
||||
style="font-size: 18px; font-weight: bolder; margin-left: 150px"
|
||||
v-else
|
||||
>请选择左侧文件进行预览</span
|
||||
>
|
||||
<el-button
|
||||
v-show="fileName !== ''"
|
||||
type="text"
|
||||
icon="el-icon-download"
|
||||
style="color: #00893d; margin-left: 10px"
|
||||
@click="downLoadFile"
|
||||
></el-button>
|
||||
</el-upload>
|
||||
<el-col :span="6">
|
||||
<div style="margin-top: 10px">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
:header-cell-style="{ background: '#F5F5F5' }"
|
||||
element-loading-text="数据加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.2)"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
height="825"
|
||||
border
|
||||
highlight-current-row
|
||||
stripe
|
||||
>
|
||||
<el-table-column type="index" width="50"> </el-table-column>
|
||||
<el-table-column align="center" label="工位名称" min-width="80">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.工位名称 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="left" label="文件名称" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.fileName + "." + scope.row.fileType }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="编辑" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-view"
|
||||
@click="searchTable1(scope.row)"
|
||||
></el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
style="color: red"
|
||||
@click="deleteFile(scope.row)"
|
||||
></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div style="height: 814px; border: 1px solid #a1a1a1; margin-top: 10px">
|
||||
<div v-show="fileContent !== ''">
|
||||
<el-image
|
||||
v-if="isImageType"
|
||||
:src="fileContentImg"
|
||||
lazy
|
||||
fit="fill"
|
||||
></el-image>
|
||||
<div v-else-if="isPdfType">
|
||||
<iframe width="100%" height="810px" :src="fileContentPdf">
|
||||
</iframe>
|
||||
</div>
|
||||
<div v-else class="noView">不支持的预览格式</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { action } from "@/utils/request";
|
||||
import $ from "jquery";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageType: ["bmp", "jpg", "png", "gif"],
|
||||
pdfType: ["pdf"],
|
||||
currentDownLoadUrl: "",
|
||||
fileName: "",
|
||||
fileType: "",
|
||||
fileContent: "",
|
||||
fileContentImg: null,
|
||||
fileContentPdf: null,
|
||||
isImageType: false,
|
||||
isPdfType: false,
|
||||
action: action,
|
||||
fileList: [],
|
||||
processFileName: "",
|
||||
opnames: [],
|
||||
opnameThis: "",
|
||||
opnameThisName: "",
|
||||
currentFileInfo: null,
|
||||
listOP: [],
|
||||
loading: false,
|
||||
tableData: [],
|
||||
Data: {},
|
||||
total: 0, // 总条数
|
||||
pageSize: 50, // 每页显示条数
|
||||
PageCurrent: 1, // 后台获取页
|
||||
};
|
||||
},
|
||||
props: ["opname"],
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.searchTableOpName();
|
||||
this.searchTable();
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
// 获取工位号
|
||||
searchTableOpName() {
|
||||
var param = [];
|
||||
this.opnames = [];
|
||||
var Data = this.CreateData("11", "工位管理_工位基础信息_查询", param);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
this.opnames.push({
|
||||
label: response.data[i].工位号 + "-" + response.data[i].工位名称,
|
||||
value: response.data[i].工位号,
|
||||
id: response.data[i].GUID,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 查询文件列表
|
||||
searchTable() {
|
||||
this.loading = true;
|
||||
this.tableData = [];
|
||||
var param = [];
|
||||
param[0] = ["opName", this.opnameThis];
|
||||
param[1] = ["fileName", this.processFileName];
|
||||
var Data = this.CreateData("11", "工艺管理_工艺文件查询", param);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
if (response.data.length !== 0) {
|
||||
this.tableData = response.data;
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 查询文件列表详细
|
||||
searchTable1(row) {
|
||||
var param = [];
|
||||
this.fileName = "";
|
||||
param[0] = ["ID", row.ID];
|
||||
var Data = this.CreateData("11", "工艺管理_工艺文件查询_详细", param);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
if (response.data.length !== 0) {
|
||||
this.lookFile(response.data[0]);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 预览文件
|
||||
lookFile(row) {
|
||||
this.currentFileInfo = row;
|
||||
this.fileName = row.fileName;
|
||||
this.fileType = row.fileType.toLowerCase();
|
||||
this.fileContent = row.fileContent;
|
||||
this.fileContentImg = "";
|
||||
this.fileContentPdf = "";
|
||||
if (this.imageType.indexOf(this.fileType) !== -1) {
|
||||
this.isImageType = true;
|
||||
this.isPdfType = false;
|
||||
this.fileContentImg = "data:image/png;base64," + this.fileContent;
|
||||
} else if (this.pdfType.indexOf(this.fileType) !== -1) {
|
||||
this.isImageType = false;
|
||||
this.isPdfType = true;
|
||||
this.fileContentPdf = this.solvePdfUrl(
|
||||
this.fileContent,
|
||||
this.fileType,
|
||||
this.fileName
|
||||
);
|
||||
} else {
|
||||
this.isImageType = false;
|
||||
this.isPdfType = false;
|
||||
}
|
||||
},
|
||||
// 处理pdf
|
||||
solvePdfUrl(content, type, fileName) {
|
||||
const bstr = atob(content);
|
||||
let n = bstr.length;
|
||||
const u8arr = new Uint8Array(n);
|
||||
while (n--) {
|
||||
u8arr[n] = bstr.charCodeAt(n);
|
||||
}
|
||||
// 确定解析格式，可能可以变成img，没有深入研究
|
||||
const blob = new Blob([u8arr], {
|
||||
type: "application/pdf;chartset=UTF-8",
|
||||
});
|
||||
return window.URL.createObjectURL(blob);
|
||||
},
|
||||
// 查询文件列表详细
|
||||
// 下载文件
|
||||
downLoadFile() {
|
||||
const row = this.currentFileInfo;
|
||||
let contentUrl = "";
|
||||
this.fileName = row.fileName;
|
||||
this.fileType = row.fileType.toLowerCase();
|
||||
this.fileContent = row.fileContent;
|
||||
this.fileContentImg = "";
|
||||
this.fileContentPdf = "";
|
||||
if (this.imageType.indexOf(this.fileType) !== -1) {
|
||||
this.isImageType = true;
|
||||
this.isPdfType = false;
|
||||
this.fileContentImg = "data:image/png;base64," + this.fileContent;
|
||||
contentUrl = "data:image/png;base64," + this.fileContent;
|
||||
} else if (this.pdfType.indexOf(this.fileType) !== -1) {
|
||||
this.isImageType = false;
|
||||
this.isPdfType = true;
|
||||
this.fileContentPdf = this.solvePdfUrl(
|
||||
this.fileContent,
|
||||
this.fileType,
|
||||
this.fileName
|
||||
);
|
||||
contentUrl = this.fileContentPdf;
|
||||
} else {
|
||||
this.isImageType = false;
|
||||
this.isPdfType = false;
|
||||
this.$message.warning("不支持的下载格式！");
|
||||
return;
|
||||
}
|
||||
var a = document.createElement("a");
|
||||
a.download = this.fileName + "." + this.fileType;
|
||||
a.href = contentUrl;
|
||||
$("body").append(a);
|
||||
a.click();
|
||||
$(a).remove();
|
||||
},
|
||||
// 删除文件
|
||||
deleteFile(row) {
|
||||
this.$confirm("是否确认将文件进行删除" + "</div>", "提示", {
|
||||
distinguishCancelAndClose: true,
|
||||
center: true,
|
||||
dangerouslyUseHTMLString: true,
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消",
|
||||
})
|
||||
.then(() => {
|
||||
var param = [];
|
||||
param[0] = ["ID", row.ID];
|
||||
var Data = this.CreateData("11", "工艺管理_工艺文件删除", param);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
this.$message.success("删除成功！");
|
||||
this.searchTable();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "取消删除！",
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 移除上传文件
|
||||
*/
|
||||
handleRemove(file, fileList) {
|
||||
this.fileList = [];
|
||||
},
|
||||
/**
|
||||
* 上传设备文件大小限制
|
||||
*/
|
||||
beforeAvatarUpload(file) {
|
||||
const isLt2M = file.size / 1024 / 1024 < 10;
|
||||
if (!isLt2M) {
|
||||
this.$message.error("上传工艺文档大小不能超过 10MB!");
|
||||
}
|
||||
return isLt2M;
|
||||
},
|
||||
/**
|
||||
* 上传标准文件
|
||||
*/
|
||||
uploadStandFile() {
|
||||
if (this.$refs.uploadStandFile.uploadFiles.length === 0) {
|
||||
this.$message.warning("请选择文件进行上传！");
|
||||
return;
|
||||
}
|
||||
var param = [];
|
||||
param[0] = ["opName", this.opnameThis];
|
||||
param[1] = ["fileName", ""];
|
||||
param[2] = ["fileType", ""];
|
||||
param[3] = ["fileContent", null];
|
||||
this.Data.param = this.CreateData("15", "工艺管理_工艺文件上传", param);
|
||||
this.$refs.uploadStandFile.submit();
|
||||
},
|
||||
/**
|
||||
* 上传标准设备文件成功后
|
||||
*/
|
||||
stnFileSuccess(res, file) {
|
||||
this.$message.success("上传成功！");
|
||||
this.fileList = [];
|
||||
this.searchTable();
|
||||
},
|
||||
stnFileError(err, file, fileList) {
|
||||
this.$message.success("上传失败，请重新上传！" + err.toString());
|
||||
this.fileList = [];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.noView {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 800px;
|
||||
color: #b8b5b5;
|
||||
}
|
||||
</style>
|
||||
156
src/views/page/programManagementPage.vue
Normal file
156
src/views/page/programManagementPage.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card style="height: 958px; border-radius: 0%">
|
||||
<span>设备名称</span>
|
||||
<el-input
|
||||
v-model="deviceName"
|
||||
style="width: 250px; margin-left: 10px"
|
||||
clearable
|
||||
placeholder="设备名称"
|
||||
></el-input>
|
||||
<span style="margin-left: 10px">程序名称</span>
|
||||
<el-input
|
||||
v-model="programName"
|
||||
style="width: 250px; margin-left: 10px"
|
||||
clearable
|
||||
placeholder="程序名称"
|
||||
></el-input>
|
||||
<el-button
|
||||
:disabled="loading"
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-search"
|
||||
style="margin-left: 10px"
|
||||
@click="searchTable()"
|
||||
>查询</el-button
|
||||
>
|
||||
<div style="margin-top: 10px">
|
||||
<el-col :span="14">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
:header-cell-style="{ background: '#F5F5F5' }"
|
||||
element-loading-text="数据加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.2)"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
height="850"
|
||||
border
|
||||
highlight-current-row
|
||||
stripe
|
||||
@row-click="showProgramContent"
|
||||
>
|
||||
<el-table-column type="index" width="50"> </el-table-column>
|
||||
<el-table-column align="center" label="设备名称" width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.设备名称 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="程序名称" min-width="60">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.程序名称 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="程序号" min-width="60">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.程序号 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="读取时间" min-width="60">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.操作时间 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="40"
|
||||
placeholder=""
|
||||
v-model="textarea"
|
||||
>
|
||||
</el-input>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
deliveryDate: [],
|
||||
textarea: "",
|
||||
deviceName: "",
|
||||
programName: "",
|
||||
upValue: 0,
|
||||
downValue: 0,
|
||||
loading: false,
|
||||
tableData: [],
|
||||
total: 0, // 总条数
|
||||
pageSize: 50, // 每页显示条数
|
||||
PageCurrent: 1, // 后台获取页
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.searchTable();
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
searchTable() {
|
||||
this.loading = true;
|
||||
this.tableData = [];
|
||||
var param = [];
|
||||
param[0] = ["程序名称", this.programName];
|
||||
param[1] = ["设备名称", this.deviceName];
|
||||
var Data = this.CreateData("11", "程序管理_机床程序_查询", param);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
if (response.data.length !== 0) {
|
||||
this.tableData = response.data;
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
showProgramContent(row) {
|
||||
this.textarea = "";
|
||||
this.textarea = row["程序内容"].toString();
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.PageCurrent = 1;
|
||||
this.pageSize = val;
|
||||
this.searchTable();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.PageCurrent = val;
|
||||
this.searchTable();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.div1 {
|
||||
width: 140px;
|
||||
height: 105px;
|
||||
margin-left: 15px;
|
||||
margin-top: 15px;
|
||||
background: green;
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
}
|
||||
.div2 {
|
||||
width: 140px;
|
||||
height: 105px;
|
||||
margin-left: 15px;
|
||||
margin-top: 15px;
|
||||
background: #60839e;
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
}
|
||||
.Checkbox {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
1334
src/views/page/qualityAssurancePage.vue
Normal file
1334
src/views/page/qualityAssurancePage.vue
Normal file
File diff suppressed because it is too large
Load Diff
745
src/views/page/toolManagementPage.vue
Normal file
745
src/views/page/toolManagementPage.vue
Normal file
@@ -0,0 +1,745 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card style="height: 958px; border-radius: 0%">
|
||||
<div style="display: flex">
|
||||
<div class="toolInfo" style="background: #009e1c">
|
||||
<span>正常数量</span>
|
||||
<br />
|
||||
<span style="line-height: 0">{{ toolInfo.ok }}</span>
|
||||
</div>
|
||||
<div class="toolInfo" style="background: #ffc823">
|
||||
<span>磨损过度</span>
|
||||
<br />
|
||||
<span>{{ toolInfo.normal }}</span>
|
||||
</div>
|
||||
<div class="toolInfo" style="background: #ff2020">
|
||||
<span>寿命达到</span>
|
||||
<br />
|
||||
<span>{{ toolInfo.destroy }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="刀具总览" name="first" style="height: 767px">
|
||||
<el-button
|
||||
:disabled="loading"
|
||||
type="text"
|
||||
icon="el-icon-setting"
|
||||
style="float: right; margin-right: 20px; font-size: 20px"
|
||||
title="设定当前工位刀具"
|
||||
@click="editToolInfo()"
|
||||
></el-button>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: 740px;
|
||||
overflow-y: auto;
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in toolList"
|
||||
:key="index"
|
||||
class="toolCard"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 520px;
|
||||
height: 240px;
|
||||
border: 1px solid #afafaf;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
"
|
||||
:style="{ backgroundColor: toolInfoColor(item) }"
|
||||
>
|
||||
{{ item.设备名称 }} {{ "【刀位" + item.toolNum + "】" }}
|
||||
</div>
|
||||
<div
|
||||
style="text-align: left; margin-left: 20px; font-size: 18px"
|
||||
>
|
||||
<el-col :span="16">
|
||||
<div style="height: 40px; line-height: 40px">
|
||||
刀具名称：{{ item.刀具名称 }}
|
||||
</div>
|
||||
<div style="height: 40px; line-height: 40px">
|
||||
额定寿命：{{ item.toolLife }}
|
||||
</div>
|
||||
<div style="height: 40px; line-height: 40px">
|
||||
使用计数：{{ item.toolCount }}
|
||||
</div>
|
||||
<div style="height: 40px; line-height: 40px">
|
||||
更新时间：{{ item.操作时间 }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-row style="margin-top: 50px">
|
||||
<el-col :span="7">
|
||||
<img
|
||||
v-if="item['刀具状态'] === 1"
|
||||
src="../../img/tool_ok.png"
|
||||
/>
|
||||
<img
|
||||
v-if="item['刀具状态'] === 2"
|
||||
src="../../img/tool_normal.png"
|
||||
/>
|
||||
<img
|
||||
v-if="item['刀具状态'] === 3"
|
||||
src="../../img/tool_destroy.png"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="12"
|
||||
style="font-size: 34px; font-weight: bolder"
|
||||
>
|
||||
<div
|
||||
v-if="item['刀具状态'] === 1"
|
||||
style="color: #009e1c"
|
||||
>
|
||||
{{ item.toolLife - item.toolCount }}
|
||||
</div>
|
||||
<div
|
||||
v-if="item['刀具状态'] === 2"
|
||||
style="color: #ffc823"
|
||||
>
|
||||
{{ item.toolLife - item.toolCount }}
|
||||
</div>
|
||||
<div
|
||||
v-if="item['刀具状态'] === 3"
|
||||
style="color: #ff2020"
|
||||
>
|
||||
{{ item.toolLife - item.toolCount }}
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>剩余寿命</el-row>
|
||||
</el-col>
|
||||
</div>
|
||||
<div style="margin-left: 20px">
|
||||
<el-tooltip effect="light" placement="top">
|
||||
<div slot="content" style="color: black">
|
||||
使用计数：{{ item.toolCount }}
|
||||
</div>
|
||||
<el-progress
|
||||
style="width: 95%"
|
||||
:text-inside="true"
|
||||
:stroke-width="18"
|
||||
:percentage="
|
||||
Math.floor(
|
||||
(100 - item.residue >= 100 ? 100 : item.residue) * 100
|
||||
) / 100
|
||||
"
|
||||
:color="toolInfoColor(item)"
|
||||
></el-progress>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="刀具历史" name="second" style="height: 867px">
|
||||
<span>设备名称：</span>
|
||||
<el-input
|
||||
v-model="deviceName"
|
||||
style="width: 250px; margin-left: 10px"
|
||||
clearable
|
||||
placeholder="设备名称"
|
||||
></el-input>
|
||||
<span style="margin-left: 10px">日期：</span>
|
||||
<el-date-picker
|
||||
v-model="deliveryDate"
|
||||
:picker-options="pickerOptions"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
end-placeholder="结束日期"
|
||||
style="width: 250px; margin-left: 10px"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="loading"
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-search"
|
||||
style="margin-left: 10px"
|
||||
@click="searchTableHis()"
|
||||
>查询</el-button
|
||||
>
|
||||
<!-- <el-button :disabled="loading" type="warning" plain icon="el-icon-download" style="margin-left: 10px" @click="searchTableHisExport()">导出</el-button>-->
|
||||
<div style="margin-top: 10px">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
:header-cell-style="{ background: '#F5F5F5' }"
|
||||
element-loading-text="数据加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.2)"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
height="580"
|
||||
border
|
||||
highlight-current-row
|
||||
stripe
|
||||
>
|
||||
<el-table-column type="index" align="center" width="50">
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="设备名称" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.设备名称 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="刀具号" min-width="60">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.刀具代码 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="额定寿命" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.刀具额定寿命 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="累计使用" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.已用寿命 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="本次使用" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.使用寿命 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="预警值1(%)"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.预警值1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="预警值2(%)"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.预警值2 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更换时间" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.OperationTime }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更换人" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.更换人 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="block" style="margin-top: 10px">
|
||||
<el-pagination
|
||||
v-if="!loading"
|
||||
:current-page="PageCurrent"
|
||||
:page-sizes="[50, 70, 100, 150]"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisibleTool"
|
||||
center
|
||||
width="1300px"
|
||||
:modal-append-to-body="false"
|
||||
append-to-body
|
||||
>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="toolListCopy"
|
||||
:header-cell-style="{ background: '#F5F5F5' }"
|
||||
element-loading-text="数据加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.2)"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
border
|
||||
height="500"
|
||||
highlight-current-row
|
||||
stripe
|
||||
>
|
||||
<el-table-column type="index" width="50"> </el-table-column>
|
||||
<el-table-column align="center" label="机床名称" width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.设备名称 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="刀具号" min-width="60">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.toolNum }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="刀具名称" min-width="60">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="!scope.row.edit">{{ scope.row.刀具名称 }}</span>
|
||||
<el-input
|
||||
v-else
|
||||
v-model="scope.row.刀具名称"
|
||||
size="mini"
|
||||
></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="额定寿命" min-width="60">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.toolLife }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="已用寿命" min-width="60">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.toolCount }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="预警值1(%)" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="!scope.row.edit">{{ scope.row.thresholdValue1 }}</span>
|
||||
<el-input-number
|
||||
v-else
|
||||
v-model="scope.row.thresholdValue1"
|
||||
controls-position="right"
|
||||
:step="1"
|
||||
size="mini"
|
||||
:min="1"
|
||||
:max="parseInt(scope.row.thresholdValue2) - 1"
|
||||
></el-input-number>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="预警值2(%)" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="!scope.row.edit">{{ scope.row.thresholdValue2 }}</span>
|
||||
<el-col :span="24" v-else>
|
||||
<el-input-number
|
||||
v-model="scope.row.thresholdValue2"
|
||||
controls-position="right"
|
||||
:step="1"
|
||||
size="mini"
|
||||
:max="100"
|
||||
:min="parseInt(scope.row.thresholdValue1) + 1"
|
||||
></el-input-number>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="采购日期" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="!scope.row.edit">{{ scope.row.采购日期 }}</span>
|
||||
<el-col v-else :span="18">
|
||||
<el-date-picker
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
style="width: 150px"
|
||||
v-model="scope.row.采购日期"
|
||||
size="mini"
|
||||
></el-date-picker>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="编辑" min-width="60">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="scope.row.edit"
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-circle-check-outline"
|
||||
@click="toolManagementSubmit(scope.row)"
|
||||
>确定</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="scope.row.edit"
|
||||
class="cancel-btn"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="cancelEdit(scope.$index, scope.row)"
|
||||
>取消</el-button
|
||||
>
|
||||
<el-button
|
||||
v-else
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="scope.row.edit = !scope.row.edit"
|
||||
></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getNowTime2 } from "@/utils/tool";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectTool: [],
|
||||
toolNums: [
|
||||
{ label: "1#", value: 1 },
|
||||
{ label: "2#", value: 2 },
|
||||
{ label: "3#", value: 3 },
|
||||
{ label: "4#", value: 4 },
|
||||
{ label: "5#", value: 5 },
|
||||
{ label: "6#", value: 6 },
|
||||
{ label: "7#", value: 7 },
|
||||
{ label: "8#", value: 8 },
|
||||
{ label: "9#", value: 9 },
|
||||
{ label: "10#", value: 10 },
|
||||
{ label: "11#", value: 11 },
|
||||
{ label: "12#", value: 12 },
|
||||
{ label: "13#", value: 13 },
|
||||
{ label: "14#", value: 14 },
|
||||
{ label: "15#", value: 15 },
|
||||
{ label: "16#", value: 16 },
|
||||
{ label: "17#", value: 17 },
|
||||
{ label: "18#", value: 18 },
|
||||
{ label: "19#", value: 19 },
|
||||
{ label: "20#", value: 20 },
|
||||
{ label: "21#", value: 21 },
|
||||
{ label: "22#", value: 22 },
|
||||
{ label: "23#", value: 23 },
|
||||
{ label: "24#", value: 24 },
|
||||
{ label: "25#", value: 25 },
|
||||
{ label: "26#", value: 26 },
|
||||
{ label: "27#", value: 27 },
|
||||
{ label: "28#", value: 28 },
|
||||
{ label: "29#", value: 29 },
|
||||
{ label: "30#", value: 30 },
|
||||
{ label: "31#", value: 31 },
|
||||
{ label: "32#", value: 32 },
|
||||
],
|
||||
activeName: "first",
|
||||
deliveryDate: [],
|
||||
toolInfoOrder: false,
|
||||
opnames: [],
|
||||
opnameThis: "",
|
||||
deviceName: "",
|
||||
toolInfo: {
|
||||
ok: 0,
|
||||
normal: 0,
|
||||
destroy: 0,
|
||||
},
|
||||
toolList: [],
|
||||
toolListCopy: [],
|
||||
numberOfPeopleInWorkshop: "57",
|
||||
// stationNumber: '',
|
||||
title: "刀具管理",
|
||||
realTo: "56",
|
||||
planToday: 90,
|
||||
completeNumber: 120,
|
||||
loading: false,
|
||||
dialogVisibleAccount: false, // 编辑台账信息
|
||||
dialogVisibleAccount1: false, // 新增台账信息
|
||||
dialogVisibleLife: false, // 编辑寿命信息
|
||||
dialogVisibleLife1: false, // 新增寿命信息
|
||||
dialogVisibleTool: false, // 编辑刀具信息
|
||||
dialogVisibleTool1: false, // 新增刀具信息
|
||||
tableData: [],
|
||||
tableData1: [],
|
||||
tableData2: [],
|
||||
flag: 0,
|
||||
timer: null,
|
||||
date: new Date(),
|
||||
month: "",
|
||||
day: "",
|
||||
minute: "",
|
||||
hour: "",
|
||||
year: "",
|
||||
second: "",
|
||||
stationNumber: "",
|
||||
station: "",
|
||||
week: "",
|
||||
total: 0, // 总条数
|
||||
pageSize: 50, // 每页显示条数
|
||||
PageCurrent: 1, // 后台获取页
|
||||
};
|
||||
},
|
||||
props: ["opname"],
|
||||
computed: {
|
||||
pickerOptions({ $props }) {
|
||||
return {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
};
|
||||
},
|
||||
check: {
|
||||
get() {
|
||||
return this.selectTool.length === this.toolNums.length;
|
||||
},
|
||||
set() {},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const scope = this;
|
||||
this.searchTable();
|
||||
this.timer = setInterval(() => {
|
||||
scope.searchTable();
|
||||
}, 5000);
|
||||
},
|
||||
created() {
|
||||
this.opnameThis = this.opname;
|
||||
const start = new Date();
|
||||
const end = new Date(start.getTime() - 3600 * 1000 * 24 * 15);
|
||||
this.deliveryDate[0] = getNowTime2(end);
|
||||
this.deliveryDate[1] = getNowTime2(start);
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
methods: {
|
||||
editToolInfo() {
|
||||
this.title = "设定刀具参数";
|
||||
this.searchTableCopy();
|
||||
this.dialogVisibleTool = true;
|
||||
},
|
||||
toolInfoColor(info) {
|
||||
const status = info["刀具状态"];
|
||||
if (status === 1) {
|
||||
return "#009e1c";
|
||||
}
|
||||
if (status === 2) {
|
||||
return "#ffc823";
|
||||
}
|
||||
if (status === 3) {
|
||||
return "#ff2020";
|
||||
}
|
||||
},
|
||||
searchTable() {
|
||||
var param = [];
|
||||
var Data = this.CreateData("11", "刀具管理_刀具信息查询", param);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
if (response.data.length > 0) {
|
||||
this.toolList = [];
|
||||
this.toolInfo.ok = 0;
|
||||
this.toolInfo.normal = 0;
|
||||
this.toolInfo.destroy = 0;
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
const toolLife =
|
||||
parseInt(response.data[i].刀具额定寿命) === 0
|
||||
? 1
|
||||
: parseInt(response.data[i].刀具额定寿命);
|
||||
if (response.data[i].刀具状态 === 1) this.toolInfo.ok += 1;
|
||||
if (response.data[i].刀具状态 === 2) this.toolInfo.normal += 1;
|
||||
if (response.data[i].刀具状态 === 3) this.toolInfo.destroy += 1;
|
||||
this.toolList.push({
|
||||
toolNum: response.data[i].刀具代码,
|
||||
刀具ID: response.data[i].刀具ID,
|
||||
toolGroup: response.data[i].刀具组号,
|
||||
toolCount: response.data[i].已用寿命,
|
||||
toolLife: toolLife,
|
||||
thresholdValue1: response.data[i].预警值1,
|
||||
thresholdValue1_yuan: response.data[i].预警值1,
|
||||
thresholdValue2: response.data[i].预警值2,
|
||||
thresholdValue2_yuan: response.data[i].预警值2,
|
||||
residue:
|
||||
Math.floor(
|
||||
(1 - response.data[i].已用寿命 / toolLife) * 100 * 100
|
||||
) / 100,
|
||||
工位名称: response.data[i].工位名称,
|
||||
刀具名称: response.data[i].名称,
|
||||
刀具名称_yuan: response.data[i].名称,
|
||||
规格型号: response.data[i].型号,
|
||||
刀具状态: response.data[i].刀具状态,
|
||||
采购日期: response.data[i].采购日期.substring(0, 10),
|
||||
设备名称: response.data[i].设备名称,
|
||||
操作时间: response.data[i].操作时间,
|
||||
采购日期_yuan: response.data[i].采购日期.substring(0, 10),
|
||||
edit: false,
|
||||
});
|
||||
}
|
||||
console.log(this.toolList);
|
||||
}
|
||||
});
|
||||
},
|
||||
searchTableCopy() {
|
||||
var param = [];
|
||||
var Data = this.CreateData("11", "刀具管理_刀具信息查询", param);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
if (response.data.length > 0) {
|
||||
this.toolListCopy = [];
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
const toolLife =
|
||||
parseInt(response.data[i].刀具额定寿命) === 0
|
||||
? 1
|
||||
: parseInt(response.data[i].刀具额定寿命);
|
||||
this.toolListCopy.push({
|
||||
toolNum: response.data[i].刀具代码,
|
||||
刀具ID: response.data[i].刀具ID,
|
||||
toolGroup: response.data[i].刀具组号,
|
||||
toolCount: response.data[i].已用寿命,
|
||||
toolLife: toolLife,
|
||||
thresholdValue1: response.data[i].预警值1,
|
||||
thresholdValue1_yuan: response.data[i].预警值1,
|
||||
thresholdValue2: response.data[i].预警值2,
|
||||
thresholdValue2_yuan: response.data[i].预警值2,
|
||||
residue:
|
||||
Math.floor(
|
||||
(1 - response.data[i].已用寿命 / toolLife) * 100 * 100
|
||||
) / 100,
|
||||
工位名称: response.data[i].工位名称,
|
||||
刀具名称: response.data[i].名称,
|
||||
刀具名称_yuan: response.data[i].名称,
|
||||
规格型号: response.data[i].型号,
|
||||
刀具状态: response.data[i].刀具状态,
|
||||
采购日期: response.data[i].采购日期.substring(0, 10),
|
||||
设备名称: response.data[i].设备名称,
|
||||
操作时间: response.data[i].操作时间,
|
||||
采购日期_yuan: response.data[i].采购日期.substring(0, 10),
|
||||
edit: false,
|
||||
});
|
||||
}
|
||||
this.dialogVisibleTool = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 确定编辑设备台账信息
|
||||
toolManagementSubmit(row) {
|
||||
var param = [];
|
||||
param[0] = ["刀具ID", row.刀具ID];
|
||||
param[1] = ["thresholdValue1", row.thresholdValue1];
|
||||
param[2] = ["thresholdValue2", row.thresholdValue2];
|
||||
param[3] = ["刀具名称", row.刀具名称];
|
||||
param[4] = ["采购日期", row.采购日期];
|
||||
var Data = this.CreateData("12", "刀具管理_刀具设备台账编辑", param);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
if (response.data.length > 0) {
|
||||
if (response.data[0]["result"] === "1") {
|
||||
this.$message.success("编辑成功！");
|
||||
row.edit = false;
|
||||
this.searchTable();
|
||||
} else {
|
||||
this.$message.error("编辑失败！");
|
||||
}
|
||||
} else {
|
||||
this.$message.error("编辑失败！");
|
||||
}
|
||||
});
|
||||
},
|
||||
// 取消编辑设备台账信息
|
||||
cancelEdit(index, row) {
|
||||
row.thresholdValue1 = row.thresholdValue1_yuan;
|
||||
row.thresholdValue2 = row.thresholdValue2_yuan;
|
||||
row.刀具名称 = row.刀具名称_yuan;
|
||||
row.采购日期 = row.采购日期_yuan;
|
||||
row.edit = false;
|
||||
this.dialogVisibleAccount = true;
|
||||
},
|
||||
searchTableHis() {
|
||||
if (!this.deliveryDate) {
|
||||
this.$message.warning("请选择查询时间");
|
||||
return;
|
||||
}
|
||||
if (this.deliveryDate.length < 2) {
|
||||
this.$message.warning("请选择查询时间");
|
||||
return;
|
||||
}
|
||||
if (this.deliveryDate[0] === "") {
|
||||
this.$message.warning("请选择查询时间");
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
this.tableData = [];
|
||||
var param = [];
|
||||
param[0] = ["开始时间", this.deliveryDate[0]];
|
||||
param[1] = ["结束时间", this.deliveryDate[1]];
|
||||
param[2] = ["设备名称", this.deviceName];
|
||||
param[3] = ["PageCurrent", this.PageCurrent];
|
||||
param[4] = ["PageSize", this.pageSize];
|
||||
param[5] = ["PageCount", "1111", "int", "1"];
|
||||
param[6] = ["ItemCount", "1111", "int", "1"];
|
||||
var Data = this.CreateData("11", "刀具管理_刀具设备台账历史查询", param);
|
||||
this.ExecDatabase(Data).then((response) => {
|
||||
if (response.data.length !== 0) {
|
||||
this.tableData = response.data.result;
|
||||
this.total = parseInt(response.data.output[0].ItemCount);
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
searchTableHisExport() {
|
||||
if (this.tableData.length === 0) {
|
||||
this.$message.warning("请查询要导出的数据");
|
||||
return;
|
||||
}
|
||||
if (!this.deliveryDate) {
|
||||
this.$message.warning("请选择查询时间");
|
||||
return;
|
||||
}
|
||||
if (this.deliveryDate.length < 2) {
|
||||
this.$message.warning("请选择查询时间");
|
||||
return;
|
||||
}
|
||||
if (this.deliveryDate[0] === "") {
|
||||
this.$message.warning("请选择查询时间");
|
||||
return;
|
||||
}
|
||||
var param = [];
|
||||
var toolString = "";
|
||||
for (let i = 0; i < this.selectTool.length; i++) {
|
||||
toolString += this.selectTool[i] + ",";
|
||||
}
|
||||
toolString = toolString.substring(0, toolString.length - 1);
|
||||
const blob =
|
||||
"data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7";
|
||||
param[0] = ["开始时间", this.deliveryDate[0]];
|
||||
param[1] = ["结束时间", this.deliveryDate[1]];
|
||||
param[2] = ["opName", this.opnameThis];
|
||||
param[3] = ["ToolGroup", toolString];
|
||||
var Data = this.CreateData(
|
||||
"2003",
|
||||
"LG_刀具管理_刀具设备台账历史导出",
|
||||
param
|
||||
);
|
||||
this.exportExcel_NPOI(Data, blob);
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.PageCurrent = 1;
|
||||
this.pageSize = val;
|
||||
this.searchTableHis();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.PageCurrent = val;
|
||||
this.searchTableHis();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.toolInfo {
|
||||
height: 100px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
color: white;
|
||||
flex: 1;
|
||||
margin: 0 100px;
|
||||
}
|
||||
.toolCard {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
margin: 10px 0 0 10px;
|
||||
}
|
||||
::v-deep .el-progress-bar__inner {
|
||||
line-height: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user