wbc
2 weeks ago
10 changed files with 303 additions and 17 deletions
@ -0,0 +1,27 @@ |
|||
import { ID, IDS } from '@/api/base'; |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
|
|||
enum Api { |
|||
root = '/air/webSiteNetDataAnalysis', |
|||
list = '/air/webSiteNetDataAnalysis/list', |
|||
} |
|||
|
|||
export function list(params: any) { |
|||
return defHttp.get({ url: Api.list, params }); |
|||
} |
|||
|
|||
export function getInfo(id: ID) { |
|||
return defHttp.get({ url: `${Api.root}/${id}` }); |
|||
} |
|||
|
|||
export function add(data: any) { |
|||
return defHttp.post({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function update(data: any) { |
|||
return defHttp.put({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function removeByIds(ids: IDS) { |
|||
return defHttp.deleteWithMsg({ url: `${Api.root}/${ids.join(',')}` }); |
|||
} |
|||
@ -0,0 +1,53 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
|
|||
export const formSchemas: FormSchema[] = [ |
|||
{ |
|||
field: 'area', |
|||
label: '所在区域', |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: [], |
|||
}, |
|||
}, |
|||
{ |
|||
field: '[startDate, endDate]', |
|||
label: '签到时间', |
|||
component: 'RangePicker', |
|||
componentProps: { |
|||
format: 'YYYY-MM-DD', |
|||
valueFormat: 'YYYY-MM-DD', |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '站点名称', |
|||
dataIndex: 'station', |
|||
}, |
|||
{ |
|||
title: '所属区域', |
|||
dataIndex: 'area', |
|||
}, |
|||
{ |
|||
title: '人员性质', |
|||
dataIndex: 'attribute', |
|||
}, |
|||
{ |
|||
title: '人员姓名', |
|||
dataIndex: 'person', |
|||
}, |
|||
{ |
|||
title: '所属公司', |
|||
dataIndex: 'company', |
|||
}, |
|||
{ |
|||
title: '签到时间', |
|||
dataIndex: 'registerTime', |
|||
}, |
|||
{ |
|||
title: '签到类型', |
|||
dataIndex: 'registerType', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,69 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column && record && column.key === 'action'"> |
|||
<a-popconfirm |
|||
title="确定要删除吗?" |
|||
ok-text="是" |
|||
cancel-text="否" |
|||
@confirm="handleDelete(record.id)" |
|||
> |
|||
<a-button type="link">删除</a-button> |
|||
</a-popconfirm> |
|||
</template> |
|||
</template> |
|||
</BasicTable> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable } from '@/components/Table'; |
|||
import { list, removeByIds } from './api'; |
|||
import { formSchemas, columns } from './data'; |
|||
import {getHangzhouRegions} from '@/api/common/index' |
|||
defineOptions({ name: 'register' }); |
|||
|
|||
const [registerTable, { reload }] = useTable({ |
|||
title: '签到管理', |
|||
api: list, |
|||
showIndexColumn: true, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
name: 'register', |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
immediate: true, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 300, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
//新增编辑删除 |
|||
const handleDelete = async (id: any) => { |
|||
await removeByIds([id]); |
|||
reload(); |
|||
}; |
|||
|
|||
//详情，跳转 |
|||
//下拉框 |
|||
const getHangzhouOptions =async()=>{ |
|||
const res = await getHangzhouRegions() |
|||
formSchemas[0].componentProps.options = res |
|||
} |
|||
getHangzhouOptions() |
|||
|
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,135 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<div id="amapContainer" style="width: 100vw; height: 100vh"> </div> |
|||
<a-modal title="站点详情" :open="visible" @cancel="onClose" width="600px"> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">站点名称：</span>{{ detail.station }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">站点地址：</span>{{ detail.address }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">站点经度：</span>{{ detail.longitude }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">站点纬度：</span>{{ detail.latitude }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">运维人员：</span>{{ detail.ioPerson }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">运维公司：</span>{{ detail.ioCompany }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">当前状态：</span>{{ detail.status }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div style="margin-left: -3%"> |
|||
<a-button type="link" @click="showDrawer(detail.id)">基本信息</a-button> |
|||
</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div style="margin-left: -3%"> |
|||
<a-button type="link" @click="handleCheck(detail.id)">核站信息</a-button> |
|||
</div> |
|||
</a-col> |
|||
</a-row> |
|||
</a-modal> |
|||
<detailDrawer ref="detailDrawerRef" /> |
|||
</PageWrapper> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { onMounted, reactive, ref } from 'vue'; |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import AMapLoader from '@amap/amap-jsapi-loader'; |
|||
import { useGo } from '@/hooks/web/usePage'; |
|||
import detailDrawer from '@/views/station/info/detailDrawer.vue'; |
|||
import { PageEnum } from '@/enums/pageEnum'; |
|||
import { list } from '@/views/station/info/api'; |
|||
const points = ref<any>([]) |
|||
const getList = async() =>{ |
|||
const {rows} = await list({pageNum:1,pageSize:1000}) |
|||
console.log(rows) |
|||
points.value = rows |
|||
} |
|||
getList() |
|||
const detail = reactive({ |
|||
station: '', |
|||
address: '', |
|||
longitude: '', |
|||
latitude: '', |
|||
ioCompany: '', |
|||
ioPerson: '', |
|||
status: '', |
|||
id:null, |
|||
}); |
|||
const visible = ref(false); |
|||
const onClose = () => { |
|||
visible.value = false; |
|||
for (let i in detail) { |
|||
detail[i] = ''; |
|||
} |
|||
}; |
|||
//详情，跳转 |
|||
const detailDrawerRef = ref(); |
|||
const showDrawer = (id: any) => { |
|||
detailDrawerRef.value.showDrawer(id); |
|||
}; |
|||
const go = useGo(); |
|||
const handleCheck = (id: any) => { |
|||
onClose() |
|||
go({ path: '/stationCheck/checkOrder' as PageEnum, query: { stationId:id } }); |
|||
}; |
|||
onMounted(() => { |
|||
AMapLoader.load({ |
|||
key: '786a2e7cc6d4be5ba1d6174a0aa10f2b', |
|||
version: '2.0', |
|||
plugins: [], // 如果需要插件，请在这里添加 |
|||
}) |
|||
.then((AMap) => { |
|||
const map = new AMap.Map('amapContainer', { |
|||
zoom: 10, // 初始化地图层级 |
|||
center: [119.0426, 29.6000], // 初始化地图中心点坐标 |
|||
}); |
|||
|
|||
// 添加标记点 |
|||
points.value.forEach((point) => { |
|||
const marker = new AMap.Marker({ |
|||
position: new AMap.LngLat(point.longitude, point.latitude), |
|||
title: point.station, |
|||
}); |
|||
|
|||
marker.on('click', () => { |
|||
for (let i in detail) { |
|||
detail[i] = point[i]; |
|||
} |
|||
visible.value = true; |
|||
}); |
|||
|
|||
map.add(marker); |
|||
}); |
|||
}) |
|||
.catch((e) => { |
|||
console.error(e); // 错误处理 |
|||
}); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
Loading…
Reference in new issue