admin/zhgdlarge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修改智能安全帽围栏信息

Browse Source
This commit is contained in:
Vce 2024-03-27 16:04:18 +08:00
parent fd143469c5
commit d568e2924f
4 changed files with 384 additions and 329 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/modules/equipmentPosition.ts
View File

@ -21,6 +21,10 @@ export const getEpAlarmRecordInfoApi = (params: {}) => {
export const getEpRealtimeDataApi = (params: {}) => {
return http.get(BASEURL + `/xmgl/mechanicalEquipmentPositionData/list`, params);
};
// 机械设备定位--查询实时数据信息
export const getEpRealtimeDataPageApi = (params: {}) => {
return http.get(BASEURL + `/xmgl/mechanicalEquipmentPositionData/page`, params);
};
// 机械设备定位--查询机械设备日行数据
export const getEpDayRecordApi = (params: {}) => {
return http.get(BASEURL + `/xmgl/mechanicalEquipmentPositionDayRecord/list`, params);

45
src/api/modules/smartSafeHat.ts
View File

@ -1,47 +1,6 @@
import http from "@/api";
const BASEURL = import.meta.env.VITE_API_URL;
// 分页列表查询车辆（人员）定位- 实时数据信息
export const getRealtimeRecordInfo = (params: {}) => {
return http.get(BASEURL + `/xmgl/vehiclePositionData/page`, params);
};
// 列表查询车辆（人员）定位- 实时数据信息
export const getRealtimeRecordList = (params: {}) => {
return http.get(BASEURL + `/xmgl/vehiclePositionData/list`, params);
};
// 车辆定位-设备中台
export const getstandardDevListApi = (params: {}) => {
return http.get(BASEURL + `/xmgl/vehiclePositionDev/page`, params);
};
export const addstandardDevApi = (params: {}) => {
return http.post(BASEURL + `/xmgl/vehiclePositionDev/add`, params);
};
export const editstandardDevApi = (params: {}) => {
return http.post(BASEURL + `/xmgl/vehiclePositionDev/edit`, params);
};
export const deletestandardDevApi = (params: {}) => {
return http.post(BASEURL + `/xmgl/vehiclePositionDev/delete`, params);
};
export const getVehiclePositionFence = (params: {}) => {
return http.get(BASEURL + `/xmgl/vehiclePositionFence/list`, params);
};
export const addVehiclePositionFence = (params: {}) => {
return http.post(BASEURL + `/xmgl/vehiclePositionFence/add`, params);
};
export const editVehiclePositionFence = (params: {}) => {
return http.post(BASEURL + `/xmgl/vehiclePositionFence/edit`, params);
};
export const deleteVehiclePositionFence = (params: {}) => {
return http.post(BASEURL + `/xmgl/vehiclePositionFence/delete`, params);
};
// 查询车辆日行数据
export const getVehiclePositionDayRecord = (params: {}) => {
return http.get(BASEURL + `/xmgl/vehiclePositionDayRecord/list`, params);
};
// 智能安全帽--分类查询设备列表
export const getHatDevOptionApi = (params: {}) => {
@ -67,6 +26,10 @@ export const getAlarmRecordInfoApi = (params: {}) => {
export const getRealtimeDataApi = (params: {}) => {
return http.get(BASEURL + `/xmgl/safetyHatData/list`, params);
};
// 智能安全帽--查询实时数据信息
export const getRealtimeDataPageApi = (params: {}) => {
return http.get(BASEURL + `/xmgl/safetyHatData/page`, params);
};
// 智能安全帽--查询安全帽日行数据
export const getSafeHatDayRecordApi = (params: {}) => {
return http.get(BASEURL + `/xmgl/safetyHatData/list`, params);

11
src/views/sevenLargeScreen/digitalConstruction/equipmentPosition/index.vue
View File

@ -288,6 +288,7 @@ import {
getEpSuroundInfoApi,
getEpAlarmRecordInfoApi,
getEpRealtimeDataApi,
getEpRealtimeDataPageApi,
getEpDayRecordApi,
addEpPositionFence,
deleteEpFence
@ -687,12 +688,14 @@ function devChange(e) {
function getRealTimeData(e) {
let data = {
devSn: e.devSn,
projectSn: store.sn
projectSn: store.sn,
pageNo: 1,
pageSize: 1
};
getEpRealtimeDataApi(data).then(res => {
if (res.result.length > 0) {
getEpRealtimeDataPageApi(data).then(res => {
if (res.result.records.length > 0) {
// echoPersonMarker(res.result.records[0]);
echoPersonMarker(res.result[0]);
echoPersonMarker(res.result.records[0]);
} else {
console.log("设备暂无数据", res);
}

653
src/views/sevenLargeScreen/digitalConstruction/smartSafeHat/index.vue
View File

@ -1,194 +1,210 @@
<template>
<div class="data-ledger">
<div class="left-data">
<div class="top-data">
<Card title="定位设备列表" style="width: 100%">
<div class="left-menu">
<div class="left-top">
<div class="realTime-data" @click="selectChange(1)" :class="checked == 1 ? 'top-active' : ''">
<span>列表</span>
</div>
<div class="alarm-data" @click="selectChange(2)" :class="checked == 2 ? 'top-active' : ''">
<span>轨迹</span>
</div>
</div>
<div v-if="checked === 1" style="width: 100%; height: 100%">
<div class="list-tool">
<el-form :inline="true" size="medium" :model="queryInfo" class="demo-form-inline" style="margin-left: 15px">
<el-form-item>
<el-select filterable v-model="queryInfo.devSn" placeholder="请选择或搜索" @change="devChange">
<el-option
v-for="(item, index) in nameOptions"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
<!-- <el-option v-for="(item, index) in devList" :key="index" :label="item.workerName" :value="item.devSn" ></el-option> -->
</el-select>
</el-form-item>
</el-form>
<div class="tool-btn">
<img src="@/assets/images/carPosition/refrush.png" alt="" @click="refreshDev" />
</div>
</div>
<div class="labor-type">
<div class="type-box" @click="laborChange('')" :class="laborType === '' ? 'laborActive' : ''">
全部({{ devTypeTotal.count || 0 }})
</div>
<div class="type-box" @click="laborChange(1)" :class="laborType === 1 ? 'laborActive' : ''">
在线({{ devTypeTotal.onlineCount || 0 }})
</div>
<div class="type-box" @click="laborChange(0)" :class="laborType === 0 ? 'laborActive' : ''">
离线({{ devTypeTotal.offlineCount || 0 }})
</div>
</div>
<div class="dev-list" v-if="devList.length > 0">
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
style="margin-left: 55px; color: #fff"
>全选</el-checkbox
>
<el-scrollbar>
<div style="margin: 15px 0"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<div v-for="item in devList" class="choice-item" :key="item.id">
<div class="list-type">
<img :src="personOn" v-if="item.online === 1" />
<img :src="personOff" v-if="item.online === 0" />
</div>
<el-checkbox :label="item.devSn" :key="item.devSn" class="dev-check">
<!-- {{ item.numberPlate || "" }}{{ item.personName || "" }} -->
{{ item.workerName }}
</el-checkbox>
<!-- <div class="choice-speed" v-if="item.speed">{{ item.speed }}km/h</div> -->
</div>
</el-checkbox-group>
</el-scrollbar>
</div>
<div v-else style="text-align: center; margin-top: 130px; color: #fff; font-size: 20px">暂无设备</div>
</div>
<div v-if="checked === 2">
<div class="top-select">
<el-form :inline="true" size="medium" :model="queryInfo" class="demo-form-inline">
<el-form-item>
<span style="color: #fff; margin-left: 25px; margin-right: 10px">人员名称</span>
<el-select filterable v-model="queryInfo.devSn" placeholder="请选择或搜索" @change="devChange" clearable>
<el-option
v-for="(item, index) in nameOptions"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
<!-- <el-option v-for="(item, index) in devList" :key="index" :label="item.workerName" :value="item.workerInfoId" ></el-option> -->
</el-select>
</el-form-item>
</el-form>
</div>
<div class="track-calendar">
<el-calendar v-model="dayValue" class="custom-hover">
<template #dateCell="{ data }">
<!-- <span>{{ dealMyDate(data.day, data) }}</span> -->
<div :class="data.styleFlag == true ? 'preventClick' : ''" style="font-size: 14px">
{{ data.day.split("-").slice(2).join("") }}<br />
</div>
<!-- <div class="greenStyle"> -->
<!-- <span class="redStyle">{{data}}</span> -->
<!-- <span> {{ getTodayMeter(data.day) }}</span> -->
<!-- </div> -->
</template>
</el-calendar>
</div>
</div>
</div>
</Card>
</div>
<div class="bottom-data">
<Card title="围栏信息">
<div class="left-content">
<div class="tab-list">
<div style="width: 50%">围栏名称</div>
<div style="width: 50%">围栏内的人数</div>
</div>
<el-scrollbar class="list-box">
<div v-for="(item, index) in fenceList" class="list-style" :key="item.id">
<div style="width: 50%">{{ item.fenceName }}</div>
<div style="width: 50%">{{ item.workerNum }}</div>
</div>
<div class="not-data" style="top: 20%" v-if="fenceList.length == 0">
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div>
</el-scrollbar>
</div>
</Card>
</div>
</div>
<div class="data-ledger">
<div class="left-data">
<div class="top-data">
<Card title="定位设备列表" style="width: 100%">
<div class="left-menu">
<div class="left-top">
<div class="realTime-data" @click="selectChange(1)" :class="checked == 1 ? 'top-active' : ''">
<span>列表</span>
</div>
<div class="alarm-data" @click="selectChange(2)" :class="checked == 2 ? 'top-active' : ''">
<span>轨迹</span>
</div>
</div>
<div v-if="checked === 1" style="width: 100%; height: 100%">
<div class="list-tool">
<el-form :inline="true" size="medium" :model="queryInfo" class="demo-form-inline" style="margin-left: 15px">
<el-form-item>
<el-select filterable v-model="queryInfo.devSn" placeholder="请选择或搜索" @change="devChange">
<el-option v-for="(item, index) in nameOptions" :key="index" :label="item.label" :value="item.value"></el-option>
<!-- <el-option v-for="(item, index) in devList" :key="index" :label="item.workerName" :value="item.devSn" ></el-option> -->
</el-select>
</el-form-item>
</el-form>
<div class="tool-btn">
<img src="@/assets/images/carPosition/refrush.png" alt="" @click="refreshDev" />
</div>
</div>
<div class="labor-type">
<div class="type-box" @click="laborChange('')" :class="laborType === '' ? 'laborActive' : ''">
全部({{ devTypeTotal.count || 0 }})
</div>
<div class="type-box" @click="laborChange(1)" :class="laborType === 1 ? 'laborActive' : ''">
在线({{ devTypeTotal.onlineCount || 0 }})
</div>
<div class="type-box" @click="laborChange(0)" :class="laborType === 0 ? 'laborActive' : ''">
离线({{ devTypeTotal.offlineCount || 0 }})
</div>
</div>
<div class="dev-list" v-if="devList.length > 0">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="margin-left: 55px; color: #fff">全选</el-checkbox>
<el-scrollbar>
<div style="margin: 15px 0"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<div v-for="item in devList" class="choice-item" :key="item.id">
<div class="list-type">
<img :src="personOn" v-if="item.online === 1" />
<img :src="personOff" v-if="item.online === 0" />
</div>
<el-checkbox :label="item.devSn" :key="item.devSn" class="dev-check">
<!-- {{ item.numberPlate || "" }}{{ item.personName || "" }} -->
{{ item.workerName }}
</el-checkbox>
<!-- <div class="choice-speed" v-if="item.speed">{{ item.speed }}km/h</div> -->
</div>
</el-checkbox-group>
</el-scrollbar>
</div>
<div v-else style="text-align: center; margin-top: 130px; color: #fff; font-size: 20px">暂无设备</div>
</div>
<div v-if="checked === 2">
<div class="top-select">
<el-form :inline="true" size="medium" :model="queryInfo" class="demo-form-inline">
<el-form-item>
<span style="color: #fff; margin-left: 25px; margin-right: 10px">人员名称</span>
<el-select filterable v-model="queryInfo.devSn" placeholder="请选择或搜索" @change="devChange" clearable>
<el-option v-for="(item, index) in nameOptions" :key="index" :label="item.label" :value="item.value"></el-option>
<!-- <el-option v-for="(item, index) in devList" :key="index" :label="item.workerName" :value="item.workerInfoId" ></el-option> -->
</el-select>
</el-form-item>
</el-form>
</div>
<div class="track-calendar">
<el-calendar v-model="dayValue" class="custom-hover">
<template #dateCell="{ data }">
<!-- <span>{{ dealMyDate(data.day, data) }}</span> -->
<div :class="data.styleFlag == true ? 'preventClick' : ''" style="font-size: 14px">
{{ data.day.split("-").slice(2).join("") }}<br />
</div>
<!-- <div class="greenStyle"> -->
<!-- <span class="redStyle">{{data}}</span> -->
<!-- <span> {{ getTodayMeter(data.day) }}</span> -->
<!-- </div> -->
</template>
</el-calendar>
</div>
</div>
</div>
</Card>
</div>
<div class="bottom-data">
<Card title="围栏信息">
<div class="left-content">
<div class="tab-list">
<div style="width: 50%">围栏名称</div>
<div style="width: 50%">围栏内的人数</div>
</div>
<el-scrollbar class="list-box">
<div v-for="(item, index) in fenceList" class="list-style" :key="item.id">
<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;" @click="openDetail(item.id)">
<div style="width: 50%">{{ item.fenceName }}</div>
<div style="width: 50%">{{ item.workerNum }}</div>
</div>
</div>
<div class="not-data" style="top: 20%" v-if="fenceList.length == 0">
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div>
</el-scrollbar>
</div>
</Card>
</div>
</div>
<div class="right-data">
<div class="map-top">
<Card title="定位地图" style="width: 100%">
<div class="map-box" id="mapContainer"></div>
<div class="wei-lan" v-if="checked === 1">
<div class="icon-off" v-if="!fenceShow" @click="openFence">
<img src="@/assets/images/carPosition/iconOff.png" alt="" />
<div>围栏</div>
</div>
<div class="icon-on" v-if="fenceShow" @click="fenceShow = false">
<img src="@/assets/images/carPosition/iconOn.png" alt="" />
<div>围栏</div>
</div>
<!-- **********************围栏弹窗******************************** -->
<div class="fenceDialog" v-if="fenceShow">
<!-- <div class="fence-dialog-modal" v-if="fenceCreateShow"></div> -->
<div class="fence-box">
<div class="close-icon" @click="closeFence">
<i class="el-icon-close" style="font-size: 22px; color: #919398"></i>
</div>
<div class="close-icon" @click="closeFence">
<el-icon><Close /></el-icon>
</div>
<div class="dialog-title">
<div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div>
<div class="title-text">
<i>围 栏</i>
</div>
</div>
<div class="fence-tool">
<!-- <div class="tool" @click="openFenceCreate">创建围栏</div>
<!-- 围栏信息详情 -->
<div class="weilanDetail" v-show="isOpenDetail">
<div class="detailTitle">
<div class="leftTitle"></div>
<div class="rightTitle"></div>
</div>
<div class="detailContent">
<div class="tab-list">
<div style="width: 10%">序号</div>
<div style="width: 15%">人员名称</div>
<div style="width: 15%">设备序号</div>
<div style="width: 20%">报警时间</div>
<div style="width: 40%">报警信息</div>
</div>
<el-scrollbar class="list-box">
<div v-for="(item, index) in listData" class="list-style" :key="item.id">
<div style="width: 10%">{{ index + 1 }}</div>
<div style="width: 15%">{{ item.workerName }}</div>
<div style="width: 15%">{{ item.devSn }}</div>
<div style="width: 20%">{{ item.alarmTime }}</div>
<div style="width: 40%">{{ item.alarmInfo }}</div>
</div>
<div class="not-data" v-if="listData.length == 0">
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div>
</el-scrollbar>
</div>
</div>
<div class="right-data">
<div class="map-top">
<Card title="定位地图" style="width: 100%">
<div class="map-box" id="mapContainer"></div>
<div class="wei-lan" v-if="checked === 1">
<div class="icon-off" v-if="!fenceShow" @click="openFence">
<img src="@/assets/images/carPosition/iconOff.png" alt="" />
<div>围栏</div>
</div>
<div class="icon-on" v-if="fenceShow" @click="fenceShow = false">
<img src="@/assets/images/carPosition/iconOn.png" alt="" />
<div>围栏</div>
</div>
<!-- **********************围栏弹窗******************************** -->
<div class="fenceDialog" v-if="fenceShow">
<!-- <div class="fence-dialog-modal" v-if="fenceCreateShow"></div> -->
<div class="fence-box">
<div class="close-icon" @click="closeFence">
<i class="el-icon-close" style="font-size: 22px; color: #919398"></i>
</div>
<div class="close-icon" @click="closeFence">
<el-icon>
<Close />
</el-icon>
</div>
<div class="dialog-title">
<div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div>
<div class="title-text">
<i>围 栏</i>
</div>
</div>
<div class="fence-tool">
<!-- <div class="tool" @click="openFenceCreate">创建围栏</div>
<div class="tool" @click="deleteFence">删除围栏</div> -->
<div class="tool tool1" @click="openFenceCreate">创建围栏</div>
<div class="tool tool1" @click="deleteFence">删除围栏</div>
</div>
<div class="fence-select">
<el-input v-model="fenceSearch" placeholder="请输入围栏名称" clearable @change="fenceNameChange"></el-input>
</div>
<div class="fence-radio" v-if="fenceList.length > 0">
<el-checkbox :indeterminate="isIndeterminateFence" v-model="checkAllFence" @change="fenceAllChange"
>全选</el-checkbox
>
<el-scrollbar>
<div style="margin: 5px 0"></div>
<el-checkbox-group v-model="checkedFence" @change="fenceCitiesChange">
<div v-for="item in fenceList" :key="item.id">
<el-checkbox :label="item.id" :value="item.id" :key="item.id">{{ item.fenceName }} </el-checkbox>
</div>
</el-checkbox-group>
</el-scrollbar>
</div>
<div v-else style="text-align: center; margin-top: 65px; color: #fff">暂无围栏</div>
</div>
<div class="tool tool1" @click="openFenceCreate">创建围栏</div>
<div class="tool tool1" @click="deleteFence">删除围栏</div>
</div>
<div class="fence-select">
<el-input v-model="fenceSearch" placeholder="请输入围栏名称" clearable @change="fenceNameChange"></el-input>
</div>
<div class="fence-radio" v-if="fenceList.length > 0">
<el-checkbox :indeterminate="isIndeterminateFence" v-model="checkAllFence" @change="fenceAllChange">全选</el-checkbox>
<el-scrollbar>
<div style="margin: 5px 0"></div>
<el-checkbox-group v-model="checkedFence" @change="fenceCitiesChange">
<div v-for="item in fenceList" :key="item.id">
<el-checkbox :label="item.id" :value="item.id" :key="item.id">{{ item.fenceName }} </el-checkbox>
</div>
</el-checkbox-group>
</el-scrollbar>
</div>
<div v-else style="text-align: center; margin-top: 65px; color: #fff">暂无围栏</div>
</div>
<!-- 创建围栏弹窗 -->
<div class="fenceCreate" v-if="fenceCreateShow">
<div class="fenceCrete-box">
<div class="close-icon" @click="closeFenceCreate">
<i class="el-icon-close" style="font-size: 22px; color: #919398"></i>
</div>
<!-- <div class="fence-title">创建围栏</div> -->
<el-form size="medium" :model="addForm" ref="addFormRef" label-width="80px" :rules="formFenceRules">
<!-- <div class="bigFormBox">
<!-- 创建围栏弹窗 -->
<div class="fenceCreate" v-if="fenceCreateShow">
<div class="fenceCrete-box">
<div class="close-icon" @click="closeFenceCreate">
<i class="el-icon-close" style="font-size: 22px; color: #919398"></i>
</div>
<!-- <div class="fence-title">创建围栏</div> -->
<el-form size="medium" :model="addForm" ref="addFormRef" label-width="80px" :rules="formFenceRules">
<!-- <div class="bigFormBox">
<div class="itemBox1">
<div>围栏名称</div>
<div><el-input v-model="addForm.fenceName" placeholder="请输入"></el-input></div>
@ -225,36 +241,26 @@
</div>
</div>
</div> -->
<div style="margin-top: 15%">
<el-form-item label="围栏名称" prop="fenceName">
<el-input v-model="addForm.fenceName" placeholder="请输入"></el-input>
</el-form-item>
<div style="margin-top: 15%">
<el-form-item label="围栏名称" prop="fenceName">
<el-input v-model="addForm.fenceName" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="范围类型" prop="rangeType">
<el-radio-group
v-model="addForm.rangeType"
style="display: flex; justify-content: space-between; padding-top: 0px; padding-right: 0px"
@change="changeAreaType"
>
<el-radio :label="1">标准区域</el-radio>
<el-radio :label="2">自定义</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="区域半径" prop="areaRadius" v-if="addForm.rangeType === 1">
<el-input
type="number"
v-model="addForm.areaRadius"
placeholder="请输入"
:maxlength="5"
@input="areaRadiusChange"
></el-input>
</el-form-item>
<el-form-item label="围栏形状" prop="fenceShape" v-if="addForm.rangeType === 2">
<div class="fence-shape">多边形</div>
</el-form-item>
</div>
<el-form-item label="范围类型" prop="rangeType">
<el-radio-group v-model="addForm.rangeType" style="display: flex; justify-content: space-between; padding-top: 0px; padding-right: 0px" @change="changeAreaType">
<el-radio :label="1">标准区域</el-radio>
<el-radio :label="2">自定义</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="区域半径" prop="areaRadius" v-if="addForm.rangeType === 1">
<el-input type="number" v-model="addForm.areaRadius" placeholder="请输入" :maxlength="5" @input="areaRadiusChange"></el-input>
</el-form-item>
<el-form-item label="围栏形状" prop="fenceShape" v-if="addForm.rangeType === 2">
<div class="fence-shape">多边形</div>
</el-form-item>
</div>
<!-- <div class="create-footer">
<!-- <div class="create-footer">
<el-button class="cancleBtn" @click="fenceCreateShow = false" icon="el-icon-circle-close" size="medium"
>取消
</el-button>
@ -263,23 +269,24 @@
</el-button>
</div> -->
<div class="cFooter">
<div class="tool tool1" @click="closeFenceCreate">取消</div>
<div class="tool tool2" @click="submitFence(addFormRef)">保存</div>
</div>
</el-form>
</div>
</div>
</div>
</div>
<!-- **********************围栏弹窗******************************** -->
<div class="cFooter">
<div class="tool tool1" @click="closeFenceCreate">取消</div>
<div class="tool tool2" @click="submitFence(addFormRef)">保存</div>
</div>
</el-form>
</div>
</div>
</div>
</div>
<!-- **********************围栏弹窗******************************** -->
<div class="start-track" @click="startAnimation" v-if="checked === 2">开始轨迹动画</div>
</Card>
</div>
<!-- **********报警数据*********** -->
<div class="right-bottom">
<div class="hat-bottom">
<div class="start-track" @click="startAnimation" v-if="checked === 2">开始轨迹动画</div>
</Card>
</div>
<!-- **********报警数据*********** -->
<div class="right-bottom">
<!-- <div class="hat-bottom">
<Card title="帽子总数">
<div class="hat-container">
<div class="hat-image">
@ -290,43 +297,43 @@
</div>
</div>
</Card>
</div>
<div class="week-bottom">
<Card title="近七天报警数据">
<div id="weekAlarmLine" ref="weekAlarmLine" style="width: 100%; height: 100%"></div>
</Card>
</div>
<div class="alarm-bottom">
<Card title="报警信息">
<div class="bottom-left">
<div class="left-content">
<div class="tab-list">
<div style="width: 10%">序号</div>
<div style="width: 15%">人员名称</div>
<div style="width: 15%">设备序号</div>
<div style="width: 20%">报警时间</div>
<div style="width: 40%">报警信息</div>
</div>
<el-scrollbar class="list-box">
<div v-for="(item, index) in listData" class="list-style" :key="item.id">
<div style="width: 10%">{{ index + 1 }}</div>
<div style="width: 15%">{{ item.workerName }}</div>
<div style="width: 15%">{{ item.devSn }}</div>
<div style="width: 20%">{{ item.alarmTime }}</div>
<div style="width: 40%">{{ item.alarmInfo }}</div>
</div>
<div class="not-data" v-if="listData.length == 0">
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div>
</el-scrollbar>
</div>
</div>
</Card>
</div>
</div>
</div>
</div>
</div> -->
<div class="week-bottom">
<Card title="近七天报警数据">
<div id="weekAlarmLine" ref="weekAlarmLine" style="width: 100%; height: 100%"></div>
</Card>
</div>
<div class="alarm-bottom">
<Card title="报警信息">
<div class="bottom-left">
<div class="left-content">
<div class="tab-list">
<div style="width: 10%">序号</div>
<div style="width: 15%">人员名称</div>
<div style="width: 15%">设备序号</div>
<div style="width: 20%">报警时间</div>
<div style="width: 40%">报警信息</div>
</div>
<el-scrollbar class="list-box">
<div v-for="(item, index) in listData" class="list-style" :key="item.id">
<div style="width: 10%">{{ index + 1 }}</div>
<div style="width: 15%">{{ item.workerName }}</div>
<div style="width: 15%">{{ item.devSn }}</div>
<div style="width: 20%">{{ item.alarmTime }}</div>
<div style="width: 40%">{{ item.alarmInfo }}</div>
</div>
<div class="not-data" v-if="listData.length == 0">
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div>
</el-scrollbar>
</div>
</div>
</Card>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
@ -336,11 +343,12 @@ import {
getHatDevOptionApi,
getWeekAlarmDataApi,
getRealtimeDataApi,
getRealtimeDataPageApi,
getSafeHatDayRecordApi,
deleteSafehatFence,
addSafeHatPositionFence,
getSuroundInfoApi,
getSafeHatTypeTotalApi,
getSafeHatTypeTotalApi
} from "@/api/modules/smartSafeHat";
// import carIcon from "@/assets/images/carPosition/carIcon.png";
@ -512,9 +520,9 @@ watch(choiceMonth, newVal => {
}
});
function handleCancel() {
fenceCreateShow.value = false;
clearFn();
let isOpenDetail = ref(true);
function openDetail(id) {
isOpenDetail.value = !isOpenDetail.value;
}
let addressStr = ref("");
@ -931,10 +939,12 @@ function getRealTimeData(e) {
let data = {
devSn: e.devSn,
// devSn: "866652021371993",
projectSn: store.sn
projectSn: store.sn,
pageNo: 1,
pageSize: 1
};
getRealtimeDataApi(data).then(res => {
if (res.result.length > 0) {
getRealtimeDataPageApi(data).then(res => {
if (res.result.records.length > 0) {
// if (res.result.records[0].type === 1) {
// echoCarMarker(res.result.records[0]);
// }
@ -942,7 +952,7 @@ function getRealTimeData(e) {
// echoPersonMarker(res.result.records[0]);
// }
// echoCarMarker(res.result[0]);
echoPersonMarker(res.result[0]);
echoPersonMarker(res.result.records[0]);
} else {
console.log("设备暂无数据", res);
}
@ -977,7 +987,7 @@ function getFenceList() {
// element.fenceShapeArr = JSON.stringify(testArr._value)
// console.log(element.fenceShapeArr)
// });
console.log(fenceList);
// console.log(fenceList);
circleMapData.value = res.result.filter(item => item.rangeType === 1);
shapeMapData.value = res.result.filter(item => item.rangeType === 2);
console.log("围栏", circleMapData.value, shapeMapData.value);
@ -1802,6 +1812,81 @@ function echoPersonMarker(item) {
</style>
<style lang="scss" scoped>
.weilanDetail {
position: absolute;
background: rgba(8,23,68, 0.5);
background-size: 100% 100%;
box-sizing: border-box;
width: 35%;
top: 25%;
left: 32.5%;
height: 65%;
z-index: 999;
padding: 0 1%;
.detailContent {
height: 100%;
width: 100%;
.tab-list {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 5%;
background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
background-size: 100% 100%;
// position: absolute;
left: 75.5%;
top: 75%;
color: #ccc;
font-size: calc(100vw * 16 / 1920);
line-height: 30px;
div {
text-align: center;
width: 24%;
}
}
.list-box {
height: 90%;
.list-style:nth-child(even) {
background: rgba(39, 88, 192, 0.06);
}
.list-style {
display: flex;
align-items: center;
color: #fff;
line-height: 24px;
font-size: 14px;
div {
text-align: center;
width: 24%;
white-space: nowrap;
}
}
.list-style:hover {
background: #091f3f;
}
.not-data {
top: 23%;
// width: 16%;
left: 20%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
img {
width: 40%;
margin: 5% 30%;
}
p {
color: #fff;
font-size: calc(100vw * 14 / 1920);
margin: -6% 37%;
}
}
}
}
}
// :deep(.h-card .content) {
// background: none;
// }
@ -2215,14 +2300,14 @@ function echoPersonMarker(item) {
margin-top: 1%;
height: 40.8%;
:deep(.h-card) {
.content {
margin-top: 4% !important;
}
.content {
margin-top: 4% !important;
}
}
.left-content {
height: 100%;
width: 100%;
.tab-list {
display: flex;
align-items: center;
@ -2417,12 +2502,12 @@ function echoPersonMarker(item) {
}
}
.week-bottom {
width: 25%;
width: 48.75%;
margin-top: 20px;
height: 100%;
position: relative;
// position: relative;
:deep(.content) {
margin-top: 4.2% !important;
margin-top: 2.1% !important;
}
div {
}