59 Commits

Author SHA1 Message Date
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
78 changed files with 3297 additions and 1052 deletions

View File

@@ -22,7 +22,7 @@ export default {
},
computed: {
changeColor() {
console.log(this.$route);
// 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 {
@@ -34,19 +34,13 @@ export default {
changeColor(val) {
if (val == true) {
let item = document.getElementsByClassName('el-breadcrumb__separator')
for (let i in item) {
console.log(item[i])
if (item[i]) {
item[i].style.color = 'rgba(255, 255, 255, 0.45)'
}
}
// 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')
for (let i in item) {
if (item[i]) {
// item[i].style.color = '#c0c4cc'
}
}
item[0].style.color = ''
item[1].style.color = ''
}
},
$route(route) {
@@ -104,9 +98,16 @@ export default {
cursor: text;
}
}
.app-breadcrumb .el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
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-11 13:56:19
* @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, 1)' : '' ">
<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,7 +1,7 @@
<template>
<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 id="hamburger-container" style="color: blue;" :is-active="sidebar.opened" class="hamburger-container"
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
@toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
@@ -67,17 +67,21 @@ export default {
}
},
watch: {
changeColor(val) {
if (val == true) {
let svg = document.getElementsByClassName('hamburger')
console.log('svg',svg);
svg[0].setAttribute('fill', 'rgba(255, 255, 255, 1)')
} else {
let svg = document.getElementsByClassName('hamburger')
console.log('svg', svg);
svg[0].setAttribute('fill', '')
}
},
// 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() {

View File

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

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>
@@ -70,22 +70,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 = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
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='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
`<span style='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>`;
}
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;
},
},
xAxis: {
@@ -98,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,
@@ -133,7 +137,7 @@ export default {
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -168,7 +172,7 @@ export default {
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -214,18 +218,18 @@ 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;
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()
},

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

@@ -0,0 +1,226 @@
<!--
* @Author: zhp
* @Date: 2024-07-09 15:07:50
* @LastEditTime: 2024-07-09 15:41:38
* @LastEditors: zhp
* @Description:
-->
<!--
* @Author: zhp
* @Date: 2024-06-05 09:43:51
* @LastEditTime: 2024-07-09 15:06:52
* @LastEditors: zhp
* @Description:
-->
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
background: none;
color: #fff;
cursor: pointer;
position: absolute;
top: 8px;
right: 8px;
" @click="$emit('refresh')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
style="width: 24px; height: 24px">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]">
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-left: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 10%,
#024798 20%,
transparent 90%) 1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
right: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 100%,
transparent
);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 90%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
bottom: 0;
background: linear-gradient(to right, transparent 60%, #024798 98%, transparent 90%);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid transparent;
border-bottom: .6vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
border-left: 0.532vw solid transparent;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid #0175dc;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
// transform: rotate(-90deg);
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

View File

@@ -0,0 +1,219 @@
<!--
filename: Container.vue
author: liubin
date: 2024-04-09 10:44:09
description:
-->
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
background: none;
color: #fff;
cursor: pointer;
position: absolute;
top: 8px;
right: 8px;
" @click="$emit('refresh')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
style="width: 24px; height: 24px">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]">
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-right: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 10%,
#024798 20%,
transparent 90%) 1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 100%,
transparent
);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 95%;
height: 0.31415vh;
border-radius: 2px;
right: 3%;
bottom: 0;
background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid #0175dc;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
// transform: rotate(-90deg);
border-left: 0.532vw solid transparent;
border-bottom: .6vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

View File

