fix:光芯首页

This commit is contained in:
shijing 2024-07-24 15:13:20 +08:00
parent 75a0dc33ce
commit f53252f6c2
3 changed files with 487 additions and 0 deletions

View File

@ -80,6 +80,17 @@ const routes = [
},
component: "home/enm_home",
},
{
name: "dashboard_gx",
path: "/dashboard_gx",
meta: {
title: "控制台",
icon: "el-icon-monitor",
affix: true,
perms: ["dashboard_gx"],
},
component: "home/gx_home",
},
{
path: "/track",
name: "track",

View File

@ -0,0 +1,28 @@
<template>
<widgets @on-mounted="onMounted"></widgets>
</template>
<script>
import { defineAsyncComponent } from "vue";
const widgets = defineAsyncComponent(() => import("./widgets/index_gx.vue"));
export default {
name: "dashboard",
components: {
widgets,
},
data() {
return {
pageLoading: true,
};
},
mounted() {},
methods: {
onMounted() {
this.pageLoading = false;
},
},
};
</script>
<style></style>

View File

@ -0,0 +1,448 @@
<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-right: 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>