marker:''>>地图上坐标点标识my_lat:''>>纬度my_lng:''>>经度getLocation>>获取当前自身定位函数js_get_once_location>>手机获取一次系统经纬度并返回给H5（单次定位功能）【详细查看注1移动端交互文档】window.NativeGetLocationCallbaclk>>获取当前自身定位回调函数,函数返回给H5的是json字符串格式的数据，其格式为：{"longreg":xxxx,"latreg":xxxx,"code":xxx}handleMark>>根据上面回调函数返回的经纬度信息，添加地图标识点handlePosition>>地图定位,规划路线,其中AMap.Driving为高德路线规划所需插件handleOpenArea>>打开手机上高德地图，并根据起点、终点经纬度，自动添入起点终点；其中，js_open_map_app>>为JS交互--打开三方地图APP注：以下代码是基于Vue3的，把变量都写在了state里面，调用也是通过state.变量调用的，如果用Vue2只需要把变量写在data(){}里面，使用this正常调用设置一个地图容器<template><divclass="page_container"><!--地图容器container--><divid="container"></div></div></template><stylelang="less"scoped>#container{width:600px;height:400px;}</style>注：这里需要给地图容器设置宽高，不然会导致地图不显示：//注1：data里面主要定义4个变量，分别是地图对象容器map，坐标点maker，纬度my_lat，经度my_lngconststate=reactive({map:'',marker:'',my_lat:'',my_lng:'','})//注2：地图初始化函数constinitMap=()=>{letAMap=window.AMapstate.map=newAMap.Map('container',{resizeEnable:true,})}//getPermission获取当前定位权限\是否开启定位权限：0--未开启，4-已开启constgetPermission=()=>{try{jsBridge.js_LocationAuthStatus(JSON.stringify({callBackFuncName:'getAccess'}))}catch(error){console.log(error);}}//getPermission的回调window.getAccess=(data)=>{console.log(data,'----返回是否开启定位权限：0，1，2--未开启权限，3,4-已开启权限');if(data==4||data==3){getLocation()state.banSignBtn=false}elseif(data==0||data==1||data==2){state.banSignBtn=true}}//注3：获取自身当前位置（经纬度）getLocation--获取当前自身定位函数constgetLocation=()=>{letu=navigator.userAgent//判断是否安卓letisAndroid=u.indexOf('Android')>-1||u.indexOf('Linux')>-1//判断是否IOSletisIOS=!!u.match(/\(i[^;]+;(U;)?CPU.+MacOSX/)if(isAndroid){window?.control?.callHandler?.('js_get_once_location',JSON.stringify({locationType:'GCJ-02'}))}elseif(isIOS){window.webkit.messageHandlers.js_get_once_location.postMessage({locationType:'GCJ-02',})}}//赋值state.my_lat---state.my_lng---获取当前自身定位回调函数window.NativeGetLocationCallbaclk=function(json){consttargetData=JSON.parse(json)if(targetData.code===200||targetData.code==='200'){state.my_lat=targetData.latregstate.my_lng=targetData.longreghandleMark()}else{commit(SET_MESSAGE_STATE,{switch:true,info:'定位失败',time:''})}}//注4：handleMark--->根据已获取的经纬度添加定位点consthandleMark=()=>{if(state.marker){state.map.remove(state.marker)}state.map.setZoomAndCenter(14,[state.my_lng,state.my_lat])letAMap=window.AMapletposition=newAMap.LngLat(state.my_lng,state.my_lat)state.marker=newAMap.Marker({position:position,//经纬度对象，也可以是经纬度构成的一维数组[116.39,39.9]})state.map.add(state.marker)}其他相关函数//地图定位规划路线consthandlePosition=()=>{letAMap=window.AMapletmap=newAMap.Map('container',{resizeEnable:true,zoom:20,})//AMap.Driving为高德路线规划所需插件AMap.plugin('AMap.Driving',function(){letdriving=newAMap.Driving({//驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式policy:AMap.DrivingPolicy.LEAST_TIME,map:map,})//startLngLat起点经纬度----endLngLat经纬度letstartLngLat=[state.my_lng,state.my_lat]letendLngLat=[state.company_longitude,state.company_latitude]driving.search(startLngLat,endLngLat,function(){//未出错时，result即是对应的路线规划方案})})}//打开导航---handleOpenAreaconsthandleOpenArea=()=>{letu=navigator.userAgent//判断是否安卓letisAndroid=u.indexOf('Android')>-1||u.indexOf('Linux')>-1//判断是否IOSletisIOS=!!u.match(/\(i[^;]+;(U;)?CPU.+MacOSX/)//js_open_map_app：调用高德地图if(isAndroid){window?.control?.callHandler('js_open_map_app',JSON.stringify({latitude:state.company_latitude,longitude:state.company_longitude,address:state.company_address,}))}elseif(isIOS){window.webkit.messageHandlers.js_open_map_app.postMessage(JSON.stringify({latitude:state.company_latitude,longitude:state.company_longitude,address:state.company_address,}))}}//扫描二维码信息和企业信息比较constgetCodeInfo=()=>{//二维码扫描获取---注：这里js_sweep_code给非空参数即可，//closeSystemPhotoBtn关闭从本地相册取二维码jsBridge.js_sweep_code(JSON.stringify({closeSystemPhotoBtn:true}))window.sweepCode=(data)=>{letstartLngLat=[]letendLngLat=[]letdistanceQr=AMap.GeometryUtil.distance(startLngLat,endLngLat)/1000}}

