zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of http://183.222.39.242:3000/zy_oyj/sgxt_web

Browse Source
This commit is contained in:
zy_zr 2025-04-15 18:22:47 +08:00
commit ed4849b193
7 changed files with 572 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/backOfficeSystem/IntelligentControl/myControl/components/areaModel.vue
View File

@ -1,5 +1,5 @@
<template>
<el-dialog v-model="dialogTableVisible" title="XXXXXXX涉及人数" width="1000px" @close="close">
<el-dialog v-model="dialogTableVisible" title="添加范围模型" width="1000px" @close="close">
<div class="dialog-container">
<el-form :model="formData" label-width="auto" label-position="left">
<div class="form-row">

168
src/views/backOfficeSystem/IntelligentControl/myControl/components/drawerAreaModel.vue Normal file
View File

@ -0,0 +1,168 @@
<template>
<div class="drawer-model">
<el-drawer v-model="drawer" title="范围模型(3)" direction="rtl" style="width: 300px">
<div class="project-list">
<!-- 搜索区域 -->
<div class="search-area">
<!-- 搜索区域 -->
<el-form :model="searchForm" label-width="auto" style="max-width: 600px">
<el-form-item label="模型名称">
<el-input v-model="searchForm.projectName" />
</el-form-item>
<el-form-item label="启用状态">
<el-select v-model="searchForm.status" placeholder="启用状态">
<el-option label="启用" value="shanghai" />
<el-option label="禁用" value="beijing" />
</el-select>
</el-form-item>
</el-form>
<div>
<el-button type="primary" icon="Search">查询</el-button>
<el-button type="primary" icon="CirclePlus" @click="areaModel">添加应用模型</el-button>
</div>
<!-- <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" /> -->
</div>
<!-- 列表区域 -->
<div class="list-area">
<div v-for="(item, index) in pageData.tableData" :key="index" class="list-item">
<div class="model-info">
<div class="model-name">巴宜区公路外国模型</div>
<div class="model-type">模型类型：重点区域城规模型</div>
</div>
<el-divider border-style="dotted"></el-divider>
<div class="actions flexcb">
<el-checkbox v-model="item.checked" label="启用" />
<div class="btns">
<span class="set">设置</span>
<span class="delete">删除</span>
</div>
</div>
</div>
</div>
</div>
</el-drawer>
<!-- 添加范围模型 -->
<AreaModel ref="areaModelRef"></AreaModel>
</div>
</template>
<script setup>
import { ref, reactive } from "vue";
import Search from "@/components/aboutTable/Search.vue";
import AreaModel from "./areaModel.vue";
const areaModelRef = ref();
const areaModel = () => {
areaModelRef.value.init();
};
const searchConfiger = ref([
{
label: "项目名称",
prop: "name",
placeholder: "请选择经营状况",
showType: "input"
},
{
label: "启用状态",
prop: "jyzt",
placeholder: "请选择经营状况",
showType: "select",
options: [{ label: "在业", value: "在业" }]
}
]);
// 搜索
const onSearch = val => {
searchForm.value = { ...val };
pageData.pageConfiger.pageCurrent = 1;
getList();
};
const searchForm = ref({
projectName: "",
status: ""
});
// 获取列表
const getList = val => {
// pageData.tableConfiger.loading = true;
// let data = { ...pageData.pageConfiger, ...queryFrom.value };
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
// qcckPost(data,url).then(res=>{
// pageData.tableData = res.records || [];
// pageData.total = res.total;
// pageData.tableConfiger.loading = false;
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
};
const pageData = reactive({
tableData: [
{ checked: false },
{ checked: false },
{ checked: false },
{ checked: false },
{ checked: false },
{ checked: false }
], //表格数据
keyCount: 0,
total: 0,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
} //分页
});
const drawer = ref(false);
// 初始化数据
const init = () => {
drawer.value = true;
// 根据type和row初始化表单数据
};
defineExpose({ init });
</script>
<style lang="scss" scoped>
.drawer-model {
header {
background: none;
}
:deep(.el-drawer) {
width: 400px !important;
}
}
.search-area {
margin-bottom: 20px;
}
.list-area {
display: flex;
flex-direction: column;
gap: 16px;
.model-name {
color: rgb(64, 158, 255);
font-size: 20px;
margin-bottom: 10px;
}
.model-type {
font-size: 18px;
color: #ccc;
}
}
.list-item {
border: 1px solid #e4e7ed;
border-radius: 4px;
padding: 16px;
.el-divider--horizontal {
margin: 10px 0;
}
}
.actions {
.btns {
.set {
color: rgb(64, 158, 255);
}
.delete {
margin-left: 10px;
color: rgb(245, 108, 108);
}
}
}
</style>

