diff --git a/.env.dev b/.env.dev index 40a1806e..a3f5a522 100644 --- a/.env.dev +++ b/.env.dev @@ -1,12 +1,12 @@ ### # @Author: Do not edit # @Date: 2023-08-29 09:40:39 - # @LastEditTime: 2023-12-18 13:35:00 + # @LastEditTime: 2023-12-29 08:57:36 # @LastEditors: zhp # @Description: ### # 开发环境配置 -ENV = 'development' +ENV = 'development' # 页面标题 VUE_APP_TITLE = MES系统 @@ -19,7 +19,7 @@ VUE_APP_BASE_API = 'http://192.168.0.33:48082' # 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.56: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.78:48082' diff --git a/src/assets/icons/svg/energyMonitoring.svg b/src/assets/icons/svg/energyMonitoring.svg new file mode 100644 index 00000000..ba27b0f4 --- /dev/null +++ b/src/assets/icons/svg/energyMonitoring.svg @@ -0,0 +1,14 @@ + + + 能源监控 + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/svg/eqAlarm.svg b/src/assets/icons/svg/eqAlarm.svg new file mode 100644 index 00000000..7b37c5be --- /dev/null +++ b/src/assets/icons/svg/eqAlarm.svg @@ -0,0 +1,14 @@ + + + 报警 + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/svg/eqMonitoring.svg b/src/assets/icons/svg/eqMonitoring.svg new file mode 100644 index 00000000..66ac7afa --- /dev/null +++ b/src/assets/icons/svg/eqMonitoring.svg @@ -0,0 +1,17 @@ + + + 设备监控 + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/svg/productLine.svg b/src/assets/icons/svg/productLine.svg new file mode 100644 index 00000000..a05d5c87 --- /dev/null +++ b/src/assets/icons/svg/productLine.svg @@ -0,0 +1,14 @@ + + + 库存管理 + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/svg/scrap.svg b/src/assets/icons/svg/scrap.svg new file mode 100644 index 00000000..5f72b0e5 --- /dev/null +++ b/src/assets/icons/svg/scrap.svg @@ -0,0 +1,16 @@ + + + 缺陷 + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/views/OperationalOverview/coldBoard.vue b/src/views/OperationalOverview/coldBoard.vue index 3127d186..57e845e9 100644 --- a/src/views/OperationalOverview/coldBoard.vue +++ b/src/views/OperationalOverview/coldBoard.vue @@ -1,213 +1,163 @@ + + height: 88 + 'px', + lineHeight: 88 + 'px', + fontSize: 31 + 'px' + }"> 许昌安彩冷端看板 单位:河南汇融科技服务有限公司 {{ times }} - - - - - - - - - - - - - - - - - - - + + + + + - - - - - - - - - - - - + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - @@ -1165,9 +823,11 @@ export default { .flex-1 { flex: 1 1; } - .h-full { - height: calc(100vh); + +.h-full { + height: calc(100vh - 150px); } + /* .container-main { min-height: calc(100vh - 10em); } */ diff --git a/src/views/OperationalOverview/components/baseTable.vue b/src/views/OperationalOverview/components/baseTable.vue index 52fc5ca8..83fbf703 100644 --- a/src/views/OperationalOverview/components/baseTable.vue +++ b/src/views/OperationalOverview/components/baseTable.vue @@ -1,7 +1,7 @@ @@ -16,9 +16,8 @@ style="width: 100%; background: transparent" > diff --git a/src/views/OperationalOverview/components/doubleYChart .vue b/src/views/OperationalOverview/components/doubleYChart .vue index 3b91bfb8..7355968c 100644 --- a/src/views/OperationalOverview/components/doubleYChart .vue +++ b/src/views/OperationalOverview/components/doubleYChart .vue @@ -1,7 +1,7 @@ @@ -60,98 +60,17 @@ export default { data() { return { chart: null, - series: [] + nameList: [], + series: [{ + type: 'bar', + data: [], + barWidth: 6 + }] } }, mounted() { console.log('mounted') console.log('borderRadius: ', this.borderRadius) - - this.series = [ - { - name: this.dataList[0].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[0].topColor }, - { offset: 1, color: this.dataList[0].bottomColor } - ]), - barBorderRadius: this.borderRadius - }, - data: this.dataList[0].data, - barWidth: 6 - }, - { - name: this.dataList[1].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[1].topColor }, - { offset: 1, color: this.dataList[1].bottomColor } - ]), - barBorderRadius: this.borderRadius - }, - data: this.dataList[1].data, - barWidth: 6 - }, - { - name: this.dataList[2].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[2].topColor }, - { offset: 1, color: this.dataList[2].bottomColor } - ]), - // borderRadius: [5, 5, 0, 0] - barBorderRadius: this.borderRadius - }, - data: this.dataList[2].data, - barWidth: 6 - }, - { - name: this.dataList[3].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[3].topColor }, - { offset: 1, color: this.dataList[3].bottomColor } - ]), - // borderRadius: [5, 5, 0, 0] - barBorderRadius: this.borderRadius - }, - data: this.dataList[3].data, - barWidth: 6 - }, - { - name: this.dataList[4].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[4].topColor }, - { offset: 1, color: this.dataList[4].bottomColor } - ]), - // borderRadius: [5, 5, 0, 0] - barBorderRadius: this.borderRadius - }, - data: this.dataList[4].data, - barWidth: 6 - }, - { - name: this.dataList[5].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[5].topColor }, - { offset: 1, color: this.dataList[5].bottomColor } - ]), - // borderRadius: [5, 5, 0, 0] - barBorderRadius: this.borderRadius - }, - data: this.dataList[5].data, - barWidth: 6 - } - ] - this.$nextTick(() => { this.initChart() }) @@ -164,8 +83,50 @@ export default { this.chart = null }, methods: { - initChart() { - console.log(1) + initChart(nameList, passRateList, outputNumList) { + let series= [ + { + name: '产线产量', + type: 'bar', + yAxisIndex: 1, + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: '#9DD5FF' }, + { offset: 1, color: '#1295FF' } + ]) + // barBorderRadius: this.borderRadius + }, + barWidth: 12, + data: outputNumList + }, + { + name: '产线良品率', + type: 'line', + yAxisIndex: 0, + areaStyle: { + opacity: 0.8, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgba(255, 209, 96, 0.18)' + }, + { + offset: 1, + color: 'rgba(255, 234, 153, 0)' + } + ]) + }, + itemStyle: { + normal: { + color: 'rgba(255, 209, 96, 1)', //改变折线点的颜色 + lineStyle: { + color: 'rgba(255, 209, 96, 1)' //改变折线颜色 + } + } + }, + data: passRateList + } + ] const colors = ['#5470C6', '#91CC75', '#EE6666'] this.chart = echarts.init(document.getElementById(this.id)) this.chart.setOption({ @@ -177,7 +138,12 @@ export default { } }, grid: { - right: '20%' + left: "3%", + right: "4%", + bottom: "3%", + width: 'auto', + height: "auto", + containLabel: true }, legend: { data: ['产线产量', '产线良品率'], @@ -205,7 +171,7 @@ export default { color: '#213259' } }, - data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线', '钢七线', '钢八线'] + data: nameList }, // yAxis: { @@ -236,8 +202,7 @@ export default { axisLabel: { textStyle: { color: '#ced1d5', // 坐标值得具体的颜色 - formatter: '{value} 片' - + formatter: '{value}%' } }, splitLine: { @@ -295,29 +260,7 @@ export default { // }, } ], - series: [ - { - name: '产线产量', - type: 'bar', - yAxisIndex: 1, - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#9DD5FF' }, - { offset: 1, color: '#1295FF' } - ]) - // barBorderRadius: this.borderRadius - }, - data: [ - 2032, 3032, 1802, 2932, 2322, 2613, 2873, 2561 - ] - }, - { - name: '产线良品率', - type: 'line', - yAxisIndex: 0, - data: [98, 97, 94, 97.6, 98.2, 98.2, 97.4, 98.5] - } - ] + series: series }) } } diff --git a/src/views/OperationalOverview/components/linearBarChart.vue b/src/views/OperationalOverview/components/linearBarChart.vue index 9dea0694..a2e9f1c1 100644 --- a/src/views/OperationalOverview/components/linearBarChart.vue +++ b/src/views/OperationalOverview/components/linearBarChart.vue @@ -41,113 +41,39 @@ export default { type: Boolean, default: false }, - nameList: { - type: Array, - default: () => [] - }, - dataList: { - type: Array, - default: () => [] - } + // nameList: { + // type: Array, + // default: () => [] + // }, + // dataList: { + // type: Array, + // default: () => [] + // } }, data() { return { chart: null, - series: [] + nameList: [], + series: [{ + type: 'bar', + data: [], + barWidth: 6 + + }] } }, mounted() { console.log('mounted') console.log('borderRadius: ', this.borderRadius) - - this.series = [ - { - name: this.dataList[0].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[0].topColor }, - { offset: 1, color: this.dataList[0].bottomColor } - ]), - barBorderRadius: this.borderRadius - }, - data: this.dataList[0].data, - barWidth: 6 - }, - { - name: this.dataList[1].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[1].topColor }, - { offset: 1, color: this.dataList[1].bottomColor } - ]), - barBorderRadius: this.borderRadius - }, - data: this.dataList[1].data, - barWidth: 6 - }, - { - name: this.dataList[2].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[2].topColor }, - { offset: 1, color: this.dataList[2].bottomColor } - ]), - // borderRadius: [5, 5, 0, 0] - barBorderRadius: this.borderRadius - }, - data: this.dataList[2].data, - barWidth: 6 - }, - { - name: this.dataList[3].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[3].topColor }, - { offset: 1, color: this.dataList[3].bottomColor } - ]), - // borderRadius: [5, 5, 0, 0] - barBorderRadius: this.borderRadius - }, - data: this.dataList[3].data, - barWidth: 6 - }, - { - name: this.dataList[4].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[4].topColor }, - { offset: 1, color: this.dataList[4].bottomColor } - ]), - // borderRadius: [5, 5, 0, 0] - barBorderRadius: this.borderRadius - }, - data: this.dataList[4].data, - barWidth: 6 - }, - { - name: this.dataList[5].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[5].topColor }, - { offset: 1, color: this.dataList[5].bottomColor } - ]), - // borderRadius: [5, 5, 0, 0] - barBorderRadius: this.borderRadius - }, - data: this.dataList[5].data, - barWidth: 6 - } - ] - - this.$nextTick(() => { - this.initChart() - }) + // console.log('33333', this.dataList) + // let arr = [] + // this.dataList.forEach(ele => { + // console.log(ele); + // this.series = [] + this.initChart() + // this.$nextTick(() => { + // // this.initChart() + // }) }, beforeDestroy() { if (!this.chart) { @@ -157,9 +83,20 @@ export default { this.chart = null }, methods: { - initChart() { - console.log(1) + initChart(nameList,dataList) { + // console.log(1) this.chart = echarts.init(document.getElementById(this.id)) + if (dataList.length !== 0) { + // this.$set(this.series, "data", dataList); + this.series = [{ + type: 'bar', + data: dataList, + barWidth: 6 + }] + } + if (nameList.length !== 0) { + this.nameList = nameList + } this.chart.setOption({ tooltip: { trigger: 'axis', @@ -216,19 +153,19 @@ export default { }, type: 'value' }, - legend: { - itemHeight: 10, - itemWidth: 10, - x: 'center', // 可设定图例在左、右、居中 - y: 'top', // 可设定图例在上、下、居中 - show: this.showLegend, - data: this.dataList, - right: '1%', - textStyle: { - fontSize: 12 * this.beilv, - color: '#ced1d5' - } - }, + // legend: { + // itemHeight: 10, + // itemWidth: 10, + // x: 'center', // 可设定图例在左、右、居中 + // y: 'top', // 可设定图例在上、下、居中 + // show: this.showLegend, + // data: this.dataList, + // right: '1%', + // textStyle: { + // fontSize: 12 * this.beilv, + // color: '#ced1d5' + // } + // }, series: this.series }) } diff --git a/src/views/OperationalOverview/components/pileBarChart.vue b/src/views/OperationalOverview/components/pileBarChart.vue new file mode 100644 index 00000000..01d7a6b3 --- /dev/null +++ b/src/views/OperationalOverview/components/pileBarChart.vue @@ -0,0 +1,235 @@ + + + + + + + + diff --git a/src/views/OperationalOverview/processingBoard.vue b/src/views/OperationalOverview/processingBoard.vue index 76e95645..33f03ab2 100644 --- a/src/views/OperationalOverview/processingBoard.vue +++ b/src/views/OperationalOverview/processingBoard.vue @@ -2,16 +2,16 @@ * @Author: zwq * @Date: 2021-07-19 15:18:30 * @LastEditors: zhp - * @LastEditTime: 2023-12-19 14:25:07 + * @LastEditTime: 2023-12-28 10:22:06 * @Description: --> + height: 88 + 'px', + lineHeight: 88 + 'px', + fontSize: 31 + 'px' + }"> 许昌安彩深加工看板 单位:河南汇融科技服务有限公司 @@ -29,26 +29,21 @@ - + + :table-data="equipmentList" /> - - - - - - + - + @@ -59,13 +54,15 @@ - - - + + + + + {{ op.name }} + - + - + @@ -400,22 +398,22 @@ const legendData3 = [ ] const qualityYearTableProps = [ { - prop: 'eqName', + prop: 'name', label: '设备名称' }, { - prop: 'eqCode', + prop: 'code', label: '设备编码' }, { - prop: 'level', - label: '报警级别', - subcomponent: alarmLevel, + prop: 'status', + label: '设备状态', + // subcomponent: alarmLevel, align: 'center' }, { - prop: 'content', - label: '报警内容' + prop: 'error', + label: '是否故障' } ] @@ -439,206 +437,39 @@ const qualityYearList = [ ] const qualityMonthTableProps = [ { - prop: 'lineName', + prop: 'productionLineName', label: '产线名' }, { - prop: 'process', + prop: 'sectionName', label: '工序' }, { - prop: 'eqName', - label: '设备名' + prop: 'count', + label: '损耗片数' }, { - prop: 'eqCode', - label: '设备编码' + prop: 'inspectionTypeName', + label: '缺陷类型' }, - { - prop: 'long', - label: '总运行时长(h)' - }, - // { - // prop: 'createTime', - // label: '保养时间' - // }, - { - prop: 'status', - label: '设备状态' - } - // { - // prop: 'nextCreateTime', - // label: '下次保养时间' - // } - // { - // prop: 'nextLong', - // label: '距离保养时间(天)', - // // subcomponent: nextDay, - // align: 'center' - // } ] -const qualityMonthList = [ - { - lineName: '钢一线', - process: '41', - eqName: '二次清洗机', - eqCode: '2312312', - long: '200', - // createTime: '2021-02-25 12:00:01', - status: '报警' - // nextCreateTime: '2022-12-25 12:00:01', - // nextLong: 365 - }, - { - lineName: '钢二线', - process: '41', - eqName: '锻造机', - eqCode: '43434', - long: '252', - // createTime: '2021-11-25 12:00:01', - status: '正常' - // nextCreateTime: '2022-12-25 12:00:01', - // nextLong: 4 - }, - { - lineName: '钢三线', - process: '41', - eqName: '设备3', - eqCode: '23213212', - long: '100', - // createTime: '2021-10-25 12:00:01', - status: '故障停机' - // nextCreateTime: '2022-12-25 12:00:01', - // nextLong: 24 - }, - { - lineName: '钢四线', - process: '41', - eqName: '设备4', - eqCode: '23213', - long: '322', - // createTime: '2021-02-25 12:00:01', - status: '故障停机' - // nextCreateTime: '2022-12-25 12:00:01', - // nextLong: -36 - }, - { - lineName: '钢五线', - process: '41', - eqName: '设备5', - eqCode: '23121312', - long: '232', - // createTime: '2021-06-25 12:00:01', - status: '待机' - // nextCreateTime: '2022-12-25 12:00:01', - // nextLong: 111 - }, - { - lineName: '钢五线', - process: '41', - eqName: '设备5', - eqCode: '23121312', - long: '212', - // createTime: '2021-06-25 12:00:01', - status: '待机' - // nextCreateTime: '2022-12-25 12:00:01', - // nextLong: 111 - }, - { - lineName: '钢五线', - process: '41', - eqName: '设备5', - eqCode: '23121312', - long: '123', - // createTime: '2021-06-25 12:00:01', - status: '镀膜机' - // nextCreateTime: '2022-12-25 12:00:01', - // nextLong: 111 - }, - { - lineName: '钢五线', - process: '41', - eqName: '清洗机', - eqCode: '23121312', - long: '322', - // createTime: '2021-06-25 12:00:01', - status: 'Remote' - // nextCreateTime: '2022-12-25 12:00:01', - // nextLong: 111 - }, - { - lineName: '钢五线', - process: '41', - eqName: '磨边机', - eqCode: '23121312', - long: '232', - // createTime: '2021-06-25 12:00:01', - status: 'Non-scheduled' - // nextCreateTime: '2022-12-25 12:00:01', - // nextLong: 111 - }, - { - lineName: '钢五线', - process: '41', - eqName: '磨边机', - eqCode: '23121312', - long: '232', - // createTime: '2021-06-25 12:00:01', - status: 'Non-scheduled' - // nextCreateTime: '2022-12-25 12:00:01', - // nextLong: 111 - }, - { - lineName: '钢五线', - process: '41', - eqName: '磨边机', - eqCode: '23121312', - long: '232', - // createTime: '2021-06-25 12:00:01', - status: 'Non-scheduled' - // nextCreateTime: '2022-12-25 12:00:01', - // nextLong: 111 - }, - { - lineName: '钢五线', - process: '41', - eqName: '磨边机', - eqCode: '23121312', - long: '232', - // createTime: '2021-06-25 12:00:01', - status: 'Non-scheduled' - // nextCreateTime: '2022-12-25 12:00:01', - // nextLong: 111 - }, - { - lineName: '钢五线', - process: '41', - eqName: '磨边机', - eqCode: '23121312', - long: '232', - // createTime: '2021-06-25 12:00:01', - status: 'Non-scheduled' - // nextCreateTime: '2022-12-25 12:00:01', - // nextLong: 111 - } -] const orderProcessList = [ { id: '1', outRate: '.8', name: '凯盛0322' }, { - id: '1', outRate: '.4', name: '光伏玻璃4.0' + id: '2', outRate: '.4', name: '光伏玻璃4.0' }, { - id: '1', outRate: '.5', name: '光伏玻璃3.0' + id: '3', outRate: '.5', name: '光伏玻璃3.0' }, { - id: '1', outRate: '.3', name: '光伏玻璃2.0' + id: '4', outRate: '.3', name: '光伏玻璃2.0' }, { - id: '1', outRate: '.5', name: '光伏玻璃1.0' + id: '5', outRate: '.5', name: '光伏玻璃1.0' }, { - id: '1', outRate: '.8', name: '光伏玻璃' + id: '6', outRate: '.8', name: '光伏玻璃' }, { - id: '1', outRate: '.8', name: '统计订单' + id: '7', outRate: '.8', name: '统计订单' } ] export default { @@ -661,11 +492,16 @@ export default { beilv2: 1, beilv: 1, value: 100, - times:'', + orderList:[], + times: '', + EnergyMonitoringNameList: [], + equipmentList:[], + EnergyMonitoringList: [], // offsetWidth: null, qualityYearTableProps, cxNameList, cxDataList, + productLineList:[], qualityYearList, clientWidth: 0, containerWidth: 111111, @@ -673,7 +509,7 @@ export default { // orderProcessList: [], orderProcessList, qualityTableProps1, - qualityMonthList, + qualityMonthList:[], qualityMonthTableProps, modelMonth: '', qualityList1, @@ -719,8 +555,17 @@ export default { this.init() }, mounted() { + this.getList() + this.initWebSocket() this.getTimes() - this.windowWidth(document.documentElement.clientWidth) + const _this = this; + _this.beilv2 = document.documentElement.clientWidth / 1920 + window.onresize = () => { + return (() => { + _this.clientWidth = `${document.documentElement.clientWidth}` + this.beilv2 = _this.clientWidth / 1920 + })() + } // const _this = this; // window.onresize = () => { // return (() => { @@ -746,6 +591,23 @@ export default { // removeEventListener('resize', resizeFun) // }, methods: { + getList() { + this.$axios.get( + 'base/core-production-line/listAll', + 'get', + this.queryParams + ).then((res) => { + console.log('11111', res); + this.productLineList = res.data + }) + this.$axios.get( + 'base/quality-inspection-record/dayStatistics', + 'get', + ).then((res) => { + console.log('11111', res); + this.qualityMonthList = res.data + }) + }, getTimes() { setInterval(this.getTimesInterval, 1000); }, @@ -770,6 +632,165 @@ export default { //拼接格式化当前时间 this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds; }, + initWebSocket() { + if (typeof (WebSocket) === 'undefined') { + alert('您的浏览器不支持WebSocket') + } else { + const wsUrl = `ws://192.168.0.33:48082/websocket/message?userId=EN${date}` + // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG' + let date = new Date().valueOf() + console.log(date); + const SJGWsUrl = `ws://192.168.0.33:48082/websocket/message?userId=SJG${date}` + this.SJGWebsocket = new WebSocket(SJGWsUrl) + // 监听 WebSocket 连接 + this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen + // 监听 WebSocket 错误信息 + this.SJGWebsocket.onerror = this.SJGWebsocketOnError + // 监听 WebSocket 消息 + this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage + // 监听 webSocket 断开信息 + this.SJGWebsocket.onclose = this.SJGWebsocketClose + // const wsUrl = 'ws://192.168.0.33:48082/websocket/message?userId=EN111' + // 实例化 WebSocket + this.websocket = new WebSocket(wsUrl) + // 监听 WebSocket 连接 + this.websocket.onopen = this.websocketOnOpen + // 监听 WebSocket 错误信息 + this.websocket.onerror = this.websocketOnError + // 监听 WebSocket 消息 + this.websocket.onmessage = this.websocketOnMessage + // 监听 webSocket 断开信息 + this.websocket.onclose = this.websocketClose + } + }, + SJGWebsocketOnOpen() { + console.log('socket连接成功') + console.log(this.SJGWebsocket.onmessage); + this.SJGWebsocket.onmessage() + }, + // 连接建立失败重连 + SJGWebsocketOnError(e) { + // console.log('11111', e) + this.initWebSocket() + }, + // 数据接收 + SJGWebsocketOnMessage(e) { + // console.log(1111, e) + this.wsData = JSON.parse(e.data) + // console.log(this.wsData.detData); + // console.log('22222', this.wsData.data) + if (this.wsData.type === 'order') { + this.orderList = this.wsData.detData.map((ele, index) => { + if (ele.progressRate != 1) { + return { + id: ele.id, + name: ele.name, + progressRate: ele.progressRate.toFixed(3) + } + } + }); + console.log(this.orderList) + } else if (this.wsData.type === 'equipment') { + this.equipmentList = this.wsData.detData.map((ele, index) => { + // if (ele.progressRate != 1) { + return { + id: ele.id, + name: ele.name, + code: ele.code, + status: ele.status, + error: ele.error=== true ? '是' : '否' + } + // } + }); + // console.log(this.orderList) + } else if (this.wsData.type === 'productline') { + console.log(this.wsData.detData); + let nameList = [] + let passRateList = [] + let outputNumList = [] + + // console.log('2222222222', this.productLineList); + this.productLineList.forEach((item) => { + this.wsData.detData.forEach((ele) => { + if (item.id == ele.productionLineId) { + nameList.push(item.name) + } + }) + }) + console.log(Array.from(new Set(nameList))) + // progressRateList = EnergyNameList + // let EnergyDataList = [] + this.wsData.detData.forEach((ele) => { + passRateList.push(ele.passRate *100 + ) + }) + this.wsData.detData.forEach((ele) => { + outputNumList.push(ele.outputNum + ) + }) + // console.log(this.EnergyMonitoringNameList) + // console.log(this.EnergyMonitoringList) + // this.$nextTick(() => { + this.$refs.productLineChart.initChart(nameList, passRateList, outputNumList) + } + }, + // 数据发送 + // SJGWebsocketSend() { + // this.websocket.send('11111') + // }, + // // 关闭 + // SJGWebsocketClose(e) { + // console.log('WebSocket 断开连接', e) + // }, + // // 连接建立之后执行send方法发送数据 + websocketOnOpen() { + console.log('socket连接成功') + this.websocket.onmessage() + }, + // 连接建立失败重连 + websocketOnError(e) { + console.log('11111', e) + this.initWebSocket() + }, + // 数据接收 + websocketOnMessage(e) { + // console.log(1111, e) + this.wsData = JSON.parse(e.data) + // console.log('22222', this.wsData.data) + if (this.wsData.type === 'EnergyMonitoring') { + let EnergyNameList = [] + this.wsData.data.forEach((ele) => { + EnergyNameList.push(ele.lineName) + }) + this.EnergyMonitoringNameList = EnergyNameList + let EnergyDataList = [] + this.wsData.data.forEach((ele) => { + EnergyDataList.push(ele.useQuantity + // { + // type: 'bar', + // data: ele.useQuantity, + // barWidth: 6 + + // } + ) + }) + this.EnergyMonitoringList = EnergyDataList + console.log(EnergyDataList) + // console.log(this.EnergyMonitoringNameList) + // console.log(this.EnergyMonitoringList) + // this.$nextTick(() => { + this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList) + // }) + } + }, + // 数据发送 + websocketSend() { + this.websocket.send('11111') + }, + // 关闭 + websocketClose(e) { + // console.log('WebSocket 断开连接', e) + }, windowWidth(value) { this.clientWidth = value this.beilv2 = this.clientWidth / 1920 @@ -901,8 +922,8 @@ export default { top: 2em; } -// .container-main { -// padding: 0px; +// .container-main { +// padding: 5px; // }
+ + + + + {{ op.name }} + - + - +
{{ op.name }}