VehicleMonitor-WEB/src/views/systemMonitoring/monitoringSystemMonitoring/index.vue

<template>
    <div class="dashboard-container">
        <div class="search-content">
            <!-- <el-input style="width: 220px;" placeholder="请输入监测系统名称" v-model="searchData.monitorSystemName" clearable></el-input> -->
            <el-select
              v-model="searchData.monitorSystemName"
              placeholder="请选择监测系统名称"
              style="width: 220px; margin-right: 20px"
              filterable
              clearable
            >
              <el-option
                v-for="item in monitorNameData"
                :key="item.monitorSystemName"
                :label="item.monitorSystemName"
                :value="item.monitorSystemName"
              />
            </el-select>
            <el-select style="width: 220px;" clearable placeholder="请选择状态" v-model="searchData.status">
                <el-option label="在线" value="1"></el-option>
                <el-option label="离线" value="2"></el-option>
            </el-select>
            <div class="search-btn">        
                <div class="search" @click="searchBtn()">查询</div>
                <div class="reset" @click="reset()">重置</div>
            </div>     
        </div>
        
        <div class="table-content">
            <div style="width: 100%;height: 30px;">
                <div class="btn" style="margin-right: -3px;" @click="reset()">刷新</div>
            </div>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
                <el-table-column type="index" label="序号" width="80">
                </el-table-column>
                <el-table-column prop="monitorSystemName" show-overflow-tooltip="true" label="监测系统名称">
                </el-table-column>                
                <el-table-column prop="statusName" label="状态">
                  <template slot-scope="scope">
                      <span style="color: red;" v-if="scope.row.statusName == '未联通'">离线</span>
                      <span v-else>在线</span>
                  </template>
                </el-table-column>
                <el-table-column label="报警数量">
                    <template slot-scope="scope">
                        <span style="color:blue;cursor: pointer;" @click="toAlarmList(scope.row,'')">{{ scope.row.countAll||0 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="未解除报警总数">
                    <template slot-scope="scope">
                        <span style="color:blue;cursor: pointer;" @click="toAlarmList(scope.row,'2')">{{ scope.row.failureToReport||0 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="turnOnTime" label="最近接入时间" width="300px">
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15, 20]"
                :page-size="searchData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>    
</template>
<script>
import {getMonitoringSystemMonitoringList} from '@/api/systemMonitoring'
import { monitorNameList } from "@/api/monitor";
export default {
    name:'monitoringSystemMonitoring',
    data () {
        return {
            tableData: [],  
            total: 0,
            searchData:{
                pageNum: 1,
                pageSize: 10, 
                monitorSystemName:'',
                status:''
            },
            monitorNameData: [],
        }
    },
    created() {
        this.getList(this.searchData)
        this.getMonitoreName();
    },
    methods:{
        getMonitoreName() {
          let params = {};
          monitorNameList(params).then((response) => {
            this.monitorNameData = response.data;
          });
        },
        getList(params) {
            getMonitoringSystemMonitoringList(params).then(res => {                
                if (res.code == 200) {
                    this.tableData = res.data.records                    
                    this.total = res.data.total                    
                }
            }) 
        },
        searchBtn() {
            this.searchData.pageNum = 1
            this.getList(this.searchData)
        },
        reset() {
            this.searchData = {            
                pageNum: 1,
                pageSize: 10, 
                monitorSystemName:'',
                status:''            
            }
            this.getList(this.searchData)
        },
        handleSizeChange(val) {
            this.searchData.pageSize = val
            this.getList(this.searchData)
        },
        handleCurrentChange(val) {
            this.searchData.pageNum = val
            this.getList(this.searchData)
        },
        toAlarmList(row,val) {            
            this.$router.push({
                name:'List',
                params:{
                    pageNum:1,
                    pageSize:10,
                    source:row.clientId,
                    isLock:val
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.dashboard-container {
  .search-content {
    width: 100%;
    height: 74px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding-left: 10px;

    .el-input {
      margin: 0 10px;
    }

    .el-select {
      margin: 0 10px;
    }

    .search-btn {
      display: flex;
      align-items: center;
      height: 100%;      
      margin-left: 10px;

      div {
        // margin: 0 6px;
        display: inline-block;
        width: 80px;
        height: 40px;
        border-radius: 2px;
        font-size: 14px;
        line-height: 40px;
        text-align: center;
      }

      div:hover {
        cursor: pointer;
      }

      .search {
        margin-right: 10px;
        background-color: #2766DD;
        color: #F7F8FB;
      }

      .search:hover {
        background-color: #4D85F4;
      }

      .reset {
        color: #333334;
        border: 1px solid #D7D7D7;
      }

      .reset:hover {
        color: #1F9FFF;
        border: 1px solid #1F9FFF;
      }
    }
  }

  .table-content {
    margin-top: 15px;
    width: 100%;
    background-color: #fff;
    padding: 0 20px 20px;

    .btn {
      margin: 15px 20px 15px 0;
      cursor: pointer;
      float: left;
      text-align: center;
      width: 98px;
      height: 34px;
      border-radius: 2px;
      border: 1px solid #ABC7FD;
      line-height: 34px;
      font-weight: 400;
      font-size: 14px;
      color: #2250C8;
      background-color: #E7EEFF;
    }

    .btn:hover {
      color: #FFFFFF;
      background-color: #2250C8;
      border: 1px solid #2250C8;
    }

    .btn:active {
      color: #FFFFFF;
      background-color: #194DA4;
      border: 1px solid #194DA4;
    }

    .startUsing {
        width: 54px;
        height: 24px;
        margin: 14.5px auto 0;
        line-height: 24px;
        text-align: center;
        font-size: 12px;
        color: #00974D;
        border-radius: 4px;
        background-color: #E7FAF0;
        border: 1px solid #BEFDDD;
      }

      .Deactivate {
        width: 54px;
        height: 24px;
        margin: 14.5px auto 0;
        line-height: 24px;
        text-align: center;
        font-size: 12px;
        color: #FF9933;
        border-radius: 4px;
        background-color: #FFF3E8;
        border: 1px solid #FDE6CF;
      }

    .operateBtn {
      display: flex;
      justify-content: center;
      color: #2866DD;

      div {
        font-size: 14px;
        margin: 0 5px;
        cursor: pointer;
      }
    }

    .pagination {
      margin: 10px 0;
      width: 100%;
      height: 20px;

      .el-pagination {
        float: right;
        margin: 10px 0;
      }
    }
  }

}
</style>