29
src/views/backOfficeSystem/IntelligentControl/myControl/components/sendControl.vue
View File

@ -1,4 +1,3 @@
<template>
<div class="dialog" v-if="dialogForm">
<div class="head_box">
@ -10,13 +9,20 @@
<div class="cntinfo">
<div>布控信息</div>
<ControlInfo></ControlInfo>
<div>布控范围</div>
<ControlArea></ControlArea>
<div>审批信息</div>
<ApprovalInfo></ApprovalInfo>
</div>
</div>
</template>
</template>
<script setup>
import { ref, reactive } from 'vue';
<script setup>
import { ref, reactive } from "vue";
import ControlInfo from "./ui/controlInfo.vue";
import ControlArea from "./ui/controlArea.vue";
import ApprovalInfo from "./ui/approvalInfo.vue";
const dialogForm = ref(false);
const listQuery = ref({});
@ -30,21 +36,18 @@
dialogForm.value = false;
};
defineExpose({init})
</script>
defineExpose({ init });
</script>
<style lang="scss" scoped>
<style lang="scss" scoped>
.dialog {
padding: 20px;
.cntinfo{
.cntinfo {
color: #000;
height: calc(100% - 70px);
overflow: hidden;
overflow-y: auto;
}
}
</style>
}
</style>

107
src/views/backOfficeSystem/IntelligentControl/myControl/components/ui/approvalInfo.vue Normal file
View File

@ -0,0 +1,107 @@
<template>
<el-form :model="formData" label-width="auto" label-position="left">
<!-- 处置接收单位 -->
<el-form-item label="处置接收单位">
<div class="unit-selection">
<el-select v-model="formData.receivingUnit" placeholder="请选择单位" style="width: 200px">
<el-option label="巴宜区公安局" value="巴宜区公安局" />
</el-select>
<el-checkbox-group v-model="formData.unitTypes">
<el-checkbox label="责任单位">责任单位</el-checkbox>
<el-checkbox label="活动发生地">活动发生地</el-checkbox>
<el-checkbox label="指定单位">指定单位</el-checkbox>
</el-checkbox-group>
</div>
</el-form-item>
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="提交方式">
<el-checkbox-group v-model="formData.submitMethods">
<el-checkbox label="网络推送">网络推送</el-checkbox>
<el-checkbox label="短信发送">短信发送</el-checkbox>
</el-checkbox-group>
</el-form-item></el-col
>
<el-col :span="6"
><el-form-item label="签收时间">
<el-date-picker
v-model="formData.receiveTime"
type="datetime"
placeholder="签收时间"
format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DD HH:mm"
/> </el-form-item
></el-col>
</el-row>
<!-- 审批流程 -->
<div class="approval-flow">
<div style="height: 300px; max-width: 600px">
<el-steps direction="vertical" :active="1">
<el-step title="发起申请">
<template #description>
<div class="description flexcc">
<div class="description-item">布控发起人</div>
<div class="description-item">发起部门</div>
</div>
</template>
</el-step>
<el-step title="审核确认">
<template #description>
<div class="description flexcc">
<div class="description-item">布控发起人</div>
<div class="description-item">发起部门</div>
</div>
</template>
</el-step>
<el-step title="审批确认">
<template #description>
<div class="description flexcc">
<div class="description-item">布控发起人</div>
<div class="description-item">发起部门</div>
</div>
</template>
</el-step>
</el-steps>
</div>
</div>
</el-form>
</template>
<script setup>
import { ref } from "vue";
const formData = ref({
receivingUnit: "",
unitTypes: [],
submitMethods: [],
receiveTime: "",
initiator: "",
initiatingDepartment: "",
reviewer: "",
reviewDepartment: "",
approver: "",
approveDepartment: ""
});
</script>
<style scoped>
.unit-selection {
display: flex;
align-items: center;
gap: 20px;
}
.description {
gap: 10px;
}
.description-item {
width: 300px;
height: 30px;
padding: 0 20px;
line-height: 30px;
border: 1px solid #ccc;
border-radius: 4px;
color: rgb(131, 132, 135);
box-sizing: border-box;
}
</style>

