Skip to content

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

修改

parent 93f987cf
Show whitespace changes
Inline Side-by-side
Showing with 330 additions and 138 deletions
public/config/config.json
View file @ 6377ebc3
{
"map3d": {
"scene": {
"center": {"lat":34.52912,"lng":117.662855,"alt":1000,"heading":360,"pitch":-90},
"center": {"lat":37.4900,"lng":122.04849,"alt":1000,"heading":360,"pitch":-90},
"scene3DOnly": false,
"shadows": false,
"removeDblClick": true,
......
src/assets/js/common.js
View file @ 6377ebc3
......@@ -2259,6 +2259,14 @@ var HttpReq = function(){
params:param
})
},
//大屏数据分析——采区产量统计
getApiHl1: function(param){
return request({
url: '/api/Hl',
method: 'get',
params:param
})
},
......
src/views/MLargeScreen/components/dataAnalysis/index.vue
View file @ 6377ebc3
......@@ -88,6 +88,8 @@ export default {
data() {
return {
whetherShow:false,
dataAnalysisTimer:null,
colorARR:['#00A8FF','#8FDFFE','#F5335C','#00A8FF','#8FDFFE','#F5335C','#00A8FF','#8FDFFE','#F5335C','#00A8FF','#8FDFFE','#F5335C','#00A8FF','#8FDFFE','#F5335C'],
//时间
currentTime:{
day:'',
......@@ -96,11 +98,22 @@ export default {
},
//采取产量统计
echarts1Data:[
{ value: 104, name: 'MgO' },
{ value: 735, name: 'Ca2O' },
{ value: 580, name: 'So2O' },
{ value: 484, name: 'Fe2O3' },
{ value: 300, name: 'Fe' }
{
name: "矿石",
value: 85,
itemStyle: {
opacity: 0.2,
color: "#8FDFFE",
},
},
{
name: "挖石",
value: 15,
itemStyle: {
opacity: 0.2,
color: "#00A8FF",
},
}
],
//各采区日产量排名
outputRankData:{
......@@ -174,12 +187,29 @@ export default {
this.$nextTick(()=>{
//采取产量统计图表
this.echarts1Fn();
//各采区日产量排名
HttpReq.truckDispatching.caiquAreaQueryDay({size:6}).then((res) => {
HttpReq.truckDispatching.getApiHl1().then((res) => {
if(res.code == 200){
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.echarts1Data = centerArray;
}
this.echarts1_1Fn();
})
//各采区当月完成率
//各采区日产量排名 要换接口
HttpReq.truckDispatching.caiquAreaQueryDay({size:6}).then((res) => {
this.echarts2_1Fn();
})
//各采区当月完成率 要换接口
HttpReq.truckDispatching.caiquAreaQueryMonth({size:9999}).then((res) => {
let caiquName = [];
let wanchengNum = [];
......@@ -197,53 +227,127 @@ export default {
this.echarts2Data.wanchengRate = wanchengRate;
this.echarts2Fn();
})
//月生产完成效率
//月生产完成效率 要换接口
this.echarts3Fn();
//装卸点平均时长 卸货点卸货量统计
HttpReq.truckDispatching.xiequAreaQueryDay({size:9999,createTime:this.currentTime.day,}).then((res) => {
//装卸点平均时长
if(this.loadAndUnloadListData.selectTimeText == 'day'){
HttpReq.truckDispatching.xiequAreaQueryDay({createTime:this.currentTime.day}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
let outputNum7 = [];
res.data.content.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
outputNum7.push(item.output);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
//卸货点卸货量统计
this.echarts7Data.xiedianName = caiquName;
this.echarts7Data.outputNum = outputNum7;
this.echarts7Fn();
}
})
}
if(this.loadAndUnloadListData.selectTimeText == 'week'){
HttpReq.truckDispatching.xiequAreaQueryMonth({createTime:this.currentTime.month}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
res.data.content.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
}
})
}
if(this.loadAndUnloadListData.selectTimeText == 'month'){
HttpReq.truckDispatching.xiequAreaQueryYear({createTime:this.currentTime.year}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
res.data.content.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
}
})
}
//矿石产量比
HttpReq.truckDispatching.screenOreProportionDayQuery({size:9999,createTime:this.currentTime.day,}).then((res) => {
let colorARR = ['#8FDFFE','#00A8FF']
if(this.oreProportionListData.selectTimeText == 'day'){
HttpReq.truckDispatching.screenOreProportionDayQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {
name: item.name,
value: item.num,
itemStyle: {
opacity: 0.2,
color: colorARR[index % 2],
},
};
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
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)";
});
}
})
}
if(this.oreProportionListData.selectTimeText == 'week'){
HttpReq.truckDispatching.screenOreProportionMonthQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn();
}
})
}
if(this.oreProportionListData.selectTimeText == 'month'){
HttpReq.truckDispatching.screenOreProportionYearQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn();
}
})
}
//报警路障申报统计
HttpReq.truckDispatching.breakDownQueryDay({size:9999}).then((res) => {
let that = this;
......@@ -297,51 +401,100 @@ export default {
})
}
})
//卸货点卸货量统计
HttpReq.truckDispatching.xiequAreaQueryDay({createTime:this.currentTime.month}).then((res) => {
if(res.code == 200){
let xiedianName = [];
let outputNum = [];
res.data.content.forEach((item,index)=>{
xiedianName.push(item.name);
outputNum.push(item.outputNum);
})
this.echarts7Data.xiedianName = xiedianName;
this.echarts7Data.outputNum = outputNum;
this.echarts7Fn();
}
})
//定时器
this.dataAnalysisTimer = setInterval(() => {
},10000)
})
}else{
if(this.dataAnalysisTimer) {
clearInterval(this.dataAnalysisTimer);
}
this.whetherShow = false;
}
},
//采取产量统计
echarts1Fn(){
var myChart = echarts.init(document.getElementById('echarts1View'));
var option = {
echarts1_1Fn(){
// 基于准备好的dom，初始化echarts实例
echarts.init(document.getElementById('echarts1View')).dispose();
let chartPanel = echarts.init(document.getElementById("echarts1View"));
for (let i = 0; i < this.echarts1Data.length; i++) {
delete this.echarts1Data[i].itemStyle.opacity;
}
// 传入数据生成 option
let series = getPie3D(this.echarts1Data, 2);
let option = {
tooltip: {
trigger: 'item'
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>`;
}
},
},
legend: {
data: this.echarts1Data,
top:'center',
orient: 'vertical',
top: 'center',
right: 'right',
textStyle:{
color:'white',
fontSize:16,
}
right: '7%',
textStyle: {
color: "#fff",
fontSize: 14,
},
color:['#1999D5', '#E68220','rgb(24,228,240)','#F3EF76','#F5335C'],
series: [
{
name: '产量(吨)',
type: 'pie',
radius: ['40%', '85%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'inner',
formatter: '({d}%)'
},
labelLine: {
show: false
xAxis3D: {
min: -1,
max: 1,
},
data: this.echarts1Data,
}
]
yAxis3D: {
min: -1,
max: 1,
},
zAxis3D: {
min: -1,
max: 1,
},
grid3D: {
show: false, //是否显示三维笛卡尔坐标系。
boxHeight: 15, //三维笛卡尔坐标系在三维场景中的高度
top: "1%",
// bottom: "80%",
// environment: "#021041", //背景
viewControl: {
//用于鼠标的旋转，缩放等视角控制
alpha: 40, //角度
distance: 210, //调整视角到主体的距离，类似调整zoom 重要
rotateSensitivity: 0, //设置为0无法旋转
zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移
autoRotate: false, //自动旋转
},
},
series: series,
};
option && myChart.setOption(option);
chartPanel.setOption(option);
},
//各采区日产量排名
echarts1_1Fn(){
echarts2_1Fn(){
echarts.init(document.getElementById('outputRankView')).dispose();
var myChart = echarts.init(document.getElementById('outputRankView'));
var option = {
......@@ -410,6 +563,7 @@ export default {
},
//各采区当月完成率
echarts2Fn(){
echarts.init(document.getElementById('echarts2View')).dispose();
var myChart = echarts.init(document.getElementById('echarts2View'));
var option = {
tooltip: {
......@@ -540,6 +694,7 @@ export default {
},
//月生产完成效率
echarts3Fn(){
echarts.init(document.getElementById('echarts3View')).dispose();
var myChart = echarts.init(document.getElementById('echarts3View'));
var option = {
tooltip: {
......@@ -618,12 +773,11 @@ export default {
};
option && myChart.setOption(option);
},
//装卸点平均时长
//装卸点平均时长切换
loadAndUnloadChangeTime(text){
this.loadAndUnloadListData.selectTimeText = text;
if(text == 'day'){
this.loadAndUnloadListData.selectTimeDate = this.currentTime.day;
HttpReq.truckDispatching.xiequAreaQueryDay({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
HttpReq.truckDispatching.xiequAreaQueryDay({createTime:this.currentTime.day}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
......@@ -638,8 +792,7 @@ export default {
})
}
if(text == 'week'){
this.loadAndUnloadListData.selectTimeDate = this.currentTime.month;
HttpReq.truckDispatching.xiequAreaQueryMonth({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
HttpReq.truckDispatching.xiequAreaQueryMonth({createTime:this.currentTime.month}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
......@@ -654,8 +807,7 @@ export default {
})
}
if(text == 'month'){
this.loadAndUnloadListData.selectTimeDate = this.currentTime.year;
HttpReq.truckDispatching.xiequAreaQueryYear({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
HttpReq.truckDispatching.xiequAreaQueryYear({createTime:this.currentTime.year}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
......@@ -671,6 +823,7 @@ export default {
}
},
echarts4Fn(){
echarts.init(document.getElementById('echarts4View')).dispose();
var myChart = echarts.init(document.getElementById('echarts4View'));
var option = {
tooltip: {
......@@ -730,53 +883,77 @@ export default {
};
option && myChart.setOption(option);
},
//矿石产量比
//矿石产量比切换
oreProportionChangeTime(text){
this.oreProportionListData.selectTimeText = text;
if(text == 'day'){
this.oreProportionListData.selectTimeDate = this.currentTime.day;
HttpReq.truckDispatching.screenOreProportionDayQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => {
HttpReq.truckDispatching.screenOreProportionDayQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
a1.value = item.num;
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn();
}
})
}
if(text == 'week'){
this.oreProportionListData.selectTimeDate = this.currentTime.month;
HttpReq.truckDispatching.screenOreProportionMonthQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => {
HttpReq.truckDispatching.screenOreProportionMonthQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
a1.value = item.num;
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn();
}
})
}
if(text == 'month'){
this.oreProportionListData.selectTimeDate = this.currentTime.year;
HttpReq.truckDispatching.screenOreProportionYearQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => {
HttpReq.truckDispatching.screenOreProportionYearQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
a1.value = item.num;
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn();
}
})
......@@ -786,11 +963,11 @@ export default {
// 基于准备好的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;
for (let i = 0; i < this.oreProportionListData.proportionData.length; i++) {
delete this.oreProportionListData.proportionData[i].itemStyle.opacity;
}
// 传入数据生成 option
let series = getPie3D(this.oreProportionListData.optionData, 0);
let series = getPie3D(this.oreProportionListData.proportionData, 0);
let option = {
tooltip: {
formatter: (params) => {
......@@ -862,7 +1039,7 @@ export default {
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
radius: ["25%", "50%"],
center: ["50%", "50%"],
data: this.oreProportionListData.optionData,
data: this.oreProportionListData.proportionData,
itemStyle: {
opacity: 0,
},
......@@ -873,6 +1050,7 @@ export default {
},
//报警路障申报统计
echarts6Fn(){
echarts.init(document.getElementById('echarts6View')).dispose();
var myChart = echarts.init(document.getElementById('echarts6View'));
var option = {
tooltip: {
......@@ -909,6 +1087,7 @@ export default {
},
//卸货点卸货量统计
echarts7Fn(){
echarts.init(document.getElementById('echarts7View')).dispose();
var myChart = echarts.init(document.getElementById('echarts7View'));
var option = {
tooltip: {
......@@ -1012,6 +1191,11 @@ export default {
this.currentTime.year = currentFormatDate;
},
},
beforeDestroy() {
if(this.dataAnalysisTimer) {
clearInterval(this.dataAnalysisTimer);
}
},
}
</script>
......@@ -1133,12 +1317,12 @@ dd>div{
border-radius: 5px;
cursor: pointer;
}
#echarts1View{
position: absolute;
left: -5vh;
width: 100%;
height: 19vh;
left: -10vh;
top: -7vh;
width: 120%;
height: 27vh;
}
.outputRankView{
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