childrenLibraryBMS/lib_vue/src/views/detection/maintenance.vue

<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true">
                <el-form-item>
                    <el-button type="text" @click="backToDetection" icon="el-icon-back" class="back">返回</el-button>
                </el-form-item>
                <el-form-item class="divLine"></el-form-item>
                <el-form-item>{{mouldName}}</el-form-item>
                <el-form-item class="state" style="float: right;">当前状态：
                    <span v-if="mouldState == 0">静止</span>
                    <span v-else-if="mouldState == 1">运动</span>
                    <span v-else-if="mouldState == 2">告警</span>
                    <span v-else-if="mouldState == 3">待报废</span>
                    <span v-else-if="mouldState == 4">已报废</span>
                </el-form-item>
            </el-form>
        </el-col>
        
        <el-col :span="24" :style="allDetail">
            <!-- 模具处理 -->
            <el-col :span="24" class="title">模具处理</el-col>
            <el-col :span="6" style="line-height: 32px; border-right: #c3c3c3 1px solid;">
                当前保养状态：
                <span v-if="requirement" style="color: #ff4949;">需要</span>
                <span v-else style="color: black;">正常</span>
                <el-button size="small" type="primary" @click="showMaintenance" style="margin-left: 16px;"
                    v-if="!(user.parentId == 1 && user.subordinateType == 1) && requirement">立即处理
                </el-button>
            </el-col>
            <el-col :span="8" :offset="2" style="line-height: 32px;">
                云模盒告警：{{warningInfo}}
                <el-button size="small" type="primary" @click="warningFormVisible = true" style="margin-left: 16px;"
                    v-if="!(user.parentId == 1 && user.subordinateType == 1) && stage != 0">立即处理
                </el-button>
            </el-col>

            <!-- 开合周期 -->
            <el-col :span="24" class="title">开合周期</el-col>
            <el-col :span="24">
                <el-col :span="11">
                    <div style="padding:0 20px">
                        <b style="font-size:20px;text-align:center;margin-bottom:20px;">开合次数表</b>
                        <el-date-picker v-model="openNum" style="float:right;width:125px;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change='changeOpen(1)' size="mini" :clearable="false" type="date" placeholder="选择日期"></el-date-picker>
                    </div>
                    <div id="myChart1" :style="{ height: '300px'}"></div>
                </el-col>
                <el-col :span="11" :offset="2">
                    <div style="padding:0 20px">
                        <b style="font-size:20px;text-align:center;margin-bottom:20px;">开合周期表</b>
                        <el-date-picker v-model="openCycle" style="float:right;width:210px;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change='changeOpen(2)' size="mini" :clearable="false" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </div>
                    <div id="myChart2" :style="{ height: '300px'}"></div>
                </el-col>
            </el-col>

            <!-- 操作记录 -->
            <el-col :span="24" class="title">处理记录</el-col>
            <!-- 列表 -->
            <el-table :data="records" highlight-current-row v-loading="listLoading" style="width: 100%;" :height="tableHeight">
                <el-table-column type="index" width="60"></el-table-column>
                <el-table-column prop="maintainUserName" label="保养人" width="100" sortable></el-table-column>
                <el-table-column prop="maintainType" label="保养方案" sortable>
                    <template slot-scope="scope">
                        <span v-if="scope.row.maintainType == 0">喷漆</span>
                        <span v-else-if="scope.row.maintainType == 1">检查</span>
                        <span v-else="scope.row.maintainType == 2">易损件</span>
                    </template>
                </el-table-column>
                <el-table-column prop="fileName" label="保养照片" width="200" sortable>
                    <template slot-scope="scope" v-if="scope.row.fileUrl != null">
                        <!-- <a style="color: #409EFF; cursor: pointer; text-decoration: none;"
                            :href="scope.row.fileUrl" :download="scope.row.fileName"> -->
                            <!-- 大图加载 -->
                            <div class="demo-image__preview">
                                <el-image style="width: 100px; height: 100px"
                                    :src="scope.row.fileUrl" :preview-src-list="scope.row.fileUrl"></el-image>
                            </div>
                        <!-- </a> -->
                    </template>
                </el-table-column>
                <el-table-column prop="indate" label="关闭时间" width="200" sortable></el-table-column>
            </el-table>

            <!--工具条-->
            <el-col :span="24" class="toolbar">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[20 , 50 , 80 , 100 , 200]"
                    :page-size="20"
                    layout="total, sizes, prev, pager, next"
                    :total="total"
                    style="float:right;"
                ></el-pagination>
            </el-col>
        </el-col>

        <!--新增界面-->
        <el-dialog title="处理保养" v-if="maintenanceFormVisible" :visible.sync="maintenanceFormVisible" :close-on-click-modal="false" customClass="customWidth">
            <el-form :model="maintenanceForm" label-width="100px" :rules="formRules" ref="addForm" :inline="true" class="demo-form-inline">
                <el-form-item label="保养类型" prop="type">
                    <!-- 保养类型选择 -->
                    <el-select v-model="type.value" filterable placeholder="请选择保养类型" style="width:202px">
                        <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>

                <!-- 保养类型为1时 选择易损件ID -->
                <el-form-item v-if="type.value == 1" label="易损件" prop="vulnerable">
                    <el-select v-model="vulnerable.value" clearable filterable placeholder="请选择易损件" style="width:202px">
                        <el-option v-for="item in vulnerable" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>

                <!-- 保养类型为0时 选择保养动作 -->
                <el-form-item v-else label="动作" prop="action">
                    <el-select v-model="action.value" filterable placeholder="请选择动作" style="width:202px">
                        <el-option v-for="item in action" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="保养照片">
                    <el-upload ref="upload" action="customize" :http-request="maintain" :limit="1" :auto-upload="false" :before-upload="beforeUpload">
                        <el-button size="small" type="primary">上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="maintenanceFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="maintainConfirm" :loading="maintenanceLoading">立即处理</el-button>
            </div>
        </el-dialog>

        <!--告警处理界面-->
        <el-dialog title="告警处理" v-if="warningFormVisible" :visible.sync="warningFormVisible" :close-on-click-modal="false" customClass="customWidth">
            <el-form :model="warningForm" label-width="100px" :rules="formRules" ref="addForm" :inline="true" class="demo-form-inline">
                <el-form-item label="告警类型">
                    <el-input placeholder="请选择告警类型" v-model="warningInfo" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="云模盒设置" prop="action">
                    <el-select v-model="warningForm.equipmentId" filterable placeholder="请选择云模盒" style="width:202px">
                        <el-option v-for="item in equipments" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="warningFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="warningArrangement" :loading="warningLoading">立即处理</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import util from "../../common/js/util";
    export default {
        data() {
            return {
                user: JSON.parse(sessionStorage.getItem("user")),
                detail: '',
                //本页模具ID
                mouldId: null,
                //模具名字
                mouldName: null,
                //模具状态
                mouldState: 0,
                //记录
                records: [],
                //警告信息
                warningInfo: "",
                stage: 0,
                //告警时需要更换的设备的列表
                equipments: [],
                //标题栏过滤器
                filters: {
                    name: "",
                    value: ""
                },
                listLoading: false,
                page: 1,
                size: 20,
                total: 0,
                tableHeight: 0,
                //活跃页面
                activePage: 0,
                formRules: {},
                //保养界面 种类
                type: [{ label: "动作", value: 0 }, { label: "易损件", value: 1 }],
                //保养界面 动作
                action: [{ label: "喷漆", value: 0 }, { label: "检查", value: 1 }],
                //易损件 假数据
                vulnerable: [],
                //是否需要保养 提示
                requirement: false,
                prompt: true,
                //保养详情界面显示
                maintenanceFormVisible: false,
                maintenanceLoading: false,
                //告警详情界面显示
                warningFormVisible: false,
                warningLoading: false,
                //保养详情界面数据
                maintenanceForm: {
                    username: "",
                    account: "",
                    mobile: "",
                    teamName: "",
                    companyId: "",
                    roleType: "",
                    flag: 0
                },
                //告警处理截面数据
                warningForm: {
                    mouldId: null,
                    equipmentId: null
                },
                imageUrl: "",
                openNum: util.formatDate.format(new Date(), 'yyyy-MM-dd'),
                openCycle: [util.formatDate.format(new Date(), 'yyyy-MM-dd') , util.formatDate.format(new Date(), 'yyyy-MM-dd')],
                allDetail: {
                    overflow: 'auto',
                    padding: '0px 5px',
                    height: 0
                },
                echarts1: {},
                echarts2: {},
            };
        },
        methods: {
            //分页
            handleCurrentChange(val) {
                this.page = val;
                this.getList();
            },

            handleSizeChange(val) {
                this.size = val;
                this.getList();
            },

            //标签页面切换时
            handleClick(tab, event) {
                this.activeTab = tab.name;
                //应该是取得对应的消息 目前还没写
            },

            selsChange: function(sels) {
                this.sels = sels;
            },

            backToDetection() {
                this.$router.go(-1);
            },

            //上传格式和大小限制
            beforeUpload(file) {
                const isJPG = file.type === "image/jpg";
                const isJPEG = file.type === "image/jpeg";
                const isPNG = file.type === "image/png";
                var rightType = isJPG || isPNG || isJPEG;
                const isLt5M = file.size / 1024 / 1024 < 5;
                if (!rightType) {
                    this.$message.error("上传的图片只能是 JPG 或 PNG 格式!");
                }
                if (!isLt5M) {
                    this.$message.error("上传的图片大小不能超过 5MB!");
                }
                return rightType && isLt5M;
            },

            //显示保养界面
            showMaintenance: function() {
                this.maintenanceFormVisible = true;
            },

            //获取记录
            getList() {
                this.listLoading = true;
                this.http.post( this.port.mold.moldMaintainList, { 
                    mouldId: this.mouldId, 
                    pageSize: this.size, 
                    pageNum: this.page 
                },
                res => {
                    this.listLoading = false;
                    if (res.code == "ok") {
                        this.records = res.data.list;
                        this.total = res.data.total;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            //模具详情 获取模具名字用的
            getDetail() {
                this.http.post( this.port.mold.moldDetail, {
                    id: this.mouldId
                },
                res => {
                    if (res.code == "ok") {
                        this.detail = res.data.vo;
                        this.getEcharts1();
                        this.getEcharts2();
                        this.mouldName = res.data.vo.modelName;
                        this.mouldState = res.data.vo.state;
                        this.requirement = res.data.vo.isMaintain == 1;
                        this.stage = res.data.vo.stage;
                        if(this.stage == 0){
                            this.warningInfo = "正常";
                        }else if(this.stage == 1){
                            this.warningInfo = "温度过高";
                        }else if(this.stage == 2){
                            this.warningInfo = "电量过低";
                        }else if(this.stage == 3){
                            this.warningInfo = "温度过高、电量过低";
                        }else{
                            this.warningInfo = "状况不明";
                        }
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            //模具保养的按钮按下之后（关闭之后也要清理文件但是还没写）
            maintainConfirm() {
                if (this.$refs.upload.uploadFiles.length == 1) {
                    this.$refs.upload.submit();
                } else {
                    this.$message({
                    message: "必须上传照片",
                    type: "error"
                    });
                }
            },

            //模具保养
            maintain(params) {
                if (this.type.value != null) {
                    var fileObj = params.file;
                    var form = new FormData();
                    form.append("file", fileObj);
                    form.append("mouldId", this.mouldId);
                    form.append("maintainType", this.type.value);
                    if (this.type.value == 0) {
                        if (this.action.value == null) {
                            return;
                        }
                        form.append("ways", this.action.value);
                    } else {
                        if (this.vulnerable.value == null) {
                            return;
                        }
                        form.append("ways", this.vulnerable.value); //后面应该换成易损件的ID
                    }
                    this.http.uploadFile( this.port.mold.moldMaintain, form,
                    res => {
                        if (res.code == "ok") {
                            this.$message({
                                message: "保养完成",
                                type: "success"
                            });
                            this.maintenanceFormVisible = false;
                            this.requirement = false;
                            this.$refs.upload.clearFiles();
                            this.getList();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.listLoading = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
                }
            },

            //获取告警时可以更换的设备列表
            getAlternativeEquipment() {
                this.http.post( this.port.mold.moldChangeRequirement, {
                    mouldId: this.mouldId
                },
                res => {
                    if (res.code == "ok") {
                        this.equipments = [];
                        res.data.forEach(item => {
                            this.equipments.push({ label: item.equipmentNo, value: item.id });
                        });
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            //告警处理
            warningArrangement() {
                if (this.warningForm.equipmentId == null) {
                    this.$message({
                    message: "请选择云模盒",
                    type: "error"
                    });
                } else {
                    this.http.post( this.port.mold.moldChange, this.warningForm,
                    res => {
                        if (res.code == "ok") {
                            this.$message({
                                message: "告警处理完毕",
                                type: "success"
                            });
                            this.warningFormVisible = false;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
                }
            },

            // 绘制折线图
            getEcharts1() {
                this.http.post( this.port.base.openingAndClosingTimesChart, {
                    equipmentNo: this.detail.equipmentNo,//"898602B5191730002945",
                    time: this.openNum
                },
                res => {
                    if (res.code == "ok") {
                        var option = {
                            tooltip: {
                                trigger: 'axis'
                            },
                            // grid: {
                            //     left: '3%',
                            //     right: '4%',
                            //     bottom: '6%',
                            //     containLabel: true
                            // },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: []
                            },
                            yAxis: {
                                name: '次数（‰）',
                                type: 'value'
                            },
                            dataZoom: [{
                                type: 'inside',
                                start: 0,
                                end: 10
                            }, {
                                start: 0,
                                end: 10,
                                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                                handleSize: '80%',
                                handleStyle: {
                                    color: '#fff',
                                    shadowBlur: 3,
                                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                                    shadowOffsetX: 2,
                                    shadowOffsetY: 2
                                }
                            }],
                            series: [
                                {
                                    name:'开合次数',
                                    type:'line',
                                    data:[],
                                    itemStyle : { 
                                        normal : { 
                                            color: "#009ad6", //改变折线点的颜色
                                            lineStyle:{ 
                                                color: "#009ad6" //改变折线颜色
                                            } 
                                        } 
                                    }
                                }
                            ]
                        },
                        list = res.data, 
                        xData = [], 
                        sData = [];

                        for(var i in list) {
                            xData.push(i);
                            sData.push(list[i])
                        }
                        option.xAxis.data = xData;
                        option.series[0].data = sData;

                        this.drawEchart(1,JSON.stringify(option))
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            
            getEcharts2() {
                this.http.post( this.port.base.openingAndClosingTimesChartCycle, {
                    equipmentNo: this.detail.equipmentNo,//"898602B5191730002945",
                    startTime: this.openCycle[0],
                    endTime: this.openCycle[1]
                },
                res => {
                    if (res.code == "ok") {
                        var option = {
                            tooltip: {
                                trigger: 'axis'
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: []
                            },
                            yAxis: {
                                name: '秒（s）',
                                type: 'value'
                            },
                            series: [{
                                name:'最大开盒周期',
                                type:'line',
                                stack: '开盒周期',
                                data:[],
                                itemStyle : { 
                                    normal : { 
                                        color: "#d93a49", //改变折线点的颜色
                                        lineStyle:{ 
                                            color: "#d93a49" //改变折线颜色
                                        } 
                                    } 
                                }
                            },
                            {
                                name:'最小开盒周期',
                                type:'line',
                                stack: '开盒周期',
                                data:[],
                                itemStyle : { 
                                    normal : { 
                                        color: "#009ad6", //改变折线点的颜色
                                        lineStyle:{ 
                                            color: "#009ad6" //改变折线颜色
                                        } 
                                    } 
                                }
                            },
                            {
                                name:'平均开盒周期',
                                type:'line',
                                stack: '开盒周期',
                                data:[],
                                itemStyle : { 
                                    normal : { 
                                        color: "#7fb80e", //改变折线点的颜色
                                        lineStyle:{ 
                                            color: "#7fb80e" //改变折线颜色
                                        } 
                                    } 
                                }
                            }]
                        },
                        list = res.data, 
                        xData = [], 
                        avg = [] , max = [] , min = [];

                        for(var i in list) {
                            xData.push(list[i].time);
                            max.push(list[i].maxCycle/1000);
                            min.push(list[i].minCycle/1000);
                            avg.push(list[i].avgCycle/1000);
                        }
                        option.xAxis.data = xData;
                        option.series[0].data = max;
                        option.series[1].data = min;
                        option.series[2].data = avg;

            
                        this.drawEchart(2,JSON.stringify(option));
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            

            drawEchart(type,option) {
                let myChart = this.echarts.init(document.getElementById("myChart" + type));
                if(type == 1) {
                    this.echarts1 = myChart;
                } else {
                    this.echarts2 = myChart;
                }
                myChart.setOption(JSON.parse(option));
            },

            changeOpen(type) {
                if(type == 1) {
                    this.getEcharts1();
                } else if(type == 2) {
                    this.getEcharts2();
                }
            },
        },
        created() {
            let height = window.innerHeight;
            this.tableHeight = height - 370;
            this.allDetail.height = height - 170 + "px";
            const that = this;
            window.onresize = function temp() {
                that.allDetail.height = window.innerHeight - 170;
            };
        },
        mounted() {
            this.mouldId = this.$route.params.id; //传到当前页面的模具编号
            this.warningForm.mouldId = this.mouldId; //顺便把相关的告警中的模具ID赋值一下
            this.getList();
            this.getDetail();
            this.getAlternativeEquipment();

            const that = this
            window.onresize = function temp() {
                that.echarts1.resize();
                that.echarts2.resize();
            };
        }
    };
</script>

<style scoped>
    .title {
        padding-left: 10px;
        padding-bottom: 0px;
        margin: 20px 0;
        font-size: 16px;
        line-height: 24px;
        border-left: 1px #20a0ff solid;
    }

    .toolbar .el-form-item {
        font-size: 14px;
        vertical-align: middle;
    }

    .back {
        font-size: 16px;
    }

    .divLine {
        width: 2px;
        background: #c3c3c3;
        height: 100%;
    }

    .projectTitle {
        font-size: 18px;
        color: #333;
    }
</style>