xt_vue/src/xt_pages/management/components/MultipleForm.vue

<template>
  <div class="allDialog">
    <el-dialog
      title="综合查询"
      :visible.sync="dialogVisible"
      width="95%"
      center
    >
      <el-form style="height:100%">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="透析分区:">
              <el-select style="width:110px" v-model="form.zone">
                <el-option
                  v-for="item in this.DeviceType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="机号:">
              <el-select style="width:110px" v-model="form.device_number">
                <el-option
                  v-for="item in this.Numbers"
                  :key="item.id"
                  :label="item.number"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="设备类型:">
              <el-select style="width:110px" v-model="form.device_type">
                <el-option
                  v-for="item in this.EquitmentType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="设备型号:">
              <el-select style="width:110px" v-model="form.device_model">
                <el-option
                  v-for="item in this.EquitmentName"
                  :key="item.id"
                  :label="item.equitment_name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="使用年限:">
              <el-select style="width:110px" v-model="form.user_year">
                <el-option
                  v-for="item in this.userYear"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="cell clearfix">
              <label class="title">
                <span class="name">日期查询</span> :
              </label>
              <el-date-picker
                size="small"
                clearable
                v-model="form.start_time"
                prefix-icon="el-icon-date"
                :editable="false"
                style="width: 140px;"
                type="date"
                placeholder="选择日期时间"
                align="right"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
              <span class="cellLine">-</span>
              <el-date-picker
                size="small"
                clearable
                v-model="form.end_time"
                prefix-icon="el-icon-date"
                :editable="false"
                style="width: 140px;"
                type="date"
                placeholder="选择日期时间"
                align="right"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </div>
          </el-col>
          <el-col :span="4">
            <el-form-item label="合计:">
              故障次数
              <span>{{ failure_times }}</span
              >次
              <!-- <el-input style="width:90px"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" size="medium" @click="getComprehensive()"
              >查询</el-button
            >
          </el-col>
        </el-row>
        <!-- <el-row> -->
        <el-table
          :data="tableData"
          border
          style="width:100%"
          height="80%"
          :row-style="{ color: '#303133' }"
          :header-cell-style="{
            backgroundColor: 'rgb(245, 247, 250)',
            color: '#606266'
          }"
        >
          <el-table-column
            prop="date"
            label="序号"
            width="60"
            align="center"
            type="index"
          >
            <!-- <template slot-scope="scope">
                {{ scope.row.id }}
              </template>-->
          </el-table-column>
          <el-table-column prop="name" label="分区" width="60" align="center">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="序列号"
            width="80"
            align="center"
          >
            <template slot-scope="scope">{{
              scope.row.serial_number
            }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="设备类型"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.device_type }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="机号"
            width="80"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.bed_number }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="设备名称"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.device_name }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="设备型号"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.device_mode }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="启用日期"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{
              getTime(scope.row.start_date)
            }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="保修期限"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{
              scope.row.guarantee_date
            }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="机器状态"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{
              scope.row.machine_status
            }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="报废日期"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{
              getTime(scope.row.rubbish_date)
            }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="报废原因"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{
              scope.row.rubbish_reason
            }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="使用年限"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.user_year }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="工作时长"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.work_time }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="使用次数"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.user_total }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="故障次数"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{ failure }}</template>
          </el-table-column>
        </el-table>
        <!-- </el-row> -->
      </el-form>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import {
  getAllSubregion,
  getAllEquimentName,
  getComprehensive,
  getTotalCount
} from '@/api/manage'
import { uParseTime } from '@/utils/tools'
export default {
  name: 'MultipleForm',
  props: {
    equimentid: Number
  },
  data() {
    return {
      failure_times: 0,
      failure: 0,
      dialogVisible: false,
      form: {
        zone: '',
        device_number: '',
        device_type: '',
        device_model: '',
        user_year: '',
        start_time: '',
        end_time: ''
      },
      userYear: [
        { id: 0, name: '全部' },
        { id: 1, name: '0~1' },
        { id: 2, name: '1~3' },
        { id: 3, name: '3~10' },
        { id: 4, name: '10年以上' }
      ],
      value1: '',
      value2: '',
      tableData: [],
      EquitmentType: [
        { id: 0, name: '全部' },
        { id: 1, name: '透析机' },
        { id: 2, name: '水处理机' },
        { id: 3, name: '报废机' },
        { id: 4, name: '其他' }
      ],
      DeviceType: [{ id: 0, name: '不限' }],
      Numbers: [{ id: 0, number: '不限' }],
      EquitmentName: [{ id: 0, equitment_name: '全部' }],
      runOptions: [
        { value: '1', label: '正常' },
        { value: '2', label: '故障' }
      ]
    }
  },
  methods: {
    open: function() {
      this.dialogVisible = true
    },
    getAllSubregion() {
      getAllSubregion().then(response => {
        if (response.data.state === 1) {
          var zone = response.data.data.zones
          var zones = [{ id: 0, name: '不限' }]
          for (let i = 0; i < zone.length; i++) {
            const item = zone[i]
            zones.push({ id: item.id, name: item.name })
          }
          this.DeviceType = zones
          var number = response.data.data.numbers
          var numbers = [{ id: 0, number: '不限' }]
          for (let index = 0; index < number.length; index++) {
            const item = number[index]
            numbers.push({ id: item.id, number: item.number })
          }
          this.Numbers = numbers
          // console.log('numbers', number)
        }
      })
    },
    getAllEquimentName() {
      getAllEquimentName().then(response => {
        if (response.data.state == 1) {
          var equit = response.data.data.equit
          var equits = [{ id: 0, equitment_name: '全部' }]
          for (let index = 0; index < equit.length; index++) {
            const item = equit[index]
            equits.push({ id: item.id, equitment_name: item.equitment_name })
          }
          this.EquitmentName = equits
        }
      })
    },
    getComprehensive() {
      const params = {
        zone: this.form.zone,
        number: this.form.device_number,
        devicetype: this.form.device_type,
        year: this.form.user_year,
        starttime: this.form.start_time,
        endtime: this.form.end_time
      }
      getComprehensive(params).then(response => {
        if (response.data.state === 1) {
          var macher = response.data.data.macher
        
          for (let index = 0; index < macher.length; index++) {
            if (macher[index].device_type === 1) {
              macher[index].device_type = '透析机'
            }
            if (macher[index].device_type === 2) {
              macher[index].device_type = '水处理机'
            }
            if (macher[index].device_type === 3) {
              macher[index].device_type = '其他'
            }

            if (macher[index].machine_status === 1) {
              macher[index].machine_status = '使用机'
            }
            if (macher[index].machine_status === 2) {
              macher[index].machine_status = '备用机'
            }
            if (macher[index].machine_status === 3) {
              macher[index].machine_status = '急诊机'
            }
            if (macher[index].machine_status === 4) {
              macher[index].machine_status = '报废机'
            }
            if (macher[index].rubbish_reason === 0) {
              macher[index].rubbish_reason = ''
            }
          }
          // console.log('macher', macher)
          this.tableData = macher
        }
      })
    },
    getTime(time) {
      if (time === 0) {
        return ''
      } else {
        return uParseTime(time, '{y}-{m}-{d}')
      }
    },
    getTotalCount() {
      getTotalCount().then(response => {
        if (response.data.state === 1) {
          var total = response.data.data.total
     
          this.failure_times = total
        }
      })
    }
  },
  created() {
    this.getAllSubregion()
    this.getAllEquimentName()
    this.getTotalCount()
  }
}
</script>

<style scoped></style>
<style lang="scss">
.el-table__header {
  width: 100% !important;
}
.el-table__body {
  width: 100% !important;
}
.allDialog {
  .el-dialog {
    height: 90%;
  }
  .el-dialog__body {
    max-height: calc(100vh - 200px) !important;
  }
}
</style>