Compare commits

...

2 Commits

Author SHA1 Message Date
chengdandan e18f328bce 0626 2025-06-26 15:13:46 +08:00
chengdandan ae2a7370ed 0623 2025-06-23 09:24:51 +08:00
9 changed files with 411 additions and 41 deletions

View File

@ -4,20 +4,20 @@
var bmapcfg = {
'imgext': '.jpg', //瓦片图的后缀 ------ 根据需要修改,一般是 .png .jpg
//这里我直接用的路径是/static/bmap_offline_demo/tiles如果瓦片数量较大可改为瓦片服务的地址
// tiles_dir: "images", //普通瓦片图的地址,为空默认在 offlinemap/tiles/ 目
tiles_dir: "images", //普通瓦片图的地址,为空默认在 offlinemap/tiles/ 目
//现场
tiles_dir: "map", //普通瓦片图的地址,为空默认在 offlinemap/tiles/ 目
// tiles_path : 'http://172.16.1.162:8123/HeBeiDarkMap/',
// tiles_hybrid: 'http://172.16.1.162:8123/HeBeiDarkMap/', //卫星瓦片图的地址,为空默认在 offlinemap/tiles_hybrid/ 目
// tiles_self : 'http://172.16.1.162:8123/HeBeiDarkMap/' //自定义图层的地址,为空默认在 offlinemap/tiles_self/ 目录
// tiles_dir: "map", //普通瓦片图的地址,为空默认在 offlinemap/tiles/ 目
tiles_path : 'http://172.16.1.162:8123/HeBeiDarkMap/',
tiles_hybrid: 'http://172.16.1.162:8123/HeBeiDarkMap/', //卫星瓦片图的地址,为空默认在 offlinemap/tiles_hybrid/ 目
tiles_self : 'http://172.16.1.162:8123/HeBeiDarkMap/' //自定义图层的地址,为空默认在 offlinemap/tiles_self/ 目录
// tiles_path: "http://111.229.30.246:4008/HeBeiDarkMap/",
// tiles_hybrid: "http://111.229.30.246:4008/HeBeiDarkMap/", //卫星瓦片图的地址,为空默认在 offlinemap/tiles_hybrid/ 目
// tiles_self: "http://111.229.30.246:4008/HeBeiDarkMap/", //自定义图层的地址,为空默认在 offlinemap/tiles_self/ 目录
//现场
tiles_path: "http://13.14.64.150:3638/",
tiles_hybrid: "http://13.14.64.150:3638/", //卫星瓦片图的地址,为空默认在 offlinemap/tiles_hybrid/ 目
tiles_self: "http://13.14.64.150:3638/", //自定义图层的地址,为空默认在 offlinemap/tiles_self/ 目录
// tiles_path: "http://13.14.64.150:3638/",
// tiles_hybrid: "http://13.14.64.150:3638/", //卫星瓦片图的地址,为空默认在 offlinemap/tiles_hybrid/ 目
// tiles_self: "http://13.14.64.150:3638/", //自定义图层的地址,为空默认在 offlinemap/tiles_self/ 目录
};
//下面的保持不动///

View File

