电饭煲BI
This commit is contained in:
parent
10146d32b9
commit
945df8d0ed
|
|
@ -24,7 +24,8 @@ export default {
|
||||||
// 异步注册两个组件
|
// 异步注册两个组件
|
||||||
datav2: () => import('./components/baozuo-demo2/index.vue'),
|
datav2: () => import('./components/baozuo-demo2/index.vue'),
|
||||||
datav: () => import('./components/baozuo-demo/index.vue'),
|
datav: () => import('./components/baozuo-demo/index.vue'),
|
||||||
datav3: () => import('./components/baozuo-demo3/index.vue')
|
datav3: () => import('./components/baozuo-demo3/index.vue'),
|
||||||
|
datav4: () => import('./components/dianfanbao-demo/index.vue'),
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.dataType = dataTypeParam;
|
this.dataType = dataTypeParam;
|
||||||
|
|
@ -39,7 +40,9 @@ export default {
|
||||||
this.currentComponent = 'datav3';
|
this.currentComponent = 'datav3';
|
||||||
} else if (this.dataType == '6'){
|
} else if (this.dataType == '6'){
|
||||||
this.currentComponent = 'datav2';
|
this.currentComponent = 'datav2';
|
||||||
} else {
|
} else if(this.dataType == '7'){
|
||||||
|
this.currentComponent = 'datav4';
|
||||||
|
}else{
|
||||||
this.currentComponent = 'datav';
|
this.currentComponent = 'datav';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
<template>
|
||||||
|
<div class="label-tag">
|
||||||
|
<template v-if="mergedConfig">
|
||||||
|
<div class="label-item" v-for="(label, i) in mergedConfig.data" :key="label">
|
||||||
|
{{ label }} <div :style="`background-color: ${mergedConfig.colors[i % mergedConfig.colors.length]};`" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||||
|
|
||||||
|
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'LabelTag',
|
||||||
|
props: {
|
||||||
|
config: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ([])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
defaultConfig: {
|
||||||
|
/**
|
||||||
|
* @description Label data
|
||||||
|
* @type {Array<String>}
|
||||||
|
* @default data = []
|
||||||
|
* @example data = ['label1', 'label2']
|
||||||
|
*/
|
||||||
|
data: [],
|
||||||
|
colors: ['#00baff', '#3de7c9', '#ffc530', '#469f4b']
|
||||||
|
},
|
||||||
|
|
||||||
|
mergedConfig: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
config () {
|
||||||
|
const { mergeConfig } = this
|
||||||
|
|
||||||
|
mergeConfig()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
mergeConfig () {
|
||||||
|
let { config, defaultConfig } = this
|
||||||
|
|
||||||
|
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
const { mergeConfig } = this
|
||||||
|
|
||||||
|
mergeConfig()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.label-tag {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.label-item {
|
||||||
|
margin: 5px;
|
||||||
|
font-size: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
|
|
@ -0,0 +1,166 @@
|
||||||
|
<template>
|
||||||
|
<div id="data-view">
|
||||||
|
<dv-full-screen-container>
|
||||||
|
|
||||||
|
|
||||||
|
<top-header :Name="'电饭煲生产看板'" style="height:10%;" />
|
||||||
|
<div style="display:flex;height: 40%;justify-content: space-around;margin-bottom: 30px;">
|
||||||
|
<div class="main-container" style="width: 32%;">
|
||||||
|
<NewContain :dataType="dataType" style="width:100%;height:100%"/>
|
||||||
|
</div>
|
||||||
|
<div class="main-container" style="width: 32%;">
|
||||||
|
<NewContain2 :dataType="dataType" style="width:100%;height:100%"/>
|
||||||
|
</div>
|
||||||
|
<div class="main-container" style="width: 32%;">
|
||||||
|
<NewContain3 :dataType="dataType" style="width:100%;height:100%"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;height: 48%;justify-content: space-around;">
|
||||||
|
<div class="main-container" style="width: 48%;">
|
||||||
|
<NewContain4 :dataType="dataType" style="width:100%;height:100%"/>
|
||||||
|
</div>
|
||||||
|
<div class="main-container" style="width: 48%;">
|
||||||
|
<NewContain5 :dataType="dataType" style="width:100%;height:100%"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</dv-full-screen-container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import topHeader from './topHeader'
|
||||||
|
|
||||||
|
|
||||||
|
import NewContain from './newContain'
|
||||||
|
import NewContain2 from './newContain2'
|
||||||
|
import NewContain3 from './newContain3'
|
||||||
|
import NewContain4 from './newContain4'
|
||||||
|
import NewContain5 from './newContain5'
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'DataView',
|
||||||
|
|
||||||
|
components: {
|
||||||
|
topHeader,
|
||||||
|
NewContain,
|
||||||
|
NewContain2,
|
||||||
|
NewContain3,
|
||||||
|
NewContain4,
|
||||||
|
NewContain5
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 获取 URL 查询参数并设置 dataType
|
||||||
|
const queryParams = new URLSearchParams(window.location.search);
|
||||||
|
const dataTypeParam = queryParams.get('q');
|
||||||
|
console.log(dataTypeParam)
|
||||||
|
if (dataTypeParam === '1') {
|
||||||
|
this.dataType = '整机';
|
||||||
|
}else if(dataTypeParam === '3'){
|
||||||
|
this.dataType = '3';
|
||||||
|
}else{
|
||||||
|
this.dataType = ''; // 如果不是 '1'，则设置为空
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dataType:'',
|
||||||
|
dataType2:'整机',
|
||||||
|
switchType: 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#data-view {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #030409;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
#dv-full-screen-container {
|
||||||
|
background-image: url('./img/bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
box-shadow: 0 0 3px blue;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-header {
|
||||||
|
height: 80px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
.mh-left {
|
||||||
|
font-size: 20px;
|
||||||
|
color: rgb(1, 134, 187);
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: rgb(1, 134, 187);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mh-middle {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mh-left,
|
||||||
|
.mh-right {
|
||||||
|
width: 450px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-container {
|
||||||
|
|
||||||
|
|
||||||
|
.border-box-content {
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.right-main-container {
|
||||||
|
width: 75%;
|
||||||
|
padding-left: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rmc-top-container {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rmctc-left-container {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.border-box-content {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rmctc-middle-container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rmctc-right-container {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rmc-bottom-container {
|
||||||
|
height: 35%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.rmctc-chart-1 {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,266 @@
|
||||||
|
// 修改模板部分
|
||||||
|
<template>
|
||||||
|
<div class="ncb-cmp">
|
||||||
|
<div class="ncb-main-container" style="height:100%;display:flex;">
|
||||||
|
|
||||||
|
<div class="ncbmc-middle">
|
||||||
|
<dv-border-box-1>
|
||||||
|
<div class="ncbmc-title">
|
||||||
|
<!-- <span class="title-decoration"></span> -->
|
||||||
|
<p style="margin: 0;text-align: center;">基本信息</p>
|
||||||
|
<p style="margin: 0;font-size: 20px;text-align: center;font-weight: bold;">BASIC INFORMATION</p>
|
||||||
|
</div>
|
||||||
|
<div class="ncbmc-content">
|
||||||
|
<div class="text-item">
|
||||||
|
<p class="item-left">总人数:</p>
|
||||||
|
<p class="item-right">28人</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-item">
|
||||||
|
<p class="item-left">完成数:</p>
|
||||||
|
<p class="item-right">1500</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-item">
|
||||||
|
<p class="item-left">未完成数:</p>
|
||||||
|
<p class="item-right">780</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-item">
|
||||||
|
<p class="item-left">负责人:</p>
|
||||||
|
<p class="item-right">张三：19909209201</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-item">
|
||||||
|
<p class="item-left">负责人:</p>
|
||||||
|
<p class="item-right">李四：19909209201</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-item">
|
||||||
|
<p class="item-left">负责人:</p>
|
||||||
|
<p class="item-right">王五：19909209201</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</dv-border-box-1>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import LabelTag from './LabelTag'
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import testRes from './test'
|
||||||
|
|
||||||
|
console.log(testRes)
|
||||||
|
export default {
|
||||||
|
name: 'CenterCmp',
|
||||||
|
components: {
|
||||||
|
LabelTag,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
dataType: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
|
||||||
|
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 在mounted()中调用
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
// 在methods中添加方法
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
// 添加样式
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.ncb-cmp {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.middle-top {
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-top: -50px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgba(135, 178, 252, 0.04), /* 蓝色透明度15% */
|
||||||
|
rgba(158, 158, 158, 0.149) /* 灰色透明度15% */
|
||||||
|
);
|
||||||
|
border-radius: 20px;
|
||||||
|
&-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inspection-box {
|
||||||
|
width: 15%;
|
||||||
|
padding: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.inspection-title {
|
||||||
|
font-size: 30px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inspection-value {
|
||||||
|
font-size: 44px;
|
||||||
|
color: #08e5ff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pass-rate-box {
|
||||||
|
width: 27%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ncb-header {
|
||||||
|
height: 70px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ncb-main-container {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.ncbmc-middle {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color:rgba(4,49,128,.15);
|
||||||
|
.active-ring-name {
|
||||||
|
width: 150px;
|
||||||
|
font-size: 30px !important;
|
||||||
|
font-weight: bold;
|
||||||
|
height:100px;
|
||||||
|
}
|
||||||
|
.dv-digital-flop {
|
||||||
|
font-size: 100px;
|
||||||
|
// width: 100px;
|
||||||
|
// height: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ncbmc-left-new{
|
||||||
|
height: 15%;
|
||||||
|
}
|
||||||
|
.ncbmc-title{
|
||||||
|
position: absolute;
|
||||||
|
top: -20px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
font-size: 32px; // 放大字体
|
||||||
|
font-weight: bold;
|
||||||
|
.title-decoration {
|
||||||
|
display: inline-block;
|
||||||
|
width: 10px;
|
||||||
|
height: 25px;
|
||||||
|
background-color: #08e5ff; // 淡蓝色
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ncbmc-content{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 50px;
|
||||||
|
width: 100%;
|
||||||
|
.text-item{
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
display: flex;
|
||||||
|
width: 70%;
|
||||||
|
padding: 10px 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
background-color:rgba(4,49,128,.4);
|
||||||
|
p{margin: 0;}
|
||||||
|
.item-left{
|
||||||
|
|
||||||
|
}
|
||||||
|
.item-right{
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
color: yellow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-box {
|
||||||
|
margin-top: 50px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
// padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// width:calc(50% - 50px) ; // 每行两个元素
|
||||||
|
// background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 70px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-name {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 23px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-count {
|
||||||
|
color: orange;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-images {
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-images img {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,282 @@
|
||||||
|
// 修改模板部分
|
||||||
|
<template>
|
||||||
|
<div class="ncb-cmp">
|
||||||
|
<div class="ncb-main-container" style="height:100%;display:flex;">
|
||||||
|
|
||||||
|
<div class="ncbmc-middle">
|
||||||
|
<dv-border-box-1>
|
||||||
|
<div class="ncbmc-title">
|
||||||
|
<!-- <span class="title-decoration"></span> -->
|
||||||
|
<p style="margin: 0;text-align: center;">当前任务</p>
|
||||||
|
<p style="margin: 0;font-size: 20px;text-align: center;font-weight: bold;">CURRENT TASK</p>
|
||||||
|
</div>
|
||||||
|
<div class="ncb-currenttask">
|
||||||
|
<div class="current-title">
|
||||||
|
<span class="title-decoration"></span>
|
||||||
|
<span style="color: aqua;">当前工单：</span>WOOLA12134422
|
||||||
|
</div>
|
||||||
|
<div class="current-item">
|
||||||
|
<span class="current-item-name">产品编码：</span>
|
||||||
|
<span class="current-item-value">1102030006</span>
|
||||||
|
</div>
|
||||||
|
<div class="current-item">
|
||||||
|
<span class="current-item-name">产品名称：</span>
|
||||||
|
<span class="current-item-value">电炖锅-MD-DGC4018-亮光银SL008-220V-600W-4L-中国-美的-MD-DGC4018-</span>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;">
|
||||||
|
<div class="current-item">
|
||||||
|
<span class="current-item-name">工单数量：</span>
|
||||||
|
<span class="current-item-value">1000</span>
|
||||||
|
</div>
|
||||||
|
<div class="current-item">
|
||||||
|
<span class="current-item-name">已完成数量：</span>
|
||||||
|
<span class="current-item-value">635</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;">
|
||||||
|
<div class="current-item">
|
||||||
|
<span class="current-item-name">完工进度：</span>
|
||||||
|
<span class="current-item-value">67.5%</span>
|
||||||
|
</div>
|
||||||
|
<div class="current-item">
|
||||||
|
<span class="current-item-name">备料齐套进度：</span>
|
||||||
|
<span class="current-item-value">98.84%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="current-item">
|
||||||
|
<span class="current-item-name">异常工时：</span>
|
||||||
|
<span class="current-item-value">0H</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</dv-border-box-1>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import LabelTag from './LabelTag'
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import testRes from './test'
|
||||||
|
|
||||||
|
console.log(testRes)
|
||||||
|
export default {
|
||||||
|
name: 'CenterCmp',
|
||||||
|
components: {
|
||||||
|
LabelTag,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
dataType: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
|
||||||
|
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 在mounted()中调用
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
// 在methods中添加方法
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
// 添加样式
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.ncb-cmp {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.middle-top {
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-top: -50px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgba(135, 178, 252, 0.04), /* 蓝色透明度15% */
|
||||||
|
rgba(158, 158, 158, 0.149) /* 灰色透明度15% */
|
||||||
|
);
|
||||||
|
border-radius: 20px;
|
||||||
|
&-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inspection-box {
|
||||||
|
width: 15%;
|
||||||
|
padding: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.inspection-title {
|
||||||
|
font-size: 30px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inspection-value {
|
||||||
|
font-size: 44px;
|
||||||
|
color: #08e5ff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pass-rate-box {
|
||||||
|
width: 27%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ncb-header {
|
||||||
|
height: 70px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ncb-main-container {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.ncbmc-middle {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color:rgba(4,49,128,.15);
|
||||||
|
.active-ring-name {
|
||||||
|
width: 150px;
|
||||||
|
font-size: 30px !important;
|
||||||
|
font-weight: bold;
|
||||||
|
height:100px;
|
||||||
|
}
|
||||||
|
.dv-digital-flop {
|
||||||
|
font-size: 100px;
|
||||||
|
// width: 100px;
|
||||||
|
// height: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ncbmc-left-new{
|
||||||
|
height: 15%;
|
||||||
|
}
|
||||||
|
.ncbmc-title{
|
||||||
|
position: absolute;
|
||||||
|
top: -20px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
font-size: 32px; // 放大字体
|
||||||
|
font-weight: bold;
|
||||||
|
.title-decoration {
|
||||||
|
display: inline-block;
|
||||||
|
width: 10px;
|
||||||
|
height: 25px;
|
||||||
|
background-color: #08e5ff; // 淡蓝色
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ncb-currenttask{
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 50px;
|
||||||
|
|
||||||
|
.current-title{
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
.title-decoration {
|
||||||
|
display: inline-block;
|
||||||
|
width: 10px;
|
||||||
|
height: 25px;
|
||||||
|
background-color: #08e5ff; // 淡蓝色
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.current-item{
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
.current-item-name{
|
||||||
|
color: greenyellow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-box {
|
||||||
|
margin-top: 50px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
// padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// width:calc(50% - 50px) ; // 每行两个元素
|
||||||
|
// background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 70px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-name {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 23px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-count {
|
||||||
|
color: orange;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-images {
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-images img {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,329 @@
|
||||||
|
// 修改模板部分
|
||||||
|
<template>
|
||||||
|
<div class="ncb-cmp">
|
||||||
|
<div class="ncb-main-container" style="height:100%;display:flex;">
|
||||||
|
|
||||||
|
<div class="ncbmc-middle">
|
||||||
|
<dv-border-box-1>
|
||||||
|
<div class="ncbmc-title">
|
||||||
|
<!-- <span class="title-decoration"></span> -->
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="nc-box">
|
||||||
|
<div class="ncbox-left">
|
||||||
|
<div style="font-size: 30px;font-weight: bold;margin-bottom: 20px;">
|
||||||
|
产线当日合格率
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 50px;font-weight: bold;color: brown;">
|
||||||
|
70%
|
||||||
|
</div>
|
||||||
|
<div id="ncbox-pie" style="width: 250px;height: 250px;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ncbox-right">
|
||||||
|
<div class="ncbox-right-title">
|
||||||
|
<div style="width: 25%;">NO</div>
|
||||||
|
<div style="width: 35%;">不良原因</div>
|
||||||
|
<div style="width: 20%;">数量</div>
|
||||||
|
<div style="width: 20%;">占比</div>
|
||||||
|
</div>
|
||||||
|
<div class="ncbox-right-item">
|
||||||
|
<div style="width: 25%;">No.1</div>
|
||||||
|
<div style="width: 35%;">不通电</div>
|
||||||
|
<div style="width: 20%;">4</div>
|
||||||
|
<div style="width: 20%;">30.77%</div>
|
||||||
|
</div>
|
||||||
|
<div class="ncbox-right-item">
|
||||||
|
<div style="width: 25%;">No.2</div>
|
||||||
|
<div style="width: 35%;">发热盘托盘刮花，卡滞、油污</div>
|
||||||
|
<div style="width: 20%;">3</div>
|
||||||
|
<div style="width: 20%;">23.08%</div>
|
||||||
|
</div>
|
||||||
|
<div class="ncbox-right-item">
|
||||||
|
<div style="width: 25%;">No.3</div>
|
||||||
|
<div style="width: 35%;">螺丝未打紧、漏打、滑牙。</div>
|
||||||
|
<div style="width: 20%;">3</div>
|
||||||
|
<div style="width: 20%;">23.08%</div>
|
||||||
|
</div>
|
||||||
|
<div class="ncbox-right-item">
|
||||||
|
<div style="width: 25%;">No.4</div>
|
||||||
|
<div style="width: 35%;">按健失灵、高、低、无手感等不良.</div>
|
||||||
|
<div style="width: 20%;">2</div>
|
||||||
|
<div style="width: 20%;">15.38%</div>
|
||||||
|
</div>
|
||||||
|
<div class="ncbox-right-item">
|
||||||
|
<div style="width: 25%;">No.5</div>
|
||||||
|
<div style="width: 35%;">氖赠/导线压线、破皮、露铜等不良，</div>
|
||||||
|
<div style="width: 20%;">1</div>
|
||||||
|
<div style="width: 20%;">7.69%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</dv-border-box-1>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import LabelTag from './LabelTag'
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import testRes from './test'
|
||||||
|
|
||||||
|
console.log(testRes)
|
||||||
|
export default {
|
||||||
|
name: 'CenterCmp',
|
||||||
|
components: {
|
||||||
|
LabelTag,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
dataType: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
// 添加饼图数据
|
||||||
|
pieData: [
|
||||||
|
{ value: 70, name: '合格' },
|
||||||
|
{ value: 30, name: '不合格' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initPieChart();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initPieChart() {
|
||||||
|
const chartDom = document.getElementById('ncbox-pie');
|
||||||
|
if (!chartDom) return;
|
||||||
|
const myChart = echarts.init(chartDom);
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
// 不显示标题
|
||||||
|
title: null,
|
||||||
|
// 设置颜色，淡黄色和天空蓝
|
||||||
|
color: ['#fffacd', '#87ceeb'],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
data: this.pieData,
|
||||||
|
// 不显示标签
|
||||||
|
label: {
|
||||||
|
// show: false
|
||||||
|
fontSize: 20,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: '#333',
|
||||||
|
formatter: '{b}\n {d}%',
|
||||||
|
// 将标签显示在图标内部
|
||||||
|
position: 'inside'
|
||||||
|
},
|
||||||
|
// 不显示标签线
|
||||||
|
labelLine: {
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
myChart.setOption(option);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
// 添加样式
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.ncb-cmp {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.middle-top {
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-top: -50px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgba(135, 178, 252, 0.04), /* 蓝色透明度15% */
|
||||||
|
rgba(158, 158, 158, 0.149) /* 灰色透明度15% */
|
||||||
|
);
|
||||||
|
border-radius: 20px;
|
||||||
|
&-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inspection-box {
|
||||||
|
width: 15%;
|
||||||
|
padding: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.inspection-title {
|
||||||
|
font-size: 30px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inspection-value {
|
||||||
|
font-size: 44px;
|
||||||
|
color: #08e5ff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pass-rate-box {
|
||||||
|
width: 27%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ncb-header {
|
||||||
|
height: 70px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ncb-main-container {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.ncbmc-middle {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color:rgba(4,49,128,.15);
|
||||||
|
.active-ring-name {
|
||||||
|
width: 150px;
|
||||||
|
font-size: 30px !important;
|
||||||
|
font-weight: bold;
|
||||||
|
height:100px;
|
||||||
|
}
|
||||||
|
.dv-digital-flop {
|
||||||
|
font-size: 100px;
|
||||||
|
// width: 100px;
|
||||||
|
// height: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ncbmc-left-new{
|
||||||
|
height: 15%;
|
||||||
|
}
|
||||||
|
.ncbmc-title{
|
||||||
|
position: absolute;
|
||||||
|
top: -20px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
font-size: 32px; // 放大字体
|
||||||
|
font-weight: bold;
|
||||||
|
.title-decoration {
|
||||||
|
display: inline-block;
|
||||||
|
width: 10px;
|
||||||
|
height: 25px;
|
||||||
|
background-color: #08e5ff; // 淡蓝色
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nc-box{
|
||||||
|
margin-top: 50px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
.ncbox-left{
|
||||||
|
width: 30%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.ncbox-right{
|
||||||
|
width: 65%;
|
||||||
|
text-align: center;
|
||||||
|
.ncbox-right-title{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: #1d5ef5;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
div{padding: 10px 0;}
|
||||||
|
}
|
||||||
|
.ncbox-right-item{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: #3a72f534;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
div{padding: 10px 0;}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-box {
|
||||||
|
margin-top: 50px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
// padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// width:calc(50% - 50px) ; // 每行两个元素
|
||||||
|
// background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 70px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-name {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 23px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-count {
|
||||||
|
color: orange;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-images {
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-images img {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,293 @@
|
||||||
|
<template>
|
||||||
|
<div class="ncb-cmp">
|
||||||
|
<div class="ncb-main-container" style="height:100%;display:flex;">
|
||||||
|
|
||||||
|
<div class="ncbmc-middle">
|
||||||
|
<dv-border-box-1>
|
||||||
|
<div class="chart-title">
|
||||||
|
<span class="title-decoration"></span>
|
||||||
|
本日产量/预计产量对比
|
||||||
|
</div>
|
||||||
|
<div id="nbc-line1" style="width: 100%; height: 600px;"></div>
|
||||||
|
</dv-border-box-1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import LabelTag from './LabelTag'
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import testRes from './test'
|
||||||
|
|
||||||
|
console.log(testRes)
|
||||||
|
export default {
|
||||||
|
name: 'CenterCmp',
|
||||||
|
components: {
|
||||||
|
LabelTag,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
dataType: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initMixedChart()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initMixedChart() {
|
||||||
|
const chartDom = document.getElementById('nbc-line1');
|
||||||
|
const myChart = echarts.init(chartDom);
|
||||||
|
const actualData = [120, 132, 101, 120, 78, 0];
|
||||||
|
const targetData = [120, 132, 101, 134, 90, 0];
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
crossStyle: {
|
||||||
|
color: '#999'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['目标产量','实际产量'],
|
||||||
|
bottom: 10, // 图例显示在下方
|
||||||
|
textStyle: {
|
||||||
|
fontSize: '20',
|
||||||
|
color: '#fff' // 图例文字为白色
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
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'],
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 20, // 放大 x 轴文字
|
||||||
|
fontWeight: 'bold', // x 轴文字加粗
|
||||||
|
color: '#fff' // 设置 x 轴文字为白色
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 26, // 放大 y 轴文字
|
||||||
|
fontWeight: 'bold', // y 轴文字加粗
|
||||||
|
color: '#fff' // 设置 y 轴文字为白色
|
||||||
|
},
|
||||||
|
splitLine: { // 关闭 y 轴辅助线
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '实际产量',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '30%', // 缩小柱状图的条状宽度
|
||||||
|
data: actualData,
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgb(255, 255, 204)' // 天黄色
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'inside',
|
||||||
|
fontSize: '22px',
|
||||||
|
fontWeight: 'bolder', // 柱状图 label 字体加粗
|
||||||
|
formatter: function(params) {
|
||||||
|
return params.value;
|
||||||
|
},
|
||||||
|
color:'red',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '目标产量',
|
||||||
|
type: 'line',
|
||||||
|
data: targetData,
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgb(173, 216, 230)' // 浅蓝色
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
fontSize: '20px',
|
||||||
|
fontWeight: 'bold', // 柱状图 label 字体加粗
|
||||||
|
formatter: function(params) {
|
||||||
|
return params.value;
|
||||||
|
},
|
||||||
|
color: 'rgb(173, 216, 230)' // 浅蓝色
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.ncb-cmp {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.middle-top {
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-top: -50px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgba(135, 178, 252, 0.04), /* 蓝色透明度15% */
|
||||||
|
rgba(158, 158, 158, 0.149) /* 灰色透明度15% */
|
||||||
|
);
|
||||||
|
border-radius: 20px;
|
||||||
|
&-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inspection-box {
|
||||||
|
width: 15%;
|
||||||
|
padding: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.inspection-title {
|
||||||
|
font-size: 30px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inspection-value {
|
||||||
|
font-size: 44px;
|
||||||
|
color: #08e5ff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pass-rate-box {
|
||||||
|
width: 27%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ncb-header {
|
||||||
|
height: 70px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ncb-main-container {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.ncbmc-middle {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color:rgba(4,49,128,.15);
|
||||||
|
.active-ring-name {
|
||||||
|
width: 150px;
|
||||||
|
font-size: 30px !important;
|
||||||
|
font-weight: bold;
|
||||||
|
height:100px;
|
||||||
|
}
|
||||||
|
.dv-digital-flop {
|
||||||
|
font-size: 100px;
|
||||||
|
// width: 100px;
|
||||||
|
// height: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ncbmc-left-new{
|
||||||
|
height: 15%;
|
||||||
|
}
|
||||||
|
.chart-title{
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
|
||||||
|
font-size: 32px; // 放大字体
|
||||||
|
font-weight: bold;
|
||||||
|
.title-decoration {
|
||||||
|
display: inline-block;
|
||||||
|
width: 10px;
|
||||||
|
height: 25px;
|
||||||
|
background-color: #08e5ff; // 淡蓝色
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#nbc-line1{
|
||||||
|
position: absolute;
|
||||||
|
top: 70px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-box {
|
||||||
|
margin-top: 50px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
// padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// width:calc(50% - 50px) ; // 每行两个元素
|
||||||
|
// background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 70px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-name {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 23px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-count {
|
||||||
|
color: orange;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-images {
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-images img {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,307 @@
|
||||||
|
// 修改模板部分
|
||||||
|
<template>
|
||||||
|
<div class="ncb-cmp">
|
||||||
|
<div class="ncb-main-container" style="height:100%;display:flex;">
|
||||||
|
|
||||||
|
<div class="ncbmc-middle">
|
||||||
|
<dv-border-box-1>
|
||||||
|
<div class="chart-title">
|
||||||
|
<span class="title-decoration"></span>
|
||||||
|
UPPH统计信息
|
||||||
|
</div>
|
||||||
|
<div id="nbc-line2" style="width: 100%; height: 600px;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</dv-border-box-1>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import LabelTag from './LabelTag'
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import testRes from './test'
|
||||||
|
|
||||||
|
console.log(testRes)
|
||||||
|
export default {
|
||||||
|
name: 'CenterCmp',
|
||||||
|
components: {
|
||||||
|
LabelTag,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
dataType: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
|
||||||
|
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 在mounted()中调用
|
||||||
|
mounted() {
|
||||||
|
this.initMixedChart()
|
||||||
|
},
|
||||||
|
// 在methods中添加方法
|
||||||
|
methods: {
|
||||||
|
initMixedChart() {
|
||||||
|
const chartDom = document.getElementById('nbc-line2');
|
||||||
|
const myChart = echarts.init(chartDom);
|
||||||
|
const actualData = [10.5, 10.5, 10.5, 10.5, 0, 0];
|
||||||
|
const targetData = [10.5, 10.5, 10.5, 10.5, 0, 0];
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
crossStyle: {
|
||||||
|
color: '#999'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['目标UPPH','实际UPPH'],
|
||||||
|
bottom: 10, // 图例显示在下方
|
||||||
|
textStyle: {
|
||||||
|
fontSize: '20',
|
||||||
|
color: '#fff' // 图例文字为白色
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
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'],
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 20, // 放大 x 轴文字
|
||||||
|
fontWeight: 'bold', // x 轴文字加粗
|
||||||
|
color: '#fff' // 设置 x 轴文字为白色
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 26, // 放大 y 轴文字
|
||||||
|
fontWeight: 'bold', // y 轴文字加粗
|
||||||
|
color: '#fff' // 设置 y 轴文字为白色
|
||||||
|
},
|
||||||
|
splitLine: { // 关闭 y 轴辅助线
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '实际UPPH',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '30%', // 缩小柱状图的条状宽度
|
||||||
|
data: actualData,
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgb(255, 255, 204)' // 天黄色
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'inside',
|
||||||
|
fontSize: '22px',
|
||||||
|
fontWeight: 'bolder', // 柱状图 label 字体加粗
|
||||||
|
formatter: function(params) {
|
||||||
|
return params.value;
|
||||||
|
},
|
||||||
|
color: function(params) {
|
||||||
|
return params.value >= targetData[params.dataIndex] ? 'green' : 'red';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '目标UPPH',
|
||||||
|
type: 'line',
|
||||||
|
data: targetData,
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgb(173, 216, 230)' // 浅蓝色
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
fontSize: '20px',
|
||||||
|
fontWeight: 'bold', // 柱状图 label 字体加粗
|
||||||
|
formatter: function(params) {
|
||||||
|
return params.value;
|
||||||
|
},
|
||||||
|
color: 'rgb(173, 216, 230)' // 浅蓝色
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
// 添加样式
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.ncb-cmp {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.middle-top {
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-top: -50px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgba(135, 178, 252, 0.04), /* 蓝色透明度15% */
|
||||||
|
rgba(158, 158, 158, 0.149) /* 灰色透明度15% */
|
||||||
|
);
|
||||||
|
border-radius: 20px;
|
||||||
|
&-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inspection-box {
|
||||||
|
width: 15%;
|
||||||
|
padding: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.inspection-title {
|
||||||
|
font-size: 30px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inspection-value {
|
||||||
|
font-size: 44px;
|
||||||
|
color: #08e5ff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pass-rate-box {
|
||||||
|
width: 27%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ncb-header {
|
||||||
|
height: 70px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ncb-main-container {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.ncbmc-middle {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color:rgba(4,49,128,.15);
|
||||||
|
.active-ring-name {
|
||||||
|
width: 150px;
|
||||||
|
font-size: 30px !important;
|
||||||
|
font-weight: bold;
|
||||||
|
height:100px;
|
||||||
|
}
|
||||||
|
.dv-digital-flop {
|
||||||
|
font-size: 100px;
|
||||||
|
// width: 100px;
|
||||||
|
// height: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ncbmc-left-new{
|
||||||
|
height: 15%;
|
||||||
|
}
|
||||||
|
.chart-title{
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
|
||||||
|
font-size: 32px; // 放大字体
|
||||||
|
font-weight: bold;
|
||||||
|
.title-decoration {
|
||||||
|
display: inline-block;
|
||||||
|
width: 10px;
|
||||||
|
height: 25px;
|
||||||
|
background-color: #08e5ff; // 淡蓝色
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#nbc-line2{
|
||||||
|
position: absolute;
|
||||||
|
top: 70px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-box {
|
||||||
|
margin-top: 50px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
// padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// width:calc(50% - 50px) ; // 每行两个元素
|
||||||
|
// background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 70px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-name {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 23px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-count {
|
||||||
|
color: orange;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-images {
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-images img {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,47 @@
|
||||||
|
<template>
|
||||||
|
<div id="top-header">
|
||||||
|
<dv-decoration-8 class="header-left-decoration" />
|
||||||
|
<dv-decoration-5 class="header-center-decoration" />
|
||||||
|
<dv-decoration-8 class="header-right-decoration" :reverse="false" />
|
||||||
|
<div class="center-title" :style="'font-size:'+$fontSize(0.4)+'px'">{{Name}}</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'TopHeader',
|
||||||
|
props: ['Name', 'Times']
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#top-header {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
// height: 1rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
.header-center-decoration {
|
||||||
|
width: 40%;
|
||||||
|
height: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left-decoration, .header-right-decoration {
|
||||||
|
width: 25%;
|
||||||
|
height: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-title {
|
||||||
|
position: absolute;
|
||||||
|
// font-size: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
left: 50%;
|
||||||
|
top: 0.1rem;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
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 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'
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue