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