projects/mescc/zhp
into projects/mescc/develop
2 months ago
@@ -1,8 +1,15 @@ | |||
<!-- | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-06-03 15:38:31 | |||
* @LastEditTime: 2024-07-09 15:59:41 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
<!-- | |||
filename: ChartContainer.vue | |||
author: liubin | |||
date: 2024-04-10 08:54:33 | |||
description: | |||
description: | |||
todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高 | |||
--> | |||
@@ -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> |
@@ -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> |
@@ -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> |
@@ -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> |
@@ -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, | |||
#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; | |||
@@ -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, | |||
#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; | |||
@@ -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,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> |
@@ -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,8 +1,15 @@ | |||
<!-- | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-06-03 15:38:31 | |||
* @LastEditTime: 2024-07-09 16:49:22 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
<!-- | |||
filename: ContainerIcon.vue | |||
author: liubin | |||
date: 2024-04-09 16:41:36 | |||
description: | |||
description: | |||
--> | |||
<template> | |||
@@ -49,8 +56,8 @@ export default { | |||
.container-icon { | |||
// width: 32px; | |||
// height: 32px; | |||
width: 1.701vw; | |||
height: 1.701vw; | |||
width: 1.4vw; | |||
height: 1.4vw; | |||
background: #ccc2; | |||
} | |||
</style> |
@@ -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%; | |||
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; | |||
@@ -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; | |||
@@ -1,8 +1,8 @@ | |||
<!-- | |||
<!-- | |||
filename: ContainerIcon.vue | |||
author: liubin | |||
date: 2024-04-09 16:41:36 | |||
description: | |||
description: | |||
--> | |||
<template> | |||
@@ -51,8 +51,8 @@ export default { | |||
.container-icon { | |||
// width: 32px; | |||
// height: 32px; | |||
width: 1.701vw; | |||
height: 1.701vw; | |||
width: 1.4vw; | |||
height: 1.4vw; | |||
background: #ccc2; | |||
} | |||
</style> |
@@ -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 => { | |||
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 '' | |||
@@ -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,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() { | |||
@@ -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; | |||
@@ -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 { | |||