yunsu/ys_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>
                    <!-- 因为目前还不知道mouldState的意义 -->
                    <span v-else>不明</span>
                </el-form-item>
            </el-form>
        </el-col>
        <!-- v-if="requirement" -->
        <!-- 模具处理 -->
        <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" 
                v-if="!(user.parentId == 1 && user.subordinateType == 1) && requirement" style="margin-left: 16px;">
                立即处理
            </el-button>
        </el-col>
        <el-col :span="8" :offset="2" style="line-height: 32px;">
            云模盒告警：{{warningInfo}}
            <el-button size="small" type="primary"
                v-if="!(user.parentId == 1 && user.subordinateType == 1) && stage != 0"
                @click="warningFormVisible = true" style="margin-left: 16px;">
                立即处理
            </el-button>
        </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></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-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")),
      //本页模具ID
      mouldId: null,
      //模具名字
      mouldName: null,
      //模具状态
      mouldState: 0,
      options: [{ value: "aaa", label: "123" }, { value: "bbb", label: "456" }],
      //记录
      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: ""
    };
  },
  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.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"
            });
          }
        );
      }
    }
  },
  created() {
    let height = window.innerHeight;
    this.tableHeight = height - 370;
  },
  mounted() {
    this.mouldId = this.$route.params.id; //传到当前页面的模具编号
    this.warningForm.mouldId = this.mouldId; //顺便把相关的告警中的模具ID赋值一下
    this.getList();
    this.getDetail();
    this.getAlternativeEquipment();
  }
};
</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>