#feat 重磅卡车svg

src/app/core/net/default.interceptor.ts

@@ -67,7 +67,7 @@ function handleData(injector: Injector, ev: HttpResponseBase, req: HttpRequest<a
 export const defaultInterceptor: HttpInterceptorFn = (req, next) => {
   // 统一加上服务端前缀
   let url = req.url;
-  if (!req.context.get(IGNORE_BASE_URL) && !url.startsWith('https://') && !url.startsWith('http://')) {
+  if (!req.context.get(IGNORE_BASE_URL) && !url.startsWith('https://') && !url.startsWith('http://') && !url.startsWith('assets')) {
     const { baseUrl } = environment.api;
     url = baseUrl + (baseUrl.endsWith('/') && url.startsWith('/') ? url.substring(1) : url);
   }

src/app/routes/data-v/lj-card/lj-card.component.less

@@ -1,104 +1,109 @@
 .card-top-content {
-    display: grid;
-    grid-template-columns: auto auto;
-    align-items: start;
-    justify-content: space-between;
-    margin-bottom: 10px;
-    
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: start;
+  justify-content: space-between;
+  margin-bottom: 10px;
+
 
 }
 
 /* 对于按钮和图标的容器 */
 .buttons-container {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end; /* 使按钮组靠右对齐 */
-  }
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  /* 使按钮组靠右对齐 */
+}
+
+.card-button,
+span[nz-icon] {
+  margin-left: 0.5rem;
+  /* 为按钮和图标添加一些间隔 */
+}
 
-  .card-button, span[nz-icon] {
-    margin-left: 0.5rem; /* 为按钮和图标添加一些间隔 */
-  }
-  
 .card-button {
-    cursor: pointer; 
-    width: 72px;
-    height: 40px;
-    font-size: 24px;
-    line-height: 20px;
-    color: rgb(0 239 248 / 100%);
-text-align: center;
-background-color: rgb(33 48 105 / 100%);
-    border: none; /* 假设你不想要边框 */
-border-radius: 3px;
-  }
+  cursor: pointer;
+  width: 72px;
+  height: 40px;
+  font-size: 24px;
+  line-height: 20px;
+  color: rgb(0 239 248 / 100%);
+  text-align: center;
+  background-color: rgb(33 48 105 / 100%);
+  border: none;
+  /* 假设你不想要边框 */
+  border-radius: 3px;
+}
 
 .card-content {
-    overflow: hidden;
+  overflow: hidden;
+  margin-bottom: 0.5rem;
+  //height: 18rem;
+  padding: 1rem 1.5rem;
+  padding: 1rem;
+
+  /* 调整内边距以适应内容 */
+  //position: relative;
+  background-image: url('/assets/dashboard/dashboard_card_bg.jpg');
+  background-repeat: no-repeat;
+
+  /* 防止背景图片重复 */
+  background-position: center;
+  // background-position: top;
+  background-size: 100% 100%;
+
+  .card-content-title {
+    display: flex;
+    flex-grow: 1;
+    /* 允许标题占据多余空间 */
+    align-items: center;
+
+    /* 确保子元素垂直居中 */
+    justify-content: space-between;
+    width: fit-content;
+    height: fit-content;
     margin-bottom: 0.5rem;
-    //height: 18rem;
-    padding: 1rem 1.5rem;
-    padding: 1rem;
-
-    /* 调整内边距以适应内容 */
-    //position: relative;
-    background-image: url('../../../../assets/dashboard/dashboard_card_bg.jpg');
-    background-repeat: no-repeat;
-
-    /* 防止背景图片重复 */
-    background-position: center;
-    // background-position: top;
-    background-size: 100% 100%;
-
-    .card-content-title {
-        display: flex;
-        flex-grow: 1; /* 允许标题占据多余空间 */
-        align-items: center;
-
-        /* 确保子元素垂直居中 */
-        justify-content: space-between;
-        width: fit-content;
-        height: fit-content;
-        margin-bottom: 0.5rem;
-        padding: 5px 20px 0;
-
-        /* 文本的内边距 */
-
-        /* 根据需要调整字体大小
+    padding: 5px 20px 0;
+
+    /* 文本的内边距 */
+
+    /* 根据需要调整字体大小
     font-weight: bold; /* 字体加粗 */
-        padding: 5px 20px;
+    padding: 5px 20px;
 
-        /* 根据实际情况调整这里的内边距 */
-        font-size: 28px;
-        font-weight: 600;
-        line-height: 22px;
+    /* 根据实际情况调整这里的内边距 */
+    font-size: 28px;
+    font-weight: 600;
+    line-height: 22px;
 
-        /* 字体颜色 */
-        color: #74FAFB;
-        color: rgb(0 239 248 / 100%);
-        text-align: center;
+    /* 字体颜色 */
+    color: #74FAFB;
+    color: rgb(0 239 248 / 100%);
+    text-align: center;
 
-        /* 文本居中对齐 */
-        background-color: #19426E;
+    /* 文本居中对齐 */
+    background-color: #19426E;
 
-        /* 设置背景颜色为深蓝色 */
-        border: 1px solid #1f6f97;
+    /* 设置背景颜色为深蓝色 */
+    border: 1px solid #1f6f97;
 
-        /* 设置边框颜色 */
-        border-radius: 10px 10px 0 0;
+    /* 设置边框颜色 */
+    border-radius: 10px 10px 0 0;
 
-        /* 上面是圆角，下面是直角 */
-        box-shadow: inset 0 0 10px #1f6f97;
+    /* 上面是圆角，下面是直角 */
+    box-shadow: inset 0 0 10px #1f6f97;
 
-        /* 内阴影效果 */
-        .card-content-l {
-            flex: 1;
-            align-self: flex-start;
+    /* 内阴影效果 */
+    .card-content-l {
+      flex: 1;
+      align-self: flex-start;
 
-            /* 占据剩余空间 */
-        }
+      /* 占据剩余空间 */
+    }
 
-        .card-content-r {
-            align-self: flex-end;
-        }
+    .card-content-r {
+      align-self: flex-end;
     }
-}
+  }
+}

src/app/routes/data-v/second1/blockbuster/blockbuster.component.html

@@ -0,0 +1,11 @@
+<div nz-row [nzGutter]="12" style="height: 13rem;">
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <img src="{{ defaultCarImage }}" alt="Car Image" style="width: 100%;height: 100%;" />
+  </div>
+  <div nz-col class="gutter-row" [nzSpan]="12" style="text-align: center;">
+    <canvas #canvas style="border:5px solid #00EFF8; height: 100%; width: 100%;"></canvas>
+  </div>
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <img src="{{ defaultCarImage }}" alt="Car Image" style="width: 100%; height: 100%;" />
+  </div>
+</div>

src/app/routes/data-v/second1/blockbuster/blockbuster.component.less

@@ -0,0 +1,9 @@
+.svg-container {
+  position: relative;
+}
+
+.svg-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+}

