yunsu/ys_vue/src/views/detection/detection.vue

<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-col :span="2">
                    <el-form-item>
                        <el-select v-model="filters.value" placeholder="请选择查询条件">
                        <el-option label="编号" value="0"></el-option>
                        <el-option label="名称" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="请输入关键字进行搜索" style="width: 300px;" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getMoulds(filters.name)">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="moulds" :height="tableHeight" highlight-current-row v-loading="listLoading" style="width: 100%;">
            <el-table-column type="index" width="60"></el-table-column>
            <el-table-column prop="modelNo" label="模具编号" width="100" sortable></el-table-column>
            <el-table-column label="模具名称" width="200" sortable>
                <template slot-scope="scope">
                    <a style="color: #409EFF; cursor: pointer" @click="toMould(scope.row.id)">{{scope.row.modelName}}</a>
                </template>
            </el-table-column>
            <el-table-column prop="equipmentNo" label="云模盒编号" width="180" sortable></el-table-column>
            <el-table-column prop="equipmentName" label="产品编号" width="180" sortable></el-table-column>
            <el-table-column prop="projectName" label="所属项目" width="200" sortable></el-table-column>
            <el-table-column prop="factoryName" label="制造工厂" width="200" sortable></el-table-column>
            <el-table-column prop="area" label="位置" width="200" sortable></el-table-column>
            <el-table-column prop="runTimes" label="运行次数" align="center" width="100" sortable></el-table-column>
            <el-table-column prop="ocCycle" label="每模平均周期" align="center" width="140" sortable></el-table-column>
            <el-table-column prop="hillNumber" label="电量" align="center" width="80" sortable>
                <template slot-scope="scope">{{scope.row.hillNumber}}<span v-if="scope.row.hillNumber">%</span></template>
            </el-table-column>
            <el-table-column prop="temperature" label="温度" align="center" width="80" sortable>
                <template slot-scope="scope">{{scope.row.temperature}}<span v-if="scope.row.temperature">℃</span></template>
            </el-table-column>
            <el-table-column prop="lastOpenTime" label="最后开模时间" align="center" width="150" sortable></el-table-column>
            <el-table-column label="模具状态" align="center" width="100" sortable>
                <template slot-scope="scope">
                    <span v-if="scope.row.state == 0">静止</span>
                    <span v-else-if="scope.row.state == 1">运行</span>
                    <span v-else-if="scope.row.state == 2">告警</span>
                    <span v-else-if="scope.row.state == 3">待报废</span>
                    <span v-else-if="scope.row.state == 4">已报废</span>
                </template>
            </el-table-column>
            <el-table-column label="云模盒报警" align="center" width="160">
                <template slot-scope="scope">
                    <span v-if="scope.row.stage == 0">正常</span>
                    <span v-else-if="scope.row.stage == 1">温度过高</span>
                    <span v-else-if="scope.row.stage == 2">电量过低</span>
                    <span v-else-if="scope.row.stage == 3">安装被拆</span>
                    <span v-else>不明</span>
                </template>
            </el-table-column>
            <el-table-column label="模具保养" align="center" width="100">
                <template slot-scope="scope">
                    <span v-if="scope.row.isMaintain == 1">需要</span>
                    <span v-else>正常</span>
                </template>
            </el-table-column>
            <el-table-column label="处理" align="center" width="85">
                <template slot-scope="scope">
                    <el-button size="small" type="primary" @click="toMaintenance(scope.row.id)">详情</el-button>
                </template>
            </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>
    </section>
</template>

<script>
import util from "../../common/js/util";
export default {
  data() {
    return {
      moulds: [],
      filters: {
        name: "",
        value: "0"
      },
      listLoading: false,
      total: 0,
      tableHeight: 0,
      page: 1,
      size: 20
    };
  },
  methods: {
    //分页
    handleCurrentChange(val) {
      this.page = val;
      this.getMoulds();
    },
    handleSizeChange(val) {
      this.size = val;
      this.getMoulds();
    },
    //跳转到运行监测详情
    toMaintenance(id) {
      this.$router.push("/detection/" + id);
    },
    //跳转到模具详情
    toMould(id) {
      this.$router.push("/moldList/" + id + "/0");
    },
    //获取模具信息
    getMoulds(keyWord) {
      this.listLoading = true;
      if (keyWord == null) {
        var type = 0;
      } else {
        var type = this.filters.value;
      }
      var params = {
        pageNum: this.page,
        pageSize: this.size,
        projectId: -1,
        searchType: type,
        keyName: keyWord,
        type: 0
      };
      this.http.post(
        this.port.mold.molds,
        params,
        res => {
          this.listLoading = false;
          if (res.code == "ok") {
            this.moulds = 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"
          });
        }
      );
    }
  },
  created() {
    let height = window.innerHeight;
    this.tableHeight = height - 210;
  },
  mounted() {
    this.getMoulds();
  }
};
</script>

<style scoped>
</style>