| | |
| | | <script setup name="alarmHis"> |
| | | import { ref, reactive, onMounted, watchEffect, } from "vue"; |
| | | import { ref, reactive, onMounted, watchEffect, nextTick } from "vue"; |
| | | import useWebSocket from "@/hooks/useWebsocket.js"; |
| | | import useElement from "@/hooks/useElement.js"; |
| | | import { getAreaTreeApi } from "@/api/area"; |
| | | import { formatAreaTree } from "@/utils/tree"; |
| | | import { confirmAlm, cancelAlm, delAlm } from '@/api/alarm.js'; |
| | | import { |
| | | getLinfById, |
| | | getLockAlmHis, |
| | | } from '@/api/lockManager.js'; |
| | | |
| | | import useStation from "@/hooks/useStationList.js"; |
| | | const { stationName1, stationName2, stationName3, stationName4, |
| | | stationList1, stationList2, stationList3, stationList4, lockList |
| | | } = useStation(); |
| | | |
| | | import { Search } from '@element-plus/icons-vue'; |
| | | |
| | |
| | | const pageCurr = ref(1); |
| | | const pageSize = ref(10); |
| | | const total = ref(0); |
| | | const areaId = ref(); |
| | | const lockId = ref(); |
| | | const areaList = ref([]); |
| | | const lockList = ref([]); |
| | | const confirmFlag = ref(0); |
| | | const startTime = ref('2020-01-01'); |
| | | const endTime = ref(''); |
| | | const lockName = ref(''); |
| | | const datas = reactive({ |
| | | tableData: [], |
| | | keyInfo: {}, |
| | |
| | | } |
| | | |
| | | async function getList() { |
| | | let _almIds = checkedTypes.value?.length ? checkedTypes.value.join(',') : 0; |
| | | let _areaId = areaId.value?.length ? areaId.value[areaId.value.length - 1] : undefined; |
| | | let _startTime = startTime.value + ' 00:00:00'; |
| | | let _endTime = endTime.value + ' 23:59:59'; |
| | | let _pageNum = pageCurr.value; |
| | | let _pageSize = pageSize.value; |
| | | let params = { |
| | | stationName1: stationName1.value || undefined, |
| | | stationName2: stationName2.value || undefined, |
| | | stationName3: stationName3.value || undefined, |
| | | stationName4: stationName4.value || undefined, |
| | | lockName: lockName.value || undefined, |
| | | pageNum: pageCurr.value, |
| | | pageSize: pageSize.value, |
| | | endTime: endTime.value ? endTime.value + ' 23:59:59' : undefined, |
| | | startTime: startTime.value ? startTime.value + ' 00:00:00' : undefined, |
| | | almIdList: checkedTypes.value?.length ? checkedTypes.value : [] |
| | | } |
| | | |
| | | let res = await getLockAlmHis(_areaId, _startTime, _endTime, _pageNum, _pageSize, _almIds); |
| | | let res = await getLockAlmHis(params); |
| | | if (res.code && res.data) { |
| | | let { |
| | | total: _total, |
| | |
| | | // 告警来源[1-平台触发 2-手机APP触发 3-锁具触发] |
| | | datas.tableData = list.map(v => ({ |
| | | ...v, |
| | | areaPath: v.linf.areaPath, |
| | | lockName: v.linf.lockName, |
| | | stationName: v.linf.stationName, |
| | | almName: types.find(t => t.value == v.almId).label, |
| | | alarmSource: v.almSource == 1 ? '平台触发' : v.almSource == 2 ? '手机APP触发' : '锁具触发', |
| | | almConfirmedTime: v.almIsConfirmed ? v.almConfirmedTime : '--', |
| | |
| | | total.value = _total; |
| | | } |
| | | } |
| | | |
| | | async function getLocks() { |
| | | if (!areaId.value.length) { |
| | | $message.error('请选择区域'); |
| | | return false; |
| | | } |
| | | let res = await getLinfById(areaId.value[areaId.value.length - 1]); |
| | | let { code, data, data2 } = res; |
| | | let _list = []; |
| | | if (code && data) { |
| | | _list = data2; |
| | | } |
| | | lockList.value = _list; |
| | | |
| | | } |
| | | |
| | | |
| | | function confirmAlarm(scope) { |
| | | $confirm('确认告警', () => { |
| | |
| | | |
| | | function areaChange() { |
| | | getList(); |
| | | // if (!areaId.value.length) { |
| | | // return false; |
| | | // } |
| | | // getLocks(); |
| | | } |
| | | |
| | | async function getAreaTree() { |
| | | try { |
| | | const res = await getAreaTreeApi(); |
| | | let _data = []; |
| | | if (res.code === 1 && res.data) { |
| | | _data = res.data2; |
| | | } |
| | | const treeList = []; |
| | | let ids = _data.map((v) => v.id); |
| | | for (let i = 0; i < _data.length; i++) { |
| | | formatAreaTree(_data[i], ids, treeList); |
| | | } |
| | | // console.log(_data, 'data'); |
| | | // console.log(treeList, 'treeList'); |
| | | areaList.value = treeList; |
| | | } catch (e) { |
| | | console.log(e); |
| | | } |
| | | } |
| | | |
| | | function delAlarm(scope) { |
| | | $confirm('删除告警', () => { |
| | |
| | | |
| | | onMounted(() => { |
| | | endTime.value = moment().format('YYYY-MM-DD'); |
| | | getAreaTree(); |
| | | getList(); |
| | | }); |
| | | </script> |
| | |
| | | <div class="page-header"> |
| | | </div> |
| | | <div class="page-content"> |
| | | <hdw-card is-full> |
| | | <yc-card is-full> |
| | | <div class="page-content-wrapper"> |
| | | <div class="page-content-tools"> |
| | | <div class="tools-filter"> |
| | | <div class="tools-filter-item"> |
| | | <div class="filter-label">区域</div> |
| | | <div class="filter-label">省:</div> |
| | | <div class="filter-content"> |
| | | <el-cascader class="select" filterable clearable v-model="areaId" @change="areaChange" |
| | | :props="{ value: 'id', checkStrictly: true }" :options="areaList"><template #default="{ node, data }"> |
| | | <span>{{ data.label }}</span> |
| | | <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span> |
| | | </template></el-cascader> |
| | | </div> |
| | | </div> |
| | | <!-- <div class="tools-filter-item"> |
| | | <div class="filter-label">锁具</div> |
| | | <div class="filter-content"> |
| | | <el-select v-model="lockId" clearable filterable @change="getList" :placeholder="!areaId?.length ? '请选择区域' : '请选择锁具'"> |
| | | <el-option v-for="item in lockList" :key="'lock_' + item.lockId" :label="item.lockName" |
| | | :value="item.lockId" /> |
| | | <el-select v-model="stationName1" clearable placeholder="请选择" @change="() => nextTick(() => sendMessage())" size="small" |
| | | style="width: 180px"> |
| | | <el-option v-for="(item, idx) in stationList1" :key="'province_' + idx" :label="item" :value="item" /> |
| | | </el-select> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | <div class="tools-filter-item"> |
| | | <div class="filter-label">市:</div> |
| | | <div class="filter-content"> |
| | | <el-select v-model="stationName2" clearable placeholder="请选择" @change="() => nextTick(() => sendMessage())" size="small" |
| | | style="width: 180px"> |
| | | <el-option v-for="(item, idx) in stationList2" :key="'city_' + idx" :label="item" :value="item" /> |
| | | </el-select> |
| | | </div> |
| | | </div> |
| | | <div class="tools-filter-item"> |
| | | <div class="filter-label">区县:</div> |
| | | <div class="filter-content"> |
| | | <el-select v-model="stationName3" clearable placeholder="请选择" @change="() => nextTick(() => sendMessage())" size="small" |
| | | style="width: 180px"> |
| | | <el-option v-for="(item, idx) in stationList3" :key="'list2_' + idx" :label="item" :value="item" /> |
| | | </el-select> |
| | | </div> |
| | | </div> |
| | | <div class="tools-filter-item"> |
| | | <div class="filter-label">机房:</div> |
| | | <div class="filter-content"> |
| | | <el-select v-model="stationName4" clearable placeholder="请选择" @change="() => nextTick(() => sendMessage())" size="small" |
| | | style="width: 180px"> |
| | | <el-option v-for="(item, idx) in stationList4" :key="'list3_' + idx" :label="item" :value="item" /> |
| | | </el-select> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="tools-filter-item"> |
| | | <div class="filter-label">锁具名称:</div> |
| | | <div class="filter-content"> |
| | | <el-select v-model="lockName" clearable filterable placeholder="请选择" @change="() => nextTick(() => sendMessage())" size="small" |
| | | style="width: 180px"> |
| | | <el-option v-for="(item, idx) in lockList" :key="'list3_' + idx" :label="item.lockName" :value="item.lockName" /> |
| | | </el-select> |
| | | </div> |
| | | </div> |
| | | <div class="tools-filter-item flex-row"> |
| | | <div class="filter-label">告警类型</div> |
| | | <el-checkbox class="select-all" v-model="checkAll" :indeterminate="isIndeterminate" |
| | |
| | | <div class="tools-filter-item"> |
| | | <div class="filter-label">起始时间</div> |
| | | <div class="filter-content"> |
| | | <el-date-picker v-model="startTime" @change="getList" value-format="YYYY-MM-DD" type="date" |
| | | <el-date-picker v-model="startTime" size="small" @change="getList" value-format="YYYY-MM-DD" type="date" |
| | | placeholder="" /> |
| | | </div> |
| | | </div> |
| | | <div class="tools-filter-item"> |
| | | <div class="filter-label">截止时间</div> |
| | | <div class="filter-content"> |
| | | <el-date-picker v-model="endTime" type="date" value-format="YYYY-MM-DD" @change="getList" |
| | | <el-date-picker v-model="endTime" size="small" type="date" value-format="YYYY-MM-DD" @change="getList" |
| | | placeholder="" /> |
| | | </div> |
| | | </div> |
| | | <div class="tools-filter-item"> |
| | | <el-button type="primary" :icon="Search" @click="getList">查询</el-button> |
| | | <el-button type="primary" :icon="Search" size="small" @click="getList">查询</el-button> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="pos-rel"> |
| | | <div class="pos-abs"> |
| | | <el-table :data="datas.tableData" border style="width: 100%; height: 100%"> |
| | | <el-table-column type="index" width="50" /> |
| | | <el-table-column prop="lockId" align="center" label="钥匙ID" width="120" /> |
| | | <el-table-column prop="lockName" align="center" label="钥匙名称" width="140" /> |
| | | <el-table-column prop="areaPath" align="center" label="所属区域" min-width="180" /> |
| | | <el-table-column type="index" fixed="left" width="50" /> <el-table-column prop="lockName" align="center" label="锁具名称" width="140" /> |
| | | <el-table-column prop="stationName" align="center" label="机房" min-width="180" /> |
| | | <el-table-column prop="almName" align="center" label="告警名称" width="180" /> |
| | | <el-table-column prop="alarmSource" align="center" label="告警来源" width="180" /> |
| | | <!-- <el-table-column prop="almIsConfirmedStr" align="center" label="是否确认" width="180" /> --> |
| | |
| | | <div class="page-tool"></div> |
| | | <div class="el-page-container"> |
| | | <el-pagination v-model:current-page="pageCurr" v-model:page-size="pageSize" |
| | | :page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]" size="small" :disabled="disabled" |
| | | :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total" |
| | | :page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]" size="small" |
| | | layout="total, sizes, prev, pager, next, jumper" :total="total" |
| | | @size-change="handleSizeChange" @current-change="handleCurrentChange" /> |
| | | </div> |
| | | <div class="page-tool"></div> |
| | | </div> |
| | | </div> |
| | | </hdw-card> |
| | | </yc-card> |
| | | </div> |
| | | <div class="page-footer"></div> |
| | | <!-- 弹窗 --> |
| | | <el-dialog :title="dialogTitle" v-model="addEditVisible" top="0" :close-on-click-modal="false" class="dialog-center" |
| | | width="700px" center> |
| | | <add-edit v-if="addEditVisible" @success="onOk" :info="datas.keyInfo" @cancel="onCanel"></add-edit> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | .tools-filter-item { |
| | | display: inline-block; |
| | | margin-right: 8px; |
| | | margin-bottom: 8px; |
| | | |
| | | &.flex-row { |
| | | display: inline-flex; |