vent-forewarn-micro/src/views/vent/fire/warnRecordFire/index.vue

<template>
  <div class="warnRecordFire">
    <div class="record-left">
      <basicTree :treeData="treeData" @selectChange="selectChange"></basicTree>
    </div>
    <div class="record-right">
      <div class="search-box">
        <div class="search-label">监测日期 ：</div>
        <div class="search-time">
          <a-range-picker v-model:value="TimeRange" :format="dateFormat" @change="onDataChange" />
        </div>
      </div>
      <div class="content-record">
        <a-table size="small" :dataSource="dataSource" :columns="columns" :scroll="{ y: 730 }" :pagination="pagination"
          @change="pageChange">

          <template #action="{ record }">
            <a-button type="link" style="color:#3DF6FF">
              查看
            </a-button>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import basicTree from '../../common/basicTree.vue'
import { getFireAreaInfo, getFireWarnHistory } from './warnRecordFire.api'
import {columns} from './warnRecordFire.data'
import dayjs, { Dayjs } from 'dayjs';

let areaCode = ref('')
let treeData = reactive<any[]>([])

let dateFormat = ref('YYYY-MM-DD');
let TimeRange = ref<[Dayjs, Dayjs]>([dayjs(dayjs(new Date().getTime()).format('YYYY-MM-DD'), dateFormat.value), dayjs(dayjs(new Date().getTime() + 24 * 60 * 60 * 1000).format('YYYY-MM-DD'), dateFormat.value)])

let dataSource = ref<any[]>([])

let pagination = reactive({
  current: 1, // 当前页码
  pageSize: 10, // 每页显示条数
  total: 0, // 总条目数，后端返回
  // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
  showSizeChanger: true, // 是否可改变每页显示条数
  pageSizeOptions: ['10', '20', '50',], // 可选的每页显示条数
})

//获取树形菜单数据
async function getTreeList() {
  let res = await getFireAreaInfo({})
  console.log(res, 'tree列表')
  if (res.length != 0) {
    treeData.length = 0
    res.forEach(el => {
      treeData.push({ name: el.areaName, value: el.ind, id: el.ind, pid: null, areaCode: el.areaCode, warningLevel: el.warningLevel })
    })
    areaCode.value = areaCode.value ? areaCode.value : treeData[0]['areaCode']
  }
}
//树形菜单选项切换
function selectChange(treeNode) {
  console.log(treeNode, 'treeNode--------')
  pagination.current = 1
  dataSource.value = dataSource.value.filter(v => v.areaName == treeNode.node.dataRef.title)
}
//时间选项切换
function onDataChange(value, dateString) {
  TimeRange.value = [value[0], value[1]]
}

//获取预警记录
async function getFireWarnHistoryList() {
  let ttime_begin = `${dayjs(TimeRange.value[0]).format('YYYY-MM-DD')} 00:00:00`
  let ttime_end = `${dayjs(TimeRange.value[1]).format('YYYY-MM-DD')} 00:00:00`
  let res = await getFireWarnHistory({ pageNo: pagination.current, pageSize: pagination.pageSize, ttime_begin: ttime_begin, ttime_end: ttime_end })
  console.log(res, '预警记录------------')
  if (res.result.records.length != 0) {
    res.result.records.forEach(el => {
      el.zhType = '火灾'
      el.isLk = '未联控'
    })
    dataSource.value = res.result.records
    pagination.total = res.result.total
  }
}
//分页切换
function pageChange(page,page1) {
  console.log(page,page1,'page------')
  pagination.current=page.current
  pagination.pageSize=page.pageSize
}

onMounted(() => {
  getTreeList()
  getFireWarnHistoryList()
})
</script>

<style lang="less" scoped>
.warnRecordFire {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 20px);
  height: 928px;
  margin: 0 10px;
  background: #282828;

  .record-left {
    width: 220px;
    height: 100%;
    background-color: rgb(27 35 39 / 80%);
  }

  .record-right {
    box-sizing: border-box;
    width: calc(100% - 230px);
    height: 100%;
    margin-left: 10px;
    padding: 15px 10px;
    overflow-y: auto;
    background-color: rgb(27 35 39 / 80%);

    .search-box {
      display: flex;
      box-sizing: border-box;
      align-items: center;
      width: 100%;
      height: 60px;
      padding: 0 15px;
    }
  }

}

:deep(.vMonitor-table) {
  background-color: transparent;
  color: #fff;
}

:deep(.vMonitor-table-wrapper .vMonitor-table-thead >tr>th) {
  padding: 4px 0;
  border-bottom: none;
  background: rgb(34 127 173/ 50%);
  color: #04ffdb;
}

:deep(.vMonitor-table-thead >tr>th:not(:last-child):not(.vMonitor-table-selection-column):not(.vMonitor-table-row-expand-icon-cell):not([colspan])::before) {
  background: transparent;
}

:deep(.vMonitor-table-wrapper .vMonitor-table-cell-scrollbar:not([rowspan])) {
  box-shadow: none;
}

:deep(.vMonitor-table-wrapper .vMonitor-table:not(.vMonitor-table-bordered) .vMonitor-table-tbody >tr >td) {
  border-top: none;
}

:deep(.vMonitor-table.vMonitor-table-small .vMonitor-table-tbody>tr>td) {
  padding: 4px 8px;
}

:deep(.vMonitor-table-wrapper .vMonitor-table-tbody >tr >td.vMonitor-table-cell-row-hover) {
  background: rgb(38 74 96) !important;
}

:deep(.vMonitor-table-wrapper .vMonitor-table-tbody >tr.vMonitor-table-row:hover>td) {
  background: rgb(38 74 96) !important;
}
</style>