Compare commits

..

No commits in common. "efa5a7c383eced5daa2e944696b99e744bac37eb" and "af52db4a37a564f69a579be7359000e42886b9ad" have entirely different histories.

87 changed files with 1022 additions and 3593 deletions

View File

@ -1,14 +0,0 @@
<?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>

Before

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -1,13 +1,11 @@
<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 :style="{ color: (changeColor == true ? 'rgba(255, 255, 255, 0.45)' :' rgba(0, 0, 0, .65)')}" <span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">{{
v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">{{ item.meta.title
item.meta.title }}</span>
}}</span> <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
<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>
@ -20,29 +18,7 @@ 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')
// let item =document.getElementsByClassName('')
item[0].style.color = rgba(255, 255, 255, 0.45)
item[1].style.color = rgba(255, 255, 255, 0.45)
} else {
let item = document.getElementsByClassName('el-breadcrumb__separator')
item[0].style.color = ''
item[1].style.color = ''
}
},
$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/')) {
@ -94,20 +70,13 @@ export default {
margin-left: 8px; margin-left: 8px;
.no-redirect { .no-redirect {
color: rgba(0, 0, 0, .45); color: rgba(0, 0, 0, 0.65);
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.65) color: rgba(0, 0, 0, 0.45);
} }
</style> </style>
<!-- <style lang="scss">
.changeColor {
--theme-color: rgba(255, 255, 255, 0.45);
}
.el-breadcrumb__separator {
color:var(--theme-color);
}
</style> -->

View File

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

View File

@ -1,6 +1,5 @@
<template> <template>
<div ref="navbar" class="navbar" <div class="navbar">
:style="changeColor ? 'background: rgba(0, 21, 41, 1);boxShadow:0px 1px 8px 0px rgba(0,131,255,0.35)' : ''">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
@toggleClick="toggleSideBar" /> @toggleClick="toggleSideBar" />
@ -42,13 +41,6 @@ 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
@ -66,23 +58,6 @@ export default {
} }
} }
}, },
watch: {
// changeColor: {
// handler(val){
// if (val == true) {
// let svg = document.getElementsByClassName('hamburger')
// console.log('svg', svg)
// svg[0].style.color = 'rgba(255, 255, 255, 1)'
// svg[0].setAttribute('fill', 'rgba(255, 255, 255, 1)')
// } else {
// let svg = document.getElementsByClassName('hamburger')
// console.log('svg', svg);
// svg[0].setAttribute('fill', '')
// }
// },
// immediate: true, //
// }
},
methods: { methods: {
toggleSideBar() { toggleSideBar() {
this.$store.dispatch('app/toggleSideBar') this.$store.dispatch('app/toggleSideBar')

View File

@ -1,31 +1,25 @@
<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="changeColor === true ? 'darkHome' : 'home'" <svg-icon icon-class="home" style="font-size: 24px; cursor: pointer;" @click="toHome" />
style="font-size: 24px; cursor: pointer;color: aqua;" @click="toHome" />
</div> </div>
<div class="time-msg"> <div class="time-msg">
<div class="line1" :style="changeColor === true ? 'color:rgba(255, 255, 255, 1)' : ''">{{ timeZone <div class="line1">{{ timeZone }}&nbsp;&nbsp;&nbsp;&nbsp;{{ topTime }}</div>
}}&nbsp;&nbsp;&nbsp;&nbsp;{{ topTime }}</div> <div class="line2">{{ topDate }}</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> <el-dropdown-item><svg-icon icon-class="helpbtn" />帮助文档</el-dropdown-item>
<svg-icon icon-class="helpbtn" />帮助文档 <el-dropdown-item @click.native="logout"><svg-icon icon-class="exitbtn" />退出登录</el-dropdown-item>
</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 :style="changeColor === true ? 'color:rgba(255, 255, 255, 1)' : ''" class="line1">{{ nickname }}</div> <div class="line1">{{ nickname }}</div>
<div :style="changeColor === true ? 'color:rgba(255, 255, 255, .65)' : ''" class="line2">{{ dept }}</div> <div class="line2">{{ dept }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -54,15 +48,6 @@ 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()
@ -139,4 +124,4 @@ export default {
opacity: 0.65; opacity: 0.65;
} }
} }
</style> </style>

View File

@ -1,10 +1,3 @@
<!--
* @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 />
@ -24,9 +17,7 @@ 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,7 +1,5 @@
<template> <template>
<div ref="tagsViewContainer" <div id="tags-view-container" class="tags-view-container">
: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"
@ -38,13 +36,6 @@ 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
}, },
@ -53,31 +44,9 @@ 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()
@ -91,7 +60,6 @@ export default {
} }
}, },
mounted() { mounted() {
console.log(this.$route, this.changeColor);
this.initTags() this.initTags()
this.addTags() this.addTags()
}, },
@ -100,23 +68,11 @@ export default {
return route.path === this.$route.path return route.path === this.$route.path
}, },
activeStyle(tag) { activeStyle(tag) {
if (this.changeColor) { if (!this.isActive(tag)) return {};
if (!this.isActive(tag)) return { return {
"background-color": 'rgba(0, 59, 115, 1)', "background-color": this.theme,
"border-color": 'rgba(0, 59, 115, 1)', "border-color": this.theme
"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
@ -274,14 +230,6 @@ 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%;
@ -297,8 +245,8 @@ export default {
cursor: pointer; cursor: pointer;
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
color: var(--theme-color,rgba(0, 0, 0, 0.45)); color: rgba(0, 0, 0, 0.45);
background:var(--theme-background,#f4f4f4ff); background: #F4F4F4FF;
padding: 0 8px 0 12px; padding: 0 8px 0 12px;
font-size: 14px; font-size: 14px;
letter-spacing: 1px; letter-spacing: 1px;
@ -383,7 +331,7 @@ export default {
.el-icon-close { .el-icon-close {
&:hover { &:hover {
background-color: #fff; background-color: #fff;
color: rgba(62, 142, 247, 1); color: #409eff;
} }
} }
} }

View File

@ -2,8 +2,7 @@
<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 :style="changeColor ? 'background: rgba(0, 21, 41, 1)' : ''" ref="mainContainer" <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
: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" />
@ -40,13 +39,6 @@ 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,
@ -59,16 +51,6 @@ 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

@ -1,15 +1,8 @@
<!-- <!--
* @Author: zhp
* @Date: 2024-06-03 15:38:31
* @LastEditTime: 2024-07-09 15:59:41
* @LastEditors: zhp
* @Description:
-->
<!--
filename: ChartContainer.vue filename: ChartContainer.vue
author: liubin author: liubin
date: 2024-04-10 08:54:33 date: 2024-04-10 08:54:33
description: description:
todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高 todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高
--> -->
@ -50,7 +43,7 @@ export default {
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 80%; width: 8px;
height: 8px; height: 8px;
} }

View File

@ -62,32 +62,7 @@ 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,
@ -213,13 +188,13 @@ export default {
this.canvasReset() this.canvasReset()
}, },
isFullscreen(val) { isFullscreen(val) {
this.options.series.map((item) => { this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12; item.barWidth = val ? 18 : 12;
}); });
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12; this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12; this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12; this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.options); this.initChart(this.actualOptions);
// this.actualOptions.series.map((item) => { // this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12; // item.barWidth = val ? 18 : 12;
// }); // });
@ -234,14 +209,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)
this.options.series[0].data = val[0].data; actualOptions.series[0].data = val[0].data;
this.options.series[0].name = val[0].name; actualOptions.series[0].name = val[0].name;
this.options.series[1].data = val?.[1]?.data || []; actualOptions.series[1].data = val?.[1]?.data || [];
this.options.series[1].name = val?.[1]?.name || ""; actualOptions.series[1].name = val?.[1]?.name || "";
// this.actualOptions = actualOptions; this.actualOptions = actualOptions;
this.initChart(this.options); this.initChart(actualOptions);
}, },
}, },
mounted() { mounted() {
@ -250,7 +225,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);
}, },
@ -274,7 +249,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.options); this.chart.setOption(this.actualOptions);
}, },
}, },
}; };

View File

@ -122,7 +122,7 @@ export default {
gap: 8px; gap: 8px;
.container-title { .container-title {
font-size: 1vw; font-size: 1.18vw;
line-height: 1.39vw; line-height: 1.39vw;
font-weight: normal; font-weight: normal;
letter-spacing: 2px; letter-spacing: 2px;

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-07-09 16:55:58 * @LastEditTime: 2024-05-07 16:54:54
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -61,8 +61,8 @@ export default {
.container-icon { .container-icon {
// width: 32px; // width: 32px;
// height: 32px; // height: 32px;
width: 1.4vw; width: 1.701vw;
height: 1.4vw; height: 1.701vw;
background: #ccc2; background: #ccc2;
} }
</style> </style>

View File

@ -1,226 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-07-09 15:07:50
* @LastEditTime: 2024-07-09 15:41:38
* @LastEditors: zhp
* @Description:
-->
<!--
* @Author: zhp
* @Date: 2024-06-05 09:43:51
* @LastEditTime: 2024-07-09 15:06:52
* @LastEditors: zhp
* @Description:
-->
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
background: none;
color: #fff;
cursor: pointer;
position: absolute;
top: 8px;
right: 8px;
" @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">
<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>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]">
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-left: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 10%,
#024798 20%,
transparent 90%) 1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
right: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 100%,
transparent
);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 90%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
bottom: 0;
background: linear-gradient(to right, transparent 60%, #024798 98%, transparent 90%);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid transparent;
border-bottom: .6vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
border-left: 0.532vw solid transparent;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid #0175dc;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
// transform: rotate(-90deg);
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

View File

@ -1,219 +0,0 @@
<!--
filename: Container.vue
author: liubin
date: 2024-04-09 10:44:09
description:
-->
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
background: none;
color: #fff;
cursor: pointer;
position: absolute;
top: 8px;
right: 8px;
" @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">
<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>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]">
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-right: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 10%,
#024798 20%,
transparent 90%) 1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 100%,
transparent
);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 95%;
height: 0.31415vh;
border-radius: 2px;
right: 3%;
bottom: 0;
background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid #0175dc;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
// transform: rotate(-90deg);
border-left: 0.532vw solid transparent;
border-bottom: .6vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

View File

