Skip to content

M
mes-ui
Commit 85e3a971 authored by 仇晓婷's avatar 仇晓婷
Browse files
Options

shouye

parent bff946e9
Show whitespace changes
Inline Side-by-side
Showing with 620 additions and 0 deletions
pages/demo/lid/3.vue 0 → 100644
View file @ 85e3a971
<template>
<div class="bm-lid">
<div class="ad">
<FormRow></FormRow>
<!-- <div class="count">
<label>配属数量（列）</label>
<span>629</span>
</div>
<div class="count">
<label>停车股道</label>
<span>250</span>
</div>
<div class="count">
<label>停产库位</label>
<span>560</span>
</div>
<div class="count">
<label>维修股道</label>
<span>38</span>
</div>
<div class="count">
<label>维修库位</label>
<span>76</span>
</div>-->
</div>
<div class="menu">
<Menu></Menu>
</div>
<div class="legend"></div>
<div class="lab">
<p>图例</p>
<div class="item">
<div class="block" v-width="60"></div>
<div class="info fg">为京泸京广服务的动车所</div>
</div>
<div class="item">
<div class="block dot" v-width="60"></div>
<div class="info fg">目前不为京泸京广服务的动车所</div>
</div>
<div class="item">
<div class="block line" v-width="60"></div>
<div class="info fg">规划中或在建动车所</div>
</div>
</div>
<baidu-map
class="map"
ak="NMVkIGzyFBL6g3ekXIZqIYMCnvz74YOc"
:center="center"
:zoom="zoom"
:maxZoom="7"
@ready="handler"
:mapStyle="my"
@click="hi"
>
<!--比例尺控件-->
<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
<!--缩放控件-->
<bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
<!--聚合动态添加的点坐标-->
<bm-marker-clusterer :averageCenter="true">
<bm-marker
v-for="marker of markers"
:key="marker.code"
:position="{lng: marker.lng, lat: marker.lat}"
@click="lookDetail(marker)"
color="green"
></bm-marker>
</bm-marker-clusterer>
<bm-marker :position="marker" :dragging="true" @click="lookDetail(marker)"></bm-marker>
<bm-map-type
:map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
anchor="BMAP_ANCHOR_TOP_LEFT"
></bm-map-type>
<bm-info-window
:position="{lng: infoWindow.info.lng, lat: infoWindow.info.lat}"
:title="infoWindow.info.name"
:show="infoWindow.show"
@close="infoWindowClose"
@open="infoWindowOpen"
>
<div class="pop">
<h3>
{{infoWindow.info.name}}车管所
<a @click="infoWindowClose" class="fr mr5">
<Icon type="md-close" size="24" />
</a>
</h3>
<div class="content">
<ul>
<li v-for="li in infoWindow.info.list" :key="li.car">
{{li.car}}:
<span>{{li.count}}列</span>
</li>
</ul>
</div>
</div>
</bm-info-window>
</baidu-map>
</div>
</template>
<script>
import FormRow from "./formRow";
import Menu from "./menu";
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
// import BMapLib from 'BMapLib';
import BmScale from "vue-baidu-map/components/controls/Scale";
import BmNavigation from "vue-baidu-map/components/controls/Navigation";
import BmMarkerClusterer from "vue-baidu-map/components/extra/MarkerClusterer";
import BmMarker from "vue-baidu-map/components/overlays/Marker";
import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow";
import citys from "../city";
export default {
components: {
BaiduMap,
BmScale,
BmNavigation,
BmMarkerClusterer,
BmMarker,
BmInfoWindow,
Menu,
FormRow
},
data() {
return {
center: { lng: 0, lat: 0 },
marker: {
name: "北京",
lng: 116.28,
lat: 39.54,
list: [
{ car: "CRH380A", count: 29 },
{ car: "CRH381A", count: 9 },
{ car: "CRH382A", count: 13 },
{ car: "CRH384A", count: 19 },
{ car: "CRH388A", count: 24 },
],
},
zoom: 1,
eye: false,
map: null,
infoBox: null,
my: {
styleJson: [
{
featureType: "land",
elementType: "geometry",
stylers: {
color: "#033361ff",
},
},
{
featureType: "tertiaryway",
elementType: "geometry",
stylers: {
visibility: "off",
},
},
{
featureType: "arterial",
elementType: "geometry",
stylers: {
visibility: "off",
},
},
{
featureType: "cityhighway",
elementType: "geometry",
stylers: {
visibility: "off",
},
},
{
featureType: "water",
elementType: "geometry",
stylers: {
color: "#4a90e2ff",
},
},
{
featureType: "districtlabel",
elementType: "labels",
stylers: {
visibility: "on",
},
},
{
featureType: "districtlabel",
elementType: "labels.icon",
stylers: {
visibility: "on",
},
},
{
featureType: "districtlabel",
elementType: "labels.text.stroke",
stylers: {
weight: 0,
color: "#ffffff00",
},
},
{
featureType: "districtlabel",
elementType: "labels.text.fill",
stylers: {
color: "#4a90e2ff",
weight: 10,
},
},
{
featureType: "road",
elementType: "geometry",
stylers: {
visibility: "off",
},
},
],
},
map: null,
markers: [],
infoWindow: {
lng: 0,
lat: 0,
show: false,
info: {
name: "北京",
lng: 116.28,
lat: 39.54,
list: [
{ car: "CRH380A", count: 29 },
{ car: "CRH381A", count: 9 },
{ car: "CRH382A", count: 13 },
{ car: "CRH384A", count: 19 },
{ car: "CRH388A", count: 24 },
],
},
},
};
},
methods: {
handler({ BMap, map }) {
console.log(BMap, map);
this.center = "兰州";
this.zoom = 6;
map.disableDoubleClickZoom();
this.map = map;
window.map = map;
},
show() {
this.eye = !this.eye;
let ps = [];
if (this.eye) {
ps = citys;
}
this.markers = ps;
},
infoWindowOpen(e) {
this.infoWindow.show = true;
},
infoWindowClose(e) {
this.infoWindow.show = false;
},
hi(e) {
// alert(1)
console.warn("EEE", e);
},
lookDetail(data, target) {
// console.log('data',data)
this.infoWindow.show = true;
this.infoWindow.info = data;
},
},
};
</script>
<style lang="less">
@bgcolor: rgba(0, 38, 77, 0.8);
.bm-lid {
position: fixed;
width: 100%;
top: 100px;
left: 0;
right: 0;
height: calc(100vh - 100px);
.ad {
position: absolute;
width: 98%;
left: 20px;
top: 40px;
border-radius: 5px;
text-align: center;
z-index: 3;
height: 100px;
line-height: 100px;
background: white;
.form-row {
margin: 30px 160px;
}
// color: white;
// .count {
// background: url("../../../assets/images/demo/bg.png");
// width: 205px;
// height: 55px;
// display: inline-flex;
// margin: 0 40px;
// line-height: 55px;
// label {
// display: inline-block;
// width: 120px;
// font-size: 16px;
// font-weight: bold;
// text-align: right;
// }
// span {
// display: inline-block;
// width: 85px;
// font-size: 32px;
// font-weight: bold;
// }
// }
}
.menu {
position: absolute;
width: 240px;
height: 700px;
background: white;
border-radius: 5px;
bottom: 15px;
left: 20px;
z-index: 4;
}
.legend {
position: absolute;
width: 200px;
height: 240px;
background: url("../../../assets/images/demo/legend.png") no-repeat center
rgba(0, 38, 77, 0.8);
bottom: 20px;
left: 10px;
z-index: 2;
border: 1px solid rgba(0, 38, 77, 1);
}
.eye {
position: absolute;
width: 50px;
height: 50px;
line-height: 50px;
padding-top: 5px;
text-align: center;
right: 20px;
top: 20px;
background: #00264d;
border-radius: 8px;
z-index: 10;
a {
color: #ddd;
}
a:hover {
color: white;
}
}
.lab {
position: absolute;
z-index: 5;
width: 260px;
bottom: 20px;
background: @bgcolor;
border: 1px solid black;
right: 100px;
color: white;
padding: 10px 10px 0 10px;
> p {
font-size: 14px;
font-weight: bold;
line-height: 40px;
}
.item {
.block {
height: 40px;
width: 60px;
border: 1px solid #ddd;
float: left;
margin-right: 10px;
}
.dot {
border: 1px dotted #ddd;
}
.line {
border: 1px dashed #ddd;
}
.info {
padding-left: 20px;
flex-grow: 1;
}
height: 60px;
}
}
.map {
width: 100%;
height: 100%;
.BMap_cpyCtrl,
.anchorBL {
display: none;
}
.infoBoxContent {
background: red;
}
.BMap_pop {
.BMap_center {
// background: @bgcolor;
border-width: 0;
background: transparent;
}
.BMap_bottom {
// background: @bgcolor;
display: none;
}
.BMap_top {
display: none;
}
.BMap_bubble_title {
display: none;
}
img {
display: none;
}
div:nth-child(8),
div:nth-child(5) {
display: none;
}
> div:nth-child(1) {
display: none;
div {
display: none;
}
}
> div:nth-child(2) {
display: none;
}
> div:nth-child(3) {
display: none;
}
div:nth-child(7) {
display: none;
}
.pop {
color: white;
// padding: 0 0 20px 0;
// border: 1px solid #000;
border-radius: 8px;
background: #1e4b78;
h3 {
line-height: 50px;
background: #266099;
border-radius: 8px 8px 0 0;
padding-left: 20px;
a {
color: black;
}
a:hover {
color: white;
}
}
.content {
padding: 5px 15px;
li {
line-height: 30px;
font-size: 12px;
span {
float: right;
}
}
}
}
}
}
}
</style>
\ No newline at end of file
pages/demo/lid/formRow.vue 0 → 100644
View file @ 85e3a971
<template>
<div class="mane-b">
<Form ref="formInline" :model="formInline" class="form-row">
<Row :gutter="16">
<Col span="4">
<FormItem prop="name">
<Select v-model="formInline.name" placeholder="请选择单位">
<Option value="beijing">New York</Option>
<Option value="shanghai">London</Option>
<Option value="shenzhen">Sydney</Option>
</Select>
</FormItem>
</Col>
<Col span="4">
<FormItem prop="company1">
<Select v-model="formInline.company" placeholder="请选择部门">
<Option value="beijing">New York</Option>
<Option value="shanghai">London</Option>
<Option value="shenzhen">Sydney</Option>
</Select>
</FormItem>
</Col>
<Col span="4">
<FormItem prop="company2">
<Select v-model="formInline.company" placeholder="请选择区域">
<Option value="beijing">New York</Option>
<Option value="shanghai">London</Option>
<Option value="shenzhen">Sydney</Option>
</Select>
</FormItem>
</Col>
<Col span="4">
<FormItem prop="company3">
<Select v-model="formInline.company3" placeholder="请选择街道">
<Option value="beijing">New York</Option>
<Option value="shanghai">London</Option>
<Option value="shenzhen">Sydney</Option>
</Select>
</FormItem>
</Col>
<Col span="4">
<FormItem prop="user">
<Select v-model="formInline.company3" placeholder="请选择状态">
<Option value="beijing">New York</Option>
<Option value="shanghai">London</Option>
<Option value="shenzhen">Sydney</Option>
</Select></Input>
</FormItem>
</Col>
<Col span="3" style="text-align: left;">
<FormItem>
<Input type="text" v-model="formInline.user" placeholder="请输入设备编号"></Input>
</FormItem>
</Col>
<Col span="1" style="text-align: left;">
<FormItem>
<Button @click="reset('formInline')">重置</Button>
</FormItem>
</Col>
</Row>
</Form>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
formInline: {},
};
},
methods: {
reset(){
}
},
};
</script>
<style lang="less" scoped>
</style>
pages/demo/lid/menu.vue 0 → 100644
View file @ 85e3a971
<template>
<div class="mane-b">
<Menu>
<Submenu name="1">
<template slot="title">
<Icon type="ios-paper" />功能导航
</template>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-people" />设备列表
</template>
<MenuItem name="2-2">活跃用户</MenuItem>
</Submenu>
<Submenu name="3">
<template slot="title">
<Icon type="ios-stats" />任务派工
</template>
<MenuGroup title="留存">
<MenuItem name="3-4">用户留存</MenuItem>
<MenuItem name="3-5">流失用户</MenuItem>
</MenuGroup>
</Submenu>
<Submenu name="4">
<template slot="title">
<Icon type="ios-paper" />状态信息
</template>
</Submenu>
<Submenu name="5">
<template slot="title">
<Icon type="ios-paper" />操作信息
</template>
</Submenu>
<Submenu name="6">
<template slot="title">
<Icon type="ios-paper" />单位管理
</template>
</Submenu>
</Menu>
</div>
</template>
<script>
export default {
name: "",
data() {
return {};
},
methods: {},
};
</script>
<style lang="less" scoped>
.mane-b {
.ivu-menu {
border-radius: 5px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment