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

8
.env.dev
View File

@@ -1,8 +1,8 @@
### ###
# @Author: zhp # @Author: zhp
# @Date: 2024-04-28 13:42:51 # @Date: 2024-04-28 13:42:51
# @LastEditTime: 2024-06-24 16:57:53 # @LastEditTime: 2024-07-25 14:11:43
# @LastEditors: DY # @LastEditors: zhp
# @Description: # @Description:
### ###
# 开发环境配置 # 开发环境配置
@@ -13,7 +13,7 @@ VUE_APP_TITLE = 发电玻璃智能管控平台
# 芋道管理系统/开发环境 # 芋道管理系统/开发环境
# VUE_APP_BASE_API = 'http://192.168.1.70:30307' # VUE_APP_BASE_API = 'http://192.168.1.70:30307'
VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com' # VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
# 闫阳 # 闫阳
# VUE_APP_BASE_API = 'http://192.168.1.81:48080' # VUE_APP_BASE_API = 'http://192.168.1.81:48080'
# 徐 # 徐
@@ -21,7 +21,7 @@ VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
# 郭 # 郭
# VUE_APP_BASE_API = 'http://192.168.1.61:48080' # VUE_APP_BASE_API = 'http://192.168.1.61:48080'
# sara # sara
# VUE_APP_BASE_API = 'http://192.168.1.63:48080' VUE_APP_BASE_API = 'http://192.168.1.63:8080'
# 张一丁 # 张一丁
# VUE_APP_BASE_API = 'http://192.168.4.139:48080' # VUE_APP_BASE_API = 'http://192.168.4.139:48080'
# 蔡 # 蔡

4
src/components/Hamburger/index.vue
View File

@@ -1,14 +1,14 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-06-03 15:38:31 * @Date: 2024-06-03 15:38:31
* @LastEditTime: 2024-07-11 13:56:19 * @LastEditTime: 2024-07-22 16:15:21
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
<template> <template>
<div style="padding: 0 15px;" @click="toggleClick"> <div style="padding: 0 15px;" @click="toggleClick">
<svg :class="{'is-active':isActive}" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" <svg :class="{'is-active':isActive}" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
width="64" height="64" :fill="changeColor === true ? 'rgba(255, 255, 255, 1)' : '' "> width="64" height="64" :fill="changeColor === true ? 'rgba(255, 255, 255,.65)' : '' ">
<path <path
d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" /> d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
</svg> </svg>

2
src/layout/components/Navbar.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div ref="navbar" class="navbar" <div ref="navbar" class="navbar"
:style="changeColor ? 'background: rgba(0, 21, 41, 1);boxShadow:0px 1px 8px 0px rgba(0,131,255,0.35)' : ''"> :style="changeColor ? 'background: rgba(0, 21, 41, 1);boxShadow:0px 1px 8px 0px rgba(0,131,255,0.35);margin-left:20px' : 'margin-left:20px'">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
@toggleClick="toggleSideBar" /> @toggleClick="toggleSideBar" />

10
src/mixins/chart.js
View File

