<!--
|
* @Author: lzhe lzhe@example.com
|
* @Date: 2024-03-26 10:28:33
|
* @LastEditors: 李喆(开发组) lzhe@yxqiche.com
|
* @LastEditTime: 2025-11-18 16:57:42
|
* @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
|
-->
|
<template>
|
<div class="aposcope-main">
|
<div class="aposcope-left">
|
<!-- <div class="left-title">查询条件</div> -->
|
<MYTree v-model="treeChecked" @loaded="query" :isSelectId="$route.query.code"></MYTree>
|
</div>
|
<div class="aposcope-right">
|
<div class="content-machine-box" style="min-height: 450px;">
|
<div class="content-one content-border">
|
<div style="text-align: center;margin-bottom: 12px;margin-top:12px;">
|
<el-date-picker v-model="wcsDate" type="date" @change="wcschangedate" value-format="YYYY-MM-DD" size="small" />
|
</div>
|
<stationLiveItem :getwcsRData="getwcsRData"></stationLiveItem>
|
</div>
|
<div class="content-two content-border">
|
<tationLiveSpeed :dmpList="dmpList"></tationLiveSpeed>
|
</div>
|
<div class="content-three content-border">
|
<speenBaseInfo :stationFormData="stationForm" :dmpList="dmpList"></speenBaseInfo>
|
</div>
|
</div>
|
<div class="dataHr"></div>
|
<div class="content-zhou-box">
|
<div class="zhou-one content-zhou-border">
|
<div><div id="wcs-left" style="width: 100%;height:340px;"></div></div>
|
</div>
|
<div class="zhou-two content-zhou-border">
|
<el-table :data="tableData2" style="width: 100%;height:340px;">
|
<el-table-column prop="test" label="轴"></el-table-column>
|
<el-table-column prop="test" label="坐标"></el-table-column>
|
<el-table-column prop="test" label="扭矩"></el-table-column>
|
</el-table>
|
</div>
|
<div class="zhou-three content-zhou-border">
|
<el-table :data="alarmtableData" style="height:300px;">
|
<el-table-column prop="alarmCode" label="报警号"></el-table-column>
|
<el-table-column prop="alarmMsg" label="报警内容"></el-table-column>
|
<el-table-column prop="alarmTime" label="报警时间"></el-table-column>
|
</el-table>
|
<el-pagination
|
style="margin-top: 6px;padding-left: 6px;padding-right: 6px;width: 450;position:absolute;right:0;"
|
@size-change="alarmSizeChange"
|
@current-change="alarmCurrentChange"
|
:current-page="alarmsearchData.current"
|
:page-size="15"
|
layout="total, prev, pager, next"
|
:total="alarmtotal">
|
</el-pagination>
|
</div>
|
</div>
|
<div>------------------------------------</div>
|
<!-- <div class="content-machine-box">
|
<div class="content-machine-img"><img :src="stationForm.avatar" alt=""></div>
|
<div class="content-machine-detail">
|
<div class="content-machine-name">{{stationForm.machineName}}</div>
|
<el-form :model="stationForm" ref="dialogForm" label-width="80px" label-position="center" style="width: 100%;">
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="工位编号">{{stationForm.code}}</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="机器品牌">{{stationForm.machineBrand}}</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="机器编号">{{stationForm.machineCode}}</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="机器名称">{{stationForm.machineName}}</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
</div> -->
|
<!-- <div class="collect-info-panel">
|
<div class="fact-analysis-realtim">
|
<div class="wimi-empty" style="background-color: rgb(255, 255, 255);" v-if="dmpList.length == 0">
|
<div class="empty-description">
|
<div>暂无数据</div>
|
</div>
|
</div>
|
<div class="fact-analysis-card" v-for="item in dmpList" v-if="dmpList.length != 0">
|
<div class="card-name" :style="{'background-color': item.color}">{{item.dpLabel}}</div>
|
<div :class="{'card-value': true,'card-value-bg1':item.name != 'Alarm','card-value-bg2':item.name == 'Alarm'}">{{item.codeName}}</div>
|
</div>
|
</div>
|
</div>
|
<el-tabs type="border-card" class="demo-tabs">
|
<el-tab-pane label="工位数据">
|
<div style="text-align: right;margin-bottom: 14px;">
|
<el-date-picker v-model="wcsDate" type="date" @change="wcschangedate" value-format="YYYY-MM-DD" size="small" />
|
</div>
|
<div class="wcs-main">
|
<div><div id="wcs-right" style="width: 100%;height:400px;"></div></div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="机器履历">
|
<div class="alarm-title">报警信息履历</div>
|
<el-table ref="multipleTableRef" :data="alarmtableData" border style="width: 100%" class="multipleTableRef">
|
<el-table-column prop="alarmCode" label="报警代码"></el-table-column>
|
<el-table-column prop="alarmMsg" label="报警信息"></el-table-column>
|
<el-table-column prop="alarmTime" label="报警时间"></el-table-column>
|
</el-table>
|
<el-pagination
|
style="margin-top: 12px;"
|
@size-change="alarmSizeChange"
|
@current-change="alarmCurrentChange"
|
:current-page="currentPage4"
|
:page-sizes="[15, 50, 100]"
|
:page-size="15"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="alarmtotal">
|
</el-pagination>
|
</el-tab-pane>
|
</el-tabs> -->
|
<div class="bottom-panel content-panel">
|
<div class="panel-title">班次状态记录</div>
|
<div class="panel-content bottom-panel-chart">
|
<div class="status">
|
<div class="feed-button" @click="table_edit">状态反馈</div>
|
<div class="status-wrap align-left">
|
<div class="collect-status">采集状态</div>
|
<div class="status-box" v-for="item in achievements"><div class="status-color" :style="{'background-color': item.color}"></div>{{ item.name }}</div>
|
</div>
|
<div class="status-wrap">
|
<el-checkbox v-model="humanFeedback" label="人工反馈状态" size="large" />
|
<div class="status-con">
|
<div class="status-box" v-for="item in collectionstatus"><div class="status-color" :style="{'background-color': item.color}"></div>{{ item.name }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div style="padding: 8px;">
|
<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="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>
|
</div>
|
</div>
|
<save-dialog v-if="dialog.save" ref="saveDialog" @success="addfeedbackSuccess" :workstationId="treeChecked.toString()" @closed="dialog.save=false"></save-dialog>
|
</template>
|
<script>
|
import station from "./station.png";
|
import moment from 'moment'
|
import * as echarts from 'echarts';
|
import saveDialog from './add-station-status';
|
import MYTree from './MYTree.vue';
|
import stationLiveItem from './components/StationLiveItem'; //饼状图
|
import tationLiveSpeed from './components/StationLiveSpeed'; //speed
|
import speenBaseInfo from './components/speenBaseInfo'; //speenBaseInfo
|
export default {
|
name: "state-feedback",
|
data(){
|
return {
|
currentPage4: 1,
|
getwcsRData: [],
|
tableData1: [],
|
tableData2: [],
|
tableData3: [],
|
treeChecked: [],
|
achievements: [],
|
collectionstatus: [],
|
humanFeedback: "",
|
alarmtotal: 0,
|
alarmtableData: [],
|
wcsDate: "",
|
wcsOptionL: {
|
title: {
|
text: '用时分布情况',
|
left: 'left',
|
textStyle: {
|
fontSize:14
|
}
|
},
|
tooltip: {
|
trigger: 'item',
|
//formatter: '{a} <br/>{b} : {c} ({d}%)'
|
formatter: '{a} {c}分钟'
|
},
|
legend: {
|
orient: 'vertical',
|
bottom: 'bottom',
|
data: ['调试', '离线', '待机', '报告', '报警', '运行']
|
},
|
series: [
|
{
|
name: '用时:',
|
type: 'pie',
|
radius: '55%',
|
center: ['50%', '50%'],
|
data: [],
|
itemStyle: {
|
borderRadius: 10,
|
borderColor: '#fff',
|
borderWidth: 2
|
},
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
]
|
},
|
wcsOptionR:{
|
title: {
|
text: '设备效率',
|
left: 'left',
|
textStyle: {
|
fontSize:14
|
}
|
},
|
xAxis: {
|
max: '100'
|
},
|
yAxis: {
|
type: 'category',
|
data: ['运行率', '报警率', '稼动率']
|
},
|
tooltip: {
|
trigger: 'item',
|
//formatter: '{a} <br/>{b} : {c} ({d}%)'
|
formatter: '{b} {c}%'
|
},
|
series: [
|
{
|
top: -30,
|
name: 'wcsR',
|
type: 'bar',
|
center: ['40%', '50%'],
|
data: [],
|
itemStyle: {
|
borderRadius: 8,
|
borderColor: '#fff',
|
borderWidth: 1
|
},
|
label: {
|
show: true,
|
position: 'right',
|
formatter: '{c}%',
|
valueAnimation: true
|
},
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
],
|
legend: {
|
show: true, // 强制显示图例
|
orient: 'vertical', // 图例列表的布局朝向，可选值为：'horizontal' 或 'vertical'
|
left: 'left', // 图例组件离容器左侧的距离
|
top: 'top', // 图例组件离容器上侧的距离
|
data: ['运行率', '报警率', '稼动率'] // 与series中的name对应，用于显示图例名称
|
}
|
},
|
wcsOptionLog:{
|
grid: {
|
top: '0%'
|
},
|
xAxis: {
|
type: 'category',
|
data: [],
|
},
|
yAxis: {
|
type: 'category',
|
data: ['1', '2']
|
},
|
series: []
|
},
|
dmpList: [],
|
stationForm: {
|
code: "",
|
machineBrand: "",
|
machineCode: "",
|
machineName: ""
|
},
|
dialog: {
|
save: false
|
},
|
current: "1",
|
size: "15",
|
searchData: {
|
feedBackStatus: [],
|
date: [],
|
endDate: "",
|
startDate: ""
|
},
|
searchDataList: [], //右侧数据list
|
aList: [],
|
defalutProps: {
|
label: 'title',
|
children: 'children',
|
isLeaf: 'hasChildren',
|
disabled: 'disabled'
|
},
|
parentId: "0",
|
tableData: [],
|
searchSelection: [],
|
wcsBeginOption: {},
|
alarmsearchData: {
|
current: "1",
|
size: "15"
|
},
|
records: [],
|
recordData: [], // 班次状态记录table
|
allwcs: []
|
}
|
},
|
created(){
|
|
},
|
watch: {
|
treeChecked() {
|
this.query();
|
}
|
},
|
mounted(){
|
this.newDate(); //获取当前日期
|
this.getachievements();
|
},
|
components: {
|
saveDialog,MYTree,stationLiveItem,tationLiveSpeed,speenBaseInfo
|
},
|
methods: {
|
table_edit(){
|
this.dialog.save = true
|
this.$nextTick(() => {
|
this.$refs.saveDialog.open('edit').setData(this.treeChecked.toString());
|
})
|
},
|
alarmSizeChange(val) {
|
console.log(`每页 ${val} 条`);
|
this.alarmsearchData.current = "1";
|
this.alarmsearchData.size = val;
|
this.alarmsearchBtn();
|
},
|
alarmCurrentChange(val) {
|
console.log(`当前页: ${val}`);
|
this.alarmsearchData.current = val;
|
this.alarmsearchBtn();
|
},
|
alarmsearchBtn() {
|
this.$HTTP.get(`/api/mdc/work-station-analysis/alarm/${this.treeChecked.toString()}?current=${this.alarmsearchData.current}&size=${this.alarmsearchData.size}`).then(res=> {
|
if(res.code == 200) {
|
this.alarmtableData = res.data.records;
|
this.alarmtotal = res.data.total;
|
}
|
})
|
},
|
wcschangedate(date) {
|
this.wcsDate = date;
|
this.getwscLvalue(); //左侧图表
|
this.getwcsR();
|
this.getrecord(); //班次状态记录table
|
this.getlogcart(); //班次状态记录chart
|
},
|
getrecord() { //班次状态记录table
|
var obj = {
|
date: this.wcsDate,
|
humanFeedback: this.humanFeedback,
|
workstationId: this.treeChecked.toString()
|
}
|
this.$HTTP.post(`/api/mdc/status-record/shift-index-status-record-table`,obj).then(res=> {
|
if(res.code == 200) {
|
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: this.humanFeedback,
|
workstationId: this.treeChecked.toString()
|
}
|
this.$HTTP.post(`/api/mdc/status-record/shift-index-status-record-chart`,obj).then(res=> {
|
if(res.code == 200) {
|
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;
|
})
|
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 = {
|
date: this.wcsDate,
|
humanFeedback: this.humanFeedback,
|
workstationId: this.treeChecked.toString()
|
}
|
this.$HTTP.post(`/api/mdc/status-record/time-distribution`,obj).then(res=> {
|
if(res.code == 200) {
|
var myChart = echarts.init(document.getElementById('wcs-left'));
|
var wcsOption = JSON.parse(JSON.stringify(this.wcsBeginOption));
|
if(res.data.length == 0) {
|
wcsOption.forEach(item=> {
|
item.value = 0;
|
})
|
}else {
|
wcsOption.forEach(item=> {
|
res.data.forEach(item2=> {
|
if(item.code == item2.name) {
|
item.value = item2.value;
|
}
|
})
|
})
|
}
|
this.wcsOptionL.series[0].data = wcsOption;
|
myChart.setOption(this.wcsOptionL);
|
}
|
})
|
},
|
getwcsLcolor() {
|
this.$HTTP.get(`/api/smis/global_wcs/list?code=&name=`).then(res=> {
|
if(res.code == 200) {
|
res.data.forEach(item=> {
|
item.itemStyle = {color: item.color};
|
})
|
this.wcsBeginOption = res.data;
|
this.getwscLvalue();
|
}
|
})
|
},
|
getwcsR() {
|
var obj = {
|
date: this.wcsDate,
|
humanFeedback: this.humanFeedback,
|
workstationId: this.treeChecked.toString()
|
}
|
this.$HTTP.post(`/api/mdc/status-record/equipment-efficiency`,obj).then(res=> {
|
if(res.code == 200) {
|
//var myChart = echarts.init(document.getElementById('wcs-right'));
|
res.data.forEach(item=> {
|
item.value = (Number(item.value)*100).toFixed(2);
|
if(item.name == "运行率") item.itemStyle = {color: '#73d13d'};
|
if(item.name == "报警率") item.itemStyle = {color: '#ff4d4f'};
|
if(item.name == "稼动率") item.itemStyle = {color: '#40a9ff'};
|
})
|
//this.wcsOptionR.series[0].data = res.data;
|
this.getwcsRData = res.data; //新图形
|
//myChart.setOption(this.wcsOptionR);
|
}
|
})
|
},
|
newDate() {
|
var date = new Date();
|
var year = date.getFullYear();
|
var month = (1 + date.getMonth()).toString().padStart(2, '0'); // JavaScript中月份是从0开始的，所以我们需要加1
|
var day = date.getDate().toString().padStart(2, '0'); // getDate()返回的是当前月的日数，不需要加1
|
this.wcsDate = year + '-' + month + '-' + day;
|
},
|
addfeedbackSuccess() {
|
|
},
|
query() {
|
if (!this.treeChecked.toString()) return;
|
this.$HTTP.get(`/api/smis/workstation/get?workstationId=${this.treeChecked.toString()}`).then(res=> {
|
if(res.code == 200) {
|
if(res.data.avatar == "") {
|
res.data.avatar = station;
|
}
|
this.stationForm = res.data;
|
this.getdmp(this.stationForm.machineId);
|
//this.newDate(); //获取当前日期
|
this.getwcsR();
|
this.getwcsLcolor(); //左侧图表
|
this.alarmsearchBtn(); //机器履历
|
this.getrecord(); //班次状态记录table
|
this.getlogcart(); //班次状态记录chart
|
}
|
})
|
},
|
getdmp(machineId) {
|
this.$HTTP.get(`/api/smis/workstation/listDatapointsByWorkstationId?machineId=${machineId}&workstationId=${this.treeChecked.toString()}`).then(res=> {
|
if(res.code == 200) {
|
this.dmpList = [];
|
var that = this;
|
//发送websocket
|
var obj = {
|
type: "realTimeData",
|
workstationIdList: this.treeChecked
|
}
|
if(res.data.dpConfig == null || res.data.dpConfig.length == 0) return; //没值不用循环
|
|
if(this.$TOOL.socket.websocket == null) { //没有建立先建立
|
this.$TOOL.socket.connectToWebSocket(this.$TOOL.cookie.get("TOKEN"));
|
}
|
var intervalId123 = setInterval(function () {
|
if (that.$TOOL.socket.websocket.readyState == 1) {
|
clearInterval(intervalId123);
|
that.$TOOL.socket.sendDataToWebSocket(obj); //发送
|
}
|
}, 500);
|
this.$TOOL.socket.websocket.onmessage = function(event) {
|
var JSONData = JSON.parse(res.data.dpConfig);
|
var SpindleLoad = JSONData.some(obj => obj.dpName === 'spindleLoad'); //判断是否有主轴负载(SpindleLoad)；
|
var SpindleRate = JSONData.some(obj => obj.dpName === 'spindleRate'); //判断是否有主轴倍率(SpindleRate)；
|
var FeedRate = JSONData.some(obj => obj.dpName === 'feedRate'); //判断是否有进给倍率(FeedRate)；
|
if(!SpindleLoad) JSONData.push({dpName: "spindleLoad",dpLabel: "主轴负载"});
|
if(!SpindleRate) JSONData.push({dpName: "spindleRate",dpLabel: "主轴倍率"});
|
if(!FeedRate) JSONData.push({dpName: "feedRate",dpLabel: "进给倍率"});
|
var eventData = JSON.parse(event.data);
|
JSONData.forEach((item,index)=> { //第一步把v放到code里
|
if(item.dpName == "DeviceStatus") { //机器状态
|
if(eventData.data[item.dpName]) {
|
item.code = eventData.data[item.dpName].v;
|
}
|
setTimeout(()=> {
|
console.log(that.allwcs,888)
|
},5000)
|
that.allwcs.forEach((item1)=> {
|
if(item.code == item1.code) {
|
item.codeName = item1.name; //第二步把v的code和运行对应
|
}
|
})
|
}else {
|
if(item.dpName == 'Alarm') { //报警
|
if(eventData.data[item.dpName]) {
|
item.codeName = eventData.data[item.dpName].v;
|
}
|
}else {
|
if(eventData.data[item.dpName]) {
|
item.codeName = eventData.data[item.dpName].v;
|
}else { //ws没有的情况
|
if(item.dpName == "spindleLoad" || item.dpName == "spindleRate" || item.dpName == "feedRate") {
|
item.codeName = 0;
|
}else {
|
item.codeName = "";
|
}
|
}
|
}
|
}
|
});
|
that.dmpList = JSONData;
|
};
|
}
|
})
|
},
|
buildTree(items) {
|
const idMap = {};
|
const tree = [];
|
// 第一步：创建id到对象的映射
|
items.forEach(item => {
|
idMap[item.id] = { ...item, children: [] };
|
});
|
// 第二步：构建树形结构
|
items.forEach(item => {
|
const currentNode = idMap[item.id];
|
// 如果parentId为0，说明是根节点
|
if (item.parentId === 0) {
|
tree.push(currentNode);
|
} else {
|
// 否则，查找父节点，并将当前节点添加到父节点的children数组中
|
const parentId = item.parentId;
|
if (idMap[parentId]) {
|
idMap[parentId].children.push(currentNode);
|
}
|
}
|
});
|
return tree;
|
},
|
addTreeDisable(treeData) {
|
var tree = [];
|
treeData.forEach(item=> {
|
if(item.code) {
|
item.disabled = false;
|
}else {
|
item.disabled = true;
|
}
|
tree.push(item);
|
})
|
return tree;
|
},
|
getachievements() { //班次状态记录采集状态
|
this.$HTTP.get(`/api/smis/global_wcs/wcs-achievements`).then(res=> {
|
if(res.code == 200) {
|
var achievements = [];//采集状态
|
var collectionstatus = []; //人工反馈状态
|
res.data.forEach(item=> {
|
if(item.type == 1) {
|
achievements.push(item);
|
}
|
if(item.type == 4) {
|
collectionstatus.push(item);
|
}
|
})
|
this.achievements = achievements;
|
this.collectionstatus = collectionstatus;
|
this.allwcs = res.data;
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.aposcope-main {
|
display: flex;
|
min-height: 100%;
|
margin: 8px;
|
}
|
.aposcope-left {
|
width: 240px;
|
margin-right: 8px;
|
padding: 4px;
|
background-color: #fff;
|
padding-top:20px;
|
}
|
.aposcope-right {
|
flex: 1;
|
padding: 8px;
|
background-color: #fff;
|
}
|
.left-title {
|
font-size: 16px;
|
text-align: center;
|
height: 38px;
|
line-height: 38px;
|
border-bottom: 1px solid #e2e2e2;
|
background-color: #409eff;
|
color: #fff;
|
border-radius: 2px 2px 0 0;
|
}
|
.content-machine-box,.content-zhou-box {
|
display: flex;
|
align-items: flex-start;
|
flex-direction: row;
|
flex-wrap: nowrap;
|
align-content: center;
|
justify-content: flex-start;
|
border-radius: 2px;
|
border: 1px solid #ccc;
|
}
|
.content-border {
|
height: 100%;
|
}
|
.content-zhou-border {
|
height: 100%;
|
}
|
.content-one {
|
width: 25%;
|
}
|
.content-two,.zhou-three {
|
flex: 1;
|
position: relative;
|
}
|
.content-two {
|
border-left: 1px solid #eee;
|
border-right: 1px solid #eee;
|
min-height: 450px;
|
}
|
.content-three {
|
width: 25%;
|
}
|
.zhou-one {
|
width: 330px;
|
}
|
.zhou-two {
|
width:28%;
|
border-left: 1px solid #eee;
|
border-right: 1px solid #eee;
|
}
|
.content-machine-img {
|
margin: 14px;
|
padding: 2px;
|
border: 1px solid #e8e8e8;
|
width: 148px;
|
height: 145px;
|
justify-content: center;
|
}
|
.content-machine-img img {
|
width: 135px;
|
height: 135px;
|
}
|
.content-machine-detail {
|
display: flex;
|
width: calc(100% - 210px);
|
flex-direction: column;
|
align-items: flex-start;
|
align-content: flex-start;
|
flex-wrap: nowrap;
|
}
|
.content-machine-name {
|
margin-bottom: 12px;
|
font-size: 24px;
|
font-weight: 700;
|
}
|
.collect-info-panel {
|
background-color: rgba(59, 142, 142, .06);
|
padding: 8px;
|
padding-top: 0;
|
}
|
.fact-analysis-realtim {
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
justify-content: flex-start;
|
align-content: flex-start;
|
box-sizing: border-box;
|
background: #fff;
|
}
|
.fact-analysis-card {
|
border-radius: 2px;
|
box-sizing: border-box;
|
display: flex;
|
margin: 8px;
|
}
|
.fact-analysis-card .card-name {
|
width: 98px;
|
height: 68px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #fff;
|
}
|
.fact-analysis-card .card-value {
|
min-width: 118px;
|
max-width: 396px;
|
align-items: center;
|
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;
|
}
|
.wcs-main > div {
|
padding: 6px;
|
box-shadow: 2px 3px 10px rgba(0,0,0,.16);
|
}
|
.wcs-main > div:nth-child(1) {
|
width: 50%;
|
margin-right: 4px;
|
}
|
.wcs-main > div:nth-child(2) {
|
flex:1;
|
}
|
.alarm-title {
|
padding-bottom: 8px;
|
font-size: 14px;
|
}
|
.wimi-empty {
|
height: 100%;
|
width: 100%;
|
display: flex;
|
border-radius: 2px;
|
flex-direction: column;
|
flex-wrap: nowrap;
|
align-content: center;
|
justify-content: center;
|
align-items: center;
|
}
|
.empty-description {
|
margin-bottom: 20px;
|
font-size: 14px;
|
color: #5e6d82;
|
margin-top: -16px;
|
line-height: 28px;
|
}
|
.bottom-panel {
|
margin-top: 8px;
|
min-height: 300px;
|
}
|
.content-panel {
|
height: 100%;
|
box-shadow: 2px 3px 10px rgba(0,0,0,.16);
|
}
|
.panel-title {
|
font-size: 16px;
|
box-sizing: border-box;
|
padding: 12px 24px;
|
width: 100%;
|
position: relative;
|
color: #333;
|
font-weight: 700;
|
}
|
.bottom-panel-chart {
|
display: flex;
|
flex-direction: column;
|
flex-wrap: nowrap;
|
align-content: flex-start;
|
align-items: flex-start;
|
padding: 8px;
|
padding-top: 0;
|
box-sizing: border-box;
|
}
|
.panel-content {
|
width: 100%;
|
}
|
.panel-content-gant, .panel-content-table {
|
width: 100%;
|
}
|
.gant {
|
box-sizing: border-box;
|
padding: 8px;
|
}
|
.status {
|
display: flex;
|
align-items: start;
|
flex-direction: column;
|
justify-content: start;
|
margin: 8px 0;
|
position: relative;
|
width: 100%;
|
font-size: 16px;
|
cursor: pointer;
|
}
|
.feed-button {
|
position: absolute;
|
right: 10px;
|
top: -2px;
|
color: #409eff;
|
cursor: pointer;
|
}
|
.status-wrap.align-left, .status-wrap:first-child {
|
padding-left: 24px;
|
margin-bottom: 8px;
|
}
|
.status-wrap {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: start;
|
}
|
.collect-status {
|
color: #409eff;
|
margin-right: 16px;
|
font-size: 14px;
|
}
|
.status-box {
|
margin: 0 8px;
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
}
|
.status-color {
|
width: 40px;
|
height: 15px;
|
border-radius: 2px;
|
margin-right: 8px;
|
}
|
.status-wrap {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: start;
|
}
|
.status-wrap .status-con {
|
display: flex;
|
flex: 1;
|
flex-wrap: wrap;
|
}
|
.status-wrap /deep/ .el-checkbox.el-checkbox--large {
|
color: #409eff;
|
}
|
#record /deep/ .tipstatus {
|
width: 100%;
|
display: inline-block;
|
border-bottom: 1px solid #eee;
|
}
|
.dataHr {
|
background-color: #48ACF8;
|
height: 30px;
|
width: 100%;
|
text-align: center;
|
line-height: 30px;
|
font-size: 13px;
|
color: #fff;
|
font-weight: bold;
|
margin-top: 12px;
|
margin-bottom: 12px;
|
}
|
</style>
|
