🦋 vue2 监听属性面板，隐藏节点

data里面定义attrStore，在mounted的时候，params已经有值了。 attrStore: params.attrStore watch:{'attrStore.attrs':{handler(val){const items=document.querySelectorAll('.cus-attrs-tabs .el-tabs__item')if(!items.length)returnitems.forEach(el=>el.innerText!=='基本信息'&&(el.style.display='none'))}, deep:true}},

🦋动态组件弹窗在最顶上，appendTo

setOption({class:"report-box", style:{top:`80px`, width:"800px", left:"600px", zIndex:9999,}, showClose: false, showMini: false, appendTo:".cus-main",});

🦋动态组件里面使用 ElMessage

<el-buttontype="primary"@click="submitForm(ruleFormRef,$message)"class="confirm-btn">确定</el-button>const submitForm=async(formEl, ElMessage)=>{if(!formEl)return;await formEl.validate((valid, fields)=>{if(valid){const userInfo=JSON.parse(localStorage.userInfo);const data={...ruleForm};data.工单描述=handleDesc()+ data.工单描述;data.大类="问题反馈";data.发起人=userInfo.userId;data.发起人姓名=userInfo.urName;data.组织机构=userInfo.orgFullName;feedbackSave(data).then((res)=>{onClose();ElMessage.success("操作成功");}).catch((err)=>{ElMessage.error(err.message||"操作成功");});}else{console.log("error submit!", fields);}});};

🦋 3d饼图，需要安装echarts-gl，不然图形无法加载。

