IIoT/src/views/iiot/equipment/overview.vue

<template>
  <div class="page-wrap">
    <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-col>
    </el-row>
    <el-card class="statistics-wrap">
      <div slot="header" class="clearfix">
        <span>设备当前状态统计</span>
      </div>
      <div class="overview-status-wrap">
        <overview-status />
      </div>
    </el-card>
    <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="goafInstallTime" label="安装时间" />
      </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="getData" />
      </div>
    </el-row>
  </div>
</template>

<script>
import { getSensor } from '@/api/goaf/sensor'
import { Pagination } from '@/components'
import { NumConvertLM } from '@/utils'
import OverviewStatus from './components/OverviewStatus'
export default {
  components: { Pagination, OverviewStatus },
  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)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .page-wrap{
      min-height:90vh;
      padding: 15px;
      background-color: #071A29;
      .statistics-wrap{
        background-color:#113144;
        margin-top:5px;
        .overview-status-wrap{
            width:500px;
            height:300px;
        }
      }
  }
</style>