Skip to content

K
kd_control
Commit 27e5ba9a authored by zhanglw's avatar zhanglw
Browse files
Options

铲车排行榜

parent 3aa6f4b2
Hide whitespace changes
Inline Side-by-side
Showing with 722 additions and 1085 deletions
src/assets/js/common.js
View file @ 27e5ba9a
......@@ -1992,7 +1992,8 @@ var HttpReq = function(){
//大屏——数据总览——采区产量统计——日产量
apiPlanDayQuery: function(param){
return request({
url: '/api/Plan/Day',
// url: '/api/Plan/Day',
url: '/api/carManager/clData',
method: 'get',
params:param,
})
......@@ -2087,7 +2088,8 @@ var HttpReq = function(){
//大屏——车辆管理——卡车铲车排行榜day
apiManmadesDay1Query: function(param){
return request({
url: '/api/Manmades/Day',
// url: '/api/Manmades/Day',
url: '/api/carManager/kcTop',
method: 'get',
params:param,
})
......@@ -2096,6 +2098,7 @@ var HttpReq = function(){
apiManmadesZhou1Query: function(param){
return request({
url: '/api/Manmades/Zhou',
// url: '/api/carManager/kcTopDay',
method: 'get',
params:param,
})
......@@ -2104,6 +2107,7 @@ var HttpReq = function(){
apiManmadesMou1Query: function(param){
return request({
url: '/api/Manmades/Mou',
// url: '/api/carManager/kcTopDay',
method: 'get',
params:param,
})
......@@ -2558,7 +2562,8 @@ var HttpReq = function(){
//大屏组件4铲车排行榜接口
apiManmadeschanjiedanDayQuery: function(param){
return request({
url: '/api/Manmades/chanjiedanDay',
// url: '/api/Manmades/chanjiedanDay',
url: '/api/carManager/ccTop',
method: 'get',
params:param,
})
......
src/views/MLargeScreen/components/smallComponents/DPcomputer11.vue
View file @ 27e5ba9a
<template>
<div class="DPcomputer11Box">
<!-- 卡车排行榜-->
<div class="carManScrView_leftView_title truck_titleStyle">
<div>卡车排行榜</div>
<div class="driverTitleDateStyle">
<div :class="truckRankListData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="truckChangeTime('day')">日</div>
<div :class="truckRankListData.selectTimeText == 'week' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="truckChangeTime('week')">周</div>
<div :class="truckRankListData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="truckChangeTime('month')">月</div>
</div>
<div class="DPcomputer11Box">
<!-- 卡车排行榜-->
<div class="carManScrView_leftView_title truck_titleStyle">
<div>卡车排行榜</div>
<div class="driverTitleDateStyle">
<div
:class="truckRankListData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@click="truckChangeTime('day')">日
</div>
<div class="carManScrView_leftView_content">
<div class="carManScrView_leftView_content_views2">
<div :class="truckRankListData.selectFieldText == 'juli' ? '' : 'selectFieldStyle' " @click="truckChangeField('juli')">运输距离</div>
<div :class="truckRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' " @click="truckChangeField('time')">工作时长</div>
<div :class="truckRankListData.selectFieldText == 'zcar' ? '' : 'selectFieldStyle' " @click="truckChangeField('zcar')">运载量</div>
<div :class="truckRankListData.selectFieldText == 'waiting' ? '' : 'selectFieldStyle' " @click="truckChangeField('waiting')">接单数</div>
</div>
<div class="carManScrView_leftView_content_views3" id="carManScrView_leftView_content_views3_1"></div>
<div
:class="truckRankListData.selectTimeText == 'week' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@click="truckChangeTime('week')">周
</div>
<div
:class="truckRankListData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@click="truckChangeTime('month')">月
</div>
</div>
</div>
<div class="carManScrView_leftView_content">
<div class="carManScrView_leftView_content_views2">
<div :class="truckRankListData.selectFieldText == 'juli' ? '' : 'selectFieldStyle' "
@click="truckChangeField('juli')">运输距离
</div>
<div :class="truckRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' "
@click="truckChangeField('time')">工作时长
</div>
<div :class="truckRankListData.selectFieldText == 'yunZaiNumber' ? '' : 'selectFieldStyle' "
@click="truckChangeField('yunZaiNumber')">运载量
</div>
<div :class="truckRankListData.selectFieldText == 'jieDanNumber' ? '' : 'selectFieldStyle' "
@click="truckChangeField('jieDanNumber')">接单数
</div>
</div>
<div class="carManScrView_leftView_content_views3" id="carManScrView_leftView_content_views3_1"></div>
</div>
</div>
</template>
<script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import {Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts';
export default {
data(){
return {
DPcomputer11BoxTimer:null,
//卡车排行榜
truckRankListData:{
echartsX:'Km',
carclass:'卡车',
selectTimeText:'day',
selectFieldText:'juli',
driverName:[],
driverSeriesData:[],
driverName1:['kfdfdf','dsdsd1','dsdsd55'],
driverSeriesData1:[20,50,10],
},
}
data() {
return {
DPcomputer11BoxTimer: null,
//卡车排行榜
truckRankListData: {
echartsX: 'Km',
carclass: '卡车',
selectTimeText: 'day',
selectFieldText: 'juli',
driverName: [],
driverSeriesData: [],
driverName1: ['kfdfdf', 'dsdsd1', 'dsdsd55'],
driverSeriesData1: [20, 50, 10],
},
}
},
mounted() {
this.DPcomputer11BoxTimer = setInterval(() => {
this.loadData();
}, 10000)
this.loadData();
},
methods: {
loadData() {
let that = this;
let truckQuery1 = {};
truckQuery1.size = 7;
truckQuery1.sort = this.truckRankListData.selectFieldText;
truckQuery1.carclass = this.truckRankListData.carclass;
truckQuery1.duration = this.truckRankListData.selectTimeText;
this.$nextTick(() => {
HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
if(res.data && res.data.length){
res.data.reverse().forEach((item, index) => {
arr1.push(item.carNumber);
arr2.push(item.data);
})
}else{
arr1.push('暂无数据');
arr2.push(0);
}
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
})
},
mounted(){
this.loadData();
//卡车切换时间
truckChangeTime(text) {
this.truckRankListData.selectTimeText = text;
this.loadData();
},
methods:{
loadData(){
let that = this;
let truckQuery1 = {};
truckQuery1.size = 7;
truckQuery1.sort = this.truckRankListData.selectFieldText;
truckQuery1.carclass = this.truckRankListData.carclass;
this.$nextTick(()=>{
if(this.truckRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}
})
this.DPcomputer11BoxTimer = setInterval(() => {
//获取卡车排行榜
let truckQuery1 = {};
truckQuery1.size = 7;
truckQuery1.sort = this.truckRankListData.selectFieldText;
truckQuery1.carclass = this.truckRankListData.carclass;
this.$nextTick(()=>{
if(this.truckRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}
})
},10000)
//卡车切换字段排序
truckChangeField(text) {
let that = this;
this.truckRankListData.selectFieldText = text;
let truckQuery1 = {};
truckQuery1.size = 7;
truckQuery1.sort = this.truckRankListData.selectFieldText;
truckQuery1.carclass = this.truckRankListData.carclass;
if (text == 'juli') {
this.truckRankListData.echartsX = 'km';
} else if (text == 'time') {
this.truckRankListData.echartsX = 'min';
} else if (text == 'yunZaiNumber') {
this.truckRankListData.echartsX = '吨';
} else if (text == 'jieDanNumber') {
this.truckRankListData.echartsX = '次';
}
this.loadData();
},
//卡车排行榜Echarts
truckChangeEcharts() {
echarts.init(document.getElementById('carManScrView_leftView_content_views3_1')).dispose();
var myChart = echarts.init(document.getElementById('carManScrView_leftView_content_views3_1'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '18%',
left: '1%',
bottom: '0%',
containLabel: true
},
//卡车切换时间
truckChangeTime(text){
let that = this;
this.truckRankListData.selectTimeText = text;
let truckQuery1 = {};
truckQuery1.size = 7;
truckQuery1.sort = this.truckRankListData.selectFieldText;
truckQuery1.carclass = this.truckRankListData.carclass;
if(text == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(text == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(text == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
xAxis: {
name: this.truckRankListData.echartsX,
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
show: true,
textStyle: {
color: '#BFF7FF'
}
},
axisLine: {
lineStyle: {
color: '#BFF7FF',
width: 1
}
}
},
//卡车切换字段排序
truckChangeField(text){
let that = this;
this.truckRankListData.selectFieldText = text;
let truckQuery1 = {};
truckQuery1.size = 7;
truckQuery1.sort = this.truckRankListData.selectFieldText;
truckQuery1.carclass = this.truckRankListData.carclass;
if(text == 'juli'){
this.truckRankListData.echartsX = 'km';
}else if(text == 'time'){
this.truckRankListData.echartsX = 'H';
}else if(text == 'zcar'){
this.truckRankListData.echartsX = '吨';
}else if(text == 'waiting'){
this.truckRankListData.echartsX = '次';
yAxis: {
name: '车牌号',
type: 'category',
data: this.truckRankListData.driverName,
axisLabel: {
show: true,
textStyle: {
color: '#BFF7FF'
}
this.$nextTick(()=>{
if(this.truckRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}
})
},
axisLine: {
lineStyle: {
color: '#BFF7FF',
width: 0
}
}
},
//卡车排行榜Echarts
truckChangeEcharts(){
echarts.init(document.getElementById('carManScrView_leftView_content_views3_1')).dispose();
var myChart = echarts.init(document.getElementById('carManScrView_leftView_content_views3_1'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top:'18%',
left: '1%',
bottom: '0%',
containLabel: true
},
xAxis: {
name:this.truckRankListData.echartsX,
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
show: true,
textStyle: {
color: '#BFF7FF'
}
},
axisLine: {
lineStyle: {
color: '#BFF7FF',
width: 1
}
}
},
yAxis: {
name:'车牌号',
type: 'category',
data: this.truckRankListData.driverName,
axisLabel: {
show: true,
textStyle: {
color: '#BFF7FF'
}
},
axisLine: {
lineStyle: {
color: '#BFF7FF',
width: 0
}
}
},
series: [
{
type: 'bar',
barWidth: 12,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#23FFE2' },
{ offset: 1, color: '#0F86EB' }
])
},
data: this.truckRankListData.driverSeriesData,
}
]
};
series: [
{
type: 'bar',
barWidth: 12,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{offset: 0, color: '#23FFE2'},
{offset: 1, color: '#0F86EB'}
])
option && myChart.setOption(option);
},
},
data: this.truckRankListData.driverSeriesData,
}
]
};
option && myChart.setOption(option);
},
beforeDestroy(){
if(this.DPcomputer11BoxTimer) {
clearInterval(this.DPcomputer11BoxTimer);
this.DPcomputer11BoxTimer = null;
}
},
beforeDestroy() {
if (this.DPcomputer11BoxTimer) {
clearInterval(this.DPcomputer11BoxTimer);
this.DPcomputer11BoxTimer = null;
}
}
}
</script>
<style scoped>
*{
* {
margin: 0;
padding: 0;
}
.DPcomputer11Box{
width: 20vw;
height: 32vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
.DPcomputer11Box {
width: 20vw;
height: 32vh;
background-color: rgba(32, 42, 67, 0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer11Box .carManScrView_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;
.DPcomputer11Box .carManScrView_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;
}
.DPcomputer11Box .truck_titleStyle{
display: flex;
justify-content: space-between;
padding-right: 4vw;
.DPcomputer11Box .truck_titleStyle {
display: flex;
justify-content: space-between;
padding-right: 4vw;
}
.DPcomputer11Box .driverTitleDateStyle{
display: flex;
color: #06EFFE;
font-size: 16px;
text-shadow: 0px 0px 0px;
height: 3.5vh;
align-items: center;
.DPcomputer11Box .driverTitleDateStyle {
display: flex;
color: #06EFFE;
font-size: 16px;
text-shadow: 0px 0px 0px;
height: 3.5vh;
align-items: center;
}
.DPcomputer11Box .driverTitleDateStyle_son1{
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
padding:0px 5px;
background-color: #2DB3BB;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
.DPcomputer11Box .driverTitleDateStyle_son1 {
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
padding: 0px 5px;
background-color: #2DB3BB;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
}
.DPcomputer11Box .driverTitleDateStyle_son2{
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
padding:0px 5px;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
.DPcomputer11Box .driverTitleDateStyle_son2 {
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
padding: 0px 5px;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
}
.DPcomputer11Box .carManScrView_rightView_content{
width: 100%;
height: 27vh;
.DPcomputer11Box .carManScrView_rightView_content {
width: 100%;
height: 27vh;
}
.DPcomputer11Box .carManScrView_leftView_content_views2{
display: flex;
justify-content: space-between;
.DPcomputer11Box .carManScrView_leftView_content_views2 {
display: flex;
justify-content: space-between;
}
.DPcomputer11Box .carManScrView_leftView_content_views2>div{
height: 2.5vh;
width: 24%;
font-size: 15px;
border:2px solid #01A6FC;
border-radius: 5px;
color: #06EFFE;
line-height: 2.2vh;
text-align: center;
cursor: pointer;
font-weight: 600;
.DPcomputer11Box .carManScrView_leftView_content_views2 > div {
height: 2.5vh;
width: 24%;
font-size: 15px;
border: 2px solid #01A6FC;
border-radius: 5px;
color: #06EFFE;
line-height: 2.2vh;
text-align: center;
cursor: pointer;
font-weight: 600;
}
.DPcomputer11Box .selectFieldStyle{
opacity: 0.7;
.DPcomputer11Box .selectFieldStyle {
opacity: 0.7;
}
.DPcomputer11Box .carManScrView_leftView_content_views3{
width: 100%;
height: 24vh;
overflow-y:auto;
scrollbar-width: none;
.DPcomputer11Box .carManScrView_leftView_content_views3 {
width: 100%;
height: 24vh;
overflow-y: auto;
scrollbar-width: none;
}
.DPcomputer11Box .carManScrView_leftView_content_views3::-webkit-scrollbar {
display: none;
}
</style>
\ No newline at end of file
</style>
src/views/MLargeScreen/components/smallComponents/DPcomputer12.vue
View file @ 27e5ba9a
<template>
<div class="DPcomputer12Box">
<!-- 铲车排行榜-->
<div class="carManScrView_leftView_title truck_titleStyle">
<div>铲车排行榜</div>
<div class="driverTitleDateStyle">
<div :class="forkLiftRankListData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="forkLiftChangeTime('day')">日</div>
<div :class="forkLiftRankListData.selectTimeText == 'week' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="forkLiftChangeTime('week')">周</div>
<div :class="forkLiftRankListData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="forkLiftChangeTime('month')">月</div>
</div>
<div class="DPcomputer12Box">
<!-- 铲车排行榜-->
<div class="carManScrView_leftView_title truck_titleStyle">
<div>铲车排行榜</div>
<div class="driverTitleDateStyle">
<div
:class="forkLiftRankListData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@click="forkLiftChangeTime('day')">日
</div>
<div class="carManScrView_leftView_content">
<div class="carManScrView_leftView_content_views2">
<div :class="forkLiftRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('time')">工作时长</div>
<div :class="forkLiftRankListData.selectFieldText == 'average' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('average')">平均时长</div>
<div :class="forkLiftRankListData.selectFieldText == 'yunzai' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('yunzai')">装车量</div>
<div :class="forkLiftRankListData.selectFieldText == 'jiedan' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('jiedan')">装车数</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'time'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;width: 45%;">{{item.car}}</div>
<div style="color:#1AC9FF;width: 39%;">{{item.time}}H</div>
<!-- <div style="color:#BCF0FE;">{{item.createTime}}</div> -->
</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'average'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;width: 45%;">{{item.car}}</div>
<div style="color:#1AC9FF;width: 39%;">{{item.average}}H</div>
<!-- <div style="color:#BCF0FE;">{{item.createTime}}</div> -->
</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'yunzai'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;width: 45%;">{{item.car}}</div>
<div style="color:#1AC9FF;width: 39%;">{{item.yunzai}}吨</div>
<!-- <div style="color:#BCF0FE;">{{item.createTime}}</div> -->
</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'jiedan'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;width: 45%;">{{item.car}}</div>
<div style="color:#1AC9FF;width: 39%;">{{item.jiedan}}辆</div>
<!-- <div style="color:#BCF0FE;">{{item.createTime}}</div> -->
</div>
</div>
<div
:class="forkLiftRankListData.selectTimeText == 'week' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@click="forkLiftChangeTime('week')">周
</div>
<div
:class="forkLiftRankListData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@click="forkLiftChangeTime('month')">月
</div>
</div>
</div>
<div class="carManScrView_leftView_content">
<div class="carManScrView_leftView_content_views2">
<div :class="forkLiftRankListData.selectFieldText == 'workTime' ? '' : 'selectFieldStyle' "
@click="forkLiftChangeField('workTime')">工作时长
</div>
<div :class="forkLiftRankListData.selectFieldText == 'aveTime' ? '' : 'selectFieldStyle' "
@click="forkLiftChangeField('aveTime')">平均时长
</div>
<div :class="forkLiftRankListData.selectFieldText == 'loadingCapacity' ? '' : 'selectFieldStyle' "
@click="forkLiftChangeField('loadingCapacity')">装车量
</div>
<div :class="forkLiftRankListData.selectFieldText == 'loadingTimes' ? '' : 'selectFieldStyle' "
@click="forkLiftChangeField('loadingTimes')">装车数
</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'workTime'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index"
:class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;width: 45%;">{{ item.carNumber }}</div>
<div style="color:#1AC9FF;width: 39%;">{{ item.data }}min</div>
<!-- <div style="color:#BCF0FE;">{{item.createTime}}</div> -->
</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'aveTime'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index"
:class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;width: 45%;">{{ item.carNumber }}</div>
<div style="color:#1AC9FF;width: 39%;">{{ item.data }}min</div>
<!-- <div style="color:#BCF0FE;">{{item.createTime}}</div> -->
</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'loadingCapacity'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index"
:class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;width: 45%;">{{ item.carNumber }}</div>
<div style="color:#1AC9FF;width: 39%;">{{ item.data }}吨</div>
<!-- <div style="color:#BCF0FE;">{{item.createTime}}</div> -->
</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'loadingTimes'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index"
:class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;width: 45%;">{{ item.carNumber }}</div>
<div style="color:#1AC9FF;width: 39%;">{{ item.data }}辆</div>
<!-- <div style="color:#BCF0FE;">{{item.createTime}}</div> -->
</div>
</div>
</div>
</div>
</template>
<script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import {Tools, HttpReq, CAMap} from '@/assets/js/common.js';
export default {
data(){
return {
DPcomputer12BoxTimer:null,
//铲车排行榜
forkLiftRankListData:{
carclass:'铲车',
selectTimeText:'day',
selectFieldText:'time',
listData:[],
},
}
data() {
return {
DPcomputer12BoxTimer: null,
//铲车排行榜
forkLiftRankListData: {
carclass: '铲车',
selectTimeText: 'day',
selectFieldText: 'workTime',
listData: [
{carNumber:'',data:0},
{carNumber:'',data:0},
{carNumber:'',data:0},
{carNumber:'',data:0},
{carNumber:'',data:0}
],
},
}
},
mounted() {
this.loadData();
this.DPcomputer12BoxTimer = setInterval(() => {
this.loadData();
}, 20000)
},
methods: {
loadData() {
//获取铲车排行榜
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText;
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
forkLiftQuery1.duration = this.forkLiftRankListData.selectTimeText;
this.$nextTick(() => {
HttpReq.truckDispatching.apiManmadeschanjiedanDayQuery(forkLiftQuery1).then((res) => {
if(res.data && res.data.length){
this.forkLiftRankListData.listData = res.data;
}else{
this.forkLiftRankListData.listData = [{carNumber:'',data:0},{carNumber:'',data:0},{carNumber:'',data:0},{carNumber:'',data:0},{carNumber:'',data:0}];
}
})
})
},
mounted(){
this.loadData();
//铲车切换时间
forkLiftChangeTime(text) {
this.forkLiftRankListData.selectTimeText = text;
this.loadData();
},
methods:{
loadData(){
let that = this;
//获取铲车排行榜
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText;
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
this.$nextTick(()=>{
if(this.forkLiftRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadeschanjiedanDayQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesChanjiedanZhouQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesChanjiedanMouQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}
})
this.DPcomputer12BoxTimer = setInterval(() => {
//获取铲车排行榜
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText;
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
this.$nextTick(()=>{
if(this.forkLiftRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadeschanjiedanDayQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesChanjiedanZhouQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesChanjiedanMouQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}
})
},20000)
},
//铲车切换时间
forkLiftChangeTime(text){
let that = this;
this.forkLiftRankListData.selectTimeText = text;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText;
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
if(text == 'day'){
HttpReq.truckDispatching.apiManmadeschanjiedanDayQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}
if(text == 'week'){
HttpReq.truckDispatching.apiManmadesChanjiedanZhouQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}
if(text == 'month'){
HttpReq.truckDispatching.apiManmadesChanjiedanMouQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}
},
//铲车切换字段排序
forkLiftChangeField(text){
let that = this;
this.forkLiftRankListData.selectFieldText = text;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText;
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
this.$nextTick(()=>{
if(this.forkLiftRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadeschanjiedanDayQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesChanjiedanZhouQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesChanjiedanMouQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}
})
},
//铲车切换字段排序
forkLiftChangeField(text) {
this.forkLiftRankListData.selectFieldText = text;
this.loadData();
},
beforeDestroy(){
if(this.DPcomputer12BoxTimer) {
clearInterval(this.DPcomputer12BoxTimer);
this.DPcomputer12BoxTimer = null;
}
},
beforeDestroy() {
if (this.DPcomputer12BoxTimer) {
clearInterval(this.DPcomputer12BoxTimer);
this.DPcomputer12BoxTimer = null;
}
}
}
</script>
<style scoped>
*{
* {
margin: 0;
padding: 0;
}
.DPcomputer12Box{
width: 20vw;
height: 32vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
.DPcomputer12Box {
width: 20vw;
height: 32vh;
background-color: rgba(32, 42, 67, 0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer12Box .carManScrView_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;
.DPcomputer12Box .carManScrView_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;
}
.DPcomputer12Box .truck_titleStyle{
display: flex;
justify-content: space-between;
padding-right: 4vw;
.DPcomputer12Box .truck_titleStyle {
display: flex;
justify-content: space-between;
padding-right: 4vw;
}
.DPcomputer12Box .driverTitleDateStyle{
display: flex;
color: #06EFFE;
font-size: 16px;
text-shadow: 0px 0px 0px;
height: 3.5vh;
align-items: center;
.DPcomputer12Box .driverTitleDateStyle {
display: flex;
color: #06EFFE;
font-size: 16px;
text-shadow: 0px 0px 0px;
height: 3.5vh;
align-items: center;
}
.DPcomputer12Box .driverTitleDateStyle_son1{
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
padding:0px 5px;
background-color: #2DB3BB;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
.DPcomputer12Box .driverTitleDateStyle_son1 {
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
padding: 0px 5px;
background-color: #2DB3BB;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
}
.DPcomputer12Box .driverTitleDateStyle_son2{
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
padding:0px 5px;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
.DPcomputer12Box .driverTitleDateStyle_son2 {
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
padding: 0px 5px;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
}
.DPcomputer12Box .carManScrView_leftView_content{
width: 100%;
height: 27vh;
.DPcomputer12Box .carManScrView_leftView_content {
width: 100%;
height: 27vh;
}
.DPcomputer12Box .carManScrView_leftView_content_views2{
display: flex;
justify-content: space-between;
.DPcomputer12Box .carManScrView_leftView_content_views2 {
display: flex;
justify-content: space-between;
}
.DPcomputer12Box .carManScrView_leftView_content_views2>div{
height: 2.5vh;
width: 24%;
font-size: 15px;
border:2px solid #01A6FC;
border-radius: 5px;
color: #06EFFE;
line-height: 2.2vh;
text-align: center;
cursor: pointer;
font-weight: 600;
.DPcomputer12Box .carManScrView_leftView_content_views2 > div {
height: 2.5vh;
width: 24%;
font-size: 15px;
border: 2px solid #01A6FC;
border-radius: 5px;
color: #06EFFE;
line-height: 2.2vh;
text-align: center;
cursor: pointer;
font-weight: 600;
}
.DPcomputer12Box .selectFieldStyle{
opacity: 0.7;
.DPcomputer12Box .selectFieldStyle {
opacity: 0.7;
}
.DPcomputer12Box .carManScrView_leftView_content_views3{
width: 100%;
height: 24vh;
overflow-y:auto;
scrollbar-width: none;
.DPcomputer12Box .carManScrView_leftView_content_views3 {
width: 100%;
height: 24vh;
overflow-y: auto;
scrollbar-width: none;
}
.DPcomputer12Box .carManScrView_leftView_content_views3::-webkit-scrollbar {
display: none;
}
.DPcomputer12Box .forkliftRankTwo1{
margin-top: 1vh;
margin-bottom: 1.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list1.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
text-align: center;
.DPcomputer12Box .forkliftRankTwo1 {
margin-top: 1vh;
margin-bottom: 1.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background: no-repeat center center url('~@/assets/images/cutGraph/list1.png');
background-size: 100% 100%;
padding-left: 4vw;
box-sizing: border-box;
text-align: center;
}
.DPcomputer12Box .forkliftRankTwo2{
margin-bottom: 1.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list2.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
text-align: center;
.DPcomputer12Box .forkliftRankTwo2 {
margin-bottom: 1.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background: no-repeat center center url('~@/assets/images/cutGraph/list2.png');
background-size: 100% 100%;
padding-left: 4vw;
box-sizing: border-box;
text-align: center;
}
.DPcomputer12Box .forkliftRankTwo3{
margin-bottom: 1.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list3.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
text-align: center;
.DPcomputer12Box .forkliftRankTwo3 {
margin-bottom: 1.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background: no-repeat center center url('~@/assets/images/cutGraph/list3.png');
background-size: 100% 100%;
padding-left: 4vw;
box-sizing: border-box;
text-align: center;
}
.DPcomputer12Box .forkliftRankTwo4{
margin-bottom: 1.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list4.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
text-align: center;
.DPcomputer12Box .forkliftRankTwo4 {
margin-bottom: 1.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background: no-repeat center center url('~@/assets/images/cutGraph/list4.png');
background-size: 100% 100%;
padding-left: 4vw;
box-sizing: border-box;
text-align: center;
}
.DPcomputer12Box .forkliftRankTwo5{
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list5.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
text-align: center;
.DPcomputer12Box .forkliftRankTwo5 {
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background: no-repeat center center url('~@/assets/images/cutGraph/list5.png');
background-size: 100% 100%;
padding-left: 4vw;
box-sizing: border-box;
text-align: center;
}
</style>
\ No newline at end of file
</style>
src/views/MLargeScreen/components/smallComponents/DPcomputer5.vue
View file @ 27e5ba9a
......@@ -4,48 +4,47 @@
<div class="dataScrView_centerView_title">
<div :class="centerViewData.moduleText == 'centerModule1' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule1')">产量数据</div>
<div :class="centerViewData.moduleText == 'centerModule2' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule2')">运载数据</div>
<!-- <div :class="centerViewData.moduleText == 'centerModule3' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule3')">装载数据</div>-->
</div>
<div class="dataScrView_centerView_planNum" v-if="centerViewData.moduleText == 'centerModule1'">
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日计划量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.day.plan}}吨</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.todayPlan}}</div>
</div>
<img src="../../../../assets/images/cutGraph/renwujihua1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日完成量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.day.finish}}吨</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.todayComplete}}</div>
</div>
<img src="../../../../assets/images/cutGraph/mubiaoguanli1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日完成率</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{parseInt(outputMineData.day.eff)}}%</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.todayCompleteRate}}</div>
</div>
<img src="../../../../assets/images/cutGraph/wancheng1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">当月计划量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.month.plan}}吨</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.toMonthPlan}}</div>
</div>
<img src="../../../../assets/images/cutGraph/jihuarenwu2.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">当月累计完成量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.month.finish}}吨</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.toMonthComplete}}</div>
</div>
<img src="../../../../assets/images/cutGraph/zichantongji1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">当月完成率</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{parseInt(outputMineData.month.eff)}}%</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.toMonthCompleteRate}}</div>
</div>
<img src="../../../../assets/images/cutGraph/wanchenglv1.png">
</div>
......@@ -54,76 +53,46 @@
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日总运载量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAllCarry1}}吨</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.yunZaiTotal}}</div>
</div>
<img src="../../../../assets/images/cutGraph/renwujihua1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日平均运载量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAverageCarry1}}吨/小时</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.yunZaiAveHour}}</div>
</div>
<img src="../../../../assets/images/cutGraph/mubiaoguanli1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日总里程数</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAllMil1}}KM</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.milTotal}}</div>
</div>
<img src="../../../../assets/images/cutGraph/wancheng1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日总车数</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAllCarNum ? carryCenterData.dayAllCarNum : 0}}辆</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.trainsTotal}}</div>
</div>
<img src="../../../../assets/images/cutGraph/jihuarenwu2.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">单次运载平均时长</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.singleAverageTime}}H</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.aveSingleTransportTime}}</div>
</div>
<img src="../../../../assets/images/cutGraph/zichantongji1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">单次运载平均里程</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.singleAverageMil}}KM</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.aveSingleTransportMil}}</div>
</div>
<img src="../../../../assets/images/cutGraph/wanchenglv1.png">
</div>
</div>
<div class="dataScrView_centerView_planNum3" v-if="centerViewData.moduleText == 'centerModule3'">
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日装载量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{loadCenterData.dayAllLoad1}}吨</div>
</div>
<img src="../../../../assets/images/cutGraph/renwujihua1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日平均装载量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{loadCenterData.dayAverageLoad1}}吨/小时</div>
</div>
<img src="../../../../assets/images/cutGraph/mubiaoguanli1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日总工时</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{loadCenterData.dayAllTime}}H</div>
</div>
<img src="../../../../assets/images/cutGraph/wancheng1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日装载车数</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{loadCenterData.dayLoadCarNum ? loadCenterData.dayLoadCarNum : 0}}辆</div>
</div>
<img src="../../../../assets/images/cutGraph/jihuarenwu2.png">
</div>
</div>
<div id="centerEchartsView"></div>
</div>
</template>
......@@ -134,318 +103,182 @@ import * as echarts from 'echarts';
export default {
data(){
return {
DPcomputer5BoxTimer:null,
//产量数据以及中间图表数据
outputMineData:{
day:{finish:'0',eff:0,plan:'0',},
month:{finish:'0',eff:0,plan:'0',},
year:{finish:'0',eff:0,plan:'0',},
},
//运载数据以及中间图表数据
carryCenterData:{
dayAllCarry1:0,
dayAverageCarry1:0,
dayAllMil1:0,
dayAllCarNum:0,
singleAverageTime:0,
singleAverageMil:0,
},
//装载数据据以及中间图表数据
loadCenterData:{
dayAllLoad1:0,
dayAverageLoad1:0,
dayAllTime:0,
dayLoadCarNum:0,
},
//中间模块选择
centerViewData:{
moduleText:'centerModule1',
xAxisData:['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00','20:00','21:00','22:00','23:00'],
seriesData:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
},
data() {
return {
DPcomputer5BoxTimer: null,
//产量数据以及中间图表数据
outputMineData: {
day: {finish: '0', eff: 0, plan: '0',},
month: {finish: '0', eff: 0, plan: '0',},
year: {finish: '0', eff: 0, plan: '0',},
},
//运载数据以及中间图表数据
carryCenterData: {
dayAllCarry1: 0,
dayAverageCarry1: 0,
dayAllMil1: 0,
dayAllCarNum: 0,
singleAverageTime: 0,
singleAverageMil: 0,
},
//装载数据据以及中间图表数据
loadCenterData: {
dayAllLoad1: 0,
dayAverageLoad1: 0,
dayAllTime: 0,
dayLoadCarNum: 0,
},
//中间模块选择
centerViewData: {
moduleText: 'centerModule1',
xAxisData: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
seriesData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
},
clData:{
toMonthComplete: "暂无数据",
toMonthCompleteRate: "暂无数据",
toMonthPlan: "暂无数据",
todayComplete: "暂无数据",
todayCompleteRate: "暂无数据",
todayPlan: "暂无数据",
yunZaiTotal: "暂无数据",
yunZaiAveHour: "暂无数据",
milTotal: "暂无数据",
trainsTotal: "暂无数据",
aveSingleTransportTime: "暂无数据",
aveSingleTransportMil: "暂无数据",
},
}
},
mounted() {
this.loadData();
this.DPcomputer5BoxTimer = setInterval(() => {
this.loadData();
}, 10000)
},
methods: {
loadData() {
//获取采区当前日产量
HttpReq.truckDispatching.apiPlanDayQuery().then((res) => {
this.clData = res.data;
})
//中间echarts图表
HttpReq.truckDispatching.apiPlanTime1Query().then((res) => {
this.centerViewData.seriesData = res.data || [];
this.centerEcharts();
})
//中间echarts运载数据
HttpReq.truckDispatching.apiPlanZDay1Query().then((res) => {
if (res.length != 0) {
this.carryCenterData.dayAllCarry1 = res[0].finish;
this.carryCenterData.dayAverageCarry1 = parseFloat(res[0].pfin).toFixed(2);
this.carryCenterData.dayAllMil1 = res[0].allmil ? parseFloat(res[0].allmil).toFixed(3) : 0;
this.carryCenterData.dayAllCarNum = res[0].num;
this.carryCenterData.singleAverageTime = parseFloat(res[0].time).toFixed(2);
this.carryCenterData.singleAverageMil = res[0].averagemil ? parseFloat(res[0].averagemil).toFixed(3) : 0;
}
})
//中间echarts装载数据
HttpReq.truckDispatching.apiPlanZMonth1Query().then((res) => {
if (res.length != 0) {
this.loadCenterData.dayAllLoad1 = res[0].finish;
this.loadCenterData.dayAverageLoad1 = parseFloat(res[0].pfin).toFixed(2);
this.loadCenterData.dayAllTime = res[0].time;
this.loadCenterData.dayLoadCarNum = res[0].num;
}
})
},
mounted(){
this.loadData();
//中间模块选择
centerSelectFn(text) {
this.centerViewData.moduleText = text;
this.loadData();
},
methods:{
loadData() {
//获取采区当前日产量
HttpReq.truckDispatching.apiPlanDayQuery().then((res) => {
let undueArray = {};
if (res.length == 0 || JSON.stringify(res[0]) == '{}') {
undueArray.eff = 0;
undueArray.finish = 0;
undueArray.plan = 0;
} else {
if (res[0].eff == '') {
undueArray.eff = 0;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
} else {
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
}
this.outputMineData.day = undueArray;
})
//获取采区当前月产量
HttpReq.truckDispatching.apiPlanMonthQuery().then((res) => {
let undueArray = {};
if (res.length == 0 || JSON.stringify(res[0]) == '{}') {
undueArray.eff = 0;
undueArray.finish = 0;
undueArray.plan = 0;
} else {
if (res[0].eff == '') {
undueArray.eff = 0;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
} else {
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
}
this.outputMineData.month = undueArray;
})
//获取采区当前年产量
HttpReq.truckDispatching.apiPlanYearQuery().then((res) => {
let undueArray = {};
if (res.length == 0 || JSON.stringify(res[0]) == '{}') {
undueArray.eff = 0;
undueArray.finish = 0;
undueArray.plan = 0;
} else {
if (res[0].eff == '') {
undueArray.eff = 0;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
} else {
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
}
this.outputMineData.year = undueArray;
})
//中间echarts图表
HttpReq.truckDispatching.apiPlanTime1Query().then((res) => {
// let arr3 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
// res.forEach((item, index) => {
// arr3.splice(parseInt(item.hour) - 7, 1, parseFloat(item.finish));
// })
this.centerViewData.seriesData = res.data || [];
this.centerEcharts();
})
//中间echarts运载数据
HttpReq.truckDispatching.apiPlanZDay1Query().then((res) => {
if (res.length != 0) {
this.carryCenterData.dayAllCarry1 = res[0].finish;
this.carryCenterData.dayAverageCarry1 = parseFloat(res[0].pfin).toFixed(2);
this.carryCenterData.dayAllMil1 = res[0].allmil ? parseFloat(res[0].allmil).toFixed(3) : 0;
this.carryCenterData.dayAllCarNum = res[0].num;
this.carryCenterData.singleAverageTime = parseFloat(res[0].time).toFixed(2);
this.carryCenterData.singleAverageMil = res[0].averagemil ? parseFloat(res[0].averagemil).toFixed(3) : 0;
//中间模块Echarts
centerEcharts() {
echarts.init(document.getElementById('centerEchartsView')).dispose();
var myChart = echarts.init(document.getElementById('centerEchartsView'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
})
//中间echarts装载数据
HttpReq.truckDispatching.apiPlanZMonth1Query().then((res) => {
if (res.length != 0) {
this.loadCenterData.dayAllLoad1 = res[0].finish;
this.loadCenterData.dayAverageLoad1 = parseFloat(res[0].pfin).toFixed(2);
this.loadCenterData.dayAllTime = res[0].time;
this.loadCenterData.dayLoadCarNum = res[0].num;
}
})
this.DPcomputer5BoxTimer = setInterval(() => {
//获取采区当前日产量
HttpReq.truckDispatching.apiPlanDayQuery().then((res) => {
let undueArray = {};
if (res.length == 0 || JSON.stringify(res[0]) == '{}') {
undueArray.eff = 0;
undueArray.finish = 0;
undueArray.plan = 0;
} else {
if (res[0].eff == '') {
undueArray.eff = 0;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
} else {
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
},
grid: {
top: '35%',
left: '1%',
right: '1%',
bottom: '2%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: this.centerViewData.xAxisData,
// axisTick: {
// alignWithLabel: true
// },
// axisPointer: {
// type: 'shadow'
// },
axisLabel: {
show: true,
textStyle: {
color: 'white'
}
}
this.outputMineData.day = undueArray;
})
//获取采区当前月产量
HttpReq.truckDispatching.apiPlanMonthQuery().then((res) => {
let undueArray = {};
if (res.length == 0 || JSON.stringify(res[0]) == '{}') {
undueArray.eff = 0;
undueArray.finish = 0;
undueArray.plan = 0;
} else {
if (res[0].eff == '') {
undueArray.eff = 0;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
} else {
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
},
axisLine: {
lineStyle: {
color: 'white',
width: 1
}
}
this.outputMineData.month = undueArray;
})
//获取采区当前年产量
HttpReq.truckDispatching.apiPlanYearQuery().then((res) => {
let undueArray = {};
if (res.length == 0 || JSON.stringify(res[0]) == '{}') {
undueArray.eff = 0;
undueArray.finish = 0;
undueArray.plan = 0;
} else {
if (res[0].eff == '') {
undueArray.eff = 0;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
} else {
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
],
yAxis: [
{
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: 'white'
}
}
this.outputMineData.year = undueArray;
})
//中间echarts图表
HttpReq.truckDispatching.apiPlanTime1Query().then((res) => {
// let arr3 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
// res.forEach((item,index)=>{
// arr3.splice(parseInt(item.hour) - 7,1, parseFloat(item.finish));
// })
this.centerViewData.seriesData = res.data || [];
this.centerEcharts();
})
//中间echarts运载数据
HttpReq.truckDispatching.apiPlanZDay1Query().then((res) => {
if (res.length != 0) {
this.carryCenterData.dayAllCarry1 = res[0].finish;
this.carryCenterData.dayAverageCarry1 = parseFloat(res[0].pfin).toFixed(2);
this.carryCenterData.dayAllMil1 = res[0].allmil ? parseFloat(res[0].allmil).toFixed(3) : 0;
this.carryCenterData.dayAllCarNum = res[0].num;
this.carryCenterData.singleAverageTime = parseFloat(res[0].time).toFixed(2);
this.carryCenterData.singleAverageMil = res[0].averagemil ? parseFloat(res[0].averagemil).toFixed(3) : 0;
}
})
//中间echarts装载数据
HttpReq.truckDispatching.apiPlanZMonth1Query().then((res) => {
if (res.length != 0) {
this.loadCenterData.dayAllLoad1 = res[0].finish;
this.loadCenterData.dayAverageLoad1 = parseFloat(res[0].pfin).toFixed(2);
this.loadCenterData.dayAllTime = res[0].time;
this.loadCenterData.dayLoadCarNum = res[0].num;
}
})
}, 10000)
},
//中间模块选择
centerSelectFn(text) {
this.centerViewData.moduleText = text;
},
//中间模块Echarts
centerEcharts() {
echarts.init(document.getElementById('centerEchartsView')).dispose();
var myChart = echarts.init(document.getElementById('centerEchartsView'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '35%',
left: '1%',
right: '1%',
bottom: '2%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: this.centerViewData.xAxisData,
// axisTick: {
// alignWithLabel: true
// },
// axisPointer: {
// type: 'shadow'
// },
axisLabel: {
show: true,
textStyle: {
color: 'white'
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 1
}
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['rgba(255,255,255,0.3)']
}
}
],
yAxis: [
{
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: 'white'
}
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['rgba(255,255,255,0.3)']
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 0
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 0
}
}
],
series: [
{
name: '重量(吨)',
type: 'bar',
barWidth: 20,
data: this.centerViewData.seriesData,
itemStyle: {
color: '#01CBF6'
},
}
]
};
option && myChart.setOption(option);
},
}
],
series: [
{
name: '重量(吨)',
type: 'bar',
barWidth: 20,
data: this.centerViewData.seriesData,
itemStyle: {
color: '#01CBF6'
},
}
]
};
option && myChart.setOption(option);
},
beforeDestroy(){
if(this.DPcomputer5BoxTimer) {
clearInterval(this.DPcomputer5BoxTimer);
this.DPcomputer5BoxTimer = null;
}
},
beforeDestroy() {
if (this.DPcomputer5BoxTimer) {
clearInterval(this.DPcomputer5BoxTimer);
this.DPcomputer5BoxTimer = null;
}
}
}
</script>
......
src/views/personnelPositioning/beacon/index.vue
View file @ 27e5ba9a
......@@ -196,6 +196,12 @@ export default {
cancelForm() {
this.visible = false;
this.$refs.formViewRef.resetFields();
this.formData = {
beaconame: '',
beaconumber: '',
xcoordinate: '',
ycoordinate: '',
}
},
tableRowClassName({row, rowIndex}) {
},
......
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