nicolas/kdemo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

颜色修改

Browse Source
This commit is contained in:
nicomacbookpro
2025-08-20 15:19:33 +08:00
parent fb2b8515ee
commit 120f31aa9e
2 changed files with 1919 additions and 1884 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/utils/three.js
View File

@@ -35,7 +35,7 @@ import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js"; //
function createDashedLinesForBall(
ball,
scene,
{ dashSize = 1, gapSize = 1, color = 0x7ec8ff, arrowSize=1 } = {}
{ dashSize = 1, gapSize = 1, color = 0x7ec8ff, arrowSize = 1 } = {}
) {
const makeLine = (direction) => {
// 用 BufferGeometry+LineDashedMaterial 创建一条虚线
@@ -75,7 +75,7 @@ function createDashedLinesForBall(
arrowHelper.line.material.opacity = 0.6;
// 设置箭头头部透明度
arrowHelper.cone.material = new THREE.MeshBasicMaterial({
color: color,
color: "#00ff00",
transparent: true, // 必须设置为true
opacity: 0.6, // 与线段相同的透明度
});
@@ -179,7 +179,7 @@ function updateDashedLines(ball) {
// 更新后方向虚线及箭头
updateLineAndArrow(
dashedLines.back,
[ballPos.x, ballPos.y, ballPos.z-1 ],
[ballPos.x, ballPos.y, ballPos.z - 1],
[ballPos.x, ballPos.y, 0], // 假设后面在z=0
radius
);
@@ -633,8 +633,8 @@ export function drawAxes(element, options = {}, ballCallBack) {
styleGroups[el.name] = null;
});
styleGroups["灰球"] = null;
const geometryColors = [
"#f617d9",
const lineGeometryColors = [
"#0x00ff00",
"#779c6e",
"#3ee4bc",
"#ca41e7",
@@ -642,6 +642,15 @@ export function drawAxes(element, options = {}, ballCallBack) {
"#7467ef",
"#c7bef7",
];
const geometryColors = [
"#888888",
"#888888",
"#888888",
"#888888",
"#888888",
"#888888",
"#888888",
];
const ballScene = new THREE.Group();
geometryColors.forEach((el) => {
// 几何体
@@ -718,7 +727,7 @@ export function drawAxes(element, options = {}, ballCallBack) {
createDashedLinesForBall(n, scene, {
dashSize: 1,
gapSize: 1,
color: geometryColors[idx],
color: lineGeometryColors[idx],
arrowSize: 8,
}); // 给每个球加三条投影虚线
updateDashedLines(n);
@@ -749,7 +758,7 @@ export function drawAxes(element, options = {}, ballCallBack) {
createDashedLinesForBall(ball, scene, {
dashSize: 1,
gapSize: 1,
color: geometryColors[modelIndex],
color: lineGeometryColors[modelIndex],
});
updateDashedLines(ball);
}
@@ -1204,7 +1213,7 @@ export function drawAxes(element, options = {}, ballCallBack) {
// 创建坐标轴
async function addPositiveAxes(scene,sizeX, sizeY,sizeZ) {
async function addPositiveAxes(scene, sizeX, sizeY, sizeZ) {
// 创建X轴（红色，只显示正向）
const xAxis = new THREE.ArrowHelper(

94
src/views/bigScreen/home/index.vue
View File

@@ -33,7 +33,7 @@
<div class="icon_1" :class="{ backColor: el.state == '1' }"></div>
<span class="text_gradual head_text"> {{ el.label }}</span>
</div>
<div class="tooltip_content" @click="handleClick(el,i)">
<div class="tooltip_content" @click="handleClick(el, i)">
<div class="content_1">
<img :src="el.url" alt="" style="width: 100%; height: 100%;">
</div>
@@ -67,7 +67,7 @@ export default {
return {
diaUrl: '',
isShow: false,
legendList: [ ],
legendList: [],
tipLengthR: [
{ state: '0', label: this.$dictLabel('right_title1'), url: '/1.png' },
{ state: '0', label: this.$dictLabel('right_title2'), url: '/2.png' },
@@ -269,7 +269,7 @@ export default {
}
},
methods: {
async init(){
async init() {
let res = await lastData()
if (res.code == 0) {
const data = res.data
@@ -345,7 +345,7 @@ export default {
const sceneBox = document.getElementById('webgl');
const options = {
gridSize: { x: sizeX * 10, y: sizeY * 10 , z: sizeZ * 10 }, // 三维网格尺寸
gridSize: { x: sizeX * 10, y: sizeY * 10, z: sizeZ * 10 }, // 三维网格尺寸
grid_uv_back: [sizeX, sizeY], // [z,y]
grid_uv_left: [sizeZ, sizeY], // [x,y]
grid_uv_down: [sizeX, sizeZ], // [x,z]
@@ -365,7 +365,7 @@ export default {
}
},
// 点击 小球 // 点击 空白
onBallClick(falg,val){
onBallClick(falg, val) {
const legendObj = this.dataList.find(el => el.id == val.pointId)
if (legendObj && legendObj.id) {
this.tipLengthR[0].state = legendObj.remark1
@@ -386,8 +386,8 @@ export default {
},
handleLink(){
if (this.imgIndex !=2) return
handleLink() {
if (this.imgIndex != 2) return
if (this.$dictLabel('link_url1') != '') {
window.open(this.$dictLabel('link_url1'), '_bank')
}
@@ -411,7 +411,7 @@ export default {
);
},
// 关闭弹窗前
beforeClose(done){
beforeClose(done) {
this.imgIndex = -1
done()
},
@@ -427,11 +427,13 @@ export default {
width: 100%;
height: 100%;
position: relative;
// background-color: transparent;
.webgl {
width: 100%;
height: 100%;
}
.head_text {
font-weight: 700;
font-size: 16px;
@@ -498,14 +500,16 @@ export default {
}
}
}
.tooltip_box{
.tooltip_box {
position: absolute;
top: 100px;
right: 40px;
z-index: 99;
width: fit-content;
height: fit-content;
.tooltip_list{
.tooltip_list {
width: fit-content;
height: calc(100vh - 120px);
// max-width: 86vh;
@@ -513,16 +517,19 @@ export default {
// &::-webkit-scrollbar{
// }
&::-webkit-scrollbar-track{
&::-webkit-scrollbar-track {
background-color: transparent;
}
&::-webkit-scrollbar-thumb{
&::-webkit-scrollbar-thumb {
background-color: #0979ca;
}
.tooltip_item{
.tooltip_item {
width: 450px;
height: fit-content;
.tooltip_head{
.tooltip_head {
width: 100%;
height: 40px;
background-image: url('~@/assets/bigScreen/point/icon_crad_1.png');
@@ -532,21 +539,25 @@ export default {
padding-left: 56px;
display: flex;
align-items: center;
::v-deep .el-checkbox{
.el-checkbox__inner{
::v-deep .el-checkbox {
.el-checkbox__inner {
width: 16px;
height: 16px;
background-color: transparent;
border-color: #FFFFFF40;
}
.el-checkbox__input.is-checked .el-checkbox__inner{
.el-checkbox__input.is-checked .el-checkbox__inner {
border-color: #FFFFFF40;
}
.el-checkbox__inner::after{
.el-checkbox__inner::after {
left: 5px;
}
}
.icon_1{
.icon_1 {
width: 20px;
height: 20px;
border-radius: 50%;
@@ -554,11 +565,13 @@ export default {
margin-left: 10px;
margin-right: 10px;
}
.backColor{
.backColor {
background-color: #00fb59;
}
}
.tooltip_content{
.tooltip_content {
box-sizing: border-box;
padding: 15px;
width: 100%;
@@ -566,31 +579,35 @@ export default {
background-image: url('~@/assets/bigScreen/point/icon_crad_2.png');
background-repeat: no-repeat;
background-size: 100% 100%;
.content_1{
.content_1 {
width: 100%;
height: 100%;
// background-color: #0979ca;
}
}
}
.tooltip_item +.tooltip_item{
.tooltip_item+.tooltip_item {
margin-top: 20px;
}
}
}
.title_box{
.title_box {
position: absolute;
top: 120px;
left: 50%;
// bottom: 80px;
transform: translateX(-50%);
.text{
.text {
font-size: 18px;
font-weight: 700;
}
}
::v-deep .el-dialog{
::v-deep .el-dialog {
margin-top: 25vh !important;
background-color: transparent;
width: 992px;
@@ -600,36 +617,45 @@ export default {
background-repeat: no-repeat;
background-position: -18px -18px;
background-size: 1028px 472px;
.el-dialog__header{
.el-dialog__header {
padding: 30px;
padding-bottom: 10px;
.el-dialog__title{
background: linear-gradient(to bottom, #ffffff, #8af3ff); /* 渐变颜色 */
.el-dialog__title {
background: linear-gradient(to bottom, #ffffff, #8af3ff);
/* 渐变颜色 */
background-clip: text;
-webkit-background-clip: text;
color: transparent; /* 使文字透明，以显示背景渐变 */
color: transparent;
/* 使文字透明，以显示背景渐变 */
// color: #8af3ff;
font-weight: bold;
font-size: 18px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.6); /* 白色发光 */
text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
/* 白色发光 */
letter-spacing: 0.1em;
}
.el-dialog__headerbtn {
top: 30px;
right: 30px;
.el-dialog__close{
.el-dialog__close {
font-weight: 700;
font-size: 18px;
color: #50a4fd;
}
}
}
.el-dialog__body{
.el-dialog__body {
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
}
.dia_box{
.dia_box {
// width: 800px;
width: 100%;
height: 320px;