vent-template/src/views/vent/monitorManager/comment/gaspatrolTable.vue

<template>
  <div class="gaspatrolTable">
    <div class="search-area">
      <a-row>
        <a-col :span="5">
          <div class="area-item">
            <div class="item-text">巡检地点：</div>
            <a-input style="width: 240px" v-model:value="searchData.address" placeholder="请输入巡检地点" />
          </div>
        </a-col>
        <a-col :span="5">
          <div class="area-item">
            <div class="item-text">巡检员：</div>
            <a-input style="width: 240px" v-model:value="searchData.userName" placeholder="请输入巡检员" />
          </div>
        </a-col>
        <a-col :span="5">
          <div class="area-item">
            <div class="item-text">巡检类型：</div>
            <a-select ref="select" v-model:value="searchData.insType" style="width: 240px" placeholder="请输入巡检类型"
              @change="insTypeChange">
              <a-select-option v-for="(item, index) in insTypeList" :key="item.value" :value="item.value">{{ item.label
              }}</a-select-option>
            </a-select>
          </div>
        </a-col>
        <a-col :span="5">
          <div class="area-item">
            <div class="item-text">巡检班次：</div>
            <a-select ref="select" v-model:value="searchData.class" style="width: 240px" placeholder="请输入巡检班次">
              <a-select-option v-for="(item, index) in classList" :key="item.value" :value="item.value">{{ item.label
              }}</a-select-option>
            </a-select>
          </div>
        </a-col>
        <a-col :span="4">
          <a-button type="primary" preIcon="ant-design:search-outlined" style="margin-left: 10px"
            @click="getSearch">查询</a-button>
          <a-button preIcon="ant-design:sync-outlined" style="margin: 0px 15px" @click="getReset">重置</a-button>
        </a-col>
      </a-row>
    </div>
    <div class="content-area">
      <a-table :columns="Columns" size="small" :data-source="gaspatrolTableData" class="tableW" :pagination="false"
        :scroll="{ y: 620 }">
        <!-- <template #bodyCell="{ column, record }">
          <a v-if="column.dataIndex === 'operation'" class="table-action-link" @click="handlerLocation(record)">定位</a>
        </template> -->
        <template #action="{ record }">
          <a class="table-action-link" @click="handlerLocation(record)">定位</a>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch, defineExpose } from 'vue';
import { gaspatrolColumnsOne, gaspatrolColumnsTwo } from './comment.data';
import { queryNowGasInsInfo } from '../deviceMonitor/components/device/device.api';

