@@ -3,7 +3,7 @@ | |||
author: liubin | |||
date: 2024-04-10 08:54:33 | |||
description: | |||
todo: 实现滑动条 和动态宽高 | |||
todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高 | |||
--> | |||
<template> |
@@ -0,0 +1,213 @@ | |||
<!-- | |||
filename: Container.vue | |||
author: liubin | |||
date: 2024-04-09 10:44:09 | |||
description: | |||
--> | |||
<template> | |||
<div class="copilot-container"> | |||
<!-- refresh btn --> | |||
<button | |||
style=" | |||
appearance: none; | |||
outline: none; | |||
border: none; | |||
background: none; | |||
color: #fff; | |||
cursor: pointer; | |||
position: absolute; | |||
top: 8px; | |||
right: 8px; | |||
" | |||
@click="$emit('refresh')" | |||
> | |||
<svg | |||
xmlns="http://www.w3.org/2000/svg" | |||
fill="none" | |||
viewBox="0 0 24 24" | |||
stroke-width="1.5" | |||
stroke="currentColor" | |||
style="width: 24px; height: 24px" | |||
> | |||
<path | |||
stroke-linecap="round" | |||
stroke-linejoin="round" | |||
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" | |||
/> | |||
</svg> | |||
</button> | |||
<!-- decoration --> | |||
<div class="corner tl"></div> | |||
<div class="corner tr"></div> | |||
<div v-if="side == 'left'" class="corner bl"></div> | |||
<div v-if="side == 'right'" class="corner br"></div> | |||
<!-- content --> | |||
<div | |||
class="container-head" | |||
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']" | |||
> | |||
<Icon :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; | |||
backdrop-filter: blur(4px); | |||
// &::after { | |||
// content: ""; | |||
// position: absolute; | |||
// display: inline-block; | |||
// width: 60%; | |||
// height: 0.31415vh; | |||
// border-radius: 2px; | |||
// left: 8%; | |||
// bottom: 0; | |||
// background: linear-gradient(to right, #024798, transparent); | |||
// z-index: 0; | |||
// } | |||
.container-head { | |||
// height: 40px; | |||
height: 3.8vh; | |||
padding: 8px; | |||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
.container-title { | |||
font-size: 1.18vw; | |||
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; | |||
border-left: 0.532vw solid transparent; | |||
border-bottom: 0.532vw solid #0175dc; | |||
border-top: 0.532vw solid transparent; | |||
border-right: 0.532vw solid #0175dc; | |||
} | |||
.gradient-to-right { | |||
background: linear-gradient(to right, #0c3f68cc, transparent); | |||
} | |||
.gradient-to-left { | |||
background: linear-gradient(to left, #0c3f68cc, transparent); | |||
} | |||
.body-gradient-to-right { | |||
background: linear-gradient(to right, #0003, transparent); | |||
} | |||
.body-gradient-to-left { | |||
background: linear-gradient(to left, #0003, transparent); | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,58 @@ | |||
<!-- | |||
filename: ContainerIcon.vue | |||
author: liubin | |||
date: 2024-04-09 16:41:36 | |||
description: | |||
--> | |||
<template> | |||
<div class="container-icon" :style="bgStyle"></div> | |||
</template> | |||
<script> | |||
import cube from "@/assets/images/homeindex/fto-icon.png"; | |||
import chip from "@/assets/images/homeindex/chip-icon.png"; | |||
import chip2 from "@/assets/images/homeindex/chip-icon-2.png"; | |||
import bipv from "@/assets/images/homeindex/bipv-icon.png"; | |||
import std from "@/assets/images/homeindex/std-icon.png"; | |||
export default { | |||
name: "ContainerIcon", | |||
components: {}, | |||
props: { | |||
icon: { | |||
type: String, | |||
default: "cube", | |||
}, | |||
}, | |||
data() { | |||
return {}; | |||
}, | |||
computed: { | |||
bgStyle() { | |||
return { | |||
cube: | |||
"background: url(" + cube + ") no-repeat center center / 100% 100%", | |||
chip: | |||
"background: url(" + chip + ") no-repeat center center / 100% 100%", | |||
chip2: | |||
"background: url(" + chip2 + ") no-repeat center center / 100% 100%", | |||
bipv: | |||
"background: url(" + bipv + ") no-repeat center center / 100% 100%", | |||
std: "background: url(" + std + ") no-repeat center center / 100% 100%", | |||
}[this.icon]; | |||
}, | |||
}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.container-icon { | |||
// width: 32px; | |||
// height: 32px; | |||
width: 1.701vw; | |||
height: 1.701vw; | |||
background: #ccc2; | |||
} | |||
</style> |
@@ -0,0 +1,64 @@ | |||
<!-- | |||
filename: StdOutput.vue | |||
author: liubin | |||
date: 2024-04-17 09:55:12 | |||
description: | |||
--> | |||
<template> | |||
<div class="std-output"> | |||
<copilot-select :options="cityOptions" /> | |||
<div class="flex-1 stretch">f</div> | |||
</div> | |||
</template> | |||
<script> | |||
import CopilotSelect from "../select.vue"; | |||
import fetcher from "./std-output-data"; | |||
export default { | |||
name: "StdOutput", | |||
components: { CopilotSelect }, | |||
props: {}, | |||
data() { | |||
return { | |||
cityOptions: [ | |||
"成都", | |||
"邯郸", | |||
"株洲", | |||
"瑞昌", | |||
"佳木斯", | |||
"凯盛光伏", | |||
"蚌埠兴科", | |||
], | |||
}; | |||
}, | |||
computed: {}, | |||
mounted() { | |||
fetcher.getData().then((res) => { | |||
console.log("getData--->", res, fetcher.options); | |||
}); | |||
}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.std-output { | |||
height: 100%; | |||
padding: 12px 24px; | |||
display: flex; | |||
gap: 12px; | |||
flex-direction: column; | |||
align-items: center; | |||
} | |||
.flex-1 { | |||
flex: 1; | |||
background: #f001; | |||
} | |||
.stretch { | |||
align-self: stretch; | |||
} | |||
</style> |
@@ -0,0 +1,122 @@ | |||
export default { | |||
grid: { | |||
left: "3%", | |||
right: "4%", | |||
bottom: "0", | |||
top: "15%", | |||
containLabel: true, | |||
}, | |||
tooltip: {}, | |||
xAxis: { | |||
axisTick: { | |||
show: false, | |||
}, | |||
axisLine: { | |||
lineStyle: { | |||
color: "#4561AE", | |||
}, | |||
}, | |||
axisLabel: { | |||
color: "#fff", | |||
fontSize: 12, | |||
}, | |||
// data: this.xAxis, | |||
data: [], | |||
}, | |||
yAxis: { | |||
name: "单位/片", | |||
nameTextStyle: { | |||
color: "#fff", | |||
fontSize: 12, | |||
}, | |||
axisTick: { | |||
show: false, | |||
}, | |||
axisLabel: { | |||
color: "#fff", | |||
fontSize: 12, | |||
}, | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
color: "#4561AE", | |||
}, | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
color: "#4561AE", | |||
}, | |||
}, | |||
}, | |||
series: [ | |||
{ | |||
name: "2023年", | |||
type: "bar", | |||
barWidth: 12, | |||
itemStyle: { | |||
borderRadius: [10, 10, 0, 0], | |||
color: { | |||
type: "linear", | |||
x: 0, | |||
y: 0, | |||
x2: 0, | |||
y2: 1, | |||
colorStops: [ | |||
{ | |||
offset: 0, | |||
color: "#12f7f1", // 0% 处的颜色 | |||
}, | |||
{ | |||
offset: 0.35, | |||
color: "#12f7f177", // 100% 处的颜色 | |||
}, | |||
{ | |||
offset: 0.75, | |||
color: "#12f7f133", // 100% 处的颜色 | |||
}, | |||
{ | |||
offset: 1, | |||
color: "transparent", // 100% 处的颜色 | |||
}, | |||
], | |||
global: false, // 缺省为 false | |||
}, | |||
}, | |||
// data: this.series[0].data, | |||
data: [], | |||
}, | |||
{ | |||
name: "2024年", | |||
type: "bar", | |||
barWidth: 12, | |||
// tooltip: { | |||
// valueFormatter: function (value) { | |||
// return value + " ml"; | |||
// }, | |||
// }, | |||
itemStyle: { | |||
borderRadius: [10, 10, 0, 0], | |||
color: { | |||
type: "linear", | |||
x: 0, | |||
y: 0, | |||
x2: 0, | |||
y2: 1, | |||
colorStops: [ | |||
{ | |||
offset: 0, | |||
color: "#57abf8", // 0% 处的颜色 | |||
}, | |||
{ | |||
offset: 1, | |||
color: "#364BFE66", // 100% 处的颜色 | |||
}, | |||
], | |||
global: false, // 缺省为 false | |||
}, | |||
}, | |||
data: [], | |||
// data: this.series[1].data, | |||
}, | |||
], | |||
}; |
@@ -0,0 +1,13 @@ | |||
import options from './double-ring-chart-options'; | |||
export default { | |||
options, | |||
getData: async function (url) { | |||
// | |||
return await new Promise((resolve, reject) => { | |||
setTimeout(() => { | |||
resolve([90119, 40801, 44028]); | |||
}, 1200); | |||
}); | |||
}, | |||
}; |
@@ -0,0 +1,75 @@ | |||
<!-- | |||
filename: select.vue | |||
author: liubin | |||
date: 2024-04-17 09:50:03 | |||
description: | |||
--> | |||
<template> | |||
<div style="display: inline-block; text-align: center"> | |||
<div class="copilot-select"> | |||
<button | |||
type="button" | |||
v-for="item in options" | |||
:key="item" | |||
@click="currentActive = item" | |||
:class="[item == currentActive ? 'active' : '']" | |||
> | |||
{{ item }} | |||
</button> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
name: "CopilotSelect", | |||
components: {}, | |||
props: { | |||
options: { | |||
type: Array, | |||
default: () => [], | |||
}, | |||
}, | |||
data() { | |||
return { | |||
currentActive: '', | |||
}; | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style scoped> | |||
.copilot-select { | |||
display: flex; | |||
align-items: center; | |||
background: #01306c; | |||
border-radius: 4px; | |||
overflow: hidden; | |||
} | |||
button { | |||
color: #fff; | |||
padding: 8px 12px; | |||
cursor: pointer; | |||
position: relative; | |||
transition: all .3s; | |||
} | |||
button.active, | |||
button:hover { | |||
background: #1d74d8; | |||
} | |||
button:not(:first-child)::before { | |||
content: ""; | |||
position: absolute; | |||
top: 20%; | |||
left: -1px; | |||
width: 2px; | |||
height: 60%; | |||
background: #02236d; | |||
} | |||
</style> |
@@ -6,7 +6,7 @@ | |||
--> | |||
<template> | |||
<div class="copilot-container"> | |||
<div class="copilot-layout"> | |||
<CopilotHeaderVue | |||
:active="page" | |||
:period="period" | |||
@@ -46,7 +46,7 @@ export default { | |||
</script> | |||
<style> | |||
.copilot-container { | |||
.copilot-layout { | |||
padding: 16px; | |||
background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat; | |||
position: absolute; | |||
@@ -8,11 +8,9 @@ | |||
<template> | |||
<div class="yield-copilot"> | |||
<section class="top flex"> | |||
<db-container | |||
class="std-yield" | |||
title="标准组件产出" | |||
icon="std" | |||
></db-container> | |||
<db-container class="std-yield" title="标准组件产出" icon="std"> | |||
<std-output /> | |||
</db-container> | |||
<db-container | |||
class="chip-yield" | |||
title="芯片产出" | |||
@@ -36,11 +34,12 @@ | |||
</template> | |||
<script> | |||
import Container from "@/views/dashboard/components/Container.vue"; | |||
import Container from "../components/Container.vue"; | |||
import StdOutputVue from "../components/charts/StdOutput.vue"; | |||
export default { | |||
name: "YieldCopilot", | |||
components: { DbContainer: Container }, | |||
components: { DbContainer: Container, StdOutput: StdOutputVue }, | |||
props: {}, | |||
data() { | |||
return {}; | |||
@@ -16,8 +16,8 @@ | |||
</template> | |||
<script> | |||
import ChartContainerVue from "../components/ChartContainer.vue"; | |||
import chartMixin from "../mixins/chart.js"; | |||
import ChartContainerVue from "../../components/ChartContainer.vue"; | |||
import chartMixin from "@/mixins/chart.js"; | |||
import screenfull from "screenfull"; | |||
export default { | |||
@@ -26,8 +26,8 @@ | |||
<script> | |||
import screenfull from "screenfull"; | |||
import ChartContainerVue from "../components/ChartContainer.vue"; | |||
import chartMixin from "../mixins/chart.js"; | |||
import ChartContainerVue from "../../components/ChartContainer.vue"; | |||
import chartMixin from "@/mixins/chart.js"; | |||
export default { | |||
name: "LeftChartBase", | |||
@@ -26,8 +26,8 @@ | |||
<script> | |||
import screenfull from "screenfull"; | |||
import ChartContainerVue from "../components/ChartContainer.vue"; | |||
import chartMixin from "../mixins/chart.js"; | |||
import ChartContainerVue from "../../components/ChartContainer.vue"; | |||
import chartMixin from "@/mixins/chart.js"; | |||
export default { | |||
name: "RightChartBase", | |||
@@ -63,7 +63,6 @@ import store from "@/store"; | |||
import DashboardHeader from "./dashboard/components/Header.vue"; | |||
import CompanyInfo from "./dashboard/components/CompanyInfo.vue"; | |||
import Container from "./dashboard/components/Container.vue"; | |||
import ChartContainer from "./dashboard/components/ChartContainer.vue"; | |||
import FtoChart from "./dashboard/charts/Fto.vue"; | |||
import ChipInvestChart from "./dashboard/charts/ChipInvest.vue"; | |||
import BipvChart from "./dashboard/charts/Bipv.vue"; | |||
@@ -91,7 +90,6 @@ export default { | |||
CompanyInfo, | |||
DbHeader: DashboardHeader, | |||
DbContainer: Container, | |||
ChartContainer, | |||
FtoChart, | |||
ChipInvestChart, | |||
ChipYieldChart, | |||