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( function createDashedLinesForBall(
ball, ball,
scene, scene,
{ dashSize = 1, gapSize = 1, color = 0x7ec8ff, arrowSize=1 } = {} { dashSize = 1, gapSize = 1, color = 0x7ec8ff, arrowSize = 1 } = {}
) { ) {
const makeLine = (direction) => { const makeLine = (direction) => {
// 用 BufferGeometry+LineDashedMaterial 创建一条虚线 // 用 BufferGeometry+LineDashedMaterial 创建一条虚线
@@ -75,7 +75,7 @@ function createDashedLinesForBall(
arrowHelper.line.material.opacity = 0.6; arrowHelper.line.material.opacity = 0.6;
// 设置箭头头部透明度 // 设置箭头头部透明度
arrowHelper.cone.material = new THREE.MeshBasicMaterial({ arrowHelper.cone.material = new THREE.MeshBasicMaterial({
color: color, color: "#00ff00",
transparent: true, // 必须设置为true transparent: true, // 必须设置为true
opacity: 0.6, // 与线段相同的透明度 opacity: 0.6, // 与线段相同的透明度
}); });
@@ -179,7 +179,7 @@ function updateDashedLines(ball) {
// 更新后方向虚线及箭头 // 更新后方向虚线及箭头
updateLineAndArrow( updateLineAndArrow(
dashedLines.back, dashedLines.back,
[ballPos.x, ballPos.y, ballPos.z-1 ], [ballPos.x, ballPos.y, ballPos.z - 1],
[ballPos.x, ballPos.y, 0], // 假设后面在z=0 [ballPos.x, ballPos.y, 0], // 假设后面在z=0
radius radius
); );
@@ -633,8 +633,8 @@ export function drawAxes(element, options = {}, ballCallBack) {
styleGroups[el.name] = null; styleGroups[el.name] = null;
}); });
styleGroups["灰球"] = null; styleGroups["灰球"] = null;
const geometryColors = [ const lineGeometryColors = [
"#f617d9", "#0x00ff00",
"#779c6e", "#779c6e",
"#3ee4bc", "#3ee4bc",
"#ca41e7", "#ca41e7",
@@ -642,6 +642,15 @@ export function drawAxes(element, options = {}, ballCallBack) {
"#7467ef", "#7467ef",
"#c7bef7", "#c7bef7",
]; ];
const geometryColors = [
"#888888",
"#888888",
"#888888",
"#888888",
"#888888",
"#888888",
"#888888",
];
const ballScene = new THREE.Group(); const ballScene = new THREE.Group();
geometryColors.forEach((el) => { geometryColors.forEach((el) => {
// 几何体 // 几何体
@@ -718,7 +727,7 @@ export function drawAxes(element, options = {}, ballCallBack) {
createDashedLinesForBall(n, scene, { createDashedLinesForBall(n, scene, {
dashSize: 1, dashSize: 1,
gapSize: 1, gapSize: 1,
color: geometryColors[idx], color: lineGeometryColors[idx],
arrowSize: 8, arrowSize: 8,
}); // 给每个球加三条投影虚线 }); // 给每个球加三条投影虚线
updateDashedLines(n); updateDashedLines(n);
@@ -749,7 +758,7 @@ export function drawAxes(element, options = {}, ballCallBack) {
createDashedLinesForBall(ball, scene, { createDashedLinesForBall(ball, scene, {
dashSize: 1, dashSize: 1,
gapSize: 1, gapSize: 1,
color: geometryColors[modelIndex], color: lineGeometryColors[modelIndex],
}); });
updateDashedLines(ball); 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轴（红色，只显示正向） // 创建X轴（红色，只显示正向）
const xAxis = new THREE.ArrowHelper( 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> <div class="icon_1" :class="{ backColor: el.state == '1' }"></div>
<span class="text_gradual head_text"> {{ el.label }}</span> <span class="text_gradual head_text"> {{ el.label }}</span>
</div> </div>
<div class="tooltip_content" @click="handleClick(el,i)"> <div class="tooltip_content" @click="handleClick(el, i)">
<div class="content_1"> <div class="content_1">
<img :src="el.url" alt="" style="width: 100%; height: 100%;"> <img :src="el.url" alt="" style="width: 100%; height: 100%;">
</div> </div>
@@ -67,7 +67,7 @@ export default {
return { return {
diaUrl: '', diaUrl: '',
isShow: false, isShow: false,
legendList: [ ], legendList: [],
tipLengthR: [ tipLengthR: [
{ state: '0', label: this.$dictLabel('right_title1'), url: '/1.png' }, { state: '0', label: this.$dictLabel('right_title1'), url: '/1.png' },
{ state: '0', label: this.$dictLabel('right_title2'), url: '/2.png' }, { state: '0', label: this.$dictLabel('right_title2'), url: '/2.png' },
@@ -269,7 +269,7 @@ export default {
} }
}, },
methods: { methods: {
async init(){ async init() {
let res = await lastData() let res = await lastData()
if (res.code == 0) { if (res.code == 0) {
const data = res.data const data = res.data
@@ -345,7 +345,7 @@ export default {
const sceneBox = document.getElementById('webgl'); const sceneBox = document.getElementById('webgl');
const options = { 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_back: [sizeX, sizeY], // [z,y]
grid_uv_left: [sizeZ, sizeY], // [x,y] grid_uv_left: [sizeZ, sizeY], // [x,y]
grid_uv_down: [sizeX, sizeZ], // [x,z] 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) const legendObj = this.dataList.find(el => el.id == val.pointId)
if (legendObj && legendObj.id) { if (legendObj && legendObj.id) {
this.tipLengthR[0].state = legendObj.remark1 this.tipLengthR[0].state = legendObj.remark1
@@ -386,8 +386,8 @@ export default {
}, },
handleLink(){ handleLink() {
if (this.imgIndex !=2) return if (this.imgIndex != 2) return
if (this.$dictLabel('link_url1') != '') { if (this.$dictLabel('link_url1') != '') {
window.open(this.$dictLabel('link_url1'), '_bank') window.open(this.$dictLabel('link_url1'), '_bank')
} }
@@ -411,7 +411,7 @@ export default {
); );
}, },
// 关闭弹窗前 // 关闭弹窗前
beforeClose(done){ beforeClose(done) {
this.imgIndex = -1 this.imgIndex = -1
done() done()
}, },
@@ -427,11 +427,13 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
// background-color: transparent; // background-color: transparent;
.webgl { .webgl {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.head_text { .head_text {
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
@@ -498,14 +500,16 @@ export default {
} }
} }
} }
.tooltip_box{
.tooltip_box {
position: absolute; position: absolute;
top: 100px; top: 100px;
right: 40px; right: 40px;
z-index: 99; z-index: 99;
width: fit-content; width: fit-content;
height: fit-content; height: fit-content;
.tooltip_list{
.tooltip_list {
width: fit-content; width: fit-content;
height: calc(100vh - 120px); height: calc(100vh - 120px);
// max-width: 86vh; // max-width: 86vh;
@@ -513,16 +517,19 @@ export default {
// &::-webkit-scrollbar{ // &::-webkit-scrollbar{
// } // }
&::-webkit-scrollbar-track{ &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb{
&::-webkit-scrollbar-thumb {
background-color: #0979ca; background-color: #0979ca;
} }
.tooltip_item{
.tooltip_item {
width: 450px; width: 450px;
height: fit-content; height: fit-content;
.tooltip_head{
.tooltip_head {
width: 100%; width: 100%;
height: 40px; height: 40px;
background-image: url('~@/assets/bigScreen/point/icon_crad_1.png'); background-image: url('~@/assets/bigScreen/point/icon_crad_1.png');
@@ -532,21 +539,25 @@ export default {
padding-left: 56px; padding-left: 56px;
display: flex; display: flex;
align-items: center; align-items: center;
::v-deep .el-checkbox{
.el-checkbox__inner{ ::v-deep .el-checkbox {
.el-checkbox__inner {
width: 16px; width: 16px;
height: 16px; height: 16px;
background-color: transparent; background-color: transparent;
border-color: #FFFFFF40; border-color: #FFFFFF40;
} }
.el-checkbox__input.is-checked .el-checkbox__inner{
.el-checkbox__input.is-checked .el-checkbox__inner {
border-color: #FFFFFF40; border-color: #FFFFFF40;
} }
.el-checkbox__inner::after{
.el-checkbox__inner::after {
left: 5px; left: 5px;
} }
} }
.icon_1{
.icon_1 {
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
@@ -554,11 +565,13 @@ export default {
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
.backColor{
.backColor {
background-color: #00fb59; background-color: #00fb59;
} }
} }
.tooltip_content{
.tooltip_content {
box-sizing: border-box; box-sizing: border-box;
padding: 15px; padding: 15px;
width: 100%; width: 100%;
@@ -566,31 +579,35 @@ export default {
background-image: url('~@/assets/bigScreen/point/icon_crad_2.png'); background-image: url('~@/assets/bigScreen/point/icon_crad_2.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.content_1{
.content_1 {
width: 100%; width: 100%;
height: 100%; height: 100%;
// background-color: #0979ca; // background-color: #0979ca;
} }
} }
} }
.tooltip_item +.tooltip_item{
.tooltip_item+.tooltip_item {
margin-top: 20px; margin-top: 20px;
} }
} }
} }
.title_box{
.title_box {
position: absolute; position: absolute;
top: 120px; top: 120px;
left: 50%; left: 50%;
// bottom: 80px; // bottom: 80px;
transform: translateX(-50%); transform: translateX(-50%);
.text{
.text {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
} }
} }
::v-deep .el-dialog{ ::v-deep .el-dialog {
margin-top: 25vh !important; margin-top: 25vh !important;
background-color: transparent; background-color: transparent;
width: 992px; width: 992px;
@@ -600,36 +617,45 @@ export default {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: -18px -18px; background-position: -18px -18px;
background-size: 1028px 472px; background-size: 1028px 472px;
.el-dialog__header{
.el-dialog__header {
padding: 30px; padding: 30px;
padding-bottom: 10px; 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; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
color: transparent; /* 使文字透明，以显示背景渐变 */ color: transparent;
/* 使文字透明，以显示背景渐变 */
// color: #8af3ff; // color: #8af3ff;
font-weight: bold; font-weight: bold;
font-size: 18px; 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; letter-spacing: 0.1em;
} }
.el-dialog__headerbtn { .el-dialog__headerbtn {
top: 30px; top: 30px;
right: 30px; right: 30px;
.el-dialog__close{
.el-dialog__close {
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
color: #50a4fd; color: #50a4fd;
} }
} }
} }
.el-dialog__body{
.el-dialog__body {
padding-left: 30px; padding-left: 30px;
padding-right: 30px; padding-right: 30px;
padding-top: 10px; padding-top: 10px;
} }
.dia_box{
.dia_box {
// width: 800px; // width: 800px;
width: 100%; width: 100%;
height: 320px; height: 320px;