137
src/views/backOfficeSystem/IntelligentControl/myControl/components/ui/controlArea.vue Normal file
View File

@ -0,0 +1,137 @@
<template>
<div class="control-area">
<div class="map"></div>
<el-form :model="formData" label-width="auto" label-position="left">
<!-- 布控类型 -->
<el-form-item label="布控类型">
<el-radio-group v-model="formData.controlType">
<el-radio-button label="人员布控">人员布控</el-radio-button>
<el-radio-button label="车辆布控">车辆布控</el-radio-button>
<el-radio-button label="电话布控信息">电话布控信息</el-radio-button>
<el-radio-button label="网络信息">网络信息</el-radio-button>
<el-radio-button label="人像布控">人像布控</el-radio-button>
</el-radio-group>
</el-form-item>
<!-- 时间选择 -->
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="布控开始时间">
<el-date-picker
v-model="formData.startTime"
type="datetime"
placeholder="选择开始时间"
format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DD HH:mm"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="布控结束时间">
<el-date-picker
v-model="formData.endTime"
type="datetime"
placeholder="选择结束时间"
format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DD HH:mm"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<!-- 布控要求和级别 -->
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="处置要求">
<el-select v-model="formData.requirement" placeholder="请选择">
<el-option label="实时跟踪" value="track" />
<!-- 添加更多选项 -->
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="布控等级">
<el-select v-model="formData.level" placeholder="请选择">
<el-option label="请选择" value="" />
<!-- 添加更多选项 -->
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="布控要旨">
<el-select v-model="formData.purpose" placeholder="请选择">
<el-option label="请选择" value="" />
<!-- 添加更多选项 -->
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="布控地址">
<el-select v-model="formData.location" placeholder="请选择">
<el-option label="请选择" value="" />
<!-- 添加更多选项 -->
</el-select>
</el-form-item>
</el-col>
</el-row>
<!-- 布控事由 -->
<el-form-item label="布控事由">
<el-input v-model="formData.reason" type="textarea" :rows="4" placeholder="请输入布控事由" />
</el-form-item>
<!-- 上传附件 -->
<el-form-item label="上传附件">
<el-upload action="#" :auto-upload="false" :on-change="handleFileChange" :file-list="fileList">
<el-button type="primary">
<el-icon><Plus /></el-icon>
支持jpg、png、pdf等上传
</el-button>
</el-upload>
</el-form-item>
</el-form>
</div>
</template>
<script setup>
import { ref } from "vue";
const formData = ref({
controlType: "人员布控",
startTime: "",
endTime: "",
requirement: "",
level: "",
purpose: "",
location: "",
reason: ""
});
const fileList = ref([]);
const handleFileChange = (file, fileList) => {
console.log(file, fileList);
};
</script>
<style lang="scss" scoped>
.control-area {
.map {
height: 200px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
margin: 10px 0;
}
.el-form {
/* max-width: 1200px;
margin: 20px auto; */
}
:deep(.el-textarea__inner) {
font-family: inherit;
}
}
</style>

126
src/views/backOfficeSystem/IntelligentControl/myControl/components/ui/controlInfo.vue
View File

