数据分析-管理评估

snowy-admin-web/src/views/motoring/analyse/curve.vue

@@ -75,6 +75,8 @@
 		unitSearchRef.value.onOpen() //获取单位数据
 		monitorSearchRef.value.onOpen() //获取监控点数据
 	})
+
+	// 搜索表单
 	const searchFormState = ref({
 		type: 'qst',
 		isshow: '1'

snowy-admin-web/src/views/motoring/analyse/evaluate.vue

@@ -1,14 +1,185 @@
 <template>
-	<div class="table_item">管理评估</div>
+	<div class="table_item">
+		<s-table ref="tableRef" bordered :columns="columns" :data="loadData" :row-key="(record) => record.code">
+			<template #operator>
+				<div class="table-head">
+					<div class="head-left">
+						<a-form
+							ref="searchFormRef"
+							name="advanced_search"
+							layout="inline"
+							:model="searchFormState"
+							class="ant-advanced-search-form"
+						>
+							<a-form-item label="" name="searchKey">
+								<a-range-picker v-model:value="searchFormState.searchKey" value-format="YYYY/MM/DD" />
+							</a-form-item>
+						</a-form>
+						<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
+						<a-button class="xn-mg08" @click="reset">重置</a-button>
+					</div>
+					<div class="head-right">
+						<a-button>
+							<template #icon><download-outlined /></template>导出
+						</a-button>
+						<a-button>
+							<template #icon><printer-outlined /></template>打印预览
+						</a-button>
+					</div>
+				</div>
+			</template>
+		</s-table>
+	</div>
 </template>
 
 <script setup>
-	import tool from '@/utils/tool'
 	import jobApi from '@/api/dev/jobApi'
+	const tableRef = ref()
+	const searchFormState = ref({})
+
+	const columns = [
+		{
+			title: '部门名称',
+			dataIndex: 'bmmc',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '监控点总数',
+			dataIndex: 'jkdzs',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '报警及处理情况',
+			dataIndex: 'bjzxz',
+			align: 'center',
+			ellipsis: true,
+			children: [
+				{
+					title: '报警总数',
+					dataIndex: 'bjzs',
+					align: 'center',
+					ellipsis: true
+				},
+				{
+					title: '未及时处理次数',
+					dataIndex: 'wjsclcs',
+					align: 'center',
+					ellipsis: true
+				}
+			]
+		},
+
+		{
+			title: '未按规定登录平台次数',
+			dataIndex: 'wagddlptcs',
+			align: 'center',
+			ellipsis: true
+		},
+
+		{
+			title: '冷链管理评估值',
+			dataIndex: 'llglpgz',
+			align: 'center',
+			ellipsis: true
+		}
+	]
+
+	const loadData = (parameter) => {
+		return jobApi.jobPage(Object.assign(parameter, searchFormState.value)).then((res) => {
+			// return res
+			const obj = {
+				current: 1,
+				pages: 1,
+				records: [
+					{
+						bmmc: '上海海关基数中心1',
+						jkdzs: 33,
+						bjzs: 1,
+						wjsclcs: 0,
+						wagddlptcs: 0,
+						llglpgz: 20
+					},
+					{
+						bmmc: '上海海关基数中心2',
+						jkdzs: 21,
+						bjzs: 0,
+						wjsclcs: 2,
+						wagddlptcs: 0,
+						llglpgz: 34
+					},
+					{
+						bmmc: '上海海关基数中心2',
+						jkdzs: 4,
+						bjzs: 6,
+						wjsclcs: 1,
+						wagddlptcs: 1,
+						llglpgz: 10
+					},
+					{
+						bmmc: '上海海关基数中心4',
+						jkdzs: 24,
+						bjzs: 3,
+						wjsclcs: 3,
+						wagddlptcs: 0,
+						llglpgz: 16
+					},
+					{
+						bmmc: '上海海关基数中心5',
+						jkdzs: 15,
+						bjzs: 0,
+						wjsclcs: 0,
+						wagddlptcs: 1,
+						llglpgz: 12
+					},
+					{
+						bmmc: '上海海关基数中心6',
+						jkdzs: 2,
+						bjzs: 0,
+						wjsclcs: 1,
+						wagddlptcs: 1,
+						llglpgz: 31
+					}
+				],
+				size: 10,
+				total: 6
+			}
+			return obj
+		})
+	}
 </script>
 
 <style lang="less" scoped>
 	.table_item {
+		width: 100%;
+		display: flex;
 		padding: 15px 20px;
+
+		// 表格区域
+		.table-wrapper {
+			width: 100%;
+
+			// 搜索及操作按钮区域
+			.table-head {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+
+				.head-left {
+					display: flex;
+				}
+
+				.ant-btn {
+					margin-left: 10px;
+				}
+			}
+		}
+	}
+
+	// 分页居中显示
+	:deep(.ant-table-pagination-right) {
+		justify-content: center !important;
 	}
 </style>