let searchData = reactive({
  address: '',
  userName: '',
  insType: '2',
  class: 'night',
});
let insTypeList = reactive<any[]>([
  { label: '一次', value: '1' },
  { label: '两次', value: '2' },
]);
let classList = reactive<any[]>([
  { label: '夜班', value: 'night' },
  { label: '早班', value: 'early' },
  { label: '中班', value: 'noon' },
]);
let Columns = ref<any[]>(gaspatrolColumnsOne);
let gaspatrolTableData = ref<any[]>([]);
let $emit = defineEmits(['locate','getSearch']);
//巡检类型选项切换
let insTypeChange = (val) => {
  searchData.insType = val;
  if (val == '1') {
    Columns.value = gaspatrolColumnsOne;
  } else {
    Columns.value = gaspatrolColumnsTwo;
  }
};
//定位
function handlerLocation(record) {
  $emit('locate', record);
}
//查询
let getSearch = () => {
  queryNowGasInsInfoList()
  $emit('getSearch', searchData);
};
//重置
let getReset = () => {
  searchData.address = '';
  searchData.class = '';
  searchData.insType = '';
  searchData.userName = '';
  queryNowGasInsInfoList()
};
//查询当前各班瓦斯巡检信息
async function queryNowGasInsInfoList() {
  let res = await queryNowGasInsInfo(searchData);
  console.log(res, '查询当前各班瓦斯巡检信息');
  if (res.length) {
    if (searchData.insType == '1' && searchData.class == 'early') {
      gaspatrolTableData.value = res.map((el: any) => {
        return {
          strInstallPos: el.strInstallPos,
          ch4One: el.ch4Early1,
          co2One: el.co2Early1,
          coOne: el.coEarly1,
          o2One: el.o2Early1,
          tOne: el.tearly1,
          timeOne: el.timeEarly1,
          checkPerson: el.checkPersonEarly,
        };
      });
    } else if (searchData.insType == '2' && searchData.class == 'early') {
      gaspatrolTableData.value = res.map((el: any) => {
        return {
          strInstallPos: el.strInstallPos,
          ch4One: el.ch4Early1,
          co2One: el.co2Early1,
          coOne: el.coEarly1,
          o2One: el.o2Early1,
          tOne: el.tearly1,
          timeOne: el.timeEarly1,
          ch4Two: el.ch4Early2,
          co2Two: el.co2Early2,
          coTwo: el.coEarly2,
          o2Two: el.o2Early2,
          tTwo: el.tearly2,
          timeTwo: el.timeEarly2,
          checkPerson: el.checkPersonEarly,
        };
      });
    } else if (searchData.insType == '1' && searchData.class == 'noon') {
      gaspatrolTableData.value = res.map((el: any) => {
        return {
          strInstallPos: el.strInstallPos,
          ch4One: el.ch4Noon1,
          co2One: el.co2Noon1,
          coOne: el.coNoon1,
          o2One: el.o2Noon1,
          tOne: el.tnoon1,
          timeOne: el.timeNoon1,
          checkPerson: el.checkPersonNoon,
        };
      });
    } else if (searchData.insType == '2' && searchData.class == 'noon') {
      gaspatrolTableData.value = res.map((el: any) => {
        return {
          strInstallPos: el.strInstallPos,
          ch4One: el.ch4Noon1,
          co2One: el.co2Noon1,
          coOne: el.coNoon1,
          o2One: el.o2Noon1,
          tOne: el.tnoon1,
          timeOne: el.timeNoon1,
          ch4Two: el.ch4Noon2,
          co2Two: el.co2Noon2,
          coTwo: el.coNoon2,
          o2Two: el.o2Noon2,
          tTwo: el.tnoon2,
          timeTwo: el.timeNoon2,
          checkPerson: el.checkPersonNoon,
        };
      });
    } else if (searchData.insType == '1' && searchData.class == 'night') {
      gaspatrolTableData.value = res.map((el: any) => {
        return {
          strInstallPos: el.strInstallPos,
          ch4One: el.ch4Night1,
          co2One: el.co2Night1,
          coOne: el.coNight1,
          o2One: el.o2Night1,
          tOne: el.tnight1,
          timeOne: el.timeNight1,
          checkPerson: el.checkPersonNight,
        };
      });
    } else if (searchData.insType == '2' && searchData.class == 'night') {
      gaspatrolTableData.value = res.map((el: any) => {
        return {
          strInstallPos: el.strInstallPos,
          ch4One: el.ch4Night1,
          co2One: el.co2Night1,
          coOne: el.coNight1,
          o2One: el.o2Night1,
          tOne: el.tnight1,
          timeOne: el.timeNight1,
          ch4Two: el.ch4Night2,
          co2Two: el.co2Night2,
          coTwo: el.coNight2,
          o2Two: el.o2Night2,
          tTwo: el.tnight2,
          timeTwo: el.timeNight2,
          checkPerson: el.checkPersonNoon,
        };
      });
    } else {
      gaspatrolTableData.value = res.map((el: any) => {
        return {
          strInstallPos: el.strInstallPos,
          ch4One: el.ch4Night1,
          co2One: el.co2Night1,
          coOne: el.coNight1,
          o2One: el.o2Night1,
          tOne: el.tnight1,
          timeOne: el.timeNight1,
          checkPerson: el.checkPersonNight,
        };
      });
    }
  } else {
    gaspatrolTableData.value = [];
  }
}

defineExpose({ queryNowGasInsInfoList })

onMounted(() => { });
</script>

<style lang="less" scoped>
@ventSpace: zxm;

.gaspatrolTable {
  .search-area {
    margin: 15px;

    .area-item {
      display: flex;
      align-items: center;

      .item-text {
        color: #fff;
      }
    }
  }

  .zxm-picker,
  .zxm-input {
    border: 1px solid #3ad8ff77;
    background-color: #ffffff00;
    color: #fff;
  }
}

:deep(.@{ventSpace}-table-body) {
  height: auto !important;

  tr>td {
    background: #ffffff00 !important;
  }

  tr.@{ventSpace}-table-row-selected {
    td {
      background: #007cc415 !important;
    }
  }
}

:deep(.jeecg-basic-table .@{ventSpace}-table-wrapper .@{ventSpace}-table-title) {
  min-height: 0;
}

:deep(.@{ventSpace}-pagination) {
  margin-right: 20px !important;
}

:deep(.zxm-table-thead > tr > th:last-child) {
  border-right: 1px solid #91e9fe55 !important;
}
</style>