src/app/routes/data-v/second1/blockbuster/blockbuster.component.ts

@@ -0,0 +1,127 @@
+import { Component, OnInit, AfterViewInit, OnDestroy, OnChanges, SimpleChanges, Input, ViewChild, ElementRef, inject } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { HttpClient } from '@aspnet/signalr';
+import { _HttpClient } from '@delon/theme';
+import * as echarts from 'echarts';
+import { Observable } from 'rxjs';
+import { NzGridModule } from 'ng-zorro-antd/grid';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+
+@Component({
+  selector: 'blockbuster-component',
+  standalone: true,
+  templateUrl: './blockbuster.component.html',
+  styleUrls: ['./blockbuster.component.less'],
+  imports: [NzGridModule, NzIconModule]
+})
+export class BlockbusterComponent implements OnInit, OnDestroy, OnChanges {
+  private readonly http = inject(_HttpClient);
+  svgWc: any;
+  svgLcqtq: any;
+  svgLcqlx: any;
+  svgZcddxy: any; //汽车过衡（双向）重车单独向右
+  @ViewChild('canvas') canvasRef!: ElementRef<HTMLCanvasElement>;
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  ngOnInit(): void {
+    // const that = this;
+    // this.http.get('assets/blockbuster/qcghsx/wc.svg').then(data => {
+    //   that.svgContent1 = data.content;
+    // });
+    this.initSvg();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['options'] && !changes['options'].isFirstChange()) {
+      console.log('ChartComponentComponent ngOnChanges');
+    }
+  }
+
+  ngOnDestroy(): void {}
+
+  initSvg() {
+    let urlSvgWc = 'assets/blockbuster/wc.svg';
+
+    fetch(urlSvgWc)
+      .then(response => response.text())
+      .then(data => {
+        this.drawSVGtoCanvas(data, 0, 0, 1);
+      })
+      .catch(error => {
+        console.error('Failed to load SVG:', error);
+      });
+
+    let urlSvgZcddxy = 'assets/blockbuster/zcddxy.svg';
+
+    fetch(urlSvgZcddxy)
+      .then(response => response.text())
+      .then(data => {
+        this.drawSVGtoCanvas(data, 70, 22, 0.5);
+      })
+      .catch(error => {
+        console.error('Failed to load SVG:', error);
+      });
+
+    // let urlSvgLcqtq = 'assets/blockbuster/lcq/lcqtq.svg';
+
+    // fetch(urlSvgLcqtq)
+    //   .then(response => response.text())
+    //   .then(data => {
+    //     this.svgLcqtq = this.sanitizer.bypassSecurityTrustHtml(data);
+    //   })
+    //   .catch(error => {
+    //     console.error('Failed to load SVG:', error);
+    //   });
+
+    // let urlSvgLcqlx = 'assets/blockbuster/lcq/lcqlx.svg';
+
+    // fetch(urlSvgLcqlx)
+    //   .then(response => response.text())
+    //   .then(data => {
+    //     this.svgLcqlx = this.sanitizer.bypassSecurityTrustHtml(data);
+    //   })
+    //   .catch(error => {
+    //     console.error('Failed to load SVG:', error);
+    //   });
+
+    // let urlZcddxy = 'assets/blockbuster/qcghsx/zcddxy.svg';
+
+    // fetch(urlZcddxy)
+    //   .then(response => response.text())
+    //   .then(data => {
+    //     this.svgZcddxy = this.sanitizer.bypassSecurityTrustHtml(data);
+    //   })
+    //   .catch(error => {
+    //     console.error('Failed to load SVG:', error);
+    //   });
+  }
+
+  drawSVGtoCanvas(svgContent: string, x: number, y: number, scale: number): void {
+    const canvas = this.canvasRef.nativeElement;
+    const ctx = canvas.getContext('2d')!;
+    // 将 SVG 转换为 Blob
+    const blob = new Blob([svgContent], { type: 'image/svg+xml;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+
+    // 创建 Image 并绘制
+    const img = new Image();
+    img.onload = () => {
+      // 设置缩放比例
+      const scaledWidth = img.width * scale;
+      const scaledHeight = img.height * scale;
+
+      // 清空 Canvas
+      //canvas.width = scaledWidth;
+      //canvas.height = scaledHeight;
+
+      // 缩放绘制
+      ctx.drawImage(img, x, y, scaledWidth, scaledHeight);
+
+      // 简单地将图像依次绘制，这里没有处理重叠和布局
+      //ctx.drawImage(img, x, y); // 简单地横向排列
+      URL.revokeObjectURL(url); // 清理 URL
+    };
+    img.src = url;
+  }
+}

src/app/routes/data-v/second1/second1.component.html

@@ -1,22 +1,10 @@
 <div nz-row [nzGutter]="[12, 12]" style="display: flex; justify-content: space-between">
   <div style="display: flex; flex-direction: column; width: 23%">
     <app-data-v-lj-dashboard title="系统状态" style="width: 100%" />
-    <lj-app-ag-grid-component
-      style="width: 100%"
-      title="运行信息"
-      [defaultColDef]="defaultColDef"
-      [rowData]="rowData"
-      [columnDefs]="colDefs1"
-      [gridThemeClass]="gridThemedClass"
-    />
-    <lj-app-ag-grid-component
-      style="width: 100%"
-      title="系统报警信息"
-      [defaultColDef]="defaultColDef"
-      [rowData]="rowData"
-      [columnDefs]="colDefs1"
-      [gridThemeClass]="gridThemedClass"
-    />
+    <lj-app-ag-grid-component style="width: 100%" title="运行信息" [defaultColDef]="defaultColDef" [rowData]="rowData"
+      [columnDefs]="colDefs1" [gridThemeClass]="gridThemedClass" />
+    <lj-app-ag-grid-component style="width: 100%" title="系统报警信息" [defaultColDef]="defaultColDef" [rowData]="rowData"
+      [columnDefs]="colDefs1" [gridThemeClass]="gridThemedClass" />
   </div>
 
   <div style="display: flex; flex-direction: column; width: 43%">
@@ -25,41 +13,42 @@
       <button class="lock-button">
         <img class="logo" src="./assets/lock.svg" />
       </button>
-      <button class="standard-button">概要</button>
-      <button class="standard-button">详情</button>
-      <!-- <button class="standard-button">操作</button> -->
-      <button class="standard-button">审计</button>
+      <button class="standard-button">操作</button>
       <button class="standard-button">校磅</button>
+      <button class="standard-button">防作弊</button>
     </div>
+
     <div class="car-status-container">
-      <div class="row" *ngFor="let item of items; let i = index">
-        <div class="item">
-          <img src="./assets/car0.jpg" alt="Car Image" />
+      <div nz-row [nzGutter]="12">
+        <div nz-col class="gutter-row" [nzSpan]="6" style="text-align: center;">
+          <div class="card-content-title">
+            <div class="card-content-l">{{ '抬杆监控' }}</div>
+          </div>
         </div>
-        <div class="item"> 2.5D图 </div>
-        <div class="item">
-          <img src="./assets/car0.jpg" alt="Car Image" />
+        <div nz-col class="gutter-row" [nzSpan]="12" style="text-align: center;">
+          <div class="card-content-title">
+            <div class="card-content-l">{{ '3D监控' }}</div>
+          </div>
         </div>
-        <!-- <div class="info-container">
-          <div class="info-button">车牌号: 苏E8888</div>
-          <div class="info-button">卡车种类:重型火卡</div>
-          <div class="info-button">重量:30吨</div>
-        </div> -->
+        <div nz-col class="gutter-row" [nzSpan]="6" style="text-align: center;">
+          <div class="card-content-title">
+            <div class="card-content-l">{{ '落杆监控' }}</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="row" *ngFor="let item of items; let i = index">
+        <blockbuster-component style="margin-bottom: 0.5rem;"></blockbuster-component>
       </div>
     </div>
   </div>
 
   <div style="display: flex; flex-direction: column; width: 30%">
+
+
     <!-- </data-v-card> -->
-    <lj-app-ag-grid-component
-      [showPageTurning]="false"
-      [showEditButton]="true"
-      title="今日汇总"
-      [defaultColDef]="defaultColDef"
-      [rowData]="rowData"
-      [columnDefs]="colDefs2"
-      [gridThemeClass]="gridThemedClass"
-    />
+    <lj-app-ag-grid-component [showPageTurning]="false" [showEditButton]="true" title="今日汇总"
+      [defaultColDef]="defaultColDef" [rowData]="rowData" [columnDefs]="colDefs2" [gridThemeClass]="gridThemedClass" />
     <app-data-v-lj-car-info-table style="width: 100%" />
     <!--   
 

src/app/routes/data-v/second1/second1.component.less

@@ -25,273 +25,337 @@
 
 /* 分页器 */
 
-.ag-header-center .ag-header-group-cell-label, 
+.ag-header-center .ag-header-group-cell-label,
 .ag-header-center .ag-header-cell-label {
-    display: grid;
-    justify-content: center;
-    color: #000;
-    text-align: center;
-    background: #000;
+  display: grid;
+  justify-content: center;
+  color: #000;
+  text-align: center;
+  background: #000;
 }
 
 ::ng-deep .ag-theme-datav ::ng-deep .ag-row-selected .ag-ltr .ag-cell {
-    color: red !important;
+  color: red !important;
 }
 
 //   选中行样式
 ::ng-deep .ag-theme-datav ::ng-deep .ag-ltr .ag-row-focus {
-    font-weight: 600;
-    color: red;
+  font-weight: 600;
+  color: red;
 
-    .ag-cell-focus {
-        border: #74FAFB;
-    }
+  .ag-cell-focus {
+    border: #74FAFB;
+  }
 
-    .ag-grid-button-style {
-        color: red;
-        border-color: red;
-    }
+  .ag-grid-button-style {
+    color: red;
+    border-color: red;
+  }
 }
 
 
 
 
 ::ng-deep .ag-theme-datav {
-    --ag-border-color: #74FAFB;
-    --ag-foreground-color: #74FAFB;
-    --ag-background-color: #0A1632;
-    --ag-header-foreground-color: #74FAFB;
-    --ag-header-background-color: #0A1632;
-    --ag-odd-row-background-color: #0A1632;
-    --ag-header-column-resize-handle-color: rgb(126 46 132);
-    --ag-font-size: 12px;
-    --ag-font-family: monospace;
-
-    height: 17rem;
-    font-weight: 700;
-    //竖线颜色
-    border-width: 3px;
-    &:extend(.ag-theme-material);
-
-    //标题间的 竖线
-    ::ng-deep .ag-header-cell-resize {
-        --ag-header-column-resize-handle-color: #00eff8;
-    }
+  --ag-border-color: #74FAFB;
+  --ag-foreground-color: #74FAFB;
+  --ag-background-color: #0A1632;
+  --ag-header-foreground-color: #74FAFB;
+  --ag-header-background-color: #0A1632;
+  --ag-odd-row-background-color: #0A1632;
+  --ag-header-column-resize-handle-color: rgb(126 46 132);
+  --ag-font-size: 12px;
+  --ag-font-family: monospace;
+
+  height: 17rem;
+  font-weight: 700;
+  //竖线颜色
+  border-width: 3px;
+  &:extend(.ag-theme-material);
+
+  //标题间的 竖线
+  ::ng-deep .ag-header-cell-resize {
+    --ag-header-column-resize-handle-color: #00eff8;
+  }
 
-    ::ng-deep .ag-header-row {
-        font-size: 14px;
-        font-weight: 700;
-    }
+  ::ng-deep .ag-header-row {
+    font-size: 14px;
+    font-weight: 700;
+  }
 
-    //外边框去掉圆角
-    ::ng-deep .ag-root-wrapper {
-        border-radius: 0;
-    }
+  //外边框去掉圆角
+  ::ng-deep .ag-root-wrapper {
+    border-radius: 0;
+  }
 }
 
 /* 设置滚动条的宽度 */
 ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar {
-    width: 12em;
+  width: 12em;
 
 }
 
 /* 设置滚动条滑块的样式 */
 ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
-    margin-left: 40px;
-    background-color: #00eff8;
+  margin-left: 40px;
+  background-color: #00eff8;
 
-    /* 圆角 */
-    border: 2px solid #00eff8;
+  /* 圆角 */
+  border: 2px solid #00eff8;
 
-    /* 滚动条滑块的背景颜色 */
+  /* 滚动条滑块的背景颜色 */
 
 
-    /* 滚动条滑块的边框 */
+  /* 滚动条滑块的边框 */
 }
 
 
 
 /* 设置滚动条轨道的样式 */
 ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track {
-    background-color: transparent;
-    border-color: #00eff8;
+  background-color: transparent;
+  border-color: #00eff8;
 
-    /* 滚动条轨道的背景颜色 */
+  /* 滚动条轨道的背景颜色 */
 }
 
 /* 设置滚动条滑块悬浮时的样式 */
 ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
