diff --git a/src/app/core/net/default.interceptor.ts b/src/app/core/net/default.interceptor.ts index fd454cb..bb81d6e 100644 --- a/src/app/core/net/default.interceptor.ts +++ b/src/app/core/net/default.interceptor.ts @@ -67,7 +67,7 @@ function handleData(injector: Injector, ev: HttpResponseBase, req: HttpRequest { // 统一加上服务端前缀 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); } diff --git a/src/app/routes/data-v/lj-card/lj-card.component.less b/src/app/routes/data-v/lj-card/lj-card.component.less index 7a1eebe..5aea341 100644 --- a/src/app/routes/data-v/lj-card/lj-card.component.less +++ b/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; } -} \ No newline at end of file + } +} diff --git a/src/app/routes/data-v/second1/blockbuster/blockbuster.component.html b/src/app/routes/data-v/second1/blockbuster/blockbuster.component.html new file mode 100644 index 0000000..f332542 --- /dev/null +++ b/src/app/routes/data-v/second1/blockbuster/blockbuster.component.html @@ -0,0 +1,11 @@ +
+
+ Car Image +
+
+ +
+
+ Car Image +
+
diff --git a/src/app/routes/data-v/second1/blockbuster/blockbuster.component.less b/src/app/routes/data-v/second1/blockbuster/blockbuster.component.less new file mode 100644 index 0000000..a7f3c70 --- /dev/null +++ b/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; +} diff --git a/src/app/routes/data-v/second1/blockbuster/blockbuster.component.ts b/src/app/routes/data-v/second1/blockbuster/blockbuster.component.ts new file mode 100644 index 0000000..bb9fcc3 --- /dev/null +++ b/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; + + 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; + } +} diff --git a/src/app/routes/data-v/second1/second1.component.html b/src/app/routes/data-v/second1/second1.component.html index e839afd..daf315f 100644 --- a/src/app/routes/data-v/second1/second1.component.html +++ b/src/app/routes/data-v/second1/second1.component.html @@ -1,22 +1,10 @@
- - + +
@@ -25,41 +13,42 @@ - - - - + +
+
-
-
- Car Image +
+
+
+
{{ '抬杆监控' }}
+
-
2.5D图
-
- Car Image +
+
+
{{ '3D监控' }}
+
- +
+
+
{{ '落杆监控' }}
+
+
+
+ +
+
+ + - +