Merge branch 'yanyan_dev' into kun_dev
This commit is contained in:
kun
commit
997da83b36
@ -376,3 +376,35 @@ export const getEngineerInfo = (params: { id: string }) => {
|
||||
export const getProjectInfo = (params: { id: string }) => {
|
||||
return http.post(BASEURL + `/gov/project/queryById`, params);
|
||||
};
|
||||
|
||||
//无人机影像数据列表
|
||||
// 分页列表查询无人机影像项目信息
|
||||
export const getUnmannedProjectPage = (params: {}) => {
|
||||
return http.post(BASEURL + `/gov/unmannedVideo/projectPage`, params);
|
||||
};
|
||||
|
||||
// 分页列表查询无人机影像工程信息
|
||||
export const getUnmannedEngineeringPage = (params: {}) => {
|
||||
return http.post(BASEURL + `/gov/unmannedVideo/engineeringPage`, params);
|
||||
};
|
||||
|
||||
// 分页列表查询无人机影像数据列表
|
||||
export const getUnmannedPage = (params: {}) => {
|
||||
return http.post(BASEURL + `/gov/unmannedVideo/page`, params);
|
||||
};
|
||||
|
||||
//无人机影像设备列表
|
||||
// 分页列表查询无人机影像项目信息
|
||||
export const getDeviceProjectPage = (params: {}) => {
|
||||
return http.post(BASEURL + `/gov/unmannedDevice/projectPage`, params);
|
||||
};
|
||||
|
||||
// 分页列表查询无人机影像工程信息
|
||||
export const getDeviceEngineeringPage = (params: {}) => {
|
||||
return http.post(BASEURL + `/gov/unmannedDevice/engineeringPage`, params);
|
||||
};
|
||||
|
||||
// 分页列表查询无人机影像数据列表
|
||||
export const getDevicePage = (params: {}) => {
|
||||
return http.post(BASEURL + `/gov/unmannedDevice/page`, params);
|
||||
};
|
||||
|
||||
BIN
src/assets/images/unmannedVideo/video.png
Normal file
BIN
src/assets/images/unmannedVideo/video.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 723 B |
176
src/views/goverment/unmannedVideo/accessSituation/index.scss
Normal file
176
src/views/goverment/unmannedVideo/accessSituation/index.scss
Normal file
@ -0,0 +1,176 @@
|
||||
.warning-page {
|
||||
// background-color: blue;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.right_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 83%;
|
||||
|
||||
// margin-left: 20px;
|
||||
padding: 0 0 0 20px;
|
||||
.form_div {
|
||||
height: 56px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.form {
|
||||
padding: 16px 0 0 36px;
|
||||
|
||||
// height: 56px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.imgPage {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: 20px 10px 20px 20px;
|
||||
margin-top: 20px;
|
||||
overflow-y: scroll;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
.imgTable {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
.img_item {
|
||||
width: 23.1%;
|
||||
height: 244px;
|
||||
margin: 10px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #dedddd;
|
||||
border-radius: 4px;
|
||||
opacity: 1;
|
||||
.page_text {
|
||||
padding: 0 10px;
|
||||
.img_bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
.position {
|
||||
width: 97px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-empty {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999999;
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-scrollbar__view) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
}
|
||||
.img_title {
|
||||
margin: 0 0 4px;
|
||||
font-family: "siyuan_Medium";
|
||||
font-size: 14px;
|
||||
color: #00378f;
|
||||
}
|
||||
.img_div {
|
||||
overflow: auto;
|
||||
.diaImg {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
}
|
||||
.img_diatitle {
|
||||
font-family: "siyuan_Medium";
|
||||
font-size: 14px;
|
||||
color: #00378f;
|
||||
}
|
||||
.img_text {
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
|
||||
// background-clip: text;
|
||||
// fill-color: transparent;
|
||||
}
|
||||
.pending {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 6px;
|
||||
background-color: #f08117;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.complete {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 6px;
|
||||
background-color: #008bff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// 处理中
|
||||
.processing {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 6px;
|
||||
background-color: #19ac18;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.leftMenu {
|
||||
// width: 290px;
|
||||
// 页面的项目工程
|
||||
.leftProject {
|
||||
// padding: 5px 8px;
|
||||
color: #333333;
|
||||
.projectName {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
// font-weight: 700;
|
||||
font-family: "siyuan_Medium";
|
||||
font-size: 16px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.leftMenu_item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.middleSize {
|
||||
font-size: 12px;
|
||||
}
|
||||
img {
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
.bottom_item {
|
||||
.bottomSize {
|
||||
font-size: 10px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-form .el-form-item__content .el-range-editor) {
|
||||
width: 200px;
|
||||
}
|
||||
444
src/views/goverment/unmannedVideo/accessSituation/index.vue
Normal file
444
src/views/goverment/unmannedVideo/accessSituation/index.vue
Normal file
@ -0,0 +1,444 @@
|
||||
<template>
|
||||
<div class="warning-page">
|
||||
<LeftMenu
|
||||
v-model="active"
|
||||
:tabs="['项目名称', '工程名称']"
|
||||
: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 ResAiProjectPage).projectName || (data as ResAiEngineerPage).engineeringName
|
||||
}}</span>
|
||||
<div class="leftMenu_item">
|
||||
<div class="video">
|
||||
<img src="@/assets/images/unmannedVideo/video.png" width="11" height="11" alt="" />
|
||||
<span class="middleSize">影像视频数：{{ data.videoNum }}</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" clearable 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-item>
|
||||
<el-button type="warning" @click="handleCurrentChange(1)">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- </div> -->
|
||||
|
||||
<div class="imgPage">
|
||||
<div class="imgTable" v-if="questList.records.length">
|
||||
<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.title }}</div>
|
||||
<div class="img_bottom">
|
||||
<div style="font-size: 12px">时间：{{ item.createTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="table-empty">
|
||||
<img src="@/assets/images/notData.png" alt="notData" />
|
||||
<div>暂无数据</div>
|
||||
</div>
|
||||
<!-- :handleSizeChange="handleSizeChange" -->
|
||||
<Pagination
|
||||
:pageable="pageable"
|
||||
:total="pageable.total"
|
||||
:page-size="pageable.pageSize"
|
||||
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.reportTime }}</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 {
|
||||
getUnmannedProjectPage,
|
||||
getUnmannedEngineeringPage,
|
||||
getUnmannedPage
|
||||
// addAIrecords,
|
||||
// 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";
|
||||
import { format } from "date-fns";
|
||||
|
||||
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: 12,
|
||||
total: 0
|
||||
});
|
||||
|
||||
const records = ref<ResAiProjectPage[] | ResAiEngineerPage[]>([]);
|
||||
|
||||
const questList = ref({
|
||||
records: []
|
||||
});
|
||||
const form = ref({
|
||||
code: "",
|
||||
createTime: "",
|
||||
startTime: "",
|
||||
endTime: ""
|
||||
});
|
||||
// form下拉框
|
||||
const nameList = ref([]);
|
||||
|
||||
// 点击图片存的数据
|
||||
const imgList = ref({
|
||||
// alarmId: "",
|
||||
createBy: "",
|
||||
createTime: "",
|
||||
reportTime: "",
|
||||
deviceCode: "",
|
||||
deviceName: "",
|
||||
// engineeringSn: "",
|
||||
id: "",
|
||||
image: "",
|
||||
projectSn: "",
|
||||
remark: "",
|
||||
solveBy: "",
|
||||
solveImage: "",
|
||||
solveTime: "",
|
||||
state: -1,
|
||||
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;
|
||||
// console.log(params);
|
||||
|
||||
imgList.value = { ...params };
|
||||
// delete imgList.value.id;
|
||||
};
|
||||
|
||||
// 页面的分页
|
||||
const handleCurrentChange = async (page: number) => {
|
||||
const { result } = await getUnmannedPage(
|
||||
active.value === 0
|
||||
? {
|
||||
pageNo: page,
|
||||
pageSize: pageable.value.pageSize,
|
||||
projectSn: searchSn.value
|
||||
}
|
||||
: {
|
||||
pageNo: page,
|
||||
pageSize: pageable.value.pageSize,
|
||||
engineeringSn: searchSn.value
|
||||
}
|
||||
);
|
||||
console.log(result);
|
||||
questList.value = result;
|
||||
pageable.value.total = Number(result.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 getUnmannedPage(
|
||||
active.value === 0
|
||||
? { ...form.value, ...pageable.value, projectSn: searchSn.value }
|
||||
: { ...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 { result } = await getUnmannedPage(
|
||||
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 = result;
|
||||
pageable.value.total = Number(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: ""
|
||||
};
|
||||
getAiMonitorDevList();
|
||||
};
|
||||
|
||||
// leftMenu页面的搜索按钮
|
||||
const onSearchInput = async (params: string) => {
|
||||
if (active.value === 0) {
|
||||
const { result } = await getUnmannedProjectPage({ projectName: params, ...pages.value });
|
||||
records.value = result.records;
|
||||
} else {
|
||||
const { result } = await getUnmannedEngineeringPage({ engineeringName: params, ...pages.value });
|
||||
records.value = result.records;
|
||||
}
|
||||
};
|
||||
|
||||
// leftMenu页面的分页
|
||||
const onCurChange = async (params: number) => {
|
||||
if (active.value === 0) {
|
||||
const { result } = await getUnmannedProjectPage({ ...pages.value, pageNo: params });
|
||||
records.value = result.records;
|
||||
} else {
|
||||
const { result } = await getUnmannedEngineeringPage({ ...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 addAIrecords(form);
|
||||
visible.value = false;
|
||||
imgVisible.value = false;
|
||||
ElMessage.success("发布成功");
|
||||
await handSearch();
|
||||
};
|
||||
|
||||
// 获取项目名称分页
|
||||
const getAIproPage = async () => {
|
||||
const { result } = await getUnmannedProjectPage(pages.value);
|
||||
records.value = result.records;
|
||||
pages.value.total = Number(result.total);
|
||||
};
|
||||
// 获取工程名称分页
|
||||
const getAIengPage = async () => {
|
||||
const { result } = await getUnmannedEngineeringPage(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]);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// function parse(val) {
|
||||
// return val.trim() ? JSON.parse(val) : {};
|
||||
// }
|
||||
|
||||
watch(
|
||||
() => form.value.createTime,
|
||||
() => {
|
||||
if (form.value.createTime === null) {
|
||||
form.value.startTime = "";
|
||||
form.value.endTime = "";
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
// getAIengPage();
|
||||
getAiMonitorDevList();
|
||||
await getAIproPage();
|
||||
onSearch(records.value[0]);
|
||||
searchSn.value = (records.value as ResAiProjectPage[])[0].projectSn;
|
||||
searchName.value = (records.value as ResAiProjectPage[])[0].projectName;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
130
src/views/goverment/unmannedVideo/alarmRecord/index.scss
Normal file
130
src/views/goverment/unmannedVideo/alarmRecord/index.scss
Normal file
@ -0,0 +1,130 @@
|
||||
.warning-page {
|
||||
// background-color: blue;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.right_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 83%;
|
||||
|
||||
// margin-left: 20px;
|
||||
padding: 0 0 0 20px;
|
||||
|
||||
// padding: 0 13% 0 20px;
|
||||
// background-color: aqua;
|
||||
.form_div {
|
||||
height: 56px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
|
||||
// display: flex;
|
||||
// // justify-content: center;
|
||||
// align-items: center;
|
||||
}
|
||||
.form {
|
||||
padding: 16px 0 0 36px;
|
||||
|
||||
// height: 56px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.imgPage {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
.img_item {
|
||||
width: 31.3%;
|
||||
|
||||
// height: 26%;
|
||||
// padding: 10px;
|
||||
margin: 10px;
|
||||
border: 1px solid #dedddd;
|
||||
border-radius: 4px;
|
||||
opacity: 1;
|
||||
.page_text {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.diaForm {
|
||||
padding: 0 10% 0 0;
|
||||
}
|
||||
.img_title {
|
||||
margin: 0 0 4px;
|
||||
font-family: "siyuan_Medium";
|
||||
font-size: 14px;
|
||||
color: #00378f;
|
||||
}
|
||||
.img_diatitle {
|
||||
font-family: "siyuan_Medium";
|
||||
font-size: 14px;
|
||||
color: #00378f;
|
||||
}
|
||||
.img_text {
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
|
||||
// background-clip: text;
|
||||
// fill-color: transparent;
|
||||
}
|
||||
.pending {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 6px;
|
||||
background-color: #f08117;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.complete {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 6px;
|
||||
background-color: #008bff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// 页面的项目工程
|
||||
.leftProject {
|
||||
color: #333333;
|
||||
.projectName {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
// font-weight: 700;
|
||||
font-family: "siyuan_Medium";
|
||||
font-size: 16px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.leftMenu_item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.middleSize {
|
||||
font-size: 12px;
|
||||
}
|
||||
img {
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
.bottom_item {
|
||||
.bottomSize {
|
||||
font-size: 10px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-form .el-form-item__content .el-range-editor) {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
// 没生效
|
||||
// :deep(.el-dialog__body) {
|
||||
// padding: 0 !important;
|
||||
// }
|
||||
328
src/views/goverment/unmannedVideo/alarmRecord/index.vue
Normal file
328
src/views/goverment/unmannedVideo/alarmRecord/index.vue
Normal file
@ -0,0 +1,328 @@
|
||||
<template>
|
||||
<div class="warning-page">
|
||||
<LeftMenu
|
||||
v-model="active"
|
||||
:records="records"
|
||||
:tabs="['项目名称', '工程名称']"
|
||||
@change-page="onCurChange"
|
||||
@search="onSearchInput"
|
||||
:pageable="pages"
|
||||
>
|
||||
<!-- :change-color="changeColor" -->
|
||||
<template #default="{ data }">
|
||||
<div>
|
||||
<div class="leftProject" @click="onSearch(data)">
|
||||
<span class="projectName">{{
|
||||
(data as ResAiProjectPage).projectName || (data as ResAiEngineerPage).engineeringName
|
||||
}}</span>
|
||||
<div class="leftMenu_item">
|
||||
<div class="video">
|
||||
<img src="@/assets/images/unmannedVideo/video.png" width="11" height="11" alt="" />
|
||||
<span class="middleSize">接入无人机总数：{{ data.videoNum }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</LeftMenu>
|
||||
<div class="right_container">
|
||||
<el-form :model="form" :inline="true" @submit.prevent class="form" ref="FormRef">
|
||||
<el-form-item label="设备名称">
|
||||
<el-select class="select" clearable 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>
|
||||
<el-button type="primary" @click="handSearch">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="warning" @click="handleCurrentChange(1)">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<ProTable
|
||||
ref="proTable"
|
||||
title="用户列表"
|
||||
:columns="columns"
|
||||
:requestApi="getTableList"
|
||||
:initParam="initParam"
|
||||
:dataCallback="dataCallback"
|
||||
:tool-button="false"
|
||||
:pagination="true"
|
||||
background
|
||||
:isShowSearch="false"
|
||||
>
|
||||
<!-- 表格操作 -->
|
||||
<!-- <template #operation="{ row }">
|
||||
<el-button type="primary" link @click="onSee(row)"
|
||||
><img src="@/assets/images/tableIcon/look.png" alt="" class="configureIcon" /><span>查看</span></el-button
|
||||
>
|
||||
</template> -->
|
||||
<template #image="{ row }">
|
||||
<el-image style="width: 66px; height: 37px" :src="row.image" fit="fill" />
|
||||
</template>
|
||||
<template #state="{ row }">
|
||||
{{ row.state === 0 ? "待整改" : "已整改" }}
|
||||
</template>
|
||||
</ProTable>
|
||||
</div>
|
||||
<el-dialog class="imgDialog" title="查看" width="50%" v-model="visible" show-close>
|
||||
<div class="littleTitle Snap">抓拍隐患</div>
|
||||
<el-form class="diaForm" disabled :model="form" ref="topForm" label-width="180px">
|
||||
<el-form-item label="名称：">
|
||||
<el-input v-model="form.projectName" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="隐患类型：">
|
||||
<el-input v-model="form.typeName" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图片显示：">
|
||||
<!-- <el-image v-model="form.image" placeholder="请输入" /> -->
|
||||
<el-image style="width: 95px; height: 53px" :src="form.image" fit="fill" />
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="下达人：">
|
||||
<el-input v-model="form.createBy" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="创建时间：">
|
||||
<el-date-picker style="width: 100%" v-model="form.createTime" type="date" placeholder="请选择时间" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="littleTitle situation">整改情况</div>
|
||||
<el-form-item label="整改状态：">
|
||||
<el-radio-group v-model="form.state">
|
||||
<el-radio :label="0">待整改</el-radio>
|
||||
<el-radio :label="1">已整改</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="整改图片：">
|
||||
<el-image style="width: 95px; height: 53px" :src="form.solveImage" fit="fill" />
|
||||
</el-form-item>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="整改人：">
|
||||
<el-input v-model="form.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="form.solveTime" type="date" placeholder="请选择时间" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="备注：">
|
||||
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="form.remark" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="footer">
|
||||
<el-button type="primary" @click="visible = false">关闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import ProTable from "@/components/ProTable/index.vue";
|
||||
import { ColumnProps } from "@/components/ProTable/interface";
|
||||
import { getDeviceProjectPage, getDeviceEngineeringPage, getAIQuestionPage, getDevicePage } from "@/api/modules/goverment";
|
||||
import LeftMenu from "@/components/LeftMenu/LeftMenu.vue";
|
||||
import type { ResAiProjectPage, ResAiEngineerPage } from "@/api/types/government/AIwaring";
|
||||
import { json } from "stream/consumers";
|
||||
|
||||
const proTable = ref();
|
||||
|
||||
const active = ref(0);
|
||||
const visible = ref(false);
|
||||
// const leftBack = ref(false);
|
||||
const searchSn = ref<string>("");
|
||||
// 项目或者工程名字
|
||||
const searchName = ref<string>("");
|
||||
const pages = ref({
|
||||
pageNo: 1,
|
||||
pageSize: 6,
|
||||
total: 0
|
||||
});
|
||||
|
||||
const records = ref<ResAiProjectPage[] | ResAiEngineerPage[]>([]);
|
||||
const form = ref({
|
||||
projectName: "",
|
||||
alarmId: "",
|
||||
createBy: "",
|
||||
createTime: "",
|
||||
deviceCode: "",
|
||||
deviceName: "",
|
||||
engineeringSn: "",
|
||||
hardwareId: "",
|
||||
id: "",
|
||||
image: "",
|
||||
projectSn: "",
|
||||
remark: "",
|
||||
solveBy: "",
|
||||
solveImage: "",
|
||||
solveTime: "",
|
||||
state: undefined,
|
||||
type: undefined,
|
||||
typeName: ""
|
||||
});
|
||||
|
||||
// 表格配置项
|
||||
const columns: ColumnProps[] = [
|
||||
{ type: "index", label: "序号", width: 80 },
|
||||
{
|
||||
prop: "serialNumber",
|
||||
label: "设备序列号"
|
||||
},
|
||||
// 多级 prop
|
||||
{ prop: "operator", label: "飞控程序员" },
|
||||
{
|
||||
prop: "dname",
|
||||
label: "设备名称"
|
||||
},
|
||||
{
|
||||
prop: "brand",
|
||||
label: "品牌"
|
||||
},
|
||||
{
|
||||
prop: "model",
|
||||
label: "型号"
|
||||
},
|
||||
{
|
||||
prop: "droneType",
|
||||
label: "无人机类型"
|
||||
},
|
||||
{
|
||||
prop: "liveUrl",
|
||||
label: "绑定直播url"
|
||||
},
|
||||
{
|
||||
prop: "image",
|
||||
label: "设备图片"
|
||||
}
|
||||
// { prop: "operation", label: "操作", fixed: "right" }
|
||||
];
|
||||
|
||||
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
|
||||
const initParam = reactive({
|
||||
solveFlag: 1
|
||||
});
|
||||
|
||||
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]);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
|
||||
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
|
||||
const dataCallback = (data: any) => {
|
||||
return {
|
||||
list: data.records,
|
||||
total: Number(data.total),
|
||||
pageNo: Number(data.current),
|
||||
pageSize: Number(data.size)
|
||||
};
|
||||
};
|
||||
|
||||
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
|
||||
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
|
||||
const getTableList = (params: any) => {
|
||||
let newParams = JSON.parse(JSON.stringify(params));
|
||||
active.value === 0 ? (newParams.projectSn = searchSn.value) : (newParams.engineeringSn = searchSn.value);
|
||||
return getDevicePage(newParams);
|
||||
};
|
||||
|
||||
// const changeColor = () => {
|
||||
// leftBack.value = true;
|
||||
// console.log(11);
|
||||
// };
|
||||
|
||||
// 页面的项目名称和工程名称的div点击事件
|
||||
const onSearch = async (params: ResAiProjectPage | ResAiEngineerPage) => {
|
||||
// changeColor();
|
||||
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);
|
||||
proTable.value.getTableList();
|
||||
};
|
||||
|
||||
const onSee = row => {
|
||||
// row.state === 0 ? form.value.state === "待整改" : form.value.state === "已整改";
|
||||
form.value = { ...row };
|
||||
form.value.projectName = searchName.value;
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
// leftMenu页面的搜索按钮
|
||||
const onSearchInput = async (params: string) => {
|
||||
if (active.value === 0) {
|
||||
const { result } = await getDeviceProjectPage({ projectName: params, ...pages.value });
|
||||
records.value = result.records;
|
||||
} else {
|
||||
const { result } = await getDeviceEngineeringPage({ engineeringName: params, ...pages.value });
|
||||
records.value = result.records;
|
||||
}
|
||||
};
|
||||
|
||||
// 页面的分页
|
||||
const onCurChange = async (params: number) => {
|
||||
if (active.value === 0) {
|
||||
const { result } = await getDeviceProjectPage({ ...pages.value, pageNo: params });
|
||||
records.value = result.records;
|
||||
} else {
|
||||
const { result } = await getDeviceEngineeringPage({ ...pages.value, pageNo: params });
|
||||
records.value = result.records;
|
||||
pages.value.total = +result.total;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取项目名称分页
|
||||
const getAIproPage = async () => {
|
||||
const { result } = await getDeviceProjectPage(pages.value);
|
||||
records.value = result.records;
|
||||
pages.value.total = Number(result.total);
|
||||
};
|
||||
// 获取工程名称分页
|
||||
const getAIengPage = async () => {
|
||||
const { result } = await getDeviceEngineeringPage(pages.value);
|
||||
records.value = result.records;
|
||||
pages.value.total = +result.total;
|
||||
};
|
||||
|
||||
// function parse(val) {
|
||||
// return val.trim() ? JSON.parse(val) : {};
|
||||
// }
|
||||
|
||||
onMounted(async () => {
|
||||
// getAIengPage();
|
||||
await getAIproPage();
|
||||
onSearch(records.value[0]);
|
||||
searchSn.value = (records.value as ResAiProjectPage[])[0].projectSn;
|
||||
searchName.value = (records.value as ResAiProjectPage[])[0].projectName;
|
||||
// initParam.projectSn = searchSn.value;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user