421 lines
11 KiB
Vue
421 lines
11 KiB
Vue
<!-- 报警记录 -->
|
||
<template>
|
||
<div class="warning-page">
|
||
<!-- :tabs="['工程名称']" -->
|
||
<LeftMenu
|
||
v-model="active"
|
||
:records="records"
|
||
@change-page="onCurChange"
|
||
@search="onSearchInput"
|
||
:pageable="pages"
|
||
class="leftMenu"
|
||
>
|
||
<template #default="{ data }">
|
||
<div class="leftProject" @click="onSearch(data)">
|
||
<span class="projectName">{{ (data as ResAiEngineerPage).engineeringName }}</span>
|
||
<div class="leftMenu_item flx-justify-between">
|
||
<div class="flx-justify-between">
|
||
<img src="@/assets/images/AIwaring/视频.png" alt="" />
|
||
<span class="middleSize">接入视频路数：{{ data.deviceNum }}</span>
|
||
</div>
|
||
<div>
|
||
<img src="@/assets/images/AIwaring/报警.png" alt="" />
|
||
<span class="middleSize"
|
||
>今日报警次数：{{ data.aiAlarmStat === null ? 0 : parse(data.aiAlarmStat)?.todayAlarm }}</span
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom_item flx-justify-between" style="margin-top: 6px">
|
||
<div>
|
||
<span class="bottomSize"
|
||
>今日待整改问题：{{ data.aiAlarmStat === null ? 0 : parse(data.aiAlarmStat)?.questionNum }}</span
|
||
>
|
||
</div>
|
||
<div>
|
||
<span class="bottomSize"
|
||
>今日已整改问题：{{ data.aiAlarmStat === null ? 0 : parse(data.aiAlarmStat)?.solveQuestionNum }}</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</LeftMenu>
|
||
|
||
<div class="right_container">
|
||
<div class="form_div">
|
||
<el-form :model="form" :inline="true" @submit.prevent class="form" ref="FormRef">
|
||
<el-form-item label="监控名称">
|
||
<el-select 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">
|
||
<div class="img_item" v-for="item in questList.records" @click="onShowImg(item)" :key="item.id" v-if="qusLength.length">
|
||
<el-image style="width: 100%; height: 182px" :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">位置：{{ item.deviceName }}</div>
|
||
<div style="font-size: 12px">报警时间：{{ item.reportTime }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else class="table-empty">
|
||
<img src="@/assets/images/notData.png" alt="notData" />
|
||
<div>暂无数据</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Pagination
|
||
:pageable="pageable"
|
||
:total="pageable.total"
|
||
:page-size="pageable.pageSize"
|
||
layout="prev, pager, next, jumper"
|
||
:handleSizeChange="handleSizeChange"
|
||
:handleCurrentChange="handleCurrentChange"
|
||
:background="background"
|
||
class="pagination"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<el-dialog class="imgDialog" title="整改图片" width="50%" v-model="imgVisible" show-close>
|
||
<div class="img_div">
|
||
<el-image class="diaImg" :src="imgList.image" fit="fill" />
|
||
</div>
|
||
<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>
|
||
|
||
<DialogForm
|
||
title="创建隐患记录"
|
||
:formConfig="formConfig"
|
||
:formData="formData"
|
||
v-model:visible="visible"
|
||
append-to-body
|
||
width="700px"
|
||
@confirm="saveItem"
|
||
>
|
||
</DialogForm>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, reactive, onMounted, watch } from "vue";
|
||
import { getAIengineeringPage, getAIQuestionPage, addAIrecords, getAiMonitorDev } from "@/api/modules/enterpriseApi";
|
||
import LeftMenu from "@/components/LeftMenu/LeftMenu.vue";
|
||
import { ReqAiadd } from "@/api/types/government/AIwaring";
|
||
import Pagination from "@/components/ProTable/components/Pagination.vue";
|
||
import DialogForm from "@/components/DialogForm/index.vue";
|
||
import { ElMessage } from "element-plus";
|
||
import type { ResAiProjectPage, ResAiEngineerPage } from "@/api/types/government/AIwaring";
|
||
import { format } from "date-fns";
|
||
|
||
const active = ref(0);
|
||
const imgVisible = ref(false);
|
||
const background = ref(true);
|
||
const visible = ref(false);
|
||
|
||
// 搜索用的工程sn
|
||
const searchSn = ref("");
|
||
const qusLength = ref([]);
|
||
|
||
// 项目或者工程名字
|
||
const searchName = ref<string>("");
|
||
|
||
const pages = ref({
|
||
pageNo: 1,
|
||
pageSize: 7,
|
||
total: 0
|
||
});
|
||
const pageable = ref({
|
||
pageNo: 1,
|
||
pageSize: 12,
|
||
total: 0
|
||
});
|
||
|
||
const records = ref<ResAiProjectPage[] | ResAiEngineerPage[]>([]);
|
||
// 监控设备
|
||
|
||
const questList = ref([]);
|
||
const form = ref({
|
||
code: "",
|
||
createTime: "",
|
||
startTime: "",
|
||
endTime: ""
|
||
});
|
||
// form下拉框
|
||
const nameList = ref([]);
|
||
|
||
// 点击图片存的数据
|
||
const imgList = ref({
|
||
createBy: "",
|
||
createTime: "",
|
||
deviceCode: "",
|
||
deviceName: "",
|
||
engineeringSn: "",
|
||
id: "",
|
||
image: "",
|
||
remark: "",
|
||
solveBy: "",
|
||
solveImage: "",
|
||
solveTime: "",
|
||
state: 0,
|
||
type: 4,
|
||
typeName: ""
|
||
});
|
||
const formData = ref({
|
||
projectName: "",
|
||
typeName: "",
|
||
deviceName: "",
|
||
createTime: "",
|
||
image: "",
|
||
createBy: ""
|
||
});
|
||
|
||
// 弹窗中的配置
|
||
const formConfig = reactive({
|
||
formItemConfig: [
|
||
{
|
||
label: "工程名称",
|
||
prop: "projectName",
|
||
type: "input",
|
||
disabled: true
|
||
},
|
||
{
|
||
label: "隐患类型",
|
||
prop: "typeName",
|
||
type: "input",
|
||
disabled: true
|
||
},
|
||
{
|
||
label: "抓拍地点",
|
||
prop: "deviceName",
|
||
type: "input",
|
||
disabled: true
|
||
},
|
||
{
|
||
label: "创建时间",
|
||
prop: "createTime",
|
||
type: "date",
|
||
dateType: "date",
|
||
disabled: true
|
||
},
|
||
{
|
||
label: "图片显示",
|
||
prop: "image",
|
||
type: "image",
|
||
src: "image",
|
||
width: "auto",
|
||
height: "100px",
|
||
fit: "fill"
|
||
},
|
||
{
|
||
label: "下达人",
|
||
prop: "createBy",
|
||
type: "input"
|
||
}
|
||
],
|
||
rules: {
|
||
projectName: [
|
||
{
|
||
required: true,
|
||
message: "请输入名称",
|
||
trigger: "blur"
|
||
}
|
||
],
|
||
typeName: [
|
||
{
|
||
required: true,
|
||
message: "请输入隐患类型",
|
||
trigger: "blur"
|
||
}
|
||
],
|
||
createBy: [
|
||
{
|
||
required: true,
|
||
message: "请输入下达人",
|
||
trigger: "blur"
|
||
}
|
||
]
|
||
}
|
||
});
|
||
const onShowImg = (params: any) => {
|
||
imgVisible.value = true;
|
||
imgList.value = { ...params };
|
||
};
|
||
|
||
// 页面的分页
|
||
const handleCurrentChange = async (page: number) => {
|
||
const res = await getAIQuestionPage({
|
||
pageNo: page,
|
||
pageSize: pageable.value.pageSize,
|
||
engineeringSn: searchSn.value
|
||
});
|
||
questList.value = res.result;
|
||
pageable.value.total = +questList.value.total;
|
||
};
|
||
|
||
const handleSizeChange = async (size: number) => {
|
||
const res = await getAIQuestionPage({
|
||
pageNo: pageable.value.pageNo,
|
||
pageSize: size,
|
||
engineeringSn: searchSn.value
|
||
});
|
||
questList.value = res.result;
|
||
pageable.value.total = +questList.value.total;
|
||
};
|
||
// 创建隐患记录的弹窗
|
||
const onRecord = () => {
|
||
formData.value = { ...imgList.value };
|
||
formData.value.projectName = searchName.value;
|
||
formData.value.createTime = format(new Date(), "yyyy-MM-dd HH:mm:ss");
|
||
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 getAIQuestionPage({ ...form.value, ...pageable.value, engineeringSn: searchSn.value });
|
||
questList.value = res.result;
|
||
pageable.value.total = +questList.value.total;
|
||
};
|
||
|
||
// 页面的项目名称和工程名称的div点击事件
|
||
const onSearch = async (params: ResAiProjectPage | ResAiEngineerPage) => {
|
||
const res = await getAIQuestionPage({
|
||
engineeringSn: (params as ResAiEngineerPage).engineeringSn,
|
||
pageNo: pageable.value.pageNo,
|
||
pageSize: pageable.value.pageSize
|
||
});
|
||
questList.value = res.result;
|
||
qusLength.value = res.result.records;
|
||
pageable.value.total = +res.result.total;
|
||
searchSn.value = (params as ResAiEngineerPage).engineeringSn;
|
||
searchName.value = (params as ResAiEngineerPage).engineeringName;
|
||
// 清空form
|
||
form.value = {
|
||
code: "",
|
||
createTime: "",
|
||
startTime: "",
|
||
endTime: ""
|
||
};
|
||
getAiMonitorDevList();
|
||
};
|
||
|
||
// leftMenu页面的搜索按钮
|
||
const onSearchInput = async (params: string) => {
|
||
const { result } = await getAIengineeringPage({ engineeringName: params, ...pages.value });
|
||
records.value = result.records;
|
||
};
|
||
|
||
// leftMenu页面的分页
|
||
const onCurChange = async (params: number) => {
|
||
const { result } = await getAIengineeringPage({ ...pages.value, pageNo: params });
|
||
records.value = result.records;
|
||
pages.value.total = +result.total;
|
||
};
|
||
|
||
const saveItem = async (form: ReqAiadd) => {
|
||
await addAIrecords(form);
|
||
visible.value = false;
|
||
imgVisible.value = false;
|
||
ElMessage.success("发布成功");
|
||
await handSearch();
|
||
// await getAIengPage();
|
||
};
|
||
|
||
// 获取工程名称分页
|
||
const getAIengPage = async () => {
|
||
const { result } = await getAIengineeringPage(pages.value);
|
||
records.value = result.records;
|
||
pages.value.total = +result.total;
|
||
};
|
||
|
||
// 监控名称的下拉框value
|
||
const getAiMonitorDevList = async () => {
|
||
const res = await getAiMonitorDev({ engineeringSn: searchSn.value });
|
||
nameList.value = res.result;
|
||
};
|
||
|
||
watch(
|
||
() => active.value,
|
||
async (value: number) => {
|
||
// console.log(value);
|
||
pages.value.pageNo = 1;
|
||
pages.value.total = 0;
|
||
await getAIengPage();
|
||
onSearch(records.value[0]);
|
||
}
|
||
);
|
||
watch(
|
||
() => form.value.createTime,
|
||
() => {
|
||
if (form.value.createTime === null) {
|
||
form.value.startTime = "";
|
||
form.value.endTime = "";
|
||
}
|
||
}
|
||
);
|
||
|
||
function parse(val) {
|
||
return val.trim() ? JSON.parse(val) : {};
|
||
}
|
||
|
||
onMounted(async () => {
|
||
await getAIengPage();
|
||
onSearch(records.value[0]);
|
||
searchSn.value = (records.value as ResAiProjectPage[])[0].engineeringSn;
|
||
searchName.value = (records.value as ResAiProjectPage[])[0].projectName;
|
||
|
||
getAiMonitorDevList();
|
||
console.log(questList.value);
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "./index.scss";
|
||
|
||
:deep(.search-wrapper) {
|
||
border-radius: 8px 8px 0 0;
|
||
}
|
||
</style>
|