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

feat: 大屏样式的修改

This commit is contained in:
caoqianming 2023-11-27 13:53:27 +08:00
parent 98d2b3d20f
commit 831d75bb4d
2 changed files with 1820 additions and 1736 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

334
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">
@ -93,7 +103,7 @@
<div>库存情况</div> <div>库存情况</div>
</div> </div>
<dv-scroll-board id="scrollTable" :config="taskBoard" <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> </div>
</div> </div>
@ -104,11 +114,15 @@
<div class="border_corner border_right_top"></div> <div class="border_corner border_right_top"></div>
<div class="border_corner border_left_bottom"></div> <div class="border_corner border_left_bottom"></div>
<div class="border_corner border_right_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="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">
@ -135,11 +149,15 @@
<div class="border_corner border_right_top"></div> <div class="border_corner border_right_top"></div>
<div class="border_corner border_left_bottom"></div> <div class="border_corner border_left_bottom"></div>
<div class="border_corner border_right_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="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">
@ -158,7 +176,7 @@
</div> </div>
</div> </div>
</div> </div>
<CircleClose class="circleClose" @click="circleClose"/> <CircleClose class="circleClose" @click="circleClose" />
</div> </div>
</div> </div>
@ -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],
@ -211,36 +229,36 @@ export default {
loadedPercent: 0, loadedPercent: 0,
currentLightMesh: null, currentLightMesh: null,
infoVisibel: false, infoVisibel: false,
clickVisible:false, clickVisible: false,
updateTime: '2023-08-17 16:00:00', updateTime: '2023-08-17 16:00:00',
nodesLists: { nodesLists: {
'单身宿舍.004_primitive3': '办公楼', '单身宿舍.004_primitive3': '办公楼',
'立方体.024_primitive1':'成型10车间', '立方体.024_primitive1': '成型10车间',
'立方体.034_primitive1': '配料8车间', '立方体.034_primitive1': '配料8车间',
'立方体.026_primitive1': '成型7车间', '立方体.026_primitive1': '成型7车间',
'立方体.025_primitive1': '加工6车间', '立方体.025_primitive1': '加工6车间',
}, },
objs:{ total: '0', elec: '0' }, objs: { total: '0', elec: '0' },
currentTime:'', currentTime: '',
currentWeek:'', currentWeek: '',
currentDay:'', currentDay: '',
timerTime:null, timerTime: null,
start_date:'', start_date: '',
end_date:'', end_date: '',
dialogData:{ dialogData: {
deptName:'' deptName: ''
}, },
currentObj:{ currentObj: {
deptName:'' deptName: ''
}, },
heightTimer:null, heightTimer: null,
} }
}, },
mounted() { mounted() {
let that = this; let that = this;
let height = document.getElementById('mainBlock').clientHeight; let height = document.getElementById('mainBlock').clientHeight;
let height0 = height / 3 - 55; let height0 = height / 3 - 55;
let height1 = height0- 20; let height1 = height0 - 20;
this.blockHeight = height0 + 'px'; this.blockHeight = height0 + 'px';
this.blockTableHeight = height1 + 'px'; this.blockTableHeight = height1 + 'px';
document.getElementById('scrollTable').style.height = height1 + 'px' document.getElementById('scrollTable').style.height = height1 + 'px'
@ -258,19 +276,19 @@ export default {
let cDate = new Date(); let cDate = new Date();
let week = cDate.getDay();//当前时间的week数 let week = cDate.getDay();//当前时间的week数
// let time = ' 星期' + '日一二三四五六'.charAt(week);//当前时间周几 // let time = ' 星期' + '日一二三四五六'.charAt(week);//当前时间周几
let weekFirst = week-1;//第一天对应的天数 let weekFirst = week - 1;//第一天对应的天数
let weekLast = 7-week;//最后一天对应的天数 let weekLast = 7 - week;//最后一天对应的天数
let first = new Date(new Date(cDate.getTime() - (weekFirst * ondDayTime)));//本周周一 let first = new Date(new Date(cDate.getTime() - (weekFirst * ondDayTime)));//本周周一
let last = new Date(new Date(cDate.getTime() + (weekLast * ondDayTime)));//本周周日 let last = new Date(new Date(cDate.getTime() + (weekLast * ondDayTime)));//本周周日
this.start_date = first.getFullYear()+'-'+(first.getMonth()+1)+'-'+first.getDate(); this.start_date = first.getFullYear() + '-' + (first.getMonth() + 1) + '-' + first.getDate();
this.end_date = last.getFullYear()+'-'+(last.getMonth()+1)+'-'+last.getDate(); this.end_date = last.getFullYear() + '-' + (last.getMonth() + 1) + '-' + last.getDate();
this.getsaleOut(); this.getsaleOut();
}, },
methods: { methods: {
getsaleOut(){ getsaleOut() {
let that = this; let that = this;
let obj ={ let obj = {
query: {start_date:this.start_date,end_date:this.end_date,dept_name: "6车间"}, query: { start_date: this.start_date, end_date: this.end_date, dept_name: "6车间" },
}; };
that.$API.bi.dataset.exec.req('3448456854219546624', obj).then((res) => { that.$API.bi.dataset.exec.req('3448456854219546624', obj).then((res) => {
// console.log(res); // console.log(res);
@ -361,8 +379,8 @@ export default {
button_main.color = "white"; button_main.color = "white";
button_main.cornerRadius = 20; button_main.cornerRadius = 20;
button_main.background = "green"; button_main.background = "green";
button_main.top='100px'; button_main.top = '100px';
button_main.left='0px'; button_main.left = '0px';
control_main.addControl(button_main) control_main.addControl(button_main)
button_main.onPointerClickObservable.add(() => { button_main.onPointerClickObservable.add(() => {
if (camera.alpha != that.initialAlpha || camera.beta != that.initialBeta || camera.radius != that.initialRadius) { if (camera.alpha != that.initialAlpha || camera.beta != that.initialBeta || camera.radius != that.initialRadius) {
@ -462,7 +480,7 @@ export default {
checkbox.isChecked = false; checkbox.isChecked = false;
checkbox.marginLeft = '16px' checkbox.marginLeft = '16px'
checkbox.color = "green"; checkbox.color = "green";
checkbox.top='100px'; checkbox.top = '100px';
checkbox.onIsCheckedChangedObservable.add(function (value) { checkbox.onIsCheckedChangedObservable.add(function (value) {
if (value) { if (value) {
camera.useAutoRotationBehavior = true; camera.useAutoRotationBehavior = true;
@ -476,7 +494,7 @@ export default {
header.width = "80px"; header.width = "80px";
header.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT; header.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
header.color = "white"; header.color = "white";
header.top='100px'; header.top = '100px';
control_main.addControl(header); control_main.addControl(header);
// 添加抓取事件 // 添加抓取事件
const hl1 = new BABYLON.HighlightLayer("hl1", scene); const hl1 = new BABYLON.HighlightLayer("hl1", scene);
@ -530,8 +548,8 @@ export default {
const pickResult = scene.pick(scene.pointerX, scene.pointerY); const pickResult = scene.pick(scene.pointerX, scene.pointerY);
if (pickResult.hit) { if (pickResult.hit) {
const mesh = pickResult.pickedMesh; const mesh = pickResult.pickedMesh;
console.log('mesh',mesh) console.log('mesh', mesh)
if(that.nodesLists[mesh.name]){ if (that.nodesLists[mesh.name]) {
hl1Click.removeAllMeshes(); hl1Click.removeAllMeshes();
highlightLayer.removeAllMeshes(); highlightLayer.removeAllMeshes();
@ -554,7 +572,7 @@ export default {
); );
var ease = new BABYLON.CubicEase(); var ease = new BABYLON.CubicEase();
ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT); 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); BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease);
} }
} }
@ -574,10 +592,10 @@ export default {
engine.resize(); engine.resize();
}); });
}, },
getDeptDetail(name){ getDeptDetail(name) {
if(this.currentObj.deptName==name&&this.clickVisible){ if (this.currentObj.deptName == name && this.clickVisible) {
this.dialogData.deptName = name; this.dialogData.deptName = name;
}else{ } else {
this.infoVisibel = true; this.infoVisibel = true;
this.dialogData.deptName = name; this.dialogData.deptName = name;
} }
@ -1029,7 +1047,7 @@ export default {
} }
}, },
smooth: 0.5, // 设置折线弧度 smooth: 0.5, // 设置折线弧度
data: [75, 60 ,80 ,78, 66 , 71, 81], data: [75, 60, 80, 78, 66, 71, 81],
lineStyle: { lineStyle: {
color: { color: {
type: 'linear', type: 'linear',
@ -1067,7 +1085,7 @@ export default {
} }
}, },
smooth: 0.5, // 设置折线弧度 smooth: 0.5, // 设置折线弧度
data: [65, 50 ,70 ,68, 55 , 60, 69], data: [65, 50, 70, 68, 55, 60, 69],
lineStyle: { lineStyle: {
color: { color: {
type: 'linear', type: 'linear',
@ -1218,7 +1236,7 @@ export default {
pieDom.style.height = this.blockHeight; pieDom.style.height = this.blockHeight;
let pieChart = echarts.init(pieDom); let pieChart = echarts.init(pieDom);
let pieoption = { 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: { legend: {
bottom: 10, bottom: 10,
// top: 'bottom', // top: 'bottom',
@ -1304,7 +1322,7 @@ export default {
}; };
pieChart.setOption(pieoption); pieChart.setOption(pieoption);
}, },
circleClose(){ circleClose() {
this.clickVisible = false; this.clickVisible = false;
this.currentObj.deptName = ''; this.currentObj.deptName = '';
}, },
@ -1317,16 +1335,19 @@ 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;
} }
.pageHeader { .pageHeader {
font-size: 32px; font-size: 32px;
background: none; background: none;
border-bottom: none; border-bottom: none;
@ -1338,41 +1359,41 @@ export default {
font-family: "myfont"; font-family: "myfont";
background: url('/public/img/photon_header.png') no-repeat; background: url('/public/img/photon_header.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.top-line { .top-line {
height: 1px; height: 1px;
width: 3%; width: 3%;
position: absolute; position: absolute;
bottom: 5px; bottom: 5px;
background: rgba(54, 217, 187, 1); background: rgba(54, 217, 187, 1);
} }
.top-line-left { .top-line-left {
left: 24%; left: 24%;
} }
.top-line-right { .top-line-right {
right: 24%; right: 24%;
} }
.flexItem { .flexItem {
margin-bottom: 10px; margin-bottom: 10px;
} }
.blockTitle { .blockTitle {
color: #fff; color: #fff;
height: 40px; height: 40px;
padding-left: 10px; padding-left: 10px;
font-size: 16px; font-size: 16px;
line-height: 40px; line-height: 40px;
font-weight:bold; font-weight: bold;
background: url('/public/img/photon_title.png'); background: url('/public/img/photon_title.png');
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
} }
.blockTitleIcon { .blockTitleIcon {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-top: 10px; margin-top: 10px;
@ -1382,9 +1403,9 @@ export default {
transform-origin: center center; transform-origin: center center;
background: url('/public/img/photon_title_icon.png'); background: url('/public/img/photon_title_icon.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
@keyframes rotate { @keyframes rotate {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
@ -1404,30 +1425,30 @@ export default {
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.row-item { .row-item {
height: 40px !important; height: 40px !important;
line-height: 40px !important; line-height: 40px !important;
} }
#scrollTable>.hader { #scrollTable>.hader {
background: rgb(10, 63, 68) !important; background: rgb(10, 63, 68) !important;
background-color: #0a3f44 !important; background-color: #0a3f44 !important;
} }
.model { .model {
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#renderCanvas { #renderCanvas {
width: 100%; width: 100%;
height: 100% height: 100%
} }
#loadingScreen { #loadingScreen {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 260px; top: 260px;
@ -1436,59 +1457,67 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 30px; font-size: 30px;
} }
.numberFont { .numberFont {
font-size: 22px; font-size: 22px;
font-weight: bold; font-weight: bold;
} }
.numberUnit { .numberUnit {
font-size: 12px; font-size: 12px;
} }
#dashbordProcess .el-progress-circle { #dashbordProcess .el-progress-circle {
height: 60px !important; height: 60px !important;
width: 60px !important; width: 60px !important;
} }
.el-progress--circle .el-progress__text { .el-progress--circle .el-progress__text {
display: block; display: block;
margin-top: 1px; margin-top: 1px;
color: #fff; color: #fff;
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{
color: rgb(5,245,2); .totalNumWrap_green>.totalNumber {
} color: rgb(5, 245, 2);
.totalNum_orange>.totalNumber{ }
.totalNum_orange>.totalNumber {
color: orange; color: orange;
} }
.totalNum_blue>.totalNumber{
color: rgb(2,245,242); .totalNum_blue>.totalNumber {
} color: rgb(2, 245, 242);
.totalNumber{ }
.totalNumber {
font-size: 25px; font-size: 25px;
font-weight: bold; font-weight: bold;
position: absolute; position: absolute;
left: 50%; left: 50%;
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;
font-size: 0.7vw; font-size: 0.7vw;
@ -1496,9 +1525,9 @@ export default {
top: -6px; top: -6px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
.inforBlock { .inforBlock {
left: 60%; left: 60%;
top: 30%; top: 30%;
width: 420px; width: 420px;
@ -1510,53 +1539,55 @@ export default {
font-size: 14px; font-size: 14px;
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;
height: 225px; height: 225px;
padding:40px; padding: 40px;
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;
width: 10px; width: 10px;
height: 10px; height: 10px;
background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0);
border: 2px solid rgba(54, 217, 187, 1); border: 2px solid rgba(54, 217, 187, 1);
} }
.inforBlock>.border_left_top { .inforBlock>.border_left_top {
top: 0; top: 0;
left: 0; left: 0;
border-right: none; border-right: none;
border-bottom: none; border-bottom: none;
} }
.inforBlock>.border_right_top { .inforBlock>.border_right_top {
top: 0; top: 0;
right: 0; right: 0;
border-left: none; border-left: none;
border-bottom: none; border-bottom: none;
} }
.inforBlock>.border_left_bottom { .inforBlock>.border_left_bottom {
bottom: 0; bottom: 0;
left: 0; left: 0;
border-right: none; border-right: none;
border-top: none; border-top: none;
} }
.inforBlock>.border_right_bottom { .inforBlock>.border_right_bottom {
bottom: 0; bottom: 0;
right: 0; right: 0;
border-left: none; border-left: none;
border-top: none; border-top: none;
} }
.inforBlock>.title { .inforBlock>.title {
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
position: absolute; position: absolute;
@ -1564,37 +1595,48 @@ export default {
text-align: center; text-align: center;
width: 100%; width: 100%;
left: 0; left: 0;
} }
.inforBlock>.infoCantier { .inforBlock>.infoCantier {
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;
} */ } */
.circleClose{ .circleClose {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 10px; top: 10px;
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
.percentage-value {
display: block;
margin-top: 6px;
font-size: 28px;
color: white;
}
</style> </style>

218
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="belong_dept_name" label="所在车间" />
<el-table-column prop="state" 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" />
@ -204,24 +213,31 @@
</template> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
data() { data() {
return { return {
time: '', time: '',
day: '', day: '',
year_s:'', year_s: '',
month_s:'', month_s: '',
yearData:[], yearData: [],
monthData:[], monthData: [],
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() {
@ -229,18 +245,26 @@ import * as echarts from 'echarts';
let that = this; let that = this;
var myDate = new Date(); var myDate = new Date();
let year = myDate.getFullYear(); let year = myDate.getFullYear();
let month = myDate.getMonth()+1; let month = myDate.getMonth() + 1;
that.year_s = year; that.year_s = year;
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,
if(type==''){ orangeColor: false, yellowColor: false, blueColor: true
}
if (type == '') {
classInfo.redColor = true classInfo.redColor = true
} }
return classInfo return classInfo
@ -255,17 +279,17 @@ import * as echarts from 'echarts';
console.log("socket已经关闭"); console.log("socket已经关闭");
} }
}, },
showTime(){ showTime() {
this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss') this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
this.day = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日') this.day = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
}, },
interEvent(){ interEvent() {
this.$router.replace({path:'/events'}) this.$router.replace({ path: '/events' })
}, },
interEquipment(){ interEquipment() {
this.$router.replace({path:'/em/equipmentc'}) this.$router.replace({ path: '/em/equipmentc' })
}, },
initChart(){ initChart() {
//柱状图 //柱状图
var dom = document.getElementById("barCharts"); var dom = document.getElementById("barCharts");
var myChart = echarts.init(dom); var myChart = echarts.init(dom);
@ -282,7 +306,7 @@ import * as echarts from 'echarts';
axisLabel: { axisLabel: {
// show: false, // X 轴标签文字旋转角度 // 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: { yAxis: {
type: 'value', type: 'value',
@ -291,11 +315,11 @@ import * as echarts from 'echarts';
}, },
}, },
series: [{ 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', type: 'bar',
barMaxWidth:50, barMaxWidth: 50,
itemStyle:{ itemStyle: {
normal:{color:'rgb(20, 141, 255)'} normal: { color: 'rgb(20, 141, 255)' }
} }
}] }]
}; };
@ -303,101 +327,119 @@ import * as echarts from 'echarts';
}, },
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.retangleWrap{ .retangleWrap {
width: 100%; width: 100%;
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;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
background: #ffffff; background: #ffffff;
} }
.retangleImg{
height:188px; .retangleImg {
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;
display: inline-block; display: inline-block;
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;
background: #ffffff; background: #ffffff;
} }
</style> </style>