视频自动播放以及部门下监控设备的查看

This commit is contained in:
shijing 2023-06-09 10:12:59 +08:00
parent f96cde3f00
commit fe48ad17dd
8 changed files with 4903 additions and 284 deletions

View File

@ -59,31 +59,17 @@ const routes = [
}, },
"component": "bigScreen" "component": "bigScreen"
}, },
{
// { "path": "/track",
// "path": "/bigScreen", "name": "track",
// "name": "bigScreen", "meta": {
// "meta": { "title": "轨迹追踪",
// "title": "驾驶舱", "icon": "el-icon-position",
// "icon": "el-icon-position", "fullpage": true,
// "perms": ["bigScreen"], "hidden": true,
// "type": "link", },
// "fullpage": true, "component": "bigScreen/track"
// }, },
// "component": "bigScreen"
// },
// {
// "path": "/bigScreen",
// "name": "bigScreens",
// "meta": {
// "title": "bigScreens",
// "icon": "el-icon-position",
// "perms": ["bigScreen"],
// "fullpage": true,
// "hidden":true,
// },
// "component": "bigScreen"
// },
{ {
"name": "userCenter", "name": "userCenter",
"path": "/usercenter", "path": "/usercenter",

130
src/utils/checkIdent.js Normal file
View File

@ -0,0 +1,130 @@
const validateIdent = {
aIdentityCode_City: { // 城市代码列表
11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林",
23: "黑龙江 ", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西",
37: "山东", 41: "河南", 42: "湖北 ", 43: "湖南", 44: "广东", 45: "广西", 46: "海南",
50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏 ", 61: "陕西", 62: "甘肃",
63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外 "
},
IdentityCode_isCardNo(card) {//检查号码是否符合规范,包括长度,类型
var reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/; //身份证号码为15位或者18位15位时全为数字18位前17位为数字最后一位是校验位可能为数字或字符X
if (reg.test(card) === false) {
return false;
}
return true;
},
IdentityCode_checkProvince(card) { //取身份证前两位,校验省份
var province = card.substr(0, 2);
if (validateIdent.aIdentityCode_City[province] == undefined) {
return false;
}
return true;
},
IdentityCode_checkBirthday(card) { //检查生日是否正确15位以'19'年份来进行补齐。
var len = card.length;
//身份证15位时次序为省3位3位2位2位2位校验位3位皆为数字
if (len == '15') {
var re_fifteen = /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/;
var arr_data = card.match(re_fifteen); // 正则取号码内所含出年月日数据
var year = arr_data[2];
var month = arr_data[3];
var day = arr_data[4];
var birthday = new Date('19' + year + '/' + month + '/' + day);
return validateIdent.IdentityCode_verifyBirthday('19' + year, month, day, birthday);
}
//身份证18位时次序为省3位3位4位2位2位校验位4位校验位末尾可能为X
if (len == '18') {
var re_eighteen = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;
var arr_data = card.match(re_eighteen); // 正则取号码内所含出年月日数据
var year = arr_data[2];
var month = arr_data[3];
var day = arr_data[4];
var birthday = new Date(year + '/' + month + '/' + day);
return validateIdent.IdentityCode_verifyBirthday(year, month, day, birthday);
}
return false;
},
IdentityCode_verifyBirthday(year, month, day, birthday) {//校验日期 15位以'19'年份来进行补齐。
var now = new Date();
var now_year = now.getFullYear();
//年月日是否合理
if (birthday.getFullYear() == year
&& (birthday.getMonth() + 1) == month
&& birthday.getDate() == day) {
//判断年份的范围3岁到150岁之间)
var time = now_year - year;
if (time >= 3 && time <= 150) {
return true;
}
return false;
}
return false;
},
IdentityCode_checkParity(card) { //校验位的检测
card = validateIdent.IdentityCode_changeFivteenToEighteen(card); // 15位转18位
var len = card.length;
if (len == '18') {
var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
var cardTemp = 0, i, valnum;
for (i = 0; i < 17; i++) {
cardTemp += card.substr(i, 1) * arrInt[i];
}
valnum = arrCh[cardTemp % 11];
if (valnum == card.substr(17, 1)) {
return true;
}
return false;
}
return false;
},
IdentityCode_changeFivteenToEighteen(card) { //15位转18位身份证号
if (card.length == '15') {
var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
var cardTemp = 0, i;
card = card.substr(0, 6) + '19' + card.substr(6, card.length - 6);
for (i = 0; i < 17; i++) {
cardTemp += card.substr(i, 1) * arrInt[i];
}
card += arrCh[cardTemp % 11];
return card;
}
return card;
},
IdentityCodeValid(card) {// 身份证号码检验主入口
let pass = true;
let sex = ''
//是否为空
if (pass && card === '')
pass = false;
//校验长度,类型
if (pass && validateIdent.IdentityCode_isCardNo(card) === false)
pass = false;
//检查省份
if (pass && validateIdent.IdentityCode_checkProvince(card) === false)
pass = false;
//校验生日
if (pass && validateIdent.IdentityCode_checkBirthday(card) === false)
pass = false;
//检验位的检测
// if (pass && validateIdent.IdentityCode_checkParity(card) === false)
// pass = false;
if (pass) {
var iCard = validateIdent.IdentityCode_changeFivteenToEighteen(card);
if (parseInt(iCard.charAt(16)) % 2 == 0) {
sex = "0"; // 女生
} else {
sex = "1"; // 男生
}
return true
} else {
return false
}
}
}
export default validateIdent.IdentityCodeValid //导出

View File

@ -271,7 +271,7 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-table class="bigScreenTable" :data="areaVideo" v-if="areaShowType==2" :height="300"> <el-table class="bigScreenTable" :data="areaVideo" v-if="areaShowType==2" :height="300" @row-click="showVchannel">
<el-table-column label="通道名称" prop="name"></el-table-column> <el-table-column label="通道名称" prop="name"></el-table-column>
<el-table-column label="所在区域" prop="area_name"></el-table-column> <el-table-column label="所在区域" prop="area_name"></el-table-column>
<el-table-column label="code" prop="code"></el-table-column> <el-table-column label="code" prop="code"></el-table-column>
@ -559,6 +559,19 @@
>{{ item.cate_name }} >{{ item.cate_name }}
</el-tag> </el-tag>
</div> </div>
<div class="simple-title">
<div>监控设备</div>
</div>
<div class="job-list" v-if="screenJobItem.vchannels_.length>0">
<el-tag
v-for="item in screenJobItem.vchannels_"
:key="item.id"
@click="showVchannel(item)"
style="margin-right: 10px;margin-left:0"
>{{ item.name }}
</el-tag>
</div>
<div class="job-list" v-else style="color:#ffffff">该作业没有选择监控设备</div>
</div> </div>
</div> </div>
<!--区域--> <!--区域-->
@ -982,14 +995,13 @@ export default {
newEle2.autoplay = true; newEle2.autoplay = true;
newEle2.id = item.markers[0].id + 'videoPlayer'; newEle2.id = item.markers[0].id + 'videoPlayer';
newEle2.name = item.markers[0].id + 'videoPlayer'; newEle2.name = item.markers[0].id + 'videoPlayer';
newEle2.setAttribute("style", "width: 327px;height:183px;background:url('/img/v_mask.png') no-repeat;background-size: 100% 100%;"); // newEle2.setAttribute("style", "width: 327px;height:183px;background:url('/img/v_mask.png') no-repeat;background-size: 100% 100%;");
// dom dom // dom dom
otest.appendChild(newEle); otest.appendChild(newEle);
otest.appendChild(newEle2); otest.appendChild(newEle2);
let flvPlayer = null,URLS=null; let flvPlayer = null,URLS=null;
newEle2.onclick = () => { newEle2.setAttribute("style", "width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;");
newEle2.setAttribute("style", "width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;"); this.$API.am.video.item.req(this.params).then(res => {
this.$API.am.video.item.req(this.params).then(res => {
console.log(res); console.log(res);
this.url = res.url; this.url = res.url;
URLS = res.url.replace('192.168.10.253',sysConfig.VUE_APP_VIDEOHOST); URLS = res.url.replace('192.168.10.253',sysConfig.VUE_APP_VIDEOHOST);
@ -1014,7 +1026,6 @@ export default {
flvPlayer.play(); flvPlayer.play();
} }
}) })
};
close.onclick = () => { close.onclick = () => {
let nodeMark = document.getElementById(item.markers[0].id); let nodeMark = document.getElementById(item.markers[0].id);
nodeMark.remove(); nodeMark.remove();
@ -1028,7 +1039,6 @@ export default {
// //
that.screenUserItem = item.properties.get("employee"); that.screenUserItem = item.properties.get("employee");
that.screenUser = true; that.screenUser = true;
// debugger;
window.map.flyToMarker(that.userMarker[that.screenUserItem.mac], { window.map.flyToMarker(that.userMarker[that.screenUserItem.mac], {
duration: 1000, duration: 1000,
range: 200 range: 200
@ -1037,7 +1047,6 @@ export default {
} }
} else if (type === 'Symbol(polygonmarker)') { } else if (type === 'Symbol(polygonmarker)') {
// //
debugger;
console.log(item) console.log(item)
let workId = item.properties.get("workId"); let workId = item.properties.get("workId");
if(workId){ if(workId){
@ -1072,7 +1081,6 @@ export default {
let height1 = document.getElementsByClassName('cockpit-count')[0].clientHeight; let height1 = document.getElementsByClassName('cockpit-count')[0].clientHeight;
let height2 = document.getElementsByClassName('cockpit-alarm')[0].clientHeight; let height2 = document.getElementsByClassName('cockpit-alarm')[0].clientHeight;
let height3 = document.getElementsByClassName('area-simple-title')[0].clientHeight; let height3 = document.getElementsByClassName('area-simple-title')[0].clientHeight;
// debugger;
let domHeight = pageHeight - height1 - 310 - 84; let domHeight = pageHeight - height1 - 310 - 84;
let areaTableHeight = domHeight - height3 - 50; let areaTableHeight = domHeight - height3 - 50;
this.areaTableHeight = areaTableHeight; this.areaTableHeight = areaTableHeight;
@ -1099,7 +1107,6 @@ export default {
}, },
methods: { methods: {
loadScript(id, url, callback) { loadScript(id, url, callback) {
debugger;
let that = this; let that = this;
//idjs //idjs
if (document.querySelector(`#${id}`)) { if (document.querySelector(`#${id}`)) {
@ -1398,7 +1405,6 @@ export default {
}, },
areaDetailClose(){ areaDetailClose(){
let that = this; let that = this;
debugger;
that.areaDetail = false; that.areaDetail = false;
if(that.singleAreaMaskerLayer){ if(that.singleAreaMaskerLayer){
that.singleAreaMaskerLayer.show = false; that.singleAreaMaskerLayer.show = false;
@ -1464,11 +1470,9 @@ export default {
// //
areaOperationRowClick(row){ areaOperationRowClick(row){
let that = this; let that = this;
debugger;
console.log(row); console.log(row);
that.screenJobItem = row; that.screenJobItem = row;
that.$API.opm.opl.list.req({ operation: row.id}).then((res) => { that.$API.opm.opl.list.req({ operation: row.id}).then((res) => {
debugger;
console.log(res) console.log(res)
that.screenJobItem.cates_ = res.results; that.screenJobItem.cates_ = res.results;
that.screenOperation = true; that.screenOperation = true;
@ -1586,7 +1590,6 @@ export default {
} else { } else {
that.dangerList = res.results; that.dangerList = res.results;
debugger;
that.showPolygonMarkers(that.dangerList); that.showPolygonMarkers(that.dangerList);
} }
}) })
@ -1978,7 +1981,6 @@ export default {
showPolygonMarkers(data) { showPolygonMarkers(data) {
let that = this; let that = this;
if(data.length>0){ if(data.length>0){
debugger;
data.forEach(item => { data.forEach(item => {
let polygonMarker = null; let polygonMarker = null;
let areaWork = that.areaList.filter(area=>{ let areaWork = that.areaList.filter(area=>{
@ -2244,100 +2246,113 @@ export default {
}, },
// //
userLineTrack(){ userLineTrack(){
debugger;
let that = this; let that = this;
that.lineTracking = true; let obj = {};
that.userMaskerLayer.show = false; obj.id=that.screenUserItem.id;
let nowTime = new Date().getTime(); obj.mac=that.screenUserItem.mac;
let preTime = nowTime-60*60 * 1000; obj.name=that.screenUserItem.name;
let params = { obj.type=that.screenUserItem.type;
url:"/api/datacenter/user/historypathV2", obj.floorNo=that.screenUserItem.location.xx_detail.floorNo;
method:"post", obj.longitude=that.screenUserItem.location.xx_detail.longitude;
json:{ obj.latitude=that.screenUserItem.location.xx_detail.latitude;
mac: that.screenUserItem.mac, localStorage.setItem('trackItem',JSON.stringify(obj))
startTime: preTime, this.$router.push({
endTime: nowTime, name: "track"
locationType: "real" });
} // that.lineTracking = true;
}; // that.userMaskerLayer.show = false;
let points0 = []; // let nowTime = new Date().getTime();
that.$API.third.blt.xunxiCommon.req(params).then(res => { // let preTime = nowTime-60*60 * 1000;
if (res.err_msg) { } else { // let params = {
let points = []; // url:"/api/datacenter/user/historypathV2",
res.forEach(item=>{ // method:"post",
item.points.forEach(poi=>{ // json:{
points.push(poi) // mac: that.screenUserItem.mac,
}) // startTime: preTime,
}) // endTime: nowTime,
points.forEach(item=>{ // locationType: "real"
let obj=new Object(); // }
obj.x=item.longitude; // };
obj.y=item.latitude; // let points0 = [];
obj.z=item.z; // that.$API.third.blt.xunxiCommon.req(params).then(res => {
points0.push(obj); // if (res.err_msg) { } else {
}); // let points = [];
if(points0.length>0){ // res.forEach(item=>{
that.line1 = null; // item.points.forEach(poi=>{
if (that.line1==null) { // points.push(poi)
that.line1 = new jsmap.JSLineMarker({ // })
position: points0, // })
floorId: 1, // points.forEach(item=>{
lineType: jsmap.JSLineType.ARROW, // let obj=new Object();
color: '#0000ff', // obj.x=item.longitude;
width: 10, // obj.y=item.latitude;
depthTest: true // obj.z=item.z;
}); // points0.push(obj);
window.map.addMarker(that.line1); // });
} // if(points0.length>0){
that.trackMarker = new jsmap.JSIconTextMarker({ // that.line1 = null;
id: '1', // if (that.line1==null) {
position: points0[0], // that.line1 = new jsmap.JSLineMarker({
image: "/img/visitor.png", // position: points0,
rotation: { // floorId: 1,
rx: 0, // lineType: jsmap.JSLineType.ARROW,
ry: 0, // color: '#0000ff',
rz: -90 // width: 10,
}, // depthTest: true
text: that.screenUserItem.name, // });
fontColor: '#0000ff', // window.map.addMarker(that.line1);
font: '14px 微软雅黑', // }
backgroundColor: 'rgba(112,253,147,0.5)', // that.trackMarker = new jsmap.JSIconTextMarker({
backgroundRadius: 5, // id: '1',
textOffsetInMeter: 1.6, // position: points0[0],
backgroundStrokeColor: 'rgb(255,255,255)', // image: "/img/visitor.png",
modelAnimate: { // rotation: {
multiplier: 2, // rx: 0,
}, // ry: 0,
scale: 1, // rz: -90
properties: { // },
name: 'trackMarker' // text: that.screenUserItem.name,
}, // fontColor: '#0000ff',
callback: (marker) => { // font: '14px ',
window.map.trackMarker(marker, { // backgroundColor: 'rgba(112,253,147,0.5)',
range: 100, // backgroundRadius: 5,
tilt: 60, // textOffsetInMeter: 1.6,
rotate: 310 // backgroundStrokeColor: 'rgb(255,255,255)',
}); // modelAnimate: {
for (let i = 1; i < points0.length; i++) { // multiplier: 2,
setTimeout(() => { // },
window.map.updateMarkerPosition(marker, { // scale: 1,
position: points0[i], // properties: {
animate: { // name: 'trackMarker'
duration: 1000, // },
update: (pos) => { // callback: (marker) => {
that.line1.trace(pos) // window.map.trackMarker(marker, {
} // range: 100,
} // tilt: 60,
}); // rotate: 310
}, i * 1000); // });
} // for (let i = 1; i < points0.length; i++) {
} // setTimeout(() => {
}); // window.map.updateMarkerPosition(marker, {
window.map.addMarker(that.trackMarker); // position: points0[i],
}else{ // animate: {
that.$message.error('暂无运动痕迹'); // duration: 1000,
} // update: (pos) => {
} // that.line1.trace(pos)
}) // }
// }
// });
// }, i * 1000);
// }
// }
// });
// window.map.addMarker(that.trackMarker);
// }else{
// that.$message.error('');
// }
// }
// })
}, },
userLineTrackCancel(){ userLineTrackCancel(){
window.location.reload(); window.location.reload();
@ -2382,7 +2397,7 @@ export default {
// //
showVchannel(item){ showVchannel(item){
let that = this; let that = this;
debugger; // debugger;
console.log(item) console.log(item)
that.channelCode = item.code; that.channelCode = item.code;
that.channelName = item.name; that.channelName = item.name;

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,422 @@
<template>
<div class="screen-main">
<!--头部展示-->
<div class="screen-header">
<div class="timeWrap">
<el-date-picker
v-model="form.startTime"
type="datetime"
placeholder="选择开始时间"
:default-time="defaultStartTime"
/>
<el-date-picker
v-model="form.endTime"
type="datetime"
placeholder="选择结束时间"
:default-time="defaultEndTime"
/>
<el-button class="searchBtn" @click="trackSearch">查询</el-button>
<el-button class="searchBtn" @click="userLineTrackCancel">取消跟踪</el-button>
</div>
<!-- <div class="header-left-bg">曲阳金隅智能安全管控系统</div> -->
<div class="header-right-action">
<div class="right-action-clock">
<span class="action-time">{{ currentDay }}</span>
<span class="action-time">{{ currentWeek }} </span>
<span class="action-time">{{ currentTime }}</span>
</div>
</div>
</div>
<!--地图-->
<div id='mapContainer'></div>
</div>
</template>
<script>
export default {
data() {
return {
mac:null,
type:null,
name:'',
line1:null,
timeNow:'',
currentDay: '',
currentTime: '',
currentWeek: '',
todayDate:'',
timerTime:null,
userMarker:null,
userMaskerLayer:null,
defaultStartTime:new Date(2000, 1, 1, 8, 0, 0),
defaultEndTime:new Date(2000, 1, 1, 11, 0, 0),
form:{
endTime:'',
startTime:''
}
}
},
mounted() {
let that = this;
that.item = JSON.parse(localStorage.getItem('trackItem'))
console.log(that.item)
let date = new Date();
that.timeNow = date.getDay();
that.todayDate = that.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd');
that.showTime();
that.timerTime = setInterval(() => {
that.showTime();
}, 1000);
let host = window.location.host;
let jsUrl = '/jsmap/jsmap.js';
that.loadScript('mapId',jsUrl, () => {
window.map = new jsmap.JSMap({
mapType: jsmap.JSMapType.MAP_3D,
container: 'mapContainer',
mapServerURL: 'data/map',
enableShadows: false, // false
enableLighting: false, // false
showBuildingMarker: true,
// showNavigationDisplay: true,
mapScaleLevelRange: [16, 23],// 1623,[1,24]
floorControlOptions: {
floorHeight: 20,//
position: jsmap.JSControlPosition.RIGHT_TOP,//
offset: {
x: 10,
y: 200,
}//
},
imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
backgroundColor: '#3798ff', //
viewOptions: {
//
center: { x: 114.63059258861512, y: 38.81407163905287, z: 1 },
// center: {x:120,y:30,z:10},
//m
distance: 550,
// °
rotate: 0,
//°
tilt: 45,
}
});
window.map.openMapById('0000');
window.map.on('loadComplete', e => {
let compassControl = new jsmap.JSCompassControl({
position: jsmap.JSControlPosition.LEFT_TOP,
offset: {
x: 20,
y: 50
}
});
window.map.addControl(compassControl);
let zoomControl = new jsmap.JSZoomControl({
position: jsmap.JSControlPosition.LEFT_TOP,
offset: {
x: 50,
y: 5
}
});
window.map.addControl(zoomControl);
that.userMaskerLayers();
});
})
},
beforeUnmount(){
window.map.destroy();
window.map = null;
},
methods: {
loadScript(id, url, callback) {
debugger;
let that = this;
//idjs
if (document.querySelector(`#${id}`)) {
that.ElLoading = null;
callback && callback();
return;
}else{
that.ElLoading = this.$loading({
lock: true,
text: '地图资源加载中...',
background: 'rgba(0, 0, 0, 0)',
})
}
// script
const script = document.createElement('script');
script.src = url;
//id
script.setAttribute('id', id);
//script
const firstScript = document.getElementsByTagName('script')[0];
//script BODY,bodyscriptjs
firstScript.parentNode.insertBefore(script, firstScript);
//script
script.onload = script.onreadystatechange = function() {
that.ElLoading.close();
//
if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
callback && callback()
}
};
},
//
showTime() {
this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss');
this.currentWeek = this.$TOOL.dateFormat(new Date(), 'week');
this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
},
//
showUserDetail() {
this.$API.hrm.employee.item.req(this.screenUserItem.id).then(res => {
this.screenUserItemDetail = res;
})
},
//layer
userMaskerLayers() {//
let that = this;
that.userMaskerLayer = new jsmap.JSIconTextMarkerLayer({
minimumLevel: 3,
maxmumLevel: 22,
show: false
});
window.map.addLayer(that.userMaskerLayer);
let endTime = new Date().getTime();
let startTime = endTime-60*60 * 1000;
that.userLineTrack(startTime,endTime);
},
//
userLineTrack(startTime,endTime){
let that = this;
that.userMaskerLayer.show = false;
let params = {
url:"/api/datacenter/user/historypathV2",
method:"post",
json:{
mac: that.item.mac,
startTime: startTime,
endTime: endTime,
locationType: "real"
}
};
let points0 = [];
that.$API.third.blt.xunxiCommon.req(params).then(res => {
if (res.err_msg) { } else {
let points = [];
res.forEach(item=>{
item.points.forEach(poi=>{
points.push(poi)
})
})
points.forEach(item=>{
let obj=new Object();
obj.x=item.longitude;
obj.y=item.latitude;
obj.z=item.z;
points0.push(obj);
});
if(points0.length>0){
that.line1 = null;
if (that.line1==null) {
that.line1 = new jsmap.JSLineMarker({
position: points0,
floorId: 1,
lineType: jsmap.JSLineType.ARROW,
color: '#0000ff',
width: 10,
depthTest: true
});
window.map.addMarker(that.line1);
}
let trackItem = that.item;
//
let userImage = '';
if (trackItem.type === 'employee') {
userImage = "/img/employee.png"
}else if (trackItem.type === 'driver') {
userImage = "/img/driver.png"
} else if (trackItem.type === 'remployee') {
userImage = "/img/driver.png"
}else {
userImage = "/img/visitor.png"
}
that.trackMarker = new jsmap.JSIconTextMarker({
id: '1',
position: points0[0],
image: userImage,
rotation: {
rx: 0,
ry: 0,
rz: -90
},
text: trackItem.name,
fontColor: '#0000ff',
font: '14px 微软雅黑',
backgroundColor: 'rgba(112,253,147,0.5)',
backgroundRadius: 5,
textOffsetInMeter: 1.6,
backgroundStrokeColor: 'rgb(255,255,255)',
modelAnimate: {
multiplier: 2,
},
scale: 1,
properties: {
name: 'trackMarker'
},
callback: (marker) => {
window.map.trackMarker(marker, {
range: 100,
tilt: 60,
rotate: 310
});
for (let i = 1; i < points0.length; i++) {
setTimeout(() => {
window.map.updateMarkerPosition(marker, {
position: points0[i],
animate: {
duration: 1000,
update: (pos) => {
that.line1.trace(pos)
}
}
});
}, i * 1000);
}
}
});
window.map.addMarker(that.trackMarker);
}else{
that.$message.error('暂无运动痕迹');
}
}
})
},
trackSearch(){
let startTime = new Date(this.form.startTime)
let endTime = new Date(this.form.endTime)
this.userLineTrack(startTime,endTime);
},
userLineTrackClear(){
let that = this;
window.map.cancelTrack();
window.map.removeMarker(that.trackMarker);
window.map.removeAllPointMarker();
window.map.removeMarker(that.line1);
window.map.removeAllLineMarker();
that.trackMarker = null;
that.line1 = null;
},
userLineTrackCancel(){
this.$router.push({
name: "bigScreen"
});
},
},
unmounted() {
// window.map.destroy();
window.map = null;
},
}
</script>
<style lang="scss">
.screen-main {
width: 100%;
height: 100%;
.screen-header {
width: 100% !important;
height: 84px !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
background: linear-gradient(0deg, rgba(0, 113, 155, 0) 0, #00455f) !important;
z-index: 2 !important;
transition: all .5s linear !important;
.timeWrap{
width: 100% !important;
// position: absolute !important;
// top: 84px !important;
z-index: 2 !important;
display: flex;
align-items: self-end;
.searchBtn{
background-color: aquamarine;
}
}
.header-left-bg {
height: 60px;
position: absolute;
left: 18px;
top: 12px;
font-size: 40px;
font-weight: 700;
color: #fff;
}
.header-right-action {
position: absolute;
top: 10px;
right: 18px;
display: flex;
align-items: center;
.right-action-clock {
:before {
content: " ";
display: inline;
position: absolute;
left: -24px;
top: 9px;
width: 16px;
height: 16px;
/*background: url(/img/screen5/clock.png) no-repeat;*/
background-size: 100% 100%;
}
.action-time {
width: 56px;
height: 19px;
font-size: 14px;
font-weight: 400;
color: #fff;
position: relative;
margin-right: 20px;
}
}
}
}
}
#mapContainer {
width: 100%;
height: 100%;
background-color: #49a1ff;
}
[class*=" el-icon-"],
[class^=el-icon-] {
font-family: element-icons !important;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: baseline;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>

View File

@ -150,6 +150,7 @@
</template> </template>
<script> <script>
import IdentityCodeValid from '@/utils/checkIdent'
import {genTree} from "@/utils/verificate"; import {genTree} from "@/utils/verificate";
const defaultForm = { const defaultForm = {
id: null, id: null,
@ -270,33 +271,41 @@
submit() { submit() {
this.$refs.dialogForm.validate((valid) => { this.$refs.dialogForm.validate((valid) => {
if (valid) { if (valid) {
this.isSaveing = true; this.form.id_number=this.form.id_number.toUpperCase();
if (this.mode === 'add') { let ide = IdentityCodeValid( this.form.id_number )// true or false
this.$API.hrm.employee.create.req(this.form) if(ide){
.then(res => { debugger;
this.isSaveing = true;
if (this.mode === 'add') {
this.$API.hrm.employee.create.req(this.form)
.then(res => {
this.isSaveing = false;
this.visible = false;
this.$emit("success", this.form, this.mode);
this.$message.success("操作成功");
return res
}).catch(err => {
this.isSaveing = false; this.isSaveing = false;
this.visible = false; return err
this.$emit("success", this.form, this.mode); })
this.$message.success("操作成功"); } else {
return res this.$API.hrm.employee.update.req(this.form.id, this.form)
}).catch(err => { .then(res => {
this.isSaveing = false; this.isSaveing = false;
return err this.visible = false;
}) this.$emit("success", this.form, this.mode);
} else { this.$message.success("操作成功");
this.$API.hrm.employee.update.req(this.form.id, this.form) return res
.then(res => { }).catch(err => {
this.isSaveing = false; this.isSaveing = false;
this.visible = false; return err
this.$emit("success", this.form, this.mode); })
this.$message.success("操作成功"); }
return res }else{
}).catch(err => { this.$message.warning("请输入正确的身份证号");
this.isSaveing = false;
return err
})
} }
} }
}); });
}, },

View File

@ -37,39 +37,31 @@
</el-col> </el-col>
<el-col :md="24" :sm="12" :xs="24"> <el-col :md="24" :sm="12" :xs="24">
<el-form-item label="身份证号"> <el-form-item label="身份证号">
<el-input v-model="form.id_number" type="text" clearable :disabled="mode != 'add'"></el-input> <el-input v-model="form.id_number" type="text" clearable :disabled="mode == 'show'"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :md="24" :sm="12" :xs="24" v-if="rparty_show">
<el-col :md="24" :sm="12" :xs="24" v-if="rparty_show">
<el-form-item label="相关方"> <el-form-item label="相关方">
<el-select v-model="form.rparty" style="width: 100%" :disabled="mode != 'add'"> <el-select v-model="form.rparty" style="width: 100%" :disabled="mode != 'add'">
<el-option <el-option
v-for="item in rpartyOptions" v-for="item in rpartyOptions"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
:value="item.id" :value="item.id"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :md="24" :sm="12" :xs="24"> <el-col :md="24" :sm="12" :xs="24">
<el-form-item label="证件照"> <el-form-item label="证件照">
<sc-upload v-model="form.photo" :modelValue="form.photo" title="证件照"></sc-upload> <sc-upload v-model="form.photo" :modelValue="form.photo" title="证件照"></sc-upload>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</el-main> </el-main>
<el-footer> <el-footer>
<el-button type="primary" :loading="isSaveing" @click="submit" <el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
>保存</el-button
>
<el-button @click="visible = false">取消</el-button> <el-button @click="visible = false">取消</el-button>
</el-footer> </el-footer>
</el-container> </el-container>
@ -77,6 +69,7 @@
</template> </template>
<script> <script>
import IdentityCodeValid from '@/utils/checkIdent'
import {genTree} from "@/utils/verificate"; import {genTree} from "@/utils/verificate";
export default { export default {
emits: ["success", "closed"], emits: ["success", "closed"],
@ -127,26 +120,32 @@ export default {
submit() { submit() {
this.$refs.dialogForm.validate(async (valid) => { this.$refs.dialogForm.validate(async (valid) => {
if (valid) { if (valid) {
this.isSaveing = true; this.form.id_number=this.form.id_number.toUpperCase();
try { let ide = IdentityCodeValid( this.form.id_number )// true or false
var res; if(ide){
if (this.mode == "add") { this.isSaveing = true;
res = await this.$API.rpm.remployee.create.req(this.form); try {
} else if (this.mode == "edit") { var res;
res = await this.$API.rpm.remployee.update.req( if (this.mode == "add") {
this.form.id, res = await this.$API.rpm.remployee.create.req(this.form);
this.form } else if (this.mode == "edit") {
); res = await this.$API.rpm.remployee.update.req(
this.form.id,
this.form
);
}
this.isSaveing = false;
this.$emit("success", this.form, this.mode);
this.visible = false;
this.$message.success("操作成功");
return res;
} catch (err) {
//
this.isSaveing = false;
return err;
} }
this.isSaveing = false; }else{
this.$emit("success", this.form, this.mode); this.$message.warning("请输入正确的身份证号");
this.visible = false;
this.$message.success("操作成功");
return res;
} catch (err) {
//
this.isSaveing = false;
return err;
} }
} }
}); });

View File

@ -101,8 +101,8 @@
></el-input> ></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :md="24" :sm="12" :xs="24" prop="photo"> <el-col :md="24" :sm="12" :xs="24">
<el-form-item label="上传证件照"> <el-form-item label="上传证件照" prop="photo">
<sc-upload v-model="form.photo" title="证件照"></sc-upload> <sc-upload v-model="form.photo" title="证件照"></sc-upload>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -114,96 +114,106 @@
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
const defaultform = { id: "", name: "", phone: "", id_number: "" }; import IdentityCodeValid from '@/utils/checkIdent'
export default { const defaultform = { id: "", name: "", phone: "", id_number: "" };
name: "certificate", export default {
components: {}, name: "certificate",
data() { components: {},
return { data() {
form: defaultform, return {
// form: defaultform,
rules: { //
rules: {
name: [{ required: true, message: "请输入姓名" }],
name: [{ required: true, message: "请输入姓名" }], phone: [{ required: true, message: "请输入手机号" }],
id_number: [{ required: true, message: "请输入身份证号" }],
}, photo: [{ required: true, message: "请上传" }],
dialogcart: false, },
apiObj: this.$API.vm.visitor.list, dialogcart: false,
query: {}, apiObj: this.$API.vm.visitor.list,
selection: [], query: {},
search: { selection: [],
keyword: null, search: {
}, keyword: null,
}; },
}, };
mounted() {
// this.getvisitorlist();
},
methods: {
handleForm(type, row) {
if (type === "add") {
this.dialogcart = true;
this.form = Object.assign({}, defaultform);
} else {
this.dialogcart = true;
this.form = row;
}
}, },
//访 mounted() {
// getvisitorlist() { // this.getvisitorlist();
// this.$API.vm.visitor.list.req({ page: 0 }).then((res) => { },
// this.apiObj = res; methods: {
// }); handleForm(type, row) {
// }, if (type === "add") {
//访 this.dialogcart = true;
submitcert() { this.form = Object.assign({}, defaultform);
this.form.employee = this.$route.query.id;
this.$refs.dialogForm.validate((valid) => {
if (this.form.id == "") {
this.$API.vm.visitor.create
.req(this.form)
.then((res) => {
this.$message.success("创建成功");
this.dialogcart = false;
this.$refs.table.refresh();
return res;
})
.catch((err) => {
return err;
});
} else { } else {
this.$API.vm.visitor.update this.dialogcart = true;
.req(this.form.id, this.form) this.form = row;
.then((res) => {
this.$message.success("修改成功");
this.dialogcart = false;
this.$refs.table.refresh();
return res;
})
.catch((err) => {
return err;
});
} }
}); },
}, //访
// // getvisitorlist() {
delVisitor(row) { // this.$API.vm.visitor.list.req({ page: 0 }).then((res) => {
this.$API.vm.visitor.delete // this.apiObj = res;
.req(row.id) // });
.then((res) => { // },
this.$message.success("访客删除成功"); //访
submitcert() {
return res; this.form.employee = this.$route.query.id;
}) this.$refs.dialogForm.validate((valid) => {
.catch((err) => { if(valid){
return err; debugger;
this.form.id_number=this.form.id_number.toUpperCase();
let ide = IdentityCodeValid( this.form.id_number )// true or false
if(ide){
if (this.form.id == "") {
this.$API.vm.visitor.create
.req(this.form)
.then((res) => {
this.$message.success("创建成功");
this.dialogcart = false;
this.$refs.table.refresh();
return res;
})
.catch((err) => {
return err;
});
} else {
this.$API.vm.visitor.update
.req(this.form.id, this.form)
.then((res) => {
this.$message.success("修改成功");
this.dialogcart = false;
this.$refs.table.refresh();
return res;
})
.catch((err) => {
return err;
});
}
}else{
this.$message.warning("请输入正确的身份证号");
}
}
}); });
},
//
delVisitor(row) {
this.$API.vm.visitor.delete
.req(row.id)
.then((res) => {
this.$message.success("访客删除成功");
this.$refs.table.refresh();
return res;
})
.catch((err) => {
return err;
});
},
handleQuery() {
this.$refs.table.queryData(this.query)
},
}, },
handleQuery() { };
this.$refs.table.queryData(this.query)
},
},
};
</script> </script>