Skip to content

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

1

parent 13fa28ad
Hide whitespace changes
Inline Side-by-side
Showing with 523 additions and 13 deletions
src/views/MLargeScreen/components/smallComponents/DPcomputer6.vue
View file @ 45f88de8
<template> <template>
<div class="DPcomputer6Box"> <div class="DPcomputer6Box">
<!-- 气象数据 --> <!-- 气象数据 -->
<div class="dataScrView_rightView_title">气象数据</div>
<div class="dataScrView_rightView_content">
<div class="todayWeather1">
<div style="font-size:40px;margin-right:30px;">{{(parseInt(weatherData.today.high.slice(3,5)) + parseInt(weatherData.today.low.slice(3,5))) / 2}}℃</div>
<img :src=" weatherData.today.type == '晴' ? weatherPic.sunnyPic : weatherData.today.type == '多云' ? weatherPic.cloudyPic : weatherPic.overcastPic " height="25">
<div style="font-size:18px;">{{weatherData.today.type}} / {{currentTime.day}}</div>
</div>
<div class="todayWeather2">
<div v-for="(item,index) in weatherData.forecastData" :key="index">
<div style="color:#D0DAFF;font-size:13px;margin-bottom:5px;">{{item.date}}</div>
<img :src="item.type == '晴' ? weatherPic.sunnyPic : item.type == '多云' ? weatherPic.cloudyPic : weatherPic.overcastPic " height="25">
<div style="color:#D0DAFF;font-size:15px;margin-top:5px;">{{(item.low.slice(3,6)) + '-' +(item.high.slice(3,6))}}</div>
</div>
</div>
<div class="todayWeather3">
<img src="../../../../assets/images/cutGraph/fengli1.png" height="45">
<div>风力：{{weatherData.today.fengli.slice(9,10)}}级</div>
<div>
<div>温度：{{(parseInt(weatherData.today.high.slice(3,5)) + parseInt(weatherData.today.low.slice(3,5))) / 2}}℃</div>
<div>湿度：{{(parseInt(weatherData.today.high.slice(3,5)) + parseInt(weatherData.today.low.slice(3,5))) / 2}}%</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import sunnyPic from '../../../../assets/images/cutGraph/sunny.png'
import cloudyPic from '../../../../assets/images/cutGraph/cloudy.png'
import overcastPic from '../../../../assets/images/cutGraph/overcast.png'
export default { export default {
data(){ data(){
return { return {
DPcomputer6BoxTimer:null, DPcomputer6BoxTimer:null,
//时间
currentTime:{
day:'',
month:'',
year:'',
},
//天气图片
weatherPic:{
sunnyPic:sunnyPic,
cloudyPic:cloudyPic,
overcastPic:overcastPic,
},
//天气数据
weatherData:{
forecastData:[],
today:{
high:'高温 10℃',
low:'高温 10℃',
type:'多云',
fengli:'<![CDATA[0级]]>',
},
},
} }
}, },
mounted(){ mounted(){
...@@ -21,8 +67,65 @@ export default { ...@@ -21,8 +67,65 @@ export default {
}, },
methods:{ methods:{
loadData(){ loadData(){
this.dayCurrentTimeFn();
this.monthCurrentTimeFn();
this.yearCurrentTimeFn();
//获取天气
HttpReq.truckDispatching.getWeatherInforQuery({cityName:'济南'}).then((res) => {
if(res.code == 200 && res.msg){
let data1 = JSON.parse(res.msg).data.forecast;
this.weatherData.forecastData = data1;
this.weatherData.today = data1[0];
}
})
this.DPcomputer6BoxTimer = setInterval(() => {
//获取天气
HttpReq.truckDispatching.getWeatherInforQuery({cityName:'济南'}).then((res) => {
if(res.code == 200 && res.msg){
let data1 = JSON.parse(res.msg).data.forecast;
this.weatherData.forecastData = data1;
this.weatherData.today = data1[0];
}
})
},10000)
}, },
//获取当前时间
dayCurrentTimeFn(){
var date = new Date();
var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
var day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
//修改月份格式
if (month >= 1 && month <= 9) {
month = "0" + month;
}
//修改日期格式
if (day >= 0 && day <= 9) {
day = "0" + day;
}
let currentFormatDate = year + "-" + month + "-" + day;
this.currentTime.day = currentFormatDate;
},
monthCurrentTimeFn(){
var date = new Date();
var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
//修改月份格式
if (month >= 1 && month <= 9) {
month = "0" + month;
}
let currentFormatDate = year + "-" + month;
this.currentTime.month = currentFormatDate;
},
yearCurrentTimeFn(){
var date = new Date();
var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
let currentFormatDate = year;
this.currentTime.year = currentFormatDate;
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer6BoxTimer) { if(this.DPcomputer6BoxTimer) {
...@@ -46,4 +149,52 @@ export default { ...@@ -46,4 +149,52 @@ export default {
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
} }
.DPcomputer6Box .dataScrView_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;
}
.DPcomputer6Box .dataScrView_rightView_content{
width: 100%;
height: 19vh;
}
.DPcomputer6Box .todayWeather1{
width: 100%;
height: 4vh;
display: flex;
color: #03FEFE;
align-items: center;
padding: 0px 5px;
box-sizing: border-box;
}
.DPcomputer6Box .todayWeather2{
margin-top: 10px;
width: 100%;
height: 8vh;
display: flex;
justify-content: space-between;
padding: 0px 5px;
box-sizing: border-box;
text-align: center;
}
.DPcomputer6Box .todayWeather3{
margin-top: 5px;
width: 100%;
height: 5vh;
display: flex;
justify-content: space-between;
padding: 0px 5px;
box-sizing: border-box;
align-items: center;
color: #03FEFE;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer7.vue
View file @ 45f88de8
<template> <template>
<div> <div class="DPcomputer7Box">
<!-- 车辆工时-->
<div class="dataScrView_rightView_title truck_titleStyle">
<div>车辆工时</div>
<div class="driverTitleDateStyle">
<div :class="carWorkTimeData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="carWorkTimeChangeTime('day')">日</div>
<div :class="carWorkTimeData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="carWorkTimeChangeTime('month')">月</div>
<div :class="carWorkTimeData.selectTimeText == 'year' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="carWorkTimeChangeTime('year')">年</div>
</div>
</div>
<div class="dataScrView_rightView_content">
<div class="carWorkTimeStyle">
<div v-for="(item,index) in carWorkTimeData.listData" :key="index">
<div class="carPicStyle1">
<img src="../../../../assets/images/cutGraph/huoyunqiche1.png">
</div>
<div class="carPicStyle2">
<div style="margin-top:0.5vh;font-size:17px;">{{item.cartype}}</div>
<div style="font-size:14px;margin-top:1.5vh;">总工时：<b>{{item.gongshi}}</b>H</div>
<div style="font-size:14px;margin-top:1vh;">闲置率：<b>{{item.xianzhi}}</b>%</div>
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -11,15 +33,134 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; ...@@ -11,15 +33,134 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
export default { export default {
data(){ data(){
return { return {
DPcomputer7BoxTimer:null,
//时间
currentTime:{
day:'',
month:'',
year:'',
},
//车辆工时
carWorkTimeData:{
selectTimeText:'day',
listData:[
{cartype:'卡车',gongshi:0,xianzhi:0},
{cartype:'铲车',gongshi:0,xianzhi:0},
{cartype:'其他车辆',gongshi:0,xianzhi:0}
],
selectTimeDate:'',
},
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
this.dayCurrentTimeFn();
this.monthCurrentTimeFn();
this.yearCurrentTimeFn();
//车辆工时
HttpReq.truckDispatching.carWorkInforQuery({riqi:this.carWorkTimeData.selectTimeDate}).then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.carWorkTimeData.listData = [
{cartype:'卡车',gongshi:0,xianzhi:0},
{cartype:'铲车',gongshi:0,xianzhi:0},
{cartype:'其他车辆',gongshi:0,xianzhi:0},
];
}else{
this.carWorkTimeData.listData = res.data.content;
}
}
})
this.DPcomputer7BoxTimer = setInterval(() => {
//车辆工时
HttpReq.truckDispatching.carWorkInforQuery({riqi:this.carWorkTimeData.selectTimeDate}).then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.carWorkTimeData.listData = [
{cartype:'卡车',gongshi:0,xianzhi:0},
{cartype:'铲车',gongshi:0,xianzhi:0},
{cartype:'其他车辆',gongshi:0,xianzhi:0},
];
}else{
this.carWorkTimeData.listData = res.data.content;
}
}
})
},10000)
},
//车辆工时切换时间
carWorkTimeChangeTime(text){
this.carWorkTimeData.selectTimeText = text;
if(text == 'day'){
this.carWorkTimeData.selectTimeDate = this.currentTime.day;
}
if(text == 'month'){
this.carWorkTimeData.selectTimeDate = this.currentTime.month;
}
if(text == 'year'){
this.carWorkTimeData.selectTimeDate = this.currentTime.year;
}
HttpReq.truckDispatching.carWorkInforQuery({riqi:this.carWorkTimeData.selectTimeDate}).then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.carWorkTimeData.listData = [
{cartype:'卡车',gongshi:0,xianzhi:0},
{cartype:'铲车',gongshi:0,xianzhi:0},
{cartype:'其他车辆',gongshi:0,xianzhi:0},
];
}else{
this.carWorkTimeData.listData = res.data.content;
}
}
})
},
//获取当前时间
dayCurrentTimeFn(){
var date = new Date();
var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
var day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
//修改月份格式
if (month >= 1 && month <= 9) {
month = "0" + month;
}
//修改日期格式
if (day >= 0 && day <= 9) {
day = "0" + day;
}
let currentFormatDate = year + "-" + month + "-" + day;
this.currentTime.day = currentFormatDate;
this.carWorkTimeData.selectTimeDate = currentFormatDate;
},
monthCurrentTimeFn(){
var date = new Date();
var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
//修改月份格式
if (month >= 1 && month <= 9) {
month = "0" + month;
}
let currentFormatDate = year + "-" + month;
this.currentTime.month = currentFormatDate;
},
yearCurrentTimeFn(){
var date = new Date();
var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
let currentFormatDate = year;
this.currentTime.year = currentFormatDate;
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer7BoxTimer) {
clearInterval(this.DPcomputer7BoxTimer);
this.DPcomputer7BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +170,95 @@ export default { ...@@ -29,5 +170,95 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer7Box{
width: 20vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer7Box .dataScrView_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;
}
.DPcomputer7Box .truck_titleStyle{
display: flex;
justify-content: space-between;
padding-right: 4vw;
}
.DPcomputer7Box .driverTitleDateStyle{
display: flex;
color: #06EFFE;
font-size: 16px;
text-shadow: 0px 0px 0px;
height: 3.5vh;
align-items: center;
}
.DPcomputer7Box .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;
}
.DPcomputer7Box .driverTitleDateStyle_son2{
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
padding:0px 5px;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
}
.DPcomputer7Box .dataScrView_rightView_content{
width: 100%;
height: 19vh;
}
.DPcomputer7Box .carWorkTimeStyle{
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
}
.DPcomputer7Box .carWorkTimeStyle>div{
width: 33%;
}
.DPcomputer7Box .carPicStyle1{
width: 3.5vw;
height: 3.5vw;
margin: 0px auto;
position: relative;
}
.DPcomputer7Box .carPicStyle1>img{
height: 3.5vw;
width: 3.5vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.DPcomputer7Box .carPicStyle2{
width: 5vw;
height: 10vh;
margin: 10px auto;
background:no-repeat center center url('~@/assets/images/cutGraph/zu2388.png');
background-size:100% 100%;
text-align: center;
color: #03FEFE;
overflow: hidden;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer8.vue
View file @ 45f88de8
<template> <template>
<div> <div class="DPcomputer8Box">
</div> </div>
</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 'echarts-liquidfill'; // 引入水球图的组件
export default { export default {
data(){ data(){
return { return {
DPcomputer8BoxTimer:null,
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
},
//矿石开采效率
initLiquidEchart1(){
echarts.init(document.getElementById('liquidEchart1')).dispose();
setTimeout(() => {
this.chartsLiquid = echarts.init(document.getElementById('liquidEchart1'));
// 把配置和数据放这里
this.chartsLiquid.setOption({
series: [{
type: 'liquidFill',
name: '比率\n' + this.exploitationEfficiencyData.rate1 * 100 + '%',
radius: '70px',
data: this.exploitationEfficiencyData.rate1,
label: {
normal: {
formatter: '{a}',
color: '#05ADFB',
insideColor: '#fff',
textStyle: {
fontSize: 18,
}
}
},
backgroundStyle: {
color: '#012861',
borderWidth: "1.5", // 内边框
borderColor: "rgb(6, 190, 250)"
},
color: [{
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 1,
color: ["rgb(6, 190, 250)"], // 0% 处的颜色
}, {
offset: 0,
color: ["rgb(6, 190, 250)"], // 100% 处的颜色
}],
global: false // 缺省为 false
}],
outline: {
show: true,
borderDistance: 0,
itemStyle: {
borderColor: '#012861',
borderWidth: 5,
shadowBlur: 5,
shadowColor: 'rgb(6, 190, 250)'
},
}
}]
});
}, 50)
},
initLiquidEchart2(){
echarts.init(document.getElementById('liquidEchart2')).dispose();
setTimeout(() => {
this.chartsLiquid = echarts.init(document.getElementById('liquidEchart2'));
// 把配置和数据放这里
this.chartsLiquid.setOption({
series: [{
type: 'liquidFill',
name: '比率\n' + this.exploitationEfficiencyData.rate2 * 100 + '%',
radius: '70px',
data: this.exploitationEfficiencyData.rate2,
label: {
normal: {
formatter: '{a}',
color: 'rgb(3, 254, 254)',
insideColor: '#fff',
textStyle: {
fontSize: 18,
}
}
},
backgroundStyle: {
color: '#012861',
borderWidth: "1.5", // 内边框
borderColor: "rgb(3, 254, 254)"
},
color: [{
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 1,
color: ["rgb(3, 254, 254)"], // 0% 处的颜色
}, {
offset: 0,
color: ["rgb(3, 254, 254)"], // 100% 处的颜色
}],
global: false // 缺省为 false
}],
outline: {
show: true,
borderDistance: 0,
itemStyle: {
borderColor: '#012861',
borderWidth: 5,
shadowBlur: 5,
shadowColor: 'rgb(3, 254, 254)'
},
}
}]
});
}, 50)
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer8BoxTimer) {
clearInterval(this.DPcomputer8BoxTimer);
this.DPcomputer8BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +150,12 @@ export default { ...@@ -29,5 +150,12 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer8Box{
width: 20vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
</style> </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