Skip to content

M
mes-ui
Commit 07c8d9e9 authored by renjintao's avatar renjintao
Browse files
Options

demo lid

parent 84281cfc
Hide whitespace changes
Inline Side-by-side
Showing with 367 additions and 44 deletions
pages/demo/lid/components/echart3.vue 0 → 100644
View file @ 07c8d9e9
<template>
<div id="myChart3" class="echarts_box8"></div>
</template>
<script>
export default {
name: "echart3",
data() {
return {};
},
methods: {
loadEchart() {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById("myChart3"));
var option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
},
legend: {
orient: "horizontal",
left: "center",
top: "bottom",
data: ["异位报警", "可燃气超标", "有毒气体超标"],
},
color: ["#25cb7c", "#2ea0fb", "#00c9cb"],
series: [
{
name: "辖区内报警井盖状态",
type: "pie",
radius: ["20%", "30%"],
avoidLabelOverlap: false,
label: {
show: true,
position: "top",
},
emphasis: {
label: {
show: false,
fontSize: "30",
fontWeight: "bold",
},
},
labelLine: {
show: true,
},
data: [
{ value: 23, name: "异位报警" },
{ value: 37, name: "可燃气超标" },
{ value: 40, name: "有毒气体超标" },
],
},
],
};
// 绘制图表
myChart.setOption(option);
},
},
mounted() {
this.loadEchart();
},
};
</script>
<style scoped>
.echarts_box8 {
width: 300px;
height: 350px;
margin: 0 auto;
padding:0;
}
</style>
\ No newline at end of file
pages/demo/lid/components/sideEast.vue 0 → 100644
View file @ 07c8d9e9
<template>
<div class="demoDiv">
<Card style="width:100%; box-shadow: 0 0 10px #000;">
<p slot="title" class="tl">任务执行状态统计</p>
<div style="height:300px;">
<Echart3 class="echartPo" />
</div>
</Card>
<div class="mt30 treeDiv">
<Tree :data="data1"></Tree>
</div>
</div>
</template>
<script>
import Echart3 from "./echart3";
export default {
name: "sideEast",
components: {
Echart3,
},
data() {
return {
data1: [
{
title: "XX局",
expand: true,
children: [
{
title: "西安客整所",
expand: true,
children: [
{
title: "XA12345678990001",
expand: false,
children: [{ title: "XA12345678990001-01" }],
},
{
title: "XA12345678990001",
expand: false,
children: [{ title: "XA12345678990001-01" }],
},
{
title: "XA12345678990001",
expand: false,
children: [{ title: "XA12345678990001-01" }],
},
{
title: "XA12345678990001",
expand: false,
children: [{ title: "XA12345678990001-01" }],
},
{
title: "XA12345678990001",
expand: false,
children: [{ title: "XA12345678990001-01" }],
},
{
title: "XA12345678990001",
expand: false,
children: [{ title: "XA12345678990001-01" }],
},
{
title: "XA12345678990001",
expand: false,
children: [{ title: "XA12345678990001-01" }],
},
],
},
],
},
],
};
},
methods: {},
mounted() {},
};
</script>
<style scoped>
.treeDiv {
width: 320px;
background: #fff;
border-radius: 5px;
box-shadow: 0 0 10px #000;
text-align: left;
padding: 20px;
height: 310px;
overflow: auto;
}
.demoDiv .ivu-card-head {
background: #dedde4;
}
.echartPo {
position: absolute;
top: -20px;
left: 15px;
z-index: 4;
}
</style>
\ No newline at end of file
pages/demo/lid/components/sideWest.vue 0 → 100644
View file @ 07c8d9e9
<template>
<div>
<div class="gradient" >
<p>井盖总数</p>
<p><span class="f20 fwBold">1234</span>个</p>
</div>
<div class="mt30 gradient1" >
<p>正常数量</p>
<p><span class="f20 fwBold">1204</span>个</p>
</div>
<div class="mt30 gradient2" >
<p>报警数量</p>
<p><span class="f20 fwBold">30</span>个</p>
</div>
<div class="mt30 demoDiv">
<Card class="mt10" style="width:100%; box-shadow: 0 0 10px #000">
<p slot="title" class="tl">实时行车异常列车</p>
<div class="divInfo">
<p>地址：山西省西安市未央区</p>
<p>设备名称：凤城五路11号井盖</p>
<p>报警时间：2020-06-06 08:08:08</p>
<p class="red">报警数值：甲烷浓度-55%</p>
</div>
<divider></divider>
<div class="mt20 divInfo">
<p>地址：山西省西安市未央区</p>
<p>设备名称：凤城五路11号井盖</p>
<p>报警时间：2020-06-06 08:08:08</p>
<p class="red">报警数值：甲烷浓度-55%</p>
</div>
</Card>
</div>
</div>
</template>
<script>
export default {
name: "sideWest",
data() {
return {};
},
methods: {},
mounted() {},
};
</script>
<style scoped>
.gradient {
background: url(/imgshow/bg1.png) right top no-repeat,
-moz-linear-gradient(left, #43aaf9 0%, #917dfb 100%);
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #43aaf9),
color-stop(100%, #917dfb)
);
background: -webkit-linear-gradient(top, #43aaf9 0%, #917dfb 100%);
background: -o-linear-gradient(top, #43aaf9 0%, #917dfb 100%);
background: -ms-linear-gradient(top, #43aaf9 0%, #917dfb 100%);
background: url(/imgshow/bg1.png) right top no-repeat,
linear-gradient(to right, #43aaf9 0%, #917dfb 100%);
border-radius: 5px;
box-shadow: 0 0 10px #000;
color: white;
height: 100px;
width: 300px;
text-align: left;
padding:20px ;
}
.gradient1 {
background: url(/imgshow/bg3.png) right top no-repeat,
-moz-linear-gradient(left, #05E99C 0%, #7CF538 100%);
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #05E99C),
color-stop(100%, #7CF538)
);
background: -webkit-linear-gradient(top, #05E99C 0%, #7CF538 100%);
background: -o-linear-gradient(top, #05E99C 0%, #7CF538 100%);
background: -ms-linear-gradient(top, #05E99C 0%, #7CF538 100%);
background: url(/imgshow/bg3.png) right top no-repeat,
linear-gradient(to right, #05E99C 0%, #7CF538 100%);
border-radius: 5px;
box-shadow: 0 0 10px #000;
color: white;
height: 100px;
width: 300px;
text-align: left;
padding:20px ;
}
.gradient2 {
background: url(/imgshow/bg5.png) right top no-repeat,
-moz-linear-gradient(left, #F95577 0%, #FCA534 100%);
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #F95577),
color-stop(100%, #FCA534)
);
background: -webkit-linear-gradient(top, #F95577 0%, #FCA534 100%);
background: -o-linear-gradient(top, #F95577 0%, #FCA534 100%);
background: -ms-linear-gradient(top, #F95577 0%, #FCA534 100%);
background: url(/imgshow/bg5.png) right top no-repeat,
linear-gradient(to right, #F95577 0%, #FCA534 100%);
border-radius: 5px;
box-shadow: 0 0 10px #000;
color: white;
height: 100px;
width: 300px;
text-align: left;
padding:20px ;
}
.divInfo {
background: #fff;
padding: 0 20px;
}
.divInfo p {
text-align: left;
line-height: 26px;
}
.demoDiv .ivu-card-head {
background: #dedde4;
}
</style>
\ No newline at end of file
pages/demo/lid/index.vue
View file @ 07c8d9e9
<template>
<div class="bm-lid">
<!--
<div class="ad">
<div class="count">
<label>配属数量（列）</label>
......@@ -30,13 +31,19 @@
<div class="info fg">为京泸京广服务的动车所</div>
</div>
<div class="item">
<div class="block dot" v-width="60"></div>
<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="block line" v-width="60"></div>
<div class="info fg">规划中或在建动车所</div>
</div>
</div>-->
<div class="sideWest">
<SideWest></SideWest>
</div>
<div class="sideEast">
<SideEast></SideEast>
</div>
<baidu-map
class="map"
......@@ -103,7 +110,9 @@ 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';
import citys from "../city";
import SideEast from "./components/sideEast";
import SideWest from "./components/sideWest";
export default {
components: {
BaiduMap,
......@@ -111,7 +120,9 @@ export default {
BmNavigation,
BmMarkerClusterer,
BmMarker,
BmInfoWindow
BmInfoWindow,
SideEast,
SideWest,
},
data() {
return {
......@@ -125,8 +136,8 @@ export default {
{ car: "CRH381A", count: 9 },
{ car: "CRH382A", count: 13 },
{ car: "CRH384A", count: 19 },
{ car: "CRH388A", count: 24 }
]
{ car: "CRH388A", count: 24 },
],
},
zoom: 1,
eye: false,
......@@ -138,75 +149,75 @@ export default {
featureType: "land",
elementType: "geometry",
stylers: {
color: "#033361ff"
}
color: "#033361ff",
},
},
{
featureType: "tertiaryway",
elementType: "geometry",
stylers: {
visibility: "off"
}
visibility: "off",
},
},
{
featureType: "arterial",
elementType: "geometry",
stylers: {
visibility: "off"
}
visibility: "off",
},
},
{
featureType: "cityhighway",
elementType: "geometry",
stylers: {
visibility: "off"
}
visibility: "off",
},
},
{
featureType: "water",
elementType: "geometry",
stylers: {
color: "#4a90e2ff"
}
color: "#4a90e2ff",
},
},
{
featureType: "districtlabel",
elementType: "labels",
stylers: {
visibility: "on"
}
visibility: "on",
},
},
{
featureType: "districtlabel",
elementType: "labels.icon",
stylers: {
visibility: "on"
}
visibility: "on",
},
},
{
featureType: "districtlabel",
elementType: "labels.text.stroke",
stylers: {
weight: 0,
color: "#ffffff00"
}
color: "#ffffff00",
},
},
{
featureType: "districtlabel",
elementType: "labels.text.fill",
stylers: {
color: "#4a90e2ff",
weight: 10
}
weight: 10,
},
},
{
featureType: "road",
elementType: "geometry",
stylers: {
visibility: "off"
}
}
]
visibility: "off",
},
},
],
},
map: null,
markers: [],
......@@ -223,10 +234,10 @@ export default {
{ car: "CRH381A", count: 9 },
{ car: "CRH382A", count: 13 },
{ car: "CRH384A", count: 19 },
{ car: "CRH388A", count: 24 }
]
}
}
{ car: "CRH388A", count: 24 },
],
},
},
};
},
methods: {
......@@ -242,7 +253,7 @@ export default {
this.eye = !this.eye;
let ps = [];
if (this.eye) {
ps=citys;
ps = citys;
}
this.markers = ps;
},
......@@ -260,8 +271,8 @@ export default {
// console.log('data',data)
this.infoWindow.show = true;
this.infoWindow.info = data;
}
}
},
},
};
</script>
......@@ -345,12 +356,13 @@ export default {
right: 100px;
color: white;
padding: 10px 10px 0 10px;
>p{
font-size: 14px;
font-weight: bold;
line-height: 40px;
> p {
font-size: 14px;
font-weight: bold;
line-height: 40px;
}
.item {
.item {
.block {
height: 40px;
width: 60px;
......@@ -358,11 +370,11 @@ export default {
float: left;
margin-right: 10px;
}
.dot{
border: 1px dotted #ddd;
.dot {
border: 1px dotted #ddd;
}
.line{
border: 1px dashed #ddd;
.line {
border: 1px dashed #ddd;
}
.info {
padding-left: 20px;
......@@ -371,6 +383,23 @@ export default {
height: 60px;
}
}
.sideWest {
position: absolute;
width: 300px;
top: 40px;
left:30px;
text-align: center;
z-index: 4;
}
.sideEast
{
position: absolute;
width: 328px;
top: 40px;
right:30px;
text-align: center;
z-index: 4;
}
.map {
width: 100%;
height: 100%;
......
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