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

Merge pull request 'projects/mesxc-zhp' (#170) from projects/mesxc-zhp into projects/mesxc-test

Browse Source 
Reviewed-on: #170
This commit is contained in:
高天泽 2024-01-05 08:46:40 +08:00
commit 8df2bbae1a
7 changed files with 181 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.env.dev
View File

@ -1,7 +1,7 @@
### ###
# @Author: Do not edit # @Author: Do not edit
# @Date: 2023-08-29 09:40:39 # @Date: 2023-08-29 09:40:39
# @LastEditTime: 2023-12-29 08:57:36 # @LastEditTime: 2024-01-04 15:50:26
# @LastEditors: zhp # @LastEditors: zhp
# @Description: # @Description:
### ###
@ -13,11 +13,8 @@ VUE_APP_TITLE = MES系统
# 芋道管理系统/开发环境 # 芋道管理系统/开发环境
# VUE_APP_BASE_API = 'http://100.64.0.26:48082' # 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://10.70.2.2:8080'
# VUE_APP_BASE_API = 'http://192.168.4.173:48080' # VUE_APP_BASE_API = 'http://192.168.4.173:48080'
# VUE_APP_BASE_API = 'http://192.168.2.173: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.49:48082'
@ -25,7 +22,9 @@ VUE_APP_BASE_API = 'http://10.70.2.2:8080'
# VUE_APP_BASE_API = 'http://192.168.4.159:48080' # 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.1.62:48082' # VUE_APP_BASE_API = 'http://192.168.1.62:48082'
# VUE_APP_BASE_API = 'http://192.168.1.78:48082' VUE_APP_BASE_API = 'http://192.168.1.78:48082'
# socket地址
VUE_APP_Socket_API = 'ws://192.168.0.33:48082'
# VUE_APP_BASE_API = 'http://100.64.0.23:48082' # VUE_APP_BASE_API = 'http://100.64.0.23:48082'

1
package.json
View File

@ -81,6 +81,7 @@
"vue-plugin-hiprint": "0.0.54-fix", "vue-plugin-hiprint": "0.0.54-fix",
"vue-quill-editor": "^3.0.6", "vue-quill-editor": "^3.0.6",
"vue-router": "3.4.9", "vue-router": "3.4.9",
"vue-seamless-scroll": "^1.1.23",
"vue-video-player": "^5.0.2", "vue-video-player": "^5.0.2",
"vuedraggable": "2.24.3", "vuedraggable": "2.24.3",
"vuex": "3.6.2", "vuex": "3.6.2",

3
src/main.js
View File

@ -81,7 +81,8 @@ Vue.use(plugins);
Vue.use(VueMeta); Vue.use(VueMeta);
// Vue.use(dataV) // Vue.use(dataV)
// Vue.use(hljs.vuePlugin); // Vue.use(hljs.vuePlugin);
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
// bpmnProcessDesigner 需要引入 // bpmnProcessDesigner 需要引入
import MyPD from '@/components/bpmnProcessDesigner/package/index.js'; import MyPD from '@/components/bpmnProcessDesigner/package/index.js';
Vue.use(MyPD); Vue.use(MyPD);

223
src/views/OperationalOverview/coldBoard.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-07-19 15:18:30 * @Date: 2021-07-19 15:18:30
* @LastEditors: zhp * @LastEditors: zhp
* @LastEditTime: 2023-12-29 16:41:18 * @LastEditTime: 2024-01-04 16:41:17
* @Description: * @Description:
--> -->
<template> <template>
@ -12,7 +12,7 @@
lineHeight: 88 + 'px', lineHeight: 88 + 'px',
fontSize: 31 + 'px' fontSize: 31 + 'px'
}"> }">
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.22em" alt=""> <img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
许昌安彩冷端看板 许昌安彩冷端看板
<h3 class="unit">单位：河南汇融科技服务有限公司</h3> <h3 class="unit">单位：河南汇融科技服务有限公司</h3>
<h3 class="time">{{ times }}</h3> <h3 class="time">{{ times }}</h3>
@ -30,7 +30,7 @@
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1"> <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
<base-container :title="'切割数据'" :title-icon="'eqAlarm'"> <base-container :title="'切割数据'" :title-icon="'eqAlarm'">
<base-table1 :page="page1" :limit="9" :show-index="false" :table-config="cutProps" <base-table1 :page="1" :limit="9" :show-index="false" :table-config="cutProps"
:table-data="cutTableDataList" /> :table-data="cutTableDataList" />
</base-container> </base-container>
</el-col> </el-col>
@ -41,14 +41,14 @@
<top-radio-group /> <top-radio-group />
</div> --> </div> -->
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 --> <!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
<double-y-chart ref="productChart" :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList" :height="359" <double-y-chart ref="productChart" :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList"
:show-legend="true" /> :height="359" :show-legend="true" />
</base-container> </base-container>
</el-col> </el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
<base-container :title="'ISRA 缺陷数据'" :title-icon="'eqMonitoring'"> <base-container :title="'ISRA 缺陷数据'" :title-icon="'eqMonitoring'">
<base-table1 :page="page2" :limit="9" :show-index="false" :table-config="ISRATableProps" <base-table1 :page="1" :limit="9" :show-index="false" :table-config="ISRATableProps"
:table-data="ISRAList" /> :table-data="ISRAList" />
</base-container> </base-container>
</el-col> </el-col>
@ -62,7 +62,7 @@
</div> --> </div> -->
<!-- <el-row :gutter="9"> --> <!-- <el-row :gutter="9"> -->
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24"> --> <!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24"> -->
<pile-bar-chart ref="pileChart" :name-list="EnergyMonitoringNameList" :data-list="EnergyMonitoringList" <pile-bar-chart ref="pileChart" :name-list="EnergyMonitoringNameList" :data-list="EnergyMonitoringList"
:height="359" /> :height="359" />
<!-- </el-col> --> <!-- </el-col> -->
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> <!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
@ -84,15 +84,18 @@
</div> --> </div> -->
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 --> <!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
<el-col :span="6"> <el-col :span="6">
<base-table1 :page="page3" :limit="9" :show-index="false" :table-config="EqMonitoringPropsFun" <h4 style="margin: 5px 0 5px 0;">融化风机</h4>
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringPropsFun"
:table-data="funList" /> :table-data="funList" />
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<base-table1 :page="page4" :limit="9" :show-index="false" :table-config="EqMonitoringPropsFun" <h3 style="margin: 5px 0 5px 0;">退火风机</h3>
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringPropsFun"
:table-data="annealFunList" /> :table-data="annealFunList" />
</el-col> </el-col>
<el-col :span="12" style="float: right;"> <el-col :span="12" style="float: right;">
<base-table1 :page="page5" :limit="9" :show-index="false" :table-config="EqMonitoringProps" <h3 style="margin: 5px 0 5px 0;">产线设备</h3>
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringProps"
:table-data="realEqList" /> :table-data="realEqList" />
</el-col> </el-col>
<!-- <double-y-chart :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList" :height="359" <!-- <double-y-chart :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList" :height="359"
@ -127,7 +130,6 @@ import TopRadioGroup from './components/topRadioGroup'
// import pieChart3 from './components/PieChart' // import pieChart3 from './components/PieChart'
// import { mapGetters } from 'vuex' // import { mapGetters } from 'vuex'
import screenfull from 'screenfull' import screenfull from 'screenfull'
import moment from "moment"
// import BaseVideo from './components/baseVideo.vue' // import BaseVideo from './components/baseVideo.vue'
import alarmLevel from './components/alarmLevel' import alarmLevel from './components/alarmLevel'
import pileBarChart from './components/pileBarChart' import pileBarChart from './components/pileBarChart'
@ -137,7 +139,7 @@ import doubleYChart from './components/doubleYChart '
// import elementResizeDetectorMaker from 'element-resize-detector'; // import elementResizeDetectorMaker from 'element-resize-detector';
// var erd = elementResizeDetectorMaker(); //创建实例 // var erd = elementResizeDetectorMaker(); //创建实例
// let resizeFun = null // let resizeFun = null
import { parseTime } from '../core/mixins/code-filter' import { parseTime } from '../core/mixins/code-filter';
import LinearBarChart from './components/linearBarChart' import LinearBarChart from './components/linearBarChart'
@ -147,24 +149,24 @@ const EqMonitoringPropsFun = [
{ prop: 'status', label: '运行状态', width: 80} { prop: 'status', label: '运行状态', width: 80}
] ]
const EqMonitoringProps = [ const EqMonitoringProps = [
{ prop: 'productLine', label: '产线' }, { prop: 'line', label: '产线' },
{ prop: 'equipmentName', label: '设备名称' }, { prop: 'name', label: '设备名称' },
{ prop: 'equipmentCode', label: '设备编码' }, { prop: 'code', label: '设备编码' },
{ {
prop: 'status', prop: 'run',
label: '运行状态', label: '运行状态',
filter: (val) =>
val != null ? ['正常', '计划停机', '故障'][val] : '',
}, },
{ {
prop: 'error', prop: 'error',
label: '故障状态', label: '故障状态',
filter: (val) => (val != null ? (val ? '是' : '否') : ''),
}, },
] ]
const cutProps = [ const cutProps = [
{ prop: 'lineName', label: '产线', width: 50 }, { prop: 'lineName', label: '产线', width: 50 },
{ prop: 'time', label: '时间' }, {
prop: 'time', label: '时间',
filter: parseTime
},
{ prop: 'size', label: '规格' }, { prop: 'size', label: '规格' },
{ prop: 'productArea', label: '良品面积', width: 80 }, { prop: 'productArea', label: '良品面积', width: 80 },
{ prop: 'wasteArea', label: '废片面积', width: 80 }, { prop: 'wasteArea', label: '废片面积', width: 80 },
@ -232,13 +234,6 @@ const ISRATableProps = [
label: '占比' label: '占比'
} }
] ]
let pageFun1 = null
let pageFun2 = null
let pageFun3 = null
let pageFun4 = null
let pageFun5 = null
export default { export default {
name: 'ProductionMonitoringCockpit', name: 'ProductionMonitoringCockpit',
components: { components: {
@ -290,20 +285,6 @@ export default {
equipmentId: null, equipmentId: null,
productionLineId: null, productionLineId: null,
}, },
page1: 1,
page2: 1,
page3: 1,
page4: 1,
page5: 1,
total1: 1,
total2: 1,
total3: 1,
total4: 1,
total5: 1,
firstContent1: false,
firstContent2: false,
firstContent3: false,
firstContent4: false
} }
}, },
computed: { computed: {
@ -343,7 +324,7 @@ export default {
this.funInitWebSocket() this.funInitWebSocket()
this.CutInitWebSocket() this.CutInitWebSocket()
this.SJGInitWebSocket() this.SJGInitWebSocket()
// this.getList()
this.getTimes() this.getTimes()
const _this = this; const _this = this;
_this.beilv2 = document.documentElement.clientWidth / 1920 _this.beilv2 = document.documentElement.clientWidth / 1920
@ -353,7 +334,7 @@ export default {
this.beilv2 = _this.clientWidth / 1920 this.beilv2 = _this.clientWidth / 1920
})() })()
} }
this.getList() // this.getList()
// const _this = this; // const _this = this;
// window.onresize = () => { // window.onresize = () => {
// return (() => { // return (() => {
@ -372,49 +353,36 @@ export default {
// // var height = element.offsetHeight; // // var height = element.offsetHeight;
// }); // });
}, },
beforeDestroy() { // beforeDestroy() {
//离开页面删除检测器和所有侦听器 // //离开页面删除检测器和所有侦听器
// erd.uninstall(document); //这里用ref是因为vue离开页面后获取不到dom // // erd.uninstall(document); //这里用ref是因为vue离开页面后获取不到dom
// removeEventListener('resize', resizeFun) // removeEventListener('resize', resizeFun)
clearInterval(pageFun1) // },
clearInterval(pageFun2)
clearInterval(pageFun3)
clearInterval(pageFun4)
clearInterval(pageFun5)
},
methods: { methods: {
getList() { // getList() {
// this.loading = true; // // this.loading = true;
// 执行查询 // // 执行查询
// let data = '{ "data": { "FanFrequencyInfo": { "1#10处拐角冷却风机": "0", "1#L型吊墙冷却风机": "0", "1#助燃风机": "44.8", "1#澄清带池壁风机": "40", "1#融化带池壁风机": "43", "1#钢碹碴小炉垛风机": "48", "2#10处拐角冷却风机": "50", "2#L型吊墙冷却风机": "49.7", "2#助燃风机": "0", "2#澄清带池壁风机": "0", "2#融化带池壁风机": "0", "2#钢碹碴小炉垛风机": "48", "3#澄清带池壁风机": "0", "3#融化带池壁风机": "0", "4#澄清带池壁风机": "40", "4#融化带池壁风机": "43" } }, "type": "FanFrequencyInfo" }' // // let data = '{ "data": { "FanFrequencyInfo": { "1#10处拐角冷却风机": "0", "1#L型吊墙冷却风机": "0", "1#助燃风机": "44.8", "1#澄清带池壁风机": "40", "1#融化带池壁风机": "43", "1#钢碹碴小炉垛风机": "48", "2#10处拐角冷却风机": "50", "2#L型吊墙冷却风机": "49.7", "2#助燃风机": "0", "2#澄清带池壁风机": "0", "2#融化带池壁风机": "0", "2#钢碹碴小炉垛风机": "48", "3#澄清带池壁风机": "0", "3#融化带池壁风机": "0", "4#澄清带池壁风机": "40", "4#融化带池壁风机": "43" } }, "type": "FanFrequencyInfo" }'
// let obj = JSON.parse(data) // // let obj = JSON.parse(data)
// // for() // // // for()
// let arr = [] // // let arr = []
// for (let i in obj.data.FanFrequencyInfo) { // // for (let i in obj.data.FanFrequencyInfo) {
// arr.push({ // // arr.push({
// equipmentName: i, // // equipmentName: i,
// status: obj.data.FanFrequencyInfo[i] // // status: obj.data.FanFrequencyInfo[i]
// }) // // })
// } // // }
// this.funList = arr`` // // this.funList = arr``
this.$axios.get( // this.$axios.get(
'/monitoring/equipment-monitor/realtime-page', // '/monitoring/equipment-monitor/realtime-page',
'get', // 'get',
this.queryParams // this.queryParams
).then((res) => { // ).then((res) => {
this.realEqList = res.data.list; // this.realEqList = res.data.list;
this.total5 = Math.ceil(res.data.list.length / 9) // // this.total = response.data.total;
setInterval(pageFun3 = () => { // // this.loading = false;
if (this.page5 >= this.total5) { // });
this.page5 = 1 // },
} else {
this.page5 += 1
}
}, 30000)
// this.total = response.data.total;
// this.loading = false;
});
},
getTimes() { getTimes() {
setInterval(this.getTimesInterval, 1000); setInterval(this.getTimesInterval, 1000);
}, },
@ -446,7 +414,7 @@ export default {
// const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111' // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG' // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
let date = new Date().valueOf() let date = new Date().valueOf()
const SJGWsUrl = `ws://10.70.2.2:8080/websocket/message?userId=COLD${date}` const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}`
this.SJGWebsocket = new WebSocket(SJGWsUrl) this.SJGWebsocket = new WebSocket(SJGWsUrl)
// 监听 WebSocket 连接 // 监听 WebSocket 连接
this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
@ -465,7 +433,7 @@ export default {
// const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111' // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG' // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
let date = new Date().valueOf() let date = new Date().valueOf()
const cutWsUrl = `ws://10.70.2.2:8080/websocket/message?userId=CUTTING${date}` const cutWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=CUTTING${date}`
this.cutWebsocket = new WebSocket(cutWsUrl) this.cutWebsocket = new WebSocket(cutWsUrl)
// 监听 WebSocket 连接 // 监听 WebSocket 连接
@ -518,20 +486,6 @@ export default {
}) })
} }
this.annealFunList = arr this.annealFunList = arr
this.total4 = Math.ceil(arr.length / 9)
if ( this.page4 >= this.total4) {
this.page4 = 1
}
if (!this.firstContent4) {
setInterval(pageFun4 = () => {
if (this.page4 >= this.total4) {
this.page4 = 1
} else {
this.page4 += 1
}
}, 30000)
this.firstContent4 = true
}
} }
if (this.funWsData.type === 'FanInfo') { if (this.funWsData.type === 'FanInfo') {
let arr = [] let arr = []
@ -542,20 +496,6 @@ export default {
}) })
} }
this.funList = arr this.funList = arr
this.total3 = Math.ceil(arr.length / 9)
if ( this.page3 >= this.total3) {
this.page3 = 1
}
if (!this.firstContent3) {
setInterval(pageFun3 = () => {
if (this.page3 >= this.total3) {
this.page3 = 1
} else {
this.page3 += 1
}
}, 30000)
this.firstContent3 = true
}
} }
}, },
cutWebsocketOnOpen() { cutWebsocketOnOpen() {
@ -566,6 +506,14 @@ export default {
cutWebsocketOnError(e) { cutWebsocketOnError(e) {
this.CutInitWebSocket() this.CutInitWebSocket()
}, },
getSize(str) {
console.log(str.match(/\d+(\.\d+)?/g))
let size = str.match(/\d+(\.\d+)?/g).map(ele => {
return parseFloat(ele)
})
console.log(size[0] + '*' + size[1] + '*' + size[2]);
return size[0] + '*' + size[1] + '*' + size[2]
},
// 数据接收 // 数据接收
cutWebsocketOnMessage(e) { cutWebsocketOnMessage(e) {
this.cutWsData = e?.data ? JSON.parse(e?.data) : {} this.cutWsData = e?.data ? JSON.parse(e?.data) : {}
@ -575,8 +523,8 @@ export default {
return { return {
id: ele.id, id: ele.id,
lineName: ele.lineName, lineName: ele.lineName,
time: moment(ele.time).format("MM-DD hh") + '时', time: ele.time,
size: ele.size, size: this.getSize(ele.size),
productArea: ele.productArea + '㎡', productArea: ele.productArea + '㎡',
wasteArea: ele.wasteArea + '㎡', wasteArea: ele.wasteArea + '㎡',
product: (ele.product * 100).toFixed(2) + '%' product: (ele.product * 100).toFixed(2) + '%'
@ -584,20 +532,6 @@ export default {
} }
// } // }
}); });
this.total1 = Math.ceil(this.cutWsData?.productHourData?.length / 9)
if ( this.page1 >= this.total1) {
this.page1 = 1
}
if (!this.firstContent1) {
setInterval(pageFun1 = () => {
if (this.page1 >= this.total1) {
this.page1 = 1
} else {
this.page1 += 1
}
}, 30000)
this.firstContent1 = true
}
} else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') { } else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
let nameList = [] let nameList = []
let nameWasteList = [] let nameWasteList = []
@ -646,21 +580,20 @@ export default {
} }
// } // }
}); });
} else if (this.SJGWsData.type === 'equipment') {
this.realEqList = this.SJGWsData.detData.map((ele, index) => {
// if (ele.progressRate != 1) {
return {
line: ele.line,
name: ele.name,
code: ele.code,
run: ele.run,
error: ele.error,
// percent: ele.percent
}
// }
});
this.total2 = Math.ceil(this.SJGWsData?.detData?.length / 9)
if ( this.page2 >= this.total2) {
this.page2 = 1
}
if (!this.firstContent2) {
setInterval(pageFun2 = () => {
if (this.page2 >= this.total2) {
this.page2 = 1
} else {
this.page2 += 1
}
}, 30000)
this.firstContent2 = true
}
} }
}, },
windowWidth(value) { windowWidth(value) {

2
src/views/OperationalOverview/components/baseContainer/index.vue
View File

@ -2,7 +2,7 @@
* @Author: gtz * @Author: gtz
* @Date: 2022-01-19 15:58:17 * @Date: 2022-01-19 15:58:17
* @LastEditors: zhp * @LastEditors: zhp
* @LastEditTime: 2023-11-14 13:28:27 * @LastEditTime: 2024-01-04 16:16:22
* @Description: file content * @Description: file content
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
--> -->

115
src/views/OperationalOverview/components/baseTable.vue
View File

@ -1,47 +1,51 @@
<!-- <!--
* @Date: 2020-12-14 09:07:03 * @Date: 2020-12-14 09:07:03
* @LastEditors: zhp * @LastEditors: zhp
* @LastEditTime: 2023-12-28 09:00:44 * @LastEditTime: 2024-01-04 16:16:00
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
* @Description: * @Description:
--> -->
<template> <template>
<div class="visual-base-table-container">
<el-table
v-loading="isLoading"
:header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff'}"
:row-style="setRowStyle"
:data="renderData"
border
style="width: 100%; background: transparent"
>
<el-table-column
prop="_pageIndex"
label="序号"
:width="50"
align="center"
/>
<el-table-column
v-for="item in renderTableHeadList"
:key="item.prop"
:show-overflow-tooltip="showOverflow"
v-bind="item"
>
<template slot-scope="scope">
<component <div class="visual-base-table-container scroll_table">
:is="item.subcomponent" <div style="display: inline-block; width: 100%">
v-if="item.subcomponent" <el-table class="top" v-loading="isLoading"
:inject-data="{...scope.row, ...item}" :header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff',}" :row-style="setRowStyle"
@emitData="emitData" :data="renderData" border style="width: 100%; background: transparent">
/> <el-table-column prop="_pageIndex" label="序号" :width="50" align="center" />
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span> <el-table-column v-for="item in renderTableHeadList" :key="item.prop" :show-overflow-tooltip="showOverflow"
v-bind="item">
<template slot-scope="scope">
</template> <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}"
</el-table-column> @emitData="emitData" />
<slot name="content" /> <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</el-table>
</template>
</el-table-column>
<slot name="content" />
</el-table>
<vue-seamless-scroll :data="renderData" class="seamless-warp" style="width: 100%" :class-option="classOption">
<el-table class="bottom" v-loading="isLoading"
:header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff',}" :row-style="setRowStyle"
:data="renderData" border style="width: 100%; background: transparent">
<el-table-column prop="_pageIndex" label="序号" :width="50" align="center" />
<el-table-column v-for="item in renderTableHeadList" :key="item.prop" :show-overflow-tooltip="showOverflow"
v-bind="item">
<template slot-scope="scope">
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}"
@emitData="emitData" />
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template>
</el-table-column>
<slot name="content" />
</el-table>
</vue-seamless-scroll>
</div>
</div> </div>
</template> </template>
<script> <script>
import { isObject, isString } from 'lodash' import { isObject, isString } from 'lodash'
@ -109,7 +113,19 @@ export default {
return this.tableConfig.filter((item, index) => { return this.tableConfig.filter((item, index) => {
return this.selectedBox[index] return this.selectedBox[index]
}) })
} },
classOption() {
return {
step: 0.3, // 数值越大速度滚动越快
limitMoveNum: 1, // 开始无缝滚动的数据量 this.list
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};
},
}, },
beforeMount() { beforeMount() {
this.selectedBox = new Array(100).fill(true) this.selectedBox = new Array(100).fill(true)
@ -171,16 +187,23 @@ export default {
background-color: rgba(79,114,136,0.29) !important; background-color: rgba(79,114,136,0.29) !important;
} }
} }
// .setting { </style>
// text-align: right;
// padding: 15px; <style lang="scss">
// .setting-box { .seamless-warp {
// width: 100px; height: 308px;
// } overflow: hidden;
// i { }
// color: #aaa; .min {
// @extend .pointer; display: flex;
// } width: 100%;
// } }
.top .el-table__body-wrapper {
display: none;
}
.bottom .el-table__header-wrapper {
display: none;
width: 100%;
}
</style> </style>

