zhaowei
10 天以前 008245cbe95c63a80f9a255378a5ffbe25d15085
src/views/mdc/base/modules/deviceBaseInfo/EquipmentList.vue
@@ -1,5 +1,5 @@
<template>
  <a-card :bordered="false">
  <a-card :bordered="false" style="display: flex;flex-direction: column">
    <!-- 查询区域 -->
    <!--<div class="table-page-search-wrapper">-->
@@ -48,7 +48,7 @@
      <!--<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>-->
    <!--</div>-->
    <div class="equipmentList">
    <div class="equipmentList" id="DeviceList">
      <!--<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
        <!--<i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{-->
        <!--selectedRowKeys.length }}</a>项&nbsp;&nbsp;-->
@@ -56,18 +56,39 @@
      <!--</div>-->
      <a-table ref="table" bordered size="middle" rowKey="equipmentId" :columns="columns" :dataSource="dataSource"
               :pagination="false" :loading="loading"
      style="height: 100%; overflow-y: scroll;">
               :pagination="false" :loading="loading" :scroll="{x:'max-content',y:scrollY}">
        <template slot="equipmentId" slot-scope="text, record">
          <div :style="{color:record.equipmentStatus!==0?'#f00':null}">{{text}}</div>
        </template>
        <template slot="equipmentName" slot-scope="text, record">
          <div :style="{color:record.equipmentStatus!==0?'#f00':null}">{{text}}</div>
        </template>
        <template slot="oporationDict" slot-scope="text, record">
          <div :style="{color:record.equipmentStatus!==0?'#f00':null}">{{text}}</div>
        </template>
        <template slot="equipmentStatus" slot-scope="text">
          <div :style="{color:text!==0?'#f00':null}">{{text===0?'正常':'异常'}}</div>
        </template>
        <template slot="collecttime" slot-scope="text, record">
          <div :style="{color:record.equipmentStatus!==0?'#f00':null}">{{text}}</div>
        </template>
        <template slot="action" slot-scope="text, record">
          <a-popconfirm title="确定反馈吗?" @confirm="$emit('editEquipmentStatus',record)" v-has="'deiveBaseInfo:responseStatus'">
            <a>状态反馈</a>
          </a-popconfirm>
        </template>
      </a-table>
    </div>
  </a-card>
</template>
<script>
  import { postAction } from '@/api/manage'
  export default {
    name: 'EquipmentLayout',
    components: {},
    components: {   },
    data() {
      return {
        loading:false,
@@ -79,25 +100,49 @@
            title: '设备ID',
            align: "center",
            dataIndex: 'equipmentId',
            scopedSlots: {customRender: 'equipmentId'},
            width:210
          },
          {
            title: '设备名称',
            align: "center",
            dataIndex: 'equipmentName',
            scopedSlots: {customRender: 'equipmentName'},
            width:300
          },
          {
            title: '状态',
            align: "center",
            dataIndex: 'oporationDict',
            scopedSlots: {customRender: 'oporationDict'},
            width:200
          },
          {
            title: '设备异常',
            align: "center",
            dataIndex: 'equipmentStatus',
            scopedSlots: {customRender: 'equipmentStatus'},
            width:200
          },
          {
            title: '采集时间',
            align: "center",
            dataIndex: 'collecttime',
            defaultSortOrder:'descend',
            sorter: (a, b) => {return a.collecttime>b.collecttime?1:-1}
            sorter: (a, b) => {return a.collecttime>b.collecttime?1:-1},
            scopedSlots: {customRender: 'collecttime'},
            width:350
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
            align: "center",
            width: 150,
            fixed:'right'
          }
        ],
        scrollY:465,
      }
    },
    props: { dataSource: {
@@ -108,38 +153,47 @@
    watch: {
    },
    methods: {
    }
      handleWindowResize(){
        const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2)
        const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2)
        this.scrollY = boxHeight - tableHeadHeight
      },
    },
    mounted(){
      window.addEventListener('resize',this.handleWindowResize)
      this.handleWindowResize()
    },
  }
</script>
<style scoped>
  .equipmentList{
    flex: 1;
    overflow: hidden;
  }
  @media screen and (min-width: 1920px){
    .equipmentList{
      height: 640px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1680px) and (max-width: 1920px){
    .equipmentList{
      height: 640px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1680px){
    .equipmentList{
      height: 493px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1280px) and (max-width: 1400px){
    .equipmentList{
      height: 493px!important;
      overflow: scroll;
    }
  }
  @media screen and (max-width: 1280px){
    .equipmentList{
      height: 394px!important;
      overflow: scroll;
    }
  }