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 @@ ...@@ -19,7 +19,7 @@
</div> </div>
<div style="display: flex;"> <div style="display: flex;">
<div style="color:#A6F6F9;font-size: 15px;">卡车状态</div> <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-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 :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> </div>
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
</div> </div>
<div style="display: flex;"> <div style="display: flex;">
<div style="color:#A6F6F9;font-size: 15px;">铲车状态</div> <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-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 :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> </div>
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
</div> </div>
<div style="display: flex;"> <div style="display: flex;">
<div style="color:#A6F6F9;font-size: 15px;">其他车辆</div> <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-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 :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> </div>
...@@ -310,14 +310,6 @@ export default { ...@@ -310,14 +310,6 @@ export default {
opacity: 0.2, opacity: 0.2,
color: "#00A8FF", color: "#00A8FF",
}, },
},
{
name: "其他",
value: 0,
itemStyle: {
opacity: 0.2,
color: "#158DFD",
},
} }
], ],
}, },
...@@ -413,7 +405,6 @@ export default { ...@@ -413,7 +405,6 @@ export default {
}) })
this.carWorkingStateData.optionData[0].value = kache1.length; this.carWorkingStateData.optionData[0].value = kache1.length;
this.carWorkingStateData.optionData[1].value = dianchan1.length; this.carWorkingStateData.optionData[1].value = dianchan1.length;
this.carWorkingStateData.optionData[2].value = qitache1.length;
kache1.forEach((item)=>{ kache1.forEach((item)=>{
if(item.status == 1){ if(item.status == 1){
kachezaixian.push(item); kachezaixian.push(item);
...@@ -565,7 +556,6 @@ export default { ...@@ -565,7 +556,6 @@ export default {
}) })
this.carWorkingStateData.optionData[0].value = kache1.length; this.carWorkingStateData.optionData[0].value = kache1.length;
this.carWorkingStateData.optionData[1].value = dianchan1.length; this.carWorkingStateData.optionData[1].value = dianchan1.length;
this.carWorkingStateData.optionData[2].value = qitache1.length;
kache1.forEach((item)=>{ kache1.forEach((item)=>{
if(item.status == 1){ if(item.status == 1){
kachezaixian.push(item); kachezaixian.push(item);
...@@ -756,15 +746,15 @@ export default { ...@@ -756,15 +746,15 @@ export default {
width: 1.5, width: 1.5,
}, },
}, },
startAngle: 321, //起始角度，支持范围[0, 360]。 //重要 startAngle: 10, //起始角度，支持范围[0, 360]。 //重要
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式 clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
radius: ["25%", "50%"], radius: ["50%", "50%"],
center: ["50%", "50%"], center: ["50%", "50%"],
data: this.carWorkingStateData.optionData, data: this.carWorkingStateData.optionData,
itemStyle: { itemStyle: {
opacity: 0, opacity: 0,
}, },
top: "10%", top: "15%",
avoidLabelOverlap: true, //防止标签重叠 avoidLabelOverlap: true, //防止标签重叠
}); });
chartPanel.setOption(option); chartPanel.setOption(option);
......
src/views/MLargeScreen/components/dataAnalysis/index.vue
View file @ a9d174ec
...@@ -12,12 +12,7 @@ ...@@ -12,12 +12,7 @@
<div> <div>
<div class="dataAnalysisScrView_leftView_title">各采区日产量排名</div> <div class="dataAnalysisScrView_leftView_title">各采区日产量排名</div>
<div class="dataAnalysisScrView_leftView_content"> <div class="dataAnalysisScrView_leftView_content">
<div class="outputRankView"> <div class="outputRankView" id="outputRankView"></div>
<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> </div>
</div> </div>
<!-- 各采区当月完成率--> <!-- 各采区当月完成率-->
...@@ -42,8 +37,8 @@ ...@@ -42,8 +37,8 @@
<div>装卸点平均时长</div> <div>装卸点平均时长</div>
<div class="loadAndUnloadTitleDateStyle"> <div class="loadAndUnloadTitleDateStyle">
<div :class="loadAndUnloadListData.selectTimeText == 'day' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('day')">日</div> <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 == '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> </div>
<div class="dataAnalysisScrView_rightView_content" style="position: relative;"> <div class="dataAnalysisScrView_rightView_content" style="position: relative;">
...@@ -56,12 +51,12 @@ ...@@ -56,12 +51,12 @@
<div>矿石产量比</div> <div>矿石产量比</div>
<div class="oreProportionTitleDateStyle"> <div class="oreProportionTitleDateStyle">
<div :class="oreProportionListData.selectTimeText == 'day' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('day')">日</div> <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 == '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> </div>
<div class="dataAnalysisScrView_rightView_content" style="position: relative;"> <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>
</div> </div>
<!-- 报警路障申报统计 --> <!-- 报警路障申报统计 -->
...@@ -85,6 +80,9 @@ ...@@ -85,6 +80,9 @@
<script> <script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js'; import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import "echarts-gl";
import { getPie3D } from "../../../components/echarts/bingtu3d";
export default { export default {
data() { data() {
...@@ -98,14 +96,17 @@ export default { ...@@ -98,14 +96,17 @@ export default {
}, },
//采取产量统计 //采取产量统计
echarts1Data:[ echarts1Data:[
{ value: 104, name: 'Ca2o' }, { value: 104, name: 'MgO' },
{ value: 735, name: 'Ca3o' }, { value: 735, name: 'Ca2O' },
{ value: 580, name: 'Ca4o' }, { value: 580, name: 'So2O' },
{ value: 484, name: 'Ca5o' }, { value: 484, name: 'Fe2O3' },
{ value: 300, name: 'Ca6o' } { value: 300, name: 'Fe' }
], ],
//各采区日产量排名 //各采区日产量排名
outputRankData:[], outputRankData:{
caiquName:['东采区1','西采区1','西采区2','南采区2'],
caiquSeriesData:[91,102,120,153],
},
//各采区当月完成率 //各采区当月完成率
echarts2Data:{ echarts2Data:{
caiquName:[], caiquName:[],
...@@ -131,6 +132,24 @@ export default { ...@@ -131,6 +132,24 @@ export default {
selectTimeText:'day', selectTimeText:'day',
selectTimeDate:'', selectTimeDate:'',
proportionData:[], proportionData:[],
optionData:[
{
name: "矿石",
value: 85,
itemStyle: {
opacity: 0.2,
color: "#8FDFFE",
},
},
{
name: "挖石",
value: 15,
itemStyle: {
opacity: 0.2,
color: "#00A8FF",
},
}
]
}, },
//报警路障申报统计 //报警路障申报统计
echarts6Data:[], echarts6Data:[],
...@@ -139,7 +158,6 @@ export default { ...@@ -139,7 +158,6 @@ export default {
xiedianName:[], xiedianName:[],
outputNum:[], outputNum:[],
}, },
} }
}, },
methods: { methods: {
...@@ -154,8 +172,8 @@ export default { ...@@ -154,8 +172,8 @@ export default {
//采取产量统计图表 //采取产量统计图表
this.echarts1Fn(); this.echarts1Fn();
//各采区日产量排名 //各采区日产量排名
HttpReq.truckDispatching.caiquAreaQueryDay({size:10}).then((res) => { HttpReq.truckDispatching.caiquAreaQueryDay({size:6}).then((res) => {
this.outputRankData = res; this.echarts1_1Fn();
}) })
//各采区当月完成率 //各采区当月完成率
HttpReq.truckDispatching.caiquAreaQueryMonth({size:9999}).then((res) => { HttpReq.truckDispatching.caiquAreaQueryMonth({size:9999}).then((res) => {
...@@ -199,20 +217,31 @@ export default { ...@@ -199,20 +217,31 @@ export default {
}) })
//矿石产量比 //矿石产量比
HttpReq.truckDispatching.screenOreProportionDayQuery({size:9999,createTime:this.currentTime.day,}).then((res) => { HttpReq.truckDispatching.screenOreProportionDayQuery({size:9999,createTime:this.currentTime.day,}).then((res) => {
let colorARR = ['#8FDFFE','#00A8FF']
if(res.code == 200){ if(res.code == 200){
let centerArray = []; let centerArray = [];
res.data.content.forEach((item,index)=>{ res.data.content.forEach((item,index)=>{
let a1 = {}; let a1 = {
a1.value = item.num; name: item.name,
a1.name = item.name; value: item.num,
itemStyle: {
opacity: 0.2,
color: colorARR[index % 2],
},
};
centerArray.push(a1); centerArray.push(a1);
}) })
this.oreProportionListData.proportionData = centerArray; this.oreProportionListData.proportionData = centerArray;
this.echarts5Fn(); 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; let that = this;
if(res.code == 200){ if(res.code == 200){
//报警路障申报统计过度数组 //报警路障申报统计过度数组
...@@ -307,10 +336,73 @@ export default { ...@@ -307,10 +336,73 @@ export default {
}; };
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
//排行榜进度条文字转换 //各采区日产量排名
progressFormat(number){ echarts1_1Fn(){
let num = parseFloat(number) * 10 echarts.init(document.getElementById('outputRankView')).dispose();
return num; 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(){ echarts2Fn(){
...@@ -529,7 +621,6 @@ export default { ...@@ -529,7 +621,6 @@ export default {
this.loadAndUnloadListData.selectTimeDate = this.currentTime.day; this.loadAndUnloadListData.selectTimeDate = this.currentTime.day;
HttpReq.truckDispatching.xiequAreaQueryDay({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => { HttpReq.truckDispatching.xiequAreaQueryDay({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
if(res.code == 200){ if(res.code == 200){
console.log(res.data.content);
let caiquName = []; let caiquName = [];
let workTime = []; let workTime = [];
res.data.content.forEach((item,index)=>{ res.data.content.forEach((item,index)=>{
...@@ -542,11 +633,10 @@ export default { ...@@ -542,11 +633,10 @@ export default {
} }
}) })
} }
if(text == 'month'){ if(text == 'week'){
this.loadAndUnloadListData.selectTimeDate = this.currentTime.month; this.loadAndUnloadListData.selectTimeDate = this.currentTime.month;
HttpReq.truckDispatching.xiequAreaQueryMonth({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => { HttpReq.truckDispatching.xiequAreaQueryMonth({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
if(res.code == 200){ if(res.code == 200){
console.log(res.data.content);
let caiquName = []; let caiquName = [];
let workTime = []; let workTime = [];
res.data.content.forEach((item,index)=>{ res.data.content.forEach((item,index)=>{
...@@ -559,11 +649,10 @@ export default { ...@@ -559,11 +649,10 @@ export default {
} }
}) })
} }
if(text == 'year'){ if(text == 'month'){
this.loadAndUnloadListData.selectTimeDate = this.currentTime.year; this.loadAndUnloadListData.selectTimeDate = this.currentTime.year;
HttpReq.truckDispatching.xiequAreaQueryYear({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => { HttpReq.truckDispatching.xiequAreaQueryYear({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
if(res.code == 200){ if(res.code == 200){
console.log(res.data.content);
let caiquName = []; let caiquName = [];
let workTime = []; let workTime = [];
res.data.content.forEach((item,index)=>{ res.data.content.forEach((item,index)=>{
...@@ -656,7 +745,7 @@ export default { ...@@ -656,7 +745,7 @@ export default {
} }
}) })
} }
if(text == 'month'){ if(text == 'week'){
this.oreProportionListData.selectTimeDate = this.currentTime.month; this.oreProportionListData.selectTimeDate = this.currentTime.month;
HttpReq.truckDispatching.screenOreProportionMonthQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => { HttpReq.truckDispatching.screenOreProportionMonthQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => {
if(res.code == 200){ if(res.code == 200){
...@@ -672,7 +761,7 @@ export default { ...@@ -672,7 +761,7 @@ export default {
} }
}) })
} }
if(text == 'year'){ if(text == 'month'){
this.oreProportionListData.selectTimeDate = this.currentTime.year; this.oreProportionListData.selectTimeDate = this.currentTime.year;
HttpReq.truckDispatching.screenOreProportionYearQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => { HttpReq.truckDispatching.screenOreProportionYearQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => {
if(res.code == 200){ if(res.code == 200){
...@@ -690,31 +779,93 @@ export default { ...@@ -690,31 +779,93 @@ export default {
} }
}, },
echarts5Fn(){ echarts5Fn(){
var myChart = echarts.init(document.getElementById('echarts5View')); // 基于准备好的dom，初始化echarts实例
var option = { 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: { tooltip: {
trigger: 'item' formatter: (params) => {
}, if (
color:['#1999D5', '#E68220','rgb(24,228,240)','#F3EF76','#F5335C'], params.seriesName !== "mouseoutSeries" &&
series: [ params.seriesName !== "pie2d"
{ ) {
name:'产量(吨)', return `<div style="padding:0 0px">${params.seriesName}：${(
type: 'pie', option.series[params.seriesIndex].pieData.proportion * 100
radius: '50%', ).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: { label: {
show: true, color: "#00D7E9",
formatter: '{b}({d}%)', fontSize: 16,
color:'white', // position: 'inner',
fontSize:'14', // formatter: "{b}\n\n",
// padding: [0, -40],
formatter: (item) => {
return item.data.name + ":" + item.data.value + "%" + "";
},
}, },
labelLine: { labelLine: {
show: true length: 50,
length2: 30,
lineStyle: {
color: "#ffffff",
width: 1.5,
}, },
data: this.oreProportionListData.proportionData, },
} startAngle: 350, //起始角度，支持范围[0, 360]。 //重要
] clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
}; radius: ["25%", "50%"],
option && myChart.setOption(option); center: ["50%", "50%"],
data: this.oreProportionListData.optionData,
itemStyle: {
opacity: 0,
},
top: "10%",
avoidLabelOverlap: true, //防止标签重叠
});
chartPanel.setOption(option);
}, },
//报警路障申报统计 //报警路障申报统计
echarts6Fn(){ echarts6Fn(){
...@@ -855,7 +1006,6 @@ export default { ...@@ -855,7 +1006,6 @@ export default {
<style scoped> <style scoped>
.dataAnalysisScrView{ .dataAnalysisScrView{
position: absolute; position: absolute;
z-index: 1;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
...@@ -865,15 +1015,12 @@ export default { ...@@ -865,15 +1015,12 @@ export default {
.dataAnalysisScrView_leftView{ .dataAnalysisScrView_leftView{
height: 100%; height: 100%;
width: 20%; width: 20%;
} z-index: 3;
.dataAnalysisScrView_centerView{
height: 100%;
width: 60%;
position: relative;
} }
.dataAnalysisScrView_rightView{ .dataAnalysisScrView_rightView{
height: 100%; height: 100%;
width: 20%; width: 20%;
z-index: 3;
} }
.dataAnalysisScrView_leftView>div{ .dataAnalysisScrView_leftView>div{
width: 100%; width: 100%;
...@@ -984,11 +1131,6 @@ dd>div{ ...@@ -984,11 +1131,6 @@ dd>div{
.outputRankView{ .outputRankView{
width: 100%; width: 100%;
height: 18.5vh; height: 18.5vh;
overflow-y:auto;
scrollbar-width: none;
}
.outputRankView::-webkit-scrollbar {
display: none;
} }
.l-left{ .l-left{
font-size:16px; font-size:16px;
...@@ -1003,9 +1145,6 @@ dd>div{ ...@@ -1003,9 +1145,6 @@ dd>div{
.el-progress{ .el-progress{
width: 70%; width: 70%;
} }
.outputRankView >>> .el-progress__text{
color:white;
}
#echarts2View{ #echarts2View{
position: absolute; position: absolute;
left: 0vh; left: 0vh;
......
src/views/MLargeScreen/components/intelligentSchedul/index.vue
View file @ a9d174ec
...@@ -1169,7 +1169,6 @@ export default { ...@@ -1169,7 +1169,6 @@ export default {
<style scoped> <style scoped>
.intelligentSchScrView{ .intelligentSchScrView{
position: absolute; position: absolute;
z-index: 1;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
...@@ -1179,10 +1178,12 @@ export default { ...@@ -1179,10 +1178,12 @@ export default {
.intelligentSchScrView_leftView{ .intelligentSchScrView_leftView{
height: 100%; height: 100%;
width: 20%; width: 20%;
z-index: 3;
} }
.intelligentSchScrView_rightView{ .intelligentSchScrView_rightView{
height: 100%; height: 100%;
width: 20%; width: 20%;
z-index: 3;
} }
.intelligentSchScrView_leftView1{ .intelligentSchScrView_leftView1{
width: 100%; 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