44
src/views/OperationalOverview/processingBoard.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-07-19 15:18:30 * @Date: 2021-07-19 15:18:30
* @LastEditors: zhp * @LastEditors: zhp
* @LastEditTime: 2023-12-29 15:15:50 * @LastEditTime: 2024-01-04 15:52:52
* @Description: * @Description:
--> -->
<template> <template>
@ -27,23 +27,23 @@
</el-button> --> </el-button> -->
</el-row> </el-row>
<el-row class="container-main flex-col" type="flex"> <el-row class="container-main flex-col" type="flex">
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1"> <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1" style="height: 50%;">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<base-container :title="'设备报警'" :title-icon="'eqAlarm'"> <base-container :title="'设备报警'" :height="318" :title-icon="'eqAlarm'">
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityYearTableProps" <base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityYearTableProps"
:table-data="equipmentList" /> :table-data="equipmentList" />
</base-container> </base-container>
</el-col> </el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<base-container :title="'各工序缺陷汇总'" :title-icon="'scrap'"> <base-container :title="'各工序缺陷汇总'" :title-icon="'scrap'">
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityMonthTableProps" <base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityMonthTableProps"
:table-data="qualityMonthList" /> :table-data="qualityMonthList" />
</base-container> </base-container>
</el-col> </el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<base-container :title="'工单监控'" :title-icon="'eqMonitoring'"> <base-container :height="318" :title="'工单监控'" :title-icon="'eqMonitoring'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;"> <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group /> <top-radio-group />
</div> --> </div> -->
@ -56,12 +56,12 @@
</el-row> --> </el-row> -->
<el-row v-for="op in orderList" :key="op.id" style="margin-bottom: 1em"> <el-row v-for="op in orderList" :key="op.id" style="margin-bottom: 1em">
<!-- <el-col :span="12"> --> <!-- <el-col :span="12"> -->
<el-progress :percentage="op.progressRate * 100" class="custom-progress-bar" /> <el-progress :percentage="op.progressRate * 100" class="custom-progress-bar" />
<!-- <p v-if="op.progressRate === 1" class="now-secondary-title" style="color:#4679FD"> <!-- <p v-if="op.progressRate === 1" class="now-secondary-title" style="color:#4679FD">
<i class="el-icon-check" /> <i class="el-icon-check" />
{{ op.name }} {{ op.name }}
</p> --> </p> -->
<p class="now-secondary-title">{{ op.name }}</p> <p class="now-secondary-title">{{ op.name }}</p>
<!-- </el-col> --> <!-- </el-col> -->
</el-row> </el-row>
<!-- <el-row> <!-- <el-row>
@ -606,7 +606,7 @@ export default {
'get', 'get',
).then((res) => { ).then((res) => {
// console.log('11111', res); // console.log('11111', res);
this.qualityMonthList = res.data this.qualityMonthList = res.data ? res.data : []
}) })
}, },
getTimes() { getTimes() {
@ -637,9 +637,9 @@ export default {
if (typeof (WebSocket) === 'undefined') { if (typeof (WebSocket) === 'undefined') {
alert('您的浏览器不支持WebSocket') alert('您的浏览器不支持WebSocket')
} else { } else {
const wsUrl = `ws://10.70.2.2:8080/websocket/message?userId=EN${date}`
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
let date = new Date().valueOf() let date = new Date().valueOf()
const wsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=EN${date}`
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
// const wsUrl = 'ws://10.70.2.2:8080/websocket/message?userId=EN111' // const wsUrl = 'ws://10.70.2.2:8080/websocket/message?userId=EN111'
// 实例化 WebSocket // 实例化 WebSocket
this.websocket = new WebSocket(wsUrl) this.websocket = new WebSocket(wsUrl)
@ -661,7 +661,8 @@ export default {
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG' // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
let date = new Date().valueOf() let date = new Date().valueOf()
// console.log(date); // console.log(date);
const SJGWsUrl = `ws://10.70.2.2:8080/websocket/message?userId=SJG${date}` console.log(process.env);
const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=SJG${date}`
this.SJGWebsocket = new WebSocket(SJGWsUrl) this.SJGWebsocket = new WebSocket(SJGWsUrl)
// 监听 WebSocket 连接 // 监听 WebSocket 连接
this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
@ -675,7 +676,7 @@ export default {
}, },
SJGWebsocketOnOpen() { SJGWebsocketOnOpen() {
console.log('socket连接成功') console.log('socket连接成功')
console.log(this.SJGWebsocket.onmessage); // console.log(this.SJGWebsocket.onmessage);
this.SJGWebsocket.onmessage() this.SJGWebsocket.onmessage()
}, },
// 连接建立失败重连 // 连接建立失败重连
@ -686,7 +687,7 @@ export default {
// 数据接收 // 数据接收
SJGWebsocketOnMessage(e) { SJGWebsocketOnMessage(e) {
// console.log(1111, e) // console.log(1111, e)
this.SJGWsData = JSON.parse(e.data) this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
// console.log(this.wsData.detData); // console.log(this.wsData.detData);
// console.log('22222', this.wsData.data) // console.log('22222', this.wsData.data)
if (this.SJGWsData.type === 'order') { if (this.SJGWsData.type === 'order') {
@ -727,7 +728,6 @@ export default {
} }
}) })
}) })
console.log(Array.from(new Set(nameList)))
// progressRateList = EnergyNameList // progressRateList = EnergyNameList
// let EnergyDataList = [] // let EnergyDataList = []
this.SJGWsData.detData.forEach((ele) => { this.SJGWsData.detData.forEach((ele) => {
@ -741,7 +741,7 @@ export default {
// console.log(this.EnergyMonitoringNameList) // console.log(this.EnergyMonitoringNameList)
// console.log(this.EnergyMonitoringList) // console.log(this.EnergyMonitoringList)
// this.$nextTick(() => { // this.$nextTick(() => {
this.$refs.productLineChart.initChart(nameList, passRateList, outputNumList) this.$refs.productLineChart.initChart(Array.from(new Set(nameList)), passRateList, outputNumList)
} }
}, },
// 数据发送 // 数据发送
@ -765,7 +765,7 @@ export default {
// 数据接收 // 数据接收
websocketOnMessage(e) { websocketOnMessage(e) {
// console.log(1111, e) // console.log(1111, e)
this.wsData = JSON.parse(e.data) this.wsData = e?.data ? JSON.parse(e?.data) : {}
// console.log('22222', this.wsData.data) // console.log('22222', this.wsData.data)
if (this.wsData.type === 'EnergyMonitoring') { if (this.wsData.type === 'EnergyMonitoring') {
let EnergyNameList = [] let EnergyNameList = []
@ -926,6 +926,10 @@ export default {
background-color: unset; background-color: unset;
background-image: linear-gradient(to right, #4573fe, #47f8dc); background-image: linear-gradient(to right, #4573fe, #47f8dc);
} }
// ::v-deep .el-progress-bar__outer {
// background-color:rgba(71, 248, 220, 1);
// // background-image: rgba(71, 248, 220, 1))
// }
.visual-select { .visual-select {
position: absolute; position: absolute;
right: 1em; right: 1em;
@ -935,8 +939,6 @@ export default {
// .container-main { // .container-main {
// padding: 5px; // padding: 5px;
// } // }
</style> </style>
<style lang="scss"> <style lang="scss">