Skip to content

卡
卡车调度系统
Commit 33f630ef authored by caicaicai's avatar caicaicai
Browse files
Options

修改

parent 1de63f2d
Show whitespace changes
Inline Side-by-side
Showing with 477 additions and 695 deletions
src/assets/js/common.js
View file @ 33f630ef
......@@ -1768,6 +1768,37 @@ var HttpReq = function(){
params:param,
})
},
//大屏——智能调度——近期通知列表
recentNoticeQuery: function(param){
return request({
url: '/api/Notice',
method: 'get',
params:param,
})
},
recentNoticeAdd: function(data){
return request({
url: '/api/Notice',
method: 'POST',
data:data,
}).then((res) => {
return res
})
},
recentNoticeUpdate: function(data){
return request({
url: '/api/Notice',
method: 'PUT',
data:data,
})
},
recentNoticeDel: function(data){
return request({
url: '/api/Notice',
method: 'Delete',
data:data,
})
},
......
src/views/IntelligentDispatchManagement/IntelligentDispatch/index.vue
View file @ 33f630ef
......@@ -11,12 +11,6 @@
<label class="el-form-item-label" style="font-weight: 500;">派单名称</label>
<el-input v-model="query.names" clearable size="small" placeholder="请输入派单名称" style="width:180px;"/>
<!-- <label class="el-form-item-label" style="font-weight: 500;">开始时间</label>
<el-date-picker v-model="query.startTime" type="datetime" placeholder="请选择开始时间"></el-date-picker>
<label class="el-form-item-label" style="font-weight: 500;">结束时间</label>
<el-date-picker v-model="query.endTime" type="datetime" placeholder="请选择结束时间"></el-date-picker> -->
<el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
<el-button size="mini" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
</div>
......@@ -28,9 +22,7 @@
<div class="ctin-box">
<div class="content-within">
<div class="content-fix">
<div class="toolbar">
<!-- <el-button size="mini" type="primary" icon="el-icon-plus" @click="toAdd">新增</el-button> -->
</div>
<div class="toolbar"></div>
<div class="content">
<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
<el-table-column prop="id" label="单号" align="center"></el-table-column>
......@@ -38,16 +30,10 @@
<el-table-column prop="names" label="派单名称" align="center"></el-table-column>
<el-table-column prop="zero" label="起点" align="center"></el-table-column>
<el-table-column prop="end" label="终点" align="center"></el-table-column>
<el-table-column prop="space" label="里程" align="center"></el-table-column>
<el-table-column prop="space" label="里程(Km)" align="center"></el-table-column>
<el-table-column prop="startTime" label="开始时间" align="center"></el-table-column>
<el-table-column prop="endTime" label="完成时间" align="center"></el-table-column>
<el-table-column prop="status" label="状态" align="center"></el-table-column>
<!-- <el-table-column label="操作" align="center" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-edit" @click="toEdit(scope.row)"></el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" @click="toDelete(scope.row)"></el-button>
</template>
</el-table-column> -->
<el-table-column prop="status" label="状态" align="center" :formatter="statusChange"></el-table-column>
</el-table>
<!--分页组件-->
<el-pagination :total="total" :current-page="page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
......@@ -57,42 +43,6 @@
</div>
</div>
<!-- 表单渲染 -->
<el-dialog append-to-body :close-on-click-modal="true" :before-close="cancelForm" :visible.sync="form.visible" :title="form.title" width="700px">
<el-form :model="form.item" :rules="rules" ref="form1" :inline="true" size="small" label-width="150px">
<el-form-item label="设备名称" prop="name">
<el-input v-model="form.item.name" style="width:280px;" placeholder="请输入设备名称"/>
</el-form-item>
<el-form-item label="设备编码" prop="code">
<el-input v-model="form.item.code" style="width:280px;" placeholder="请输入车牌号"/>
</el-form-item>
<el-form-item label="设备状态" prop="status">
<el-select v-model="form.item.status" placeholder="请选择设备状态" style="width:280px;">
<el-option label="正常" value="正常"></el-option>
<el-option label="故障" value="故障"></el-option>
</el-select>
</el-form-item>
<el-form-item label="终端车辆类型" prop="carclass">
<el-select v-model="form.item.carclass" placeholder="请选择终端车辆类型" style="width:280px;">
<el-option label="卡车" value="卡车"></el-option>
<el-option label="电铲" value="电铲"></el-option>
</el-select>
</el-form-item>
<el-form-item label="安装车辆" prop="carname">
<el-select v-model="form.item.carname" placeholder="请选择安装车辆" style="width:280px;">
<el-option :label="item.name + '/' + item.number" :value="item.name + '/' + item.number" v-for="(item,index) in selectList" :key="index"></el-option>
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remarks">
<el-input type="textarea" v-model="form.item.remarks" style="width:280px;"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancelForm">取消</el-button>
<el-button :loading="form.status.cu === 2" type="primary" @click="submitForm('form1', form.item)">确认</el-button>
</div>
</el-dialog>
</div>
</template>
......@@ -140,7 +90,7 @@ export default {
param.sort = sort;
this.$nextTick(()=>{
//获取设备信息
HttpReq.truckDispatching.IntelligentDispatchHistoryQuery(param).then((res) => {
if(res.code == 200){
this.loading = false;
......@@ -168,37 +118,6 @@ export default {
this.query = {};
this.loadData()
},
cancelForm(a, b, c){
this.form.visible = false;
},
toAdd() {
// 请除表单验证
this.$refs['form1'] && this.$refs['form1'].clearValidate();
this.form.title = '新增设备';
this.form.status.cu = 0;
this.form.visible = true;
this.form.reqType = 'add';
this.form.item = {};
},
toEdit(item) {
// 请除表单验证
this.$refs['form1'] && this.$refs['form1'].clearValidate();
this.form.title = '修改设备';
this.form.status.cu = 0;
this.form.visible = true;
this.form.item = {...item};
this.form.reqType = 'edit';
},
toDelete(item) {
var id = item.id;
this.$confirm('确认删除该条数据吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then((e) => {
this.reqRemoveProject([id])
}).catch((e) => {})
},
pageChange(e) {
this.page = e
this.loadData()
......@@ -208,118 +127,9 @@ export default {
this.size = e
this.loadData()
},
submitForm(validateName, item){
if(!this.form.status.cu){
this.form.status.cu = 2;
this.$refs[validateName].validate(valid => {
if(valid){
if(this.form.reqType === 'add'){
this.reqAddItem(this.form, item)
}else{
this.reqUpdateItem(this.form, item)
}
}else{
this.form.status.cu = 0
}
});
};
},
//新增设备
reqAddItem(form, item){
let lastData = {...item};
HttpReq.truckDispatching.deviceManagementAdd(lastData).then((res) => {
form.visible = false;
if(res.code == 200){
this.$notify({
title: '设备新增成功！',
type: 'success',
duration: 2500
});
this.loadData()
}else{
this.$notify({
title: res.msg,
type: 'error',
duration: 2500
})
}
}).catch(function(error) {
form.status.cu = 0
});
},
//修改设备
reqUpdateItem(form, item){
let lastData = {...item};
HttpReq.truckDispatching.deviceManagementUpdate(lastData).then((res) => {
form.visible = false;
if(res.code == 200){
this.$notify({
title: '设备修改成功！',
type: 'success',
duration: 2500
});
this.loadData()
}else{
this.$notify({
title: res.msg,
type: 'error',
duration: 2500
})
}
}).catch(function(error) {
form.status.cu = 0
});
},
//删除设备
reqRemoveProject(item){
HttpReq.truckDispatching.deviceManagementDel(item).then((res) => {
if(res.status == 400){
this.$notify({
title: res.msg,
type: 'error',
duration: 2500
})
}else{
this.$notify({
title: '删除成功！',
type: 'success',
duration: 2500
});
}
this.loadData();
})
},
//时间转换
currentTime(time){
var date = new Date(time);
var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
var day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
var hours = date.getHours(); //小时 ,返回 Date 对象的小时 (0 ~ 23)
var minutes = date.getMinutes(); //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
var seconds = date.getSeconds(); //秒 ,返回 Date 对象的秒数 (0 ~ 59)
//修改月份格式
if (month >= 1 && month <= 9) {
month = "0" + month;
}
//修改日期格式
if (day >= 0 && day <= 9) {
day = "0" + day;
}
//修改小时格式
if (hours >= 0 && hours <= 9) {
hours = "0" + hours;
}
//修改分钟格式
if (minutes >= 0 && minutes <= 9) {
minutes = "0" + minutes;
}
//修改秒格式
if (seconds >= 0 && seconds <= 9) {
seconds = "0" + seconds;
}
let currentFormatDate = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
return currentFormatDate;
//状态转换
statusChange(row){
return row.status == 0 ? '完成' : '进行中';
}
}
}
......
src/views/MLargeScreen/components/intelligentSchedul/index.vue
View file @ 33f630ef
......@@ -3,17 +3,65 @@
<div class="intelligentSchScrView_leftView">
<!-- 人工调度 -->
<div>
<div class="intelligentSchScrView_leftView1">
<div class="intelligentSchScrView_leftView_title">人工调度</div>
<div class="intelligentSchScrView_leftView_content">
<div class="voiceAppContent_1">
<div>选择车队：</div>
<el-select v-model="selectCarFleet" placeholder="请选择车队" style="width:14vw;" @change="toSearchFn()">
<el-option v-for="(item,index) in carFleetData" :key="index" :label="item.name" :value="item.name" style="font-size:18px;"></el-option>
</el-select>
</div>
<div class="voiceAppContent_2">
<div class="voiceAppContent_2_title">选择车辆</div>
<div class="voiceAppContent_2_content">
<el-checkbox-group v-model="selectCarRadioArray">
<el-checkbox v-for="(item,index) in carsInforData" :label="item" :key="index" style="margin-top:7px;">
<div style="width:7.5vw;margin-left:1.7vw;">{{item.name}}</div>
<div>{{item.number}}</div>
</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="voiceAppContent_3">
<div class="voiceAppContent_2_title">已选中车辆</div>
<div class="voiceAppContent_3_content">
<div v-for="(item,index) in selectCarRadioArray" :key="index" class="voiceAppContent_3_content_selectCar">
<div>{{item.name}}</div>
<div style="width:20px;height:20px;background-color: rgb(4,112,171);text-align: center;font-size:30px;line-height:20px;cursor: pointer;" @click="cancelSelect(index)">
<span>×</span>
</div>
</div>
</div>
</div>
<div class="voiceAppContent_4">
<el-button type="primary" @click="toNoticeFn('广播')">广播</el-button>
<el-button type="primary" @click="toNoticeFn('紧急通知')">紧急通知</el-button>
<el-button type="primary" @click="toNoticeFn('通话')">通话</el-button>
<el-button type="primary" @click="toNoticeFn('人工调度')">人工调度</el-button>
</div>
</div>
</div>
<!-- 近期通知列表-->
<div>
<div class="intelligentSchScrView_leftView2">
<div class="intelligentSchScrView_leftView_title">近期通知列表</div>
<div class="intelligentSchScrView_leftView_content">
<div class="rolling">
<div class="table-box">
<dl>
<dt>
<div>通知类型</div>
<div>开始时间</div>
<div>录音回放</div>
</dt>
<dd v-for="(item,index) in recentNoticeData" :key="index">
<div>{{item.noticeClass}}</div>
<div>{{item.createTime}}</div>
<div style="cursor: pointer;text-decoration:underline;" @click="playSoundRecordingFn(item.id)">录音播放</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
......@@ -23,93 +71,56 @@
<div>
<div class="intelligentSchScrView_rightView_title">智能调度信息</div>
<div class="intelligentSchScrView_rightView_content">
</div>
</div>
<!-- 电铲动态-->
<div class="intelligentSchScrView_rightView_content_1_top">
<div>
<div class="intelligentSchScrView_rightView_title">电铲动态</div>
<div class="intelligentSchScrView_rightView_content">
<div class="ForkliftDynamicContent1">
<div>
<div>今日完成量</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.rate}}%</div>
<img src="../../../../assets/images/cutGraph/zhengzaijinxing1.png">
<div style="color:#F8D909;text-align: center;">
<div style="font-size:16px;">正在派送中</div>
<div style="font-size:22px;">{{dispatchLoadingNum}}</div>
</div>
<div>
<div>今日工时/H</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.workTime}}</div>
</div>
<div>
<div>今日里程/Km</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.mileage}}</div>
<img src="../../../../assets/images/cutGraph/wanchengle1.png">
<div style="color:#01EDF7;text-align: center;">
<div style="font-size:16px;">已经完成的</div>
<div style="font-size:22px;">{{dispatchFinishNum}}</div>
</div>
</div>
<div class="carDynamicContent1">
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>开始工作时间</div>
<div>{{forkliftkDynamicListData.startTime}}</div>
</div>
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>结束工作时间</div>
<div>{{forkliftkDynamicListData.endTime}}</div>
</div>
<div class="intelligentSchScrView_rightView_content_1_bottom">
<div class="intelligentSchScrView_rightView_content_1_bottom_rolling">
<div class="table-box">
<dl>
<dt>
<div>起点</div>
<div>调度时间</div>
<div>状态</div>
<div>目的地</div>
</dt>
<dd v-for="(item,index) in dispatchDetailsList" :key="index">
<div>{{item.zero}}</div>
<div>{{item.name}} {{item.startTime.substring(11,16)}}</div>
<div>{{item.status == 0 ? '完成' : '进行中'}}</div>
<div>{{item.end}}</div>
</dd>
</dl>
</div>
<div class="carDynamicContent2">
<img src="../../../../assets/images/cutGraph/tuiyuan1.png">
<span class="el-icon-sort"></span>
<div>
<div style="color:white;">{{forkliftkDynamicListData.loadArea}}</div>
<div style="color:white;">{{forkliftkDynamicListData.unloadArea}}</div>
</div>
<span class="el-icon-sort"></span>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div>
</div>
</div>
<!-- 其他车动态 -->
<!-- 车辆区域分布-->
<div>
<div class="intelligentSchScrView_rightView_title">其他车动态</div>
<div class="intelligentSchScrView_rightView_title">车辆区域分布</div>
<div class="intelligentSchScrView_rightView_content">
<div class="otherCarDynamicContent1">
<div>
<div>今日完成量</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.rate}}%</div>
</div>
<div>
<div>今日工时/H</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.workTime}}</div>
</div>
<div>
<div>今日里程/Km</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.mileage}}</div>
<div id="carsAreaDistributionView"></div>
</div>
</div>
<div class="carDynamicContent1">
<!-- 各装点车铲比 -->
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>开始工作时间</div>
<div>{{otherCarDynamicListData.startTime}}</div>
</div>
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>结束工作时间</div>
<div>{{otherCarDynamicListData.endTime}}</div>
</div>
</div>
<div class="carDynamicContent2">
<img src="../../../../assets/images/cutGraph/tuiyuan1.png">
<span class="el-icon-sort"></span>
<div>
<div style="color:white;">{{otherCarDynamicListData.loadArea}}</div>
<div style="color:white;">{{otherCarDynamicListData.unloadArea}}</div>
</div>
<span class="el-icon-sort"></span>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div>
<div class="intelligentSchScrView_rightView_title">各装点车铲比</div>
<div class="intelligentSchScrView_rightView_content">
<div id="carsProportionView"></div>
</div>
</div>
</div>
......@@ -125,170 +136,114 @@ export default {
data() {
return {
whetherShow:false,
//时间
currentTime:{
day:'',
month:'',
year:'',
},
//车辆运行状况
carWorkingStateData:{
online:[],
offline:[],
},
//卡车排行榜
truckRankListData:{
carclass:'卡车',
selectTimeText:'day',
selectFieldText:'juli',
listData:[],
selectTimeDate:'',
},
//电铲排行榜
forkLiftRankListData:{
carclass:'电铲',
selectTimeText:'day',
selectFieldText:'time',
listData:[],
selectTimeDate:'',
},
//卡车动态
truckDynamicListData:{
rate:28,
carry:4210,
workTime:13,
mileage:135,
startTime:'2022-03-25 09:00:00',
endTime:'2022-03-25 18:00:00',
loadArea:'装载区1',
unloadArea:'卸载口1',
},
//电铲动态
forkliftkDynamicListData:{
rate:28,
workTime:13,
mileage:135,
startTime:'2022-03-26 09:00:00',
endTime:'2022-03-26 18:00:00',
loadArea:'装载区2',
unloadArea:'卸载口2',
},
//其他车动态
otherCarDynamicListData:{
rate:28,
workTime:13,
mileage:135,
startTime:'2022-03-26 09:00:00',
endTime:'2022-03-26 18:00:00',
loadArea:'装载区2',
unloadArea:'卸载口2',
},
selectCarFleet:'', //搜索对应车队
carFleetData:[], //车队信息
carsInforData:[], //车辆信息
selectCarRadioArray:[], //多选选中车辆
recentNoticeData:[], //近期通知列表
dispatchLoadingNum:0, //智能调度进行中
dispatchFinishNum:0, //智能调度已完成
dispatchDetailsList:[], //智能调度情况表
}
},
mounted() { },
methods: {
//获取总数据
loadData(){
this.whetherShow = true;
this.dayCurrentTimeFn();
this.monthCurrentTimeFn();
this.yearCurrentTimeFn();
this.selectCarFleet = '';
this.selectCarRadioArray = [];
this.$nextTick(()=>{
//获取车辆运行状况
HttpReq.truckDispatching.screenDriverInformationQuery({size:9999}).then((res) => {
let kache1 = [];
let kachezaixian = [];
let kachelixian = [];
let dianchan1 = [];
let dianchanzaixian = [];
let dianchanlixian = [];
let qitache1 = [];
let qitachezaixian = [];
let qitachelixian = [];
let zaixianAllNum = [];
let lixianAllNum = [];
//车队信息
HttpReq.truckDispatching.carFleetQuery({size:9999}).then((res) => {
if(res.code == 200){
res.data.content.forEach((item)=>{
if(item.carclass == '卡车'){
kache1.push(item);
}else if(item.carclass == '电铲'){
dianchan1.push(item);
}else{
qitache1.push(item);
}
this.carFleetData = res.data.content;
};
})
kache1.forEach((item)=>{
if(item.status == 1){
kachezaixian.push(item);
}else{
kachelixian.push(item);
}
//车辆信息
this.loadData2();
//近期通知列表
HttpReq.truckDispatching.recentNoticeQuery({size:9999,sort:'id,desc',}).then((res) => {
if(res.code == 200){
this.recentNoticeData = res.data.content;
};
})
dianchan1.forEach((item)=>{
if(item.status == 1){
dianchanzaixian.push(item);
//智能调度情况
HttpReq.truckDispatching.IntelligentDispatchHistoryQuery({size:9999,sort:'startTime,desc',}).then((res) => {
let finishData = [];
let loadingData = [];
if(res.code == 200){
res.data.content.forEach((item,index) => {
if(item.status == 0){
finishData.push(item);
}else{
dianchanlixian.push(item);
loadingData.push(item);
}
})
qitache1.forEach((item)=>{
if(item.status == 1){
qitachezaixian.push(item);
}else{
qitachelixian.push(item);
});
this.dispatchLoadingNum = loadingData.length;
this.dispatchFinishNum = finishData.length;
this.dispatchDetailsList = res.data.content;
}
})
zaixianAllNum.push(kachezaixian.length);
zaixianAllNum.push(dianchanzaixian.length);
zaixianAllNum.push(qitachezaixian.length);
lixianAllNum.push(kachelixian.length);
lixianAllNum.push(dianchanlixian.length);
lixianAllNum.push(qitachelixian.length);
this.carWorkingStateData.online = zaixianAllNum;
this.carWorkingStateData.offline = lixianAllNum;
//绘制车辆运行状况图表
this.$nextTick(()=>{
this.carWorkingStateEcharts();
//
this.carsAreaDistributionEcharts();
})
}
})
//获取卡车排行榜
this.truckRankListData.selectTimeDate = this.currentTime.day;
let truckQuery1 = {};
truckQuery1.size = 10;
truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
truckQuery1.carclass = this.truckRankListData.carclass;
truckQuery1.createTime = this.truckRankListData.selectTimeDate;
this.$nextTick(()=>{
HttpReq.truckDispatching.screenDriverInformationQuery(truckQuery1).then((res) => {
},
//获取车辆信息
loadData2() {
let query = {};
query.size = 9999;
query.page = 0;
query.road = this.selectCarFleet;
//车辆
HttpReq.truckDispatching.carInformationQuery(query).then((res) => {
if(res.code == 200){
this.truckRankListData.listData = res.data.content;
}
})
this.carsInforData = res.data.content;
};
})
//获取电铲排行榜
this.forkLiftRankListData.selectTimeDate = this.currentTime.day;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 10;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
forkLiftQuery1.createTime = this.forkLiftRankListData.selectTimeDate;
this.$nextTick(()=>{
HttpReq.truckDispatching.screenDriverInformationQuery(forkLiftQuery1).then((res) => {
},
//车辆多选取消
cancelSelect(index){
let handleArray = [...this.selectCarRadioArray];
handleArray.splice(index,1);
this.selectCarRadioArray = handleArray;
},
//搜索车辆
toSearchFn(){
this.loadData2();
},
//发起通知
toNoticeFn(text){
HttpReq.truckDispatching.recentNoticeAdd({noticeClass:text}).then((res) => {
if(res.code == 200){
this.forkLiftRankListData.listData = res.data.content;
}
})
this.$notify({
title: text + '发起成功!',
type: 'success',
duration: 2500
});
//近期通知列表
HttpReq.truckDispatching.recentNoticeQuery({size:9999,sort:'id,desc',}).then((res) => {
if(res.code == 200){
this.recentNoticeData = res.data.content;
};
})
//卡车动态
}else{
this.$notify({
title: res.msg,
type: 'error',
duration: 2500
})
}
}).catch(function(error) { });
},
//播放录音
playSoundRecordingFn(id){
console.log(id);
},
//车辆运行状况
carWorkingStateEcharts(){
let that = this;
var myChart = echarts.init(document.getElementById('carWorkingStateEcharts'));
//车辆区域分布Echarts
carsAreaDistributionEcharts(){
var myChart = echarts.init(document.getElementById('carsAreaDistributionView'));
var option = {
tooltip: {
trigger: 'axis',
......@@ -310,17 +265,17 @@ export default {
},
xAxis: {
type: 'category',
data: ['卡车状态', '电铲状态', '其他车辆'],
data: ['矿区一', '矿区二', '矿区三'],
axisLabel: {
show: true,
textStyle: {
color: 'white',
fontSize:16,
color: '#A6F6F9',
fontSize:14,
}
},
axisLine: {
lineStyle: {
color: 'white',
color: '#A6F6F9',
width: 1
}
},
......@@ -330,133 +285,67 @@ export default {
axisLabel: {
show: true,
textStyle: {
color: 'white',
fontSize:16,
color: '#A6F6F9',
fontSize:14,
}
},
axisLine: {
lineStyle: {
color: 'white',
color: '#A6F6F9',
width: 0
}
},
},
series: [
{
name: '车辆离线',
name: '卡车',
type: 'bar',
data: that.carWorkingStateData.offline,
barWidth: 20,
stack: 'total',
label: {
show: true
},
data: [320, 302, 301],
barWidth: 35,
itemStyle: {
color: '#14F3C5'
color: '#2BBFA8'
},
},
{
name: '车辆在线',
name: '电铲',
type: 'bar',
data: that.carWorkingStateData.online,
barWidth: 20,
itemStyle: {
color: '#2195FD'
stack: 'total',
label: {
show: true
},
}
]
};
option && myChart.setOption(option);
data: [120, 132, 101],
barWidth: 35,
itemStyle: {
color: '#DB972D'
},
//卡车切换时间
truckChangeTime(text){
this.truckRankListData.selectTimeText = text;
if(text == 'day'){
this.truckRankListData.selectTimeDate = this.currentTime.day;
}
if(text == 'month'){
this.truckRankListData.selectTimeDate = this.currentTime.month;
}
if(text == 'year'){
this.truckRankListData.selectTimeDate = this.currentTime.year;
}
},
//卡车切换字段排序
truckChangeField(text){
this.truckRankListData.selectFieldText = text;
let truckQuery1 = {};
truckQuery1.size = 10;
truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
truckQuery1.carclass = this.truckRankListData.carclass;
truckQuery1.createTime = this.truckRankListData.selectTimeDate;
this.$nextTick(()=>{
HttpReq.truckDispatching.screenDriverInformationQuery(truckQuery1).then((res) => {
if(res.code == 200){
this.truckRankListData.listData = res.data.content;
}
})
})
{
name: '其他车辆',
type: 'bar',
stack: 'total',
label: {
show: true
},
//电铲切换时间
forkLiftChangeTime(text){
this.forkLiftRankListData.selectTimeText = text;
if(text == 'day'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.day;
}
if(text == 'month'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.month;
}
if(text == 'year'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.year;
}
data: [220, 182, 191],
barWidth: 35,
itemStyle: {
color: '#158DFD'
},
//电铲切换字段排序
forkLiftChangeField(text){
this.forkLiftRankListData.selectFieldText = text;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 10;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
forkLiftQuery1.createTime = this.forkLiftRankListData.selectTimeDate;
this.$nextTick(()=>{
HttpReq.truckDispatching.screenDriverInformationQuery(forkLiftQuery1).then((res) => {
if(res.code == 200){
this.forkLiftRankListData.listData = res.data.content;
}
})
})
]
};
option && myChart.setOption(option);
},
//各装点车铲比
carsProportionEcharts(){
//获取当前时间
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;
},
},
}
</script>
......@@ -477,7 +366,16 @@ export default {
height: 100%;
width: 20%;
}
.intelligentSchScrView_leftView>div{
.intelligentSchScrView_leftView1{
width: 100%;
height: 64vh;
background:no-repeat center center url('~@/assets/images/cutGraph/yuanjianjuxing1.png');
background-size:100% 100%;
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.intelligentSchScrView_leftView2{
width: 100%;
height: 32vh;
background:no-repeat center center url('~@/assets/images/cutGraph/yuanjianjuxing1.png');
......@@ -511,189 +409,232 @@ export default {
}
.intelligentSchScrView_leftView_content,.intelligentSchScrView_rightView_content{
width: 100%;
height: 27vh;
}
.rolling{
height: 13.5vh;
overflow-y:auto;
scrollbar-width: none;
.table-box{
margin-top: -10px;
}
.rolling::-webkit-scrollbar {
display: none;
dl{
display:table;
width:100%;
}
.truck_titleStyle{
display: flex;
justify-content: space-between;
padding-right: 4vw;
dt{
margin-top: 20px;
display:table-row;
background-color: #274088;
}
.driverTitleDateStyle{
display: flex;
color: #06EFFE;
dt>div{
display:table-cell;
padding:7px 3px;
font-size: 16px;
text-shadow: 0px 0px 0px;
height: 3.5vh;
align-items: center;
font-weight: 500;
color: rgb(24,228,240);
}
.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;
}
.driverTitleDateStyle_son2{
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
padding:0px 5px;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
dd{
display:table-row;
}
.intelligentSchScrView_leftView_content_views2{
display: flex;
justify-content: space-between;
}
.intelligentSchScrView_leftView_content_views2>div{
height: 2.5vh;
width: 24%;
dd>div{
display:table-cell;
padding:5px 3px;
font-size: 15px;
border:2px solid #01A6FC;
border-radius: 5px;
color: #06EFFE;
line-height: 2.2vh;
text-align: center;
cursor: pointer;
font-weight: 600;
}
.selectFieldStyle{
opacity: 0.7;
color: #A6F6F9;
}
.intelligentSchScrView_leftView_content_views3{
width: 100%;
height: 24vh;
.rolling{
text-align: center;
height: 25vh;
overflow-y:auto;
scrollbar-width: none;
}
.intelligentSchScrView_leftView_content_views3::-webkit-scrollbar {
.rolling::-webkit-scrollbar {
display: none;
}
.intelligentSchScrView_leftView_content_views3>div>div{
font: 18px;
font-weight: 600;
.voiceAppContent_1{
display: flex;
justify-content: space-evenly;
justify-content: space-around;
}
.intelligentSchScrView_leftView_content_views3>div>div>div{
margin-top: 7px;
.voiceAppContent_1>div{
height: 40px;
line-height: 40px;
color: rgb(24,228,240);
font-size: 16px;
font-weight: 600;
}
#carWorkingStateEcharts{
.voiceAppContent_2{
width: 100%;
height: 28vh;
}
.carDynamicTitleStyle{
height: 27vh;
border: 2px solid rgb(24,228,240);
border-radius: 10px;
}
.voiceAppContent_2_title{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: rgb(25,41,94);
height: 3vh;
line-height: 3vh;
color: rgb(24,228,240);
display: flex;
justify-content: space-around;
font-size: 16px;
}
.voiceAppContent_2_content{
height: 23vh;
width: 100%;
height: 3.5vh;
align-items: center;
overflow-y:auto;
padding: 0px 10px;
box-sizing: border-box;
}
.carDynamicTitleStyle>div{
margin-left: 10px;
height: 3.5vh;
width: 6vw;
background:no-repeat center center url('~@/assets/images/cutGraph/xingzhuang9kaobei2.png');
background-size:100% 100%;
line-height: 3.5vh;
text-align: center;
color: #06EFFE;
font-weight: 600;
.voiceAppContent_2_content::-webkit-scrollbar {
/*滚动条整体样式*/
width : 8px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.voiceAppContent_2_content::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius : 10px;
background-color: #274088;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
.voiceAppContent_2_content::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
background : #ededed;
border-radius: 10px;
}
.el-checkbox__label{
vertical-align: -3px;
}
.el-checkbox__label>div{
display: inline-block;
color: rgb(24,228,240);
font-size: 17px;
}
.truckDynamicContent1{
position: relative;
margin-top: 1vh;
display: flex;
align-items: center;
font-weight: 600;
justify-content: space-evenly;
}
.truckDynamicRateStyle{
.el-checkbox{
display: block;
}
.el-checkbox__inner{
width: 30px !important;
height: 30px !important;
}
.el-checkbox__input .el-checkbox__inner::after {
border: 2px solid #fff;
box-sizing: content-box;
content: "";
border-left: 0;
border-top: 0;
height: 12px;
width: 5px;
position: absolute;
left: 3vw;
top: 2.5vh;
text-align: center;
top: 1px;
left: 8px;
transform: rotate(45deg) scaleY(1);
}
.carDynamicContent1{
.voiceAppContent_3{
margin-top: 1vh;
width: 100%;
height: 7vh;
height: 18vh;
border: 2px solid rgb(24,228,240);
border-radius: 10px;
}
.carDynamicContent1>div{
color: #06EFFE;
margin-top: 5px;
display: flex;
justify-content: space-around;
align-items: center;
}
.carDynamicContent2{
width: 100%;
height: 5vh;
.voiceAppContent_3_content{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
align-content:flex-start;
height: 14vh;
width: 100%;
overflow-y:auto;
padding: 0px 10px;
box-sizing: border-box;
color: #03BFFD;
}
.carDynamicContent2>span{
transform: rotateZ(90deg);
font-size: 30px;
}
.ForkliftDynamicContent1{
margin-top: 0.3vh;
.voiceAppContent_3_content::-webkit-scrollbar {
/*滚动条整体样式*/
width : 8px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.voiceAppContent_3_content::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius : 10px;
background-color: #274088;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
.voiceAppContent_3_content::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
background : #ededed;
border-radius: 10px;
}
.voiceAppContent_3_content_selectCar{
width: 45%;
margin-top: 5px;
color: rgb(24,228,240);
font-size: 16px;
display: flex;
justify-content: space-between;
}
.voiceAppContent_3_content_selectCar>div{
height: 20px;
line-height: 20px;
font-size: 18px;
}
.voiceAppContent_4{
margin-top: 1vh;
width: 100%;
height: 10vh;
font-size: 15px;
display: flex;
flex-wrap: wrap;
align-content:flex-start;
}
.ForkliftDynamicContent1>div{
width: 33%;
text-align: center;
color: white;
}
.ForkliftDynamicContent1_son1{
margin: 0px auto;
width: 4.3vw;
height: 4.3vw;
border: 4px solid #06EFFE;
border-radius: 50%;
line-height: 3.8vw;
font-size: 24px;
}
.otherCarDynamicContent1{
margin-top: 0.3vh;
.voiceAppContent_4 button{
margin: 0px 2vw 10px;
width: 25%;
font-size: 14px;
}
.intelligentSchScrView_rightView_content_1_top{
width: 100%;
display: flex;
justify-content: space-between;
}
.intelligentSchScrView_rightView_content_1_top>div{
width: 49%;
height: 6vh;
background:no-repeat center center url('~@/assets/images/cutGraph/sijirenshu1.png');
background-size:100% 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.intelligentSchScrView_rightView_content_1_bottom{
width: 100%;
height: 9vh;
font-size: 15px;
height: 20.5vh;
}
.otherCarDynamicContent1>div{
width: 33%;
.intelligentSchScrView_rightView_content_1_bottom_rolling{
text-align: center;
color: white;
}
.otherCarDynamicContent1_son1{
margin: 0px auto;
width: 4vw;
height: 4vw;
border: 4px solid #06EFFE;
border-radius: 50%;
line-height: 3.5vw;
font-size: 24px;
height: 20.5vh;
overflow-y:auto;
scrollbar-width: none;
}
.intelligentSchScrView_rightView_content_1_bottom_rolling::-webkit-scrollbar {
display: none;
}
#carsAreaDistributionView{
width: 19vw;
height: 27.5vh;
}
</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