Reviewed-on: http://git.picaiba.com/mt-fe-group/yudao-dev/pulls/192pull/193/head^2
@@ -1,7 +1,7 @@ | |||
### | |||
# @Author: Do not edit | |||
# @Date: 2023-08-29 09:40:39 | |||
# @LastEditTime: 2024-01-11 10:20:21 | |||
# @LastEditTime: 2024-01-29 15:49:57 | |||
# @LastEditors: zhp | |||
# @Description: | |||
### | |||
@@ -14,13 +14,13 @@ VUE_APP_TITLE = MES系统 | |||
# 芋道管理系统/开发环境 | |||
# VUE_APP_BASE_API = 'http://100.64.0.26:48082' | |||
# VUE_APP_BASE_API = 'http://10.70.2.2:8080' | |||
VUE_APP_BASE_API = 'http://192.168.0.33:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.0.33:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.1.20:48080' | |||
# VUE_APP_BASE_API = 'http://192.168.2.173:48080' | |||
# VUE_APP_BASE_API = 'http://192.168.1.49:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.1.8:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.4.159:48080' | |||
# VUE_APP_BASE_API = 'http://192.168.1.104:48082' | |||
VUE_APP_BASE_API = 'http://192.168.1.104:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.0.33:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.1.62:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.1.78:48082' | |||
@@ -0,0 +1,84 @@ | |||
/* | |||
* @Author: zhp | |||
* @Date: 2023-12-04 14:10:37 | |||
* @LastEditTime: 2024-01-29 10:42:49 | |||
* @LastEditors: zhp | |||
* @Description: | |||
*/ | |||
import request from '@/utils/request' | |||
// 创建安灯按钮16键对应 | |||
export function createQualityInspectionBoxBtn(data) { | |||
return request({ | |||
url: '/base/quality-inspection-box-btn/updateBatch', | |||
method: 'put', | |||
data: data | |||
}) | |||
} | |||
// 更新安灯按钮16键对应 | |||
export function updateQualityInspectionBoxBtn(data) { | |||
return request({ | |||
url: '/base/quality-inspection-box-btn/updateBatch', | |||
method: 'put', | |||
data: data | |||
}) | |||
} | |||
// 删除安灯按钮16键对应 | |||
export function deleteQualityInspectionBoxBtn(id) { | |||
return request({ | |||
url: '/base/quality-inspection-box-btn/delete?id=' + id, | |||
method: 'delete' | |||
}) | |||
} | |||
// 获得安灯按钮16键对应 | |||
export function getQualityInspectionBoxBtn(id) { | |||
return request({ | |||
url: '/base/quality-inspection-box-btn/get?id=' + id, | |||
method: 'get' | |||
}) | |||
} | |||
// 获得安灯按钮16键对应分页 | |||
export function getQualityInspectionBoxBtnPage(query) { | |||
return request({ | |||
url: '/base/quality-inspection-box-btn/listGroupByLineSection', | |||
method: 'get', | |||
params: query | |||
}) | |||
} | |||
// 导出安灯按钮16键对应 Excel | |||
export function exportQualityInspectionBoxBtnExcel(query) { | |||
return request({ | |||
url: '/base/quality-inspection-box-btn/export-excel', | |||
method: 'get', | |||
params: query, | |||
responseType: 'blob' | |||
}) | |||
} | |||
export function getAllDetByTypeList(query) { | |||
return request({ | |||
url: '/base/quality-scrap-det/scrapMap', | |||
method: 'get', | |||
params: query, | |||
}) | |||
} | |||
export function getListByLineSection(query) { | |||
return request({ | |||
url: '/base/quality-inspection-box-btn/detListByLineSection', | |||
method: 'get', | |||
params: query, | |||
}) | |||
} | |||
export function getUserList(query) { | |||
return request({ | |||
url: 'system/user/page', | |||
method: 'get', | |||
params: query, | |||
}) | |||
} |
@@ -2,7 +2,7 @@ | |||
* @Author: zwq | |||
* @Date: 2021-07-19 15:18:30 | |||
* @LastEditors: zhp | |||
* @LastEditTime: 2024-01-25 17:55:53 | |||
* @LastEditTime: 2024-01-29 15:00:30 | |||
* @Description: | |||
--> | |||
<template> | |||
@@ -49,10 +49,11 @@ | |||
</el-col> | |||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8"> | |||
<base-container :title="'ISRA 缺陷数据'" :size="'small'" :title-icon="'scrap'"> | |||
<base-container :no-content-padding="true" :title="'ISRA 缺陷数据'" :size="'small'" :title-icon="'scrap'"> | |||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="ISRATableProps" | |||
:table-data="ISRAList" /> --> | |||
<dv-scroll-board :config="ISRAConfig" style="width:100%;height:350px" ref='ISRAScrollBoard' /> | |||
<ISRAChart ref="ISRAChart" /> | |||
<!-- <dv-scroll-board :config="ISRAConfig" style="width:100%;height:350px" ref='ISRAScrollBoard' /> --> | |||
</base-container> | |||
</el-col> | |||
</el-row> | |||
@@ -82,27 +83,26 @@ | |||
</base-container> | |||
</el-col> | |||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="14"> | |||
<base-container :height="318 + 338 + 16" :size="'eqStatus'" | |||
:title="'设备状态监控'" :title-icon="'eqMonitoring'"> | |||
<base-container :height="318 + 338 + 16" :size="'eqStatus'" :title="'设备状态监控'" :title-icon="'eqMonitoring'"> | |||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;"> | |||
<top-radio-group /> | |||
</div> --> | |||
<!-- 像下面这样表格里的limit值,也许可以用js动态计算出来 --> | |||
<el-col :span="6" style=""> | |||
<div style="font-size:20px;margin: 5px 0 10px 0">融化风机</div> | |||
<el-col :span="8" style=""> | |||
<div style="font-size:20px;margin: 5px 0 10px 0">熔化风机</div> | |||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun" | |||
:table-data="funList" /> --> | |||
<dv-scroll-board :config="funConfig" style="width:100%;height:310px" ref='funScrollBoard' /> | |||
</el-col> | |||
<span class="eqLine"></span> | |||
<el-col :span="6"> | |||
<el-col :span="8"> | |||
<div style="font-size:20px;margin: 5px 0 10px 0;">退火风机</div> | |||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun" | |||
:table-data="annealFunList" /> --> | |||
<dv-scroll-board :config="annealFunConfig" style="width:100%;height:310px" ref='annealFunScrollBoard' /> | |||
</el-col> | |||
<span class="eqLineTwo"></span> | |||
<el-col :span="12" style="float: right;"> | |||
<el-col :span="8" style="float: right;"> | |||
<div style="font-size:20px;margin: 5px 0 10px 0;">产线设备</div> | |||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringProps" | |||
:table-data="realEqList" /> --> | |||
@@ -137,10 +137,6 @@ import baseTable1 from './components/baseTable' | |||
// import baseTable2 from './components/baseTable' | |||
// import baseTable3 from './components/baseTable' | |||
import TopRadioGroup from './components/topRadioGroup' | |||
// import pieChart1 from './components/PieChart' | |||
// import pieChart2 from './components/PieChart' | |||
// import pieChart3 from './components/PieChart' | |||
// import { mapGetters } from 'vuex' | |||
import screenfull from 'screenfull' | |||
// import BaseVideo from './components/baseVideo.vue' | |||
import alarmLevel from './components/alarmLevel' | |||
@@ -149,13 +145,9 @@ import colorDiv from './components/colorDiv' | |||
// import axios from '@/utils/request' | |||
import doubleYChart from './components/coldDoubleYChart' | |||
// import elementResizeDetectorMaker from 'element-resize-detector'; | |||
// var erd = elementResizeDetectorMaker(); //创建实例 | |||
// let resizeFun = null | |||
import { parseTime } from '../core/mixins/code-filter'; | |||
import { formatDate } from '@/utils' | |||
import ISRAChart from './components/ISRAChart.vue'; | |||
import { getDcsMsg, closeDcsMsg } from "@/websocket/wsInterface" | |||
import LinearBarChart from './components/linearBarChart' | |||
const qualityYearTableProps= [] | |||
const EqMonitoringPropsFun = [ | |||
@@ -260,6 +252,7 @@ export default { | |||
TopRadioGroup, | |||
doubleYChart, | |||
LinearBarChart, | |||
ISRAChart | |||
// baseContainer1 | |||
// pieChart1, | |||
// pieChart2 | |||
@@ -294,18 +287,18 @@ export default { | |||
headerBGC: 'rgba(32, 55, 96, 0.8)', | |||
oddRowBGC: 'rgba(32, 55, 96, 0.8)', | |||
evenRowBGC: 'rgba(14, 32, 62, 0.8)', | |||
columnWidth: [60, 90, 90], | |||
columnWidth: [60, 180, 90], | |||
align: ['center'], | |||
data: [], | |||
// index:true, | |||
rowNum: 10 | |||
}, | |||
realEqConfig: { | |||
header: ['序号', '产线', '设备名称', '设备编码', '运行状态','故障状态'], | |||
header: ['序号','设备名称','运行状态'], | |||
headerBGC: 'rgba(32, 55, 96, 0.8)', | |||
oddRowBGC: 'rgba(32, 55, 96, 0.8)', | |||
evenRowBGC: 'rgba(14, 32, 62, 0.8)', | |||
columnWidth: [60, 80, 90,90,90,90], | |||
columnWidth: [60, 180, 90], | |||
align: ['center'], | |||
data: [], | |||
// index:true, | |||
@@ -316,7 +309,7 @@ export default { | |||
headerBGC: 'rgba(32, 55, 96, 0.8)', | |||
oddRowBGC: 'rgba(32, 55, 96, 0.8)', | |||
evenRowBGC: 'rgba(14, 32, 62, 0.8)', | |||
columnWidth: [60, 90, 90], | |||
columnWidth: [60, 180, 90], | |||
align: ['center'], | |||
data: [], | |||
// index:true, | |||
@@ -350,6 +343,7 @@ export default { | |||
SJGWsData: {}, | |||
// orderProcessList: [], | |||
dateType: '0', | |||
wsIsOpen:false, | |||
funList:[], | |||
annealFunList: [], | |||
queryParams: { | |||
@@ -393,8 +387,27 @@ export default { | |||
// this.fetchList('line-chart-data') | |||
this.init() | |||
}, | |||
destroyed() { | |||
this.funInitWebSocket() | |||
this.CutInitWebSocket() | |||
this.SJGWebsocketClose() | |||
if (this.wsIsOpen) { | |||
closeDcsMsg() | |||
this.wsIsOpen = false | |||
console.log('关闭============') | |||
} | |||
}, | |||
mounted() { | |||
this.funInitWebSocket() | |||
// if (num > 0) { | |||
if (!this.wsIsOpen) { | |||
getDcsMsg() | |||
this.wsIsOpen = true | |||
console.log('开启websocket==========') | |||
} | |||
// } else { | |||
// } | |||
this.CutInitWebSocket() | |||
this.SJGInitWebSocket() | |||
// this.getList() | |||
@@ -444,6 +457,15 @@ export default { | |||
// removeEventListener('resize', resizeFun) | |||
// }, | |||
methods: { | |||
CutWebsocketClose(e) { | |||
console.log('WebSocket 断开连接', e) | |||
}, | |||
SJGWebsocketClose(e) { | |||
console.log('WebSocket 断开连接', e) | |||
}, | |||
funInitWebSocket(e) { | |||
console.log('WebSocket 断开连接', e) | |||
}, | |||
formatTime(time, option) { | |||
// if (('' + time).length === 10) { | |||
// time = parseInt(time) * 1000 | |||
@@ -738,6 +760,7 @@ export default { | |||
// let obj = JSON.parse(data.data) | |||
this.SJGWsData = e?.data ? JSON.parse(e?.data) : {} | |||
if (this.SJGWsData.type === 'isra') { | |||
console.log('222222', this.SJGWsData.detData); | |||
// this.ISRAList = this.SJGWsData.detData.map((ele, index) => { | |||
// // if (ele.progressRate != 1) { | |||
// return { | |||
@@ -751,34 +774,39 @@ export default { | |||
// // } | |||
// }); | |||
console.log(this.SJGWsData.detData); | |||
let ISRAArr = this.SJGWsData.detData.map((item, index) => [ | |||
// console.log(item) | |||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''} | |||
</span>`, | |||
// formatDate(item.planStartTime) || '', | |||
` | |||
<span style="color:rgba(255,255,255,0.5)" >${item.linename || ''} | |||
</span>`, | |||
`<span style="color:rgba(255,255,255,0.5)">${item.time || ''}</span>`, | |||
`<span style="color:rgba(255,255,255,0.5)">${item.type || ''}</span>`, | |||
`<span style="color:rgba(255,255,255,0.5)">${item.num || ''}</span>`, | |||
`<span style="color:rgba(255,255,255,0.5)">${(item.percent * 100).toFixed(2) || ''}</span>`, | |||
]) | |||
this.ISRAConfig.data = ISRAArr | |||
this.$refs['ISRAScrollBoard'].updateRows(ISRAArr) | |||
let chartData = this.SJGWsData.detData.map((item, index) => { | |||
return { | |||
name: item.type, | |||
num:item.num | |||
} | |||
}) | |||
// let ISRAArr = this.SJGWsData.detData.map((item, index) => [ | |||
// // console.log(item) | |||
// `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''} | |||
// </span>`, | |||
// // formatDate(item.planStartTime) || '', | |||
// ` | |||
// <span style="color:rgba(255,255,255,0.5)" >${item.linename || ''} | |||
// </span>`, | |||
// `<span style="color:rgba(255,255,255,0.5)">${item.time || ''}</span>`, | |||
// `<span style="color:rgba(255,255,255,0.5)">${item.type || ''}</span>`, | |||
// `<span style="color:rgba(255,255,255,0.5)">${item.num || ''}</span>`, | |||
// `<span style="color:rgba(255,255,255,0.5)">${(item.percent * 100).toFixed(2) || ''}</span>`, | |||
// ]) | |||
// this.ISRAConfig.data = ISRAArr | |||
this.$refs['ISRAChart'].updateChart(chartData) | |||
} else if (this.SJGWsData.type === 'equipment') { | |||
this.realEqList = this.SJGWsData.detData.map((ele, index) =>[ | |||
// console.log(item) | |||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''} | |||
</span>`, | |||
// formatDate(item.planStartTime) || '', | |||
` | |||
<span style="color:rgba(255,255,255,0.5)" >${item.line || ''} | |||
</span>`, | |||
// `<span style="color:rgba(255,255,255,0.5)" >${item.line || ''} | |||
// </span>`, | |||
`<span style="color:rgba(255,255,255,0.5)">${item.name || ''}</span>`, | |||
`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`, | |||
// `<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`, | |||
`<span style="color:rgba(255,255,255,0.5)">${item.run || ''}</span>`, | |||
`<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`, | |||
// `<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`, | |||
]); | |||
} | |||
this.realEqConfig.data = this.realEqList | |||
@@ -931,7 +959,7 @@ export default { | |||
height: 290px; | |||
width: 1px; | |||
position: absolute; | |||
left: 25%; | |||
left: 33.8%; | |||
top: 12%; | |||
background: linear-gradient(to bottom,rgba(60, | |||
231, | |||
@@ -943,7 +971,7 @@ background: linear-gradient(to bottom,rgba(60, | |||
height: 290px; | |||
width: 1px; | |||
position: absolute; | |||
left: 50%; | |||
left: 66.2%; | |||
top: 12%; | |||
background: linear-gradient(to bottom, rgba(60, | |||
231, | |||
@@ -0,0 +1,159 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-01-29 13:45:56 | |||
* @LastEditTime: 2024-01-29 14:56:38 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
<template> | |||
<div> | |||
<!-- <NotMsg v-show="notMsg"/> --> | |||
<div id="israChart" class="isra-chart" style="height:390px;"></div> | |||
</div> | |||
</template> | |||
<script> | |||
import * as echarts from 'echarts'; | |||
// import resize from './../mixins/resize' | |||
// import NotMsg from './../components/NotMsg' | |||
export default { | |||
name: 'ISRAChart', | |||
// mixins: [resize], | |||
// components:{ NotMsg }, | |||
props: {}, | |||
data() { | |||
return { | |||
chart: null, | |||
// notMsg:true, | |||
colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'], | |||
chartData: [] | |||
}; | |||
}, | |||
activated() { | |||
}, | |||
computed: { | |||
israChartMsg() { | |||
return this.$store.state.websocket.israKiln | |||
} | |||
}, | |||
watch: { | |||
israChartMsg: { | |||
handler(newVal, oldVal) { | |||
this.chartData = newVal || [] | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
} | |||
}, | |||
methods: { | |||
updateChart() { | |||
console.log('update') | |||
let num = 0 | |||
this.chartData && this.chartData.length > 0 && this.chartData.map(i => { | |||
num+=i.num | |||
}) | |||
if ( | |||
this.chart !== null && | |||
this.chart !== '' && | |||
this.chart !== undefined | |||
) { | |||
this.chart.dispose() | |||
} | |||
// if (this.chartData && this.chartData.length > 0) { | |||
// this.notMsg = false | |||
// } else { | |||
// this.notMsg = true | |||
// return | |||
// } | |||
this.chart = echarts.init(document.getElementById('israChart')); | |||
var option = { | |||
color:this.colors, | |||
title:{ | |||
text: num, | |||
subtext: '总数', | |||
top: '32%', | |||
left: '49%', | |||
textAlign: 'center', | |||
textStyle: { | |||
fontSize: 32, | |||
color: '#fff', | |||
}, | |||
subtextStyle: { | |||
fontSize: 20, | |||
color: '#fff00', | |||
}, | |||
}, | |||
legend: { | |||
bottom: '2%', | |||
left: 'center', | |||
itemWidth: 18, | |||
itemHeight:18, | |||
icon: 'circle', | |||
textStyle: { | |||
color: '#fff' | |||
}, | |||
data:this.chartData && this.chartData.length > 0 && this.chartData.map((item,index)=>({ | |||
name:item.name, | |||
itemStyle:{ | |||
color: this.colors[index%4] | |||
} | |||
})) | |||
}, | |||
series:[{ | |||
name: 'ISRA缺陷检测', | |||
type: 'pie', | |||
center: ['50%', '40%'], | |||
radius: ['45%', '70%'], | |||
avoidLabelOverlap: true, | |||
label: { | |||
show: false | |||
}, | |||
labelLine: { | |||
show: true, | |||
}, | |||
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({ | |||
name:item.name, | |||
value: item.num, | |||
itemStyle:{ | |||
color:{ | |||
type: 'linear', | |||
x: 1, | |||
y: 1, | |||
x2: 0, | |||
y2: 0, | |||
global: false, | |||
colorStops:[ | |||
{offset: 0,color: this.colors[index%4]}, | |||
{offset: 1,color: this.colors[index%4]+'33'} | |||
] | |||
} | |||
} | |||
}))}], | |||
tooltip: { | |||
trigger: 'item', | |||
className: "isra-chart-tooltip" | |||
}, | |||
} | |||
this.chart.setOption(option); | |||
} | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.isra-chart { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
</style> | |||
<style> | |||
.isra-chart-tooltip { | |||
background: #0a2b4f77 !important; | |||
border: none !important; | |||
backdrop-filter: blur(12px); | |||
} | |||
.isra-chart-tooltip * { | |||
color: #fff !important; | |||
} | |||
</style> |
@@ -2,7 +2,7 @@ | |||
* @Author: gtz | |||
* @Date: 2022-01-19 15:58:17 | |||
* @LastEditors: zhp | |||
* @LastEditTime: 2024-01-24 17:01:21 | |||
* @LastEditTime: 2024-01-29 15:35:37 | |||
* @Description: file content | |||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue | |||
--> | |||
@@ -27,9 +27,12 @@ | |||
<svg-icon :icon-class="titleIcon" style="font-size: 1em; position: relative; top: .08em" /> | |||
{{ title }} | |||
</span> | |||
<!-- <span style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;"> | |||
{{ time +'-'+ time2 }} | |||
<!-- <span v-if="showTime" style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;"> | |||
{{ time2 +'-'+ time }} | |||
</span> --> | |||
<span style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;"> | |||
{{ startTime + '-' + endTime }} | |||
</span> | |||
</div> | |||
<!-- <div v-if="true" class="bar-title"> | |||
<span> | |||
@@ -45,6 +48,7 @@ | |||
</template> | |||
<script> | |||
import moment from "moment"; | |||
export default { | |||
name: 'BaseContainer', | |||
props: { | |||
@@ -56,6 +60,14 @@ export default { | |||
type: Boolean, | |||
default: false | |||
}, | |||
showTime: { | |||
type: Boolean, | |||
default: false | |||
}, | |||
showYesTime: { | |||
type: Boolean, | |||
default: false | |||
}, | |||
back: { | |||
type: String, | |||
default: '' | |||
@@ -93,38 +105,52 @@ export default { | |||
return { | |||
curIndex: 0, | |||
time: null, | |||
time2:null | |||
time2: null, | |||
startTime: undefined, | |||
endTime: undefined | |||
// imgUrl: require(`../../../../assets/img/${this.back}.png`), | |||
} | |||
}, | |||
created() { | |||
}, | |||
mounted () { | |||
this.time = this.format(new Date().setHours(7,0,0)); | |||
// console.log(time); | |||
//前一天时间 | |||
this.time2 = this.format(new Date().setHours(7, 0, 0) - 86400000 * 1); | |||
console.log(new Date().setHours(7, 0, 0) - 86400000 * 1); | |||
// this.time = this.format(new Date().setHours(7,0,0)); | |||
// // console.log(time); | |||
// //前一天时间 | |||
let nowTime = new Date | |||
let hour = nowTime.getHours() | |||
if (hour > 6) { | |||
this.startTime = moment(nowTime).format('yyyy.MM.DD') + ' 7点' | |||
this.endTime = moment(moment(nowTime) + 86400000).format('yyyy.MM.DD') + ' 7点' | |||
} else { | |||
this.endTime = moment(nowTime).format('yyyy.MM.DD') + ' 7点' | |||
this.startTime = moment(moment(nowTime) - 86400000).format('yyyy.MM.DD') + ' 7点' | |||
} | |||
// this.yesStartTime = moment(moment(nowTime) - 86400000).format('yyyy.MM.DD') + ' 0点' | |||
// this.yesEndTime = moment(moment(nowTime) - 86400000).format('yyyy.MM.DD') + ' 24点' | |||
// this.time2 = this.format(new Date().setHours(7, 0, 0) - 86400000 * 1); | |||
// console.log(new Date().setHours(7, 0, 0) - 86400000 * 1); | |||
}, | |||
methods: { | |||
add0(m) { | |||
return m < 10 ? '0' + m : m | |||
}, | |||
format(shijianchuo) { | |||
//shijianchuo是整数,否则要parseInt转换 | |||
var time = new Date(shijianchuo); | |||
var y = time.getFullYear(); | |||
var m = time.getMonth() + 1; | |||
var d = time.getDate(); | |||
var h = time.getHours(); | |||
var mm = time.getMinutes(); | |||
var s = time.getSeconds(); | |||
return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + h + '时' | |||
}, | |||
changeTab(num) { | |||
this.curIndex = num | |||
this.$emit('tabSelect', num) | |||
}, | |||
// add0(m) { | |||
// return m < 10 ? '0' + m : m | |||
// }, | |||
// format(shijianchuo) { | |||
// //shijianchuo是整数,否则要parseInt转换 | |||
// var time = new Date(shijianchuo); | |||
// var y = time.getFullYear(); | |||
// var m = time.getMonth() + 1; | |||
// var d = time.getDate(); | |||
// var h = time.getHours(); | |||
// var mm = time.getMinutes(); | |||
// var s = time.getSeconds(); | |||
// return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + h + '时' | |||
// }, | |||
// changeTab(num) { | |||
// this.curIndex = num | |||
// this.$emit('tabSelect', num) | |||
// }, | |||
} | |||
} | |||
</script> | |||
@@ -2,7 +2,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2023-09-21 09:06:28 | |||
* @LastEditTime: 2024-01-17 15:26:04 | |||
* @LastEditTime: 2024-01-29 15:39:59 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -159,7 +159,7 @@ export default { | |||
itemWidth: 10, | |||
itemHeight: 10, | |||
top: '1%', | |||
right: '20px', | |||
// right: '20px', | |||
data: ['产线产量', '产线良品率'], | |||
textStyle: { | |||
fontSize: 12 * this.beilv, | |||
@@ -287,6 +287,6 @@ export default { | |||
</script> | |||
<style> | |||
.productChart{ | |||
top: -40px; | |||
top: -10px; | |||
} | |||
</style> |
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2023-09-21 09:06:28 | |||
* @LastEditTime: 2024-01-17 13:56:46 | |||
* @LastEditTime: 2024-01-29 15:14:40 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -190,12 +190,12 @@ export default { | |||
// }, | |||
yAxis: [ | |||
{ | |||
min: function() { // 取最小值向下取整为最小刻度 | |||
return 0 | |||
}, | |||
max: function(value) { // 取最大值向上取整为最大刻度 | |||
return Math.ceil(value.max) | |||
}, | |||
// min: function() { // 取最小值向下取整为最小刻度 | |||
// return 0 | |||
// }, | |||
// max: function(value) { // 取最大值向上取整为最大刻度 | |||
// return Math.ceil(value.max) | |||
// }, | |||
scale: true, | |||
type: 'value', | |||
name: '良品率/%', | |||
@@ -233,12 +233,12 @@ export default { | |||
// }, | |||
}, | |||
{ | |||
min: function() { // 取最小值向下取整为最小刻度 | |||
return 0 | |||
}, | |||
max: function(value) { // 取最大值向上取整为最大刻度 | |||
return Math.ceil(value.max) | |||
}, | |||
// min: function() { // 取最小值向下取整为最小刻度 | |||
// return 0 | |||
// }, | |||
// max: function(value) { // 取最大值向上取整为最大刻度 | |||
// return Math.ceil(value.max) | |||
// }, | |||
scale: true, | |||
type: 'value', | |||
name: '产量/㎡', // y轴上方的单位 | |||
@@ -2,7 +2,7 @@ | |||
* @Author: zwq | |||
* @Date: 2021-07-19 15:18:30 | |||
* @LastEditors: zhp | |||
* @LastEditTime: 2024-01-25 17:55:51 | |||
* @LastEditTime: 2024-01-29 15:29:39 | |||
* @Description: | |||
--> | |||
<template> | |||
@@ -80,7 +80,7 @@ | |||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12" type="flex" class="flex-1"> | |||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> | |||
<base-container :no-content-padding="true" :height="256" :size="'middle'" :title="'能源监控'" | |||
<base-container :show-yes-time="true" :no-content-padding="true" :height="256" :size="'middle'" :title="'能源监控'" | |||
:title-icon="'energyMonitoring'"> | |||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;"> | |||
<top-radio-group /> | |||
@@ -103,8 +103,8 @@ | |||
</base-container> | |||
</el-col> | |||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> | |||
<base-container :no-content-padding="true" :height="318 + 338 + 16" :size="'middle'" :title="'产线产量及良品率'" | |||
:title-icon="'productLine'"> | |||
<base-container :show-time="true" :no-content-padding="true" :height="318 + 338 + 16" :size="'middle'" | |||
:title="'产线产量及良品率'" :title-icon="'productLine'"> | |||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;"> | |||
<top-radio-group /> | |||
</div> --> | |||
@@ -611,6 +611,10 @@ export default { | |||
// this.fetchList('line-chart-data') | |||
this.init() | |||
}, | |||
destroyed () { | |||
this.websocketClose() | |||
this.SJGWebsocketClose() | |||
}, | |||
mounted() { | |||
this.getList() | |||
this.initWebSocket() | |||
@@ -828,6 +832,7 @@ export default { | |||
this.SJGWsData.detData.forEach((ele) => { | |||
if (item.id == ele.productionLineId) { | |||
if (item.name.substr(0, 1) == "D") { | |||
console.log(ele) | |||
nameList.push(item.name) | |||
outputNumList.push(ele.outputNum) | |||
passRateList.push(ele.passRate * 100) | |||
@@ -868,9 +873,9 @@ export default { | |||
// this.websocket.send('11111') | |||
// }, | |||
// // 关闭 | |||
// SJGWebsocketClose(e) { | |||
// console.log('WebSocket 断开连接', e) | |||
// }, | |||
SJGWebsocketClose(e) { | |||
console.log('WebSocket 断开连接', e) | |||
}, | |||
// // 连接建立之后执行send方法发送数据 | |||
websocketOnOpen() { | |||
console.log('socket连接成功') | |||
@@ -0,0 +1,280 @@ | |||
<!-- | |||
filename: dialogForm.vue | |||
author: liubin | |||
date: 2023-09-11 15:55:13 | |||
description: DialogForm for equipmentBindSection only | |||
--> | |||
<template> | |||
<el-form ref="dataForm" :model="dataForm" label-width="120px" v-loading="formLoading" label-position="top"> | |||
<el-row :gutter="20"> | |||
<el-col :span="12"> | |||
<el-form-item label="产线" prop="productionLineId" | |||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]"> | |||
<el-select v-model="dataForm.productionLineId" placeholder="请选择产线" filterable | |||
@change="handleProductlineChange"> | |||
<el-option v-for="opt in productionLineList" :key="opt.value" :label="opt.label" :value="opt.value" /> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="工段" prop="sectionId" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]"> | |||
<el-select v-model="dataForm.sectionId" placeholder="请选择工段" filterable @change="$emit('update', dataForm)"> | |||
<el-option v-for="opt in workshopSectionList" :key="opt.value" :label="opt.label" :value="opt.value" /> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="24"> | |||
<el-form-item label="检测内容" prop="inspectionDetIdList" | |||
:rules="[{ required: true, message: '不能为空', trigger: 'change' }]"> | |||
<div class="itemDet" v-for="item in inspectionDetList" :key="item.typeId" style="padding: 0 20px;"> | |||
<div>{{ item.typeName}} </div> | |||
<!-- <div>{{ item.data }} </div> --> | |||
<div class="content"> | |||
<el-checkbox-group v-model="dataForm.inspectionDetIdList" @change="handleCheckedCitiesChange"> | |||
<el-checkbox v-for="i in item.data" :key="i.content" :label="i.detId">{{ i.content }} | |||
</el-checkbox> | |||
</el-checkbox-group> | |||
</div> | |||
</div> | |||
</el-form-item> | |||
</el-col> | |||
<!-- <el-col :span="12"> | |||
<el-form-item label="按钮盒识别码" prop="buttonId" :rules="[ | |||
{ required: true, message: '不能为空', trigger: 'blur' }, | |||
{ | |||
type: 'number', | |||
message: '请输入整数', | |||
trigger: 'blur', | |||
transform: (val) => Number.isInteger(Number(val)) && Number(val), | |||
}, | |||
]"> | |||
<el-input v-model="dataForm.buttonId" @change="$emit('update', dataForm)" placeholder="请输入整数" /> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="按钮值" prop="keyValue" :rules="[ | |||
{ required: true, message: '不能为空', trigger: 'blur' }, | |||
{ | |||
type: 'number', | |||
message: '请输入100以内的整数', | |||
trigger: 'blur', | |||
transform: (val) => | |||
Number.isInteger(+val) && | |||
Number(val) >= 0 && | |||
Number(val) <= 100 && | |||
Number(val), | |||
}, | |||
]"> | |||
<el-input v-model="dataForm.keyValue" type="number" min="0" max="100" @change="$emit('update', dataForm)" | |||
placeholder="请输入按钮盒模式" /> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="检测内容" prop="inspectionDetContent" | |||
:rules="[{ required: true, message: '不能为空', trigger: 'change' }]"> | |||
<el-select v-model="dataForm.inspectionDetContent" placeholder="请选择检测内容" filterable | |||
@change="$emit('update', dataForm)"> | |||
<el-option v-for="opt in inspectionDetList" :key="opt.value" :label="opt.label" :value="opt.value" /> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> --> | |||
</el-row> | |||
</el-form> | |||
</template> | |||
<script> | |||
import basicAdd from '../../mixins/basic-add'; | |||
import { | |||
createQualityInspectionBoxBtn, | |||
updateQualityInspectionBoxBtn, | |||
getQualityInspectionBoxBtn, | |||
getListByLineSection | |||
} from '@/api/base/qualityInspectionBoxBtn'; | |||
export default { | |||
mixins: [basicAdd], | |||
data() { | |||
return { | |||
urlOptions: { | |||
// isGetCode: false, | |||
// codeURL: getCode, | |||
createURL: createQualityInspectionBoxBtn, | |||
updateURL: updateQualityInspectionBoxBtn, | |||
infoURL: getQualityInspectionBoxBtn, | |||
}, | |||
dataForm: { | |||
// id: null, | |||
sectionId: null, | |||
productionLineId: null, | |||
inspectionDetIdList:[], | |||
}, | |||
formLoading: true, | |||
productionLineList: [], | |||
inspectionDetList:[], | |||
workshopSectionList: [], | |||
}; | |||
}, | |||
mounted() { | |||
this.getProductionLineList() | |||
this.getQualityInspectionDetList() | |||
// this.getList() | |||
// this.getWorksectionList(); | |||
// this.getCode('/base/equipment-group-alarm/getCode').then((code) => { | |||
// this.formLoading = false; | |||
// this.$emit('update', { | |||
// ...this.dataForm, | |||
// code, | |||
// }); | |||
// }); | |||
}, | |||
watch: { | |||
'dataForm.productionId': { | |||
handler(id) { | |||
if (id != null) this.getWorksectionList(id) | |||
}, | |||
immediate: true | |||
}, | |||
}, | |||
methods: { | |||
init(obj) { | |||
// console.log(productionLineId); | |||
console.log(obj); | |||
this.visible = true | |||
// if(obj.id) | |||
if (obj) { | |||
this.dataForm.id = obj.id || null; | |||
} | |||
this.$nextTick(() => { | |||
this.$refs["dataForm"].resetFields() | |||
if (obj) { | |||
getListByLineSection({ | |||
productionLineId: obj.productionLineId, | |||
sectionId: obj.sectionId, | |||
}).then((res) => { | |||
console.log(res); | |||
this.dataForm.inspectionDetIdList = res.data | |||
this.dataForm.productionLineId = obj.productionLineId | |||
this.getWorksectionList(obj.productionLineId) | |||
this.dataForm.sectionId = obj.sectionId | |||
}) | |||
} | |||
if (this.dataForm.id) { | |||
console.log(1111); | |||
this.urlOptions.infoURL(obj.id).then(response => { | |||
this.dataForm.id = response.data.id | |||
// if (this.setData) { | |||
// this.setDataForm() | |||
// } | |||
}); | |||
} else { | |||
// if (this.urlOptions.isGetCode) { | |||
// this.getCode() | |||
// } | |||
} | |||
}); | |||
}, | |||
/** 模拟透传 ref */ | |||
handleCheckedCitiesChange(value) { | |||
;console.log(value); | |||
// let checkedCount = value.length; | |||
// this.checkAll = checkedCount === this.cities.length; | |||
// this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length; | |||
}, | |||
// getList() { | |||
// console.log(this.dataForm.sectionId); | |||
// }, | |||
validate(cb) { | |||
return this.$refs.form.validate(cb); | |||
}, | |||
resetFields(args) { | |||
return this.$refs.form.resetFields(args); | |||
}, | |||
async getProductionLineList() { | |||
this.formLoading = true; | |||
const res = await this.$axios({ | |||
url: '/base/core-production-line/listAll', | |||
method: 'get', | |||
}); | |||
if (res.code == 0) { | |||
this.productionLineList = res.data.map((item) => ({ | |||
label: item.name, | |||
value: item.id, | |||
})); | |||
} | |||
this.formLoading = false; | |||
}, | |||
async getQualityInspectionDetList() { | |||
this.formLoading = true; | |||
const res = await this.$axios({ | |||
url: '/base/quality-inspection-det/inspectionMap', | |||
method: 'get', | |||
}); | |||
if (res.code == 0) { | |||
console.log(res) | |||
let arr = [] | |||
for (let i in res.data) { | |||
let obj = { | |||
typeName: res.data[i].length !== 0 ? res.data[i][0].typeName : '', | |||
typeId: res.data[i].length !== 0 ? res.data[i][0].typeId : '', | |||
data:[] | |||
} | |||
let detArr = [] | |||
res.data[i].forEach(ele => { | |||
detArr.push({ | |||
detId: ele.id, | |||
content: ele.content | |||
}) | |||
}) | |||
obj.data = detArr | |||
arr.push(obj) | |||
} | |||
this.inspectionDetList = arr | |||
console.log(this.inspectionDetList); | |||
// this.inspectionDetList = res.data.map((item) => ({ | |||
// label: item.content, | |||
// value: item.content, | |||
// })); | |||
} | |||
this.formLoading = false; | |||
}, | |||
async getWorksectionList(id) { | |||
this.formLoading = true; | |||
const res = await this.$axios({ | |||
url: '/base/core-workshop-section/listByParentId', | |||
method: 'get', | |||
params: { | |||
id, | |||
}, | |||
}); | |||
if (res.code == 0) { | |||
this.workshopSectionList = res.data.map((item) => ({ | |||
label: item.name, | |||
value: item.id, | |||
})); | |||
} | |||
this.formLoading = false; | |||
}, | |||
async handleProductlineChange(id) { | |||
await this.getWorksectionList(id); | |||
this.dataForm.sectionId = null; | |||
this.$emit('update', this.dataForm); | |||
}, | |||
// async getCode(url) { | |||
// const response = await this.$axios(url); | |||
// return response.data; | |||
// }, | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.el-date-editor, | |||
.el-select { | |||
width: 100%; | |||
} | |||
</style> |
@@ -0,0 +1,222 @@ | |||
<template> | |||
<div class="app-container"> | |||
<!-- 搜索工作栏 --> | |||
<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" @headBtnClick="buttonClick" /> | |||
<!-- 列表 --> | |||
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData"> | |||
<method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right" :method-list="tableBtn" | |||
@clickBtn="handleClick" /> | |||
</base-table> | |||
<!-- 分页组件 --> | |||
<!-- <pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total" | |||
@pagination="getDataList" /> --> | |||
<!-- 对话框(添加 / 修改) --> | |||
<base-dialog :dialogTitle="addOrEditTitle" :dialogVisible="addOrUpdateVisible" width="50%" @cancel="handleCancel" | |||
@confirm="handleConfirm" :before-close="handleCancel"> | |||
<add-or-update ref="addOrUpdate" @refreshDataList="successSubmit"></add-or-update> | |||
</base-dialog> | |||
</div> | |||
</template> | |||
<script> | |||
import { | |||
createQualityInspectionBoxBtn, | |||
updateQualityInspectionBoxBtn, | |||
deleteQualityInspectionBoxBtn, | |||
getQualityInspectionBoxBtn, | |||
getQualityInspectionBoxBtnPage, | |||
exportQualityInspectionBoxBtnExcel, | |||
getUserList | |||
} from '@/api/base/qualityInspectionBoxPermissions'; | |||
import basicPage from '../../mixins/basic-page'; | |||
import moment from 'moment'; | |||
import addOrUpdate from './dialogForm.vue'; | |||
export default { | |||
name: 'QualityInspectionBoxBtn', | |||
mixins: [basicPage], | |||
components: { addOrUpdate }, | |||
data() { | |||
return { | |||
urlOptions: { | |||
getDataListURL: getQualityInspectionBoxBtnPage, | |||
deleteURL: deleteQualityInspectionBoxBtn, | |||
// exportURL: exportFactoryExcel, | |||
}, | |||
searchBarFormConfig: [ | |||
{ | |||
type: 'select', | |||
label: '用户名称', | |||
selectOptions: [], | |||
labelField: 'name', | |||
valueField: 'id', | |||
param: 'userName', | |||
}, | |||
{ | |||
type: 'button', | |||
btnName: '查询', | |||
name: 'search', | |||
color: 'primary', | |||
}, | |||
{ | |||
type: 'separate', | |||
}, | |||
{ | |||
type: this.$auth.hasPermi('base:quality-inspection-box-permissions:create') | |||
? 'button' | |||
: '', | |||
btnName: '新增', | |||
name: 'add', | |||
plain: true, | |||
color: 'success', | |||
}, | |||
], | |||
tableBtn: [ | |||
this.$auth.hasPermi('base:quality-inspection-box-permissions:update') | |||
? { | |||
type: 'edit', | |||
btnName: '修改', | |||
} | |||
: undefined, | |||
this.$auth.hasPermi('base:quality-inspection-box-permissions:delete') | |||
? { | |||
type: 'delete', | |||
btnName: '删除', | |||
} | |||
: undefined, | |||
].filter((v) => v), | |||
tableData: [], | |||
tableProps: [ | |||
// { | |||
// prop: 'createTime', | |||
// label: '添加时间', | |||
// fixed: true, | |||
// width: 180, | |||
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | |||
// }, | |||
{ | |||
prop: 'productionLineName', | |||
label: '用户名', | |||
}, | |||
{ | |||
prop: 'sectionName', | |||
label: '用户昵称', | |||
}, | |||
{ | |||
prop: 'inspectionInfoList', | |||
label: '产线及工段', | |||
} | |||
], | |||
// 查询参数 | |||
listQuery: { | |||
pageNo: 1, | |||
pageSize: 10, | |||
inspectionDetContent: null, | |||
}, | |||
addOrUpdateVisible: false, | |||
addOrEditTitle:'', | |||
// 搜索框需要的 keys, 与上面 listQuery 的除 pageNo, pageSize 之外的 key 一一对应 | |||
searchBarKeys: ['inspectionDetContent'], | |||
form: { | |||
id: null, | |||
buttonId: null, | |||
inspectionDetContent: [], | |||
productionLineId: null, | |||
sectionId: null, | |||
model: null, | |||
keyValue: null, | |||
}, | |||
}; | |||
}, | |||
created() { | |||
this.getDict() | |||
}, | |||
methods: { | |||
getDict() { | |||
getUserList({ | |||
pageNo: 1, | |||
pageSize:999 | |||
}).then((res) => { | |||
this.searchBarFormConfig[0].selectOptions = res.data | |||
}) | |||
}, | |||
getDataList() { | |||
this.dataListLoading = true; | |||
this.urlOptions.getDataListURL(this.listQuery).then(response => { | |||
this.tableData = response.data.map((item) => { | |||
// console.log(item); | |||
return { | |||
inspectionInfoList: item.inspectionInfoList.toString(), | |||
productionLineId:item.productionLineId, | |||
productionLineName:item.productionLineName, | |||
sectionId: item.sectionId, | |||
sectionName: item.sectionName | |||
} | |||
}) | |||
this.listQuery.total = response.data.total; | |||
this.dataListLoading = false; | |||
}); | |||
}, | |||
reset() { | |||
this.form = { | |||
id: null, | |||
buttonId: null, | |||
inspectionDetContent: null, | |||
productionId: null, | |||
sectionId: null, | |||
model: null, | |||
keyValue: null, | |||
}; | |||
this.resetForm('form'); | |||
}, | |||
deleteHandle(id, name, index, data) { | |||
this.$confirm(`确认要删除产线名为${data.productionLineName}的数据项?`, "提示", { | |||
confirmButtonText: "确定", | |||
cancelButtonText: "取消", | |||
type: "warning", | |||
}) | |||
.then(() => { | |||
this.urlOptions.deleteURL(id).then(({ data }) => { | |||
this.$message({ | |||
message: "操作成功", | |||
type: "success", | |||
duration: 1500, | |||
onClose: () => { | |||
this.getDataList(); | |||
}, | |||
}); | |||
}); | |||
}) | |||
.catch(() => { }); | |||
}, | |||
buttonClick(val) { | |||
switch (val.btnName) { | |||
case 'search': | |||
this.listQuery.pageNo = 1; | |||
this.listQuery.pageSize = 10; | |||
this.listQuery.inspectionDetContent = val.inspectionDetContent ? val.inspectionDetContent : undefined; | |||
// this.listQuery.teamId = val.teamId ? val.teamId : undefined; | |||
this.getDataList() | |||
break; | |||
case 'add': | |||
this.addOrEditTitle = '新增'; | |||
this.addOrUpdateVisible = true; | |||
// this.addOrUpdateVisible = true; | |||
this.$nextTick(() => { | |||
this.$refs.addOrUpdate.init(); | |||
}); | |||
break; | |||
case 'export': | |||
this.handleExport(); | |||
break; | |||
default: | |||
console.log(val); | |||
} | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -118,7 +118,7 @@ export default { | |||
{ | |||
type: 'datePicker', | |||
label: '时间段', | |||
dateType: 'daterange', // datetimerange | |||
dateType: 'datetimerange', // datetimerange | |||
// format: 'yyyy-MM-dd HH:mm:ss', | |||
format: 'yyyy-MM-dd HH:mm:ss', | |||
valueFormat: 'yyyy-MM-dd HH:mm:ss', | |||