Skip to content

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

修改

parent 7722db71
Show whitespace changes
Inline Side-by-side
Showing with 217 additions and 87 deletions
src/views/MLargeScreen/components/carManagement/index.vue
View file @ a9d174ec
......@@ -19,7 +19,7 @@
</div>
<div style="display: flex;">
<div style="color:#A6F6F9;font-size: 15px;">卡车状态</div>
<div style="display: flex;width: 80%;margin-left: 0.5vw;">
<div style="display: flex;width: 80%;margin-left: 0.5vw;border: #02F7EF 0.5px solid;border-radius: 3px;">
<div :style="'height:1.7vh;border-top-left-radius: 3px;border-bottom-left-radius: 3px;background-color: #14F3C5;width:' + (carWorkingStateData.kacheonline/(carWorkingStateData.kacheonline + carWorkingStateData.kacheoffline)) * 100 + '%;'"></div>
<div :style="'height:1.7vh;border-top-right-radius: 3px;border-bottom-right-radius: 3px;background-color: #2195FD;width:' + (carWorkingStateData.kacheoffline/(carWorkingStateData.kacheonline + carWorkingStateData.kacheoffline)) * 100 + '%;'"></div>
</div>
......@@ -32,7 +32,7 @@
</div>
<div style="display: flex;">
<div style="color:#A6F6F9;font-size: 15px;">铲车状态</div>
<div style="display: flex;width: 80%;margin-left: 0.5vw;">
<div style="display: flex;width: 80%;margin-left: 0.5vw;border: #02F7EF 0.5px solid;border-radius: 3px;">
<div :style="'height:1.7vh;border-top-left-radius: 3px;border-bottom-left-radius: 3px;background-color: #14F3C5;width:' + (carWorkingStateData.chancheonline/(carWorkingStateData.chancheonline + carWorkingStateData.chancheoffline)) * 100 + '%;'"></div>
<div :style="'height:1.7vh;border-top-right-radius: 3px;border-bottom-right-radius: 3px;background-color: #2195FD;width:' + (carWorkingStateData.chancheoffline/(carWorkingStateData.chancheonline + carWorkingStateData.chancheoffline)) * 100 + '%;'"></div>
</div>
......@@ -45,7 +45,7 @@
</div>
<div style="display: flex;">
<div style="color:#A6F6F9;font-size: 15px;">其他车辆</div>
<div style="display: flex;width: 80%;margin-left: 0.5vw;">
<div style="display: flex;width: 80%;margin-left: 0.5vw;border: #02F7EF 0.5px solid;border-radius: 3px;">
<div :style="'height:1.7vh;border-top-left-radius: 3px;border-bottom-left-radius: 3px;background-color: #14F3C5;width:' + (carWorkingStateData.qitacheonline/(carWorkingStateData.qitacheonline + carWorkingStateData.qitacheoffline)) * 100 + '%;'"></div>
<div :style="'height:1.7vh;border-top-right-radius: 3px;border-bottom-right-radius: 3px;background-color: #2195FD;width:' + (carWorkingStateData.qitacheoffline/(carWorkingStateData.qitacheonline + carWorkingStateData.qitacheoffline)) * 100 + '%;'"></div>
</div>
......@@ -310,14 +310,6 @@ export default {
opacity: 0.2,
color: "#00A8FF",
},
},
{
name: "其他",
value: 0,
itemStyle: {
opacity: 0.2,
color: "#158DFD",
},
}
],
},
......@@ -413,7 +405,6 @@ export default {
})
this.carWorkingStateData.optionData[0].value = kache1.length;
this.carWorkingStateData.optionData[1].value = dianchan1.length;
this.carWorkingStateData.optionData[2].value = qitache1.length;
kache1.forEach((item)=>{
if(item.status == 1){
kachezaixian.push(item);
......@@ -565,7 +556,6 @@ export default {
})
this.carWorkingStateData.optionData[0].value = kache1.length;
this.carWorkingStateData.optionData[1].value = dianchan1.length;
this.carWorkingStateData.optionData[2].value = qitache1.length;
kache1.forEach((item)=>{
if(item.status == 1){
kachezaixian.push(item);
......@@ -756,15 +746,15 @@ export default {
width: 1.5,
},
},
startAngle: 321, //起始角度，支持范围[0, 360]。 //重要
startAngle: 10, //起始角度，支持范围[0, 360]。 //重要
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
radius: ["25%", "50%"],
radius: ["50%", "50%"],
center: ["50%", "50%"],
data: this.carWorkingStateData.optionData,
itemStyle: {
opacity: 0,
},
top: "10%",
top: "15%",
avoidLabelOverlap: true, //防止标签重叠
});
chartPanel.setOption(option);
......
src/views/MLargeScreen/components/dataAnalysis/index.vue
View file @ a9d174ec
......@@ -12,12 +12,7 @@
<div>
<div class="dataAnalysisScrView_leftView_title">各采区日产量排名</div>
<div class="dataAnalysisScrView_leftView_content">
<div class="outputRankView">
<div v-for="(item, index) in outputRankData" :key="index" style="display:flex;margin-bottom:15px;padding:0px 10px 0px 0px">
<div class="l-left">{{item.name}}</div>
<el-progress :stroke-width="10" :percentage="parseInt(item.output) / 10" :format="progressFormat" style="color:white;"></el-progress>
</div>
</div>
<div class="outputRankView" id="outputRankView"></div>
</div>
</div>
<!-- 各采区当月完成率-->
......@@ -42,8 +37,8 @@
<div>装卸点平均时长</div>
<div class="loadAndUnloadTitleDateStyle">
<div :class="loadAndUnloadListData.selectTimeText == 'day' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('day')">日</div>
<div :class="loadAndUnloadListData.selectTimeText == 'week' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('week')">周</div>
<div :class="loadAndUnloadListData.selectTimeText == 'month' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('month')">月</div>
<div :class="loadAndUnloadListData.selectTimeText == 'year' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('year')">年</div>
</div>
</div>
<div class="dataAnalysisScrView_rightView_content" style="position: relative;">
......@@ -56,12 +51,12 @@
<div>矿石产量比</div>
<div class="oreProportionTitleDateStyle">
<div :class="oreProportionListData.selectTimeText == 'day' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('day')">日</div>
<div :class="oreProportionListData.selectTimeText == 'week' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('week')">周</div>
<div :class="oreProportionListData.selectTimeText == 'month' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('month')">月</div>
<div :class="oreProportionListData.selectTimeText == 'year' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('year')">年</div>
</div>
</div>
<div class="dataAnalysisScrView_rightView_content" style="position: relative;">
<div id="echarts5View"></div>
<div id="echarts5View" ref="chartPanel" style="width:100%;height: 18vh;margin-top: 4vh;"></div>
</div>
</div>
<!-- 报警路障申报统计 -->
......@@ -85,6 +80,9 @@
<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import * as echarts from 'echarts';
import "echarts-gl";
import { getPie3D } from "../../../components/echarts/bingtu3d";
export default {
data() {
......@@ -98,14 +96,17 @@ export default {
},
//采取产量统计
echarts1Data:[
{ value: 104, name: 'Ca2o' },
{ value: 735, name: 'Ca3o' },
{ value: 580, name: 'Ca4o' },
{ value: 484, name: 'Ca5o' },
{ value: 300, name: 'Ca6o' }
{ value: 104, name: 'MgO' },
{ value: 735, name: 'Ca2O' },
{ value: 580, name: 'So2O' },
{ value: 484, name: 'Fe2O3' },
{ value: 300, name: 'Fe' }
],
//各采区日产量排名
outputRankData:[],
outputRankData:{
caiquName:['东采区1','西采区1','西采区2','南采区2'],
caiquSeriesData:[91,102,120,153],
},
//各采区当月完成率
echarts2Data:{
caiquName:[],
......@@ -131,6 +132,24 @@ export default {
selectTimeText:'day',
selectTimeDate:'',
proportionData:[],
optionData:[
{
name: "矿石",
value: 85,
itemStyle: {
opacity: 0.2,
color: "#8FDFFE",
},
},
{
name: "挖石",
value: 15,
itemStyle: {
opacity: 0.2,
color: "#00A8FF",
},
}
]
},
//报警路障申报统计
echarts6Data:[],
......@@ -139,7 +158,6 @@ export default {
xiedianName:[],
outputNum:[],
},
}
},
methods: {
......@@ -154,8 +172,8 @@ export default {
//采取产量统计图表
this.echarts1Fn();
//各采区日产量排名
HttpReq.truckDispatching.caiquAreaQueryDay({size:10}).then((res) => {
this.outputRankData = res;
HttpReq.truckDispatching.caiquAreaQueryDay({size:6}).then((res) => {
this.echarts1_1Fn();
})
//各采区当月完成率
HttpReq.truckDispatching.caiquAreaQueryMonth({size:9999}).then((res) => {
......@@ -199,20 +217,31 @@ export default {
})
//矿石产量比
HttpReq.truckDispatching.screenOreProportionDayQuery({size:9999,createTime:this.currentTime.day,}).then((res) => {
let colorARR = ['#8FDFFE','#00A8FF']
if(res.code == 200){
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
a1.value = item.num;
a1.name = item.name;
let a1 = {
name: item.name,
value: item.num,
itemStyle: {
opacity: 0.2,
color: colorARR[index % 2],
},
};
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
this.echarts5Fn();
this.$nextTick(() => {
let parent = document.getElementById("echarts5View"); // 获取父元素
let canvas = parent.getElementsByTagName("canvas"); // 获取父元素下面的所有canvas元素
canvas[1].style.transform = "rotateX(30deg)";
});
}
})
//报警路障申报统计
HttpReq.truckDispatching.breakDownQueryDay({size:9999,createTime:this.currentTime.day,}).then((res) => {
HttpReq.truckDispatching.breakDownQueryDay({size:9999}).then((res) => {
let that = this;
if(res.code == 200){
//报警路障申报统计过度数组
......@@ -307,10 +336,73 @@ export default {
};
option && myChart.setOption(option);
},
//排行榜进度条文字转换
progressFormat(number){
let num = parseFloat(number) * 10
return num;
//各采区日产量排名
echarts1_1Fn(){
echarts.init(document.getElementById('outputRankView')).dispose();
var myChart = echarts.init(document.getElementById('outputRankView'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top:'5%',
left: '1%',
bottom: '0%',
containLabel: true
},
xAxis: {
name:'吨',
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
show: true,
textStyle: {
color: '#BFF7FF'
}
},
axisLine: {
lineStyle: {
color: '#BFF7FF',
width: 1
}
}
},
yAxis: {
type: 'category',
data: this.outputRankData.caiquName,
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.outputRankData.caiquSeriesData,
}
]
};
option && myChart.setOption(option);
},
//各采区当月完成率
echarts2Fn(){
......@@ -529,7 +621,6 @@ export default {
this.loadAndUnloadListData.selectTimeDate = this.currentTime.day;
HttpReq.truckDispatching.xiequAreaQueryDay({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
if(res.code == 200){
console.log(res.data.content);
let caiquName = [];
let workTime = [];
res.data.content.forEach((item,index)=>{
......@@ -542,11 +633,10 @@ export default {
}
})
}
if(text == 'month'){
if(text == 'week'){
this.loadAndUnloadListData.selectTimeDate = this.currentTime.month;
HttpReq.truckDispatching.xiequAreaQueryMonth({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
if(res.code == 200){
console.log(res.data.content);
let caiquName = [];
let workTime = [];
res.data.content.forEach((item,index)=>{
......@@ -559,11 +649,10 @@ export default {
}
})
}
if(text == 'year'){
if(text == 'month'){
this.loadAndUnloadListData.selectTimeDate = this.currentTime.year;
HttpReq.truckDispatching.xiequAreaQueryYear({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
if(res.code == 200){
console.log(res.data.content);
let caiquName = [];
let workTime = [];
res.data.content.forEach((item,index)=>{
......@@ -656,7 +745,7 @@ export default {
}
})
}
if(text == 'month'){
if(text == 'week'){
this.oreProportionListData.selectTimeDate = this.currentTime.month;
HttpReq.truckDispatching.screenOreProportionMonthQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => {
if(res.code == 200){
......@@ -672,7 +761,7 @@ export default {
}
})
}
if(text == 'year'){
if(text == 'month'){
this.oreProportionListData.selectTimeDate = this.currentTime.year;
HttpReq.truckDispatching.screenOreProportionYearQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => {
if(res.code == 200){
......@@ -690,31 +779,93 @@ export default {
}
},
echarts5Fn(){
var myChart = echarts.init(document.getElementById('echarts5View'));
var option = {
// 基于准备好的dom，初始化echarts实例
echarts.init(document.getElementById('echarts5View')).dispose();
let chartPanel = echarts.init(document.getElementById("echarts5View"));
for (let i = 0; i < this.oreProportionListData.optionData.length; i++) {
delete this.oreProportionListData.optionData[i].itemStyle.opacity;
}
// 传入数据生成 option
let series = getPie3D(this.oreProportionListData.optionData, 0);
let option = {
tooltip: {
trigger: 'item'
},
color:['#1999D5', '#E68220','rgb(24,228,240)','#F3EF76','#F5335C'],
series: [
{
name:'产量(吨)',
type: 'pie',
radius: '50%',
formatter: (params) => {
if (
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d"
) {
return `<div style="padding:0 0px">${params.seriesName}：${(
option.series[params.seriesIndex].pieData.proportion * 100
).toFixed(2)}%</div>`;
}
},
},
xAxis3D: {
min: -1,
max: 1,
},
yAxis3D: {
min: -1,
max: 1,
},
zAxis3D: {
min: -1,
max: 1,
},
grid3D: {
show: false, //是否显示三维笛卡尔坐标系。
boxHeight: 20, //三维笛卡尔坐标系在三维场景中的高度
top: "1%",
// bottom: "80%",
// environment: "#021041", //背景
viewControl: {
//用于鼠标的旋转，缩放等视角控制
alpha: 25, //角度
distance: 210, //调整视角到主体的距离，类似调整zoom 重要
rotateSensitivity: 0, //设置为0无法旋转
zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移
autoRotate: false, //自动旋转
},
},
series: series,
};
chartPanel.setOption(option);
//是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
option.series.push({
name: "pie2d",
type: "pie",
label: {
show: true,
formatter: '{b}({d}%)',
color:'white',
fontSize:'14',
color: "#00D7E9",
fontSize: 16,
// position: 'inner',
// formatter: "{b}\n\n",
// padding: [0, -40],
formatter: (item) => {
return item.data.name + ":" + item.data.value + "%" + "";
},
},
labelLine: {
show: true
length: 50,
length2: 30,
lineStyle: {
color: "#ffffff",
width: 1.5,
},
data: this.oreProportionListData.proportionData,
}
]
};
option && myChart.setOption(option);
},
startAngle: 350, //起始角度，支持范围[0, 360]。 //重要
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
radius: ["25%", "50%"],
center: ["50%", "50%"],
data: this.oreProportionListData.optionData,
itemStyle: {
opacity: 0,
},
top: "10%",
avoidLabelOverlap: true, //防止标签重叠
});
chartPanel.setOption(option);
},
//报警路障申报统计
echarts6Fn(){
......@@ -855,7 +1006,6 @@ export default {
<style scoped>
.dataAnalysisScrView{
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
......@@ -865,15 +1015,12 @@ export default {
.dataAnalysisScrView_leftView{
height: 100%;
width: 20%;
}
.dataAnalysisScrView_centerView{
height: 100%;
width: 60%;
position: relative;
z-index: 3;
}
.dataAnalysisScrView_rightView{
height: 100%;
width: 20%;
z-index: 3;
}
.dataAnalysisScrView_leftView>div{
width: 100%;
......@@ -984,11 +1131,6 @@ dd>div{
.outputRankView{
width: 100%;
height: 18.5vh;
overflow-y:auto;
scrollbar-width: none;
}
.outputRankView::-webkit-scrollbar {
display: none;
}
.l-left{
font-size:16px;
......@@ -1003,9 +1145,6 @@ dd>div{
.el-progress{
width: 70%;
}
.outputRankView >>> .el-progress__text{
color:white;
}
#echarts2View{
position: absolute;
left: 0vh;
......
src/views/MLargeScreen/components/intelligentSchedul/index.vue
View file @ a9d174ec
......@@ -1169,7 +1169,6 @@ export default {
<style scoped>
.intelligentSchScrView{
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
......@@ -1179,10 +1178,12 @@ export default {
.intelligentSchScrView_leftView{
height: 100%;
width: 20%;
z-index: 3;
}
.intelligentSchScrView_rightView{
height: 100%;
width: 20%;
z-index: 3;
}
.intelligentSchScrView_leftView1{
width: 100%;
......
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