cione-comp-lib/lib/packages/co-periodictable-std/index2.js

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var t=require("vue"),e=require("../../node_modules/_three@0.150.1@three/build/three.module.js"),i=require("../../node_modules/_three@0.150.1@three/examples/jsm/libs/tween.module.min.js"),x=require("../../node_modules/_three@0.150.1@three/examples/jsm/controls/TrackballControls.js"),l=require("../../node_modules/_three@0.150.1@three/examples/jsm/renderers/CSS3DRenderer.js");require("./index.vue_vue_type_style_index_0_lang.js");var n=require("../../_virtual/plugin-vue_export-helper.js");const o=t.defineComponent({name:"CoPeriodictableStd",props:{width:{type:String},height:{type:String},initState:{type:String,default:"table"},btnShow:{type:Boolean,default:!0},tableData:{type:Array,default:[{title:"Hggg",text1:"Hydrogen",text2:"1.00794",x:1,y:1},{title:"He",text1:"Helium",text2:"4.002602",x:18,y:1},{title:"Li",text1:"Lithium",text2:"#6.941",x:1,y:2},{title:"Be",text1:"Beryllium",text2:"9.012182",x:2,y:2},{title:"B",text1:"Boron",text2:"#10.811",x:13,y:2},{title:"C",text1:"Carbon",text2:"#12.0107",x:14,y:2},{title:"N",text1:"Nitrogen",text2:"#14.0067",x:15,y:2},{title:"O",text1:"Oxygen",text2:"#15.9994",x:16,y:2},{title:"F",text1:"Fluorine",text2:"18.9984032",x:17,y:2},{title:"Ne",text1:"Neon",text2:"#20.1797",x:18,y:2},{title:"Na",text1:"Sodium",text2:"22.98976...",x:1,y:3},{title:"Mg",text1:"Magnesium",text2:"#24.305",x:2,y:3},{title:"Al",text1:"Aluminium",text2:"26.9815386",x:13,y:3},{title:"Si",text1:"Silicon",text2:"#28.0855",x:14,y:3},{title:"P",text1:"Phosphorus",text2:"30.973762",x:15,y:3},{title:"S",text1:"Sulfur",text2:"#32.065",x:16,y:3},{title:"Cl",text1:"Chlorine",text2:"#35.453",x:17,y:3},{title:"Ar",text1:"Argon",text2:"#39.948",x:18,y:3},{title:"K",text1:"Potassium",text2:"#39.948",x:1,y:4},{title:"Ca",text1:"Calcium",text2:"#40.078",x:2,y:4},{title:"Sc",text1:"Scandium",text2:"44.955912",x:3,y:4},{title:"Ti",text1:"Titanium",text2:"#47.867",x:4,y:4},{title:"V",text1:"Vanadium",text2:"#50.9415",x:5,y:4},{title:"Cr",text1:"Chromium",text2:"#51.9961",x:6,y:4},{title:"Mn",text1:"Manganese",text2:"54.938045",x:7,y:4},{title:"Fe",text1:"Iron",text2:"#55.845",x:8,y:4},{title:"Co",text1:"Cobalt",text2:"58.933195",x:9,y:4},{title:"Ni",text1:"Nickel",text2:"#58.6934",x:10,y:4},{title:"Cu",text1:"Copper",text2:"#63.546",x:11,y:4},{title:"Zn",text1:"Zinc",text2:"#65.38",x:12,y:4},{title:"Ga",text1:"Gallium",text2:"#69.723",x:13,y:4},{title:"Ge",text1:"Germanium",text2:"#72.63",x:14,y:4},{title:"As",text1:"Arsenic",text2:"#74.9216",x:15,y:4},{title:"Se",text1:"Selenium",text2:"#78.96",x:16,y:4},{title:"Br",text1:"Bromine",text2:"#79.904",x:17,y:4},{title:"Kr",text1:"Krypton",text2:"#83.798",x:18,y:4},{title:"Rb",text1:"Rubidium",text2:"#85.4678",x:1,y:5},{title:"Sr",text1:"Strontium",text2:"#87.62",x:2,y:5},{title:"Y",text1:"Yttrium",text2:"88.90585",x:3,y:5},{title:"Zr",text1:"Zirconium",text2:"#91.224",x:4,y:5},{title:"Nb",text1:"Niobium",text2:"92.90628",x:5,y:5},{title:"Mo",text1:"Molybdenum",text2:"#95.96",x:6,y:5},{title:"Tc",text1:"Technetium",text2:"(98)",x:7,y:5},{title:"Ru",text1:"Ruthenium",text2:"#101.07",x:8,y:5},{title:"Rh",text1:"Rhodium",text2:"#102.9055",x:9,y:5},{title:"Pd",text1:"Palladium",text2:"#106.42",x:10,y:5},{title:"Ag",text1:"Silver",text2:"#107.8682",x:11,y:5},{title:"Cd",text1:"Cadmium",text2:"#112.411",x:12,y:5},{title:"In",text1:"Indium",text2:"#114.818",x:13,y:5},{title:"Sn",text1:"Tin",text2:"#118.71",x:14,y:5},{title:"Sb",text1:"Antimony",text2:"#121.76",x:15,y:5},{title:"Te",text1:"Tellurium",text2:"127.6",x:16,y:5},{title:"I",text1:"Iodine",text2:"126.90447",x:17,y:5},{title:"Xe",text1:"Xenon",text2:"#131.293",x:18,y:5},{title:"Cs",text1:"Caesium",text2:"#132.9054",x:1,y:6},{title:"Ba",text1:"Barium",text2:"#132.9054",x:2,y:6},{title:"La",text1:"Lanthanum",text2:"138.90547",x:4,y:9},{title:"Ce",text1:"Cerium",text2:"#140.116",x:5,y:9},{title:"Pr",text1:"Praseodymium",text2:"140.90765",x:6,y:9},{title:"Nd",text1:"Neodymium",text2:"#144.242",x:7,y:9},{title:"Pm",text1:"Promethium",text2:"(145)",x:8,y:9},{title:"Sm",text1:"Samarium",text2:"#150.36",x:9,y:9},{title:"Eu",text1:"Europium",text2:"#151.964",x:10,y:9},{title:"Gd",text1:"Gadolinium",text2:"#157.25",x:11,y:9},{title:"Tb",text1:"Terbium",text2:"158.92535",x:12,y:9},{title:"Dy",text1:"Dysprosium",text2:"162.5",x:13,y:9},{title:"Ho",text1:"Holmium",text2:"164.93032",x:14,y:9},{title:"Er",text1:"Erbium",text2:"#167.259",x:15,y:9},{title:"Tm",text1:"Thulium",text2:"168.93421",x:16,y:9},{title:"Yb",text1:"Ytterbium",text2:"#173.054",x:17,y:9},{title:"Lu",text1:"Lutetium",text2:"#174.9668",x:18,y:9},{title:"Hf",text1:"Hafnium",text2:"#178.49",x:4,y:6},{title:"Ta",text1:"Tantalum",text2:"180.94788",x:5,y:6},{title:"W",text1:"Tungsten",text2:"#183.84",x:6,y:6},{title:"Re",text1:"Rhenium",text2:"#186.207",x:7,y:6},{title:"Os",text1:"Osmium",text2:"#190.23",x:8,y:6},{title:"Ir",text1:"Iridium",text2:"#192.217",x:9,y:6},{title:"Pt",text1:"Platinum",text2:"#195.084",x:10,y:6},{title:"Au",text1:"Gold",text2:"196.966569",x:11,y:6},{title:"Hg",text1:"Mercury",text2:"#200.59",x:12,y:6},{title:"Tl",text1:"Thallium",text2:"#204.3833",x:13,y:6},{title:"Pb",text1:"Lead",text2:"207.2",x:14,y:6},{title:"Bi",text1:"Bismuth",text2:"#208.9804",x:15,y:6},{title:"Po",text1:"Polonium",text2:"(209)",x:16,y:6},{title:"At",text1:"Astatine",text2:"(210)",x:17,y:6},{title:"Rn",text1:"Radon",text2:"(222)",x:18,y:6},{title:"Fr",text1:"Francium",text2:"(223)",x:1,y:7},{title:"Ra",text1:"Radium",text2:"(226)",x:2,y:7},{title:"Ac",text1:"Actinium",text2:"(227)",x:4,y:10},{title:"Th",text1:"Thorium",text2:"232.03806",x:5,y:10},{title:"Pa",text1:"Protactinium",text2:"#231.0588",x:6,y:10},{title:"U",text1:"Uranium",text2:"238.02891",x:7,y:10},{title:"Np",text1:"Neptunium",text2:"(237)",x:8,y:10},{title:"Pu",text1:"Plutonium",text2:"(244)",x:9,y:10},{title:"Am",text1:"Americium",text2:"(243)",x:10,y:10},{title:"Cm",text1:"Curium",text2:"(247)",x:11,y:10},{title:"Bk",text1:"Berkelium",text2:"(247)",x:12,y:10},{title:"Cf",text1:"Californium",text2:"(251)",x:13,y:10},{title:"Es",text1:"Einstenium",text2:"(252)",x:14,y:10},{title:"Fm",text1:"Fermium",text2:"(257)",x:15,y:10},{title:"Md",text1:"Mendelevium",text2:"(258)",x:16,y:10},{title:"No",text1:"Nobelium",text2:"(259)",x:17,y:10},{title:"Lr",text1:"Lawrencium",text2:"(262)",x:18,y:10},{title:"Rf",text1:"Rutherfordium",text2:"(267)",x:4,y:7},{title:"Db",text1:"Dubnium",text2:"(268)",x:5,y:7},{title:"Sg",text1:"Seaborgium",text2:"(271)",x:6,y:7},{title:"Bh",text1:"Bohrium",text2:"(272)",x:7,y:7},{title:"Hs",text1:"Hassium",text2:"(270)",x:8,y:7},{title:"Mt",text1:"Meitnerium",text2:"(276)",x:9,y:7},{title:"Ds",text1:"Darmstadium",text2:"(281)",x:10,y:7},{title:"Rg",text1:"Roentgenium",text2:"(280)",x:11,y:7},{title:"Cn",text1:"Copernicium",text2:"(285)",x:12,y:7},{title:"Uut",text1:"Unutrium",text2:"(284)",x:13,y:7},{title:"Fl",text1:"Flerovium",text2:"(289)",x:14,y:7},{title:"Uup",text1:"Ununpentium",text2:"(288)",x:15,y:7},{title:"Lv",text1:"Livermorium",text2:"(293)",x:16,y:7},{title:"Uus",text1:"Ununseptium",text2:"(294)",x:17,y:7},{title:"Uuo",text1:"Ununoctium",text2:"(294)",x:18,y:7}]}},setup(n){const o=t.ref([]);t.ref([]);const a=t.ref(!0),u=t.ref(),r=t.ref(),m=t.ref(),y=t.ref(),s=t.ref();let d,c,h,p;const v=t.ref([]),b={table:[],sphere:[],helix:[],grid:[]};t.ref(!1);const f=()=>{o.value=[];for(let t=0;t<n.tableData.length;t++){let e=n.tableData[t];for(let t in e)o.value.push(e[t])}};f();const g=()=>{r.value=u.value.offsetWidth,m.value=u.value.offsetHeight};function S(){var t;v.value=[],b.table=[],b.sphere=[],b.helix=[],b.grid=[],d=new e.PerspectiveCamera(38,r.value/m.value,1,1e4),d.position.z=3e3,c=new e.Scene;for(let x=0;x<o.value.length;x+=5){let t=document.createElement("div");t.className="element",t.style.backgroundColor="rgba(0,127,127,"+(.5*Math.random()+.25)+")";let i=document.createElement("div");i.className="number",i.textContent=""+(x/5+1),t.appendChild(i);let n=document.createElement("div");n.className="symbol",n.textContent=`${o.value[x]}`,t.appendChild(n);let a=document.createElement("div");a.className="details",a.innerHTML=o.value[x+1]+"<br>"+o.value[x+2],t.appendChild(a);let u=new l.CSS3DObject(t);u.position.x=4e3*Math.random()-2e3,u.position.y=4e3*Math.random()-2e3,u.position.z=4e3*Math.random()-2e3,c.add(u),v.value.push(u);let r=new e.Object3D;r.position.x=140*o.value[x+3]-1330,r.position.y=-180*o.value[x+4]+1070,b.table.push(r)}var i=new e.Vector3;for(let x=0,l=v.value.length;x<l;x++){var a=Math.acos(2*x/l-1),u=Math.sqrt(l*Math.PI)*a,f=new e.Object3D;f.position.setFromSphericalCoords(800,a,u),i.copy(f.position).multiplyScalar(2),f.lookAt(i),b.sphere.push(f)}i=new e.Vector3;for(let x=0,l=v.value.length;x<l;x++){let t=.175*x+Math.PI,l=-8*x+450,n=new e.Object3D;n.position.setFromCylindricalCoords(900,t,l),i.x=2*n.position.x,i.y=n.position.y,i.z=2*n.position.z,n.lookAt(i),b.helix.push(n)}for(let x=0;x<v.value.length;x++){let t=new e.Object3D;t.position.x=x%5*400-800,t.position.y=-Math.floor(x/5)%5*400+800,t.position.z=1e3*Math.floor(x/25)-2e3,b.grid.push(t)}h=new l.CSS3DRenderer,h.setSize(r.value,m.value),null==(t=document.getElementById(`${y.value}`))||t.appendChild(h.domElement),p=new x.TrackballControls(d,h.domElement),p.rotateSpeed=.5,p.minDistance=500,p.maxDistance=6e3,p.addEventListener("change",N);document.querySelector(`#${s.value} .table`).addEventListener("click",(function(){C(b.table,2e3)}),!1);document.querySelector(`#${s.value} .sphere`).addEventListener("click",(function(){C(b.sphere,2e3)}),!1);document.querySelector(`#${s.value} .helix`).addEventListener("click",(function(){C(b.helix,2e3)}),!1);document.querySelector(`#${s.value} .grid`).addEventListener("click",(function(){C(b.grid,2e3)}),!1),C(b[n.initState],2e3)}(()=>{const t="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",e=t.length;let i="";for(let x=0;x<8;x++){i+=t[Math.floor(Math.random()*e)]}y.value="container-"+i,s.value="menu-"+i})();var E=t.ref([]);function C(t,e){let x,l,n;E.value.forEach((t=>{i.TWEEN.remove(t)})),E.value=[];for(let o=0;o<v.value.length;o++){const n=v.value[o],a=t[o];x=new i.TWEEN.Tween(n.position).to({x:a.position.x,y:a.position.y,z:a.position.z},Math.random()*e+e).easing(i.TWEEN.Easing.Exponential.InOut).start(),l=new i.TWEEN.Tween(n.rotation).to({x:a.rotation.x,y:a.rotation.y,z:a.rotation.z},Math.random()*e+e).easing(i.TWEEN.Easing.Exponential.InOut).start(),E.value.push(x),E.value.push(l)}n=(new i.TWEEN.Tween).to({},2*e).onUpdate(N).start(),E.value.push(n)}function T(){requestAnimationFrame(T),i.TWEEN.update(),p.update()}function N(){h.render(c,d)}t.watch((()=>n.initState),(()=>{a.value=!1,t.nextTick((()=>{a.value=!0,t.nextTick((()=>{S(),T()}))}))})),t.watch((()=>n.tableData),(()=>{a.value=!1,f(),t.nextTick((()=>{a.value=!0,t.nextTick((()=>{S(),T()}))}))}),{deep:!0});return t.onMounted((()=>{t.nextTick((()=>{g(),S(),T()}))})),{show:a,containerDom:u,containerId:y,menuId:s,RESET_VIEW:()=>{r.value&&(g(),d.aspect=r.value/m.value,d.updateProjectionMatrix(),h.setSize(r.value,m.value),N())},...t.toRefs(n)}}}),a=["id"],u=["id"],r=[t.createElementVNode("button",{class:"table"},"表面",-1),t.createElementVNode("button",{class:"sphere"},"球体",-1),t.createElementVNode("button",{class:"helix"},"螺旋",-1),t.createElementVNode("button",{class:"grid"},"网格",-1)];var m=n.default(o,[["render",function(e,i,x,l,n,o){return t.openBlock(),t.createElementBlock("div",{class:"co-periodictable-std",ref:"containerDom",style:t.normalizeStyle({width:e.width||"100%",height:e.height||"100%"})},[e.show?(t.openBlock(),t.createElementBlock("div",{key:0,id:e.containerId},null,8,a)):t.createCommentVNode("",!0),e.btnShow?(t.openBlock(),t.createElementBlock("div",{key:1,id:e.menuId,class:"menuStyle"},r,8,u)):t.createCommentVNode("",!0)],4)}]]);exports.default=m;