Skip to content

T
traffic-front
Commit 858179d4 authored by wangxiaoming's avatar wangxiaoming
Browse files
Options

提交一版

parent b406d4b3
Hide whitespace changes
Inline Side-by-side
Showing with 2980 additions and 754 deletions
package.json
View file @ 858179d4
......@@ -16,10 +16,11 @@
"file-saver": "^2.0.2",
"gcoord": "^0.2.3",
"js-cookie": "^2.2.1",
"videojs-contrib-hls": "^5.15.0",
"videojs-flash": "^2.1.2",
"vue": "^2.6.11",
"vue-baidu-map": "^0.21.22",
"vue-router": "^3.3.4",
"videojs-flash": "^2.1.2",
"vue-video-player": "^5.0.2",
"vuex": "^3.5.1",
"xlsx": "^0.16.5"
......
public/index.html
View file @ 858179d4
......@@ -6,6 +6,18 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>巡检平台</title>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript">
var Ip=returnCitySN['cip']
var cityname=returnCitySN['cname']
localStorage.setItem('Ip', Ip)
localStorage.setItem('cityname', cityname)
</script>
</head>
<body>
......
public/players/rtc_player.html
View file @ 858179d4
......@@ -17,14 +17,16 @@
<body>
<img src='https://ossrs.net/gif/v1/sls.gif?site=ossrs.net&path=/player/rtcplayer'/>
<div class="container">
<div class="form-inline">
<!--<input type="text" id="txt_url" class="input-xxlarge" value="">-->
<div class="container" style=" margin-top: -75px;
height: 95%;
width: 100%;">
<!--<div class="form-inline">
&lt;!&ndash;<input type="text" id="txt_url" class="input-xxlarge" value="">&ndash;&gt;
<button class="btn btn-primary" id="btn_play" style="display:none">播放视频</button>
</div>
</div>-->
<label></label>
<video style="width:1000px;height:700px" id="rtc_media_player" controls autoplay></video>
<!-- <label></label>-->
<video style="width:100%;height:550px" id="rtc_media_player" controls autoplay></video>
<!-- <label></label>
SessionID: <span id='sessionid'></span>
......@@ -38,11 +40,19 @@
</footer>-->
</div>
<script type="text/javascript">
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return decodeURI(r[2]); return null; //返回参数值
}
var pc = null; // Global handler to do cleanup when replaying.
$(function(){
var startPlay = function() {
$('#rtc_media_player').show();
var urlObject = parse_rtmp_url("webrtc://152.136.233.116/live/livestream?eip=152.136.233.116");
var url =getUrlParam("url");
console.log("liveUrl"+url);
//"webrtc://152.136.233.116/live/livestream"
var urlObject = parse_rtmp_url(url);
var schema = window.location.protocol;
// Close PC when user replay.
......
src/config-prod-81.js 0 → 100644
View file @ 858179d4
const address = '/roadlinks/';
const videoAddress = 'http://106.52.130.113:8000';
const photoAddress = 'http://106.52.130.113:8000';
const imgAddress = '/roadlinks/';// 测试环境
const title = '安徽省道路综合巡检平台';
export {
address, photoAddress, imgAddress, videoAddress,
};
src/config-prod.js 0 → 100644
View file @ 858179d4
const address = '/roadlinks/';
const videoAddress = 'http://106.52.130.113:8000';
const photoAddress = 'http://106.52.130.113:8000';
const imgAddress = '/roadlinks/';// 测试环境
const title = '安徽省道路综合巡检平台';
export {
address, photoAddress, imgAddress, videoAddress,
};
src/config.js
View file @ 858179d4
// const address = 'http://152.136.233.116:8083/roadlinks/';
// const address = '/roadlinks/';
const address = 'http://127.0.0.1:8088/roadlinks/'; // 本地
// const address = '/roadlinks/'; // 测试环境
// const address = 'http://vmax.corp.roadlinks.cn:8088/roadlinks/';
// const address = 'http://127.0.0.1:8088/roadlinks/';
// const address = 'http://193.112.197.170:8080/roadlinks/';
// const address = 'http://172.16.40.196:29980/roadlinks/';
const videoAddress = 'http://152.136.233.116:8000';
const photoAddress = 'http://152.136.233.116:8000';
// const imgAddress = '/roadlinks/';// 测试环境
const imgAddress = 'http://152.136.233.116:8083/roadlinks/'; // 本地
// const imgApi = 'http://152.136.233.116:8083/roadlinks/getCapitalImg?imgName='; //这个没用到啊
const address = '/roadlinks/';
const videoAddress = 'http://106.52.130.113:8000';
const photoAddress = 'http://106.52.130.113:8000';
const imgAddress = '/roadlinks/';// 测试环境
const title = '安徽省道路综合巡检平台';
export {
address, photoAddress, imgAddress, videoAddress,
};
src/cookie.js 0 → 100644
View file @ 858179d4
import Cookies from 'js-cookie';
const TokenKey = `${process.env.VUE_APP_COOKIES_PREFIX}token`;
export function getToken() {
return Cookies.get('id');
}
export function setToken(token) {
return Cookies.set(TokenKey, token);
}
export function removeToken() {
return Cookies.remove(TokenKey);
}
export function getCookie(key) {
return Cookies.get(process.env.VUE_APP_COOKIES_PREFIX + key);
}
export function getCookieByKey(key) {
return Cookies.get(key);
}
export function setCookie(key, val) {
return Cookies.set(process.env.VUE_APP_COOKIES_PREFIX + key, val);
}
export function removeCookie(key) {
return Cookies.remove(process.env.VUE_APP_COOKIES_PREFIX + key);
}
export function removeCookieByKey(key) {
return Cookies.remove(key);
}
src/main.js
View file @ 858179d4
......@@ -9,17 +9,21 @@ import moment from 'moment';
import VueVideoPlayer from 'vue-video-player';
import axios from 'axios';
import store from '@/store';
import App from './App.vue';
import router from './router';
import store from './store';
// require videojs style
import 'video.js/dist/video-js.css';
// import 'vue-video-player/src/custom-theme.css'
Vue.use(VueVideoPlayer);
const hls = require('videojs-contrib-hls');
Vue.use(hls);
Vue.use(ElementUI);
Vue.use(BaiduMap, {
......@@ -47,10 +51,50 @@ router.beforeEach((to, from, next) => {
next();
}
});
axios.interceptors.request.use(
(config) => {
config.baseURL = '/';
config.withCredentials = true; // 允许携带token ,这个是解决跨域产生的相关问题
config.timeout = 6000;
const token = Cookies.get('id');
if (token) {
config.headers = {
AuthId: token,
Authorization: `Bearer ${token}`,
};
}
if (config.url === 'refresh') {
config.headers = {
Authorization: `Bearer ${token}`,
};
}
return config;
},
error => Promise.reject(error),
);
router.afterEach((to, from, next) => {
window.scrollTo(0, 0);
});
const permission = {
inserted(el, binding, vnode) {
const { value } = binding;
const roles = JSON.parse(localStorage.getItem('permission'));
if (value && value instanceof Array && value.length > 0) {
const permissionRoles = value;
const hasPermission = roles.some(role => permissionRoles.includes(role));
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el);
}
} else {
throw new Error('need roles! Like v-permission="[\'admin\',\'editor\']"');
}
},
};
Vue.directive('permission', permission);
new Vue({
router,
store,
......
src/permission.js 0 → 100644
View file @ 858179d4
const permission = {
equipmentCheck: '001',
equipmentList: '002',
userManagement: '003',
userAuthorization: '004',
equipmentList_edit: '002.001',
userManagement_edit: '003.001',
};
export {
permission,
};
src/request.js 0 → 100644
View file @ 858179d4
import axios from 'axios';
import { MessageBox, Message } from 'element-ui';
import store from '@/store';
import router from '@/router';
import { getToken } from './cookie';
// request interceptor
axios.interceptors.request.use(
(config) => {
// do something before request is sent
if (store.getters.token) {
// eslint-disable-next-line no-param-reassign
config.headers.Authorization = '22222';
}
return config;
},
(error) => {
// do something with request error
console.log(error); // for debug
return Promise.reject(error);
},
);
// response interceptor
axios.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
(response) => {
const res = response.data;
// -1 通用错误提示
if (res.code === -1) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 3 * 1000,
});
return Promise.reject(new Error(res.message || 'Error'));
}
return res;
},
(error) => {
if (error.response.status === 401) {
MessageBox.confirm('用户信息过期，请重新登录', '提示', {
confirmButtonText: '重登录',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload();
});
});
} else if (error.response.status === 403) {
router.push({ path: '/403' });
} else {
Message({
message: error.message,
type: 'error',
duration: 3 * 1000,
});
}
return Promise.reject(error);
},
);
src/router.js
View file @ 858179d4
......@@ -8,6 +8,11 @@ import Result from './views/Result.vue';
import ResultDetail from './views/ResultDetail.vue';
import Video from './views/Video.vue';
import Live from './views/Live.vue';
import EquipmentCheck from './views/equipment/EquipmentCheck.vue';
import EquipmentList from './views/equipment/EquipmentList.vue';
import ResetPassword from './views/userManagement/ResetPassword.vue';
import UserAuthorization from './views/userManagement/UserAuthorization.vue';
import UserManagement from './views/userManagement/UserManagement.vue';
Vue.use(Router);
......@@ -57,6 +62,31 @@ export default new Router({
name: 'live',
component: Live,
},
{
path: '/equipmentCheck',
name: 'equipmentCheck',
component: EquipmentCheck,
},
{
path: '/equipmentList',
name: 'equipmentList',
component: EquipmentList,
},
{
path: '/resetPassword',
name: 'resetPassword',
component: ResetPassword,
},
{
path: '/userAuthorization',
name: 'userAuthorization',
component: UserAuthorization,
},
{
path: '/userManagement',
name: 'userManagement',
component: UserManagement,
},
],
},
// 注册页面
......
src/store.js
View file @ 858179d4
......@@ -3,9 +3,10 @@ import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
const store = new Vuex.Store({
state: {
provinceId: 109,
permissionList: [],
},
mutations: {
......@@ -13,4 +14,9 @@ export default new Vuex.Store({
actions: {
},
changePermissionList(state, payload) {
state.permissionList = payload;
},
});
export default store;
src/views/Detail.vue
View file @ 858179d4
......@@ -40,8 +40,8 @@
<el-table
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
style="width: calc(100vw - 240px);overflow:hidden;"
border="true"
highlight-current-row="true"
:border="true"
:highlight-current-row="true"
>
<el-table-column label="序号" prop="no"></el-table-column>
<el-table-column label="道路资产名称" prop="name"></el-table-column>
......@@ -235,8 +235,8 @@ export default {
if (response.data.code === 200) {
this.capitalOptions = [];
if (response.data.data) {
console.log(response.data.data);
const { capitals } = response.data.data;
/* console.log(response.data.data);*/
const capitals = response.data.data;
const nameSet = new Set();
capitals.forEach((val) => {
nameSet.add(val.capitalName);
......@@ -247,7 +247,6 @@ export default {
}
});
}
} else {
}
})
.catch((error) => {
......@@ -277,21 +276,20 @@ export default {
if (response.data.data) {
const nameMap = new Map();
response.data.data.forEach((val) => {
if (val.lng && val.lat) {
// nameSet.add(val.capitalName);
let num = 1;
if (nameMap.has(val.capitalName)) {
num = nameMap.get(val.capitalName) + 1;
nameMap.set(val.capitalName, num);
} else {
nameMap.set(val.capitalName, num);
}
this.tableData.push({
no: ++this.no,
name: val.capitalName + num,
position: val.position,
});
/* if (val.lng && val.lat) { */
// nameSet.add(val.capitalName);
let num = 1;
if (nameMap.has(val.capitalName)) {
num = nameMap.get(val.capitalName) + 1;
nameMap.set(val.capitalName, num);
} else {
nameMap.set(val.capitalName, num);
}
this.tableData.push({
no: ++this.no,
name: val.capitalName + num,
position: val.position,
});
});
}
}
......@@ -364,7 +362,8 @@ export default {
this.tableData = [];
Message({
message: response.data.message,
// type: 'error',
duration: 3 * 1000,
type: 'error',
// duration: '800',
});
}
......
src/views/Home.vue
View file @ 858179d4
<template>
<div class="home">
<el-container>
<el-aside width="200px">
<el-aside width="200px" style="background-color: #323346">
<el-scrollbar style="width: 200px;height:100%">
<el-menu
:default-active="onRoutes"
active-text-color="#41afdd"
......@@ -9,7 +10,13 @@
class="el-menu-vertical-demo"
>
<div class="logo">
<img src="../assets/logo_new.png" alt />
<div v-if="provinceId ==109">
<img style="width:100px;height:80px" src="../assets/logo_anhui.png" alt />
</div>
<div v-else-if="provinceId != 109">
<img style="width:100px;height:80px" src="../assets/logo_new.png" alt />
</div>
</div>
<el-submenu index="1">
<span slot="title" class="submenu_parent">道路资产管理</span>
......@@ -66,11 +73,59 @@
<span slot="title" style="font-size: 16px">停车视频查看</span>
</el-menu-item>
</el-submenu>
<el-submenu index="5" v-permission="[permission.equipmentCheck,permission.equipmentList]">
<span slot="title" class="submenu_parent" >&nbsp;&nbsp;设备管理&nbsp;&nbsp;</span>
<el-menu-item
v-permission="[permission.equipmentCheck]"
index="5-1"
@click="goTo('/equipmentCheck')"
style="background:#252639 !important"
>
<span slot="title" style="font-size: 16px">设备信息审核</span>
</el-menu-item>
<el-menu-item
v-permission="[permission.equipmentList]"
index="5-2"
@click="goTo('/equipmentList')"
style="background:#252639 !important"
>
<span slot="title" style="font-size: 16px">设备信息列表</span>
</el-menu-item>
</el-submenu>
<el-submenu index="6" v-permission="[permission.userAuthorization,permission.userManagement]">
<span slot="title" class="submenu_parent" >&nbsp;&nbsp;账户管理&nbsp;&nbsp;</span>
<el-menu-item
v-permission="[permission.userManagement]"
index="6-1"
@click="goTo('/userManagement')"
style="background:#252639 !important"
>
<span slot="title" style="font-size: 16px">账户管理</span>
</el-menu-item>
<el-menu-item
v-permission="[permission.userAuthorization]"
index="6-2"
@click="goTo('/userAuthorization')"
style="background:#252639 !important"
>
<span slot="title" style="font-size: 16px">授权账户</span>
</el-menu-item>
<!-- <el-menu-item
index="6-3"
@click="goTo('/resetPassword')"
style="background:#252639 !important"
>
<span slot="title" style="font-size: 16px">修改密码</span>
</el-menu-item>-->
</el-submenu>
</el-menu>
</el-scrollbar>
</el-aside>
<el-container>
<el-header>
<div class="header-title">安徽省道路综合巡检平台（测试）</div>
<div class="header-title">{{menuTitle}}</div>
<span>欢迎您，</span>
<span>{{user.name}}</span>
<el-button type="text" class="exitSys" @click="esc">退出</el-button>
......@@ -87,11 +142,17 @@
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue';
import Cookies from 'js-cookie';
import store from '@/store';
import { title } from '../config';
import { permission } from '../permission';
export default {
name: 'home',
data() {
return {
permission,
provinceId: localStorage.getItem('provinceId'),
menuTitle: title,
myId: '',
user: {
name: '张三',
......@@ -118,16 +179,50 @@ export default {
// this.$route.path
// debugger
if (this.$route.path.replace('/', '') == 'overview') {
this.menuTitle = '资产汇总';
return '1-1';
} if (this.$route.path.replace('/', '') == 'detail') {
this.menuTitle = '资产明细';
return '1-2';
} if (this.$route.path.replace('/', '') == 'task') {
this.menuTitle = '巡检任务管理';
return '2';
} if (this.$route.path.replace('/', '') == 'result') {
this.menuTitle = '巡检结果查看';
return '3-1';
} if (this.$route.path.replace('/', '') == 'resultDetail') {
this.menuTitle = '巡检结果明细';
return '3-2';
}
if (this.$route.path.replace('/', '') == 'live') {
this.menuTitle = '实时视频查看';
return '4-1';
}
if (this.$route.path.replace('/', '') == 'video') {
this.menuTitle = '停车视频查看';
return '4-2';
}
if (this.$route.path.replace('/', '') == 'equipmentCheck') {
this.menuTitle = '设备信息审核';
return '5-1';
}
if (this.$route.path.replace('/', '') == 'equipmentList') {
this.menuTitle = '设备信息列表';
return '5-2';
}
if (this.$route.path.replace('/', '') == 'userManagement') {
this.menuTitle = '账户管理';
return '6-1';
}
if (this.$route.path.replace('/', '') == 'userAuthorization') {
this.menuTitle = '授权账户';
return '6-2';
}
if (this.$route.path.replace('/', '') == 'resetPassword') {
this.menuTitle = '修改密码';
return '6-3';
}
return '1-1';
},
},
......@@ -154,11 +249,14 @@ export default {
</script>
<style lang="less" scoped>
.el-scrollbar__wrap{
overflow-x: hidden;
}
.logo {
line-height: 50px;
}
.exitSys {
color: black;
color: blue;
background: 0 0;
padding-left: 0;
padding-right: 0;
......
src/views/Live.vue
View file @ 858179d4
......@@ -60,8 +60,9 @@
</div>
</div>
<el-dialog :visible.sync="isShowVideo" >
<video-player
<el-dialog :visible.sync="isShowVideo" width="1000px" height="5900px">
<iframe style="width:100%;height:600px" id="live" :src=playerSrc></iframe>
<!-- <video-player
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
......@@ -79,7 +80,7 @@
:options="playerOptions"
class="vjs-custom-skin videoPlayer"
:playsinline="true"
/>
/>-->
</el-dialog>
<el-dialog :visible.sync="isShowTip" width="250px">
<span>设备未启动</span>
......@@ -103,11 +104,13 @@ import { address } from '../config';
import 'video.js/dist/video-js.css';
import 'vue-video-player/src/custom-theme.css';
import 'videojs-flash';
import Cookies from 'js-cookie';
export default {
name: 'video',
data() {
return {
playerSrc: '',
isShowTip: false,
plateNoOptions: [],
searchData: [],
......@@ -160,17 +163,31 @@ export default {
height: '360',
autoplay: true,
sources: [{
type: 'rtmp/flv',
src: 'rtmp://58.200.131.2:1935/livetv/hunantv',
type: 'application/x-mpegURL',
src: '',
}],
techOrder: ['flash'],
notSupportedMessage: '设备已停止',
controls: true,
poster: '',
},
liveItem: {
},
timer: '',
liveUrl: 'webrtc://152.136.233.116/live/',
liveIp: '?eip=152.136.233.116',
};
},
mounted() {},
watch: {
isShowVideo(newValue) {
if (!newValue) {
this.liveStop();
}
},
},
mounted() {
this.timer = setInterval(this.watchLive, 10000);
},
created() {
this.queryAllEquipment();
const searchVal = sessionStorage.getItem('videoSearchVal');
......@@ -198,54 +215,113 @@ export default {
this.getParkVideos();
},
methods: {
liveStop() {
this.playerOptions.sources[0].src = '';
axios
.post(`${address}liveStop`, {
sessionId: Cookies.get('sessionId'),
ip: localStorage.getItem('Ip'),
channelCode: this.liveItem.channelCode,
code: this.liveItem.code,
})
.then((res) => {
console.log('暂停视频');
})
.catch((error) => {
console.log(error);
});
},
watchLive() {
// eslint-disable-next-line eqeqeq
if (this.isShowVideo == true) {
axios
.post(`${address}liveStart`, {
ip: localStorage.getItem('Ip'),
channelCode: this.liveItem.channelCode,
code: this.liveItem.code,
sessionId: Cookies.get('sessionId'),
})
.then((res) => {
console.log('发送心跳');
}).catch((error) => {
console.log(error);
});
}
},
// listen event
onPlayerPlay(player) {
axios
.post(`${address}liveStart`, {
ip: localStorage.getItem('Ip'),
channelCode: this.liveItem.channelCode,
code: this.liveItem.code,
sessionId: Cookies.get('sessionId'),
})
.then((res) => {
console.log('开始播放');
}).catch((error) => {
console.log(error);
});
console.log('player play!', player);
},
onPlayerPause(player) {
console.log('player pause!', player);
},
onPlayerEnded(player) {
console.log('player ended!', player);
},
onPlayerLoadeddata(player) {
console.log('player Loadeddata!', player);
},
onPlayerWaiting(player) {
console.log('player Waiting!', player);
},
onPlayerPlaying(player) {
console.log('player Playing!', player);
},
// 时间跳动
onPlayerTimeupdate(player) {
// console.log('player Timeupdate!', player.currentTime());
},
onPlayerCanplay(player) {
console.log('player Canplay!', player);
},
onPlayerCanplaythrough(player) {
console.log('player Canplaythrough!', player);
},
// or listen state event
playerStateChanged(playerCurrentState) {
console.log('player current update state', playerCurrentState);
},
// player is ready
playerReadied(player) {
// seek to 10s
/*
onPlayerPause(player) {
this.liveStop();
console.log('player pause!', player);
},
onPlayerEnded(player) {
console.log('player end!', player);
},
onPlayerLoadeddata(player) {
console.log('player Loadeddata!', player);
},
onPlayerWaiting(player) {
console.log('player Waiting!', player);
},
onPlayerPlaying(player) {
console.log('player Playing!', player);
},
// 时间跳动
onPlayerTimeupdate(player) {
// console.log('player Timeupdate!', player.currentTime());
},
onPlayerCanplay(player) {
console.log('player Canplay!', player);
},
onPlayerCanplaythrough(player) {
console.log('player Canplaythrough!', player);
},
// or listen state event
playerStateChanged(playerCurrentState) {
console.log('player current update state', playerCurrentState);
},
// player is ready
playerReadied(player) {
// seek to 10s
console.log('example player 1 readied', player);
player.currentTime(10);
console.log('example 01: the player is readied', player);
},
player.currentTime(10);
console.log('example 01: the player is readied', player);
}, */
// 播放
playVideos(item) {
this.liveItem = item;
axios
.post(`${address}getIfParkStart`, { vehicleId: 1 })
.post(`${address}getIfParkStart`, { vehicleId: item.id })
.then((response) => {
if (response.data.code === 200) {
if (response.data.data && response.data.data.length > 0) {
const channelAndDevid = `${item.code}_${item.channelCode}`;
const random = Math.random();
//webrtc:// 152.136.233.116/live/DefaultstringE3060400FFFBEBBF_zjhn?eip=152.136.233.116
// this.playerSrc = `players/rtc_player.html?url=${this.liveUrl}DefaultstringE3060400FFFBEBBF_zjhn${this.liveIp}&random=${random}`;
this.playerSrc = `players/rtc_player.html?url=${this.liveUrl}${channelAndDevid}${this.liveIp}&random=${random}`;
/* const channel = item.channelCode;
const devid = item.code;
const src = `http://152.136.233.116:1965/live/${devid}_${channel}.m3u8`;
this.playerOptions.sources[0].src = 'http://152.136.233.116:1965/live/livestream.m3u8'; */
this.onPlayerPlay();
this.isShowVideo = true;
} else {
this.isShowTip = true;
......@@ -278,7 +354,8 @@ export default {
} else {
Message({
message: response.data.message,
// type: 'error',
duration: 3 * 1000,
type: 'error',
// duration: '800',
});
}
......@@ -287,6 +364,7 @@ export default {
console.log(error);
});
},
getParkVideos() {
this.searchLoading = true;
const that = this;
......
src/views/Login.vue
View file @ 858179d4
......@@ -17,7 +17,7 @@
@keyup.enter.native="handleLogin"
v-model="loginForm.username"
auto-complete="off"
placeholder="请输入用户名"
placeholder="请输入手机号"
>
<i slot="prefix" class="elxingmingyonghumingnicheng"></i>
</el-input>
......@@ -50,45 +50,50 @@
</el-form-item>
</el-form>
</div>
<div class="has-text-centered register">
<span @click="register">创建一个账户</span>
<div class="has-text-right register">
<span style="margin-left:260px" @click="register">立即注册</span>
<!-- <span >丨</span>
<span >忘记密码</span>-->
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import { Message } from "element-ui";
import { constants } from "fs";
import Cookies from "js-cookie";
import { address } from "../config.js";
import axios from 'axios';
import { Message } from 'element-ui';
import { constants } from 'fs';
import Cookies from 'js-cookie';
import store from '@/store';
import { address } from '../config.js';
export default {
name: "userlogin",
name: 'userlogin',
data() {
// 用户名自定义验证规则
return {
fontstyle: {},
loginForm: {
username: "",
password: "",
verifycode: "",
username: '',
password: '',
verifycode: '',
},
checked: false,
identifyCodes: "1234567890",
identifyCode: "",
identifyCodes: '1234567890',
identifyCode: '',
loginRules: {
// 绑定在form表单中的验证规则
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ validator: this.isExists, trigger: 'blur' },
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 6, message: "密码长度最少为6位", trigger: "blur" },
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, message: '密码长度最少为6位', trigger: 'blur' },
],
},
passwordType: "password",
passwordType: 'password',
};
},
created() {},
......@@ -99,10 +104,25 @@ export default {
computed: {},
props: [],
methods: {
isExists(rule, value, callback) {
axios
.post(`${address}getUserInfoByUserName`, {
username: this.loginForm.username,
}).then((res) => {
// eslint-disable-next-line eqeqeq
if (res.data.code != 200) {
callback(new Error('手机号不存在'));
} else {
callback();
}
}).catch(() => {
callback(new Error('手机号不存在'));
});
},
// 跳转到home页
goToHome(id, username) {
this.$router.push({
name: "home",
name: 'home',
params: {
id,
username,
......@@ -111,16 +131,16 @@ export default {
},
// 创建用户
register() {
this.$router.push({ path: "/registered" });
this.$router.push({ path: '/registered' });
},
// 通过改变input的type使密码可见
showPassword() {
this.fontstyle === ""
? (this.fontstyle = "color: red")
: (this.fontstyle = ""); // 改变密码可见按钮颜色
this.passwordType === ""
? (this.passwordType = "password")
: (this.passwordType = "");
this.fontstyle === ''
? (this.fontstyle = 'color: red')
: (this.fontstyle = ''); // 改变密码可见按钮颜色
this.passwordType === ''
? (this.passwordType = 'password')
: (this.passwordType = '');
},
// 点击登入按钮
handleLogin() {
......@@ -128,35 +148,38 @@ export default {
if (valid) {
// 路由跳转到任务页面
axios
.post(address + "login", {
.post(`${address}login`, {
username: this.loginForm.username,
password: this.loginForm.password,
})
.then((response) => {
if (response.data.code === 200) {
Cookies.set("id", response.data.data.id);
Cookies.set("username", this.loginForm.username);
Message({
message: `登录${response.data.message}`,
type: "success",
duration: "800",
});
setTimeout(() => {
this.goToHome();
}, 1000);
Cookies.set('id', response.data.data.id);
Cookies.set('username', this.loginForm.username);
Cookies.set('sessionId', response.data.data.sessionId);
store.state.provinceId = response.data.data.provinceId;
store.state.permissionList = response.data.data.permissionList;
localStorage.setItem('permission', JSON.stringify(store.state.permissionList));
localStorage.setItem('provinceId', store.state.provinceId);
this.goToHome();
} else {
Message({
message: response.data.message,
type: "error",
type: 'error',
duration: 3 * 1000,
});
}
console.log(response.data);
})
.catch((error) => {
console.log(error);
Message({
message: '密码输入错误',
type: 'error',
duration: 3 * 1000,
});
});
} else {
console.log("error submit!!");
console.log('error submit!!');
return false;
}
});
......@@ -193,7 +216,9 @@ export default {
.iconstyle {
color: #409eff;
}
.has-text-right {
text-align: right;
}
.information {
width: 470px;
display: block;
......
src/views/Overview.vue
View file @ 858179d4
......@@ -2,18 +2,18 @@
<div class="overview">
<div class="box">
<el-row class="warp">
<div class="overview-line">淮南管理处道路资产汇总情况如下，总共{{totalnum}}个。</div>
<div class="overview-line">{{office}}管理处道路资产汇总情况如下，总共{{totalnum}}个。</div>
<!-- 任务表 -->
<div class="overview-table">
<el-table
:data="tableData"
style="width: 99.9%"
border="true"
:border="true"
row-key="id"
default-expand-all
:cell-style="setUpFont"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
highlight-current-row="true"
:highlight-current-row="true"
>
<el-table-column label="序号" width="200" prop="no"></el-table-column>
<el-table-column label="道路资产名称" prop="name"></el-table-column>
......@@ -61,6 +61,7 @@ export default {
name: 'overview',
data() {
return {
office: '淮南',
tableData: [],
typeData: [
{ value: 0, label: '全部' },
......@@ -203,8 +204,8 @@ export default {
this.no = 0;
this.tableId = 0;
if (response.data.data) {
console.log(response.data.data);
const { capitals } = response.data.data;
/* console.log(`llllll${JSON.stringify(response.data.data)}`); */
const capitals = response.data.data;
this.totalnum = capitals.length;
const capitalTypeMap = new Map();
const capitalNameMap = new Map();
......@@ -268,9 +269,8 @@ export default {
}
this.tableData.push(tableItem);
}
console.log(this.tableData);
/* console.log(`llllllll${JSON.stringify(this.tableData)}`); */
}
} else {
}
})
.catch((error) => {
......@@ -341,7 +341,8 @@ export default {
this.tableData = [];
Message({
message: response.data.message,
// type: 'error',
duration: 3 * 1000,
type: 'error',
// duration: '800',
});
}
......
src/views/Registered.vue
View file @ 858179d4
......@@ -6,30 +6,66 @@
<i @click="goToLogin">登录</i>
</div>
<div class="formBody">
<h1 class="section-title" data-i18n-text>创建用户</h1>
<h1 class="section-title" data-i18n-text>注册账户</h1>
<el-form
:model="ruleForm2"
status-icon
:rules="rules2"
ref="ruleForm2"
label-width="100px"
label-width="120px"
class="demo-ruleForm"
>
<el-form-item label="用户名" prop="user">
<el-input v-model="ruleForm2.user"></el-input>
<el-form-item label="手机号" prop="user">
<el-input v-model="ruleForm2.user" placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="realName">
<el-input v-model="ruleForm2.realName" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="所属管理单位" prop="office">
<el-select
@change="getCityOptions"
v-model="ruleForm2.provinceId"
style="width:160px"
clearable
filterable
placeholder="请选择省份"
>
<el-option
v-for="item in provinceOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
<el-select
v-model="ruleForm2.cityId"
style="width:160px"
clearable
filterable
placeholder="请选择市区"
>
<el-option
v-for="item in cityOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
管理处
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="电子邮箱" prop="mailAddress">
<el-input placeholder="请填写邮箱地址" v-model="ruleForm2.mailAddress" @blur="sendEmail"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm2')" class="newUser">创建用户</el-button>
<el-button @click="resetForm('ruleForm2')" class="reset">重置</el-button>
<el-form-item style="text-align: center ;margin-left:-120px">
<el-button type="primary" @click="submitForm('ruleForm2')"
class="newUser">注册</el-button>
<!--<el-button @click="resetForm('ruleForm2')" class="reset">重置</el-button>-->
</el-form-item>
</el-form>
</div>
......@@ -37,67 +73,132 @@
</div>
</template>
<script>
import axios from "axios";
import { Message } from "element-ui";
import { setTimeout } from "timers";
import { address } from "../config";
import axios from 'axios';
import { Message } from 'element-ui';
import { setTimeout } from 'timers';
import { address } from '../config';
export default {
data() {
const validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm2.checkPass !== "") {
this.$refs.ruleForm2.validateField("checkPass");
if (this.ruleForm2.checkPass !== '') {
this.$refs.ruleForm2.validateField('checkPass');
}
callback();
}
};
const validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm2.pass) {
callback(new Error("两次输入密码不一致!"));
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
provinceOptions: [],
cityOptions: [],
ruleForm2: {
pass: "",
checkPass: "",
user: "",
mailAddress: "",
provinceId: '',
cityId: '',
realName: '',
pass: '',
checkPass: '',
user: '',
},
rules2: {
pass: [
{ validator: validatePass, trigger: "blur" },
{ min: 6, message: "密码长度最少为6位", trigger: "blur" },
{ validator: validatePass, trigger: 'blur' },
{ min: 6, message: '密码长度最少为6位', trigger: 'blur' },
],
checkPass: [
{ validator: validatePass2, trigger: "blur" },
{ min: 6, message: "密码长度最少为6位", trigger: "blur" },
],
user: [{ required: true, message: "请输入用户名", trigger: "blur" }],
mailAddress: [
{ required: true, message: "请填写电子邮箱", trigger: "blur" },
{ validator: validatePass2, trigger: 'blur' },
{ min: 6, message: '密码长度最少为6位', trigger: 'blur' },
],
user: [{ required: true, message: '请输入手机号', trigger: 'blur' },
{
min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur',
},
{
pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
message: '请输入正确的手机号码',
trigger: 'blur',
},
{ validator: this.isAuth, trigger: 'blur' }],
},
};
},
created() {
this.queryAllProvince();
},
methods: {
isAuth(rule, value, callback) {
axios
.post(`${address}getUserAuthInfoByUserName`, {
username: this.ruleForm2.user,
}).then((res) => {
// eslint-disable-next-line eqeqeq
if (res.data.code != 200) {
callback(new Error('该手机号未被授权,请联系管理人员授权'));
} else {
callback();
}
}).catch(() => {
callback(new Error('该手机号未被授权,请联系管理人员授权'));
});
},
getCityOptions() {
this.cityOptions = [];
if (this.ruleForm2.provinceId) {
this.queryCityByProvince(this.ruleForm2.provinceId);
}
},
queryCityByProvince(provinceId) {
axios
.post(`${address}selectAllAreasByLevelByParent`, {
parentId: provinceId,
})
.then((response) => {
if (response.data.code === 200) {
if (response.data.data) {
this.cityOptions = response.data.data;
}
}
})
.catch((error) => {
console.log(error);
});
},
queryAllProvince() {
axios
.post(`${address}selectAllAreasByLevelByParent`, {})
.then((response) => {
if (response.data.code === 200) {
if (response.data.data) {
this.provinceOptions = response.data.data;
}
}
})
.catch((error) => {
console.log(error);
});
},
sendEmail() {
var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
const regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
if (
this.ruleForm2.mailAddress != "" &&
!regEmail.test(this.ruleForm2.mailAddress)
this.ruleForm2.mailAddress != ''
&& !regEmail.test(this.ruleForm2.mailAddress)
) {
this.$message({
message: "邮箱格式不正确",
type: "error",
message: '邮箱格式不正确',
type: 'error',
});
this.ruleForm2.mailAddress = "";
this.ruleForm2.mailAddress = '';
}
},
// 创建用户
......@@ -106,18 +207,20 @@ export default {
if (valid) {
console.log(this.ruleForm2.user + this.ruleForm2.pass);
axios
.post(address + "register", {
.post(`${address}register`, {
username: this.ruleForm2.user,
password: this.ruleForm2.pass,
email: this.ruleForm2.mailAddress,
status: 1,
cityId:this.ruleForm2.cityId,
provinceId:this.ruleForm2.provinceId,
realName:this.ruleForm2.realName,
})
.then((response) => {
if (response.data.code === 200) {
Message({
message: response.data.data,
type: "success",
duration: "500",
type: 'success',
duration: 3 * 1000,
});
setTimeout(() => {
this.goToLogin();
......@@ -125,7 +228,8 @@ export default {
} else {
Message({
message: response.data.message,
type: "error",
type: 'error',
duration: 3 * 1000,
});
}
console.log(response.data);
......@@ -134,7 +238,7 @@ export default {
console.log(error);
});
} else {
console.log("error submit!!");
console.log('error submit!!');
return false;
}
});
......@@ -145,7 +249,7 @@ export default {
},
// 返回登录页面
goToLogin() {
this.$router.push({ path: "/login" });
this.$router.push({ path: '/login' });
},
},
};
......@@ -165,8 +269,8 @@ export default {
transform: translateY(-50%);
.signin {
background: #fff;
height: 42px;
line-height: 42px;
height: 30px;
line-height: 30px;
font-size: 12px;
color: #555;
border-radius: 12px 12px 0 0;
......@@ -179,22 +283,23 @@ export default {
text-align: center;
}
.formBody {
.el-form-item {
/* margin-bottom: 15px;*/
}
.section-title {
border-bottom: 1px solid #ccc;
font-size: 28px;
padding: 0 0 12px 0;
font-size: 20px;
letter-spacing: 2px;
user-select: none;
color: #555;
text-align: center;
font-weight: normal;
margin: 12px;
margin: 5px;
}
padding: 10px 40px 40px 40px;
padding: 10px 40px 3px 40px;
background: #eee;
border-radius: 0 0 12px 12px;
.newUser {
padding: 12px 30px;
/* padding: 12px 30px;*/
background-color: #3e6be2;
}
.reset {
......
src/views/Result.vue
View file @ 858179d4
......@@ -78,7 +78,7 @@
<el-table-column width="100" label="巡检里程" prop="inspectDistance" align="center"></el-table-column>
<el-table-column width="100" label="巡检资产" prop="inspectNum" align="center"></el-table-column>
<el-table-column width="100" label="正常资产" prop="normalNum" align="center"></el-table-column>
<!-- <el-table-column width="100" label="异常资产" prop="abNormalNum" align="center"></el-table-column> -->
<el-table-column width="100" label="丢失资产" prop="abNormalNum" align="center"></el-table-column>
<el-table-column width="100" label="新增资产" prop="newInspectNum" align="center"></el-table-column>
<el-table-column width="120" label="路面抛洒物" prop="roadLetterNum" align="center"></el-table-column>
<el-table-column width="100" label="护栏弯曲" prop="guardrailNum" align="center"></el-table-column>
......@@ -439,6 +439,7 @@ export default {
},
],
},
// status 0正常 1新增 2 丢失 3 异常
capitalOptions: [
{
label: '全部',
......@@ -454,11 +455,11 @@ export default {
},
{
label: '抛洒物',
value: 2,
value: 1,
},
{
label: '护栏',
value: 3,
value: 2,
},
{
label: '龙门架',
......@@ -524,15 +525,15 @@ export default {
},
{
label: '正常',
value: 1,
value: 0,
},
{
label: '异常',
value: 2,
label: '新增',
value: 1,
},
{
label: '新增',
value: 3,
label: '丢失',
value: 2,
},
],
customStyle: {
......@@ -679,45 +680,6 @@ export default {
export_json_to_excel(tHeader, data, fileName);
});
},
// 这个也是导出？ 没用到
/* exportImgInfo() {
const exportImgs = [];
this.allImgs.forEach((item) => {
const capital = item.content.split('|');
exportImgs.push({
number: `${item.number}`,
url: imgApi + item.url.split('=')[1],
capitalName: capital[0],
capitalStatus: capital[1],
position: capital[2],
});
});
require.ensure([], () => {
// tHeader为存放excel表头标题的数组
const tHeader = [
'图片编号',
'图片链接',
'资产名称',
'资产状态',
'资产位置',
];
// filterVal为tHeader标题对应的键值
const filterVal = [
'number',
'url',
'capitalName',
'capitalStatus',
'position',
];
// list为要转化为excel文件的数据，是一个数组
const list = exportImgs;
// 用map方法处理list数据
const data = list.map(v => filterVal.map(j => v[j]));
// 自定义excel文件名
const fileName = '资产图片信息';
export_json_to_excel(tHeader, data, fileName);
});
}, */
// 点击地图或者图片修改地图样式
addclass(e) {
// eslint-disable-next-line global-require
......@@ -734,7 +696,7 @@ export default {
this.markObj.title = `序号:${index + 1
} \n资产:${
item.contentImgTip
}\n时间:${this.$moment(
}\n时间:${this.$moment.unix(
item.timestamp,
).format('YYYY-MM-DD HH:mm:ss')
}\n位置:${
......@@ -758,15 +720,6 @@ export default {
this.markObj.lng = '';
this.markObj.index = '';
this.isShow = -1;
/* this.carPoints.forEach((val) => {
// eslint-disable-next-line no-param-reassign,global-require
val.url = val.status === 1 || val.status === 3
// eslint-disable-next-line global-require
? require('../assets/img/map-marker_orange.png')
// eslint-disable-next-line global-require
: require('../assets/img/jingbao_red.png');
});
this.isShow = -1; */
},
// 展示图片
showPicture(index) {
......@@ -775,16 +728,12 @@ export default {
// eslint-disable-next-line eqeqeq
const imagePath = this.groupImgs[index].url.replace('/small_image/', '/image/');
// eslint-disable-next-line eqeqeq
if (this.bigImgUrl == imagePath) {
this.isShowPicture = true;
this.screenLoading = false;
return;
}
that.customStyleArray = [];
// 描点并且展示图片
axios
.get(
`${address}getTrajectImgLocationByImageId?imageId=${this.groupImgs[index].imageId}&status=${this.groupImgs[index].status}`,
`${address}getTrajectImgLocationByImageId?imageId=${this.groupImgs[index].imageId}&status=${this.groupImgs[index].statusStr}`,
)
// eslint-disable-next-line no-unused-vars
.then((response) => {
......@@ -824,9 +773,19 @@ export default {
that.$_.forEach(groupedItems, (value, key) => {
that.capitalOptions.forEach((capital) => {
// eslint-disable-next-line eqeqeq
if (capital.value == key) {
// eslint-disable-next-line no-param-reassign
info = capital.label;
if (value[0].type1 == 0) {
if (capital.value == key) {
// eslint-disable-next-line no-param-reassign
info = capital.label;
}
} else {
if (value[0].type1 == 1) {
info = '抛洒物';
}
if (value[0].type1 == 2) {
info = '护栏';
}
}
});
......@@ -836,10 +795,16 @@ export default {
});
contentstr = `${contentstr.substring(0, contentstr.lastIndexOf('、'))}, `;
});
this.imgContent = `${contentstr}|${this.groupImgs[index].content}`;
contentstr = contentstr.substr(0, contentstr.lastIndexOf(','));
this.imgContent = `${contentstr}|${this.groupImgs[index].contentDetail}`;
this.screenLoading = true;
this.isShowPicture = true;
// eslint-disable-next-line eqeqeq
if (this.bigImgUrl == imagePath) {
setTimeout(() => {
this.loadBigImg();
}, 500);
}
})
.catch((error) => {
console.log(error);
......@@ -857,30 +822,11 @@ export default {
this.markObj.title = `序号:${index + 1
} \n资产:${
this.groupImgs[index].contentImgTip
}\n时间:${this.$moment(
}\n时间:${this.$moment.unix(
this.groupImgs[index].timestamp,
).format('YYYY-MM-DD HH:mm:ss')
}\n位置:${
this.groupImgs[index].position}`;
/* this.carPoints.forEach((e) => {
e.markerAnim = '';
// eslint-disable-next-line global-require
e.url = e.status === 1 || e.status === 3
// eslint-disable-next-line global-require
? require('../assets/img/map-marker_orange.png')
// eslint-disable-next-line global-require
: require('../assets/img/jingbao_red.png');
});
this.isShow = index;
// eslint-disable-next-line global-require,eqeqeq
this.carPoints[index].url = this.carPoints[index].status == 1
// eslint-disable-next-line eqeqeq
|| this.carPoints[index].status == 3
// eslint-disable-next-line global-require
? require('../assets/img/map-marker_blue.png')
// eslint-disable-next-line global-require
: require('../assets/img/jingbao_blue.png');
this.carPoints[index].markerAnim = 'BMAP_ANIMATION_BOUNCE'; */
},
// 图片鼠标移除
......@@ -913,7 +859,8 @@ export default {
} else {
Message({
message: response.data.message,
// type: 'error',
duration: 3 * 1000,
type: 'error',
// duration: '800',
});
}
......@@ -938,10 +885,11 @@ export default {
let equipmentCode = '';
if (this.filters.plateNo && this.filters.plateNo.length > 0) {
this.filters.plateNo.forEach((item) => {
if (equipmentCode === '') {
equipmentCode += item.code;
// eslint-disable-next-line eqeqeq
if (equipmentCode == '') {
equipmentCode += item;
} else {
equipmentCode += `,${item.code}`;
equipmentCode += `,${item}`;
}
});
}
......@@ -957,6 +905,7 @@ export default {
.then((response) => {
that.tableData = [];
if (response.data.code === 200) {
// console.log(JSON.stringify(response.data.data));
response.data.data.forEach((val) => {
that.tableData.push({
startUrl: require('../assets/img/qidian.png'),
......@@ -981,17 +930,27 @@ export default {
val.inspectNum ? val.inspectNum : 0
}个`,
normalNum: `${
(val.normalNum ? val.normalNum : 0) + (val.newInspectNum ? val.newInspectNum : 0)
(val.normalNum ? val.normalNum : 0)
/* + (val.newInspectNum ? val.newInspectNum : 0) */
}个`,
abNormalNum: `${
(val.abNormalNum ? val.abNormalNum : 0)
}个`,
roadLetterNum: `${
0
}个`, /* val.roadLetterNum ? val.roadLetterNum : 0 */
val.roadLetterNum ? val.roadLetterNum : 0
}个`,
guardrailNum: `${
0
}个`, /* val.guardrailNum ? val.guardrailNum : 0 */
newInspectNum: `${0}个`, /* `${val.newInspectNum ? val.newInspectNum : 0} */
startTime: val.timestamp,
endTime: val.timestamp,
val.guardrailNum ? val.guardrailNum : 0
}个`,
newInspectNum: `${
val.newInspectNum ? val.newInspectNum : 0
}个`,
startTime: this.$moment(
val.startTimeMill,
).format('YYYY-MM-DD HH:mm:ss'),
endTime: this.$moment(
val.endTimeMill,
).format('YYYY-MM-DD HH:mm:ss'),
});
});
}
......@@ -1066,7 +1025,6 @@ export default {
let totalDistance = 0;
// 循环一个轨迹多少个点
val.forEach((item, index) => {
/* if (item.longitude && item.latitude) { */
// 循环他的images
if (item.images) {
// 资产及对应图片信息
......@@ -1101,6 +1059,7 @@ export default {
// eslint-disable-next-line global-require
: require('../assets/img/jingbao_red.png'),
status: info.status,
statusStr: info.statusStr,
content: that.no.toString(),
title: '',
position: info.position,
......@@ -1108,11 +1067,12 @@ export default {
`资产类型:${info.type2}`,
`资产状态:${
// eslint-disable-next-line no-nested-ternary
info.status === 1
info.status === 0
? '正常'
: info.status === 2
? '异常'
: '正常'
: info.status === 1
? '新增'
: info.status === 2
? '丢失' : '异常'
}`,
`位置:${info.position}`,
],
......@@ -1120,9 +1080,12 @@ export default {
// 这个应该是右边的图片
carImgsTmp.push({
type1: info.type1,
type: info.type,
timestamp: info.imageTime,
position: info.position,
status: info.status,
statusStr: info.statusStr,
lng: result[0],
lat: result[1],
imageId: info.imageId,
......@@ -1130,12 +1093,12 @@ export default {
url: photoAddress + info.smallImagePath,
content: `${info.info} | ${
// eslint-disable-next-line no-nested-ternary
info.status === 1
info.status === 0
? '正常'
// eslint-disable-next-line eqeqeq
: info.status == 2
? '异常'
: '正常'
: info.status === 1
? '新增'
: info.status === 2
? '丢失' : '异常'
} | ${info.position}`,
number: that.no,
id: `imageCard${that.no}`,
......@@ -1180,163 +1143,156 @@ export default {
);
}
}
/* } */
}
});
// eslint-disable-next-line no-underscore-dangle
this.$_.forEach(carImgsTmp, (o) => {
// eslint-disable-next-line no-param-reassign
o.name = o.content.split('|').length > 0
? o.content.split('|')[0]
: '';
/* o.type = o.content.split('|').length > 1
? o.content.split('|')[1]
: ''; */
o.contentUrl = o.type + o.url;
o.content = o.content.split('|').length > 2
? `|${o.content.split('|')[2]}` : o.content; // ${o.content.split('|')[1]}
});
const carPointsNew = [];
const imgsContent = [];
console.log(JSON.stringify(carImgsTmp));
// 图片分组
const imgsNew = carImgsTmp
.map((item, index, arr) => {
imgsContent.push({
contentUrl: item.type + item.url,
statusStr: item.statusStr,
type: item.type,
type1: item.type1,
name: item.name,
});
const i = arr.find(
_item => item.type === _item.type && item.url === _item.url,
// item.statusStr === _item.statusStr
);
if (i !== item) {
return undefined;
}
carPointsNew.push(carPointsTmp[index]);
return i;
})
.filter(item => item !== undefined);
imgsNew.forEach((e, index) => {
// eslint-disable-next-line eqeqeq
const contents = imgsContent.filter(im => im.contentUrl == e.contentUrl
// eslint-disable-next-line eqeqeq
&& im.type == e.type);
// 具体资产的拼接
let contentstr = '';
const firstContent = contents[0].name;
const ImgGroups = [];
// 新增 还是丢失还是 正常 拼接
let contentTypeStr = '';
const contentTypeMap = [];
// eslint-disable-next-line no-shadow
contents.forEach((c, index) => {
contentTypeMap.push(c.type1);
ImgGroups.push({ index: index + 1, name: c.name });
});
let normalNum = 0;
let insertNum = 0;
let loseNum = 0;
contentTypeMap.forEach((ct) => {
// eslint-disable-next-line eqeqeq
if (ct == 0) {
normalNum += 1;
// eslint-disable-next-line eqeqeq
} else if (ct == 1) {
insertNum += 1;
// eslint-disable-next-line eqeqeq
} else if (ct == 2) {
loseNum += 1;
}
});
if (normalNum > 0) {
contentTypeStr += `正常:${normalNum}个,`;
}
if (insertNum > 0) {
contentTypeStr += `新增:${insertNum}个,`;
}
if (loseNum > 0) {
contentTypeStr += `丢失:${loseNum}个,`;
}
// eslint-disable-next-line no-underscore-dangle
let groupedItems = that.$_(ImgGroups)
.groupBy(item => item.name);
groupedItems = JSON.parse(JSON.stringify(groupedItems));
// 拼接 展示的资产信息
// eslint-disable-next-line no-underscore-dangle,no-shadow
that.$_.forEach(groupedItems, (value, key) => {
contentstr += `${key}:`;
value.forEach((ex) => {
contentstr += `${ex.index}、`;
});
contentstr = `${contentstr.substring(0, contentstr.lastIndexOf('、'))}, `;
});
// 去掉最后一个,
contentstr = `${contentstr.substring(0, contentstr.lastIndexOf(','))} `;
contentTypeStr = `${contentTypeStr.substring(0, contentTypeStr.lastIndexOf(','))} `;
const contentImg = firstContent + (contents.length > 1 ? `等${contents.length}个资产` : '');
// 资产类型展示
e.contentImgTip = contentImg;
e.contentDetail = `${contentTypeStr}${e.content}`;
e.contentImg = `${contentImg}|${contentTypeStr}${e.content}`;
e.showNumber = index + 1;
});
carPointsNew.forEach((e, index) => {
e.content = (index + 1).toString();
e.titleList = [
`资产类型:${imgsNew[index].contentImgTip}`,
`资产状态:${
// eslint-disable-next-line no-nested-ternary
e.status === 0
? '正常'
: e.status === 1
? '新增'
: e.status === 2
? '丢失' : '异常'
}`,
`位置:${e.position}`,
];
e.title = `序号:${index + 1}\n'${e.titleList.join('\n')}`;
});
that.carPoints = carPointsNew;
// 分组之后的 图片
that.groupImgs = imgsNew;
// 描点的
that.allPoints.push(carPointsTmp);
that.allPoints.push(carPointsNew);
// 右边图片
that.allImgs.push(carImgsTmp);
/* that.tableData.push({
plateNo: key,
startEndTime: `${this.$moment(
val[val.length - 1].timestamp,
).format('YYYY-MM-DD HH:mm:ss')} 至 ${this.$moment(
val[0].timestamp,
).format('YYYY-MM-DD HH:mm:ss')}`,
startEndPoint: `${val[val.length - 1].position} - ${
val[0].position
}`,
inspectDistance: `${(totalDistance / 1000).toFixed(
1,
)}km`,
inspectNum: `${
val[0].inspectNum ? val[0].inspectNum : 0
}个`,
normalNum: `${
val[0].normalNum ? val[0].normalNum : 0
}个`,
roadLetterNum: `${
val[0].roadLetterNum ? val[0].roadLetterNum : 0
}个`,
guardrailNum: `${
val[0].guardrailNum ? val[0].guardrailNum : 0
}个`,
newInspectNum: `${
val[0].newInspectNum ? val[0].newInspectNum : 0
}个`,
startTime: val[val.length - 1].timestamp,
endTime: val[0].timestamp,
}); */
that.allImgs.push(imgsNew);
}
});
}
}
// eslint-disable-next-line prefer-destructuring
that.carPoints = that.allPoints[0];
/* console.log(JSON.stringify(that.carPoints)); */
// eslint-disable-next-line prefer-destructuring
// 分组之前的
that.imgs = that.allImgs[0];
// eslint-disable-next-line no-underscore-dangle
this.$_.forEach(that.imgs, (o) => {
o.name = o.content.split('|').length > 0
? o.content.split('|')[0]
: '';
o.type = o.content.split('|').length > 1
? o.content.split('|')[1]
: '';
o.contentUrl = o.type + o.url;
o.content = o.content.split('|').length > 2
? `${o.content.split('|')[1]}|${o.content.split('|')[2]}` : o.content;
});
const carPointsNew = [];
const imgsContent = [];
// 图片分组
const imgsNew = that.imgs
.map((item, index, arr) => {
imgsContent.push({ contentUrl: item.type + item.url, name: item.name });
const i = arr.find(
_item => item.status === _item.status && item.url === _item.url,
);
if (i !== item) {
i.vector.push(item.vector);
return undefined;
}
i.vector = [i.vector];
carPointsNew.push(that.carPoints[index]);
return i;
})
.filter(item => item !== undefined);
imgsNew.forEach((e, index) => {
// eslint-disable-next-line eqeqeq
const contents = imgsContent.filter(im => im.contentUrl == e.contentUrl);
let contentstr = '';
const firstContent = contents[0].name;
const ImgGroups = [];
contents.forEach((c, index) => {
ImgGroups.push({ index: index + 1, name: c.name });
});
// eslint-disable-next-line no-underscore-dangle
let groupedItems = that.$_(ImgGroups)
.groupBy(item => item.name);
groupedItems = JSON.parse(JSON.stringify(groupedItems));
// 拼接 展示的资产信息
// eslint-disable-next-line no-underscore-dangle
that.$_.forEach(groupedItems, (value, key) => {
contentstr += `${key}:`;
value.forEach((ex) => {
contentstr += `${ex.index}、`;
});
contentstr = `${contentstr.substring(0, contentstr.lastIndexOf('、'))}, `;
});
// 去掉最后一个,
contentstr = `${contentstr.substring(0, contentstr.lastIndexOf(','))} `;
const contentImg = firstContent + (contents.length > 1 ? `等${contents.length}个资产` : '');
e.contentImgTip = contentImg;
e.contentDetail = `${contentstr}|${e.content}`;
e.contentImg = `${contentImg}|${e.content}`;
e.showNumber = index + 1;
});
carPointsNew.forEach((e, index) => {
e.content = (index + 1).toString();
e.titleList = [
`资产类型:${imgsNew[index].contentImgTip}`,
`资产状态:${
// eslint-disable-next-line no-nested-ternary
e.status === 1
? '正常'
: e.status === 2
? '异常'
: '正常'
}`,
`位置:${e.position}`,
];
e.title = `序号:${index + 1}\n'${e.titleList.join('\n')}`;
});
that.carPoints = carPointsNew;
// 分组之后的 图片
that.groupImgs = imgsNew;
if (that.carPoints && that.carPoints.length > 0) {
const { length } = that.carPoints;
// eslint-disable-next-line radix
that.center.lng = that.carPoints[parseInt(length / 2)].lng;
// eslint-disable-next-line radix
that.center.lat = that.carPoints[parseInt(length / 2)].lat;
/* that.carPoints.forEach((val) => {
}); */
}
// 默认展示第一条
this.changeImgs();
}
} else {
Message({
message: response.data.message,
// type: 'error',
type: 'error',
duration: 3 * 1000,
// duration: '800',
});
}
......@@ -1376,8 +1332,8 @@ export default {
this.$router.push({
name: 'resultDetail',
params: {
startTime: this.filters.dateTime[0],
endTime: this.filters.dateTime[1],
startTime: row.startTime,
endTime: row.endTime,
equipment: row.plateNo,
},
});
......@@ -1387,6 +1343,7 @@ export default {
Message({
message: '请输入地域',
type: 'error',
duration: 3 * 1000,
});
return;
}
......@@ -1394,6 +1351,7 @@ export default {
Message({
message: '请先选择道路等级',
type: 'error',
duration: 3 * 1000,
});
return;
}
......@@ -1401,6 +1359,7 @@ export default {
Message({
message: '请先填写最小速度',
type: 'error',
duration: 3 * 1000,
});
return;
}
......@@ -1408,6 +1367,7 @@ export default {
Message({
message: '请先填写最大速度',
type: 'error',
duration: 3 * 1000,
});
return;
}
......@@ -1415,6 +1375,7 @@ export default {
Message({
message: '请先选择时间',
type: 'error',
duration: 3 * 1000,
});
return;
}
......@@ -1442,11 +1403,12 @@ export default {
Message({
message: `${response.data.message}`,
type: 'success',
duration: '800',
duration: 3 * 1000,
});
} else {
Message({
message: `${response.data.message}`,
duration: 3 * 1000,
});
}
})
......@@ -1454,17 +1416,7 @@ export default {
console.log(error);
});
},
listPicture() {
window.open('http://106.52.130.113:9088', '_blank');
},
changeevent(value) {
this.options.forEach((item) => {
// eslint-disable-next-line eqeqeq
if (value == item.value) {
this.center = item.label;
}
});
},
clickChange(index) {
if (index === this.currentIndex) {
} else {
......@@ -1486,41 +1438,21 @@ export default {
that.center.lat = that.carPoints[parseInt(length / 2)].lat;
}
},
// 修改图片?
// 点击表格的数据展示轨迹
async changeImgs() {
this.imgs = this.allImgs[this.currentIndex];
// eslint-disable-next-line no-underscore-dangle
this.$_.forEach(this.imgs, (o) => {
// eslint-disable-next-line no-param-reassign
o.name = o.content.split('|').length > 0 ? o.content.split('|')[0] : '';
// eslint-disable-next-line no-param-reassign
o.type = o.content.split('|').length > 1 ? o.content.split('|')[1] : '';
});
const imgsNew = this.imgs
.map((item, index, arr) => {
const i = arr.find(
// eslint-disable-next-line eqeqeq
_item => item.status == _item.status && item.url == _item.url,
);
if (i !== item) {
if (item.name) {
i.content = `${item.name} ${i.content}`;
}
i.vector.push(item.vector);
return undefined;
}
i.vector = [i.vector];
return i;
})
.filter(item => item !== undefined);
// eslint-disable-next-line no-shadow
imgsNew.forEach((e, index) => {
e.showNumber = index + 1;
});
const that = this;
// eslint-disable-next-line prefer-destructuring
that.carPoints = that.allPoints[this.currentIndex];
// 分组之后的图片
that.groupImgs = that.allImgs[this.currentIndex];
this.groupImgs = imgsNew;
if (that.carPoints && that.carPoints.length > 0) {
const { length } = that.carPoints;
// eslint-disable-next-line radix
that.center.lng = that.carPoints[parseInt(length / 2)].lng;
// eslint-disable-next-line radix
that.center.lat = that.carPoints[parseInt(length / 2)].lat;
}
},
},
};
......
src/views/ResultDetail.vue
View file @ 858179d4
......@@ -49,6 +49,20 @@
</el-form-item>
<el-form-item>
<el-date-picker
v-show="linkDetail==true"
v-model="filters.dateTime"
type="datetimerange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
:default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"
></el-date-picker>
<el-date-picker
v-show="linkDetail==false"
v-model="filters.dateTime"
type="daterange"
align="right"
......@@ -81,7 +95,7 @@
>
<el-table-column width="80" type="index" label="序号" align="center"></el-table-column>
<el-table-column width="180" label="巡检时间" prop="imageTime" align="center"></el-table-column>
<el-table-column width="120" label="巡检目标" prop="type2" align="center"></el-table-column>
<el-table-column width="120" label="巡检目标" prop="info" align="center"></el-table-column>
<el-table-column width="400" label="目标位置" prop="position" align="center"></el-table-column>
<el-table-column width="100" label="目标状态" prop="status" align="center"></el-table-column>
<el-table-column
......@@ -190,13 +204,14 @@ import echarts from 'echarts';
import moment from 'moment';
import { export_json_to_excel } from '@/excel/Export2Excel';
import elDragDialog from '@/components/el-drag-dialog';
import { address, imgAddress } from '../config';
import { address, photoAddress } from '../config';
export default {
name: 'detail',
directives: { elDragDialog },
data() {
return {
linkDetail: false,
searchData: [],
tableData: [],
startTime: null,
......@@ -240,11 +255,11 @@ export default {
},
{
label: '抛洒物',
value: 2,
value: 1,
},
{
label: '护栏',
value: 3,
value: 2,
},
{
label: '龙门架',
......@@ -313,13 +328,17 @@ export default {
value: 1,
},
{
label: '异常',
label: '丢失',
value: 2,
},
{
label: '新增',
value: 3,
},
{
label: '异常',
value: 4,
},
],
pickerOptions: {
shortcuts: [
......@@ -376,6 +395,7 @@ export default {
const that = this;
if (this.$route.params.startTime) {
this.linkDetail = true;
that.startTime = this.$route.params.startTime;
}
if (this.$route.params.endTime) {
......@@ -417,15 +437,15 @@ export default {
).format('YYYY-MM-DD')} 23:59:59`;
}
this.startTime = new Date(this.filters.dateTime[0]).getTime();
this.endTime = new Date(this.filters.dateTime[1]).getTime();
const startTime = this.filters.dateTime[0];
const endTime = this.filters.dateTime[1];
sessionStorage.setItem('resultDetailSearchVal', JSON.stringify(this.filters));
this.searchLoading = true;
const that = this;
axios
.post(`${address}getImageFeaturesByGroup`, {
startTimeMill: that.startTime,
endTimeMill: that.endTime,
startTime,
endTime,
equipment: that.filters.equipment,
status: that.filters.status,
capitalType: that.filters.capitalType,
......@@ -438,15 +458,15 @@ export default {
if (response.data.data) {
this.pageOption.totalCount = response.data.data.total;
response.data.data.list.forEach((val) => {
val.status = val.status == 1 ? '正常' : val.status == 2 ? '异常' : '正常';
val.imageTime = moment(parseInt(val.imageTime)).format(
val.status = this.getStatusInfo(val.status, val.disposeType);
val.imageTime = moment.unix(val.imageTime).format(
'YYYY-MM-DD HH:mm:ss',
);
this.capitalOptions.forEach((item) => {
/* this.capitalOptions.forEach((item) => {
if ((val.type2 != 0 && val.type2 == item.value) || (val.type1 != 0 && val.type1 == item.value)) {
val.type2 = item.label;
val.info = item.label;
}
});
}); */
});
that.tableData = response.data.data.list;
} else {
......@@ -460,6 +480,17 @@ export default {
console.log(error);
});
},
getStatusInfo(status, disposeType) {
// eslint-disable-next-line eqeqeq
/* if (disposeType == 1) {
return '正常';
} */
// eslint-disable-next-line no-nested-ternary,eqeqeq
return status == 0 ? '正常' : status == 1 ? '新增' : status == 2 ? '丢失'
// eslint-disable-next-line no-nested-ternary,eqeqeq
: status == 3 ? '异常' : status == 4 ? '异常' : '异常'; // 3是抛洒 4护栏
},
getTableData() {
let tmpTable = [];
const ct = this.filters.capitalType;
......@@ -580,12 +611,43 @@ export default {
showDialog2() {
this.dialogVisible1 = false;
this.dialogVisible2 = true;
A;
},
showPicture(index, row) {
console.log(JSON.stringify(row));
this.imgContent = `${row.info}|${row.status}|${row.position}`;
this.bigImgUrl = `${imgAddress}getCapitalImg?imgPath=${row.imagePath}`;
this.bigImgUrl = photoAddress + row.imagePath;
const statusStr = `${row.type},${row.type1}`;
axios
.get(
`${address}getTrajectImgLocationByImageId?imageId=${row.imageId}&status=${statusStr}&type2=${row.type2}`,
)
// eslint-disable-next-line no-unused-vars
.then((response) => {
const styleArray = response.data.data;
this.customStyle = [];
// 拼接 展示的资产信息
styleArray.forEach((e, styleIndex) => {
e.index = styleIndex + 1;
const point = JSON.parse(e.vector).location;
// eslint-disable-next-line eqeqeq
if (point.length == 4) {
this.positionLeft = point[0];
this.positionRight = point[1];
this.positionWidth = point[2] - point[0];
this.positionHeight = point[3] - point[1];
this.customStyle = {
top: `${this.positionRight / this.hscale}px`,
left: `${this.positionLeft / this.scale}px`,
width: `${this.positionWidth / this.scale}px`,
height: `${this.positionHeight / this.hscale}px`,
};
}
});
});
const vectorData = JSON.parse(row.vector);
if (vectorData && vectorData.location) {
const point = vectorData.location;
if (point.length == 4) {
......@@ -605,7 +667,7 @@ export default {
this.isShowPicture = true;
if (row.status == '异常') {
this.dialogVisible1 = true;
this.groupId = row.groupId;
this.groupId = row.id;
this.tableIndex = index;
}
},
......
src/views/Task.vue
View file @ 858179d4
......@@ -18,7 +18,7 @@
v-for="item in plateNoOptions"
:key="item.code"
:label="item.plateNo"
:value="item.channelCode + '_' + item.code"
:value="item.code"
></el-option>
</el-select>
<!-- <el-autocomplete
......@@ -60,7 +60,7 @@
highlight-current-row
>
<el-table-column label="序号" width="50" prop="no"></el-table-column>
<el-table-column label="车牌号" width="140" prop="plateNo"></el-table-column>
<el-table-column label="车牌号" width="100" prop="plateNo"></el-table-column>
<el-table-column label="开始时间" prop="startTime"></el-table-column>
<el-table-column label="结束时间" prop="endTime"></el-table-column>
<el-table-column label="起点" prop="startPoint"></el-table-column>
......@@ -182,7 +182,7 @@ import gcoord from 'gcoord';
import moment from 'moment';
import { Message } from 'element-ui';
import { export_json_to_excel } from '@/excel/Export2Excel';
import { address, videoAddress } from '../config';
import { address, photoAddress, videoAddress } from '../config';
export default {
name: 'task',
......@@ -386,17 +386,18 @@ export default {
},
// 展示图片
showPicture(e) {
console.log(JSON.stringify(this.infos));
this.infos.forEach((item) => {
// eslint-disable-next-line eqeqeq
if (item.lng == e.point.lng && item.lat == e.point.lat) {
// 根据坐标信息获取图片
// 这个是描点的 并且展示图片
this.getTrajectImgLocationByImageId(item.imageId);
this.getTrajectImgLocationByImageId(item.imageId, item);
}
});
},
// 描点并且展示图片
getTrajectImgLocationByImageId(id) {
getTrajectImgLocationByImageId(id, item) {
axios
.get(
`${address}getTrajectImgLocationByImageId?imageId=${id}`,
......@@ -404,9 +405,8 @@ export default {
// eslint-disable-next-line no-unused-vars
.then((response) => {
const styleArray = response.data.data;
const nowBigImgUrl = `${address
}getTrajectImgByImageId?imageId=${id}`;
/* url: photoAddress + info.smallImagePath, */
const nowBigImgUrl = item.url;
this.screenLoading = true;
// eslint-disable-next-line eqeqeq
if (this.bigImgUrl == nowBigImgUrl) {
......@@ -588,7 +588,8 @@ export default {
} else {
Message({
message: response.data.message,
// type: 'error',
duration: 3 * 1000,
type: 'error',
// duration: '800',
});
}
......@@ -631,7 +632,7 @@ export default {
.then((res) => {
this.points = [];
this.allPicPoints = [];
if (res.data.data.length > 0) {
if (res.data.data && res.data.data.length > 0) {
const points = [];
const imagesPoints = res.data.data;
......@@ -642,12 +643,13 @@ export default {
gcoord.BD09,
);
const point = { lng: result[0], lat: result[1], linkId: e.linkId };
const dateTime = moment(e.imageTime).format(
const dateTime = moment.unix(e.imageTime).format(
'YYYY-MM-DD HH:mm:ss',
);
// 这个感觉是 鼠标移动过来之后 事件遍历用的
this.infos.push({
imageId: e.imageId,
url: photoAddress + e.imagePath,
lng: result[0],
lat: result[1],
plateNo: e.equipment,
......@@ -663,218 +665,7 @@ export default {
}
});
},
// 获取轨迹点 TODO 重点优化
queryTravelOld() {
// eslint-disable-next-line eqeqeq
if (this.filters.dateTime.length == 0) {
this.filters.dateTime[0] = `${moment(
new Date().setTime(new Date().getTime() - 3600 * 1000 * 24),
).format('YYYY-MM-DD')} 00:00:00`;
this.filters.dateTime[1] = `${moment(
new Date().setTime(new Date().getTime() - 3600 * 1000 * 24),
).format('YYYY-MM-DD')} 23:59:59`;
}
let equipmentCode = '';
if (this.filters.plateNo && this.filters.plateNo.length > 0) {
this.filters.plateNo.forEach((item) => {
// eslint-disable-next-line eqeqeq
if (equipmentCode == '') {
equipmentCode += item;
} else {
equipmentCode += `,${item}`;
}
});
}
this.searchLoading = true;
const that = this;
axios
.post(`${address}getTravel`, {
startTime: this.filters.dateTime[0],
endTime: this.filters.dateTime[1],
equipment: equipmentCode,
})
.then((response) => {
that.searchLoading = false;
if (response.data.code === 200) {
if (response.data.data) {
this.tableData = [];
this.allPoints = [];
this.carPoints = [];
this.infos = [];
this.no = 0;
const resData = response.data.data;
// eslint-disable-next-line no-restricted-syntax
for (const key in resData) {
if (resData[key]) {
const gisArr = resData[key];
/* console.log(`llllllll${JSON.stringify(gisArr)}`); */
gisArr.forEach((val) => {
if (val) {
// 画红线
const poly = [];
// 点
const points = [];
// 距离
let distance = 0;
// 所有的linkId
const linkIds = [];
let totalDistance = 0;
// 根据几条轨迹遍历
val.forEach((item, index) => {
if (item.longitude && item.latitude) {
linkIds.push(item.linkId);
// 根据经度和纬度 来得到地图的lng 和lat
const result = gcoord.transform(
[item.longitude, item.latitude],
gcoord.WGS84,
gcoord.BD09,
);
const dateTime = moment(item.timestamp).format(
'YYYY-MM-DD HH:mm:ss',
);
// 这个感觉是 鼠标移动过来之后 事件遍历用的
this.infos.push({
lng: result[0],
lat: result[1],
channel: key.split('_')[0],
plateNo: key.split('_')[1],
date: dateTime.split(' ')[0],
time: dateTime.split(' ')[1],
position: item.position,
});
// poly 画红线
poly.push({ lng: result[0], lat: result[1] });
// eslint-disable-next-line eqeqeq
if (index == 0) { // index =0 和结束的点 给描点 因为是按照距离
points.push({ lng: result[0], lat: result[1], linkId: item.linkId });
// eslint-disable-next-line eqeqeq
} else if (index == val.length - 1) {
points.push({ lng: result[0], lat: result[1], linkId: item.linkId });
}
if (index < val.length - 1) {
if (
val[index + 1].longitude
&& val[index + 1].latitude
) {
const result1 = gcoord.transform(
[
val[index + 1].longitude,
val[index + 1].latitude,
],
gcoord.WGS84,
gcoord.BD09,
);
// eslint-disable-next-line eqeqeq
if (val[index + 1].linkId == val[index].linkId) {
distance += Math.abs(
val[index + 1].roadEndDis
- val[index].roadEndDis,
);
totalDistance += Math.abs(
val[index + 1].roadEndDis
- val[index].roadEndDis,
);
} else {
distance += Math.abs(
this.getDistance(
result1[0],
result1[1],
result[0],
result[1],
),
);
totalDistance += Math.abs(
this.getDistance(
result1[0],
result1[1],
result[0],
result[1],
),
);
}
if (distance >= 500) {
points.push({
lng: result1[0],
lat: result1[1],
});
distance = 0;
}
}
}
}
});
// 一条轨迹一个tableData 这里计算了车速
this.tableData.push({
// eslint-disable-next-line no-plusplus
no: ++this.no,
plateNo: key.split('_')[1],
startTime: this.$moment(val[val.length - 1].timestamp).format(
'YYYY-MM-DD HH:mm:ss',
),
endTime: this.$moment(val[0].timestamp).format(
'YYYY-MM-DD HH:mm:ss',
),
startPoint: val[val.length - 1].position,
endPoint: val[0].position,
inspectDistance:
`${(totalDistance / 1000).toFixed(1)}km`,
inspectTime:
`${(
(val[0].timestamp - val[val.length - 1].timestamp)
/ (1000 * 3600)
).toFixed(1)}h`,
averageSpeed:
`${(
totalDistance
/ 1000
/ ((val[val.length - 1].timestamp
- val[0].timestamp)
/ (1000 * 3600))
).toFixed(1)}km/h`,
});
if (points) {
// eslint-disable-next-line global-require
points[0].url = require('../assets/img/zhongdian.png');
points[
points.length - 1
// eslint-disable-next-line global-require
].url = require('../assets/img/qidian.png');
}
this.allPoints.push({
no: this.no,
polylinePath: poly,
points,
});
this.carPoints = this.allPoints;
this.center.lng = this.carPoints[0].polylinePath[0].lng;
this.center.lat = this.carPoints[0].polylinePath[0].lat;
}
});
}
}
}
} else {
Message({
message: response.data.message,
// type: 'error',
// duration: '800',
});
}
})
.catch((error) => {
console.log(error);
});
},
queryImagesAndTravel() {
this.queryImagesTravel();
this.queryVideosTravel();
......@@ -934,9 +725,7 @@ export default {
url: require('../assets/img/video.png'),
filePath: e.filePath,
};
const dateTime = moment(e.imageTime).format(
'YYYY-MM-DD hh:mm:ss',
);
points.push(point);
});
......@@ -944,6 +733,7 @@ export default {
e.title = `车辆:${e.equipment}\n时间:${e.time}\n位置:${e.position}`;
});
that.allVideoPoints = points;
console.log(JSON.stringify(points));
that.videoPoints = points;
}
});
......@@ -995,12 +785,9 @@ export default {
this.trajectoryWithLinkId = [];
this.no = 0;
const resData = response.data.data;
console.log(`travellog${JSON.stringify(resData)}`);
/* console.log(`travellog${JSON.stringify(resData)}`); */
/* travellog{"zjhn_ZJHN20070701":[{"plateNo":"皖ALA827","startTime":1596415382242,
"endTime":1596424458181,"startPoint":"淮南收费站","endPoint":"淮南收费站",
"inspectDistance":"146.7km","inspectTime":"2.5h","averageSpeed":"58183.5km / h",
"trajectorys":null,"totalDistance":null}]} */
// eslint-disable-next-line no-restricted-syntax
for (const key in resData) { // 这里是遍历车辆信息 车辆会有多个轨迹 在遍历
if (resData[key]) {
......@@ -1067,11 +854,11 @@ export default {
// eslint-disable-next-line no-plusplus
no: ++this.no,
plateNo: gis.plateNo,
startTime: this.$moment(gis.startTime)
startTime: this.$moment.unix(gis.startTime)
.format(
'YYYY-MM-DD HH:mm:ss',
),
endTime: this.$moment(gis.endTime)
endTime: this.$moment.unix(gis.endTime)
.format(
'YYYY-MM-DD HH:mm:ss',
),
......@@ -1111,7 +898,8 @@ export default {
} else {
Message({
message: response.data.message,
// type: 'error',
duration: 3 * 1000,
type: 'error',
// duration: '800',
});
}
......
src/views/Video.vue
View file @ 858179d4
......@@ -53,10 +53,10 @@
>
<el-table-column width="100" type="index" label="序号" align="center"></el-table-column>
<el-table-column width="120" label="车牌号" prop="equipment" align="center"></el-table-column>
<el-table-column width="120" label="车牌号" prop="plateNo" align="center"></el-table-column>
<el-table-column width="200" label="开始时间" prop="startTime" align="center"></el-table-column>
<el-table-column width="200" label="结束时间" prop="endTime" align="center"></el-table-column>
<el-table-column width="200" label="视频时长" prop="videoTime" align="center"></el-table-column>
<el-table-column width="200" label="视频时长" prop="duration" align="center"></el-table-column>
<el-table-column width="200" label="停车地点" prop="position" align="center"></el-table-column>
<el-table-column fixed="right" min-width="100" label="视频列表" align="center">
<template slot-scope="scope">
......@@ -227,7 +227,8 @@ export default {
} else {
Message({
message: response.data.message,
// type: 'error',
duration: 3 * 1000,
type: 'error',
// duration: '800',
});
}
......@@ -260,8 +261,8 @@ export default {
const that = this;
axios
.post(`${address}getParkVideos`, {
startTimeMill: that.startTime,
endTimeMill: that.endTime,
startTime: this.filters.dateTime[0],
endTime: this.filters.dateTime[1],
equipment: that.filters.equipment,
pageIndex: this.pageOption.pageIndex,
pageSize: this.pageOption.pageSize,
......@@ -273,6 +274,7 @@ export default {
this.pageOption.totalCount = response.data.data.total;
that.tableData = response.data.data.list;
that.tableData.forEach((e) => {
e.duration += '秒';
e.startTime = this.$moment(
e.startTime,
).format('YYYY-MM-DD HH:mm:ss');
......
src/views/equipment/EquipmentCheck.vue 0 → 100644
View file @ 858179d4
<template>
<div class="detail">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="待审核" name="first">
<div class="box">
<!-- 停车视频表 -->
<div class="detail-table">
<el-table
:data="tableData"
style="width: calc(100vw - 240px);overflow:hidden;"
border
fit
highlight-current-row
>
<el-table-column width="50" type="index" label="序号" align="center"></el-table-column>
<el-table-column width="100" label="管理单位" prop="company" align="center"></el-table-column>
<el-table-column width="100" label="车牌号" prop="plateNo" align="center"></el-table-column>
<el-table-column width="240" label="车身照片" prop="images" align="center">
<template slot-scope="scope">
<img v-for="(item,index) in scope.row.images"
:key="index"
:src="thisPhotoAddress+item.smallFilePath" style="width: 70px"/>
</template>
</el-table-column>
<el-table-column width="160" label="上传时间" prop="createTime" align="center"></el-table-column>
<el-table-column width="160" label="操作员" prop="liaisonMan" align="center">
<template slot-scope="scope">
{{scope.row.liaisonMan}}
<br/>
{{scope.row.telephone}}
</template>
</el-table-column>
<el-table-column fixed="right" min-width="100" label="审核状态" align="center">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="checkPass(scope.row.id)" v-loading="checkLoadingList.indexOf(scope.row.id)>-1">审核通过</el-button>
<el-button size="mini" type="danger" @click="chooseCheckFailReason(scope.row.id)" >驳回</el-button>
<br/>
<span style="color: red"> <i class="el-icon-warning" v-show="scope.row.rejectReason"></i>{{scope.row.rejectReason}}</span>
</template>
</el-table-column>
</el-table>
<!-- 分页 修改 -->
<el-pagination
:current-page="pageOption.pageIndex"
:page-sizes="[5, 10, 20, 40]"
:page-size="pageOption.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageOption.totalCount"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="已审核" name="second">
<div class="box">
<!-- 停车视频表 -->
<div class="detail-table">
<el-table
:data="tableData"
style="width: calc(100vw - 240px);overflow:hidden;"
border
fit
highlight-current-row
>
<el-table-column width="50" type="index" label="序号" align="center"></el-table-column>
<el-table-column width="100" label="管理单位" prop="company" align="center"></el-table-column>
<el-table-column width="100" label="车牌号" prop="plateNo" align="center"></el-table-column>
<el-table-column width="240" label="车身照片" prop="images" align="center">
<template slot-scope="scope">
<img v-for="(item,index) in scope.row.images"
:key="index"
:src="thisPhotoAddress+item.smallFilePath" style="width: 70px"/>
</template>
</el-table-column>
<el-table-column width="160" label="上传时间" prop="createTime" align="center"></el-table-column>
<el-table-column width="160" label="操作员" prop="liaisonMan" align="center">
<template slot-scope="scope">
{{scope.row.liaisonMan}}
<br/>
{{scope.row.telephone}}
</template>
</el-table-column>
<el-table-column fixed="right" min-width="100" label="审核状态" align="center">
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="chooseCheckFailReason(scope.row.id)" >驳回</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 修改 -->
<el-pagination
:current-page="pageOption.pageIndex"
:page-sizes="[5, 10, 20, 40]"
:page-size="pageOption.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageOption.totalCount"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</el-tab-pane>
</el-tabs>
<el-dialog :visible.sync="isShowDialog" width="500px">
<el-form label-width="100px">
<el-form-item label="驳回原因:">
<el-autocomplete
style="width: 350px"
popper-class="my-autocomplete"
v-model="rejectReason"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect">
<i
class="el-icon-edit el-input__icon"
slot="suffix"
@click="handleIconClick">
</i>
<template slot-scope="{ item }">
<div class="name">{{ item.label }}</div>
</template>
</el-autocomplete>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button v-loading="rejectLoading" type="warning" @click="doCheckReject()">确定</el-button>
<el-button type="primary" @click="isShowDialog = false">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<style lang="less" scope>
</style>
<script>
import axios from 'axios';
import { Message } from 'element-ui';
import moment from 'moment';
import { address, photoAddress } from '../../config';
export default {
name: 'equipmentCheck',
data() {
return {
thisPhotoAddress: photoAddress,
rejectReason: '',
operateOptions: [{
value: '车身照片不符',
label: '车身照片不符',
},
{
value: '车牌号格式不正确',
label: '车牌号格式不正确',
}],
isShowDialog: false,
activeName: 'first',
tableData: [],
pageOption: {
pageIndex: 1,
pageSize: 10,
totalCount: 0,
},
filters: {
},
checkStatus: 0,
loading: false,
checkLoadingList: [],
checkFailId: '',
rejectLoading: false,
};
},
mounted() {},
created() {
this.queryAllEquipment();
},
methods: {
doCheckReject() {
if (this.rejectReason) {
this.checkFail(this.checkFailId, this.rejectReason);
} else {
this.$message({
type: 'warn',
dangerouslyUseHTMLString: true,
showClose: true,
duration: 3000,
message: '驳回原因不能为空',
});
}
},
handleSelect(item) {
console.log(item);
},
handleIconClick(ev) {
console.log(ev);
},
querySearch(queryString, cb) {
const { operateOptions } = this;
const results = queryString ? operateOptions.filter(this.createFilter(queryString)) : operateOptions;
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
return restaurant => (restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
},
handleClick() {
if (this.activeName === 'first') {
this.pageOption = {
pageIndex: 1,
pageSize: 10,
totalCount: 0,
};
this.checkStatus = 0;
this.queryAllEquipment();
} else if (this.activeName === 'second') {
this.pageOption = {
pageIndex: 1,
pageSize: 10,
totalCount: 0,
};
this.checkStatus = 1;
this.queryAllEquipment();
}
},
/** 待审核的 start *** */
chooseCheckFailReason(id) {
this.rejectReason = '';
this.checkFailId = id;
this.isShowDialog = true;
},
checkFail(id, rejectReason) {
this.rejectLoading = true;
this.checkLoadingList.push(id);
axios
.post(`${address}checkVehicle`, {
id,
checkStatus: 0,
rejectReason,
})
.then((response) => {
this.isShowDialog = false;
this.rejectLoading = false;
this.checkLoadingList.splice(this.checkLoadingList.indexOf(id), 1);
if (response.data.code === 200) {
this.$message({
type: 'success',
dangerouslyUseHTMLString: true,
showClose: true,
duration:3000,
message: '驳回成功',
});
this.queryAllEquipment();
} else {
Message({
message: response.data.message,
duration: 3 * 1000,
});
}
})
.catch((error) => {
this.rejectLoading = false;
this.checkLoadingList.splice(this.checkLoadingList.indexOf(id), 1);
console.log(error);
});
},
checkPass(id) {
this.checkLoadingList.push(id);
axios
.post(`${address}checkVehicle`, {
id,
checkStatus: 1,
})
.then((response) => {
this.checkLoadingList.splice(this.checkLoadingList.indexOf(id), 1);
if (response.data.code === 200) {
this.$message({
type: 'success',
dangerouslyUseHTMLString: true,
showClose: true,
duration:3000,
message: '审核成功',
});
this.queryAllEquipment();
} else {
Message({
message: response.data.message,
duration: 3 * 1000,
});
}
})
.catch((error) => {
this.checkLoadingList.splice(this.checkLoadingList.indexOf(id), 1);
console.log(error);
});
},
handleSizeChange(size) {
this.pageOption.pageSize = size;
this.queryAllEquipment();
},
handleCurrentChange(currentPage) {
this.pageOption.pageIndex = currentPage;
this.queryAllEquipment();
},
queryAllEquipment() {
axios
.post(`${address}getVehicleInfos`, {
checkStatus: this.checkStatus,
pageIndex: this.pageOption.pageIndex,
pageSize: this.pageOption.pageSize,
})
.then((response) => {
if (response.data.code === 200) {
if (response.data.data) {
this.pageOption.totalCount = response.data.data.total;
this.tableData = response.data.data.list;
}
} else {
Message({
message: response.data.message,
duration: 3 * 1000,
type: 'error',
// duration: '800',
});
}
})
.catch((error) => {
console.log(error);
});
},
/** 待审核的 end *** */
},
};
</script>
src/views/equipment/EquipmentList.vue 0 → 100644
View file @ 858179d4
<template>
<el-container>
<el-header>
<el-row :gutter="20" style="text-align: center;background-color:lightgray">
<el-col :span="8">
<div style="margin-top: 5px;font-weight: bold">{{amount.total }}</div>
<br/>
<div class="grid-content bg-purple" style="margin-bottom: 10px"> 总设备数</div>
</el-col>
<el-col :span="8">
<div style="margin-top: 5px;font-weight: bold">{{amount.usingAmount }}</div>
<br/>
<div class="grid-content bg-purple" style="margin-bottom: 10px"> 使用中</div>
</el-col>
<el-col :span="8">
<div style="margin-top: 5px;font-weight: bold">{{amount.stopingAmount }}</div>
<br/>
<div class="grid-content bg-purple" style="margin-bottom: 10px"> 停用中</div>
</el-col>
</el-row>
</el-header>
<el-main>
<div class="box">
<el-row>
<!--搜索栏-->
<el-col :span="6">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-select
v-model="filters.offices"
multiple
clearable
collapse-tags
filterable
placeholder="管理单位"
>
<el-option
v-for="item in officeOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-form>
</el-col>
<el-col :span="6">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-select
v-model="filters.ids"
multiple
clearable
collapse-tags
filterable
placeholder="车牌号"
>
<el-option
v-for="item in plateNoOptions"
:key="item.code"
:label="item.plateNo"
:value="item.code"
></el-option>
</el-select>
</el-form-item>
</el-form>
</el-col>
<el-col :span="6">
<el-form>
<el-form-item>
<el-form :inline="true" :model="filters">
<el-form-item>
<el-select
v-model="filters.status"
filterable
clearable
placeholder="设备状态"
>
<el-option
v-for="item in statusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-form>
</el-form-item>
</el-form>
</el-col>
<el-col :span="4">
<el-form>
<el-form-item>
<el-button type="primary" v-loading="searchLoading"
@click="queryVehicleList">搜索
</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<!-- 停车视频表 -->
<div class="detail-table">
<el-table
:data="tableData"
style="width: calc(100vw - 240px);overflow:hidden;"
border
fit
highlight-current-row
>
<el-table-column width="50" type="index" label="序号" align="center"></el-table-column>
<el-table-column width="120" label="管理单位" prop="company"
align="center"></el-table-column>
<el-table-column width="100" label="车牌号" prop="plateNo"
align="center"></el-table-column>
<el-table-column width="160" label="绑定时间" prop="createTime"
align="center"></el-table-column>
<el-table-column width="160" label="最后一次使用时间" prop="lastTime"
align="center"></el-table-column>
<el-table-column width="80" label="设备状态" prop="statusStr" align="center">
</el-table-column>
<el-table-column fixed="right" min-width="100" label="编辑" align="center">
<template slot-scope="scope">
<el-button size="mini" v-permission="[permission.userManagement_edit]" type="danger" v-if="scope.row.status==1" @click="updateVehicleStatus(scope.row.id,2)"
v-loading="checkLoadingList.indexOf(scope.row.id)>-1">停用
</el-button>
<el-button size="mini" v-permission="[permission.userManagement_edit]" type="primary" v-if="scope.row.status==2" @click="updateVehicleStatus(scope.row.id,1)"
v-loading="checkLoadingList.indexOf(scope.row.id)>-1">启用
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 修改 -->
<el-pagination
:current-page="pageOption.pageIndex"
:page-sizes="[5, 10, 20, 40]"
:page-size="pageOption.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageOption.totalCount"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</el-main>
<el-dialog :visible.sync="isShowDialog" width="500px">
<el-form label-width="100px">
<el-form-item label="驳回原因:">
<el-autocomplete
style="width: 350px"
popper-class="my-autocomplete"
v-model="rejectReason"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect">
<i
class="el-icon-edit el-input__icon"
slot="suffix"
@click="handleIconClick">
</i>
<template slot-scope="{ item }">
<div class="name">{{ item.label }}</div>
</template>
</el-autocomplete>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button v-loading="rejectLoading" type="warning" @click="doCheckReject()">确定</el-button>
<el-button type="primary" @click="isShowDialog = false">取消</el-button>
</span>
</el-dialog>
</el-container>
</template>
<style lang="less" scope>
</style>
<script>
import axios from 'axios';
import { Message } from 'element-ui';
import moment from 'moment';
import { address, photoAddress } from '../../config';
import { permission } from '../../permission';
export default {
name: 'equipmentList',
data() {
return {
permission,
thisPhotoAddress: photoAddress,
rejectReason: '',
amount: {
total: 0,
usingAmount: 0,
stopingAmount: 0,
},
statusOptions: [
{
value: '0',
label: '注销',
},
{
value: '1',
label: '正常',
},
{
value: '2',
label: '封停',
},
],
operateOptions: [{
value: '车身照片不符',
label: '车身照片不符',
},
{
value: '车牌号格式不正确',
label: '车牌号格式不正确',
}],
isShowDialog: false,
activeName: 'first',
tableData: [],
pageOption: {
pageIndex: 1,
pageSize: 10,
totalCount: 0,
},
filters: {
ids: [],
offices: [],
status: '',
},
checkStatus: 0,
loading: false,
checkLoadingList: [],
checkFailId: '',
rejectLoading: false,
plateNoOptions: [],
officeOptions: [],
searchLoading: false,
};
},
mounted() {
},
created() {
// 这个是tableData
this.queryVehicleList();
this.queryAllVehicle();
// 查询下拉框
this.queryAllEquipment();
},
methods: {
// 查询下拉用的
queryAllVehicle() {
axios
.post(`${address}selectAllAreasByPermission`, {})
.then((response) => {
if (response.data.code === 200) {
if (response.data.data) {
this.officeOptions = [];
response.data.data.forEach((item) => {
item.name += '办事处';
this.officeOptions.push(item);
});
}
} else {
Message({
message: response.data.message,
duration: 3 * 1000,
type: 'error',
// duration: '800',
});
}
})
.catch((error) => {
console.log(error);
});
},
doCheckReject() {
if (this.rejectReason) {
this.checkFail(this.checkFailId, this.rejectReason);
} else {
this.$message({
type: 'warn',
dangerouslyUseHTMLString: true,
showClose: true,
duration: 3000,
message: '驳回原因不能为空',
});
}
},
handleSelect(item) {
console.log(item);
},
handleIconClick(ev) {
console.log(ev);
},
querySearch(queryString, cb) {
const { operateOptions } = this;
const results = queryString ? operateOptions.filter(this.createFilter(queryString)) : operateOptions;
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
return restaurant => (restaurant.label.toLowerCase()
.indexOf(queryString.toLowerCase()) === 0);
},
handleClick() {
if (this.activeName === 'first') {
this.pageOption = {
pageIndex: 1,
pageSize: 10,
totalCount: 0,
};
this.checkStatus = 0;
this.queryVehicleList();
} else if (this.activeName === 'second') {
this.pageOption = {
pageIndex: 1,
pageSize: 10,
totalCount: 0,
};
this.checkStatus = 1;
this.queryVehicleList();
}
},
chooseCheckFailReason(id) {
this.rejectReason = '';
this.checkFailId = id;
this.isShowDialog = true;
},
checkFail(id, rejectReason) {
this.rejectLoading = true;
this.checkLoadingList.push(id);
axios
.post(`${address}checkVehicle`, {
id,
checkStatus: 0,
rejectReason,
})
.then((response) => {
this.isShowDialog = false;
this.rejectLoading = false;
this.checkLoadingList.splice(this.checkLoadingList.indexOf(id), 1);
if (response.data.code === 200) {
this.$message({
type: 'success',
dangerouslyUseHTMLString: true,
showClose: true,
duration: 3 * 1000,
message: '驳回成功',
});
this.queryVehicleList();
} else {
Message({
message: response.data.message,
duration: 3 * 1000,
});
}
})
.catch((error) => {
this.rejectLoading = false;
this.checkLoadingList.splice(this.checkLoadingList.indexOf(id), 1);
console.log(error);
});
},
updateVehicleStatus(id, status) {
this.checkLoadingList.push(id);
axios
.post(`${address}updateVehicleStatus`, {
id,
status,
})
.then((response) => {
this.checkLoadingList.splice(this.checkLoadingList.indexOf(id), 1);
if (response.data.code === 200) {
this.$message({
type: 'success',
dangerouslyUseHTMLString: true,
showClose: true,
duration: 3000,
message: '操作成功',
});
this.queryVehicleList();
} else {
Message({
message: response.data.message,
duration: 3 * 1000,
});
}
})
.catch((error) => {
this.checkLoadingList.splice(this.checkLoadingList.indexOf(id), 1);
console.log(error);
});
},
handleSizeChange(size) {
this.pageOption.pageSize = size;
this.queryVehicleList();
},
handleCurrentChange(currentPage) {
this.pageOption.pageIndex = currentPage;
this.queryVehicleList();
},
queryAllEquipment() {
axios
.post(`${address}queryAllEquipment`, {})
.then((response) => {
if (response.data.code === 200) {
if (response.data.data) {
this.plateNoOptions = [];
response.data.data.forEach((item) => {
this.plateNoOptions.push(item);
});
}
} else {
Message({
message: response.data.message,
duration: 3 * 1000,
type: 'error',
// duration: '800',
});
}
})
.catch((error) => {
console.log(error);
});
},
queryVehicleList() {
this.searchLoading = true;
axios
.post(`${address}getVehicleList`, {
offices: this.filters.offices,
equipments: this.filters.ids,
status: this.filters.status,
pageIndex: this.pageOption.pageIndex,
pageSize: this.pageOption.pageSize,
})
.then((response) => {
this.searchLoading = false;
if (response.data.code === 200) {
if (response.data.data) {
this.amount.total = response.data.data.total;
this.amount.usingAmount = response.data.data.usingAmount;
this.amount.stopingAmount = response.data.data.stopingAmount;
this.pageOption.totalCount = response.data.data.total;
this.tableData = response.data.data.list;
}
} else {
Message({
message: response.data.message,
duration: 3 * 1000,
type: 'error',
// duration: '800',
});
}
})
.catch((error) => {
this.searchLoading = false;
console.log(error);
});
},
},
};
</script>
src/views/userManagement/ResetPassword.vue 0 → 100644
View file @ 858179d4
<template>
<div class="detail">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="待审核" name="first">
<div class="box">
<!-- 停车视频表 -->
<div class="detail-table">
<el-table
:data="tableData"
style="width: calc(100vw - 240px);overflow:hidden;"
border
fit
highlight-current-row
>
<el-table-column width="50" type="index" label="序号" align="center"></el-table-column>
<el-table-column width="100" label="管理单位" prop="company" align="center"></el-table-column>
<el-table-column width="100" label="车牌号" prop="plateNo" align="center"></el-table-column>
<el-table-column width="240" label="车身照片" prop="images" align="center">
<template slot-scope="scope">
<img v-for="(item,index) in scope.row.images"
:key="index"
:src="thisPhotoAddress+item.smallFilePath" style="width: 70px"/>
</template>
</el-table-column>
<el-table-column width="160" label="上传时间" prop="createTime" align="center"></el-table-column>
<el-table-column width="160" label="操作员" prop="liaisonMan" align="center">
<template slot-scope="scope">
{{scope.row.liaisonMan}}
<br/>
{{scope.row.telephone}}
</template>
</el-table-column>
<el-table-column fixed="right" min-width="100" label="审核状态" align="center">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="checkPass(scope.row.id)" v-loading="checkLoadingList.indexOf(scope.row.id)>-1">审核通过</el-button>
<br/>
<span style="color: red"> <i class="el-icon-warning" v-show="scope.row.rejectReason"></i>{{scope.row.rejectReason}}</span>
</template>
</el-table-column>
</el-table>
<!-- 分页 修改 -->
<el-pagination
:current-page="pageOption.pageIndex"
:page-sizes="[5, 10, 20, 40]"
:page-size="pageOption.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageOption.totalCount"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="已审核" name="second">
<div class="box">
<!-- 停车视频表 -->
<div class="detail-table">
<el-table
:data="tableData"
style="width: calc(100vw - 240px);overflow:hidden;"
border
fit
highlight-current-row
>
<el-table-column width="50" type="index" label="序号" align="center"></el-table-column>
<el-table-column width="100" label="管理单位" prop="company" align="center"></el-table-column>
<el-table-column width="100" label="车牌号" prop="plateNo" align="center"></el-table-column>
<el-table-column width="240" label="车身照片" prop="images" align="center">
<template slot-scope="scope">
<img v-for="(item,index) in scope.row.images"
:key="index"
:src="thisPhotoAddress+item.smallFilePath" style="width: 70px"/>
</template>
</el-table-column>
<el-table-column width="160" label="上传时间" prop="createTime" align="center"></el-table-column>
<el-table-column width="160" label="操作员" prop="liaisonMan" align="center">
<template slot-scope="scope">
{{scope.row.liaisonMan}}
<br/>
{{scope.row.telephone}}
</template>
</el-table-column>
<el-table-column fixed="right" min-width="100" label="审核状态" align="center">
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="chooseCheckFailReason(scope.row.id)" >驳回</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 修改 -->
<el-pagination
:current-page="pageOption.pageIndex"
:page-sizes="[5, 10, 20, 40]"
:page-size="pageOption.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageOption.totalCount"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</el-tab-pane>
</el-tabs>
<el-dialog :visible.sync="isShowDialog" width="500px">
<el-form label-width="100px">
<el-form-item label="驳回原因:">
<el-autocomplete
style="width: 350px"
popper-class="my-autocomplete"
v-model="rejectReason"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect">
<i
class="el-icon-edit el-input__icon"
slot="suffix"
@click="handleIconClick">
</i>
<template slot-scope="{ item }">
<div class="name">{{ item.label }}</div>
</template>
</el-autocomplete>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button v-loading="rejectLoading" type="warning" @click="doCheckReject()">确定</el-button>
<el-button type="primary" @click="isShowDialog = false">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<style lang="less" scope>
</style>
<script>
import axios from 'axios';
import { Message } from 'element-ui';
import moment from 'moment';
import { address, photoAddress } from '../../config';
export default {
name: 'equipmentCheck',
data() {
return {
thisPhotoAddress: photoAddress,
rejectReason: '',
operateOptions: [{
value: '车身照片不符',
label: '车身照片不符',
},
{
value: '车牌号格式不正确',
label: '车牌号格式不正确',
}],
isShowDialog: false,
activeName: 'first',
tableData: [],
pageOption: {
pageIndex: 1,
pageSize: 10,
totalCount: 0,
},
filters: {
},
checkStatus: 0,
loading: false,
checkLoadingList: [],
checkFailId: '',
rejectLoading: false,
};
},
mounted() {},
created() {
this.queryAllEquipment();
},
methods: {
doCheckReject() {
if (this.rejectReason) {
this.checkFail(this.checkFailId, this.rejectReason);
} else {
this.$message({
type: 'warn',
dangerouslyUseHTMLString: true,
showClose: true,
duration: 3000,
message: '驳回原因不能为空',
});
}
},
handleSelect(item) {
console.log(item);
},
handleIconClick(ev) {
console.log(ev);
},
querySearch(queryString, cb) {
const { operateOptions } = this;
const results = queryString ? operateOptions.filter(this.createFilter(queryString)) : operateOptions;
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
return restaurant => (restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
},
handleClick() {
if (this.activeName === 'first') {
this.pageOption = {
pageIndex: 1,
pageSize: 10,
totalCount: 0,
};
this.checkStatus = 0;
this.queryAllEquipment();
} else if (this.activeName === 'second') {
this.pageOption = {
pageIndex: 1,
pageSize: 10,
totalCount: 0,
};
this.checkStatus = 1;
this.queryAllEquipment();
}
},
/** 待审核的 start *** */
chooseCheckFailReason(id) {
this.rejectReason = '';
this.checkFailId = id;
this.isShowDialog = true;
},
checkFail(id, rejectReason) {
this.rejectLoading = true;
this.checkLoadingList.push(id);
axios
.post(`${address}checkVehicle`, {
id,
checkStatus: 0,
rejectReason,
})
.then((response) => {
this.isShowDialog = false;
this.rejectLoading = false;
this.checkLoadingList.splice(this.checkLoadingList.indexOf(id), 1);
if (response.data.code === 200) {
this.$message({
type: 'success',
dangerouslyUseHTMLString: true,
showClose: true,
duration: 3000,
message: '驳回成功',
});
this.queryAllEquipment();
} else {
Message({
message: response.data.message,
duration: 3 * 1000,
});
}
})
.catch((error) => {
this.rejectLoading = false;
this.checkLoadingList.splice(this.checkLoadingList.indexOf(id), 1);
console.log(error);
});
},
checkPass(id) {
this.checkLoadingList.push(id);
axios
.post(`${address}checkVehicle`, {
id,
checkStatus: 1,
})
.then((response) => {
this.checkLoadingList.splice(this.checkLoadingList.indexOf(id), 1);
if (response.data.code === 200) {
this.$message({
type: 'success',
dangerouslyUseHTMLString: true,
showClose: true,
duration: 3000,
message: '驳回成功',
});
this.queryAllEquipment();
} else {
Message({
message: response.data.message,
duration: 3 * 1000,
});
}
})
.catch((error) => {
this.checkLoadingList.splice(this.checkLoadingList.indexOf(id), 1);
console.log(error);
});
},
handleSizeChange(size) {
this.pageOption.pageSize = size;
this.queryAllEquipment();
},
handleCurrentChange(currentPage) {
this.pageOption.pageIndex = currentPage;
this.queryAllEquipment();
},
queryAllEquipment() {
axios
.post(`${address}getVehicleInfos`, {
checkStatus: this.checkStatus,
pageIndex: this.pageOption.pageIndex,
pageSize: this.pageOption.pageSize,
})
.then((response) => {
if (response.data.code === 200) {
if (response.data.data) {
this.pageOption.totalCount = response.data.data.total;
this.tableData = response.data.data.list;
}
} else {
Message({
message: response.data.message,
duration: 3 * 1000,
// type: 'error',
// duration: '800',
});
}
})
.catch((error) => {
console.log(error);
});
},
/** 待审核的 end *** */
},
};
</script>
src/views/userManagement/UserAuthorization.vue 0 → 100644
View file @ 858179d4
<template>
<el-container>
<div class="box" style="height:600px;margin-left:20%;margin-top:30px">
<el-form label-width="100px" ref="createForm" :model="createForm" :rules="rules" >
<el-form-item label="手机号:" prop="phoneNum">
<el-input placeholder="请输入手机号码" style="width:325px"
v-model="createForm.phoneNum" clearable />
</el-form-item>
<el-form-item label="账号等级:" prop="roleId">
<el-radio-group v-model="createForm.roleId" @change="changeRole">
<div style="margin-top:10px"><el-radio label="1" > 超级管理员</el-radio></div>
<div style="margin-top:20px" >
<el-radio label="2" >省级管理员</el-radio>
<el-select
v-show="createForm.roleId==2"
v-model="createForm.provinceId"
style="width:200px"
clearable
filterable
placeholder="请选择省份"
>
<el-option
v-for="item in provinceOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</div>
<div style="margin-top:20px" value=3> <el-radio label="3" > 市级管理员</el-radio>
<el-select
@change="getCityOptions"
v-show="createForm.roleId==3"
v-model="createForm.provinceId"
style="width:200px"
clearable
filterable
placeholder="请选择省份"
>
<el-option
v-for="item in provinceOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
<el-select
v-model="createForm.cityId"
v-show="createForm.roleId==3"
style="width:200px"
clearable
filterable
placeholder="请选择市区"
>
<el-option
v-for="item in cityOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</div>
</el-radio-group>
</el-form-item>
<el-footer style="text-align: center">
<el-button type="warning" @click="commitAuth()">授权</el-button>
</el-footer>
</el-form>
</div>
</el-container>
</template>
<style lang="less" scope>
</style>
<script>
import axios from 'axios';
import { Message } from 'element-ui';
import moment from 'moment';
import { address, photoAddress } from '../../config';
export default {
name: 'equipmentList',
data() {
return {
provinceOptions: [],
cityOptions: [],
createForm: {
cityId: '',
provinceId: '',
phoneNum: '',
roleId: '',
},
rules: {
phoneNum: [
{ required: true, message: '请输入手机号码', trigger: 'blur' },
{
min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur',
},
{
pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
message: '请输入正确的手机号码',
trigger: 'blur',
},
],
roleId: [
{ required: true, message: '请选择账号等级', trigger: 'blur' },
],
},
};
},
mounted() {
},
created() {
this.queryAllProvince();
},
methods: {
getCityOptions() {
this.cityOptions = [];
if (this.createForm.provinceId) {
this.queryCityByProvince(this.createForm.provinceId);
}
},
queryCityByProvince(provinceId) {
const parentIds = [];
parentIds.push(provinceId);
axios
.post(`${address}selectAllAreasByLevelByParent`, {
parentIds,
})
.then((response) => {
if (response.data.code === 200) {
if (response.data.data) {
this.cityOptions = response.data.data;
}
}
})
.catch((error) => {
console.log(error);
});
},
queryAllProvince() {
axios
.post(`${address}selectAllAreasByLevelByParent`, {})
.then((response) => {
if (response.data.code === 200) {
if (response.data.data) {
this.provinceOptions = response.data.data;
}
}
})
.catch((error) => {
console.log(error);
});
},
commitAuth() {
// eslint-disable-next-line consistent-return
this.$refs.createForm.validate((valid) => {
if (valid) {
// eslint-disable-next-line eqeqeq
if (this.createForm.roleId == 2) {
if (!this.createForm.provinceId) {
Message({
message: '请选择省份',
type: 'warn',
duration: 3 * 1000,
});
return false;
}
}
// eslint-disable-next-line eqeqeq
if (this.createForm.roleId == 3) {
if (!this.createForm.provinceId) {
Message({
message: '请选择省份',
type: 'warn',
duration: 3 * 1000,
});
return false;
}
if (!this.createForm.cityId) {
Message({
message: '请选择市区',
type: 'warn',
duration: 3 * 1000,
});
return false;
}
}
axios
.post(`${address}userAuthentication`, {
roleId: this.createForm.roleId,
userName: this.createForm.phoneNum,
cityId: this.createForm.cityId,
provinceId: this.createForm.provinceId,
authStatus: 0,
})
.then((response) => {
if (response.data.code === 200) {
Message({
message: '账户授权成功',
type: 'success',
duration: 3 * 1000,
});
this.createForm = {
cityId: '',
provinceId: '',
phoneNum: '',
roleId: '',
};
}
})
.catch((error) => {
console.log(error);
});
} else {
return false;
}
});
},
changeRole() {
this.createForm.provinceId = '';
this.createForm.cityId = '';
},
},
};
</script>
src/views/userManagement/UserManagement.vue 0 → 100644
View file @ 858179d4
<template>
<div class="box">
<el-col :span="24" class="warp-breadcrum">
<!--搜索栏-->
<el-form :inline="true" :model="filters">
<el-form-item>
<el-select
@change="getCityOptions"
v-model="filters.provinceIds"
style="width:160px"
multiple
collapse-tags
clearable
filterable
placeholder="请选择省份"
>
<el-option
v-for="item in provinceOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select
v-model="filters.cityIds"
multiple
collapse-tags
style="width:160px"
clearable
filterable
placeholder="请选择市区"
>
<el-option
v-for="item in cityOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入手机号码" style="width:160px"
v-model="filters.phoneNum" clearable />
</el-form-item>
<el-form-item>
<el-select
v-model="filters.status"
filterable
clearable
placeholder="账户状态"
>
<el-option
v-for="item in statusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item >
<el-date-picker
v-model="filters.dateTime"
type="daterange"
align="right"
unlink-panels
range-separator="-"
start-placeholder="创建时间起"
end-placeholder="创建时间止"
:default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" v-loading="searchLoading"
@click="queryAllUserByPermission">搜索
</el-button>
<el-button type="primary" v-loading="exportLoading"
@click="exportUser">导出
</el-button>
</el-form-item>
</el-form>
<!-- <el-col :span="3">
<el-form :inline="true" :model="filters">
</el-form>
</el-col>
<el-col :span="3">
<el-form >
</el-form>
</el-col>
<el-col :span="3">
<el-form >
</el-form>
</el-col>
<el-col :span="6">
<el-form >
</el-form>
</el-col>
<el-col :span="4" :offset="1">
<el-form >
</el-form>
</el-col>-->
</el-col>
<!-- 停车视频表 -->
<div class="detail-table">
<el-table
:data="tableData"
style="width: calc(100vw - 240px);overflow:hidden;"
border
fit
highlight-current-row
>
<el-table-column width="50" type="index" label="序号" align="center"></el-table-column>
<el-table-column width="120" label="省" prop="provinceStr"
align="center"></el-table-column>
<el-table-column width="100" label="市" prop="cityStr"
align="center"></el-table-column>
<el-table-column width="160" label="手机号" prop="userName"
align="center"></el-table-column>
<el-table-column width="160" label="创建人" prop="createByStr"
align="center"></el-table-column>
<el-table-column width="160" label="创建时间" prop="createTime"
align="center"></el-table-column>
<el-table-column width="80" label="状态" prop="statusStr" align="center">
</el-table-column>
<el-table-column fixed="right"
min-width="300" label="编辑" align="center">
<template slot-scope="scope" >
<el-button size="mini" type="danger" v-if="scope.row.status==1" v-permission="[permission.userManagement_edit]"
@click="updateUserStatus(scope.row.id,2,scope.row.userName)"
v-loading="checkLoadingList.indexOf(scope.row.id)>-1">停用账户
</el-button>
<el-button size="mini" type="primary" v-if="scope.row.status==2" v-permission="[permission.userManagement_edit]"
@click="updateUserStatus(scope.row.id,1,scope.row.userName)"
v-loading="checkLoadingList.indexOf(scope.row.id)>-1">启用账户
</el-button>
<el-button size="mini" type="danger" v-permission="[permission.userManagement_edit]"
@click="updateUserStatus(scope.row.id,0,scope.row.userName)"
v-loading="checkLoadingList.indexOf(scope.row.id)>-1">删除账户
</el-button>
<el-button size="mini" type="primary" v-permission="[permission.userManagement_edit]"
@click="resetPassword(scope.row.id)"
v-loading="checkLoadingList.indexOf(scope.row.id)>-1">重置密码
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 修改 -->
<el-pagination
:current-page="pageOption.pageIndex"
:page-sizes="[5, 10, 20, 40]"
:page-size="pageOption.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageOption.totalCount"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</template>
<style lang="less" scope>
</style>
<script>
import axios from 'axios';
import { Message } from 'element-ui';
import moment from 'moment';
import { export_json_to_excel } from '@/excel/Export2Excel';
import { address, photoAddress } from '../../config';
import { permission } from '../../permission';
export default {
name: 'userManagement',
data() {
return {
permission,
statusOptions: [
{ value: 1, label: '使用中' },
{ value: 2, label: '停用中' },
],
checkLoadingList: [],
searchLoading: false,
exportLoading: false,
cityOptions: [],
provinceOptions: [],
filters: {
status: '',
cityIds: [],
provinceIds: [],
phoneNum: '',
dateTime: [],
},
pickerOptions: {
shortcuts: [
{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
},
},
{
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
},
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
},
},
],
},
tableData: [],
pageOption: {
pageIndex: 1,
pageSize: 10,
totalCount: 0,
},
};
},
mounted() {},
created() {
this.queryAllUserByPermission();
this.queryAllProvinceByPermission();
},
methods: {
resetPassword(id) {
axios
.post(`${address}resetPassword`, {
id,
})
.then((response) => {
this.checkLoadingList.splice(this.checkLoadingList.indexOf(id), 1);
if (response.data.code === 200) {
this.queryAllUserByPermission();
this.$message({
type: 'success',
dangerouslyUseHTMLString: true,
showClose: true,
duration: 3000,
message: '重置密码成功',
});
} else {
Message({
message: response.data.message,
});
}
})
.catch((error) => {
this.checkLoadingList.splice(this.checkLoadingList.indexOf(id), 1);
console.log(error);
});
},
updateUserStatus(id, status, userName) {
// eslint-disable-next-line eqeqeq
if (status == 0) {
this.$confirm(`删除账户${userName}`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warn',
}).then(() => {
this.updateUserStatusDo(id, status);
}).catch(() => {
});
} else {
this.updateUserStatusDo(id, status);
}
},
// 导出
exportUser() {
this.tableData.forEach((item, index) => {
// eslint-disable-next-line no-param-reassign
item.no = `${index + 1}`;
});
require.ensure([], () => {
// tHeader为存放excel表头标题的数组
const tHeader = [
'省',
'市',
'手机号',
'创建人',
'创建时间',
'状态',
];
// filterVal为tHeader标题对应的键值
const filterVal = [
'provinceStr',
'cityStr',
'userName',
'createByStr',
'createTime',
'statusStr',
];
// list为要转化为excel文件的数据，是一个数组
const list = this.tableData;
// 用map方法处理list数据
const data = list.map(v => filterVal.map(j => v[j]));
// 自定义excel文件名
const fileName = '账户管理';
export_json_to_excel(tHeader, data, fileName);
});
},
getCityOptions() {
this.cityOptions = [];
if (this.filters.provinceIds) {
this.queryCityByProvince(this.filters.provinceIds);
}
},
updateUserStatusDo(id, status) {
this.checkLoadingList.push(id);
axios
.post(`${address}updateUserStatus`, {
id,
status,
})
.then((response) => {
this.checkLoadingList.splice(this.checkLoadingList.indexOf(id), 1);
if (response.data.code === 200) {
this.queryAllUserByPermission();
this.$message({
type: 'success',
dangerouslyUseHTMLString: true,
showClose: true,
duration: 3000,
message: '操作成功',
});
} else {
Message({
message: response.data.message,
duration: 3 * 1000,
});
}
})
.catch((error) => {
this.checkLoadingList.splice(this.checkLoadingList.indexOf(id), 1);
console.log(error);
});
},
queryCityByProvince(provinceId) {
axios
.post(`${address}selectAllAreasByLevelByParent`, {
parentIds: provinceId,
})
.then((response) => {
if (response.data.code === 200) {
if (response.data.data) {
this.cityOptions = response.data.data;
}
}
})
.catch((error) => {
console.log(error);
});
},
queryAllProvinceByPermission() {
axios
.post(`${address}selectAllAreasByLevelByParentByPermission`, {})
.then((response) => {
if (response.data.code === 200) {
if (response.data.data) {
this.provinceOptions = response.data.data;
}
}
})
.catch((error) => {
console.log(error);
});
},
handleSizeChange(size) {
this.pageOption.pageSize = size;
this.queryAllUserByPermission();
},
handleCurrentChange(currentPage) {
this.pageOption.pageIndex = currentPage;
this.queryAllUserByPermission();
},
queryAllUserByPermission() {
const that = this;
let startTime = null;
let endTime = null;
if (that.filters.dateTime.length > 1) {
// eslint-disable-next-line prefer-destructuring
startTime = that.filters.dateTime[0];
// eslint-disable-next-line prefer-destructuring
endTime = that.filters.dateTime[1];
}
axios
.post(`${address}queryAllUserByPermission`, {
status: this.filters.status,
cityIds: this.filters.cityIds,
provinceIds: this.filters.provinceIds,
userName: this.filters.phoneNum,
startTime,
endTime,
pageIndex: this.pageOption.pageIndex,
pageSize: this.pageOption.pageSize,
})
.then((response) => {
if (response.data.code === 200) {
if (response.data.data) {
this.pageOption.totalCount = response.data.data.total;
this.tableData = response.data.data.list;
this.tableData.forEach((e) => {
const reg = /^(\d{3})\d{4}(\d{4})$/;
e.userName = e.userName.replace(reg, '$1****$2');
});
}
} else {
Message({
message: response.data.message,
duration: 3 * 1000,
type: 'error',
// duration: '800',
});
}
})
.catch((error) => {
console.log(error);
});
},
},
};
</script>
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