<template><divclass="left-container"><divclass="cqdb-bottom"><divid="cqdb-pie"></div></div></div></template><script setuplang="ts">import{nextTick, onMounted, shallowRef}from"vue";import* as echarts from"echarts";import"echarts-gl";// 生成模拟 3D 饼图的配置项functiongetPie3D(pieData, internalDiameterRatio){const series=[];// 总和letsumValue=0;letstartValue=0;letendValue=0;const legendData=[];const k=typeof internalDiameterRatio!=="undefined"?(1- internalDiameterRatio)/(1+ internalDiameterRatio):1/3;// 为每一个饼图数据，生成一个 series-surface 配置for(let i=0;i<pieData.length;i+=1){sumValue+=pieData[i].value;const seriesItem={name: typeof pieData[i].name==="undefined"?`series${i}`:pieData[i].name, type:"surface", parametric: true, wireframe:{show: false,}, pieData: pieData[i], pieStatus:{selected: false, hovered: false, k,},};if(typeof pieData[i].itemStyle!=="undefined"){const{itemStyle}=pieData[i];// eslint-disable-next-line no-unused-expressions typeof pieData[i].itemStyle.color!=="undefined"?(itemStyle.color=pieData[i].itemStyle.color):null;// eslint-disable-next-line no-unused-expressions typeof pieData[i].itemStyle.opacity!=="undefined"?(itemStyle.opacity=pieData[i].itemStyle.opacity):null;seriesItem.itemStyle=itemStyle;}series.push(seriesItem);}// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数， // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。 console.log(series);for(let i=0;i<series.length;i+=1){endValue=startValue + series[i].pieData.value;series[i].pieData.startRatio=startValue / sumValue;series[i].pieData.endRatio=endValue / sumValue;series[i].parametricEquation=getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, // 我这里做了一个处理，使除了第一个之外的值都是10 series[i].pieData.value===series[0].pieData.value ?35:10);startValue=endValue;legendData.push(series[i].name);}// 准备待返回的配置项，把准备好的 legendData、series 传入。 const option={// animation: false, tooltip:{formatter:(params)=>{if(params.seriesName!=="mouseoutSeries"){return`${params.seriesName}<br/><spanstyle="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${ params.color };"></span>${option.series[params.seriesIndex].pieData.value}`;}return"";},}, legend:{orient:"vertical", right:0, top:"center", pageIconInactiveColor:"#C0C4CC", pageIconColor:"#fff", itemWidth:8, itemHeight:8, pageTextStyle:{color:"#fff",}, formatter:function(name){const row=pieData.find((item)=>item.name===name);var arr=[`{a|${name}：}`,`{${row.rich}|${Number(row.value)>9999?(Number(row.value)/10000).toFixed(1):row.value}}`,`{a|${Number(row.value)>9999?"万k㎡":"k㎡"}}`,`{${row.rich}|${row.pct}}`,`{a|%}`,];returnarr.join("");}, textStyle:{rich:{a:{fontSize:14, align:"left", color:"#fff",}, b:{fontSize:14, align:"left", color:"#EED73F", fontWeight:600,}, c:{fontSize:14, align:"right", color:"#4DCCFF", fontWeight:600,}, d:{fontSize:14, align:"right", color:"#9A90FF", fontWeight:600,},},},}, xAxis3D:{min: -1, max:1,}, yAxis3D:{min: -1, max:1,}, zAxis3D:{min: -1, max:1,}, grid3D:{show: false, boxHeight:5, top:"-8%", left:"-30%", viewControl:{// 3d效果可以放大、旋转等，请自己去查看官方配置 alpha:35, // beta:50, rotateSensitivity:1, zoomSensitivity:0, panSensitivity:0, autoRotate: false, distance:130,}, // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。 postEffect:{// 配置这项会出现锯齿，请自己去查看官方配置有办法解决 enable: false, bloom:{enable: true, bloomIntensity:0.1,}, SSAO:{enable: true, quality:"medium", radius:2,}, // temporalSuperSampling:{// enable: true, //},},}, series,};returnoption;}// 生成扇形的曲面参数方程functiongetParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h){// 计算 const midRatio=(startRatio + endRatio)/2;const startRadian=startRatio * Math.PI *2;const endRadian=endRatio * Math.PI *2;const midRadian=midRatio * Math.PI *2;// 如果只有一个扇形，则不实现选中效果。if(startRatio===0&&endRatio===1){// eslint-disable-next-line no-param-reassign isSelected=false;}// 通过扇形内径/外径的值，换算出辅助参数 k（默认值1/3） // eslint-disable-next-line no-param-reassign k=typeof k!=="undefined"? k:1/3;// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为0） const offsetX=isSelected ? Math.cos(midRadian)*0.1:0;const offsetY=isSelected ? Math.sin(midRadian)*0.1:0;// 计算高亮效果的放大比例（未高亮，则比例为1） const hoverRate=isHovered ?1.05:1;// 返回曲面参数方程return{u:{min: -Math.PI, max: Math.PI *3, step: Math.PI /32,}, v:{min:0, max: Math.PI *2, step: Math.PI /20,}, x(u,v){if(u<startRadian){return(offsetX + Math.cos(startRadian)*(1+ Math.cos(v)* k)* hoverRate);}if(u>endRadian){return(offsetX + Math.cos(endRadian)*(1+ Math.cos(v)* k)* hoverRate);}returnoffsetX + Math.cos(u)*(1+ Math.cos(v)* k)* hoverRate;}, y(u,v){if(u<startRadian){return(offsetY + Math.sin(startRadian)*(1+ Math.cos(v)* k)* hoverRate);}if(u>endRadian){return(offsetY + Math.sin(endRadian)*(1+ Math.cos(v)* k)* hoverRate);}returnoffsetY + Math.sin(u)*(1+ Math.cos(v)* k)* hoverRate;}, z(u,v){if(u<-Math.PI*0.5){returnMath.sin(u);}if(u>Math.PI *2.5){returnMath.sin(u)* h *0.1;}// 当前图形的高度是Z根据h（每个value的值决定的）returnMath.sin(v)>0?1* h *0.1:-1;},};}functioninit3dPie(){const chart=shallowRef(null);const container=shallowRef(null);container.value=document.getElementById("cqdb-pie");container.value.style=`height: 100px`;chart.value=echarts.init(container.value,"null");chart.value.off("click");chart.value.clear();const option=getPie3D([{name:"已登记", value:47, pct:"XX.X", itemStyle:{color:"#EED73F",}, rich:"b",},{name:"已权调未登记", value:44, pct:"XX.X", itemStyle:{color:"#4DCCFF",}, rich:"c",},{name:"国土调查补充", value:32, pct:"XX.X", itemStyle:{color:"#9A90FF",}, rich:"d",},],0.75);// resizeChart(chart.value, container.value);option&&chart.value.setOption(option);}onMounted(()=>{nextTick(()=>{init3dPie();});});</script><style scopedlang="scss">.left-container{box-sizing: border-box;height:100%;overflow-y: auto;position: relative;.title{position: absolute;width:100%;height: 30px;top: 35px;cursor: pointer;}img{width:100%;// height:100%;}}.cqdb-bottom{width:100%;height: 101px;background: rgba(0,48,93,0.66);border: 1px solid#0d62b6;margin-top: 4px;#cqdb-pie {width:100%;height:100%;}}</style>

