From bc7b730e6cc98390f4b233a79c046ad8cc4b4f90 Mon Sep 17 00:00:00 2001
From: JINGYJ <1458671527@qq.com>
Date: Thu, 29 Feb 2024 13:39:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E6=A0=B7=E5=BC=8F?=
=?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/dataScreen/common/homeDefectBg.svg | 64 ++++
src/assets/dataScreen/common/homeSmallBg.svg | 64 ++++
src/components/DsBox/src/dsBox2.tsx | 6 +
.../views/home/components/DefectBar3D.vue | 292 ++++++++++++++++++
.../views/home/components/DefectLine.vue | 2 +-
.../dataScreen/views/home/homeIndex.scss | 34 +-
src/pages/dataScreen/views/home/homeIndex.vue | 43 ++-
src/plugins/echarts/index.ts | 11 +-
8 files changed, 502 insertions(+), 14 deletions(-)
create mode 100644 src/assets/dataScreen/common/homeDefectBg.svg
create mode 100644 src/assets/dataScreen/common/homeSmallBg.svg
create mode 100644 src/pages/dataScreen/views/home/components/DefectBar3D.vue
diff --git a/src/assets/dataScreen/common/homeDefectBg.svg b/src/assets/dataScreen/common/homeDefectBg.svg
new file mode 100644
index 0000000..c3bb08c
--- /dev/null
+++ b/src/assets/dataScreen/common/homeDefectBg.svg
@@ -0,0 +1,64 @@
+<svg width="433" height="605" viewBox="0 0 433 605" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_iii_8677_100884)">
+<path d="M2 587.13V2H416.766L432 20.6778V587.13L418.24 604H15.76L2 587.13Z" fill="#00183E" fill-opacity="0.9"/>
+</g>
+<path d="M2 587.13V2H416.766L432 20.6778V587.13L418.24 604H15.76L2 587.13Z" stroke="#20A0FD" stroke-opacity="0.4" stroke-width="1.5"/>
+<path d="M413 27.88L415.88 25L425 34.12L422.12 37L413 27.88Z" fill="white"/>
+<path d="M378 2H416.86L432 19.6882V49" stroke="#2ABAF0" stroke-width="2"/>
+<g clip-path="url(#clip0_8677_100884)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0H451.786V50H3V0Z" fill="url(#paint0_linear_8677_100884)"/>
+<line x1="3" y1="49.5" x2="11" y2="49.5" stroke="#3656C8"/>
+<line x1="13" y1="49.5" x2="21" y2="49.5" stroke="#3656C8" stroke-opacity="0.6"/>
+<line x1="23" y1="49.5" x2="31" y2="49.5" stroke="#3656C8" stroke-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0H451.786V2H3V0Z" fill="url(#paint1_linear_8677_100884)"/>
+<rect x="3" y="17" width="2" height="16" fill="#3656C8"/>
+</g>
+<path opacity="0.3" d="M405.464 49.0007H37L37.7086 50C38.042 49.9963 405.909 49.9364 405.874 49.9963L409 46.0029C409 45.9993 408.479 45 408.479 45L405.464 49.0007Z" fill="#3656C8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M205.476 49H230.524V50H205.476V49Z" fill="url(#paint2_linear_8677_100884)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M405.528 47H421.554L418.027 50H402L405.528 47Z" fill="url(#paint3_linear_8677_100884)"/>
+<path d="M2 37V2H74" stroke="#2CCAFF" stroke-width="3"/>
+<defs>
+<filter id="filter0_iii_8677_100884" x="1.25" y="-2.75" width="431.5" height="611.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-4"/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_8677_100884"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-4"/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_8677_100884" result="effect2_innerShadow_8677_100884"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="effect2_innerShadow_8677_100884" result="effect3_innerShadow_8677_100884"/>
+</filter>
+<linearGradient id="paint0_linear_8677_100884" x1="3" y1="33.7505" x2="451.786" y2="33.7505" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3252C6" stop-opacity="0"/>
+<stop stop-color="#3252C6" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#3252C6" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_8677_100884" x1="3" y1="1.00164" x2="451.786" y2="1.00164" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3656C8"/>
+<stop offset="1" stop-color="#2994FC" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_8677_100884" x1="218" y1="49" x2="218" y2="50" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEF643"/>
+<stop offset="1" stop-color="#FFA217"/>
+</linearGradient>
+<linearGradient id="paint3_linear_8677_100884" x1="411.777" y1="47" x2="411.777" y2="50" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEF643"/>
+<stop offset="1" stop-color="#FFA217"/>
+</linearGradient>
+<clipPath id="clip0_8677_100884">
+<rect width="430" height="50" fill="white" transform="translate(3)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/dataScreen/common/homeSmallBg.svg b/src/assets/dataScreen/common/homeSmallBg.svg
new file mode 100644
index 0000000..b80eed1
--- /dev/null
+++ b/src/assets/dataScreen/common/homeSmallBg.svg
@@ -0,0 +1,64 @@
+<svg width="433" height="292" viewBox="0 0 433 292" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_iii_8677_100860)">
+<path d="M2 274.13V3H416.766L432 21.6778V274.13L418.24 291H15.76L2 274.13Z" fill="#00183E" fill-opacity="0.9"/>
+</g>
+<path d="M2 274.13V3H416.766L432 21.6778V274.13L418.24 291H15.76L2 274.13Z" stroke="#20A0FD" stroke-opacity="0.4" stroke-width="1.5"/>
+<path d="M413 12.88L415.88 10L425 19.12L422.12 22L413 12.88Z" fill="white"/>
+<path d="M378 3H416.86L432 20.6882V50" stroke="#2ABAF0" stroke-width="2"/>
+<g clip-path="url(#clip0_8677_100860)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 1H451.786V51H3V1Z" fill="url(#paint0_linear_8677_100860)"/>
+<line x1="3" y1="50.5" x2="11" y2="50.5" stroke="#3656C8"/>
+<line x1="13" y1="50.5" x2="21" y2="50.5" stroke="#3656C8" stroke-opacity="0.6"/>
+<line x1="23" y1="50.5" x2="31" y2="50.5" stroke="#3656C8" stroke-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 1H451.786V3H3V1Z" fill="url(#paint1_linear_8677_100860)"/>
+<rect x="3" y="18" width="2" height="16" fill="#3656C8"/>
+</g>
+<path opacity="0.3" d="M405.464 50.0007H37L37.7086 51C38.042 50.9963 405.909 50.9364 405.874 50.9963L409 47.0029C409 46.9993 408.479 46 408.479 46L405.464 50.0007Z" fill="#3656C8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M205.476 50H230.524V51H205.476V50Z" fill="url(#paint2_linear_8677_100860)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M405.528 48H421.554L418.027 51H402L405.528 48Z" fill="url(#paint3_linear_8677_100860)"/>
+<path d="M2 37V2H74" stroke="#2CCAFF" stroke-width="3"/>
+<defs>
+<filter id="filter0_iii_8677_100860" x="1.25" y="-1.75" width="431.5" height="297.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-4"/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_8677_100860"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-4"/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_8677_100860" result="effect2_innerShadow_8677_100860"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="effect2_innerShadow_8677_100860" result="effect3_innerShadow_8677_100860"/>
+</filter>
+<linearGradient id="paint0_linear_8677_100860" x1="3" y1="34.7505" x2="451.786" y2="34.7505" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3252C6" stop-opacity="0"/>
+<stop stop-color="#3252C6" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#3252C6" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_8677_100860" x1="3" y1="2.00164" x2="451.786" y2="2.00164" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3656C8"/>
+<stop offset="1" stop-color="#2994FC" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_8677_100860" x1="218" y1="50" x2="218" y2="51" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEF643"/>
+<stop offset="1" stop-color="#FFA217"/>
+</linearGradient>
+<linearGradient id="paint3_linear_8677_100860" x1="411.777" y1="48" x2="411.777" y2="51" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEF643"/>
+<stop offset="1" stop-color="#FFA217"/>
+</linearGradient>
+<clipPath id="clip0_8677_100860">
+<rect width="430" height="50" fill="white" transform="translate(3 1)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/DsBox/src/dsBox2.tsx b/src/components/DsBox/src/dsBox2.tsx
index e8fb470..2c80646 100644
--- a/src/components/DsBox/src/dsBox2.tsx
+++ b/src/components/DsBox/src/dsBox2.tsx
@@ -74,6 +74,12 @@ export default defineComponent({
case "w4h3":
options = {
width: "364px",
+ height: "604px"
+ };
+ break;
+ case "w5h1":
+ options = {
+ width: "434px",
height: "608px"
};
break;
diff --git a/src/pages/dataScreen/views/home/components/DefectBar3D.vue b/src/pages/dataScreen/views/home/components/DefectBar3D.vue
new file mode 100644
index 0000000..4b13d1b
--- /dev/null
+++ b/src/pages/dataScreen/views/home/components/DefectBar3D.vue
@@ -0,0 +1,292 @@
+<script setup lang="ts">
+import { useDark, useECharts } from "@pureadmin/utils";
+import { type PropType, ref, computed, watch, nextTick } from "vue";
+import * as echarts from "echarts/core";
+
+const props = defineProps({
+ requireData: {
+ type: Array as PropType<Array<number>>,
+ default: () => []
+ },
+ questionData: {
+ type: Array as PropType<Array<number>>,
+ default: () => []
+ }
+});
+
+const { isDark } = useDark();
+
+const theme = computed(() => (isDark.value ? "dark" : "light"));
+
+const DefectBar3dChartRef = ref();
+const { setOptions } = useECharts(DefectBar3dChartRef, {
+ theme
+});
+
+const name = ["9:00", "10:00", "11:00", "12:00", "13:00", "14:00"];
+const value = [100, 500, 400, 600, 700, 200];
+// const toolTims = null;
+const offsetX = 8;
+const offsetY = 4;
+// 绘制左侧面
+const CubeLeft = echarts.graphic.extendShape({
+ shape: {
+ x: 0,
+ y: 0
+ },
+ buildPath: function (ctx, shape) {
+ const xAxisPoint = shape.xAxisPoint;
+ const c0 = [shape.x, shape.y];
+ const c1 = [shape.x - offsetX, shape.y - offsetY];
+ const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+ const c3 = [xAxisPoint[0], xAxisPoint[1]];
+ ctx
+ .moveTo(c0[0], c0[1])
+ .lineTo(c1[0], c1[1])
+ .lineTo(c2[0], c2[1])
+ .lineTo(c3[0], c3[1])
+ .closePath();
+ }
+});
+// 绘制右侧面
+const CubeRight = echarts.graphic.extendShape({
+ shape: {
+ x: 0,
+ y: 0
+ },
+ buildPath: function (ctx, shape) {
+ const xAxisPoint = shape.xAxisPoint;
+ const c1 = [shape.x, shape.y];
+ const c2 = [xAxisPoint[0], xAxisPoint[1]];
+ const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+ const c4 = [shape.x + offsetX, shape.y - offsetY];
+ ctx
+ .moveTo(c1[0], c1[1])
+ .lineTo(c2[0], c2[1])
+ .lineTo(c3[0], c3[1])
+ .lineTo(c4[0], c4[1])
+ .closePath();
+ }
+});
+// 绘制顶面
+const CubeTop = echarts.graphic.extendShape({
+ shape: {
+ x: 0,
+ y: 0
+ },
+ buildPath: function (ctx, shape) {
+ const c1 = [shape.x, shape.y];
+ const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+ const c3 = [shape.x, shape.y - offsetX];
+ const c4 = [shape.x - offsetX, shape.y - offsetY];
+ ctx
+ .moveTo(c1[0], c1[1])
+ .lineTo(c2[0], c2[1])
+ .lineTo(c3[0], c3[1])
+ .lineTo(c4[0], c4[1])
+ .closePath();
+ }
+});
+// 注册三个面图形
+echarts.graphic.registerShape("CubeLeft", CubeLeft);
+echarts.graphic.registerShape("CubeRight", CubeRight);
+echarts.graphic.registerShape("CubeTop", CubeTop);
+
+watch(
+ () => props,
+ async () => {
+ await nextTick(); // 确保DOM更新完成后再执行
+ setOptions({
+ container: ".bar-card",
+ // color: ["#41b6ff", "#e85f33"],
+ // backgroundColor: "#010d3a",
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow"
+ },
+ formatter: function (params) {
+ const item = params[1];
+ return `${item.name}:${item.value}`;
+ }
+ },
+ grid: {
+ top: "8%",
+ left: "7%",
+ right: "7%",
+ bottom: "8%",
+ containLabel: true
+ },
+ // legend: {
+ // data: ["需求人数", "提问数量"],
+ // textStyle: {
+ // color: "#606266",
+ // fontSize: "0.875rem"
+ // },
+ // bottom: 0
+ // },
+ xAxis: [
+ {
+ type: "category",
+ data: name,
+ // X
+ axisLine: {
+ // 轴线设置
+ show: false // 显示轴线
+ },
+ axisTick: { alignWithLabel: true }, // 控制样式里的X轴字在中间距离Y轴还有点距离
+ axisLabel: {
+ // textStyle: {
+ color: "#737A85", //更改坐标轴文字颜色
+ fontSize: 12 //更改坐标轴文字大小
+ // }
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: "value",
+ // name: "单位：万",
+ axisLabel: {
+ // textStyle: {
+ color: "#737A85"
+ // }
+ },
+ nameTextStyle: {
+ color: "#737A85",
+ fontSize: 12,
+ lineHeight: 40
+ },
+ splitLine: {
+ lineStyle: {
+ type: "dashed",
+ color: "rgba(255,255,255,0.2)"
+ }
+ },
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ }
+ }
+ ],
+ series: [
+ {
+ // name: "",
+ type: "custom",
+ renderItem: (params, api) => {
+ const location = api.coord([api.value(0), api.value(1)]);
+ console.log("renderItem_api", location);
+
+ return {
+ type: "group",
+ children: [
+ {
+ type: "CubeLeft",
+ shape: {
+ api,
+ xValue: api.value(0),
+ yValue: api.value(1),
+ x: location[0],
+ y: location[1],
+ xAxisPoint: api.coord([api.value(0), 0])
+ },
+ style: {
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: "#21C7FF"
+ },
+ {
+ offset: 1,
+ color: "#428CFF"
+ }
+ ])
+ }
+ },
+ {
+ type: "CubeRight",
+ shape: {
+ api,
+ xValue: api.value(0),
+ yValue: api.value(1),
+ x: location[0],
+ y: location[1],
+ xAxisPoint: api.coord([api.value(0), 0])
+ },
+ style: {
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: "#21C7FF"
+ },
+ {
+ offset: 1,
+ color: "#428CFF"
+ }
+ ])
+ }
+ },
+ {
+ type: "CubeTop",
+ shape: {
+ api,
+ xValue: api.value(0),
+ yValue: api.value(1),
+ x: location[0],
+ y: location[1],
+ xAxisPoint: api.coord([api.value(0), 0])
+ },
+ style: {
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: "#21C7FF"
+ },
+ {
+ offset: 1,
+ color: "#428CFF"
+ }
+ ])
+ }
+ }
+ ]
+ };
+ },
+ data: value
+ },
+ {
+ // name: "",
+ type: "bar",
+ label: {
+ // normal: {
+ show: false,
+ position: "top",
+ formatter: e => {
+ return `${e.value}人`;
+ },
+ fontSize: 16,
+ color: "#43C4F1",
+ offset: [0, -15]
+ // }
+ },
+ itemStyle: {
+ color: "transparent"
+ },
+ tooltip: {},
+ data: value
+ }
+ ]
+ });
+ },
+ {
+ deep: true,
+ immediate: true
+ }
+);
+</script>
+
+<template>
+ <div ref="DefectBar3dChartRef" style="width: 100%; height: 100%" />
+</template>
diff --git a/src/pages/dataScreen/views/home/components/DefectLine.vue b/src/pages/dataScreen/views/home/components/DefectLine.vue
index 3a50e5e..908cab7 100644
--- a/src/pages/dataScreen/views/home/components/DefectLine.vue
+++ b/src/pages/dataScreen/views/home/components/DefectLine.vue
@@ -41,7 +41,7 @@ setOptions(
}
},
grid: {
- bottom: "60px",
+ bottom: "30px",
right: "20px",
left: "60px",
top: "30px"
diff --git a/src/pages/dataScreen/views/home/homeIndex.scss b/src/pages/dataScreen/views/home/homeIndex.scss
index fc8097e..e2381ac 100644
--- a/src/pages/dataScreen/views/home/homeIndex.scss
+++ b/src/pages/dataScreen/views/home/homeIndex.scss
@@ -1,5 +1,6 @@
-.left_box_1 {
- width: 430px;
+.left_box_1,
+.right_box_1 {
+ width: 434px;
height: 288px;
background: url("@/assets/svg/screenBgCommon.svg") no-repeat;
.warp {
@@ -27,6 +28,30 @@
}
}
}
+.left_box_2 {
+ width: 434px;
+ height: 608px;
+ .demo-tabs {
+ width: 100%;
+ height: 40px;
+ padding: 0 10px;
+ .el-tabs__item {
+ padding: 0 6px;
+ font-size: 14px;
+ color: rgba(255, 255, 255, 0.8);
+ }
+ .el-tabs__item.is-active {
+ color: #2de6ff; //选中
+ opacity: 1;
+ }
+ .el-tabs__nav-wrap::after {
+ background-color: transparent;
+ }
+ .el-tabs__active-bar {
+ background-color: #2de6ff;
+ }
+ }
+}
.mid {
width: 880px;
height: 94px;
@@ -93,9 +118,12 @@
}
.bg_home_item1 {
- background: url("@/assets/svg/screenBgCommon.svg") no-repeat;
+ background: url("@/assets/dataScreen/common/homeSmallBg.svg") no-repeat;
.alarm_scroll_box {
height: 230px;
overflow: hidden;
}
}
+.bg_home_item2 {
+ background: url("@/assets/dataScreen/common/homeDefectBg.svg") no-repeat;
+}
diff --git a/src/pages/dataScreen/views/home/homeIndex.vue b/src/pages/dataScreen/views/home/homeIndex.vue
index bc11a9e..9d48630 100644
--- a/src/pages/dataScreen/views/home/homeIndex.vue
+++ b/src/pages/dataScreen/views/home/homeIndex.vue
@@ -7,13 +7,15 @@
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
-import { reactive, ref, unref } from "vue";
+import { reactive, ref } from "vue";
import AlarmLine from "./components/AlarmLine.vue";
import DefectLine from "./components/DefectLine.vue";
+import DefectBar3D from "./components/DefectBar3D.vue";
import SeamlessScroll from "@/components/ReSeamlessScroll";
import AlarmInfoList from "../../components/alarmInfoList.vue";
import DeviceStatus from "../../components/deviceStatus.vue";
import ComputingPowerPie from "./components/ComputingPowerPie.vue";
+import type { TabsPaneContext } from "element-plus";
import { DsBox2 } from "@/components/DsBox";
@@ -74,10 +76,11 @@ const classOption = reactive({
direction: "top"
});
-// function changeDirection(val) {
-// (unref(scroll) as any).reset();
-// unref(classOption).direction = val;
-// }
+const activeName = ref("first");
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+ console.log(tab);
+};
</script>
<template>
<div class="flex justify-between w-full ds_home_wrap">
@@ -91,11 +94,35 @@ const classOption = reactive({
</template>
</DsBox2>
</div>
- <div class="left_box_1">
- <div class="box_header" style="height: 50px">总缺陷数</div>
+ <div class="left_box_2">
+ <DsBox2 title="总缺陷数" type="w5h1" bgClass="bg_home_item2">
+ <template #default>
+ <div class="w-full h-[244px]">
+ <DefectLine />
+ </div>
+ <div class="w-full h-[270px]">
+ <div class="w-full h-[40px]">
+ <el-tabs
+ v-model="activeName"
+ class="demo-tabs"
+ @tab-click="handleClick"
+ >
+ <el-tab-pane label="A项目缺陷数" name="first" />
+ <el-tab-pane label="B项目缺陷数" name="second" />
+ <el-tab-pane label="C项目缺陷数" name="third" />
+ <el-tab-pane label="D项目缺陷数" name="fourth" />
+ <el-tab-pane label="E项目缺陷数" name="first1" />
+ <el-tab-pane label="F项目缺陷数" name="second1" />
+ </el-tabs>
+ </div>
+ <DefectBar3D />
+ </div>
+ </template>
+ </DsBox2>
+ <!-- <div class="box_header" style="height: 50px">总缺陷数</div>
<div style="height: 238px; width: 100%">
<DefectLine />
- </div>
+ </div> -->
</div>
</div>
<div class="mid">
diff --git a/src/plugins/echarts/index.ts b/src/plugins/echarts/index.ts
index 723945f..2641a6a 100644
--- a/src/plugins/echarts/index.ts
+++ b/src/plugins/echarts/index.ts
@@ -1,7 +1,13 @@
import type { App } from "vue";
import * as echarts from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
-import { PieChart, BarChart, LineChart, CustomChart } from "echarts/charts";
+import {
+ PieChart,
+ BarChart,
+ LineChart,
+ CustomChart,
+ PictorialBarChart
+} from "echarts/charts";
import {
GridComponent,
TitleComponent,
@@ -28,7 +34,8 @@ use([
TooltipComponent,
DataZoomComponent,
VisualMapComponent,
- CustomChart
+ CustomChart,
+ PictorialBarChart
]);
/**