emsfront/src/views/ems/dzjk/gzgj/index.vue

<template>
  <el-card shadow="always" class="common-card-container common-card-container-no-title-bg">
    <!--    搜索栏-->
    <div class="select-container">
      <el-form :inline="true">
        <el-form-item label="设备类型">
          <el-select v-model="search.sblx" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
            <el-option :label="item.name" :value="item.id" v-for="(item,index) in sblxOptions" :key="index+'sblxOptions'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="告警等级">
          <el-select v-model="search.gjdj" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
            <el-option :label="item.name" :value="item.id" v-for="(item,index) in gjdjOptions" :key="index+'gjdjOptions'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间选择">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            :picker-options="pickerOptions"
            :default-value="defaultDateRange"
            end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="onSearch" native-type="button">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="onReset" native-type="button">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin:30px 0;">
      <!--        二个选择按钮-->
      <el-row style="">
        <el-col :xs="24" :sm="24" :lg="24">
          <el-button-group>
            <el-button v-for="(item,index) in btnList" :key="index+'dtdcBtns'"  type="warning" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
          </el-button-group>
        </el-col>
      </el-row>
      <!--表格-->
      <el-table
          class="common-table"
          :data="tableData"
          stripe
          max-height="500"
          style="width: 100%;margin-top:25px;">
          <el-table-column
            prop="name"
            width="200"
            label="设备名称">
          </el-table-column>
          <el-table-column
            label="告警等级"
          >
            <template slot-scope="scope">
              <span>{{scope.row.gjdj}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="告警内容">
            <template slot-scope="scope">
              <span>{{scope.row.gjnr}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="startTime"
            label="告警发生时间">
          </el-table-column>
          <el-table-column
            prop="finishTime"
            label="告警结束时间">
          </el-table-column>
          <el-table-column
            label="状态">
            <template slot-scope="scope">
              <span :class="scope.row.status === 2 ? 'warning-status' : ''">{{scope.row.status === 2 ? '告警中' :'已结束'}}</span>
            </template>
          </el-table-column>
        </el-table>
    </div>
  </el-card>
</template>


<script>
export default {
  name:'DzjkGzgj',
  data() {
    return {
      btnList:[
        {name:'今日告警',id:'today'},
        {name:'历史告警',id:'yesterday'},
      ],
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      defaultDateRange:[],//默认展示的时间
      dateRange:[],
      activeBtn:'today',
      loading:false,
      search:{sblx:'',gjdj:''},
      sblxOptions:[
        {name:'类型一',id:1},
        {name:'类型二',id:2},
        {name:'类型三',id:3},
      ],
      gjdjOptions:[
        {name:'等级一',id:1},
        {name:'等级二',id:2},
      ],
      tableData:[
        {name:'告警一',gjdj:'等级一',gjnr:'设备一温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:1},
        {name:'告警二',gjdj:'等级一',gjnr:'设备二温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:2},
        {name:'告警三',gjdj:'等级一',gjnr:'设备一温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:1},
        {name:'告警四',gjdj:'等级一',gjnr:'设备二温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:2}
      ]
    }
  },
  methods:{
    // 搜索
    onSearch(){
      this.getData()
    },
    // 重置
    onReset(){
      this.search.dcd=''
      this.search.dcc=''
      this.getData()
    },
    // 获取数据
    getData(){
      this.loading=false
    },
    changeDataType(id){
      if(id !== this.activeBtn){
        console.log('点击了不同的菜单，更新数据')
        this.activeBtn=id;
      }
    },

  },
  mounted(){
    this.getData()
    const now = new Date();
    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
    this.defaultDateRange = [lastMonth, now];
  }
}
</script>

<style scoped lang="scss">
.select-container{
  .el-form--inline .el-form-item{
    margin-right: 20px;
  }
}
.activeBtn{
  background-color: #FFF2CB;
  border-color: #FFF2CB;
  color: #666666;
  font-weight: 600;
}
</style>