update
This commit is contained in:
zk
@@ -1,178 +1,188 @@
|
||||
<template>
|
||||
<div>
|
||||
<public-title title="预警"/>
|
||||
<div class="inner-screen">
|
||||
<a-table
|
||||
class="ant-table-striped"
|
||||
:dataSource="tableInfo.dataSource"
|
||||
:columns="tableInfo.columns"
|
||||
:pagination="tableInfo.pagination"
|
||||
:rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
|
||||
>
|
||||
<template #address="{text,record}">
|
||||
<div class="police-times">
|
||||
<span class="police-text">{{ record.address }}</span>
|
||||
<span class="police-icon" @click="handlePoliceDetail(record)"></span>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
<div>
|
||||
<public-title title="预警" />
|
||||
<div class="inner-screen">
|
||||
<a-table
|
||||
:scroll="{
|
||||
y: tableHeight,
|
||||
}"
|
||||
style="overflow-y: auto"
|
||||
:columns="monitorColumns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="pagination"
|
||||
:rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
|
||||
class="ant-table-striped"
|
||||
>
|
||||
<template #address="{ text, record }">
|
||||
<div class="police-times" @click="handlePoliceDetail(record)">
|
||||
<span class="position"></span>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import { getMonitorList } from '/@/components/secondaryScreen/commonApi.ts';
|
||||
import { monitorColumns } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
|
||||
import $bus from '/@/utils/bus.ts';
|
||||
import { earlyWarning } from '/@/utils/busConstant.ts';
|
||||
|
||||
const tableInfo = ref({
|
||||
dataSource: [
|
||||
{
|
||||
key: '1',
|
||||
name: '胡彦斌',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: '住址',
|
||||
key: 'address',
|
||||
align: 'center',
|
||||
slots: {customRender: 'address'}
|
||||
},
|
||||
],
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 2,
|
||||
total: 10,
|
||||
},
|
||||
});
|
||||
const tableHeight = ref(0);
|
||||
const dataSource = ref([]);
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
onChange: pageChange,
|
||||
});
|
||||
|
||||
function handlePoliceDetail(record) {
|
||||
console.log(record)
|
||||
}
|
||||
function handlePoliceDetail(record) {
|
||||
$bus.emit(earlyWarning, record);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
setHeight();
|
||||
window.addEventListener('resize', setHeight);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', setHeight);
|
||||
});
|
||||
|
||||
function setHeight() {
|
||||
tableHeight.value = document.querySelector('.inner-screen').getBoundingClientRect().height - 60;
|
||||
}
|
||||
|
||||
async function init() {
|
||||
const { pageSize, current } = pagination.value;
|
||||
const { code, result } = await getMonitorList({ pageSize, pageNo: current });
|
||||
if (code == 200) {
|
||||
dataSource.value = [...result.records, ...result.records.map((item, i) => ({ ...item, id: item.id + i }))];
|
||||
pagination.value.total = result.total * 2;
|
||||
}
|
||||
}
|
||||
|
||||
function pageChange(page, pageS) {
|
||||
pagination.value.current = page;
|
||||
pagination.value.pageSize = pageS;
|
||||
init();
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner-screen {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
margin: 20px 0;
|
||||
<style lang="less" scoped>
|
||||
.inner-screen {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
margin: 20px 0;
|
||||
|
||||
.police-times {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.police-times {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer !important;
|
||||
|
||||
.police-text {
|
||||
padding-right: 20px;
|
||||
.position {
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url('/@/assets/img/position.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-thead) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:deep(.ant-table) {
|
||||
background-color: transparent;
|
||||
//pointer-events: none;
|
||||
}
|
||||
|
||||
:deep(.ant-table-tbody > tr > td) {
|
||||
border-bottom: none;
|
||||
padding: 6px 4px;
|
||||
}
|
||||
|
||||
:deep(.ant-table-row:hover) {
|
||||
background-color: transparent;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.police-icon {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url('/@/assets/images/terminal.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
//奇行
|
||||
.ant-table-striped :deep(.table-striped) td {
|
||||
background-color: #0a0a0c;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-thead) {
|
||||
display: none !important;
|
||||
}
|
||||
//偶行
|
||||
.ant-table-striped :deep(.table-default) td {
|
||||
color: #ffffff;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
:deep(.ant-table) {
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
//奇行-hover
|
||||
:deep(.ant-table-tbody > tr.ant-table-row.table-striped:hover > td, .ant-table-tbody > tr > td.table-striped) {
|
||||
background-color: #0a0a0c !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
:deep(.ant-table-tbody > tr > td) {
|
||||
border-bottom: none;
|
||||
}
|
||||
//偶行-hover
|
||||
:deep(.ant-table-tbody > tr.ant-table-row.table-default:hover > td, .ant-table-tbody > tr > td.table-default) {
|
||||
color: #ffffff;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
:deep(.ant-table-row:hover) {
|
||||
background-color: transparent;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
// 分页
|
||||
:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
|
||||
background-color: #1f2935;
|
||||
color: #8291a9;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ant-table-striped :deep(.table-striped) td {
|
||||
background-color: #0a0a0c;
|
||||
color: #ffffff;
|
||||
}
|
||||
:deep(.ant-pagination-item) {
|
||||
background-color: #1f2935;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ant-table-striped :deep(.table-default) td {
|
||||
color: #ffffff;
|
||||
}
|
||||
// 当前页选中的样式
|
||||
:deep(.ant-pagination-item-active) {
|
||||
background-color: #0081ff;
|
||||
}
|
||||
|
||||
// 分页
|
||||
:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
|
||||
background-color: #1f2935;
|
||||
color: #8291a9;
|
||||
border: none;
|
||||
}
|
||||
:deep(.ant-pagination-item-active a) {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
:deep(.ant-pagination-item) {
|
||||
background-color: #1f2935;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
:deep(.ant-pagination-item a) {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
// 当前页选中的样式
|
||||
:deep(.ant-pagination-item-active) {
|
||||
background-color: #0081ff;
|
||||
}
|
||||
:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
|
||||
color: #ffffff;
|
||||
background-color: #1f2935;
|
||||
}
|
||||
|
||||
:deep(.ant-pagination-item-active a) {
|
||||
color: #ffffff;
|
||||
}
|
||||
// 省略样式
|
||||
:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
:deep(.ant-pagination-item a) {
|
||||
color: #ffffff;
|
||||
}
|
||||
// 省略鼠标移入样式
|
||||
:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon) {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
|
||||
color: #ffffff;
|
||||
background-color: #1f2935;
|
||||
}
|
||||
|
||||
// 省略样式
|
||||
:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
// 省略鼠标移入样式
|
||||
:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon) {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
// 下一页
|
||||
:deep(.ant-pagination-next .ant-pagination-item-link) {
|
||||
background-color: #1f2935;
|
||||
color: #8291a9;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
// 下一页
|
||||
:deep(.ant-pagination-next .ant-pagination-item-link) {
|
||||
background-color: #1f2935;
|
||||
color: #8291a9;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user