qingtian-report-ui/src/views/syslog/zbmessage/index.vue

<template>
	<div class="app-container app-container-bg">
		<el-card class="first-card" ref='firstCard' shadow="always">
			<el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
				<el-form-item label="站点" prop="stnmId">
					<el-select clearable filterable v-model="queryParams.stnmId" placeholder="请选择站点" @change="dataChange">
						<el-option v-for="dict in stationList" :key="dict.stnmId" :label="dict.stnm" :value="dict.stnmId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="归属地区" prop="code">
					<el-select class="menu-panel-select-item" v-model="queryParams.code" filterable placeholder="请选择" style="width: 200px" :popper-append-to-body="false">
						<el-option v-for="item in stcdAreaOption" :label="item.fullName" :value="item.code" :key="item.code"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="开始时间">
					<el-date-picker v-model="queryParams.startTime" type="date" placeholder="选择开始时间" value-format="YYYY-MM-DD" class="w200">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="结束时间">
					<el-date-picker v-model="queryParams.endTime" type="date" placeholder="选择结束时间" value-format="YYYY-MM-DD" class="w200">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="数据类型" prop="type">
					<el-select v-model="queryParams.type" placeholder="请选择状态" @change="dataChange">
						<el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
					<el-button icon="Refresh" @click="resetQuery">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<div class="el-card-p card-shadow carder-border mt10 pad10 ">
			<el-table class="table-box" v-table-height v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
				<el-table-column type="index" width="60" :align="alignment" label="序号" />
				<el-table-column label="站点名称" :align="alignment" prop="stnm" />
				<el-table-column label="时间" :align="alignment" prop="startTime" />
				<el-table-column label="数据类型" :align="alignment" prop="type"> </el-table-column>
				<el-table-column label="未处理" :align="alignment" prop="dealValue" />
				<el-table-column label="已处理" :align="alignment" prop="unDealValue" />
				<el-table-column label="数据插补" :align="alignment" prop="errOneValue" />
				<el-table-column label="副站数据填充" :align="alignment" prop="errTwoValue" />
				<el-table-column label="操作" :align="alignment" class-name="small-padding fixed-width">
					<template #default="scope">
						<el-button type="text" icon="View" @click="handleShow(scope.row)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.limit" @pagination="getList" />
		</div>
		<el-dialog class="custom-dialog" :title="title" v-model="open" width="500px" append-to-body>
			<el-table v-loading="loadingDetail" border :data="dataListDetail" height="500">
				<el-table-column min-width="50" :align="alignment" label="序号"> </el-table-column>
				<el-table-column label="站点名称" :align="alignment" prop="stnm" />
				<el-table-column label="时间" :align="alignment" width="180">
					<template #default="scope">
						<span>{{ parseTime(scope.row.tm) }}</span>
					</template>
				</el-table-column>
				<el-table-column label="整编信息" width="200" :align="alignment" prop="comment" />
				<el-table-column label="数据类型" :align="alignment" prop="type">
					<template #default="scope">
						<div v-for="item in types">
							<span v-if="item.value === scope.row.type">{{item.label}}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="数值" :align="alignment" prop="value" />
				<el-table-column label="状态" :align="alignment" prop="isDeal">
					<template #default="scope">
						<span v-if="scope.row.isDeal != 'y'" class="red">待确认</span>
						<span v-if="scope.row.isDeal == 'y'" class="green">已确认</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" :align="alignment" class-name="small-padding fixed-width" width="120">
					<template #default="scope">
						<el-button type="text" icon="View" @click="handleShow(scope.row)">详情</el-button>
						<el-button v-if="scope.row.isDeal !== 'y'" type="text" icon="Check" @click="handleUpdate(scope.row)">确认</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>
