chengdandan
/
hebeiLargeScreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: chengdandan:c9c6fd98ef7f80058738997d072512ce1dc6c85a
Branches Tags
chengdandan:master
chengdandan:hebei-PhaseII
...
compare: chengdandan:e18f328bced7becd16a1094827e6503c2fdd466b
Branches Tags
chengdandan:hebei-PhaseII
chengdandan:master

2 Commits
c9c6fd98ef ... e18f328bce

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
Show Stats Expand all files Collapse all files

16
public/static/map_load.js
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/ 目录
};
//下面的保持不动///

6
src/api/modules/index.ts
View File

@ -106,7 +106,11 @@ 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

20
src/views/component/RealTimeImageCenter.vue
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">占地面积(m²)</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>

380
src/views/component/center.vue
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: "枢纽互通（座）",
},
]);

30
src/views/component/map.vue
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,29 +674,23 @@ 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];
for (let i = 0; i < points.length - 1; i++) {
const congestion = congestionValues[i] || 0; // 默认不拥堵
// 根据拥堵程度计算红色深浅 (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]], {