1 el-option需要 key字段，否则无法编译，需要value，否则报错，Missing required prop: "value"
<el-select v-model="type" size="medium">
<el-option value="Daily">Daily</el-option>
<el-option value="Single rides">Single rides</el-option>
</el-select>
2
$in使用 集合的方法
BasicDBList values = new BasicDBList();
for (int i=0;i<sgjb.length;i++){
values.add(sgjb[i]);
}
BasicDBObject in = new BasicDBObject("$in", values);
BasicDBObject condition = new BasicDBObject();
BasicDBList dvs = new BasicDBList();
dvs.addAll(liftSensors);
BasicDBObject dvsObj = new BasicDBObject("$in", dvs);
condition.put("deviceId", dvsObj);
condition.put("interpolationTimestamp",new BasicDBObject("$lte",enddate).append("$gte",startdate));
condition.put("floor",statistic.getFloor());
condition.put("loadClass",new BasicDBObject("$in",getLoads(statistic.getLoadclasses())));//也可以是int[]数组
BasicDBObject resultFields=new BasicDBObject();
resultFields.put("xxxx",1);
Query query=new BasicQuery(condition.toJson(),resultFields.toJson());
List<JSONObject> jsons = mongoTemplate.find(query,JSONObject.class,dbName);
3 npm 导入echarts的方法 import echarts from "echarts"
4 scss
<style rel="stylesheet/scss" lang="scss" scoped>
scss 可以style 进行嵌套使用
5 openlayer功能
this.getMapLayer(this.mapname); //initdata //初始化鼠标位置（经纬度）控件 let _this = this; var mousePositionControl = new MousePosition({ //样式类名称 className: \'custom-mosue-position\', //投影坐标格式，显示小数点后边多少位 coordinateFormat: createStringXY(8), //指定投影 projection: \'EPSG:4326\', //注释下面两行以获得鼠标的位置 //放在地图上。 // 格式化鼠标坐标位置数据 coordinateFormat: function(coord){ coord[0] = _this.switchMapLatLng(coord[0]); return _this.mousepositionformat(coord) }, //目标容器 target: document.getElementById(\'mouse-position\') //undefinedHTML: \' \' }); //设置Map显示参数 this.view = new View({ center: transform([2.35090256, 48.85705948],\'EPSG:4326\', \'EPSG:3857\' ), zoom: 9, maxZoom: 18 }); // 创建地图 this.map = new Map({ controls: defaultControls().extend([mousePositionControl]), layers: [ this.maplayer ], view: this.view, target: \'map\' }); jQuery(\'#m_aside_left_minimize_toggle\').click(e=>{ if(this.map){ this.map.updateSize(); } }) 包含了 根据名字获取地图底层功能 重写左上角的经纬度功能 点击按钮 地图大小更新重置功能
6 openlayer marker渲染和 单击事件渲染，上面有对象则手状鼠标显示
for (var i = 0; i < this.locations.length; i++) {
var beach = this.locations[i];
let t = beach.fillLevelType;
var coordinates = transform([beach.lat, beach.lng],\'EPSG:4326\', \'EPSG:3857\' );
var iconFeature = new Feature({
geometry: new Point(coordinates),
name: \'Null Island\',
population: 4000,
rainfall: 500
});
iconFeature.setStyle([new Style({
image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
anchor: [0.5, 0.5],
anchorXUnits: \'fraction\',
anchorYUnits: \'pixels\',
src: \'../../../../../static/img/map/lift.png\'
}))
})]);
iconFeature.set("type","loc");
features[i] = iconFeature;
// 给图标添加新属性
features[i].id = beach.locationid,
features[i].locationid = beach.locationid,
features[i].lifts = beach.lifts,
features[i].address = beach.address,
features[i].description = beach.description,
features[i].lat = beach.lat;
features[i].lng = beach.lng;
}
this.features = features;
var vectorSource = new VectorSource({
features: features
});
// 获取VectorSource 装载marker
this.markVectorSource = vectorSource;
var _this = this;
//聚合
var clusterSource = new Cluster({
distance: 20,
source: vectorSource
});
var styleCache = {};
this.loclayer = new VectorLayer({
source: clusterSource,
isBaseLayer:false,
style: function(feature) {
var size = feature.get(\'features\').length;
var style = styleCache[size];
if(size > 1){
if (!style) {
let cc = [\'#59ec18\',\'#26272b\'];
style = new Style({
image: new CircleStyle({
radius: 16,
stroke: new Stroke({
color: cc[0]
}),
fill: new Fill({
color: cc[0]
})
}),
text: new Text({
text: size+\'\',
fill: new Fill({
color: cc[1]
})
})
});
styleCache[size] = style;
}
}else if(size==1){
style = feature.get(\'features\')[0].getStyle()
}else{
style = iconStyle;
}
return style;
}
});
this.map.addLayer(this.loclayer);
var coos=features.map(f=>{
return f.getGeometry().getCoordinates();
});
this.view.fit(boundingExtent(coos), this.map.getSize());
//关于地图事件的方法
handleMapEvent(){
var _this = this;
//鼠标移动事件
this.map.on(\'pointermove\',function(e) {
var pixel=_this.map.getEventPixel(e.originalEvent);
var feature=_this.map.forEachFeatureAtPixel(pixel,function (feature) {
return feature;
})
if(feature==undefined){
_this.map.getTargetElement().style.cursor="default"
}else{
_this.map.getTargetElement().style.cursor="pointer"
}
})
//鼠标点击事件
this.map.on(\'click\',e=>{
//在点击时获取像素区域
var pixel = _this.map.getEventPixel(e.originalEvent);
// 获取点击的图标feature
var feature=_this.map.forEachFeatureAtPixel(pixel,function (feature) {
return feature;
})
if(feature==undefined){
return;
}else{
this.curLocation = feature.values_.features[0];
this.renderBins();
}
});
},
上面样式用到数组因为可以写多个 图片等等的样式
8
<img src="static/img/rightaside.png"></div> 使用路径可以不用。。。。这些路径
使用样式时，用 大括号，同时可以覆盖已经存在的
style="margin-right:15px;" :style="{ \'margin-right\':aaa }"
利用好绝对布局，里面用相对布局
9 经纬度渲染方法
调用子组建的 方法
this.$refs.openlayer.switchMapLayer
切换三个地图图层的方法 三个图层获取的方法
getMapLayer(val){
switch (val) {
case "OpenStreetMap":
// openStreetMap地图层
this.maplayer.setSource(new XYZ({
url: \'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png\',
}));
break;
case "BingMap":
// Bing地图层
this.maplayer.setSource(new BingMaps({
key: \'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ\',
imagerySet: \'Road\',
}));
break;
default:
// google地图层
this.maplayer.setSource(new XYZ({
url:\'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2sen-US!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0\',
}));
break;
}
},
5 距离顶部位置
this.topDistance = window.innerHeight/2-20+\'px\';
top 只有在绝对布局才有意义
11 地图保存user的方法
this.userid = this.$store.state.user.userid;
@Slf4j
@Api("Lift metering")
@RestController
@RequestMapping("/liftmetering")
public class LiftmeteringController {
@Autowired
LiftmeteringService liftmeteringService;
@ApiOperation(value = "查询电梯的single ride", httpMethod = "POST", produces = "application/json")
@ApiResponse(code = 200, message = "success", response = ResponseBase.class)
@PostMapping(value = "/getSingleRide",produces = "application/json")
public ResponseBase getSingleRide(@RequestBody String params){
return liftmeteringService.getSingleRide(params);
}
6 定义设置路由
／／ 1、定义路由组件 const Foo={template:\'<div>Hello Foo</div>\'} const Bar={template:\'<div>Hello Bar</div>\'} ／／ 2、定义路由 const routes=[ {path:\'/foo\',component:Foo}, {path:\'/bar\',component:Bar} ] ／／ 3、创建router实例，然后传routers配置 const router=new VueRouter({ routes //(缩写)相当于 routes:routes }) ／／ 4、创建和挂载根实例。记得要通过router配置参数注入路由 const app=new Vue({ router }).$mount(\'#app\') 定义 组件 定义 路由 定义 建立路由对象 建立vue，通过$mount挂载 通过 const建立常量