这里对于之前的文章《树形数组扁平化》，不过还原树形数组目前在项目中尚未遇到，在这里暂做下记录//还原树形结构restoreTree(arr,idKey="id",parentIdKey="parentId"){constmap={};constroots=[];//将节点按照id存储到一个对象中for(constnodeofarr){map[node[idKey]]={...node,children:[]};}//遍历每个节点，将其添加到其父节点的children属性中for(constnodeofarr){constparent=map[node[parentIdKey]];if(parent){parent.children.push(map[node[idKey]]);}else{roots.push(map[node[idKey]]);}}returnroots;},

主要实现了树形菜单多级选择、input搜索功能组件treeSelect.vue<template><el-select:value="valueTitle":clearable="clearable"@clear="clearHandle"ref="el_select"><el-inputclass="selectInput":placeholder="placeholder"v-model="filterText"></el-input><el-option:value="valueTitle":label="valueTitle"class="options"><el-treeid="tree-option"ref="selectTree":accordion="accordion":data="options":props="props":node-key="props.value":default-expanded-keys="defaultExpandedKey":filter-node-method="filterNode"@node-click="handleNodeClick"></el-tree></el-option></el-select></template><script>exportdefault{name:"el-tree-select",props:{/*配置项*/props:{type:Object,default:()=>{return{value:'id',//ID字段名label:'title',//显示名称children:'children'//子级字段名}}},/*选项列表数据(树形结构的对象数组)*/options:{type:Array,default:()=>{return[]}},/*初始值*/value:{type:Number,default:()=>{returnnull}},/*可清空选项*/clearable:{type:Boolean,default:()=>{returntrue}},/*自动收起*/accordion:{type:Boolean,default:()=>{returnfalse}},placeholder:{type:String,default:()=>{return"检索关键字"}}},data(){return{filterText:'',valueId:this.value,//初始值valueTitle:'',defaultExpandedKey:[]}},mounted(){this.initHandle()},methods:{//初始化值initHandle(){if(this.valueId){this.valueTitle=this.$refs.selectTree.getNode(this.valueId).data[this.props.label]//初始化显示this.$refs.selectTree.setCurrentKey(this.valueId)//设置默认选中this.defaultExpandedKey=[this.valueId]//设置默认展开}this.initScroll()},//初始化滚动条initScroll(){this.$nextTick(()=>{letscrollWrap=document.querySelectorAll('.el-scrollbar.el-select-dropdown__wrap')[0]letscrollBar=document.querySelectorAll('.el-scrollbar.el-scrollbar__bar')scrollWrap.style.cssText='margin:0px;max-height:none;overflow:hidden;'scrollBar.forEach(ele=>ele.style.width=0)})},//切换选项handleNodeClick(node){this.valueTitle=node[this.props.label]this.valueId=node[this.props.value]this.$emit('getValue',this.valueId)this.defaultExpandedKey=[]this.$refs.el_select.blur()//手动关闭选择框},//清除选中clearHandle(){this.valueTitle=''this.valueId=nullthis.defaultExpandedKey=[]this.clearSelected()this.$emit('getValue',null)},/*清空选中样式*/clearSelected(){letallNode=document.querySelectorAll('#tree-option.el-tree-node')allNode.forEach((element)=>element.classList.remove('is-current'))},filterNode(value,data){if(!value)returntrue;returndata.name.indexOf(value)!==-1;}},watch:{value(){this.valueId=this.valuethis.initHandle()},filterText(val){this.$refs.selectTree.filter(val);}},};</script><!--Add"scoped"attributetolimitCSStothiscomponentonly--><stylescoped>.el-scrollbar.el-scrollbar__view.el-select-dropdown__item{height:auto;max-height:274px;padding:0;overflow:hidden;overflow-y:auto;}.el-select-dropdown__item.selected{font-weight:normal;}ulli>>>.el-tree.el-tree-node__content{height:auto;padding:020px;}.el-tree-node__label{font-weight:normal;}.el-tree>>>.is-current.el-tree-node__label{color:#409EFF;font-weight:700;}.el-tree>>>.is-current.el-tree-node__children.el-tree-node__label{color:#606266;font-weight:normal;}.selectInput{padding:05px;box-sizing:border-box;}</style>父组件引入该组件<template><divstyle="margin-top:200px"><SelectTree:props="props":options="optionData":value="valueId":clearable="isClearable":accordion="isAccordion"@getValue="getValue($event)"/>ID为：{{valueId}}</div></template><script>importSelectTreefrom"@/views/warehouseInformation/common/treeSelect";exportdefault{components:{SelectTree,},data(){return{checkList:[],isClearable:true,//可清空（可选）isAccordion:true,//可收起（可选）valueId:1,//初始ID（可选）props:{//配置项（必选）value:"id",label:"name",children:"children",//disabled:true},//选项列表（必选）list:[{id:1,parentId:0,name:"一级菜单A",rank:1},{id:2,parentId:0,name:"一级菜单B",rank:1},{id:3,parentId:0,name:"一级菜单C",rank:1},{id:4,parentId:1,name:"二级菜单A-A",rank:2},{id:5,parentId:1,name:"二级菜单A-B",rank:2},{id:6,parentId:2,name:"二级菜单B-A",rank:2},{id:7,parentId:4,name:"三级菜单A-A-A",rank:3},{id:8,parentId:7,name:"四级菜单A-A-A-A",rank:4},{id:9,parentId:0,name:"一级菜单C",rank:1},{id:10,parentId:0,name:"一级菜单end",rank:1},],};},computed:{/*转树形数据*/optionData(){letcloneData=JSON.parse(JSON.stringify(this.list));//对源数据深度克隆returncloneData.filter((father)=>{//循环所有项，并添加children属性letbranchArr=cloneData.filter((child)=>father.id==child.parentId);//返回每一项的子级数组branchArr.length>0?(father.children=branchArr):"";//给父级添加一个children属性，并赋值returnfather.parentId==0;//返回第一层});},},mounted(){},methods:{//取值getValue(value){this.valueId=value;console.log(this.valueId);},},};</script><stylelang="less"></style>

项目小结letarrA=[{name:"张三",age:"18",id:"1",sex:"男",},{name:"张三11",age:"19",id:"2",sex:"男",},{name:"张三22",age:"20",id:"3",sex:"男",},];letarrB=[{name:"李四》》》》",age:"19",id:"2",sex:"女",},{name:"666",age:"19",id:"4",sex:"男",},{name:"777",age:"19",id:"5",sex:"男",},];constmergeData=arrA.concat(arrB);constresult=mergeData.reduce((cur,next)=>{constrepeat=cur.some((item)=>{returnitem.id===next.id;});if(!repeat){returncur.concat([next]);}else{returncur;}},[]);console.log(result,"合并去重之后返回新数组"

前段时间开发实例化标准，遇到深层树形结构数组且每层子数组或者子对象的字段名都不同的场景下，进行数组扁平化问题，这周基于该场景整理封装一个扁平化函数flattenArr1.定义一个数组存储扁平化的结果2.遍历节点并将其添加到result结果数组中4.遍历传入的keys数组，如果当前节点的key对应的值是一个数组5.遍历该数组中的子节点，如果子节点是一个对象，递归调用cycleFn函数，继续遍历子节点6.返回扁平化后的结果数组flattenArr(arr,keys){constresult=[];functioncycleFn(node){result.push(node);for(constkeyofkeys){if(Array.isArray(node[key])){node[key].forEach((child)=>{if(typeofchild==="object"&&child!==null){cycleFn(child);}});}elseif(typeofnode[key]==="object"&&node[key]!==null){cycleFn(node[key]);}}}arr.forEach((node)=>{cycleFn(node);});returnresult;},该函数接收两个参数，第一个参数是需要扁平化的数组Array，第二个参数是子数组或者对象的key；数据转换示例如下：b.数据转换示例----原始数组该数组下每个数组或者对象的key字段名都不相同letdata=[{id:"1",name:"A",children:[{id:"2",name:"B",child:[{id:"3",name:"C",arr:[{id:"4",name:"D",lastLayer:[{id:"5",name:"E",},],},],},],},],},];c.数据转换结果----扁平化后数组[{id:"1",name:"A",children:Array(1)},{id:"2",name:"B",child:{...}},{id:"3",name:"C",arr:Array(1)},{id:"4",name:"D",lastLayer:Array(1)},{id:"5",name:"E"},];d.调用示例constkeys=["children","child","arr","lastLayer"];constflattened=this.flattenArr(data,keys);console.log(flattened)

1.页面布局思路:用最外层div的clientHeight减去除了table的其他几个部分的clientHeight2.对应代码<template><divclass="pointConfig"><divclass="right-container"ref="rightContainer"><divclass="header-container"ref="rightHeader"></div><divclass="condition-container"ref="rightCondition"></div><divclass="table-container"><el-table:max-height="table_maxHeight":data="table_data"><el-table-columnfixedprop="measureName"label="测点名称"width="150"show-overflow-tooltip></el-table><BasePagination:pageObj="pageObj"@query="getPointList"ref="rightPagination"></BasePagination></div></div></div></template><script>importBasePaginationfrom'@/view/point/component/BasePagination.vue'importservicefrom'@/api/point/index'exportdefault{name:'pointManage',components:{BasePagination},data(){return{table_maxHeight:0,}},created(){this.getPointList()},mounted(){this.$nextTick(()=>{this.resetTableMaxHeight()})window.addEventListener('resize',this.resetTableMaxHeight)},methods:{//获取标准名称列表asyncgetPointList(){constdata={}awaitservice.getPointList(data).then((res)=>{}).finally(()=>{this.resetTableMaxHeight()})},resetTableMaxHeight(){constrightContainerHeight=this.$refs.rightContainer.clientHeightconstrightHeader=this.$refs.rightHeader.clientHeightconstrightCondition=this.$refs.rightCondition.clientHeightconstrightPagination=this.$refs.rightPagination.$refs.page.clientHeightthis.table_maxHeight=rightContainerHeight-rightHeader-rightCondition-rightPagination-70},},}</script><stylelang="less"scoped>@import'../../assets/css/point.less';.pointConfig{height:100%;background:#eef0f3;box-sizing:border-box;.right-container{flex:1;z-index:0;height:100%;background:#ffffff;box-shadow:0px0px20px0pxrgba(0,0,0,0.05);border-radius:0px4px4px0px;padding:020px20px;.header-container{display:flex;justify-content:space-between;align-items:center;padding:16px0;border-bottom:1pxsolid#dadada;font-size:16px;font-family:PingFangSC-Medium,PingFangSC;font-weight:550;color:#191919;}.condition-container{margin-top:20px;.el-select,.el-input{margin-right:12px;margin-bottom:10px;}}.table-container{margin-top:10px;.opt-btn{padding:9px0;}}}}</style>

import{Component,Vue,Prop,Watch}from'vue-property-decorator'@Component({components:{StandardForm,}})exportdefaultclassInspectionProjectextendsVue{//在这里写变量和方法等//变量和方法这些可以直接写，不用写在methods或者data里面}定义类型数组：formArray:Array<any>=[]对象：projectFormData:Record<string,any>={}字符串：flowRangeValue:string='自'prop接收数组接受对象@Prop({type:Object,default:()=>({})})projectData!:Record<string,any>Watch监听@Watch('projectFormData.flowRangeValue')flowRangeValueChange(newVal,oldVal){//运维企业更改时，巡检/保养内容初始化console.log(newVal,'================')}

流程：1.调用后端接口>>>>2.接口返回文件流>>>>>>3.下载文件1.数据格式化导出接口后端返回是文件流，所以接口需要加responseType:'blob'参数，另外使用transformResponse对文件流数据格式化exportUnitLog:{url:'/unitlog/export',responseType:"blob",transformResponse(res){constreturnRes=res//解析错误if(returnRes.type==='application/json'){return{success:true,data:returnRes,}}return{success:true,code:0,data:res,message:'',}},},2.调用接口asyncexportLog(){constdata={//参数}awaitservice.exportUnitLog(data).then((res)=>{this.downloadCallback(res,'测点匹配失败日志.xlsx');//调用下载函数})},3.下载//生成下载文件downloadCallback(res,fileName){constcontent=resconstblob=newBlob([content])if('download'indocument.createElement('a')){//非IE下载constelink=document.createElement('a')elink.download=fileNameelink.style.display='none'elink.href=URL.createObjectURL(blob)document.body.appendChild(elink)elink.click()URL.revokeObjectURL(elink.href)//释放URL对象document.body.removeChild(elink)}else{//IE10+下载navigator.msSaveBlob(blob,fileName)}},

el-input<el-inputplaceholder="搜索"prefix-icon="el-icon-search"v-model="leftSearchKey"size="small"class="enn-mb"></el-input>data(){return{leftSearchKey:'',//input通过v-model双向绑定的字段postNavList:[],//从后端接口获取的数组}},computed:{//searchWorkName为过滤之后的数组或者其他数据//渲染的时候给searchWorkName就行searchWorkName(){constsearch=this.leftSearchKeyif(search){returnthis.postNavList.filter((data)=>{returndata.postName.indexOf(search)!==-1})}returnthis.postNavList},},