-    margin-left: 40px;
-    background-color: #00eff8;
+  margin-left: 40px;
+  background-color: #00eff8;
 
-    /* 滚动条滑块悬浮时的背景颜色 */
+  /* 滚动条滑块悬浮时的背景颜色 */
 }
 
 /* 设置滚动条滑块激活（即正在拖动滑块）时的样式 */
 ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:active {
-    background-color: #00eff8;
+  background-color: #00eff8;
 
-    /* 滚动条滑块激活时的背景颜色 */
+  /* 滚动条滑块激活时的背景颜色 */
 }
 
 //竖向
 ::ng-deep .ag-body-vertical-scroll-viewport {
-    scrollbar-color: auto;
+  scrollbar-color: auto;
 }
 
 //横向
 ::ng-deep .ag-body-horizontal-scroll-viewport {
-    scrollbar-color: auto;
+  scrollbar-color: auto;
 }
 
 /* 设置滚动条的宽度 */
 ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar {
-    height: 14em;
-    color: #000;
+  height: 14em;
+  color: #000;
 }
 
 /* 设置横向滚动条轨道的样式 */
 ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track {
-    background-color: transparent;
-    border-color: #00eff8;
+  background-color: transparent;
+  border-color: #00eff8;
 }
 
 /* 设置横向滚动条滑块悬浮时的样式 */
 ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover {
-    background-color: #00eff8;
+  background-color: #00eff8;
 }
 
 /* 设置横向滚动条滑块激活时的样式 */
 ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:active {
-    background-color: #00eff8;
+  background-color: #00eff8;
 }
 
 /* 设置横向滚动条滑块的颜色 */
 ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
