Skip to content

platform / fanxing_new

Go to a project
Commit abe991d4 by 潘建波
Options

Merge branch 'fanxing' of http://192.168.9.26/platform/fanxing_new into fanxing 

# Conflicts:
#	package.json
#	public/index.html
#	src/App.vue
#	src/api/apiList.js
#	src/api/axios.js
#	src/api/index.js
#	src/api/install.js
#	src/api/login/index.js
#	src/api/login/urls.js
#	src/api/taskManage/urls.js
#	src/assets/resetElementCss/index.css
#	src/assets/scss/common.scss
#	src/main.js
#	src/router/index.js
#	src/store/actions.js
#	src/store/index.js
#	src/views/Home.vue
#	src/views/Login.vue
#	src/views/sceneManage/index.vue
#	vue.config.js
2 parents 23f6cdf0 4c917f85
Inline Side-by-side
Showing 18 changed files with 984 additions and 121 deletions
src/api/axios.js
import axios from "axios";
import store from "../store/index.js";
import axios from 'axios'
import store from '../store/index.js'
// 创建 axios 实例
let service = axios.create({
// headers: {'Content-Type': 'application/json'},
timeout: 60000
});
})
// 设置 post、put 默认 Content-Type
service.defaults.headers.post["Content-Type"] = "application/json";
service.defaults.headers.put["Content-Type"] = "application/json";
service.defaults.headers.post['Content-Type'] = 'application/json'
service.defaults.headers.put['Content-Type'] = 'application/json'
// 添加请求拦截器
service.interceptors.request.use(
config => {
if (store.state.users.atoken) {
// 判断是否存在token，如果存在的话，则每个http header都加上token
config.headers.authorization = store.state.users.atoken;
}
if (config.method == "post") {
config.data = {
...config.data,
_t: Date.parse(new Date()) / 1000
};
} else if (config.method == "get") {
config.params = {
_t: Date.parse(new Date()) / 1000,
...config.params
};
}
return config;
(config) => {
if (store.state.users.atoken) { // 判断是否存在token，如果存在的话，则每个http header都加上token
config.headers.authorization = store.state.users.atoken;
}
if (config.method == 'post') {
config.data = {
...config.data,
_t: Date.parse(new Date()) / 1000
}
} else if (config.method == 'get') {
config.params = {
_t: Date.parse(new Date()) / 1000,
...config.params
}
}
return config
},
error => {
(error) => {
// 请求错误处理
return Promise.reject(error);
return Promise.reject(error)
}
);
)
// 添加响应拦截器
service.interceptors.response.use(
response => {
let { data } = response;
return data;
(response) => {
let { data } = response
return data
},
error => {
console.log(error);
let info = {};
(error) => {
console.log(error)
let info = {}
if (!error.response) {
info = {
code: 5000,
msg: "Network Error"
};
msg: 'Network Error'
}
} else {
let { status, statusText, data } = error.response;
let { status, statusText, data } = error.response
// 此处整理错误信息格式
info = {
code: status,
data: data,
msg: statusText
};
}
}
return Promise.reject(error);
return Promise.reject(error)
}
);
)
/**
* 创建统一封装过的 axios 实例
* @return {AxiosInstance}
*/
export default function() {
return service;
return service
}
src/api/index.js
import axios from "./axios";
import axios from './axios'
let instance = axios();
let instance = axios()
export default {
get(url, params, headers) {
let options = {};
let options = {}
if (params) {
options.params = params;
options.params = params
}
if (headers) {
options.headers = headers;
options.headers = headers
}
return instance.get(url, options);
return instance.get(url, options)
},
post(url, data, headers, params) {
let options = {};
post(url,data,headers,params) {
let options = {}
if (params) {
options.params = params;
options.params = params
}
if (headers) {
options.headers = headers;
options.headers = headers
}
return instance.post(url, data, options);
return instance.post(url, data, options)
},
put(url, params, headers) {
let options = {};
let options = {}
if (headers) {
options.headers = headers;
options.headers = headers
}
return instance.put(url, params, options);
return instance.put(url, params, options)
},
delete(url, params, headers) {
let options = {};
let options = {}
if (params) {
options.params = params;
options.params = params
}
if (headers) {
options.headers = headers;
options.headers = headers
}
return instance.delete(url, options);
return instance.delete(url, options)
}
};
}
src/api/install.js
import apiList from "./apiList";
import apiList from './apiList'
const install = function(Vue) {
if (install.installed) {
return;
return
}
install.installed = true;
install.installed = true
Object.defineProperties(Vue.prototype, {
$api: {
get() {
return apiList;
return apiList
}
}
});
};
})
}
export default {
install
};
}
src/api/login/index.js
import api from "../index";
import urls from "./urls";
import api from '../index'
import urls from './urls'
export default {
//登陆
login(params, id) {
return api.post(urls.login, params)
//登陆
login(params,id) {
return api.post(urls.login,params)
},
algocombs(params, id) {
return api.get(urls.algocombs, params);
algocombs(params,id){
return api.get(urls.algocombs,params)
},
storeconfs(params, id) {
return api.get(urls.storeconfs, params);
storeconfs(params,id){
return api.get(urls.storeconfs,params)
},
cates(params,id){
return api.get(urls.cates,params)
},
codes(params,id){
return api.get(urls.codes+id+'/codes',params)
}
};
}
src/api/login/urls.js
......@@ -2,5 +2,7 @@ import baseUrl from '../baseUrl'
export default {
login: baseUrl + '/api/v1/devconf_fx/users/login',
algocombs:baseUrl+'/api/v1/devconf_fx/algo_combs',
storeconfs:baseUrl+'/api/v1/devconf_fx/store_confs'
storeconfs:baseUrl+'/api/v1/devconf_fx/store_confs',
cates:baseUrl+'/api/v1/codes/traffic/cates',
codes:baseUrl+'/api/v1/codes/traffic/cates/',
}
\ No newline at end of file
src/api/search/index.js 0 → 100644
import api from '../index'
import urls from './urls'
export default {
vehicleList(params) {
return api.get(urls.vehicleList, params)
},
detailImg(params,id) {
return api.get(urls.detailImg+id, params)
},
delVehicle(params,id) {
// return出去了一个promise
return api.delete(urls.delVehicle+id,params)
},
}
\ No newline at end of file
src/api/search/urls.js 0 → 100644
import baseUrl from '../baseUrl'
export default {
vehicleList: baseUrl + '/api/v1/traffic/events',
detailImg: baseUrl + '/api/v1/web/pics/',
delVehicle: baseUrl + '/api/v1/traffic/events/',
}
\ No newline at end of file
src/api/taskManage/urls.js
import baseUrl from "../baseUrl";
import baseUrl from '../baseUrl'
export default {
tasks: baseUrl + "/api/v1/devconf_fx/tasks",
subtasks: baseUrl + "/api/v1/devconf_fx/tasks/"
};
tasks: baseUrl + '/api/v1/devconf_fx/tasks',
subtasks:baseUrl+'/api/v1/devconf_fx/tasks/',
}
src/assets/js/buildcodes.js 0 → 100644
import Vue from 'vue'
class Codes {
constructor () {
this.allTypes = ['vehicle', 'xcycle', 'pflow', 'pedestrian']
}
/**
* INIT
* 初始化所需参数
* 返回得到的结果
*/
getCodeList(name){
console.log(JSON.parse(window.localStorage.getItem(name)))
return JSON.parse(window.localStorage.getItem(name))
}
init (allData) {
this.cate = allData.event_cate
this.event_type = allData.event_type
this.allData = allData
this.result = {}
this.result = allData
this.classify();
return this.result
}
// 分类
classify () {
if (!this.allData) {
return ''
}
if (this.cate === 'traffic') {
this.trafficCode()
}
if (this.cate === 'behavior') {
this.beheiverCode()
}
}
// 安防事件处理
beheiverCode () {
this.publicCode()
console.log('安防事件')
}
// 交通事件处理
trafficCode () {
this.publicCode()
if (this.event_type === 'vehicle') {
this.vehicle()
}
if (this.event_type === 'xcycle' || this.event_type === 'pedestrian') {
this.xcycle()
}
if (this.event_type === 'pflow') {
this.pflow()
}
}
// *根据不同event_type做不同处理*
// 公共字段提取
publicCode () {
try {
// eslint-disable-next-line camelcase
let shoot_dt = this.timeForm(this.result.pics[0].shoot_dt, 'local').split(' ')
this.result.shoot_date = shoot_dt[0]
this.result.shoot_time = shoot_dt[1]
} catch (error) {
if (this.curType === 1) {
// eslint-disable-next-line camelcase
let shoot_dt = this.timeForm(this.result.event_dt, 'local').split(' ')
this.result.shoot_date = shoot_dt[0]
this.result.shoot_time = shoot_dt[1]
} else {
this.result.shoot_dt = '未识别'
}
}
// 时间
try {
this.result.event_dt = this.allData.event_dt
} catch (err) {
this.result.event_dt = ''
}
try {
this.result.location_speed = this.allData.event_data.speed
} catch (err) {
this.result.location_speed = ''
}
}
// 交通
vehicle () {
try {
if((this.allData.event_data.vehicle.body && this.allData.event_data.vehicle.body.type.special_type) || this.allData.event_data.vehicle.body.type.special_type == 0){
if(this.allData.event_data.vehicle.body.type.special_type == 0){
this.result.special_text = '正常车辆'
}else if(this.allData.event_data.vehicle.body.type.special_type == 1){
this.result.special_text = '车辆运输车'
}else if(this.allData.event_data.vehicle.body.type.special_type ==2 ){
this.result.special_text = '危险品运输车'
}else if(this.allData.event_data.vehicle.body.type.special_type == 3){
this.result.special_text = '救护车'
}
}else{
this.result.special_text = '未知'
}
} catch (error) {
this.result.special_text = '未知'
}
try {
this.result.vehicle_plate_text = this.allData.event_data.vehicle.plate.text || '未识别'
} catch (err) {
this.result.vehicle_plate_text = '未识别'
}
// 违法类型
try {
this.result.illegalType = parseInt(this.allData.event_data.illegal.state) === 1 ? this.getCode('违法类型', this.allData.event_data.illegal.code) : '正常'
} catch (err) {
this.result.illegalType = '未识别'
}
try {
this.result.location_name = this.allData.event_data.location.name === '' ? '无' : this.allData.event_data.location.name
} catch (e) {
this.result.location_name = '未识别'
}
try {
this.result.vehicle_body_type_text = this.getCode('车辆类型', this.allData.event_data.vehicle.body.type.code)
} catch (err) {
this.result.vehicle_body_type_text = '未识别'
}
try {
this.result.vehicle_body_logo_text = this.getCode('车辆品牌', this.allData.event_data.vehicle.body.logo.code)
} catch (err) {
this.result.vehicle_body_logo_text = '未识别'
}
try {
this.result.plate_type_text = this.getCode('号牌类型', this.allData.event_data.vehicle.plate.type_code)
} catch (err) {
this.result.plate_type_text = '未识别'
}
try {
this.result.vehicle_body_color_text = this.getCode('车身颜色', this.allData.event_data.vehicle.body.color.code)
} catch (err) {
this.result.vehicle_body_color_text = '未识别'
}
let ary = []
try {
if(this.allData.event_data.RefinedFeature.rAnnualInspection) {
ary.push('年检标志')
}
} catch(e) {
console.log('年检标志无')
}
try {
if(this.allData.event_data.RefinedFeature.rDecoration) {
ary.push('摆件')
}
} catch(e) {
console.log('摆件无')
}
try {
if(this.allData.event_data.RefinedFeature.rPendant) {
ary.push('吊坠')
}
} catch(e) {
console.log('吊坠无')
}
try {
if(this.allData.event_data.RefinedFeature.rSunshading) {
ary.push('遮阳板')
}
} catch(e) {
console.log('遮阳板无')
}
if(ary.length) {
this.result.RefinedFeature_text = ary.join('')
} else {
this.result.RefinedFeature_text = '未识别'
}
}
// 非机动车
xcycle () {
// 性别
try {
switch (this.allData.event_data.driver.face[0].sex) {
case '1':
this.result.driver_face_sex = '男'
break
case '2':
this.result.driver_face_sex = '女'
break
case '0':
this.result.driver_face_sex = '不确定'
break
default:
break
}
} catch (err) {
this.result.driver_face_sex = '未识别'
}
// 身高
try {
this.result.pedestrian_height = this.allData.event_data.pedestrian.height.toFixed(2)
} catch (err) {
this.result.pedestrian_height = '未识别'
}
// 是否戴帽子
try {
switch (this.allData.event_data.driver.face[0].with_hats) {
case 0:
this.result.driver_face_with_hats = '不确定'
break
case 1:
this.result.driver_face_with_hats = '戴帽子'
break
case 2:
this.result.driver_face_with_hats = '未戴帽'
break
default:
break
}
} catch (err) {
this.result.driver_face_with_hats = '未识别'
}
// 车辆颜色
try {
this.result.xcycle_color_type = this.allData.event_data.xcycle.color.name || '未识别'
} catch (error) {
this.result.xcycle_color_type = '未识别'
}
// 行人上身颜色
try {
this.result.driver_face_upbody_text = this.getCode('车身颜色', this.allData.event_data.driver.face[0].upbody.code)
} catch (err) {
this.result.driver_face_upbody_text = '未识别'
}
// 行人下身颜色
try {
this.result.driver_face_lobody_text = this.getCode('车身颜色', this.allData.event_data.driver.face[0].lobody.code)
} catch (err) {
this.result.driver_face_lobody_text = '未识别'
}
// 车辆品牌
try {
this.result.vehicle_body_logo_text = this.getCode('车辆品牌', this.result.event_data.vehicle.body.logo.code)
} catch (err) {
this.result.vehicle_body_logo_text = '未识别'
}
// 地点名称
try {
this.allData.location_name = this.allData.event_this.allData.location.name === '' ? '无' : this.allData.event_this.allData.location.name
} catch (e) {
this.allData.location_name = '未识别'
}
// 骑车类型
try {
switch (this.allData.event_this.allData.xcycle_type) {
case 'motorcycle':
this.allData.xcycle_type_text = '摩托车'
break
case 'bicycle':
this.allData.xcycle_type_text = '自行车'
break
case 'tricycle':
this.allData.xcycle_type_text = '三轮车'
break
default:
break
}
} catch (err) {
this.allData.xcycle_type_text = '未识别'
}
try {
if (this.allData.xcycle_type_text === '自行车') {
this.allData.company = this.allData.event_this.allData.xcycle.company.name
} else if (this.allData.xcycle_type_text === '摩托车') {
if (typeof (this.allData.event_this.allData.xcycle.company.code) !== 'number') {
this.allData.company = '未识别'
} else {
this.allData.company = this.getCode('外卖公司', this.allData.event_this.allData.xcycle.company.code)
}
} else if (this.allData.xcycle_type_text === '三轮车') {
if (typeof (this.allData.event_this.allData.xcycle.company.code) !== 'number') {
this.allData.company = '未识别'
} else {
this.allData.company = this.getCode('快递公司', this.allData.event_this.allData.xcycle.company.code)
}
} else {
this.allData.company = '无'
}
} catch (error) {
this.allData.company = '未识别'
}
}
// 客流
pflow () {
}
/**
* buildError
*/
buildError () {
throw new Error('检测字段是否存在')
}
getCode (codeName, code) {
var name = window.localStorage.getItem(codeName + '-' + code)
name = name || ''
return name
}
/**
* timerfrom
*/
timeForm (time, str, boo) {
var bjTime
if (time === undefined || time === '') {
bjTime = new Date()
} else if (str === 'local') {
try {
// 兼容
var _dayTime = time.split(' ')
var d = _dayTime[0].split('-')
var mi = _dayTime[_dayTime.length - 1].split(':')
bjTime = new Date()
// 给date赋值年月日
bjTime.setUTCFullYear(d[0], d[1] - 1, d[2])
// 给date赋值时分秒
bjTime.setUTCHours(mi[0] - 8, mi[1], mi[2])
} catch (err) {
// console.log('转化本地时间异常:', err.message);
bjTime = new Date(time)
}
if (boo) {
bjTime = new Date(bjTime.getTime() + 28800000 - 86400000)
} else {
bjTime = new Date(bjTime.getTime() + 28800000)
}
} else if (str === 'utc') {
if (typeof time === 'object') {
if (boo) {
bjTime = new Date(time.getTime() - 28800000 + 1000)
} else {
bjTime = new Date(time.getTime() - 28800000)
}
} else {
if (boo) {
bjTime = new Date(new Date(time).getTime() - 28800000 + 1000)
} else {
bjTime = new Date(new Date(time).getTime() - 28800000)
}
}
} else {
bjTime = new Date(time)
}
var standardTime = [
[bjTime.getFullYear(), bjTime.getMonth() + 1, bjTime.getDate()].join('-'), [bjTime.getHours(), bjTime.getMinutes(), bjTime.getSeconds()].join(':')
].join(' ').replace(/(?=\b\d\b)/g, '0')
return standardTime
}
}
export let buildCode = new Codes()
src/assets/resetElementCss/index.css
......@@ -24,6 +24,7 @@
}
.el-popper[x-placement^=bottom]{
margin-top: 0;
left:0!important;
}
.el-select-dropdown__list{
padding: 4px 0;
......@@ -181,4 +182,7 @@
.el-switch.is-checked .el-switch__core::after {
left: 100%;
margin-left: -10px;
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
margin-bottom: 4px;
}
\ No newline at end of file
src/assets/scss/common.scss
......@@ -6,6 +6,7 @@ $bodyback-color:#f5f7f9;
$border-color:#e5e5e5;
$title-color:#f4f4f4;
$title-backgroud:#f3f3f3;
$dialog-title:#3BB7FF;
body{
margin: 0;
color: $font-color;
......@@ -33,7 +34,10 @@ a:active{
}
.inputBox{
display: inline-block;
width: 200px;
width: 150px;
}
.innnerBox{
padding: 10px;background: #FFFFFF;margin: 10px;
}
.selectBox{
width:150px;
......@@ -84,4 +88,22 @@ a:active{
padding: 12px;
}
}
.detaiCon span{
display: inline-block;
width: 120px;
}
.arrow{
position: absolute;
font-size: 38px;
top: 43%;
cursor: pointer;
color:$dialog-title;
}
.leftArrow{
@extend .arrow;
left: -27px;
}
.rightArrow{
@extend .arrow;
right: -27px;
}
src/main.js
......@@ -9,11 +9,12 @@ import api from "./api/install";
import "./assets/css/public.css";
import echarts from "echarts";
import "./assets/icon/iconfont.css";
import buildCode from "../src/assets/js/buildcodes";
import moment from "moment";
Vue.prototype.$echarts = echarts;
Vue.prototype.$moment = moment;
Vue.prototype.oParse = new XML.ObjTree()
Vue.prototype.$buildCode = buildCode;
Vue.prototype.oParse = new XML.ObjTree();
Vue.use(api);
Vue.use(ElementUI, { size: "small", zIndex: 3000 });
Vue.use(resetCss);
......
src/router/index.js
......@@ -7,26 +7,29 @@ const routes = [
{
path: "/",
name: "home",
component: resolve => require(["../views/Home.vue"], resolve),
children: [
{
path: "/map",
name: "mapShow",
component: resolve => require(["../views/mapShow/index.vue"], resolve)
},
{
path: "/task/sceneSet",
name: "sceneSet",
component: resolve =>
require(["../views/sceneManage/index.vue"], resolve)
},
{
path: "/task/taskSet",
name: "taskSet",
component: resolve =>
require(["../views/taskManage/index.vue"], resolve)
}
]
component: resolve => require(['../views/Home.vue'], resolve),
children:[
{
path: "/map",
name: "mapShow",
component: resolve => require(['../views/mapShow/index.vue'], resolve),
},
{
path: "/task/sceneSet",
name: "sceneSet",
component: resolve => require(['../views/sceneManage/index.vue'], resolve),
},
{
path: "/task/taskSet",
name: "taskSet",
component: resolve => require(['../views/taskManage/index.vue'], resolve),
},
{
path: "/search/vehicleSearch",
name: "taskSet",
component: resolve => require(['../views/search/vehicleSearch.vue'], resolve),
}
]
},
{
path: "/login",
......@@ -34,7 +37,7 @@ const routes = [
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: resolve => require(["../views/Login.vue"], resolve)
component: resolve => require(['../views/Login.vue'], resolve)
}
];
......
src/store/actions.js
// 异步操作中需要用到 increment 方法，所以需要导入 types.js 文件
import types from "./types";
import types from './types'
const actions = {
incrementAsync({ commit, state }) {
// 异步操作
var p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, 3000);
});
p.then(() => {
commit(types.INCREMENT);
}).catch(() => {
console.log("异步操作");
});
}
};
const actions= {
incrementAsync({ commit, state }) {
// 异步操作
var p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 3000);
});
p.then(() => {
commit(types.INCREMENT);
}).catch(() => {
console.log('异步操作');
})
}
}
// 最后导出
export default actions;
src/views/Home.vue
......@@ -32,6 +32,7 @@
<i class="el-icon-document"></i>
<span slot="title">智能检索</span>
</template>
<el-menu-item index="/search/vehicleSearch"> <i class="el-icon-location"></i>过车记录检索</el-menu-item>
</el-submenu>
<el-submenu index="4">
<template slot="title">
......@@ -81,4 +82,4 @@ export default {
</script>
<style lang="stylus" scoped>
</style>
\ No newline at end of file
</style>
src/views/Login.vue
......@@ -63,6 +63,8 @@ import types from '../store/types.js'
this.algoList();
//存储配置列表
this.storeConfList();
//code列表
this.getCodeList();
this.$router.push('/map')
}
......@@ -90,6 +92,23 @@ import types from '../store/types.js'
}
}).catch((err) => {
})
},
getCodeList(){
this.$api.login.cates().then(res => {
res.list_data.forEach(item=>{
this.$api.login.codes({
},item.cate_unid).then(res => {
// 存储code列表
window.localStorage.setItem(item.name,JSON.stringify(res.list_data))
// 存储单独code
res.list_data.forEach(chilItem=>{
window.localStorage.setItem(item.name+'-'+chilItem.code,chilItem.name)
})
}).catch((err) => {
})
})
}).catch((err) => {
})
}
},
watch: {},
......
src/views/search/vehicleSearch.vue 0 → 100644
<template>
<div class="innnerBox">
<el-col :span="22">
<el-form ref="form" label-width="80px" inline>
<el-form-item label="资源类型">
<span class="selectBox">
<el-select placeholder="请选择" :popper-append-to-body=false v-model="conditions.source_type">
<el-option value="pull_video_stream" label='拉取视频'></el-option>
<el-option value="pull_pic_files" label='拉取图片'></el-option>
</el-select>
</span>
</el-form-item>
<el-form-item label="相机名称" >
<span class="inputBox">
<el-input placeholder="请输入相机名称" v-model="conditions.vchan_name"></el-input>
</span>
</el-form-item>
<el-form-item label="任务名称">
<span class="inputBox">
<el-input placeholder="请输入任务名称" v-model="conditions.task_name"></el-input>
</span>
</el-form-item>
<el-form-item label="车牌号码">
<span class="inputBox">
<el-input placeholder="请输入车牌号码" v-model="conditions.plate"></el-input>
</span>
</el-form-item>
<el-form-item label="车辆类型">
<span class="selectBox">
<el-select placeholder="请选择" :popper-append-to-body=false v-model="conditions.car_type" >
<el-option value="" label='全部'></el-option>
<el-option v-for='item in vehicleTypeList' :value="item.code" :key="item.code" :label='item.name'></el-option>
</el-select>
</span>
</el-form-item>
<el-form-item label="车身颜色">
<span class="selectBox">
<el-select placeholder="请选择" :popper-append-to-body=false v-model="conditions.car_color">
<el-option value="" label='全部'></el-option>
<el-option v-for='item in vehicleColorList' :value="item.code" :key="item.code" :label='item.name'></el-option>
</el-select>
</span>
</el-form-item>
<el-form-item label="车辆品牌">
<span class="selectBox">
<el-select placeholder="请选择" :popper-append-to-body=false v-model="conditions.logo_type">
<el-option value="" label='全部'></el-option>
<el-option v-for='item in brandList' :value="item.code" :key="item.code" :label='item.name'></el-option>
</el-select>
</span>
</el-form-item>
<el-form-item label="标志物">
<span class="selectBox">
<el-select placeholder="请选择" :popper-append-to-body=false v-model="conditions.marker">
<el-option value="" label='全部'></el-option>
<el-option value="0" label='年检标志'></el-option>
<el-option value="1" label='摆件'></el-option>
<el-option value="2" label='吊坠'></el-option>
<el-option value="3" label='遮阳板'></el-option>
</el-select>
</span>
</el-form-item>
<el-form-item label="特殊车辆">
<span class="selectBox">
<el-select placeholder="请选择" :popper-append-to-body=false v-model="conditions.special_type">
<el-option value="" label='全部'></el-option>
<el-option value="0" label='普通车辆'></el-option>
<el-option value="1" label='车辆运输车'></el-option>
<el-option value="2" label='危险品运输车'></el-option>
<el-option value="3" label='救护车'></el-option>
</el-select>
</span>
</el-form-item>
<el-form-item label="起始时间">
<span class="dateBox">
<el-date-picker
v-model="dates"
value-format="yyyy-MM-dd HH:mm:ss"
:default-time="['00:00:00', '23:59:59']"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</span>
</el-form-item>
</el-form>
</el-col>
<el-col :span="2">
<div style="margin-bottom: 6px;padding-top: 3px;">
<el-button type="primary" style="" @click="query" class="block">查询</el-button>
<el-button type="success" class="block">导出</el-button>
</div>
<div>
<el-button type="success" class="block">批量删除</el-button>
</div>
</el-col>
<div style="">
<el-table
:data="formattterData"
height="574"
stripe
border
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
align="center"
width="55">
</el-table-column>
<el-table-column
prop="vehicle_plate_text"
align="center"
label="车牌号码">
</el-table-column>
<el-table-column
prop="vehicle_body_type_text"
align="center"
label="车辆类型">
</el-table-column>
<el-table-column
prop="vehicle_body_logo_text"
align="center"
label="车辆品牌">
</el-table-column>
<el-table-column
prop="vehicle_body_color_text"
align="center"
label="车身颜色">
</el-table-column>
<el-table-column
prop="RefinedFeature_text"
align="center"
label="标识物">
</el-table-column>
<el-table-column
prop="special_text"
align="center"
label="特殊车辆">
</el-table-column>
<el-table-column
prop="shoot_date"
align="center"
label="抓拍时间">
<template slot-scope="scope">
<span>{{scope.row.shoot_date}} {{scope.row.shoot_time}}</span>
</template>
</el-table-column>
<el-table-column
prop="location_name"
align="center"
label="抓拍地点">
</el-table-column>
<el-table-column
align="center"
label="操作">
<template slot-scope="scope">
<el-tooltip content="详情" placement="bottom" effect="light" :visible-arrow=false>
<span class="iconfont icon-xiugai editIcon" @click="detailFun(scope.$index, scope.row)"></span>
</el-tooltip>
<span class="tableSpanBorder"></span>
<el-tooltip content="删除" placement="bottom" effect="light" :visible-arrow=false>
<span class="iconfont icon-detail delIcon" @click="delFun(scope.$index, scope.row)"></span>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 28px;">
<el-pagination
style="float: right;"
background
prev-text="上一页"
next-text="下一页"
:page-sizes="[30, 50, 100, 200]"
layout="prev, pager, next,sizes"
:current-page="page"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:total="total">
</el-pagination>
<div style="clear: both;"></div>
</div>
</div>
<el-dialog
title="详情"
top="12vh"
:visible.sync="detailVisible"
width="1000px">
<div style="position: relative;padding: 10px 20px;">
<div class="leftArrow" @click="leftFun"><i class="el-icon-d-arrow-left"></i></div>
<div class="detaiCon">
<img :src="detailImg" alt="" style="width: 100%;">
<el-form label-width="80px" inline>
<div>
<el-form-item label="车牌号码:">
<span>{{ detailObj.vehicle_plate_text }}</span>
</el-form-item>
<el-form-item label="车牌类型:">
<span>{{ detailObj.plate_type_text }}</span>
</el-form-item>
</div>
<div>
<el-form-item label="经过日期:">
<span>{{ detailObj.shoot_date ? detailObj.shoot_date : '' }}</span>
</el-form-item>
<el-form-item label="经过时间:">
<span>{{ detailObj.shoot_time ? detailObj.shoot_time : '' }}</span>
</el-form-item>
</div>
<div>
<el-form-item label="经过地点:">
<span>{{ detailObj.location_name }}</span>
</el-form-item>
<el-form-item label="车辆品牌:">
<span>{{ detailObj.vehicle_body_logo_text }}</span>
</el-form-item>
</div>
<div>
<el-form-item label="车辆类型:">
<span>{{ detailObj.vehicle_body_type_text }}</span>
</el-form-item>
<el-form-item label="车牌颜色:">
<span>{{ detailObj.plate_color_text }}</span>
</el-form-item>
</div>
<div>
<el-form-item label="车身颜色:">
<span>{{ detailObj.vehicle_body_color_text }}</span>
</el-form-item>
<el-form-item label="标志物:">
<span>{{ detailObj.RefinedFeature_text }}</span>
</el-form-item>
</div>
</el-form>
</div>
<div class="rightArrow" @click="rightFun"><i class="el-icon-d-arrow-right"></i></div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="detailDel">删 除</el-button>
<el-button type="primary" @click="detailVisible = false">关 闭</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data(){
let start_dt = this.$moment('2019-12-20').format('YYYY-MM-DD')+' 00:00:00';
let end_dt = this.$moment().format('YYYY-MM-DD')+' 23:59:59';
return{
detailObj:{},
carImg:require("@/assets/img/home/defaultImg.png"),
detailImg:'',
detailVisible:false,
dates:[ start_dt,end_dt ],
conditions: {
start_dt:start_dt,
end_dt:end_dt,
source_type: 'pull_video_stream',
marker: '',
car_type: '',
car_color: '',
logo_type: '',
plate:'',
task_name:'',
curdelid:'',
vchan_name:'',
special_type:''
},
brandList:this.$buildCode.getCodeList('车辆品牌'),
vehicleTypeList:this.$buildCode.getCodeList('车辆类型'),
vehicleColorList:this.$buildCode.getCodeList('车身颜色'),
tableData:[],
formattterData:[],
total:0,
page:1,
pageSize:30,
selectcheck:[],
currentIndex:0
}
},
watch:{
dates(val){
this.conditions.start_dt=val[0];
this.conditions.end_dt=val[1];
}
},
components:{},
mounted(){
this.getData()
},
methods:{
leftFun(){
if(this.currentIndex-1<0){
this.$message({
message: '目前为第一条',
type: 'warning'
});
return false;
}
this.detailObj=this.formattterData[this.currentIndex-1];
this.currentIndex-=1;
this.getImg(this.detailObj.pics[0].pic_unid);
},
rightFun(){
if(this.currentIndex==this.formattterData.length-1){
this.$message({
message: '目前为最后一条',
type: 'warning'
});
return false;
}
this.detailObj=this.formattterData[this.currentIndex+1];
this.currentIndex+=1;
this.getImg(this.detailObj.pics[0].pic_unid);
},
handleSelectionChange(obj){
this.selectcheck = [];
obj.forEach(item => {
this.selectcheck.push(item.id)
});
},
handleSizeChange(val) {
this.pageSize=val;
this.getData();
},
handleCurrentChange(val) {
this.page=val;
this.getData();
},
query(){
this.getData();
},
getData(){
this.formattterData=[];
let offset = (this.page - 1) * this.pageSize;
let search_params = {
limit: this.pageSize,
offset: offset,
event_dt__gte: this.$moment(this.conditions.start_dt).utc().format('YYYY-MM-DD HH:mm:ss'),
event_dt__lt:this.$moment(this.conditions.end_dt).utc().format('YYYY-MM-DD HH:mm:ss'),
source_type: this.conditions.source_type,
vchan_name__like: this.conditions.vchan_name,
vehicle_type: this.conditions.car_type,
body_color: this.conditions.car_color,
logo_type: this.conditions.logo_type,
plate_number__like: this.conditions.plate,
marker: this.conditions.marker,
event_type: '',
special_type:this.conditions.special_type,
task_name: this.conditions.task_name ? this.conditions.task_name.replace(/\s\s*/g, '') : this.conditions.task_name
}
this.$api.search.vehicleList(search_params
).then((res)=>{
this.total=res.total_num;
res.list_data.forEach((item,index)=>{
this.formattterData.push(this.$buildCode.init(item));
})
}).catch((err)=>{
})
},
getImg(unid){
this.$api.search.detailImg({
},unid).then(res=>{
this.detailImg=res.pic_url ? res.pic_url : carImg;
}).catch(e=>{
})
},
detailFun(index,row){
this.currentIndex=index;
if(row.pics.length>0){
this.detailObj = Object.assign({},row);
this.getImg(row.pics[0].pic_unid);
}
this.detailVisible=true;
},
delFun(index,row){
this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$api.search.delVehicle({
},row.id).then(res=>{
if(res.ecode==200){
this.formattterData.splice(index);
this.$message({
type: 'success',
message: '删除成功!'
});
}else{
this.$message.error('删除失败!');
}
}).catch(e=>{
this.$message.error('删除失败!');
})
})
},
detailDel(){
this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$api.search.delVehicle({},this.detailObj.id).then(res=>{
if(res.ecode==200){
this.formattterData.splice(this.currentIndex,1);
this.detailObj = Object.assign({},this.formattterData[this.currentIndex]);
this.getImg(this.formattterData[this.currentIndex].pics[0].pic_unid);
this.$message({
type: 'success',
message: '删除成功!'
});
}else{
this.$message.error('删除失败!');
}
}).catch(e=>{
this.$message.error('删除失败!');
})
})
}
},
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!