@@ -9,13 +9,9 @@ function __resizeHandler(entries) {
: entry.contentBoxSize; : entry.contentBoxSize;
this.chart_mixin_chartInstance.resize({ this.chart_mixin_chartInstance.resize({
// width: // width:
// contentBoxSize.inlineSize < this.MIN_WIDTH // contentBoxSize.inlineSize < this.MIN_WIDTH
// ? this.MIN_WIDTH // ? this.MIN_WIDTH
// : contentBoxSize.inlineSize, // : contentBoxSize.inlineSize,
// width:
// entry.contentRect.width < this.MIN_WIDTH
// ? this.MIN_WIDTH
// : entry.contentRect.width,
height: contentBoxSize.blockSize, height: contentBoxSize.blockSize,
}); });
} else { } else {

12
src/store/modules/home.js
View File

@@ -551,15 +551,15 @@ function getFactoryTargetValueA(targetList, factoryId) {
*/ */
function initA() { function initA() {
const t_ = { const t_ = {
current: Array(7).fill(0), current: Array(2).fill(0),
previous: Array(7).fill(0), previous: Array(2).fill(0),
}; };
// 芯片OEE // 芯片OEE
// 转化效率 // 转化效率
// 标准组件良率 // 标准组件良率
const stdRate = { const stdRate = {
...deepClone(t_), ...deepClone(t_),
target: Array(7).fill(0), target: Array(2).fill(0),
}; };
// 芯片良率 // 芯片良率
const transformRate = deepClone(stdRate); const transformRate = deepClone(stdRate);
@@ -579,8 +579,8 @@ function initA() {
*/ */
function init() { function init() {
const t_ = { const t_ = {
current: Array(7).fill(0), current: Array(2).fill(0),
previous: Array(7).fill(0), previous: Array(2).fill(0),
}; };
// 芯片投入 // 芯片投入
const chipInvest = deepClone(t_); const chipInvest = deepClone(t_);
@@ -589,7 +589,7 @@ function init() {
// 芯片产出 // 芯片产出
const chipOutput = { const chipOutput = {
...deepClone(t_), ...deepClone(t_),
target: Array(7).fill(0), target: Array(2).fill(0),
}; };
// 标准组件产出 // 标准组件产出
const stdOutput = deepClone(chipOutput); const stdOutput = deepClone(chipOutput);

6
src/views/components/ChartContainer.vue
View File

@@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-07-10 15:17:28 * @Date: 2024-07-10 15:17:28
* @LastEditTime: 2024-07-19 15:18:00 * @LastEditTime: 2024-07-23 17:03:42
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -27,7 +27,7 @@ export default {
props: { props: {
noScroll: { noScroll: {
type: Boolean, type: Boolean,
default: false, default: true,
}, },
}, },
data() { data() {
@@ -51,7 +51,7 @@ export default {
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 80%; width: 8px;
height: 8px; height: 8px;
} }

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

@@ -79,7 +79,7 @@ export default {
// console.log(item.color, color); // console.log(item.color, color);
res += res +=
"<br/>" + "<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: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>`; `<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 filename: ChartContainer.vue
author: liubin author: liubin
date: 2024-04-10 08:54:33 date: 2024-04-10 08:54:33
description: description:
todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高 todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高
--> -->
@@ -19,7 +26,7 @@ export default {
props: { props: {
noScroll: { noScroll: {
type: Boolean, type: Boolean,
default: false, default: true,
}, },
}, },
data() { data() {

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

@@ -154,14 +154,15 @@ export default {
} }
.page-title { .page-title {
flex: 1 1 auto; flex: 1;
font-size: 40px; font-size: 40px;
line-height: 70px; line-height: 70px;
justify-content: center;
letter-spacing: 5px; letter-spacing: 5px;
font-family: 优设标题黑; font-family: 优设标题黑;
color: #6db6ff; color: #6db6ff;
text-align: center; text-align: center;
user-select: none; 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> </style>

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-23 15:49:14 * @Date: 2024-05-23 15:49:14
* @LastEditTime: 2024-07-19 16:08:27 * @LastEditTime: 2024-07-22 14:05:00
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -80,7 +80,7 @@ export default {
// console.log(item.color, color); // console.log(item.color, color);
res += res +=
"<br/>" + "<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: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>`; `<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 * @Author: zhp
* @Date: 2024-06-05 09:43:51 * @Date: 2024-06-05 09:43:51
* @LastEditTime: 2024-07-19 16:11:59 * @LastEditTime: 2024-07-22 13:36:30
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -81,28 +81,28 @@ export default {
flex-direction: column; flex-direction: column;
position: relative; position: relative;
box-shadow: inset 0 0 20px 1px #fff1; box-shadow: inset 0 0 20px 1px #fff1;
border-left: 0.11415vw solid; border-right: .13vw solid;
border-image: linear-gradient(to bottom, transparent 10%, // border-image: linear-gradient(to bottom,transparent 10%,
#024798 20%, // #024798 20%,
transparent 90%) 1; // transparent 90%) 1;
backdrop-filter: blur(4px); 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;
&::before { backdrop-filter: blur(4px);
content: ""; &::before {
position: absolute; content: "";
display: inline-block; position: absolute;
height: 92%; display: inline-block;
width: 0.11415vw; height: 92%;
border-radius: 2px; width: 0.13vw;
top: 0%; border-radius: 2px;
right: 0; top: 0%;
background: radial-gradient(circle at center, left: 0;
#024798 2%, background: radial-gradient(circle at center,
#024798 100%, #1481fd 2%,
#024798 90%,
transparent); transparent);
z-index: 1; z-index: 1;
} }
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
@@ -112,7 +112,7 @@ export default {
border-radius: 2px; border-radius: 2px;
left: 7%; left: 7%;
bottom: 0; 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; z-index: 0;
} }

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

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

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

@@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-06-05 09:48:37 * @Date: 2024-06-05 09:48:37
* @LastEditTime: 2024-07-19 16:14:07 * @LastEditTime: 2024-07-22 13:37:48
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -108,38 +108,40 @@ export default {
flex-direction: column; flex-direction: column;
position: relative; position: relative;
box-shadow: inset 0 0 20px 1px #fff1; box-shadow: inset 0 0 20px 1px #fff1;
border-right: 0.11415vw solid; border-right: .13vw solid;
border-image: linear-gradient(to bottom, transparent 10%, // border-image: linear-gradient(to bottom,transparent 10%,
#024798 20%, // #024798 20%,
transparent 90%) 1; // transparent 90%) 1;
backdrop-filter: blur(4px); 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 { &::before {
content: ""; content: "";
position: absolute; position: absolute;
display: inline-block; display: inline-block;
height: 92%; height: 92%;
width: 0.11415vw; width: 0.13vw;
border-radius: 2px; border-radius: 2px;
top: 0%; top: 0%;
left: 0; left: 0;
background: radial-gradient(circle at center, background: radial-gradient(circle at center,
#024798 2%, #1481fd 2%,
#024798 100%, #024798 90%,
transparent); transparent);
z-index: 1; z-index: 1;
} }
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
display: inline-block; display: inline-block;
width: 60%; width: 95%;
height: 0.31415vh; height: 0.31415vh;
border-radius: 2px; border-radius: 2px;
left: 6%; left: 6%;
bottom: 0; bottom: 0;
background: linear-gradient(to right, #024798, transparent); background: linear-gradient(to left, transparent 60%, #4197f9 98%, transparent 98%);
z-index: 0; 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(); const year = new Date().getFullYear();
if (period === '日' && than === '同比') { if (period === '日' && than === '同比') {
items = [ items = [
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{ {
name: `${year - 1}年${yesterday}日`, name: `${year - 1}年${yesterday}日`,
data: dataList ? dataList[0] : [], data: dataList ? dataList[0] : [],
@@ -186,14 +191,15 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [], data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
}, },
];
} else if (period === '日' && than === '环比') {
items = [
{ {
name: `${yesterday}日目标`, name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [], data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
}, },
];
} else if (period === '日' && than === '环比') {
items = [
{ {
name: `${dayBeYes}日`, name: `${dayBeYes}日`,
data: dataList ? dataList[0] : [], data: dataList ? dataList[0] : [],
@@ -203,14 +209,15 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [], data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), // : 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 === '同比') { } else if (period === '周' && than === '同比') {
items = [ items = [
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{ {
name: `${year-1}年本周`, name: `${year-1}年本周`,
data: dataList ? dataList[0] : [], data: dataList ? dataList[0] : [],
@@ -220,14 +227,15 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [], data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
}, },
];
} else if (period === '周' && than === '环比') {
items = [
{ {
name: `本周目标`, name: `本周目标`,
data: dataList ? dataList[2] : [], data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
}, },
];
} else if (period === '周' && than === '环比') {
items = [
{ {
name: `上周`, name: `上周`,
data: dataList ? dataList[0] : [], data: dataList ? dataList[0] : [],
@@ -237,14 +245,15 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [], data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), // : 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 === '同比') { } else if (period === '月' && than === '同比') {
items = [ items = [
{
name: `${month}月目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{ {
name: `${year-1}年${month}月`, name: `${year-1}年${month}月`,
data: dataList ? dataList[0] : [], data: dataList ? dataList[0] : [],
@@ -254,31 +263,33 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [], data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), // : 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 === '环比') { } else if (period === '月' && than === '环比') {
items = [ items = [
{
name: `${lastMonth}月`,
data: dataList ? dataList[0] : [],
},
{ {
name: `${month}月`, name: `${month}月`,
data: dataList ? dataList[1] : [], data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
}, },
{ {
name: `${month}目标`, name: `${month}月目标`,
data: dataList ? dataList[2] : [], data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
}, },
{
name: `${lastMonth}月`,
data: dataList ? dataList[0] : [],
},
]; ];
} else { } else {
items = [ items = [
{
name: `${year}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{ {
name: `${year - 1}年`, name: `${year - 1}年`,
data: dataList ? dataList[0] : [], data: dataList ? dataList[0] : [],
@@ -288,11 +299,7 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [], data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), // : 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 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(); const year = new Date().getFullYear();
if (period === '日' && than === '同比') { if (period === '日' && than === '同比') {
items = [ items = [
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2].splice(0,2) : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{ {
name: `${year - 1}年${yesterday}日`, name: `${year - 1}年${yesterday}日`,
data: dataList ? dataList[0] : [], data: dataList ? dataList[0].splice(0, 2) : [],
}, },
{ {
name: `${yesterday}日`, name: `${yesterday}日`,
data: dataList ? dataList[1] : [], data: dataList ? dataList[1].splice(0, 2) : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
}, },
];
} else if (period === '日' && than === '环比') {
items = [
{ {
name: `${yesterday}日目标`, name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [], data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
}, },
];
} else if (period === '日' && than === '环比') {
items = [
{ {
name: `${dayBeYes}日`, name: `${dayBeYes}日`,
data: dataList ? dataList[0] : [], data: dataList ? dataList[0] : [],
@@ -194,16 +200,17 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [], data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), // : 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 === '同比') { } else if (period === '周' && than === '同比') {
items = [ 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] : [], data: dataList ? dataList[0] : [],
}, },
{ {
@@ -211,14 +218,15 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [], data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
}, },
];
} else if (period === '周' && than === '环比') {
items = [
{ {
name: `本周目标`, name: `本周目标`,
data: dataList ? dataList[2] : [], data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
}, },
];
} else if (period === '周' && than === '环比') {
items = [
{ {
name: `上周`, name: `上周`,
data: dataList ? dataList[0] : [], data: dataList ? dataList[0] : [],
@@ -228,16 +236,17 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [], data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), // : 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 === '同比') { } else if (period === '月' && than === '同比') {
items = [ 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] : [], data: dataList ? dataList[0] : [],
}, },
{ {
@@ -245,31 +254,34 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [], data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), // : 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 === '环比') { } else if (period === '月' && than === '环比') {
items = [ items = [
{ {
name: `${lastMonth}月`, name: `${month}月目标`,
data: dataList ? dataList[0] : [], data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
}, },
{ {
name: `${month}月`, name: `${month}月`,
data: dataList ? dataList[1] : [], data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
}, },
{ {
name: `${month}目标`, name: `${lastMonth}月`,
data: dataList ? dataList[2] : [], data: dataList ? dataList[0] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
}, },
]; ];
} else { } else {
items = [ items = [
{
name: `${year}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{ {
name: `${year - 1}年`, name: `${year - 1}年`,
data: dataList ? dataList[0] : [], data: dataList ? dataList[0] : [],
@@ -279,11 +291,7 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [], data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), // : 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 return items

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

@@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-07 13:22:43 * @Date: 2024-05-07 13:22:43
* @LastEditTime: 2024-07-19 16:10:10 * @LastEditTime: 2024-07-23 15:52:25
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -56,7 +56,7 @@ export default {
actualOptions: null, actualOptions: null,
options: { options: {
grid: { grid: {
left: "5%", left: "6%",
right: "0%", right: "0%",
bottom: "3%", bottom: "3%",
top: "15%", top: "15%",
@@ -81,13 +81,13 @@ export default {
res += res +=
"<br/>" + "<br/>" +
`${params[i].seriesType === "line" `${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: 20px;height: 2px;background-color: #f3c000;position: absolute;top:39%;left:3.05%;'></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: 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;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;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 = ` 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);"> <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: { nameTextStyle: {
color: "rgba(223,241,254,.8)", color: "rgba(223,241,254,.8)",
fontSize: 16, fontSize: 16,
align: "right",
}, },
axisTick: { axisTick: {
show: false, show: false,
@@ -139,6 +140,41 @@ export default {
}, },
}, },
series: [ 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, name: "", // this.series[0].name,
type: "bar", type: "bar",
@@ -205,42 +241,7 @@ export default {
}, },
}, },
data: [], // this.series[1].data, 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) { .legend-item:nth-child(1) {
margin-left: 1vw; margin-left: 1vw;
} }
.legend-item:nth-child(1):before { .legend-item:nth-child(1):before {
// width: 12px; // width: 12px;
// height: 2px; // height: 2px;
width: 1vw; width: 1vw;
height: 0.1064vw; height: 0.1064vw;
background-color: #f3c000; background-color: #f3c000;
position: absolute; position: absolute;
top: 50%; top: 50%;
// left: -16px; // left: -16px;
left: -1.3vw; left: -1.2vw;
transform: translateY(-50%); transform: translateY(-50%);
} }
.legend-item:nth-child(1):after { .legend-item:nth-child(1):after {
background-color: #f3c000; background-color: #f3c000;
content: ""; content: "";
display: inline-block; display: inline-block;
position: absolute; position: absolute;
// width: 6px; // width: 6px;
// height: 6px; // height: 6px;
width: 0.3191vw; width: 0.4vw;
height: 0.3191vw; height: 0.4vw;
border-radius: 100%; border-radius: 100%;
top: 50%; top: 50%;
left: -1.13vw; left: -1.1vw;
// left: -16px; // left: -16px;
transform: translateY(-50%) translateX(50%); transform: translateY(-50%) translateX(50%);
} }
.legend-item:nth-child(2):before { .legend-item:nth-child(2):before {
background-color: #12f7f1; background-color: #12f7f1;
} }

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

@@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-23 15:50:44 * @Date: 2024-05-23 15:50:44
* @LastEditTime: 2024-07-19 16:10:19 * @LastEditTime: 2024-07-23 15:52:09
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -56,7 +56,7 @@ export default {
actualOptions: null, actualOptions: null,
options: { options: {
grid: { grid: {
left: "5%", left: "6%",
right: "0%", right: "0%",
bottom: "3%", bottom: "3%",
top: "15%", top: "15%",
@@ -81,13 +81,13 @@ export default {
res += res +=
"<br/>" + "<br/>" +
`${params[i].seriesType === "line" `${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: 20px;height: 2px;background-color: #f3c000;position: absolute;top:39%;left:3.05%;'></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: 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;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;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 = ` 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);"> <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: { nameTextStyle: {
color: "rgba(223,241,254,.8)", color: "rgba(223,241,254,.8)",
fontSize: 16, fontSize: 16,
align: "right",
}, },
axisTick: { axisTick: {
show: false, show: false,
@@ -139,6 +140,41 @@ export default {
}, },
}, },
series: [ 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, name: "", // this.series[0].name,
type: "bar", type: "bar",
@@ -206,41 +242,7 @@ export default {
}, },
data: [], // this.series[1].data, 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 { .legend-item:nth-child(3):before {
background-color: #58adfa; background-color: #58adfa;
} }
.legend-item:nth-child(1):before { .legend-item:nth-child(1):before {
// width: 12px; // width: 12px;
// height: 2px; // height: 2px;
width: 1vw; width: 1vw;
height: 0.1064vw; height: 0.1064vw;
background-color: #f3c000; background-color: #f3c000;
position: absolute; position: absolute;
top: 50%; top: 50%;
// left: -16px; // left: -16px;
left: -1.3vw; left: -1.2vw;
transform: translateY(-50%); transform: translateY(-50%);
} }
.legend-item:nth-child(1):after { .legend-item:nth-child(1):after {
background-color: #f3c000; background-color: #f3c000;
content: ""; content: "";
display: inline-block; display: inline-block;
position: absolute; position: absolute;
// width: 6px; // width: 6px;
// height: 6px; // height: 6px;
width: 0.3191vw; width: 0.4vw;
height: 0.3191vw; height: 0.4vw;
border-radius: 100%; border-radius: 100%;
top: 50%; top: 50%;
left: -1.13vw; left: -1.1vw;
// left: -16px; // left: -16px;
transform: translateY(-50%) translateX(50%); transform: translateY(-50%) translateX(50%);
} }
} }
</style> </style>

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

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

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

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

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

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

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

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

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

@@ -28,7 +28,7 @@
import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/rightContainer.vue"; import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue"; import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue"; import ProdMonitor from "./components/bipvProdMonitor.vue";
import { deepClone } from "@/utils"; import { deepClone } from "@/utils";
// import Store from "./components/Store.vue"; // import Store from "./components/Store.vue";
// import Energy from "./components/Energy.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 FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/rightContainer.vue"; import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue"; import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue"; import ProdMonitor from "./components/bipvProdMonitor";
import { deepClone } from "@/utils"; import { deepClone } from "@/utils";
// import Store from "./components/Store.vue"; // import Store from "./components/Store.vue";
// import Energy from "./components/Energy.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"], color: ["#FFD160", "#2760FF", "#12FFF5"],
grid: { grid: {
left: "9%", left: "9%",
right: "3%", right: "0%",
bottom: "15%", bottom: "15%",
top: "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 : '' 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); // console.log(item.color, color);
res += 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='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>`; `<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: { splitLine: {
lineStyle: { 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 * @Author: zhp
* @Date: 2024-05-30 08:58:39 * @Date: 2024-05-30 08:58:39
* @LastEditTime: 2024-07-18 16:48:10 * @LastEditTime: 2024-07-25 09:54:21
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -56,11 +56,11 @@ export default {
actualOptions: null, actualOptions: null,
options: { options: {
grid: { grid: {
left: "8%", left: "10%",
right: "0%", right: "3%",
bottom: "3%", bottom: "10%",
top: "15%", top: "15%",
containLabel: true, // containLabel: true,
}, },
// tooltip: { // tooltip: {
// trigger: "axis", // trigger: "axis",
@@ -106,7 +106,7 @@ export default {
// console.log(item.color, color); // console.log(item.color, color);
res += res +=
"<br/>" + "<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: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>`; `<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 * @Author: zhp
* @Date: 2024-05-30 09:00:01 * @Date: 2024-05-30 09:00:01
* @LastEditTime: 2024-05-30 09:50:02 * @LastEditTime: 2024-07-24 10:31:52
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -19,7 +19,7 @@ export default {
props: { props: {
noScroll: { noScroll: {
type: Boolean, type: Boolean,
default: false, default: true,
}, },
}, },
data() { data() {

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

@@ -105,7 +105,7 @@ export default {
}</span>`, }</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 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>`,
`<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>`,
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || "" `<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || ""
}</span>`, }</span>`,
@@ -117,8 +117,8 @@ export default {
? this.prodOrder[i].productionProgress.toFixed(2) * 100 + "%" ? this.prodOrder[i].productionProgress.toFixed(2) * 100 + "%"
: "0%" : "0%"
}</span> }</span>
<div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;"> <div style="display:inline-block;height:20px;vertical-align:top;margin-top:3px;">
<svg xmlns="http://www.w3.org/200/svg" height="20" width="20"> <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 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 <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 * ? this.prodOrder[i].productionProgress.toFixed(2) *100 *
@@ -156,7 +156,6 @@ export default {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// gap: 6px; // gap: 6px;
.chart-title { .chart-title {
margin-top: 5px; margin-top: 5px;
@@ -189,8 +188,9 @@ export default {
height: 1px; // display: inline-block; height: 1px; // display: inline-block;
border: 1px solid; border: 1px solid;
// display: inline-block; // 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; // border-image: linear-gradient(to right, transparent 5%, rgba(95, 190, 249, 1) 20%, transparent 90%, )1;
backdrop-filter: blur(3px); 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> <div>
<span class="type">良品数量</span> <span class="type">良品数量</span>
<span class="type-name">{{ <span class="type-name">{{
msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0 msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0
}}</span> }}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -38,8 +38,8 @@
<div> <div>
<span class="type">生产数量</span> <span class="type">生产数量</span>
<span class="num">{{ <span class="num">{{
msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0 msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0
}}</span> }}</span>
</div> </div>
<div> <div>
<span class="type1">良品率</span> <span class="type1">良品率</span>
@@ -61,8 +61,8 @@
<div> <div>
<span class="type">良品数量</span> <span class="type">良品数量</span>
<span class="type-name">{{ <span class="type-name">{{
msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0 msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0
}}</span> }}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -71,8 +71,8 @@
<div> <div>
<span class="type">生产数量</span> <span class="type">生产数量</span>
<span class="num">{{ <span class="num">{{
msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0 msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0
}}</span> }}</span>
</div> </div>
<div> <div>
<span class="type1">良品率</span> <span class="type1">良品率</span>
@@ -94,8 +94,8 @@
<div> <div>
<span class="type">良品数量</span> <span class="type">良品数量</span>
<span class="type-name">{{ <span class="type-name">{{
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0 msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0
}}</span> }}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -104,8 +104,8 @@
<div> <div>
<span class="type">生产数量</span> <span class="type">生产数量</span>
<span class="num">{{ <span class="num">{{
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0 msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0
}}</span> }}</span>
</div> </div>
<div> <div>
<span class="type1">良品率</span> <span class="type1">良品率</span>
@@ -124,8 +124,8 @@
</div> </div>
<!-- <span class="line"></span> --> <!-- <span class="line"></span> -->
</div> </div>
<barChartBase :companyId="companyId" :than="than" :period="period" :data="factoryData" ref="barChart" <barChartBase v-if="factoryData.length != 0" :companyId="companyId" :than="than" :period="period" :data="factoryData"
style="height: 0;flex:1"> ref="barChart" style="height: 0;flex:1">
</barChartBase> </barChartBase>
</div> </div>
</div> </div>
@@ -222,7 +222,7 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.chart{ .chart{
flex: 1; flex: 1.3;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
@@ -360,7 +360,7 @@ export default {
} }
.fto-box { .fto-box {
flex: 1; flex: .5;
.type::before { .type::before {
content: ""; content: "";
@@ -379,15 +379,15 @@ export default {
} }
.std-box { .std-box {
flex: 1.3; flex: .6;
} }
.chip-box { .chip-box {
flex: 1.3; flex: .6;
} }
.bipv-box { .bipv-box {
flex: 1.3; flex: .6;
} }
.std-box, .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 * @Author: zhp
* @Date: 2024-06-05 09:36:07 * @Date: 2024-06-05 09:36:07
* @LastEditTime: 2024-07-19 16:16:02 * @LastEditTime: 2024-07-24 13:39:01
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
<!--
filename: Container.vue
author: liubin
date: 2024-04-09 10:44:09
description:
-->
<template> <template>
<div class="copilot-container"> <div class="copilot-container">
@@ -89,27 +83,29 @@ export default {
flex-direction: column; flex-direction: column;
position: relative; position: relative;
box-shadow: inset 0 0 20px 1px #fff1; box-shadow: inset 0 0 20px 1px #fff1;
border-left: 0.11415vw solid; border-right: .13vw solid;
border-image: linear-gradient(to bottom, transparent 2%, rgba(5, 138, 237, .7) 20%, rgba(2, 82, 215, 0.24) 70%, ) 71 71; // border-image: linear-gradient(to bottom,transparent 10%,
backdrop-filter: blur(4px); // #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 { &::before {
content: ""; content: "";
position: absolute; position: absolute;
display: inline-block; display: inline-block;
height: 96%; height: 92%;
width: 0.11415vw; width: 0.13vw;
border-radius: 2px; border-radius: 2px;
top: 0%; top: 0%;
right: 0; left: 0;
background: radial-gradient( background: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%);
circle at center, z-index: 1;
#024798 2%, }
#024798 100%,
transparent
);
z-index: 1;
}
&::after { &::after {
content: ""; content: "";
@@ -120,7 +116,7 @@ export default {
border-radius: 2px; border-radius: 2px;
right: 4%; right: 4%;
bottom: 0; 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; z-index: 0;
} }
@@ -141,7 +137,7 @@ export default {
} }
.container-body { .container-body {
padding: 12px; padding: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;

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

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

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

@@ -28,7 +28,7 @@
import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/rightContainer.vue"; import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue"; import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue"; import ProdMonitor from "./components/bipvProdMonitor";
import { deepClone } from "@/utils"; import { deepClone } from "@/utils";
// import Store from "./components/Store.vue"; // import Store from "./components/Store.vue";
// import Energy from "./components/Energy.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 Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue"; import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue"; import ProdMonitor from "./components/prodMonitor";
import { deepClone } from "@/utils"; import { deepClone } from "@/utils";
// import Store from "./components/Store.vue"; // import Store from "./components/Store.vue";
// import Energy from "./components/Energy.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 FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/rightContainer.vue"; import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue"; import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue"; import ProdMonitor from "./components/bipvProdMonitor.vue";
import { deepClone } from "@/utils"; import { deepClone } from "@/utils";
// import Store from "./components/Store.vue"; // import Store from "./components/Store.vue";
// import Energy from "./components/Energy.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 FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/rightContainer.vue"; import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue"; import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue"; import ProdMonitor from "./components/bipvProdMonitor.vue";
import { deepClone } from "@/utils"; import { deepClone } from "@/utils";
// import Store from "./components/Store.vue"; // import Store from "./components/Store.vue";
// import Energy from "./components/Energy.vue"; // import Energy from "./components/Energy.vue";

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

@@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-21 13:24:03 * @Date: 2024-05-21 13:24:03
* @LastEditTime: 2024-06-05 09:43:30 * @LastEditTime: 2024-07-25 10:52:35
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -38,7 +38,7 @@
<script> <script>
import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
// import Container from "./components/Container.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 Store from "./components/Store.vue";
import Energy from "./components/Energy.vue"; import Energy from "./components/Energy.vue";
import Order from "./components/Order.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 Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue"; import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue"; import ProdMonitor from "./components/bipvProdMonitor.vue";
import { deepClone } from "@/utils"; import { deepClone } from "@/utils";
// import Store from "./components/Store.vue"; // import Store from "./components/Store.vue";
// import Energy from "./components/Energy.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 * @Author: zhp
* @Date: 2024-05-20 13:32:59 * @Date: 2024-05-20 13:32:59
* @LastEditTime: 2024-07-19 16:05:46 * @LastEditTime: 2024-07-22 14:41:37
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->

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

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

10
src/views/dashboard/charts/ChipYieldChart.vue
View File

@@ -1,16 +1,10 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-04-28 13:42:51 * @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-07-18 16:37:41 * @LastEditTime: 2024-07-23 16:36:18
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
<!--
filename: ChipYield.vue
author: liubin
date: 2024-04-11 10:46:47
description:
-->
<template> <template>
<chart-container class="chip-yield-chart" :noScroll="true"> <chart-container class="chip-yield-chart" :noScroll="true">
@@ -70,7 +64,7 @@ export default {
top: "40%", top: "40%",
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
fontWeight: 600, fontWeight: 400,
fontSize: 32, fontSize: 32,
color: "#fffd", color: "#fffd",
}, },

2
src/views/dashboard/charts/Fto.vue
View File

@@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-04-28 13:42:51 * @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-06-27 16:30:58 * @LastEditTime: 2024-07-23 17:03:50
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->

11
src/views/dashboard/charts/RightChartBase.vue
View File

@@ -1,10 +1,3 @@
<!--
* @Author: zhp
* @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-07-19 15:25:37
* @LastEditors: zhp
* @Description:
-->
<!-- <!--
filename: right-chart-base filename: right-chart-base
author: liubin author: liubin
@@ -82,8 +75,8 @@ export default {
res += res +=
"<br/>" + "<br/>" +
`${params[i].seriesType === "line" `${params[i].seriesType === "line"
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:42.3%;left:4%;'></span> ? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:42.3%;left:3.05%;'></span>
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:38.82%;left:5%;'></span> <span style='display:inline-block;width: 8px;height: 8px;border-radius: 100%;background-color: #f3c000;position: absolute;top:39.4%;left:4.6%;'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px;letter-spacing: 2px;'>${params[i].seriesName}</span>` <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px;letter-spacing: 2px;'>${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;letter-spacing: 2px;'>${params[i].seriesName}</span>` <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>`

6
src/views/dashboard/charts/StdChart.vue
View File

@@ -67,15 +67,15 @@ export default {
return [ return [
{ {
name: `${new Date().getFullYear()}年目标值`, name: `${new Date().getFullYear()}年目标值`,
data: stdOutput.target, data: stdOutput.target.splice(0,2),
}, },
{ {
name: `${new Date().getFullYear() - 1}年`, name: `${new Date().getFullYear() - 1}年`,
data: stdOutput.previous, data: stdOutput.previous.splice(0, 2),
}, },
{ {
name: `${new Date().getFullYear()}年`, name: `${new Date().getFullYear()}年`,
data: stdOutput.current, data: stdOutput.current.splice(0, 2),
}, },
]; ];
}, },

2
src/views/produce/data/index.vue
View File

@@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-04-15 10:49:13 * @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-07-17 08:55:15 * @LastEditTime: 2024-07-23 09:45:26
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->

4
src/views/produce/data/lineChart.vue
View File

@@ -1,8 +1,8 @@
<!-- <!--
* @Author: zwq * @Author: zwq
* @Date: 2022-01-21 14:43:06 * @Date: 2022-01-21 14:43:06
* @LastEditors: DY * @LastEditors: zhp
* @LastEditTime: 2024-07-16 18:41:27 * @LastEditTime: 2024-07-23 09:45:30
* @Description: * @Description:
--> -->
<template> <template>

839
src/views/warehouse/index.vue
View File

@@ -1,93 +1,206 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-04-15 10:49:13 * @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-04-29 16:10:36 * @LastEditTime: 2024-07-25 14:07:51
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
<template> <template>
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)"> <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 32px)">
<div class="app-container" style="padding: 16px 24px 0;height: 400px; flex-grow: 1;"> <ButtonNav v-show="false" :menus="['碲化镉工厂', '铜铟镓硒工厂']" :button-mode="true" @change="changeFactory"
<search-bar :formConfigs="mainFormConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> style="margin-top: -10px">
<div class="content"> </ButtonNav>
<!-- v-for 遍历父级div--> <div class="app-container" style="height: auto; flex-grow: 1;">
<div class="main" :span="12" v-for="(item,index) in chartData" :key="index"> <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<line-chart :data="item" ref="lineChart" style="height: 600px;width: 100%" /> <el-form-item v-if="facType === 0" label="工厂名称" prop="factorys">
</div> <el-select size="small" v-model="listQuery.factorys" placeholder="请选择工厂名称" multiple clearable>
</div> <el-option v-for="item in dhgfactoryList" :key="item.id" :label="item.name" :value="item.id">
<!-- <el-row :gutter="24"> </el-option>
<el-col> </el-select>
</el-col> </el-form-item>
</el-row> --> <el-form-item v-else label="工厂名称" prop="factorys">
</div> <el-select size="small" v-model="listQuery.factorys" placeholder="请选择工厂名称" multiple clearable>
<div class="app-container" style="margin-top: 18px;flex-grow: 1; height: auto; padding: 16px;"> <el-option v-for="item in tyjxfactoryList" :key="item.id" :label="item.name" :value="item.id">
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> </el-option>
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" </el-select>
:table-data="tableData"> </el-form-item>
<el-form-item label="时间维度" prop="date">
<el-select size="small" clearable v-model="listQuery.date" placeholder="请选择" @change="clearTime">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item v-show="listQuery.date === 1 || listQuery.date === ''" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至"
start-placeholder="开始日期" value-format="yyyyMMdd" @change="changeDayTime" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="start" type="week" format="yyyy 第 WW 周" placeholder="选择周"
style="width: 180px" @change="onValueChange">
</el-date-picker>
至
<el-date-picker size="small" clearable v-model="end" type="week" format="yyyy 第 WW 周" placeholder="选择周"
style="width: 180px" @change="onValueChange">
</el-date-picker>
<!-- <span v-if="start && end" style="margin-left: 10px">
{{ date1 }} 至 {{ date2 }}，共 {{ weekNum }} 周
</span> -->
</el-form-item>
<el-form-item v-show="listQuery.date === 3" label="时间值" prop="reportTime">
<el-date-picker size="small" v-model="listQuery.reportTime" type="monthrange" value-format="yyyyMM"
range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime">
</el-date-picker>
</el-form-item>
<el-form-item v-show="listQuery.date === 4" label="时间值" prop="reportTime">
<el-date-picker size="small" clearable v-model="start" value-format="yyyy" type="year" placeholder="开始时间">
</el-date-picker>
~
<el-date-picker size="small" clearable v-model="end" value-format="yyyy" type="year" placeholder="结束时间"
@change="getYear">
</el-date-picker>
</el-form-item>
<!-- <el-form-item label="玻璃类型" prop="type">
<el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item> -->
<!-- <el-form-item label="玻璃类型" prop="type">
<el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item> -->
<el-form-item>
<el-button type="primary" size="small" @click="getDataList">查询</el-button>
<el-divider direction="vertical"></el-divider>
<el-button type="primary" size="small" plain @click="handleImport">导入</el-button>
<el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
<el-button type="success" size="small" plain @click="addFactory">新增</el-button>
</el-form-item>
</el-form>
<!-- <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> -->
<base-table :table-props="tableProps" :page="listQuery.current" :limit="listQuery.size" :table-data="tableData">
<method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
:method-list="tableBtn" @clickBtn="handleClick" />
</base-table> </base-table>
<pagination :limit.sync="listQuery.size" :page.sync="listQuery.current" :total="listQuery.total"
@pagination="getDataList" />
<detail-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :ftype="facType"
@destroy="detailOrUpdateVisible = false" />
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :ftype="facType" @refreshDataList="getDataList"
@destroy="addOrUpdateVisible = false" />
</div> </div>
<!-- 用户导入对话框 -->
<!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all"
:type="listQuery.reportType" @refreshDataList="getDataList" /> -->
<!-- <pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList" /> -->
</div> </div>
</template> </template>
<script> <script>
// import { parseTime } from '../../core/mixins/code-filter'; import { parseTime } from '@/utils/ruoyi';
import { getStockPage } from '@/api/wareHouse'; import { prodTargetDiPage, prodTargetToPage, exportDiTargetExcel, exportToTargetExcel, delTarget, importToTarget, importDiTarget } from '@/api/produceData';
// import inputTable from './inputTable.vue'; // import inputTable from './inputTable.vue';
import lineChart from './lineChart';
import moment from 'moment' import moment from 'moment'
// import ButtonNav from '@/components/ButtonNav'
import basicPage from '@/mixins/basic-page'
// import detailOrUpdate from './detail-or-updata';
// import addOrUpdate from './add-or-updata';
import { factoryList, dhgfactoryList, tyjxfactoryList } from "@/utils/constants";
import { getBaseHeader } from "@/utils/request";
// import FileSaver from 'file-saver' // import FileSaver from 'file-saver'
// import * as XLSX from 'xlsx' // import * as XLSX from 'xlsx'
export default { export default {
components: { lineChart }, // components: { ButtonNav, detailOrUpdate, addOrUpdate },
data() { mixins: [basicPage],
data() {
return { return {
chartData:[], factoryList,
dhgfactoryList,
tyjxfactoryList,
currentMenu: '碲化镉工厂',
fileList: [],
start: undefined,
end: undefined,
listQuery: { listQuery: {
pageSize: 10, size: 10,
pageNo: 1, current: 1,
factory:undefined, factorys: null,
total: 0,
date: 3,
beginTime: undefined,
endTime: undefined,
reportTime: []
}, },
urlOptions: { detailOrUpdateVisible: false,
// getDataListURL: getGlassPage, addOrUpdateVisible: false,
// exportURL: exportGlasscExcel date1: undefined,
date2: undefined,
// 用户导入参数
upload: {
// 是否显示弹出层（用户导入）
open: false,
// 弹出层标题（用户导入）
title: "导入",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
// updateSupport: 0,
// 设置上传的请求头部
headers: getBaseHeader(),
// 上传的地址
url: process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/di-target-import-excel'
},
tableBtn: [
{
type: 'detail',
btnName: '详情',
},
{
type: 'edit',
btnName: '修改',
},
{
type: 'delete',
btnName: '删除',
}
].filter((v) => v),
typeList: [
{
name: '芯片',
id: 0,
},
{
name: '标准组件',
id: 1,
},
{
name: 'BIPV产品',
id: 2,
},
],
urlOptions: {
// getDataListURL: getGlassPage,
// exportURL: exportGlasscExcel
}, },
mainFormConfig: [ mainFormConfig: [
{ {
type: 'select', type: 'select',
label: '工厂名称', label: '工单',
placeholder: '请选择工厂名称', placeholder: '请选择工单',
param: 'factory', param: 'workOrderId',
selectOptions: [ selectOptions: [],
{
id: 0,
name: '瑞昌中建材光电材料有限公司'
},
{
id: 1,
name: '邯郸中建材光电材料有限公司'
},
{
id: 2,
name: '中建材株洲光电材料有限公司'
},
{
id: 3,
name: '佳木斯中建材光电材料有限公司'
},
{
id: 4,
name: '成都中建材光电材料有限公司'
},
{
id: 5,
name: '凯盛光伏材料有限公司'
},
{
id: 6,
name: '蚌埠兴科玻璃有限公司'
},
],
clearable:true,
}, },
// { // {
// type: 'select', // type: 'select',
@@ -108,21 +221,21 @@ export default {
// ], // ],
// index: 2, // index: 2,
// extraOptions: [ // extraOptions: [
// { {
// // parent: 'dateFilterType', // parent: 'dateFilterType',
// // 时间段选择 // 时间段选择
// type: 'datePicker', type: 'datePicker',
// label: '时间段', label: '时间段',
// // dateType: 'datetimerange', // dateType: 'datetimerange',
// dateType: 'datetimerange', dateType: 'datetimerange',
// format: 'yyyy-MM-dd HH:mm:ss', format: 'yyyy-MM-dd HH:mm:ss',
// valueFormat: 'yyyy-MM-ddTHH:mm:ss', valueFormat: 'yyyy-MM-ddTHH:mm:ss',
// rangeSeparator: '-', rangeSeparator: '-',
// rangeSeparator: '-', rangeSeparator: '-',
// startPlaceholder: '开始时间', startPlaceholder: '开始时间',
// endPlaceholder: '结束时间', endPlaceholder: '结束时间',
// param: 'recordTime', param: 'recordTime',
// }, },
// { // {
// parent: 'dateFilterType', // parent: 'dateFilterType',
// // 日期选择 // // 日期选择
@@ -137,13 +250,13 @@ export default {
// ], // ],
// }, // },
{ {
type:'button', type: 'button',
btnName: '查询', btnName: '查询',
name: 'search', name: 'search',
color: 'primary', color: 'primary',
}, },
{ {
type:'separate' type: 'separate'
}, },
// { // {
// type: this.$auth.hasPermi( // type: this.$auth.hasPermi(
@@ -153,238 +266,417 @@ export default {
// : '', // : '',
// }, // },
{ {
type:'button', type: 'button',
btnName: '导出', btnName: '导出',
name: 'export', name: 'export',
plain: true, color: 'warning',
color: 'primary',
}, },
], ],
formConfig: [ formConfig: [
{ {
type: 'title', type: 'title',
label: '仓库管理', label: '成本管理',
}, },
], ],
timeList: [ timeList: [
{ {
value: 'month', value: 1,
label:'月' label: '日'
}, },
{ {
value: 'year', value: 2,
label: '周'
},
{
value: 3,
label: '月'
},
{
value: 4,
label: '年' label: '年'
} }
], ],
factoryList: [
{
name: '测试',
id:1
}
],
tableProps: [ tableProps: [
// {
// prop: 'createTime',
// label: '添加时间',
// fixed: true,
// width: 180,
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
// },
{ {
prop: 'factory', prop: 'factory',
label: '工厂名称', label: '工厂名称',
filter: (val) => ['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司'][val] filter: (val) => factoryList[val],
minWidth: 200,
showOverflowtooltip: true
}, },
{ {
prop: 'glassType', prop: 'targetTime',
label: '玻璃类型', label: '目标时间',
filter: (val) => ['玻璃芯片', '标准组件', 'BIPV'][val] minWidth: 150,
showOverflowtooltip: true
}, },
{ {
prop: 'productSpecification', prop: 'updateTime',
label: '产品规格', label: '提交时间',
filter: parseTime,
minWidth: 150,
showOverflowtooltip: true
}, },
{ {
prop: 'stockNumber', prop: 'ftoInput',
label: '库存数量', label: 'FTO投入量(片)',
minWidth: 150,
showOverflowtooltip: true
}, },
{ {
prop: 'specificationProportion', prop: 'chipYield',
label: '规格占比', label: '芯片产量(片)',
minWidth: 150,
showOverflowtooltip: true
},
{
prop: 'chipAveragePower',
label: '芯片平均功率(W)',
minWidth: 150,
showOverflowtooltip: true
},
{
prop: 'chipYieldRate',
label: '芯片良率(%)',
minWidth: 150,
showOverflowtooltip: true
},
{
prop: 'chipTotalPower',
label: '芯片总功率(KW)',
minWidth: 150,
showOverflowtooltip: true
},
{
prop: 'chipCssMarriageRate',
label: 'CSS稼动率(%)',
minWidth: 150,
showOverflowtooltip: true
},
{
prop: 'chipOee',
label: '芯片段OEE(%)',
minWidth: 150,
showOverflowtooltip: true
},
{
prop: 'chipCapacityUtilizationRate',
label: '芯片产能利用率(%)',
minWidth: 150,
showOverflowtooltip: true
},
{
prop: 'chipAnnualAverageProduction',
label: '芯片人均产量（片/人）',
minWidth: 180,
showOverflowtooltip: true
},
{
prop: 'chipBom',
label: '芯片BOM',
minWidth: 150,
showOverflowtooltip: true
}, },
], ],
timeSelect:'month', // timeSelect:'month',
startTimeStamp:null, //开始时间 // startTimeStamp:null, //开始时间
endTimeStamp:null, //结束时间 // endTimeStamp:null, //结束时间
// date:'凯盛玻璃控股成员企业2024生产数据', // date:'凯盛玻璃控股成员企业2024生产数据',
// reportTime: '', // reportTime: '',
startTimeStamp: '', // startTimeStamp: '',
endTimeStamp: '', // endTimeStamp: '',
tableData: [], tableData: [],
// proLineList: [], facType: 0
// all: {} // proLineList: [],
}; // all: {}
}, };
mounted() { },
this.getDict() computed: {
console.log(this.$refs.lineChart) weekNum() {
// this.getCurrentYearFirst() return Math.round((this.end - this.start) / (24 * 60 * 60 * 1000 * 7)) + 1
this.getDataList()
},
methods: {
buttonClick() {
}, },
changeTime(val) { },
if (val) { watch: {
facType(value) {
if (value === 0) {
this.$set(this.tableProps, 3, {
prop: 'ftoInput',
label: 'FTO投入量(片)',
minWidth: 150,
showOverflowtooltip: true
})
this.upload.url = process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/di-target-import-excel'
} else { } else {
this.listQuery.reportTime = [] this.$set(this.tableProps, 3, {
prop: 'molybdenumElectrodeInput',
label: '钼电极投入量(片)',
minWidth: 150,
showOverflowtooltip: true
})
this.upload.url = process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/to-target-import-excel'
}
}
},
created() {
const currentMonth = new Date()
this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')]
this.changeTime()
},
methods: {
clearTime() {
this.listQuery.beginTime = undefined
this.listQuery.endTime = undefined
this.listQuery.reportTime = []
this.start = undefined
this.end = undefined
},
handleImport() {
this.upload.title = "生产目标导入";
this.upload.open = true;
this.fileList = []
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
if (response.code !== 0) {
this.$modal.msgError(response.msg)
return;
}
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$message.success('导入成功！')
this.getDataList()
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
addFactory() {
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init();
});
},
changeFactory($event) {
this.currentMenu = $event
this.facType = this.currentMenu === '碲化镉工厂' ? 0 : 1
this.getDataList()
},
handleClick(val) {
if (val.type === "edit") {
this.addOrUpdateVisible = true;
// this.addOrEditTitle = "编辑";
this.$nextTick(() => {
this.$refs.addOrUpdate.init(val.data.id);
});
} else if (val.type === "delete") {
this.deleteHandle(val.data.id, val.data.factory, val.data._pageIndex)
} else {
this.otherMethods(val)
} }
}, },
async getDict() { // 删除
}, deleteHandle(id, name, index) {
// 获取数据列表 this.$confirm('是否确认删除工厂名称为' + factoryList[name] + '的数据项?', "系统提示", {
multipliedByHundred(str) { confirmButtonText: "确定",
console.log(str); cancelButtonText: "取消",
// console.log(str) type: "warning",
if ( str != 0) { })
let floatVal = parseFloat(str); .then(() => {
if (isNaN(floatVal)) { delTarget(id).then(({ data }) => {
return 0; this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.getDataList();
},
});
});
})
.catch(() => { });
},
otherMethods(val) {
this.detailOrUpdateVisible = true;
this.addOrEditTitle = "详情";
this.$nextTick(() => {
this.$refs.detailOrUpdate.init(val.data.id);
});
},
getYear(e) {
if (this.end && Number(this.end) - Number(this.start) > 10) {
this.$message({
message: '年份起止时间不能超过十年',
type: 'warning'
});
this.start = undefined
this.end = undefined
// console.log();
} else {
if (Number(this.end) < Number(this.start)) {
this.$message({
message: '结束年份不能小于开始年份',
type: 'warning'
});
this.start = undefined
this.end = undefined
} else {
this.listQuery.beginTime = Number(this.start)
this.listQuery.endTime = Number(this.end)
} }
floatVal = Math.round(str * 10000) / 100;
let strVal = floatVal.toString();
let searchVal = strVal.indexOf('.');
if (searchVal < 0) {
searchVal = strVal.length;
strVal += '.';
}
while (strVal.length <= searchVal + 2) {
strVal += '0';
}
return parseFloat(strVal);
} }
if (!this.start && !this.end) {
this.listQuery.beginTime = undefined
this.listQuery.endTime = undefined
}
// console.log(e);
},
changeTime() {
if (this.listQuery.reportTime) {
const years = Number(this.listQuery.reportTime[1].slice(0, 4)) - Number(this.listQuery.reportTime[0].slice(0, 4))
const months = Number(this.listQuery.reportTime[1].slice(4)) - Number(this.listQuery.reportTime[0].slice(4))
if (years * 12 + months > 24) {
this.$message({
message: '时间范围不能超过24个月',
type: 'warning'
});
this.listQuery.reportTime = [];
} else {
this.listQuery.beginTime = Number(this.listQuery.reportTime[0])
this.listQuery.endTime = Number(this.listQuery.reportTime[1])
}
} else {
this.listQuery.beginTime = undefined
this.listQuery.endTime = undefined
}
},
onValueChange(picker, k) { // 选中近k周后触发的操作
if (this.start && this.end) {
this.date1 = moment(this.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
this.date2 = moment(this.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000);
if (numDays > 168) {
console.log(numDays)
this.$message({
message: '周范围不能超过24周',
type: 'warning'
});
} else {
this.listQuery.beginTime = Number(moment(this.start.getTime()).format('YYYYWW'))
this.listQuery.endTime = Number(moment(this.end.getTime()).format('YYYYWW'))
}
}
if (!this.start && !this.end) {
this.listQuery.beginTime = undefined
this.listQuery.endTime = undefined
}
},
changeDayTime() {
if (this.listQuery.reportTime) {
const numDays = Number(this.listQuery.reportTime[1]) - Number(this.listQuery.reportTime[0])
if (numDays > 30) {
this.$message({
message: '时间范围不能超过30天',
type: 'warning'
});
this.listQuery.reportTime = [];
} else {
this.listQuery.beginTime = Number(this.listQuery.reportTime[0])
this.listQuery.endTime = Number(this.listQuery.reportTime[1])
}
} else {
this.listQuery.beginTime = undefined
this.listQuery.endTime = undefined
}
}, },
async getDataList() { async getDataList() {
getStockPage(this.listQuery).then((res) => { if (this.currentMenu === '碲化镉工厂') {
this.tableData = res.data.list await prodTargetDiPage(this.listQuery).then(res => {
let arr = res.data.list.map((ele) => { if (res.code === 0) {
return { this.tableData = res.data.records
factory: ele.factory === 0 ? '瑞昌中建材光电材料有限公司' : ele.factory === 1 ? '邯郸中建材光电材料有限公司' : ele.factory === 2 ? '中建材株洲光电材料有限公司' : ele.factory === 3 ? '佳木斯中建材光电材料有限公司' : ele.factory === 4 ? '成都中建材光电材料有限公司' : ele.factory === 5 ? '凯盛光伏材料有限公司' : '蚌埠兴科玻璃有限公司', this.listQuery.total = res.data.total
name: ele.glassType === 0 ? '玻璃芯片' : ele.glassType === 1 ? '标准组件' : 'BIPV',
num: ele.stockNumber
} }
}) })
this.checkSameData(arr) } else {
this, this.$nextTick(() => [ await prodTargetToPage(this.listQuery).then(res => {
this.$refs.lineChart.initChart() if (res.code === 0) {
]) this.tableData = res.data.records
}) this.tableData.forEach(item => {
}, const year = item.targetYear ? item.targetYear + '年' : ''
checkSameData(data) { const month = item.targetMonth ? item.targetMonth + '月' : ''
let dataInfo = {} item.tagertTime = year + month
data.forEach((item, index) => { })
let { factory } = item; this.listQuery.total = res.data.total
if (!dataInfo[factory]) {
dataInfo[factory] = {
factory,
child: []
} }
} })
dataInfo[factory].child.push(item) }
})
this.chartData = Object.values(dataInfo); // list 转换成功的数据
// console.log(this.chartData[0])
}, },
add0(m) { buttonClick(val) {
return m < 10 ? '0' + m : m this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
switch (val.btnName) {
case 'search':
this.listQuery.current = 1;
this.listQuery.size = 10;
this.getDataList();
break;
case 'export':
this.handleExport();
break;
default:
console.log(val);
}
}, },
format(shijianchuo) { /** 导出按钮操作 */
//shijianchuo是整数，否则要parseInt转换
var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss')
return time
},
changeTime(val) {
if (val) {
this.endTimeStamp = this.format(val.setHours(7, 0, 0)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
this.startTimeStamp = this.format(val.setHours(7, 0, 1) - 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
// console.log(this.listQuery.reportTime);
this.listQuery.reportTime[0] = this.format(val.setHours(7, 0, 1)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
this.listQuery.reportTime[1] = this.format(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
console.log(this.listQuery.reportTime);
} else {
this.listQuery.reportTime = []
}
},
//时间戳转为yy-mm-dd hh:mm:ss
timeFun(unixtimestamp) {
var unixtimestamp = new Date(unixtimestamp);
var year = 1900 + unixtimestamp.getYear();
var month = "0" + (unixtimestamp.getMonth() + 1);
var date = "0" + unixtimestamp.getDate();
return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length)
},
buttonClick(val) {
// this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
console.log(val)
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1
this.listQuery.pageSize = 10
this.listQuery.factory = val.factory ? val.factory : undefined
this.getDataList();
break;
case 'export':
this.handleExport();
break;
default:
console.log(val);
}
},
/** 导出按钮操作 */
handleExport() { handleExport() {
// 处理查询参数 const queryParams = this.listQuery;
// var xlsxParam = { raw: true }; queryParams.current = 1
// /* 从表生成工作簿对象 */ queryParams.size = 999
// import('xlsx').then(excel => { if (this.facType === 0) {
// var wb = excel.utils.table_to_book( this.$modal.confirm('是否确认导出所有数据项?').then(() => {
// document.querySelector("#exportTable"), this.exportLoading = true;
// xlsxParam return exportDiTargetExcel(queryParams);
// ); }).then(response => {
// /* 获取二进制字符串作为输出 */ this.$download.excel(response, '碲化镉工厂生产目标数据.xls');
// var wbout = excel.write(wb, { this.exportLoading = false;
// bookType: "xlsx", }).catch(() => { });
// bookSST: true, } else {
// type: "array", this.$modal.confirm('是否确认导出所有数据项?').then(() => {
// }); this.exportLoading = true;
// try { return exportToTargetExcel(queryParams);
// FileSaver.saveAs( }).then(response => {
// //Blob 对象表示一个不可变、原始数据的类文件对象。 this.$download.excel(response, '铜铟镓硒工厂生产目标数据.xls');
// //Blob 表示的不一定是JavaScript原生格式的数据。 this.exportLoading = false;
// //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 }).catch(() => { });
// //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。 }
// new Blob([wbout], { type: "application/octet-stream" }), }
// //设置导出文件名称 },
// "许昌安彩日原片生产汇总.xlsx"
// );
// } catch (e) {
// if (typeof console !== "undefined") console.log(e, wbout);
// }
// return wbout;
// //do something......
// })
},
},
}; };
</script> </script>
<style scoped> <style>
/* .blueTip { */ /* .blueTip { */
/* padding-bottom: 10px; */ /* padding-bottom: 10px; */
/* } */ /* } */
/* .blueTi */ .blueTip .el-date-editor .el-range__icon {
.blueTip::before{ font-size: 16px;
color: #0b58ff;
}
.blueTip .el-input__prefix .el-icon-date {
font-size: 16px;
color: #0b58ff;
}
.blueTip .el-input__prefix .el-icon-time {
font-size: 16px;
color: #0b58ff;
}
.blueTip::before {
display: inline-block; display: inline-block;
content: ''; content: '';
width: 4px; width: 4px;
@@ -394,26 +686,13 @@ export default {
margin-right: 8PX; margin-right: 8PX;
margin-top: 8px; margin-top: 8px;
} }
.app-container { .app-container {
margin: 0 16px 0; margin: 0;
background-color: #fff; background-color: #fff;
border-radius: 4px; border-radius: 4px;
padding: 16px 16px 0; padding: 16px 16px 0;
height: calc(100vh - 134px); height: calc(100vh - 134px);
overflow: auto; overflow: auto;
} }
.content {
display: flex;
/* grid-template-columns: 1fr 1fr 1fr; */
gap: 20px;
flex-wrap: wrap;
}
.main {
width: calc((100% - 46px)/2);
/* border: 1px solid #D0D0D0; */
height: 400px;
/* background-color: #FFFFFF; */
position: relative;
}
</style> </style>