92 Commits

Author SHA1 Message Date
‘937886381’
a618e081b5 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-08-01 14:30:05 +08:00
‘937886381’
9efddba586 修改ui 2024-08-01 14:29:31 +08:00
12b37c13c7 Merge pull request '修改bug' (#109) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #109
2024-07-26 19:23:38 +08:00
‘937886381’
eda007d713 修改bug 2024-07-26 17:03:09 +08:00
9e3c9fff6d Merge pull request 'projects/mescc/zhp' (#108) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #108
2024-07-26 11:17:35 +08:00
‘937886381’
4d8300d213 修改页码页数 2024-07-26 11:16:16 +08:00
‘937886381’
52dbb694a8 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-26 11:08:45 +08:00
‘937886381’
cd36d33be9 修改bug 2024-07-26 11:07:52 +08:00
52d968fdde Merge pull request 'projects/mescc/zhp' (#107) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #107
2024-07-26 10:52:36 +08:00
‘937886381’
b05d9067d3 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-26 10:48:44 +08:00
‘937886381’
7e9f89fdda 新增成本核算及即时库存 2024-07-26 10:47:36 +08:00
2d89137809 Merge pull request 'projects/mescc/zhp' (#106) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #106
2024-07-25 14:19:34 +08:00
‘937886381’
f5f472854b 解决冲突 2024-07-25 14:17:06 +08:00
‘937886381’
737949d3ec 修改ui 2024-07-25 14:13:35 +08:00
e802674196 Merge pull request 'projects/mescc/dy' (#105) from projects/mescc/dy into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #105
2024-07-24 14:52:55 +08:00
helloDy
8da6dc6232 Merge branch 'projects/mescc/develop' into projects/mescc/dy 2024-07-24 14:51:56 +08:00
helloDy
3e2661581e bug 2024-07-24 14:51:26 +08:00
ec5e47a416 Merge pull request 'projects/mescc/dy' (#104) from projects/mescc/dy into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #104
2024-07-24 13:07:28 +08:00
helloDy
99d60a14bd merge 2024-07-23 18:01:22 +08:00
helloDy
6409d2d348 bug 2024-07-23 17:59:11 +08:00
71f548cb3b Merge pull request 'projects/mescc/zhp' (#103) from projects/mescc/zhp into projects/mescc/develop
Some checks are pending
continuous-integration/drone/push Build is pending
Reviewed-on: #103
2024-07-22 08:36:42 +08:00
‘937886381’
8ecf281f08 修改ui 2024-07-19 16:46:51 +08:00
‘937886381’
fa75a2b89f Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-19 15:30:38 +08:00
‘937886381’
c469ca5ebe 修改ui 2024-07-19 15:30:05 +08:00
9b8c090f7e Merge pull request 'projects/mescc/zhp' (#102) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #102
2024-07-19 13:25:45 +08:00
‘937886381’
cbae9ef922 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-19 13:23:06 +08:00
‘937886381’
c7a6ad2e22 修改ui 2024-07-19 13:22:42 +08:00
e66ef52489 Merge pull request 'projects/mescc/zhp' (#101) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #101
2024-07-19 08:39:41 +08:00
‘937886381’
ebb7f597b9 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-19 08:38:37 +08:00
‘937886381’
7d6a0e228f 修改ui 2024-07-19 08:37:54 +08:00
3bec7e3333 Merge pull request 'projects/mescc/zhp' (#100) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #100
2024-07-17 09:47:25 +08:00
‘937886381’
5444ff92f7 解决冲突 2024-07-17 08:56:03 +08:00
‘937886381’
0713cb1650 修改bug 2024-07-17 08:53:32 +08:00
9da2e20b24 Merge pull request '生产数据echarts图重写' (#99) from projects/mescc/dy into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #99
2024-07-17 08:28:56 +08:00
helloDy
efa5a7c383 生产数据echarts图重写 2024-07-16 18:41:57 +08:00
6ba4c90767 Merge pull request 'projects/mescc/zhp' (#98) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #98
2024-07-12 09:32:46 +08:00
‘937886381’
b45818e2a4 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-12 09:21:20 +08:00
‘937886381’
00a5a8ed34 修改bug 2024-07-12 09:20:51 +08:00
f51d786fd3 Merge pull request 'projects/mescc/zhp' (#97) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #97
2024-07-12 09:12:23 +08:00
‘937886381’
01464663fa Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-12 09:10:20 +08:00
‘937886381’
db393bec12 修改bug 2024-07-12 09:09:49 +08:00
59df1c16f6 Merge pull request 'projects/mescc/zhp' (#96) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #96
2024-07-12 09:02:10 +08:00
‘937886381’
2f2d3defd0 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-12 09:00:25 +08:00
‘937886381’
0b847d2903 修改bug 2024-07-12 08:59:59 +08:00
5b0bb2ccdb Merge pull request 'projects/mescc/zhp' (#95) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #95
2024-07-12 08:54:16 +08:00
‘937886381’
4d4feee160 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-12 08:52:14 +08:00
‘937886381’
8d370118aa 修改bug 2024-07-12 08:51:45 +08:00
3a5c2eeb2a Merge pull request '修改bug' (#94) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #94
2024-07-12 08:35:13 +08:00
‘937886381’
72f146394b 修改bug 2024-07-12 08:33:10 +08:00
53b10a9847 Merge pull request 'projects/mescc/zhp' (#93) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #93
2024-07-11 15:15:28 +08:00
‘937886381’
82a7a2b8cd 修改bug 2024-07-11 15:01:49 +08:00
‘937886381’
3e327277e9 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-11 14:50:34 +08:00
‘937886381’
06ab8159c5 修改ui 2024-07-11 14:49:48 +08:00
cdf0525fca Merge pull request 'projects/mescc/zhp' (#92) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #92
2024-07-11 14:36:34 +08:00
‘937886381’
0547133e35 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-11 14:34:40 +08:00
‘937886381’
11387724de 修改ui 2024-07-11 14:34:19 +08:00
fe6fb41e29 Merge pull request 'projects/mescc/zhp' (#91) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #91
2024-07-11 08:28:10 +08:00
‘937886381’
074432851c Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-10 15:46:53 +08:00
‘937886381’
8af5158a1b 修改bug 2024-07-10 15:46:21 +08:00
46743fa4ef Merge pull request 'projects/mescc/zhp' (#90) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #90
2024-07-10 15:26:27 +08:00
‘937886381’
91c352ff79 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-10 15:17:44 +08:00
‘937886381’
41748b740d 修改ui 2024-07-10 15:17:16 +08:00
8d524a71a6 Merge pull request 'projects/mescc/zhp' (#89) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #89
2024-07-10 10:01:27 +08:00
‘937886381’
4fa58b62fc 修改bug 2024-07-10 09:59:53 +08:00
‘937886381’
2d67ca4347 修改ui 2024-07-09 17:01:11 +08:00
‘937886381’
91ac125671 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-09 11:11:01 +08:00
‘937886381’
9ea2f2dbe3 修改bug 2024-07-09 11:10:38 +08:00
30e04d641f Merge pull request 'projects/mescc/zhp' (#88) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #88
2024-07-09 10:21:47 +08:00
‘937886381’
6f2f751b0e Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-09 10:20:17 +08:00
‘937886381’
96f7798708 导出 2024-07-09 10:19:54 +08:00
1aa2310adf Merge pull request 'projects/mescc/zhp' (#87) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #87
2024-07-08 16:57:02 +08:00
‘937886381’
63f4fd7cb5 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-08 16:55:21 +08:00
‘937886381’
72855a6f04 工单导出 2024-07-08 16:54:58 +08:00
b3bd3eea22 Merge pull request 'projects/mescc/zhp' (#86) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #86
2024-07-08 13:26:37 +08:00
‘937886381’
2c53c249af Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-08 13:25:52 +08:00
‘937886381’
f2d57a8ebb 修改ui 2024-07-08 13:25:28 +08:00
00ed35ed82 Merge pull request 'projects/mescc/zhp' (#85) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #85
2024-07-05 16:36:30 +08:00
‘937886381’
689de3173f Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-05 16:33:39 +08:00
‘937886381’
865698a9be 修改ui 2024-07-05 16:33:14 +08:00
798ea2d90d Merge pull request 'projects/mescc/zhp' (#84) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #84
2024-07-05 14:08:40 +08:00
‘937886381’
44f3ab3e99 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-05 14:06:39 +08:00
‘937886381’
3e025020ab 修改bug 2024-07-05 14:06:15 +08:00
d62015bfbb Merge pull request 'projects/mescc/zhp' (#83) from projects/mescc/zhp into projects/mescc/develop
Some checks are pending
continuous-integration/drone/push Build is pending
Reviewed-on: #83
2024-07-04 16:41:23 +08:00
‘937886381’
a7e89fe7e8 Merge branch 'projects/mescc/develop' into projects/mescc/zhp 2024-07-04 09:39:31 +08:00
‘937886381’
6cb91b2c4a 修改bug 2024-07-04 09:39:08 +08:00
165722d67d Merge pull request 'projects/mescc/zhp' (#82) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #82
2024-07-03 16:59:09 +08:00
‘937886381’
486cffd64e 解决冲突 2024-07-03 16:30:14 +08:00
‘937886381’
81c4af0cc8 修改ui 2024-07-03 16:28:41 +08:00
db113cdba9 Merge pull request 'projects/mescc/dy' (#81) from projects/mescc/dy into projects/mescc/develop
Some checks are pending
continuous-integration/drone/push Build is pending
Reviewed-on: #81
2024-07-03 08:52:56 +08:00
helloDy
af52db4a37 Merge branch 'projects/mescc/develop' into projects/mescc/dy 2024-07-03 08:52:07 +08:00
helloDy
e0ca435014 ui 2024-07-03 08:51:32 +08:00
affe8ec026 Merge pull request 'projects/mescc/zhp' (#80) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #80
2024-07-02 13:42:35 +08:00
114 changed files with 5730 additions and 2613 deletions

View File

@@ -1,8 +1,8 @@
###
# @Author: zhp
# @Date: 2024-04-28 13:42:51
# @LastEditTime: 2024-06-24 16:57:53
# @LastEditors: DY
# @LastEditTime: 2024-07-26 10:50:10
# @LastEditors: zhp
# @Description:
###
# 开发环境配置
@@ -21,7 +21,7 @@ VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
# 郭
# VUE_APP_BASE_API = 'http://192.168.1.61:48080'
# sara
# VUE_APP_BASE_API = 'http://192.168.1.63:48080'
# VUE_APP_BASE_API = 'http://192.168.1.63:8080'
# 张一丁
# VUE_APP_BASE_API = 'http://192.168.4.139:48080'
# 蔡

View File

@@ -1,32 +1,24 @@
/*
* @Author: zhp
* @Date: 2024-04-26 14:53:45
* @LastEditTime: 2024-05-06 14:55:33
* @LastEditTime: 2024-07-26 09:32:26
* @LastEditors: zhp
* @Description:
*/
import request from '@/utils/request'
// 查询部门列表
export function getOrderList(data) {
export function getCostMainPage(data) {
return request({
url: 'ip/prod-order/prodOrderList',
method: 'post',
data: data
})
}
export function getCostPage(data) {
return request({
url: 'ip/cost/costPage',
url: 'ip/cost-main/page',
method: 'post',
data: data
})
}
export function getCostList(data) {
export function exportExcel(data) {
return request({
url: 'ip/cost/costList',
url: 'ip/cost-main/export-excel',
method: 'post',
data: data
data: data,
responseType: 'blob'
})
}

View File

@@ -1,15 +1,24 @@
/*
* @Author: zhp
* @Date: 2024-04-28 09:28:12
* @LastEditTime: 2024-04-28 15:52:36
* @LastEditTime: 2024-07-25 15:05:43
* @LastEditors: zhp
* @Description:
*/
import request from '@/utils/request'
export function getStockPage(data) {
export function getStockRealTimePage(data) {
return request({
url: 'ip/stock/page',
url: 'ip/stock-realtime/page',
method: 'post',
data: data
})
}
export function exportExcel(data) {
return request({
url: '/ip/stock-realtime/export-excel',
method: 'get',
data: data,
responseType: 'blob'
})
}

View File

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

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@@ -1,11 +1,13 @@
<template>
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
<span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">{{
item.meta.title
}}</span>
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
<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)')}"
v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">{{
item.meta.title
}}</span>
<a :style="{ color: (changeColor == true ? 'rgba(255, 255, 255, 0.45)' :' rgba(0, 0, 0, .45)')}" v-else
@click.prevent="handleLink(item)">{{ item.meta.title }}</a>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
@@ -18,7 +20,29 @@ export default {
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: {
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) {
// if you go to the redirect page, do not update the breadcrumbs
if (route.path.startsWith('/redirect/')) {
@@ -70,13 +94,20 @@ export default {
margin-left: 8px;
.no-redirect {
color: rgba(0, 0, 0, 0.65);
color: rgba(0, 0, 0, .45);
cursor: text;
}
}
.app-breadcrumb .el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
color: rgba(0, 0, 0, 0.45);
color:rgba(0, 0, 0, 0.65)
}
</style>
<!-- <style lang="scss">
.changeColor {
--theme-color: rgba(255, 255, 255, 0.45);
}
.el-breadcrumb__separator {
color:var(--theme-color);
}
</style> -->

View File

@@ -1,14 +1,16 @@
<!--
* @Author: zhp
* @Date: 2024-06-03 15:38:31
* @LastEditTime: 2024-07-22 16:15:21
* @LastEditors: zhp
* @Description:
-->
<template>
<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"
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 :class="{'is-active':isActive}" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
width="64" height="64" :fill="changeColor === true ? 'rgba(255, 255, 255,.65)' : '' ">
<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>
</div>
</template>
@@ -22,6 +24,15 @@ export default {
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: {
toggleClick() {
this.$emit('toggleClick')

View File

@@ -1,6 +1,7 @@
<template>
<div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
<div ref="navbar" class="navbar"
:style="changeColor ? 'background: rgba(0, 21, 41, 1);boxShadow:0px 1px 8px 0px rgba(0,131,255,0.35);' : ''">
<hamburger style="margin-left: 20px;" id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
@toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
@@ -41,6 +42,13 @@ export default {
'nickname',
'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: {
get() {
return this.$store.state.settings.showSettings
@@ -58,6 +66,23 @@ 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: {
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')

View File

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

View File

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

View File

@@ -1,5 +1,7 @@
<template>
<div id="tags-view-container" class="tags-view-container">
<div ref="tagsViewContainer"
:style="changeColor === true ? 'background:rgba(0, 21, 41, 1);borderTop:0px solid #d8dce5' : ''" id="tags-view-container"
class="tags-view-container">
<scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
<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"
@@ -36,6 +38,13 @@ 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
}
},
visitedViews() {
return this.$store.state.tagsView.visitedViews
},
@@ -44,9 +53,31 @@ export default {
},
theme() {
return this.$store.state.settings.theme;
}
},
},
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() {
this.addTags()
this.moveToCurrentTag()
@@ -60,6 +91,7 @@ export default {
}
},
mounted() {
console.log(this.$route, this.changeColor);
this.initTags()
this.addTags()
},
@@ -68,11 +100,23 @@ export default {
return route.path === this.$route.path
},
activeStyle(tag) {
if (!this.isActive(tag)) return {};
return {
"background-color": this.theme,
"border-color": this.theme
};
if (this.changeColor) {
if (!this.isActive(tag)) return {
"background-color": 'rgba(0, 59, 115, 1)',
"border-color": 'rgba(0, 59, 115, 1)',
"color": 'rgba(255, 255, 255, 1)'
};
return {
"background-color": this.theme,
"border-color": this.theme
};
} else {
if (!this.isActive(tag)) return {};
return {
"background-color": this.theme,
"border-color": this.theme
};
}
},
isAffix(tag) {
return tag.meta && tag.meta.affix
@@ -230,6 +274,14 @@ export default {
</script>
<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 {
height: 42px;
width: 100%;
@@ -245,8 +297,8 @@ export default {
cursor: pointer;
height: 28px;
line-height: 28px;
color: rgba(0, 0, 0, 0.45);
background: #F4F4F4FF;
color: var(--theme-color,rgba(0, 0, 0, 0.45));
background:var(--theme-background,#f4f4f4ff);
padding: 0 8px 0 12px;
font-size: 14px;
letter-spacing: 1px;
@@ -331,7 +383,7 @@ export default {
.el-icon-close {
&:hover {
background-color: #fff;
color: #409eff;
color: rgba(62, 142, 247, 1);
}
}
}

View File

@@ -2,7 +2,8 @@
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
<div :style="changeColor ? 'background: rgba(0, 21, 41, 1)' : ''" ref="mainContainer"
:class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
<div :class="{ 'fixed-header': fixedHeader }">
<navbar />
<tags-view v-if="needTagsView" />
@@ -39,6 +40,13 @@ export default {
needTagsView: state => state.settings.tagsView,
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() {
return {
hideSidebar: !this.sidebar.opened,
@@ -51,6 +59,16 @@ export default {
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: {
handleClickOutside() {
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })

View File

@@ -1,12 +1,12 @@
/*
* @Author: zhp
* @Date: 2024-04-12 11:13:06
* @LastEditTime: 2024-04-12 16:20:31
* @LastEditTime: 2024-07-26 09:31:09
* @LastEditors: zhp
* @Description:
*/
import Vue from 'vue'
import Element from 'element-ui'
import Element, { DatePicker } from 'element-ui'
// 修改如下样式文件,覆盖样式,或者新增样式文件
import "./assets/styles/element-variables.scss";
@@ -44,7 +44,7 @@ import {
} from "@/utils/dict";
import CodeBrickZj from 'code-brick-zj';
import "./theme/index.css"; // 自定义主题包 - code-brick-zj
// Vue.component(Select.name, Select)
// 全局方法挂载
Vue.prototype.getDicts = getDicts;
Vue.prototype.parseTime = parseTime;
@@ -68,7 +68,8 @@ Vue.component("RightToolbar", RightToolbar);
import DictTag from "@/components/DictTag";
// 头部标签插件
import VueMeta from "vue-meta";
// import locale from './views/cost/zh'; // 请根据实际路径修改
// Vue.use(ElementUI, { locale });
Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)

View File

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

View File

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

View File

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

View File

@@ -9,7 +9,7 @@
<chart-container class="bar-chart-base">
<div class="legend">
<span v-for="item in legend" :key="item.label" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
</div>
<div ref="chart" style="height:94%;width:100%"></div>
</chart-container>
@@ -62,7 +62,36 @@ export default {
top: "15%",
containLabel: true,
},
tooltip: {},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
var res = `<span style='color:rgba(255,255,255,0.85);display:inline-block;margin-bottom:8px;'>${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='border-radius:2px;display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
`<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0}</span>`;
}
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
},
},
xAxis: {
axisTick: {
show: false,
@@ -73,24 +102,24 @@ export default {
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
nameTextStyle: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
align: "right",
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -100,7 +129,7 @@ export default {
},
splitLine: {
lineStyle: {
color: "#4561AE",
color: "rgba(69,97,174,.4)",
},
},
},
@@ -108,7 +137,7 @@ export default {
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -143,7 +172,7 @@ export default {
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -188,19 +217,19 @@ export default {
this.canvasReset()
},
isFullscreen(val) {
this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12;
this.options.series.map((item) => {
item.barWidth = val ? 18 : 16;
});
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions);
this.options.xAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initChart(this.options);
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// this.initChart(this.actualOptions);
this.canvasReset()
},
@@ -209,14 +238,14 @@ export default {
this.initChart(this.options);
return;
}
const actualOptions = JSON.parse(JSON.stringify(this.options));
console.log('actualOptions', this.options)
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data || [];
actualOptions.series[1].name = val?.[1]?.name || "";
this.actualOptions = actualOptions;
this.initChart(actualOptions);
// const actualOptions = JSON.parse(JSON.stringify(this.options));
// console.log('actualOptions', this.options)
this.options.series[0].data = val[0].data;
this.options.series[0].name = val[0].name;
this.options.series[1].data = val?.[1]?.data || [];
this.options.series[1].name = val?.[1]?.name || "";
// this.actualOptions = actualOptions;
this.initChart(this.options);
},
},
mounted() {
@@ -225,7 +254,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen;
});
}
this.actualOptions = this.options
// this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
@@ -249,7 +278,7 @@ export default {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.chart);
this.chart.setOption(this.actualOptions);
this.chart.setOption(this.options);
},
},
};

View File

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

View File

@@ -73,6 +73,7 @@ export default {
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
@@ -122,7 +123,7 @@ export default {
gap: 8px;
.container-title {
font-size: 1.18vw;
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
@@ -142,8 +143,8 @@ export default {
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
width: 0.7vw;
height: 0.7vw;
}
.corner.tl {

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-05-07 16:54:54
* @LastEditTime: 2024-07-09 16:55:58
* @LastEditors: zhp
* @Description:
-->
@@ -61,8 +61,8 @@ export default {
.container-icon {
// width: 32px;
// height: 32px;
width: 1.701vw;
height: 1.701vw;
width: 1.4vw;
height: 1.4vw;
background: #ccc2;
}
</style>

View File

@@ -7,7 +7,7 @@
<template>
<div class="copilot-header">
<section class="menu">
<section class="menu left">
<CopilotButton v-for="i in ['产量', '效率']" :key="i" :label="i" :active="i === active"
@click="() => $emit('update:active', i)" />
<div class="type-name"></div>
@@ -15,7 +15,7 @@
@click="() => $emit('update:than', i)" />
</section>
<div class="page-title">{{ active }}驾驶舱</div>
<section class="menu" style="width: 24vw;float: right;">
<section class="menu right" style="width: 24vw;float: right;">
<CopilotButton v-for="i in ['日', '周', '月', '年']" :key="i" :label="i" :active="i === period"
@click="() => $emit('update:period', i)" />
<div class="btn-group">
@@ -132,7 +132,13 @@ export default {
justify-content: space-between;
}
.copilot-header > section {
.copilot-header > .left {
width: 26vw;
display: flex;
align-items: center;
gap: 8px;
}
.copilot-header >.right {
width: 26vw;
display: flex;
align-items: center;
@@ -184,7 +190,7 @@ export default {
/* top: 10px; */
}
.page-title {
width: 25vw;
width: 26vw;
font-size: 54px;
line-height: 70px;
letter-spacing: 5px;

View File

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

View File

@@ -0,0 +1,227 @@
<!--
* @Author: zhp
* @Date: 2024-07-09 15:07:50
* @LastEditTime: 2024-07-22 13:41:40
* @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-right: .13vw solid;
// border-image: linear-gradient(to bottom,transparent 10%,
// #024798 20%,
// transparent 90%) 1;
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
box-sizing: border-box;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.13vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(circle at center,
#1481fd 2%,
#024798 90%,
transparent);
z-index: 1;
}
&::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%, #4197f9 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 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

@@ -0,0 +1,220 @@
<!--
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: .13vw solid;
// border-image: linear-gradient(to bottom,transparent 10%,
// #024798 20%,
// transparent 90%) 1;
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
box-sizing: border-box;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.13vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(circle at center,
#1481fd 2%,
#024798 90%,
transparent);
z-index: 1;
}
&::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%, #4197f9 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
* @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-05-31 13:26:32
* @LastEditTime: 2024-07-31 08:52:25
* @LastEditors: zhp
* @Description:
-->
@@ -54,8 +54,8 @@ button {
background: #006acd40;
backdrop-filter: blur(3px);
text-align: center;
padding: 12px;
padding-left: 20px;
padding: 16px 24px 16px 24px;
padding-left: 32px;
color: #fff;
font-size: 18px;
letter-spacing: 10px;
@@ -75,8 +75,8 @@ button {
.copilot-btn::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
width: 0.7vw;
height: 0.7vw;
top: 0;
background: transparent;
border-style: solid;

View File

@@ -0,0 +1,220 @@
<!--
* @Author: zhp
* @Date: 2024-07-09 15:15:00
* @LastEditTime: 2024-07-22 13:42:08
* @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-right: .13vw solid;
// border-image: linear-gradient(to bottom,transparent 10%,
// #024798 20%,
// transparent 90%) 1;
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
box-sizing: border-box;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.13vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(circle at center,
#1481fd 2%,
#024798 90%,
transparent);
z-index: 1;
}
&::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%, #4197f9 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.7vw;
height: 0.7vw;
}
.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

@@ -0,0 +1,220 @@
<!--
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: .13vw solid;
// border-image: linear-gradient(to bottom,transparent 10%,
// #024798 20%,
// transparent 90%) 1;
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
box-sizing: border-box;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.13vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(circle at center,
#1481fd 2%,
#024798 90%,
transparent);
z-index: 1;
}
&::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%, #4197f9 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.7vw;
height: 0.7vw;
}
.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
* @Date: 2024-05-23 15:49:14
* @LastEditTime: 2024-06-04 08:54:10
* @LastEditTime: 2024-07-25 14:29:40
* @LastEditors: zhp
* @Description:
-->
@@ -10,7 +10,7 @@
<chart-container class="bar-chart-base">
<div class="legend">
<span v-for="item in legend" :key="item.label" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
</div>
<div ref="ftoChart" style="height:94%;width:100%"></div>
</chart-container>
@@ -63,7 +63,36 @@ export default {
top: "15%",
containLabel: true,
},
tooltip: {},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
var res = `<span style='color:rgba(255,255,255,0.85);display:inline-block;margin-bottom:8px;'>${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='border-radius:2px;display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
`<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0 }</span>`;
}
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
},
},
xAxis: {
axisTick: {
show: false,
@@ -74,24 +103,24 @@ export default {
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
nameTextStyle: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
align: "right",
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -101,7 +130,7 @@ export default {
},
splitLine: {
lineStyle: {
color: "#4561AE",
color: "rgba(69,97,174,.4)",
},
},
},
@@ -109,7 +138,7 @@ export default {
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -144,7 +173,7 @@ export default {
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -189,19 +218,19 @@ export default {
this.canvasReset()
},
isFullscreen(val) {
this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12;
this.options.series.map((item) => {
item.barWidth = val ? 18 : 16;
});
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions);
this.options.xAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initChart(this.options);
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// this.initChart(this.actualOptions);
this.canvasReset()
},
@@ -210,14 +239,14 @@ export default {
this.initChart(this.options);
return;
}
const actualOptions = JSON.parse(JSON.stringify(this.options));
console.log('actualOptions', this.options)
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val[1].data;
actualOptions.series[1].name = val[1].name;
this.actualOptions = actualOptions;
this.initChart(actualOptions);
// const actualOptions = JSON.parse(JSON.stringify(this.options));
// console.log('actualOptions', this.options)
this.options.series[0].data = val[0].data;
this.options.series[0].name = val[0].name;
this.options.series[1].data = val[1].data;
this.options.series[1].name = val[1].name;
// this.actualOptions = actualOptions;
this.initChart(this.options);
},
},
mounted() {
@@ -226,7 +255,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen;
});
}
this.actualOptions = this.options
// this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
@@ -250,7 +279,7 @@ export default {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.ftoChart);
this.chart.setOption(this.actualOptions);
this.chart.setOption(this.options);
},
},
};

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-05 09:43:51
* @LastEditTime: 2024-06-05 09:43:52
* @LastEditTime: 2024-07-22 13:36:30
* @LastEditors: zhp
* @Description:
-->
@@ -73,6 +73,7 @@ export default {
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
@@ -80,36 +81,38 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
z-index: 1;
}
border-right: .13vw solid;
// border-image: linear-gradient(to bottom,transparent 10%,
// #024798 20%,
// transparent 90%) 1;
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
box-sizing: border-box;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.13vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(circle at center,
#1481fd 2%,
#024798 90%,
transparent);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 60%;
width: 90%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
left: 7%;
bottom: 0;
background: linear-gradient(to right, #024798, transparent);
background: linear-gradient(to right, transparent 60%, #4197f9 98%, transparent 98%);
z-index: 0;
}
@@ -122,7 +125,7 @@ export default {
gap: 8px;
.container-title {
font-size: 1.18vw;
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
@@ -142,8 +145,8 @@ export default {
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
width: 0.7vw;
height: 0.7vw;
}
.corner.tl {

View File

@@ -73,6 +73,8 @@ export default {
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
@@ -80,21 +82,27 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-right: .13vw solid;
// padding-right: .2vw;
box-sizing: border-box; // border-image: linear-gradient(to bottom,transparent 10%,
// #024798 20%,
// transparent 90%) 1;
border-image: linear-gradient(to bottom,transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
width: 0.11415vw;
height: 92%;
width: 0.13vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
#1481fd 2%,
#024798 90%,
transparent
);
z-index: 1;
@@ -104,12 +112,12 @@ export default {
content: "";
position: absolute;
display: inline-block;
width: 60%;
width: 95%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
right: 1%;
bottom: 0;
background: linear-gradient(to right, #024798, transparent);
background: linear-gradient(to left, transparent 60%, #4197f9 98%, transparent 98%);
z-index: 0;
}
@@ -122,7 +130,7 @@ export default {
gap: 8px;
.container-title {
font-size: 1.18vw;
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
@@ -142,8 +150,8 @@ export default {
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
width: 0.7vw;
height: 0.7vw;
}
.corner.tl {

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-05 09:48:37
* @LastEditTime: 2024-06-05 09:53:49
* @LastEditTime: 2024-07-22 13:37:48
* @LastEditors: zhp
* @Description:
-->
@@ -99,6 +99,8 @@ export default {
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
@@ -106,36 +108,40 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
backdrop-filter: blur(4px);
border-right: .13vw solid;
// border-image: linear-gradient(to bottom,transparent 10%,
// #024798 20%,
// transparent 90%) 1;
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
box-sizing: border-box;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
z-index: 1;
}
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.13vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(circle at center,
#1481fd 2%,
#024798 90%,
transparent);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 60%;
width: 95%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
left: 6%;
bottom: 0;
background: linear-gradient(to right, #024798, transparent);
background: linear-gradient(to left, transparent 60%, #4197f9 98%, transparent 98%);
z-index: 0;
}
@@ -148,7 +154,7 @@ export default {
gap: 8px;
.container-title {
font-size: 1.18vw;
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
@@ -168,8 +174,8 @@ export default {
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
width: 0.7vw;
height: 0.7vw;
}
.corner.tl {

View File

@@ -63,49 +63,47 @@ export default {
const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
items = [
{ label: `${yesterday}日目标`, color: "#58adfa" },
{ label: `${year - 1}${yesterday}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
{ label: `${yesterday}日目标`, color: "#58adfa" },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${yesterday}日目标`, color: "#58adfa" },
{ label: `${dayBeYes}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
{ label: `${yesterday}日目标`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
{ label: `${year-1}年本周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
{ label: `本周目标`, color: "#58adfa" },
{ label: `${year - 1}年本周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '环比') {
items = [
{ label: `本周目标`, color: "#58adfa" },
{ label: `上周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
{ label: `本周目标`, color: "#58adfa" },
];
} else if (this.period === '月' && this.than === '同比') {
items = [
{ label: `${year-1}${month}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
{ label: `${year - 1}${month}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" },
// { label: `${month}月目标`, value: valueTuple[2] },
];
} else if (this.period === '月' && this.than === '环比') {
items = [
{ label: `${month}月目标`, color: "#58adfa" },
{ label: `${lastMonth}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
// { label: `${month}月目标`, value: valueTuple[2] },
];
} else {
items = [
{ label: `${year}年目标`, color: "#58adfa" },
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
{ label: `${year}年目标`, color: "#58adfa" },
// { label: `${year}年目标`, value: valueTuple[2] },
];
}
@@ -179,6 +177,11 @@ function getTemplate(period, dataList, than) {
const year = new Date().getFullYear();
if (period === '日' && than === '同比') {
items = [
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year - 1}${yesterday}`,
data: dataList ? dataList[0] : [],
@@ -188,14 +191,15 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '日' && than === '环比') {
items = [
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '日' && than === '环比') {
items = [
{
name: `${dayBeYes}`,
data: dataList ? dataList[0] : [],
@@ -205,14 +209,15 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '同比') {
items = [
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year-1}年本周`,
data: dataList ? dataList[0] : [],
@@ -222,14 +227,15 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '环比') {
items = [
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '环比') {
items = [
{
name: `上周`,
data: dataList ? dataList[0] : [],
@@ -239,14 +245,15 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && than === '同比') {
items = [
{
name: `${month}月目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year-1}${month}`,
data: dataList ? dataList[0] : [],
@@ -256,31 +263,33 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${month}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && than === '环比') {
items = [
{
name: `${lastMonth}`,
data: dataList ? dataList[0] : [],
},
{
name: `${month}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${month}目标`,
name: `${month}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${lastMonth}`,
data: dataList ? dataList[0] : [],
},
];
} else {
items = [
{
name: `${year}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year - 1}`,
data: dataList ? dataList[0] : [],
@@ -290,11 +299,7 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
}
return items

View File

@@ -63,49 +63,47 @@ export default {
const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
items = [
{ label: `${yesterday}日目标`, color: "#58adfa" },
{ label: `${year - 1}${yesterday}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
{ label: `${yesterday}日目标`, color: "#58adfa" },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${yesterday}日目标`, color: "#58adfa" },
{ label: `${dayBeYes}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
{ label: `${yesterday}日目标`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
{ label: `${year-1}年本周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
{ label: `本周目标`, color: "#58adfa" },
{ label: `${year - 1}年本周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '环比') {
items = [
{ label: `本周目标`, color: "#58adfa" },
{ label: `上周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
{ label: `本周目标`, color: "#58adfa" },
];
} else if (this.period === '月' && this.than === '同比') {
items = [
{ label: `${year-1}${month}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
{ label: `${year - 1}${month}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" },
// { label: `${month}月目标`, value: valueTuple[2] },
];
} else if (this.period === '月' && this.than === '环比') {
items = [
{ label: `${month}月目标`, color: "#58adfa" },
{ label: `${lastMonth}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
// { label: `${month}月目标`, value: valueTuple[2] },
];
} else {
items = [
{ label: `${year}年目标`, color: "#58adfa" },
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
{ label: `${year}年目标`, color: "#58adfa" },
// { label: `${year}年目标`, value: valueTuple[2] },
];
}
@@ -170,23 +168,29 @@ function getTemplate(period, dataList,than) {
const year = new Date().getFullYear();
if (period === '日' && than === '同比') {
items = [
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2].splice(0,2) : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year - 1}${yesterday}`,
data: dataList ? dataList[0] : [],
data: dataList ? dataList[0].splice(0, 2) : [],
},
{
name: `${yesterday}`,
data: dataList ? dataList[1] : [],
data: dataList ? dataList[1].splice(0, 2) : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '日' && than === '环比') {
items = [
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '日' && than === '环比') {
items = [
{
name: `${dayBeYes}`,
data: dataList ? dataList[0] : [],
@@ -196,16 +200,17 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '同比') {
items = [
{
name: `${year-1}年本周`,
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year - 1}年本周`,
data: dataList ? dataList[0] : [],
},
{
@@ -213,14 +218,15 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '环比') {
items = [
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '环比') {
items = [
{
name: `上周`,
data: dataList ? dataList[0] : [],
@@ -230,16 +236,17 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && than === '同比') {
items = [
{
name: `${year-1}${month}`,
name: `${month}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year - 1}${month}`,
data: dataList ? dataList[0] : [],
},
{
@@ -247,31 +254,34 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${month}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && than === '环比') {
items = [
{
name: `${lastMonth}`,
data: dataList ? dataList[0] : [],
name: `${month}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${month}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${month}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
name: `${lastMonth}`,
data: dataList ? dataList[0] : [],
},
];
} else {
items = [
{
name: `${year}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year - 1}`,
data: dataList ? dataList[0] : [],
@@ -281,11 +291,7 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
}
return items

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 13:22:43
* @LastEditTime: 2024-06-17 09:22:17
* @LastEditTime: 2024-07-25 14:29:04
* @LastEditors: zhp
* @Description:
-->
@@ -9,7 +9,7 @@
<chart-container class="bar-chart-base">
<div class="legend">
<span v-for="(item,index) in legend" :key="index" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
</div>
<div ref="oeeChart" style="height:94%;width:100%"></div>
</chart-container>
@@ -56,13 +56,48 @@ export default {
actualOptions: null,
options: {
grid: {
left: "5%",
left: "6%",
right: "0%",
bottom: "3%",
top: "15%",
containLabel: true,
},
tooltip: {},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85);margin-bottom:8px'>${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"
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:39%;left:3.05%;'></span>
<span style='display:inline-block;width: 8px;height: 8px;border-radius: 100%;background-color: #f3c000;position: absolute;top:36%;left:4.8%;'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>`
}` +
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value.toFixed(2) + '%' : "0.00" + '%'}</span>`;
}
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
},
},
xAxis: {
axisTick: {
show: false,
@@ -73,23 +108,24 @@ export default {
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
data: this.xAxis,
},
yAxis: {
name: "单位/%",
nameTextStyle: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
align: "right",
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -99,78 +135,11 @@ export default {
},
splitLine: {
lineStyle: {
color: "#4561AE",
color: "rgba(69,97,174,.4)",
},
},
},
series: [
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#12f7f1", // 0% 处的颜色
},
{
offset: 0.35,
color: "#12f7f177", // 100% 处的颜色
},
{
offset: 0.75,
color: "#12f7f133", // 100% 处的颜色
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[0].data,
},
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#57abf8", // 0% 处的颜色
},
{
offset: 1,
color: "#364BFE66", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[1].data,
},
{
name: "", // "2024年目标值",
type: "line",
@@ -206,6 +175,73 @@ export default {
// },
data: [], // this.series[0].data,
},
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#12f7f1", // 0% 处的颜色
},
{
offset: 0.35,
color: "#12f7f177", // 100% 处的颜色
},
{
offset: 0.75,
color: "#12f7f133", // 100% 处的颜色
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[0].data,
},
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#57abf8", // 0% 处的颜色
},
{
offset: 1,
color: "#364BFE66", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[1].data,
}
],
},
};
@@ -222,11 +258,11 @@ export default {
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// if (val === false && this.isOpen === true) {
// console.log(val)
// this.width = 97 + '%'
@@ -236,12 +272,12 @@ export default {
// this.canvasReset()
// }
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions)
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initChart(this.options)
this.canvasReset()
},
series(val) {
@@ -252,14 +288,14 @@ export default {
// console.log('val', val)
const actualOptions = JSON.parse(JSON.stringify(this.options))
console.log(actualOptions)
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data;
actualOptions.series[1].name = val?.[1]?.name;
actualOptions.series[2].data = val?.[2]?.data || [];
actualOptions.series[2].name = val?.[2]?.name || "";
this.options.series[0].data = val[0].data;
this.options.series[0].name = val[0].name;
this.options.series[1].data = val?.[1]?.data;
this.options.series[1].name = val?.[1]?.name;
this.options.series[2].data = val?.[2]?.data || [];
this.options.series[2].name = val?.[2]?.name || "";
this.actualOptions = actualOptions;
this.initChart(actualOptions);
this.initChart(this.options);
},
},
mounted() {
@@ -273,7 +309,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen;
});
}
this.actualOptions = this.options
// this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
@@ -296,7 +332,7 @@ export default {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.oeeChart);
this.chart.setOption(this.actualOptions);
this.chart.setOption(this.options);
},
},
};
@@ -328,42 +364,42 @@ export default {
margin-right: 0.22vw;
}
}
.legend-item:nth-child(3) {
.legend-item:nth-child(1) {
margin-left: 1vw;
}
.legend-item:nth-child(3):before {
// width: 12px;
// height: 2px;
width: 1vw;
height: 0.1064vw;
background-color: #f3c000;
position: absolute;
top: 50%;
// left: -16px;
left: -0.951vw;
transform: translateY(-50%);
}
.legend-item:nth-child(1):before {
// width: 12px;
// height: 2px;
width: 1vw;
height: 0.1064vw;
background-color: #f3c000;
position: absolute;
top: 50%;
// left: -16px;
left: -1.2vw;
transform: translateY(-50%);
}
.legend-item:nth-child(3):after {
background-color: #f3c000;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -0.851vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
.legend-item:nth-child(1):before {
.legend-item:nth-child(1):after {
background-color: #f3c000;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.4vw;
height: 0.4vw;
border-radius: 100%;
top: 50%;
left: -1.1vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
.legend-item:nth-child(2):before {
background-color: #12f7f1;
}
.legend-item:nth-child(2):before {
.legend-item:nth-child(3):before {
background-color: #58adfa;
}
}

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-23 15:50:44
* @LastEditTime: 2024-06-17 09:23:39
* @LastEditTime: 2024-07-25 14:29:09
* @LastEditors: zhp
* @Description:
-->
@@ -9,7 +9,7 @@
<chart-container class="bar-chart-base">
<div class="legend">
<span v-for="(item,index) in legend" :key="index" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
</div>
<div ref="oeeChart" style="height:94%;width:100%"></div>
</chart-container>
@@ -56,13 +56,48 @@ export default {
actualOptions: null,
options: {
grid: {
left: "5%",
left: "6%",
right: "0%",
bottom: "3%",
top: "15%",
containLabel: true,
},
tooltip: {},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85);margin-bottom:8px'>${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"
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:39%;left:3.05%;'></span>
<span style='display:inline-block;width: 8px;height: 8px;border-radius: 100%;background-color: #f3c000;position: absolute;top:36%;left:4.8%;'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>`
}` +
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value.toFixed(2) + '%' : "0.00" + '%'}</span>`;
}
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
},
},
xAxis: {
axisTick: {
show: false,
@@ -73,23 +108,24 @@ export default {
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
data: this.xAxis,
},
yAxis: {
name: "单位/%",
nameTextStyle: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
align: "right",
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -99,78 +135,11 @@ export default {
},
splitLine: {
lineStyle: {
color: "#4561AE",
color: "rgba(69,97,174,.4)",
},
},
},
series: [
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#12f7f1", // 0% 处的颜色
},
{
offset: 0.35,
color: "#12f7f177", // 100% 处的颜色
},
{
offset: 0.75,
color: "#12f7f133", // 100% 处的颜色
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[0].data,
},
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#57abf8", // 0% 处的颜色
},
{
offset: 1,
color: "#364BFE66", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[1].data,
},
{
name: "", // "2024年目标值",
type: "line",
@@ -206,6 +175,74 @@ export default {
// },
data: [], // this.series[0].data,
},
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#12f7f1", // 0% 处的颜色
},
{
offset: 0.35,
color: "#12f7f177", // 100% 处的颜色
},
{
offset: 0.75,
color: "#12f7f133", // 100% 处的颜色
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[0].data,
},
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#57abf8", // 0% 处的颜色
},
{
offset: 1,
color: "#364BFE66", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[1].data,
},
],
},
};
@@ -222,11 +259,11 @@ export default {
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// if (val === false && this.isOpen === true) {
// console.log(val)
// this.width = 97 + '%'
@@ -236,12 +273,12 @@ export default {
// this.canvasReset()
// }
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions)
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initChart(this.options)
this.canvasReset()
},
series(val) {
@@ -250,15 +287,15 @@ export default {
return;
}
console.log(val)
const actualOptions = JSON.parse(JSON.stringify(this.options))
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data || [];
actualOptions.series[1].name = val?.[1]?.name || "";
actualOptions.series[2].data = val?.[2]?.data || [];
actualOptions.series[2].name = val?.[2]?.name || "";
this.actualOptions = actualOptions;
this.initChart(actualOptions);
// const actualOptions = JSON.parse(JSON.stringify(this.options))
this.options.series[0].data = val[0].data;
this.options.series[0].name = val[0].name;
this.options.series[1].data = val?.[1]?.data || [];
this.options.series[1].name = val?.[1]?.name || "";
this.options.series[2].data = val?.[2]?.data || [];
this.options.series[2].name = val?.[2]?.name || "";
// this.actualOptions = actualOptions;
this.initChart(this.options);
},
},
mounted() {
@@ -272,7 +309,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen;
});
}
this.actualOptions = this.options
// this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
@@ -295,7 +332,7 @@ export default {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.oeeChart);
this.chart.setOption(this.actualOptions);
this.chart.setOption(this.options);
},
},
};
@@ -327,17 +364,17 @@ export default {
margin-right: 0.22vw;
}
}
.legend-item:nth-child(3) {
.legend-item:nth-child(1) {
margin-left: 1vw;
}
.legend-item:nth-child(1):before {
.legend-item:nth-child(2):before {
background-color: #12f7f1;
}
.legend-item:nth-child(2):before {
.legend-item:nth-child(3):before {
background-color: #58adfa;
}
.legend-item:nth-child(3):before {
.legend-item:nth-child(1):before {
// width: 12px;
// height: 2px;
width: 1vw;
@@ -346,22 +383,22 @@ export default {
position: absolute;
top: 50%;
// left: -16px;
left: -0.951vw;
left: -1.2vw;
transform: translateY(-50%);
}
.legend-item:nth-child(3):after {
.legend-item:nth-child(1):after {
background-color: #f3c000;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
width: 0.4vw;
height: 0.4vw;
border-radius: 100%;
top: 50%;
left: -0.851vw;
left: -1.1vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}

View File

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

View File

@@ -52,7 +52,7 @@ export default {
? 0
: this.current != 0 && this.target != 0
? `${((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 ? this.current + '%' : 0 + '%'
: 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 + '%'
// } else if(this.previous != 0) {
// return this.previous + '%'
// }
@@ -73,7 +73,7 @@ export default {
&:before {
content: attr(data-title);
display: inline-block;
color: #fff;
color:rgba(223,241,254,.8);
position: absolute;
bottom: -200%;
font-size: 12px;
@@ -82,7 +82,7 @@ export default {
&:after {
content: attr(data-rate);
display: inline-block;
color: #fff;
color: rgba(223, 241, 254, .8);
position: absolute;
bottom: -200%;
right: 0;

View File

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

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-27 09:12:54
* @LastEditTime: 2024-06-27 09:14:21
* @LastEditTime: 2024-07-22 17:03:48
* @LastEditors: zhp
* @Description:
-->
@@ -49,7 +49,7 @@ export default {
dataRate() {
// if (this.current != 0 && this.target != 0) {
// console.log( '1111111111', this.current, this.target,this.previous);
return this.previous >=100 ? 100 + '%' : this.previous + '%';
return this.previous >= 100 ? 100 + '%' : parseFloat(this.previous).toFixed(2) + '%';
// } else if(this.previous != 0) {
// return this.previous + '%'
// }
@@ -60,6 +60,8 @@ export default {
</script>
<style scoped lang="scss">
.progress-bar {
height: 10px;
background-color: #002f6b;
@@ -70,7 +72,7 @@ export default {
&:before {
content: attr(data-title);
display: inline-block;
color: #fff;
color: rgba(223, 241, 254, .8);
position: absolute;
bottom: -200%;
font-size: 12px;
@@ -79,7 +81,7 @@ export default {
&:after {
content: attr(data-rate);
display: inline-block;
color: #fff;
color: rgba(223, 241, 254, .8);
position: absolute;
bottom: -200%;
right: 0;

View File

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

View File

@@ -1,6 +1,8 @@
export default ({
export default ({
titleValue,
subtitle,
titleSize,
subtitleSize,
previousSum,
currentSum,
targetSum,
@@ -15,22 +17,28 @@ export default ({
top: 0,
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: {
text: titleValue,
left: "48%",
top: "37%",
top: "middle",
textAlign: "center",
textVerticalAlign:'auto',
textStyle: {
fontWeight: 600,
fontSize: 36,
color: "#fffd",
fontWeight: 400,
fontSize: titleSize,
color: "rgba(223,241,254,1)",
},
subtext: `\u2002${yesterday + '日良率'}\u2002`,
subtextStyle: {
fontSize: 16,
fontSize: subtitleSize,
fontWeight: 100,
color: "#fffd",
color: "rgba(255,255,255,.7)",
align: "right",
},
},
@@ -39,8 +47,8 @@ export default ({
{
type: "pie",
name: "当前良率",
radius: ["70%", "85%"],
center: ["50%", "52%"],
radius: ["80%", "92%"],
center: ["50%", "50%"],
emptyCircleStyle: {
color: "#003982",
},
@@ -48,8 +56,8 @@ export default ({
// 数据 series
{
type: "pie",
radius: ["70%", "85%"],
center: ["50%", "52%"],
radius: ["80%", "92%"],
center: ["50%", "50%"],
avoidLabelOvervlap: false,
label: {
show: false,
@@ -62,7 +70,15 @@ export default ({
value: currentSum,
name: currentName,
tooltip: {
formatter: `${currentName} : ${currentSum}`
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
</div>
`
},
selected: false,
itemStyle: {
@@ -87,7 +103,15 @@ export default ({
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
name: currentName,
tooltip: {
formatter: `${currentName} : ${currentSum}`
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
</div>
`
},
itemStyle: { color: "transparent" },
label: { show: false },
@@ -97,8 +121,8 @@ export default ({
// 数据 series2 - 2023累计
{
type: "pie",
radius: ["55%", "70%"],
center: ["50%", "52%"],
radius: ["70%", "80%"],
center: ["50%", "50%"],
avoidLabelOvervlap: false,
label: {
show: false,
@@ -111,7 +135,15 @@ export default ({
value: previousSum,
name: preName,
tooltip: {
formatter: `${preName} : ${previousSum}`
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
</div>
`
},
selected: false,
itemStyle: {
@@ -136,7 +168,15 @@ export default ({
value:previousSum === 0 ? 1 : 0,
name: preName,
tooltip: {
formatter: `${preName} : ${previousSum}`
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
</div>
`
},
itemStyle: { color: "transparent" },
label: { show: false },

View File

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

View File

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

View File

@@ -6,7 +6,7 @@
:style="{ fontSize: isFullscreen ? '0.85vw' : '0.73vw' }">{{ item.label }}</span>
</div> -->
<div id="factoryEnergyChart" style="width: 100%; height: 100%"></div>
<div v-if="energyCockpits.length != 0" id="factoryEnergyChart" style="width: 100%; height: 100%"></div>
</div>
</chart-container>
</template>
@@ -55,8 +55,8 @@ export default {
options: {
color: ["#FFD160", "#2760FF", "#12FFF5"],
grid: {
left: "6%",
right: "3%",
left: "9%",
right: "0%",
bottom: "15%",
top: "15%",
},
@@ -68,21 +68,26 @@ export default {
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',
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
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 + '片'}</span>`;
`<span style='border-radius:2px;display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${params[0].axisValueLabel}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value : 0}</span>`;
}
return res;
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
// return res;
},
},
xAxis: {
@@ -97,8 +102,8 @@ export default {
axisLabel: {
interval: 0,//设置横坐标为斜
rotate:45,
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
// formatter: function (value) {
// console.log(value);
@@ -117,17 +122,18 @@ export default {
yAxis: {
type: "value",
name: "单位/片",
position: 'left',
nameTextStyle: {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
align: "right",
},
axisTick: {
show: false,
},
axisLabel: {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 10,
color: "rgba(223,241,254,.8)",
fontSize:16,
},
axisLine: {
show: true,
@@ -137,7 +143,7 @@ export default {
},
splitLine: {
lineStyle: {
color: "#4561AE",
color: "rgba(69,97,174,.4)",
},
},
},
@@ -195,7 +201,7 @@ export default {
// { offset: 1, color: "#12FFF5" + "00" },
// ]),
// },
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -239,11 +245,11 @@ export default {
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
// isFullscreen(val) {
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// this.initOptions(this.actualOptions);
// },
// series(val) {

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-30 08:58:39
* @LastEditTime: 2024-07-02 10:53:34
* @LastEditTime: 2024-07-26 16:48:15
* @LastEditors: zhp
* @Description:
-->
@@ -9,7 +9,7 @@
<chart-container class="bar-chart-base">
<div class="legend">
<span v-for="(item,index) in legend" :key="index" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
</div>
<div ref="oeeChart" style="height:100%"></div>
</chart-container>
@@ -56,11 +56,11 @@ export default {
actualOptions: null,
options: {
grid: {
left: "5%",
right: "0%",
bottom: "3%",
top: "15%",
containLabel: true,
left: "10%",
right: "3%",
bottom: "14%",
top: "20%",
// containLabel: true,
},
// tooltip: {
// trigger: "axis",
@@ -97,23 +97,28 @@ export default {
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 + '片'}</span>`;
}
return res;
},
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
var res = `<span style='display:inline-block;color:rgba(255,255,255,0.85);margin-bottom:8px;font-size:16px;letter-spacing: 2px;'>${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='border-radius:2px;display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
`<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align:right'>${params[i].value ? params[i].value : 0}</span>`;
}
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
// return res;
},
},
xAxis: {
axisTick: {
@@ -125,24 +130,25 @@ export default {
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
position: 'left',
nameTextStyle: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
align: "right",
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -152,7 +158,7 @@ export default {
},
splitLine: {
lineStyle: {
color: "#4561AE",
color: "rgba(69,97,174,.4)",
},
},
},
@@ -160,7 +166,7 @@ export default {
{
name: "FTO", // this.series[0].name,
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -195,7 +201,7 @@ export default {
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -227,7 +233,7 @@ export default {
{
name: "", // "2024年目标值",
type: "line",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color:'#f3c000'
@@ -254,11 +260,11 @@ export default {
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
this.options.series.map((item) => {
item.barWidth = val ? 18 : 12;
item.barWidth = val ? 18 : 16;
});
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.options.xAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// if (val === false && this.isOpen === true) {
// console.log(val)
// this.width = 97 + '%'
@@ -268,11 +274,11 @@ export default {
// this.canvasReset()
// }
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initChart(this.options)
this.canvasReset()
},
@@ -337,20 +343,21 @@ export default {
</script>
<style scoped lang="scss">
.bar-chart-base {
// position: relative;
.legend {
position: absolute;
top: 3vh;
top: 6vh;
right: 13vw;
}
.legend-item {
position: relative;
// font-size: 12px;
font-size: 1.2vw;
margin-right:1.2vw;
color: #DFF1FE;
&::before {
content: "";
display: inline-block;

View File

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

View File

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

View File

@@ -1,7 +1,8 @@
<template>
<div class="order-container">
<div class="table">
<dv-scroll-board v-if="showTable" :config="config" style="width: 100%; height: 100%; color: rgba(255, 255, 255, .6);" ref="orderScrollBoard" />
<dv-scroll-board v-if="showTable" :config="config"
style="width: 100%; height: 100%; color: rgba(255, 255, 255,1);font-size:16," ref="orderScrollBoard" />
</div>
<div class="chart">
<div class="chart-title">
@@ -12,8 +13,8 @@
<CopilotButton v-for="i in ['目标产量', '计划投入', '实际投入', '实际产出', '废品数量', '待再加工']" :key="i" :label="i"
:active="i === type" @click="() => $emit('update:type', i)" />
</div>
<barChartBase :type="type" :energyCockpits="prodOrder" ref="barChart"
style="height: 0;flex:1"></barChartBase>
<barChartBase :type="type" :energyCockpits="prodOrder" ref="barChart" style="height: 0;flex:1">
</barChartBase>
</div>
</div>
@@ -40,6 +41,7 @@ export default {
evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
data: [],
rowNum: 12,
fontSize:16,
waitTime: 3000,
columnWidth: [150],
align: ["left"],
@@ -99,33 +101,33 @@ export default {
let arr = [];
// arr.push(i + 1);
arr.push(
`<span title=${this.prodOrder[i].workOrderNumber || ""}>${
`<span title=${this.prodOrder[i].workOrderNumber || ""} style='color: rgba(223,241,254,.8);font-size:16px' >${
this.prodOrder[i].workOrderNumber || ""
}</span>`,
`<span title=${this.prodOrder[i].orderStatus || ""}>${this.prodOrder[i].orderStatus === 1 ? '未开始' : this.prodOrder[i].orderStatus === 2 ? '进行中' : '已完成' || ""
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].orderStatus || ""}>${this.prodOrder[i].orderStatus === 1 ? '未开始' : this.prodOrder[i].orderStatus === 2 ? '进行中' : '已完成' || ""
}</span>`,
`<span title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || ""
`<span style='color: rgba(223,241,254,.8);font-size:1.2em' title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || ""
}</span>`,
`<span title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || ""
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || ""
}</span>`,
`<span title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || ""
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || ""
}</span>`,
`<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
}</span>`,
`<span style="display:inline-block;width:45px;">${this.prodOrder[i].productionProgress
? this.prodOrder[i].productionProgress.toFixed(0) + "%"
`<span style="display:inline-block;width:45px;color: rgba(223,241,254,.8)">${this.prodOrder[i].productionProgress
? parseFloat((this.prodOrder[i].productionProgress * 100).toFixed(2)) + "%"
: "0%"
}</span>
<div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
<svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
<div style="display:inline-block;height:20px;vertical-align:top;margin-top:3px;">
<svg xmlns="http://www.w3.org/200/svg" height="18" width="18">
<circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
<circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${this.prodOrder[i].productionProgress
? this.prodOrder[i].productionProgress.toFixed(0) *
? this.prodOrder[i].productionProgress.toFixed(2) *100 *
37.68 *
0.01 +
"," +
(1 -
this.prodOrder[i].productionProgress.toFixed(0) * 0.01) *
this.prodOrder[i].productionProgress.toFixed(2) * 0.01) * 100 *
37.68
: 0 + "," + 37.68
}"/>
@@ -155,7 +157,6 @@ export default {
flex: 1;
display: flex;
flex-direction: column;
// gap: 6px;
.chart-title {
margin-top: 5px;
@@ -188,8 +189,9 @@ export default {
height: 1px; // display: inline-block;
border: 1px solid;
// display: inline-block;
border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 0%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%, ) 2 2;
backdrop-filter: blur(3px);
// border-image: linear-gradient(to right, transparent 5%, rgba(95, 190, 249, 1) 20%, transparent 90%, )1;
border-image: linear-gradient(to right, transparent 10%, rgba(95, 190, 249, 1 )30%, transparent 90%,)1;
// backdrop-filter: blur(3px);
}
}
}

View File

@@ -28,8 +28,8 @@
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0
}}</span>
msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0
}}</span>
</div>
</div>
</div>
@@ -38,8 +38,8 @@
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0
}}</span>
msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
@@ -61,8 +61,8 @@
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0
}}</span>
msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0
}}</span>
</div>
</div>
</div>
@@ -71,8 +71,8 @@
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0
}}</span>
msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
@@ -94,8 +94,8 @@
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0
}}</span>
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0
}}</span>
</div>
</div>
</div>
@@ -104,8 +104,8 @@
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0
}}</span>
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
@@ -118,14 +118,14 @@
<div class="chart">
<div class="chart-title">
<span class="title">生产情况</span>
<div class="button-than" style="position: absolute;right: 3%;">
<div class="button-than" style="position: absolute;right: 0%;">
<CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
@click="() => $emit('update:than', i)" />
</div>
<!-- <span class="line"></span> -->
</div>
<barChartBase :companyId="companyId" :than="than" :period="period" :data="factoryData" ref="barChart"
style="height: 0;flex:1">
<barChartBase v-if="factoryData.length != 0" :companyId="companyId" :than="than" :period="period" :data="factoryData"
ref="barChart" style="height: 0;flex:1">
</barChartBase>
</div>
</div>
@@ -192,15 +192,12 @@ export default {
this.makeData();
this.$nextTick(() => {
let button = document.getElementsByClassName('button-than')
console.log(button);
button[0].children[0].style.borderRadius = '4px 0 0 4px'
button[0].children[1].style.borderRadius = '0px 4px 4px 0'
console.log(button[0].children[0].style);
})
},
methods: {
makeData() {
console.log('msgObj', this.msgObj);
this.msgObj.chip = {};
this.msgObj.stand = {};
this.msgObj.bipv = {};
@@ -225,13 +222,13 @@ export default {
display: flex;
flex-direction: column;
.chart{
flex: 1;
flex: 1.3;
display: flex;
flex-direction: column;
position: relative;
// gap: 6px;
.chart-title{
margin-top: 5px;
margin-top: 20px;
// flex: 1;
// gap: 6px;
height: 1.5vw;
@@ -249,7 +246,7 @@ export default {
// width: 5vw;
color: #FFFFFF;
line-height: 24px;
text-align: left;
// text-align: left;
font-style: normal;
display: inline-block;
}
@@ -363,7 +360,7 @@ export default {
}
.fto-box {
flex: 1;
flex: .5;
.type::before {
content: "";
@@ -382,15 +379,15 @@ export default {
}
.std-box {
flex: 1.3;
flex: .6;
}
.chip-box {
flex: 1.3;
flex: .6;
}
.bipv-box {
flex: 1.3;
flex: .6;
}
.std-box,

View File

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

View File

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

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-07 08:37:17
* @LastEditTime: 2024-06-07 11:04:41
* @LastEditTime: 2024-07-18 16:16:24
* @LastEditors: zhp
* @Description:
-->
@@ -59,7 +59,7 @@ button {
font-size: 18px; */
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
font-size: 14px;
color: #FFFFFF;
line-height: 22px;
letter-spacing: 5px;
@@ -91,7 +91,7 @@ button {
font-size: 18px; */
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
font-size: 14px;
color: #FFFFFF;
line-height: 22px;
letter-spacing: 5px;

View File

@@ -1,16 +1,10 @@
<!--
* @Author: zhp
* @Date: 2024-06-05 09:36:07
* @LastEditTime: 2024-06-05 09:38:23
* @LastEditTime: 2024-07-24 13:39:01
* @LastEditors: zhp
* @Description:
-->
<!--
filename: Container.vue
author: liubin
date: 2024-04-09 10:44:09
description:
-->
<template>
<div class="copilot-container">
@@ -80,6 +74,8 @@ export default {
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
@@ -87,36 +83,40 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
backdrop-filter: blur(4px);
border-right: .13vw solid;
// border-image: linear-gradient(to bottom,transparent 10%,
// #024798 20%,
// transparent 90%) 1;
border-image:radial-gradient(circle at center,
#1481fd 2%,
#024798 95%,
transparent)1;
box-sizing: border-box;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
z-index: 1;
}
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.13vw;
border-radius: 2px;
top: 0%;
left: 0;
background: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 60%;
width: 80%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
right: 4%;
bottom: 0;
background: linear-gradient(to right, #024798, transparent);
background: linear-gradient(to right, transparent 60%, #4197f9 98%, transparent 98%);
z-index: 0;
}
@@ -129,7 +129,7 @@ export default {
gap: 8px;
.container-title {
font-size: 1.18vw;
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
@@ -137,7 +137,7 @@ export default {
}
.container-body {
padding: 12px;
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
@@ -149,8 +149,8 @@ export default {
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
width: 0.7vw;
height: 0.7vw;
}
.corner.tl {

View File

@@ -33,7 +33,7 @@
<!-- content -->
<div class="container-head" ref="container-head"
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon :icon="icon"></Icon>
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div class="container-body" :class="[
@@ -78,43 +78,49 @@ export default {
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
backdrop-filter: blur(4px);
border-right: .13vw solid;
// border-image: linear-gradient(to bottom,transparent 10%,
// #024798 20%,
// transparent 90%) 1;
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
box-sizing: border-box;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
z-index: 1;
}
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.13vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(circle at center,
#1481fd 2%,
#024798 95%,
transparent);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 60%;
width: 80%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
left: 3%;
bottom: 0;
background: linear-gradient(to right, #024798, transparent);
background: linear-gradient(to left, transparent 60%, #4197f9 98%, transparent 98%);
z-index: 0;
}
@@ -127,7 +133,7 @@ export default {
gap: 8px;
.container-title {
font-size: 1.18vw;
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
@@ -135,7 +141,7 @@ export default {
}
.container-body {
padding: 12px;
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
@@ -147,8 +153,8 @@ export default {
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
width: 0.7vw;
height: 0.7vw;
}
.corner.tl {

View File

@@ -28,7 +28,7 @@
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue";
import ProdMonitor from "./components/bipvProdMonitor";
import { deepClone } from "@/utils";
// import Store from "./components/Store.vue";
// import Energy from "./components/Energy.vue";
@@ -88,7 +88,7 @@ export default {
updateThan(val) {
console.log(val);
this.than = val;
// this.getMes();
this.getMes()
},
updatePeriod(val) {
this.period = val;

View File

@@ -29,7 +29,7 @@ import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue";
import ProdMonitor from "./components/ProdMonitor";
import { deepClone } from "@/utils";
// import Store from "./components/Store.vue";
// import Energy from "./components/Energy.vue";
@@ -196,7 +196,7 @@ export default {
gap: 16px;
.flex {
display: flex;
gap: 20px;
gap: 16px;
flex: 1;
}
.top > div,

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-20 13:32:59
* @LastEditTime: 2024-06-17 16:42:12
* @LastEditTime: 2024-07-22 14:41:37
* @LastEditors: zhp
* @Description:
-->
@@ -165,10 +165,15 @@ export default {
subtitle =
this.period == "日" ? `${yesterday}日累计完成值` : this.period == "周" ? `本周累计完成值` : this.period == "月" ? `${month}月累计完成值` : `${year}年累计完成值`;
console.log('titleValue', items)
let titleSize = fontSize(0.35)
let subtitleSize = fontSize(0.14)
// console.log(this.valueTuple[2]- this.valueTuple[1])
return getOptions({
titleValue,
subtitle,
titleSize,
subtitleSize,
currentName: items[0].label,
preName: items[1].label,
previousSum: this.valueTuple[0],
@@ -219,7 +224,12 @@ export default {
// },
},
};
function fontSize(res){
let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (!clientWidth) return;
let fontSize = 100 * (clientWidth / 1920);
return res * fontSize;
}
function calculateItems(period, valueTuple, than) {
console.log('valueTuple', valueTuple);
let items = [];
@@ -296,8 +306,9 @@ function calculateItems(period, valueTuple, than) {
</script>
<style scoped>
.double-ring-chart {
height: 100%;
height: 98%;
display: flex;
flex-direction: column;
}
@@ -312,7 +323,7 @@ function calculateItems(period, valueTuple, than) {
}
.double-ring-chart__legend {
padding: 12px;
/* padding: 12px; */
color: #fff;
display: flex;
justify-content: center;
@@ -321,6 +332,7 @@ function calculateItems(period, valueTuple, than) {
.legend-item {
display: flex;
/* font-size:16px; */
flex-direction: column;
align-items: flex-start;
}

View File

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

View File

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

View File

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

View File

@@ -3,6 +3,8 @@ export default ({
subtitle,
previousSum,
currentSum,
subtitleSize,
titleSize,
targetSum,
currentName,
preName,
@@ -14,22 +16,29 @@ export default ({
top: 0,
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: {
text: titleValue,
left: "48.5%",
top: "37%",
top: "middle",
itemGap: 12,
textVerticalAlign:'auto',
textAlign: "center",
textStyle: {
fontWeight: 600,
fontSize: 26,
color: "#fffd",
fontWeight: 400,
fontSize: titleSize,
color: "rgba(223,241,254,1)",
},
subtext: `\u2002${subtitle}\u2002`,
subtextStyle: {
fontSize: 14,
fontSize: subtitleSize,
fontWeight: 100,
color: "#fffd",
color: "rgba(255,255,255,.7)",
align: "right",
},
},
@@ -38,8 +47,8 @@ export default ({
{
type: "pie",
name: "当前目标",
radius: ["80%", "90%"],
center: ["50%", "52%"],
radius: ["73%", "85%"],
center: ["50%", "48%"],
emptyCircleStyle: {
color: "#042c5f33",
},
@@ -47,8 +56,8 @@ export default ({
// 数据 series
{
type: "pie",
radius: ["80%", "90%"],
center: ["50%", "52%"],
radius: ["73%", "85%"],
center: ["50%", "48%"],
avoidLabelOvervlap: false,
label: {
show: false,
@@ -61,8 +70,16 @@ export default ({
value: currentSum,
name: currentName,
selected: false,
tooltip: {
formatter: `${currentName} : ${currentSum}`
tooltip: {
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
</div>
`
},
itemStyle: {
borderJoin: "round",
@@ -85,8 +102,16 @@ export default ({
{
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
name: currentName,
tooltip: {
formatter: `${currentName} : ${currentSum}`
tooltip: {
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
</div>
`
},
itemStyle: { color: "transparent" },
label: { show: false },
@@ -96,8 +121,8 @@ export default ({
// 数据 series2 - 2023累计
{
type: "pie",
radius: ["70%", "80%"],
center: ["50%", "52%"],
radius: ["60%", "73%"],
center: ["50%", "48%"],
avoidLabelOvervlap: false,
label: {
show: false,
@@ -111,7 +136,15 @@ export default ({
name: preName,
selected: false,
tooltip: {
formatter: `${preName} : ${previousSum}`
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
</div>
`
},
itemStyle: {
borderJoin: "round",
@@ -135,8 +168,16 @@ export default ({
value:previousSum === 0 ? 1 : 0,
name: preName,
tooltip: {
formatter: `${preName} : ${previousSum}`
tooltip: {
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
</div>
`
},
itemStyle: { color: "transparent" },
label: { show: false },

View File

@@ -0,0 +1,590 @@
<!--
* @Author: zhp
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-07-26 14:28:19
* @LastEditors: zhp
* @Description:
-->
<template>
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 32px)">
<div class="app-container" style="height: auto; flex-grow: 1;">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<el-form-item label="时间维度" prop="start">
<el-cascader clearable :options="options" v-model="listQuery.start"
:props="{ multiple: false, emitPath: false }" @change="handleChange" placeholder="选择开始年份和期数" />
</el-form-item>
<el-form-item label-width="0" prop="end">
<el-cascader clearable :options="options" v-model="listQuery.end"
:props="{ multiple: false, emitPath: false }" @change="handleChange" placeholder="选择结束年份和期数" />
</el-form-item>
<el-form-item label="成本中心名称" prop="center">
<el-input v-model="listQuery.center" placeholder="请填写成本中心名称" clearable>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="getDataList">查询</el-button>
<el-divider direction="vertical"></el-divider>
<!-- <el-button type="primary" size="small" plain @click="handleImport">导入</el-button> -->
<el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
<!-- <el-button type="success" size="small" plain @click="addFactory">新增</el-button> -->
</el-form-item>
</el-form>
<!-- <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> -->
<base-table :row-key="(record, index) => { return record.in }" border :table-props="tableProps"
:page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData" :max-height="tableH">
<!-- <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
:method-list="tableBtn" @clickBtn="handleClick" /> -->
</base-table>
<pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
@pagination="getDataList" />
</div>
<!-- 用户导入对话框 -->
<!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all"
:type="listQuery.reportType" @refreshDataList="getDataList" /> -->
<!-- <pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList" /> -->
</div>
</template>
<script>
import { parseTime } from '@/utils/ruoyi';
import { getCostMainPage, exportExcel } from '@/api/cost';
// import inputTable from './inputTable.vue';
import moment from 'moment'
// 设置语言
// 引入组件
// Vue.component(DatePicker.months, DatePicker)
// Vue.component(Select.name, Select)
// import ButtonNav from '@/components/ButtonNav'
import basicPage from '@/mixins/basic-page'
// import detailOrUpdate from './detail-or-updata';
// import addOrUpdate from './add-or-updata';
// import { factoryList, dhgfactoryList, tyjxfactoryList } from "@/utils/constants";
import { getBaseHeader } from "@/utils/request";
import { factoryList } from "@/utils/constants";
// import tableHeightMixin from "@/mixins/tableHeightMixin";
// import FileSaver from 'file-saver'
// import * as XLSX from 'xlsx'
export default {
// components: { ButtonNav, detailOrUpdate, addOrUpdate },
mixins: [basicPage],
data() {
const currentYear = new Date().getFullYear();
const startYear = currentYear - 10;
const endYear = currentYear + 10;
const options = [];
for (let year = startYear; year <= endYear; year++) {
const yearOptions = [];
for (let period = 1; period <= 12; period++) {
yearOptions.push({
value: `${year}${('0' + period + '期').slice(-3)}`,
label: `${year}${('0' + period + '期').slice(-3)}`
});
}
options.push({
value: year,
label: year,
children: yearOptions
});
}
return {
start: undefined,
end: undefined,
// selectedValues: [],
options,
tableH: this.tableHeight(300),
listQuery: {
pageSize: 20,
pageNo: 1,
total: 0,
center: undefined,
start: undefined,
end: undefined,
yearPhaseStart:undefined,
yearPhaseEnd:undefined,
},
// 用户导入参数
mainFormConfig: [
{
type: 'select',
label: '工单',
placeholder: '请选择工单',
param: 'workOrderId',
selectOptions: [],
},
// {
// type: 'select',
// label: '产线',
// placeholder: '请选择产线',
// param: 'lineId',
// selectOptions: [],
// },
// 选项切换
// {
// type: 'select',
// label: '时间类型',
// param: 'dateFilterType',
// defaultSelect: 0,
// selectOptions: [
// { id: 0, name: '按时间段' },
// { id: 1, name: '按日期' },
// ],
// index: 2,
// extraOptions: [
{
// parent: 'dateFilterType',
// 时间段选择
type: 'datePicker',
label: '时间段',
// dateType: 'datetimerange',
dateType: 'datetimerange',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-ddTHH:mm:ss',
rangeSeparator: '-',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'recordTime',
},
// {
// parent: 'dateFilterType',
// // 日期选择
// type: 'datePicker',
// // label: '日期',
// dateType: 'date',
// placeholder: '选择日期',
// format: 'yyyy-MM-dd',
// valueFormat: 'yyyy-MM-dd',
// param: 'timeday',
// },
// ],
// },
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
{
type: 'separate'
},
// {
// type: this.$auth.hasPermi(
// 'analysis:equipment:export'
// )
// ? 'separate'
// : '',
// },
{
type: 'button',
btnName: '导出',
name: 'export',
color: 'warning',
},
],
formConfig: [
{
type: 'title',
label: '成本管理',
},
],
mDTypeList: [
{
value: 0,
label: '物料编码'
},
{
value: 1,
label: '物料名称'
}
],
wDTypeList: [
{
value: 0,
label: '仓库名称'
}
],
tableProps: [
{
prop: 'yearPhaseName',
label: '年期',
minWidth: 200,
showOverflowtooltip: true
},
{
prop: 'center',
label: '成本中心名称',
minWidth: 150,
showOverflowtooltip: true
},
{
prop: 'product',
label: '产品名称',
minWidth: 150,
showOverflowtooltip: true
},
{
prop: 'spec',
label: '规格型号',
minWidth: 150,
showOverflowtooltip: true
},
{
prop: 'workorderCode',
label: '工单编号',
minWidth: 150,
showOverflowtooltip: true
},
{
prop: 'workorderLineNum',
label: '工单行号',
minWidth: 150,
showOverflowtooltip: true
},
{
prop: 'supplierCode',
label: '供应商编码',
minWidth: 150,
showOverflowtooltip: true
},
{
prop: 'supplier',
label: '供应商名称',
minWidth: 150,
showOverflowtooltip: true
},
{
prop: 'unit',
label: '基本单位',
minWidth: 150,
// filter: (val) => factoryList[val],
showOverflowtooltip: true
},
{
prop: 'planNum',
label: '计划产量',
minWidth: 150,
// filter: (val) => factoryList[val],
showOverflowtooltip: true
},
{
prop: 'project',
label: '成本项目名称',
minWidth: 150,
// filter: (val) => factoryList[val],
showOverflowtooltip: true
},
{
prop: 'material',
label: '子项物料名称',
minWidth: 150,
// filter: (val) => factoryList[val],
showOverflowtooltip: true
},
{
prop: 'currentTime',
label: '本期完工',
minWidth: 150,
// filter: (val) => factoryList[val],
showOverflowtooltip: true,
children: [
{
prop: 'finishNum',
label: '数量',
minWidth: 150,
// filter: (val) => factoryList[val],
showOverflowtooltip: true
},
{
prop: 'unitConsume',
label: '单耗',
minWidth: 150,
// filter: (val) => factoryList[val],
showOverflowtooltip: true
},
{
prop: 'unitCost',
label: '单位成本',
minWidth: 150,
// filter: (val) => factoryList[val],
showOverflowtooltip: true
},
{
prop: 'cost',
label: '金额',
minWidth: 150,
// filter: (val) => factoryList[val],
showOverflowtooltip: true
},
]
},
{
prop: 'totalTime',
label: '累计完工',
minWidth: 150,
// filter: (val) => factoryList[val],
showOverflowtooltip: true,
children: [
{
prop: 'totalFinishNum',
label: '数量',
minWidth: 150,
// filter: (val) => factoryList[val],
showOverflowtooltip: true
},
{
prop: 'totalUnitConsume',
label: '单耗',
minWidth: 150,
// filter: (val) => factoryList[val],
showOverflowtooltip: true
},
{
prop: 'totalUnitCost',
label: '单位成本',
minWidth: 150,
// filter: (val) => factoryList[val],
showOverflowtooltip: true
},
{
prop: 'totalCost',
label: '金额',
minWidth: 150,
// filter: (val) => factoryList[val],
showOverflowtooltip: true
},
]
},
],
// timeSelect:'month',
// startTimeStamp:null, //开始时间
// endTimeStamp:null, //结束时间
// date:'凯盛玻璃控股成员企业2024生产数据',
// reportTime: '',
// startTimeStamp: '',
// endTimeStamp: '',
tableData: [],
// proLineList: [],
// all: {}
};
},
computed: {
},
watch: {
},
created() {
const currentYear = new Date().getFullYear();
this.listQuery.start = `${currentYear}01期`;
this.listQuery.end = `${currentYear}12期`;
},
methods: {
handleChange(value) {
// console.log('选择的值:', this.selectedValues);
},
async getDataList() {
this.tableData = []
this.listQuery.yearPhaseStart = this.listQuery.start ? this.listQuery.start.slice(0,6) :undefined
this.listQuery.yearPhaseEnd = this.listQuery.end ? this.listQuery.end.slice(0, 6) : undefined
if (this.listQuery.end && this.listQuery.start) {
if (this.listQuery.end.slice(0, 4) - this.listQuery.start.slice(0, 4) > 10) {
this.listQuery.end = undefined
this.listQuery.start = undefined
this.listQuery.yearPhaseStart = undefined
this.listQuery.yearPhaseEnd = undefined
return this.$message({
message: '起止年份不能超过十年',
type: 'warning'
});
}
await getCostMainPage(this.listQuery).then(res => {
if (res.code === 0) {
// this.tableData = res.data.list
res.data.list.forEach((item, index) => {
let obj = {
in: Math.random().toString().slice(2, 10),
id:item.id,
yearPhase: item.yearPhase,
center: item.center,
product: item.product,
spec: item.spec,
workorderCode: item.workorderCode,
workorderLineNum: item.workorderLineNum,
supplierCode: item.supplierCode,
supplier: item.supplier,
unit: item.unit,
planNum: item.planNum,
finishNum: item.finishNum,
unitConsume: item.unitConsume,
unitCost: item.unitCost,
cost: item.cost,
totalFinishNum: item.totalFinishNum,
totalUnitConsume: item.totalUnitConsume,
totalUnitCost: item.totalUnitCost,
totalCost: item.totalCost,
createTime: item.createTime,
yearPhaseName: item.yearPhaseName,
project: item.project,
material: item.material,
children:[]
}
this.tableData.push(obj)
item.children.forEach((ele, ind) => {
// for (let i in item.projs) {
let obj = {
in: Math.random().toString().slice(2, 10),
id: ele.id,
yearPhase: ele.yearPhase,
center: ele.center,
product: ele.product,
spec: ele.spec,
workorderCode: ele.workorderCode,
workorderLineNum: ele.workorderLineNum,
supplierCode: ele.supplierCode,
supplier: ele.supplier,
unit: ele.unit,
planNum: ele.planNum,
finishNum: ele.finishNum,
unitConsume: ele.unitConsume,
unitCost: ele.unitCost,
cost: ele.cost,
totalFinishNum: ele.totalFinishNum,
totalUnitConsume: ele.totalUnitConsume,
totalUnitCost: ele.totalUnitCost,
totalCost: ele.totalCost,
createTime: ele.createTime,
yearPhaseName: ele.yearPhaseName,
project: ele.project,
material: ele.material,
children:[]
}
this.tableData[index].children.push(obj)
ele.children?.forEach((i,inde) => {
// for (let i in item.projs) {
let obj = {
in: Math.random().toString().slice(2, 10),
id: i.id,
yearPhase: i.yearPhase,
center: i.center,
product: i.product,
spec: i.spec,
workorderCode: i.workorderCode,
workorderLineNum: i.workorderLineNum,
supplierCode: i.supplierCode,
supplier: i.supplier,
unit: i.unit,
planNum: i.planNum,
finishNum: i.finishNum,
unitConsume: i.unitConsume,
unitCost: i.unitCost,
cost: i.cost,
totalFinishNum: i.totalFinishNum,
totalUnitConsume: i.totalUnitConsume,
totalUnitCost: i.totalUnitCost,
totalCost: i.totalCost,
createTime: i.createTime,
yearPhaseName: i.yearPhaseName,
project: i.project,
material: i.material,
}
this.tableData[index].children[ind].children.push(obj)
// });
// }
});
// });
// }
});
});
console.log(this.tableData);
this.listQuery.total = res.data.total
}
})
} else {
return this.$message({
message: '请选择起止年份和期数',
type: 'warning'
});
}
},
buttonClick(val) {
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.getDataList();
break;
case 'export':
this.handleExport();
break;
default:
console.log(val);
}
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.listQuery;
// queryParams.current = 1
// queryParams.size = 999
// if (this.facType === 0) {
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
this.exportLoading = true;
return exportExcel(queryParams);
}).then(response => {
this.$download.excel(response, '成本核算数据.xls');
this.exportLoading = false;
}).catch(() => { });
// }
}
},
};
</script>
<style>
/* .blueTip { */
/* padding-bottom: 10px; */
/* } */
.blueTip .el-date-editor .el-range__icon {
font-size: 16px;
color: #0b58ff;
}
.blueTip .el-input__prefix .el-icon-date {
font-size: 16px;
color: #0b58ff;
}
.blueTip .el-input__prefix .el-icon-time {
font-size: 16px;
color: #0b58ff;
}
.blueTip::before {
display: inline-block;
content: '';
width: 4px;
height: 18px;
background: #0B58FF;
border-radius: 1px;
margin-right: 8PX;
margin-top: 8px;
}
.app-container {
margin: 0;
background-color: #fff;
border-radius: 4px;
padding: 16px 16px 0;
height: calc(100vh - 134px);
overflow: auto;
}
</style>

View File

@@ -1,421 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-05-06 14:55:56
* @LastEditors: zhp
* @Description:
-->
<template>
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)">
<div class="app-container" style="padding: 16px 24px 0;height: auto; flex-grow: 1;">
<search-bar :formConfigs="mainFormConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
<el-row :gutter="24">
<el-col :span="12" v-for="item in dataList" :key="item.id">
<line-chart :id="item.id" class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart>
</el-col>
<!-- <el-col :span="12">
<line-chart :id=" 'second' " class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart>
</el-col> -->
</el-row>
</div>
<div class="app-container" style="margin-top: 18px;flex-grow: 1; height: auto; padding: 16px;">
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
:table-data="tableData">
</base-table>
</div>
<!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all"
:type="listQuery.reportType" @refreshDataList="getDataList" /> -->
<!-- <pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList" /> -->
</div>
</template>
<script>
// import { parseTime } from '../../core/mixins/code-filter';
import { getOrderList, getCostPage } from '@/api/cost/index';
// import inputTable from './inputTable.vue';
import lineChart from './lineChart';
import moment from 'moment'
// import FileSaver from 'file-saver'
// import * as XLSX from 'xlsx'
export default {
components: { lineChart },
data() {
return {
listQuery: {
current: 1,
size: 10,
// factoryId: null,
// total: 0,
// type: null,
// reportType: 2,
reportTime: []
},
dataList: [
{
id:'first',
},
{
id: 'second',
},
{
id: 'third',
},
{
id: 'fourth',
},
{
id: 'fifth',
},
{
id: 'sixth',
},
],
urlOptions: {
// getDataListURL: getGlassPage,
// exportURL: exportGlasscExcel
},
mainFormConfig: [
{
type: 'select',
label: '工单',
placeholder: '请选择工单',
param: 'workOrderId',
selectOptions: [],
clearable: true,
},
// {
// type: 'select',
// label: '产线',
// placeholder: '请选择产线',
// param: 'lineId',
// selectOptions: [],
// },
// 选项切换
// {
// type: 'select',
// label: '时间类型',
// param: 'dateFilterType',
// defaultSelect: 0,
// selectOptions: [
// { id: 0, name: '按时间段' },
// { id: 1, name: '按日期' },
// ],
// index: 2,
// extraOptions: [
{
// parent: 'dateFilterType',
// 时间段选择
type: 'datePicker',
label: '时间段',
// dateType: 'datetimerange',
dateType: 'datetimerange',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-ddTHH:mm:ss',
rangeSeparator: '-',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'recordTime',
clearable:true,
},
// {
// parent: 'dateFilterType',
// // 日期选择
// type: 'datePicker',
// // label: '日期',
// dateType: 'date',
// placeholder: '选择日期',
// format: 'yyyy-MM-dd',
// valueFormat: 'yyyy-MM-dd',
// param: 'timeday',
// },
// ],
// },
{
type:'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
{
type:'separate'
},
// {
// type: this.$auth.hasPermi(
// 'analysis:equipment:export'
// )
// ? 'separate'
// : '',
// },
{
type:'button',
btnName: '导出',
name: 'export',
color: 'warning',
},
],
formConfig: [
{
type: 'title',
label: '成本管理',
},
],
timeList: [
{
value: 'month',
label:'月'
},
{
value: 'year',
label: '年'
}
],
factoryList: [
{
name: '测试',
id:1
}
],
tableProps: [
// {
// prop: 'createTime',
// label: '添加时间',
// fixed: true,
// width: 180,
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
// },
{
prop: 'userName',
label: '日期',
},
{
prop: 'nickName',
label: '工厂名称',
}
],
timeSelect:'month',
startTimeStamp:null, //开始时间
endTimeStamp:null, //结束时间
// date:'凯盛玻璃控股成员企业2024生产数据',
// reportTime: '',
startTimeStamp: '',
endTimeStamp: '',
tableData: [
{
userName: 'userName',
nickName: '用户名',
datas:'111111'
},
{
userName: 'userName',
nickName: '用户名',
datas: '111111'
},
{
userName: 'userName',
nickName: '用户名',
datas: '111111'
// subcomponent: row
}
],
// proLineList: [],
// all: {}
};
},
mounted() {
this.getDict()
// this.getCurrentYearFirst()
this.getDataList()
},
methods: {
buttonClick() {
},
// handleTime() {
// this.$forceUpdate()
// // this.$nextTick(() => [
// // ])
// },
// getCurrentYearFirst() {
// let date = new Date();
// date.setDate(1);
// date.setMonth(0);
// this.reportTime = date;
// this.startTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()); //开始时间
// this.endTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()); //结束时间
// this.listQuery.reportTime[0] = parseTime(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
// this.listQuery.reportTime[1] = parseTime(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 100
// },
changeTime(val) {
if (val) {
// let timeStamp = val.getTime(); //标准时间转为时间戳,毫秒级别
// this.endTimeStamp = this.timeFun(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()); //开始时间
// this.startTimeStamp = this.timeFun(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()); //结束时间
// this.listQuery.reportTime[0] = parseTime(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
// this.listQuery.reportTime[1] = parseTime(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
} else {
this.listQuery.reportTime = []
}
},
async getDict() {
// this.$refs.lineChart.initChart()
// 产线列表
const res = await getOrderList({
current:1,
size:999,
});
console.log(res)
this.mainFormConfig[0].selectOptions = res.data;
},
// 获取数据列表
multipliedByHundred(str) {
console.log(str);
// console.log(str)
if ( str != 0) {
let floatVal = parseFloat(str);
if (isNaN(floatVal)) {
return 0;
}
floatVal = Math.round(str * 10000) / 100;
let strVal = floatVal.toString();
let searchVal = strVal.indexOf('.');
if (searchVal < 0) {
searchVal = strVal.length;
strVal += '.';
}
while (strVal.length <= searchVal + 2) {
strVal += '0';
}
return parseFloat(strVal);
}
},
async getDataList() {
const res = await getCostPage({
current: 1,
size: 999,
});
},
add0(m) {
return m < 10 ? '0' + m : m
},
format(shijianchuo) {
//shijianchuo是整数否则要parseInt转换
var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss')
// console.log(time)
// var y = time.getFullYear();
// var m = time.getMonth() + 1;
// var d = time.getDate();
// var h = time.getHours();
// var mm = time.getMinutes();
// var s = time.getSeconds();
return time
},
changeTime(val) {
if (val) {
// console.log(val)
// console.log(val.setHours(7, 0, 0))
// console.log(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000)
// let time = this.format(val.setHours(7, 0, 0))
this.endTimeStamp = this.format(val.setHours(7, 0, 0)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
this.startTimeStamp = this.format(val.setHours(7, 0, 1) - 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
// console.log(this.listQuery.reportTime);
this.listQuery.reportTime[0] = this.format(val.setHours(7, 0, 1)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
this.listQuery.reportTime[1] = this.format(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
console.log(this.listQuery.reportTime);
} else {
this.listQuery.reportTime = []
}
},
//时间戳转为yy-mm-dd hh:mm:ss
timeFun(unixtimestamp) {
var unixtimestamp = new Date(unixtimestamp);
var year = 1900 + unixtimestamp.getYear();
var month = "0" + (unixtimestamp.getMonth() + 1);
var date = "0" + unixtimestamp.getDate();
return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length)
},
buttonClick(val) {
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.getDataList();
break;
case 'export':
this.handleExport();
break;
default:
console.log(val);
}
},
/** 导出按钮操作 */
handleExport() {
// 处理查询参数
// var xlsxParam = { raw: true };
// /* 从表生成工作簿对象 */
// import('xlsx').then(excel => {
// var wb = excel.utils.table_to_book(
// document.querySelector("#exportTable"),
// xlsxParam
// );
// /* 获取二进制字符串作为输出 */
// var wbout = excel.write(wb, {
// bookType: "xlsx",
// bookSST: true,
// type: "array",
// });
// try {
// FileSaver.saveAs(
// //Blob 对象表示一个不可变、原始数据的类文件对象。
// //Blob 表示的不一定是JavaScript原生格式的数据。
// //File 接口基于Blob继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
// //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
// new Blob([wbout], { type: "application/octet-stream" }),
// //设置导出文件名称
// "许昌安彩日原片生产汇总.xlsx"
// );
// } catch (e) {
// if (typeof console !== "undefined") console.log(e, wbout);
// }
// return wbout;
// //do something......
// })
},
},
};
</script>
<style scoped>
/* .blueTip { */
/* padding-bottom: 10px; */
/* } */
/* .blueTi */
.blueTip::before{
display: inline-block;
content: '';
width: 4px;
height: 18px;
background: #0B58FF;
border-radius: 1px;
margin-right: 8PX;
margin-top: 8px;
}
.app-container {
margin: 0 16px 0;
background-color: #fff;
border-radius: 4px;
padding: 16px 16px 0;
height: calc(100vh - 134px);
overflow: auto;
}
</style>

View File

@@ -1,233 +0,0 @@
<!--
* @Author: zwq
* @Date: 2022-01-21 14:43:06
* @LastEditors: zhp
* @LastEditTime: 2024-04-16 14:16:17
* @Description:
-->
<template>
<!-- <div> -->
<!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
<div :id="id" class="costChart" :style="{ height: height, width: width }" />
<!-- </div> -->
</template>
<script>
import * as echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
// import resize from './mixins/resize'
export default {
name: 'OverviewBar',
// mixins: [resize],
props: {
id: {
type: String,
default: 'OverviewLine'
},
// className: {
// type: String,
// default: 'epChart'
// },
width: {
type: String,
default: '100%'
},
beilv: {
type: Number,
default: 1
},
height: {
type: String,
default: '35vh'
},
legendPosition: {
type: String,
default: 'center'
},
showLegend: {
type: Boolean,
default: false
},
legendData: {
type: Array,
default: () => []
}
},
data() {
return {
chartData: [
{
name: '产品1',
num: 1112,
yield: 0.97,
},
{
name: '产品2',
num: 1112,
yield: 0.97,
},
{
name: '产品3',
num: 1112,
yield: 0.97,
},
{
name: '产品4',
num: 1112,
yield: 0.97,
},
{
name: '产品5',
num: 1112,
yield: 0.97,
}
],
chart: null,
colors: ['rgba(113, 99, 254, 1)', 'rgba(39, 139, 255, 1)', 'rgba(100, 189, 255, 1)', 'rgba(143, 240, 170, 1)', 'rgba(246, 189, 22, 0.85)'],
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
getEqualNewlineString(params, length) {
let text = ''
let count = Math.ceil(params.length / length) // 向上取整数
// 一行展示length个
if (count > 1) {
for (let z = 1; z <= count; z++) {
text += params.substr((z - 1) * length, length)
if (z < count) {
text += '\n'
}
}
} else {
text += params.substr(0, length)
}
return text
},
initChart() {
console.log(1111)
let num = 0
this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
num += i.num
})
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({
color: this.colors,
title: {
text: num,
subtext: '总数/片',
top: '32%',
left: '49%',
textAlign: 'center',
textStyle: {
fontSize: 32,
color: 'rgba(140, 140, 140, 1)',
},
subtextStyle: {
fontSize: 20,
color: '#fff00',
},
},
legend: {
bottom: '2%',
left: 'center',
itemWidth: 12,
itemHeight: 12,
icon: 'roundRect',
textStyle: {
color: 'rgba(140, 140, 140, 1)'
},
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
name: item.name,
itemStyle: {
color: this.colors[index % 4]
}
}))
},
series: [{
name: 'ISRA缺陷检测',
type: 'pie',
// position:outerHeight,
center: ['50%', '40%'],
radius: ['45%', '70%'],
avoidLabelOverlap: true,
label: {
show: true,
normal: {
alignTo: 'labelLine',
margin: 10,
edgeDistance: 10,
lineHeight: 16,
// 各分区的提示内容
// params: 即下面传入的data数组,通过自定义函数,展示你想要的内容和格式
formatter: function (params) {
console.log(params);
return;
},
formatter: (params) => {
//调用自定义显示格式
return this.getEqualNewlineString(params.value + " | " + params.percent.toFixed(0) + "%" + "\n" + params.name, 10);
},
textStyle: { // 提示文字的样式
// color: 'rgba(0, 0, 0, 0.65)',
fontSize: 18
}
}
},
labelLine: {
show: true,
length: 25,
length2: 100,
},
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
name: item.name,
value: item.num,
label: {
color: this.colors[index % 4]
},
itemStyle: {
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// global: false,
// colorStops: [
// { offset: 0, color: this.colors[index % 4] },
// { offset: 1, color: this.colors[index % 4] + '33' }
// ]
// }
}
}))
}],
tooltip: {
trigger: 'item',
className: "isra-chart-tooltip"
},
})
}
}
}
</script>
<style scoped>
</style>

View File

@@ -1,16 +1,10 @@
<!--
* @Author: zhp
* @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-06-14 09:03:26
* @LastEditTime: 2024-07-23 16:36:18
* @LastEditors: zhp
* @Description:
-->
<!--
filename: ChipYield.vue
author: liubin
date: 2024-04-11 10:46:47
description:
-->
<template>
<chart-container class="chip-yield-chart" :noScroll="true">
@@ -53,20 +47,30 @@ export default {
top: 0,
containLabel: true,
},
tooltip: {},
tooltip: {
trigger: "item",
// axisPointer: {
// // type: "cross",
// crossStyle: {
// color: "rgba(237,237,237,0.5)",
// },
// },
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
},
title: {
text: "0%",
left: "48%",
top: "40%",
textAlign: "center",
textStyle: {
fontWeight: 600,
fontWeight: 400,
fontSize: 32,
color: "#fffd",
},
subtext: `\u2002${year}年累计产出\u2002`,
subtextStyle: {
fontSize: 12,
fontSize: 15,
fontWeight: 100,
color: "#fffd",
align: "right",
@@ -102,7 +106,6 @@ export default {
name: `${year}累计产出`,
selected: false,
tooltip: {
formatter: null,
},
itemStyle: {
borderJoin: "round",
@@ -126,7 +129,6 @@ export default {
value: 0,
name: `${year}目标`,
tooltip: {
formatter: null,
},
itemStyle: { color: "transparent" },
label: { show: false },
@@ -151,7 +153,17 @@ export default {
name: `${year - 1}累计产出`,
selected: false,
tooltip: {
formatter: null,
trigger: "item",
// axisPointer: {
// // type: "cross",
// crossStyle: {
// color: "rgba(237,237,237,0.5)",
// },
// },
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
},
},
itemStyle: {
borderJoin: "round",
@@ -175,7 +187,15 @@ export default {
value: 0,
name: `${year - 1}累计产出`,
tooltip: {
formatter:null,
trigger: "item",
// axisPointer: {
// // type: "cross",
// crossStyle: {
// color: "rgba(237,237,237,0.5)",
// },
// },
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
},
itemStyle: { color: "transparent" },
label: { show: false },
@@ -223,40 +243,80 @@ export default {
actualOptions() {
console.log('this.output.current / this.output.target', this.output.current/this.output.target);
const year = new Date().getFullYear()
const options = JSON.parse(JSON.stringify(this.options));
const options = this.options
// console.log('options', options);
// 标题
if (!this.output.target) options.title.text = "0%";
else
options.title.text =
((this.output.current / this.output.target).toFixed(2)) * 100 + "%";
if (!this.output.target && !this.output.current) options.title.text = "0%";
else if (!this.output.target && this.output.current) options.title.text = "100%";
else options.title.text =
((this.output.current / this.output.target).toFixed(2)) * 100 + "%";
// 外环
if (
this.output.current == this.output.target &&
this.output.current == 0
) {
options.series[1].data[0].value = 0;
options.series[1].data[1].value = 1;
options.series[1].data[0].tooltip.formatter = year + '累计完成:0';
options.series[1].data[1].tooltip.formatter = year + '累计完成:0';
this.options.series[1].data[0].value = 0;
this.options.series[1].data[1].value = 1;
this.options.series[1].data[0].tooltip.formatter =
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0}</span>
</div>`;
this.options.series[1].data[1].tooltip.formatter =
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0 }</span>
</div>`;
} else {
options.series[1].data[0].value = this.output.current;
options.series[1].data[1].value =
this.options.series[1].data[0].value = this.output.current;
this.options.series[1].data[1].value =
this.output.target - this.output.current;
options.series[1].data[0].tooltip.formatter = year + '累计完成:' + this.output.current;
options.series[1].data[1].tooltip.formatter = year + '累计完成:' + this.output.current;
this.options.series[1].data[0].tooltip.formatter =
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.current}</span>
</div>`;
this.options.series[1].data[1].tooltip.formatter =
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.current}</span>
</div>`;
}
// 内环
if (this.output.previous == 0) {
options.series[2].data[0].value = 0;
options.series[2].data[1].value = 1;
options.series[2].data[0].tooltip.formatter = year-1 + '累计完成:' + 0;
options.series[2].data[1].tooltip.formatter = year-1 + '累计完成:' + 0;
this.options.series[2].data[0].value = 0;
this.options.series[2].data[1].value = 1;
this.options.series[2].data[0].tooltip.formatter =
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0}</span>
</div>`;
this.options.series[2].data[1].tooltip.formatter =
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0}</span>
</div>`;
} else {
options.series[2].data[0].value = this.output.previous;
options.series[2].data[1].value = 0;
options.series[2].data[0].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
options.series[2].data[1].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
this.options.series[2].data[0].value = this.output.previous;
this.options.series[2].data[1].value = 0;
this.options.series[2].data[0].tooltip.formatter =
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.previous}</span>
</div>`;
this.options.series[2].data[1].tooltip.formatter =
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span> +
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.previous}</span>
</div>`;
}
console.log('options', options);
return options;
@@ -274,6 +334,9 @@ export default {
factory(val) {
this.initOptions(this.actualOptions);
},
actualOptions() {
this.initOptions(this.actualOptions);
}
},
mounted() {
console.log("mounted", this.actualOptions);

View File

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

View File

@@ -8,19 +8,10 @@
<template>
<chart-container class="left-chart-base">
<div class="legend">
<span
v-for="item in legend"
:key="item.label"
class="legend-item"
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }"
>{{ item.label }}</span
>
<span style="color: rgba(223,241,254,.8);" v-for="item in legend" :key="item.label" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
</div>
<div
ref="chart"
style="max-width: 22vw"
:style="{ height: vHeight + 'vh' }"
></div>
<div ref="chart" style="max-width: 22vw" :style="{ height: vHeight + 'vh' }"></div>
</chart-container>
</template>
@@ -73,29 +64,32 @@ export default {
color: "rgba(237,237,237,0.5)",
},
},
// backgroundColor: '#000000',
// textStyle: {
// color: '#ffff'
// }
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
// console.log(params);
// 获取xAxis data中的数据
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
params.forEach(item => {
let color = item.color.colorStops ? item.color.colorStops[0].color : ''
console.log(item.color, color);
dataStr += `<div>
<div style="margin: 0 8px;">
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color.colorStops[0].color};"></span>
<span>${item.seriesName}</span>
<span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
</div>
</div>`
})
return dataStr
}
console.log('params', params)
var res = `<span style='display:inline-block;color:rgba(255,255,255,0.85);margin-bottom:8px;font-size:16px;letter-spacing: 2px;'>${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;border-radius:2px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
`<span style='width:60px;display:inline-block;color:rgba(255,255,255,0.65);font-size:16px;text-align: right;letter-spacing: 2px;'>${params[i].value ? params[i].value: 0}</span>`;
}
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
// return res;
},
},
xAxis: {
type:'category',
axisTick: {
show: false,
},
@@ -105,25 +99,27 @@ export default {
},
},
axisLabel: {
color: "#fff",
fontSize: 14,
textStyle: {
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
position:'left',
// position:'left',
nameTextStyle: {
color: "#fff",
fontSize: 14,
color: "rgba(223,241,254,.8)",
fontSize: 16,
align:'right'
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 14,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -133,7 +129,7 @@ export default {
},
splitLine: {
lineStyle: {
color: "#4561AE",
color: "rgba(69,97,174,.4)",
},
},
},
@@ -141,13 +137,13 @@ export default {
{
name: '', // this.series[0].name,
type: "bar",
barWidth: 12,
barWidth: 16,
label: {
show: true, //开启显示
align: 'right', //在上方显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#DFF1FE',
color: "rgba(223,241,254,.8)",
fontSize: 14
}
},
@@ -185,14 +181,14 @@ export default {
{
name: '', // this.series[1].name,
type: "bar",
barWidth: 12,
barWidth: 16,
label: {
show: true, //开启显示
align: 'left', //在上方显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#DFF1FE',
fontSize: 14
color: "rgba(223,241,254,.8)",
fontSize: 16
}
},
itemStyle: {
@@ -264,9 +260,25 @@ export default {
</script>
<style scoped lang="scss">
.left-chart-base {
// position: relative;
.echarts-tooltip{
background: #001829;
// background-color: ;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);
opacity: 0.6;
border-radius: 4px;
.content {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
backdrop-filter: blur(6px);
// transition: .3s transform;
}
}
.left-chart-base {
.legend {
position: absolute;
top: 5.2vh;

View File

@@ -1,10 +1,3 @@
<!--
* @Author: zhp
* @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-06-28 09:28:56
* @LastEditors: zhp
* @Description:
-->
<!--
filename: right-chart-base
author: liubin
@@ -15,19 +8,10 @@
<template>
<chart-container class="right-chart-base">
<div class="legend">
<span
v-for="item in legend"
:key="item.label"
class="legend-item"
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }"
>{{ item.label }}</span
>
<span style="color: rgba(223,241,254,.8);" v-for="item in legend" :key="item.label" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
</div>
<div
ref="chart"
style="max-width: 22vw"
:style="{ height: vHeight + 'vh' }"
></div>
<div ref="chart" style="max-width: 22vw" :style="{ height: vHeight + 'vh' }"></div>
</chart-container>
</template>
@@ -65,7 +49,7 @@ export default {
isFullscreen: false,
options: {
grid: {
left: "5%",
left: "6%",
right: "4%",
bottom: "0",
top: "18%",
@@ -79,22 +63,35 @@ export default {
color: "rgba(237,237,237,0.5)",
},
},
confine:true,
backgroundColor: 'rgba(50,50,50,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
// 获取xAxis data中的数据
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
params.forEach(item => {
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);
dataStr += `<div>
<div style="margin: 0 8px;">
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${color};"></span>
<span>${item.seriesName}</span>
<span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
</div>
</div>`
})
return dataStr
}
console.log('params', params)
var res = `<span style='display:inline-block;color:rgba(255,255,255,0.85);margin-bottom:8px;font-size:16px;letter-spacing: 2px;'>${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"
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:42.3%;left:3.05%;'></span>
<span style='display:inline-block;width: 8px;height: 8px;border-radius: 100%;background-color: #f3c000;position: absolute;top:39.4%;left:4.6%;'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px;letter-spacing: 2px;'>${params[i].seriesName}</span>`
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>`
}` +
`<span style='width:180px;display:inline-block;color:rgba(255,255,255,0.65);font-size:16px;text-align: right;letter-spacing: 2px;'>${params[i].value ? params[i].value : 0 }</span>`;
}
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
},
},
xAxis: {
axisTick: {
@@ -106,25 +103,25 @@ export default {
},
},
axisLabel: {
color: "#fff",
fontSize: 14,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
position: 'left',
// position: 'left',
nameTextStyle: {
color: "#fff",
fontSize: 14,
color: "rgba(223,241,254,.8)",
fontSize: 16,
align: 'right'
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 14,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -134,7 +131,7 @@ export default {
},
splitLine: {
lineStyle: {
color: "#4561AE",
color: "rgba(69,97,174,.4)",
},
},
},
@@ -177,7 +174,7 @@ export default {
{
name: "", // "2023年",
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -212,7 +209,7 @@ export default {
{
name: "", // "2024年",
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -252,9 +249,9 @@ export default {
this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12;
});
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 14;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 14;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 14;
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initOptions(this.actualOptions);
},
series(val) {
@@ -317,13 +314,13 @@ export default {
.legend-item:nth-child(1):before {
// width: 12px;
// height: 2px;
width: 0.638vw;
width: 1vw;
height: 0.1064vw;
background-color: #f3c000;
position: absolute;
top: 50%;
// left: -16px;
left: -0.851vw;
left: -1.2vw;
transform: translateY(-50%);
}
.legend-item:nth-child(1):after {
@@ -333,11 +330,11 @@ export default {
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
width: 0.4vw;
height: 0.4vw;
border-radius: 100%;
top: 50%;
left: -0.851vw;
left: -1.1vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}

View File

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

View File

@@ -92,11 +92,12 @@ export default {
}
h2 {
padding: 0 1vw;
// padding: 0 1vw;
margin: 6px 0;
font-family: 优设标题黑;
color: #fff;
letter-spacing:5px;
letter-spacing:4px;
text-align: left;
// font-size: 24px;
font-size: 1.276em;
}
@@ -115,7 +116,7 @@ ul {
}
li {
font-size: 0.851em;
font-size: 0.77em;
}
.corner {

View File

@@ -82,6 +82,7 @@ export default {
</script>
<style scoped lang="scss">
.dashboard-container {
height: 0;
flex: 1;
@@ -90,18 +91,18 @@ export default {
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
// &::after {
// content: "";
// position: absolute;
// display: inline-block;
// width: 60%;
// height: 0.31415vh;
// border-radius: 2px;
// left: 8%;
// bottom: 0;
// background: linear-gradient(to right, #024798, transparent);
// z-index: 0;
// }
&::after {
content: "";
position: absolute;
display: inline-block;
width: 85%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
bottom: 0;
background: linear-gradient(to left, #024798, transparent);
z-index: 0;
}
.container-head {
// height: 40px;
@@ -112,7 +113,7 @@ export default {
gap: 8px;
.container-title {
font-size: 1.18vw;
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
@@ -132,8 +133,8 @@ export default {
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
width: 0.7vw;
height: 0.7vw;
}
.corner.tl {

View File

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

View File

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

View File

@@ -0,0 +1,204 @@
<!--
* @Author: zhp
* @Date: 2024-07-08 13:51:30
* @LastEditTime: 2024-07-19 10:43:18
* @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.7vw;
height: 0.7vw;
}
.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>
<div class="db-body">
<div class="db-left">
<db-container icon="cube" title="FTO投入" @refresh="() => (ftoKey = Math.random())">
<left-container icon="cube" title="FTO投入" @refresh="() => (ftoKey = Math.random())">
<fto-chart :key="ftoKey" />
</db-container>
<db-container icon="chip2" title="芯片投入" @refresh="() => (chipInvestKey = Math.random())">
</left-container>
<left-container icon="chip2" title="芯片投入" @refresh="() => (chipInvestKey = Math.random())">
<chip-invest-chart :key="chipInvestKey" />
</db-container>
</left-container>
</div>
<div class="db-right">
<db-container side="right" icon="chip" title="芯片产出" @refresh="() => (chipYieldKey = Math.random())">
@@ -53,6 +53,7 @@ import store from "@/store";
import DashboardHeader from "./dashboard/components/Header.vue";
import CompanyInfo from "./dashboard/components/CompanyInfo.vue";
import Container from "./dashboard/components/Container.vue";
import leftContainer from "./dashboard/components/leftContainer.vue";
import FtoChart from "./dashboard/charts/Fto.vue";
import ChipInvestChart from "./dashboard/charts/ChipInvest.vue";
import BipvChart from "./dashboard/charts/Bipv.vue";
@@ -69,11 +70,11 @@ const LOCATIONS = [
// 蚌埠2
// { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' },
// 江西 瑞昌
{ x: 60, y: 58, tx: 68, ty: 52,lx:61,ly:61.5,ltx:69.5,lty:52, path: 'factoryData/factory-data' },
{ x: 60, y: 58, tx: 68, ty: 51,lx:61,ly:61.5,ltx:69.3,lty:51.4, path: 'factoryData/factory-data' },
// 湖南 株洲
// { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' },
// 邯郸
{ x: 58, y: 45, tx: 47.4, ty: 34.3, lx: 58.7, ly: 34, ltx: 53.2, lty: 34, path: 'factoryData/hdIndex' },
{ x: 58, y: 45, tx: 48.5, ty: 34.3, lx: 58.7, ly: 34, ltx: 53.2, lty: 34, path: 'factoryData/hdIndex' },
];
// rcLine.style.left = `66.8%`;
// rcLine.style.top = `52%`;
@@ -84,6 +85,7 @@ export default {
name: "Index",
components: {
CompanyInfo,
leftContainer,
ksCompanyInfo: CompanyInfo,
hdCompanyInfo: CompanyInfo,
bbCompanyInfo: CompanyInfo,
@@ -340,7 +342,7 @@ export default {
.db-left,
.db-right {
// width: 420px;
width: 24vw;
width: 24.5vw;
padding: 20px;
display: flex;
flex-direction: column;

View File

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

View File

@@ -1,31 +1,31 @@
<!--
* @Author: zhp
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-06-27 14:56:20
* @LastEditors: DY
* @LastEditTime: 2024-07-30 10:31:35
* @LastEditors: zhp
* @Description:
-->
<template>
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 200px - 31px)">
<div class="app-container" style="padding: 16px 24px 0; height: auto; flex-grow: 1;">
<div class="app-container" style="padding: 16px 16px 0; height: auto; flex-grow: 1;">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<el-form-item label="时间维度" prop="type">
<el-select v-model="listQuery.type" size="small" clearable placeholder="请选择">
<el-select @change="changType" v-model="listQuery.type" size="small" clearable placeholder="请选择">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item v-show="listQuery.type === 0 || listQuery.type === ''" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期">
<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 }">
</el-date-picker>
</el-form-item>
<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 第 WW 周" placeholder="选择周"
<el-date-picker size="small" clearable v-model="listQuery.start" type="week" format="yyyy-MM-dd" placeholder="选择周" :picker-options="{ firstDayOfWeek: 1 }"
style="width: 180px" @change="onValueChange">
</el-date-picker>
<el-date-picker size="small" clearable v-model="listQuery.end" type="week" format="yyyy 第 WW 周" placeholder="选择周"
<el-date-picker size="small" clearable v-model="listQuery.end" type="week" format="yyyy-MM-dd" placeholder="选择周" :picker-options="{ firstDayOfWeek: 1 }"
style="width: 180px" @change="onValueChange">
</el-date-picker>
<!-- <span v-if="listQuery.start && listQuery.end" style="margin-left: 10px">
@@ -39,7 +39,7 @@
</el-form-item>
<el-form-item v-show="listQuery.type === 3" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.start" value-format="yyyy-MM-dd" type="year"
placeholder="开始时间">
placeholder="开始时间" @change="getYear">
</el-date-picker>
~
<el-date-picker size="small" clearable v-model="listQuery.end" value-format="yyyy-MM-dd" type="year" placeholder="结束时间"
@@ -115,7 +115,7 @@ import moment from 'moment'
import ButtonNav from '@/components/ButtonNav'
import basicPage from '@/mixins/basic-page'
import AddOrUpdate from './add-or-updata'
import { factoryList, factoryArray, factoryArray1 } from "@/utils/constants";
import { factoryList, factoryArray, factoryListabbr } from "@/utils/constants";
export default {
components: { lineChart, ButtonNav, AddOrUpdate },
@@ -124,7 +124,7 @@ export default {
return {
factoryList,
factoryArray,
factoryArray1,
factoryListabbr,
listQuery: {
pageSize: 20,
pageNo: 1,
@@ -234,7 +234,7 @@ export default {
{
prop: 'goodRatio',
label: '良品率%',
filter: (val) => val + '%'
filter: (val) => val.toFixed(2) + '%'
},
],
tableData: [],
@@ -253,7 +253,7 @@ export default {
// },
created() {
const today = new Date()
const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
const sevenDaysAgo = new Date(today.getTime() - (6 * 24 * 60 * 60 * 1000))
this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD')
this.listQuery.endDate = moment(today).format('yyyy-MM-DD')
this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate]
@@ -261,6 +261,13 @@ export default {
mounted() {
},
methods: {
changType() {
this.listQuery.endDate = null
this.listQuery.startDate = null
this.listQuery.reportTime = null
this.listQuery.start = null
this.listQuery.end = null
},
otherMethods(val) {
this.detailOrUpdateVisible = true;
this.addOrEditTitle = "详情";
@@ -277,20 +284,14 @@ export default {
this.listQuery.reportTime = []
this.listQuery.start = undefined
this.listQuery.end = undefined
// console.log();
} else {
this.listQuery.startDate = this.listQuery.start
this.listQuery.endDate = this.listQuery.end
}
if (!this.listQuery.start && !this.listQuery.end) {
this.listQuery.startDate = undefined
this.listQuery.endDate = undefined
}
// console.log(e);
},
onValueChange(picker, k) { // 选中近k周后触发的操作
if (this.listQuery.start && this.listQuery.end) {
console.log(this.listQuery.reportTime)
// console.log(this.listQuery.start, this.listQuery.end - this.listQuery.start)
this.date1 = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
this.date2 = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000);
@@ -304,11 +305,15 @@ export default {
this.listQuery.startDate = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
this.listQuery.endDate = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
}
}
if (!this.listQuery.start && !this.listQuery.end) {
console.log(this.listQuery.startDate, this.listQuery.endDate)
} else {
this.listQuery.startDate = undefined
this.listQuery.endDate = undefined
}
// if (!this.listQuery.start && !this.listQuery.end) {
// this.listQuery.startDate = undefined
// this.listQuery.endDate = undefined
// }
},
changeDayTime() {
if (this.listQuery.reportTime) {
@@ -354,7 +359,7 @@ export default {
this.$message.warning('请选择时间维度!')
return
}
if (this.listQuery.startDate === undefined) {
if (!this.listQuery.startDate || !this.listQuery.endDate) {
this.$message.warning('请选择时间范围!')
} else {
await getProduceDataPage(this.listQuery).then(res => {
@@ -364,7 +369,6 @@ export default {
this.listQuery.total = res.data.total
}
})
// 图表
await getproddata(this.listQuery).then(resp => {
if (resp.data?.length > 0) {
@@ -382,94 +386,70 @@ export default {
// x轴数据
xAxisData = Object.keys(data)
// y轴数据
this.factoryArray.forEach(fac => {
let i = 0
while ( i < 3) {
// 下标
const index1 = ['chipYield', 'componentYield', 'bipvProductOutput'][i]
// let oneChart = {}
xAxisData.forEach((x, index) => {
if (this.listQuery.glass.length === 0 || this.listQuery.glass.length === 3) {
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]
},
label: {
show: i === 2 ? true : false,
position: 'top',
formatter(params) {
return fac.name.substring(0, 2)
}
}
}
dataList.forEach(item => {
if (fac.id === item.factory && item.datestr === x) {
series.data[index] = item[index1]
}
})
this.seriesList.push(series)
} else {
this.listQuery.glass.forEach(gl => {
if (gl === i) {
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]
},
label: {
show: true,
position: 'top',
formatter(params) {
if (params.value === 0) {
return ''
} else {
// return ['瑞昌', '邯郸'][params.seriesName.split('-')[1]]
return fac.name.substring(0, 2)
}
}
}
}
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 ++
}
// 构造series
// 玻璃类型 ['chipYield', 'componentYield', 'bipvProductOutput']
const typeArray = (this.listQuery.glass.length === 0 || this.listQuery.glass.length === 3) ? [0, 1, 2] : this.listQuery.glass
// 工厂名称 this.factoryListabbr
const factoryNameArray = (this.listQuery.factory.length === 0 || this.listQuery.factory.length === this.factoryListabbr.length) ? [0, 1] : this.listQuery.factory
const seriesArray = []
factoryNameArray.forEach((fac, facIndex) => {
typeArray.forEach((type, typeIndex) => {
const series = {
data: Array(xAxisData.length).fill(0),
type: 'bar',
stack: String(fac),
barWidth: 16,
itemStyle: {
color: this.colorList[type]
},
name: this.factoryListabbr[fac] + '-' + type
}
seriesArray.push(series)
})
})
console.log('你好', this.seriesList)
this.$refs.lineChart.initChart(xAxisData, this.seriesList)
// 按工厂分
const arrayByFacArray = Object.groupBy(dataList, (member) => member.factory)
// const seriesDataArray = []
let n = 0
Object.values(arrayByFacArray).forEach((item) => {
typeArray.forEach(type => {
const typeName = ['chipYield', 'componentYield', 'bipvProductOutput'][type]
let seriesData = Array(xAxisData.length).fill(0)
item.forEach(it => {
xAxisData.forEach((x, xindex) => {
if (x === it['datestr']) {
seriesData[xindex] = it[typeName]
}
})
})
seriesArray[n].data = seriesData
n ++
})
})
// 添加工厂
const validSeriesArray = []
factoryNameArray.forEach(f => {
const s = {
name: '显示工厂',
data: Array(xAxisData.length).fill(0),
type: 'bar',
stack: String(f),
barWidth: 16,
label: {
show: true,
position: 'top',
// position: f > 0 ? [2, -16] : [-10, -16],
formatter(params) {
return factoryListabbr[f]
}
}
}
validSeriesArray.push(s)
})
this.seriesList = [...seriesArray, ...validSeriesArray]
this.$refs.lineChart.initChart(xAxisData, this.seriesList, factoryNameArray)
},
buttonClick(val) {
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
@@ -535,11 +515,23 @@ export default {
};
</script>
<style scoped>
<style>
/* .blueTip { */
/* padding-bottom: 10px; */
/* } */
/* .blueTi */
.blueTip .el-date-editor .el-range__icon {
font-size: 16px;
color: #0b58ff;
}
.blueTip .el-input__prefix .el-icon-date {
font-size: 16px;
color: #0b58ff;
}
.blueTip .el-input__prefix .el-icon-time {
font-size: 16px;
color: #0b58ff;
}
.blueTip::before{
display: inline-block;
content: '';

View File

@@ -1,8 +1,8 @@
<!--
* @Author: zwq
* @Date: 2022-01-21 14:43:06
* @LastEditors: DY
* @LastEditTime: 2024-06-24 11:13:48
* @LastEditors: zhp
* @LastEditTime: 2024-07-23 09:45:30
* @Description:
-->
<template>
@@ -73,8 +73,7 @@ export default {
this.chart = null
},
methods: {
initChart(xAxis, seriesList) {
console.log('2', xAxis, seriesList)
initChart(xAxis, seriesList, facs) {
if (xAxis.length === 0) {
this.chart.clear()
}
@@ -94,41 +93,48 @@ export default {
itemHeight: 10,
itemGap: 40,
formatter(name) {
return name.split('-')[0]
return ['玻璃芯片', '标准组件', 'BIPV'][name.split('-')[1]]
},
data: ['玻璃芯片-0', '标准组件-0', 'BIPV-0']
data: ['瑞昌-0', '瑞昌-1', '瑞昌-2']
},
tooltip: {
trigger: 'axis',
formatter: function(params) {
axisPointer: {
type: 'shadow',
color: "rgba(237,237,237,0.5)"
},
formatter(params) {
let str = ''
facs.forEach(ele => {
str += `<div style="width: 60px; text-align: right">${ factoryListabbr[ele] }</div>`
})
let result = `
<div style="width: 270px; display: flex">
<div style="width: 150px">${params[0].name}</div>
<div style="width: 60px">${factoryListabbr[0]}</div>
<div style="width: 60px">${factoryListabbr[1]}</div>
${ str }
</div>`
const newArray = params.map(p => {
return {
glass: p.seriesName.split('-')[0], // 玻璃类型
factoryName: factoryListabbr[p.seriesName.split('-')[1]], // 工厂名称
value: p.value,
name: p.name,
marker: p.marker
const analyzeArray = params.filter(p => p.seriesName !== '显示工厂').map(item => {
const obj = {
glass: ['玻璃芯片', '标准组件', 'BIPV'][item.seriesName.split('-')[1]], // 玻璃类型
factoryName: item.seriesName.split('-')[0], // 工厂名称
value: item.value,
name: item.name,
marker: item.marker,
color: item.color
}
return obj
})
const analyzeList = Object.groupBy(newArray, (member) => member.glass)
const analyzeList = Object.groupBy(analyzeArray, (member) => member.glass)
for (let g in analyzeList) {
// date => 玻璃类型
let oneData = `<div style="width: 270px; display: flex">
<div style="width: 150px">${analyzeList[g][0].marker} ${g}</div>`
for (let fac of factoryListabbr) {
<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>${g}</div></div>`
let goodNum = 0
for (let ana of analyzeList[g]) {
if (ana.factoryName === fac && ana.value !== 0) {
goodNum = ana.value
}
}
oneData += `<div style="width: 60px">${goodNum}</div>`
for (let ana of analyzeList[g]) {
goodNum = ana.value
oneData += `<div style="width: 60px; text-align: right">${goodNum}</div>`
}
result = result + oneData + '</div>'
}
@@ -150,12 +156,12 @@ export default {
yAxis: [
{
type: 'value',
name: '单位:'
name: '单位:'
}
],
grid: {
top: '10%',
left: "1%",
left: "2%",
right: "5%",
bottom: "0%",
containLabel: true

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-06-20 16:41:48
* @LastEditTime: 2024-07-02 16:35:01
* @LastEditors: DY
* @Description:
-->
@@ -691,11 +691,22 @@ export default {
};
</script>
<style scoped>
<style>
/* .blueTip { */
/* padding-bottom: 10px; */
/* } */
/* .blueTi */
.blueTip .el-date-editor .el-range__icon {
font-size: 16px;
color: #0b58ff;
}
.blueTip .el-input__prefix .el-icon-date {
font-size: 16px;
color: #0b58ff;
}
.blueTip .el-input__prefix .el-icon-time {
font-size: 16px;
color: #0b58ff;
}
.blueTip::before{
display: inline-block;
content: '';

View File

@@ -1,15 +1,15 @@
<!--
* @Author: zhp
* @Date: 2023-11-06 15:15:30
* @LastEditTime: 2024-06-27 14:50:21
* @LastEditors: DY
* @LastEditTime: 2024-07-08 15:06:49
* @LastEditors: zhp
* @Description:
-->
<template>
<el-drawer class="drawer" :visible.sync="visible" size="85%" @closed="$emit('destroy')">
<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>
<div ref="detail" class="detailBox">
<el-row :gutter="20">
@@ -69,51 +69,60 @@
</el-col>
<el-col :span="3">
<p class="title">开始时间</p>
<p class="text">{{ dataForm.startDate?.length > 0 ? dataForm.startDate[0] + '-' + dataForm.startDate[1] + '-' + dataForm.startDate[2] : '' }}</p>
<p class="text">{{ dataForm.startDate?.length > 0 ? dataForm.startDate[0] + '-' + dataForm.startDate[1] + '-'
+ dataForm.startDate[2] : '' }}</p>
</el-col>
<el-col :span="3">
<p class="title">完成时间</p>
<p class="text">{{ dataForm.endDate?.length > 0 ? dataForm.endDate[0] + '-' + dataForm.endDate[1] + '-' + 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>
<p class="text">{{ dataForm.endDate?.length > 0 ? dataForm.endDate[0] + '-' + dataForm.endDate[1] + '-' +
dataForm.endDate[2] : '' }}</p>
</el-col>
</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>
</el-drawer>
@@ -147,6 +156,7 @@ export default {
barChart: null,
equipmentLineChart: null,
visible: false,
loading:true,
dataForm: {},
colorList: ['#3E8EF7', '#69E6D8', '#F7C739'] // pie颜色
}
@@ -167,17 +177,17 @@ export default {
const pdf = new jsPDF('l', 'pt', 'a4');
const canvas = document.createElement('canvas')
const element = this.$refs['detail'];
const width = pdf.internal.pageSize.getWidth()
const height = pdf.internal.pageSize.getHeight()
canvas.width = width * 2
canvas.height = height * 2
canvas.style.width = width + 'px'
canvas.style.height = height + 'px'
const options = {
// scale: 2,
dpi: 300,
@@ -193,12 +203,13 @@ export default {
},
init(id) {
this.visible = true
this.$nextTick(() => {
this.initLineChart()
})
// this.$nextTick(() => {
// this.initLineChart()
// })
if (id) {
getWorkOrderDetail(id).then(res => {
if (res.code === 0) {
this.loading = false
this.dataForm = res.data.prodWorkOrderDO
this.buildChart(this.dataForm)
// 在制品
@@ -225,7 +236,7 @@ export default {
// this.initEqLineChart(xAxisList, yAxisList)
// }
// })
}
},
trend() {
@@ -248,9 +259,9 @@ export default {
this.initChart(barList)
// 良品率
const pieList = [
{ value: data.actualProduction, name: '实际产出' },
{ value: data.wasteNum, name: '废品数量' },
{ value: data.reworkNum, name: '待再加工数量' }
{ value: data.actualProduction ? data.actualProduction : 0, name: '实际产出' },
{ value: data.wasteNum ? data.wasteNum : 0, name: '废品数量' },
{ value: data.reworkNum ? data.reworkNum :0, name: '待再加工数量' }
]
this.initPieChart(pieList)
},
@@ -266,11 +277,11 @@ export default {
tooltip: {
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,
grid: {
top: '15%',
left: 0,
left: 20,
right: '10%',
bottom: 0,
containLabel: true
@@ -293,7 +304,7 @@ export default {
{
data: barData,
type: 'bar',
barWidth: '40%',
barWidth: 16,
label: {
show: true,
position: 'top'
@@ -328,7 +339,14 @@ export default {
label: {
show: true,
position: 'outside',
formatter: '{d|{d}%} \n {b|{b}}',
formatter: (params) => {
console.log(params)
let res = ''
// for (let i in params) {
res += `${params.percent ? params.percent : 0}% \n ${params.name}`
// }
return res
},
rich: {
d: {
color: 'inherit', // 系列色
@@ -356,11 +374,11 @@ export default {
tooltip: {
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,
grid: {
top: '15%',
left: 0,
left: 30,
right: 0,
bottom: 0,
containLabel: true
@@ -384,7 +402,7 @@ export default {
{
data: yAxisList,
type: 'bar',
barWidth: '50%',
barWidth: 16,
label: {
show: true,
position: 'top'

View File

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

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

@@ -0,0 +1,108 @@
<!--
* @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

@@ -0,0 +1,107 @@
<!--
* @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

@@ -0,0 +1,109 @@
<!--
* @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
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-06-24 15:08:34
* @LastEditors: DY
* @LastEditTime: 2024-07-09 11:08:43
* @LastEditors: zhp
* @Description:
-->
<template>
@@ -10,7 +10,7 @@
<el-row :gutter="10">
<el-col :span="4">
<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 style="padding: 10px 0; width: 100%">
<div class="topDiv">
@@ -27,13 +27,14 @@
</el-col>
<el-col :span="20">
<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 style="padding: 10px 0; width: 100%" v-for="(item, index) in factorys" :key="index">
<div class="topDiv">
<div style="width: 4px; height: 52px; background: #3A79FF; border-radius: 2px;"></div>
<div class="centerDiv">
<span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ factoryNum[index] }}</span>
<span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ factoryNum[index]
}}</span>
<span style="font-size: 14px; color: rgba(0,0,0,0.85);">{{item}}</span>
</div>
<svg-icon icon-class="factoryWorkOrder" style="width: 26px; height: 26px" />
@@ -49,27 +50,28 @@
<div class="app-container" style="margin-top: 8px;flex-grow: 1;">
<!-- <search-bar :formConfigs="formConfig2" ref="searchBarForm" style="margin-bottom: 0" /> -->
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
:table-data="tableData" :max-height="tableH">
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData"
:max-height="tableH">
<method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
:method-list="tableBtn" @clickBtn="handleClick" />
</base-table>
<pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList"
/>
<pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
@pagination="getDataList" />
</div>
<add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date"
@refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
<div id="dayRepDom" style="position: absolute;top:0;display: none;">
<ExportDayReport :beProcessObj="beProcessObj" :produceData="produceData" :hisObj="hisObj" :pieList="pieList" />
</div>
<add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
</div>
</template>
<script>
// import { parseTime } from '../../core/mixins/code-filter';
import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/order';
import { getWorkOrderPage, exportExcel, getOverView, getWorkOrderDetail } from '@/api/produceData/order';
// import inputTable from './inputTable.vue';
import lineChart from './lineChart';
import ExportDayReport from './dayReportComponents/ExportDayReport'
import moment from 'moment'
import tableHeightMixin from "@/mixins/tableHeightMixin";
// import ButtonNav from '@/components/ButtonNav'
@@ -78,11 +80,12 @@ import AddOrUpdate from './add-or-updata';
import { factoryList, factoryArray } from "@/utils/constants";
// import { publicFormatter } from "@/utils/dict";
import statusChart from "./statusChart.vue";
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
// import FileSaver from 'file-saver'
// import * as XLSX from 'xlsx'
export default {
components: { lineChart, AddOrUpdate },
components: { lineChart, AddOrUpdate, ExportDayReport },
mixins: [basicPage, tableHeightMixin],
data() {
return {
@@ -91,6 +94,16 @@ export default {
inputNum: 0,
heightNum: 180,
factoryList,
produceData: [],
pieList:[],
hisObj: {
seriesList: [],
dateList:[],
},
beProcessObj: {
xAxisList: [],
yAxisList:[]
},
factoryArray,
listQuery: {
pageSize: 20,
@@ -106,6 +119,10 @@ export default {
type: 'detail',
btnName: '详情',
},
{
type: 'export',
btnName: '导出',
},
// {
// type: 'delete',
// btnName: '删除',
@@ -142,15 +159,15 @@ export default {
selectOptions: [
{
label: '未开始',
value: 1
value: 0
},
{
label: '生产中',
value: 2
value: 1
},
{
label: '已完成',
value: 3
value: 2
}
],
labelField: "label",
@@ -242,7 +259,7 @@ export default {
{
prop: 'productionProgress',
label: '生产进度',
filter: (val) => (val * 100) + '%'
filter: (val) => (val * 100).toFixed(2) + '%'
},
{
prop: 'orderStatus',
@@ -281,6 +298,29 @@ export default {
this.getOverView()
},
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().then(res => {
// this.data = res.data
@@ -299,11 +339,46 @@ export default {
})
},
otherMethods(val) {
this.detailOrUpdateVisible = true;
// this.addOrEditTitle = "详情";
this.$nextTick(() => {
this.$refs.detailOrUpdate.init(val.data.id);
});
console.log(val)
if (val.type === 'detail') {
this.detailOrUpdateVisible = true;
// this.addOrEditTitle = "详情";
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() {
const res = await getWorkOrderPage(this.listQuery)

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -75,7 +75,7 @@ export default {
: `<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:180px;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;'>${
`<span style='color:rgba(0,0,0,0.48);width:150px;display:inline-block;font-size:14px;text-align:right'>${
params[i].name === "%"
? (params[i].value ? params[i].value.toFixed(2) : "0.00") +
params[i].name

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-19 15:28:34
* @LastEditTime: 2024-07-02 08:41:11
* @LastEditTime: 2024-07-30 10:56:01
* @LastEditors: zhp
* @Description:
-->
@@ -51,20 +51,24 @@ export default {
},
},
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>`;
for (var i = 0, l = params.length; i < l; i++) {
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
`${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 === "综合良率"
`<span style='color:rgba(0,0,0,0.48);width:100px;display:inline-block;font-size:14px;text-align:right'>${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 ? params[i].value : 0) + "MW"
: (params[i].value ? params[i].value : 0) + "片"
? (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;
@@ -234,7 +238,7 @@ export default {
text-align: right;
position: relative;
// right: 30;
top: -10px;
top: 0px;
.itemData {
display: inline-block;
margin-right: 10px;

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-20 16:13:36
* @LastEditTime: 2024-07-02 08:40:56
* @LastEditTime: 2024-07-30 16:04:05
* @LastEditors: zhp
* @Description:
-->
@@ -58,13 +58,14 @@ export default {
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(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].data.titleValue ? params[i].data.titleValue.toFixed(2) : 0.0) + "%"
`<span style='color:rgba(0,0,0,0.48);width:auto;display:inline-block;font-size:14px;text-align:right'>${params[i].seriesName === "综合良率"
? (params[i].data.titleValue ? parseFloat(params[i].data.titleValue.toFixed(2)) : 0.0) + "%"
: params[i].seriesName === "转化效率"
? (params[i].data.titleValue ? params[i].data.titleValue.toFixed(2) : 0.0) + "%"
? (params[i].data.titleValue ? parseFloat(params[i].data.titleValue.toFixed(2)) : 0.0) + "%"
: params[i].seriesName.search('总功率') != -1
? (params[i].data.titleValue ? params[i].data.titleValue : 0) + "MW"
: (params[i].data.titleValue ? params[i].data.titleValue : 0) + "片"
? (params[i].data.titleValue ? parseFloat(params[i].data.titleValue.toFixed(2)) : 0) + "MW"
: params[i].seriesName.search('BIPV') != -1
? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "㎡" : (params[i].data.titleValue ? params[i].data.titleValue : 0) + "片"
}</span>`;
}
return res;
@@ -236,7 +237,7 @@ export default {
position: relative;
// right: 30;
// top: 10px;
top: -10px;
top: 0px;
.itemData {
display: inline-block;
margin-right: 10px;

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-20 16:13:52
* @LastEditTime: 2024-07-02 08:41:23
* @LastEditTime: 2024-07-30 10:42:10
* @LastEditors: zhp
* @Description:
-->
@@ -38,7 +38,7 @@ export default {
grid: {
left: 60,
right: 0,
bottom: 30,
bottom: 31,
top: 30,
containLabel:true,
},
@@ -51,20 +51,20 @@ export default {
},
},
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/>" +
`<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='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率"
`<span style='color:rgba(0,0,0,0.48);width:150px;display:inline-block;font-size:14px;text-align:right'>${params[i].seriesName === "综合良率"
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
: params[i].seriesName === "转化效率"
? params[i].value+ "%"
? parseFloat(params[i].value.toFixed(2)) + "%"
: params[i].seriesName.search('总功率') != -1
? (params[i].value ? params[i] : 0) + "MW"
: (params[i].value ? params[i].value : 0) + "片"
? (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;
@@ -214,7 +214,7 @@ export default {
text-align: right;
position: relative;
// right: 30;
top: -10px;
top: 0px;
// top: -10px;
.itemData {
display: inline-block;

View File

@@ -0,0 +1,278 @@
<!--
* @Author: zhp
* @Date: 2024-07-09 16:06:13
* @LastEditTime: 2024-07-30 10:42:16
* @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);width:150px;display:inline-block;font-size:14px;text-align:right'>${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",
minValueSpan:2,
// 是否锁定选择区域(或叫做数据窗口)的大小
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>

Some files were not shown because too many files have changed in this diff Show More