|
|
|
|
@ -293,7 +293,7 @@
|
|
|
|
|
}"></el-date-picker>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<lineChart :chart-data="lineChartData"></lineChart>
|
|
|
|
|
<lineChart height="500px" :chart-data="lineChartData"></lineChart>
|
|
|
|
|
</Card>
|
|
|
|
|
|
|
|
|
|
<detailContract ref="detailContract"></detailContract>
|
|
|
|
|
@ -305,6 +305,7 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import echarts from 'echarts'
|
|
|
|
|
import detailContract from "@/views/contract/components/detailContract";
|
|
|
|
|
import LxHeader from "@/components/LxHeader/index.vue";
|
|
|
|
|
import Pagination from "@/components/Pagination";
|
|
|
|
|
@ -509,58 +510,272 @@ export default {
|
|
|
|
|
methods: {
|
|
|
|
|
async getCarry () {
|
|
|
|
|
const res = await carry(this.carrySelect);
|
|
|
|
|
|
|
|
|
|
//组织数据
|
|
|
|
|
let setData = function(data, constData, showData) {
|
|
|
|
|
data.filter(function(item) {
|
|
|
|
|
if (item) {
|
|
|
|
|
constData.push(1);
|
|
|
|
|
showData.push(item);
|
|
|
|
|
} else {
|
|
|
|
|
constData.push(0);
|
|
|
|
|
showData.push({
|
|
|
|
|
value: 1,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
borderColor: "rgba(0,0,0,0)",
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
color: "rgba(0,0,0,0)",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
//组织颜色
|
|
|
|
|
let setColor = function(colorArr) {
|
|
|
|
|
let color = {
|
|
|
|
|
type: "linear",
|
|
|
|
|
x: 0,
|
|
|
|
|
x2: 1,
|
|
|
|
|
y: 0,
|
|
|
|
|
y2: 0,
|
|
|
|
|
/* 此处决定阴暗面 若为横向柱状图则x,y轴调换
|
|
|
|
|
x: 0,
|
|
|
|
|
x2: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
y2: 1, */
|
|
|
|
|
colorStops: [{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: colorArr[0],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 0.5,
|
|
|
|
|
color: colorArr[0],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 0.5,
|
|
|
|
|
color: colorArr[1],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: colorArr[1],
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
return color
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let curPlan = res?.map(i => {
|
|
|
|
|
const { use_money_total,paid_plan_total } = i
|
|
|
|
|
return paid_plan_total ? (Math.round((Number(use_money_total||0) / Number(paid_plan_total ||0)) * 10000) / 100) : 0;
|
|
|
|
|
});
|
|
|
|
|
let curAct = res?.map(i => {
|
|
|
|
|
const { use_money_total,money_total_2 } = i
|
|
|
|
|
return money_total_2 ? (Math.round((Number(use_money_total||0) / Number(money_total_2||0)) * 10000) / 100) : 0;
|
|
|
|
|
});
|
|
|
|
|
let nextPlan = res?.map(i => {
|
|
|
|
|
const { use_money_total_next,paid_plan_total_next } = i
|
|
|
|
|
return paid_plan_total_next ? (Math.round((Number(use_money_total_next||0) / Number(paid_plan_total_next||0)) * 10000) / 100) : 0;
|
|
|
|
|
});
|
|
|
|
|
let barWidth = 23;
|
|
|
|
|
let constData1 = [];
|
|
|
|
|
let showData1 = [];
|
|
|
|
|
let constData2 = [];
|
|
|
|
|
let showData2 = [];
|
|
|
|
|
let constData3 = [];
|
|
|
|
|
let showData3 = [];
|
|
|
|
|
|
|
|
|
|
setData(curPlan, constData1, showData1)
|
|
|
|
|
setData(curAct, constData2, showData2)
|
|
|
|
|
setData(nextPlan, constData3, showData3)
|
|
|
|
|
|
|
|
|
|
let colorArr1 = ["#345A8B", "#387ABD", "#398ac4"];
|
|
|
|
|
let colorArr2 = ["#51C0DB", "#42D9D6", "#45F5F1"];
|
|
|
|
|
let colorArr3 = ['#559372','#7ab798','#9edebc']
|
|
|
|
|
|
|
|
|
|
let color1 = setColor(colorArr1)
|
|
|
|
|
let color2 = setColor(colorArr2)
|
|
|
|
|
let color3 = setColor(colorArr3)
|
|
|
|
|
|
|
|
|
|
this.lineChartData = {
|
|
|
|
|
rotate: 54,
|
|
|
|
|
xArr: res?.map(i => i.plan_department?.name),
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: `${this.carrySelect.month}计划`,
|
|
|
|
|
z: 1,
|
|
|
|
|
type: 'bar',
|
|
|
|
|
barGap: 0,
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: 'series'
|
|
|
|
|
barWidth: barWidth,
|
|
|
|
|
name: `${this.carrySelect.month}计划`,
|
|
|
|
|
barGap: "96%", //相邻柱子间距
|
|
|
|
|
itemStyle: {
|
|
|
|
|
borderRadius: [0, 0, 0, 0],//柱子四周圆角
|
|
|
|
|
color: color1//柱子左右颜色（深，浅）
|
|
|
|
|
},
|
|
|
|
|
data: curPlan, //Y轴上的高度
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: 'top',
|
|
|
|
|
textStyle: {//数值样式
|
|
|
|
|
fontSize: '5px',
|
|
|
|
|
color: '#4d8bdc',
|
|
|
|
|
},
|
|
|
|
|
formatter: params => `${params.value}%`
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
z: 2,
|
|
|
|
|
name: `${this.carrySelect.month}计划`,
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
data: constData1,//此数据对应底部组件
|
|
|
|
|
symbol: "diamond",//底部组件形状，不写默认为椭圆
|
|
|
|
|
symbolOffset: ["-196%", "50%"],//与柱子的偏移角度
|
|
|
|
|
symbolSize: [barWidth, 10],//底面[宽，高]
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#4d8bdc'
|
|
|
|
|
normal: {
|
|
|
|
|
color: color1//底面左右颜色（深，浅）
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
data: res?.map(i => {
|
|
|
|
|
const { use_money_total,money_total_1 } = i
|
|
|
|
|
return Math.round((Number(use_money_total||0) / Number(money_total_1||0)) * 10000) / 100
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: `${this.carrySelect.month}实际`,
|
|
|
|
|
z: 3,
|
|
|
|
|
name: `${this.carrySelect.month}计划`,
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
symbolPosition: "end",
|
|
|
|
|
data: showData1,//此数据对应顶部组件
|
|
|
|
|
symbol: "diamond",
|
|
|
|
|
symbolOffset: ["-234%", "-50%"],
|
|
|
|
|
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
borderColor: colorArr1[2],
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
color: colorArr1[2],
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
z: 4,
|
|
|
|
|
type: 'bar',
|
|
|
|
|
barGap: 0,
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: 'series'
|
|
|
|
|
barWidth: barWidth,
|
|
|
|
|
name: `${this.carrySelect.month}实际`,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
borderRadius: [0, 0, 0, 0],
|
|
|
|
|
color: color2
|
|
|
|
|
},
|
|
|
|
|
data: curAct,
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: 'top',
|
|
|
|
|
textStyle: {//数值样式
|
|
|
|
|
fontSize: '5px',
|
|
|
|
|
color: '#4d8bdc',
|
|
|
|
|
},
|
|
|
|
|
formatter: params => `${params.value}%`
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
z: 5,
|
|
|
|
|
name: `${this.carrySelect.month}实际`,
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
data: constData2,
|
|
|
|
|
symbol: "diamond",
|
|
|
|
|
symbolOffset: ["0%", "50%"],
|
|
|
|
|
symbolSize: [barWidth, 10], //=========================
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#7ab384'
|
|
|
|
|
normal: {
|
|
|
|
|
color: color2
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
data: res?.map(i => {
|
|
|
|
|
const { use_money_total,money_total_2 } = i
|
|
|
|
|
return Math.round((Number(use_money_total||0) / Number(money_total_2||0)) * 10000) / 100
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: `${this.$moment(this.carrySelect.month).add(1,'months').format('YYYY-MM')}计划`,
|
|
|
|
|
z: 6,
|
|
|
|
|
name: `${this.carrySelect.month}实际`,
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
symbolPosition: "end",
|
|
|
|
|
data: showData2,
|
|
|
|
|
symbol: "diamond",
|
|
|
|
|
symbolOffset: ["0%", "-50%"],
|
|
|
|
|
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
borderColor: colorArr2[2],
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
color: colorArr2[2]
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
z: 7,
|
|
|
|
|
type: 'bar',
|
|
|
|
|
barGap: 0,
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: 'series'
|
|
|
|
|
barWidth: barWidth,
|
|
|
|
|
name: `${this.$moment(this.carrySelect.month).add(1,'months').format('YYYY-MM')}计划`,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
borderRadius: [0, 0, 0, 0],
|
|
|
|
|
color: color3
|
|
|
|
|
},
|
|
|
|
|
data: nextPlan,
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: 'top',
|
|
|
|
|
textStyle: {//数值样式
|
|
|
|
|
fontSize: '5px',
|
|
|
|
|
color: '#4d8bdc',
|
|
|
|
|
},
|
|
|
|
|
formatter: params => `${params.value}%`
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
z: 8,
|
|
|
|
|
name: `${this.$moment(this.carrySelect.month).add(1,'months').format('YYYY-MM')}计划`,
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
data: constData3,
|
|
|
|
|
symbol: "diamond",
|
|
|
|
|
symbolOffset: ["196%", "50%"],
|
|
|
|
|
symbolSize: [barWidth, 10],
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#f7cb56'
|
|
|
|
|
normal: {
|
|
|
|
|
color: color3
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
data: res?.map(i => {
|
|
|
|
|
const { use_money_total_next,money_total } = i
|
|
|
|
|
return Math.round((Number(use_money_total_next||0) / Number(money_total||0)) * 10000) / 100
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
z: 9,
|
|
|
|
|
name: `${this.$moment(this.carrySelect.month).add(1,'months').format('YYYY-MM')}计划`,
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
symbolPosition: "end",
|
|
|
|
|
data: showData3,
|
|
|
|
|
symbol: "diamond",
|
|
|
|
|
symbolOffset: ["237%", "-50%"],
|
|
|
|
|
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
borderColor: colorArr3[2],
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
color: colorArr3[2]
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
console.log(res)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
changeYear(e) {
|
|
|
|
|
|
