Skip to content

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

1

parent cc54138a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2680 additions and 47 deletions
src/views/MLargeScreen/components/smallComponents/DPcomputer21.vue
View file @ 45e18ffb
...@@ -28,7 +28,113 @@ export default { ...@@ -28,7 +28,113 @@ export default {
}, },
methods:{ methods:{
loadData(){ loadData(){
//采取产量统计图表
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();
})
this.DPcomputer21BoxTimer = setInterval(() => {
//采取产量统计图表
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();
})
},20000)
},
//采取产量统计
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: {
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',
right: '7%',
textStyle: {
color: "#fff",
fontSize: 14,
},
},
xAxis3D: {
min: -1,
max: 1,
},
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,
};
chartPanel.setOption(option);
}, },
}, },
beforeDestroy(){ beforeDestroy(){
......
src/views/MLargeScreen/components/smallComponents/DPcomputer22.vue
View file @ 45e18ffb
<template> <template>
<div> <div class="DPcomputer22Box">
<!-- 各采区日产量排名 -->
<div class="dataAnalysisScrView_leftView_title">各采区日产量排名</div>
<div class="dataAnalysisScrView_leftView_content">
<div class="outputRankView" id="outputRankView"></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 * as echarts from 'echarts';
export default { export default {
data(){ data(){
return { return {
DPcomputer22BoxTimer:null,
//时间
currentTime:{
day:'',
},
//各采区日产量排名
outputRankData:{
caiquName:[],
caiquSeriesData:[],
},
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
this.dayCurrentTimeFn();
//各采区日产量排名
HttpReq.truckDispatching.caiquAreaQueryDay({size:6,page:0,sort:'total,desc',createTime:this.currentTime.day}).then((res) => {
let eh2_arr1 = [];
let eh2_arr2 = [];
res.forEach((item)=>{
eh2_arr1.push(item.name);
eh2_arr2.push(item.total);
})
this.outputRankData.caiquName = eh2_arr1;
this.outputRankData.caiquSeriesData = eh2_arr2;
this.echarts2_1Fn();
})
this.DPcomputer22BoxTimer = setInterval(() => {
//各采区日产量排名
HttpReq.truckDispatching.caiquAreaQueryDay({size:6,page:0,sort:'total,desc',createTime:this.currentTime.day}).then((res) => {
let eh2_arr1 = [];
let eh2_arr2 = [];
res.forEach((item)=>{
eh2_arr1.push(item.name);
eh2_arr2.push(item.total);
})
this.outputRankData.caiquName = eh2_arr1;
this.outputRankData.caiquSeriesData = eh2_arr2;
this.echarts2_1Fn();
})
},20000)
},
//各采区日产量排名
echarts2_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);
},
//获取当前时间
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;
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer22BoxTimer) {
clearInterval(this.DPcomputer22BoxTimer);
this.DPcomputer22BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +163,34 @@ export default { ...@@ -29,5 +163,34 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer22Box{
width: 20vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer22Box .dataAnalysisScrView_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;
}
.DPcomputer22Box .dataAnalysisScrView_leftView_content{
width: 100%;
height: 19vh;
}
.DPcomputer22Box .outputRankView{
width: 100%;
height: 18.5vh;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer23.vue
View file @ 45e18ffb
<template> <template>
<div> <div class="DPcomputer23Box">
<!-- 各采区当月完成率-->
<div class="dataAnalysisScrView_leftView_title">各采区当月完成率</div>
<div class="dataAnalysisScrView_leftView_content" style="position: relative;">
<div id="echarts2View"></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 * as echarts from 'echarts';
export default { export default {
data(){ data(){
return { return {
DPcomputer23BoxTimer:null,
//时间
currentTime:{
month:'',
},
//各采区当月完成率
echarts2Data:{
caiquName:[],
wanchengNum:[],
jihuaNum:[],
wanchengRate:[],
},
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
this.monthCurrentTimeFn();
//各采区当月完成率 和 月生产完成效率
HttpReq.truckDispatching.caiquAreaQueryMonth({size:9999,createTime:this.currentTime.month}).then((res) => {
let eh2_1_arr1 = [];
let eh2_1_arr2 = [];
let eh2_1_arr3 = [];
let eh2_1_arr4 = [];
res.forEach((item)=>{
eh2_1_arr1.push(item.name);
eh2_1_arr2.push(item.total);
eh2_1_arr3.push(item.nowPlan);
eh2_1_arr4.push(item.ratio);
})
this.echarts2Data.caiquName = eh2_1_arr1;
this.echarts2Data.wanchengNum = eh2_1_arr2;
this.echarts2Data.jihuaNum = eh2_1_arr3;
this.echarts2Data.wanchengRate = eh2_1_arr4;
this.echarts2Fn();
})
this.DPcomputer23BoxTimer = setInterval(() => {
//各采区当月完成率 和 月生产完成效率
HttpReq.truckDispatching.caiquAreaQueryMonth({size:9999,createTime:this.currentTime.month}).then((res) => {
let eh2_1_arr1 = [];
let eh2_1_arr2 = [];
let eh2_1_arr3 = [];
let eh2_1_arr4 = [];
res.forEach((item)=>{
eh2_1_arr1.push(item.name);
eh2_1_arr2.push(item.total);
eh2_1_arr3.push(item.nowPlan);
eh2_1_arr4.push(item.ratio);
})
this.echarts2Data.caiquName = eh2_1_arr1;
this.echarts2Data.wanchengNum = eh2_1_arr2;
this.echarts2Data.jihuaNum = eh2_1_arr3;
this.echarts2Data.wanchengRate = eh2_1_arr4;
this.echarts2Fn();
})
},20000)
},
//各采区当月完成率
echarts2Fn(){
echarts.init(document.getElementById('echarts2View')).dispose();
var myChart = echarts.init(document.getElementById('echarts2View'));
var option = {
tooltip: {
trigger: 'axis',
},
legend: {
data: ['完成量', '计划量', '完成率'],
textStyle:{
color:'white',
fontSize:15,
}
},
grid: {
left: '1%',
right: '2%',
bottom: '20%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: this.echarts2Data.caiquName,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: 'white'
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 1
}
}
}
],
yAxis: [
{
type: 'value',
name: '产量(T)',
min: 0,
max: 10000,
interval: 2000,
axisLabel: {
formatter: '{value}',
show: true,
textStyle: {
color: 'white'
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 0
}
}
},
{
type: 'value',
name: '完成率(%)',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value}',
show: true,
textStyle: {
color: 'white'
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 0
}
}
}
],
series: [
{
name: '完成量',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + 'T';
}
},
data: this.echarts2Data.wanchengNum,
barWidth: 10,
itemStyle: {
normal: {
color: '#09EDFB'
}
}
},
{
name: '计划量',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + 'T';
}
},
data: this.echarts2Data.jihuaNum,
barWidth: 10,
itemStyle: {
normal: {
color: '#00ACE9'
}
}
},
{
name: '完成率',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + '%';
}
},
data: this.echarts2Data.wanchengRate,
itemStyle: {
normal: {
lineStyle: { color: '#FFC200' } //设置线条颜色
}
}
}
]
};
option && myChart.setOption(option);
},
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;
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer23BoxTimer) {
clearInterval(this.DPcomputer23BoxTimer);
this.DPcomputer23BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +240,36 @@ export default { ...@@ -29,5 +240,36 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer23Box{
width: 20vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer23Box .dataAnalysisScrView_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;
}
.DPcomputer23Box .dataAnalysisScrView_leftView_content{
width: 100%;
height: 19vh;
}
.DPcomputer23Box #echarts2View{
position: absolute;
left: 0vh;
width: 100%;
height: 23vh;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer24.vue
View file @ 45e18ffb
<template> <template>
<div> <div class="DPcomputer24Box">
<!-- 月生产完成效率-->
<div class="dataAnalysisScrView_leftView_title">月生产完成效率</div>
<div class="dataAnalysisScrView_leftView_content" style="position: relative;">
<div id="echarts3View"></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 * as echarts from 'echarts';
export default { export default {
data(){ data(){
return { return {
DPcomputer24BoxTimer:null,
//时间
currentTime:{
month:'',
},
//月生产完成效率
echarts3Data:{
caiquName:[],
wanchengNum:[],
jihuaNum:[],
},
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
this.monthCurrentTimeFn();
//各采区当月完成率 和 月生产完成效率
HttpReq.truckDispatching.caiquAreaQueryMonth({size:9999,createTime:this.currentTime.month}).then((res) => {
let eh2_1_arr1 = [];
let eh2_1_arr2 = [];
let eh2_1_arr3 = [];
let eh2_1_arr4 = [];
res.forEach((item)=>{
eh2_1_arr1.push(item.name);
eh2_1_arr2.push(item.total);
eh2_1_arr3.push(item.nowPlan);
eh2_1_arr4.push(item.ratio);
})
this.echarts3Data.caiquName = eh2_1_arr1;
this.echarts3Data.wanchengNum = eh2_1_arr2;
this.echarts3Data.jihuaNum = eh2_1_arr3;
this.echarts3Fn();
})
this.DPcomputer24BoxTimer = setInterval(() => {
//各采区当月完成率 和 月生产完成效率
HttpReq.truckDispatching.caiquAreaQueryMonth({size:9999,createTime:this.currentTime.month}).then((res) => {
let eh2_1_arr1 = [];
let eh2_1_arr2 = [];
let eh2_1_arr3 = [];
let eh2_1_arr4 = [];
res.forEach((item)=>{
eh2_1_arr1.push(item.name);
eh2_1_arr2.push(item.total);
eh2_1_arr3.push(item.nowPlan);
eh2_1_arr4.push(item.ratio);
})
this.echarts3Data.caiquName = eh2_1_arr1;
this.echarts3Data.wanchengNum = eh2_1_arr2;
this.echarts3Data.jihuaNum = eh2_1_arr3;
this.echarts3Fn();
})
},20000)
},
//月生产完成效率
echarts3Fn(){
echarts.init(document.getElementById('echarts3View')).dispose();
var myChart = echarts.init(document.getElementById('echarts3View'));
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['目标完成', '计划完成'],
textStyle:{
color:'white',
fontSize:15,
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: this.echarts3Data.caiquName,
axisLabel: {
show: true,
textStyle: {
color: 'white'
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 0
}
}
},
yAxis: {
type: 'value',
name: '完成量',
nameTextStyle: { fontSize: 14 },
axisLabel: {
show: true,
textStyle: {
color: 'white'
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 0
}
}
},
series: [
{
name: '目标完成',
type: 'line',
data: this.echarts3Data.wanchengNum,
itemStyle: {
normal: {
lineStyle: { color: '#FFC200' } //设置线条颜色
}
}
},
{
name: '计划完成',
type: 'line',
data: this.echarts3Data.jihuaNum,
itemStyle: {
normal: {
lineStyle: { color: '#21DDF3' } //设置线条颜色
}
}
}
]
};
option && myChart.setOption(option);
},
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;
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer24BoxTimer) {
clearInterval(this.DPcomputer24BoxTimer);
this.DPcomputer24BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +178,36 @@ export default { ...@@ -29,5 +178,36 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer24Box{
width: 20vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer24Box .dataAnalysisScrView_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;
}
.DPcomputer24Box .dataAnalysisScrView_leftView_content{
width: 100%;
height: 19vh;
}
.DPcomputer24Box #echarts3View{
position: absolute;
left: 0vh;
width: 100%;
height: 19vh;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer27.vue
View file @ 45e18ffb
<template> <template>
<div> <div class="DPcomputer27Box">
<!-- 报警路障申报统计 -->
<div class="dataAnalysisScrView_rightView_title">报警路障申报统计</div>
<div class="dataAnalysisScrView_rightView_content" style="position: relative;">
<div id="echarts6View"></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 * as echarts from 'echarts';
export default { export default {
data(){ data(){
return { return {
DPcomputer27BoxTimer:null,
//报警路障申报统计
echarts6Data:[],
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
//报警路障申报统计
HttpReq.truckDispatching.breakDownQueryDay({size:9999}).then((res) => {
let that = this;
if(res.code == 200){
//报警路障申报统计过度数组
let alarmBreakArray = [];
let breakObj1 = {};
breakObj1.name = '车辆故障';
breakObj1.value = res.data.totalElements;
alarmBreakArray.push(breakObj1);
//获取报警信息
HttpReq.truckDispatching.callPoliceQuery({size:9999,}).then((res) => {
if(res.code == 200){
let alarmObj1 = {};
let alarmArray1 = [];
let alarmObj2 = {};
let alarmArray2 = [];
let alarmObj3 = {};
let alarmArray3 = [];
let alarmObj4 = {};
let alarmArray4 = [];
res.data.content.forEach((item,index)=>{
if(item.alarmclass == '超速'){
alarmArray1.push(item);
}else if(item.alarmclass == '无故停车'){
alarmArray2.push(item);
}else if(item.alarmclass == '驾离电子围栏'){
alarmArray3.push(item);
}else if(item.alarmclass == '驶入电子围栏'){
alarmArray4.push(item);
}
})
alarmObj1.name = '超速';
alarmObj1.value = alarmArray1.length;
alarmObj2.name = '无故停车';
alarmObj2.value = alarmArray2.length;
alarmObj3.name = '驾离电子围栏';
alarmObj3.value = alarmArray3.length;
alarmObj4.name = '驶入电子围栏';
alarmObj4.value = alarmArray4.length;
alarmBreakArray.push(alarmObj1);
alarmBreakArray.push(alarmObj2);
alarmBreakArray.push(alarmObj3);
alarmBreakArray.push(alarmObj4);
that.echarts6Data = alarmBreakArray;
this.$nextTick(()=>{
that.echarts6Fn();
})
}
})
}
})
this.DPcomputer27BoxTimer = setInterval(() => {
//报警路障申报统计
HttpReq.truckDispatching.breakDownQueryDay({size:9999}).then((res) => {
let that = this;
if(res.code == 200){
//报警路障申报统计过度数组
let alarmBreakArray = [];
let breakObj1 = {};
breakObj1.name = '车辆故障';
breakObj1.value = res.data.totalElements;
alarmBreakArray.push(breakObj1);
//获取报警信息
HttpReq.truckDispatching.callPoliceQuery({size:9999,}).then((res) => {
if(res.code == 200){
let alarmObj1 = {};
let alarmArray1 = [];
let alarmObj2 = {};
let alarmArray2 = [];
let alarmObj3 = {};
let alarmArray3 = [];
let alarmObj4 = {};
let alarmArray4 = [];
res.data.content.forEach((item,index)=>{
if(item.alarmclass == '超速'){
alarmArray1.push(item);
}else if(item.alarmclass == '无故停车'){
alarmArray2.push(item);
}else if(item.alarmclass == '驾离电子围栏'){
alarmArray3.push(item);
}else if(item.alarmclass == '驶入电子围栏'){
alarmArray4.push(item);
}
})
alarmObj1.name = '超速';
alarmObj1.value = alarmArray1.length;
alarmObj2.name = '无故停车';
alarmObj2.value = alarmArray2.length;
alarmObj3.name = '驾离电子围栏';
alarmObj3.value = alarmArray3.length;
alarmObj4.name = '驶入电子围栏';
alarmObj4.value = alarmArray4.length;
alarmBreakArray.push(alarmObj1);
alarmBreakArray.push(alarmObj2);
alarmBreakArray.push(alarmObj3);
alarmBreakArray.push(alarmObj4);
that.echarts6Data = alarmBreakArray;
this.$nextTick(()=>{
that.echarts6Fn();
})
}
})
}
})
},20000)
},
//报警路障申报统计
echarts6Fn(){
echarts.init(document.getElementById('echarts6View')).dispose();
var myChart = echarts.init(document.getElementById('echarts6View'));
var option = {
tooltip: {
trigger: 'item'
},
legend: {
top: 'center',
right: 'right',
textStyle:{
color:'white',
fontSize:14,
}
},
color:['#1DF9FC', '#1E67F2','#6E69F9','#00B7EE','#CAC9C9'],
series: [
{
name: '次数',
type: 'pie',
radius: ['40%', '85%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'inner',
formatter: '({d}%)'
},
labelLine: {
show: false
},
data: this.echarts6Data,
}
]
};
option && myChart.setOption(option);
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer27BoxTimer) {
clearInterval(this.DPcomputer27BoxTimer);
this.DPcomputer27BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +189,36 @@ export default { ...@@ -29,5 +189,36 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer27Box{
width: 20vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer27Box .dataAnalysisScrView_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;
}
.DPcomputer27Box .dataAnalysisScrView_rightView_content{
width: 100%;
height: 19vh;
}
.DPcomputer27Box #echarts6View{
position: absolute;
left: -6vw;
width: 125%;
height: 20vh;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer28.vue
View file @ 45e18ffb
<template> <template>
<div> <div class="DPcomputer28Box">
<!-- 卸货点卸货量统计 -->
<div class="dataAnalysisScrView_rightView_title">卸货点卸货量统计</div>
<div class="dataAnalysisScrView_rightView_content" style="position: relative;">
<div id="echarts7View"></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 * as echarts from 'echarts';
export default { export default {
data(){ data(){
return { return {
DPcomputer28BoxTimer:null,
//时间
currentTime:{
month:'',
},
//卸货点卸货量统计
echarts7Data:{
xiedianName:[],
outputNum:[],
},
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
this.monthCurrentTimeFn();
//卸货点卸货量统计
HttpReq.truckDispatching.xiequAreaQueryMonth({createTime:this.currentTime.month}).then((res) => {
if(res.code == 200){
let xiedianName = [];
let outputNum = [];
res.data.forEach((item,index)=>{
xiedianName.push(item.name);
outputNum.push(item.outputNum);
})
this.echarts7Data.xiedianName = xiedianName;
this.echarts7Data.outputNum = outputNum;
this.echarts7Fn();
}
})
this.DPcomputer28BoxTimer = setInterval(() => {
//卸货点卸货量统计
HttpReq.truckDispatching.xiequAreaQueryMonth({createTime:this.currentTime.month}).then((res) => {
if(res.code == 200){
let xiedianName = [];
let outputNum = [];
res.data.forEach((item,index)=>{
xiedianName.push(item.name);
outputNum.push(item.outputNum);
})
this.echarts7Data.xiedianName = xiedianName;
this.echarts7Data.outputNum = outputNum;
this.echarts7Fn();
}
})
},20000)
},
//卸货点卸货量统计
echarts7Fn(){
echarts.init(document.getElementById('echarts7View')).dispose();
var myChart = echarts.init(document.getElementById('echarts7View'));
var option = {
tooltip: {
trigger: 'axis',
},
grid: {
left: '3%',
right: '8%',
bottom: '20%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: this.echarts7Data.xiedianName,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: 'white'
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 1
}
}
}
],
yAxis: [
{
type: 'value',
name: '产量(T)',
axisLabel: {
show: true,
textStyle: {
color: 'white'
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 0
}
}
}
],
series: [
{
type: 'bar',
data: this.echarts7Data.outputNum,
barWidth: 10,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#00B7FF' },
{ offset: 1, color: '#2244AC' }
])
},
}
]
};
option && myChart.setOption(option);
},
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;
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer28BoxTimer) {
clearInterval(this.DPcomputer28BoxTimer);
this.DPcomputer28BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +162,37 @@ export default { ...@@ -29,5 +162,37 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer28Box{
width: 20vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer28Box .dataAnalysisScrView_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;
}
.DPcomputer28Box .dataAnalysisScrView_rightView_content{
width: 100%;
height: 19vh;
}
.DPcomputer28Box #echarts7View{
position: absolute;
left: 0vw;
top: -2.5vh;
width: 105%;
height: 25.5vh;
}
</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