@ -1,219 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-07-09 15:15:00
* @LastEditTime: 2024-07-09 15:36:49
* @LastEditors: zhp
* @Description:
-->
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
background: none;
color: #fff;
cursor: pointer;
position: absolute;
top: 8px;
right: 8px;
" @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">
<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>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]">
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-left: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 5%,
#024798 10%,
transparent 90%) 1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
right: 0;
background: radial-gradient(
circle at center,
#024798 5%,
#024798 100%,
transparent
);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 90%;
height: 0.31415vh;
border-radius: 2px;
left: 10%;
bottom: 0;
background: linear-gradient(to right,transparent 60%, #024798 95%, transparent 97%);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid transparent;
border-bottom: .6vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
border-left: 0.532vw solid transparent;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid #0175dc;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
// transform: rotate(-90deg);
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

View File

@ -1,219 +0,0 @@
<!--
filename: Container.vue
author: liubin
date: 2024-04-09 10:44:09
description:
-->
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
background: none;
color: #fff;
cursor: pointer;
position: absolute;
top: 8px;
right: 8px;
" @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">
<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>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]">
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-right: 0.11415vw solid;
border-image: linear-gradient(to bottom,transparent 5%,
#024798 10%,
transparent 90%) 1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 100%,
transparent
);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 95%;
height: 0.31415vh;
border-radius: 2px;
right: 3%;
bottom: 0;
background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid #0175dc;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
// transform: rotate(-90deg);
border-left: 0.532vw solid transparent;
border-bottom: .6vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-23 15:49:14 * @Date: 2024-05-23 15:49:14
* @LastEditTime: 2024-07-03 14:08:52 * @LastEditTime: 2024-06-04 08:54:10
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -63,32 +63,7 @@ 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,
@ -214,13 +189,13 @@ export default {
this.canvasReset() this.canvasReset()
}, },
isFullscreen(val) { isFullscreen(val) {
this.options.series.map((item) => { this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12; item.barWidth = val ? 18 : 12;
}); });
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12; this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12; this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12; this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.options); this.initChart(this.actualOptions);
// this.actualOptions.series.map((item) => { // this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12; // item.barWidth = val ? 18 : 12;
// }); // });
@ -235,14 +210,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)
this.options.series[0].data = val[0].data; actualOptions.series[0].data = val[0].data;
this.options.series[0].name = val[0].name; actualOptions.series[0].name = val[0].name;
this.options.series[1].data = val[1].data; actualOptions.series[1].data = val[1].data;
this.options.series[1].name = val[1].name; actualOptions.series[1].name = val[1].name;
// this.actualOptions = actualOptions; this.actualOptions = actualOptions;
this.initChart(this.options); this.initChart(actualOptions);
}, },
}, },
mounted() { mounted() {
@ -251,7 +226,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);
}, },
@ -275,7 +250,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.options); this.chart.setOption(this.actualOptions);
}, },
}, },
}; };

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-06-05 09:43:51 * @Date: 2024-06-05 09:43:51
* @LastEditTime: 2024-07-09 15:35:19 * @LastEditTime: 2024-06-05 09:43:52
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -80,25 +80,23 @@ export default {
flex-direction: column; flex-direction: column;
position: relative; position: relative;
box-shadow: inset 0 0 20px 1px #fff1; box-shadow: inset 0 0 20px 1px #fff1;
border-left: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 10%,
#024798 20%,
transparent 90%) 1;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
display: inline-block; display: inline-block;
height: 92%; height: 100%;
width: 0.11415vw; width: 0.11415vw;
border-radius: 2px; border-radius: 2px;
top: 0%; top: 0%;
right: 0; left: 0;
background: radial-gradient(circle at center, background: radial-gradient(
#024798 2%, circle at center,
#024798 100%, #024798 2%,
transparent); #024798 30%,
transparent
);
z-index: 1; z-index: 1;
} }
@ -106,12 +104,12 @@ export default {
content: ""; content: "";
position: absolute; position: absolute;
display: inline-block; display: inline-block;
width: 90%; width: 60%;
height: 0.31415vh; height: 0.31415vh;
border-radius: 2px; border-radius: 2px;
left: 7%; left: 8%;
bottom: 0; bottom: 0;
background: linear-gradient(to right,transparent 60%, #024798 95%, transparent 97%); background: linear-gradient(to right, #024798, transparent);
z-index: 0; z-index: 0;
} }
@ -124,7 +122,7 @@ export default {
gap: 8px; gap: 8px;
.container-title { .container-title {
font-size: 1vw; font-size: 1.18vw;
line-height: 1.39vw; line-height: 1.39vw;
font-weight: normal; font-weight: normal;
letter-spacing: 2px; letter-spacing: 2px;

View File

@ -73,7 +73,6 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 0; height: 0;
flex: 1; flex: 1;
@ -81,17 +80,13 @@ export default {
flex-direction: column; flex-direction: column;
position: relative; position: relative;
box-shadow: inset 0 0 20px 1px #fff1; box-shadow: inset 0 0 20px 1px #fff1;
border-right: 0.11415vw solid;
border-image: linear-gradient(to bottom,transparent 10%,
#024798 20%,
transparent 90%) 1;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
display: inline-block; display: inline-block;
height: 92%; height: 100%;
width: 0.11415vw; width: 0.11415vw;
border-radius: 2px; border-radius: 2px;
top: 0%; top: 0%;
@ -99,7 +94,7 @@ export default {
background: radial-gradient( background: radial-gradient(
circle at center, circle at center,
#024798 2%, #024798 2%,
#024798 100%, #024798 30%,
transparent transparent
); );
z-index: 1; z-index: 1;
@ -109,12 +104,12 @@ export default {
content: ""; content: "";
position: absolute; position: absolute;
display: inline-block; display: inline-block;
width: 95%; width: 60%;
height: 0.31415vh; height: 0.31415vh;
border-radius: 2px; border-radius: 2px;
right: 1%; left: 8%;
bottom: 0; bottom: 0;
background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%); background: linear-gradient(to right, #024798, transparent);
z-index: 0; z-index: 0;
} }
@ -127,7 +122,7 @@ export default {
gap: 8px; gap: 8px;
.container-title { .container-title {
font-size: 1vw; font-size: 1.18vw;
line-height: 1.39vw; line-height: 1.39vw;
font-weight: normal; font-weight: normal;
letter-spacing: 2px; letter-spacing: 2px;

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-06-05 09:48:37 * @Date: 2024-06-05 09:48:37
* @LastEditTime: 2024-07-09 15:35:04 * @LastEditTime: 2024-06-05 09:53:49
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -99,7 +99,6 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 0; height: 0;
flex: 1; flex: 1;
@ -107,25 +106,23 @@ export default {
flex-direction: column; flex-direction: column;
position: relative; position: relative;
box-shadow: inset 0 0 20px 1px #fff1; box-shadow: inset 0 0 20px 1px #fff1;
border-right: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 10%,
#024798 20%,
transparent 90%) 1;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
display: inline-block; display: inline-block;
height: 92%; height: 100%;
width: 0.11415vw; width: 0.11415vw;
border-radius: 2px; border-radius: 2px;
top: 0%; top: 0%;
left: 0; left: 0;
background: radial-gradient(circle at center, background: radial-gradient(
#024798 2%, circle at center,
#024798 100%, #024798 2%,
transparent); #024798 30%,
transparent
);
z-index: 1; z-index: 1;
} }
@ -136,7 +133,7 @@ export default {
width: 60%; width: 60%;
height: 0.31415vh; height: 0.31415vh;
border-radius: 2px; border-radius: 2px;
left: 6%; left: 8%;
bottom: 0; bottom: 0;
background: linear-gradient(to right, #024798, transparent); background: linear-gradient(to right, #024798, transparent);
z-index: 0; z-index: 0;
@ -151,7 +148,7 @@ export default {
gap: 8px; gap: 8px;
.container-title { .container-title {
font-size: 1vw; font-size: 1.18vw;
line-height: 1.39vw; line-height: 1.39vw;
font-weight: normal; font-weight: normal;
letter-spacing: 2px; letter-spacing: 2px;

View File

@ -63,47 +63,49 @@ export default {
const year = new Date().getFullYear(); const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') { if (this.period === '日' && this.than === '同比') {
items = [ items = [
{ label: `${yesterday}日目标`, color: "#58adfa" },
{ label: `${year - 1}${yesterday}`, color: "#12f7f1" }, { label: `${year - 1}${yesterday}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" }, { label: `${yesterday}`, color: "#58adfa" },
{ label: `${yesterday}日目标`, color: "#58adfa" },
]; ];
} else if (this.period === '日' && this.than === '环比') { } else if (this.period === '日' && this.than === '环比') {
items = [ items = [
{ label: `${yesterday}日目标`, color: "#58adfa" },
{ label: `${dayBeYes}`, color: "#12f7f1" }, { label: `${dayBeYes}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" }, { label: `${yesterday}`, color: "#58adfa" },
{ label: `${yesterday}日目标`, color: "#58adfa" },
]; ];
} else if (this.period === '周' && this.than === '同比') { } else if (this.period === '周' && this.than === '同比') {
items = [ items = [
{ label: `本周目标`, color: "#58adfa" }, { label: `${year-1}年本周`, color: "#12f7f1" },
{ label: `${year - 1}年本周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" }, { label: `本周`, color: "#58adfa" },
{ label: `本周目标`, color: "#58adfa" },
]; ];
} else if (this.period === '周' && this.than === '环比') { } else if (this.period === '周' && this.than === '环比') {
items = [ items = [
{ label: `本周目标`, color: "#58adfa" },
{ label: `上周`, color: "#12f7f1" }, { label: `上周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" }, { label: `本周`, color: "#58adfa" },
{ label: `本周目标`, color: "#58adfa" },
]; ];
} else if (this.period === '月' && this.than === '同比') { } else if (this.period === '月' && this.than === '同比') {
items = [ items = [
{ label: `${month}月目标`, color: "#58adfa" }, { label: `${year-1}${month}`, color: "#12f7f1" },
{ label: `${year - 1}${month}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" }, { label: `${month}`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
// { label: `${month}`, value: valueTuple[2] }, // { label: `${month}`, value: valueTuple[2] },
]; ];
} else if (this.period === '月' && this.than === '环比') { } else if (this.period === '月' && this.than === '环比') {
items = [ items = [
{ label: `${month}月目标`, color: "#58adfa" },
{ label: `${lastMonth}`, color: "#12f7f1" }, { label: `${lastMonth}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" }, { label: `${month}`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
// { label: `${month}`, value: valueTuple[2] }, // { label: `${month}`, value: valueTuple[2] },
]; ];
} else { } else {
items = [ items = [
{ label: `${year}年目标`, color: "#58adfa" },
{ label: `${year - 1}`, color: "#12f7f1" }, { label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" }, { label: `${year}`, color: "#58adfa" },
{ label: `${year}年目标`, color: "#58adfa" },
// { label: `${year}`, value: valueTuple[2] }, // { label: `${year}`, value: valueTuple[2] },
]; ];
} }

View File

@ -63,47 +63,49 @@ export default {
const year = new Date().getFullYear(); const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') { if (this.period === '日' && this.than === '同比') {
items = [ items = [
{ label: `${yesterday}日目标`, color: "#58adfa" },
{ label: `${year - 1}${yesterday}`, color: "#12f7f1" }, { label: `${year - 1}${yesterday}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" }, { label: `${yesterday}`, color: "#58adfa" },
{ label: `${yesterday}日目标`, color: "#58adfa" },
]; ];
} else if (this.period === '日' && this.than === '环比') { } else if (this.period === '日' && this.than === '环比') {
items = [ items = [
{ label: `${yesterday}日目标`, color: "#58adfa" },
{ label: `${dayBeYes}`, color: "#12f7f1" }, { label: `${dayBeYes}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" }, { label: `${yesterday}`, color: "#58adfa" },
{ label: `${yesterday}日目标`, color: "#58adfa" },
]; ];
} else if (this.period === '周' && this.than === '同比') { } else if (this.period === '周' && this.than === '同比') {
items = [ items = [
{ label: `本周目标`, color: "#58adfa" }, { label: `${year-1}年本周`, color: "#12f7f1" },
{ label: `${year - 1}年本周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" }, { label: `本周`, color: "#58adfa" },
{ label: `本周目标`, color: "#58adfa" },
]; ];
} else if (this.period === '周' && this.than === '环比') { } else if (this.period === '周' && this.than === '环比') {
items = [ items = [
{ label: `本周目标`, color: "#58adfa" },
{ label: `上周`, color: "#12f7f1" }, { label: `上周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" }, { label: `本周`, color: "#58adfa" },
{ label: `本周目标`, color: "#58adfa" },
]; ];
} else if (this.period === '月' && this.than === '同比') { } else if (this.period === '月' && this.than === '同比') {
items = [ items = [
{ label: `${month}月目标`, color: "#58adfa" }, { label: `${year-1}${month}`, color: "#12f7f1" },
{ label: `${year - 1}${month}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" }, { label: `${month}`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
// { label: `${month}`, value: valueTuple[2] }, // { label: `${month}`, value: valueTuple[2] },
]; ];
} else if (this.period === '月' && this.than === '环比') { } else if (this.period === '月' && this.than === '环比') {
items = [ items = [
{ label: `${month}月目标`, color: "#58adfa" },
{ label: `${lastMonth}`, color: "#12f7f1" }, { label: `${lastMonth}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" }, { label: `${month}`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
// { label: `${month}`, value: valueTuple[2] }, // { label: `${month}`, value: valueTuple[2] },
]; ];
} else { } else {
items = [ items = [
{ label: `${year}年目标`, color: "#58adfa" },
{ label: `${year - 1}`, color: "#12f7f1" }, { label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" }, { label: `${year}`, color: "#58adfa" },
{ label: `${year}年目标`, color: "#58adfa" },
// { label: `${year}`, value: valueTuple[2] }, // { label: `${year}`, value: valueTuple[2] },
]; ];
} }

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-07 13:22:43 * @Date: 2024-05-07 13:22:43
* @LastEditTime: 2024-07-09 14:51:21 * @LastEditTime: 2024-06-17 09:22:17
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -62,35 +62,7 @@ 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/>" +
`${params[i].seriesType === "line"
? '<img width="11" height="11" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />'
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;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,
@ -269,7 +241,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.options) this.initChart(this.actualOptions)
this.canvasReset() this.canvasReset()
}, },
series(val) { series(val) {
@ -280,14 +252,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)
this.options.series[0].data = val[0].data; actualOptions.series[0].data = val[0].data;
this.options.series[0].name = val[0].name; actualOptions.series[0].name = val[0].name;
this.options.series[1].data = val?.[1]?.data; actualOptions.series[1].data = val?.[1]?.data;
this.options.series[1].name = val?.[1]?.name; actualOptions.series[1].name = val?.[1]?.name;
this.options.series[2].data = val?.[2]?.data || []; actualOptions.series[2].data = val?.[2]?.data || [];
this.options.series[2].name = val?.[2]?.name || ""; actualOptions.series[2].name = val?.[2]?.name || "";
this.actualOptions = actualOptions; this.actualOptions = actualOptions;
this.initChart(this.options); this.initChart(actualOptions);
}, },
}, },
mounted() { mounted() {
@ -301,7 +273,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);
}, },
@ -324,7 +296,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.options); this.chart.setOption(this.actualOptions);
}, },
}, },
}; };
@ -356,10 +328,10 @@ export default {
margin-right: 0.22vw; margin-right: 0.22vw;
} }
} }
.legend-item:nth-child(1) { .legend-item:nth-child(3) {
margin-left: 1vw; margin-left: 1vw;
} }
.legend-item:nth-child(1):before { .legend-item:nth-child(3):before {
// width: 12px; // width: 12px;
// height: 2px; // height: 2px;
width: 1vw; width: 1vw;
@ -368,11 +340,11 @@ export default {
position: absolute; position: absolute;
top: 50%; top: 50%;
// left: -16px; // left: -16px;
left: -1.3vw; left: -0.951vw;
transform: translateY(-50%); transform: translateY(-50%);
} }
.legend-item:nth-child(1):after { .legend-item:nth-child(3):after {
background-color: #f3c000; background-color: #f3c000;
content: ""; content: "";
display: inline-block; display: inline-block;
@ -383,15 +355,15 @@ export default {
height: 0.3191vw; height: 0.3191vw;
border-radius: 100%; border-radius: 100%;
top: 50%; top: 50%;
left: -1.13vw; left: -0.851vw;
// left: -16px; // left: -16px;
transform: translateY(-50%) translateX(50%); transform: translateY(-50%) translateX(50%);
} }
.legend-item:nth-child(2):before { .legend-item:nth-child(1):before {
background-color: #12f7f1; background-color: #12f7f1;
} }
.legend-item:nth-child(3):before { .legend-item:nth-child(2):before {
background-color: #58adfa; background-color: #58adfa;
} }
} }

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-23 15:50:44 * @Date: 2024-05-23 15:50:44
* @LastEditTime: 2024-07-09 14:57:49 * @LastEditTime: 2024-06-17 09:23:39
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -62,35 +62,7 @@ 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/>" +
`${params[i].seriesType === "line"
? '<img width="11" height="11" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />'
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;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,
@ -269,7 +241,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.options) this.initChart(this.actualOptions)
this.canvasReset() this.canvasReset()
}, },
series(val) { series(val) {
@ -278,15 +250,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))
this.options.series[0].data = val[0].data; actualOptions.series[0].data = val[0].data;
this.options.series[0].name = val[0].name; actualOptions.series[0].name = val[0].name;
this.options.series[1].data = val?.[1]?.data || []; actualOptions.series[1].data = val?.[1]?.data || [];
this.options.series[1].name = val?.[1]?.name || ""; actualOptions.series[1].name = val?.[1]?.name || "";
this.options.series[2].data = val?.[2]?.data || []; actualOptions.series[2].data = val?.[2]?.data || [];
this.options.series[2].name = val?.[2]?.name || ""; actualOptions.series[2].name = val?.[2]?.name || "";
// this.actualOptions = actualOptions; this.actualOptions = actualOptions;
this.initChart(this.options); this.initChart(actualOptions);
}, },
}, },
mounted() { mounted() {
@ -300,7 +272,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);
}, },
@ -323,7 +295,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.options); this.chart.setOption(this.actualOptions);
}, },
}, },
}; };
@ -355,43 +327,43 @@ export default {
margin-right: 0.22vw; margin-right: 0.22vw;
} }
} }
.legend-item:nth-child(1) { .legend-item:nth-child(3) {
margin-left: 1vw; margin-left: 1vw;
} }
.legend-item:nth-child(2):before { .legend-item:nth-child(1):before {
background-color: #12f7f1; background-color: #12f7f1;
} }
.legend-item:nth-child(3):before { .legend-item:nth-child(2):before {
background-color: #58adfa; background-color: #58adfa;
} }
.legend-item:nth-child(1):before { .legend-item:nth-child(3):before {
// width: 12px; // width: 12px;
// height: 2px; // height: 2px;
width: 1vw; width: 1vw;
height: 0.1064vw; height: 0.1064vw;
background-color: #f3c000; background-color: #f3c000;
position: absolute; position: absolute;
top: 50%; top: 50%;
// left: -16px; // left: -16px;
left: -1.3vw; left: -0.951vw;
transform: translateY(-50%); transform: translateY(-50%);
} }
.legend-item:nth-child(1):after { .legend-item:nth-child(3):after {
background-color: #f3c000; background-color: #f3c000;
content: ""; content: "";
display: inline-block; display: inline-block;
position: absolute; position: absolute;
// width: 6px; // width: 6px;
// height: 6px; // height: 6px;
width: 0.3191vw; width: 0.3191vw;
height: 0.3191vw; height: 0.3191vw;
border-radius: 100%; border-radius: 100%;
top: 50%; top: 50%;
left: -1.13vw; left: -0.851vw;
// left: -16px; // left: -16px;
transform: translateY(-50%) translateX(50%); transform: translateY(-50%) translateX(50%);
} }
} }
</style> </style>

View File

@ -318,8 +318,6 @@ 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;
@ -373,6 +371,8 @@ export default {
background: #003982; background: #003982;
} }
.legend-item__value { .legend-item__value {
font-size: 24px;
font-weight: 600;
} }
} }
</style> </style>

View File

