dev
/
GScreenWEB_TPMes
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式修改

This commit is contained in:
ljx 2025-07-11 15:21:53 +08:00
parent 945df8d0ed
commit 569b27befe
8 changed files with 88 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/AppV3.vue Normal file
View File

@ -0,0 +1,49 @@
<template>
<div id="app">
<component :is="currentComponent" />
</div>
</template>
<script>
import api from './api.js'
import testRes from './components/baozuo-demo/testbak'
const queryParams = new URLSearchParams(window.location.search);
const dataTypeParam = queryParams.get('q');
export default {
name: 'app',
data() {
return {
dataType: '',
//确保testRes加载好后再加载组件
currentComponent: null
}
},
components: {
// 异步注册两个组件
datav: () => import('./components/dianfanbao-demo/index.vue'),
},
created() {
this.dataType = dataTypeParam;
this.currentComponent = 'datav';
},
computed: {
},
methods: {
}
}
</script>
<style lang="less">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
width: 100%;
height: 100%;
}
</style>

6
src/components/dianfanbao-demo/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div id="data-view"> <div id="data-view">
<dv-full-screen-container> <!-- <dv-full-screen-container> -->
<top-header :Name="'电饭煲生产看板'" style="height:10%;" /> <top-header :Name="'电饭煲生产看板'" style="height:10%;" />
@ -15,7 +15,7 @@
<NewContain3 :dataType="dataType" style="width:100%;height:100%"/> <NewContain3 :dataType="dataType" style="width:100%;height:100%"/>
</div> </div>
</div> </div>
<div style="display:flex;height: 48%;justify-content: space-around;"> <div style="display:flex;height: 44%;justify-content: space-around;">
<div class="main-container" style="width: 48%;"> <div class="main-container" style="width: 48%;">
<NewContain4 :dataType="dataType" style="width:100%;height:100%"/> <NewContain4 :dataType="dataType" style="width:100%;height:100%"/>
</div> </div>
@ -24,7 +24,7 @@
</div> </div>
</div> </div>
</dv-full-screen-container> <!-- </dv-full-screen-container> -->
</div> </div>
</template> </template>

8
src/components/dianfanbao-demo/newContain.vue
View File

