fix:告警管理，页面展示调整，接口对接联调 (84461e5b) · Commits · AI云守 / ai-yunshou-vue · GitLab

src/views/alarmControl/components/form.vue

0 → 100644

+157 −0

Original line number	Original line	Diff line number	Diff line
			<template>
			<el-dialog
			v-model="open"
			:title="title"
			width="800px"
			append-to-body
			>
			<el-descriptions
			class="margin-top"
			title=""
			:column="1"
			:size="size"
			border
			>
			<el-descriptions-item>
			<template #label>
			<div class="cell-item">
			预警等级
			</div>
			</template>
			{{form.alarmLevelId}}
			</el-descriptions-item>
			<el-descriptions-item>
			<template #label>
			<div class="cell-item">
			预警类型
			</div>
			</template>
			{{form.alarmType}}
			</el-descriptions-item>
			<el-descriptions-item>
			<template #label>
			<div class="cell-item">
			预警时间
			</div>
			</template>
			{{ changeTime(form.alarmTime) }}
			</el-descriptions-item>
			<el-descriptions-item>
			<template #label>
			<div class="cell-item">
			预警图片
			</div>
			</template>
			<ImagePreview style="width: 400px;height: 225px;" :src="form.alarmImg"/>
			</el-descriptions-item>
			</el-descriptions>
			<template #footer>
			<div class="dialog-footer">
			<el-button @click="cancel">取消</el-button>
			</div>
			</template>
			</el-dialog>
			</template>

			<script setup>
			import { listAlarm, detailAlarm } from "@/api/alarmControl/index.js";
			import moment from 'moment'
			const { proxy } = getCurrentInstance();
			const emit = defineEmits();
			const open = ref(false);
			const title = ref("");
			const ids = ref([]);
			const data = reactive({
			form: {},
			queryParams: {
			pageNum: 1,
			pageSize: 10,
			algorithmEnglish: undefined,
			algorithmName: undefined,
			status: undefined
			},
			rules: {
			algorithmName: [{ required: true, message: "算法名称不能为空", trigger: "blur" }],
			algorithmEnglish: [{ required: true, message: "算法英文不能为空", trigger: "blur" }],
			algorithmPlat: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
			}
			});

			const { queryParams, form, rules } = toRefs(data);


			function changeTime(val){
			return moment(val).format('YYYY/MM/DD HH:mm:ss')
			}

			function getImageUrl(url){
			form.value.cardImg=url
			console.log("🚀 ~ getImageUrl ~ orm.cardImg:", form)
			}

			/** 表单重置 */
			function reset() {
			form.value = {
			id: undefined,
			algorithmEnglish: undefined,
			algorithmName: undefined,
			algorithmPlat: 0,
			status: "0",
			remark: undefined
			};
			proxy.resetForm("algRef");
			}


			/** 新增按钮操作 */
			function handleAdd() {
			reset();
			open.value = true;
			title.value = "添加算法";
			}

			/** 修改按钮操作 */
			function handleUpdate(row) {
			reset();
			const id = row.id \|\| ids.value;
			detailAlarm(id).then(response => {
			form.value = response.data;
			open.value = true;
			title.value = "预警详情";
			});
			}

			/** 提交按钮 */
			function submitForm() {
			proxy.$refs["algRef"].validate(valid => {
			if (valid) {
			if (form.value.id != undefined) {
			updateAlg(form.value).then(response => {
			proxy.$modal.msgSuccess("修改成功");
			open.value = false;
			emit("getList");
			});
			} else {
			addAlg(form.value).then(response => {
			proxy.$modal.msgSuccess("新增成功");
			open.value = false;
			emit("getList");
			});
			}
			}
			});
			}
			/** 取消按钮 */
			function cancel() {
			open.value = false;
			reset();
			}
			defineExpose({ handleAdd , handleUpdate })
			</script>

			<style scoped lang="scss">
			// .el-upload--picture-card 控制加号部分
			:deep(.hide .el-upload--picture-card) {
			display: none;
			}
			</style>
			No newline at end of file

src/views/alarmControl/index.vue

+63 −48

