Merge branch 'new' of http://www.beijingsoft.cn:9090/r/smart-web into new

yangys

2025-11-18 831cfa4c439c6d073d706a82d2a439f8b1818498

 src/views/mdc/station-live.vue

@@ -1,20 +1,64 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-09-09 12:04:32
 * @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>
         <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 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">
            <div class="content-machine-img"><img src="./station.png" alt=""></div>
         <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%;">
@@ -34,19 +78,16 @@
                  </el-row>
               </el-form>
            </div>
         </div>
         <div class="collect-info-panel">
         </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="wimi-empty-img" style="width: 150px; height: 150px;">
                     <img src="./quesheng.bd026700.png" style="height: auto; width: 100%;">
                  </div> -->
                  <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.description}}</div>
                  <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>
@@ -57,48 +98,8 @@
                  <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-left" style="width: 100%;height:400px;"></div></div>
                   <div><div id="wcs-right" style="width: 100%;height:400px;"></div></div>
                </div>
               <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>
             </el-tab-pane>
             <el-tab-pane label="机器履历">
               <div class="alarm-title">报警信息履历</div>
@@ -118,19 +119,69 @@
                  :total="alarmtotal">
               </el-pagination>
            </el-tab-pane>
          </el-tabs>
          </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="lastLevelId" @closed="dialog.save=false"></save-dialog>
   <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 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: "",
