Skip to content

K
kd_control
Commit 30b11f22 authored by zhanglw's avatar zhanglw
Browse files
Options

卡车动态

parent 8ea0f8fb
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1141 additions and 1103 deletions
src/assets/js/common.js
View file @ 30b11f22
...@@ -2387,7 +2387,7 @@ var HttpReq = function(){ ...@@ -2387,7 +2387,7 @@ var HttpReq = function(){
//大屏智能调度——车辆区域分布 //大屏智能调度——车辆区域分布
getLargeScreenfenbu1: function(param){ getLargeScreenfenbu1: function(param){
return request({ return request({
url: '/api/Dispatch/areaCar', url: '/api/dispatchScreen/carLocationDistribution',
method: 'get', method: 'get',
params:param params:param
}) })
...@@ -2395,7 +2395,7 @@ var HttpReq = function(){ ...@@ -2395,7 +2395,7 @@ var HttpReq = function(){
//大屏智能调度——采区车铲比 //大屏智能调度——采区车铲比
getLargeScreenchechanbi1: function(param){ getLargeScreenchechanbi1: function(param){
return request({ return request({
url: '/api/Dispatch/areaCarShovel', url: '/api/dispatchScreen/cheChanRatio',
method: 'get', method: 'get',
params:param params:param
}) })
...@@ -3082,6 +3082,32 @@ var HttpReq = function(){ ...@@ -3082,6 +3082,32 @@ var HttpReq = function(){
data: data, data: data,
}) })
}, },
//大屏车辆调度信息
dpCarDispatchInformation: function(param){
return request({
url: '/api/dispatchScreen/todayCarDispatchInformation',
method: 'get',
params:param,
})
},
//大屏卡车动态
dpKcDynamics: function(param){
return request({
url: '/api/carManager/kcDynamics',
method: 'get',
params:param,
})
},
//大屏铲车动态
dpCcDynamics: function(param){
return request({
url: '/api/carManager/ccDynamics',
method: 'get',
params:param,
})
},
}, },
......
src/components/ezuikit/EZUIKitJs.vue
View file @ 30b11f22
...@@ -847,9 +847,10 @@ export default { ...@@ -847,9 +847,10 @@ export default {
height: 94.5vh; height: 94.5vh;
overflow: hidden; overflow: hidden;
background-color: white; background-color: white;
position: relative; position: absolute;
left: 20vw;
top: 0;
z-index: 3; z-index: 3;
border-left: 1px solid gainsboro;
} }
.video111 .iframeSingle { .video111 .iframeSingle {
width: 60vw; width: 60vw;
......
src/components/ezuikit/carsEZUIKitJs.vue
View file @ 30b11f22
...@@ -898,9 +898,11 @@ export default { ...@@ -898,9 +898,11 @@ export default {
height: 94.5vh; height: 94.5vh;
overflow: hidden; overflow: hidden;
background-color: white; background-color: white;
position: relative; position: absolute;
left: 20vw;
top: 0;
z-index: 3; z-index: 3;
border-left: 1px solid gainsboro; /*border-left: 1px solid gainsboro;*/
} }
.video111 .iframeSingle { .video111 .iframeSingle {
width: 60vw; width: 60vw;
......
src/views/MLargeScreen/components/smallComponents/DPcomputer15.vue
View file @ 30b11f22
...@@ -41,9 +41,9 @@ ...@@ -41,9 +41,9 @@
<div class="carDynamicContent2"> <div class="carDynamicContent2">
<img src="../../../../assets/images/cutGraph/tuiyuan1.png"> <img src="../../../../assets/images/cutGraph/tuiyuan1.png">
<div> <div>
<div style="color:white;text-align: center;">{{otherCarDynamicListData.loadArea ? otherCarDynamicListData.loadArea : '无'}}</div> <div style="color:white;text-align: center;">{{otherCarDynamicListData.loadArea ? otherCarDynamicListData.loadArea : ''}}</div>
<img src="../../../../assets/images/cutGraph/zu2603.png"> <img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">{{otherCarDynamicListData.unloadArea ? otherCarDynamicListData.unloadArea : '无'}}</div> <div style="color:white;text-align: center;">{{otherCarDynamicListData.unloadArea ? otherCarDynamicListData.unloadArea : ''}}</div>
</div> </div>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png"> <img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div> </div>
...@@ -71,8 +71,8 @@ export default { ...@@ -71,8 +71,8 @@ export default {
mil:0, mil:0,
startTime:'无', startTime:'无',
endTime:'无', endTime:'无',
loadArea:'无', loadArea:'',
unloadArea:'无', unloadArea:'',
}, },
} }
}, },
...@@ -135,8 +135,8 @@ export default { ...@@ -135,8 +135,8 @@ export default {
this.otherCarDynamicListData.mil = 0; this.otherCarDynamicListData.mil = 0;
this.otherCarDynamicListData.startTime = '无'; this.otherCarDynamicListData.startTime = '无';
this.otherCarDynamicListData.endTime = '无'; this.otherCarDynamicListData.endTime = '无';
this.otherCarDynamicListData.loadArea = '无'; this.otherCarDynamicListData.loadArea = '';
this.otherCarDynamicListData.unloadArea = '无'; this.otherCarDynamicListData.unloadArea = '';
} }
this.otherCarDynamicListData.num2 = this.otherCarDynamicListData.num2 + 1; this.otherCarDynamicListData.num2 = this.otherCarDynamicListData.num2 + 1;
}) })
...@@ -161,8 +161,8 @@ export default { ...@@ -161,8 +161,8 @@ export default {
this.otherCarDynamicListData.mil = 0; this.otherCarDynamicListData.mil = 0;
this.otherCarDynamicListData.startTime = '无'; this.otherCarDynamicListData.startTime = '无';
this.otherCarDynamicListData.endTime = '无'; this.otherCarDynamicListData.endTime = '无';
this.otherCarDynamicListData.loadArea = '无'; this.otherCarDynamicListData.loadArea = '';
this.otherCarDynamicListData.unloadArea = '无'; this.otherCarDynamicListData.unloadArea = '';
} }
}) })
}, },
......
src/views/MLargeScreen/components/smallComponents/DPcomputer18.vue
View file @ 30b11f22
...@@ -8,14 +8,14 @@ ...@@ -8,14 +8,14 @@
<img src="../../../../assets/images/cutGraph/zhengzaijinxing1.png"> <img src="../../../../assets/images/cutGraph/zhengzaijinxing1.png">
<div style="color:#F8D909;text-align: center;"> <div style="color:#F8D909;text-align: center;">
<div style="font-size:16px;">正在派送中</div> <div style="font-size:16px;">正在派送中</div>
<div style="font-size:22px;">{{dispatchLoadingNum}}</div> <div style="font-size:22px;">{{ numberOfDispatching }}</div>
</div> </div>
</div> </div>
<div> <div>
<img src="../../../../assets/images/cutGraph/wanchengle1.png"> <img src="../../../../assets/images/cutGraph/wanchengle1.png">
<div style="color:#01EDF7;text-align: center;"> <div style="color:#01EDF7;text-align: center;">
<div style="font-size:16px;">已经完成的</div> <div style="font-size:16px;">已经完成的</div>
<div style="font-size:22px;">{{dispatchFinishNum}}</div> <div style="font-size:22px;">{{ numberOfDispatched }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -26,16 +26,16 @@ ...@@ -26,16 +26,16 @@
<dt> <dt>
<div>车牌号</div> <div>车牌号</div>
<div>起点</div> <div>起点</div>
<div>调度时间</div>
<div>状态</div> <div>状态</div>
<div>目的地</div> <div>目标</div>
<div>时间</div>
</dt> </dt>
<dd v-for="(item,index) in dispatchDetailsList" :key="index"> <dd v-for="(item,index) in dispatchingDetails" :key="index">
<div>{{item.carNo}}</div> <div>{{ item.carNumber }}</div>
<div>{{item.startAdr}}</div> <div>{{ item.startArea }}</div>
<div>{{item.createTime}}</div> <div>{{ item.status}}</div>
<div>{{item.status == 0 ? '接单中' : item.status == 1 ? '已完成' : '未完成'}}</div> <div>{{ item.endArea }}</div>
<div>{{item.destination}}</div> <div>{{ formatTime(item.dispatchingTime) }}</div>
</dd> </dd>
</dl> </dl>
</div> </div>
...@@ -46,71 +46,41 @@ ...@@ -46,71 +46,41 @@
</template> </template>
<script> <script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; import {Tools, HttpReq, CAMap} from '@/assets/js/common.js';
export default { export default {
data(){ data() {
return { return {
DPcomputer18BoxTimer:null, DPcomputer18BoxTimer: null,
dispatchLoadingNum:0, //智能调度进行中 numberOfDispatching: 0, //智能调度进行中
dispatchFinishNum:0, //智能调度已完成 numberOfDispatched: 0, //智能调度已完成
dispatchDetailsList:[], //智能调度情况表 dispatchingDetails: [], //智能调度情况表
} }
}, },
mounted(){ mounted() {
this.loadData(); this.loadData();
},
methods:{
loadData(){
//智能调度情况
HttpReq.truckDispatching.getLargeScreen1({size:100,sort:'createTime,desc'}).then((res) => {
this.dispatchDetailsList = res;
})
//获取智能调度情况中的进行中数量
HttpReq.truckDispatching.getLargeScreenUnder1({size:9999}).then((res) => {
if(res.length == 0){
this.dispatchLoadingNum = 0;
}else{
this.dispatchLoadingNum = res[0].under;
}
})
//获取智能调度情况中的已完成数量
HttpReq.truckDispatching.getLargeScreenRound1({size:9999}).then((res) => {
if(res.length == 0){
this.dispatchFinishNum = 0;
}else{
this.dispatchFinishNum = res[0].round;
}
})
this.DPcomputer18BoxTimer = setInterval(() => { this.DPcomputer18BoxTimer = setInterval(() => {
//智能调度情况 this.loadData();
HttpReq.truckDispatching.getLargeScreen1({size:100,sort:'createTime,desc'}).then((res) => { }, 10000)
this.dispatchDetailsList = res; },
}) methods: {
//获取智能调度情况中的进行中数量 loadData() {
HttpReq.truckDispatching.getLargeScreenUnder1({size:9999}).then((res) => { HttpReq.truckDispatching.dpCarDispatchInformation().then((res) => {
if(res.length == 0){ if(res.data){
this.dispatchLoadingNum = 0; this.numberOfDispatching=res.data.numberOfDispatching;
}else{ this.numberOfDispatched=res.data.numberOfDispatched;
this.dispatchLoadingNum = res[0].under; this.dispatchingDetails=res.data.dispatchingDetails;
}
})
//获取智能调度情况中的已完成数量
HttpReq.truckDispatching.getLargeScreenRound1({size:9999}).then((res) => {
if(res.length == 0){
this.dispatchFinishNum = 0;
}else{
this.dispatchFinishNum = res[0].round;
} }
}) })
}, 10000)
}, },
formatTime(t) {
let d = new Date(t);
return `${('0' + (d.getHours() + 1)).substr(-2)}:${('0' + (d.getMonth() + 1)).substr(-2)}:${('0' + (d.getSeconds())).substr(-2)}`;
}
}, },
beforeDestroy(){ beforeDestroy() {
if(this.DPcomputer18BoxTimer) { if (this.DPcomputer18BoxTimer) {
clearInterval(this.DPcomputer18BoxTimer); clearInterval(this.DPcomputer18BoxTimer);
this.DPcomputer18BoxTimer = null; this.DPcomputer18BoxTimer = null;
} }
...@@ -119,24 +89,26 @@ export default { ...@@ -119,24 +89,26 @@ export default {
</script> </script>
<style scoped> <style scoped>
*{ * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer18Box{
.DPcomputer18Box {
width: 20vw; width: 20vw;
height: 32vh; height: 32vh;
background-color: rgba(32,42,67,0.95); background-color: rgba(32, 42, 67, 0.95);
padding: 5px 7px; padding: 5px 7px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
} }
.DPcomputer18Box .intelligentSchScrView_rightView_title{
.DPcomputer18Box .intelligentSchScrView_rightView_title {
margin-bottom: 5px; margin-bottom: 5px;
width: 100%; width: 100%;
height: 3.5vh; height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png'); background: no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%; background-size: 100% 100%;
padding-left: 10px; padding-left: 10px;
box-sizing: border-box; box-sizing: border-box;
font-size: 18px; font-size: 18px;
...@@ -145,59 +117,70 @@ export default { ...@@ -145,59 +117,70 @@ export default {
letter-spacing: 1px; letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF; text-shadow: 1px 1px 1px #92CBFF;
} }
.DPcomputer18Box .intelligentSchScrView_rightView_content{
.DPcomputer18Box .intelligentSchScrView_rightView_content {
width: 100%; width: 100%;
} }
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_top{
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_top {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_top>div{
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_top > div {
width: 49%; width: 49%;
height: 6vh; height: 6vh;
background:no-repeat center center url('~@/assets/images/cutGraph/sijirenshu1.png'); background: no-repeat center center url('~@/assets/images/cutGraph/sijirenshu1.png');
background-size:100% 100%; background-size: 100% 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: space-evenly;
} }
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom{
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom {
width: 100%; width: 100%;
height: 21.5vh; height: 21.5vh;
} }
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom_rolling{
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom_rolling {
text-align: center; text-align: center;
height: 21.5vh; height: 21.5vh;
overflow-y:auto; overflow-y: auto;
scrollbar-width: none; scrollbar-width: none;
} }
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom_rolling::-webkit-scrollbar { .DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom_rolling::-webkit-scrollbar {
display: none; display: none;
} }
.DPcomputer18Box dl{
display:table; .DPcomputer18Box dl {
width:100%; display: table;
width: 100%;
} }
.DPcomputer18Box dt{
.DPcomputer18Box dt {
margin-top: 20px; margin-top: 20px;
display:table-row; display: table-row;
background-color: #274088; background-color: #274088;
} }
.DPcomputer18Box dt>div{
display:table-cell; .DPcomputer18Box dt > div {
padding:5px 3px; display: table-cell;
padding: 5px 3px;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: rgb(24,228,240); color: rgb(24, 228, 240);
} }
.DPcomputer18Box dd{
display:table-row; .DPcomputer18Box dd {
display: table-row;
} }
.DPcomputer18Box dd>div{
display:table-cell; .DPcomputer18Box dd > div {
display: table-cell;
vertical-align: middle; vertical-align: middle;
padding:5px 1px; padding: 5px 1px;
font-size: 13px; font-size: 13px;
color: #A6F6F9; color: #A6F6F9;
} }
......
src/views/MLargeScreen/components/smallComponents/DPcomputer19.vue
View file @ 30b11f22
...@@ -9,62 +9,43 @@ ...@@ -9,62 +9,43 @@
</template> </template>
<script> <script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; import {Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
data(){ data() {
return { return {
DPcomputer19BoxTimer:null, DPcomputer19BoxTimer: null,
//车辆区域分布Echarts //车辆区域分布Echarts
carsAreaDistributionData:{ carsAreaDistributionData: {
name:[], name: [],
kache:[], kache: [],
chanche:[], chanche: [],
qitache:[], qitache: [],
}, },
} }
}, },
mounted(){ mounted() {
this.loadData(); this.loadData();
},
methods:{
loadData(){
//车辆区域分布Echarts
HttpReq.truckDispatching.getLargeScreenfenbu1({size:9999}).then((res) => {
if(res.code == 200){
let name = [];
let kache = [];
let chanche = [];
let qitache = [];
res.data.forEach((item,index)=>{
name.push(item.name);
kache.push(item.truck);
chanche.push(item.shovel);
qitache.push(item.other);
})
this.carsAreaDistributionData.name = name;
this.carsAreaDistributionData.kache = kache;
this.carsAreaDistributionData.chanche = chanche;
this.carsAreaDistributionData.qitache = qitache;
this.carsAreaDistributionEcharts();
}
})
this.DPcomputer19BoxTimer = setInterval(() => { this.DPcomputer19BoxTimer = setInterval(() => {
this.loadData();
}, 60000)
},
methods: {
loadData() {
//车辆区域分布Echarts //车辆区域分布Echarts
HttpReq.truckDispatching.getLargeScreenfenbu1({size:9999}).then((res) => { HttpReq.truckDispatching.getLargeScreenfenbu1().then((res) => {
if(res.code == 200){ if (res.code == 200) {
let name = []; let name = [];
let kache = []; let kache = [];
let chanche = []; let chanche = [];
let qitache = []; let qitache = [];
res.data.forEach((item,index)=>{ res.data.forEach((item, index) => {
name.push(item.name); name.push(item.area);
kache.push(item.truck); kache.push(item.kcNumber);
chanche.push(item.shovel); chanche.push(item.ccNumber);
qitache.push(item.other); qitache.push(item.otherNumber);
}) })
this.carsAreaDistributionData.name = name; this.carsAreaDistributionData.name = name;
this.carsAreaDistributionData.kache = kache; this.carsAreaDistributionData.kache = kache;
...@@ -73,11 +54,14 @@ export default { ...@@ -73,11 +54,14 @@ export default {
this.carsAreaDistributionEcharts(); this.carsAreaDistributionEcharts();
} }
}) })
},10000)
}, },
//车辆区域分布Echarts //车辆区域分布Echarts
carsAreaDistributionEcharts(){ carsAreaDistributionEcharts() {
let xZoom=Math.ceil(4/this.carsAreaDistributionData.name.length*100);
if(xZoom>100){
xZoom=100
}
echarts.init(document.getElementById('carsAreaDistributionView')).dispose(); echarts.init(document.getElementById('carsAreaDistributionView')).dispose();
var myChart = echarts.init(document.getElementById('carsAreaDistributionView')); var myChart = echarts.init(document.getElementById('carsAreaDistributionView'));
var option = { var option = {
...@@ -88,9 +72,9 @@ export default { ...@@ -88,9 +72,9 @@ export default {
} }
}, },
legend: { legend: {
textStyle:{ textStyle: {
color: 'white', color: 'white',
fontSize:16, fontSize: 16,
} }
}, },
grid: { grid: {
...@@ -100,14 +84,27 @@ export default { ...@@ -100,14 +84,27 @@ export default {
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
dataZoom: [
{
type: 'inside',
start: 0,
end: xZoom
},
{
start: 0,
end: xZoom,
show: false,
}
],
xAxis: { xAxis: {
type: 'category', type: 'category',
data: this.carsAreaDistributionData.name, data: this.carsAreaDistributionData.name,
axisLabel: { axisLabel: {
interval: 0,
show: true, show: true,
textStyle: { textStyle: {
color: '#A6F6F9', color: '#A6F6F9',
fontSize:14, fontSize: 12,
} }
}, },
axisLine: { axisLine: {
...@@ -124,7 +121,7 @@ export default { ...@@ -124,7 +121,7 @@ export default {
show: true, show: true,
textStyle: { textStyle: {
color: '#A6F6F9', color: '#A6F6F9',
fontSize:14, fontSize: 14,
} }
}, },
axisLine: { axisLine: {
...@@ -138,12 +135,8 @@ export default { ...@@ -138,12 +135,8 @@ export default {
{ {
name: '卡车', name: '卡车',
type: 'bar', type: 'bar',
stack: 'total',
label: {
show: true
},
data: this.carsAreaDistributionData.kache, data: this.carsAreaDistributionData.kache,
barWidth: 30,
itemStyle: { itemStyle: {
color: '#2BBFA8' color: '#2BBFA8'
}, },
...@@ -151,12 +144,8 @@ export default { ...@@ -151,12 +144,8 @@ export default {
{ {
name: '铲车', name: '铲车',
type: 'bar', type: 'bar',
stack: 'total',
label: {
show: true
},
data: this.carsAreaDistributionData.chanche, data: this.carsAreaDistributionData.chanche,
barWidth: 35,
itemStyle: { itemStyle: {
color: '#DB972D' color: '#DB972D'
}, },
...@@ -164,12 +153,8 @@ export default { ...@@ -164,12 +153,8 @@ export default {
{ {
name: '其他车辆', name: '其他车辆',
type: 'bar', type: 'bar',
stack: 'total',
label: {
show: true
},
data: this.carsAreaDistributionData.qitache, data: this.carsAreaDistributionData.qitache,
barWidth: 35,
itemStyle: { itemStyle: {
color: '#158DFD' color: '#158DFD'
}, },
...@@ -180,8 +165,8 @@ export default { ...@@ -180,8 +165,8 @@ export default {
}, },
}, },
beforeDestroy(){ beforeDestroy() {
if(this.DPcomputer19BoxTimer) { if (this.DPcomputer19BoxTimer) {
clearInterval(this.DPcomputer19BoxTimer); clearInterval(this.DPcomputer19BoxTimer);
this.DPcomputer19BoxTimer = null; this.DPcomputer19BoxTimer = null;
} }
...@@ -190,24 +175,26 @@ export default { ...@@ -190,24 +175,26 @@ export default {
</script> </script>
<style scoped> <style scoped>
*{ * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer19Box{
.DPcomputer19Box {
width: 20vw; width: 20vw;
height: 32vh; height: 32vh;
background-color: rgba(32,42,67,0.95); background-color: rgba(32, 42, 67, 0.95);
padding: 5px 7px; padding: 5px 7px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
} }
.DPcomputer19Box .intelligentSchScrView_rightView_title{
.DPcomputer19Box .intelligentSchScrView_rightView_title {
margin-bottom: 5px; margin-bottom: 5px;
width: 100%; width: 100%;
height: 3.5vh; height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png'); background: no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%; background-size: 100% 100%;
padding-left: 10px; padding-left: 10px;
box-sizing: border-box; box-sizing: border-box;
font-size: 18px; font-size: 18px;
...@@ -216,10 +203,12 @@ export default { ...@@ -216,10 +203,12 @@ export default {
letter-spacing: 1px; letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF; text-shadow: 1px 1px 1px #92CBFF;
} }
.DPcomputer19Box .intelligentSchScrView_rightView_content{
.DPcomputer19Box .intelligentSchScrView_rightView_content {
width: 100%; width: 100%;
} }
.DPcomputer19Box #carsAreaDistributionView{
.DPcomputer19Box #carsAreaDistributionView {
width: 19vw; width: 19vw;
height: 27.5vh; height: 27.5vh;
} }
......
src/views/MLargeScreen/components/smallComponents/DPcomputer20.vue
View file @ 30b11f22
...@@ -9,72 +9,94 @@ ...@@ -9,72 +9,94 @@
</template> </template>
<script> <script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; import {Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
data(){ data() {
return { return {
DPcomputer20BoxTimer:null, DPcomputer20BoxTimer: null,
//各装点车铲比Echarts //各装点车铲比Echarts
carsProportionData:[], carsAreaDistributionData: {
name: [],
values: [],
},
} }
}, },
mounted(){ mounted() {
this.loadData();
this.DPcomputer19BoxTimer = setInterval(() => {
this.loadData(); this.loadData();
}, 10000)
}, },
methods:{ methods: {
loadData(){ loadData() {
//各装点车铲比Echarts //各装点车铲比Echarts
HttpReq.truckDispatching.getLargeScreenchechanbi1({size:9999}).then((res) => { HttpReq.truckDispatching.getLargeScreenchechanbi1().then((res) => {
if(res.code == 200){ if (res.code == 200) {
this.carsProportionData = res.data; let name = [];
this.carsProportionEcharts(); let values = [];
} res.data.forEach((item, index) => {
name.push(item.area);
values.push(item.ratio);
}) })
this.carsAreaDistributionData.name = name;
this.DPcomputer20BoxTimer = setInterval(() => { this.carsAreaDistributionData.values = values;
//各装点车铲比Echarts
HttpReq.truckDispatching.getLargeScreenchechanbi1({size:9999}).then((res) => {
if(res.code == 200){
this.carsProportionData = res.data;
this.carsProportionEcharts(); this.carsProportionEcharts();
} }
}) })
},10000)
}, },
//各装点车铲比Echarts //各装点车铲比Echarts
carsProportionEcharts(){ carsProportionEcharts() {
echarts.init(document.getElementById('carsProportionView')).dispose(); echarts.init(document.getElementById('carsProportionView')).dispose();
var myChart = echarts.init(document.getElementById('carsProportionView')); var myChart = echarts.init(document.getElementById('carsProportionView'));
var option; let xZoom=Math.ceil(4/this.carsAreaDistributionData.name.length*100);
if(xZoom>100){
const data = [this.carsProportionData]; xZoom=100
option = { }
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// legend: {
// textStyle: {
// color: 'white',
// fontSize: 16,
// }
// },
grid: { grid: {
top:'13%', top: '10%',
left: '2%', left: '1%',
right: '13%', right: '1%',
bottom: '5%', bottom: '5%',
containLabel: true containLabel: true
}, },
xAxis: { dataZoom: [
name: '铲车', {
nameTextStyle: { fontSize: 14 }, type: 'inside',
splitLine: { start: 0,
end: xZoom
},
{
start: 0,
end: xZoom,
show: false, show: false,
lineStyle: {
type: 'dashed'
} }
}, ],
xAxis: {
type: 'category',
data: this.carsAreaDistributionData.name,
axisLabel: { axisLabel: {
interval: 0,
show: true, show: true,
textStyle: { textStyle: {
color: '#A6F6F9', color: '#A6F6F9',
fontSize:14, fontSize: 12,
}, }
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
...@@ -84,19 +106,13 @@ export default { ...@@ -84,19 +106,13 @@ export default {
}, },
}, },
yAxis: { yAxis: {
name: '卡车', type: 'value',
nameTextStyle: { fontSize: 14 }, minInterval: 1,
splitLine: {
lineStyle: {
type: 'dashed'
}
},
scale: true,
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: '#A6F6F9', color: '#A6F6F9',
fontSize:14, fontSize: 14,
} }
}, },
axisLine: { axisLine: {
...@@ -108,31 +124,21 @@ export default { ...@@ -108,31 +124,21 @@ export default {
}, },
series: [ series: [
{ {
data: data[0], name: '车铲比',
type: 'scatter', type: 'bar',
symbolSize: 15, data: this.carsAreaDistributionData.values,
emphasis: { barWidth: 35,
focus: 'series', itemStyle: {
label: { color: '#00FFFF'
show: true,
formatter: function (param) {
return param.data[2];
}, },
position: 'top',
fontSize:16,
}
}, },
itemStyle: {
color: '#4BF3F9',
}
}
] ]
}; };
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
}, },
beforeDestroy(){ beforeDestroy() {
if(this.DPcomputer20BoxTimer) { if (this.DPcomputer20BoxTimer) {
clearInterval(this.DPcomputer20BoxTimer); clearInterval(this.DPcomputer20BoxTimer);
this.DPcomputer20BoxTimer = null; this.DPcomputer20BoxTimer = null;
} }
...@@ -141,24 +147,26 @@ export default { ...@@ -141,24 +147,26 @@ export default {
</script> </script>
<style scoped> <style scoped>
*{ * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer20Box{
.DPcomputer20Box {
width: 20vw; width: 20vw;
height: 32vh; height: 32vh;
background-color: rgba(32,42,67,0.95); background-color: rgba(32, 42, 67, 0.95);
padding: 5px 7px; padding: 5px 7px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
} }
.DPcomputer20Box .intelligentSchScrView_rightView_title{
.DPcomputer20Box .intelligentSchScrView_rightView_title {
margin-bottom: 5px; margin-bottom: 5px;
width: 100%; width: 100%;
height: 3.5vh; height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png'); background: no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%; background-size: 100% 100%;
padding-left: 10px; padding-left: 10px;
box-sizing: border-box; box-sizing: border-box;
font-size: 18px; font-size: 18px;
...@@ -167,10 +175,12 @@ export default { ...@@ -167,10 +175,12 @@ export default {
letter-spacing: 1px; letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF; text-shadow: 1px 1px 1px #92CBFF;
} }
.DPcomputer20Box .intelligentSchScrView_rightView_content{
.DPcomputer20Box .intelligentSchScrView_rightView_content {
width: 100%; width: 100%;
} }
.DPcomputer20Box #carsProportionView{
.DPcomputer20Box #carsProportionView {
width: 19vw; width: 19vw;
height: 27.5vh; height: 27.5vh;
} }
......
src/views/MLargeScreen/index.vue
View file @ 30b11f22
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
<!-- </div>--> <!-- </div>-->
<!-- 嵌入三维地图页面 --> <!-- 嵌入三维地图页面 -->
<!-- <iframe :src="url" frameborder="0" class="mapcontainer1"></iframe>--> <!-- <iframe :src="url" frameborder="0" class="mapcontainer1"></iframe>-->
<iframe ref="iframe" src="http://39.164.225.220:5001//#/Index" frameborder="0" class="mapcontainer1"></iframe> <!-- <iframe ref="iframe" src="http://39.164.225.220:5001//#/Index" frameborder="0" class="mapcontainer1"></iframe>-->
<!-- <iframe ref="iframe" src="http://192.168.3.38:3002/#/Index" frameborder="0" class="mapcontainer1"></iframe>--> <!-- <iframe ref="iframe" src="http://192.168.3.38:3002/#/Index" frameborder="0" class="mapcontainer1"></iframe>-->
<!-- 单个车辆视频监控 --> <!-- 单个车辆视频监控 -->
......
src/views/productionPlanManagement/productionPlan/index.vue
View file @ 30b11f22
...@@ -225,8 +225,13 @@ export default { ...@@ -225,8 +225,13 @@ export default {
showPlanDateSlot() { showPlanDateSlot() {
this.showDateSlot = !this.showDateSlot; this.showDateSlot = !this.showDateSlot;
document.getElementById("planSlotBtn").blur(); document.getElementById("planSlotBtn").blur();
let d=new Date();
if(d.getMonth()+1===Number(this.showMonth)){
this.planSDate = this.showYear + '-' + this.showMonth + '-' + ('0' + d.getDate()).substr(-2);
}else{
this.planSDate = this.showYear + '-' + this.showMonth + '-01'; this.planSDate = this.showYear + '-' + this.showMonth + '-01';
this.planEDate = this.showYear + '-' + this.showMonth + '-'+this.monthDays(this.showYear, this.showMonth); }
this.planEDate = this.showYear + '-' + this.showMonth + '-'+this.monthDays(Number(this.showYear), Number(this.showMonth)-1);
this.planData = []; this.planData = [];
HttpReq.truckDispatching.tPlanGetOneDayPlanByTime({}).then((res) => { HttpReq.truckDispatching.tPlanGetOneDayPlanByTime({}).then((res) => {
if (res.code == 200) { if (res.code == 200) {
......
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