恒通达数据看板新模块
This commit is contained in:
parent
9df0e44a92
commit
c8b3b3ec4d
|
|
@ -7,7 +7,8 @@
|
|||
<script>
|
||||
// import datav from './components/baozuo-demo/index.vue'
|
||||
// import datav from './components/datav/index.vue'
|
||||
import datav from './components/zidingyi/index.vue'
|
||||
// import datav from './components/zidingyi/index.vue'
|
||||
import datav from './components/baozuo-demo2/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,375 @@
|
|||
<template>
|
||||
<div class="bottom-charts">
|
||||
<div style="width: 100%;" v-if="dataType == '整机'">
|
||||
<div class="bc-chart-item">
|
||||
<div class="bcci-header">整机派工单执行进度</div>
|
||||
<dv-scroll-board :config="config3" style="height:90%;margin-left: 2%;width:96%" />
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%;" v-if="dataType == '3'">
|
||||
<div class="bc-chart-item">
|
||||
<div class="bcci-header">派工单执行进度</div>
|
||||
<dv-scroll-board :config="config4" style="height:90%;margin-left: 2%;width:96%" />
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%;" v-if="dataType!='3' && dataType !='整机'">
|
||||
<div class="bc-chart-item" v-if="isChange">
|
||||
<div class="bcci-header">机芯派工单执行进度</div>
|
||||
<dv-scroll-board :config="config1" style="height:90%;margin-left: 2%;width:96%" />
|
||||
</div>
|
||||
<!-- <dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" /> -->
|
||||
|
||||
<div class="bc-chart-item" v-if="!isChange">
|
||||
<div class="bcci-header">盖板派工单执行进度</div>
|
||||
<dv-scroll-board :config="config2" style="height:90%;margin-left: 2%;width:96%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LabelTag from './LabelTag'
|
||||
import testRes from './test'
|
||||
let timer = null;
|
||||
export default {
|
||||
name: 'BottomCharts',
|
||||
components: {
|
||||
LabelTag
|
||||
},
|
||||
props: {
|
||||
dataType: {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
let _this = this;
|
||||
function generateRandomData(N, title) {
|
||||
const data = [];
|
||||
let date = new Date(); // 从今天的日期开始
|
||||
for (let i = 1; i <= N; i++) {
|
||||
// 格式化日期为'YYYY-MM-DD'
|
||||
const formattedDate = `${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||||
const formattedDate2 = `${date.getFullYear()}${String(date.getMonth() + 1).padStart(2, '0')}${String(date.getDate()).padStart(2, '0')}`;
|
||||
|
||||
// 订单量随机在20到200之间，步长为10
|
||||
const orderQuantity = Math.floor(Math.random() * 19 + 2) * 10;
|
||||
|
||||
// 完成数量随机但不超过订单量
|
||||
const completedQuantity = Math.floor(Math.random() * (orderQuantity / 10)) * 10;
|
||||
|
||||
// 计算完成百分比
|
||||
const completionRate = ((completedQuantity / orderQuantity) * 100).toFixed(1) + '%';
|
||||
// eslint-disable-next-line no-inner-declarations
|
||||
function createProgressCircle(percentage) {
|
||||
let color, content;
|
||||
if (percentage === 0) {
|
||||
color = 'gray';
|
||||
content = '0%';
|
||||
return `
|
||||
<div class="circle-progress" style="border-color: ${color}; ">
|
||||
<div class="circle-content" style="color: ${color}; ">${content}</div>
|
||||
</div>
|
||||
`;
|
||||
} else if (percentage === 100) {
|
||||
color = '#1afa29';
|
||||
content = '√';
|
||||
return `
|
||||
<div class="circle-progress" style="border-color: ${color}; ">
|
||||
<div class="circle-img"></div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
color = '#08e5ff';
|
||||
content = `${percentage}%`;
|
||||
return `
|
||||
<div class="circle-progress" style="border-color: ${color}; ">
|
||||
<div class="circle-content" style="color: ${color}; ">${content}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
//随机三个百分比 从大到小
|
||||
const completionRate1 = Math.floor(Math.random() * 100);
|
||||
const completionRate2 = Math.floor(Math.random() * 100);
|
||||
const completionRate3 = Math.floor(Math.random() * 100);
|
||||
const newDataItem = [];
|
||||
if(_this.dataType == '整机') {
|
||||
// eslint-disable-next-line no-const-assign
|
||||
newDataItem = [
|
||||
`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
||||
//`
|
||||
// <div style="font-weight:bold;font-size:35px;">
|
||||
// ${title}
|
||||
// </div>
|
||||
//`,
|
||||
title,
|
||||
|
||||
// 固定值
|
||||
formattedDate, // 日期
|
||||
orderQuantity, // 订单量
|
||||
completionRate, // 完成率
|
||||
createProgressCircle(100),
|
||||
createProgressCircle(100),
|
||||
createProgressCircle(completionRate2),
|
||||
createProgressCircle(completionRate2),
|
||||
createProgressCircle(completionRate2),
|
||||
createProgressCircle(completionRate2),
|
||||
completedQuantity // 完成数量
|
||||
];
|
||||
// eslint-disable-next-line brace-style
|
||||
}
|
||||
// 创建新的数据项
|
||||
else if (title === 'U1机芯') {
|
||||
// eslint-disable-next-line no-const-assign
|
||||
newDataItem = [
|
||||
`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
||||
`
|
||||
<div style="font-weight:bold;font-size:35px;">
|
||||
${title}
|
||||
</div>
|
||||
`, // 固定值
|
||||
formattedDate, // 日期
|
||||
orderQuantity, // 订单量
|
||||
completionRate, // 完成率
|
||||
createProgressCircle(100),
|
||||
createProgressCircle(completionRate2),
|
||||
createProgressCircle(0),
|
||||
completedQuantity // 完成数量
|
||||
];
|
||||
}else if(title === 'U1机芯2'){
|
||||
// eslint-disable-next-line no-const-assign
|
||||
newDataItem = [
|
||||
`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
||||
`
|
||||
<div style="font-weight:bold;font-size:35px;">
|
||||
${title}
|
||||
</div>
|
||||
`, // 固定值
|
||||
formattedDate, // 日期
|
||||
orderQuantity, // 订单量
|
||||
completionRate, // 完成率
|
||||
createProgressCircle(100),
|
||||
createProgressCircle(completionRate2),
|
||||
createProgressCircle(completionRate2),
|
||||
createProgressCircle(completionRate2),
|
||||
createProgressCircle(0),
|
||||
completedQuantity, // 完成数量
|
||||
]
|
||||
}else {
|
||||
// eslint-disable-next-line no-const-assign
|
||||
newDataItem = [
|
||||
`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
||||
`
|
||||
<div style="font-weight:bold;font-size:35px;">
|
||||
${title}
|
||||
</div>
|
||||
`, // 固定值
|
||||
formattedDate, // 日期
|
||||
orderQuantity, // 订单量
|
||||
completionRate, // 完成率
|
||||
createProgressCircle(100),
|
||||
createProgressCircle(completionRate2),
|
||||
createProgressCircle(completionRate2),
|
||||
createProgressCircle(0),
|
||||
completedQuantity // 完成数量
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
data.push(newDataItem);
|
||||
|
||||
// 更新日期至下一天
|
||||
date.setDate(date.getDate() + 1);
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
return {
|
||||
isChange: true,
|
||||
config1: {
|
||||
header:['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '组装', 'QC', '老化', '剩下数量'],
|
||||
data: generateRandomData(60, 'U1机芯'),
|
||||
index: true,
|
||||
headerHeight: 50,
|
||||
columnWidth: [80, 300,400],
|
||||
align: ['center'],
|
||||
//waitTime: 300000,
|
||||
},
|
||||
|
||||
config2: {
|
||||
header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '组装', '安规', '综合测试', '老化', '剩下数量'],
|
||||
data: generateRandomData(30, 'U1盖板'),
|
||||
headerHeight: 50,
|
||||
index: true,
|
||||
columnWidth: [80, 280,400],
|
||||
align: ['center']
|
||||
},
|
||||
|
||||
config3: {
|
||||
|
||||
header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '上陶瓷', '气密性QC', '整机组装', '功能QC', '全外观QC', '包装','剩余数量'] ,
|
||||
data: generateRandomData(30, 'U1C智能坐便器[220V]'),
|
||||
headerHeight: 50,
|
||||
index: true,
|
||||
columnWidth: [80, 280,400],
|
||||
align: ['center']
|
||||
},
|
||||
config4: {
|
||||
header: ['工单号', '产品名称','派工日期', '派工数量', '工序进度', '进水调节', '按钮调节', '桶身调节', '桶身装底座', '包装','剩余数量'] ,
|
||||
data: generateRandomData(30, 'U1机芯2'),
|
||||
headerHeight: 50,
|
||||
index: true,
|
||||
columnWidth: [80, 280,400],
|
||||
align: ['center']
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let that = this;
|
||||
this.checkData();
|
||||
timer = setInterval(() => {
|
||||
that.isChange = !that.isChange
|
||||
}, 60000)
|
||||
},
|
||||
methods:{
|
||||
checkData(){
|
||||
console.log(testRes)
|
||||
function createProgressCircle(percentage) {
|
||||
let color, content;
|
||||
if (percentage === 0) {
|
||||
color = 'gray';
|
||||
content = '0%';
|
||||
return `
|
||||
<div class="circle-progress" style="border-color: ${color}; ">
|
||||
<div class="circle-content" style="color: ${color}; ">${content}</div>
|
||||
</div>
|
||||
`;
|
||||
} else if (percentage === 100) {
|
||||
color = '#1afa29';
|
||||
content = '√';
|
||||
return `
|
||||
<div class="circle-progress" style="border-color: ${color}; ">
|
||||
<div class="circle-img"></div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
color = '#08e5ff';
|
||||
content = `${percentage}%`;
|
||||
return `
|
||||
<div class="circle-progress" style="border-color: ${color}; ">
|
||||
<div class="circle-content" style="color: ${color}; ">${content}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
let data = testRes.data.yx_v_pgjd.map(item=>{
|
||||
return [
|
||||
item["工单号"],
|
||||
item["产品名称"],
|
||||
item["派工日期"],
|
||||
item["派工数量"],
|
||||
createProgressCircle(item["工序进度"]*1000/10),
|
||||
createProgressCircle(item["进水调节"]*1000/10),
|
||||
createProgressCircle(item["按钮调解"]*1000/10),
|
||||
createProgressCircle(item["桶身调节"]*1000/10),
|
||||
createProgressCircle(item["桶身装底座"]*1000/10),
|
||||
createProgressCircle(item["包装"]*1000/10),
|
||||
item["剩余数量"],
|
||||
]
|
||||
})
|
||||
this.config4.data = data
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(timer)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.bottom-charts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.bc-chart-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bcci-header {
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dv-active-ring-chart {
|
||||
height: calc(~"100% - 80px");
|
||||
}
|
||||
|
||||
.label-tag {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.active-ring-name {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.decoration-1,
|
||||
.decoration-2,
|
||||
.decoration-3 {
|
||||
display: absolute;
|
||||
left: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.circle-progress {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
// background: conic-gradient(from 90deg at 50% 50%, transparent 0, rgba(18, 3, 117, 0.107) 0);
|
||||
transition: all 0.5s ease;
|
||||
border: 6px solid;
|
||||
}
|
||||
|
||||
.circle-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 0.2rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.circle-img {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
background-image: url('./img/icon_success.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.ceil,
|
||||
.header-item {
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,846 @@
|
|||
// 修改模板部分
|
||||
<template>
|
||||
<div class="center-cmp">
|
||||
<div class="cc-header"></div>
|
||||
<div class="cc-main-container">
|
||||
<div class="ccmc-right">
|
||||
<dv-border-box-1>
|
||||
<div class="ccmc-title">
|
||||
<span class="title-decoration"></span>
|
||||
本月工单概况
|
||||
</div>
|
||||
<div id="left-rankchart">
|
||||
<div class="rank-item" v-for="(item, index) in rankData" :key="index">
|
||||
<span class="rank-name">{{ item.name }}</span>
|
||||
<div class="rank-progress">
|
||||
<div
|
||||
class="rank-bar"
|
||||
:style="{ width: item.value + '%' }"
|
||||
></div>
|
||||
<span class="rank-value">{{ item.value }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dv-border-box-1>
|
||||
</div>
|
||||
|
||||
<div class="ccmc-middle">
|
||||
<div class="middle-top" style="height:calc(100% - 500px)">
|
||||
<div class="middle-top-container">
|
||||
<!-- 当日检验量 -->
|
||||
<div class="inspection-box">
|
||||
<div class="inspection-title">当日检验量</div>
|
||||
<div class="inspection-value">{{ middleTopData.inspection }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 机芯直通率 -->
|
||||
<div class="pass-rate-box">
|
||||
<div class="gauge-chart" style="height:200px" :id="'gauge-chart-1'"></div>
|
||||
<div class="pass-rate-title">机芯直通率</div>
|
||||
</div>
|
||||
|
||||
<!-- 盖板直通率 -->
|
||||
<div class="pass-rate-box">
|
||||
<div class="gauge-chart" style="height:200px" :id="'gauge-chart-2'"></div>
|
||||
<div class="pass-rate-title">盖板直通率</div>
|
||||
</div>
|
||||
|
||||
<!-- 整机直通率 -->
|
||||
<div class="pass-rate-box">
|
||||
<div class="gauge-chart" style="height:200px" :id="'gauge-chart-3'"></div>
|
||||
<div class="pass-rate-title">整机直通率</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<PieChart :dataType="dataType" style="height:500px;"></PieChart>
|
||||
</div>
|
||||
|
||||
<div class="ccmc-left">
|
||||
<dv-border-box-1>
|
||||
<div class="ccmc-title">
|
||||
<span class="title-decoration"></span>
|
||||
当月工序不良比
|
||||
</div>
|
||||
<div id="right-echarts-new"></div>
|
||||
</dv-border-box-1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LabelTag from './LabelTag'
|
||||
import PieChart from './pieChart.vue'
|
||||
import * as echarts from 'echarts';
|
||||
import testRes from './test'
|
||||
|
||||
console.log(testRes)
|
||||
export default {
|
||||
name: 'CenterCmp',
|
||||
components: {
|
||||
LabelTag,PieChart
|
||||
},
|
||||
props: {
|
||||
dataType: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
// 定义原始数据
|
||||
const originalLeftData = [
|
||||
|
||||
{ icon: require(`@/img/icons/12.png`), name: '本月订单数', value: '3500' },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '本月派工数', value: '12500' },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '派工未完成数', value: '2500' },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '派工完成率', value: '92.6%' }
|
||||
];
|
||||
const originalLeftData2 = [
|
||||
{ icon: require(`@/img/icons/12.png`), name: '派工数量', value: testRes.data.yx_v_scgdgk[0]["派工数量"] },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '未完工数量', value: testRes.data.yx_v_scgdgk[0]["未完成数量"] },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '工单完成率', value: (testRes.data.yx_v_scgdgk[0]["未完成数量"]/testRes.data.yx_v_scgdgk[0]["派工数量"]).toFixed(2)*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: testRes.data.yx_v_wwcscdd[0]["水件"] },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '排水阀', value: testRes.data.yx_v_wwcscdd[0]["排水阀"] },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '进水阀', value: testRes.data.yx_v_wwcscdd[0]["进水阀"] },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '按钮', value: testRes.data.yx_v_wwcscdd[0]["按钮"] }
|
||||
];
|
||||
|
||||
|
||||
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 }
|
||||
]
|
||||
},
|
||||
middleTopData: {
|
||||
inspection: 1250,
|
||||
corePassRate: 92,
|
||||
coverPassRate: 88,
|
||||
wholePassRate: 95
|
||||
},
|
||||
oiloption:{
|
||||
grid:{
|
||||
top:'5%',left:'0%',right:'5%',bottom:'5%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
data: [ { name: 'itemA', value: (testRes.data.yx_v_scgdgk[0]["未完成数量"]/testRes.data.yx_v_scgdgk[0]["派工数量"]).toFixed(2)*100 } ],
|
||||
center: ['50%', '55%'],
|
||||
axisLabel: {
|
||||
formatter: '{value}%',
|
||||
style: {
|
||||
fill: '#fff',
|
||||
fontSize: 20,
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
style: {
|
||||
stroke: '#fff'
|
||||
}
|
||||
},
|
||||
|
||||
animationCurve: 'easeInOutBack'
|
||||
}
|
||||
]
|
||||
},
|
||||
labelConfig: {
|
||||
|
||||
data: ['机芯产量', '盖板产量']
|
||||
},
|
||||
rankData: [
|
||||
{ name: '产品A', value: 98 },
|
||||
{ name: '产品B', value: 95 },
|
||||
{ name: '产品C', value: 93 },
|
||||
{ name: '产品D', value: 90 },
|
||||
{ name: '产品E', value: 88 },
|
||||
{ name: '产品F', value: 85 },
|
||||
{ name: '产品G', value: 82 },
|
||||
{ name: '产品H', value: 80 },
|
||||
{ name: '产品I', value: 78 },
|
||||
{ name: '产品J', value: 75 }
|
||||
],
|
||||
rightChartData: [
|
||||
{ name: '工序1', value: Math.floor(Math.random() * 1000) },
|
||||
{ name: '工序2', value: Math.floor(Math.random() * 1000) },
|
||||
{ name: '工序3', value: Math.floor(Math.random() * 1000) },
|
||||
{ name: '工序4', value: Math.floor(Math.random() * 1000) },
|
||||
{ name: '工序5', value: Math.floor(Math.random() * 1000) },
|
||||
{ name: '工序6', value: Math.floor(Math.random() * 1000) },
|
||||
{ name: '工序7', value: Math.floor(Math.random() * 1000) }
|
||||
],
|
||||
|
||||
leftData: this.dataType == '3'?originalLeftData2:originalLeftData,
|
||||
rightData: this.dataType == '3'?originalRightData2:originalRightData
|
||||
}
|
||||
},
|
||||
// 在mounted()中调用
|
||||
mounted() {
|
||||
this.createData();
|
||||
this.initRightChart();
|
||||
this.initGaugeCharts();
|
||||
},
|
||||
// 在methods中添加方法
|
||||
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);
|
||||
},
|
||||
initRightChart() {
|
||||
const chart = echarts.init(document.getElementById('right-echarts-new'));
|
||||
const option = {
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.rightChartData.map(item => item.name),
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
rotate: 30
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 1000,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: this.rightChartData.map(item => item.value),
|
||||
barWidth: '40%',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#08e5ff' },
|
||||
{ offset: 1, color: '#0078ff' }
|
||||
]),
|
||||
borderRadius: [5, 5, 0, 0]
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
}]
|
||||
};
|
||||
chart.setOption(option);
|
||||
},
|
||||
initGaugeCharts() {
|
||||
// 机芯直通率
|
||||
this.initGaugeChart('gauge-chart-1', this.middleTopData.corePassRate);
|
||||
// 盖板直通率
|
||||
this.initGaugeChart('gauge-chart-2', this.middleTopData.coverPassRate);
|
||||
// 整机直通率
|
||||
this.initGaugeChart('gauge-chart-3', this.middleTopData.wholePassRate);
|
||||
},
|
||||
// 修改仪表盘样式部分
|
||||
initGaugeChart(id, value) {
|
||||
const chart = echarts.init(document.getElementById(id));
|
||||
const option = {
|
||||
series: [{
|
||||
type: 'gauge',
|
||||
center: ['50%', '55%'],
|
||||
radius: '90%',
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitNumber: 10,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 15,
|
||||
color: [
|
||||
[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: '#e0e0e0' }, // 白灰
|
||||
{ offset: 1, color: '#003366' } // 深蓝
|
||||
])]
|
||||
]
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
|
||||
length: '70%',
|
||||
width: 10,
|
||||
offsetCenter: [0, '-40%'],
|
||||
itemStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
length: 12,
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.3)',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
distance: -25
|
||||
},
|
||||
detail: {
|
||||
fontSize: 24,
|
||||
offsetCenter: [0, '-10%'],
|
||||
color: '#fff',
|
||||
formatter: '{value}%'
|
||||
},
|
||||
data: [{ value }]
|
||||
}]
|
||||
};
|
||||
chart.setOption(option);
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
// 添加样式
|
||||
|
||||
<style lang="less">
|
||||
#right-echarts-new {
|
||||
width: 100%;
|
||||
padding: 40px 20px 0 0;
|
||||
height: calc(100% - 120px);
|
||||
}
|
||||
#left-rankchart {
|
||||
width: 100%;
|
||||
padding: 40px 20px 0 0;
|
||||
margin-top: 50px;
|
||||
height: calc(100% - 120px);
|
||||
overflow-y: auto;
|
||||
|
||||
.rank-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
height: 30px;
|
||||
|
||||
.rank-name {
|
||||
width: 100px;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.rank-progress {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 15px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.rank-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #08e5ff, #0078ff);
|
||||
border-radius: 15px;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.rank-value {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.middle-top {
|
||||
padding-left: 20px;
|
||||
margin-top: -50px;
|
||||
margin-bottom: 50px;
|
||||
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: 25px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.inspection-value {
|
||||
font-size: 36px;
|
||||
color: #08e5ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.pass-rate-box {
|
||||
width: 27%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.gauge-chart {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.pass-rate-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-top: -70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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: 25px;
|
||||
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: 40%;
|
||||
height: 100%;
|
||||
|
||||
.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: 30%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// background-image: url('./img/bg2.png');
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: contain;
|
||||
.ccmc-title{
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 30px;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.title-decoration {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 25px;
|
||||
background-color: #08e5ff; // 淡蓝色
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.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: -70px;
|
||||
|
||||
}
|
||||
|
||||
.ccmc-right {
|
||||
margin-top: -70px;
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,318 @@
|
|||
<template>
|
||||
<div id="rose-chart" style="width: 100%;height:100%">
|
||||
<div :id="pieId" class="pie-chart-container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import testRes from './test';
|
||||
function getCurrentMonthDates() {
|
||||
const dates = [];
|
||||
const today = new Date();
|
||||
const year = today.getFullYear();
|
||||
const month = today.getMonth();
|
||||
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
||||
|
||||
for (let i = 1; i <= daysInMonth; i++) {
|
||||
const formattedDate = `${(month + 1).toString().padStart(2, '0')}-${i.toString().padStart(2, '0')}`;
|
||||
dates.push(formattedDate);
|
||||
}
|
||||
|
||||
return dates;
|
||||
}
|
||||
export default {
|
||||
name: 'RoseChart',
|
||||
props: {
|
||||
pieId: {
|
||||
type: String,
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
},
|
||||
dataType: {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createData() {
|
||||
|
||||
var myChart = echarts.init(document.getElementById(this.pieId));
|
||||
console.log(myChart)
|
||||
this.option = {
|
||||
title: {
|
||||
text: '本月不良率推移图',
|
||||
textStyle: {
|
||||
fontSize: 25,
|
||||
fontWight:'bold',
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
icon: 'rect',
|
||||
itemWidth: 20,
|
||||
itemHeight: 20,
|
||||
itemGap: 40,
|
||||
// data: ['反白', '偏移', '侧立', '缺件', '少锡'],
|
||||
data: ['不良率'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 20, // 25 -> 20
|
||||
fontWight:'bold'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 25, // 30 -> 25
|
||||
color: '#fff',
|
||||
onZero: false
|
||||
},
|
||||
data: getCurrentMonthDates()
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 10, // 设置最大值为10%
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#999',
|
||||
width: 2,
|
||||
height:1,
|
||||
dashArray: [15, 5]
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 25,
|
||||
color: '#fff',
|
||||
formatter: function (value) {
|
||||
return value + '%'; // 添加百分比符号
|
||||
}
|
||||
},
|
||||
},
|
||||
series:
|
||||
[
|
||||
{
|
||||
name: '反白',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: Array.from({length: getCurrentMonthDates().length}, () => (Math.random() * 10).toFixed(2)),
|
||||
lineStyle: { width: 4 },
|
||||
symbolSize: 12,
|
||||
},
|
||||
// {
|
||||
// name: '偏移',
|
||||
// type: 'line',
|
||||
// smooth: true,
|
||||
// data: Array.from({length: getCurrentMonthDates().length}, () => (Math.random() * 10).toFixed(2)),
|
||||
// lineStyle: { width: 4 },
|
||||
// symbolSize: 12,
|
||||
// },
|
||||
// {
|
||||
// name: '侧立',
|
||||
// type: 'line',
|
||||
// smooth: true,
|
||||
// data: Array.from({length: getCurrentMonthDates().length}, () => (Math.random() * 10).toFixed(2)),
|
||||
// lineStyle: { width: 4 },
|
||||
// symbolSize: 12,
|
||||
// },
|
||||
// {
|
||||
// name: '缺件',
|
||||
// type: 'line',
|
||||
// smooth: true,
|
||||
// data: Array.from({length: getCurrentMonthDates().length}, () => (Math.random() * 10).toFixed(2)),
|
||||
// lineStyle: { width: 4 },
|
||||
// symbolSize: 12,
|
||||
// },
|
||||
// {
|
||||
// name: '少锡',
|
||||
// type: 'line',
|
||||
// smooth: true,
|
||||
// data: Array.from({length: getCurrentMonthDates().length}, () => (Math.random() * 10).toFixed(2)),
|
||||
// lineStyle: { width: 4 },
|
||||
// symbolSize: 12,
|
||||
// }
|
||||
]
|
||||
};
|
||||
myChart.setOption(this.option);
|
||||
},
|
||||
createData2() {
|
||||
var myChart = echarts.init(document.getElementById(this.pieId));
|
||||
console.log(myChart)
|
||||
this.option = {
|
||||
title: {
|
||||
text: '近一周产量趋势',
|
||||
textStyle: {
|
||||
fontSize:30,
|
||||
fontWight:'bold',
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
icon: 'rect',
|
||||
itemWidth: 20, // 色块宽度
|
||||
itemHeight: 20, // 色块高度
|
||||
itemGap: 40, // 图例之间的间距
|
||||
data:['水件', '进水阀', '排水阀','按钮'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize:30,
|
||||
fontWight:'bold'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
fontSize: 35, // 设置 Y 轴字体大小
|
||||
color: '#fff', // 可选：设置字体颜色
|
||||
onZero: false ,// 确保 y 轴不与第一个数据点对齐
|
||||
// 只显示奇数索引的 x 轴标签
|
||||
// formatter: function (value, index) {
|
||||
// return index % 2 === 1 ? value : ''; // 奇数索引显示，偶数索引隐藏
|
||||
// }
|
||||
},
|
||||
|
||||
data: testRes.data.yx_v_bzcl1w.map(item=>{return item["日期"]})
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true, // 显示 y 轴辅助线
|
||||
lineStyle: {
|
||||
type: 'dashed', // 设置为虚线
|
||||
color: '#999', // 虚线颜色
|
||||
width: 2, // 虚线宽度
|
||||
height:1,
|
||||
dashArray: [15, 5]
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 35, // 设置 Y 轴字体大小
|
||||
color: '#fff', // 可选：设置字体颜色
|
||||
// 只显示偶数的 y 轴标签
|
||||
formatter: function (value) {
|
||||
return value % 200 === 0 ? value : ''; // 偶数显示，奇数隐藏
|
||||
}
|
||||
},
|
||||
},
|
||||
series:
|
||||
[
|
||||
{
|
||||
name: '水件',
|
||||
type: 'line',
|
||||
// stack: 'null',
|
||||
smooth: true,
|
||||
data: testRes.data.yx_v_bzcl1w.map(item=>{return item["水件"]}),
|
||||
lineStyle: {
|
||||
width: 4, // 数据线加粗
|
||||
},
|
||||
symbolSize: 12, // 数据点大小
|
||||
},
|
||||
{
|
||||
name: '进水阀',
|
||||
type: 'line',
|
||||
// stack: 'null',
|
||||
smooth: true,
|
||||
data: testRes.data.yx_v_bzcl1w.map(item=>{return item["进水阀"]}),
|
||||
lineStyle: {
|
||||
width: 4, // 数据线加粗
|
||||
},
|
||||
symbolSize: 12, // 数据点大小
|
||||
},
|
||||
{
|
||||
name: '排水阀',
|
||||
type: 'line',
|
||||
// stack: 'null',
|
||||
smooth: true,
|
||||
data: testRes.data.yx_v_bzcl1w.map(item=>{return item["排水阀"]}),
|
||||
lineStyle: {
|
||||
width: 4, // 数据线加粗
|
||||
},
|
||||
symbolSize: 12, // 数据点大小
|
||||
},
|
||||
{
|
||||
name: '按钮',
|
||||
type: 'line',
|
||||
// stack: 'null',
|
||||
smooth: true,
|
||||
data: testRes.data.yx_v_bzcl1w.map(item=>{return item["按钮"]}),
|
||||
lineStyle: {
|
||||
width: 4, // 数据线加粗
|
||||
},
|
||||
symbolSize: 12, // 数据点大小
|
||||
},
|
||||
|
||||
]
|
||||
};
|
||||
myChart.setOption(this.option);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const { createData,createData2 } = this
|
||||
if(this.dataType == 3){
|
||||
createData2()
|
||||
}else{
|
||||
createData()
|
||||
}
|
||||
|
||||
// setInterval(createData, 100000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#rose-chart {
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
|
||||
.pie-chart-container {
|
||||
height: 100%
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
<template>
|
||||
<div id="rose-chart2" style="flex:1" >
|
||||
<div class="chart-title">
|
||||
成品终检合格率
|
||||
</div>
|
||||
<div id="echarts-new" class="pie-chart-container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import testRes from './test';
|
||||
export default {
|
||||
name: 'RoseChart',
|
||||
props: {
|
||||
pieId: {
|
||||
type: String,
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
},
|
||||
dataType: {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createData() {
|
||||
// 模拟数据（每个柱子的总高度，单位：%）
|
||||
const rawData = [85, 92, 78, 95, 88, 90]; // P1-P6的合格率数据
|
||||
|
||||
// 将数据按 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: '45%', // 从40%增加到45%，增加5px宽度
|
||||
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 = {
|
||||
legend: {
|
||||
icon: 'rect',
|
||||
itemWidth: 20,
|
||||
itemHeight: 20,
|
||||
itemGap: 40,
|
||||
data: ['合格率目标'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 20,
|
||||
fontWight:'bold'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['P1', 'P2', 'P3', 'P4', 'P5', 'P6'],
|
||||
axisLabel: {
|
||||
fontSize: 23,
|
||||
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, // 保留原有的堆叠柱状图系列
|
||||
{
|
||||
name: '合格率目标',
|
||||
type: 'line',
|
||||
data: [80, 85, 83, 77, 85, 79],
|
||||
symbolSize: 10,
|
||||
itemStyle: {
|
||||
color: '#FFA500' // 橙色折线
|
||||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
type: 'solid'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
myChart.setOption(this.option);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.createData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#rose-chart2 {
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
|
||||
.chart-title {
|
||||
font-size: 25px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// margin-bottom: 15px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #08e5ff; // 浅蓝色
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.pie-chart-container {
|
||||
height:calc(100% - 30px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<template>
|
||||
<div class="right-chart-1">
|
||||
<div class="rc1-header">备料计划</div>
|
||||
<dv-scroll-board :config="config" style="height:90%;margin-left: 2%;width:96%" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RightChart1',
|
||||
props: {
|
||||
dataType: {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
function generateRandomData(N, title) {
|
||||
const data = [];
|
||||
let date = new Date(); // 从今天的日期开始
|
||||
for (let i = 1; i <= N; i++) {
|
||||
// 格式化日期为'YYYY-MM-DD'
|
||||
const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||||
const formattedDate2 = `${date.getFullYear()}${String(date.getMonth() + 1).padStart(2, '0')}${String(date.getDate()).padStart(2, '0')}`;
|
||||
|
||||
// 订单量随机在20到200之间，步长为10
|
||||
const orderQuantity = Math.floor(Math.random() * 19 + 2) * 10;
|
||||
|
||||
// 完成数量随机但不超过订单量
|
||||
const completedQuantity = Math.floor(Math.random() * (orderQuantity / 10)) * 10;
|
||||
|
||||
|
||||
// 创建新的数据项
|
||||
const newDataItem = [
|
||||
//`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
||||
title, // 固定值
|
||||
orderQuantity, // 订单量
|
||||
completedQuantity // 完成数量
|
||||
];
|
||||
|
||||
data.push(newDataItem);
|
||||
|
||||
// 更新日期至下一天
|
||||
date.setDate(date.getDate() + 1);
|
||||
}
|
||||
return data;
|
||||
}
|
||||
let data = [];
|
||||
|
||||
['U1电源线压板', '接地线[160mm]', '硅胶管[4*7，50cm,棕色]', '卡箍[内径7.5mm]', '防倒流器[进气口倾斜45度]', '硅胶管[5*8,90mm]', '卡箍[内径7.5mm]', '夜灯[灯光蓝色,360±5mm长度,2P黄色插头]', '卡箍[内径7.5mm]', 'U1烘干上壳', '扎带[3*10]', '即热器电源线[24cm]', '发热丝[220V]', '大泵电源线[连接线,450mm]', '脚感[连接线,600mm]', '硅胶管[4*7,120mm]', '卡箍[内径7.5mm]', '进水2分管[900mm]', '分配阀[2进4出,1直3弯]', '气泵[线长40cm,减震棉2mm]', '盘头自攻螺丝[4*30,304不锈钢,平尾]', '盘头机牙螺丝[4*6,带垫片,430不锈钢]', 'U1线卡', '漏保电源线[220V,10A]', '硅胶管[4*7,230mm]', '盘头机牙螺丝[4*6,带垫片,430不锈钢]', '风机', '硅胶管[4*7,150mm]', '水杀菌[线长度220mm±5mm]', '硅胶管[4*7,120mm]', '硅胶管[4*7,140mm]', '出泡头[带10cm硅胶管]', '即热器', 'U1气泵压板', '减压阀', '主控板', '喷杆[35电机,塑料喷杆,硅胶管140mm]', 'U1单边水箱防水罩', '接地铜片[20*20]', '盘头自攻螺丝[4*10,430不锈钢]', '盘头自攻螺丝[4*9,430不锈钢,平尾]', 'U1底座[白色]', 'U1烘干下壳'].forEach(a=>{
|
||||
|
||||
data = [...data,...generateRandomData(1, a)];
|
||||
})
|
||||
|
||||
return {
|
||||
config: {
|
||||
header: [
|
||||
//'工单号',
|
||||
'物料名称', '备料数', '欠数料'],
|
||||
data: data,
|
||||
index: false,
|
||||
columnWidth: [300],
|
||||
align: ['center']
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.right-chart-1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.rc1-header {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin-top: 2%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rc1-chart-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 30%;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.number {
|
||||
font-size: 34px;
|
||||
color: #096dd9;
|
||||
font-weight: bold;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
padding-bottom: 20px;
|
||||
padding-right: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<div id="data-view">
|
||||
<dv-full-screen-container>
|
||||
|
||||
|
||||
<top-header :Name="'恒通达智慧数据看板'" style="height:5%;" />
|
||||
<div class="main-container" style="height: 55%;">
|
||||
<div class="rmc-top-container" v-if="switchType == 2">
|
||||
<div class="rmctc-middle-container">
|
||||
<Center-Cmp :dataType="dataType" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="rmc-bottom-container" style="height: 45%;display:flex;">
|
||||
<dv-border-box-1 style="width:70%;height:95%">
|
||||
<Left-Chart-1 style="height:100%;padding:20px;" :dataType="dataType" :pieId="'leftchar1'"/>
|
||||
</dv-border-box-1>
|
||||
<dv-border-box-5 style="width:30%;height:95%">
|
||||
<Left-Chart-2 style="height:100%;padding:20px;" :dataType="dataType" :pieId="'leftchar2'"/>
|
||||
</dv-border-box-5>
|
||||
|
||||
</div>
|
||||
|
||||
</dv-full-screen-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topHeader from './topHeader'
|
||||
import LeftChart1 from './LeftChart1'
|
||||
import LeftChart2 from './LeftChart2'
|
||||
|
||||
import CenterCmp from './CenterCmp'
|
||||
|
||||
import RightChart1 from './RightChart1'
|
||||
|
||||
import BottomCharts from './BottomCharts'
|
||||
|
||||
export default {
|
||||
name: 'DataView',
|
||||
|
||||
components: {
|
||||
topHeader,
|
||||
LeftChart1,
|
||||
LeftChart2,
|
||||
CenterCmp,
|
||||
RightChart1,
|
||||
BottomCharts
|
||||
},
|
||||
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,190 @@
|
|||
<template>
|
||||
<div id="pie-chart" style="height: 100%;width: 100%;position: relative;">
|
||||
<div id="pieId-new" class="pie-chart-container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
export default {
|
||||
name: 'RoseChart',
|
||||
props: {
|
||||
pieId: {
|
||||
type: String,
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
},
|
||||
props: {
|
||||
dataType: {
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
digitalFlopStyle: {
|
||||
fontSize: 45,
|
||||
fill: '#fff'
|
||||
},
|
||||
option: {}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
},
|
||||
mounted() {
|
||||
const { createData } = this
|
||||
|
||||
createData()
|
||||
|
||||
},
|
||||
methods: {
|
||||
createData() {
|
||||
let chartData = [
|
||||
{
|
||||
value: 35,
|
||||
name: "外观不良",
|
||||
},
|
||||
{
|
||||
value: 95,
|
||||
name: "尺寸不良",
|
||||
},
|
||||
{
|
||||
value: 55,
|
||||
name: "功能不良",
|
||||
},
|
||||
{
|
||||
value: 50,
|
||||
name: "包装不良",
|
||||
},
|
||||
{
|
||||
value: 50,
|
||||
name: "标签不良",
|
||||
},
|
||||
{
|
||||
value: 55,
|
||||
name: "其他不良",
|
||||
},
|
||||
];
|
||||
|
||||
const colorList = ['#3de7c9','#88a8f4','#FFD700','#08e5ff', '#FF69B4', '#9370DB'];
|
||||
const sum = chartData.reduce((per, cur) => per + cur.value, 0);
|
||||
|
||||
var myChart = echarts.init(document.getElementById('pieId-new'));
|
||||
this.option = {
|
||||
title: {
|
||||
text: '当月不良指标数',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 25
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
indicator: chartData.map(item => {
|
||||
return { name: item.name, max: 100 };
|
||||
}),
|
||||
radius: '70%',
|
||||
splitNumber: 4,
|
||||
axisName: {
|
||||
color: '#fff',
|
||||
fontSize: 20 // 从14px修改为20px
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.5)' // 修改为半透明白色
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.5)', // 修改为半透明白色
|
||||
type: 'circle',
|
||||
width: 2 // 加粗辅助线
|
||||
}
|
||||
},
|
||||
shape: 'circle' // 强制使用圆形
|
||||
},
|
||||
series: [{
|
||||
type: 'radar',
|
||||
data: [{
|
||||
value: chartData.map(item => item.value),
|
||||
name: '产量统计',
|
||||
areaStyle: {
|
||||
color: 'rgba(8, 229, 255, 0.4)' // 修改为浅蓝色#08e5ff
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#08e5ff' // 修改为浅蓝色#08e5ff
|
||||
},
|
||||
symbolSize: 8,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: function(params) {
|
||||
return params.value;
|
||||
},
|
||||
color: '#fff'
|
||||
}
|
||||
}]
|
||||
}]
|
||||
};
|
||||
myChart.setOption(this.option);
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#pie-chart {
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
.item-box{
|
||||
position: absolute;
|
||||
p{margin: 0;}
|
||||
.item-name{
|
||||
width: 200px;
|
||||
font-size:30px;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.item-value-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.item-value{
|
||||
font-size:45px;
|
||||
padding: 0 10px;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.pie-chart-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
/* 向右的三角形 */
|
||||
.triangle-right {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 15px solid transparent;
|
||||
border-bottom: 15px solid transparent;
|
||||
border-left: 20px solid #ff4141; /* 通过调整颜色和尺寸改变外观 */
|
||||
}
|
||||
|
||||
/* 向左的三角形 */
|
||||
.triangle-left {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 15px solid transparent;
|
||||
border-bottom: 15px solid transparent;
|
||||
border-right: 20px solid #41a2ff; /* 通过调整颜色和尺寸改变外观 */
|
||||
}
|
||||
}
|
||||
</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>
|
||||
Loading…
Reference in New Issue