projects/mescc/zhp #89

Merged
juzi merged 4 commits from projects/mescc/zhp into projects/mescc/develop 2024-07-10 10:01:27 +08:00
44 changed files with 1413 additions and 225 deletions

View File

@ -1,3 +1,10 @@
<!--
* @Author: zhp
* @Date: 2024-06-03 15:38:31
* @LastEditTime: 2024-07-09 15:59:41
* @LastEditors: zhp
* @Description:
-->
<!--
filename: ChartContainer.vue
author: liubin
@ -43,7 +50,7 @@ export default {
}
::-webkit-scrollbar {
width: 8px;
width: 80%;
height: 8px;
}

View File

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

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

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

View File

@ -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 5%,
#024798 10%,
transparent 90%) 1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 92%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 100%,
transparent
);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 95%;
height: 0.31415vh;
border-radius: 2px;
right: 3%;
bottom: 0;
background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid #0175dc;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
// transform: rotate(-90deg);
border-left: 0.532vw solid transparent;
border-bottom: .6vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-05 09:43:51
* @LastEditTime: 2024-06-05 09:43:52
* @LastEditTime: 2024-07-09 15:35:19
* @LastEditors: zhp
* @Description:
-->
@ -80,23 +80,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 +106,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 +124,7 @@ export default {
gap: 8px;
.container-title {
font-size: 1.18vw;
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;

View File

@ -73,6 +73,7 @@ export default {
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
@ -80,13 +81,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 +99,7 @@ export default {
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
#024798 100%,
transparent
);
z-index: 1;
@ -104,12 +109,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 +127,7 @@ export default {
gap: 8px;
.container-title {
font-size: 1.18vw;
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;

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-09 15:35:04
* @LastEditors: zhp
* @Description:
-->
@ -99,6 +99,7 @@ export default {
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
@ -106,23 +107,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 +136,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 +151,7 @@ export default {
gap: 8px;
.container-title {
font-size: 1.18vw;
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;

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-08 14:10:08
* @LastEditTime: 2024-07-09 14:51:21
* @LastEditors: zhp
* @Description:
-->
@ -356,10 +356,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;
@ -368,11 +368,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;
@ -383,15 +383,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-09 14:57:49
* @LastEditors: zhp
* @Description:
-->
@ -355,43 +355,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

@ -1,3 +1,10 @@
<!--
* @Author: zhp
* @Date: 2024-06-03 15:38:31
* @LastEditTime: 2024-07-09 16:49:22
* @LastEditors: zhp
* @Description:
-->
<!--
filename: ContainerIcon.vue
author: liubin
@ -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,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-05 09:36:07
* @LastEditTime: 2024-06-05 09:38:23
* @LastEditTime: 2024-07-09 16:54:24
* @LastEditors: zhp
* @Description:
-->
@ -80,6 +80,7 @@ export default {
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
@ -87,21 +88,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 +114,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 +132,7 @@ export default {
gap: 8px;
.container-title {
font-size: 1.18vw;
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;

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,7 @@ export default {
</script>
<style scoped lang="scss">
.copilot-container {
height: 100%;
flex: 1;
@ -85,22 +86,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 +109,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 +127,7 @@ export default {
gap: 8px;
.container-title {
font-size: 1.18vw;
font-size: 1vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;

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

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

View File

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

@ -113,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;

View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-07-08 14:38:25
* @LastEditTime: 2024-07-10 09:58:59
* @LastEditors: zhp
* @Description:
-->
@ -402,8 +402,10 @@ export default {
}
// y
arr.forEach(fac => {
let i = 0
arr.forEach((fac,index) => {
console.log('fac',fac);
let i = 0
let position = fac.id == 1 ? [1, -16,] : [-8, -16,]
while ( i < 3) {
//
const index1 = ['chipYield', 'componentYield', 'bipvProductOutput'][i]
@ -422,6 +424,8 @@ export default {
label: {
show: i === 2 ? true : false,
position: 'top',
// fontSize:10,
position: position,
formatter(params) {
return fac.name.substring(0, 2)
}
@ -448,6 +452,7 @@ export default {
label: {
show: true,
position: 'top',
position: position,
formatter(params) {
if (params.value === 0) {
return ''

View File

@ -57,7 +57,7 @@ export default {
},
beProcessObj: {
type: Object,
default: () => { }
default: () => {}
},
},
data() {

View File

@ -1,10 +1,3 @@
<!--
* @Author: zhp
* @Date: 2024-07-08 14:51:47
* @LastEditTime: 2024-07-09 09:34:38
* @LastEditors: zhp
* @Description:
-->
<template>
<div id="chipPowerExpChart" style="width:552px;height:200px;" />
</template>
@ -18,7 +11,7 @@ export default {
props: {
beProcessObj: {
type: Object,
default: () => {}
default: () => { }
}
},
data() {

View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-07-08 14:51:47
* @LastEditTime: 2024-07-09 09:58:43
* @LastEditTime: 2024-07-09 11:07:47
* @LastEditors: zhp
* @Description:
-->
@ -66,7 +66,8 @@ export default {
},
legend: {
bottom: 0,
left: 'center'
left: 'center',
itemGap:40,
},
series: [
{

View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-07-09 10:17:41
* @LastEditTime: 2024-07-09 11:08:43
* @LastEditors: zhp
* @Description:
-->
@ -338,7 +338,7 @@ export default {
}
})
},
async otherMethods(val) {
otherMethods(val) {
console.log(val)
if (val.type === 'detail') {
this.detailOrUpdateVisible = true;
@ -347,33 +347,37 @@ export default {
this.$refs.detailOrUpdate.init(val.data.id);
});
} else {
const res = await getWorkOrderDetail(val.data.id)
if (res.code === 0) {
// this.loading = false
;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])
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()
})
this.hisObj.seriesList = seriesList
this.hisObj.dateList = dateList
const xAxisList = Object.keys(res.data.inProcessDis)
const yAxisList = Object.values(res.data.inProcessDis)
this.beProcessObj.xAxisList = xAxisList
this.beProcessObj.yAxisList = yAxisList
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() {

View File

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

View File

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

View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-19 15:28:34
* @LastEditTime: 2024-07-08 14:19:57
* @LastEditTime: 2024-07-09 16:14:37
* @LastEditors: zhp
* @Description:
-->
@ -238,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-09 16:14:43
* @LastEditors: zhp
* @Description:
-->
@ -215,7 +215,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:39:32
* @LastEditTime: 2024-07-09 16:16:14
* @LastEditors: zhp
* @Description:
-->
@ -344,7 +344,7 @@ export default {
},
async getDataList() {
console.log(this.listQuery.type);
if (this.listQuery.type == null) {
if (this.listQuery.type == null || this.listQuery.type == '') {
return this.$message('请选择时间维度')
}
if (!this.listQuery.startDate && !this.listQuery.endDate) {

View File

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

View File

@ -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'
@ -546,7 +546,7 @@ export default {
this.chartMsgYearTarget.series[0].data = []
this.chartMsgYearTarget.series[1].data = []
this.title = ''
if (this.listQuery.date == null) {
if (this.listQuery.date == null || this.listQuery.date == '') {
return this.$message('请选择时间维度')
}
if (!this.listQuery.beginTime && !this.listQuery.endTime) {
@ -583,7 +583,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
})
})
@ -779,7 +779,7 @@ export default {
height: calc((100vh - 170px));
background-color: #fff;
border-radius: 8px;
padding: 16px;
padding: 4px 16px 16px 16px;
}
.blueTip::before {

View File

@ -517,7 +517,7 @@ export default {
this.chartMsgYearTarget.series[0].data = []
this.chartMsgYearTarget.series[1].data = []
console.log(this.listQuery);
if (this.listQuery.type == null) {
if (this.listQuery.type == null || this.listQuery.type == '') {
return this.$message('请选择时间维度')
}
if (!this.listQuery.startDate && !this.listQuery.endDate) {
@ -959,6 +959,7 @@ export default {
</script>
<style lang="scss" scoped>
.search {
// height: calc((100px));
background-color: #fff;
@ -971,7 +972,7 @@ export default {
height: calc((100vh - 170px));
background-color: #fff;
border-radius: 8px;
padding: 16px;
padding: 4px 16px 16px 16px;
}
.blueTip::before {

View File

@ -649,7 +649,7 @@ export default {
this.chartMsgYearTarget.series[3].data = []
}
// console.log(this.listQuery);
if (this.listQuery.type == null) {
if (this.listQuery.type == null || this.listQuery.type == '') {
return this.$message('请选择时间维度')
}
if (!this.listQuery.startDate && !this.listQuery.endDate) {
@ -664,7 +664,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
})
})
@ -1351,7 +1351,7 @@ export default {
height: calc((100vh - 170px));
background-color: #fff;
border-radius: 8px;
padding: 16px;
padding: 4px 16px 16px 16px;
}
.blueTip::before {

View File

@ -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'
@ -567,7 +567,7 @@ export default {
this.chartMsgYearTarget.xData = []
this.chartMsgYearTarget.series[0].data = []
this.chartMsgYearTarget.series[1].data = []
if (this.listQuery.type == null) {
if (this.listQuery.type == null || this.listQuery.type == '') {
return this.$message('请选择时间维度')
}
if (!this.listQuery.startDate && !this.listQuery.endDate) {
@ -603,7 +603,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
})
})
@ -855,7 +855,7 @@ export default {
height: calc((100vh - 170px));
background-color: #fff;
border-radius: 8px;
padding: 16px;
padding: 4px 16px 16px 16px;
}
.blueTip::before {