449 lines
9.2 KiB
Vue
449 lines
9.2 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 style="margin-bottom: 20px">
|
||
<el-col :span="8">
|
||
<div
|
||
class="retangleWrap retangleWrapTable"
|
||
style="padding-right: 0"
|
||
>
|
||
<div class="retangle tableRetangle">
|
||
<div class="Retangle_container">
|
||
<div class="title">生产设备</div>
|
||
</div>
|
||
<div style="padding: 20px 24px 24px 24px">
|
||
<el-table
|
||
:data="equipList"
|
||
style="width: 100%; height: 285px"
|
||
>
|
||
<el-table-column
|
||
prop="number"
|
||
label="设备编号"
|
||
/>
|
||
<el-table-column
|
||
prop="name"
|
||
label="设备名称"
|
||
/>
|
||
<el-table-column
|
||
prop="belong_dept_name"
|
||
label="所在车间"
|
||
/>
|
||
<el-table-column
|
||
prop="state"
|
||
label="设备状态"
|
||
>
|
||
<template #default="scope">
|
||
<el-tag
|
||
class="ml-2"
|
||
type="success"
|
||
v-if="scope.row.state == 10"
|
||
>{{
|
||
eqState_[scope.row.state]
|
||
}}</el-tag
|
||
>
|
||
<el-tag
|
||
class="ml-2"
|
||
type="warning"
|
||
v-if="scope.row.state == 20"
|
||
>{{
|
||
eqState_[scope.row.state]
|
||
}}</el-tag
|
||
>
|
||
<el-tag
|
||
class="ml-2"
|
||
type="info"
|
||
v-if="scope.row.state == 30"
|
||
>{{
|
||
eqState_[scope.row.state]
|
||
}}</el-tag
|
||
>
|
||
<el-tag
|
||
class="ml-2"
|
||
type="danger"
|
||
v-if="scope.row.state == 40"
|
||
>{{
|
||
eqState_[scope.row.state]
|
||
}}</el-tag
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="retangleWrap retangleWrapTable">
|
||
<div class="retangle tableRetangle">
|
||
<div class="Retangle_container">
|
||
<div class="title">库存情况</div>
|
||
<div class="radios_group">
|
||
<el-radio-group
|
||
v-model="materialType"
|
||
@change="materialTypeChange"
|
||
>
|
||
<el-radio label="20">半成品</el-radio>
|
||
<el-radio label="10">成品</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
</div>
|
||
<div style="padding: 20px 24px 24px 24px">
|
||
<el-table
|
||
:data="tableData"
|
||
style="width: 100%; height: 293px"
|
||
>
|
||
<el-table-column
|
||
label="#"
|
||
type="index"
|
||
width="50"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="name"
|
||
label="名称"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="specification"
|
||
label="规格"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="model"
|
||
label="型号"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="unit"
|
||
label="单位"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="count"
|
||
label="库存"
|
||
></el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="retangleWrap" style="padding-left: 0">
|
||
<div class="retangle bottomRetangle">
|
||
<div class="warningHead">
|
||
<div class="warningHeadText">预警提示</div>
|
||
</div>
|
||
<div class="warningTableHead">
|
||
<div style="flex: 2">名称</div>
|
||
<div class="warningFlex1">型号</div>
|
||
<div class="warningFlex1">规格</div>
|
||
<div
|
||
class="warningFlex1"
|
||
style="text-align: right"
|
||
>
|
||
数量
|
||
</div>
|
||
</div>
|
||
<div class="warningTbleBody">
|
||
<div
|
||
style="height: fit-content"
|
||
v-if="warningMaterial.length > 0"
|
||
>
|
||
<div
|
||
v-for="item in warningMaterial"
|
||
:key="item.id"
|
||
style="display: flex; height: 25px"
|
||
>
|
||
<div style="flex: 2">
|
||
{{ item.name }}
|
||
</div>
|
||
<div class="warningFlex1">
|
||
{{ item.model }}
|
||
</div>
|
||
<div class="warningFlex1">
|
||
{{ item.specification }}
|
||
</div>
|
||
<div
|
||
class="warningFlex1 warningNumberStyle"
|
||
>
|
||
{{ item.count }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else>暂无数据</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
export default {
|
||
data() {
|
||
return {
|
||
time: "",
|
||
day: "",
|
||
year_s: "",
|
||
day_s: "",
|
||
month_s: "",
|
||
yesterday: "",
|
||
|
||
eqState_: {
|
||
10: "完好",
|
||
20: "限用",
|
||
30: "在修",
|
||
40: "禁用",
|
||
},
|
||
equipList: [],
|
||
tableData: [],
|
||
warningMaterial: [],
|
||
materialType: "20",
|
||
};
|
||
},
|
||
mounted() {
|
||
this.$emit("on-mounted");
|
||
let that = this;
|
||
var myDate = new Date();
|
||
let year = myDate.getFullYear();
|
||
let month = myDate.getMonth() + 1;
|
||
let day = myDate.getDate();
|
||
that.year_s = year;
|
||
that.month_s = month;
|
||
that.day_s = day;
|
||
// this.getEquipList();
|
||
// this.getMaterialWarning();
|
||
// this.getMaterialList();
|
||
},
|
||
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;
|
||
},
|
||
//设备列表
|
||
getEquipList() {
|
||
this.$API.em.equipment.list
|
||
.req({ page: 0, type: 10 })
|
||
.then((res) => {
|
||
this.equipList = res;
|
||
});
|
||
},
|
||
|
||
materialTypeChange() {
|
||
this.getMaterialList();
|
||
},
|
||
//获取库存
|
||
getMaterialList() {
|
||
let that = this;
|
||
that.$API.mtm.material.list
|
||
.req({ page: 0, type: that.materialType })
|
||
.then((res) => {
|
||
that.tableData = res.filter((item) => {
|
||
return item.count > 0;
|
||
});
|
||
});
|
||
},
|
||
//库存警告
|
||
getMaterialWarning() {
|
||
let that = this;
|
||
that.$API.mtm.material.list
|
||
.req({ page: 0, type__in: "10,20", count__lte: 1 })
|
||
.then((res) => {
|
||
if (res.length > 0) {
|
||
console.log("getMaterialWarning", res);
|
||
that.warningMaterial = res;
|
||
} else {
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.retangleWrap {
|
||
width: 100%;
|
||
padding: 20px 20px 0 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.retangle {
|
||
width: 100%;
|
||
border-radius: 15px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
background: #ffffff;
|
||
}
|
||
.Retangle_container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 24px;
|
||
}
|
||
.Retangle_container > .title {
|
||
color: rgb(30, 30, 30);
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
line-height: 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;
|
||
}
|
||
|
||
.tableRetangle {
|
||
height: auto;
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.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>
|