124
This commit is contained in:
@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form ref="elform" :model="form" :inline="true" label-position="top">
|
||||
<el-form-item prop="ssbmdm" label="预警类型" style="width: 40%">
|
||||
<el-select
|
||||
clearable
|
||||
disabled
|
||||
v-model="listQuery.yjLx"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dict.D_BZ_YJLX"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="感知源名称" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.yjGzymc"
|
||||
placeholder="感知源名称"
|
||||
clearable
|
||||
disabled
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="scode" label="预警发生时间" style="width: 40%">
|
||||
<el-date-picker
|
||||
v-model="listQuery.yjSj"
|
||||
type="datetime"
|
||||
placeholder="请选中开始时间"
|
||||
format="YYYY-MM-DD hh:mm:ss"
|
||||
disabled
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sbmc" label="预警对象" style="width: 40%">
|
||||
<el-input
|
||||
v-model="DX"
|
||||
placeholder="请输入装备名称"
|
||||
clearable
|
||||
disabled
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="预警地址" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.yjDz"
|
||||
placeholder="请输入预警地址"
|
||||
disabled
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="预警级别" style="width: 40%">
|
||||
<el-select
|
||||
clearable
|
||||
disabled
|
||||
v-model="listQuery.yjJb"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dict.D_BZ_YJJB"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="预警内容" style="width: 100%">
|
||||
<el-input
|
||||
v-model="listQuery.yjNr"
|
||||
disabled
|
||||
placeholder="请输入关键字"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="预警图片">
|
||||
<el-image
|
||||
:preview-src-list="[listQuery.yjTp]"
|
||||
fit="cover"
|
||||
style="width: 100px; height: 100px"
|
||||
:src="listQuery.yjTp"
|
||||
></el-image>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { TcsbsaveTcsbsave, Tcsbupdate } from "@/api/mosty-jcz.js";
|
||||
import { Right, Back } from "@element-plus/icons-vue";
|
||||
import { baseselectPage } from "@/api/mosty-base";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
|
||||
const formRef = ref(null);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
let pageType = ref("add");
|
||||
const propsTree = ref({
|
||||
checkStrictly: true,
|
||||
emitPath: false,
|
||||
multiple: false
|
||||
});
|
||||
// 初始化数据
|
||||
const DX = ref();
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit" || type == "detail") {
|
||||
DX.value = row.yjRyxm ? row.yjRyxm : row.yjClcph;
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
DX.value = "";
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #e0e0e0;
|
||||
margin-bottom: 14px;
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
159
src/views/backOfficeSystem/peopleManag/forewarning/index.vue
Normal file
159
src/views/backOfficeSystem/peopleManag/forewarning/index.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="预警管理"> </PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #yjTp="{ row }">
|
||||
<div class="phone">
|
||||
<el-image v-if="row.tp" :src="urlImg + row.yjTp" fit="cover" lazy />
|
||||
<el-image v-else :src="Person" fit="cover" lazy />
|
||||
</div>
|
||||
</template>
|
||||
<template #yjLx="{ row }">
|
||||
<dict-tag :options="D_BZ_YJLX" :value="row.yjLx" :tag="false" />
|
||||
</template>
|
||||
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm ref="detailDiloag" :dict="{ D_BZ_YJLX, D_BZ_YJJB }" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import { jczgetPageList } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, watch } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const { D_BZ_YJLX, D_BZ_YJJB } = proxy.$dict("D_BZ_YJLX", "D_BZ_YJJB");
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "预警类型",
|
||||
prop: "yjLx",
|
||||
placeholder: "预警类型",
|
||||
showType: "select",
|
||||
options: D_BZ_YJLX
|
||||
},
|
||||
{
|
||||
label: "发生时间",
|
||||
prop: "startTime",
|
||||
placeholder: "发生时间",
|
||||
showType: "datetimerange"
|
||||
}
|
||||
// {
|
||||
// label: "预警对象",
|
||||
// prop: "yjLx",
|
||||
// placeholder: "请输入预警对象",
|
||||
// showType: "input"
|
||||
// }
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "预警图片", prop: "yjTp", showSolt: true },
|
||||
{ label: "感知源名称", prop: "yjGzymc" },
|
||||
{ label: "预警时间", prop: "yjSj" },
|
||||
{ label: "预警人员", prop: "yjRyxm" },
|
||||
{ label: "预警车牌号", prop: "yjClcph" },
|
||||
{ label: "预警类型", prop: "yjLx", showSolt: true }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({});
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
jczgetPageList(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user