Skip to content

T
traffic-front
Commit cd06f241 authored by zhangshengbo's avatar zhangshengbo
Browse files
Options

Merge branch 'slj' into 'traffic-front-sam' 

Slj

See merge request !1
parents b30b68f5 451c60bf
Hide whitespace changes
Inline Side-by-side
Showing with 573 additions and 390 deletions
package-lock.json
View file @ cd06f241
...@@ -1602,13 +1602,14 @@ ...@@ -1602,13 +1602,14 @@
"dev": true "dev": true
}, },
"@vue/test-utils": { "@vue/test-utils": {
"version": "1.0.0-beta.29", "version": "1.1.2",
"resolved": "https://registry.npm.taobao.org/@vue/test-utils/download/@vue/test-utils-1.0.0-beta.29.tgz", "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.1.2.tgz",
"integrity": "sha1-yULPJeiRzwgbagMzK0rh70MHJvA=", "integrity": "sha512-utbIL7zn9c+SjhybPwh48lpWCiluFCbP1yyRNAy1fQsw/6hiNFioaWy05FoVAFIZXC5WwBf+5r4ypfM1j/nI4A==",
"dev": true, "dev": true,
"requires": { "requires": {
"dom--types": "^1.0.0", "dom-event-types": "^1.0.0",
"lodash": "^4.17.4" "lodash": "^4.17.15",
"pretty": "^2.0.0"
} }
}, },
"@vue/web-component-wrapper": { "@vue/web-component-wrapper": {
......
package.json
View file @ cd06f241
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
"@vue/cli-plugin-unit-jest": "^3.12.1", "@vue/cli-plugin-unit-jest": "^3.12.1",
"@vue/cli-service": "^3.12.1", "@vue/cli-service": "^3.12.1",
"@vue/eslint-config-airbnb": "^4.0.1", "@vue/eslint-config-airbnb": "^4.0.1",
"@vue/test-utils": "1.0.0-beta.29", "@vue/test-utils": "^1.1.2",
"babel-core": "7.0.0-bridge.0", "babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"babel-jest": "^23.6.0", "babel-jest": "^23.6.0",
......
src/config.js
View file @ cd06f241
const address = 'http://localhost:8088/traffic/'; const address = 'http://localhost:8080/traffic/';
const videoAddress = 'http://152.136.233.116:8000'; const videoAddress = 'http://152.136.233.116:8000';
const photoAddress = 'http://152.136.233.116:8000'; const photoAddress = 'http://152.136.233.116:8000';
const title = '公路平台'; const imgAddress = '/traffic/';// 测试环境
export { export {
address, photoAddress, title, videoAddress, address, photoAddress, imgAddress, videoAddress,
}; };
// 这个是 本地配置 打包时把 config-prod.js的内容复制过来 // 这个是 本地配置 打包时把 config-prod.js的内容复制过来
src/views/Home.vue
View file @ cd06f241
...@@ -11,10 +11,10 @@ ...@@ -11,10 +11,10 @@
class="el-menu-vertical-demo" class="el-menu-vertical-demo"
> >
<div class="logo"> <div class="logo">
<img v-show="companyId==1 && authId!=11" style="width:180px;height:45px" src="../assets/logo_chuhang.png" alt /> <!-- <img v-show="companyId !=1 && authId!=11" style="width:180px;height:45px" src="../assets/logo_chuhang.png" alt /> -->
<img style="width:144px;height:36px" src="../assets/logo_new.png" alt /> <img v-show="companyId != 4 && authId != 14" style="width:144px;height:36px" src="../assets/logo_new.png" alt />
</div> </div>
<div v-show="companyId"> <div v-show="companyId">
<el-menu-item <el-menu-item
index="1-1" index="1-1"
......
src/views/Overview.vue
View file @ cd06f241
<!--实时交通检测--> <!--实时交通检测-->
<template> <template>
<div class="traffic" > <div class="traffic">
<div class="monitor_header"> <div class="monitor_header">
<el-row style="height:60px"> <el-row style="height: 60px">
<el-col :span="3">当前时间</el-col> <el-col :span="3">当前时间</el-col>
<el-col :span="4">{{dateFilterDate(gettime)}}</el-col> <el-col :span="4">{{ dateFilterDate(gettime) }}</el-col>
<el-col :span="4">{{dateFilterHHmmss(gettime)}}</el-col> <el-col :span="4">{{ dateFilterHHmmss(gettime) }}</el-col>
<el-col :span="2" style="margin-left:-40px;text-align: right"> <el-col :span="2" style="margin-left: -40px; text-align: right">
设备: 设备:
</el-col> </el-col>
<el-col :span="3" style="margin-top:-10px;"> <el-col :span="3" style="margin-top: -10px">
<el-select
<el-select @change="changeEquipment"
@change="changeEquipment" v-model="filters.equipmentId"
v-model="filters.equipmentId" style="width: 80%"
style="width:80%;" filterable
filterable placeholder="请选择设备"
placeholder="请选择设备" >
> <el-option
<el-option v-for="item in equipmentOptions"
v-for="item in equipmentOptions" :key="item.id"
:key="item.id" :label="item.position"
:label="item.position" :value="item.id"
:value="item.id" ></el-option>
></el-option> </el-select>
</el-col>
</el-select> </el-row>
</el-col>
</el-row>
<el-row style="height:60px;" > <el-row style="height: 60px">
<el-col :span="3">摄像头桩号</el-col> <el-col :span="3">摄像头桩号</el-col>
<el-col :span="4"> {{equipment.position}}</el-col> <el-col :span="4"> {{ equipment.position }}</el-col>
<el-col :span="4"><a style="color: #3e6be2; TEXT-DECORATION: underline" @click="playLives">查看实时视频</a></el-col> <el-col :span="4"
><a
style="color: #3e6be2; text-decoration: underline"
@click="playLives"
>查看实时视频</a
></el-col
>
</el-row> </el-row>
<el-row style="height:60px ;font-size: 25px" > <el-row style="height: 60px; font-size: 25px">
<el-col class="border_solid_left" :span="4" :offset="3" >{{equipment.companyId==1?'3车道':'1车道'}}</el-col> <el-col class="border_solid_left" :span="4" :offset="3">{{
<el-col v-show="equipment.companyId==2" :span="4" class="border_solid_right border_dashed_left" > <!--2 是招商局 1是嘉定--> equipment.companyId == 1 ? "3车道" : "1车道"
<div > }}</el-col>
2车道 <el-col
</div> v-show="equipment.companyId == 2"
:span="4"
class="border_solid_right border_dashed_left"
>
<!--2 是招商局 1是嘉定-->
<div>2车道</div>
</el-col> </el-col>
<el-col
<el-col v-show="equipment.companyId==1" :span="4" class="border_solid_right border_solid_left" > v-show="equipment.companyId == 1"
<div > :span="4"
2车道 class="border_solid_right border_solid_left"
</div> >
<div>2车道</div>
</el-col> </el-col>
<el-col class="border_solid_right" :span="4"> <el-col class="border_solid_right" :span="4">
{{filters.equipmentId==1?'应急车道':'1车道'}} {{ filters.equipmentId == 1 ? "应急车道" : "1车道" }}
</el-col> </el-col>
</el-row> </el-row>
<el-row style="height:60px ;font-weight: normal" > <el-row style="height: 60px; font-weight: normal">
<el-col :span="3" style="line-height: 60px;font-weight:bolder" >车道属性</el-col> <el-col :span="3" style="line-height: 60px; font-weight: bolder"
<el-col class="border_solid_left" v-show="equipment.companyId==1" :span="4">{{getLaneType(equipment.lane3Type)}}/限速{{equipment.lane3Speed}}</el-col> >车道属性</el-col
<el-col class="border_solid_left" v-show="equipment.companyId==2" :span="4">{{getLaneType(equipment.lane1Type)}}/限速{{equipment.lane1Speed}}</el-col> >
<el-col class="border_solid_right border_solid_left" v-show="equipment.companyId==1" :span="4">{{getLaneType(equipment.lane2Type)}}/限速{{equipment.lane2Speed}}</el-col> <el-col
<el-col class="border_solid_right border_dashed_left" v-show="equipment.companyId==2" :span="4">{{getLaneType(equipment.lane2Type)}}/限速{{equipment.lane2Speed}}</el-col> class="border_solid_left"
<el-col class="border_solid_right " v-show="equipment.companyId==2" :span="4"></el-col> v-show="equipment.companyId == 1"
<el-col class="border_solid_right " v-show="equipment.companyId==1" :span="4">{{getLaneType(equipment.lane1Type)}}/限速{{equipment.lane1Speed}}</el-col> :span="4"
>{{ getLaneType(equipment.lane3Type) }}/限速{{
equipment.lane3Speed
}}</el-col
>
<el-col
class="border_solid_left"
v-show="equipment.companyId == 2"
:span="4"
>{{ getLaneType(equipment.lane1Type) }}/限速{{
equipment.lane1Speed
}}</el-col
>
<el-col
class="border_solid_right border_solid_left"
v-show="equipment.companyId == 1"
:span="4"
>{{ getLaneType(equipment.lane2Type) }}/限速{{
equipment.lane2Speed
}}</el-col
>
<el-col
class="border_solid_right border_dashed_left"
v-show="equipment.companyId == 2"
:span="4"
>{{ getLaneType(equipment.lane2Type) }}/限速{{
equipment.lane2Speed
}}</el-col
>
<el-col
class="border_solid_right"
v-show="equipment.companyId == 2"
:span="4"
></el-col>
<el-col
class="border_solid_right"
v-show="equipment.companyId == 1"
:span="4"
>{{ getLaneType(equipment.lane1Type) }}/限速{{
equipment.lane1Speed
}}</el-col
>
</el-row> </el-row>
<el-row style="height:60px ;font-size: 16px" > <el-row style="height: 60px; font-size: 16px">
<el-col :span="3" style="line-height: 20px;margin-top:10px">毫米波雷达实时测速</el-col> <el-col :span="3" style="line-height: 20px; margin-top: 10px"
<div v-show="equipment.companyId==1"> >毫米波雷达实时测速</el-col
<el-col class="border_solid_left" :span="4" :class="getSpeedClassType2(lane3Speed)">{{lane3Speed>0?lane3Speed:''}}</el-col><!--左侧--> >
<el-col class="border_solid_left border_solid_right" :class="getSpeedClassType2(lane2Speed)" :span="4">{{lane2Speed>0?lane2Speed:''}}</el-col> <div v-show="equipment.companyId == 1">
<el-col class="border_solid_right " :class="getSpeedClassType2(lane1Speed)" :span="4" >{{lane1Speed>0?lane1Speed:''}}</el-col><!--右侧--> <el-col
class="border_solid_left"
:span="4"
:class="getSpeedClassType2(lane3Speed)"
>{{ lane3Speed > 0 ? lane3Speed : "" }}</el-col
><!--左侧-->
<el-col
class="border_solid_left border_solid_right"
:class="getSpeedClassType2(lane2Speed)"
:span="4"
>{{ lane2Speed > 0 ? lane2Speed : "" }}</el-col
>
<el-col
class="border_solid_right"
:class="getSpeedClassType2(lane1Speed)"
:span="4"
>{{ lane1Speed > 0 ? lane1Speed : "" }}</el-col
><!--右侧-->
</div> </div>
<div v-show="equipment.companyId == 2">
<div v-show="equipment.companyId==2"> <el-col
<el-col class="border_solid_left" :span="4" :class="getSpeedClassType1(lane1Speed)">{{lane1Speed>0?lane1Speed:''}}</el-col> <!--左侧--> class="border_solid_left"
<el-col class="border_dashed_left border_solid_right" :class="getSpeedClassType1(lane2Speed)" :span="4">{{lane2Speed>0?lane2Speed:''}}</el-col> :span="4"
<el-col class="border_solid_right " :class="getSpeedClassType1(lane3Speed)" :span="4" >{{lane3Speed>0?lane3Speed:''}}</el-col> <!--右侧--> :class="getSpeedClassType1(lane1Speed)"
>{{ lane1Speed > 0 ? lane1Speed : "" }}</el-col
>
<!--左侧-->
<el-col
class="border_dashed_left border_solid_right"
:class="getSpeedClassType1(lane2Speed)"
:span="4"
>{{ lane2Speed > 0 ? lane2Speed : "" }}</el-col
>
<el-col
class="border_solid_right"
:class="getSpeedClassType1(lane3Speed)"
:span="4"
>{{ lane3Speed > 0 ? lane3Speed : "" }}</el-col
>
<!--右侧-->
</div> </div>
</el-row> </el-row>
<el-row style="height:400px ;font-size: 17px;overflow-x: hidden" > <el-row style="height: 400px; font-size: 17px; overflow-x: hidden">
<el-col :span="3" style="margin-top: 100px;"> <el-col :span="3" style="margin-top: 100px">
<span style="height:300px;line-height: 10px;">实时报警({{dateFilterHour(gettime)}})</span> <span style="height: 300px; line-height: 10px"
>实时报警({{ dateFilterHour(gettime) }})</span
>
</el-col> </el-col>
<!--事件重构--> <!--事件重构-->
<!-- 嘉定 最左侧--> <!-- 嘉定 最左侧-->
<el-col class="border_solid_left" v-show="equipment.companyId==1" style="height:400px;overflow-y: auto;font-weight: normal;font-size: 16px;" :span="4"> <el-col
<div style="line-height: 20px;"> class="border_solid_left"
<div v-for="item in eventDataLane3" :style="{'color':item.style}"> v-show="equipment.companyId == 1"
style="
<span >{{dateFilterHHmmss(item.eventTime)}}{{getTypeName(item)}} </span> <br/> height: 400px;
{{item.continueTimeStr}} overflow-y: auto;
<br/> font-weight: normal;
<br/> font-size: 16px;
"
:span="4"
>
<div style="line-height: 20px">
<div v-for="item in eventDataLane3" :style="{ color: item.style }">
<span
>{{ dateFilterHHmmss(item.eventTime) }}{{ getTypeName(item) }}
</span>
<br />
{{ item.continueTimeStr }}
<br />
<br />
</div> </div>
</div> </div>
</el-col> </el-col>
<!-- 招商局 最左侧--> <!-- 招商局 最左侧-->
<el-col class="border_solid_left" v-show="equipment.companyId==2" style="height:400px;overflow-y: auto;font-weight: normal;font-size: 16px;" :span="4"> <el-col
<div style="line-height: 20px;"> class="border_solid_left"
<div v-for="item in eventDataLane1" :style="{'color':item.style}"> v-show="equipment.companyId == 2"
<span >{{dateFilterHHmmss(item.eventTime)}}{{getTypeName(item)}} </span> <br/> style="
{{item.continueTimeStr}} height: 400px;
<br/> overflow-y: auto;
<br/> font-weight: normal;
font-size: 16px;
"
:span="4"
>
<div style="line-height: 20px">
<div v-for="item in eventDataLane1" :style="{ color: item.style }">
<span
>{{ dateFilterHHmmss(item.eventTime) }}{{ getTypeName(item) }}
</span>
<br />
{{ item.continueTimeStr }}
<br />
<br />
</div> </div>
</div> </div>
</el-col> </el-col>
<!-- 二车道--> <!-- 二车道-->
<el-col class="border_dashed" style="height:400px;overflow-y: auto;font-weight: normal;font-size: 16px;" :span="4"> <el-col
<div style="line-height: 20px;"> class="border_dashed"
<div v-for="item in eventDataLane2" :style="{'color':item.style}"> style="
<span >{{dateFilterHHmmss(item.eventTime)}}{{getTypeName(item)}} </span> <br/> height: 400px;
{{item.continueTimeStr}} overflow-y: auto;
<br/> font-weight: normal;
<br/> font-size: 16px;
"
:span="4"
>
<div style="line-height: 20px">
<div v-for="item in eventDataLane2" :style="{ color: item.style }">
<span
>{{ dateFilterHHmmss(item.eventTime) }}{{ getTypeName(item) }}
</span>
<br />
{{ item.continueTimeStr }}
<br />
<br />
</div> </div>
</div> </div>
</el-col> </el-col>
<!--招商局 左边第三个--> <!--招商局 左边第三个-->
<el-col class="border_solid_right" v-show="equipment.companyId==2" style="height:400px;overflow-y: auto;font-weight: normal;font-size: 16px;" :span="4"> <el-col
<div style="line-height: 20px;"> class="border_solid_right"
<div v-for="item in eventDataLane3" :style="{'color':item.style}"> v-show="equipment.companyId == 2"
style="
<span >{{dateFilterHHmmss(item.eventTime)}}{{getTypeName(item)}} </span> <br/> height: 400px;
{{item.continueTimeStr}} overflow-y: auto;
<br/> font-weight: normal;
<br/> font-size: 16px;
"
:span="4"
>
<div style="line-height: 20px">
<div v-for="item in eventDataLane3" :style="{ color: item.style }">
<span
>{{ dateFilterHHmmss(item.eventTime) }}{{ getTypeName(item) }}
</span>
<br />
{{ item.continueTimeStr }}
<br />
<br />
</div> </div>
</div> </div>
</el-col> </el-col>
<!-- 嘉定 左边第三个--> <!-- 嘉定 左边第三个-->
<el-col class="border_solid_right" v-show="equipment.companyId==1" style="height:400px;overflow-y: auto;font-weight: normal;font-size: 16px;" :span="4"> <el-col
<div style="line-height: 20px;"> class="border_solid_right"
<div v-for="item in eventDataLane1" :style="{'color':item.style}"> v-show="equipment.companyId == 1"
style="
<span >{{dateFilterHHmmss(item.eventTime)}}{{getTypeName(item)}} </span> <br/> height: 400px;
{{item.continueTimeStr}} overflow-y: auto;
<br/> font-weight: normal;
<br/> font-size: 16px;
"
:span="4"
>
<div style="line-height: 20px">
<div v-for="item in eventDataLane1" :style="{ color: item.style }">
<span
>{{ dateFilterHHmmss(item.eventTime) }}{{ getTypeName(item) }}
</span>
<br />
{{ item.continueTimeStr }}
<br />
<br />
</div> </div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<!--<el-row style="height:70px ;font-size: 25px;font-weight:bolder;margin-top: 30px;" > <!--<el-row style="height:70px ;font-size: 25px;font-weight:bolder;margin-top: 30px;" >
...@@ -167,82 +301,90 @@ ...@@ -167,82 +301,90 @@
</el-row>--> </el-row>-->
</div> </div>
<el-dialog v-dialogDrag :visible.sync="isShowLive" style="margin-left:60%;margin-top:-5%" :close-on-click-modal="false" :modal="false" width="500px" z-index="0" height="380px"> <el-dialog
<iframe style="width:100%;height:360px" id="live" :src=playerSrc></iframe> v-dialogDrag
:visible.sync="isShowLive"
style="margin-left: 60%; margin-top: -5%"
:close-on-click-modal="false"
:modal="false"
width="500px"
z-index="0"
height="380px"
>
<iframe
style="width: 100%; height: 360px"
id="live"
:src="playerSrc"
></iframe>
</el-dialog> </el-dialog>
<el-dialog :visible.sync="isShowVideo" > <el-dialog :visible.sync="isShowVideo">
<video-player class="video-player vjs-custom-skin" <video-player
ref="videoPlayer" class="video-player vjs-custom-skin"
:playsinline="false" ref="videoPlayer"
:options="playerOptions" :playsinline="false"
:options="playerOptions"
></video-player> ></video-player>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import axios from 'axios'; import axios from "axios";
import { Message } from 'element-ui'; import { Message } from "element-ui";
import Cookies from 'js-cookie'; import Cookies from "js-cookie";
import { address, videoAddress } from '../config'; import { address, videoAddress } from "../config";
import { permission } from '../permission'; import { permission } from "../permission";
export default { export default {
name: 'overview', name: "overview",
data() { data() {
return { return {
watchTimer: '', watchTimer: "",
liveIp: '?eip=152.136.233.116', // 146.56.198.18 liveIp: "?eip=152.136.233.116", // 146.56.198.18
liveUrl: 'webrtc://152.136.233.116/live/', liveUrl: "webrtc://152.136.233.116/live/",
remainTime: 30, remainTime: 30,
timer: '', timer: "",
eventTimer: '', eventTimer: "",
companyId: localStorage.getItem('companyId'), companyId: localStorage.getItem("companyId"),
lane: 2, lane: 2,
lane1Speed: 0, lane1Speed: 0,
lane2Speed: 0, lane2Speed: 0,
lane3Speed: 0, lane3Speed: 0,
lane4Speed: 0, lane4Speed: 0,
emergencyLane: 1, emergencyLane: 1,
equipment: { equipment: {},
},
gettime: new Date(), // 当前时间 gettime: new Date(), // 当前时间
filters: { filters: {
equipmentId: localStorage.getItem('companyId') == 1 ? 2 : 1, equipmentId: localStorage.getItem("companyId") == 1 ? 2 : 1,
},
equipmentOptions: {
}, },
equipmentOptions: {},
/* 直播 start */ /* 直播 start */
isShowLive: false, isShowLive: false,
playerSrc: '', playerSrc: "",
/* 直播 end */ /* 直播 end */
playerOptions: { playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度 playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
autoplay: false, // 如果true,浏览器准备好时开始回放。 autoplay: false, // 如果true,浏览器准备好时开始回放。
controls: true, // 控制条 controls: true, // 控制条
preload: 'auto', // 视频预加载 preload: "auto", // 视频预加载
muted: false, // 默认情况下将会消除任何音频。 muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。 loop: false, // 导致视频一结束就重新开始。
language: 'zh-CN', language: "zh-CN",
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"） aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。 fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [{ sources: [
type: 'video/mp4', {
src: this.videoUrl, // 你所放置的视频的地址，最好是放在服务器上 type: "video/mp4",
}], src: this.videoUrl, // 你所放置的视频的地址，最好是放在服务器上
poster: '', // 你的封面地址（覆盖在视频上面的图片） },
],
poster: "", // 你的封面地址（覆盖在视频上面的图片）
width: document.documentElement.clientWidth, width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。 notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
}, },
isShowVideo: false, isShowVideo: false,
videoUrl: '', videoUrl: "",
eventData: [], eventData: [],
eventDataLane1: [], eventDataLane1: [],
eventDataLane2: [], eventDataLane2: [],
...@@ -251,42 +393,42 @@ export default { ...@@ -251,42 +393,42 @@ export default {
eventTypeEnum: [ eventTypeEnum: [
{ {
type: 1, type: 1,
name: '行人', name: "行人",
class: 'xingren-span', class: "xingren-span",
number: 'type1', number: "type1",
}, },
{ {
type: 2, type: 2,
name: '非机动车', name: "非机动车",
class: 'feijidong-span', class: "feijidong-span",
number: 'type2', number: "type2",
}, },
{ {
type: 3, type: 3,
name: '异物', name: "异物",
class: 'yiwu-span', class: "yiwu-span",
number: 'type3', number: "type3",
}, },
{ {
type: 4, type: 4,
data: [ data: [
{ {
type: '1', type: "1",
name: '缓行', name: "缓行",
class: 'huanxing-red-span', class: "huanxing-red-span",
number: 'type41', number: "type41",
}, },
{ {
type: '2', type: "2",
name: '拥堵', name: "拥堵",
class: 'yongdu-red-span', class: "yongdu-red-span",
number: 'type42', number: "type42",
}, },
{ {
type: '3', type: "3",
name: '异常拥堵', name: "异常拥堵",
class: 'red-span', class: "red-span",
number: 'type43', number: "type43",
}, },
], ],
}, },
...@@ -294,60 +436,60 @@ export default { ...@@ -294,60 +436,60 @@ export default {
type: 5, type: 5,
data: [ data: [
{ {
type: '0', type: "0",
name: '非法停止', name: "非法停止",
class: 'tingzhi-span', class: "tingzhi-span",
number: 'type50', number: "type50",
}, },
{ {
type: '1', type: "1",
name: '应急车道占用', name: "应急车道占用",
class: 'green-span', class: "green-span",
number: 'type51', number: "type51",
}, },
], ],
}, },
{ {
type: 6, type: 6,
name: '逆行', name: "逆行",
class: 'nixing-span', class: "nixing-span",
number: 'type6', number: "type6",
}, },
{ {
type: 7, type: 7,
name: '事故', name: "事故",
class: 'shigu-span', class: "shigu-span",
number: 'type7', number: "type7",
}, },
{ {
type: 8, type: 8,
name: '低速行驶', name: "低速行驶",
class: 'disu-span', class: "disu-span",
number: 'type8', number: "type8",
}, },
{ {
type: 9, type: 9,
name: '超速行驶', name: "超速行驶",
class: 'chaosu-span', class: "chaosu-span",
number: 'type9', number: "type9",
}, },
{ {
type: 10, type: 10,
name: '施工监测', name: "施工监测",
class: 'shigong-span', class: "shigong-span",
number: 'type10', number: "type10",
}, },
{ {
type: 11, type: 11,
name: '非法走机动车道', name: "非法走机动车道",
class: 'feijidongchedao-span', class: "feijidongchedao-span",
number: 'type11', number: "type11",
}, },
{ {
type: 12, type: 12,
name: '进入非法区域', name: "进入非法区域",
class: 'feifaquyu-span', class: "feifaquyu-span",
number: 'type12', number: "type12",
}, },
], ],
}; };
...@@ -372,9 +514,9 @@ export default { ...@@ -372,9 +514,9 @@ export default {
this.getEquipmentData(this.filters.equipmentId); this.getEquipmentData(this.filters.equipmentId);
this.getAllEquipments(); this.getAllEquipments();
}, },
filter: { filter: {},
}, beforeDestroy() {
beforeDestroy() { // 页面关闭时清除定时器 // 页面关闭时清除定时器
clearInterval(this.timer); clearInterval(this.timer);
clearInterval(this.watchTimer); clearInterval(this.watchTimer);
clearInterval(this.eventTimer); clearInterval(this.eventTimer);
...@@ -411,72 +553,71 @@ export default { ...@@ -411,72 +553,71 @@ export default {
getSpeed() { getSpeed() {
const that = this; const that = this;
const id = this.filters.equipmentId; const id = this.filters.equipmentId;
axios axios.get(`${address}getSpeed?id=${id}`).then((response) => {
.get(`${address}getSpeed?id=${id}`) if (response.data.code === 200) {
.then((response) => { this.lane1Speed = 0;
if (response.data.code === 200) { this.lane2Speed = 0;
this.lane1Speed = 0; this.lane3Speed = 0;
this.lane2Speed = 0; this.lane4Speed = 0;
this.lane3Speed = 0;
this.lane4Speed = 0; const speedDatas = response.data.data;
const speedDatas = response.data.data; speedDatas.forEach((speedData) => {
// that.lane1Speed == 0 &&
speedDatas.forEach((speedData) => { if (speedData.lane == 1) {
// that.lane1Speed == 0 && this.lane1Speed = speedData.speed;
if (speedData.lane == 1) { }
this.lane1Speed = speedData.speed; // that.lane2Speed == 0 &&
} if (speedData.lane == 2) {
// that.lane2Speed == 0 && this.lane2Speed = speedData.speed;
if (speedData.lane == 2) { }
this.lane2Speed = speedData.speed; // that.lane3Speed == 0 &&
} if (speedData.lane == 3) {
// that.lane3Speed == 0 && this.lane3Speed = speedData.speed;
if (speedData.lane == 3) { }
this.lane3Speed = speedData.speed; // that.lane4Speed == 0 &&
} if (speedData.lane == 4) {
// that.lane4Speed == 0 && this.lane4Speed = speedData.speed;
if (speedData.lane == 4) { }
this.lane4Speed = speedData.speed; });
} }
}); });
}
});
}, },
getSpeedClassType1(speed) { getSpeedClassType1(speed) {
if (speed >= 50) { if (speed >= 50) {
return 'green'; return "green";
} }
if (speed >= 20 && speed < 50) { if (speed >= 20 && speed < 50) {
return 'yellow'; return "yellow";
} }
if (!speed) { if (!speed) {
return 'green'; return "green";
} }
return 'red'; return "red";
}, },
getSpeedClassType2(speed) { getSpeedClassType2(speed) {
if (speed >= 40) { if (speed >= 40) {
return 'green'; return "green";
} }
if (speed >= 10 && speed <= 40) { if (speed >= 10 && speed <= 40) {
return 'yellow'; return "yellow";
} }
if (!speed) { if (!speed) {
return 'green'; return "green";
} }
return 'red'; return "red";
}, },
getLaneType(type) { getLaneType(type) {
if (type == 1) { if (type == 1) {
return '小轿车'; return "小轿车";
} if (type == 2) { }
return '货车及小轿车'; if (type == 2) {
return "货车及小轿车";
} }
return ''; return "";
}, },
getEquipmentData(id) { getEquipmentData(id) {
axios axios
...@@ -490,73 +631,87 @@ export default { ...@@ -490,73 +631,87 @@ export default {
}); });
}, },
getBingle(item) { getBingle(item) {
return item.type == 1 || item.type == 2 || item.type == 3 || item.type == 6 || item.type == 8 || item.type == 9 || item.type == 11 || item.type == 12; return (
item.type == 1 ||
item.type == 2 ||
item.type == 3 ||
item.type == 6 ||
item.type == 8 ||
item.type == 9 ||
item.type == 11 ||
item.type == 12
);
}, },
getEvent() { getEvent() {
const id = this.filters.equipmentId; const id = this.filters.equipmentId;
this.remainTime = 30; this.remainTime = 30;
const that = this; const that = this;
axios axios.get(`${address}getEvent?id=${id}`).then((response) => {
.get(`${address}getEvent?id=${id}`) if (response.data.code === 200) {
.then((response) => { this.eventData = response.data.data;
if (response.data.code === 200) { const that = this;
this.eventData = response.data.data; this.eventDataLane1 = [];
const that = this; this.eventDataLane2 = [];
this.eventDataLane1 = []; this.eventDataLane3 = [];
this.eventDataLane2 = []; this.eventData = this.eventData.filter(
this.eventDataLane3 = []; (item) => that.getBingle(item) || item.continueTime >= 180
this.eventData = this.eventData.filter(item => (that.getBingle(item)) || item.continueTime >= 180); );
this.eventData.forEach((e) => { this.eventData.forEach((e) => {
e.continueTimeStr = `${(e.continueTime / 60).toFixed(0)}分钟`; e.continueTimeStr = `${(e.continueTime / 60).toFixed(0)}分钟`;
if (this.$moment(e.endTime).add(1, 'minutes') < this.$moment(new Date())) { if (
e.continueTimeStr += ',已结束'; this.$moment(e.endTime).add(1, "minutes") <
e.style = 'black'; this.$moment(new Date())
} else { ) {
e.continueTimeStr = `已持续${e.continueTimeStr}`; e.continueTimeStr += ",已结束";
e.style = 'red'; e.style = "black";
} } else {
if (that.getBingle(e)) { e.continueTimeStr = `已持续${e.continueTimeStr}`;
e.continueTimeStr = ''; e.style = "red";
e.style = 'black'; }
} if (that.getBingle(e)) {
}); e.continueTimeStr = "";
// 时间排序之后 在倒序 e.style = "black";
this.eventData = that.$_.sortBy(this.eventData, o => o.eventTime).reverse(); }
this.eventData.forEach((e) => { });
if (e.lane == 1) { // 时间排序之后 在倒序
this.eventDataLane1.push(e); this.eventData = that.$_.sortBy(
} else if (e.lane == 2) { this.eventData,
this.eventDataLane2.push(e); (o) => o.eventTime
} else if (e.lane == 3) { ).reverse();
this.eventDataLane3.push(e); this.eventData.forEach((e) => {
} if (e.lane == 1) {
}); this.eventDataLane1.push(e);
} } else if (e.lane == 2) {
}); this.eventDataLane2.push(e);
} else if (e.lane == 3) {
this.eventDataLane3.push(e);
}
});
}
});
}, },
getAllEquipments() { getAllEquipments() {
axios axios.get(`${address}getAllEquipments`).then((response) => {
.get(`${address}getAllEquipments`) if (response.data.code === 200) {
.then((response) => { this.equipmentOptions = response.data.data;
if (response.data.code === 200) { }
this.equipmentOptions = response.data.data; });
}
});
}, },
dateFilterDate(input) { dateFilterDate(input) {
const d = new Date(input); const d = new Date(input);
const year = d.getFullYear(); const year = d.getFullYear();
const month = d.getMonth() < 9 ? `0${d.getMonth() + 1}` : `${d.getMonth() + 1}`; const month =
d.getMonth() < 9 ? `0${d.getMonth() + 1}` : `${d.getMonth() + 1}`;
const day = d.getDate() < 10 ? `0${d.getDate()}` : `${d.getDate()}`; const day = d.getDate() < 10 ? `0${d.getDate()}` : `${d.getDate()}`;
return (`${year}/${month}/${day}`); return `${year}/${month}/${day}`;
}, },
dateFilterHour(input) { dateFilterHour(input) {
const d = new Date(input); const d = new Date(input);
if (d.getHours() < 12) { if (d.getHours() < 12) {
return ('0时至今'); return "0时至今";
} }
return ('12时至今'); return "12时至今";
/* const hour = d.getHours() < 10 ? `0${d.getHours()}` : `${d.getHours()}`; /* const hour = d.getHours() < 10 ? `0${d.getHours()}` : `${d.getHours()}`;
return (`${hour}点`); */ return (`${hour}点`); */
...@@ -564,7 +719,7 @@ export default { ...@@ -564,7 +719,7 @@ export default {
getTypeName(item) { getTypeName(item) {
/* console.log(JSON.stringify(item)); */ /* console.log(JSON.stringify(item)); */
const that = this; const that = this;
let typeName = ''; let typeName = "";
this.eventTypeEnum.forEach((e) => { this.eventTypeEnum.forEach((e) => {
if (e.type == item.type) { if (e.type == item.type) {
if (e.class) { if (e.class) {
...@@ -583,9 +738,11 @@ export default { ...@@ -583,9 +738,11 @@ export default {
dateFilterHHmmss(input) { dateFilterHHmmss(input) {
const d = new Date(input); const d = new Date(input);
const hour = d.getHours() < 10 ? `0${d.getHours()}` : `${d.getHours()}`; const hour = d.getHours() < 10 ? `0${d.getHours()}` : `${d.getHours()}`;
const minutes = d.getMinutes() < 10 ? `0${d.getMinutes()}` : `${d.getMinutes()}`; const minutes =
const seconds = d.getSeconds() < 10 ? `0${d.getSeconds()}` : `${d.getSeconds()}`; d.getMinutes() < 10 ? `0${d.getMinutes()}` : `${d.getMinutes()}`;
return (`${hour}:${minutes}:${seconds}`); const seconds =
d.getSeconds() < 10 ? `0${d.getSeconds()}` : `${d.getSeconds()}`;
return `${hour}:${minutes}:${seconds}`;
}, },
getTime() { getTime() {
const _this = this; const _this = this;
...@@ -593,24 +750,30 @@ export default { ...@@ -593,24 +750,30 @@ export default {
const mm = new Date().getMonth() + 1; const mm = new Date().getMonth() + 1;
const dd = new Date().getDate(); const dd = new Date().getDate();
const hh = new Date().getHours(); const hh = new Date().getHours();
const mf = new Date().getMinutes() < 10 ? `0${new Date().getMinutes()}` : new Date().getMinutes(); const mf =
const ss = new Date().getSeconds() < 10 ? `0${new Date().getSeconds()}` : new Date().getSeconds(); new Date().getMinutes() < 10
? `0${new Date().getMinutes()}`
: new Date().getMinutes();
const ss =
new Date().getSeconds() < 10
? `0${new Date().getSeconds()}`
: new Date().getSeconds();
_this.gettime = `${yy}-${mm}-${dd} ${hh}:${mf}:${ss}`; _this.gettime = `${yy}-${mm}-${dd} ${hh}:${mf}:${ss}`;
}, },
currentTime() { currentTime() {
setInterval(this.getTime, 500); setInterval(this.getTime, 500);
}, },
liveStop() { liveStop() {
this.playerOptions.sources[0].src = ''; this.playerOptions.sources[0].src = "";
axios axios
.post(`${address}liveStop`, { .post(`${address}liveStop`, {
sessionId: Cookies.get('sessionId'), sessionId: Cookies.get("sessionId"),
ip: localStorage.getItem('Ip'), ip: localStorage.getItem("Ip"),
channelCode: this.equipment.channelCode, channelCode: this.equipment.channelCode,
code: this.equipment.code, code: this.equipment.code,
}) })
.then((res) => { .then((res) => {
console.log('暂停视频'); console.log("暂停视频");
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.log(error);
...@@ -621,14 +784,15 @@ export default { ...@@ -621,14 +784,15 @@ export default {
if (this.isShowLive == true) { if (this.isShowLive == true) {
axios axios
.post(`${address}liveStart`, { .post(`${address}liveStart`, {
ip: localStorage.getItem('Ip'), ip: localStorage.getItem("Ip"),
channelCode: this.equipment.channelCode, channelCode: this.equipment.channelCode,
code: this.equipment.code, code: this.equipment.code,
sessionId: Cookies.get('sessionId'), sessionId: Cookies.get("sessionId"),
}) })
.then((res) => { .then((res) => {
console.log('发送心跳'); console.log("发送心跳");
}).catch((error) => { })
.catch((error) => {
console.log(error); console.log(error);
}); });
} }
...@@ -640,86 +804,103 @@ export default { ...@@ -640,86 +804,103 @@ export default {
}, 600000); }, 600000);
axios axios
.post(`${address}liveStart`, { .post(`${address}liveStart`, {
ip: localStorage.getItem('Ip'), ip: localStorage.getItem("Ip"),
channelCode: this.equipment.channelCode, channelCode: this.equipment.channelCode,
code: this.equipment.code, code: this.equipment.code,
sessionId: Cookies.get('sessionId'), sessionId: Cookies.get("sessionId"),
}) })
.then((res) => { .then((res) => {
console.log('开始播放'); console.log("开始播放");
}).catch((error) => { })
.catch((error) => {
console.log(error); console.log(error);
}); });
console.log('player play!', player); console.log("player play!", player);
}, },
}, },
}; };
</script> </script>
<style lang="less" scope> <style lang="less" scope>
.border_xuxian_left {
.border_xuxian_left{ width: 3px;
width: 3px; background-image: linear-gradient(
background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%); to right,
background-size: 18px 2px; #ccc 0%,
background-repeat: repeat-y; #ccc 50%,
} transparent 50%
);
A:link { color: #3e6be2; TEXT-DECORATION: underline} background-size: 18px 2px;
A:visited { COLOR: #000000; TEXT-DECORATION: underline} background-repeat: repeat-y;
A:hover { COLOR: #ff7f24; text-decoration: underline;} }
A:active { COLOR: #ff7f24; text-decoration: underline;}
A:link {
.green{ color: #3e6be2;
background-color:#3CC472; text-decoration: underline;
} }
.yellow{ A:visited {
background-color:yellow; color: #000000;
} text-decoration: underline;
.red{ }
background-color:red; A:hover {
} color: #ff7f24;
.border_solid_left{ text-decoration: underline;
line-height: 60px; }
height:60px ; A:active {
border-left:4px black solid; color: #ff7f24;
} text-decoration: underline;
.border_solid_right{ }
line-height: 60px;
height:60px ; .green {
border-right:4px black solid; background-color: #3cc472;
} }
.border_dashed{ .yellow {
line-height: 60px; background-color: yellow;
height:60px ; }
border-left:4px black dashed; .red {
border-right:4px black dashed; background-color: red;
} }
.border_dashed_left{ .border_solid_left {
line-height: 60px; line-height: 60px;
height:60px ; height: 60px;
border-left:4px black dashed; border-left: 4px black solid;
} }
.monitor_header{ .border_solid_right {
vertical-align:middle; line-height: 60px;
text-align: center; height: 60px;
font-size: 16px; border-right: 4px black solid;
font-weight: bolder; }
} .border_dashed {
.traffic{ line-height: 60px;
height: 60px;
border-left: 4px black dashed;
border-right: 4px black dashed;
}
.border_dashed_left {
line-height: 60px;
height: 60px;
border-left: 4px black dashed;
}
.monitor_header {
vertical-align: middle;
text-align: center;
font-size: 16px;
font-weight: bolder;
}
.traffic {
.el-dialog__body { .el-dialog__body {
padding-top: 10px; padding-top: 10px;
padding-right: 10px; padding-right: 10px;
padding-bottom: 10px; padding-bottom: 10px;
padding-left: 10px; padding-left: 10px;
} }
.el-dialog__header { .el-dialog__header {
padding: 10px 10px 10px; padding: 10px 10px 10px;
} }
.el-dialog__headerbtn { .el-dialog__headerbtn {
top: 10px; top: 10px;
right: 10px; right: 10px;
} }
} }
</style> </style>
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