wisdomisitezwfront-web/src/views/hz-project/localeMonitor/realTime/index.vue

<template>
	<div class="table-box">
		<ProTable
			ref="proTable"
			title="用户列表"
			:columns="columns"
			:requestApi="getTableList"
			:dataCallback="dataCallback"
			:tool-button="false"
			:pagination="true"
			background
			:initParam="initParam"
			:isShowSearch="false"
		>
		</ProTable>
		<engineeringDrawer v-model="engVisable" ref="engDrawer" :request="getengineering">
			<template #default="{ data }">
				<span style="margin-left: 10px" @click="onUpdate(data)">{{ data.engineeringName }}</span>
			</template>
		</engineeringDrawer>
		<allEngineering @click="engVisable = true" />
	</div>
</template>

<script setup lang="tsx" name="ProjectDustRealTime">
import { ref, reactive } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import ProTable from "@/components/ProTable/index.vue";
import { getRealTimePage } from "@/api/modules/project";
import engineeringDrawer from "@/components/engineeringDrawer/index.vue";
import allEngineering from "@/components/allEngineering/index.vue";
import { getRelevanceList } from "@/api/modules/common";
import { ElMessage, ElMessageBox } from "element-plus";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();
const engVisable = ref(false);
// 表格配置项
const columns: ColumnProps[] = [
	{ type: "index", label: "序号", width: 80 },
	// 多级 prop
	{ prop: "name", label: "设备名称", isShow: false, search: { el: "input" } },
	{ prop: "deviceName", label: "设备名称" },
	{
		prop: "temperature",
		label: "温度",
		render: scoped => {
			return scoped.row.temperature + "℃";
		}
	},
	{
		prop: "windspeed",
		label: "风速",
		render: scoped => {
			return scoped.row.windspeed + "m/s";
		}
	},
	{
		prop: "pm25",
		label: "PM2.5",
		render: scoped => {
			return scoped.row.pm25 + "μg/m³";
		}
	},
	{
		prop: "noise",
		label: "噪音",
		render: scoped => {
			return scoped.row.noise + "db";
		}
	},
	{
		prop: "pm10",
		label: "PM10",
		render: scoped => {
			return scoped.row.pm10 + "μg/m³";
		}
	},
	{
		prop: "humidity",
		label: "湿度",
		render: scoped => {
			return scoped.row.humidity + "%";
		}
	},
	{
		prop: "winddirection",
		label: "风向",
		render: scoped => {
			return scoped.row.winddirection + "风";
		}
	},
	{ prop: "createTime", label: "上报时间" }
];

const initParam = reactive({
	engineeringSn: ""
});

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
	// console.log(data);
	return {
		list: data.records,
		total: Number(data.total),
		pageNo: Number(data.current),
		pageSize: Number(data.size)
	};
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
	let newParams = JSON.parse(JSON.stringify(params));
	return getRealTimePage(newParams);
};
const getengineering = (params: any) => {
	// let newParams = JSON.parse(JSON.stringify(params));
	return getRelevanceList();
};

// 点击抽屉的工程名称更新页面
const onUpdate = async row => {
	initParam.engineeringSn = row.engineeringSn;
	ElMessage.success("页面已更新");
};
</script>