Original line number	Original line	Diff line number	Diff line
	@@ -3,7 +3,7 @@
	<TabTitle :text="nowText" />		<TabTitle :text="nowText" />
	<el-row :gutter="10">		<el-row :gutter="10">
	<el-col :xs="24" :sm="24" :md="24" :lg="24">		<el-col :xs="24" :sm="24" :md="24" :lg="24">
	<el-scrollbar height="700px">		<el-scrollbar height="730px">
	<el-card class="right-list">		<el-card class="right-list">
	<template v-slot:header>		<template v-slot:header>
	<el-form :model="queryParams" ref="queryRef" :inline="true" >		<el-form :model="queryParams" ref="queryRef" :inline="true" >
	@@ -28,12 +28,12 @@
	></el-date-picker>		></el-date-picker>
	</el-form-item>		</el-form-item>
	<el-form-item label="算法场景" prop="applicationScenarios">		<el-form-item label="算法场景" prop="applicationScenarios">
	<el-select v-model="queryParams.deptName" placeholder="请选择所属部门" clearable style="width: 200px">		<el-select v-model="queryParams.applicationScenarios" placeholder="请选择算法场景" clearable style="width: 200px">
	<el-option		<el-option
	v-for="dict in algList"		v-for="disc in algorithm_scen"
	:key="dict.id"		:key="disc.value"
	:label="dict.algorithmName"		:label="disc.label"
	:value="dict.id"		:value="disc.value"
	/>		/>
	</el-select>		</el-select>
	</el-form-item>		</el-form-item>
	@@ -48,57 +48,60 @@
	<el-button		<el-button
	type="primary"		type="primary"
	plain		plain
			@click="changeDivision(12,4)"
	>四分屏</el-button>		>四分屏</el-button>
	</el-col>		</el-col>
	<el-col :span="1.5">		<el-col :span="1.5">
	<el-button		<el-button
	type="primary"		type="primary"
	plain		plain
			@click="changeDivision(8,6)"
	>六分屏</el-button>		>六分屏</el-button>
	</el-col>		</el-col>
	<el-col :span="1.5">		<el-col :span="1.5">
	<el-button		<el-button
	type="primary"		type="primary"
	plain		plain
			@click="changeDivision(6,12)"
	>十二分屏</el-button>		>十二分屏</el-button>
	</el-col>		</el-col>
	</el-row>		</el-row>
	<div class="alg-list" >		<div class="alg-list" >
	<el-card v-for="item in algList" :key="item.name" class="alg-item" shadow="hover" >		<el-row :gutter="10">
	<!-- <template v-slot:header>		<el-col :span="division" v-for="item in algList" :key="item.name">
	<div class="cleartitle">		<el-card class="alg-item" shadow="hover" >
	<span>{{item.algorithmName}}</span>
	<el-tag
	:type="'success'"
	effect="dark"
	>
	{{ 'success'}}
	</el-tag>
	</div>
	</template> -->
	<template v-slot:default >		<template v-slot:default >
	<div style="width: 100%;max-height: 200px;overflow: hidden;">		<div style="width: 100%;overflow: hidden;">
	<img		<ImagePreview style="width: 100%;" :src="item.alarmImg"/>
	:src="'http://192.168.4.206' +item.alarmImg"
	style="width: 100%;"
	/>
	</div>		</div>
	<h2>{{ item.alarmType }}</h2>		<h2>{{ item.alarmType }}</h2>
	<p style="color: #999999;font-size: 12px;">		<p style="color: #999999;font-size: 12px;">
	{{ changeTime(item.alarmTime) }}		{{ changeTime(item.alarmTime) }}
	</p>		</p>
	<div style="display: flex;justify-content: flex-end;position: absolute;right: 15px;bottom: 10px;" >		<div style="display: flex;justify-content: flex-end;position: absolute;right: 15px;bottom: 10px;" >
	<el-button link type="primary" icon="Edit" @click.stop="handleUpdate(item)" >详情</el-button>		<el-button link type="primary" icon="Edit" @click.stop="handleDetials(item)" >详情</el-button>
	<!-- <el-button link type="primary" icon="Edit" @click.stop="handleUpdate(item)" >修改</el-button>		<!-- <el-button link type="primary" icon="Edit" @click.stop="handleUpdate(item)" >修改</el-button>
	<el-button link type="primary" icon="Delete" @click.stop="handleDelete(item)">删除</el-button> -->		<el-button link type="primary" icon="Delete" @click.stop="handleDelete(item)">删除</el-button> -->
	</div>		</div>
	</template>		</template>
	</el-card>		</el-card>
			</el-col>
			</el-row>

	</div>		</div>
			<pagination
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
			:layout="'total, prev, pager, next, jumper'"
			/>
	</el-card>		</el-card>
	</el-scrollbar>		</el-scrollbar>
	</el-col>		</el-col>
	</el-row>		</el-row>
			<alarmDetial ref="alarmDetialRef"/>
	</div>		</div>
	</template>		</template>

	@@ -106,14 +109,17 @@
	import { listAlarm, detailAlarm } from "@/api/alarmControl/index.js";		import { listAlarm, detailAlarm } from "@/api/alarmControl/index.js";
	import { listDevice, } from "@/api/yunshou/device";		import { listDevice, } from "@/api/yunshou/device";
	import moment from 'moment'		import moment from 'moment'
	// import algForm from './components/algorithmDown.vue'		const { proxy } = getCurrentInstance();
			const { algorithm_scen, algorithm_case } = proxy.useDict("algorithm_scen", "algorithm_case");
			import alarmDetial from './components/form.vue'
	import { ArrowDown } from '@element-plus/icons-vue'		import { ArrowDown } from '@element-plus/icons-vue'
	import { Search } from '@element-plus/icons-vue'		import { Search } from '@element-plus/icons-vue'
	const router = useRouter();		const router = useRouter();
	const { proxy } = getCurrentInstance();		const alarmDetialRef = ref(null)
	const algorithmDownRef = ref(null)
	const nowText=ref('告警管理')		const nowText=ref('告警管理')
	const ids = ref([]);		const ids = ref([]);
			const total = ref(0);
			const division = ref(12);
	const deviceList = ref([]);		const deviceList = ref([]);
	const algorithmList=reactive([		const algorithmList=reactive([
	{		{
	@@ -163,7 +169,9 @@
	queryParams: {		queryParams: {
	postCode: undefined,		postCode: undefined,
	searchValue: '',		searchValue: '',
	status: undefined		status: undefined,
			pageSize: 4,
			pageNum: 1,
	},		},
	rules: {		rules: {
	postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],		postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],
	@@ -178,6 +186,12 @@
	return moment(val).format('YYYY/MM/DD HH:mm:ss')		return moment(val).format('YYYY/MM/DD HH:mm:ss')
	}		}

			function changeDivision(val,pageSize){
			division.value=val
			queryParams.value.pageSize=pageSize
			getList()
			}

	/** 查询定时任务列表 */		/** 查询定时任务列表 */
	function getDeviceList() {		function getDeviceList() {
	listDevice().then(response => {		listDevice().then(response => {
	@@ -199,8 +213,8 @@
	/** 查询算法列表 */		/** 查询算法列表 */
	function getList() {		function getList() {
	listAlarm(queryParams.value).then(response => {		listAlarm(queryParams.value).then(response => {
	// console.log("🚀 ~ listAlg ~ response:", response)
	algList.value = response.rows		algList.value = response.rows
			total.value = response.total;
	});		});
	}		}
	function handeAdd(row){		function handeAdd(row){
	@@ -219,8 +233,8 @@
	// title.value = "修改岗位";		// title.value = "修改岗位";
	// });		// });
	}		}
	function handleUpdate(row) {		function handleDetials(row) {
	algorithmDownRef.value.handleUpdate(row)		alarmDetialRef.value.handleUpdate(row)
	}		}

	/** 删除按钮操作 */		/** 删除按钮操作 */
	@@ -256,10 +270,11 @@
	min-height: 700px;		min-height: 700px;
	.alg-list{		.alg-list{
	display: grid;		display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));		// grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;		gap: 16px;
	.alg-item{		.alg-item{
	width: 100%;		width: 100%;
			margin-top: 10px;
	min-height: 350px;		min-height: 350px;
	cursor: pointer;		cursor: pointer;
	position: relative;		position: relative;