@ -106,6 +106,10 @@ export const getVideoDeviceList = (param: any = {}) => {
export const videoStream=(param:any={})=>{
return GET('/video/stream',param)
}
//获取拥堵路段
export const getListCurrentMonth = (param: any = {}) => {
return GET('/device/mevent/listCurrentMonth', param);
}
// 今日各监测点车流情况
export const getPointTraffic=(param:any={})=>{
return GET('/device/trafficFlow/pointTraffic',param)

BIN
src/assets/img/fwq2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

BIN
src/assets/img/ql.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
src/assets/img/sfz.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
src/assets/img/snht.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

View File

@ -16,6 +16,13 @@ const areaData = ref({
unit: "m²",
});
const props = defineProps({
popUpContent: {
type: Object,
default: () => ({
})
}
});
//
const parkingData = ref([
{ label: "充电车位", value: 1888 },
@ -113,6 +120,7 @@ const togglePoint = async (point: any) => {
}
};
onMounted(() => {
console.log(props.popUpContent, 'ddddddddddddd')
const endTime = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');
getVideoDeviceList({ endTime: endTime, currentPage: 1, pageSize: 2 }).then((res) => { //
console.log(res, 'rrrrrrrrrrrrrrrrrrrrrrrrrsssssssssssss')
@ -136,9 +144,9 @@ onMounted(() => {
<!-- 添加标题 -->
<div class="title-header">
<div class="header-icon">
<div class="camera-square-small" title="服务区基本信息"></div>
<div class="camera-square-small" title= "{{props.popUpContent.type}} 基本信息"></div>
</div>
<span>服务区基本信息</span>
<span>{{props.popUpContent.type}}基本信息</span>
</div>
<!-- 状态内容 -->
<div class="status-content">
@ -148,19 +156,19 @@ onMounted(() => {
<div class="corner-decoration bottom-right"></div>
<div class="status-info">
<div class="info-left">
<img :src="fwqImage" alt="服务区" class="fwq-image" />
<img :src=" props.popUpContent.fwqImage" alt="服务区" class="fwq-image" />
</div>
<div class="info-center">
<span class="info-label">占地面积()</span>
<span class="info-label">{{ props.popUpContent.areaData.name1 }}</span>
</div>
<div class="info-right">
<span class="info-value">{{ areaData.value }}</span>
<span class="info-value">{{ props.popUpContent.areaData.value }}</span>
</div>
</div>
<!-- 添加车位信息展示 -->
<div class="parking-info">
<div v-for="(item, index) in parkingData" :key="index" class="parking-item">
<div v-for="(item, index) in props.popUpContent.llist" :key="index" class="parking-item">
<div class="parking-label">{{ item.label }}</div>
<div class="parking-value">{{ item.value }}</div>
</div>

View File

@ -4,8 +4,8 @@
<div v-for="(stat, index) in statistics" :key="index" class="stat-card" style="position: relative;">
<div
class="box"
@mouseenter="stat.label === '服务区' && (showDropdown = true)"
@mouseleave="stat.label === '服务区' && (showDropdown = false)"
@mouseenter="stat.label=='服务区'?showDropdown = true:stat.label==='收费站'?showDropdown1 = true:stat.label==='桥梁(座)'?showDropdown2 = true:stat.label==='枢纽互通(座)'?showDropdown3 = true:''"
@mouseleave="stat.label=='服务区'?showDropdown = false:stat.label==='收费站'?showDropdown1 = false:stat.label==='桥梁(座)'?showDropdown2 = false:stat.label==='枢纽互通(座)'?showDropdown3 = false:''"
style="position: relative;"
>
<div class="icon-wrapper">
@ -33,7 +33,61 @@
:key="area"
@click="selectServiceArea(area)"
>
{{ area }}
{{ area.name }}
</div>
</div>
</template>
<!-- 收费站 -->
<template v-if="stat.label === '收费站'">
<div
v-show="showDropdown1"
class="dropdown large-dropdown"
@mouseenter="showDropdown1 = true"
@mouseleave="showDropdown1 = false"
>
<div
class="dropdown-item"
v-for="area in tollStationList"
:key="area"
@click="selectServiceArea(area)"
>
{{ area.name }}
</div>
</div>
</template>
<!-- 桥梁 -->
<template v-if="stat.label === '桥梁(座)'">
<div
v-show="showDropdown2"
class="dropdown large-dropdown"
@mouseenter="showDropdown2 = true"
@mouseleave="showDropdown2 = false"
>
<div
class="dropdown-item"
v-for="area in bridgeList"
:key="area"
@click="selectServiceArea(area)"
>
{{ area.name }}
</div>
</div>
</template>
<!-- 枢纽互通 -->
<template v-if="stat.label === '枢纽互通(座)'">
<div
v-show="showDropdown3"
class="dropdown large-dropdown"
@mouseenter="showDropdown3 = true"
@mouseleave="showDropdown3 = false"
>
<div
class="dropdown-item"
v-for="area in hubIntercommunicationList"
:key="area"
@click="selectServiceArea(area)"
>
{{ area.name }}
</div>
</div>
</template>
@ -60,7 +114,7 @@
<div class="close-btn" @click="closeDialog">×</div>
</div>
<div class="map-con">
<RealTimeImageCenter />
<RealTimeImageCenter :popUpContent="popUpContent"/>
</div>
</div>
<div class="map-container bg-header bg-header-one" style="width: 1800px;" v-if="showDeviceInfo">
@ -92,6 +146,7 @@
import { ref, nextTick } from "vue";
import { onMounted } from 'vue';
import fee from "@/assets/img/fee.png";
import fwq from "@/assets/img/fwq2.png";
import km from "@/assets/img/km.png";
import toll from "@/assets/img/toll.png";
import RealTimeImageCenter from "./RealTimeImageCenter.vue";
@ -102,6 +157,10 @@ import { getDeviceList } from "@/api/modules/index";
import DeviceInfoComponentTwo from "./DeviceInfoComponentTwo.vue";
import Map from "./map.vue"
import { emitter } from '@/utils/eventBus';
import fwqImage from "@/assets/img/fwq.png";
import ql from "@/assets/img/ql.png";
import sfz from "@/assets/img/sfz.png";
import snht from "@/assets/img/snht.png";
const showServiceArea = ref(false);
const showMap = ref(true);
const showDeviceInfo = ref(false);
@ -110,13 +169,316 @@ const closeDialog = () => {
showServiceArea.value = false;
};
const showDropdown = ref(false);
const serviceAreas = ["南皮服务区", "东光服务区"];
const selectedServiceArea = ref("南皮服务区");
const showDropdown1 = ref(false);
const showDropdown2 = ref(false);
const showDropdown3 = ref(false);
//
const serviceAreas =[{
name:"南皮服务区",
type:'服务区',
fwqImage:fwqImage,
areaData:{
value: 6000,
unit: "m²",
name1:'占地面积(m²)'
},
llist:[
{ label: "充电车位", value: 1888 },
{ label: "大型车位", value: 60 },
{ label: "小型车位", value: 200 },
{ label: "危险品车位", value: 20 },
]},{
name:"东光服务区",
type:'服务区',
fwqImage:fwqImage,
areaData:{
value: 6000,
unit: "m²",
name1:'占地面积(m²)'
},
llist:[
{ label: "充电车位", value: 1888 },
{ label: "大型车位", value: 60 },
{ label: "小型车位", value: 200 },
{ label: "危险品车位", value: 20 }]
}]
const popUpContent= ref([])
const selectedServiceArea = ref({});
//
// const tollStationList = ["", "", "", "", ""];
const tollStationList = [{
name:"连镇",
type:'收费站',
fwqImage:sfz,
areaData:{
value: 1200,
unit: "m²",
name1:'建筑面积(m²)'
},
llist:[
{ label: "入口ETC车道", value: 2 },
{ label: "出口ETC车道", value: 2 },
{ label: "入口混合车道", value: 2 },
{ label: "出口混合车道", value: 2 },
]},{
name:"找王",
type:'收费站',
fwqImage:sfz,
areaData:{
value: 1200,
unit: "m²",
name1:'建筑面积(m²)'
},
llist:[
{ label: "入口ETC车道", value: 2 },
{ label: "出口ETC车道", value: 2 },
{ label: "入口混合车道", value: 2 },
{ label: "出口混合车道", value: 2 },
]
},{
name:"寨子",
type:'收费站',
fwqImage:sfz,
areaData:{
value: 1200,
unit: "m²",
name1:'建筑面积(m²)'
},
llist:[
{ label: "入口ETC车道", value: 2 },
{ label: "出口ETC车道", value: 2 },
{ label: "入口混合车道", value: 2 },
{ label: "出口混合车道", value: 2 },
]
},{
name:"盐山",
type:'收费站',
fwqImage:sfz,
areaData:{
value: 1200,
unit: "m²",
name1:'建筑面积(m²)'
},
llist:[
{ label: "入口ETC车道", value: 1 },
{ label: "出口ETC车道", value: 1 },
{ label: "入口混合车道", value: 2 },
{ label: "出口混合车道", value: 2 },
]
},{
name:"盐山东",
type:'收费站',
fwqImage:sfz,
areaData:{
value: 1200,
unit: "m²",
name1:'建筑面积(m²)'
},
llist:[
{ label: "入口ETC车道", value: 2 },
{ label: "出口ETC车道", value: 2 },
{ label: "入口混合车道", value: 2 },
{ label: "出口混合车道", value: 2 },
]
}];
const tollStation = ref("连镇");
//
// const bridgeList = ["", "", "", "", "", "", ""];
const bridgeList = [{
name:"南运河特大桥",
type:'桥梁(座)',
fwqImage:ql,
areaData:{
value: 1003.838,
unit: "m²",
name1:'长度(m)(沧州境内)'
},
llist:[
{ label: "中心桩号", value: 'K61+407' },
]
},{
name:"秦庄村大桥",
type:'桥梁(座)',
fwqImage:ql,
areaData:{
value:577.543,
unit: "m²",
name1:'长度(m)'
},
llist:[
{ label: "中心桩号", value: 'K62+401' },
]
},{
name:"宣惠河大桥",
type:'桥梁(座)',
fwqImage:ql,
areaData:{
value:702,
unit: "m²",
name1:'长度(m)'
},
llist:[
{ label: "中心桩号", value: 'K65+716' },
]
},{
name:"沙河大桥",
type:'桥梁(座)',
fwqImage:ql,
areaData:{
value:131,
unit: "m²",
name1:'长度(m)'
},
llist:[
{ label: "中心桩号", value: 'K76+079' },
]
},{
name:"龙王河大桥",
type:'桥梁(座)',
fwqImage:ql,
areaData:{
value:156,
unit: "m²",
name1:'长度(m)'
},
llist:[
{ label: "中心桩号", value: 'K90+280' },
]
},{
name:"大单沟大桥",
type:'桥梁(座)',
fwqImage:ql,
areaData:{
value:127,
unit: "m²",
name1:'长度(m)'
},
llist:[
{ label: "中心桩号", value: 'K96+099' },
]
},{
name:"大商平底渠大桥",
type:'桥梁(座)',
fwqImage:ql,
areaData:{
value:106,
unit: "m²",
name1:'长度(m)'
},
llist:[
{ label: "中心桩号", value: 'K114+265' },
]
}];
const bridge1 = ref("南运河特大桥");
//
// const hubIntercommunicationList = ["", "", "", "", "", "", ""];
const hubIntercommunicationList = [{
name:"连镇互通",
type:'枢纽互通',
fwqImage:snht,
areaData:{
value:'K64+776',
unit: "m²",
name1:'桩号'
},
llist:[
{ label: "被交路名称", value: 'G105(京澳线)' },
{ label: "被交路等级", value: '一级公路' },
]
},{
name:"大屯枢纽",
type:'枢纽互通',
fwqImage:snht,
areaData:{
value:'K69+454',
unit: "m²",
name1:'桩号'
},
llist:[
{ label: "被交路名称", value: '京台高速' },
{ label: "被交路等级", value: '高速公路' },
]
},{
name:"找王互通",
type:'枢纽互通',
fwqImage:snht,
areaData:{
value:'K80+359',
unit: "m²",
name1:'桩号'
},
llist:[
{ label: "被交路名称", value: 'S337(辛平线)' },
{ label: "被交路等级", value: '一级公路' },
]
},{
name:"寨子互通",
type:'枢纽互通',
fwqImage:snht,
areaData:{
value:'K80+359',
unit: "m²",
name1:'桩号'
},
llist:[
{ label: "被交路名称", value: 'G104(京平线)' },
{ label: "被交路等级", value: '二级公路' },
]
},{
name:"小庄枢纽",
type:'枢纽互通',
fwqImage:snht,
areaData:{
value:'K119+655',
unit: "m²",
name1:'桩号'
},
llist:[
{ label: "被交路名称", value: '京沪高速' },
{ label: "被交路等级", value: '高速公路' },
]
},{
name:"盐山互通",
type:'枢纽互通',
fwqImage:snht,
areaData:{
value:'S216(吕千线)',
unit: "m²",
name1:'桩号'
},
llist:[
{ label: "被交路名称", value: 'S216(吕千线)' },
{ label: "被交路等级", value: '一级公路' },
]
},{
name:"盐山东互通",
type:'枢纽互通',
fwqImage:snht,
areaData:{
value:'K139+358',
unit: "m²",
name1:'桩号'
},
llist:[
{ label: "被交路名称", value: 'G205(山深线)' },
{ label: "被交路等级", value: '一级公路' },
]
}];
const hubIntercommunication = ref("连镇互通");
function selectServiceArea(area) {
selectedServiceArea.value = area;
console.log(area, 'tttttttttt')
selectedServiceArea.value = area.name;
popUpContent.value = area
tollStation.value = area;
bridge1.value = area;
hubIntercommunication.value = area;
showServiceArea.value = true;
showDropdown.value = false;
showDropdown1.value = false;
showDropdown2.value = false;
showDropdown3.value = false;
}
//
const statistics = ref([
@ -131,7 +493,7 @@ const statistics = ref([
label: "收费站",
},
{
image: fee,
image: fwq,
value: "2",
label: "服务区",
},
@ -143,7 +505,7 @@ const statistics = ref([
{
image: hub,
value: "7",
label: "隧道互通(座)",
label: "枢纽互通(座)",
},
]);

View File

@ -12,7 +12,7 @@
<script setup>
import { ref, nextTick } from "vue";
import { onMounted } from "vue";
import { getDeviceList } from "@/api/modules/index";
import { getDeviceList,getListCurrentMonth } from "@/api/modules/index";
import { emitter } from "@/utils/eventBus";
const emit = defineEmits(["show-device-info"]);
const markerMap = ref({
@ -125,6 +125,8 @@ onMounted(async () => {
map.addEventListener("click", (e) => {
console.log("点击的坐标:", e.point.lng, e.point.lat);
});
const rest = await getListCurrentMonth();
console.log("rest",rest)
//
var points1 = [
new BMap.Point(115.816121923,37.726502586),
@ -672,20 +674,14 @@ new BMap.Point(117.625417017,38.185147089),
map.addOverlay(polyline);
var points = [
new BMap.Point(116.727201337,37.868629410),
new BMap.Point(116.730039983,37.868942756),
new BMap.Point(116.732591170,37.869227615),
new BMap.Point(116.735034561,37.869512473),
new BMap.Point(116.737495918,37.869825816),
new BMap.Point(116.740226767,37.870224613),
new BMap.Point(116.742382700,37.870580681),
new BMap.Point(116.744035582,37.870908261),
new BMap.Point(116.746622702,37.871435235),
new BMap.Point(116.748778636,37.872019176),
new BMap.Point(116.750970501,37.872631596),
new BMap.Point(116.753036604,37.873244010),
new BMap.Point(116.754976944,37.873970356),
new BMap.Point(116.755551859,37.874141260),
new BMap.Point(116.476017151,37.820685846),
new BMap.Point(116.478927660,37.820571827),
new BMap.Point(116.481622577,37.820486313),
new BMap.Point(116.483059866,37.820486313),
new BMap.Point(116.487946648,37.820486313),
new BMap.Point(116.491791395,37.820600332),
new BMap.Point(116.496175126,37.821027903),
];
const congestionValues = [0.3, 0.8];
@ -694,7 +690,7 @@ for (let i = 0; i < points.length - 1; i++) {
// (0-255)
const red = Math.floor(100 + 155 * congestion); // (100,0,0)(255,0,0)
const color = `rgb(${red}, 0, 0)`;
const color = `rgb(255, 0, 0)`;
// 线
const segment = new BMap.Polyline([points[i], points[i + 1]], {