gas-injection/src/views/vent/home/configurable/components/gasInject/zqHistoryExport.vue

<template>
  <div class="history-export">
    <SvgIcon v-if="!isShowIcon" class="icon-style-back" size="32" name="modal-back" @click="handleBack"></SvgIcon>
    <div class="nav-box">
      <div class="nav-search">
        <div class="search-item">
          <span>时间:</span>
          <a-range-picker style="width:300px" v-model:value="searchData.timer" :show-time="{ format: 'HH:mm' }"
            format="YYYY-MM-DD HH:mm" :placeholder="['开始时间', '结束时间']" @change="onRangeChange" />
        </div>
      </div>
      <div class="nav-btn" @click="handleHisExport">
        <div class="nav-text">
          <SvgIcon class="icon-style" size="18" name="gas-export"></SvgIcon>
          <span>数据导出</span>
        </div>
      </div>
    </div>
    <div class="main-content">
      <a-table size="small" :dataSource="dataSource" :columns="tableColumn" :scroll="{ y: 455 }"
        :pagination="pagination">
        <template #action="{ record }">
          <!-- <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a> -->
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { SvgIcon } from '/@/components/Icon';

let props = defineProps({
  //是否显示返回按钮
  isShowIcon: {
    type: Boolean
  },
  tableColumn: {
    type: Array
  }
})

let searchData = reactive({
  timer: '',
})
let dataSource = ref<any[]>([
  { fileName: '测试' },
  { fileName: '测试' },
  { fileName: '测试' },
  { fileName: '测试' },
  { fileName: '测试' },
  { fileName: '测试' },
  { fileName: '测试' },
  { fileName: '测试' },
  { fileName: '测试' },
  { fileName: '测试' },
  { fileName: '测试' },
  { fileName: '测试' },
  { fileName: '测试' },
])
//分页参数配置
let pagination = reactive({
  current: 1, // 当前页码
  pageSize: 15, // 每页显示条数
  total: 0, // 总条目数，后端返回
  // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
  showSizeChanger: true, // 是否可改变每页显示条数
  pageSizeOptions: ['15', '20', '25', '30', '50'], // 可选的每页显示条数
});
let $emit = defineEmits(['handleBack'])

//返回上一级
function handleBack() {
  $emit('handleBack')
}
//导出历史数据
function handleHisExport() { }
//日期切换
function onRangeChange() { }
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

@{theme-deepblue} {
  .history-export {
    --image-inject_zq_monitor: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-3.png');
  }
}

.history-export {
  --image-inject_zq_monitor: url('@/assets/images/gasInjection/9-3.png');
  position: relative;
  width: 100%;
  height: 100%;

  .icon-style-back {
    position: absolute;
    left: 6px;
    top: -44px;
    cursor: pointer;
  }

  .nav-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 39px;
    padding: 0px 20px;
    margin-bottom: 15px;
    background: var(--image-inject_zq_monitor) no-repeat;
    background-size: 100% 100%;
  }

  .nav-search {
    display: flex;
    align-items: center;
    height: 100%;
    color: #fff;
  }

  .search-item {
    margin-right: 40px;
  }

  .nav-btn {
    width: 100px;
    height: 78%;
    padding: 2px;
    border: 1px solid #1081d7;
    cursor: pointer;
    color: #fff;
  }

  .nav-text {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1081d7;
  }

  .icon-style {
    margin-right: 5px;
  }

  .main-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: calc(100% - 54px);
  }
}

:deep(.zxm-picker) {
  background: #0b223f !important;
  border: 1px solid #1081d7 !important;
  border-radius: 4px;
  margin-left: 10px;
}

:deep(.zxm-picker-input > input) {
  color: #fff;
}

:deep(.zxm-picker-separator) {
  color: #fff;
}

:deep(.zxm-select) {
  color: #fff !important;
}

:deep(.zxm-select-selector) {
  background: #0b223f !important;
  border: 1px solid #1081d7 !important;
  border-radius: 4px;
  margin-left: 10px;
}


:deep(.zxm-table-header) {
  border-left: 1px solid #2896ca !important;
  border-right: 1px solid #2896ca !important;
}

:deep(.zxm-table-thead > tr > th:last-child) {
  border-right: 1px solid #2896ca !important;
}

:deep(.zxm-table-tbody > tr) {
  &:nth-child(odd) {
    td {
      background-color: #0d2c50 !important;
    }

  }

  &:nth-child(even) {
    td {
      background-color: #0d233f !important;
    }

  }
}

:deep(.zxm-table-tbody > tr > td) {
  border-color: transparent !important;
  background: #0a2140 !important;
}
</style>