593 lines
16 KiB
Vue
593 lines
16 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">3</div>
|
||
<div class="card">7</div>
|
||
<div class="card">7</div>
|
||
</div>
|
||
|
||
<div class="cc-main-container">
|
||
<div class="ccmc-right">
|
||
<div class="ccmc-title">
|
||
本月工单概况
|
||
</div>
|
||
<div class="ccmc-items" v-show="dataType =='3'">
|
||
<!-- <div class="station-info" v-for="(item, index) in leftData.slice(0,2)" :key="index">
|
||
<img :src="item.icon" alt="icon" class="station-icon">
|
||
<div class="station-name" style="margin-left: 30px;">{{ item.name }}</div>
|
||
<div class="station-value" style="margin-left: 30px;">{{ item.value }}</div>
|
||
</div> -->
|
||
<div class="news-left">
|
||
<div class="news-left-item" style="position: relative;height: 220px;">
|
||
<img src="../../img/icons/boxbg.png" alt="icon" style="width: 400px;position: absolute;left: 0;top: 0;">
|
||
<div class="news-left-name" style="position: absolute;top: 15px;left: 20px;">{{ leftData[0].name }}</div>
|
||
<div class="news-left-value" style="position: absolute;top: 68px;left: 130px;">{{ leftData[0].value }}</div>
|
||
</div>
|
||
<div class="news-left-item" style="position: relative;height: 220px;">
|
||
<img src="../../img/icons/boxbg2.png" alt="icon" style="width: 400px;position: absolute;left: 0;top: 0;">
|
||
<div class="news-left-name" style="position: absolute;top: 15px;left: 20px;">{{ leftData[1].name }}</div>
|
||
<div class="news-left-value" style="position: absolute;top: 68px;left: 130px;">{{ leftData[1].value }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="station-info">
|
||
<dv-charts :option="oiloption" style="width: 300px;height: 300px;"/>
|
||
<!-- <img :src="leftData[2].icon" alt="icon" class="station-icon"> -->
|
||
<div class="station-name">{{ leftData[2].name }}</div>
|
||
<div class="station-value">{{ leftData[2].value }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="right-container-new" v-show="dataType != '3'">
|
||
<!-- 第一行 -->
|
||
<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 leftData"
|
||
: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>
|
||
|
||
|
||
<!-- <dv-active-ring-chart class="ccmc-middle" :config="config" /> -->
|
||
<div class="ccmc-middle">
|
||
<PieChart :dataType="dataType"></PieChart>
|
||
</div>
|
||
|
||
<div class="ccmc-left">
|
||
<div class="ccmc-title">
|
||
{{dataType=='3'?'未完成订单数量':'保养及备料信息'}}
|
||
</div>
|
||
<div class="new-bar-chart" v-show="dataType !='3'">
|
||
<div id="echarts-new" style="height: 400px;width: 800px;"></div>
|
||
</div>
|
||
<div class="right-container-new" v-show="dataType =='3'">
|
||
<!-- 第一行 -->
|
||
<!-- 第二行 -->
|
||
<div class="second-row">
|
||
<div
|
||
class="item-card"
|
||
style="width: 325px;height: 135px;"
|
||
v-for="(item, index) in rightData"
|
||
:key="index"
|
||
>
|
||
<!-- <img :src="item.icon" class="sc-icon"> -->
|
||
<p class="sc-name2">{{ item.name }}</p>
|
||
<p class="sc-value2">{{ item.value }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- <LabelTag :config="labelConfig" /> -->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import LabelTag from './LabelTag'
|
||
import PieChart from './pieChart.vue'
|
||
import * as echarts from 'echarts';
|
||
export default {
|
||
name: 'CenterCmp',
|
||
components: {
|
||
LabelTag,PieChart
|
||
},
|
||
props: {
|
||
dataType: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
data () {
|
||
// 定义原始数据
|
||
const originalLeftData = [
|
||
|
||
{ icon: require(`@/img/icons/12.png`), name: '本月订单数', value: '1120' },
|
||
{ icon: require(`@/img/icons/12.png`), name: '本月派工数', value: '600' },
|
||
{ icon: require(`@/img/icons/12.png`), name: '本月派工未完成数', value: '800' },
|
||
{ icon: require(`@/img/icons/12.png`), name: '本月派工完成率', value: '100%' }
|
||
];
|
||
const originalLeftData2 = [
|
||
{ icon: require(`@/img/icons/12.png`), name: '派工数量', value: '1120' },
|
||
{ icon: require(`@/img/icons/12.png`), name: '未完工数量', value: '600' },
|
||
{ icon: require(`@/img/icons/12.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: 90 },
|
||
{ icon: require(`@/img/icons/12.png`), name: '盖板备料率', value: 85 },
|
||
{ icon: require(`@/img/icons/12.png`), name: '机芯备料率', value: 90 },
|
||
];
|
||
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%'
|
||
},
|
||
config1:{
|
||
showValue:true,
|
||
data:[
|
||
{ 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: 90 },
|
||
{ icon: require(`@/img/icons/12.png`), name: '盖板备料进度', value: 85 }
|
||
]
|
||
},
|
||
oiloption:{
|
||
grid:{
|
||
top:'5%',left:'0%',right:'5%',bottom:'5%'
|
||
},
|
||
series: [
|
||
{
|
||
type: 'gauge',
|
||
data: [ { name: 'itemA', value: 100 } ],
|
||
center: ['50%', '55%'],
|
||
axisLabel: {
|
||
formatter: '{value}%',
|
||
style: {
|
||
fill: '#fff',
|
||
fontSize: 20,
|
||
}
|
||
},
|
||
axisTick: {
|
||
style: {
|
||
stroke: '#fff'
|
||
}
|
||
},
|
||
|
||
animationCurve: 'easeInOutBack'
|
||
}
|
||
]
|
||
},
|
||
labelConfig: {
|
||
|
||
data: ['机芯产量', '盖板产量']
|
||
},
|
||
|
||
leftData: this.dataType == '3'?originalLeftData2:originalLeftData,
|
||
rightData: this.dataType == '3'?originalRightData2:originalRightData
|
||
}
|
||
},
|
||
mounted(){
|
||
this.createData();
|
||
},
|
||
methods: {
|
||
createData() {
|
||
// 原始数据（每个柱子的总高度，单位：%）
|
||
const rawData = this.rightData.map(item=>{return item.value});
|
||
const categories = this.rightData.map(item=>{return item.name});
|
||
|
||
// 将数据按 10% 分段，生成堆叠数据
|
||
const generateStackData = (value) => {
|
||
const segments = [];
|
||
let remaining = value;
|
||
for (let i = 0; i < 10; i++) { // 最多分成 10 段（100%）
|
||
const segmentValue = remaining >= 10 ? 10 : remaining;
|
||
if (segmentValue <= 0) break;
|
||
segments.push(segmentValue);
|
||
remaining -= segmentValue;
|
||
}
|
||
return segments;
|
||
};
|
||
|
||
// 生成堆叠数据系列
|
||
const series = [];
|
||
for (let i = 0; i < 10; i++) { // 最多 10 个堆叠层
|
||
series.push({
|
||
type: 'bar',
|
||
stack: 'total', // 堆叠组名
|
||
data: rawData.map(value => {
|
||
const segments = generateStackData(value);
|
||
return i < segments.length ? segments[i] : 0; // 超出分段返回 0
|
||
}), // 替换为你的数据
|
||
barWidth: '40%', // 设置柱状图宽度为 40% 的可用空间,
|
||
itemStyle: {
|
||
color: `rgba(135, 206, 235, ${i * 0.1+0.2})`, // 从下往上透明度变化,
|
||
borderColor: 'transparent',
|
||
borderWidth: 3,
|
||
},
|
||
barGap: '0%', // 柱子间无间隔
|
||
barCategoryGap: '20%' // 类目间留间隙
|
||
});
|
||
}
|
||
var myChart = echarts.init(document.getElementById('echarts-new'));
|
||
this.option = {
|
||
xAxis: {
|
||
type: 'category',
|
||
data: categories,
|
||
axisLabel: {
|
||
fontSize: 23, // 设置 Y 轴字体大小
|
||
color: '#fff', // 可选：设置字体颜色
|
||
fontWight:'bold',
|
||
interval: 0 // 强制显示所有标签
|
||
},
|
||
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
max: 100,
|
||
axisLine: { show: true },
|
||
splitLine: {
|
||
show: false, // 显示 y 轴辅助线
|
||
},
|
||
axisLabel: {
|
||
fontSize: 25, // 设置 Y 轴字体大小
|
||
color: '#fff', // 可选：设置字体颜色
|
||
fontWight:'bold',
|
||
formatter: '{value}%' // 在每一个值后面添加 %
|
||
},
|
||
},
|
||
series: series
|
||
}
|
||
myChart.setOption(this.option);
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.center-cmp {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0px;
|
||
padding: 0px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.station-icon {
|
||
width: 225px;
|
||
margin-top: 60px;
|
||
margin-left: 30px;
|
||
margin-bottom: 20px;
|
||
// height: 80px;
|
||
// margin-bottom: 18px;
|
||
}
|
||
|
||
.station-name {
|
||
font-size: 25px;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.station-value {
|
||
font-size: 35px;
|
||
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 {
|
||
width: 150px;
|
||
font-size: 30px !important;
|
||
font-weight: bold;
|
||
height:100px;
|
||
}
|
||
.dv-digital-flop {
|
||
font-size: 100px;
|
||
// width: 100px;
|
||
// height: 30px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.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:20px;
|
||
color: #ffffff;
|
||
font-weight: bold;
|
||
}
|
||
.sc-name2{
|
||
font-size:30px;
|
||
color: #ffffff;
|
||
font-weight: bold;
|
||
text-align: left;
|
||
padding-left: 10px;
|
||
width: 95%;
|
||
border-left:5px solid #08e5ff;
|
||
}
|
||
.sc-value{
|
||
font-size: 35px;
|
||
text-align: center;
|
||
color: #08e5ff;
|
||
font-weight: bold;
|
||
}
|
||
.sc-value2{
|
||
font-size: 55px;
|
||
text-align: center;
|
||
color: #08e5ff;
|
||
font-weight: bold;
|
||
padding-top: 10px;
|
||
}
|
||
.sc-icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
object-fit: cover;
|
||
border-radius: 6px;
|
||
}
|
||
}
|
||
.new-bar-chart{
|
||
position: absolute;
|
||
top: 110px;
|
||
left: 30px;
|
||
}
|
||
.news-left{
|
||
padding-left: 80px;
|
||
width: 60%;
|
||
.news-left-name{
|
||
font-size: 25px;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
opacity: 0.8;
|
||
text-align: center;
|
||
margin-bottom: 4px;
|
||
}
|
||
.news-left-value{
|
||
font-size: 60px;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
opacity: 0.9;
|
||
text-align: center;
|
||
font-style: italic;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |