Skip to content

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

修改

parent 7f7e0b43
Show whitespace changes
Inline Side-by-side
Showing with 769 additions and 255 deletions
src/views/MLargeScreen/components/carManagement/index.vue
View file @ 7722db71
......@@ -6,7 +6,52 @@
<div>
<div class="carManScrView_leftView_title">车辆运行状况</div>
<div class="carManScrView_leftView_content" style="position: relative;">
<div id="carWorkingStateEcharts"></div>
<div style="width:100%;height: 1.5vh;display: flex;font-size: 15px;justify-content: right;align-items: center;">
<div style="width:1.5vh;height: 1.5vh;background-color: #14F3C5;margin-right: 10px;border-radius: 2px;"></div>
<div style="color:#A6F6F9;margin-right: 10px;">车辆离线</div>
<div style="width:1.5vh;height: 1.5vh;background-color: #2195FD;margin-right: 10px;border-radius: 2px;"></div>
<div style="color:#A6F6F9;margin-right: 10px;">车辆在线</div>
</div>
<div>
<div style="margin-top:5px;">
<span style="color:#02F7EF;margin-left: 4vw;">{{carWorkingStateData.kacheonline}}</span>
<span style="color:#2195FD;margin-left: 13vw;">{{carWorkingStateData.kacheoffline}}</span>
</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="'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>
</div>
</div>
<div>
<div style="margin-top:5px;">
<span style="color:#02F7EF;margin-left: 4vw;">{{carWorkingStateData.chancheonline}}</span>
<span style="color:#2195FD;margin-left: 13vw;">{{carWorkingStateData.chancheoffline}}</span>
</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="'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>
</div>
</div>
<div>
<div style="margin-top:5px;">
<span style="color:#02F7EF;margin-left: 4vw;">{{carWorkingStateData.qitacheonline}}</span>
<span style="color:#2195FD;margin-left: 13vw;">{{carWorkingStateData.qitacheoffline}}</span>
</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="'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>
</div>
</div>
<div ref="chartPanel" id="chart-panel" style="width:100%;height: 12vh;"></div>
</div>
</div>
<!-- 卡车排行榜-->
......@@ -23,43 +68,10 @@
<div class="carManScrView_leftView_content_views2">
<div :class="truckRankListData.selectFieldText == 'juli' ? '' : 'selectFieldStyle' " @click="truckChangeField('juli')">运输距离</div>
<div :class="truckRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' " @click="truckChangeField('time')">工作时长</div>
<div :class="truckRankListData.selectFieldText == 'yunzai' ? '' : 'selectFieldStyle' " @click="truckChangeField('yunzai')">运载量</div>
<div :class="truckRankListData.selectFieldText == 'jiedan' ? '' : 'selectFieldStyle' " @click="truckChangeField('jiedan')">接单数</div>
</div>
<div class="carManScrView_leftView_content_views3">
<div v-if="truckRankListData.selectFieldText == 'juli'">
<div v-for="(item,index) in truckRankListData.listData" :key="index">
<div style="color:#1DF9FC;">{{index + 1}}</div>
<div style="color:#BCF0FE;">{{item.car}}</div>
<div style="color:#1AC9FF;">{{item.juli}}KM</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
<div v-if="truckRankListData.selectFieldText == 'time'">
<div v-for="(item,index) in truckRankListData.listData" :key="index">
<div style="color:#1DF9FC;">{{index + 1}}</div>
<div style="color:#BCF0FE;">{{item.car}}</div>
<div style="color:#1AC9FF;">{{item.time}}H</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
<div v-if="truckRankListData.selectFieldText == 'yunzai'">
<div v-for="(item,index) in truckRankListData.listData" :key="index">
<div style="color:#1DF9FC;">{{index + 1}}</div>
<div style="color:#BCF0FE;">{{item.car}}</div>
<div style="color:#1AC9FF;">{{item.yunzai}}</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
<div v-if="truckRankListData.selectFieldText == 'jiedan'">
<div v-for="(item,index) in truckRankListData.listData" :key="index">
<div style="color:#1DF9FC;">{{index + 1}}</div>
<div style="color:#BCF0FE;">{{item.car}}</div>
<div style="color:#1AC9FF;">{{item.jiedan}}</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
<div :class="truckRankListData.selectFieldText == 'zcar' ? '' : 'selectFieldStyle' " @click="truckChangeField('zcar')">运载量</div>
<div :class="truckRankListData.selectFieldText == 'waiting' ? '' : 'selectFieldStyle' " @click="truckChangeField('waiting')">接单数</div>
</div>
<div class="carManScrView_leftView_content_views3" id="carManScrView_leftView_content_views3_1"></div>
</div>
</div>
<!-- 铲车排行榜-->
......@@ -75,35 +87,37 @@
<div class="carManScrView_leftView_content">
<div class="carManScrView_leftView_content_views2">
<div :class="forkLiftRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('time')">工作时长</div>
<div :class="forkLiftRankListData.selectFieldText == 'time1' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('time1')">平均时长</div>
<div :class="forkLiftRankListData.selectFieldText == 'yunzai' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('yunzai')">装车量</div>
<div :class="forkLiftRankListData.selectFieldText == 'jiedan' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('jiedan')">装车数</div>
</div>
<div class="carManScrView_leftView_content_views3">
<div v-if="forkLiftRankListData.selectFieldText == 'time'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index">
<div style="color:#1DF9FC;">{{index + 1}}</div>
<div style="color:#BCF0FE;">{{item.car}}</div>
<div :class="forkLiftRankListData.selectFieldText == 'average' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('average')">平均时长</div>
<div :class="forkLiftRankListData.selectFieldText == 'zcar' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('zcar')">装车量</div>
<div :class="forkLiftRankListData.selectFieldText == 'waiting' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('waiting')">装车数</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'time'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;">{{item.number}}</div>
<div style="color:#1AC9FF;">{{item.time}}H</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
<div v-if="forkLiftRankListData.selectFieldText == 'yunzai'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index">
<div style="color:#1DF9FC;">{{index + 1}}</div>
<div style="color:#BCF0FE;">{{item.car}}</div>
<div style="color:#1AC9FF;">{{item.yunzai}}</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'average'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;">{{item.number}}</div>
<div style="color:#1AC9FF;">{{item.average}}H</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
<div v-if="forkLiftRankListData.selectFieldText == 'jiedan'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index">
<div style="color:#1DF9FC;">{{index + 1}}</div>
<div style="color:#BCF0FE;">{{item.car}}</div>
<div style="color:#1AC9FF;">{{item.jiedan}}</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'zcar'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;">{{item.number}}</div>
<div style="color:#1AC9FF;">{{item.zcar}}吨</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'waiting'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;">{{item.number}}</div>
<div style="color:#1AC9FF;">{{item.waiting}}辆</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
</div>
</div>
......@@ -116,47 +130,46 @@
<div class="carManScrView_rightView_content">
<div class="carDynamicTitleStyle">
<img src="../../../../assets/images/cutGraph/huoche11.png" height="28">
<div>{{truckDynamicListData.number}}</div>
<div>{{truckDynamicListData.number ? truckDynamicListData.number : '无'}}</div>
</div>
<div class="truckDynamicContent1">
<div class="truckDynamicRateStyle">
<div style="color:white;font-size:20px;">{{truckDynamicListData.rate}}%</div>
<div style="color:white;font-size:19px;">{{truckDynamicListData.rate ? truckDynamicListData.rate : 0}}%</div>
<div style="color:white;font-size:15px;">完成度</div>
</div>
<el-progress type="circle" :percentage="parseInt(truckDynamicListData.rate)" :stroke-width="7" :width="90" :height="90" :show-text='false'></el-progress>
<el-progress type="circle" :percentage="parseInt(truckDynamicListData.rate ? truckDynamicListData.rate : 0)" :color="'#2B91E2'" :stroke-width="10" :width="90" :height="90" :show-text='false'></el-progress>
<div style="text-align: center;">
<div style="font-size:14px;color:white;">今日运载量</div>
<div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.carry}}<span style="font-size:14px;">T</span></div>
<div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.carry ? truckDynamicListData.carry : 0}}<span style="font-size:14px;">t</span></div>
<div style="font-size:14px;color:white;">今日工时</div>
<div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.workTime}}<span style="font-size:14px;">H</span></div>
<div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.workTime ? truckDynamicListData.workTime : 0}}<span style="font-size:14px;">h</span></div>
</div>
<div style="text-align: center;">
<div style="font-size:14px;color:white;">今日完成度</div>
<div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.rate}}<span style="font-size:14px;">%</span></div>
<div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.rate ? truckDynamicListData.rate : 0}}<span style="font-size:14px;">%</span></div>
<div style="font-size:14px;color:white;">今日里程</div>
<div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.mileage}}<span style="font-size:14px;">KM</span></div>
<div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.mileage ? truckDynamicListData.mileage : 0}}<span style="font-size:14px;">km</span></div>
</div>
</div>
<div class="carDynamicContent1">
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>开始工作时间</div>
<div>{{truckDynamicListData.startTime}}</div>
<div>{{truckDynamicListData.startTime ? truckDynamicListData.startTime : '无'}}</div>
</div>
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>结束工作时间</div>
<div>{{truckDynamicListData.endTime}}</div>
<div>{{truckDynamicListData.endTime ? truckDynamicListData.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;">{{truckDynamicListData.loadArea}}</div>
<div style="color:white;">{{truckDynamicListData.unloadArea}}</div>
<div style="color:white;text-align: center;">{{truckDynamicListData.loadArea ? truckDynamicListData.loadArea : '无'}}</div>
<img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">{{truckDynamicListData.unloadArea ? truckDynamicListData.unloadArea : '无'}}</div>
</div>
<span class="el-icon-sort"></span>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div>
</div>
......@@ -167,42 +180,41 @@
<div class="carManScrView_rightView_content">
<div class="carDynamicTitleStyle">
<img src="../../../../assets/images/cutGraph/huoche11.png" height="28">
<div>{{forkliftkDynamicListData.number}}</div>
<div>{{forkliftkDynamicListData.number ? forkliftkDynamicListData.number : '无'}}</div>
</div>
<div class="ForkliftDynamicContent1">
<div>
<div>今日完成量</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.rate}}%</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.rate ? forkliftkDynamicListData.rate : 0}}%</div>
</div>
<div>
<div>今日工时/H</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.workTime}}</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.workTime ? forkliftkDynamicListData.workTime : 0}}</div>
</div>
<div>
<div>今日里程/Km</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.mileage}}</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.mileage ? forkliftkDynamicListData.mileage : 0}}</div>
</div>
</div>
<div class="carDynamicContent1">
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>开始工作时间</div>
<div>{{forkliftkDynamicListData.startTime}}</div>
<div>{{forkliftkDynamicListData.startTime ? forkliftkDynamicListData.startTime : '无'}}</div>
</div>
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>结束工作时间</div>
<div>{{forkliftkDynamicListData.endTime}}</div>
<div>{{forkliftkDynamicListData.endTime ? forkliftkDynamicListData.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;">{{forkliftkDynamicListData.loadArea}}</div>
<div style="color:white;">{{forkliftkDynamicListData.unloadArea}}</div>
<div style="color:white;text-align: center;">{{forkliftkDynamicListData.loadArea ? forkliftkDynamicListData.loadArea : '无'}}</div>
<img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">{{forkliftkDynamicListData.unloadArea ? forkliftkDynamicListData.unloadArea : '无'}}</div>
</div>
<span class="el-icon-sort"></span>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div>
</div>
......@@ -213,42 +225,41 @@
<div class="carManScrView_rightView_content">
<div class="carDynamicTitleStyle">
<img src="../../../../assets/images/cutGraph/huoche11.png" height="28">
<div>{{otherCarDynamicListData.number}}</div>
<div>{{otherCarDynamicListData.number ? otherCarDynamicListData.number : '无'}}</div>
</div>
<div class="otherCarDynamicContent1">
<div>
<div>今日完成量</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.rate}}%</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.rate ? otherCarDynamicListData.rate : 0}}%</div>
</div>
<div>
<div>今日工时/H</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.workTime}}</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.workTime ? otherCarDynamicListData.workTime : 0}}</div>
</div>
<div>
<div>今日里程/Km</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.mileage}}</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.mileage ? otherCarDynamicListData.mileage : 0}}</div>
</div>
</div>
<div class="carDynamicContent1">
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>开始工作时间</div>
<div>{{otherCarDynamicListData.startTime}}</div>
<div>{{otherCarDynamicListData.startTime ? otherCarDynamicListData.startTime : '无'}}</div>
</div>
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>结束工作时间</div>
<div>{{otherCarDynamicListData.endTime}}</div>
<div>{{otherCarDynamicListData.endTime ? 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 style="color:white;text-align: center;">{{otherCarDynamicListData.loadArea ? otherCarDynamicListData.loadArea : '无'}}</div>
<img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">{{otherCarDynamicListData.unloadArea ? otherCarDynamicListData.unloadArea : '无'}}</div>
</div>
<span class="el-icon-sort"></span>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div>
</div>
......@@ -261,6 +272,8 @@
<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() {
......@@ -275,16 +288,49 @@ export default {
},
//车辆运行状况
carWorkingStateData:{
online:[],
offline:[],
kacheonline:0,
kacheoffline:0,
chancheonline:0,
chancheoffline:0,
qitacheonline:0,
qitacheoffline:0,
optionData: [
{
name: "卡车",
value: 0,
itemStyle: {
opacity: 0.2,
color: "#8FDFFE",
},
},
{
name: "铲车",
value: 0,
itemStyle: {
opacity: 0.2,
color: "#00A8FF",
},
},
{
name: "其他",
value: 0,
itemStyle: {
opacity: 0.2,
color: "#158DFD",
},
}
],
},
//卡车排行榜
truckRankListData:{
echartsX:'Km',
carclass:'卡车',
selectTimeText:'day',
selectFieldText:'juli',
listData:[],
selectTimeDate:'',
driverName:[],
driverSeriesData:[],
driverName1:['kfdfdf','dsdsd1','dsdsd55'],
driverSeriesData1:[20,50,10],
},
//铲车排行榜
forkLiftRankListData:{
......@@ -292,7 +338,6 @@ export default {
selectTimeText:'day',
selectFieldText:'time',
listData:[],
selectTimeDate:'',
},
//卡车动态
truckDynamicListData:{
......@@ -356,8 +401,6 @@ export default {
let qitache1 = [];
let qitachezaixian = [];
let qitachelixian = [];
let zaixianAllNum = [];
let lixianAllNum = [];
if(res.code == 200){
res.data.content.forEach((item)=>{
if(item.carclass == '卡车'){
......@@ -368,6 +411,9 @@ export default {
qitache1.push(item);
}
})
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);
......@@ -389,47 +435,83 @@ export default {
qitachelixian.push(item);
}
})
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.carWorkingStateData.kacheonline = kachezaixian.length;
this.carWorkingStateData.chancheonline = dianchanzaixian.length;
this.carWorkingStateData.qitacheonline = qitachezaixian.length;
this.carWorkingStateData.kacheoffline = kachelixian.length;
this.carWorkingStateData.chancheoffline = dianchanlixian.length;
this.carWorkingStateData.qitacheoffline = qitachelixian.length;
this.draw3d();
this.$nextTick(() => {
let parent = document.getElementById("chart-panel"); // 获取父元素
let canvas = parent.getElementsByTagName("canvas"); // 获取父元素下面的所有canvas元素
canvas[1].style.transform = "rotateX(30deg)";
});
}
})
//获取卡车排行榜
this.truckRankListData.selectTimeDate = this.currentTime.day;
let truckQuery1 = {};
truckQuery1.size = 10;
truckQuery1.size = 7;
truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
truckQuery1.carclass = this.truckRankListData.carclass;
truckQuery1.createTime = this.truckRankListData.selectTimeDate;
this.$nextTick(()=>{
HttpReq.truckDispatching.carInformationQuery(truckQuery1).then((res) => {
if(res.code == 200){
this.truckRankListData.listData = res.data.content;
}
if(this.truckRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}
})
//获取铲车排行榜
this.forkLiftRankListData.selectTimeDate = this.currentTime.day;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 10;
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
forkLiftQuery1.createTime = this.forkLiftRankListData.selectTimeDate;
this.$nextTick(()=>{
HttpReq.truckDispatching.carInformationQuery(forkLiftQuery1).then((res) => {
if(res.code == 200){
this.forkLiftRankListData.listData = res.data.content;
}
if(this.forkLiftRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
})
//获取车辆信息
HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => {
......@@ -471,8 +553,6 @@ export default {
let qitache1 = [];
let qitachezaixian = [];
let qitachelixian = [];
let zaixianAllNum = [];
let lixianAllNum = [];
if(res.code == 200){
res.data.content.forEach((item)=>{
if(item.carclass == '卡车'){
......@@ -483,6 +563,9 @@ export default {
qitache1.push(item);
}
})
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);
......@@ -504,48 +587,85 @@ export default {
qitachelixian.push(item);
}
})
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.carWorkingStateData.kacheonline = kachezaixian.length;
this.carWorkingStateData.chancheonline = dianchanzaixian.length;
this.carWorkingStateData.qitacheonline = qitachezaixian.length;
this.carWorkingStateData.kacheoffline = kachelixian.length;
this.carWorkingStateData.chancheoffline = dianchanlixian.length;
this.carWorkingStateData.qitacheoffline = qitachelixian.length;
this.draw3d();
this.$nextTick(() => {
let parent = document.getElementById("chart-panel"); // 获取父元素
let canvas = parent.getElementsByTagName("canvas"); // 获取父元素下面的所有canvas元素
canvas[1].style.transform = "rotateX(30deg)";
});
}
})
//获取卡车排行榜
this.truckRankListData.selectTimeDate = this.currentTime.day;
let truckQuery1 = {};
truckQuery1.size = 10;
truckQuery1.size = 7;
truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
truckQuery1.carclass = this.truckRankListData.carclass;
truckQuery1.createTime = this.truckRankListData.selectTimeDate;
this.$nextTick(()=>{
HttpReq.truckDispatching.carInformationQuery(truckQuery1).then((res) => {
if(res.code == 200){
this.truckRankListData.listData = res.data.content;
}
if(this.truckRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}
})
//获取铲车排行榜
this.forkLiftRankListData.selectTimeDate = this.currentTime.day;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 10;
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
forkLiftQuery1.createTime = this.forkLiftRankListData.selectTimeDate;
this.$nextTick(()=>{
HttpReq.truckDispatching.carInformationQuery(forkLiftQuery1).then((res) => {
if(res.code == 200){
this.forkLiftRankListData.listData = res.data.content;
}
if(this.forkLiftRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
})
}, 20000)
})
})
......@@ -558,10 +678,202 @@ export default {
},
//车辆运行状况
carWorkingStateEcharts(){
let that = this;
echarts.init(document.getElementById('carWorkingStateEcharts')).dispose();
var myChart = echarts.init(document.getElementById('carWorkingStateEcharts'));
draw3d() {
// 基于准备好的dom，初始化echarts实例
echarts.init(document.getElementById('chart-panel')).dispose();
let chartPanel = echarts.init(document.getElementById("chart-panel"));
for (let i = 0; i < this.carWorkingStateData.optionData.length; i++) {
delete this.carWorkingStateData.optionData[i].itemStyle.opacity;
}
// 传入数据生成 option
let series = getPie3D(this.carWorkingStateData.optionData, 0);
let option = {
tooltip: {
formatter: (params) => {
// console.log(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: 200, //调整视角到主体的距离，类似调整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: {
color: "#00D7E9",
fontSize: 16,
// position: 'inner',
// formatter: "{b}\n\n",
// padding: [0, -40],
formatter: (item) => {
// console.log(item)
return item.data.name + ":" + item.data.value + "辆" + "";
},
},
labelLine: {
length: 50,
length2: 30,
lineStyle: {
color: "#ffffff",
width: 1.5,
},
},
startAngle: 321, //起始角度，支持范围[0, 360]。 //重要
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
radius: ["25%", "50%"],
center: ["50%", "50%"],
data: this.carWorkingStateData.optionData,
itemStyle: {
opacity: 0,
},
top: "10%",
avoidLabelOverlap: true, //防止标签重叠
});
chartPanel.setOption(option);
},
//卡车切换时间
truckChangeTime(text){
this.truckRankListData.selectTimeText = text;
let truckQuery1 = {};
truckQuery1.size = 7;
truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
truckQuery1.carclass = this.truckRankListData.carclass;
if(text == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(text == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(text == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}
},
//卡车切换字段排序
truckChangeField(text){
this.truckRankListData.selectFieldText = text;
let truckQuery1 = {};
truckQuery1.size = 7;
truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
truckQuery1.carclass = this.truckRankListData.carclass;
if(text == 'juli'){
this.truckRankListData.echartsX = 'km';
}else if(text == 'time'){
this.truckRankListData.echartsX = 'H';
}else if(text == 'zcar'){
this.truckRankListData.echartsX = '吨';
}else if(text == 'waiting'){
this.truckRankListData.echartsX = '次';
}
this.$nextTick(()=>{
if(this.truckRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}
})
},
//卡车排行榜Echarts
truckChangeEcharts(){
echarts.init(document.getElementById('carManScrView_leftView_content_views3_1')).dispose();
var myChart = echarts.init(document.getElementById('carManScrView_leftView_content_views3_1'));
var option = {
tooltip: {
trigger: 'axis',
......@@ -569,130 +881,108 @@ export default {
type: 'shadow'
}
},
legend: {
textStyle:{
color: 'white',
fontSize:16,
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top:'18%',
left: '1%',
bottom: '0%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['卡车状态', '铲车状态', '其他车辆'],
name:this.truckRankListData.echartsX,
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
show: true,
textStyle: {
color: 'white',
fontSize:16,
color: '#BFF7FF'
}
},
axisLine: {
lineStyle: {
color: 'white',
color: '#BFF7FF',
width: 1
}
},
}
},
yAxis: {
type: 'value',
name:'车牌号',
type: 'category',
data: this.truckRankListData.driverName,
axisLabel: {
show: true,
textStyle: {
color: 'white',
fontSize:16,
color: '#BFF7FF'
}
},
axisLine: {
lineStyle: {
color: 'white',
color: '#BFF7FF',
width: 0
}
},
}
},
series: [
{
name: '车辆离线',
type: 'bar',
data: that.carWorkingStateData.offline,
barWidth: 20,
itemStyle: {
color: '#14F3C5'
},
},
{
name: '车辆在线',
type: 'bar',
data: that.carWorkingStateData.online,
barWidth: 20,
barWidth: 12,
itemStyle: {
color: '#2195FD'
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#23FFE2' },
{ offset: 1, color: '#0F86EB' }
])
},
data: this.truckRankListData.driverSeriesData,
}
]
};
option && myChart.setOption(option);
},
//卡车切换时间
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.carInformationQuery(truckQuery1).then((res) => {
if(res.code == 200){
this.truckRankListData.listData = res.data.content;
}
})
})
},
//铲车切换时间
forkLiftChangeTime(text){
this.forkLiftRankListData.selectTimeText = text;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
if(text == 'day'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.day;
HttpReq.truckDispatching.apiManmadesDay1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
if(text == 'month'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.month;
if(text == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
if(text == 'year'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.year;
if(text == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
},
//铲车切换字段排序
forkLiftChangeField(text){
this.forkLiftRankListData.selectFieldText = text;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 10;
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
forkLiftQuery1.createTime = this.forkLiftRankListData.selectTimeDate;
this.$nextTick(()=>{
HttpReq.truckDispatching.carInformationQuery(forkLiftQuery1).then((res) => {
if(res.code == 200){
this.forkLiftRankListData.listData = res.data.content;
}
if(this.forkLiftRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
})
},
//卡车动态
......@@ -826,17 +1116,18 @@ export default {
height: 100%;
overflow: hidden;
position: absolute;
z-index: 1;
display: flex;
justify-content: space-between;
}
.carManScrView_leftView{
height: 100%;
width: 20%;
z-index: 3;
}
.carManScrView_rightView{
height: 100%;
width: 20%;
z-index: 3;
}
.carManScrView_leftView>div{
width: 100%;
......@@ -945,18 +1236,65 @@ export default {
.carManScrView_leftView_content_views3::-webkit-scrollbar {
display: none;
}
.carManScrView_leftView_content_views3>div>div{
font: 18px;
font-weight: 600;
.forkliftRankTwo1{
margin-top: 1vh;
margin-bottom: 1.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list1.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
}
.forkliftRankTwo2{
margin-bottom: 1.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list2.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
}
.forkliftRankTwo3{
margin-bottom: 1.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list3.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
}
.carManScrView_leftView_content_views3>div>div>div{
margin-top: 7px;
.forkliftRankTwo4{
margin-bottom: 1.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list4.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
}
#carWorkingStateEcharts{
.forkliftRankTwo5{
display: flex;
justify-content: space-evenly;
width: 100%;
height: 28vh;
height: 3vh;
line-height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list5.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
}
.carDynamicTitleStyle{
display: flex;
......
src/views/MLargeScreen/components/dataScreening/index.vue
View file @ 7722db71
......@@ -453,13 +453,6 @@ export default {
selectTimeText:'day',
selectFieldText:'time',
listData:[],
listData1:[
{driver:'王五',time:20,createTime:'2022-08-18 16:11:36'},
{driver:'王五',time:20,createTime:'2022-08-18 16:11:36'},
{driver:'王五',time:20,createTime:'2022-08-18 16:11:36'},
{driver:'王五',time:20,createTime:'2022-08-18 16:11:36'},
{driver:'王五',time:20,createTime:'2022-08-18 16:11:36'},
],
},
//中间模块选择
centerViewData:{
......
src/views/components/echarts/bingtu3d.js 0 → 100644
View file @ 7722db71
// 生成模拟 3D 饼图的配置项
// pieData（object）：饼图数据
// internalDiameterRatio（0~1之间的浮点数）：内径/外径的值（默认值 1/2），当该值等于 0 时，
// heigth配置每个数据生成的高度
export function getPie3D(pieData, internalDiameterRatio, height) {
let series = [];
let sumValue = 0;
let startValue = 0;
let endValue = 0;
let legendData = [];
let k =
typeof internalDiameterRatio !== "undefined"
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
: 1 / 3;
//console.log(k) //internalDiameterRatio==>2时,k=-0.3333333333333333
// 计算比例
let total = 0;
for (let i = 0; i < pieData.length; i++) {
pieData[i].value=Number(pieData[i].value)
// console.log(Number(pieData[i].value))
total += Number(pieData[i].value);
}
// console.log(total)
for (let i = 0; i < pieData.length; i++) {
pieData[i].proportion =parseFloat(pieData[i].value / total).toFixed(4);
// console.log(pieData[i].proportion)
}
// 为每一个饼图数据，生成一个 series-surface 配置
for (let i = 0; i < pieData.length; i++) {
sumValue += pieData[i].value;
let seriesItem = {
name:
typeof pieData[i].name === "undefined"
? `series${i}`
: pieData[i].name,
type: "surface",
parametric: true,
wireframe: {
show: false,
},
pieData: pieData[i],
pieStatus: {
selected: pieData[i].selected?pieData[i].selected:false,
hovered: pieData[i].hovered?pieData[i].hovered:false,
k: k,
},
};
if (typeof pieData[i].itemStyle != "undefined") {
let itemStyle = {};
typeof pieData[i].itemStyle.color != "undefined"
? (itemStyle.color = pieData[i].itemStyle.color)
: null;
typeof pieData[i].itemStyle.opacity != "undefined"
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
: null;
seriesItem.itemStyle = itemStyle;
}
series.push(seriesItem);
}
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
for (let i = 0; i < series.length; i++) {
endValue = startValue + series[i].pieData.value;
// console.log(series[i]);
series[i].pieData.startRatio = startValue / sumValue;
series[i].pieData.endRatio = endValue / sumValue;
series[i].parametricEquation = getParametricEquation(
series[i].pieData.startRatio,
series[i].pieData.endRatio,
series[i].pieStatus.selected,
series[i].pieStatus.hovered,
k,
height ? series[i].pieData.proportion *height: 1 //自己自定义传入高度，每个类型按比例生成高度
// series[i].pieData.value ==>这个是饼图默认自己生成高度
// 1 设置为1所有的扇形高度都一样高
);
startValue = endValue;
legendData.push(series[i].name);
}
// console.log(series);
return series;
}
// startRatio（浮点数）: 当前扇形起始比例，取值区间[0, endRatio)
// endRatio（浮点数）: 当前扇形结束比例，取值区间(startRatio, 1]
// isSelected（布尔值）: 是否选中，效果参照二维饼图选中效果（单选）
// isHovered（布尔值）: 是否放大，效果接近二维饼图高亮（放大）效果（未能实现阴影）
// k（0~1之间的浮点数）：用于参数方程的一个参数，取值 0~1 之间，通过「内径 / 外径」的值换算而来。
//height配置3d扇形高度
export function getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
height
) {
// 计算
let midRatio = (startRatio + endRatio) / 2;
let startRadian = startRatio * Math.PI * 2;
let endRadian = endRatio * Math.PI * 2;
let midRadian = midRatio * Math.PI * 2;
// 如果只有一个扇形，则不实现选中效果。
if (startRatio === 0 && endRatio === 1) {
isSelected = false;
}
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
k = typeof k !== "undefined" ? k : 1 / 3;
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
let offsetX = isSelected ? Math.cos(midRadian) * 0.2 : 0;
let offsetY = isSelected ? Math.sin(midRadian) * 0.2 : 0;
// 计算高亮效果的放大比例（未高亮，则比例为 1）
let hoverRate = isHovered ? 1.05 : 1;
// 返回曲面参数方程
return {
u: {
min: -Math.PI,
max: Math.PI * 3,
step: Math.PI / 32,
},
v: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20,
},
x: function (u, v) {
if (u < startRadian) {
return (
offsetX +
Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
if (u > endRadian) {
return (
offsetX +
Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
},
y: function (u, v) {
if (u < startRadian) {
return (
offsetY +
Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
if (u > endRadian) {
return (
offsetY +
Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
},
z: function (u, v) {
if (u < -Math.PI * 0.5) {
return Math.sin(u);
}
if (u > Math.PI * 2.5) {
return Math.sin(u);
}
return Math.sin(v) > 0 ? 1 * height : -1;
},
};
}
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