1

lzhe

2024-04-18 c8b13a66194137b0ab2e3bed0ade70ebc167fcb9

 src/views/mdc/station-live.vue

@@ -16,20 +16,20 @@
         <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">461</div>
               <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.test}}</el-form-item>
                        <el-form-item label="工位编号">{{stationForm.code}}</el-form-item>
                     </el-col>
                     <el-col :span="8">
                        <el-form-item label="机器品牌">{{stationForm.test}}</el-form-item>
                        <el-form-item label="机器品牌">{{stationForm.machineBrand}}</el-form-item>
                     </el-col>
                     <el-col :span="8">
                        <el-form-item label="机器编号">{{stationForm.test}}</el-form-item>
                        <el-form-item label="机器编号">{{stationForm.machineCode}}</el-form-item>
                     </el-col>
                     <el-col :span="8">
                        <el-form-item label="机器名称">{{stationForm.test}}</el-form-item>
                        <el-form-item label="机器名称">{{stationForm.machineName}}</el-form-item>
                     </el-col>
                  </el-row>
               </el-form>
@@ -37,24 +37,77 @@
         </div>
         <div class="collect-info-panel">
            <div class="fact-analysis-realtim">
               <div class="fact-analysis-card">
                  <div class="card-name" style="background-color: rgb(127, 192, 192);">设备状态</div>
               <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 saveDialog from './add-station-status'
   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: {
               test: ""
               code: "",
               machineBrand: "",
               machineCode: "",
               machineName: ""
            },
            dialog: {
               save: false
@@ -86,11 +139,100 @@
      },
      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();
         },
@@ -100,24 +242,20 @@
         handleNodeClick(data) {
            if(data.code) {
               this.lastLevelId = data.id;
               var obj = {
                  workstationId: this.lastLevelId,
               }
               if(this.searchData.feedBackStatus.length != 0) {
                  obj.feedBackStatus = this.searchData.feedBackStatus;
               }
               if(this.searchData.endDate) {
                  obj.endDate = this.searchData.endDate;
               }
               if(this.searchData.startDate) {
                  obj.startDate = this.searchData.startDate;
               }
               this.$HTTP.post("/api/blade-cps/workstation-wcs-feedback/page?current=1&size=15",obj).then(res=> {
               this.$HTTP.get(`/api/blade-cps/workstation/get?workstationId=${this.lastLevelId}`).then(res=> {
                  if(res.code == 200) {
                     this.searchDataList = res.data.records;
                     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 ""; // 如果没有根节点，返回空 
@@ -187,7 +325,9 @@
                     this.$nextTick(()=> {
                        this.lastLevelId = this.getLastLevelIds(this.tableData).lastLevelId;
                        this.$refs.treeRef.setCurrentKey(this.lastLevelId);  //第一个节点的第一个子节点最后一级默认选中
                        //以下是初始化数据
                        this.getlist();  //渲染反馈列表
                        this.getwcsR();  //右侧图标
                     })
                     
                  }
@@ -197,7 +337,8 @@
         getlist() {
            this.$HTTP.get(`/api/blade-cps/workstation/get?workstationId=${this.lastLevelId}`).then(res=> {
               if(res.code == 200) {
                  console.log(res.data,234)
                  this.stationForm = res.data;
                  this.getdmp(this.lastLevelId,this.stationForm.machineId);
               }
            })
         }
@@ -296,4 +437,10 @@
    overflow: hidden;
    word-break: break-all;
}
.wcs-main {
   display: flex;
}
.wcs-main > div {
   width: 50%;
}
</style>