Skip to content

A
ai-yunshou-vue
Commit 84461e5b authored by 胡占生's avatar 胡占生 🇨🇳
Browse files
Options

fix:告警管理，页面展示调整，接口对接联调

parent 87cdf123
Show whitespace changes
Inline Side-by-side
Showing with 220 additions and 48 deletions
src/views/alarmControl/components/form.vue 0 → 100644
View file @ 84461e5b
<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
View file @ 84461e5b
......@@ -3,7 +3,7 @@
<TabTitle :text="nowText" />
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="24" :lg="24">
<el-scrollbar height="700px">
<el-scrollbar height="730px">
<el-card class="right-list">
<template v-slot:header>
<el-form :model="queryParams" ref="queryRef" :inline="true" >
......@@ -28,12 +28,12 @@
></el-date-picker>
</el-form-item>
<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
v-for="dict in algList"
:key="dict.id"
:label="dict.algorithmName"
:value="dict.id"
v-for="disc in algorithm_scen"
:key="disc.value"
:label="disc.label"
:value="disc.value"
/>
</el-select>
</el-form-item>
......@@ -48,57 +48,60 @@
<el-button
type="primary"
plain
@click="changeDivision(12,4)"
>四分屏</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
@click="changeDivision(8,6)"
>六分屏</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
@click="changeDivision(6,12)"
>十二分屏</el-button>
</el-col>
</el-row>
<div class="alg-list" >
<el-card v-for="item in algList" :key="item.name" class="alg-item" shadow="hover" >
<!-- <template v-slot:header>
<div class="cleartitle">
<span>{{item.algorithmName}}</span>
<el-tag
:type="'success'"
effect="dark"
>
{{ 'success'}}
</el-tag>
</div>
</template> -->
<el-row :gutter="10">
<el-col :span="division" v-for="item in algList" :key="item.name">
<el-card class="alg-item" shadow="hover" >
<template v-slot:default >
<div style="width: 100%;max-height: 200px;overflow: hidden;">
<img
:src="'http://192.168.4.206' +item.alarmImg"
style="width: 100%;"
/>
<div style="width: 100%;overflow: hidden;">
<ImagePreview style="width: 100%;" :src="item.alarmImg"/>
</div>
<h2>{{ item.alarmType }}</h2>
<p style="color: #999999;font-size: 12px;">
{{ changeTime(item.alarmTime) }}
</p>
<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="Delete" @click.stop="handleDelete(item)">删除</el-button> -->
</div>
</template>
</el-card>
</el-col>
</el-row>
</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-scrollbar>
</el-col>
</el-row>
<alarmDetial ref="alarmDetialRef"/>
</div>
</template>
......@@ -106,14 +109,17 @@
import { listAlarm, detailAlarm } from "@/api/alarmControl/index.js";
import { listDevice, } from "@/api/yunshou/device";
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 { Search } from '@element-plus/icons-vue'
const router = useRouter();
const { proxy } = getCurrentInstance();
const algorithmDownRef = ref(null)
const alarmDetialRef = ref(null)
const nowText=ref('告警管理')
const ids = ref([]);
const total = ref(0);
const division = ref(12);
const deviceList = ref([]);
const algorithmList=reactive([
{
......@@ -163,7 +169,9 @@
queryParams: {
postCode: undefined,
searchValue: '',
status: undefined
status: undefined,
pageSize: 4,
pageNum: 1,
},
rules: {
postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],
......@@ -178,6 +186,12 @@
return moment(val).format('YYYY/MM/DD HH:mm:ss')
}
function changeDivision(val,pageSize){
division.value=val
queryParams.value.pageSize=pageSize
getList()
}
/** 查询定时任务列表 */
function getDeviceList() {
listDevice().then(response => {
......@@ -199,8 +213,8 @@
/** 查询算法列表 */
function getList() {
listAlarm(queryParams.value).then(response => {
// console.log("🚀 ~ listAlg ~ response:", response)
algList.value = response.rows
total.value = response.total;
});
}
function handeAdd(row){
......@@ -219,8 +233,8 @@
// title.value = "修改岗位";
// });
}
function handleUpdate(row) {
algorithmDownRef.value.handleUpdate(row)
function handleDetials(row) {
alarmDetialRef.value.handleUpdate(row)
}
/** 删除按钮操作 */
......@@ -256,10 +270,11 @@
min-height: 700px;
.alg-list{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
// grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
.alg-item{
width: 100%;
margin-top: 10px;
min-height: 350px;
cursor: pointer;
position: relative;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment