mt-fe-group/yudao-init
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修改ui

Browse Source
This commit is contained in:
‘937886381’
2024-07-25 14:13:35 +08:00
parent 8ecf281f08
commit 737949d3ec
50 changed files with 1508 additions and 777 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/copilot/components/BarChartBase.vue
View File

@@ -79,7 +79,7 @@ export default {
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='border-radius:2px;display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
`<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0}</span>`;
}

13
src/views/copilot/components/ChartContainer.vue
View File

@@ -1,8 +1,15 @@
<!--
<!--
* @Author: zhp
* @Date: 2024-06-03 15:38:31
* @LastEditTime: 2024-07-24 10:29:26
* @LastEditors: zhp
* @Description:
-->
<!--
filename: ChartContainer.vue
author: liubin
date: 2024-04-10 08:54:33
description:
description:
todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高
-->
@@ -19,7 +26,7 @@ export default {
props: {
noScroll: {
type: Boolean,
default: false,
default: true,
},
},
data() {

5
src/views/copilot/components/FactoryDataHeader.vue
View File

@@ -154,14 +154,15 @@ export default {
}
.page-title {
flex: 1 1 auto;
flex: 1;
font-size: 40px;
line-height: 70px;
justify-content: center;
letter-spacing: 5px;
font-family: 优设标题黑;
color: #6db6ff;
text-align: center;
user-select: none;
background: url(../../../assets/images/homeindex/page-title-two.png) 0 0 / 100% 100% no-repeat;
background: url(../../../assets/images/homeindex/page-title-two.png) center no-repeat;
}
</style>

49
src/views/copilot/components/bottomLeftContainer.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-07-09 15:07:50
* @LastEditTime: 2024-07-09 15:41:38
* @LastEditTime: 2024-07-22 13:41:40
* @LastEditors: zhp
* @Description:
-->
@@ -80,6 +80,7 @@ export default {
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
@@ -87,29 +88,29 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-left: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 10%,
#024798 20%,
transparent 90%) 1;
backdrop-filter: blur(4px);
border-right: .13vw solid;
// border-image: linear-gradient(to bottom,transparent 10%,
// #024798 20%,
// transparent 90%) 1;
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
box-sizing: border-box;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
right: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 100%,
transparent
);
z-index: 1;
}
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.13vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(circle at center,
#1481fd 2%,
#024798 90%,
transparent);
z-index: 1;
}
&::after {
content: "";
@@ -120,7 +121,7 @@ export default {
border-radius: 2px;
left: 8%;
bottom: 0;
background: linear-gradient(to right, transparent 60%, #024798 98%, transparent 90%);
background: linear-gradient(to right, transparent 60%, #4197f9 98%, transparent 98%);
z-index: 0;
}

25
src/views/copilot/components/bottomRightContainer.vue
View File

@@ -74,6 +74,7 @@ export default {
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
@@ -81,10 +82,12 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-right: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 10%,
#024798 20%,
transparent 90%) 1;
border-right: .13vw solid;
// border-image: linear-gradient(to bottom,transparent 10%,
// #024798 20%,
// transparent 90%) 1;
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
box-sizing: border-box;
backdrop-filter: blur(4px);
&::before {
@@ -92,16 +95,14 @@ export default {
position: absolute;
display: inline-block;
height: 92%;
width: 0.11415vw;
width: 0.13vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 100%,
transparent
);
background: radial-gradient(circle at center,
#1481fd 2%,
#024798 90%,
transparent);
z-index: 1;
}
@@ -114,7 +115,7 @@ export default {
border-radius: 2px;
right: 3%;
bottom: 0;
background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%);
background: linear-gradient(to left, transparent 60%, #4197f9 98%, transparent 98%);
z-index: 0;
}

28
src/views/copilot/components/efficiencyLeftContainer.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-07-09 15:15:00
* @LastEditTime: 2024-07-19 16:11:37
* @LastEditTime: 2024-07-22 13:42:08
* @LastEditors: zhp
* @Description:
-->
@@ -81,10 +81,12 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-left: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 5%,
#024798 10%,
transparent 90%) 1;
border-right: .13vw solid;
// border-image: linear-gradient(to bottom,transparent 10%,
// #024798 20%,
// transparent 90%) 1;
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
box-sizing: border-box;
backdrop-filter: blur(4px);
&::before {
@@ -92,16 +94,14 @@ export default {
position: absolute;
display: inline-block;
height: 92%;
width: 0.11415vw;
width: 0.13vw;
border-radius: 2px;
top: 0%;
right: 0;
background: radial-gradient(
circle at center,
#024798 5%,
#024798 100%,
transparent
);
left: 0;
background: radial-gradient(circle at center,
#1481fd 2%,
#024798 90%,
transparent);
z-index: 1;
}
@@ -114,7 +114,7 @@ export default {
border-radius: 2px;
left: 10%;
bottom: 0;
background: linear-gradient(to right,transparent 60%, #024798 95%, transparent 97%);
background: linear-gradient(to right, transparent 60%, #4197f9 98%, transparent 98%);
z-index: 0;
}

46
src/views/copilot/components/efficiencyRightContainer.vue
View File

@@ -82,29 +82,29 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-right: 0.11415vw solid;
border-image: linear-gradient(to bottom,transparent 5%,
#024798 10%,
transparent 90%) 1;
backdrop-filter: blur(4px);
border-right: .13vw solid;
// border-image: linear-gradient(to bottom,transparent 10%,
// #024798 20%,
// transparent 90%) 1;
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
box-sizing: border-box;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 100%,
transparent
);
z-index: 1;
}
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.13vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(circle at center,
#1481fd 2%,
#024798 90%,
transparent);
z-index: 1;
}
&::after {
content: "";
@@ -115,7 +115,7 @@ export default {
border-radius: 2px;
right: 3%;
bottom: 0;
background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%);
background: linear-gradient(to left, transparent 60%, #4197f9 98%, transparent 98%);
z-index: 0;
}

4
src/views/copilot/components/ftoBarChartBase.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-23 15:49:14
* @LastEditTime: 2024-07-19 16:08:27
* @LastEditTime: 2024-07-22 14:05:00
* @LastEditors: zhp
* @Description:
-->
@@ -80,7 +80,7 @@ export default {
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='border-radius:2px;display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
`<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0 }</span>`;
}

46
src/views/copilot/components/leftContainer.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-05 09:43:51
* @LastEditTime: 2024-07-19 16:11:59
* @LastEditTime: 2024-07-22 13:36:30
* @LastEditors: zhp
* @Description:
-->
@@ -81,28 +81,28 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-left: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 10%,
#024798 20%,
transparent 90%) 1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
right: 0;
background: radial-gradient(circle at center,
#024798 2%,
#024798 100%,
border-right: .13vw solid;
// border-image: linear-gradient(to bottom,transparent 10%,
// #024798 20%,
// transparent 90%) 1;
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
box-sizing: border-box;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.13vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(circle at center,
#1481fd 2%,
#024798 90%,
transparent);
z-index: 1;
}
z-index: 1;
}
&::after {
content: "";
position: absolute;
@@ -112,7 +112,7 @@ export default {
border-radius: 2px;
left: 7%;
bottom: 0;
background: linear-gradient(to right,transparent 60%, #024798 95%, transparent 97%);
background: linear-gradient(to right, transparent 60%, #4197f9 98%, transparent 98%);
z-index: 0;
}

18
src/views/copilot/components/rightContainer.vue
View File

@@ -82,10 +82,12 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-right: 0.11415vw solid;
border-image: linear-gradient(to bottom,transparent 10%,
#024798 20%,
transparent 90%) 1;
border-right: .13vw solid;
// padding-right: .2vw;
box-sizing: border-box; // border-image: linear-gradient(to bottom,transparent 10%,
// #024798 20%,
// transparent 90%) 1;
border-image: linear-gradient(to bottom,transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
backdrop-filter: blur(4px);
&::before {
@@ -93,14 +95,14 @@ export default {
position: absolute;
display: inline-block;
height: 92%;
width: 0.11415vw;
width: 0.13vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 100%,
#1481fd 2%,
#024798 90%,
transparent
);
z-index: 1;
@@ -115,7 +117,7 @@ export default {
border-radius: 2px;
right: 1%;
bottom: 0;
background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%);
background: linear-gradient(to left, transparent 60%, #4197f9 98%, transparent 98%);
z-index: 0;
}

46
src/views/copilot/components/twoContainer.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-05 09:48:37
* @LastEditTime: 2024-07-19 16:14:07
* @LastEditTime: 2024-07-22 13:37:48
* @LastEditors: zhp
* @Description:
-->
@@ -108,38 +108,40 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-right: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 10%,
#024798 20%,
transparent 90%) 1;
backdrop-filter: blur(4px);
border-right: .13vw solid;
// border-image: linear-gradient(to bottom,transparent 10%,
// #024798 20%,
// transparent 90%) 1;
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
box-sizing: border-box;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(circle at center,
#024798 2%,
#024798 100%,
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.13vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(circle at center,
#1481fd 2%,
#024798 90%,
transparent);
z-index: 1;
}
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 60%;
width: 95%;
height: 0.31415vh;
border-radius: 2px;
left: 6%;
bottom: 0;
background: linear-gradient(to right, #024798, transparent);
background: linear-gradient(to left, transparent 60%, #4197f9 98%, transparent 98%);
z-index: 0;
}

69
src/views/copilot/efficiency/components/ChipOee.vue
View File

@@ -177,6 +177,11 @@ function getTemplate(period, dataList, than) {
const year = new Date().getFullYear();
if (period === '日' && than === '同比') {
items = [
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year - 1}年${yesterday}日`,
data: dataList ? dataList[0] : [],
@@ -186,14 +191,15 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '日' && than === '环比') {
items = [
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '日' && than === '环比') {
items = [
{
name: `${dayBeYes}日`,
data: dataList ? dataList[0] : [],
@@ -203,14 +209,15 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '同比') {
items = [
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year-1}年本周`,
data: dataList ? dataList[0] : [],
@@ -220,14 +227,15 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '环比') {
items = [
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '环比') {
items = [
{
name: `上周`,
data: dataList ? dataList[0] : [],
@@ -237,14 +245,15 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && than === '同比') {
items = [
{
name: `${month}月目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year-1}年${month}月`,
data: dataList ? dataList[0] : [],
@@ -254,31 +263,33 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${month}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && than === '环比') {
items = [
{
name: `${lastMonth}月`,
data: dataList ? dataList[0] : [],
},
{
name: `${month}月`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${month}目标`,
name: `${month}月目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${lastMonth}月`,
data: dataList ? dataList[0] : [],
},
];
} else {
items = [
{
name: `${year}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year - 1}年`,
data: dataList ? dataList[0] : [],
@@ -288,11 +299,7 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
}
return items

78
src/views/copilot/efficiency/components/TransformRate.vue
View File

@@ -168,23 +168,29 @@ function getTemplate(period, dataList,than) {
const year = new Date().getFullYear();
if (period === '日' && than === '同比') {
items = [
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2].splice(0,2) : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year - 1}年${yesterday}日`,
data: dataList ? dataList[0] : [],
data: dataList ? dataList[0].splice(0, 2) : [],
},
{
name: `${yesterday}日`,
data: dataList ? dataList[1] : [],
data: dataList ? dataList[1].splice(0, 2) : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '日' && than === '环比') {
items = [
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '日' && than === '环比') {
items = [
{
name: `${dayBeYes}日`,
data: dataList ? dataList[0] : [],
@@ -194,16 +200,17 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '同比') {
items = [
{
name: `${year-1}年本周`,
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year - 1}年本周`,
data: dataList ? dataList[0] : [],
},
{
@@ -211,14 +218,15 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '环比') {
items = [
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '环比') {
items = [
{
name: `上周`,
data: dataList ? dataList[0] : [],
@@ -228,16 +236,17 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && than === '同比') {
items = [
{
name: `${year-1}年${month}月`,
name: `${month}月目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year - 1}年${month}月`,
data: dataList ? dataList[0] : [],
},
{
@@ -245,31 +254,34 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${month}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && than === '环比') {
items = [
{
name: `${lastMonth}月`,
data: dataList ? dataList[0] : [],
name: `${month}月目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${month}月`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${month}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
name: `${lastMonth}月`,
data: dataList ? dataList[0] : [],
},
];
} else {
items = [
{
name: `${year}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year - 1}年`,
data: dataList ? dataList[0] : [],
@@ -279,11 +291,7 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
}
return items

137
src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 13:22:43
* @LastEditTime: 2024-07-19 16:10:10
* @LastEditTime: 2024-07-23 15:52:25
* @LastEditors: zhp
* @Description:
-->
@@ -56,7 +56,7 @@ export default {
actualOptions: null,
options: {
grid: {
left: "5%",
left: "6%",
right: "0%",
bottom: "3%",
top: "15%",
@@ -81,13 +81,13 @@ export default {
res +=
"<br/>" +
`${params[i].seriesType === "line"
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span>
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span>
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:39%;left:3.05%;'></span>
<span style='display:inline-block;width: 8px;height: 8px;border-radius: 100%;background-color: #f3c000;position: absolute;top:36%;left:4.8%;'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>`
}` +
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value.toFixed(2) + '%' : "0.00" + '%'}</span>`;
}
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
@@ -118,6 +118,7 @@ export default {
nameTextStyle: {
color: "rgba(223,241,254,.8)",
fontSize: 16,
align: "right",
},
axisTick: {
show: false,
@@ -139,6 +140,41 @@ export default {
},
},
series: [
{
name: "", // "2024年目标值",
type: "line",
lineStyle: {
color: "#f3c000",
},
itemStyle: {
color: "#f3c000",
},
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "#f3c000", // 0% 处的颜色
// },
// {
// offset: 0.55,
// color: "#f3c00033",
// },
// {
// offset: 1,
// color: "transparent", // 100% 处的颜色
// },
// ],
// global: false, // 缺省为 false
// },
// },
data: [], // this.series[0].data,
},
{
name: "", // this.series[0].name,
type: "bar",
@@ -205,42 +241,7 @@ export default {
},
},
data: [], // this.series[1].data,
},
{
name: "", // "2024年目标值",
type: "line",
lineStyle: {
color: "#f3c000",
},
itemStyle: {
color: "#f3c000",
},
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "#f3c000", // 0% 处的颜色
// },
// {
// offset: 0.55,
// color: "#f3c00033",
// },
// {
// offset: 1,
// color: "transparent", // 100% 处的颜色
// },
// ],
// global: false, // 缺省为 false
// },
// },
data: [], // this.series[0].data,
},
}
],
},
};
@@ -366,34 +367,34 @@ export default {
.legend-item:nth-child(1) {
margin-left: 1vw;
}
.legend-item:nth-child(1):before {
// width: 12px;
// height: 2px;
width: 1vw;
height: 0.1064vw;
background-color: #f3c000;
position: absolute;
top: 50%;
// left: -16px;
left: -1.3vw;
transform: translateY(-50%);
}
.legend-item:nth-child(1):before {
// width: 12px;
// height: 2px;
width: 1vw;
height: 0.1064vw;
background-color: #f3c000;
position: absolute;
top: 50%;
// left: -16px;
left: -1.2vw;
transform: translateY(-50%);
}
.legend-item:nth-child(1):after {
background-color: #f3c000;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -1.13vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
.legend-item:nth-child(1):after {
background-color: #f3c000;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.4vw;
height: 0.4vw;
border-radius: 100%;
top: 50%;
left: -1.1vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
.legend-item:nth-child(2):before {
background-color: #12f7f1;
}

138
src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-23 15:50:44
* @LastEditTime: 2024-07-19 16:10:19
* @LastEditTime: 2024-07-23 15:52:09
* @LastEditors: zhp
* @Description:
-->
@@ -56,7 +56,7 @@ export default {
actualOptions: null,
options: {
grid: {
left: "5%",
left: "6%",
right: "0%",
bottom: "3%",
top: "15%",
@@ -81,13 +81,13 @@ export default {
res +=
"<br/>" +
`${params[i].seriesType === "line"
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span>
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span>
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:39%;left:3.05%;'></span>
<span style='display:inline-block;width: 8px;height: 8px;border-radius: 100%;background-color: #f3c000;position: absolute;top:36%;left:4.8%;'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>`
}` +
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value.toFixed(2) + '%' : "0.00" + '%'}</span>`;
}
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
@@ -118,6 +118,7 @@ export default {
nameTextStyle: {
color: "rgba(223,241,254,.8)",
fontSize: 16,
align: "right",
},
axisTick: {
show: false,
@@ -139,6 +140,41 @@ export default {
},
},
series: [
{
name: "", // "2024年目标值",
type: "line",
lineStyle: {
color: "#f3c000",
},
itemStyle: {
color: "#f3c000",
},
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "#f3c000", // 0% 处的颜色
// },
// {
// offset: 0.55,
// color: "#f3c00033",
// },
// {
// offset: 1,
// color: "transparent", // 100% 处的颜色
// },
// ],
// global: false, // 缺省为 false
// },
// },
data: [], // this.series[0].data,
},
{
name: "", // this.series[0].name,
type: "bar",
@@ -206,41 +242,7 @@ export default {
},
data: [], // this.series[1].data,
},
{
name: "", // "2024年目标值",
type: "line",
lineStyle: {
color: "#f3c000",
},
itemStyle: {
color: "#f3c000",
},
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "#f3c000", // 0% 处的颜色
// },
// {
// offset: 0.55,
// color: "#f3c00033",
// },
// {
// offset: 1,
// color: "transparent", // 100% 处的颜色
// },
// ],
// global: false, // 缺省为 false
// },
// },
data: [], // this.series[0].data,
},
],
},
};
@@ -372,33 +374,33 @@ export default {
.legend-item:nth-child(3):before {
background-color: #58adfa;
}
.legend-item:nth-child(1):before {
// width: 12px;
// height: 2px;
width: 1vw;
height: 0.1064vw;
background-color: #f3c000;
position: absolute;
top: 50%;
// left: -16px;
left: -1.3vw;
transform: translateY(-50%);
}
.legend-item:nth-child(1):before {
// width: 12px;
// height: 2px;
width: 1vw;
height: 0.1064vw;
background-color: #f3c000;
position: absolute;
top: 50%;
// left: -16px;
left: -1.2vw;
transform: translateY(-50%);
}
.legend-item:nth-child(1):after {
background-color: #f3c000;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -1.13vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
.legend-item:nth-child(1):after {
background-color: #f3c000;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.4vw;
height: 0.4vw;
border-radius: 100%;
top: 50%;
left: -1.1vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
}
</style>

20
src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue
View File

@@ -152,10 +152,14 @@ export default {
年: `${year}良率`,
}[this.period];
console.log(vt[0]);
let titleSize = this.fontSize(0.35)
let subtitleSize = this.fontSize(0.14)
const t = getOptions({
// single,
color: this.color == 1 ? "#4CF0E8" : "#1065ff",
titleValue,
titleSize,
subtitleSize,
subtitle,
yesterday,
currentName: items[0].label,
@@ -261,6 +265,12 @@ export default {
},
},
methods: {
fontSize(res){
let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (!clientWidth) return;
let fontSize = 100 * (clientWidth / 1920);
return res * fontSize;
},
formatNumber(num) {
console.log(num);
// 判断是否为整数
@@ -290,9 +300,9 @@ export default {
// justify-content: center;
gap: 3px;
backdrop-filter: blur(24px);
.cities {
height: 40px;
}
// .cities {
// // height: 40px;
// }
.chart {
// margin-left: 5%;
@@ -300,12 +310,12 @@ export default {
flex: 1 1 auto;
padding: 0 20%;
/* margin: 10%; */
height: 16vh;
height: 0;
/* min-width: 300px; */
align-self: stretch;
}
.legend {
height: 80px;
// height: 80px;
display: flex;
color: #fff;
justify-content: flex-end;

4
src/views/copilot/efficiency/components/sub/std/ProgressBar.vue
View File

@@ -73,7 +73,7 @@ export default {
&:before {
content: attr(data-title);
display: inline-block;
color: #fff;
color:rgba(223,241,254,.8);
position: absolute;
bottom: -200%;
font-size: 12px;
@@ -82,7 +82,7 @@ export default {
&:after {
content: attr(data-rate);
display: inline-block;
color: #fff;
color: rgba(223, 241, 254, .8);
position: absolute;
bottom: -200%;
right: 0;

8
src/views/copilot/efficiency/components/sub/std/preProgressBar.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-27 09:12:54
* @LastEditTime: 2024-07-09 15:02:46
* @LastEditTime: 2024-07-22 17:03:48
* @LastEditors: zhp
* @Description:
-->
@@ -60,6 +60,8 @@ export default {
</script>
<style scoped lang="scss">
.progress-bar {
height: 10px;
background-color: #002f6b;
@@ -70,7 +72,7 @@ export default {
&:before {
content: attr(data-title);
display: inline-block;
color: #fff;
color: rgba(223, 241, 254, .8);
position: absolute;
bottom: -200%;
font-size: 12px;
@@ -79,7 +81,7 @@ export default {
&:after {
content: attr(data-rate);
display: inline-block;
color: #fff;
color: rgba(223, 241, 254, .8);
position: absolute;
bottom: -200%;
right: 0;

23
src/views/copilot/efficiency/options/chipOptions.js
View File

@@ -1,6 +1,8 @@
export default ({
titleValue,
subtitle,
titleSize,
subtitleSize,
previousSum,
currentSum,
targetSum,
@@ -26,14 +28,15 @@
left: "48%",
top: "middle",
textAlign: "center",
textVerticalAlign:'auto',
textStyle: {
fontWeight: 600,
fontSize: 36,
color: "rgba(223,241,254,.8)",
fontWeight: 400,
fontSize: titleSize,
color: "rgba(223,241,254,1)",
},
subtext: `\u2002${yesterday + '日良率'}\u2002`,
subtextStyle: {
fontSize: 16,
fontSize: subtitleSize,
fontWeight: 100,
color: "rgba(255,255,255,.7)",
align: "right",
@@ -44,8 +47,8 @@
{
type: "pie",
name: "当前良率",
radius: ["70%", "85%"],
center: ["50%", "52%"],
radius: ["80%", "92%"],
center: ["50%", "50%"],
emptyCircleStyle: {
color: "#003982",
},
@@ -53,8 +56,8 @@
// 数据 series
{
type: "pie",
radius: ["70%", "85%"],
center: ["50%", "52%"],
radius: ["80%", "92%"],
center: ["50%", "50%"],
avoidLabelOvervlap: false,
label: {
show: false,
@@ -118,8 +121,8 @@
// 数据 series2 - 2023累计
{
type: "pie",
radius: ["55%", "70%"],
center: ["50%", "52%"],
radius: ["70%", "80%"],
center: ["50%", "50%"],
avoidLabelOvervlap: false,
label: {
show: false,

2
src/views/copilot/factoryData/bbIndex.vue
View File

@@ -28,7 +28,7 @@
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue";
import ProdMonitor from "./components/bipvProdMonitor.vue";
import { deepClone } from "@/utils";
// import Store from "./components/Store.vue";
// import Energy from "./components/Energy.vue";

2
src/views/copilot/factoryData/cdIndex.vue
View File

@@ -28,7 +28,7 @@
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue";
import ProdMonitor from "./components/bipvProdMonitor";
import { deepClone } from "@/utils";
// import Store from "./components/Store.vue";
// import Energy from "./components/Energy.vue";

6
src/views/copilot/factoryData/components/BarChartBase.vue
View File

@@ -56,7 +56,7 @@ export default {
color: ["#FFD160", "#2760FF", "#12FFF5"],
grid: {
left: "9%",
right: "3%",
right: "0%",
bottom: "15%",
top: "15%",
},
@@ -76,7 +76,7 @@ export default {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
`<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='border-radius:2px;display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${params[0].axisValueLabel}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value : 0}</span>`;
}
@@ -143,7 +143,7 @@ export default {
},
splitLine: {
lineStyle: {
color: "#4561AE",
color: "rgba(69,97,174,.4)",
},
},
},

12
src/views/copilot/factoryData/components/BarChartChipOEE.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-30 08:58:39
* @LastEditTime: 2024-07-18 16:48:10
* @LastEditTime: 2024-07-25 09:54:21
* @LastEditors: zhp
* @Description:
-->
@@ -56,11 +56,11 @@ export default {
actualOptions: null,
options: {
grid: {
left: "8%",
right: "0%",
bottom: "3%",
left: "10%",
right: "3%",
bottom: "10%",
top: "15%",
containLabel: true,
// containLabel: true,
},
// tooltip: {
// trigger: "axis",
@@ -106,7 +106,7 @@ export default {
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='border-radius:2px;display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
`<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align:right'>${params[i].value ? params[i].value : 0}</span>`;
}

4
src/views/copilot/factoryData/components/ChartContainer.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-30 09:00:01
* @LastEditTime: 2024-05-30 09:50:02
* @LastEditTime: 2024-07-24 10:31:52
* @LastEditors: zhp
* @Description:
-->
@@ -19,7 +19,7 @@ export default {
props: {
noScroll: {
type: Boolean,
default: false,
default: true,
},
},
data() {

12
src/views/copilot/factoryData/components/Order.vue
View File

@@ -105,7 +105,7 @@ export default {
}</span>`,
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].orderStatus || ""}>${this.prodOrder[i].orderStatus === 1 ? '未开始' : this.prodOrder[i].orderStatus === 2 ? '进行中' : '已完成' || ""
}</span>`,
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || ""
`<span style='color: rgba(223,241,254,.8);font-size:1.2em' title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || ""
}</span>`,
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || ""
}</span>`,
@@ -117,8 +117,8 @@ export default {
? this.prodOrder[i].productionProgress.toFixed(2) * 100 + "%"
: "0%"
}</span>
<div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
<svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
<div style="display:inline-block;height:20px;vertical-align:top;margin-top:3px;">
<svg xmlns="http://www.w3.org/200/svg" height="18" width="18">
<circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
<circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${this.prodOrder[i].productionProgress
? this.prodOrder[i].productionProgress.toFixed(2) *100 *
@@ -156,7 +156,6 @@ export default {
flex: 1;
display: flex;
flex-direction: column;
// gap: 6px;
.chart-title {
margin-top: 5px;
@@ -189,8 +188,9 @@ export default {
height: 1px; // display: inline-block;
border: 1px solid;
// display: inline-block;
border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 0%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%, ) 2 2;
backdrop-filter: blur(3px);
// border-image: linear-gradient(to right, transparent 5%, rgba(95, 190, 249, 1) 20%, transparent 90%, )1;
border-image: linear-gradient(to right, transparent 10%, rgba(95, 190, 249, 1 )30%, transparent 90%,)1;
// backdrop-filter: blur(3px);
}
}
}

38
src/views/copilot/factoryData/components/ProdMonitor.vue
View File

@@ -28,8 +28,8 @@
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0
}}</span>
msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0
}}</span>
</div>
</div>
</div>
@@ -38,8 +38,8 @@
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0
}}</span>
msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
@@ -61,8 +61,8 @@
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0
}}</span>
msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0
}}</span>
</div>
</div>
</div>
@@ -71,8 +71,8 @@
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0
}}</span>
msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
@@ -94,8 +94,8 @@
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0
}}</span>
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0
}}</span>
</div>
</div>
</div>
@@ -104,8 +104,8 @@
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0
}}</span>
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
@@ -124,8 +124,8 @@
</div>
<!-- <span class="line"></span> -->
</div>
<barChartBase :companyId="companyId" :than="than" :period="period" :data="factoryData" ref="barChart"
style="height: 0;flex:1">
<barChartBase v-if="factoryData.length != 0" :companyId="companyId" :than="than" :period="period" :data="factoryData"
ref="barChart" style="height: 0;flex:1">
</barChartBase>
</div>
</div>
@@ -222,7 +222,7 @@ export default {
display: flex;
flex-direction: column;
.chart{
flex: 1;
flex: 1.3;
display: flex;
flex-direction: column;
position: relative;
@@ -360,7 +360,7 @@ export default {
}
.fto-box {
flex: 1;
flex: .5;
.type::before {
content: "";
@@ -379,15 +379,15 @@ export default {
}
.std-box {
flex: 1.3;
flex: .6;
}
.chip-box {
flex: 1.3;
flex: .6;
}
.bipv-box {
flex: 1.3;
flex: .6;
}
.std-box,

421
src/views/copilot/factoryData/components/bipvProdMonitor.vue Normal file
View File

@@ -0,0 +1,421 @@
<!--
* @Author: zhp
* @Date: 2024-07-25 10:10:07
* @LastEditTime: 2024-07-25 10:44:01
* @LastEditors: zhp
* @Description:
-->
<template>
<div class="prod-monitor">
<div class="data">
<div class="fto-box">
<div class="icon">
<img src="./../assets/images/fto.png" alt="" style="width: 2.1875vw; height: 2.2875vw" />
</div>
<div class="middle-box">
<span class="type">玻璃类型</span>
<span class="type-name">FTO</span>
</div>
<div class="right-box">
<span class="type">投入数量</span>
<span class="num">{{ prodFto[0] ? prodFto[0].chipInput.toLocaleString() : 0 }}</span>
</div>
</div>
<div class="std-box">
<div class="icon">
<img src="./../assets/images/std.png" alt="" style="width: 2.1875vw; height: 2.1875vw" />
</div>
<div class="middle-box">
<div class="separate">
<div>
<span class="type">玻璃类型</span>
<span class="type-name">标准组件</span>
</div>
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0
}}</span>
</div>
</div>
</div>
<div class="right-box">
<div class="separate">
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
<span class="num">{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate.toFixed(2) : 0 }}%</span>
</div>
</div>
</div>
</div>
<div class="chip-box">
<div class="icon">
<img src="./../assets/images/chip.png" alt="" style="width: 2.1875vw; height: 2.1875vw" />
</div>
<div class="middle-box">
<div class="separate">
<div>
<span class="type">玻璃类型</span>
<span class="type-name">芯片</span>
</div>
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0
}}</span>
</div>
</div>
</div>
<div class="right-box">
<div class="separate">
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
<span class="num">{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate.toFixed(2) : 0 }}%</span>
</div>
</div>
</div>
</div>
<div class="bipv-box" v-if="companyId != 0">
<div class="icon">
<img src="./../assets/images/bipv.png" alt="" style="width: 2.1875vw; height: 2.1875vw" />
</div>
<div class="middle-box">
<div class="separate">
<div>
<span class="type">玻璃类型</span>
<span class="type-name">BIPV</span>
</div>
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0
}}</span>
</div>
</div>
</div>
<div class="right-box">
<div class="separate">
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
<span class="num">{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate.toFixed(2) : 0 }}%</span>
</div>
</div>
</div>
</div>
</div>
<div class="chart">
<div class="chart-title">
<span class="title">生产情况</span>
<div class="button-than" style="position: absolute;right: 3%;">
<CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
@click="() => $emit('update:than', i)" />
</div>
<!-- <span class="line"></span> -->
</div>
<barChartBase v-if="factoryData.length != 0" :companyId="companyId" :than="than" :period="period" :data="factoryData"
ref="barChart" style="height: 0;flex:1">
</barChartBase>
</div>
</div>
</template>
<script>
import { number } from 'echarts';
import barChartBase from './ChipOee'
import CopilotButton from "./button.vue"
export default {
name: "ProdMonitor",
components: {
barChartBase,
CopilotButton
},
data() {
return {
bipvVis:false,
msgObj: {
stand: {},
chip: {},
bipv: {},
},
};
},
props: {
period: {
type: Number,
default: 1,
},
companyId: {
type: Number,
default:0
},
than: {
type: String,
},
than: {
type: String,
default: '同比',
},
prodOutPut: {
type: Array,
default: [],
},
prodFto: {
type: Array,
default: [],
},
factoryData: {
type: Object,
default: {},
},
showBipv: {
type: Boolean,
default:true,
}
},
watch: {
prodOutPut() {
this.makeData();
},
},
mounted() {
this.makeData();
this.$nextTick(() => {
let button = document.getElementsByClassName('button-than')
button[0].children[0].style.borderRadius = '4px 0 0 4px'
button[0].children[1].style.borderRadius = '0px 4px 4px 0'
})
},
methods: {
makeData() {
this.msgObj.chip = {};
this.msgObj.stand = {};
this.msgObj.bipv = {};
if (this.prodOutPut.length > 0) {
this.prodOutPut.map((item) => {
if (item.glassType === 0) {
this.msgObj.chip = item;
} else if (item.glassType === 1) {
this.msgObj.stand = item;
} else if (item.glassType === 2) {
this.msgObj.bipv = item;
}
});
}
},
},
};
</script>
<style lang="scss" scoped>
.prod-monitor {
height: 100%;
display: flex;
flex-direction: column;
.chart{
flex: 1;
display: flex;
flex-direction: column;
position: relative;
// gap: 6px;
.chart-title{
margin-top: 5px;
// flex: 1;
// gap: 6px;
height: 1.5vw;
width: 100%;
display: flex;
align-items: center;
// flex-direction: column;
// flex-wrap: nowrap;
// justify-content: end
// margin-top: 10px;
.title{
// flex: 1;
font-weight: 400;
font-size: 24px;
// width: 5vw;
color: #FFFFFF;
line-height: 24px;
// text-align: left;
font-style: normal;
display: inline-block;
}
// .line{
// flex: 1;
// // width: 80%;
// height: 1px; // display: inline-block;
// border: 1px solid;
// // display: inline-block;
// border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%,) 2 2;
// backdrop-filter: blur(3px);
// }
}
}
.data{
flex: 1;
display: flex;
gap: 6px;
flex-direction: column;
.fto-box,
.std-box,
.chip-box,
.bipv-box {
box-shadow: inset 0 0 12px 2px #fff3;
border-radius: 4px;
display: flex;
align-items: center;
.icon {
flex: 1;
text-align: center;
}
.middle-box {
flex: 2.086;
position: relative;
}
.right-box {
flex: 2.424;
position: relative;
}
.type {
display: inline-block;
font-size: 0.9375vw;
color: #6db6ff;
position: relative;
text-align: right;
padding-right: 0.417vw;
letter-spacing: 2px;
width: 6.25vw;
}
.type1 {
display: inline-block;
font-size: 0.9375vw;
color: #6db6ff;
position: relative;
text-align: right;
padding-right: 0.6vw;
width: 6.25vw;
padding-left: 1.6vw;
text-align: justify;
text-align-last: justify;
}
.type-name {
font-size: 1.042vw;
color: #fff;
position: relative;
text-align: left;
padding-left: 0.573vw;
}
.type-name::before {
content: "";
display: inline-block;
width: 1px;
height: 1.042vw;
border: 1px solid;
border-image: linear-gradient(180deg,
rgba(0, 176, 243, 0),
rgba(31, 143, 255, 1)) 2 2;
position: absolute;
left: 0;
top: 4px;
}
.num {
font-size: 1.042vw;
color: #fff;
position: relative;
text-align: left;
padding-left: 0.573vw;
}
.num::before {
content: "";
display: inline-block;
width: 1px;
height: 1.042vw;
border: 1px solid;
border-image: linear-gradient(180deg,
rgba(0, 176, 243, 0),
rgba(31, 143, 255, 1)) 2 2;
position: absolute;
left: 0;
top: 4px;
}
}
.fto-box {
flex: 1;
.type::before {
content: "";
display: inline-block;
width: 1px;
height: 1.6146vw;
border: 1px solid;
border-image: linear-gradient(135deg,
rgba(0, 176, 243, 0),
rgba(31, 143, 255, 1),
rgba(31, 143, 255, 0)) 2 2;
position: absolute;
left: 0;
top: -2px;
}
}
.std-box {
flex: 1;
}
.chip-box {
flex: 1;
}
.bipv-box {
flex: 1;
}
.std-box,
.chip-box,
.bipv-box {
.separate::before {
content: "";
display: inline-block;
width: 1px;
height: 3.125vw;
border: 1px solid;
border-image: linear-gradient(135deg,
rgba(0, 176, 243, 0),
rgba(31, 143, 255, 1),
rgba(31, 143, 255, 0)) 2 2;
position: absolute;
left: 0;
top: -2px;
}
}
}
}
</style>

54
src/views/copilot/factoryData/components/leftContainer.vue
View File

@@ -1,16 +1,10 @@
<!--
* @Author: zhp
* @Date: 2024-06-05 09:36:07
* @LastEditTime: 2024-07-19 16:16:02
* @LastEditTime: 2024-07-24 13:39:01
* @LastEditors: zhp
* @Description:
-->
<!--
filename: Container.vue
author: liubin
date: 2024-04-09 10:44:09
description:
-->
<template>
<div class="copilot-container">
@@ -89,27 +83,29 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-left: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 2%, rgba(5, 138, 237, .7) 20%, rgba(2, 82, 215, 0.24) 70%, ) 71 71;
backdrop-filter: blur(4px);
border-right: .13vw solid;
// border-image: linear-gradient(to bottom,transparent 10%,
// #024798 20%,
// transparent 90%) 1;
border-image:radial-gradient(circle at center,
#1481fd 2%,
#024798 95%,
transparent)1;
box-sizing: border-box;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 96%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
right: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 100%,
transparent
);
z-index: 1;
}
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.13vw;
border-radius: 2px;
top: 0%;
left: 0;
background: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%);
z-index: 1;
}
&::after {
content: "";
@@ -120,7 +116,7 @@ export default {
border-radius: 2px;
right: 4%;
bottom: 0;
background: linear-gradient(to right, transparent 10%, #024798 95%, transparent 98%);
background: linear-gradient(to right, transparent 60%, #4197f9 98%, transparent 98%);
z-index: 0;
}
@@ -141,7 +137,7 @@ export default {
}
.container-body {
padding: 12px;
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;

35
src/views/copilot/factoryData/components/rightContainer.vue
View File

@@ -87,24 +87,29 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-right: 0.11415vw solid;
border-image: linear-gradient(to bottom,transparent 0%,rgba(5, 138, 237, .7) 40%, rgba(2, 82, 215, 0.24) 70%,) 71 71;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 96%;
width: 0.11415vw;
border-right: .13vw solid;
// border-image: linear-gradient(to bottom,transparent 10%,
// #024798 20%,
// transparent 90%) 1;
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
box-sizing: border-box;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.13vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(circle at center,
#024798 2%,
#024798 100%,
#1481fd 2%,
#024798 95%,
transparent);
z-index: 1;
}
z-index: 1;
}
&::after {
content: "";
@@ -115,7 +120,7 @@ export default {
border-radius: 2px;
left: 3%;
bottom: 0;
background: linear-gradient(to left, transparent 10%, #024798 95%, transparent 98%);
background: linear-gradient(to left, transparent 60%, #4197f9 98%, transparent 98%);
z-index: 0;
}
@@ -136,7 +141,7 @@ export default {
}
.container-body {
padding: 12px;
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;

2
src/views/copilot/factoryData/hdIndex.vue
View File

@@ -28,7 +28,7 @@
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue";
import ProdMonitor from "./components/bipvProdMonitor";
import { deepClone } from "@/utils";
// import Store from "./components/Store.vue";
// import Energy from "./components/Energy.vue";

2
src/views/copilot/factoryData/index.vue
View File

@@ -29,7 +29,7 @@ import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue";
import ProdMonitor from "./components/prodMonitor";
import { deepClone } from "@/utils";
// import Store from "./components/Store.vue";
// import Energy from "./components/Energy.vue";

2
src/views/copilot/factoryData/jmsIndex.vue
View File

@@ -28,7 +28,7 @@
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue";
import ProdMonitor from "./components/bipvProdMonitor.vue";
import { deepClone } from "@/utils";
// import Store from "./components/Store.vue";
// import Energy from "./components/Energy.vue";

2
src/views/copilot/factoryData/ksIndex.vue
View File

@@ -28,7 +28,7 @@
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue";
import ProdMonitor from "./components/bipvProdMonitor.vue";
import { deepClone } from "@/utils";
// import Store from "./components/Store.vue";
// import Energy from "./components/Energy.vue";

4
src/views/copilot/factoryData/oldIndex.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-21 13:24:03
* @LastEditTime: 2024-06-05 09:43:30
* @LastEditTime: 2024-07-25 10:52:35
* @LastEditors: zhp
* @Description:
-->
@@ -38,7 +38,7 @@
<script>
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
// import Container from "./components/Container.vue";
import ProdMonitor from "./components/ProdMonitor.vue";
import ProdMonitor from "./components/bipvProdMonitor.vue";
import Store from "./components/Store.vue";
import Energy from "./components/Energy.vue";
import Order from "./components/Order.vue";

2
src/views/copilot/factoryData/zzIndex.vue
View File

@@ -29,7 +29,7 @@ import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue";
import ProdMonitor from "./components/bipvProdMonitor.vue";
import { deepClone } from "@/utils";
// import Store from "./components/Store.vue";
// import Energy from "./components/Energy.vue";

2
src/views/copilot/yield/components/sub/ring/DoubleRingChart.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-20 13:32:59
* @LastEditTime: 2024-07-19 16:05:46
* @LastEditTime: 2024-07-22 14:41:37
* @LastEditors: zhp
* @Description:
-->

8
src/views/copilot/yield/options/double-ring-chart-options.js
View File

@@ -32,7 +32,7 @@ export default ({
textStyle: {
fontWeight: 400,
fontSize: titleSize,
color: "rgba(223,241,254,.8)",
color: "rgba(223,241,254,1)",
},
subtext: `\u2002${subtitle}\u2002`,
subtextStyle: {
@@ -47,7 +47,7 @@ export default ({
{
type: "pie",
name: "当前目标",
radius: ["74%", "86%"],
radius: ["73%", "85%"],
center: ["50%", "48%"],
emptyCircleStyle: {
color: "#042c5f33",
@@ -56,7 +56,7 @@ export default ({
// 数据 series
{
type: "pie",
radius: ["74%", "86%"],
radius: ["73%", "85%"],
center: ["50%", "48%"],
avoidLabelOvervlap: false,
label: {
@@ -121,7 +121,7 @@ export default ({
// 数据 series2 - 2023累计
{
type: "pie",
radius: ["61%", "74%"],
radius: ["60%", "73%"],
center: ["50%", "48%"],
avoidLabelOvervlap: false,
label: {