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-25 20:11:36 +08:00
parent 6082499024
commit a1c3eddc6f
5 changed files with 236 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/carPosition/equipment2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/assets/images/carPosition/equipmentPosition2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/images/carPosition/equipmentPosition3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

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

@ -158,7 +158,7 @@
</el-checkbox-group>
</el-scrollbar>
</div>
<div v-else style="text-align: center; margin-top: 100px; color: #fff">暂无围栏</div>
<div v-else style="text-align: center; margin-top: 65px; color: #fff">暂无围栏</div>
</div>
<!-- 创建围栏弹窗 -->
<div class="fenceCreate" v-if="fenceCreateShow">
@ -168,7 +168,7 @@
</div>
<!-- <div class="fence-title">创建围栏</div> -->
<el-form size="medium" :model="addForm" ref="addFormRef" label-width="80px" :rules="formFenceRules">
<div class="bigFormBox">
<!-- <div class="bigFormBox">
<div class="itemBox1">
<div>围栏名称</div>
<div><el-input v-model="addForm.fenceName" placeholder="请输入"></el-input></div>
@ -201,20 +201,19 @@
<div class="itemBox4" v-if="addForm.rangeType === 2">
<div>围栏形状</div>
<div>
<!-- <div class="fence-shape">多边形</div> -->
<div class="">多边形</div>
</div>
</div>
</div>
</div> -->
<!-- <el-form-item class="el-form-item__label" label="围栏名称" prop="fenceName">
<div style="margin-top: 15%">
<el-form-item class="el-form-item__label" 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: 10px; padding-right: 10px"
style="display: flex; justify-content: space-between; padding-top: 0px; padding-right: 0px"
@change="changeAreaType"
>
<el-radio :label="1">标准区域</el-radio>
@ -232,9 +231,10 @@
</el-form-item>
<el-form-item label="围栏形状" prop="fenceShape" v-if="addForm.rangeType === 2">
<div class="fence-shape">多边形</div>
</el-form-item> -->
</el-form-item>
</div>
<div class="cFooter">
<div class="tool tool1" @click="handleCancel">取消</div>
<div class="tool tool1" @click="closeFenceCreate">取消</div>
<div class="tool tool2" @click="submitFence(addFormRef)">保存</div>
</div>
</el-form>
@ -281,20 +281,8 @@
</template>
<script setup lang="ts">
// import { getWorkerInfoList } from "@/assets/js/api/laborPerson";
import {
getAlarmRecordInfo,
getCarDevOption,
addstandardDevApi,
getRealtimeRecordInfo,
getRealtimeRecordList,
getVehiclePositionDayRecord
} from "@/api/modules/equipmentPosition";
import {
getFenceTypeTotal,
getVehiclePositionFence,
addVehiclePositionFence,
getEpDevOptionApi,
getEpTypeTotalApi,
getEpSuroundInfoApi,
@ -314,7 +302,8 @@ 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 equipmentPosition from "@/assets/images/carPosition/equipmentPosition2.png";
import equipmentPosition2 from "@/assets/images/carPosition/equipmentPosition2.png";
import equipmentPosition3 from "@/assets/images/carPosition/equipmentPosition3.png";
import { GlobalStore } from "@/stores";
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
@ -366,6 +355,23 @@ let addForm = ref({
projectSn: "",
enterpriseId: ""
});
let formFenceRules = ref({
fenceName: [
{
required: true,
message: "必填",
trigger: "blur"
},
{ min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
], //
areaRadius: [
{
required: true,
message: "必填",
trigger: "change"
}
]
});
let pagInfo = ref({
pageNo: 1, //页数
pageSize: 10, //条数
@ -399,7 +405,7 @@ let addEditForm = ref({
driver: ""
});
onMounted(() => {
// choiceMonth.value = formatMonthTime(dayValue.value);
choiceMonth.value = formatMonthTime(dayValue.value);
// console.log("当前月份", choiceMonth.value);
initMap();
getProgressListData();
@ -431,6 +437,24 @@ watch(choiceMonth, newVal => {
});
function handleCancel() {
fenceCreateShow.value = false;
addForm.value = {
areaRadius: 100, //区域半径
fenceName: "", //围栏名称
addr: "",
rangeType: 1,
locationList: [
{
fenceId: 0,
id: 0,
latitude: "",
longitude: "",
sortNum: 0
}
],
projectSn: "",
enterpriseId: ""
};
exitEditFn();
clearFn();
}
@ -507,7 +531,7 @@ function deleteFenceInfo(idGroups) {
});
}
const submitFence = async (formEL: FormInstance | undefined) => {
if (locationList.value.length == 0) {
if (locationList.value.length === 0) {
ElMessage({
showClose: true,
message: "未设置围栏区域!",
@ -607,7 +631,7 @@ function getTodayTrack(day) {
const element = res.result[index];
path.unshift([element.longitude, element.latitude]);
}
trackMapInit(path, currentData);
if(checked.value == 2) trackMapInit(path, currentData);
}
console.log("当前数据", path, currentData);
});
@ -710,12 +734,7 @@ function openFenceCreate() {
// 关闭创建围栏弹窗
function closeFenceCreate() {
fenceCreateShow.value = false;
addForm.value = {
areaRadius: 100, //区域半径
fenceName: "", //围栏名称
addr: "",
rangeType: 1,
locationList: [
let tempArr = [
{
fenceId: 0,
id: 0,
@ -723,7 +742,13 @@ function closeFenceCreate() {
longitude: "",
sortNum: 0
}
],
];
addForm.value = {
areaRadius: 100, //区域半径
fenceName: "", //围栏名称
addr: "",
rangeType: 1,
locationList: tempArr,
projectSn: "",
enterpriseId: ""
};
@ -1037,7 +1062,8 @@ function trackMapInit(path: any, item: any) {
map: map,
position: path[0],
// icon: "https://webapi.amap.com/images/car.png",
icon: "src/assets/images/carPosition/equipmentPosition2.png",
// icon: "src/assets/images/equipmentPosition2.png",
icon: equipmentPosition3,
offset: new AMap.Pixel(-26, -13),
autoRotation: true,
angle: -90
@ -1077,6 +1103,7 @@ function trackMapInit(path: any, item: any) {
info.push('<p style="padding:7px;">设备名称: ' + item.equipmentName + "</p>");
info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
info.push('<p style="padding:7px;">位置: ' + address + "</p>");
info.push('<p style="padding:7px;">经纬度: ' + item.longitude + "|" + item.latitude + "</p>");
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(10, -30),
content: info.join("") //使用默认信息窗体框样式，显示信息内容
@ -1358,7 +1385,8 @@ function echoCarMarker(item) {
position: lnglats[i],
map: map,
// icon: "https://webapi.amap.com/images/car.png" // 自定义图标
icon: "src/assets/images/carPosition/equipmentPosition2.png"
// icon: "src/assets/images/equipmentPosition2.png"
icon: equipmentPosition2
});
// marker.content = '我是第' + (i + 1) + '个Marker';
marker.on("click", markerClick);
@ -1412,13 +1440,14 @@ function echoPersonMarker(item) {
position: lnglats[i],
map: map,
// icon: personOn // 自定义图标
icon: "src/assets/images/carPosition/equipmentPosition2.png" // 自定义图标
// icon: "src/assets/images/equipmentPosition2.png" // 自定义图标
icon: equipmentPosition2 // 自定义图标
});
marker.on("click", markerClick);
marker.emit("click", { target: marker });
}
}
let address = "未知";
let address = "<text style='color: darkred;font-weight:bolder'>未知</text>";
AMap.plugin("AMap.Geocoder", function () {
let geocoder = new AMap.Geocoder();
@ -1447,6 +1476,7 @@ function echoPersonMarker(item) {
info.push('<p style="padding:7px;">设备名称: ' + item.equipmentName + "</p>");
info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
info.push('<p style="padding:7px;">位置: ' + address + "</p>");
info.push('<p style="padding:7px;">经纬度: ' + item.longitude + " | " + item.latitude + "</p>");
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(10, -30),
@ -1533,7 +1563,7 @@ function echoPersonMarker(item) {
background-size: 100% 100%;
box-sizing: border-box;
padding: 25px;
width: 330px;
width: 360px;
height: 380px;
left: 40px;
top: 40px;
@ -1560,6 +1590,12 @@ function echoPersonMarker(item) {
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;
@ -1902,6 +1938,16 @@ function echoPersonMarker(item) {
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;
@ -1961,9 +2007,18 @@ function echoPersonMarker(item) {
position: relative;
:deep(.h-card) {
.content {
margin-top: 1% !important;
margin-top: 1.25% !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%;

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

@ -17,7 +17,12 @@
<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 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>
@ -70,7 +75,12 @@
<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 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>
@ -106,7 +116,7 @@
<div style="width: 50%">{{ item.fenceName }}</div>
<div style="width: 50%">{{ item.workerNum }}</div>
</div>
<div class="not-data" v-if="fenceList.length == 0">
<div class="not-data" style="top: 20%" v-if="fenceList.length == 0">
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div>
@ -167,7 +177,7 @@
</el-checkbox-group>
</el-scrollbar>
</div>
<div v-else style="text-align: center; margin-top: 100px; color: #fff">暂无围栏</div>
<div v-else style="text-align: center; margin-top: 65px; color: #fff">暂无围栏</div>
</div>
<!-- 创建围栏弹窗 -->
@ -178,7 +188,7 @@
</div>
<!-- <div class="fence-title">创建围栏</div> -->
<el-form size="medium" :model="addForm" ref="addFormRef" label-width="80px" :rules="formFenceRules">
<div class="bigFormBox">
<!-- <div class="bigFormBox">
<div class="itemBox1">
<div>围栏名称</div>
<div><el-input v-model="addForm.fenceName" placeholder="请输入"></el-input></div>
@ -211,19 +221,19 @@
<div class="itemBox4" v-if="addForm.rangeType === 2">
<div>围栏形状</div>
<div>
<!-- <div class="fence-shape">多边形</div> -->
<div class="">多边形</div>
</div>
</div>
</div>
<!-- <el-form-item label="围栏名称" prop="fenceName">
</div> -->
<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: 10px; padding-right: 10px"
style="display: flex; justify-content: space-between; padding-top: 0px; padding-right: 0px"
@change="changeAreaType"
>
<el-radio :label="1">标准区域</el-radio>
@ -242,7 +252,9 @@
<el-form-item label="围栏形状" prop="fenceShape" v-if="addForm.rangeType === 2">
<div class="fence-shape">多边形</div>
</el-form-item>
<div class="create-footer">
</div>
<!-- <div class="create-footer">
<el-button class="cancleBtn" @click="fenceCreateShow = false" icon="el-icon-circle-close" size="medium"
>取消
</el-button>
@ -252,7 +264,7 @@
</div> -->
<div class="cFooter">
<div class="tool tool1" @click="handleCancel">取消</div>
<div class="tool tool1" @click="closeFenceCreate">取消</div>
<div class="tool tool2" @click="submitFence(addFormRef)">保存</div>
</div>
</el-form>
@ -289,18 +301,18 @@
<div class="bottom-left">
<div class="left-content">
<div class="tab-list">
<div style="width: 5%">序号</div>
<div style="width: 10%">序号</div>
<div style="width: 15%">人员名称</div>
<div style="width: 15%">设备序号</div>
<div style="width: 25%">报警时间</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: 5%">{{ index + 1 }}</div>
<div style="width: 10%">{{ index + 1 }}</div>
<div style="width: 15%">{{ item.workerName }}</div>
<div style="width: 15%">{{ item.devSn }}</div>
<div style="width: 25%">{{ item.createTime }}</div>
<div style="width: 20%">{{ item.createTime }}</div>
<div style="width: 40%">{{ item.alarmInfo }}</div>
</div>
<div class="not-data" v-if="listData.length == 0">
@ -382,7 +394,12 @@ let isIndeterminateFence = ref(true);
let checked = ref(1);
let devName = ref("");
let locationList = ref([]);
interface RuleForm {
// fenceName: string
// areaRadius: number
}
let addFormRef = ref<FormInstance>();
// const addForm = reactive<RuleForm>({
let addForm = ref({
areaRadius: 100, //区域半径
fenceName: "", //围栏名称
@ -432,6 +449,7 @@ let addEditForm = ref({
type: 1,
driver: ""
});
// const formFenceRules = reactive<FormRules<RuleForm>({
let formFenceRules = ref({
fenceName: [
{
@ -600,7 +618,7 @@ function deleteFenceInfo(idGroups) {
});
}
const submitFence = async (formEL: FormInstance | undefined) => {
if (locationList.value.length == 0) {
if (locationList.value.length === 0) {
ElMessage({
showClose: true,
message: "未设置围栏区域!",
@ -1324,7 +1342,8 @@ function trackMapInit(path: any, item: any) {
map: map,
position: path[0],
// icon: "https://webapi.amap.com/images/car.png",
icon: "src/assets/images/smartSafeHat.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),
@ -1367,6 +1386,7 @@ function trackMapInit(path: any, item: any) {
info.push('<p style="padding:7px;">人员名称: ' + item.workerName + "</p>");
info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
info.push('<p style="padding:7px;">位置: ' + address + "</p>");
// info.push('<p style="padding:7px;">位置: ' + address + "</p>");
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(30, -30),
content: info.join("") //使用默认信息窗体框样式，显示信息内容
@ -1396,11 +1416,15 @@ function initMap() {
var autoOptions = {
input: "tipinput"
};
let auto = new AMap.Autocomplete(autoOptions);
placeSearch = new AMap.PlaceSearch({
map: map
}); //构造地点查询类
AMap.event.addListener(auto, "select", select); //注册监听，当选中某条记录时会触发
// >>>>>>>>>>>>>>>>>此部分代码会导致大屏页面跳转时产生窗口抖动<<<<<<<<<<<<<<<<<<<
// 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 为绘制出来的覆盖物对象
@ -1660,7 +1684,8 @@ function echoCarMarker(item) {
position: lnglats[i],
map: map,
// icon: "https://webapi.amap.com/images/car.png" // 自定义图标
icon: "src/assets/images/smartSafeHat.png" // 自定义图标
// icon: "src/assets/images/smartSafeHat.png" // 自定义图标
icon: smartSafeHat // 自定义图标
// icon: "@/assets/images/carPosition/carIcon.png" // 自定义图标
// icon: "src/assets/images/carPosition/carIcon.png" // 自定义图标
});
@ -1716,13 +1741,14 @@ function echoPersonMarker(item) {
// position: lnglats[i],
position: lnglats[0],
map: map,
icon: personOn // 自定义图标
// icon: personOn // 自定义图标
icon: smartSafeHat2 // 自定义图标
});
marker.on("click", markerClick);
marker.emit("click", { target: marker });
}
}
let address = "未知";
let address = "<text style='color: darkred;font-weight:bolder'>未知</text>";
AMap.plugin("AMap.Geocoder", function () {
let geocoder = new AMap.Geocoder();
@ -1754,6 +1780,7 @@ function echoPersonMarker(item) {
info.push('<p style="padding:7px;">人员名称: ' + item.workerName + "</p>");
info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
info.push('<p style="padding:7px;">位置: ' + address + "</p>");
info.push('<p style="padding:7px;">经纬度: ' + item.longitude + "|" + item.latitude + "</p>");
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(10, -30),
@ -1838,7 +1865,7 @@ function echoPersonMarker(item) {
background-size: 100% 100%;
box-sizing: border-box;
padding: 25px;
width: 330px;
width: 360px;
height: 380px;
left: 40px;
top: 40px;
@ -1856,7 +1883,6 @@ function echoPersonMarker(item) {
.create-footer {
margin: 100px 0 0 50px;
}
}
.close-icon {
position: absolute;
right: 0%;
@ -1865,6 +1891,12 @@ function echoPersonMarker(item) {
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;
@ -1898,7 +1930,6 @@ function echoPersonMarker(item) {
background-size: 100% 100%;
}
}
.bigFormBox {
width: 100%;
display: flex;
@ -1989,6 +2020,7 @@ function echoPersonMarker(item) {
}
}
}
}
.fence-box {
position: relative;
.dialog-title {
@ -2188,14 +2220,20 @@ function echoPersonMarker(item) {
}
.bottom-data {
margin-top: 1%;
height: 40%;
height: 40.8%;
:deep(.h-card) {
.content {
margin-top: 4% !important;
}
}
.left-content {
height: 100%;
width: 100%;
.tab-list {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 10%;
background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
@ -2265,6 +2303,15 @@ function echoPersonMarker(item) {
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;
@ -2331,7 +2378,8 @@ function echoPersonMarker(item) {
position: relative;
:deep(.h-card) {
.content {
margin-top: 1% !important;
margin-top: 4.65% !important;
// margin-top: 0;
}
}
.hat-container {
@ -2380,10 +2428,8 @@ function echoPersonMarker(item) {
margin-top: 20px;
height: 100%;
position: relative;
:deep(.h-card) {
.content {
margin-top: 1% !important;
}
:deep(.content) {
margin-top: 4.2% !important;
}
div {
}
@ -2396,14 +2442,23 @@ function echoPersonMarker(item) {
position: relative;
:deep(.h-card) {
.content {
margin-top: 1% !important;
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: 2%;
// padding: 0 2%;
.left-content {
height: 100%;
width: 100%;