@@ -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-19 16:11:37
* @LastEditors: zhp
* @Description:
-->
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
background: none;
color: #fff;
cursor: pointer;
position: absolute;
top: 8px;
right: 8px;
" @click="$emit('refresh')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
style="width: 24px; height: 24px">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]">
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-left: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 5%,
#024798 10%,
transparent 90%) 1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
right: 0;
background: radial-gradient(
circle at center,
#024798 5%,
#024798 100%,
transparent
);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 90%;
height: 0.31415vh;
border-radius: 2px;
left: 10%;
bottom: 0;
background: linear-gradient(to right,transparent 60%, #024798 95%, transparent 97%);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.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: 0.11415vw solid;
border-image: linear-gradient(to bottom,transparent 5%,
#024798 10%,
transparent 90%) 1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 100%,
transparent
);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 95%;
height: 0.31415vh;
border-radius: 2px;
right: 3%;
bottom: 0;
background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.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-07-03 14:08:52
* @LastEditTime: 2024-07-19 16:08:27
* @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>
@@ -71,22 +71,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 = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
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='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
`<span style='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>`;
}
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;
},
},
xAxis: {
@@ -99,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,
@@ -134,7 +138,7 @@ export default {
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -169,7 +173,7 @@ export default {
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -215,18 +219,18 @@ 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;
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()
},

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-19 16:11:59
* @LastEditors: zhp
* @Description:
-->
@@ -73,6 +73,7 @@ export default {
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
@@ -80,23 +81,25 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-left: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 10%,
#024798 20%,
transparent 90%) 1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
right: 0;
background: radial-gradient(circle at center,
#024798 2%,
#024798 100%,
transparent);
z-index: 1;
}
@@ -104,12 +107,12 @@ export default {
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%, #024798 95%, transparent 97%);
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,13 +82,17 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-right: 0.11415vw solid;
border-image: linear-gradient(to bottom,transparent 10%,
#024798 20%,
transparent 90%) 1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
@@ -94,7 +100,7 @@ export default {
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
#024798 100%,
transparent
);
z-index: 1;
@@ -104,12 +110,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%, #024798 98%, transparent 98%);
z-index: 0;
}
@@ -122,7 +128,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 +148,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-19 16:14:07
* @LastEditors: zhp
* @Description:
-->
@@ -99,6 +99,8 @@ export default {
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
@@ -106,23 +108,25 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-right: 0.11415vw solid;
border-image: linear-gradient(to bottom, transparent 10%,
#024798 20%,
transparent 90%) 1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
background: radial-gradient(circle at center,
#024798 2%,
#024798 100%,
transparent);
z-index: 1;
}
@@ -133,7 +137,7 @@ export default {
width: 60%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
left: 6%;
bottom: 0;
background: linear-gradient(to right, #024798, transparent);
z-index: 0;
@@ -148,7 +152,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 +172,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] },
];
}

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] },
];
}

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 13:22:43
* @LastEditTime: 2024-07-05 09:50:14
* @LastEditTime: 2024-07-19 16:10:10
* @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>
@@ -70,22 +70,32 @@ 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 = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
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/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
`${params[i].seriesType === "line"
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span>
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>`
}` +
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
}
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;
},
},
xAxis: {
@@ -98,23 +108,23 @@ 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,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -132,7 +142,7 @@ export default {
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -167,7 +177,7 @@ export default {
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -247,11 +257,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 + '%'
@@ -261,11 +271,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()
},
@@ -353,10 +363,10 @@ 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 {
.legend-item:nth-child(1):before {
// width: 12px;
// height: 2px;
width: 1vw;
@@ -365,11 +375,11 @@ export default {
position: absolute;
top: 50%;
// left: -16px;
left: -0.951vw;
left: -1.3vw;
transform: translateY(-50%);
}
.legend-item:nth-child(3):after {
.legend-item:nth-child(1):after {
background-color: #f3c000;
content: "";
display: inline-block;
@@ -380,15 +390,15 @@ export default {
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -0.851vw;
left: -1.13vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
.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;
}
}

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-23 15:50:44
* @LastEditTime: 2024-07-05 09:49:35
* @LastEditTime: 2024-07-19 16:10:19
* @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>
@@ -70,22 +70,32 @@ 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 = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
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/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
`${params[i].seriesType === "line"
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span>
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>`
}` +
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
}
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;
},
},
xAxis: {
@@ -98,23 +108,23 @@ 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,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -132,7 +142,7 @@ export default {
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -167,7 +177,7 @@ export default {
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -247,11 +257,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 + '%'
@@ -261,11 +271,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()
},
@@ -352,43 +362,43 @@ 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 {
// 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.3vw;
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):after {
background-color: #f3c000;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -1.13vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
}
</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 + '%'
// }

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-09 15:02:46
* @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 + '%'
// }

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

@@ -24,18 +24,18 @@
title: {
text: titleValue,
left: "48%",
top: "37%",
top: "middle",
textAlign: "center",
textStyle: {
fontWeight: 600,
fontSize: 36,
color: "#fffd",
color: "rgba(223,241,254,.8)",
},
subtext: `\u2002${yesterday + '日良率'}\u2002`,
subtextStyle: {
fontSize: 16,
fontWeight: 100,
color: "#fffd",
color: "rgba(255,255,255,.7)",
align: "right",
},
},
@@ -67,8 +67,15 @@
value: currentSum,
name: currentName,
tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
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: {
@@ -93,8 +100,15 @@
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
name: currentName,
tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
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 },
@@ -118,8 +132,15 @@
value: previousSum,
name: preName,
tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
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: {
@@ -144,8 +165,15 @@
value:previousSum === 0 ? 1 : 0,
name: preName,
tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
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

@@ -55,7 +55,7 @@ export default {
options: {
color: ["#FFD160", "#2760FF", "#12FFF5"],
grid: {
left: "6%",
left: "9%",
right: "3%",
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 ? params[i].value + '片' : 0 + '片'}</span>`;
`<span style='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);
@@ -119,16 +124,16 @@ export default {
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,
@@ -196,7 +201,7 @@ export default {
// { offset: 1, color: "#12FFF5" + "00" },
// ]),
// },
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -240,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-03 14:10:06
* @LastEditTime: 2024-07-18 16:48:10
* @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,7 +56,7 @@ export default {
actualOptions: null,
options: {
grid: {
left: "5%",
left: "8%",
right: "0%",
bottom: "3%",
top: "15%",
@@ -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 ? params[i].value + '片' : 0 + '片'}</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='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,8 +130,8 @@ export default {
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
data: this.xAxis,
},
@@ -134,16 +139,16 @@ export default {
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,
@@ -161,7 +166,7 @@ export default {
{
name: "FTO", // this.series[0].name,
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -196,7 +201,7 @@ export default {
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -228,7 +233,7 @@ export default {
{
name: "", // "2024年目标值",
type: "line",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color:'#f3c000'
@@ -255,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 + '%'
@@ -269,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()
},
@@ -350,7 +355,7 @@ export default {
.legend-item {
position: relative;
// font-size: 12px;
font-size: 1.2vw;
margin-right:1.2vw;
color: #DFF1FE;
&::before {

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,7 @@
<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,7 +40,7 @@ export default {
evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
data: [],
rowNum: 12,
fontSize:14,
fontSize:16,
waitTime: 3000,
columnWidth: [150],
align: ["left"],
@@ -100,20 +100,20 @@ 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:16px' 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
`<span style="display:inline-block;width:45px;color: rgba(223,241,254,.8)">${this.prodOrder[i].productionProgress
? this.prodOrder[i].productionProgress.toFixed(2) * 100 + "%"
: "0%"
}</span>

View File

@@ -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 = {};

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

@@ -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,6 +78,8 @@ export default {
</script>
<style scoped lang="scss">
.copilot-container {
height: 100%;
flex: 1;
@@ -85,22 +87,22 @@ export default {
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
border-right: 0.11415vw solid;
border-image: linear-gradient(to bottom,transparent 0%,rgba(5, 138, 237, .7) 40%, rgba(2, 82, 215, 0.24) 70%,) 71 71;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
height: 96%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(circle at center,
#024798 2%,
#024798 100%,
transparent);
z-index: 1;
}
@@ -108,12 +110,12 @@ export default {
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 10%, #024798 95%, transparent 98%);
z-index: 0;
}
@@ -126,7 +128,7 @@ export default {
gap: 8px;
.container-title {
font-size: 1.18vw;
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
@@ -146,8 +148,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-05-20 13:32:59
* @LastEditTime: 2024-06-17 16:42:12
* @LastEditTime: 2024-07-19 16:05:46
* @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:
-->
@@ -64,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,
@@ -16,25 +18,27 @@ export default ({
},
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',
// 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,.8)",
},
subtext: `\u2002${subtitle}\u2002`,
subtextStyle: {
fontSize: 14,
fontSize: subtitleSize,
fontWeight: 100,
color: "#fffd",
color: "rgba(255,255,255,.7)",
align: "right",
},
},
@@ -43,8 +47,8 @@ export default ({
{
type: "pie",
name: "当前目标",
radius: ["80%", "90%"],
center: ["50%", "52%"],
radius: ["74%", "86%"],
center: ["50%", "48%"],
emptyCircleStyle: {
color: "#042c5f33",
},
@@ -52,8 +56,8 @@ export default ({
// 数据 series
{
type: "pie",
radius: ["80%", "90%"],
center: ["50%", "52%"],
radius: ["74%", "86%"],
center: ["50%", "48%"],
avoidLabelOvervlap: false,
label: {
show: false,
@@ -66,9 +70,16 @@ export default ({
value: currentSum,
name: currentName,
selected: false,
tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
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",
@@ -91,9 +102,16 @@ export default ({
{
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
name: currentName,
tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
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 },
@@ -103,8 +121,8 @@ export default ({
// 数据 series2 - 2023累计
{
type: "pie",
radius: ["70%", "80%"],
center: ["50%", "52%"],
radius: ["61%", "74%"],
center: ["50%", "48%"],
avoidLabelOvervlap: false,
label: {
show: false,
@@ -118,8 +136,15 @@ export default ({
name: preName,
selected: false,
tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
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",
@@ -143,9 +168,16 @@ export default ({
value:previousSum === 0 ? 1 : 0,
name: preName,
tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
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

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-07-04 08:38:11
* @LastEditTime: 2024-07-18 16:37:41
* @LastEditors: zhp
* @Description:
-->
@@ -61,23 +61,8 @@ 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 = ``;
// for (var i = 0, l = params.length; i < l; i++) {
// let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// // console.log(item.color, color);
// res +=
// // `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
// `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` +
// `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
// }
// console.log('res',res)
// return res;
// },
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色手动置为透明
extraCssText: 'padding:0;border-width:0',
},
title: {
text: "0%",
@@ -91,7 +76,7 @@ export default {
},
subtext: `\u2002${year}年累计产出\u2002`,
subtextStyle: {
fontSize: 12,
fontSize: 15,
fontWeight: 100,
color: "#fffd",
align: "right",
@@ -127,7 +112,6 @@ export default {
name: `${year}累计产出`,
selected: false,
tooltip: {
formatter: null,
},
itemStyle: {
borderJoin: "round",
@@ -151,7 +135,6 @@ export default {
value: 0,
name: `${year}目标`,
tooltip: {
formatter: null,
},
itemStyle: { color: "transparent" },
label: { show: false },
@@ -176,7 +159,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",
@@ -200,7 +193,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 },
@@ -263,34 +264,65 @@ export default {
this.options.series[1].data[0].value = 0;
this.options.series[1].data[1].value = 1;
this.options.series[1].data[0].tooltip.formatter =
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
this.options.series[1].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
`<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 {
this.options.series[1].data[0].value = this.output.current;
this.options.series[1].data[1].value =
this.output.target - this.output.current;
this.options.series[1].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`;
this.options.series[1].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + ''}</span>`;
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) {
this.options.series[2].data[0].value = 0;
this.options.series[2].data[1].value = 1;
this.options.series[2].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
this.options.series[2].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + ''}</span>`;
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 {
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 = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`;
this.options.series[2].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year - 1 + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + ''}</span>`;
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;

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,25 +64,32 @@ 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 = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
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;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
`<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>`;
}
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: {
type:'category',
axisTick: {
show: false,
},
@@ -101,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,
@@ -137,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
}
},
@@ -181,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: {
@@ -260,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,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-07-03 14:13:59
* @LastEditTime: 2024-07-19 15:25:37
* @LastEditors: zhp
* @Description:
-->
@@ -15,19 +15,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 +56,7 @@ export default {
isFullscreen: false,
options: {
grid: {
left: "5%",
left: "6%",
right: "4%",
bottom: "0",
top: "18%",
@@ -79,23 +70,35 @@ 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',
confine:true,
backgroundColor: 'rgba(50,50,50,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)'>${params[0].axisValueLabel}</span>`;
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;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
`${params[i].seriesType === "line"
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:42.3%;left:4%;'></span>
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:38.82%;left:5%;'></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>`;
}
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;
},
},
xAxis: {
axisTick: {
@@ -107,25 +110,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,
@@ -178,7 +181,7 @@ export default {
{
name: "", // "2023年",
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -213,7 +216,7 @@ export default {
{
name: "", // "2024年",
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -253,9 +256,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) {
@@ -318,13 +321,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 {
@@ -334,11 +337,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

@@ -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: 2024-04-15 10:49:13
* @LastEditTime: 2024-07-05 09:21:12
* @LastEditors: zhp
* @LastEditTime: 2024-07-24 14:48:25
* @LastEditors: DY
* @Description:
-->
<template>
@@ -17,15 +17,15 @@
</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="daterange" range-separator="至"
start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期" :picker-options="{ }">
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 } 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,
@@ -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]
@@ -265,6 +265,8 @@ export default {
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;
@@ -282,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);
@@ -309,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) {
@@ -359,7 +359,7 @@ export default {
this.$message.warning('请选择时间维度!')
return
}
if (!this.listQuery.startDate) {
if (!this.listQuery.startDate || !this.listQuery.endDate) {
this.$message.warning('请选择时间范围!')
} else {
await getProduceDataPage(this.listQuery).then(res => {
@@ -385,110 +385,71 @@ export default {
this.seriesList = []
// x轴数据
xAxisData = Object.keys(data)
let arr = []
if (this.listQuery.factory.length === 0) {
arr = this.factoryArray
} else {
this.listQuery.factory.forEach((ele, index) => {
let i = this.factoryArray.findIndex((item) => item.id == ele)
if (i != -1) {
arr.push({
id: this.factoryArray[i].id,
name: this.factoryArray[i].name
})
// 构造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)
})
}
// y轴数据
arr.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 ++
}
})
console.log('你好', this.seriesList)
this.$refs.lineChart.initChart(xAxisData, this.seriesList,arr)
// 按工厂分
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;

View File

@@ -1,8 +1,8 @@
<!--
* @Author: zwq
* @Date: 2022-01-21 14:43:06
* @LastEditors: zhp
* @LastEditTime: 2024-07-04 09:37:49
* @LastEditors: DY
* @LastEditTime: 2024-07-16 18:41:27
* @Description:
-->
<template>
@@ -73,7 +73,7 @@ export default {
this.chart = null
},
methods: {
initChart(xAxis, seriesList,arr) {
initChart(xAxis, seriesList, facs) {
if (xAxis.length === 0) {
this.chart.clear()
}
@@ -93,9 +93,9 @@ 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',
@@ -103,48 +103,41 @@ export default {
type: 'shadow',
color: "rgba(237,237,237,0.5)"
},
formatter: function (params) {
// console.log(params)
formatter(params) {
let str = ''
arr.forEach(ele => {
str += `<div style="width: 60px; text-align: right">${ele.name.substring(0, 2) }</div>`
facs.forEach(ele => {
str += `<div style="width: 60px; text-align: right">${ factoryListabbr[ele] }</div>`
})
console.log(str);
let result = `
<div style="width: 270px; display: flex">
<div style="width: 150px">${params[0].name}</div>
${str}
${ str }
</div>`
const newArray = params.map(p => {
console.log(factoryListabbr[p.seriesName.split('-')[1]], p.seriesName.split('-')[0])
return {
glass: p.seriesName.split('-')[0], // 玻璃类型
factoryName: arr[p.seriesName.split('-')[1]], // 工厂名称
value: p.value,
name: p.name,
marker: p.marker,
color: p.color
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; 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>`
for (let fac of arr) {
let goodNum = 0
for (let ana of analyzeList[g]) {
if (ana.factoryName === fac && ana.value !== 0) {
goodNum = ana.value
}
}
for (let ana of analyzeList[g]) {
goodNum = ana.value
oneData += `<div style="width: 60px; text-align: right">${goodNum}</div>`
}
result = result + oneData + '</div>'
}
// console.log('result', result);
return result
}
},

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2023-11-06 15:15:30
* @LastEditTime: 2024-07-05 15:16:01
* @LastEditTime: 2024-07-08 15:06:49
* @LastEditors: zhp
* @Description:
-->
@@ -9,7 +9,7 @@
<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">
@@ -304,7 +304,7 @@ export default {
{
data: barData,
type: 'bar',
barWidth: '40%',
barWidth: 16,
label: {
show: true,
position: 'top'
@@ -402,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,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-07-08 08:50:26
* @LastEditTime: 2024-07-09 11:08:43
* @LastEditors: zhp
* @Description:
-->
@@ -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: '删除',
@@ -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

@@ -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,
@@ -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(parseFloat(val[i].target.toFixed(2)) || 0);
barData2.push(parseFloat(val[i].queryValue.toFixed(2)) || 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(parseFloat(val[i].target.toFixed(2)) || 0);
barData4.push(parseFloat(val[i].queryValue.toFixed(2)) || 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

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-19 15:28:34
* @LastEditTime: 2024-07-05 13:43:22
* @LastEditTime: 2024-07-12 09:12:10
* @LastEditors: zhp
* @Description:
-->
@@ -51,12 +51,15 @@ 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 === "综合良率"
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
@@ -235,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-05 13:47:02
* @LastEditTime: 2024-07-09 16:15:10
* @LastEditors: zhp
* @Description:
-->
@@ -237,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-05 13:48:12
* @LastEditTime: 2024-07-11 16:45:08
* @LastEditors: zhp
* @Description:
-->
@@ -38,7 +38,7 @@ export default {
grid: {
left: 60,
right: 0,
bottom: 30,
bottom: 31,
top: 30,
containLabel:true,
},
@@ -51,7 +51,6 @@ 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 +=
@@ -215,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,277 @@
<!--
* @Author: zhp
* @Date: 2024-07-09 16:06:13
* @LastEditTime: 2024-07-09 16:14:54
* @LastEditors: zhp
* @Description:
-->
<!--
* @Author: zhp
* @Date: 2024-06-19 15:28:34
* @LastEditTime: 2024-07-08 14:19:57
* @LastEditors: zhp
* @Description:
-->
<template>
<div>
<!-- 暂无数据 -->
<div class="no-data-bg" style="position: relative; left: 50%; transform: translateX(-50%)"
v-show="this.chartMsg.series[0].data.length === 0"></div>
<!-- 图例 -->
<div v-show="this.chartMsg.series[0].data.length > 0 ">
<div class="legendData" v-if="show">
<span class="itemData" v-for="item in legendList" :key="item.id">
<span v-if="item.type === 1" class="block" :style="{ backgroundColor: item.color }"></span>
<span v-if="item.type === 2" class="line" :style="{ backgroundColor: item.color }">
<span class="line-block" :style="{ backgroundColor: item.color }"></span>
</span>
{{ item.name }}</span>
</div>
<div :id="chartId" :style="{ width: '100%', height: chartHeight + 'px' }"></div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { debounce } from "@/utils/debounce";
export default {
name: "bmLineBar",
data() {
return {
myChart: "",
option: {
color: [],
// color: ["#8EF0AB", "#63BDFF", "#288AFF"],
grid: {
left: 30,
right: 50,
bottom: 30,
top: 30,
containLabel:true,
},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
formatter: function (params) {
console.log('params', params)
var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
res +=
"<br/>" +
`${params[i].seriesType === "line"
? '<img width="11" height="11" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />'
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${params[i].color}"></span>`
}` +
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率"
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
: params[i].seriesName === "转化效率"
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
: params[i].seriesName.search('总功率') != -1
? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "MW"
: params[i].seriesName.search('BIPV') != -1
? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "㎡" : (params[i].value ? params[i].value : 0) + "片"
}</span>`;
}
return res;
},
},
xAxis: {
type: "category",
data: [],
axisTick: {
show: false,
},
axisPointer: {
type: "shadow",
},
},
dataZoom: [//滚动条
{
// 设置滚动条的隐藏与显示
show: true,
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "#F7F7F7",
// handleStyle: {
// color: '#D6D6D6'
// },
handleStyle: {
borderColor: '#EBEBEB',
color: '#EBEBEB'
},
moveHandleStyle: {
borderColor: '#EBEBEB',
color: '#EBEBEB'
},
emphasis: {
handleStyle: {
borderColor: '#D6D6D6',
color: '#D6D6D6'
},
moveHandleStyle: {
borderColor: '#D6D6D6',
color: '#D6D6D6'
}
},
// 设置选中范围的填充颜色
fillerColor: "#F7F7F7",
// 设置边框颜色
borderColor: "#F7F7F7",
// 是否显示detail即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue: 0,
// 数据窗口范围的结束数值(一页显示多少条数据)
endValue: 5,
// empty当前数据窗口外的数据被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度,相对于盒子宽度
width: "100%",
// 设置滚动条高度
height: 3,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域(或叫做数据窗口)的大小
zoomLoxk: true,
// 控制手柄的尺寸
handleSize: 0,
// dataZoom-slider组件离容器下侧的距离
bottom: 14,
},
{
// 没有下面这块的话,只能拖动滚动条,
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
],
yAxis:undefined,
series: [],
},
};
},
props: {
chartHeight: {
type: Number,
default: 300,
},
type: {
type: Number,
default: 2,
},
show: {
type: Boolean,
default: true,
},
legendList: {
type: Array,
default: () => [],
},
chartMsg: {
type: Object,
default: () => {},
},
chartId: {
type: String,
default: "bmChart",
},
chartNum: {
type: Number,
default: 1,
},
},
watch: {
chartHeight: {
handler(newVal) {
this.chartHeight = newVal;
},
},
type() {
this.canvasReset();
},
chartNum(val) {
this.canvasReset();
},
chartMsg: {
handler(newVal) {
this.canvasReset();
},
deep: true,
},
},
mounted() {
this.canvasReset();
},
methods: {
canvasReset() {
debounce(() => {
this.getMes();
}, 500)();
},
getMes() {
console.log('222222', this.chartMsg.series);
if (this.myChart) {
this.myChart.dispose();
}
var chartDom = document.getElementById(this.chartId);
this.myChart = echarts.init(chartDom);
this.option.color = this.chartMsg.color;
this.option.xAxis.data = this.chartMsg.xData;
// this.option.yAxis.name = this.chartMsg.yName;
// this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel;
this.option.series = this.chartMsg.series;
this.option.yAxis = this.chartMsg.yAxis;
this.myChart.setOption(this.option);
},
},
};
</script>
<style lang="scss" scoped>
.legendData {
text-align: right;
position: relative;
// right: 30;
top: 0px;
.itemData {
display: inline-block;
margin-right: 10px;
font-size: 14px;
color: #8c8c8c;
.block {
width: 10px;
height: 10px;
display: inline-block;
margin-right: 4px;
}
.line {
width: 10px;
height: 10px;
border-radius: 5px;
display: inline-block;
margin-right: 4px;
position: relative;
.line-block {
position: absolute;
width: 20px;
height: 2px;
left: -5px;
top: 4px;
}
}
}
}
</style>

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-21 09:05:14
* @LastEditTime: 2024-07-05 13:49:59
* @LastEditTime: 2024-07-09 16:15:04
* @LastEditors: zhp
* @Description:
-->
@@ -227,7 +227,7 @@ export default {
.legendData {
text-align: right;
position: relative;
top: -10px;
top: 0px;
// right: 30;
// top: 10px;
.itemData {

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-07-08 13:18:08
* @LastEditTime: 2024-07-10 15:45:28
* @LastEditors: zhp
* @Description:
-->
@@ -20,9 +20,9 @@
</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 prefix-icon="el-icon-date" 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="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item v-show="listQuery.type === 1" label="时间范围" prop="reportTime">
@@ -344,11 +344,13 @@ export default {
},
async getDataList() {
console.log(this.listQuery.type);
if (this.listQuery.type == null) {
return this.$message('请选择时间维度')
if (this.listQuery.type === '') {
this.$message.warning('请选择时间维度')
return
}
if (!this.listQuery.startDate && !this.listQuery.endDate) {
return this.$message('请选择起止时间')
this.$message.warning('请选择起止时间')
return
}
this.otherProps = []
let arr = []

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

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

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

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

View File

@@ -3,7 +3,7 @@
<ButtonNav style="padding: 0;" :menus="['邯郸', '瑞昌']" :button-mode="true" @change="currentMenu = $event">
</ButtonNav>
<div class="search">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="smallTitle">
<el-form-item label="时间维度" prop="type">
<el-select size="small" clearable v-model="listQuery.type" placeholder="请选择" @change="handleChange">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
@@ -11,7 +11,7 @@
</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="至"
<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="结束日期">
</el-date-picker>
@@ -55,34 +55,58 @@
<!-- <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> -->
<el-row v-if="this.listQuery.type === 2">
<el-col :span="12">
<el-col :span="18">
<div class="blueTip">
生产情况对比
</div>
<bm-line-bar :type="listQuery.type" style="margin-top: 20px;" :show="false" :chartHeight="chartHeight"
:legendList="legendList" :chartMsg="chartMsg" :chartId="chartId" :chartNum="chartNum" />
</el-col>
<el-col :span="6" style="margin-top: 30px">
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgTarget" :gridLeft="gridLeft" :chartId="'chartTarget'" :chartNum="chartNum" />
</el-col>
<el-col :span="6">
<div class="blueTip">
{{ title }}
</div>
</el-col>
</el-row>
<el-row v-else-if="this.listQuery.type === 1 || this.listQuery.type === 0">
<el-col :span="24">
<div class="blueTip">
生产情况对比
</div>
</el-col>
</el-row>
<el-row v-else>
<div class="blueTip">
生产情况对比
</div>
</el-row>
<el-row v-if="this.listQuery.type === 2">
<el-col :span="12">
<!-- <div class="blueTip">
生产情况对比
</div> -->
<bm-line-bar :type="listQuery.type" style="margin-top: 20px;" :show="false" :chartHeight="chartHeight"
:legendList="legendList" :chartMsg="chartMsg" :chartId="chartId" :chartNum="chartNum" />
</el-col>
<el-col :span="6">
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgTarget" :gridLeft="gridLeft" :chartId="'chartTarget'" :chartNum="chartNum" />
</el-col>
<el-col :span="6">
<!-- <div class="blueTip">
{{ title }}
</div> -->
<bm-line-bar-year-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgYearTarget" :chartId="'chartYearTarget'" :chartNum="chartNum" />
</el-col>
</el-row>
<el-row v-else-if="this.listQuery.type === 1 || this.listQuery.type === 0">
<el-col :span="18">
<div class="blueTip">
<!-- <div class="blueTip">
生产情况对比
</div>
</div> -->
<bm-line-bar :type="listQuery.type" style="margin-top: 20px;" :show="false" :chartHeight="chartHeight"
:legendList="legendList" :chartMsg="chartMsg" :chartId="'chartDay'" :chartNum="chartNum" />
</el-col>
<el-col :span="6" style="margin-top: 30px">
<el-col :span="6">
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgTarget" :gridLeft="gridLeft" :chartId="'chartDayTarget'" :chartNum="chartNum" />
</el-col>
@@ -95,9 +119,9 @@
</el-col> -->
</el-row>
<el-row v-else>
<div class="blueTip">
<!-- <div class="blueTip">
生产情况对比
</div>
</div> -->
<!-- <el-col :span="12"> -->
<bm-line-bar :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList" :chartMsg="chartMsg"
:chartId="chartId" :chartNum="chartNum" />
@@ -192,7 +216,7 @@ export default {
data: [
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-18, -16],
@@ -206,7 +230,7 @@ export default {
name: "标准组件总功率",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -258,7 +282,7 @@ export default {
name: "芯片总功率",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-10, -16],
@@ -273,7 +297,7 @@ export default {
data: [
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -516,12 +540,14 @@ export default {
this.chartMsgTarget.series = []
this.chartMsgYearTarget.series[0].data = []
this.chartMsgYearTarget.series[1].data = []
console.log(this.listQuery);
if (this.listQuery.type == null) {
return this.$message('请选择时间维度')
console.log(this.listQuery.type);
if (this.listQuery.type === '') {
this.$message.warning('请选择时间维度')
return
}
if (!this.listQuery.startDate && !this.listQuery.endDate) {
return this.$message('请选择起止时间')
this.$message.warning('请选择起止时间')
return
}
let arr = []
this.currentMenu === '邯郸' ? arr.push(1) : arr.push(0)
@@ -648,7 +674,7 @@ export default {
// { name: "%", value: 18.4 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
// barGap: '-100%',
label: {
show: true,
@@ -686,7 +712,7 @@ export default {
{ name: "标准组件总功率完成值", value: obj.componentTotalPower,titleValue:obj.componentTotalPower },
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -706,7 +732,7 @@ export default {
// { name: "%", value: 80.2 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -810,7 +836,7 @@ export default {
// { name: "%", value: 18.4 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
// barGap: '-100%',
label: {
show: true,
@@ -851,7 +877,7 @@ export default {
// { name: "%", value: 80.2 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -871,7 +897,7 @@ export default {
// { name: "%", value: 80.2 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -965,28 +991,6 @@ export default {
border-radius: 8px;
padding: 16px 16px 0 16px;
margin: 8px 0px;
}
.containerTop {
height: calc((100vh - 170px));
background-color: #fff;
border-radius: 8px;
padding: 16px;
}
.blueTip::before {
display: inline-block;
content: '';
width: 4px;
height: 18px;
background: #0B58FF;
border-radius: 1px;
margin-right: 8PX;
margin-top: 8px;
}
.containerTop {
margin-top: 8px;
.smallTitle {
font-size: 16px;
@@ -1001,7 +1005,24 @@ export default {
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
vertical-align: -9px;
}
}
.containerTop {
height: calc((100vh - 170px));
background-color: #fff;
border-radius: 8px;
padding: 4px 16px 16px 16px;
}
.blueTip::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
</style>

View File

@@ -3,7 +3,7 @@
<ButtonNav style="padding: 0;" :menus="['邯郸', '瑞昌']" :button-mode="true" @change="currentMenu = $event">
</ButtonNav>
<div class="search">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="smallTitle">
<el-form-item label="时间维度" prop="type">
<el-select size="small" clearable v-model="listQuery.type" placeholder="请选择" @change="handleChange">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
@@ -11,7 +11,7 @@
</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="至"
<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="结束日期">
</el-date-picker>
@@ -55,37 +55,62 @@
<!-- <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> -->
<el-row v-if="this.listQuery.type === 2">
<el-col :span="12">
<el-col :span="18">
<div class="blueTip">
生产情况对比
</div>
<bm-line-bar :type="listQuery.type" style="margin-top: 20px;" :show="false" :chartHeight="chartHeight"
:legendList="legendList" ref="dayChart" :chartMsg="chartMsg" :chartId="chartId" :chartNum="chartNum" />
</el-col>
<el-col :span="6" style="margin-top: 30px">
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgTarget" :gridLeft="gridLeft" ref="dayTargetChart" :chartId=" 'chartTarget'"
:chartNum="chartNum" />
</el-col>
<el-col :span="6">
<div class="blueTip">
{{ title }}
</div>
</el-col>
</el-row>
<el-row v-else-if="this.listQuery.type === 1 || this.listQuery.type === 0">
<el-col :span="24">
<div class="blueTip">
生产情况对比
</div>
</el-col>
</el-row>
<el-row v-else>
<div class="blueTip">
生产情况对比
</div>
</el-row>
<el-row v-if="this.listQuery.type === 2">
<el-col :span="12">
<!-- <div class="blueTip">
生产情况对比
</div> -->
<bm-line-bar :type="listQuery.type" style="margin-top: 20px;" :show="false" :chartHeight="chartHeight"
:legendList="legendList" ref="dayChart" :chartMsg="chartMsg" :chartId="chartId" :chartNum="chartNum" />
</el-col>
<el-col :span="6">
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgTarget" :gridLeft="gridLeft" ref="dayTargetChart" :chartId=" 'chartTarget'"
:chartNum="chartNum" />
</el-col>
<el-col :span="6">
<!-- <div class="blueTip">
{{ title }}
</div> -->
<bm-line-bar-year-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgYearTarget" ref="chartYearTarget" :chartId=" 'chartYearTarget'" :chartNum="chartNum" />
</el-col>
</el-row>
<el-row v-else-if="this.listQuery.type === 1 || this.listQuery.type === 0">
<el-col :span="18">
<div class="blueTip">
<!-- <div class="blueTip">
生产情况对比
</div>
</div> -->
<bm-line-bar :type="listQuery.type" style="margin-top: 20px;" :show="false" :chartHeight="chartHeight"
:legendList="legendList" :chartMsg="chartMsg" :chartId="'chartDay'" :chartNum="chartNum" />
</el-col>
<el-col :span="6" style="margin-top: 30px">
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgTarget" :gridLeft="gridLeft" :chartId=" 'chartDayTarget'" :chartNum="chartNum" />
<el-col :span="6">
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight"
:legendList="legendList" :chartMsg="chartMsgTarget" :gridLeft="gridLeft" :chartId="'chartDayTarget'"
:chartNum="chartNum" />
</el-col>
<!-- <el-col :span="6">
<div class="blueTip">
@@ -96,9 +121,9 @@
</el-col> -->
</el-row>
<el-row v-else>
<div class="blueTip">
<!-- <div class="blueTip">
生产情况对比
</div>
</div> -->
<!-- <el-col :span="12"> -->
<bm-line-bar :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList" :chartMsg="chartMsg"
:chartId="chartId" :chartNum="chartNum" />
@@ -125,18 +150,18 @@ export default {
name: "ChipYieldBM",
data() {
return {
otherProps:[],
otherProps: [],
start: undefined,
currentMenu:'邯郸',
currentMenu: '邯郸',
end: undefined,
title: '',
gridLeft:true,
showTable:false,
gridLeft: true,
showTable: false,
listQuery: {
pageNo: 1,
start: undefined,
end: undefined,
pageSize:999,
pageSize: 999,
// size: 10,
// current: 1,
factory: null,
@@ -195,7 +220,7 @@ export default {
data: [
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
color: "#8EF0AB",
@@ -210,7 +235,7 @@ export default {
data: [
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -225,7 +250,7 @@ export default {
data: [
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [18, -16],
@@ -235,27 +260,27 @@ export default {
},
},
},
{
name: "BIPV产量",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [20, -16],
color: "#7164FF",
formatter: function (params) {
return params.value
},
{
name: "BIPV产量",
data: [],
type: "bar",
barWidth: 16,
label: {
show: true,
position: [20, -16],
color: "#7164FF",
formatter: function (params) {
return params.value
},
},
},
],
},
chartMsgTarget: {
color: [ "#8EF0AB", 'rgba(104, 196, 131, .3)', "#288AFF", 'rgba(40, 138, 255, .2)', "#64BDFF", 'rgba(100,189,255,.3)', '#7164FF', 'rgba(113,100,255,.2)',],
color: ["#8EF0AB", 'rgba(104, 196, 131, .3)', "#288AFF", 'rgba(40, 138, 255, .2)', "#64BDFF", 'rgba(100,189,255,.3)', '#7164FF', 'rgba(113,100,255,.2)',],
xData: [],
yName: "单位/片",
yAxis:{
yAxis: {
type: "value",
name: "单位/片",
show: true,
@@ -279,12 +304,12 @@ export default {
color: ["#8EF0AB", "#288AFF", "#64BDFF", '#7164FF'],
xData: [],
yName: "单位/片",
yAxis:{
type: "value",
name: "单位/片",
nameTextStyle: {
fontSize: 12,
align: "right",
yAxis: {
type: "value",
name: "单位/片",
nameTextStyle: {
fontSize: 12,
align: "right",
},
// scale: true,
// min: function (value) {//取最小值向下取整为最小刻度
@@ -294,15 +319,15 @@ export default {
// max: function (value) {//取最大值向上取整为最大刻度
// return Math.ceil(value.max)
// },
axisLabel: {},
},
axisLabel: {},
},
series: [
{
name: "FTO投入",
data: [
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-18, -16],
@@ -317,7 +342,7 @@ export default {
data: [
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -332,7 +357,7 @@ export default {
data: [
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [5, -16],
@@ -346,7 +371,7 @@ export default {
name: "BIPV产量",
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [10, -16],
@@ -372,7 +397,7 @@ export default {
computed: {
dataArr() {
if (this.currentMenu != '瑞昌') {
return [{
return [{
factory: null,
item: 'FTO投入',
unit: '片'
@@ -648,12 +673,14 @@ export default {
if (this.chartMsgYearTarget.series[3]) {
this.chartMsgYearTarget.series[3].data = []
}
// console.log(this.listQuery);
if (this.listQuery.type == null) {
return this.$message('请选择时间维度')
console.log(this.listQuery)
if (this.listQuery.type === '') {
this.$message.warning('请选择时间维度')
return
}
if (!this.listQuery.startDate && !this.listQuery.endDate) {
return this.$message('请选择起止时间')
this.$message.warning('请选择起止时间')
return
}
let arr = []
this.currentMenu === '邯郸' ? arr.push(1) : arr.push(0)
@@ -664,7 +691,7 @@ export default {
// this.chartMsg.xData.push(ele.titleValue.replace(/[^\d]/g, " "))
this.otherProps.push({
label: ele.titleValue,
filter: (val) => (val || val === 0 ? val : "-"),
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
prop: 'value' + i
})
})
@@ -700,16 +727,16 @@ export default {
res.data.list.forEach((ele, index) => {
ele.productionSituationDataVOList.forEach((item) => {
maxData.push(item.ftoInput, item.chipYield, item.componentYield)
})
})
})
}
this.chartMsg.yAxis.max = Math.ceil(Math.max(...maxData))
this.chartMsgTarget.yAxis.max = Math.ceil(Math.max(...maxData))
this.chartMsg.yAxis.min = Math.ceil(Math.min(...maxData))
this.chartMsgTarget.yAxis.min = Math.ceil(Math.min(...maxData))
this.chartMsg.yAxis.interval = (this.chartMsg.yAxis.max - this.chartMsg.yAxis.min) / 4
this.chartMsgTarget.yAxis.interval = (this.chartMsgTarget.yAxis.max - this.chartMsgTarget.yAxis.min) / 4
this.chartMsg.yAxis.max = Math.ceil(Math.max(...maxData))
this.chartMsgTarget.yAxis.max = Math.ceil(Math.max(...maxData))
this.chartMsg.yAxis.min = Math.ceil(Math.min(...maxData))
this.chartMsgTarget.yAxis.min = Math.ceil(Math.min(...maxData))
this.chartMsg.yAxis.interval = (this.chartMsg.yAxis.max - this.chartMsg.yAxis.min) / 4
this.chartMsgTarget.yAxis.interval = (this.chartMsgTarget.yAxis.max - this.chartMsgTarget.yAxis.min) / 4
if (this.listQuery.type === 2) {
if (res.data.list.length === 3) {
this.gridLeft = false
@@ -720,7 +747,7 @@ export default {
// res.data.list.forEach((ele) => {
res.data.list.slice(0, res.data.list.length - 3).forEach((ele, index) => {
// let i = index + 1
this.chartMsg.xData.push(ele.titleValue.slice(0, ele.titleValue.length-3))
this.chartMsg.xData.push(ele.titleValue.slice(0, ele.titleValue.length - 3))
ele.productionSituationDataVOList.forEach((item) => {
this.chartMsg.series[0].data.push({
name: ele.titleValue,
@@ -752,7 +779,7 @@ export default {
// { name: "%", value: 85 },
// ],
// type: "bar",
// barWidth: 20,
// barWidth: 16,
// barGap: '0',
// label: {
// show: true,
@@ -775,11 +802,11 @@ export default {
// this.chartMsgTarget.xData.push(ele.titleValue)
if (ele.titleValue.search('完成') == -1) {
ele.productionSituationDataVOList.forEach((item) => {
targetObj.ftoInput = item.ftoInput
targetObj.chipYield = item.chipYield
targetObj.componentYield = item.componentYield
targetObj.bipvProductOutput = this.currentMenu == '瑞昌' ? null : item.bipvProductOutput
})
targetObj.ftoInput = item.ftoInput
targetObj.chipYield = item.chipYield
targetObj.componentYield = item.componentYield
targetObj.bipvProductOutput = this.currentMenu == '瑞昌' ? null : item.bipvProductOutput
})
// console.log("fto",ele.titleValue,fto);
} else {
ele.productionSituationDataVOList.forEach((item) => {
@@ -797,13 +824,13 @@ export default {
name: "FTO投入完成值",
data: [
// s
{ name: 'FTO投入完成值', value: obj.ftoInput,titleValue: obj.ftoInput },
{ name: 'FTO投入完成值', value: obj.ftoInput, titleValue: obj.ftoInput },
// { name: 'FTO投入完成值', value: 33 },
// { name: "%", value: 85 },
// { name: "%", value: 85 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
stack: 'f',
label: {
show: true,
@@ -823,7 +850,7 @@ export default {
// { name: "%", value: 85 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
stack: 'f',
label: {
show: true,
@@ -845,7 +872,7 @@ export default {
// { name: "%", value: 18.4 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
// barGap: '-100%',
label: {
show: true,
@@ -866,7 +893,7 @@ export default {
// { name: "%", value: 18.4 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
// barGap: '-100%',
label: {
show: true,
@@ -887,7 +914,7 @@ export default {
// { name: "%", value: 80.2 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
color: "rgba(100,189,255)",
show: true,
@@ -907,7 +934,7 @@ export default {
// { name: "%", value: 80.2 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -928,7 +955,7 @@ export default {
// { name: "%", value: 80.2 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -948,7 +975,7 @@ export default {
// { name: "%", value: 80.2 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -1033,7 +1060,7 @@ export default {
// { name: "%", value: 85 },
// ],
// type: "bar",
// barWidth: 20,
// barWidth: 16,
// barGap: '0',
// label: {
// show: true,
@@ -1055,13 +1082,13 @@ export default {
// let i = index + 1
// this.chartMsgTarget.xData.push(ele.titleValue)
ele.productionSituationDataVOList.forEach((item) => {
if (ele.titleValue.search('完成') == -1) {
if (ele.titleValue.search('完成') == -1) {
targetObj.ftoInput = item.ftoInput
targetObj.chipYield = item.chipYield
targetObj.componentYield = item.componentYield
targetObj.bipvProductOutput = this.currentMenu == '瑞昌' ? null : item.bipvProductOutput
// console.log("fto", ele.titleValue, fto);
} else {
// console.log("fto", ele.titleValue, fto);
} else {
obj.ftoInput = item.ftoInput
obj.chipYield = item.chipYield
@@ -1069,7 +1096,7 @@ export default {
obj.bipvProductOutput = this.currentMenu == '瑞昌' ? null : item.bipvProductOutput
// if (ele.titleValue.search('目标') != -1) {
// } else {
}
}
})
})
fto.push({
@@ -1082,7 +1109,7 @@ export default {
// { name: "%", value: 85 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
stack: 'f',
label: {
show: true,
@@ -1102,7 +1129,7 @@ export default {
// { name: "%", value: 85 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
stack: 'f',
label: {
show: true,
@@ -1124,7 +1151,7 @@ export default {
// { name: "%", value: 18.4 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
// barGap: '-100%',
label: {
show: true,
@@ -1145,7 +1172,7 @@ export default {
// { name: "%", value: 18.4 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
// barGap: '-100%',
label: {
show: true,
@@ -1166,7 +1193,7 @@ export default {
// { name: "%", value: 80.2 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
color: "rgba(100,189,255)",
show: true,
@@ -1186,7 +1213,7 @@ export default {
// { name: "%", value: 80.2 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -1207,7 +1234,7 @@ export default {
// { name: "%", value: 80.2 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -1227,7 +1254,7 @@ export default {
// { name: "%", value: 80.2 },
],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -1244,31 +1271,31 @@ export default {
this.chartMsg.xData.push(ele.titleValue)
})
for (let i in this.dataArr[0]) {
this.chartMsg.series[0].name = this.dataArr[0]['item']
this.chartMsg.series[0].name = this.dataArr[0]['item']
if (i.search('value') === 0) {
this.chartMsg.series[0].data.push({
name: this.dataArr[0]['item'],
value: this.dataArr[0][i] === 0 ? null : this.dataArr[0][i]
})
}
this.chartMsg.series[0].data.push({
name: this.dataArr[0]['item'],
value: this.dataArr[0][i] === 0 ? null : this.dataArr[0][i]
})
}
}
for (let i in this.dataArr[1]) {
this.chartMsg.series[1].name = this.dataArr[1]['item']
if (i.search('value') === 0) {
this.chartMsg.series[1].data.push({
name: this.dataArr[1]['item'],
value: this.dataArr[1][i] === 0 ? null : this.dataArr[1][i]
})
}
this.chartMsg.series[1].name = this.dataArr[1]['item']
if (i.search('value') === 0) {
this.chartMsg.series[1].data.push({
name: this.dataArr[1]['item'],
value: this.dataArr[1][i] === 0 ? null : this.dataArr[1][i]
})
}
}
for (let i in this.dataArr[2]) {
this.chartMsg.series[2].name = this.dataArr[2]['item']
if (i.search('value') === 0) {
this.chartMsg.series[2].data.push({
name: this.dataArr[2]['item'],
value: this.dataArr[2][i] === 0 ? null : this.dataArr[2][i]
})
}
this.chartMsg.series[2].name = this.dataArr[2]['item']
if (i.search('value') === 0) {
this.chartMsg.series[2].data.push({
name: this.dataArr[2]['item'],
value: this.dataArr[2][i] === 0 ? null : this.dataArr[2][i]
})
}
}
if (this.dataArr[3]) {
for (let i in this.dataArr[3]) {
@@ -1280,7 +1307,7 @@ export default {
})
}
}
}
}
}
// console.log(this.dataArr)
// console.log(this.tableData);
@@ -1345,13 +1372,28 @@ export default {
border-radius: 8px;
padding: 16px 16px 0 16px;
margin: 8px 0px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -9px;
}
}
.containerTop {
height: calc((100vh - 170px));
background-color: #fff;
border-radius: 8px;
padding: 16px;
padding: 4px 16px 16px 16px;
}
.blueTip::before {
@@ -1361,27 +1403,13 @@ export default {
height: 18px;
background: #0B58FF;
border-radius: 1px;
margin-right: 8PX;
margin-top: 8px;
margin-right: 8px;
vertical-align:-3px;
}
.containerTop {
margin-top: 8px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
}
</style>

View File

@@ -5,7 +5,7 @@
</ButtonNav>
<!-- </div> -->
<div class="search">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="smallTitle">
<el-form-item label="时间维度" prop="type">
<el-select size="small" clearable v-model="listQuery.type" placeholder="请选择" @change="handleChange">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
@@ -13,7 +13,7 @@
</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="至"
<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="结束日期">
</el-date-picker>
@@ -84,8 +84,8 @@
:chartMsg="chartMsgYearTarget" :chartId=" 'yearData'" :chartNum="chartNum" />
</el-col> -->
</el-row>
<base-table :key="showTable" :table-props="tableProps" :page="listQuery.current"
:limit="listQuery.size" :table-data="tableData" :max-height="tableH" />
<base-table :key="showTable" :table-props="tableProps" :page="listQuery.current" :limit="listQuery.size"
:table-data="tableData" :max-height="tableH" />
</div>
<!-- <div class="containerBottom">
@@ -96,7 +96,7 @@
<script>
import { getProductionYieldSituationMWData, exportProductionYieldSituationMWData } from '@/api/report';
import bmSearchBar from "./components/bmSearchBar";
import BmLineBar from "./components/produceLineBar.vue";
import BmLineBar from "./components/produceLineYieldBar.vue";
import produceLineBarYearTarget from "./components/produceLineYieldBarTarget.vue";
import ButtonNav from '@/components/ButtonNav'
import moment from 'moment'
@@ -199,7 +199,7 @@ export default {
name: "单位/%",
nameTextStyle: {
fontSize: 12,
align: "right",
align: "left",
},
axisLabel: {},
}
@@ -210,7 +210,7 @@ export default {
// yAxisIndex: 0,
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-18, -16],
@@ -225,7 +225,7 @@ export default {
// type: 'bar',
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [-18, -16],
@@ -273,18 +273,18 @@ export default {
splitNumber: 4,
nameTextStyle: {
fontSize: 12,
align: "right",
align: "left",
},
axisLabel: {},
}
],
series: [
{
name: "",
name: "FTO投入",
// yAxisIndex: 0,
data: [],
type: "bar",
barWidth: 20,
barWidth: 16,
yAxisIndex: 0,
label: {
show: true,
@@ -296,12 +296,12 @@ export default {
},
},
{
name: "",
name: "芯片产量",
// yAxisIndex: 0,
data: [],
yAxisIndex: 0,
type: "bar",
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -312,12 +312,12 @@ export default {
},
},
{
name: "",
name: "标准组件产量",
// yAxisIndex: 0,
data: [],
type: "bar",
yAxisIndex: 0,
barWidth: 20,
barWidth: 16,
label: {
show: true,
position: [0, -16],
@@ -328,10 +328,10 @@ export default {
},
},
{
name: "",
name: "综合良率",
data: [],
type: "line",
// barWidth: 20,
// barWidth: 16,
symbol: "circle",
symbolSize: 6,
yAxisIndex: 1,
@@ -567,11 +567,13 @@ export default {
this.chartMsgYearTarget.xData = []
this.chartMsgYearTarget.series[0].data = []
this.chartMsgYearTarget.series[1].data = []
if (this.listQuery.type == null) {
return this.$message('请选择时间维度')
if (this.listQuery.type === '') {
this.$message.warning('请选择时间维度')
return
}
if (!this.listQuery.startDate && !this.listQuery.endDate) {
return this.$message('请选择起止时间')
this.$message.warning('请选择起止时间')
return
}
let arr = []
this.currentMenu === '邯郸' ? arr.push(1) : arr.push(0)
@@ -603,7 +605,7 @@ export default {
// this.chartMsg.xData.push(ele.titleValue)
this.otherProps.push({
label: ele.titleValue,
filter: (val) => (val || val === 0 ? val : "-"),
filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
prop: 'value' + i
})
})
@@ -843,30 +845,45 @@ export default {
</script>
<style lang="scss" scoped>
.search {
// height: calc((100px));
background-color: #fff;
border-radius: 8px;
padding: 16px 16px 0 16px;
margin:8px 0 8px 0px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -9px;
}
}
.containerTop {
height: calc((100vh - 170px));
background-color: #fff;
border-radius: 8px;
padding: 16px;
padding: 4px 16px 16px 16px;
}
.blueTip::before {
display: inline-block;
content: '';
width: 4px;
height: 18px;
background: #0B58FF;
border-radius: 1px;
margin-right: 8PX;
margin-top: 8px;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
.containerTop {

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

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