@@ -2,7 +2,7 @@ | |||
* @Author: zwq | |||
* @Date: 2021-07-19 15:18:30 | |||
* @LastEditors: zhp | |||
* @LastEditTime: 2024-03-12 09:05:20 | |||
* @LastEditTime: 2024-03-26 09:57:35 | |||
* @Description: | |||
--> | |||
<template> | |||
@@ -36,17 +36,7 @@ | |||
</el-col> | |||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> | |||
<base-container :beilv="1" :size="'middle'" :title="'周转进度'" :title-icon="'order'" :back="'energy'"> | |||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;"> | |||
<top-radio-group /> | |||
</div> --> | |||
<!-- 为外部添加一个容器并显式地设置一个高度: --> | |||
<!-- <div style="height: 300px;"> --> | |||
<div style="width:100%; overflow: hidden scroll;"> | |||
<!-- <el-row style="margin-bottom: 1em"> | |||
<p class="now-team-title">加工工单进度</p> | |||
</el-row> --> | |||
<el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: 1em"> | |||
<p v-if="op.outRate === 1" class="now-secondary-title" style="color:#4679FD"> | |||
<i class="el-icon-check" /> | |||
@@ -56,31 +46,7 @@ | |||
<el-progress define-back-color="rgba(32, 57, 96, 1)" text-color="white" :percentage="op.outRate * 100" | |||
class="custom-progress-bar" /> | |||
</el-row> | |||
<!-- <el-row> | |||
<el-progress :percentage="100" class="custom-progress-bar" /> | |||
<p class="now-secondary-title" style="color:#4679FD"> | |||
<i class="el-icon-check" /> | |||
成都碲化镉5000一期订单 | |||
</p> | |||
</el-row> | |||
<el-row> | |||
<el-progress :percentage="85" class="custom-progress-bar" /> | |||
<p class="now-secondary-title">成都碲化镉二订单</p> | |||
</el-row> | |||
<el-row> | |||
<el-progress :percentage="85" class="custom-progress-bar" /> | |||
<p class="now-secondary-title">长利订单1000</p> | |||
</el-row> | |||
<el-row> | |||
<el-progress :percentage="85" class="custom-progress-bar" /> | |||
<p class="now-secondary-title">国际工程20号订单</p> | |||
</el-row> | |||
<el-row> | |||
<el-progress :percentage="85" class="custom-progress-bar" /> | |||
<p class="now-secondary-title">铜铟镓硒眉山10万订单</p> | |||
</el-row> --> | |||
</div> | |||
<!-- </div> --> | |||
</base-container> | |||
</el-col> | |||
</el-row> | |||
@@ -89,50 +55,18 @@ | |||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> | |||
<base-container :beilv="1" :height="256" :size="'middle'" :title="'库存管理'" :title-icon="'productLine'" | |||
:back="'energy'"> | |||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;"> | |||
<top-radio-group /> | |||
</div> --> | |||
<!-- <el-row :gutter="9 * beilv"> --> | |||
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24"> --> | |||
<base-table :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="inventoryTableProps" | |||
:table-data="inventoryList" /> | |||
<!-- </el-col> --> | |||
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> | |||
<base-table3 | |||
:page="2" | |||
:limit="5" | |||
:beilv="1" | |||
:table-config="qualityTableProps2" | |||
:table-data="qualityList2" | |||
/> | |||
</el-col> --> | |||
<!-- </el-row> --> | |||
</base-container> | |||
</el-col> | |||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> | |||
<base-container :beilv="1" :height="318 + 338 + 16" :size="'middle'" :title="'库位信息'" :title-icon="'info'" | |||
:back="'energy'"> | |||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;"> | |||
<top-radio-group /> | |||
</div> --> | |||
<!-- 像下面这样表格里的limit值,也许可以用js动态计算出来 --> | |||
<base-table2 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="locationTableProps" | |||
:table-data="locationList" /> | |||
</base-container> | |||
</el-col> | |||
</el-row> | |||
<!-- end --> | |||
<!-- <el-col :span="16"> | |||
<el-row> | |||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24"> | |||
<base-container :beilv="1" :height="672"> | |||
<base-video :video-height="624" :beilv="1" /> | |||
</base-container> | |||
</el-col> | |||
</el-row> | |||
</el-col> | |||
--> | |||
</el-row> | |||
</div> | |||
</template> | |||
@@ -142,252 +76,7 @@ import baseContainer from './components/baseContainer' | |||
import baseTable1 from './components/baseTable' | |||
import baseTable from './components/baseTable' | |||
import baseTable2 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' | |||
// import axios from '@/utils/request' | |||
// import doubleYChart from './components/doubleYChart ' | |||
// import elementResizeDetectorMaker from 'element-resize-detector'; | |||
// var erd = elementResizeDetectorMaker(); //创建实例 | |||
// import LinearBarChart from './components/linearBarChart' | |||
const qualityTableProps1 = [ | |||
{ | |||
prop: 'name', | |||
label: '产线名称' | |||
}, | |||
{ | |||
prop: 'createTime', | |||
label: '发生时间' | |||
}, | |||
{ | |||
prop: 'code', | |||
label: '质量编码' | |||
}, | |||
{ | |||
prop: 'content', | |||
label: '质量内容' | |||
} | |||
] | |||
const qualityTableProps2 = [ | |||
{ | |||
prop: 'name', | |||
label: '工序名称' | |||
}, | |||
{ | |||
prop: 'createTime', | |||
label: '发生时间' | |||
}, | |||
{ | |||
prop: 'code', | |||
label: '质量编码' | |||
}, | |||
{ | |||
prop: 'content', | |||
label: '质量内容' | |||
} | |||
] | |||
const cxNameList = ['周一', '周二', '周三', '周四', '周五'] | |||
const cxDataList = [ | |||
{ | |||
topColor: '#9DD5FF', | |||
bottomColor: '#1295FF', | |||
name: '电耗能', | |||
data: [100, 150, 121, 97, 140] | |||
}, | |||
{ | |||
topColor: '#FF8BC3', | |||
bottomColor: '#EB46A1', | |||
name: '水耗能', | |||
data: [110, 110, 151, 77, 110] | |||
}, | |||
{ | |||
topColor: '#85F6E9', | |||
bottomColor: '#2EC6B4', | |||
name: '天然气', | |||
data: [110, 120, 171, 287, 40] | |||
}, | |||
{ | |||
topColor: '#9496FF', | |||
bottomColor: '#6567FF', | |||
name: '焦炉煤气', | |||
data: [140, 157, 122, 27, 240] | |||
}, | |||
{ | |||
topColor: '#F68E8A', | |||
bottomColor: '#E95552', | |||
name: '余热发电', | |||
data: [170, 180, 127, 17, 340] | |||
}, | |||
{ | |||
topColor: '#FFE873', | |||
bottomColor: '#E7AE2A', | |||
name: '二氧化硫', | |||
data: [140, 160, 121, 57, 170] | |||
} | |||
] | |||
const qualityList1 = [ | |||
{ name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' }, | |||
{ name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' }, | |||
{ name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' }, | |||
{ name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' }, | |||
{ name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' }, | |||
{ name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' }, | |||
{ name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' }, | |||
{ name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' }, | |||
{ name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' }, | |||
{ name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' }, | |||
{ name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' }, | |||
{ name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' }, | |||
{ name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' }, | |||
{ name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' }, | |||
{ name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' }, | |||
{ name: '钢六线', createTime: '2021.12.11 24:59:59', code: '2132131212', content: '气泡' } | |||
] | |||
const qualityList2 = [ | |||
{ name: '上片', createTime: '2021.10.22 24:59:59', code: '2132132133', content: '气泡' }, | |||
{ name: '磨边', createTime: '2021.12.21 24:59:59', code: '2132131232', content: '气泡' }, | |||
{ name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' }, | |||
{ name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' }, | |||
{ name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' }, | |||
{ name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' }, | |||
{ name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' }, | |||
{ name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' }, | |||
{ name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' }, | |||
{ name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' }, | |||
{ name: '上片', createTime: '2021.10.22 24:59:59', code: '2132132133', content: '气泡' }, | |||
{ name: '磨边', createTime: '2021.12.21 24:59:59', code: '2132131232', content: '气泡' }, | |||
{ name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' }, | |||
{ name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' }, | |||
{ name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' }, | |||
{ name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' }, | |||
{ name: '丝网印刷', createTime: '2021.12.21 24:59:59', code: '21321322132', content: '气泡' }, | |||
{ name: '钢化炉', createTime: '2021.12.20 24:59:59', code: '21321312321', content: '气泡' }, | |||
{ name: '检测设备', createTime: '2021.12.12 24:59:59', code: '21321322132', content: '气泡' }, | |||
{ name: '包装设备', createTime: '2021.12.23 24:59:59', code: '39284982931', content: '气泡' } | |||
] | |||
const legendData1 = [ | |||
{ | |||
name: '设备1', | |||
icon: 'circle', | |||
value: 196 | |||
}, | |||
{ | |||
name: '设备2', | |||
icon: 'circle', | |||
value: 147 | |||
}, | |||
{ | |||
name: '设备3', | |||
icon: 'circle', | |||
value: 24 | |||
}, | |||
{ | |||
name: '设备4', | |||
icon: 'circle', | |||
value: 85 | |||
}, | |||
{ | |||
name: '设备5', | |||
icon: 'circle', | |||
value: 8 | |||
}, | |||
{ | |||
name: '设备6', | |||
icon: 'circle', | |||
value: 112 | |||
}, | |||
{ | |||
name: '设备7', | |||
icon: 'circle', | |||
value: 146 | |||
}, | |||
{ | |||
name: '设备8', | |||
icon: 'circle', | |||
value: 27 | |||
}, | |||
{ | |||
name: '设备9', | |||
icon: 'circle', | |||
value: 2 | |||
}, | |||
{ | |||
name: '设备10', | |||
icon: 'circle', | |||
value: 90 | |||
} | |||
] | |||
const legendData2 = [ | |||
{ | |||
name: '磨边', | |||
icon: 'circle', | |||
value: 196 | |||
}, | |||
{ | |||
name: '清洗', | |||
icon: 'circle', | |||
value: 135 | |||
}, | |||
{ | |||
name: '固化', | |||
icon: 'circle', | |||
value: 144 | |||
}, | |||
{ | |||
name: '镀膜', | |||
icon: 'circle', | |||
value: 97 | |||
}, | |||
{ | |||
name: '激光打孔', | |||
icon: 'circle', | |||
value: 12 | |||
}, | |||
{ | |||
name: '丝网印刷', | |||
icon: 'circle', | |||
value: 10 | |||
}, | |||
{ | |||
name: '钢化炉', | |||
icon: 'circle', | |||
value: 3 | |||
} | |||
] | |||
const legendData3 = [ | |||
{ | |||
name: '钢一线', | |||
icon: 'circle', | |||
value: 196 | |||
}, | |||
{ | |||
name: '钢二线', | |||
icon: 'circle', | |||
value: 133 | |||
}, | |||
{ | |||
name: '钢三线', | |||
icon: 'circle', | |||
value: 24 | |||
}, | |||
{ | |||
name: '钢四线', | |||
icon: 'circle', | |||
value: 77 | |||
}, | |||
{ | |||
name: '钢五线', | |||
icon: 'circle', | |||
value: 77 | |||
} | |||
] | |||
const locationTableProps = [ | |||
{ | |||
prop: 'eqName', | |||
@@ -552,107 +241,6 @@ const qualityYearList = [ | |||
{ eqName: 'RQ20230920', eqCode: '3-03', level: '成品库B-D区-4', product: ' 3.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' }, | |||
{ eqName: 'RQ20230920', eqCode: '1-03', level: '成品库C-D区-4', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' } | |||
] | |||
const qualityMonthTableProps = [ | |||
{ | |||
prop: 'lineName', | |||
label: '产线名' | |||
}, | |||
{ | |||
prop: 'process', | |||
label: '工序' | |||
}, | |||
{ | |||
prop: 'eqName', | |||
label: '设备名' | |||
}, | |||
{ | |||
prop: 'eqCode', | |||
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: '设备1', | |||
eqCode: '2312312', | |||
long: '255', | |||
// createTime: '2021-02-25 12:00:01', | |||
status: '报警' | |||
// nextCreateTime: '2022-12-25 12:00:01', | |||
// nextLong: 365 | |||
}, | |||
{ | |||
lineName: '钢二线', | |||
process: '41', | |||
eqName: '设备2', | |||
eqCode: '43434', | |||
long: '255', | |||
// 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: '255', | |||
// 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: '255', | |||
// 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: '255', | |||
// createTime: '2021-06-25 12:00:01', | |||
status: '待机' | |||
// nextCreateTime: '2022-12-25 12:00:01', | |||
// nextLong: 111 | |||
} | |||
] | |||
// let resizeFun = null | |||
export default { | |||
name: 'ProductionMonitoringCockpit', | |||
components: { | |||
@@ -676,12 +264,10 @@ export default { | |||
times:undefined, | |||
value: 100, | |||
qualityYearTableProps, | |||
cxNameList, | |||
inventoryTableProps, | |||
inventoryList, | |||
locationList, | |||
locationTableProps, | |||
cxDataList, | |||
qualityYearList, | |||
isFullScreen: false, | |||
orderProcessList: [ | |||
@@ -710,18 +296,12 @@ export default { | |||
outRate: '0.4' | |||
} | |||
], | |||
qualityTableProps1, | |||
qualityMonthList, | |||
qualityMonthTableProps, | |||
// qualityTableProps1, | |||
modelMonth: '', | |||
qualityList1, | |||
// logoutTime: 43200000, | |||
qualityTableProps2, | |||
qualityList2, | |||
// qualityTableProps2, | |||
// qualityList2, | |||
dateType: '0', | |||
legendData1, | |||
legendData2, | |||
legendData3 | |||
} | |||
}, | |||
computed: { | |||
@@ -770,23 +350,7 @@ export default { | |||
this.beilv2 = _this.clientWidth / 1920 | |||
})() | |||
} | |||
// this.beilv2 = window.innerWidth / 1920 | |||
// addEventListener('resize', resizeFun = () => { | |||
// this.beilv2 = window.innerWidth / 1920 | |||
// }) | |||
// erd.listenTo(document, (element) => { | |||
// console.log(element.offsetWidth) | |||
// this.beilv2 = element.offsetWidth / 1920 | |||
// // var width = element.offsetWidth; | |||
// // var height = element.offsetHeight; | |||
// }); | |||
}, | |||
// beforeDestroy() { | |||
// //离开页面删除检测器和所有侦听器 | |||
// // erd.uninstall(document); //这里用ref是因为vue离开页面后获取不到dom | |||
// removeEventListener('resize', resizeFun) | |||
// }, | |||
methods: { | |||
getTimes() { | |||
setInterval(this.getTimesInterval, 1000); | |||
@@ -815,32 +379,6 @@ export default { | |||
windowWidth(value) { | |||
this.clientWidth = value | |||
}, | |||
// fetchList(type) { | |||
// switch (type) { | |||
// case 'order-process': | |||
// return axios({ | |||
// url: '/analysis/factory-monitor/order', | |||
// method: 'post' | |||
// }).then(res => { | |||
// if (res.data) { | |||
// console.log(res) | |||
// this.orderProcessList = res.data | |||
// // this.orderProcessList = [ | |||
// // { id: 1, name: '订单1', outRate: 0.5 }, | |||
// // { id: 2, name: '订单2', outRate: 0.54 }, | |||
// // { id: 3, name: '订单3', outRate: 0.45 }, | |||
// // { id: 4, name: '订单4', outRate: 0.65 }, | |||
// // { id: 5, name: '订单5', outRate: 0.35 }, | |||
// // { id: 6, name: '订单6', outRate: 0.15 }, | |||
// // { id: 7, name: '订单7', outRate: 0.5 }, | |||
// // { id: 8, name: '订单8', outRate: 0.5 } | |||
// // ] | |||
// } else { | |||
// this.orderProcessList.splice(0) | |||
// } | |||
// }) | |||
// } | |||
// }, | |||
change() { | |||
this.isFullScreen = screenfull.isFullscreen | |||
}, | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-01-29 16:50:26 | |||
* @LastEditTime: 2024-03-26 09:25:08 | |||
* @LastEditTime: 2024-03-26 09:56:20 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -134,143 +134,31 @@ | |||
<script> | |||
import baseContainer from './components/baseContainer' | |||
import baseTable1 from './components/baseTable' | |||
// import baseContainer1 from './components/baseContainer/indexcopy' | |||
// import baseTable2 from './components/baseTable' | |||
// import baseTable3 from './components/baseTable' | |||
// import TopRadioGroup from './components/topRadioGroup' | |||
import screenfull from 'screenfull' | |||
// import BaseVideo from './components/baseVideo.vue' | |||
// import alarmLevel from './components/alarmLevel' | |||
import pileBarChart from './components/pileBarChart' | |||
import colorDiv from './components/colorDiv' | |||
import moment from "moment"; | |||
// import axios from '@/utils/request' | |||
import doubleYChart from './components/coldDoubleYChart' | |||
import { parseTime } from '../core/mixins/code-filter'; | |||
import ISRAChart from './components/ISRAChart.vue'; | |||
import { getDcsMsg, closeDcsMsg } from "./wsInterface" | |||
import LinearBarChart from './components/linearBarChart' | |||
const qualityYearTableProps= [] | |||
const EqMonitoringPropsFun = [ | |||
{ prop: 'equipmentName', label: '设备名称' }, | |||
{ prop: 'status', label: '运行状态', width: 80} | |||
] | |||
const EqMonitoringProps = [ | |||
{ prop: 'line', label: '产线' }, | |||
{ prop: 'name', label: '设备名称' }, | |||
{ prop: 'code', label: '设备编码' }, | |||
{ | |||
prop: 'run', | |||
label: '运行状态', | |||
}, | |||
{ | |||
prop: 'error', | |||
label: '故障状态', | |||
}, | |||
] | |||
const cutProps = [ | |||
{ prop: 'lineName', label: '产线', width: 50 }, | |||
{ | |||
prop: 'time', label: '时间', | |||
filter: parseTime | |||
}, | |||
{ prop: 'size', label: '规格' }, | |||
{ prop: 'productArea', label: '良品面积', width: 80 }, | |||
{ prop: 'wasteArea', label: '废片面积', width: 80 }, | |||
{ | |||
prop: 'product', label: '良品率', width: 80, | |||
subcomponent: colorDiv, | |||
}, | |||
] | |||
const cxNameList = ['周一', '周二', '周三', '周四', '周五'] | |||
const cxDataList = [ | |||
{ | |||
topColor: '#9DD5FF', | |||
bottomColor: '#1295FF', | |||
name: '电耗能', | |||
data: [100, 150, 121, 97, 140] | |||
}, | |||
{ | |||
topColor: '#FF8BC3', | |||
bottomColor: '#EB46A1', | |||
name: '水耗能', | |||
data: [110, 110, 151, 77, 110] | |||
}, | |||
{ | |||
topColor: '#85F6E9', | |||
bottomColor: '#2EC6B4', | |||
name: '天然气', | |||
data: [110, 120, 171, 287, 40] | |||
}, | |||
{ | |||
topColor: '#9496FF', | |||
bottomColor: '#6567FF', | |||
name: '焦炉煤气', | |||
data: [140, 157, 122, 27, 240] | |||
}, | |||
{ | |||
topColor: '#F68E8A', | |||
bottomColor: '#E95552', | |||
name: '余热发电', | |||
data: [170, 180, 127, 17, 340] | |||
}, | |||
{ | |||
topColor: '#FFE873', | |||
bottomColor: '#E7AE2A', | |||
name: '二氧化硫', | |||
data: [140, 160, 121, 57, 170] | |||
} | |||
] | |||
const ISRATableProps = [ | |||
{ | |||
prop: 'linename', | |||
label:'产线' | |||
}, | |||
{ | |||
prop: 'time', | |||
label: '时间' | |||
}, | |||
{ | |||
prop: 'type', | |||
label:'缺陷类型' | |||
}, | |||
{ | |||
prop: 'num', | |||
label: '缺陷数量' | |||
}, | |||
{ | |||
prop: 'percent', | |||
label: '占比' | |||
} | |||
] | |||
export default { | |||
name: 'ProductionMonitoringCockpit', | |||
components: { | |||
baseContainer, | |||
baseTable1, | |||
pileBarChart, | |||
// TopRadioGroup, | |||
doubleYChart, | |||
LinearBarChart, | |||
ISRAChart | |||
// baseContainer1 | |||
// pieChart1, | |||
// pieChart2 | |||
// pieChart3 | |||
// BaseVideo | |||
}, | |||
data() { | |||
return { | |||
beilv2: 1, | |||
beilv: 1, | |||
value: 100, | |||
EqMonitoringProps, | |||
EqMonitoringPropsFun, | |||
realEqList:[], | |||
qualityYearTableProps, | |||
ISRATableProps, | |||
orderList: [], | |||
times: '', | |||
cutConfig: { | |||
@@ -330,15 +218,7 @@ export default { | |||
}, | |||
ISRAList:[], | |||
EnergyMonitoringNameList: [], | |||
equipmentList: [], | |||
EnergyMonitoringList: [], | |||
// offsetWidth: null, | |||
cxNameList, | |||
cxDataList, | |||
// time:12, | |||
cutProps, | |||
// logoutTime: 43200000, | |||
cutTableDataList:[], | |||
clientWidth: 0, | |||
containerWidth: 111111, | |||
isFullScreen: false, | |||
@@ -385,10 +265,6 @@ export default { | |||
} | |||
}, | |||
created() { | |||
// this.fetchList('exception-alarm') | |||
// this.fetchList('inAndOutOfEachLine') | |||
// this.fetchList('order-process') | |||
// this.fetchList('line-chart-data') | |||
this.init() | |||
setTimeout(() => { | |||
window.location.reload() | |||
@@ -428,25 +304,8 @@ export default { | |||
this.beilv2 = _this.clientWidth / 1920 | |||
})() | |||
} | |||
// logoutInterval = setInterval(() => { | |||
// this.logoutTime -= 1000 | |||
// }, 1000) | |||
// if (this.logoutTime === 0) { | |||
// this.SJGInitWebSocket() | |||
// this.CutInitWebSocket() | |||
// this.funInitWebSocket() | |||
// this.logoutTimeReset() | |||
// } | |||
}, | |||
// beforeDestroy() { | |||
// //离开页面删除检测器和所有侦听器 | |||
// // erd.uninstall(document); //这里用ref是因为vue离开页面后获取不到dom | |||
// removeEventListener('resize', resizeFun) | |||
// }, | |||
methods: { | |||
// logoutTimeReset() { | |||
// this.logoutTime = this.time * 60 * 60 * 1000 | |||
// }, | |||
CutWebsocketClose(e) { | |||
console.log('WebSocket 断开连接', e) | |||
}, | |||
@@ -457,30 +316,8 @@ export default { | |||
console.log('WebSocket 断开连接', e) | |||
}, | |||
formatTime(time, option) { | |||
// if (('' + time).length === 10) { | |||
// time = parseInt(time) * 1000 | |||
// } else { | |||
// time = +time | |||
// } | |||
console.log(time); | |||
const d = new Date(time) | |||
// const now = Date.now() | |||
// console.log(time); | |||
// const diff = (now - d) / 1000 | |||
// if (diff < 30) { | |||
// return '刚刚' | |||
// } else if (diff < 3600) { | |||
// // less 1 hour | |||
// return Math.ceil(diff / 60) + '分钟前' | |||
// } else if (diff < 3600 * 24) { | |||
// return Math.ceil(diff / 3600) + '小时前' | |||
// } else if (diff < 3600 * 24 * 2) { | |||
// return '1天前' | |||
// } | |||
// if (option) { | |||
// return parseTime(time, option) | |||
// } else { | |||
return ( | |||
d.getMonth() + | |||
1 + | |||
@@ -495,30 +332,6 @@ export default { | |||
) | |||
// } | |||
}, | |||
// getList() { | |||
// // 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 obj = JSON.parse(data) | |||
// // // for() | |||
// // let arr = [] | |||
// // for (let i in obj.data.FanFrequencyInfo) { | |||
// // arr.push({ | |||
// // equipmentName: i, | |||
// // status: obj.data.FanFrequencyInfo[i] | |||
// // }) | |||
// // } | |||
// // this.funList = arr`` | |||
// this.$axios.get( | |||
// '/monitoring/equipment-monitor/realtime-page', | |||
// 'get', | |||
// this.queryParams | |||
// ).then((res) => { | |||
// this.realEqList = res.data.list; | |||
// // this.total = response.data.total; | |||
// // this.loading = false; | |||
// }); | |||
// }, | |||
getTimes() { | |||
setInterval(this.getTimesInterval, 1000); | |||
}, | |||
@@ -618,20 +431,11 @@ export default { | |||
let index = 0 | |||
for (let i in this.funWsData.data.annealFanInfo) { | |||
index++, | |||
// let index = 1, | |||
// index++ | |||
// arr.push({ | |||
// equipmentName: i, | |||
// status: this.funWsData.data.annealFanInfo[i] | |||
// }) | |||
arr.push([ | |||
// console.log(item) | |||
` | |||
<span style="color:rgba(255,255,255,0.5)" >${index || ''} | |||
</span>`, | |||
// formatDate(item.planStartTime) || '', | |||
` | |||
<span style="color:rgba(255,255,255,0.5)" >${i || ''} | |||
`<span style="color:rgba(255,255,255,0.5)" >${i || ''} | |||
</span>`, | |||
`<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.annealFanInfo[i] || ''}</span>`, | |||
]) | |||
@@ -644,23 +448,14 @@ export default { | |||
let index = 0 | |||
for (let i in this.funWsData.data.fanInfo) { | |||
index++, | |||
// arr.push({ | |||
// equipmentName: i, | |||
// status: this.funWsData.data.fanInfo[i] | |||
// }) | |||
arr.push([ | |||
// console.log(item) | |||
` | |||
<span style="color:rgba(255,255,255,0.5)" >${index || ''}</span>`, | |||
// formatDate(item.planStartTime) || '', | |||
` | |||
<span style="color:rgba(255,255,255,0.5)" >${i || ''}</span>`, | |||
`<span style="color:rgba(255,255,255,0.5)" >${index || ''}</span>`, | |||
`<span style="color:rgba(255,255,255,0.5)" >${i || ''}</span>`, | |||
`<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.fanInfo[i] || ''}</span>`, | |||
]) | |||
} | |||
this.funConfig.data = arr | |||
this.$refs['funScrollBoard'].updateRows(arr) | |||
// this.funList = arr | |||
} | |||
}, | |||
cutWebsocketOnOpen() { | |||
@@ -683,27 +478,10 @@ export default { | |||
cutWebsocketOnMessage(e) { | |||
this.cutWsData = e?.data ? JSON.parse(e?.data) : {} | |||
if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') { | |||
// this.cutTableDataList = this.cutWsData.productHourData.map((ele, index) => { | |||
// // if (ele.progressRate != 1) { | |||
// return { | |||
// id: ele.id, | |||
// lineName: ele.lineName, | |||
// time: ele.time, | |||
// size: this.getSize(ele.size), | |||
// productArea: ele.productArea + '㎡', | |||
// wasteArea: ele.wasteArea + '㎡', | |||
// product: (ele.product * 100).toFixed(2) | |||
// } | |||
// // } | |||
// }); | |||
let cutArr = this.cutWsData.productHourData.map((item, index) => [ | |||
// console.log(item) | |||
` | |||
<span style="color:rgba(255,255,255,0.7)" >${index + 1 || ''} | |||
`<span style="color:rgba(255,255,255,0.7)" >${index + 1 || ''} | |||
</span>`, | |||
// formatDate(item.planStartTime) || '', | |||
` | |||
<span style="color:rgba(255,255,255,0.7)" >${item.lineName || ''} | |||
`<span style="color:rgba(255,255,255,0.7)" >${item.lineName || ''} | |||
</span>`, | |||
`<span style="color:rgba(255,255,255,0.7)">${this.formatTime(item.time) || ''}</span>`, | |||
`<span style="color:rgba(255,255,255,0.7)">${this.getSize(item.size) || ''}</span>`, | |||
@@ -746,23 +524,9 @@ export default { | |||
}, | |||
// 数据接收 | |||
SJGWebsocketOnMessage(e) { | |||
// 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.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 { | |||
// id: ele.id, | |||
// linename: ele.linename, | |||
// type: ele.type, | |||
// num: ele.num, | |||
// time:ele.time, | |||
// percent: ele.percent | |||
// } | |||
// // } | |||
// }); | |||
console.log('222222', this.SJGWsData.detData) | |||
console.log(this.SJGWsData.detData); | |||
let chartData = this.SJGWsData.detData.map((item, index) => { | |||
return { | |||
@@ -770,33 +534,14 @@ export default { | |||
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)">${ele.name || ''}</span>`, | |||
// `<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`, | |||
`<span style="color:rgba(255,255,255,0.5)">${ele.run || ''}</span>`, | |||
// `<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`, | |||
]) | |||
} | |||
this.realEqConfig.data = this.realEqList | |||
@@ -806,31 +551,6 @@ export default { | |||
this.clientWidth = value | |||
this.beilv2 = this.clientWidth / 1920 | |||
}, | |||
// fetchList(type) { | |||
// switch (type) { | |||
// case 'order-process': | |||
// return axios({ | |||
// url: '/analysis/factory-monitor/order', | |||
// method: 'post' | |||
// }).then(res => { | |||
// if (res.data) { | |||
// this.orderProcessList = res.data | |||
// // this.orderProcessList = [ | |||
// // { id: 1, name: '订单1', outRate: 0.5 }, | |||
// // { id: 2, name: '订单2', outRate: 0.54 }, | |||
// // { id: 3, name: '订单3', outRate: 0.45 }, | |||
// // { id: 4, name: '订单4', outRate: 0.65 }, | |||
// // { id: 5, name: '订单5', outRate: 0.35 }, | |||
// // { id: 6, name: '订单6', outRate: 0.15 }, | |||
// // { id: 7, name: '订单7', outRate: 0.5 }, | |||
// // { id: 8, name: '订单8', outRate: 0.5 } | |||
// // ] | |||
// } else { | |||
// this.orderProcessList.splice(0) | |||
// } | |||
// }) | |||
// } | |||
// }, | |||
change() { | |||
this.isFullScreen = screenfull.isFullscreen | |||
}, | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2023-12-27 13:54:52 | |||
* @LastEditTime: 2024-03-25 18:37:26 | |||
* @LastEditTime: 2024-03-26 10:46:47 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -93,9 +93,7 @@ export default { | |||
initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) { | |||
let rawData = [] | |||
let colors = ['#0fdedb', '#2359ec'] | |||
if (passRateList && wasteList) { | |||
rawData.push(passRateList, wasteList) | |||
// console.log(1) | |||
const totalData = []; | |||
for (let i = 0; i < rawData[0].length; ++i) { | |||
let sum = 0; | |||
@@ -105,7 +103,6 @@ export default { | |||
totalData.push(sum); | |||
} | |||
console.log('total', totalData); | |||
} | |||
this.chart = echarts.init(document.getElementById(this.id)) | |||
const series = [ | |||
'良品', | |||
@@ -2,7 +2,7 @@ | |||
* @Author: zwq | |||
* @Date: 2021-07-19 15:18:30 | |||
* @LastEditors: zhp | |||
* @LastEditTime: 2024-03-26 09:23:44 | |||
* @LastEditTime: 2024-03-26 10:06:54 | |||
* @Description: | |||
--> | |||
<template> | |||
@@ -16,24 +16,11 @@ | |||
许昌安彩深加工看板 | |||
<h3 class="unit">单位:河南汇融数字科技有限公司</h3> | |||
<h3 class="time">{{ times }}</h3> | |||
<!-- <el-button | |||
type="text" | |||
class="title-button" | |||
:style="{ right: 33 + 'px', top: 37 + 'px' }" | |||
@click="changeFullScreen" | |||
> | |||
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" /> | |||
<svg-icon v-else icon-class="fullScreenView" /> | |||
</el-button> --> | |||
</el-row> | |||
<el-row class="container-main flex-col" type="flex"> | |||
<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" height="100%"> | |||
<base-container :title="'设备报警'" :size="'small'" :height="318" :title-icon="'eqAlarm'"> | |||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityYearTableProps" | |||
:table-data="equipmentList" /> --> | |||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityYearTableProps" | |||
:table-data="qualityYearList" /> --> | |||
<dv-scroll-board class="eqTable" :config="eqConfig" style="width:100%;height:350px" ref='eqScrollBoard' /> | |||
</base-container> | |||
@@ -41,36 +28,18 @@ | |||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%"> | |||
<base-container :title="'各工序缺陷汇总'" :size="'small'" :title-icon="'scrap'"> | |||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityMonthTableProps" | |||
:table-data="qualityMonthList" /> --> | |||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityMonthTableProps" | |||
:table-data="qualityMonthList" /> --> | |||
<dv-scroll-board :config="processConfig" style="width:100%;height:350px" ref='processScrollBoard' /> | |||
</base-container> | |||
</el-col> | |||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%"> | |||
<base-container :height="318" :size="'small'" :title="'工单监控'" :title-icon="'order'"> | |||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;"> | |||
<top-radio-group /> | |||
</div> --> | |||
<!-- 为外部添加一个容器并显式地设置一个高度: --> | |||
<!-- <div style="height: 300px;"> --> | |||
<div style="width:100%; overflow: hidden scroll;"> | |||
<!-- <el-row style="margin-bottom: 1em"> | |||
<p class="now-team-title">加工工单进度</p> | |||
</el-row> --> | |||
<el-row v-for="op in orderList" :key="op.id" style="margin-bottom: 1em"> | |||
<!-- <el-col :span="12"> --> | |||
<p class="now-secondary-title">{{ op.name }}</p> | |||
<el-progress define-back-color="rgba(32, 57, 96, 1)" text-color="white" | |||
:percentage="op.progressRate * 100" class="custom-progress-bar" /> | |||
<!-- <p v-if="op.progressRate === 1" class="now-secondary-title" style="color:#4679FD"> | |||
<i class="el-icon-check" /> | |||
{{ op.name }} | |||
</p> --> | |||
<!-- </el-col> --> | |||
</el-row> | |||
</div> | |||
<!-- </div> --> | |||
@@ -82,368 +51,59 @@ | |||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> | |||
<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 /> | |||
</div> --> | |||
<el-row :gutter="9"> | |||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24"> | |||
<linear-bar-chart ref="EnergyMonitoringChart" :name-list="EnergyMonitoringNameList" | |||
:data-list="EnergyMonitoringList" :height="359" /> | |||
</el-col> | |||
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> | |||
<base-table3 | |||
:page="2" | |||
:limit="5" | |||
:table-config="qualityTableProps2" | |||
:table-data="qualityList2" | |||
/> | |||
</el-col> --> | |||
</el-row> | |||
</base-container> | |||
</el-col> | |||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> | |||
<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> --> | |||
<!-- 像下面这样表格里的limit值,也许可以用js动态计算出来 --> | |||
<double-y-chart ref="productLineChart" :id=" 'doubleYChart' " :height="390" :show-legend="true" /> | |||
</base-container> | |||
</el-col> | |||
</el-row> | |||
<!-- end --> | |||
<!-- <el-col :span="16"> | |||
<el-row> | |||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24"> | |||
<base-container :height="672"> | |||
<base-video :video-height="624" /> | |||
</base-container> | |||
</el-col> | |||
</el-row> | |||
</el-col> | |||
--> | |||
</el-row> | |||
</div> | |||
</template> | |||
<script> | |||
import baseContainer from './components/baseContainer' | |||
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' | |||
// import axios from '@/utils/request' | |||
import doubleYChart from './components/doubleYChart ' | |||
// import elementResizeDetectorMaker from 'element-resize-detector'; | |||
// var erd = elementResizeDetectorMaker(); //创建实例 | |||
// let resizeFun = null | |||
import LinearBarChart from './components/linearBarChart' | |||
const qualityTableProps1 = [ | |||
{ | |||
prop: 'name', | |||
label: '产线名称' | |||
}, | |||
{ | |||
prop: 'createTime', | |||
label: '发生时间' | |||
}, | |||
{ | |||
prop: 'code', | |||
label: '质量编码' | |||
}, | |||
{ | |||
prop: 'content', | |||
label: '质量内容' | |||
} | |||
] | |||
const qualityTableProps2 = [ | |||
{ | |||
prop: 'name', | |||
label: '工序名称' | |||
}, | |||
{ | |||
prop: 'createTime', | |||
label: '发生时间' | |||
}, | |||
{ | |||
prop: 'code', | |||
label: '质量编码' | |||
}, | |||
{ | |||
prop: 'content', | |||
label: '质量内容' | |||
} | |||
] | |||
const cxNameList = ['周一', '周二', '周三', '周四', '周五'] | |||
const cxDataList = [ | |||
{ | |||
topColor: '#9DD5FF', | |||
bottomColor: '#1295FF', | |||
name: '电耗能', | |||
data: [100, 150, 121, 97, 140] | |||
}, | |||
{ | |||
topColor: '#FF8BC3', | |||
bottomColor: '#EB46A1', | |||
name: '水耗能', | |||
data: [110, 110, 151, 77, 110] | |||
}, | |||
{ | |||
topColor: '#85F6E9', | |||
bottomColor: '#2EC6B4', | |||
name: '天然气', | |||
data: [110, 120, 171, 287, 40] | |||
}, | |||
{ | |||
topColor: '#9496FF', | |||
bottomColor: '#6567FF', | |||
name: '焦炉煤气', | |||
data: [140, 157, 122, 27, 240] | |||
}, | |||
{ | |||
topColor: '#F68E8A', | |||
bottomColor: '#E95552', | |||
name: '余热发电', | |||
data: [170, 180, 127, 17, 340] | |||
}, | |||
{ | |||
topColor: '#FFE873', | |||
bottomColor: '#E7AE2A', | |||
name: '二氧化硫', | |||
data: [140, 160, 121, 57, 170] | |||
} | |||
] | |||
const qualityList1 = [ | |||
{ name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' }, | |||
{ name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' }, | |||
{ name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' }, | |||
{ name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' }, | |||
{ name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' }, | |||
{ name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' }, | |||
{ name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' }, | |||
{ name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' }, | |||
{ name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' }, | |||
{ name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' }, | |||
{ name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' }, | |||
{ name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' }, | |||
{ name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' }, | |||
{ name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' }, | |||
{ name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' }, | |||
{ name: '钢六线', createTime: '2021.12.11 24:59:59', code: '2132131212', content: '气泡' } | |||
] | |||
const qualityList2 = [ | |||
{ name: '上片', createTime: '2021.10.22 24:59:59', code: '2132132133', content: '气泡' }, | |||
{ name: '磨边', createTime: '2021.12.21 24:59:59', code: '2132131232', content: '气泡' }, | |||
{ name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' }, | |||
{ name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' }, | |||
{ name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' }, | |||
{ name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' }, | |||
{ name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' }, | |||
{ name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' }, | |||
{ name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' }, | |||
{ name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' }, | |||
{ name: '上片', createTime: '2021.10.22 24:59:59', code: '2132132133', content: '气泡' }, | |||
{ name: '磨边', createTime: '2021.12.21 24:59:59', code: '2132131232', content: '气泡' }, | |||
{ name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' }, | |||
{ name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' }, | |||
{ name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' }, | |||
{ name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' }, | |||
{ name: '丝网印刷', createTime: '2021.12.21 24:59:59', code: '21321322132', content: '气泡' }, | |||
{ name: '钢化炉', createTime: '2021.12.20 24:59:59', code: '21321312321', content: '气泡' }, | |||
{ name: '检测设备', createTime: '2021.12.12 24:59:59', code: '21321322132', content: '气泡' }, | |||
{ name: '包装设备', createTime: '2021.12.23 24:59:59', code: '39284982931', content: '气泡' } | |||
] | |||
const legendData1 = [ | |||
{ | |||
name: '设备1', | |||
icon: 'circle', | |||
value: 196 | |||
}, | |||
{ | |||
name: '设备2', | |||
icon: 'circle', | |||
value: 147 | |||
}, | |||
{ | |||
name: '设备3', | |||
icon: 'circle', | |||
value: 24 | |||
}, | |||
{ | |||
name: '设备4', | |||
icon: 'circle', | |||
value: 85 | |||
}, | |||
{ | |||
name: '设备5', | |||
icon: 'circle', | |||
value: 8 | |||
}, | |||
{ | |||
name: '设备6', | |||
icon: 'circle', | |||
value: 112 | |||
}, | |||
{ | |||
name: '设备7', | |||
icon: 'circle', | |||
value: 146 | |||
}, | |||
{ | |||
name: '设备8', | |||
icon: 'circle', | |||
value: 27 | |||
}, | |||
{ | |||
name: '设备9', | |||
icon: 'circle', | |||
value: 2 | |||
}, | |||
{ | |||
name: '设备10', | |||
icon: 'circle', | |||
value: 90 | |||
} | |||
] | |||
const legendData2 = [ | |||
{ | |||
name: '磨边', | |||
icon: 'circle', | |||
value: 196 | |||
}, | |||
{ | |||
name: '清洗', | |||
icon: 'circle', | |||
value: 135 | |||
}, | |||
{ | |||
name: '固化', | |||
icon: 'circle', | |||
value: 144 | |||
}, | |||
{ | |||
name: '镀膜', | |||
icon: 'circle', | |||
value: 97 | |||
}, | |||
{ | |||
name: '激光打孔', | |||
icon: 'circle', | |||
value: 12 | |||
}, | |||
{ | |||
name: '丝网印刷', | |||
icon: 'circle', | |||
value: 10 | |||
}, | |||
{ | |||
name: '钢化炉', | |||
icon: 'circle', | |||
value: 3 | |||
} | |||
] | |||
const legendData3 = [ | |||
{ | |||
name: '钢一线', | |||
icon: 'circle', | |||
value: 196 | |||
}, | |||
{ | |||
name: '钢二线', | |||
icon: 'circle', | |||
value: 133 | |||
}, | |||
{ | |||
name: '钢三线', | |||
icon: 'circle', | |||
value: 24 | |||
}, | |||
{ | |||
name: '钢四线', | |||
icon: 'circle', | |||
value: 77 | |||
}, | |||
{ | |||
name: '钢五线', | |||
icon: 'circle', | |||
value: 77 | |||
} | |||
] | |||
const qualityYearTableProps = [ | |||
const qualityYearList = [ | |||
{ | |||
prop: 'name', | |||
label: '设备名称' | |||
name: '翻转机', code: 'EQ20240110112358000235', status: '运行', error: '否' | |||
}, | |||
{ | |||
prop: 'code', | |||
label: '设备编码' | |||
name: '烘干炉', code: 'EQ20240110112537000241', status: '运行', error: '否' | |||
}, | |||
{ | |||
prop: 'status', | |||
label: '设备状态', | |||
// subcomponent: alarmLevel, | |||
align: 'center' | |||
name: '清洗机', code: ' EQ20240110112310000232', status: '运行', error: '否' | |||
}, | |||
{ | |||
prop: 'error', | |||
label: '是否故障' | |||
} | |||
] | |||
const qualityYearList = [ | |||
{ | |||
name: '翻转机', code: 'EQ20240110112358000235', status: '运行', error: '否' }, | |||
{ | |||
name: '烘干炉', code: 'EQ20240110112537000241', status: '运行', error: '否' }, | |||
{ | |||
name: '清洗机', code: ' EQ20240110112310000232', status: '运行', error: '否' }, | |||
{ name: '钢化清洗机', code: 'EQ20240110111700000208', status: '运行', error: '否' }, | |||
{ name: '固化机', code: 'EQ20240110111700000201', status: '运行', error: '否' }, | |||
{ | |||
name: '磨边清洗机', code: ' EQ20240110111700000208', status: '运行', error: '否' }, | |||
name: '磨边清洗机', code: ' EQ20240110111700000208', status: '运行', error: '否' | |||
}, | |||
{ name: '预热机', code: 'EQ20240110111700000205', status: '故障', error: '是' }, | |||
{ name: '下片机', code: 'EQ20240115151435000279', status: '运行', error: '否' }, | |||
{ | |||
name: '冷却机', code: 'EQ20240110111700000203', status: '运行', error: '否' }, | |||
{ | |||
name: 'A储片机106', code: 'EQ20240110111700000202', status: '运行', error: '否' }, | |||
{ name: '二次清洗机', code: 'EQ20240110111700000209', status: '运行', error: '否' }, | |||
{ | |||
name: '二次磨边机', code: ' EQ20240110110927000181', status: '故障', error: '是' }, | |||
{ name: '测试设备', code: 'EQ20240110111700000201', status: '运行', error: '否' } | |||
] | |||
const qualityMonthTableProps = [ | |||
{ | |||
prop: 'productionLineName', | |||
label: '产线名' | |||
name: '冷却机', code: 'EQ20240110111700000203', status: '运行', error: '否' | |||
}, | |||
{ | |||
prop: 'sectionName', | |||
label: '工序' | |||
}, | |||
{ | |||
prop: 'count', | |||
label: '损耗片数' | |||
name: 'A储片机106', code: 'EQ20240110111700000202', status: '运行', error: '否' | |||
}, | |||
{ name: '二次清洗机', code: 'EQ20240110111700000209', status: '运行', error: '否' }, | |||
{ | |||
prop: 'inspectionTypeName', | |||
label: '缺陷类型' | |||
name: '二次磨边机', code: ' EQ20240110110927000181', status: '故障', error: '是' | |||
}, | |||
{ name: '测试设备', code: 'EQ20240110111700000201', status: '运行', error: '否' } | |||
] | |||
const qualityMonthList = [ | |||
{ | |||
@@ -530,11 +190,8 @@ export default { | |||
orderList:[], | |||
times: '', | |||
EnergyMonitoringNameList: [], | |||
equipmentList:[], | |||
// equipmentList:[], | |||
EnergyMonitoringList: [], | |||
// offsetWidth: null, | |||
qualityYearTableProps, | |||
cxNameList, | |||
eqConfig: { | |||
header: ['序号', '设备名称', '设备编码', '设备状态', '是否故障'], | |||
headerBGC: 'rgba(32, 55, 96, 0.8)', | |||
@@ -557,7 +214,7 @@ export default { | |||
// index:true, | |||
rowNum: 10 | |||
}, | |||
cxDataList, | |||
// cxDataList, | |||
productLineList:[], | |||
qualityYearList, | |||
clientWidth: 0, | |||
@@ -565,17 +222,10 @@ export default { | |||
isFullScreen: false, | |||
// orderProcessList: [], | |||
orderProcessList, | |||
qualityTableProps1, | |||
qualityMonthList, | |||
qualityMonthTableProps, | |||
// qualityMonthTableProps, | |||
modelMonth: '', | |||
qualityList1, | |||
qualityTableProps2, | |||
qualityList2, | |||
dateType: '0', | |||
legendData1, | |||
legendData2, | |||
legendData3 | |||
} | |||
}, | |||
computed: { | |||
@@ -643,24 +293,6 @@ export default { | |||
this.beilv2 = _this.clientWidth / 1920 | |||
})() | |||
} | |||
// const _this = this; | |||
// window.onresize = () => { | |||
// return (() => { | |||
// _this.clientWidth = `${document.documentElement.clientWidth}` | |||
// this.beilv2 = _this.clientWidth / 1920 | |||
// })() | |||
// } | |||
// this.beilv2 = window.innerWidth / 1920 | |||
// addEventListener('resize', resizeFun = () => { | |||
// this.beilv2 = window.innerWidth / 1920 | |||
// }) | |||
// erd.listenTo(document, (element) => { | |||
// console.log(element.offsetWidth) | |||
// this.beilv2 = element.offsetWidth / 1920 | |||
// // var width = element.offsetWidth; | |||
// // var height = element.offsetHeight; | |||
// }); | |||
}, | |||
// beforeDestroy() { | |||
// //离开页面删除检测器和所有侦听器 | |||
@@ -778,8 +410,6 @@ export default { | |||
if (typeof (WebSocket) === 'undefined') { | |||
alert('您的浏览器不支持WebSocket') | |||
} 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() | |||
// console.log(date); | |||
console.log(process.env); | |||
@@ -823,24 +453,10 @@ export default { | |||
}); | |||
console.log(this.orderList) | |||
} else if (this.SJGWsData.type === 'equipment') { | |||
// this.equipmentList = this.SJGWsData.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 ? '是' : '否' | |||
// } | |||
// // } | |||
// }); | |||
let eqArr = 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.name || ''} | |||
`<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.status || ''}</span>`, | |||
@@ -851,13 +467,9 @@ export default { | |||
// console.log(SJGWsData.orderList) | |||
} else if (this.SJGWsData.type === 'productline') { | |||
console.log('aaaaaaaaaaaaaaaaaaa', this.SJGWsData); | |||
// console.log(this.wsData.detData); | |||
let nameList = [] | |||
let passRateList = [] | |||
let outputNumList = [] | |||
// console.log('2222222222', this.productLineList); | |||
// this.productLineList.forEach((item) => { | |||
this.SJGWsData.detData.forEach((ele) => { | |||
// if (item.id == ele.productionLineId) { | |||
// if (item.name.substr(0, 1) == "D") { | |||
@@ -868,25 +480,10 @@ export default { | |||
// } | |||
// } | |||
}) | |||
// }) | |||
// progressRateList = EnergyNameList | |||
// let EnergyDataList = [] | |||
// this.SJGWsData.detData.forEach((ele) => { | |||
// }) | |||
// this.SJGWsData.detData.forEach((ele) => { | |||
// }) | |||
// console.log(this.EnergyMonitoringNameList) | |||
// console.log(this.EnergyMonitoringList) | |||
// this.$nextTick(() => { | |||
this.$refs.productLineChart.initChart(nameList, passRateList, outputNumList) | |||
} else if (this.SJGInitWebSocket === 'inspection') { | |||
} | |||
}, | |||
// 数据发送 | |||
// SJGWebsocketSend() { | |||
// this.websocket.send('11111') | |||
// }, | |||
// // 关闭 | |||
SJGWebsocketClose(e) { | |||
console.log('WebSocket 断开连接', e) | |||
}, | |||
@@ -914,21 +511,11 @@ export default { | |||
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) | |||
// }) | |||
} | |||
}, | |||
// 数据发送 | |||
@@ -943,31 +530,6 @@ export default { | |||
this.clientWidth = value | |||
this.beilv2 = this.clientWidth / 1920 | |||
}, | |||
// fetchList(type) { | |||
// switch (type) { | |||
// case 'order-process': | |||
// return axios({ | |||
// url: '/analysis/factory-monitor/order', | |||
// method: 'post' | |||
// }).then(res => { | |||
// if (res.data) { | |||
// this.orderProcessList = res.data | |||
// // this.orderProcessList = [ | |||
// // { id: 1, name: '订单1', outRate: 0.5 }, | |||
// // { id: 2, name: '订单2', outRate: 0.54 }, | |||
// // { id: 3, name: '订单3', outRate: 0.45 }, | |||
// // { id: 4, name: '订单4', outRate: 0.65 }, | |||
// // { id: 5, name: '订单5', outRate: 0.35 }, | |||
// // { id: 6, name: '订单6', outRate: 0.15 }, | |||
// // { id: 7, name: '订单7', outRate: 0.5 }, | |||
// // { id: 8, name: '订单8', outRate: 0.5 } | |||
// // ] | |||
// } else { | |||
// this.orderProcessList.splice(0) | |||
// } | |||
// }) | |||
// } | |||
// }, | |||
change() { | |||
this.isFullScreen = screenfull.isFullscreen | |||
}, | |||
@@ -162,7 +162,7 @@ export default { | |||
// 查询参数 | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 10, | |||
pageSize: 20, | |||
name: null, | |||
}, | |||
// 表单参数 | |||