Skip to content

H
holo-web
Commit 1e0722bb authored by ninglx's avatar ninglx
Browse files
Options

大屏/系统修改统一提交 静态文件压缩 环境变量配置 baseUrl配置

parent fc2e75a4
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2003 additions and 1725 deletions
wj-data-vision/public/DATA-蒙自.js 0 → 100644
View file @ 1e0722bb
// 组群场景
const situation_intersectionGroups = {
cameras: [
{
cameraName: "人民路与湘江中路",
wkt: "112.96371926745707,28.191912523952723",
isShow: true,
online: false,
videoUrl: "/cdn/video/lkqz_1.mp4",
offset: [0, 120],
},
{
cameraName: "西湖路与湘江中路",
isShow: true,
online: false,
videoUrl: "/cdn/video/lkqz_2.mp4",
offset: [0, 120],
wkt: '112.96373346356279,28.18825269244458'
},
{
cameraName: "劳动西路与湘江中路",
isShow: true,
online: false,
videoUrl: "/cdn/video/lkqz_3.mp4",
offset: [0, 120],
wkt: '112.96303956763319,28.182904793928614'
}
],
};
// 可移动基站场景
const situation_mobileBaseStation = {
mobileBaseStationLocations: [
{ longitude: 112.9632513079888, latitude: 28.1932473510918 },
],
videos: [
"/cdn/video/kydjz_1.mp4",
"/cdn/video/kydjz_2.mp4",
"/cdn/video/kydjz_3.mp4",
"/cdn/video/kydjz_4.mp4",
],
};
// 事故场景
const situation_accident = {
videos: [
"/cdn/video/sgcj_3.mp4",
"/cdn/video/sgcj_5.mp4",
"/cdn/video/sgcj_6.mp4"
],
// 地图中高亮事故车辆及其详情弹窗
accidentVehicles: [
{
id: "441866",
picLicense: "苏A***59",
behavior: "未保持安全车距",
},
{
id: "441795",
picLicense: "苏A***79",
behavior: "急减速",
},
],
totalDuration: 155, // 事故时长 （单位：秒
// 事件辅助定责
eventDetail: {
事故时间: "2023-12-23 00:16:27",
事故地点: "天马路与文萃路交叉口",
事故描述:
"疑似多车事故: 苏A***59与苏A***79由南进口驶入路口, 疑似发生追尾事故。",
定责建议:
"苏A***59在正常行驶的道路上停车, 导致追尾事故负主要责任, 苏A***79未保持安全车距负次要责任。",
辅助信息: "苏A***79 疑似追尾 苏A***59",
},
// 交通影响报告
affectDetail:{
locationVal: "路口",// 涉事地点：路口/路段/高架桥
isMultiVal: "多车", // 涉事车辆：单车/多车
timeTypeVal: "夜间", // 涉事时段：早高峰/平峰/晚高峰/夜间
haveWalkerVal: "无", // 涉事行人：有/无
haveNoVehicleVal: "无", // 涉事非机动车：有/无
orderOfSeverity: 5, // 影响程度：1~10
}
};
// 危险驾驶场景
const situation_dangerousDriving = {
videos:[
"/cdn/video/wxjs_3.mp4",
"/cdn/video/wxjs_5.mp4",
],
// 参与危险驾驶的车辆 （在地图中高亮
dangerVehicles: [
{
id: "224929",
picLicense: "苏A***95",
behavior: "S型驾驶",
},
],
warnings: [
{
type: 1, // type 1:S型驾驶 2:急加速 3:轨迹异常
picLicense1: "苏A***49",
timeBetween: "2023.12.23 00:04:38 ~ 00:05:13",
duration: "45s",
location: "天马路与文萃路交叉口路口区域",
},
{
type: 2,
picLicense1: "苏A***24",
timeBetween: "2023.12.23 00:12:25 ~ 00:12:43",
duration: "18s",
location: "天马路与文萃路交叉口路口区域",
},
{
type: 3,
picLicense1: "苏A***43",
timeBetween: "2023.12.23 00:23:57 ~ 00:24:13",
duration: "32s",
location: "天马路与文萃路交叉口路口区域",
},
],
trackRecord: [
{ time: "00:04:38", location: "路口内部", behavior: "S型驾驶" },
{ time: "00:04:52", location: "北出口左侧车道1", behavior: "S型驾驶" },
{ time: "00:05:03", location: "北出口左侧车道2", behavior: "S型驾驶" },
],
dangerDrivingBehaviors: [
{
time: "2023-12-12",
startTime: "19:54:26",
endTime: "19:54:34",
behavior: "轨迹异常",
},
{
time: "2023-12-23",
startTime: "00:04:38",
endTime: "00:05:13",
behavior: "S形驾驶",
},
{
time: "2023-12-24",
startTime: "10:56:33",
endTime: "10:56:40",
behavior: "急加速",
},
],
};
// 相位空放场景
const situation_phaseAirPlay = {
videos:["/cdn/video/xwkf_3.mp4"],
currentSchemalCross:'13NI00B5RM0',
// 相位监测
monitor:{
timeBetween: "2023.4.9 17:21:09 ~ 17:27:09",
ifPhase: true,
},
// 当前方案
scheme: [
{ phase: "A", type: "机动车", direction: "北左", sat: "100%", time: 0 },
{ phase: "A", type: "机动车", direction: "东右", sat: "90%", time: 2 },
{ phase: "B", type: "机动车", direction: "北直", sat: "100%", time: 0 },
{ phase: "B", type: "机动车", direction: "北左", sat: "51%", time: 19 },
{ phase: "B", type: "机动车", direction: "东右", sat: "5%", time: 35 },
{ phase: "C", type: "机动车", direction: "北直", sat: "90%", time: 13 },
{ phase: "C", type: "机动车", direction: "北直", sat: "78%", time: 30 },
{ phase: "C", type: "行人", direction: "东口", sat: "5%", time: 75 },
{ phase: "D", type: "机动车", direction: "东左", sat: "28%", time: 23 },
{ phase: "D", type: "行人", direction: "北口", sat: "80%", time: 7 },
],
};
// 慢行交通场景
const situation_slowTraffic = {
videos:["/cdn/video/mxjt_1.mp4"],
// 参与慢行交通的id （在地图上高亮
slowIds: [
"457802",
"457803",
"457713",
"457727",
"457694",
"457678",
"457735",
"457967",
"458094",
"458240",
"4588458",
"457926",
"458079",
],
warnings: [
{
type: 2, // type 1:非机动车 2:行人
behavior: "不走斑马线、斜穿路口",
timeBetween: "2023-12-23 00:41:39 ~ 00:43:23",
duration: "40s",
location: "天马路与文萃路交叉口",
},
{
type: 1,
behavior: "斜穿路口",
timeBetween: "2023-12-23 08:16:27 ~ 08:16:35",
duration: "8s",
location: "天马路与文萃路交叉口",
},
{
type: 2,
behavior: "不走斑马线",
timeBetween: "2023-12-22 00:05:17 ~ 00:05:31",
duration: "14s",
location: "天马路与文萃路交叉口",
},
],
trackRecord: [
{
time: "2023-12-23 00:50:04 ~ 00:52:30",
location: "天马路与文萃路交叉口",
behavior: "加速跑过路口",
},
{
time: "2023-12-23 00:55:09 ~ 00:57:00",
location: "天马路与文萃路交叉口",
behavior: "不走斑马线",
},
{
time: "2023-12-23 00:57:11 ~ 00:58:39",
location: "天马路与文萃路交叉口",
behavior: "不走斑马线",
},
{
time: "2023-12-23 00:59:32 ~ 00:59:42",
location: "天马路与文萃路交叉口",
behavior: "斜穿路口",
},
],
dangerDrivingBehaviors: [
{
time: "2023-12-23 00:12:16 ~ 00:16:00",
location: "天马路与文萃路交叉口",
behavior: "斜穿路口",
},
{
time: "2023-12-23 00:14:17 ~ 00:15:02",
location: "天马路与文萃路交叉口",
behavior: "横穿路口",
},
{
time: "2023-12-23 00:23:52 ~ 00:24:05",
location: "天马路与文萃路交叉口",
behavior: "横穿路口",
},
{
time: "2023-12-23 00:28:15 ~ 00:29:58",
location: "天马路与文萃路交叉口",
behavior: "斜穿路口",
},
],
};
// 直左冲突场景
const situation_straightLeftConflict = {
videos:[
"/cdn/video/zzct_2.mp4",
],
// 相位监测
monitor:{
timeBetween: "2023.4.9 17:21:09 ~ 17:27:09",
ifConflict: true,
duration: 28,
reason: "南进口直行车辆未清空，导致北进口左转车辆与南进口直行车辆冲突",
direction: "北口左转与南口直行",
},
// 指标详情
indexDetail: [
{ type: "冲突延误", A: "0秒", B: "28秒", C: "0秒", D: "0秒" },
{ type: "绿灯启亮未清空车辆", A: "0辆", B: "23辆", C: "5辆", D: "0辆" },
{ type: "绿灯结束排队长度", A: "112米", B: "0米", C: "0米", D: "10米" },
],
// 地图冲突点位及其详情
conflictPoints: [
{
longitude: 112.96374401766087,
latitude: 28.191920791425886,
type: "机动车冲突",
detail: "北口左转与南口直行冲突",
},
{
longitude: 112.96373328882487,
latitude: 28.191949159647095,
type: "机动车冲突",
detail: "北口左转与南口直行冲突",
},
],
currentSchemalCross: '13NI00B5RM0',
};
// 全域感知场景
const situation_drones = {
videos:[
"/cdn/video/qygz_1.mp4",
"/cdn/video/qygz_2.mp4",
"/cdn/video/qygz_3.mp4",
"/cdn/video/qygz_4.mp4",
]
}
wj-data-vision/public/DATA-长沙.js 0 → 100644
View file @ 1e0722bb
// 组群场景
const situation_intersectionGroups = {
cameras: [
{
cameraName: "人民路与湘江中路",
wkt: "112.96371926745707,28.191912523952723",
isShow: true,
online: false,
videoUrl: "/cdn/video/lkqz_1.mp4",
offset: [0, 120],
},
{
cameraName: "西湖路与湘江中路",
isShow: true,
online: false,
videoUrl: "/cdn/video/lkqz_2.mp4",
offset: [0, 120],
wkt: '112.96373346356279,28.18825269244458'
},
{
cameraName: "劳动西路与湘江中路",
isShow: true,
online: false,
videoUrl: "/cdn/video/lkqz_3.mp4",
offset: [0, 120],
wkt: '112.96303956763319,28.182904793928614'
}
],
};
// 可移动基站场景
const situation_mobileBaseStation = {
mobileBaseStationLocations: [
{ longitude: 112.9632513079888, latitude: 28.1932473510918 },
],
videos: [
"/cdn/video/kydjz_1.mp4",
"/cdn/video/kydjz_2.mp4",
"/cdn/video/kydjz_3.mp4",
"/cdn/video/kydjz_4.mp4",
],
};
// 事故场景
const situation_accident = {
videos: [
"/cdn/video/sgcj_3.mp4",
"/cdn/video/sgcj_5.mp4",
"/cdn/video/sgcj_6.mp4"
],
// 地图中高亮事故车辆及其详情弹窗
accidentVehicles: [
{
id: "441866",
picLicense: "湘A***7",
behavior: "未保持安全车距",
},
{
id: "441795",
picLicense: "湘A****9",
behavior: "急减速",
},
],
totalDuration: 142, // 事故时长 （单位：秒
// 事件辅助定责
eventDetail: {
事故时间: "2023-04-10 00:47:37",
事故地点: "湘江中路与劳动西路交叉口内",
事故描述:
"疑似多车事故：湘A****9与湘A***7由南进口驶入路口，疑似发生追尾事故。",
定责建议:
"湘A***9在正常行驶的道路上停车, 导致追尾事故负主要责任, 湘A***7未保持安全车距负次要责任。",
辅助信息: "湘A***7 疑似追尾 湘A***9",
},
// 交通影响报告
affectDetail:{
locationVal: "路口",// 涉事地点：路口/路段/高架桥
isMultiVal: "多车", // 涉事车辆：单车/多车
timeTypeVal: "夜间", // 涉事时段：早高峰/平峰/晚高峰/夜间
haveWalkerVal: "无", // 涉事行人：有/无
haveNoVehicleVal: "无", // 涉事非机动车：有/无
orderOfSeverity: 5, // 影响程度：1~10
}
};
// 危险驾驶场景
const situation_dangerousDriving = {
videos:[
"/cdn/video/wxjs_3.mp4",
"/cdn/video/wxjs_5.mp4",
],
// 参与危险驾驶的车辆 （在地图中高亮
dangerVehicles: [
{
id: "224929",
picLicense: "湘A****5",
behavior: "S型驾驶",
},
],
warnings: [
{
type: 1,
picLicense1: '鄂A****8',
timeBetween: '2023.04.09 01:28:22 ~ 01:28:35',
duration: '13s',
location: '湘江中路与劳动西路交叉口路口区域'
},
{
type: 2,
picLicense1: '湘B****8',
timeBetween: '2023.04.09 00:45:36 ~ 00:45:41',
duration: '6s',
location: '湘江中路与劳动西路交叉口路口区域'
},
{
type: 3,
picLicense1: '湘A****1',
timeBetween: '2023.04.09 00:23:57 ~ 00:24:13',
duration: '16s',
location: '湘江中路与劳动西路交叉口路口区域'
},
],
trackRecord: [
{time: '01:28:22', location: '路口内部', behavior: 'S型驾驶'},
{time: '01:28:25', location: '北出口左侧车道1', behavior: 'S型驾驶'},
{time: '01:28:28', location: '北出口左侧车道2', behavior: 'S型驾驶'},
],
dangerDrivingBehaviors: [
{time: '2023-04-08', startTime: '19:54:26', endTime: '19:54:34', behavior: '轨迹异常'},
{time: '2023-03-22', startTime: '21:45:23', endTime: '21:45:43', behavior: 'S形驾驶'},
{time: '2023-03-21', startTime: '10:56:33', endTime: '10:56:40', behavior: '急加速'},
],
};
// 相位空放场景
const situation_phaseAirPlay = {
videos:["/cdn/video/xwkf_3.mp4"],
currentSchemalCross:'13NI00B5RM0',
// 相位监测
monitor:{
timeBetween: "2023.4.9 17:21:09 ~ 17:27:09",
ifPhase: true,
},
// 当前方案
scheme: [
{ phase: "A", type: "机动车", direction: "北左", sat: "100%", time: 0 },
{ phase: "A", type: "机动车", direction: "东右", sat: "90%", time: 2 },
{ phase: "B", type: "机动车", direction: "北直", sat: "100%", time: 0 },
{ phase: "B", type: "机动车", direction: "北左", sat: "51%", time: 19 },
{ phase: "B", type: "机动车", direction: "东右", sat: "5%", time: 35 },
{ phase: "C", type: "机动车", direction: "北直", sat: "90%", time: 13 },
{ phase: "C", type: "机动车", direction: "北直", sat: "78%", time: 30 },
{ phase: "C", type: "行人", direction: "东口", sat: "5%", time: 75 },
{ phase: "D", type: "机动车", direction: "东左", sat: "28%", time: 23 },
{ phase: "D", type: "行人", direction: "北口", sat: "80%", time: 7 },
],
};
// 慢行交通场景
const situation_slowTraffic = {
videos:["/cdn/video/mxjt_1.mp4"],
// 参与慢行交通的id （在地图上高亮
slowIds: [
"457802",
"457803",
"457713",
"457727",
"457694",
"457678",
"457735",
"457967",
"458094",
"458240",
"4588458",
"457926",
"458079",
],
warnings: [
{
type: 2,
behavior: '不走斑马线、斜穿路口',
timeBetween: '2023-04-10 01:22:12 ~ 01:24:28',
duration: '40s',
location: '湘江中路与劳动西路交叉口'
},
{
type: 1,
behavior: '斜穿路口',
timeBetween: '2023-04-10 10:22:12 ~ 10:22:20',
duration: '8s',
location: '湘江中路与人民西路交叉口'
},
{
type: 2,
behavior: '不走斑马线',
timeBetween: '2023-04-09 12:22:12 ~ 12:22:26',
duration: '14s',
location: '湘江中路与人民西路交叉口'
},
],
trackRecord: [
{time: '2023-04-01 10:10:23 ~ 10:11:30', location: '湘江中路与人民西路', behavior: '加速跑过路口'},
{time: '2023-04-04 20:11:23 ~ 20:12:30', location: '湘江中路与西湖路', behavior: '不走斑马线'},
{time: '2023-04-05 12:11:23 ~ 12:12:30', location: '湘江中路与劳动西路', behavior: '不走斑马线'},
{time: '2023-04-08 14:11:23 ~ 14:15:30', location: '湘江中路与西湖路', behavior: '斜穿路口'},
],
dangerDrivingBehaviors: [
{time: '2023-04-01 14:11:23 ~ 14:15:30', location: '湘江中路与西湖路', behavior: '斜穿路口'},
{time: '2023-04-03 15:11:23 ~ 15:18:30', location: '湘江中路与人民西路', behavior: '横穿路口'},
{time: '2023-04-04 14:11:23 ~ 14:15:30', location: '湘江中路与劳动西路', behavior: '横穿路口'},
{time: '2023-04-07 13:11:23 ~ 13:15:30', location: '湘江中路与人民西路', behavior: '斜穿路口'},
],
};
// 直左冲突场景
const situation_straightLeftConflict = {
videos:[
"/cdn/video/zzct_2.mp4",
],
// 相位监测
monitor:{
timeBetween: "2023.4.9 17:21:09 ~ 17:27:09",
ifConflict: true,
duration: 28,
reason: "南进口直行车辆未清空，导致北进口左转车辆与南进口直行车辆冲突",
direction: "北口左转与南口直行",
},
// 指标详情
indexDetail: [
{ type: "冲突延误", A: "0秒", B: "28秒", C: "0秒", D: "0秒" },
{ type: "绿灯启亮未清空车辆", A: "0辆", B: "23辆", C: "5辆", D: "0辆" },
{ type: "绿灯结束排队长度", A: "112米", B: "0米", C: "0米", D: "10米" },
],
// 地图冲突点位及其详情
conflictPoints: [
{
longitude: 112.96374401766087,
latitude: 28.191920791425886,
type: "机动车冲突",
detail: "北口左转与南口直行冲突",
},
{
longitude: 112.96373328882487,
latitude: 28.191949159647095,
type: "机动车冲突",
detail: "北口左转与南口直行冲突",
},
],
currentSchemalCross: '13NI00B5RM0',
};
// 全域感知场景
const situation_drones = {
videos:[
"/cdn/video/qygz_1.mp4",
"/cdn/video/qygz_2.mp4",
"/cdn/video/qygz_3.mp4",
"/cdn/video/qygz_4.mp4",
]
}
wj-data-vision/public/DATA.js
View file @ 1e0722bb
// 组群场景
const situation_intersectionGroups = {
cameras: [
// {
// cameraName: "111111",
// wkt: "112.96371754974206,28.191567003656203",
// isShow: true, // 默认展示
// online: true,
// videoUrl: "http://192.168.2.78:9000/live?app=demo&stream=12",
// offset: [100, 100],
// },
{
cameraName: "人民路与湘江中路",
wkt: "112.96368395220804,28.19156318275813",
wkt: "112.96371926745707,28.191912523952723",
isShow: true,
online: false,
videoUrl: "/cdn/video/lkqz_1.mp4",
offset: [0, 120],
},
{
cameraName: "西湖路与湘江中路",
isShow: true,
online: false,
videoUrl: "/cdn/video/lkqz_2.mp4",
offset: [0, 120],
wkt: '112.96373346356279,28.18825269244458'
},
{
cameraName: "劳动西路与湘江中路",
isShow: true,
online: false,
videoUrl: "/cdn/video/lkqz_3.mp4",
offset: [0, 120],
wkt: '112.96303956763319,28.182904793928614'
}
],
};
// 可移动基站场景
......@@ -41,25 +50,25 @@ const situation_accident = {
accidentVehicles: [
{
id: "441866",
picLicense: "苏A***59",
picLicense: "湘A***7",
behavior: "未保持安全车距",
},
{
id: "441795",
picLicense: "苏A***79",
picLicense: "湘A****9",
behavior: "急减速",
},
],
totalDuration: 155, // 事故时长 （单位：秒
totalDuration: 142, // 事故时长 （单位：秒
// 事件辅助定责
eventDetail: {
事故时间: "2023-12-23 00:16:27",
事故地点: "天马路与文萃路交叉口",
事故时间: "2023-04-10 00:47:37",
事故地点: "湘江中路与劳动西路交叉口内",
事故描述:
"疑似多车事故: 苏A***59与苏A***79由南进口驶入路口, 疑似发生追尾事故。",
"疑似多车事故：湘A****9与湘A***7由南进口驶入路口，疑似发生追尾事故。",
定责建议:
"苏A***59在正常行驶的道路上停车, 导致追尾事故负主要责任, 苏A***79未保持安全车距负次要责任。",
辅助信息: "苏A***79 疑似追尾 苏A***59",
"湘A***9在正常行驶的道路上停车, 导致追尾事故负主要责任, 湘A***7未保持安全车距负次要责任。",
辅助信息: "湘A***7 疑似追尾 湘A***9",
},
// 交通影响报告
affectDetail:{
......@@ -70,7 +79,7 @@ const situation_accident = {
haveNoVehicleVal: "无", // 涉事非机动车：有/无
orderOfSeverity: 5, // 影响程度：1~10
}
};
// 危险驾驶场景
const situation_dangerousDriving = {
......@@ -82,62 +91,50 @@ const situation_dangerousDriving = {
dangerVehicles: [
{
id: "224929",
picLicense: "苏A***95",
picLicense: "湘A****5",
behavior: "S型驾驶",
},
],
warnings: [
{
type: 1, // type 1:S型驾驶 2:急加速 3:轨迹异常
picLicense1: "苏A***49",
timeBetween: "2023.12.23 00:04:38 ~ 00:05:13",
duration: "45s",
location: "天马路与文萃路交叉口路口区域",
type: 1,
picLicense1: '鄂A****8',
timeBetween: '2023.04.09 01:28:22 ~ 01:28:35',
duration: '13s',
location: '湘江中路与劳动西路交叉口路口区域'
},
{
type: 2,
picLicense1: "苏A***24",
timeBetween: "2023.12.23 00:12:25 ~ 00:12:43",
duration: "18s",
location: "天马路与文萃路交叉口路口区域",
picLicense1: '湘B****8',
timeBetween: '2023.04.09 00:45:36 ~ 00:45:41',
duration: '6s',
location: '湘江中路与劳动西路交叉口路口区域'
},
{
type: 3,
picLicense1: "苏A***43",
timeBetween: "2023.12.23 00:23:57 ~ 00:24:13",
duration: "32s",
location: "天马路与文萃路交叉口路口区域",
picLicense1: '湘A****1',
timeBetween: '2023.04.09 00:23:57 ~ 00:24:13',
duration: '16s',
location: '湘江中路与劳动西路交叉口路口区域'
},
],
trackRecord: [
{ time: "00:04:38", location: "路口内部", behavior: "S型驾驶" },
{ time: "00:04:52", location: "北出口左侧车道1", behavior: "S型驾驶" },
{ time: "00:05:03", location: "北出口左侧车道2", behavior: "S型驾驶" },
{time: '01:28:22', location: '路口内部', behavior: 'S型驾驶'},
{time: '01:28:25', location: '北出口左侧车道1', behavior: 'S型驾驶'},
{time: '01:28:28', location: '北出口左侧车道2', behavior: 'S型驾驶'},
],
dangerDrivingBehaviors: [
{
time: "2023-12-12",
startTime: "19:54:26",
endTime: "19:54:34",
behavior: "轨迹异常",
},
{
time: "2023-12-23",
startTime: "00:04:38",
endTime: "00:05:13",
behavior: "S形驾驶",
},
{
time: "2023-12-24",
startTime: "10:56:33",
endTime: "10:56:40",
behavior: "急加速",
},
{time: '2023-04-08', startTime: '19:54:26', endTime: '19:54:34', behavior: '轨迹异常'},
{time: '2023-03-22', startTime: '21:45:23', endTime: '21:45:43', behavior: 'S形驾驶'},
{time: '2023-03-21', startTime: '10:56:33', endTime: '10:56:40', behavior: '急加速'},
],
};
// 相位空放场景
const situation_phaseAirPlay = {
videos:["/cdn/video/xwkf_3.mp4"],
currentSchemalCross:'13NI00B5RM0',
// 相位监测
monitor:{
timeBetween: "2023.4.9 17:21:09 ~ 17:27:09",
......@@ -178,70 +175,41 @@ const situation_slowTraffic = {
],
warnings: [
{
type: 2, // type 1:非机动车 2:行人
behavior: "不走斑马线、斜穿路口",
timeBetween: "2023-12-23 00:41:39 ~ 00:43:23",
duration: "40s",
location: "天马路与文萃路交叉口",
type: 2,
behavior: '不走斑马线、斜穿路口',
timeBetween: '2023-04-10 01:22:12 ~ 01:24:28',
duration: '40s',
location: '湘江中路与劳动西路交叉口'
},
{
type: 1,
behavior: "斜穿路口",
timeBetween: "2023-12-23 08:16:27 ~ 08:16:35",
duration: "8s",
location: "天马路与文萃路交叉口",
behavior: '斜穿路口',
timeBetween: '2023-04-10 10:22:12 ~ 10:22:20',
duration: '8s',
location: '湘江中路与人民西路交叉口'
},
{
type: 2,
behavior: "不走斑马线",
timeBetween: "2023-12-22 00:05:17 ~ 00:05:31",
duration: "14s",
location: "天马路与文萃路交叉口",
behavior: '不走斑马线',
timeBetween: '2023-04-09 12:22:12 ~ 12:22:26',
duration: '14s',
location: '湘江中路与人民西路交叉口'
},
],
trackRecord: [
{
time: "2023-12-23 00:50:04 ~ 00:52:30",
location: "天马路与文萃路交叉口",
behavior: "加速跑过路口",
},
{
time: "2023-12-23 00:55:09 ~ 00:57:00",
location: "天马路与文萃路交叉口",
behavior: "不走斑马线",
},
{
time: "2023-12-23 00:57:11 ~ 00:58:39",
location: "天马路与文萃路交叉口",
behavior: "不走斑马线",
},
{
time: "2023-12-23 00:59:32 ~ 00:59:42",
location: "天马路与文萃路交叉口",
behavior: "斜穿路口",
},
{time: '2023-04-01 10:10:23 ~ 10:11:30', location: '湘江中路与人民西路', behavior: '加速跑过路口'},
{time: '2023-04-04 20:11:23 ~ 20:12:30', location: '湘江中路与西湖路', behavior: '不走斑马线'},
{time: '2023-04-05 12:11:23 ~ 12:12:30', location: '湘江中路与劳动西路', behavior: '不走斑马线'},
{time: '2023-04-08 14:11:23 ~ 14:15:30', location: '湘江中路与西湖路', behavior: '斜穿路口'},
],
dangerDrivingBehaviors: [
{
time: "2023-12-23 00:12:16 ~ 00:16:00",
location: "天马路与文萃路交叉口",
behavior: "斜穿路口",
},
{
time: "2023-12-23 00:14:17 ~ 00:15:02",
location: "天马路与文萃路交叉口",
behavior: "横穿路口",
},
{
time: "2023-12-23 00:23:52 ~ 00:24:05",
location: "天马路与文萃路交叉口",
behavior: "横穿路口",
},
{
time: "2023-12-23 00:28:15 ~ 00:29:58",
location: "天马路与文萃路交叉口",
behavior: "斜穿路口",
},
{time: '2023-04-01 14:11:23 ~ 14:15:30', location: '湘江中路与西湖路', behavior: '斜穿路口'},
{time: '2023-04-03 15:11:23 ~ 15:18:30', location: '湘江中路与人民西路', behavior: '横穿路口'},
{time: '2023-04-04 14:11:23 ~ 14:15:30', location: '湘江中路与劳动西路', behavior: '横穿路口'},
{time: '2023-04-07 13:11:23 ~ 13:15:30', location: '湘江中路与人民西路', behavior: '斜穿路口'},
],
};
// 直左冲突场景
......@@ -278,7 +246,7 @@ const situation_straightLeftConflict = {
detail: "北口左转与南口直行冲突",
},
],
currentSchemalCross: '12F6S08J8T0',
currentSchemalCross: '13NI00B5RM0',
};
// 全域感知场景
const situation_drones = {
......
wj-data-vision/public/index.html
View file @ 1e0722bb
......@@ -69,10 +69,16 @@
color: white;
}
.mapboxgl-ctrl-group:not(:empty){
box-shadow: none;
}
.vehicleDetailPopup .mapboxgl-popup-close-button {
right: 14px;
top: 18px;
}
.mapboxgl-ctrl-logo{
display: none !important;
}
</style>
</head>
......
wj-data-vision/src/config/holo/wsSource.js deleted 100644 → 0
View file @ fc2e75a4
let baseURL = ws_config.BASE_URL
export default {
source: [
{
name: 'callPasserby',
url: baseURL,
status: 0,
},
{
name: 'callCar',
url: baseURL,
status: 0,
},
{
name: 'callLight',
url: baseURL,
status: 0,
},
],
}
wj-data-vision/src/dao/api.js
View file @ 1e0722bb
import fetch from '@/utils/fetch'
let holoBaseUrl = '/holoxm'
// 路口停止线获取
// export const getLinesByCross = (params) => fetch(api_config.CROSS_STOP_LINE, params, 'POST', {})
// 根据不同场景请求左侧cameraList
export const getCameraListByType = (data) => fetch('/holo/event-camera/list', data, 'GET')
export const getCameraListByType = (data) => fetch(`${holoBaseUrl}/event-camera/list`, data, 'GET')
// 群组页面各个路口行人数量多少
export const getPasserbyPolygon = () => fetch('/holo/pedestrian-monitor/list', {}, 'GET')
export const getPasserbyPolygon = () => fetch(`${holoBaseUrl}/pedestrian-monitor/list`, {}, 'GET')
// 目标轨迹
export const getTargetTracks = () => fetch('/holo/event-analysis/queryByType', {}, 'GET')
export const getTargetTracks = () => fetch(`${holoBaseUrl}/event-analysis/queryByType`, {}, 'GET')
// 交通信号
export const trafficSignals = () => fetch('/holo/analysis-cross-indicators/query', {crossId: '14Q1409IRF0'}, 'GET')
export const trafficSignals = () => fetch(`${holoBaseUrl}/analysis-cross-indicators/query`, {crossId: '14Q1409IRF0'}, 'GET')
// 顶部轮询5指标
export const getOverDatas = () => fetch('/holo/area-index-analysis/realtime', {}, 'GET')
export const getOverDatas = () => fetch(`${holoBaseUrl}/area-index-analysis/realtime`, {}, 'GET')
// 相位空放页面获取polygons
export const getPhasePolygons = () => fetch('/holo/phase-empty/list', {}, 'GET')
export const getPhasePolygons = () => fetch(`${holoBaseUrl}/phase-empty/list`, {}, 'GET')
// 群组 轨迹冲突
export const getConflict = () => fetch('/holo/bs-analysis-conflict/list', {}, 'GET')
export const getConflict = () => fetch(`${holoBaseUrl}/bs-analysis-conflict/list`, {}, 'GET')
wj-data-vision/src/dao/dict.js
View file @ 1e0722bb
import fetch from '@/utils/fetch'
let holoBaseUrl = '/holoxm'
// 车辆类型
export const dictCarType = () => fetch('/design/config/dictionary/byCondition', {"catalogId": "C5605A95172543A9B46E9561DB8BEF8D"}, 'POST')
// 车身颜色
......@@ -10,7 +11,7 @@ export const dictPlateColor = () => fetch('/design/config/dictionary/byCondition
export const dictTrafficActor = () => fetch('/design/config/dictionary/byCondition', {"catalogId": "21F5FDB7B45343BDB54BABD2243299FC"}, 'POST')
// 路口
// export const dictCrossInfo = () => fetch('/develop/sgw/dbInterface/gisc/t_base_cross_info/findByPage/F2B722217C05', {"pageSize": 10}, 'POST')
export const dictCrossInfo = () => fetch('/holo/base-cross-info/list', {}, 'GET')
export const dictCrossInfo = () => fetch(`${holoBaseUrl}/base-cross-info/list`, {}, 'GET')
// 拥堵程度
export const dictCrowdDeep = () => fetch('/design/config/dictionary/byCondition', {"catalogId": "D9C0EBCF2BFA4B4994ACA0D48BC13563"}, 'POST')
// 所有权
......
wj-data-vision/src/dao/situation.js
View file @ 1e0722bb
import fetch from '@/utils/fetch'
export const crossInfo = () => fetch('/holo/base-cross-info/list', {}, 'GET')
let holoBaseUrl = '/holoxm'
export const crossInfo = () => fetch(`${holoBaseUrl}/base-cross-info/list`, {}, 'GET')
export const eventInfo = (data) => fetch(`${holoBaseUrl}/event-info/list`, data, 'GET')
export const eventInfo = (data) => fetch('/holo/event-info/list', data, 'GET')
export const inletWayRealTime = (data) => fetch(`${holoBaseUrl}/analysis-rid-entrace-indicator/realtime`, data, 'GET')
export const inletWayRealTime = (data) => fetch('/holo/analysis-rid-entrace-indicator/realtime', data, 'GET')
export const inletWayTimeBetw = (data) => fetch(`${holoBaseUrl}/analysis-rid-entrace-indicator/time-slot`, data, 'GET')
export const inletWayTimeBetw = (data) => fetch('/holo/analysis-rid-entrace-indicator/time-slot', data, 'GET')
export const inletWayTurnRealTime = (data) => fetch(`${holoBaseUrl}/analysis-rid-turn-indicators/realtime`, data, 'GET')
export const inletWayTurnRealTime = (data) => fetch('/holo/analysis-rid-turn-indicators/realtime', data, 'GET')
export const inletWayTurnTimeBetw = (data) => fetch(`${holoBaseUrl}/analysis-rid-turn-indicators/time-slot`, data, 'GET')
export const inletWayTurnTimeBetw = (data) => fetch('/holo/analysis-rid-turn-indicators/time-slot', data, 'GET')
export const roadRealTime = (data) => fetch(`${holoBaseUrl}/analysis-rid-lane-indicators/realtime`, data, 'GET')
export const roadRealTime = (data) => fetch('/holo/analysis-rid-lane-indicators/realtime', data, 'GET')
export const roadTimeBetw = (data) => fetch(`${holoBaseUrl}/analysis-rid-lane-indicators/time-slot`, data, 'GET')
export const roadTimeBetw = (data) => fetch('/holo/analysis-rid-lane-indicators/time-slot', data, 'GET')
export const getRoadsTurn = (data) => fetch(`${holoBaseUrl}/base-lane-info/list`, data, 'GET')
export const getRoadsTurn = (data) => fetch('/holo/base-lane-info/list', data, 'GET')
export const trafficEByTime = (data) => fetch('/holo/analysis-event-trend/list', data, 'GET')
export const trafficEByTime = (data) => fetch(`${holoBaseUrl}/analysis-event-trend/list`, data, 'GET')
// 区域时段雷达图
export const areaList = () => fetch('/holo/area-index-analysis/list', {}, 'GET')
export const areaList = () => fetch(`${holoBaseUrl}/area-index-analysis/list`, {}, 'GET')
// 路口交通流量分析
export const crossFlow = () => fetch('/holo/cross-flow/list', {}, 'GET')
export const crossFlow = () => fetch(`${holoBaseUrl}/cross-flow/list`, {}, 'GET')
// 路段交通流量分析
export const ridFlow = () => fetch('/holo/rid-flow/list', {}, 'GET')
export const ridFlow = () => fetch(`${holoBaseUrl}/rid-flow/list`, {}, 'GET')
// 路口详情 - 路口交通指标
export const crossIndex = (data) => fetch('/holo/analysis-cross-indicators/query', data, 'GET')
export const crossIndex = (data) => fetch(`${holoBaseUrl}/analysis-cross-indicators/query`, data, 'GET')
export const eventAnalysis = () => fetch('/holo/event-analysis/list', {}, 'GET')
export const eventAnalysis = () => fetch(`${holoBaseUrl}/event-analysis/list`, {}, 'GET')
export const areaRecent = () => fetch('/holo/area-index-analysis/recently', {}, 'GET')
export const areaRecent = () => fetch(`${holoBaseUrl}/area-index-analysis/recently`, {}, 'GET')
export const eventAlarm = () => fetch('/holo/event-info/alarm', {}, 'GET')
export const eventAlarm = () => fetch(`${holoBaseUrl}/event-info/alarm`, {}, 'GET')
export const pedNonAnalysis = () => fetch('/holo/ped-nonmotor-analysis/list', {}, 'GET')
export const pedNonAnalysis = () => fetch(`${holoBaseUrl}/ped-nonmotor-analysis/list`, {}, 'GET')
//路口配置列表
export const api_getCrossData = (data) => fetch('/web/crossConfig/listLaneInfo', data, 'POST')
......@@ -50,10 +50,10 @@ export const api_phaseByTimeList = (data) => fetch('/web/planSend/phaseListByTim
export const api_planList = (data) => fetch('/web/schemeConfig/listSchemeConfig', data, 'POST')
// 设备图层接口
export const equip_camera = () => fetch('/holo/device-camera/list', {}, 'GET')
export const equip_camera = () => fetch(`${holoBaseUrl}/device-camera/list`, {}, 'GET')
export const equip_radar = () => fetch('/holo/device-radar/list', {}, 'GET')
export const equip_radar = () => fetch(`${holoBaseUrl}/device-radar/list`, {}, 'GET')
export const equip_signal = () => fetch('/holo/device-signal/list', {}, 'GET')
export const equip_signal = () => fetch(`${holoBaseUrl}/device-signal/list`, {}, 'GET')
export const equip_weather = () => fetch('/holo/device-weather/list', {}, 'GET')
\ No newline at end of file
export const equip_weather = () => fetch(`${holoBaseUrl}/device-weather/list`, {}, 'GET')
\ No newline at end of file
wj-data-vision/src/views/accidentScene/left/index.vue
View file @ 1e0722bb
......@@ -105,7 +105,7 @@
class="pointItem"
>
<div v-show="item === affectDetail.orderOfSeverity" class="arrow-down"></div>
<div class="text-t">{{ indexMap[item] }}</div>
<!-- <div class="text-t">{{ indexMap[item] }}</div>-->
</div>
</div>
</msg-card>
......@@ -175,7 +175,7 @@ export default {
font-size: 16px;
border-top: 1px solid rgba(62, 108, 150, 1);
border-left: 1px solid rgba(62, 108, 150, 1);
margin-bottom: 20px;
margin-bottom: 10px;
.row1 {
height: 32px;
......@@ -326,13 +326,13 @@ export default {
padding: 15px 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
.topI {
height: auto;
margin-bottom: 5px;
height: 35%;
margin-bottom: 15px;
.videos {
height: 100%;
display: flex;
justify-content: space-between;
align-content: space-between;
......@@ -342,7 +342,7 @@ export default {
.videoItem {
width: 100%;
height: 365px;
height: 100%;
// aspect-ratio: 4/3;
position: relative;
}
......@@ -350,13 +350,14 @@ export default {
}
.bottomI {
flex: 1;
::v-deep {
overflow-y:visible!important;
}
height: 65%;
.analysis {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.timeMsg {
height: 30px;
......@@ -369,8 +370,6 @@ export default {
display: flex;
justify-content: center;
align-items: center;
margin-top: 4px;
margin-bottom: 4px;
font-size: 18px;
span {
......
wj-data-vision/src/views/accidentScene/right/index.vue
View file @ 1e0722bb
......@@ -47,7 +47,7 @@ export default {
<style lang='less' scoped>
.videoItem {
width: 100%;
aspect-ratio: 4/3;
height: 49%;
position: relative;
}
......
wj-data-vision/src/views/dangerousDriving/index.vue
View file @ 1e0722bb
......@@ -203,7 +203,7 @@ export default {
}
map.addControl(
new mapboxgl.NavigationControl({ showZoom: false }),
"bottom-left"
"bottom-right"
);
this.refreshBounds();
// document
......
wj-data-vision/src/views/dangerousDriving/left/index.vue
View file @ 1e0722bb
......@@ -224,13 +224,14 @@ export default {
padding: 15px 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: flex-start;
.topI {
height: auto;
height: 40%;
margin-bottom: 15px;
.videos {
height:100%;
display: flex;
justify-content: space-between;
align-content: space-between;
......@@ -239,15 +240,14 @@ export default {
flex-flow: row wrap;
.videoItem {
height:100%;
width: 100%;
aspect-ratio: 4/3;
position: relative;
}
}
}
.bottomI {
flex: 1;
.cardInner {
display: flex;
......
wj-data-vision/src/views/dangerousDriving/right/index.vue
View file @ 1e0722bb
<template>
<div class="home-right">
<div class="home-right-inner">
<msg-card title="涉事车辆车内视角" style="height:50%">
<div style="height: 100%; width: 100%; display: flex;flex-direction: column;justify-content: space-between;">
<local-camera v-for="(item,index) of videos" :video-data="item" :key="index" ref="videoItem" :border="true" class="videoItem"></local-camera>
</div>
</msg-card>
<msg-card title="涉事车辆车内视角" style="height:40%;margin-bottom: 15px;">
<div style="height: 100%; width: 100%; display: flex;flex-direction: column;justify-content: space-between;">
<local-camera v-for="(item,index) of videos" :video-data="item" :key="index" ref="videoItem" :border="true"
class="videoItem"></local-camera>
</div>
</msg-card>
<!-- <msg-card style="height:auto" class="m-b-10" title="涉事车辆车内视角">
<div class="cardInner">
<span class="top-left"></span>
......@@ -17,64 +18,63 @@
</msg-card> -->
<msg-card style="height:auto" class="m-b-10" title="车辆跟踪记录">
<el-table
:header-cell-style="{backgroundColor:'rgba(1, 43, 83, 1)',color:'rgba(217, 237, 255, 1)'}"
:row-class-name="userTab"
:data="tableData"
style="background-color: transparent; width: 100%;margin-top: 10px">
:header-cell-style="{backgroundColor:'rgba(1, 43, 83, 1)',color:'rgba(217, 237, 255, 1)'}"
:row-class-name="userTab"
:data="tableData"
style="background-color: transparent; width: 100%;margin-top: 10px">
<el-table-column
show-overflow-tooltip
align="center"
prop="time"
label="时间">
show-overflow-tooltip
align="center"
prop="time"
label="时间">
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="location"
align="center"
label="位置">
show-overflow-tooltip
prop="location"
align="center"
label="位置">
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="behavior"
align="center"
label="行为">
show-overflow-tooltip
prop="behavior"
align="center"
label="行为">
</el-table-column>
</el-table>
</msg-card>
<msg-card style="height:auto" class="m-b-10" title="车辆历史危险驾驶行为">
<el-table
:header-cell-style="{backgroundColor:'rgba(1, 43, 83, 1)',color:'rgba(217, 237, 255, 1)'}"
:row-class-name="userTab"
:data="tableData1"
style="background-color: transparent; width: 100%;margin-top: 10px">
:header-cell-style="{backgroundColor:'rgba(1, 43, 83, 1)',color:'rgba(217, 237, 255, 1)'}"
:row-class-name="userTab"
:data="tableData1"
style="background-color: transparent; width: 100%;margin-top: 10px">
<el-table-column
align="center"
show-overflow-tooltip
prop="time"
label="日期时间">
align="center"
show-overflow-tooltip
prop="time"
label="日期时间">
</el-table-column>
<el-table-column
prop="startTime"
show-overflow-tooltip
align="center"
label="开始时间">
prop="startTime"
show-overflow-tooltip
align="center"
label="开始时间">
</el-table-column>
<el-table-column
prop="endTime"
show-overflow-tooltip
align="center"
label="结束时间">
prop="endTime"
show-overflow-tooltip
align="center"
label="结束时间">
</el-table-column>
<el-table-column
prop="behavior"
show-overflow-tooltip
align="center"
label="危险驾驶行为">
prop="behavior"
show-overflow-tooltip
align="center"
label="危险驾驶行为">
</el-table-column>
</el-table>
</msg-card>
</div>
</div>
</template>
......@@ -97,12 +97,8 @@ export default {
},
data() {
return {
tableData: [
],
tableData1: [
],
tableData: [],
tableData1: [],
};
},
mounted() {
......@@ -160,8 +156,8 @@ export default {
<style lang='less' scoped>
.videoItem {
height:100%;
width: 100%;
aspect-ratio: 4/3;
position: relative;
}
......
wj-data-vision/src/views/drones/index.vue
View file @ 1e0722bb
......@@ -96,7 +96,7 @@ export default {
}
map.addControl(
new mapboxgl.NavigationControl({ showZoom: false }),
"bottom-left"
"bottom-right"
);
this.refreshBounds();
// document
......
wj-data-vision/src/views/drones/left/index.vue
View file @ 1e0722bb
......@@ -2,7 +2,8 @@
<div class="home-left">
<msg-card title="全域感知">
<div style="height: 100%; width: 100%; display: flex;flex-direction: column;justify-content: space-between;">
<local-camera v-for="(item,index) of videos" :video-data="item" :key="index" ref="videoItem" :border="true" class="videoItem"></local-camera>
<local-camera v-for="(item,index) of videos" :video-data="item" :key="index" ref="videoItem" :border="true"
class="videoItem"></local-camera>
</div>
</msg-card>
</div>
......@@ -29,7 +30,7 @@ export default {
},
methods: {
startVideo(time) {
for(let item of this.$refs.videoItem){
for (let item of this.$refs.videoItem) {
item?.setTime()
}
},
......@@ -43,7 +44,6 @@ export default {
<style lang='less' scoped>
.videoItem {
width: 100%;
aspect-ratio: 4/3;
height: 49%;
// margin-bottom: 20px;
}
......
wj-data-vision/src/views/intersectionGroups/index.vue
View file @ 1e0722bb
......@@ -102,7 +102,7 @@ export default {
map.flyTo(map_config.alt2);
clearInterval(viewTimer);
}
}, 10);
}, 100);
},
showCrossCamera() {
let allCameras = situation_intersectionGroups.cameras;
......@@ -211,7 +211,7 @@ export default {
}
map.addControl(
new mapboxgl.NavigationControl({ showZoom: false }),
"bottom-left"
"bottom-right"
);
this.refreshBounds();
// document
......@@ -657,12 +657,12 @@ export default {
<style lang="less" scoped>
.rightSwitch {
right: 15px;
left: 15px;
transition: 0.5s all ease;
}
.generalSwitch {
right: 545px;
left: 545px;
transition: 0.5s all ease;
}
......@@ -726,7 +726,7 @@ export default {
}
.mapboxgl-ctrl-bottom-right {
bottom: 20px !important;
right: 545px !important;
right: 688px !important;
z-index: 11 !important;
transition: 0.5s all ease;
}
......
wj-data-vision/src/views/intersectionGroups/layersSwitch.vue
View file @ 1e0722bb
......@@ -17,7 +17,7 @@
</div>
<div
class="visibleControl"
:class="[{ 'expand-i': !show }, { 'close-i': show }]"
:class="[{ 'expand-i': show }, { 'close-i': !show }]"
@click="changeVisibel"
>
</div>
......
wj-data-vision/src/views/mobileBaseStation/index.vue
View file @ 1e0722bb
......@@ -91,7 +91,7 @@ export default {
}
map.addControl(
new mapboxgl.NavigationControl({ showZoom: false }),
"bottom-left"
"bottom-right"
);
this.refreshBounds();
// document
......
wj-data-vision/src/views/phaseAirPlay/index.vue
View file @ 1e0722bb
......@@ -113,7 +113,7 @@ export default {
}
map.addControl(
new mapboxgl.NavigationControl({ showZoom: false }),
"bottom-left"
"bottom-right"
);
this.refreshBounds();
// document
......
wj-data-vision/src/views/phaseAirPlay/left/index.vue
View file @ 1e0722bb
......@@ -222,7 +222,7 @@ export default {
flex-direction: column;
.topI {
height: 30%;
height: 40%;
margin-bottom: 15px;
.videos {
......@@ -234,8 +234,8 @@ export default {
flex-flow: row wrap;
height: 100%;
.videoItem {
aspect-ratio: 4/3;
height: 100%;
width: 100%;
position: relative;
}
}
......@@ -252,7 +252,7 @@ export default {
justify-content: space-around;
.message-title {
margin-bottom: 28px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
......@@ -277,7 +277,7 @@ export default {
}
.value-image {
margin-top: 28px;
margin-top: 15px;
width: 100%;
height: 350px;
background-image: url("../../../assets/images/sc/kf.png");
......
wj-data-vision/src/views/phaseAirPlay/right/index.vue
View file @ 1e0722bb
......@@ -3,10 +3,8 @@
<msg-card title="当前方案">
<div class="cardInner">
<div class="comp">
<cross-control crossId="12F6L08J630"/>
<!-- <cross-control crossId="12F6S08J7P0"/>-->
<cross-control :crossId="schemalCross"/>
</div>
<!-- :span-method="objectSpanMethod"-->
<el-table
:header-cell-style="{backgroundColor:'rgba(46, 119, 255, 0.15)',color:'rgba(217, 229, 255, 1)'}"
:row-class-name="userTab"
......@@ -58,7 +56,11 @@ import CrossControl from "../../../components/CrossControl/crossControl.vue";
export default {
name: "homeRight",
components: {CrossControl, CameraVideo, MsgCard, CesiumMap},
computed: {},
computed: {
schemalCross(){
return situation_phaseAirPlay.currentSchemalCross
}
},
data() {
return {
tableData: [
......@@ -141,10 +143,6 @@ export default {
margin: 0
}
::v-deep .msg-card-content {
}
.top-left {
position: absolute;
left: -1px;
......
wj-data-vision/src/views/slowTraffic/index.vue
View file @ 1e0722bb
......@@ -200,7 +200,7 @@ export default {
}
map.addControl(
new mapboxgl.NavigationControl({ showZoom: false }),
"bottom-left"
"bottom-right"
);
this.refreshBounds();
// document
......@@ -328,10 +328,10 @@ export default {
}
this.slowLines = {};
}
if (this.msgStart) {
this.$refs.leftVideo.startVideo();
this.msgStart = false;
}
// if (this.msgStart) {
// this.$refs.leftVideo.startVideo();
// this.msgStart = false;
// }
// 第一帧 || 时间戳不相同 => 放行
if (
this.lastLocation.length === 0 ||
......
wj-data-vision/src/views/slowTraffic/left/index.vue
View file @ 1e0722bb
......@@ -234,7 +234,7 @@ export default {
flex-direction: column;
.topI {
height: auto;
height: 40%;
margin-bottom: 15px;
.videos {
......@@ -244,18 +244,17 @@ export default {
align-items: stretch;
position: relative;
flex-flow: row wrap;
height: 100%;
.videoItem {
width: 100%;
aspect-ratio: 4/3;
height: 100%;
position: relative;
}
}
}
.bottomI {
flex: 1;
.cardInner {
display: flex;
flex-direction: column;
......
wj-data-vision/src/views/straightLeftConflict/index.vue
View file @ 1e0722bb
......@@ -146,7 +146,7 @@ export default {
}
map.addControl(
new mapboxgl.NavigationControl({ showZoom: false }),
"bottom-left"
"bottom-right"
);
this.refreshBounds();
// document
......
wj-data-vision/src/views/straightLeftConflict/left/index.vue
View file @ 1e0722bb
......@@ -240,7 +240,7 @@ export default {
flex-direction: column;
.topI {
height: 30%;
height: 35%;
margin-bottom: 15px;
.videos {
......@@ -267,28 +267,31 @@ export default {
display: flex;
height: 100%;
flex-direction: column;
padding: 15px;
padding: 10px 15px;
justify-content: space-around;
.text-rows{
.row-item{
display: flex;
align-items: flex-start;
margin-bottom: 28px;
margin-bottom: 12px;
.left-key{
white-space: nowrap;
color: rgba(217, 229, 255, 1);
margin-right: 5px;
}
}
.row-item:last-child{
margin-bottom: 0;
}
}
.message-describe {
.value-image {
display: flex;
justify-content: center;
margin-top: 28px;
margin-top: 12px;
width: 100%;
height: 350px;
height: 320px;
background-image: url("../../../assets/images/sc/zz.png");
background-size: auto 100%;
background-position: center;
......
wj-manage-web/.env.development 0 → 100644
View file @ 1e0722bb
NODE_ENV=development
\ No newline at end of file
wj-manage-web/.env.production 0 → 100644
View file @ 1e0722bb
NODE_ENV=production
\ No newline at end of file
wj-manage-web/public/index.html
View file @ 1e0722bb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>logo.png" />
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<link rel="icon" href="<%= BASE_URL %>logo.png"/>
<title></title>
<link href="/cdn/libs/normalize/normalize.css" rel="stylesheet" />
<link href="/cdn/libs/st-ui/st-ui.css" rel="stylesheet" />
<link href="/cdn/font/font.css" rel="stylesheet" />
<link href="/cdn/libs/normalize/normalize.css" rel="stylesheet"/>
<link href="/cdn/libs/st-ui/st-ui.css" rel="stylesheet"/>
<link href="/cdn/font/font.css" rel="stylesheet"/>
<link
href="/cdn/libs/example/styles/lib.css"
rel="stylesheet"
type="text/css"
href="/cdn/libs/example/styles/lib.css"
rel="stylesheet"
type="text/css"
/>
<link href="/cdn/libs/mapbox-gl/mapbox-gl.css" rel="stylesheet" />
<link href="/cdn/libs/threebox/threebox.css" rel="stylesheet" />
<link href="/cdn/libs/cesium/Widgets/widgets.css" rel="stylesheet" />
<link href="/cdn/libs/mapbox-gl/mapbox-gl.css" rel="stylesheet"/>
<link href="/cdn/libs/threebox/threebox.css" rel="stylesheet"/>
<link href="/cdn/libs/cesium/Widgets/widgets.css" rel="stylesheet"/>
<link
rel="stylesheet"
href="/cdn/libs/mapbox-gl-draw/mapbox-gl-draw.css"
type="text/css"
rel="stylesheet"
href="/cdn/libs/mapbox-gl-draw/mapbox-gl-draw.css"
type="text/css"
/>
<style>
#app,
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.full-h {
height: 100%;
}
.full-w {
width: 100%;
}
.equipmentPopup {
max-width: unset !important;
}
.vehicleDetailPopup {
max-width: unset !important;
}
.eventPopup {
max-width: unset !important;
}
.warningPopup {
max-width: unset !important;
}
.mapboxgl-popup-content {
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
.vjs-modal-dialog{
display: none !important;
}
.mapboxgl-popup-tip {
display: none !important;
}
.mapboxgl-popup-close-button {
font-size: 26px;
color: white;
}
.vehicleDetailPopup .mapboxgl-popup-close-button {
right: 14px;
top: 18px;
}
.eventPopup .mapboxgl-popup-close-button {
right: 8px;
top: 10px;
}
.equipmentPopup .mapboxgl-popup-close-button {
right: 8px;
top: 10px;
}
.mapboxgl-ctrl-logo {
display: none !important;
}
* {
box-sizing: border-box;
}
#app,
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.full-h {
height: 100%;
}
.full-w {
width: 100%;
}
/*滚动条样式：谷歌浏览器下*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: rgba(46, 94, 153, 0.3);
}
/*滚动条的轨道*/
::-webkit-scrollbar-track {
background-color: rgba(15, 38, 69, 0.3);
}
::-webkit-scrollbar-track:hover {
background-color: #0f2645;
::-webkit-scrollbar {
background-color: #2e5e99;
}
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #2e5e99;
}
/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button {
height: 0;
width: 0;
}
.equipmentPopup {
max-width: unset !important;
}
.vehicleDetailPopup {
max-width: unset !important;
}
.eventPopup {
max-width: unset !important;
}
.warningPopup {
max-width: unset !important;
}
.mapboxgl-popup-content {
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
.vjs-modal-dialog {
display: none !important;
}
.mapboxgl-popup-tip {
display: none !important;
}
.mapboxgl-popup-close-button {
font-size: 26px;
color: white;
}
.vehicleDetailPopup .mapboxgl-popup-close-button {
right: 14px;
top: 18px;
}
.eventPopup .mapboxgl-popup-close-button {
right: 8px;
top: 10px;
}
.equipmentPopup .mapboxgl-popup-close-button {
right: 8px;
top: 10px;
}
.mapboxgl-ctrl-logo {
display: none !important;
}
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<script src="/cdn/libs/echarts/echarts.min.js"></script>
<script src="/cdn/libs/lodash/lodash.js"></script>
<script src="/cdn/libs/st-util/st-util.js"></script>
<script src="/cdn/libs/st-dao/st-dao.js"></script>
<script
src="/cdn/libs/mapbox-gl/mapbox-gl.js"
type="text/javascript"
></script>
<script src="/cdn/libs/mapbox-gl-draw/mapbox-gl-draw.js"></script>
<script
src="/cdn/libs/threebox/threebox.js"
type="text/javascript"
></script>
<script src="/cdn/libs/turf/turf.min.js" type="text/javascript"></script>
<script src="/cdn/libs/cesium/Cesium.js" type="text/javascript"></script>
<script
src="/cdn/libs/reconnecting-websocket/reconnecting-websocket.js"
type="text/javascript"
></script>
<script
src="/design/systemsetting/systemParam/getValueByKey?key=61283C05C4154AA9A57BD9005ABA1BCD"
type="application/x-javascript"
></script>
<noscript>
<strong
>We're sorry but app doesn't work properly without JavaScript enabled.
</head>
<body>
<script src="/cdn/libs/echarts/echarts.min.js"></script>
<script src="/cdn/libs/lodash/lodash.js"></script>
<script src="/cdn/libs/st-util/st-util.js"></script>
<script src="/cdn/libs/st-dao/st-dao.js"></script>
<script
src="/cdn/libs/mapbox-gl/mapbox-gl.js"
type="text/javascript"
></script>
<script src="/cdn/libs/mapbox-gl-draw/mapbox-gl-draw.js"></script>
<script
src="/cdn/libs/threebox/threebox.js"
type="text/javascript"
></script>
<script src="/cdn/libs/turf/turf.min.js" type="text/javascript"></script>
<script src="/cdn/libs/cesium/Cesium.js" type="text/javascript"></script>
<script
src="/cdn/libs/reconnecting-websocket/reconnecting-websocket.js"
type="text/javascript"
></script>
<script
src="/design/systemsetting/systemParam/getValueByKey?key=61283C05C4154AA9A57BD9005ABA1BCD"
type="application/x-javascript"
></script>
<noscript>
<strong
>We're sorry but app doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
</body>
>
</noscript>
<div id="app"></div>
</body>
</html>
wj-manage-web/src/App.vue
View file @ 1e0722bb
......@@ -15,8 +15,8 @@
</template>
<script>
import Navigator from "@/components/navigator";
import leftMenu from "@/components/leftMenu";
import Navigator from "./components/navigator";
import leftMenu from "./components/leftMenu";
export default {
components: {
Navigator,
......@@ -68,5 +68,6 @@ export default {
color: #2c3e50;
height: 100%;
width: 100%;
background-color: #030916;
}
</style>
wj-manage-web/src/components/CrossControl/wsMixins.js
View file @ 1e0722bb
......@@ -9,9 +9,11 @@ export default {
}
},
methods: {
// BASE_URL: 'ws://10.102.1.181:9000/holows/subscribe', // 实时轨迹
// CROSS_CONTROL: 'ws://10.102.1.181:32000/utc/signalStatus/', // 济南
getCrossWs() {
this.websocket = init({
url: ws_config.CROSS_CONTROL + this.crossId + ',' + this.wsType,
url: `ws://${window.wsHost}/utc/signalStatus/${this.crossId},${this.wsType}`,
callBack: (res) => {
this.websocketData = res[0]
this.activePhaseId = this.websocketData.phaseId
......@@ -31,7 +33,6 @@ export default {
// getCrossSignalLampState() {
// var _this = this;
// var url = this.WebSocketLampState + this.crossId;
// if ("WebSocket" in window && url) {
// if (this.websocket) {
// this.websocket.close();
......
wj-manage-web/src/components/PathMap/index.vue
View file @ 1e0722bb
......@@ -515,7 +515,7 @@ export default {
background: url("../../assets/images/signal/play-icon.svg") no-repeat;
background-size: 100% 100%;
&.active {
background: url("../..//assets/images/signal/play-icon-active.svg")
background: url("../../assets/images/signal/play-icon-active.svg")
no-repeat;
background-size: 100% 100%;
}
......
wj-manage-web/src/components/Standard/cameraVideo.vue
View file @ 1e0722bb
<template>
<div class="cameraVideo">
<!-- <div class="loading-mask" v-show="cameraLoading">
<div style="position: relative">
<div class="el-icon-loading"></div>
<div>加载中...</div>
</div>
</div> -->
<video
style="width: 100%; height: 100%"
style="width: 100%; height: 100%;object-fit: fill;"
@loadstart="loadstart($event)"
@canplay="canplay($event)"
class="videoControl"
......@@ -27,16 +21,12 @@ export default {
watch: {},
data() {
return {
cameraLoading: true,
supported: false,
player: null,
interval: null,
ownVideoData:{}
};
},
methods: {
canplay() {
this.cameraLoading = false;
this.$emit("vidCanplay", this.ownVideoData);
},
loadstart() {},
......@@ -73,6 +63,7 @@ export default {
{
src: `${this.ownVideoData.videoUrl}`,
type: "application/x-mpegURL",
// src: `111.mp4`,
},
],
});
......@@ -95,6 +86,7 @@ export default {
{
src: targetCamera.videoUrl,
type: "application/x-mpegURL",
// src: `111.mp4`,
},
]);
this.player.on("playing", () => {
......@@ -122,7 +114,13 @@ export default {
withCredentials: false,
},
},
sources: [{ src: this.ownVideoData.videoUrl, type: "video/x-flv" }],
sources: [
{
src: this.ownVideoData.videoUrl,
type: "video/x-flv"
// src: `111.mp4`,
}
],
});
this.player.on("playing", () => {
this.canplay();
......@@ -159,8 +157,6 @@ video {
.cameraVideo {
.videoControl {
width: 100%;
height: 100%;
object-fit: fill;
}
}
......
wj-manage-web/src/components/Standard/msg-card.vue
View file @ 1e0722bb
......@@ -67,27 +67,5 @@ export default {
}
}
/*滚动条样式：谷歌浏览器下*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #2e5e99;
}
/*滚动条的轨道*/
::-webkit-scrollbar-track {
background-color: #0f2645;
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #2e5e99;
}
/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button {
height: 0;
width: 0;
}
</style>
wj-manage-web/src/components/leftMenu/index.vue
View file @ 1e0722bb
......@@ -123,6 +123,7 @@ export default {
text-align: right;
padding: 15px 25px 15px 0;
float: left;
background-color: #030916;
border-bottom: 1px solid #1f2229;
}
}
......
wj-manage-web/src/config/holo/websocket.js
View file @ 1e0722bb
......@@ -8,9 +8,11 @@ protobuf.load("../wj-manage-web/RealtimeCarInfo.proto", function (event, root) {
function onError(e, data) {
// console.log("ws error...", e, data);
console.log('ws error',e, data)
}
function onClose(e, data) {
console.log('ws error',e, data)
// console.log("ws close...", e, data);
}
// { url: '', name: '', callback: '' }
......
wj-manage-web/src/dao/situation.js
View file @ 1e0722bb
import fetch from '@/utils/fetch'
import fetch from '../utils/fetch/index'
// 检测器位置信息
export const getDetetors = () => fetch('/holo/detector/list', {}, 'GET')
......
wj-manage-web/src/main.js
View file @ 1e0722bb
......@@ -20,6 +20,7 @@ import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI, {
size: 'small',
})
window.wsHost = (process.env.NODE_ENV==='development'?'10.102.1.181:9000':location.host)
// 暂时挂载到window 以支持项目之前的ELEMENT.Message写法
window.ELEMENT = ElementUI
// 事件总线
......@@ -36,7 +37,7 @@ new Vue({
// 动态加载外部链接 使npm引入的vue 兼容原框架st-ui组件
function loadJS(url) {
return new Promise((resolve) => {
var script = document.createElement('script');
let script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// IE
......
wj-manage-web/src/utils/mapboxTools.js
View file @ 1e0722bb
// import { getRoadLines } from "../dao/situation";
import mapAssets from "../config/holo/mapAssets";
// Function to create a triangle icon (arrow)
function createTriangleIcon(color) {
......@@ -338,21 +336,23 @@ export function addOrUpdateWave(map, geo) {
}
}
// type 4 种颜色 对应 4种告警信息
export function addOrUpdateWarningWave(map, geo) {
if (map.getSource("waveWarning")) {
map.getSource("waveWarning").setData(geo);
export function addOrUpdateWarningWave(map, geo, id) {
if (map.getSource(id)) {
map.getSource(id).setData(geo);
} else {
map.addSource("waveWarning", {
map.addSource(id, {
type: "geojson",
data: geo,
});
}
if (!map.getLayer("waveWarning")) {
if (!map.getLayer(id)) {
map.addLayer({
id: "waveWarning",
id: id,
type: "symbol",
source: "waveWarning",
source: id,
layout: {
'icon-allow-overlap':true,
'icon-ignore-placement':true,
"icon-image": [
"match",
["get", "type"],
......
wj-manage-web/src/utils/request.js
View file @ 1e0722bb
......@@ -119,7 +119,7 @@ service.interceptors.response.use(
}
},
(error) => {
ELEMENT.Message.error(error.message);
// ELEMENT.Message.error(error.message);
return Promise.reject(error);
}
);
......
wj-manage-web/src/views/analysis/historyReports/index.vue
View file @ 1e0722bb
......@@ -292,7 +292,7 @@ export default {
link.href = window.URL.createObjectURL(blob);
link.download = report.name;
link.click();
// download(url, {}, report.name);
download(url, {}, report.name);
},
screenReports() {
let filter = this.reportSearchValue;
......
wj-manage-web/src/views/analysis/reportCross.vue
View file @ 1e0722bb
......@@ -545,29 +545,29 @@ export default {
height: 30px;
line-height: 5px;
}
/*滚动条样式：谷歌浏览器下*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #2e5e99;
}
/*滚动条的轨道*/
::-webkit-scrollbar-track {
background-color: #0f2645;
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #2e5e99;
}
/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button {
width: 0;
height: 0;
}
///*滚动条样式：谷歌浏览器下*/
//::-webkit-scrollbar {
// width: 10px;
// height: 10px;
// background-color: #2e5e99;
//}
//
///*滚动条的轨道*/
//::-webkit-scrollbar-track {
// background-color: #0f2645;
//}
//
///*滚动条的滑块按钮*/
//::-webkit-scrollbar-thumb {
// border-radius: 10px;
// background-color: #2e5e99;
//}
//
///*滚动条的上下两端的按钮*/
//::-webkit-scrollbar-button {
// width: 0;
// height: 0;
//}
.report-config {
// padding: 8px 16px 0 16px;
height: 60%;
......
wj-manage-web/src/views/efficiency/crossCompare.vue
View file @ 1e0722bb
......@@ -572,27 +572,27 @@ export default {
}
}
/*滚动条样式：谷歌浏览器下*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #2e5e99;
}
/*滚动条的轨道*/
::-webkit-scrollbar-track {
background-color: #0f2645;
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #2e5e99;
}
/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button {
width: 0;
height: 0;
}
///*滚动条样式：谷歌浏览器下*/
//::-webkit-scrollbar {
// width: 10px;
// height: 10px;
// background-color: #2e5e99;
//}
//
///*滚动条的轨道*/
//::-webkit-scrollbar-track {
// background-color: #0f2645;
//}
//
///*滚动条的滑块按钮*/
//::-webkit-scrollbar-thumb {
// border-radius: 10px;
// background-color: #2e5e99;
//}
//
///*滚动条的上下两端的按钮*/
//::-webkit-scrollbar-button {
// width: 0;
// height: 0;
//}
</style>
wj-manage-web/src/views/efficiency/index.vue
View file @ 1e0722bb
......@@ -916,28 +916,28 @@ export default {
<style lang="less" scoped>
@import url("../../assets/less/elementTable.less");
/*滚动条样式：谷歌浏览器下*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #2e5e99;
}
/*滚动条的轨道*/
::-webkit-scrollbar-track {
background-color: #0f2645;
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #2e5e99;
}
/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button {
width: 0;
height: 0;
}
//::-webkit-scrollbar {
// width: 10px;
// height: 10px;
// background-color: #2e5e99;
//}
//
///*滚动条的轨道*/
//::-webkit-scrollbar-track {
// background-color: #0f2645;
//}
//
///*滚动条的滑块按钮*/
//::-webkit-scrollbar-thumb {
// border-radius: 10px;
// background-color: #2e5e99;
//}
//
///*滚动条的上下两端的按钮*/
//::-webkit-scrollbar-button {
// width: 0;
// height: 0;
//}
.efficiency_container {
position: relative;
......
wj-manage-web/src/views/organization/index.vue
View file @ 1e0722bb
......@@ -1207,29 +1207,29 @@ export default {
border: 1px solid gray;
}
/*滚动条样式：谷歌浏览器下*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #2e5e99;
}
/*滚动条的轨道*/
::-webkit-scrollbar-track {
background-color: #0f2645;
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #2e5e99;
}
/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button {
width: 0;
height: 0;
}
///*滚动条样式：谷歌浏览器下*/
//::-webkit-scrollbar {
// width: 10px;
// height: 10px;
// background-color: #2e5e99;
//}
//
///*滚动条的轨道*/
//::-webkit-scrollbar-track {
// background-color: #0f2645;
//}
//
///*滚动条的滑块按钮*/
//::-webkit-scrollbar-thumb {
// border-radius: 10px;
// background-color: #2e5e99;
//}
//
///*滚动条的上下两端的按钮*/
//::-webkit-scrollbar-button {
// width: 0;
// height: 0;
//}
.common_map {
border: 1px solid #04396f;
......
wj-manage-web/src/views/safety/analysisTypes.vue
View file @ 1e0722bb
......@@ -142,9 +142,9 @@ export default {
series1: [],
trackDetail: [],
tableData: [],
tableLoading: false,
tableLoading: true,
init: true,
barChartLoading: false,
barChartLoading: true,
pieChartLoading: false,
};
},
......@@ -564,28 +564,28 @@ export default {
// overflow-y: auto;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #2e5e99;
}
/*滚动条的轨道*/
::-webkit-scrollbar-track {
background-color: #0f2645;
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #2e5e99;
}
/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button {
width: 0;
height: 0;
}
//::-webkit-scrollbar {
// width: 10px;
// height: 10px;
// background-color: #2e5e99;
//}
//
///*滚动条的轨道*/
//::-webkit-scrollbar-track {
// background-color: #0f2645;
//}
//
///*滚动条的滑块按钮*/
//::-webkit-scrollbar-thumb {
// border-radius: 10px;
// background-color: #2e5e99;
//}
//
///*滚动条的上下两端的按钮*/
//::-webkit-scrollbar-button {
// width: 0;
// height: 0;
//}
.m-b-10 {
margin-bottom: 10px;
......
wj-manage-web/src/views/safety/bottomCameras.vue
View file @ 1e0722bb
......@@ -3,7 +3,7 @@
<div class="cross_videos_title"><span></span>路口视频</div>
<div class="cross_videos">
<div class="videos_placeholder" v-if="vidType === 'online'">
<div v-show="list.length === 0" class="emptyText">
<div v-show="onlineVideoNum === 0" class="emptyText">
<img :src="require('../../assets/images/holo/svg/noWarning.svg')" />
<div>暂无路口视频</div>
</div>
......@@ -42,7 +42,7 @@
></loop-video>
</div>
</div>
<div class="emptyText" v-if="!channels.length">
<div class="emptyText" v-if="offlineVideoNum===0">
<img :src="require('../../assets/images/holo/svg/noWarning.svg')" />
<div>此事件无对应视频</div>
</div>
......@@ -61,6 +61,8 @@ export default {
return {
list: [],
channels: [],
onlineVideoNum:0,
offlineVideoNum: 0
};
},
computed: {},
......@@ -68,12 +70,14 @@ export default {
cameraListData(e) {
this.destroyAll();
this.list = [];
this.onlineVideoNum = 0
setTimeout(() => {
this.list = e;
}, 50);
},
cameraChannels(e) {
this.destroyAll();
this.offlineVideoNum = 0
this.channels = [];
setTimeout(() => {
this.channels = e;
......@@ -111,16 +115,8 @@ export default {
},
},
methods: {
vidId(videoUrl) {
return videoUrl
.replaceAll("/", "_")
.replaceAll(".", "_")
.replaceAll("?", "_")
.replaceAll("=", "_")
.replaceAll("&", "_")
.replaceAll(":", "_");
},
vidCanplay(item) {
this.onlineVideoNum+=1
document.getElementById(`safety${item.oid}`).style.display = "unset";
},
destroyAll() {
......@@ -131,6 +127,7 @@ export default {
}
},
videoReady(channel) {
this.offlineVideoNum+=1
document.getElementById(`historyVideo${channel}`).style.display = "unset";
},
},
......@@ -218,27 +215,27 @@ export default {
margin-right: 0;
}
}
/*滚动条样式：谷歌浏览器下*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #2e5e99;
}
/*滚动条的轨道*/
::-webkit-scrollbar-track {
background-color: #0f2645;
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #2e5e99;
}
/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button {
height: 0;
width: 0;
}
///*滚动条样式：谷歌浏览器下*/
//::-webkit-scrollbar {
// width: 10px;
// height: 10px;
// background-color: #2e5e99;
//}
//
///*滚动条的轨道*/
//::-webkit-scrollbar-track {
// background-color: #0f2645;
//}
//
///*滚动条的滑块按钮*/
//::-webkit-scrollbar-thumb {
// border-radius: 10px;
// background-color: #2e5e99;
//}
//
///*滚动条的上下两端的按钮*/
//::-webkit-scrollbar-button {
// height: 0;
// width: 0;
//}
</style>
wj-manage-web/src/views/safety/index.vue
View file @ 1e0722bb
......@@ -159,7 +159,7 @@ export default {
},
data() {
return {
safetyIndexLoading: false,
safetyIndexLoading: true,
pathParam: {},
pathApiName: "",
cameraList: [],
......@@ -322,29 +322,29 @@ export default {
color: rgba(255, 255, 255, 0.85);
font-size: 16px;
}
/*滚动条样式：谷歌浏览器下*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #2e5e99;
}
/*滚动条的轨道*/
::-webkit-scrollbar-track {
background-color: #0f2645;
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #2e5e99;
}
/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button {
width: 0;
height: 0;
}
///*滚动条样式：谷歌浏览器下*/
//::-webkit-scrollbar {
// width: 10px;
// height: 10px;
// background-color: #2e5e99;
//}
//
///*滚动条的轨道*/
//::-webkit-scrollbar-track {
// background-color: #0f2645;
//}
//
///*滚动条的滑块按钮*/
//::-webkit-scrollbar-thumb {
// border-radius: 10px;
// background-color: #2e5e99;
//}
//
///*滚动条的上下两端的按钮*/
//::-webkit-scrollbar-button {
// width: 0;
// height: 0;
//}
::v-deep .el-input__inner {
border: 1px solid rgba(25, 44, 74, 1);
background-color: transparent;
......
wj-manage-web/src/views/safety/totalPieChart.vue
View file @ 1e0722bb
......@@ -61,7 +61,7 @@ export default {
},
data() {
return {
pieChartLoading: false,
pieChartLoading: true,
total: 0,
checkChartTypes: [],
currentTitle: "",
......
wj-manage-web/src/views/safety/typePieChart.vue
View file @ 1e0722bb
......@@ -59,7 +59,7 @@ export default {
},
data() {
return {
pieChartLoading: false,
pieChartLoading: true,
total: 0,
formatdata: [],
chartData: null,
......
wj-manage-web/src/views/situation/floatData/messageBoxes.vue
View file @ 1e0722bb
......@@ -24,74 +24,80 @@
</div> -->
</div>
<div class="left_box aside" :class="[{ hide_left: !show }]">
<regional-index class="item" />
<traffic-flow class="item" />
<ped-and-no-vehicles class="item" />
<regional-index class="item"/>
<traffic-flow class="item"/>
<ped-and-no-vehicles class="item"/>
</div>
<div class="right_box aside" :class="[{ hide_right: !show }]">
<in-transit class="item" />
<traffic-event class="item" />
<in-transit class="item"/>
<traffic-event class="item"/>
<msg-card class="item item-warningData" title="告警信息">
<vue-seamless-scroll
class="warningMsg"
:data="warningData"
:class-option="optionSetting"
v-show="warningData.length"
>
<li
v-for="(item, index) of warningData"
:key="index"
@mouseover="addWarningPopup(item)"
@mouseout="delWarningPopup"
<div class="full-w full-h" v-loading="alarmLoading"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
<vue-seamless-scroll
class="warningMsg"
:data="warningData"
:class-option="optionSetting"
v-show="warningData.length"
>
<div class="warningItem">
<div
class="left-type"
:class="[
<li
v-for="(item, index) of warningData"
:key="index"
@mouseover="addWarningPopup(item)"
@mouseout="delWarningPopup(item)"
>
<div class="warningItem">
<div
class="left-type"
:class="[
{ acci: item.eventType === '疑似事故' },
{ crod: item.eventType === '轻微拥堵' },
{ crodz: item.eventType === '中度拥堵' },
{ crodzz: item.eventType === '重度拥堵' },
]"
>
<span>{{ item.eventType }}</span>
</div>
<div
class="message"
:class="[
>
<span>{{ item.eventType }}</span>
</div>
<div
class="message"
:class="[
{ 'acci-border': item.eventType === '疑似事故' },
{ 'crod-border': item.eventType === '轻微拥堵' },
{ 'crodz-border': item.eventType === '中度拥堵' },
{ 'crodzz-border': item.eventType === '重度拥堵' },
]"
>
<div class="message-title">
<i class="icon-location"></i>
<div class="right-title">
{{ item.placeDesc }}
>
<div class="message-title">
<i class="icon-location"></i>
<div class="right-title">
{{ item.placeDesc }}
</div>
</div>
</div>
<div class="message-detail">
<div class="message-detail">
<span :title="`发生时间:` + item.happenTime"
>发生时间： {{ item.happenTime }}</span
>发生时间： {{ item.happenTime }}</span
>
<span :title="`时长:` + item.duration + 'min'"
<span :title="`时长:` + item.duration + 'min'"
>时长： {{ item.duration }}min</span
>
<span :title="`事件来源:` + item.source"
>
<span :title="`事件来源:` + item.source"
>事件来源： {{ item.source }}</span
>
>
</div>
</div>
</div>
</div>
</li>
</vue-seamless-scroll>
<div class="emptyText" v-show="!warningData.length">
<img
:src="require('../../../assets/images/holo/svg/noWarning.svg')"
/>
<div>暂无告警信息</div>
</li>
</vue-seamless-scroll>
<div class="emptyText" v-show="!warningData.length">
<img
:src="require('../../../assets/images/holo/svg/noWarning.svg')"
/>
<div>暂无告警信息</div>
</div>
</div>
</msg-card>
</div>
</div>
......@@ -100,13 +106,14 @@
<script>
import msgCard from "../../../components/Standard/msg-card.vue";
import vueSeamlessScroll from 'vue-seamless-scroll'
import { eventAlarm, getOverDatas } from "../../../dao/situation";
import { initWs } from "../../../config/holo/websocket";
import {eventAlarm, getOverDatas} from "../../../dao/situation";
import {initWs} from "../../../config/holo/websocket";
import RegionalIndex from "./msgLeft/regionalIndex.vue";
import TrafficFlow from "./msgLeft/trafficFlow.vue";
import pedAndNoVehicles from "./msgLeft/pedAndNoVehicles.vue";
import InTransit from "./msgRight/inTransit.vue";
import trafficEvent from "./msgRight/trafficEvent.vue";
export default {
props: ["show"],
components: {
......@@ -120,6 +127,7 @@ export default {
},
data() {
return {
alarmLoading: true,
init: true,
// 告警信息
warningData: [],
......@@ -144,7 +152,8 @@ export default {
};
},
},
created() {},
created() {
},
mounted() {
// 头盔率推送
this.initHelMetSocket();
......@@ -170,7 +179,8 @@ export default {
initHelMetSocket() {
this.helMetSocket = initWs({
name: "callHelmet",
url: ws_config.BASE_URL,
// url: ws_config.BASE_URL,
url: `ws://${window.wsHost}/holows/subscribe`,
callback: this.callHelmet,
});
this.helMetSocket.ws.onopen = () => {
......@@ -197,20 +207,21 @@ export default {
return match?.name || "未定义";
},
addWarningPopup(item) {
this.$emit("addWarningPopup", item, { type: "hover" });
this.$emit("addWarningPopup", item, {type: "hover"});
},
delWarningPopup() {
this.$emit("delWarningPopup");
delWarningPopup(item) {
this.$emit("delWarningPopup", item.eventSerialNumber);
},
diff(oldData, newData) {
// id 只在 newData 中存在且不在 oldData 中存在的即为 add
const add = newData.filter(
(e) => !oldData.find((c) => c.startTime === e.startTime)
return newData.filter(
(e) => !oldData.find((c) => c.startTime === e.startTime)
);
return add;
},
getEventAlarm() {
// this.alarmLoading = true
eventAlarm().then((res) => {
this.alarmLoading = false
// console.log("事件告警", res.content);
this.warningData = res.content;
if (!this.init) {
......@@ -227,14 +238,14 @@ export default {
});
},
getOverDataTopSecond() {
getOverDatas({ type: 1 }).then((res) => {
getOverDatas({type: 1}).then((res) => {
if (res.content) {
this.topDataSecond = res.content;
}
});
},
getOverDataTopMin() {
getOverDatas({ type: 2 }).then((res) => {
getOverDatas({type: 2}).then((res) => {
if (res.content) {
this.topDataMin = res.content;
}
......@@ -269,6 +280,7 @@ export default {
.item {
flex: 0 0 32%;
overflow: hidden;
.emptyText {
height: 100%;
display: flex;
......@@ -277,6 +289,7 @@ export default {
color: rgba(255, 255, 255, 0.7);
align-items: center;
justify-content: center;
img {
margin-bottom: 10px;
height: 80px;
......@@ -455,7 +468,7 @@ export default {
align-items: center;
height: 22px;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
......@@ -492,24 +505,20 @@ export default {
left: 0;
z-index: 10;
pointer-events: none;
background-image: linear-gradient(
90deg,
rgba(3, 11, 25, 1) 0%,
rgba(3, 11, 25, 0.2) 8%,
rgba(3, 11, 25, 0) 12%,
rgba(3, 11, 25, 0) 50%,
rgba(3, 11, 25, 0) 88%,
rgba(3, 11, 25, 0.2) 92%,
rgba(3, 11, 25, 1) 100%
),
linear-gradient(
0deg,
rgba(3, 11, 25, 1) 0%,
rgba(3, 11, 25, 0.2) 8%,
rgba(3, 11, 25, 0) 12%,
rgba(3, 11, 25, 0) 80%,
rgba(3, 11, 25, 0.5) 95%,
rgba(3, 11, 25, 1) 100%
);
background-image: linear-gradient(90deg,
rgba(3, 11, 25, 1) 0%,
rgba(3, 11, 25, 0.2) 8%,
rgba(3, 11, 25, 0) 12%,
rgba(3, 11, 25, 0) 50%,
rgba(3, 11, 25, 0) 88%,
rgba(3, 11, 25, 0.2) 92%,
rgba(3, 11, 25, 1) 100%),
linear-gradient(0deg,
rgba(3, 11, 25, 1) 0%,
rgba(3, 11, 25, 0.2) 8%,
rgba(3, 11, 25, 0) 12%,
rgba(3, 11, 25, 0) 80%,
rgba(3, 11, 25, 0.5) 95%,
rgba(3, 11, 25, 1) 100%);
}
</style>
wj-manage-web/src/views/situation/floatData/msgLeft/pedAndNoVehicles.vue
View file @ 1e0722bb
<template>
<msg-card class="item item-pedNoVehicles" title="行人与非机动车">
<el-tabs v-model="tabsActiveName" @tab-click="tabsHandleClick">
<el-tabs v-loading="tabsLoading"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)" v-model="tabsActiveName" @tab-click="tabsHandleClick">
<el-tab-pane name="Classify" label="非机动车分类监控">
<div class="pedClassify">
<div class="circleChart">
......@@ -82,6 +84,7 @@ export default {
},
data() {
return {
tabsLoading: true,
charts: {},
tabsActiveName: "PedNoVehicles",
classify: { startTime: "", endTime: "", dataList: [] },
......@@ -293,7 +296,9 @@ export default {
},
getDetail() {
this.highChartDataArray = [];
// this.tabsLoading = true
noVehicleDetail().then((res) => {
this.tabsLoading=false
let content = res.content;
this.classify = content;
let sortList = content.dataList.sort((a, b) => {
......@@ -305,7 +310,9 @@ export default {
});
},
getTrend() {
// this.tabsLoading = true
noVehicleTrend().then((res) => {
this.tabsLoading = false
let content = res.content;
this.solveClassifyTrend(content);
});
......@@ -315,7 +322,9 @@ export default {
this.getTrend();
},
loadPedNoVehicles() {
// this.tabsLoading = true
pedNonAnalysis().then((res) => {
this.tabsLoading = false
console.log("行人非机动车", res.content);
this.solvePedNonAanlysis(res.content);
});
......
wj-manage-web/src/views/situation/floatData/msgLeft/regionalIndex.vue
View file @ 1e0722bb
<template>
<msg-card class="item-regionalIndex" title="区域指数">
<div id="regionalIndex"></div>
<div v-loading="regionLoading"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)" id="regionalIndex"></div>
</msg-card>
</template>
......@@ -17,6 +19,7 @@ export default {
},
data() {
return {
regionLoading: true,
chart: null,
trafficMap: [
{ key: "1", value: "畅通" },
......@@ -29,7 +32,9 @@ export default {
},
methods: {
getIndexes() {
// this.regionLoading = true
areaList().then((res) => {
this.regionLoading = false
console.log("区域指数", res);
this.$nextTick(() => {
this.regionalIndex(res.content);
......
wj-manage-web/src/views/situation/floatData/msgLeft/trafficFlow.vue
View file @ 1e0722bb
<template>
<msg-card class="item-trafficflow" title="交通流量">
<el-tabs v-model="tabsActiveName" @tab-click="tabsHandleClick">
<el-tabs v-loading="tabsLoading"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)" v-model="tabsActiveName" @tab-click="tabsHandleClick">
<el-tab-pane name="cross" label="路口">
<div id="trafficFlowCross" class="full-h"></div>
</el-tab-pane>
......@@ -22,8 +24,9 @@ import {
eventAlarm,
getOverDatas,
} from "../../../../dao/situation";
import { getFontSize } from "../../../../config/holo/fontSize.js";
import {getFontSize} from "../../../../config/holo/fontSize.js";
import msgCard from "../../../../components/Standard/msg-card.vue";
let timer = null;
export default {
......@@ -33,6 +36,7 @@ export default {
},
data() {
return {
tabsLoading: true,
charts: {},
// 交通流量
tabsActiveName: "cross",
......@@ -42,7 +46,9 @@ export default {
methods: {
tabsHandleClick(tab) {
this.$nextTick(() => {
this.trafficFlow(this.trafficFlowData[tab.name], tab.name === "cross");
if (this.trafficFlowData[tab.name]) {
this.trafficFlow(this.trafficFlowData[tab.name], tab.name === "cross");
}
});
},
trafficFlow(content, isCross) {
......@@ -51,8 +57,8 @@ export default {
dataZoom: {
type: "inside",
startValue: content.flowList[0].list
? content.flowList[0].list.length - 6
: 0,
? content.flowList[0].list.length - 6
: 0,
endValue: content.flowList[0].list.length - 1,
},
color: [
......@@ -76,9 +82,9 @@ export default {
str += `<p>${params[i].seriesName}&nbsp;&nbsp;:&nbsp;&nbsp;${params[i].value}</p>`;
}
var tooltipHtml =
'<div style="max-height:120px;overflow-y:auto">' +
str +
"</div>";
'<div style="max-height:120px;overflow-y:auto">' +
str +
"</div>";
return tooltipHtml;
}
},
......@@ -163,12 +169,12 @@ export default {
};
if (isCross) {
this.charts.cross = echarts.init(
document.getElementById("trafficFlowCross")
document.getElementById("trafficFlowCross")
);
this.charts.cross && this.charts.cross.setOption(option);
} else {
this.charts.road = echarts.init(
document.getElementById("trafficFlowRoad")
document.getElementById("trafficFlowRoad")
);
this.charts.road && this.charts.road.setOption(option);
}
......@@ -177,6 +183,7 @@ export default {
getCrossData(init) {
//路口
crossFlow().then((res) => {
this.tabsLoading = false
console.log("路口流量", res);
if (res.content.flowList) {
this.trafficFlowData.cross = res.content;
......
wj-manage-web/src/views/situation/floatData/msgRight/inTransit.vue
View file @ 1e0722bb
<template>
<msg-card class="item-inTransit" title="在途车辆">
<div class="statistics">
<Chart :options="highchartOptions" class="circleChart" />
<div class="items">
<div class="local key">
<span class="legend b"></span>
<span>本埠车辆</span>
<span class="value1">{{ activeVehicle.localVehicleNum }}辆 </span>
<span class="value2">{{
convert2Percent(
activeVehicle.localVehicleNum,
activeVehicle.localVehicleNum + activeVehicle.outVehicleNum
)
}}</span>
</div>
<div class="other key">
<span class="legend y"></span>
<span>外埠车辆</span>
<span class="value1">{{ activeVehicle.outVehicleNum }}辆 </span
><span class="value2">
<div class="full-w full-h" v-loading="inTransitLoading"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
<div class="statistics">
<Chart :options="highchartOptions" class="circleChart" />
<div class="items">
<div class="local key">
<span class="legend b"></span>
<span>本埠车辆</span>
<span class="value1">{{ activeVehicle.localVehicleNum }}辆 </span>
<span class="value2">{{
convert2Percent(
activeVehicle.localVehicleNum,
activeVehicle.localVehicleNum + activeVehicle.outVehicleNum
)
}}</span>
</div>
<div class="other key">
<span class="legend y"></span>
<span>外埠车辆</span>
<span class="value1">{{ activeVehicle.outVehicleNum }}辆 </span
><span class="value2">
{{
convert2Percent(
activeVehicle.outVehicleNum,
activeVehicle.localVehicleNum + activeVehicle.outVehicleNum
activeVehicle.outVehicleNum,
activeVehicle.localVehicleNum + activeVehicle.outVehicleNum
)
}}</span
>
</div>
</div>
</div>
<div id="transitVehicle" class="ztclC"></div>
</div>
<div id="transitVehicle" class="ztclC"></div>
</msg-card>
</template>
......@@ -103,6 +108,7 @@ export default {
},
data() {
return {
inTransitLoading: true,
chart: null,
// 在途车辆
activeVehicle: {},
......@@ -117,6 +123,7 @@ export default {
},
getAreaRecent() {
areaRecent().then((res) => {
this.inTransitLoading = false
// console.log("在途车辆", res.content);
this.activeVehicle = res.content;
// this.vehicleProp();
......@@ -286,6 +293,7 @@ export default {
<style lang="less" scoped>
.item-inTransit {
.ztclC {
height: calc(100% - 50px);
}
......
wj-manage-web/src/views/situation/floatData/msgRight/trafficEvent.vue
View file @ 1e0722bb
<template>
<msg-card class="item-trafficEvent" title="交通事件">
<div class="full-h trafficEvent">
<div class="full-h trafficEvent" v-loading="eventLoading"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
<el-tabs style="height: 100%;">
<el-tab-pane v-for="(item,index) of trafficEvents" :key="index" style="height: 100%;">
<template slot="label"
......@@ -48,6 +50,7 @@ export default {
},
data() {
return {
eventLoading: true,
chart: null,
// 交通事件
trafficEvents: [],
......@@ -56,6 +59,7 @@ export default {
methods: {
getEventAnalysis() {
eventAnalysis().then((res) => {
this.eventLoading = false
// console.log("事件分析", res.content);
this.trafficEvents = res.content;
});
......@@ -70,11 +74,11 @@ export default {
<style lang="less" scoped>
.item-trafficEvent {
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: #f5f7fa;
}
//::-webkit-scrollbar {
// width: 0;
// height: 0;
// background-color: #f5f7fa;
//}
::v-deep .el-tabs__item {
color: white;
......
wj-manage-web/src/views/situation/floatData/videoList - 副本 (3).vue deleted 100644 → 0
View file @ fc2e75a4
<template>
<div
v-show="vdrList && vdrList.length"
class="videoList"
:style="`width:${
vdrList.length * (178 + 5) + 15
}px;height:120px;padding-left:10px`"
>
<vue-draggable-resizable
:disable-user-select="false"
:parent="false"
:w="item.w"
:h="item.h"
:id="item.monitorChannel"
v-show="false"
v-for="item of vdrList"
:x="item.x"
:y="item.y"
:resizable="item.active"
:draggable="item.active"
:key="item.monitorChannel"
>
<div
class="closeButton el-icon-close"
@click="deleteVideo(item.videoUrl)"
></div>
<div
v-show="!item.active"
class="expandIcon el-icon-arrow-up"
@click="activeDiv(item.videoUrl)"
></div>
<div
v-show="item.active"
class="expandIcon el-icon-arrow-down"
@click="disActiveDiv(item.videoUrl)"
></div>
<camera-video
@vidCanplay="vidCanplay"
:ref="`videoContainer`"
class="videoContainer"
:videoData="item"
/>
</vue-draggable-resizable>
</div>
</template>
<script>
import CameraVideo from "../../../components/Standard/cameraVideo.vue";
export default {
components: {
CameraVideo,
},
name: "videoList",
props: ["showCameras"],
data() {
return {
vdrList: [],
};
},
mounted() {
this.vdrList = [];
for (let i = 0; i < this.showCameras.length; i++) {
this.vdrList.push({
...this.showCameras[i],
w: 178,
h: 100,
x: i * (178 + 5),
y: 10,
active: false,
});
}
},
methods: {
vidCanplay(item) {
// console.log('canplay..',item);
// this.vdrList.push({
// ...item,
// w: 178,
// h: 100,
// x: this.vdrList.length * (178 + 5),
// y: 10,
// active: false,
// });
// this.$forceUpdate();
},
activeDiv(url) {
for (let item of this.vdrList) {
if (item.videoUrl === url) {
item.active = true;
item.w = 600;
item.h = 336;
item.y = -500;
item.x = -200;
}
}
this.$forceUpdate();
},
disActiveDiv(url) {
for (let i = 0; i < this.vdrList.length; i++) {
if (this.vdrList[i].videoUrl === url) {
this.vdrList[i].active = false;
this.vdrList[i].w = 178;
this.vdrList[i].h = 100;
this.vdrList[i].x = (178 + 5) * i;
this.vdrList[i].y = 10;
}
}
this.$forceUpdate();
},
deleteVideo(videoUrl) {
for (let container of this.$refs.videoContainer) {
if (container.videoData.videoUrl === videoUrl) {
container.destroy();
}
}
for (let i = 0; i < this.vdrList.length; i++) {
if (this.vdrList[i].videoUrl == videoUrl) {
this.vdrList.splice(i,1)
i = i-1
}
}
// this.$emit("delVideo", videoUrl);
},
},
computed: {},
watch: {},
beforeDestroy() {},
};
</script>
<style lang="less" scoped>
::v-deep .el-icon-close:before {
color: white;
}
.videoList {
position: absolute;
bottom: 12px;
z-index: 13;
border: 1px solid rgba(83, 146, 189, 1);
background: rgba(10, 26, 41, 0.9);
border-radius: 6px;
left: 50%;
display: flex;
flex-wrap: nowrap;
transform: translateX(-50%);
overflow: visible;
.closeButton {
position: absolute;
right: 12px;
top: 10px;
border-radius: 50%;
height: 18px;
width: 18px;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
background-color: rgba(1, 158, 249, 0.7);
}
.closeButton:hover {
background-color: rgba(1, 158, 249, 1);
}
.videoItem {
width: 230px;
margin: 0 5px;
aspect-ratio: 16/9;
position: relative;
}
.videoContainer {
height: 100%;
width: 100%;
}
.expandIcon {
color: #019ef9;
font-size: 16px;
cursor: pointer;
position: absolute;
left: 12px;
top: 10px;
z-index: 11;
}
}
</style>
wj-manage-web/src/views/situation/floatData/videoList - 副本.vue deleted 100644 → 0
View file @ fc2e75a4
<template>
<div class="videoList" id="situation-video-list" v-show="showVideos">
<div class="videoListBorder">
<div
class="borderItem"
v-for="item of videoListData"
:key="item"
v-show="showVideoItem(item)"
></div>
</div>
<div
class="videoItem"
v-for="item of videoListData"
:key="item"
v-show="showVideoItem(item)"
:id="`div${item}`"
>
<div
class="closeButton el-icon-close"
v-show="getDelShow(item)"
@click="deleteVideo(item)"
></div>
<div
v-show="getUpShow(item)"
class="expandIcon el-icon-arrow-up"
@click="arrowUp(item)"
></div>
<div
v-show="getDownShow(item)"
class="expandIcon el-icon-arrow-down"
@click="arrowDown(item)"
></div>
<camera-video
@vidCanplay="vidCanplay"
:ref="`videoContainer`"
class="videoContainer"
:videoData="item"
/>
</div>
</div>
</template>
<script>
import CameraVideo from "../../../components/Standard/cameraVideo.vue";
export default {
components: {
CameraVideo,
},
name: "videoList",
props: ["videoListData"],
data() {
return {
videoShow: {},
scalesControl: {},
dragControl: {},
scale: 1,
offsetX: 0,
currentUp: "",
offsetY: 0,
currentEl: null,
};
},
mounted() {},
methods: {
getChannel(item) {
let array = item.split("=");
return array[array.length - 1];
},
showVideoItem(item) {
return true;
let channel = this.getChannel(item);
return this.videoShow[channel];
},
vidCanplay(item) {
let channel = this.getChannel(item);
this.videoShow[channel] = true;
},
getUpShow(item) {
return this.currentUp != item && this.currentUp == "";
},
getDelShow(item) {
return (
this.currentUp == item ||
(this.currentUp != item && this.currentUp == "")
);
},
getDownShow(item) {
return this.currentUp == item;
},
arrowUp(item) {
console.log("item", item);
this.$emit("updateCamera", item);
this.currentUp = item;
this.scale = 2;
let el = document.getElementById(`div${item}`);
this.currentEl = el;
let left = document
.getElementById(`situation-video-list`)
.getBoundingClientRect().left;
el.style.position = "absolute";
el.style.left = `${190 - left}px`;
el.style.top = "-550px";
el.style.border = "1px solid #5392bd";
el.style.borderRadius = "6px";
el.style.transform = `scale(${this.scale})`;
el.addEventListener("wheel", this.wheelListener);
this.scalesControl[item] = true;
el.addEventListener("mousedown", this.dragListener);
this.dragControl[item] = true;
},
arrowDown(item) {
if (this.currentUp == item) {
this.$emit("resetCamera");
}
this.currentUp = "";
this.scale = 1;
this.currentEl.style.transform = `scale(${this.scale})`;
this.currentEl.style.left = "unset";
this.currentEl.style.top = "unset";
this.currentEl.style.border = "none";
this.currentEl.style.position = "relative";
//如果当前为 resizable 状态 则 removeEventListener
if (this.scalesControl[item]) {
this.currentEl.removeEventListener("wheel", this.wheelListener);
this.scalesControl[item] = false;
}
// 如果当前为 draggable 状态 则 removeEventListener
if (this.dragControl[item]) {
this.currentEl.removeEventListener("mousedown", this.dragListener);
}
},
// 鼠标滚轮事件监听 控制缩放
wheelListener(e) {
e.preventDefault();
var zoomDelta = e.deltaY < 0 ? 0.1 : -0.1;
this.scale += zoomDelta;
this.scale = Math.max(0.5, this.scale); // 最小缩放为0.5
this.currentEl.style.transform = `scale(${this.scale})`;
},
dragListener(e) {
console.log("e.clientX", e.clientX, this.currentEl.offsetLeft);
this.offsetX = e.clientX - this.currentEl.offsetLeft;
this.offsetY = e.clientY - this.currentEl.offsetTop;
document.addEventListener("mousemove", this.draging);
document.addEventListener("mouseup", this.endDrag);
},
draging(e) {
this.currentEl.style.left = e.clientX - this.offsetX + "px";
this.currentEl.style.top = e.clientY - this.offsetY + "px";
},
endDrag() {
document.removeEventListener("mousemove", this.draging);
document.removeEventListener("mouseup", this.endDrag);
},
destroyAll() {
if (this.$refs.videoContainer) {
for (let container of this.$refs.videoContainer) {
container.destroy();
}
}
},
deleteVideo(item) {
if (this.currentUp == item) {
this.$emit("resetCamera");
}
setTimeout(() => {
for (let container of this.$refs.videoContainer) {
if (container.videoData === item) {
container.destroy();
}
}
this.currentUp = "";
this.$emit("delVideo", item);
}, 0);
},
},
computed: {
showVideos() {
return this.videoListData && this.videoListData.length;
},
},
beforeDestroy() {
this.videoShow = {};
},
};
</script>
<style lang="less" scoped>
/*滚动条样式：谷歌浏览器下*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #2e5e99;
}
/*滚动条的轨道*/
::-webkit-scrollbar-track {
background-color: #0f2645;
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #2e5e99;
}
/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button {
height: 0;
width: 0;
}
::v-deep .el-icon-close:before {
color: white;
}
.videoList {
position: absolute;
padding: 2px 5px;
bottom: 12px;
width: 80%;
z-index: 13;
border-radius: 6px;
left: 50%;
display: flex;
justify-content: center;
flex-wrap: nowrap;
transform: translateX(-50%);
.videoListBorder {
border: 1px solid rgba(83, 146, 189, 1);
border-radius: 6px;
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100%;
top: 0;
display: flex;
max-width: 100%;
.borderItem {
width: 230px;
padding: 0 5px;
aspect-ratio: 180/106;
position: relative;
}
}
.videoItem {
width: 230px;
padding: 0 5px;
aspect-ratio: 180/106;
position: relative;
.videoContainer {
height: 100%;
width: 100%;
}
.closeButton {
display: none;
position: absolute;
right: 12px;
top: 8px;
border-radius: 50%;
height: 20px;
width: 20px;
z-index: 9999;
justify-content: center;
align-items: center;
cursor: pointer;
background-color: #019ef9;
}
.closeButton:hover {
background-color: rgba(20, 146, 183, 1);
}
}
.expandIcon {
display: none;
color: #019ef9;
font-size: 16px;
cursor: pointer;
position: absolute;
left: 12px;
top: 10px;
z-index: 11;
}
.videoItem:hover .expandIcon {
display: unset;
}
.videoItem:hover .closeButton {
display: flex;
}
}
</style>
wj-manage-web/src/views/situation/floatData/videoList.vue
View file @ 1e0722bb
......@@ -103,15 +103,17 @@ export default {
this.scale = 2;
let el = document.getElementById(`situation${item.oid}`);
this.currentEl = el;
let left = document
.getElementById(`situation-video-list`)
.getBoundingClientRect().left;
// let left = document
// .getElementById(`situation-video-list`)
// .getBoundingClientRect().left;
el.style.padding = '0px'
el.style.position = "absolute";
el.style.height = "140px";
el.style.left = `${190 - left}px`;
el.style.top = "-550px";
el.style.height = "150px";
// el.style.left = `${190 - left}px`;
el.style.left = `200px`;
el.style.top = "200px";
el.style.border = "1px solid #5392bd";
el.style.borderRadius = "6px";
// el.style.borderRadius = "6px";
el.style.transform = `scale(${this.scale})`;
el.addEventListener("wheel", this.wheelListener);
this.scalesControl[`situation${item.oid}`] = true;
......@@ -128,7 +130,6 @@ export default {
this.currentEl.style.left = "unset";
this.currentEl.style.top = "unset";
this.currentEl.style.border = "none";
this.currentEl.style.height = "100%";
this.currentEl.style.position = "relative";
//如果当前为 resizable 状态 则 removeEventListener
if (this.scalesControl[`situation${item.oid}`]) {
......@@ -201,28 +202,28 @@ export default {
<style lang="less" scoped>
/*滚动条样式：谷歌浏览器下*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #2e5e99;
}
/*滚动条的轨道*/
::-webkit-scrollbar-track {
background-color: #0f2645;
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #2e5e99;
}
/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button {
height: 0;
width: 0;
}
//::-webkit-scrollbar {
// width: 0;
// height: 10px;
// background-color: #2e5e99;
//}
//
///*滚动条的轨道*/
//::-webkit-scrollbar-track {
// background-color: #0f2645;
//}
//
///*滚动条的滑块按钮*/
//::-webkit-scrollbar-thumb {
// border-radius: 10px;
// background-color: #2e5e99;
//}
//
///*滚动条的上下两端的按钮*/
//::-webkit-scrollbar-button {
// height: 0;
// width: 0;
//}
::v-deep .el-icon-close:before {
color: white;
......@@ -233,19 +234,24 @@ export default {
.videoList {
position: absolute;
padding: 2px 5px;
bottom: 12px;
width: 80%;
max-height: 140px;
z-index: 13;
border-radius: 6px;
left: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
transform: translateX(-50%);
font-size: 14px;
// padding: 2px 5px;
bottom: 12px;
width: 100%;
height: 100%;
z-index: 13;
border-radius: 6px;
left: 50%;
display: flex;
justify-content: center;
align-items:flex-end;
flex-wrap: nowrap;
transform: translateX(-50%);
font-size: 14px;
// height: 300px;
overflow-x: auto;
padding: 0 200px;
pointer-events: none;
.videoListBorder {
padding: 0 5px;
......@@ -254,10 +260,11 @@ export default {
border-radius: 6px;
position: absolute;
left: 50%;
display: none;
transform: translateX(-50%);
height: 100%;
top: 0;
display: flex;
// display: flex;
max-width: 100%;
.borderItem {
height: 100%;
......@@ -267,10 +274,11 @@ export default {
}
}
.videoItem {
height: 100%;
height: 150px;
padding: 0 5px;
max-height: 140px;
aspect-ratio: 16/9;
pointer-events: all;
// max-height: 140px;
// aspect-ratio: 16/9;
position: relative;
.videoContainer {
height: 100%;
......
wj-manage-web/src/views/situation/index - 副本.vue deleted 100644 → 0
View file @ fc2e75a4
This diff is collapsed.
wj-manage-web/src/views/situation/index.vue
View file @ 1e0722bb
This diff is collapsed.
wj-manage-web/src/views/situation/mapPopup/alarmPopup.vue 0 → 100644
View file @ 1e0722bb
This diff is collapsed.
wj-manage-web/src/views/track/index.vue
View file @ 1e0722bb
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment