Skip to content

卡
卡车调度系统
Commit 21f74085 authored by SQL_Mou's avatar SQL_Mou
Browse files
Options

Merge branch 'master' of http://h.gemho.cn:7099/caicaicai/truckDispatching

parents 160c567a 4f37f39c
Hide whitespace changes
Inline Side-by-side
Showing with 267 additions and 346 deletions
src/components/ezuikit/EZUIKitJs.vue
View file @ 21f74085
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
卡车调度系统矿山监控视频 卡车调度系统矿山监控视频
</el-header> </el-header>
<el-container> <el-container>
<el-aside width="230px" style="height: 79vh"> <el-aside width="230px" style="height: 82vh">
<el-tree <el-tree
:data="videoData" :data="videoData"
:props="defaultProps" :props="defaultProps"
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</el-tree> </el-tree>
</el-aside> </el-aside>
<el-main id="elMain"> <el-main id="elMain" style="height: 82vh">
<div v-if="isChildren1" class="iframeList"> <div v-if="isChildren1" class="iframeList">
<div v-for="(item,index) in itemList" :key="index" class="videoChildren"> <div v-for="(item,index) in itemList" :key="index" class="videoChildren">
...@@ -410,11 +410,18 @@ export default { ...@@ -410,11 +410,18 @@ export default {
winSize(){ winSize(){
let elMain = document.getElementById('elMain'); let elMain = document.getElementById('elMain');
let elMainWight = parseInt(getComputedStyle(elMain).width) ; let elMainWight = parseInt(getComputedStyle(elMain).width) ;
// if(elMainWight > 1650){
// let twelveVideo = document.getElementsByClassName('twelveVideo');
// for(let i = 0;i < twelveVideo.length;i++){
// twelveVideo[i].width = 450;
// twelveVideo[i].height = 320;
// }
// }
if(elMainWight > 1650){ if(elMainWight > 1650){
let twelveVideo = document.getElementsByClassName('twelveVideo'); let twelveVideo = document.getElementsByClassName('twelveVideo');
for(let i = 0;i < twelveVideo.length;i++){ for(let i = 0;i < twelveVideo.length;i++){
twelveVideo[i].width = 450; twelveVideo[i].width = 390;
twelveVideo[i].height = 320; twelveVideo[i].height = 250;
} }
} }
...@@ -485,7 +492,6 @@ export default { ...@@ -485,7 +492,6 @@ export default {
background-color: white; background-color: white;
color: #333; color: #333;
text-align: center; text-align: center;
height: 79vh;
overflow:hidden; overflow:hidden;
width: 73vw; width: 73vw;
} }
......
src/components/ezuikit/carsEZUIKitJs.vue
View file @ 21f74085
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
卡车调度系统车辆监控视频 卡车调度系统车辆监控视频
</el-header> </el-header>
<el-container> <el-container>
<el-aside width="230px" style="height: 79vh"> <el-aside width="230px" style="height: 82vh">
<el-tree <el-tree
:data="videoData" :data="videoData"
:props="defaultProps" :props="defaultProps"
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</el-tree> </el-tree>
</el-aside> </el-aside>
<el-main id="elMain"> <el-main id="elMain" style="height: 82vh">
<div v-if="isChildren1" class="iframeList"> <div v-if="isChildren1" class="iframeList">
<div v-for="(item,index) in itemList" :key="index" class="videoChildren"> <div v-for="(item,index) in itemList" :key="index" class="videoChildren">
...@@ -277,8 +277,8 @@ export default { ...@@ -277,8 +277,8 @@ export default {
if(elMainWight > 1650){ if(elMainWight > 1650){
let twelveVideo = document.getElementsByClassName('twelveVideo'); let twelveVideo = document.getElementsByClassName('twelveVideo');
for(let i = 0;i < twelveVideo.length;i++){ for(let i = 0;i < twelveVideo.length;i++){
twelveVideo[i].width = 450; twelveVideo[i].width = 390;
twelveVideo[i].height = 320; twelveVideo[i].height = 250;
} }
} }
...@@ -349,7 +349,6 @@ export default { ...@@ -349,7 +349,6 @@ export default {
background-color: white; background-color: white;
color: #333; color: #333;
text-align: center; text-align: center;
height: 79vh;
overflow:hidden; overflow:hidden;
width: 73vw; width: 73vw;
} }
......
src/components/mars3d/Map.vue
View file @ 21f74085
...@@ -133,7 +133,6 @@ export default { ...@@ -133,7 +133,6 @@ export default {
let that = this; let that = this;
HttpReq.truckDispatching.screenMapSetUpQuery({size:9999}).then((res) => { HttpReq.truckDispatching.screenMapSetUpQuery({size:9999}).then((res) => {
if(true){; if(true){;
//console.log(res);
let data1 = []; let data1 = [];
for(let key in res){ for(let key in res){
that.weilanName.push(key); that.weilanName.push(key);
...@@ -150,6 +149,21 @@ export default { ...@@ -150,6 +149,21 @@ export default {
that.zuobianData = data1 that.zuobianData = data1
//console.log("zuobianData",that.zuobianData); //console.log("zuobianData",that.zuobianData);
//console.log("weilanName",that.weilanName); //console.log("weilanName",that.weilanName);
this.getlishiguijiFn();
}
})
},
//后台获取数据——获取实时位置
getlishiguijiFn() {
let that = this;
HttpReq.truckDispatching.getCarTrajectoryQuery().then((res) => {
//console.log(res);
if(res.code == 200){
that.historyTrajectoryData = res.data;
this.$nextTick(()=>{ this.$nextTick(()=>{
if (this.appendToBody) { if (this.appendToBody) {
document.body.appendChild(this.$el) document.body.appendChild(this.$el)
...@@ -163,16 +177,6 @@ export default { ...@@ -163,16 +177,6 @@ export default {
} }
}) })
}
})
},
//后台获取数据——获取实时位置
getlishiguijiFn() {
let that = this;
HttpReq.truckDispatching.getCarTrajectoryQuery().then((res) => {
if(res.code == 200){
that.historyTrajectoryData = res.data;
} }
}) })
}, },
...@@ -196,7 +200,6 @@ export default { ...@@ -196,7 +200,6 @@ export default {
//围栏回显 //围栏回显
that.zuobianData.forEach(function(item,index){ that.zuobianData.forEach(function(item,index){
//console.log(item);
var graphicLayer = new mars3d.layer.GraphicLayer(); var graphicLayer = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer); map.addLayer(graphicLayer);
initLayerManager(graphicLayer,that.weilanName[index]); initLayerManager(graphicLayer,that.weilanName[index]);
...@@ -204,10 +207,11 @@ export default { ...@@ -204,10 +207,11 @@ export default {
}) })
//实时位置 //实时位置
var graphicLayer4 = new mars3d.layer.GraphicLayer(); // that.historyTrajectoryData.forEach((item,index)=>{
map.addLayer(graphicLayer4) // var graphicLayer4 = new mars3d.layer.GraphicLayer();
//that.addDemoGraphics(graphicLayer4); // map.addLayer(graphicLayer4)
// that.addDemoGraphics(graphicLayer4,item);
// })
// 抛出事件 // 抛出事件
this.$emit('onload', map) this.$emit('onload', map)
...@@ -246,68 +250,60 @@ export default { ...@@ -246,68 +250,60 @@ export default {
return property; return property;
}, },
//实时位置 //实时位置
addDemoGraphics(graphicLayer4) { addDemoGraphics(graphicLayer4,item) {
let that = this; let that = this;
const graphic = new mars3d.graphic.ModelPrimitive({
for (let i = 0; i < 1; i++) { style: {
const graphic = new mars3d.graphic.ModelPrimitive({ url: "//data.mars3d.cn/gltf/mars/car/tufangche.glb",
style: { scale: 0.1,
url: "//data.mars3d.cn/gltf/mars/car/tufangche.glb", minimumPixelSize: 50,
scale: 0.1, // 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
minimumPixelSize: 50, highlight: {
type: mars3d.EventType.click,
// 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用 silhouette: true,
highlight: { silhouetteColor: "#ff0000",
type: mars3d.EventType.click, silhouetteSize: 4
silhouette: true,
silhouetteColor: "#ff0000",
silhouetteSize: 4
},
label: {
// 不需要文字时，去掉label配置即可
text: "鲁A12345",
font_size: 16,
color: "#ffffff",
outline: true,
outlineColor: "#000000",
pixelOffsetY: -20,
distanceDisplayCondition: true,
distanceDisplayCondition_far: 50000,
distanceDisplayCondition_near: 0
}
}, },
}) label: {
graphicLayer4.addGraphic(graphic) // 不需要文字时，去掉label配置即可
} text: item.name,
font_size: 16,
color: "#ffffff",
outline: true,
outlineColor: "#000000",
pixelOffsetY: -20,
distanceDisplayCondition: true,
distanceDisplayCondition_far: 50000,
distanceDisplayCondition_near: 0
}
},
})
graphicLayer4.addGraphic(graphic)
// 设置动态位置 // 设置动态位置
graphicLayer4.eachGraphic((graphic) => { graphicLayer4.eachGraphic((graphic) => {
graphic.addDynamicPosition(that.randomPoint()) // 首次出现的位置 graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(item.lat, item.lon, 500)) // 首次出现的位置
}) })
graphicLayer4.eachGraphic((graphic) => { graphicLayer4.eachGraphic((graphic) => {
graphic.addDynamicPosition(that.randomPoint(), 50) // 按20秒运动至指定位置 graphic.addDynamicPosition(that.randomPoint(item.name), 6) // 按6秒运动至指定位置
}) })
// 定时更新动态位置（setInterval为演示） // 定时更新动态位置（setInterval为演示）
setInterval(() => { // setInterval(() => {
graphicLayer4.eachGraphic((graphic) => { // graphicLayer4.eachGraphic((graphic) => {
graphic.addDynamicPosition(that.randomPoint(), 50) // graphic.addDynamicPosition(that.randomPoint(item.name), 6)
}) // })
}, 20000) // }, 6000)
}, },
// 取区域内的随机点 // 取区域内的随机点
randomPoint() { randomPoint(name) {
this.getlishiguijiFn() HttpReq.truckDispatching.getCarTrajectoryQuery({name:name}).then((res) => {
// const jd = this.random(117.130666 * 1000, 117.130241 * 1000) / 1000 if(res.code == 200){
// const wd = this.random(36.655207 * 1000, 36.665207 * 1000) / 1000 return Cesium.Cartesian3.fromDegrees(res.data[0].lat, res.data[0].lon, 500)
// console.log("jd",jd); }
// console.log("wd",wd); })
// return Cesium.Cartesian3.fromDegrees(jd, wd, 500)
}, },
random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
} }
} }
</script> </script>
......
src/components/mars3d/Map2.vue
View file @ 21f74085
...@@ -2,13 +2,6 @@ ...@@ -2,13 +2,6 @@
<div style="wight:100%;height:100%;"> <div style="wight:100%;height:100%;">
<div :id="`mars3d-container${mapKey}`" <div :id="`mars3d-container${mapKey}`"
:class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]"></div> :class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]"></div>
<!-- <div class="infoview">
<el-button type="primary" @click="btnStartDraw()">设置围栏</el-button>
<el-button type="primary" @click="uploaded()">上传围栏</el-button>
<div style="display: inline-block;color:red;font-weight:bolder;">每次只允许上传一个围栏，并且围栏必须是封闭图形</div>
</div> -->
</div> </div>
</template> </template>
...@@ -95,7 +88,7 @@ export default { ...@@ -95,7 +88,7 @@ export default {
toJavaCoordinates:[], toJavaCoordinates:[],
weilanName:[], weilanName:[],
carNumber:'', carNumber:'',
carPlaySpeed:120, carPlaySpeed:5,
} }
}, },
...@@ -138,143 +131,80 @@ export default { ...@@ -138,143 +131,80 @@ export default {
methods: { methods: {
//获取数据 //获取数据
getCoordinate(equipmentName,number,speed) { getCoordinate(equipmentName,number,speed,bTime,eTime) {
let that = this; let that = this;
that.deviceId = equipmentName; that.deviceId = equipmentName;
that.carNumber = number; that.carNumber = number;
that.carPlaySpeed = speed; that.carPlaySpeed = speed;
//获取电子围栏
HttpReq.truckDispatching.screenMapSetUpQuery({size:9999}).then((res) => {
if(true){;
//console.log(res);
let data1 = [];
for(let key in res){
that.weilanName.push(key);
let arrays = [];
res[key].forEach(function(item){
var arr = [];
arr[0] = item.lon;
arr[1] = item.lat;
arr[2] = "500";
arrays.push(arr);
})
data1.push(arrays)
}
that.zuobianData = data1
//console.log("zuobianData",that.zuobianData);
//console.log("weilanName",that.weilanName);
this.$nextTick(()=>{
if (this.appendToBody) {
document.body.appendChild(this.$el)
}
if (this.mapKey) {
this.initMars3d(this.options)
} else {
mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
this.initMars3d(data.map3d)// 构建地图
})
}
})
}
})
//获取历史轨迹 //获取历史轨迹
if(number == ''){ if(number == ''){
// this.$nextTick(()=>{
// if (this.appendToBody) {
// document.body.appendChild(this.$el)
// }
// if (this.mapKey) {
// this.initMars3d(this.options)
// } else {
// mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
// this.initMars3d(data.map3d)// 构建地图
// })
// }
// })
}else{ }else{
if(that.deviceId == '' || that.deviceId == undefined){ if(that.deviceId == '' || that.deviceId == undefined){
this.$notify({ this.$notify({
title: '此车暂无轨迹！', title: '暂无轨迹数据！',
type: 'warning', type: 'warning',
duration: 2500 duration: 2500
}); });
}else{ }else{
HttpReq.truckDispatching.getAllHistroyCarTrajectoryQuery({name:that.deviceId}).then((res) => { HttpReq.truckDispatching.getAllHistroyCarTrajectoryQuery({name:that.deviceId,bTime:bTime,eTime:eTime}).then((res) => {
//console.log('获取历史轨迹',res); //console.log('获取历史轨迹',res);
if(res.code == 200){ if(res.code == 200){
let obj1 = {}; if(res.data.line.length == 0){
let array1 = []; this.$notify({
res.data.line.forEach((item,index)=>{ title: '暂无轨迹数据！',
let array2 = []; type: 'warning',
array2.push(item.location.x); duration: 2500
array2.push(item.location.y); });
array2.push('500'); }else{
array1.push(array2);
}) let obj1 = {};
obj1.name = res.data.name; let array1 = [];
obj1.arrays = array1; res.data.line.forEach((item,index)=>{
//let hisCenterData = [...that.historyTrajectoryData]; let array2 = [];
let hisCenterData = []; array2.push(item.lat);
hisCenterData.push(obj1); array2.push(item.lon);
that.historyTrajectoryData = [...hisCenterData]; array2.push(1000);
array1.push(array2);
this.$nextTick(()=>{ })
if (this.appendToBody) { obj1.name = res.data.name;
document.body.appendChild(this.$el) obj1.arrays = array1;
} //let hisCenterData = [...that.historyTrajectoryData];
if (this.mapKey) { let hisCenterData = [];
this.initMars3d(this.options) hisCenterData.push(obj1);
} else { that.historyTrajectoryData = [...hisCenterData];
mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
this.initMars3d(data.map3d)// 构建地图 this.$nextTick(()=>{
}) if (this.appendToBody) {
} document.body.appendChild(this.$el)
}) }
if (this.mapKey) {
this.initMars3d(this.options)
} else {
mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
this.initMars3d(data.map3d)// 构建地图
})
}
})
}
} }
}) })
} }
} }
},
//上传围栏数据
uploaded(){
let newData = [...this.toJavaCoordinates];
newData.pop();
if(this.toJavaCoordinates.length == 0){
this.$message({
type: 'warning',
message: '请绘制电子围栏'
});
}else{
this.$prompt('电子围栏名称不得为空且不能与之前围栏名称重复', '请输入电子围栏名称', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputErrorMessage: '输入不能为空',
inputValidator: (value) => { // 点击按钮时，对文本框里面的值进行验证
if(!value) {
return '输入不能为空';
}
},
}).then(({ value }) => {
let allObj = {};
allObj.name = value;
allObj.zuobiao = newData;
this.toJavaCoordinates = [];
console.log(allObj);
//发送添加电子围栏请求
HttpReq.truckDispatching.screenMapSetUpAdd(allObj).then((res) => {
if(res.code == 200){
this.$notify({
title: '上传电子围栏成功！',
type: 'success',
duration: 2500
});
}else{
this.$notify({
title: res.msg,
type: 'error',
duration: 2500
})
}
}).catch(function(error) { });
}).catch(() => {
this.$message({
type: 'info',
message: '取消输入'
});
});
}
}, },
//创建地图电子围栏 //创建地图电子围栏
initMars3d(options) { initMars3d(options) {
...@@ -292,21 +222,25 @@ export default { ...@@ -292,21 +222,25 @@ export default {
// 创建三维地球场景 // 创建三维地球场景
map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions) map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
this[`map${this.mapKey}`] = map this[`map${this.mapKey}`] = map
//围栏回显
that.zuobianData.forEach(function(item,index){
var graphicLayer = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer);
initLayerManager(graphicLayer,that.weilanName[index]);
that.addGraphic_01(graphicLayer,item,that.weilanName[index]);
})
if(that.carNumber == '' || that.deviceId == '' || that.deviceId == undefined){
}else{ //历史轨迹回放例子
//创建矢量数据图层2 // var graphicLayer1 = new mars3d.layer.GraphicLayer();
var graphicLayer1 = new mars3d.layer.GraphicLayer(); // map.addLayer(graphicLayer1);
map.addLayer(graphicLayer1); // var itemText = `<table style="width: auto;">
// <tr>
// <th scope="col" colspan="2" style="text-align:center;font-size:15px;">卡车号码：${that.carNumber}</th>
// </tr>
// <tr>
// <td>设备名称：${that.deviceId}</td>
// </tr>
// </table>`;
// initGraphicManager(graphicLayer1,itemText);
// that.addGraphic_02(graphicLayer1,this.persons,that.carNumber);
//历史轨迹回放
that.historyTrajectoryData.forEach(function(item,index){
var graphicLayer2 = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer2);
var itemText = `<table style="width: auto;"> var itemText = `<table style="width: auto;">
<tr> <tr>
<th scope="col" colspan="2" style="text-align:center;font-size:15px;">卡车号码：${that.carNumber}</th> <th scope="col" colspan="2" style="text-align:center;font-size:15px;">卡车号码：${that.carNumber}</th>
...@@ -315,84 +249,15 @@ export default { ...@@ -315,84 +249,15 @@ export default {
<td>设备名称：${that.deviceId}</td> <td>设备名称：${that.deviceId}</td>
</tr> </tr>
</table>`; </table>`;
initGraphicManager(graphicLayer1,itemText); initGraphicManager(graphicLayer2,itemText);
that.addGraphic_02(graphicLayer1,this.persons,that.carNumber); that.addGraphic_02(graphicLayer2,item.arrays,that.carNumber);
})
//历史轨迹回放
that.historyTrajectoryData.forEach(function(item,index){
var graphicLayer2 = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer2);
var itemText = `<table style="width: auto;">
<tr>
<th scope="col" colspan="2" style="text-align:center;font-size:15px;">卡车号码：${that.carNumber}</th>
</tr>
<tr>
<td>设备名称：${that.deviceId}</td>
</tr>
</table>`;
initGraphicManager(graphicLayer2,itemText);
that.addGraphic_02(graphicLayer2,item.arrays,item.name);
})
}
// 抛出事件 // 抛出事件
this.$emit('onload', map) this.$emit('onload', map)
}, },
//围栏设置
btnStartDraw(){
this.toJavaCoordinates = [];
let that = this;
var graphicLayer3 = new mars3d.layer.GraphicLayer();
graphicLayer3.on(mars3d.EventType.click, function (event) {
var mpt = mars3d.LatLngPoint.fromCartesian(event.cartesian);
that.toJavaCoordinates.push(mpt.toString().split(','));
console.log(that.toJavaCoordinates);
});
map.addLayer(graphicLayer3);
initLayerManager(graphicLayer3);
graphicLayer3.startDraw({
type: "polyline",
style: {
color: "red",
width: 5,
clampToGround: false,
label: {
text: "围栏区域",
font_size: 18,
color: "#ffffff",
distanceDisplayCondition: true,
distanceDisplayCondition_far: 500000,
distanceDisplayCondition_near: 0,
},
},
});
},
//围栏回显
addGraphic_01(graphicLayer,positions,weilanName){
let graphic = new mars3d.graphic.PolygonEntity({
positions: positions,
style: {
color: "red",
opacity: 0.5,
outline: true,
outlineWidth: 3,
outlineColor: "#ffffff",
label: {
text: weilanName,
font_size: 18,
color: "#ffffff",
distanceDisplayCondition: true,
distanceDisplayCondition_far: 500000,
distanceDisplayCondition_near: 0,
},
},
});
graphicLayer.addGraphic(graphic); //还可以另外一种写法: graphic.addTo(graphicLayer)
},
//车辆轨迹 //车辆轨迹
addGraphic_02(graphicLayer1,positions,truckName) { addGraphic_02(graphicLayer2,positions,truckName) {
let that = this; let that = this;
var property = new Cesium.SampledPositionProperty(); var property = new Cesium.SampledPositionProperty();
var tempTime; var tempTime;
...@@ -436,7 +301,7 @@ export default { ...@@ -436,7 +301,7 @@ export default {
minimumPixelSize: 50, minimumPixelSize: 50,
}, },
}); });
graphicLayer1.addGraphic(graphic); //还可以另外一种写法: graphic.addTo(graphicLayer) graphicLayer2.addGraphic(graphic); //还可以另外一种写法: graphic.addTo(graphicLayer)
}, },
getSampledPositionProperty(points){ getSampledPositionProperty(points){
......
src/components/mars3d/js/graphicManager.js
View file @ 21f74085
...@@ -178,7 +178,8 @@ import $ from 'jquery' ...@@ -178,7 +178,8 @@ import $ from 'jquery'
//attr.text = "围栏"; //attr.text = "围栏";
// attr["视频"] = `<video src='http://data.mars3d.cn/file/video/lukou.mp4' controls autoplay style="width: 300px;" ></video>`; // attr["视频"] = `<video src='http://data.mars3d.cn/file/video/lukou.mp4' controls autoplay style="width: 300px;" ></video>`;
return mars3d.Util.getTemplateHtml({ title: "围栏区域", template: "all", attr: attr }); //return mars3d.Util.getTemplateHtml({ title: "围栏区域", template: "all", attr: attr });
return mars3d.Util.getTemplateHtml({ title: "围栏区域", template: "all"});
}); });
} }
......
src/views/MLargeScreen/components/dataAnalysis/index.vue
View file @ 21f74085
...@@ -916,9 +916,9 @@ export default { ...@@ -916,9 +916,9 @@ export default {
width: 100%; width: 100%;
height: 19vh; height: 19vh;
} }
.table-box{ /* .table-box{
margin-top: -10px; margin-top: -10px;
} } */
dl{ dl{
display:table; display:table;
width:100%; width:100%;
......
src/views/MLargeScreen/components/dataScreening/index.vue
View file @ 21f74085
...@@ -888,9 +888,9 @@ export default { ...@@ -888,9 +888,9 @@ export default {
.driverInforListStyle{ .driverInforListStyle{
text-align: center; text-align: center;
} }
.table-box{ /* .table-box{
margin-top: -10px; margin-top: -10px;
} } */
dl{ dl{
display:table; display:table;
width:100%; width:100%;
......
src/views/MLargeScreen/components/intelligentSchedul/index.vue
View file @ 21f74085
...@@ -17,8 +17,7 @@ ...@@ -17,8 +17,7 @@
<div class="voiceAppContent_2_content"> <div class="voiceAppContent_2_content">
<el-checkbox-group v-model="selectCarRadioArray"> <el-checkbox-group v-model="selectCarRadioArray">
<el-checkbox v-for="(item,index) in carsInforData" :label="item" :key="index" style="margin-top:7px;"> <el-checkbox v-for="(item,index) in carsInforData" :label="item" :key="index" style="margin-top:7px;">
<div style="width:7.5vw;margin-left:1.7vw;">{{item.name}}</div> <div style="width:12vw;margin-left:1.7vw;text-align: center;">{{item.number}}</div>
<div>{{item.number}}</div>
</el-checkbox> </el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
...@@ -27,7 +26,7 @@ ...@@ -27,7 +26,7 @@
<div class="voiceAppContent_2_title">已选中车辆</div> <div class="voiceAppContent_2_title">已选中车辆</div>
<div class="voiceAppContent_3_content"> <div class="voiceAppContent_3_content">
<div v-for="(item,index) in selectCarRadioArray" :key="index" class="voiceAppContent_3_content_selectCar"> <div v-for="(item,index) in selectCarRadioArray" :key="index" class="voiceAppContent_3_content_selectCar">
<div>{{item.name}}</div> <div>{{item.number}}</div>
<div style="width:20px;height:20px;background-color: rgb(4,112,171);text-align: center;font-size:30px;line-height:20px;cursor: pointer;" @click="cancelSelect(index)"> <div style="width:20px;height:20px;background-color: rgb(4,112,171);text-align: center;font-size:30px;line-height:20px;cursor: pointer;" @click="cancelSelect(index)">
<span>×</span> <span>×</span>
</div> </div>
...@@ -521,9 +520,9 @@ export default { ...@@ -521,9 +520,9 @@ export default {
.intelligentSchScrView_leftView_content,.intelligentSchScrView_rightView_content{ .intelligentSchScrView_leftView_content,.intelligentSchScrView_rightView_content{
width: 100%; width: 100%;
} }
.table-box{ /* .table-box{
margin-top: -10px; margin-top: -10px;
} } */
dl{ dl{
display:table; display:table;
width:100%; width:100%;
......
src/views/MLargeScreen/index.vue
View file @ 21f74085
...@@ -17,6 +17,10 @@ ...@@ -17,6 +17,10 @@
<!-- 时间 --> <!-- 时间 -->
<div class="currentTimeStyle">{{currentTime}}</div> <div class="currentTimeStyle">{{currentTime}}</div>
</div> </div>
<div class="videoSelectView" v-show="videoSelect1">
<div @click="lookFn1()">矿山监控</div>
<div @click="lookFn2()">车辆监控</div>
</div>
<!-- 内容 --> <!-- 内容 -->
<div class="content_view"> <div class="content_view">
<dataScreening ref="dataScreeningMethod" v-show="selectModule == 'dataScreening'"/> <dataScreening ref="dataScreeningMethod" v-show="selectModule == 'dataScreening'"/>
...@@ -25,12 +29,19 @@ ...@@ -25,12 +29,19 @@
<dataAnalysis ref="dataAnalysisMethod" v-show="selectModule == 'dataAnalysis'"/> <dataAnalysis ref="dataAnalysisMethod" v-show="selectModule == 'dataAnalysis'"/>
<carSpecificInfor ref="carSpecificInforMethod" v-show="selectModule == 'carSpecificInfor'"/> <carSpecificInfor ref="carSpecificInforMethod" v-show="selectModule == 'carSpecificInfor'"/>
</div> </div>
<!-- 监控区域 -->
<div class="jiankongView">
<carsEZUIKitJs v-if="carsEZUIKitJsShow"/>
<kaungEZUIKitJs v-if="kaungEZUIKitJsShow"/>
</div>
<!-- 车事例 -->
<!-- <div class="carExample" @click="showSpecificInforFn()"> <!-- <div class="carExample" @click="showSpecificInforFn()">
<span class="el-icon-location"></span> <span class="el-icon-location"></span>
</div> --> </div> -->
<!-- <div id="centerDiv" class="mapcontainer1"> <!-- 地图区域 -->
<div id="centerDiv" class="mapcontainer1">
<mars3dViewerMap :url="configUrl" @onload="onMapload"/> <mars3dViewerMap :url="configUrl" @onload="onMapload"/>
</div> --> </div>
</div> </div>
</template> </template>
...@@ -42,6 +53,8 @@ import intelligentSchedul from './components/intelligentSchedul/index.vue' //智 ...@@ -42,6 +53,8 @@ import intelligentSchedul from './components/intelligentSchedul/index.vue' //智
import dataAnalysis from './components/dataAnalysis/index.vue' //数据分析 import dataAnalysis from './components/dataAnalysis/index.vue' //数据分析
import carSpecificInfor from './components/carSpecificInfor/index.vue' //车辆信息弹框 import carSpecificInfor from './components/carSpecificInfor/index.vue' //车辆信息弹框
import mars3dViewerMap from '../../components/mars3d/Map.vue' //地图 import mars3dViewerMap from '../../components/mars3d/Map.vue' //地图
import carsEZUIKitJs from '../../components/ezuikit/carsEZUIKitJs.vue'//车辆监控
import kaungEZUIKitJs from '../../components/ezuikit/EZUIKitJs.vue'//矿山监控
export default { export default {
components: { components: {
...@@ -51,6 +64,8 @@ export default { ...@@ -51,6 +64,8 @@ export default {
dataAnalysis, dataAnalysis,
carSpecificInfor, carSpecificInfor,
mars3dViewerMap, mars3dViewerMap,
carsEZUIKitJs,
kaungEZUIKitJs,
}, },
data() { data() {
const basePathUrl = window.basePathUrl || '' const basePathUrl = window.basePathUrl || ''
...@@ -76,7 +91,10 @@ export default { ...@@ -76,7 +91,10 @@ export default {
carName:'4001', carName:'4001',
//司机用户名 //司机用户名
driverUserName:'lisan', driverUserName:'lisan',
//监控选择
videoSelect1:false,
carsEZUIKitJsShow:false,
kaungEZUIKitJsShow:false,
} }
}, },
mounted() { mounted() {
...@@ -122,6 +140,9 @@ export default { ...@@ -122,6 +140,9 @@ export default {
this.$refs.carManagementMethod.loadData(false); this.$refs.carManagementMethod.loadData(false);
this.$refs.intelligentSchedulMethod.loadData(false); this.$refs.intelligentSchedulMethod.loadData(false);
this.$refs.dataAnalysisMethod.loadData(false); this.$refs.dataAnalysisMethod.loadData(false);
this.videoSelect1 = false;
this.kaungEZUIKitJsShow = false;
this.carsEZUIKitJsShow = false;
} }
if(item.componentName == 'carManagement'){ if(item.componentName == 'carManagement'){
if(this.isShow.carManagement == false){ if(this.isShow.carManagement == false){
...@@ -137,6 +158,9 @@ export default { ...@@ -137,6 +158,9 @@ export default {
this.$refs.dataScreeningMethod.loadData(false); this.$refs.dataScreeningMethod.loadData(false);
this.$refs.intelligentSchedulMethod.loadData(false); this.$refs.intelligentSchedulMethod.loadData(false);
this.$refs.dataAnalysisMethod.loadData(false); this.$refs.dataAnalysisMethod.loadData(false);
this.videoSelect1 = false;
this.kaungEZUIKitJsShow = false;
this.carsEZUIKitJsShow = false;
} }
if(item.componentName == 'intelligentSchedul'){ if(item.componentName == 'intelligentSchedul'){
if(this.isShow.intelligentSchedul == false){ if(this.isShow.intelligentSchedul == false){
...@@ -152,6 +176,9 @@ export default { ...@@ -152,6 +176,9 @@ export default {
this.$refs.dataScreeningMethod.loadData(false); this.$refs.dataScreeningMethod.loadData(false);
this.$refs.carManagementMethod.loadData(false); this.$refs.carManagementMethod.loadData(false);
this.$refs.dataAnalysisMethod.loadData(false); this.$refs.dataAnalysisMethod.loadData(false);
this.videoSelect1 = false;
this.kaungEZUIKitJsShow = false;
this.carsEZUIKitJsShow = false;
} }
if(item.componentName == 'dataAnalysis'){ if(item.componentName == 'dataAnalysis'){
if(this.isShow.dataAnalysis == false){ if(this.isShow.dataAnalysis == false){
...@@ -167,6 +194,9 @@ export default { ...@@ -167,6 +194,9 @@ export default {
this.$refs.dataScreeningMethod.loadData(false); this.$refs.dataScreeningMethod.loadData(false);
this.$refs.carManagementMethod.loadData(false); this.$refs.carManagementMethod.loadData(false);
this.$refs.intelligentSchedulMethod.loadData(false); this.$refs.intelligentSchedulMethod.loadData(false);
this.videoSelect1 = false;
this.kaungEZUIKitJsShow = false;
this.carsEZUIKitJsShow = false;
} }
if(item.componentName == 'backstage'){ if(item.componentName == 'backstage'){
this.isShow.dataScreening = false; this.isShow.dataScreening = false;
...@@ -183,6 +213,9 @@ export default { ...@@ -183,6 +213,9 @@ export default {
}); });
window.open(routeUrl.href, '_blank'); window.open(routeUrl.href, '_blank');
}) })
this.videoSelect1 = false;
this.kaungEZUIKitJsShow = false;
this.carsEZUIKitJsShow = false;
} }
if(item.componentName == 'toVideoSurveillance'){ if(item.componentName == 'toVideoSurveillance'){
this.isShow.dataScreening = false; this.isShow.dataScreening = false;
...@@ -193,14 +226,26 @@ export default { ...@@ -193,14 +226,26 @@ export default {
this.$refs.carManagementMethod.loadData(false); this.$refs.carManagementMethod.loadData(false);
this.$refs.intelligentSchedulMethod.loadData(false); this.$refs.intelligentSchedulMethod.loadData(false);
this.$refs.dataAnalysisMethod.loadData(false); this.$refs.dataAnalysisMethod.loadData(false);
this.$nextTick(()=>{ if(this.videoSelect1 == false){
let routeUrl = this.$router.resolve({ this.videoSelect1 = true;
path: "/monitoringManagement/mineVideo", }else{
}); this.videoSelect1 = false;
window.open(routeUrl.href, '_blank'); this.kaungEZUIKitJsShow = false;
}) this.carsEZUIKitJsShow = false;
}
} }
}, },
//矿山监控
lookFn1(){
this.kaungEZUIKitJsShow = true;
this.carsEZUIKitJsShow = false;
},
//车辆监控
lookFn2(){
this.kaungEZUIKitJsShow = false;
this.carsEZUIKitJsShow = true;
},
//车辆信息弹框 //车辆信息弹框
showSpecificInforFn(){ showSpecificInforFn(){
this.selectModule = 'carSpecificInfor'; this.selectModule = 'carSpecificInfor';
...@@ -274,6 +319,10 @@ export default { ...@@ -274,6 +319,10 @@ export default {
</script> </script>
<style scope> <style scope>
*{
margin: 0;
padding: 0;
}
.mapcontainer1 { .mapcontainer1 {
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
...@@ -304,6 +353,29 @@ export default { ...@@ -304,6 +353,29 @@ export default {
position: relative; position: relative;
bottom: 0px; bottom: 0px;
} }
.videoSelectView{
position: absolute;
top: 5.5vh;
z-index: 1;
width: 100%;
height: 5.5vh;
background-color: rgb(102,204,255);
display: flex;
justify-content: space-evenly;
align-items: center;
font-size: 25px;
color: white;
font-weight: 600;
}
.videoSelectView>div{
cursor: pointer;
}
.jiankongView{
position: absolute;
top: 11vh;
z-index: 1;
width: 100%;
}
.top_titl_left{ .top_titl_left{
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
...@@ -317,8 +389,8 @@ export default { ...@@ -317,8 +389,8 @@ export default {
justify-content: space-evenly; justify-content: space-evenly;
position: absolute; position: absolute;
top: 2vh; top: 2vh;
right: 15vw; right: 12vw;
width: 20%; width: 23%;
font-size: 22px; font-size: 22px;
} }
.top_titl_left_textStyle1{ .top_titl_left_textStyle1{
......
src/views/carManagement/carTrajectory/index.vue
View file @ 21f74085
...@@ -8,51 +8,32 @@ ...@@ -8,51 +8,32 @@
<div style="font-size:18px;font-weight:bold;margin-bottom:10px;">车辆历史轨迹查询</div> <div style="font-size:18px;font-weight:bold;margin-bottom:10px;">车辆历史轨迹查询</div>
<!-- <el-form-item label="开始时间" style="display: inline-block;">
<el-date-picker v-model="query.startTime" type="datetime" placeholder="选择开始时间"></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" style="display: inline-block;">
<el-date-picker v-model="query.endTime" type="datetime" placeholder="选择结束时间"></el-date-picker>
</el-form-item>
<el-form-item label="选择矿区" style="display: inline-block;">
<el-select v-model="query.road" placeholder="请选择矿区">
<el-option v-for="(obj,index) in areaInformationData" :label="obj.name" :value="obj.name" :key="index"></el-option>
</el-select>
</el-form-item> -->
<el-form-item label="车辆牌号" style="display: inline-block;"> <el-form-item label="车辆牌号" style="display: inline-block;">
<el-select v-model="query.number" placeholder="请选择车辆牌号"> <el-select v-model="query.number" placeholder="请选择车辆牌号">
<el-option v-for="(obj,index) in carInformationData" :label="obj.number" :value="obj.number" :key="index"></el-option> <el-option v-for="(obj,index) in carInformationData" :label="obj.number" :value="obj.number" :key="index"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="开始时间" style="display: inline-block;">
<el-date-picker v-model="query.bTime" type="datetime" placeholder="选择开始时间"></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" style="display: inline-block;">
<el-date-picker v-model="query.eTime" type="datetime" placeholder="选择结束时间"></el-date-picker>
</el-form-item>
<el-button type="primary" icon="el-icon-search" @click="toSearch" style="display: inline-block;">搜索</el-button> <el-button type="primary" icon="el-icon-search" @click="toSearch" style="display: inline-block;">搜索</el-button>
<el-button icon="el-icon-refresh" @click="clearLimit" style="display: inline-block;">重置</el-button> <el-button icon="el-icon-refresh" @click="clearLimit" style="display: inline-block;">重置</el-button>
<br> <br>
<!-- <el-form-item label="测量距离" style="display: inline-block;">
<el-button type="primary" plain style="font-size:15px;">开测距</el-button>
<el-button type="primary" plain style="font-size:15px;">关测距</el-button>
</el-form-item>
<el-form-item label="轨迹时间点" style="display: inline-block;">
<el-select v-model="query.pointOfTime" placeholder="请选择轨迹时间点">
<el-option label="点1" value="点1"></el-option>
<el-option label="点2" value="点2"></el-option>
<el-option label="点3" value="点3"></el-option>
</el-select>
</el-form-item>
<el-button style="font-size:15px;">暂停</el-button>
<el-button style="font-size:15px;">继续</el-button>
<el-button style="font-size:15px;">统计轨迹</el-button> -->
<el-form-item label="观看倍速" style="display: inline-block;"> <el-form-item label="观看倍速" style="display: inline-block;">
<el-select v-model="query.playSpeed" placeholder="请选择观看倍速" @change="changeSpeed()"> <el-select v-model="query.playSpeed" placeholder="请选择观看倍速" @change="changeSpeed()">
<el-option label="1倍" value="1"></el-option> <el-option label="1倍" value="1"></el-option>
<el-option label="4倍" value="4"></el-option> <el-option label="4倍" value="4"></el-option>
<el-option label="8倍" value="8"></el-option> <el-option label="8倍" value="8"></el-option>
<el-option label="16倍" value="16"></el-option> <el-option label="16倍" value="16"></el-option>
<el-option label="32倍" value="32"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- <el-button type="primary" plain style="font-size:15px;">显示所有轨迹</el-button> -->
</el-form> </el-form>
<div id="centerDiv" class="mapcontainer2"> <div id="centerDiv" class="mapcontainer2">
...@@ -81,30 +62,30 @@ export default { ...@@ -81,30 +62,30 @@ export default {
configUrl: basePathUrl + 'config/config.json', configUrl: basePathUrl + 'config/config.json',
query:{ query:{
number:'', number:'',
startTime:'', bTime:'',
endTime:'', eTime:'',
playSpeed:'1', playSpeed:'1',
}, },
carInformationData:[], carInformationData:[],
areaInformationData:[], areaInformationData:[],
shuaxinTimer:null, shuaxinTimer:null,
playSpeedNum:120, playSpeedNum:5,
} }
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.loadData(); this.loadData();
this.$refs.mars3dViewerMapMethod.getCoordinate('','',5,'','');
}) })
}, },
methods: { methods: {
// 点击搜索 // 点击搜索
toSearch() { toSearch() {
let that = this; let that = this;
//console.log(this.query.number);
HttpReq.truckDispatching.carInformationQuery({number:this.query.number}).then((res) => { HttpReq.truckDispatching.carInformationQuery({number:this.query.number}).then((res) => {
if(res.code == 200){ if(res.code == 200){
this.shuaxinTimer = new Date().getTime(); this.shuaxinTimer = new Date().getTime();
that.$refs.mars3dViewerMapMethod.getCoordinate(res.data.content[0].equipmentName,res.data.content[0].number,that.playSpeedNum); that.$refs.mars3dViewerMapMethod.getCoordinate(res.data.content[0].equipmentName,res.data.content[0].number,that.playSpeedNum,that.query.bTime,that.query.eTime);
} }
}) })
}, },
...@@ -113,13 +94,14 @@ export default { ...@@ -113,13 +94,14 @@ export default {
let that = this; let that = this;
this.query = { this.query = {
number:'', number:'',
startTime:'', bTime:'',
endTime:'', eTime:'',
playSpeed:'1', playSpeed:'1',
}; };
this.playSpeedNum = 5;
this.loadData(); this.loadData();
this.shuaxinTimer = new Date().getTime(); this.shuaxinTimer = new Date().getTime();
that.$refs.mars3dViewerMapMethod.getCoordinate('','',120); that.$refs.mars3dViewerMapMethod.getCoordinate('','',5,'','');
}, },
//获取数据 //获取数据
loadData() { loadData() {
...@@ -143,15 +125,15 @@ export default { ...@@ -143,15 +125,15 @@ export default {
//改变倍速 //改变倍速
changeSpeed(){ changeSpeed(){
let that = this; let that = this;
let numSpeed1 = 120 / parseInt(this.query.playSpeed); let numSpeed1 = 5 / parseFloat(this.query.playSpeed);
this.playSpeedNum = parseInt(numSpeed1); this.playSpeedNum = parseFloat(numSpeed1);
if(this.query.number == ''){ if(this.query.number == ''){
return; return;
}else{ }else{
HttpReq.truckDispatching.carInformationQuery({number:this.query.number}).then((res) => { HttpReq.truckDispatching.carInformationQuery({number:this.query.number}).then((res) => {
if(res.code == 200){ if(res.code == 200){
this.shuaxinTimer = new Date().getTime(); this.shuaxinTimer = new Date().getTime();
that.$refs.mars3dViewerMapMethod.getCoordinate(res.data.content[0].equipmentName,res.data.content[0].number,parseInt(numSpeed1)); that.$refs.mars3dViewerMapMethod.getCoordinate(res.data.content[0].equipmentName,res.data.content[0].number,parseFloat(numSpeed1),that.query.bTime,that.query.eTime);
} }
}) })
} }
...@@ -200,6 +182,7 @@ export default { ...@@ -200,6 +182,7 @@ export default {
.device-manage{ .device-manage{
.mapcontainer2{ .mapcontainer2{
border: 1px blue solid;
width: 80vw; width: 80vw;
height: 65.5vh; height: 65.5vh;
overflow: hidden; overflow: hidden;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment