projects/mescc/zhp #89
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
226
src/views/copilot/components/bottomLeftContainer.vue
Normal file
226
src/views/copilot/components/bottomLeftContainer.vue
Normal 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>
|
||||
219
src/views/copilot/components/bottomRightContainer.vue
Normal file
219
src/views/copilot/components/bottomRightContainer.vue
Normal 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>
|
||||
219
src/views/copilot/components/efficiencyLeftContainer.vue
Normal file
219
src/views/copilot/components/efficiencyLeftContainer.vue
Normal 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>
|
||||
219
src/views/copilot/components/efficiencyRightContainer.vue
Normal file
219
src/views/copilot/components/efficiencyRightContainer.vue
Normal 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>
|
||||
@ -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,
|
||||
right: 0;
|
||||
background: radial-gradient(circle at center,
|
||||
#024798 2%,
|
||||
#024798 30%,
|
||||
transparent
|
||||
);
|
||||
#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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,
|
||||
background: radial-gradient(circle at center,
|
||||
#024798 2%,
|
||||
#024798 30%,
|
||||
transparent
|
||||
);
|
||||
#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;
|
||||
|
||||
@ -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] },
|
||||
];
|
||||
}
|
||||
|
||||
@ -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] },
|
||||
];
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,17 +355,17 @@ export default {
|
||||
margin-right: 0.22vw;
|
||||
}
|
||||
}
|
||||
.legend-item:nth-child(3) {
|
||||
.legend-item:nth-child(1) {
|
||||
margin-left: 1vw;
|
||||
}
|
||||
.legend-item:nth-child(1):before {
|
||||
.legend-item:nth-child(2):before {
|
||||
background-color: #12f7f1;
|
||||
}
|
||||
|
||||
.legend-item:nth-child(2):before {
|
||||
.legend-item:nth-child(3):before {
|
||||
background-color: #58adfa;
|
||||
}
|
||||
.legend-item:nth-child(3):before {
|
||||
.legend-item:nth-child(1):before {
|
||||
// width: 12px;
|
||||
// height: 2px;
|
||||
width: 1vw;
|
||||
@ -374,11 +374,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;
|
||||
@ -389,7 +389,7 @@ export default {
|
||||
height: 0.3191vw;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: -0.851vw;
|
||||
left: -1.13vw;
|
||||
// left: -16px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
|
||||
@ -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 + '%'
|
||||
// }
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 + '%'
|
||||
// }
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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%;
|
||||
height: 96%;
|
||||
width: 0.11415vw;
|
||||
border-radius: 2px;
|
||||
top: 0%;
|
||||
left: 0;
|
||||
background: radial-gradient(
|
||||
circle at center,
|
||||
background: radial-gradient(circle at center,
|
||||
#024798 2%,
|
||||
#024798 30%,
|
||||
transparent
|
||||
);
|
||||
#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;
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 => {
|
||||
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 ''
|
||||
|
||||
@ -57,7 +57,7 @@ export default {
|
||||
},
|
||||
beProcessObj: {
|
||||
type: Object,
|
||||
default: () => { }
|
||||
default: () => {}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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: [
|
||||
{
|
||||
|
||||
@ -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,10 +347,16 @@ export default {
|
||||
this.$refs.detailOrUpdate.init(val.data.id);
|
||||
});
|
||||
} else {
|
||||
const res = await getWorkOrderDetail(val.data.id)
|
||||
getWorkOrderDetail(val.data.id).then((res) => {
|
||||
if (res.code === 0) {
|
||||
// this.loading = false
|
||||
;const data = res.data.prodWorkOrderDO
|
||||
|
||||
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 = []
|
||||
@ -360,10 +366,6 @@ export default {
|
||||
})
|
||||
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: '实际产出' },
|
||||
@ -374,6 +376,8 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
this.exportPDF()
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
async getDataList() {
|
||||
|
||||
@ -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,
|
||||
},
|
||||
];
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
277
src/views/report/components/produceLineYieldBar.vue
Normal file
277
src/views/report/components/produceLineYieldBar.vue
Normal 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>
|
||||
@ -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 {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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,
|
||||
},
|
||||
];
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user