<!--
|
* @Author: lzhe lzhe@example.com
|
* @Date: 2024-03-26 10:28:33
|
* @LastEditors: lzhe lzhe@example.com
|
* @LastEditTime: 2024-04-18 18:35:55
|
* @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>
|
<el-tree :data="tableData" node-key="id" default-expand-all :expand-on-click-node="false" :props="defalutProps" @node-click="handleNodeClick" ref="treeRef" highlight-current />
|
</div>
|
<div class="aposcope-right">
|
<div class="content-machine-box">
|
<div class="content-machine-img"><img src="./station.png" 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="fact-analysis-card" v-for="item in dmpList">
|
<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>
|
</div>
|
</div>
|
<el-tabs type="border-card" class="demo-tabs">
|
<el-tab-pane label="工位数据">
|
<div class="wcs-main">
|
<div><div id="wcs-left" style="width: 100%;height:400px;"></div></div>
|
<div><div id="wcs-right" style="width: 100%;height:400px;"></div></div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="机器履历">234</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
<save-dialog v-if="dialog.save" ref="saveDialog" @success="addfeedbackSuccess" @closed="dialog.save=false"></save-dialog>
|
</template>
|
<script>
|
import * as echarts from 'echarts';
|
import saveDialog from './add-station-status'
|
export default {
|
name: "state-feedback",
|
data(){
|
return {
|
wcsOption: {
|
title: {
|
text: '用时分布情况',
|
left: 'left',
|
textStyle: {
|
fontSize:14
|
}
|
},
|
grid: {
|
top: 0,
|
},
|
tooltip: {
|
trigger: 'item',
|
//formatter: '{a} <br/>{b} : {c} ({d}%)'
|
formatter: '{a} 0分钟'
|
},
|
legend: {
|
orient: 'vertical',
|
bottom: 'bottom',
|
data: ['调试', '离线', '待机', '报告', '报警', '运行']
|
},
|
series: [
|
{
|
top: -30,
|
name: '用时:',
|
type: 'pie',
|
radius: '55%',
|
center: ['30%', '50%'],
|
data: [],
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
]
|
},
|
dmpList: [],
|
stationForm: {
|
code: "",
|
machineBrand: "",
|
machineCode: "",
|
machineName: ""
|
},
|
dialog: {
|
save: false
|
},
|
lastLevelId: "",
|
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: []
|
}
|
},
|
created(){
|
|
},
|
mounted(){
|
this.getTreeList();
|
this.getwcsL(); //左侧图表
|
},
|
components: {
|
saveDialog
|
},
|
methods: {
|
getwcsL() {
|
this.$HTTP.get(`/api/blade-cps/global_wcs/list?code=&name=`).then(res=> {
|
if(res.code == 200) {
|
var myChart = echarts.init(document.getElementById('wcs-left'));
|
res.data.forEach(item=> {
|
item.value=20;
|
item.itemStyle = {color: item.color}
|
})
|
this.wcsOption.series[0].data = res.data;
|
myChart.setOption(this.wcsOption);
|
console.log(this.wcsOption,9991);
|
}
|
})
|
},
|
getwcsR() {
|
var obj = {
|
date: String(this.newDate()),
|
humanFeedback: true,
|
workstationId: this.lastLevelId
|
}
|
this.$HTTP.post(`/api/blade-mdc/status-record/equipment-efficiency`,obj).then(res=> {
|
if(res.code == 200) {
|
console.log(res.data,98988)
|
var myChart = echarts.init(document.getElementById('wcs-right'));
|
// res.data.forEach(item=> {
|
// item.value=20;
|
// item.itemStyle = {color: item.color}
|
// })
|
// this.wcsOption.series[0].data = res.data;
|
// myChart.setOption(this.wcsOption);
|
// console.log(this.wcsOption,9991);
|
var option = {
|
title: {
|
text: '设备效率指标', // 图表标题
|
left: 'left',
|
textStyle: {
|
fontSize:14
|
}
|
},
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
orient: 'vertical',
|
bottom: 'bottom', // 图例组件离容器左侧的距离
|
data: ['报警率', '稼动率', '运行率'] // 图例数据
|
},
|
series: [
|
{
|
name: 'Access From',
|
type: 'pie',
|
radius: ['30%', '50%'],
|
avoidLabelOverlap: false,
|
label: {
|
show: false,
|
position: 'center'
|
},
|
emphasis: {
|
label: {
|
show: true,
|
fontSize: 40,
|
fontWeight: 'bold'
|
}
|
},
|
labelLine: {
|
show: false
|
},
|
data: [
|
{value: 0, name: '报警率'}, // 报警率数据
|
{value: 0, name: '稼动率'}, // 稼动率数据
|
{value: 0, name: '运行率'}
|
]
|
}
|
]
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.setOption(option);
|
}
|
})
|
},
|
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
|
return year + '-' + month + '-' + day;
|
},
|
addfeedbackSuccess() {
|
this.getlist();
|
},
|
feedBackStatusChange(val) {
|
this.getlist();
|
},
|
handleNodeClick(data) {
|
if(data.code) {
|
this.lastLevelId = data.id;
|
this.$HTTP.get(`/api/blade-cps/workstation/get?workstationId=${this.lastLevelId}`).then(res=> {
|
if(res.code == 200) {
|
this.stationForm = res.data;
|
this.getdmp(this.lastLevelId,this.stationForm.machineId);
|
}
|
})
|
}
|
},
|
getdmp(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;
|
}
|
})
|
},
|
getLastLevelIds(tree) {
|
if (tree.length === 0) return ""; // 如果没有根节点，返回空
|
const lastLevelIds = [];
|
const lastLevelCodes = [];
|
function traverseTree(node) {
|
if(!node.code) {
|
lastLevelCodes.push(node.id);
|
}
|
if (node.children.length > 0) {
|
node.children.forEach(traverseTree); // 递归遍历子节点
|
} else {
|
if(node.code) {
|
lastLevelIds.push(node.id); // 有code才行
|
}
|
}
|
}
|
// 只遍历第一个根节点
|
traverseTree(tree[0]);
|
return {lastLevelCodes,lastLevelId:lastLevelIds[0]}; // 返回lastLevelCodes：没有code的数组。lastLevelId：有code的第一个id
|
},
|
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;
|
},
|
getTreeList(flag) {
|
var obj = {
|
groupCategory: 1,
|
groupType: "group_workstation"
|
}
|
this.$HTTP.post("/api/blade-cps/group/groupWorkstation/type",obj).then(res=> {
|
if(res.code == 200) {
|
if (res.code == 200) {
|
var treeDisabled = this.addTreeDisable(res.data);
|
this.tableData = this.buildTree(treeDisabled); //从扁平化变为树状结构
|
this.$nextTick(()=> {
|
this.lastLevelId = this.getLastLevelIds(this.tableData).lastLevelId;
|
this.$refs.treeRef.setCurrentKey(this.lastLevelId); //第一个节点的第一个子节点最后一级默认选中
|
//以下是初始化数据
|
this.getlist(); //渲染反馈列表
|
this.getwcsR(); //右侧图标
|
})
|
|
}
|
}
|
})
|
},
|
getlist() {
|
this.$HTTP.get(`/api/blade-cps/workstation/get?workstationId=${this.lastLevelId}`).then(res=> {
|
if(res.code == 200) {
|
this.stationForm = res.data;
|
this.getdmp(this.lastLevelId,this.stationForm.machineId);
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.aposcope-main {
|
display: flex;
|
min-height: 100%;
|
margin: 8px;
|
}
|
.aposcope-left {
|
width: 240px;
|
margin-right: 8px;
|
padding: 4px;
|
background-color: #fff;
|
}
|
.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 {
|
display: flex;
|
align-items: center;
|
}
|
.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;
|
}
|
.wcs-main {
|
display: flex;
|
}
|
.wcs-main > div {
|
width: 50%;
|
}
|
</style>
|
