409 lines
8.6 KiB
Vue
409 lines
8.6 KiB
Vue
<template>
|
||
<div class="widgets-home" ref="main">
|
||
<div class="widgets-content">
|
||
<div class="retangleWrap retangleWrapTop">
|
||
<div class="retangle retangleImg">
|
||
<div class="companyName">玻纤生产管理</div>
|
||
<div class="companyDesc">
|
||
公司秉承“善用资源，服务建设”的核心理念，践行“材料创造美
|
||
</div>
|
||
<div class="companyDesc">
|
||
好世界”的企业使命，坚持“创新、绩效、和谐、责任”的核心价
|
||
</div>
|
||
<div class="companyDesc">
|
||
值观，努力成长为具有创新精神和全球视野的光芯材料领先企业。
|
||
</div>
|
||
<img class="topCardImg" src="img/topCard.png" />
|
||
</div>
|
||
</div>
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<div class="retangleWrap">
|
||
<div class="retangleContainer">
|
||
<div class="retangleTitle">
|
||
<div class="title">设备列表</div>
|
||
</div>
|
||
<div class="retangleTable">
|
||
<el-table
|
||
:data="tableDataEq"
|
||
style="width: 100%; height: 285px"
|
||
>
|
||
<el-table-column prop="name" label="设备名称"/>
|
||
<el-table-column prop="number" label="设备编号"/>
|
||
<el-table-column prop="model" label="设备型号"/>
|
||
<el-table-column prop="belong_dept_name" label="所属部门"/>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="retangleWrap" style="padding: 25px 0 0 0;">
|
||
<div class="retangleContainer">
|
||
<div class="retangleTitle">
|
||
<div class="title">车间物料</div>
|
||
</div>
|
||
<div class="retangleTable">
|
||
<el-table
|
||
:data="tableDataIn"
|
||
style="width: 100%; height: 285px"
|
||
>
|
||
<el-table-column prop="material_name" label="物料名称" min-width="120"/>
|
||
<el-table-column prop="mgroup_name" label="所属工段" min-width="60"/>
|
||
<el-table-column prop="count" label="数量" min-width="60"/>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="retangleWrap">
|
||
<div class="retangleContainer">
|
||
<div class="retangleTitle">
|
||
<div class="title">半成品库存统计</div>
|
||
</div>
|
||
<div class="retangleTable">
|
||
<el-table
|
||
:data="tableDataOut"
|
||
style="width: 100%; height: 285px"
|
||
>
|
||
<el-table-column prop="name" label="物料名称"/>
|
||
<el-table-column prop="model" label="型号"/>
|
||
<el-table-column prop="specification" label="规格"/>
|
||
<el-table-column prop="count" label="数量"/>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="9">
|
||
<div class="retangleWrap" style="padding: 25px 0 0 20px;">
|
||
<div class="retangleContainer">
|
||
<div class="retangleTitle">
|
||
<div class="title">成品库存统计</div>
|
||
</div>
|
||
<div class="retangleTable">
|
||
<el-table
|
||
:data="tableData"
|
||
style="width: 100%; height: 285px"
|
||
>
|
||
<el-table-column prop="name" label="物料名称"/>
|
||
<el-table-column prop="model" label="型号"/>
|
||
<el-table-column prop="specification" label="规格"/>
|
||
<el-table-column prop="count" label="数量"/>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="15">
|
||
<div class="retangleWrap">
|
||
<div class="retangleContainer">
|
||
<div class="retangleTitle">
|
||
<div class="title">生产统计</div>
|
||
</div>
|
||
<div class="retangleTable">
|
||
<scEcharts height="285px" :width="'100%'" :option="option"></scEcharts>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
export default {
|
||
data() {
|
||
return {
|
||
tableData: [],
|
||
tableDataIn: [],
|
||
tableDataEq: [],
|
||
tableDataOut: [],
|
||
materialType: 20,
|
||
option: {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
label: {
|
||
backgroundColor: "#6a7985",
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
top: "5%",
|
||
left: "1%",
|
||
right: "1%",
|
||
bottom: "5%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
axisLabel: {
|
||
// show: false, // X 轴标签文字旋转角度
|
||
},
|
||
data: [],
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisLabel: {
|
||
show: false, // X 轴标签文字旋转角度
|
||
},
|
||
},
|
||
series: {
|
||
data: [],
|
||
type: "bar",
|
||
barMaxWidth: 30,
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
color: "#000",
|
||
},
|
||
itemStyle: {
|
||
borderRadius: [5, 5, 0, 0],
|
||
normal: { color: "rgb(20, 141, 255)" },
|
||
},
|
||
},
|
||
},
|
||
};
|
||
},
|
||
mounted() {
|
||
this.$emit("on-mounted");
|
||
//生产设备
|
||
this.getEquipmentList();
|
||
//车间物料
|
||
this.getMaterialInList();
|
||
//成品库车间库存
|
||
this.getMaterialOutList();
|
||
//半成品库车间库存
|
||
this.getMaterialList();
|
||
//任务列表
|
||
// this.getMtaskLists();
|
||
},
|
||
methods: {
|
||
// 动态绑定Class
|
||
bindClass(rate) {
|
||
let classInfo = {
|
||
socketDom: true,
|
||
redColor: false,
|
||
greenColor: true,
|
||
};
|
||
if (rate > 0) {
|
||
classInfo.greenColor = true;
|
||
} else if (rate < 0) {
|
||
classInfo.redColor = true;
|
||
}
|
||
return classInfo;
|
||
},
|
||
//生产设备
|
||
getEquipmentList(){
|
||
let that = this;
|
||
that.$API.em.equipment.list.req({ page: 0, type: 10 }).then((res) => {
|
||
that.tableDataEq = res;
|
||
});
|
||
},
|
||
//车间物料
|
||
getMaterialInList(){
|
||
let that = this;
|
||
that.$API.wpm.wmaterial.list.req({ page: 0, material__type: '20',count__gte:1 }).then((res) => {
|
||
that.tableDataIn = res;
|
||
});
|
||
},
|
||
//半成品库存统计
|
||
getMaterialOutList(){
|
||
let that = this;
|
||
that.$API.mtm.material.list.req({ page: 0, material__type: 20,count__gt:0 }).then((res) => {
|
||
that.tableDataOut = res;
|
||
});
|
||
},
|
||
//成品库车间库存
|
||
getMaterialList() {
|
||
let that = this;
|
||
that.$API.mtm.material.list.req({ page: 0, material__type: 10,count__gt:0 }).then((res) => {
|
||
that.tableData = res;
|
||
});
|
||
},
|
||
//任务列表
|
||
getMtaskLists(){},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.retangleWrap {
|
||
width: 100%;
|
||
padding: 25px 20px 0 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
.retangle {
|
||
width: 100%;
|
||
border-radius: 15px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
background: #ffffff;
|
||
}
|
||
.retangleContainer {
|
||
width: 100%;
|
||
border-radius: 15px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
background: #ffffff;
|
||
height: auto;
|
||
padding-top: 20px;
|
||
}
|
||
.retangleTitle {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 24px;
|
||
}
|
||
.retangleTitle > .title {
|
||
color: rgb(30, 30, 30);
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
line-height: 24px;
|
||
}
|
||
.retangleTable {
|
||
padding: 20px 24px 24px 24px
|
||
}
|
||
.radios_group {
|
||
color: rgb(122, 121, 121);
|
||
size: 12px;
|
||
font-weight: 290;
|
||
line-height: 22px;
|
||
height: 23px;
|
||
}
|
||
.retangleImg {
|
||
height: 188px;
|
||
color: #ffffff;
|
||
padding-left: 43px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgb(58, 149, 255),
|
||
rgb(27, 92, 255) 100%
|
||
);
|
||
}
|
||
|
||
.companyName {
|
||
padding-top: 28px;
|
||
font-size: 24px;
|
||
line-height: 28px;
|
||
padding-bottom: 23px;
|
||
}
|
||
|
||
.companyDesc {
|
||
padding-left: 4px;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.topCardImg {
|
||
height: 188px;
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 0;
|
||
}
|
||
|
||
.countRetangle {
|
||
height: 180px;
|
||
padding-top: 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.countItem {
|
||
width: 20%;
|
||
padding-left: 24px;
|
||
display: inline-block;
|
||
box-sizing: border-box;
|
||
border-right: 1px solid #eeeeee;
|
||
}
|
||
|
||
.countItem:last-child {
|
||
border-right: 0;
|
||
}
|
||
|
||
.countname {
|
||
font-size: 14px;
|
||
line-height: 22px;
|
||
color: rgba(94, 94, 94);
|
||
}
|
||
|
||
.countnum {
|
||
font-size: 30px;
|
||
padding-bottom: 11px;
|
||
line-height: 38px;
|
||
}
|
||
|
||
.countrate {
|
||
line-height: 20px;
|
||
color: rgba(0, 0, 0, 0.45);
|
||
}
|
||
|
||
.redColor {
|
||
color: rgb(255, 73, 87);
|
||
}
|
||
|
||
.greenColor {
|
||
color: rgb(71, 201, 58);
|
||
}
|
||
|
||
.middleRetangle {
|
||
border-radius: 2px;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.middleItem {
|
||
width: 25%;
|
||
padding-left: 34px;
|
||
display: inline-block;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.middleItem:first-child {
|
||
border-right: 1px solid #eeeeee;
|
||
}
|
||
|
||
.bottomRetangle {
|
||
padding: 20px 0;
|
||
box-sizing: border-box;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.warningHead {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 24px;
|
||
}
|
||
.warningHeadText {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
line-height: 24px;
|
||
}
|
||
.warningTableHead {
|
||
display: flex;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
font-size: 18spx;
|
||
padding: 0 24px;
|
||
}
|
||
.warningTbleBody {
|
||
padding: 0 24px;
|
||
height: 276px;
|
||
overflow-y: scroll;
|
||
}
|
||
.warningFlex1 {
|
||
flex: 1;
|
||
}
|
||
.warningNumberStyle {
|
||
color: red;
|
||
font-weight: bold;
|
||
text-align: right;
|
||
}
|
||
</style>
|