43 Commits

Author SHA1 Message Date
‘937886381’
2c53c249af Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-08 13:25:52 +08:00
‘937886381’
f2d57a8ebb 修改ui 2024-07-08 13:25:28 +08:00
00ed35ed82 Merge pull request 'projects/mescc/zhp' (#85) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #85
2024-07-05 16:36:30 +08:00
‘937886381’
689de3173f Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-05 16:33:39 +08:00
‘937886381’
865698a9be 修改ui 2024-07-05 16:33:14 +08:00
798ea2d90d Merge pull request 'projects/mescc/zhp' (#84) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #84
2024-07-05 14:08:40 +08:00
‘937886381’
44f3ab3e99 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-05 14:06:39 +08:00
‘937886381’
3e025020ab 修改bug 2024-07-05 14:06:15 +08:00
d62015bfbb Merge pull request 'projects/mescc/zhp' (#83) from projects/mescc/zhp into projects/mescc/develop
Some checks are pending
continuous-integration/drone/push Build is pending
Reviewed-on: #83
2024-07-04 16:41:23 +08:00
‘937886381’
a7e89fe7e8 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-04 09:39:31 +08:00
‘937886381’
6cb91b2c4a 修改bug 2024-07-04 09:39:08 +08:00
165722d67d Merge pull request 'projects/mescc/zhp' (#82) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #82
2024-07-03 16:59:09 +08:00
‘937886381’
486cffd64e 解决冲突 2024-07-03 16:30:14 +08:00
‘937886381’
81c4af0cc8 修改ui 2024-07-03 16:28:41 +08:00
db113cdba9 Merge pull request 'projects/mescc/dy' (#81) from projects/mescc/dy into projects/mescc/develop
Some checks are pending
continuous-integration/drone/push Build is pending
Reviewed-on: #81
2024-07-03 08:52:56 +08:00
helloDy
af52db4a37 Merge branch 'projects/mescc/develop' into projects/mescc/dy 2024-07-03 08:52:07 +08:00
helloDy
e0ca435014 ui 2024-07-03 08:51:32 +08:00
affe8ec026 Merge pull request 'projects/mescc/zhp' (#80) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #80
2024-07-02 13:42:35 +08:00
‘937886381’
aa6ae82607 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-02 13:16:48 +08:00
‘937886381’
eee121e5ab 修改bui 2024-07-02 13:15:50 +08:00
4332113e3b Merge pull request 'projects/mescc/zhp' (#79) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #79
2024-07-01 20:34:09 +08:00
‘937886381’
53ba98b01a Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-01 15:28:12 +08:00
‘937886381’
23cf4aaa1e 修改bug 2024-07-01 15:27:49 +08:00
81a110ba45 Merge pull request 'projects/mescc/zhp' (#78) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #78
2024-07-01 14:58:13 +08:00
‘937886381’
a249e88530 修改bug 2024-07-01 14:40:09 +08:00
‘937886381’
2128538199 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-01 13:50:06 +08:00
‘937886381’
052d0704fd 修改bug 2024-07-01 13:49:30 +08:00
749b9c6576 Merge pull request 'projects/mescc/zhp' (#77) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #77
2024-07-01 12:10:22 +08:00
‘937886381’
3f942111b0 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-01 11:52:14 +08:00
‘937886381’
716c88dfc4 修改bug 2024-07-01 11:51:44 +08:00
ec0a99b5fb Merge pull request 'projects/mescc/zhp' (#76) from projects/mescc/zhp into projects/mescc/develop
Some checks are pending
continuous-integration/drone/push Build is pending
Reviewed-on: #76
2024-06-28 16:35:08 +08:00
‘937886381’
384527d6db Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-06-28 16:32:12 +08:00
‘937886381’
26cf9a6ce4 修改 2024-06-28 16:30:52 +08:00
5ba0b62ae6 Merge pull request 'projects/mescc/zhp' (#75) from projects/mescc/zhp into projects/mescc/develop
Some checks are pending
continuous-integration/drone/push Build is pending
Reviewed-on: #75
2024-06-28 16:12:04 +08:00
‘937886381’
5ac5da1bf5 修改 2024-06-28 16:03:42 +08:00
‘937886381’
99f5f978d4 修改 2024-06-28 15:35:28 +08:00
‘937886381’
04af70f416 修改bug 2024-06-28 14:55:12 +08:00
‘937886381’
242e42a56a Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-06-28 14:42:26 +08:00
‘937886381’
2ab541d4c1 修改bug 2024-06-28 14:41:50 +08:00
95d530e5f1 Merge pull request 'projects/mescc/zhp' (#74) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #74
2024-06-28 13:22:49 +08:00
‘937886381’
83b9867c2a Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-06-28 13:16:07 +08:00
‘937886381’
7b8f4cac21 修改bug 2024-06-28 13:15:43 +08:00
7886d5ad5a Merge pull request 'projects/mescc/zjl' (#73) from projects/mescc/zjl into projects/mescc/develop
Some checks are pending
continuous-integration/drone/push Build is pending
Reviewed-on: #73
2024-06-28 11:10:40 +08:00
54 changed files with 1366 additions and 693 deletions

View File

@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组</title>
<g id="01数字驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="产量驾驶舱" transform="translate(-1438.000000, -12.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g id="编组-20" transform="translate(1438.000000, 8.000000)">
<g id="编组" transform="translate(0.000000, 4.000000)">
<rect id="矩形" opacity="0" x="0" y="0" width="24" height="24"></rect>
<path d="M11.1710783,2.42919989 C11.7298936,2.09409047 12.4328291,2.12455473 12.9654367,2.52059014 L20.3218013,7.99000647 L20.4665209,8.10559268 C21.0744501,8.62656431 21.4302636,9.40344805 21.4302636,10.227099 L21.4302636,19.0470569 L21.4250327,19.2212289 C21.3382831,20.6611171 20.1833875,21.8011882 18.7715031,21.8011882 L5.2284969,21.8011882 L5.06035624,21.7957697 C3.67032883,21.7059084 2.56973638,20.5095861 2.56973638,19.0470569 L2.56973638,10.2273587 L2.57600507,10.0381789 C2.63012926,9.22282649 3.03207443,8.47038558 3.67819781,7.99000711 L11.034559,2.52059336 Z M12.0713092,3.55793652 C11.9772762,3.53774358 11.8769764,3.55793433 11.7954857,3.6185066 L4.43911542,9.0879271 L4.32641124,9.18150853 C4.04059293,9.44596068 3.87451485,9.82573182 3.87451485,10.2273587 L3.87451485,19.0470569 L3.880713,19.1821318 C3.94632222,19.8933667 4.52470053,20.4496068 5.2284969,20.4496068 L11.2507497,20.4487759 L11.3507364,20.3451977 L11.3512202,14.4627186 L11.3582338,14.3683764 C11.4044406,14.0603828 11.6734228,13.8227675 12,13.8227675 C12.3345637,13.8227675 12.6123182,14.0734451 12.6454705,14.3976012 L12.6489183,14.4681588 L12.6487364,20.3451881 L12.7487231,20.4487759 L18.7714898,20.4496068 L18.9018895,20.4431864 C19.5885066,20.3752237 20.1254851,19.7760987 20.1254851,19.0470569 L20.1254851,10.2273587 L20.1177907,10.0779557 C20.0769951,9.68325297 19.8759128,9.32208831 19.5608746,9.08791971 L12.2045243,3.61851399 L12.1402672,3.58065321 Z" id="形状结合" stroke="#FFFFFF" stroke-width="0.1"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@@ -1,11 +1,13 @@
<template> <template>
<el-breadcrumb class="app-breadcrumb" separator="/"> <el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb"> <transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path"> <el-breadcrumb-item v-for=" (item, index) in levelList" :key="item.path">
<span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">{{ <span :style="{ color: (changeColor == true ? 'rgba(255, 255, 255, 0.45)' :' rgba(0, 0, 0, .65)')}"
item.meta.title v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">{{
}}</span> item.meta.title
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> }}</span>
<a :style="{ color: (changeColor == true ? 'rgba(255, 255, 255, 0.45)' :' rgba(0, 0, 0, .45)')}" v-else
@click.prevent="handleLink(item)">{{ item.meta.title }}</a>
</el-breadcrumb-item> </el-breadcrumb-item>
</transition-group> </transition-group>
</el-breadcrumb> </el-breadcrumb>
@@ -18,7 +20,35 @@ export default {
levelList: null levelList: null
} }
}, },
computed: {
changeColor() {
console.log(this.$route);
if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') {
return true
} else {
return false
}
}
},
watch: { watch: {
changeColor(val) {
if (val == true) {
let item = document.getElementsByClassName('el-breadcrumb__separator')
for (let i in item) {
console.log(item[i])
if (item[i]) {
item[i].style.color = 'rgba(255, 255, 255, 0.45)'
}
}
} else {
let item = document.getElementsByClassName('el-breadcrumb__separator')
for (let i in item) {
if (item[i]) {
// item[i].style.color = '#c0c4cc'
}
}
}
},
$route(route) { $route(route) {
// if you go to the redirect page, do not update the breadcrumbs // if you go to the redirect page, do not update the breadcrumbs
if (route.path.startsWith('/redirect/')) { if (route.path.startsWith('/redirect/')) {
@@ -70,13 +100,13 @@ export default {
margin-left: 8px; margin-left: 8px;
.no-redirect { .no-redirect {
color: rgba(0, 0, 0, 0.65); color: rgba(0, 0, 0, .45);
cursor: text; cursor: text;
} }
} }
.app-breadcrumb .el-breadcrumb__inner a, .app-breadcrumb .el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link { .el-breadcrumb__inner.is-link {
color: rgba(0, 0, 0, 0.45); color:rgba(0, 0, 0, 0.65)
} }
</style> </style>

View File

@@ -1,6 +1,7 @@
<template> <template>
<div class="navbar"> <div ref="navbar" class="navbar"
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" :style="changeColor ? 'background: rgba(0, 21, 41, 1);boxShadow:0px 1px 8px 0px rgba(0,131,255,0.35)' : ''">
<hamburger id="hamburger-container" style="color: blue;" :is-active="sidebar.opened" class="hamburger-container"
@toggleClick="toggleSideBar" /> @toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" /> <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
@@ -41,6 +42,13 @@ export default {
'nickname', 'nickname',
'device' 'device'
]), ]),
changeColor() {
if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') {
return true
} else {
return false
}
},
setting: { setting: {
get() { get() {
return this.$store.state.settings.showSettings return this.$store.state.settings.showSettings
@@ -58,6 +66,19 @@ export default {
} }
} }
}, },
watch: {
changeColor(val) {
if (val == true) {
let svg = document.getElementsByClassName('hamburger')
console.log('svg',svg);
svg[0].setAttribute('fill', 'rgba(255, 255, 255, 1)')
} else {
let svg = document.getElementsByClassName('hamburger')
console.log('svg', svg);
svg[0].setAttribute('fill', '')
}
},
},
methods: { methods: {
toggleSideBar() { toggleSideBar() {
this.$store.dispatch('app/toggleSideBar') this.$store.dispatch('app/toggleSideBar')

View File

@@ -1,25 +1,31 @@
<template> <template>
<div class="right-msg" :style="blackTitle ? 'color: #000' : 'color: #fff'"> <div class="right-msg" :style="blackTitle ? 'color: #000' : 'color: #fff'">
<div class="home-icon" v-if='blackTitle'> <div class="home-icon" v-if='blackTitle'>
<svg-icon icon-class="home" style="font-size: 24px; cursor: pointer;" @click="toHome" /> <svg-icon :icon-class="changeColor === true ? 'darkHome' : 'home'"
style="font-size: 24px; cursor: pointer;color: aqua;" @click="toHome" />
</div> </div>
<div class="time-msg"> <div class="time-msg">
<div class="line1">{{ timeZone }}&nbsp;&nbsp;&nbsp;&nbsp;{{ topTime }}</div> <div class="line1" :style="changeColor === true ? 'color:rgba(255, 255, 255, 1)' : ''">{{ timeZone
<div class="line2">{{ topDate }}</div> }}&nbsp;&nbsp;&nbsp;&nbsp;{{ topTime }}</div>
<div :style="changeColor === true ? 'color:rgba(255, 255, 255, .65)' : ''" class="line2">{{ topDate }}</div>
</div> </div>
<div class="base-msg"> <div class="base-msg">
<div class="avatar"> <div class="avatar">
<el-dropdown> <el-dropdown>
<img :src="require(`../../assets/images/choicepart/avatar.png`)" alt="" width="32" height="32" /> <img :src="require(`../../assets/images/choicepart/avatar.png`)" alt="" width="32" height="32" />
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item><svg-icon icon-class="helpbtn" />帮助文档</el-dropdown-item> <el-dropdown-item>
<el-dropdown-item @click.native="logout"><svg-icon icon-class="exitbtn" />退出登录</el-dropdown-item> <svg-icon icon-class="helpbtn" />帮助文档
</el-dropdown-item>
<el-dropdown-item @click.native="logout">
<svg-icon icon-class="exitbtn" />退出登录
</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
<div class="use-msg"> <div class="use-msg">
<div class="line1">{{ nickname }}</div> <div :style="changeColor === true ? 'color:rgba(255, 255, 255, 1)' : ''" class="line1">{{ nickname }}</div>
<div class="line2">{{ dept }}</div> <div :style="changeColor === true ? 'color:rgba(255, 255, 255, .65)' : ''" class="line2">{{ dept }}</div>
</div> </div>
</div> </div>
</div> </div>
@@ -48,6 +54,15 @@ export default {
} }
} }
}, },
computed: {
changeColor() {
if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') {
return true
} else {
return false
}
},
},
created() { created() {
// this.getUserMsg() // this.getUserMsg()
this.getTime() this.getTime()

View File

@@ -1,3 +1,10 @@
<!--
* @Author: zhp
* @Date: 2024-06-03 15:38:31
* @LastEditTime: 2024-07-04 10:44:35
* @LastEditors: zhp
* @Description:
-->
<template> <template>
<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll"> <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
<slot /> <slot />
@@ -17,7 +24,9 @@ export default {
computed: { computed: {
scrollWrapper() { scrollWrapper() {
return this.$refs.scrollContainer.$refs.wrap return this.$refs.scrollContainer.$refs.wrap
} },
},
watch: {
}, },
mounted() { mounted() {
this.scrollWrapper.addEventListener('scroll', this.emitScroll, true) this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)

View File

@@ -1,5 +1,7 @@
<template> <template>
<div id="tags-view-container" class="tags-view-container"> <div ref="tagsViewContainer"
:style="changeColor === true ? 'background:rgba(0, 21, 41, 1);borderTop:0px solid #d8dce5' : ''" id="tags-view-container"
class="tags-view-container">
<scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll"> <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
<router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''" <router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item" :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
@@ -36,6 +38,13 @@ export default {
} }
}, },
computed: { computed: {
changeColor() {
if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') {
return true
} else {
return false
}
},
visitedViews() { visitedViews() {
return this.$store.state.tagsView.visitedViews return this.$store.state.tagsView.visitedViews
}, },
@@ -44,9 +53,31 @@ export default {
}, },
theme() { theme() {
return this.$store.state.settings.theme; return this.$store.state.settings.theme;
} },
}, },
watch: { watch: {
changeColor(val) {
if (val == true) {
// console.log('this.$refs.tagsViewContainer', this.$refs.tagsViewContainer);
// this.$refs.tagsViewContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)'
// this.$refs.tagsViewContainer.style.borderTop = '0px solid #d8dce5'
var tag = document.getElementsByClassName("tags-view-item")
console.log('tag', tag)
for (let i in tag) {
tag[i].classList.add("changeColor")
// tag[i].classList.remove("default")
}
// console.log('this.$refs.scrollContainer', this.$refs.tag);
} else {
// this.$refs.tagsViewContainer.style.backgroundColor = ''
// this.$refs.tagsViewContainer.style.borderTop = '1px solid #d8dce5'
var tag = document.getElementsByClassName("tags-view-item")
for (let i in tag) {
tag[i].classList.remove("changeColor")
// tag[i].classList.add("default")
}
}
},
$route() { $route() {
this.addTags() this.addTags()
this.moveToCurrentTag() this.moveToCurrentTag()
@@ -60,6 +91,7 @@ export default {
} }
}, },
mounted() { mounted() {
console.log(this.$route, this.changeColor);
this.initTags() this.initTags()
this.addTags() this.addTags()
}, },
@@ -68,11 +100,23 @@ export default {
return route.path === this.$route.path return route.path === this.$route.path
}, },
activeStyle(tag) { activeStyle(tag) {
if (!this.isActive(tag)) return {}; if (this.changeColor) {
return { if (!this.isActive(tag)) return {
"background-color": this.theme, "background-color": 'rgba(0, 59, 115, 1)',
"border-color": this.theme "border-color": 'rgba(0, 59, 115, 1)',
}; "color": 'rgba(255, 255, 255, 1)'
};
return {
"background-color": this.theme,
"border-color": this.theme
};
} else {
if (!this.isActive(tag)) return {};
return {
"background-color": this.theme,
"border-color": this.theme
};
}
}, },
isAffix(tag) { isAffix(tag) {
return tag.meta && tag.meta.affix return tag.meta && tag.meta.affix
@@ -230,6 +274,14 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// :root{
// --theme-color: rgba(0, 0, 0, 0.45);
// --theme-background: #f4f4f4ff;
// }
.changeColor{
--theme-background: rgba(0, 59, 115, 1);
--theme-color: rgba(255, 255, 255, 1);
}
.tags-view-container { .tags-view-container {
height: 42px; height: 42px;
width: 100%; width: 100%;
@@ -245,8 +297,8 @@ export default {
cursor: pointer; cursor: pointer;
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
color: rgba(0, 0, 0, 0.45); color: var(--theme-color,rgba(0, 0, 0, 0.45));
background: #F4F4F4FF; background:var(--theme-background,#f4f4f4ff);
padding: 0 8px 0 12px; padding: 0 8px 0 12px;
font-size: 14px; font-size: 14px;
letter-spacing: 1px; letter-spacing: 1px;
@@ -331,7 +383,7 @@ export default {
.el-icon-close { .el-icon-close {
&:hover { &:hover {
background-color: #fff; background-color: #fff;
color: #409eff; color: rgba(62, 142, 247, 1);
} }
} }
} }

View File

@@ -2,7 +2,8 @@
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }"> <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<sidebar v-if="!sidebar.hide" class="sidebar-container" /> <sidebar v-if="!sidebar.hide" class="sidebar-container" />
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container"> <div :style="changeColor ? 'background: rgba(0, 21, 41, 1)' : ''" ref="mainContainer"
:class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
<div :class="{ 'fixed-header': fixedHeader }"> <div :class="{ 'fixed-header': fixedHeader }">
<navbar /> <navbar />
<tags-view v-if="needTagsView" /> <tags-view v-if="needTagsView" />
@@ -39,6 +40,13 @@ export default {
needTagsView: state => state.settings.tagsView, needTagsView: state => state.settings.tagsView,
fixedHeader: state => state.settings.fixedHeader fixedHeader: state => state.settings.fixedHeader
}), }),
changeColor() {
if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') {
return true
} else {
return false
}
},
classObj() { classObj() {
return { return {
hideSidebar: !this.sidebar.opened, hideSidebar: !this.sidebar.opened,
@@ -51,6 +59,16 @@ export default {
return variables; return variables;
} }
}, },
watch: {
// changeColor(val) {
// if (val == true) {
// // console.log('this.$refs.mainContainer', this.$refs.mainContainer);
// this.$refs.mainContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)'
// } else {
// this.$refs.mainContainer.style.backgroundColor = ''
// }
// },
},
methods: { methods: {
handleClickOutside() { handleClickOutside() {
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })

View File

@@ -92,7 +92,7 @@ const actions = {
/** 初始化首页数据 */ /** 初始化首页数据 */
async initHome({ commit }) { async initHome({ commit }) {
const dataArr = await getHomeInfo(); const dataArr = await getHomeInfo();
console.log('dataArr', dataArr); // console.log('dataArr', dataArr);
let preData = dataArr.previousProdOutputOutDO let preData = dataArr.previousProdOutputOutDO
let preFtoData = dataArr.previousProdOutputFtoDO let preFtoData = dataArr.previousProdOutputFtoDO
// const targetArr = await getHomeInfo(); // const targetArr = await getHomeInfo();
@@ -127,7 +127,7 @@ const actions = {
// const payload = handler(factoryData) // const payload = handler(factoryData)
// commit("SET_COPILOT_INFO", { type, payload }); // commit("SET_COPILOT_INFO", { type, payload });
// } else { // } else {
console.log('factoryList',factoryList) // console.log('factoryList',factoryList)
let factoryData = factoryList.prodOutputOutDO ? factoryList.prodOutputOutDO : factoryList.prodOutputRateDO let factoryData = factoryList.prodOutputOutDO ? factoryList.prodOutputOutDO : factoryList.prodOutputRateDO
let preData = factoryList.previousProdOutputOutDO ? factoryList.previousProdOutputOutDO : factoryList.previousProdOutputRateDO let preData = factoryList.previousProdOutputOutDO ? factoryList.previousProdOutputOutDO : factoryList.previousProdOutputRateDO
let preFtoData = factoryList.previousProdOutputFtoDO ? factoryList.previousProdOutputFtoDO : [] let preFtoData = factoryList.previousProdOutputFtoDO ? factoryList.previousProdOutputFtoDO : []
@@ -289,7 +289,7 @@ function splitCurrentAndPreviousB(factoryListResponse) {
} }
function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) { function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) {
console.log('工厂',preData); // console.log('工厂',preData);
// 初始数据 // 初始数据
const { chipOeeRate, transformRate, chipRate, stdRate } = initA(); const { chipOeeRate, transformRate, chipRate, stdRate } = initA();
@@ -346,7 +346,7 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO
if (preData) { if (preData) {
for (const factory of preData) { for (const factory of preData) {
const fId = getPreFactoryId(factory) const fId = getPreFactoryId(factory)
console.log('factory',factory.previousYearOee); // console.log('factory',factory.previousYearOee);
// chipInvest.previous[fId] = factory.previousYearInputNumber; // chipInvest.previous[fId] = factory.previousYearInputNumber;
// chipOeeRate.current[fId] = factory.oee; // chipOeeRate.current[fId] = factory.oee;
if (factory.previousGlassType === 0) { if (factory.previousGlassType === 0) {
@@ -400,7 +400,7 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO
_t.current[fId] = factory.yieldRate ; _t.current[fId] = factory.yieldRate ;
// _t.previous[fId] = factory.previousYearYieldRate ; // _t.previous[fId] = factory.previousYearYieldRate ;
} }
console.log('chipOeeRate',stdRate); // console.log('chipOeeRate',stdRate);
// console.log('chipOeeRate',chipOeeRate); // console.log('chipOeeRate',chipOeeRate);
return { return {
chipOeeRate, chipOeeRate,
@@ -412,12 +412,12 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO
} }
function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) { function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) {
console.log('prodOutputFtoListRes',preFtoData); // console.log('prodOutputFtoListRes',preFtoData);
// 初始数据 // 初始数据
const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init() const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init()
if (prodOutputFtoListRes.length !== 0 ) { if (prodOutputFtoListRes.length !== 0 ) {
for (const factory of prodOutputFtoListRes) { for (const factory of prodOutputFtoListRes) {
console.log(factory); // console.log(factory);
const fId = getFactoryId(factory); const fId = getFactoryId(factory);
// const preFId = getPreFactoryId(factory); // const preFId = getPreFactoryId(factory);
// if (fId) { // if (fId) {
@@ -430,7 +430,7 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
} }
if (preFtoData) { if (preFtoData) {
for (const factory of preFtoData) { for (const factory of preFtoData) {
console.log(factory); // console.log(factory);
const fId = getPreFactoryId(factory); const fId = getPreFactoryId(factory);
// const preFId = getPreFactoryId(factory); // const preFId = getPreFactoryId(factory);
// if (fId) { // if (fId) {
@@ -463,7 +463,7 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
if (factoryListResponse) { if (factoryListResponse) {
for (const factory of factoryListResponse) { for (const factory of factoryListResponse) {
const fId = getFactoryId(factory); const fId = getFactoryId(factory);
console.log('factory.inputNumber', factory, fId); // console.log('factory.inputNumber', factory, fId);
if (factory.glassType === 0) { if (factory.glassType === 0) {
chipInvest.current[fId] = factory.inputNumber chipInvest.current[fId] = factory.inputNumber
} }
@@ -484,7 +484,7 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
const _t = [chipOutput, stdOutput, bipvOutput][factory.glassType]; const _t = [chipOutput, stdOutput, bipvOutput][factory.glassType];
_t.current[fId] = factory.outputNumber; _t.current[fId] = factory.outputNumber;
} }
console.log('chipInvest',ftoInvest); // console.log('chipInvest',ftoInvest);
return { return {
chipInvest, chipInvest,
// ftoInvest, // ftoInvest,

View File

@@ -62,7 +62,32 @@ export default {
top: "15%", top: "15%",
containLabel: true, containLabel: true,
}, },
tooltip: {}, tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
xAxis: { xAxis: {
axisTick: { axisTick: {
show: false, show: false,
@@ -188,13 +213,13 @@ export default {
this.canvasReset() this.canvasReset()
}, },
isFullscreen(val) { isFullscreen(val) {
this.actualOptions.series.map((item) => { this.options.series.map((item) => {
item.barWidth = val ? 18 : 12; item.barWidth = val ? 18 : 12;
}); });
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions); this.initChart(this.options);
// this.actualOptions.series.map((item) => { // this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12; // item.barWidth = val ? 18 : 12;
// }); // });
@@ -209,14 +234,14 @@ export default {
this.initChart(this.options); this.initChart(this.options);
return; return;
} }
const actualOptions = JSON.parse(JSON.stringify(this.options)); // const actualOptions = JSON.parse(JSON.stringify(this.options));
console.log('actualOptions', this.options) // console.log('actualOptions', this.options)
actualOptions.series[0].data = val[0].data; this.options.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name; this.options.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data || []; this.options.series[1].data = val?.[1]?.data || [];
actualOptions.series[1].name = val?.[1]?.name || ""; this.options.series[1].name = val?.[1]?.name || "";
this.actualOptions = actualOptions; // this.actualOptions = actualOptions;
this.initChart(actualOptions); this.initChart(this.options);
}, },
}, },
mounted() { mounted() {
@@ -225,7 +250,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen; this.isFullscreen = screenfull.isFullscreen;
}); });
} }
this.actualOptions = this.options // this.actualOptions = this.options
this.canvasReset(); this.canvasReset();
window.addEventListener("resize", this.canvasReset); window.addEventListener("resize", this.canvasReset);
}, },
@@ -249,7 +274,7 @@ export default {
this.chart.dispose(); this.chart.dispose();
} }
this.chart = echarts.init(this.$refs.chart); this.chart = echarts.init(this.$refs.chart);
this.chart.setOption(this.actualOptions); this.chart.setOption(this.options);
}, },
}, },
}; };

View File

@@ -8,9 +8,7 @@
<template> <template>
<div class="copilot-container"> <div class="copilot-container">
<!-- refresh btn --> <!-- refresh btn -->
<button <button v-if="0" style="
v-if="0"
style="
appearance: none; appearance: none;
outline: none; outline: none;
border: none; border: none;
@@ -20,22 +18,11 @@
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 8px; right: 8px;
" " @click="$emit('refresh')">
@click="$emit('refresh')" <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
> style="width: 24px; height: 24px">
<svg <path stroke-linecap="round" stroke-linejoin="round"
xmlns="http://www.w3.org/2000/svg" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
style="width: 24px; height: 24px"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg> </svg>
</button> </button>
<!-- decoration --> <!-- decoration -->
@@ -44,19 +31,13 @@
<div v-if="side == 'left'" class="corner bl"></div> <div v-if="side == 'left'" class="corner bl"></div>
<div v-if="side == 'right'" class="corner br"></div> <div v-if="side == 'right'" class="corner br"></div>
<!-- content --> <!-- content -->
<div <div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
class="container-head" <Icon style="margin-left: 16px;" :icon="icon"></Icon>
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
>
<Icon :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2> <h2 class="container-title">{{ title }}</h2>
</div> </div>
<div <div class="container-body" :class="[
class="container-body"
:class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left', side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]" ]">
>
<slot /> <slot />
</div> </div>
</div> </div>

View File

@@ -12,7 +12,7 @@
<div class="page-title">{{ companyName }}</div> <div class="page-title">{{ companyName }}</div>
<section class="menu2"> <section class="menu2">
<div class="btn-group"> <div class="btn-group">
<el-tooltip class="item" effect="dark" content="导出" placement="top"> <el-tooltip v-if="showPeriod" class="item" effect="dark" content="导出" placement="top">
<button type="button" class="export-btn" @click="handleExport" /> <button type="button" class="export-btn" @click="handleExport" />
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="dark" :content="isFullscreen === false ? '退出全屏' : '全屏'" placement="top"> <el-tooltip class="item" effect="dark" :content="isFullscreen === false ? '退出全屏' : '全屏'" placement="top">
@@ -48,10 +48,20 @@ export default {
type: String, type: String,
}, },
}, },
watch: {
period(val) {
if (val != 1) {
this.showPeriod = true
} else {
this.showPeriod = false
}
}
},
data() { data() {
return { return {
isFullscreen: false, isFullscreen: false,
content:'全屏', content: '全屏',
showPeriod:false,
dataList: [ dataList: [
{ id: 1, name: "日" }, { id: 1, name: "日" },
{ id: 2, name: "周" }, { id: 2, name: "周" },
@@ -63,7 +73,8 @@ export default {
computed: {}, computed: {},
methods: { methods: {
handleExport() { handleExport() {
if (this.period != 1) { // if (this.period != 1) {
this.showPeriod = true
exportFactoryDataExcel({ exportFactoryDataExcel({
factoryId: this.companyId, factoryId: this.companyId,
timeSelection: this.period === 1 ? 0 : this.period === 2 ? 1 : this.period === 3 ? 2 : 3, timeSelection: this.period === 1 ? 0 : this.period === 2 ? 1 : this.period === 3 ? 2 : 3,
@@ -72,12 +83,9 @@ export default {
this.$download.excel(response, `${this.companyName}生产数据.xls`); this.$download.excel(response, `${this.companyName}生产数据.xls`);
// this.exportLoading = false; // this.exportLoading = false;
}).catch(() => { }); }).catch(() => { });
} else { // } else {
this.$message({ // this.showPeriod = false
type: 'warning', // }
message: '为日的情况下没有导出功能',
})
}
}, },
toggleFullScreen() { toggleFullScreen() {

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-06-04 08:54:10 * @LastEditTime: 2024-07-03 14:08:52
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -63,7 +63,32 @@ export default {
top: "15%", top: "15%",
containLabel: true, containLabel: true,
}, },
tooltip: {}, tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
xAxis: { xAxis: {
axisTick: { axisTick: {
show: false, show: false,
@@ -189,13 +214,13 @@ export default {
this.canvasReset() this.canvasReset()
}, },
isFullscreen(val) { isFullscreen(val) {
this.actualOptions.series.map((item) => { this.options.series.map((item) => {
item.barWidth = val ? 18 : 12; item.barWidth = val ? 18 : 12;
}); });
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions); this.initChart(this.options);
// this.actualOptions.series.map((item) => { // this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12; // item.barWidth = val ? 18 : 12;
// }); // });
@@ -210,14 +235,14 @@ export default {
this.initChart(this.options); this.initChart(this.options);
return; return;
} }
const actualOptions = JSON.parse(JSON.stringify(this.options)); // const actualOptions = JSON.parse(JSON.stringify(this.options));
console.log('actualOptions', this.options) // console.log('actualOptions', this.options)
actualOptions.series[0].data = val[0].data; this.options.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name; this.options.series[0].name = val[0].name;
actualOptions.series[1].data = val[1].data; this.options.series[1].data = val[1].data;
actualOptions.series[1].name = val[1].name; this.options.series[1].name = val[1].name;
this.actualOptions = actualOptions; // this.actualOptions = actualOptions;
this.initChart(actualOptions); this.initChart(this.options);
}, },
}, },
mounted() { mounted() {
@@ -226,7 +251,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen; this.isFullscreen = screenfull.isFullscreen;
}); });
} }
this.actualOptions = this.options // this.actualOptions = this.options
this.canvasReset(); this.canvasReset();
window.addEventListener("resize", this.canvasReset); window.addEventListener("resize", this.canvasReset);
}, },
@@ -250,7 +275,7 @@ export default {
this.chart.dispose(); this.chart.dispose();
} }
this.chart = echarts.init(this.$refs.ftoChart); this.chart = echarts.init(this.$refs.ftoChart);
this.chart.setOption(this.actualOptions); this.chart.setOption(this.options);
}, },
}, },
}; };

View File

@@ -8,9 +8,7 @@
<template> <template>
<div class="copilot-container"> <div class="copilot-container">
<!-- refresh btn --> <!-- refresh btn -->
<button <button v-if="false" style="
v-if="false"
style="
appearance: none; appearance: none;
outline: none; outline: none;
border: none; border: none;
@@ -20,43 +18,26 @@
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 8px; right: 8px;
" " @click="$emit('refresh')">
@click="$emit('refresh')" <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
> style="width: 24px; height: 24px">
<svg <path stroke-linecap="round" stroke-linejoin="round"
xmlns="http://www.w3.org/2000/svg" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
style="width: 24px; height: 24px"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg> </svg>
</button> </button>
<!-- decoration --> <!-- decoration -->
<div class="corner tl"></div> <div class="corner tl"></div>
<div class="corner tr"></div> <div class="corner tr"></div>
<div class="corner bl"></div> <div class="corner bl"></div>
<div class="corner br"></div> <div class="corner br"></div>
<!-- content --> <!-- content -->
<div <div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
class="container-head" <Icon style="margin-left: 16px;" :icon="icon"></Icon>
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
>
<Icon :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2> <h2 class="container-title">{{ title }}</h2>
</div> </div>
<div <div class="container-body" :class="[
class="container-body"
:class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left', side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]" ]">
>
<slot /> <slot />
</div> </div>
</div> </div>

View File

@@ -8,9 +8,7 @@
<template> <template>
<div class="copilot-container"> <div class="copilot-container">
<!-- refresh btn --> <!-- refresh btn -->
<button <button v-if="false" style="
v-if="false"
style="
appearance: none; appearance: none;
outline: none; outline: none;
border: none; border: none;
@@ -20,43 +18,26 @@
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 8px; right: 8px;
" " @click="$emit('refresh')">
@click="$emit('refresh')" <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
> style="width: 24px; height: 24px">
<svg <path stroke-linecap="round" stroke-linejoin="round"
xmlns="http://www.w3.org/2000/svg" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
style="width: 24px; height: 24px"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg> </svg>
</button> </button>
<!-- decoration --> <!-- decoration -->
<div class="corner tl"></div> <div class="corner tl"></div>
<div class="corner tr"></div> <div class="corner tr"></div>
<div class="corner bl"></div> <div class="corner bl"></div>
<div class="corner br"></div> <div class="corner br"></div>
<!-- content --> <!-- content -->
<div <div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
class="container-head" <Icon style="margin-left: 16px;" :icon="icon"></Icon>
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
>
<Icon :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2> <h2 class="container-title">{{ title }}</h2>
</div> </div>
<div <div class="container-body" :class="[
class="container-body"
:class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left', side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]" ]">
>
<slot /> <slot />
</div> </div>
</div> </div>

View File

@@ -55,7 +55,7 @@
class="container-head" class="container-head"
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
> >
<Icon :icon="icon"></Icon> <Icon :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2> <h2 class="container-title">{{ title }}</h2>
</div> </div>
<div <div

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-06-17 09:22:17 * @LastEditTime: 2024-07-05 09:50:14
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -62,7 +62,32 @@ export default {
top: "15%", top: "15%",
containLabel: true, containLabel: true,
}, },
tooltip: {}, tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
}
return res;
},
},
xAxis: { xAxis: {
axisTick: { axisTick: {
show: false, show: false,
@@ -241,7 +266,7 @@ export default {
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions) this.initChart(this.options)
this.canvasReset() this.canvasReset()
}, },
series(val) { series(val) {
@@ -252,14 +277,14 @@ export default {
// console.log('val', val) // console.log('val', val)
const actualOptions = JSON.parse(JSON.stringify(this.options)) const actualOptions = JSON.parse(JSON.stringify(this.options))
console.log(actualOptions) console.log(actualOptions)
actualOptions.series[0].data = val[0].data; this.options.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name; this.options.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data; this.options.series[1].data = val?.[1]?.data;
actualOptions.series[1].name = val?.[1]?.name; this.options.series[1].name = val?.[1]?.name;
actualOptions.series[2].data = val?.[2]?.data || []; this.options.series[2].data = val?.[2]?.data || [];
actualOptions.series[2].name = val?.[2]?.name || ""; this.options.series[2].name = val?.[2]?.name || "";
this.actualOptions = actualOptions; this.actualOptions = actualOptions;
this.initChart(actualOptions); this.initChart(this.options);
}, },
}, },
mounted() { mounted() {
@@ -273,7 +298,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen; this.isFullscreen = screenfull.isFullscreen;
}); });
} }
this.actualOptions = this.options // this.actualOptions = this.options
this.canvasReset(); this.canvasReset();
window.addEventListener("resize", this.canvasReset); window.addEventListener("resize", this.canvasReset);
}, },
@@ -296,7 +321,7 @@ export default {
this.chart.dispose(); this.chart.dispose();
} }
this.chart = echarts.init(this.$refs.oeeChart); this.chart = echarts.init(this.$refs.oeeChart);
this.chart.setOption(this.actualOptions); this.chart.setOption(this.options);
}, },
}, },
}; };

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-06-17 09:23:39 * @LastEditTime: 2024-07-05 09:49:35
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -62,7 +62,32 @@ export default {
top: "15%", top: "15%",
containLabel: true, containLabel: true,
}, },
tooltip: {}, tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
}
return res;
},
},
xAxis: { xAxis: {
axisTick: { axisTick: {
show: false, show: false,
@@ -241,7 +266,7 @@ export default {
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions) this.initChart(this.options)
this.canvasReset() this.canvasReset()
}, },
series(val) { series(val) {
@@ -250,15 +275,15 @@ export default {
return; return;
} }
console.log(val) console.log(val)
const actualOptions = JSON.parse(JSON.stringify(this.options)) // const actualOptions = JSON.parse(JSON.stringify(this.options))
actualOptions.series[0].data = val[0].data; this.options.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name; this.options.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data || []; this.options.series[1].data = val?.[1]?.data || [];
actualOptions.series[1].name = val?.[1]?.name || ""; this.options.series[1].name = val?.[1]?.name || "";
actualOptions.series[2].data = val?.[2]?.data || []; this.options.series[2].data = val?.[2]?.data || [];
actualOptions.series[2].name = val?.[2]?.name || ""; this.options.series[2].name = val?.[2]?.name || "";
this.actualOptions = actualOptions; // this.actualOptions = actualOptions;
this.initChart(actualOptions); this.initChart(this.options);
}, },
}, },
mounted() { mounted() {
@@ -272,7 +297,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen; this.isFullscreen = screenfull.isFullscreen;
}); });
} }
this.actualOptions = this.options // this.actualOptions = this.options
this.canvasReset(); this.canvasReset();
window.addEventListener("resize", this.canvasReset); window.addEventListener("resize", this.canvasReset);
}, },
@@ -295,7 +320,7 @@ export default {
this.chart.dispose(); this.chart.dispose();
} }
this.chart = echarts.init(this.$refs.oeeChart); this.chart = echarts.init(this.$refs.oeeChart);
this.chart.setOption(this.actualOptions); this.chart.setOption(this.options);
}, },
}, },
}; };

