fix：玻纤车间看板布局页面
This commit is contained in:
parent
7141116c43
commit
b8ec85f85f
|
|
@ -0,0 +1,672 @@
|
||||||
|
<template>
|
||||||
|
<el-container class="dashboard">
|
||||||
|
<el-header class="header">
|
||||||
|
<div class="title">车间看板</div>
|
||||||
|
<div class="timer">{{ currentDay }} {{ currentTime }}</div>
|
||||||
|
</el-header>
|
||||||
|
<el-main>
|
||||||
|
<el-row style="margin-bottom: 1vh;">
|
||||||
|
<el-col :span="3" class="numBlock">
|
||||||
|
<dv-border-box-12>
|
||||||
|
<div class="numBlock_title">本月产量</div>
|
||||||
|
<div class="numBlock_value">123</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="3" class="numBlock">
|
||||||
|
<dv-border-box-12>
|
||||||
|
<div class="numBlock_title">今日产量</div>
|
||||||
|
<div class="numBlock_value">123</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="3" class="numBlock">
|
||||||
|
<dv-border-box-12>
|
||||||
|
<div class="numBlock_title">今日工序报工量</div>
|
||||||
|
<div class="numBlock_value">123</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="3" class="numBlock">
|
||||||
|
<dv-border-box-12>
|
||||||
|
<div class="numBlock_title">在产产品数</div>
|
||||||
|
<div class="numBlock_value">123</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="3" class="numBlock">
|
||||||
|
<dv-border-box-12>
|
||||||
|
<div class="numBlock_title">本月完工工单</div>
|
||||||
|
<div class="numBlock_value">123</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="3" class="numBlock">
|
||||||
|
<dv-border-box-12>
|
||||||
|
<div class="numBlock_title">本月计划产量</div>
|
||||||
|
<div class="numBlock_value">123</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="3" class="numBlock">
|
||||||
|
<dv-border-box-12>
|
||||||
|
<div class="numBlock_title">本月产量</div>
|
||||||
|
<div class="numBlock_value">123</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="3" class="numBlock">
|
||||||
|
<dv-border-box-12>
|
||||||
|
<div class="numBlock_title">本月产量</div>
|
||||||
|
<div class="numBlock_value">123</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="6">
|
||||||
|
<div class="leftBlock">
|
||||||
|
<el-row style="margin-bottom: 1vh;">
|
||||||
|
<el-col :span="12" class="numBlock">
|
||||||
|
<dv-border-box-12>
|
||||||
|
<div class="numBlock_title">在制工序数</div>
|
||||||
|
<div class="numBlock_value">123</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="numBlock">
|
||||||
|
<dv-border-box-12>
|
||||||
|
<div class="numBlock_title">今日完成工序</div>
|
||||||
|
<div class="numBlock_value">123</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<div style="height: 34vh;position: relative;">
|
||||||
|
<dv-border-box-1>
|
||||||
|
<div class="chartBlockTitle">工序统计</div>
|
||||||
|
<dv-capsule-chart :config="config_left1" class="leftChartBlock1"/>
|
||||||
|
</dv-border-box-1>
|
||||||
|
</div>
|
||||||
|
<div style="height: 34vh;">
|
||||||
|
<dv-border-box-1>
|
||||||
|
<div class="chartBlockTitle">工序统计</div>
|
||||||
|
<dv-active-ring-chart :config="config_left2" class="leftChartBlock2"/>
|
||||||
|
</dv-border-box-1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="middleBlock">
|
||||||
|
<div style="height: 38vh;">
|
||||||
|
<dv-border-box-1>
|
||||||
|
<div class="chartBlockTitle">工序统计</div>
|
||||||
|
<dv-scroll-board :config="config_middle_top" class="middleTableBlock1"/>
|
||||||
|
</dv-border-box-1>
|
||||||
|
</div>
|
||||||
|
<div style="height: 41vh;">
|
||||||
|
<dv-border-box-1>
|
||||||
|
<div class="chartBlockTitle">工序统计</div>
|
||||||
|
<dv-scroll-board :config="config_middle_bottom" class="middleTableBlock2"/>
|
||||||
|
</dv-border-box-1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<div class="rightBlock">
|
||||||
|
<el-row style="margin-bottom: 1vh;">
|
||||||
|
<el-col :span="12" class="numBlock">
|
||||||
|
<dv-border-box-12>
|
||||||
|
<div class="numBlock_title">在制工单数</div>
|
||||||
|
<div class="numBlock_value">123</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="numBlock">
|
||||||
|
<dv-border-box-12>
|
||||||
|
<div class="numBlock_title">本月交付数</div>
|
||||||
|
<div class="numBlock_value">123</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<div style="height: 34vh;">
|
||||||
|
<dv-border-box-1>
|
||||||
|
<div class="chartBlockTitle">工序统计</div>
|
||||||
|
<scEcharts :option="chartOption1" style="height: 27.5vh;width: 90%;left: 5%;"/>
|
||||||
|
</dv-border-box-1>
|
||||||
|
</div>
|
||||||
|
<div style="height: 34vh;">
|
||||||
|
<dv-border-box-1>
|
||||||
|
<div class="chartBlockTitle">工序统计</div>
|
||||||
|
<scEcharts :option="chartOption2" style="height: 27.5vh;width: 90%;left: 5%;"/>
|
||||||
|
</dv-border-box-1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import scScrollTavle from "@/components/scScrollTable.vue";
|
||||||
|
function deepCopy(obj) {
|
||||||
|
return JSON.parse(JSON.stringify(obj));
|
||||||
|
}
|
||||||
|
const myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
|
||||||
|
export default {
|
||||||
|
components: { scScrollTavle },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
basicOption: {
|
||||||
|
backgroundColor: "",
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
icon: "stack",
|
||||||
|
right: 0,
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "3%",
|
||||||
|
right: "2%",
|
||||||
|
bottom: "3%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
boundaryGap: true,
|
||||||
|
data: [],
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: "",
|
||||||
|
type: "value",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 30,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: "top",
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: [5, 5, 0, 0],
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{offset: 0,color: "#00aaff"},
|
||||||
|
{offset: 1,color: "#0033ff"},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
data: [1,2,3,4,5,6,7],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
chartOption1:{
|
||||||
|
color: ['#2f89cf'],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "0%",
|
||||||
|
top: "10px",
|
||||||
|
right: "0%",
|
||||||
|
bottom: "4%",
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], // 类目数据
|
||||||
|
axisTick: {
|
||||||
|
alignWithLabel: true // 刻度线与标签对齐
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "rgba(255,255,255,.6)",
|
||||||
|
fontSize: "8",
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
color: "rgba(255,255,255,.6)",
|
||||||
|
fontSize: "12"
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(255,255,255,.1)",
|
||||||
|
width: 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(255,255,255,.1)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 系列配置
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Direct',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '35%',
|
||||||
|
data: [200, 300, 300, 900, 1500, 1200, 600],
|
||||||
|
itemStyle: {
|
||||||
|
barBorderRadius: 5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
chartOption2: {
|
||||||
|
grid: {
|
||||||
|
top: "10%",
|
||||||
|
left: "10%",
|
||||||
|
bottom: "5%",
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
// show: false
|
||||||
|
splitLine: {
|
||||||
|
show:false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// Y 轴配置，包含两个 Y 轴，一个用于显示类目，一个用于显示数值
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "#fff"
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show:false
|
||||||
|
},
|
||||||
|
type: 'category',
|
||||||
|
inverse: true, // 反转坐标轴
|
||||||
|
data: ["成品", "半成品", "返工", "不合格品", "废品"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
show: false,
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show:false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: "#fff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
inverse: true, // 反转坐标轴
|
||||||
|
data: [702, 350, 610, 793, 664],
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 一个柱状图，一个边框
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '柱状图',
|
||||||
|
type: 'bar',
|
||||||
|
data: [70, 34, 60, 78, 69],
|
||||||
|
yAxisIndex: 0,
|
||||||
|
barCategoryGap: 50,
|
||||||
|
barWidth: 10,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
barBorderRadius: 5,
|
||||||
|
color: function (params) {
|
||||||
|
return myColor[params.dataIndex];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
position: "outside",
|
||||||
|
color: "#fff",
|
||||||
|
formatter: "{c}%"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "框",
|
||||||
|
type: "bar",
|
||||||
|
barCategoryGap: 50,
|
||||||
|
barWidth: 12,
|
||||||
|
itemStyle: {
|
||||||
|
color: "none",
|
||||||
|
shadowColor: '#999', // 阴影颜色
|
||||||
|
shadowBlur: 3, // 阴影模糊
|
||||||
|
shadowOffsetX: 0, // 阴影水平偏移
|
||||||
|
shadowOffsetY: 0, // 阴影垂直偏移
|
||||||
|
borderColor: "rgba(153,153,153,0.6)", // 边框颜色
|
||||||
|
borderWidth: 0.5,
|
||||||
|
barBorderRadius: 5,
|
||||||
|
|
||||||
|
},
|
||||||
|
yAxisIndex: 1,
|
||||||
|
data: [100, 100, 100, 100, 100]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
tableHeight: 100,
|
||||||
|
speed: 2000,
|
||||||
|
time: null,
|
||||||
|
|
||||||
|
dayInterval: null,
|
||||||
|
chartInterval2: null,
|
||||||
|
configData:{
|
||||||
|
header:['物料名称','批次号','数量'],
|
||||||
|
headerBGC:'#0a3f44',
|
||||||
|
headerHeight:40,
|
||||||
|
align:'center',
|
||||||
|
data:[],
|
||||||
|
waitTime:1000,
|
||||||
|
},
|
||||||
|
configData1:{
|
||||||
|
headerBGC:'#0a3f44',
|
||||||
|
header:['产出名称','规格','型号','开始时间','结束时间','完成进度','产量','状态'],
|
||||||
|
headerHeight:40,
|
||||||
|
data:[]
|
||||||
|
},
|
||||||
|
config_left1:{
|
||||||
|
data:[
|
||||||
|
{name: '拉单丝',value: 167},
|
||||||
|
{ name: '排一次棒', value: 67},
|
||||||
|
{ name: '切片',value: 123},
|
||||||
|
{name: '退火', value: 55 },
|
||||||
|
{name: '检测',value: 98}
|
||||||
|
]
|
||||||
|
} ,
|
||||||
|
config_left2:{
|
||||||
|
data:[
|
||||||
|
{name: '拉单丝', value: 120},
|
||||||
|
{name: '排一次棒',value: 80},
|
||||||
|
{name: '切片',value: 78},
|
||||||
|
{name: '退火',value: 66},
|
||||||
|
{name: '检测',value: 80}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
config_middle_top:{
|
||||||
|
rowNum:10,
|
||||||
|
headerBGC: 'rgba(47,102,107,.34)',
|
||||||
|
oddRowBGC: 'rgba(0,0,0,0)',
|
||||||
|
evenRowBGC: 'rgba(0,0,0,0)',
|
||||||
|
header: ['列1', '列2', '列3'],
|
||||||
|
data: [
|
||||||
|
['行1列1', '行1列2', '行1列3'],
|
||||||
|
['行2列1', '行2列2', '行2列3'],
|
||||||
|
['行3列1', '行3列2', '行3列3'],
|
||||||
|
['行4列1', '行4列2', '行4列3'],
|
||||||
|
['行5列1', '行5列2', '行5列3'],
|
||||||
|
['行6列1', '行6列2', '行6列3'],
|
||||||
|
['行7列1', '行7列2', '行7列3'],
|
||||||
|
['行8列1', '行8列2', '行8列3'],
|
||||||
|
['行9列1', '行9列2', '行9列3'],
|
||||||
|
['行10列1', '行10列2', '行10列3']
|
||||||
|
]
|
||||||
|
},
|
||||||
|
config_middle_bottom:{
|
||||||
|
rowNum:10,
|
||||||
|
headerBGC: 'rgba(0,0,0,0)',
|
||||||
|
oddRowBGC: 'rgba(0,0,0,0)',
|
||||||
|
evenRowBGC: 'rgba(0,0,0,0)',
|
||||||
|
header: ['列1', '列2', '列3'],
|
||||||
|
data: [
|
||||||
|
['行1列1', '行1列2', '行1列3'],
|
||||||
|
['行2列1', '行2列2', '行2列3'],
|
||||||
|
['行3列1', '行3列2', '行3列3'],
|
||||||
|
['行4列1', '行4列2', '行4列3'],
|
||||||
|
['行5列1', '行5列2', '行5列3'],
|
||||||
|
['行6列1', '行6列2', '行6列3'],
|
||||||
|
['行7列1', '行7列2', '行7列3'],
|
||||||
|
['行8列1', '行8列2', '行8列3'],
|
||||||
|
['行9列1', '行9列2', '行9列3'],
|
||||||
|
['行10列1', '行10列2', '行10列3']
|
||||||
|
]
|
||||||
|
},
|
||||||
|
currentTime: "",
|
||||||
|
currentDay: "",
|
||||||
|
today: "",
|
||||||
|
end_time:'',
|
||||||
|
start_time:'',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.showTime();
|
||||||
|
this.dayInterval = setInterval(() => {
|
||||||
|
this.showTime();
|
||||||
|
}, 1000);
|
||||||
|
//近七天的日期数组
|
||||||
|
let daysArr = this.getMondayOfCurrentWeek();
|
||||||
|
this.daysArr = daysArr;
|
||||||
|
let xAxisData = [];
|
||||||
|
daysArr.forEach((item)=>{
|
||||||
|
let dates = item.split('-');
|
||||||
|
let obj = dates[1]+'-'+dates[2];
|
||||||
|
xAxisData.push(obj);
|
||||||
|
})
|
||||||
|
this.xAxisData = xAxisData;
|
||||||
|
|
||||||
|
let startDate = new Date(daysArr[0]).getTime()-(1000*60*60*24);
|
||||||
|
let endDate = new Date(daysArr[6]).getTime()+(1000*60*60*24);
|
||||||
|
let start_time = this.$TOOL.dateFormat(new Date(startDate), "yyyy-MM-dd hh:mm:ss");
|
||||||
|
let end_time = this.$TOOL.dateFormat(new Date(endDate), "yyyy-MM-dd hh:mm:ss");
|
||||||
|
this.start_time = start_time;
|
||||||
|
this.end_time = end_time;
|
||||||
|
|
||||||
|
this.getMgroups();
|
||||||
|
this.$nextTick(() => {
|
||||||
|
//任务进度
|
||||||
|
this.getMtask1();
|
||||||
|
//库存统计
|
||||||
|
this.getMaterials();
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getMondayOfCurrentWeek() {
|
||||||
|
let today = new Date();
|
||||||
|
let days = [];
|
||||||
|
for (let i = 6; i >= 0; i--) {
|
||||||
|
let date = new Date(today);
|
||||||
|
date.setDate(today.getDate() - i);
|
||||||
|
days.push(date.toISOString().split('T')[0]); // 格式化为 YYYY-MM-DD
|
||||||
|
}
|
||||||
|
return days;
|
||||||
|
},
|
||||||
|
//时间
|
||||||
|
showTime() {
|
||||||
|
this.currentTime = this.$TOOL.dateFormat(new Date(), "hh:mm:ss");
|
||||||
|
this.currentDay = this.$TOOL.dateFormat(
|
||||||
|
new Date(),
|
||||||
|
"yyyy年MM月dd日"
|
||||||
|
);
|
||||||
|
},
|
||||||
|
setChart(name, option = null) {
|
||||||
|
var myChart = echarts.getInstanceByDom(document.getElementById(name));
|
||||||
|
if (myChart == undefined) {
|
||||||
|
myChart = echarts.init(document.getElementById(name), "dark", {
|
||||||
|
renderer: "svg",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (option == null) {
|
||||||
|
option = Object.assign({}, this.basicOption);
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
try {
|
||||||
|
myChart.setOption(option);
|
||||||
|
} catch (error) {}
|
||||||
|
}, 500);
|
||||||
|
return myChart;
|
||||||
|
},
|
||||||
|
getMgroups(){
|
||||||
|
let that = this;
|
||||||
|
that.$API.mtm.mgroup.list.req({page:0}).then((res) => {
|
||||||
|
res.forEach((item) => {
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//黑化任务进度
|
||||||
|
getMtask1() {
|
||||||
|
let that = this;
|
||||||
|
let obj = {};
|
||||||
|
obj.mgroup__name = that.mgroup_hh;
|
||||||
|
obj.page = 0;
|
||||||
|
that.$API.pm.mtask.list.req(obj).then((res) => {
|
||||||
|
that.configData1.data = [];
|
||||||
|
res.forEach((item) => {
|
||||||
|
let arr = [];
|
||||||
|
arr[0] = item.material_out_.name;
|
||||||
|
arr[1] = item.material_out_.specification;
|
||||||
|
arr[2] = item.material_out_.model;
|
||||||
|
arr[3] = item.start_date;
|
||||||
|
arr[4] = item.end_date;
|
||||||
|
let process = Math.round((item.count_ok / item.count) * 100)+'%';
|
||||||
|
arr[5] = process;
|
||||||
|
arr[6] = item.count_ok;
|
||||||
|
if(item.state==20){
|
||||||
|
arr[7]='<span style="color:rgb(0,163,245);displaydisplay:inline-block;padding:2px 6px;background:rgb(226,241,245);border:1px solid rgb(0,163,245);border-radius:3px">已下达</span>';
|
||||||
|
}else if(item.state==34){
|
||||||
|
arr[7]='<span style="color:rgb(222,60,54);displaydisplay:inline-block;padding:2px 6px;background:rgb(247,231,231);border:1px solid rgb(222,60,54);border-radius:3px">已停止</span>';
|
||||||
|
}else if(item.state==40){
|
||||||
|
arr[7]='<span style="color:rgb(69,176,118);displaydisplay:inline-block;padding:2px 6px;background:rgb(231,247,232);border:1px solid rgb(69,176,118);border-radius:3px">已提交</span>';
|
||||||
|
}
|
||||||
|
that.configData1.data.push(arr);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//库存统计列表
|
||||||
|
getMaterials() {
|
||||||
|
let that = this;
|
||||||
|
that.$API.wpm.wmaterial.list.req({ page: 0,mgroup__name__in:'退火,黑化' }).then((res) => {
|
||||||
|
that.configData.data = [];
|
||||||
|
if(res.length>0){
|
||||||
|
res.forEach((item) => {
|
||||||
|
let arr = [];
|
||||||
|
arr[0] = item.material_name;
|
||||||
|
arr[1] = item.batch;
|
||||||
|
arr[2] = item.count;
|
||||||
|
that.configData.data .push(arr);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
@font-face {
|
||||||
|
font-family: "myfont";
|
||||||
|
/* 字体名称 */
|
||||||
|
src: url("../../../utils/youShe.ttf");
|
||||||
|
/* 字体文件相对路径 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard {
|
||||||
|
background-image: url("/public/img/photon_bg.png");
|
||||||
|
color: #fff;
|
||||||
|
font-family: "Microsoft Yahei" !important;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
/* background: url("/public/img/head_bg.png"); */
|
||||||
|
background: url("/public/img/header_bgv.png");
|
||||||
|
border-bottom: none;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: block;
|
||||||
|
height: 8vh;
|
||||||
|
color: rgb(149, 255, 255);
|
||||||
|
font-family: "Microsoft Yahei";
|
||||||
|
text-align: center;
|
||||||
|
padding: 12px 0px;
|
||||||
|
}
|
||||||
|
.header > .title {
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: "myfont";
|
||||||
|
font-size: 32px;
|
||||||
|
font-size:4vh;
|
||||||
|
letter-spacing: 10px;
|
||||||
|
}
|
||||||
|
.header > .timer {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: 18px;
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 20px;
|
||||||
|
}
|
||||||
|
.numBlock{
|
||||||
|
height: 10vh;
|
||||||
|
}
|
||||||
|
.numBlock_title{
|
||||||
|
height: 4vh;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 1.5vh;
|
||||||
|
line-height: 4vh;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.numBlock_value{
|
||||||
|
height:6vh;
|
||||||
|
width: 100%;
|
||||||
|
line-height: 5vh;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 3vh;
|
||||||
|
font-family: "myfont";
|
||||||
|
}
|
||||||
|
.leftChartBlock1{
|
||||||
|
width: 90%;
|
||||||
|
height: 28vh;
|
||||||
|
z-index: 999;
|
||||||
|
left: 5%;
|
||||||
|
border-radius: 3vh;
|
||||||
|
}
|
||||||
|
.leftChartBlock2{
|
||||||
|
width:100%;
|
||||||
|
height: 28vh;
|
||||||
|
}
|
||||||
|
.middleTableBlock1{
|
||||||
|
width:94%;
|
||||||
|
height:31vh;
|
||||||
|
position: absolute;
|
||||||
|
left: 4%
|
||||||
|
}
|
||||||
|
.middleTableBlock2{
|
||||||
|
width:94%;
|
||||||
|
height:34vh;
|
||||||
|
position: absolute;
|
||||||
|
left: 4%
|
||||||
|
}
|
||||||
|
.chartBlockTitle{
|
||||||
|
width: 90%;
|
||||||
|
height: 5vh;
|
||||||
|
margin: auto;
|
||||||
|
line-height: 6vh;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 10px;
|
||||||
|
font-size: 1.6vh;
|
||||||
|
font-weight: 600;
|
||||||
|
border-bottom: 1px solid rgb(83 198 243);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue