|
|
<template>
|
|
|
<!-- 月度计划分析 -->
|
|
|
<div class="monthPlan-container">
|
|
|
<div class="monthPlan-box">
|
|
|
<div class="left-box">
|
|
|
<div class="border-out">
|
|
|
<div class="border-inner">
|
|
|
<!-- 线标分析-折线图 -->
|
|
|
<div class="left-top-box">
|
|
|
<div class="left-top-title">月度计划汇总表</div>
|
|
|
<table class="table-sum">
|
|
|
<tr>
|
|
|
<td class="table-sum-title">图纸数量</td>
|
|
|
<td class="table-sum-text">
|
|
|
{{ tableSumObj.tzsl ? tableSumObj.tzsl : 0 }}张
|
|
|
</td>
|
|
|
<td class="table-sum-title">来图数量</td>
|
|
|
<td class="table-sum-text">
|
|
|
{{ tableSumObj.ltsl ? tableSumObj.ltsl : 0 }}张
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="table-sum-title">需求重量</td>
|
|
|
<td class="table-sum-text">
|
|
|
{{ tableSumObj.xqzl ? hasDot(tableSumObj.xqzl) : 0 }}吨
|
|
|
</td>
|
|
|
<td class="table-sum-title">订货清单重量</td>
|
|
|
<td class="table-sum-text">
|
|
|
{{ tableSumObj.dhzl ? hasDot(tableSumObj.dhzl) : 0 }}吨
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="table-sum-title">月度计划重量</td>
|
|
|
<td class="table-sum-text">
|
|
|
{{ tableSumObj.jhzl ? hasDot(tableSumObj.jhzl) : 0 }}吨
|
|
|
</td>
|
|
|
<td class="table-sum-title">完成重量</td>
|
|
|
<td class="table-sum-text">
|
|
|
{{ tableSumObj.wczl ? hasDot(tableSumObj.wczl) : 0 }}吨
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr v-for="(item, index) in tableSumObj.detail" :key="index">
|
|
|
<td class="table-sum-title">船号</td>
|
|
|
<td class="table-sum-text">
|
|
|
{{ item.dcCh }}
|
|
|
</td>
|
|
|
<td class="table-sum-title">批次数量</td>
|
|
|
<td class="table-sum-text">
|
|
|
{{ item.pcsl ? item.pcsl : 0 }}张
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
<!-- <div class="left-bottom-box">
|
|
|
<table class="table-sum">
|
|
|
</table>
|
|
|
</div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right-box">
|
|
|
<div class="right-top-box">
|
|
|
<div class="border-out">
|
|
|
<div class="border-inner">
|
|
|
<!-- 柱状图 -->
|
|
|
<div class="right-top-title">月度计划数据分析</div>
|
|
|
<el-row class="row">
|
|
|
<el-col :span="24">
|
|
|
<div id="DrawingBar" class="drawingBar"></div>
|
|
|
</el-col>
|
|
|
<!-- <el-col :span="12">
|
|
|
<div id="ForwardDemandBar" class="forwardDemandBar"></div
|
|
|
></el-col> -->
|
|
|
</el-row>
|
|
|
<!-- <el-row class="row">
|
|
|
<el-col :span="12">
|
|
|
<div id="MonthlyPlanBar" class="monthlyPlanBar"></div
|
|
|
></el-col>
|
|
|
<el-col :span="12"
|
|
|
><div id="FinishBar" class="finishBar"></div>
|
|
|
</el-col>
|
|
|
</el-row> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right-bottom-box">
|
|
|
<div class="border-out">
|
|
|
<div class="border-inner">
|
|
|
<!-- 饼图 -->
|
|
|
<div class="right-bottom-title">月度计划数据分析</div>
|
|
|
<el-row class="row">
|
|
|
<el-col :span="4">
|
|
|
<div id="DrawingPie" class="drawingPie"></div>
|
|
|
</el-col>
|
|
|
<el-col :span="4" :offset="1">
|
|
|
<div id="ForwardDemandPie" class="forwardDemandPie"></div>
|
|
|
</el-col>
|
|
|
<el-col :span="4" :offset="1">
|
|
|
<div id="PlanFinishPie" class="planFinishPie"></div>
|
|
|
</el-col>
|
|
|
<el-col :span="4" :offset="1">
|
|
|
<div id="MonthlyPlanPie" class="monthlyPlanPie"></div>
|
|
|
</el-col>
|
|
|
<el-col :span="4">
|
|
|
<div id="FinishPie" class="finishPie"></div
|
|
|
></el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { zrcTable } from "@/api/monthPlan";
|
|
|
import { hasDot } from "@/utils/tool";
|
|
|
export default {
|
|
|
name: "MonthPlan",
|
|
|
data() {
|
|
|
return {
|
|
|
hasDot,
|
|
|
tableSumList: [],
|
|
|
tableSumObj: {},
|
|
|
xbjhList: [],
|
|
|
ydjhList: [],
|
|
|
monthList: [
|
|
|
"1月",
|
|
|
"2月",
|
|
|
"3月",
|
|
|
"4月",
|
|
|
"5月",
|
|
|
"6月",
|
|
|
"7月",
|
|
|
"8月",
|
|
|
"9月",
|
|
|
"10月",
|
|
|
"11月",
|
|
|
"12月",
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.zrcTable();
|
|
|
},
|
|
|
methods: {
|
|
|
zrcTable() {
|
|
|
zrcTable().then((res) => {
|
|
|
this.tableSumObj = res.data;
|
|
|
var bgData = [res.data.xqzl, res.data.xqzl, res.data.xqzl, res.data.xqzl];
|
|
|
var zlData = [ res.data.xqzl,res.data.dhzl, res.data.jhzl, res.data.wczl];
|
|
|
|
|
|
this.DrawingBar(bgData,zlData);
|
|
|
// this.ForwardDemandBar();
|
|
|
// this.MonthlyPlanBar();
|
|
|
// this.finishBar();
|
|
|
this.drawingPie(res.data.ltsl, res.data.tzsl);
|
|
|
this.planFinishPie(res.data.jhzl, res.data.wczl);
|
|
|
this.forwardDemandPie(res.data.xqzl, res.data.dhzl);
|
|
|
this.monthlyPlanPie(res.data.xqzl, res.data.jhzl);
|
|
|
this.finishPie(res.data.xqzl, res.data.wczl);
|
|
|
});
|
|
|
},
|
|
|
DrawingBar(bgData,zlData) {
|
|
|
var myChart = this.$echarts.init(document.getElementById("DrawingBar"));
|
|
|
|
|
|
|
|
|
var option = {
|
|
|
// color: ["#2e7cff", "#fc8452"],
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
type: "line",
|
|
|
lineStyle: {
|
|
|
color: "rgba(150,150,150,0.2)",
|
|
|
width: 70,
|
|
|
type: "solid",
|
|
|
},
|
|
|
},
|
|
|
formatter: (params) => {
|
|
|
var res = "";
|
|
|
res =
|
|
|
params[1].marker +
|
|
|
params[1].name +
|
|
|
"<br/>" +
|
|
|
params[0].seriesName +
|
|
|
"：" +
|
|
|
params[0].value +
|
|
|
"<br/>" +
|
|
|
params[1].name +
|
|
|
"：" +
|
|
|
params[1].value;
|
|
|
return res;
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
top: "10%",
|
|
|
left: "2%",
|
|
|
right: "2%",
|
|
|
bottom: "15",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
data: ["需求重量", "订货重量", "计划重量", "完成重量"],
|
|
|
axisLabel: {
|
|
|
color: "#e4e4e4",
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
color: "#e4e4e4",
|
|
|
},
|
|
|
data: zlData,
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "需求重量",
|
|
|
type: "bar",
|
|
|
barGap: "-100%",
|
|
|
label: {
|
|
|
show: false,
|
|
|
},
|
|
|
barWidth: 40,
|
|
|
itemStyle: {
|
|
|
color: "#2e7cff",
|
|
|
},
|
|
|
data: bgData, // 载入背景数据
|
|
|
z: 0,
|
|
|
},
|
|
|
{
|
|
|
name: "完成数量",
|
|
|
type: "bar",
|
|
|
barWidth: 40,
|
|
|
itemStyle: {
|
|
|
color: "#fc8452",
|
|
|
},
|
|
|
data: zlData, // 载入数据(内含自定义参数)
|
|
|
z: 1,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", () => {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
},
|
|
|
ForwardDemandBar() {
|
|
|
var myChart = this.$echarts.init(
|
|
|
document.getElementById("ForwardDemandBar")
|
|
|
);
|
|
|
|
|
|
var option = {
|
|
|
color: ["#2e7cff", "#91cd76"],
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
},
|
|
|
legend: {
|
|
|
data: ["线表计划", "月度计划"],
|
|
|
top: "5%",
|
|
|
textStyle: {
|
|
|
color: "#e9ebee",
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
left: "2%",
|
|
|
right: "2%",
|
|
|
bottom: "5%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
calculable: true,
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
data: this.monthList,
|
|
|
axisLabel: {
|
|
|
color: "#e4e4e4",
|
|
|
},
|
|
|
nameTextStyle: {
|
|
|
color: "#e4e4e4",
|
|
|
fontSize: 12,
|
|
|
padding: [0, 0, 0, 0],
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: "#064585",
|
|
|
// type: "dashed"
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
color: "#e4e4e4",
|
|
|
},
|
|
|
nameTextStyle: {
|
|
|
color: "#e4e4e4",
|
|
|
fontSize: 12,
|
|
|
padding: [0, 30, 10, 0],
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "线表计划",
|
|
|
type: "bar",
|
|
|
data: [34, 45, 67, 34, 45, 34, 12, 67, 34, 12, 34, 12],
|
|
|
markPoint: {
|
|
|
data: [
|
|
|
{
|
|
|
type: "max",
|
|
|
name: "Max",
|
|
|
label: {
|
|
|
show: true,
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
type: "min",
|
|
|
name: "Min",
|
|
|
label: {
|
|
|
show: true,
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
name: "月度计划",
|
|
|
type: "bar",
|
|
|
data: [34, 45, 67, 34, 12, 34, 45, 67, 34, 12, 34, 12],
|
|
|
markPoint: {
|
|
|
data: [
|
|
|
{
|
|
|
type: "max",
|
|
|
name: "Max",
|
|
|
label: {
|
|
|
show: true,
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
type: "min",
|
|
|
name: "Min",
|
|
|
label: {
|
|
|
show: true,
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", () => {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
},
|
|
|
MonthlyPlanBar() {
|
|
|
var myChart = this.$echarts.init(
|
|
|
document.getElementById("MonthlyPlanBar")
|
|
|
);
|
|
|
|
|
|
var option = {
|
|
|
color: ["#2e7cff", "#feb602"],
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
},
|
|
|
legend: {
|
|
|
data: ["线表计划", "月度计划"],
|
|
|
top: "5%",
|
|
|
textStyle: {
|
|
|
color: "#e9ebee",
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
left: "2%",
|
|
|
right: "2%",
|
|
|
bottom: "5%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
calculable: true,
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
data: this.monthList,
|
|
|
axisLabel: {
|
|
|
color: "#e4e4e4",
|
|
|
},
|
|
|
nameTextStyle: {
|
|
|
color: "#e4e4e4",
|
|
|
fontSize: 12,
|
|
|
padding: [0, 0, 0, 0],
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: "#064585",
|
|
|
// type: "dashed"
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
color: "#e4e4e4",
|
|
|
},
|
|
|
nameTextStyle: {
|
|
|
color: "#e4e4e4",
|
|
|
fontSize: 12,
|
|
|
padding: [0, 30, 10, 0],
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "线表计划",
|
|
|
type: "bar",
|
|
|
data: [34, 45, 67, 34, 45, 34, 12, 67, 34, 12, 34, 12],
|
|
|
markPoint: {
|
|
|
data: [
|
|
|
{
|
|
|
type: "max",
|
|
|
name: "Max",
|
|
|
label: {
|
|
|
show: true,
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
type: "min",
|
|
|
name: "Min",
|
|
|
label: {
|
|
|
show: true,
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
name: "月度计划",
|
|
|
type: "bar",
|
|
|
data: [34, 45, 67, 34, 12, 34, 45, 67, 34, 12, 34, 12],
|
|
|
markPoint: {
|
|
|
data: [
|
|
|
{
|
|
|
type: "max",
|
|
|
name: "Max",
|
|
|
label: {
|
|
|
show: true,
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
type: "min",
|
|
|
name: "Min",
|
|
|
label: {
|
|
|
show: true,
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", () => {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
},
|
|
|
finishBar() {
|
|
|
var myChart = this.$echarts.init(document.getElementById("FinishBar"));
|
|
|
|
|
|
var option = {
|
|
|
color: ["#2e7cff", "#1afffd"],
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
},
|
|
|
legend: {
|
|
|
data: ["线表计划", "月度计划"],
|
|
|
top: "5%",
|
|
|
textStyle: {
|
|
|
color: "#e9ebee",
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
left: "2%",
|
|
|
right: "2%",
|
|
|
bottom: "5%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
calculable: true,
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
data: this.monthList,
|
|
|
axisLabel: {
|
|
|
color: "#e4e4e4",
|
|
|
},
|
|
|
nameTextStyle: {
|
|
|
color: "#e4e4e4",
|
|
|
fontSize: 12,
|
|
|
padding: [0, 0, 0, 0],
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: "#064585",
|
|
|
// type: "dashed"
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
color: "#e4e4e4",
|
|
|
},
|
|
|
nameTextStyle: {
|
|
|
color: "#e4e4e4",
|
|
|
fontSize: 12,
|
|
|
padding: [0, 30, 10, 0],
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "线表计划",
|
|
|
type: "bar",
|
|
|
data: [34, 45, 67, 34, 45, 34, 12, 67, 34, 12, 34, 12],
|
|
|
markPoint: {
|
|
|
data: [
|
|
|
{
|
|
|
type: "max",
|
|
|
name: "Max",
|
|
|
label: {
|
|
|
show: true,
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
type: "min",
|
|
|
name: "Min",
|
|
|
label: {
|
|
|
show: true,
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
name: "月度计划",
|
|
|
type: "bar",
|
|
|
data: [34, 45, 67, 34, 12, 34, 45, 67, 34, 12, 34, 12],
|
|
|
markPoint: {
|
|
|
data: [
|
|
|
{
|
|
|
type: "max",
|
|
|
name: "Max",
|
|
|
label: {
|
|
|
show: true,
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
type: "min",
|
|
|
name: "Min",
|
|
|
label: {
|
|
|
show: true,
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", () => {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
},
|
|
|
drawingPie(ltValue, tzValue) {
|
|
|
var myChart = this.$echarts.init(document.getElementById("DrawingPie"));
|
|
|
var option = {
|
|
|
title: {
|
|
|
text: "来图与图纸分析",
|
|
|
left: "center",
|
|
|
bottom: "10%",
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 14,
|
|
|
fontWeight: "normal",
|
|
|
},
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|
|
},
|
|
|
color: ["#ff81cb", "#ff81cb"],
|
|
|
legend: {
|
|
|
show: true,
|
|
|
left: "center",
|
|
|
top: "10%",
|
|
|
textStyle: {
|
|
|
color: "#e9ebee",
|
|
|
},
|
|
|
itemWidth: 25,
|
|
|
itemHeight: 15,
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "来图与图纸分析",
|
|
|
type: "pie",
|
|
|
radius: "50%",
|
|
|
center: ["50%", "50%"],
|
|
|
minAngle: tzValue && tzValue ? 20 : "",
|
|
|
avoidLabelOverlap: true,
|
|
|
data: [
|
|
|
{ value: ltValue, name: "来图数量" },
|
|
|
{ value: tzValue, name: "图纸数量" },
|
|
|
],
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", () => {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
},
|
|
|
planFinishPie(jhValue, wcValue) {
|
|
|
var myChart = this.$echarts.init(
|
|
|
document.getElementById("PlanFinishPie")
|
|
|
);
|
|
|
|
|
|
var option = {
|
|
|
title: {
|
|
|
text: "计划与完成分析",
|
|
|
left: "center",
|
|
|
bottom: "10%",
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 14,
|
|
|
fontWeight: "normal",
|
|
|
},
|
|
|
},
|
|
|
color: ["#2e7cff", "#91cc75"],
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|
|
},
|
|
|
legend: {
|
|
|
show: true,
|
|
|
left: "center",
|
|
|
top: "10%",
|
|
|
textStyle: {
|
|
|
color: "#e9ebee",
|
|
|
},
|
|
|
itemWidth: 25,
|
|
|
itemHeight: 15,
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "计划与完成分析",
|
|
|
type: "pie",
|
|
|
radius: "50%",
|
|
|
center: ["50%", "50%"],
|
|
|
minAngle: wcValue && wcValue ? 20 : "",
|
|
|
avoidLabelOverlap: true,
|
|
|
data: [
|
|
|
{ value: jhValue, name: "计划重量" },
|
|
|
{ value: wcValue, name: "完成重量" },
|
|
|
],
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", () => {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
},
|
|
|
forwardDemandPie(xqValue, dhValue) {
|
|
|
var myChart = this.$echarts.init(
|
|
|
document.getElementById("ForwardDemandPie")
|
|
|
);
|
|
|
|
|
|
var option = {
|
|
|
title: {
|
|
|
text: "需求与订货分析",
|
|
|
left: "center",
|
|
|
bottom: "10%",
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 14,
|
|
|
fontWeight: "normal",
|
|
|
},
|
|
|
},
|
|
|
color: ["#ff5c58", "#06b8f8"],
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|
|
},
|
|
|
legend: {
|
|
|
show: true,
|
|
|
left: "center",
|
|
|
top: "10%",
|
|
|
textStyle: {
|
|
|
color: "#e9ebee",
|
|
|
},
|
|
|
itemWidth: 25,
|
|
|
itemHeight: 15,
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "需求与订货分析",
|
|
|
type: "pie",
|
|
|
radius: "50%",
|
|
|
center: ["50%", "50%"],
|
|
|
minAngle: dhValue && dhValue ? 20 : "",
|
|
|
avoidLabelOverlap: true,
|
|
|
data: [
|
|
|
{ value: xqValue, name: "需求重量" },
|
|
|
{ value: dhValue, name: "订货重量" },
|
|
|
],
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", () => {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
},
|
|
|
monthlyPlanPie(xqValue, jhValue) {
|
|
|
var myChart = this.$echarts.init(
|
|
|
document.getElementById("MonthlyPlanPie")
|
|
|
);
|
|
|
|
|
|
var option = {
|
|
|
title: {
|
|
|
text: "需求与月度计划分析",
|
|
|
left: "center",
|
|
|
bottom: "10%",
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 12,
|
|
|
fontWeight: "normal",
|
|
|
},
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|
|
},
|
|
|
color: ["#5470c6", "#ffcb89"],
|
|
|
legend: {
|
|
|
show: true,
|
|
|
left: "center",
|
|
|
top: "10%",
|
|
|
textStyle: {
|
|
|
color: "#e9ebee",
|
|
|
},
|
|
|
itemWidth: 25,
|
|
|
itemHeight: 15,
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "需求与月度计划分析",
|
|
|
type: "pie",
|
|
|
radius: "50%",
|
|
|
center: ["50%", "50%"],
|
|
|
minAngle: jhValue && jhValue ? 20 : "",
|
|
|
avoidLabelOverlap: true,
|
|
|
data: [
|
|
|
{ value: xqValue, name: "需求重量" },
|
|
|
{ value: jhValue, name: "计划重量" },
|
|
|
],
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", () => {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
},
|
|
|
finishPie(xqValue, wcValue) {
|
|
|
var myChart = this.$echarts.init(document.getElementById("FinishPie"));
|
|
|
var option = {
|
|
|
title: {
|
|
|
text: "需求与完成分析",
|
|
|
left: "center",
|
|
|
// left:"center",
|
|
|
bottom: "10%",
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 12,
|
|
|
fontWeight: "normal",
|
|
|
},
|
|
|
},
|
|
|
// color: ["#ff81cb", "#2865aa"],
|
|
|
color: ["#1afffd", "#2e7cff"],
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|
|
},
|
|
|
legend: {
|
|
|
show: true,
|
|
|
left: "center",
|
|
|
top: "10%",
|
|
|
textStyle: {
|
|
|
color: "#e9ebee",
|
|
|
},
|
|
|
itemWidth: 25,
|
|
|
itemHeight: 15,
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "需求与完成分析",
|
|
|
type: "pie",
|
|
|
radius: "50%",
|
|
|
center: ["50%", "50%"],
|
|
|
minAngle: wcValue && wcValue ? 20 : "",
|
|
|
minAngle: 20,
|
|
|
avoidLabelOverlap: true,
|
|
|
data: [
|
|
|
{ value: xqValue, name: "需求重量" },
|
|
|
{ value: wcValue, name: "完成重量" },
|
|
|
],
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", () => {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.monthPlan-container {
|
|
|
margin-top: 2%;
|
|
|
padding-left: 5px;
|
|
|
padding-right: 5px;
|
|
|
.monthPlan-box {
|
|
|
display: flex;
|
|
|
align-items: stretch;
|
|
|
height: calc(100vh - 85px);
|
|
|
.left-box {
|
|
|
width: 35%;
|
|
|
height: 100%;
|
|
|
.left-top-box {
|
|
|
.left-top-title {
|
|
|
width: 32%;
|
|
|
height: 24px;
|
|
|
background-image: url("@/assets/image/tit01s.png");
|
|
|
background-size: 100% 100%;
|
|
|
background-repeat: no-repeat;
|
|
|
margin: 0 auto;
|
|
|
font-size: 14px;
|
|
|
color: #ffffff;
|
|
|
text-align: center;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
.table-sum {
|
|
|
width: 96%;
|
|
|
margin-left: 2%;
|
|
|
margin-top: 2%;
|
|
|
border-collapse: collapse;
|
|
|
color: #ffffff;
|
|
|
.table-sum-title {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.table-sum-text {
|
|
|
font-weight: bold;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.left-bottom-box {
|
|
|
// border: 1px solid red;
|
|
|
.row-border {
|
|
|
color: #fff;
|
|
|
text-align: left;
|
|
|
font-size: 0.8rem;
|
|
|
.col-right-border {
|
|
|
height: 2rem;
|
|
|
line-height: 2rem;
|
|
|
text-align: center;
|
|
|
border-right: 1px solid #3490ba;
|
|
|
border-top: 1px solid #3490ba;
|
|
|
}
|
|
|
.col-right-border-text {
|
|
|
height: 2rem;
|
|
|
line-height: 2rem;
|
|
|
text-align: center;
|
|
|
border-top: 1px solid #3490ba;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.right-box {
|
|
|
width: 65%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
margin-left: 5px;
|
|
|
// 柱状图
|
|
|
.right-top-box {
|
|
|
height: 50%;
|
|
|
margin-bottom: 5px;
|
|
|
.right-top-title {
|
|
|
width: 32%;
|
|
|
height: 24px;
|
|
|
background-image: url("@/assets/image/tit01s.png");
|
|
|
background-size: 100% 100%;
|
|
|
background-repeat: no-repeat;
|
|
|
font-size: 14px;
|
|
|
color: #ffffff;
|
|
|
text-align: center;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
.row {
|
|
|
height: calc(100% - 24px);
|
|
|
.el-col-24 {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
|
|
|
.drawingBar,
|
|
|
.forwardDemandBar,
|
|
|
.monthlyPlanBar,
|
|
|
.finishBar {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
// 饼图
|
|
|
.right-bottom-box {
|
|
|
height: 50%;
|
|
|
.right-bottom-title {
|
|
|
width: 32%;
|
|
|
height: 24px;
|
|
|
background-image: url("@/assets/image/tit01s.png");
|
|
|
background-size: 100% 100%;
|
|
|
background-repeat: no-repeat;
|
|
|
font-size: 14px;
|
|
|
color: #ffffff;
|
|
|
text-align: center;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
.row {
|
|
|
height: calc(100% - 24px);
|
|
|
.el-col-4 {
|
|
|
height: 100%;
|
|
|
.drawingPie,
|
|
|
.forwardDemandPie,
|
|
|
.planFinishPie,
|
|
|
.monthlyPlanPie,
|
|
|
.finishPie {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.box-top {
|
|
|
margin-top: 5px;
|
|
|
}
|
|
|
|
|
|
.border-out {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
border-radius: 10px;
|
|
|
border: 1px #0174f5 solid;
|
|
|
padding: 1px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
.border-inner {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
box-sizing: border-box;
|
|
|
border: 2px solid #016ae0;
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
.border-inner {
|
|
|
background-color: rgba(2, 8, 23, 0.1);
|
|
|
}
|
|
|
}
|
|
|
</style>
|