-    background-color: #00eff8;
+  background-color: #00eff8;
 }
 
 /* button-component.component.css */
 .button-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    // background-color: #2c3e50; // 你可以根据需要调整颜色
-  }
-  
-  .lock-button, .standard-button, .highlighted-button {
-    margin: 5px;
-    padding: 10px 15px;
-    font-size: 20px;
-    color: white;
-    border: none;
-  }
-  
-  .lock-button {
-    background-color: transparent;
-  }
-  
-  .standard-button {
-    font-size: 20px;
-    font-weight: bold;
-    line-height: 20px;
-    color: rgb(107 236 246 / 100%);
-    text-align: center;
-    background-color: rgb(33 48 105 / 100%);
-    border-radius: 3px;
-  }
-  
-  .highlighted-button {
-    background-color: #3498db; // 你可以根据需要调整颜色
-    border-radius: 10px;
-  }
-  
-  .fa-lock {
-    margin-right: 5px;
-  }
+  display: flex;
+  align-items: center;
+  // justify-content: space-between;
+  // background-color: #2c3e50; // 你可以根据需要调整颜色
+}
 
-  .logo{
-    width: 65px;
-    // height: ;
-  }
+.lock-button,
+.standard-button,
+.highlighted-button {
+  margin: 5px;
+  padding: 10px 15px;
+  font-size: 20px;
+  color: white;
+  border: none;
+}
 
