fix:光芯首页
This commit is contained in:
parent
75a0dc33ce
commit
f53252f6c2
|
@ -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",
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
Loading…
Reference in New Issue