|
@@ -0,0 +1,176 @@
|
|
|
+<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>
|