Skip to content

B
bigData
Commit 983dc399 by @zhang-bin-1
Options

gx

parents
Showing with 6560 additions and 0 deletions
.gitignore 0 → 100644
node_modules
dist
README.md 0 → 100644
# linan-bigdata-h5
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn run serve
```
### Compiles and minifies for production
```
yarn run build
```
### Run your tests
```
yarn run test
```
### Lints and fixes files
```
yarn run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
babel.config.js 0 → 100644
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"name": "linan-bigdata-h5",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.0",
"core-js": "^3.6.1",
"echarts": "^4.5.0",
"element-ui": "^2.15.7",
"html2canvas": "^1.4.1",
"js-md5": "^0.7.3",
"kuan-vue-flip-clock": "^1.0.1",
"mux.js": "^6.0.1",
"video.js": "^7.7.5",
"videojs-contrib-hls": "^5.15.0",
"vue": "^2.6.10"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.1.0",
"@vue/cli-plugin-eslint": "^4.1.0",
"@vue/cli-service": "^4.1.0",
"babel-eslint": "^10.0.3",
"babel-plugin-component": "^1.1.1",
"css-loader": "^5.0.2",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"style-loader": "^2.0.0",
"stylus": "^0.54.8",
"stylus-loader": "^3.0.2",
"vue-router": "^3.1.6",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"no-console": "off",
"no-debugger": "warn"
},
"parserOptions": {
"parser": "babel-eslint"
},
"globals": {
"AMap": false
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
public/index.html 0 → 100644
<!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 %>favicon.png">
<title>智管青山湖驾驶舱</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=c3cc67d44c9e66dfa68b43daf2c424d8"></script>
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
<style>
#app .amap-logo{
display: none !important;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but linan-bigdata-h5 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
src/App.vue 0 → 100644
<template>
<div id="app" ref="app">
<transition name="slide-fade">
<router-view/>
</transition>
</div>
</template>
<script>
// import { getNewToken } from "@/api/api";
export default {
name: "app",
data() {
return {
};
},
created() {
// let userInfo = JSON.parse(localStorage.getItem('accountInfo'))
// // 登陆时的时间
// if (userInfo) {
// // 打开app的时间
// let nowTime =(new Date()).valueOf();
// let utc = nowTime - userInfo.loginTime;
// let date = utc/(60*60*1000) // 相差小时
// let dateTo = userInfo.expireTime / 1000 / 60 / 60
// if (date >= dateTo) {
// localStorage.clear();
// // 退出重新登陆
// this.$router.push('/')
// } else {
// // 刷新token
// getNewToken({id: userInfo.id}).then(res => {
// let loginTime =(new Date()).valueOf();
// res.data.loginTime = loginTime
// localStorage.setItem('accountInfo', JSON.stringify(res.data));
// })
// }
// }
},
methods: {
}
};
</script>
<style lang="stylus">
@import './assets/font/font.css';
#app {
margin: auto;
width: 1920px;
height: 1080px;
}
::-webkit-scrollbar {
width: 5px !important;
/*滚动条宽度*/
height: 5px !important;
/*滚动条高度*/
background-color: #09134E;
}
::-webkit-scrollbar-thumb {
background-color: #1C589E !important;
border-radius: 8px;
}
</style>
src/api/api.js 0 → 100644
/*
* @Descripttion:
* @version:
* @Author: zhouyh
* @Date: 2021-09-30 17:17:21
* @LastEditors: zhouyh
* @LastEditTime: 2021-09-30 17:49:08
*/
import { api, formatParams, config } from "@/utils/request";
// 获取7、30天数据
export function getGroupData(params) {
return api(
Object.assign(formatParams("GET", params), {
url: `${config.proxy}/receive/data/api/report/thirty`,
})
);
}
// 获取当日告警数据
export function getTodayData(params) {
return api(
Object.assign(formatParams("GET", params), {
url: `${config.proxy}/receive/data/api/report/today`,
})
);
}
// 获取最新10条数据 // flag
// export function getLatestData(params) {
// return api(
// Object.assign(formatParams("GET", params), {
// url: `${config.proxy}/receive/data/api/lastest`,
// })
// );
// }
// 获取事件分页列表
export function getEventsData(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/receive/data/api/page?currentNo=${params.currentNo}&pageSize=${params.pageSize}&typeId=${params.typeId}`,
})
);
}
// 获取摄像头列表
export function getCameraList(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/receive/data/api/fullMsg/list?&typeId=${params.typeId}`,
})
);
}
// 获取摄像头分类一级列表
export function CameraShowOne(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/receive/data/api/show/one?typeName=${params.typeName}`,
})
);
}
// 获取摄像头分类下级列表
export function CameraShowNext(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/receive/data/api/show/next?id=${params.id}&typeId=${params.typeId}`,
})
);
}
// 获取摄像头视频
export function getCameraVideo(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/manage/deviceInfo/view`,
})
);
}
// 一键播报告警
export function personPlayOnByList(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/urgentRadioManager/personPlayOnByList`,
})
);
}
// 地图开启播报告警
export function personPlay(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/urgentRadioManager/personPlay`,
})
);
}
// 列表开启播报告警
export function personPlayOnList(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/urgentRadioManager/personPlayOnList`,
})
);
}
// 关闭播报告警
export function stopPersonPlay(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/urgentRadioManager/stopPersonPlay`,
})
);
}
// 获取成效统计
export function getResultRate(params) {
return api(
Object.assign(formatParams("GET", params), {
url: `${config.proxy}/receive/data/api/effect/statistics`,
})
);
}
// 获取事件详情
export function eventDetail(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/receive/data/api/${params.id}`,
})
);
}
// 登陆
export function login(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/manage/login`,
})
);
}
/**
* 获取token
*/
// export function getNewToken (params) {
// return api(Object.assign(formatParams('GET'), {
// url: `${config.proxy}/login/api/token/update/${params.id}`
// }))
// }
/**
* 获取token
*/
export function getNewToken(params) {
return api(
Object.assign(formatParams("GET"), {
url: `${config.proxy}/login/api/token/update/${params.id}`,
})
);
}
/**
* 7天成效统计(时间与网格) flag
*/
export function queryCustom(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/receive/data/api/query/custom`,
})
);
}
/**
* 获取网格列表
*/
export function queryNetArea(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/receive/data/api/query/netArea`,
})
);
}
/**
* 获取token,免登陆
*/
export function getUserInfo(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/login/api/getUserInfo/${params.userId}`,
})
);
}
// 获取监控设备分类列表
export function treeList(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/manage/deviceClassify/tree/dataList`,
})
);
}
// 根据分类获取监控设备
export function cameraByType(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/manage/deviceInfo/page?current=1&size=999`,
})
);
}
// 监控设备: 云台操作
export function cloud(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/camera/manager/cloud?cameraId=${params.cameraId}&action=${params.action}&command=${params.command}`,
})
);
}
// 上报事件
export function uploadEvent(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/accept/upload/event`,
})
);
}
// 获取类型
// export function eventTypeList(params) {
// return api(
// Object.assign(formatParams("POST", params), {
// url: `/urgentRadioManager/eventTypeList`,
// })
// );
// }
// 获取摄像头回放视频
export function playbackURLs(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/receive/data/api/playbackURLs`,
})
);
}
// 获取事件类型列表
export function eventTypeList(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/receive/data/web/api/eventTypeList`,
})
);
}
\ No newline at end of file
src/api/api3.js 0 → 100644
import { api, formatParams, config } from '@/utils/request';
// 获取7、30天数据
export function getGroupData(params) {
return api(Object.assign(formatParams('GET', params), {
url: `${config.proxy}/receive/data/api/report/thirty`
}))
}
// 获取当日告警数据
export function getTodayData(params) {
return api(Object.assign(formatParams('GET', params), {
url: `${config.proxy}/receive/data/api/report/today`
}))
}
// 获取最新10条数据
export function getLatestData(params) {
return api(Object.assign(formatParams('GET', params), {
url: `${config.proxy}/receive/data/api/lastest`
}))
}
// 获取事件列表
export function getEventsData(params) {
return api(Object.assign(formatParams('POST', params), {
url: `${config.proxy}/receive/data/api/query/page`
}))
}
// 获取事件列表
export function getCameraList(params) {
return api(Object.assign(formatParams('POST', params), {
url: `${config.proxy}/camera/fullMsg/list`
}))
}
// 获取摄像头视频
export function getCameraVideo(params) {
return api(Object.assign(formatParams('POST', params), {
url: `${config.proxy}/camera/view/${params.cameraId}`
}))
}
// 获取成效统计
export function getResultRate(params) {
return api(Object.assign(formatParams('GET', params), {
url: `${config.proxy}/receive/data/api/effect/statistics`
}))
}
// 获取事件详情
export function eventDetail (params) {
return api(Object.assign(formatParams('POST', params), {
url: `${config.proxy}/net/worker/api/detail/${params.id}`
}))
}
// 登陆
export function login (params) {
return api(Object.assign(formatParams('POST', params), {
url: `${config.proxy}/net/worker/api/data/login`
}))
}
/**
* 获取token
*/
// export function getNewToken (params) {
// return api(Object.assign(formatParams('GET'), {
// url: `${config.proxy}/login/api/token/update/${params.id}`
// }))
// }
/**
* 获取token
*/
export function getNewToken (params) {
return api(Object.assign(formatParams('GET'), {
url: `${config.proxy}/net/worker/api/token/update/data/${params.id}`
}))
}
/**
* 7天成效统计(时间与网格)
*/
export function queryCustom (params) {
return api(Object.assign(formatParams('POST', params), {
url: `${config.proxy}/receive/data/api/query/custom`
}))
}
/**
* 获取网格列表
*/
export function queryNetArea (params) {
return api(Object.assign(formatParams('POST', params), {
url: `${config.proxy}/receive/data/api/query/netArea`
}))
}
src/assets/font/font.css 0 → 100644
@font-face {
font-family: YouSheBiaoTiHei;
/* 重命名字体名 */
src: url('./YouSheBiaoTiHei-2.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PangMenZhengDao';
/* 重命名字体名 */
src: url('./PangMenZhengDao.ttf');
font-weight: normal;
font-style: normal;
}
\ No newline at end of file
src/components/Header.vue 0 → 100644
<template>
<header class="header">
<h1 class="name">智管青山湖驾驶舱</h1>
<!-- <div @click="open" class="target"><img src="@/assets/logo.png" style="margin-right: 10px;" alt="" />数智治理引擎平台</div> -->
<el-dropdown trigger="click" class="dropdown" @command="handleCommand">
<span class="el-dropdown-link">
{{ userInfo.username ? userInfo.username : "admin" }}
<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-switch-button" command="logout"
>退出登录</el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
</header>
</template>
<script>
export default {
name: "Header",
data() {
return {
userInfo: "",
};
},
created() {
this.userInfo = JSON.parse(localStorage.getItem("accountInfo"));
},
methods: {
handleCommand(command) {
if (command === "logout") {
this.logout();
}
},
logout() {
localStorage.clear();
this.$router.push("/");
},
open() {
console.log(this.userInfo.id);
let userId = this.userInfo.id ? this.userInfo.id : '';
// var url = "http://81.69.231.72:8015/#/?userId=" + userId
// var url = "http://1.15.3.38:8015/#/?userId=" + userId
var url = "http://218.108.67.198:9020/#/?userId=" + userId
window.open(url)
}
},
};
</script>
<style lang="stylus" scoped>
.header {
position: relative;
height: 92px;
display: flex;
justify-content: center;
border-radius: 4px;
background: url('~@/assets/index/header_bg.png') no-repeat;
z-index: 9;
.name {
margin-top 16px
text-align: center;
font-size: 46px;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
letter-spacing: 4px;
}
}
.target{
position: absolute;
left: 30px;
top: 26px;
color: #fff !important;
font-size: 16px;
margin-right: 20px;
color: blue;
cursor: pointer;
}
.dropdown {
position: absolute;
display: flex;
align-items: center;
right: 30px;
top: 26px;
color: #fff;
font-size: 16px;
font-weight: 500;
cursor: pointer;
}
</style>
<style>
.dropdown .el-dropdown{
color: #fff;
}
</style>
src/components/sectioncenter/ResultRate.vue 0 → 100644
<template>
<div class="wrapper">
<div class="title">
<div class="icon"></div>
<p>成效统计</p>
</div>
<div class="RR_main">
<div class="item">
<canvas id="canvas1" width="100" height="100"></canvas>
<p class="font">自治率</p>
</div>
<div class="item">
<canvas id="canvas2" width="100" height="100"></canvas>
<p class="font">共治率</p>
</div>
<div class="item">
<canvas id="canvas3" width="100" height="100"></canvas>
<p class="font">执法率</p>
</div>
</div>
</div>
</template>
<script>
import Progress from "@/utils/progress.js";
import { getResultRate } from "@/api/api";
export default {
name: "ResultRate",
props: {
typeId: {
type: Number
}
},
watch: {
typeId: function () {
this.initResultRate();
},
},
data() {
return {
resultRate: {},
timer: null
};
},
created() {
this.initResultRate();
this.timer = window.setInterval(() => {
this.initResultRate()
}, 60 * 1000 * 5);
},
methods: {
init(el, value, color, bgcolor, text) {
const options = {
el, // canvas元素id
deg: value * 100, // 绘制角度
timer: 1, // 绘制时间
lineWidth: 10, // 线宽
lineBgColor: bgcolor, // 底圆颜色
lineColor: color, // 动态圆颜色
textColor: "#F2B700", // 文本颜色
fontSize: 27, // 字体大小
circleRadius: 60, // 圆半径
text // 是否显示文字
};
new Progress(options);
},
initResultRate() {
getResultRate({typeId: this.typeId}).then(res => {
if (res.code === 200) {
let val = res.data;
this.init(
"canvas1",
val.autonomyRate,
"rgb(120,255,0)",
"rgba(120,255,0,0.5)"
);
this.init(
"canvas2",
val.coTreatmentRate,
"rgb(0,255,222)",
"rgba(0,255,222,0.5)"
);
this.init(
"canvas3",
val.lawEnforcementRate,
"rgb(255,189,2)",
"rgba(255,189,2,0.5)"
);
}
});
}
},
beforeDestroy() {
clearInterval(this.timer);
}
};
</script>
<style lang="stylus" scoped>
.wrapper {
width: 530px;
height: 248px;
background: linear-gradient(180deg, rgba(10, 29, 72, 0.51) 0%, #0F152E 100%);
border-radius: 4px;
border: 2px solid #00356D;
.title {
height: 40px;
padding: 0 10px;
display: flex;
align-items: center;
background: linear-gradient(270deg, #072B4D 0%, #134778 100%);
.icon {
width: 2px;
height: 20px;
background: #5CE3FB;
border-radius: 2px;
}
p {
margin-left: 10px;
font-size: 20px;
font-weight: 400;
color: #5CE3FB;
span {
font-weight: 500;
color: #FC672C;
}
}
}
.RR_main {
width: 100%;
height: 208px;
display: flex;
justify-content: space-around;
align-items: center;
.item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.font {
margin-top: 20px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
text-align: center;
}
}
}
}
.service {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 5px;
}
</style>
src/components/sectioncenter/WarnMap.vue 0 → 100644
<template>
<div class="wrapper">
<div style="position: relative">
<div id="container" class="map"></div>
</div>
<div v-if="yjhhList.length > 0" v-drag class="yjhhDialog">
<div class="yjhhTitle" style="color: #FFF; font-size: 18px;">一键喊话列表</div>
<div class="yjhhCard">
<div class="yjhhContent" v-for="(item,index) in yjhhList" :key="index">
<div class="yjhhName">{{ item.name || item.cameraName }}</div>
<img @click="delList(item,index)" class="yjhhImg" src="@/assets/index/marker_close.png">
</div>
</div>
<div class="yjhhHand">
<div class="yjhhButton" v-if="yjhhButton" @click="yjhhList = [];">取消</div>
<div class="yjhhButton" v-if="yjhhButton" @click="openYjhh">开始喊话</div>
<div class="yjhhButton" v-if="!yjhhButton" @click="closeYjhh">关闭喊话</div>
</div>
</div>
<div v-if="show" class="dialog" @click="closeBox">
<div class="dialog_wrapper">
<div class="dialog_body" @click="stopPropagation">
<div class="dialog_header">
<div class="hed_left">
<img src="@/assets/index/marker_event.png" alt="" />
<p>{{ detailData.cameraAddress }}</p>
</div>
<img style="cursor: pointer" src="@/assets/index/marker_close.png" alt="" @click="closeBox" />
</div>
<div class="dialog_content" v-if="detailData.id">
<div>
<div class="cell">
<p class="label">事件编号</p>
<p class="value">{{ detailData.id }}</p>
</div>
<div class="cell">
<p class="label">事件类型</p>
<p class="value">{{ detailData.kindName }}</p>
</div>
<div class="cell">
<p class="label">发生位置</p>
<p class="value">{{ detailData.cameraAddress }}</p>
</div>
<div class="cell">
<p class="label">监控</p>
<p class="value">{{ detailData.cameraName }}</p>
</div>
<div class="cell">
<p class="label">发生时间</p>
<p class="value">{{ detailData.createTime }}</p>
</div>
<div class="cell">
<p class="label">处理人</p>
<p class="value">{{ detailData.operator }}</p>
</div>
<div class="cell">
<p class="label">处理时间</p>
<p class="value">{{ detailData.finishTime }}</p>
</div>
<div class="cell">
<p class="label">事件状态</p>
<p class="value" style="color: #f4516c">
{{ detailData.operateStatusName }}
</p>
</div>
</div>
<div class="camera">
<div>
<div class="type">
<!-- <div class="dot org"></div> -->
<p>监控抓拍图</p>
</div>
<el-image style="width: 100%; height: 150px; margin-top: 10px" :src="detailData.picture">
</el-image>
<div class="btn-box">
<div @click="monitor(detailData)">
<img src="../../assets/index/ssjk.png" style="margin-right: 5px" alt="" />
实时监控
</div>
<div class="open" v-if="broadcast == true && detailData.isOpen == true"
@click="openBroadcast(detailData)">
<img src="../../assets/index/gbgj.png" style="margin-right: 5px" alt="" />人工喊话
</div>
<div class="close" v-if="broadcast != true && detailData.isOpen == true" @click="closeBroadcast()">
<img src="../../assets/index/gbz.png" style="margin-right: 5px" alt="" />广播中
</div>
<div class="open" v-if="detailData.isOpen == true" @click="addList(detailData)">
加入喊话列表
</div>
</div>
</div>
</div>
</div>
<div class="dialog_content nothing" v-else>暂无事件</div>
</div>
</div>
</div>
<div class="video-content" v-drag v-if="videoShow">
<div class="closeVideo">
<i class="el-icon-close" @click="videoClose(detailData)"></i>
</div>
<video ref="test" id="hls-video1" width="600" height="400" class="video-js vjs-default-skin vjs-big-play-centered"
playsinline webkit-playsinline controls autoplay muted preload="auto" x-webkit-airplay="true"
x5-video-player-fullscreen="true" x5-video-player-typ="h5" style="width: 100%; height: 100%"></video>
<div class="bottom">
<div class="address" :title="detailData.name || detailData.cameraAddress || detailData.address || '未知摄像头'">
<img src="../../assets/index/address.png" alt="" />
{{ detailData.name || detailData.cameraAddress || detailData.address || "未知摄像头" }}
</div>
<!-- <div class="caozuo">
<div class="control" @click="shortScreen(detailData)">一键截图</div>
<div class="control" @click="shangbao()">上报事件</div>
<div class="control" @click="control()">
<img src="../../assets/direction/9.png" style="width: 14px; height: 14px" alt="" />
云控制台
</div>
<div class="open guangbo" v-if="broadcast == true && detailData.isOpen == true"
@click="openBroadcast(detailData)">
<img src="../../assets/index/gbgj.png" style="margin-right: 5px" alt="" />人工喊话
</div>
<div class="close guangbo" v-if="broadcast != true && detailData.isOpen == true" @click="closeBroadcast()">
<img src="../../assets/index/gbz.png" style="margin-right: 5px" alt="" />广播中
</div>
<div class="control" v-if="detailData.isOpen == true" @click="addList(detailData)">
加入喊话列表
</div>
</div> -->
</div>
<div class="bottom1" v-if="this.hasChildren == 1">
<div class="direction">
<div class="card1">
<div class="button1" v-for="(item, index) in buttonList" :key="index" :title="item.name"
@mousedown="mouseDown(item, detailData)" @mouseup="mouseUp(item, detailData)">
<img v-if="item.state == 1" :src="item.url" alt="" />
<img v-if="item.state == 2" :src="item.url1" alt="" />
<!-- <div class="name" v-if="item.state == 1">{{ item.name }}</div>
<div class="name1" v-if="item.state == 2">停止</div> -->
</div>
</div>
<div class="card1 card2">
<div class="button1" v-for="(item, index) in buttonList2" :key="index" :title="item.name"
@mousedown="mouseDown(item, detailData)" @mouseup="mouseUp(item, detailData)">
<img v-if="item.state == 1" :src="item.url" alt="" />
<img v-if="item.state == 2" :src="item.url1" alt="" />
<!-- <div class="name" v-if="item.state == 1">{{ item.name }}</div>
<div class="name1" v-if="item.state == 2">停止</div> -->
</div>
</div>
</div>
</div>
</div>
<div class="radio-content" v-if="radioShow">
<div class="top" style="
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
">
<div class="name" v-if="hanhua == true">选择同时人工喊话的监控点位</div>
<div class="name" v-if="hanhua == false">多监控点位，同时人工喊话</div>
<i class="el-icon-close" @click="cancel"></i>
</div>
<div class="monitor" style="width: 100%; display: flex; align-items: center">
监控点位：
<!-- <el-cascader
v-model="radioList"
placeholder="选择监控点位"
:show-all-levels="false"
:props="prop"
filterable
clearable
></el-cascader> -->
<el-select v-model="radioList" multiple filterable placeholder="选择监控点位">
<el-option v-for="item in options" :key="item.cameraId" :label="item.typeName" :value="item.cameraId">
</el-option>
</el-select>
</div>
<div class="bottom" style="width: 40%; justify-content: space-around" v-if="hanhua == true">
<el-button type="info" size="medium" @click="cancel">取消</el-button>
<el-button type="primary" size="medium" @click="nextStep">一键喊话</el-button>
</div>
<div class="bottom" style="width: 40%; justify-content: space-around" v-if="hanhua == false">
<el-button type="primary" size="medium" @click="backStep">一键关闭喊话</el-button>
</div>
</div>
<div class="video-history" v-drag v-if="openHistoryShow">
<div class="closeVideo">
<i class="el-icon-close" @click="closeHistory"></i>
</div>
<video id="hls-video2" width="600" height="400" class="video-js vjs-default-skin vjs-big-play-centered"
playsinline webkit-playsinline controls autoplay muted preload="auto" x-webkit-airplay="true"
x5-video-player-fullscreen="true" x5-video-player-typ="h5" style="width: 100%; height: 100%"></video>
<div class="bottom">
<el-select v-model="historyMonitor" filterable size="small" placeholder="选择监控点位">
<el-option v-for="item in options1" :key="item.cameraId" :label="item.typeName" :value="item.cameraId">
</el-option>
</el-select>
<div class="time">
<el-date-picker v-model="timeDate" type="datetimerange" size="small" range-separator="-"
start-placeholder="开始时间" end-placeholder="结束时间">
</el-date-picker>
</div>
<div class="playHistory">
<el-button type="primary" plain size="small" @click="playHistory">播放</el-button>
</div>
</div>
</div>
<!-- <div
:class="['switch-title', mockData.length == 1 ? 'switch-title1' : (mockData.length == 2 ? 'switch-title2' : (mockData.length == 3 ? 'switch-title3' : 'switch-title4'))]">
<div style="display:flex;">
<div :class="['card', act == item.typeId ? 'card1' : '']" @click="changeAct(item)"
v-for="(item, index) in mockData" :key="index">
<img :src="item.url" @mouseover="showNextMenu(item)" />
</div>
</div>
<div :class="['card2', act == 4 ? 'card1' : '']" @click="changeAct({typeName: '智慧渣土车',typeId: 4})"
style="margin-top:10px;border-radius: 20px;" v-if="showMenu">
<img src="@/assets/index/title4.png" />
</div>
</div> -->
<!-- <div :class="['switch-box', bottomVisib ? 'switch-box' : 'switch-box']">
<el-checkbox-group v-model="selectList" @change="typeChange">
<el-checkbox :label="1">有事件监控点位</el-checkbox>
<el-checkbox :label="2">无事件监控点</el-checkbox>
<el-checkbox :label="3">离线设备</el-checkbox>
<el-checkbox :label="4" v-if="!bottomVisib">未绑定广播设备</el-checkbox>
</el-checkbox-group>
</div> -->
<!-- <div :class="['switch-name', bottomVisib ? 'switch-name1' : 'switch-name']">
<div class="name" @click="shout" v-if="!bottomVisib">多点位一键喊话</div>
<div class="monitor" @click="openHistoryShow = true">监控回放</div>
</div> -->
<!-- 弹窗 -->
<el-dialog title="上报事件" :visible.sync="dialogVisible" width="30%" :before-close="close1" :modal="false"
:show-close="false">
<div>
事件类型:
<el-select v-model="form.kind" size="small" placeholder="请选择">
<el-option v-for="item in newOptions" :key="item.eventType" :label="item.typeName" :value="item.eventType">
</el-option>
</el-select>
</div>
<div class="upload">
<span style="margin-right: 5px">事件图片:</span>
<el-upload class="avatar-uploader" action="http://1.15.3.38:19500/event/feedback/api/image/upload"
:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
<img v-if="form.picture" :src="form.picture" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="close1">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import mapMarker from "@/assets/direction/9.png";
import AMap from "AMap";
import {
getCameraVideo,
personPlayOnList,
stopPersonPlay,
CameraShowOne,
CameraShowNext,
personPlayOnByList,
cloud,
cameraByType,
playbackURLs,
uploadEvent,
eventTypeList
} from "@/api/api";
import html2canvas from 'html2canvas'
export default {
name: "WarnMap",
props: ["event", "cameraList", "changeJwdData"],
watch: {
cameraList: {
immediate: true,
deep: true,
handler(val) {
console.log('val---------', val)
let _this = this;
// 清空地图
if (_this.map) {
_this.map.remove(_this.markers);
}
// 遍历判断点位
val.forEach((value) => {
if (
value.lng !== "0" &&
value.lat !== "0" &&
value.lng !== null &&
value.lat !== null
) {
let marker;
// 普通点
var normalMarker = new AMap.Marker({
anchor: "bottom-center",
// offset: [0, -15],
});
let icon = new AMap.Icon({
size: new AMap.Size(26, 26),
image: mapMarker,
imageSize: new AMap.Size(26, 26),
});
// let labelOffset = new AMap.Pixel(0, -2);
marker = new AMap.Marker({
icon: icon,
position: [value.lng, value.lat],
offset: new AMap.Pixel(-13, -30),
clickable: true,
// label: {
// direction: "top",
// content: value.name,
// offset: labelOffset,
// },
});
marker.on("mouseover", function () {
var position = [Number(value.lng), Number(value.lat)];
if (position) {
if (value.name !== undefined) {
normalMarker.setContent(
'<div class="amap-info-window">' +
value.name +
'<div class="amap-info-sharp"></div>' +
"</div>"
);
} else {
normalMarker.setContent(
'<div class="amap-info-window">' +
value.name +
'<div class="amap-info-sharp"></div>' +
"</div>"
);
}
normalMarker.setPosition(position);
_this.map.add(normalMarker);
}
});
marker.on("mouseout", function () {
_this.map.remove(normalMarker);
});
AMap.event.addListener(marker, "click", function () {
// this.markerClick(value)
// console.log(value);
_this.detailData = value;
_this.monitor(value);
_this.map.setCenter([value.lng, value.lat]);
// _this.getPosition(event)
//得到的数据
});
//添加marker点击事件
// marker.on("click", this.markerClick(value));
_this.markers.push(marker);
// 最后一个
marker.setMap(this.map);
_this.map.setCenter([value.lng, value.lat]);
}
});
},
},
changeJwdData: {
immediate: true,
deep: true,
handler(val) {
if (val && val.length > 0) {
this.map.setCenter(val);
}
},
}
},
data() {
return {
selectList: [1, 2, 3, 4],
markers: [],
dialogEvent: {},
show: false,
detailData: {},
videoShow: false,
nowPlayVideoUrl: "",
player: null,
broadcast: true,
broMsg: "",
map: null,
mockData: [],
act: 1,
radioShow: false,
hanhua: true,
broMsg1: {},
radioList: [],
prop: {
multiple: true,
label: "typeName",
value: "cameraId",
emitPath: false,
lazy: true,
lazyLoad: (node, resolve) => {
console.log("node---", node);
if (node.level == 0) {
let params = {
typeName: "",
typeId: Number(this.act + 1),
};
CameraShowOne(params).then((res) => {
let options = res.data.map((item) => {
item.leaf = item.hasChildren;
return item;
});
return resolve(options);
});
}
if (node.level != 0) {
if (node.data.id) {
CameraShowNext({
id: node.data.id,
typeId: Number(this.act + 1),
}).then((res) => {
console.log(res);
let arr = res.data.map((item) => ({
leaf: item.hasChildren,
id: item.id ? item.id : "",
typeName: item.typeName,
cameraId: item.cameraId ? item.cameraId : "",
}));
return resolve(arr);
});
} else {
return resolve([]);
}
}
},
},
buttonList: [
{
url: require("../../assets/direction/5.png"),
url1: require("../../assets/direction/1-5.png"),
name: "左上",
command: "LEFT_UP",
state: 1,
},
{
url: require("../../assets/direction/1.png"),
url1: require("../../assets/direction/1-1.png"),
name: "向上",
command: "UP",
state: 1,
},
{
url: require("../../assets/direction/6.png"),
url1: require("../../assets/direction/1-6.png"),
name: "右上",
command: "RIGHT_UP",
state: 1,
},
{
url: require("../../assets/direction/3.png"),
url1: require("../../assets/direction/1-3.png"),
name: "向左",
command: "LEFT",
state: 1,
},
{
url: require("../../assets/direction/9.png"),
url1: require("../../assets/direction/9.png"),
state: 1,
},
{
url: require("../../assets/direction/4.png"),
url1: require("../../assets/direction/1-4.png"),
name: "向右",
command: "RIGHT",
state: 1,
},
{
url: require("../../assets/direction/7.png"),
url1: require("../../assets/direction/1-7.png"),
name: "左下",
command: "LEFT_DOWN",
state: 1,
},
{
url: require("../../assets/direction/2.png"),
url1: require("../../assets/direction/1-2.png"),
name: "向下",
command: "DOWN",
state: 1,
},
{
url: require("../../assets/direction/8.png"),
url1: require("../../assets/direction/1-8.png"),
name: "右下",
command: "RIGHT_DOWN",
state: 1,
},
],
buttonList2: [
{
url: require("../../assets/direction/bd1.png"),
url1: require("../../assets/direction/bd2.png"),
name: "焦距变大",
command: "ZOOM_IN",
state: 1
},
{
url: require("../../assets/direction/bx1.png"),
url1: require("../../assets/direction/bx2.png"),
name: "焦距变小",
command: "ZOOM_OUT",
state: 1
},
{
url: require("../../assets/direction/qy1.png"),
url1: require("../../assets/direction/qy2.png"),
name: "焦点前移",
command: "FOCUS_NEAR",
state: 1
},
{
url: require("../../assets/direction/hy1.png"),
url1: require("../../assets/direction/hy2.png"),
name: "焦点后移",
command: "FOCUS_FAR",
state: 1
},
{
url: require("../../assets/direction/kd1.png"),
url1: require("../../assets/direction/kd2.png"),
name: "光圈扩大",
command: "IRIS_ENLARGE",
state: 1
},
{
url: require("../../assets/direction/sx1.png"),
url1: require("../../assets/direction/sx2.png"),
name: "光圈缩小",
command: "IRIS_REDUCE",
state: 1
},
],
params: {
action: 0,
cameraId: "",
command: "",
},
hasChildren: null,
options: [],
options1: [],
historyMonitor: "",
timeDate: [],
nowPlayVideoUrl1: "",
player1: null,
openHistoryShow: false,
dialogVisible: false,
form: {
kind: 1,
picture: "",
cameraId: "",
},
// 事件类型
newOptions: [],
bottomVisib: false,
yjhhList: [],
yjhhButton: true,
yjhhMsg: "",
showMenu: false
};
},
beforeDestroy() {
if (this.map) {
this.map.destory();
}
},
created() {
// let allocationList = JSON.parse(localStorage.getItem('accountInfo')).allocationList
// this.mockData = allocationList.map((item) => {
// if (item.typeName == "路长") {
// item.url = require("@/assets/index/title1.png")
// } else if (item.typeName == "河长") {
// item.url = require("@/assets/index/title2.png")
// this.act = 2
// } else if (item.typeName == "库长") {
// item.url = require("@/assets/index/title3.png")
// } else if (item.typeName == "智慧渣土车") {
// item.url = require("@/assets/index/title4.png")
// this.act = 4
// }
// return item
// })
// if (JSON.parse(localStorage.getItem('accountInfo')).level == 0) {
// this.mockData.pop()
// this.changeAct(this.mockData[0])
// } else {
// if (JSON.parse(localStorage.getItem('accountInfo')).level == 2) {
// this.changeAct(this.mockData[0])
// this.bottomVisib = true
// } else if (JSON.parse(localStorage.getItem('accountInfo')).level != 2) {
// this.changeAct(this.mockData[0])
// // this.bottomVisib = true
// } else {
// this.bottomVisib = false
// }
// }
console.log(this.mockData)
},
mounted() {
this.map = new AMap.Map("container", {
zoom: 16, // 级别
center: [119.722281, 30.232712], // 中心点坐标
viewMode: "3D", // 使用3D视图
mapStyle: "amap://styles/darkblue",
});
this.init();
},
methods: {
showNextMenu(item) {
console.log(item)
if (item.typeName == "路长" && JSON.parse(localStorage.getItem('accountInfo')).level == 0) {
this.showMenu = true
}
},
shangbao() {
this.form.kind = null
this.dialogVisible = true
eventTypeList().then((res) => {
if (res.success) {
this.newOptions = res.data.slice(1)
}
})
},
addList(val) {
if (this.yjhhButton == false) {
this.$message({
type: "warning",
message: "请先关闭当前喊话再进行添加",
});
return
}
if (this.yjhhList.length > 0) {
if (JSON.stringify(this.yjhhList).indexOf(JSON.stringify(val)) == -1) {
this.yjhhList.push(val)
} else {
this.$message({
type: "warning",
message: "该点位已加入一键喊话列表",
});
}
} else {
this.yjhhList.push(val)
}
},
delList(val, index) {
if (this.yjhhButton == false) {
this.$message({
type: "warning",
message: "请先关闭当前喊话再进行删除",
});
return
}
this.yjhhList.map((item) => {
if (item.cameraId == val.cameraId) {
this.yjhhList.splice(index, 1)
}
})
},
openYjhh() {
let hhList = []
this.yjhhList.map((item) => {
hhList.push(item.cameraId)
})
// this.$confirm("确认开启一键喊话吗?", "提示", {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
// type: "warning",
// })
// .then(() => {
let params = {
cameraId: hhList,
eventType: "",
broMsg: "",
};
personPlayOnByList(params).then((res) => {
console.log(res);
if (res.code == 200) {
this.yjhhMsg = res.data;
this.yjhhButton = false;
} else {
this.$message({
type: "error",
message: res.msg,
});
}
});
// })
// .catch(() => {
// this.$message({
// type: "info",
// message: "已取消开启一键喊话",
// });
// });
},
closeYjhh() {
let params = {
broMsg: this.yjhhMsg,
};
stopPersonPlay(params).then((res) => {
console.log(res);
this.yjhhButton = true
});
},
init() {
let params = {};
params.deviceClassifyIds = [];
params.name = '';
cameraByType(params).then((res) => {
if (res.code == 200) {
this.options1 = res.data.dataList;
res.data.dataList.map((item) => {
if (item.isOpen == true) {
this.options.push(item);
}
});
console.log(this.options);
}
});
},
playHistory() {
let start = new Date(this.timeDate[0]).getTime();
let end = new Date(this.timeDate[1]).getTime();
console.log(new Date(this.timeDate[0]).toISOString());
console.log(new Date(this.timeDate[1]).toISOString());
let a = new Date(this.timeDate[0]);
let b = new Date(this.timeDate[1]);
if (end - start <= 8 * 3600 * 1000) {
let params = {};
params.beginTime =
a.getFullYear() +
"-" +
(a.getMonth() > 8 ? (a.getMonth() + 1) : ("0" + (a.getMonth() + 1))) +
"-" +
(a.getDate() > 9 ? (a.getDate()) : ("0" + (a.getDate()))) +
"T" +
(a.getHours() > 9 ? (a.getHours()) : ("0" + (a.getHours()))) +
":" +
(a.getMinutes() > 9 ? (a.getMinutes()) : ("0" + (a.getMinutes()))) +
":" +
(a.getSeconds() > 9 ? (a.getSeconds()) : ("0" + (a.getSeconds()))) +
".000+08:00";
params.endTime =
b.getFullYear() +
"-" +
(b.getMonth() > 8 ? (b.getMonth() + 1) : ("0" + (b.getMonth() + 1))) +
"-" +
(b.getDate() > 9 ? (b.getDate()) : ("0" + (b.getDate()))) +
"T" +
(b.getHours() > 9 ? (b.getHours()) : ("0" + (b.getHours()))) +
":" +
(b.getMinutes() > 9 ? (b.getMinutes()) : ("0" + (b.getMinutes()))) +
":" +
(b.getSeconds() > 9 ? (b.getSeconds()) : ("0" + (b.getSeconds()))) +
".000+08:00";
params.cameraId = this.historyMonitor;
playbackURLs(params).then((res) => {
if (res.code == 200) {
this.nowPlayVideoUrl1 = res.data;
this.player1 = this.$Video("hls-video2"); // 关联video标签的id
this.player1.src({
src: this.nowPlayVideoUrl1,
type: "application/x-mpegURL",
});
this.player1.play();
} else {
this.$message({
type: "error",
message: res.msg,
});
}
});
} else {
this.$message({
type: "error",
message: "最大支持查看跨度八个小时的监控回放",
});
}
// console.log(startTime)
},
closeHistory() {
if (this.player1) {
this.player1.dispose();
this.player1 = null;
}
this.openHistoryShow = false
this.timeDate = [],
this.historyMonitor = ''
},
// 事件类型切换
typeChange(e) {
// 切换类型
this.$emit("getList", e);
},
changeAct(item) {
localStorage.setItem("typeId", JSON.stringify(item.typeId));
this.yjhhList = []
if (item.typeId == 4) {
this.bottomVisib = true
} else {
this.bottomVisib = false
this.showMenu = false
}
this.act = item.typeId;
this.$emit("getAll", Number(item.typeId));
let params = {};
params.id = "";
params.typeId = Number(item.typeId);
params.cameraName = "";
this.options = [];
cameraByType(params).then((res) => {
if (res.code == 200) {
res.data.map((item) => {
if (item.isOpen == true) {
this.options.push(item);
}
});
console.log(this.options);
}
});
},
// 获取地图监控信息
stopPropagation(e) {
e.stopPropagation();
},
marckClick(value) {
console.log('------', value)
this.show = true;
this.detailData = value;
console.log(this.detailData);
this.map.setCenter([value.lng, value.lat]);
},
closeBox() {
this.show = false;
this.closeBroadcast();
},
videoClose(val) {
if (this.player) {
this.closeBroadcast();
this.player.dispose();
this.player = null;
}
this.videoShow = false;
this.params.action = 0;
this.params.command = "LEFT_UP"
this.params.cameraId = val.cameraId;
cloud(this.params).then((res) => {
console.log(res);
this.buttonList.map((item) => {
item.state = 1;
});
this.buttonList2.map((item) => {
item.state = 1;
});
});
this.hasChildren = null;
},
mouseDown(item, val) {
console.log('按下------', item)
this.direction(item, val)
},
mouseUp(item, val) {
console.log('松开------', item)
setTimeout(() => {
this.direction(item, val)
}, 500);
},
direction(item, val) {
if (item.command) {
if (this.params.action == 1 && this.params.command == item.command) {
this.params.action = 0;
this.params.cameraId = val.cameraId;
cloud(this.params).then((res) => {
console.log(res);
this.buttonList.map((item) => {
item.state = 1;
});
this.buttonList2.map((item) => {
item.state = 1;
});
});
} else {
this.params.action = 1;
this.params.command = item.command;
this.params.cameraId = val.cameraId;
this.buttonList.map((item) => {
item.state = 1;
});
this.buttonList2.map((item) => {
item.state = 1;
});
cloud(this.params).then((res) => {
console.log(res);
if (res.success) {
item.state = 2;
} else {
this.$message.error(res.msg || '系统繁忙');
}
});
}
}
// if (item.command) {
// this.params.action = 1;
// this.params.command = item.command;
// this.params.cameraId = val.cameraId;
// this.buttonList.map((item) => {
// item.state = 1;
// });
// this.buttonList2.map((item) => {
// item.state = 1;
// });
// cloud(this.params).then((res) => {
// console.log(res);
// if (res.success) {
// item.state = 2;
// setTimeout(() => {
// item.state = 1;
// }, 2000)
// } else {
// this.$message.error(res.msg || '系统繁忙');
// }
// });
// }
},
monitor(id) {
this.form.cameraId = id.cameraId;
this.detailData = id;
this.videoShow = true;
this.show = false;
getCameraVideo({ cameraId: id.cameraId }).then((res) => {
if (res.code === 200) {
console.log(res);
this.nowPlayVideoUrl = res.data;
this.player = this.$Video("hls-video1"); // 关联video标签的id
this.player.src({
src: this.nowPlayVideoUrl,
type: "application/x-mpegURL",
});
this.player.play();
} else {
this.$message({
type: "error",
message: res.msg,
});
}
});
},
// 一件截图
shortScreen(val) {
console.log('-----------', val)
console.log(this.$refs)
const id = val.cameraId
// 对视频进行截图
html2canvas(this.$refs.test, { allowTaint: true, useCORS: true }).then(function (canvas) {
let link = document.createElement("a");
link.href = canvas.toDataURL();//下载链接
link.setAttribute("download", `${id}.png`);
link.style.display = "none";//a标签隐藏
document.body.appendChild(link);
link.click();
}).catch(err => {
console.log(err)
})
},
handleAvatarSuccess(res) {
this.form.picture = res.data.viewUrl;
},
beforeAvatarUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
return isLt2M;
},
close1() {
this.form = {
kind: 1,
picture: "",
cameraId: "",
};
this.dialogVisible = false;
},
// 提交
submit() {
console.log(this.form)
uploadEvent(this.form).then(res => {
if (res.code === 200) {
this.form = {
kind: 1,
picture: "",
cameraId: "",
}
this.$message.success(res.data)
} else {
this.$message.error(res.msg)
}
this.dialogVisible = false;
})
},
control() {
if (this.hasChildren == null) {
this.hasChildren = 1;
} else {
this.hasChildren = null;
}
},
//开始广播
openBroadcast(item) {
console.log(item);
let params = {
cameraId: item.cameraId,
};
if (item.kind) {
params.eventType = String(item.kind);
}
personPlayOnList(params).then((res) => {
console.log("328res-------", res);
if (res.code == 200) {
this.broMsg = res.data;
this.broadcast = false;
} else {
this.$message({
type: "error",
message: res.msg,
});
}
});
},
//关闭广播
closeBroadcast() {
console.log(123);
let params = {
broMsg: this.broMsg,
};
stopPersonPlay(params).then((res) => {
console.log(res);
this.broadcast = true;
});
},
// 多点位一键喊话
shout() {
this.radioShow = true;
},
cancel() {
if (this.hanhua == false && this.radioList && this.radioList.length > 0) {
console.log(123);
this.$message({
type: "error",
message: "请先关闭喊话",
});
} else {
this.radioShow = false;
this.radioList = [];
}
},
// 开启一键喊话
nextStep() {
console.log(this.radioList);
if (this.radioList && this.radioList.length > 0) {
this.$confirm("确认开启一键喊话吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
let params = {
cameraId: this.radioList,
eventType: "",
broMsg: "",
};
personPlayOnByList(params).then((res) => {
console.log(res);
if (res.code == 200) {
this.broMsg1 = res.data;
this.hanhua = false;
} else {
this.$message({
type: "error",
message: res.msg,
});
}
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消开启一键喊话",
});
});
} else {
this.$message({
type: "error",
message: "请选择监控点位",
});
}
},
// 关闭一键喊话
backStep() {
let params = {
broMsg: this.broMsg1,
};
stopPersonPlay(params).then((res) => {
console.log(res);
this.hanhua = true;
this.radioShow = false;
this.radioList = [];
});
},
},
};
</script>
<style>
.el-checkbox__label {
color: #fff;
}
.amap-info-window {
width: 120px;
background: #fff;
border-radius: 3px;
padding: 3px 7px;
box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
position: relative;
font-size: 16px;
line-height: 1.2;
}
.amap-info-sharp {
position: absolute;
top: 21px;
bottom: 0;
left: 50%;
margin-left: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #fff;
}
.el-dialog__header {
padding: 20px 20px 0 20px;
}
.el-dialog__body {
padding: 20px;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
<style lang="stylus" scoped>
.wrapper {
margin: auto;
width: 100%;
height: 1080px;
position: relative;
.upload {
display: flex;
margin-top: 20px;
}
}
.nothing {
display: flex;
justify-content: center;
text-align: center;
color: white;
font-size: 26px;
margin-top: 32px;
color: #24a5e5;
}
.map {
width: 100%;
height: 1080px;
margin: auto;
}
.radio-content {
position: absolute;
width: 600px;
max-height: 500px;
overflow: auto;
padding: 0 20px 20px 20px;
box-sizing: border-box;
border-radius: 5px;
top: 25%;
left: 33%;
z-index: 1;
background: rgba(0, 59, 117, 0.8);
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
.top {
padding: 20px;
background: #01071D;
.el-icon-close {
cursor: pointer;
}
}
.monitor {
font-size: 16px;
margin: 20px 0;
color: #3196FA;
}
.bottom {
background: rgba(0, 59, 117, 0.8);
}
}
.video-history {
position: absolute;
width: 600px;
height: 400px;
top: 20%;
left: 31%;
z-index: 1;
.closeVideo {
background: #ffffff;
color: #ffffff;
z-index: 99;
position: relative;
}
.closeVideo i {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.bottom {
display: flex;
align-items: center;
height: 54px;
padding: 0 20px;
background-color: #fff;
opacity: 0.9;
.el-date-editor{
width: 100%;
}
}
}
.video-content {
position: absolute;
width: 600px;
height: 400px;
top: 25%;
left: 32%;
z-index: 1;
.closeVideo {
background: #ffffff;
color: #ffffff;
z-index: 99;
position: relative;
}
.closeVideo i {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.bottom {
display: flex;
justify-content: space-between;
align-items: center;
height: 54px;
background-color: #fff;
opacity: 0.9;
.address {
display: flex;
align-items: center;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #5ce3fb;
width: 100%;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
img {
width: 20px;
height: 24px;
margin: 0 10px;
}
}
.caozuo {
display: flex;
align-items: center;
}
.control {
width: 70px;
height: 32px;
line-height: 32px;
text-align: center;
border-radius: 2px;
border: 1px solid #18Dfff;
font-size: 11px;
color: #333;
cursor: pointer;
margin-right: 5px;
}
.guangbo {
width: 86px;
height: 32px;
line-height: 32px;
text-align: center;
line-height: 32px;
border-radius: 2px;
border: 1px solid #18Dfff;
font-size: 12px;
color: #333;
cursor: pointer;
margin-right: 10px;
}
.close {
border: 1px solid #FFE41A;
}
}
.bottom1 {
padding: 0 10px;
background-color: #003B75;
opacity: 0.8;
.direction {
display: flex;
justify-content: space-between;
.card1 {
width: 50%;
margin-top: 10px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
.button1 {
width: 70px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
border: 1px solid #18Dfff;
margin-bottom: 10px;
padding: 2px 4px;
background: #121A3C;
color: #55C1FF;
cursor: pointer;
font-size: 14px;
.name{
margin-right: 5px;
}
.name1 {
color: #FF9E48;
margin-right: 10px;
}
img {
width: 12px;
height: 12px;
margin: 5px;
}
}
}
.card2 {
width: 40%;
.button1 {
width: 70px;
}
}
}
}
}
.switch-title1 {
left: calc(50% - 100px);
}
.switch-title2 {
left: calc(50% - 180px);
}
.switch-title3 {
left: calc(50% - 260px);
}
.switch-title4{
left: calc(50% - 340px);
}
.switch-title {
position: absolute;
border-radius: 5px;
top: 100px;
height: 48px;
padding: 1px 0;
display: flex;
flex-direction: column;
box-sizing: border-box;
background: linear-gradient(180deg, #051831 0%, #063064 100%);
border-radius: 24px;
border: 1px solid #3196FA;
.card,.card2 {
width: 160px;
height: 44px;
line-height: 44px;
text-align: center;
cursor: pointer;
background: linear-gradient(180deg, #051831 0%, #063064 100%);
border-radius: 22px;
}
.card1 {
width: 160px;
height: 44px;
background: linear-gradient(180deg, #00FFFF 0%, #3196FA 100%);
border-radius: 22px;
}
}
.switch-name {
position: absolute;
left: 60%;
top: 71%;
display: flex;
align-items: center;
.name {
padding: 8px 15px;
background: rgba(255, 255, 255, 0.28);
font-size: 16px;
font-weight: 500;
border-radius: 5px;
color: #409EFF;
cursor: pointer;
}
.monitor {
margin-left: 15px;
padding: 8px 15px;
background: #5ce3fb;
font-size: 16px;
font-weight: 500;
border-radius: 5px;
color: #FFF;
cursor: pointer;
}
}
.switch-name1{
top: 71%;
left: 65%;
}
.switch-box {
position: absolute;
padding: 5px;
max-width: 130px;
overflow-x: hidden;
border-radius: 5px;
left: 451px;
top: 66%;
background: rgba(255, 255, 255, 0.28);
}
.switch-box1{
top: 90%;
}
.yjhhDialog{
z-index: 99999;
position: absolute;
top: 25%;
left: 15%;
width: 300px;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
// align-items: center;
// justify-content: center;
background: linear-gradient(270deg, #072B4D 0%, #134778 100%);
border-radius: 4px;
opacity 0.8;
.yjhhTitle{
color: #fff;
font-size: 18px;
font-weight: 500;
}
.yjhhCard{
margin-top: 20px;
display: flex;
flex-direction: column;
max-height: 300px;
overflow-y: auto;
.yjhhContent{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
color: #FFF;
font-size: 16px;
font-weight: 500;
.yjhhImg{
cursor: pointer;
}
}
}
.yjhhHand{
margin-top: 30px;
display: flex;
justify-content: flex-end;
.yjhhButton{
width: 86px;
height: 32px;
line-height: 32px;
text-align: center;
line-height: 32px;
border-radius: 2px;
border: 1px solid #18dfff;
font-size: 12px;
color: #fff;
cursor: pointer;
margin-left: 10px;
}
}
}
// 对话框
.dialog {
z-index: 9999;
position: absolute;
top: 0;
left: 0;
width: 1920px;
height: 1080px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
.dialog_wrapper {
position: absolute;
top: 30%;
left: 35%;
.dialog_body {
width: 610px;
height: 310px;
background: linear-gradient(270deg, #072B4D 0%, #134778 100%);
border-radius: 4px;
.dialog_header {
height: 36px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #EEEEEE;
.hed_left {
display: flex;
align-items: center;
p {
margin-left: 4px;
font-size: 16px;
font-weight: 500;
color: #54E3FD;
}
}
}
.dialog_content {
display: flex;
padding-top: 20px;
margin: 0 10px;
.cell {
margin-bottom: 12px;
display: flex;
align-items: center;
.label {
min-width: 70px;
font-size: 14px;
font-weight: 500;
color: #3196FA;
}
.value {
margin-left: 5px;
font-size: 14px;
font-weight: 500;
color: #FFFFFF;
}
}
.camera {
margin-top: 30px;
width: 370px;
height: 132px;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
// background: linear-gradient(90deg, #072B4D 0%, #072B4E 100%);
border-radius: 4px;
.btn-box {
display: flex;
float: right;
margin-top: 5px;
div {
width: 86px;
height: 32px;
line-height: 32px;
text-align: center;
line-height: 32px;
border-radius: 2px;
border: 1px solid #18Dfff;
font-size: 12px;
color: #fff;
cursor: pointer;
margin-left: 10px;
}
.close {
border: 1px solid #FFE41A;
}
}
.type {
display: flex;
align-items: center;
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.org {
background: #FC672C;
}
.green {
background: #54E3FD;
}
p {
margin-left: 4px;
font-size: 16px;
font-weight: 500;
color: #3196FA;
}
}
.nodata {
width: 180px;
height: 110px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #fff;
}
}
}
}
}
}
.dialog_label {
display: flex;
align-items: center;
margin-bottom: 18px;
line-height: 20px;
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
}
.conDialog {
width: 480px;
height: 286px;
margin: 32px 0 0 32px;
display: flex;
justify-content: space-between;
}
</style>
src/components/sectioncenter/WarnTrend.vue 0 → 100644
<template>
<div class="wrapper">
<div class="title">
<div class="icon"></div>
<p>30天全区城市眼告警指数走势</p>
</div>
<div id="warnTrend" class="charts"></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
name: "WarnTrend",
props: {
data: {
type: Array,
default: () => {
[];
},
},
},
watch: {
data: function () {
const xData = this.data.map((item) => {
return item.date.slice(5);
});
const yValue = this.data.map((item) => {
return item.total;
});
this.initLine(xData, yValue);
},
},
methods: {
initLine(xData, yValue) {
let myChart = echarts.init(document.getElementById("warnTrend"));
// 绘制图表
myChart.clear();
myChart.setOption({
animation: true,
grid: {
left: 20,
top: 20,
right: 20,
bottom: 20,
},
tooltip: {
trigger: "axis",
},
xAxis: {
data: xData,
type: "category",
axisLabel: {
interval: "auto",
color: "#fff",
fontSize: 13,
},
axisLine: {
lineStyle: {
color: "#fff",
},
},
},
yAxis: {
type: "value",
axisLabel: {
show: false,
},
splitLine: {
lineStyle: {
type: "dashed",
opacity: 0.3,
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
data: yValue,
type: "line",
smooth: true,
symbol: "none",
symbolSize: 10,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(69, 88, 246, 1)",
},
{
offset: 1,
color: "rgba(24, 255, 214, 1)",
},
]),
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(69, 88, 246, 1)",
},
{
offset: 1,
color: "rgba(24, 255, 214, 0)",
},
]),
},
},
],
});
},
},
};
</script>
<style lang="stylus" scoped>
.wrapper {
width: 530px;
height: 248px;
background: linear-gradient(180deg, rgba(10, 29, 72, 0.51) 0%, #0F152E 100%);
border-radius: 4px;
border: 2px solid #00356D;
.title {
height: 40px;
padding: 0 10px;
display: flex;
align-items: center;
background: linear-gradient(270deg, #072B4D 0%, #134778 100%);
.icon {
width: 2px;
height: 20px;
background: #5CE3FB;
border-radius: 2px;
}
p {
margin-left: 10px;
font-size: 20px;
font-weight: 400;
color: #5CE3FB;
span {
font-weight: 500;
color: #FC672C;
}
}
}
.charts {
width: 100%;
height: 200px;
margin: auto;
}
}
.WT_main {
width: 420px;
}
</style>
src/components/sectionleft/ActualEvent.vue 0 → 100644
<template>
<div class="actualEvent">
<div class="title">
<div class="title_left">
<div class="icon"></div>
<p>实时事件</p>
</div>
<img src="@/assets/index/more_icon.png" alt="" @click="moreEvent" />
</div>
<div class="actualTab">
<p
v-for="(item, index) of tab"
:key="index"
@click="changeTab(item.num)"
:class="{ active: page.cur === item.num }"
>
{{ item.name }}
</p>
</div>
<div class="contentWapper" id="conWapper">
<div
v-for="(item, index) of content"
:key="index"
v-show="page.cur == index"
>
<div v-for="(con, i) in item" :key="i">
<div class="conList">
<div class="eventcode">
<img src="@/assets/index/event_code.png" alt="" />
<p class="">{{ con.id }}</p>
<div
class="status"
:style="{
background: con.operateBackColor,
color: con.operateColor,
}"
>
{{ con.operateStatusName }}
</div>
</div>
<div class="itemWrapper">
<div>
<div class="cell">
<p style="width: 60px">发生时间：</p>
<p style="width: 152px">{{ con.createTime }}</p>
</div>
<div class="cell">
<p style="width: 60px">事件编号：</p>
<p style="width: 152px">{{ con.id }}</p>
</div>
<div class="cell">
<p style="width: 60px">事件类型：</p>
<p style="width: 152px">
{{
con.kindName
? con.kindName
: con.kind == 9
? "未出水"
: con.kind == 10
? "绕行未清洗"
: con.kind == 11
? "清洗时长不足"
: con.kind == 12
? "黑车"
: con.kind == 13
? "后盖异常"
: con.kind == 14
? "河上垃圾堆放"
: con.kind == 15
? "游泳检测"
: con.kind == 16
? "钓鱼检测"
: con.kind == 17
? "漂浮物"
: con.kind == 18
? "渔船"
: con.kind == 19
? "垂钓者"
: "-"
}}
</p>
</div>
<div class="cell">
<p style="width: 60px">发生位置：</p>
<p
@click="click(con)"
style="width: 152px; color: #ff9e48; cursor: pointer"
>
{{ con.cameraAddress }}
</p>
</div>
</div>
<el-image
style="width: 110px; height: 80px; margin-left: 14px"
:src="con.picture"
:preview-src-list="[con.picture]"
>
</el-image>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
export default {
name: "ActualEvent",
data() {
return {
tab: [{ name: "全部", num: 0 }, { name: "待派发", num: 1 }, { name: "待认领", num: 2 }, { name: "待处理", num: 3 }, { name: "待审核", num: 4 }, { name: "已结束", num: 5 }],
content: [],
page: {
currentPage: 1,
size: 10,
cur: 0,
},
allData: [],
first: false, // 如果是第一次加载不监听触底
timer: null,
front: false,
map: null,
};
},
props: {
eventList: {
type: Array,
default: () => {
[];
},
},
typeId: {
type: Number
}
},
created() {
let _this = this;
this.timer = window.setInterval(() => {
_this.front = true;
_this.$emit("eventStatus", _this.page, 1);
}, 60 * 1000 * 5);
console.log('------', JSON.parse(localStorage.getItem('accountInfo')).level)
// if (JSON.parse(localStorage.getItem('accountInfo')).level == 2 || (JSON.parse(localStorage.getItem('accountInfo')).level == 0 && JSON.parse(localStorage.getItem('typeId')) == 4)) {
// this.tab = [{ name: "全部", num: 0 }, { name: "待处理", num: 3 }, { name: "已结束", num: 5 }]
// } else {
// this.tab = [{ name: "全部", num: 0 }, { name: "待派发", num: 1 }, { name: "待认领", num: 2 }, { name: "待处理", num: 3 }, { name: "待审核", num: 4 }, { name: "已结束", num: 5 }]
// }
},
mounted() {
this.checkDivScroolTop();
},
watch: {
eventList: {
immediate: true,
deep: true,
handler(val) {
console.log(this.front)
val.forEach((item) => {
// 请求到10条数据
if (this.front === true) {
// 通过轮询收到新数据要放到数据前面，先合并
this.allData.unshift(item);
// 还要去重this.allData和item
for (let i = this.allData.length - 1; i >= 0; i--) {
for (let j = i - 1; j >= 0; j--) {
if (this.allData[i].id === this.allData[j].id) {
this.allData.splice(j, 1);
this.front = false;
}
}
}
} else {
this.allData.push(item);
console.log(this.allData)
}
});
this.$set(this.content, this.page.cur, this.allData);
this.first = false;
this.$emit("getMapData", this.content[this.page.cur]);
},
},
},
methods: {
changeTab(index) {
// 切换标签,做初始化工作
this.allData = [];
this.page.currentPage = 1;
this.first = true;
const el = document.querySelector("#conWapper");
el.scrollTop = 0;
this.page.cur = index;
this.$emit("eventStatus", this.page, 1);
},
// 跳转地图详情
click(val) {
console.log("当前详情val----", val);
this.$emit("marckClick", val);
},
moreEvent() {
console.log(this.typeId);
// this.$router.push("/event");
this.$router.push({
name: "event",
query: this.typeId,
});
},
checkDivScroolTop() {
this.$nextTick(() => {
const el = document.querySelector("#conWapper");
const offsetHeight = el.offsetHeight;
el.onscroll = () => {
const scrollTop = el.scrollTop;
const scrollHeight = el.scrollHeight;
if (this.first === false) {
if (offsetHeight + scrollTop - scrollHeight >= 0) {
let index = this.page.currentPage++;
console.log(index,'index---')
this.$set(this.page, "currentPage", index == 1 ? index + 1 : index);
this.$emit("eventStatus", this.page);
}
}
};
});
},
},
beforeDestroy() {
clearInterval(this.timer);
},
};
</script>
<style lang="stylus" scoped>
.actualEvent {
width: 384px;
height: 360px;
background: linear-gradient(180deg, rgba(10, 29, 72, 0.51) 0%, #0F152E 100%);
border-radius: 4px;
border: 2px solid #00356D;
.title {
height: 40px;
padding: 0 10px;
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(270deg, #072B4D 0%, #134778 100%);
.title_left {
display: flex;
align-items: center;
.icon {
width: 2px;
height: 20px;
background: #5CE3FB;
border-radius: 2px;
}
p {
margin-left: 10px;
font-size: 20px;
font-weight: 400;
color: #5CE3FB;
}
}
img {
cursor: pointer;
}
}
.actualTab {
margin: 12px 0;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: space-around;
p {
width: 50px;
height: 20px;
background: #123154;
border-radius: 10px;
line-height: 20px;
text-align: center;
font-size: 12px;
font-weight: 500;
color: #6A8EB7;
cursor: pointer;
}
.active {
background: #54E3FD;
border: 1px solid #5CE3FB;
color: #030303;
}
}
.contentWapper {
padding-left: 10px;
margin-right: 5px;
height: 260px;
overflow-y: auto;
.conList {
width: 356px;
margin-bottom: 10px;
background: linear-gradient(180deg, #072B4D 0%, #000D29 100%);
border-radius: 4px;
.eventcode {
position: relative;
height: 36px;
display: flex;
align-items: center;
background: linear-gradient(90deg, #072B4D 0%, #072B4E 100%);
p {
margin-left: 10px;
font-size: 16px;
font-weight: 500;
color: #FFFFFF;
}
.status {
position: absolute;
right: 12px;
top: 8px;
width: 68px;
height: 20px;
border-radius: 10px;
line-height: 20px;
text-align: center;
font-size: 12px;
font-weight: 500;
}
}
.itemWrapper {
padding: 10px;
display: flex;
align-items: center;
.cell {
max-width: 212px;
font-size: 12px;
color: #FFFFFF;
line-height: 24px;
display: flex;
}
}
}
}
}
::-webkit-scrollbar {
width: 3px !important;
/* 滚动条宽度 */
height: 3px !important;
/* 滚动条高度 */
background-color: #123154;
}
::-webkit-scrollbar-thumb {
background-color: #54A7E7 !important;
border-radius: 8px;
}
</style>
src/components/sectionleft/HandleTotalRate.vue 0 → 100644
<template>
<div class="Sevenwrapper">
<div class="title">
<div class="icon"></div>
<p>处置率/处置数统计</p>
</div>
<div class="searchWrapper">
<el-date-picker
class="datePicker"
size="mini"
v-model="dateTime"
type="daterange"
align="right"
:clearable="false"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
@change="initData"
></el-date-picker>
<el-select
class="selectPicker"
size="mini"
v-model="netAreaId"
filterable
placeholder="请选择网格"
@change="initData"
>
<el-option
v-for="item in netArea"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div class="HTR_main">
<div>
<div class="sub_panel">
<p class="sub_bg">{{ data.disposed }}</p>
</div>
<p class="panel_label">已处置</p>
</div>
<div>
<div id="panel" style="width: 160px; height: 120px"></div>
<p class="panel_label" style="margin-top: -13px">处置率</p>
</div>
<div>
<div class="sub_panel">
<p class="sub_bg">{{ data.waitingDispose }}</p>
</div>
<p class="panel_label">待处置</p>
</div>
</div>
</div>
</template>
<script>
import echarts from "echarts";
import { getFullDate, getSevenPassDate } from "@/utils/utils";
import { queryCustom, queryNetArea } from "@/api/api";
export default {
name: "HandleTotalRate",
props: {
typeId: {
type: Number
}
},
watch: {
typeId: function () {
this.initNetArea();
this.initData();
this.initEcharts();
},
},
data() {
return {
netArea: [{ value: "0", label: "全部" }],
data: {},
dateTime: [getSevenPassDate(), getFullDate()],
netAreaId: "0",
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
},
};
},
methods: {
initNetArea() {
console.log(this.typeId);
this.netArea = [{ value: "0", label: "全部" }];
queryNetArea({typeId: this.typeId}).then((res) => {
this.netArea = this.netArea.concat(
res.data.map((item) => {
return {
value: item.id,
label: item.name,
};
})
);
});
},
initData() {
const { dateTime, netAreaId } = this;
let parmas = {
createDateFrom: dateTime[0],
createDateTo: dateTime[1],
netAreaId: netAreaId,
typeId: this.typeId
};
queryCustom(parmas).then((res) => {
this.data = res.data.sevenReportData;
this.panelChart.setOption({
series: [{ data: [{ value: this.data.disposeRate }] }],
});
});
},
initEcharts() {
this.panelChart = echarts.init(document.getElementById("panel"));
this.panelChart.setOption({
tooltip: {
formatter: "处置率 : {c}%",
},
series: [
{
type: "gauge",
radius: "100%",
axisLine: {
lineStyle: {
color: [
//仪表盘背景颜色渐变
[
1,
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0.1,
color: "#FF4128",
},
{
offset: 0.6,
color: "#4BFF8A",
},
{
offset: 1,
color: "#4FF8E9",
},
]),
],
],
width: 18,
},
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
detail: {
formatter: "{value}%",
color: "#FC672C",
fontWeight: "500",
fontSize: "28",
},
data: [{ value: 0 }],
},
],
});
},
},
mounted() {
if (JSON.parse(localStorage.getItem('accountInfo')).level == 2) {
console.log(111)
} else {
this.initNetArea();
this.initData();
}
this.initEcharts();
},
};
</script>
<style lang="stylus">
.Sevenwrapper {
width: 384px;
height: 248px;
margin-top: 10px;
background: linear-gradient(180deg, rgba(10, 29, 72, 0.51) 0%, #0F152E 100%);
border-radius: 4px;
border: 2px solid #00356D;
.title {
height: 40px;
padding: 0 10px;
display: flex;
align-items: center;
background: linear-gradient(270deg, #072B4D 0%, #134778 100%);
.icon {
width: 2px;
height: 20px;
background: #5CE3FB;
border-radius: 2px;
}
p {
margin-left: 10px;
font-size: 20px;
font-weight: 400;
color: #5CE3FB;
span {
font-weight: 500;
color: #FC672C;
}
}
}
.searchWrapper {
padding: 0 14px;
display: flex;
align-items: center;
margin: 14px 0 22px;
.datePicker {
width: 200px;
background: #123154;
border: none;
border-radius: 14px;
.el-range-input {
background: #123154;
color: #6A8EB7;
}
.el-range-separator {
color: #6A8EB7;
}
}
.selectPicker {
width: 140px;
margin-left: 12px;
background: #123154;
border-radius: 14px;
.el-input__inner {
border: none;
color: #6A8EB7;
}
}
}
.HTR_main {
padding: 0 20px;
display: flex;
justify-content: center;
align-items: flex-end;
.panel_label {
margin-top: 7px;
text-align: center;
line-height: 20px;
font-size: 14px;
font-family: MicrosoftYaHeiUI;
color: #ffffff;
}
.sub_panel {
width: 95px;
height: 78px;
display: flex;
justify-content: center;
align-items: center;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
background: url('~@/assets/sub_panel.png') no-repeat;
background-size: cover;
.sub_bg {
height: 50px;
width: 50px;
margin-top: 15px;
background: url('~@/assets/sub_panel_bg.png') no-repeat;
background-size: 50px 50px;
line-height: 50px;
text-align: center;
color: #FC672C;
font-size: 16px;
font-weight: bold;
transform: scale(1);
/* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
animation-name: heartbeat; /* 动画名称 */
animation-duration: 3s; /* 动画时长3秒 */
animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
animation-iteration-count: infinite; /* 播放次数：无限 */
/* Safari and Chrome */
-webkit-animation-name: heartbeat; /* 动画名称 */
-webkit-animation-duration: 3s; /* 动画时长3秒 */
-webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
-webkit-animation-iteration-count: infinite; /* 播放次数：无限 */
}
@keyframes heartbeat {
from {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
}
}
}
</style>
\ No newline at end of file
src/components/sectionleft/WarnDetail.vue 0 → 100644
<template>
<div class="warnDetail">
<div class="title">
<div class="icon"></div>
<p>
当日告警事件 <span>{{ count }}</span>
</p>
</div>
<div class="content">
<div class="cell" v-if="count != 0">
<p class="cell_label"></p>
<div style="width: 150px; height: 10px"></div>
<p class="cell_count">数量</p>
<p class="cell_count">处置率</p>
</div>
<div class="cell" v-for="(item, index) in data" :key="index">
<p class="cell_label">{{ item.label }}</p>
<div class="cell_width">
<div
class="deep"
v-if="maxCount !== 0"
:style="{ width: (item.total / maxCount) * 150 + 'px' }"
>
<div class="deep2"></div>
</div>
<div class="deep" v-else style="width: 2px">
<div class="deep2"></div>
</div>
</div>
<p class="cell_count">{{ item.total }}</p>
<p class="cell_count" style="color: #fcb000">
{{ item.disposeRate + "%" }}
</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: "WarnDetail",
props: {
data: {
type: Array,
default: () => {
[];
},
},
maxCount: {
type: Number,
default: 0,
},
count: {
type: Number,
},
},
mounted() {},
};
</script>
<style lang="stylus" scoped>
.warnDetail {
width: 384px;
height: 320px;
margin-top: 10px;
background: linear-gradient(180deg, rgba(10, 29, 72, 0.51) 0%, #0F152E 100%);
border-radius: 4px;
border: 2px solid #00356D;
.title {
height: 40px;
padding: 0 10px;
display: flex;
align-items: center;
background: linear-gradient(270deg, #072B4D 0%, #134778 100%);
.icon {
width: 2px;
height: 20px;
background: #5CE3FB;
border-radius: 2px;
}
p {
margin-left: 10px;
font-size: 20px;
font-weight: 400;
color: #5CE3FB;
span {
font-weight: 500;
color: #FC672C;
}
}
}
.content {
padding: 20px;
font-size: 12px;
color: #ffffff;
height 75%;
overflow-y: auto;
.cell {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 16px;
.cell_label {
width: 80px;
}
.cell_width {
width: 150px;
height: 10px;
.deep {
height: 10px;
background: url('~@/assets/deep1_icon.png');
.deep2 {
width: 100%;
height: 100%;
background: url('~@/assets/deep2_icon.png');
opacity: 0.1;
/* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
animation-name: breath; /* 动画名称 */
animation-duration: 3s; /* 动画时长3秒 */
animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
animation-iteration-count: infinite; /* 播放次数：无限 */
/* Safari and Chrome */
-webkit-animation-name: breath; /* 动画名称 */
-webkit-animation-duration: 3s; /* 动画时长3秒 */
-webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
-webkit-animation-iteration-count: infinite; /* 播放次数：无限 */
}
@keyframes breath {
from {
opacity: 0.1;
}
/* 动画开始时的不透明度 */
50% {
opacity: 1;
}
/* 动画50% 时的不透明度 */
to {
opacity: 0.1;
}
/* 动画结束时的不透明度 */
}
}
}
.cell_count {
width: 50px;
text-align: center;
}
}
}
}
</style>
src/components/sectionright/EventList.vue 0 → 100644
<template>
<div class="eventWrapper">
<!-- 弹窗 -->
<el-dialog title="上报事件" :visible.sync="dialogVisible" width="30%" :before-close="close" :modal="false"
:show-close="false">
<div>
事件类型:
<el-select v-model="form.kind" size="small" placeholder="请选择">
<el-option v-for="item in newOptions" :key="item.eventType" :label="item.typeName" :value="item.eventType">
</el-option>
</el-select>
</div>
<div class="upload">
<span style="margin-right: 5px">事件图片:</span>
<el-upload class="avatar-uploader" action="http://1.15.3.38:19500/event/feedback/api/image/upload"
:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
<img v-if="form.picture" :src="form.picture" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</span>
</el-dialog>
<div class="title">
<div class="icon"></div>
<p>监控点位</p>
</div>
<div class="searchHeader" style="display: flex; justify-content: space-between">
<div class="left" style="width: 42%; height: 100%; overflow: auto">
<el-tree class="filter-tree" :data="cameraList1" :props="{
value: 'id',
label: 'name',
// children: 'deviceList'
}" default-expand-all :expand-on-click-node="false" ref="tree" @node-click="changeList" :highlight-current="true">
</el-tree>
</div>
<div class="right" style="width: 54%; height: 100%; overflow: auto">
<el-input v-model="cameraName" clearable size="mini" style="width: 95%; margin-top: 10px; padding: 0"
placeholder="输入点位名称搜索">
<el-button size="mini" slot="append" type="primary" icon="el-icon-search" @click="search"></el-button>
</el-input>
<div class="table">
<div class="name" v-for="(item, index) in cameraList2" :key="index" @click="playRadio(item)">
{{ item.name }}
</div>
</div>
</div>
</div>
<!-- <div class="searchHeader" style="display: flex; justify-content: space-between">
<div class="right" style="width: 100%; height: 100%; overflow: auto">
<el-input v-model="cameraName" clearable size="small" style="width: 95%; margin-top: 10px; padding: 0"
placeholder="输入点位名称搜索">
<el-button size="mini" slot="append" type="primary" icon="el-icon-search" @click="search"></el-button>
</el-input>
<div class="table">
<div class="name" v-for="(item, index) in cameraList1[0].deviceList" :key="index" @click="playRadio(item)">
{{ item.name }}
</div>
</div>
</div>
</div> -->
<div v-for="(i, index) in urls" :key="index">
<div class="videoWrapper" v-drag v-if="i.videoDialog">
<div class="closeVideo">
<i class="el-icon-close" @click="handleClose(i)"></i>
</div>
<VJSVue :src="i.url" ref="test"></VJSVue>
<div class="bottom">
<div class="address">
<img src="../../assets/index/address.png" alt="" />
{{
i.detailData.name ||
i.detailData.cameraAddress ||
i.detailData.address ||
i.detailData.typeName ||
"未知摄像头"
}}
</div>
<!-- <div class="caozuo">
<div class="control" @click="shortScreen(i.detailData)">一键截图</div>
<div class="control" @click="shangbao()">上报事件</div>
<div class="control" @click="control(i.detailData)">
<img src="../../assets/direction/9.png" style="width: 14px; height: 14px" alt="" />
云控制台
</div>
<div class="open guangbo" v-if="broadcast == true && i.detailData.isOpen == true"
@click="openBroadcast(i.detailData)">
<img src="../../assets/index/gbgj.png" style="margin-right: 5px" alt="" />人工喊话
</div>
<div class="close guangbo" v-if="broadcast == false && i.detailData.isOpen == true"
@click="closeBroadcast()">
<img src="../../assets/index/gbz.png" style="margin-right: 5px" alt="" />广播中
</div>
</div> -->
</div>
<div class="bottom1" v-if="i.detailData.hasChildren == 1">
<div class="direction">
<div class="card1">
<div class="button1" v-for="(item, index) in buttonList" :key="index" :title="item.name"
@mousedown="mouseDown(item, i.detailData)" @mouseup="mouseUp(item, i.detailData)">
<img v-if="item.state == 1" :src="item.url" alt="" />
<img v-if="item.state == 2" :src="item.url1" alt="" />
<!-- <div class="name" v-if="item.state == 1">{{ item.name }}</div>
<div class="name1" v-if="item.state == 2">停止</div> -->
</div>
</div>
<div class="card1 card2">
<div class="button1" v-for="(item, index) in buttonList2" :key="index" :title="item.name"
@mousedown="mouseDown(item, i.detailData)" @mouseup="mouseUp(item, i.detailData)">
<img v-if="item.state == 1" :src="item.url" alt="" />
<img v-if="item.state == 2" :src="item.url1" alt="" />
<!-- <div class="name" v-if="item.state == 1">{{ item.name }}</div>
<div class="name1" v-if="item.state == 2">停止</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import {
getCameraVideo,
personPlayOnList,
stopPersonPlay,
cameraByType,
cloud,
uploadEvent,
eventTypeList,
treeList
} from "@/api/api";
import VJSVue from "./VJS.vue";
import html2canvas from 'html2canvas'
export default {
name: "WarnEventList",
components: {
VJSVue,
},
data() {
return {
cameraName: "",
nowPlayVideoUrl: "",
player: null,
detailData: {},
broadcast: true,
broMsg: "",
options: [],
cameraList2: [],
// 事件类型
newOptions: [],
form: {
kind: null,
picture: "",
cameraId: "",
},
buttonList: [
{
url: require("../../assets/direction/5.png"),
url1: require("../../assets/direction/1-5.png"),
name: "左上",
command: "LEFT_UP",
state: 1,
},
{
url: require("../../assets/direction/1.png"),
url1: require("../../assets/direction/1-1.png"),
name: "向上",
command: "UP",
state: 1,
},
{
url: require("../../assets/direction/6.png"),
url1: require("../../assets/direction/1-6.png"),
name: "右上",
command: "RIGHT_UP",
state: 1,
},
{
url: require("../../assets/direction/3.png"),
url1: require("../../assets/direction/1-3.png"),
name: "向左",
command: "LEFT",
state: 1,
},
{
url: require("../../assets/direction/9.png"),
url1: require("../../assets/direction/9.png"),
state: 1,
},
{
url: require("../../assets/direction/4.png"),
url1: require("../../assets/direction/1-4.png"),
name: "向右",
command: "RIGHT",
state: 1,
},
{
url: require("../../assets/direction/7.png"),
url1: require("../../assets/direction/1-7.png"),
name: "左下",
command: "LEFT_DOWN",
state: 1,
},
{
url: require("../../assets/direction/2.png"),
url1: require("../../assets/direction/1-2.png"),
name: "向下",
command: "DOWN",
state: 1,
},
{
url: require("../../assets/direction/8.png"),
url1: require("../../assets/direction/1-8.png"),
name: "右下",
command: "RIGHT_DOWN",
state: 1,
},
],
buttonList2: [
{
url: require("../../assets/direction/bd1.png"),
url1: require("../../assets/direction/bd2.png"),
name: "焦距变大",
command: "ZOOM_IN",
state: 1
},
{
url: require("../../assets/direction/bx1.png"),
url1: require("../../assets/direction/bx2.png"),
name: "焦距变小",
command: "ZOOM_OUT",
state: 1
},
{
url: require("../../assets/direction/qy1.png"),
url1: require("../../assets/direction/qy2.png"),
name: "焦点前移",
command: "FOCUS_NEAR",
state: 1
},
{
url: require("../../assets/direction/hy1.png"),
url1: require("../../assets/direction/hy2.png"),
name: "焦点后移",
command: "FOCUS_FAR",
state: 1
},
{
url: require("../../assets/direction/kd1.png"),
url1: require("../../assets/direction/kd2.png"),
name: "光圈扩大",
command: "IRIS_ENLARGE",
state: 1
},
{
url: require("../../assets/direction/sx1.png"),
url1: require("../../assets/direction/sx2.png"),
name: "光圈缩小",
command: "IRIS_REDUCE",
state: 1
},
],
params: {
action: 0,
cameraId: "",
command: "",
},
urls: [],
level: null,
dialogVisible: false,
cameraList1: [],
};
},
props: {
// cameraList1: {
// type: Array,
// },
},
methods: {
init() {
treeList().then((res) => {
this.cameraList1 = res.data;
console.log('1111111',this.cameraList1)
});
},
handleAvatarSuccess(res) {
this.form.picture = res.data.viewUrl;
},
beforeAvatarUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
return isLt2M;
},
close() {
this.form = {
kind: null,
picture: "",
cameraId: "",
};
this.dialogVisible = false;
},
// 一件截图
shortScreen(val) {
const id = val.cameraId
// 对视频进行截图
html2canvas(this.$refs.test[0].$refs.videoPlayer, { allowTaint: true, useCORS: true }).then(function (canvas) {
let link = document.createElement("a");
link.href = canvas.toDataURL();//下载链接
link.setAttribute("download", `${id}.png`);
link.style.display = "none";//a标签隐藏
document.body.appendChild(link);
link.click();
}).catch(err => {
console.log(err)
})
},
shangbao() {
this.form.kind = null
this.dialogVisible = true
eventTypeList().then((res) => {
if (res.success) {
this.newOptions = res.data.slice(1)
}
})
},
// 提交
submit() {
uploadEvent(this.form).then(res => {
if (res.code === 200) {
this.form = {
kind: 1,
picture: "",
cameraId: "",
}
this.$message.success(res.data)
} else {
this.$message.error(res.msg)
}
this.dialogVisible = false;
})
},
search() {
// console.log(this.cameraName != "");
let params = {};
params.deviceClassifyIds = [];
params.name = this.cameraName;
cameraByType(params).then((res) => {
console.log(res)
if (res.code == 200) {
this.cameraList2 = res.data.dataList;
}
});
},
changeList(val) {
console.log(val);
let params = {};
params.deviceClassifyIds = [val.id];
params.name = this.cameraName;
cameraByType(params).then((res) => {
console.log(res);
if (res.code == 200) {
this.cameraList2 = res.data.dataList;
}
});
},
control(val) {
if (val.hasChildren == null) {
val.hasChildren = 1;
} else {
val.hasChildren = null;
}
},
mouseDown(item,val) {
console.log('按下------',item)
this.direction(item,val)
},
mouseUp(item,val) {
console.log('松开------',item)
setTimeout(() => {
this.direction(item,val)
}, 500);
},
direction(item, val) {
if (item.command) {
if (this.params.action == 1 && this.params.command == item.command) {
this.params.action = 0;
this.params.cameraId = val.cameraId;
cloud(this.params).then((res) => {
console.log(res);
this.buttonList.map((item) => {
item.state = 1;
});
this.buttonList2.map((item) => {
item.state = 1;
});
});
} else {
this.params.action = 1;
this.params.command = item.command;
this.params.cameraId = val.cameraId;
this.buttonList.map((item) => {
item.state = 1;
});
this.buttonList2.map((item) => {
item.state = 1;
});
cloud(this.params).then((res) => {
console.log(res);
if (res.success) {
item.state = 2;
} else {
this.$message.error(res.msg || '系统繁忙');
}
});
}
}
// if (item.command) {
// this.params.action = 1;
// this.params.command = item.command;
// this.params.cameraId = val.cameraId;
// this.buttonList.map((item) => {
// item.state = 1;
// });
// this.buttonList2.map((item) => {
// item.state = 1;
// });
// cloud(this.params).then((res) => {
// console.log(res);
// if (res.success) {
// item.state = 2;
// setTimeout(() => {
// item.state = 1;
// },2000)
// } else {
// this.$message.error(res.msg || '系统繁忙');
// }
// });
// }
console.log(this.urls);
},
playRadio(data) {
console.log(data)
this.form.deviceNo = data.deviceNo;
if (data.deviceNo) {
let param = {};
param.deviceNo = data.deviceNo;
getCameraVideo(param).then((res) => {
console.log(res)
if (res.code === 200) {
if (this.urls.length < 3) {
this.urls.push({ url: res.data, detailData: data });
this.urls.map((item) => {
item.videoDialog = true;
});
if (data.lat && data.lng) {
this.$emit("getJwd", data);
}
} else {
this.$message({
type: "warning",
message: "您已同时开启三个摄像头！",
});
}
console.log(this.urls);
} else {
this.$message({
type: "error",
message: res.msg,
});
}
});
}
},
handleClose(val) {
this.urls.splice(this.urls.indexOf(val), 1);
this.params.action = 0;
this.params.command = "LEFT_UP"
this.params.cameraId = val.detailData.cameraId;
cloud(this.params).then((res) => {
console.log(res);
this.buttonList.map((item) => {
item.state = 1;
});
this.buttonList2.map((item) => {
item.state = 1;
});
});
val.detailData.hasChildren = null;
this.closeBroadcast();
},
//开始广播
openBroadcast(item) {
let params = {
cameraId: item.cameraId,
};
if (item.kind) {
params.eventType = String(item.kind);
}
personPlayOnList(params).then((res) => {
if (res.code == 200) {
this.broMsg = res.data;
this.broadcast = false;
} else {
this.$message({
type: "error",
message: res.msg,
});
}
});
},
//关闭广播
closeBroadcast() {
let params = {
broMsg: this.broMsg,
};
stopPersonPlay(params).then((res) => {
console.log(res);
this.broadcast = true;
});
},
},
mounted() {
this.init()
this.search()
// this.level = JSON.parse(localStorage.getItem("accountInfo")).level;
},
};
</script>
<style lang="stylus">
.eventWrapper {
width: 384px;
height: 956px;
background: linear-gradient(180deg, rgba(10, 29, 72, 0.51) 0%, #0F152E 100%);
border-radius: 4px;
border: 2px solid #00356D;
.upload {
display: flex;
margin-top: 20px;
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
}
.title {
height: 40px;
padding: 0 10px;
display: flex;
align-items: center;
background: linear-gradient(270deg, #072B4D 0%, #134778 100%);
.icon {
width: 2px;
height: 20px;
background: #5CE3FB;
border-radius: 2px;
}
p {
margin-left: 10px;
font-size: 20px;
font-weight: 400;
color: #5CE3FB;
span {
font-weight: 500;
color: #FC672C;
}
}
}
.searchHeader {
margin: 10px 0;
padding: 0 10px;
.el-input {
margin-right: 10px;
border-radius: 4px;
.el-input__inner {
background: #123154;
border: none;
color: #FFFFFF;
}
}
.filter-tree {
margin-top: 10px;
background: #123154;
color: #5ce3fb;
max-height: 820px;
overflow-x: scroll;
}
.el-tree > :nth-child(n+1) {
display: inline-block;
min-width: 100%;
}
.table {
margin-top: 10px;
background: #123154;
padding: 10px;
color: #5ce3fb;
max-height: 820px;
overflow-y: scroll;
.name {
font-size: 14px;
line-height: 1.6;
cursor: pointer;
}
}
}
.eventList {
height: 87%;
padding: 0 20px;
overflow: auto;
font-size: 16px;
font-weight: 500;
color: #EEEEEE;
.eventItem {
margin-bottom: 16px;
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
}
}
.eventWrapper .el-dialog {
margin-top: 40vh !important;
// background: transparent;
.el-dialog__body {
padding: 40px 20px;
}
}
.videoWrapper {
position: absolute;
top: 12%;
left: -200%;
width: 600px;
height: 400px;
z-index: 1;
}
.closeVideo {
background: #ffffff;
color: #ffffff;
z-index: 99;
position: relative;
}
.closeVideo i {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.bottom {
display: flex;
justify-content: space-between;
align-items: center;
height: 54px;
background-color: #fff;
opacity: 0.9;
.address {
display: flex;
align-items: center;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #5ce3fb;
img {
width: 20px;
height: 24px;
margin: 0 10px;
}
}
.caozuo {
display: flex;
align-items: center;
}
.control {
width: 86px;
height: 32px;
line-height: 32px;
text-align: center;
border-radius: 2px;
border: 1px solid #18Dfff;
font-size: 12px;
color: #333;
cursor: pointer;
margin-right: 10px;
}
.guangbo {
width: 86px;
height: 32px;
line-height: 32px;
text-align: center;
border-radius: 2px;
border: 1px solid #18Dfff;
font-size: 12px;
color: #333;
cursor: pointer;
margin-right: 10px;
}
.close {
border: 1px solid #FFE41A;
}
}
.bottom1 {
padding: 0 10px;
background-color: #003B75;
opacity: 0.8;
.direction {
display: flex;
justify-content: space-between;
.card1 {
width: 50%;
margin-top: 10px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
.button1 {
width: 70px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
border: 1px solid #18Dfff;
margin-bottom: 10px;
padding: 2px 4px;
background: #121A3C;
color: #55C1FF;
cursor: pointer;
font-size: 14px;
.name1 {
color: #FF9E48;
}
img {
width: 12px;
height: 12px;
margin: 10px;
}
}
}
.card2 {
width: 40%;
.button1 {
width: 80px;
}
}
}
}
</style>
src/components/sectionright/VJS.vue 0 → 100644
<!-- =============================
- name: Minitor.vue
- author: yang
- description: Minitor.vue file is ready for
- time: 2021/5/11
============================= -->
<template>
<video
width="600"
height="400"
class="video-js v--box vjs-default-skin"
playsinline
webkit-playsinline
controls
autoplay
muted
preload="auto"
x-webkit-airplay="true"
x5-video-player-fullscreen="true"
x5-video-player-typ="h5"
style="width: 100%; height: 100%"
ref="videoPlayer"
>
<source :src="src" type="application/x-mpegURL" />
</video>
</template>
<script>
import videojs from "video.js";
import lan from "./zh-CN";
import 'video.js/dist/video-js.css'
export default {
name: "Mainitor",
props: {
src: {
type: String,
require: true,
},
poster: {
type: String,
default: null,
},
errorText: {
type: String,
default: "视频播放失败！",
},
},
methods: {
// 初始化监控
init() {
// 语言追加为中文
videojs.addLanguage("zh-CN", lan);
if (!this.$el) {
this.$nextTick(() => {
this.player = videojs(this.$el, this.options, function onPlayerReady() {
this.play()
});
});
} else {
this.player = videojs(this.$el, this.options, function onPlayerReady() {
this.play()
});
}
},
},
mounted() {
this.init();
},
watch: {
src(val) {
if (val) {
this.player.src({
src: val,
type: "application/x-mpegURL",
withCredentials: true,
});
}
},
},
data() {
return {
options: {
bigPlayButton: true,
textTrackDisplay: false,
posterImg: false,
errorDisplay: false,
controls: true,
// fluid: true, // 自适应宽高
language: "zh-CN",
// aspectRatio: "16:9",
notSupportedMessage: this.error,
hls: {
withCredentials: true,
},
},
player: null,
};
},
beforeDestroy() {
// 销毁直播
if (this.player) {
this.player.dispose();
this.player = null;
}
},
};
</script>
<style>
.v--box{
width: 100%;
height: 100%;
object-fit: fill
}
.video-js .vjs-big-play-button {
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
}
</style>
src/components/sectionright/zh-CN.js 0 → 100644
/**
* @name: zh-CN.js
* @author: yang
* @time: 2021/5/11
*/
export default {
"Play": "播放",
"Pause": "暂停",
"Current Time": "当前时间",
"Duration": "时长",
"Remaining Time": "剩余时间",
"Stream Type": "媒体流类型",
"LIVE": "直播",
"Loaded": "加载完成",
"Progress": "进度",
"Fullscreen": "全屏",
"Non-Fullscreen": "退出全屏",
"Picture-in-Picture": "画中画",
"Exit Picture-in-Picture": "退出画中画",
"Mute": "静音",
"Unmute": "取消静音",
"Playback Rate": "播放速度",
"Subtitles": "字幕",
"subtitles off": "关闭字幕",
"Captions": "内嵌字幕",
"captions off": "关闭内嵌字幕",
"Chapters": "节目段落",
"Close Modal Dialog": "关闭弹窗",
"Descriptions": "描述",
"descriptions off": "关闭描述",
"Audio Track": "音轨",
"You aborted the media playback": "视频播放被终止",
"A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
"No compatible source was found for this media.": "无法找到此视频兼容的源。",
"The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。",
"Play Video": "播放视频",
"Close": "关闭",
"Modal Window": "弹窗",
"This is a modal window": "这是一个弹窗",
"This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
", opens captions settings dialog": ", 开启标题设置弹窗",
", opens subtitles settings dialog": ", 开启字幕设置弹窗",
", opens descriptions settings dialog": ", 开启描述设置弹窗",
", selected": ", 选择",
"captions settings": "字幕设定",
"Audio Player": "音频播放器",
"Video Player": "视频播放器",
"Replay": "重新播放",
"Progress Bar": "进度条",
"Volume Level": "音量",
"subtitles settings": "字幕设定",
"descriptions settings": "描述设定",
"Text": "文字",
"White": "白",
"Black": "黑",
"Red": "红",
"Green": "绿",
"Blue": "蓝",
"Yellow": "黄",
"Magenta": "紫红",
"Cyan": "青",
"Background": "背景",
"Window": "窗口",
"Transparent": "透明",
"Semi-Transparent": "半透明",
"Opaque": "不透明",
"Font Size": "字体尺寸",
"Text Edge Style": "字体边缘样式",
"None": "无",
"Raised": "浮雕",
"Depressed": "压低",
"Uniform": "均匀",
"Dropshadow": "下阴影",
"Font Family": "字体库",
"Proportional Sans-Serif": "比例无细体",
"Monospace Sans-Serif": "单间隔无细体",
"Proportional Serif": "比例细体",
"Monospace Serif": "单间隔细体",
"Casual": "舒适",
"Script": "手写体",
"Small Caps": "小型大写字体",
"Reset": "重置",
"restore all settings to the default values": "恢复全部设定至预设值",
"Done": "完成",
"Caption Settings Dialog": "字幕设定窗口",
"Beginning of dialog window. Escape will cancel and close the window.": "打开对话窗口。Escape键将取消并关闭对话窗口",
"End of dialog window.": "结束对话窗口",
"Seek to live, currently behind live": "尝试直播，当前为延时播放",
"Seek to live, currently playing live": "尝试直播，当前为实时播放",
"progress bar timing: currentTime={1} duration={2}": "{1}/{2}",
"{1} is loading.": "正在加载 {1}。"
}
src/main.js 0 → 100644
import Vue from "vue";
import App from "./App.vue";
import router from "./router/router";
import VueRouter from "vue-router";
import "@/styles/common.css";
// 引入videojs
import Video from "video.js";
import "video.js/dist/video-js.css";
Vue.prototype.$Video = Video;
import hls from "videojs-contrib-hls";
Vue.use(hls); // 要播放hls流
import md5 from "js-md5";
Vue.prototype.$md5 = md5;
import {
Select,
Option,
Radio,
RadioGroup,
Image,
Dialog,
Input,
Button,
Tabs,
Form,
FormItem,
DatePicker,
Table,
Loading,
TableColumn,
Pagination,
Dropdown,
DropdownItem,
DropdownMenu,
Message,
CheckboxGroup,
Checkbox,
Tree,
Cascader,
MessageBox,
Upload,
} from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import "@/styles/element.css";
import "@/styles/common.css";
import "./utils/directive";
Vue.config.productionTip = false;
Vue.use(Select)
.use(Option)
.use(Radio)
.use(RadioGroup)
.use(Image)
.use(Dialog)
.use(Input)
.use(Button)
.use(Tabs)
.use(Form)
.use(FormItem)
.use(DatePicker)
.use(Table)
.use(TableColumn)
.use(Pagination)
.use(Dropdown)
.use(DropdownItem)
.use(DropdownMenu)
.use(CheckboxGroup)
.use(Checkbox)
.use(Loading)
.use(Tree)
.use(Upload)
.use(Cascader);
Vue.prototype.$message = Message;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.use(VueRouter);
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
src/pages/bigdata.vue 0 → 100644
<template>
<div class="indexCon">
<transition name="slide-fade">
<div class="main">
<warn-map :event="latestEvent" :cameraList="eventMapList" :changeJwdData="changeJwdData" @getList="changeType"
@getAll="changeAct" ref="map"></warn-map>
</div>
</transition>
<section class="leftWapper" ref="leftWap" id="leftWap">
<!-- <div>
<actual-event :key="index" @marckClick="marckClick" :eventList="eventList" :typeId="typeId"
@eventStatus="eventStatus"></actual-event>
<warn-detail :key="index1" :data="todayWarnDetails" :count="todayWarnCounts" :maxCount="todayMaxCount">
</warn-detail>
<handle-total-rate :typeId="typeId"></handle-total-rate>
</div>
<img src="@/assets/index/left_hide.png" class="leftHide" @click="hideLeft" /> -->
</section>
<section class="centerWrapper" ref="centerWrapper">
<!-- <img src="@/assets/index/center_hide.png" class="centerHide" alt="" @click="hideCenter" />
<div class="center-content">
<warn-trend :data="thirtyGroupData"></warn-trend>
<result-rate :typeId="typeId"></result-rate>
</div> -->
</section>
<section class="rightWrapper" ref="rightWrapper">
<img src="@/assets/index/right_hide.png" class="rightHide" @click="hideRight" />
<event-list :typeId="typeId" @getJwd="changeJwd"></event-list>
</section>
</div>
</template>
<script>
// import WarnDetail from "@/components/sectionleft/WarnDetail";
// import ActualEvent from "@/components/sectionleft/ActualEvent";
// import HandleTotalRate from "@/components/sectionleft/HandleTotalRate";
// import WarnTrend from "@/components/sectioncenter/WarnTrend";
import WarnMap from "@/components/sectioncenter/WarnMap";
// import ResultRate from "@/components/sectioncenter/ResultRate";
import EventList from "@/components/sectionright/EventList";
import {
getGroupData,
getTodayData,
// getCameraList,
cameraByType,
getEventsData,
CameraShowOne,
treeList,
} from "@/api/api";
import { compare } from "@/utils/utils";
// import { config } from "@/utils/request";
export default {
name: "app",
components: {
// WarnDetail,
// WarnTrend,
WarnMap,
// HandleTotalRate,
// ResultRate,
EventList,
// ActualEvent,
},
computed: {
todayMaxCount() {
return this.todayWarnDetails[0] && this.todayWarnDetails[0].total;
},
servenMaxCount() {
return this.sevenGroupData[0] && this.sevenGroupData[0].total;
},
},
data() {
return {
// 所有的摄像头
allList: [],
todayWarnCounts: 0, // 当日警告事件总数
todayWarnDetails: [], // 当日警告详情
thirtyGroupData: [], // 30天全区城市眼告警指数走势
sevenGroupData: [], // 七天区处置率
sevenServiceData: {}, // 七天全区处置率/处置数统计
latestEvent: {},
cameraList: [], // 摄像头位置信息
cameraList1: [], // 摄像头分类列表
eventMapList: [], // 地图事件列表
eventList: [], // 实时事件列表
hideL: false, // 是否隐藏左边
hideR: false, // 是否隐藏右边
hideC: false, //是否隐藏中间
index: 1,
index1: 1,
kindSelect: [
"垃圾堆积",
"出店",
"游商",
"机动车违停",
"非机动车违停",
"违规广告",
"沿街晾晒",
"人员聚集",
],
operateStatusSelect: [
{
name: "待派发",
backcolor: "rgba(244, 81, 108, 0.3)",
color: "#F4516C",
},
{
name: "待认领",
backcolor: "rgba(252, 103, 44, 0.3)",
color: "#FC672C",
},
{
name: "待处理",
backcolor: "rgba(255, 199, 43, 0.3)",
color: "#FFC72B",
},
{ name: "待审核", backcolor: "rgba(0,62,121, 0.3)", color: "#003E79" },
{
name: "已结束",
backcolor: "rgba(64, 201, 198, 0.3)",
color: "#40C9C6",
},
],
timer: null,
allEventList: [],
noThing: [],
unLine: [],
noRadio: [],
types: [1, 2, 3, 4],
typeId: 1,
changeJwdData: [],
bottomVisib: true
};
},
created() {
// if (JSON.parse(localStorage.getItem('accountInfo')).level == 2) {
// this.bottomVisib = false
// this.kindSelect = [
// "未出水",
// "绕行未清洗",
// "清洗时长不足",
// "黑车",
// "后盖异常",
// ]
// this.init();
// } else {
// this.bottomVisib = true
// this.init();
// }
this.init();
// this.initEventList({ currentPage: 1, size: 10, typeId: this.typeId }); // 获取事件列表
// 轮询
// this.timer = setInterval(() => {
// this.init();
// }, 60 * 1000 * 5);
},
// beforeDestroy() {
// if (this.timer) {
// clearInterval(this.timer);
// this.timer = null;
// }
// },
methods: {
init() {
// this.initGroup(); // 获取7、30天数据
// this.initToday(); // 获取当日告警数据
// this.initCamera(); // 获取摄像头数据
this.initCamera1(); //获取所有摄像头分类
this.getAllList(); // 所有的摄像头和所有的事件列表
},
marckClick(value) {
this.$refs.map.marckClick(value);
},
initGroup() {
getGroupData({ typeId: this.typeId }).then((res) => {
if (res.success) {
this.thirtyGroupData = res.data.thirtyReportData;
if (res.data.sevenReportData) {
let arr = res.data.sevenReportData.sevenDisposeRate;
this.sevenGroupData = this.handleData(arr);
this.sevenServiceData = {
total: res.data.sevenReportData.total || "",
disposed: res.data.sevenReportData.disposed,
waitingDispose: res.data.sevenReportData.waitingDispose,
disposeRate: res.data.sevenReportData.disposeRate,
};
}
}
});
},
initToday() {
if (this.typeId) {
this.todayWarnCounts = 0,
this.todayWarnDetails = [],
++this.index1;
}
getTodayData({ typeId: this.typeId }).then((res) => {
// if (res.success) {
res.data.items.forEach((val) => {
if (val.total === null) {
val.total = 0;
}
});
this.todayWarnCounts = parseInt(res.data.total);
this.todayWarnDetails = this.handleData(res.data.items);
// }
});
},
// 获取所有的摄像头列表
initCamera() {
let param = {};
param.typeName = "";
param.typeId = this.typeId;
CameraShowOne(param).then((res) => {
if (res.code === 200) {
this.cameraList = res.data;
} else {
this.$message({
message: res.message,
type: "warning",
});
}
});
},
// 获取所有的摄像头分类列表
initCamera1() {
let param = {};
param.typeName = "";
param.typeId = this.typeId;
treeList(param).then((res) => {
console.log(res)
this.cameraList1 = res.data;
});
},
changeJwd(value) {
this.changeJwdData = [value.lng, value.lat]
},
// 类型切换
changeType(arr) {
let c = [];
let b = [];
let a = [];
let d = [];
this.types = arr;
if (arr.includes(1)) {
c = this.allEventList.map((i) => {
return {
...i,
iconType: 1,
};
});
}
if (arr.includes(2)) {
b = this.noThing.map((i) => {
return {
...i,
iconType: 2,
};
});
}
if (arr.includes(3)) {
a = this.unLine.map((i) => {
return {
...i,
iconType: 3,
};
});
}
if (arr.includes(4)) {
d = this.noRadio.map((i) => {
return {
...i,
iconType: 4,
};
});
}
c = [...c, ...b, ...d, ...a];
this.eventMapList = c;
},
// 路河库长切换
changeAct(act) {
console.log(act);
if (act == 4) {
this.bottomVisib = false
} else {
this.bottomVisib = true
}
this.typeId = act;
// this.initGroup(); // 获取7、30天数据
// this.initToday(); // 获取当日告警数据
// this.initCamera(); // 获取摄像头数据
this.getAllList(); // 所有的摄像头和所有的事件列表
this.initCamera1();
let page = {
cur: 0,
currentPage: 1,
size: 10,
type: 1,
};
let type = 1;
this.initEventList(page, type);
},
// 获取所有有事件的和所有摄像头列表
getAllList() {
let params = {};
params.deviceClassifyIds = [];
params.name = '';
cameraByType(params).then((res) => {
console.log(res)
if (res.code == 200) {
this.eventMapList = res.data.dataList;
}
});
},
initEventList(page, type) {
console.log(page);
let param = {};
param.currentNo = type === 1 ? 1 : page.currentPage++;
param.pageSize = page.size;
param.operateStatus = page.cur ? page.cur : "";
param.typeId = this.typeId;
if (page.type && page.type == 1) {
this.eventList = [];
++this.index;
}
console.log(this.index);
getEventsData(param).then((res) => {
// console.log("实施时间----", res);
if (res.code === 200) {
this.eventList = res.data.dataList;
this.eventList.forEach((value) => {
value.kindName = this.kindSelect[value.kind - 1];
value.operateStatusName =
this.operateStatusSelect[value.operateStatus - 1].name;
value.operateBackColor =
this.operateStatusSelect[value.operateStatus - 1].backcolor;
value.operateColor =
this.operateStatusSelect[value.operateStatus - 1].color;
value.picture = `${value.picture}`;
});
// console.log("列表---", this.eventList);
}
});
},
eventStatus(page, type) {
this.initEventList(page, type);
},
handleData(arr) {
if (arr.length > 0) {
const newArr = arr.map((item) => {
switch (item.kind) {
case 1:
item.label = "垃圾堆积";
break;
case 2:
item.label = "出店";
break;
case 3:
item.label = "游商";
break;
case 4:
item.label = "机动⻋违停";
break;
case 5:
item.label = "⾮机动⻋违停";
break;
case 6:
item.label = "违规⼴告";
break;
case 7:
item.label = "沿街晾晒";
break;
case 8:
item.label = "⼈员聚集";
break;
case 9:
item.label = "未出水";
break;
case 10:
item.label = "绕行未清洗";
break;
case 11:
item.label = "清洗时长不足";
break;
case 12:
item.label = "黑车";
break;
case 13:
item.label = "后盖异常";
break;
case 14:
item.label = "河上垃圾堆放";
break;
case 15:
item.label = "游泳检测";
break;
case 16:
item.label = "钓鱼检测";
break;
case 17:
item.label = "漂浮物";
break;
case 18:
item.label = "渔船";
break;
case 19:
item.label = "垂钓者";
break;
default:
item.label = '-';
break;
}
item.total = parseInt(item.total);
return item;
});
// console.log('1231321321231',newArr.sort(compare("total")));
return newArr.sort(compare("total"));
} else {
// let a = [{total: 0}]
return []
}
},
// handleChange(item) {
// this.latestEvent = item;
// this.init();
// },
// handleChangeCenter(item) {
// this.latestEvent = item;
// },
hideLeft() {
let isShow = (this.hideL = !this.hideL);
let testDom = this.$refs.leftWap;
testDom.style.left = isShow ? "-409px" : "0";
},
hideRight() {
let isShow = (this.hideR = !this.hideR);
let testDom = this.$refs.rightWrapper;
testDom.style.right = isShow ? "-409px" : "0";
},
hideCenter() {
let isShow = (this.hideC = !this.hideC);
let testDom = this.$refs.centerWrapper;
testDom.style.bottom = isShow ? "-340px" : "-79px";
},
// getMapData(content) {
// this.eventMapList = content;
// },
},
};
</script>
<style lang="stylus" scoped>
.indexCon {
position: absolute;
top: 0;
left: 0;
width: 1920px;
height: 1080px;
overflow: hidden;
.main {
width: 1980px;
height: 1080px;
}
.leftWapper {
position: absolute;
top: 112px;
left: 0;
width: 419px;
margin-left: 20px;
display: flex;
align-items: center;
transition: 1s;
.leftHide {
width: 32px;
height: 274px;
margin-left: 1px;
cursor: pointer;
}
}
.centerWrapper {
position: absolute;
bottom: -79px;
left: 50%;
transform: translate(-50%, -50%);
width: 1078px;
height: 248px;
transition: 1s;
.centerHide {
width: 274px;
height: 32px;
display: block;
margin: 0 auto 1px;
cursor: pointer;
}
.center-content {
display: flex;
justify-content: space-around;
}
}
.rightWrapper {
position: absolute;
right: 0;
top: 112px;
margin-right: 20px;
display: flex;
align-items: center;
transition: 1s;
.rightHide {
width: 32px;
height: 247px;
margin-right: 1px;
cursor: pointer;
}
}
}
.slide-fade-enter-active {
transition: all 0.6s ease-in;
}
.slide-fade-leave-active {
transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to {
transform: translateX(1980px);
opacity: 0;
}
</style>
src/pages/eventTable.vue 0 → 100644
<template>
<div class="tableWrapper" ref="tableWrapper">
<div class="breadCrumbs">
<div class="bread-left">
<p class="bread_font">实时事件</p>
<img src="@/assets/index/bread_icon.png" alt="" />
<p class="bread_font">数据列表</p>
</div>
<el-button class="backbutton" icon="el-icon-arrow-left" @click="returnIndex">返回</el-button>
</div>
<div class="tableCon">
<div class="searchInput">
<p class="label">案件类型</p>
<el-select class="selectPicker" v-model="searchData.kind" size="mini" @change="initData">
<el-option v-for="item in kindSelect" :key="item.eventType" :label="item.typeName" :value="item.eventType"></el-option>
</el-select>
<p class="label">处理人员</p>
<el-input v-model="searchData.operator" class="inputPicker" clearable size="mini"></el-input>
<p class="label">案件状态</p>
<el-select class="selectPicker" v-model="searchData.operateStatus" size="mini" @change="initData">
<el-option v-for="(item, index) in operateStatusSelect" :key="item + 1" :label="item" :value="index">
</el-option>
</el-select>
<p class="label">选择时间</p>
<el-date-picker size="mini" v-model="searchData.time" type="daterange" range-separator="——"
start-placeholder="开始日期" end-placeholder="结束日期" class="datePicker" value-format="yyyy-MM-dd"
@change="initData">
</el-date-picker>
<el-button @click="initData" type="primary" class="searchButton">查询</el-button>
</div>
<div class="eventList">
<el-table border :data="tableData" style="width: 100%" :max-height="tableHeight"
:row-class-name="tableRowClassName" :header-cell-style="{
'background-color': headerBackColor,
'font-size': '16px',
color: '#54E3FD',
height: '40px'
}" @cell-click="colEvent">
<el-table-column type="index" width="60" label="序号" align="center">
</el-table-column>
<template v-for="(item, index) in columnData">
<el-table-column v-if="item.picture" :label="item.label" :prop="item.prop" :key="index" align="center"
:width="item.width" :min-width="item.minWidth" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span style="cursor: pointer; color: #04b9ff">
{{ scope.row.pictureUrl }}
</span>
</template>
</el-table-column>
<el-table-column v-else-if="item.feedbackPictureUrl" :label="item.label" :prop="item.prop" :key="index"
align="center" :width="item.width" :min-width="item.minWidth" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span style="cursor: pointer; color: #04b9ff">
{{ scope.row.feedbackPictureUrl }}
</span>
</template>
</el-table-column>
<el-table-column v-else :label="item.label" :prop="item.prop" :key="index" align="center"
:width="item.width" :min-width="item.minWidth" :show-overflow-tooltip="true"></el-table-column>
</template>
</el-table>
</div>
<div class="pageination">
<el-pagination v-show="filters.total > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="filters.current" :page-sizes="[15, 30, 40, 50]" :page-size="filters.size"
layout="total, sizes, prev, pager, next, jumper" :total="filters.total">
</el-pagination>
</div>
<div>
<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" />
</div>
<div class="videoStyle" v-drag v-if="videoDialog.visible">
<div style="position: relative" @click="closeVideo">
<i class="el-icon-close closeStyle"></i>
</div>
<!--<video src="" controls="controls" style="width: 600px;height: 400px;"></video>-->
<video id="hls-video" width="600" height="400" class="video-js vjs-default-skin vjs-big-play-centered"
playsinline webkit-playsinline controls preload="auto" x-webkit-airplay="true"
x5-video-player-fullscreen="true" x5-video-player-typ="h5" style="width: 100%; height: 100%"></video>
</div>
<!--<Video :videoDialog="videoDialog.visible" :nowPlayVideoUrl="nowPlayVideoUrl" :player="player" @closeVideo="closeVideo"></Video>-->
</div>
</div>
</template>
<script type='text/ecmascript-6'>
import { getEventsData,eventTypeList } from "@/api/api";
// import { getEventsData, getCameraVideo } from "@/api/api";
export default {
name: "eventTable",
data() {
return {
searchData: {
cameraId: "", // 摄像头id
kind: null, // 分类
operateStatus: 0, // 操作状态
operator: "", // 处理人员
time: []
},
tableData: [],
columnData: [
{
prop: "kindName",
label: "类型"
},
{
prop: "id",
label: "事件编号"
},
{
prop: "cameraAddress",
label: "位置"
},
{
prop: "cameraName",
label: "监控"
},
{
prop: "pictureUrl",
label: "事件图片",
picture: true
},
{
prop: "createDate",
label: "发生时间"
},
{
prop: "operator",
label: "处理人"
},
{
prop: "finishTime",
label: "处理时间"
},
{
prop: "feedbackPictureUrl",
label: "处理完成图",
feedbackPictureUrl: true
},
{
prop: "operateStatusName",
label: "状态"
}
],
tableHeight: 756,
headerBackColor: "#124474",
currentPage: 1,
filters: {
total: 0,
current: 1,
size: 200
},
kindSelect: [],
operateStatusSelect: [
"全部",
"待派发",
"待认领",
"待处理",
"待审核",
"已结束"
],
videoDialog: {
visible: false
},
showViewer: false, // 显示查看器
url: "",
player: undefined,
nowPlayVideoUrl: ""
};
},
created() {
this.initkindList();
this.initData();
},
methods: {
initData() {
let param = {};
param.currentNo = this.filters.current;
param.pageSize = this.filters.size;
if (this.searchData.time.length > 0) {
param.createDateFrom = this.searchData.time[0];
param.createDateTo = this.searchData.time[1];
} else {
param.createDateFrom = "";
param.createDateTo = "";
}
param.operator = this.searchData.operator;
param.kind = this.searchData.kind == 0 ? null : this.searchData.kind;
console.log('-----------', this.searchData.kind,this.kindSelect.length)
// if (this.kindSelect && this.kindSelect.length > 8) {
// // console.log(123)
// param.kind = this.searchData.kind !== 0 ? this.searchData.kind : "";
// } else {
// console.log(123)
// param.kind = this.searchData.kind !== 0 ? (this.searchData.kind + 8) : "";
// console.log('-----------', this.searchData.kind,param.kind)
// }
param.operateStatus =
this.searchData.operateStatus !== 0
? this.searchData.operateStatus
: "";
param.typeId = this.$route.query;
getEventsData(param).then(res => {
if (res.code === 200) {
this.tableData = res.data.dataList;
this.filters.total = Number(res.data.total);
this.tableData.forEach(value => {
// value.kindName = this.kindSelect[value.kind];
switch (value.kind) {
case 1:
value.kindName = '垃圾堆积'
break;
case 2:
value.kindName = '出店'
break;
case 3:
value.kindName = '游商'
break;
case 4:
value.kindName = '机动车违停'
break;
case 5:
value.kindName = '非机动车违停'
break;
case 6:
value.kindName = '违规广告'
break;
case 7:
value.kindName = '沿街晾晒'
break;
case 8:
value.kindName = '人员聚集'
break;
case 9:
value.kindName = '未出水'
break;
case 10:
value.kindName = '绕行未清洗'
break;
case 11:
value.kindName = '清洗时长不足'
break;
case 12:
value.kindName = '黑车'
break;
case 13:
value.kindName = '后盖异常'
break;
case 14:
value.kindName = '河上垃圾堆放'
break;
case 15:
value.kindName = '游泳检测'
break;
case 16:
value.kindName = '钓鱼检测'
break;
case 17:
value.kindName = '漂浮物'
break;
case 18:
value.kindName = '渔船'
break;
case 19:
value.kindName = '垂钓者'
break;
default:
break;
}
value.operateStatusName = this.operateStatusSelect[
value.operateStatus
];
value.pictureUrl = value.picture === null ? "" : "查看";
value.feedbackPictureUrl =
value.feedbackPicture === null ? "" : "查看";
});
}
});
},
initkindList() {
eventTypeList().then((res) => {
console.log(res)
if (res.success) {
this.kindSelect = res.data
}
})
},
tableRowClassName({ rowIndex }) {
if (rowIndex % 2 !== 1) {
return "warning-row";
} else {
return "success-row";
}
},
colEvent(row, column) {
switch (column.label) {
case "事件图片":
this.url = `${row.picture}`;
this.showViewer = true;
this.stopMove();
break;
case "处理完成图":
this.showViewer = true;
this.url = row.feedbackPicture;
this.stopMove();
break;
// case "监控":
// this.videoDialog.visible = true;
// getCameraVideo({ cameraId: row.cameraId }).then(res => {
// if (res.code === 200) {
// this.nowPlayVideoUrl = res.data.playrealUrl;
// this.player = this.$Video("hls-video"); // 关联video标签的id
// this.player.src({
// src: this.nowPlayVideoUrl,
// type: "application/x-mpegURL"
// });
// setTimeout(() => {
// this.player.play();
// }, 150);
// }
// });
// break;
}
},
handleSizeChange(val) {
this.filters.size = val;
this.initData();
},
handleCurrentChange(val) {
this.filters.current = val;
this.initData();
},
closeVideo() {
this.player.dispose();
this.player = null;
this.videoDialog.visible = false;
},
returnIndex() {
this.$router.push("/bigdata");
localStorage.setItem("typeId", JSON.stringify('1'))
},
closeViewer() {
this.showViewer = false;
this.move();
},
// 停止页面滚动
stopMove() {
let m = function (e) {
e.preventDefault();
};
document.body.style.overflow = "hidden";
document.addEventListener("touchmove", m, { passive: false }); // 禁止页面滑动
},
// 开启页面滚动
move() {
let m = function (e) {
e.preventDefault();
};
document.body.style.overflow = "auto"; // 出现滚动条
document.removeEventListener("touchmove", m, { passive: true });
}
},
beforeDestroy: function () {
if (this.player) {
this.player.dispose();
this.player = null;
}
},
components: {
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer")
}
};
</script>
<style lang="stylus">
.tableWrapper {
height: 988px;
padding: 0 20px;
.breadCrumbs {
margin: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
.bread-left {
display: flex;
align-items: center;
img {
margin: 0 4px;
}
.bread_font {
ont-size: 28px;
font-family: PangMenZhengDao;
color: #FFFFFF;
// text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.5);
background: linear-gradient(180deg, #FFFFFF 0%, #009BFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.backbutton {
width: 100px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #54E3FD;
border-radius: 4px;
border: 1px solid #5CE3FB;
font-size: 16px;
font-weight: 600;
color: #101010;
}
}
.tableCon {
width: 100%;
height: 887px;
background: linear-gradient(180deg, rgba(10, 29, 72, 0.51) 0%, #0F152E 100%);
border-radius: 4px;
border: 2px solid #00356D;
.searchInput {
height: 74px;
padding-left: 16px;
display: flex;
align-items: center;
background: #0B1B3C;
border-radius: 4px 4px 0px 0px;
border-bottom: 2px solid #00356D;
.label {
margin: 0 10px 0 50px;
font-size: 16px;
color: #ffffff;
}
.label:first-child {
margin-left: 0;
}
.selectPicker {
width: 200px;
.el-input__inner {
height: 42px;
border: 0px;
color: #E0E0E0;
background: #123154;
border-radius: 4px;
}
}
.inputPicker {
width: 200px;
.el-input__inner {
color: #E0E0E0;
height: 42px;
background: #123154;
border: 0px;
}
}
.datePicker {
width: 250px;
height: 42px;
background: #123154;
border: none;
border-radius: 4px;
.el-input__icon {
line-height: 40px;
}
.el-range-input {
height: 42px;
background: #123154;
color: #6A8EB7;
}
.el-range-separator {
line-height: 40px;
color: #6A8EB7;
}
}
.searchButton {
width: 68px;
height: 32px;
margin-left: 30px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: #54E3FD;
border-radius: 4px;
border: 1px solid #5CE3FB;
font-size: 16px;
font-weight: 600;
color: #101010;
}
}
.eventList {
padding: 10px 10px 0;
.el-table {
color: #fff;
.warning-row {
background: #0B183A;
}
.success-row {
background: #002548;
}
.picStyle {
cursor: pointer;
color: #04b9ff;
}
}
.el-table--border {
border: 2px solid #00356D;
}
.el-table tbody tr:hover>td {
background-color: transparent !important;
border: solid 0;
}
.el-table td, .el-table th.is-leaf {
border: none;
}
.el-table--border::after, .el-table--group::after, .el-table::before {
background: #0C1354;
}
.el-table--border th.gutter:last-of-type {
background: #0C1354;
border: 0;
}
}
}
}
.tableWrapper .el-dialog__title {
color: #ffffff;
}
.tableWrapper .el-dialog__body {
display: flex;
flex-direction: column;
align-items: center;
}
.tableWrapper .el-dialog {
background: transparent;
}
.tableWrapper .imgStyle {
width: 850px;
height: 600px;
display: flex;
justify-content: center;
border: solid 1px #ffffff;
color: #ffffff;
}
.videoDialog .el-dialog__headerbtn {
top: 0;
right: -13px;
z-index: 999;
color: #ffffff;
background: rgba(0, 0, 0, 0.8);
padding: 5px;
}
.videoStyle {
width: 600px;
height: 400px;
position: absolute;
top: 20%;
left: 30%;
z-index: 1;
}
.closeStyle {
color: #ffffff;
position: absolute;
top: 0;
right: 0;
z-index: 9;
cursor: pointer;
}
.el-image-viewer__close {
color: #ffffff;
}
</style>
\ No newline at end of file
src/pages/index.vue 0 → 100644
<template>
<div id="index" ref="app">
<Header></Header>
<transition name="slide-fade">
<router-view />
</transition>
</div>
</template>
<script>
import Header from "@/components/Header";
export default {
name: "index",
components: {
Header,
},
};
</script>
<style lang="stylus" scoped>
#index {
position: relative;
width: 1920px;
height: 1080px;
margin: auto;
background: url('~@/assets/index/main_bg.png') no-repeat;
background-size: 1920px 1080px;
overflow: hidden;
}
</style>
src/pages/login.vue 0 → 100644
<template>
<transition name="fade" mode="in-out">
<div class="login_page">
<section class="form_contianer">
<div class="titleArea">智管青山湖驾驶舱</div>
<div class="operation">
<div class="sub-title">账号登录</div>
<div class="under-line"></div>
<el-form
:model="loginForm"
:rules="rules"
ref="loginForm"
class="loginForm"
>
<el-form-item prop="username" class="login-item">
<el-input
prefix-icon="el-icon-user-solid"
class="area"
type="text"
placeholder="用户名"
@keyup.enter.native="submitForm('loginForm')"
v-model="loginForm.username"
></el-input>
</el-form-item>
<el-form-item prop="password" class="login-item">
<el-input
prefix-icon="el-icon-lock"
class="area"
type="password"
placeholder="密码"
@keyup.enter.native="submitForm('loginForm')"
v-model="loginForm.password"
></el-input>
</el-form-item>
<el-form-item class="login-item">
<el-button type="primary" @click="submitForm" class="submit_btn"
>登录</el-button
>
</el-form-item>
</el-form>
</div>
</section>
</div>
</transition>
</template>
<script>
import { login } from "@/api/api.js";
export default {
data() {
return {
loginForm: {
username: "",
password: "",
},
rules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
],
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
},
};
},
methods: {
submitForm() {
localStorage.clear();
this.$refs["loginForm"].validate((valid) => {
if (valid) {
let params = {
username: this.loginForm.username,
// password: this.$md5(this.loginForm.password),
password: this.loginForm.password,
};
login(params).then((res) => {
console.log(res);
if (res.code === 200) {
localStorage.setItem("accountInfo", JSON.stringify(res.data.Authorization));
this.$router.push("/index");
} else {
this.$message({
type: "error",
message: res.msg,
});
}
});
} else {
return false;
}
});
},
},
};
</script>
<style lang="stylus" scoped>
.login_page {
position: absolute;
width: 1920px;
height: 1080px;
background: url('../assets/login/login_bg.png') no-repeat center center;
background-size: 1920px 1080px;
overflow: hidden;
.form_contianer {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 650px;
border-radius: 5px;
padding: 25px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
.titleArea {
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
width: 100%;
padding-bottom: 50px;
line-height: 68px;
letter-spacing: 2px;
font-family: YouSheBiaoTiHei;
font-size: 58px;
font-weight: 500;
color: #fff;
}
.operation {
width: 580px;
height: 391px;
padding-top: 40px;
display: flex;
align-items: center;
flex-direction: column;
background-image: url('~@/assets/login/login_div_bg.png');
background-size: 100% 100%;
.sub-title {
text-align: center;
line-height: 42px;
color: #fff;
font-size: 30px;
font-family: PingFangSC-Regular, PingFang SC;
}
.under-line {
width: 120px;
height: 4px;
margin-top: 10px;
background: #54E3FD;
border-radius: 3px;
}
.loginForm {
width: 450px;
.login-item {
margin-top: 40px;
.submit_btn {
width: 100%;
padding: 13px 0;
font-size: 16px;
}
}
}
}
}
.logo {
position: fixed;
bottom: 60px;
right: 60px;
}
}
.fade-enter {
opacity: 0;
}
.fade-leave {
opacity: 1;
}
.fade-enter-active {
transition: opacity 0.5s;
}
.fade-leave-active {
opacity: 0;
transition: opacity 0.5s;
}
</style>
src/router/router.js 0 → 100644
import Vue from 'vue'
import Router from 'vue-router'
//import Login from '.././views/login.vue'
//import NotFound from '.././views/404.vue'
//import Home from '.././views/index.vue'
Vue.use(Router)
const router = new Router({
mode: 'history',//去掉#号
routes: [
{
path: '/',
name: 'login',
component: () => import('../pages/login')
},
{
path: '/index',
name: 'index',
redirect: '/bigdata',
component: () => import('../pages/index'),
children: [
{
path: '/bigdata',
name: 'bigdata',
component: () => import('../pages/bigdata')
},
{
path: '/event',
name: 'event',
component: () => import('../pages/eventTable')
}
]
}
]
})
router.beforeEach(async(to, from, next) => {
let account = JSON.parse(localStorage.getItem('accountInfo'))
const workerId = account ? account : null
// 已登陆
// console.log(workerId)
if (workerId) {
if (to.path != '/') { // 已登录状态直接去首页
next()
} else {
next('/index')
}
} else {
if (to.path == '/') {
next()
} else {
next({ path: '/' })
} // 未登录的状态跳转登录页
}
})
export default router
\ No newline at end of file
src/styles/common.css 0 → 100644
@charset "utf-8";html{background-color:#fff;color:#030303;font-size:12px}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left}
caption,th{text-align:inherit}
ul,ol,menu{list-style:none}
fieldset,img{border:0}
img,object,input,textarea,button,select{vertical-align:middle}
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
textarea{overflow:auto;resize:vertical}
input,textarea,button,select,a{outline:0 none;border: none;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent}
a,ins,s,u,del{text-decoration:none}
sup,sub{vertical-align:baseline}
html {height: 100%;font-size: 100px;-webkit-tap-highlight-color: transparent;}
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #030303;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
a {color: #25a4bb;text-decoration: none;}
src/styles/element.css 0 → 100644
.el-input--mini .el-input__inner {
background: rgba(11,29,46,0.6);
color: #fff;
}
.el-dialog__header {
padding: 0;
}
.el-dialog__body {
padding: 0;
color: #606266;
font-size: 14px;
word-break: break-all;
/*background: url("~@/assets/dialog.png") no-repeat;*/
}
.pageination {
display: flex;
margin-top: 8px;
flex-direction: row-reverse;
}
el-pager {
background: #1a74ec;
}
.el-pagination .btn-prev{
background: transparent;
color: #ffffff;
}
.el-pagination .btn-next {
background: transparent;
color: #ffffff;
}
.el-pagination button:disabled {
background: transparent;
color: #ffffff;
}
.el-pager .number {
background: transparent;
color: #ffffff;
}
.el-pagination__total {
color: #ffffff;
}
.el-pager li.active {
color: #155BA5;
}
.el-button--small, .el-button--small.is-round {
margin-left: 29px;
}
.el-image-viewer__canvas img {
width: 55%;
}
\ No newline at end of file
src/styles/public.css 0 → 100644
.public_title {
display: flex;
line-height: 20px;
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
letter-spacing: 1px;
color: #ffffff;
}
.public_title_icon {
width: 16px;
height: 20px;
margin-right: 7px;
}
.public_extra {
height: 20px;
display: flex;
align-items: center;
font-size: 16px;
font-family: MicrosoftYaHeiUI;
}
.public_extra_icon {
width:26px;
height:10px;
margin:0 3px;
}
\ No newline at end of file
src/utils/directive.js 0 → 100644
import Vue from 'vue'
Vue.directive('drag', {
bind (el) {
let dragBox = el // 获取当前元素
dragBox.onmousedown = e => {
// 算出鼠标相对元素的位置
let disX = e.clientX - dragBox.offsetLeft
let disY = e.clientY - dragBox.offsetTop
document.onmousemove = e => {
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX
let top = e.clientY - disY
// 移动当前元素
dragBox.style.left = left + 'px'
dragBox.style.top = top + 'px'
}
document.onmouseup = () => {
// 鼠标弹起来的时候不再移动
document.onmousemove = null
// 预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
document.onmouseup = null
}
}
}
})
\ No newline at end of file
src/utils/progress.js 0 → 100644
let Progress = function (init) {
this.init(init)
};
Progress.prototype = {
init: function (init) {
this.el = init.el;//元素ID
let cvsElement = document.getElementById(this.el),//获取元素
ctx = cvsElement.getContext("2d"),//获取画笔
width = 100,//元素宽度
height = 100,//元素高度
degActive = 0,//动态线条
time = init.timer,//定时器
text = init.text// 文字
//停止时的角度
init.deg >= 0 && init.deg <= 100 ? this.deg = init.deg : this.deg = 100;
//线宽
init.lineWidth !== undefined ?
this.lineWidth = init.lineWidth : this.lineWidth = 20;
//判断宽高较小者
this.wh = width > height ? height : width;
//设置圆的半径，默认为宽高较小者
init.circleRadius > 0 && init.circleRadius <= this.wh / 2 - this.lineWidth / 2 ?
this.circleRadius = init.circleRadius : this.circleRadius = this.wh / 2 - this.lineWidth / 2;
//绘制线的背景颜色
init.lineBgColor !== undefined ?
this.lineBgColor = init.lineBgColor : this.lineBgColor = '#ccc';
//绘制线的颜色
init.lineColor !== undefined ?
this.lineColor = init.lineColor : this.lineColor = '#009ee5';
//绘制文字颜色
init.textColor !== undefined ?
this.textColor = init.textColor : this.textColor = '#009ee5';
//绘制文字大小
init.fontSize !== undefined ?
this.fontSize = init.fontSize : this.fontSize = parseInt(this.circleRadius / 2);
//清除锯齿
if (window.devicePixelRatio) {
cvsElement.style.width = width + "px";
cvsElement.style.height = height + "px";
cvsElement.height = height * window.devicePixelRatio;
cvsElement.width = width * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
//设置线宽
ctx.lineWidth = this.lineWidth;
//启动定时器
this.timer = setInterval(function () {
ctx.clearRect(0, 0, width, height);//清除画布
ctx.beginPath();//开始绘制底圆
ctx.arc(width / 2, height / 2, this.circleRadius, 1, 8);
ctx.strokeStyle = this.lineBgColor;
ctx.stroke();
ctx.beginPath();//开始绘制动态圆
ctx.arc(width / 2, height / 2, this.circleRadius, -Math.PI / 2, degActive * Math.PI / 180 - Math.PI / 2);
ctx.strokeStyle = this.lineColor;
ctx.stroke();
let txt = text ? text : (parseInt(degActive * 100 / 360) + "%");//获取百分比
ctx.font = this.fontSize + "px SimHei";
let w = ctx.measureText(txt).width;//获取文本宽度
let h = this.fontSize / 2;
ctx.fillStyle = this.textColor;
ctx.fillText(txt, width / 2 - w / 2, height / 2 + h / 2);
if (degActive >= this.deg / 100 * 360) {//停止定时器
clearInterval(this.timer);
this.timer = null;
}
degActive++;
}.bind(this), time);
}
};
export default Progress
src/utils/request.js 0 → 100644
import axios from "axios";
import router from "../router/router";
const config = {
// proxy: "http://192.168.3.74:9500", // 本地地址
// proxy: "http://1.15.3.38:19500", // 线上地址
proxy: "http://101.35.253.12:9440/iot", // 线上地址 新
// proxy: "http://192.170.1.18:19500", // 华数地址
// imgUrl: "http://112.17.112.138:19000/images", // 查看服务器图片地址
};
// axios基本配置
const api = axios.create({
timeout: 30000,
// withCredentials: true,
});
// 请求开始拦截
api.interceptors.request.use(
(conf) => {
return conf;
},
(error) => ({ status: 0, msg: error.message })
);
// 请求返回拦截
api.interceptors.response.use(
(response) => {
if (
response.data.code === -1 &&
response.data.msg === "验签失败，请重新登录"
) {
router.push({ name: "Login" });
localStorage.clear();
}
return Promise.resolve(response).then(checkCode);
},
(error) => {
return Promise.reject(error);
}
);
// http状态码错误处理
// const checkStatus = (res) => {
// switch (res.status) {
// case 401: { //登录过期
// console.log('登录过期')
// break;
// }
// default:
// console.log('服务器存在异常')
// break;
// }
// }
// 后台自定义 code错误处理
const checkCode = (res) => {
console.log('fanhui----------res',res)
if (res) {
if (res.data.code === 200 || res.data.status === 100) {
//code为0成功
const returnData = {
code: 200,
success: true,
data: res.data.data,
msg: res.data.message,
};
return returnData;
} else {
//统一处理错误
const returnData = {
success: false,
code: res.data.code,
msg: res.data.message || res.data.msg,
};
return returnData;
}
} else {
const returnData = {
success: false,
code: -1,
msg: "没有返回值",
};
return returnData;
}
};
// 解析参数
const formatParams = (method = "GET", params) => {
let token = JSON.parse(localStorage.getItem("accountInfo"));
//headers配置
const headers = {
// "Content-Type": "application/json;charset=utf-8",
"Authorization": token ? token : '',
};
switch (method) {
case "POST":
return {
headers,
method,
data: params,
};
case "PUT":
return {
headers,
method,
data: params,
};
case "DELETE":
return {
headers,
method,
data: params,
};
case "GET":
return {
headers,
method,
params,
};
default:
return {
headers,
method,
params,
};
}
};
export { api, formatParams, config };
src/utils/utils.js 0 → 100644
// 数组排序降序
export function compare (property) {
return function(a, b){
var value1 = a[property];
var value2 = b[property];
return value2 - value1;
}
}
// 获取当前的月-日
export function getDate () {
const date = new Date()
let month = date.getMonth() + 1
month = month < 10 ? '0' + month : month
let day = date.getDate()
day = day < 10 ? '0' + day : day
return month + '-' + day
}
// 获取当前的年月日
export function getFullDate () {
const date = new Date()
let year = date.getFullYear()
let month = date.getMonth() + 1
month = month < 10 ? '0' + month : month
let day = date.getDate()
day = day < 10 ? '0' + day : day
return year + '-' + month + '-' + day
}
// 获取当前时间七天前的年月日
export function getSevenPassDate () {
let date = new Date(new Date().getTime() - 1000 * 3600 * 24 * 7)
let year = date.getFullYear()
let month = date.getMonth() + 1
month = month < 10 ? '0' + month : month
let day = date.getDate()
day = day < 10 ? '0' + day : day
return year + '-' + month + '-' + day
}
\ No newline at end of file
vue.config.js 0 → 100644
// const publicPath = process.env.NODE_ENV === 'production' ? '/linan_gzcloud/' : '/';
const isProd = process.env.NODE_ENV === 'production';
module.exports = {
// publicPath,
productionSourceMap: !isProd,
configureWebpack: {
externals: {
'AMap': 'AMap'
}
}
}
\ No newline at end of file
yarn-error.log 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
yarn.lock 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
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