vue2 监听属性面板隐藏节点data里面定义attrStore在mounted的时候params已经有值了。 attrStore: params.attrStore watch:{attrStore.attrs:{handler(val){const itemsdocument.querySelectorAll(.cus-attrs-tabs .el-tabs__item)if(!items.length)returnitems.forEach(elel.innerText!基本信息(el.style.displaynone))}, deep:true}},动态组件弹窗在最顶上appendTosetOption({class:report-box, style:{top:80px, width:800px, left:600px, zIndex:9999,}, showClose: false, showMini: false, appendTo:.cus-main,});动态组件里面使用 ElMessageel-buttontypeprimaryclicksubmitForm(ruleFormRef,$message)classconfirm-btn确定/el-buttonconst submitFormasync(formEl, ElMessage){if(!formEl)return;await formEl.validate((valid, fields){if(valid){const userInfoJSON.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不然图形无法加载。templatedivclassleft-containerdivclasscqdb-bottomdividcqdb-pie/div/div/div/templatescript setuplangtsimport{nextTick, onMounted, shallowRef}fromvue;import* as echarts fromecharts;importecharts-gl;// 生成模拟 3D 饼图的配置项functiongetPie3D(pieData, internalDiameterRatio){const series[];// 总和letsumValue0;letstartValue0;letendValue0;const legendData[];const ktypeof internalDiameterRatio!undefined?(1- internalDiameterRatio)/(1 internalDiameterRatio):1/3;// 为每一个饼图数据生成一个 series-surface 配置for(let i0;ipieData.length;i1){sumValuepieData[i].value;const seriesItem{name: typeof pieData[i].nameundefined?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.colorpieData[i].itemStyle.color):null;// eslint-disable-next-line no-unused-expressions typeof pieData[i].itemStyle.opacity!undefined?(itemStyle.opacitypieData[i].itemStyle.opacity):null;seriesItem.itemStyleitemStyle;}series.push(seriesItem);}// 使用上一次遍历时计算出的数据和 sumValue调用 getParametricEquation 函数 // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation也就是实现每一个扇形。 console.log(series);for(let i0;iseries.length;i1){endValuestartValue series[i].pieData.value;series[i].pieData.startRatiostartValue / sumValue;series[i].pieData.endRatioendValue / sumValue;series[i].parametricEquationgetParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, // 我这里做了一个处理使除了第一个之外的值都是10 series[i].pieData.valueseries[0].pieData.value ?35:10);startValueendValue;legendData.push(series[i].name);}// 准备待返回的配置项把准备好的 legendData、series 传入。 const option{// animation: false, tooltip:{formatter:(params){if(params.seriesName!mouseoutSeries){return${params.seriesName}br/spanstyledisplay: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 rowpieData.find((item)item.namename);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 startRadianstartRatio * Math.PI *2;const endRadianendRatio * Math.PI *2;const midRadianmidRatio * Math.PI *2;// 如果只有一个扇形则不实现选中效果。if(startRatio0endRatio1){// eslint-disable-next-line no-param-reassign isSelectedfalse;}// 通过扇形内径/外径的值换算出辅助参数 k默认值1/3 // eslint-disable-next-line no-param-reassign ktypeof k!undefined? k:1/3;// 计算选中效果分别在 x 轴、y 轴方向上的位移未选中则位移均为0 const offsetXisSelected ? Math.cos(midRadian)*0.1:0;const offsetYisSelected ? Math.sin(midRadian)*0.1:0;// 计算高亮效果的放大比例未高亮则比例为1 const hoverRateisHovered ?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(ustartRadian){return(offsetX Math.cos(startRadian)*(1 Math.cos(v)* k)* hoverRate);}if(uendRadian){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(ustartRadian){return(offsetY Math.sin(startRadian)*(1 Math.cos(v)* k)* hoverRate);}if(uendRadian){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(uMath.PI *2.5){returnMath.sin(u)* h *0.1;}// 当前图形的高度是Z根据h每个value的值决定的returnMath.sin(v)0?1* h *0.1:-1;},};}functioninit3dPie(){const chartshallowRef(null);const containershallowRef(null);container.valuedocument.getElementById(cqdb-pie);container.value.styleheight: 100px;chart.valueecharts.init(container.value,null);chart.value.off(click);chart.value.clear();const optiongetPie3D([{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);optionchart.value.setOption(option);}onMounted((){nextTick((){init3dPie();});});/scriptstyle scopedlangscss.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.valuename;//清空图层 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}],},],],},*);} 动态组件保存失败postmanhttp://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 dialogChartcharts.find((item)item.name.includes(_提示));dialogChartdynamicChartStore.setMessage({cmd:loadDialogComp, params:{row: dialogChart, name},});setTimeout((){dynamicChartStore.setMessage({cmd:message, params:{name},});},1000);}; 提示弹窗2templatedivclasslishi-tip-draggabledivclasstips-boximgsrcdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAeVJREFUOEdlL9rFEEUx7/fvZ1VIvEHaNBwu4JRb88uJjZqUCtBG0PAxlb/HysbOztRBAuN2gQSEISLnewepyn2zJKzkkiImb3dJzt6h547kjjlm98vu9eTNExWr77lwBzhO4BKJhJIK2ACvI5Vkz7b8dPcbfA53AO9eHPCI4U2UwiInIOxfZnTNdfBrEhqDYV7NCvCF45FQIQzYYF9fDVO0y5gBdXxM5VQtgId3AxlqBOvejp459QU9A4oC1aoqR0S2HMkaY8D2lqMigBMVRi/DRN9kVK8t0Kk9tWSyFiZ66pfZe4LTVTrJi4uMffUY5O1KAaTXTLLj5V7sex9BGOhfSQY99bBzFZnZF8C5PsoAEFqmcpDQJZZRyo7wD32ZocJtr0MQ7UNsD9FsOvJWgT4LgNdKDQY/XPyNqBl9lvVDYZB14EILSKJL9l5pq15zaNiHwoM3oI8O6e5mdULPKAke9eJ51X9ozkAqWYEKf2wm5WXP7ZSF8tg5yzjMAsCzkGx1msvnoshl19w4DWTuCkdlUL5NE9lShIvR19fvhEysOdSTWdu1gCeGg3MAE2nL61kgRl/r/kYgeO3mt7pFN2B6RgQbBTd6/k4DxoPrazAuRlKwkuCRJM8lWR7PAVGEs/jTRuiFAAAAAElFTkSuQmCCalt/spanclasstips{{errmassage}}/span/div/div/templatescriptexportdefault{setup(){const{inject, onMounted, onBeforeUnmount,watch,ref}vue;const{dynamicChartStore}params;const setOptioninject(setOption);const errmassageref(!!!)watch(()dynamicChartStore.message,(val){if(val.cmdmessage){console.log(val.params.name,错误提示)errmassage.valueval.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}},};/scriptstylelangscss.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