feat: 首页样式修改

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>

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>

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;

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>

src/pages/dataScreen/views/home/components/DefectLine.vue

@@ -41,7 +41,7 @@ setOptions(
       }
     },
     grid: {
-      bottom: "60px",
+      bottom: "30px",
       right: "20px",
       left: "60px",
       top: "30px"

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;
+}

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">

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
 ]);
 
 /**