Skip to content

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

1

parent 1867c7be
Show whitespace changes
Inline Side-by-side
Showing with 386 additions and 23 deletions
src/views/MLargeScreen/components/smallComponents/DPcomputer17.vue
View file @ cc54138a
......@@ -20,6 +20,8 @@
</div>
</div>
</div>
<!-- 播放器 -->
<audio controls currentTime autoplay :src='srcUrl' style="display:none;"></audio>
</div>
</template>
......@@ -32,6 +34,7 @@ export default {
return {
DPcomputer17BoxTimer:null,
recentNoticeData:[], //近期通知列表
srcUrl:null,
}
},
mounted(){
......@@ -39,6 +42,7 @@ export default {
},
methods:{
loadData(){
this.srcUrl = null;
//近期通知列表
HttpReq.truckDispatching.recentNoticeQuery({size:50,sort:'id,desc'}).then((res) => {
if(res.code == 200){
......@@ -99,15 +103,6 @@ export default {
});
return blob;
},
//blob流转base64编码
blobToDataURI(blob) {
let that = this;
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function(){
that.resultBlob = reader.result;
}
},
addWavHeader(samples, sampleRateTmp, sampleBits, channelCount) {
const dataLength = samples.byteLength;
/* 新的buffer类，预留44bytes的heaer空间 */
......@@ -178,6 +173,7 @@ export default {
},
},
beforeDestroy(){
this.srcUrl = null;
if(this.DPcomputer17BoxTimer) {
clearInterval(this.DPcomputer17BoxTimer);
this.DPcomputer17BoxTimer = null;
......
src/views/MLargeScreen/components/smallComponents/DPcomputer19.vue
View file @ cc54138a
<template>
<div class="DPcomputer19Box">
<!-- 车辆区域分布-->
<div class="intelligentSchScrView_rightView_title">车辆区域分布</div>
<div class="intelligentSchScrView_rightView_content">
<div id="carsAreaDistributionView"></div>
</div>
</div>
</template>
......@@ -14,7 +17,13 @@ export default {
data(){
return {
DPcomputer19BoxTimer:null,
//车辆区域分布Echarts
carsAreaDistributionData:{
name:[],
kache:[],
chanche:[],
qitache:[],
},
}
},
mounted(){
......@@ -22,8 +31,153 @@ export default {
},
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(() => {
//车辆区域分布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();
}
})
},10000)
},
//车辆区域分布Echarts
carsAreaDistributionEcharts(){
echarts.init(document.getElementById('carsAreaDistributionView')).dispose();
var myChart = echarts.init(document.getElementById('carsAreaDistributionView'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
textStyle:{
color: 'white',
fontSize:16,
}
},
grid: {
top: '13%',
left: '1%',
right: '1%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: this.carsAreaDistributionData.name,
axisLabel: {
show: true,
textStyle: {
color: '#A6F6F9',
fontSize:14,
}
},
axisLine: {
lineStyle: {
color: '#A6F6F9',
width: 1
}
},
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#A6F6F9',
fontSize:14,
}
},
axisLine: {
lineStyle: {
color: '#A6F6F9',
width: 0
}
},
},
series: [
{
name: '卡车',
type: 'bar',
stack: 'total',
label: {
show: true
},
data: this.carsAreaDistributionData.kache,
barWidth: 30,
itemStyle: {
color: '#2BBFA8'
},
},
{
name: '铲车',
type: 'bar',
stack: 'total',
label: {
show: true
},
data: this.carsAreaDistributionData.chanche,
barWidth: 35,
itemStyle: {
color: '#DB972D'
},
},
{
name: '其他车辆',
type: 'bar',
stack: 'total',
label: {
show: true
},
data: this.carsAreaDistributionData.qitache,
barWidth: 35,
itemStyle: {
color: '#158DFD'
},
}
]
};
option && myChart.setOption(option);
},
},
beforeDestroy(){
if(this.DPcomputer19BoxTimer) {
......@@ -47,4 +201,25 @@ export default {
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer19Box .intelligentSchScrView_rightView_title{
margin-bottom: 5px;
width: 100%;
height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
line-height: 3.5vh;
color: #FAFAFB;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
}
.DPcomputer19Box .intelligentSchScrView_rightView_content{
width: 100%;
}
.DPcomputer19Box #carsAreaDistributionView{
width: 19vw;
height: 27.5vh;
}
</style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer20.vue
View file @ cc54138a
<template>
<div>
<div class="DPcomputer20Box">
<!-- 各装点车铲比 -->
<div class="intelligentSchScrView_rightView_title">各装点车铲比</div>
<div class="intelligentSchScrView_rightView_content">
<div id="carsProportionView"></div>
</div>
</div>
</template>
<script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts';
export default {
data(){
return {
DPcomputer20BoxTimer:null,
//各装点车铲比Echarts
carsProportionData:[],
}
},
mounted(){},
mounted(){
this.loadData();
},
methods:{
loadData(){
//各装点车铲比Echarts
HttpReq.truckDispatching.getLargeScreenchechanbi1({size:9999}).then((res) => {
if(res.code == 200){
this.carsProportionData = res.data;
this.carsProportionEcharts();
}
})
this.DPcomputer20BoxTimer = setInterval(() => {
//各装点车铲比Echarts
HttpReq.truckDispatching.getLargeScreenchechanbi1({size:9999}).then((res) => {
if(res.code == 200){
this.carsProportionData = res.data;
this.carsProportionEcharts();
}
})
},10000)
},
beforeDestroy(){
//各装点车铲比Echarts
carsProportionEcharts(){
echarts.init(document.getElementById('carsProportionView')).dispose();
var myChart = echarts.init(document.getElementById('carsProportionView'));
var option;
const data = [this.carsProportionData];
option = {
grid: {
top:'13%',
left: '2%',
right: '13%',
bottom: '5%',
containLabel: true
},
xAxis: {
name: '铲车',
nameTextStyle: { fontSize: 14 },
splitLine: {
show: false,
lineStyle: {
type: 'dashed'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#A6F6F9',
fontSize:14,
},
},
axisLine: {
lineStyle: {
color: '#A6F6F9',
width: 1
}
},
},
yAxis: {
name: '卡车',
nameTextStyle: { fontSize: 14 },
splitLine: {
lineStyle: {
type: 'dashed'
}
},
scale: true,
axisLabel: {
show: true,
textStyle: {
color: '#A6F6F9',
fontSize:14,
}
},
axisLine: {
lineStyle: {
color: '#A6F6F9',
width: 0
}
},
},
series: [
{
data: data[0],
type: 'scatter',
symbolSize: 15,
emphasis: {
focus: 'series',
label: {
show: true,
formatter: function (param) {
return param.data[2];
},
position: 'top',
fontSize:16,
}
},
itemStyle: {
color: '#4BF3F9',
}
}
]
};
option && myChart.setOption(option);
},
},
beforeDestroy(){
if(this.DPcomputer20BoxTimer) {
clearInterval(this.DPcomputer20BoxTimer);
this.DPcomputer20BoxTimer = null;
}
}
}
</script>
......@@ -29,5 +145,33 @@ export default {
margin: 0;
padding: 0;
}
.DPcomputer20Box{
width: 20vw;
height: 32vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer20Box .intelligentSchScrView_rightView_title{
margin-bottom: 5px;
width: 100%;
height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
line-height: 3.5vh;
color: #FAFAFB;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
}
.DPcomputer20Box .intelligentSchScrView_rightView_content{
width: 100%;
}
.DPcomputer20Box #carsProportionView{
width: 19vw;
height: 27.5vh;
}
</style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer21.vue
View file @ cc54138a
<template>
<div>
<div class="DPcomputer21Box">
<!-- 采区产量统计 -->
<div class="dataAnalysisScrView_leftView_title">采区产量统计</div>
<div class="dataAnalysisScrView_leftView_content" style="position: relative;">
<div id="echarts1View"></div>
</div>
</div>
</template>
<script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts';
import "echarts-gl";
import { getPie3D } from "../../../components/echarts/bingtu3d";
export default {
data(){
return {
DPcomputer21BoxTimer:null,
//采取产量统计
echarts1Data:[],
}
},
mounted(){},
mounted(){
this.loadData();
},
methods:{
loadData(){
},
},
beforeDestroy(){
if(this.DPcomputer21BoxTimer) {
clearInterval(this.DPcomputer21BoxTimer);
this.DPcomputer21BoxTimer = null;
}
}
}
</script>
......@@ -29,5 +45,37 @@ export default {
margin: 0;
padding: 0;
}
.DPcomputer21Box{
width: 20vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer21Box .dataAnalysisScrView_leftView_title{
margin-bottom: 5px;
width: 100%;
height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
line-height: 3.5vh;
color: #FAFAFB;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
}
.DPcomputer21Box .dataAnalysisScrView_leftView_content{
width: 100%;
height: 19vh;
}
.DPcomputer21Box #echarts1View{
position: absolute;
left: -10vh;
top: -7vh;
width: 120%;
height: 27vh;
}
</style>
\ No newline at end of file
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