qichengbin/erqi-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

巡检报告导出接口联调

Browse Source
This commit is contained in:
zhangmj
2026-01-05 15:26:15 +08:00
parent a8b781d48a
commit b6bfb92c6e
19 changed files with 550 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Filter/index.vue
View File

@@ -158,8 +158,10 @@ defineExpose({
justify-content: space-between;
width: 100%;
.el-form{
width: 1060px;
text-align: left;
}
.buttons{
min-width: 140px;
}
}
</style>

462
src/components/Filter/index2.vue Normal file
View File

@@ -0,0 +1,462 @@
<template>
<el-form :class="theme" :inline="true" :model="model">
<el-form-item
v-for="(item, index) in filterItems"
:key="index"
:label="item.label">
<el-input
v-if="item.type === 'input'"
v-model="model[item.prop]"
:placeholder="item.placeholder ? item.placeholder : ''"
:clearable="item.clearable !== false"
style="width: 200px">
</el-input>
<template v-if="item.type === 'inputrange'">
<div>
<el-input
v-model="model[item.prop1]"
:placeholder="item.placeholder ? item.placeholder[0] : ''"
:clearable="item.clearable !== false"
style="width: 80px">
</el-input>
<span class="range">至</span>
<el-input
v-model="model[item.prop2]"
:placeholder="item.placeholder ? item.placeholder[1] : ''"
:clearable="item.clearable !== false"
style="width: 80px">
</el-input>
</div>
</template>
<el-select
v-if="item.type === 'select'"
v-model="model[item.prop]"
:clearable="item.clearable !== false"
:filterable="item.filterable || false"
:placeholder="item.placeholder ? item.placeholder : ''"
:multiple="item.multiple || false"
:collapse-tags="item.collapseTags || false"
:collapse-tags-tooltip="item.collapseTagsTooltip || false"
@change="(val) => handle(item.event,val)"
style="width: 200px">
<el-checkbox v-if="item.checkbox || false" v-model="checked" @change='(val)=>selectAll(val,item)'>全选</el-checkbox>
<el-option
v-for="(opt, index) in item.options"
:key="index"
:label="opt.label"
:value="opt.value">
</el-option>
</el-select>
<el-select
v-if="item.type === 'selectRemote'"
v-model="model[item.prop]"
filterable
remote
reserve-keyword
:clearable="item.clearable !== false"
:placeholder="item.placeholder ? item.placeholder : ''"
:remote-method="(val) => emit('remote', val,item.prop)"
:loading="false"
style="width: 200px">
<el-option v-for="(opt, index) in item.options" :key="index" :label="opt.label" :value="opt.value">
</el-option>
</el-select>
<el-tree-select
v-if="item.type === 'treeselect'"
:clearable="item.clearable !== false"
v-model="model[item.prop]"
:data="item.options"
:props="{ value: 'areaCode', label: 'areaName', children: 'childArea' }"
value-key="areaCode"
:render-after-expand="false"
check-strictly
style="width: 200px"
:load="load"
lazy
/>
<el-date-picker
v-if="item.type === 'year'"
v-model="model[item.prop]"
type="year"
:placeholder="item.placeholder ? item.placeholder : '请选择年份'"
value-format="YYYY"
:clearable="item.clearable !== false"
style="width: 200px">
</el-date-picker>
<el-date-picker
v-if="item.type === 'date'"
v-model="model[item.prop]"
type="date"
:placeholder="item.placeholder ? item.placeholder : '请选择日期'"
value-format="YYYY-MM-DD"
:clearable="item.clearable !== false"
style="width: 200px">
</el-date-picker>
<el-date-picker
v-if="item.type === 'datetime'"
v-model="model[item.prop]"
type="datetime"
:placeholder="item.placeholder ? item.placeholder : '请选择时间'"
value-format="YYYY-MM-DD HH:mm:ss"
:clearable="item.clearable !== false"
style="width: 200px">
</el-date-picker>
<el-date-picker
v-if="item.type === 'daterange'"
v-model="model[item.prop]"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
:clearable="item.clearable !== false"
style="width: 280px"
@change="changeDate">
</el-date-picker>
<el-date-picker
v-if="item.type === 'datetimerange'"
v-model="model[item.prop]"
type="datetimerange"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
value-format="YYYY-MM-DD HH:mm:ss"
:clearable="item.clearable !== false"
:disabled-date="disabledDate"
@calendar-change="calendarChange"
style="width: 360px">
</el-date-picker>
<el-time-picker
is-range
v-if="item.type === 'timePicker'"
value-format="HH:mm:ss"
format="HH:mm:ss"
v-model="model[item.prop]"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
<el-button
v-if="item.type === 'button'"
:type="item.theme"
v-hasPermi="item.permission"
@click="handle(item.prop)">{{ item.name }}
</el-button>
</el-form-item>
</el-form>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const emit = defineEmits([ 'handle', 'change', 'remote', 'changeDate' ])
const props = defineProps({
'filter-items': {
type: Array,
required: false,
default: () => {
return []
}
},
'filter-model': {
type: Object,
required: false,
default: () => {
return {}
}
},
theme: {
type: String,
required: false,
default: 'dark'
},
disabledDate: {
type: Function,
required: false
},
calendarChange: {
type: Function,
required: false
}
})
const model = ref({})
const checked = ref(false)
// 多选下拉框 全选操作
const selectAll = (val, item) => {
model.value[item.prop] = []
if (checked.value) {
model.value[item.prop] = item.options.map(i => i.value)
} else {
model.value[item.prop] = []
}
}
// 修改多选下拉框全选选中状态
const changeChecked = (flag) => {
checked.value = flag
}
/**
* 点击操作按钮
* @param type 操作类型
*/
const handle = (type) => {
emit('handle', type, model.value)
}
/**
* 重置表单数据
*/
const reset = () => {
model.value = { ...props.filterModel }
}
onMounted(() => {
model.value = { ...props.filterModel }
})
const initModel = () => {
model.value = { ...props.filterModel }
}
const changeDate = (e) => {
emit('changeDate', e)
}
const load = async(node, resolve) => {
if (node.data && node.data.childArea) {
resolve(node.data.childArea)
}
}
defineExpose({
reset,
initModel,
changeChecked
})
</script>
<style lang="scss" scoped>
.dark {
:deep(.el-form-item) {
margin-right: 20px;
.el-form-item__label,.range {
color: #fff;
}
.range{
margin: 0 10px;
}
.el-input__wrapper {
background-color: #00889b00;
box-shadow: 0 0 0 1px #296dff99;
&:has(.el-input__inner:focus){
box-shadow: 0 0 0 1px #296dff;
}
.el-input__inner {
color: #fff;
}
}
.el-select {
.el-select__wrapper {
background-color: #00889b1f;
box-shadow: 0 0 0 1px #296dff99;
.el-select__selected-item,
.el-select__icon {
color: #fff;
}
}
}
.el-date-editor {
.el-icon {
color: #fff;
}
.el-range-input {
color: #fff;
}
.el-range-separator {
color: #fff;
}
}
.el-picker__popper {
border-color: #005e5eb2;
.el-picker-panel {
background-color: #0f1E31;
.el-picker-panel__body-wrapper {
.el-date-range-picker__time-header{
border-bottom: 1px solid #0acccc1a;
}
.el-date-range-picker__content.is-left{
border-right: 1px solid #0acccc1a;
}
.el-date-range-picker__header {
color: #fff;
border-bottom: 1px solid #0acccc1a;
.el-picker-panel__icon-btn {
color: #fff;
}
}
th {
color: #fff;
border-bottom: 1px solid #0acccc1a;
}
td {
&.in-range .el-date-table-cell {
background-color: #0c424E;
color: #fff;
}
&.start-date .el-date-table-cell {
border-radius: unset;
.el-date-table-cell__text {
border-radius: unset;
background-color: #0acccc;
}
}
&.end-date .el-date-table-cell {
border-radius: unset;
padding: 0;
.el-date-table-cell__text {
border-radius: unset;
background-color: #0acccc;
width: 30px;
height: 30px;
}
}
&.available:hover{
color: #fff;
}
&.today{
.el-date-table-cell__text{
color: #fff;
}
}
}
}
.el-picker-panel__footer {
background-color: #0f1E31;
border-top: 1px solid #0acccc1a;
.el-button {
background-color: transparent;
color: #0acccc;
&:hover {
background-color: #0acccc1a;
}
&.is-plain {
background-color: #0d646E;
border: 1px solid #0acccc;
color: #fff;
&:hover {
background-color: #0acccc71;
}
}
&:active {
opacity: .8;
}
}
}
}
.el-popper__arrow::before{
border-color: #0acccc;
background-color: #07224c;
}
}
// .el-button {
// &.el-button--primary {
// background-color: #409eff33;
// border: 1px solid #409eff;
// color: #409eff;
// &:hover {
// background-color: #409eff71;
// }
// }
// &.el-button--success {
// background-color: #67c23a33;
// border: 1px solid #67c23a;
// color: #67c23a;
// &:hover {
// background-color: #67c23a71;
// }
// }
// &.el-button--info {
// background-color: #f4f4f533;
// border: 1px solid #f4f4f5;
// color: #f4f4f5;
// &:hover {
// background-color: #f4f4f571;
// }
// }
// &.el-button--warning {
// background-color: #e6a23c33;
// border: 1px solid #e6a23c;
// color: #e6a23c;
// &:hover {
// background-color: #e6a23c71;
// }
// }
// &.el-button--danger {
// background-color: #f56c6c33;
// border: 1px solid #f56c6c;
// color: #f56c6c;
// &:hover {
// background-color: #f56c6c71;
// }
// }
// &:active {
// opacity: .8;
// }
// }
}
}
</style>

9
src/components/Map/index.vue
View File

@@ -27,7 +27,6 @@ import { dsVideoList, findUavPage, getVideoInfo } from '@/api/device.js'
const mapStore = useMapStore()
const UAV = computed(() => mapStore.legend.UAV)
const monitor = computed(() => mapStore.legend.monitor)
const origin_monitor = computed(() => mapStore.legend.origin_monitor)
const ais_station = computed(() => mapStore.legend.ais_station)
const environmental = computed(() => mapStore.legend.environmental)
const fence = computed(() => mapStore.legend.fence)
@@ -37,13 +36,11 @@ let globalMap = null
let vector = {}
const geography = {
monitor: [], // 监控数据
origin_monitor: [], // 原始监控数据
UAV: [], // 无人机
ais_station: [], // ais基站
environmental: [], // 环境监测
fence: [] // 电子围栏
}
let sectorLayer = null
const initMap = () => {
const mapDom = document.getElementById('map')
globalMap = new GlobalMap(mapDom)//, { seamlessZoom: false })
@@ -377,9 +374,9 @@ const initUAV = () => {
const initMonitor = () => {
const params = {}
dsVideoList(params).then(res => {
geography.monitor = res.data
addMonitorToMap()
})
geography.monitor = res.data
addMonitorToMap()
})
}
const initAisStation = () => {
geography.ais_station = stations

4
src/components/Map/window/uav.vue
View File

@@ -31,9 +31,11 @@ import CockpitCom from '@/views/business/drone/cockpit.vue'
import { getVideoStream, doStartOrStopUavAlgorithm } from '@/api/uav'
import { ElMessage } from 'element-plus'
// sourceType1 的是接道通的视频流
// sourceType2 的是擎天云的识别的视频流
const mapStore = useMapStore()
const data = computed(() => mapStore.windowInfo.data)
const url = 'http://198.16.74.210:3456/embed?projectId=2&authInfoId=3&deviceSn=7601839813836800&deviceType=drone&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJleHAiOjE3NjcxNzA1NTIsImlhdCI6MTc2NjU2NTc1Mn0._YhukLexaErvTc3QDIAV5MuOa6cqglYUfsixNCit3us'
const url = 'http://198.16.74.210:3456/embed?projectId=2&authInfoId=3&deviceSn=7601839813836800&deviceType=drone&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJleHAiOjE3NjgxODQ5NDUsImlhdCI6MTc2NzU4MDE0NX0.AuUfl9Cbi_KZsIHrwRzwpLcpiMYB70NcXb0IYlha_5s'
// const url = computed(() => `http://198.16.74.210:3456/embed?projectId=4bd996b8-5201-4e5d-82b1-6879be360c20&authInfoId=eyJhbGciOiJIUzUxMiIsImNyaXQiOlsidHlwIiwiYWxnIiwia2lkIl0sImtpZCI6IjU3YmQyNmEwLTYyMDktNGE5My1hNjg4LWY4NzUyYmU1ZDE5MSIsInR5cCI6IkpXVCJ9.eyJhY2NvdW50IjoiIiwiZXhwIjoyMDc1OTQ3NzIyLCJuYmYiOjE3NjA0MTQ5MjIsIm9yZ2FuaXphdGlvbl91dWlkIjoiOWRmMjlmYTgtNGI5OS00MThlLWJhMmQtMGY5ZWY5ZWVlMzkyIiwicHJvamVjdF91dWlkIjoiIiwic3ViIjoiZmgyIiwidXNlcl9pZCI6IjE3NjA0MTQxMDkzNTcwMDI0MjkifQ.DC_aS37W2fkqOjCtfvysDfhTn-4XVn3_IrXBnPD9rICGyrIBKBG3oPldeW_pqele5H_gCn1EgM0KXcbDgvq-dw&
// deviceSn=${data.value.droneSn}&deviceType=drone&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJleHAiOjE3NjcxNzA1NTIsImlhdCI6MTc2NjU2NTc1Mn0._YhukLexaErvTc3QDIAV5MuOa6cqglYUfsixNCit3us`)
// 算法开启关闭状态