|
|
<template>
|
|
|
<!-- 垮位分析 -->
|
|
|
<div class="amphiPosition-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" placeholder="">
|
|
|
<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="amphiPosition-box">
|
|
|
<div class="left-box">
|
|
|
<div class="border-out">
|
|
|
<div class="border-inner">
|
|
|
<!-- 表格 -->
|
|
|
<div class="left-top-box">
|
|
|
<table class="table-sum">
|
|
|
<tr>
|
|
|
<td class="radius">月度计划总张数</td>
|
|
|
<td class="radius" colspan="3">{{ tableSumObj.zs }}张</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>上料张数</td>
|
|
|
<td colspan="3">{{ tableSumObj.sl }}张</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>跨位</td>
|
|
|
<td>作业区</td>
|
|
|
<td>计划张数</td>
|
|
|
<td>完成张数</td>
|
|
|
</tr>
|
|
|
<tr v-for="(item, index) in tableSumObj.detail" :key="index">
|
|
|
<td>{{ item.kw }}</td>
|
|
|
<td>{{ item.zyq }}</td>
|
|
|
<td>{{ item.sl }}张</td>
|
|
|
<td>{{ item.wc }}张</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
<div class="desc-title" style="margin-top: 2%">垮位汇总表</div>
|
|
|
</div>
|
|
|
<!-- 切割饼图 -->
|
|
|
<div class="left-center-box">
|
|
|
<div id="loaderPie" class="loaderPie"></div>
|
|
|
<div id="cutOnePie" class="cutOnePie"></div>
|
|
|
<div id="cutSecondPie" class="cutSecondPie"></div>
|
|
|
<div id="cutThreePie" class="cutThreePie"></div>
|
|
|
<div id="cutSumPie" class="cutSumPie"></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 上料及各做业务区柱状图 -->
|
|
|
<div class="left-bottom-box">
|
|
|
<div id="loaderBar" class="loaderBar"></div>
|
|
|
<div class="desc-title">各工作区完成计划工张数数据分析</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right-box">
|
|
|
<div class="border-out">
|
|
|
<div class="border-inner">
|
|
|
<!-- 折线图 -->
|
|
|
<div class="right-top-box">
|
|
|
<div id="TableLine" class="TableLine"></div>
|
|
|
<div class="desc-title">30天作业区完成情况</div>
|
|
|
</div>
|
|
|
<!-- 文字描述 -->
|
|
|
<div class="right-center-box">
|
|
|
<div class="right-center-title">
|
|
|
一区 计划：{{ tableConfigObj.jh }}张 到货检査：{{
|
|
|
tableConfigObj.jc
|
|
|
}}张 上料:{{ tableConfigObj.sl }}张
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 滚动列表 -->
|
|
|
<div class="right-bottom-box">
|
|
|
<dv-scroll-board ref="tableConfig" :config="tableConfig" />
|
|
|
<div class="desc-title">本日各作业区计划完成情况</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { zyjhzxTable, zyjhzx, today_zyjhzx } from "@/api/amphiPosition";
|
|
|
export default {
|
|
|
name: "AmphiPosition",
|
|
|
data() {
|
|
|
return {
|
|
|
formData: {
|
|
|
year: 2024,
|
|
|
},
|
|
|
tableSumObj: {},
|
|
|
tableConfig: {
|
|
|
header: ["作业区", "船号", "批量", "分段", "套料图号", "状态"],
|
|
|
data: [],
|
|
|
rowNum: 6,
|
|
|
align: ["center"],
|
|
|
headerHeight: 35,
|
|
|
headerBGC: "#063079",
|
|
|
oddRowBGC: "",
|
|
|
evenRowBGC: "#12264f",
|
|
|
},
|
|
|
tableConfigObj: {},
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
this.queryBtn();
|
|
|
},
|
|
|
methods: {
|
|
|
// 根据年份查询
|
|
|
queryBtn() {
|
|
|
this.zyjhzxTable(); //垮位汇总表
|
|
|
this.zyjhzx(); //30天作业区完成情况折线图
|
|
|
this.today_zyjhzx(); //本日各作业区计划完成情况
|
|
|
},
|
|
|
zyjhzxTable() {
|
|
|
zyjhzxTable({
|
|
|
nf: this.formData.nf,
|
|
|
}).then((res) => {
|
|
|
this.tableSumObj = res.data;
|
|
|
let wclOneValue = 0;
|
|
|
let wcOneValue = 0;
|
|
|
let slOneValue = 0;
|
|
|
let wclSecondValue = 0;
|
|
|
let wcSecondValue = 0;
|
|
|
let slSecondValue = 0;
|
|
|
let wclThreeValue = 0;
|
|
|
let wcThreeValue = 0;
|
|
|
let slThreeValue = 0;
|
|
|
let wclSumValue = 0;
|
|
|
let wcSumValue = 0;
|
|
|
let slSumValue = 0;
|
|
|
// =======
|
|
|
let zyq1 = 0;
|
|
|
let zyq2 = 0;
|
|
|
let zyq3 = 0;
|
|
|
let zyq4 = 0;
|
|
|
// 切割饼图
|
|
|
this.loaderPie(res.data.zs - res.data.sl, res.data.sl);
|
|
|
res.data.detail.forEach((item) => {
|
|
|
if (item.kw == "一垮") {
|
|
|
wcOneValue += item.wc;
|
|
|
wclOneValue = (slOneValue += item.sl) - wcOneValue;
|
|
|
this.cutOnePie(wclOneValue, wcOneValue);
|
|
|
} else if (item.kw == "二垮") {
|
|
|
wcSecondValue += item.wc;
|
|
|
wclSecondValue = (slSecondValue += item.sl) - wcSecondValue;
|
|
|
this.cutSecondPie(wclSecondValue, wcSecondValue);
|
|
|
} else if (item.kw == "三垮") {
|
|
|
wcThreeValue += item.wc;
|
|
|
wclThreeValue = (slThreeValue += item.sl) - wcThreeValue;
|
|
|
this.cutThreePie(wclThreeValue, wcThreeValue);
|
|
|
} else if (item.kw == "四五六垮") {
|
|
|
wcSumValue += item.wc;
|
|
|
wclSumValue = (slSumValue += item.sl) - wcSumValue;
|
|
|
this.cutSumPie(wclSumValue, wcSumValue);
|
|
|
}
|
|
|
// =================
|
|
|
if (item.zyq == "一区") {
|
|
|
zyq1 += item.sl;
|
|
|
} else if (item.zyq == "二区") {
|
|
|
zyq2 += item.sl;
|
|
|
} else if (item.zyq == "三区") {
|
|
|
zyq3 += item.sl;
|
|
|
} else if (item.zyq == "四区") {
|
|
|
zyq4 += item.sl;
|
|
|
}
|
|
|
});
|
|
|
let zyqDataY = [zyq1, zyq2, zyq3, zyq4];
|
|
|
var bgData = [res.data.zs, res.data.zs, res.data.zs, res.data.zs];
|
|
|
this.$nextTick(() => {
|
|
|
this.loaderBar(zyqDataY, bgData);
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
zyjhzx() {
|
|
|
zyjhzx({
|
|
|
nf: this.formData.nf,
|
|
|
}).then((res) => {
|
|
|
let dataX = []; // 当月所有日期
|
|
|
let dataDayX = []; //x轴
|
|
|
let legendData = ["一区", "二区", "三区", "四区", "五区", "六区"]; //设置所有作业区
|
|
|
let dataY = []; //所有作业区，设置30日数据起始值0
|
|
|
let seriesData = [];
|
|
|
let dateData = []; //设置30天--0
|
|
|
let zyqList = res.data.reduce((prev, current) => {
|
|
|
const key = current.zyq;
|
|
|
if (!prev[key]) {
|
|
|
prev[key] = [];
|
|
|
}
|
|
|
prev[key].push(current);
|
|
|
return prev;
|
|
|
}, {});
|
|
|
|
|
|
// 获取当月所有日期
|
|
|
dataX = this.getAllDatesOfCurrentMonth();
|
|
|
|
|
|
dataX.forEach((item, index) => {
|
|
|
dataDayX.push(item.slice(-2) + "日");
|
|
|
dataY.push({
|
|
|
day: item,
|
|
|
data: 0,
|
|
|
});
|
|
|
dateData.push(0);
|
|
|
});
|
|
|
|
|
|
// 循环数据
|
|
|
legendData.forEach((item, index) => {
|
|
|
let Y = JSON.parse(JSON.stringify(dataY));
|
|
|
seriesData[index] = [];
|
|
|
for (let i = 0; i < Y.length; i++) {
|
|
|
let arry1 = Y[i];
|
|
|
if (zyqList[item]) {
|
|
|
let arry2 = zyqList[item].find((item) => item.day === arry1.day);
|
|
|
if (arry2) {
|
|
|
arry1.data = arry2.sl;
|
|
|
}
|
|
|
seriesData[index] = Y;
|
|
|
} else {
|
|
|
seriesData[index] = [];
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
let Arr = [];
|
|
|
seriesData.forEach((item, index) => {
|
|
|
Arr[index] = [];
|
|
|
if (item && item.length > 0) {
|
|
|
item.forEach((em) => {
|
|
|
Arr[index].push(em.data ? em.data : 0);
|
|
|
});
|
|
|
} else {
|
|
|
Arr[index] = dateData;
|
|
|
}
|
|
|
});
|
|
|
// 折线图
|
|
|
this.TableLine(dataDayX, Arr);
|
|
|
});
|
|
|
},
|
|
|
today_zyjhzx() {
|
|
|
today_zyjhzx({
|
|
|
nf: this.formData.nf,
|
|
|
}).then((res) => {
|
|
|
this.tableConfigObj = res.data;
|
|
|
let data = [];
|
|
|
if (res.data.detail.length) {
|
|
|
res.data.detail.forEach((item, index) => {
|
|
|
data.push({
|
|
|
zyq: item.zyq,
|
|
|
dcCh: item.dcCh,
|
|
|
dcPl: item.dcPl,
|
|
|
dcFd: item.dcFd,
|
|
|
tzbh: item.tzbh,
|
|
|
zt: item.zt,
|
|
|
});
|
|
|
});
|
|
|
let valueArray = data.map((obj) => Object.values(obj));
|
|
|
this.$nextTick(() => {
|
|
|
this.$refs["tableConfig"].updateRows(valueArray);
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
loaderPie(wclValue, wcValue) {
|
|
|
var myChart = this.$echarts.init(document.getElementById("loaderPie"));
|
|
|
var option = {
|
|
|
title: {
|
|
|
text: "上料分析",
|
|
|
left: "center",
|
|
|
bottom: 0,
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 12,
|
|
|
fontWeight: "normal",
|
|
|
},
|
|
|
},
|
|
|
color: ["#91cc75", "#5470c6"],
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|
|
},
|
|
|
legend: {
|
|
|
left: "center",
|
|
|
textStyle: {
|
|
|
color: "#e9ebee",
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "上料",
|
|
|
type: "pie",
|
|
|
radius: "60%",
|
|
|
center: ["50%", "50%"],
|
|
|
minAngle: wcValue && wclValue ? 20 : "",
|
|
|
avoidLabelOverlap: true,
|
|
|
data: [
|
|
|
{ value: wcValue, name: "完成" },
|
|
|
{ value: wclValue, name: "未完成" },
|
|
|
],
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
|
shadowBlur: 10,
|
|
|
shadowOffsetX: 0,
|
|
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", () => {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
},
|
|
|
cutOnePie(wclOneValue, wcOneValue) {
|
|
|
var myChart = this.$echarts.init(document.getElementById("cutOnePie"));
|
|
|
|
|
|
var option = {
|
|
|
title: {
|
|
|
text: "一垮分析",
|
|
|
left: "center",
|
|
|
bottom: 0,
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 12,
|
|
|
fontWeight: "normal",
|
|
|
},
|
|
|
},
|
|
|
color: ["#91cc75", "#fac858"],
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|
|
},
|
|
|
legend: {
|
|
|
show: false,
|
|
|
left: "center",
|
|
|
textStyle: {
|
|
|
color: "#e9ebee",
|
|
|
},
|
|
|
itemWidth: 20,
|
|
|
itemHeight: 12,
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "一垮",
|
|
|
type: "pie",
|
|
|
radius: "60%",
|
|
|
center: ["50%", "50%"],
|
|
|
minAngle: wcOneValue && wclOneValue ? 20 : "",
|
|
|
avoidLabelOverlap: true,
|
|
|
data: [
|
|
|
{ value: wcOneValue, name: "完成" },
|
|
|
{ value: wclOneValue, name: "未完成" },
|
|
|
],
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
|
shadowBlur: 10,
|
|
|
shadowOffsetX: 0,
|
|
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", () => {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
},
|
|
|
cutSecondPie(wclSecondValue, wcSecondValue) {
|
|
|
var myChart = this.$echarts.init(document.getElementById("cutSecondPie"));
|
|
|
|
|
|
var option = {
|
|
|
title: {
|
|
|
text: "二垮分析",
|
|
|
left: "center",
|
|
|
bottom: 0,
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 12,
|
|
|
fontWeight: "normal",
|
|
|
},
|
|
|
},
|
|
|
color: ["#fac858", "#ee6666"],
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|
|
},
|
|
|
legend: {
|
|
|
show: false,
|
|
|
left: "center",
|
|
|
textStyle: {
|
|
|
color: "#e9ebee",
|
|
|
},
|
|
|
itemWidth: 20,
|
|
|
itemHeight: 12,
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "二垮",
|
|
|
type: "pie",
|
|
|
radius: "60%",
|
|
|
center: ["50%", "50%"],
|
|
|
minAngle: wcSecondValue && wclSecondValue ? 20 : "",
|
|
|
avoidLabelOverlap: true,
|
|
|
data: [
|
|
|
{ value: wcSecondValue, name: "完成" },
|
|
|
{ value: wclSecondValue, name: "未完成" },
|
|
|
],
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
|
shadowBlur: 10,
|
|
|
shadowOffsetX: 0,
|
|
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", () => {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
},
|
|
|
cutThreePie(wclThreeValue, wcThreeValue) {
|
|
|
var myChart = this.$echarts.init(document.getElementById("cutThreePie"));
|
|
|
|
|
|
var option = {
|
|
|
title: {
|
|
|
text: "三垮分析",
|
|
|
left: "center",
|
|
|
bottom: 0,
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 12,
|
|
|
fontWeight: "normal",
|
|
|
},
|
|
|
},
|
|
|
color: ["#1afffd", "#2e7cff"],
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|
|
},
|
|
|
legend: {
|
|
|
show: false,
|
|
|
left: "center",
|
|
|
textStyle: {
|
|
|
color: "#e9ebee",
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "三垮",
|
|
|
type: "pie",
|
|
|
radius: "60%",
|
|
|
center: ["50%", "50%"],
|
|
|
minAngle: wcThreeValue && wclThreeValue ? 20 : "",
|
|
|
data: [
|
|
|
{ value: wcThreeValue, name: "完成" },
|
|
|
{ value: wclThreeValue, name: "未完成" },
|
|
|
],
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
|
shadowBlur: 10,
|
|
|
shadowOffsetX: 0,
|
|
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", () => {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
},
|
|
|
cutSumPie(wclSumValue, wcSumValue) {
|
|
|
var myChart = this.$echarts.init(document.getElementById("cutSumPie"));
|
|
|
|
|
|
var option = {
|
|
|
title: {
|
|
|
text: "四五六垮",
|
|
|
left: "center",
|
|
|
bottom: 0,
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 12,
|
|
|
fontWeight: "normal",
|
|
|
},
|
|
|
},
|
|
|
color: ["#ff81cb", "#2865aa"],
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|
|
},
|
|
|
legend: {
|
|
|
left: "center",
|
|
|
textStyle: {
|
|
|
color: "#e9ebee",
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "四五六垮",
|
|
|
type: "pie",
|
|
|
radius: "60%",
|
|
|
center: ["50%", "50%"],
|
|
|
minAngle: wcSumValue && wclSumValue ? 20 : "",
|
|
|
data: [
|
|
|
{ value: wcSumValue, name: "完成" },
|
|
|
{ value: wclSumValue, name: "未完成" },
|
|
|
],
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
|
shadowBlur: 10,
|
|
|
shadowOffsetX: 0,
|
|
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", () => {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
},
|
|
|
loaderBar(zyqDataY, bgData) {
|
|
|
var myChart = this.$echarts.init(document.getElementById("loaderBar"));
|
|
|
var option = {
|
|
|
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].seriesName +
|
|
|
"：" +
|
|
|
params[1].value;
|
|
|
return res;
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
top: "10%",
|
|
|
left: "3%",
|
|
|
right: "3%",
|
|
|
bottom: "0",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
data: ["一区", "二区", "三区", "四区"],
|
|
|
axisLabel: {
|
|
|
color: "#e4e4e4",
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
color: "#e4e4e4",
|
|
|
},
|
|
|
data: zyqDataY,
|
|
|
},
|
|
|
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: "#1afffd",
|
|
|
},
|
|
|
data: zyqDataY, // 载入数据(内含自定义参数)
|
|
|
z: 1,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", () => {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
},
|
|
|
TableLine(dataX, Arr) {
|
|
|
var myChart = this.$echarts.init(document.getElementById("TableLine"));
|
|
|
|
|
|
var option = {
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
},
|
|
|
color: [
|
|
|
"#e15828",
|
|
|
"#2e7cff",
|
|
|
"#00c0ef",
|
|
|
"#5470c6",
|
|
|
"#ffcb89",
|
|
|
"#3ba272",
|
|
|
],
|
|
|
legend: {
|
|
|
top: "5%",
|
|
|
textStyle: {
|
|
|
color: "#e9ebee",
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
left: "2%",
|
|
|
right: "2%",
|
|
|
top: "20%",
|
|
|
bottom: "3%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
boundaryGap: false,
|
|
|
data: dataX,
|
|
|
axisLabel: {
|
|
|
color: "#e4e4e4",
|
|
|
},
|
|
|
nameTextStyle: {
|
|
|
color: "#e4e4e4",
|
|
|
fontSize: 12,
|
|
|
padding: [0, 0, 0, 0],
|
|
|
},
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: "#064585",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
color: "#e4e4e4",
|
|
|
},
|
|
|
nameTextStyle: {
|
|
|
color: "#e4e4e4",
|
|
|
fontSize: 12,
|
|
|
padding: [0, 40, 10, 0],
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "一区",
|
|
|
type: "line",
|
|
|
data: Arr[0],
|
|
|
},
|
|
|
{
|
|
|
name: "二区",
|
|
|
type: "line",
|
|
|
data: Arr[1],
|
|
|
},
|
|
|
{
|
|
|
name: "三区",
|
|
|
type: "line",
|
|
|
data: Arr[2],
|
|
|
},
|
|
|
{
|
|
|
name: "四区",
|
|
|
type: "line",
|
|
|
data: Arr[3],
|
|
|
},
|
|
|
{
|
|
|
name: "五区",
|
|
|
type: "line",
|
|
|
data: Arr[4],
|
|
|
},
|
|
|
{
|
|
|
name: "六区",
|
|
|
type: "line",
|
|
|
data: Arr[5],
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", () => {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
},
|
|
|
getAllDatesOfCurrentMonth() {
|
|
|
const today = new Date();
|
|
|
const firstDayOfMonth = new Date(
|
|
|
today.getFullYear(),
|
|
|
today.getMonth(),
|
|
|
1
|
|
|
);
|
|
|
const lastDayOfMonth = new Date(
|
|
|
today.getFullYear(),
|
|
|
today.getMonth() + 1,
|
|
|
0
|
|
|
);
|
|
|
const dates = [];
|
|
|
|
|
|
for (
|
|
|
let i = firstDayOfMonth;
|
|
|
i <= lastDayOfMonth;
|
|
|
i.setDate(i.getDate() + 1)
|
|
|
) {
|
|
|
dates.push(this.$moment(new Date(i)).format("yyyy/MM/DD"));
|
|
|
}
|
|
|
|
|
|
return dates;
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.amphiPosition-container {
|
|
|
margin-top: 10px;
|
|
|
padding-left: 5px;
|
|
|
padding-right: 5px;
|
|
|
.amphiPosition-box {
|
|
|
display: flex;
|
|
|
align-items: stretch;
|
|
|
height: calc(100vh - 105px);
|
|
|
.left-box {
|
|
|
width: 45%;
|
|
|
height: 100%;
|
|
|
margin-right: 5px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
.left-top-box {
|
|
|
width: 100%;
|
|
|
height: 31%;
|
|
|
.table-sum {
|
|
|
width: 100%;
|
|
|
border-collapse: collapse;
|
|
|
color: #ffffff;
|
|
|
.radius {
|
|
|
border-top-left-radius: 10px;
|
|
|
}
|
|
|
}
|
|
|
.table-sum tr td {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
// 饼图
|
|
|
.left-center-box {
|
|
|
width: 100%;
|
|
|
height: 33%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
.loaderPie,
|
|
|
.cutOnePie,
|
|
|
.cutSecondPie,
|
|
|
.cutThreePie,
|
|
|
.cutSumPie {
|
|
|
width: 100%;
|
|
|
height: 90%;
|
|
|
}
|
|
|
}
|
|
|
// 上料各作业区柱状图
|
|
|
.left-bottom-box {
|
|
|
height: 33%;
|
|
|
padding-top: 2%;
|
|
|
.loaderBar {
|
|
|
height: 80%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.right-box {
|
|
|
width: 55%;
|
|
|
height: 100%;
|
|
|
// 折线图
|
|
|
.right-top-box {
|
|
|
height: 45%;
|
|
|
.TableLine {
|
|
|
width: 100%;
|
|
|
height: 90%;
|
|
|
}
|
|
|
}
|
|
|
.right-center-box {
|
|
|
margin-top: 2%;
|
|
|
margin-bottom: 3%;
|
|
|
.right-center-title {
|
|
|
color: #fff;
|
|
|
text-align: center;
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
// 滚动表格
|
|
|
.right-bottom-box {
|
|
|
height: 37%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
// 共用
|
|
|
.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;
|
|
|
background-color: rgba(2, 8, 23, 0.54);
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.box-top {
|
|
|
margin-top: 5px;
|
|
|
}
|
|
|
.desc-title {
|
|
|
color: #fff;
|
|
|
text-align: center;
|
|
|
margin-top: 2vh;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
