439 lines
11 KiB
Vue
439 lines
11 KiB
Vue
<template>
|
||
<div class="warning-page">
|
||
<LeftMenu
|
||
v-model="active"
|
||
:tabs="['项目名称', '工程名称']"
|
||
:records="records"
|
||
@change-page="onCurChange"
|
||
@search="onSearchInput"
|
||
:pageable="pages"
|
||
style="min-height: 100%"
|
||
>
|
||
<template #default="{ data }">
|
||
<div class="leftProject" @click="onSearch(data)">
|
||
<span class="projectName">{{
|
||
(data as ResAiProjectPage).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.todayAlarm }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom_item flx-justify-between" style="margin-top: 6px">
|
||
<div>
|
||
<span class="bottomSize">待整改问题：{{ data.questionNum }}</span>
|
||
</div>
|
||
<div>
|
||
<span class="bottomSize">已整改问题数：{{ data.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">
|
||
<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.createTime }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- :handleSizeChange="handleSizeChange" -->
|
||
<Pagination
|
||
:pageable="pageable"
|
||
layout="prev, pager, next, jumper"
|
||
: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 === 0 ? 'pending' : imgList.state === 1 ? 'processing' : 'complete'"></div>
|
||
<!-- <div :class="imgList.state === 0 ? 'pending' : 'complete'"></div> -->
|
||
{{ imgList.state === 0 ? "待处理" : imgList.state === 1 ? "处理中" : "已处理" }}</span
|
||
>
|
||
</div>
|
||
<div>
|
||
<el-button type="primary" v-if="imgList.state === 0" @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 {
|
||
getAIprojectQuestionPage,
|
||
getAIengQuestionPage,
|
||
getAIQuestionPage,
|
||
addAIQuestionPage,
|
||
getAiMonitorDev
|
||
} from "@/api/modules/goverment";
|
||
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";
|
||
|
||
const active = ref(0);
|
||
const imgVisible = ref(false);
|
||
const background = ref(true);
|
||
const visible = ref(false);
|
||
|
||
// 搜索用的项目sn或者工程sn
|
||
const searchSn = ref("");
|
||
|
||
// 项目或者工程名字
|
||
const searchName = ref<string>("");
|
||
|
||
const pages = ref({
|
||
pageNo: 1,
|
||
pageSize: 7,
|
||
total: 0
|
||
});
|
||
const pageable = ref({
|
||
pageNo: 1,
|
||
pageSize: 9,
|
||
total: 0
|
||
});
|
||
|
||
const records = ref<ResAiProjectPage[] | ResAiEngineerPage[]>([]);
|
||
// 监控设备
|
||
const monitorList = ref<ResAiProjectPage[]>([]);
|
||
|
||
const questList = ref([]);
|
||
const form = ref({
|
||
code: "",
|
||
createTime: "",
|
||
startTime: "",
|
||
endTime: ""
|
||
});
|
||
// form下拉框
|
||
const nameList = ref([]);
|
||
|
||
// 点击图片存的数据
|
||
const imgList = ref({
|
||
alarmId: "",
|
||
createBy: "",
|
||
createTime: "",
|
||
deviceCode: "",
|
||
deviceName: "",
|
||
engineeringSn: "",
|
||
id: "",
|
||
image: "",
|
||
projectSn: "",
|
||
remark: "",
|
||
solveBy: "",
|
||
solveImage: "",
|
||
solveTime: "",
|
||
state: 0,
|
||
type: 4,
|
||
typeName: ""
|
||
});
|
||
const formData = ref({
|
||
projectName: "",
|
||
typeName: "",
|
||
deviceName: "",
|
||
createTime: "",
|
||
image: "",
|
||
createBy: ""
|
||
});
|
||
|
||
// 弹窗中的配置
|
||
const formConfig = {
|
||
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",
|
||
datetType: "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"
|
||
}
|
||
]
|
||
}
|
||
};
|
||
|
||
const onShowImg = (params: any) => {
|
||
imgVisible.value = true;
|
||
imgList.value = { ...params, alarmId: params.id };
|
||
delete imgList.value.id;
|
||
};
|
||
|
||
// 页面的分页
|
||
const handleCurrentChange = async (page: number) => {
|
||
const res = await getAIQuestionPage(
|
||
active.value === 0
|
||
? {
|
||
pageNo: page,
|
||
pageSize: pageable.value.pageSize,
|
||
projectSn: searchSn.value
|
||
}
|
||
: {
|
||
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(
|
||
active.value === 0
|
||
? {
|
||
pageNo: pageable.value.pageNo,
|
||
pageSize: size,
|
||
projectSn: searchSn.value
|
||
}
|
||
: {
|
||
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;
|
||
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(
|
||
active.value === 0
|
||
? { ...form.value, ...pageable.value, projectSn: searchSn.value }
|
||
: { ...form.value, ...pageable.value, engineeringSn: searchSn.value }
|
||
);
|
||
questList.value = res.result;
|
||
};
|
||
|
||
// 页面的项目名称和工程名称的div点击事件
|
||
const onSearch = async (params: ResAiProjectPage | ResAiEngineerPage) => {
|
||
const res = await getAIQuestionPage(
|
||
active.value === 0
|
||
? { projectSn: (params as ResAiProjectPage).projectSn, pageNo: pageable.value.pageNo, pageSize: pageable.value.pageSize }
|
||
: {
|
||
engineeringSn: (params as ResAiEngineerPage).engineeringSn,
|
||
pageNo: pageable.value.pageNo,
|
||
pageSize: pageable.value.pageSize
|
||
}
|
||
);
|
||
questList.value = res.result;
|
||
pageable.value.total = +res.result.total;
|
||
active.value === 0
|
||
? (searchSn.value = (params as ResAiProjectPage).projectSn)
|
||
: (searchSn.value = (params as ResAiEngineerPage).engineeringSn);
|
||
active.value === 0
|
||
? (searchName.value = (params as ResAiProjectPage).projectName)
|
||
: (searchName.value = (params as ResAiEngineerPage).engineeringName);
|
||
// 清空form
|
||
form.value = {
|
||
code: "",
|
||
createTime: "",
|
||
startTime: "",
|
||
endTime: ""
|
||
};
|
||
};
|
||
|
||
// leftMenu页面的搜索按钮
|
||
const onSearchInput = async (params: string) => {
|
||
if (active.value === 0) {
|
||
const { result } = await getAIprojectQuestionPage({ projectName: params, ...pages.value });
|
||
records.value = result.records;
|
||
} else {
|
||
const { result } = await getAIengQuestionPage({ engineeringName: params, ...pages.value });
|
||
records.value = result.records;
|
||
}
|
||
};
|
||
|
||
// leftMenu页面的分页
|
||
const onCurChange = async (params: number) => {
|
||
if (active.value === 0) {
|
||
const { result } = await getAIprojectQuestionPage({ ...pages.value, pageNo: params });
|
||
records.value = result.records;
|
||
} else {
|
||
const { result } = await getAIengQuestionPage({ ...pages.value, pageNo: params });
|
||
records.value = result.records;
|
||
pages.value.total = +result.total;
|
||
}
|
||
|
||
// pages.value.total = +res.result.total;
|
||
};
|
||
|
||
const saveItem = async (form: ReqAiadd) => {
|
||
await addAIQuestionPage(form);
|
||
visible.value = false;
|
||
ElMessage.success("发布成功");
|
||
};
|
||
|
||
// 获取项目名称分页
|
||
const getAIproPage = async () => {
|
||
const { result } = await getAIprojectQuestionPage(pages.value);
|
||
records.value = result.records;
|
||
pages.value.total = Number(result.total);
|
||
};
|
||
// 获取工程名称分页
|
||
const getAIengPage = async () => {
|
||
const { result } = await getAIengQuestionPage(pages.value);
|
||
records.value = result.records;
|
||
pages.value.total = +result.total;
|
||
};
|
||
|
||
// 这里
|
||
const getAiMonitorDevList = async () => {
|
||
const res = await getAiMonitorDev(active.value === 0 ? { projectSn: searchSn.value } : { engineeringSn: searchSn.value });
|
||
nameList.value = res.result;
|
||
};
|
||
|
||
watch(
|
||
() => active.value,
|
||
async (value: number) => {
|
||
// console.log(value);
|
||
pages.value.pageNo = 1;
|
||
pages.value.total = 0;
|
||
if (value === 0) {
|
||
await getAIproPage();
|
||
onSearch(records.value[0]);
|
||
} else {
|
||
await getAIengPage();
|
||
onSearch(records.value[0]);
|
||
}
|
||
}
|
||
);
|
||
|
||
onMounted(async () => {
|
||
await getAIproPage();
|
||
onSearch(records.value[0]);
|
||
searchSn.value = (records.value as ResAiProjectPage[])[0].projectSn;
|
||
searchName.value = (records.value as ResAiProjectPage[])[0].projectName;
|
||
// getAIengPage();
|
||
getAiMonitorDevList();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "./index.scss";
|
||
</style>
|