Skip to content

platform / fanxing_new

Go to a project
Commit 4300d576 by 潘建波
Options

修改布局模块

1 parent 791989ef
Inline Side-by-side
Showing 36 changed files with 918 additions and 559 deletions
dist.zip 0 → 100644
No preview for this file type
package-lock.json deleted 100644 → 0
This diff could not be displayed because it is too large.
src/api/apiList.js
......@@ -2,11 +2,25 @@ import map from "./map";
import login from "./login";
import task from "./task";
import show from "./show";
import device from "./device"
let wsIP = "192.168.9.133:20080";
switch (process.env.NODE_ENV) {
case "development":
wsIP = "192.168.9.133:20080"; // 测试环境url
// baseUrl = "http://192.168.9.61:8086";
break;
case "pre":
wsIP = ""; // 预上线环境url
break;
case "production":
wsIP = "192.168.9.133:20080"; // 生产环境url
break;
}
export default {
map,
login,
task,
show,
device,
wsIP
};
src/api/baseUrl.js
......@@ -9,7 +9,7 @@ switch (process.env.NODE_ENV) {
baseUrl = "https://pre-server.feleti.cn"; // 预上线环境url
break;
case "production":
baseUrl = "https://api.feleti.cn"; // 生产环境url
baseUrl = "http://192.168.9.133:20080"; // 生产环境url
break;
}
......
src/api/device/index.js 0 → 100644
import api from "../index";
import baseUrl from "../baseUrl";
export default {
getDev(params) {
//重点车辆
return api.get(`${baseUrl}/api/v1/devconf_fx/devs`);
},
getGlobalWs(uid, clientid) {
return api.get(`${baseUrl}/api/v1/devconf_fx/ws_url?src_type=user&user_unid=${uid}&client_unid=${clientid}`);
},
getConfParam(params) {
return api.get(`${baseUrl}/api/v1/devconf_fx/conf_param/types`, params); //获取类型
}
};
src/api/show/index.js
import api from "../index";
import baseUrl from "../baseUrl";
export default {
getEventType(){
return api.get(`http://192.168.9.133:20080/api/v1/codes/event_types`)
getEventType() {
return api.get(`http://192.168.9.133:20080/api/v1/codes/event_types`);
},
getTrafficType(params) {
//类型统计
......
src/api/task/index.js
......@@ -35,8 +35,5 @@ export default {
},
deleteTask(taskid) {
return api.delete(urls.deleteTask(taskid));
},
getConftypes(params) {
return api.get(urls.getConfParam, params);
}
};
src/api/task/urls.js
......@@ -39,6 +39,5 @@ export default {
},
changeTask: taskid => {
return `${baseUrl}/api/v1/devconf_fx/tasks/${taskid}/start_or_stop?s=${gitTimer()}`; // 切换任务
},
getConfParam: `${baseUrl}/api/v1/devconf_fx/conf_param/types?s=${gitTimer()}` //获取类型
}
};
src/assets/css/public.css
......@@ -53,6 +53,14 @@ html,body{
background: #D7EDFF;
cursor: pointer;
}
.editbtn {
display: block;
border-radius: 0;
border: 0;
}
.editbtn .el-radio-button:first-child .el-radio-button__inner{
border:0;
}
.el-table__body tr{
background: #f4f4f4;
}
......
src/assets/js/buildcodes.js
import Vue from 'vue'
import Vue from "vue";
class Codes {
constructor () {
this.allTypes = ['vehicle', 'xcycle', 'pflow', 'pedestrian']
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
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();
console.log(this.result)
return this.result
console.log(this.result);
return this.result;
}
// 分类
classify () {
classify() {
if (!this.allData) {
return ''
return "";
}
if (this.cate === 'traffic') {
this.trafficCode()
if (this.cate === "traffic") {
this.trafficCode();
}
if (this.cate === 'behavior') {
this.beheiverCode()
if (this.cate === "behavior") {
this.beheiverCode();
}
}
// 安防事件处理
beheiverCode () {
this.publicCode()
this.behavior()
beheiverCode() {
this.publicCode();
this.behavior();
}
// 交通事件处理
trafficCode () {
this.publicCode()
if (this.event_type === 'vehicle') {
this.vehicle()
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 === "xcycle" || this.event_type === "pedestrian") {
this.xcycle();
}
if (this.event_type === 'pflow') {
this.pflow()
if (this.event_type === "pflow") {
this.pflow();
}
}
// *根据不同event_type做不同处理*
// 公共字段提取
publicCode () {
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]
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]
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 = '未识别'
this.result.shoot_dt = "未识别";
}
}
// 时间
try {
this.result.event_dt = this.allData.event_dt
this.result.event_dt = this.allData.event_dt;
} catch (err) {
this.result.event_dt = ''
this.result.event_dt = "";
}
try {
this.result.location_speed = this.allData.event_data.speed
this.result.location_speed = this.allData.event_data.speed;
} catch (err) {
this.result.location_speed = ''
this.result.location_speed = "";
}
}
//安防
behavior(){
if(this.allData.event_type === "32") {
behavior() {
if (this.allData.event_type === "32") {
this.result.number = this.allData.event_data.number;
}
else {
this.result.number = '--'
} else {
this.result.number = "--";
}
try {
this.result.event_type = this.getCode('安防事件', this.allData.event_type)
this.result.event_type = this.getCode(
"安防事件",
this.allData.event_type
);
} catch (error) {
this.result.event_type = '未识别';
this.result.event_type = "未识别";
}
try {
this.result.direction_text = this.getCode('卡口方向', this.allData.event_data.direction.code)
this.result.direction_text = this.getCode(
"卡口方向",
this.allData.event_data.direction.code
);
} catch (err) {
this.result.direction_text = '未识别'
this.result.direction_text = "未识别";
}
try {
this.result.lane_text = this.getCode('车道类型', this.allData.event_data.lane.code)
this.result.lane_text = this.getCode(
"车道类型",
this.allData.event_data.lane.code
);
} catch (err) {
this.result.lane_text = '未识别'
this.result.lane_text = "未识别";
}
}
// 交通
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 = '救护车'
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 = '未知'
} else {
this.result.special_text = "未知";
}
} catch (error) {
this.result.special_text = '未知'
this.result.special_text = "未知";
}
try {
this.result.vehicle_plate_text = this.allData.event_data.vehicle.plate.text || '未识别'
this.result.vehicle_plate_text =
this.allData.event_data.vehicle.plate.text || "未识别";
} catch (err) {
this.result.vehicle_plate_text = '未识别'
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) : '正常'
this.result.illegalType =
parseInt(this.allData.event_data.illegal.state) === 1
? this.getCode("违法类型", this.allData.event_data.illegal.code)
: "正常";
} catch (err) {
this.result.illegalType = '未识别'
this.result.illegalType = "未识别";
}
try {
this.result.location_name = this.allData.event_data.location.name === '' ? '无' : this.allData.event_data.location.name
this.result.location_name =
this.allData.event_data.location.name === ""
? "无"
: this.allData.event_data.location.name;
} catch (e) {
this.result.location_name = '未识别'
this.result.location_name = "未识别";
}
try {
this.result.vehicle_body_type_text = this.getCode('车辆类型', this.allData.event_data.vehicle.body.type.code)
this.result.vehicle_body_type_text = this.getCode(
"车辆类型",
this.allData.event_data.vehicle.body.type.code
);
} catch (err) {
this.result.vehicle_body_type_text = '未识别'
this.result.vehicle_body_type_text = "未识别";
}
try {
this.result.vehicle_body_logo_text = this.getCode('车辆品牌', this.allData.event_data.vehicle.body.logo.code)
this.result.vehicle_body_logo_text = this.getCode(
"车辆品牌",
this.allData.event_data.vehicle.body.logo.code
);
} catch (err) {
this.result.vehicle_body_logo_text = '未识别'
this.result.vehicle_body_logo_text = "未识别";
}
try {
this.result.plate_type_text = this.getCode('号牌类型', this.allData.event_data.vehicle.plate.type_code)
this.result.plate_type_text = this.getCode(
"号牌类型",
this.allData.event_data.vehicle.plate.type_code
);
} catch (err) {
this.result.plate_type_text = '未识别'
this.result.plate_type_text = "未识别";
}
try {
this.result.vehicle_body_color_text = this.getCode('车身颜色', this.allData.event_data.vehicle.body.color.code)
this.result.vehicle_body_color_text = this.getCode(
"车身颜色",
this.allData.event_data.vehicle.body.color.code
);
} catch (err) {
this.result.vehicle_body_color_text = '未识别'
this.result.vehicle_body_color_text = "未识别";
}
let ary = []
let ary = [];
try {
if(this.allData.event_data.RefinedFeature.rAnnualInspection) {
ary.push('年检标志')
if (this.allData.event_data.RefinedFeature.rAnnualInspection) {
ary.push("年检标志");
}
} catch(e) {
console.log('年检标志无')
} catch (e) {
console.log("年检标志无");
}
try {
if(this.allData.event_data.RefinedFeature.rDecoration) {
ary.push('摆件')
if (this.allData.event_data.RefinedFeature.rDecoration) {
ary.push("摆件");
}
} catch(e) {
console.log('摆件无')
} catch (e) {
console.log("摆件无");
}
try {
if(this.allData.event_data.RefinedFeature.rPendant) {
ary.push('吊坠')
if (this.allData.event_data.RefinedFeature.rPendant) {
ary.push("吊坠");
}
} catch(e) {
console.log('吊坠无')
} catch (e) {
console.log("吊坠无");
}
try {
if(this.allData.event_data.RefinedFeature.rSunshading) {
ary.push('遮阳板')
if (this.allData.event_data.RefinedFeature.rSunshading) {
ary.push("遮阳板");
}
} catch(e) {
console.log('遮阳板无')
} catch (e) {
console.log("遮阳板无");
}
if(ary.length) {
this.result.RefinedFeature_text = ary.join('')
if (ary.length) {
this.result.RefinedFeature_text = ary.join("");
} else {
this.result.RefinedFeature_text = '未识别'
this.result.RefinedFeature_text = "未识别";
}
}
// 非机动车
xcycle () {
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
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
break;
}
} catch (err) {
this.result.driver_face_sex = '未识别'
this.result.driver_face_sex = "未识别";
}
// 身高
try {
this.result.pedestrian_height = this.allData.event_data.pedestrian.height.toFixed(2)
this.result.pedestrian_height = this.allData.event_data.pedestrian.height.toFixed(
2
);
} catch (err) {
this.result.pedestrian_height = '未识别'
this.result.pedestrian_height = "未识别";
}
// 是否戴帽子
try {
switch (this.allData.event_data.driver.face[0].with_hats) {
case 0:
this.result.driver_face_with_hats = '不确定'
break
this.result.driver_face_with_hats = "不确定";
break;
case 1:
this.result.driver_face_with_hats = '戴帽子'
break
this.result.driver_face_with_hats = "戴帽子";
break;
case 2:
this.result.driver_face_with_hats = '未戴帽'
break
this.result.driver_face_with_hats = "未戴帽";
break;
default:
break
break;
}
} catch (err) {
this.result.driver_face_with_hats = '未识别'
this.result.driver_face_with_hats = "未识别";
}
// 车辆颜色
try {
this.result.xcycle_color_type = this.allData.event_data.xcycle.color.name || '未识别'
this.result.xcycle_color_type =
this.allData.event_data.xcycle.color.name || "未识别";
} catch (error) {
this.result.xcycle_color_type = '未识别'
this.result.xcycle_color_type = "未识别";
}
// 违法类型
try {
this.result.illegalType = parseInt(this.allData.event_data.illegal.state) === 1 ? this.getCode('违法类型', this.allData.event_data.illegal.code) : '正常'
this.result.illegalType =
parseInt(this.allData.event_data.illegal.state) === 1
? this.getCode("违法类型", this.allData.event_data.illegal.code)
: "正常";
} catch (err) {
this.result.illegalType = '未识别'
this.result.illegalType = "未识别";
}
//身高
try {
this.result.driver_height = this.allData.event_data.pedestrian.height.toFixed(2);
this.result.driver_height = this.allData.event_data.pedestrian.height.toFixed(
2
);
} catch (err) {
this.result.driver_height = '未识别';
this.result.driver_height = "未识别";
}
// 行人上身颜色
try {
this.result.driver_face_upbody_text = this.getCode('车身颜色', this.allData.event_data.driver.face[0].upbody.code)
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 = '未识别'
this.result.driver_face_upbody_text = "未识别";
}
// 行人下身颜色
try {
this.result.driver_face_lobody_text = this.getCode('车身颜色', this.allData.event_data.driver.face[0].lobody.code)
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 = '未识别'
this.result.driver_face_lobody_text = "未识别";
}
// 车辆品牌
try {
this.result.vehicle_body_logo_text = this.getCode('车辆品牌', this.result.event_data.vehicle.body.logo.code)
this.result.vehicle_body_logo_text = this.getCode(
"车辆品牌",
this.result.event_data.vehicle.body.logo.code
);
} catch (err) {
this.result.vehicle_body_logo_text = '未识别'
this.result.vehicle_body_logo_text = "未识别";
}
// 地点名称
try {
this.result.location_name =this.allData.event_data.location.name === '' ? '未知' : this.allData.event_data.location.name
this.result.location_name =
this.allData.event_data.location.name === ""
? "未知"
: this.allData.event_data.location.name;
} catch (e) {
this.result.location_name = '未识别'
this.result.location_name = "未识别";
}
// 车牌号码
try {
this.result.xcycle_plate_text = this.allData.event_data.xcycle.plate.text || '未识别'
this.result.xcycle_plate_text =
this.allData.event_data.xcycle.plate.text || "未识别";
} catch (error) {
this.result.xcycle_plate_text = '未识别'
this.result.xcycle_plate_text = "未识别";
}
// 骑车类型
try {
switch (this.allData.event_data.xcycle_type) {
case 'motorcycle':
this.result.xcycle_type_text = '摩托车'
break
case 'bicycle':
this.result.xcycle_type_text = '自行车'
break
case 'tricycle':
this.result.xcycle_type_text = '三轮车'
break
case "motorcycle":
this.result.xcycle_type_text = "摩托车";
break;
case "bicycle":
this.result.xcycle_type_text = "自行车";
break;
case "tricycle":
this.result.xcycle_type_text = "三轮车";
break;
default:
break
break;
}
} catch (err) {
this.result.xcycle_type_text = '未识别'
this.result.xcycle_type_text = "未识别";
}
try {
if (this.result.xcycle_type_text === '自行车') {
this.result.company = this.allData.event_data.xcycle.company.name
} else if (this.result.xcycle_type_text === '摩托车') {
if (typeof (this.allData.event_data.xcycle.company.code) !== 'number') {
this.result.company = '未识别'
if (this.result.xcycle_type_text === "自行车") {
this.result.company = this.allData.event_data.xcycle.company.name;
} else if (this.result.xcycle_type_text === "摩托车") {
if (typeof this.allData.event_data.xcycle.company.code !== "number") {
this.result.company = "未识别";
} else {
this.result.company = this.getCode('外卖公司', this.allData.event_data.xcycle.company.code)
}
} else if (this.result.xcycle_type_text === '三轮车') {
if (typeof (this.allData.event_data.xcycle.company.code) !== 'number') {
this.result.company = '未识别'
this.result.company = this.getCode(
"外卖公司",
this.allData.event_data.xcycle.company.code
);
}
} else if (this.result.xcycle_type_text === "三轮车") {
if (typeof this.allData.event_data.xcycle.company.code !== "number") {
this.result.company = "未识别";
} else {
this.result.company = this.getCode('快递公司', this.allData.event_data.xcycle.company.code)
this.result.company = this.getCode(
"快递公司",
this.allData.event_data.xcycle.company.code
);
}
} else {
this.result.company = '无'
this.result.company = "无";
}
} catch (error) {
this.result.company = '未识别'
this.result.company = "未识别";
}
}
// 客流
pflow () {
}
pflow() {}
/**
* buildError
*/
buildError () {
throw new Error('检测字段是否存在')
buildError() {
throw new Error("检测字段是否存在");
}
getCode (codeName, code) {
var name = window.localStorage.getItem(codeName + '-' + code)
name = name || ''
return name
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') {
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()
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])
bjTime.setUTCFullYear(d[0], d[1] - 1, d[2]);
// 给date赋值时分秒
bjTime.setUTCHours(mi[0] - 8, mi[1], mi[2])
bjTime.setUTCHours(mi[0] - 8, mi[1], mi[2]);
} catch (err) {
// console.log('转化本地时间异常:', err.message);
bjTime = new Date(time)
bjTime = new Date(time);
}
if (boo) {
bjTime = new Date(bjTime.getTime() + 28800000 - 86400000)
bjTime = new Date(bjTime.getTime() + 28800000 - 86400000);
} else {
bjTime = new Date(bjTime.getTime() + 28800000)
bjTime = new Date(bjTime.getTime() + 28800000);
}
} else if (str === 'utc') {
if (typeof time === 'object') {
} else if (str === "utc") {
if (typeof time === "object") {
if (boo) {
bjTime = new Date(time.getTime() - 28800000 + 1000)
bjTime = new Date(time.getTime() - 28800000 + 1000);
} else {
bjTime = new Date(time.getTime() - 28800000)
bjTime = new Date(time.getTime() - 28800000);
}
} else {
if (boo) {
bjTime = new Date(new Date(time).getTime() - 28800000 + 1000)
bjTime = new Date(new Date(time).getTime() - 28800000 + 1000);
} else {
bjTime = new Date(new Date(time).getTime() - 28800000)
bjTime = new Date(new Date(time).getTime() - 28800000);
}
}
} else {
bjTime = new Date(time)
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
[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()
export let buildCode = new Codes();
src/assets/js/vporto.js 0 → 100644
import Vue from "vue";
/**
* 图片上传限制
*/
Vue.prototype.uploadImgCondition = function(file) {
const isJPG = file.type === "image/jpeg";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error("上传头像图片只能是 JPG 格式!");
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
return isJPG && isLt2M;
};
/**
* tar文件上传设置
*/
Vue.prototype.uploadFile = function(file, type, size) {
const isType = file.raw.type === type;
let isSize = true;
if (size) {
isSize = file.size / 1024 / 1024 < size;
}
if (!isType) {
this.$message.error(`上传头像文件只能${type}是格式!`);
}
if (size && !isSize) {
this.$message.error(`文件大小不能超过 ${size}MB!`);
}
return isType && isSize;
};
Vue.prototype.globalWs = null;
\ No newline at end of file
src/main.js
......@@ -8,6 +8,7 @@ import resetCss from "./assets/resetElementCss/index.css";
import api from "./api/install";
import "./assets/css/public.css";
import echarts from "echarts";
import "../src/assets/js/vporto";
import "./assets/icon/iconfont.css";
import { buildCode } from "../src/assets/js/buildcodes";
import moment from "moment";
......@@ -26,39 +27,3 @@ new Vue({
store,
render: h => h(App)
}).$mount("#app");
/**
* 图片上传限制
*/
Vue.prototype.uploadImgCondition = function (file) {
const isJPG = file.type === "image/jpeg";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error("上传头像图片只能是 JPG 格式!");
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
return isJPG && isLt2M;
}
/**
* tar文件上传设置
*/
Vue.prototype.uploadFile = function(file, type, size) {
debugger
const isType = file.type === type;
let isSize = null;
if (size) {
isSize = file.size / 1024 / 1024 < size;
}
if (!isType) {
this.$message.error(`上传头像文件只能${type}是格式!`);
}
if (size && !isSize) {
this.$message.error(`文件大小不能超过 ${size}MB!`);
}
return isType && isSize;
}
src/router/index.js
......@@ -3,92 +3,142 @@ import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
export const constantRouterMap = [
{
path: "/",
name: "home",
component: resolve => require(["../views/Home.vue"], resolve),
name: "首页",
component: resolve => require(["../views/Layout/index.vue"], resolve),
children: [
{
path: "/trficcshow",
name: "trficcShow",
name: "交通展示",
component: resolve =>
require(["../views/trafficShow/index.vue"], resolve)
},
{
path: "/behaviorshow",
name: "behaviorshow",
name: "综治展示",
component: resolve =>
require(["../views/behaviorShow/index.vue"], resolve)
}
]
},
{
path: "/login",
name: "login",
// 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)
},
{
path: "/show",
name: "show",
// 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/Show.vue"], resolve)
}
];
export const asyncRouterMap = [
{
path: "/",
name: "tanskmanage",
component: resolve => require(["../views/Layout/index.vue"], resolve),
meta: {
icon: "el-icon-location"
},
children: [
{
path: "/task/sceneSet",
name: "sceneSet",
component: resolve => require(['../views/sceneManage/index.vue'], resolve),
meta: {
icon: "el-icon-location"
},
component: resolve => require(["../views/sceneManage/index.vue"], resolve)
},
{
path: "/task/taskSet",
name: "taskSet",
component: resolve => require(['../views/taskManage/index.vue'], resolve),
meta: {
icon: "el-icon-location"
},
component: resolve => require(["../views/taskManage/index.vue"], resolve)
}
]
},{
path: "/search",
name: "智能检索",
component: resolve => require(["../views/Layout/index.vue"], resolve),
meta: {
icon: "el-icon-location"
},
children: [
{
path: "/search/vehicleSearch",
name: "taskSet",
component: resolve => require(['../views/search/vehicleSearch.vue'], resolve),
path: "/search/vehicle",
name: "车辆检索",
meta: {
icon: "el-icon-location"
},
component: resolve =>
require(["../views/search/vehicleSearch.vue"], resolve)
},
{
path: "/search/xcycle",
name: "xcycle",
component: resolve => require(['../views/search/xcycle.vue'], resolve),
name: "非机动车检索",
meta: {
icon: "el-icon-user"
},
component: resolve => require(["../views/search/xcycle.vue"], resolve)
},
{
path: "/search/pedestrian",
name: "pedestrian",
component: resolve => require(['../views/search/pedestrian.vue'], resolve),
name: "行人检索",
meta: {
icon: "el-icon-location"
},
component: resolve => require(["../views/search/pedestrian.vue"], resolve)
},
{
path: "/search/event",
name: "event",
component: resolve => require(['../views/search/event.vue'], resolve),
name: "事件查询",
meta: {
icon: "el-icon-location"
},
component: resolve => require(["../views/search/event.vue"], resolve)
},
{
path: "/search/illegal",
name: "illegal",
component: resolve => require(['../views/search/illegal.vue'], resolve),
name: "违法记录查询",
meta: {
icon: "el-icon-location"
},
component: resolve => require(["../views/search/illegal.vue"], resolve)
},
{
path: "/search/traficflow",
name: "traficflow",
component: resolve => require(['../views/search/traficflow.vue'], resolve),
},{
path: "/search/publicFlow",
name: "publicFlow",
component: resolve => require(['../views/search/publicFlow.vue'], resolve),
name: "公共客流查询",
meta: {
icon: "el-icon-location"
},
]
component: resolve => require(["../views/search/traficflow.vue"], resolve)
},
{
path: "/login",
name: "login",
// 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)
path: "/search/param",
name: "交通参数",
meta: {
icon: "el-icon-user"
},
{
path: "/show",
name: "show",
// 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/Show.vue"], resolve)
component: resolve => require(["../views/search/publicFlow.vue"], resolve)
}
]
}
];
console.log(process.env.BASE_URL);
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
// mode: "history",
// base: process.env.BASE_URL,
routes: constantRouterMap
});
export default router;
src/store/actions.js
// 异步操作中需要用到 increment 方法，所以需要导入 types.js 文件
import types from './types'
import types from "./types";
const actions= {
const actions = {
incrementAsync({ commit, state }) {
// 异步操作
var p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
resolve();
}, 3000);
});
p.then(() => {
commit(types.INCREMENT);
}).catch(() => {
console.log('异步操作');
})
console.log("异步操作");
});
},
GetMenuRole({ commit, state }, data) {
console.log(data)
}
}
};
// 最后导出
export default actions;
src/store/getters.js
// 因为数据从 user.js 中获取，所以需要引入该文件
import user from './modules/login'
import user from "./modules/login";
const getters = {
isEvenOrOdd(state){
isEvenOrOdd(state) {
// 注意数据是从 user.js 中获取的，所以写成 user.state.count
return user.state.count % 2 == 0 ? "偶数" : "奇数"
}
}
return user.state.count % 2 == 0 ? "偶数" : "奇数";
},
permission_routers: state => state.menus.addRouter,
};
// 并导出
export default getters;
src/store/index.js
......@@ -7,6 +7,7 @@ import getters from "./getters";
import actions from "./actions";
import mutations from "./mutaition";
import users from "./modules/login";
import menus from "./modules/menus"
import state from "./state";
// 导出 store 对象
export default new Vuex.Store({
......@@ -15,6 +16,7 @@ export default new Vuex.Store({
mutations,
state,
modules: {
users
users,
menus
}
});
src/store/modules/login.js
// 导入 types.js 文件
import types from "./../types";
const state ={
atoken:'',
algolist:[],
storeconfslist:[],
count:5
}
const state = {
atoken: "",
algolist: [],
storeconfslist: [],
count: 5
};
// 定义 getters
var getters ={
count(state){
return state.count
var getters = {
count(state) {
return state.count;
}
}
const actions ={
increment({ commit, state }){
};
const actions = {
increment({ commit, state }) {
// 此处提交的事件与下方 mutations 中的 types.INCREMENT 对应
//与原来 commit('increment') 的原理相同，只是把类型名换成了常量
commit(types.INCREMENT)
commit(types.INCREMENT);
},
decrement({commit,state}){
if (state.count>10) {
decrement({ commit, state }) {
if (state.count > 10) {
// 此处提交的事件与下方 mutations 中的 types.DECREMENT 对应
commit(types.DECREMENT)
commit(types.DECREMENT);
}
}
}
};
const mutations ={
const mutations = {
// 此处的事件为上方 actions 中的 commit(types.INCREMENT)
[types.INCREMENT](state){
state.count++
[types.INCREMENT](state) {
state.count++;
},
// 此处的事件为上方 actions 中的 commit(types.DECREMENT)
[types.DECREMENT](state){
state.count--
[types.DECREMENT](state) {
state.count--;
},
[types.ATOKEN](state,atoken){
state.atoken=atoken;
[types.ATOKEN](state, atoken) {
state.atoken = atoken;
},
[types.ALGO](state,list){
state.algolist=list;
[types.ALGO](state, list) {
state.algolist = list;
},
[types.STORECONF](state,list){
state.storeconfslist=list;
[types.STORECONF](state, list) {
state.storeconfslist = list;
}
}
};
// 最后统一导出
export default {
state,
getters,
actions,
mutations
}
\ No newline at end of file
};
src/store/modules/menus.js 0 → 100644
import { asyncRouterMap, constantRouterMap } from "@/router/index.js";
import defultrouter from "@/router/index.js";
/**
* 判断是否有权限
* @param {*} router
* @param {*} roles
*/
function hasPerminssion(router, roles) {
if (router.children && router.children.length > 0) {
if (existsChildren(router, roles)) {
return true;
}
}
let status = false;
// let status = true
if (roles) {
for (let i = 0; i < roles.length; i++) {
if (roles[i].path === router.path) {
status = true;
break;
}
}
}
return status;
}
/**
* 根据后台返回的路由权限
* 动态匹配路由
* @param {*} asyncRouterMap
* @param {*} roles
*/
function filterAsyncRouter(asyncRouterMap, roles) {
var newData = [];
// return routers
asyncRouterMap.forEach((ele, index) => {
roles.map(m => {
if (ele.path == m.menu_api) {
let obj = ele;
if (m.childs && m.childs.length > 0) {
obj.children = filterAsyncRouter(ele.children, m.childs);
} else {
obj.children = []
}
newData.push(obj);
}
});
});
return newData;
}
const menu = {
state: {
routers: constantRouterMap,
addRouter: [],
threeMenu: []
},
mutations: {
SET_ROUTERS: (state, routers) => {
state.addRouter = routers;
state.routers = constantRouterMap.concat(routers);
defultrouter.addRoutes(routers); //合并路由
},
SET_THREEMENU: (state, routers) => {
state.threeMenu = routers;
}
},
actions: {
GetMenuRole({ commit, state }, data) {
if (data === "") {
commit("SET_ROUTERS", []);
return;
} else {
let accessedRouters = filterAsyncRouter(asyncRouterMap, data);
commit("SET_ROUTERS", accessedRouters);
}
}
}
};
export default menu;
src/store/state.js
export default {
ocxstate: 0
ocxstate: 0,
addRouter:[]
}
src/views/Home.vue
<template>
<div class="home" @keyup.esc="KeyUpF11">
<el-container class="home-box">
<el-header class="headers">
<img class="logoImg" src="../assets/img/home/logo.png" alt="">
<div class="headRight">
<span>2019-11-15 16:50 星期一</span>
<img src="../assets/img/home/user.png" alt="">
<span class="exit">退出<i class="el-icon-arrow-down"></i></span>
</div>
</el-header>
<el-container style="min-height:calc(100vh - 64px);">
<el-aside :width="menuwidth">
<el-menu default-active="/trficcshow" class="el-menu-vertical-demo" :collapse="isCollapse" @select="handleSelect">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">首页</span>
</template>
<el-menu-item index="/trficcshow"> <i class="el-icon-location"></i>交通展示</el-menu-item>
<el-menu-item index="/behaviorshow"> <i class="el-icon-location"></i>综治展示</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">任务管理</span>
</template>
<el-menu-item index="/task/sceneSet"> <i class="el-icon-location"></i>场景配置</el-menu-item>
<el-menu-item index="/task/taskSet"> <i class="el-icon-location"></i>任务配置</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<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-menu-item index="/search/xcycle"> <i class="el-icon-location"></i>非机动车检索</el-menu-item>
<el-menu-item index="/search/pedestrian"> <i class="el-icon-location"></i>行人检索</el-menu-item>
<el-menu-item index="/search/event"> <i class="el-icon-location"></i>事件查询</el-menu-item>
<el-menu-item index="/search/illegal"> <i class="el-icon-location"></i>违法记录查询</el-menu-item>
<el-menu-item index="/search/publicFlow"> <i class="el-icon-location"></i>公共客流</el-menu-item>
<el-menu-item index="/search/traficflow"> <i class="el-icon-location"></i>交通流量</el-menu-item>
</el-submenu>
<el-submenu index="4">
<template slot="title">
<i class="el-icon-document"></i>
<span slot="title">资源管理</span>
</template>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<div class="nav"></div>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
// import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "home",
data(){
return{
isCollapse: false,
conHeight:0,
menuwidth:"254px",
full:false
};
},
created(){
this.$router.push('/trficcshow')
},
mounted(){
this.conHeight=window.innerHeight-65;
console.log(this.conHeight)
document.addEventListener("keydown", (event)=>{
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode==122 ){ // 按 Esc
if(this.full) {
this.menuwidth = "254px";
this.full = false
return
}
this.menuwidth = 0
this.full = true
}
});
},
components: {
// HelloWorld
},
methods:{
handleSelect(key, keyPath) {
this.$router.push(key)
console.log(key, keyPath);
}
}
};
</script>
<style lang="stylus" scoped>
</style>
src/views/Layout/index.vue 0 → 100644
<template>
<div class="home">
<el-container class="home-box">
<el-header class="headers">
<img class="logoImg" src="../../assets/img/home/logo.png" alt="">
<div class="headRight">
<span>2019-11-15 16:50 星期一</span>
<img src="../../assets/img/home/user.png" alt="">
<span class="exit">退出<i class="el-icon-arrow-down"></i></span>
</div>
</el-header>
<el-container style="min-height:calc(100vh - 64px);">
<el-aside :width="menuwidth">
<menus></menus>
</el-aside>
<el-main>
<div class="nav"></div>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
// import HelloWorld from "@/components/HelloWorld.vue";
import menus from './menu'
export default {
name: "home",
data(){
return{
isCollapse: false,
conHeight:0,
menuwidth:"254px",
full:false,
};
},
created(){
},
components:{
menus
},
mounted(){
console.log(this.permission_routers)
this.conHeight=window.innerHeight-65;
console.log(this.conHeight)
document.addEventListener("keydown", (event)=>{
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode==122 ){ // 按 Esc
if(this.full) {
this.menuwidth = "254px";
this.full = false
return
}
this.menuwidth = 0
this.full = true
}
});
},
beforeMount() {
//建立ws连接
let uid = localStorage.getItem('user_unid');
let clientid = localStorage.getItem('client_unid');
this.$api.device.getGlobalWs(uid, clientid).then(data => {
this.globalWs = new WebSocket(data.ws_url);
let ary = data.ws_url.split('/');
localStorage.setItem('cennect_unid',ary[ary.length-1])
//监听成功
this.globalWs.onopen = function() {
console.log('全局推送服务连接成功')
}
//监听断开
this.globalWs.onclose = function(){
console.log('全局推送服务连接断开')
}
//监听推送信息
// this.globalWs.onmessage = this.wsdeal;
//保持连接
var $this = this
setInterval(function() {
var send_mesage = '{"type":"request","id":"' + new Date().getTime() + '","mts":"' + new Date().getTime() + '","command": "get /wsapi/v1/users/'+localStorage.getItem('cennect_unid')+'/keep_alive"}'
$this.globalWs.send(send_mesage)
}, 20000)
})
},
};
</script>
<style lang="stylus" scoped>
</style>
src/views/Layout/menu.vue 0 → 100644
<template>
<div class="box">
<el-menu
:default-active="activemenu"
class="el-menu-vertical-demo"
:collapse="isCollapse"
@select="handleSelect"
>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">首页</span>
</template>
<el-menu-item index="/trficcshow">
<i class="el-icon-location"></i>交通展示
</el-menu-item>
<el-menu-item index="/behaviorshow">
<i class="el-icon-location"></i>综治展示
</el-menu-item>
</el-submenu>
<el-submenu v-for="(fristmenu,index) in permission_routers" :index="fristmenu.path" :key="index">
<template slot="title">
<i :class="fristmenu.meta.icon"></i>
<span slot="title">{{fristmenu.name}}</span>
</template>
<el-menu-item v-for="(twomenu,index) in fristmenu.children" :key="index" :index="twomenu.path">
<i :class="twomenu.meta.icon"></i>{{twomenu.name}}
</el-menu-item>
</el-submenu>
</el-menu>
</div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
data() {
return {
full: false,
isCollapse: false,
activemenu: "/search/vehicleSearch"
};
},
methods: {
handleSelect(key, keyPath) {
this.$router.push(key);
localStorage.setItem("curmenu", key);
console.log(key, keyPath);
}
},
computed: {
...mapGetters(["permission_routers"])
},
created() {
let activemenu = localStorage.getItem("curmenu");
let menus = JSON.parse(localStorage.getItem('menu'))
if(menus) {
this.$store.dispatch('GetMenuRole',menus).then(res => {
if (activemenu) {
this.activemenu = activemenu;
} else {
this.$router.push("/");
}
})
}
}
};
</script>
<style lang="stylus" scoped>
.box{
height 100%;
}
</style>
\ No newline at end of file
src/views/Login.vue
......@@ -54,7 +54,11 @@ import types from '../store/types.js'
// localStorage.setItem('rtoken',m.data.rtoken)
// localStorage.setItem('user_unid',m.data.role_unid)
// localStorage.setItem('uid',m.data.unid)
// localStorage.setItem('menu', JSON.stringify(m.data.menu_list))
localStorage.setItem('menu', JSON.stringify(res.menu_list))
//本系统可以直接用本地缓存做
this.$store.dispatch('GetMenuRole',res.menu_list).then(res => {
this.$router.push('/')
}) //获
// localStorage.setItem('user_name',this.username)
// localStorage.setItem('client_unid',new Date().getTime() + Math.round(Math.random() * 10000000000000))
// localStorage.setItem('past_timer',new Date().getTime() + 24*60*60*10000)
......@@ -66,7 +70,6 @@ import types from '../store/types.js'
//code列表
this.getCodeList();
this.getEventList();
this.$router.push('/map')
}
}).catch((err) => {
......
src/views/Show.vue
......@@ -142,7 +142,6 @@ export default {
},
methods:{
connectwebsocket(type) {
debugger
let that = this;
this.connect_id = new Date().getTime();
this.showws = new WebSocket(
......@@ -153,7 +152,6 @@ export default {
);
this.showws.onopen = () => {
console.log("ws事件推送服务连接成功");
debugger
let send_mesage =
'{"type":"request","connect_id": "' +
this.connect_id +
......
src/views/behaviorShow/alarmEvent.vue
......@@ -55,7 +55,7 @@ export default {
let that = this;
this.connect_id = new Date().getTime()
// this.cws = new WebSocket('ws://'+ this.API.IP +'/websocket/v1/integrated/connects/' + this.connect_id)
this.cws = new WebSocket('ws://192.168.9.62:20080/websocket/api/v1/integrated/connects/' + this.connect_id)
this.cws = new WebSocket(`ws://${this.$api.wsIP}/websocket/api/v1/integrated/connects/${this.connect_id}`)
this.cws.onopen = () =>{
console.log('ws事件推送服务连接成功')
......@@ -64,9 +64,8 @@ export default {
this.cws.onclose = () =>{
window.clearTimeout(that.keepAlive)
console.log('ws事件推送服务断开')
debugger
that.connect_id = new Date().getTime()
that.cws = new WebSocket('ws://192.168.9.62:20080/websocket/api/v1/integrated/connects/' + that.connect_id)
that.cws = new WebSocket(`ws://${this.$api.wsIP}/websocket/api/v1/integrated/connects/${this.connect_id}`)
that.keepAlive = setInterval(() => {
let message = {
type: 'request',
......@@ -82,7 +81,6 @@ export default {
let data = JSON.parse(evt.data)
try {
if(data.event_cate == 'behavior'){
debugger
let illame = this.getCode('安防事件',data.event_type);
let camername = data.event_data.device?data.event_data.device.name:''
let addressname = data.event_data.location?data.event_data.location.name:''
......
src/views/behaviorShow/behaviortrend.vue
......@@ -48,7 +48,6 @@ export default {
console.log(data)
let xdata = [],charData = [];
if(data.length > 0) {
debugger
data.map(ele => {
xdata.push(ele.hour)
charData.push(ele.total_num)
......
src/views/public/videoPlay.vue
......@@ -25,7 +25,6 @@
videoPlay: function () {
this.urlFlag = false
if (!this.playurl.sip_serv_ip) {
debugger
let url = this.playurl.rtsp_url
let ocxPlayRes = document.getElementById('VionVideo').StartPlay(url, 0);
console.log('video Ocx播放rtsp流返回值:', ocxPlayRes);
......
src/views/sceneManage/eventTab.vue
......@@ -77,7 +77,6 @@ export default {
this.$store.commit("setocxstate", 1);
},
connectwebsocket(type) {
debugger
let that = this;
this.connect_id = new Date().getTime();
this.cws = new WebSocket(
......@@ -156,7 +155,6 @@ export default {
data.pic =
data.pics[0].src_url ||
"data:image/jpeg;base64," + data.pics[0].pic_base64;
debugger;
data.bigpic =
data.pics[0].src_url ||
"data:image/jpeg;base64," + data.pics[0].pic_base64;
......
src/views/sceneManage/setting/area.vue
......@@ -58,7 +58,6 @@ export default {
this.$api.task.cutpic(mtaskdata.vchan.vdev_unid, mtaskdata.vchan.vchan_refid,mtaskdata.subtask_id).then(data => {
if (!data.ecode) {
this.bgUrl = "data:image/png;base64," + data.pic_base64;
debugger
setTimeout(() => {
let img = document.getElementById('pic').childNodes[0]
let canvas = document.createElement("canvas");
......
src/views/sceneManage/setting/areaconfig/TraficCanvas.vue
......@@ -662,7 +662,7 @@
this.polygon_name = '';
this.polygon_id = '';
var e = e || window.event;
debugger
switch (index - 1) {
case -1:
this.layers.forEach(ele => {
......@@ -815,7 +815,6 @@
},
//改变选中图形样式
makeSelectedGroup: function(shape) {
debugger
console.log(shape);
let points = shape.attrs.points;
let lineType = shape.line_type;
......@@ -1071,7 +1070,6 @@
let that = this;
this.childUrl = canvas.toDataURL("image/webp");
setTimeout(function() {
debugger
that.$refs.lightCanvas.bgUrl = that.childUrl;
that.$refs.lightCanvas.imgSize(w, h);
}, 0);
......@@ -1533,7 +1531,6 @@
if (road.direct == undefined) {
this.roadLayer.add(cLine);
} else if (road.direct == "1") {
debugger
this.drawArrow(
[cPoints[0], cPoints[1]],
[cPoints[2], cPoints[3]],
......@@ -2289,14 +2286,7 @@ li {
background: #145b93;
color: #ffffff;
}
.editbtn {
display: block;
border-radius: 0;
border: 0;
}
.editbtn .el-radio-button:first-child .el-radio-button__inner{
border:0;
}
.delbtn{
color: #fff;
background: #E5E5E5;
......
src/views/sceneManage/setting/demarcate.vue
<template>
<div>
<el-dialog title="标定设置" :visible.sync="dialogVisible" width="1100px" :before-close="handleClose">
<el-dialog title="标定设置" :visible.sync="dialogVisible" width="1000px" :before-close="handleClose">
<span>
<el-row>
<el-col :span="7" class="">
......@@ -33,19 +33,28 @@
</el-row>
<el-row class="bdbody-box">
<div class="bdbody-left">
<div class="pic2"><img :src='src' /></div>
<div id='CaliContainer'></div>
</div>
<div class="bdbody-right">
<div :class="{'line-type':true,'line-type-active':curType==0}" @click="changeState(0)">车辆模型线</div>
<div :class="{'line-type':true,'line-type-active':curType==1}" @click="changeState(1)">行人模型线</div>
<div class="edit-box">
<el-radio-group v-model="canvasState" @change='changeCanvasState'>
<el-radio-button :label="1">添加</el-radio-button>
<el-radio-button :label="0">编辑</el-radio-button>
<el-radio-button :label="1" class="editbtn">
<i class="el-icon-circle-plus icon"></i>
</el-radio-button>
<el-radio-button :label="0" class="editbtn">
<i class="el-icon-edit-outline"></i>
</el-radio-button>
</el-radio-group>
<div>
<button @click="delDraw" v-if='!canvasState' class="delBtn">删除</button>
<span @click='delDraw' class="delbtn editbtn" v-if='!canvasState' >
<i class="el-icon-delete icon"></i>
</span>
</div>
</div>
<div class="bdbody-right">
<div class="pic2"><img :src='src' /></div>
<div id='CaliContainer'></div>
</div>
</el-row>
</span>
......@@ -258,6 +267,7 @@
},
changeCanvasState: function () {
alert(1)
if (this.canvasState) {
this.cancleSelectedGroup()
}
......@@ -702,7 +712,8 @@
</script>
<style lang="stylus" scoped>
.bdheader-title{
line-height 40px
line-height 30px;
vertical-align middle
}
.bdbody-box{
margin-top 20px
......@@ -710,31 +721,34 @@
.bdbody-left, .bdbody-right{
float left
}
.bdbody-right{
.bdbody-left{
positon relative
}
.bdbody-left{
width 200px
.bdbody-right{
width 100px
}
.bdbody-right {
.bdbody-left {
height 500px
width 800px
background #f0f0f0
}
.line-type
height 35px
line-height 35px
border:1px solid #3a8ee6;
color: #3a8ee6;
background-color: #ecf5ff;
width 150px
margin 5px 0
width:92px;
height:30px;
margin-left 10px
line-height 30px
text-align center
border-radius 2px
background:rgba(255,255,255,1);
border-radius:4px;
border:1px solid rgba(229,229,229,1);
cursor pointer
.line-type:first-child{
margin-bottom 10px
}
.line-type-active {
background #409EFF
color #fff
background rgba(215,237,255,1);
border:1px solid rgba(59,183,255,1);
color #3BB7FF
}
.delBtn{
height 35px
......@@ -755,4 +769,7 @@
top: 0;
}
}
.edit-box{
margin-top 200px
}
</style>
src/views/sceneManage/setting/handleparam.vue
......@@ -15,8 +15,8 @@
<el-upload
class="upload-demo"
ref="paramsup"
action="https://jsonplaceholder.typicode.com/posts/"
:before-upload="handlePreview"
action=""
:on-change="handlePreview"
multiple
:limit="1"
:auto-upload="false"
......@@ -35,7 +35,6 @@
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose()">取 消</el-button>
<el-button type="primary" @click="uploadparams()">确 定</el-button>
......@@ -55,7 +54,8 @@ export default {
exportform:{},
fileList:[],
types:[],
curtype:''
curtype:'',
upfile:''
};
},
methods: {
......@@ -64,19 +64,48 @@ export default {
this.dialogVisible = true;
this.$store.commit("setocxstate", 1);
},
handlePreview(file){
handlePreview(file,fileList){
debugger
if(this.uploadFile(file,'application/x-gzip')){
this.upfile = file
return false
} else {
return true
this.fileList = []
return false
}
},
uploadparams(){
this.$refs.paramsup.submit()
let render = new FileReader();
let file_text = '';
reader.readAsDataURL(this.upfile);
reader.onloadend = ()=> {
let dataURL = reader.result.split(';base64,');
let file_ext = '';
if((this.upfile.name).slice(-7) === ".tar.gz") {
file_ext = ".tar.gz";
} else if((this.upfile.name).slice(-3) === '.gz') {
file_ext = '.gz'
}
}
let obj = {
command: 'put /wsapi/v1/devconf_fx/conf_param',
src_page: "",
params: {
type_code: this.paramform.fileType,
subtask_id: this.subtask_id,
conf_name: this.paramform.name,
file_ext: file_ext,
file_b64: dataURL[1],
is_temp: 1,
}
}
this.globalWs.send(JSON.stringify(obj))
console.log(this.upfile)
},
sucessfile(){
},
submitParamSet(){
},
......@@ -89,7 +118,7 @@ export default {
offset: 0,
limit: ''
}
this.$api.task.getConftypes(params).then(res => {
this.$api.device.getConfParam(params).then(res => {
this.types = res.list_data
})
}
......
src/views/trafficShow/alarmEvent.vue
<template>
<div>
<el-table :data="tableData">
<el-table :data="tableData" height="30vh">
<el-table-column type="index" align="center" label="#"></el-table-column>
<el-table-column align="center" prop="eventType" label="事件地点" :formatter="eventFormatter"></el-table-column>
<el-table-column align="center" prop="eventType" label="事件地点"></el-table-column>
<el-table-column align="center" prop="locationName" label="抓拍类型"></el-table-column>
<el-table-column align="center" prop="startDt" label="发生时间"></el-table-column>
<el-table-column align="center" prop="operation" label="操作">
......@@ -42,23 +42,14 @@ export default {
rows.splice(index, 1);
},
editVideo(index, rows){
},
eventFormatter(row, column, cellValue, index){
let value=''
this.eventTypeList.forEach(item=>{
if(item.code==cellValue){
value=item.name;
}
})
return value;
this.$emit('event',rows)
},
},
beforeMount(){
let that = this;
this.connect_id = new Date().getTime()
// this.cws = new WebSocket('ws://'+ this.API.IP +'/websocket/v1/integrated/connects/' + this.connect_id)
this.cws = new WebSocket('ws://192.168.9.133:20080/websocket/api/v1/integrated/connects/' + this.connect_id)
this.cws = new WebSocket(`ws://${this.$api.wsIP}/websocket/api/v1/datahandle/connects/${this.connect_id}`)
this.cws.onopen = () =>{
console.log('ws事件推送服务连接成功')
......@@ -67,9 +58,8 @@ export default {
this.cws.onclose = () =>{
window.clearTimeout(that.keepAlive)
console.log('ws事件推送服务断开')
debugger
that.connect_id = new Date().getTime()
that.cws = new WebSocket('ws://192.168.9.133:20080/websocket/api/v1/integrated/connects/' + that.connect_id)
that.cws = new WebSocket(`ws://${this.$api.wsIP}/websocket/api/v1/datahandle/connects/${this.connect_id}`)
that.keepAlive = setInterval(() => {
let message = {
type: 'request',
......@@ -88,15 +78,27 @@ export default {
let illame = this.getCode('违法类型',data.event_data.illegal.code);
let camername = data.event_data.location.name
let dt = this.setUtcTime(data.event_dt).split(' ')[1];
let pics = 'data:image/jpeg;base64,'+data.pics[0].pic_base64
let pics = 'data:image/jpeg;base64,'+ data.pics[0].pic_base64
let obj = {
illame:illame,
illdt:dt,
camername:camername,
pics:pics
}
if(that.tableData.length > 40) {
that.tableData.pop(obj)
} else {
that.tableData.unshift(obj)
}
that.tableData.unshift(obj)
} else{
if(that.tableData.length > 40) {
that.tableData.pop(data)
} else {
that.tableData.unshift(data)
}
}
} catch (error) {
}
......
src/views/trafficShow/index.vue
......@@ -40,7 +40,7 @@
</el-col>
</el-row>
<div id="map" class="maps">
<showmap></showmap>
<showmap ref="map"></showmap>
<div class="eventlist-box">
<eventList></eventList>
</div>
......@@ -60,7 +60,7 @@
<div>卡口总量</div>
</el-col>
<el-col :span="6" class="content-item">
<div class="item-num">{{snapData.event}}</div>
<div class="item-num">{{snapData.event_total_snap_num}}</div>
<div>事件总量</div>
</el-col>
<el-col :span="6" class="content-item">
......@@ -76,13 +76,13 @@
<div style="clear: both;"></div>
</el-col>
<el-col :span="24" class="clearpright">
<el-row :gutter="10" class="bottom-box">
<el-row :gutter="12" class="bottom-box">
<el-col :span="8">
<div class="bottom-item-box">
<illegaltrend></illegaltrend>
</div>
</el-col>
<el-col :span="5">
<el-col :span="6">
<div class="bottom-item-box">
<eventTypedis></eventTypedis>
</div>
......@@ -90,7 +90,7 @@
<el-col :span="3">
<div class="bottom-item-box">
<div class="title">重点车辆分布</div>
<div class="car-dis-info" v-for="(item, index) in keyVehicleData" :key="index">
<!-- <div class="car-dis-info" v-for="(item, index) in keyVehicleData" :key="index">
<div class="left-icon">
<span class="icon-fanxin-bianzu2"></span>
</div>
......@@ -100,7 +100,7 @@
</div>
<div>{{item.vehicle_name}}</div>
</div>
</div>
</div> -->
<div class="car-dis-info">
<div class="left-icon">
<span class="icon-fanxin-bianzu2"></span>
......@@ -118,14 +118,25 @@
</div>
<div class="right-content">
<div class="">
<span class="car-num">10</span>辆
</div>
<div>危险品车</div>
</div>
</div>
<div class="car-dis-info">
<div class="left-icon">
<span class="icon-fanxin-bianzu2"></span>
</div>
<div class="right-content">
<div class="">
<span class="car-num">29</span>辆
</div>
<div>渣土车抓拍</div>
<div>重型罐式车</div>
</div>
</div>
</div>
</el-col>
<el-col :span="8" class="clearpright">
<el-col :span="7" class="clearpright">
<div class="bottom-item-box">
<div class="title">实时事件</div>
<alarmEvent @event = "alarmevent"></alarmEvent>
......@@ -157,10 +168,10 @@ import alarmEvent from './alarmEvent'
playurl:'',
audit_num:0,
snapData:{
card:"246",
event:145,
illage:341,
car:134
illega_total_snap_num:0,
key_vehicle_total_snap_num:0,
event_total_snap_num:0,
kakou_total_snap_num:0,
}
}
},
......@@ -178,12 +189,8 @@ import alarmEvent from './alarmEvent'
methods:{
alarmevent(data){
//移动地图
this.$ref.map.movemap(data)
//播放视频
this.playurl = data.playurl
this.$ref.ocx.videoPlay()
this.$refs.map.movemap(data)
},
getTrafficSnap(){
this.$api.show.getTrafficSnap().then(res => {
this.snapData = res;
......@@ -198,7 +205,6 @@ import alarmEvent from './alarmEvent'
created(){
this.getTrafficSnap()
this.getKeyVehicle()
}
}
</script>
......
src/views/trafficShow/map.vue
<template>
<div>
<div id="map" class="maps">
<div id="map" class="maps"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer" @click="closepopup"></a>
<div id="t-popup-content">SFDSFA</div>
</div>
</div>
</template>
......@@ -45,6 +47,10 @@ import GeoJSON from "ol/format/GeoJSON.js";
import "ol/ol.css"; //地图默认样式
var map = "";
var Views = "";
var container = '';
var content = "";
var closer = "";
var overlay = "";
export default {
data() {
return {};
......@@ -145,24 +151,41 @@ export default {
console.log(pixel);
//点击相机标注点
map.forEachFeatureAtPixel(pixel, function(feature) {
var coodinate = e.coordinate;
_this.unid = feature.getProperties().unid;
Overlay.setPosition(coodinate);
map.addOverlay(Overlay);
// var coodinate = e.coordinate;
// _this.unid = feature.getProperties().unid;
// Overlay.setPosition(coodinate);
// map.addOverlay(Overlay);
//播放视频操作
alert("视频播放")
});
});
},
movemap(data){
let pos = [120.324447, 36.074594]
Views.animate({
center: pos,
duration: 400,
zoom:14
});
this.addLayer(pos)
},
closepopup(){
overlay.setPosition(undefined);
closer.blur();
return false;
},
addLayer(data) {
var pos = data;
var marker = new Overlay({
position: pos,
positioning: "center-center",
element: document.getElementById("canvasDiv")
addLayer(pdata) {
let HTML= '<div>车牌号:京V8888</div><div>车辆类型:小型客车</div><div>车身颜色:白</div><div>违法类型：闯红灯</div><div></div>'
content.innerHTML = '<div class="content-box"><div class="img-box"><img src='+ require('../../assets/img/home/defaultImg.png')+'></div>'+ HTML +'</div>'
overlay = new Overlay({
element: container,
autoPan: true,
position:pdata,
autoPanAnimation: {
duration: 500
}
});
map.addOverlay(marker);
map.addOverlay(overlay);
},
addCameraLayer(coordinate, phonetext) {
let vectorSource = new VectorSource({ id: 1 });
......@@ -241,6 +264,10 @@ export default {
setTimeout(()=>{
this.InitMap();
},300)
container = document.getElementById('popup');
content = document.getElementById('t-popup-content');
closer = document.getElementById('popup-closer');
},
};
</script>
......@@ -262,11 +289,12 @@ export default {
z-index :10;
opacity :0.5;
}
.ol-popup {
position: absolute;
background-color: #eeeeee;
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
......@@ -274,9 +302,7 @@ export default {
left: -50px;
min-width: 280px;
}
.ol-popup:after,
.ol-popup:before {
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
......@@ -285,39 +311,27 @@ export default {
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: #eeeeee;
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
}
.popup-content{
height:300px;
overflow:auto
}
.pop-info-box{
overflow: hidden;
border-bottom :2px solid #fff
}
.pop-img-box {
float: left;
height: 100px;
......
vue.config.js
module.exports = {
lintOnSave: false,
publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
// ...
css: {
loaderOptions: {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!