401 lines
12 KiB
Java
401 lines
12 KiB
Java
<template>
|
|
<div>
|
|
<div class="table-page-search-wrapper">
|
|
<a-form layout="inline">
|
|
<a-row :gutter="24">
|
|
<a-col :md="6" :sm="10">
|
|
<a-form-item :label="$t('Collectlist')">
|
|
<a-select v-model="queryParam.ctype" @change="getonChange" style='width: 183px' :getPopupContainer="triggerNode => triggerNode.parentNode" :popper-append-to-body="false">
|
|
<a-select-option v-for="d in options" :key="d.value" :value="d.value" >
|
|
<span style="display: inline-block;width: 80%" :title=" d.label">
|
|
{{ d.label }}
|
|
</span>
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :md="6" :sm="14">
|
|
<a-form-model-item :label="$t('Statisticalmodels')" prop="value" style='width: 388px' class="process-form-item">
|
|
<a-radio-group v-model="queryParam.value" @change="onChange" style='width: 253px'>
|
|
<a-radio :value="1">
|
|
{{$t('Thepercentage')}}
|
|
</a-radio>
|
|
<a-radio :value="2">
|
|
{{$t('Quantity')}}
|
|
</a-radio>
|
|
</a-radio-group>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
|
|
</a-row>
|
|
</a-form>
|
|
</div>
|
|
<div class="box-content">
|
|
<div class="box-content-left">
|
|
<div id="main-left"></div>
|
|
</div>
|
|
</div>
|
|
<responsibilityList @responsibility="responsibility" ref="responsibilityListRef"/>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
|
|
import responsibilityList from './responsibilityList'
|
|
import "echarts/lib/component/dataZoom"
|
|
|
|
export default {
|
|
name: 'DeliverableStatusEchart',
|
|
components: {
|
|
responsibilityList
|
|
},
|
|
props: {
|
|
idList: {
|
|
type: Array,
|
|
default: []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
queryParam:{
|
|
value:1,
|
|
ctype:''
|
|
},
|
|
options:[],
|
|
collecting:[],
|
|
notStart:[],
|
|
submit:[],
|
|
syncReport:[],
|
|
collectingdata:[],
|
|
notStartdata:[],
|
|
submitdata:[],
|
|
syncReportdata:[],
|
|
dutyTerritory:[],
|
|
collectingpercentage:[],
|
|
collectingquantity:[],
|
|
notStartpercentage:[],
|
|
notStartquantity:[],
|
|
submitpercentage:[],
|
|
submitquantity:[],
|
|
syncReportpercentage:[],
|
|
syncReportquantity:[],
|
|
url: {
|
|
getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatisticsCollectManifestData'
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getoptions()
|
|
this.getEcharts()
|
|
|
|
},
|
|
methods: {
|
|
getData(item) {
|
|
getAction(this.url.getProjectDetailsStatistics, { paramsManifestId: item }).then((res) => {
|
|
if (res.success) {
|
|
if (res.result) {
|
|
this.collecting = res.result.collecting ? res.result.collecting : []
|
|
this.notStart = res.result.notStart ? res.result.notStart: []
|
|
this.submit = res.result.submit ? res.result.submit : []
|
|
this.syncReport = res.result.syncReport ? res.result.syncReport : []
|
|
this.dutyTerritory = res.result.dutyTerritory ? res.result.dutyTerritory : []
|
|
this.getEcharts()
|
|
|
|
}
|
|
|
|
}
|
|
})
|
|
},
|
|
getoptions(){
|
|
let id = ''
|
|
if (this.idList && this.idList.length > 0) {
|
|
id = this.idList.join(',')
|
|
} else {
|
|
id = this.$route.query.parentId ? this.$route.query.parentId : this.$route.query.id
|
|
// id = this.$route.query.id
|
|
}
|
|
getAction('project/projectLibraryBase/getProjectDetailsStatisticsCollectManifestLabel', {id:id}).then((res) => {
|
|
if (res.success) {
|
|
this.options = res.result
|
|
this.queryParam.ctype = this.options[0].value
|
|
this.getData(this.queryParam.ctype)
|
|
} else {
|
|
}
|
|
})
|
|
},
|
|
getonChange(value){
|
|
this.collectingpercentage = []
|
|
this.collectingquantity = []
|
|
this.notStartpercentage = []
|
|
this.notStartquantity = []
|
|
this.submitpercentage = []
|
|
this.submitquantity = []
|
|
this.syncReportpercentage = []
|
|
this.syncReportquantity = []
|
|
this.getData(value)
|
|
},
|
|
onChange(value){
|
|
this.collectingpercentage = []
|
|
this.collectingquantity = []
|
|
this.notStartpercentage = []
|
|
this.notStartquantity = []
|
|
this.submitpercentage = []
|
|
this.submitquantity = []
|
|
this.syncReportpercentage = []
|
|
this.syncReportquantity = []
|
|
this.getEcharts()
|
|
|
|
},
|
|
getEcharts(chart, title, color, data, num) {
|
|
this.collecting.forEach((item,index) => {
|
|
this.collectingpercentage.push(item.percentage)
|
|
this.collectingquantity.push(item.quantity)
|
|
})
|
|
this.notStart.forEach((item,index) => {
|
|
this.notStartpercentage.push(item.percentage)
|
|
this.notStartquantity.push(item.quantity)
|
|
})
|
|
this.submit.forEach((item,index) => {
|
|
this.submitpercentage.push(item.percentage)
|
|
this.submitquantity.push(item.quantity)
|
|
})
|
|
this.syncReport.forEach((item,index) => {
|
|
this.syncReportpercentage.push(item.percentage)
|
|
this.syncReportquantity.push(item.quantity)
|
|
})
|
|
if(this.queryParam.value == 1){
|
|
this.collectingdata = this.collectingpercentage
|
|
this.notStartdata = this.notStartpercentage
|
|
this.submitdata = this.submitpercentage
|
|
this.syncReportdata = this.syncReportpercentage
|
|
}else if(this.queryParam.value == 2){
|
|
this.collectingdata = this.collectingquantity
|
|
this.notStartdata = this.notStartquantity
|
|
this.submitdata = this.submitquantity
|
|
this.syncReportdata = this.syncReportquantity
|
|
}
|
|
var chartDom = document.getElementById('main-left');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
var option1;
|
|
|
|
let xAxisData = [];
|
|
// let data1 = [];
|
|
// let data2 = [];
|
|
// let data3 = [];
|
|
// let data4 = [];
|
|
xAxisData = this.dutyTerritory
|
|
// data1.push(+(Math.random() * 2).toFixed(2));
|
|
// data2.push(+(Math.random() * 100).toFixed(2));
|
|
// data3.push(+(Math.random() + 0.3).toFixed(2));
|
|
// data4.push(+Math.random().toFixed(2));
|
|
|
|
let yAxis=[];
|
|
let tooltip= {};
|
|
let _this = this
|
|
if(this.queryParam.value === 1){
|
|
yAxis = [
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 'auto',
|
|
formatter: '{value} %'
|
|
},
|
|
},
|
|
]
|
|
}else{
|
|
yAxis=[
|
|
{
|
|
type: 'value',
|
|
},
|
|
];
|
|
}
|
|
option = {
|
|
legend: {
|
|
data: [this.$t('Notatthe'), this.$t('Inthecollection'), this.$t('Submitted'), this.$t('SynchronizedLibrary')],
|
|
left: '10%'
|
|
},
|
|
toolbox: {
|
|
// feature: {
|
|
// magicType: {
|
|
// type: ['stack']
|
|
// },
|
|
// dataView: {}
|
|
// }
|
|
},
|
|
tooltip: {
|
|
trigger:'axis',
|
|
// axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
// type: 'line'// 默认为直线，可选为：'line' | 'shadow'
|
|
// },
|
|
formatter: function (params) {
|
|
var html = params[0].name + "<br>";
|
|
for (var i = 0; i < params.length; i++) {
|
|
html += params[i].marker + params[i].seriesName + ":" + params[i].value;
|
|
if (_this.queryParam.value == 1) {
|
|
html += "%" + "<br>";
|
|
}else{
|
|
html +="<br>";
|
|
}
|
|
}
|
|
return html;
|
|
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: xAxisData,
|
|
// name: 'X Axis',
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate:25,
|
|
// formatter: function(value) {
|
|
// return value.split("").join("\n");
|
|
// }
|
|
},
|
|
// axisLine: { onZero: true },
|
|
// splitLine: { show: false },
|
|
// splitArea: { show: false }
|
|
},
|
|
yAxis: yAxis,
|
|
grid: {
|
|
left: '10%',
|
|
bottom: '20%'
|
|
},
|
|
series: [
|
|
{
|
|
name: this.$t('Notatthe'),
|
|
type: 'bar',
|
|
stack: 'one',
|
|
barWidth: 40,
|
|
barGap: '-100%',
|
|
itemStyle: {
|
|
color: "#707486",
|
|
},
|
|
data: this.notStartdata
|
|
},
|
|
{
|
|
name: this.$t('Inthecollection'),
|
|
type: 'bar',
|
|
stack: 'one',
|
|
barWidth: 40,
|
|
barGap: '-100%',
|
|
itemStyle: {
|
|
color: "#00B3BE",
|
|
},
|
|
data: this.collectingdata
|
|
},
|
|
{
|
|
name: this.$t('Submitted'),
|
|
type: 'bar',
|
|
stack: 'one',
|
|
barWidth: 40,
|
|
barGap: '-100%',
|
|
itemStyle: {
|
|
color: "#26BD4B",
|
|
},
|
|
data: this.submitdata
|
|
},
|
|
{
|
|
name: this.$t('SynchronizedLibrary'),
|
|
type: 'bar',
|
|
stack: 'one',
|
|
barWidth: 40,
|
|
barGap: '-100%',
|
|
itemStyle: {
|
|
color: "#E83030",
|
|
},
|
|
data: this.syncReportdata
|
|
}
|
|
],
|
|
dataZoom:[
|
|
|
|
{
|
|
type: 'slider',//给x轴设置滚动条
|
|
show: true, //flase直接隐藏图形
|
|
xAxisIndex: [0],
|
|
bottom: 0,
|
|
height: 20,
|
|
showDetail: false,
|
|
startValue: 0,//滚动条的起始位置
|
|
endValue: 9 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
|
|
}
|
|
|
|
],
|
|
};
|
|
option && myChart.setOption(option, true);
|
|
|
|
},
|
|
mainLeftEcharts(data, color) {
|
|
this.getEcharts('main-left', this.$t('Parametercollection'), color, data, 1)
|
|
},
|
|
responsibility(item) {
|
|
this.$emit('currentStatus', item)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.box-content {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
|
|
.box-content-left {
|
|
width: calc(100% - 12px);
|
|
height: 600px;
|
|
border: 2px #eff1f3 solid;
|
|
|
|
#main-left {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 24px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#main-left-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 24px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#main-bottom {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 24px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
.box-input {
|
|
display: inline-block;
|
|
width: calc(70% - 100px);
|
|
height: 38px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.box-content-right {
|
|
width: calc(50% - 12px);
|
|
height: 398px;
|
|
border: 2px #eff1f3 solid;
|
|
|
|
#main-right {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 24px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#main-right-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 24px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
</style> |