feat: em增加返回数据

This commit is contained in:
caoqianming 2023-11-27 10:14:46 +08:00
parent 0316f42e11
commit 48902fe0fe
2 changed files with 1820 additions and 1736 deletions

File diff suppressed because it is too large Load Diff

View File

@ -92,8 +92,10 @@
<div class="retangleWrap" style="padding-right: 0;">
<div class="retangle bottomRetangle">
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">本月生产合格趋势</div>
<div style="color: rgb(122, 121, 121);size: 12px;font-weight: 290;line-height: 22px;">...</div>
<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">
本月生产合格趋势</div>
<div style="color: rgb(122, 121, 121);size: 12px;font-weight: 290;line-height: 22px;">...
</div>
</div>
<div style="padding: 20px 24px 0 24px;background: #ffffff;">
<div class="bottomItem">
@ -110,16 +112,17 @@
<div class="retangleWrap retangleWrapTable">
<div class="retangle tableRetangle">
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">库存情况</div>
<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">库存情况
</div>
</div>
<div style="padding: 20px 24px 24px 24px;">
<el-table :data="tableData" style="width: 100%;height: 285px;">
<el-table-column prop="index" label="序号" width="40"/>
<el-table-column prop="number" label="名称"/>
<el-table-column prop="name" label="规格"/>
<el-table-column prop="state" label="型号"/>
<el-table-column prop="state" label="单位"/>
<el-table-column prop="state" label="库存"/>
<el-table-column prop="index" label="序号" width="60" />
<el-table-column prop="name" label="名称" />
<el-table-column prop="specification" label="规格" />
<el-table-column prop="specification" label="型号" />
<el-table-column prop="unit" label="单位" />
<el-table-column prop="count" label="库存" />
</el-table>
</div>
</div>
@ -167,14 +170,19 @@
<div class="retangleWrap retangleWrapTable" style="padding-right: 0;">
<div class="retangle tableRetangle">
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">生产设备</div>
<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">生产设备
</div>
</div>
<div style="padding: 20px 24px 24px 24px;">
<el-table :data="tableData" style="width: 100%;height: 285px;">
<el-table-column prop="index" label="序号"/>
<el-table-column prop="number" label="设备编号"/>
<el-table-column prop="name" label="设备名称"/>
<el-table-column prop="state" label="设备状态"/>
<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">
{{ eqState_[scope.row.state] }}
</template>
</el-table-column>
</el-table>
</div>
</div>
@ -184,7 +192,8 @@
<div class="retangleWrap retangleWrapTable">
<div class="retangle tableRetangle">
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">日历</div>
<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">日历
</div>
</div>
<div style="">
<el-calendar v-model="calendarValue" />
@ -204,200 +213,233 @@
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
time: '',
day: '',
year_s:'',
month_s:'',
yearData:[],
monthData:[],
warningNum:0,
warningNum2:0,
tableData : [
{index:1,number: 'GZKJ-01',name: '1号单坩埚熔化炉',state: '完好'},
{index:2,number: 'GZKJ-02',name: '2号单坩埚熔化炉',state: '完好'},
{index:3,number: 'GZKJ-03',name: '3号单坩埚熔化炉',state: '禁用'},
{index:4,number: 'GZKJ-04',name: '4号单坩埚熔化炉',state: '检修'},
],
calendarValue:''
export default {
data() {
return {
time: '',
day: '',
year_s: '',
month_s: '',
yearData: [],
monthData: [],
warningNum: 0,
warningNum2: 0,
tableData: [
{ index: 1, name: 'GZKJ-01', specification: '500*30', unit: '个', count: 100 },
{ index: 2, name: 'GZKJ-02', specification: '500*30', unit: '个', count: 100 },
{ index: 3, name: 'GZKJ-03', specification: '500*30', unit: '个', count: 100 },
{ index: 4, name: 'GZKJ-04', specification: '500*30', unit: '个', count: 100 },
],
equipList: [],
calendarValue: '',
eqState_: {
10: '完好',
20: '限用',
30: '在修',
40: '禁用',
},
}
},
mounted() {
this.$emit('on-mounted');
let that = this;
var myDate = new Date();
let year = myDate.getFullYear();
let month = myDate.getMonth() + 1;
that.year_s = year;
that.month_s = month;
that.initChart();
this.calendarValue = new Date();
this.getEquipList()
},
methods: {
getEquipList() {
this.$API.em.equipment.list.req({ page: 0, type: 10 }).then(res => {
this.equipList = res
})
},
// Class
bindClass(type) {
let classInfo = {
socketDom: true, redColor: false,
orangeColor: false, yellowColor: false, blueColor: true
}
if (type == '') {
classInfo.redColor = true
}
return classInfo
},
mounted() {
this.$emit('on-mounted');
let that = this;
var myDate = new Date();
let year = myDate.getFullYear();
let month = myDate.getMonth()+1;
that.year_s = year;
that.month_s = month;
that.initChart();
this.calendarValue = new Date();
},
methods: {
// Class
bindClass(type){
let classInfo = { socketDom: true, redColor: false,
orangeColor:false, yellowColor:false, blueColor:true }
if(type==''){
classInfo.redColor = true
}
return classInfo
},
getMessage(msg) {
getMessage(msg) {
console.log(msg);
},
close() {
},
close() {
if (this.ws) {
this.ws.close();
this.ws = null;
console.log("socket已经关闭");
}
},
showTime(){
this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
this.day = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
},
interEvent(){
this.$router.replace({path:'/events'})
},
interEquipment(){
this.$router.replace({path:'/em/equipmentc'})
},
initChart(){
//
var dom = document.getElementById("barCharts");
var myChart = echarts.init(dom);
let option = {
grid: { // px
top: '5%',
left: '1%',
right: '1%',
bottom: '5%',
containLabel: true
},
xAxis: {
type: 'category',
axisLabel: {
// show: false, // X
},
data:['1号','2号','3号','4号','5号','6号','7号','8号','9号','10号']
},
showTime() {
this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
this.day = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
},
interEvent() {
this.$router.replace({ path: '/events' })
},
interEquipment() {
this.$router.replace({ path: '/em/equipmentc' })
},
initChart() {
//
var dom = document.getElementById("barCharts");
var myChart = echarts.init(dom);
let option = {
grid: { // px
top: '5%',
left: '1%',
right: '1%',
bottom: '5%',
containLabel: true
},
xAxis: {
type: 'category',
axisLabel: {
// show: false, // X
},
yAxis: {
type: 'value',
axisLabel: {
show: false, // X
},
data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号']
},
yAxis: {
type: 'value',
axisLabel: {
show: false, // X
},
series: [{
data: [10,9,8,11,12,10,9,10,8,9,10],
type: 'bar',
barMaxWidth:50,
itemStyle:{
normal:{color:'rgb(20, 141, 255)'}
}
}]
};
myChart.setOption(option, true);
},
},
series: [{
data: [10, 9, 8, 11, 12, 10, 9, 10, 8, 9, 10],
type: 'bar',
barMaxWidth: 50,
itemStyle: {
normal: { color: 'rgb(20, 141, 255)' }
}
}]
};
myChart.setOption(option, true);
},
}
}
}
</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;
}
.retangleImg{
height:188px;
color: #ffffff;
padding-left: 43px;
background: linear-gradient(180.00deg, 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,.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;
}
.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;
}
.retangleImg {
height: 188px;
color: #ffffff;
padding-left: 43px;
background: linear-gradient(180.00deg, 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, .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;
}
</style>