mediaQuery//存储媒体对象，对象中包含matches字段，为布尔值，匹配到为true，未匹配到为falsedata(){return{mediaQuery:null};},mounted(){this.mediaQuery=window.matchMedia("(min-width:1824px)")this.checkMatchMedia()this.mediaQuery.addListener(this.checkMatchMedia)},methods:{checkMatchMedia(){if(this.mediaQuery.matches){console.log("匹配成功min-width：1824");}else{console.log("没有匹配成功");}}},beforeDestroy(){if(this.mediaQuery){this.mediaQuery.removeListener(this.checkMatchMedia)}},

<template><divclass="breadcrumb"><spanv-for="(item,index)indisplayedItems":key="index"><spanclass="breadcrumb-item":class="{'last-item':index===displayedItems.length-1}"@click="handleClick(index)">{{item.name}}</span><spanclass="separator"v-if="index<displayedItems.length-1">/</span></span></div></template><script>exportdefault{name:"Breadcrumb",data(){return{items:[{name:"首页1",link:"#"},{name:"仓库信息2",link:"#/warehouse"},{name:"设备信息3",link:"#/equipment"},{name:"首页4",link:"#"},{name:"仓库信息5",link:"#/warehouse"},{name:"设备信息6",link:"#/equipment"},{name:"首页7",link:"#"},{name:"仓库信息8",link:"#/warehouse"},{name:"设备信息9",link:"#/equipment"},{name:"首页10",link:"#"},{name:"仓库信息11",link:"#/warehouse"},{name:"设备信息12",link:"#/equipment"},{name:"首页13",link:"#"},{name:"仓库信息14",link:"#/warehouse"},{name:"设备信息15",link:"#/equipment"},{name:"首页16",link:"#"}],maxDisplayedItems:10,};},computed:{displayedItems(){if(this.items.length<=this.maxDisplayedItems){returnthis.items;}else{conststart=this.items.length-this.maxDisplayedItems+3;//+2是因为要保留首页和省略号return[this.items[0],this.items[1],{name:"...",link:""},...this.items.slice(start),];}},},methods:{//handleClick(index){//this.items.splice(index+1,this.items.length-index-1);//},handleClick(index){if(this.items.length>this.maxDisplayedItems&&index===2){//点击的是省略号，不执行任何操作return;}if(this.items.length>this.maxDisplayedItems&&index>2){//如果点击的是省略号后面的项，需要根据省略的数量调整索引constomittedItemsCount=this.items.length-this.maxDisplayedItemsindex=index+omittedItemsCount}this.items.splice(index+1,this.items.length-index-1);},},};</script><stylescoped>.breadcrumb{display:flex;align-items:center;font-size:16px;}.breadcrumb-item{text-decoration:none;color:#333;/*默认颜色*/cursor:pointer;}.breadcrumb-item:hover{color:#007bff;/*鼠标悬停时的颜色*/}.breadcrumb-item.last-item{color:#007bff;/*最后一个item的颜色*/font-weight:bold;/*加粗字体*/}.separator{margin:05px;/*左右间距*/}</style>

修改内部样式需要穿透.ivu-poptip-popper{transform:translateX(10px)!important;}

<divv-clickoutside="clickEventspace">点击我不会触发事件，点击我的外部触发事件</div>exportdefault{//实现点击div元素外出发事件directives:{clickoutside:{bind:function(el,binding,vnode){functiondocumentHandler(e){if(el.contains(e.target)){returnfalse;}if(binding.expression){binding.value(e);}}el.__vueClickOutside__=documentHandler;document.addEventListener("click",documentHandler);},unbind:function(el,binding){document.removeEventListener("click",el.__vueClickOutside__);deleteel.__vueClickOutside__;},},},methods:{clickEventspace(){console.log("点击了div元素外");},},}

1.ivew多选框修改为单选使用<template><Checkbox-groupv-model="checkArr"@on-change="onChange"><Checkbox:label="item.value"v-for="(item,index)infruitList":key="index,"><span>{{item.label}}</span></Checkbox></Checkbox-group></template><script>exportdefault{data(){return{fruitList:[{label:'香蕉',value:'香蕉'},{label:'苹果',value:'苹果'},{label:'西瓜',value:'西瓜'},],checkArr:[]}}methods:{onChange(checkedValues){if(checkedValues.length>1){this.checkArr=[checkedValues[checkedValues.length-1]];}},},}</script>2.iview获取最新勾选值<Checkboxv-model="checkedValues"@change="handleCheckboxChange">Checkbox1</Checkbox>methods:{handleCheckboxChange(checked){constlastCheckedValue=checked[checked.length-1];console.log('当前勾选的值：',lastCheckedValue);}}

1.前端部分使用npmrunbuild命令打包前端项目，之后在宝塔面板新建一个站点，在该站点根目录下（例如/www/wwwroot/echartsscreen）上传打包好的dist中的压缩文件，前端项目中的baseURL为服务器ip地址+后端listen的端口号（例如3001），例如BASE_URL="http://47.100.207.51:3001/api";2.后端部分（基于node）新建一个node项目，如下图，项目目录为后端项目目录，这里建议把依赖包一起传上来，不然还需要再装依赖包容易报错，，在启动选项里面可以自定义指令，例如app.js，注意：后端的设置的端口号需要和前端保持一致

registService.js//引入axios库importaxiosfrom"axios";importapiListfrom"./apiList";//设置请求的baseurlconstBASE_URL="http://127.0.0.1:3001/api";//设置请求头constheaders={};//定义API接口//constapis={//getData:{//url:"/seller",//method:"get",//},//};//---------------------------------------分界线--------------------------------------------------------switch(process.env.NODE_ENV){//可以在根目录的package.json配置NODE_ENVcase"production":axios.defaults.baseURL="生产环境地址";break;case"test":axios.defaults.baseURL="测试环境地址";default:axios.defaults.baseURL="开发环境地址";}/*设置请求传输数据的格式只支持POST请求，根据实际要求决定设置不设置*/axios.defaults.headers["Content-Type"]="application/x-www-form-urlencoded";//---------------------------------------分界线--------------------------------------------------------//创建axios实例constaxiosInstance=axios.create({baseURL:BASE_URL,headers:headers,});/**设置请求超时时间和跨域是否允许携带凭证*/axios.defaults.timeout=10000;axios.defaults.withCredentials=true;//定义请求拦截器axiosInstance.interceptors.request.use((config)=>{//请求发送前对请求配置进行处理，例如加入token等操作//在这里可以做一些全局的请求拦截处理//获取本地存储中的token//lettoken=localStorage.getItem("token");//token&&(config.headers.Authorization=token);returnconfig;},(error)=>{//对请求错误进行处理returnPromise.reject(error);});//定义响应拦截器axiosInstance.interceptors.response.use((response)=>{//对响应数据进行处理，例如统一处理错误码等操作//在这里可以做一些全局的响应拦截处理returnresponse;},(error)=>{//对响应错误进行处理returnPromise.reject(error);});//定义API方法constregistService=(apis,axiosInstance)=>{constservice={};for(letapiNameinapis){const{url,method}=apis[apiName];service[apiName]=async(params)=>{try{constresponse=awaitaxiosInstance({url,method,data:params,});returnresponse.data;}catch(error){console.error(error);throwerror;}};}returnservice;};//导出API实例exportdefaultregistService(apiList,axiosInstance);判断当前环境时，需要配置环境，npmrunserve默认时dev开发环境，npmrunbuild为生产环境package.json"scripts":{"serve":"vue-cli-serviceserve","build":"vue-cli-servicebuild","serve:test":"setNODE_ENV=test&&vue-cli-serviceserve","serve:production":"setNODE_ENV=production&&vue-cli-serviceserve"},apiList.jsconstapiList={getData:{url:"/seller",method:"get",},getTrendData:{url:"/trend",method:"get",},getMapData:{url:"/map",method:"get",},getRankData:{url:"/rank",method:"get",},getHotData:{url:"/hotproduct",method:"get",},getStockData:{url:"/stock",method:"get",},};exportdefaultapiList;xx.vue使用<script>importapifrom"../api/registService.js";exportdefault{methods:{asyncgetData(){//constparams={//这里放需要的参数//};//调用api.js中的getData方法获取数据constret=awaitapi.getData(params);}},}}</script>

主要是根据容器当前宽度，动态取值，通过该值设置echrts图表相关尺寸宽度<divclass="com-container"><divclass="com-chart"ref="seller_ref"></div></div>当浏览器窗口发生变化以及Vue的mounted生命周期函数中调用//当浏览器的大小发生变化的时候,会调用的方法,来完成屏幕的适配screenAdapter(){//offsetWidth获取窗口宽度计算文字大小consttitleFontSize=(this.$refs.seller_ref.offsetWidth/100)*3.6;//自适应分辨率配置项constadapterOption={title:{textStyle:{fontSize:titleFontSize,//标题字体大小},},//背景悬浮框tooltip:{axisPointer:{lineStyle:{width:titleFontSize,},},},series:[{barWidth:titleFontSize,//控制柱状条粗细（宽）itemStyle:{barBorderRadius:[0,titleFontSize/2,titleFontSize/2,0],//左上，右上，右下，左下，上右下左控制柱状条的圆角},},],};this.chartInstance.setOption(adapterOption);this.chartInstance.resize();},

该部分主要实现了两个功能：1.搜索获取位置信息，并在地图上标记；2.鼠标直接点击地图获取位置信息，并在地图标记；在这部分使用动态加载方式加载高德地图，防止阻塞其他进程（loadMap.js）1.远程搜索功能:remote-method远程搜索，remoteMethod函数<!--地图容器--><divclass="amap"ref="amap"></div><!--el-select搜索框--><el-selectv-model="searchValue"class="search-ipt"size="mini"filterableremotereserve-keywordplaceholder="请输入关键词":remote-method="remoteMethod":loading="loading"><el-optionv-for="iteminoptions":key="item.id":label="item.name":value="item.id"></el-option></el-select>1.1地图初始化//地图初始化initMap(){letthat=this;//loadMap()函数需要从单独的异步加载js文件引入loadMap().then((AMap)=>{that.theMap=newAMap.Map(this.$refs.amap,{center:newAMap.LngLat(116.297,39.948),//设置中心点zoom:10,//地图放大倍数resizeEnable:true,});that.geoCoder=newAMap.Geocoder();that.handlerMapClick();//点击地图时使用});},1.1.1相关变量data(){return{theMap:null,options:[],searchValue:"",chooseList:[],loading:false,markers:[],marker:[],markersPosition:[],geoCoder:null,clickInfo:[],};},loadmap.js--动态加载高德地图/***动态加载高德地图**@export*@param{*}key高德地图key*@param{*}plugins高德地图插件*@param{string}[v='1.4.14']高德地图版本*@returns*/exportdefaultfunctionloadMap(){constscript=document.createElement('script')script.type='text/javascript'script.appendChild(document.createTextNode(`window._AMapSecurityConfig={securityJsCode:'这里需要放高德地图密钥',}`))document.body.appendChild(script)returnnewPromise(function(resolve,reject){//如果有map引入，需要删除，因为这里需要引入另外的key来做地图主题定制，需要删除if(typeofwindow.AMap!=='undefined'){constarr=document.getElementsByTagName('script')for(leti=0;i<arr.length;i++){if(arr[i].src.indexOf('https://webapi.amap.com/maps')!==-1){arr[i].remove()}}//eslint-disable-next-lineno-undef//resolve(window.AMap)//returntrue}window.onCallback=function(){//eslint-disable-next-lineno-undefresolve(window.AMap)}constkey='这里放入key值'constplugins=['AMap.OverView','AMap.MouseTool','AMap.PolyEditor','AMap.RectangleEditor','AMap.PlaceSearch','AMap.DistrictLayer','AMap.CustomLayer','AMap.DistrictSearch','AMap.Geocoder','AMap.AutoComplete']constv='2.0'constscript=document.createElement('script')script.type='text/javascript'script.src=`https://webapi.amap.com/maps?v=${v}&key=${key}&plugin=${plugins.join(',')}&callback=onCallback`script.onerror=rejectdocument.head.appendChild(script)})}1.2remoteMethod远程检索数据//下拉选项获取----搜索成功返回对应的地点数据remoteMethod(query){const_this=this;console.log("query",query);if(query!==""){_this.loading=true;//高德地图获取检索数据window.AMap.plugin("AMap.AutoComplete",function(){constautoComplete=newwindow.AMap.Autocomplete({city:"全国",});//console.log(query,'this.searchValue')autoComplete.search(query,function(status,result){//搜索成功时，result即是对应的匹配数据if(status==="complete"&&result.tips){console.log(result);_this.options=result.tips;}else{_this.options=[];}_this.loading=false;});});}else{_this.loading=false;this.options=[];}},1.3点击el-select数据，添加到列表chooseListwatch:{searchValue(val){if(val){this.chooseList=[...this.chooseList,...this.options.filter((i)=>i.id===val),];this.options=[];this.drawMakers();this.searchValue="";console.log("打印chooseList数组",this.chooseList);}},},1.4渲染定位点drawMakers函数//定位logo渲染点drawMakers(){const_this=this;_this.theMap.clearMap();//清除地图覆盖物constmarkers=this.chooseList.map((item,idx)=>{console.log(item,idx,"item.....");if(item.location){console.log(item.location,"item.location");return{icon:`//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-${idx+1}.png`,position:[item.location.lng,item.location.lat],};}});//添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照for(letindex=0;index<markers.length;index++){if(markers[index]){newwindow.AMap.Marker({map:_this.theMap,icon:markers[index].icon,position:[markers[index].position[0],markers[index].position[1]],offset:newwindow.AMap.Pixel(-13,-30),});_this.theMap.setFitView();}}},1.5点击地图添加位置信息//点击地图--放在地图初始化initMap()函数中handlerMapClick(){this.theMap.on("click",(e)=>{//点击坐标this.markersPosition=[e.lnglat.lng,e.lnglat.lat]//设置新的标记this.setMapMarker();//根据坐标获取位置信息this.geoCoder.getAddress(this.markersPosition,(status,result)=>{console.log("点击位置信息status：",status);if(status==="complete"&&result.regeocode){console.log(result,"定位定位");constname=result.regeocode.formattedAddress;constaddresss=`${result.regeocode.addressComponent.street}${result.regeocode.addressComponent.streetNumber}`;constmapObj={};constlocation={};location.lng=e.lnglat.lng;location.lat=e.lnglat.lat;mapObj.name=name;mapObj.address=addresss;mapObj.location=location;this.chooseList.push(mapObj);}});});},//设置点击位置的标记setMapMarker(){letmarker=newAMap.Marker({map:this.theMap,position:this.markersPosition,});//将markers添加到地图this.markers.push(marker);},