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 1043 additions and 684 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"; ...@@ -2,11 +2,25 @@ import map from "./map";
import login from "./login"; import login from "./login";
import task from "./task"; import task from "./task";
import show from "./show"; import show from "./show";
import device from "./device"
let wsIP = "192.168.9.133:20080"; 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 { export default {
map, map,
login, login,
task, task,
show, show,
device,
wsIP wsIP
}; };
src/api/baseUrl.js
...@@ -9,7 +9,7 @@ switch (process.env.NODE_ENV) { ...@@ -9,7 +9,7 @@ switch (process.env.NODE_ENV) {
baseUrl = "https://pre-server.feleti.cn"; // 预上线环境url baseUrl = "https://pre-server.feleti.cn"; // 预上线环境url
break; break;
case "production": case "production":
baseUrl = "https://api.feleti.cn"; // 生产环境url baseUrl = "http://192.168.9.133:20080"; // 生产环境url
break; 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 api from "../index";
import baseUrl from "../baseUrl"; import baseUrl from "../baseUrl";
export default { export default {
getEventType(){ getEventType() {
return api.get(`http://192.168.9.133:20080/api/v1/codes/event_types`) return api.get(`http://192.168.9.133:20080/api/v1/codes/event_types`);
}, },
getTrafficType(params) { getTrafficType(params) {
//类型统计 //类型统计
......
src/api/task/index.js
...@@ -35,8 +35,5 @@ export default { ...@@ -35,8 +35,5 @@ export default {
}, },
deleteTask(taskid) { deleteTask(taskid) {
return api.delete(urls.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 { ...@@ -39,6 +39,5 @@ export default {
}, },
changeTask: taskid => { changeTask: taskid => {
return `${baseUrl}/api/v1/devconf_fx/tasks/${taskid}/start_or_stop?s=${gitTimer()}`; // 切换任务 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{ ...@@ -53,6 +53,14 @@ html,body{
background: #D7EDFF; background: #D7EDFF;
cursor: pointer; 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{ .el-table__body tr{
background: #f4f4f4; background: #f4f4f4;
} }
......
src/assets/js/buildcodes.js
import Vue from 'vue' import Vue from "vue";
class Codes { class Codes {
constructor () { constructor() {
this.allTypes = ['vehicle', 'xcycle', 'pflow', 'pedestrian'] this.allTypes = ["vehicle", "xcycle", "pflow", "pedestrian"];
} }
/** /**
* INIT * INIT
* 初始化所需参数 * 初始化所需参数
* 返回得到的结果 * 返回得到的结果
*/ */
getCodeList(name){ getCodeList(name) {
console.log(JSON.parse(window.localStorage.getItem(name))) console.log(JSON.parse(window.localStorage.getItem(name)));
return JSON.parse(window.localStorage.getItem(name)) return JSON.parse(window.localStorage.getItem(name));
} }
init (allData) { init(allData) {
this.cate = allData.event_cate this.cate = allData.event_cate;
this.event_type = allData.event_type this.event_type = allData.event_type;
this.allData = allData this.allData = allData;
this.result = {} this.result = {};
this.result = allData this.result = allData;
this.classify(); this.classify();
console.log(this.result) console.log(this.result);
return this.result return this.result;
} }
// 分类 // 分类
classify () { classify() {
if (!this.allData) { if (!this.allData) {
return '' return "";
} }
if (this.cate === 'traffic') { if (this.cate === "traffic") {
this.trafficCode() this.trafficCode();
} }
if (this.cate === 'behavior') { if (this.cate === "behavior") {
this.beheiverCode() this.beheiverCode();
} }
} }
// 安防事件处理 // 安防事件处理
beheiverCode () { beheiverCode() {
this.publicCode() this.publicCode();
this.behavior() this.behavior();
} }
// 交通事件处理 // 交通事件处理
trafficCode () { trafficCode() {
this.publicCode() this.publicCode();
if (this.event_type === 'vehicle') { if (this.event_type === "vehicle") {
this.vehicle() this.vehicle();
} }
if (this.event_type === 'xcycle' || this.event_type === 'pedestrian') { if (this.event_type === "xcycle" || this.event_type === "pedestrian") {
this.xcycle() this.xcycle();
} }
if (this.event_type === 'pflow') { if (this.event_type === "pflow") {
this.pflow() this.pflow();
} }
} }
// *根据不同event_type做不同处理* // *根据不同event_type做不同处理*
// 公共字段提取 // 公共字段提取
publicCode () { publicCode() {
try { try {
// eslint-disable-next-line camelcase // eslint-disable-next-line camelcase
let shoot_dt = this.timeForm(this.result.pics[0].shoot_dt, 'local').split(' ') 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] );
this.result.shoot_date = shoot_dt[0];
this.result.shoot_time = shoot_dt[1];
} catch (error) { } catch (error) {
if (this.curType === 1) { if (this.curType === 1) {
// eslint-disable-next-line camelcase // eslint-disable-next-line camelcase
let shoot_dt = this.timeForm(this.result.event_dt, 'local').split(' ') let shoot_dt = this.timeForm(this.result.event_dt, "local").split(" ");
this.result.shoot_date = shoot_dt[0] this.result.shoot_date = shoot_dt[0];
this.result.shoot_time = shoot_dt[1] this.result.shoot_time = shoot_dt[1];
} else { } else {
this.result.shoot_dt = '未识别' this.result.shoot_dt = "未识别";
} }
} }
// 时间 // 时间
try { try {
this.result.event_dt = this.allData.event_dt this.result.event_dt = this.allData.event_dt;
} catch (err) { } catch (err) {
this.result.event_dt = '' this.result.event_dt = "";
} }
try { try {
this.result.location_speed = this.allData.event_data.speed this.result.location_speed = this.allData.event_data.speed;
} catch (err) { } catch (err) {
this.result.location_speed = '' this.result.location_speed = "";
} }
} }
//安防 //安防
behavior(){ behavior() {
if(this.allData.event_type === "32") { if (this.allData.event_type === "32") {
this.result.number = this.allData.event_data.number; this.result.number = this.allData.event_data.number;
} } else {
else { this.result.number = "--";
this.result.number = '--' }
} try {
try { this.result.event_type = this.getCode(
this.result.event_type = this.getCode('安防事件', this.allData.event_type) "安防事件",
} catch (error) { this.allData.event_type
this.result.event_type = '未识别'; );
} } catch (error) {
try { this.result.event_type = "未识别";
this.result.direction_text = this.getCode('卡口方向', this.allData.event_data.direction.code) }
} catch (err) { try {
this.result.direction_text = '未识别' this.result.direction_text = this.getCode(
} "卡口方向",
try { this.allData.event_data.direction.code
this.result.lane_text = this.getCode('车道类型', this.allData.event_data.lane.code) );
} catch (err) { } catch (err) {
this.result.lane_text = '未识别' this.result.direction_text = "未识别";
} }
try {
this.result.lane_text = this.getCode(
"车道类型",
this.allData.event_data.lane.code
);
} catch (err) {
this.result.lane_text = "未识别";
}
} }
// 交通 // 交通
vehicle () { 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 { try {
this.result.vehicle_plate_text = this.allData.event_data.vehicle.plate.text || '未识别' 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) { } catch (err) {
this.result.vehicle_plate_text = '未识别' this.result.vehicle_plate_text = "未识别";
} }
// 违法类型 // 违法类型
try { 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) { } catch (err) {
this.result.illegalType = '未识别' this.result.illegalType = "未识别";
} }
try { 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) { } catch (e) {
this.result.location_name = '未识别' this.result.location_name = "未识别";
} }
try { 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) { } catch (err) {
this.result.vehicle_body_type_text = '未识别' this.result.vehicle_body_type_text = "未识别";
} }
try { 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) { } catch (err) {
this.result.vehicle_body_logo_text = '未识别' this.result.vehicle_body_logo_text = "未识别";
} }
try { 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) { } catch (err) {
this.result.plate_type_text = '未识别' this.result.plate_type_text = "未识别";
} }
try { 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) { } catch (err) {
this.result.vehicle_body_color_text = '未识别' this.result.vehicle_body_color_text = "未识别";
} }
let ary = [] let ary = [];
try { try {
if(this.allData.event_data.RefinedFeature.rAnnualInspection) { if (this.allData.event_data.RefinedFeature.rAnnualInspection) {
ary.push('年检标志') ary.push("年检标志");
} }
} catch(e) { } catch (e) {
console.log('年检标志无') console.log("年检标志无");
} }
try { try {
if(this.allData.event_data.RefinedFeature.rDecoration) { if (this.allData.event_data.RefinedFeature.rDecoration) {
ary.push('摆件') ary.push("摆件");
} }
} catch(e) { } catch (e) {
console.log('摆件无') console.log("摆件无");
} }
try { try {
if(this.allData.event_data.RefinedFeature.rPendant) { if (this.allData.event_data.RefinedFeature.rPendant) {
ary.push('吊坠') ary.push("吊坠");
} }
} catch(e) { } catch (e) {
console.log('吊坠无') console.log("吊坠无");
} }
try { try {
if(this.allData.event_data.RefinedFeature.rSunshading) { if (this.allData.event_data.RefinedFeature.rSunshading) {
ary.push('遮阳板') ary.push("遮阳板");
} }
} catch(e) { } catch (e) {
console.log('遮阳板无') console.log("遮阳板无");
} }
if(ary.length) { if (ary.length) {
this.result.RefinedFeature_text = ary.join('') this.result.RefinedFeature_text = ary.join("");
} else { } else {
this.result.RefinedFeature_text = '未识别' this.result.RefinedFeature_text = "未识别";
} }
} }
// 非机动车 // 非机动车
xcycle () { xcycle() {
// 性别 // 性别
try { try {
switch (this.allData.event_data.driver.face[0].sex) { switch (this.allData.event_data.driver.face[0].sex) {
case '1': case "1":
this.result.driver_face_sex = '男' this.result.driver_face_sex = "男";
break break;
case '2': case "2":
this.result.driver_face_sex = '女' this.result.driver_face_sex = "女";
break break;
case '0': case "0":
this.result.driver_face_sex = '不确定' this.result.driver_face_sex = "不确定";
break break;
default: default:
break break;
} }
} catch (err) { } catch (err) {
this.result.driver_face_sex = '未识别' this.result.driver_face_sex = "未识别";
} }
// 身高 // 身高
try { 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) { } catch (err) {
this.result.pedestrian_height = '未识别' this.result.pedestrian_height = "未识别";
} }
// 是否戴帽子 // 是否戴帽子
try { try {
switch (this.allData.event_data.driver.face[0].with_hats) { switch (this.allData.event_data.driver.face[0].with_hats) {
case 0: case 0:
this.result.driver_face_with_hats = '不确定' this.result.driver_face_with_hats = "不确定";
break break;
case 1: case 1:
this.result.driver_face_with_hats = '戴帽子' this.result.driver_face_with_hats = "戴帽子";
break break;
case 2: case 2:
this.result.driver_face_with_hats = '未戴帽' this.result.driver_face_with_hats = "未戴帽";
break break;
default: default:
break break;
} }
} catch (err) { } catch (err) {
this.result.driver_face_with_hats = '未识别' this.result.driver_face_with_hats = "未识别";
} }
// 车辆颜色 // 车辆颜色
try { 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) { } catch (error) {
this.result.xcycle_color_type = '未识别' this.result.xcycle_color_type = "未识别";
} }
// 违法类型 // 违法类型
try { try {
this.result.illegalType = parseInt(this.allData.event_data.illegal.state) === 1 ? this.getCode('违法类型', this.allData.event_data.illegal.code) : '正常' this.result.illegalType =
} catch (err) { parseInt(this.allData.event_data.illegal.state) === 1
this.result.illegalType = '未识别' ? this.getCode("违法类型", this.allData.event_data.illegal.code)
} : "正常";
//身高 } catch (err) {
try { this.result.illegalType = "未识别";
this.result.driver_height = this.allData.event_data.pedestrian.height.toFixed(2); }
} catch (err) { //身高
this.result.driver_height = '未识别'; try {
} this.result.driver_height = this.allData.event_data.pedestrian.height.toFixed(
2
);
} catch (err) {
this.result.driver_height = "未识别";
}
// 行人上身颜色 // 行人上身颜色
try { 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) { } catch (err) {
this.result.driver_face_upbody_text = '未识别' this.result.driver_face_upbody_text = "未识别";
} }
// 行人下身颜色 // 行人下身颜色
try { 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) { } catch (err) {
this.result.driver_face_lobody_text = '未识别' this.result.driver_face_lobody_text = "未识别";
} }
// 车辆品牌 // 车辆品牌
try { 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) { } catch (err) {
this.result.vehicle_body_logo_text = '未识别' this.result.vehicle_body_logo_text = "未识别";
} }
// 地点名称 // 地点名称
try { 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) { } catch (e) {
this.result.location_name = '未识别' this.result.location_name = "未识别";
} }
// 车牌号码 // 车牌号码
try { try {
this.result.xcycle_plate_text = this.allData.event_data.xcycle.plate.text || '未识别' this.result.xcycle_plate_text =
} catch (error) { this.allData.event_data.xcycle.plate.text || "未识别";
this.result.xcycle_plate_text = '未识别' } catch (error) {
} this.result.xcycle_plate_text = "未识别";
}
// 骑车类型 // 骑车类型
try { try {
switch (this.allData.event_data.xcycle_type) { switch (this.allData.event_data.xcycle_type) {
case 'motorcycle': case "motorcycle":
this.result.xcycle_type_text = '摩托车' this.result.xcycle_type_text = "摩托车";
break break;
case 'bicycle': case "bicycle":
this.result.xcycle_type_text = '自行车' this.result.xcycle_type_text = "自行车";
break break;
case 'tricycle': case "tricycle":
this.result.xcycle_type_text = '三轮车' this.result.xcycle_type_text = "三轮车";
break break;
default: default:
break break;
} }
} catch (err) { } catch (err) {
this.result.xcycle_type_text = '未识别' this.result.xcycle_type_text = "未识别";
} }
try { try {
if (this.result.xcycle_type_text === '自行车') { if (this.result.xcycle_type_text === "自行车") {
this.result.company = this.allData.event_data.xcycle.company.name this.result.company = this.allData.event_data.xcycle.company.name;
} else if (this.result.xcycle_type_text === '摩托车') { } else if (this.result.xcycle_type_text === "摩托车") {
if (typeof (this.allData.event_data.xcycle.company.code) !== 'number') { if (typeof this.allData.event_data.xcycle.company.code !== "number") {
this.result.company = '未识别' this.result.company = "未识别";
} else { } 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 if (this.result.xcycle_type_text === '三轮车') { } else if (this.result.xcycle_type_text === "三轮车") {
if (typeof (this.allData.event_data.xcycle.company.code) !== 'number') { if (typeof this.allData.event_data.xcycle.company.code !== "number") {
this.result.company = '未识别' this.result.company = "未识别";
} else { } 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 { } else {
this.result.company = '无' this.result.company = "无";
} }
} catch (error) { } catch (error) {
this.result.company = '未识别' this.result.company = "未识别";
} }
} }
// 客流 // 客流
pflow () { pflow() {}
}
/** /**
* buildError * buildError
*/ */
buildError () { buildError() {
throw new Error('检测字段是否存在') throw new Error("检测字段是否存在");
} }
getCode (codeName, code) { getCode(codeName, code) {
var name = window.localStorage.getItem(codeName + '-' + code) var name = window.localStorage.getItem(codeName + "-" + code);
name = name || '' name = name || "";
return name return name;
} }
/** /**
* timerfrom * timerfrom
*/ */
timeForm (time, str, boo) { timeForm(time, str, boo) {
var bjTime var bjTime;
if (time === undefined || time === '') { if (time === undefined || time === "") {
bjTime = new Date() bjTime = new Date();
} else if (str === 'local') { } else if (str === "local") {
try { try {
// 兼容 // 兼容
var _dayTime = time.split(' ') var _dayTime = time.split(" ");
var d = _dayTime[0].split('-') var d = _dayTime[0].split("-");
var mi = _dayTime[_dayTime.length - 1].split(':') var mi = _dayTime[_dayTime.length - 1].split(":");
bjTime = new Date() bjTime = new Date();
// 给date赋值年月日 // 给date赋值年月日
bjTime.setUTCFullYear(d[0], d[1] - 1, d[2]) bjTime.setUTCFullYear(d[0], d[1] - 1, d[2]);
// 给date赋值时分秒 // 给date赋值时分秒
bjTime.setUTCHours(mi[0] - 8, mi[1], mi[2]) bjTime.setUTCHours(mi[0] - 8, mi[1], mi[2]);
} catch (err) { } catch (err) {
// console.log('转化本地时间异常:', err.message); // console.log('转化本地时间异常:', err.message);
bjTime = new Date(time) bjTime = new Date(time);
} }
if (boo) { if (boo) {
bjTime = new Date(bjTime.getTime() + 28800000 - 86400000) bjTime = new Date(bjTime.getTime() + 28800000 - 86400000);
} else { } else {
bjTime = new Date(bjTime.getTime() + 28800000) bjTime = new Date(bjTime.getTime() + 28800000);
} }
} else if (str === 'utc') { } else if (str === "utc") {
if (typeof time === 'object') { if (typeof time === "object") {
if (boo) { if (boo) {
bjTime = new Date(time.getTime() - 28800000 + 1000) bjTime = new Date(time.getTime() - 28800000 + 1000);
} else { } else {
bjTime = new Date(time.getTime() - 28800000) bjTime = new Date(time.getTime() - 28800000);
} }
} else { } else {
if (boo) { if (boo) {
bjTime = new Date(new Date(time).getTime() - 28800000 + 1000) bjTime = new Date(new Date(time).getTime() - 28800000 + 1000);
} else { } else {
bjTime = new Date(new Date(time).getTime() - 28800000) bjTime = new Date(new Date(time).getTime() - 28800000);
} }
} }
} else { } else {
bjTime = new Date(time) bjTime = new Date(time);
} }
var standardTime = [ var standardTime = [
[bjTime.getFullYear(), bjTime.getMonth() + 1, bjTime.getDate()].join('-'), [bjTime.getHours(), bjTime.getMinutes(), bjTime.getSeconds()].join(':') [bjTime.getFullYear(), bjTime.getMonth() + 1, bjTime.getDate()].join("-"),
].join(' ').replace(/(?=\b\d\b)/g, '0') [bjTime.getHours(), bjTime.getMinutes(), bjTime.getSeconds()].join(":")
return standardTime ]
.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 \ No newline at end of file
src/main.js
...@@ -8,6 +8,7 @@ import resetCss from "./assets/resetElementCss/index.css"; ...@@ -8,6 +8,7 @@ import resetCss from "./assets/resetElementCss/index.css";
import api from "./api/install"; import api from "./api/install";
import "./assets/css/public.css"; import "./assets/css/public.css";
import echarts from "echarts"; import echarts from "echarts";
import "../src/assets/js/vporto";
import "./assets/icon/iconfont.css"; import "./assets/icon/iconfont.css";
import { buildCode } from "../src/assets/js/buildcodes"; import { buildCode } from "../src/assets/js/buildcodes";
import moment from "moment"; import moment from "moment";
...@@ -26,39 +27,3 @@ new Vue({ ...@@ -26,39 +27,3 @@ new Vue({
store, store,
render: h => h(App) render: h => h(App)
}).$mount("#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"; ...@@ -3,92 +3,142 @@ import VueRouter from "vue-router";
Vue.use(VueRouter); Vue.use(VueRouter);
const routes = [ export const constantRouterMap = [
{ {
path: "/", path: "/",
name: "home", name: "首页",
component: resolve => require(["../views/Home.vue"], resolve), component: resolve => require(["../views/Layout/index.vue"], resolve),
children: [ children: [
{ {
path: "/trficcshow", path: "/trficcshow",
name: "trficcShow", name: "交通展示",
component: resolve => component: resolve =>
require(["../views/trafficShow/index.vue"], resolve) require(["../views/trafficShow/index.vue"], resolve)
}, },
{ {
path: "/behaviorshow", path: "/behaviorshow",
name: "behaviorshow", name: "综治展示",
component: resolve => component: resolve =>
require(["../views/behaviorShow/index.vue"], 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", path: "/task/sceneSet",
name: "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", path: "/task/taskSet",
name: "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", path: "/search/vehicle",
name: "taskSet", name: "车辆检索",
component: resolve => require(['../views/search/vehicleSearch.vue'], resolve), meta: {
icon: "el-icon-location"
},
component: resolve =>
require(["../views/search/vehicleSearch.vue"], resolve)
}, },
{ {
path: "/search/xcycle", path: "/search/xcycle",
name: "xcycle", name: "非机动车检索",
component: resolve => require(['../views/search/xcycle.vue'], resolve), meta: {
icon: "el-icon-user"
},
component: resolve => require(["../views/search/xcycle.vue"], resolve)
}, },
{ {
path: "/search/pedestrian", path: "/search/pedestrian",
name: "pedestrian", name: "行人检索",
component: resolve => require(['../views/search/pedestrian.vue'], resolve), meta: {
icon: "el-icon-location"
},
component: resolve => require(["../views/search/pedestrian.vue"], resolve)
}, },
{ {
path: "/search/event", path: "/search/event",
name: "event", name: "事件查询",
component: resolve => require(['../views/search/event.vue'], resolve), meta: {
icon: "el-icon-location"
},
component: resolve => require(["../views/search/event.vue"], resolve)
}, },
{ {
path: "/search/illegal", path: "/search/illegal",
name: "illegal", name: "违法记录查询",
component: resolve => require(['../views/search/illegal.vue'], resolve), meta: {
icon: "el-icon-location"
},
component: resolve => require(["../views/search/illegal.vue"], resolve)
}, },
{ {
path: "/search/traficflow", path: "/search/traficflow",
name: "traficflow", name: "公共客流查询",
component: resolve => require(['../views/search/traficflow.vue'], resolve), meta: {
},{ icon: "el-icon-location"
path: "/search/publicFlow", },
name: "publicFlow", component: resolve => require(["../views/search/traficflow.vue"], resolve)
component: resolve => require(['../views/search/publicFlow.vue'], resolve),
}, },
{
path: "/search/param",
name: "交通参数",
meta: {
icon: "el-icon-user"
},
component: resolve => require(["../views/search/publicFlow.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)
} }
]; ];
console.log(process.env.BASE_URL);
const router = new VueRouter({ const router = new VueRouter({
mode: "history", // mode: "history",
base: process.env.BASE_URL, // base: process.env.BASE_URL,
routes routes: constantRouterMap
}); });
export default router; export default router;
src/store/actions.js
// 异步操作中需要用到 increment 方法，所以需要导入 types.js 文件 // 异步操作中需要用到 increment 方法，所以需要导入 types.js 文件
import types from './types' import types from "./types";
const actions= { const actions = {
incrementAsync({ commit, state }) { incrementAsync({ commit, state }) {
// 异步操作 // 异步操作
var p = new Promise((resolve, reject) => { var p = new Promise((resolve, reject) => {
setTimeout(() => { setTimeout(() => {
resolve() resolve();
}, 3000); }, 3000);
}); });
p.then(() => { p.then(() => {
commit(types.INCREMENT); commit(types.INCREMENT);
}).catch(() => { }).catch(() => {
console.log('异步操作'); console.log("异步操作");
}) });
} },
} GetMenuRole({ commit, state }, data) {
console.log(data)
}
};
// 最后导出 // 最后导出
export default actions; export default actions;
src/store/getters.js
// 因为数据从 user.js 中获取，所以需要引入该文件 // 因为数据从 user.js 中获取，所以需要引入该文件
import user from './modules/login' import user from "./modules/login";
const getters = { const getters = {
isEvenOrOdd(state){ isEvenOrOdd(state) {
// 注意数据是从 user.js 中获取的，所以写成 user.state.count // 注意数据是从 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;
\ No newline at end of file \ No newline at end of file
export default getters;
src/store/index.js
...@@ -7,6 +7,7 @@ import getters from "./getters"; ...@@ -7,6 +7,7 @@ import getters from "./getters";
import actions from "./actions"; import actions from "./actions";
import mutations from "./mutaition"; import mutations from "./mutaition";
import users from "./modules/login"; import users from "./modules/login";
import menus from "./modules/menus"
import state from "./state"; import state from "./state";
// 导出 store 对象 // 导出 store 对象
export default new Vuex.Store({ export default new Vuex.Store({
...@@ -15,6 +16,7 @@ export default new Vuex.Store({ ...@@ -15,6 +16,7 @@ export default new Vuex.Store({
mutations, mutations,
state, state,
modules: { modules: {
users users,
menus
} }
}); });
src/store/modules/login.js
// 导入 types.js 文件 // 导入 types.js 文件
import types from "./../types"; import types from "./../types";
const state ={ const state = {
atoken:'', atoken: "",
algolist:[], algolist: [],
storeconfslist:[], storeconfslist: [],
count:5 count: 5
} };
// 定义 getters // 定义 getters
var getters ={ var getters = {
count(state){ count(state) {
return state.count return state.count;
}
};
const actions = {
increment({ commit, state }) {
// 此处提交的事件与下方 mutations 中的 types.INCREMENT 对应
//与原来 commit('increment') 的原理相同，只是把类型名换成了常量
commit(types.INCREMENT);
},
decrement({ commit, state }) {
if (state.count > 10) {
// 此处提交的事件与下方 mutations 中的 types.DECREMENT 对应
commit(types.DECREMENT);
} }
} }
const actions ={ };
increment({ commit, state }){
// 此处提交的事件与下方 mutations 中的 types.INCREMENT 对应
//与原来 commit('increment') 的原理相同，只是把类型名换成了常量
commit(types.INCREMENT)
},
decrement({commit,state}){
if (state.count>10) {
// 此处提交的事件与下方 mutations 中的 types.DECREMENT 对应
commit(types.DECREMENT)
}
}
}
const mutations ={ const mutations = {
// 此处的事件为上方 actions 中的 commit(types.INCREMENT) // 此处的事件为上方 actions 中的 commit(types.INCREMENT)
[types.INCREMENT](state){ [types.INCREMENT](state) {
state.count++ state.count++;
}, },
// 此处的事件为上方 actions 中的 commit(types.DECREMENT) // 此处的事件为上方 actions 中的 commit(types.DECREMENT)
[types.DECREMENT](state){ [types.DECREMENT](state) {
state.count-- state.count--;
}, },
[types.ATOKEN](state,atoken){ [types.ATOKEN](state, atoken) {
state.atoken=atoken; state.atoken = atoken;
}, },
[types.ALGO](state,list){ [types.ALGO](state, list) {
state.algolist=list; state.algolist = list;
}, },
[types.STORECONF](state,list){ [types.STORECONF](state, list) {
state.storeconfslist=list; state.storeconfslist = list;
} }
} };
// 最后统一导出 // 最后统一导出
export default { export default {
state,
getters,
actions,
mutations
}
\ No newline at end of file \ No newline at end of file
state,
getters,
actions,
mutations
};
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 { 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 \ No newline at end of file
src/views/Login.vue
...@@ -54,7 +54,11 @@ import types from '../store/types.js' ...@@ -54,7 +54,11 @@ import types from '../store/types.js'
// localStorage.setItem('rtoken',m.data.rtoken) // localStorage.setItem('rtoken',m.data.rtoken)
// localStorage.setItem('user_unid',m.data.role_unid) // localStorage.setItem('user_unid',m.data.role_unid)
// localStorage.setItem('uid',m.data.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('user_name',this.username)
// localStorage.setItem('client_unid',new Date().getTime() + Math.round(Math.random() * 10000000000000)) // localStorage.setItem('client_unid',new Date().getTime() + Math.round(Math.random() * 10000000000000))
// localStorage.setItem('past_timer',new Date().getTime() + 24*60*60*10000) // localStorage.setItem('past_timer',new Date().getTime() + 24*60*60*10000)
...@@ -66,7 +70,6 @@ import types from '../store/types.js' ...@@ -66,7 +70,6 @@ import types from '../store/types.js'
//code列表 //code列表
this.getCodeList(); this.getCodeList();
this.getEventList(); this.getEventList();
this.$router.push('/map')
} }
}).catch((err) => { }).catch((err) => {
......
src/views/Show.vue
...@@ -142,7 +142,6 @@ export default { ...@@ -142,7 +142,6 @@ export default {
}, },
methods:{ methods:{
connectwebsocket(type) { connectwebsocket(type) {
debugger
let that = this; let that = this;
this.connect_id = new Date().getTime(); this.connect_id = new Date().getTime();
this.showws = new WebSocket( this.showws = new WebSocket(
...@@ -153,7 +152,6 @@ export default { ...@@ -153,7 +152,6 @@ export default {
); );
this.showws.onopen = () => { this.showws.onopen = () => {
console.log("ws事件推送服务连接成功"); console.log("ws事件推送服务连接成功");
debugger
let send_mesage = let send_mesage =
'{"type":"request","connect_id": "' + '{"type":"request","connect_id": "' +
this.connect_id + this.connect_id +
......
src/views/behaviorShow/alarmEvent.vue
...@@ -55,7 +55,7 @@ export default { ...@@ -55,7 +55,7 @@ export default {
let that = this; let that = this;
this.connect_id = new Date().getTime() 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://'+ 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 = () =>{ this.cws.onopen = () =>{
console.log('ws事件推送服务连接成功') console.log('ws事件推送服务连接成功')
...@@ -64,9 +64,8 @@ export default { ...@@ -64,9 +64,8 @@ export default {
this.cws.onclose = () =>{ this.cws.onclose = () =>{
window.clearTimeout(that.keepAlive) window.clearTimeout(that.keepAlive)
console.log('ws事件推送服务断开') console.log('ws事件推送服务断开')
debugger
that.connect_id = new Date().getTime() 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(() => { that.keepAlive = setInterval(() => {
let message = { let message = {
type: 'request', type: 'request',
...@@ -82,7 +81,6 @@ export default { ...@@ -82,7 +81,6 @@ export default {
let data = JSON.parse(evt.data) let data = JSON.parse(evt.data)
try { try {
if(data.event_cate == 'behavior'){ if(data.event_cate == 'behavior'){
debugger
let illame = this.getCode('安防事件',data.event_type); let illame = this.getCode('安防事件',data.event_type);
let camername = data.event_data.device?data.event_data.device.name:'' let camername = data.event_data.device?data.event_data.device.name:''
let addressname = data.event_data.location?data.event_data.location.name:'' let addressname = data.event_data.location?data.event_data.location.name:''
......
src/views/behaviorShow/behaviortrend.vue
...@@ -48,7 +48,6 @@ export default { ...@@ -48,7 +48,6 @@ export default {
console.log(data) console.log(data)
let xdata = [],charData = []; let xdata = [],charData = [];
if(data.length > 0) { if(data.length > 0) {
debugger
data.map(ele => { data.map(ele => {
xdata.push(ele.hour) xdata.push(ele.hour)
charData.push(ele.total_num) charData.push(ele.total_num)
......
src/views/public/videoPlay.vue
...@@ -25,7 +25,6 @@ ...@@ -25,7 +25,6 @@
videoPlay: function () { videoPlay: function () {
this.urlFlag = false this.urlFlag = false
if (!this.playurl.sip_serv_ip) { if (!this.playurl.sip_serv_ip) {
debugger
let url = this.playurl.rtsp_url let url = this.playurl.rtsp_url
let ocxPlayRes = document.getElementById('VionVideo').StartPlay(url, 0); let ocxPlayRes = document.getElementById('VionVideo').StartPlay(url, 0);
console.log('video Ocx播放rtsp流返回值:', ocxPlayRes); console.log('video Ocx播放rtsp流返回值:', ocxPlayRes);
......
src/views/sceneManage/eventTab.vue
...@@ -77,7 +77,6 @@ export default { ...@@ -77,7 +77,6 @@ export default {
this.$store.commit("setocxstate", 1); this.$store.commit("setocxstate", 1);
}, },
connectwebsocket(type) { connectwebsocket(type) {
debugger
let that = this; let that = this;
this.connect_id = new Date().getTime(); this.connect_id = new Date().getTime();
this.cws = new WebSocket( this.cws = new WebSocket(
...@@ -156,7 +155,6 @@ export default { ...@@ -156,7 +155,6 @@ export default {
data.pic = data.pic =
data.pics[0].src_url || data.pics[0].src_url ||
"data:image/jpeg;base64," + data.pics[0].pic_base64; "data:image/jpeg;base64," + data.pics[0].pic_base64;
debugger;
data.bigpic = data.bigpic =
data.pics[0].src_url || data.pics[0].src_url ||
"data:image/jpeg;base64," + data.pics[0].pic_base64; "data:image/jpeg;base64," + data.pics[0].pic_base64;
......
src/views/sceneManage/setting/area.vue
...@@ -58,7 +58,6 @@ export default { ...@@ -58,7 +58,6 @@ export default {
this.$api.task.cutpic(mtaskdata.vchan.vdev_unid, mtaskdata.vchan.vchan_refid,mtaskdata.subtask_id).then(data => { this.$api.task.cutpic(mtaskdata.vchan.vdev_unid, mtaskdata.vchan.vchan_refid,mtaskdata.subtask_id).then(data => {
if (!data.ecode) { if (!data.ecode) {
this.bgUrl = "data:image/png;base64," + data.pic_base64; this.bgUrl = "data:image/png;base64," + data.pic_base64;
debugger
setTimeout(() => { setTimeout(() => {
let img = document.getElementById('pic').childNodes[0] let img = document.getElementById('pic').childNodes[0]
let canvas = document.createElement("canvas"); let canvas = document.createElement("canvas");
......
src/views/sceneManage/setting/areaconfig/TraficCanvas.vue
...@@ -662,7 +662,7 @@ ...@@ -662,7 +662,7 @@
this.polygon_name = ''; this.polygon_name = '';
this.polygon_id = ''; this.polygon_id = '';
var e = e || window.event; var e = e || window.event;
debugger
switch (index - 1) { switch (index - 1) {
case -1: case -1:
this.layers.forEach(ele => { this.layers.forEach(ele => {
...@@ -815,7 +815,6 @@ ...@@ -815,7 +815,6 @@
}, },
//改变选中图形样式 //改变选中图形样式
makeSelectedGroup: function(shape) { makeSelectedGroup: function(shape) {
debugger
console.log(shape); console.log(shape);
let points = shape.attrs.points; let points = shape.attrs.points;
let lineType = shape.line_type; let lineType = shape.line_type;
...@@ -1071,7 +1070,6 @@ ...@@ -1071,7 +1070,6 @@
let that = this; let that = this;
this.childUrl = canvas.toDataURL("image/webp"); this.childUrl = canvas.toDataURL("image/webp");
setTimeout(function() { setTimeout(function() {
debugger
that.$refs.lightCanvas.bgUrl = that.childUrl; that.$refs.lightCanvas.bgUrl = that.childUrl;
that.$refs.lightCanvas.imgSize(w, h); that.$refs.lightCanvas.imgSize(w, h);
}, 0); }, 0);
...@@ -1533,7 +1531,6 @@ ...@@ -1533,7 +1531,6 @@
if (road.direct == undefined) { if (road.direct == undefined) {
this.roadLayer.add(cLine); this.roadLayer.add(cLine);
} else if (road.direct == "1") { } else if (road.direct == "1") {
debugger
this.drawArrow( this.drawArrow(
[cPoints[0], cPoints[1]], [cPoints[0], cPoints[1]],
[cPoints[2], cPoints[3]], [cPoints[2], cPoints[3]],
...@@ -2289,14 +2286,7 @@ li { ...@@ -2289,14 +2286,7 @@ li {
background: #145b93; background: #145b93;
color: #ffffff; color: #ffffff;
} }
.editbtn {
display: block;
border-radius: 0;
border: 0;
}
.editbtn .el-radio-button:first-child .el-radio-button__inner{
border:0;
}
.delbtn{ .delbtn{
color: #fff; color: #fff;
background: #E5E5E5; background: #E5E5E5;
......
src/views/sceneManage/setting/demarcate.vue
<template> <template>
<div> <div>
<el-dialog title="标定设置" :visible.sync="dialogVisible" width="1100px" :before-close="handleClose"> <el-dialog title="标定设置" :visible.sync="dialogVisible" width="1000px" :before-close="handleClose">
<span> <span>
<el-row> <el-row>
<el-col :span="7" class=""> <el-col :span="7" class="">
...@@ -33,19 +33,28 @@ ...@@ -33,19 +33,28 @@
</el-row> </el-row>
<el-row class="bdbody-box"> <el-row class="bdbody-box">
<div class="bdbody-left"> <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==0}" @click="changeState(0)">车辆模型线</div>
<div :class="{'line-type':true,'line-type-active':curType==1}" @click="changeState(1)">行人模型线</div> <div :class="{'line-type':true,'line-type-active':curType==1}" @click="changeState(1)">行人模型线</div>
<el-radio-group v-model="canvasState" @change='changeCanvasState'> <div class="edit-box">
<el-radio-button :label="1">添加</el-radio-button> <el-radio-group v-model="canvasState" @change='changeCanvasState'>
<el-radio-button :label="0">编辑</el-radio-button> <el-radio-button :label="1" class="editbtn">
</el-radio-group> <i class="el-icon-circle-plus icon"></i>
<div> </el-radio-button>
<button @click="delDraw" v-if='!canvasState' class="delBtn">删除</button> <el-radio-button :label="0" class="editbtn">
<i class="el-icon-edit-outline"></i>
</el-radio-button>
</el-radio-group>
<div>
<span @click='delDraw' class="delbtn editbtn" v-if='!canvasState' >
<i class="el-icon-delete icon"></i>
</span>
</div>
</div> </div>
</div>
<div class="bdbody-right">
<div class="pic2"><img :src='src' /></div>
<div id='CaliContainer'></div>
</div> </div>
</el-row> </el-row>
</span> </span>
...@@ -258,6 +267,7 @@ ...@@ -258,6 +267,7 @@
}, },
changeCanvasState: function () { changeCanvasState: function () {
alert(1)
if (this.canvasState) { if (this.canvasState) {
this.cancleSelectedGroup() this.cancleSelectedGroup()
} }
...@@ -702,7 +712,8 @@ ...@@ -702,7 +712,8 @@
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.bdheader-title{ .bdheader-title{
line-height 40px line-height 30px;
vertical-align middle
} }
.bdbody-box{ .bdbody-box{
margin-top 20px margin-top 20px
...@@ -710,31 +721,34 @@ ...@@ -710,31 +721,34 @@
.bdbody-left, .bdbody-right{ .bdbody-left, .bdbody-right{
float left float left
} }
.bdbody-right{ .bdbody-left{
positon relative positon relative
} }
.bdbody-left{ .bdbody-right{
width 200px width 100px
} }
.bdbody-right { .bdbody-left {
height 500px height 500px
width 800px width 800px
background #f0f0f0 background #f0f0f0
} }
.line-type .line-type
height 35px width:92px;
line-height 35px height:30px;
border:1px solid #3a8ee6; margin-left 10px
color: #3a8ee6; line-height 30px
background-color: #ecf5ff; text-align center
width 150px background:rgba(255,255,255,1);
margin 5px 0 border-radius:4px;
text-align center border:1px solid rgba(229,229,229,1);
border-radius 2px cursor pointer
cursor pointer .line-type:first-child{
margin-bottom 10px
}
.line-type-active { .line-type-active {
background #409EFF background rgba(215,237,255,1);
color #fff border:1px solid rgba(59,183,255,1);
color #3BB7FF
} }
.delBtn{ .delBtn{
height 35px height 35px
...@@ -755,4 +769,7 @@ ...@@ -755,4 +769,7 @@
top: 0; top: 0;
} }
} }
.edit-box{
margin-top 200px
}
</style> </style>
src/views/sceneManage/setting/handleparam.vue
...@@ -15,8 +15,8 @@ ...@@ -15,8 +15,8 @@
<el-upload <el-upload
class="upload-demo" class="upload-demo"
ref="paramsup" ref="paramsup"
action="https://jsonplaceholder.typicode.com/posts/" action=""
:before-upload="handlePreview" :on-change="handlePreview"
multiple multiple
:limit="1" :limit="1"
:auto-upload="false" :auto-upload="false"
...@@ -35,7 +35,6 @@ ...@@ -35,7 +35,6 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="handleClose()">取 消</el-button> <el-button @click="handleClose()">取 消</el-button>
<el-button type="primary" @click="uploadparams()">确 定</el-button> <el-button type="primary" @click="uploadparams()">确 定</el-button>
...@@ -55,7 +54,8 @@ export default { ...@@ -55,7 +54,8 @@ export default {
exportform:{}, exportform:{},
fileList:[], fileList:[],
types:[], types:[],
curtype:'' curtype:'',
upfile:''
}; };
}, },
methods: { methods: {
...@@ -64,19 +64,48 @@ export default { ...@@ -64,19 +64,48 @@ export default {
this.dialogVisible = true; this.dialogVisible = true;
this.$store.commit("setocxstate", 1); this.$store.commit("setocxstate", 1);
}, },
handlePreview(file){ handlePreview(file,fileList){
debugger
if(this.uploadFile(file,'application/x-gzip')){ if(this.uploadFile(file,'application/x-gzip')){
this.upfile = file
return false return false
} else { } else {
return true this.fileList = []
return false
} }
}, },
uploadparams(){ 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(){ sucessfile(){
}, },
submitParamSet(){ submitParamSet(){
}, },
...@@ -89,7 +118,7 @@ export default { ...@@ -89,7 +118,7 @@ export default {
offset: 0, offset: 0,
limit: '' limit: ''
} }
this.$api.task.getConftypes(params).then(res => { this.$api.device.getConfParam(params).then(res => {
this.types = res.list_data this.types = res.list_data
}) })
} }
......
src/views/trafficShow/alarmEvent.vue
<template> <template>
<div> <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 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="locationName" label="抓拍类型"></el-table-column>
<el-table-column align="center" prop="startDt" label="发生时间"></el-table-column> <el-table-column align="center" prop="startDt" label="发生时间"></el-table-column>
<el-table-column align="center" prop="operation" label="操作"> <el-table-column align="center" prop="operation" label="操作">
...@@ -42,23 +42,14 @@ export default { ...@@ -42,23 +42,14 @@ export default {
rows.splice(index, 1); rows.splice(index, 1);
}, },
editVideo(index, rows){ editVideo(index, rows){
this.$emit('event',rows)
}, },
eventFormatter(row, column, cellValue, index){
let value=''
this.eventTypeList.forEach(item=>{
if(item.code==cellValue){
value=item.name;
}
})
return value;
},
}, },
beforeMount(){ beforeMount(){
let that = this; let that = this;
this.connect_id = new Date().getTime() 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://'+ 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 = () =>{ this.cws.onopen = () =>{
console.log('ws事件推送服务连接成功') console.log('ws事件推送服务连接成功')
...@@ -67,9 +58,8 @@ export default { ...@@ -67,9 +58,8 @@ export default {
this.cws.onclose = () =>{ this.cws.onclose = () =>{
window.clearTimeout(that.keepAlive) window.clearTimeout(that.keepAlive)
console.log('ws事件推送服务断开') console.log('ws事件推送服务断开')
debugger
that.connect_id = new Date().getTime() 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(() => { that.keepAlive = setInterval(() => {
let message = { let message = {
type: 'request', type: 'request',
...@@ -88,14 +78,26 @@ export default { ...@@ -88,14 +78,26 @@ export default {
let illame = this.getCode('违法类型',data.event_data.illegal.code); let illame = this.getCode('违法类型',data.event_data.illegal.code);
let camername = data.event_data.location.name let camername = data.event_data.location.name
let dt = this.setUtcTime(data.event_dt).split(' ')[1]; 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 = { let obj = {
illame:illame, illame:illame,
illdt:dt, illdt:dt,
camername:camername, camername:camername,
pics:pics pics:pics
} }
if(that.tableData.length > 40) {
that.tableData.pop(obj)
} else {
that.tableData.unshift(obj)
}
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) { } catch (error) {
......
src/views/trafficShow/index.vue
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
</el-col> </el-col>
</el-row> </el-row>
<div id="map" class="maps"> <div id="map" class="maps">
<showmap></showmap> <showmap ref="map"></showmap>
<div class="eventlist-box"> <div class="eventlist-box">
<eventList></eventList> <eventList></eventList>
</div> </div>
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
<div>卡口总量</div> <div>卡口总量</div>
</el-col> </el-col>
<el-col :span="6" class="content-item"> <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> <div>事件总量</div>
</el-col> </el-col>
<el-col :span="6" class="content-item"> <el-col :span="6" class="content-item">
...@@ -76,13 +76,13 @@ ...@@ -76,13 +76,13 @@
<div style="clear: both;"></div> <div style="clear: both;"></div>
</el-col> </el-col>
<el-col :span="24" class="clearpright"> <el-col :span="24" class="clearpright">
<el-row :gutter="10" class="bottom-box"> <el-row :gutter="12" class="bottom-box">
<el-col :span="8"> <el-col :span="8">
<div class="bottom-item-box"> <div class="bottom-item-box">
<illegaltrend></illegaltrend> <illegaltrend></illegaltrend>
</div> </div>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="6">
<div class="bottom-item-box"> <div class="bottom-item-box">
<eventTypedis></eventTypedis> <eventTypedis></eventTypedis>
</div> </div>
...@@ -90,7 +90,7 @@ ...@@ -90,7 +90,7 @@
<el-col :span="3"> <el-col :span="3">
<div class="bottom-item-box"> <div class="bottom-item-box">
<div class="title">重点车辆分布</div> <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"> <div class="left-icon">
<span class="icon-fanxin-bianzu2"></span> <span class="icon-fanxin-bianzu2"></span>
</div> </div>
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
</div> </div>
<div>{{item.vehicle_name}}</div> <div>{{item.vehicle_name}}</div>
</div> </div>
</div> </div> -->
<div class="car-dis-info"> <div class="car-dis-info">
<div class="left-icon"> <div class="left-icon">
<span class="icon-fanxin-bianzu2"></span> <span class="icon-fanxin-bianzu2"></span>
...@@ -118,14 +118,25 @@ ...@@ -118,14 +118,25 @@
</div> </div>
<div class="right-content"> <div class="right-content">
<div class=""> <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>辆 <span class="car-num">29</span>辆
</div> </div>
<div>渣土车抓拍</div> <div>重型罐式车</div>
</div> </div>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="8" class="clearpright"> <el-col :span="7" class="clearpright">
<div class="bottom-item-box"> <div class="bottom-item-box">
<div class="title">实时事件</div> <div class="title">实时事件</div>
<alarmEvent @event = "alarmevent"></alarmEvent> <alarmEvent @event = "alarmevent"></alarmEvent>
...@@ -157,10 +168,10 @@ import alarmEvent from './alarmEvent' ...@@ -157,10 +168,10 @@ import alarmEvent from './alarmEvent'
playurl:'', playurl:'',
audit_num:0, audit_num:0,
snapData:{ snapData:{
card:"246", illega_total_snap_num:0,
event:145, key_vehicle_total_snap_num:0,
illage:341, event_total_snap_num:0,
car:134 kakou_total_snap_num:0,
} }
} }
}, },
...@@ -178,12 +189,8 @@ import alarmEvent from './alarmEvent' ...@@ -178,12 +189,8 @@ import alarmEvent from './alarmEvent'
methods:{ methods:{
alarmevent(data){ alarmevent(data){
//移动地图 //移动地图
this.$ref.map.movemap(data) this.$refs.map.movemap(data)
//播放视频
this.playurl = data.playurl
this.$ref.ocx.videoPlay()
}, },
getTrafficSnap(){ getTrafficSnap(){
this.$api.show.getTrafficSnap().then(res => { this.$api.show.getTrafficSnap().then(res => {
this.snapData = res; this.snapData = res;
...@@ -198,7 +205,6 @@ import alarmEvent from './alarmEvent' ...@@ -198,7 +205,6 @@ import alarmEvent from './alarmEvent'
created(){ created(){
this.getTrafficSnap() this.getTrafficSnap()
this.getKeyVehicle() this.getKeyVehicle()
} }
} }
</script> </script>
......
src/views/trafficShow/map.vue
<template> <template>
<div> <div>
<div id="map" class="maps"> <div id="map" class="maps"></div>
<div id="popup" class="ol-popup">
</div> <a href="#" id="popup-closer" class="ol-popup-closer" @click="closepopup"></a>
<div id="t-popup-content">SFDSFA</div>
</div>
</div> </div>
</template> </template>
...@@ -45,6 +47,10 @@ import GeoJSON from "ol/format/GeoJSON.js"; ...@@ -45,6 +47,10 @@ import GeoJSON from "ol/format/GeoJSON.js";
import "ol/ol.css"; //地图默认样式 import "ol/ol.css"; //地图默认样式
var map = ""; var map = "";
var Views = ""; var Views = "";
var container = '';
var content = "";
var closer = "";
var overlay = "";
export default { export default {
data() { data() {
return {}; return {};
...@@ -145,24 +151,41 @@ export default { ...@@ -145,24 +151,41 @@ export default {
console.log(pixel); console.log(pixel);
//点击相机标注点 //点击相机标注点
map.forEachFeatureAtPixel(pixel, function(feature) { map.forEachFeatureAtPixel(pixel, function(feature) {
var coodinate = e.coordinate; // var coodinate = e.coordinate;
_this.unid = feature.getProperties().unid; // _this.unid = feature.getProperties().unid;
Overlay.setPosition(coodinate); // Overlay.setPosition(coodinate);
map.addOverlay(Overlay); // map.addOverlay(Overlay);
//播放视频操作
alert("视频播放")
}); });
}); });
}, },
movemap(data){ movemap(data){
let pos = [120.324447, 36.074594]
}, Views.animate({
addLayer(data) { center: pos,
var pos = data; duration: 400,
var marker = new Overlay({ zoom:14
position: pos,
positioning: "center-center",
element: document.getElementById("canvasDiv")
}); });
map.addOverlay(marker); this.addLayer(pos)
},
closepopup(){
overlay.setPosition(undefined);
closer.blur();
return false;
},
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(overlay);
}, },
addCameraLayer(coordinate, phonetext) { addCameraLayer(coordinate, phonetext) {
let vectorSource = new VectorSource({ id: 1 }); let vectorSource = new VectorSource({ id: 1 });
...@@ -237,11 +260,15 @@ export default { ...@@ -237,11 +260,15 @@ export default {
map.addLayer(this.CameraVertorlayer); map.addLayer(this.CameraVertorlayer);
} }
}, },
mounted(){ mounted(){
setTimeout(()=>{ setTimeout(()=>{
this.InitMap(); this.InitMap();
},300) },300)
}, container = document.getElementById('popup');
content = document.getElementById('t-popup-content');
closer = document.getElementById('popup-closer');
},
}; };
</script> </script>
...@@ -262,62 +289,49 @@ export default { ...@@ -262,62 +289,49 @@ export default {
z-index :10; z-index :10;
opacity :0.5; opacity :0.5;
} }
.ol-popup {
position: absolute; .ol-popup {
background-color: #eeeeee; position: absolute;
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); background-color: white;
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
border-radius: 10px; padding: 15px;
border: 1px solid #cccccc; border-radius: 10px;
bottom: 12px; border: 1px solid #cccccc;
left: -50px; bottom: 12px;
min-width: 280px; left: -50px;
} min-width: 280px;
}
.ol-popup:after, .ol-popup:after, .ol-popup:before {
.ol-popup:before { top: 100%;
top: 100%; border: solid transparent;
border: solid transparent; content: " ";
content: " "; height: 0;
height: 0; width: 0;
width: 0; position: absolute;
position: absolute; pointer-events: none;
pointer-events: none; }
} .ol-popup:after {
border-top-color: white;
.ol-popup:after { border-width: 10px;
border-top-color: #eeeeee; left: 48px;
border-width: 10px; margin-left: -10px;
left: 48px; }
margin-left: -10px; .ol-popup:before {
} border-top-color: #cccccc;
border-width: 11px;
.ol-popup:before { left: 48px;
border-top-color: #cccccc; margin-left: -11px;
border-width: 11px; }
left: 48px; .ol-popup-closer {
margin-left: -11px; text-decoration: none;
} position: absolute;
top: 2px;
.ol-popup-closer { right: 8px;
text-decoration: none; }
position: absolute; .ol-popup-closer:after {
top: 2px; content: "✖";
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 { .pop-img-box {
float: left; float: left;
height: 100px; height: 100px;
......
vue.config.js
module.exports = { module.exports = {
lintOnSave: false, lintOnSave: false,
publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
// ... // ...
css: { css: {
loaderOptions: { loaderOptions: {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!