From 10ecebd8e2359257adf60f2dd46fbf7936d5bd67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Fri, 24 May 2024 09:43:52 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=A4=A7=E5=B1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hw-ui/public/highCharts-3d.js | 98 +++++++++++++++++++++++++++ hw-ui/src/views/board/model/index.vue | 57 ++++++++++++---- 2 files changed, 141 insertions(+), 14 deletions(-) create mode 100644 hw-ui/public/highCharts-3d.js diff --git a/hw-ui/public/highCharts-3d.js b/hw-ui/public/highCharts-3d.js new file mode 100644 index 0000000..77e281d --- /dev/null +++ b/hw-ui/public/highCharts-3d.js @@ -0,0 +1,98 @@ +/* + Highcharts JS v11.1.0 (2023-06-09) + + 3D features for Highcharts JS + + License: www.highcharts.com/license +*/ +'use strict';(function(a){"object"===typeof module&&module.exports?(a["default"]=a,module.exports=a):"function"===typeof define&&define.amd?define("highcharts/highcharts-3d",["highcharts"],function(D){a(D);a.Highcharts=D;return a}):a("undefined"!==typeof Highcharts?Highcharts:void 0)})(function(a){function D(a,A,w,I){a.hasOwnProperty(A)||(a[A]=I.apply(null,w),"function"===typeof CustomEvent&&window.dispatchEvent(new CustomEvent("HighchartsModuleLoaded",{detail:{path:A,module:a[A]}})))}a=a?a._modules: +{};D(a,"Core/Math3D.js",[a["Core/Globals.js"],a["Core/Utilities.js"]],function(a,A){function w(a,h,g,c){var n=h.options.chart.options3d;const k=C(c,g?h.inverted:!1),t={x:h.plotWidth/2,y:h.plotHeight/2,z:n.depth/2,vd:C(n.depth,1)*C(n.viewDistance,0)},v=h.scale3d||1;c=J*n.beta*(k?-1:1);n=J*n.alpha*(k?-1:1);var G=Math.cos(n),l=Math.cos(-c),m=Math.sin(n),y=Math.sin(-c);g||(t.x+=h.plotLeft,t.y+=h.plotTop);return a.map(function(c){var g=(k?c.y:c.x)-t.x;var a=(k?c.x:c.y)-t.y;c=(c.z||0)-t.z;g={x:l*g-y*c, +y:-m*y*g+G*a-l*m*c,z:G*y*g+m*a+G*l*c};a=q(g,t,t.vd);a.x=a.x*v+t.x;a.y=a.y*v+t.y;a.z=g.z*v+t.z;return{x:k?a.y:a.x,y:k?a.x:a.y,z:a.z}})}function q(a,h,g){h=0e&&u-e>Math.PI/2+.0001?(f=f.concat(this.curveTo(a,c,b,p,e,e+Math.PI/2,d,x)),f=f.concat(this.curveTo(a,c,b,p,e+Math.PI/2,u,d,x))):uMath.PI/2+.0001?(f=f.concat(this.curveTo(a,c,b,p,e,e-Math.PI/2,d,x)),f=f.concat(this.curveTo(a,c,b,p,e-Math.PI/2,u,d,x))):[["C",a+b*Math.cos(e)-b*N*z*Math.sin(e)+d,c+p*Math.sin(e)+p*N*z*Math.cos(e)+x,a+b*Math.cos(u)+b*N*z*Math.sin(u)+d,c+p*Math.sin(u)- +p*N*z*Math.cos(u)+x,a+b*Math.cos(u)+d,c+p*Math.sin(u)+x]]}toLinePath(a,c){const b=[];a.forEach(function(a){b.push(["L",a.x,a.y])});a.length&&(b[0][0]="M",c&&b.push(["Z"]));return b}toLineSegments(a){let f=[],b=!0;a.forEach(function(a){f.push(b?["M",a.x,a.y]:["L",a.x,a.y]);b=!b});return f}face3d(a){const f=this,b=this.createElement("path");b.vertexes=[];b.insidePlotArea=!1;b.enabled=!0;b.attr=function(b){if("object"===typeof b&&(v(b.enabled)||v(b.vertexes)||v(b.insidePlotArea))){this.enabled=m(b.enabled, +this.enabled);this.vertexes=m(b.vertexes,this.vertexes);this.insidePlotArea=m(b.insidePlotArea,this.insidePlotArea);delete b.enabled;delete b.vertexes;delete b.insidePlotArea;var e=q(this.vertexes,c[f.chartIndex],this.insidePlotArea);const a=f.toLinePath(e,!0);e=t(e);b.d=a;b.visibility=this.enabled&&0e.faces.length;)b.faces.pop().destroy();for(;b.faces.length +e.faces.length;)b.faces.pop().destroy();for(;b.faces.lengthe?{x:B[e].x,y:B[e].y+10,z:B[e].z}:B[0].x===B[7].x&&4<=e?{x:B[e].x+10,y:B[e].y, +z:B[e].z}:0===M&&2>e||5t(u)?x=[u,0]: +0>t(c)?x=[c,1]:a&&(n.push(a),x=0>t(d)?[u,0]:0>t(e)?[c,1]:[u,0]);return x};var l=r([3,2,1,0],[7,6,5,4],"front");a=l[0];P=l[1];l=r([1,6,7,0],[4,5,2,3],"top");x=l[0];g=l[1];l=r([1,2,5,6],[0,7,4,3],"side");r=l[0];l=l[1];1===l?k+=1E6*(z.plotWidth-p):l||(k+=1E6*p);k+=10*(!g||0<=h&&180>=h||360>h&&357.5Math.PI&&(e=2*Math.PI-e);return e}var b=a.x||0,f=a.y||0,e=a.start||0,u= +(a.end||0)-.00001,d=a.r||0,x=a.innerR||0,M=a.depth||0,z=a.alpha||0,g=a.beta||0,h=Math.cos(e);const k=Math.sin(e);a=Math.cos(u);var n=Math.sin(u);const B=d*Math.cos(g);d*=Math.cos(z);const l=x*Math.cos(g),r=x*Math.cos(z);x=M*Math.sin(g);const m=M*Math.sin(z);M=[["M",b+B*h,f+d*k]];M=M.concat(E.curveTo(b,f,B,d,e,u,0,0));M.push(["L",b+l*a,f+r*n]);M=M.concat(E.curveTo(b,f,l,r,u,e,0,0));M.push(["Z"]);var q=0-q?e:u>-q?-q:e;const v=ut&&eH-g&&eb?-1:0},m=l([{x:f,y:h,z:p},{x:c,y:h,z:p},{x:c,y:h,z:0},{x:f,y:h,z:0}]),k=l([{x:f, +y:g,z:0},{x:c,y:g,z:0},{x:c,y:g,z:p},{x:f,y:g,z:p}]),F=l([{x:f,y:g,z:0},{x:f,y:g,z:p},{x:f,y:h,z:p},{x:f,y:h,z:0}]),r=l([{x:c,y:g,z:p},{x:c,y:g,z:0},{x:c,y:h,z:0},{x:c,y:h,z:p}]);const H=l([{x:f,y:h,z:0},{x:c,y:h,z:0},{x:c,y:g,z:0},{x:f,y:g,z:0}]);l=l([{x:f,y:g,z:p},{x:c,y:g,z:p},{x:c,y:h,z:p},{x:f,y:h,z:p}]);let q=!1,t=!1,v=!1,K=!1;[].concat(a.xAxis,a.yAxis,a.zAxis).forEach(function(a){a&&(a.horiz?a.opposite?t=!0:q=!0:a.opposite?K=!0:v=!0)});const y=function(a,b,d){const e=["size","color","visible"], +f={};for(let b=0;be*f[c][d]?c=a:e*f[a][d]===e*f[c][d]&&f[a].zp&&(F=Math.min(F,1-Math.abs((d+g)/(p+g))%1));en&&(F=0>n?Math.min(F,(f+h)/(-n+f+h)):Math.min(F,1-(f+h)/(n+h)%1));cthis.pos&&(g(this.start)||g(this.end))){const b=this.start||[1,0,0,1,0,0],d=this.end||[1,0,0,1,0,0];a=[];for(let e=0;6>e;e++)a.push(this.pos*d[e]+(1-this.pos)*b[e])}else a=this.end;this.elem.attr(this.prop,a,null,!0)};c(!0,q,a.defaultOptions); +h(e,"init",E);h(e,"addSeries",t);h(e,"afterDrawChartBox",l);h(e,"afterGetContainer",m);h(e,"afterInit",v);h(e,"afterSetChartSize",K);h(e,"beforeRedraw",H);h(e,"beforeRender",w);O(d,"isInsidePlot",f);O(d,"renderSeries",F);O(d,"setClassName",b)}})(t||(t={}));"";return t});D(a,"Core/Axis/ZAxis.js",[a["Core/Axis/Axis.js"],a["Core/Utilities.js"]],function(a,A){function q(a){return new g(this,a)}function I(){const a=this.options.zAxis=L(this.options.zAxis||{});this.is3d()&&(this.zAxis=[],a.forEach((a,c)=> +{this.addZAxis(a).setScale()}))}const {addEvent:k,merge:J,pick:C,splat:L}=A,h=[];class g extends a{constructor(){super(...arguments);this.isZAxis=!0}static compose(a){A.pushUnique(h,a)&&(k(a,"afterGetAxes",I),a=a.prototype,a.addZAxis=q,a.collectionsWithInit.zAxis=[a.addZAxis],a.collectionsWithUpdate.push("zAxis"))}init(a,g){this.isZAxis=!0;super.init(a,g,"zAxis")}getSeriesExtremes(){const a=this.chart;this.hasVisibleSeries=!1;this.dataMin=this.dataMax=this.ignoreMinPadding=this.ignoreMaxPadding=void 0; +this.stacking&&this.stacking.buildStacks();this.series.forEach(c=>{if(c.visible||!a.options.chart.ignoreHiddenSeries)this.hasVisibleSeries=!0,c=c.zData,c.length&&(this.dataMin=Math.min(C(this.dataMin,c[0]),Math.min.apply(null,c)),this.dataMax=Math.max(C(this.dataMax,c[0]),Math.max.apply(null,c)))})}setAxisSize(){const a=this.chart;super.setAxisSize();this.width=this.len=a.options.chart.options3d&&a.options.chart.options3d.depth||0;this.right=a.chartWidth-this.width-this.left}setOptions(a){a=J({offset:0, +lineWidth:0},a);super.setOptions(a)}}return g});D(a,"Core/Axis/Axis3DDefaults.js",[],function(){return{labels:{position3d:"offset",skew3d:!1},title:{position3d:null,skew3d:null}}});D(a,"Core/Axis/Tick3DComposition.js",[a["Core/Utilities.js"]],function(a){function q(a){const h=this.axis.axis3D;h&&k(a.pos,h.fix3dPosition(a.pos))}function w(a){var h=this.axis.axis3D;const g=a.apply(this,[].slice.call(arguments,1));if(h){const a=g[0],n=g[1];if("M"===a[0]&&"L"===n[0])return h=[h.fix3dPosition({x:a[1], +y:a[2],z:0}),h.fix3dPosition({x:n[1],y:n[2],z:0})],this.axis.chart.renderer.toLineSegments(h)}return g}const {addEvent:I,extend:k,wrap:J}=a,C=[];return{compose:function(k){a.pushUnique(C,k)&&(I(k,"afterGetLabelPosition",q),J(k.prototype,"getMarkPath",w))}}});D(a,"Core/Axis/Axis3DComposition.js",[a["Core/Axis/Axis3DDefaults.js"],a["Core/Globals.js"],a["Core/Math3D.js"],a["Core/Axis/Tick3DComposition.js"],a["Core/Utilities.js"]],function(a,A,w,I,k){function q(){const a=this.chart,c=this.options;a.is3d&& +a.is3d()&&"colorAxis"!==this.coll&&(c.tickWidth=K(c.tickWidth,0),c.gridLineWidth=K(c.gridLineWidth,1))}function C(a){this.chart.is3d()&&"colorAxis"!==this.coll&&a.point&&(a.point.crosshairPos=this.isXAxis?a.point.axisXpos:this.len-a.point.axisYpos)}function L(){this.axis3D||(this.axis3D=new E(this))}function h(a){return this.chart.is3d()&&"colorAxis"!==this.coll?[]:a.apply(this,[].slice.call(arguments,1))}function g(a){if(!this.chart.is3d()||"colorAxis"===this.coll)return a.apply(this,[].slice.call(arguments, +1));var f=arguments,b=f[2];const c=[];f=this.getPlotLinePath({value:f[1]});b=this.getPlotLinePath({value:b});if(f&&b)for(let a=0;al(v([a,{x:a.x+k.x,y:a.y+k.y,z:a.z+k.z},{x:a.x+y.x,y:a.y+y.y,z:a.z+y.z}],b.chart))&&(k={x:-k.x,y:-k.y,z:-k.z}),a=v([{x:a.x,y:a.y,z:a.z},{x:a.x+k.x,y:a.y+k.y,z:a.z+k.z},{x:a.x+y.x,y:a.y+y.y,z:a.z+y.z}],b.chart),f.matrix=[a[1].x-a[0].x,a[1].y-a[0].y,a[2].x-a[0].x,a[2].y-a[0].y,f.x,f.y],f.matrix[4]-=f.x*f.matrix[0]+f.y*f.matrix[2],f.matrix[5]-= +f.x*f.matrix[1]+f.y*f.matrix[3]);return f}swapZ(a,c){const b=this.axis;return b.isZAxis?(c=c?0:b.chart.plotLeft,{x:c+a.z,y:a.y,z:a.x-c}):a}}return E});D(a,"Core/Series/Series3D.js",[a["Core/Math3D.js"],a["Core/Series/Series.js"],a["Core/Utilities.js"]],function(a,A,w){const {perspective:q}=a,{addEvent:k,extend:J,merge:C,pick:L,isNumber:h}=w;class g extends A{translate(){super.translate.apply(this,arguments);this.chart.is3d()&&this.translate3dPoints()}translate3dPoints(){var a=this.options,g=this.chart, +k=L(this.zAxis,g.options.zAxis[0]);let t=[],v,w,l=[];this.zPadding=(a.stacking?h(a.stack)?a.stack:0:this.index||0)*(a.depth||0+(a.groupZPadding||1));for(w=0;w=k.min&&v<=k.max:!1):a.plotZ=this.zPadding,a.axisXpos=a.plotX,a.axisYpos=a.plotY,a.axisZpos=a.plotZ,t.push({x:a.plotX,y:a.plotY,z:a.plotZ}),l.push(a.plotX||0);this.rawPointsX=l;g=q(t,g,!0);for(w=0;w< +this.data.length;w++)a=this.data[w],k=g[w],a.plotX=k.x,a.plotY=k.y,a.plotZ=k.z}}g.defaultOptions=C(A.defaultOptions);k(A,"afterTranslate",function(){this.chart.is3d()&&this.translate3dPoints()});J(A.prototype,{translate3dPoints:g.prototype.translate3dPoints});return g});D(a,"Series/Area3D/Area3DSeries.js",[a["Core/Math3D.js"],a["Core/Series/SeriesRegistry.js"],a["Core/Utilities.js"]],function(a,A,w){function q(a){const g=a.apply(this,[].slice.call(arguments,1));if(!this.chart.is3d())return g;var c= +J.getGraphPath,h=this.options;const q=Math.round(this.yAxis.getThreshold(h.threshold));let t=[];if(this.rawPointsX)for(let a=0;a({plotX:a.x,plotY:a.y,plotZ:a.z}));this.group&&h&&h.depth&&h.beta&&(this.markerGroup&&(this.markerGroup.add(this.group),this.markerGroup.attr({translateX:0,translateY:0})),this.group.attr({zIndex:Math.max(1, +270h.beta?h.depth-Math.round(this.zPadding||0):Math.round(this.zPadding||0))}));t.reversed=!0;c=c.call(this,t,!0,!0);c[0]&&"M"===c[0][0]&&(c[0]=["L",c[0][1],c[0][2]]);this.areaPath&&(c=this.areaPath.splice(0,this.areaPath.length/2).concat(c),c.xMap=this.areaPath.xMap,this.areaPath=c);return g}const {perspective:k}=a,{seriesTypes:{line:{prototype:J}}}=A,{wrap:C}=w,L=[];return{compose:function(a){w.pushUnique(L,a)&&C(a.prototype,"getGraphPath",q)}}});D(a,"Series/Column3D/Column3DComposition.js", +[a["Series/Column/ColumnSeries.js"],a["Core/Series/Series.js"],a["Core/Math3D.js"],a["Core/Series/SeriesRegistry.js"],a["Core/Axis/Stacking/StackItem.js"],a["Core/Utilities.js"]],function(a,A,w,I,k,J){function q(a,c){const g=a.series,h={totalStacks:0};let k,l=1;g.forEach(function(a){k=v(a.options.stack,c?0:g.length-1-a.index);h[k]?h[k].series.push(a):(h[k]={series:[a],position:l},l++)});h.totalStacks=l+1;return h}function L(a){const c=a.apply(this,[].slice.call(arguments,1));this.chart.is3d&&this.chart.is3d()&& +(c.stroke=this.options.edgeColor||c.fill,c["stroke-width"]=v(this.options.edgeWidth,1));return c}function h(a,c,g){const h=this.chart.is3d&&this.chart.is3d();h&&(this.options.inactiveOtherPoints=!0);a.call(this,c,g);h&&(this.options.inactiveOtherPoints=!1)}function g(a,...c){return this.series.chart.is3d()?this.graphic&&"g"!==this.graphic.element.nodeName:a.apply(this,c)}const {prototype:c}=a,{perspective:n}=w,{addEvent:D,extend:t,pick:v,wrap:G}=J;G(c,"translate",function(a){a.apply(this,[].slice.call(arguments, +1));this.chart.is3d()&&this.translate3dShapes()});G(A.prototype,"justifyDataLabel",function(a){return arguments[2].outside3dPlot?!1:a.apply(this,[].slice.call(arguments,1))});c.translate3dPoints=function(){};c.translate3dShapes=function(){let a=this,c=a.chart,g=a.options,h=g.depth,k=(g.stacking?g.stack||0:a.index)*(h+(g.groupZPadding||1)),q=a.borderWidth%2?.5:0,v;c.inverted&&!a.yAxis.reversed&&(q*=-1);!1!==g.grouping&&(k=0);k+=g.groupZPadding||1;a.data.forEach(function(f){f.outside3dPlot=null;if(null!== +f.y){const b=t({x:0,y:0,width:0,height:0},f.shapeArgs||{});var g=f.tooltipPos;let l;[["x","width"],["y","height"]].forEach(e=>{l=b[e[0]]-q;0>l&&(b[e[1]]+=b[e[0]]+q,b[e[0]]=-q,l=0);l+b[e[1]]>a[e[0]+"Axis"].len&&0!==b[e[1]]&&(b[e[1]]=a[e[0]+"Axis"].len-b[e[0]]);if(0!==b[e[1]]&&(b[e[0]]>=a[e[0]+"Axis"].len||b[e[0]]+b[e[1]]<=q)){for(const a in b)b[a]="y"===a?-9999:0;f.outside3dPlot=!0}});"roundedRect"===f.shapeType&&(f.shapeType="cuboid");f.shapeArgs=t(b,{z:k,depth:h,insidePlotArea:!0});v={x:b.x+b.width/ +2,y:b.y,z:k+h/2};c.inverted&&(v.x=b.height,v.y=f.clientX||0);f.plot3d=n([v],c,!0,!1)[0];g&&(g=n([{x:g[0],y:g[1],z:k+h/2}],c,!0,!1)[0],f.tooltipPos=[g.x,g.y])}});a.z=k};G(c,"animate",function(a){if(this.chart.is3d()){const a=this.yAxis,c=this,g=this.yAxis.reversed;arguments[1]?c.data.forEach(function(c){null!==c.y&&(c.height=c.shapeArgs.height,c.shapey=c.shapeArgs.y,c.shapeArgs.height=1,g||(c.shapeArgs.y=c.stackY?c.plotY+a.translate(c.stackY):c.plotY+(c.negative?-c.height:c.height)))}):(c.data.forEach(function(a){if(null!== +a.y&&(a.shapeArgs.height=a.height,a.shapeArgs.y=a.shapey,a.graphic))a.graphic[a.outside3dPlot?"attr":"animate"](a.shapeArgs,c.options.animation)}),this.drawDataLabels())}else a.apply(this,[].slice.call(arguments,1))});G(c,"plotGroup",function(a,c,g,h,k,n){"dataLabelsGroup"!==c&&"markerGroup"!==c&&this.chart.is3d()&&(this[c]&&delete this[c],n&&(this.chart.columnGroup||(this.chart.columnGroup=this.chart.renderer.g("columnGroup").add(n)),this[c]=this.chart.columnGroup,this.chart.columnGroup.attr(this.getPlotBox()), +this[c].survive=!0,"group"===c&&(arguments[3]="visible")));return a.apply(this,Array.prototype.slice.call(arguments,1))});G(c,"setVisible",function(a,c){const g=this;g.chart.is3d()&&g.data.forEach(function(a){a.visible=a.options.visible=c="undefined"===typeof c?!v(g.visible,a.visible):c;g.options.data[g.data.indexOf(a)]=a.options;a.graphic&&a.graphic.attr({visibility:c?"visible":"hidden"})});a.apply(this,Array.prototype.slice.call(arguments,1))});D(a,"afterInit",function(){if(this.chart.is3d()){let h= +this.options;var a=h.grouping,c=h.stacking;let k=this.yAxis.options.reversedStacks;var g=0;if("undefined"===typeof a||a){a=q(this.chart,c);g=h.stack||0;for(c=0;c=g.alpha&&(m.y+= +c.shapeArgs.width));m=n([m],l,!0,!1)[0];k.x=m.x-b;k.y=c.outside3dPlot?-9E9:m.y}a.apply(this,[].slice.call(arguments,1))});G(k.prototype,"getStackBox",function(a,c){const g=a.apply(this,[].slice.call(arguments,1)),h=this.axis.chart,{width:k}=c;if(h.is3d()&&this.base){var l=+this.base.split(",")[0],m=h.series[l];l=h.options.chart.options3d;m&&m instanceof I.seriesTypes.column&&(m={x:g.x+(h.inverted?g.height:k/2),y:g.y,z:m.options.depth/2},h.inverted&&(g.width=0,90<=l.alpha&&270>=l.alpha&&(m.y+=k)), +m=n([m],h,!0,!1)[0],g.x=m.x-k/2,g.y=m.y)}return g});"";return a});D(a,"Series/Pie3D/Pie3DPoint.js",[a["Core/Series/SeriesRegistry.js"]],function(a){({seriesTypes:{pie:{prototype:{pointClass:a}}}}=a);const q=a.prototype.haloPath;class w extends a{constructor(){super(...arguments);this.series=void 0}haloPath(){var a;return(null===(a=this.series)||void 0===a?0:a.chart.is3d())?[]:q.apply(this,arguments)}}return w});D(a,"Series/Pie3D/Pie3DSeries.js",[a["Core/Globals.js"],a["Series/Pie3D/Pie3DPoint.js"], +a["Core/Series/SeriesRegistry.js"],a["Core/Utilities.js"]],function(a,A,w,I){const {deg2rad:k}=a;({seriesTypes:{pie:a}}=w);const {extend:q,pick:C}=I;class D extends a{addPoint(){super.addPoint.apply(this,arguments);this.chart.is3d()&&this.update(this.userOptions,!0)}animate(a){if(this.chart.is3d()){let c=this.options.animation;var g=this.center;let h=this.group,k=this.markerGroup;!0===c&&(c={});a?(h.oldtranslateX=C(h.oldtranslateX,h.translateX),h.oldtranslateY=C(h.oldtranslateY,h.translateY),g={translateX:g[0], +translateY:g[1],scaleX:.001,scaleY:.001},h.attr(g),k&&(k.attrSetters=h.attrSetters,k.attr(g))):(g={translateX:h.oldtranslateX,translateY:h.oldtranslateY,scaleX:1,scaleY:1},h.animate(g,c),k&&k.animate(g,c))}else super.animate.apply(this,arguments)}drawDataLabels(){if(this.chart.is3d()){const a=this.chart.options.chart.options3d;this.data.forEach(function(g){const c=g.shapeArgs,h=c.r,q=(c.start+c.end)/2;g=g.labelPosition;const t=g.connectorPosition,v=-h*(1-Math.cos((c.alpha||a.alpha)*k))*Math.sin(q), +w=h*(Math.cos((c.beta||a.beta)*k)-1)*Math.cos(q);[g.natural,t.breakAt,t.touchingSliceAt].forEach(function(a){a.x+=w;a.y+=v})})}super.drawDataLabels.apply(this,arguments)}pointAttribs(a){const g=super.pointAttribs.apply(this,arguments),c=this.options;this.chart.is3d()&&!this.chart.styledMode&&(g.stroke=c.edgeColor||a.color||this.color,g["stroke-width"]=C(c.edgeWidth,1));return g}translate(){super.translate.apply(this,arguments);if(this.chart.is3d()){var a=this,g=a.options,c=g.depth||0,n=a.chart.options.chart.options3d, +q=n.alpha,t=n.beta,v=g.stacking?(g.stack||0)*c:a._i*c;v+=c/2;!1!==g.grouping&&(v=0);a.data.forEach(function(h){var l=h.shapeArgs;h.shapeType="arc3d";l.z=v;l.depth=.75*c;l.alpha=q;l.beta=t;l.center=a.center;l=(l.end+l.start)/2;h.slicedTranslation={translateX:Math.round(Math.cos(l)*g.slicedOffset*Math.cos(q*k)),translateY:Math.round(Math.sin(l)*g.slicedOffset*Math.cos(q*k))}})}}drawTracker(){super.drawTracker.apply(this,arguments);this.chart.is3d()&&this.points.forEach(function(a){a.graphic&&["out", +"inn","side1","side2"].forEach(g=>{a.graphic&&(a.graphic[g].element.point=a)})})}}q(D.prototype,{pointClass:A});"";return D});D(a,"Series/Pie3D/Pie3DComposition.js",[a["Series/Pie3D/Pie3DPoint.js"],a["Series/Pie3D/Pie3DSeries.js"],a["Core/Series/SeriesRegistry.js"]],function(a,A,w){w.seriesTypes.pie.prototype.pointClass.prototype.haloPath=a.prototype.haloPath;w.seriesTypes.pie=A});D(a,"Series/Scatter3D/Scatter3DPoint.js",[a["Series/Scatter/ScatterSeries.js"],a["Core/Utilities.js"]],function(a,A){const {defined:q}= +A;class D extends a.prototype.pointClass{constructor(){super(...arguments);this.series=this.options=void 0}applyOptions(){super.applyOptions.apply(this,arguments);q(this.z)||(this.z=0);return this}}return D});D(a,"Series/Scatter3D/Scatter3DSeries.js",[a["Core/Math3D.js"],a["Series/Scatter3D/Scatter3DPoint.js"],a["Series/Scatter/ScatterSeries.js"],a["Core/Series/SeriesRegistry.js"],a["Core/Utilities.js"]],function(a,A,w,D,k){const {pointCameraDistance:q}=a,{extend:C,merge:I}=k;class h extends w{constructor(){super(...arguments); +this.points=this.options=this.data=void 0}pointAttribs(a){const c=super.pointAttribs.apply(this,arguments);this.chart.is3d()&&a&&(c.zIndex=q(a,this.chart));return c}}h.defaultOptions=I(w.defaultOptions,{tooltip:{pointFormat:"x: {point.x}
y: {point.y}
z: {point.z}
"}});C(h.prototype,{axisTypes:["xAxis","yAxis","zAxis"],directTouch:!0,parallelArrays:["x","y","z"],pointArrayMap:["x","y","z"],pointClass:A});D.registerSeriesType("scatter3d",h);"";return h});D(a,"masters/highcharts-3d.src.js", +[a["Core/Globals.js"],a["Core/Renderer/SVG/SVGRenderer3D.js"],a["Core/Chart/Chart3D.js"],a["Core/Axis/ZAxis.js"],a["Core/Axis/Axis3DComposition.js"],a["Series/Area3D/Area3DSeries.js"]],function(a,A,w,D,k,J){A.compose(a.SVGRenderer);w.compose(a.Chart,a.Fx);D.compose(a.Chart);k.compose(a.Axis,a.Tick);J.compose(a.seriesTypes.area)})}); +//# sourceMappingURL=highcharts-3d.js.map \ No newline at end of file diff --git a/hw-ui/src/views/board/model/index.vue b/hw-ui/src/views/board/model/index.vue index 73d27f7..a71c4b9 100644 --- a/hw-ui/src/views/board/model/index.vue +++ b/hw-ui/src/views/board/model/index.vue @@ -22,11 +22,12 @@ export default { mounted() { const scene = new THREE.Scene(); scene.background = new THREE.Color(0x000000) - const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100000); + const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000000000); - camera.position.set(40, 0, 500); - camera.lookAt(0, 0, 0); + // camera.position.set(1, 1, 1); + camera.position.set(289, 1559, 1298); + camera.lookAt(285, -66, -15); camera.updateProjectionMatrix(); const renderer = new THREE.WebGLRenderer({ @@ -37,6 +38,7 @@ export default { const controls = new OrbitControls(camera, renderer.domElement); controls.rotateSpeed = -controls.rotateSpeed; + // controls.enableZoom = false const pointLight = new THREE.PointLight(0xffffff, 1); //光源颜色 光照强度 pointLight.decay = 0.0; //设置光源不随距离衰减 默认2.0 @@ -59,7 +61,6 @@ export default { } else { str = '/1' } - console.log(str) let mtlLoader = new MTLLoader(); mtlLoader.load(`/model${str}/${v}/${v}.mtl`, materials => { @@ -69,13 +70,11 @@ export default { loader.load( `/model${str}/${v}/${v}.obj`, object => { + object.name = v scene.add(object); + console.log(object) // 更新渲染器 renderer.render(scene, camera); - if (v === 'quanzidongchaobaojizhaungpeixian') { str = '' - } else { - console.log(object) - } }, xhr => { if ((xhr.loaded / xhr.total * 100) === 100) { @@ -87,9 +86,9 @@ export default { }) }) } - loadF(['quanzidongchaobaojizhaungpeixian']) - loadF(['1-1']) - // loadF(['1-1', '1-2', '1-3', '1-4', '2-1-1', '2-2-1', '2-2-2', '2-3-1','3-3','3-4','3-5','3-6','3-7','3-8']) + // loadF(['quanzidongchaobaojizhaungpeixian']) + // loadF(['1-1']) + loadF(['1-1', '1-2', '1-3', '1-4', '2-1-1', '2-2-1', '2-2-2', '2-3-1', '3-3', '3-4', '3-5', '3-6', '3-7', '3-8']) // loadF(['1-1','1-2','1-3','1-4','1changfang','2-1-1','2-2-1','2-2-2','2-3-1','3-1','3-2','3-2-1 200','3-3','3-4','3-5','3-6','3-7','3-8',]) @@ -98,12 +97,42 @@ export default { requestAnimationFrame(animate); renderer.render(scene, camera); } - setInterval(()=>{ - console.log(camera) - },1000) + + setInterval(() => { + // console.log(camera) + }, 1000) animate(); + + // 创建一个raycaster实例 + var raycaster = new THREE.Raycaster(); + +// 创建一个二维空间的向量用于存储鼠标点击的屏幕位置 + var mouse = new THREE.Vector2(); + +// 监听鼠标点击事件 + document.addEventListener('click', function (event) { + // 将鼠标位置转换为二维向量 + mouse.x = (event.clientX / window.innerWidth) * 2 - 1; + mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; + + // 使用鼠标的位置和相机进行raycasting + raycaster.setFromCamera(mouse, camera); + + // 计算物体和鼠标点的交点 + var intersects = raycaster.intersectObjects(scene.children); + + // 如果有交点 + if (intersects.length > 0) { + // 获取第一个交点的对象 + var obj = intersects[0].object; + console.log('Clicked object:', obj); + alert(obj.parent?.name || obj.name) + // 你可以在这里添加你想要的逻辑，比如高亮被点击的模型等 + } + }, false); + }, methods: {} }