410 lines
10 KiB
Vue
410 lines
10 KiB
Vue
<template>
|
|
<div class="center-cmp">
|
|
<div class="cc-header" v-if="false">
|
|
<dv-decoration-1 style="width:200px;height:50px;" />
|
|
</div>
|
|
|
|
<div class="cc-details">
|
|
<div style="font-weight: bold;font-size: 40px;">本月总产量</div>
|
|
<div class="card">1</div>
|
|
<div class="card">1</div>
|
|
<div class="card">3</div>
|
|
<div class="card">7</div>
|
|
</div>
|
|
|
|
<div class="cc-main-container">
|
|
<div class="ccmc-left">
|
|
<div class="ccmc-title">
|
|
本月工单概况
|
|
</div>
|
|
<div class="ccmc-items">
|
|
<div class="station-info" v-for="(item, index) in leftData" :key="index">
|
|
<img :src="item.icon" alt="icon" class="station-icon">
|
|
<div class="station-value">{{ item.value }}</div>
|
|
<div class="station-name">{{ item.name }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- <dv-active-ring-chart class="ccmc-middle" :config="config" /> -->
|
|
<div class="ccmc-middle">
|
|
<PieChart :dataType="dataType"></PieChart>
|
|
</div>
|
|
|
|
<div class="ccmc-right">
|
|
<div class="ccmc-title">
|
|
{{dataType=='3'?'未完成订单数量':'保养及备料信息'}}
|
|
</div>
|
|
<!-- <div class="ccmc-items">
|
|
<div class="station-info" v-for="(item, index) in rightData" :key="index">
|
|
<img :src="item.icon" alt="icon" class="station-icon">
|
|
<div class="station-name">{{ item.name }}</div>
|
|
<div class="station-value">{{ item.value }}</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
<!-- <div class="right-box-items">
|
|
<div class="rbi-info" v-for="(item, index) in rightData" :key="index">
|
|
<img :src="item.icon" alt="icon" class="rbi-icon">
|
|
<div class="rbi-text">
|
|
<div class="rbi-name">{{ item.name }}</div>
|
|
<div class="rbi-value">{{ item.value }}</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="right-container-new">
|
|
<!-- 第一行 -->
|
|
<div class="first-row">
|
|
<img src="../../img/icons/16.png" class="fc-icon">
|
|
<!-- <div class="first-content">
|
|
<p class="fc-name">{{ rightData[0].name }}</p>
|
|
<p class="fc-value">{{ rightData[0].value }}</p>
|
|
</div> -->
|
|
</div>
|
|
<!-- 第二行 -->
|
|
<div class="second-row">
|
|
<div
|
|
class="item-card"
|
|
v-for="(item, index) in rightData"
|
|
:key="index"
|
|
>
|
|
<img :src="item.icon" class="sc-icon">
|
|
<p class="sc-name">{{ item.name }}</p>
|
|
<p class="sc-value">{{ item.value }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <LabelTag :config="labelConfig" /> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import LabelTag from './LabelTag'
|
|
import PieChart from './pieChart.vue'
|
|
export default {
|
|
name: 'CenterCmp',
|
|
components: {
|
|
LabelTag,PieChart
|
|
},
|
|
props: {
|
|
dataType: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data () {
|
|
// 定义原始数据
|
|
const originalLeftData = [
|
|
|
|
{ icon: require(`@/img/icons/1.png`), name: '本月订单数', value: '1120' },
|
|
{ icon: require(`@/img/icons/2.png`), name: '本月派工数', value: '600' },
|
|
{ icon: require(`@/img/icons/3.png`), name: '本月派工未完成数', value: '60%' },
|
|
{ icon: require(`@/img/icons/3.png`), name: '本月派工完成率', value: '100%' }
|
|
];
|
|
const originalLeftData2 = [
|
|
{ icon: require(`@/img/icons/1.png`), name: '完成工单数', value: '1120' },
|
|
{ icon: require(`@/img/icons/2.png`), name: '生产中工单数', value: '600' },
|
|
{ icon: require(`@/img/icons/3.png`), name: '本月生产完成率', value: '100%' }
|
|
];
|
|
|
|
const originalRightData = [
|
|
{ icon: require(`@/img/icons/12.png`), name: '保养台数', value: '20' },
|
|
{ icon: require(`@/img/icons/12.png`), name: '直通率', value: '100%' },
|
|
{ icon: require(`@/img/icons/12.png`), name: '机芯备料进度', value: '98%' },
|
|
{ icon: require(`@/img/icons/12.png`), name: '盖板备料进度', value: '85%' }
|
|
];
|
|
const originalRightData2 = [
|
|
{ icon: require(`@/img/icons/12.png`), name: '水件', value: '12000' },
|
|
{ icon: require(`@/img/icons/12.png`), name: '排水阀', value: '8000' },
|
|
{ icon: require(`@/img/icons/12.png`), name: '进水阀', value: '6200' },
|
|
{ icon: require(`@/img/icons/12.png`), name: '按钮', value: '3300' }
|
|
];
|
|
|
|
|
|
return {
|
|
config: {
|
|
data: [
|
|
{
|
|
name: '机芯产量',
|
|
value: 42
|
|
},
|
|
{
|
|
name: '盖板产量',
|
|
value: 58
|
|
},
|
|
{
|
|
name: '盖板产量',
|
|
value: 70
|
|
},
|
|
{
|
|
name: '盖板产量',
|
|
value: 58
|
|
}
|
|
],
|
|
color: ['#00baff', '#3de7c9', '#ffc530', '#469f4b'],
|
|
lineWidth: 40,
|
|
radius: '55%',
|
|
activeRadius: '60%'
|
|
},
|
|
|
|
labelConfig: {
|
|
|
|
data: ['机芯产量', '盖板产量']
|
|
},
|
|
|
|
leftData: this.dataType == '3'?originalLeftData2:originalLeftData,
|
|
rightData: this.dataType == '3'?originalRightData2:originalRightData
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.center-cmp {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.station-icon {
|
|
width: 190px;
|
|
// height: 80px;
|
|
// margin-bottom: 18px;
|
|
}
|
|
|
|
.station-name {
|
|
font-size: 23px;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.station-value {
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
color: #08e5ff;
|
|
text-align: center;
|
|
}
|
|
|
|
.cc-header {
|
|
height: 70px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.cc-details {
|
|
height: 120px;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-size: 32px;
|
|
align-items: center;
|
|
|
|
.card {
|
|
background-color: rgba(4,49,128,.6);
|
|
color: #08e5ff;
|
|
height: 70px;
|
|
width: 70px;
|
|
font-size: 45px;
|
|
font-weight: bold;
|
|
line-height: 70px;
|
|
text-align: center;
|
|
margin: 10px;
|
|
}
|
|
}
|
|
|
|
.cc-main-container {
|
|
position: relative;
|
|
flex: 1;
|
|
display: flex;
|
|
|
|
.ccmc-middle {
|
|
width: 33%;
|
|
height: 90%;
|
|
|
|
.active-ring-name {
|
|
font-size: 25px !important;
|
|
font-weight: bold;
|
|
height:80px;
|
|
}
|
|
}
|
|
|
|
.ccmc-left, .ccmc-right {
|
|
position: relative;
|
|
width: 33%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-image: url('./img/bg2.png');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
.ccmc-title{
|
|
position: absolute;
|
|
top: 45px;
|
|
left: 120px;
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
}
|
|
.ccmc-items{
|
|
width: 100%;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
top: 120px;
|
|
// left: 50px;
|
|
// padding:0 80px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding-right: 20px;
|
|
.station-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 10px 0;
|
|
}
|
|
}
|
|
.right-box-items{
|
|
position: absolute;
|
|
top: 140px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-size: 18px;
|
|
padding-left: 20px;
|
|
padding-right: 30px;
|
|
.rbi-info{
|
|
width: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
.rbi-icon{
|
|
width: 180px;
|
|
}
|
|
.rbi-text{
|
|
// margin-top: 40px;
|
|
.rbi-value{
|
|
font-size: 35px;
|
|
color: #08e5ff;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-bottom: 4px;
|
|
}
|
|
.rbi-name{
|
|
font-size: 25px;
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.ccmc-left {
|
|
margin-top: -100px;
|
|
}
|
|
|
|
.ccmc-right {
|
|
margin-top: -100px;
|
|
}
|
|
}
|
|
|
|
.label-tag {
|
|
position: absolute;
|
|
width: 500px;
|
|
height: 30px;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.right-container-new {
|
|
position: absolute;
|
|
top: 130px;
|
|
width: 100%;
|
|
display: flex;
|
|
// flex-direction: column;
|
|
// gap: 20px;
|
|
padding: 20px;
|
|
p{margin: 0;}
|
|
.first-row {
|
|
display: flex;
|
|
align-items: center;
|
|
// gap: 15px;
|
|
// padding: 15px;
|
|
}
|
|
|
|
.first-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.second-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
// justify-content: space-between;
|
|
gap: 15px;
|
|
padding: 0 70px 0 20px;
|
|
}
|
|
|
|
.item-card {
|
|
width: 175px;
|
|
// flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 15px;
|
|
background-image: linear-gradient(
|
|
to bottom,
|
|
rgba(33, 150, 243, 0.15), /* 蓝色透明度15% */
|
|
rgba(158, 158, 158, 0.15) /* 灰色透明度15% */
|
|
);
|
|
border: none; /* 移除原有边框 */
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 添加柔和阴影提升层次 */
|
|
border-radius:20px;
|
|
}
|
|
|
|
.fc-icon {
|
|
// padding: 20px;
|
|
width: 300px;
|
|
height: 300px;
|
|
object-fit: cover;
|
|
}
|
|
.fc-name{
|
|
font-size: 40px;
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
}
|
|
.fc-value{
|
|
font-size: 60px;
|
|
text-align: center;
|
|
color: #08e5ff;
|
|
font-weight: bold;
|
|
}
|
|
.sc-name{
|
|
font-size:25px;
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
}
|
|
.sc-value{
|
|
font-size: 35px;
|
|
text-align: center;
|
|
color: #08e5ff;
|
|
font-weight: bold;
|
|
}
|
|
.sc-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style> |