@ -8,7 +8,7 @@
<div class="ncbmc-title"> <div class="ncbmc-title">
<!-- <span class="title-decoration"></span> --> <!-- <span class="title-decoration"></span> -->
<p style="margin: 0;text-align: center;">基本信息</p> <p style="margin: 0;text-align: center;">基本信息</p>
<p style="margin: 0;font-size: 20px;text-align: center;font-weight: bold;">BASIC INFORMATION</p> <p style="margin: 0;font-size: 19px;text-align: center;font-weight: bold;">BASIC INFORMATION</p>
</div> </div>
<div class="ncbmc-content"> <div class="ncbmc-content">
<div class="text-item"> <div class="text-item">
@ -192,12 +192,12 @@ export default {
margin-top: 50px; margin-top: 50px;
width: 100%; width: 100%;
.text-item{ .text-item{
font-size: 28px; font-size: 22px;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
width: 70%; width: 70%;
padding: 10px 20px; padding: 5px 20px;
margin-bottom: 20px; margin-bottom: 10px;
border: 2px solid #fff; border: 2px solid #fff;
background-color:rgba(4,49,128,.4); background-color:rgba(4,49,128,.4);
p{margin: 0;} p{margin: 0;}

7
src/components/dianfanbao-demo/newContain2.vue
View File

@ -8,7 +8,7 @@
<div class="ncbmc-title"> <div class="ncbmc-title">
<!-- <span class="title-decoration"></span> --> <!-- <span class="title-decoration"></span> -->
<p style="margin: 0;text-align: center;">当前任务</p> <p style="margin: 0;text-align: center;">当前任务</p>
<p style="margin: 0;font-size: 20px;text-align: center;font-weight: bold;">CURRENT TASK</p> <p style="margin: 0;font-size: 19px;text-align: center;font-weight: bold;">CURRENT TASK</p>
</div> </div>
<div class="ncb-currenttask"> <div class="ncb-currenttask">
<div class="current-title"> <div class="current-title">
@ -202,7 +202,6 @@ export default {
.ncb-currenttask{ .ncb-currenttask{
width: 100%; width: 100%;
margin-top: 50px; margin-top: 50px;
.current-title{ .current-title{
width: 100%; width: 100%;
margin-bottom: 15px; margin-bottom: 15px;
@ -213,11 +212,11 @@ export default {
background-color: #08e5ff; // 淡蓝色 background-color: #08e5ff; // 淡蓝色
margin-right: 10px; margin-right: 10px;
} }
font-size: 30px; font-size: 26px;
font-weight: bold; font-weight: bold;
} }
.current-item{ .current-item{
font-size: 28px; font-size: 24px;
font-weight: bold; font-weight: bold;
padding-left: 20px; padding-left: 20px;
margin-bottom: 15px; margin-bottom: 15px;

42
src/components/dianfanbao-demo/newContain3.vue
View File

@ -8,53 +8,53 @@
<div class="ncbmc-title"> <div class="ncbmc-title">
<!-- <span class="title-decoration"></span> --> <!-- <span class="title-decoration"></span> -->
<p style="margin: 0;text-align: center;">不良下线前五</p> <p style="margin: 0;text-align: center;">不良下线前五</p>
<p style="margin: 0;font-size: 20px;text-align: center;font-weight: bold;">TOP 5 NC COMPLETION REASON</p> <p style="margin: 0;font-size: 19px;text-align: center;font-weight: bold;">TOP 5 NC COMPLETION REASON</p>
</div> </div>
<div class="nc-box"> <div class="nc-box">
<div class="ncbox-left"> <div class="ncbox-left">
<div style="font-size: 30px;font-weight: bold;margin-bottom: 20px;"> <div style="font-size: 24px;font-weight: bold;margin-bottom: 20px;">
产线当日合格率 产线当日合格率
</div> </div>
<div style="font-size: 50px;font-weight: bold;color: brown;"> <div style="font-size: 40px;font-weight: bold;color: brown;">
70% 70%
</div> </div>
<div id="ncbox-pie" style="width: 250px;height: 250px;"> <div id="ncbox-pie" style="width: 100%;height: 250px;">
</div> </div>
</div> </div>
<div class="ncbox-right"> <div class="ncbox-right">
<div class="ncbox-right-title"> <div class="ncbox-right-title">
<div style="width: 25%;">NO</div> <div style="width: 20%;">NO</div>
<div style="width: 35%;">不良原因</div> <div style="width: 40%;">不良原因</div>
<div style="width: 20%;">数量</div> <div style="width: 20%;">数量</div>
<div style="width: 20%;">占比</div> <div style="width: 20%;">占比</div>
</div> </div>
<div class="ncbox-right-item"> <div class="ncbox-right-item">
<div style="width: 25%;">No.1</div> <div style="width: 20%;">No.1</div>
<div style="width: 35%;">不通电</div> <div style="width: 40%;">不通电</div>
<div style="width: 20%;">4</div> <div style="width: 20%;">4</div>
<div style="width: 20%;">30.77%</div> <div style="width: 20%;">30.77%</div>
</div> </div>
<div class="ncbox-right-item"> <div class="ncbox-right-item">
<div style="width: 25%;">No.2</div> <div style="width: 20%;">No.2</div>
<div style="width: 35%;">发热盘托盘刮花，卡滞、油污</div> <div style="width: 40%;">发热盘托盘刮花，卡滞、油污</div>
<div style="width: 20%;">3</div> <div style="width: 20%;">3</div>
<div style="width: 20%;">23.08%</div> <div style="width: 20%;">23.08%</div>
</div> </div>
<div class="ncbox-right-item"> <div class="ncbox-right-item">
<div style="width: 25%;">No.3</div> <div style="width: 20%;">No.3</div>
<div style="width: 35%;">螺丝未打紧、漏打、滑牙。</div> <div style="width: 40%;">螺丝未打紧、漏打、滑牙。</div>
<div style="width: 20%;">3</div> <div style="width: 20%;">3</div>
<div style="width: 20%;">23.08%</div> <div style="width: 20%;">23.08%</div>
</div> </div>
<div class="ncbox-right-item"> <div class="ncbox-right-item">
<div style="width: 25%;">No.4</div> <div style="width: 20%;">No.4</div>
<div style="width: 35%;">按健失灵、高、低、无手感等不良.</div> <div style="width: 40%;">按健失灵、高、低、无手感等不良.</div>
<div style="width: 20%;">2</div> <div style="width: 20%;">2</div>
<div style="width: 20%;">15.38%</div> <div style="width: 20%;">15.38%</div>
</div> </div>
<div class="ncbox-right-item"> <div class="ncbox-right-item">
<div style="width: 25%;">No.5</div> <div style="width: 20%;">No.5</div>
<div style="width: 35%;">氖赠/导线压线、破皮、露铜等不良，</div> <div style="width: 40%;">氖赠/导线压线、破皮、露铜等不良，</div>
<div style="width: 20%;">1</div> <div style="width: 20%;">1</div>
<div style="width: 20%;">7.69%</div> <div style="width: 20%;">7.69%</div>
</div> </div>
@ -115,7 +115,7 @@ export default {
// 不显示标签 // 不显示标签
label: { label: {
// show: false // show: false
fontSize: 20, fontSize: 16,
fontWeight: 'bold', fontWeight: 'bold',
color: '#333', color: '#333',
formatter: '{b}\n {d}%', formatter: '{b}\n {d}%',
@ -257,20 +257,20 @@ export default {
.ncbox-right-title{ .ncbox-right-title{
width: 100%; width: 100%;
display: flex; display: flex;
font-size: 26px; font-size: 20px;
font-weight: bold; font-weight: bold;
background-color: #1d5ef5; background-color: #1d5ef5;
margin-bottom: 5px; margin-bottom: 5px;
div{padding: 10px 0;} div{padding: 8px 0;}
} }
.ncbox-right-item{ .ncbox-right-item{
width: 100%; width: 100%;
display: flex; display: flex;
font-size: 20px; font-size: 16px;
font-weight: bold; font-weight: bold;
background-color: #3a72f534; background-color: #3a72f534;
margin-bottom: 5px; margin-bottom: 5px;
div{padding: 10px 0;} div{padding: 6px 0;}
} }
} }
} }

8
src/components/dianfanbao-demo/newContain4.vue
View File

@ -8,7 +8,7 @@
<span class="title-decoration"></span> <span class="title-decoration"></span>
本日产量/预计产量对比 本日产量/预计产量对比
</div> </div>
<div id="nbc-line1" style="width: 100%; height: 600px;"></div> <div id="nbc-line1" style="width: 100%;height: calc(100% - 100px);"></div>
</dv-border-box-1> </dv-border-box-1>
</div> </div>
</div> </div>
@ -66,7 +66,7 @@ export default {
type: 'category', type: 'category',
data: ['08:00-09:00', '09:00-10:00', '10:00-12:00', '13:30-15:30', '15:30-17:30', '17:30-19:30'], data: ['08:00-09:00', '09:00-10:00', '10:00-12:00', '13:30-15:30', '15:30-17:30', '17:30-19:30'],
axisLabel: { axisLabel: {
fontSize: 20, // 放大 x 轴文字 fontSize: 14, // 放大 x 轴文字
fontWeight: 'bold', // x 轴文字加粗 fontWeight: 'bold', // x 轴文字加粗
color: '#fff' // 设置 x 轴文字为白色 color: '#fff' // 设置 x 轴文字为白色
} }
@ -74,7 +74,7 @@ export default {
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
fontSize: 26, // 放大 y 轴文字 fontSize: 20, // 放大 y 轴文字
fontWeight: 'bold', // y 轴文字加粗 fontWeight: 'bold', // y 轴文字加粗
color: '#fff' // 设置 y 轴文字为白色 color: '#fff' // 设置 y 轴文字为白色
}, },
@ -94,7 +94,7 @@ export default {
label: { label: {
show: true, show: true,
position: 'inside', position: 'inside',
fontSize: '22px', fontSize: '18px',
fontWeight: 'bolder', // 柱状图 label 字体加粗 fontWeight: 'bolder', // 柱状图 label 字体加粗
formatter: function(params) { formatter: function(params) {
return params.value; return params.value;

2
src/components/dianfanbao-demo/newContain5.vue
View File

@ -9,7 +9,7 @@
<span class="title-decoration"></span> <span class="title-decoration"></span>
UPPH统计信息 UPPH统计信息
</div> </div>
<div id="nbc-line2" style="width: 100%; height: 600px;"> <div id="nbc-line2" style="width: 100%; height: calc(100% - 100px);">
</div> </div>
</dv-border-box-1> </dv-border-box-1>

3
src/main.js
View File

@ -1,6 +1,7 @@
import Vue from 'vue' import Vue from 'vue'
import App from './App.vue' // import App from './App.vue'
// import App from './AppV2.vue' // import App from './AppV2.vue'
import App from './AppV3.vue'
import ElementUI from 'element-ui' import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' import 'element-ui/lib/theme-chalk/index.css'