<template>
|
<div class="main tabs_main" style="overflow:hidden;width:none!important;height:none!important;">
|
<div class="main_header">
|
<div class="header_item">
|
<span class="header_label">项目名称：</span>
|
<el-select v-model="search.proId" placeholder="请选择项目名称" clearable>
|
<el-option
|
v-for="item in optionsProject"
|
:key="item.proId"
|
:label="item.proName"
|
:value="item.proId">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="header_item">
|
<span class="header_label">统计时间：</span>
|
<el-date-picker
|
v-model="search.time"
|
type="daterange"
|
value-format="yyyy-MM-dd"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</div>
|
<div class="header_item">
|
<el-button v-if="showButton('search')" icon="el-icon-search" @click="searchButtonInfo()">查询</el-button>
|
<el-button v-if="showButton('export')" icon="el-icon-download" @click="exportExcel()">导出Excel</el-button>
|
</div>
|
</div>
|
<div class="main_middle">
|
<div class="main_middle_titles">数据统计</div>
|
<div class="main_middle_matter">
|
<div class="middle_items">
|
<div class="middle_items_text">管片运输总量</div>
|
<div class="middle_items_datas">{{showDatas&&showDatas.transport*1}}<span>块</span></div>
|
</div>
|
<div class="middle_items">
|
<div class="middle_items_text">累计发运总量</div>
|
<div class="middle_items_datas">{{showDatas&&showDatas.shipping}}<span>块</span></div>
|
</div>
|
<div class="middle_items">
|
<div class="middle_items_text">累计运输车次</div>
|
<div class="middle_items_datas">{{showDatas&&showDatas.carNum}}<span>次</span></div>
|
</div>
|
</div>
|
</div>
|
<div class="main_content" style="overflow:hidden">
|
<div class="main_content_left">
|
<div class="main_content_left_titles">发运与生产对比</div>
|
<div id="first_chart" style="height:100%"></div>
|
</div>
|
<div class="main_content_right">
|
<div class="main_content_right_titles">运输量排行</div>
|
<div class="main_content_right_ranks" v-if="rankList.length!==0">
|
<div class="tables_items" v-for="(rankItem,rankIndex) in rankList" :key="rankIndex">
|
<div class="tables_items_first">
|
<div class="tables_items_first_text">项目名称：</div>
|
<div class="tables_items_first_data" >{{rankItem.ranKingDtos[0].proName}}</div>
|
<div class="tables_items_first_text">尺寸：</div>
|
<div class="tables_items_first_data" >{{rankItem.ranKingDtos[0].sizeName}}</div>
|
</div>
|
<div class="tables_items_first">
|
<div class="tables_items_first_text">块号</div>
|
<div class="tables_items_first_data" v-for="(titleItem,tIndex) in rankItem.ranKingDtos" :key="tIndex">{{titleItem.blockName}}</div>
|
</div>
|
<div class="tables_items_first">
|
<div class="tables_items_first_text">生产量</div>
|
<div class="tables_items_first_data" style="background-color:#0B3371" v-for="(productItem,pIndex) in rankItem.ranKingDtos" :key="pIndex">{{productItem.produce}}个</div>
|
</div>
|
<div class="tables_items_first">
|
<div class="tables_items_first_text">发运量</div>
|
<div class="tables_items_first_data" style="background-color:#0B3371" v-for="(forwardItem,fIndex) in rankItem.ranKingDtos" :key="fIndex">{{forwardItem.goIn}}个</div>
|
</div>
|
</div>
|
</div>
|
<div class="main_content_right_ranks_empot" v-if="rankList.length===0">暂无数据</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { buttonPinia } from '../../pinia';
|
export default {
|
// name: 'DuctpieceIndex',
|
data() {
|
return {
|
search:{},//查询条件
|
optionsProject:[],//所以项目
|
rankList:[],//排行榜数目
|
showDatas:null,//展示的数据统计
|
}
|
},
|
mounted() {
|
this.searchButtonInfo()
|
this.getAllProjects()
|
},
|
methods: {
|
//获得所有项目名称
|
getAllProjects(){
|
let obj = {
|
pageNum: 1,
|
pageSize: 100000000
|
}
|
this.$api.Engineer.searchProjects(obj).then(res=>{
|
if(res.statusMsg === 'ok'){
|
this.optionsProject = res.data.list
|
}else{
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
},
|
//查询按钮
|
searchButtonInfo() {
|
let params = {
|
proId:this.search.proId,
|
strTime:this.search.time&&this.search.time[0],
|
endTime:this.search.time&&this.search.time[1]
|
}
|
this.$api.Analyse.searchDataLists(params).then(res=>{
|
if(res.statusMsg === 'ok'){
|
this.showDatas = res.data
|
this.$nextTick(() => {
|
this.createCharts('first_chart',res.data);
|
})
|
}else{
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
this.$api.Analyse.searchRanksForward(params).then(res=>{
|
if(res.statusMsg === 'ok'){
|
this.rankList = res.data
|
}else{
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
},
|
// 创建echart图表
|
createCharts(name,data) {
|
const chartsImage = this.$echarts.init(document.getElementById(name));
|
const dataEcharts = [{
|
name: '生产数量',
|
value: data.produce==='0'?0:((data.produce*1/(data.produce*1+data.shipping*1))*100).toFixed(2),
|
},
|
{
|
name: '发运数量',
|
value: data.shipping==='0'?0:((data.shipping*1/(data.produce*1+data.shipping*1))*100).toFixed(2),
|
},
|
]
|
const option = {
|
animationDuration: 1500,
|
color:[ '#2C77FF','#FAA706'],
|
legend: {
|
// selectedMode: false, // 取消图例上的点击事件
|
type: 'plain',
|
icon: 'circle',
|
orient: 'vertical',
|
left: '70%',
|
top: '45%',
|
// align: 'left',
|
itemGap: 15,
|
itemWidth: 20, // 设置圆圈宽度
|
itemHeight: 20, // 设置高度
|
symbolKeepAspect: false,
|
textStyle: {
|
color: '#fff',
|
rich: {
|
name: {
|
verticalAlign: 'right',
|
align: 'left',
|
width: 35,
|
fontSize: 15 //文字大小
|
},
|
}
|
},
|
data: dataEcharts.map(item => item.name),
|
formatter: function(name) {
|
return ('{name| ' +name +'}')
|
}
|
},
|
series: [{
|
name: '数量',
|
type: 'pie',
|
radius: ['30%', '55%'],
|
center: ['40%', '50%'],
|
data: dataEcharts,
|
itemStyle: {
|
normal: {
|
borderWidth: 8,//设置边框粗细
|
borderColor: 'rgba(44,119,255,0.4)'//边框颜色
|
}
|
},
|
label: {
|
normal: {
|
show: true,//扇形上是否展示数据
|
position: 'outside',
|
color:"#fff",
|
formatter: '{text|{c}%}\n',
|
rich: {
|
text: {
|
align: 'center',
|
verticalAlign: 'middle',
|
padding: 8,
|
fontSize: 20
|
},
|
value: {
|
align: 'center',
|
verticalAlign: 'middle',
|
fontSize: 20
|
}
|
},
|
},
|
emphasis: {
|
show: true,
|
textStyle: {
|
fontSize: '15'
|
}
|
}
|
},
|
labelLine: {
|
normal: {
|
show: true
|
}
|
}
|
}]
|
}
|
chartsImage.clear();
|
chartsImage.setOption(option);
|
window.onresize = () => {
|
chartsImage.resize()
|
}
|
},
|
// 判断按钮权限信息
|
showButton(str) {
|
const pinia = buttonPinia();
|
return pinia.$state.buttonInfo.includes(str);
|
}
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/style/layout-main.scss";
|
|
.main_middle{
|
width: 97%;
|
margin: 10px 18px;
|
|
.main_middle_titles{
|
width: 100%;
|
color: #19F6F8;
|
position: relative;
|
padding: 10px 15px;
|
border-bottom:1px solid #1B50AE ;
|
&::before{
|
content: "";
|
position: absolute;
|
left: 5px;
|
top: 10px;
|
width: 2px;
|
height: 18px;
|
background-color: #18F6F8;
|
}
|
}
|
.main_middle_matter{
|
padding-top: 15px;
|
display: flex;
|
|
.middle_items{
|
width: calc(100%/3 - 25px);
|
margin-right: 20px;
|
height: 200px;
|
background: url('../../assets/data_analyse_bg.png') no-repeat;
|
background-size: 100% 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
.middle_items_text{
|
color: #E1E5EB;
|
font-size: 16px;
|
}
|
.middle_items_datas{
|
color: #18F6F8;
|
font-size: 48px;
|
font-weight: 600;
|
margin-top: 15px;
|
span{
|
color: #18F6F8;
|
font-size: 14px;
|
}
|
}
|
}
|
}
|
}
|
|
.main_content{
|
width: 100%;
|
overflow: auto;
|
display: flex;
|
.main_content_left{
|
width: 40%;
|
.main_content_left_titles{
|
color: #19F6F8;
|
position: relative;
|
margin: 0px 18px;
|
padding: 10px 15px;
|
border-bottom:1px solid #1B50AE ;
|
&::before{
|
content: "";
|
position: absolute;
|
left: 5px;
|
top: 10px;
|
width: 2px;
|
height: 18px;
|
background-color: #18F6F8;
|
}
|
}
|
}
|
.main_content_right{
|
width: 58%;
|
.main_content_right_titles{
|
margin: 0px 18px;
|
color: #19F6F8;
|
position: relative;
|
padding: 10px 15px;
|
border-bottom:1px solid #1B50AE ;
|
&::before{
|
content: "";
|
position: absolute;
|
left: 5px;
|
top: 10px;
|
width: 2px;
|
height: 18px;
|
background-color: #18F6F8;
|
}
|
}
|
.main_content_right_ranks_empot{
|
color: #909399;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.main_content_right_ranks{
|
width: 100%;
|
height: 500px;
|
padding: 10px 25px;
|
overflow: auto;
|
.tables_items{
|
padding-top: 20px;
|
|
.tables_items_first{
|
display: flex;
|
line-height: 30px;
|
&:last-child{
|
border-bottom: 1px solid #2155A2;
|
border-right: 1px solid #2155A2;
|
}
|
&:nth-child(2){
|
border-right: 1px solid #2155A2;
|
}
|
&:nth-child(1){
|
border-right: 1px solid #2155A2;
|
}
|
.tables_items_first_text{
|
width: 120px;
|
text-align: center;
|
padding: 5px 0px;
|
color: #18F5F7;
|
flex: none;
|
border-left: 1px solid #2155A2;
|
border-top: 1px solid #2155A2;
|
background-color: #031A46;
|
}
|
.tables_items_first_data{
|
padding: 5px 0px;
|
color: #18F5F7;
|
text-align: center;
|
border-left: 1px solid #2155A2;
|
border-top: 1px solid #2155A2;
|
flex: 1;
|
background-color: #031A46;
|
}
|
}
|
}
|
}
|
}
|
|
}
|
|
/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner{
|
color: #19F7F9;
|
border-color: #18F6F8;
|
background-color: #0D4573!important;
|
}
|
/deep/.el-radio-button__inner{
|
background-color: #0D4573;
|
border-color:#18F6F8;
|
border-radius: 0px 0px !important;
|
border-color: #18F6F8;
|
color: #E2E9EE;
|
}
|
</style>
|
