| | |
| | | <template> |
| | | <el-dialog class="ztzf-data-cockpit-dialog" append-to-body v-model="visibleModel" :title="dialogTitle" |
| | | <el-dialog class="command-dialog" append-to-body v-model="visibleModel" :title="dialogTitle" |
| | | :close-on-click-modal="false" :destroy-on-close="true"> |
| | | <el-form ref="queryParamsRef" :model="searchParams" class="history-search"> |
| | | <el-row :gutter="12"> |
| | | <el-col :span="4"> |
| | | <el-form-item label="关键字" prop="keyword"> |
| | | <el-input class="ztzf-data-cockpit-search-input" v-model="searchParams.keyword" |
| | | placeholder="名称/序列号" clearable @clear="handleSearch" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="5"> |
| | | <el-form-item prop="dateRange"> |
| | | <el-date-picker class="ztzf-data-cockpit-date-picker" |
| | | popper-class="ztzf-data-cockpit-date-picker-popper" v-model="searchParams.dateRange" |
| | | type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" |
| | | value-format="YYYY/MM/DD" @change="handleSearch" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-form-item label="区域" prop="area"> |
| | | <el-tree-select class="ztzf-data-cockpit-select" popper-class="ztzf-tree-cockpit-select-popper" v-model="searchParams.area" :data="areaTree" :props="areaTreeProps" |
| | | node-key="value" check-strictly clearable placeholder="请选择" @change="handleSearch" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="5"> |
| | | <el-form-item label="无人机类型" prop="droneType"> |
| | | <el-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper" |
| | | v-model="searchParams.droneType" placeholder="请选择" clearable @change="handleSearch"> |
| | | <el-option v-for="item in droneTypeOptions" :key="item.value" :label="item.label" |
| | | :value="item.value" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="6" class="history-search-actions"> |
| | | <el-form-item> |
| | | <el-button :icon="RefreshRight" @click="resetForm"></el-button> |
| | | <el-button :icon="Search" @click="handleSearch"></el-button> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-form ref="queryParamsRef" :model="searchParams" class="command-dialog-history-search"> |
| | | <el-form-item label="关键字" prop="keyword"> |
| | | <el-input class="command-input" v-model="searchParams.keyword" placeholder="名称/序列号" clearable |
| | | @clear="handleSearch" /> |
| | | </el-form-item> |
| | | |
| | | <el-form-item prop="dateRange"> |
| | | <el-date-picker class="command-date-picker" popper-class="command-date-picker-popper" |
| | | v-model="searchParams.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" |
| | | end-placeholder="结束日期" value-format="YYYY/MM/DD" @change="handleSearch" /> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="区域" prop="area"> |
| | | <el-tree-select class="command-select" popper-class="command-tree-select-popper" |
| | | v-model="searchParams.area" :data="areaTree" :props="areaTreeProps" node-key="value" check-strictly |
| | | filterable :filter-node-method="filterAreaNode" clearable placeholder="请选择" |
| | | @change="handleSearch" /> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="无人机类型" prop="droneType"> |
| | | <el-select class="command-select" popper-class="command-select-popper" v-model="searchParams.droneType" |
| | | placeholder="请选择" clearable @change="handleSearch"> |
| | | <el-option v-for="item in dictObj.droneType" :key="item.dictKey" :label="item.dictValue" |
| | | :value="item.dictKey" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | |
| | | <el-form-item class="history-search-actions"> |
| | | <el-button :icon="RefreshRight" @click="resetForm"></el-button> |
| | | <el-button class="search-btn" :icon="Search" @click="handleSearch"></el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | <div class="table-container" v-loading="loading" element-loading-background="rgba(5, 5, 15, 0.6)"> |
| | | <div class="table-content"> |
| | | <el-table class="ztzf-data-cockpit-table" :data="list"> |
| | | <div class="command-table-container" v-loading="loading" element-loading-background="rgba(5, 5, 15, 0.6)"> |
| | | <div class="command-table-content"> |
| | | <el-table class="command-table" :data="list"> |
| | | <el-table-column type="index" width="60" label="序号" /> |
| | | <el-table-column prop="droneName" label="无人机名称" min-width="120" /> |
| | | <el-table-column prop="droneSerialNo" label="无人机序列号" min-width="140" /> |
| | |
| | | {{ getDroneTypeText(row.droneType) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="areaName" label="区域" min-width="90" /> |
| | | <el-table-column prop="deviceName" label="数据来源" min-width="110" /> |
| | | <el-table-column prop="areaName" show-overflow-tooltip label="区域" min-width="90" /> |
| | | <el-table-column prop="deviceName" show-overflow-tooltip label="数据来源" min-width="110" /> |
| | | <el-table-column label="信号频段" min-width="100"> |
| | | <template #default="{ row }"> |
| | | {{ formatFrequency(row.signalFreqMhz) }} |
| | |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | |
| | | <div class="table-pagination"> |
| | | <el-pagination popper-class="ztzf-data-cockpit-select-popper" v-model:current-page="searchParams.current" v-model:page-size="searchParams.size" |
| | | layout="total, prev, pager, next, sizes" |
| | | :total="total" @change="getList" /> |
| | | |
| | | <div class="command-table-pagination"> |
| | | <el-pagination popper-class="command-select-popper" v-model:current-page="searchParams.current" |
| | | v-model:page-size="searchParams.size" layout="total, prev, pager, next, sizes" :total="total" |
| | | @change="getList" /> |
| | | </div> |
| | | </div> |
| | | </el-dialog> |
| | |
| | | <script setup> |
| | | import { Search, RefreshRight } from '@element-plus/icons-vue' |
| | | import { computed, ref, watch } from 'vue' |
| | | import { alarmLogApi } from '@/api/dataCockpit' |
| | | import { getDictionaryByCode } from '@/api/system/dictbiz' |
| | | import { alarmLogApi, areaDivideListApi } from '@/api/dataCockpit' |
| | | import { getDictLabel,dateRangeFormat } from '@ztzf/utils' |
| | | |
| | | const props = defineProps({ |
| | | modelValue: { |
| | |
| | | }) |
| | | |
| | | const dialogTitle = computed(() => { |
| | | return `反制设备名称 ${props.device?.name || ''}`.trim() |
| | | return `${props.device?.name || ''}`.trim() |
| | | }) |
| | | |
| | | const initSearchParams = () => ({ |
| | |
| | | }) |
| | | const searchParams = ref(initSearchParams()) |
| | | const queryParamsRef = ref(null) |
| | | const loading = ref(false) |
| | | const loading = ref(true) |
| | | const list = ref([]) |
| | | const total = ref(0) |
| | | const areaTree = ref([ |
| | | { |
| | | label: '古村区', |
| | | value: '古村区' |
| | | }, |
| | | { |
| | | label: '新区', |
| | | value: '新区' |
| | | }, |
| | | { |
| | | label: '产业园', |
| | | value: '产业园' |
| | | } |
| | | ]) |
| | | const dictObj = ref({ |
| | | droneType: [] |
| | | }) |
| | | const areaTree = ref([]) |
| | | const areaTreeProps = { |
| | | label: 'label', |
| | | children: 'children' |
| | | } |
| | | |
| | | const droneTypeOptions = [ |
| | | { label: '微型机', value: '1' }, |
| | | { label: '植保机', value: '2' } |
| | | ] |
| | | |
| | | const fetchDictList = async () => { |
| | | const res = await getDictionaryByCode('droneType') |
| | | dictObj.value = res?.data?.data ?? { droneType: [] } |
| | | } |
| | | |
| | | |
| | | const filterAreaNode = (value, data) => { |
| | | if (!value) return true |
| | | return (data?.label || '').includes(value) |
| | | } |
| | | |
| | | const fetchAreaTree = async () => { |
| | | try { |
| | | const res = await areaDivideListApi() |
| | | const list = res?.data?.data ?? [] |
| | | areaTree.value = list |
| | | .filter((item) => item?.areaName) |
| | | .map((item) => ({ |
| | | label: item.areaName, |
| | | value: item.areaName |
| | | })) |
| | | } catch (error) { |
| | | areaTree.value = [] |
| | | } |
| | | } |
| | | |
| | | const getList = async () => { |
| | | if (!props.device?.id) { |
| | |
| | | total.value = 0 |
| | | return |
| | | } |
| | | const [startTime, endTime] = searchParams.value.dateRange || [] |
| | | const [startTime, endTime] = dateRangeFormat(searchParams.value.dateRange) || [] |
| | | const keyword = (searchParams.value.keyword || '').trim() |
| | | const params = { |
| | | alarmType: '2', |
| | |
| | | } |
| | | |
| | | const getDroneTypeText = (value) => { |
| | | if (value === 1 || value === '1') return '微型机' |
| | | if (value === 2 || value === '2') return '植保机' |
| | | return value || '-' |
| | | return getDictLabel(value, dictObj.value.droneType) || value || '-' |
| | | } |
| | | |
| | | watch( |
| | |
| | | (visible) => { |
| | | if (visible) { |
| | | searchParams.value.current = 1 |
| | | fetchDictList() |
| | | fetchAreaTree() |
| | | getList() |
| | | } else { |
| | | searchParams.value = initSearchParams() |
| | | } |
| | | } |
| | | ) |