271 lines
7.2 KiB
Vue
271 lines
7.2 KiB
Vue
<template>
|
||
<div class="m-4 mr-0 overflow-hidden bg-white" style="overflow: auto">
|
||
<div class="flex justify-around items-center form-data m-4">
|
||
<a-input v-model:value="formState.keyWord" placeholder="输入关键字" style="width: 30%" />
|
||
<a-tree-select
|
||
v-model:value="formState.areaid"
|
||
style="width: 30%"
|
||
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
||
:tree-data="treeData"
|
||
:field-names="{ label: 'name', value: 'id' }"
|
||
placeholder="选择行政区划"
|
||
allow-clear
|
||
/>
|
||
<div class="form-button">
|
||
<a-button type="primary" @click="getTaskList">查询</a-button>
|
||
<a-button type="primary" @click="toStatic">统计</a-button>
|
||
<a-button type="primary" @click="toInspection">巡检</a-button>
|
||
</div>
|
||
</div>
|
||
<div class="table-data">
|
||
<div style="width: 100%; text-align: center; padding: 100px 0px" v-if="tasklist.length <= 0">
|
||
<img src="@/assets/images/canvas/noData.png" style="width: 140px; margin-bottom: 20px" />
|
||
<p style="color: #cfcfcf">暂无数据</p>
|
||
</div>
|
||
<div class="clock-item-container" v-else>
|
||
<div class="clock-item" v-for="(item, index) in tasklist" :key="index">
|
||
<div class="clock-item-icon">
|
||
<img src="@/assets/images/meshing/clockIn-bg.png" />
|
||
</div>
|
||
<div class="clock-item-info">
|
||
<p>打卡点名称：{{ item.pointname }}</p>
|
||
<p>创建时间：{{ item.createtime }}</p>
|
||
<p>负责人员：{{ item.usernames }}</p>
|
||
<p style="text-align: right">
|
||
<a-popconfirm
|
||
title="确定删除吗？"
|
||
ok-text="是"
|
||
cancel-text="否"
|
||
@confirm="deleteTask(item.id)"
|
||
>
|
||
<a-button type="primary" danger size="mini">删除</a-button>
|
||
</a-popconfirm>
|
||
<a-button type="primary" round size="mini" @click="editClockInfo(item)"
|
||
>编辑</a-button
|
||
>
|
||
<a-button type="primary" round size="mini" @click="lookClockInfo(item)"
|
||
>查看</a-button
|
||
>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="table-data-pagination m-4">
|
||
<a-pagination
|
||
size="small"
|
||
show-size-changer
|
||
show-quick-jumper
|
||
v-model:current="pageData.current"
|
||
:total="pageData.total"
|
||
@change="paginationOnChange"
|
||
@showSizeChange="onShowSizeChange"
|
||
:show-total="(total) => `共 ${total} 条`"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<EditModal @register="editModal" @success="editSuccess" />
|
||
<a-modal
|
||
v-model:visible="statisticsModalVisible"
|
||
title="统计"
|
||
wrap-class-name="full-modal"
|
||
width="100%"
|
||
:footer="null"
|
||
>
|
||
<StatisticsModel />
|
||
</a-modal>
|
||
<a-modal
|
||
v-model:visible="InspectionModelVisible"
|
||
title="巡检"
|
||
wrap-class-name="full-modal"
|
||
width="100%"
|
||
:footer="null"
|
||
destroyOnClose
|
||
>
|
||
<InspectionModel />
|
||
</a-modal>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { reactive, UnwrapRef, ref, onMounted } from 'vue';
|
||
import { useModal } from '@/components/Modal';
|
||
import { EditModal, StatisticsModel, InspectionModel } from './index';
|
||
import { getCheckPointList, deleteCheckPoint } from '@/api/firegrid/index';
|
||
import { useMessage } from '@/hooks/web/useMessage';
|
||
import { EventBus } from '@/utils/eventBus';
|
||
import { getDeptList } from '@/api/demo/system';
|
||
|
||
const { createMessage } = useMessage();
|
||
const emits = defineEmits(['viewHandle']);
|
||
const [editModal, { openModal: openEidtModal }] = useModal();
|
||
const statisticsModalVisible = ref(false);
|
||
const InspectionModelVisible = ref(false);
|
||
onMounted(() => {
|
||
getTree();
|
||
getTaskList();
|
||
EventBus.on('addCheckPoint', (data) => {
|
||
getTaskList();
|
||
});
|
||
});
|
||
// 查询
|
||
interface FormState {
|
||
keyWord: string | null;
|
||
areaid: string | null;
|
||
}
|
||
interface listObj {
|
||
Id: number;
|
||
PointName: string;
|
||
Lat: string;
|
||
Lng: string;
|
||
CreateTime: string;
|
||
CreateUserName: string;
|
||
}
|
||
const formState: UnwrapRef<FormState> = reactive({
|
||
keyWord: null,
|
||
areaid: null,
|
||
});
|
||
const treeData: any = ref([]);
|
||
// 分页
|
||
const pageData = reactive({
|
||
total: 100,
|
||
current: 1,
|
||
pageSize: 10,
|
||
});
|
||
const getTree = () => {
|
||
getDeptList().then((res) => {
|
||
treeData.value = res;
|
||
});
|
||
};
|
||
const paginationOnChange = (page: number) => {
|
||
pageData.current = page;
|
||
getTaskList();
|
||
};
|
||
const onShowSizeChange = (current: number, pageSize: number) => {
|
||
pageData.current = current;
|
||
pageData.pageSize = pageSize;
|
||
getTaskList();
|
||
};
|
||
// 列表
|
||
const tasklist = ref<listObj[]>([]);
|
||
const getTaskList = () => {
|
||
const params = {
|
||
page: pageData.current,
|
||
limit: pageData.pageSize,
|
||
pointName: formState.keyWord,
|
||
areaid: formState.areaid,
|
||
};
|
||
EventBus.emit('getPatrolMap', params);
|
||
getCheckPointList(params).then((res) => {
|
||
tasklist.value = res.items;
|
||
pageData.total = res.total;
|
||
});
|
||
};
|
||
// 删除
|
||
const deleteTask = (id) => {
|
||
deleteCheckPoint({ id }).then((res) => {
|
||
if (res) {
|
||
getTaskList();
|
||
return createMessage.success('删除成功');
|
||
} else {
|
||
return createMessage.error('删除成功');
|
||
}
|
||
});
|
||
};
|
||
// 编辑
|
||
const editClockInfo = (row) => {
|
||
openEidtModal(true, {
|
||
isUpdate: true,
|
||
id: row.id,
|
||
});
|
||
};
|
||
// 编辑成功
|
||
const editSuccess = () => {
|
||
getTaskList();
|
||
};
|
||
// 统计
|
||
const toStatic = () => {
|
||
statisticsModalVisible.value = true;
|
||
};
|
||
// 查看
|
||
const lookClockInfo = (row) => {
|
||
emits('viewHandle', row);
|
||
EventBus.emit('inspectionMap', row);
|
||
};
|
||
// 巡检
|
||
const toInspection = () => {
|
||
InspectionModelVisible.value = true;
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.form-button {
|
||
button {
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
.clock-item-container {
|
||
width: calc(100% - 10px);
|
||
height: calc(100% - 40px);
|
||
padding: 0px 15px;
|
||
margin: 15px 0px;
|
||
overflow: auto;
|
||
border-top: 1px solid @border-color-light;
|
||
|
||
.clock-item {
|
||
width: 100%;
|
||
height: 150px;
|
||
margin: 10px 0px;
|
||
padding: 10px 15px;
|
||
border-bottom: 1px solid @border-color-light;
|
||
}
|
||
.clock-item-icon {
|
||
width: 100px;
|
||
height: 80px;
|
||
float: left;
|
||
}
|
||
.clock-item-icon img {
|
||
width: 80px;
|
||
height: 80px;
|
||
margin-top: 6px;
|
||
}
|
||
.clock-item-info {
|
||
float: left;
|
||
width: calc(100% - 100px);
|
||
height: 100px;
|
||
line-height: 18px;
|
||
font-size: 12px;
|
||
button {
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
.clock-item-info p {
|
||
margin-bottom: 0px;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
.table-data {
|
||
position: relative;
|
||
height: calc(100% - 68px);
|
||
.table-data-pagination {
|
||
display: flex;
|
||
justify-content: end;
|
||
position: relative;
|
||
bottom: 0px;
|
||
background-color: @component-background;
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="less" scoped>
|
||
.full-modal {
|
||
.ant-modal {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.ant-modal-content {
|
||
height: calc(100vh);
|
||
}
|
||
|
||
.ant-modal-body {
|
||
height: 80%;
|
||
}
|
||
}
|
||
</style>
|