-  .car-status-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    margin: 1vw;
-    margin-top: 10px;
-    background-image: url("/assets/car-status-bg.png");
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-  }
-  
-  .row {
-    display: flex;
-    align-items: stretch; /* 保持相同高度 */
-    justify-content: space-between; /* 子组件间平均分布 */
-    margin-bottom: 20px; /* 每行之间的间距 */
-  }
-  
-  .item {
-    flex-basis: 100px;
-    flex-grow: 1;
-    margin: 10px;
-    margin-top: 20px;
-  }
+.lock-button {
+  background-color: transparent;
+}
 
-  .item:nth-child{
-    flex-grow: 6;
-  }
-  
-  .item img {
-    width: 200px;
-    height: 200px;
-    margin: 10px;
-    object-fit: contain; /* 保持图片的宽高比 */
-  }
-  
-  .info-container {
-    display: flex;
-    // flex: 1; /* 同样的，让信息容器也占据等同的空间 */
-    flex-direction: column;
-    justify-content: space-around;
-    margin: 0 10px;
-  }
+.standard-button {
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 20px;
+  color: rgb(107 236 246 / 100%);
+  text-align: center;
+  background-color: rgb(33 48 105 / 100%);
+  border-radius: 3px;
+}
 
-  .model-container{
-    display: flex;
-    flex: 1; /* 同样的，让信息容器也占据等同的空间 */
-    flex-direction: column;
-    justify-content: space-around;
-    margin: 0 10px;
-  }
-  
-  
-  .info-button {
-    margin: 5px 0;
-    padding: 10px;
-    color: white;
-    text-align: center;
-    background-color: #007bff;
-    border-radius: 5px;
-    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
-  }
+.highlighted-button {
+  background-color: #3498db; // 你可以根据需要调整颜色
+  border-radius: 10px;
+}
+
+.fa-lock {
+  margin-right: 5px;
+}
+
+.logo {
+  width: 55px;
+  // height: ;
+}
 
