Skip to content

卡
卡车调度系统
Commit 53422a8a authored by xxx's avatar xxx
Browse files
Options

1

parent b52fddb1
Show whitespace changes
Inline Side-by-side
Showing with 295 additions and 108 deletions
src/views/MLargeScreen/components/smallComponents/DPcomputer16.vue
View file @ 53422a8a
......@@ -90,6 +90,8 @@
<slot name="bottom"></slot>
</div>
<div class="mengceng1" v-if="mengcengshow"></div>
<!-- 语音区域组件 -->
<div class="videoListView" v-if="dialogVisible">
<div class="videoListView_title">{{dialogTitle}}</div>
......@@ -116,12 +118,12 @@
<el-cascader v-model="zaDestination" :options="caiquData1"></el-cascader>
</el-form-item>
<el-form-item label="卸点区" style="display: inline-block;" class="des1">
<el-select v-model="xzDestination" placeholder="请选择卸点区" style="width:200px;">
<el-select v-model="xzDestination" placeholder="请选择卸点区">
<el-option v-for="(obj,index) in xiequData1" :label="obj.name" :value="obj.name" :key="index"></el-option>
</el-select>
</el-form-item>
<el-form-item label="时长" style="display: inline-block;" class="des1">
<el-select v-model="desform.duration" placeholder="请选择调度时长" style="width:200px;">
<el-select v-model="desform.duration" placeholder="请选择调度时长">
<el-option label="单次" value="单次"></el-option>
<el-option label="一天" value="一天"></el-option>
<el-option label="长期" value="长期"></el-option>
......@@ -173,6 +175,7 @@ export default {
dialogVisible:false,
resultBlob:null,
tanchuCarListArray:[], //弹出列表选中车辆
mengcengshow:false,//蒙层
//录音相关数据
type:"mp3",
......@@ -207,6 +210,7 @@ export default {
loadData(){
this.selectCarFleet = '';
this.dialogVisible = false;
this.mengcengshow = false;
this.selectCarRadioArray = [];
this.tanchuCarListArray = [];
this.peopleScheAssemblyShow = false;
......@@ -299,6 +303,8 @@ export default {
xintiaoCloseFn(){
//页面销毁时关闭长连接
this.websocketclose();
//关闭录音
this.recClose();
},
//搜索车辆
toSearchFn(){
......@@ -326,6 +332,7 @@ export default {
this.tanchuCarListArray = this.selectCarRadioArray;
}
this.dialogVisible = true;
this.mengcengshow = true;
//关闭人工调度组件
this.peopleScheAssemblyShow = false;
this.desform = {};
......@@ -339,11 +346,13 @@ export default {
}
//关闭发起通知组件
this.dialogVisible = false;
this.mengcengshow = true;
this.tanchuCarListArray = [];
},
//取消发送语音
quxiaoVideo(){
this.dialogVisible = false;
this.mengcengshow = false;
this.tanchuCarListArray = [];
this.selectCarRadioArray = [];
},
......@@ -445,6 +454,7 @@ export default {
duration: 2500
});
this.peopleScheAssemblyShow = false;
this.mengcengshow = false;
this.desform = {},
this.zaDestination = [];
this.xzDestination = '';
......@@ -476,6 +486,7 @@ export default {
//取消人工调度
peopleScheAssemblyCloseFn(){
this.peopleScheAssemblyShow = false;
this.mengcengshow = false;
this.desform = {};
this.zaDestination = [];
this.xzDestination = '';
......@@ -504,7 +515,7 @@ export default {
},
//WebSocket数据接收
websocketonmessage(e){
console.log("e",e);
//console.log("e",e);
if(e == undefined){
return
}else{
......@@ -518,7 +529,8 @@ export default {
},
//WebSocket关闭
websocketclose(e){
console.log("connection closed (" + e.code + ")");
//console.log("connection closed (" + e.code + ")");
console.log("connection closed !");
},
//WebSocket重连
reconnect(){
......@@ -826,6 +838,7 @@ export default {
clearInterval(this.heartbeatTimer);
this.heartbeatTimer = null;
}
this.xintiaoCloseFn();
}
}
</script>
......@@ -836,8 +849,8 @@ export default {
padding: 0;
}
.DPcomputer16Box{
height: 64vh;
overflow: hidden;
height: 64vh;
position: relative;
}
.DPcomputer16Box_1{
......@@ -848,6 +861,16 @@ export default {
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer16Box .mengceng1{
width: 20vw;
height: 64vh;
background-color: black;
opacity: 0.7;
position: absolute;
top: 0px;
left: 0px;
z-index: 40;
}
.DPcomputer16Box .intelligentSchScrView_leftView_title{
margin-bottom: 5px;
width: 100%;
......@@ -1048,11 +1071,11 @@ export default {
}
.DPcomputer16Box .videoListView{
position: absolute;
top: 5vh;
left: 20vw;
bottom: 1vh;
left: 1.1vw;
height: 47vh;
width: 35vh;
z-index: 3;
width: 18vw;
z-index: 50;
background:no-repeat center center url('~@/assets/images/cutGraph/guzhangshenbankuang1.png');
background-size:100% 100%;
padding: 10px 10px 0px;
......@@ -1110,11 +1133,11 @@ export default {
}
.DPcomputer16Box .peopleScheAssembly{
position: absolute;
bottom: 10vh;
left: 20vw;
bottom: 1vh;
left: 0.7vw;
height: 50vh;
width: 40vh;
z-index: 3;
width: 18.5vw;
z-index: 50;
background:no-repeat center center url('~@/assets/images/cutGraph/guzhangshenbankuang1.png');
background-size:100% 100%;
padding: 10px 10px 0px;
......
src/views/MLargeScreen/index.vue
View file @ 53422a8a
......@@ -23,10 +23,15 @@
</div>
<!-- 内容 -->
<div class="content_view">
<dataScreening ref="dataScreeningMethod" v-show="selectModule == 'dataScreening'"/>
<carManagement ref="carManagementMethod" v-show="selectModule == 'carManagement'"/>
<intelligentSchedul ref="intelligentSchedulMethod" v-show="selectModule == 'intelligentSchedul'"/>
<dataAnalysis ref="dataAnalysisMethod" v-show="selectModule == 'dataAnalysis'"/>
<div class="content_view_left">
<components :is="item.componentName" v-for="(item,index) in allComponents.left" :key="index"></components>
</div>
<div class="content_view_center">
<components :is="item.componentName" v-for="(item,index) in allComponents.center" :key="index"></components>
</div>
<div class="content_view_right">
<components :is="item.componentName" v-for="(item,index) in allComponents.right" :key="index"></components>
</div>
</div>
<!-- 监控区域 -->
<div class="jiankongView">
......@@ -46,24 +51,74 @@
<script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import dataScreening from './components/dataScreening/index.vue' //数据总览
import carManagement from './components/carManagement/index.vue' //车辆管理
import intelligentSchedul from './components/intelligentSchedul/index.vue' //智能调度
import dataAnalysis from './components/dataAnalysis/index.vue' //数据分析
import carsEZUIKitJs from '../../components/ezuikit/carsEZUIKitJs.vue'//车辆监控
import kaungEZUIKitJs from '../../components/ezuikit/EZUIKitJs.vue'//矿山监控
import DPcomputer1 from './components/smallComponents/DPcomputer1.vue'
import DPcomputer2 from './components/smallComponents/DPcomputer2.vue'
import DPcomputer3 from './components/smallComponents/DPcomputer3.vue'
import DPcomputer4 from './components/smallComponents/DPcomputer4.vue'
import DPcomputer5 from './components/smallComponents/DPcomputer5.vue'
import DPcomputer6 from './components/smallComponents/DPcomputer6.vue'
import DPcomputer7 from './components/smallComponents/DPcomputer7.vue'
import DPcomputer8 from './components/smallComponents/DPcomputer8.vue'
import DPcomputer9 from './components/smallComponents/DPcomputer9.vue'
import DPcomputer10 from './components/smallComponents/DPcomputer10.vue'
import DPcomputer11 from './components/smallComponents/DPcomputer11.vue'
import DPcomputer12 from './components/smallComponents/DPcomputer12.vue'
import DPcomputer13 from './components/smallComponents/DPcomputer13.vue'
import DPcomputer14 from './components/smallComponents/DPcomputer14.vue'
import DPcomputer15 from './components/smallComponents/DPcomputer15.vue'
import DPcomputer16 from './components/smallComponents/DPcomputer16.vue'
import DPcomputer17 from './components/smallComponents/DPcomputer17.vue'
import DPcomputer18 from './components/smallComponents/DPcomputer18.vue'
import DPcomputer19 from './components/smallComponents/DPcomputer19.vue'
import DPcomputer20 from './components/smallComponents/DPcomputer20.vue'
import DPcomputer21 from './components/smallComponents/DPcomputer21.vue'
import DPcomputer22 from './components/smallComponents/DPcomputer22.vue'
import DPcomputer23 from './components/smallComponents/DPcomputer23.vue'
import DPcomputer24 from './components/smallComponents/DPcomputer24.vue'
import DPcomputer25 from './components/smallComponents/DPcomputer25.vue'
import DPcomputer26 from './components/smallComponents/DPcomputer26.vue'
import DPcomputer27 from './components/smallComponents/DPcomputer27.vue'
import DPcomputer28 from './components/smallComponents/DPcomputer28.vue'
export default {
components: {
dataScreening,
carManagement,
intelligentSchedul,
dataAnalysis,
carsEZUIKitJs,
kaungEZUIKitJs,
DPcomputer1,
DPcomputer2,
DPcomputer3,
DPcomputer4,
DPcomputer5,
DPcomputer6,
DPcomputer7,
DPcomputer8,
DPcomputer9,
DPcomputer10,
DPcomputer11,
DPcomputer12,
DPcomputer13,
DPcomputer14,
DPcomputer15,
DPcomputer16,
DPcomputer17,
DPcomputer18,
DPcomputer19,
DPcomputer20,
DPcomputer21,
DPcomputer22,
DPcomputer23,
DPcomputer24,
DPcomputer25,
DPcomputer26,
DPcomputer27,
DPcomputer28,
},
data() {
return {
websocket: null,
websocketHeadBeatTimer:null,
//监控视频
iframeSrc:'',
defaultIframeSrc:'http://oa.gemho.cn:8088/808gps/open/player/video.html?lang=zh&channel=9&account=admin&password=admin&vehiIdno=',
......@@ -73,13 +128,6 @@ export default {
currentTime:'',
//选择模块
selectModule:'',
//各模块展示传值
isShow:{
dataScreening:false,
carManagement:false,
intelligentSchedul:false,
dataAnalysis:false,
},
//标题菜单数据
topSmallTitleLeftData:[],
topSmallTitleRightData:[],
......@@ -91,15 +139,28 @@ export default {
monitorCover1Show:false,
//视频监控配置
videoSelectStyle:2,
//组件数据
allComponents:{
left:[],
center:[],
right:[],
},
}
},
mounted() {
this.loadData();
//右上角时钟
this.setNowTimes();
this.timer = setInterval(() => {
this.setNowTimes();
}, 1000)
window.addEventListener('message', this.handleMessage);
//开启WebSocket连接以及心跳
this.initWebSocket();
this.websocketHeadBeatTimer = setInterval(() => {
this.reconnect();
}, 20000)
//与嵌入的地图页面进行交互
//window.addEventListener('message', this.handleMessage);
},
methods: {
loadData() {
......@@ -119,94 +180,111 @@ export default {
this.topSmallTitleRightData = rightTemporaryData;
}
})
//开启websocket
this.$refs.intelligentSchedulMethod.loadData3();
})
},
//选择展示模块
changeOver(item){
this.selectModule = item.componentName;
if(item.componentName == 'dataScreening'){
if(this.isShow.dataScreening == false){
this.$refs.dataScreeningMethod.loadData(true);
this.isShow.dataScreening = true;
this.isShow.carManagement = false;
this.isShow.intelligentSchedul = false;
this.isShow.dataAnalysis = false;
}else{
this.$refs.dataScreeningMethod.loadData(false);
this.isShow.dataScreening = false;
}
this.$refs.carManagementMethod.loadData(false);
this.$refs.intelligentSchedulMethod.loadData(false);
this.$refs.dataAnalysisMethod.loadData(false);
this.videoSelect1 = false;
this.kaungEZUIKitJsShow = false;
this.carsEZUIKitJsShow = false;
HttpReq.truckDispatching.screenTitleMenuQuery({status:1,pid:item.children,sort:'dsort'}).then((res) => {
if(res.code == 200){
let left1 = [];
let center1 = [];
let right1 = [];
res.data.content.forEach((item,index)=>{
if(item.pos == 'left'){
left1.push(item);
}else if(item.pos == 'right'){
right1.push(item);
}else if(item.pos == 'center'){
center1.push(item);
}
if(item.componentName == 'carManagement'){
if(this.isShow.carManagement == false){
this.$refs.carManagementMethod.loadData(true);
this.isShow.carManagement = true;
this.isShow.dataScreening = false;
this.isShow.intelligentSchedul = false;
this.isShow.dataAnalysis = false;
}else{
this.$refs.carManagementMethod.loadData(false);
this.isShow.carManagement = false;
})
this.allComponents.left = left1;
this.allComponents.center = center1;
this.allComponents.right = right1;
}
})
}
this.$refs.dataScreeningMethod.loadData(false);
this.$refs.intelligentSchedulMethod.loadData(false);
this.$refs.dataAnalysisMethod.loadData(false);
if(item.componentName == 'carManagement'){
this.videoSelect1 = false;
this.kaungEZUIKitJsShow = false;
this.carsEZUIKitJsShow = false;
HttpReq.truckDispatching.screenTitleMenuQuery({status:1,pid:item.children,sort:'dsort'}).then((res) => {
if(res.code == 200){
let left1 = [];
let center1 = [];
let right1 = [];
res.data.content.forEach((item,index)=>{
if(item.pos == 'left'){
left1.push(item);
}else if(item.pos == 'right'){
right1.push(item);
}else if(item.pos == 'center'){
center1.push(item);
}
if(item.componentName == 'intelligentSchedul'){
if(this.isShow.intelligentSchedul == false){
this.$refs.intelligentSchedulMethod.loadData(true);
this.isShow.intelligentSchedul = true;
this.isShow.dataScreening = false;
this.isShow.carManagement = false;
this.isShow.dataAnalysis = false;
}else{
this.$refs.intelligentSchedulMethod.loadData(false);
this.isShow.intelligentSchedul = false;
})
this.allComponents.left = left1;
this.allComponents.center = center1;
this.allComponents.right = right1;
}
})
}
this.$refs.dataScreeningMethod.loadData(false);
this.$refs.carManagementMethod.loadData(false);
this.$refs.dataAnalysisMethod.loadData(false);
if(item.componentName == 'intelligentSchedul'){
this.videoSelect1 = false;
this.kaungEZUIKitJsShow = false;
this.carsEZUIKitJsShow = false;
HttpReq.truckDispatching.screenTitleMenuQuery({status:1,pid:item.children,sort:'dsort'}).then((res) => {
if(res.code == 200){
let left1 = [];
let center1 = [];
let right1 = [];
res.data.content.forEach((item,index)=>{
if(item.pos == 'left'){
left1.push(item);
}else if(item.pos == 'right'){
right1.push(item);
}else if(item.pos == 'center'){
center1.push(item);
}
if(item.componentName == 'dataAnalysis'){
if(this.isShow.dataAnalysis == false){
this.$refs.dataAnalysisMethod.loadData(true);
this.isShow.dataAnalysis = true;
this.isShow.dataScreening = false;
this.isShow.carManagement = false;
this.isShow.intelligentSchedul = false;
}else{
this.$refs.dataAnalysisMethod.loadData(false);
this.isShow.dataAnalysis = false;
})
this.allComponents.left = left1;
this.allComponents.center = center1;
this.allComponents.right = right1;
}
this.$refs.dataScreeningMethod.loadData(false);
this.$refs.carManagementMethod.loadData(false);
this.$refs.intelligentSchedulMethod.loadData(false);
})
}
if(item.componentName == 'dataAnalysis'){
this.videoSelect1 = false;
this.kaungEZUIKitJsShow = false;
this.carsEZUIKitJsShow = false;
HttpReq.truckDispatching.screenTitleMenuQuery({status:1,pid:item.children,sort:'dsort'}).then((res) => {
if(res.code == 200){
let left1 = [];
let center1 = [];
let right1 = [];
res.data.content.forEach((item,index)=>{
if(item.pos == 'left'){
left1.push(item);
}else if(item.pos == 'right'){
right1.push(item);
}else if(item.pos == 'center'){
center1.push(item);
}
})
this.allComponents.left = left1;
this.allComponents.center = center1;
this.allComponents.right = right1;
}
})
}
if(item.componentName == 'backstage'){
this.isShow.dataScreening = false;
this.isShow.carManagement = false;
this.isShow.intelligentSchedul = false;
this.isShow.dataAnalysis = false;
this.$refs.dataScreeningMethod.loadData(false);
this.$refs.carManagementMethod.loadData(false);
this.$refs.intelligentSchedulMethod.loadData(false);
this.$refs.dataAnalysisMethod.loadData(false);
this.allComponents.left = [];
this.allComponents.center = [];
this.allComponents.right = [];
this.$nextTick(()=>{
let routeUrl = this.$router.resolve({
path: "/dashboard",
......@@ -218,14 +296,9 @@ export default {
this.carsEZUIKitJsShow = false;
}
if(item.componentName == 'toVideoSurveillance'){
this.isShow.dataScreening = false;
this.isShow.carManagement = false;
this.isShow.intelligentSchedul = false;
this.isShow.dataAnalysis = false;
this.$refs.dataScreeningMethod.loadData(false);
this.$refs.carManagementMethod.loadData(false);
this.$refs.intelligentSchedulMethod.loadData(false);
this.$refs.dataAnalysisMethod.loadData(false);
this.allComponents.left = [];
this.allComponents.center = [];
this.allComponents.right = [];
if(this.videoSelect1 == false){
this.videoSelect1 = true;
this.lookFn2();
......@@ -234,7 +307,6 @@ export default {
this.kaungEZUIKitJsShow = false;
this.carsEZUIKitJsShow = false;
}
}
},
//矿山监控
......@@ -278,12 +350,75 @@ export default {
this.iframeSrc = '';
this.monitorCover1Show = false;
},
//初始化weosocket
initWebSocket(){
//const wsuri = "ws://114.116.108.246:81/websocket/socketServer?userId="+userId;//连接地址，可加参数
const wsuri = process.env.VUE_APP_WS_API + "/" + 'pcBigScreen';
this.websocket = new WebSocket(wsuri);
this.websocket.onopen = this.websocketonopen;
this.websocket.onerror = this.websocketonerror;
this.websocket.onmessage = this.websocketonmessage;
this.websocket.onclose = this.websocketclose;
this.websocketonmessage();
},
//WebSocket连接成功
websocketonopen() {
console.log("WebSocket连接成功");
},
//WebSocket连接错误
websocketonerror(e) {
console.log("WebSocket连接发生错误");
},
//WebSocket数据接收
websocketonmessage(e){
//console.log("e",e);
if(e == undefined){
return
}else{
let obj1 = JSON.parse(e.data);
HttpReq.truckDispatching.recentNoticeAdd({noticeClass:obj1.fromUserId,flag:1,videoContent:obj1.contentText}).then((res) => {}).catch(function(error) { });
}
},
//WebSocket数据发送
websocketsend(agentData){
this.websocket.send(agentData);
},
//WebSocket关闭
websocketclose(e){
//console.log("connection closed (" + e.code + ")");
console.log("connection closed !");
},
//WebSocket重连
reconnect(){
var This=this;
if (this.websocket.readyState === 1) { // that.websock.readyState = 1 表示连接成功，可以立即发送信息
This.websocketonmessage();
} else if (this.websocket.readyState === 0) { // 表示正在连接，设置300ms后发送信息
setTimeout(function () {
This.websocketonmessage();
}, 300);
} else { // 连接未创建或者创建失败，则重新创建连接，并设置500ms后发送信息
This.initWebSocket();
setTimeout(function () {
This.websocketonmessage();
}, 500);
}
},
},
beforeDestroy(){
this.$refs.intelligentSchedulMethod.xintiaoCloseFn();
if(this.timer) {
clearInterval(this.timer);
this.timer = null;
}
if(this.websocketHeadBeatTimer) {
clearInterval(this.websocketHeadBeatTimer);
this.websocketHeadBeatTimer = null;
}
//页面销毁时关闭长连接
this.websocketclose();
}
}
</script>
......@@ -316,11 +451,40 @@ export default {
z-index: 3;
}
.content_view{
width: 100%;
width: 100vw;
height: 94vh;
overflow: hidden;
position: relative;
bottom: 0px;
display: flex;
justify-content: space-between;
}
.content_view_left{
width: 20vw;
height: 94vh;
overflow-y: scroll;
z-index: 3;
}
.content_view_left::-webkit-scrollbar {
display: none;
}
.content_view_center{
width: 60vw;
height: 23.5vh;
overflow: hidden;
position: absolute;
left: 20vw;
bottom: 0px;
z-index: 3;
}
.content_view_right{
width: 20vw;
height: 94vh;
overflow-y: scroll;
z-index: 3;
}
.content_view_right::-webkit-scrollbar {
display: none;
}
.videoSelectView{
position: absolute;
......
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