You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
621 lines
16 KiB
621 lines
16 KiB
<template>
|
|
<!-- 前方需求情况 -->
|
|
<div class="forwardDemand-container">
|
|
<!-- 筛选 -->
|
|
<!-- <div class="formData-box">
|
|
<el-form ref="form" :model="formData" label-width="90px">
|
|
<el-form-item label="请选择年份" size="mini">
|
|
<el-select v-model="formData.year">
|
|
<el-option label="2024" :value="2024"></el-option>
|
|
<el-option label="2025" :value="2025"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="query-btn" @click="queryBtn">检索</div>
|
|
</div>-->
|
|
<div class="forwardDemand-box">
|
|
<div class="left-box">
|
|
<div class="border-out">
|
|
<div class="border-inner">
|
|
<div class="left-top-title">需求计划情况</div>
|
|
<!-- 表格 -->
|
|
<div class="left-top-box">
|
|
<el-row class="sum-border">
|
|
<el-col :span="7" class="col-right-border">需求总量</el-col>
|
|
<el-col :span="17" class="col-right-border-text green"
|
|
>{{ rowObj.xq }}吨</el-col
|
|
>
|
|
</el-row>
|
|
<vue-seamless-scroll
|
|
:data="tableList"
|
|
:class-option="classOption"
|
|
class="warp-box"
|
|
:class="
|
|
tableList.length == 1
|
|
? 'warp-box-1'
|
|
: tableList.length == 2
|
|
? 'warp-box-2'
|
|
: ''
|
|
"
|
|
>
|
|
<el-row
|
|
class="row-border"
|
|
v-for="(item, index) in tableList"
|
|
:key="index"
|
|
ref="refHeight"
|
|
>
|
|
<el-col :span="3" class="col-right-border">船号</el-col>
|
|
<el-col :span="4" class="col-right-border">{{
|
|
item.dcCh
|
|
}}</el-col>
|
|
<el-col :span="4" class="col-right-border">批次数量</el-col>
|
|
<el-col :span="5" class="col-right-border"
|
|
>{{ item.pcsl }} 张</el-col
|
|
>
|
|
<el-col :span="3" class="col-right-border">重量</el-col>
|
|
<el-col :span="5" class="col-right-border-text"
|
|
>{{ hasDot(item.zl) }} 吨</el-col
|
|
>
|
|
</el-row>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
<!-- 需求、计划柱状图 -->
|
|
<div class="left-bottom-box">
|
|
<div id="TableBar" class="TableBar"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-box">
|
|
<div class="border-out">
|
|
<div class="border-inner">
|
|
<div class="right-top-title">需求与生产情况</div>
|
|
<div class="right-top-box">
|
|
<div class="table-text">
|
|
<div>
|
|
<span class="span1">前方需求</span>
|
|
<span class="span2-orage">{{ hasDot(xqzlSum) }}吨</span>
|
|
</div>
|
|
<div>
|
|
<span class="span1">月度计划</span>
|
|
<span class="span2-orage">{{ hasDot(jhzlSum) }}吨</span>
|
|
</div>
|
|
<div>
|
|
<span class="span1">完工总量</span>
|
|
<span class="span2-red">{{ hasDot(wczlSum) }}吨</span>
|
|
</div>
|
|
<div>
|
|
<span class="span1">需求与计划百分比</span>
|
|
<span class="span2-green">{{
|
|
xqzlSum && jhzlSum
|
|
? ((jhzlSum / xqzlSum) * 100).toFixed(2) + "%"
|
|
: "0%"
|
|
}}</span>
|
|
</div>
|
|
<div>
|
|
<span class="span1">需求与完成百分比</span>
|
|
<span class="span2-green">{{
|
|
xqzlSum && wczlSum
|
|
? ((wczlSum / xqzlSum) * 100).toFixed(2) + "%"
|
|
: "0%"
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 需求、计划、完成柱状图 -->
|
|
<div class="right-bottom-box">
|
|
<div id="ShipBar" class="ShipBar"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { qfxqTable, qfxqWc } from "@/api/forwardDemand";
|
|
import VueSeamlessScroll from "vue-seamless-scroll";
|
|
import { hasDot } from "@/utils/tool";
|
|
export default {
|
|
name: "ForwardDemand",
|
|
components: {
|
|
VueSeamlessScroll,
|
|
},
|
|
data() {
|
|
return {
|
|
hasDot,
|
|
formData: {
|
|
year: 2024,
|
|
},
|
|
// 1.前方需求汇总表
|
|
tableList: [],
|
|
classOption: {
|
|
step: 1,
|
|
singleHeight: 0,
|
|
waitTime: 500,
|
|
},
|
|
// 3. 需求与生产情况文本
|
|
rowObj: {},
|
|
xqzlSum: 0,
|
|
jhzlSum: 0,
|
|
wczlSum: 0,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.queryBtn();
|
|
},
|
|
methods: {
|
|
// 根据年份查询
|
|
queryBtn() {
|
|
this.qfxqTable();
|
|
this.qfxqWc();
|
|
},
|
|
// 1.前方需求汇总表
|
|
qfxqTable() {
|
|
qfxqTable({
|
|
nf: this.formData.year,
|
|
}).then((res) => {
|
|
this.tableList = res.data.detail;
|
|
res.data.xq=res.data.xq?parseInt(res.data.xq).toFixed(0):'0'
|
|
this.xqzlSum=res.data.xq
|
|
this.rowObj = res.data;
|
|
this.$nextTick(() => {
|
|
const elementHeight = this.$refs.refHeight;
|
|
elementHeight.forEach((li, index) => {
|
|
this.classOption.singleHeight = li.$el.offsetHeight;
|
|
});
|
|
});
|
|
});
|
|
},
|
|
// 2.4.柱状图 3.计算
|
|
qfxqWc() {
|
|
qfxqWc({
|
|
nf: this.formData.year,
|
|
}).then((res) => {
|
|
let dataX = [];
|
|
let dataJhzlY = [];
|
|
let dataWczlY = [];
|
|
let dataXqzlY = [];
|
|
// this.xqzlSum = 0;
|
|
this.jhzlSum = 0;
|
|
this.wczlSum = 0;
|
|
res.data.forEach((item) => {
|
|
dataX.push(item.dc_ch);
|
|
dataJhzlY.push(item.jhzl);
|
|
dataWczlY.push(item.wczl);
|
|
dataXqzlY.push(item.xqzl);
|
|
// this.xqzlSum += item.xqzl;
|
|
this.jhzlSum += item.jhzl;
|
|
this.wczlSum += item.wczl;
|
|
});
|
|
|
|
// 按船只划分重量柱状图
|
|
this.TableBar(dataX, dataXqzlY, dataJhzlY);
|
|
// 按船只月度计划--完成总量柱状图
|
|
this.ShipBar(dataX, dataXqzlY, dataJhzlY, dataWczlY);
|
|
});
|
|
},
|
|
TableBar(dataX, dataXqzlY, dataJhzlY) {
|
|
var myChart = this.$echarts.init(document.getElementById("TableBar"));
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
legend: {
|
|
top: "",
|
|
textStyle: {
|
|
color: "#e9ebee",
|
|
},
|
|
right: "2%",
|
|
orient: "vertical",
|
|
},
|
|
grid: {
|
|
left: "2%",
|
|
right: "4%",
|
|
top: "2%",
|
|
bottom: "3%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: dataX,
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: "#e4e4e4",
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: "#e4e4e4",
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "需求重量",
|
|
type: "bar",
|
|
data: dataXqzlY,
|
|
itemStyle: {
|
|
color: "#5470c6",
|
|
},
|
|
},
|
|
{
|
|
name: "计划重量",
|
|
type: "bar",
|
|
data: dataJhzlY,
|
|
itemStyle: {
|
|
color: "#fac858",
|
|
},
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", () => {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
ShipBar(dataX, dataXqzlY, dataJhzlY, dataWczlY) {
|
|
var myChart = this.$echarts.init(document.getElementById("ShipBar"));
|
|
|
|
var option = {
|
|
title: {
|
|
text: "需求和计划以及完工重量情况",
|
|
left: "center",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 20,
|
|
},
|
|
padding: [40, 0, 0, 0],
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
legend: {
|
|
top: "15%",
|
|
textStyle: {
|
|
color: "#e9ebee",
|
|
},
|
|
right: "2%",
|
|
orient: "vertical",
|
|
},
|
|
grid: {
|
|
top: "15%",
|
|
left: "2%",
|
|
right: "4%",
|
|
bottom: "1%",
|
|
containLabel: true,
|
|
},
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: dataX,
|
|
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, 0, 10, 0],
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "需求重量",
|
|
type: "bar",
|
|
data: dataXqzlY,
|
|
itemStyle: {
|
|
color: "#5470c6",
|
|
},
|
|
markPoint: {
|
|
data: [
|
|
{
|
|
type: "max",
|
|
name: "最大值",
|
|
label: {
|
|
show: true,
|
|
color: "#fff",
|
|
},
|
|
},
|
|
{
|
|
type: "min",
|
|
name: "最小值",
|
|
label: {
|
|
show: true,
|
|
color: "#fff",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
markLine: {
|
|
data: [{ type: "average", name: "平均值" }],
|
|
},
|
|
},
|
|
{
|
|
name: "计划重量",
|
|
type: "bar",
|
|
data: dataJhzlY,
|
|
itemStyle: {
|
|
color: "#fac858",
|
|
},
|
|
markPoint: {
|
|
data: [
|
|
{
|
|
type: "max",
|
|
name: "最大值",
|
|
label: {
|
|
show: true,
|
|
color: "#fff",
|
|
},
|
|
},
|
|
{
|
|
type: "min",
|
|
name: "最小值",
|
|
label: {
|
|
show: true,
|
|
color: "#fff",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
markLine: {
|
|
data: [{ type: "average", name: "平均值" }],
|
|
},
|
|
},
|
|
{
|
|
name: "完工重量",
|
|
type: "bar",
|
|
data: dataWczlY,
|
|
itemStyle: {
|
|
color: "#91cc75",
|
|
},
|
|
markPoint: {
|
|
data: [
|
|
{
|
|
type: "max",
|
|
name: "最大值",
|
|
label: {
|
|
show: true,
|
|
color: "#fff",
|
|
},
|
|
},
|
|
{
|
|
type: "min",
|
|
name: "最小值",
|
|
label: {
|
|
show: true,
|
|
color: "#fff",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
markLine: {
|
|
data: [{ type: "average", name: "平均值" }],
|
|
},
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", () => {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.forwardDemand-container {
|
|
margin-top: 50px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
.forwardDemand-box {
|
|
display: flex;
|
|
align-items: stretch;
|
|
height: calc(100vh - 105px);
|
|
// 需求计划情况
|
|
.left-box {
|
|
width: 30%;
|
|
height: 100%;
|
|
margin-right: 5px;
|
|
|
|
.left-top-title {
|
|
width: 32%;
|
|
height: 22px;
|
|
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;
|
|
}
|
|
.left-top-box {
|
|
height: 22.1%;
|
|
margin: 3% 2% 2% 2%;
|
|
.sum-border {
|
|
border: 1px solid #3490ba;
|
|
color: #fff;
|
|
font-size: 0.8rem;
|
|
.col-right-border {
|
|
height: 2.5rem;
|
|
line-height: 2.5rem;
|
|
text-align: center;
|
|
border-right: 1px solid #3490ba;
|
|
}
|
|
.col-right-border-text {
|
|
height: 2.5rem;
|
|
line-height: 2.5rem;
|
|
text-align: center;
|
|
}
|
|
.green {
|
|
color: #4cae4c;
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
.warp-box {
|
|
height: 6rem;
|
|
overflow: hidden;
|
|
border-left: 1px solid #3490ba;
|
|
border-right: 1px solid #3490ba;
|
|
border-bottom: 1px solid #3490ba;
|
|
}
|
|
.warp-box-1 {
|
|
height: 2rem;
|
|
}
|
|
.warp-box-2 {
|
|
height: 4rem;
|
|
}
|
|
// .warp-box-3 {
|
|
// height: 6rem;
|
|
// }
|
|
// .warp-box-4 {
|
|
// height: 8rem;
|
|
// }
|
|
.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: right;
|
|
padding-right: 10px;
|
|
padding-left: 10px;
|
|
border-top: 1px solid #3490ba;
|
|
}
|
|
}
|
|
}
|
|
.left-bottom-box {
|
|
height: 71%;
|
|
.TableBar {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.right-box {
|
|
width: 70%;
|
|
height: 100%;
|
|
.right-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;
|
|
}
|
|
// 需求与生产情况
|
|
.right-top-box {
|
|
height: 8%;
|
|
padding: 1% 1% 2% 1%;
|
|
.table-text {
|
|
height: 100%;
|
|
border: 1px solid #5bc0de;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 10px;
|
|
.span1 {
|
|
color: #ffffff;
|
|
font-size: 1.25rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
.span2-orage {
|
|
font-size: 1.25rem;
|
|
color: #feb602;
|
|
}
|
|
.span2-green {
|
|
font-size: 1.25rem;
|
|
color: #4cae4c;
|
|
}
|
|
.span2-red {
|
|
font-size: 1.25rem;
|
|
color: #e9230d;
|
|
}
|
|
}
|
|
}
|
|
.right-bottom-box {
|
|
height: 82%;
|
|
.ShipBar {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 共用
|
|
.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;
|
|
}
|
|
.box-top {
|
|
margin-top: 5px;
|
|
}
|
|
.border-out {
|
|
height: 100%;
|
|
.border-inner {
|
|
height: 100%;
|
|
background-color: rgba(2, 8, 23, 0.1);
|
|
}
|
|
}
|
|
}
|
|
</style>
|