-  [nz-carousel-content] {
-    overflow: hidden;
-    width: 150px;  /* 调整宽度 */
-    height: 80px;  /* 调整高度 */
-    color: #fff;
-    text-align: center;
-    background: #364d79;
+.car-status-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  // height: 100%;
+  margin: 1vw;
+  margin-top: 5px;
+  padding: 1rem;
+  background-image: url("/assets/dashboard/dashboard_card_bg.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+
+.row {
+  display: flex;
+  align-items: stretch;
+  /* 保持相同高度 */
+  justify-content: space-between;
+  /* 子组件间平均分布 */
+  margin-bottom: 20px;
+  /* 每行之间的间距 */
+}
+
+.item {
+  flex-basis: 100px;
+  flex-grow: 1;
+  margin: 10px;
+  margin-top: 20px;
+}
+
+.item:nth-child {
+  flex-grow: 6;
+}
+
+.item img {
+  width: 200px;
+  height: 200px;
+  margin: 10px;
+  object-fit: contain;
+  /* 保持图片的宽高比 */
+}
+
+.info-container {
+  display: flex;
+  // flex: 1; /* 同样的，让信息容器也占据等同的空间 */
+  flex-direction: column;
+  justify-content: space-around;
+  margin: 0 10px;
+}
+
+.model-container {
+  display: flex;
+  flex: 1;
+  /* 同样的，让信息容器也占据等同的空间 */
+  flex-direction: column;
+  justify-content: space-around;
+  margin: 0 10px;
+}
+
+
+.info-button {
+  margin: 5px 0;
+  padding: 10px;
+  color: white;
+  text-align: center;
+  background-color: #007bff;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+}
+
+[nz-carousel-content] {
+  overflow: hidden;
+  width: 150px;
+  /* 调整宽度 */
+  height: 80px;
+  /* 调整高度 */
+  color: #fff;
+  text-align: center;
+  background: #364d79;
+}
+
+
+h3 {
+  user-select: none;
+  margin-bottom: 0;
+  color: #fff;
+}
+
+.card-content-title {
+  // display: flex;
+  // flex-grow: 1;
+  /* 允许标题占据多余空间 */
+  align-items: center;
+
+  /* 确保子元素垂直居中 */
+  // justify-content: space-between;
+  width: fit-content;
+  height: fit-content;
+  margin-bottom: 0.5rem;
+  padding: 5px 20px 0;
+
+  /* 文本的内边距 */
+
+  /* 根据需要调整字体大小
+font-weight: bold; /* 字体加粗 */
+  padding: 5px 20px;
+
+  /* 根据实际情况调整这里的内边距 */
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 22px;
+
+  /* 字体颜色 */
+  color: #74FAFB;
+  color: rgb(0 239 248 / 100%);
+  text-align: center;
+
+  /* 文本居中对齐 */
+  background-color: #19426E;
+
+  /* 设置背景颜色为深蓝色 */
+  border: 1px solid #1f6f97;
+
+  /* 设置边框颜色 */
+  border-radius: 10px 10px 0 0;
+
+  /* 上面是圆角，下面是直角 */
+  box-shadow: inset 0 0 10px #1f6f97;
+
+  /* 内阴影效果 */
+  .card-content-l {
+    flex: 1;
+    align-self: flex-start;
+
+    /* 占据剩余空间 */
   }
-  
 
-  h3 {
-    user-select: none;
-    margin-bottom: 0;
-    color: #fff;
-  }
+  .card-content-r {
+    align-self: flex-end;
+  }
+}

src/app/routes/data-v/second1/second1.component.ts

@@ -17,6 +17,7 @@ import { DataVTitleComponent } from '../title/title.component';
 import { AgGridComponentComponent } from '../workstation/ag-grid-component/ag-grid-component.component';
 import { GridButtonValueRenderer } from '../workstation/grid-button/grid-button';
 import { LjAgGridComponentComponent } from '../workstation/lj-ag-grid-component/lj-ag-grid-component.component';
+import { BlockbusterComponent } from './blockbuster/blockbuster.component';
 @Component({
   selector: 'app-data-v-s1',
   standalone: true,
@@ -37,7 +38,8 @@ import { LjAgGridComponentComponent } from '../workstation/lj-ag-grid-component/
     CommonModule,
     ...SHARED_IMPORTS,
     DataVLjCarInfoTableComponent,
-    DataVT1Component
+    DataVT1Component,
+    BlockbusterComponent
   ]
 })
 export class DataVSecond1Component implements OnInit {

src/assets/blockbuster/zsd/hd.svg

@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 103.61 180.33"><defs><style>.cls-1{fill:none;}.cls-2{fill:url(#linear-gradient);}.cls-3{clip-path:url(#clip-path);}.cls-4{fill:url(#linear-gradient-2);}.cls-5{clip-path:url(#clip-path-2);}.cls-6{fill:url(#linear-gradient-3);}.cls-7{fill:#3d3e3d;}.cls-8{fill:#050001;}.cls-9{fill:#0f100e;}.cls-10{fill:#ef0012;}</style><linearGradient id="linear-gradient" x1="2793.27" y1="412.14" x2="2816.72" y2="412.14" gradientTransform="matrix(-0.98, -0.05, -0.06, 1.18, 2814, -198.41)" gradientUnits="userSpaceOnUse"><stop offset="0.01" stop-color="#fff"/><stop offset="0.06" stop-color="#fdfdfd"/><stop offset="0.6" stop-color="#ebebec"/><stop offset="1" stop-color="#e5e5e6"/></linearGradient><clipPath id="clip-path"><polygon class="cls-1" points="54.42 152.02 50.25 152.02 48.12 14.58 52.3 14.58 54.42 152.02"/></clipPath><linearGradient id="linear-gradient-2" x1="992.21" y1="-265.06" x2="992.31" y2="-265.06" gradientTransform="matrix(-43.42, 0.01, -0.67, -43.46, 42956.62, -11446.56)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8c9298"/><stop offset="0.14" stop-color="#b8bbbe"/><stop offset="0.26" stop-color="#a0b3c0"/><stop offset="0.46" stop-color="#fff"/><stop offset="0.58" stop-color="#c9c9c9"/><stop offset="0.69" stop-color="#787e82"/><stop offset="0.83" stop-color="#343f47"/><stop offset="1" stop-color="#939699"/></linearGradient><clipPath id="clip-path-2"><polygon class="cls-1" points="54.42 152.51 50.25 152.51 48.12 15.07 52.3 15.07 54.42 152.51"/></clipPath><linearGradient id="linear-gradient-3" x1="992.21" y1="-265.07" x2="992.31" y2="-265.07" xlink:href="#linear-gradient-2"/></defs><title>汽车过衡（双向）0609</title><path class="cls-2" d="M41.21,151.22c-.15,2.93,4.86,5.57,11.18,5.88S64,155.29,64.1,152.36s-4.86-5.57-11.18-5.88S41.35,148.29,41.21,151.22Z"/><g class="cls-3"><polygon class="cls-4" points="52.3 14.58 48.12 14.58 50.25 152.02 54.42 152.02 52.3 14.58"/></g><g class="cls-5"><polygon class="cls-6" points="52.3 15.07 48.12 15.07 50.25 152.51 54.42 152.51 52.3 15.07"/></g><path class="cls-7" d="M38.64,58.81l25-.1c3.06,0,5.53-1.87,5.51-4.15L68.8,15c0-2.27-2.52-4.11-5.58-4.1l-25,.1c-3.06,0-5.53,1.87-5.51,4.15l.31,39.58c0,2.28,2.52,4.12,5.58,4.11"/><path class="cls-8" d="M36.4,15.31a4.24,4.24,0,0,1,1.75-.4L60,14.83a4.14,4.14,0,0,1,4.17,4.1l.28,34.4c0,.9-.49,1.33-1,2,1.41-.66,2.59-1.68,2.57-3.33l-.27-34.4a4.16,4.16,0,0,0-4.18-4.1l-21.87.09a4.14,4.14,0,0,0-3.34,1.71"/><path class="cls-9" d="M36.82,14.66a3.92,3.92,0,0,1,1-.31,4.26,4.26,0,0,1,.8-.08l21.88-.09a4.16,4.16,0,0,1,4.18,4.1l.27,34.4a4.15,4.15,0,0,1-.25,1.46,4.31,4.31,0,0,1-.52,1,4.13,4.13,0,0,1-1.76.39l-21.87.09a4.16,4.16,0,0,1-4.18-4.1l-.27-34.4a4.07,4.07,0,0,1,.77-2.43"/><path class="cls-10" d="M59.23,27.76l-2.58-2.92a1.17,1.17,0,0,0-1.74-.25L50,29.92l-4.38-5.23a1.16,1.16,0,0,0-1.73.16l-2.66,2.77a1.47,1.47,0,0,0-.26,1.9l4.49,5.37-4.82,5.26a1.53,1.53,0,0,0,.19,2L43.44,45a1.17,1.17,0,0,0,1.74.24l4.71-5.14,4.55,5.43a1.15,1.15,0,0,0,1.73-.16l2.66-2.76a1.5,1.5,0,0,0,.27-1.91l-4.67-5.57,5-5.45A1.51,1.51,0,0,0,59.23,27.76Z"/></svg>

src/assets/blockbuster/zsd/ld.svg

@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 112.39 176.1"><defs><style>.cls-1{fill:none;}.cls-2{fill:url(#linear-gradient);}.cls-3{clip-path:url(#clip-path);}.cls-4{fill:url(#linear-gradient-2);}.cls-5{clip-path:url(#clip-path-2);}.cls-6{fill:url(#linear-gradient-3);}.cls-7{fill:#3d3e3d;}.cls-8{fill:#050001;}.cls-9{fill:#0f100e;}.cls-10{fill:#0dce2c;}</style><linearGradient id="linear-gradient" x1="2533.93" y1="407.24" x2="2557.39" y2="407.24" gradientTransform="matrix(-0.98, -0.05, -0.06, 1.18, 2565.92, -204.52)" gradientUnits="userSpaceOnUse"><stop offset="0.01" stop-color="#fff"/><stop offset="0.06" stop-color="#fdfdfd"/><stop offset="0.6" stop-color="#ebebec"/><stop offset="1" stop-color="#e5e5e6"/></linearGradient><clipPath id="clip-path"><polygon class="cls-1" points="59.69 152.74 55.51 152.74 53.39 15.3 57.56 15.3 59.69 152.74"/></clipPath><linearGradient id="linear-gradient-2" x1="863.64" y1="-265.07" x2="863.74" y2="-265.07" gradientTransform="matrix(-43.42, 0.01, -0.67, -43.46, 37379.3, -11445.1)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8c9298"/><stop offset="0.14" stop-color="#b8bbbe"/><stop offset="0.26" stop-color="#a0b3c0"/><stop offset="0.46" stop-color="#fff"/><stop offset="0.58" stop-color="#c9c9c9"/><stop offset="0.69" stop-color="#787e82"/><stop offset="0.83" stop-color="#343f47"/><stop offset="1" stop-color="#939699"/></linearGradient><clipPath id="clip-path-2"><polygon class="cls-1" points="59.69 153.23 55.51 153.23 53.39 15.79 57.56 15.79 59.69 153.23"/></clipPath><linearGradient id="linear-gradient-3" x1="863.64" y1="-265.08" x2="863.74" y2="-265.08" xlink:href="#linear-gradient-2"/></defs><title>汽车过衡（双向）0609</title><path class="cls-2" d="M46.47,151.94c-.15,2.94,4.86,5.57,11.18,5.89s11.57-1.81,11.71-4.75-4.86-5.57-11.18-5.88S46.62,149,46.47,151.94Z"/><g class="cls-3"><polygon class="cls-4" points="57.56 15.3 53.39 15.3 55.51 152.74 59.69 152.74 57.56 15.3"/></g><g class="cls-5"><polygon class="cls-6" points="57.56 15.79 53.39 15.79 55.51 153.23 59.69 153.23 57.56 15.79"/></g><path class="cls-7" d="M43.91,59.53l25-.1c3.07,0,5.54-1.87,5.52-4.15L74.06,15.7c0-2.28-2.51-4.12-5.58-4.11l-25,.1c-3.07,0-5.54,1.87-5.52,4.15l.32,39.58c0,2.28,2.52,4.12,5.58,4.11"/><path class="cls-8" d="M41.66,16a4.13,4.13,0,0,1,1.76-.39l21.87-.09a4.16,4.16,0,0,1,4.18,4.1l.27,34.4c0,.91-.49,1.33-1,2,1.41-.67,2.58-1.68,2.57-3.34l-.28-34.39a4.15,4.15,0,0,0-4.17-4.11L45,14.32A4.15,4.15,0,0,0,41.66,16"/><path class="cls-9" d="M42.08,15.38a4,4,0,0,1,1-.31,4.26,4.26,0,0,1,.8-.08l21.87-.09A4.16,4.16,0,0,1,69.89,19l.28,34.4a4.11,4.11,0,0,1-.26,1.46,3.94,3.94,0,0,1-.52,1,4.08,4.08,0,0,1-1.75.39l-21.87.09a4.16,4.16,0,0,1-4.18-4.1l-.28-34.4a4.16,4.16,0,0,1,.77-2.43"/><polygon class="cls-10" points="46.43 31.1 56.35 18.13 66.65 30.59 60.9 30.74 61.15 47.71 52.42 47.93 52.17 30.95 46.43 31.1"/></svg>