@ -1,72 +1,126 @@
<template>
<div>
<div class="info-container">
<!-- 布控信息 -->
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="布控标题">
<el-input v-model="formInline.user" placeholder="Approved by" clearable />
</el-form-item>
<el-form-item label="预警标签模型">
<el-select
v-model="formInline.region"
placeholder="Activity zone"
clearable
>
<el-select v-model="formInline.region" placeholder="Activity zone" clearable>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="所属警钟">
<el-select
v-model="formInline.region"
placeholder="Activity zone"
clearable
>
<el-select v-model="formInline.region" placeholder="Activity zone" clearable>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="布控对象">
<el-select
v-model="formInline.person"
placeholder="Activity zone"
clearable
>
<el-select v-model="formInline.person" placeholder="Activity zone" clearable>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
</el-form>
<!-- 按钮 -->
<div>
<div class="btns">
<el-button type="primary">新增</el-button>
<el-button type="danger">批量删除</el-button>
</div>
<MyTable
:tableData="pageData.tableData"
:tableColumn="pageData.tableColumn"
:key="pageData.keyCount"
:tableConfiger="pageData.tableConfiger"
:controlsWidth="pageData.controlsWidth"
@chooseData="chooseData"
>
<template #photo="{ row }">
<img width="30" src="@/assets/images/icon100.png" alt="" />
</template>
<template #controls="{ row }">
<el-button size="small" type="primary" link>查看档案</el-button>
<el-button size="small" type="primary" link>编辑</el-button>
<el-button size="small" type="danger" link>删除</el-button>
</template>
</MyTable>
</div>
</template>
<script setup>
import { reactive } from 'vue'
import { reactive } from "vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
const formInline = reactive({
user: '',
region: '',
date: '',
})
const formInline = reactive({
user: "",
region: "",
date: ""
});
const pageData = reactive({
tableData: [
{
photo: "",
name: "某三",
gender: "男",
idNumber: "500352199705022365",
currentAddress: "西藏特警...",
phoneNumber: "1525421452",
uploadStatus: "smsj",
carNumber: "藏A12345",
vehicleNumber: "AKBC123",
specialLicense: "已同步上传",
personTag: "网络延迟"
}
], //表格数据
keyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "checkBox",
loading: false,
size: "small",
border: false
},
total: 0,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
}, //分页
controlsWidth: 220, //操作栏宽度
tableColumn: [
{ label: "照片", prop: "photo", showSolt: true },
{ label: "姓名", prop: "name" },
{ label: "性别", prop: "gender" },
{ label: "身份证号", prop: "idNumber" },
{ label: "户籍地", prop: "户籍地" },
{ label: "现居住地", prop: "currentAddress" },
{ label: "手机号", prop: "phoneNumber" },
{ label: "同步上传", prop: "uploadStatus" },
{ label: "车牌号", prop: "carNumber" },
{ label: "车号", prop: "vehicleNumber" },
{ label: "特许证号", prop: "specialLicense" },
{ label: "人员标签", prop: "personTag" }
]
});
const onSubmit = () => {
console.log('submit!')
}
const onSubmit = () => {
console.log("submit!");
};
// 选择
const chooseData = () => {};
</script>
<style lang="scss" scoped>
.demo-form-inline .el-input {
--el-input-width: 220px;
}
// .demo-form-inline .el-input {
// --el-input-width: 220px;
// }
.demo-form-inline .el-select {
--el-select-width: 220px;
}
// .demo-form-inline .el-select {
// --el-select-width: 220px;
// }
.info-container {
.btns {
margin-bottom: 10px;
}
}
</style>

17
src/views/backOfficeSystem/IntelligentControl/myControl/index.vue
View File

@ -13,10 +13,9 @@
<div>
<el-button type="primary" @click="sendControl">发起布控</el-button>
<el-button type="primary">导出</el-button>
<el-button type="primary">发起布控</el-button>
<el-button type="danger">批量删除</el-button>
<el-button type="primary" icon="CirclePlus">添加标签模型</el-button>
<el-button type="primary" icon="CirclePlus" @click="areaModel">添加范围模型</el-button>
<el-button type="primary" icon="CirclePlus" @click="drawerModel">添加范围模型</el-button>
<el-button type="primary" icon="CirclePlus" @click="personNum">涉及人数</el-button>
</div>
<el-input v-model="input2" style="max-width: 300px" placeholder="请输入关键字">
@ -56,8 +55,9 @@
<!-- 发起布控 -->
<SendControl ref="sendControlRef"></SendControl>
<PersonNum ref="personNumRef"></PersonNum>
<!-- 添加范围模型 -->
<AreaModel ref="areaModelRef"></AreaModel>
<!-- 侧边栏 -->
<DrawerAreaModel ref="drawerModelRef"></DrawerAreaModel>
</div>
</template>
@ -69,7 +69,7 @@
import DetailForm from "./components/detailForm.vue";
import SendControl from "./components/sendControl.vue";
import PersonNum from "./components/personNum.vue";
import AreaModel from "./components/areaModel.vue";
import DrawerAreaModel from "./components/drawerAreaModel.vue";
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
@ -124,7 +124,7 @@
options: [{ label: "在业", value: "在业" }]
}
]);
const areaModelRef = ref();
const drawerModelRef = ref();
const queryFrom = ref({});
const pageData = reactive({
tableData: [
@ -221,8 +221,9 @@
};
// 添加范围模型
const areaModel = () => {
areaModelRef.value.init();
// 侧边栏
const drawerModel = () => {
drawerModelRef.value.init();
};
// 表格高度计算
const tabHeightFn = () => {