zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/views/bigScreen/index_photon.vue
View File

@ -14,21 +14,27 @@
<div class="blockTitleIcon"></div> <div class="blockTitleIcon"></div>
<div>本周交付数</div> <div>本周交付数</div>
</div> </div>
<div id="line1" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div> <div id="line1"
style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;">
</div>
</div> </div>
<div class="flexItem" style="flex:1"> <div class="flexItem" style="flex:1">
<div class="blockTitle"> <div class="blockTitle">
<div class="blockTitleIcon"></div> <div class="blockTitleIcon"></div>
<div>本周合格数</div> <div>本周合格数</div>
</div> </div>
<div id="bar1" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div> <div id="bar1"
style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;">
</div>
</div> </div>
<div class="flexItem" style="flex:1"> <div class="flexItem" style="flex:1">
<div class="blockTitle"> <div class="blockTitle">
<div class="blockTitleIcon"></div> <div class="blockTitleIcon"></div>
<div>本周合格率</div> <div>本周合格率</div>
</div> </div>
<div id="line2" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div> <div id="line2"
style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;">
</div>
</div> </div>
</div> </div>
</div> </div>
@ -78,14 +84,18 @@
<div class="blockTitleIcon"></div> <div class="blockTitleIcon"></div>
<div>本周不合格占比</div> <div>本周不合格占比</div>
</div> </div>
<div id="pie" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div> <div id="pie"
style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;">
</div>
</div> </div>
<div class="flexItem" style="flex:1"> <div class="flexItem" style="flex:1">
<div class="blockTitle"> <div class="blockTitle">
<div class="blockTitleIcon"></div> <div class="blockTitleIcon"></div>
<div>本周计划完成度</div> <div>本周计划完成度</div>
</div> </div>
<div id="line3" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div> <div id="line3"
style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;">
</div>
</div> </div>
<div class="flexItem" style="flex:1"> <div class="flexItem" style="flex:1">
<div class="blockTitle"> <div class="blockTitle">
@ -107,8 +117,12 @@
<p class="title">{{ dialogData.deptName }}</p> <p class="title">{{ dialogData.deptName }}</p>
<div class="infoCantier"> <div class="infoCantier">
<div class="leftBlock"> <div class="leftBlock">
<el-progress width="50" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25" <el-progress width="70" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25"
id="dashbordProcess" /> id="dashbordProcess">
<template #default="{ percentage }">
<span class="percentage-value" style="font-size: 16px">{{ percentage }}%</span>
</template>
</el-progress>
<span>完成进度</span> <span>完成进度</span>
</div> </div>
<div class="rightBlock"> <div class="rightBlock">
@ -139,7 +153,11 @@
<div class="infoCantier"> <div class="infoCantier">
<div class="leftBlock"> <div class="leftBlock">
<el-progress width="100" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25" <el-progress width="100" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25"
id="dashbordProcess" /> id="dashbordProcess">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
</template>
</el-progress>
<p style="text-align:center">完成进度</p> <p style="text-align:center">完成进度</p>
</div> </div>
<div class="rightBlock"> <div class="rightBlock">
@ -183,15 +201,15 @@ export default {
// waitTime: 1000, // waitTime: 1000,
columnWidth: [1, 1, 1], columnWidth: [1, 1, 1],
data: [ data: [
['ZB2-1', '6车间', '<span style="color:green;">30000</span>'], ['ZB2-1', '500*30', '<span style="color:green;">30000</span>'],
['ZB2-2', '7车间', '<span style="color:green;">40000</span>'], ['ZB2-2', '500*30', '<span style="color:green;">40000</span>'],
['ZB2-3', '8车间', '<span style="color:green;">50000</span>'], ['ZB2-3', '500*30', '<span style="color:green;">50000</span>'],
['ZJ2-1', '8车间', '<span style="color:green;">35000</span>'], ['ZJ2-1', '500*30', '<span style="color:green;">35000</span>'],
['ZJ2-2', '10车间', '<span style="color:green;">30000</span>'], ['ZJ2-2', '500*30', '<span style="color:green;">30000</span>'],
['ZJ2-3', '10车间', '<span style="color:red;">100</span>'], ['ZJ2-3', '500*30', '<span style="color:red;">100</span>'],
['ZT2-1', '10车间', '<span style="color:red;">100</span>'], ['ZT2-1', '500*30', '<span style="color:red;">100</span>'],
['ZT2-2', '10车间', '<span style="color:red;">100</span>'], ['ZT2-2', '500*30', '<span style="color:red;">100</span>'],
['ZT2-3', '10车间', '<span style="color:red;">100</span>'], ['ZT2-3', '500*30', '<span style="color:red;">100</span>'],
], ],
index: true, index: true,
columnWidth: [50], columnWidth: [50],
@ -1318,9 +1336,12 @@ export default {
</script> </script>
<style scoped> <style scoped>
@font-face { @font-face {
font-family: 'myfont'; /* 字体名称 */ font-family: 'myfont';
src: url('../../utils/youShe.ttf'); /* 字体文件相对路径 */ /* 字体名称 */
src: url('../../utils/youShe.ttf');
/* 字体文件相对路径 */
} }
.container { .container {
background: url('/public/img/photon_bg.png') no-repeat; background: url('/public/img/photon_bg.png') no-repeat;
background-size: cover; background-size: cover;
@ -1459,27 +1480,34 @@ export default {
font-size: 20px !important; font-size: 20px !important;
font-weight: bold !important; font-weight: bold !important;
} }
.totalNumContnier { .totalNumContnier {
display: flex; display: flex;
width: fit-content; width: fit-content;
margin: auto; margin: auto;
} }
.totalNumWrap { .totalNumWrap {
margin: 0 10px; margin: 0 10px;
position: relative; position: relative;
} }
.totalNumWrap>img { .totalNumWrap>img {
width: 10vw; width: 10vw;
} }
.totalNumWrap_green>.totalNumber { .totalNumWrap_green>.totalNumber {
color: rgb(5, 245, 2); color: rgb(5, 245, 2);
} }
.totalNum_orange>.totalNumber { .totalNum_orange>.totalNumber {
color: orange; color: orange;
} }
.totalNum_blue>.totalNumber { .totalNum_blue>.totalNumber {
color: rgb(2, 245, 242); color: rgb(2, 245, 242);
} }
.totalNumber { .totalNumber {
font-size: 25px; font-size: 25px;
font-weight: bold; font-weight: bold;
@ -1488,6 +1516,7 @@ export default {
top: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
} }
.totalNumText { .totalNumText {
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
@ -1511,6 +1540,7 @@ export default {
box-sizing: border-box; box-sizing: border-box;
background: linear-gradient(to bottom left, rgba(25, 154, 118, .5), rgba(31, 44, 50, .5)); background: linear-gradient(to bottom left, rgba(25, 154, 118, .5), rgba(31, 44, 50, .5));
} }
.inforBlock.clickBlock { .inforBlock.clickBlock {
left: 50%; left: 50%;
width: 630px; width: 630px;
@ -1519,6 +1549,7 @@ export default {
font-size: 16px; font-size: 16px;
transform: translateX(-50%) transform: translateX(-50%)
} }
.inforBlock>.border_corner { .inforBlock>.border_corner {
z-index: 2500; z-index: 2500;
position: absolute; position: absolute;
@ -1570,23 +1601,27 @@ export default {
display: flex; display: flex;
} }
.infoCantier>.leftBlock { .infoCantier>.leftBlock {
width: 100px; width: 100px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-right: 30px; margin-right: 30px;
} }
.infoCantier>.rightBlock { .infoCantier>.rightBlock {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
} }
.infoCantier>.rightBlock>.countWrap { .infoCantier>.rightBlock>.countWrap {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 280px; width: 280px;
margin-top: 10px margin-top: 10px
} }
/* .clickBlock{ /* .clickBlock{
position:relative; position:relative;
} */ } */
@ -1597,4 +1632,11 @@ export default {
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
.percentage-value {
display: block;
margin-top: 6px;
font-size: 28px;
color: white;
}
</style> </style>

84
src/views/home/widgets/index_photon.vue
View File

@ -92,8 +92,10 @@
<div class="retangleWrap" style="padding-right: 0;"> <div class="retangleWrap" style="padding-right: 0;">
<div class="retangle bottomRetangle"> <div class="retangle bottomRetangle">
<div style="display: flex;justify-content: space-between;padding: 0 24px;"> <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 style="color: rgb(122, 121, 121);size: 12px;font-weight: 290;line-height: 22px;">...</div> 本月生产合格趋势</div>
<div style="color: rgb(122, 121, 121);size: 12px;font-weight: 290;line-height: 22px;">...
</div>
</div> </div>
<div style="padding: 20px 24px 0 24px;background: #ffffff;"> <div style="padding: 20px 24px 0 24px;background: #ffffff;">
<div class="bottomItem"> <div class="bottomItem">
@ -110,16 +112,17 @@
<div class="retangleWrap retangleWrapTable"> <div class="retangleWrap retangleWrapTable">
<div class="retangle tableRetangle"> <div class="retangle tableRetangle">
<div style="display: flex;justify-content: space-between;padding: 0 24px;"> <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>
<div style="padding: 20px 24px 24px 24px;"> <div style="padding: 20px 24px 24px 24px;">
<el-table :data="tableData" style="width: 100%;height: 285px;"> <el-table :data="tableData" style="width: 100%;height: 285px;">
<el-table-column prop="index" label="序号" width="40"/> <el-table-column prop="index" label="序号" width="60" />
<el-table-column prop="number" label="名称"/> <el-table-column prop="name" label="名称" />
<el-table-column prop="name" label="规格"/> <el-table-column prop="specification" label="规格" />
<el-table-column prop="state" label="型号"/> <el-table-column prop="specification" label="型号" />
<el-table-column prop="state" label="单位"/> <el-table-column prop="unit" label="单位" />
<el-table-column prop="state" label="库存"/> <el-table-column prop="count" label="库存" />
</el-table> </el-table>
</div> </div>
</div> </div>
@ -167,14 +170,19 @@
<div class="retangleWrap retangleWrapTable" style="padding-right: 0;"> <div class="retangleWrap retangleWrapTable" style="padding-right: 0;">
<div class="retangle tableRetangle"> <div class="retangle tableRetangle">
<div style="display: flex;justify-content: space-between;padding: 0 24px;"> <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>
<div style="padding: 20px 24px 24px 24px;"> <div style="padding: 20px 24px 24px 24px;">
<el-table :data="tableData" style="width: 100%;height: 285px;"> <el-table :data="equipList" style="width: 100%;height: 285px;">
<el-table-column prop="index" label="序号"/>
<el-table-column prop="number" label="设备编号" /> <el-table-column prop="number" label="设备编号" />
<el-table-column prop="name" label="设备名称" /> <el-table-column prop="name" label="设备名称" />
<el-table-column prop="state" 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> </el-table>
</div> </div>
</div> </div>
@ -184,7 +192,8 @@
<div class="retangleWrap retangleWrapTable"> <div class="retangleWrap retangleWrapTable">
<div class="retangle tableRetangle"> <div class="retangle tableRetangle">
<div style="display: flex;justify-content: space-between;padding: 0 24px;"> <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>
<div style=""> <div style="">
<el-calendar v-model="calendarValue" /> <el-calendar v-model="calendarValue" />
@ -216,12 +225,19 @@ import * as echarts from 'echarts';
warningNum: 0, warningNum: 0,
warningNum2: 0, warningNum2: 0,
tableData: [ tableData: [
{index:1,number: 'GZKJ-01',name: '1号单坩埚熔化炉',state: '完好'}, { index: 1, name: 'GZKJ-01', specification: '500*30', unit: '个', count: 100 },
{index:2,number: 'GZKJ-02',name: '2号单坩埚熔化炉',state: '完好'}, { index: 2, name: 'GZKJ-02', specification: '500*30', unit: '个', count: 100 },
{index:3,number: 'GZKJ-03',name: '3号单坩埚熔化炉',state: '禁用'}, { index: 3, name: 'GZKJ-03', specification: '500*30', unit: '个', count: 100 },
{index:4,number: 'GZKJ-04',name: '4号单坩埚熔化炉',state: '检修'}, { index: 4, name: 'GZKJ-04', specification: '500*30', unit: '个', count: 100 },
], ],
calendarValue:'' equipList: [],
calendarValue: '',
eqState_: {
10: '完好',
20: '限用',
30: '在修',
40: '禁用',
},
} }
}, },
mounted() { mounted() {
@ -234,12 +250,20 @@ import * as echarts from 'echarts';
that.month_s = month; that.month_s = month;
that.initChart(); that.initChart();
this.calendarValue = new Date(); this.calendarValue = new Date();
this.getEquipList()
}, },
methods: { methods: {
getEquipList() {
this.$API.em.equipment.list.req({ page: 0, type: 10 }).then(res => {
this.equipList = res
})
},
// 动态绑定Class // 动态绑定Class
bindClass(type) { bindClass(type) {
let classInfo = { socketDom: true, redColor: false, let classInfo = {
orangeColor:false, yellowColor:false, blueColor:true } socketDom: true, redColor: false,
orangeColor: false, yellowColor: false, blueColor: true
}
if (type == '') { if (type == '') {
classInfo.redColor = true classInfo.redColor = true
} }
@ -312,6 +336,7 @@ import * as echarts from 'echarts';
padding: 20px 20px 0 20px; padding: 20px 20px 0 20px;
box-sizing: border-box; box-sizing: border-box;
} }
.retangle { .retangle {
width: 100%; width: 100%;
border-radius: 15px; border-radius: 15px;
@ -319,34 +344,40 @@ import * as echarts from 'echarts';
position: relative; position: relative;
background: #ffffff; background: #ffffff;
} }
.retangleImg { .retangleImg {
height: 188px; height: 188px;
color: #ffffff; color: #ffffff;
padding-left: 43px; padding-left: 43px;
background: linear-gradient(180.00deg, rgb(58, 149, 255), rgb(27, 92, 255) 100%); background: linear-gradient(180.00deg, rgb(58, 149, 255), rgb(27, 92, 255) 100%);
} }
.companyName { .companyName {
padding-top: 28px; padding-top: 28px;
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 28px;
padding-bottom: 23px; padding-bottom: 23px;
} }
.companyDesc { .companyDesc {
padding-left: 4px; padding-left: 4px;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
} }
.topCardImg { .topCardImg {
height: 188px; height: 188px;
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 0; top: 0;
} }
.countRetangle { .countRetangle {
height: 180px; height: 180px;
padding-top: 20px; padding-top: 20px;
box-sizing: border-box; box-sizing: border-box;
} }
.countItem { .countItem {
width: 20%; width: 20%;
padding-left: 24px; padding-left: 24px;
@ -354,47 +385,58 @@ import * as echarts from 'echarts';
box-sizing: border-box; box-sizing: border-box;
border-right: 1px solid #eeeeee; border-right: 1px solid #eeeeee;
} }
.countItem:last-child { .countItem:last-child {
border-right: 0; border-right: 0;
} }
.countname { .countname {
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
color: rgba(94, 94, 94); color: rgba(94, 94, 94);
} }
.countnum { .countnum {
font-size: 30px; font-size: 30px;
padding-bottom: 11px; padding-bottom: 11px;
line-height: 38px; line-height: 38px;
} }
.countrate { .countrate {
line-height: 20px; line-height: 20px;
color: rgba(0, 0, 0, .45); color: rgba(0, 0, 0, .45);
} }
.redColor { .redColor {
color: rgb(255, 73, 87); color: rgb(255, 73, 87);
} }
.greenColor { .greenColor {
color: rgb(71, 201, 58); color: rgb(71, 201, 58);
} }
.middleRetangle { .middleRetangle {
border-radius: 2px; border-radius: 2px;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
} }
.middleItem { .middleItem {
width: 25%; width: 25%;
padding-left: 34px; padding-left: 34px;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
} }
.middleItem:first-child { .middleItem:first-child {
border-right: 1px solid #eeeeee; border-right: 1px solid #eeeeee;
} }
.tableRetangle { .tableRetangle {
height: auto; height: auto;
padding-top: 20px; padding-top: 20px;
} }
.bottomRetangle { .bottomRetangle {
padding: 20px 0; padding: 20px 0;
box-sizing: border-box; box-sizing: border-box;