feat: em增加返回数据
This commit is contained in:
parent
0316f42e11
commit
48902fe0fe
|
@ -14,21 +14,27 @@
|
|||
<div class="blockTitleIcon"></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 class="flexItem" style="flex:1">
|
||||
<div class="blockTitle">
|
||||
<div class="blockTitleIcon"></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 class="flexItem" style="flex:1">
|
||||
<div class="blockTitle">
|
||||
<div class="blockTitleIcon"></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>
|
||||
|
@ -78,14 +84,18 @@
|
|||
<div class="blockTitleIcon"></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 class="flexItem" style="flex:1">
|
||||
<div class="blockTitle">
|
||||
<div class="blockTitleIcon"></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 class="flexItem" style="flex:1">
|
||||
<div class="blockTitle">
|
||||
|
@ -93,7 +103,7 @@
|
|||
<div>库存情况</div>
|
||||
</div>
|
||||
<dv-scroll-board id="scrollTable" :config="taskBoard"
|
||||
:style="{ 'width': '100%', 'height': blockTableHeight,'margin-top':'5px'}" />
|
||||
:style="{ 'width': '100%', 'height': blockTableHeight, 'margin-top': '5px' }" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -104,11 +114,15 @@
|
|||
<div class="border_corner border_right_top"></div>
|
||||
<div class="border_corner border_left_bottom"></div>
|
||||
<div class="border_corner border_right_bottom"></div>
|
||||
<p class="title">{{dialogData.deptName}}</p>
|
||||
<p class="title">{{ dialogData.deptName }}</p>
|
||||
<div class="infoCantier">
|
||||
<div class="leftBlock">
|
||||
<el-progress width="50" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25"
|
||||
id="dashbordProcess" />
|
||||
<el-progress width="70" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25"
|
||||
id="dashbordProcess">
|
||||
<template #default="{ percentage }">
|
||||
<span class="percentage-value" style="font-size: 16px">{{ percentage }}%</span>
|
||||
</template>
|
||||
</el-progress>
|
||||
<span>完成进度</span>
|
||||
</div>
|
||||
<div class="rightBlock">
|
||||
|
@ -135,11 +149,15 @@
|
|||
<div class="border_corner border_right_top"></div>
|
||||
<div class="border_corner border_left_bottom"></div>
|
||||
<div class="border_corner border_right_bottom"></div>
|
||||
<p class="title">{{currentObj.deptName}}</p>
|
||||
<p class="title">{{ currentObj.deptName }}</p>
|
||||
<div class="infoCantier">
|
||||
<div class="leftBlock">
|
||||
<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>
|
||||
</div>
|
||||
<div class="rightBlock">
|
||||
|
@ -158,7 +176,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CircleClose class="circleClose" @click="circleClose"/>
|
||||
<CircleClose class="circleClose" @click="circleClose" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
@ -183,15 +201,15 @@ export default {
|
|||
// waitTime: 1000,
|
||||
columnWidth: [1, 1, 1],
|
||||
data: [
|
||||
['ZB2-1', '6车间', '<span style="color:green;">30000</span>'],
|
||||
['ZB2-2', '7车间', '<span style="color:green;">40000</span>'],
|
||||
['ZB2-3', '8车间', '<span style="color:green;">50000</span>'],
|
||||
['ZJ2-1', '8车间', '<span style="color:green;">35000</span>'],
|
||||
['ZJ2-2', '10车间', '<span style="color:green;">30000</span>'],
|
||||
['ZJ2-3', '10车间', '<span style="color:red;">100</span>'],
|
||||
['ZT2-1', '10车间', '<span style="color:red;">100</span>'],
|
||||
['ZT2-2', '10车间', '<span style="color:red;">100</span>'],
|
||||
['ZT2-3', '10车间', '<span style="color:red;">100</span>'],
|
||||
['ZB2-1', '500*30', '<span style="color:green;">30000</span>'],
|
||||
['ZB2-2', '500*30', '<span style="color:green;">40000</span>'],
|
||||
['ZB2-3', '500*30', '<span style="color:green;">50000</span>'],
|
||||
['ZJ2-1', '500*30', '<span style="color:green;">35000</span>'],
|
||||
['ZJ2-2', '500*30', '<span style="color:green;">30000</span>'],
|
||||
['ZJ2-3', '500*30', '<span style="color:red;">100</span>'],
|
||||
['ZT2-1', '500*30', '<span style="color:red;">100</span>'],
|
||||
['ZT2-2', '500*30', '<span style="color:red;">100</span>'],
|
||||
['ZT2-3', '500*30', '<span style="color:red;">100</span>'],
|
||||
],
|
||||
index: true,
|
||||
columnWidth: [50],
|
||||
|
@ -211,36 +229,36 @@ export default {
|
|||
loadedPercent: 0,
|
||||
currentLightMesh: null,
|
||||
infoVisibel: false,
|
||||
clickVisible:false,
|
||||
clickVisible: false,
|
||||
updateTime: '2023-08-17 16:00:00',
|
||||
nodesLists: {
|
||||
'单身宿舍.004_primitive3': '办公楼',
|
||||
'立方体.024_primitive1':'成型10车间',
|
||||
'立方体.024_primitive1': '成型10车间',
|
||||
'立方体.034_primitive1': '配料8车间',
|
||||
'立方体.026_primitive1': '成型7车间',
|
||||
'立方体.025_primitive1': '加工6车间',
|
||||
},
|
||||
objs:{ total: '0', elec: '0' },
|
||||
currentTime:'',
|
||||
currentWeek:'',
|
||||
currentDay:'',
|
||||
timerTime:null,
|
||||
start_date:'',
|
||||
end_date:'',
|
||||
dialogData:{
|
||||
deptName:''
|
||||
objs: { total: '0', elec: '0' },
|
||||
currentTime: '',
|
||||
currentWeek: '',
|
||||
currentDay: '',
|
||||
timerTime: null,
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
dialogData: {
|
||||
deptName: ''
|
||||
},
|
||||
currentObj:{
|
||||
deptName:''
|
||||
currentObj: {
|
||||
deptName: ''
|
||||
},
|
||||
heightTimer:null,
|
||||
heightTimer: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
let height = document.getElementById('mainBlock').clientHeight;
|
||||
let height0 = height / 3 - 55;
|
||||
let height1 = height0- 20;
|
||||
let height1 = height0 - 20;
|
||||
this.blockHeight = height0 + 'px';
|
||||
this.blockTableHeight = height1 + 'px';
|
||||
document.getElementById('scrollTable').style.height = height1 + 'px'
|
||||
|
@ -258,19 +276,19 @@ export default {
|
|||
let cDate = new Date();
|
||||
let week = cDate.getDay();//当前时间的week数
|
||||
// let time = ' 星期' + '日一二三四五六'.charAt(week);//当前时间周几
|
||||
let weekFirst = week-1;//第一天对应的天数
|
||||
let weekLast = 7-week;//最后一天对应的天数
|
||||
let weekFirst = week - 1;//第一天对应的天数
|
||||
let weekLast = 7 - week;//最后一天对应的天数
|
||||
let first = new Date(new Date(cDate.getTime() - (weekFirst * ondDayTime)));//本周周一
|
||||
let last = new Date(new Date(cDate.getTime() + (weekLast * ondDayTime)));//本周周日
|
||||
this.start_date = first.getFullYear()+'-'+(first.getMonth()+1)+'-'+first.getDate();
|
||||
this.end_date = last.getFullYear()+'-'+(last.getMonth()+1)+'-'+last.getDate();
|
||||
this.start_date = first.getFullYear() + '-' + (first.getMonth() + 1) + '-' + first.getDate();
|
||||
this.end_date = last.getFullYear() + '-' + (last.getMonth() + 1) + '-' + last.getDate();
|
||||
this.getsaleOut();
|
||||
},
|
||||
methods: {
|
||||
getsaleOut(){
|
||||
getsaleOut() {
|
||||
let that = this;
|
||||
let obj ={
|
||||
query: {start_date:this.start_date,end_date:this.end_date,dept_name: "6车间"},
|
||||
let obj = {
|
||||
query: { start_date: this.start_date, end_date: this.end_date, dept_name: "6车间" },
|
||||
};
|
||||
that.$API.bi.dataset.exec.req('3448456854219546624', obj).then((res) => {
|
||||
// console.log(res);
|
||||
|
@ -361,8 +379,8 @@ export default {
|
|||
button_main.color = "white";
|
||||
button_main.cornerRadius = 20;
|
||||
button_main.background = "green";
|
||||
button_main.top='100px';
|
||||
button_main.left='0px';
|
||||
button_main.top = '100px';
|
||||
button_main.left = '0px';
|
||||
control_main.addControl(button_main)
|
||||
button_main.onPointerClickObservable.add(() => {
|
||||
if (camera.alpha != that.initialAlpha || camera.beta != that.initialBeta || camera.radius != that.initialRadius) {
|
||||
|
@ -462,7 +480,7 @@ export default {
|
|||
checkbox.isChecked = false;
|
||||
checkbox.marginLeft = '16px'
|
||||
checkbox.color = "green";
|
||||
checkbox.top='100px';
|
||||
checkbox.top = '100px';
|
||||
checkbox.onIsCheckedChangedObservable.add(function (value) {
|
||||
if (value) {
|
||||
camera.useAutoRotationBehavior = true;
|
||||
|
@ -476,7 +494,7 @@ export default {
|
|||
header.width = "80px";
|
||||
header.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
|
||||
header.color = "white";
|
||||
header.top='100px';
|
||||
header.top = '100px';
|
||||
control_main.addControl(header);
|
||||
// 添加抓取事件
|
||||
const hl1 = new BABYLON.HighlightLayer("hl1", scene);
|
||||
|
@ -530,8 +548,8 @@ export default {
|
|||
const pickResult = scene.pick(scene.pointerX, scene.pointerY);
|
||||
if (pickResult.hit) {
|
||||
const mesh = pickResult.pickedMesh;
|
||||
console.log('mesh',mesh)
|
||||
if(that.nodesLists[mesh.name]){
|
||||
console.log('mesh', mesh)
|
||||
if (that.nodesLists[mesh.name]) {
|
||||
hl1Click.removeAllMeshes();
|
||||
highlightLayer.removeAllMeshes();
|
||||
|
||||
|
@ -554,7 +572,7 @@ export default {
|
|||
);
|
||||
var ease = new BABYLON.CubicEase();
|
||||
ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
|
||||
BABYLON.Animation.CreateAndStartAnimation('meshclick', camera, 'position', 45, 200, camera.position, cameraPosition, 0,ease);
|
||||
BABYLON.Animation.CreateAndStartAnimation('meshclick', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
|
||||
BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease);
|
||||
}
|
||||
}
|
||||
|
@ -574,10 +592,10 @@ export default {
|
|||
engine.resize();
|
||||
});
|
||||
},
|
||||
getDeptDetail(name){
|
||||
if(this.currentObj.deptName==name&&this.clickVisible){
|
||||
getDeptDetail(name) {
|
||||
if (this.currentObj.deptName == name && this.clickVisible) {
|
||||
this.dialogData.deptName = name;
|
||||
}else{
|
||||
} else {
|
||||
this.infoVisibel = true;
|
||||
this.dialogData.deptName = name;
|
||||
}
|
||||
|
@ -1029,7 +1047,7 @@ export default {
|
|||
}
|
||||
},
|
||||
smooth: 0.5, // 设置折线弧度
|
||||
data: [75, 60 ,80 ,78, 66 , 71, 81],
|
||||
data: [75, 60, 80, 78, 66, 71, 81],
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
|
@ -1067,7 +1085,7 @@ export default {
|
|||
}
|
||||
},
|
||||
smooth: 0.5, // 设置折线弧度
|
||||
data: [65, 50 ,70 ,68, 55 , 60, 69],
|
||||
data: [65, 50, 70, 68, 55, 60, 69],
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
|
@ -1218,7 +1236,7 @@ export default {
|
|||
pieDom.style.height = this.blockHeight;
|
||||
let pieChart = echarts.init(pieDom);
|
||||
let pieoption = {
|
||||
color: ['rgb(3,195,198)','rgb(155,248,249)', 'rgb(110,181,249)','rgb(205,248,248)', 'rgb(248,189,118)'],
|
||||
color: ['rgb(3,195,198)', 'rgb(155,248,249)', 'rgb(110,181,249)', 'rgb(205,248,248)', 'rgb(248,189,118)'],
|
||||
legend: {
|
||||
bottom: 10,
|
||||
// top: 'bottom',
|
||||
|
@ -1304,7 +1322,7 @@ export default {
|
|||
};
|
||||
pieChart.setOption(pieoption);
|
||||
},
|
||||
circleClose(){
|
||||
circleClose() {
|
||||
this.clickVisible = false;
|
||||
this.currentObj.deptName = '';
|
||||
},
|
||||
|
@ -1317,16 +1335,19 @@ export default {
|
|||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@font-face {
|
||||
font-family: 'myfont'; /* 字体名称 */
|
||||
src: url('../../utils/youShe.ttf'); /* 字体文件相对路径 */
|
||||
}
|
||||
.container {
|
||||
@font-face {
|
||||
font-family: 'myfont';
|
||||
/* 字体名称 */
|
||||
src: url('../../utils/youShe.ttf');
|
||||
/* 字体文件相对路径 */
|
||||
}
|
||||
|
||||
.container {
|
||||
background: url('/public/img/photon_bg.png') no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.pageHeader {
|
||||
.pageHeader {
|
||||
font-size: 32px;
|
||||
background: none;
|
||||
border-bottom: none;
|
||||
|
@ -1338,41 +1359,41 @@ export default {
|
|||
font-family: "myfont";
|
||||
background: url('/public/img/photon_header.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.top-line {
|
||||
.top-line {
|
||||
height: 1px;
|
||||
width: 3%;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
background: rgba(54, 217, 187, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.top-line-left {
|
||||
.top-line-left {
|
||||
left: 24%;
|
||||
}
|
||||
}
|
||||
|
||||
.top-line-right {
|
||||
.top-line-right {
|
||||
right: 24%;
|
||||
}
|
||||
}
|
||||
|
||||
.flexItem {
|
||||
.flexItem {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.blockTitle {
|
||||
.blockTitle {
|
||||
color: #fff;
|
||||
height: 40px;
|
||||
padding-left: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
font-weight:bold;
|
||||
font-weight: bold;
|
||||
background: url('/public/img/photon_title.png');
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.blockTitleIcon {
|
||||
.blockTitleIcon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: 10px;
|
||||
|
@ -1382,9 +1403,9 @@ export default {
|
|||
transform-origin: center center;
|
||||
background: url('/public/img/photon_title_icon.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
@ -1404,30 +1425,30 @@ export default {
|
|||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row-item {
|
||||
.row-item {
|
||||
height: 40px !important;
|
||||
line-height: 40px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#scrollTable>.hader {
|
||||
#scrollTable>.hader {
|
||||
background: rgb(10, 63, 68) !important;
|
||||
background-color: #0a3f44 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.model {
|
||||
.model {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#renderCanvas {
|
||||
#renderCanvas {
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
}
|
||||
|
||||
#loadingScreen {
|
||||
#loadingScreen {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 260px;
|
||||
|
@ -1436,59 +1457,67 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.numberFont {
|
||||
.numberFont {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.numberUnit {
|
||||
.numberUnit {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
#dashbordProcess .el-progress-circle {
|
||||
#dashbordProcess .el-progress-circle {
|
||||
height: 60px !important;
|
||||
width: 60px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-progress--circle .el-progress__text {
|
||||
.el-progress--circle .el-progress__text {
|
||||
display: block;
|
||||
margin-top: 1px;
|
||||
color: #fff;
|
||||
font-size: 20px !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.totalNumContnier{
|
||||
}
|
||||
|
||||
.totalNumContnier {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
.totalNumWrap{
|
||||
}
|
||||
|
||||
.totalNumWrap {
|
||||
margin: 0 10px;
|
||||
position: relative;
|
||||
}
|
||||
.totalNumWrap>img{
|
||||
}
|
||||
|
||||
.totalNumWrap>img {
|
||||
width: 10vw;
|
||||
}
|
||||
.totalNumWrap_green>.totalNumber{
|
||||
color: rgb(5,245,2);
|
||||
}
|
||||
.totalNum_orange>.totalNumber{
|
||||
}
|
||||
|
||||
.totalNumWrap_green>.totalNumber {
|
||||
color: rgb(5, 245, 2);
|
||||
}
|
||||
|
||||
.totalNum_orange>.totalNumber {
|
||||
color: orange;
|
||||
}
|
||||
.totalNum_blue>.totalNumber{
|
||||
color: rgb(2,245,242);
|
||||
}
|
||||
.totalNumber{
|
||||
}
|
||||
|
||||
.totalNum_blue>.totalNumber {
|
||||
color: rgb(2, 245, 242);
|
||||
}
|
||||
|
||||
.totalNumber {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
.totalNumText{
|
||||
}
|
||||
|
||||
.totalNumText {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 0.7vw;
|
||||
|
@ -1496,9 +1525,9 @@ export default {
|
|||
top: -6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.inforBlock {
|
||||
.inforBlock {
|
||||
left: 60%;
|
||||
top: 30%;
|
||||
width: 420px;
|
||||
|
@ -1510,53 +1539,55 @@ export default {
|
|||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(to bottom left, rgba(25, 154, 118, .5), rgba(31, 44, 50, .5));
|
||||
}
|
||||
.inforBlock.clickBlock{
|
||||
}
|
||||
|
||||
.inforBlock.clickBlock {
|
||||
left: 50%;
|
||||
width: 630px;
|
||||
height: 225px;
|
||||
padding:40px;
|
||||
font-size:16px;
|
||||
transform:translateX(-50%)
|
||||
}
|
||||
.inforBlock>.border_corner {
|
||||
padding: 40px;
|
||||
font-size: 16px;
|
||||
transform: translateX(-50%)
|
||||
}
|
||||
|
||||
.inforBlock>.border_corner {
|
||||
z-index: 2500;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: 2px solid rgba(54, 217, 187, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.inforBlock>.border_left_top {
|
||||
.inforBlock>.border_left_top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.inforBlock>.border_right_top {
|
||||
.inforBlock>.border_right_top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.inforBlock>.border_left_bottom {
|
||||
.inforBlock>.border_left_bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.inforBlock>.border_right_bottom {
|
||||
.inforBlock>.border_right_bottom {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.inforBlock>.title {
|
||||
.inforBlock>.title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
|
@ -1564,37 +1595,48 @@ export default {
|
|||
text-align: center;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.inforBlock>.infoCantier {
|
||||
.inforBlock>.infoCantier {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.infoCantier>.leftBlock {
|
||||
}
|
||||
|
||||
.infoCantier>.leftBlock {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.infoCantier>.rightBlock {
|
||||
}
|
||||
|
||||
.infoCantier>.rightBlock {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.infoCantier>.rightBlock>.countWrap {
|
||||
}
|
||||
|
||||
.infoCantier>.rightBlock>.countWrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 280px;
|
||||
margin-top: 10px
|
||||
}
|
||||
/* .clickBlock{
|
||||
}
|
||||
|
||||
/* .clickBlock{
|
||||
position:relative;
|
||||
} */
|
||||
.circleClose{
|
||||
.circleClose {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.percentage-value {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
font-size: 28px;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
|
@ -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,24 +213,31 @@
|
|||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
export default {
|
||||
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: '检修'},
|
||||
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 },
|
||||
],
|
||||
calendarValue:''
|
||||
equipList: [],
|
||||
calendarValue: '',
|
||||
eqState_: {
|
||||
10: '完好',
|
||||
20: '限用',
|
||||
30: '在修',
|
||||
40: '禁用',
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
@ -229,18 +245,26 @@ import * as echarts from 'echarts';
|
|||
let that = this;
|
||||
var myDate = new Date();
|
||||
let year = myDate.getFullYear();
|
||||
let month = myDate.getMonth()+1;
|
||||
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==''){
|
||||
bindClass(type) {
|
||||
let classInfo = {
|
||||
socketDom: true, redColor: false,
|
||||
orangeColor: false, yellowColor: false, blueColor: true
|
||||
}
|
||||
if (type == '') {
|
||||
classInfo.redColor = true
|
||||
}
|
||||
return classInfo
|
||||
|
@ -255,17 +279,17 @@ import * as echarts from 'echarts';
|
|||
console.log("socket已经关闭");
|
||||
}
|
||||
},
|
||||
showTime(){
|
||||
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'})
|
||||
interEvent() {
|
||||
this.$router.replace({ path: '/events' })
|
||||
},
|
||||
interEquipment(){
|
||||
this.$router.replace({path:'/em/equipmentc'})
|
||||
interEquipment() {
|
||||
this.$router.replace({ path: '/em/equipmentc' })
|
||||
},
|
||||
initChart(){
|
||||
initChart() {
|
||||
//柱状图
|
||||
var dom = document.getElementById("barCharts");
|
||||
var myChart = echarts.init(dom);
|
||||
|
@ -282,7 +306,7 @@ import * as echarts from 'echarts';
|
|||
axisLabel: {
|
||||
// show: false, // X 轴标签文字旋转角度
|
||||
},
|
||||
data:['1号','2号','3号','4号','5号','6号','7号','8号','9号','10号']
|
||||
data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
|
@ -291,11 +315,11 @@ import * as echarts from 'echarts';
|
|||
},
|
||||
},
|
||||
series: [{
|
||||
data: [10,9,8,11,12,10,9,10,8,9,10],
|
||||
data: [10, 9, 8, 11, 12, 10, 9, 10, 8, 9, 10],
|
||||
type: 'bar',
|
||||
barMaxWidth:50,
|
||||
itemStyle:{
|
||||
normal:{color:'rgb(20, 141, 255)'}
|
||||
barMaxWidth: 50,
|
||||
itemStyle: {
|
||||
normal: { color: 'rgb(20, 141, 255)' }
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
@ -303,101 +327,119 @@ import * as echarts from 'echarts';
|
|||
},
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.retangleWrap{
|
||||
.retangleWrap {
|
||||
width: 100%;
|
||||
padding: 20px 20px 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.retangle{
|
||||
}
|
||||
|
||||
.retangle {
|
||||
width: 100%;
|
||||
border-radius: 15px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
}
|
||||
.retangleImg{
|
||||
height:188px;
|
||||
}
|
||||
|
||||
.retangleImg {
|
||||
height: 188px;
|
||||
color: #ffffff;
|
||||
padding-left: 43px;
|
||||
background: linear-gradient(180.00deg, rgb(58, 149, 255),rgb(27, 92, 255) 100%);
|
||||
}
|
||||
.companyName{
|
||||
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{
|
||||
}
|
||||
|
||||
.companyDesc {
|
||||
padding-left: 4px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.topCardImg{
|
||||
}
|
||||
|
||||
.topCardImg {
|
||||
height: 188px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
}
|
||||
.countRetangle{
|
||||
}
|
||||
|
||||
.countRetangle {
|
||||
height: 180px;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.countItem{
|
||||
}
|
||||
|
||||
.countItem {
|
||||
width: 20%;
|
||||
padding-left: 24px;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #eeeeee;
|
||||
}
|
||||
.countItem:last-child{
|
||||
}
|
||||
|
||||
.countItem:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
.countname{
|
||||
}
|
||||
|
||||
.countname {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: rgba(94,94,94);
|
||||
}
|
||||
.countnum{
|
||||
color: rgba(94, 94, 94);
|
||||
}
|
||||
|
||||
.countnum {
|
||||
font-size: 30px;
|
||||
padding-bottom: 11px;
|
||||
line-height: 38px;
|
||||
}
|
||||
.countrate{
|
||||
}
|
||||
|
||||
.countrate {
|
||||
line-height: 20px;
|
||||
color: rgba(0,0,0,.45);
|
||||
}
|
||||
.redColor{
|
||||
color: rgba(0, 0, 0, .45);
|
||||
}
|
||||
|
||||
.redColor {
|
||||
color: rgb(255, 73, 87);
|
||||
}
|
||||
.greenColor{
|
||||
}
|
||||
|
||||
.greenColor {
|
||||
color: rgb(71, 201, 58);
|
||||
}
|
||||
.middleRetangle{
|
||||
}
|
||||
|
||||
.middleRetangle {
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.middleItem{
|
||||
}
|
||||
|
||||
.middleItem {
|
||||
width: 25%;
|
||||
padding-left: 34px;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.middleItem:first-child{
|
||||
}
|
||||
|
||||
.middleItem:first-child {
|
||||
border-right: 1px solid #eeeeee;
|
||||
}
|
||||
.tableRetangle{
|
||||
}
|
||||
|
||||
.tableRetangle {
|
||||
height: auto;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.bottomRetangle{
|
||||
}
|
||||
|
||||
.bottomRetangle {
|
||||
padding: 20px 0;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue