CKQ/src/views/goaf/sensor/index.vue

<template>
  <div class="content-container sensor">
    <el-row class="tool-bar">
      <el-col :span="12" class="left">
        <div class="content-title">
          传感器配置
        </div>
      </el-col>
      <el-col :span="12" class="right">
        <el-input v-model="conditions.goafDevName" class="search-input m-right-15" placeholder="请输入设备名称">
          <el-button slot="append" icon="el-icon-search" @click="getData()" />
        </el-input>
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </el-col>
    </el-row>

    <el-row class="m-top-15">
      <el-table v-loading="listLoading" class="page-table" border fit :data="dataList">
        <el-table-column type="index" label="序号" header-align="center" align="center" width="60" />
        <el-table-column prop="goafDevName" label="设备名称" />
        <el-table-column label="安装区域">
          <template v-slot="{row}">
            <span>{{ NumConvertLM(row.goafOrebelt) }}-{{ row.goafOrebody }}-{{ row.goafOreheight }}-{{ row.goafName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goafDevLocation" label="安装地点" />
        <el-table-column prop="goafDevTypename" label="设备类型" />
        <el-table-column prop="goafDevGroupname" label="设备负责人部门" />
        <el-table-column prop="goafDevAccountName" label="设备责任人" />
        <el-table-column prop="goafAlarmThreshold" label="告警阈值 " />
        <el-table-column prop="goafAlarmThreshold" label="单位"> <template v-slot="{row}">{{ row|formatUnit }}</template></el-table-column>
        <el-table-column prop="goafInstallTime" label="安装时间" />
        <el-table-column label="操作" header-align="center" align="center" width="170">
          <template v-slot="{row}">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleUpdate(row)">修改</el-button>
            <el-button size="mini" type="danger" icon="el-icon-edit" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container" style="float:right;margin-right:40px;">
        <pagination v-show="total>0" :total="total" :page.sync="conditions.page" :limit.sync="conditions.limit" @pagination=" " />
      </div>
    </el-row>
    <sensor-Model ref="sensor" @formSuccess="getData" />
  </div>
</template>

<script>
import { delSensor, getSensor } from '@/api/goaf/sensor'
import { Pagination } from '@/components'
import { NumConvertLM } from '@/utils'
import sensorModel from './Model'
export default {
  components: { Pagination, sensorModel },
  filters: {
    formatUnit(row) {
      if (row.goafDevTypename.indexOf('位移') > -1) return 'mm'
      if (row.goafDevTypename.indexOf('压力') > -1) return 'MPa'
    }
  },
  data() {
    return {
      dataList: [],
      total: 0,
      listLoading: false,
      conditions: {
        page: 1,
        limit: 10,
        goafDevName: ''
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // fetch data
    NumConvertLM,
    getData() {
      this.listLoading = true
      getSensor(this.conditions).then((resp) => {
        this.listLoading = false
        const { code, msg, data } = resp
        if (code === 0) {
          const start = (this.conditions.page - 1) * this.conditions.limit
          const end = this.conditions.page * this.conditions.limit
          const dataList = data.filter((item) => item.goafDevTypename.includes('传感器'))
          this.dataList = dataList.filter((item, index) => index >= start && index < end)
          this.total = dataList.length
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    handleAdd() {
      this.$refs['sensor'].showAddModel('传感器')
    },

    // "Edit Risk" Model
    handleUpdate(data) {
      this.$refs['sensor'].showEditModel(JSON.parse(JSON.stringify(data)))
    },

    // Delete Action
    handleDelete(data) {
      const { typeId, riskSource } = data
      this.$confirm(`此操作将删除该数据${riskSource}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delSensor(typeId).then((resp) => {
          const { code, msg } = resp
          if (code === 0) {
            this.getData()
            this.$message.success(msg)
          } else {
            this.$message.error(msg)
          }
        }).catch((error) => {
          console.log(error)
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>