设备定位地图，打点展示
This commit is contained in:
fengerli
@ -3,48 +3,60 @@
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
|
||||
:leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-button :type="isListView ? 'primary' : ''" @click="switchView('card')">
|
||||
<el-card shadow="hover" class="btn_wev">
|
||||
<el-button :type="isListView ? 'primary' : ''" @click="switchView('card')" class="btn_list">
|
||||
{{ isListView ? '卡片显示' : '卡片显示' }}
|
||||
</el-button>
|
||||
<el-button :type="!isListView ? 'primary' : ''" @click="switchView('list')">
|
||||
<el-button :type="!isListView ? 'primary' : ''" @click="switchView('list')" class="btn_list">
|
||||
{{ !isListView ? '列表显示' : '列表显示' }}
|
||||
</el-button>
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" style="margin-top: 20px;">
|
||||
<el-form-item label="设备名称" prop="deviceName">
|
||||
<el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型" prop="deviceType">
|
||||
<el-select v-model="queryParams.deviceType" placeholder="设备类型">
|
||||
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
|
||||
:value="item.deviceTypeId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="报警事项" prop="deviceAction">
|
||||
<el-select v-model="queryParams.deviceAction">
|
||||
<el-option value="0" label="强制报警"></el-option>
|
||||
<el-option value="1" label="撞击闯入"></el-option>
|
||||
<el-option value="2" label="手动报警"></el-option>
|
||||
<el-option value="3" label="电子围栏告警"></el-option>
|
||||
<el-option value="4" label="强制告警"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="报警时间" style="width: 308px">
|
||||
<el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
|
||||
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="报警状态" prop="treatmentState">
|
||||
<el-select v-model="queryParams.treatmentState">
|
||||
<el-option value="0" label="已处理"></el-option>
|
||||
<el-option value="1" label="未处理"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="btn_search">
|
||||
<div style="position: absolute; right:30px; top:30px">
|
||||
<el-input v-model="queryParams.content" placeholder="报警信息" clearable
|
||||
style="width: 200px; margin-right: 20px;" @keyup.enter="handleQuery" @input="handleInput" />
|
||||
<el-button type="primary" plain @click="toggleFilter">高级筛选</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-collapse accordion v-model="activeNames">
|
||||
<el-collapse-item name="1">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" style="margin-top: 20px;">
|
||||
<el-form-item label="设备名称" prop="deviceName">
|
||||
<el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型" prop="deviceType">
|
||||
<el-select v-model="queryParams.deviceType" placeholder="设备类型">
|
||||
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
|
||||
:value="item.deviceTypeId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="报警事项" prop="deviceAction">
|
||||
<el-select v-model="queryParams.deviceAction">
|
||||
<el-option value="0" label="强制报警"></el-option>
|
||||
<el-option value="1" label="撞击闯入"></el-option>
|
||||
<el-option value="2" label="手动报警"></el-option>
|
||||
<el-option value="3" label="电子围栏告警"></el-option>
|
||||
<el-option value="4" label="强制告警"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="报警时间" style="width: 308px">
|
||||
<el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
|
||||
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="报警状态" prop="treatmentState">
|
||||
<el-select v-model="queryParams.treatmentState">
|
||||
<el-option value="0" label="已处理"></el-option>
|
||||
<el-option value="1" label="未处理"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-card>
|
||||
</div>
|
||||
</transition>
|
||||
@ -158,7 +170,8 @@ const showSearch = ref(true);
|
||||
const total = ref(0);
|
||||
const deviceTypeOptions = ref([]); //设备类型
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const alarmFormRef = ref<ElFormInstance>();
|
||||
const activeNames = ref([]);
|
||||
const debounceTimer = ref(null) // 用于防抖的定时器
|
||||
const initFormData: AlarmForm = {
|
||||
id: undefined,
|
||||
deviceId: undefined,
|
||||
@ -225,14 +238,23 @@ const getDeviceType = () => {
|
||||
|
||||
})
|
||||
};
|
||||
const toggleFilter = () => {
|
||||
if (activeNames.value.length > 0) {
|
||||
activeNames.value = [];
|
||||
} else {
|
||||
activeNames.value = ['1'];
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
alarmFormRef.value?.resetFields();
|
||||
}
|
||||
|
||||
const handleInput = () => {
|
||||
if (debounceTimer.value) {
|
||||
clearTimeout(debounceTimer.value)
|
||||
}
|
||||
// 300ms后执行查询（避免输入过程中频繁调用接口）
|
||||
debounceTimer.value = setTimeout(() => {
|
||||
handleQuery() // 调用查询接口的方法
|
||||
}, 300)
|
||||
};
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
@ -250,8 +272,25 @@ onMounted(() => {
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep .el-collapse-item__header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep .el-collapse-item__wrap {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.btn_wev {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.btn_list {
|
||||
margin-top: -5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.custom-alarm-card {
|
||||
height: 298px;
|
||||
height: 270px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0px 0px 6px 0px rgba(0, 27, 74, 0.1);
|
||||
@ -320,7 +359,8 @@ onMounted(() => {
|
||||
.label {
|
||||
font-weight: 500;
|
||||
margin-right: 4px;
|
||||
margin: 12px 0;
|
||||
margin: 4px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.value {
|
||||
@ -334,6 +374,7 @@ onMounted(() => {
|
||||
margin: 10px 0 10px 0;
|
||||
position: relative;
|
||||
color: rgb(224, 52, 52);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.alearm::before {
|
||||
@ -354,6 +395,7 @@ onMounted(() => {
|
||||
margin: 10px 0 10px 0;
|
||||
position: relative;
|
||||
color: rgba(56, 64, 79, 1);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.alearmADD::before {
|
||||
|
||||
Reference in New Issue
Block a user