@ -52,7 +52,7 @@ export default {
? 0 ? 0
: this.current != 0 && this.target != 0 : this.current != 0 && this.target != 0
? `${((this.current / this.target) * 100).toFixed(2)}%` ? `${((this.current / this.target) * 100).toFixed(2)}%`
: this.current != 0 && this.target == 0 && this.current >= 100 ? 100 + '%' : this.current != 0 && this.target == 0 && this.current < 100 ? parseFloat(this.current).toFixed(2) + '%' : 0 + '%' : this.current != 0 && this.target == 0 && this.current >= 100 ? 100 + '%' : this.current != 0 && this.target == 0 && this.current < 100 ? this.current + '%' : 0 + '%'
// } else if(this.previous != 0) { // } else if(this.previous != 0) {
// return this.previous + '%' // return this.previous + '%'
// } // }

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-07 10:25:10 * @Date: 2024-05-07 10:25:10
* @LastEditTime: 2024-07-09 15:04:24 * @LastEditTime: 2024-06-27 09:13:38
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -150,7 +150,7 @@ export default {
align-items: center; align-items: center;
gap: 8px; gap: 8px;
flex: 1 1 auto; flex: 1 1 auto;
padding: 16px; padding: 12px;
} }
.std-rate-item__value { .std-rate-item__value {

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-06-27 09:12:54 * @Date: 2024-06-27 09:12:54
* @LastEditTime: 2024-07-09 15:02:46 * @LastEditTime: 2024-06-27 09:14:21
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -49,7 +49,7 @@ export default {
dataRate() { dataRate() {
// if (this.current != 0 && this.target != 0) { // if (this.current != 0 && this.target != 0) {
// console.log( '1111111111', this.current, this.target,this.previous); // console.log( '1111111111', this.current, this.target,this.previous);
return this.previous >= 100 ? 100 + '%' : parseFloat(this.previous).toFixed(2) + '%'; return this.previous >=100 ? 100 + '%' : this.previous + '%';
// } else if(this.previous != 0) { // } else if(this.previous != 0) {
// return this.previous + '%' // return this.previous + '%'
// } // }

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-07-09 15:16:43 * @LastEditTime: 2024-07-01 12:27:45
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -30,9 +30,8 @@
</template> </template>
<script> <script>
import Container from "@/views/copilot/components/efficiencyRightContainer.vue"; import Container from "@/views/copilot/components/rightContainer.vue";
import leftContainer from "@/views/copilot/components/efficiencyLeftContainer.vue"; import leftContainer from "@/views/copilot/components/leftContainer.vue";
import ChipOeeVue from "./components/ChipOee.vue"; import ChipOeeVue from "./components/ChipOee.vue";
import ChipRateVue from "./components/ChipRate.vue"; import ChipRateVue from "./components/ChipRate.vue";
import StdRateVue from "./components/StdRate.vue"; import StdRateVue from "./components/StdRate.vue";

View File

@ -1,4 +1,4 @@
export default ({ export default ({
titleValue, titleValue,
subtitle, subtitle,
previousSum, previousSum,
@ -15,12 +15,7 @@
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%",
@ -67,8 +62,7 @@
value: currentSum, value: currentSum,
name: currentName, name: currentName,
tooltip: { tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` + formatter: `${currentName} : ${currentSum}`
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
}, },
selected: false, selected: false,
itemStyle: { itemStyle: {
@ -93,8 +87,7 @@
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum), value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
name: currentName, name: currentName,
tooltip: { tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` + formatter: `${currentName} : ${currentSum}`
`<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 },
@ -118,8 +111,7 @@
value: previousSum, value: previousSum,
name: preName, name: preName,
tooltip: { tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` + formatter: `${preName} : ${previousSum}`
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
}, },
selected: false, selected: false,
itemStyle: { itemStyle: {
@ -144,8 +136,7 @@
value:previousSum === 0 ? 1 : 0, value:previousSum === 0 ? 1 : 0,
name: preName, name: preName,
tooltip: { tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` + formatter: `${preName} : ${previousSum}`
`<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

@ -80,7 +80,7 @@ export default {
res += res +=
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` + `<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='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>`; `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value + '片'}</span>`;
} }
return res; return res;
}, },
@ -117,7 +117,6 @@ 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,

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-30 08:58:39 * @Date: 2024-05-30 08:58:39
* @LastEditTime: 2024-07-03 14:10:06 * @LastEditTime: 2024-07-02 10:53:34
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -110,7 +110,7 @@ export default {
"<br/>" + "<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` + `<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='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>`; `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value + '片'}</span>`;
} }
return res; return res;
}, },
@ -132,7 +132,6 @@ export default {
}, },
yAxis: { yAxis: {
name: "单位/片", name: "单位/片",
position: 'left',
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,
@ -338,7 +337,6 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.bar-chart-base { .bar-chart-base {
// position: relative; // position: relative;
@ -352,7 +350,7 @@ export default {
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;

View File

@ -1,15 +1,8 @@
<!-- <!--
* @Author: zhp
* @Date: 2024-06-03 15:38:31
* @LastEditTime: 2024-07-09 16:49:22
* @LastEditors: zhp
* @Description:
-->
<!--
filename: ContainerIcon.vue filename: ContainerIcon.vue
author: liubin author: liubin
date: 2024-04-09 16:41:36 date: 2024-04-09 16:41:36
description: description:
--> -->
<template> <template>
@ -56,8 +49,8 @@ export default {
.container-icon { .container-icon {
// width: 32px; // width: 32px;
// height: 32px; // height: 32px;
width: 1.4vw; width: 1.701vw;
height: 1.4vw; height: 1.701vw;
background: #ccc2; background: #ccc2;
} }
</style> </style>

View File

@ -40,7 +40,6 @@ 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"],
@ -114,19 +113,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(2) * 100 + "%" ? this.prodOrder[i].productionProgress.toFixed(0) + "%"
: "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(2) *100 * ? this.prodOrder[i].productionProgress.toFixed(0) *
37.68 * 37.68 *
0.01 + 0.01 +
"," + "," +
(1 - (1 -
this.prodOrder[i].productionProgress.toFixed(2) * 0.01) * 100 * this.prodOrder[i].productionProgress.toFixed(0) * 0.01) *
37.68 37.68
: 0 + "," + 37.68 : 0 + "," + 37.68
}"/> }"/>

View File

@ -192,12 +192,15 @@ export default {
this.makeData(); this.makeData();
this.$nextTick(() => { this.$nextTick(() => {
let button = document.getElementsByClassName('button-than') let button = document.getElementsByClassName('button-than')
console.log(button);
button[0].children[0].style.borderRadius = '4px 0 0 4px' button[0].children[0].style.borderRadius = '4px 0 0 4px'
button[0].children[1].style.borderRadius = '0px 4px 4px 0' button[0].children[1].style.borderRadius = '0px 4px 4px 0'
console.log(button[0].children[0].style);
}) })
}, },
methods: { methods: {
makeData() { makeData() {
console.log('msgObj', this.msgObj);
this.msgObj.chip = {}; this.msgObj.chip = {};
this.msgObj.stand = {}; this.msgObj.stand = {};
this.msgObj.bipv = {}; this.msgObj.bipv = {};
@ -246,7 +249,7 @@ 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;
} }

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-07-02 13:54:08 * @LastEditTime: 2024-06-07 10:53:39
* @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

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-06-05 09:36:07 * @Date: 2024-06-05 09:36:07
* @LastEditTime: 2024-07-09 16:54:24 * @LastEditTime: 2024-06-05 09:38:23
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -80,7 +80,6 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 0; height: 0;
flex: 1; flex: 1;
@ -88,23 +87,21 @@ export default {
flex-direction: column; flex-direction: column;
position: relative; position: relative;
box-shadow: inset 0 0 20px 1px #fff1; box-shadow: inset 0 0 20px 1px #fff1;
border-left: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 2%, rgba(5, 138, 237, .7) 20%, rgba(2, 82, 215, 0.24) 70%, ) 71 71;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
display: inline-block; display: inline-block;
height: 96%; height: 100%;
width: 0.11415vw; width: 0.11415vw;
border-radius: 2px; border-radius: 2px;
top: 0%; top: 0%;
right: 0; left: 0;
background: radial-gradient( background: radial-gradient(
circle at center, circle at center,
#024798 2%, #024798 2%,
#024798 100%, #024798 30%,
transparent transparent
); );
z-index: 1; z-index: 1;
@ -114,12 +111,12 @@ export default {
content: ""; content: "";
position: absolute; position: absolute;
display: inline-block; display: inline-block;
width: 80%; width: 60%;
height: 0.31415vh; height: 0.31415vh;
border-radius: 2px; border-radius: 2px;
right: 4%; left: 8%;
bottom: 0; bottom: 0;
background: linear-gradient(to right, transparent 10%, #024798 95%, transparent 98%); background: linear-gradient(to right, #024798, transparent);
z-index: 0; z-index: 0;
} }
@ -132,7 +129,7 @@ export default {
gap: 8px; gap: 8px;
.container-title { .container-title {
font-size: 1vw; font-size: 1.18vw;
line-height: 1.39vw; line-height: 1.39vw;
font-weight: normal; font-weight: normal;
letter-spacing: 2px; letter-spacing: 2px;

View File

@ -33,7 +33,7 @@
<!-- 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 style="margin-left: 16px;" :icon="icon"></Icon> <Icon :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2> <h2 class="container-title">{{ title }}</h2>
</div> </div>
<div class="container-body" :class="[ <div class="container-body" :class="[
@ -78,30 +78,30 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 100%; height: 0;
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;
border-right: 0.11415vw solid;
border-image: linear-gradient(to bottom,transparent 0%,rgba(5, 138, 237, .7) 40%, rgba(2, 82, 215, 0.24) 70%,) 71 71;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
display: inline-block; display: inline-block;
height: 96%; height: 100%;
width: 0.11415vw; width: 0.11415vw;
border-radius: 2px; border-radius: 2px;
top: 0%; top: 0%;
left: 0; left: 0;
background: radial-gradient(circle at center, background: radial-gradient(
#024798 2%, circle at center,
#024798 100%, #024798 2%,
transparent); #024798 30%,
transparent
);
z-index: 1; z-index: 1;
} }
@ -109,12 +109,12 @@ export default {
content: ""; content: "";
position: absolute; position: absolute;
display: inline-block; display: inline-block;
width: 80%; width: 60%;
height: 0.31415vh; height: 0.31415vh;
border-radius: 2px; border-radius: 2px;
left: 3%; left: 8%;
bottom: 0; bottom: 0;
background: linear-gradient(to left, transparent 10%, #024798 95%, transparent 98%); background: linear-gradient(to right, #024798, transparent);
z-index: 0; z-index: 0;
} }
@ -127,7 +127,7 @@ export default {
gap: 8px; gap: 8px;
.container-title { .container-title {
font-size: 1vw; font-size: 1.18vw;
line-height: 1.39vw; line-height: 1.39vw;
font-weight: normal; font-weight: normal;
letter-spacing: 2px; letter-spacing: 2px;

View File

@ -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

@ -196,7 +196,7 @@ export default {
gap: 16px; gap: 16px;
.flex { .flex {
display: flex; display: flex;
gap: 16px; gap: 20px;
flex: 1; flex: 1;
} }
.top > div, .top > div,

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-20 13:32:59 * @Date: 2024-05-20 13:32:59
* @LastEditTime: 2024-07-09 08:58:47 * @LastEditTime: 2024-06-17 16:42:12
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -312,7 +312,7 @@ function calculateItems(period, valueTuple, than) {
} }
.double-ring-chart__legend { .double-ring-chart__legend {
/* padding: 12px; */ padding: 12px;
color: #fff; color: #fff;
display: flex; display: flex;
justify-content: center; justify-content: center;

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-30 16:00:50 * @Date: 2024-05-30 16:00:50
* @LastEditTime: 2024-07-09 09:09:07 * @LastEditTime: 2024-06-03 16:26:03
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -42,11 +42,10 @@ export default {
return { return {
factoryId: 4, // factoryId: 4, //
cityOptions: [ cityOptions: [
"瑞昌",
// "", // "",
"邯郸", "邯郸",
// "", // "",
"瑞昌",
// "", // "",
// "", // "",
// "", // "",
@ -64,7 +63,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.double-ring-wrapper { .double-ring-wrapper {
height: 100%; height: 100%;
padding: 0px 24px; padding: 12px 24px;
display: flex; display: flex;
gap: 12px; gap: 12px;
flex-direction: column; flex-direction: column;

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-24 15:15:00 * @Date: 2024-05-24 15:15:00
* @LastEditTime: 2024-07-09 09:27:12 * @LastEditTime: 2024-05-31 16:16:16
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -74,7 +74,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.double-ring-wrapper { .double-ring-wrapper {
height: 100%; height: 100%;
padding: 0px 24px; padding: 12px 24px;
display: flex; display: flex;
gap: 12px; gap: 12px;
flex-direction: column; flex-direction: column;

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-10 11:10:54 * @Date: 2024-05-10 11:10:54
* @LastEditTime: 2024-07-09 15:09:27 * @LastEditTime: 2024-06-05 09:49:46
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -20,12 +20,12 @@
</left-container> </left-container>
</section> </section>
<section class="bottom flex"> <section class="bottom flex">
<bottom-right-container class="fto-involve" title="FTO投入"> <right-container class="fto-involve" title="FTO投入">
<fto-invest :period="period" :than="than" /> <fto-invest :period="period" :than="than" />
</bottom-right-container> </right-container>
<bottom-left-container class="chip-involve" title="芯片投入" icon="chip"> <left-container class="chip-involve" title="芯片投入" icon="chip">
<chip-invest :period="period" :than="than" /> <chip-invest :period="period" :than="than" />
</bottom-left-container> </left-container>
</section> </section>
</div> </div>
</template> </template>
@ -34,8 +34,7 @@
import twoContainer from "@/views/copilot/components/twoContainer.vue"; import twoContainer from "@/views/copilot/components/twoContainer.vue";
import leftContainer from "@/views/copilot/components/leftContainer.vue"; import leftContainer from "@/views/copilot/components/leftContainer.vue";
import rightContainer from "@/views/copilot/components/rightContainer.vue"; import rightContainer from "@/views/copilot/components/rightContainer.vue";
import bottomRightContainer from "@/views/copilot/components/bottomRightContainer.vue";
import bottomLeftContainer from "@/views/copilot/components/bottomLeftContainer.vue";
import StdOutput from "./components/StdOutput.vue"; import StdOutput from "./components/StdOutput.vue";
import ChipOutput from "./components/ChipOutput.vue"; import ChipOutput from "./components/ChipOutput.vue";
import FtoInvest from "./components/FtoInvest.vue"; import FtoInvest from "./components/FtoInvest.vue";
@ -46,8 +45,6 @@ export default {
name: "YieldCopilot", name: "YieldCopilot",
components: { components: {
DbContainer: twoContainer, DbContainer: twoContainer,
bottomRightContainer,
bottomLeftContainer,
leftContainer, leftContainer,
rightContainer, rightContainer,
StdOutput, StdOutput,

View File

@ -14,20 +14,15 @@ 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.5%", left: "48.5%",
top: "35%", top: "37%",
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
fontWeight: 400, fontWeight: 600,
fontSize: 32, fontSize: 26,
color: "#fffd", color: "#fffd",
}, },
subtext: `\u2002${subtitle}\u2002`, subtext: `\u2002${subtitle}\u2002`,
@ -43,8 +38,8 @@ export default ({
{ {
type: "pie", type: "pie",
name: "当前目标", name: "当前目标",
radius: ["80%", "95%"], radius: ["80%", "90%"],
center: ["50%", "48%"], center: ["50%", "52%"],
emptyCircleStyle: { emptyCircleStyle: {
color: "#042c5f33", color: "#042c5f33",
}, },
@ -52,8 +47,8 @@ export default ({
// 数据 series // 数据 series
{ {
type: "pie", type: "pie",
radius: ["80%", "95%"], radius: ["80%", "90%"],
center: ["50%", "48%"], center: ["50%", "52%"],
avoidLabelOvervlap: false, avoidLabelOvervlap: false,
label: { label: {
show: false, show: false,
@ -67,8 +62,7 @@ export default ({
name: currentName, name: currentName,
selected: false, selected: false,
tooltip: { tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` + formatter: `${currentName} : ${currentSum}`
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
}, },
itemStyle: { itemStyle: {
borderJoin: "round", borderJoin: "round",
@ -92,8 +86,7 @@ export default ({
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum), value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
name: currentName, name: currentName,
tooltip: { tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` + formatter: `${currentName} : ${currentSum}`
`<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 },
@ -103,8 +96,8 @@ export default ({
// 数据 series2 - 2023累计 // 数据 series2 - 2023累计
{ {
type: "pie", type: "pie",
radius: ["65%", "80%"], radius: ["70%", "80%"],
center: ["50%", "48%"], center: ["50%", "52%"],
avoidLabelOvervlap: false, avoidLabelOvervlap: false,
label: { label: {
show: false, show: false,
@ -118,8 +111,7 @@ export default ({
name: preName, name: preName,
selected: false, selected: false,
tooltip: { tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` + formatter: `${preName} : ${previousSum}`
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
}, },
itemStyle: { itemStyle: {
borderJoin: "round", borderJoin: "round",
@ -144,8 +136,7 @@ export default ({
value:previousSum === 0 ? 1 : 0, value:previousSum === 0 ? 1 : 0,
name: preName, name: preName,
tooltip: { tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` + formatter: `${preName} : ${previousSum}`
`<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-07-08 13:43:52 * @LastEditTime: 2024-06-14 09:03:26
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -53,32 +53,7 @@ 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%",
@ -91,7 +66,7 @@ export default {
}, },
subtext: `\u2002${year}年累计产出\u2002`, subtext: `\u2002${year}年累计产出\u2002`,
subtextStyle: { subtextStyle: {
fontSize: 15, fontSize: 12,
fontWeight: 100, fontWeight: 100,
color: "#fffd", color: "#fffd",
align: "right", align: "right",
@ -248,49 +223,40 @@ 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 = this.options const options = JSON.parse(JSON.stringify(this.options));
// console.log('options', options); // console.log('options', options);
// //
if (!this.output.target && !this.output.current) options.title.text = "0%"; if (!this.output.target) options.title.text = "0%";
else if (!this.output.target && this.output.current) options.title.text = "100%"; else
else options.title.text = 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
) { ) {
this.options.series[1].data[0].value = 0; options.series[1].data[0].value = 0;
this.options.series[1].data[1].value = 1; options.series[1].data[1].value = 1;
this.options.series[1].data[0].tooltip.formatter = options.series[1].data[0].tooltip.formatter = year + '累计完成:0';
`<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 + '累计完成:0';
`<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 {
this.options.series[1].data[0].value = this.output.current; options.series[1].data[0].value = this.output.current;
this.options.series[1].data[1].value = options.series[1].data[1].value =
this.output.target - this.output.current; this.output.target - 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[0].tooltip.formatter = year + '累计完成:' + this.output.current;
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`; options.series[1].data[1].tooltip.formatter = year + '累计完成:' + this.output.current;
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) {
this.options.series[2].data[0].value = 0; options.series[2].data[0].value = 0;
this.options.series[2].data[1].value = 1; options.series[2].data[1].value = 1;
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[0].tooltip.formatter = year-1 + '累计完成:' + 0;
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`; options.series[2].data[1].tooltip.formatter = year-1 + '累计完成:' + 0;
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 {
this.options.series[2].data[0].value = this.output.previous; options.series[2].data[0].value = this.output.previous;
this.options.series[2].data[1].value = 0; options.series[2].data[1].value = 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[0].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`; options.series[2].data[1].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
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;
@ -308,9 +274,6 @@ 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

@ -73,23 +73,27 @@ export default {
color: "rgba(237,237,237,0.5)", 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: '#000000',
backgroundColor: '#001829', // textStyle: {
borderColor: '#001829', // color: '#ffff'
// }
formatter: params => { formatter: params => {
console.log('params', params) // console.log(params);
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`; // xAxis data
for (var i = 0, l = params.length; i < l; i++) { let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' params.forEach(item => {
// console.log(item.color, color); let color = item.color.colorStops ? item.color.colorStops[0].color : ''
res += console.log(item.color, color);
"<br/>" + dataStr += `<div>
`<span style='display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${color}'></span>` + <div style="margin: 0 8px;">
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` + <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color.colorStops[0].color};"></span>
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`; <span>${item.seriesName}</span>
} <span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
return res; </div>
}, </div>`
})
return dataStr
}
}, },
xAxis: { xAxis: {
axisTick: { axisTick: {
@ -137,7 +141,7 @@ export default {
{ {
name: '', // this.series[0].name, name: '', // this.series[0].name,
type: "bar", type: "bar",
barWidth: 16, barWidth: 12,
label: { label: {
show: true, // show: true, //
align: 'right', // align: 'right', //
@ -181,7 +185,7 @@ export default {
{ {
name: '', // this.series[1].name, name: '', // this.series[1].name,
type: "bar", type: "bar",
barWidth: 16, barWidth: 12,
label: { label: {
show: true, // show: true, //
align: 'left', // align: 'left', //

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-07-08 14:30:44 * @LastEditTime: 2024-06-28 09:28:56
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -79,27 +79,22 @@ export default {
color: "rgba(237,237,237,0.5)", 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 => { formatter: params => {
console.log('params', params) // xAxis data
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`; let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
for (var i = 0, l = params.length; i < l; i++) { params.forEach(item => {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' let color = Object.prototype.toString.call(item.color) == "[object String]" ? item.color : item.color.colorStops ? item.color.colorStops[0].color : ''
// console.log(item.color, color); console.log(item.color, color);
res += dataStr += `<div>
"<br/>" + <div style="margin: 0 8px;">
`${params[i].seriesType === "line" <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${color};"></span>
? '<img width="11" height="11" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />' <span>${item.seriesName}</span>
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${color}"></span>` <span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
}` + </div>
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` + </div>`
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`; })
} return dataStr
return res; }
},
}, },
xAxis: { xAxis: {
axisTick: { axisTick: {
@ -182,7 +177,7 @@ export default {
{ {
name: "", // "2023", name: "", // "2023",
type: "bar", type: "bar",
barWidth: 16, barWidth: 12,
itemStyle: { itemStyle: {
borderRadius: [10, 10, 0, 0], borderRadius: [10, 10, 0, 0],
color: { color: {
@ -217,7 +212,7 @@ export default {
{ {
name: "", // "2024", name: "", // "2024",
type: "bar", type: "bar",
barWidth: 16, barWidth: 12,
// tooltip: { // tooltip: {
// valueFormatter: function (value) { // valueFormatter: function (value) {
// return value + " ml"; // return value + " ml";

View File

@ -96,8 +96,7 @@ h2 {
margin: 6px 0; margin: 6px 0;
font-family: 优设标题黑; font-family: 优设标题黑;
color: #fff; color: #fff;
letter-spacing:4px; letter-spacing:5px;
text-align: left;
// font-size: 24px; // font-size: 24px;
font-size: 1.276em; font-size: 1.276em;
} }

View File

@ -90,18 +90,18 @@ export default {
position: relative; position: relative;
box-shadow: inset 0 0 20px 1px #fff1; box-shadow: inset 0 0 20px 1px #fff1;
&::after { // &::after {
content: ""; // content: "";
position: absolute; // position: absolute;
display: inline-block; // display: inline-block;
width: 85%; // width: 60%;
height: 0.31415vh; // height: 0.31415vh;
border-radius: 2px; // border-radius: 2px;
left: 8%; // left: 8%;
bottom: 0; // bottom: 0;
background: linear-gradient(to left, #024798, transparent); // background: linear-gradient(to right, #024798, transparent);
z-index: 0; // z-index: 0;
} // }
.container-head { .container-head {
// height: 40px; // height: 40px;
@ -112,7 +112,7 @@ export default {
gap: 8px; gap: 8px;
.container-title { .container-title {
font-size: 1vw; font-size: 1.18vw;
line-height: 1.39vw; line-height: 1.39vw;
font-weight: normal; font-weight: normal;
letter-spacing: 2px; letter-spacing: 2px;

View File

@ -1,8 +1,8 @@
<!-- <!--
filename: ContainerIcon.vue filename: ContainerIcon.vue
author: liubin author: liubin
date: 2024-04-09 16:41:36 date: 2024-04-09 16:41:36
description: description:
--> -->
<template> <template>
@ -51,8 +51,8 @@ export default {
.container-icon { .container-icon {
// width: 32px; // width: 32px;
// height: 32px; // height: 32px;
width: 1.4vw; width: 1.701vw;
height: 1.4vw; height: 1.701vw;
background: #ccc2; background: #ccc2;
} }
</style> </style>

View File

@ -153,7 +153,7 @@ h1 {
.side { .side {
position: absolute; position: absolute;
font-size: 1vw; font-size: 1.18vw;
// line-height: 24px; // line-height: 24px;
line-height: 1.277vw; line-height: 1.277vw;
letter-spacing: 2px; letter-spacing: 2px;

View File

@ -1,204 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-07-08 13:51:30
* @LastEditTime: 2024-07-08 13:53:26
* @LastEditors: zhp
* @Description:
-->
<template>
<div class="dashboard-container">
<!-- refresh btn -->
<button
v-if="0"
style="appearance: none; outline: none; border: none; background: none; color:#fff; cursor: pointer; position: absolute; top: 8px; right: 8px"
@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"
>
<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>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div v-if="side == 'left'" class="corner bl"></div>
<div v-if="side == 'right'" class="corner br"></div>
<!-- content -->
<div
class="container-head"
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
>
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div
class="container-body"
:class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]"
>
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.dashboard-container {
height: 0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
&::after {
content: "";
position: absolute;
display: inline-block;
width: 85%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
bottom: 0;
background: linear-gradient(to right, #024798, transparent);
z-index: 0;
}
.container-head {
// height: 40px;
height:4vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid #0175dc;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
border-left: 0.532vw solid transparent;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid #0175dc;
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

View File

@ -17,12 +17,12 @@
<db-header class="db-header"></db-header> <db-header class="db-header"></db-header>
<div class="db-body"> <div class="db-body">
<div class="db-left"> <div class="db-left">
<left-container icon="cube" title="FTO投入" @refresh="() => (ftoKey = Math.random())"> <db-container icon="cube" title="FTO投入" @refresh="() => (ftoKey = Math.random())">
<fto-chart :key="ftoKey" /> <fto-chart :key="ftoKey" />
</left-container> </db-container>
<left-container icon="chip2" title="芯片投入" @refresh="() => (chipInvestKey = Math.random())"> <db-container icon="chip2" title="芯片投入" @refresh="() => (chipInvestKey = Math.random())">
<chip-invest-chart :key="chipInvestKey" /> <chip-invest-chart :key="chipInvestKey" />
</left-container> </db-container>
</div> </div>
<div class="db-right"> <div class="db-right">
<db-container side="right" icon="chip" title="芯片产出" @refresh="() => (chipYieldKey = Math.random())"> <db-container side="right" icon="chip" title="芯片产出" @refresh="() => (chipYieldKey = Math.random())">
@ -53,7 +53,6 @@ import store from "@/store";
import DashboardHeader from "./dashboard/components/Header.vue"; import DashboardHeader from "./dashboard/components/Header.vue";
import CompanyInfo from "./dashboard/components/CompanyInfo.vue"; import CompanyInfo from "./dashboard/components/CompanyInfo.vue";
import Container from "./dashboard/components/Container.vue"; import Container from "./dashboard/components/Container.vue";
import leftContainer from "./dashboard/components/leftContainer.vue";
import FtoChart from "./dashboard/charts/Fto.vue"; import FtoChart from "./dashboard/charts/Fto.vue";
import ChipInvestChart from "./dashboard/charts/ChipInvest.vue"; import ChipInvestChart from "./dashboard/charts/ChipInvest.vue";
import BipvChart from "./dashboard/charts/Bipv.vue"; import BipvChart from "./dashboard/charts/Bipv.vue";
@ -85,7 +84,6 @@ export default {
name: "Index", name: "Index",
components: { components: {
CompanyInfo, CompanyInfo,
leftContainer,
ksCompanyInfo: CompanyInfo, ksCompanyInfo: CompanyInfo,
hdCompanyInfo: CompanyInfo, hdCompanyInfo: CompanyInfo,
bbCompanyInfo: CompanyInfo, bbCompanyInfo: CompanyInfo,
@ -342,7 +340,7 @@ export default {
.db-left, .db-left,
.db-right { .db-right {
// width: 420px; // width: 420px;
width: 24.5vw; width: 24vw;
padding: 20px; padding: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

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-07-05 13:28:38 * @LastEditTime: 2024-06-26 13:39:22
* @LastEditors: zhp * @LastEditors: DY
* @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.toFixed(2) }}</p> <p class="text">{{ dataForm.chipTotalPower }}</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">{{ parseFloat(dataForm.chipCapacityUtilizationRate.toFixed(2)) }}</p> <p class="text">{{ dataForm.chipCapacityUtilizationRate }}</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">{{ parseFloat(dataForm.componentTotalPower.toFixed(2)) }}</p> <p class="text">{{ dataForm.componentTotalPower }}</p>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<p class="title">封装产能利用率(%)</p> <p class="title">封装产能利用率(%)</p>
<p class="text">{{ parseFloat(dataForm.componentCapacityUtilizationRate.toFixed(2)) }}</p> <p class="text">{{ dataForm.componentCapacityUtilizationRate }}</p>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<p class="title">标准组件人均产量(/)</p> <p class="title">标准组件人均产量(/)</p>

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-04-15 10:49:13 * @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-07-16 17:47:40 * @LastEditTime: 2024-07-02 16:33:59
* @LastEditors: DY * @LastEditors: DY
* @Description: * @Description:
--> -->
@ -10,22 +10,22 @@
<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 @change="changType" v-model="listQuery.type" size="small" clearable placeholder="请选择"> <el-select 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="daterange" 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="结束日期" :picker-options="{ firstDayOfWeek: 1 }"> 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">
<el-date-picker size="small" clearable v-model="listQuery.start" type="week" format="yyyy-MM-dd" placeholder="选择周" :picker-options="{ firstDayOfWeek: 1 }" <el-date-picker size="small" clearable v-model="listQuery.start" type="week" format="yyyy 第 WW 周" placeholder="选择周"
style="width: 180px" @change="onValueChange"> style="width: 180px" @change="onValueChange">
</el-date-picker> </el-date-picker>
<el-date-picker size="small" clearable v-model="listQuery.end" type="week" format="yyyy-MM-dd" placeholder="选择周" :picker-options="{ firstDayOfWeek: 1 }" <el-date-picker size="small" clearable v-model="listQuery.end" type="week" format="yyyy 第 WW 周" placeholder="选择周"
style="width: 180px" @change="onValueChange"> style="width: 180px" @change="onValueChange">
</el-date-picker> </el-date-picker>
<!-- <span v-if="listQuery.start && listQuery.end" style="margin-left: 10px"> <!-- <span v-if="listQuery.start && listQuery.end" style="margin-left: 10px">
@ -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, factoryListabbr } from "@/utils/constants"; import { factoryList, factoryArray, factoryArray1 } 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,
factoryListabbr, factoryArray1,
listQuery: { listQuery: {
pageSize: 20, pageSize: 20,
pageNo: 1, pageNo: 1,
@ -253,7 +253,7 @@ export default {
// }, // },
created() { created() {
const today = new Date() const today = new Date()
const sevenDaysAgo = new Date(today.getTime() - (6 * 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 = moment(sevenDaysAgo).format('yyyy-MM-DD')
this.listQuery.endDate = moment(today).format('yyyy-MM-DD') this.listQuery.endDate = moment(today).format('yyyy-MM-DD')
this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate] this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate]
@ -261,11 +261,6 @@ 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 = "详情";
@ -359,7 +354,7 @@ export default {
this.$message.warning('请选择时间维度!') this.$message.warning('请选择时间维度!')
return return
} }
if (!this.listQuery.startDate) { if (this.listQuery.startDate === undefined) {
this.$message.warning('请选择时间范围!') this.$message.warning('请选择时间范围!')
} else { } else {
await getProduceDataPage(this.listQuery).then(res => { await getProduceDataPage(this.listQuery).then(res => {
@ -369,6 +364,7 @@ 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) {
@ -386,71 +382,94 @@ export default {
// x // x
xAxisData = Object.keys(data) xAxisData = Object.keys(data)
// series // y
// ['chipYield', 'componentYield', 'bipvProductOutput'] this.factoryArray.forEach(fac => {
const typeArray = (this.listQuery.glass.length === 0 || this.listQuery.glass.length === 3) ? [0, 1, 2] : this.listQuery.glass let i = 0
// this.factoryListabbr while ( i < 3) {
const factoryNameArray = (this.listQuery.factory.length === 0 || this.listQuery.factory.length === this.factoryListabbr.length) ? [0, 1] : this.listQuery.factory //
const seriesArray = [] const index1 = ['chipYield', 'componentYield', 'bipvProductOutput'][i]
typeArray.forEach((type, typeIndex) => { // let oneChart = {}
factoryNameArray.forEach((fac, facIndex) => { xAxisData.forEach((x, index) => {
const series = { if (this.listQuery.glass.length === 0 || this.listQuery.glass.length === 3) {
data: Array(xAxisData.length).fill(0), let series = {
type: 'bar', name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id,
stack: String(fac), type: 'bar',
barWidth: 16, stack: String(fac.id),
itemStyle: { data: Array(xAxisData.length).fill(0),
color: this.colorList[type] barWidth: 20,
}, itemStyle: {
name: this.factoryListabbr[fac] + '-' + type color: this.colorList[i]
} },
seriesArray.push(series) label: {
}) show: i === 2 ? true : false,
}) position: 'top',
// seriesdata formatter(params) {
const seriesDataArray = [] return fac.name.substring(0, 2)
Object.values(data).forEach((item) => { }
let seriesData = [] }
// item[0].datestr }
typeArray.forEach(t => { dataList.forEach(item => {
const zidr = ['chipYield', 'componentYield', 'bipvProductOutput'][t] if (fac.id === item.factory && item.datestr === x) {
item.forEach(it => { series.data[index] = item[index1]
seriesData.push(it[zidr]) }
}) })
}) this.seriesList.push(series)
seriesDataArray.push(seriesData) } else {
}) this.listQuery.glass.forEach(gl => {
for (let y = 0; y < seriesArray.length; y ++) { if (gl === i) {
const days = [] let series = {
seriesDataArray.forEach(a => { name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id,
days.push(a[y]) type: 'bar',
}) stack: String(fac.id),
// data: Array(xAxisData.length).fill(0),
seriesArray[y].data = days barWidth: 20,
} itemStyle: {
color: this.colorList[i]
// },
const validSeriesArray = [] label: {
factoryNameArray.forEach(f => { show: true,
const s = { position: 'top',
name: '显示工厂', formatter(params) {
data: Array(xAxisData.length).fill(0), if (params.value === 0) {
type: 'bar', return ''
stack: String(f), } else {
barWidth: 16, // return ['', ''][params.seriesName.split('-')[1]]
label: { return fac.name.substring(0, 2)
show: true, }
position: 'top', }
// position: f > 0 ? [2, -16] : [-10, -16], }
formatter(params) { }
return factoryListabbr[f] dataList.forEach(item => {
if (fac.id === item.factory && item.datestr === x) {
series.data[index] = item[index1]
}
})
this.seriesList.push(series)
}
})
} }
} // let series = {
// name: ['', '', 'BIPV'][i] + '-' + fac.id,
// type: 'bar',
// stack: String(fac.id),
// data: Array(xAxisData.length).fill(0),
// barWidth: 20,
// itemStyle: {
// color: this.colorList[i]
// }
// }
// dataList.forEach(item => {
// if (fac.id === item.factory && item.datestr === x) {
// series.data[index] = item[index1]
// }
// })
// this.seriesList.push(series)
})
i ++
} }
validSeriesArray.push(s)
}) })
this.seriesList = [...seriesArray, ...validSeriesArray] console.log('你好', this.seriesList)
this.$refs.lineChart.initChart(xAxisData, this.seriesList, factoryNameArray) this.$refs.lineChart.initChart(xAxisData, this.seriesList)
}, },
buttonClick(val) { buttonClick(val) {
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined; this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;

View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2022-01-21 14:43:06 * @Date: 2022-01-21 14:43:06
* @LastEditors: DY * @LastEditors: DY
* @LastEditTime: 2024-07-16 18:41:27 * @LastEditTime: 2024-07-01 16:54:41
* @Description: * @Description:
--> -->
<template> <template>
@ -73,7 +73,7 @@ export default {
this.chart = null this.chart = null
}, },
methods: { methods: {
initChart(xAxis, seriesList, facs) { initChart(xAxis, seriesList) {
if (xAxis.length === 0) { if (xAxis.length === 0) {
this.chart.clear() this.chart.clear()
} }
@ -93,9 +93,9 @@ export default {
itemHeight: 10, itemHeight: 10,
itemGap: 40, itemGap: 40,
formatter(name) { formatter(name) {
return ['玻璃芯片', '标准组件', 'BIPV'][name.split('-')[1]] return name.split('-')[0]
}, },
data: ['瑞昌-0', '瑞昌-1', '瑞昌-2'] data: ['玻璃芯片-0', '标准组件-0', 'BIPV-0']
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
@ -103,37 +103,37 @@ export default {
type: 'shadow', type: 'shadow',
color: "rgba(237,237,237,0.5)" color: "rgba(237,237,237,0.5)"
}, },
formatter(params) { formatter: function(params) {
let str = ''
facs.forEach(ele => {
str += `<div style="width: 60px; text-align: right">${ factoryListabbr[ele] }</div>`
})
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>
${ str } <div style="width: 60px; text-align: right">${factoryListabbr[0]}</div>
<div style="width: 60px; text-align: right">${factoryListabbr[1]}</div>
</div>` </div>`
const analyzeArray = params.filter(p => p.seriesName !== '显示工厂').map(item => { const newArray = params.map(p => {
const obj = { return {
glass: ['玻璃芯片', '标准组件', 'BIPV'][item.seriesName.split('-')[1]], // glass: p.seriesName.split('-')[0], //
factoryName: item.seriesName.split('-')[0], // factoryName: factoryListabbr[p.seriesName.split('-')[1]], //
value: item.value, value: p.value,
name: item.name, name: p.name,
marker: item.marker, marker: p.marker,
color: item.color color: p.color
} }
return obj
}) })
const analyzeList = Object.groupBy(analyzeArray, (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; display: flex; align-items: center"> <div style="width: 150px; display: flex; align-items: center">
<div style="background-color: ${analyzeList[g][0].color}; width: 10px; height: 10px; margin-right: 5px"></div> <div style="background-color: ${analyzeList[g][0].color}; width: 10px; height: 10px; margin-right: 5px"></div>
<div>${g}</div></div>` <div>${g}</div></div>`
for (let fac of factoryListabbr) {
let goodNum = 0 let goodNum = 0
for (let ana of analyzeList[g]) { for (let ana of analyzeList[g]) {
goodNum = ana.value if (ana.factoryName === fac && ana.value !== 0) {
goodNum = ana.value
}
}
oneData += `<div style="width: 60px; text-align: right">${goodNum}</div>` oneData += `<div style="width: 60px; text-align: right">${goodNum}</div>`
} }
result = result + oneData + '</div>' result = result + oneData + '</div>'
@ -156,7 +156,7 @@ export default {
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
name: '单位:' name: '单位:'
} }
], ],
grid: { grid: {

View File

@ -1,15 +1,15 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-11-06 15:15:30 * @Date: 2023-11-06 15:15:30
* @LastEditTime: 2024-07-08 15:06:49 * @LastEditTime: 2024-06-27 14:50:21
* @LastEditors: zhp * @LastEditors: DY
* @Description: * @Description:
--> -->
<template> <template>
<el-drawer class="drawer" :visible.sync="visible" size="85%" @closed="$emit('destroy')"> <el-drawer class="drawer" :visible.sync="visible" size="85%" @closed="$emit('destroy')">
<small-title slot="title" :no-padding="true"> <small-title slot="title" :no-padding="true">
{{ '详情' }} {{ '详情' }}
<!-- <el-button type="primary" plain size="small" style="float: right" @click="exportDetail">导出</el-button> --> <el-button type="primary" plain size="small" style="float: right" @click="exportDetail">导出</el-button>
</small-title> </small-title>
<div ref="detail" class="detailBox"> <div ref="detail" class="detailBox">
<el-row :gutter="20"> <el-row :gutter="20">
@ -69,60 +69,51 @@
</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] + '-' <p class="text">{{ dataForm.startDate?.length > 0 ? dataForm.startDate[0] + '-' + dataForm.startDate[1] + '-' + dataForm.startDate[2] : '' }}</p>
+ 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] + '-' + <p class="text">{{ dataForm.endDate?.length > 0 ? dataForm.endDate[0] + '-' + dataForm.endDate[1] + '-' + dataForm.endDate[2] : '' }}</p>
dataForm.endDate[2] : '' }}</p> </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="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>
@ -156,7 +147,6 @@ 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
} }
@ -177,17 +167,17 @@ export default {
const pdf = new jsPDF('l', 'pt', 'a4'); const pdf = new jsPDF('l', 'pt', 'a4');
const canvas = document.createElement('canvas') const canvas = document.createElement('canvas')
const element = this.$refs['detail']; const element = this.$refs['detail'];
const width = pdf.internal.pageSize.getWidth() const width = pdf.internal.pageSize.getWidth()
const height = pdf.internal.pageSize.getHeight() const height = pdf.internal.pageSize.getHeight()
canvas.width = width * 2 canvas.width = width * 2
canvas.height = height * 2 canvas.height = height * 2
canvas.style.width = width + 'px' canvas.style.width = width + 'px'
canvas.style.height = height + 'px' canvas.style.height = height + 'px'
const options = { const options = {
// scale: 2, // scale: 2,
dpi: 300, dpi: 300,
@ -203,13 +193,12 @@ 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)
// //
@ -236,7 +225,7 @@ export default {
// this.initEqLineChart(xAxisList, yAxisList) // this.initEqLineChart(xAxisList, yAxisList)
// } // }
// }) // })
} }
}, },
trend() { trend() {
@ -259,9 +248,9 @@ export default {
this.initChart(barList) this.initChart(barList)
// //
const pieList = [ const pieList = [
{ value: data.actualProduction ? data.actualProduction : 0, name: '实际产出' }, { value: data.actualProduction, name: '实际产出' },
{ value: data.wasteNum ? data.wasteNum : 0, name: '废品数量' }, { value: data.wasteNum, name: '废品数量' },
{ value: data.reworkNum ? data.reworkNum :0, name: '待再加工数量' } { value: data.reworkNum, name: '待再加工数量' }
] ]
this.initPieChart(pieList) this.initPieChart(pieList)
}, },
@ -277,11 +266,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: 20, left: 0,
right: '10%', right: '10%',
bottom: 0, bottom: 0,
containLabel: true containLabel: true
@ -304,7 +293,7 @@ export default {
{ {
data: barData, data: barData,
type: 'bar', type: 'bar',
barWidth: 16, barWidth: '40%',
label: { label: {
show: true, show: true,
position: 'top' position: 'top'
@ -339,14 +328,7 @@ export default {
label: { label: {
show: true, show: true,
position: 'outside', position: 'outside',
formatter: (params) => { formatter: '{d|{d}%} \n {b|{b}}',
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', //
@ -374,11 +356,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: 30, left: 0,
right: 0, right: 0,
bottom: 0, bottom: 0,
containLabel: true containLabel: true
@ -402,7 +384,7 @@ export default {
{ {
data: yAxisList, data: yAxisList,
type: 'bar', type: 'bar',
barWidth: 16, barWidth: '50%',
label: { label: {
show: true, show: true,
position: 'top' position: 'top'

View File

@ -1,127 +0,0 @@
<template>
<div class="dayRepExpBox">
<el-row>
<el-col :span="24">
<div class="chartTitle" style="text-align: center;">产品良率</div>
<div class="box2">
<productYield ref="productYield" :pieList="pieList" />
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="chartTitle" style="text-align: center;">待制品分布</div>
<div class="box2">
<beProcessed ref="beProcess" :beProcessObj="beProcessObj" />
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="chartTitle" style="text-align: center;">生产明细</div>
<div class="box2">
<produceDetail ref="produceDetail" :produceData="produceData" />
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="chartTitle" style="text-align: center;">历史趋势</div>
<div class="box2">
<hisChart ref="hisChart" :hisObj="hisObj" />
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import hisChart from './dayReportExportChart/hisChart'
import produceDetail from './dayReportExportChart/produceDetail'
import productYield from './dayReportExportChart/productYield'
import beProcessed from './dayReportExportChart/beProcessed.vue'
export default {
name: 'ExportDayReport',
components: { hisChart, produceDetail, productYield, beProcessed },
props: {
produceData: {
type: Array,
default: () => []
},
hisObj: {
type: Object,
default: () => { }
},
pieList: {
type: Array,
default: () => []
},
beProcessObj: {
type: Object,
default: () => {}
},
},
data() {
return {
}
},
watch: {
beProcessObj: {
handler(newValue, oldValue) {
this.$refs.beProcess.canvasReset()
}
}
},
mounted() {
this.getData()
},
methods: {
getData() {
// console.log('beProcessObj', this.beProcessObj);
// this.$refs.beProcess.canvasReset()
// this.$refs.productYield.canvasReset()
// this.$refs.produceDetail.canvasReset()
// this.$refs.hisChart.canvasReset()
}
}
}
</script>
<style lang='scss' scoped>
.dayRepExpBox {
width: 595px;
height: 842px;
padding: 15px 20px 0;
background-color: #fff;
z-index: 2000;
.box2{
width: 555px;
height: 200px;
border: 2px solid #ECECEC;
border-left: 0;
}
.box3{
width: 555px;
height: 200px;
border: 2px solid #ECECEC;
}
.box5{
width: 555px;
height: 200px;
border: 2px solid #ECECEC;
border-left: 0;
}
.box6{
width: 555px;
height: 200px;
border: 2px solid #ECECEC;
position: relative;
.rightTitle{
position: absolute;
right: 5px;
top:2px;
font-size: 8px;
color: #383838;
}
}
}
</style>

View File

@ -1,103 +0,0 @@
<template>
<div id="chipPowerExpChart" style="width:552px;height:200px;" />
</template>
<script>
import * as echarts from 'echarts'
// import resize from './../../../mixins/resize'
import { debounce } from "@/utils/debounce";
export default {
name: 'ChipPowerExp',
// mixins: [resize],
props: {
beProcessObj: {
type: Object,
default: () => { }
}
},
data() {
return {
chart: null
}
},
watch: {
beProcessObj: {
handler(val) {
console.log(val);
this.canvasReset()
},
deep: true //
}
},
mounted() {
this.canvasReset()
},
methods: {
canvasReset() {
debounce(() => {
this.updateChart();
}, 500)();
},
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
console.log(this.beProcessObj);
this.chart = echarts.init(document.getElementById('chipPowerExpChart'))
// const legendName = Object.keys(this.chipPowerDistributionVo)
let xAxisList = this.beProcessObj.xAxisList
let yAxisList = this.beProcessObj.yAxisList
var option = {
// title: {
// text: '',
// left: 'center'
// // subtext: 'Fake Data'
// },
color: ['#3E8EF7'],
tooltip: {
trigger: 'axis'
},
// grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
calculable: true,
grid: {
top: '15%',
left: 0,
right: 0,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: xAxisList,
axisLabel: {
rotate: 45
// width: '10%'
}
},
yAxis: {
type: 'value',
name: '单位/片',
axisLine: {
show: true
}
},
series: [
{
data: yAxisList,
type: 'bar',
barWidth: 10,
label: {
show: true,
position: 'top'
}
}
]
}
option && this.chart.setOption(option)
}
}
}
</script>

View File

@ -1,108 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-07-08 14:51:47
* @LastEditTime: 2024-07-09 09:55:27
* @LastEditors: zhp
* @Description:
-->
<template>
<div id="hisChart" style="width:552px;height:200px;" />
</template>
<script>
import * as echarts from 'echarts'
// import resize from './../../../mixins/resize'
import { debounce } from "@/utils/debounce";
export default {
name: 'ChipPowerExp',
// mixins: [resize],
props: {
hisObj: {
type: Object,
default: () => { }
}
},
data() {
return {
chart: null
}
},
watch: {
hisObj: {
handler(newValue, oldValue) {
this.canvasReset()
},
deep:true,
}
},
mounted() {
this.canvasReset()
},
methods: {
canvasReset() {
debounce(() => {
this.updateChart();
}, 500)();
},
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
this.chart = echarts.init(document.getElementById('hisChart'))
// const legendName = Object.keys(this.chipPowerDistributionVo)
// const values = Object.values(this.chipPowerDistributionVo)
let dateList = this.hisObj.dateList
let seriesList = this.hisObj.seriesList
var option = {
// title: {
// text: '',
// left: 'center'
// // subtext: 'Fake Data'
// },
color: ['#3E8EF7'],
tooltip: {
trigger: 'axis'
},
// grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
calculable: true,
grid: {
top: '15%',
left: 0,
right: 0,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: dateList,
axisLabel: {
rotate: 45
// width: '10%'
}
},
yAxis: {
type: 'value',
name: '单位/片',
axisLine: {
show: true
}
},
series: [
{
data: seriesList,
type: 'line',
label: {
show: true,
position: 'top'
}
}
]
}
option && this.chart.setOption(option)
}
}
}
</script>

View File

@ -1,107 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-07-08 14:51:47
* @LastEditTime: 2024-07-09 09:56:13
* @LastEditors: zhp
* @Description:
-->
<template>
<div id="produceDetail" style="width:552px;height:200px;" />
</template>
<script>
import * as echarts from 'echarts'
// import resize from './../../../mixins/resize'
import { debounce } from "@/utils/debounce";
export default {
name: 'ChipPowerExp',
// mixins: [resize],
props: {
produceData: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null
}
},
watch: {
produceData: {
handler(newValue, oldValue) {
this.canvasReset()
},
deep:true,
}
},
mounted() {
this.canvasReset()
},
methods: {
canvasReset() {
debounce(() => {
this.updateChart();
}, 500)();
},
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
this.chart = echarts.init(document.getElementById('produceDetail'), null, { devicePixelRatio: 2 })
// const legendName = Object.keys(this.chipPowerDistributionVo)
// const values = Object.values(this.chipPowerDistributionVo)
var option = {
// title: {
// text: '',
// left: 'center'
// // subtext: 'Fake Data'
// },
color: ['#3E8EF7'],
tooltip: {
trigger: 'axis'
},
// grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
calculable: true,
grid: {
top: '15%',
left: 0,
right: '10%',
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: ['目标产量', '计划投入量', '实际投入', '实际产出', '废品数量', '待再加工数量'],
axisLabel: {
rotate: 45
}
},
yAxis: {
type: 'value',
name: '单位/片',
axisLine: {
show: true
}
},
series: [
{
data: this.produceData,
type: 'bar',
barWidth: 16,
label: {
show: true,
position: 'top'
}
}
]
}
option && this.chart.setOption(option)
}
}
}
</script>

View File

@ -1,109 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-07-08 14:51:47
* @LastEditTime: 2024-07-11 14:48:15
* @LastEditors: zhp
* @Description:
-->
<template>
<div id="productYield" style="width:552px;height:200px;" />
</template>
<script>
import * as echarts from 'echarts'
// import resize from './../../../mixins/resize'
import { debounce } from "@/utils/debounce";
export default {
name: 'ChipPowerExp',
// mixins: [resize],
props: {
pieList: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null
}
},
watch: {
pieList: {
handler(newValue, oldValue) {
this.canvasReset()
},
deep:true
}
},
mounted() {
this.canvasReset()
},
methods: {
canvasReset() {
debounce(() => {
this.updateChart();
}, 500)();
},
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
console.log(this.beProcessObj);
this.chart = echarts.init(document.getElementById('productYield'), null, { devicePixelRatio: 2 })
// const values = Object.values(this.chipPowerDistributionVo)
var option = {
color: ['#3E8EF7', '#69E6D8', '#F7C739'],
title: {
// text: !isNaN((pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100) ? ( ' ' + (pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100 + '%') : ' -',
left: 'center'
// subtext: 'Fake Data'
},
tooltip: {
trigger: 'item'
},
legend: {
bottom: 0,
left: 'center',
itemGap:60,
},
series: [
{
// name: 'Access From',
type: 'pie',
center: ['50%', '45%'],
radius: ['50%', '70%'],
avoidLabelOverlap: false,
data: this.pieList,
label: {
show: true,
position: 'outside',
formatter: (params) => {
console.log(params)
let res = ''
// for (let i in params) {
res += `${params.percent ? params.percent : 0}% \n ${params.name}`
// }
return res
},
rich: {
d: {
color: 'inherit', //
verticalAlign: 'top'
},
b: {
color: '#8C8C8C',
verticalAlign: 'top'
}
}
}
}
]
}
option && this.chart.setOption(option)
}
}
}
</script>

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-07-09 11:08:43 * @LastEditTime: 2024-07-01 17:06:29
* @LastEditors: zhp * @LastEditors: DY
* @Description: * @Description:
--> -->
<template> <template>
@ -10,7 +10,7 @@
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="4"> <el-col :span="4">
<div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;"> <div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;">
<!-- <p style="margin-bottom: 0">数据概览</p> --> <!-- <p style="margin-bottom: 0">数据概览</p> -->
<div class="view"> <div class="view">
<div style="padding: 10px 0; width: 100%"> <div style="padding: 10px 0; width: 100%">
<div class="topDiv"> <div class="topDiv">
@ -27,14 +27,13 @@
</el-col> </el-col>
<el-col :span="20"> <el-col :span="20">
<div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;"> <div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;">
<!-- <p style="margin-bottom: 0">数据概览</p> --> <!-- <p style="margin-bottom: 0">数据概览</p> -->
<div class="view"> <div class="view">
<div style="padding: 10px 0; width: 100%" v-for="(item, index) in factorys" :key="index"> <div style="padding: 10px 0; width: 100%" v-for="(item, index) in factorys" :key="index">
<div class="topDiv"> <div class="topDiv">
<div style="width: 4px; height: 52px; background: #3A79FF; border-radius: 2px;"></div> <div style="width: 4px; height: 52px; background: #3A79FF; border-radius: 2px;"></div>
<div class="centerDiv"> <div class="centerDiv">
<span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ factoryNum[index] <span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ factoryNum[index] }}</span>
}}</span>
<span style="font-size: 14px; color: rgba(0,0,0,0.85);">{{item}}</span> <span style="font-size: 14px; color: rgba(0,0,0,0.85);">{{item}}</span>
</div> </div>
<svg-icon icon-class="factoryWorkOrder" style="width: 26px; height: 26px" /> <svg-icon icon-class="factoryWorkOrder" style="width: 26px; height: 26px" />
@ -50,28 +49,27 @@
<div class="app-container" style="margin-top: 8px;flex-grow: 1;"> <div class="app-container" style="margin-top: 8px;flex-grow: 1;">
<!-- <search-bar :formConfigs="formConfig2" ref="searchBarForm" style="margin-bottom: 0" /> --> <!-- <search-bar :formConfigs="formConfig2" ref="searchBarForm" style="margin-bottom: 0" /> -->
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData" <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
:max-height="tableH"> :table-data="tableData" :max-height="tableH">
<method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right" <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
:method-list="tableBtn" @clickBtn="handleClick" /> :method-list="tableBtn" @clickBtn="handleClick" />
</base-table> </base-table>
<pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total" <pagination
@pagination="getDataList" /> :limit.sync="listQuery.pageSize"
</div> :page.sync="listQuery.pageNo"
<add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date" :total="listQuery.total"
@refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" /> @pagination="getDataList"
<div id="dayRepDom" style="position: absolute;top:0;display: none;"> />
<ExportDayReport :beProcessObj="beProcessObj" :produceData="produceData" :hisObj="hisObj" :pieList="pieList" />
</div> </div>
<add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
</div> </div>
</template> </template>
<script> <script>
// import { parseTime } from '../../core/mixins/code-filter'; // import { parseTime } from '../../core/mixins/code-filter';
import { getWorkOrderPage, exportExcel, getOverView, getWorkOrderDetail } from '@/api/produceData/order'; import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/order';
// import inputTable from './inputTable.vue'; // import inputTable from './inputTable.vue';
import lineChart from './lineChart'; import lineChart from './lineChart';
import ExportDayReport from './dayReportComponents/ExportDayReport'
import moment from 'moment' import moment from 'moment'
import tableHeightMixin from "@/mixins/tableHeightMixin"; import tableHeightMixin from "@/mixins/tableHeightMixin";
// import ButtonNav from '@/components/ButtonNav' // import ButtonNav from '@/components/ButtonNav'
@ -80,12 +78,11 @@ import AddOrUpdate from './add-or-updata';
import { factoryList, factoryArray } from "@/utils/constants"; import { factoryList, factoryArray } from "@/utils/constants";
// import { publicFormatter } from "@/utils/dict"; // import { publicFormatter } from "@/utils/dict";
import statusChart from "./statusChart.vue"; import statusChart from "./statusChart.vue";
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
// import FileSaver from 'file-saver' // import FileSaver from 'file-saver'
// import * as XLSX from 'xlsx' // import * as XLSX from 'xlsx'
export default { export default {
components: { lineChart, AddOrUpdate, ExportDayReport }, components: { lineChart, AddOrUpdate },
mixins: [basicPage, tableHeightMixin], mixins: [basicPage, tableHeightMixin],
data() { data() {
return { return {
@ -94,16 +91,6 @@ export default {
inputNum: 0, inputNum: 0,
heightNum: 180, heightNum: 180,
factoryList, factoryList,
produceData: [],
pieList:[],
hisObj: {
seriesList: [],
dateList:[],
},
beProcessObj: {
xAxisList: [],
yAxisList:[]
},
factoryArray, factoryArray,
listQuery: { listQuery: {
pageSize: 20, pageSize: 20,
@ -119,10 +106,6 @@ export default {
type: 'detail', type: 'detail',
btnName: '详情', btnName: '详情',
}, },
{
type: 'export',
btnName: '导出',
},
// { // {
// type: 'delete', // type: 'delete',
// btnName: '', // btnName: '',
@ -159,15 +142,15 @@ export default {
selectOptions: [ selectOptions: [
{ {
label: '未开始', label: '未开始',
value: 0
},
{
label: '生产中',
value: 1 value: 1
}, },
{ {
label: '已完成', label: '生产中',
value: 2 value: 2
},
{
label: '已完成',
value: 3
} }
], ],
labelField: "label", labelField: "label",
@ -298,29 +281,6 @@ export default {
this.getOverView() this.getOverView()
}, },
methods: { methods: {
exportPDF() {
setTimeout(() => {
this.$message.success('正在导出,请稍等!')
const element = document.getElementById('dayRepDom')
element.style.display = 'block'
const fileName = '工单数据' + moment().format('yyMMDD') + '.pdf'
html2canvas(element, {
dpi: 300, // Set to 300 DPI
scale: 3 // Adjusts your resolution
}).then(function (canvas) {
const imgWidth = 595.28
const imgHeight = 841.89
const pageData = canvas.toDataURL('image/jpeg', 1.0)
const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight])
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
setTimeout(() => {
PDF.save(fileName) //
}, 1000)
})
element.style.display = 'none'
}, 3000)
},
getOverView() { getOverView() {
getOverView().then(res => { getOverView().then(res => {
// this.data = res.data // this.data = res.data
@ -339,46 +299,11 @@ export default {
}) })
}, },
otherMethods(val) { otherMethods(val) {
console.log(val) this.detailOrUpdateVisible = true;
if (val.type === 'detail') { // this.addOrEditTitle = "";
this.detailOrUpdateVisible = true; this.$nextTick(() => {
// this.addOrEditTitle = ""; this.$refs.detailOrUpdate.init(val.data.id);
this.$nextTick(() => { });
this.$refs.detailOrUpdate.init(val.data.id);
});
} else {
getWorkOrderDetail(val.data.id).then((res) => {
if (res.code === 0) {
// this.loading = false
const xAxisList = Object.keys(res.data.inProcessDis)
const yAxisList = Object.values(res.data.inProcessDis)
this.beProcessObj.xAxisList = xAxisList
this.beProcessObj.yAxisList = yAxisList
// console.log(this.beProcessObj)
; const data = res.data.prodWorkOrderDO
const barList = [data.targetProduction, data.plannedInvestment, data.actualInvestment, data.actualProduction, data.wasteNum, data.reworkNum]
const seriesList = []
const dateList = []
res.data.his.forEach(element => {
seriesList.push(element.actualProduction)
dateList.push(element.recordTime[0] + '-' + element.recordTime[1] + '-' + element.recordTime[2])
})
this.hisObj.seriesList = seriesList
this.hisObj.dateList = dateList
this.produceData = barList
this.pieList = [
{ value: data.actualProduction ? data.actualProduction : 0, name: '实际产出' },
{ value: data.wasteNum ? data.wasteNum : 0, name: '废品数量' },
{ value: data.reworkNum ? data.reworkNum : 0, name: '待再加工数量' }
]
}
this.$nextTick(() => {
this.exportPDF()
})
})
}
}, },
async getDataList() { async getDataList() {
const res = await getWorkOrderPage(this.listQuery) const res = await getWorkOrderPage(this.listQuery)

View File

@ -1,9 +1,9 @@
<!-- <!--
* @Author: Do not edit * @Author: Do not edit
* @Date: 2024-06-24 15:03:19 * @Date: 2024-06-24 15:03:19
* @LastEditTime: 2024-07-08 08:48:58 * @LastEditTime: 2024-06-24 15:07:42
* @LastEditors: zhp * @LastEditors: DY
* @Description: * @Description:
--> -->
<template> <template>
<div> <div>
@ -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

@ -96,7 +96,7 @@ export default {
name: "", name: "",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-18, -16], position: [-18, -16],
@ -110,7 +110,7 @@ export default {
name: "", name: "",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -187,19 +187,19 @@ export default {
{ {
prop: "yoy", prop: "yoy",
label: msg.yoyColumn, label: msg.yoyColumn,
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"), filter: (val) => (val || val === 0 ? val : "-"),
minWidth: 150, minWidth: 150,
}, },
{ {
prop: "queryValue", prop: "queryValue",
label: msg.queryColumn, label: msg.queryColumn,
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"), filter: (val) => (val || val === 0 ? val : "-"),
minWidth: 150, minWidth: 150,
}, },
{ {
prop: "target", prop: "target",
label: msg.targetColumn, label: msg.targetColumn,
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"), filter: (val) => (val || val === 0 ? val : "-"),
minWidth: 150, minWidth: 150,
}, },
]; ];
@ -273,7 +273,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-18, -16], position: [-18, -16],
@ -287,7 +287,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],

View File

@ -93,7 +93,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
// position: [-5, -16], // position: [-5, -16],
@ -107,7 +107,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -285,7 +285,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
// position: [-5, -16], // position: [-5, -16],
@ -299,7 +299,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],

View File

@ -93,7 +93,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
// position: [-5, -16], // position: [-5, -16],
@ -107,7 +107,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -272,7 +272,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
// position: [-5, -16], // position: [-5, -16],
@ -286,7 +286,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],

View File

@ -96,7 +96,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-18, -16], position: [-18, -16],
@ -110,7 +110,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -273,7 +273,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-18, -16], position: [-18, -16],
@ -287,7 +287,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],

View File

@ -73,13 +73,13 @@ export default {
name: "1", name: "1",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
}, },
{ {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
barGap: "-100%", barGap: "-100%",
label: { label: {
show: true, show: true,
@ -98,13 +98,13 @@ export default {
name: "1", name: "1",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
}, },
{ {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
barGap: "-100%", barGap: "-100%",
label: { label: {
show: true, show: true,
@ -176,13 +176,13 @@ export default {
{ {
prop: "queryValue", prop: "queryValue",
label: msg.queryColumn, label: msg.queryColumn,
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"), filter: (val) => (val || val === 0 ? val : "-"),
minWidth: 150, minWidth: 150,
}, },
{ {
prop: "target", prop: "target",
label: msg.targetColumn, label: msg.targetColumn,
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"), filter: (val) => (val || val === 0 ? val : "-"),
minWidth: 150, minWidth: 150,
}, },
]; ];
@ -222,7 +222,6 @@ export default {
}); });
}, },
setChartMsg(val) { setChartMsg(val) {
console.log(val);
let xData1 = []; let xData1 = [];
let xData2 = []; let xData2 = [];
let barData1 = []; let barData1 = [];
@ -232,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 ? parseFloat(val[i].target.toFixed(2)) : 0); barData1.push(val[i].target || 0);
barData2.push(val[i].queryValue ? parseFloat(val[i].queryValue.toFixed(2)) : 0); barData2.push(val[i].queryValue || 0);
} else { } else {
xData2.push(val[i].item); xData2.push(val[i].item);
barData3.push(val[i].target ? parseFloat(val[i].target.toFixed(2)) : 0); barData3.push(val[i].target || 0);
barData4.push(val[i].queryValue ? parseFloat(val[i].queryValue.toFixed(2)) : 0); barData4.push(val[i].queryValue || 0);
} }
} }
this.chartMsg1.xData = xData1; this.chartMsg1.xData = xData1;
@ -259,13 +258,13 @@ export default {
name: "1", name: "1",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
}, },
{ {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
barGap: "-100%", barGap: "-100%",
label: { label: {
show: true, show: true,
@ -284,13 +283,13 @@ export default {
name: "1", name: "1",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
}, },
{ {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
barGap: "-100%", barGap: "-100%",
label: { label: {
show: true, show: true,

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-07-12 09:12:10 * @LastEditTime: 2024-07-02 08:41:11
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -51,24 +51,20 @@ 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/>" +
`${params[i].seriesType === "line" `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
? '<img width="11" height="11" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />'
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;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 ? parseFloat(params[i].value.toFixed(2)) : 0) + "MW" ? (params[i].value ? params[i].value : 0) + "MW"
: params[i].seriesName.search('BIPV') != -1 : (params[i].value ? params[i].value : 0) + "片"
? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "㎡" : (params[i].value ? params[i].value : 0) + "片"
}</span>`; }</span>`;
} }
return res; return res;
@ -238,7 +234,7 @@ export default {
text-align: right; text-align: right;
position: relative; position: relative;
// right: 30; // right: 30;
top: 0px; 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-07-09 16:15:10 * @LastEditTime: 2024-07-02 08:40:56
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -59,13 +59,12 @@ export default {
`<span style='display:inline-block;margin-right:4px;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 ? parseFloat(params[i].data.titleValue.toFixed(2)) : 0.0) + "%" ? (params[i].data.titleValue ? params[i].data.titleValue.toFixed(2) : 0.0) + "%"
: params[i].seriesName === "转化效率" : params[i].seriesName === "转化效率"
? (params[i].data.titleValue ? parseFloat(params[i].data.titleValue.toFixed(2)) : 0.0) + "%" ? (params[i].data.titleValue ? params[i].data.titleValue.toFixed(2) : 0.0) + "%"
: params[i].seriesName.search('总功率') != -1 : params[i].seriesName.search('总功率') != -1
? (params[i].data.titleValue ? parseFloat(params[i].data.titleValue.toFixed(2)) : 0) + "MW" ? (params[i].data.titleValue ? params[i].data.titleValue : 0) + "MW"
: params[i].seriesName.search('BIPV') != -1 : (params[i].data.titleValue ? params[i].data.titleValue : 0) + "片"
? (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;
@ -237,7 +236,7 @@ export default {
position: relative; position: relative;
// right: 30; // right: 30;
// top: 10px; // top: 10px;
top: 0px; 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-07-11 16:45:08 * @LastEditTime: 2024-07-02 08:41:23
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -38,7 +38,7 @@ export default {
grid: { grid: {
left: 60, left: 60,
right: 0, right: 0,
bottom: 31, bottom: 30,
top: 30, top: 30,
containLabel:true, containLabel:true,
}, },
@ -51,6 +51,7 @@ export default {
}, },
}, },
formatter: function (params) { formatter: function (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 +=
@ -60,11 +61,10 @@ export default {
`<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 === "转化效率"
? parseFloat(params[i].value.toFixed(2)) + "%" ? params[i].value+ "%"
: params[i].seriesName.search('总功率') != -1 : params[i].seriesName.search('总功率') != -1
? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "MW" ? (params[i].value ? params[i] : 0) + "MW"
: params[i].seriesName.search('BIPV') != -1 : (params[i].value ? params[i].value : 0) + "片"
? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "㎡":(params[i].value ? params[i].value : 0) + "片"
}</span>`; }</span>`;
} }
return res; return res;
@ -214,7 +214,7 @@ export default {
text-align: right; text-align: right;
position: relative; position: relative;
// right: 30; // right: 30;
top: 0px; top: -10px;
// top: -10px; // top: -10px;
.itemData { .itemData {
display: inline-block; display: inline-block;

View File

@ -1,277 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-07-09 16:06:13
* @LastEditTime: 2024-07-09 16:14:54
* @LastEditors: zhp
* @Description:
-->
<!--
* @Author: zhp
* @Date: 2024-06-19 15:28:34
* @LastEditTime: 2024-07-08 14:19:57
* @LastEditors: zhp
* @Description:
-->
<template>
<div>
<!-- 暂无数据 -->
<div class="no-data-bg" style="position: relative; left: 50%; transform: translateX(-50%)"
v-show="this.chartMsg.series[0].data.length === 0"></div>
<!-- 图例 -->
<div v-show="this.chartMsg.series[0].data.length > 0 ">
<div class="legendData" v-if="show">
<span class="itemData" v-for="item in legendList" :key="item.id">
<span v-if="item.type === 1" class="block" :style="{ backgroundColor: item.color }"></span>
<span v-if="item.type === 2" class="line" :style="{ backgroundColor: item.color }">
<span class="line-block" :style="{ backgroundColor: item.color }"></span>
</span>
{{ item.name }}</span>
</div>
<div :id="chartId" :style="{ width: '100%', height: chartHeight + 'px' }"></div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { debounce } from "@/utils/debounce";
export default {
name: "bmLineBar",
data() {
return {
myChart: "",
option: {
color: [],
// color: ["#8EF0AB", "#63BDFF", "#288AFF"],
grid: {
left: 30,
right: 50,
bottom: 30,
top: 30,
containLabel:true,
},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
formatter: function (params) {
console.log('params', params)
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++) {
res +=
"<br/>" +
`${params[i].seriesType === "line"
? '<img width="11" height="11" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />'
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;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='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].seriesName === "转化效率"
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
: params[i].seriesName.search('总功率') != -1
? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "MW"
: params[i].seriesName.search('BIPV') != -1
? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "㎡" : (params[i].value ? params[i].value : 0) + "片"
}</span>`;
}
return res;
},
},
xAxis: {
type: "category",
data: [],
axisTick: {
show: false,
},
axisPointer: {
type: "shadow",
},
},
dataZoom: [//
{
//
show: true,
//
type: "slider",
//
backgroundColor: "#F7F7F7",
// handleStyle: {
// color: '#D6D6D6'
// },
handleStyle: {
borderColor: '#EBEBEB',
color: '#EBEBEB'
},
moveHandleStyle: {
borderColor: '#EBEBEB',
color: '#EBEBEB'
},
emphasis: {
handleStyle: {
borderColor: '#D6D6D6',
color: '#D6D6D6'
},
moveHandleStyle: {
borderColor: '#D6D6D6',
color: '#D6D6D6'
}
},
//
fillerColor: "#F7F7F7",
//
borderColor: "#F7F7F7",
// detail
showDetail: false,
//
startValue: 0,
//
endValue: 5,
// empty
//
filterMode: "empty",
//
width: "100%",
//
height: 3,
//
left: "center",
//
zoomLoxk: true,
//
handleSize: 0,
// dataZoom-slider
bottom: 14,
},
{
//
//
type: "inside",
//
zoomOnMouseWheel: false,
//
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
],
yAxis:undefined,
series: [],
},
};
},
props: {
chartHeight: {
type: Number,
default: 300,
},
type: {
type: Number,
default: 2,
},
show: {
type: Boolean,
default: true,
},
legendList: {
type: Array,
default: () => [],
},
chartMsg: {
type: Object,
default: () => {},
},
chartId: {
type: String,
default: "bmChart",
},
chartNum: {
type: Number,
default: 1,
},
},
watch: {
chartHeight: {
handler(newVal) {
this.chartHeight = newVal;
},
},
type() {
this.canvasReset();
},
chartNum(val) {
this.canvasReset();
},
chartMsg: {
handler(newVal) {
this.canvasReset();
},
deep: true,
},
},
mounted() {
this.canvasReset();
},
methods: {
canvasReset() {
debounce(() => {
this.getMes();
}, 500)();
},
getMes() {
console.log('222222', this.chartMsg.series);
if (this.myChart) {
this.myChart.dispose();
}
var chartDom = document.getElementById(this.chartId);
this.myChart = echarts.init(chartDom);
this.option.color = this.chartMsg.color;
this.option.xAxis.data = this.chartMsg.xData;
// this.option.yAxis.name = this.chartMsg.yName;
// this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel;
this.option.series = this.chartMsg.series;
this.option.yAxis = this.chartMsg.yAxis;
this.myChart.setOption(this.option);
},
},
};
</script>
<style lang="scss" scoped>
.legendData {
text-align: right;
position: relative;
// right: 30;
top: 0px;
.itemData {
display: inline-block;
margin-right: 10px;
font-size: 14px;
color: #8c8c8c;
.block {
width: 10px;
height: 10px;
display: inline-block;
margin-right: 4px;
}
.line {
width: 10px;
height: 10px;
border-radius: 5px;
display: inline-block;
margin-right: 4px;
position: relative;
.line-block {
position: absolute;
width: 20px;
height: 2px;
left: -5px;
top: 4px;
}
}
}
}
</style>

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-07-09 16:15:04 * @LastEditTime: 2024-07-02 08:33:22
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -51,7 +51,7 @@ 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++) {
@ -61,11 +61,11 @@ export default {
`<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;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 ? parseFloat(params[0].value.toFixed(2)) : 0.0) + "%" ? (params[0].value ? params[0].value.toFixed(2) : 0.0) + "%"
: params[0].name === "转化效率" : params[0].name === "转化效率"
? (params[0].value ? parseFloat(params[0].value.toFixed(2)) : 0.0) + "%" ? (params[0].value ? params[0].value.toFixed(2) : 0.0) + "%"
: params[0].axisValueLabel.search('总功率') != -1 : params[0].seriesName.search('总功率') != -1
? (params[0].value ? parseFloat(params[0].value.toFixed(2)) : 0) + "MW" ? (params[0].value ? params[0].value : 0) + "MW"
: (params[0].value ? params[0].value : 0) + "片" : (params[0].value ? params[0].value : 0) + "片"
}</span>`; }</span>`;
// } // }
@ -75,11 +75,11 @@ export default {
`<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;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 ? parseFloat(params[1].value.toFixed(2)) : 0.0) + "%" ? (params[1].value ? params[1].value.toFixed(2) : 0.0) + "%"
: params[1].name === "转化效率" : params[1].name === "转化效率"
? (params[1].value ? parseFloat(params[1].value.toFixed(2)) : 0.0) + "%" ? (params[1].value ? params[1].value.toFixed(2) : 0.0) + "%"
: params[1].axisValueLabel.search('总功率') != -1 : params[1].seriesName.search('总功率') != -1
? (params[1].value ? parseFloat(params[1].value.toFixed(2)) : 0) + "MW" ? (params[1].value ? params[1].value : 0) + "MW"
: (params[1].value ? params[1].value : 0) + "片" : (params[1].value ? params[1].value : 0) + "片"
}</span>`; }</span>`;
} }
@ -227,7 +227,7 @@ export default {
.legendData { .legendData {
text-align: right; text-align: right;
position: relative; position: relative;
top: 0px; 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-07-10 15:45:28 * @LastEditTime: 2024-07-01 14:43:42
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -20,9 +20,9 @@
</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 prefix-icon="el-icon-date" size="small" clearable v-model="listQuery.reportTime" <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator=""
type="daterange" range-separator="至" start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime"
@change="changeDayTime" end-placeholder="结束日期"> end-placeholder="结束日期">
</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">
@ -201,29 +201,12 @@ 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 = this.getFirstDay() this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD')
this.listQuery.endDate = this.getLastDay() this.listQuery.endDate = moment(today).format('yyyy-MM-DD')
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
@ -344,13 +327,11 @@ export default {
}, },
async getDataList() { async getDataList() {
console.log(this.listQuery.type); console.log(this.listQuery.type);
if (this.listQuery.type === '') { if (this.listQuery.type == null) {
this.$message.warning('请选择时间维度!') return this.$message('请选择时间维度')
return
} }
if (!this.listQuery.startDate && !this.listQuery.endDate) { if (!this.listQuery.startDate && !this.listQuery.endDate) {
this.$message.warning('请选择起止时间') return this.$message('请选择起止时间')
return
} }
this.otherProps = [] this.otherProps = []
let arr = [] let arr = []
@ -376,6 +357,10 @@ export default {
type: '芯片', type: '芯片',
item: '芯片良率', item: '芯片良率',
unit: '%' unit: '%'
}, {
type: '芯片',
item: '芯片产量',
unit: '片'
}, { }, {
type: '芯片', type: '芯片',
item: '芯片总功率', item: '芯片总功率',
@ -444,7 +429,7 @@ export default {
{ {
type: 'BIPV', type: 'BIPV',
item: 'BIPV产量', item: 'BIPV产量',
unit: '' unit: 'm2'
}, },
{ {
type: 'BIPV', type: 'BIPV',
@ -454,7 +439,7 @@ export default {
{ {
type: 'BIPV', type: 'BIPV',
item: '人均产量', item: '人均产量',
unit: '/人' unit: 'm2/人'
}, },
{ {
type: 'BIPV', type: 'BIPV',
@ -477,7 +462,6 @@ 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
}) })
}) })
@ -486,32 +470,36 @@ 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[1]['' + m + ''] = item.chipYield // dataArr[0].factory = item.factory === 1 ? '' : ''
dataArr[2]['' + m + ''] = item.chipAveragePower // dataArr[1].factory = item.factory === 1 ? '' : ''
dataArr[3]['' + m + ''] = item.chipYieldRate // dataArr[2].factory = item.factory === 1 ? '' : ''
dataArr[4]['' + m + ''] = item.chipTotalPower // dataArr[3].factory = item.factory === 1 ? '' : ''
dataArr[5]['' + m + ''] = item.chipCssMarriageRate dataArr[1]['' + m + ''] = item.chipInput
dataArr[6]['' + m + ''] = item.chipOee dataArr[2]['' + m + ''] = item.chipYield
dataArr[7]['' + m + ''] = item.chipCapacityUtilizationRate dataArr[3]['' + m + ''] = item.chipYieldRate
dataArr[8]['' + m + ''] = item.chipAnnualAverageProduction dataArr[4]['' + m + ''] = item.chipAveragePower
dataArr[9]['' + m + ''] = item.chipBom dataArr[5]['' + m + ''] = item.chipTotalPower
dataArr[10]['' + m + ''] = item.componentYield dataArr[6]['' + m + ''] = item.chipCssMarriageRate
dataArr[11]['' + m + ''] = item.componentAveragePower dataArr[7]['' + m + ''] = item.chipOee
dataArr[12]['' + m + ''] = item.componentYieldRate dataArr[8]['' + m + ''] = item.chipCapacityUtilizationRate
dataArr[13]['' + m + ''] = item.componentTotalPower dataArr[9]['' + m + ''] = item.chipAnnualAverageProduction
dataArr[14]['' + m + ''] = item.componentOee dataArr[10]['' + m + ''] = item.chipBom
dataArr[15]['' + m + ''] = item.componentCapacityUtilizationRate dataArr[11]['' + m + ''] = item.componentYield
dataArr[16]['' + m + ''] = item.componentAnnualAverageProduction dataArr[12]['' + m + ''] = item.componentAveragePower
dataArr[17]['' + m + ''] = item.componentBom dataArr[13]['' + m + ''] = item.componentYieldRate
dataArr[18]['' + m + ''] = item.bipvChipUsage dataArr[14]['' + m + ''] = item.componentTotalPower
dataArr[19]['' + m + ''] = item.bipvProductOutput dataArr[15]['' + m + ''] = item.componentOee
dataArr[20]['' + m + ''] = item.bipvChipUtilizationRate dataArr[16]['' + m + ''] = item.componentCapacityUtilizationRate
dataArr[21]['' + m + ''] = item.bipvAnnualAverageProduction dataArr[17]['' + m + ''] = item.componentAnnualAverageProduction
dataArr[22]['' + m + ''] = item.bipvOeeMaterialCost dataArr[18]['' + m + ''] = item.componentBom
dataArr[23]['' + m + ''] = item.bipvInsideMaterialCost dataArr[19]['' + m + ''] = item.bipvChipUsage
dataArr[24]['' + m + ''] = item.bipvComprehensiveMaterialCost dataArr[20]['' + m + ''] = item.bipvProductOutput
// dataArr[25]['' + m + ''] = item.bipvComprehensiveMaterialCost dataArr[21]['' + m + ''] = item.bipvChipUtilizationRate
dataArr[22]['' + m + ''] = item.bipvAnnualAverageProduction
dataArr[23]['' + m + ''] = item.bipvOeeMaterialCost
dataArr[24]['' + m + ''] = item.bipvInsideMaterialCost
dataArr[25]['' + m + ''] = item.bipvComprehensiveMaterialCost
// }) // })
// ele.titleValue // ele.titleValue

View File

@ -96,7 +96,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-18, -16], position: [-18, -16],
@ -110,7 +110,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -273,7 +273,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-18, -16], position: [-18, -16],
@ -287,7 +287,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],

View File

@ -93,7 +93,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
// position: [-5, -16], // position: [-5, -16],
@ -107,7 +107,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -285,7 +285,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
// position: [-5, -16], // position: [-5, -16],
@ -299,7 +299,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],

View File

@ -96,7 +96,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-18, -16], position: [-18, -16],
@ -110,7 +110,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -187,19 +187,19 @@ export default {
{ {
prop: "yoy", prop: "yoy",
label: msg.yoyColumn, label: msg.yoyColumn,
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"), filter: (val) => (val || val === 0 ? val : "-"),
minWidth: 150, minWidth: 150,
}, },
{ {
prop: "queryValue", prop: "queryValue",
label: msg.queryColumn, label: msg.queryColumn,
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"), filter: (val) => (val || val === 0 ? val : "-"),
minWidth: 150, minWidth: 150,
}, },
{ {
prop: "target", prop: "target",
label: msg.targetColumn, label: msg.targetColumn,
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"), filter: (val) => (val || val === 0 ? val : "-"),
minWidth: 150, minWidth: 150,
}, },
]; ];
@ -273,7 +273,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-18, -16], position: [-18, -16],
@ -287,7 +287,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],

View File

@ -5,7 +5,7 @@
</ButtonNav> </ButtonNav>
<!-- </div> --> <!-- </div> -->
<div class="search"> <div class="search">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="smallTitle"> <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="请选择" @change="handleChange"> <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">
@ -13,7 +13,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-show="listQuery.date === 0 || listQuery.date === ''" label="时间范围" prop="reportTime"> <el-form-item v-show="listQuery.date === 0 || listQuery.date === ''" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="" <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator=""
start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime"
end-placeholder="结束日期"> end-placeholder="结束日期">
</el-date-picker> </el-date-picker>
@ -84,8 +84,8 @@
:chartMsg="chartMsgYearTarget" :chartId=" 'yearData'" :chartNum="chartNum" /> :chartMsg="chartMsgYearTarget" :chartId=" 'yearData'" :chartNum="chartNum" />
</el-col> --> </el-col> -->
</el-row> </el-row>
<base-table :key="showTable" :table-props="tableProps" :page="listQuery.current" :limit="listQuery.size" <base-table :key="showTable" :table-props="tableProps" :page="listQuery.current"
:table-data="tableData" :max-height="tableH" /> :limit="listQuery.size" :table-data="tableData" :max-height="tableH" />
</div> </div>
<!-- <div class="containerBottom"> <!-- <div class="containerBottom">
@ -96,7 +96,7 @@
<script> <script>
import { getProduceTransData, exportProduceTransData } from '@/api/report'; import { getProduceTransData, exportProduceTransData } from '@/api/report';
import bmSearchBar from "./components/bmSearchBar"; import bmSearchBar from "./components/bmSearchBar";
import BmLineBar from "./components/produceLineYieldBar.vue"; import BmLineBar from "./components/produceLineBar.vue";
import produceLineBarYearTarget from "./components/produceLineYieldBarTarget.vue"; import produceLineBarYearTarget from "./components/produceLineYieldBarTarget.vue";
import ButtonNav from '@/components/ButtonNav' import ButtonNav from '@/components/ButtonNav'
@ -201,7 +201,7 @@ export default {
name: "单位/%", name: "单位/%",
nameTextStyle: { nameTextStyle: {
fontSize: 12, fontSize: 12,
align: "left", align: "right",
}, },
axisLabel: {}, axisLabel: {},
} }
@ -212,10 +212,10 @@ export default {
// yAxisIndex: 0, // yAxisIndex: 0,
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [-18, -16],
color: "#68C483", color: "#68C483",
formatter: function (params) { formatter: function (params) {
return params.value return params.value
@ -227,10 +227,10 @@ export default {
type: 'bar', type: 'bar',
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [-18, -16],
color: "#68C483", color: "#68C483",
formatter: function (params) { formatter: function (params) {
return params.value return params.value
@ -276,7 +276,7 @@ export default {
// splitNumber: 5, // splitNumber: 5,
nameTextStyle: { nameTextStyle: {
fontSize: 12, fontSize: 12,
align: "left", align: "right",
}, },
axisLabel: {}, axisLabel: {},
} }
@ -287,10 +287,10 @@ export default {
data: [ data: [
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-0, -16], position: [-20, -16],
color: "#68C483", color: "#68C483",
formatter: function (params) { formatter: function (params) {
return params.value.toFixed(2) return params.value.toFixed(2)
@ -302,10 +302,10 @@ export default {
data: [ data: [
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [10, -16],
color: "#288AFF", color: "#288AFF",
formatter: function (params) { formatter: function (params) {
return params.value.toFixed(2) return params.value.toFixed(2)
@ -396,29 +396,12 @@ 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 = this.getFirstDay() this.listQuery.beginTime = moment(sevenDaysAgo).format('yyyy-MM-DD')
this.listQuery.endTime = this.getLastDay() this.listQuery.endTime = moment(today).format('yyyy-MM-DD')
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) { handleChange(val) {
this.listQuery.reportTime = [] this.listQuery.reportTime = []
this.listQuery.end = null this.listQuery.end = null
@ -546,13 +529,11 @@ 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 === '') { if (this.listQuery.date == null) {
this.$message.warning('请选择时间维度!') return this.$message('请选择时间维度')
return
} }
if (!this.listQuery.beginTime && !this.listQuery.endTime) { if (!this.listQuery.beginTime && !this.listQuery.endTime) {
this.$message.warning('请选择起止时间') return this.$message('请选择起止时间')
return
} }
console.log(this.listQuery); console.log(this.listQuery);
if (this.listQuery.type == 3) { if (this.listQuery.type == 3) {
@ -585,7 +566,6 @@ export default {
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 ? parseFloat(val.toFixed(2)) : "-"),
prop: 'value' + i prop: 'value' + i
}) })
}) })
@ -634,27 +614,18 @@ export default {
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'
} }
@ -662,27 +633,18 @@ 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'
} }
@ -769,45 +731,30 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.search { .search {
// height: calc((100px)); // height: calc((100px));
background-color: #fff; background-color: #fff;
border-radius: 8px; border-radius: 8px;
padding: 16px 16px 0 16px; padding: 16px 16px 0 16px;
margin: 8px 0px; margin: 8px 0px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -9px;
}
} }
.containerTop { .containerTop {
height: calc((100vh - 170px)); height: calc((100vh - 170px));
background-color: #fff; background-color: #fff;
border-radius: 8px; border-radius: 8px;
padding: 4px 16px 16px 16px; padding: 16px;
} }
.blueTip::before { .blueTip::before {
display: inline-block; display: inline-block;
width: 4px; content: '';
height: 16px; width: 4px;
background: #0b58ff; height: 18px;
content: ""; background: #0B58FF;
margin-right: 8px; border-radius: 1px;
vertical-align: -3px; margin-right: 8PX;
margin-top: 8px;
} }
.containerTop { .containerTop {

View File

@ -3,7 +3,7 @@
<ButtonNav style="padding: 0;" :menus="['邯郸', '瑞昌']" :button-mode="true" @change="currentMenu = $event"> <ButtonNav style="padding: 0;" :menus="['邯郸', '瑞昌']" :button-mode="true" @change="currentMenu = $event">
</ButtonNav> </ButtonNav>
<div class="search"> <div class="search">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="smallTitle"> <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="请选择" @change="handleChange"> <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">
@ -11,7 +11,7 @@
</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="daterange" range-separator="" <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator=""
start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime"
end-placeholder="结束日期"> end-placeholder="结束日期">
</el-date-picker> </el-date-picker>
@ -54,59 +54,35 @@
<!-- <div class="smallTitle">产量转化效率</div> --> <!-- <div class="smallTitle">产量转化效率</div> -->
<!-- <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> --> <!-- <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> -->
<el-row v-if="this.listQuery.type === 2">
<el-col :span="18">
<div class="blueTip">
生产情况对比
</div>
</el-col>
<el-col :span="6">
<div class="blueTip">
{{ title }}
</div>
</el-col>
</el-row>
<el-row v-else-if="this.listQuery.type === 1 || this.listQuery.type === 0">
<el-col :span="24">
<div class="blueTip">
生产情况对比
</div>
</el-col>
</el-row>
<el-row v-else>
<div class="blueTip">
生产情况对比
</div>
</el-row>
<el-row v-if="this.listQuery.type === 2"> <el-row v-if="this.listQuery.type === 2">
<el-col :span="12"> <el-col :span="12">
<!-- <div class="blueTip"> <div class="blueTip">
生产情况对比 生产情况对比
</div> --> </div>
<bm-line-bar :type="listQuery.type" style="margin-top: 20px;" :show="false" :chartHeight="chartHeight" <bm-line-bar :type="listQuery.type" style="margin-top: 20px;" :show="false" :chartHeight="chartHeight"
:legendList="legendList" :chartMsg="chartMsg" :chartId="chartId" :chartNum="chartNum" /> :legendList="legendList" :chartMsg="chartMsg" :chartId="chartId" :chartNum="chartNum" />
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6" style="margin-top: 30px">
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList" <bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgTarget" :gridLeft="gridLeft" :chartId="'chartTarget'" :chartNum="chartNum" /> :chartMsg="chartMsgTarget" :gridLeft="gridLeft" :chartId="'chartTarget'" :chartNum="chartNum" />
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<!-- <div class="blueTip"> <div class="blueTip">
{{ title }} {{ title }}
</div> --> </div>
<bm-line-bar-year-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList" <bm-line-bar-year-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgYearTarget" :chartId="'chartYearTarget'" :chartNum="chartNum" /> :chartMsg="chartMsgYearTarget" :chartId="'chartYearTarget'" :chartNum="chartNum" />
</el-col> </el-col>
</el-row> </el-row>
<el-row v-else-if="this.listQuery.type === 1 || this.listQuery.type === 0"> <el-row v-else-if="this.listQuery.type === 1 || this.listQuery.type === 0">
<el-col :span="18"> <el-col :span="18">
<!-- <div class="blueTip"> <div class="blueTip">
生产情况对比 生产情况对比
</div> --> </div>
<bm-line-bar :type="listQuery.type" style="margin-top: 20px;" :show="false" :chartHeight="chartHeight" <bm-line-bar :type="listQuery.type" style="margin-top: 20px;" :show="false" :chartHeight="chartHeight"
:legendList="legendList" :chartMsg="chartMsg" :chartId="'chartDay'" :chartNum="chartNum" /> :legendList="legendList" :chartMsg="chartMsg" :chartId="'chartDay'" :chartNum="chartNum" />
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6" style="margin-top: 30px">
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList" <bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgTarget" :gridLeft="gridLeft" :chartId="'chartDayTarget'" :chartNum="chartNum" /> :chartMsg="chartMsgTarget" :gridLeft="gridLeft" :chartId="'chartDayTarget'" :chartNum="chartNum" />
</el-col> </el-col>
@ -119,9 +95,9 @@
</el-col> --> </el-col> -->
</el-row> </el-row>
<el-row v-else> <el-row v-else>
<!-- <div class="blueTip"> <div class="blueTip">
生产情况对比 生产情况对比
</div> --> </div>
<!-- <el-col :span="12"> --> <!-- <el-col :span="12"> -->
<bm-line-bar :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList" :chartMsg="chartMsg" <bm-line-bar :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList" :chartMsg="chartMsg"
:chartId="chartId" :chartNum="chartNum" /> :chartId="chartId" :chartNum="chartNum" />
@ -216,13 +192,13 @@ export default {
data: [ data: [
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-18, -16], position: [-18, -16],
color: "#68C483", color: "#68C483",
formatter: function (params) { formatter: function (params) {
return parseFloat(params.value.toFixed(2)) return params.value
}, },
}, },
}, },
@ -230,13 +206,13 @@ export default {
name: "标准组件总功率", name: "标准组件总功率",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
color: "#288AFF", color: "#288AFF",
formatter: function (params) { formatter: function (params) {
return parseFloat(params.value.toFixed(2)) return params.value
}, },
}, },
}, },
@ -282,13 +258,13 @@ export default {
name: "芯片总功率", name: "芯片总功率",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-10, -16], position: [-30, -16],
color: "#68C483", color: "#68C483",
formatter: function (params) { formatter: function (params) {
return parseFloat(params.value.toFixed(2)) return params.value
}, },
}, },
}, },
@ -297,13 +273,13 @@ export default {
data: [ data: [
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
color: "#288AFF", color: "#288AFF",
formatter: function (params) { formatter: function (params) {
return parseFloat(params.value.toFixed(2)) return params.value
}, },
}, },
}, },
@ -389,29 +365,12 @@ 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 = this.getFirstDay() this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD')
this.listQuery.endDate = this.getLastDay() this.listQuery.endDate = moment(today).format('yyyy-MM-DD')
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
@ -540,14 +499,12 @@ export default {
this.chartMsgTarget.series = [] this.chartMsgTarget.series = []
this.chartMsgYearTarget.series[0].data = [] this.chartMsgYearTarget.series[0].data = []
this.chartMsgYearTarget.series[1].data = [] this.chartMsgYearTarget.series[1].data = []
console.log(this.listQuery.type); console.log(this.listQuery);
if (this.listQuery.type === '') { if (this.listQuery.type == null) {
this.$message.warning('请选择时间维度!') return this.$message('请选择时间维度')
return
} }
if (!this.listQuery.startDate && !this.listQuery.endDate) { if (!this.listQuery.startDate && !this.listQuery.endDate) {
this.$message.warning('请选择起止时间') return this.$message('请选择起止时间')
return
} }
let arr = [] let arr = []
this.currentMenu === '邯郸' ? arr.push(1) : arr.push(0) this.currentMenu === '邯郸' ? arr.push(1) : arr.push(0)
@ -559,7 +516,6 @@ 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
}) })
}) })
@ -674,14 +630,14 @@ export default {
// { name: "%", value: 18.4 }, // { name: "%", value: 18.4 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
// barGap: '-100%', // barGap: '-100%',
label: { label: {
show: true, show: true,
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.toFixed(2) return params.value
}, },
}, },
}, { }, {
@ -701,7 +657,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.toFixed(2) return params.value
}, },
}, },
}) })
@ -710,15 +666,18 @@ 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: 16, barWidth: 20,
label: { label: {
show: true, show: true,
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.toFixed(2) return params.value
}, },
}, },
}, { }, {
@ -732,18 +691,21 @@ export default {
// { name: "%", value: 80.2 }, // { name: "%", value: 80.2 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
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.toFixed(2) return params.value
}, },
}, },
}) })
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)
@ -836,7 +798,7 @@ export default {
// { name: "%", value: 18.4 }, // { name: "%", value: 18.4 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
// barGap: '-100%', // barGap: '-100%',
label: { label: {
show: true, show: true,
@ -877,7 +839,7 @@ export default {
// { name: "%", value: 80.2 }, // { name: "%", value: 80.2 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -897,7 +859,7 @@ export default {
// { name: "%", value: 80.2 }, // { name: "%", value: 80.2 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -991,6 +953,28 @@ export default {
border-radius: 8px; border-radius: 8px;
padding: 16px 16px 0 16px; padding: 16px 16px 0 16px;
margin: 8px 0px; margin: 8px 0px;
}
.containerTop {
height: calc((100vh - 170px));
background-color: #fff;
border-radius: 8px;
padding: 16px;
}
.blueTip::before {
display: inline-block;
content: '';
width: 4px;
height: 18px;
background: #0B58FF;
border-radius: 1px;
margin-right: 8PX;
margin-top: 8px;
}
.containerTop {
margin-top: 8px;
.smallTitle { .smallTitle {
font-size: 16px; font-size: 16px;
@ -1005,24 +989,7 @@ export default {
background: #0b58ff; background: #0b58ff;
content: ""; content: "";
margin-right: 8px; margin-right: 8px;
vertical-align: -9px; vertical-align: -3px;
} }
} }
.containerTop {
height: calc((100vh - 170px));
background-color: #fff;
border-radius: 8px;
padding: 4px 16px 16px 16px;
}
.blueTip::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
</style> </style>

View File

@ -3,7 +3,7 @@
<ButtonNav style="padding: 0;" :menus="['邯郸', '瑞昌']" :button-mode="true" @change="currentMenu = $event"> <ButtonNav style="padding: 0;" :menus="['邯郸', '瑞昌']" :button-mode="true" @change="currentMenu = $event">
</ButtonNav> </ButtonNav>
<div class="search"> <div class="search">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="smallTitle"> <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="请选择" @change="handleChange"> <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">
@ -11,7 +11,7 @@
</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="daterange" range-separator="" <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator=""
start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime"
end-placeholder="结束日期"> end-placeholder="结束日期">
</el-date-picker> </el-date-picker>
@ -54,63 +54,38 @@
<!-- <div class="smallTitle">产量转化效率</div> --> <!-- <div class="smallTitle">产量转化效率</div> -->
<!-- <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> --> <!-- <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> -->
<el-row v-if="this.listQuery.type === 2">
<el-col :span="18">
<div class="blueTip">
生产情况对比
</div>
</el-col>
<el-col :span="6">
<div class="blueTip">
{{ title }}
</div>
</el-col>
</el-row>
<el-row v-else-if="this.listQuery.type === 1 || this.listQuery.type === 0">
<el-col :span="24">
<div class="blueTip">
生产情况对比
</div>
</el-col>
</el-row>
<el-row v-else>
<div class="blueTip">
生产情况对比
</div>
</el-row>
<el-row v-if="this.listQuery.type === 2"> <el-row v-if="this.listQuery.type === 2">
<el-col :span="12"> <el-col :span="12">
<!-- <div class="blueTip"> <div class="blueTip">
生产情况对比 生产情况对比
</div> --> </div>
<bm-line-bar :type="listQuery.type" style="margin-top: 20px;" :show="false" :chartHeight="chartHeight" <bm-line-bar :type="listQuery.type" style="margin-top: 20px;" :show="false" :chartHeight="chartHeight"
:legendList="legendList" ref="dayChart" :chartMsg="chartMsg" :chartId="chartId" :chartNum="chartNum" /> :legendList="legendList" ref="dayChart" :chartMsg="chartMsg" :chartId="chartId" :chartNum="chartNum" />
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6" style="margin-top: 30px">
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList" <bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgTarget" :gridLeft="gridLeft" ref="dayTargetChart" :chartId=" 'chartTarget'" :chartMsg="chartMsgTarget" :gridLeft="gridLeft" ref="dayTargetChart" :chartId=" 'chartTarget'"
:chartNum="chartNum" /> :chartNum="chartNum" />
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<!-- <div class="blueTip"> <div class="blueTip">
{{ title }} {{ title }}
</div> --> </div>
<bm-line-bar-year-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList" <bm-line-bar-year-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgYearTarget" ref="chartYearTarget" :chartId=" 'chartYearTarget'" :chartNum="chartNum" /> :chartMsg="chartMsgYearTarget" ref="chartYearTarget" :chartId=" 'chartYearTarget'" :chartNum="chartNum" />
</el-col> </el-col>
</el-row> </el-row>
<el-row v-else-if="this.listQuery.type === 1 || this.listQuery.type === 0"> <el-row v-else-if="this.listQuery.type === 1 || this.listQuery.type === 0">
<el-col :span="18"> <el-col :span="18">
<!-- <div class="blueTip"> <div class="blueTip">
生产情况对比 生产情况对比
</div> --> </div>
<bm-line-bar :type="listQuery.type" style="margin-top: 20px;" :show="false" :chartHeight="chartHeight" <bm-line-bar :type="listQuery.type" style="margin-top: 20px;" :show="false" :chartHeight="chartHeight"
:legendList="legendList" :chartMsg="chartMsg" :chartId="'chartDay'" :chartNum="chartNum" /> :legendList="legendList" :chartMsg="chartMsg" :chartId="'chartDay'" :chartNum="chartNum" />
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6" style="margin-top: 30px">
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" <bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:legendList="legendList" :chartMsg="chartMsgTarget" :gridLeft="gridLeft" :chartId="'chartDayTarget'" :chartMsg="chartMsgTarget" :gridLeft="gridLeft" :chartId=" 'chartDayTarget'" :chartNum="chartNum" />
:chartNum="chartNum" />
</el-col> </el-col>
<!-- <el-col :span="6"> <!-- <el-col :span="6">
<div class="blueTip"> <div class="blueTip">
@ -121,9 +96,9 @@
</el-col> --> </el-col> -->
</el-row> </el-row>
<el-row v-else> <el-row v-else>
<!-- <div class="blueTip"> <div class="blueTip">
生产情况对比 生产情况对比
</div> --> </div>
<!-- <el-col :span="12"> --> <!-- <el-col :span="12"> -->
<bm-line-bar :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList" :chartMsg="chartMsg" <bm-line-bar :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList" :chartMsg="chartMsg"
:chartId="chartId" :chartNum="chartNum" /> :chartId="chartId" :chartNum="chartNum" />
@ -150,18 +125,18 @@ export default {
name: "ChipYieldBM", name: "ChipYieldBM",
data() { data() {
return { return {
otherProps: [], otherProps:[],
start: undefined, start: undefined,
currentMenu: '邯郸', currentMenu:'邯郸',
end: undefined, end: undefined,
title: '', title: '',
gridLeft: true, gridLeft:true,
showTable: false, showTable:false,
listQuery: { listQuery: {
pageNo: 1, pageNo: 1,
start: undefined, start: undefined,
end: undefined, end: undefined,
pageSize: 999, pageSize:999,
// size: 10, // size: 10,
// current: 1, // current: 1,
factory: null, factory: null,
@ -220,7 +195,7 @@ export default {
data: [ data: [
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
color: "#8EF0AB", color: "#8EF0AB",
@ -235,7 +210,7 @@ export default {
data: [ data: [
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -250,7 +225,7 @@ export default {
data: [ data: [
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [18, -16], position: [18, -16],
@ -260,27 +235,27 @@ export default {
}, },
}, },
}, },
{ {
name: "BIPV产量", name: "BIPV产量",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [20, -16], position: [20, -16],
color: "#7164FF", color: "#7164FF",
formatter: function (params) { formatter: function (params) {
return params.value return params.value
},
}, },
}, },
},
], ],
}, },
chartMsgTarget: { chartMsgTarget: {
color: ["#8EF0AB", 'rgba(104, 196, 131, .3)', "#288AFF", 'rgba(40, 138, 255, .2)', "#64BDFF", 'rgba(100,189,255,.3)', '#7164FF', 'rgba(113,100,255,.2)',], color: [ "#8EF0AB", 'rgba(104, 196, 131, .3)', "#288AFF", 'rgba(40, 138, 255, .2)', "#64BDFF", 'rgba(100,189,255,.3)', '#7164FF', 'rgba(113,100,255,.2)',],
xData: [], xData: [],
yName: "单位/片", yName: "单位/片",
yAxis: { yAxis:{
type: "value", type: "value",
name: "单位/片", name: "单位/片",
show: true, show: true,
@ -304,12 +279,12 @@ export default {
color: ["#8EF0AB", "#288AFF", "#64BDFF", '#7164FF'], color: ["#8EF0AB", "#288AFF", "#64BDFF", '#7164FF'],
xData: [], xData: [],
yName: "单位/片", yName: "单位/片",
yAxis: { yAxis:{
type: "value", type: "value",
name: "单位/片", name: "单位/片",
nameTextStyle: { nameTextStyle: {
fontSize: 12, fontSize: 12,
align: "right", align: "right",
}, },
// scale: true, // scale: true,
// min: function (value) {// // min: function (value) {//
@ -319,15 +294,15 @@ export default {
// max: function (value) {// // max: function (value) {//
// return Math.ceil(value.max) // return Math.ceil(value.max)
// }, // },
axisLabel: {}, axisLabel: {},
}, },
series: [ series: [
{ {
name: "FTO投入", name: "FTO投入",
data: [ data: [
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-18, -16], position: [-18, -16],
@ -342,7 +317,7 @@ export default {
data: [ data: [
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -357,7 +332,7 @@ export default {
data: [ data: [
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [5, -16], position: [5, -16],
@ -371,7 +346,7 @@ export default {
name: "BIPV产量", name: "BIPV产量",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [10, -16], position: [10, -16],
@ -397,7 +372,7 @@ export default {
computed: { computed: {
dataArr() { dataArr() {
if (this.currentMenu != '瑞昌') { if (this.currentMenu != '瑞昌') {
return [{ return [{
factory: null, factory: null,
item: 'FTO投入', item: 'FTO投入',
unit: '片' unit: '片'
@ -415,7 +390,7 @@ export default {
{ {
factory: null, factory: null,
item: 'BIPV产量', item: 'BIPV产量',
unit: '' unit: 'm2'
},] },]
} else { } else {
return [{ return [{
@ -514,29 +489,12 @@ 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 = this.getFirstDay() this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD')
this.listQuery.endDate = this.getLastDay() this.listQuery.endDate = moment(today).format('yyyy-MM-DD')
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
@ -673,14 +631,12 @@ 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 === '') { if (this.listQuery.type == null) {
this.$message.warning('请选择时间维度!') return this.$message('请选择时间维度')
return
} }
if (!this.listQuery.startDate && !this.listQuery.endDate) { if (!this.listQuery.startDate && !this.listQuery.endDate) {
this.$message.warning('请选择起止时间') return this.$message('请选择起止时间')
return
} }
let arr = [] let arr = []
this.currentMenu === '邯郸' ? arr.push(1) : arr.push(0) this.currentMenu === '邯郸' ? arr.push(1) : arr.push(0)
@ -691,7 +647,6 @@ 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
}) })
}) })
@ -727,16 +682,16 @@ export default {
res.data.list.forEach((ele, index) => { res.data.list.forEach((ele, index) => {
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.chartMsg.yAxis.max = Math.ceil(Math.max(...maxData)) this.chartMsg.yAxis.max = Math.ceil(Math.max(...maxData))
this.chartMsgTarget.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.chartMsg.yAxis.min = Math.ceil(Math.min(...maxData))
this.chartMsgTarget.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) {
if (res.data.list.length === 3) { if (res.data.list.length === 3) {
this.gridLeft = false this.gridLeft = false
@ -747,7 +702,7 @@ export default {
// 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
this.chartMsg.xData.push(ele.titleValue.slice(0, ele.titleValue.length - 3)) this.chartMsg.xData.push(ele.titleValue.slice(0, ele.titleValue.length-3))
ele.productionSituationDataVOList.forEach((item) => { ele.productionSituationDataVOList.forEach((item) => {
this.chartMsg.series[0].data.push({ this.chartMsg.series[0].data.push({
name: ele.titleValue, name: ele.titleValue,
@ -779,7 +734,7 @@ export default {
// { name: "%", value: 85 }, // { name: "%", value: 85 },
// ], // ],
// type: "bar", // type: "bar",
// barWidth: 16, // barWidth: 20,
// barGap: '0', // barGap: '0',
// label: { // label: {
// show: true, // show: true,
@ -802,11 +757,11 @@ export default {
// this.chartMsgTarget.xData.push(ele.titleValue) // this.chartMsgTarget.xData.push(ele.titleValue)
if (ele.titleValue.search('完成') == -1) { if (ele.titleValue.search('完成') == -1) {
ele.productionSituationDataVOList.forEach((item) => { ele.productionSituationDataVOList.forEach((item) => {
targetObj.ftoInput = item.ftoInput targetObj.ftoInput = item.ftoInput
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 {
ele.productionSituationDataVOList.forEach((item) => { ele.productionSituationDataVOList.forEach((item) => {
@ -824,13 +779,13 @@ export default {
name: "FTO投入完成值", name: "FTO投入完成值",
data: [ data: [
// s // s
{ name: 'FTO投入完成值', value: obj.ftoInput, titleValue: obj.ftoInput }, { name: 'FTO投入完成值', value: obj.ftoInput,titleValue: obj.ftoInput },
// { name: 'FTO', value: 33 }, // { name: 'FTO', value: 33 },
// { name: "%", value: 85 }, // { name: "%", value: 85 },
// { name: "%", value: 85 }, // { name: "%", value: 85 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
stack: 'f', stack: 'f',
label: { label: {
show: true, show: true,
@ -850,7 +805,7 @@ export default {
// { name: "%", value: 85 }, // { name: "%", value: 85 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
stack: 'f', stack: 'f',
label: { label: {
show: true, show: true,
@ -872,12 +827,12 @@ export default {
// { name: "%", value: 18.4 }, // { name: "%", value: 18.4 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
// barGap: '-100%', // barGap: '-100%',
label: { label: {
show: true, show: true,
color: "rgba(40,138,255)", color: "rgba(40,138,255)",
position: [-10, -16], position: [-18, -16],
formatter: function (params) { formatter: function (params) {
return params.value return params.value
}, },
@ -893,11 +848,11 @@ export default {
// { name: "%", value: 18.4 }, // { name: "%", value: 18.4 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
// barGap: '-100%', // barGap: '-100%',
label: { label: {
show: true, show: true,
position: [-10, -16], position: [-18, -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
@ -914,7 +869,7 @@ export default {
// { name: "%", value: 80.2 }, // { name: "%", value: 80.2 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
color: "rgba(100,189,255)", color: "rgba(100,189,255)",
show: true, show: true,
@ -934,7 +889,7 @@ export default {
// { name: "%", value: 80.2 }, // { name: "%", value: 80.2 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -955,7 +910,7 @@ export default {
// { name: "%", value: 80.2 }, // { name: "%", value: 80.2 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -975,7 +930,7 @@ export default {
// { name: "%", value: 80.2 }, // { name: "%", value: 80.2 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -1060,7 +1015,7 @@ export default {
// { name: "%", value: 85 }, // { name: "%", value: 85 },
// ], // ],
// type: "bar", // type: "bar",
// barWidth: 16, // barWidth: 20,
// barGap: '0', // barGap: '0',
// label: { // label: {
// show: true, // show: true,
@ -1082,13 +1037,13 @@ export default {
// 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) => {
if (ele.titleValue.search('完成') == -1) { if (ele.titleValue.search('完成') == -1) {
targetObj.ftoInput = item.ftoInput targetObj.ftoInput = item.ftoInput
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
obj.chipYield = item.chipYield obj.chipYield = item.chipYield
@ -1096,7 +1051,7 @@ export default {
obj.bipvProductOutput = this.currentMenu == '瑞昌' ? null : item.bipvProductOutput obj.bipvProductOutput = this.currentMenu == '瑞昌' ? null : item.bipvProductOutput
// if (ele.titleValue.search('') != -1) { // if (ele.titleValue.search('') != -1) {
// } else { // } else {
} }
}) })
}) })
fto.push({ fto.push({
@ -1109,7 +1064,7 @@ export default {
// { name: "%", value: 85 }, // { name: "%", value: 85 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
stack: 'f', stack: 'f',
label: { label: {
show: true, show: true,
@ -1129,7 +1084,7 @@ export default {
// { name: "%", value: 85 }, // { name: "%", value: 85 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
stack: 'f', stack: 'f',
label: { label: {
show: true, show: true,
@ -1151,7 +1106,7 @@ export default {
// { name: "%", value: 18.4 }, // { name: "%", value: 18.4 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
// barGap: '-100%', // barGap: '-100%',
label: { label: {
show: true, show: true,
@ -1172,7 +1127,7 @@ export default {
// { name: "%", value: 18.4 }, // { name: "%", value: 18.4 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
// barGap: '-100%', // barGap: '-100%',
label: { label: {
show: true, show: true,
@ -1193,7 +1148,7 @@ export default {
// { name: "%", value: 80.2 }, // { name: "%", value: 80.2 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
color: "rgba(100,189,255)", color: "rgba(100,189,255)",
show: true, show: true,
@ -1213,7 +1168,7 @@ export default {
// { name: "%", value: 80.2 }, // { name: "%", value: 80.2 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -1234,7 +1189,7 @@ export default {
// { name: "%", value: 80.2 }, // { name: "%", value: 80.2 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -1254,7 +1209,7 @@ export default {
// { name: "%", value: 80.2 }, // { name: "%", value: 80.2 },
], ],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -1271,31 +1226,31 @@ export default {
this.chartMsg.xData.push(ele.titleValue) this.chartMsg.xData.push(ele.titleValue)
}) })
for (let i in this.dataArr[0]) { for (let i in this.dataArr[0]) {
this.chartMsg.series[0].name = this.dataArr[0]['item'] this.chartMsg.series[0].name = this.dataArr[0]['item']
if (i.search('value') === 0) { if (i.search('value') === 0) {
this.chartMsg.series[0].data.push({ this.chartMsg.series[0].data.push({
name: this.dataArr[0]['item'], name: this.dataArr[0]['item'],
value: this.dataArr[0][i] === 0 ? null : this.dataArr[0][i] value: this.dataArr[0][i] === 0 ? null : this.dataArr[0][i]
}) })
}
} }
}
for (let i in this.dataArr[1]) { for (let i in this.dataArr[1]) {
this.chartMsg.series[1].name = this.dataArr[1]['item'] this.chartMsg.series[1].name = this.dataArr[1]['item']
if (i.search('value') === 0) { if (i.search('value') === 0) {
this.chartMsg.series[1].data.push({ this.chartMsg.series[1].data.push({
name: this.dataArr[1]['item'], name: this.dataArr[1]['item'],
value: this.dataArr[1][i] === 0 ? null : this.dataArr[1][i] value: this.dataArr[1][i] === 0 ? null : this.dataArr[1][i]
}) })
}
} }
}
for (let i in this.dataArr[2]) { for (let i in this.dataArr[2]) {
this.chartMsg.series[2].name = this.dataArr[2]['item'] this.chartMsg.series[2].name = this.dataArr[2]['item']
if (i.search('value') === 0) { if (i.search('value') === 0) {
this.chartMsg.series[2].data.push({ this.chartMsg.series[2].data.push({
name: this.dataArr[2]['item'], name: this.dataArr[2]['item'],
value: this.dataArr[2][i] === 0 ? null : this.dataArr[2][i] value: this.dataArr[2][i] === 0 ? null : this.dataArr[2][i]
}) })
} }
} }
if (this.dataArr[3]) { if (this.dataArr[3]) {
for (let i in this.dataArr[3]) { for (let i in this.dataArr[3]) {
@ -1307,7 +1262,7 @@ export default {
}) })
} }
} }
} }
} }
// console.log(this.dataArr) // console.log(this.dataArr)
// console.log(this.tableData); // console.log(this.tableData);
@ -1372,28 +1327,13 @@ export default {
border-radius: 8px; border-radius: 8px;
padding: 16px 16px 0 16px; padding: 16px 16px 0 16px;
margin: 8px 0px; margin: 8px 0px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -9px;
}
} }
.containerTop { .containerTop {
height: calc((100vh - 170px)); height: calc((100vh - 170px));
background-color: #fff; background-color: #fff;
border-radius: 8px; border-radius: 8px;
padding: 4px 16px 16px 16px; padding: 16px;
} }
.blueTip::before { .blueTip::before {
@ -1403,13 +1343,27 @@ export default {
height: 18px; height: 18px;
background: #0B58FF; background: #0B58FF;
border-radius: 1px; border-radius: 1px;
margin-right: 8px; margin-right: 8PX;
vertical-align:-3px; margin-top: 8px;
} }
.containerTop { .containerTop {
margin-top: 8px; margin-top: 8px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
} }
</style> </style>

View File

@ -5,7 +5,7 @@
</ButtonNav> </ButtonNav>
<!-- </div> --> <!-- </div> -->
<div class="search"> <div class="search">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="smallTitle"> <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="请选择" @change="handleChange"> <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">
@ -13,7 +13,7 @@
</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="daterange" range-separator="" <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator=""
start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime"
end-placeholder="结束日期"> end-placeholder="结束日期">
</el-date-picker> </el-date-picker>
@ -84,8 +84,8 @@
:chartMsg="chartMsgYearTarget" :chartId=" 'yearData'" :chartNum="chartNum" /> :chartMsg="chartMsgYearTarget" :chartId=" 'yearData'" :chartNum="chartNum" />
</el-col> --> </el-col> -->
</el-row> </el-row>
<base-table :key="showTable" :table-props="tableProps" :page="listQuery.current" :limit="listQuery.size" <base-table :key="showTable" :table-props="tableProps" :page="listQuery.current"
:table-data="tableData" :max-height="tableH" /> :limit="listQuery.size" :table-data="tableData" :max-height="tableH" />
</div> </div>
<!-- <div class="containerBottom"> <!-- <div class="containerBottom">
@ -96,7 +96,7 @@
<script> <script>
import { getProductionYieldSituationMWData, exportProductionYieldSituationMWData } from '@/api/report'; import { getProductionYieldSituationMWData, exportProductionYieldSituationMWData } from '@/api/report';
import bmSearchBar from "./components/bmSearchBar"; import bmSearchBar from "./components/bmSearchBar";
import BmLineBar from "./components/produceLineYieldBar.vue"; import BmLineBar from "./components/produceLineBar.vue";
import produceLineBarYearTarget from "./components/produceLineYieldBarTarget.vue"; import produceLineBarYearTarget from "./components/produceLineYieldBarTarget.vue";
import ButtonNav from '@/components/ButtonNav' import ButtonNav from '@/components/ButtonNav'
import moment from 'moment' import moment from 'moment'
@ -146,12 +146,13 @@ 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: 3, name: "芯片产量", type: 1, color: "#288AFF" },
{ id: 4, name: "标准组件产量", type: 1, color: "#64BDFF" },
{ {
id: 1, name: "综合良率", type: 2, color: "#FFCE6A" id: 1, name: "综合良率", type: 2, color: "#FFCE6A" },
}, {
id: 2, name: "FTO投入", type: 1, color: "#8EF0AB" },
{ id: 3, name: "芯片产量", type: 1, color: "#288AFF" },
{
id: 4, name: "标准组件产量", type: 1, color: "#64BDFF" },
], ],
legendListTarget: [ legendListTarget: [
{ {
@ -199,7 +200,7 @@ export default {
name: "单位/%", name: "单位/%",
nameTextStyle: { nameTextStyle: {
fontSize: 12, fontSize: 12,
align: "left", align: "right",
}, },
axisLabel: {}, axisLabel: {},
} }
@ -210,7 +211,7 @@ export default {
// yAxisIndex: 0, // yAxisIndex: 0,
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-18, -16], position: [-18, -16],
@ -225,7 +226,7 @@ export default {
// type: 'bar', // type: 'bar',
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-18, -16], position: [-18, -16],
@ -273,18 +274,18 @@ export default {
splitNumber: 4, splitNumber: 4,
nameTextStyle: { nameTextStyle: {
fontSize: 12, fontSize: 12,
align: "left", align: "right",
}, },
axisLabel: {}, axisLabel: {},
} }
], ],
series: [ series: [
{ {
name: "FTO投入", name: "",
// yAxisIndex: 0, // yAxisIndex: 0,
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
yAxisIndex: 0, yAxisIndex: 0,
label: { label: {
show: true, show: true,
@ -296,12 +297,12 @@ export default {
}, },
}, },
{ {
name: "芯片产量", name: "",
// yAxisIndex: 0, // yAxisIndex: 0,
data: [], data: [],
yAxisIndex: 0, yAxisIndex: 0,
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -312,12 +313,12 @@ export default {
}, },
}, },
{ {
name: "标准组件产量", name: "",
// yAxisIndex: 0, // yAxisIndex: 0,
data: [], data: [],
type: "bar", type: "bar",
yAxisIndex: 0, yAxisIndex: 0,
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -328,10 +329,10 @@ export default {
}, },
}, },
{ {
name: "综合良率", name: "",
data: [], data: [],
type: "line", type: "line",
// barWidth: 16, // barWidth: 20,
symbol: "circle", symbol: "circle",
symbolSize: 6, symbolSize: 6,
yAxisIndex: 1, yAxisIndex: 1,
@ -416,29 +417,12 @@ 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 = this.getFirstDay() this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD')
this.listQuery.endDate = this.getLastDay() this.listQuery.endDate = moment(today).format('yyyy-MM-DD')
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
@ -567,13 +551,11 @@ 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 === '') { if (this.listQuery.type == null) {
this.$message.warning('请选择时间维度!') return this.$message('请选择时间维度')
return
} }
if (!this.listQuery.startDate && !this.listQuery.endDate) { if (!this.listQuery.startDate && !this.listQuery.endDate) {
this.$message.warning('请选择起止时间') return this.$message('请选择起止时间')
return
} }
let arr = [] let arr = []
this.currentMenu === '邯郸' ? arr.push(1) : arr.push(0) this.currentMenu === '邯郸' ? arr.push(1) : arr.push(0)
@ -602,22 +584,12 @@ 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 ? parseFloat(val.toFixed(2)) : "-"),
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
@ -629,36 +601,24 @@ 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'
} }
@ -666,36 +626,24 @@ 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'
} }
@ -721,35 +669,42 @@ export default {
dataArr[3]['' + m + ''] = item.comprehensiveYieldRate dataArr[3]['' + m + ''] = item.comprehensiveYieldRate
}) })
}) })
// for (let i in chartDataArr[0]) { for (let i in dataArr[0]) {
// this.chartMsg.series[0].name = chartDataArr[0]['item'] this.chartMsg.series[0].name = dataArr[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: ele.titleValue, name: dataArr[0]['item'],
value: item.ftoInput === 0 ? null : item.ftoInput value: dataArr[0][i] === 0 ? null : dataArr[0][i]
}) })
}
}
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: ele.titleValue, name: dataArr[1]['item'],
value: item.chipYield === 0 ? null : item.chipYield value: dataArr[1][i] === 0 ? null : dataArr[1][i]
}) })
}
}
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: ele.titleValue, name: dataArr[2]['item'],
value: item.componentYield === 0 ? null : item.componentYield value: dataArr[2][i] === 0 ? null : dataArr[2][i]
}) })
}
}
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: ele.titleValue, name: dataArr[3]['item'],
value: item.comprehensiveYieldRate === 0 ? null : item.comprehensiveYieldRate value: dataArr[3][i] === 0 ? null : dataArr[3][i]
}) })
}) }
}) }
} else { } else {
res.data.list.forEach((ele, index) => { res.data.list.forEach((ele, index) => {
let i = index + 1 let i = index + 1
@ -845,45 +800,30 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.search { .search {
// height: calc((100px)); // height: calc((100px));
background-color: #fff; background-color: #fff;
border-radius: 8px; border-radius: 8px;
padding: 16px 16px 0 16px; padding: 16px 16px 0 16px;
margin:8px 0 8px 0px; margin:8px 0 8px 0px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -9px;
}
} }
.containerTop { .containerTop {
height: calc((100vh - 170px)); height: calc((100vh - 170px));
background-color: #fff; background-color: #fff;
border-radius: 8px; border-radius: 8px;
padding: 4px 16px 16px 16px; padding: 16px;
} }
.blueTip::before { .blueTip::before {
display: inline-block; display: inline-block;
width: 4px; content: '';
height: 16px; width: 4px;
background: #0b58ff; height: 18px;
content: ""; background: #0B58FF;
margin-right: 8px; border-radius: 1px;
vertical-align: -3px; margin-right: 8PX;
margin-top: 8px;
} }
.containerTop { .containerTop {

View File

@ -93,7 +93,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
// position: [-5, -16], // position: [-5, -16],
@ -107,7 +107,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -285,7 +285,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
// position: [-5, -16], // position: [-5, -16],
@ -299,7 +299,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],

View File

@ -93,7 +93,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
// position: [-5, -16], // position: [-5, -16],
@ -107,7 +107,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -272,7 +272,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
// position: [-5, -16], // position: [-5, -16],
@ -286,7 +286,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],

View File

@ -96,7 +96,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-18, -16], position: [-18, -16],
@ -110,7 +110,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],
@ -273,7 +273,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-18, -16], position: [-18, -16],
@ -287,7 +287,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [0, -16],

View File

@ -83,7 +83,7 @@ export default {
name: "1", name: "1",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
barGap: 0.5, barGap: 0.5,
label: { label: {
show: true, show: true,
@ -99,7 +99,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: "top", position: "top",
@ -114,7 +114,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: "top", position: "top",
@ -129,7 +129,7 @@ export default {
name: "4", name: "4",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: "top", position: "top",
@ -237,7 +237,7 @@ export default {
name: "1", name: "1",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
barGap: 0.5, barGap: 0.5,
label: { label: {
show: true, show: true,
@ -253,7 +253,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
barGap: "100%", barGap: "100%",
label: { label: {
show: true, show: true,
@ -269,7 +269,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: "top", position: "top",
@ -284,7 +284,7 @@ export default {
name: "4", name: "4",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: "top", position: "top",
@ -376,7 +376,7 @@ export default {
name: "1", name: "1",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
barGap: 0.5, barGap: 0.5,
label: { label: {
show: true, show: true,
@ -392,7 +392,7 @@ export default {
name: "2", name: "2",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: "top", position: "top",
@ -407,7 +407,7 @@ export default {
name: "3", name: "3",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: "top", position: "top",
@ -422,7 +422,7 @@ export default {
name: "4", name: "4",
data: [], data: [],
type: "bar", type: "bar",
barWidth: 16, barWidth: 20,
label: { label: {
show: true, show: true,
position: "top", position: "top",