3261 lines
86 KiB
Vue
3261 lines
86 KiB
Vue
<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 class="treeStyle">
|
||
<div style="margin: 15px 0"></div>
|
||
<el-tree
|
||
:data="treeList"
|
||
@check="handleCheck"
|
||
:props="{
|
||
children: 'safetyHatDevs',
|
||
label: 'name'
|
||
}"
|
||
show-checkbox
|
||
check-on-click-node
|
||
default-expand-all
|
||
node-key="devSn"
|
||
ref="tree"
|
||
>
|
||
<template #default="{ node, data }">
|
||
<span class="custom-tree-node">
|
||
<img :src="personOn" v-if="data.online === 1" />
|
||
<img :src="personOff" v-if="data.online === 0" />
|
||
<span class="nodeName">{{ node.label }}</span>
|
||
</span>
|
||
</template>
|
||
</el-tree>
|
||
<!-- <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.workerName }}
|
||
</el-checkbox>
|
||
</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)"
|
||
>
|
||
<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 id="welanMaskContainer" class="welanMask" v-show="isOpenDetail">
|
||
<div class="weilanDetail">
|
||
<div class="detailTitle">
|
||
<div class="leftTitle">
|
||
<img src="@/assets/images/titleIcon.png" />围栏中的人员
|
||
</div>
|
||
<div class="rightTitle">
|
||
<div class="closeDetail" @click="closeDetail">
|
||
<el-icon :size="25" :color="'#657280'">
|
||
<Close />
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="detailContent">
|
||
<div class="tab-list">
|
||
<div style="width: 33%">序号</div>
|
||
<div style="width: 33%">人员名称</div>
|
||
<div style="width: 33%">身份证号</div>
|
||
</div>
|
||
<el-scrollbar class="list-box">
|
||
<div v-for="(item, index) in workerListInFence" class="list-style" :key="item.id">
|
||
<div style="width: 33%">{{ index + 1 }}</div>
|
||
<div style="width: 33%">{{ item.workerName }}</div>
|
||
<div style="width: 33%">{{ item.idCard }}</div>
|
||
</div>
|
||
<div class="not-data" v-if="workerListInFence.length == 0">
|
||
<img src="@/assets/images/noData.png" alt="" />
|
||
<p>暂无数据</p>
|
||
</div>
|
||
</el-scrollbar>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="right-data">
|
||
<div class="map-top" :style="enlarge ? 'height:105%' : ''">
|
||
<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" :style="enlarge ? 'top:8%' : ''">
|
||
<img src="@/assets/images/carPosition/iconOff.png" alt="" />
|
||
<div>围栏</div>
|
||
</div>
|
||
<div class="icon-on" v-if="fenceShow" @click="fenceShow = false" :style="enlarge ? 'top:8%' : ''">
|
||
<img src="@/assets/images/carPosition/iconOn.png" alt="" />
|
||
<div>围栏</div>
|
||
</div>
|
||
<div class="enlargeIconOff" v-if="!enlarge" @click="enlargeMap">
|
||
<img src="@/assets/images/enlarge-icon.png" alt="" />
|
||
<!-- <div>放大</div> -->
|
||
</div>
|
||
<div class="enlargeIconOn" v-if="enlarge" @click="notEnlargeMap" >
|
||
<img src="@/assets/images/not-enlarge-icon.png" alt="" />
|
||
<!-- <div>缩小</div> -->
|
||
</div>
|
||
<!-- **********************围栏弹窗******************************** -->
|
||
<div class="fenceDialog" v-if="fenceShow" :style="enlarge ? 'top:8%' : ''">
|
||
<!-- <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.regionName }} </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="itemBox1">
|
||
<div>围栏名称</div>
|
||
<div><el-input v-model="addForm.fenceName" placeholder="请输入"></el-input></div>
|
||
</div>
|
||
<div class="itemBox2">
|
||
<div>范围类型</div>
|
||
<div>
|
||
<el-radio-group
|
||
v-model="addForm.rangeType"
|
||
style="display: flex; justify-content: space-between; padding-top: 10px; padding-right: 10px"
|
||
@change="changeAreaType"
|
||
>
|
||
<el-radio :label="1">标准区域</el-radio>
|
||
<el-radio :label="2">自定义</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
</div>
|
||
<div class="itemBox3" v-if="addForm.rangeType === 1">
|
||
<div>区域半径</div>
|
||
<div>
|
||
<el-input
|
||
type="number"
|
||
v-model="addForm.areaRadius"
|
||
placeholder="请输入"
|
||
:maxlength="5"
|
||
@input="areaRadiusChange"
|
||
></el-input>
|
||
</div>
|
||
</div>
|
||
<div class="itemBox4" v-if="addForm.rangeType === 2">
|
||
<div>围栏形状</div>
|
||
<div>
|
||
<div class="">多边形</div>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
<div style="margin-top: 15%">
|
||
<el-form-item label="围栏名称" prop="region">
|
||
<!-- <el-input v-model="addForm.fenceName" placeholder="请输入"></el-input> -->
|
||
<el-select v-model="addForm.region" filterable clearable value-key="id" placeholder="请选择" style="width: 240px">
|
||
<el-option v-for="item in regionList" :key="item.id" :label="item.regionName" :value="item"/>
|
||
</el-select>
|
||
</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>
|
||
|
||
<!-- <div class="create-footer">
|
||
<el-button class="cancleBtn" @click="fenceCreateShow = false" icon="el-icon-circle-close" size="medium"
|
||
>取消
|
||
</el-button>
|
||
<el-button type="primary" icon="el-icon-circle-check" @click="submitFence(addFormRef)" size="medium"
|
||
>保存
|
||
</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="map-type" @click="changeMapType">
|
||
<img v-if="mapType === 1" src="@/assets/images/mapimg/wx.png" alt="">
|
||
<img v-if="mapType === 2" src="@/assets/images/mapimg/ey.png" alt="">
|
||
<span>{{ mapType === 1 ? '卫星' : '二维' }}</span>
|
||
</div>
|
||
<!-- **********************围栏弹窗******************************** -->
|
||
<div class="start-track" @click="startAnimation" v-if="checked === 2" :style="enlarge ? 'bottom:8%' : 'bottom:5%'">开始轨迹动画</div>
|
||
<div class="start-track-isEnlage" @click="enlargeMap" v-if="checked === 2 && !enlarge" :style="enlarge ? '' : 'bottom:5%'">
|
||
<!-- 放大 -->
|
||
<img src="@/assets/images/enlarge-icon.png" alt="" />
|
||
</div>
|
||
<div class="start-track-isEnlage" @click="notEnlargeMap" v-if="checked === 2 && enlarge" :style="enlarge ? 'bottom:8%' : ''">
|
||
<!-- 缩小 -->
|
||
<img src="@/assets/images/not-enlarge-icon.png" alt="" />
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
<!-- **********报警数据*********** -->
|
||
<div class="right-bottom" v-show="!enlarge">
|
||
<!-- <div class="hat-bottom">
|
||
<Card title="帽子总数">
|
||
<div class="hat-container">
|
||
<div class="hat-image">
|
||
<div class="hat-info">
|
||
<div class="hat-text">帽子总数</div>
|
||
<div class="hat-count">{{ devTypeTotal.count }}</div>
|
||
</div>
|
||
</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: 7%">序号</div>
|
||
<div style="width: 13%">人员名称</div>
|
||
<div style="width: 17%">围栏名称</div>
|
||
<div style="width: 15%">设备序号</div>
|
||
<div style="width: 20%">报警时间</div>
|
||
<div style="width: 30%">报警信息</div>
|
||
</div>
|
||
<el-scrollbar class="list-box" @scroll="handleScroll" ref="refScrollbar">
|
||
<div v-for="(item, index) in listData" class="list-style" :key="item.id">
|
||
<div style="width: 7%">{{ index + 1 }}</div>
|
||
<div style="width: 13%">{{ item.workerName }}</div>
|
||
<div style="width: 17%">{{ item.fenceName }}</div>
|
||
<div style="width: 15%">{{ item.devSn }}</div>
|
||
<div style="width: 20%">{{ item.alarmTime }}</div>
|
||
<div style="width: 30%">{{ 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">
|
||
// import { getWorkerInfoList } from "@/assets/js/api/laborPerson";
|
||
import {
|
||
getAlarmRecordInfoApi,
|
||
getAlarmRecordInfoApiPage,
|
||
getHatDevOptionApi,
|
||
getEnterpriseTreeApi,
|
||
addstandardDevApi,
|
||
getRealtimeRecordInfo,
|
||
getRealtimeRecordList,
|
||
getVehiclePositionDayRecord,
|
||
getWeekAlarmDataApi,
|
||
getRealtimeDataApi,
|
||
getSafetyHatNewestApi,
|
||
getSafeHatDayRecordApi,
|
||
deleteSafehatFence,
|
||
addSafeHatPositionFence
|
||
} from "@/api/modules/smartSafeHat";
|
||
import { getProjectDetail } from "@/api/modules/projectOverview";
|
||
// 围栏相关API
|
||
import {
|
||
//智能安全帽--查询围栏信息
|
||
getSuroundInfoApi,
|
||
getSafeHatTypeTotalApi,
|
||
getVehiclePositionFence,
|
||
addVehiclePositionFence,
|
||
getRegionListApi
|
||
} from "@/api/modules/smartSafeHat";
|
||
// import carIcon from "@/assets/images/carPosition/carIcon.png";
|
||
import carOn from "@/assets/images/carPosition/carOn2.png";
|
||
import carOff from "@/assets/images/carPosition/carOff2.png";
|
||
import smartSafeHat from "@/assets/images/carPosition/person.png";
|
||
import smartSafeHat2 from "@/assets/images//carPosition/person2.png";
|
||
import personOff from "@/assets/images/carPosition/personOff.png";
|
||
import startIcon from "@/assets/images/carPosition/startIcon.png";
|
||
import endIcon from "@/assets/images/carPosition/endIcon.png";
|
||
import personOn from "@/assets/images/carPosition/personOn.png";
|
||
import { GlobalStore } from "@/stores";
|
||
import { ElMessage, ElMessageBox } from "element-plus";
|
||
import type { FormInstance, FormRules } from "element-plus";
|
||
import Card from "@/components/card.vue";
|
||
import * as echarts from "echarts";
|
||
const store = GlobalStore();
|
||
import { computed, reactive, ref, onMounted, nextTick, onBeforeMount, watch } from "vue";
|
||
var mouseTool;
|
||
var marker;
|
||
var lineArr;
|
||
var mapInstance;
|
||
var map;
|
||
let choiceMonth = ref("2023-11");
|
||
let dayRunRecord = ref([]); // 日行数据
|
||
let hasRealTime = ref(false);
|
||
let circleMapData = ref([]); // 圆形围栏存放
|
||
let shapeMapData = ref([]); // 多边形围栏存放
|
||
let devTypeTotal = ref({});
|
||
let fenceCreateShow = ref(false); //创建围栏弹窗
|
||
let fenceList = ref(["围栏1", "围栏2", "围栏3", "围栏4", "围栏5"]);
|
||
let fenceSearch = ref(""); // 围栏搜索
|
||
let fenceShow = ref(false); //打开围栏弹窗
|
||
let enlarge = ref(false); //放大地图
|
||
// let fenceShow = ref(true); //打开围栏弹窗
|
||
let dayValue = ref(new Date());
|
||
let nameOptions = ref([]) as any;
|
||
let checkAll = ref(false);
|
||
let checkAllFence = ref(false);
|
||
let checkedCities = ref([]);
|
||
let checkedFence = ref([]);
|
||
let devList = ref(["鲁U6675", "刘江", "蒋东", "鲁U9675"]);
|
||
let treeList = ref([]);
|
||
let isIndeterminate = ref(true);
|
||
let isIndeterminateFence = ref(true);
|
||
let checked = ref(1);
|
||
let devName = ref("");
|
||
let locationList = ref([]);
|
||
interface RuleForm {
|
||
// fenceName: string
|
||
// areaRadius: number
|
||
}
|
||
let tree = ref(null);
|
||
let addFormRef = ref<FormInstance>();
|
||
// const addForm = reactive<RuleForm>({
|
||
let addForm = ref({
|
||
areaRadius: 100, //区域半径
|
||
fenceName: "", //围栏名称
|
||
addr: "",
|
||
rangeType: 1,
|
||
locationList: [
|
||
{
|
||
fenceId: 0,
|
||
id: 0,
|
||
latitude: "",
|
||
longitude: "",
|
||
sortNum: 0
|
||
}
|
||
],
|
||
projectSn: "",
|
||
enterpriseId: ""
|
||
});
|
||
let pagInfo = ref({
|
||
pageNo: 1, //页数
|
||
pageSize: 30, //条数
|
||
total: 0 //总条数
|
||
});
|
||
let pagLabor = ref({
|
||
pageSize: 10,
|
||
pageNo: 1,
|
||
total: 0
|
||
});
|
||
let mapType = ref(1); // 1: 二维，2: 卫星
|
||
let tableListData = ref([]); // 劳务列表
|
||
let choicePerson = ref(false);
|
||
let laborRadio = ref(""); //选择
|
||
let laborInfo = ref(""); //选中劳务信息
|
||
let laborType = ref(""); //劳务人员类型 1、劳务人员 2、管理人员 3、临时人员
|
||
let fileUrl = ref(""); //文件上传地址
|
||
let queryInfo = ref({
|
||
devSn: ""
|
||
});
|
||
let alarmDevSn = ref(" " as any);
|
||
let listData = ref([]);
|
||
let Popup = ref({
|
||
type: "add",
|
||
show: false
|
||
});
|
||
let addEditForm = ref({
|
||
personName: "",
|
||
numberPlate: "",
|
||
devSn: "",
|
||
type: 1,
|
||
driver: ""
|
||
});
|
||
// const formFenceRules = reactive<FormRules<RuleForm>({
|
||
let formFenceRules = ref({
|
||
region: [
|
||
{
|
||
required: true,
|
||
message: "必填",
|
||
trigger: "blur"
|
||
}
|
||
],
|
||
fenceName: [
|
||
{
|
||
required: true,
|
||
message: "必填",
|
||
trigger: "blur"
|
||
},
|
||
{ min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
|
||
], //
|
||
areaRadius: [
|
||
{
|
||
required: true,
|
||
message: "必填",
|
||
trigger: "change"
|
||
}
|
||
]
|
||
});
|
||
let formRules = ref({
|
||
numberPlate: [
|
||
{
|
||
required: true,
|
||
message: "必填",
|
||
trigger: "blur"
|
||
},
|
||
{ min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
|
||
], // 长度在 1 到 20 个字符
|
||
devSn: [
|
||
{
|
||
required: true,
|
||
message: "必填",
|
||
trigger: "blur"
|
||
}
|
||
]
|
||
});
|
||
onMounted(async () => {
|
||
// choiceMonth.value = formatMonthTime(dayValue.value);
|
||
// console.log("当前月份", choiceMonth.value);
|
||
getProjectInfo();
|
||
|
||
// 智能安全帽--查询报警信息
|
||
getProgressListData();
|
||
// 智能安全帽--分类查询设备列表
|
||
getCrewListData();
|
||
// 智能安全帽--查询围栏信息
|
||
getFenceList();
|
||
// 智能安全帽--查询设备状态
|
||
getFenceType();
|
||
// 智能安全帽--查询近7天报警信息
|
||
getWeekAlarmData();
|
||
|
||
// clearFn();
|
||
resetMapSize();
|
||
window.addEventListener("resize", e => {
|
||
resetMapSize();
|
||
});
|
||
getRegionList();
|
||
});
|
||
const resetMapSize = () => {
|
||
console.log(666);
|
||
setTimeout(() => {
|
||
let mapContent: any = document.getElementById("mapContainer");
|
||
console.log(mapContent);
|
||
mapContent.style.transform = `scale(${1 / store.globalScale})`;
|
||
}, 200);
|
||
};
|
||
onBeforeMount(() => {
|
||
window.removeEventListener("resize", e => {
|
||
resetMapSize();
|
||
});
|
||
});
|
||
|
||
watch(dayValue, newVal => {
|
||
// console.log(newVal, "切换日期");
|
||
if (newVal) {
|
||
let newMonth = formatMonthTime(newVal);
|
||
let newDay = formatDayTime(newVal);
|
||
getTodayTrack(newDay);
|
||
choiceMonth.value = newMonth;
|
||
}
|
||
});
|
||
|
||
watch(choiceMonth, newVal => {
|
||
// console.log(newVal, "切换月份");
|
||
if (newVal) {
|
||
getDayRunData();
|
||
}
|
||
});
|
||
function enlargeMap(){
|
||
enlarge.value = true
|
||
}
|
||
function notEnlargeMap(){
|
||
enlarge.value = false
|
||
}
|
||
let isOpenDetail = ref(false);
|
||
let workerListInFence = ref([]);
|
||
function openDetail(item) {
|
||
// let data = {
|
||
// id: fenceId,
|
||
// projectSn: store.sn
|
||
// };
|
||
// getFencePersonApi(data).then(res => {
|
||
// if (res.success) {
|
||
// workerListInFence.value = res.result.workerListInFence
|
||
// }
|
||
// });
|
||
let welanBox = document.getElementById('welanMaskContainer')
|
||
if(welanBox){
|
||
welanBox.style.zIndex= '999'
|
||
}
|
||
workerListInFence.value = item.workerListInFence;
|
||
isOpenDetail.value = true;
|
||
}
|
||
function closeDetail() {
|
||
let welanBox = document.getElementById('welanMaskContainer')
|
||
if(welanBox){
|
||
welanBox.style.zIndex= '-1'
|
||
}
|
||
isOpenDetail.value = false;
|
||
}
|
||
|
||
function handleCancel() {
|
||
fenceCreateShow.value = false;
|
||
clearFn();
|
||
}
|
||
|
||
let addressStr = ref("");
|
||
function localtionLotLat(longitude: number | null, latitude: number | null) {
|
||
if (longitude && latitude) {
|
||
const fixedLongitude = longitude.toFixed(6);
|
||
const fixedLatitude = latitude.toFixed(6);
|
||
return `经纬度 ${fixedLongitude}, ${fixedLatitude}`;
|
||
}
|
||
return "未知位置";
|
||
}
|
||
|
||
const resolveAddStr = computed(() => async (longitude: any, latitude: any) => {
|
||
//计算属性传递参数
|
||
console.log("👇传参");
|
||
console.log(longitude, latitude);
|
||
if (longitude && latitude) {
|
||
var addressResolve = new AMap.LngLat(longitude, latitude);
|
||
let geocoder2 = new AMap.Geocoder();
|
||
await geocoder2.getAddress(addressResolve, function (status, result) {
|
||
console.log("👇解析地址");
|
||
console.log(status, result);
|
||
if (status === "complete") {
|
||
addressStr.value = result.regeocode.formattedAddress;
|
||
// console.log(result.regeocode.formattedAddress);
|
||
console.log(addressStr);
|
||
return addressStr.value;
|
||
} else {
|
||
return `未知位置1`;
|
||
}
|
||
});
|
||
}
|
||
|
||
return "未知位置2";
|
||
});
|
||
|
||
let regionList = ref([] as any);
|
||
function getRegionList() {
|
||
let data = {
|
||
projectSn: store.sn
|
||
};
|
||
getRegionListApi(data).then(res => {
|
||
if (res.success) {
|
||
checkedFence.value = [];
|
||
regionList.value = res.result
|
||
console.log(regionList.value,777777777777777777777)
|
||
}
|
||
});
|
||
}
|
||
|
||
function areaRadiusChange() {
|
||
if (addForm.value.locationList.length === 1) {
|
||
drawCircle();
|
||
}
|
||
}
|
||
|
||
function deleteFence() {
|
||
if (checkedFence.value.length === 0) {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: "请选择删除围栏",
|
||
type: "error"
|
||
});
|
||
return;
|
||
}
|
||
console.log("删除围栏", checkedFence);
|
||
ElMessageBox.confirm("此操作将永久删除该围栏, 是否继续?", "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning"
|
||
})
|
||
.then(() => {
|
||
let idString = "";
|
||
for (let index = 0; index < checkedFence.value.length; index++) {
|
||
const element = checkedFence.value[index];
|
||
if (checkedFence.value.length - 1 > index) {
|
||
idString = idString + element + ",";
|
||
} else {
|
||
idString = idString + element;
|
||
}
|
||
}
|
||
deleteFenceInfo(idString);
|
||
})
|
||
.catch(() => {
|
||
ElMessage({
|
||
type: "info",
|
||
message: "已取消删除"
|
||
});
|
||
});
|
||
}
|
||
|
||
function deleteFenceInfo(idGroups) {
|
||
console.log("删除id", idGroups);
|
||
let data = {
|
||
ids: idGroups,
|
||
projectSn: store.sn
|
||
};
|
||
deleteSafehatFence(data).then(res => {
|
||
if (res.success) {
|
||
// console.log('删除成功', res)
|
||
getFenceList();
|
||
checkedFence.value = [];
|
||
fenceCitiesChange(checkedFence);
|
||
ElMessage({
|
||
type: "success",
|
||
message: "删除成功"
|
||
});
|
||
}
|
||
});
|
||
}
|
||
const submitFence = async (formEL: FormInstance | undefined) => {
|
||
if (locationList.value.length === 0) {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: "未设置围栏区域!",
|
||
type: "error"
|
||
});
|
||
return;
|
||
}
|
||
addForm.value.locationList = locationList.value;
|
||
console.log("新增围栏", addForm);
|
||
let longitude = "";
|
||
let latitude = "";
|
||
let fenceShape = "";
|
||
if (addForm.value.locationList.length === 1) {
|
||
longitude = addForm.value.locationList[0].longitude;
|
||
latitude = addForm.value.locationList[0].latitude;
|
||
}
|
||
if (addForm.value.locationList.length > 1) {
|
||
for (let index = 0; index < addForm.value.locationList.length; index++) {
|
||
const element = addForm.value.locationList[index];
|
||
// let currentStr = element.latitude + "|" + element.longitude;
|
||
let currentStr = element.longitude + "|" + element.latitude;
|
||
if (addForm.value.locationList.length - 1 > index) {
|
||
currentStr = currentStr + ",";
|
||
}
|
||
fenceShape = fenceShape + currentStr;
|
||
}
|
||
}
|
||
console.log("多边形", fenceShape);
|
||
|
||
if (!formEL) return;
|
||
await formEL.validate((valid, fields) => {
|
||
if (valid) {
|
||
let params = {
|
||
qualityRegionId: addForm.value.region.id,
|
||
regionName: addForm.value.region.regionName,
|
||
fenceName: addForm.value.region.regionName,
|
||
// fenceName: addForm.value.fenceName,
|
||
areaRadius: addForm.value.areaRadius,
|
||
fenceShapeArr: JSON.stringify(addForm.value.locationList),
|
||
fenceShape: fenceShape,
|
||
latitude: latitude,
|
||
longitude: longitude,
|
||
rangeType: addForm.value.rangeType,
|
||
projectSn: store.sn
|
||
};
|
||
// params.alarmPushWorkerId = this.addForm.alarmPushWorkerId.join(',');
|
||
|
||
console.log("新增信息", params);
|
||
addSafeHatPositionFence(params).then(res => {
|
||
if (res.success) {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: res.message,
|
||
type: "success"
|
||
});
|
||
getFenceList();
|
||
}
|
||
});
|
||
closeFenceCreate();
|
||
} else {
|
||
console.log("error submit!!");
|
||
return false;
|
||
}
|
||
});
|
||
};
|
||
|
||
// 智能安全帽--查询近七天报警信息
|
||
let xData = ref([] as any);
|
||
let yData1 = ref([0, 0, 0, 0, 0, 0, 0] as any); //SOS报警
|
||
let yData2 = ref([0, 0, 0, 0, 0, 0, 0] as any); //静默报警
|
||
let yData3 = ref([0, 0, 0, 0, 0, 0, 0] as any); //围栏报警
|
||
function getWeekAlarmData() {
|
||
let data = {
|
||
type: 1, // 设备类型(1：安全帽;2:安全带)
|
||
projectSn: store.sn
|
||
};
|
||
getWeekAlarmDataApi(data).then(res => {
|
||
console.log("👇智能安全帽--近7天报警数据");
|
||
console.log(res);
|
||
if (res.success) {
|
||
res.result.forEach(element1 => {
|
||
// if(element1.name.includes("SOS报警")){
|
||
// console.log(element1)
|
||
// }
|
||
if (element1.name.includes("SOS报警")) {
|
||
element1.oneTrendList.forEach((element2, index) => {
|
||
xData.value[index] = element2.x;
|
||
console.log(xData.value);
|
||
let num = parseInt(element2.y);
|
||
yData1.value[index] += num;
|
||
});
|
||
}
|
||
if (element1.name.includes("静默报警")) {
|
||
element1.oneTrendList.forEach((element2, index) => {
|
||
let num = parseInt(element2.y);
|
||
yData2.value[index] += num;
|
||
});
|
||
}
|
||
if (element1.name.includes("围栏报警")) {
|
||
element1.oneTrendList.forEach((element2, index) => {
|
||
let num = parseInt(element2.y);
|
||
yData3.value[index] += num;
|
||
});
|
||
}
|
||
});
|
||
console.log("👇智能安全帽--近7天报警筛选后的数据");
|
||
console.log(xData);
|
||
console.log("👇智能安全帽--SOS报警");
|
||
console.log(yData1);
|
||
console.log("👇智能安全帽--静默报警");
|
||
console.log(yData2);
|
||
console.log("👇智能安全帽--围栏报警");
|
||
console.log(yData3);
|
||
|
||
// 智能安全帽--获取折线图
|
||
getLineEcharts();
|
||
}
|
||
});
|
||
}
|
||
|
||
// 智能安全帽--获取折线图
|
||
function getLineEcharts() {
|
||
var chartDom = document.getElementById("weekAlarmLine");
|
||
var myChart = echarts.init(chartDom);
|
||
var option;
|
||
option = {
|
||
textStyle: { color: "white" },
|
||
tooltip: {
|
||
trigger: "axis"
|
||
},
|
||
legend: {
|
||
data: ["SOS报警", "静默报警", "围栏报警"],
|
||
textStyle: { color: "white" }
|
||
},
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
// show: true,
|
||
// borderColor: '#ccc',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: true,
|
||
// data: [ "2024-03-02", "2024-03-05", "2024-03-08", "2024-03-11", "2024-03-14", "2024-03-17", "2024-03-20", ],
|
||
data: xData.value,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#15356F" // 设置线的颜色
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "#15356F" // 设置线的颜色
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: "SOS报警",
|
||
type: "line",
|
||
// stack: "Total",
|
||
// data: [120, 132, 101, 134, 90, 230, 210],
|
||
// data: [0, 0, 0, 0, 0, 0, 0],
|
||
data: yData1.value,
|
||
smooth: true,
|
||
symbol: "circle",
|
||
symbolSize: 10,
|
||
lineStyle: { color: "#F13333", width: 2 },
|
||
itemStyle: { color: "white", borderColor: "#F13333", borderWidth: 1 }
|
||
},
|
||
{
|
||
name: "静默报警",
|
||
type: "line",
|
||
// stack: "Total",
|
||
// data: [220, 182, 191, 234, 290, 330, 310],
|
||
// data: [0, 0, 0, 0, 0, 0, 0],
|
||
data: yData2.value,
|
||
smooth: true,
|
||
symbol: "circle",
|
||
symbolSize: 10,
|
||
lineStyle: { color: "#4AC0F3", width: 2 },
|
||
itemStyle: { color: "white", borderColor: "#4AC0F3", borderWidth: 1 }
|
||
},
|
||
{
|
||
name: "围栏报警",
|
||
type: "line",
|
||
// stack: "Total",
|
||
// data: [150, 232, 201, 154, 190, 330, 410],
|
||
// data: [0, 0, 0, 0, 1, 0, 0],
|
||
data: yData3.value,
|
||
smooth: true,
|
||
symbol: "circle",
|
||
symbolSize: 10,
|
||
lineStyle: { color: "#81F279", width: 2 },
|
||
itemStyle: { color: "white", borderColor: "#81F279", borderWidth: 1 }
|
||
}
|
||
]
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
}
|
||
|
||
function refreshDev() {
|
||
alarmDevSn.value = "";
|
||
checkAll.value = false;
|
||
checkedFence.value = [];
|
||
fenceSearch.value = "";
|
||
checkedCities.value = [];
|
||
laborType.value = "";
|
||
queryInfo.value.devSn = "";
|
||
clearFn();
|
||
getCrewListData();
|
||
getProgressListData();
|
||
getLineEcharts();
|
||
getFenceList();
|
||
}
|
||
|
||
// 格式化时间
|
||
function formatMonthTime(date) {
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1; // 月份从0开始，需要加1
|
||
month = month < 10 ? "0" + month : month; // 如果月份小于10，补0
|
||
// console.log(formattedTime) // 输出格式化后的时间
|
||
return year + "-" + month;
|
||
}
|
||
|
||
function formatDayTime(date) {
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1; // 月份从0开始，需要加1
|
||
month = month < 10 ? "0" + month : month; // 如果月份小于10，补0
|
||
let day = String(date.getDate()).padStart(2, "0");
|
||
// console.log(formattedTime) // 输出格式化后的时间
|
||
return year + "-" + month + "-" + day;
|
||
}
|
||
|
||
// 获取车辆今日轨迹
|
||
function getTodayTrack(day) {
|
||
clearFn();
|
||
let data = {
|
||
devSn: queryInfo.value.devSn,
|
||
createTime_begin: day,
|
||
createTime_end: day,
|
||
projectSn: store.sn
|
||
};
|
||
|
||
getRealtimeDataApi(data).then((res: any) => {
|
||
let path = [];
|
||
let currentData = {};
|
||
if (res.result.length > 0) {
|
||
console.log("实时数据", res);
|
||
currentData = res.result[0];
|
||
for (let index = 0; index < res.result.length; index++) {
|
||
const element = res.result[index];
|
||
path.unshift([element.longitude, element.latitude]);
|
||
}
|
||
trackMapInit(path, currentData);
|
||
}
|
||
console.log("当前数据", path, currentData);
|
||
});
|
||
}
|
||
|
||
// 日行数据
|
||
function getDayRunData() {
|
||
let data = {
|
||
projectSn: store.sn,
|
||
devSn: queryInfo.value.devSn,
|
||
month: choiceMonth.value
|
||
// day: dayValue.value
|
||
};
|
||
console.log("👇日行数据月份查询参数");
|
||
console.log(data);
|
||
getSafeHatDayRecordApi(data).then(res => {
|
||
if (res.success) {
|
||
console.log("日行数据", res);
|
||
dayRunRecord.value = res.result;
|
||
}
|
||
let newDay = formatDayTime(dayValue.value);
|
||
console.log(newDay);
|
||
getTodayTrack(newDay);
|
||
});
|
||
}
|
||
|
||
// 计算当前的行驶里程
|
||
function getTodayMeter(day: any) {
|
||
// console.log("当前里程", day);
|
||
if (dayRunRecord.value.length === 0) {
|
||
return "-";
|
||
}
|
||
let currentDayRecord: any = dayRunRecord.value.find(function (item: any) {
|
||
return item.day === day;
|
||
checkedCities;
|
||
});
|
||
// console.log("当前里程", currentDayRecord);
|
||
if (currentDayRecord && currentDayRecord.trackDistanceDay) {
|
||
return currentDayRecord.trackDistanceDay;
|
||
} else {
|
||
return "-";
|
||
}
|
||
}
|
||
// 切换设备
|
||
function devChange(e) {
|
||
console.log("设备改变", e);
|
||
getProgressListData();
|
||
if (checked.value === 2) {
|
||
getDayRunData();
|
||
}
|
||
if (checked.value === 1) {
|
||
let devArr = [queryInfo.value.devSn];
|
||
checkedCities.value = devArr;
|
||
handleCheckedCitiesChange(devArr);
|
||
}
|
||
}
|
||
// 获取车辆实时数据
|
||
// 智能安全帽--获取实时数据
|
||
function getRealTimeData(e) {
|
||
// 代码优化，查询最新位置，旧逻辑使用的list，会返回几千个点位数据，响应慢
|
||
getSafetyHatNewestApi({
|
||
projectSn: store.sn,
|
||
devSns: [e.devSn]
|
||
}).then(res => {
|
||
if (res.result.length > 0) {
|
||
echoPersonMarker(res.result[0]);
|
||
} else {
|
||
console.log("设备暂无数据", res);
|
||
}
|
||
console.log("实时数据", res);
|
||
});
|
||
// let name = "";
|
||
// let data = {
|
||
// devSn: e.devSn,
|
||
// // devSn: "866652021371993",
|
||
// projectSn: store.sn
|
||
// };
|
||
// getRealtimeDataApi(data).then(res => {
|
||
// if (res.result.length > 0) {
|
||
// // if (res.result.records[0].type === 1) {
|
||
// // echoCarMarker(res.result.records[0]);
|
||
// // }
|
||
// // if (res.result.records[0].type === 2) {
|
||
// // echoPersonMarker(res.result.records[0]);
|
||
// // }
|
||
// // echoCarMarker(res.result[0]);
|
||
// echoPersonMarker(res.result[0]);
|
||
// } else {
|
||
// console.log("设备暂无数据", res);
|
||
// }
|
||
// console.log("实时数据", res);
|
||
// });
|
||
}
|
||
|
||
// 智能安全帽--获取围栏列表数据
|
||
function getFenceList() {
|
||
let data = {
|
||
fenceName: fenceSearch.value,
|
||
projectSn: store.sn
|
||
};
|
||
// getVehiclePositionFence(data).then(res => {
|
||
getSuroundInfoApi(data).then(res => {
|
||
if (res.success) {
|
||
fenceList.value = res.result;
|
||
|
||
// fenceList.value[0].fenceName = "深圳";
|
||
// fenceList.value[0].longitude = 114.12124287733712;
|
||
// fenceList.value[0].latitude = 30.6517077553546;
|
||
|
||
// fenceList.value[1].fenceName = "广州";
|
||
// fenceList.value[1].longitude = 113.2644;
|
||
// fenceList.value[1].latitude = 23.1291;
|
||
|
||
// console.log("👇智能安全帽--围栏信息--转换数据");
|
||
// let testArr = ref([{longitude: '',latitude: ''}])
|
||
// fenceList.value.forEach(element => {
|
||
// testArr.value[0].longitude = element.longitude
|
||
// testArr.value[0].latitude = element.latitude
|
||
// element.fenceShapeArr = JSON.stringify(testArr._value)
|
||
// console.log(element.fenceShapeArr)
|
||
// });
|
||
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);
|
||
}
|
||
});
|
||
}
|
||
// 智能安全帽--查询设备状态
|
||
function getFenceType() {
|
||
let data = {
|
||
type: 1, // 设备类型(1：安全帽;2:安全带)
|
||
projectSn: store.sn
|
||
};
|
||
getSafeHatTypeTotalApi(data).then(res => {
|
||
console.log("👇智能安全帽--查询设备各状态数量");
|
||
console.log(res);
|
||
if (res.success) {
|
||
devTypeTotal.value = res.result;
|
||
}
|
||
});
|
||
}
|
||
// 打开创建围栏弹窗
|
||
function openFenceCreate() {
|
||
fenceCreateShow.value = true;
|
||
}
|
||
// 关闭创建围栏弹窗
|
||
function closeFenceCreate() {
|
||
fenceCreateShow.value = false;
|
||
addForm.value = {
|
||
areaRadius: 100, //区域半径
|
||
fenceName: "", //围栏名称
|
||
addr: "",
|
||
rangeType: 1,
|
||
locationList: [
|
||
{
|
||
fenceId: 0,
|
||
id: 0,
|
||
latitude: "",
|
||
longitude: "",
|
||
sortNum: 0
|
||
}
|
||
],
|
||
projectSn: "",
|
||
enterpriseId: ""
|
||
};
|
||
exitEditFn();
|
||
clearFn();
|
||
}
|
||
// 打开围栏弹窗
|
||
function openFence() {
|
||
fenceShow.value = true;
|
||
}
|
||
// 关闭围栏弹窗
|
||
function closeFence() {
|
||
fenceShow.value = false;
|
||
}
|
||
function close() {
|
||
addEditForm.value = {
|
||
personName: "",
|
||
numberPlate: "",
|
||
devSn: "",
|
||
type: 1,
|
||
driver: ""
|
||
};
|
||
}
|
||
//获取查询下拉
|
||
function getCrewListData() {
|
||
let onlineType = "";
|
||
if (laborType.value !== "") {
|
||
onlineType = laborType.value;
|
||
}
|
||
let data = {
|
||
online: onlineType,
|
||
type: 1, // 设备类型(1：安全帽;2:安全带)
|
||
projectSn: store.sn
|
||
};
|
||
console.log("👇智能安全帽--分类查询设备列表--查询参数");
|
||
console.log(data);
|
||
// getHatDevOptionApi(data).then(res => {
|
||
getEnterpriseTreeApi(data).then(res => {
|
||
console.log("👇智能安全帽--分类查询设备列表");
|
||
console.log(res);
|
||
if (res.code == 200) {
|
||
console.log("👇智能安全帽--分类查询设备列表--结果集");
|
||
console.log(res.result);
|
||
|
||
let personList = [];
|
||
res.result.forEach(item => {
|
||
personList = personList.concat(item.safetyHatDevs);
|
||
});
|
||
const filterArray = personList
|
||
.filter(item => item.workerName !== "")
|
||
.map(item => ({ devSn: item.devSn, workerName: item.workerName }));
|
||
let nameOption = filterArray.map(item => {
|
||
return {
|
||
label: item.workerName,
|
||
value: item.devSn
|
||
};
|
||
});
|
||
// const filteredArray = res.result
|
||
// .filter(item => item.personName == null)
|
||
// .map(item => ({ devSn: item.devSn, numberPlate: item.numberPlate }));
|
||
// let carOption = filteredArray.map(item => {
|
||
// return {
|
||
// label: item.numberPlate,
|
||
// value: item.devSn
|
||
// };
|
||
// });
|
||
// nameOptions.value = nameOption.concat(carOption);
|
||
nameOptions.value = nameOption.concat([]);
|
||
|
||
treeList.value = res.result;
|
||
devList.value = flattenTree(res.result).filter(item => item.devSn);
|
||
} else {
|
||
ElMessage.error(res.message);
|
||
}
|
||
});
|
||
}
|
||
// 扁平化树形数据
|
||
function flattenTree(tree) {
|
||
let result = [];
|
||
tree.forEach(item => {
|
||
result.push(item);
|
||
if (item.safetyHatDevs && item.safetyHatDevs.length > 0) {
|
||
result = result.concat(flattenTree(item.safetyHatDevs));
|
||
}
|
||
});
|
||
return result;
|
||
}
|
||
const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
|
||
const moreScroll = ref(true as any);
|
||
|
||
// 智能安全帽--查询报警信息
|
||
function getProgressListData() {
|
||
let data = {
|
||
pageNo: pagInfo.value.pageNo,
|
||
pageSize: pagInfo.value.pageSize,
|
||
devSns: alarmDevSn.value,
|
||
type: 1, // 设备类型(1：安全帽;2:安全带)
|
||
projectSn: store.sn
|
||
};
|
||
getAlarmRecordInfoApiPage(data).then(res => {
|
||
moreScroll.value = false;
|
||
console.log("👇智能安全帽--查询报警信息");
|
||
console.log(res);
|
||
if (res.code == 200) {
|
||
listData.value = listData.value.concat(res.result.records);
|
||
// listData.value = res.result.records
|
||
console.log("listData.value=============", listData.value);
|
||
|
||
pagInfo.value.total = res.result.total;
|
||
nextTick(() => {
|
||
moreScroll.value = true;
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
// 新智能安全帽-分页
|
||
function handleScroll(event) {
|
||
console.log("event", event);
|
||
|
||
refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
|
||
const scrollTop = e.target.scrollTop;
|
||
const scrollHeight = e.target.scrollHeight;
|
||
const clientHeight = e.target.clientHeight;
|
||
|
||
console.log("event", event);
|
||
// console.log("e.target.scrollTop", e.target.scrollTop);
|
||
// console.log("e.target.scrollHeight", e.target.scrollHeight);
|
||
// console.log("e.target.clientHeight", e.target.clientHeight);
|
||
|
||
// console.log("moreScroll.value", moreScroll.value);
|
||
|
||
// 向上加载更多
|
||
if (scrollTop >= scrollHeight - clientHeight - 1) {
|
||
if (moreScroll.value) {
|
||
console.log("===================加载第二页===================");
|
||
pagInfo.value.pageNo += 1;
|
||
console.log("pagInfo.value.pageNo", pagInfo.value.pageNo);
|
||
moreScroll.value = false;
|
||
getProgressListData();
|
||
}
|
||
}
|
||
});
|
||
|
||
// const { scrollTop, scrollHeight, clientHeight } = event.target;
|
||
// // 判断是否滚动到底部
|
||
// if (scrollTop + clientHeight >= scrollHeight) {
|
||
// // 触发滚动到底部的事件
|
||
// console.log("===================加载第二页===================");
|
||
// }
|
||
}
|
||
|
||
|
||
function fenceNameChange(e) {
|
||
console.log("围栏名称", e);
|
||
fenceSearch.value = e;
|
||
getFenceList();
|
||
}
|
||
function laborChange(e) {
|
||
laborType.value = e;
|
||
getCrewListData();
|
||
}
|
||
function handleCheckAllChange(val) {
|
||
clearFn();
|
||
let nameArr = devList.value.map(item => item.devSn);
|
||
checkedCities.value = val ? nameArr : [];
|
||
tree.value.setCheckedKeys(checkedCities.value);
|
||
isIndeterminate.value = false;
|
||
if (val) {
|
||
listData;
|
||
pointAllSelect();
|
||
} else {
|
||
queryInfo.value.devSn = "";
|
||
}
|
||
alarmDevSn.value = "";
|
||
getProgressListData();
|
||
drawFencePoint();
|
||
}
|
||
const handleCheck = () => {
|
||
checkedCities.value = tree?.value.getCheckedKeys().filter(item => item);
|
||
console.info(checkedCities.value, "checkedCities");
|
||
handleCheckedCitiesChange(checkedCities.value);
|
||
};
|
||
function handleCheckedCitiesChange(value) {
|
||
console.log("设备选中", value);
|
||
clearFn();
|
||
let checkedCount = value.length;
|
||
checkAll.value = checkedCount === devList.value.length;
|
||
isIndeterminate.value = checkedCount > 0 && checkedCount < devList.value.length;
|
||
pointSelectChange();
|
||
drawFencePoint();
|
||
}
|
||
function pointAllSelect() {
|
||
for (let index = 0; index < devList.value.length; index++) {
|
||
const element = devList.value[index];
|
||
// console.log('选中某条', currentRecord)
|
||
// if (element.type === 1) {
|
||
// getRealTimeData(element);
|
||
// }
|
||
// if (element.type === 2) {
|
||
// getRealTimeData(element);
|
||
// }
|
||
getRealTimeData(element);
|
||
}
|
||
}
|
||
function pointSelectChange() {
|
||
let warnDevSn = "";
|
||
for (let index = 0; index < checkedCities.value.length; index++) {
|
||
const element = checkedCities.value[index];
|
||
let currentRecord = devList.value.filter(item => item.devSn === element)[0];
|
||
console.log("选中某条", currentRecord);
|
||
// if (currentRecord.type === 1) {
|
||
// getRealTimeData(currentRecord);
|
||
// }
|
||
// if (currentRecord.type === 2) {
|
||
// getRealTimeData(currentRecord);
|
||
// }
|
||
getRealTimeData(currentRecord);
|
||
if (checkedCities.value.length - 1 > index) {
|
||
warnDevSn = warnDevSn + element + ",";
|
||
} else {
|
||
warnDevSn = warnDevSn + element;
|
||
}
|
||
}
|
||
alarmDevSn.value = warnDevSn;
|
||
console.log("当前devSn", alarmDevSn.value);
|
||
getProgressListData();
|
||
}
|
||
|
||
function fenceAllChange(val) {
|
||
clearFn();
|
||
let nameArr = fenceList.value.map(item => item.id);
|
||
checkedFence.value = val ? nameArr : [];
|
||
isIndeterminateFence.value = false;
|
||
console.log("全选", val, checkedFence.value);
|
||
if (val) {
|
||
drawAllFencePoint();
|
||
}
|
||
pointSelectChange();
|
||
map.setFitView();
|
||
}
|
||
function fenceCitiesChange(value) {
|
||
clearFn();
|
||
console.log("👇围栏数据");
|
||
console.log(value);
|
||
let checkedCount = value.length;
|
||
checkAllFence.value = checkedCount === fenceList.value.length;
|
||
isIndeterminateFence.value = checkedCount > 0 && checkedCount < fenceList.value.length;
|
||
drawFencePoint();
|
||
pointSelectChange();
|
||
// circleMapData.value =
|
||
// console.log('选中', value)
|
||
}
|
||
function drawAllFencePoint() {
|
||
for (let index = 0; index < fenceList.value.length; index++) {
|
||
const element = fenceList.value[index];
|
||
// console.log('选中某条', currentRecord)
|
||
if (element.rangeType === 1) {
|
||
echoCircle(element);
|
||
}
|
||
if (element.rangeType === 2) {
|
||
echoDrawPolygon(element);
|
||
}
|
||
}
|
||
}
|
||
//下到上
|
||
function drawFencePoint() {
|
||
for (let index = 0; index < checkedFence.value.length; index++) {
|
||
const element = checkedFence.value[index];
|
||
let currentRecord = fenceList.value.filter(item => item.id === element)[0];
|
||
console.log("drawFencePoint选中某条", currentRecord);
|
||
if (currentRecord.rangeType === 1) {
|
||
echoCircle(currentRecord);
|
||
}
|
||
if (currentRecord.rangeType === 2) {
|
||
echoDrawPolygon(currentRecord);
|
||
}
|
||
}
|
||
}
|
||
|
||
function selectChange(e) {
|
||
if (checked.value === e) {
|
||
return;
|
||
}
|
||
clearFn();
|
||
checked.value = e;
|
||
if (e === 1) {
|
||
refreshDev();
|
||
}
|
||
if (e === 2) {
|
||
// console.log("👇日行数据查询参数");
|
||
// console.log(nameOptions.value[0]);
|
||
queryInfo.value.devSn = nameOptions.value[0].value;
|
||
// queryInfo.value.devSn = devList.value[0].devSn;
|
||
// alarmDevSn.value = "";
|
||
getProgressListData();
|
||
getDayRunData();
|
||
}
|
||
}
|
||
|
||
// 轨迹绘制地图
|
||
function trackMapInit(path: any, item: any) {
|
||
lineArr = path;
|
||
// lineArr = [
|
||
// [116.478935, 39.997761],
|
||
// [116.478939, 39.997825],
|
||
// [116.478912, 39.998549],
|
||
// [116.478912, 39.998549],
|
||
// [116.478998, 39.998555],
|
||
// [116.478998, 39.998555],
|
||
// [116.479282, 39.99856],
|
||
// [116.479658, 39.998528],
|
||
// [116.480151, 39.998453],
|
||
// [116.480784, 39.998302],
|
||
// [116.480784, 39.998302],
|
||
// [116.481149, 39.998184],
|
||
// [116.481573, 39.997997],
|
||
// [116.481863, 39.997846],
|
||
// [116.482072, 39.997718],
|
||
// [116.482362, 39.997718],
|
||
// [116.483633, 39.998935],
|
||
// [116.48367, 39.998968],
|
||
// [116.484648, 39.999861]
|
||
// ]
|
||
// let markIcon = "https://webapi.amap.com/images/car.png";
|
||
let markIcon = "src/assets/images/smartSafeHat.png";
|
||
// let markIcon = "@/assets/images/carPosition/carIcon.png";
|
||
// let markIcon = "src/assets/images/carPosition/carIcon.png";
|
||
if (item.type === 2) {
|
||
markIcon = personOn;
|
||
}
|
||
|
||
// 创建一个 Icon
|
||
let startPointIcon = new AMap.Icon({
|
||
// 图标的取图地址
|
||
image: startIcon,
|
||
size: new AMap.Size(52, 52), //图标大小
|
||
// 图标所用图片大小
|
||
imageSize: new AMap.Size(35, 35)
|
||
});
|
||
|
||
// 将 icon 传入 marker
|
||
let startMarker = new AMap.Marker({
|
||
position: path[0],
|
||
icon: startPointIcon
|
||
});
|
||
|
||
// 创建一个 icon
|
||
let endPointIcon = new AMap.Icon({
|
||
image: endIcon,
|
||
size: new AMap.Size(52, 52), //图标大小
|
||
imageSize: new AMap.Size(35, 35)
|
||
});
|
||
|
||
// 将 icon 传入 marker
|
||
let endMarker = new AMap.Marker({
|
||
position: path[path.length - 1],
|
||
icon: endPointIcon,
|
||
offset: new AMap.Pixel(-15, -20)
|
||
});
|
||
|
||
// 将 markers 添加到地图
|
||
map.add([startMarker, endMarker]);
|
||
|
||
// 绘制轨迹
|
||
let polyline = new AMap.Polyline({
|
||
map: map,
|
||
path: lineArr,
|
||
showDir: true,
|
||
strokeColor: "#28F", //线颜色
|
||
// strokeOpacity: 1, //线透明度
|
||
strokeWeight: 6 //线宽
|
||
// strokeStyle: "solid" //线样式
|
||
});
|
||
|
||
let passedPolyline = new AMap.Polyline({
|
||
map: map,
|
||
// path: lineArr,
|
||
strokeColor: "#AF5", //线颜色
|
||
// strokeOpacity: 1, //线透明度
|
||
strokeWeight: 6 //线宽
|
||
// strokeStyle: "solid" //线样式
|
||
});
|
||
|
||
function createMarkerAndInfoWindow() {
|
||
AMap.plugin("AMap.MoveAnimation", function () {
|
||
|
||
marker = new AMap.Marker({
|
||
map: map,
|
||
position: path[0],
|
||
// icon: "https://webapi.amap.com/images/car.png",
|
||
// icon: "src/assets/images/smartSafeHat.png", // 自定义图标
|
||
icon: smartSafeHat, // 自定义图标
|
||
// icon: "@/assets/images/carPosition/carIcon.png", // 自定义图标
|
||
// icon: "src/assets/images/carPosition/carIcon.png", // 自定义图标
|
||
offset: new AMap.Pixel(-26, -13),
|
||
autoRotation: true,
|
||
angle: 90
|
||
});
|
||
marker.on("click", markerClick);
|
||
marker.emit("click", { target: marker });
|
||
marker.on("moving", function (e) {
|
||
passedPolyline.setPath(e.passedPath);
|
||
});
|
||
});
|
||
}
|
||
|
||
// 使用逆地理编码获取地址信息
|
||
let address = "未知";
|
||
AMap.plugin("AMap.Geocoder", function () {
|
||
let geocoder = new AMap.Geocoder();
|
||
|
||
geocoder.getAddress(path[0], function (status, result) {
|
||
if (status === "complete" && result.info === "OK") {
|
||
address = result.regeocode.formattedAddress; // 获取中文地址名称
|
||
console.log("位置", address);
|
||
createMarkerAndInfoWindow();
|
||
} else {
|
||
console.log("获取地址信息失败");
|
||
createMarkerAndInfoWindow();
|
||
}
|
||
});
|
||
});
|
||
|
||
function markerClick(e) {
|
||
let lnglat = e.target.getPosition();
|
||
|
||
//构建信息窗体中显示的内容
|
||
// console.log(e);
|
||
let info = [];
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">所属单位:</text> ' + item.enterpriseName + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">设备序号:</text> ' + item.devSn + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">人员名称:</text> ' + item.workerName + "</div>");
|
||
// info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.updateTime + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.uploadTime + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">经纬度:</text> ' + item.longitude.toFixed(6) + "|" + item.latitude.toFixed(6) + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">位置:</text> ' + address + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">工种:</text> ' + item.workerTypeName + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">身份证号:</text> ' + (item.idCard || "暂无") + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">联系电话:</text> ' + (item.phoneNumber || "暂无") + "</div>");
|
||
var infoWindow = new AMap.InfoWindow({
|
||
offset: new AMap.Pixel(30, -30),
|
||
content: info.join("") //使用默认信息窗体框样式，显示信息内容
|
||
});
|
||
infoWindow.open(map, e.target.getPosition());
|
||
}
|
||
|
||
map.setFitView();
|
||
}
|
||
function startAnimation() {
|
||
marker.moveAlong(lineArr, {
|
||
duration: 500
|
||
});
|
||
}
|
||
|
||
var placeSearch = ref();
|
||
const projectData = ref(null as any);
|
||
//获取项目信息
|
||
const getProjectInfo = async () => {
|
||
const res = await getProjectDetail({ projectSn: store.sn }, false);
|
||
// console.log("获取项目信息", res);
|
||
// console.log("获取工程类别", projectTypeEnum);
|
||
projectData.value = res.result;
|
||
initMap();
|
||
};
|
||
function changeMapType() {
|
||
mapType.value = mapType.value === 1 ? 2 : 1;
|
||
var satellite = new AMap.TileLayer.Satellite();
|
||
if(mapType.value === 2){
|
||
map.setLayers([satellite]);
|
||
}else{
|
||
map.setLayers([new AMap.TileLayer()]);
|
||
}
|
||
}
|
||
// 围栏定位地图
|
||
function initMap() {
|
||
var that = this;
|
||
console.log("初始化地图", projectData.value);
|
||
//地图加载 longitude latitude
|
||
map = new AMap.Map("mapContainer", {
|
||
// viewMode: '3D',
|
||
resizeEnable: true,
|
||
zoom: 18,
|
||
center: [Number(projectData.value.longitude), Number(projectData.value.latitude)],
|
||
// center: [116.39, 39.9],
|
||
// offset: new AMap.Pixel(-10, -10) // 设置地图偏移量
|
||
});
|
||
var geocoder = new AMap.Geocoder({});
|
||
//输入提示
|
||
var autoOptions = {
|
||
input: "tipinput"
|
||
};
|
||
// >>>>>>>>>>>>>>>>>此部分代码会导致大屏页面跳转时产生窗口抖动<<<<<<<<<<<<<<<<<<<
|
||
|
||
// let auto = new AMap.Autocomplete(autoOptions);
|
||
// placeSearch = new AMap.PlaceSearch({
|
||
// map: map
|
||
// }); //构造地点查询类
|
||
// AMap.event.addListener(auto, "select", select); //注册监听，当选中某条记录时会触发
|
||
|
||
// >>>>>>>>>>>>>>>>>此部分代码会导致大屏页面跳转时产生窗口抖动<<<<<<<<<<<<<<<<<<<
|
||
mouseTool = new AMap.MouseTool(map);
|
||
mouseTool.on("draw", function (event) {
|
||
// event.obj 为绘制出来的覆盖物对象
|
||
console.log("覆盖物对象绘制完成", event.obj.getPath());
|
||
|
||
let overlaysList = map.getAllOverlays("polygon");
|
||
|
||
if (overlaysList.length > 1) {
|
||
map.remove(overlaysList[0]);
|
||
}
|
||
|
||
locationList.value = [];
|
||
var pathArr = event.obj.getPath();
|
||
pathArr.forEach(element => {
|
||
return locationList.value.push({
|
||
longitude: element.lng,
|
||
latitude: element.lat
|
||
});
|
||
});
|
||
});
|
||
console.log("绘制完成", addForm.value);
|
||
var lnglatXY = new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat());
|
||
geocoder.getAddress(lnglatXY, function (status, result) {
|
||
console.log(status, result);
|
||
addForm.value.addr = result.regeocode.formattedAddress;
|
||
});
|
||
geocoder.getLocation(addForm.value.addr, function (status, result) {
|
||
if (status === "complete" && result.geocodes.length) {
|
||
var lnglat = result.geocodes[0].location;
|
||
console.log(result.geocodes[0]);
|
||
// var arr = lnglat.split(',')
|
||
locationList.value = [
|
||
{
|
||
longitude: lnglat.lng,
|
||
latitude: lnglat.lat
|
||
}
|
||
];
|
||
drawCircle();
|
||
} else {
|
||
console.log("获取绘制", status, result);
|
||
}
|
||
});
|
||
map.on("click", e => {
|
||
if (!fenceCreateShow.value) {
|
||
console.log("还未到创建围栏弹窗");
|
||
return;
|
||
}
|
||
console.log("您在 [ " + e.lnglat.getLng() + "," + e.lnglat.getLat() + " ] 的位置单击了地图！");
|
||
if (addForm.value.rangeType == 1) {
|
||
locationList.value = [];
|
||
locationList.value.push({
|
||
longitude: e.lnglat.getLng(),
|
||
latitude: e.lnglat.getLat()
|
||
});
|
||
var lnglatXY = new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat());
|
||
geocoder.getAddress(lnglatXY, function (status, result) {
|
||
console.log(status, result);
|
||
addForm.value.addr = result.regeocode.formattedAddress;
|
||
});
|
||
drawCircle();
|
||
} else {
|
||
locationList.value.push({
|
||
longitude: e.lnglat.getLng(),
|
||
latitude: e.lnglat.getLat()
|
||
});
|
||
}
|
||
console.log("当前位置列表", locationList.value);
|
||
});
|
||
}
|
||
|
||
function select(e) {
|
||
console.log("select", e);
|
||
placeSearch.setCity(e.poi.adcode);
|
||
placeSearch.search(e.poi.name); //关键字查询查询
|
||
}
|
||
|
||
//清空地图
|
||
function clearFn() {
|
||
map.clearMap();
|
||
}
|
||
function changeAreaType(e) {
|
||
// console.log("切换选项",e);
|
||
if (e === 1) {
|
||
drawCircle();
|
||
} else {
|
||
drawPolygon();
|
||
}
|
||
locationList.value = [];
|
||
}
|
||
//添加点标记
|
||
function addMarker() {
|
||
// 创建一个 Icon
|
||
var startIcon = new AMap.Icon({
|
||
// 图标尺寸
|
||
size: new AMap.Size(25, 34),
|
||
// 图标的取图地址
|
||
image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
|
||
// 图标所用图片大小
|
||
imageSize: new AMap.Size(25, 34)
|
||
// 图标取图偏移量
|
||
// imageOffset: new AMap.Pixel(-9, -3)
|
||
});
|
||
var marker = new AMap.Marker({
|
||
icon: startIcon,
|
||
position: [locationList.value[0].longitude, locationList.value[0].latitude],
|
||
size: new AMap.Size(25, 34),
|
||
offset: new AMap.Pixel(-12, -29)
|
||
});
|
||
marker.setMap(map);
|
||
}
|
||
function exitEditFn() {
|
||
mouseTool.close();
|
||
}
|
||
//画圆
|
||
function drawCircle() {
|
||
if (locationList.value.length == 0) {
|
||
return;
|
||
}
|
||
clearFn();
|
||
addMarker();
|
||
var circle = new AMap.Circle({
|
||
center: [locationList.value[0].longitude, locationList.value[0].latitude],
|
||
radius: addForm.value.areaRadius, //半径
|
||
borderWeight: 2,
|
||
strokeColor: "#6caffc",
|
||
strokeOpacity: 1,
|
||
strokeWeight: 2,
|
||
fillOpacity: 0.6,
|
||
strokeStyle: "solid",
|
||
// strokeDasharray: [10, 10],
|
||
// 线样式还支持 'dashed'
|
||
fillColor: "#6caffc",
|
||
zIndex: 50
|
||
});
|
||
|
||
circle.setMap(map);
|
||
// 缩放地图到合适的视野级别
|
||
map.setFitView([circle]);
|
||
}
|
||
//绘制多边形
|
||
function drawPolygon() {
|
||
clearFn();
|
||
console.log("自定义绘制");
|
||
mouseTool.polygon({
|
||
strokeColor: "#6caffc",
|
||
strokeOpacity: 1,
|
||
strokeWeight: 2,
|
||
// strokeOpacity: 0.2,
|
||
fillColor: "#6caffc",
|
||
fillOpacity: 0.6,
|
||
// 线样式还支持 'dashed'
|
||
strokeStyle: "solid"
|
||
// strokeStyle是dashed时有效
|
||
// strokeDasharray: [30,10],
|
||
});
|
||
}
|
||
|
||
// 回显图形模块
|
||
|
||
// 圆
|
||
function echoCircle(item) {
|
||
// console.log("画圆",item)
|
||
// 创建纯文本标记
|
||
let text = new AMap.Text({
|
||
text: item.fenceName,
|
||
anchor: "center", // 设置文本标记锚点
|
||
// draggable: true, // 是否拖拽
|
||
cursor: "pointer",
|
||
angle: 10,
|
||
style: {
|
||
padding: "10px",
|
||
"border-radius": "10px",
|
||
"background-color": "white",
|
||
"border-width": 0,
|
||
"box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
|
||
"text-align": "center",
|
||
"font-size": "20px",
|
||
color: "blue"
|
||
},
|
||
position: [item.longitude, item.latitude]
|
||
});
|
||
|
||
let circle = new AMap.Circle({
|
||
center: [item.longitude, item.latitude],
|
||
radius: item.areaRadius, //半径
|
||
borderWeight: 2,
|
||
strokeColor: "#6caffc",
|
||
strokeOpacity: 1,
|
||
strokeWeight: 2,
|
||
fillOpacity: 0.6,
|
||
strokeStyle: "solid",
|
||
// strokeDasharray: [10, 10],
|
||
// 线样式还支持 'dashed'
|
||
fillColor: "#6caffc",
|
||
zIndex: 50
|
||
});
|
||
text.setMap(map);
|
||
circle.setMap(map);
|
||
// 缩放地图到合适的视野级别
|
||
map.setFitView([circle]);
|
||
}
|
||
function echoDrawPolygon(item) {
|
||
// console.log("画多边形",item)
|
||
let polygonPath = [];
|
||
let polygonArr = JSON.parse(item.fenceShapeArr);
|
||
for (let index = 0; index < polygonArr.length; index++) {
|
||
const element = polygonArr[index];
|
||
polygonPath.push([element.longitude, element.latitude]);
|
||
}
|
||
// console.log("多边形位置",polygonPath)
|
||
|
||
// let path = [
|
||
// [116.403322, 39.920255],
|
||
// [116.410703, 39.897555],
|
||
// [116.402292, 39.892353],
|
||
// [116.389846, 39.891365]
|
||
// ]
|
||
let path = polygonPath;
|
||
|
||
// 创建纯文本标记
|
||
let text = new AMap.Text({
|
||
text: item.fenceName,
|
||
anchor: "center", // 设置文本标记锚点
|
||
// draggable: true, // 是否拖拽
|
||
cursor: "pointer",
|
||
angle: 10,
|
||
style: {
|
||
padding: "10px",
|
||
"border-radius": "10px",
|
||
"background-color": "white",
|
||
"border-width": 0,
|
||
"box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
|
||
"text-align": "center",
|
||
"font-size": "20px",
|
||
color: "blue"
|
||
},
|
||
position: path[0]
|
||
});
|
||
|
||
let polygon = new AMap.Polygon({
|
||
path: path,
|
||
strokeColor: "#FF33FF",
|
||
strokeWeight: 6,
|
||
strokeOpacity: 0.2,
|
||
fillOpacity: 0.4,
|
||
fillColor: "#1791fc",
|
||
zIndex: 50
|
||
});
|
||
text.setMap(map);
|
||
map.add(polygon);
|
||
// 缩放地图到合适的视野级别
|
||
map.setFitView([polygon]);
|
||
}
|
||
function echoCarMarker(item) {
|
||
console.log("👇开始加载地图数据");
|
||
//初始化地图对象，加载地图
|
||
// let map = new AMap.Map("mapContainer", {resizeEnable: true});
|
||
let lnglats = [[item.longitude, item.latitude]];
|
||
|
||
function drawCarMaker() {
|
||
for (let i = 0; i < lnglats.length; i++) {
|
||
marker = new AMap.Marker({
|
||
position: lnglats[i],
|
||
map: map,
|
||
// icon: "https://webapi.amap.com/images/car.png" // 自定义图标
|
||
// icon: "src/assets/images/smartSafeHat.png" // 自定义图标
|
||
icon: smartSafeHat // 自定义图标
|
||
// icon: "@/assets/images/carPosition/carIcon.png" // 自定义图标
|
||
// icon: "src/assets/images/carPosition/carIcon.png" // 自定义图标
|
||
});
|
||
// marker.content = '我是第' + (i + 1) + '个Marker';
|
||
marker.on("click", markerClick);
|
||
marker.emit("click", { target: marker });
|
||
}
|
||
}
|
||
|
||
// 使用逆地理编码获取地址信息
|
||
let address = "未知";
|
||
AMap.plugin("AMap.Geocoder", function () {
|
||
let geocoder = new AMap.Geocoder();
|
||
geocoder.getAddress(lnglats[0], function (status, result) {
|
||
if (status === "complete" && result.info === "OK") {
|
||
address = result.regeocode.formattedAddress; // 获取中文地址名称
|
||
console.log("位置", address);
|
||
drawCarMaker();
|
||
} else {
|
||
console.log("获取地址信息失败");
|
||
drawCarMaker();
|
||
}
|
||
});
|
||
});
|
||
|
||
function markerClick(e) {
|
||
let lnglat = e.target.getPosition();
|
||
|
||
//构建信息窗体中显示的内容
|
||
// console.log(e)
|
||
let info = [];
|
||
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">所属单位:</text> ' + item.enterpriseName + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">设备序号:</text> ' + item.devSn + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">人员名称:</text> ' + item.workerName + "</div>");
|
||
// info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.updateTime + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.uploadTime + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">经纬度:</text> ' + item.longitude.toFixed(6) + "|" + item.latitude.toFixed(6) + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">位置:</text> ' + address + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">工种:</text> ' + item.workerTypeName + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">身份证号:</text> ' + (item.idCard || "暂无") + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">联系电话:</text> ' + (item.phoneNumber || "暂无") + "</div>");
|
||
|
||
let infoWindow = new AMap.InfoWindow({
|
||
offset: new AMap.Pixel(30, -30),
|
||
content: info.join("") //使用默认信息窗体框样式，显示信息内容
|
||
});
|
||
// console.log("信息窗体",infoWindow)
|
||
infoWindow.open(map, e.target.getPosition());
|
||
}
|
||
map.setFitView();
|
||
}
|
||
function echoPersonMarker(item) {
|
||
let lnglats = [[item.longitude, item.latitude]];
|
||
|
||
function drawPersonMarker() {
|
||
for (let i = 0; i < lnglats.length; i++) {
|
||
let marker = new AMap.Marker({
|
||
// position: lnglats[i],
|
||
position: lnglats[0],
|
||
map: map,
|
||
// icon: personOn // 自定义图标
|
||
icon: smartSafeHat2 // 自定义图标
|
||
});
|
||
marker.on("click", markerClick);
|
||
marker.emit("click", { target: marker });
|
||
}
|
||
}
|
||
let address = "<text style='color: darkred;font-weight:bolder'>未知</text>";
|
||
AMap.plugin("AMap.Geocoder", function () {
|
||
let geocoder = new AMap.Geocoder();
|
||
|
||
geocoder.getAddress(lnglats[0], function (status, result) {
|
||
if (status === "complete" && result.info === "OK") {
|
||
address = result.regeocode.formattedAddress; // 获取中文地址名称
|
||
console.log("位置", address);
|
||
drawPersonMarker();
|
||
// createMarkerAndInfoWindow();
|
||
} else {
|
||
console.log("获取地址信息失败");
|
||
drawPersonMarker();
|
||
// createMarkerAndInfoWindow()
|
||
}
|
||
});
|
||
});
|
||
|
||
function markerClick(e) {
|
||
let lnglat = e.target.getPosition();
|
||
|
||
// 使用逆地理编码获取地址信息
|
||
|
||
//构建信息窗体中显示的内容
|
||
console.log(e);
|
||
let info = [];
|
||
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">所属单位:</text> ' + item.enterpriseName + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">设备序号:</text> ' + item.devSn + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">人员名称:</text> ' + item.workerName + "</div>");
|
||
// info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.updateTime + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.uploadTime + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">经纬度:</text> ' + item.longitude.toFixed(6) + "|" + item.latitude.toFixed(6) + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">位置:</text> ' + address + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">工种:</text> ' + item.workerTypeName + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">身份证号:</text> ' + (item.idCard || "暂无") + "</div>");
|
||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">联系电话:</text> ' + (item.phoneNumber || "暂无") + "</div>");
|
||
|
||
var infoWindow = new AMap.InfoWindow({
|
||
offset: new AMap.Pixel(10, -30),
|
||
content: info.join("") //使用默认信息窗体框样式，显示信息内容
|
||
});
|
||
|
||
// infoWindow.open(map, e.target.getPosition());
|
||
infoWindow.open(map, lnglat);
|
||
}
|
||
map.setFitView();
|
||
}
|
||
</script>
|
||
|
||
<!-- 组件自定义样式（需嵌套外层class） -->
|
||
|
||
<style type="text/css">
|
||
.amap-logo {
|
||
display: none;
|
||
opacity: 0 !important;
|
||
}
|
||
.amap-copyright {
|
||
opacity: 0;
|
||
}
|
||
.content {
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep(.h-card .content) {
|
||
overflow: hidden;
|
||
}
|
||
// :deep(.h-card .content) {
|
||
// background: none;
|
||
// }
|
||
.welanMask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
|
||
z-index: -1; /* 确保遮罩层位于其他内容上方 */
|
||
|
||
// position: absolute;
|
||
// width: 99%;
|
||
// height: 120%;
|
||
// background: rgba(0, 0, 0, 0.9);
|
||
// z-index: -1;
|
||
// transform: transformY(-100%);
|
||
.weilanDetail {
|
||
position: absolute;
|
||
background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
|
||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||
// background: black;
|
||
background-size: 100% 100%;
|
||
box-sizing: border-box;
|
||
width: 35%;
|
||
top: 20%;
|
||
left: 32.5%;
|
||
height: 65%;
|
||
padding: 0 1%;
|
||
.detailTitle {
|
||
width: 100%;
|
||
height: 10%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.leftTitle {
|
||
width: auto;
|
||
height: 100%;
|
||
// background-color: #fff;
|
||
display: flex;
|
||
justify-content: start;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-size: 26px;
|
||
font-family: OPPOSansH;
|
||
font-style: italic;
|
||
letter-spacing: 2px;
|
||
}
|
||
.rightTitle {
|
||
width: 20%;
|
||
height: 100%;
|
||
// background-color: black;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
.closeDetail {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
.detailContent {
|
||
height: 90%;
|
||
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;
|
||
color: #fff;
|
||
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: 16px;
|
||
div {
|
||
text-align: center;
|
||
width: 24%;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
.list-style:hover {
|
||
background: #091f3f;
|
||
}
|
||
.not-data {
|
||
top: -10%;
|
||
width: 100%;
|
||
height: 100%;
|
||
// left: 20%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: absolute;
|
||
img {
|
||
width: 20%;
|
||
margin: 5% 30%;
|
||
}
|
||
p {
|
||
color: #fff;
|
||
font-size: calc(100vw * 14 / 1920);
|
||
margin: -1% 37%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 多边形表单
|
||
.fence-shape {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 74px;
|
||
height: 34px;
|
||
background: #ffffff;
|
||
border-radius: 4px 4px 4px 4px;
|
||
border: 1px solid #d8dbe8;
|
||
}
|
||
// 围栏弹窗
|
||
.fenceDialog {
|
||
position: absolute;
|
||
background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
box-sizing: border-box;
|
||
padding: 25px;
|
||
left: 5%;
|
||
top: 15%;
|
||
width: 330px;
|
||
height: 380px;
|
||
.fence-dialog-modal {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0%;
|
||
left: 0%;
|
||
z-index: 3;
|
||
background: rgba(39, 45, 69, 0.5);
|
||
}
|
||
.close-icon {
|
||
position: absolute;
|
||
top: 0px;
|
||
right: 0px;
|
||
cursor: pointer;
|
||
}
|
||
.fence-title {
|
||
border-left: 4px solid #5c81ee;
|
||
font-size: 15px;
|
||
color: #272d45;
|
||
padding-left: 10px;
|
||
margin-bottom: 20px;
|
||
font-weight: 600;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
}
|
||
}
|
||
.fenceCreate {
|
||
position: absolute;
|
||
background: url("@/assets/images/cbg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
box-sizing: border-box;
|
||
padding: 25px;
|
||
width: 360px;
|
||
height: 380px;
|
||
left: 40px;
|
||
top: 40px;
|
||
z-index: 5;
|
||
// .fence-modal {
|
||
// position: absolute;
|
||
// width: 330px;
|
||
// height: 90px;
|
||
// top: -90px;
|
||
// left: 0%;
|
||
// background: rgba(39, 45, 69, 0.5);
|
||
// }
|
||
.fenceCrete-box {
|
||
position: relative;
|
||
.create-footer {
|
||
margin: 100px 0 0 50px;
|
||
}
|
||
.close-icon {
|
||
position: absolute;
|
||
right: 0%;
|
||
top: 0%;
|
||
cursor: pointer;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
font-size: 18px;
|
||
}
|
||
:deep(.el-form-item__label) {
|
||
color: #fff;
|
||
}
|
||
:deep(.el-radio__label) {
|
||
color: #fff;
|
||
}
|
||
.cFooter {
|
||
width: 70%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-left: 15%;
|
||
margin-top: 15%;
|
||
.tool {
|
||
width: 20%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
width: 80px;
|
||
height: 33px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
// background: #ffffff;23,46,70
|
||
// background: rgba(23, 46, 70, 0.3);
|
||
// background-color: rgba(0, 0, 255, 0.5);
|
||
color: #fff;
|
||
border-radius: 2px 2px 2px 2px;
|
||
border: 1px solid #5181f6;
|
||
}
|
||
.tool1 {
|
||
background: url("@/assets/images/cancel.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.tool2 {
|
||
background: url("@/assets/images/confirm.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.bigFormBox {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-size: 15px;
|
||
.itemBox1 {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 10%;
|
||
.itemBox11 {
|
||
width: 30%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 10%;
|
||
}
|
||
.itemBox12 {
|
||
width: 60%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 10%;
|
||
}
|
||
}
|
||
.itemBox2 {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 5%;
|
||
.itemBox21 {
|
||
width: 30%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.itemBox22 {
|
||
width: 60%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.itemBox3 {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 5%;
|
||
.itemBox31 {
|
||
width: 30%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.itemBox32 {
|
||
width: 60%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.itemBox4 {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 5%;
|
||
.itemBox41 {
|
||
width: 30%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.itemBox42 {
|
||
width: 60%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
color: black;
|
||
margin-right: 50%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.fence-box {
|
||
position: relative;
|
||
.dialog-title {
|
||
color: #ffffff;
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
font-family: "OPPOSans-Bold";
|
||
display: flex;
|
||
align-items: center;
|
||
.title-img {
|
||
width: 10%;
|
||
height: 10%;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.title-text {
|
||
margin-left: 1%;
|
||
}
|
||
}
|
||
.close-icon {
|
||
position: absolute;
|
||
right: 0%;
|
||
top: 0%;
|
||
cursor: pointer;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
font-size: 18px;
|
||
}
|
||
.fence-tool {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 0 25px;
|
||
.tool {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 80px;
|
||
height: 33px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
// background: #ffffff;
|
||
color: #5181f6;
|
||
border-radius: 2px 2px 2px 2px;
|
||
border: 1px solid #5181f6;
|
||
}
|
||
}
|
||
.fence-select {
|
||
margin: 15px 0;
|
||
}
|
||
.fence-radio {
|
||
height: 160px;
|
||
}
|
||
}
|
||
.choice-type {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 50px;
|
||
justify-content: center;
|
||
}
|
||
.greenStyle {
|
||
font-size: 12px;
|
||
margin-top: 8px;
|
||
color: #fff;
|
||
}
|
||
#mapContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.labor-type {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin-top: 20px;
|
||
margin-bottom: 20px;
|
||
font-size: 14px;
|
||
.type-box {
|
||
width: 92px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 28px;
|
||
cursor: pointer;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
background: url("@/assets/images/carPosition/noChioce.png") no-repeat;
|
||
// background: #e2e8f8;
|
||
border-radius: 2px 2px 2px 2px;
|
||
}
|
||
.laborActive {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 92px;
|
||
height: 28px;
|
||
color: #fff;
|
||
// background: #5181f6;
|
||
background: url("@/assets/images/carPosition/chioceType.png") no-repeat;
|
||
border-radius: 2px 2px 2px 2px;
|
||
}
|
||
}
|
||
|
||
.dev-list {
|
||
width: 100%;
|
||
height: 55%;
|
||
.choice-item {
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
height: 33px;
|
||
cursor: pointer;
|
||
.list-type {
|
||
position: absolute;
|
||
width: 15px;
|
||
height: 15px;
|
||
margin-left: 20px;
|
||
margin-right: 10px;
|
||
z-index: 2;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.choice-speed {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 50px;
|
||
font-size: 14px;
|
||
position: absolute;
|
||
right: 5%;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
.top-active {
|
||
color: #fff;
|
||
}
|
||
.data-ledger {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.left-data {
|
||
width: 21%;
|
||
height: 100%;
|
||
// :deep(.h-card) {
|
||
// .content {
|
||
// height: 94% !important;
|
||
// }
|
||
// }
|
||
.top-data {
|
||
height: 58.5%;
|
||
.left-menu {
|
||
width: 100%;
|
||
height: 100%;
|
||
.left-top {
|
||
display: flex;
|
||
font-size: 20px;
|
||
font-family: OPPOSansH;
|
||
letter-spacing: 2px; /* 设置文字间距为2像素 */
|
||
color: rgba(255, 255, 255, 0.6);
|
||
transform: skewX(-10deg);
|
||
// border-bottom: 2px solid #dce6fd;
|
||
.realTime-data {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 50%;
|
||
height: 20px;
|
||
padding: 10px 0;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
.alarm-data {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 50%;
|
||
height: 20px;
|
||
padding: 10px 0;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.list-tool {
|
||
display: flex;
|
||
// margin-top: 10px;
|
||
margin-left: 30px;
|
||
.tool-btn {
|
||
width: 33px;
|
||
height: 32px;
|
||
margin-left: 20px;
|
||
cursor: pointer;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bottom-data {
|
||
margin-top: 1%;
|
||
height: 38%;
|
||
:deep(.h-card) {
|
||
.content {
|
||
margin-top: 4% !important;
|
||
}
|
||
}
|
||
.left-content {
|
||
height: 100%;
|
||
width: 100%;
|
||
// background-color: #fff;
|
||
.tab-list {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 10%;
|
||
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 * 14 / 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: 12px;
|
||
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%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.right-data {
|
||
width: 78%;
|
||
height: 100%;
|
||
.map-top {
|
||
height: 58%;
|
||
position: relative;
|
||
:deep(.h-card) {
|
||
.content {
|
||
margin-top: 1% !important;
|
||
}
|
||
}
|
||
:deep(.titltText) {
|
||
margin: 0 0 0 0;
|
||
height: 100%;
|
||
margin-left: 0.08rem;
|
||
margin-top: -0.03rem;
|
||
display: flex;
|
||
align-items: center;
|
||
letter-spacing: 0.01rem;
|
||
}
|
||
.wei-lan {
|
||
.icon-off {
|
||
position: absolute;
|
||
padding-top: 5px;
|
||
top: 15%;
|
||
left: 1%;
|
||
width: 48px;
|
||
height: 48px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
background: #ffffff;
|
||
text-align: center;
|
||
border-radius: 2px 2px 2px 2px;
|
||
img {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
.icon-on {
|
||
position: absolute;
|
||
padding-top: 5px;
|
||
top: 15%;
|
||
left: 1%;
|
||
text-align: center;
|
||
width: 48px;
|
||
height: 48px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
background: #ffffff;
|
||
color: #5181f6;
|
||
border-radius: 2px 2px 2px 2px;
|
||
img {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
.enlargeIconOff {
|
||
position: absolute;
|
||
// padding-top: 5px;
|
||
bottom: 5%;
|
||
right: 1%;
|
||
text-align: center;
|
||
width: 38px;
|
||
height: 38px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
background: #ffffff;
|
||
// color: #5181f6;
|
||
border-radius: 2px 2px 2px 2px;
|
||
img {
|
||
width: 20px;
|
||
height: 22px;
|
||
margin: 8px auto;
|
||
}
|
||
}
|
||
.enlargeIconOn {
|
||
position: absolute;
|
||
// padding-top: 5px;
|
||
bottom: 8%;
|
||
right: 1%;
|
||
text-align: center;
|
||
width: 38px;
|
||
height: 38px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
background: #ffffff;
|
||
// color: #5181f6;
|
||
border-radius: 2px 2px 2px 2px;
|
||
img {
|
||
width: 20px;
|
||
height: 22px;
|
||
margin: 8px auto;
|
||
}
|
||
}
|
||
}
|
||
.start-track {
|
||
position: absolute;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
// padding: 20px;
|
||
width: 108px;
|
||
height: 38px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
background: #ffffff;
|
||
box-shadow: 0px 0px 10px 0px rgba(39, 45, 69, 0.2);
|
||
bottom: 8%;
|
||
right: 5%;
|
||
}
|
||
.start-track-isEnlage {
|
||
position: absolute;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
// padding: 20px;
|
||
width: 38px;
|
||
height: 38px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
background: #ffffff;
|
||
box-shadow: 0px 0px 10px 0px rgba(39, 45, 69, 0.2);
|
||
bottom: 8%;
|
||
right: 1%;
|
||
img{
|
||
width: 20px;
|
||
height: 22px;
|
||
margin: 6px auto;
|
||
}
|
||
}
|
||
}
|
||
.map-type {
|
||
position: absolute;
|
||
right: 1%;
|
||
top: 14%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 4px 2px;
|
||
border: solid 1px #fff;
|
||
width: 80px;
|
||
// height: 110px;
|
||
cursor: pointer;
|
||
background: #1d2d40;
|
||
img {
|
||
width: 72px;
|
||
height: 72px;
|
||
}
|
||
span {
|
||
color: #fff;
|
||
font-size: 14px;
|
||
padding-top: 4px;
|
||
}
|
||
}
|
||
|
||
.right-bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 38%;
|
||
.hat-bottom {
|
||
width: 23%;
|
||
margin-top: 20px;
|
||
height: 100%;
|
||
position: relative;
|
||
:deep(.h-card) {
|
||
.content {
|
||
margin-top: 4.65% !important;
|
||
// margin-top: 0;
|
||
}
|
||
}
|
||
.hat-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
.hat-image {
|
||
width: 100%;
|
||
height: 50%;
|
||
// margin-top: 15%;
|
||
background: url("@/assets/images/hatCount.png") no-repeat;
|
||
background-size: contain;
|
||
.hat-info {
|
||
margin-left: 45%;
|
||
margin-top: 5%;
|
||
width: 100%;
|
||
height: 100%;
|
||
color: #fff;
|
||
font-style: italic;
|
||
.hat-text {
|
||
font-size: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 50%;
|
||
height: 25%;
|
||
background: url("@/assets/images/dustNoise/menuImg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.hat-count {
|
||
font-size: 20px;
|
||
width: 50%;
|
||
height: 25%;
|
||
font-weight: bolder;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.week-bottom {
|
||
width: 48.75%;
|
||
// margin-top: 20px;
|
||
// // height: 90%;
|
||
// // position: relative;
|
||
// :deep(.content) {
|
||
// margin-top: 2.1% !important;
|
||
// }
|
||
// div {
|
||
// }
|
||
// width: 50%;
|
||
margin-top: 20px;
|
||
height: 100%;
|
||
position: relative;
|
||
:deep(.h-card) {
|
||
.content {
|
||
margin-top: 2.1% !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.alarm-bottom {
|
||
width: 50%;
|
||
margin-top: 20px;
|
||
height: 100%;
|
||
position: relative;
|
||
:deep(.h-card) {
|
||
.content {
|
||
margin-top: 2.1% !important;
|
||
}
|
||
}
|
||
:deep(.titltText) {
|
||
// margin: 0 0 0 0;
|
||
// height: 100%;
|
||
// margin-left: 0.08rem;
|
||
// margin-top: -0.025rem;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// letter-spacing: 0.01rem;
|
||
}
|
||
.bottom-left {
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
// padding: 0 2%;
|
||
.left-content {
|
||
height: 100%;
|
||
width: 100%;
|
||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||
// background-size: 100% 100%;
|
||
.tab-list {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 10%;
|
||
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 * 14 / 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: 12px;
|
||
div {
|
||
text-align: center;
|
||
width: 24%;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
.list-style:hover {
|
||
background: #091f3f;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.not-data {
|
||
top: 23%;
|
||
// width: 16%;
|
||
left: 33%;
|
||
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%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.top-select {
|
||
margin: 0 0 0px 30px;
|
||
}
|
||
.track-calendar {
|
||
:deep(.el-calendar) {
|
||
background: none;
|
||
.el-calendar__header {
|
||
color: #fff;
|
||
.el-button-group {
|
||
button {
|
||
background: url("@/assets/images/carPosition/noChioce.png") no-repeat;
|
||
color: #fff;
|
||
padding: 5px;
|
||
width: 80px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
:deep(.el-calendar-table .el-calendar-day:hover) {
|
||
background-color: #3e5c94;
|
||
}
|
||
:deep(.el-calendar-table .el-calendar-day) {
|
||
height: 40px !important;
|
||
text-align: center;
|
||
// padding: 1px;
|
||
box-sizing: border-box;
|
||
:hover {
|
||
background: none;
|
||
}
|
||
}
|
||
:deep(.el-calendar-table) {
|
||
border: 1px solid #3e5c94;
|
||
tbody {
|
||
background: rgba(81, 129, 246, 0.2);
|
||
color: #fff;
|
||
}
|
||
thead {
|
||
background: rgba(81, 129, 246, 0.5);
|
||
th {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
:deep(.el-calendar__header) {
|
||
border: none;
|
||
}
|
||
:deep(.is-selected) {
|
||
background: #5181f6;
|
||
color: #fff;
|
||
:hover {
|
||
// background: #5181f6;
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.el-input__wrapper) {
|
||
background: #112d59;
|
||
}
|
||
:deep(.el-input__inner) {
|
||
color: #fff;
|
||
}
|
||
:deep(.el-select .el-input .el-select__caret) {
|
||
color: #fff;
|
||
}
|
||
|
||
.dev-list {
|
||
:deep(.el-checkbox) {
|
||
.el-checkbox__label {
|
||
color: #fff;
|
||
}
|
||
.el-checkbox__input {
|
||
&.is-indeterminate {
|
||
background: #5181f6;
|
||
}
|
||
&.is-checked {
|
||
// border-left: 2px solid #5181f6;
|
||
// background: #e2e8f8;
|
||
background: rgba(81, 129, 246, 0.3);
|
||
// background: url("@/assets/images/carPosition/chioceType.png") no-repeat;
|
||
.el-checkbox__inner {
|
||
background: #5181f6;
|
||
}
|
||
}
|
||
.el-checkbox__inner {
|
||
border: 1px solid #224ea8;
|
||
background: none;
|
||
&:hover {
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.fence-radio {
|
||
:deep(.el-checkbox) {
|
||
.el-checkbox__label {
|
||
color: #fff;
|
||
}
|
||
.el-checkbox__input {
|
||
&.is-indeterminate {
|
||
background: #5181f6;
|
||
}
|
||
&.is-checked {
|
||
// border-left: 2px solid #5181f6;
|
||
// background: #e2e8f8;
|
||
background: rgba(81, 129, 246, 0.3);
|
||
// background: url("@/assets/images/carPosition/chioceType.png") no-repeat;
|
||
.el-checkbox__inner {
|
||
background: #5181f6;
|
||
}
|
||
}
|
||
.el-checkbox__inner {
|
||
border: 1px solid #224ea8;
|
||
background: none;
|
||
&:hover {
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.choice-item {
|
||
:deep(.el-checkbox) {
|
||
.el-checkbox__label {
|
||
position: absolute;
|
||
left: 70px;
|
||
padding-top: 3px;
|
||
color: #fff;
|
||
}
|
||
.el-checkbox__input {
|
||
width: 330px;
|
||
padding-top: 10px;
|
||
padding-bottom: 10px;
|
||
padding-left: 55px;
|
||
&.is-checked {
|
||
// border-left: 2px solid #5181f6;
|
||
// background: #e2e8f8;
|
||
background: rgba(81, 129, 246, 0.3);
|
||
// background: url("@/assets/images/carPosition/chioceType.png") no-repeat;
|
||
.el-checkbox__inner {
|
||
background: #5181f6;
|
||
}
|
||
}
|
||
.el-checkbox__inner {
|
||
border: 1px solid #224ea8;
|
||
background: none;
|
||
&:hover {
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
:deep() {
|
||
.el-tree {
|
||
background-color: transparent;
|
||
.el-tree-node {
|
||
white-space: normal;
|
||
&:focus > .el-tree-node__content {
|
||
background-color: transparent;
|
||
}
|
||
&.is-current > .el-tree-node__content {
|
||
background-color: rgba(81, 129, 246, 0.14);
|
||
color: #5181f6;
|
||
}
|
||
}
|
||
.el-tree-node__label {
|
||
color: #fff;
|
||
}
|
||
.el-tree-node__content {
|
||
position: relative;
|
||
&:hover {
|
||
background-color: rgba(81, 129, 246, 0.14);
|
||
color: #5181f6;
|
||
}
|
||
}
|
||
.el-tree-node__expand-icon {
|
||
font-size: 16px;
|
||
padding: 0 6px;
|
||
&.is-leaf {
|
||
color: transparent !important;
|
||
}
|
||
}
|
||
.treeTitle {
|
||
background-color: #f7f7f7;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
.custom-tree-node {
|
||
width: 100%;
|
||
img {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
.nodeName {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
display: inline-block;
|
||
color: #fff;
|
||
}
|
||
</style>
|