<script setup>
	import dayjs from 'dayjs'
	import {
		ref,
		reactive,
		onMounted,
	} from 'vue'

	const {
		proxy
	} = getCurrentInstance()
	// const { } = proxy.useDict('')
	const alignment = 'center'
	const showSearch = ref(true)
	const queryParams = reactive({
		page: 1,
		limit: 10,
		stnmId: "",
		pType: "",
		startTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
		endTime: dayjs().format('YYYY-MM-DD'),
		isDeal: 'n',
		type: 'yc_pd_rain',
	})
	const loading = ref(false)
	const total = ref(0)
	const dataList = ref([])
	const getList = async () => {
		loading.value = true;
		try {
			const res = await proxy.axiosGet('/zb/message/infoList', queryParams)
			if (res.code == 200) {
				dataList.value = res.data
				total.value = res.count
			}
			loading.value = false
		} catch (error) {
			loading.value = false
		}
	}
	/** 搜索按钮操作 */
	const handleQuery = () => {
		queryParams.pageNum = 1
		getList()
	}
	const resetQuery = () => {
		proxy.resetForm("queryForm");
		handleQuery();
	}

	// 多选框选中数据
	let ids = ref([])
	let names = ref([])
	let single = ref(true)
	let multiple = ref(true)
	const handleSelectionChange = (selection) => {
		ids.value = selection.map(item => item.id)
		console.log(ids.value, '===')
		names.value = selection.map(item => item.stnm)
		single.value = selection.length !== 1
		multiple.value = !selection.length
	}
	/** 新增按钮操作 */
	const open = ref(false)
	const title = ref("")
	const handleAdd = () => {
		reset();
		open.value = true;
		title.value = "添加警戒水位信息";
	}
	/** 修改按钮操作 */
	const form = reactive({})
	const rules = reactive({})
	const handleUpdate = async (row) => {
		reset();
		let id = row.id || ids.value
		try {
			let res = await proxy.axiosGet('/basic/warnlevel/' + id);
			if (res.code === 200) {
				Object.assign(form, res.data);
				open.value = true;
				title.value = "修改警戒水位信息";
			}
		} catch (error) {
			console.log(error)
		}
	}
	/** 删除按钮操作 */
	const handleDelete = (row) => {
		let stnms = row.stnm || names.value
		const stnmIds = row.id || ids.value;
		proxy.$modal.confirm('是否确认删除站点名称为"' + stnms + '"的数据项？').then(async function () {
			let res = await proxy.axiosDelete('/basic/warnlevel/' + stnmIds);
			if (res.code === 200) {
				proxy.$modal.msgSuccess("删除成功");
				getList();
			}
		})
	}
	/** 导出按钮操作 */
	const handleExport = async () => {
		var p = {
			pageNum: 1,
			pageSize: 9999,
			stnm: queryParams.stnm
		}
		var res = await proxy.axiosGet('/basic/warnlevel/list', p);
		if (res.code === 200) {
			var table = [];
			table.push({
				A: "站点编码",
				B: "站点名称",
				C: "开始日期",
				D: "结束日期",
				E: "警戒水位值"
			});
			res.rows.forEach(d => {
				var row = {
					A: d.staid,
					B: d.stnm,
					C: d.startTime,
					D: d.endTime,
					E: d.value
				};
				table.push(row);
			});
			var header = ["A", "B", "C", "D", "E"];
			var fileName = "警戒水位列表";
			proxy.exportExcel(header, table, fileName);
		}
	}
	/*************************************************************  弹窗  ***************************************/
	let formRef = ref(null)
	let biaoshi = ref(
		[{
			flag: '水库水位',
			value: '1'
		}, {
			flag: '河道水位',
			value: '2'
		}]
	)
	const stationList = ref([])
	const getStnmandStnmId = async () => {
		let res = await proxy.axiosGet('/basic/warnlevel/queryStnmandStnmId');
		if (res.code === 200) {
			stationList.value = res.data
		}
	}
	// 取消按钮
	const cancel = () => {
		open.value = false;
		reset();
	}
	const reset = () => {
		Object.assign(form, {
			tm: null,
			stnmId: null,
			correctionValue: null,
		});
		proxy.resetForm("formRef");
	}
	/** 提交按钮 */
	const submitForm = async (formEl) => {
		if (!formEl) return
		await formEl.validate((valid, fields) => {
			if (valid) {
				if (form.id != null) {
					editMethod();
				} else {
					addMethod();
				}
			}
		})
	}
	const btnLoading = ref(false)
	// 警戒水位新增方法
	const addMethod = async () => {
		btnLoading.value = true
		try {
			let res = await proxy.axiosPost('/basic/warnlevel', form);
			if (res.code === 200) {
				proxy.$modal.msgSuccess("新增成功");
				open.value = false;
				getList();
				btnLoading.value = false
			}
		} catch (error) {
			btnLoading.value = false
		}
	}
	// 警戒水位修改方法
	const editMethod = async () => {
		btnLoading.value = true
		try {
			let res = await proxy.axiosPut('/basic/warnlevel', form);
			if (res.code === 200) {
				proxy.$modal.msgSuccess("修改成功");
				open.value = false;
				getList();
				btnLoading.value = false
			}
		} catch (error) {
			btnLoading.value = false
		}
	}


	// 获取归属地区下拉框数据
	const stcdAreaOption = ref([])
	const getDivision = async () => {
		try {
			const res = await proxy.axiosGet('/basic/info/getDivision')
			stcdAreaOption.value = res.data;
		} catch (error) {

		}
	}
	onMounted(() => {
		getList()
		getStnmandStnmId()
		// getDivision()
	})
	const types = ref([
		{
			value: "yc_pd_rain",
			label: "雨情"
		},
		{
			value: "yc_pd_rsvr",
			label: "水库"
		},
		{
			value: "yc_pd_river",
			label: "河道"
		},
		{
			value: "yc_pd_q_qflow",
			label: "流量"
		},
		{
			value: "yc_pd_tide",
			label: "潮位"
		},
	])
</script>