NM-gaoshuguang
/
ZC-InfoQuery
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

电子围栏前端

Browse Source
main
白美平 1 month ago
parent 877dcbd113
commit ce1140cb4a
1 changed files with 417 additions and 0 deletions
Show Stats Download Patch File Download Diff File

417
ZcInfoQueryView/src/views/ZDYH/ElectricArea.vue
Unescape Escape View File

@ -0,0 +1,417 @@
<!-- 电子围栏 -->
<template>
<div class="home-E" v-loading.fullscreen.lock="dateLoading">
<div style="width:600px;position: fixed;z-index:2;height: 900px">
<el-collapse v-model="activeNames" style="width: 600px;height: 900px" :expand-icon-position="position">
<el-collapse-item title="" name="1" style="height:900px">
<template #title>
<span style="font-size: 16px;font-weight: bold;padding-left: 10px;">内蒙古各支队设备使用情况</span>
</template>
<template #default>
<el-row style="width: 580px;padding-left:10px;padding-right:10px;height: 100px;padding-top: 10px;">
<el-col :span="11" style="background-color:#7ec4ef ">
<div style="align-content: center;color: green;width: 100%;height: 100%;">
<div style="font-size: 20px;color: greenyellow;width: 65%;height: 50%;padding-left: 35%;" >
{{equipmentTotal}}
</div>
<div style="font-size: 15px;color: gray;width: 75%;height: 30%;padding-left: 30%">电子围栏总数</div>
</div>
</el-col>
<el-col :span="2">
</el-col>
<el-col :span="11" style="background-color:#7ec4ef ">
<div style="align-content: center;color: greenyellow;width: 100%;height: 100%;">
<div style="font-size: 20px;color: greenyellow;width: 65%;height: 50%;padding-left: 35%;" >
{{watchKiloMeters}}
</div>
<div style="font-size: 15px;color: gray;width: 75%;height: 30%;padding-left: 30%">监控公里总数(KM)</div>
</div>
</el-col>
</el-row>
<el-row style="width: 580px;height: 50px;margin-top:7px ">
<el-col :span="24">
<el-input style="width:530px;height:40px;padding-left: 10px;font-size: 13px " v-model="searchForm.equipmentname" placeholder="请输入组织名称" clearable>
</el-input>
<el-button :icon="Search" style="height:40px;padding-left: 15px " @click="handleSearch"></el-button>
</el-col>
</el-row>
<el-row style="width: 600px;height:670px">
<el-col :span="24">
<div style="height:670px;width:100%;position:relative;border-width: 0">
<el-table :data="tableData" width="100%" class="table_el"
border
style="height: 100%;position: relative;"
:header-cell-style="{height:'70px'}"
:row-style="{height:'60px'}"
v-loading="fullscreenLoading">
<el-table-column type="index" label="序号" align="center" width="80px" />
<el-table-column prop="equipmentname" label="所属组织" :show-overflow-tooltip="true" width="300px" resizable align="center"/>
<el-table-column prop="equipmentid" label="设备编号" width="100px" :show-overflow-tooltip="true" resizable align="center" />
<el-table-column prop="monitormileage" label="监控公里数KM" width="120px" :show-overflow-tooltip="true" resizable align="center" />
</el-table>
</div>
</el-col>
</el-row>
</template>
</el-collapse-item>
</el-collapse>
</div>
<div id="mapDivE" :style="mapStyle"></div>
</div>
<div v-if="dialogVisible"
style="background-color: #fff;position:absolute;width: 30%;height:40%;bottom: 2%;right: 0.5%;z-index:2;">
<div>
<div style="font-size: 14px;padding: 2% 2%;display: flex;">
<div style="width: 90%;">围栏信息</div>
<div><el-button @click="dialogVisible = false" :icon="Close" circle /></div>
</div>
<el-col style="margin-left: 2%;" :span="24">
<el-descriptions :column="1" >
<el-descriptions-item label="设备编号:">{{
formLabelAlign.equipmentid }}</el-descriptions-item>
<el-descriptions-item label="所在部门:">{{
formLabelAlign.departmentname }}</el-descriptions-item>
<el-descriptions-item label="监控公里数:">{{
formLabelAlign.monitormileage }}Km</el-descriptions-item>
<el-descriptions-item label="桩号:">{{
formLabelAlign.pilenumber }}</el-descriptions-item>
<el-descriptions-item label="经度:">{{
formLabelAlign.lng }}</el-descriptions-item>
<el-descriptions-item label="纬度:">{{formLabelAlign.lat}}</el-descriptions-item>
</el-descriptions>
</el-col>
<el-row style="margin-left: 2%;">
<el-col class="pilaoDetil" :span="7">
<div style="font-size: 18px;margin-top: 5px;"> {{ formLabelAlign.highwayspeedlimit }}</div>
<div style="font-size: 14px;"> 高速限速km/h</div>
</el-col>
<el-col class="pilaoDetil" :span="7">
<div style="font-size: 18px;margin-top: 5px;"> {{ formLabelAlign.lowspeedlimit }}</div>
<div style="font-size: 14px;"> 低速限速km/h</div>
</el-col>
<el-col class="pilaoDetil" :span="7">
<div style="font-size: 18px;margin-top: 5px;"> {{ formLabelAlign.ispark==1?'可以停车':'不可以停车' }}</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script setup lang="ts">
import { Close, View,Search } from '@element-plus/icons-vue';
import {onMounted, reactive, ref, nextTick, computed} from 'vue';
import { getTotal,getTotalList,getList } from "@/util/api/ZDYH/api";
import type { FormItemProps, FormProps } from 'element-plus'
//地图
const map = ref(null);
const activeNames = ['1']; // 默认展开所有项
const equipmentTotal=ref<number>(0);//电子围栏总数
const watchKiloMeters=ref(0);//监控公里数
const fullscreenLoading=ref(false);//表格加载
const tableData=ref([]);//表格数据
//地图信息弹窗框
const mapStyle = ref('');
//地图数据
const piLaoList = ref([]);
const drawer = ref(false);
const dateLoading = ref(false);
const modalShow = ref(false);
function handleSearch(){
getTotalListInit();
}
//表格查询条件
const searchForm = reactive({
equipmentname:""
});
const dialogVisible=ref(false)
onMounted(() => {
// dateLoading.value = true;
getTotalInit();
getTotalListInit();
getListInit();
});
const labelPosition = ref<FormProps['labelPosition']>('left')
const itemLabelPosition = ref<FormItemProps['labelPosition']>('')
const formLabelAlign = reactive({
equipmentid: '',
departmentname: '',
monitormileage: '',
pilenumber: '',
lng: '',
lat: '',
highwayspeedlimit: '',
lowspeedlimit: '',
ispark: ''
})
function getTotalInit(){
let params={};
getTotal(params).then(res=>{
equipmentTotal.value=res[0].totalCount;
watchKiloMeters.value=res[0].monitormileage;
})
}
function getTotalListInit(){
fullscreenLoading.value=true;
getTotalList(searchForm).then(res=>{
tableData.value=res ;
fullscreenLoading.value=false;
})
}
function getListInit() {
let params={};
getList(params).then(res => {
piLaoList.value=res.datalist;
mapStyle.value = "width:100%;height:" + document.documentElement.clientHeight*0.97 + "px;z-index: 1;";
nextTick(() => {
initMap();
});
})
}
function initMap() {
let styleOption = Object.assign(
{},
HDmap.MapStyle.SM_WMTS_VEC_WHITE,
{ glyphs: "./resource/hdmap/fonts/{fontstack}/{range}.pbf" }
)
map.value = new HDmap.map({
container: 'mapDivE',
center: [109.80282489244144, 43.72225716089292],
zoom: 5,
minZoom: 4, //最小缩放
maxZoom: 15, //最大缩放
styleURL: styleOption
// styleURL: HDmap.MapStyle.SM_WMTS_VEC_WHITE //加载超图蓝色底图
})
map.value.map2d.on("style.load", (event) => {
addPonit();
});
map.value.map2d.on('click',(e)=>{
// 增加偏差容错
let rect = [
[e.point.x - 1, e.point.y - 1],
[e.point.x + 1, e.point.y + 1],
];
let features = map.value.map2d.queryRenderedFeatures(rect, {
layers: ['deptFill'], //你的图层名称，支持传入多个图层
});
let data = features[0].properties;
nextTick(()=>{
formLabelAlign.lat = data.lat;
formLabelAlign.lng = data.lng;
formLabelAlign.equipmentid = data.equipmentid;
formLabelAlign.departmentname = data.departmentname;
formLabelAlign.monitormileage = data.monitormileage;
formLabelAlign.pilenumber = data.pilenumber;
formLabelAlign.highwayspeedlimit = data.highwayspeedlimit;
formLabelAlign.lowspeedlimit = data.lowspeedlimit;
formLabelAlign.ispark = data.ispark;
dialogVisible.value=true;
})
let matchFill = ["match", ["get", "gid"]];
let matchPoint = ["match", ["get", "gid"]];
map.value.map2d.setZoom(10);
matchFill.push(data.pilenumber);
matchFill.push(`red`);
matchPoint.push(data.pilenumber.pilenumber + "_line1");
matchPoint.push(`red`);
matchPoint.push(data.pilenumber.pilenumber + "_line2");
matchPoint.push(`red`);
matchPoint.push(data.pilenumber.pilenumber + "_line3");
matchPoint.push(`red`);
matchPoint.push(data.pilenumber.pilenumber + "_line4");
matchPoint.push(`red`);
matchFill.push(`rgba(93,174,255,0.4)`);
matchPoint.push(`#0000CD`);
//部门区域高亮展示
map.value.map2d.setPaintProperty(
"deptFill",
"fill-color",
matchFill
);
//部门区域高亮展示
map.value.map2d.setPaintProperty(
"trackLine",
"line-color",
matchPoint
);
});
}
function addPonit() {
// 加载部门点位信息
// 标记线
// 设置线的样式
//设置中心点位
map.value.map2d.setCenter([109.80282489244144, 43.72225716089292]);
map.value.map2d.setZoom(5);
let attributes: {
paint: {
"line-color": "#409EFF", // 线段颜色
"line-width": 20, // 线段宽度
}
};
let deptFill = [];
let deptLinePoint = [];
for (let point of piLaoList.value) {
deptFill.push({
"type": "Feature",
"properties": {
"gid": point.pilenumber, //唯一标识，用于设置样式使用
"fenceid":point.fenceid,
"equipmentid":point.equipmentid,
"departmentname":point.departmentname,
"monitormileage":point.monitormileage,
"pilenumber":point.pilenumber,
"lng":point.lng,
"lat":point.lat,
"highwayspeedlimit":point.highwayspeedlimit,
"lowspeedlimit":point.lowspeedlimit,
"ispark":point.ispark,
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
//[point.beginLeftLng, point.beginLeftLat],
[parseFloat(point.beginRightLng) - 0.01, parseFloat(point.beginRightLat) - 0.01],
[parseFloat(point.beginLeftLng) - 0.01, parseFloat(point.beginLeftLat) - 0.01],
[parseFloat(point.endLeftLng) - 0.01, parseFloat(point.endLeftLat) - 0.01],
[parseFloat(point.endRightLon) - 0.01, parseFloat(point.endRightLat) - 0.01],
[parseFloat(point.beginRightLng) - 0.01, parseFloat(point.beginRightLat) - 0.01],
//[parseFloat(point.lng)-0.01, parseFloat(point.lat)-0.01],
]
]
}
});
// //放入四条线
deptLinePoint.push({
"type": "Feature",
"properties": {
"gid": point.pilenumber + "_line1", //唯一标识，用于设置样式使用
},
"geometry": {
"type": "LineString",
"coordinates": [[parseFloat(point.beginLeftLng) - 0.01, parseFloat(point.beginLeftLat) - 0.01], [parseFloat(point.beginRightLng) - 0.01, parseFloat(point.beginRightLat) - 0.01]]
}
}, {
"type": "Feature",
"properties": {
"gid": point.pilenumber + "_line2", //唯一标识，用于设置样式使用
},
"geometry": {
"type": "LineString",
"coordinates": [[parseFloat(point.endLeftLng) - 0.01, parseFloat(point.endLeftLat) - 0.01], [parseFloat(point.endRightLon) - 0.01, parseFloat(point.endRightLat) - 0.01]]
}
}, {
"type": "Feature",
"properties": {
"gid": point.pilenumber + "_line3", //唯一标识，用于设置样式使用
},
"geometry": {
"type": "LineString",
"coordinates": [[parseFloat(point.beginLeftLng) - 0.01, parseFloat(point.beginLeftLat) - 0.01], [parseFloat(point.endLeftLng) - 0.01, parseFloat(point.endLeftLat) - 0.01]]
}
}, {
"type": "Feature",
"properties": {
"gid": point.pilenumber + "_line4", //唯一标识，用于设置样式使用
},
"geometry": {
"type": "LineString",
"coordinates": [[parseFloat(point.beginRightLng) - 0.01, parseFloat(point.beginRightLat) - 0.01], [parseFloat(point.endRightLon) - 0.01, parseFloat(point.endRightLat) - 0.01]]
}
});
}
//此值作为layerName图层标识
let _lineLayerName = 'trackLine'
map.value.removeLayer(_lineLayerName)
//把图层标识添加进layerNames
//layerNames.value.push(_lineLayerName);
map.value.addFeatureLine(_lineLayerName, deptLinePoint, attributes);
//设置线的样式和颜色
map.value.map2d.setPaintProperty(
'trackLine', // 你的图层名字
"line-color",
"#0000CD"
);
map.value.map2d.setPaintProperty(
'trackLine', // 你的图层名字
"line-width",
6
);
map.value.map2d.setPaintProperty(
'trackLine', // 你的图层名字
"line-opacity",
0.8
);
//此值作为layerName图层标识
_lineLayerName = 'deptFill'
map.value.removeLayer("deptFill")
//把图层标识添加进layerNames
//layerNames.value.push(_lineLayerName);
map.value.addFeatureFill(_lineLayerName, deptFill, attributes);
//设置线的样式和颜色
map.value.map2d.setPaintProperty(
'deptFill', // 你的图层名字
"fill-outline-color",
"#0000CD"
);
}
</script>
<style scoped>
html,
body,
#mapDivE {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.el-collapse-item__wrap{
height:572px;
}
.home-E {
height: 100%;
width: 100%;
}
.pilaoDetil {
border-radius: 5%;
text-align: center;
background-color: rgb(217, 236, 255);
height: 70px;
margin: 5px 5px;
}
::v-deep .el-collapse-item__wrap {
width: 600px !important;
}
::v-deep .el-collapse-item__content {
padding-bottom:0px !important;
}
::v-deep.el-drawer__header {
padding: 0px !important;
}
</style>
Write Preview
Loading…
Cancel
Save