View File

@@ -318,6 +318,8 @@ export default {
.legend-item { .legend-item {
margin-left: 15px; margin-left: 15px;
display: flex; display: flex;
font-size: 16px;
// font-weight: 600;
flex-direction: column; flex-direction: column;
// align-items: center; // align-items: center;
align-items: flex-start; align-items: flex-start;
@@ -371,8 +373,6 @@ export default {
background: #003982; background: #003982;
} }
.legend-item__value { .legend-item__value {
font-size: 24px;
font-weight: 600;
} }
} }
</style> </style>

View File

@@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-07 10:04:53 * @Date: 2024-05-07 10:04:53
* @LastEditTime: 2024-06-05 09:45:47 * @LastEditTime: 2024-07-01 12:27:45
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -102,12 +102,12 @@ export default {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 20px;
} }
.flex { .flex {
display: flex; display: flex;
gap: 16px; gap: 20px;
flex: 1; flex: 1;
} }

View File

@@ -1,4 +1,4 @@
export default ({ export default ({
titleValue, titleValue,
subtitle, subtitle,
previousSum, previousSum,
@@ -15,7 +15,12 @@ export default ({
top: 0, top: 0,
containLabel: true, containLabel: true,
}, },
tooltip: {}, tooltip: {
trigger: "item",
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
},
title: { title: {
text: titleValue, text: titleValue,
left: "48%", left: "48%",
@@ -23,12 +28,12 @@ export default ({
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
fontWeight: 600, fontWeight: 600,
fontSize: 26, fontSize: 36,
color: "#fffd", color: "#fffd",
}, },
subtext: `\u2002${yesterday + '日良率'}\u2002`, subtext: `\u2002${yesterday + '日良率'}\u2002`,
subtextStyle: { subtextStyle: {
fontSize: 14, fontSize: 16,
fontWeight: 100, fontWeight: 100,
color: "#fffd", color: "#fffd",
align: "right", align: "right",
@@ -62,7 +67,8 @@ export default ({
value: currentSum, value: currentSum,
name: currentName, name: currentName,
tooltip: { tooltip: {
formatter: `${currentName} : ${currentSum}` formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
}, },
selected: false, selected: false,
itemStyle: { itemStyle: {
@@ -87,7 +93,8 @@ export default ({
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum), value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
name: currentName, name: currentName,
tooltip: { tooltip: {
formatter: `${currentName} : ${currentSum}` formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
}, },
itemStyle: { color: "transparent" }, itemStyle: { color: "transparent" },
label: { show: false }, label: { show: false },
@@ -111,7 +118,8 @@ export default ({
value: previousSum, value: previousSum,
name: preName, name: preName,
tooltip: { tooltip: {
formatter: `${preName} : ${previousSum}` formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
}, },
selected: false, selected: false,
itemStyle: { itemStyle: {
@@ -136,7 +144,8 @@ export default ({
value:previousSum === 0 ? 1 : 0, value:previousSum === 0 ? 1 : 0,
name: preName, name: preName,
tooltip: { tooltip: {
formatter: `${preName} : ${previousSum}` formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
}, },
itemStyle: { color: "transparent" }, itemStyle: { color: "transparent" },
label: { show: false }, label: { show: false },

View File

@@ -55,13 +55,35 @@ export default {
options: { options: {
color: ["#FFD160", "#2760FF", "#12FFF5"], color: ["#FFD160", "#2760FF", "#12FFF5"],
grid: { grid: {
left: "7%", left: "6%",
right: "7%", right: "3%",
bottom: "15%", bottom: "15%",
top: "15%", top: "15%",
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = ``;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
}, },
xAxis: { xAxis: {
axisTick: { axisTick: {
@@ -95,6 +117,7 @@ export default {
yAxis: { yAxis: {
type: "value", type: "value",
name: "单位/片", name: "单位/片",
position: 'left',
nameTextStyle: { nameTextStyle: {
color: "rgba(255, 255, 255, 0.7)", color: "rgba(255, 255, 255, 0.7)",
fontSize: 12, fontSize: 12,
@@ -396,11 +419,11 @@ export default {
this.chart.dispose(); this.chart.dispose();
} }
this.chart = echarts.init(document.getElementById("factoryEnergyChart")); this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
const actualOptions = JSON.parse(JSON.stringify(this.options)); // const actualOptions = JSON.parse(JSON.stringify(this.options));
actualOptions.xAxis.data = this.orderXAxis; this.options.xAxis.data = this.orderXAxis;
actualOptions.series[0].data = this.data; this.options.series[0].data = this.data;
this.actualOptions = actualOptions; // this.actualOptions = actualOptions;
this.chart.setOption(actualOptions); this.chart.setOption(this.options);
}, },
}, },
}; };

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-06-07 09:29:45 * @LastEditTime: 2024-07-03 14:10:06
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -62,7 +62,59 @@ export default {
top: "15%", top: "15%",
containLabel: true, containLabel: true,
}, },
tooltip: {}, // tooltip: {
// trigger: "axis",
// axisPointer: {
// // type: "cross",
// crossStyle: {
// color: "rgba(237,237,237,0.5)",
// },
// },
// extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
// backgroundColor: '#001829',
// borderColor: '#001829',
// // textStyle: {
// // color:'rgba(255, 255, 255, 0.85)'
// // },
// formatter: params => {
// console.log('params', params)
// var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
// for (var i = 0, l = params.length; i < l; i++) {
// res +=
// "<br/>" +
// `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
// `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].seriesName}</span>` +
// `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value}</span>`;
// }
// return res;
// },
// },
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
xAxis: { xAxis: {
axisTick: { axisTick: {
show: false, show: false,
@@ -80,6 +132,7 @@ export default {
}, },
yAxis: { yAxis: {
name: "单位/片", name: "单位/片",
position: 'left',
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,
@@ -201,12 +254,12 @@ export default {
}, },
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ /** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) { isFullscreen(val) {
this.actualOptions.series.map((item) => { this.options.series.map((item) => {
item.barWidth = val ? 18 : 12; item.barWidth = val ? 18 : 12;
}); });
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// if (val === false && this.isOpen === true) { // if (val === false && this.isOpen === true) {
// console.log(val) // console.log(val)
// this.width = 97 + '%' // this.width = 97 + '%'
@@ -221,7 +274,7 @@ export default {
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions) this.initChart(this.options)
this.canvasReset() this.canvasReset()
}, },
series(val) { series(val) {
@@ -231,16 +284,17 @@ export default {
} }
// console.log('val', val) // console.log('val', val)
const actualOptions = JSON.parse(JSON.stringify(this.options)) const actualOptions = JSON.parse(JSON.stringify(this.options))
console.log(actualOptions);
// actualOptions.xAxis.data = val // actualOptions.xAxis.data = val
console.log(actualOptions) console.log(actualOptions)
actualOptions.series[0].data = val[0].data; this.options.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name; this.options.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data; this.options.series[1].data = val?.[1]?.data;
actualOptions.series[1].name = val?.[1]?.name; this.options.series[1].name = val?.[1]?.name;
actualOptions.series[2].data = val?.[2]?.data || []; this.options.series[2].data = val?.[2]?.data || [];
actualOptions.series[2].name = val?.[2]?.name || ""; this.options.series[2].name = val?.[2]?.name || "";
this.actualOptions = actualOptions; this.actualOptions = actualOptions;
this.initChart(actualOptions); this.initChart(this.options);
}, },
}, },
mounted() { mounted() {
@@ -277,27 +331,28 @@ export default {
this.chart.dispose(); this.chart.dispose();
} }
this.chart = echarts.init(this.$refs.oeeChart); this.chart = echarts.init(this.$refs.oeeChart);
this.chart.setOption(this.actualOptions); this.chart.setOption(this.options);
}, },
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.bar-chart-base { .bar-chart-base {
// position: relative; // position: relative;
.legend { .legend {
position: absolute; position: absolute;
top: 5.2vh; top: 3vh;
right: 1vw; right: 13vw;
} }
.legend-item { .legend-item {
position: relative; position: relative;
// font-size: 12px; // font-size: 12px;
margin-right:1.2vw; margin-right:1.2vw;
color: #DFF1FE;
&::before { &::before {
content: ""; content: "";
display: inline-block; display: inline-block;
@@ -347,4 +402,8 @@ export default {
transform: translateY(-50%) translateX(50%); transform: translateY(-50%) translateX(50%);
} }
} }
.echarts-tooltip-dark {
background: #001829;
}
</style> </style>

View File

@@ -8,7 +8,7 @@
<span class="title">工单情况</span> <span class="title">工单情况</span>
<span class="line"></span> <span class="line"></span>
</div> </div>
<div class="button-type" style="margin-left: auto;position: absolute;right: 1%;top: 57%;z-index: 999;"> <div class="button-type" style="margin-left: auto;position: absolute;right: 3%;top: 57%;z-index: 999;">
<CopilotButton v-for="i in ['目标产量', '计划投入', '实际投入', '实际产出', '废品数量', '待再加工']" :key="i" :label="i" <CopilotButton v-for="i in ['目标产量', '计划投入', '实际投入', '实际产出', '废品数量', '待再加工']" :key="i" :label="i"
:active="i === type" @click="() => $emit('update:type', i)" /> :active="i === type" @click="() => $emit('update:type', i)" />
</div> </div>
@@ -40,6 +40,7 @@ export default {
evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)", evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
data: [], data: [],
rowNum: 12, rowNum: 12,
fontSize:14,
waitTime: 3000, waitTime: 3000,
columnWidth: [150], columnWidth: [150],
align: ["left"], align: ["left"],
@@ -113,19 +114,19 @@ export default {
`<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || "" `<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
}</span>`, }</span>`,
`<span style="display:inline-block;width:45px;">${this.prodOrder[i].productionProgress `<span style="display:inline-block;width:45px;">${this.prodOrder[i].productionProgress
? this.prodOrder[i].productionProgress.toFixed(0) + "%" ? 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;margin-top:-5px;vertical-align:middle;">
<svg xmlns="http://www.w3.org/200/svg" height="20" width="20"> <svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
<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(0) * ? this.prodOrder[i].productionProgress.toFixed(2) *100 *
37.68 * 37.68 *
0.01 + 0.01 +
"," + "," +
(1 - (1 -
this.prodOrder[i].productionProgress.toFixed(0) * 0.01) * this.prodOrder[i].productionProgress.toFixed(2) * 0.01) * 100 *
37.68 37.68
: 0 + "," + 37.68 : 0 + "," + 37.68
}"/> }"/>
@@ -188,7 +189,7 @@ 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) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%, ) 2 2; border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 0%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%, ) 2 2;
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
} }
} }

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>
@@ -118,7 +118,11 @@
<div class="chart"> <div class="chart">
<div class="chart-title"> <div class="chart-title">
<span class="title">生产情况</span> <span class="title">生产情况</span>
<span class="line"></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> </div>
<barChartBase :companyId="companyId" :than="than" :period="period" :data="factoryData" ref="barChart" <barChartBase :companyId="companyId" :than="than" :period="period" :data="factoryData" ref="barChart"
style="height: 0;flex:1"> style="height: 0;flex:1">
@@ -129,10 +133,12 @@
<script> <script>
import { number } from 'echarts'; import { number } from 'echarts';
import barChartBase from './ChipOee' import barChartBase from './ChipOee'
import CopilotButton from "./button.vue"
export default { export default {
name: "ProdMonitor", name: "ProdMonitor",
components: { components: {
barChartBase, barChartBase,
CopilotButton
}, },
data() { data() {
return { return {
@@ -153,6 +159,9 @@ export default {
type: Number, type: Number,
default:0 default:0
}, },
than: {
type: String,
},
than: { than: {
type: String, type: String,
default: '同比', default: '同比',
@@ -181,6 +190,13 @@ export default {
}, },
mounted() { mounted() {
this.makeData(); this.makeData();
this.$nextTick(() => {
let button = document.getElementsByClassName('button-than')
console.log(button);
button[0].children[0].style.borderRadius = '4px 0 0 4px'
button[0].children[1].style.borderRadius = '0px 4px 4px 0'
console.log(button[0].children[0].style);
})
}, },
methods: { methods: {
makeData() { makeData() {
@@ -233,19 +249,19 @@ export default {
// width: 5vw; // width: 5vw;
color: #FFFFFF; color: #FFFFFF;
line-height: 24px; line-height: 24px;
text-align: left; // text-align: left;
font-style: normal; font-style: normal;
display: inline-block; display: inline-block;
} }
.line{ // .line{
flex: 1; // flex: 1;
// width: 80%; // // width: 80%;
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) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%,) 2 2; // 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); // backdrop-filter: blur(3px);
} // }
} }
} }
.data{ .data{

View File

@@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-06-06 14:22:56 * @Date: 2024-06-06 14:22:56
* @LastEditTime: 2024-06-07 10:53:39 * @LastEditTime: 2024-07-02 13:54:08
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -62,7 +62,7 @@ button {
font-size: 16px; font-size: 16px;
color: #FFFFFF; color: #FFFFFF;
line-height: 22px; line-height: 22px;
letter-spacing: 5px; /* letter-spacing: 5px; */
text-align: center; text-align: center;
font-style: normal; font-style: normal;
letter-spacing: 10px; letter-spacing: 10px;

View File

@@ -15,9 +15,7 @@
<template> <template>
<div class="copilot-container"> <div class="copilot-container">
<!-- refresh btn --> <!-- refresh btn -->
<button <button v-if="false" style="
v-if="false"
style="
appearance: none; appearance: none;
outline: none; outline: none;
border: none; border: none;
@@ -27,43 +25,26 @@
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 8px; right: 8px;
" " @click="$emit('refresh')">
@click="$emit('refresh')" <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
> style="width: 24px; height: 24px">
<svg <path stroke-linecap="round" stroke-linejoin="round"
xmlns="http://www.w3.org/2000/svg" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
style="width: 24px; height: 24px"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg> </svg>
</button> </button>
<!-- decoration --> <!-- decoration -->
<div class="corner tl"></div> <div class="corner tl"></div>
<div class="corner tr"></div> <div class="corner tr"></div>
<div class="corner bl"></div> <div class="corner bl"></div>
<div class="corner br"></div> <div class="corner br"></div>
<!-- content --> <!-- content -->
<div <div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
class="container-head" <Icon style="margin-left: 16px;" :icon="icon"></Icon>
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
>
<Icon :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2> <h2 class="container-title">{{ title }}</h2>
</div> </div>
<div <div class="container-body" :class="[
class="container-body"
:class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left', side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]" ]">
>
<slot /> <slot />
</div> </div>
</div> </div>
@@ -135,7 +116,12 @@ export default {
border-radius: 2px; border-radius: 2px;
left: 8%; left: 8%;
bottom: 0; bottom: 0;
background: linear-gradient(to right, #024798, transparent); background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
z-index: 0; z-index: 0;
} }

View File

@@ -33,12 +33,8 @@
<!-- content --> <!-- content -->
<div class="container-head" ref="container-head" <div class="container-head" ref="container-head"
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"> :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon :icon="icon"></Icon> <Icon :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2> <h2 class="container-title">{{ title }}</h2>
<div class="button-than" style="margin-left: auto;">
<CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
@click="() => $emit('update:than', i)" />
</div>
</div> </div>
<div class="container-body" :class="[ <div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left', side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
@@ -50,12 +46,10 @@
<script> <script>
import ContainerIconVue from "./ContainerIcon.vue" import ContainerIconVue from "./ContainerIcon.vue"
import CopilotButton from "./button.vue"
export default { export default {
name: "DashboardContainer", name: "DashboardContainer",
components: { components: {
Icon: ContainerIconVue, Icon: ContainerIconVue,
CopilotButton
}, },
props: { props: {
side: { side: {
@@ -66,9 +60,6 @@ export default {
type: String, type: String,
default: "cube", default: "cube",
}, },
than: {
type: String,
},
title: { title: {
type: String, type: String,
default: "Default Title", default: "Default Title",
@@ -80,13 +71,7 @@ export default {
}, },
computed: {}, computed: {},
mounted() { mounted() {
this.$nextTick(() => {
let button = document.getElementsByClassName('button-than')
console.log(button);
button[0].children[0].style.borderRadius = '4px 0 0 4px'
button[0].children[1].style.borderRadius = '0px 4px 4px 0'
console.log(button[0].children[0].style);
})
}, },
methods: {}, methods: {},
}; };
@@ -94,14 +79,13 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 0; height: 100%;
flex: 1; flex: 1;
display: flex; display: flex;
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;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;

View File

@@ -4,9 +4,9 @@
@update:than="updateThan" @update:period="updatePeriod" /> @update:than="updateThan" @update:period="updatePeriod" />
<div class="factory-section"> <div class="factory-section">
<section class="top flex"> <section class="top flex">
<db-container title="生产监控" icon="prod" @update:than="updateThan" :than="than"> <db-container title="生产监控" icon="prod">
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" <prod-monitor @update:than="updateThan" :companyId="companyId" :factoryData="factoryData" :than="than"
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> :period="period" :data="data" :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
</db-container> </db-container>
<left-container title="工单监控" icon="order"> <left-container title="工单监控" icon="order">
<order @update:type="updateType" :type="type" :prodOrder="prodOrder" /> <order @update:type="updateType" :type="type" :prodOrder="prodOrder" />
@@ -88,7 +88,7 @@ export default {
updateThan(val) { updateThan(val) {
console.log(val); console.log(val);
this.than = val; this.than = val;
// this.getMes(); this.getMes()
}, },
updatePeriod(val) { updatePeriod(val) {
this.period = val; this.period = val;

View File

@@ -4,9 +4,9 @@
@update:period="updatePeriod" /> @update:period="updatePeriod" />
<div class="factory-section"> <div class="factory-section">
<section class="top flex"> <section class="top flex">
<db-container title="生产监控" icon="prod" @update:than="updateThan" :than="than"> <db-container title="生产监控" icon="prod">
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" <prod-monitor @update:than="updateThan" :than="than" :companyId="companyId" :factoryData="factoryData"
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> :period="period" :data="data" :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
</db-container> </db-container>
<left-container title="工单监控" icon="order"> <left-container title="工单监控" icon="order">
<order @update:type="updateType" :type="type" :prodOrder="prodOrder" /> <order @update:type="updateType" :type="type" :prodOrder="prodOrder" />

View File

@@ -42,10 +42,11 @@ export default {
return { return {
factoryId: 4, // 默认成都 factoryId: 4, // 默认成都
cityOptions: [ cityOptions: [
"瑞昌",
// "成都", // "成都",
"邯郸", "邯郸",
// "株洲", // "株洲",
"瑞昌",
// "佳木斯", // "佳木斯",
// "凯盛光伏", // "凯盛光伏",
// "蚌埠兴科", // "蚌埠兴科",

View File

@@ -14,15 +14,20 @@ export default ({
top: 0, top: 0,
containLabel: true, containLabel: true,
}, },
tooltip: {}, tooltip: {
trigger: "item",
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
},
title: { title: {
text: titleValue, text: titleValue,
left: "48%", left: "48.5%",
top: "37%", top: "37%",
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
fontWeight: 600, fontWeight: 600,
fontSize: 20, fontSize: 26,
color: "#fffd", color: "#fffd",
}, },
subtext: `\u2002${subtitle}\u2002`, subtext: `\u2002${subtitle}\u2002`,
@@ -62,7 +67,8 @@ export default ({
name: currentName, name: currentName,
selected: false, selected: false,
tooltip: { tooltip: {
formatter: `${currentName} : ${currentSum}` formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
}, },
itemStyle: { itemStyle: {
borderJoin: "round", borderJoin: "round",
@@ -86,7 +92,8 @@ export default ({
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum), value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
name: currentName, name: currentName,
tooltip: { tooltip: {
formatter: `${currentName} : ${currentSum}` formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
}, },
itemStyle: { color: "transparent" }, itemStyle: { color: "transparent" },
label: { show: false }, label: { show: false },
@@ -111,7 +118,8 @@ export default ({
name: preName, name: preName,
selected: false, selected: false,
tooltip: { tooltip: {
formatter: `${preName} : ${previousSum}` formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
}, },
itemStyle: { itemStyle: {
borderJoin: "round", borderJoin: "round",
@@ -136,7 +144,8 @@ export default ({
value:previousSum === 0 ? 1 : 0, value:previousSum === 0 ? 1 : 0,
name: preName, name: preName,
tooltip: { tooltip: {
formatter: `${preName} : ${previousSum}` formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
}, },
itemStyle: { color: "transparent" }, itemStyle: { color: "transparent" },
label: { show: false }, label: { show: false },

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-14 09:03:26 * @LastEditTime: 2024-07-04 08:38:11
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -53,7 +53,32 @@ export default {
top: 0, top: 0,
containLabel: true, containLabel: true,
}, },
tooltip: {}, tooltip: {
trigger: "item",
// axisPointer: {
// // type: "cross",
// crossStyle: {
// color: "rgba(237,237,237,0.5)",
// },
// },
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
// formatter: params => {
// console.log('params', params)
// var res = ``;
// for (var i = 0, l = params.length; i < l; i++) {
// let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// // console.log(item.color, color);
// res +=
// // `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
// `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` +
// `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
// }
// console.log('res',res)
// return res;
// },
},
title: { title: {
text: "0%", text: "0%",
left: "48%", left: "48%",
@@ -223,40 +248,49 @@ export default {
actualOptions() { actualOptions() {
console.log('this.output.current / this.output.target', this.output.current/this.output.target); console.log('this.output.current / this.output.target', this.output.current/this.output.target);
const year = new Date().getFullYear() const year = new Date().getFullYear()
const options = JSON.parse(JSON.stringify(this.options)); const options = this.options
// console.log('options', options); // console.log('options', options);
// 标题 // 标题
if (!this.output.target) options.title.text = "0%"; if (!this.output.target && !this.output.current) options.title.text = "0%";
else else if (!this.output.target && this.output.current) options.title.text = "100%";
options.title.text = else options.title.text =
((this.output.current / this.output.target).toFixed(2)) * 100 + "%"; ((this.output.current / this.output.target).toFixed(2)) * 100 + "%";
// 外环 // 外环
if ( if (
this.output.current == this.output.target && this.output.current == this.output.target &&
this.output.current == 0 this.output.current == 0
) { ) {
options.series[1].data[0].value = 0; this.options.series[1].data[0].value = 0;
options.series[1].data[1].value = 1; this.options.series[1].data[1].value = 1;
options.series[1].data[0].tooltip.formatter = year + '累计完成:0'; this.options.series[1].data[0].tooltip.formatter =
options.series[1].data[1].tooltip.formatter = year + '累计完成:0'; `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
this.options.series[1].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
} else { } else {
options.series[1].data[0].value = this.output.current; this.options.series[1].data[0].value = this.output.current;
options.series[1].data[1].value = this.options.series[1].data[1].value =
this.output.target - this.output.current; this.output.target - this.output.current;
options.series[1].data[0].tooltip.formatter = year + '累计完成:' + this.output.current; this.options.series[1].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
options.series[1].data[1].tooltip.formatter = year + '累计完成:' + this.output.current; `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`;
this.options.series[1].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`;
} }
// 内环 // 内环
if (this.output.previous == 0) { if (this.output.previous == 0) {
options.series[2].data[0].value = 0; this.options.series[2].data[0].value = 0;
options.series[2].data[1].value = 1; this.options.series[2].data[1].value = 1;
options.series[2].data[0].tooltip.formatter = year-1 + '累计完成:' + 0; this.options.series[2].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
options.series[2].data[1].tooltip.formatter = year-1 + '累计完成:' + 0; `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
this.options.series[2].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
} else { } else {
options.series[2].data[0].value = this.output.previous; this.options.series[2].data[0].value = this.output.previous;
options.series[2].data[1].value = 0; this.options.series[2].data[1].value = 0;
options.series[2].data[0].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous; this.options.series[2].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
options.series[2].data[1].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous; `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`;
this.options.series[2].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year - 1 + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`;
} }
console.log('options', options); console.log('options', options);
return options; return options;
@@ -274,6 +308,9 @@ export default {
factory(val) { factory(val) {
this.initOptions(this.actualOptions); this.initOptions(this.actualOptions);
}, },
actualOptions() {
this.initOptions(this.actualOptions);
}
}, },
mounted() { mounted() {
console.log("mounted", this.actualOptions); console.log("mounted", this.actualOptions);

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-05-31 16:11:06 * @LastEditTime: 2024-06-27 16:30:58
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
<!--
filename: fto.vue
author: liubin
date: 2024-04-10 08:59:28
description:
-->
<template> <template>
<left-chart-base <left-chart-base

View File

@@ -12,7 +12,7 @@
v-for="item in legend" v-for="item in legend"
:key="item.label" :key="item.label"
class="legend-item" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }" :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }"
>{{ item.label }}</span >{{ item.label }}</span
> >
</div> </div>
@@ -65,7 +65,32 @@ export default {
top: "15%", top: "15%",
containLabel: true, containLabel: true,
}, },
tooltip: {}, tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
xAxis: { xAxis: {
axisTick: { axisTick: {
show: false, show: false,
@@ -77,15 +102,16 @@ export default {
}, },
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 14,
}, },
data: this.xAxis, data: this.xAxis,
}, },
yAxis: { yAxis: {
name: "单位/片", name: "单位/片",
position:'left',
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 14,
align:'right' align:'right'
}, },
axisTick: { axisTick: {
@@ -93,7 +119,7 @@ export default {
}, },
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 14,
}, },
axisLine: { axisLine: {
show: true, show: true,
@@ -118,7 +144,7 @@ export default {
position: 'top', //在上方显示 position: 'top', //在上方显示
textStyle: { //数值样式 textStyle: { //数值样式
color: '#DFF1FE', color: '#DFF1FE',
fontSize: 12 fontSize: 14
} }
}, },
itemStyle: { itemStyle: {
@@ -162,7 +188,7 @@ export default {
position: 'top', //在上方显示 position: 'top', //在上方显示
textStyle: { //数值样式 textStyle: { //数值样式
color: '#DFF1FE', color: '#DFF1FE',
fontSize: 12 fontSize: 14
} }
}, },
itemStyle: { itemStyle: {
@@ -201,9 +227,9 @@ export default {
this.actualOptions.series.map((item) => { this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12; item.barWidth = val ? 18 : 12;
}); });
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 14;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 14;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 14;
this.initOptions(this.actualOptions); this.initOptions(this.actualOptions);
}, },
series(val) { series(val) {

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-21 15:02:27 * @LastEditTime: 2024-07-03 14:13:59
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -19,7 +19,7 @@
v-for="item in legend" v-for="item in legend"
:key="item.label" :key="item.label"
class="legend-item" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }" :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }"
>{{ item.label }}</span >{{ item.label }}</span
> >
</div> </div>
@@ -71,7 +71,32 @@ export default {
top: "18%", top: "18%",
containLabel: true, containLabel: true,
}, },
tooltip: {}, tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
xAxis: { xAxis: {
axisTick: { axisTick: {
show: false, show: false,
@@ -83,15 +108,16 @@ export default {
}, },
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 14,
}, },
data: this.xAxis, data: this.xAxis,
}, },
yAxis: { yAxis: {
name: "单位/片", name: "单位/片",
position: 'left',
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 14,
align: 'right' align: 'right'
}, },
axisTick: { axisTick: {
@@ -99,7 +125,7 @@ export default {
}, },
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 14,
}, },
axisLine: { axisLine: {
show: true, show: true,
@@ -227,9 +253,9 @@ export default {
this.actualOptions.series.map((item) => { this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12; item.barWidth = val ? 18 : 12;
}); });
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 14;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 14;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 14;
this.initOptions(this.actualOptions); this.initOptions(this.actualOptions);
}, },
series(val) { series(val) {

View File

@@ -83,7 +83,7 @@ export default {
// backdrop-filter: blur(2px); // backdrop-filter: blur(2px);
// border-radius: 4px; // border-radius: 4px;
transform: translate(-50%, -100%); transform: translate(-50%, -100%);
box-shadow: inset 0 0 12px 2px #fff3; // box-shadow: inset 0 0 12px 2px #fff3;
background: url(../../../assets/images/homeindex/info.png) no-repeat 0 0 / 100% 100%; background: url(../../../assets/images/homeindex/info.png) no-repeat 0 0 / 100% 100%;
// background: radial-gradient(circle farthest-corner at bottom center,rgba(255,239,162,.7) 10%, #021842 30%); // background: radial-gradient(circle farthest-corner at bottom center,rgba(255,239,162,.7) 10%, #021842 30%);
// 在这里设置一个总的字体大小 不失为一个好的选择 // 在这里设置一个总的字体大小 不失为一个好的选择

View File

@@ -38,7 +38,7 @@
class="container-head" class="container-head"
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
> >
<Icon :icon="icon"></Icon> <Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2> <h2 class="container-title">{{ title }}</h2>
</div> </div>
<div <div
@@ -105,7 +105,7 @@ export default {
.container-head { .container-head {
// height: 40px; // height: 40px;
height: 3.8vh; height:4vh;
padding: 8px; padding: 8px;
display: flex; display: flex;
align-items: center; align-items: center;

View File

@@ -1,8 +1,8 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-11-06 15:15:30 * @Date: 2023-11-06 15:15:30
* @LastEditTime: 2024-06-26 13:39:22 * @LastEditTime: 2024-07-05 13:28:38
* @LastEditors: DY * @LastEditors: zhp
* @Description: * @Description:
--> -->
<template> <template>
@@ -45,7 +45,7 @@
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<p class="title">芯片总功率(MW)</p> <p class="title">芯片总功率(MW)</p>
<p class="text">{{ dataForm.chipTotalPower }}</p> <p class="text">{{ dataForm.chipTotalPower.toFixed(2) }}</p>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="24"> <el-row :gutter="24">
@@ -73,7 +73,7 @@
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<p class="title">芯片产能利用率(%)</p> <p class="title">芯片产能利用率(%)</p>
<p class="text">{{ dataForm.chipCapacityUtilizationRate }}</p> <p class="text">{{ parseFloat(dataForm.chipCapacityUtilizationRate.toFixed(2)) }}</p>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@@ -102,11 +102,11 @@
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="6"> <el-col :span="6">
<p class="title">标准组件总功率(MW)</p> <p class="title">标准组件总功率(MW)</p>
<p class="text">{{ dataForm.componentTotalPower }}</p> <p class="text">{{ parseFloat(dataForm.componentTotalPower.toFixed(2)) }}</p>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<p class="title">封装产能利用率(%)</p> <p class="title">封装产能利用率(%)</p>
<p class="text">{{ dataForm.componentCapacityUtilizationRate }}</p> <p class="text">{{ parseFloat(dataForm.componentCapacityUtilizationRate.toFixed(2)) }}</p>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<p class="title">标准组件人均产量(/)</p> <p class="title">标准组件人均产量(/)</p>

View File

@@ -1,8 +1,8 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-04-15 10:49:13 * @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-06-27 14:56:20 * @LastEditTime: 2024-07-05 09:21:12
* @LastEditors: DY * @LastEditors: zhp
* @Description: * @Description:
--> -->
<template> <template>
@@ -10,14 +10,14 @@
<div class="app-container" style="padding: 16px 24px 0; height: auto; flex-grow: 1;"> <div class="app-container" style="padding: 16px 24px 0; height: auto; flex-grow: 1;">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip"> <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<el-form-item label="时间维度" prop="type"> <el-form-item label="时间维度" prop="type">
<el-select v-model="listQuery.type" size="small" clearable placeholder="请选择"> <el-select @change="changType" v-model="listQuery.type" size="small" clearable placeholder="请选择">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"> <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-show="listQuery.type === 0 || listQuery.type === ''" label="时间范围" prop="reportTime"> <el-form-item v-show="listQuery.type === 0 || listQuery.type === ''" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至" <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至"
start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期"> start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期" :picker-options="{ }">
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item v-show="listQuery.type === 1" label="时间范围" prop="reportTime"> <el-form-item v-show="listQuery.type === 1" label="时间范围" prop="reportTime">
@@ -115,7 +115,7 @@ import moment from 'moment'
import ButtonNav from '@/components/ButtonNav' import ButtonNav from '@/components/ButtonNav'
import basicPage from '@/mixins/basic-page' import basicPage from '@/mixins/basic-page'
import AddOrUpdate from './add-or-updata' import AddOrUpdate from './add-or-updata'
import { factoryList, factoryArray, factoryArray1 } from "@/utils/constants"; import { factoryList, factoryArray } from "@/utils/constants";
export default { export default {
components: { lineChart, ButtonNav, AddOrUpdate }, components: { lineChart, ButtonNav, AddOrUpdate },
@@ -124,7 +124,7 @@ export default {
return { return {
factoryList, factoryList,
factoryArray, factoryArray,
factoryArray1, // factoryArray1,
listQuery: { listQuery: {
pageSize: 20, pageSize: 20,
pageNo: 1, pageNo: 1,
@@ -234,7 +234,7 @@ export default {
{ {
prop: 'goodRatio', prop: 'goodRatio',
label: '良品率%', label: '良品率%',
filter: (val) => val + '%' filter: (val) => val.toFixed(2) + '%'
}, },
], ],
tableData: [], tableData: [],
@@ -261,6 +261,11 @@ export default {
mounted() { mounted() {
}, },
methods: { methods: {
changType() {
this.listQuery.endDate = null
this.listQuery.startDate = null
this.listQuery.reportTime = null
},
otherMethods(val) { otherMethods(val) {
this.detailOrUpdateVisible = true; this.detailOrUpdateVisible = true;
this.addOrEditTitle = "详情"; this.addOrEditTitle = "详情";
@@ -354,7 +359,7 @@ export default {
this.$message.warning('请选择时间维度!') this.$message.warning('请选择时间维度!')
return return
} }
if (this.listQuery.startDate === undefined) { if (!this.listQuery.startDate) {
this.$message.warning('请选择时间范围!') this.$message.warning('请选择时间范围!')
} else { } else {
await getProduceDataPage(this.listQuery).then(res => { await getProduceDataPage(this.listQuery).then(res => {
@@ -364,7 +369,6 @@ export default {
this.listQuery.total = res.data.total this.listQuery.total = res.data.total
} }
}) })
// 图表 // 图表
await getproddata(this.listQuery).then(resp => { await getproddata(this.listQuery).then(resp => {
if (resp.data?.length > 0) { if (resp.data?.length > 0) {
@@ -381,9 +385,24 @@ export default {
this.seriesList = [] this.seriesList = []
// x轴数据 // x轴数据
xAxisData = Object.keys(data) xAxisData = Object.keys(data)
let arr = []
if (this.listQuery.factory.length === 0) {
arr = this.factoryArray
} else {
this.listQuery.factory.forEach((ele, index) => {
let i = this.factoryArray.findIndex((item) => item.id == ele)
if (i != -1) {
arr.push({
id: this.factoryArray[i].id,
name: this.factoryArray[i].name
})
}
})
}
// y轴数据 // y轴数据
this.factoryArray.forEach(fac => { arr.forEach(fac => {
let i = 0 let i = 0
while ( i < 3) { while ( i < 3) {
// 下标 // 下标
@@ -469,7 +488,7 @@ export default {
} }
}) })
console.log('你好', this.seriesList) console.log('你好', this.seriesList)
this.$refs.lineChart.initChart(xAxisData, this.seriesList) this.$refs.lineChart.initChart(xAxisData, this.seriesList,arr)
}, },
buttonClick(val) { buttonClick(val) {
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined; this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
@@ -535,11 +554,23 @@ export default {
}; };
</script> </script>
<style scoped> <style>
/* .blueTip { */ /* .blueTip { */
/* padding-bottom: 10px; */ /* padding-bottom: 10px; */
/* } */ /* } */
/* .blueTi */ /* .blueTi */
.blueTip .el-date-editor .el-range__icon {
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{ .blueTip::before{
display: inline-block; display: inline-block;
content: ''; content: '';

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-06-24 11:13:48 * @LastEditTime: 2024-07-04 09:37:49
* @Description: * @Description:
--> -->
<template> <template>
@@ -73,8 +73,7 @@ export default {
this.chart = null this.chart = null
}, },
methods: { methods: {
initChart(xAxis, seriesList) { initChart(xAxis, seriesList,arr) {
console.log('2', xAxis, seriesList)
if (xAxis.length === 0) { if (xAxis.length === 0) {
this.chart.clear() this.chart.clear()
} }
@@ -100,38 +99,52 @@ export default {
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
formatter: function(params) { axisPointer: {
type: 'shadow',
color: "rgba(237,237,237,0.5)"
},
formatter: function (params) {
// console.log(params)
let str = ''
arr.forEach(ele => {
str += `<div style="width: 60px; text-align: right">${ele.name.substring(0, 2) }</div>`
})
console.log(str);
let result = ` let result = `
<div style="width: 270px; display: flex"> <div style="width: 270px; display: flex">
<div style="width: 150px">${params[0].name}</div> <div style="width: 150px">${params[0].name}</div>
<div style="width: 60px">${factoryListabbr[0]}</div> ${str}
<div style="width: 60px">${factoryListabbr[1]}</div>
</div>` </div>`
const newArray = params.map(p => { const newArray = params.map(p => {
console.log(factoryListabbr[p.seriesName.split('-')[1]], p.seriesName.split('-')[0])
return { return {
glass: p.seriesName.split('-')[0], // 玻璃类型 glass: p.seriesName.split('-')[0], // 玻璃类型
factoryName: factoryListabbr[p.seriesName.split('-')[1]], // 工厂名称 factoryName: arr[p.seriesName.split('-')[1]], // 工厂名称
value: p.value, value: p.value,
name: p.name, name: p.name,
marker: p.marker marker: p.marker,
color: p.color
} }
}) })
const analyzeList = Object.groupBy(newArray, (member) => member.glass) const analyzeList = Object.groupBy(newArray, (member) => member.glass)
for (let g in analyzeList) { for (let g in analyzeList) {
// date => 玻璃类型 // date => 玻璃类型
let oneData = `<div style="width: 270px; display: flex"> let oneData = `<div style="width: 270px; display: flex">
<div style="width: 150px">${analyzeList[g][0].marker} ${g}</div>` <div style="width: 150px; display: flex; align-items: center">
for (let fac of factoryListabbr) { <div style="background-color: ${analyzeList[g][0].color}; width: 10px; height: 10px; margin-right: 5px"></div>
<div>${g}</div></div>`
for (let fac of arr) {
let goodNum = 0 let goodNum = 0
for (let ana of analyzeList[g]) { for (let ana of analyzeList[g]) {
if (ana.factoryName === fac && ana.value !== 0) { if (ana.factoryName === fac && ana.value !== 0) {
goodNum = ana.value goodNum = ana.value
} }
} }
oneData += `<div style="width: 60px">${goodNum}</div>` oneData += `<div style="width: 60px; text-align: right">${goodNum}</div>`
} }
result = result + oneData + '</div>' result = result + oneData + '</div>'
} }
// console.log('result', result);
return result return result
} }
}, },
@@ -150,12 +163,12 @@ export default {
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
name: '单位:' name: '单位:'
} }
], ],
grid: { grid: {
top: '10%', top: '10%',
left: "1%", left: "2%",
right: "5%", right: "5%",
bottom: "0%", bottom: "0%",
containLabel: true containLabel: true

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-06-20 16:41:48 * @LastEditTime: 2024-07-02 16:35:01
* @LastEditors: DY * @LastEditors: DY
* @Description: * @Description:
--> -->
@@ -691,11 +691,22 @@ export default {
}; };
</script> </script>
<style scoped> <style>
/* .blueTip { */ /* .blueTip { */
/* padding-bottom: 10px; */ /* padding-bottom: 10px; */
/* } */ /* } */
/* .blueTi */ .blueTip .el-date-editor .el-range__icon {
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{ .blueTip::before{
display: inline-block; display: inline-block;
content: ''; content: '';

View File

@@ -1,8 +1,8 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-11-06 15:15:30 * @Date: 2023-11-06 15:15:30
* @LastEditTime: 2024-06-27 14:50:21 * @LastEditTime: 2024-07-05 15:16:01
* @LastEditors: DY * @LastEditors: zhp
* @Description: * @Description:
--> -->
<template> <template>
@@ -69,51 +69,60 @@
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<p class="title">开始时间</p> <p class="title">开始时间</p>
<p class="text">{{ dataForm.startDate?.length > 0 ? dataForm.startDate[0] + '-' + dataForm.startDate[1] + '-' + dataForm.startDate[2] : '' }}</p> <p class="text">{{ dataForm.startDate?.length > 0 ? dataForm.startDate[0] + '-' + dataForm.startDate[1] + '-'
+ dataForm.startDate[2] : '' }}</p>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<p class="title">完成时间</p> <p class="title">完成时间</p>
<p class="text">{{ dataForm.endDate?.length > 0 ? dataForm.endDate[0] + '-' + dataForm.endDate[1] + '-' + dataForm.endDate[2] : '' }}</p> <p class="text">{{ dataForm.endDate?.length > 0 ? dataForm.endDate[0] + '-' + dataForm.endDate[1] + '-' +
</el-col> dataForm.endDate[2] : '' }}</p>
</el-row>
<div style="width: 100%; padding: 0 32px"><el-divider style="margin: 0"></el-divider></div>
<el-row :gutter="0" style="margin: 20px 32px">
<el-col :span="8">
<div>
<small-title slot="title" :no-padding="true">
产品良率
</small-title>
<div ref="pie" :style="{ height: '40vh', width: '100%' }" />
</div>
</el-col>
<el-col :span="16">
<div style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
<small-title slot="title" :no-padding="true">
历史趋势
</small-title>
<div ref="line" v-show="dataForm.orderStatus === 2" :style="{ height: '40vh', width: '50vw' }" />
</div>
</el-col>
</el-row>
<div style="width: 100%; padding: 0 32px"><el-divider style="margin: 0"></el-divider></div>
<el-row :gutter="0" style="margin: 20px 32px">
<el-col :span="8">
<div>
<small-title slot="title" :no-padding="true">
生产明细
</small-title>
<div ref="bar" :style="{ height: '40vh', width: '100%' }" />
</div>
</el-col>
<el-col :span="16">
<div style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
<small-title slot="title" :no-padding="true">
待制品分布
</small-title>
<div ref="equipmentLine" :style="{ height: '40vh', width: '50vw' }" />
</div>
</el-col> </el-col>
</el-row> </el-row>
<div v-loading="loading">
<div style="width: 100%; padding: 0 32px">
<el-divider style="margin: 0"></el-divider>
</div>
<el-row :gutter="0" style="margin: 20px 32px">
<el-col :span="8">
<div>
<small-title slot="title" :no-padding="true">
产品良率
</small-title>
<div ref="pie" :style="{ height: '40vh', width: '100%' }" />
</div>
</el-col>
<el-col :span="16">
<div style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
<small-title slot="title" :no-padding="true">
待制品分布
</small-title>
<div ref="equipmentLine" :style="{ height: '40vh', width: '50vw' }" />
</div>
</el-col>
</el-row>
<div style="width: 100%; padding: 0 32px">
<el-divider style="margin: 0"></el-divider>
</div>
<el-row :gutter="0" style="margin: 20px 32px">
<el-col :span="8">
<div>
<small-title slot="title" :no-padding="true">
生产明细
</small-title>
<div ref="bar" :style="{ height: '40vh', width: '100%' }" />
</div>
</el-col>
<el-col :span="16">
<div v-show="dataForm.orderStatus === 2"
style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
<small-title slot="title" :no-padding="true">
历史趋势
</small-title>
<div ref="line" :style="{ height: '40vh', width: '50vw' }" />
</div>
</el-col>
</el-row>
</div>
</div> </div>
</el-drawer> </el-drawer>
@@ -147,6 +156,7 @@ export default {
barChart: null, barChart: null,
equipmentLineChart: null, equipmentLineChart: null,
visible: false, visible: false,
loading:true,
dataForm: {}, dataForm: {},
colorList: ['#3E8EF7', '#69E6D8', '#F7C739'] // pie颜色 colorList: ['#3E8EF7', '#69E6D8', '#F7C739'] // pie颜色
} }
@@ -193,12 +203,13 @@ export default {
}, },
init(id) { init(id) {
this.visible = true this.visible = true
this.$nextTick(() => { // this.$nextTick(() => {
this.initLineChart() // this.initLineChart()
}) // })
if (id) { if (id) {
getWorkOrderDetail(id).then(res => { getWorkOrderDetail(id).then(res => {
if (res.code === 0) { if (res.code === 0) {
this.loading = false
this.dataForm = res.data.prodWorkOrderDO this.dataForm = res.data.prodWorkOrderDO
this.buildChart(this.dataForm) this.buildChart(this.dataForm)
// 在制品 // 在制品
@@ -248,9 +259,9 @@ export default {
this.initChart(barList) this.initChart(barList)
// 良品率 // 良品率
const pieList = [ const pieList = [
{ value: data.actualProduction, name: '实际产出' }, { value: data.actualProduction ? data.actualProduction : 0, name: '实际产出' },
{ value: data.wasteNum, name: '废品数量' }, { value: data.wasteNum ? data.wasteNum : 0, name: '废品数量' },
{ value: data.reworkNum, name: '待再加工数量' } { value: data.reworkNum ? data.reworkNum :0, name: '待再加工数量' }
] ]
this.initPieChart(pieList) this.initPieChart(pieList)
}, },
@@ -266,11 +277,11 @@ export default {
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true }, // grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
calculable: true, calculable: true,
grid: { grid: {
top: '15%', top: '15%',
left: 0, left: 20,
right: '10%', right: '10%',
bottom: 0, bottom: 0,
containLabel: true containLabel: true
@@ -328,7 +339,14 @@ export default {
label: { label: {
show: true, show: true,
position: 'outside', position: 'outside',
formatter: '{d|{d}%} \n {b|{b}}', formatter: (params) => {
console.log(params)
let res = ''
// for (let i in params) {
res += `${params.percent ? params.percent : 0}% \n ${params.name}`
// }
return res
},
rich: { rich: {
d: { d: {
color: 'inherit', // 系列色 color: 'inherit', // 系列色
@@ -356,11 +374,11 @@ export default {
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true }, // grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
calculable: true, calculable: true,
grid: { grid: {
top: '15%', top: '15%',
left: 0, left: 30,
right: 0, right: 0,
bottom: 0, bottom: 0,
containLabel: true containLabel: true

View File

@@ -1,8 +1,8 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-04-15 10:49:13 * @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-06-24 15:08:34 * @LastEditTime: 2024-07-08 08:50:26
* @LastEditors: DY * @LastEditors: zhp
* @Description: * @Description:
--> -->
<template> <template>
@@ -142,15 +142,15 @@ export default {
selectOptions: [ selectOptions: [
{ {
label: '未开始', label: '未开始',
value: 1 value: 0
}, },
{ {
label: '生产中', label: '生产中',
value: 2 value: 1
}, },
{ {
label: '已完成', label: '已完成',
value: 3 value: 2
} }
], ],
labelField: "label", labelField: "label",
@@ -242,7 +242,7 @@ export default {
{ {
prop: 'productionProgress', prop: 'productionProgress',
label: '生产进度', label: '生产进度',
filter: (val) => (val * 100) + '%' filter: (val) => (val * 100).toFixed(2) + '%'
}, },
{ {
prop: 'orderStatus', prop: 'orderStatus',

View File

@@ -1,8 +1,8 @@
<!-- <!--
* @Author: Do not edit * @Author: Do not edit
* @Date: 2024-06-24 15:03:19 * @Date: 2024-06-24 15:03:19
* @LastEditTime: 2024-06-24 15:07:42 * @LastEditTime: 2024-07-08 08:48:58
* @LastEditors: DY * @LastEditors: zhp
* @Description: * @Description:
--> -->
<template> <template>
@@ -22,10 +22,10 @@ export default {
}, },
computed: { computed: {
state() { state() {
return ['', '未开始', '生产中', '已完成'][this.injectData.orderStatus] return ['未开始', '生产中', '已完成'][this.injectData.orderStatus]
}, },
myClass() { myClass() {
return ['', 'yellow', 'blue', 'green'][this.injectData.orderStatus] return ['yellow', 'blue', 'green'][this.injectData.orderStatus]
} }
}, },
}; };

View File

@@ -176,13 +176,13 @@ export default {
{ {
prop: "queryValue", prop: "queryValue",
label: msg.queryColumn, label: msg.queryColumn,
filter: (val) => (val || val === 0 ? val : "-"), filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
minWidth: 150, minWidth: 150,
}, },
{ {
prop: "target", prop: "target",
label: msg.targetColumn, label: msg.targetColumn,
filter: (val) => (val || val === 0 ? val : "-"), filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
minWidth: 150, minWidth: 150,
}, },
]; ];
@@ -231,12 +231,12 @@ export default {
for (let i = 0; i < val.length; i++) { for (let i = 0; i < val.length; i++) {
if (val[i].unit !== "㎡") { if (val[i].unit !== "㎡") {
xData1.push(val[i].item); xData1.push(val[i].item);
barData1.push(val[i].target || 0); barData1.push(parseFloat(val[i].target.toFixed(2)) || 0);
barData2.push(val[i].queryValue || 0); barData2.push(parseFloat(val[i].queryValue.toFixed(2)) || 0);
} else { } else {
xData2.push(val[i].item); xData2.push(val[i].item);
barData3.push(val[i].target || 0); barData3.push(parseFloat(val[i].target.toFixed(2)) || 0);
barData4.push(val[i].queryValue || 0); barData4.push(parseFloat(val[i].queryValue.toFixed(2)) || 0);
} }
} }
this.chartMsg1.xData = xData1; this.chartMsg1.xData = xData1;

View File

@@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-06-19 15:28:34 * @Date: 2024-06-19 15:28:34
* @LastEditTime: 2024-06-27 10:40:57 * @LastEditTime: 2024-07-05 13:43:22
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -56,15 +56,16 @@ export default {
for (var i = 0, l = params.length; i < l; i++) { for (var i = 0, l = params.length; i < l; i++) {
res += res +=
"<br/>" + "<br/>" +
`<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}'></span>` + `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` + `<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率" `<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率"
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%" ? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
: params[i].seriesName === "转化效率" : params[i].seriesName === "转化效率"
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%" ? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
: params[i].seriesName.search('总功率') != -1 : params[i].seriesName.search('总功率') != -1
? (params[i].value ? params[i].value : 0) + "MW" ? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "MW"
: (params[i].value ? params[i].value : 0) + "片" : params[i].seriesName.search('BIPV') != -1
? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "㎡" : (params[i].value ? params[i].value : 0) + "片"
}</span>`; }</span>`;
} }
return res; return res;
@@ -229,12 +230,12 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.legendData { .legendData {
text-align: right; text-align: right;
position: relative; position: relative;
// right: 30; // right: 30;
// top: 10px; top: -10px;
.itemData { .itemData {
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;

View File

@@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-06-20 16:13:36 * @Date: 2024-06-20 16:13:36
* @LastEditTime: 2024-06-27 09:51:43 * @LastEditTime: 2024-07-05 13:47:02
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -36,7 +36,7 @@ export default {
color: [], color: [],
// color: ["#8EF0AB", "#63BDFF", "#288AFF"], // color: ["#8EF0AB", "#63BDFF", "#288AFF"],
grid: { grid: {
left: 20, left: 50,
right: 0, right: 0,
bottom: 31, bottom: 31,
top: 30, top: 30,
@@ -51,20 +51,21 @@ export default {
}, },
}, },
formatter: function (params) { formatter: function (params) {
console.log('params', params.data) // console.log('params', params.data)
var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`; var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) { for (var i = 0, l = params.length; i < l; i++) {
res += res +=
"<br/>" + "<br/>" +
`<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}'></span>` + `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` + `<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率" `<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率"
? (params[i].data.titleValue ? params[i].data.titleValue.toFixed(2) : 0.0) + "%" ? (params[i].data.titleValue ? parseFloat(params[i].data.titleValue.toFixed(2)) : 0.0) + "%"
: params[i].seriesName === "转化效率" : params[i].seriesName === "转化效率"
? (params[i].data.titleValue ? params[i].data.titleValue.toFixed(2) : 0.0) + "%" ? (params[i].data.titleValue ? parseFloat(params[i].data.titleValue.toFixed(2)) : 0.0) + "%"
: params[i].seriesName.search('总功率') != -1 : params[i].seriesName.search('总功率') != -1
? (params[i].data.titleValue ? params[i].data.titleValue : 0) + "MW" ? (params[i].data.titleValue ? parseFloat(params[i].data.titleValue.toFixed(2)) : 0) + "MW"
: (params[i].data.titleValue ? params[i].data.titleValue : 0) + "片" : params[i].seriesName.search('BIPV') != -1
? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "㎡" : (params[i].data.titleValue ? params[i].data.titleValue : 0) + "片"
}</span>`; }</span>`;
} }
return res; return res;
@@ -173,8 +174,12 @@ export default {
}, },
// gridLeft(val) { // gridLeft(val) {
// console.log(val) // if (val === false) {
// this.option.grid.left = 100
// } else {
// this.option.grid.left = -80
// }
// this.canvasReset()
// }, // },
type() { type() {
this.canvasReset(); this.canvasReset();
@@ -200,11 +205,7 @@ export default {
}, },
getMes() { getMes() {
console.log(this.gridLeft) console.log(this.gridLeft)
if (this.gridLeft === false) {
this.option.grid.left = 20
} else {
this.option.grid.left = -80
}
// console.log('222222', this.chartMsg); // console.log('222222', this.chartMsg);
if (this.myChart) { if (this.myChart) {
this.myChart.dispose(); this.myChart.dispose();
@@ -213,23 +214,30 @@ export default {
this.myChart = echarts.init(chartDom); this.myChart = echarts.init(chartDom);
this.option.color = this.chartMsg.color; this.option.color = this.chartMsg.color;
this.option.xAxis.data = this.chartMsg.xData this.option.xAxis.data = this.chartMsg.xData
if (this.gridLeft === false) {
this.option.grid.left = 50
} else {
this.option.grid.left = -80
}
// this.option.yAxis.name = this.chartMsg.yName; // this.option.yAxis.name = this.chartMsg.yName;
// this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel; // this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel;
this.option.series = this.chartMsg.series; this.option.series = this.chartMsg.series;
this.option.yAxis = this.chartMsg.yAxis; this.option.yAxis = this.chartMsg.yAxis;
console.log(this.option.grid);
this.myChart.setOption(this.option); this.myChart.setOption(this.option);
}, },
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss" >
.legendData { .legendData {
text-align: right; text-align: right;
position: relative; position: relative;
// right: 30; // right: 30;
// top: 10px; // top: 10px;
top: -10px;
.itemData { .itemData {
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;

View File

@@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-06-20 16:13:52 * @Date: 2024-06-20 16:13:52
* @LastEditTime: 2024-06-27 09:55:02 * @LastEditTime: 2024-07-05 13:48:12
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -51,20 +51,21 @@ export default {
}, },
}, },
formatter: function (params) { formatter: function (params) {
// console.log('params', params); console.log('params', params);
var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`; var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) { for (var i = 0, l = params.length; i < l; i++) {
res += res +=
"<br/>" + "<br/>" +
`<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}'></span>` + `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` + `<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率" `<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率"
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%" ? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
: params[i].seriesName === "转化效率" : params[i].seriesName === "转化效率"
? params[i].value+ "%" ? parseFloat(params[i].value.toFixed(2)) + "%"
: params[i].seriesName.search('总功率') != -1 : params[i].seriesName.search('总功率') != -1
? (params[i].value ? params[i] : 0) + "MW" ? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "MW"
: (params[i].value ? params[i].value : 0) + "片" : params[i].seriesName.search('BIPV') != -1
? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "㎡":(params[i].value ? params[i].value : 0) + "片"
}</span>`; }</span>`;
} }
return res; return res;
@@ -208,12 +209,14 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.legendData { .legendData {
text-align: right; text-align: right;
position: relative; position: relative;
// right: 30; // right: 30;
// top: 10px; top: -10px;
// top: -10px;
.itemData { .itemData {
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;

View File

@@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-06-21 09:05:14 * @Date: 2024-06-21 09:05:14
* @LastEditTime: 2024-06-27 10:59:40 * @LastEditTime: 2024-07-05 13:49:59
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -51,38 +51,36 @@ export default {
}, },
}, },
formatter: function (params) { formatter: function (params) {
// console.log('params', params) console.log('params', params)
let arr = [] let arr = []
var res = ``; var res = ``;
// for (var i = 0, l = params.length; i < l; i++) { // for (var i = 0, l = params.length; i < l; i++) {
console.log() // console.log()
if (params[0].axisValue === 'FTO投入' || params[0].axisValue === '芯片产量' || params[0].axisValue === '标准组件产量') { if (params[0].axisValue === 'FTO投入' || params[0].axisValue === '芯片产量' || params[0].axisValue === '标准组件产量' || params[0].axisValue === '芯片总功率' || params[0].axisValue === '标准组件总功率') {
res += res +=
"<br/>" + `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[0].color}'></span>` +
`<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params[0].color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[0].axisValueLabel}</span>` + `<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[0].axisValueLabel}</span>` +
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[0].name === "综合良率" `<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[0].name === "综合良率"
? (params[0].value ? params[0].value.toFixed(2) : 0.0) + "%" ? (params[0].value ? parseFloat(params[0].value.toFixed(2)) : 0.0) + "%"
: params[0].name === "转化效率" : params[0].name === "转化效率"
? (params[0].value ? params[0].value.toFixed(2) : 0.0) + "%" ? (params[0].value ? parseFloat(params[0].value.toFixed(2)) : 0.0) + "%"
: params[i].seriesName.search('总功率') != -1 : params[0].axisValueLabel.search('总功率') != -1
? (params[i].value ? params[i].value : 0) + "MW" ? (params[0].value ? parseFloat(params[0].value.toFixed(2)) : 0) + "MW"
: (params[i].value ? params[i].value : 0) + "片" : (params[0].value ? params[0].value : 0) + "片"
}</span>`; }</span>`;
// } // }
} }
if (params[1].axisValue === '综合良率' || params[1].axisValue === '转化效率') { if (params[1].axisValue === '综合良率' || params[1].axisValue === '转化效率') {
res += res +=
"<br/>" + `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[1].color}'></span>` +
`<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params[1].color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[1].axisValueLabel}</span>` + `<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[1].axisValueLabel}</span>` +
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[1].name === "综合良率" `<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[1].name === "综合良率"
? (params[1].value ? params[1].value.toFixed(2) : 0.0) + "%" ? (params[1].value ? parseFloat(params[1].value.toFixed(2)) : 0.0) + "%"
: params[1].name === "转化效率" : params[1].name === "转化效率"
? (params[1].value ? params[1].value.toFixed(2) : 0.0) + "%" ? (params[1].value ? parseFloat(params[1].value.toFixed(2)) : 0.0) + "%"
: params[i].seriesName.search('总功率') != -1 : params[1].axisValueLabel.search('总功率') != -1
? (params[i].value ? params[i].value : 0) + "MW" ? (params[1].value ? parseFloat(params[1].value.toFixed(2)) : 0) + "MW"
: (params[i].value ? params[i].value : 0) + "片" : (params[1].value ? params[1].value : 0) + "片"
}</span>`; }</span>`;
} }
return res; return res;
@@ -225,10 +223,11 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.legendData { .legendData {
text-align: right; text-align: right;
position: relative; position: relative;
top: -10px;
// right: 30; // right: 30;
// top: 10px; // top: 10px;
.itemData { .itemData {

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-06-25 08:39:48 * @LastEditTime: 2024-07-08 13:18:08
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@@ -14,7 +14,7 @@
<div class="app-container" style="margin-top: 8px;flex-grow: 1; height: auto;"> <div class="app-container" style="margin-top: 8px;flex-grow: 1; height: auto;">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip"> <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<el-form-item label="时间维度" prop="type"> <el-form-item label="时间维度" prop="type">
<el-select size="small" clearable v-model="listQuery.type" placeholder="请选择"> <el-select size="small" clearable v-model="listQuery.type" placeholder="请选择" @change="handleChange">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"> <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
@@ -201,12 +201,36 @@ export default {
// this.getOverView() // this.getOverView()
const today = new Date() const today = new Date()
const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000)) const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD') this.listQuery.startDate = this.getFirstDay()
this.listQuery.endDate = moment(today).format('yyyy-MM-DD') this.listQuery.endDate = this.getLastDay()
this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate] this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate]
this.getDataList() this.getDataList()
}, },
methods: { methods: {
getFirstDay() {
//当前月第一天
var y = new Date().getFullYear(); //获取年份
var m = new Date().getMonth() + 1; //获取月份
var d = "01";
m = m < 10 ? "0" + m : m; //月份补 0
return [y, m, d].join("-");
},
getLastDay() {
//当前月最后一天
var y = new Date().getFullYear(); //获取年份
var m = new Date().getMonth() + 1; //获取月份
var d = new Date(y, m, 0).getDate(); //获取当月最后一日
m = m < 10 ? "0" + m : m; //月份补 0
d = d < 10 ? "0" + d : d; //日数补 0
return [y, m, d].join("-");
},
handleChange() {
this.listQuery.reportTime = []
this.listQuery.end = null
this.listQuery.start = null
this.listQuery.startDate = null
this.listQuery.endDate = null
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) { objectSpanMethod({ row, column, rowIndex, columnIndex }) {
let spanOneArr = [], concatOne = 0; let spanOneArr = [], concatOne = 0;
// let spanTwoArr = [], concatTwo = 0; // let spanTwoArr = [], concatTwo = 0;
@@ -319,6 +343,10 @@ export default {
} }
}, },
async getDataList() { async getDataList() {
console.log(this.listQuery.type);
if (this.listQuery.type == null) {
return this.$message('请选择时间维度')
}
if (!this.listQuery.startDate && !this.listQuery.endDate) { if (!this.listQuery.startDate && !this.listQuery.endDate) {
return this.$message('请选择起止时间') return this.$message('请选择起止时间')
} }
@@ -346,10 +374,6 @@ export default {
type: '芯片', type: '芯片',
item: '芯片良率', item: '芯片良率',
unit: '%' unit: '%'
}, {
type: '芯片',
item: '芯片产量',
unit: '片'
}, { }, {
type: '芯片', type: '芯片',
item: '芯片总功率', item: '芯片总功率',
@@ -418,7 +442,7 @@ export default {
{ {
type: 'BIPV', type: 'BIPV',
item: 'BIPV产量', item: 'BIPV产量',
unit: 'm2' unit: ''
}, },
{ {
type: 'BIPV', type: 'BIPV',
@@ -428,7 +452,7 @@ export default {
{ {
type: 'BIPV', type: 'BIPV',
item: '人均产量', item: '人均产量',
unit: 'm2/人' unit: '/人'
}, },
{ {
type: 'BIPV', type: 'BIPV',
@@ -451,6 +475,7 @@ export default {
// this.chartMsg.xData.push(ele.titleValue) // this.chartMsg.xData.push(ele.titleValue)
this.otherProps.push({ this.otherProps.push({
label: ele.titleValue, label: ele.titleValue,
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
prop: 'value' + i prop: 'value' + i
}) })
}) })
@@ -459,34 +484,32 @@ export default {
let i = index + 1 let i = index + 1
let m = 'value' + i let m = 'value' + i
// ele.productYieldDataVOList.forEach((item) => { // ele.productYieldDataVOList.forEach((item) => {
dataArr[0]['' + m + ''] = item.ftoInput dataArr[0]['' + m + ''] = item.ftoInput
// dataArr[0].factory = item.factory === 1 ? '邯郸' : '瑞昌' dataArr[1]['' + m + ''] = item.chipYield
// dataArr[1].factory = item.factory === 1 ? '邯郸' : '瑞昌' dataArr[2]['' + m + ''] = item.chipAveragePower
// dataArr[2].factory = item.factory === 1 ? '邯郸' : '瑞昌' dataArr[3]['' + m + ''] = item.chipYieldRate
// dataArr[3].factory = item.factory === 1 ? '邯郸' : '瑞昌' dataArr[4]['' + m + ''] = item.chipTotalPower
dataArr[1]['' + m + ''] = item.chipYield dataArr[5]['' + m + ''] = item.chipCssMarriageRate
dataArr[2]['' + m + ''] = item.chipAveragePower dataArr[6]['' + m + ''] = item.chipOee
dataArr[4]['' + m + ''] = item.chipTotalPower dataArr[7]['' + m + ''] = item.chipCapacityUtilizationRate
dataArr[5]['' + m + ''] = item.chipCssMarriageRate dataArr[8]['' + m + ''] = item.chipAnnualAverageProduction
dataArr[6]['' + m + ''] = item.chipOee dataArr[9]['' + m + ''] = item.chipBom
dataArr[7]['' + m + ''] = item.chipCapacityUtilizationRate dataArr[10]['' + m + ''] = item.componentYield
dataArr[8]['' + m + ''] = item.chipAnnualAverageProduction dataArr[11]['' + m + ''] = item.componentAveragePower
dataArr[9]['' + m + ''] = item.chipBom dataArr[12]['' + m + ''] = item.componentYieldRate
dataArr[10]['' + m + ''] = item.componentYield dataArr[13]['' + m + ''] = item.componentTotalPower
dataArr[11]['' + m + ''] = item.componentAveragePower dataArr[14]['' + m + ''] = item.componentOee
dataArr[12]['' + m + ''] = item.componentYieldRate dataArr[15]['' + m + ''] = item.componentCapacityUtilizationRate
dataArr[13]['' + m + ''] = item.componentTotalPower dataArr[16]['' + m + ''] = item.componentAnnualAverageProduction
dataArr[14]['' + m + ''] = item.componentOee dataArr[17]['' + m + ''] = item.componentBom
dataArr[15]['' + m + ''] = item.componentCapacityUtilizationRate dataArr[18]['' + m + ''] = item.bipvChipUsage
dataArr[16]['' + m + ''] = item.componentAnnualAverageProduction dataArr[19]['' + m + ''] = item.bipvProductOutput
dataArr[17]['' + m + ''] = item.componentBom dataArr[20]['' + m + ''] = item.bipvChipUtilizationRate
dataArr[18]['' + m + ''] = item.bipvChipUsage dataArr[21]['' + m + ''] = item.bipvAnnualAverageProduction
dataArr[19]['' + m + ''] = item.bipvProductOutput dataArr[22]['' + m + ''] = item.bipvOeeMaterialCost
dataArr[20]['' + m + ''] = item.bipvChipUtilizationRate dataArr[23]['' + m + ''] = item.bipvInsideMaterialCost
dataArr[21]['' + m + ''] = item.bipvAnnualAverageProduction dataArr[24]['' + m + ''] = item.bipvComprehensiveMaterialCost
dataArr[22]['' + m + ''] = item.bipvOeeMaterialCost // dataArr[25]['' + m + ''] = item.bipvComprehensiveMaterialCost
dataArr[23]['' + m + ''] = item.bipvInsideMaterialCost
dataArr[24]['' + m + ''] = item.bipvComprehensiveMaterialCost
// }) // })
// ele.titleValue // ele.titleValue

View File

@@ -7,7 +7,7 @@
<div class="search"> <div class="search">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip"> <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<el-form-item label="时间维度" prop="date"> <el-form-item label="时间维度" prop="date">
<el-select size="small" clearable v-model="listQuery.date" placeholder="请选择"> <el-select size="small" clearable v-model="listQuery.date" placeholder="请选择" @change="handleChange">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"> <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
@@ -215,7 +215,7 @@ export default {
barWidth: 20, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-18, -16], position: [0, -16],
color: "#68C483", color: "#68C483",
formatter: function (params) { formatter: function (params) {
return params.value return params.value
@@ -230,7 +230,7 @@ export default {
barWidth: 20, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-18, -16], position: [0, -16],
color: "#68C483", color: "#68C483",
formatter: function (params) { formatter: function (params) {
return params.value return params.value
@@ -247,7 +247,7 @@ export default {
yAxis: [ yAxis: [
{ {
type: "value", type: "value",
name: "单位/", name: "单位/MW",
// min: function (value) {//取最小值向下取整为最小刻度 // min: function (value) {//取最小值向下取整为最小刻度
// return 0 // return 0
// }, // },
@@ -290,7 +290,7 @@ export default {
barWidth: 20, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-50, -16], position: [-0, -16],
color: "#68C483", color: "#68C483",
formatter: function (params) { formatter: function (params) {
return params.value.toFixed(2) return params.value.toFixed(2)
@@ -305,7 +305,7 @@ export default {
barWidth: 20, barWidth: 20,
label: { label: {
show: true, show: true,
position: [10, -16], position: [0, -16],
color: "#288AFF", color: "#288AFF",
formatter: function (params) { formatter: function (params) {
return params.value.toFixed(2) return params.value.toFixed(2)
@@ -396,12 +396,36 @@ export default {
// this.getOverView() // this.getOverView()
const today = new Date() const today = new Date()
const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000)) const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
this.listQuery.beginTime = moment(sevenDaysAgo).format('yyyy-MM-DD') this.listQuery.beginTime = this.getFirstDay()
this.listQuery.endTime = moment(today).format('yyyy-MM-DD') this.listQuery.endTime = this.getLastDay()
this.listQuery.reportTime = [this.listQuery.beginTime, this.listQuery.endTime] this.listQuery.reportTime = [this.listQuery.beginTime, this.listQuery.endTime]
this.getDataList() this.getDataList()
}, },
methods: { methods: {
getFirstDay() {
//当前月第一天
var y = new Date().getFullYear(); //获取年份
var m = new Date().getMonth() + 1; //获取月份
var d = "01";
m = m < 10 ? "0" + m : m; //月份补 0
return [y, m, d].join("-");
},
getLastDay() {
//当前月最后一天
var y = new Date().getFullYear(); //获取年份
var m = new Date().getMonth() + 1; //获取月份
var d = new Date(y, m, 0).getDate(); //获取当月最后一日
m = m < 10 ? "0" + m : m; //月份补 0
d = d < 10 ? "0" + d : d; //日数补 0
return [y, m, d].join("-");
},
handleChange(val) {
this.listQuery.reportTime = []
this.listQuery.end = null
this.listQuery.start = null
this.listQuery.endTime = null
this.listQuery.beginTime = null
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) { objectSpanMethod({ row, column, rowIndex, columnIndex }) {
let spanOneArr = [], concatOne = 0; let spanOneArr = [], concatOne = 0;
// let spanTwoArr = [], concatTwo = 0; // let spanTwoArr = [], concatTwo = 0;
@@ -522,6 +546,9 @@ export default {
this.chartMsgYearTarget.series[0].data = [] this.chartMsgYearTarget.series[0].data = []
this.chartMsgYearTarget.series[1].data = [] this.chartMsgYearTarget.series[1].data = []
this.title = '' this.title = ''
if (this.listQuery.date == null) {
return this.$message('请选择时间维度')
}
if (!this.listQuery.beginTime && !this.listQuery.endTime) { if (!this.listQuery.beginTime && !this.listQuery.endTime) {
return this.$message('请选择起止时间') return this.$message('请选择起止时间')
} }
@@ -551,36 +578,37 @@ export default {
} }
] ]
res.data.forEach(element => { res.data.forEach(element => {
element.list.reverse().forEach((ele, index) => { element.list.forEach((ele, index) => {
let i = index + 1 let i = index + 1
this.chartMsg.xData.push(ele.reportTimep) this.chartMsg.xData.push(ele.reportTimep)
this.otherProps.push({ this.otherProps.push({
label: ele.reportTimep, label: ele.reportTimep,
filter: (val) => (val || val === 0 ? val : "-"),
prop: 'value' + i prop: 'value' + i
}) })
}) })
}) })
if (res.data[0].list.length != 0) { if (res.data[0].list.length != 0) {
this.chartMsg.xData.push(res.data[0].list[0].reportTimep + '目标') this.chartMsg.xData.push(res.data[0].list[res.data[0].list.length - 1].reportTimep.slice(0, res.data[0].list[res.data[0].list.length - 1].reportTimep.length - 3) + '目标')
if (this.listQuery.date === 0 || this.listQuery.date === 1 || this.listQuery.date === 2) { if (this.listQuery.date === 0 || this.listQuery.date === 1 || this.listQuery.date === 2) {
this.otherProps.push({ this.otherProps.push({
label: res.data[0].list[0].reportTimep + '目标', label: res.data[0].list[res.data[0].list.length - 1].reportTimep.slice(0, res.data[0].list[res.data[0].list.length - 1].reportTimep.length-3) + '目标',
prop: 'dayData' prop: 'dayData'
}) })
dataArr[0]['dayData'] = res.data[0].list[0].chipTarget dataArr[0]['dayData'] = res.data[0].list[res.data[0].list.length - 1].chipTarget
dataArr[1]['dayData'] = res.data[0].list[0].standTarget dataArr[1]['dayData'] = res.data[0].list[res.data[0].list.length - 1].standTarget
dataArr[2]['dayData'] = res.data[0].list[0].conversionEfficiencyTarget dataArr[2]['dayData'] = res.data[0].list[res.data[0].list.length - 1].conversionEfficiencyTarget
} }
if (this.listQuery.date === 2 || this.listQuery.date === 3) { if (this.listQuery.date === 2 || this.listQuery.date === 3) {
this.otherProps.push({ this.otherProps.push({
label: res.data[0].yearTarget.targetTime, label: res.data[0].yearTarget.targetTime + '年目标值',
prop: 'yearData' prop: 'yearData'
}) })
dataArr[0]['yearData'] = res.data[0].yearTarget.chipTotalPower dataArr[0]['yearData'] = res.data[0].yearTarget.chipTotalPower
dataArr[1]['yearData'] = res.data[0].yearTarget.componentTotalPower dataArr[1]['yearData'] = res.data[0].yearTarget.componentTotalPower
dataArr[2]['yearData'] = res.data[0].yearTarget.componentConversionEfficiency dataArr[2]['yearData'] = res.data[0].yearTarget.componentConversionEfficiency
} }
res.data.forEach((ele, index) => { res.data.reverse().forEach((ele, index) => {
// let i = index + 1 // let i = index + 1
// let m = 'value' + i // let m = 'value' + i
ele.list.forEach((item, index) => { ele.list.forEach((item, index) => {
@@ -600,22 +628,31 @@ export default {
// }) // })
}) })
}) })
this.title = res.data[0].yearTarget.targetTime ? res.data[0].yearTarget.targetTime + '目标值' : '' this.title = res.data[0].yearTarget.targetTime ? res.data[0].yearTarget.targetTime + '目标值' : ''
this.chartMsgYearTarget.series[0].data = [ this.chartMsgYearTarget.series[0].data = [
{ {
value: res.data[0].yearTarget.chipTotalPower, value: res.data[0].yearTarget.chipTotalPower,
label: {
color: '#8EF0AB'
},
itemStyle: { itemStyle: {
color: '#8EF0AB' color: '#8EF0AB'
} }
}, },
{ {
value: res.data[0].yearTarget.componentTotalPower, value: res.data[0].yearTarget.componentTotalPower,
label: {
color: '#288AFF'
},
itemStyle: { itemStyle: {
color: '#288AFF' color: '#288AFF'
} }
}, },
{ {
value: null, value: null,
label: {
color: '#64BDFF'
},
itemStyle: { itemStyle: {
color: '#64BDFF' color: '#64BDFF'
} }
@@ -623,18 +660,27 @@ export default {
this.chartMsgYearTarget.series[1].data = [ this.chartMsgYearTarget.series[1].data = [
{ {
value: null, value: null,
label: {
color: '#8EF0AB'
},
itemStyle: { itemStyle: {
color: '#8EF0AB' color: '#8EF0AB'
} }
}, },
{ {
value: null, value: null,
label: {
color: '#288AFF'
},
itemStyle: { itemStyle: {
color: '#288AFF' color: '#288AFF'
} }
}, },
{ {
value: res.data[0].yearTarget.componentConversionEfficiency, value: res.data[0].yearTarget.componentConversionEfficiency,
label: {
color: '#64BDFF'
},
itemStyle: { itemStyle: {
color: '#64BDFF' color: '#64BDFF'
} }
@@ -667,6 +713,18 @@ export default {
}) })
} }
} }
this.chartMsg.series[0].data.push({
name: '芯片总功率',
value: dataArr[0]['dayData'] === 0 ? null : dataArr[0]['dayData']
})
this.chartMsg.series[1].data.push({
name: '标准组件总功率',
value: dataArr[1]['dayData'] === 0 ? null : dataArr[1]['dayData']
})
this.chartMsg.series[2].data.push({
name: '转化效率',
value: dataArr[2]['dayData'] === 0 ? null : dataArr[2]['dayData']
})
} else { } else {
this.chartMsgYearTarget.series[0].data = [] this.chartMsgYearTarget.series[0].data = []
this.chartMsgYearTarget.series[1].data = [] this.chartMsgYearTarget.series[1].data = []

View File

@@ -5,7 +5,7 @@
<div class="search"> <div class="search">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip"> <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<el-form-item label="时间维度" prop="type"> <el-form-item label="时间维度" prop="type">
<el-select size="small" clearable v-model="listQuery.type" placeholder="请选择"> <el-select size="small" clearable v-model="listQuery.type" placeholder="请选择" @change="handleChange">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"> <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
@@ -198,7 +198,7 @@ export default {
position: [-18, -16], position: [-18, -16],
color: "#68C483", color: "#68C483",
formatter: function (params) { formatter: function (params) {
return params.value return parseFloat(params.value.toFixed(2))
}, },
}, },
}, },
@@ -212,7 +212,7 @@ export default {
position: [0, -16], position: [0, -16],
color: "#288AFF", color: "#288AFF",
formatter: function (params) { formatter: function (params) {
return params.value return parseFloat(params.value.toFixed(2))
}, },
}, },
}, },
@@ -226,6 +226,7 @@ export default {
show: true, show: true,
type: "value", type: "value",
name: "单位/MW", name: "单位/MW",
position:'left',
// splitNumber: 4, // splitNumber: 4,
nameTextStyle: { nameTextStyle: {
fontSize: 12, fontSize: 12,
@@ -240,10 +241,11 @@ export default {
chartMsg: { chartMsg: {
color: ["#8EF0AB", "#288AFF"], color: ["#8EF0AB", "#288AFF"],
xData: [], xData: [],
yName: "单位/MW", // yName: "单位/MW",
yAxis:{ yAxis:{
type: "value", type: "value",
name: "单位/MW", name: "单位/MW",
// splitNumber: 4, // splitNumber: 4,
nameTextStyle: { nameTextStyle: {
fontSize: 12, fontSize: 12,
@@ -259,10 +261,10 @@ export default {
barWidth: 20, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-30, -16], position: [-10, -16],
color: "#68C483", color: "#68C483",
formatter: function (params) { formatter: function (params) {
return params.value return parseFloat(params.value.toFixed(2))
}, },
}, },
}, },
@@ -277,7 +279,7 @@ export default {
position: [0, -16], position: [0, -16],
color: "#288AFF", color: "#288AFF",
formatter: function (params) { formatter: function (params) {
return params.value return parseFloat(params.value.toFixed(2))
}, },
}, },
}, },
@@ -363,12 +365,36 @@ export default {
// this.getOverView() // this.getOverView()
const today = new Date() const today = new Date()
const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000)) const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD') this.listQuery.startDate = this.getFirstDay()
this.listQuery.endDate = moment(today).format('yyyy-MM-DD') this.listQuery.endDate = this.getLastDay()
this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate] this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate]
this.getDataList() this.getDataList()
}, },
methods: { methods: {
getFirstDay() {
//当前月第一天
var y = new Date().getFullYear(); //获取年份
var m = new Date().getMonth() + 1; //获取月份
var d = "01";
m = m < 10 ? "0" + m : m; //月份补 0
return [y, m, d].join("-");
},
getLastDay() {
//当前月最后一天
var y = new Date().getFullYear(); //获取年份
var m = new Date().getMonth() + 1; //获取月份
var d = new Date(y, m, 0).getDate(); //获取当月最后一日
m = m < 10 ? "0" + m : m; //月份补 0
d = d < 10 ? "0" + d : d; //日数补 0
return [y, m, d].join("-");
},
handleChange() {
this.listQuery.reportTime = []
this.listQuery.end = null
this.listQuery.start = null
this.listQuery.startDate = null
this.listQuery.endDate = null
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) { objectSpanMethod({ row, column, rowIndex, columnIndex }) {
let spanOneArr = [], concatOne = 0; let spanOneArr = [], concatOne = 0;
// let spanTwoArr = [], concatTwo = 0; // let spanTwoArr = [], concatTwo = 0;
@@ -491,6 +517,9 @@ export default {
this.chartMsgYearTarget.series[0].data = [] this.chartMsgYearTarget.series[0].data = []
this.chartMsgYearTarget.series[1].data = [] this.chartMsgYearTarget.series[1].data = []
console.log(this.listQuery); console.log(this.listQuery);
if (this.listQuery.type == null) {
return this.$message('请选择时间维度')
}
if (!this.listQuery.startDate && !this.listQuery.endDate) { if (!this.listQuery.startDate && !this.listQuery.endDate) {
return this.$message('请选择起止时间') return this.$message('请选择起止时间')
} }
@@ -504,6 +533,7 @@ export default {
// this.chartMsg.xData.push(ele.titleValue.replace(/[^\d]/g, " ")) // this.chartMsg.xData.push(ele.titleValue.replace(/[^\d]/g, " "))
this.otherProps.push({ this.otherProps.push({
label: ele.titleValue, label: ele.titleValue,
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
prop: 'value' + i prop: 'value' + i
}) })
}) })
@@ -511,7 +541,7 @@ export default {
let i = index + 1 let i = index + 1
let m = 'value' + i let m = 'value' + i
ele.productionSituationPowerDataVOList.forEach((item) => { ele.productionSituationPowerDataVOList.forEach((item) => {
maxData.push(item.chipTotalPower, item.componentTotalPower) // maxData.push(item.chipTotalPower, item.componentTotalPower)
this.dataArr[0]['' + m + ''] = item.chipTotalPower this.dataArr[0]['' + m + ''] = item.chipTotalPower
// this.dataArr[3].factory = item.factory == 1 ? '邯郸' : '瑞昌' // this.dataArr[3].factory = item.factory == 1 ? '邯郸' : '瑞昌'
this.dataArr[1]['' + m + ''] = item.componentTotalPower this.dataArr[1]['' + m + ''] = item.componentTotalPower
@@ -523,10 +553,23 @@ export default {
// props: 'value' + index + 1, // props: 'value' + index + 1,
// }) // })
}) })
this.chartMsg.yAxis.max = Math.ceil(Math.max(...maxData) / 100) * 100 if (this.listQuery.type === 2) {
this.chartMsgTarget.yAxis.max = Math.ceil(Math.max(...maxData) / 100) * 100 res.data.list.slice(0, res.data.list.length - 1).forEach((ele, index) => {
this.chartMsg.yAxis.min = Math.ceil(Math.min(...maxData) / 100) * 100 ele.productionSituationPowerDataVOList.forEach((item) => {
this.chartMsgTarget.yAxis.min = Math.ceil(Math.min(...maxData) / 100) * 100 maxData.push(item.chipTotalPower, item.componentTotalPower)
})
})
} else {
res.data.list.forEach((ele, index) => {
ele.productionSituationPowerDataVOList.forEach((item) => {
maxData.push(item.chipTotalPower, item.componentTotalPower)
})
})
}
this.chartMsg.yAxis.max = Math.ceil(Math.max(...maxData))
this.chartMsgTarget.yAxis.max = Math.ceil(Math.max(...maxData))
this.chartMsg.yAxis.min = Math.ceil(Math.min(...maxData) )
this.chartMsgTarget.yAxis.min = Math.ceil(Math.min(...maxData))
this.chartMsg.yAxis.interval = (this.chartMsg.yAxis.max - this.chartMsg.yAxis.min) / 4 this.chartMsg.yAxis.interval = (this.chartMsg.yAxis.max - this.chartMsg.yAxis.min) / 4
this.chartMsgTarget.yAxis.interval = (this.chartMsgTarget.yAxis.max - this.chartMsgTarget.yAxis.min) / 4 this.chartMsgTarget.yAxis.interval = (this.chartMsgTarget.yAxis.max - this.chartMsgTarget.yAxis.min) / 4
if (this.listQuery.type === 2) { if (this.listQuery.type === 2) {
@@ -550,7 +593,7 @@ export default {
}) })
}) })
}) })
this.chartMsgTarget.xData.push(res.data.list[res.data.list.length - 2].titleValue) this.chartMsgTarget.xData.push(res.data.list[res.data.list.length - 2].titleValue.slice(0, res.data.list[res.data.list.length - 2].titleValue.length - 3))
// this.chartMsgTarget.series = [{ // this.chartMsgTarget.series = [{
// name: "FTO投入", // name: "FTO投入",
// data: [ // data: [
@@ -612,7 +655,7 @@ export default {
position: [-18, -16], position: [-18, -16],
color: "rgba(104,196,131)", color: "rgba(104,196,131)",
formatter: function (params) { formatter: function (params) {
return params.value return params.value.toFixed(2)
}, },
}, },
}, { }, {
@@ -632,7 +675,7 @@ export default {
position: [-18, -16], position: [-18, -16],
color: "rgba(104,196,131,.5)", color: "rgba(104,196,131,.5)",
formatter: function (params) { formatter: function (params) {
return params.value return params.value.toFixed(2)
}, },
}, },
}) })
@@ -641,9 +684,6 @@ export default {
stack: 'b', stack: 'b',
data: [ data: [
{ name: "标准组件总功率完成值", value: obj.componentTotalPower,titleValue:obj.componentTotalPower }, { name: "标准组件总功率完成值", value: obj.componentTotalPower,titleValue:obj.componentTotalPower },
// { name: '标准组件总功率完成值', value: 23 },
// { name: "%", value: 7.02 },
// { name: "%", value: 80.2 },
], ],
type: "bar", type: "bar",
barWidth: 20, barWidth: 20,
@@ -652,7 +692,7 @@ export default {
position: [0, -16], position: [0, -16],
color: "rgba(40,138,255)", color: "rgba(40,138,255)",
formatter: function (params) { formatter: function (params) {
return params.value return params.value.toFixed(2)
}, },
}, },
}, { }, {
@@ -672,15 +712,12 @@ export default {
position: [0, -16], position: [0, -16],
color: "rgba(40,138,255,.5)", color: "rgba(40,138,255,.5)",
formatter: function (params) { formatter: function (params) {
return params.value return params.value.toFixed(2)
}, },
}, },
}) })
console.log('arr', chip,std) console.log('arr', chip,std)
this.chartMsgTarget.series = [...chip, ...std] this.chartMsgTarget.series = [...chip, ...std]
// arr.forEach((ele) => {
// })
res.data.list.slice(res.data.list.length - 1, res.data.list.length).forEach((ele, index) => { res.data.list.slice(res.data.list.length - 1, res.data.list.length).forEach((ele, index) => {
// let i = index + 1 // let i = index + 1
this.chartMsgYearTarget.xData.push(ele.titleValue) this.chartMsgYearTarget.xData.push(ele.titleValue)
@@ -718,7 +755,7 @@ export default {
}) })
}) })
}) })
this.chartMsgTarget.xData.push(res.data.list[res.data.list.length - 1].titleValue) this.chartMsgTarget.xData.push(res.data.list[res.data.list.length - 1].titleValue.slice(0, res.data.list[res.data.list.length - 1].titleValue.length - 3))
// this.chartMsgTarget.series = [{ // this.chartMsgTarget.series = [{
// name: "FTO投入", // name: "FTO投入",
// data: [ // data: [

View File

@@ -390,7 +390,7 @@ export default {
{ {
factory: null, factory: null,
item: 'BIPV产量', item: 'BIPV产量',
unit: 'm2' unit: ''
},] },]
} else { } else {
return [{ return [{
@@ -448,7 +448,7 @@ export default {
this.tableData = val this.tableData = val
}, },
currentMenu(val) { currentMenu(val) {
console.log(val) // console.log(val)
if (val === '瑞昌') { if (val === '瑞昌') {
this.legendList = [ this.legendList = [
{ id: 1, name: "FTO投入", type: 1, color: "#8EF0AB" }, { id: 1, name: "FTO投入", type: 1, color: "#8EF0AB" },
@@ -456,7 +456,7 @@ export default {
{ id: 3, name: "标准组件产量", type: 1, color: "#64BDFF" }, { id: 3, name: "标准组件产量", type: 1, color: "#64BDFF" },
] ]
} else { } else {
[ this.legendList = [
{ id: 1, name: "FTO投入", type: 1, color: "#8EF0AB" }, { id: 1, name: "FTO投入", type: 1, color: "#8EF0AB" },
{ id: 2, name: "芯片产量", type: 1, color: "#288AFF" }, { id: 2, name: "芯片产量", type: 1, color: "#288AFF" },
{ id: 3, name: "标准组件产量", type: 1, color: "#64BDFF" }, { id: 3, name: "标准组件产量", type: 1, color: "#64BDFF" },
@@ -489,16 +489,35 @@ export default {
// this.getOverView() // this.getOverView()
const today = new Date() const today = new Date()
const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000)) const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD') this.listQuery.startDate = this.getFirstDay()
this.listQuery.endDate = moment(today).format('yyyy-MM-DD') this.listQuery.endDate = this.getLastDay()
this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate] this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate]
this.getDataList() this.getDataList()
}, },
methods: { methods: {
getFirstDay() {
//当前月第一天
var y = new Date().getFullYear(); //获取年份
var m = new Date().getMonth() + 1; //获取月份
var d = "01";
m = m < 10 ? "0" + m : m; //月份补 0
return [y, m, d].join("-");
},
getLastDay() {
//当前月最后一天
var y = new Date().getFullYear(); //获取年份
var m = new Date().getMonth() + 1; //获取月份
var d = new Date(y, m, 0).getDate(); //获取当月最后一日
m = m < 10 ? "0" + m : m; //月份补 0
d = d < 10 ? "0" + d : d; //日数补 0
return [y, m, d].join("-");
},
handleChange() { handleChange() {
this.listQuery.reportTime = [] this.listQuery.reportTime = []
this.listQuery.end = null this.listQuery.end = null
this.listQuery.start = null this.listQuery.start = null
this.listQuery.startDate = null
this.listQuery.endDate = null
}, },
objectSpanMethod({ row, column, rowIndex, columnIndex }) { objectSpanMethod({ row, column, rowIndex, columnIndex }) {
let spanOneArr = [], concatOne = 0; let spanOneArr = [], concatOne = 0;
@@ -552,12 +571,12 @@ export default {
onValueChange(picker, k) { // 选中近k周后触发的操作 onValueChange(picker, k) { // 选中近k周后触发的操作
// console.log(this.listQuery.reportTime[0], this.listQuery.reportTime[1]) // console.log(this.listQuery.reportTime[0], this.listQuery.reportTime[1])
if (this.listQuery.start && this.listQuery.end) { if (this.listQuery.start && this.listQuery.end) {
console.log(this.listQuery.reportTime) // console.log(this.listQuery.reportTime)
this.date1 = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss') this.date1 = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
this.date2 = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss') this.date2 = moment(this.listQuery.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); const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000);
if (numDays > 168) { if (numDays > 168) {
console.log(numDays) // console.log(numDays)
this.$message({ this.$message({
message: '周范围不能超过24周', message: '周范围不能超过24周',
type: 'warning' type: 'warning'
@@ -576,7 +595,7 @@ export default {
if (this.listQuery.reportTime) { if (this.listQuery.reportTime) {
// this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss'); // this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss');
// this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss'); // this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss');
console.log(this.listQuery.reportTime[1]) // console.log(this.listQuery.reportTime[1])
const numDays = (this.listQuery.reportTime[1] - this.listQuery.reportTime[0]) / (24 * 3600 * 1000); const numDays = (this.listQuery.reportTime[1] - this.listQuery.reportTime[0]) / (24 * 3600 * 1000);
if (numDays > 30) { if (numDays > 30) {
this.$message({ this.$message({
@@ -629,7 +648,10 @@ export default {
if (this.chartMsgYearTarget.series[3]) { if (this.chartMsgYearTarget.series[3]) {
this.chartMsgYearTarget.series[3].data = [] this.chartMsgYearTarget.series[3].data = []
} }
console.log(this.listQuery); // console.log(this.listQuery);
if (this.listQuery.type == null) {
return this.$message('请选择时间维度')
}
if (!this.listQuery.startDate && !this.listQuery.endDate) { if (!this.listQuery.startDate && !this.listQuery.endDate) {
return this.$message('请选择起止时间') return this.$message('请选择起止时间')
} }
@@ -642,6 +664,7 @@ export default {
// this.chartMsg.xData.push(ele.titleValue.replace(/[^\d]/g, " ")) // this.chartMsg.xData.push(ele.titleValue.replace(/[^\d]/g, " "))
this.otherProps.push({ this.otherProps.push({
label: ele.titleValue, label: ele.titleValue,
filter: (val) => (val || val === 0 ? val : "-"),
prop: 'value' + i prop: 'value' + i
}) })
}) })
@@ -650,7 +673,7 @@ export default {
let i = index + 1 let i = index + 1
let m = 'value' + i let m = 'value' + i
ele.productionSituationDataVOList.forEach((item) => { ele.productionSituationDataVOList.forEach((item) => {
maxData.push(item.ftoInput, item.chipYield, item.componentYield) // maxData.push(item.ftoInput, item.chipYield, item.componentYield)
this.dataArr[0]['' + m + ''] = item.ftoInput this.dataArr[0]['' + m + ''] = item.ftoInput
// this.dataArr[3].factory = item.factory == 1 ? '邯郸' : '瑞昌' // this.dataArr[3].factory = item.factory == 1 ? '邯郸' : '瑞昌'
this.dataArr[1]['' + m + ''] = item.chipYield this.dataArr[1]['' + m + ''] = item.chipYield
@@ -661,26 +684,39 @@ export default {
this.dataArr[3]['' + m + ''] = item.bipvProductOutput this.dataArr[3]['' + m + ''] = item.bipvProductOutput
} }
}) })
this.chartMsg.yAxis.max = Math.ceil(Math.max(...maxData) / 100) * 100
this.chartMsgTarget.yAxis.max = Math.ceil(Math.max(...maxData) / 100) * 100
this.chartMsg.yAxis.min = Math.ceil(Math.min(...maxData) / 100) * 100
this.chartMsgTarget.yAxis.min = Math.ceil(Math.min(...maxData) / 100) * 100
this.chartMsg.yAxis.interval = (this.chartMsg.yAxis.max - this.chartMsg.yAxis.min) / 4
this.chartMsgTarget.yAxis.interval = (this.chartMsgTarget.yAxis.max - this.chartMsgTarget.yAxis.min) / 4
// ele.titleValue // ele.titleValue
// .push({ // .push({
// label: ele.titleValue, // label: ele.titleValue,
// props: 'value' + index + 1, // props: 'value' + index + 1,
// }) // })
}) })
if (this.listQuery.type === 2) {
res.data.list.slice(0, res.data.list.length - 1).forEach((ele, index) => {
ele.productionSituationDataVOList.forEach((item) => {
maxData.push(item.ftoInput, item.chipYield, item.componentYield)
})
})
} else {
res.data.list.forEach((ele, index) => {
ele.productionSituationDataVOList.forEach((item) => {
maxData.push(item.ftoInput, item.chipYield, item.componentYield)
})
})
}
this.chartMsg.yAxis.max = Math.ceil(Math.max(...maxData))
this.chartMsgTarget.yAxis.max = Math.ceil(Math.max(...maxData))
this.chartMsg.yAxis.min = Math.ceil(Math.min(...maxData))
this.chartMsgTarget.yAxis.min = Math.ceil(Math.min(...maxData))
this.chartMsg.yAxis.interval = (this.chartMsg.yAxis.max - this.chartMsg.yAxis.min) / 4
this.chartMsgTarget.yAxis.interval = (this.chartMsgTarget.yAxis.max - this.chartMsgTarget.yAxis.min) / 4
if (this.listQuery.type === 2) { if (this.listQuery.type === 2) {
if (res.data.list.length === 3) { if (res.data.list.length === 3) {
this.gridLeft = false this.gridLeft = false
} else { } else {
this.gridLeft = true this.gridLeft = true
} }
console.log(res.data.list.length); // console.log(res.data.list.length);
// res.data.list.forEach((ele) => { // res.data.list.forEach((ele) => {
res.data.list.slice(0, res.data.list.length - 3).forEach((ele, index) => { res.data.list.slice(0, res.data.list.length - 3).forEach((ele, index) => {
// let i = index + 1 // let i = index + 1
@@ -706,7 +742,7 @@ export default {
} }
}) })
}) })
this.chartMsgTarget.xData.push(res.data.list[res.data.list.length - 2].titleValue) this.chartMsgTarget.xData.push(res.data.list[res.data.list.length - 2].titleValue.slice(0, res.data.list[res.data.list.length - 2].titleValue.length - 3))
// this.chartMsgTarget.series = [{ // this.chartMsgTarget.series = [{
// name: "FTO投入", // name: "FTO投入",
// data: [ // data: [
@@ -734,7 +770,7 @@ export default {
let targetObj = {} let targetObj = {}
let obj = {} let obj = {}
res.data.list.slice(res.data.list.length - 3, res.data.list.length - 1).forEach((ele, index) => { res.data.list.slice(res.data.list.length - 3, res.data.list.length - 1).forEach((ele, index) => {
console.log("ele",ele.titleValue); // console.log("ele",ele.titleValue);
// let i = index + 1 // let i = index + 1
// this.chartMsgTarget.xData.push(ele.titleValue) // this.chartMsgTarget.xData.push(ele.titleValue)
if (ele.titleValue.search('完成') == -1) { if (ele.titleValue.search('完成') == -1) {
@@ -744,7 +780,7 @@ export default {
targetObj.componentYield = item.componentYield targetObj.componentYield = item.componentYield
targetObj.bipvProductOutput = this.currentMenu == '瑞昌' ? null : item.bipvProductOutput targetObj.bipvProductOutput = this.currentMenu == '瑞昌' ? null : item.bipvProductOutput
}) })
console.log("fto",ele.titleValue,fto); // console.log("fto",ele.titleValue,fto);
} else { } else {
ele.productionSituationDataVOList.forEach((item) => { ele.productionSituationDataVOList.forEach((item) => {
obj.ftoInput = item.ftoInput obj.ftoInput = item.ftoInput
@@ -814,7 +850,7 @@ export default {
label: { label: {
show: true, show: true,
color: "rgba(40,138,255)", color: "rgba(40,138,255)",
position: [-18, -16], position: [-10, -16],
formatter: function (params) { formatter: function (params) {
return params.value return params.value
}, },
@@ -834,7 +870,7 @@ export default {
// barGap: '-100%', // barGap: '-100%',
label: { label: {
show: true, show: true,
position: [-18, -16], position: [-10, -16],
color: "rgba(40,138,255,.2)", color: "rgba(40,138,255,.2)",
formatter: function (params) { formatter: function (params) {
return params.value return params.value
@@ -924,7 +960,7 @@ export default {
},) },)
// } // }
this.chartMsgTarget.series = [...fto, ...chip, ...std, ...bipv] this.chartMsgTarget.series = [...fto, ...chip, ...std, ...bipv]
console.log('arr', this.chartMsgTarget.series) // console.log('arr', this.chartMsgTarget.series)
// arr.forEach((ele) => { // arr.forEach((ele) => {
// }) // })
@@ -986,8 +1022,8 @@ export default {
} }
}) })
}) })
console.log(this.chartMsg.series[0]); // console.log(this.chartMsg.series[0]);
this.chartMsgTarget.xData.push(res.data.list[res.data.list.length - 1].titleValue) this.chartMsgTarget.xData.push(res.data.list[res.data.list.length - 1].titleValue.slice(0, res.data.list[res.data.list.length - 1].titleValue.length - 3))
// this.chartMsgTarget.series = [{ // this.chartMsgTarget.series = [{
// name: "FTO投入", // name: "FTO投入",
// data: [ // data: [
@@ -1015,7 +1051,7 @@ export default {
let targetObj = {} let targetObj = {}
let obj = {} let obj = {}
res.data.list.slice(res.data.list.length - 2, res.data.list.length).forEach((ele, index) => { res.data.list.slice(res.data.list.length - 2, res.data.list.length).forEach((ele, index) => {
console.log("ele", ele.titleValue); // console.log("ele", ele.titleValue);
// let i = index + 1 // let i = index + 1
// this.chartMsgTarget.xData.push(ele.titleValue) // this.chartMsgTarget.xData.push(ele.titleValue)
ele.productionSituationDataVOList.forEach((item) => { ele.productionSituationDataVOList.forEach((item) => {
@@ -1024,7 +1060,7 @@ export default {
targetObj.chipYield = item.chipYield targetObj.chipYield = item.chipYield
targetObj.componentYield = item.componentYield targetObj.componentYield = item.componentYield
targetObj.bipvProductOutput = this.currentMenu == '瑞昌' ? null : item.bipvProductOutput targetObj.bipvProductOutput = this.currentMenu == '瑞昌' ? null : item.bipvProductOutput
console.log("fto", ele.titleValue, fto); // console.log("fto", ele.titleValue, fto);
} else { } else {
obj.ftoInput = item.ftoInput obj.ftoInput = item.ftoInput

View File

@@ -7,7 +7,7 @@
<div class="search"> <div class="search">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip"> <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<el-form-item label="时间维度" prop="type"> <el-form-item label="时间维度" prop="type">
<el-select size="small" clearable v-model="listQuery.type" placeholder="请选择"> <el-select size="small" clearable v-model="listQuery.type" placeholder="请选择" @change="handleChange">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"> <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
@@ -107,6 +107,7 @@ export default {
otherProps: [], otherProps: [],
start: undefined, start: undefined,
end: undefined, end: undefined,
currentMenu:'邯郸',
title: '', title: '',
showTable:false, showTable:false,
listQuery: { listQuery: {
@@ -145,13 +146,12 @@ export default {
chartHeight: this.tableHeight(137) / 2 - 111, chartHeight: this.tableHeight(137) / 2 - 111,
tableH: this.tableHeight(137) / 2 - 70, tableH: this.tableHeight(137) / 2 - 70,
legendList: [ legendList: [
{ {id: 2, name: "FTO投入", type: 1, color: "#8EF0AB" },
id: 1, name: "综合良率", type: 2, color: "#FFCE6A" },
{
id: 2, name: "FTO投入", type: 1, color: "#8EF0AB" },
{ id: 3, name: "芯片产量", type: 1, color: "#288AFF" }, { id: 3, name: "芯片产量", type: 1, color: "#288AFF" },
{ id: 4, name: "标准组件产量", type: 1, color: "#64BDFF" },
{ {
id: 4, name: "标准组件产量", type: 1, color: "#64BDFF" }, id: 1, name: "综合良率", type: 2, color: "#FFCE6A"
},
], ],
legendListTarget: [ legendListTarget: [
{ {
@@ -416,12 +416,36 @@ export default {
// this.getOverView() // this.getOverView()
const today = new Date() const today = new Date()
const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000)) const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD') this.listQuery.startDate = this.getFirstDay()
this.listQuery.endDate = moment(today).format('yyyy-MM-DD') this.listQuery.endDate = this.getLastDay()
this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate] this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate]
this.getDataList() this.getDataList()
}, },
methods: { methods: {
getFirstDay() {
//当前月第一天
var y = new Date().getFullYear(); //获取年份
var m = new Date().getMonth() + 1; //获取月份
var d = "01";
m = m < 10 ? "0" + m : m; //月份补 0
return [y, m, d].join("-");
},
getLastDay() {
//当前月最后一天
var y = new Date().getFullYear(); //获取年份
var m = new Date().getMonth() + 1; //获取月份
var d = new Date(y, m, 0).getDate(); //获取当月最后一日
m = m < 10 ? "0" + m : m; //月份补 0
d = d < 10 ? "0" + d : d; //日数补 0
return [y, m, d].join("-");
},
handleChange() {
this.listQuery.reportTime = []
this.listQuery.end = null
this.listQuery.start = null
this.listQuery.endTime = null
this.listQuery.beginTime = null
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) { objectSpanMethod({ row, column, rowIndex, columnIndex }) {
let spanOneArr = [], concatOne = 0; let spanOneArr = [], concatOne = 0;
// let spanTwoArr = [], concatTwo = 0; // let spanTwoArr = [], concatTwo = 0;
@@ -543,6 +567,9 @@ export default {
this.chartMsgYearTarget.xData = [] this.chartMsgYearTarget.xData = []
this.chartMsgYearTarget.series[0].data = [] this.chartMsgYearTarget.series[0].data = []
this.chartMsgYearTarget.series[1].data = [] this.chartMsgYearTarget.series[1].data = []
if (this.listQuery.type == null) {
return this.$message('请选择时间维度')
}
if (!this.listQuery.startDate && !this.listQuery.endDate) { if (!this.listQuery.startDate && !this.listQuery.endDate) {
return this.$message('请选择起止时间') return this.$message('请选择起止时间')
} }
@@ -573,12 +600,22 @@ export default {
if (this.listQuery.type == 2) { if (this.listQuery.type == 2) {
res.data.list.forEach((ele, index) => { res.data.list.forEach((ele, index) => {
let i = index + 1 let i = index + 1
this.chartMsg.xData.push(ele.titleValue) // this.chartMsg.xData.push(ele.titleValue)
this.otherProps.push({ this.otherProps.push({
label: ele.titleValue, label: ele.titleValue,
filter: (val) => (val || val === 0 ? val : "-"),
prop: 'value' + i prop: 'value' + i
}) })
}) })
res.data.list.slice(0,res.data.list.length-1).forEach((ele, index) => {
// let i = index + 1
this.chartMsg.xData.push(ele.titleValue)
// this.otherProps.push({
// label: ele.titleValue,
// filter: (val) => (val || val === 0 ? val : "-"),
// prop: 'value' + i
// })
})
this.chartMsgYearTarget.xData.push('FTO投入', '芯片产量', '标准组件产量', '综合良率') this.chartMsgYearTarget.xData.push('FTO投入', '芯片产量', '标准组件产量', '综合良率')
res.data.list.slice(res.data.list.length - 1, res.data.list.length).forEach((ele) => { res.data.list.slice(res.data.list.length - 1, res.data.list.length).forEach((ele) => {
this.title = ele.titleValue this.title = ele.titleValue
@@ -590,24 +627,36 @@ export default {
this.chartMsgYearTarget.series[0].data = [ this.chartMsgYearTarget.series[0].data = [
{ {
value: item.ftoInput, value: item.ftoInput,
label: {
color: '#8EF0AB'
},
itemStyle: { itemStyle: {
color: '#8EF0AB' color: '#8EF0AB'
} }
}, },
{ {
value: item.chipYield, value: item.chipYield,
label: {
color: '#288AFF'
},
itemStyle: { itemStyle: {
color: '#288AFF' color: '#288AFF'
} }
}, },
{ {
value: item.componentYield, value: item.componentYield,
label: {
color: '#64BDFF'
},
itemStyle: { itemStyle: {
color: '#64BDFF' color: '#64BDFF'
} }
}, },
{ {
value: null, value: null,
label: {
color: '#FFCE6A'
},
itemStyle: { itemStyle: {
color: '#FFCE6A' color: '#FFCE6A'
} }
@@ -615,24 +664,36 @@ export default {
this.chartMsgYearTarget.series[1].data = [ this.chartMsgYearTarget.series[1].data = [
{ {
value: null, value: null,
label: {
color: '#8EF0AB'
},
itemStyle: { itemStyle: {
color: '#8EF0AB' color: '#8EF0AB'
} }
}, },
{ {
value: null, value: null,
label: {
color: '#288AFF'
},
itemStyle: { itemStyle: {
color: '#288AFF' color: '#288AFF'
} }
}, },
{ {
value: null, value: null,
label: {
color: '#64BDFF'
},
itemStyle: { itemStyle: {
color: '#64BDFF' color: '#64BDFF'
} }
}, },
{ {
value: item.ftoInput, value: item.ftoInput,
label: {
color: '#FFCE6A'
},
itemStyle: { itemStyle: {
color: '#FFCE6A' color: '#FFCE6A'
} }
@@ -658,42 +719,35 @@ export default {
dataArr[3]['' + m + ''] = item.comprehensiveYieldRate dataArr[3]['' + m + ''] = item.comprehensiveYieldRate
}) })
}) })
for (let i in dataArr[0]) { // for (let i in chartDataArr[0]) {
this.chartMsg.series[0].name = dataArr[0]['item'] // this.chartMsg.series[0].name = chartDataArr[0]['item']
if (i.search('value') === 0) { // if (i.search('value') === 0) {
// this.chartMsg.series[0].data.push({
// name: chartDataArr[0]['item'],
// value: chartDataArr[0][i] === 0 ? null : chartDataArr[0][i]
// })
// }
// }
res.data.list.slice(0, res.data.list.length - 1).forEach((ele, index) => {
ele.productYieldDataVOList.forEach((item, index) => {
this.chartMsg.series[0].data.push({ this.chartMsg.series[0].data.push({
name: dataArr[0]['item'], name: ele.titleValue,
value: dataArr[0][i] === 0 ? null : dataArr[0][i] value: item.ftoInput === 0 ? null : item.ftoInput
}) })
}
}
for (let i in dataArr[1]) {
this.chartMsg.series[1].name = dataArr[1]['item']
if (i.search('value') === 0) {
this.chartMsg.series[1].data.push({ this.chartMsg.series[1].data.push({
name: dataArr[1]['item'], name: ele.titleValue,
value: dataArr[1][i] === 0 ? null : dataArr[1][i] value: item.chipYield === 0 ? null : item.chipYield
}) })
}
}
for (let i in dataArr[2]) {
this.chartMsg.series[2].name = dataArr[2]['item']
if (i.search('value') === 0) {
this.chartMsg.series[2].data.push({ this.chartMsg.series[2].data.push({
name: dataArr[2]['item'], name: ele.titleValue,
value: dataArr[2][i] === 0 ? null : dataArr[2][i] value: item.componentYield === 0 ? null : item.componentYield
}) })
}
}
for (let i in dataArr[3]) {
this.chartMsg.series[3].name = dataArr[3]['item']
if (i.search('value') === 0) {
this.chartMsg.series[3].data.push({ this.chartMsg.series[3].data.push({
name: dataArr[3]['item'], name: ele.titleValue,
value: dataArr[3][i] === 0 ? null : dataArr[3][i] value: item.comprehensiveYieldRate === 0 ? null : item.comprehensiveYieldRate
}) })
} })
} })
} else { } else {
res.data.list.forEach((ele, index) => { res.data.list.forEach((ele, index) => {
let i = index + 1 let i = index + 1