@@ -145,9 +196,6 @@
                         fontSize:14
                      }
                  },  
                  grid: {
                     top: 0,
                  },
                  tooltip: {  
                      trigger: 'item',  
                      //formatter: '{a} <br/>{b} : {c} ({d}%)'  
@@ -156,15 +204,14 @@
                  legend: {  
                      orient: 'vertical',  
                      bottom: 'bottom',  
                      data: ['调试', '离线', '待机', '报告', '报警', '运行']  
                      data: ['调试', '离线', '待机', '报告', '报警', '运行']
                  },  
                  series: [  
                      {  
                         top: -30,
                      {
                          name: '用时:',  
                          type: 'pie',  
                          radius: '55%',  
                          center: ['40%', '50%'],  
                          center: ['50%', '50%'],  
                          data: [],  
                     itemStyle: {
                        borderRadius: 10,
@@ -260,7 +307,6 @@
            dialog: {
               save: false
            },
            lastLevelId: "",
            current: "1",
            size: "15",
            searchData: {
@@ -291,20 +337,25 @@
         }
      },
      created(){
			
		
      },
      watch: {
         treeChecked() {
            this.query();
         }
      },
      mounted(){
         this.newDate();  //获取当前日期
         this.getTreeList(this.$route.query.code);
         this.getachievements();
      },
      components: {
         saveDialog
         saveDialog,MYTree,stationLiveItem,tationLiveSpeed,speenBaseInfo
       },
      methods: {
         table_edit(){
            this.dialog.save = true
            this.$nextTick(() => {
               this.$refs.saveDialog.open('edit').setData(this.lastLevelId);
               this.$refs.saveDialog.open('edit').setData(this.treeChecked.toString());
            })
         },
         alarmSizeChange(val) {
@@ -319,7 +370,7 @@
            this.alarmsearchBtn();
         },
         alarmsearchBtn() {
            this.$HTTP.get(`/api/blade-mdc/work-station-analysis/alarm/${this.lastLevelId}?current=${this.alarmsearchData.current}&size=${this.alarmsearchData.size}`).then(res=> {
            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;
@@ -337,9 +388,9 @@
            var obj = {
               date: this.wcsDate,
               humanFeedback: this.humanFeedback,
               workstationId: this.lastLevelId
               workstationId: this.treeChecked.toString()
            }
            this.$HTTP.post(`/api/blade-mdc/status-record/shift-index-status-record-table`,obj).then(res=> {
            this.$HTTP.post(`/api/mdc/status-record/shift-index-status-record-table`,obj).then(res=> {
               if(res.code == 200) {
                  var defaultValues = {  
                     oee: 0,  
@@ -413,9 +464,9 @@
               date: this.wcsDate,
               //date : "2024-05-15",
               humanFeedback: this.humanFeedback,
               workstationId: this.lastLevelId
               workstationId: this.treeChecked.toString()
            }
            this.$HTTP.post(`/api/blade-mdc/status-record/shift-index-status-record-chart`,obj).then(res=> {
            this.$HTTP.post(`/api/mdc/status-record/shift-index-status-record-chart`,obj).then(res=> {
               if(res.code == 200) {
                  var yAxisData = [];
                  var newData = [];
@@ -561,9 +612,9 @@
            var obj = {
               date: this.wcsDate,
               humanFeedback: this.humanFeedback,
               workstationId: this.lastLevelId
               workstationId: this.treeChecked.toString()
            }
            this.$HTTP.post(`/api/blade-mdc/status-record/time-distribution`,obj).then(res=> {
            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));
@@ -586,7 +637,7 @@
            })
         },
         getwcsLcolor() {
            this.$HTTP.get(`/api/blade-cps/global_wcs/list?code=&name=`).then(res=> {
            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};
@@ -600,19 +651,20 @@
            var obj = {
               date: this.wcsDate,
               humanFeedback: this.humanFeedback,
               workstationId: this.lastLevelId
               workstationId: this.treeChecked.toString()
            }
            this.$HTTP.post(`/api/blade-mdc/status-record/equipment-efficiency`,obj).then(res=> {
            this.$HTTP.post(`/api/mdc/status-record/equipment-efficiency`,obj).then(res=> {
               if(res.code == 200) {
                  var myChart = echarts.init(document.getElementById('wcs-right')); 
                  //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;	
                  myChart.setOption(this.wcsOptionR);
                  //this.wcsOptionR.series[0].data = res.data;
                  this.getwcsRData = res.data;  //新图形
                  //myChart.setOption(this.wcsOptionR);
               }
            })
         },
@@ -626,105 +678,89 @@
         addfeedbackSuccess() {
            
         },
         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);
                     //this.newDate();  //获取当前日期
                     this.getwcsR();
                     this.getwscLvalue();  //左侧图表
                     this.alarmsearchBtn();  //机器履历
                     this.getrecord();  //班次状态记录table
                     this.getlogcart();  //班次状态记录chart
         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(lastLevelId,machineId) {
            this.$HTTP.get(`/api/blade-cps/workstation/get-dmp-variables?machineId=${machineId}&workstationId=${lastLevelId}`).then(res=> {
         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: [lastLevelId]
                     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")); 
                  }
                  this.$TOOL.socket.sendDataToWebSocket(obj);  //发送
                  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) {  
                     if(res.data.length == 0) return;  //没值不用循环
                       res.data.forEach((item,index)=> {  //第一步把v放到code里
                          var eventData = JSON.parse(event.data);
                         if(item.name == "DeviceStatus") {  //机器状态
                           if(eventData.data[item.name]) {
                              item.code = eventData.data[item.name].v;
                     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和运行对应
                                   if(item.code == "2") {
                                      item.color = "#73D13D";
                                   }else {
                                      item.color = "#75C0C0";
                                   }
                                }
                             })
                         }else {
                            if(item.name == 'Alarm') {  //报警
                              if(eventData.data[item.name]) {
                                 var v = JSON.parse(eventData.data[item.name].v);
                                 if(Array.isArray(v)) {  //如果是数组，不赋值
                                    if(v.length == 0) {
                                       res.data.splice(index,1);
                                    }else {
                                       item.description = v[0].code;
                                       item.codeName = v[0].msg;
                                       item.color = "#370C0D";
                                    }
                                 }else {
                                    item.description = v.code;
                                    item.codeName = v.msg;
                                    item.color = "#370C0D";
                                 }
                            if(item.dpName == 'Alarm') {  //报警
                              if(eventData.data[item.dpName]) {
                                 item.codeName = eventData.data[item.dpName].v;
                              }
                            }else {
                              if(eventData.data[item.name]) {
                                 item.codeName = eventData.data[item.name].v;
                                   item.color = "#75C0C0";
                              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 = res.data;
                     that.dmpList = JSONData;
                   };
               }
            })
         },
         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 = {};  
@@ -761,38 +797,8 @@
            })
            return tree;
         },
         getTreeList(id) {
            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(()=> {
                        if(id) {
                           this.lastLevelId = id;  //指定id
                        }else {
                           this.lastLevelId = this.getLastLevelIds(this.tableData).lastLevelId;
                        }
                        this.$refs.treeRef.setCurrentKey(this.lastLevelId);  //第一个节点的第一个子节点最后一级默认选中
                        //以下是初始化数据
                        this.getlist();  //渲染详情和(状态list)
                        this.getwcsLcolor();  //左侧图表
                        this.getwcsR();  //右侧图标
                        this.getachievements();  //班次状态记录采集状态
                        this.getrecord();  //班次状态记录table
                        this.getlogcart();  //班次状态记录chart
                     })
							
                  }
               }
            })
         },
         getachievements() { //班次状态记录采集状态
            this.$HTTP.get(`/api/blade-cps/global_wcs/wcs-achievements`).then(res=> {
            this.$HTTP.get(`/api/smis/global_wcs/wcs-achievements`).then(res=> {
               if(res.code == 200) {
                  var achievements = [];//采集状态
                  var collectionstatus = [];  //人工反馈状态
@@ -807,14 +813,6 @@
                  this.achievements = achievements;
                  this.collectionstatus = collectionstatus;
                  this.allwcs = res.data;
               }
            })
         },
         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);
               }
            })
         }
@@ -832,6 +830,7 @@
   margin-right: 8px;
   padding: 4px;
   background-color: #fff;
   padding-top:20px;
}
.aposcope-right {
   flex: 1;
@@ -848,15 +847,44 @@
    color: #fff;
    border-radius: 2px 2px 0 0;
}
.content-machine-box {
.content-machine-box,.content-zhou-box {
   display: flex;
   align-items: center;
   align-items: flex-start;
   flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    background-color: rgba(59, 142, 142, .06);
    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;
@@ -991,7 +1019,6 @@
}
.panel-content {
    width: 100%;
    height: calc(100% - 45px);
}
.panel-content-gant, .panel-content-table {
    width: 100%;
@@ -1062,4 +1089,16 @@
   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>