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
Expand all 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 @@
卡车调度系统矿山监控视频
</el-header>
<el-container>
<el-aside width="230px" style="height: 79vh">
<el-aside width="230px" style="height: 82vh">
<el-tree
:data="videoData"
:props="defaultProps"
......@@ -20,7 +20,7 @@
</el-tree>
</el-aside>
<el-main id="elMain">
<el-main id="elMain" style="height: 82vh">
<div v-if="isChildren1" class="iframeList">
<div v-for="(item,index) in itemList" :key="index" class="videoChildren">
......@@ -410,11 +410,18 @@ export default {
winSize(){
let elMain = document.getElementById('elMain');
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){
let twelveVideo = document.getElementsByClassName('twelveVideo');
for(let i = 0;i < twelveVideo.length;i++){
twelveVideo[i].width = 450;
twelveVideo[i].height = 320;
twelveVideo[i].width = 390;
twelveVideo[i].height = 250;
}
}
......@@ -485,7 +492,6 @@ export default {
background-color: white;
color: #333;
text-align: center;
height: 79vh;
overflow:hidden;
width: 73vw;
}
......
src/components/ezuikit/carsEZUIKitJs.vue
View file @ 21f74085
......@@ -5,7 +5,7 @@
卡车调度系统车辆监控视频
</el-header>
<el-container>
<el-aside width="230px" style="height: 79vh">
<el-aside width="230px" style="height: 82vh">
<el-tree
:data="videoData"
:props="defaultProps"
......@@ -20,7 +20,7 @@
</el-tree>
</el-aside>
<el-main id="elMain">
<el-main id="elMain" style="height: 82vh">
<div v-if="isChildren1" class="iframeList">
<div v-for="(item,index) in itemList" :key="index" class="videoChildren">
......@@ -277,8 +277,8 @@ export default {
if(elMainWight > 1650){
let twelveVideo = document.getElementsByClassName('twelveVideo');
for(let i = 0;i < twelveVideo.length;i++){
twelveVideo[i].width = 450;
twelveVideo[i].height = 320;
twelveVideo[i].width = 390;
twelveVideo[i].height = 250;
}
}
......@@ -349,7 +349,6 @@ export default {
background-color: white;
color: #333;
text-align: center;
height: 79vh;
overflow:hidden;
width: 73vw;
}
......
src/components/mars3d/Map.vue
View file @ 21f74085
......@@ -133,7 +133,6 @@ export default {
let that = this;
HttpReq.truckDispatching.screenMapSetUpQuery({size:9999}).then((res) => {
if(true){;
//console.log(res);
let data1 = [];
for(let key in res){
that.weilanName.push(key);
......@@ -150,6 +149,21 @@ export default {
that.zuobianData = data1
//console.log("zuobianData",that.zuobianData);
//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(()=>{
if (this.appendToBody) {
document.body.appendChild(this.$el)
......@@ -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 {
//围栏回显
that.zuobianData.forEach(function(item,index){
//console.log(item);
var graphicLayer = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer);
initLayerManager(graphicLayer,that.weilanName[index]);
......@@ -204,10 +207,11 @@ export default {
})
//实时位置
var graphicLayer4 = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer4)
//that.addDemoGraphics(graphicLayer4);
// that.historyTrajectoryData.forEach((item,index)=>{
// var graphicLayer4 = new mars3d.layer.GraphicLayer();
// map.addLayer(graphicLayer4)
// that.addDemoGraphics(graphicLayer4,item);
// })
// 抛出事件
this.$emit('onload', map)
......@@ -246,68 +250,60 @@ export default {
return property;
},
//实时位置
addDemoGraphics(graphicLayer4) {
addDemoGraphics(graphicLayer4,item) {
let that = this;
for (let i = 0; i < 1; i++) {
const graphic = new mars3d.graphic.ModelPrimitive({
style: {
url: "//data.mars3d.cn/gltf/mars/car/tufangche.glb",
scale: 0.1,
minimumPixelSize: 50,
// 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
highlight: {
type: mars3d.EventType.click,
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
}
const graphic = new mars3d.graphic.ModelPrimitive({
style: {
url: "//data.mars3d.cn/gltf/mars/car/tufangche.glb",
scale: 0.1,
minimumPixelSize: 50,
// 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
highlight: {
type: mars3d.EventType.click,
silhouette: true,
silhouetteColor: "#ff0000",
silhouetteSize: 4
},
})
graphicLayer4.addGraphic(graphic)
}
label: {
// 不需要文字时，去掉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) => {
graphic.addDynamicPosition(that.randomPoint()) // 首次出现的位置
graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(item.lat, item.lon, 500)) // 首次出现的位置
})
graphicLayer4.eachGraphic((graphic) => {
graphic.addDynamicPosition(that.randomPoint(), 50) // 按20秒运动至指定位置
graphic.addDynamicPosition(that.randomPoint(item.name), 6) // 按6秒运动至指定位置
})
// 定时更新动态位置（setInterval为演示）
setInterval(() => {
graphicLayer4.eachGraphic((graphic) => {
graphic.addDynamicPosition(that.randomPoint(), 50)
})
}, 20000)
// setInterval(() => {
// graphicLayer4.eachGraphic((graphic) => {
// graphic.addDynamicPosition(that.randomPoint(item.name), 6)
// })
// }, 6000)
},
// 取区域内的随机点
randomPoint() {
this.getlishiguijiFn()
// const jd = this.random(117.130666 * 1000, 117.130241 * 1000) / 1000
// const wd = this.random(36.655207 * 1000, 36.665207 * 1000) / 1000
// console.log("jd",jd);
// console.log("wd",wd);
// return Cesium.Cartesian3.fromDegrees(jd, wd, 500)
randomPoint(name) {
HttpReq.truckDispatching.getCarTrajectoryQuery({name:name}).then((res) => {
if(res.code == 200){
return Cesium.Cartesian3.fromDegrees(res.data[0].lat, res.data[0].lon, 500)
}
})
},
random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
}
}
</script>
......
src/components/mars3d/Map2.vue
View file @ 21f74085
This diff is collapsed.
src/components/mars3d/js/graphicManager.js
View file @ 21f74085
......@@ -178,7 +178,8 @@ import $ from 'jquery'
//attr.text = "围栏";
// 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 {
width: 100%;
height: 19vh;
}
.table-box{
/* .table-box{
margin-top: -10px;
}
} */
dl{
display:table;
width:100%;
......
src/views/MLargeScreen/components/dataScreening/index.vue
View file @ 21f74085
......@@ -888,9 +888,9 @@ export default {
.driverInforListStyle{
text-align: center;
}
.table-box{
/* .table-box{
margin-top: -10px;
}
} */
dl{
display:table;
width:100%;
......
src/views/MLargeScreen/components/intelligentSchedul/index.vue
View file @ 21f74085
......@@ -17,8 +17,7 @@
<div class="voiceAppContent_2_content">
<el-checkbox-group v-model="selectCarRadioArray">
<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>{{item.number}}</div>
<div style="width:12vw;margin-left:1.7vw;text-align: center;">{{item.number}}</div>
</el-checkbox>
</el-checkbox-group>
</div>
......@@ -27,7 +26,7 @@
<div class="voiceAppContent_2_title">已选中车辆</div>
<div class="voiceAppContent_3_content">
<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)">
<span>×</span>
</div>
......@@ -521,9 +520,9 @@ export default {
.intelligentSchScrView_leftView_content,.intelligentSchScrView_rightView_content{
width: 100%;
}
.table-box{
/* .table-box{
margin-top: -10px;
}
} */
dl{
display:table;
width:100%;
......
src/views/MLargeScreen/index.vue
View file @ 21f74085
......@@ -17,6 +17,10 @@
<!-- 时间 -->
<div class="currentTimeStyle">{{currentTime}}</div>
</div>
<div class="videoSelectView" v-show="videoSelect1">
<div @click="lookFn1()">矿山监控</div>
<div @click="lookFn2()">车辆监控</div>
</div>
<!-- 内容 -->
<div class="content_view">
<dataScreening ref="dataScreeningMethod" v-show="selectModule == 'dataScreening'"/>
......@@ -25,12 +29,19 @@
<dataAnalysis ref="dataAnalysisMethod" v-show="selectModule == 'dataAnalysis'"/>
<carSpecificInfor ref="carSpecificInforMethod" v-show="selectModule == 'carSpecificInfor'"/>
</div>
<!-- 监控区域 -->
<div class="jiankongView">
<carsEZUIKitJs v-if="carsEZUIKitJsShow"/>
<kaungEZUIKitJs v-if="kaungEZUIKitJsShow"/>
</div>
<!-- 车事例 -->
<!-- <div class="carExample" @click="showSpecificInforFn()">
<span class="el-icon-location"></span>
</div> -->
<!-- <div id="centerDiv" class="mapcontainer1">
<!-- 地图区域 -->
<div id="centerDiv" class="mapcontainer1">
<mars3dViewerMap :url="configUrl" @onload="onMapload"/>
</div> -->
</div>
</div>
</template>
......@@ -42,6 +53,8 @@ import intelligentSchedul from './components/intelligentSchedul/index.vue' //智
import dataAnalysis from './components/dataAnalysis/index.vue' //数据分析
import carSpecificInfor from './components/carSpecificInfor/index.vue' //车辆信息弹框
import mars3dViewerMap from '../../components/mars3d/Map.vue' //地图
import carsEZUIKitJs from '../../components/ezuikit/carsEZUIKitJs.vue'//车辆监控
import kaungEZUIKitJs from '../../components/ezuikit/EZUIKitJs.vue'//矿山监控
export default {
components: {
......@@ -51,6 +64,8 @@ export default {
dataAnalysis,
carSpecificInfor,
mars3dViewerMap,
carsEZUIKitJs,
kaungEZUIKitJs,
},
data() {
const basePathUrl = window.basePathUrl || ''
......@@ -76,7 +91,10 @@ export default {
carName:'4001',
//司机用户名
driverUserName:'lisan',
//监控选择
videoSelect1:false,
carsEZUIKitJsShow:false,
kaungEZUIKitJsShow:false,
}
},
mounted() {
......@@ -122,6 +140,9 @@ export default {
this.$refs.carManagementMethod.loadData(false);
this.$refs.intelligentSchedulMethod.loadData(false);
this.$refs.dataAnalysisMethod.loadData(false);
this.videoSelect1 = false;
this.kaungEZUIKitJsShow = false;
this.carsEZUIKitJsShow = false;
}
if(item.componentName == 'carManagement'){
if(this.isShow.carManagement == false){
......@@ -137,6 +158,9 @@ export default {
this.$refs.dataScreeningMethod.loadData(false);
this.$refs.intelligentSchedulMethod.loadData(false);
this.$refs.dataAnalysisMethod.loadData(false);
this.videoSelect1 = false;
this.kaungEZUIKitJsShow = false;
this.carsEZUIKitJsShow = false;
}
if(item.componentName == 'intelligentSchedul'){
if(this.isShow.intelligentSchedul == false){
......@@ -152,6 +176,9 @@ export default {
this.$refs.dataScreeningMethod.loadData(false);
this.$refs.carManagementMethod.loadData(false);
this.$refs.dataAnalysisMethod.loadData(false);
this.videoSelect1 = false;
this.kaungEZUIKitJsShow = false;
this.carsEZUIKitJsShow = false;
}
if(item.componentName == 'dataAnalysis'){
if(this.isShow.dataAnalysis == false){
......@@ -167,6 +194,9 @@ export default {
this.$refs.dataScreeningMethod.loadData(false);
this.$refs.carManagementMethod.loadData(false);
this.$refs.intelligentSchedulMethod.loadData(false);
this.videoSelect1 = false;
this.kaungEZUIKitJsShow = false;
this.carsEZUIKitJsShow = false;
}
if(item.componentName == 'backstage'){
this.isShow.dataScreening = false;
......@@ -183,6 +213,9 @@ export default {
});
window.open(routeUrl.href, '_blank');
})
this.videoSelect1 = false;
this.kaungEZUIKitJsShow = false;
this.carsEZUIKitJsShow = false;
}
if(item.componentName == 'toVideoSurveillance'){
this.isShow.dataScreening = false;
......@@ -193,14 +226,26 @@ export default {
this.$refs.carManagementMethod.loadData(false);
this.$refs.intelligentSchedulMethod.loadData(false);
this.$refs.dataAnalysisMethod.loadData(false);
this.$nextTick(()=>{
let routeUrl = this.$router.resolve({
path: "/monitoringManagement/mineVideo",
});
window.open(routeUrl.href, '_blank');
})
if(this.videoSelect1 == false){
this.videoSelect1 = true;
}else{
this.videoSelect1 = false;
this.kaungEZUIKitJsShow = false;
this.carsEZUIKitJsShow = false;
}
}
},
//矿山监控
lookFn1(){
this.kaungEZUIKitJsShow = true;
this.carsEZUIKitJsShow = false;
},
//车辆监控
lookFn2(){
this.kaungEZUIKitJsShow = false;
this.carsEZUIKitJsShow = true;
},
//车辆信息弹框
showSpecificInforFn(){
this.selectModule = 'carSpecificInfor';
......@@ -274,6 +319,10 @@ export default {
</script>
<style scope>
*{
margin: 0;
padding: 0;
}
.mapcontainer1 {
height: 100vh;
width: 100vw;
......@@ -304,6 +353,29 @@ export default {
position: relative;
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{
display: flex;
justify-content: space-evenly;
......@@ -317,8 +389,8 @@ export default {
justify-content: space-evenly;
position: absolute;
top: 2vh;
right: 15vw;
width: 20%;
right: 12vw;
width: 23%;
font-size: 22px;
}
.top_titl_left_textStyle1{
......
src/views/carManagement/carTrajectory/index.vue
View file @ 21f74085
......@@ -8,51 +8,32 @@
<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-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-select>
</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 icon="el-icon-refresh" @click="clearLimit" style="display: inline-block;">重置</el-button>
<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-select v-model="query.playSpeed" placeholder="请选择观看倍速" @change="changeSpeed()">
<el-option label="1倍" value="1"></el-option>
<el-option label="4倍" value="4"></el-option>
<el-option label="8倍" value="8"></el-option>
<el-option label="16倍" value="16"></el-option>
<el-option label="32倍" value="32"></el-option>
</el-select>
</el-form-item>
<!-- <el-button type="primary" plain style="font-size:15px;">显示所有轨迹</el-button> -->
</el-form>
<div id="centerDiv" class="mapcontainer2">
......@@ -81,30 +62,30 @@ export default {
configUrl: basePathUrl + 'config/config.json',
query:{
number:'',
startTime:'',
endTime:'',
bTime:'',
eTime:'',
playSpeed:'1',
},
carInformationData:[],
areaInformationData:[],
shuaxinTimer:null,
playSpeedNum:120,
playSpeedNum:5,
}
},
mounted() {
this.$nextTick(() => {
this.loadData();
this.$refs.mars3dViewerMapMethod.getCoordinate('','',5,'','');
})
},
methods: {
// 点击搜索
toSearch() {
let that = this;
//console.log(this.query.number);
HttpReq.truckDispatching.carInformationQuery({number:this.query.number}).then((res) => {
if(res.code == 200){
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 {
let that = this;
this.query = {
number:'',
startTime:'',
endTime:'',
bTime:'',
eTime:'',
playSpeed:'1',
};
this.playSpeedNum = 5;
this.loadData();
this.shuaxinTimer = new Date().getTime();
that.$refs.mars3dViewerMapMethod.getCoordinate('','',120);
that.$refs.mars3dViewerMapMethod.getCoordinate('','',5,'','');
},
//获取数据
loadData() {
......@@ -143,15 +125,15 @@ export default {
//改变倍速
changeSpeed(){
let that = this;
let numSpeed1 = 120 / parseInt(this.query.playSpeed);
this.playSpeedNum = parseInt(numSpeed1);
let numSpeed1 = 5 / parseFloat(this.query.playSpeed);
this.playSpeedNum = parseFloat(numSpeed1);
if(this.query.number == ''){
return;
}else{
HttpReq.truckDispatching.carInformationQuery({number:this.query.number}).then((res) => {
if(res.code == 200){
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 {
.device-manage{
.mapcontainer2{
border: 1px blue solid;
width: 80vw;
height: 65.5vh;
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