update yield copilot
This commit is contained in:
DESKTOP-FUDKNA8\znjsz
@@ -3,7 +3,7 @@
|
||||
author: liubin
|
||||
date: 2024-04-10 08:54:33
|
||||
description:
|
||||
todo: 实现滑动条 和动态宽高
|
||||
todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高
|
||||
-->
|
||||
|
||||
<template>
|
||||
213
src/views/copilot/components/Container.vue
Normal file
213
src/views/copilot/components/Container.vue
Normal file
@@ -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>
|
||||
58
src/views/copilot/components/ContainerIcon.vue
Normal file
58
src/views/copilot/components/ContainerIcon.vue
Normal file
@@ -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>
|
||||
64
src/views/copilot/components/charts/StdOutput.vue
Normal file
64
src/views/copilot/components/charts/StdOutput.vue
Normal file
@@ -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>
|
||||
122
src/views/copilot/components/charts/double-ring-chart-options.js
Normal file
122
src/views/copilot/components/charts/double-ring-chart-options.js
Normal file
@@ -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,
|
||||
},
|
||||
],
|
||||
};
|
||||
13
src/views/copilot/components/charts/std-output-data.js
Normal file
13
src/views/copilot/components/charts/std-output-data.js
Normal file
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user