495 lines
14 KiB
Vue
495 lines
14 KiB
Vue
<!-- 项目的报警记录 -->
|
|
<template>
|
|
<div class="table-box">
|
|
<div class="form-top">
|
|
<el-form :model="form" :inline="true" @submit.prevent class="form" ref="FormRef">
|
|
<el-form-item label="监控名称">
|
|
<el-select clearable class="select" v-model="form.code" placeholder="请选择">
|
|
<el-option v-for="item in nameList" :key="item.code" :label="item.name" :value="item.code" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="创建时间">
|
|
<el-date-picker
|
|
v-model="form.createTime"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD"
|
|
@change="onDatePicker"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handSearch">查询</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<div class="imgPage">
|
|
<div class="imgTable" v-if="qusLength.length">
|
|
<div class="img_item" v-for="item in questList.records" @click="onShowImg(item)" :key="item.id">
|
|
<el-image style="width: 100%; height: 182px" class="item_image" :src="item.image" fit="fill" />
|
|
<div class="page_text flx-justify-column">
|
|
<div class="img_title">{{ item.typeName }}</div>
|
|
<div style="display: flex; justify-content: space-between">
|
|
<div style="font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
|
|
位置：{{ item.deviceName }}
|
|
</div>
|
|
<div style="font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
|
|
报警时间：{{ item.reportTime }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="table-empty">
|
|
<img src="@/assets/images/notData.png" alt="notData" />
|
|
<div>暂无数据</div>
|
|
</div>
|
|
<Pagination
|
|
:pageable="pages"
|
|
:total="pages.total"
|
|
:page-size="pages.pageSize"
|
|
layout="prev, pager, next, jumper"
|
|
:handleSizeChange="handleSizeChange"
|
|
:handleCurrentChange="handleCurrentChange"
|
|
:background="background"
|
|
class="pagination"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<el-dialog class="imgDialog" title="整改图片" width="50%" v-model="imgVisible" show-close>
|
|
<el-image style="width: 100%; height: 600px" :src="imgList.image" fit="fill" />
|
|
<template #footer>
|
|
<div class="flx-justify-between">
|
|
<div class="flx-center">
|
|
<span class="img_diatitle m-10">{{ imgList.typeName }}</span>
|
|
<span class="img_text m-10">位置：{{ imgList.deviceName }}</span>
|
|
<span class="img_text m-10">时间：{{ imgList.createTime }}</span>
|
|
<span class="img_text m-10 flx-center"
|
|
><div :class="imgList.state === -1 ? 'pending' : 'complete'"></div>
|
|
{{ imgList.state === -1 ? "待处理" : "已处理" }}</span
|
|
>
|
|
</div>
|
|
<div>
|
|
<el-button type="primary" v-if="imgList.state === -1" @click="onRecord"> 去整改 </el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<el-dialog class="imgDialog" :title="title" width="50%" v-model="visible" show-close>
|
|
<div class="littleTitle Snap">抓拍隐患</div>
|
|
<el-form class="diaForm" :rules="rules" :model="formData" ref="ruleFormRef" label-width="160px">
|
|
<el-form-item label="名称：">
|
|
<el-input v-model="formData.engineeringName" placeholder="请输入" />
|
|
</el-form-item>
|
|
<el-form-item label="隐患类型：">
|
|
<el-input v-model="formData.typeName" placeholder="请输入" />
|
|
</el-form-item>
|
|
<el-form-item label="图片显示：">
|
|
<!-- <el-image v-model="form.image" placeholder="请输入" /> -->
|
|
<el-image style="width: 95px; height: 53px" :src="formData.image" fit="fill" />
|
|
</el-form-item>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="下达人：">
|
|
<el-input v-model="formData.createBy" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="创建时间：">
|
|
<el-date-picker
|
|
style="width: 100%"
|
|
v-model="formData.createTime"
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
type="datetime"
|
|
placeholder="请选择时间"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<div class="littleTitle situation">整改情况</div>
|
|
<el-form-item label="整改状态：" prop="state">
|
|
<el-radio-group v-model="formData.state">
|
|
<el-radio :label="0">待整改</el-radio>
|
|
<el-radio :label="1">已整改</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="整改图片：">
|
|
<el-upload
|
|
class="avatar-uploader"
|
|
:action="`${baseUrl}` + '/xmgl/file/upload'"
|
|
:show-file-list="false"
|
|
:on-success="handleAvatarSuccess"
|
|
:before-upload="beforeAvatarUpload"
|
|
accept="image/jpg, image/jpeg, image/png"
|
|
v-if="title === '问题整改'"
|
|
>
|
|
<img v-if="formData.solveImage" :src="formData.solveImage" class="avatar" />
|
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
|
</el-upload>
|
|
<el-image v-else style="width: 95px; height: 53px" :src="formData.solveImage" fit="fill" />
|
|
</el-form-item>
|
|
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="整改人：">
|
|
<el-input v-model="formData.solveBy" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="整改时间：">
|
|
<!-- <el-input v-model="form.solveTime" placeholder="请输入" /> -->
|
|
<el-date-picker
|
|
style="width: 100%"
|
|
v-model="formData.solveTime"
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
type="datetime"
|
|
placeholder="请选择时间"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item label="备注：">
|
|
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="formData.remark" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<div v-if="title === '问题整改'">
|
|
<el-button class="cancelButtonStyle" @click="visible = false">取消</el-button>
|
|
<el-button type="primary" @click="confirm(ruleFormRef, formData)"> 保存 </el-button>
|
|
</div>
|
|
<div v-else class="footer">
|
|
<el-button type="primary" @click="visible = false">关闭</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
<engineeringEngDrawer v-model="engVisable" :active="activeValue" ref="engDrawer" :engList="engList" @select="tabsSelect">
|
|
<template #default="{ data }">
|
|
<span style="margin-left: 10px" @click="onUpdate(data)">{{
|
|
activeValue == "eng" ? data.engineeringName : data.projectName
|
|
}}</span>
|
|
</template>
|
|
</engineeringEngDrawer>
|
|
<allEngineering @click="engVisable = true" />
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, reactive, onMounted, watch } from "vue";
|
|
import { getAIAlarmPage, addAIrecords, getAiMonitorDev, getIdAIrecords, getEngineeringName } from "@/api/modules/project";
|
|
import Pagination from "@/components/ProTable/components/Pagination.vue";
|
|
import { ElMessage } from "element-plus";
|
|
import type { ResAiProjectPage, ResAiEngineerPage } from "@/api/types/government/AIwaring";
|
|
import type { UploadProps, FormInstance, FormRules } from "element-plus";
|
|
import { getRelevanceList } from "@/api/modules/common";
|
|
import engineeringEngDrawer from "@/components/engineeringEngDrawer/index.vue";
|
|
import allEngineering from "@/components/allEngineering/index.vue";
|
|
|
|
interface nameList {
|
|
name: string;
|
|
code: number;
|
|
}
|
|
|
|
interface formData {
|
|
createBy: string;
|
|
createTime: string;
|
|
deviceCode: string;
|
|
engineeringName: string;
|
|
id: string;
|
|
image: string;
|
|
|
|
remark: string;
|
|
solveBy: string;
|
|
solveImage: string;
|
|
solveTime: string;
|
|
state: number | undefined;
|
|
type: undefined;
|
|
typeName: string | string;
|
|
// image:string
|
|
}
|
|
|
|
const imgVisible = ref(false);
|
|
const background = ref(true);
|
|
const visible = ref(false);
|
|
const title = ref("");
|
|
const baseUrl = import.meta.env.VITE_API_URL;
|
|
const ruleFormRef = ref<FormInstance>();
|
|
const searchSn = ref("");
|
|
const activeValue = ref("eng");
|
|
const engList = ref([]);
|
|
const engVisable = ref(false);
|
|
// 项目或者工程名字
|
|
const searchName = ref<string>("");
|
|
|
|
const qusLength = ref([]);
|
|
|
|
const pages = ref({
|
|
pageNo: 1,
|
|
pageSize: 12,
|
|
total: 0
|
|
});
|
|
|
|
const records = ref<ResAiProjectPage[] | ResAiEngineerPage[]>([]);
|
|
// 监控设备
|
|
const monitorList = ref<ResAiProjectPage[]>([]);
|
|
|
|
const questList = ref([]);
|
|
const form = ref({
|
|
code: "",
|
|
createTime: "",
|
|
startTime: "",
|
|
endTime: ""
|
|
});
|
|
|
|
const formData = ref<formData>({
|
|
createBy: "",
|
|
createTime: "",
|
|
deviceCode: "",
|
|
engineeringName: "",
|
|
|
|
id: "",
|
|
image: "",
|
|
remark: "",
|
|
solveBy: "",
|
|
solveImage: "",
|
|
solveTime: "",
|
|
state: undefined,
|
|
type: undefined,
|
|
typeName: ""
|
|
});
|
|
|
|
// form下拉框
|
|
const nameList = ref<nameList[]>([]);
|
|
|
|
// 点击图片存的数据
|
|
const imgList = ref({
|
|
createBy: "",
|
|
createTime: "",
|
|
deviceCode: "",
|
|
deviceName: "",
|
|
// engineeringSn: "",
|
|
id: "",
|
|
image: "",
|
|
// projectSn: "",
|
|
// remark: "",
|
|
// solveBy: "",
|
|
// solveImage: "",
|
|
// solveTime: "",
|
|
state: -1,
|
|
// type: 4,
|
|
typeName: ""
|
|
});
|
|
|
|
const rules = reactive<FormRules>({
|
|
state: {
|
|
required: true,
|
|
message: "请输入选择整改状态",
|
|
trigger: "blur"
|
|
}
|
|
});
|
|
|
|
const confirm = async (formEl: FormInstance | undefined, form: any) => {
|
|
// 标记表单校验
|
|
if (!formEl) return;
|
|
await formEl.validate(async (valid, fields) => {
|
|
if (valid) {
|
|
const res = await addAIrecords(form);
|
|
ElMessage.success("保存成功");
|
|
visible.value = false;
|
|
imgVisible.value = false;
|
|
getAIproPage();
|
|
} else {
|
|
console.log("error submit!", fields);
|
|
ElMessage({
|
|
showClose: true,
|
|
message: "请完善表单信息！",
|
|
type: "error"
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
const onShowImg = async (params: any) => {
|
|
imgVisible.value = true;
|
|
imgList.value = { ...params };
|
|
};
|
|
|
|
// 去整改的弹窗
|
|
const onRecord = async () => {
|
|
title.value = "问题整改";
|
|
formData.value = reactive({
|
|
createBy: "",
|
|
createTime: "",
|
|
deviceCode: "",
|
|
deviceName: "",
|
|
|
|
id: "",
|
|
image: "",
|
|
|
|
remark: "",
|
|
solveBy: "",
|
|
solveImage: "",
|
|
solveTime: "",
|
|
state: undefined,
|
|
type: undefined,
|
|
typeName: ""
|
|
});
|
|
formData.value.deviceName = imgList.value.deviceName;
|
|
formData.value.typeName = imgList.value.typeName;
|
|
formData.value.image = imgList.value.image;
|
|
formData.value.createBy = imgList.value.createBy;
|
|
formData.value.createTime = imgList.value.createTime;
|
|
formData.value.id = imgList.value.id;
|
|
visible.value = true;
|
|
};
|
|
// form日期选择后改变入参
|
|
const onDatePicker = () => {
|
|
form.value.startTime = form.value.createTime[0];
|
|
form.value.endTime = form.value.createTime[1];
|
|
};
|
|
|
|
// 页面的form搜索 这里
|
|
const handSearch = async () => {
|
|
const res = await getAIAlarmPage({ ...form.value, ...pages.value });
|
|
questList.value = res.result;
|
|
pages.value.total = +questList.value.total;
|
|
};
|
|
|
|
// 页面的分页
|
|
const handleCurrentChange = async (page: number) => {
|
|
const res = await getAIAlarmPage({
|
|
pageNo: page,
|
|
pageSize: pages.value.pageSize
|
|
});
|
|
questList.value = res.result;
|
|
pages.value.total = +questList.value.total;
|
|
};
|
|
|
|
const handleSizeChange = async (size: number) => {
|
|
const res = await getAIAlarmPage({
|
|
pageNo: pages.value.pageNo,
|
|
pageSize: size
|
|
});
|
|
questList.value = res.result;
|
|
pages.value.total = +questList.value.total;
|
|
};
|
|
|
|
// 图片上传成功后的钩子
|
|
const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
|
|
formData.value.solveImage = response.result.url;
|
|
};
|
|
|
|
const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
|
|
if (rawFile.type !== "image/png" && rawFile.type !== "image/jpg" && rawFile.type !== "image/jpeg") {
|
|
console.log(rawFile.type);
|
|
|
|
ElMessage.error("请上传jpg或者png格式的图片");
|
|
return false;
|
|
}
|
|
// 限制文件大小
|
|
// else if (rawFile.size / 1024 / 1024 > 2) {
|
|
// ElMessage.error('Avatar picture size can not exceed 2MB!')
|
|
// return false
|
|
// }
|
|
return true;
|
|
};
|
|
|
|
// 获取报警记录的分页
|
|
const getAIproPage = async () => {
|
|
let requestData = {
|
|
...pages.value
|
|
};
|
|
if (activeValue.value == "eng") {
|
|
requestData.engineeringSn = searchSn.value;
|
|
} else if (activeValue.value == "project") {
|
|
requestData.projectSn = searchSn.value;
|
|
}
|
|
if (requestData.engineeringSn || requestData.projectSn) {
|
|
const { result } = await getAIAlarmPage(requestData);
|
|
questList.value = result;
|
|
qusLength.value = result.records;
|
|
pages.value.total = Number(result.total);
|
|
} else {
|
|
questList.value = { records: [] };
|
|
qusLength.value = [];
|
|
pages.value.total = 0;
|
|
}
|
|
};
|
|
// 监控名称下拉框的value
|
|
const getAiMonitorDevList = async () => {
|
|
const res = await getAiMonitorDev({});
|
|
nameList.value = res.result;
|
|
};
|
|
|
|
watch(
|
|
() => form.value.createTime,
|
|
() => {
|
|
if (form.value.createTime === null) {
|
|
form.value.startTime = "";
|
|
form.value.endTime = "";
|
|
}
|
|
}
|
|
);
|
|
|
|
// 抽屉tab选择时
|
|
const tabsSelect = val => {
|
|
activeValue.value = val;
|
|
if (val == "eng") {
|
|
getengineering();
|
|
} else if (val == "project") {
|
|
getProject();
|
|
}
|
|
};
|
|
// 获取项目信息
|
|
const getProject = async () => {
|
|
const res = await getEngineeringName();
|
|
engList.value = [res.result];
|
|
if (res.result) {
|
|
searchSn.value = res.result.projectSn;
|
|
}
|
|
getAIproPage();
|
|
console.log(res);
|
|
};
|
|
const getengineering = async () => {
|
|
// let newParams = JSON.parse(JSON.stringify(params));
|
|
const res = await getRelevanceList();
|
|
engList.value = res.result;
|
|
if (res.result && res.result.length > 0) {
|
|
searchSn.value = res.result[0].engineeringSn;
|
|
}
|
|
getAIproPage();
|
|
console.log(res);
|
|
};
|
|
|
|
// 点击抽屉的工程名称更新页面
|
|
const onUpdate = async row => {
|
|
let requestData = {
|
|
...pages.value
|
|
};
|
|
if (activeValue.value == "eng") {
|
|
requestData.engineeringSn = row.engineeringSn;
|
|
} else if (activeValue.value == "project") {
|
|
requestData.projectSn = row.projectSn;
|
|
}
|
|
const { result } = await getAIAlarmPage(requestData);
|
|
questList.value = result;
|
|
pages.value.total = Number(result.total);
|
|
ElMessage.success("页面已更新");
|
|
};
|
|
|
|
onMounted(() => {
|
|
getengineering();
|
|
getAiMonitorDevList();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "./index.scss";
|
|
</style>
|