1258 lines
38 KiB
Vue
1258 lines
38 KiB
Vue
<template>
|
||
<div class="cont">
|
||
<el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabChange">
|
||
<el-tab-pane label="布控对象" name="second">
|
||
<a-button type="primary" style="margin-left: 20px" @click="sendBk()">新增对象</a-button>
|
||
<a-button type="primary" style="margin-left: 20px" @click="openGroupDialog()">分组管理</a-button>
|
||
<div style="padding: 10px; height: calc(100% - 85px); overflow: auto">
|
||
<el-table :data="tableData2" border style="width: 100%">
|
||
<el-table-column type="index" width="60" label="序号" align="center" :index="indexMethod1" />
|
||
<el-table-column label="布控对象属性类型" align="center">
|
||
<template #default="scope">
|
||
{{ scope.row.targetType == 'face' ? '人脸' : '车牌号' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="targetName" label="布控对象名称" align="center" />
|
||
<el-table-column prop="targetValue" label="布控对象属性值" align="center" show-overflow-tooltip />
|
||
<el-table-column prop="groupName" label="布控对象分组" align="center" />
|
||
<!-- <el-table-column prop="groupLevel" label="分组等级" align="center" /> -->
|
||
<el-table-column prop="targetLevel" label="布控对象等级" align="center" />
|
||
<el-table-column prop="imageData" label="布控对象数据" align="center" />
|
||
<el-table-column prop="controlstatus" label="布控状态" align="center" />
|
||
<el-table-column label="布控对象照片" align="center">
|
||
<template #default="scope">
|
||
<!-- <a-image :width="100" :height="100" :src="scope.row.imageUrl" /> -->
|
||
<el-button @click="handleClick(scope.row.imageUrl)" type="primary" primary size="small">查看</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center">
|
||
<template #default="scope">
|
||
<a-button type="primary" @click="handleTableChange(scope.row)" size="small">修改</a-button>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center">
|
||
<template #default="scope">
|
||
<el-popconfirm @confirm="handleTableDelete(scope.row.targetId)" title="确定要删除该布控对象么?">
|
||
<template #reference>
|
||
<a-button type="primary" danger size="small">删除</a-button>
|
||
</template>
|
||
</el-popconfirm>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination style="position: absolute; right: 60px" @current-change="handleCurrentChange2" :page-size="15" layout="total, prev, pager, next" :total="total2"> </el-pagination>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="布控任务" name="first">
|
||
<a-button type="primary" style="margin-left: 20px" @click="sendbkrw">申请布控任务</a-button>
|
||
<div style="padding: 10px; height: calc(100% - 52px); overflow: auto">
|
||
<el-table :data="tableData" border style="width: 100%">
|
||
<el-table-column type="index" width="60" label="序号" align="center" :index="indexMethod2" />
|
||
<el-table-column prop="targetValue" label="布控对象号码" align="center" show-overflow-tooltip />
|
||
<el-table-column label="布控对象类型" align="center">
|
||
<template #default="scope">
|
||
{{ scope.row.targetType == 'face' ? '人脸' : '车牌号' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="searchCity" label="比对城市" align="center" />
|
||
<el-table-column prop="searchDistrict" label="比对区县" align="center" />
|
||
<el-table-column prop="level" label="任务等级" align="center" />
|
||
<el-table-column prop="alarmType" label="预警类型" align="center" />
|
||
<el-table-column prop="state" label="状态" align="center" />
|
||
<el-table-column prop="timestamp" label="申请时间" align="center" show-overflow-tooltip />
|
||
<el-table-column prop="startTime" label="开始时间" align="center" show-overflow-tooltip />
|
||
<el-table-column prop="endTime" label="结束时间" align="center" show-overflow-tooltip />
|
||
<el-table-column label="操作" align="center">
|
||
<template #default="scope">
|
||
<!-- <a-button type="link" @click="chekong(scope.row)">撤控</a-button> -->
|
||
<a-button style="margin-right: 10px" type="primary" @click="xkong(scope.row)" size="small">续控</a-button>
|
||
<el-popconfirm title="确定撤控吗？" @confirm="chekong(scope.row)">
|
||
<template #reference>
|
||
<!-- <el-button>撤控</el-button> -->
|
||
<a-button type="primary" danger size="small">撤控</a-button>
|
||
</template>
|
||
</el-popconfirm>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination style="position: absolute; right: 60px" @current-change="handleCurrentChange1" :page-size="15" layout="total, prev, pager, next" :total="total1"> </el-pagination>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<el-dialog title="分组管理" v-model="groupVisible" width="50%" :before-close="handleClose">
|
||
<a-button type="primary" style="margin-left: 20px; margin-bottom: 10px" @click="addGroup()">新增分组</a-button>
|
||
<div style="overflow-y: auto; height: 500px">
|
||
<el-table :data="tableGroupData" border style="width: 100%">
|
||
<el-table-column class="el_table_column" prop="groupName" label="分组名称" align="center" />
|
||
<el-table-column prop="groupLevel" label="分组等级" align="center" />
|
||
<el-table-column prop="comment" label="分组说明" align="center" />
|
||
<el-table-column align="center">
|
||
<template #default="scope">
|
||
<a-button type="primary" @click="handleTableGroupChange(scope.row)" size="small">修改分组</a-button>
|
||
<el-popconfirm @confirm="handleTableGroupDelete(scope.row.groupId)" title="确定要删除该分组么?">
|
||
<template #reference>
|
||
<a-button style="margin-left: 10px" type="primary" danger size="small">删除分组</a-button>
|
||
</template>
|
||
</el-popconfirm>
|
||
<!-- <a-button style="margin-left: 10px" type="primary" danger @click="handleTableGroupChange(scope.row)" size="small">删除分组</a-button> -->
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 新增分组弹窗 -->
|
||
<el-dialog :title="dialogTitle" v-model="addGroupVisible" width="40%" :before-close="closeAddGroup">
|
||
<el-form ref="ruleFormRef_Group" :rules="rulesGroup" :model="formGroup" label-width="120px" style="max-height: 500px; overflow-y: scroll; padding: 10px">
|
||
<el-form-item label="分组名称" prop="groupName">
|
||
<el-input required v-model="formGroup.groupName"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="分组等级" prop="groupLevel">
|
||
<el-input required v-model="formGroup.groupLevel"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="分组说明">
|
||
<el-input v-model="formGroup.comment"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="addGroupVisible = false" style="color: #0cd6fe">取 消</el-button>
|
||
<el-button type="primary" @click="addGroupFn(ruleFormRef_Group)" style="color: #0cd6fe">确 定</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
<el-dialog opened="openDialog" :title="dialogTargrtTitle" v-model="dialogVisible" width="40%" :before-close="handleClose">
|
||
<!-- 不能加这个ref，否则就不是响应式 ref="form" -->
|
||
<el-form ref="ruleFormRef" :rules="rules" :model="form" label-width="120px" style="max-height: 500px; overflow-y: scroll; padding: 10px">
|
||
<el-form-item label="选择地区">
|
||
<el-cascader placeholder="请选择地区" size="default" :options="cascaderOptions" v-model="selectedOptions" @change="handleChange"> </el-cascader>
|
||
</el-form-item>
|
||
<el-form-item label="布控对象名称" prop="targetName">
|
||
<el-input required v-model="form.targetName"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="布控对象类型">
|
||
<el-select v-model="form.targetType" placeholder="请选择类型" style="width: 100%">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="布控对象分组">
|
||
<el-select v-model="form.groupName" placeholder="请选择分组" style="width: 100%" @change="selectChange">
|
||
<el-option v-for="item in tableGroupData" :key="item.groupId" :label="item.groupName" :value="item.groupId"> </el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="布控对象属性值">
|
||
<el-input v-model="form.targetValue"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="布控对象等级">
|
||
<el-input v-model="form.targetLevel"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="布控对象数据">
|
||
<el-input v-model="form.imageData"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="人脸">
|
||
<el-upload
|
||
ref="uploadrefss"
|
||
method="put"
|
||
:before-upload="beforeAvatarUpload"
|
||
:on-error="handleError"
|
||
:on-preview="handlePictureCardPreview"
|
||
:on-remove="handleRemove"
|
||
on-success="handlePictureCardSuccess"
|
||
action="#"
|
||
list-type="picture-card"
|
||
:http-request="handleUpload"
|
||
:file-list="fileList"
|
||
>
|
||
<el-icon>
|
||
<plus />
|
||
</el-icon>
|
||
</el-upload>
|
||
<!-- <el-progress :percentage="uploadPercentage" /> -->
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="dialogVisible = false" style="color: #0cd6fe">取 消</el-button>
|
||
<el-button type="primary" @click="RTCSender(ruleFormRef)" style="color: #0cd6fe">确 定</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
<el-dialog title="申请布控任务" v-model="dialogVisiblea1" width="450" :before-close="handleClose">
|
||
<el-form :model="form2" label-width="120px">
|
||
<el-form-item label="布控对象">
|
||
<!-- {{tableData2}} -->
|
||
<el-select v-model="form2.target" :disabled="isxKOng" placeholder="请选择" style="width: 100%" @change="setyd">
|
||
<el-option v-for="item in tableData2" :key="item.targetValue + '&' + item.targetId" :label="item.targetName" :value="item.targetValue + '&' + item.targetId"> </el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="布控对象类型">
|
||
<el-select v-model="form2.targetType" :disabled="isxKOng" placeholder="请选择" style="width: 100%">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="布控地区">
|
||
<el-cascader placeholder="请选择地区" :disabled="isxKOng" size="default" :options="cascaderOptions1" v-model="selectedOptions1" @change="handleChange1" style="width: 100%"> </el-cascader>
|
||
</el-form-item>
|
||
<el-form-item label="任务等级">
|
||
<el-input v-model="form2.level" :disabled="isxKOng"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="预警类型">
|
||
<el-input v-model="form2.alarmType" :disabled="isxKOng"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="开始时间">
|
||
<el-date-picker v-model="form2.startTime" type="datetime" placeholder="选择日期时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
|
||
</el-form-item>
|
||
<el-form-item label="结束时间">
|
||
<el-date-picker v-model="form2.endTime" type="datetime" placeholder="选择日期时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="dialogVisiblea1 = false" style="color: #0cd6fe">取 消</el-button>
|
||
<el-button v-if="isxKOng" type="primary" @click="sendxk" style="color: #0cd6fe">确 定</el-button>
|
||
<el-button v-else type="primary" @click="RTCRtpSender" style="color: #0cd6fe">确 定</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<el-dialog title="布控对象照片" v-model="dialogVisiblea" width="30%" :before-close="handleClose1">
|
||
<!-- <img style="width: 100%; height: 100%" :src="opkierimg" alt="" /> -->
|
||
<div class="dialog-img-container">
|
||
<img :src="opkierimg" alt="" />
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, reactive, onMounted, watch } from 'vue'
|
||
import api from '@/axios'
|
||
import axios from 'axios'
|
||
import { ElMessage } from 'element-plus'
|
||
import type { UploadProps, FormRules, FormInstance } from 'element-plus'
|
||
|
||
const ruleFormRef_Group = ref<FormInstance>()
|
||
const ruleFormRef = ref<FormInstance>()
|
||
const uploadUrl = ref('')
|
||
const isUpdate = ref(false)
|
||
const isTargetUpdate = ref(false)
|
||
const cascaderOptions = ref([])
|
||
const cascaderOptions1 = ref([])
|
||
const selectedOptions = ref([])
|
||
const selectedOptions1 = ref([])
|
||
let uploadrefss = ref()
|
||
const uploadPercentage = ref(0)
|
||
const fileList = ref([])
|
||
const dialogVisiblea = ref(false)
|
||
const dialogVisiblea1 = ref(false)
|
||
const isxKOng = ref(false)
|
||
const opkierimg = ref('')
|
||
const activeName = ref('second')
|
||
const dialogVisible = ref(false)
|
||
const groupVisible = ref(false)
|
||
const addGroupVisible = ref(false)
|
||
|
||
const value1 = ref('')
|
||
|
||
const tableData = ref<any[]>([])
|
||
const tableData2 = ref<any[]>([])
|
||
const tableGroupData = ref<any[]>([])
|
||
const total1 = ref()
|
||
const pageNum2 = ref(1)
|
||
const value2 = ref('')
|
||
|
||
const currentPageIndex = ref(0)
|
||
const tabChange = (e: any) => {
|
||
console.log('🚀 ~ tabChange ~ e:', e)
|
||
currentPageIndex.value = 0
|
||
}
|
||
const total2 = ref()
|
||
const pageNum1 = ref(1)
|
||
const dialogTitle = ref('新增分组')
|
||
const dialogTargrtTitle = ref('新增对象')
|
||
|
||
interface anyObject {
|
||
[key: string]: string
|
||
}
|
||
interface formGroupFace {
|
||
groupName: string
|
||
groupId: string
|
||
groupLevel: string
|
||
parentId: string
|
||
comment: string
|
||
}
|
||
|
||
let formGroup = reactive<formGroupFace>({
|
||
groupName: '',
|
||
groupId: '',
|
||
groupLevel: '',
|
||
parentId: '',
|
||
comment: '',
|
||
})
|
||
const form2 = reactive<anyObject>({
|
||
target: '',
|
||
targetType: '',
|
||
searchCity: '',
|
||
searchDistrict: '',
|
||
level: '',
|
||
alarmType: '',
|
||
startTime: '',
|
||
endTime: '',
|
||
})
|
||
|
||
interface formFace {
|
||
targetType: string
|
||
targetName: string
|
||
targetLevel: string
|
||
imageUrl: string
|
||
imageData: string
|
||
targetId: string
|
||
targetValue: string
|
||
groupId: string
|
||
groupName: string
|
||
controlStatus: string
|
||
district: string
|
||
city: string
|
||
town: string
|
||
imageName: string
|
||
path: string
|
||
}
|
||
let form = reactive<formFace>({
|
||
targetType: '', //类型
|
||
targetName: '', //对象名字
|
||
targetLevel: '', //布控对象等级
|
||
imageUrl: '', //人脸图片地址
|
||
imageData: '', //布控对象数据
|
||
targetId: '',
|
||
targetValue: '', //属性值
|
||
groupId: '',
|
||
groupName: '',
|
||
controlStatus: '',
|
||
district: '',
|
||
city: '',
|
||
town: '',
|
||
imageName: '',
|
||
path: '',
|
||
})
|
||
|
||
const resetData = () => {
|
||
const keys = Object.keys(form)
|
||
let obj: { [name: string]: string } = {}
|
||
keys.forEach((item) => {
|
||
obj[item] = ''
|
||
})
|
||
Object.assign(form, obj)
|
||
}
|
||
const options = reactive([
|
||
{
|
||
value: 'face',
|
||
label: '人脸',
|
||
},
|
||
{
|
||
value: 'vehicle',
|
||
label: '车牌',
|
||
},
|
||
])
|
||
watch(addGroupVisible, (newValue, oldValue) => {
|
||
console.log(`addGroupVisible ${oldValue} to ${newValue}`)
|
||
if (!newValue) {
|
||
isUpdate.value = false
|
||
}
|
||
})
|
||
|
||
const validateTargetName = (rule: any, value: any, callback: any) => {
|
||
console.log('🚀 ~ validateTargetName ~ value:', value)
|
||
if (value.trim().length === 0) {
|
||
callback(new Error('请输入布控对象名称'))
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
const validateGroupName = (rule: any, value: any, callback: any) => {
|
||
if (value.trim().length === 0) {
|
||
callback(new Error('请输入分组名称'))
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
const validateGroupLevel = (rule: any, value: any, callback: any) => {
|
||
if (value.trim().length === 0) {
|
||
callback(new Error('请输入分组等级'))
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
const validateTown = (rule: any, value: any, callback: any) => {
|
||
if (value.trim().length === 0) {
|
||
callback(new Error('请输入街道'))
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
const validateTargetType = (rule: any, value: any, callback: any) => {
|
||
if (value.trim().length === 0) {
|
||
callback(new Error('请选择布控对象类型'))
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
|
||
const rules = reactive<FormRules<typeof form>>({
|
||
targetName: [{ validator: validateTargetName, trigger: 'blur' }],
|
||
// town: [{ validator: validateTown, trigger: 'blur' }],
|
||
// targetType: [{ validator: validateTargetType, trigger: 'change' }],
|
||
})
|
||
|
||
const rulesGroup = reactive<FormRules<typeof formGroup>>({
|
||
groupName: [{ validator: validateGroupName, trigger: 'blur' }],
|
||
groupLevel: [{ validator: validateGroupLevel, trigger: 'blur' }],
|
||
})
|
||
|
||
const addGroupFn = (formEl: FormInstance | undefined) => {
|
||
if (!formEl) return
|
||
formEl.validate((valid) => {
|
||
if (valid) {
|
||
console.log('submit!')
|
||
if (isUpdate.value) {
|
||
api.post('/multialarm/ai/target/group/update', { ...formGroup }).then((res) => {
|
||
if (res.code == 0) {
|
||
ElMessage.success({
|
||
message: '修改成功',
|
||
type: 'success',
|
||
})
|
||
getGroupList()
|
||
addGroupVisible.value = false
|
||
} else {
|
||
ElMessage.error(`${res.msg}`)
|
||
}
|
||
})
|
||
} else {
|
||
api.post('/multialarm/ai/target/group/add', { ...formGroup }).then((res) => {
|
||
if (res.code == 0) {
|
||
ElMessage.success({
|
||
message: '新增成功',
|
||
type: 'success',
|
||
})
|
||
getGroupList()
|
||
addGroupVisible.value = false
|
||
} else {
|
||
ElMessage.error(`${res.msg}`)
|
||
}
|
||
})
|
||
}
|
||
} else {
|
||
console.log('error submit!')
|
||
}
|
||
})
|
||
}
|
||
|
||
//取消上传，清空上传文件
|
||
function doClear() {
|
||
uploadrefss.value.clearFiles()
|
||
}
|
||
|
||
onMounted(() => {
|
||
seachA()
|
||
seachB()
|
||
getGroupList()
|
||
gettree()
|
||
})
|
||
|
||
const gettree = () => {
|
||
api.post('/common/client/user/org/tree').then((res) => {
|
||
console.log('🚀 tree:', res)
|
||
if (res.code == 0) {
|
||
const rawData = res.data as any[]
|
||
interface DataItem {
|
||
label: string
|
||
title: string
|
||
children?: DataItem[]
|
||
}
|
||
function convertDataToOptions(data: DataItem[]): { label: string; value: string; children: any[] }[] {
|
||
return data.map((item) => ({
|
||
label: item.title,
|
||
value: item.title,
|
||
children: item.children ? convertDataToOptions(item.children) : [],
|
||
}))
|
||
}
|
||
|
||
function filterCascadeData(data: any, filterFn: any) {
|
||
return data.filter((item: any) => {
|
||
;(item.label = item.title),
|
||
(item.value = item.title),
|
||
// 递归过滤子项
|
||
(item.children = item.children ? filterCascadeData(item.children, filterFn) : [])
|
||
// 如果当前项或子项通过过滤条件，则保留
|
||
return filterFn(item) || item.children.length > 0
|
||
})
|
||
}
|
||
const filterFn = (item: any) => item.level == '1' || item.level == '2'
|
||
const options = convertDataToOptions(rawData)
|
||
const options1 = filterCascadeData(res.data, filterFn)
|
||
console.log('options', options, options1)
|
||
cascaderOptions.value = options
|
||
cascaderOptions1.value = options1
|
||
} else {
|
||
}
|
||
})
|
||
}
|
||
const setyd = (e: any) => {}
|
||
const chekong = (e: any) => {
|
||
console.log('e', e.taskId)
|
||
// return ;
|
||
api.post('multialarm/ai/task/delete', { taskId: e.taskId }).then((res) => {
|
||
if (res.code == 0) {
|
||
// console.log('新增', res)
|
||
ElMessage.success({
|
||
message: '撤控成功',
|
||
type: 'success',
|
||
})
|
||
dialogVisiblea1.value = false
|
||
api
|
||
.post('/multialarm/ai/task/getlist', {
|
||
pagesize: 15,
|
||
pageindex: 0,
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
tableData.value = res.data as any[]
|
||
} else {
|
||
ElMessage.error('请求失败')
|
||
}
|
||
})
|
||
} else {
|
||
ElMessage.error('请求失败')
|
||
}
|
||
})
|
||
}
|
||
|
||
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
|
||
if (form.targetName.trim().length === 0) {
|
||
ElMessage.error('上传图片必须输入布控对象名称')
|
||
return false
|
||
}
|
||
console.log(11111)
|
||
}
|
||
|
||
const handleUpload = async ({ file, onProgress, onSuccess, onError }: { file: File; onProgress: Function; onSuccess: Function; onError: Function }) => {
|
||
console.log('🚀 ~ handleUpload ~ file:', file)
|
||
form.imageName = file.name
|
||
try {
|
||
if (form.targetName.trim().length === 0) {
|
||
ElMessage.error('上传图片必须输入布控对象名称')
|
||
return
|
||
}
|
||
console.log(22222)
|
||
|
||
// 1. 获取上传地址
|
||
const uploadUrlResponse = await api.post('/multialarm/ai/target/image/geturl', { ...form })
|
||
const uploadUrl = uploadUrlResponse.data as string
|
||
// 2. 创建 FormData 对象并添加文件
|
||
const formData = new FormData()
|
||
formData.append('file', file)
|
||
// 3. 使用 axios 上传文件
|
||
const response = await axios.put(uploadUrl, file, {
|
||
})
|
||
console.log('🚀 ~ handleUpload ~ response:', response)
|
||
if (response.status === 200) {
|
||
console.log('form.path,form.imageUrl', form.path, form.imageUrl)
|
||
|
||
if (form.path.length > 0) {
|
||
let lastSlashIndex = form.path.lastIndexOf('/')
|
||
if (lastSlashIndex !== -1) {
|
||
// 获取斜杠之前的所有字符串
|
||
let prefix = form.path.substring(0, lastSlashIndex)
|
||
console.log('获取斜杠之前的所有字符串', prefix)
|
||
let newPath = `${prefix}/${file.name}`
|
||
form.path = newPath
|
||
} else {
|
||
console.log('未检索到/')
|
||
}
|
||
}
|
||
if (form.imageUrl.length > 0) {
|
||
let lastSlashIndex = form.imageUrl.lastIndexOf('/')
|
||
if (lastSlashIndex !== -1) {
|
||
// 获取斜杠之前的所有字符串
|
||
let prefix = form.imageUrl.substring(0, lastSlashIndex)
|
||
console.log('获取斜杠之前的所有字符串', prefix)
|
||
let newPath = `${prefix}/${file.name}`
|
||
form.imageUrl = newPath
|
||
} else {
|
||
console.log('未检索到/')
|
||
}
|
||
}
|
||
ElMessage.success({
|
||
message: '上传成功',
|
||
type: 'success',
|
||
})
|
||
// 添加文件到 fileList 以便预览
|
||
fileList.value.push({
|
||
name: file.name,
|
||
url: URL.createObjectURL(file),
|
||
})
|
||
console.log('最后检查form', form)
|
||
|
||
// if (onSuccess) {
|
||
// onSuccess(response.data) // 上传成功时的回调
|
||
// }
|
||
} else {
|
||
ElMessage.error('上传失败')
|
||
}
|
||
} catch (error) {
|
||
// 上传失败后的回调
|
||
// if (onError) {
|
||
// onError(error)
|
||
// }
|
||
}
|
||
}
|
||
|
||
const handleChange = (value: string[]) => {
|
||
console.log('🚀 ~ handleChange ~ value:', value)
|
||
if (value[0]) {
|
||
form.city = value[0]
|
||
} else {
|
||
form.city = ''
|
||
}
|
||
if (value[1]) {
|
||
form.district = value[1]
|
||
} else {
|
||
form.district = ''
|
||
}
|
||
if (value[2]) {
|
||
form.town = value[2]
|
||
} else {
|
||
form.town = ''
|
||
}
|
||
// console.log('🚀 ~ handleChange ~ form:', form)
|
||
}
|
||
const selectChange = (value: any) => {
|
||
console.log('🚀 ~ selectChange ~ value:', value)
|
||
form.groupId = value
|
||
}
|
||
const RTCSender = (formEl: FormInstance | undefined) => {
|
||
if (selectedOptions.value.length === 0) {
|
||
ElMessage.error('请选择地区')
|
||
return
|
||
}
|
||
if (form.targetType.length === 0) {
|
||
ElMessage.error('请选择布控对象类型')
|
||
return
|
||
}
|
||
if (!formEl) return
|
||
formEl.validate((valid) => {
|
||
if (valid) {
|
||
console.log('submit!')
|
||
if (isTargetUpdate.value) {
|
||
console.log(form.imageName)
|
||
api.post('/multialarm/ai/target/update', { ...form }).then((res) => {
|
||
if (res.code == 0) {
|
||
ElMessage.success({
|
||
message: '修改成功',
|
||
type: 'success',
|
||
})
|
||
dialogVisible.value = false
|
||
seachB() //刷新总条数和列表
|
||
|
||
Object.keys(form).forEach((key) => (form[key as keyof formFace] = ''))
|
||
doClear()
|
||
selectedOptions.value = []
|
||
} else {
|
||
ElMessage.error(res.msg)
|
||
}
|
||
})
|
||
} else {
|
||
api.post('/multialarm/ai/target/add', { ...form }).then((res) => {
|
||
if (res.code == 0) {
|
||
ElMessage.success({
|
||
message: '新增成功',
|
||
type: 'success',
|
||
})
|
||
dialogVisible.value = false
|
||
seachB() //刷新总条数和列表
|
||
Object.keys(form).forEach((key) => (form[key as keyof formFace] = ''))
|
||
doClear()
|
||
selectedOptions.value = []
|
||
} else {
|
||
ElMessage.error(res.msg)
|
||
}
|
||
})
|
||
}
|
||
} else {
|
||
console.log('error submit!')
|
||
}
|
||
})
|
||
}
|
||
|
||
const handleTableGroupChange = (row: any) => {
|
||
dialogTitle.value = '修改分组'
|
||
console.log('🚀 ~ handleTableGroupChange ~ row:', row)
|
||
isUpdate.value = true
|
||
addGroupVisible.value = true
|
||
const clonedData = JSON.parse(JSON.stringify(row))
|
||
formGroup = reactive(clonedData)
|
||
}
|
||
const sendBk = () => {
|
||
isTargetUpdate.value = false
|
||
selectedOptions.value = []
|
||
fileList.value = []
|
||
dialogTargrtTitle.value = '新增对象'
|
||
// Object.keys(form).forEach((key) => (form[key] = ''))
|
||
resetData()
|
||
dialogVisible.value = true
|
||
}
|
||
|
||
const handleTableChange = (row: any) => {
|
||
fileList.value = []
|
||
isTargetUpdate.value = true
|
||
console.log('🚀 ~ handleTableChange ~ row:', row)
|
||
dialogTargrtTitle.value = '修改布控对象'
|
||
dialogVisible.value = true
|
||
|
||
// selectedOptions.value.push(row.city, row.district, row.town)
|
||
if (row.city.length > 0 && row.district.length > 0 && row.town.length > 0) {
|
||
selectedOptions.value = [row.city, row.district, row.town]
|
||
}
|
||
if (row.city.length > 0 && row.district.length > 0 && row.town.length === 0) {
|
||
selectedOptions.value = [row.city, row.district]
|
||
}
|
||
if (row.city.length > 0 && row.district.length === 0 && row.town.length === 0) {
|
||
selectedOptions.value = [row.city]
|
||
}
|
||
const clonedData = JSON.parse(JSON.stringify(row))
|
||
form = reactive(clonedData)
|
||
|
||
fileList.value.push({
|
||
url: form.imageUrl,
|
||
})
|
||
}
|
||
|
||
const handleTableGroupDelete = (id: string) => {
|
||
console.log('🚀 ~ handleTableGroupDelete ~ id:', id)
|
||
api.post('/multialarm/ai/target/group/delete', { groupId: id }).then((res) => {
|
||
if (res.code == 0) {
|
||
ElMessage.success({
|
||
message: '删除成功',
|
||
type: 'success',
|
||
})
|
||
getGroupList()
|
||
} else {
|
||
ElMessage.error(res.msg)
|
||
}
|
||
})
|
||
}
|
||
const handleTableDelete = (id: string) => {
|
||
console.log('🚀 ~ handleTableDelete ~ id:', id)
|
||
api.post('/multialarm/ai/target/delete', { targetId: id }).then((res) => {
|
||
if (res.code == 0) {
|
||
ElMessage.success({
|
||
message: '删除成功',
|
||
type: 'success',
|
||
})
|
||
seachB()
|
||
} else {
|
||
ElMessage.error(res.msg)
|
||
}
|
||
})
|
||
}
|
||
|
||
const openDialog = (e: any) => {
|
||
console.log('🚀 ~ openDialog ~ e:', e)
|
||
}
|
||
//续控
|
||
const taskId = ref('')
|
||
const xkong = (row: any) => {
|
||
if (row.searchCity != '' && row.searchDistrict != '') {
|
||
selectedOptions1.value = [row.searchCity, row.searchDistrict]
|
||
}
|
||
console.log('row', row, tableData2)
|
||
taskId.value = row.taskId
|
||
dialogVisiblea1.value = true
|
||
isxKOng.value = true
|
||
form2.target = row.targetValue + '&' + row.targetId
|
||
form2.targetType = row.targetType
|
||
form2.searchCity = row.searchCity
|
||
form2.searchDistrict = row.searchDistrict
|
||
form2.level = row.level
|
||
form2.alarmType = row.alarmType
|
||
form2.startTime = row.startTime
|
||
form2.endTime = row.endTime
|
||
}
|
||
//提交续控
|
||
const sendxk = () => {
|
||
let data = {
|
||
targetId: '',
|
||
targetValue: '',
|
||
targetType: form2.targetType,
|
||
searchCity: form2.searchCity,
|
||
searchDistrict: form2.searchDistrict,
|
||
level: form2.level,
|
||
alarmType: form2.alarmType,
|
||
startTime: form2.startTime,
|
||
endTime: form2.endTime,
|
||
taskId: taskId.value,
|
||
}
|
||
if (form2.target != '') {
|
||
data.targetId = form2.target.split('&')[1]
|
||
data.targetValue = form2.target.split('&')[0]
|
||
}
|
||
api.post('multialarm/ai/task/update', data).then((res) => {
|
||
if (res.code == 0) {
|
||
// console.log('新增', res)
|
||
ElMessage.success({
|
||
message: '续控成功',
|
||
type: 'success',
|
||
})
|
||
dialogVisiblea1.value = false
|
||
api
|
||
.post('/multialarm/ai/task/getlist', {
|
||
pagesize: 15,
|
||
pageindex: 0,
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
tableData.value = res.data as any[]
|
||
} else {
|
||
ElMessage.error('请求失败')
|
||
}
|
||
})
|
||
} else {
|
||
ElMessage.error('请求失败')
|
||
}
|
||
})
|
||
}
|
||
const handleChange1 = (value: string[]) => {
|
||
console.log('🚀 ~ handleChange1 ~ value:', value)
|
||
if (value[0]) {
|
||
form2.searchCity = value[0]
|
||
} else {
|
||
form2.searchCity = ''
|
||
}
|
||
if (value[1]) {
|
||
form2.searchDistrict = value[1]
|
||
} else {
|
||
form2.searchDistrict = ''
|
||
}
|
||
if (value[2]) {
|
||
form2.searchTown = value[2]
|
||
} else {
|
||
form2.searchTown = ''
|
||
}
|
||
}
|
||
const RTCRtpSender = () => {
|
||
console.log('form2', form2)
|
||
if (form2.target === '') {
|
||
ElMessage.error('请选择布控对象')
|
||
return
|
||
}
|
||
if (form2.targetType === '') {
|
||
ElMessage.error('请选择布控对象类型')
|
||
return
|
||
}
|
||
if (form2.searchCity === '') {
|
||
ElMessage.error('请选择布控城市')
|
||
return
|
||
}
|
||
if (form2.searchDistrict === '') {
|
||
ElMessage.error('请选择布控区县')
|
||
return
|
||
}
|
||
if (form2.startTime === '') {
|
||
ElMessage.error('请选择开始时间')
|
||
return
|
||
}
|
||
if (form2.endTime === '') {
|
||
ElMessage.error('请选择结束时间')
|
||
return
|
||
}
|
||
let data = {
|
||
targetId: '',
|
||
targetValue: '',
|
||
targetType: form2.targetType,
|
||
searchCity: form2.searchCity,
|
||
searchDistrict: form2.searchDistrict,
|
||
level: form2.level,
|
||
alarmType: form2.alarmType,
|
||
startTime: form2.startTime,
|
||
endTime: form2.endTime,
|
||
}
|
||
if (form2.target != '') {
|
||
data.targetId = form2.target.split('&')[1]
|
||
data.targetValue = form2.target.split('&')[0]
|
||
}
|
||
api.post('/multialarm/ai/task/add', data).then((res) => {
|
||
if (res.code == 0) {
|
||
// console.log('新增', res)
|
||
ElMessage.success({
|
||
message: '新增成功',
|
||
type: 'success',
|
||
})
|
||
dialogVisiblea1.value = false
|
||
api
|
||
.post('/multialarm/ai/task/getlist', {
|
||
pagesize: 15,
|
||
pageindex: 0,
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
tableData.value = res.data as any[]
|
||
} else {
|
||
ElMessage.error('请求失败')
|
||
}
|
||
})
|
||
} else {
|
||
ElMessage.error('请求失败')
|
||
}
|
||
})
|
||
}
|
||
|
||
const sendbkrw = () => {
|
||
selectedOptions1.value = []
|
||
isxKOng.value = false
|
||
form2.target = ''
|
||
form2.targetType = ''
|
||
form2.searchCity = ''
|
||
form2.searchDistrict = ''
|
||
form2.level = ''
|
||
form2.alarmType = ''
|
||
form2.startTime = ''
|
||
form2.endTime = ''
|
||
dialogVisiblea1.value = true
|
||
}
|
||
|
||
const handleClick = (data: any) => {
|
||
opkierimg.value = data
|
||
dialogVisiblea.value = true
|
||
}
|
||
const handleClose1 = () => {
|
||
dialogVisiblea.value = false
|
||
}
|
||
|
||
const handlePictureCardPreview = (file: any) => {
|
||
console.log('🚀 ~ handlePictureCardPreview ~ file:', file)
|
||
}
|
||
const handleError = (response: any) => {
|
||
console.log('🚀 ~ handleError ~ response:', response)
|
||
return ElMessage({
|
||
message: '文件上传失败',
|
||
type: 'error',
|
||
offset: 60,
|
||
})
|
||
}
|
||
|
||
const handleRemove = () => {
|
||
console.log('🚀 ~ handleRemove ~ handleRemove:')
|
||
}
|
||
|
||
const handleClose = () => {
|
||
dialogVisible.value = false
|
||
dialogVisiblea1.value = false
|
||
groupVisible.value = false
|
||
}
|
||
//布控任务
|
||
|
||
const seachA = () => {
|
||
api.post('/multialarm/ai/task/count', {}).then((res) => {
|
||
if (res.code == 0) {
|
||
total1.value = res.data as { count: number }
|
||
}
|
||
})
|
||
api
|
||
.post('/multialarm/ai/task/getlist', {
|
||
pagesize: 15,
|
||
pageindex: 0,
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
tableData.value = res.data as any[]
|
||
} else {
|
||
ElMessage.error('请求失败')
|
||
}
|
||
})
|
||
}
|
||
|
||
const handleCurrentChange1 = (data: any) => {
|
||
console.log('🚀 ~ handleCurrentChange1 ~ data:', data)
|
||
pageNum2.value = data
|
||
api
|
||
.post('/multialarm/ai/task/getlist', {
|
||
pagesize: 15,
|
||
pageindex: data - 1,
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
tableData2.value = res.data as any[]
|
||
} else {
|
||
ElMessage.error('请求失败')
|
||
}
|
||
})
|
||
}
|
||
const indexMethod2 = (index: number) => {
|
||
return (pageNum2.value - 1) * 15 + index + 1
|
||
}
|
||
//布控对象
|
||
|
||
//刷新总条数和列表
|
||
const getGroupList = () => {
|
||
api.post('/multialarm/ai/target/group/getlist', {}).then((res) => {
|
||
console.log('🚀 ~ api.post ~ res:', res)
|
||
if (res.code == 0) {
|
||
tableGroupData.value = res.data as any[]
|
||
} else {
|
||
ElMessage.error(res.msg)
|
||
}
|
||
})
|
||
}
|
||
|
||
const seachB = () => {
|
||
api.post('/multialarm/ai/target/count', {}).then((res) => {
|
||
console.log('🚀 ~ seachB ~ res:', res)
|
||
if (res.code == 0) {
|
||
total2.value = res.data as { count: number }
|
||
}
|
||
})
|
||
api
|
||
.post('/multialarm/ai/target/getlist', {
|
||
pagesize: 15,
|
||
pageindex: currentPageIndex.value,
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
tableData2.value = res.data as any[]
|
||
} else {
|
||
ElMessage.error('请求失败')
|
||
}
|
||
})
|
||
}
|
||
|
||
// 布控对象的分页
|
||
const handleCurrentChange2 = (data: number) => {
|
||
console.log('🚀 ~ handleCurrentChange2 ~ data:', data)
|
||
currentPageIndex.value = data - 1
|
||
pageNum1.value = data
|
||
api
|
||
.post('/multialarm/ai/target/getlist', {
|
||
pagesize: 15,
|
||
// pageindex: data - 1,
|
||
pageindex: currentPageIndex.value,
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
tableData2.value = res.data as any[]
|
||
} else {
|
||
ElMessage.error('请求失败')
|
||
}
|
||
})
|
||
}
|
||
const indexMethod1 = (index: number) => {
|
||
return (pageNum1.value - 1) * 15 + index + 1
|
||
}
|
||
const openGroupDialog = () => {
|
||
groupVisible.value = true
|
||
}
|
||
const addGroup = () => {
|
||
dialogTitle.value = '新增分组'
|
||
Object.keys(formGroup).forEach((key) => (formGroup[key as keyof formGroupFace] = ''))
|
||
addGroupVisible.value = true
|
||
}
|
||
const closeAddGroup = () => {
|
||
addGroupVisible.value = false
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.dialog-img-container {
|
||
overflow: visible; //让图片放大到外面，内容不能被裁减并且可能渲染到边距盒（padding）的外部。
|
||
}
|
||
|
||
.dialog-img-container img {
|
||
transition: transform 0.3s ease;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.dialog-img-container img:hover {
|
||
transform: scale(2.3);
|
||
}
|
||
|
||
.cont {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #fff;
|
||
// background:rgba(9, 45, 84, 1)
|
||
}
|
||
|
||
.demo-tabs > .el-tabs__content {
|
||
padding: 32px;
|
||
color: #6b778c;
|
||
font-size: 32px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
:deep(.el-upload--picture-card) {
|
||
background-color: transparent;
|
||
}
|
||
|
||
:deep(.el-select__wrapper) {
|
||
background-color: transparent;
|
||
box-shadow: 0 0 0 1px #1f9bd9;
|
||
}
|
||
|
||
:deep(.el-input.is-disabled .el-input__wrapper) {
|
||
background-color: transparent;
|
||
box-shadow: 0 0 0 1px #1f9bd9;
|
||
}
|
||
|
||
:deep(.el-textarea) {
|
||
--el-input-bg-color: #071d4d;
|
||
// --el-input-border-color: #071D4D;
|
||
}
|
||
|
||
:deep(.el-dialog__body) {
|
||
position: relative;
|
||
padding: 10px;
|
||
color: #fff;
|
||
}
|
||
|
||
:deep(.el-dialog) {
|
||
--el-dialog-bg-color: #071d4d;
|
||
border: 3px solid #387dbf;
|
||
}
|
||
|
||
:deep(.el-dialog__header) {
|
||
padding: 13px;
|
||
border-bottom: 1px solid #3374b4 !important;
|
||
margin-right: 0px;
|
||
}
|
||
|
||
:deep(.el-dialog__title) {
|
||
color: #067bc1 !important;
|
||
font-weight: 500;
|
||
}
|
||
|
||
:deep(.el-dialog__headerbtn .el-dialog__close) {
|
||
color: #fff;
|
||
font-weight: 500;
|
||
font-size: 18px;
|
||
}
|
||
|
||
:deep(.el-tabs__nav-wrap::after) {
|
||
background-color: #d9d9d95e;
|
||
height: 4px;
|
||
}
|
||
|
||
:deep(.el-tabs__item) {
|
||
color: #00000070;
|
||
font-weight: 700;
|
||
}
|
||
|
||
:deep(.el-tabs) {
|
||
--el-tabs-header-height: 50px;
|
||
}
|
||
|
||
:deep(.el-tabs__item.is-active) {
|
||
color: #000;
|
||
}
|
||
|
||
:deep(.el-tabs__active-bar) {
|
||
height: 4px;
|
||
background-color: #000;
|
||
}
|
||
|
||
:deep(.el-tabs__nav-wrap) {
|
||
padding-left: 23px;
|
||
}
|
||
|
||
:deep(.el-input__wrapper) {
|
||
background-color: transparent;
|
||
box-shadow: 0 0 0 1px #1f9bd9;
|
||
}
|
||
|
||
:deep(.el-select__wrapper) {
|
||
background-color: transparent;
|
||
box-shadow: 0 0 0 1px #1f9bd9;
|
||
}
|
||
|
||
:deep(.el-input__inner) {
|
||
color: #fff;
|
||
}
|
||
|
||
:deep(.el-input__prefix) {
|
||
color: #fff;
|
||
}
|
||
|
||
.el_button_ {
|
||
|
||
}
|
||
|
||
:deep(.el-button) {
|
||
background-color: transparent;
|
||
border-color: #0cd6fe;
|
||
color: #000;
|
||
}
|
||
|
||
:deep(.el-table) {
|
||
--el-table-border-color: #1677ff40;
|
||
}
|
||
|
||
:deep(.el-select__placeholder) {
|
||
color: #fff;
|
||
}
|
||
|
||
:deep(.el-table th.el-table__cell) {
|
||
// background-color: #5C9AD5;
|
||
}
|
||
|
||
:deep(.el-table thead) {
|
||
// color: #fff;
|
||
}
|
||
|
||
:deep(.el-table tr) {
|
||
// background-color: #E9F0F8;
|
||
}
|
||
|
||
:deep(.el-table__body tr.current-row > td) {
|
||
// background: #2cabff !important;
|
||
}
|
||
|
||
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
|
||
// background-color: #13306A !important;
|
||
}
|
||
|
||
:deep(.el-table th.el-table__cell) {
|
||
// background-color:#13306A;
|
||
}
|
||
|
||
:deep(.el-date-editor .el-range-input) {
|
||
color: #fff;
|
||
}
|
||
|
||
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
|
||
// background: #D1DEEE !important;
|
||
}
|
||
|
||
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
|
||
// background-color: transparent;
|
||
}
|
||
|
||
:deep(.el-tabs) {
|
||
height: 100%;
|
||
}
|
||
|
||
:deep(.el-table th.el-table__cell) {
|
||
background-color: #f5f7fa;
|
||
}
|
||
|
||
:deep(.el-tabs__content) {
|
||
height: calc(100% - 53px);
|
||
}
|
||
|
||
:deep(.el-tab-pane) {
|
||
height: 100%;
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
background-color: #071d4d;
|
||
}
|
||
</style>
|