1

lzhe

2024-04-19 9e66c647fddaa5c49e491fb3e1cf8c38c78e896e

1

 src/views/mdc/add-station-status.vue

@@ -1,5 +1,13 @@
<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="570" destroy-on-close @closed="$emit('closed')">
        <div v-if="isShow">历史反馈</div>
        <el-row v-if="isShow" class="history-feedback">
                <el-col :span="24"><span>开始反馈时间</span><span>{{latestData.feedbackTime}}</span></el-col>
                <el-col :span="24"><span>状态</span><span>{{latestData.wcsDesc}}</span></el-col>
                <el-col :span="24"><span>描述</span><span>{{latestData.feedbackDesc}}</span></el-col>
                <el-col :span="24"><span>状态持续时间</span><span>{{latestData.diffTime}}</span></el-col>
        </el-row>
        <div v-if="isShow" class="modal-title">最新反馈</div>
        <el-form :model="addDictForm" :rules="addDictRules" :disabled="mode=='show'" ref="dialogForm" label-width="120px" label-position="center">
            <el-row>
                <el-col :span="24">
@@ -8,13 +16,13 @@
                    </el-date-picker>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="24">
                <el-col :span="24">
                    <el-form-item label="状态" prop="wcs">
                        <el-select v-model="addDictForm.wcs" style="width: 100%">
                            <el-option v-for="item in feedBackStatusList" :key="item.code" :label="item.name" :value="item.code"/>
                        </el-select>
                    </el-form-item>
                </el-col> -->
                </el-col>
                <el-col :span="24">
                    <el-form-item label="描述">
                        <el-input v-model="addDictForm.description" placeholder="描述" clearable></el-input>
@@ -24,7 +32,7 @@
        </el-form>
        <template #footer>
            <el-button @click="visible=false" >取 消</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="dictSubmit()">保 存</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="dictSubmit">提交反馈</el-button>
        </template>
    </el-dialog>
