编辑时间轴组件

gaoshp

2024-04-23 f28363d03c3539b0219c5b58ea8b7db37d50be6f

 src/views/mdc/station-live.vue

@@ -1,24 +1,808 @@
<!--
 * @Date: 2024-04-09 22:11:21
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-13 22:15:47
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/station-live.vue
 状态反馈
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-04-23 17:08: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>
    <el-main>
        <el-card shadow="never">
            效率分析
        </el-card>
    </el-main>
   <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="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: 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 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-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="checked1" 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="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="perdata" label="稼动率%"></el-table-column>
                        <el-table-column prop="perdata" label="报警率%"></el-table-column>
                     </el-table>
                  </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>
   </div>
   <save-dialog v-if="dialog.save" ref="saveDialog"  @success="addfeedbackSuccess" :workstationId="lastLevelId" @closed="dialog.save=false"></save-dialog>
</template>

<script>
    export default {
        
    }
   import * as echarts from 'echarts';
   import saveDialog from './add-station-status'
   export default {
      name: "state-feedback",
      data(){
         return {
            achievements: [],
            collectionstatus: [],
            checked1: "",
            alarmtotal: 0,
            alarmtableData: [],
            wcsDate: "",
            wcsOptionL: {  
                  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: ['40%', '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: ['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'],  
               },
               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)'  
                              }  
                          }  
                  }
               ]
            },
            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: [],
            wcsBeginOption: {},
            alarmsearchData: {
               current: "1",
               size: "15"
            },
            recordData: [] // 班次状态记录table
         }
      },
      created(){
			
      },
      mounted(){
         this.newDate();  //获取当前日期
         this.getTreeList(this.$route.query.code);
      },
      components: {
         saveDialog
       },
      methods: {
         table_edit(){
            this.dialog.save = true
            this.$nextTick(() => {
               this.$refs.saveDialog.open('edit').setData(this.lastLevelId);
            })
         },
         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/blade-mdc/work-station-analysis/alarm/${this.lastLevelId}?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: true,
               workstationId: this.lastLevelId
            }
            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";
                  })
                  this.recordData = res.data;
               }
            })
         },
         getlogcart() {  //班次状态记录chart
            var obj = {
               date: this.wcsDate,
               humanFeedback: true,
               workstationId: this.lastLevelId
            }
            this.$HTTP.post(`/api/blade-mdc/status-record/shift-index-status-record-table`,obj).then(res=> {
               if(res.code == 200) {
                  var myChart = echarts.init(document.getElementById('wcs-log')); 
                  res.data.forEach(item => {
                     item.value = 0;
                  })
                  this.wcsOptionLog.series[0].data = res.data;
                  myChart.setOption(this.wcsOptionLog);
               }
            })
         },
         getwscLvalue() {
            var obj = {
               date: this.wcsDate,
               humanFeedback: true,
               workstationId: this.lastLevelId
            }
            this.$HTTP.post(`/api/blade-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 = 20;
                     })
                  }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/blade-cps/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: true,
               workstationId: this.lastLevelId
            }
            this.$HTTP.post(`/api/blade-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;	
                  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() {
				
         },
         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
                  }
               })
            }
         },
         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;
                  console.log(this.dmpList,1)
               }
            })
         },
         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(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=> {
               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;
               }
            })
         },
         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 lang="scss" scoped>

<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;
   flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    background-color: rgba(59, 142, 142, .06);
    border-radius: 2px;
}
.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 {
   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%;
    height: calc(100% - 45px);
}
.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: #3b8e8e;
    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: #3b8e8e;
    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: #3b8e8e;
}
</style>