Merge branch 'main' of https://git.positivepole.cn/dev/GScreenWEB_TPMes
This commit is contained in:
commit
fba56eb861
|
|
@ -6,9 +6,9 @@ const api = {
|
|||
//永盛
|
||||
baseURL2: 'http://123.207.37.67:9001',
|
||||
|
||||
baseURL3: 'http://36.139.158.169:9261',
|
||||
baseURL: 'http://36.139.158.169:9261',
|
||||
|
||||
baseURL: 'http://vmikhs.demo.natool.cn',
|
||||
baseURL3: 'http://vmikhs.demo.natool.cn',
|
||||
|
||||
get (url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,674 @@
|
|||
// 修改模板部分
|
||||
<template>
|
||||
<div class="center-cmp-new">
|
||||
<div class="cc-main-container" style="height:100%;display:flex;">
|
||||
<div class="ccmc-left-new">
|
||||
<dv-border-box-1>
|
||||
<!-- <div class="ccmc-title">
|
||||
<span class="title-decoration"></span>
|
||||
大屏公示
|
||||
</div> -->
|
||||
<div class="ccmc-center">
|
||||
<!-- 新增数据显示部分 -->
|
||||
<div class="data-container">
|
||||
<div v-for="(item, index) in displayData" :key="index" class="data-item">
|
||||
<div class="data-name">{{ item.name }}</div>
|
||||
<div class="data-value">{{ item.value }}</div>
|
||||
<!-- 新增折线图容器 -->
|
||||
<div :id="'line-chart-' + index" style="width: 100%; height: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dv-border-box-1>
|
||||
</div>
|
||||
|
||||
<div class="ccmc-middle">
|
||||
<dv-border-box-1>
|
||||
<div class="ccmc-title">
|
||||
<span class="title-decoration"></span>
|
||||
检验进度
|
||||
</div>
|
||||
<div class="bottom-charts">
|
||||
<div style="width: 100%;" >
|
||||
<div class="bc-chart-item">
|
||||
<dv-scroll-board :config="config3" style="height:calc(100% - 30px);margin-left: 2%;width:96%" />
|
||||
</div>
|
||||
</div>
|
||||
</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'
|
||||
import LeftChart2 from './LeftChart2'
|
||||
|
||||
console.log(testRes)
|
||||
export default {
|
||||
name: 'CenterCmp',
|
||||
components: {
|
||||
LabelTag,PieChart,LeftChart2
|
||||
},
|
||||
props: {
|
||||
dataType: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
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() * 20) + 1;
|
||||
let completedQuantity;
|
||||
// 30% 的概率让完成数量等于订单量
|
||||
if (Math.random() < 0.3) {
|
||||
completedQuantity = orderQuantity;
|
||||
} else {
|
||||
// 其他情况下，完成数量在订单量的 80% 到 100% 之间
|
||||
completedQuantity = Math.floor(Math.random() * (orderQuantity * 0.2 + 1)) + Math.floor(orderQuantity * 0.8);
|
||||
// 确保步长为 10
|
||||
completedQuantity = Math.floor(completedQuantity / 10) * 10;
|
||||
}
|
||||
|
||||
// 计算完成百分比
|
||||
const completionRate = Math.floor((completedQuantity / orderQuantity) * 100);
|
||||
// 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 = [];
|
||||
// eslint-disable-next-line no-const-assign
|
||||
newDataItem = [
|
||||
`
|
||||
<div style="font-weight:bold;font-size:24px;">
|
||||
JY-${formattedDate2}${String(i).padStart(3, '0')}
|
||||
</div>
|
||||
`, // 编号
|
||||
`
|
||||
<div style="font-weight:bold;font-size:24px;">
|
||||
${orderQuantity}
|
||||
</div>
|
||||
`, // 固定值
|
||||
`
|
||||
<div style="font-weight:bold;font-size:24px;">
|
||||
${completedQuantity}
|
||||
</div>
|
||||
`, // 固定值
|
||||
// formattedDate, // 日期
|
||||
// orderQuantity, // 订单量
|
||||
createProgressCircle(completionRate),
|
||||
// createProgressCircle(0),
|
||||
`
|
||||
<div style="font-weight:bold;font-size:24px;">
|
||||
${orderQuantity == completedQuantity ? '已完成' : '进行中'}
|
||||
</div>
|
||||
`, // 固定值
|
||||
`
|
||||
<div style="font-weight:bold;font-size:24px;">
|
||||
${orderQuantity == completedQuantity ? '合格' : ''}
|
||||
</div>
|
||||
`, // 固定值
|
||||
|
||||
];
|
||||
|
||||
|
||||
data.push(newDataItem);
|
||||
|
||||
// 更新日期至下一天
|
||||
date.setDate(date.getDate() + 1);
|
||||
}
|
||||
return 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 }
|
||||
]
|
||||
},
|
||||
config3: {
|
||||
header: ['检验单号', '检验项目数','已检数','检验进度','检验状态','检验结果'] ,
|
||||
data: generateRandomData(30, 'U1C智能坐便器[220V]'),
|
||||
index: true,
|
||||
columnWidth: [80, 260],
|
||||
align: ['center'],
|
||||
rowNum:10,
|
||||
},
|
||||
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: 'U1A', value: 99 },
|
||||
{ name: 'U2A', value: 96 },
|
||||
{ name: 'U2B', value: 90 },
|
||||
{ name: 'U2C', value: 85 },
|
||||
{ name: 'U1B', value: 95 },
|
||||
{ name: 'U1C', value: 93 },
|
||||
],
|
||||
displayData: [
|
||||
{ name: '年度送检总数', value: '236' },
|
||||
{ name: '月度送检总数', value: '48' },
|
||||
{ name: '在检样品总数', value: '30' },
|
||||
{ name: '已检样品总数', value: '206' },
|
||||
{ name: '合格率', value: '97.8%' }
|
||||
],
|
||||
// 模拟折线图数据
|
||||
lineChartData: [
|
||||
[0, 50, 15, 85, 80, 99],
|
||||
[0, 48, 22, 86, 84, 99],
|
||||
[0, 35, 18, 28, 32, 99],
|
||||
[0, 26, 20, 84, 22, 80],
|
||||
[0, 27, 21, 75, 23, 76]
|
||||
],
|
||||
rightChartData: [
|
||||
{ name: '注塑件', value: 98 },
|
||||
{ name: '五金件', value: 99 },
|
||||
{ name: '橡硅胶件', value: 100 },
|
||||
{ name: '包材件', value: 99 },
|
||||
{ name: '电子件', value: 92 },
|
||||
{ name: '组件', value: 92 },
|
||||
{ name: '陶瓷', value: 94 }
|
||||
],
|
||||
|
||||
leftData: this.dataType == '3'?originalLeftData2:originalLeftData,
|
||||
rightData: this.dataType == '3'?originalRightData2:originalRightData
|
||||
}
|
||||
},
|
||||
// 在mounted()中调用
|
||||
mounted() {
|
||||
this.initLineCharts();
|
||||
},
|
||||
// 在methods中添加方法
|
||||
methods: {
|
||||
// 初始化折线图
|
||||
initLineCharts() {
|
||||
console.log(333)
|
||||
this.displayData.forEach((_, index) => {
|
||||
const chart = echarts.init(document.getElementById(`line-chart-${index}`));
|
||||
const option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1', '2', '3', '4', '5', '6'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'transparent'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'transparent'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.lineChartData[index],
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
symbol: 'none'
|
||||
}
|
||||
]
|
||||
};
|
||||
chart.setOption(option);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
// 添加样式
|
||||
|
||||
<style lang="less">
|
||||
.center-cmp-new {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
#left-rankchart {
|
||||
width: 100%;
|
||||
padding: 0 20px 0 0;
|
||||
margin-top: 50px;
|
||||
height: calc(100% - 70px);
|
||||
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: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#right-echarts-new {
|
||||
width: 100%;
|
||||
padding: 40px 20px 0 0;
|
||||
}
|
||||
|
||||
.ccmc-center {
|
||||
margin-top: 50px;
|
||||
width: 100%;
|
||||
height: calc(100% - 70px);
|
||||
.data-container {
|
||||
// height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between; // 均匀分布元素
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
// padding: 0 20px; // 左右添加 20px 内边距，确保第一个和最后一个元素有间距
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.data-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
flex: 1; // 每个元素占据相同宽度
|
||||
margin: 0 10px; // 左右各 10px 间距，总间距 20px
|
||||
padding: 15px; // 添加内边距
|
||||
border: 1px solid rgba(255, 255, 255, 0.2); // 半透明边框
|
||||
border-radius: 10px; // 圆边边框
|
||||
background-color: rgba(135, 222, 242, 0.118); // 20% 透明灰色背景ß
|
||||
}
|
||||
.data-name {
|
||||
color: #fff;
|
||||
font-size: 27px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.data-value {
|
||||
color: #08e5ff;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
flex-direction: column;
|
||||
.ccmc-middle {
|
||||
width: 100%;
|
||||
height: 73%;
|
||||
|
||||
.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-new {
|
||||
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 27%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.bottom-charts {
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.bc-chart-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.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%;
|
||||
// left: 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%);
|
||||
}
|
||||
.dv-scroll-board .rows .row-item{
|
||||
}
|
||||
.dv-scroll-board .header .header-item{
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</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,347 @@
|
|||
<template>
|
||||
<div id="rose-chart" style="width: 100%;height:100%">
|
||||
<div class="chart-title">
|
||||
本月不良率推移图
|
||||
</div>
|
||||
<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() {
|
||||
const dates = getCurrentMonthDates();
|
||||
const today = new Date();
|
||||
const currentDay = today.getDate();
|
||||
|
||||
// 生成模拟数据，未到日期的值为0
|
||||
const generateData = () => {
|
||||
return dates.map((date, index) => {
|
||||
const day = parseInt(date.split('-')[1]);
|
||||
return day <= currentDay ? (Math.random() * 10).toFixed(2) : 0;
|
||||
});
|
||||
};
|
||||
|
||||
var myChart = echarts.init(document.getElementById(this.pieId));
|
||||
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: generateData(),
|
||||
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;
|
||||
.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,174 @@
|
|||
<template>
|
||||
<div id="rose-chart2" style="flex:1" >
|
||||
<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()中添加月份数据
|
||||
data() {
|
||||
return {
|
||||
option: {},
|
||||
monthLabels: this.getRecentMonthLabels()
|
||||
}
|
||||
},
|
||||
|
||||
// 在methods中添加获取最近月份标签的方法
|
||||
methods: {
|
||||
getRecentMonthLabels() {
|
||||
const labels = [];
|
||||
const date = new Date();
|
||||
|
||||
for (let i = 5; i >= 0; i--) {
|
||||
const d = new Date(date);
|
||||
d.setMonth(date.getMonth() - i);
|
||||
// 格式化为"年份后两位+月份" (如2504表示2025年4月)
|
||||
const year = d.getFullYear().toString().slice(-2);
|
||||
const month = (d.getMonth() + 1).toString().padStart(2, '0');
|
||||
labels.push(`${year}${month}`);
|
||||
}
|
||||
return labels;
|
||||
},
|
||||
createData() {
|
||||
// 模拟数据（每个柱子的总高度，单位：%）
|
||||
const rawData = [95, 92, 98, 95, 98, 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: this.monthLabels, // 使用动态生成的月份标签
|
||||
axisLabel: {
|
||||
fontSize: 23,
|
||||
color: '#fff',
|
||||
fontWight:'bold',
|
||||
interval: 0
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 100,
|
||||
axisLine: { show: true },
|
||||
splitLine: {
|
||||
show: false, // 显示 y 轴辅助线
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 20, // 设置 Y 轴字体大小
|
||||
color: '#fff', // 可选：设置字体颜色
|
||||
fontWight:'bold',
|
||||
formatter: '{value}%' // 在每一个值后面添加 %
|
||||
},
|
||||
},
|
||||
series: [
|
||||
...series, // 保留原有的堆叠柱状图系列
|
||||
{
|
||||
name: '合格率目标',
|
||||
type: 'line',
|
||||
data: [98, 98, 98, 98, 98, 98],
|
||||
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,718 @@
|
|||
// 修改模板部分
|
||||
<template>
|
||||
<div class="left-cmp">
|
||||
<div class="cc-main-container" style="height:100%;display:flex;">
|
||||
<div class="ccmc-left-new">
|
||||
<dv-border-box-1>
|
||||
<div class="ccmc-title">
|
||||
<span class="title-decoration"></span>
|
||||
工作人员
|
||||
</div>
|
||||
<div class="staff-box" style="width:100%;">
|
||||
<!-- 循环生成四个元素 -->
|
||||
<div class="staff-item" v-for="(staff, index) in staffList" :key="index">
|
||||
<div class="staff-info">
|
||||
<div class="staff-name">{{ staff.name }}</div>
|
||||
<div class="staff-count">{{ staff.arrived }}/{{ staff.total }}</div>
|
||||
</div>
|
||||
<div class="staff-images">
|
||||
<!-- 循环生成六个人物图片 -->
|
||||
<img
|
||||
v-for="(img, imgIndex) in staff.arrived"
|
||||
:key="imgIndex"
|
||||
src="./img/icons/13.png"
|
||||
alt="Staff Avatar"
|
||||
>
|
||||
<img
|
||||
v-for="(img, imgIndex) in (staff.total-staff.arrived)"
|
||||
:key="imgIndex"
|
||||
src="./img/icons/14.png"
|
||||
alt="Staff Avatar"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dv-border-box-1>
|
||||
</div>
|
||||
|
||||
<div class="ccmc-middle">
|
||||
<dv-border-box-1>
|
||||
<div class="ccmc-title">
|
||||
<span class="title-decoration"></span>
|
||||
检验样品情况
|
||||
</div>
|
||||
<div id="left-rankchart2">
|
||||
<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-right-new">
|
||||
<dv-border-box-1>
|
||||
<div class="ccmc-title">
|
||||
<span class="title-decoration"></span>
|
||||
设备使用率
|
||||
</div>
|
||||
<!-- <Left-Chart-2 style="height: 100%;margin:30px 0 0 20px" :dataType="dataType" :pieId="'leftchar2'"/> -->
|
||||
<div id="pie-charts-isNot" style="width:100%;height:calc(100% - 50px);margin-top:30px;">
|
||||
|
||||
</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'
|
||||
import LeftChart2 from './LeftChart2'
|
||||
|
||||
console.log(testRes)
|
||||
export default {
|
||||
name: 'CenterCmp',
|
||||
components: {
|
||||
LabelTag,PieChart,LeftChart2
|
||||
},
|
||||
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: ['机芯产量', '盖板产量']
|
||||
},
|
||||
// 模拟设备使用数据
|
||||
deviceUsageData: [
|
||||
{ value: 30, name: '设备未使用' },
|
||||
{ value: 70, name: '设备已使用' },
|
||||
],
|
||||
rankData: [
|
||||
{ name: '01月', value: 100 },
|
||||
{ name: '02月', value: 96 },
|
||||
{ name: '03月', value: 90 },
|
||||
{ name: '04月', value: 85 },
|
||||
{ name: '05月', value: 95 },
|
||||
{ name: '06月', value: 0 },
|
||||
{ name: '07月', value: 0 },
|
||||
{ name: '08月', value: 0 },
|
||||
{ name: '09月', value: 0 },
|
||||
{ name: '10月', value: 0 },
|
||||
{ name: '11月', value: 0 },
|
||||
{ name: '12月', value: 0 },
|
||||
],
|
||||
staffList: [
|
||||
{ name: '负责人', arrived: 1, total: 1 },
|
||||
{ name: '检验员', arrived: 2, total: 3 },
|
||||
],
|
||||
rightChartData: [
|
||||
{ name: '注塑件', value: 98 },
|
||||
{ name: '五金件', value: 99 },
|
||||
{ name: '橡硅胶件', value: 100 },
|
||||
{ name: '包材件', value: 99 },
|
||||
{ name: '电子件', value: 92 },
|
||||
{ name: '组件', value: 92 },
|
||||
{ name: '陶瓷', value: 94 }
|
||||
],
|
||||
|
||||
leftData: this.dataType == '3'?originalLeftData2:originalLeftData,
|
||||
rightData: this.dataType == '3'?originalRightData2:originalRightData
|
||||
}
|
||||
},
|
||||
// 在mounted()中调用
|
||||
mounted() {
|
||||
this.initRightChart();
|
||||
this.initPieChart(); // 新增初始化饼图方法
|
||||
},
|
||||
// 在methods中添加方法
|
||||
methods: {
|
||||
// 修改柱状图y轴配置
|
||||
initRightChart() {
|
||||
const chartDom = document.getElementById('right-echarts-new');
|
||||
if (chartDom) {
|
||||
const chart = echarts.init(chartDom);
|
||||
const option = {
|
||||
legend: {
|
||||
icon: 'rect',
|
||||
itemWidth: 20,
|
||||
itemHeight: 20,
|
||||
itemGap: 40,
|
||||
data: ['合格率目标'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 20,
|
||||
fontWight:'bold'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '0%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.rightChartData.map(item => item.name),
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 20,
|
||||
rotate: 30
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 100,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 23,
|
||||
fontWight:'bold',
|
||||
formatter: '{value}%' // 添加百分比显示
|
||||
},
|
||||
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: 18
|
||||
}
|
||||
},
|
||||
// 添加合格率目标折线
|
||||
{
|
||||
name: '合格率目标',
|
||||
type: 'line',
|
||||
data: [98, 98, 98, 98, 97, 96,95],
|
||||
symbolSize: 10,
|
||||
itemStyle: {
|
||||
color: '#FFA500' // 橙色折线
|
||||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
type: 'solid'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
chart.setOption(option);
|
||||
console.log(222);
|
||||
} else {
|
||||
console.warn('未找到 #right-echarts-new 元素，无法初始化 ECharts 图表');
|
||||
}
|
||||
},
|
||||
// 新增初始化饼图方法
|
||||
initPieChart() {
|
||||
const chartDom = document.getElementById('pie-charts-isNot');
|
||||
if (chartDom) {
|
||||
const chart = echarts.init(chartDom);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '设备使用情况',
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
// 添加颜色数组，第一个为红色，第二个为绿色
|
||||
color: ['#ee6666', '#91cc75'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 20,
|
||||
color: '#fff',
|
||||
formatter: '{b} : {d}%'
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
data: this.deviceUsageData,
|
||||
}
|
||||
]
|
||||
};
|
||||
chart.setOption(option);
|
||||
} else {
|
||||
console.warn('未找到 #pie-charts-isNot 元素，无法初始化 ECharts 饼图');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
// 添加样式
|
||||
|
||||
<style lang="less">
|
||||
.left-cmp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
#left-rankchart2 {
|
||||
width: 100%;
|
||||
padding: 0 20px 0 0;
|
||||
margin-top: 50px;
|
||||
height: calc(100% - 30px);
|
||||
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: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#right-echarts-new {
|
||||
width: 100%;
|
||||
padding: 40px 20px 0 0;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
flex-direction: column;
|
||||
.ccmc-middle {
|
||||
width: 100%;
|
||||
height: 52%;
|
||||
|
||||
.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-right-new, .ccmc-left-new {
|
||||
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 33%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.ccmc-left-new{
|
||||
height: 15%;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.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,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>
|
||||
|
|
@ -0,0 +1,882 @@
|
|||
|
||||
<template>
|
||||
<div class="right-cmp">
|
||||
<div class="cc-main-container" style="height:100%;display:flex;">
|
||||
<div class="ccmc-left-new">
|
||||
<dv-border-box-1>
|
||||
<div class="ccmc-title">
|
||||
<span class="title-decoration"></span>
|
||||
天气预警
|
||||
</div>
|
||||
<div class="weather-container">
|
||||
<div class="weather-left">
|
||||
<!-- 绑定动态日期 -->
|
||||
<div class="weather-date">{{ todayDate }}</div>
|
||||
<!-- 绑定动态星期 -->
|
||||
<div class="weather-week">{{ todayWeek }}</div>
|
||||
</div>
|
||||
<div class="weather-right">
|
||||
<div class="weather-forecast">
|
||||
<div class="forecast-box">
|
||||
<div class="forecast-title">今天</div>
|
||||
<img class="weather-icon" src="./img/icons/sun.png" alt="天气图标">
|
||||
<div class="forecast-temperature">25-34°C</div>
|
||||
</div>
|
||||
<!-- 可添加另外两个预报盒子 -->
|
||||
<div class="forecast-box" style="border-left:1px solid #fff;border-right:1px solid #fff;">
|
||||
<div class="forecast-title" >明天</div>
|
||||
<img class="weather-icon" src="./img/icons/cloud.png" alt="天气图标">
|
||||
<div class="forecast-temperature">25-34°C</div>
|
||||
</div>
|
||||
<div class="forecast-box">
|
||||
<div class="forecast-title">后天</div>
|
||||
<img class="weather-icon" src="./img/icons/cloud.png" alt="天气图标">
|
||||
<div class="forecast-temperature">25-34°C</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weather-info">
|
||||
<div class="info-item">
|
||||
<span class="info-dot"></span>
|
||||
湿度: 20%
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-dot"></span>
|
||||
空气质量: 良好
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-dot"></span>
|
||||
风力: 3级
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-dot"></span>
|
||||
风向: 东南风
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="status-boxes">
|
||||
<div class="status-box">
|
||||
<div class="status-value" style="color: red;">3000</div>
|
||||
<div class="status-name">超标产品</div>
|
||||
</div>
|
||||
<div class="status-box">
|
||||
<div class="status-value" style="color: green;">2000</div>
|
||||
<div class="status-name">安全产品</div>
|
||||
</div>
|
||||
<div class="status-box">
|
||||
<div class="status-value" style="color: orange;">2000</div>
|
||||
<div class="status-name">预警产品</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:100%;height:300px;position:absolute;display:flex;justify-content: center; top:200px;">
|
||||
<div id="danger-charts" style="width:50%;height:200px;"></div>
|
||||
<div id="safe-charts" style="width:50%;height:200px;"></div>
|
||||
</div> -->
|
||||
</dv-border-box-1>
|
||||
</div>
|
||||
|
||||
<div class="ccmc-middle">
|
||||
<dv-border-box-1>
|
||||
<div class="ccmc-title">
|
||||
<span class="title-decoration"></span>
|
||||
主要不良样品
|
||||
</div>
|
||||
<!-- <div id="pie-type-chart" style="width:100%;height:100%;"></div> -->
|
||||
<PieChart :dataType="dataType" style="height:500px;"></PieChart>
|
||||
</dv-border-box-1>
|
||||
</div>
|
||||
|
||||
<div class="ccmc-right-new">
|
||||
<dv-border-box-1>
|
||||
<div class="ccmc-title">
|
||||
<span class="title-decoration"></span>
|
||||
检验SOP视频
|
||||
</div>
|
||||
<div class="jc-video" style="margin-top:70px;">
|
||||
<!-- 添加播放器 -->
|
||||
<video :src="getVideoUrl()" controls></video>
|
||||
</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'
|
||||
import LeftChart2 from './LeftChart2'
|
||||
|
||||
console.log(testRes)
|
||||
export default {
|
||||
name: 'CenterCmp',
|
||||
components: {
|
||||
LabelTag,PieChart,LeftChart2
|
||||
},
|
||||
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: 'U1A', value: 99 },
|
||||
{ name: 'U2A', value: 96 },
|
||||
{ name: 'U2B', value: 90 },
|
||||
{ name: 'U2C', value: 85 },
|
||||
{ name: 'U1B', value: 95 },
|
||||
{ name: 'U1C', value: 93 },
|
||||
],
|
||||
rightChartData: [
|
||||
{ name: '注塑件', value: 98 },
|
||||
{ name: '五金件', value: 99 },
|
||||
{ name: '橡硅胶件', value: 100 },
|
||||
{ name: '包材件', value: 99 },
|
||||
{ name: '电子件', value: 92 },
|
||||
{ name: '组件', value: 92 },
|
||||
{ name: '陶瓷', value: 94 }
|
||||
],
|
||||
// 随机 7 种陶瓷产品数据
|
||||
ceramicData: [
|
||||
{ value: Math.floor(Math.random() * 100), name: '外观不良' },
|
||||
{ value: Math.floor(Math.random() * 100), name: '尺寸不良' },
|
||||
{ value: Math.floor(Math.random() * 100), name: '功能不良' },
|
||||
{ value: Math.floor(Math.random() * 100), name: '寿命不良' },
|
||||
{ value: Math.floor(Math.random() * 100), name: '其他不良' },
|
||||
],
|
||||
leftData: this.dataType == '3'?originalLeftData2:originalLeftData,
|
||||
rightData: this.dataType == '3'?originalRightData2:originalRightData,
|
||||
currentVideo: 1, // 当前选中的视频
|
||||
videoUrls: {
|
||||
1: 'path/to/video1.mp4', // 替换为实际的视频地址
|
||||
2: 'path/to/video2.mp4' // 替换为实际的视频地址
|
||||
},
|
||||
todayDate: '',
|
||||
todayWeek: ''
|
||||
}
|
||||
},
|
||||
// 在mounted()中调用
|
||||
mounted() {
|
||||
// 获取当前日期和星期
|
||||
const date = new Date();
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||||
const week = weeks[date.getDay()];
|
||||
|
||||
this.todayDate = `${month}月${day}日`;
|
||||
this.todayWeek = week;
|
||||
|
||||
this.initPieChart();
|
||||
this.initDangerChart();
|
||||
this.initSafeChart();
|
||||
},
|
||||
// 在methods中添加方法
|
||||
methods: {
|
||||
// 修改柱状图y轴配置
|
||||
initPieChart() {
|
||||
const chartDom = document.getElementById('pie-type-chart');
|
||||
console.log(chartDom)
|
||||
if (chartDom) {
|
||||
const chart = echarts.init(chartDom);
|
||||
const option = {
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: '10%',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
fontSize: 25,
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['35%', '50%'],
|
||||
data: this.ceramicData,
|
||||
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
chart.setOption(option);
|
||||
} else {
|
||||
console.warn('未找到 #pie-type-chart 元素，无法初始化 ECharts 图表');
|
||||
}
|
||||
},
|
||||
// 切换视频的方法
|
||||
switchVideo(videoNumber) {
|
||||
this.currentVideo = videoNumber;
|
||||
},
|
||||
// 获取当前视频的地址
|
||||
getVideoUrl() {
|
||||
return this.videoUrls[this.currentVideo];
|
||||
},
|
||||
initDangerChart() {
|
||||
const chartDom = document.getElementById('danger-charts');
|
||||
if (chartDom) {
|
||||
const chart = echarts.init(chartDom);
|
||||
const option = {
|
||||
title: {
|
||||
text: '危险百分比',
|
||||
left: 'center',
|
||||
bottom: '10%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
center: ['50%', '40%'],
|
||||
radius: '70%',
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitNumber: 10,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 15,
|
||||
color: [
|
||||
[1, '#ff0000'] // 红色
|
||||
]
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
itemStyle: {
|
||||
color: '#ff0000'
|
||||
}
|
||||
},
|
||||
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: '#ff0000',
|
||||
formatter: '{value}%'
|
||||
},
|
||||
data: [{ value: 30 }] // 示例数据，可根据实际情况修改
|
||||
}
|
||||
]
|
||||
};
|
||||
chart.setOption(option);
|
||||
} else {
|
||||
console.warn('未找到 #danger-charts 元素，无法初始化 ECharts 图表');
|
||||
}
|
||||
},
|
||||
initSafeChart() {
|
||||
const chartDom = document.getElementById('safe-charts');
|
||||
if (chartDom) {
|
||||
const chart = echarts.init(chartDom);
|
||||
const option = {
|
||||
title: {
|
||||
text: '安全百分比',
|
||||
left: 'center',
|
||||
bottom: '10%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
center: ['50%', '40%'],
|
||||
radius: '70%',
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitNumber: 10,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 15,
|
||||
color: [
|
||||
[1, '#00ff00'] // 绿色
|
||||
]
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
itemStyle: {
|
||||
color: '#00ff00'
|
||||
}
|
||||
},
|
||||
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: '#00ff00',
|
||||
formatter: '{value}%'
|
||||
},
|
||||
data: [{ value: 70 }] // 示例数据，可根据实际情况修改
|
||||
}
|
||||
]
|
||||
};
|
||||
chart.setOption(option);
|
||||
} else {
|
||||
console.warn('未找到 #safe-charts 元素，无法初始化 ECharts 图表');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
// 添加样式
|
||||
|
||||
<style lang="less">
|
||||
.right-cmp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
#left-rankchart {
|
||||
width: 100%;
|
||||
padding: 0 20px 0 0;
|
||||
margin-top: 50px;
|
||||
height: calc(100% - 70px);
|
||||
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: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#right-echarts-new {
|
||||
width: 100%;
|
||||
padding: 40px 20px 0 0;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
flex-direction: column;
|
||||
.ccmc-middle {
|
||||
width: 100%;
|
||||
height: 39%;
|
||||
|
||||
.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-right-new{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 33%;
|
||||
}
|
||||
.ccmc-left-new{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 28%;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.jc-video {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
video {
|
||||
width: 94%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.status-boxes {
|
||||
width:100%;
|
||||
height:200px;
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.status-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
// background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.status-value {
|
||||
font-size: 35px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-name {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
.weather-container {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.weather-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
|
||||
.weather-date {
|
||||
font-size: 30px;
|
||||
color: orange;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.weather-week {
|
||||
font-size: 25px;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.weather-right {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.weather-forecast {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.forecast-box {
|
||||
display: flex;
|
||||
width: 33%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
// background-color: rgba(255, 255, 255, 0.1);
|
||||
// border-radius: 10px;
|
||||
}
|
||||
|
||||
.forecast-title {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.weather-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.forecast-temperature {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.weather-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 20px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
width: calc(50% - 5px);
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.info-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
</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: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 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 |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
|
|
@ -0,0 +1,171 @@
|
|||
<template>
|
||||
<div id="data-view">
|
||||
<dv-full-screen-container>
|
||||
|
||||
|
||||
<top-header :Name="'褓座智能数字化实验室'" style="height:5%;" />
|
||||
<div style="display:flex;height: 93%;">
|
||||
<div class="main-container" style="width: 25%;">
|
||||
<left-Cmp :dataType="dataType" style="width:100%;height:100%"/>
|
||||
</div>
|
||||
<div class="main-container" style="width: 50%;">
|
||||
<Center-Cmp :dataType="dataType" style="width:100%;height:100%"/>
|
||||
</div>
|
||||
<div class="main-container" style="width: 25%;">
|
||||
<Right-Cmp :dataType="dataType" style="width:100%;height:100%"/>
|
||||
</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 LeftCmp from './LeftCmp'
|
||||
import RightCmp from './RightCmp'
|
||||
import RightChart1 from './RightChart1'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'DataView',
|
||||
|
||||
components: {
|
||||
topHeader,
|
||||
LeftChart1,
|
||||
LeftChart2,
|
||||
CenterCmp,
|
||||
LeftCmp,
|
||||
RightCmp,
|
||||
RightChart1,
|
||||
},
|
||||
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,187 @@
|
|||
<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: 2,
|
||||
name: "喷杆",
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
name: "软管",
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
name: "包材",
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
name: "U1注塑件",
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
name: "螺丝",
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
name: "电机",
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
var myChart = echarts.init(document.getElementById('pieId-new'));
|
||||
this.option = {
|
||||
|
||||
radar: {
|
||||
indicator: chartData.map(item => {
|
||||
return { name: item.name, max: 10 };
|
||||
}),
|
||||
radius: '70%',
|
||||
splitNumber: 4,
|
||||
axisName: {
|
||||
color: '#fff',
|
||||
fontSize: 25 // 从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',
|
||||
colorBy: 'data', // 添加这一行，根据数据值改变颜色
|
||||
data: [{
|
||||
value: chartData.map(item => item.value),
|
||||
name: '产量统计',
|
||||
areaStyle: {
|
||||
color: 'rgba(8, 229, 255, 0.4)'
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#08e5ff'
|
||||
},
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#FFFFFF'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter: function(params) {
|
||||
return params.value;
|
||||
},
|
||||
color: '#FFFFFF',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 24
|
||||
}
|
||||
}]
|
||||
}]
|
||||
};
|
||||
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