smart-web.git - Gitblit

			@@ -2,7 +2,7 @@
			* @Author: lzhe lzhe@example.com
			* @Date: 2024-03-26 10:28:33
			* @LastEditors: lzhe lzhe@example.com
			* @LastEditTime: 2024-05-15 09:44:50
			* @LastEditTime: 2024-05-15 16:25:52
			* @FilePath: /smart-web/src/views/master/person/main/index.vue
			* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
			-->
			@@ -46,8 +46,8 @@
			</div>
			</div>
			<div class="fact-analysis-card" v-for="item in dmpList" v-if="dmpList.length != 0">
			<div class="card-name" style="background-color: rgb(127, 192, 192);">{{item.description}}</div>
			<div class="card-value" style="background-color: rgba(127, 192, 192, 0.14);"></div>
			<div class="card-name" :style="{'background-color': item.color}">{{item.description}}</div>
			<div :class="{'card-value': true,'card-value-bg1':item.name != 'Alarm','card-value-bg2':item.name == 'Alarm'}">{{item.codeName}}</div>
			</div>
			</div>
			</div>
			@@ -81,13 +81,21 @@
			<div id="wcs-log" style="width: 100%;height:200px;"></div>
			<el-table ref="multipleTableRef1" :data="recordData" border style="width: 100%;">
			<el-table-column prop="shiftIndexName" label="班次"></el-table-column>
			<el-table-column prop="temdata" label="调试"></el-table-column>
			<el-table-column prop="temdata" label="离线"></el-table-column>
			<el-table-column prop="temdata" label="待机"></el-table-column>
			<el-table-column prop="temdata" label="报警"></el-table-column>
			<el-table-column prop="temdata" label="运行"></el-table-column>
			<el-table-column prop="oee" label="稼动率%"></el-table-column>
			<el-table-column prop="perdata" label="报警率%"></el-table-column>
			<el-table-column prop="5" label="调试"></el-table-column>
			<el-table-column prop="4" label="离线"></el-table-column>
			<el-table-column prop="3" label="待机"></el-table-column>
			<el-table-column prop="1" label="报警"></el-table-column>
			<el-table-column prop="2" label="运行"></el-table-column>
			<el-table-column prop="oee" label="稼动率%">
			<template #default="scope">
			<span>{{(Number(scope.row.oee) * 100).toFixed(2)}}</span>
			</template>
			</el-table-column>
			<el-table-column prop="perdata" label="报警率%">
			<template #default="scope">
			<span>{{(Number(scope.row.fault) * 100).toFixed(2)}}</span>
			</template>
			</el-table-column>
			</el-table>
			</div>
			</div>
			@@ -116,6 +124,7 @@
			<save-dialog v-if="dialog.save" ref="saveDialog" @success="addfeedbackSuccess" :workstationId="lastLevelId" @closed="dialog.save=false"></save-dialog>
			</template>
			<script>
			import moment from 'moment'
			import * as echarts from 'echarts';
			import saveDialog from './add-station-status'
			export default {
			@@ -142,7 +151,7 @@
			tooltip: {
			trigger: 'item',
			//formatter: '{a} <br/>{b} : {c} ({d}%)'
			formatter: '{a} 0分钟'
			formatter: '{a} {c}分钟'
			},
			legend: {
			orient: 'vertical',
			@@ -233,26 +242,13 @@
			},
			xAxis: {
			type: 'category',
			data: ['00:00:00', '02:00:00', '04:00:00', '06:00:00', '08:00:00', '10:00:00', '12:00:00', '14:00:00', '18:00:00'],
			data: [],
			},
			yAxis: {
			type: 'category',
			data: ['1', '2']
			},
			series: [
			{
			name: 'wcsLog',
			type: 'bar',
			data: [],
			emphasis: {
			itemStyle: {
			shadowBlur: 10,
			shadowOffsetX: 0,
			shadowColor: 'rgba(0, 0, 0, 0.5)'
			}
			}
			}
			]
			series: []
			},
			dmpList: [],
			stationForm: {
			@@ -289,7 +285,9 @@
			current: "1",
			size: "15"
			},
			recordData: [] // 班次状态记录table
			records: [],
			recordData: [], // 班次状态记录table
			allwcs: []
			}
			},
			created(){
			@@ -343,30 +341,221 @@
			}
			this.$HTTP.post(`/api/blade-mdc/status-record/shift-index-status-record-table`,obj).then(res=> {
			if(res.code == 200) {
			res.data.forEach(item=> {
			item.temdata = "00:00:00";
			item.perdata = "0";
			})
			var defaultValues = {
			oee: 0,
			fault: 0,
			'1': "00:00:00",
			'2': "00:00:00",
			'3': "00:00:00",
			'4': "00:00:00",
			'5': "00:00:00"
			};
			res.data.forEach(item => {
			Object.keys(defaultValues).forEach(key => {
			if (!item[key]) {
			item[key] = defaultValues[key];
			}
			});
			});
			this.recordData = res.data;
			}
			})
			},
			renderItem(params, api) {
			var categoryIndex = api.value(0);
			var start = api.coord([api.value(1), categoryIndex]);
			var end = api.coord([api.value(2), categoryIndex]);
			var height = api.size([0, 1])[1] * 0.6;
			var rectShape = echarts.graphic.clipRectByRect(
			{
			x: start[0],
			y: start[1] - height / 2,
			width: end[0] - start[0],
			height: height
			},
			{
			x: params.coordSys.x,
			y: params.coordSys.y,
			width: params.coordSys.width,
			height: params.coordSys.height
			}
			);
			return (
			rectShape && {
			type: 'rect',
			transition: ['shape'],
			shape: rectShape,
			style: api.style()
			}
			);
			},
			getColor(name) {
			var color = '';
			this.achievements.forEach(item=> {
			if(item.code == name) {
			color = item.color;
			}
			})
			return color;
			},
			getStatus(name) {
			var stauts = {};
			this.allwcs.forEach(item=> {
			if(item.code == name) {
			stauts.name= item.name;
			stauts.type= item.type;
			}
			})
			return stauts;
			},
			getlogcart() { //班次状态记录chart
			var obj = {
			date: this.wcsDate,
			//date : "2024-05-15",
			humanFeedback: true,
			workstationId: this.lastLevelId
			}
			this.$HTTP.post(`/api/blade-mdc/status-record/shift-index-status-record-table`,obj).then(res=> {
			this.$HTTP.post(`/api/blade-mdc/status-record/shift-index-status-record-chart`,obj).then(res=> {
			if(res.code == 200) {
			var myChart = echarts.init(document.getElementById('wcs-log'));
			res.data.forEach(item => {
			item.value = 0;
			var yAxisData = [];
			var newData = [];
			this.records = res.data.reverse();
			res.data.forEach(item=> {
			if(item.statusRecordList == null) item.statusRecordList = [];
			var filterRecordList = [];
			item.statusRecordList.forEach(item1=> {
			if(item1.endTime.startsWith(this.wcsDate)) { //只返回当前结束日期的
			filterRecordList.push(item1)
			}
			})
			item.statusRecordList = filterRecordList;
			})
			this.wcsOptionLog.series[0].data = res.data;
			res.data.forEach((item,index)=> {
			yAxisData.push(item.shiftIndex);
			//计算开始时间，显示时间
			if(item.statusRecordList == null) item.statusRecordList = [];
			item.statusRecordList.forEach(item1=> {
			var initstart = item1.startTime.split(" ")[0]; //根据日期计算差值
			var startTime = moment(item1.startTime).diff(moment(initstart + " 00:00:00"), 'minutes');
			var endTime = moment(item1.endTime).diff(moment(initstart + " 00:00:00"), 'minutes');
			var diff = moment(item1.endTime).diff(moment(item1.startTime), 'minutes') //开始了多久
			var color = this.getColor(item1.wcs);
			item1.value = [index,startTime,endTime,diff];
			item1.itemStyle = {"normal": {"color": color}};
			item1.statusName = this.getStatus(item1.wcs).name;
			item1.statusType = this.getStatus(item1.wcs).type;
			})
			newData.push(...item.statusRecordList);
			})
			//渲染图表
			this.setCharts(yAxisData,newData);

			var nowTime = moment().format("HH:mm:ss"); //11:37:54
			var spaceTime = moment(obj.date + " " + nowTime).diff(moment(obj.date + " 00:00:00"), 'hours'); //离当天00:00:00过了多少小时
			//console.log(spaceTime,obj.date + " " + nowTime,234)
			return;
			//计算时间
			var startOfDay = moment().startOf('day'); //00:00:00
			var now = moment(); //当前时间
			var diffInMilliseconds = now.diff(startOfDay); //时间差
			var diffInHours = Math.floor(diffInMilliseconds / (1000 * 60 * 60)); //时间差转换成小时
			//分割
			var everTime = Math.ceil(diffInHours/8);
			var arrData = [];
			for(var i=0;i<=diffInHours;i+=everTime) {
			if(i<=10) {
			var num = '0' + i;
			}else {
			var num = i;
			}
			arrData.push(num + ':00:00');
			}
			//计算时间结束
			this.wcsOptionLog.xAxis.data = [...arrData,moment().format("HH:mm:ss")];
			myChart.setOption(this.wcsOptionLog);
			}
			})
			},
			setCharts(yAxisData,data) {
			var option = {
			tooltip: {
			formatter: function (params) {
			if(params.data.statusType == 4) {
			var dom = `<span class="tipdesc">工位:</span>${params.data.name}</br>
			<span class="tipdesc">状态:</span>${params.data.wcsDesc}</br>
			<span class="tipdesc">描述:</span>${params.data.feedbackDesc}</br>
			<span class="tipdesc">状态时间:</span>${params.data.startTime} ～ ${params.data.endTime}</br>
			<span class="tipdesc">反馈时间:</span>${params.data.feedbackTime}</br>
			<span class="tipdesc">反馈人:</span>${params.data.feedUser}</br>`
			}else {
			var dom = `<span class="tipstatus">${params.data.statusName}</span></br>
			<span class="tipdesc">时段:</span><span>${params.data.startTime.split(" ")[1]} ～ ${params.data.endTime.split(" ")[1]}</span></br>`
			}
			return dom;
			}
			},
			grid: {
			top: 10,
			left: 70,
			bottom: 120
			},
			xAxis: {
			min: 0,
			max: 1440, // 单位分钟
			interval: 1440/6, //每隔多少分钟显示一个刻度
			axisLabel: {
			formatter: (value)=> {
			if(value == 0) {
			return "00:00:00";
			}else if(value == 240) {
			return "04:00:00";
			}else if(value == 480) {
			return "08:00:00";
			}else if(value == 720) {
			return "12:00:00";
			}else if(value == 960) {
			return "16:00:00";
			}else if(value == 1200) {
			return "18:00:00";
			}else if(value == 1440) {
			return "00:00:00";
			}
			}
			}
			},
			yAxis: {
			type: 'category',
			axisLabel: {
			formatter: function (value) {
			return value;
			},
			rich: {
			a: {
			color: '#409eff',
			cursor: 'pointer',
			fontSize: '12px'
			}
			}
			},
			data: yAxisData
			},
			series: [
			{
			type: 'custom',
			renderItem: this.renderItem,
			itemStyle: {
			opacity: 0.8
			},
			encode: {
			x: [1, 2],
			y: 0
			},
			data: data
			}
			]
			};
			var myChart = echarts.init(document.getElementById('wcs-log'));
			myChart.setOption(option);
			},
			getwscLvalue() {
			var obj = {
			@@ -380,7 +569,7 @@
			var wcsOption = JSON.parse(JSON.stringify(this.wcsBeginOption));
			if(res.data.length == 0) {
			wcsOption.forEach(item=> {
			item.value = 20;
			item.value = 0;
			})
			}else {
			wcsOption.forEach(item=> {
			@@ -444,7 +633,7 @@
			if(res.code == 200) {
			this.stationForm = res.data;
			this.getdmp(this.lastLevelId,this.stationForm.machineId);
			this.newDate(); //获取当前日期
			//this.newDate(); //获取当前日期
			this.getwcsR();
			this.getwscLvalue(); //左侧图表
			this.alarmsearchBtn(); //机器履历
			@@ -455,10 +644,50 @@
			}
			},
			getdmp(lastLevelId,machineId) {
			console.log(lastLevelId,machineId)
			this.$HTTP.get(`/api/blade-cps/workstation/get-dmp-variables?machineId=${machineId}&workstationId=${lastLevelId}`).then(res=> {
			if(res.code == 200) {
			this.dmpList = res.data;
			console.log(this.dmpList,1)
			this.dmpList = [];
			var that = this;
			//发送websocket
			var obj = {
			type: "realTimeData",
			workstationIdList: [lastLevelId]
			}
			if(this.$TOOL.socket.websocket == null) { //没有建立先建立
			this.$TOOL.socket.connectToWebSocket(this.$TOOL.cookie.get("TOKEN"));
			}
			this.$TOOL.socket.sendDataToWebSocket(obj); //发送
			this.$TOOL.socket.websocket.onmessage = function(event) {
			if(res.data.length == 0) return; //没值不用循环
			res.data.forEach(item=> { //第一步把v放到code里
			var eventData = JSON.parse(event.data);
			if(item.name == "DeviceStatus") { //机器状态
			item.code = eventData.data[item.name].v;
			that.allwcs.forEach(item1=> {
			if(item.code == item1.code) {
			item.codeName = item1.name; //第二步把v的code和运行对应
			if(item.code == "2") {
			item.color = "#73D13D";
			}else {
			item.color = "#75C0C0";
			}
			}
			})
			}else {
			if(item.name == 'Alarm') { //报警
			var v = JSON.parse(eventData.data[item.name].v);
			item.description = v.code;
			item.codeName = v.msg;
			item.color = "#370C0D";
			}else {
			item.codeName = eventData.data[item.name].v;
			item.color = "#75C0C0";
			}
			}
			});
			that.dmpList = res.data;
			};
			}
			})
			},
			@@ -562,6 +791,7 @@
			})
			this.achievements = achievements;
			this.collectionstatus = collectionstatus;
			this.allwcs = res.data;
			}
			})
			},
			@@ -673,6 +903,13 @@
			padding: 0 8px;
			overflow: hidden;
			word-break: break-all;
			line-height: 68px;
			}
			.card-value-bg1 {
			background-color: rgba(115, 209, 61, 0.14);
			}
			.card-value-bg2 {
			background-color: rgba(55, 12, 13, 0.14);
			}
			.wcs-main {
			display: flex;
			@@ -805,4 +1042,9 @@
			.status-wrap /deep/ .el-checkbox.el-checkbox--large {
			color: #409eff;
			}
			#record /deep/ .tipstatus {
			width: 100%;
			display: inline-block;
			border-bottom: 1px solid #eee;
			}
			</style>