</template>
@@ -32,21 +40,30 @@
<script>
    export default {
        emits: ['success', 'closed'],
        props: ['workstationId'],
        data() {
            return {
                feedBackStatusList: [],
                latestData: {
                    latestData: "",
                    wcsDesc: "",
                    feedbackDesc: "",
                    diffTime: ""
                },
                isShow: false,
                value1: true,
                mode: "add",
                titleMap: {
                    add: '状态反馈',
                    edit: '修改',
                    show: '查看'
                    edit: '状态反馈',
                    show: '状态反馈'
                },
                visible: false,
                isSaveing: false,
                //表单数据
                addDictForm: {
                    description: "",
                    date: "",
                    date: [],
                    endTime: "",
                    startTime: "",
                    wcs: ""
@@ -61,6 +78,25 @@
            
        },
        methods: {
            sumTime(startTime,endTime) {
                // 将字符串转换为Date对象  
                var startDate = new Date(startTime);  
                var endDate = new Date(endTime);  
				
                // 计算时间差（毫秒）  
                var timeDiff = endDate - startDate;  
				
                // 将时间差转换为天数、小时数、分钟数和秒数  
                var diffDays = Math.floor(timeDiff / (1000 * 60 * 60 * 24)); // 天  
                timeDiff %= 1000 * 60 * 60 * 24; // 剩余毫秒数  
                var diffHours = Math.floor(timeDiff / (1000 * 60 * 60)); // 小时  
                timeDiff %= 1000 * 60 * 60; // 剩余毫秒数  
                var diffMinutes = Math.floor(timeDiff / (1000 * 60)); // 分钟  
                timeDiff %= 1000 * 60; // 剩余毫秒数  
                var diffSeconds = Math.floor(timeDiff / 1000); // 秒
                var d = diffDays == 0?"":diffDays + "天";
                return d + diffHours + "小时 " + diffMinutes + "分钟 " + diffSeconds + "秒"
            },
            dateChange(val) {
                this.addDictForm.startTime = val[0];
                this.addDictForm.endTime = val[1];
@@ -71,10 +107,21 @@
                this.visible = true;
                return this
            },
            getfeedBackStatusList() {
                this.$HTTP.get("/api/blade-cps/global_wcs/wcs-achievements").then(res=> {
                    if(res.code == 200) {
                        res.data.forEach(item=> {
                            if(item.type == "4") {
                                this.feedBackStatusList.push(item);
                            }
                        })
                    }
                })
            },
            //表单提交方法
            dictSubmit(){
                var obj = Object.assign({},this.addDictForm);
                obj.workstationIds = [this.workstationId]
                obj.workstationIds = [this.workstationId];
                var that = this;
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
@@ -113,13 +160,41 @@
                })
            },
            //表单注入数据
            setData(data){
                //可以和上面一样单个注入，也可以像下面一样直接合并进去
                //Object.assign(this.addDictForm, data);
            setData(lastLevelId){
                this.getfeedBackStatusList();  //获取状态list
                this.$HTTP.get(`/api/blade-cps/workstation-wcs-feedback/latest?workstationId=${lastLevelId}`).then(res=> {
                    if(res.code == 200) {
                        console.log(res.data);
                        if(res.data == null) {
                            this.isShow = false;
                        }else {
                            res.data.diffTime = this.sumTime(res.data.startTime,res.data.endTime);
                            this.latestData = res.data;
                            this.isShow = true;
                        }
                    }
                })
            }
        }
    }
</script>

<style>
<style scoped>
.history-feedback {
    background: #f5f5f5;
    padding: 12px 0;
    padding-bottom: 24px;
    margin: 16px 0 24px 0;
}
.history-feedback .el-col.el-col-24 {
    margin: 24px 0 0px 40px;
    font-size: 14px;
}
.history-feedback .el-col.el-col-24 span:nth-child(1) {
    display: inline-block;
    min-width: 100px;
}
.modal-title {
    margin-bottom: 20px;
}
</style>

 src/views/mdc/state-feedback.vue

@@ -2,7 +2,7 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-04-18 18:07:47
 * @LastEditTime: 2024-04-19 18:18:19
 * @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
-->
@@ -122,8 +122,11 @@
            getfeedBackStatusList() {
                this.$HTTP.get("/api/blade-cps/global_wcs/wcs-achievements").then(res=> {
                    if(res.code == 200) {
                        this.feedBackStatusList.push(res.data[0]);
                        this.feedBackStatusList.push(res.data[1]);
                        res.data.forEach(item=> {
                            if(item.type == "4") {
                                this.feedBackStatusList.push(item);
                            }
                        })
                    }
                })
            },

 src/views/mdc/station-live.vue

@@ -2,7 +2,7 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-04-18 18:35:55
 * @LastEditTime: 2024-04-19 18:26:26
 * @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
-->
@@ -37,7 +37,15 @@
            </div>
            <div class="collect-info-panel">
                <div class="fact-analysis-realtim">
                    <div class="fact-analysis-card" v-for="item in dmpList">
                    <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>
@@ -45,16 +53,67 @@
            </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="机器履历">234</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" @closed="dialog.save=false"></save-dialog>
    <save-dialog v-if="dialog.save" ref="saveDialog"  @success="addfeedbackSuccess" :workstationId="lastLevelId" @closed="dialog.save=false"></save-dialog>
</template>
<script>
    import * as echarts from 'echarts';
@@ -63,7 +122,13 @@
        name: "state-feedback",
        data(){
            return {
                wcsOption: {  
                achievements: [],
                collectionstatus: [],
                checked1: "",
                alarmtotal: 0,
                alarmtableData: [],
                wcsDate: "",
                wcsOptionL: {  
                    title: {  
                        text: '用时分布情况',   
                        left: 'left',
@@ -90,8 +155,13 @@
                            name: '用时:',  
                            type: 'pie',  
                            radius: '55%',  
                            center: ['30%', '50%'],  
                            center: ['40%', '50%'],  
                            data: [],  
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            emphasis: {  
                                itemStyle: {  
                                    shadowBlur: 10,  
@@ -102,6 +172,88 @@
                        }  
                    ]  
                },
                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: "",
@@ -131,37 +283,134 @@
                },
                parentId: "0",
                tableData: [],
                searchSelection: []
                searchSelection: [],
                wcsBeginOption: {},
                alarmsearchData: {
                    current: "1",
                    size: "15"
                },
                recordData: [] // 班次状态记录table
            }
        },
        created(){
            
        },
        mounted(){
            this.newDate();  //获取当前日期
            this.getTreeList();
            this.getwcsL();  //左侧图表
        },
        components: {
            saveDialog
        },
        methods: {
            getwcsL() {
                this.$HTTP.get(`/api/blade-cps/global_wcs/list?code=&name=`).then(res=> {
            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";
                        })
                        console.log(res.data,980)
                        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.value=20;
                            item.itemStyle = {color: item.color}
                            item.itemStyle = {color: item.color};
                        })
                        this.wcsOption.series[0].data = res.data;
                        myChart.setOption(this.wcsOption);
                        console.log(this.wcsOption,9991);
                        this.wcsBeginOption = res.data;
                        this.getwscLvalue();
                    }
                })
            },
            getwcsR() {
                var obj = {
                    date: String(this.newDate()),
                    date: this.wcsDate,
                    humanFeedback: true,
                    workstationId: this.lastLevelId
                }
@@ -169,60 +418,13 @@
                    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);
                        res.data.forEach(item=> {
                            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);
                    }
                })
            },
@@ -231,13 +433,10 @@
                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;
                this.wcsDate = year + '-' + month + '-' + day;
            },
            addfeedbackSuccess() {
                this.getlist();
            },
            feedBackStatusChange(val) {
                this.getlist();
				
            },
            handleNodeClick(data) {
                if(data.code) {
@@ -246,6 +445,12 @@
                        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
                        }
                    })
                }
@@ -327,10 +532,32 @@
                                this.$refs.treeRef.setCurrentKey(this.lastLevelId);  //第一个节点的第一个子节点最后一级默认选中
                                //以下是初始化数据
                                this.getlist();  //渲染反馈列表
                                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;
                    }
                })
            },
@@ -375,6 +602,12 @@
.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;
@@ -441,6 +674,134 @@
    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;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    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>