🦋 叠加图层并增加筛选条件

functionclydAddlayer(name, layerDefs){currentName.value=name;//清空图层 window.postMessage({key:"$CesiumLayersManager", func:"removeALLLayers", params:[],},"*");// 叠图 window.postMessage({key:"$CesiumLayersManager", func:"addLayersById", params:["64317d0a-a688-41cc-bcb1-76eed09728ba", false,[{serviceId:"c2ddc204-8044-45ee-9c5f-631756dbd951", layers:[0], layerDefs:[{layerNo:0, where: layerDefs}],},],],},"*");}

🦋 动态组件保存失败

postman
http://23.36.2.153:9999/api/datamanager/chartInfo/save
把save接口失败的 参数，copy value ，
放在body里面
send

🦋 显示属性信息 和关闭属性信息

const{attrStore}=params;//显示属性信息 attrStore.setAttrs(attrInfo);attrStore.setVisible(true);//关闭属性信息 setTimeout(()=>{attrStore.setAttrs(null);attrStore.setVisible(false);},300);

🦋打开提示弹窗1

// 打开提示弹窗 const loadtopmessage=(name)=>{if(!charts||!charts.length)return;const dialogChart=charts.find((item)=>item.name.includes("_提示"));dialogChart&&dynamicChartStore.setMessage({cmd:"loadDialogComp", params:{row: dialogChart, name},});setTimeout(()=>{dynamicChartStore.setMessage({cmd:"message", params:{name},});},1000);};

🦋 提示弹窗2

<template><divclass="lishi-tip-draggable"><divclass="tips-box"><imgsrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAeVJREFUOE+dlL9rFEEUx7/fvZ1VIvEHaNBwu4JRb88uJjZqUCtBG0PAxlb/HysbOztRBAuN2gQSEISLnewepyn2zJKzkkiImb3dJzt6h547kjjlm+98vu+9eTNExWr77lwBzhO4BKJhJIK2ACvI5Vkz7b8dPcbfA53AO9eHPCI4U2UwiInIOxfZnTNdfBrEhqDYV7NCvCF45F+QIQzYYF9fDVO0y5gBdXxM5VQtgId3AxlqBOvejp459QU9A4oC1aoqR0S2HMkaY8D2lqMigBMVRi/DRN9kVK8t0Kk9tWSyFiZ66pfZe4LTVTrJi4uMffUY5O1KAaTXTLLj5V7sex9BGOhfS+Q+Y99bBzFZnZF8C5PsoAEFqmcpDQJZZRyo7wD32ZocJtr0MQ7UNsD9FsOvJWgT4LgNdKDQY/XPyNqBl9lvVDYZB14EILSKJL9l5pq15zaNiHwoM3oI8O6e5mdULPKAke9eJ51X9ozkAqWYEKf2wm5WXP7ZSF8tg5yzjMAsCzkGx1msvnoshl19w4DWTuCkdlUL5NE9lShIvR19fvhEysOdSTWdu1gCeGg3MAE2nL6+1kgRl/r/+kYgeO3m+t7pFN2B6R+gQbBTd6/k4DxoPrazAuRlKwkuC+RJM8lWR7P+AVGEs/jTRuiFAAAAAElFTkSuQmCC"alt=""/><spanclass="tips">{{errmassage}}</span></div></div></template><script>exportdefault{setup(){const{inject, onMounted, onBeforeUnmount,watch,ref}=vue;const{dynamicChartStore}=params;const setOption=inject("setOption");const errmassage=ref('!!!')watch(()=>dynamicChartStore.message,(val)=>{if(val.cmd==='message'){console.log(val.params.name,'错误提示')errmassage.value=val.params.name}});setOption({class:"lishi-tip-draggable", style:{top:`125px`, width:"300px", transform:"translateX(-50%)", left:"50%",}, showClose: true, showMini: false,});onMounted(()=>{setTimeout(()=>{dynamicChartStore.closeDialogComp();},5000);});onBeforeUnmount(()=>{dynamicChartStore.closeDialogComp();});return{errmassage}},};</script><stylelang="scss">.lishi-tip-draggable{background:#fff;.cus-draggable-header{display: none;}.cus-draggable-body{padding:0;background:#fff;border: none;box-shadow: none;}.tips-box{display: flex;align-items: center;padding: 10px;}.tips{color: red;margin-left: 10px;}}</style>